/* ==========================================================================
   design-v2.css — 디자인 리파인 레이어
   --------------------------------------------------------------------------
   styles.css 뒤에 로드되어 "보이는 품질"만 끌어올린다.
   원칙:
     1. 레이아웃(display / grid-template / flex-direction / width)은 건드리지 않는다.
     2. 토큰(:root) 재정의로 17,000줄 전체에 한 번에 반영시킨다.
     3. 개별 컴포넌트는 깊이·여백·타이포만 다듬는다.
   메인페이지(index.html)에는 로드하지 않는다.
   ========================================================================== */

/* ==========================================================================
   1. 토큰 재정의 — 여기가 가장 큰 레버리지
   ========================================================================== */
:root {
    /* --- 잉크 스케일: 순수 회색 → 살짝 푸른기가 도는 뉴트럴 --- */
    --gray-50:  #F8FAFC;
    --gray-100: #F2F5F9;
    --gray-200: #E9EDF4;
    --gray-300: #D6DDE8;
    --gray-400: #99A3B5;
    --gray-500: #6E7891;
    --gray-600: #4A5568;
    --gray-700: #333D52;
    --gray-800: #1C2536;
    --gray-900: #0D1424;

    /* --- 경계선: 얇고 옅게. 진한 선은 싸구려로 보인다 --- */
    --border:       #E9EDF4;
    --border-light: #F2F5F9;

    /* --- 배경 --- */
    --bg-subtle:   #F8FAFC;
    --bg-gradient: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);

    /* --- 그림자: 단일 그림자 → 2겹 레이어링. 깊이감의 핵심 --- */
    --shadow-sm:    0 1px 2px rgba(13,20,36,.04);
    --shadow:       0 1px 3px rgba(13,20,36,.04), 0 4px 12px rgba(13,20,36,.045);
    --shadow-md:    0 2px 6px rgba(13,20,36,.045), 0 10px 26px rgba(13,20,36,.06);
    --shadow-lg:    0 3px 10px rgba(13,20,36,.05), 0 18px 46px rgba(13,20,36,.08);
    --shadow-xl:    0 6px 18px rgba(13,20,36,.06), 0 32px 76px rgba(13,20,36,.11);
    --shadow-card:  0 1px 3px rgba(13,20,36,.04), 0 6px 18px rgba(20,40,160,.045);
    --shadow-hover: 0 4px 12px rgba(13,20,36,.06), 0 22px 52px rgba(20,40,160,.11);

    /* --- 라운드: 한 단계씩 키운다 --- */
    --radius-sm: 10px;
    --radius:    16px;
    --radius-lg: 24px;
    --radius-xl: 32px;

    /* --- 섹션 리듬: 여백이 곧 격 --- */
    --section-padding: 120px;

    /* --- 이징: 스프링 계열로 교체 --- */
    --transition:        all .24s cubic-bezier(.2,.8,.2,1);
    --transition-slow:   all .38s cubic-bezier(.2,.8,.2,1);
    --transition-bounce: all .42s cubic-bezier(.34,1.4,.64,1);

    /* --- v2 전용 --- */
    --v2-ease:  cubic-bezier(.2,.8,.2,1);
    --v2-spring: cubic-bezier(.34,1.4,.64,1);
}

/* ==========================================================================
   2. 타이포그래피 — 자간을 조이면 즉시 고급스러워진다
   ========================================================================== */
body {
    letter-spacing: -.011em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: var(--gray-800);
}

/* 숫자는 표·통계에서만 고정폭으로. 본문에 tnum을 걸면 자간이 벌어져 보인다. */
table, .stat-card, .stat, .number, .price, .amount, .count, [class*="stat-"] {
    font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p  { text-wrap: pretty; }

.section-title,
.page-title,
.hero-title {
    letter-spacing: -.042em;
    line-height: 1.2;
    font-weight: 800;
    color: var(--gray-900);
}
.hero-title { font-size: clamp(38px, 5.6vw, 62px); }
.section-title { font-size: clamp(30px, 4.4vw, 46px); }

.section-subtitle,
.section-desc,
.hero-subtitle,
.hero-description {
    letter-spacing: -.014em;
    line-height: 1.78;
    color: var(--gray-600);
}
.hero-subtitle, .hero-description { font-size: clamp(16.5px, 1.8vw, 19px); }

h3, .card-title, .feature-title { letter-spacing: -.032em; line-height: 1.42; }
h4 { letter-spacing: -.028em; }

.section-header { margin-bottom: 64px; }
.section-label,
.section-badge,
.eyebrow {
    letter-spacing: .09em;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12.5px;
}

/* 강조 텍스트가 촌스럽게 튀지 않도록 */
.highlight, .text-primary, .accent-text { letter-spacing: inherit; }

/* ==========================================================================
   3. 콘텐츠 페이지 시스템 — .page-hero / .section / .cta-band
   --------------------------------------------------------------------------
   이 사이트 하위 페이지 대부분이 쓰는 실제 클래스. 여기가 인상을 좌우한다.
   ========================================================================== */

/* --- 페이지 히어로: 납작한 파란 사각형 → 깊이 있는 메시 그라디언트 --- */
.page-hero {
    position: relative;
    overflow: hidden;
    padding: 88px 0 80px;
    background:
        radial-gradient(900px 520px at 84% 6%, rgba(41,98,255,.55), transparent 60%),
        radial-gradient(700px 480px at 6% 96%, rgba(10,20,90,.55), transparent 62%),
        linear-gradient(142deg, #0F1C6B 0%, #1428A0 46%, #1E44C8 100%);
}
.page-hero::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(circle at 50% 34%, #000 0%, transparent 74%);
    mask-image: radial-gradient(circle at 50% 34%, #000 0%, transparent 74%);
}
.page-hero::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}
.page-hero > .container { position: relative; z-index: 2; }
.page-hero h1 {
    font-size: clamp(30px, 4.4vw, 47px);
    letter-spacing: -.045em;
    line-height: 1.2;
    margin-bottom: 20px;
}
.page-hero-sub {
    font-size: clamp(15.5px, 1.9vw, 19px);
    line-height: 1.76;
    letter-spacing: -.016em;
    color: rgba(255,255,255,.82);
}
.page-hero-sub strong { color: #FFD54A; }
.page-hero .breadcrumb {
    font-size: 13px;
    letter-spacing: -.01em;
    color: rgba(255,255,255,.62);
    margin-bottom: 20px;
}
.page-hero .breadcrumb a { color: rgba(255,255,255,.82); transition: color .2s; }
.page-hero .breadcrumb a:hover { color: #fff; }
.page-hero-actions { gap: 12px; margin-top: 32px; }
.page-hero .btn-outline {
    background: rgba(255,255,255,.07);
    border: 1.5px solid rgba(255,255,255,.32);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.page-hero .btn-outline:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.6); }

/* --- 섹션 리듬 ---
   기존: 모든 .section 이 76px 상하 → 연속되면 152px 가 벌어져 글이 끊긴다.
   변경: 같은 배경이 이어질 땐 좁히고(96px), 배경이 바뀔 때만 충분히 띄운다. */
.section { padding: 64px 0; }
.section + .section { padding-top: 16px; }
.section-alt + .section-alt { padding-top: 16px; }
.section + .section-alt,
.section-alt + .section { padding-top: 64px; }
.page-hero + .section { padding-top: 72px; }
.section-alt {
    background: linear-gradient(180deg, #F5F8FC 0%, #F1F5FA 100%);
    border-top: 1px solid rgba(233,237,244,.9);
    border-bottom: 1px solid rgba(233,237,244,.9);
}
.section h2 {
    font-size: clamp(24px, 3.2vw, 34px);
    letter-spacing: -.04em;
    line-height: 1.3;
    color: var(--gray-900);
    margin-bottom: 22px;
}
.section h3 { letter-spacing: -.034em; color: var(--gray-900); }
.section p { color: var(--gray-600); letter-spacing: -.013em; }

/* --- 섹션 헤더 밑 파란 막대: 요즘 감각이 아니다. 얇고 짧게 --- */
.section-header::after {
    width: 34px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #2962FF, rgba(41,98,255,.25));
    margin-top: 18px;
}

/* --- CTA 밴드 --- */
.cta-band {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(760px 460px at 18% 10%, rgba(41,98,255,.34), transparent 62%),
        radial-gradient(820px 500px at 84% 92%, rgba(20,40,160,.5), transparent 62%),
        linear-gradient(146deg, #0A1029 0%, #14213d 52%, #1428A0 100%);
}
.cta-band > .container { position: relative; z-index: 2; }
.cta-band h2 { letter-spacing: -.042em; }
.cta-band p { color: rgba(255,255,255,.76); letter-spacing: -.014em; }

/* --- 어두운 배경 위 텍스트 보호 ---
   위의 `.section h2/h3/p` 색상 지정이 어두운 배경 섹션까지 덮어써서
   남색 위에 남색 글씨가 되는 사고를 막는다. 반드시 그 뒤에 와야 한다. */
.cta-band,
.cta-band h1, .cta-band h2, .cta-band h3, .cta-band h4,
.cta-band .section-title,
.page-hero, .page-hero h1, .page-hero h2, .page-hero h3,
[class*="dark"] h2, [class*="dark"] h3,
.section--dark h2, .section--dark h3, .section--dark p {
    color: #fff;
}
.cta-band p, .cta-band li, .cta-band .section-desc { color: rgba(255,255,255,.78); }
.cta-band strong, .page-hero strong { color: #FFD54A; }
.cta-band .check-list li,
.cta-band .check-list li strong { color: rgba(255,255,255,.9); }

/* --- 데이터 표: 진한 파란 헤더 → 옅은 헤더 + 넉넉한 셀 --- */
.data-table {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.data-table thead th {
    background: #F5F8FC;
    color: var(--gray-700);
    font-weight: 800;
    font-size: 13.5px;
    letter-spacing: .01em;
    border-bottom: 1px solid var(--border);
}
.data-table th, .data-table td { padding: 16px 20px; }
.data-table tbody th[scope="row"] {
    background: #FCFDFE;
    color: var(--gray-800);
    font-weight: 800;
    letter-spacing: -.022em;
}
.data-table td { color: var(--gray-600); line-height: 1.68; }
.data-table tbody tr { transition: background .18s ease; }
.data-table tbody tr:hover { background: #FAFCFE; }
.data-table tbody tr:hover th[scope="row"] { background: #F5F8FC; }

/* --- 체크 리스트 --- */
.check-list li { color: var(--gray-600); letter-spacing: -.013em; }
.check-list li strong { color: var(--gray-900); font-weight: 800; }

/* --- 요약 박스 계열 --- */
.summary-box, .highlight-box, .note-box, .callout {
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   4. 카드 — 깊이와 호버
   ========================================================================== */
.card,
.feature-card,
.product-card,
.case-card,
.guide-card,
.info-card,
.stat-card,
.service-card,
.benefit-card,
.step-card,
.review-card,
.faq-item,
.content-card,
.list-card,
.hub-card,
.region-card,
.combo-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    background: #fff;
    transition: transform .34s var(--v2-ease), box-shadow .34s var(--v2-ease), border-color .34s var(--v2-ease);
}
.card:hover,
.feature-card:hover,
.product-card:hover,
.case-card:hover,
.guide-card:hover,
.info-card:hover,
.service-card:hover,
.benefit-card:hover,
.hub-card:hover,
.region-card:hover,
.combo-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
    border-color: #DDE4EF;
}

/* 카드 안 아이콘 박스 */
.card-icon, .feature-icon, .service-icon, .benefit-icon, .icon-box {
    border-radius: 16px;
}

/* ==========================================================================
   5. 버튼 — 여백, 무게, 스프링
   ========================================================================== */
.btn, .button, .cta-button, .btn-primary, .btn-secondary, .btn-outline {
    border-radius: 14px;
    font-weight: 800;
    letter-spacing: -.022em;
    transition: transform .24s var(--v2-spring), box-shadow .24s var(--v2-ease), background .2s ease;
}
.btn-lg, .btn-large { padding: 18px 36px; font-size: 17px; }

.btn-primary {
    background: linear-gradient(135deg, #1428A0 0%, #2962FF 100%);
    box-shadow: 0 2px 6px rgba(20,40,160,.18), 0 12px 30px rgba(20,40,160,.24);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(20,40,160,.2), 0 20px 44px rgba(20,40,160,.32);
}
.btn-secondary, .btn-outline {
    border-radius: 14px;
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.btn-secondary:hover, .btn-outline:hover {
    transform: translateY(-2px);
    border-color: #CBD5E5;
    box-shadow: var(--shadow-md);
}

/* 헤더 CTA */
.header-cta {
    border-radius: 12px;
    font-weight: 800;
    letter-spacing: -.022em;
    box-shadow: 0 2px 6px rgba(20,40,160,.16), 0 8px 22px rgba(20,40,160,.18);
    transition: transform .22s var(--v2-spring), box-shadow .22s var(--v2-ease);
}
.header-cta:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(20,40,160,.2), 0 14px 32px rgba(20,40,160,.26); }

/* ==========================================================================
   6. 헤더 — 유리질
   ========================================================================== */
.header, header.header {
    background: rgba(255,255,255,.74);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid rgba(233,237,244,.86);
    box-shadow: none;
}
.header.scrolled, .header.sticky {
    background: rgba(255,255,255,.86);
    box-shadow: 0 1px 3px rgba(13,20,36,.04), 0 8px 28px rgba(13,20,36,.06);
}
.nav-link { font-weight: 700; letter-spacing: -.022em; transition: color .2s ease; }

/* 메뉴가 11개까지 늘어난 페이지(cases, guide 등)에서 .nav-list 가 부모보다
   166px 넓어져 CTA 버튼 위로 겹쳐 그려지던 문제.
   컨테이너 1152px 안에 로고 + 메뉴 + CTA 가 들어가도록 단계적으로 조인다. */
.header-inner { gap: 16px; min-width: 0; }
.main-nav { min-width: 0; flex: 0 1 auto; }
.nav-list { flex-wrap: nowrap; }
.header-actions { flex: 0 0 auto; }

@media (min-width: 1025px) and (max-width: 1560px) {
    .nav-list { gap: 2px; }
    .nav-link { padding: 9px 7px; font-size: 14px; }
    .header-cta { padding: 11px 16px; font-size: 13.5px; }
    .logo-img { height: 32px; }
}
@media (min-width: 1025px) and (max-width: 1240px) {
    .nav-list { gap: 0; }
    .nav-link { padding: 9px 5px; font-size: 13px; }
    .header-cta { padding: 10px 13px; font-size: 12.5px; }
    .logo-img { height: 29px; }
}
.nav-dropdown {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.nav-dropdown a { transition: background .18s ease, color .18s ease; }

/* ==========================================================================
   7. 히어로 — 평평한 흰 배경에 깊이를 준다
   ========================================================================== */
.hero {
    background:
        radial-gradient(900px 520px at 82% 8%, rgba(41,98,255,.07), transparent 62%),
        radial-gradient(700px 460px at 6% 92%, rgba(20,40,160,.05), transparent 62%),
        linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
}
.hero::before { opacity: .5; }
.hero-badge, .hero-badges .badge {
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: -.018em;
    box-shadow: var(--shadow-sm);
}
.hero-image img, .hero-visual img { border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); }

/* ==========================================================================
   8. 폼 — 입력창이 싸구려면 전체가 싸구려로 보인다
   ========================================================================== */
input[type="text"], input[type="tel"], input[type="email"], input[type="number"],
input[type="search"], input[type="date"], select, textarea, .form-control, .form-input {
    border-radius: 13px;
    border: 1.5px solid var(--border);
    padding: 15px 17px;
    font-size: 16px;
    letter-spacing: -.015em;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input:focus, select:focus, textarea:focus, .form-control:focus, .form-input:focus {
    outline: none;
    border-color: #2962FF;
    box-shadow: 0 0 0 4px rgba(41,98,255,.12);
}
input::placeholder, textarea::placeholder { color: var(--gray-400); }
label, .form-label { font-weight: 700; letter-spacing: -.022em; color: var(--gray-700); }

/* ==========================================================================
   9. 표 — 선을 지우고 여백으로 구분한다
   ========================================================================== */
table { border-collapse: separate; border-spacing: 0; }
.table-wrap, .table-container, .table-responsive {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    overflow: hidden;
    overflow-x: auto;
}
th {
    background: var(--gray-50);
    font-weight: 800;
    letter-spacing: -.018em;
    font-size: 14.5px;
    color: var(--gray-700);
    border-bottom: 1px solid var(--border);
}
td { border-bottom: 1px solid var(--border-light); letter-spacing: -.012em; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .18s ease; }
tbody tr:hover { background: var(--gray-50); }

/* ==========================================================================
   10. FAQ / 아코디언
   ========================================================================== */
.faq-item, details {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: box-shadow .26s var(--v2-ease), border-color .26s var(--v2-ease);
}
.faq-item.active, .faq-item[open], details[open] {
    box-shadow: var(--shadow-md);
    border-color: #DDE4EF;
}
.faq-question, summary {
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.45;
}
.faq-answer, details > p { line-height: 1.82; color: var(--gray-600); }

/* ==========================================================================
   11. 배지 · 태그 · 칩
   ========================================================================== */
.badge, .tag, .chip, .label-pill, .pill {
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: -.015em;
}

/* ==========================================================================
   12. 푸터
   ========================================================================== */
.footer {
    background: #0D1424;
    border-top: none;
}
.footer a { transition: color .2s ease, opacity .2s ease; }
.footer-cert-badge {
    border-radius: 999px;
    letter-spacing: -.018em;
    font-weight: 700;
}
.footer-partner-logos img { transition: opacity .25s ease, filter .25s ease; }

/* ==========================================================================
   13. 이미지 · 미디어
   ========================================================================== */
figure img, .content-image img, .article-image img, .thumb img {
    border-radius: var(--radius);
}

/* ==========================================================================
   14. 스크롤바 (데스크톱)
   ========================================================================== */
@media (pointer: fine) {
    * { scrollbar-width: thin; scrollbar-color: #CBD5E5 transparent; }
    *::-webkit-scrollbar { width: 10px; height: 10px; }
    *::-webkit-scrollbar-track { background: transparent; }
    *::-webkit-scrollbar-thumb { background: #D6DDE8; border-radius: 999px; border: 3px solid #fff; }
    *::-webkit-scrollbar-thumb:hover { background: #B9C4D6; }
}

/* ==========================================================================
   15. 선택 영역 · 포커스 링
   ========================================================================== */
::selection { background: rgba(41,98,255,.18); color: #0D1424; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid #2962FF;
    outline-offset: 3px;
    border-radius: 6px;
}

/* ==========================================================================
   16. 스크롤 리빌 (v2-reveal.js 와 함께 동작)
   ========================================================================== */
.v2-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .72s var(--v2-ease), transform .72s var(--v2-ease);
    will-change: opacity, transform;
}
.v2-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .v2-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   17. 반응형 보정
   ========================================================================== */
@media (max-width: 1024px) {
    :root { --section-padding: 88px; }
}
@media (max-width: 768px) {
    :root { --section-padding: 68px; }
    .hero, section.hero { padding-top: 62px; padding-bottom: 72px; }
    .section-header { margin-bottom: 42px; }
    .card, .feature-card, .product-card, .case-card, .guide-card, .info-card {
        border-radius: var(--radius);
    }
    .card:hover, .feature-card:hover, .product-card:hover,
    .case-card:hover, .guide-card:hover, .info-card:hover { transform: none; }
}
@media (max-width: 480px) {
    :root { --section-padding: 56px; }
    .hero-title { font-size: clamp(30px, 8.4vw, 40px); }
    .section-title { font-size: clamp(25px, 6.8vw, 33px); }
}