/* ============================================================
   DBT Rebuild — index.html 전용 (구 index2, 스크롤월드 리빌드) 스타일
   토큰은 theme.css(:root)에서만 온다. 크기 리터럴 최소화.
   기존 섹션 css(hero.css 등)는 이 페이지에서 로드하지 않는다.
   ============================================================ */

/* ---------- Base additions ---------- */
/* scroll-behavior: smooth 금지 — Lenis와 이중 애니메이션돼 고무줄 스크롤이 된다 */
html { scroll-behavior: auto; }
body {
    line-break: strict;
    text-wrap: pretty;
    background: var(--color-bg-cream);
}
h1, h2, h3 { text-wrap: balance; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
main { position: relative; }

body.loading { overflow: hidden; }
body.nav-open { overflow: hidden; }

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.accent { color: var(--color-accent); }

/* 작은 글자용 레드 변형 (이림 결정 2026-08-15) — 브랜드 레드는 크림 위 3.39:1로 라벨급 미달.
   표제·빨간 점·장식은 --color-accent 유지, 작은 글자만 배경 밝기에 따라 갈라 쓴다.
   deep = 밝은 배경(크림·흰 카드) 위 4.8:1 / soft = 어두운 배경(포레스트·다크) 위 4.9:1 */
:root {
    --color-accent-deep: #B34747;
    --color-accent-soft: #E78A8A;
}

/* 모바일 하한 13px — theme.css mono-label(0.8rem=12.8px)을 이 페이지에서만 올린다 */
.mono-label { font-size: 0.85rem; }
.legal-footer .copyright { font-size: 0.82rem; }
.legal-footer { font-size: 0.9rem; }
/* 이탤릭 전면 금지 (이림 2026-08-15 "웹 페이지에서 이탤릭 절대 안 쓴다") —
   강조는 세리프+레드로만. em/i가 새로 들어와도 여기서 원리적으로 차단된다.
   유일한 예외 = 브랜드 워드마크의 Better (이림 "Better만 그대로 쓰자") */
em, i { font-style: normal; }
.logo-text em, .brand-marquee-item em, .hero-word-better em { font-style: italic; }

.accent-serif {
    font-family: var(--font-serif);
    font-weight: 500;
    color: var(--color-accent);
}

/* 모션 허용 시에만 초기 숨김 (JS가 html.js-anim을 붙인다) */
html.js-anim [data-reveal] { opacity: 0; }
html.js-anim .hero-word { transform: translateY(110%); }

/* ---------- Preloader ---------- */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--color-bg-dark);
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
}
.loader-inner { text-align: center; }
.loader-line { overflow: hidden; display: block; }
.loader-text {
    display: inline-block;
    font-family: var(--font-serif);
    font-size: var(--font-size-lg);
    letter-spacing: 0.08em;
    transform: translateY(100%);
    opacity: 0;
}
.loader-x { color: var(--color-accent); }
.loader-divider {
    width: 89px;
    height: 1px;
    margin: var(--space-sm) auto;
    background: var(--color-line-light);
    transform: scaleX(0);
    transform-origin: center;
}
.loader-progress { opacity: 0.6; margin-bottom: 0; }

/* ---------- Header ---------- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 900;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--padding-x);
    mix-blend-mode: difference;
    color: var(--color-bg-cream);
    transition: transform 0.35s var(--ease-out-expo);
}
/* 내려갈 때 숨고 올라올 때 돌아온다 — difference 헤더가 본문 글자와 포개져
   양쪽 다 안 읽히던 겹침을 원리적으로 없앤다 (initHeaderAutoHide가 토글) */
.header.header--hidden { transform: translateY(-100%); }
.logo-text {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    letter-spacing: 0.01em;
}
.logo-dot, .hero-dot, .bm-dot { color: var(--color-accent); }
.menu-btn {
    margin-bottom: 0;
    letter-spacing: 0.14em;
    padding: 6px 2px;
}
/* 캠프 신청 상주 버튼 — 폼이 페이지 후반에 있어 히어로에서 이탈하면 유입 경로가 안 보인다.
   헤더가 difference 블렌드라 채운 배경은 반전돼 뒤집힌 색이 된다 → 테두리 + 글자만. */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.header-cta {
    margin-bottom: 0;
    letter-spacing: 0.06em;
    font-family: var(--font-kr);
    padding: 7px 15px;
    border: 1px solid currentColor;
    border-radius: 999px;
    white-space: nowrap;
    transition: opacity 0.25s ease;
}
.header-cta:hover { opacity: 0.62; }
@media (max-width: 480px) {
    .header-actions { gap: 12px; }
    .header-cta { padding: 6px 11px; letter-spacing: 0.02em; }
}

/* ---------- Navigation overlay ---------- */
.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 890;
    background: var(--color-bg-dark);
    color: var(--color-text-light);
    clip-path: inset(0% 0% 100% 0%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-content {
    width: 100%;
    max-width: 720px;
    padding: 0 var(--padding-x);
}
.nav-links { display: flex; flex-direction: column; gap: var(--space-xs); }
.nav-link {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    padding: var(--space-xxs) 0;
    border-bottom: 1px solid var(--color-line-light);
}
.nav-number {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    opacity: 0.5;
}
.nav-text {
    font-family: var(--font-serif);
    font-size: var(--font-size-md);
    transition: color 0.25s ease, transform 0.35s var(--ease-out-expo);
}
.nav-link:hover .nav-text {
    color: var(--color-accent);
    transform: translateX(8px);
}
.nav-footer { margin-top: var(--space-lg); }
.nav-email {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    opacity: 0.6;
}
.nav-email:hover { opacity: 1; }

/* ---------- Custom cursor ---------- */
.custom-cursor {
    position: fixed;
    top: -9px;
    left: -9px;
    width: 18px;
    height: 18px;
    border: 1px solid var(--color-bg-cream);
    border-radius: 50%;
    pointer-events: none;
    z-index: 999;
    mix-blend-mode: difference;
    transition: width 0.25s ease, height 0.25s ease, margin 0.25s ease;
}
.custom-cursor.hover {
    width: 54px;
    height: 54px;
    margin: -18px 0 0 -18px;
}

/* ---------- Hero (scroll-world) ---------- */
/* 엔진 CSS는 @layer sw 안 — 여기(레이어 밖) 규칙이 항상 이긴다.
   변수는 #sw-world(엔진 컨테이너)에 직접 걸어야 엔진 기본값을 덮는다. */
.hero-sw,
#sw-world {
    --sw-bg: var(--color-bg-cream);
    --sw-ink: var(--color-text-main);
    --sw-ink-soft: rgba(27, 59, 54, 0.65);
    --sw-accent: var(--color-accent);
    --sw-font-display: 'Noto Serif KR', 'Playfair Display', serif;
    --sw-font-body: 'Inter', 'Pretendard', sans-serif;
    background: var(--color-bg-cream);
}
#sw-world .sw-btn--primary { color: #fff; background: var(--color-accent-deep); }
#sw-world .sw-btn--primary:hover { color: #fff; }
#sw-world .sw-btn--ghost { color: var(--color-text-main); }

/* 히어로 구간을 벗어나면 엔진의 fixed 레이어를 놓아준다 (initSwRelease가 .sw-done 토글) */
#sw-world .sw-copylayer,
#sw-world .sw-route,
#sw-world .sw-scrollbar,
#sw-world .sw-hint,
#sw-world .sw-stage,
#sw-world .sw-sky { transition: opacity 0.35s ease; }
#sw-world.sw-done .sw-copylayer,
#sw-world.sw-done .sw-route,
#sw-world.sw-done .sw-scrollbar,
#sw-world.sw-done .sw-hint,
#sw-world.sw-done .sw-stage,
#sw-world.sw-done .sw-sky {
    opacity: 0;
    pointer-events: none;
}

/* 장면 카피 타이포 — 엔진 기본(사스체 700 line-height 1.03)은 한글 세리프에 안 맞는다 */
#sw-world .sw-copy { width: min(44vw, 520px); }
#sw-world .sw-copy__num {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    color: rgba(27, 59, 54, 0.78);
}
/* 엔진 기본 UI가 13px 하한 미달 (경로 라벨 12.5 · 힌트 12.2), 힌트색 대비 4.0→4.6 */
#sw-world .sw-route__label { font-size: 0.82rem; }
#sw-world .sw-hint { font-size: 0.82rem; color: rgba(27, 59, 54, 0.78); }
#sw-world .sw-copy__eyebrow {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    color: var(--color-accent-deep);
    margin-top: 26px;
}
#sw-world .sw-copy__title {
    font-family: var(--font-kr);
    font-weight: 500;
    font-size: clamp(2rem, 3.9vw, 3.2rem);
    line-height: 1.28;
    letter-spacing: -0.02em;
    word-break: keep-all;
    text-wrap: balance;
    margin-top: 14px;
    text-shadow: none;
}
#sw-world .sw-copy__body {
    font-family: var(--font-kr);
    font-size: clamp(1rem, 1.2vw, 1.12rem);
    line-height: 1.7;
    color: rgba(27, 59, 54, 0.78);
    word-break: keep-all;
    max-width: 36ch;
    margin-top: 22px;
}
#sw-world .sw-copy__cta { margin-top: 34px; }
/* theme.css의 전역 리셋(*{padding:0}, 레이어 밖)이 엔진(@layer sw)의 패딩을 전부 이긴다 —
   엔진이 패딩을 주는 요소는 여기서 레이어 밖으로 복원해야 한다 (판단 14의 또 다른 얼굴) */
#sw-world .sw-btn {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    padding: 13px 26px;
}
#sw-world .sw-route { padding: 18px 10px; }
#sw-world .sw-route__label { padding: 5px 11px; }
@media (max-width: 860px) {
    /* 데스크톱 width 오버라이드가 엔진의 모바일 width:auto까지 이기므로 여기서 되돌린다 */
    #sw-world .sw-copy { width: auto; }
    #sw-world .sw-copy__title { font-size: clamp(1.7rem, 6.8vw, 2.4rem); }
    #sw-world .sw-copy__eyebrow { letter-spacing: 0.12em; }
    #sw-world .sw-copy__body { max-width: none; }
    #sw-world .sw-btn { padding: 15px 28px; }
    #sw-world .sw-route { padding: 14px 6px; }
}

/* ---------- Hero (typo fallback, 미사용 시 무해) ---------- */
.hero-section {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-xl) var(--padding-x) var(--space-xl);
    overflow: hidden;
    background: var(--color-bg-cream);
}
.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* scroll-world 엔진 마운트 지점 — 장면 컨셉 승인 후 삽입 */
}
.hero-top {
    position: absolute;
    top: calc(var(--space-lg) + var(--space-xs));
    left: var(--padding-x);
    right: var(--padding-x);
    display: flex;
    justify-content: space-between;
    opacity: 0.55;
    margin-bottom: 0;
    z-index: 2;
}
.hero-title-giant {
    position: relative;
    z-index: 1;
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 0.92;
    font-size: clamp(3.6rem, 10.8vw, 12rem);
    color: var(--color-text-main);
    letter-spacing: -0.03em;
    margin: 0;
}
.hero-row { overflow: hidden; display: block; }
.hero-row.left { text-align: left; }
.hero-row.center { text-align: center; }
.hero-row.right { text-align: right; }
.hero-word { display: inline-block; }
.hero-word-better em {
    color: var(--color-accent);
}
.hero-identity {
    position: relative;
    z-index: 2;
    margin-top: var(--space-md);
    max-width: 560px;
}
.hero-positioning {
    font-size: var(--font-size-md);
    line-height: 1.45;
    font-family: var(--font-kr);
}
.hero-rotator {
    display: inline-block;
    min-width: 5.5ch;
    color: var(--color-accent);
    font-weight: 600;
    text-align: left;
    border-bottom: 2px solid rgba(212, 93, 93, 0.35);
    padding-bottom: 2px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.hero-rotator.swap-out {
    opacity: 0;
    transform: translateY(-8px);
}
.hero-byline {
    margin-top: var(--space-xs);
    font-size: 0.95rem;
    opacity: 0.6;
}
.hero-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    flex-wrap: wrap;
}
.hero-cta {
    display: inline-block;
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    padding: 16px 30px;
    border-radius: 999px;
    transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease;
}
.hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(212, 93, 93, 0.35);
}
.hero-cta-secondary {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    border-bottom: 1px solid var(--color-text-main);
    padding-bottom: 2px;
    opacity: 0.8;
}
.hero-cta-secondary:hover { opacity: 1; color: var(--color-accent); border-color: var(--color-accent); }
.hero-footer {
    position: absolute;
    bottom: var(--space-sm);
    left: var(--padding-x);
    right: var(--padding-x);
    display: flex;
    justify-content: space-between;
    opacity: 0.55;
    margin-bottom: 0;
    z-index: 2;
}

/* ---------- Section scaffolding ---------- */
.section-head { padding-bottom: var(--space-md); }

/* ---------- Journey — 히어로의 빨간 점이 페이지 끝까지 이어진다 ---------- */
.journey { position: relative; }
/* 길은 세계의 길처럼 구불구불하다 (이림 — "공이 그 라인대로 굴러가야").
   곡선 SVG는 initJourney가 생성하고, 점·정거장의 x도 같은 사인 함수에서 계산 */
.journey-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2px;
    width: 56px;
    pointer-events: none;
    z-index: 40;
}
.journey-rail svg { position: absolute; inset: 0; display: block; overflow: visible; }
.journey-rail path {
    fill: none;
    stroke: rgba(212, 93, 93, 0.16); /* 아직 안 간 길 */
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.journey-rail .road-drawn {
    stroke: rgba(212, 93, 93, 0.55); /* 공이 지나온 길 — 공은 항상 이 선의 끝에 있다 */
    stroke-width: 2;
}
/* sticky 금지 — theme.css의 overflow-x:hidden(html·body)이 sticky를 죽인다. initJourney가 top·left를 계산 */
.journey-dot {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-accent);
    box-shadow: 0 0 0 5px rgba(212, 93, 93, 0.16);
}
/* <1200px: 곡선 대신 왼쪽 가장자리 직선 레일 — 점·정거장을 줄여 콘텐츠 여백(16px) 안에 수납 */
@media (max-width: 1199px) {
    .journey-rail { left: 0; }
    .journey-dot { width: 9px; height: 9px; }
    .journey-station { width: 9px; height: 9px; }
    .journey-terminus { width: 13px; height: 13px; }
}

/* 안착 — 히어로의 구슬이 줄어들며 레일로 날아가는 인계 점 (initJourney가 구동) */
.handoff-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 12px 32px rgba(212, 93, 93, 0.3);
    opacity: 0;
    pointer-events: none;
    z-index: 45;
    will-change: transform;
}

/* 정거장 — 점이 지나간 자리마다 채워지는 고리 */
.journey-station {
    position: absolute;
    left: 0;
    transform: translate(-50%, -50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1.5px solid var(--color-accent);
    background: var(--color-bg-cream);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
.journey-station.passed {
    background: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(212, 93, 93, 0.14);
    animation: station-pop 0.34s var(--ease-out-expo);
}
/* 구슬이 걸렸다 지나가는 순간의 반응 — 감속(JS stickY)과 짝이다 */
@keyframes station-pop {
    0% { transform: translate(-50%, -50%) scale(1); }
    38% { transform: translate(-50%, -50%) scale(1.5); }
    100% { transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .journey-station.passed { animation: none; }
}
.journey-terminus { width: 15px; height: 15px; }

/* 섹션 번호 라벨 — 여정의 정거장 표시 (빨간 점) */
.sec-num {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.sec-num::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    flex-shrink: 0;
}

/* ---------- Proof ---------- */
.proof-section {
    padding: var(--space-2xl) var(--padding-x);
    background: var(--color-bg-cream);
    border-top: 1px solid var(--color-line-dark);
}
.proof-recognition { margin-bottom: var(--space-xl); }
.recognition-card {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm);
    border: 1px solid var(--color-line-dark);
    border-radius: 14px;
    transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease;
    background: #fff;
}
.recognition-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(27, 59, 54, 0.1);
}
.recognition-card img { width: 104px; height: 104px; border-radius: 10px; flex-shrink: 0; }
.recognition-card .mono-label { margin-bottom: 6px; opacity: 0.55; }
.recognition-title {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    margin: 0 0 6px;
}
.recognition-desc { font-size: 0.92rem; opacity: 0.7; line-height: 1.55; margin: 0; }

.proof-press { margin-bottom: var(--space-xl); }
.proof-press-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}
.proof-press-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md);
    border: 1px solid var(--color-line-dark);
    border-radius: 14px;
    background: transparent;
    transition: background 0.35s ease, color 0.35s ease, transform 0.3s var(--ease-out-expo);
}
.proof-press-card:hover {
    background: var(--color-bg-forest);
    color: var(--color-text-light);
    transform: translateY(-3px);
}
.proof-press-meta { opacity: 0.55; margin-bottom: 0; }
.proof-press-title {
    font-family: var(--font-serif);
    font-size: var(--font-size-md);
    margin: 0;
}
.proof-press-quote {
    font-family: var(--font-kr);
    line-height: 1.65;
    opacity: 0.85;
    margin: 0;
}
.proof-press-cta { margin-bottom: 0; opacity: 0.6; }
.proof-press-card:hover .proof-press-cta { color: var(--color-accent-soft); opacity: 1; }

.proof-trusted .mono-label { display: block; }
.logo-marquee {
    overflow: hidden;
    padding: var(--space-md) 0 var(--space-xs);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-marquee-track {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    width: max-content;
    animation: logo-marquee 55s linear infinite;
}
.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
@keyframes logo-marquee {
    to { transform: translateX(-50%); }
}
.logo-item { flex-shrink: 0; }
.logo-img {
    height: 30px;
    width: auto;
    opacity: 0.55;
    filter: grayscale(1);
    transition: opacity 0.25s ease, filter 0.25s ease;
}
.logo-img.logo-md { height: 40px; }
.logo-img.logo-lg { height: 48px; }
.logo-link:hover .logo-img { opacity: 1; filter: grayscale(0); }

/* ---------- Method (Forest) ---------- */
.method-section {
    background: var(--color-bg-forest);
    color: var(--color-text-light);
    padding: var(--space-2xl) var(--padding-x);
}
.method-header { max-width: 900px; }
.method-headline {
    font-family: var(--font-kr);
    font-weight: 500;
    font-size: clamp(2.2rem, 5.4vw, 4.6rem);
    line-height: 1.22;
    margin: var(--space-xs) 0 var(--space-md);
}
.method-sub {
    font-family: var(--font-kr);
    max-width: 620px;
    line-height: 1.7;
    opacity: 0.75;
}
.method-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    margin: var(--space-xl) 0;
}
.method-card {
    border-top: 1px solid var(--color-line-light);
    padding-top: var(--space-sm);
}
.method-card-num { color: var(--color-accent-soft); opacity: 1; }
.method-card-title {
    font-family: var(--font-kr);
    font-weight: 600;
    font-size: var(--font-size-md);
    margin: 0 0 var(--space-xs);
}
.method-card-desc { line-height: 1.7; opacity: 0.75; font-size: 0.95rem; }

.method-services { margin-top: var(--space-lg); }
.service-rows { border-top: 1px solid var(--color-line-light); }
.service-row {
    display: grid;
    grid-template-columns: 60px 1.1fr 1.6fr 40px;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-xs);
    border-bottom: 1px solid var(--color-line-light);
    transition: background 0.3s ease, color 0.3s ease, padding 0.3s ease;
}
.service-row:hover {
    background: var(--color-accent);
    color: #fff;
    padding-left: var(--space-sm);
}
.service-num { margin-bottom: 0; opacity: 0.5; }
.service-name {
    font-family: var(--font-serif);
    font-size: var(--font-size-md);
}
.service-desc { opacity: 0.75; font-size: 0.95rem; }
.service-arrow { text-align: right; font-size: 1.2rem; opacity: 0.6; }
.service-row:hover .service-arrow { opacity: 1; }

/* ---------- Cases ---------- */
.cases-section {
    background: var(--color-bg-cream);
    padding-top: var(--space-2xl);
}
.cases-header {
    padding: 0 var(--padding-x) var(--space-xl);
}
.cases-headline {
    font-family: var(--font-kr);
    font-weight: 500;
    font-size: clamp(2.2rem, 5.4vw, 4.6rem);
    line-height: 1.22;
    margin: var(--space-xs) 0 0;
}

/* 아카이브 인덱스 8행 (구 스택 패널 대체 — 이림 결정 2026-08-15) */
.case-rows {
    background: var(--color-bg-cream);
    position: relative;
    z-index: 5;
    padding: 0 var(--padding-x);
    border-top: 1px solid var(--color-line-dark);
}
.case-row {
    position: relative;
    display: grid;
    grid-template-columns: 60px 1.1fr 1.7fr auto;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-xs);
    border-bottom: 1px solid var(--color-line-dark);
    transition: background 0.3s ease, color 0.3s ease, padding 0.3s ease;
}
.case-row:hover { z-index: 30; }

/* 호버 프리뷰 카드 — 종이공예 그림자, fine pointer 데스크톱에서만 */
.case-card {
    position: absolute;
    right: var(--space-md);
    top: 50%;
    transform: translateY(-50%) rotate(1.5deg) scale(0.97);
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    color: var(--color-text-main);
    border-radius: 14px;
    padding: var(--space-sm);
    box-shadow: 0 18px 44px rgba(27, 59, 54, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.3s var(--ease-out-expo);
    z-index: 20;
}
.case-row:hover .case-card { opacity: 1; transform: translateY(-50%) rotate(0deg) scale(1); }
.case-card-num { margin: 0; opacity: 0.75; }
.case-card-name { font-family: var(--font-serif); font-size: 1.3rem; }
.case-card-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.case-card-stats span {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    border: 1px solid var(--color-line-dark);
    border-radius: 999px;
    padding: 6px 12px;
}
.case-card-cta { margin: 0; color: var(--color-accent-deep); }
@media (max-width: 1099px), (hover: none) {
    .case-card { display: none; }
}
.case-row:hover {
    background: var(--color-bg-forest);
    color: var(--color-text-light);
    padding-left: var(--space-sm);
}
.case-row-num { margin-bottom: 0; opacity: 0.7; }
.case-row-name { font-family: var(--font-serif); font-size: var(--font-size-md); }
.case-row-desc { font-family: var(--font-kr); font-size: 0.95rem; opacity: 0.75; line-height: 1.6; }
.case-row-meta { margin-bottom: 0; opacity: 0.55; text-align: right; }

/* 프리뷰 카드가 꺼지는 폭(1099)부터 표를 스택으로 — 4열이 눌려 이름이 깨지는 구간 제거.
   "프리뷰 있으면 표 / 없으면 스택"으로 경계를 하나로 맞춘다. */
@media (max-width: 1099px) {
    .case-row { grid-template-columns: 40px 1fr; }
    .case-row-desc, .case-row-meta { grid-column: 2; text-align: left; }
}

.cases-footer {
    position: relative;
    z-index: 5;
    background: var(--color-bg-cream);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-lg);
    padding: var(--space-xl) var(--padding-x) var(--space-2xl);
    flex-wrap: wrap;
}
.cases-voice { max-width: 560px; }
.cases-voice-quote {
    font-family: var(--font-kr);
    font-size: var(--font-size-md);
    line-height: 1.5;
    margin: 0 0 var(--space-xs);
}
.cases-voice-cite { opacity: 0.55; font-size: 0.9rem; }
.cases-more {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    border-bottom: 1px solid var(--color-text-main);
    padding-bottom: 3px;
    transition: color 0.25s ease, border-color 0.25s ease;
}
.cases-more:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* ---------- Bio (Forest) ---------- */
.bio-section {
    background: var(--color-bg-forest);
    color: var(--color-text-light);
    padding: var(--space-2xl) var(--padding-x);
}
.bio-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-xl);
    align-items: start;
    max-width: 1200px;
}
.bio-portrait-frame {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
}
.bio-portrait-frame::after {
    content: '';
    position: absolute;
    top: var(--space-xs);
    right: var(--space-xs);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-accent);
}
.bio-portrait-meta { margin-top: var(--space-sm); }
.bio-name { font-family: var(--font-kr); font-weight: 600; font-size: 1.25rem; margin: 0 0 4px; }
.bio-role { opacity: 0.6; }
.bio-prev { font-size: 0.9rem; line-height: 1.7; opacity: 0.7; }
.bio-headline {
    font-family: var(--font-kr);
    font-weight: 500;
    font-size: clamp(2rem, 4.6vw, 3.8rem);
    line-height: 1.25;
    margin: var(--space-xs) 0 var(--space-md);
}
.bio-para {
    font-family: var(--font-kr);
    line-height: 1.8;
    opacity: 0.8;
    max-width: 620px;
    margin-bottom: var(--space-sm);
}
.bio-meta-row { display: flex; gap: var(--space-md); margin-top: var(--space-md); }
.bio-link {
    margin-bottom: 0;
    border-bottom: 1px solid var(--color-text-light);
    padding-bottom: 3px;
}
.bio-link:hover { color: var(--color-accent); border-color: var(--color-accent); }
.bio-link-secondary { opacity: 0.65; }

/* ---------- Contact (Dark stage) ---------- */
.cta-section {
    position: relative;
    background: var(--color-bg-dark);
    color: var(--color-text-light);
    padding: var(--space-2xl) var(--padding-x);
    overflow: hidden;
    min-height: 80vh;
}
.cta-circle {
    position: absolute;
    border: 1px solid var(--color-line-light);
    border-radius: 50%;
    pointer-events: none;
}
.cta-circle-a { width: 55vw; height: 55vw; top: -22vw; right: -18vw; }
.cta-circle-b { width: 38vw; height: 38vw; bottom: -16vw; left: -12vw; }
.cta-red-dot {
    position: absolute;
    top: 18%;
    right: 12%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-accent);
    pointer-events: none;
}
.cta-inner { position: relative; max-width: 860px; }
.cta-headline {
    font-family: var(--font-kr);
    font-weight: 500;
    font-size: clamp(2.4rem, 6vw, 5rem);
    line-height: 1.18;
    margin: var(--space-xs) 0 var(--space-sm);
}
.cta-sub {
    font-family: var(--font-kr);
    line-height: 1.7;
    opacity: 0.75;
    margin-bottom: var(--space-md);
}
/* STEP 1 — 유형 선택 카드 (구 탭 대체) */
.cta-step-head { margin-bottom: var(--space-md); }
.cta-step-label { display: block; margin-bottom: var(--space-xs); color: var(--color-accent-soft); opacity: 1; }
.cta-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}
.cta-choice-card {
    position: relative;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--space-sm) var(--space-md) var(--space-md) var(--space-sm);
    border: 1px solid var(--color-line-light);
    border-radius: 16px;
    color: var(--color-text-light);
    transition: border-color 0.25s ease, background 0.3s ease, color 0.3s ease, transform 0.25s var(--ease-out-expo);
}
.cta-choice-card:hover { border-color: rgba(243, 242, 237, 0.45); transform: translateY(-2px); }
.cta-choice-card.active {
    background: var(--color-bg-cream);
    color: var(--color-text-main);
    border-color: var(--color-bg-cream);
}
/* 선택 표시 = 배경 반전(밝기) + 빨간 점 (색 하나에만 기대지 않는다) */
.cta-choice-card.active::after {
    content: '';
    position: absolute;
    top: 16px;
    right: 16px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-accent);
}
.cta-choice-kicker { margin: 0; opacity: 0.75; }
.cta-choice-name { font-family: var(--font-kr); font-weight: 600; font-size: 1.15rem; }
.cta-choice-desc { font-family: var(--font-kr); font-size: 0.92rem; line-height: 1.6; opacity: 0.72; }

/* STEP 2·3 — 폼 안 단계 */
fieldset.cta-step { border: 0; padding: 0; margin: 0 0 var(--space-lg); min-width: 0; }
fieldset.cta-step:last-of-type { margin-bottom: 0; }
.cta-step-legend {
    display: block;
    padding: 0;
    margin-bottom: var(--space-sm);
    color: var(--color-accent-deep);
    opacity: 1;
}
.form-grid.form-grid-half { grid-template-columns: 1fr 1fr; }
.submit-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 8px;
    border-radius: 50%;
    background: #fff;
    vertical-align: 1px;
}
.cta-panel { display: none; }
.cta-panel.active { display: block; }
.cta-form-wrap {
    background: var(--color-bg-cream);
    color: var(--color-text-main);
    border-radius: 18px;
    padding: var(--space-md);
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
}
.form-grid-gap { margin-top: var(--space-sm); grid-template-columns: 1fr 1fr; }
.form-group-gap { margin-top: var(--space-sm); }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-label {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.8;
}
.form-label .required { color: var(--color-accent-deep); }
.form-section-sub { text-transform: none; opacity: 0.6; letter-spacing: 0; }
.form-input, .form-textarea {
    width: 100%;
    background: #fff;
    border: 1px solid var(--color-line-dark);
    border-radius: 10px;
    padding: 13px 14px;
    font-size: 0.95rem;
    color: var(--color-text-main);
    transition: border-color 0.2s ease;
}
.form-input:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}
.form-textarea { resize: vertical; }
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    cursor: pointer;
}
.checkbox-label input { accent-color: var(--color-accent); }
.form-submit { margin-top: var(--space-md); }
.submit-btn {
    background: var(--color-accent-deep);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    padding: 16px 40px;
    border-radius: 999px;
    transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease, opacity 0.2s;
}
.submit-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(212, 93, 93, 0.35); }
.submit-btn:disabled { opacity: 0.6; cursor: wait; }
.form-success { text-align: center; padding: var(--space-lg) 0; }
.success-title {
    font-family: var(--font-kr);
    font-weight: 600;
    font-size: var(--font-size-md);
    margin-bottom: var(--space-xs);
}
.success-message { opacity: 0.7; }
.cta-quick-mail {
    margin-top: var(--space-md);
    font-family: var(--font-kr);
    opacity: 0.75;
}
.cta-quick-mail a {
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}
.cta-quick-mail a:hover { color: var(--color-accent); }
.cta-proof { display: block; margin-top: var(--space-sm); opacity: 0.4; }

/* ---------- Brand marquee ---------- */
/* Contact(다크) → 마르퀴 → 법적 푸터(다크)를 한 덩어리 다크 마감으로.
   DO·THINGS는 크림 아웃라인, BETTER만 채운 레드 이탤릭 — 움직여도 소란하지 않게. */
.brand-marquee {
    background: var(--color-bg-dark);
    overflow: hidden;
    padding: var(--space-md) 0 var(--space-lg);
    border-top: 1px solid var(--color-line-light);
}
.brand-marquee-track {
    display: flex;
    gap: var(--space-xl);
    width: max-content;
    animation: brand-marquee 60s linear infinite;
}
@keyframes brand-marquee {
    to { transform: translateX(-50%); }
}
.brand-marquee-item {
    font-family: var(--font-serif);
    font-size: clamp(3.2rem, 7vw, 7.2rem);
    line-height: 1.15;
    white-space: nowrap;
    letter-spacing: 0.01em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(243, 242, 237, 0.65);
}
@supports not (-webkit-text-stroke: 1px #fff) {
    .brand-marquee-item { color: rgba(243, 242, 237, 0.75); }
}
.brand-marquee-item em {
    color: var(--color-accent);
    -webkit-text-stroke: 0;
}
.brand-marquee-item .bm-dot {
    color: var(--color-accent);
    -webkit-text-stroke: 0;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .logo-marquee-track, .brand-marquee-track { animation: none; }
    .loader-text { transform: none; opacity: 1; }
    .loader-divider { transform: none; }
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
    }
}

/* ---------- Responsive (≤760px) ---------- */
@media (max-width: 760px) {
    .hero-title-giant { font-size: clamp(3.2rem, 17vw, 5.5rem); }
    .hero-top { display: none; }
    .hero-identity { margin-top: var(--space-md); }
    .hero-footer { position: static; margin-top: var(--space-lg); flex-direction: column; gap: 6px; }

    .proof-press-cards { grid-template-columns: 1fr; }
    .recognition-card { flex-direction: column; align-items: flex-start; }

    .method-grid { grid-template-columns: 1fr; gap: var(--space-md); }
    .service-row { grid-template-columns: 40px 1fr 32px; }
    .service-desc { display: none; }

    .bio-grid { grid-template-columns: 1fr; gap: var(--space-lg); }

    .cta-section { padding: var(--space-xl) var(--padding-x); }
    .form-grid, .form-grid-gap, .form-grid.form-grid-half { grid-template-columns: 1fr; }
    .checkbox-grid { grid-template-columns: 1fr; }
    .cta-choice { grid-template-columns: 1fr; }

    .cases-footer { flex-direction: column; align-items: flex-start; }
    .brand-marquee-item { font-size: clamp(2.4rem, 11vw, 4rem); -webkit-text-stroke-width: 1px; }
}