/* ============================================
여행 러너 — 풍부한 통합 페이지 CSS (스킨용)
티스토리 관리자 → 스킨 편집 → HTML →
직전에 삽입
============================================ */
/* ===== 공통 리셋 & 유틸 ===== */
.page-about, .page-privacy, .page-contact {
margin: 0;
padding: 0;
font-family: inherit;
color: #111827;
line-height: 1.75;
background: #fff;
-webkit-font-smoothing: antialiased;
}
.page-about *, .page-privacy *, .page-contact * {
box-sizing: border-box;
}
.page-about a, .page-privacy a, .page-contact a {
text-decoration: none;
color: inherit;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 구분선 */
.divider {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 64px 0;
color: #d1d5db;
}
.divider::before,
.divider::after {
content: '';
flex: 1;
height: 1px;
background: #e5e7eb;
max-width: 120px;
}
.divider-dot {
width: 6px;
height: 6px;
background: #d1d5db;
border-radius: 50%;
}
/* 섹션 공통 */
.section-wrap {
max-width: 780px;
margin: 0 auto;
padding: 0 24px;
}
.section-wide {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
}
/* fade-in */
.fade-in {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* ===== About 페이지 ===== */
.page-about .ab-hero {
padding: 100px 24px 80px;
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 60%);
text-align: center;
}
.page-about .ab-hero-inner {
opacity: 0;
animation: abHeroFadeIn 1s ease-out 0.3s forwards;
}
@keyframes abHeroFadeIn {
to { opacity: 1; }
}
.page-about .ab-hero h1 {
font-size: clamp(2.4rem, 6vw, 4rem);
font-weight: 900;
margin: 0 0 20px;
letter-spacing: -0.03em;
line-height: 1.15;
color: #0f172a;
}
.page-about .ab-hero .ab-sub {
font-size: clamp(1.05rem, 2.2vw, 1.35rem);
color: #475569;
max-width: 640px;
margin: 0 auto 28px;
line-height: 1.7;
}
.page-about .ab-hero .ab-meta-line {
display: inline-flex;
align-items: center;
gap: 16px;
font-size: 0.82rem;
color: #94a3b8;
font-weight: 500;
}
.page-about .ab-hero .ab-meta-line span {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* 서술형 섹션 */
.page-about .ab-narrative {
padding: 72px 24px;
}
.page-about .ab-narrative h2 {
font-size: clamp(1.6rem, 3.5vw, 2.2rem);
font-weight: 800;
margin: 0 0 28px;
color: #0f172a;
letter-spacing: -0.02em;
line-height: 1.3;
}
.page-about .ab-narrative h3 {
font-size: 1.15rem;
font-weight: 700;
margin: 40px 0 14px;
color: #0f172a;
}
.page-about .ab-narrative p {
font-size: 1.05rem;
color: #374151;
margin: 0 0 18px;
line-height: 1.85;
}
.page-about .ab-narrative ul {
margin: 0 0 18px;
padding-left: 22px;
}
.page-about .ab-narrative li {
font-size: 1rem;
color: #374151;
margin-bottom: 10px;
line-height: 1.7;
}
.page-about .ab-narrative blockquote {
border-left: 3px solid #0ea5e9;
padding-left: 20px;
margin: 28px 0;
color: #475569;
font-style: italic;
font-size: 1.05rem;
line-height: 1.8;
}
/* 미션 카드 (4단) */
.page-about .ab-mission {
padding: 80px 24px;
background: #f8fafc;
}
.page-about .ab-mission-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.page-about .ab-mission-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 36px 24px;
text-align: center;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-about .ab-mission-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 48px rgba(15, 23, 42, 0.1);
border-color: #cbd5e1;
}
.page-about .ab-mission-card .ab-icon {
width: 44px;
height: 44px;
margin: 0 auto 16px;
color: #0ea5e9;
}
.page-about .ab-mission-card .ab-number {
font-size: 2rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 6px;
}
.page-about .ab-mission-card .ab-label {
font-size: 0.88rem;
color: #64748b;
line-height: 1.5;
}
/* 핵심 가치 (가로 배너) */
.page-about .ab-values {
padding: 80px 24px;
}
.page-about .ab-values-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.page-about .ab-value-card {
display: flex;
gap: 18px;
padding: 28px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-about .ab-value-card:hover {
border-color: #0ea5e9;
box-shadow: 0 8px 24px rgba(14, 165, 233, 0.06);
}
.page-about .ab-value-card .ab-icon {
width: 36px;
height: 36px;
color: #0ea5e9;
flex-shrink: 0;
margin-top: 2px;
}
.page-about .ab-value-card h4 {
font-size: 1.05rem;
font-weight: 700;
margin: 0 0 8px;
color: #0f172a;
}
.page-about .ab-value-card p {
font-size: 0.9rem;
color: #64748b;
margin: 0;
line-height: 1.6;
}
/* 타임라인 */
.page-about .ab-timeline-wrap {
padding: 80px 24px;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 50%, #ffffff 100%);
}
.page-about .ab-timeline {
position: relative;
max-width: 720px;
margin: 0 auto;
padding-left: 36px;
}
.page-about .ab-timeline::before {
content: '';
position: absolute;
left: 8px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, #e2e8f0, #0ea5e9, #e2e8f0);
}
.page-about .ab-timeline-item {
position: relative;
padding-bottom: 48px;
}
.page-about .ab-timeline-item:last-child {
padding-bottom: 0;
}
.page-about .ab-timeline-dot {
position: absolute;
left: -32px;
top: 6px;
width: 16px;
height: 16px;
background: #fff;
border: 3px solid #0ea5e9;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15);
}
.page-about .ab-timeline-date {
font-size: 0.8rem;
font-weight: 700;
color: #0ea5e9;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 8px;
}
.page-about .ab-timeline-item h4 {
font-size: 1.15rem;
font-weight: 700;
margin: 0 0 10px;
color: #0f172a;
}
.page-about .ab-timeline-item p {
font-size: 0.95rem;
color: #475569;
margin: 0;
line-height: 1.7;
}
/* 파트너 */
.page-about .ab-partners {
padding: 60px 24px;
background: #f8fafc;
text-align: center;
}
.page-about .ab-partners-label {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #94a3b8;
margin-bottom: 32px;
}
.page-about .ab-partners-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 28px 40px;
}
.page-about .ab-partner-logo {
font-size: 1.05rem;
font-weight: 700;
color: #9ca3af;
filter: grayscale(100%);
opacity: 0.65;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
padding: 10px 18px;
border: 1px solid transparent;
border-radius: 8px;
}
.page-about .ab-partner-logo:hover {
color: #0ea5e9;
filter: grayscale(0%);
opacity: 1;
border-color: #e2e8f0;
background: #fff;
}
/* 프로필 대형 */
.page-about .ab-profile-wrap {
padding: 100px 24px;
background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
}
.page-about .ab-profile {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 640px;
margin: 0 auto;
}
.page-about .ab-profile-img {
width: 160px;
height: 160px;
border-radius: 50%;
background: #e2e8f0;
margin-bottom: 28px;
overflow: hidden;
border: 4px solid #fff;
box-shadow: 0 12px 40px rgba(15, 23, 42, 0.1);
}
.page-about .ab-profile-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.page-about .ab-profile h3 {
font-size: 1.6rem;
font-weight: 800;
margin: 0 0 8px;
color: #0f172a;
}
.page-about .ab-profile .ab-role {
font-size: 0.9rem;
color: #64748b;
margin-bottom: 24px;
font-weight: 500;
}
.page-about .ab-profile .ab-bio {
font-size: 1.05rem;
color: #475569;
margin-bottom: 28px;
line-height: 1.85;
}
.page-about .ab-profile .ab-socials {
display: flex;
gap: 12px;
margin-bottom: 24px;
}
.page-about .ab-profile .ab-social {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
color: #475569;
}
.page-about .ab-profile .ab-social:hover {
border-color: #0ea5e9;
color: #0ea5e9;
}
.page-about .ab-profile .ab-email {
font-size: 0.95rem;
color: #0ea5e9;
font-weight: 700;
}
.page-about .ab-profile .ab-email:hover {
color: #0284c7;
}
/* CTA 배너 */
.page-about .ab-cta-banner {
padding: 80px 24px;
text-align: center;
background: #0f172a;
color: #fff;
}
.page-about .ab-cta-banner h2 {
font-size: clamp(1.5rem, 3.5vw, 2.2rem);
font-weight: 800;
margin: 0 0 12px;
}
.page-about .ab-cta-banner p {
font-size: 1.05rem;
color: #94a3b8;
margin: 0 0 28px;
}
.page-about .ab-cta-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: #0ea5e9;
color: #fff;
padding: 16px 36px;
border-radius: 12px;
font-size: 1rem;
font-weight: 700;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-about .ab-cta-btn:hover {
background: #0284c7;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(14, 165, 233, 0.3);
}
.page-about .ab-cta-btn svg {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-about .ab-cta-btn:hover svg {
transform: translateX(4px);
}
/* 홈 링크 */
.page-about .ab-home-link,
.page-privacy .pr-home-link,
.page-contact .ct-home-link {
text-align: center;
padding: 48px 24px 100px;
}
.page-about .ab-home-link a,
.page-privacy .pr-home-link a,
.page-contact .ct-home-link a {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.95rem;
font-weight: 600;
color: #64748b;
}
.page-about .ab-home-link a:hover,
.page-privacy .pr-home-link a:hover,
.page-contact .ct-home-link a:hover {
color: #0ea5e9;
}
/* ===== Privacy Policy 페이지 ===== */
.page-privacy .pr-hero {
text-align: center;
padding: 100px 24px 70px;
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
border-bottom: 1px solid #e2e8f0;
}
.page-privacy .pr-hero-content {
opacity: 0;
animation: prHeroFadeIn 0.9s ease-out 0.2s forwards;
}
@keyframes prHeroFadeIn {
to { opacity: 1; }
}
.page-privacy .pr-hero h1 {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 900;
margin: 0 0 10px;
letter-spacing: -0.03em;
color: #0f172a;
}
.page-privacy .pr-hero .pr-sub {
font-size: 1.1rem;
color: #64748b;
font-weight: 500;
margin-bottom: 28px;
}
.page-privacy .pr-hero .pr-dates {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px 28px;
font-size: 0.85rem;
color: #475569;
}
.page-privacy .pr-hero .pr-dates span {
display: inline-flex;
align-items: center;
gap: 6px;
background: #f1f5f9;
padding: 6px 14px;
border-radius: 20px;
}
.page-privacy .pr-hero .pr-dates .pr-label {
font-weight: 700;
color: #0f172a;
}
/* 목차 네비 */
.page-privacy .pr-mobile-tabs {
display: none;
overflow-x: auto;
white-space: nowrap;
padding: 16px 24px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
-webkit-overflow-scrolling: touch;
}
.page-privacy .pr-mobile-tabs a {
display: inline-block;
padding: 6px 14px;
margin-right: 8px;
font-size: 0.8rem;
font-weight: 600;
color: #475569;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 20px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-privacy .pr-mobile-tabs a:hover,
.page-privacy .pr-mobile-tabs a.pr-active {
background: #0ea5e9;
color: #fff;
border-color: #0ea5e9;
}
.page-privacy .pr-layout {
display: flex;
gap: 48px;
max-width: 1100px;
margin: 0 auto;
padding: 48px 24px 80px;
}
.page-privacy .pr-sidebar {
width: 240px;
flex-shrink: 0;
}
.page-privacy .pr-sidebar-inner {
position: sticky;
top: 28px;
}
.page-privacy .pr-sidebar h3 {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #94a3b8;
margin: 0 0 18px;
}
.page-privacy .pr-sidebar ul {
list-style: none;
margin: 0;
padding: 0;
border-left: 2px solid #e2e8f0;
}
.page-privacy .pr-sidebar li { margin: 0; }
.page-privacy .pr-sidebar a {
display: block;
padding: 9px 14px;
font-size: 0.85rem;
color: #475569;
border-left: 2px solid transparent;
margin-left: -2px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 0 6px 6px 0;
}
.page-privacy .pr-sidebar a:hover,
.page-privacy .pr-sidebar a.pr-active {
color: #0ea5e9;
border-left-color: #0ea5e9;
background: rgba(14, 165, 233, 0.05);
}
.page-privacy .pr-content {
flex: 1;
min-width: 0;
}
/* 섹션 */
.page-privacy .pr-section {
margin-bottom: 56px;
padding-bottom: 56px;
border-bottom: 1px solid #e2e8f0;
}
.page-privacy .pr-section:last-of-type {
border-bottom: none;
}
.page-privacy .pr-section h2 {
font-size: 1.35rem;
font-weight: 800;
margin: 0 0 24px;
color: #0f172a;
display: flex;
align-items: center;
gap: 12px;
letter-spacing: -0.01em;
}
.page-privacy .pr-section h2 .pr-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: #0ea5e9;
color: #fff;
font-size: 0.85rem;
font-weight: 800;
border-radius: 8px;
flex-shrink: 0;
}
.page-privacy .pr-section p {
font-size: 0.98rem;
color: #374151;
margin: 0 0 16px;
line-height: 1.8;
}
.page-privacy .pr-section ul {
margin: 0 0 16px;
padding-left: 22px;
}
.page-privacy .pr-section li {
font-size: 0.96rem;
color: #374151;
margin-bottom: 8px;
line-height: 1.7;
}
.page-privacy .pr-section .pr-law {
display: inline-block;
background: #f1f5f9;
color: #475569;
font-size: 0.78rem;
padding: 5px 12px;
border-radius: 6px;
margin-top: 10px;
font-weight: 500;
}
/* 박스 */
.page-privacy .pr-box {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 28px;
margin: 20px 0;
}
.page-privacy .pr-box h4 {
font-size: 1rem;
font-weight: 700;
margin: 0 0 14px;
color: #0f172a;
}
/* 테이블 */
.page-privacy .pr-table-wrap {
overflow-x: auto;
margin: 20px 0;
border-radius: 10px;
border: 1px solid #e2e8f0;
}
.page-privacy .pr-table {
width: 100%;
border-collapse: collapse;
font-size: 0.88rem;
min-width: 520px;
}
.page-privacy .pr-table th,
.page-privacy .pr-table td {
padding: 14px 16px;
text-align: left;
border-bottom: 1px solid #e2e8f0;
}
.page-privacy .pr-table th {
background: #f1f5f9;
font-weight: 700;
color: #0f172a;
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.page-privacy .pr-table td {
color: #334155;
}
.page-privacy .pr-table tr:last-child td {
border-bottom: none;
}
.page-privacy .pr-table tr:nth-child(even) td {
background: #fafbfc;
}
/* 쿠키 카드 */
.page-privacy .pr-cookie-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin: 20px 0;
}
.page-privacy .pr-cookie-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 24px 18px;
text-align: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-privacy .pr-cookie-card:hover {
border-color: #0ea5e9;
box-shadow: 0 4px 16px rgba(14, 165, 233, 0.08);
}
.page-privacy .pr-cookie-card h4 {
font-size: 0.88rem;
font-weight: 700;
margin: 0 0 8px;
color: #0f172a;
}
.page-privacy .pr-cookie-card p {
font-size: 0.82rem;
color: #64748b;
margin: 0;
line-height: 1.5;
}
/* 연락처 박스 */
.page-privacy .pr-contact-box {
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 16px;
padding: 40px;
text-align: center;
margin-top: 56px;
border: 1px solid #e2e8f0;
}
.page-privacy .pr-contact-box h3 {
font-size: 1.2rem;
font-weight: 800;
margin: 0 0 12px;
color: #0f172a;
}
.page-privacy .pr-contact-box p {
font-size: 0.95rem;
color: #475569;
margin: 0 0 20px;
}
.page-privacy .pr-contact-box .pr-email {
display: inline-block;
font-size: 1.05rem;
font-weight: 700;
color: #0ea5e9;
padding: 12px 28px;
background: #fff;
border-radius: 10px;
border: 1px solid #e2e8f0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-privacy .pr-contact-box .pr-email:hover {
background: #0ea5e9;
color: #fff;
border-color: #0ea5e9;
box-shadow: 0 4px 16px rgba(14, 165, 233, 0.2);
}
.page-privacy .pr-contact-box .pr-links {
margin-top: 24px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px 24px;
}
.page-privacy .pr-contact-box .pr-links a {
font-size: 0.88rem;
color: #64748b;
text-decoration: underline;
text-underline-offset: 3px;
}
.page-privacy .pr-contact-box .pr-links a:hover {
color: #0ea5e9;
}
/* ===== Contact 페이지 ===== */
.page-contact .ct-hero {
text-align: center;
padding: 100px 24px 70px;
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.page-contact .ct-hero-content {
opacity: 0;
animation: ctHeroFadeIn 0.9s ease-out 0.2s forwards;
}
@keyframes ctHeroFadeIn {
to { opacity: 1; }
}
.page-contact .ct-hero h1 {
font-size: clamp(2.4rem, 6vw, 3.6rem);
font-weight: 900;
margin: 0 0 16px;
letter-spacing: -0.03em;
color: #0f172a;
}
.page-contact .ct-hero .ct-sub {
font-size: clamp(1.05rem, 2.2vw, 1.3rem);
color: #475569;
margin-bottom: 20px;
}
.page-contact .ct-hero .ct-reply {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
color: #64748b;
background: #f1f5f9;
padding: 8px 18px;
border-radius: 20px;
font-weight: 500;
}
/* 연락처 카드 */
.page-contact .ct-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 960px;
margin: 0 auto;
padding: 0 24px 72px;
}
.page-contact .ct-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 36px 28px;
text-align: center;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.page-contact .ct-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 48px rgba(15, 23, 42, 0.08);
border-color: #cbd5e1;
}
.page-contact .ct-card .ct-icon {
width: 48px;
height: 48px;
margin: 0 auto 18px;
color: #0ea5e9;
}
.page-contact .ct-card h3 {
font-size: 1.05rem;
font-weight: 700;
margin: 0 0 8px;
color: #0f172a;
}
.page-contact .ct-card p {
font-size: 0.92rem;
color: #475569;
margin: 0;
word-break: break-all;
}
.page-contact .ct-card .ct-note {
font-size: 0.78rem;
color: #94a3b8;
margin-top: 10px;
}
/* 문의 폼 UI (데코레이션) */
.page-contact .ct-form-section {
padding: 72px 24px;
background: #f8fafc;
}
.page-contact .ct-form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 720px;
margin: 0 auto 20px;
}
.page-contact .ct-form-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.page-contact .ct-form-field label {
font-size: 0.82rem;
font-weight: 600;
color: #374151;
}
.page-contact .ct-form-field input,
.page-contact .ct-form-field textarea {
padding: 12px 14px;
border: 1px solid #d1d5db;
border-radius: 10px;
font-size: 0.95rem;
color: #111827;
background: #fff;
font-family: inherit;
transition: border-color 0.3s;
}
.page-contact .ct-form-field input:focus,
.page-contact .ct-form-field textarea:focus {
outline: none;
border-color: #0ea5e9;
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.page-contact .ct-form-field textarea {
min-height: 140px;
resize: vertical;
}
.page-contact .ct-form-full {
grid-column: 1 / -1;
}
.page-contact .ct-form-hint {
text-align: center;
font-size: 0.85rem;
color: #6b7280;
margin-top: 12px;
}
.page-contact .ct-form-hint a {
color: #0ea5e9;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
/* 아코디언 */
.page-contact .ct-accordion {
border: 1px solid #e2e8f0;
border-radius: 14px;
overflow: hidden;
}
.page-contact .ct-accordion-item {
border-bottom: 1px solid #e2e8f0;
}
.page-contact .ct-accordion-item:last-child {
border-bottom: none;
}
.page-contact .ct-accordion-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 26px;
cursor: pointer;
background: #fff;
transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-contact .ct-accordion-header:hover {
background: #f8fafc;
}
.page-contact .ct-accordion-header h4 {
font-size: 1.05rem;
font-weight: 700;
margin: 0;
color: #0f172a;
}
.page-contact .ct-accordion-header .ct-icon-wrap {
width: 24px;
height: 24px;
color: #94a3b8;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
}
.page-contact .ct-accordion-item.ct-open .ct-icon-wrap {
transform: rotate(45deg);
color: #0ea5e9;
}
.page-contact .ct-accordion-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-contact .ct-accordion-item.ct-open .ct-accordion-body {
max-height: 400px;
}
.page-contact .ct-accordion-inner {
padding: 0 26px 24px;
font-size: 0.96rem;
color: #475569;
line-height: 1.8;
}
/* FAQ */
.page-contact .ct-faq .ct-accordion-header {
padding: 20px 26px;
}
.page-contact .ct-faq .ct-accordion-header h4 {
font-size: 0.98rem;
font-weight: 600;
}
.page-contact .ct-faq .ct-accordion-inner {
font-size: 0.94rem;
}
/* 외부 링크 */
.page-contact .ct-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
padding: 24px 24px 72px;
}
.page-contact .ct-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
font-size: 0.92rem;
font-weight: 600;
color: #475569;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-contact .ct-link:hover {
border-color: #0ea5e9;
color: #0ea5e9;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(14, 165, 233, 0.1);
}
.page-contact .ct-link svg {
width: 16px;
height: 16px;
}
/* 토스트 */
.page-contact .ct-toast {
position: fixed;
bottom: 28px;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: #0f172a;
color: #fff;
padding: 14px 28px;
border-radius: 10px;
font-size: 0.92rem;
font-weight: 600;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s ease;
z-index: 9999;
white-space: nowrap;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.page-contact .ct-toast.ct-show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* SNS 아이콘 그리드 (Contact) */
.page-contact .ct-social-grid {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 48px;
}
.page-contact .ct-social-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
color: #64748b;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-contact .ct-social-icon:hover {
border-color: #0ea5e9;
color: #0ea5e9;
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(14, 165, 233, 0.1);
}
/* ===== Mobile ===== */
@media (max-width: 767px) {
.page-about .ab-mission-grid {
grid-template-columns: repeat(2, 1fr);
}
.page-about .ab-values-grid {
grid-template-columns: 1fr;
}
.page-about .ab-timeline {
padding-left: 28px;
}
.page-about .ab-timeline-dot {
left: -26px;
}
.page-privacy .pr-sidebar {
display: none;
}
.page-privacy .pr-mobile-tabs {
display: block;
}
.page-privacy .pr-layout {
flex-direction: column;
padding-top: 24px;
}
.page-privacy .pr-cookie-grid {
grid-template-columns: 1fr;
}
.page-privacy .pr-table-wrap {
margin: 12px -8px;
padding: 0 8px;
}
.page-contact .ct-cards {
grid-template-columns: 1fr;
}
.page-contact .ct-form-grid {
grid-template-columns: 1fr;
}
.page-contact .ct-accordion-item.ct-open .ct-accordion-body,
.page-contact .ct-accordion-body {
max-height: 500px !important;
}
.page-contact .ct-accordion-item .ct-icon-wrap {
transform: rotate(45deg);
color: #0ea5e9;
}
}
@media (max-width: 480px) {
.page-about .ab-mission-grid {
grid-template-columns: 1fr;
}
}