/* ============================================
   G-NOVA LABS — Global Stylesheet
   ============================================ */
@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@600;700&display=swap");

/* ---------- 1. Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-weight: 400;
    line-height: 1.5;
    color: var(--c-fg);
    background: var(--c-bg);
    overflow-x: hidden;
    cursor: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: none; background: none; color: inherit; cursor: none; }
ul { list-style: none; }
input, textarea, select { font: inherit; color: inherit; }

/* ---------- 2. Design Tokens ---------- */
:root {
    /* Colors — Light Theme */
    --c-bg: #ffffff;
    --c-fg: #14130f;
    --c-fg-muted: #757067;
    --c-line: rgba(20, 19, 15, 0.12);
    --c-accent: #ff5b22;
    --c-accent-2: #2c2a26;
    --c-card: #ffffff;
    --c-cursor: #14130f;

    /* Type scale */
    --f-display: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    --f-sans: "Pretendard Variable", Pretendard, -apple-system, sans-serif;

    /* Sizing */
    --container: 1440px;
    --gutter: 5vw;
    --radius: 18px;
    --radius-lg: 32px;

    /* Easing */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.7, 0, 0.3, 1);
}
body.dark-theme {
    --c-bg: #0e0d0b;
    --c-fg: #ffffff;
    --c-fg-muted: #8d877c;
    --c-line: rgba(255, 255, 255, 0.14);
    --c-card: #181613;
    --c-cursor: #ffffff;
}

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4, h5 { font-family: var(--f-display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.04; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--f-sans);
    font-size: 13px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--c-fg-muted);
}
.eyebrow::before { content:""; width:28px; height:1px; background: var(--c-fg-muted); }
.display-1 { font-size: clamp(56px, 9vw, 168px); }
.display-2 { font-size: clamp(44px, 6.5vw, 120px); }
.display-3 { font-size: clamp(36px, 4.6vw, 84px); }
.lead {
    font-family: var(--f-sans);
    font-size: clamp(17px, 1.4vw, 22px);
    line-height: 1.55;
    color: var(--c-fg-muted);
    max-width: 56ch;
}
/* 메인 서비스 섹션 머리말: 긴 카피 대비 너비·한글 줄바꿈 */
#services .section-title-row .lead {
    max-width: none;
    word-break: keep-all;
}
/* 회사 > 주요 기록: 부연 문장 한 줄(넓은 뷰) · 좁은 화면에서는 단어 단위 줄바꿈 */
@media (min-width: 960px) {
    .about-awards-lead {
        max-width: none;
        white-space: nowrap;
    }
}
@media (max-width: 959px) {
    .about-awards-lead {
        max-width: 100%;
        word-break: keep-all;
    }
}
.italic { font-style: italic; }

/* ---------- 4. Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(80px, 12vw, 200px) 0; position: relative; }
.section-title-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: clamp(48px, 6vw, 96px); flex-wrap: wrap; }
.section-title { font-size: clamp(40px, 5.6vw, 96px); }
.section-title {
    font-family: var(--f-sans);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.section-title .italic { font-style: normal; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 80px); }
.text-right { text-align: right; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }

/* ---------- 5. Custom Cursor ---------- */
.cursor-dot, .cursor-ring {
    position: fixed; top: 0; left: 0;
    pointer-events: none;
    border-radius: 50%;
    z-index: 9999;
    transform: translate(-50%, -50%);
    will-change: transform;
}
.cursor-dot {
    width: 6px;
    height: 6px;
    background: #14130f;
    border: 1px solid rgba(255, 255, 255, 0.55);
    mix-blend-mode: normal;
    opacity: 1;
    box-sizing: border-box;
    transition: width .25s var(--ease-out), height .25s var(--ease-out), background .25s var(--ease-out), border-color .25s var(--ease-out), opacity .25s var(--ease-out);
}
.cursor-ring {
    width: 36px;
    height: 36px;
    border: 1.5px solid rgba(20, 19, 15, 0.5);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
    mix-blend-mode: normal;
    background: transparent;
    transition:
        width .35s var(--ease-out),
        height .35s var(--ease-out),
        min-width .35s var(--ease-out),
        padding .3s var(--ease-out),
        background .35s var(--ease-out),
        border-color .35s var(--ease-out),
        box-shadow .35s var(--ease-out),
        border-radius .3s var(--ease-out),
        mix-blend-mode .2s ease,
        backdrop-filter .3s var(--ease-out),
        -webkit-backdrop-filter .3s var(--ease-out);
    display: flex; align-items: center; justify-content: center;
}
body.dark-theme .cursor-dot {
    background: #f7f5f0;
    border-color: rgba(0, 0, 0, 0.35);
}
body.dark-theme .cursor-ring {
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}
.cursor-ring .label {
    font-family: var(--f-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: none;
    color: var(--c-bg);
    opacity: 0;
    white-space: nowrap;
    max-width: min(92vw, 480px);
    overflow: hidden;
    text-overflow: ellipsis;
    transform: scale(0.94);
    transition:
        opacity .22s var(--ease-out),
        transform .22s var(--ease-out),
        color .2s var(--ease-out),
        font-size .2s var(--ease-out);
}
body.cursor-hover .cursor-ring {
    width: 64px;
    height: 64px;
    min-width: 0;
    padding: 0;
    background: #fff;
    border: 2px solid #fff;
    box-shadow: none;
    opacity: 1;
    /* 흰 원 + difference → 밝은 배경에서는 검은 디스크처럼 보이고, 검은 로고 위에서는 글자가 반전되어 보임 */
    mix-blend-mode: difference;
}
body.cursor-hover .cursor-dot {
    width: 8px;
    height: 8px;
    background: #fff;
    border: none;
    opacity: 1;
    mix-blend-mode: difference;
}
/* Text tooltip: 한 줄 캡슐, 고대비 */
body.cursor-text .cursor-ring {
    width: auto;
    height: auto;
    min-width: 52px;
    padding: 12px 20px;
    border-radius: 999px;
    mix-blend-mode: normal;
    background: rgba(22, 24, 28, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.12),
        0 14px 32px rgba(0, 0, 0, 0.28);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);
    opacity: 1;
    transition:
        width 0s,
        height 0s,
        min-width 0s,
        padding .28s var(--ease-out),
        background .28s var(--ease-out),
        border-color .28s var(--ease-out),
        box-shadow .28s var(--ease-out),
        border-radius .28s var(--ease-out),
        mix-blend-mode .15s ease,
        backdrop-filter .28s var(--ease-out),
        -webkit-backdrop-filter .28s var(--ease-out);
}
body.cursor-text .cursor-ring .label {
    opacity: 1;
    color: #fff;
    font-weight: 700;
    font-size: clamp(14px, 1.15vw, 17px);
    letter-spacing: -0.02em;
    transform: scale(1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
body.cursor-text .cursor-dot {
    width: 8px;
    height: 8px;
    background: #fff;
    border-color: rgba(0, 0, 0, 0.2);
    opacity: 1;
}

/* 서비스 영상 미리보기가 떠 있을 때 — 캡슐 대신 ‘점 + 원 테두리’ 작은 원형 커서로 고정 */
body.has-svc-preview .cursor-dot,
body.has-svc-preview .cursor-ring,
body.has-svc-preview.cursor-text .cursor-ring,
body.has-svc-preview.cursor-hover .cursor-ring {
    mix-blend-mode: normal;
    transition: none;
}
body.has-svc-preview .cursor-ring,
body.has-svc-preview.cursor-text .cursor-ring,
body.has-svc-preview.cursor-hover .cursor-ring {
    width: 40px;
    height: 40px;
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid #14130f;
    background: transparent;
    box-shadow: 0 2px 14px rgba(0,0,0,0.12);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: 1;
    z-index: 10000;
}
body.has-svc-preview .cursor-dot,
body.has-svc-preview.cursor-text .cursor-dot,
body.has-svc-preview.cursor-hover .cursor-dot {
    width: 6px;
    height: 6px;
    background: #14130f;
    box-shadow: none;
    opacity: 1;
    z-index: 10001;
}
body.has-svc-preview .cursor-ring .label {
    opacity: 0;
    transform: scale(0.9);
}

@media (max-width: 900px) {
    body { cursor: auto; }
    .cursor-dot, .cursor-ring { display: none; }
    button, a { cursor: pointer; }
}

/* ---------- 6. Header ---------- */
.site-header {
    position: fixed; top: 0; left: 0; right: 0;
    display: flex; justify-content: space-between; align-items: center;
    padding: 22px var(--gutter);
    z-index: 100;
    color: var(--header-fg, #111);
    transition: padding .35s var(--ease-out), color .35s var(--ease-out), background .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out), backdrop-filter .35s var(--ease-out), -webkit-backdrop-filter .35s var(--ease-out);
}
body.light-theme {
    --header-fg: #111;
    --header-bg: color-mix(in srgb, #ffffff 82%, transparent);
}
body.dark-theme {
    --header-fg: #ffffff;
    --header-bg: color-mix(in srgb, #0e0d0b 76%, transparent);
}
.site-header a, .site-header button { color: inherit; }
.site-header:not(.is-scrolled) {
    mix-blend-mode: difference;
    color: #fff;
}
.site-header.is-scrolled {
    padding-top: 14px;
    padding-bottom: 14px;
    mix-blend-mode: normal;
    color: var(--header-fg, #111);
    background: var(--header-bg, color-mix(in srgb, var(--c-bg) 78%, transparent));
    border-bottom: 1px solid var(--c-line);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.brand {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    font-family: var(--f-sans);
    font-size: 28px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.btn-circle.magnetic { display: inline-flex; }
.brand.no-mark { gap: 0; }
.brand-mark {
    order: 1;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    flex: none;
    transition: transform .5s var(--ease-out), filter .35s var(--ease-out);
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.28));
}
.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
body.light-theme .site-header.is-scrolled .brand-mark img { filter: brightness(0.98) contrast(1.06); }
body.dark-theme .site-header.is-scrolled .brand-mark img { filter: brightness(1.28) contrast(1.12); }
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.05); }
.brand-text {
    order: 2;
    display: inline-block;
    font-family: "Fredoka", "Nunito", "Arial Rounded MT Bold", "Pretendard Variable", Pretendard, sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    line-height: 1;
    transform: translateY(1px);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.top-nav {
    display: flex;
    gap: 48px;
    font-size: 20px;
    font-weight: 300;
    margin-left: auto;
    margin-right: 130px;
    justify-content: flex-end;
}
.top-nav a { position: relative; padding: 4px 0; font-weight: 300; }
.top-nav a::after {
    content:""; position: absolute; left:0; bottom:0;
    width:100%; height:1px; background: currentColor;
    transform: scaleX(0); transform-origin: right;
    transition: transform .5s var(--ease-out);
}
.top-nav a:hover::after, .top-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.top-nav a, .brand-text { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.12); }
body.dark-theme .site-header.is-scrolled .top-nav a,
body.dark-theme .site-header.is-scrolled .brand-text {
    text-shadow: 0 1px 10px rgba(255, 255, 255, 0.08);
}
.menu-toggle {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    position: relative;
}
.menu-toggle .bar {
    width: 18px;
    height: 1px;
    background: currentColor;
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: center;
    transition: transform .4s var(--ease-out), opacity .3s;
}
/* 원 중심 기준으로 = 간격 유지 */
.menu-toggle .bar:nth-child(1) { transform: translate(-50%, calc(-50% - 3px)); }
.menu-toggle .bar:nth-child(2) { transform: translate(-50%, calc(-50% + 3px)); }
body.menu-open .menu-toggle .bar:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
body.menu-open .menu-toggle .bar:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }
@media (max-width: 900px) {
    .top-nav { display: none; }
    .brand-mark { width: 42px; height: 42px; }
    .brand { font-size: 22px; gap: 10px; letter-spacing: 0.05em; }
    .brand-text { letter-spacing: 0.06em; }
    .site-header.is-scrolled {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

/* ---------- 7. Overlay Menu ---------- */
.overlay-menu {
    position: fixed; inset: 0;
    background: var(--c-fg);
    color: var(--c-bg);
    z-index: 90;
    display: flex;
    align-items: stretch;
    justify-content: center;
    /* 원점은 JS가 .menu-toggle 중심으로 --menu-clip-x / --menu-clip-y 설정 (없을 때만 대략값) */
    clip-path: circle(0% at var(--menu-clip-x, calc(100% - 28px - var(--gutter))) var(--menu-clip-y, 50px));
    transition: clip-path .9s var(--ease-in-out);
    pointer-events: none;
    overflow-y: auto;
}
body.menu-open .overlay-menu {
    clip-path: circle(150% at var(--menu-clip-x, calc(100% - 28px - var(--gutter))) var(--menu-clip-y, 50px));
    pointer-events: auto;
}
.map-panel {
    width: 100%;
    min-height: 100%;
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(360px, 1.25fr) minmax(280px, 0.85fr);
    gap: clamp(32px, 5vw, 88px);
    align-items: start;
    padding: clamp(120px, 14vh, 180px) var(--gutter) 112px;
}
.map-intro,
.map-sitemap,
.map-actions {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .65s var(--ease-out), transform .8s var(--ease-out);
}
body.menu-open .map-intro,
body.menu-open .map-sitemap,
body.menu-open .map-actions {
    opacity: 1;
    transform: translateY(0);
}
body.menu-open .map-intro { transition-delay: .22s; }
body.menu-open .map-sitemap { transition-delay: .3s; }
body.menu-open .map-actions { transition-delay: .38s; }
.map-kicker {
    display: inline-block;
    font-family: var(--f-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 20px;
}
.map-intro h2 {
    font-family: var(--f-sans);
    font-size: clamp(34px, 4.4vw, 76px);
    font-weight: 750;
    line-height: 1.05;
    letter-spacing: -0.04em;
}
.map-intro p {
    max-width: 30ch;
    margin-top: 28px;
    color: rgba(255, 255, 255, 0.62);
    font-size: clamp(15px, 1.1vw, 18px);
    line-height: 1.7;
}
.map-sitemap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 40px;
}
.map-group {
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.map-title {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    font-family: var(--f-sans);
    font-size: clamp(24px, 2.5vw, 42px);
    font-weight: 750;
    letter-spacing: -0.04em;
}
.map-title::before {
    content: attr(data-num);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.35);
}
.map-title:hover { color: #fff; }
.map-group ul {
    list-style: none;
    margin-top: 14px;
    display: grid;
    gap: 8px;
}
.map-group li {
    color: rgba(255, 255, 255, 0.54);
    font-size: 14px;
    line-height: 1.5;
}
.map-actions {
    display: grid;
    gap: 12px;
}
.map-action-card {
    display: block;
    padding: 22px 22px 24px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 24px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)) left bottom / 100% 0 no-repeat,
        rgba(255, 255, 255, 0.04);
    transition: background-size .4s var(--ease-out), border-color .35s var(--ease-out), transform .35s var(--ease-out), color .35s var(--ease-out);
}
.map-action-card span {
    display: block;
    font-size: 18px;
    font-weight: 750;
    letter-spacing: -0.02em;
}
.map-action-card p {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    line-height: 1.55;
}
.map-action-card:hover {
    border-color: rgba(255, 255, 255, 0.32);
    background-size: 100% 100%;
    transform: translateY(-2px);
}
.map-action-card:hover p { color: rgba(255, 255, 255, 0.78); }
.overlay-foot {
    position: absolute;
    bottom: 36px;
    left: var(--gutter);
    right: var(--gutter);
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.38);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
@media (max-width: 1100px) {
    .map-panel {
        grid-template-columns: 1fr 1fr;
        padding-top: 120px;
    }
    .map-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .map-panel {
        grid-template-columns: 1fr;
        gap: 36px;
        padding-top: 116px;
        padding-bottom: 132px;
    }
    .map-sitemap { grid-template-columns: 1fr; gap: 18px; }
    .map-actions { grid-template-columns: 1fr; }
    .overlay-foot {
        position: fixed;
        flex-direction: column;
        gap: 6px;
        bottom: 24px;
    }
}

/* ---------- 8. Hero (세로형 히어로 레이아웃) ---------- */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 180px var(--gutter) 0;
    position: relative;
    overflow: hidden;
}
.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
    text-align: center;
}
.hero-title {
    font-size: clamp(32px, 4.6vw, 76px);
    line-height: 1.08;
    font-family: var(--f-sans);
    font-weight: 700;
    max-width: min(14em, 92vw);
    margin-left: auto;
    margin-right: auto;
}
.hero-title .word { display: inline-block; overflow: visible; padding: 0 0.04em; }
.hero-title .word > span {
    display: inline-block;
    opacity: 0.18;
    filter: blur(9px) brightness(0.55);
    transform: none;
    transition: opacity 1.05s var(--ease-out), filter 1.15s var(--ease-out);
}
.hero.is-ready .hero-title .word > span { opacity: 1; filter: none; }
.hero-title .accent { font-style: normal; color: var(--c-accent); font-weight: 700; }

/* Hero description block */
.hero-desc {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: clamp(18px, 2vw, 28px);
    margin-top: clamp(28px, 3vw, 56px);
    padding-bottom: clamp(28px, 3vw, 56px);
    width: min(60ch, calc(100% - 2 * var(--gutter)));
    margin-left: auto;
    margin-right: auto;
}
.hero-desc .lead {
    max-width: 60ch;
    width: 100%;
    flex: none;
    margin: 0;
    text-align: center;
}
.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    border: 1px solid var(--c-fg);
    border-radius: 999px;
    font-family: var(--f-sans);
    font-size: 18px;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    background-color: #fff;
    background-image: linear-gradient(#111, #111);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 0;
    color: #111;
    transition:
        background-size .38s var(--ease-out),
        color .35s var(--ease-out),
        border-color .35s var(--ease-out),
        transform .35s var(--ease-out);
    white-space: nowrap;
    flex-shrink: 0;
}
.hero-desc .btn-outline {
    align-self: center;
    margin-right: 0;
    margin-top: 2px;
}
.btn-outline:hover {
    color: #fff;
    border-color: #111;
    background-size: 100% 100%;
    transform: translateY(-1px);
}

/* Full-width showreel */
.hero-reel-full {
    position: relative;
    width: 82%;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 16 / 8.6;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--c-bg);
    margin-top: clamp(12px, 2vw, 24px);
    margin-bottom: clamp(72px, 8vw, 130px);
}
.hero-reel-video-stack {
    position: absolute;
    inset: 0;
}
.hero-reel-video-stack .hero-reel-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.8s ease-in-out;
    will-change: opacity;
}
.hero-reel-video--front {
    opacity: 1;
    z-index: 1;
}
.hero-reel-video--back {
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}
.hero-reel-full img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Keep old hero-reel for sub-pages if needed */
.hero-reel {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--c-card);
}
.hero-reel video, .hero-reel img { width: 100%; height: 100%; object-fit: cover; }
.hero-meta { display: flex; flex-direction: column; gap: 24px; }
.hero-bottom { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(40px, 5vw, 100px); align-items: end; margin-top: clamp(60px, 8vw, 140px); }

@media (max-width: 900px) {
    .hero { padding-top: 140px; }
    .hero-desc {
        flex-direction: column;
        gap: 24px;
        align-items: center;
        text-align: center;
        width: min(52ch, calc(100% - 2 * var(--gutter)));
    }
    .hero-desc .btn-outline { align-self: center; margin-right: 0; }
    .hero-bottom { grid-template-columns: 1fr; }
    .hero-reel-full { width: 94%; aspect-ratio: 16 / 8.6; }
}

/* ---------- 8b. Projects Dark Section ---------- */
.projects-dark {
    background: #14130f !important;
    color: #ffffff !important;
}
.projects-dark .section-title { color: #ffffff; }
.projects-dark .section-title .italic { color: #ffffff; }
.projects-dark .lead { color: rgba(255,255,255,0.6); }
.projects-dark .card .media { background: rgba(255,255,255,0.08); }
.projects-dark .card-info h3 { color: #ffffff; }
.projects-dark .card-info .tag { color: rgba(255,255,255,0.5); }
.projects-dark .card .desc { color: rgba(255,255,255,0.5); }
.projects-dark .btn-pill {
    --pill-bg: #ffffff;
    --pill-fg: #14130f;
    --pill-hover-bg: #111;
    --pill-hover-fg: #fff;
}

/* ---------- 8c. Floating CS CTA (capsule badge + ring) ---------- */
.floating-cs-cta {
    /* 페이지 배경(--c-bg)과 동일 — 영상 주변 원형과 본문 톤 통일 */
    --cs-disc-bg: var(--c-bg);
    position: fixed;
    bottom: 48px;
    right: 62px;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    text-decoration: none;
    perspective: 1000px;
    /* role="button" 인 div — `<button>` 안에는 `<video>` 불가 */
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    transition: transform 0.18s var(--ease-out), filter 0.18s var(--ease-out);
}
.floating-cs-cta:focus { outline: none; }
.floating-cs-cta:focus-visible { outline: 2px solid var(--c-accent, #ff5b22); outline-offset: 4px; border-radius: 50%; }
/* 플로팅 상담 원형: ai-float 부유 제거 — 호버 시 원이 흔들리는 느낌 방지 */
.floating-cs-cta .cs-avatar-wrapper {
    animation: none;
    isolation: auto;
}
/* 다크 테마: 본문은 어두운데 상담 영상은 라이트 배경 촬영 → 원형만 라이트 서피스(#ffffff 계열) 유지 */
body.dark-theme .floating-cs-cta {
    --cs-disc-bg: var(--c-fg);
}
/* Auto contrast by section theme (subtle, natural) */
body.light-theme .floating-cs-cta .cs-avatar-wrapper {
    background: var(--cs-disc-bg);
    box-shadow: 0 0 0 1px rgba(20, 19, 15, 0.14);
    transition: box-shadow 0.4s var(--ease-out), background 0.35s var(--ease-out);
}
body.light-theme .floating-cs-cta .cs-cta-badge {
    background: linear-gradient(165deg, #ff7a45 0%, var(--c-accent) 48%, #e84a0f 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 2px 10px rgba(255, 91, 34, 0.28);
}
body.light-theme .floating-cs-cta:hover .cs-avatar-wrapper {
    box-shadow:
        0 0 0 1px rgba(20, 19, 15, 0.14),
        0 0 0 3px rgba(255, 91, 34, 0.2);
}
body.dark-theme .floating-cs-cta .cs-avatar-wrapper {
    background: var(--cs-disc-bg);
    box-shadow: 0 0 0 1px rgba(20, 19, 15, 0.12);
    transition: box-shadow 0.4s var(--ease-out), background 0.35s var(--ease-out);
}
body.dark-theme .floating-cs-cta .cs-cta-badge {
    background: linear-gradient(165deg, #ff7a45 0%, var(--c-accent) 48%, #e84a0f 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 2px 12px rgba(255, 91, 34, 0.3);
}
body.dark-theme .floating-cs-cta:hover .cs-avatar-wrapper {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12),
        0 0 0 3px rgba(255, 91, 34, 0.26);
}

.cs-avatar-wrapper {
    position: relative;
    width: 136px;
    height: 136px;
    border-radius: 50%;
    background: var(--cs-disc-bg);
    overflow: hidden;
    animation: ai-float 7s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    transform-origin: bottom center;
    isolation: isolate;
}

/* Luxurious Slow Float */
@keyframes ai-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Sophisticated Rotating Glow */
.cs-glow-ring {
    display: none;
}

@keyframes ai-spin-glow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.cs-avatar-container {
    width: 124px;
    height: 124px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--cs-disc-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border: none;
    overflow: hidden;
    /* 마스크·contain: paint 는 일부 환경에서 <video> 레이어가 통째로 안 그려지는 경우가 있어
       border-radius + overflow 만으로 원형 클립 */
    z-index: 0;
    transition: transform .35s var(--ease-out);
}
.cs-avatar-container::before,
.cs-avatar-container::after { display: none; }

/* `<button>` 밖으로 옮겼지만, 영상 로드 실패·file:// 제한 시에도 얼굴이 보이도록 PNG를 깔아 둠 */
.cs-avatar-poster-fallback {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    max-width: none;
    transform: translate(-50%, -50%) scale(0.78) translateY(-9%);
    transform-origin: center;
    object-fit: cover;
    object-position: center 36%;
    pointer-events: none;
    z-index: 0;
    user-select: none;
    -webkit-user-drag: none;
}

/* 순·역 트랙: 페이드 없이 즉시 전환(프레임 이음만 맞춤) */
.cs-avatar-video-stack {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.cs-avatar-video-stack .cs-avatar-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    transition: none;
}
.cs-avatar-video-stack .cs-avatar-video--front {
    opacity: 1;
    z-index: 1;
}
.cs-avatar-video-stack .cs-avatar-video--back {
    opacity: 0;
    z-index: 0;
}

.cs-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(0.78) translateY(-9%);
    transition: transform .35s var(--ease-out);
    transform-origin: center;
}
.cs-avatar-video {
    position: relative;
    z-index: 1;
    display: block;
    /* 전역 `img, video { height: auto }`와 무관하게 원형 영역을 항상 채움 */
    width: 100%;
    height: 100%;
    max-width: none;
    object-position: center 36%;
    /* multiply는 밝은 배경 MP4가 페이지 톤과 거의 동일해지면 인물·영상이 사라져 보일 수 있어 normal 유지 */
    mix-blend-mode: normal;
    filter: contrast(1.06);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* 호버 시 브라우저가 띄우는 PIP/다운로드/원격재생 아이콘 차단 */
    pointer-events: none;
}
/* WebKit 미디어 컨트롤 오버레이(다운로드/PIP 버튼 등) 비활성화 */
.cs-avatar-video::-webkit-media-controls,
.cs-avatar-video::-webkit-media-controls-enclosure,
.cs-avatar-video::-webkit-media-controls-panel,
.cs-avatar-video::-webkit-media-controls-overlay-play-button,
.cs-avatar-video::-internal-media-controls-overflow-button,
.cs-avatar-video::-internal-media-controls-download-button {
    display: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Hover: 외곽 링만 (내부 테두리 없음 → 번짐 감소) */
.floating-cs-cta:hover .cs-avatar-container {
    transform: translate(-50%, -50%);
}

.floating-cs-cta:hover .cs-avatar {
    transform: scale(0.78) translateY(-9%);
}

/* Capsule label — inside disc, under face */
.cs-cta-badge {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 4;
    font-family: var(--f-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    padding: 5px 10px;
    border-radius: 999px;
    pointer-events: none;
    white-space: nowrap;
    transform-origin: center center;
    transition:
        transform 0.4s var(--ease-out),
        padding 0.4s var(--ease-out),
        font-size 0.4s var(--ease-out),
        letter-spacing 0.4s var(--ease-out),
        box-shadow 0.4s var(--ease-out);
}

.floating-cs-cta:hover .cs-cta-badge {
    padding: 6px 14px;
    font-size: 12px;
    letter-spacing: 0.04em;
    transform: translateX(-50%) scale(1.06);
    box-shadow: 0 4px 14px rgba(255, 91, 34, 0.32);
}

body.dark-theme .floating-cs-cta:hover .cs-cta-badge {
    box-shadow: 0 4px 14px rgba(255, 91, 34, 0.34);
}

/* Online Indicator Dot (reserved) */
.cs-badge {
    display: none;
}

@keyframes ai-pulse-dot {
    0%, 100% { opacity: 0.8; box-shadow: 0 0 8px rgba(0, 230, 118, 0.4); }
    50% { opacity: 1; box-shadow: 0 0 16px rgba(0, 230, 118, 0.9); }
}

.floating-cs-cta:active {
    transform: translateY(2px) scale(0.96);
    filter: brightness(0.93);
}

.floating-cs-cta:active .cs-cta-badge {
    transform: translateX(-50%) scale(0.96);
    transition-duration: 0.12s;
}

@media (max-width: 900px) {
    .floating-cs-cta { right: 20px; bottom: 28px; }
    .cs-avatar-wrapper { width: 100px; height: 100px; }
    .cs-avatar-container { width: 86px; height: 86px; }
    .cs-badge { width: 10px; height: 10px; top: 2px; right: 2px; }
    .cs-cta-badge {
        bottom: 8px;
        font-size: 10px;
        padding: 4px 8px;
    }
    .floating-cs-cta:hover .cs-cta-badge {
        font-size: 11px;
        padding: 5px 10px;
    }
}

/* ---------- 8d. Service hover image ---------- */
.service-img-preview {
    position: fixed;
    pointer-events: none;
    z-index: 50;
    width: 320px;
    height: 220px;
    border-radius: var(--radius);
    overflow: hidden;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.service-img-preview.is-visible {
    opacity: 1;
    transform: scale(1);
}
.service-img-preview img,
.service-img-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- 9. Marquee ---------- */
.marquee { overflow: hidden; padding: 32px 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.marquee-track { display: flex; gap: 64px; white-space: nowrap; will-change: transform; animation: marquee 38s linear infinite; }
.marquee span { font-family: var(--f-display); font-size: clamp(40px, 5vw, 96px); display: inline-flex; align-items: center; gap: 64px; color: var(--c-fg); }
.marquee span::after { content:"✦"; color: var(--c-accent); font-size: 0.5em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 10. Projects (cards) ---------- */
.projects-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 56px); align-items: start; }
.projects-grid .card:nth-child(odd),
.projects-grid .card:nth-child(even) { transform: translateY(0); }
.card { display: block; position: relative; }
.card .media {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--c-card);
    transform: scale(1);
    transition: transform .8s var(--ease-out);
}
.card .media img, .card .media video {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .8s var(--ease-out), filter .6s;
}
.card[href$="orbit.html"] .media img { object-position: top; }
.card[href$="orbit.html"] .media video { object-position: top; }
.card:hover .media img { transform: scale(1.06); }
.card .media video { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; }
.card:hover .media video.has-loaded { opacity: 1; }
.card-info { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 22px; gap: 24px; }
.card-info h3 { font-family: var(--f-display); font-size: clamp(16px, 1.2vw, 20px); }
.card-info .tag { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-fg-muted); white-space: nowrap; padding-top: 8px; }
.card .desc { font-size: 12px; color: var(--c-fg-muted); margin-top: 4px; }
@media (max-width: 900px) {
    .projects-grid { grid-template-columns: 1fr; }
    .projects-grid .card:nth-child(even) { transform: none; }
}

/* ---------- 11. Services ---------- */
.services-list { display: flex; flex-direction: column; }
.service {
    display: grid;
    grid-template-columns: 80px 1fr 1.2fr auto;
    gap: clamp(20px, 3vw, 60px);
    padding: clamp(36px, 5vw, 64px) 0;
    border-top: 1px solid var(--c-line);
    align-items: start;
    cursor: none;
    position: relative;
    text-decoration: none;
    color: inherit;
}
.service:last-child { border-bottom: 1px solid var(--c-line); }
.service .num { font-family: var(--f-sans); font-size: 13px; color: var(--c-fg-muted); padding-top: 12px; letter-spacing: 0.12em; }
.service h3 { font-size: clamp(28px, 3.4vw, 56px); }
.service p { font-size: 16px; color: var(--c-fg-muted); max-width: 50ch; }
.service .arrow {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--c-fg);
    color: var(--c-bg);
    display: flex; align-items: center; justify-content: center;
    transition: transform .5s var(--ease-out), background .4s;
    flex-shrink: 0;
}
.service:hover .arrow { transform: rotate(-45deg); background: var(--c-accent); }
.service::before {
    content: ""; position: absolute;
    inset: 0;
    background: var(--c-fg);
    transform-origin: bottom;
    transform: scaleY(0);
    transition: transform .6s var(--ease-out);
    z-index: -1;
    border-radius: 0;
}
@media (max-width: 720px) {
    .service { grid-template-columns: 40px 1fr auto; }
    .service p { grid-column: 2 / 4; }
}

/* ---------- 12. Blog cards ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
.blog-card .media { aspect-ratio: 5/4; border-radius: var(--radius); overflow: hidden; background: var(--c-card); }
.blog-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.blog-card:hover .media img { transform: scale(1.05); }
.blog-card .meta { display: flex; justify-content: space-between; margin-top: 18px; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--c-fg-muted); }
.blog-card h3 { font-family: var(--f-display); font-size: clamp(22px, 1.6vw, 30px); margin-top: 8px; line-height: 1.15; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } }

/* ---------- 13. Numbers / stats ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 80px); padding: clamp(60px, 8vw, 120px) 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.stat .num { font-family: var(--f-display); font-size: clamp(60px, 9vw, 160px); line-height: 1; }
.stat .num small { font-size: 0.4em; vertical-align: top; }
.stat .lbl { font-size: 14px; color: var(--c-fg-muted); margin-top: 12px; }

/* ---------- 14. CTA / Contact ---------- */
.contact-cta { padding: clamp(80px, 12vw, 200px) 0 60px; }
.contact-cta .eyebrow {
    font-size: clamp(14px, 1.65vw, 22px);
    font-weight: 600;
    gap: 12px;
    letter-spacing: 0.15em;
}
.contact-cta .eyebrow::before {
    width: clamp(30px, 3.2vw, 44px);
    height: 1.5px;
}
.contact-cta.has-video-bg {
    position: relative;
    overflow: hidden;
}
.contact-cta-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.contact-cta-video {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}
.contact-cta-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.12) 100%);
    mix-blend-mode: normal;
}
.contact-cta.has-video-bg > .container {
    position: relative;
    z-index: 2;
}
.contact-cta.has-video-bg .huge .cta-head-line {
    color: #fff;
}
@media (prefers-reduced-motion: reduce) {
    .contact-cta-bg .contact-cta-video { display: none; }
    .contact-cta.has-video-bg .contact-cta-scrim {
        background: var(--c-bg);
        opacity: 1;
    }
}
.huge {
    font-family: var(--f-display);
    font-size: clamp(64px, 13vw, 240px);
    line-height: 0.92;
    letter-spacing: -0.03em;
}
.huge .accent { color: var(--c-accent); font-style: italic; font-weight: 300; }
.btn-pill {
    --pill-bg: var(--c-fg);
    --pill-fg: var(--c-bg);
    --pill-hover-bg: #fff;
    --pill-hover-fg: #111;
    display: inline-flex; align-items: center; gap: 16px;
    padding: 22px 44px;
    border-radius: 999px;
    background-color: var(--pill-bg);
    background-image: linear-gradient(var(--pill-hover-bg), var(--pill-hover-bg));
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 0;
    color: var(--pill-fg);
    font-size: 15px; font-weight: 500;
    position: relative;
    overflow: hidden;
    transition:
        background-size .38s var(--ease-out),
        color .35s var(--ease-out),
        border-color .35s var(--ease-out),
        transform .35s var(--ease-out);
}
/* 링 + 중심점(사이는 투명 → 버튼 배경이 비침) */
.btn-pill .dot {
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1.5px solid currentColor;
    background: transparent;
    transition: border-color .35s var(--ease-out), transform .35s var(--ease-out);
}
.btn-pill .dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: currentColor;
}
.btn-pill:hover .dot { transform: scale(1.05); }
.btn-pill:hover {
    color: var(--pill-hover-fg);
    background-size: 100% 100%;
    transform: translateY(-1px);
}
.btn-circle {
    width: clamp(180px, 18vw, 280px);
    height: clamp(180px, 18vw, 280px);
    border-radius: 50%;
    background-color: var(--c-fg);
    background-image: linear-gradient(#fff, #fff);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 0;
    color: var(--c-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-display);
    font-size: clamp(28px, 3vw, 48px);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition:
        background-size .38s var(--ease-out),
        transform .35s var(--ease-out),
        color .35s var(--ease-out);
}
.btn-circle-inner {
    display: block;
    text-align: center;
    line-height: 1.12;
    max-width: 88%;
}
.btn-circle:hover {
    transform: scale(1.04);
    color: #111;
    background-size: 100% 100%;
}

/* ---------- 15. Footer ---------- */
/* body.dark-theme일 때 --c-fg/--c-bg가 뒤바뀌므로 푸터는 항상 다크 서피스 고정 */
.site-footer {
    --footer-bg: #14130f;
    --footer-fg: #ffffff;
    background: var(--footer-bg);
    color: var(--footer-fg);
    padding: 80px var(--gutter) 36px;
}
.footer-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 28px;
    font-family: var(--f-sans);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
}
.footer-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-accent);
    box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.55);
    animation: footerPulse 2.4s var(--ease-out) infinite;
}
@keyframes footerPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(255, 107, 53, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0); }
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,0.15); }
.footer-grid h4 { font-family: var(--f-sans); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 14px; font-weight: 500; }
.footer-grid p, .footer-grid a { font-size: 15px; line-height: 1.7; }
.footer-company-meta { margin-top: 2px; }
.footer-company-line { margin: 0; }
.footer-company-legal { margin-bottom: 18px; }
.footer-company-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: clamp(24px, 5vw, 48px);
}
.footer-company-cell { flex: 1 1 auto; min-width: min(100%, 8.5rem); }
.footer-company-cell .footer-company-line { margin: 0; }
.footer-company-lbl {
    display: inline-block;
    font-family: var(--f-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 6px;
}
.footer-wordmark {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: clamp(80px, 16.5vw, 280px);
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: rgba(255,255,255,0.06);
    margin: clamp(36px, 5vw, 72px) 0 clamp(20px, 3vw, 40px);
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
    text-align: center;
}
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; font-size: 13px; color: rgba(255,255,255,0.55); flex-wrap: wrap; gap: 16px; border-top: 1px solid rgba(255,255,255,0.1); }
.footer-links { display: flex; gap: 28px; }
.footer-links a:hover { color: var(--c-accent); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) {
    .footer-status-dot { animation: none; box-shadow: none; }
}

/* ---------- 16. Page header (sub-pages) ---------- */
.page-head {
    padding: 200px var(--gutter) clamp(80px, 10vw, 160px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 5vw, 80px);
    align-items: end;
    border-bottom: 1px solid var(--c-line);
}
.page-head h1 { font-size: clamp(60px, 10vw, 200px); line-height: 0.95; }
.page-head .lead { padding-bottom: 24px; }
@media (max-width: 900px) {
    .page-head { grid-template-columns: 1fr; }
    .page-head .contact-page-head-lead {
        margin-top: clamp(28px, 6vw, 64px);
    }
}
@media (min-width: 901px) {
    .page-head .contact-page-head-lead {
        transform: translateY(clamp(40px, 7vw, 100px));
    }
}
.contact-hero-kicker { white-space: nowrap; }
.contact-lead-line { display: block; }
.contact-lead-line + .contact-lead-line { margin-top: 0.35em; }

/* ---------- 17. Filters tabs ---------- */
.filters { display: flex; gap: 8px; padding: 28px var(--gutter); border-bottom: 1px solid var(--c-line); flex-wrap: wrap; }
.filter-btn {
    padding: 12px 22px;
    border-radius: 999px;
    border: 1px solid var(--c-line);
    font-size: 14px; font-weight: 500;
    background-color: var(--c-bg);
    background-image: linear-gradient(var(--c-fg), var(--c-fg));
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 0;
    transition:
        background-size .38s var(--ease-out),
        color .3s var(--ease-out),
        border-color .3s var(--ease-out);
}
.filter-btn:hover,
.filter-btn.is-active {
    color: var(--c-bg);
    border-color: var(--c-fg);
    background-size: 100% 100%;
}

/* ---------- 18. Project detail (Case study) ---------- */
.proj-hero { padding: 200px var(--gutter) 0; max-width: 1440px; margin: 0 auto; }
.proj-hero .proj-title { font-size: clamp(72px, 14vw, 240px); line-height: 0.92; letter-spacing: -0.03em; }
.proj-hero .proj-tagline { font-family: var(--f-display); font-size: clamp(28px, 3.6vw, 56px); line-height: 1.2; color: var(--c-fg-muted); max-width: 22ch; margin-top: 32px; font-style: italic; font-weight: 300; }
.proj-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 60px 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); margin-top: clamp(60px, 8vw, 120px); }
.proj-meta .lbl { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-fg-muted); margin-bottom: 10px; }
.proj-meta .val { font-family: var(--f-display); font-size: clamp(18px, 1.6vw, 24px); line-height: 1.3; }
.proj-cover { aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; margin: clamp(60px, 8vw, 100px) var(--gutter); }
.proj-cover img, .proj-cover video { width: 100%; height: 100%; object-fit: cover; }

/* Case study standard sections */
.case-section { padding: clamp(80px, 12vw, 180px) var(--gutter); }
.case-section.dark { background: var(--c-fg); color: var(--c-bg); }
.case-section .case-inner { max-width: 1280px; margin: 0 auto; }
.case-eyebrow { display: inline-block; font-family: var(--f-sans); font-size: clamp(14px, 1.05vw, 17px); font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: var(--c-fg-muted); margin-bottom: 28px; }
.case-section.dark .case-eyebrow { color: rgba(255,255,255,0.6); }
.case-section h2 { font-size: clamp(40px, 6vw, 96px); line-height: 1; letter-spacing: -0.02em; }
.case-section h2 em { font-style: italic; font-weight: 300; color: var(--c-accent); }
.case-section h3 { font-family: var(--f-display); font-size: clamp(28px, 3.4vw, 48px); }

.case-grid-2 { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(40px, 6vw, 120px); align-items: start; }
.case-paragraphs p { font-family: var(--f-display); font-size: clamp(20px, 1.6vw, 28px); line-height: 1.5; margin-bottom: 28px; }
.case-paragraphs p:last-child { margin-bottom: 0; }
.case-section.dark .case-paragraphs p { color: rgba(255,255,255,0.85); }

.case-stack > * + * { margin-top: clamp(40px, 5vw, 80px); }
.case-narrative { max-width: 780px; }
.case-narrative p { font-family: var(--f-display); font-size: clamp(20px, 1.5vw, 24px); line-height: 1.6; margin-bottom: 24px; }

.case-bullets { counter-reset: bullet; list-style: none; padding: 0; margin: 0; }
.case-bullets li {
    counter-increment: bullet;
    padding: 26px 0;
    border-top: 1px solid var(--c-line);
    font-family: var(--f-display);
    font-size: clamp(17px, 1.4vw, 22px);
    line-height: 1.5;
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: start;
    gap: 24px;
}
.case-bullets li::before {
    content: counter(bullet, decimal-leading-zero);
    font-family: var(--f-sans);
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--c-fg-muted);
    padding-top: 8px;
}
.case-bullets li:last-child { border-bottom: 1px solid var(--c-line); }
.case-section.dark .case-bullets li { border-color: rgba(255,255,255,0.15); }
.case-section.dark .case-bullets li::before { color: rgba(255,255,255,0.55); }

.case-bullets-grid {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.case-bullets-grid li {
    padding: 32px 28px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    font-family: var(--f-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--c-fg-muted);
    transition: border-color .4s, color .4s;
}
.case-bullets-grid li:hover { border-color: var(--c-fg); color: var(--c-fg); }
.case-section.dark .case-bullets-grid li { border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.7); }
.case-section.dark .case-bullets-grid li:hover { border-color: var(--c-bg); color: var(--c-bg); }

.case-visual {
    margin-top: clamp(60px, 8vw, 120px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 16/9;
    background: var(--c-card);
}
.case-visual img, .case-visual video { width: 100%; height: 100%; object-fit: cover; }

.case-quote-block {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}
.case-quote-block h2 {
    font-size: clamp(36px, 5.5vw, 80px);
    font-style: italic;
    font-weight: 300;
    line-height: 1.15;
}

/* Feedback */
.case-feedback {
    padding: clamp(100px, 14vw, 200px) var(--gutter);
    text-align: center;
}
.case-feedback .case-eyebrow { margin-bottom: 36px; }
.case-feedback blockquote {
    font-family: var(--f-display);
    font-size: clamp(28px, 4vw, 56px);
    line-height: 1.25;
    max-width: 24ch;
    margin: 0 auto 36px;
    font-style: italic;
    font-weight: 300;
}
.case-feedback cite {
    font-style: normal;
    font-family: var(--f-sans);
    font-size: 13px;
    color: var(--c-fg-muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Gallery (post-case) */
.proj-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 0 var(--gutter) clamp(80px, 12vw, 160px); max-width: 1440px; margin: 0 auto; }
.proj-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); }

/* ---------- 18b. Case study — 케이스 스터디 전용 시각 컴포넌트 ---------- */

/* Hero strip: 3-up vertical mockups directly under hero */
.case-hero-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 1.5vw, 24px);
    padding: clamp(40px, 6vw, 100px) var(--gutter) 0;
    max-width: 1440px;
    margin: 0 auto;
}
.case-hero-strip .item {
    aspect-ratio: 9 / 16;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--c-card);
}
.case-hero-strip .item img,
.case-hero-strip .item video {
    width: 100%; height: 100%; object-fit: cover;
}

/* Wide bleed visual (full-width image / video) */
.case-wide-bleed {
    width: 100%;
    aspect-ratio: 21 / 9;
    background: var(--c-card);
    overflow: hidden;
    margin: 0;
}
.case-wide-bleed.dark { background: var(--c-fg); }
.case-wide-bleed img,
.case-wide-bleed video {
    width: 100%; height: 100%; object-fit: cover;
}

/* Object showcase (centered single object on tinted bg) */
.case-object-showcase {
    padding: clamp(80px, 12vw, 180px) var(--gutter);
    background: var(--c-card);
    text-align: center;
}
.case-object-showcase img,
.case-object-showcase video {
    width: 78%;
    max-width: 1100px;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--radius-lg);
    margin: 0 auto;
    display: block;
}

/* Phone grid: 3-up vertical mobile mockups (used inside development) */
.case-phone-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2vw, 32px);
    padding: clamp(60px, 8vw, 120px) var(--gutter) 0;
    max-width: 1440px;
    margin: 0 auto;
}
.case-phone-grid img,
.case-phone-grid video {
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: var(--radius);
}

/* Asymmetric phone showcase (1 small + 1 wide) */
.case-phone-asymm {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: clamp(16px, 2vw, 32px);
    padding: clamp(40px, 5vw, 80px) var(--gutter) 0;
    max-width: 1440px;
    margin: 0 auto;
    align-items: center;
}
.case-phone-asymm .vertical {
    aspect-ratio: 9 / 16;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--c-card);
}
.case-phone-asymm .horizontal {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--c-card);
}
.case-phone-asymm img,
.case-phone-asymm video { width: 100%; height: 100%; object-fit: cover; }

/* Panel image (admin / dashboard wide shot) */
.case-panel-image {
    padding: 0 var(--gutter);
    max-width: 1440px;
    margin: clamp(60px, 8vw, 120px) auto;
}
.case-panel-image img,
.case-panel-image video {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

/* Brand card (closing logo block) */
.case-brand-card {
    padding: clamp(140px, 18vw, 260px) var(--gutter);
    background: var(--c-card);
    text-align: center;
    margin: clamp(60px, 8vw, 120px) 0 0;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
}
.case-brand-card .logo {
    font-family: var(--f-display);
    font-size: clamp(56px, 11vw, 200px);
    line-height: 1;
    font-weight: 300;
    letter-spacing: -0.04em;
}
.case-brand-card .sub {
    font-family: var(--f-sans);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-fg-muted);
    margin-top: 28px;
}

/* ── Side-text sections (eyebrow + h2 LEFT / paragraph RIGHT) ── */
.case-side-text {
    padding: clamp(80px, 12vw, 180px) var(--gutter);
}
.case-side-text .case-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 120px);
    align-items: start;
    max-width: 1440px;
    margin: 0 auto;
}
.case-side-text .left-col { position: sticky; top: 120px; }
/* 좌측 스플릿 헤드: 첫 줄·<em> 동일 clamp (기본 h2보다 작아지던 현상 방지) */
.case-side-text .left-col h2 {
    font-family: var(--f-display);
    font-size: clamp(40px, 6vw, 96px);
    line-height: 1;
    letter-spacing: -0.02em;
    font-weight: 300;
}
.case-side-text .left-col h2 em {
    font-style: italic;
    font-weight: 300;
    color: var(--c-accent);
}
.case-side-text.dark .left-col h2 em {
    color: var(--c-accent);
}
.case-side-text .right-col .case-paragraphs p {
    font-family: var(--f-sans);
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: 1.7;
    color: var(--c-fg-muted);
    margin-bottom: 20px;
}
.case-side-text .right-col .case-paragraphs p:last-child { margin-bottom: 0; }
.case-side-text.dark .right-col .case-paragraphs p { color: rgba(255,255,255,0.7); }

/* ── 2-up card grid (equal height, rounded) ── */
.case-two-up {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px, 1.5vw, 24px);
    padding: 0 var(--gutter);
    max-width: 1440px;
    margin: clamp(48px, 6vw, 96px) auto;
}
.case-two-up .item {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--c-card);
    aspect-ratio: 4 / 3;
}
.case-two-up .item.tall { aspect-ratio: 3 / 4; }
.case-two-up img, .case-two-up video { width: 100%; height: 100%; object-fit: cover; }

/* ── 2-up GOALS layout: text left + 2-up images right ── */
.case-goals-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
    padding: clamp(80px, 12vw, 180px) var(--gutter);
    max-width: 1440px;
    margin: 0 auto;
}
.case-goals-row .text-col {}
.case-goals-row .image-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px, 1.5vw, 20px);
}
.case-goals-row .image-col .item {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--c-card);
}
.case-goals-row .image-col .item img,
.case-goals-row .image-col .item video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── 4-image 2×2 brand grid ── */
.case-brand-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px, 1.5vw, 24px);
    padding: 0 var(--gutter);
    max-width: 1440px;
    margin: clamp(60px, 8vw, 120px) auto;
}
.case-brand-grid .item {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--c-card);
}
.case-brand-grid .item.wide { aspect-ratio: 16 / 9; grid-column: span 2; }
.case-brand-grid img,
.case-brand-grid video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Prev / Next project navigation ── */
.proj-nav-row {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    border-top: 1px solid var(--c-line);
}
.proj-nav-row .divider { background: var(--c-line); }
.proj-nav-item {
    padding: clamp(48px, 7vw, 100px) var(--gutter);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: background .4s;
}
.proj-nav-item:hover { background: var(--c-fg); color: var(--c-bg); }
.proj-nav-item:hover .nav-lbl { color: rgba(255,255,255,0.55); }
.proj-nav-item.prev { align-items: flex-start; }
.proj-nav-item.next { align-items: flex-end; text-align: right; }
.proj-nav-item .nav-lbl {
    font-family: var(--f-sans);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-fg-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color .4s;
}
.proj-nav-item.prev .nav-lbl::before { content: "←"; }
.proj-nav-item.next .nav-lbl::after  { content: "→"; }
.proj-nav-item .nav-title {
    font-family: var(--f-display);
    font-size: clamp(32px, 4.5vw, 72px);
    line-height: 1;
    font-style: italic;
    font-weight: 300;
}

/* ── Dark full-bleed banner ── */
.case-banner {
    width: 100%;
    background: var(--c-fg);
    padding: clamp(100px, 14vw, 220px) var(--gutter);
    display: flex;
    align-items: center;
    justify-content: center;
}
.case-banner img, .case-banner video {
    width: 100%;
    max-width: 1440px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-lg);
}
.case-banner.no-pad { padding: 0; }
.case-banner.no-pad img, .case-banner.no-pad video { border-radius: 0; max-width: 100%; }

/* ── Responsive overrides ── */
@media (max-width: 900px) {
    .case-goals-row { grid-template-columns: 1fr; }
    .case-goals-row .image-col { grid-template-columns: 1fr 1fr; }
    .case-side-text .case-inner { grid-template-columns: 1fr; }
    .case-side-text .left-col { position: static; }
    .proj-nav-row { grid-template-columns: 1fr; }
    .proj-nav-row .divider { width: 100%; height: 1px; }
    .proj-nav-item.next { align-items: flex-start; text-align: left; }
}
@media (max-width: 720px) {
    .case-hero-strip,
    .case-phone-grid { grid-template-columns: 1fr 1fr; }
    .case-phone-asymm { grid-template-columns: 1fr; }
    .case-wide-bleed { aspect-ratio: 4 / 3; }
    .case-object-showcase img { width: 100%; }
    .case-two-up,
    .case-brand-grid { grid-template-columns: 1fr; }
    .case-brand-grid .item.wide { grid-column: span 1; aspect-ratio: 4/3; }
}

.proj-next {
    padding: clamp(80px, 12vw, 160px) var(--gutter);
    border-top: 1px solid var(--c-line);
    text-align: center;
}
.proj-next .lbl { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-fg-muted); margin-bottom: 24px; }
.proj-next h2 { font-size: clamp(56px, 10vw, 180px); line-height: 0.95; }

@media (max-width: 900px) {
    .proj-meta { grid-template-columns: 1fr 1fr; gap: 20px; }
    .case-grid-2 { grid-template-columns: 1fr; }
    .case-bullets-grid { grid-template-columns: 1fr; }
    .case-bullets li { grid-template-columns: 40px 1fr; gap: 12px; }
    .proj-gallery { grid-template-columns: 1fr; }
}

/* ---------- 19. About ---------- */
.about-intro { padding: 80px var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.about-intro h2 { font-size: clamp(40px, 5vw, 84px); }
.testimonials { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 80px var(--gutter); }
.testimonial { padding: 36px; border-radius: var(--radius); border: 1px solid var(--c-line); }
.testimonial .quote { font-family: var(--f-display); font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; }
.testimonial .source { margin-top: 24px; font-size: 13px; color: var(--c-fg-muted); letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 900px) {
    .about-intro, .testimonials { grid-template-columns: 1fr; padding: 60px var(--gutter); }
}

/* ---------- 20. Contact form ---------- */
.contact-form { padding: 80px var(--gutter) 160px; max-width: 1100px; margin: 0 auto; }
.form-section { padding: 36px 0; border-top: 1px solid var(--c-line); }
.form-section h3 { font-family: var(--f-sans); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-fg-muted); margin-bottom: 24px; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
    padding: 14px 24px;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    font-size: 15px; font-weight: 500;
    background-color: var(--c-bg);
    background-image: linear-gradient(var(--c-fg), var(--c-fg));
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 0;
    transition:
        background-size .38s var(--ease-out),
        color .3s var(--ease-out),
        border-color .3s var(--ease-out);
}
.chip:hover,
.chip.is-on {
    color: var(--c-bg);
    border-color: var(--c-fg);
    background-size: 100% 100%;
}
.input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-fg-muted); }
.field input, .field textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--c-line);
    padding: 12px 0;
    font-family: var(--f-display);
    font-size: 24px;
    transition: border-color .3s;
    outline: none;
}
.field input:focus, .field textarea:focus { border-color: var(--c-fg); }
.field textarea { resize: vertical; min-height: 120px; }
.submit-row { display: flex; justify-content: flex-end; padding-top: 40px; }
@media (max-width: 720px) { .input-row { grid-template-columns: 1fr; } }

/* ---------- 21. Reveal: 세로 슬라이드 대신 서서히 밝아지며 선명해짐 ---------- */
[data-reveal] {
    opacity: 0.2;
    transform: none;
    filter: blur(10px) brightness(0.52);
    transition: opacity 1.1s var(--ease-out), filter 1.2s var(--ease-out);
}
[data-reveal].is-in { opacity: 1; filter: none; }
[data-reveal-stagger] > * {
    opacity: 0.2;
    transform: none;
    filter: blur(9px) brightness(0.55);
    transition: opacity 1s var(--ease-out), filter 1.1s var(--ease-out);
}
[data-reveal-stagger].is-in > * { opacity: 1; filter: none; }
[data-reveal-stagger].is-in > *:nth-child(1) { transition-delay: .05s; }
[data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: .12s; }
[data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: .19s; }
[data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: .26s; }
[data-reveal-stagger].is-in > *:nth-child(5) { transition-delay: .33s; }
[data-reveal-stagger].is-in > *:nth-child(6) { transition-delay: .4s; }
[data-reveal-stagger].is-in > *:nth-child(7) { transition-delay: .47s; }
[data-reveal-stagger].is-in > *:nth-child(8) { transition-delay: .54s; }
[data-reveal-stagger].is-in > *:nth-child(n+9) { transition-delay: .62s; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal],
    [data-reveal-stagger] > * {
        opacity: 1;
        filter: none;
        transition: none;
    }
    .hero-title .word > span {
        opacity: 1;
        filter: none;
        transition: none;
    }
}

/* ---------- 21c. 글자 단위 hover (헤더·메뉴·필터·푸터 공용) ---------- */
.link-hover {
    display: inline-flex;
    align-items: baseline;
    vertical-align: top;
    white-space: nowrap;
    line-height: 1.15;
}
.link-hover-char {
    display: inline-block;
    overflow: hidden;
    height: 1.15em;
    line-height: 1.15;
    vertical-align: top;
}
.link-hover-char-inner {
    display: block;
    transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
    /* hover OUT 시 역방향 stagger */
    transition-delay: calc((var(--n, 1) - var(--i, 0) - 1) * 0.012s);
    will-change: transform;
}
.link-hover-char-copy {
    display: block;
    height: 1.15em;
    line-height: 1.15;
}
a:hover .link-hover-char-inner,
a:focus-visible .link-hover-char-inner,
button:hover .link-hover-char-inner,
button:focus-visible .link-hover-char-inner {
    transform: translateY(-50%);
    /* hover IN 시 정방향 stagger */
    transition-delay: calc(var(--i, 0) * 0.018s);
}
@media (prefers-reduced-motion: reduce) {
    .link-hover-char-inner {
        transition: none !important;
        transform: none !important;
    }
}

/* ---------- 21b. 페이지 전환 패널: 아래→위로 덮고, 새 페이지에서 위로 빠져나감 ---------- */
.page-trans {
    position: fixed;
    inset: 0;
    background: var(--c-fg);
    z-index: 200;
    pointer-events: none;
    transform: translate3d(0, 100%, 0);
    will-change: transform;
}
.page-trans.is-in {
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
    transition: transform 0.7s cubic-bezier(0.7, 0, 0.3, 1);
}
.page-trans.is-cover {
    transform: translate3d(0, 0, 0);
    transition: none;
}
.page-trans.is-cover.is-out {
    transform: translate3d(0, -100%, 0);
    transition: transform 0.7s cubic-bezier(0.7, 0, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
    .page-trans { display: none !important; }
}

/* ---------- 23. Magnetic helper ---------- */
.magnetic { display: inline-block; will-change: transform; }
.magnetic-inner { display: inline-block; will-change: transform; }

/* ---------- 24. Selection ---------- */
::selection { background: var(--c-accent); color: #fff; }

/* ---------- 25. Tiny utilities ---------- */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ---------- 26. Blog Post Detail (저널 글 상세) ---------- */

/* Hero */
.post-hero {
    padding: 160px var(--gutter) 0;
    max-width: var(--container);
    margin: 0 auto;
}
.post-top-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
}
.post-category-badge {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    font-family: var(--f-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--c-fg);
}
.post-date {
    font-family: var(--f-sans);
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--c-fg-muted);
}
.post-title {
    font-size: clamp(40px, 6vw, 96px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    max-width: 18ch;
}
.post-excerpt {
    font-family: var(--f-sans);
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.6;
    color: var(--c-fg-muted);
    max-width: 56ch;
    margin-top: 28px;
}

/* Cover */
.post-cover {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: clamp(48px, 6vw, 96px) auto;
    max-width: var(--container);
    background: var(--c-card);
}
.post-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Body layout: content left + sidebar right */
.post-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: clamp(48px, 6vw, 100px);
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter) clamp(80px, 12vw, 160px);
    align-items: start;
}
.post-body {}
.post-body p {
    font-family: var(--f-display);
    font-size: clamp(18px, 1.45vw, 24px);
    line-height: 1.65;
    margin-bottom: 28px;
    color: var(--c-fg);
}
.post-body p:last-child { margin-bottom: 0; }

/* Sidebar */
.post-sidebar {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.sidebar-section {}
.sidebar-label {
    font-family: var(--f-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-fg);
    margin-bottom: 20px;
}
.share-icons {
    display: flex;
    gap: 12px;
}
.share-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--c-fg);
    color: var(--c-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background .3s var(--ease-out), transform .3s var(--ease-out);
}
.share-icon:hover {
    background: var(--c-accent);
    transform: translateY(-2px);
}
.share-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Related posts in sidebar */
.related-post {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid var(--c-line);
    transition: opacity .3s;
}
.related-post:last-child { border-bottom: 1px solid var(--c-line); }
.related-post:hover { opacity: 0.7; }
.related-post .thumb {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--c-card);
    flex-shrink: 0;
}
.related-post .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.related-post .info h4 {
    font-family: var(--f-display);
    font-size: 15px;
    line-height: 1.3;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.related-post .info .r-cat {
    font-family: var(--f-sans);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-fg-muted);
    margin-top: 4px;
}

/* Bottom related posts (full-width section) */
.post-more-section {
    padding: 0 var(--gutter) clamp(80px, 12vw, 160px);
    max-width: var(--container);
    margin: 0 auto;
}

/* Responsive */
@media (max-width: 900px) {
    .post-layout {
        grid-template-columns: 1fr;
    }
    .post-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 32px;
        padding-top: 48px;
        border-top: 1px solid var(--c-line);
    }
    .sidebar-section { min-width: 200px; flex: 1; }
    .post-title { max-width: none; }
}

/* ============================================
   27. Service Detail (서비스 상세 페이지)
   — 기존 case-* 토큰을 최대한 상속받아 일관성 유지
   ============================================ */

/* ── Hero ── */
.svc-hero {
    padding: clamp(140px, 18vw, 240px) var(--gutter) 0;
    max-width: 1440px;
    margin: 0 auto;
}
.svc-hero .svc-num {
    display: block;
    font-family: var(--f-sans);
    font-size: clamp(14px, 1.05vw, 17px);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-fg-muted);
    margin-bottom: 28px;
}
.svc-hero-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(40px, 6vw, 100px);
    align-items: end;
    padding-top: clamp(20px, 3vw, 40px);
}
.svc-hero h1 {
    font-family: var(--f-display);
    /* 한 줄에 긴 제목이 들어가도록 상한·vw를 다소 낮춤 */
    font-size: clamp(48px, 6.5vw, 132px);
    line-height: 0.95;
    letter-spacing: -0.025em;
    font-weight: 300;
}
/* 2열 그리드(좁은 제목 칼럼)에서 줄바꿈 방지 — AI 전략 컨설팅 등 */
@media (min-width: 901px) {
    .svc-hero h1 {
        font-size: clamp(42px, 5.4vw, 102px);
        white-space: nowrap;
    }
}
.svc-hero h1 em {
    font-style: italic;
    color: var(--c-accent);
}
.svc-hero .svc-tagline {
    font-family: var(--f-display);
    font-size: clamp(20px, 2vw, 32px);
    line-height: 1.35;
    font-style: italic;
    font-weight: 300;
    color: var(--c-fg-muted);
}
.svc-meta-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    padding: 60px 0;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    margin-top: clamp(60px, 8vw, 120px);
}
.svc-meta-row .lbl {
    font-family: var(--f-sans);
    font-size: clamp(13px, 0.95vw, 15px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-fg-muted);
    margin-bottom: 10px;
}
.svc-meta-row .val {
    font-family: var(--f-display);
    font-size: clamp(16px, 1.4vw, 22px);
    line-height: 1.4;
}

/* ── Cover ── (너비·세로 확대) */
.svc-cover {
    width: min(100%, 1520px);
    margin-inline: auto;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    background: var(--c-card);
    margin-top: clamp(60px, 8vw, 120px);
    margin-bottom: clamp(32px, 5vw, 72px);
    border-radius: var(--radius-lg);
}
.svc-cover img,
.svc-cover video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── 비유 인용 박스 (whatItIs.analogy) ── */
.svc-analogy {
    margin-top: 36px;
    padding: 28px 32px;
    border-left: 3px solid var(--c-accent);
    background: var(--c-card);
    border-radius: 0 var(--radius) var(--radius) 0;
}
.svc-analogy .case-eyebrow {
    margin-bottom: 14px;
}
.svc-analogy p {
    font-family: var(--f-display);
    font-size: clamp(18px, 1.5vw, 24px);
    line-height: 1.5;
    font-style: italic;
    color: var(--c-fg);
}

/* ── 공용: 섹션 헤더 행 ── */
.svc-section { padding: clamp(80px, 12vw, 180px) var(--gutter); }
/* “이런 분께 추천드려요” — 상단과 구분되는 풀폭 밴드(내용은 기존처럼 max-width 유지) */
.case-section.svc-section.svc-section-panel {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    margin-top: clamp(28px, 5vw, 72px);
    padding: clamp(52px, 7vw, 112px) var(--gutter);
    background: var(--c-card);
    border: none;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    border-radius: 0;
    box-shadow: none;
}
.case-section.svc-section.svc-section-panel .svc-persona-card {
    background: var(--c-bg);
}
.svc-heading-row {
    max-width: 1440px;
    margin: 0 auto;
    padding-bottom: 48px;
}
.svc-h2 {
    font-family: var(--f-display);
    margin-top: 20px;
    font-size: clamp(36px, 5vw, 72px);
    line-height: 1;
    letter-spacing: -0.02em;
    font-weight: 300;
}
.svc-h2 em {
    font-style: italic;
    color: var(--c-accent);
    font-size: 1em;
}
/* 일반체 첫 줄이 이탤릭과 비슷한 광학 크기로 보이도록 보정 */
.svc-h2 .svc-h2-lead,
.case-side-text .left-col h2 .svc-h2-lead {
    font-size: 1.08em;
}

/* ── 페르소나 카드 그리드 ── */
.svc-persona-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1440px;
    margin: 0 auto;
}
.svc-persona-card {
    padding: 36px 32px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    transition:
        border-color 0.4s var(--ease-out),
        background 0.4s var(--ease-out),
        transform 0.4s var(--ease-out);
}
.svc-persona-card:hover {
    border-color: var(--c-fg);
    transform: translateY(-4px);
}
.svc-persona-card .ix {
    display: block;
    font-family: var(--f-sans);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-bottom: 20px;
}
.svc-persona-card h3 {
    font-family: var(--f-display);
    font-size: clamp(20px, 1.8vw, 26px);
    line-height: 1.3;
    font-weight: 400;
    margin-bottom: 16px;
}
.svc-persona-card p {
    font-family: var(--f-sans);
    font-size: 15px;
    line-height: 1.65;
    color: var(--c-fg-muted);
}

/* ── 진행 과정 가로 스텝 ── */
.svc-step-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    max-width: 1440px;
    margin: 0 auto;
}
.svc-step-list .step {
    padding: 40px 24px 0;
    border-top: 1px solid var(--c-line);
    position: relative;
}
.svc-step-list .step + .step { border-left: 1px solid var(--c-line); }
.svc-step-list .step .num {
    display: block;
    font-family: var(--f-sans);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-fg-muted);
    margin-bottom: 18px;
}
.svc-step-list .step h4 {
    font-family: var(--f-display);
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.2;
    font-weight: 400;
    margin-bottom: 14px;
    min-height: 2.4em;
}
.svc-step-list .step p {
    font-family: var(--f-sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--c-fg-muted);
}

/* ── 결과물 그리드 ── */
.svc-deliver-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 1440px;
    margin: 0 auto;
    border-top: 1px solid var(--c-line);
}
.svc-deliver-grid .item {
    padding: 40px 32px;
    border-bottom: 1px solid var(--c-line);
    transition: background 0.4s var(--ease-out);
}
.svc-deliver-grid .item:nth-child(odd) { border-right: 1px solid var(--c-line); }
.svc-deliver-grid .item:hover { background: var(--c-bg); }
.svc-deliver-grid .item h4 {
    font-family: var(--f-display);
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 14px;
}
.svc-deliver-grid .item p {
    font-family: var(--f-sans);
    font-size: 15px;
    line-height: 1.65;
    color: var(--c-fg-muted);
}

/* ── 도구 칩 ── */
.svc-tech-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 1440px;
    margin: 0 auto;
}
.svc-tech-chips span {
    font-family: var(--f-sans);
    font-size: 14px;
    letter-spacing: 0.02em;
    padding: 10px 18px;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    color: var(--c-fg-muted);
    transition:
        border-color 0.3s var(--ease-out),
        color 0.3s var(--ease-out),
        background 0.3s var(--ease-out);
}
.svc-tech-chips span:hover {
    border-color: var(--c-fg);
    color: var(--c-fg);
}

/* ── 관련 프로젝트 미니 카드 ── */
.svc-related {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(24px, 3vw, 48px);
    max-width: 1440px;
    margin: 0 auto;
}
.svc-related .card {
    display: block;
    text-decoration: none;
    color: inherit;
}
.svc-related .media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--c-card);
    margin-bottom: 24px;
}
.svc-related .media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease-out);
}
.svc-related .card:hover .media img { transform: scale(1.04); }
.svc-related h4 {
    font-family: var(--f-display);
    font-size: clamp(24px, 2.4vw, 36px);
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 8px;
}
.svc-related .blurb {
    font-family: var(--f-sans);
    font-size: 15px;
    color: var(--c-fg-muted);
}

/* ── FAQ (details/summary) ── */
.svc-faq {
    max-width: 1080px;
    margin: 0 auto;
}
.svc-faq details {
    border-top: 1px solid var(--c-line);
    padding: 28px 0;
}
.svc-faq details:last-of-type { border-bottom: 1px solid var(--c-line); }
.svc-faq summary {
    list-style: none;
    cursor: none;
    display: grid;
    grid-template-columns: 1fr 32px;
    align-items: center;
    gap: 24px;
    font-family: var(--f-display);
    font-size: clamp(20px, 1.8vw, 26px);
    font-weight: 400;
    line-height: 1.35;
}
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary .ic {
    width: 32px;
    height: 32px;
    position: relative;
    flex-shrink: 0;
}
.svc-faq summary .ic::before,
.svc-faq summary .ic::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 1.5px;
    background: var(--c-fg);
    transform: translate(-50%, -50%);
    transition: transform 0.35s var(--ease-out);
}
.svc-faq summary .ic::after { transform: translate(-50%, -50%) rotate(90deg); }
.svc-faq details[open] summary .ic::after { transform: translate(-50%, -50%) rotate(0); }
.svc-faq .ans {
    padding-top: 20px;
    max-width: 70ch;
    font-family: var(--f-sans);
    font-size: 16px;
    line-height: 1.7;
    color: var(--c-fg-muted);
}

/* 서비스 상세(#svc-root) — 본문·헤드 타이포 살짝 축소 */
#svc-root .svc-hero .svc-num {
    font-size: clamp(12px, 0.92vw, 15px);
}
#svc-root .svc-hero h1 {
    font-size: clamp(40px, 5.5vw, 108px);
}
@media (min-width: 901px) {
    #svc-root .svc-hero h1 {
        font-size: clamp(34px, 4.6vw, 84px);
    }
}
#svc-root .svc-hero .svc-tagline {
    font-size: clamp(17px, 1.7vw, 28px);
}
#svc-root .svc-meta-row .lbl {
    font-size: clamp(11px, 0.82vw, 13px);
}
#svc-root .svc-meta-row .val {
    font-size: clamp(14px, 1.2vw, 18px);
}
#svc-root .case-eyebrow {
    font-size: clamp(12px, 0.92vw, 15px);
}
#svc-root .case-side-text .left-col h2,
#svc-root .case-section h2 {
    font-size: clamp(32px, 5vw, 80px);
}
#svc-root .case-side-text .right-col .case-paragraphs p {
    font-size: clamp(14px, 1.12vw, 17px);
}
#svc-root .svc-analogy p {
    font-size: clamp(16px, 1.3vw, 20px);
}
#svc-root .svc-persona-card h3 {
    font-size: clamp(17px, 1.52vw, 22px);
}
#svc-root .svc-persona-card p {
    font-size: 13px;
}
#svc-root .svc-step-list .step h4 {
    font-size: clamp(19px, 1.7vw, 26px);
}
#svc-root .svc-step-list .step p {
    font-size: 12px;
}
#svc-root .svc-deliver-grid .item h4 {
    font-size: clamp(19px, 1.7vw, 26px);
}
#svc-root .svc-deliver-grid .item p {
    font-size: 13px;
}
#svc-root .svc-faq summary {
    font-size: clamp(17px, 1.52vw, 22px);
}
#svc-root .svc-faq .ans {
    font-size: 14px;
}
#svc-root .contact-cta .huge {
    font-size: clamp(50px, 10vw, 176px);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .svc-step-list { grid-template-columns: repeat(2, 1fr); }
    .svc-step-list .step + .step { border-left: none; }
    .svc-step-list .step:nth-child(even) { border-left: 1px solid var(--c-line); }
    .svc-step-list .step h4 { min-height: 0; }
}
@media (max-width: 900px) {
    .svc-hero-inner { grid-template-columns: 1fr; gap: 40px; align-items: start; }
    .svc-meta-row { grid-template-columns: 1fr; gap: 28px; }
    .svc-persona-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .svc-step-list { grid-template-columns: 1fr; }
    .svc-step-list .step:nth-child(even) { border-left: none; }
    .svc-deliver-grid { grid-template-columns: 1fr; }
    .svc-deliver-grid .item:nth-child(odd) { border-right: none; }
    .svc-related { grid-template-columns: 1fr; }
}

/* ---------- 30. Contact extras: 응답 흐름 + FAQ (다크 섹션) ---------- */
.contact-extras {
    --c-line-dim: rgba(255,255,255,0.12);
    --c-line-mid: rgba(255,255,255,0.2);
    --c-text-dim: rgba(255,255,255,0.6);
    --c-text-sub: rgba(255,255,255,0.45);
    /* 마지막 자식이 풀폭 영상 카드이므로 섹션 하단 패딩을 제거 — 푸터와의 빈 공간 정리 */
    padding-bottom: 0;
}
.contact-extras .eyebrow-inverse {
    color: rgba(255,255,255,0.7);
    font-size: clamp(15px, 1.05vw, 17px);
    letter-spacing: 0.22em;
    gap: 14px;
}
.contact-extras .eyebrow-inverse::before {
    background: rgba(255,255,255,0.55);
    width: 40px;
}

/* 30.1 헤드 */
.contact-extras-head {
    max-width: 920px;
    margin-bottom: clamp(48px, 6vw, 96px);
}
.contact-extras-title {
    font-family: var(--f-display);
    font-size: clamp(40px, 6.4vw, 112px);
    font-weight: 500;
    line-height: 1;
    margin: 24px 0 clamp(20px, 2vw, 32px);
    letter-spacing: -0.01em;
}
.contact-extras-lead {
    color: var(--c-text-dim);
    max-width: 58ch;
}

/* 30.2 메트릭 스트립 */
.contact-metric-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--c-line-mid);
    border-bottom: 1px solid var(--c-line-mid);
    margin-bottom: clamp(72px, 10vw, 160px);
}
.contact-metric {
    padding: clamp(28px, 3.4vw, 52px) clamp(20px, 2vw, 32px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-right: 1px solid var(--c-line-dim);
    position: relative;
    overflow: hidden;
}
.contact-metric:last-child { border-right: none; }
.contact-metric .lbl {
    font-family: var(--f-sans);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-text-sub);
}
.contact-metric .val {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.contact-metric .val .num {
    font-family: var(--f-display);
    font-size: clamp(56px, 6.6vw, 112px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
}
.contact-metric .val .unit {
    font-family: var(--f-sans);
    font-size: 15px;
    color: var(--c-text-dim);
}
.contact-metric .sub {
    font-family: var(--f-sans);
    font-size: 13px;
    color: var(--c-text-dim);
}

/* 30.3 흐름 헤더 */
.contact-flow-head {
    margin-bottom: clamp(32px, 4vw, 56px);
}
.contact-flow-title {
    font-family: var(--f-display);
    font-size: clamp(32px, 4.2vw, 64px);
    font-weight: 500;
    line-height: 1.05;
    margin: 18px 0 0;
}

/* 30.4 흐름 카드 */
.contact-flow {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 2.4vw, 36px);
}
.contact-flow-card {
    position: relative;
    padding: clamp(32px, 3.6vw, 56px);
    border: 1px solid var(--c-line-mid);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    transition: border-color .35s var(--ease-out), transform .35s var(--ease-out);
}
.contact-flow-card::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    transform: translateX(-100%);
    transition: transform 0.9s var(--ease-out);
}
.contact-flow-card:hover {
    border-color: rgba(255,255,255,0.4);
    transform: translateY(-2px);
}
.contact-flow-card:hover::before {
    transform: translateX(100%);
}
.contact-flow-card .step-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 4px;
}
.contact-flow-card .step-num {
    font-family: var(--f-display);
    font-size: clamp(56px, 6.4vw, 104px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.55);
}
.contact-flow-card .step-eng {
    font-family: var(--f-sans);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-text-sub);
    align-self: flex-end;
    padding-bottom: 12px;
}
.contact-flow-card h4 {
    font-family: var(--f-display);
    font-size: clamp(26px, 2.4vw, 36px);
    font-weight: 500;
    line-height: 1.15;
    margin: 4px 0 0;
}
.contact-flow-card p {
    font-family: var(--f-sans);
    font-size: 15px;
    line-height: 1.7;
    color: var(--c-text-dim);
    margin: 0;
    max-width: 44ch;
}
.contact-flow-card .step-meta {
    list-style: none;
    margin: 8px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--c-line-dim);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.contact-flow-card .step-meta li {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 18px;
    font-family: var(--f-sans);
    font-size: 13px;
    line-height: 1.55;
}
.contact-flow-card .step-meta li > span:first-child {
    color: var(--c-text-sub);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 11px;
    padding-top: 2px;
}
.contact-flow-card .step-meta li > span:last-child {
    color: rgba(255,255,255,0.85);
}

/* 30.5 인용 */
.contact-quote {
    margin: clamp(80px, 11vw, 180px) auto;
    max-width: 1080px;
    text-align: center;
    position: relative;
}
.contact-quote .mark {
    display: block;
    font-family: var(--f-display);
    font-size: clamp(96px, 12vw, 200px);
    line-height: 0.7;
    color: rgba(255,255,255,0.18);
    margin-bottom: -28px;
}
.contact-quote p {
    font-family: var(--f-display);
    font-size: clamp(28px, 3.4vw, 52px);
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.01em;
}

/* 30.6 FAQ */
.contact-faq-block {
    padding-top: clamp(40px, 5vw, 80px);
    border-top: 1px solid var(--c-line-dim);
}
.contact-faq-head {
    max-width: 1080px;
    margin: 0 auto clamp(40px, 5vw, 72px);
}
.contact-faq-title {
    font-family: var(--f-display);
    font-size: clamp(32px, 4.2vw, 64px);
    font-weight: 500;
    line-height: 1.05;
    margin: 18px 0 0;
}
.contact-faq-group {
    max-width: 1080px;
    margin: 0 auto clamp(32px, 4vw, 56px);
}
.contact-faq-cat {
    display: inline-block;
    font-family: var(--f-sans);
    font-size: clamp(15px, 1.05vw, 17px);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--c-line-dim);
}
/* 다크 섹션 내부에서 .svc-faq 색을 강제 */
.contact-extras .svc-faq details {
    border-top-color: var(--c-line-mid);
}
.contact-extras .svc-faq details:last-of-type {
    border-bottom-color: var(--c-line-mid);
}
.contact-extras .svc-faq summary {
    color: rgba(255,255,255,0.92);
}
.contact-extras .svc-faq summary .ic::before,
.contact-extras .svc-faq summary .ic::after {
    background: rgba(255,255,255,0.78);
}
.contact-extras .svc-faq .ans {
    color: var(--c-text-dim);
}

/* 30.7 보조 채널 (영상 배경 — full-bleed) */
.contact-channels {
    position: relative;
    /* 화면 가로폭에 꽉 차게 — container 밖으로 빠져나옴 */
    margin-top: clamp(140px, 18vw, 320px);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    border-radius: 0;
    border: none;
    overflow: hidden;
    isolation: isolate;
}
.contact-channels-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.contact-channels-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* 가장 밝게 — 필터 없음 */
    filter: none;
}
.contact-channels-scrim { display: none; }
.contact-channels-inner {
    position: relative;
    z-index: 1;
    padding: clamp(96px, 14vw, 240px) var(--gutter);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(56px, 7vw, 120px);
    align-items: end;
    min-height: clamp(480px, 64vh, 820px);
}
.contact-channels-title {
    font-family: var(--f-display);
    font-size: clamp(44px, 6vw, 104px);
    font-weight: 500;
    line-height: 1.05;
    margin: 18px 0 0;
    /* 스크림 없이도 글자가 너무 묻히지 않도록 살짝 그림자만 유지 */
    text-shadow: 0 2px 28px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.35);
}
.contact-channels-title .contact-channels-emph {
    white-space: nowrap;
}
.contact-channels-grid {
    display: block;
}
/* 통합 메일 카드 (가벼운 상담 — 단일 mailto) */
.contact-channel-unified {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: stretch;
    gap: clamp(24px, 3.5vw, 56px);
    padding: clamp(32px, 4vw, 56px) clamp(28px, 3.5vw, 52px);
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(14,13,11,0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: rgba(255,255,255,0.96);
    text-decoration: none;
    transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
a.contact-channel-unified:hover {
    border-color: rgba(255,255,255,0.55);
    background: rgba(14,13,11,0.62);
    transform: translateY(-2px);
}
.cu-main {
    min-width: 0;
}
.cu-kicker {
    display: inline-block;
    font-family: var(--f-sans);
    font-size: clamp(12px, 0.9vw, 14px);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin-bottom: 14px;
}
.cu-lead {
    font-family: var(--f-sans);
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.65;
    color: rgba(255,255,255,0.78);
    margin: 0 0 20px;
    max-width: 46ch;
}
.cu-email {
    font-family: var(--f-display);
    font-size: clamp(24px, 2.35vw, 38px);
    font-weight: 500;
    line-height: 1.15;
    margin: 0 0 12px;
    letter-spacing: -0.03em;
    word-break: keep-all;
    white-space: nowrap;
}
.cu-hint {
    font-family: var(--f-sans);
    font-size: clamp(13px, 1vw, 15px);
    line-height: 1.55;
    color: rgba(255,255,255,0.58);
    margin: 0;
    max-width: 48ch;
}
.cu-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-left: clamp(20px, 2.5vw, 40px);
    border-left: 1px solid rgba(255,255,255,0.18);
    min-width: clamp(100px, 12vw, 140px);
}
.cu-cta-text {
    font-family: var(--f-sans);
    font-size: clamp(16px, 1.2vw, 19px);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
}
.cu-cta-arrow {
    font-family: var(--f-display);
    font-size: clamp(28px, 2.8vw, 40px);
    line-height: 1;
    color: rgba(255,255,255,0.85);
}
@media (max-width: 640px) {
    .contact-channel-unified {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .cu-email {
        font-size: clamp(19px, 4.6vw, 26px);
    }
    .cu-cta {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-left: 0;
        padding-top: 24px;
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.18);
        min-width: 0;
    }
}
@media (max-width: 1100px) {
    .contact-metric-strip { grid-template-columns: repeat(2, 1fr); }
    .contact-metric:nth-child(2) { border-right: none; }
    .contact-metric:nth-child(-n+2) { border-bottom: 1px solid var(--c-line-dim); }
}
@media (max-width: 900px) {
    .contact-channels-inner { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .contact-flow { grid-template-columns: 1fr; }
    .contact-metric-strip { grid-template-columns: 1fr; }
    .contact-metric { border-right: none; border-bottom: 1px solid var(--c-line-dim); }
    .contact-metric:last-child { border-bottom: none; }
    .contact-flow-card .step-meta li { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- 22. CS Chatbot Panel ---------- */
.cs-chat-panel {
    position: fixed;
    /* 챗봇 아바타(우측 62px, 하단 48px, 136×136) 위에 16px 간격을 두고 띄움
       → bottom: 48 + 136 + 16 = 200px, 우측 정렬은 아바타와 동일한 62px */
    right: 62px;
    bottom: 200px;
    width: min(380px, calc(100vw - 80px));
    height: min(560px, calc(100vh - 240px));
    background: #ffffff;
    color: #14130f;
    border: 1px solid rgba(20, 19, 15, 0.12);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22), 0 8px 18px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(16px) scale(0.96);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity .28s var(--ease-out), transform .35s var(--ease-out);
    z-index: 95;
    font-family: var(--f-sans);
    /* 패널 안 스크롤이 페이지로 새지 않도록 */
    overscroll-behavior: contain;
}
.cs-chat-panel.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.cs-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(20, 19, 15, 0.08);
    flex-shrink: 0;
}
.cs-chat-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.cs-chat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff3b30;
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.45);
    animation: cs-live-pulse 1.4s ease-out infinite;
}
@keyframes cs-live-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.55);
        transform: scale(1);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 59, 48, 0);
        transform: scale(1.08);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
        transform: scale(1);
    }
}
@media (prefers-reduced-motion: reduce) {
    .cs-chat-dot { animation: none; box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.22); }
}
.cs-chat-close {
    width: 28px;
    height: 28px;
    line-height: 1;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 22px;
    cursor: pointer;
    border-radius: 50%;
    transition: background .2s var(--ease-out);
}
.cs-chat-close:hover { background: rgba(20, 19, 15, 0.06); }
.cs-chat-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}
.cs-chat-suggest { overscroll-behavior: contain; }
.cs-msg {
    display: flex;
    width: 100%;
}
.cs-msg-bot { justify-content: flex-start; }
.cs-msg-user { justify-content: flex-end; }
.cs-bubble {
    max-width: 86%;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.55;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.cs-msg-bot .cs-bubble {
    background: #f4f3ef;
    color: #14130f;
    border-bottom-left-radius: 6px;
}
.cs-msg-user .cs-bubble {
    background: #14130f;
    color: #fff;
    border-bottom-right-radius: 6px;
}
.cs-bubble p { margin: 0 0 6px; }
.cs-bubble p:last-child { margin-bottom: 0; }
.cs-answer-q {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(20, 19, 15, 0.55);
    margin-bottom: 6px;
}
.cs-answer-a {
    font-size: 14px;
    line-height: 1.6;
}
.cs-inline-cta {
    display: inline-block;
    margin-top: 10px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #14130f;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}
.cs-card-contact {
    margin-top: 4px;
    padding: 14px;
    border-radius: 12px;
    background: #14130f;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cs-card-text {
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
}
.cs-card-btn {
    align-self: flex-start;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    color: #14130f;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
.cs-related {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed rgba(20, 19, 15, 0.12);
}
.cs-related-label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(20, 19, 15, 0.5);
    margin-bottom: 8px;
}
.cs-related-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cs-related-chip,
.cs-quick-chip {
    appearance: none;
    border: 1px solid rgba(20, 19, 15, 0.18);
    background: #fff;
    color: #14130f;
    font-size: 12px;
    font-weight: 500;
    padding: 7px 12px;
    border-radius: 999px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    line-height: 1.3;
    transition: background .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.cs-related-chip:hover,
.cs-quick-chip:hover {
    background: #14130f;
    color: #fff;
    border-color: #14130f;
}
.cs-chat-suggest {
    padding: 10px 14px 8px;
    border-top: 1px solid rgba(20, 19, 15, 0.08);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 96px;
    overflow-y: auto;
    flex-shrink: 0;
}
.cs-chat-form {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 14px;
    border-top: 1px solid rgba(20, 19, 15, 0.08);
    flex-shrink: 0;
}
.cs-chat-input {
    flex: 1;
    border: 1px solid rgba(20, 19, 15, 0.18);
    background: #f7f5f0;
    border-radius: 999px;
    padding: 11px 16px;
    font-family: inherit;
    font-size: 14px;
    color: inherit;
    outline: none;
    transition: border-color .2s var(--ease-out), background .2s var(--ease-out);
}
.cs-chat-input::placeholder { color: rgba(20, 19, 15, 0.4); }
.cs-chat-input:focus {
    border-color: #14130f;
    background: #fff;
}
.cs-chat-send {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #14130f;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s var(--ease-out), opacity .2s var(--ease-out);
}
.cs-chat-send:hover { transform: scale(1.06); }

/* 챗봇이 열려 있을 때 플로팅 CTA 살짝 축소 */
/* 챗봇 패널이 열려도 플로팅 CTA(아바타·동영상)는 원본 그대로 유지 */
body.cs-chat-on .floating-cs-cta {
    transform: none;
    filter: none;
}

@media (max-width: 900px) {
    .cs-chat-panel { display: none; }
}
@media (max-width: 720px) {
    .cs-chat-panel {
        right: 16px;
        bottom: 180px;
        width: calc(100vw - 32px);
    }
}