/* ================================================================
   BIZPAGE — Refined Black & Red  v2
   방향 1 에디토리얼 타이포 / 방향 2 여백 / 방향 3 모션 / 방향 4 레드 절제
   ================================================================ */

/* ── 1. Tokens ─────────────────────────────────────────────────── */
:root {
  /* ─ Ink (dark palette) */
  --ink:    #0D0D0D;
  --ink2:   #1A1A1A;
  --ink3:   #2C2C2C;

  /* ─ Surface */
  --bg:     #FFFFFF;
  --bg-off: #F7F7F5;   /* warm off-white — section alt */
  --bg-dk:  #0D0D0D;   /* dark section */
  --bg-dk2: #161616;   /* dark card */

  /* ─ Text */
  --t-head: #0D0D0D;   /* headings */
  --t-body: #222222;   /* body paragraphs */
  --t-mute: #505050;   /* secondary */
  --t-sub:  #787878;   /* labels, hints */

  /* ═══ 브랜드 색 — BI 가이드(PAGE ONE / BIZ PAGE) ═══════════════════════════
     2026-09-17 대표 지시로 **BI 가이드의 색으로 바꿨다.** 그 전까지 쓰던 레드(#C8102E)는
     이 브랜드의 색이 아니었다 — 가이드의 비즈페이지 색은 **보라 + 민트 + 먹색**이다.
       #514dc2 보라 · #63d6d4 민트 · #333132 먹색
     ⚠ 토큰 이름이 예전엔 `--red`였다. 이름이 색을 말하면 색을 바꿀 때마다 거짓이 된다 —
       역할로 바꿨다(`--brand` / `--brand-dk` / `--brand-on-dk`).

     🔴 **면에 따라 쓰는 색이 다르다. 섞으면 안 읽힌다.**
       · 흰 바탕  → **보라** (#514dc2, 대비 6.4:1 ✓). 민트는 흰 바탕에서 1.8:1로 못 쓴다.
       · 어두운 면 → **민트** (#63d6d4, `#0D0D0D` 위 10.8:1 ✓).
         보라를 어두운 면에 올리면 **2.9:1**로 큰 글자 기준(3:1)도 못 넘긴다.
       이 가름이 무너지면 `check_contrast.py`가 잡는다(예전 레드도 같은 이유로
       오류 55건 중 47건이 한 원인이었다 — 값을 그 자리에 적으면 다시 흩어진다). */
  --brand:    #514dc2;   /* 밝은 면의 주색 — CTA 버튼 · 아이브로우 · 핵심 수치 */
  --brand-dk: #3E3AA6;   /* 그 위의 눌린 상태(hover/active) */
  --brand-on-dk: #63d6d4;  /* 🔴 어두운 면 위 글자·강조 — 여기에 보라를 쓰지 말 것 */

  /* ─ Rule (hairline) */
  --rule:      rgba(0,0,0,.08);
  --rule-inv:  rgba(255,255,255,.08);
  --rule-md:   rgba(0,0,0,.14);

  /* ─ White */
  --white: #FFFFFF;

  /* ─ Legacy compat (기존 JS 참조용) */
  --black:  #0D0D0D;
  --black2: #1A1A1A;
  --black3: #2C2C2C;
  --off:    #F7F7F5;
  --gray1:  #E2E2E2;
  --gray2:  #AAAAAA;
  --gray3:  #606060;
  --text:   #0D0D0D;
  --border: rgba(0,0,0,.1);
  --border-dark: rgba(255,255,255,.08);
  --text-muted: #7A7A7A;

  /* ─ Font */
  --font: 'Pretendard','Apple SD Gothic Neo','Malgun Gothic',Arial,sans-serif;

  /* ─ Radius */
  --r: 0px;

  /* ─ Shadow (refined) */
  --sh-sm: 0 1px 3px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04);
  --sh-md: 0 4px 16px rgba(0,0,0,.07), 0 8px 28px rgba(0,0,0,.05);
  --sh-lg: 0 8px 32px rgba(0,0,0,.09), 0 24px 56px rgba(0,0,0,.07);

  /* ─ Motion */
  --ease:    cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.4,0,.2,1);
  --dur:     220ms;
  --dur-md:  380ms;
  --dur-lg:  560ms;

  /* ─ Spacing */
  --pad-x: 24px;
  --sec-y: 140px;   /* 방향 2: 96→140 여백 확장 */
}

/* ── 2. Reset ───────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
/* 모바일 우측 스와이프 시 브라우저 뒤로가기/고무줄 스크롤 제스처가 페이지 전체를
   밀어버려 화면이 어긋나고 되돌아오지 않던 문제 방지 (html에도 body와 동일하게 적용) */
html { scroll-behavior:smooth; font-size:16px; overflow-x:hidden; overscroll-behavior-x:none; }
/* 고정 헤더(64px)에 앵커 이동 시 섹션 상단이 가려지는 문제 보정 */
#home, #destinations, #estimate, #portfolio, #testimonials, #faq, #about, #contact {
  scroll-margin-top: 84px;
}
body {
  font-family: var(--font);
  font-size: 15px;
  color: var(--t-body);
  background: var(--bg);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
img  { display:block; max-width:100%; height:auto; }
a    { color:inherit; text-decoration:none; }
ul,ol { list-style:none; }
button,input,select,textarea { font:inherit; }
h1,h2,h3,h4,h5,h6 { font-weight:800; line-height:1.18; color:var(--t-head); }
p { line-height:1.8; }

/* ── 3. 방향 3 — Scroll Reveal 유틸리티 ───────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-lg) var(--ease),
              transform var(--dur-lg) var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
/* 지연 단계 */
.reveal[data-delay="1"] { transition-delay: 80ms;  }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }
.reveal[data-delay="5"] { transition-delay: 400ms; }
.reveal[data-delay="6"] { transition-delay: 480ms; }

/* ── 4. Icons ───────────────────────────────────────────────────── */
[data-lucide] {
  display:inline-block; vertical-align:middle;
  stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
  fill:none; flex-shrink:0;
}
.ic-sm { width:15px; height:15px; }

/* ── 5. Layout ──────────────────────────────────────────────────── */
.container {
  width:100%; max-width:1180px;
  margin:0 auto; padding:0 var(--pad-x);
}
.section { padding:var(--sec-y) 0; }
.hidden  { display:none !important; }

/* 방향 1 — 섹션 아이브로우 (레드 최소화) */
.eyebrow {
  display:block;
/* ⚠ 10.5px였다 — 이 저장소 규칙「글자는 11px 이상」을 어기고 있었다.
   FAQ 라벨을 고치다 발견했고, 따로 `.section-faq .eyebrow`로 빼면 **같은 규칙이
   두 벌**이 된다(결함 생성기 ①). 한 곳에서 11.5px로 올렸다 — 이 클래스를 쓰는
   다섯 자리(FAQ·회사소개·문의·404·매뉴얼)가 같이 올라간다 — 원래 한 식구다.
   이 저장소엔 10.5px가 아직 **19곳** 남아 있다 — 이번 지시 밖이라 안 건드렸다. */
  font-size:12px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--brand);
  margin-bottom:14px;
}
/* 방향 1 — 에디토리얼 섹션 제목 (크기 대폭 확대) */
.section-title-center {
  font-size: clamp(28px,4.5vw,52px);
  font-weight:900; text-align:center;
  letter-spacing:-.04em; margin-bottom:14px;
  color:var(--t-head);
}
.section-sub-center {
  font-size:15px; color:var(--t-mute);
  text-align:center; max-width:480px;
  margin:0 auto 64px; line-height:1.85;
}

/* ── 6. Buttons (방향 4 — Red: primary CTA만) ──────────────────── */
.button {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:13px 30px;
  font-size:13px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
  border:1.5px solid transparent; border-radius:var(--r);
  cursor:pointer; white-space:nowrap; outline:none;
  transition: background var(--dur) var(--ease-io),
              color var(--dur) var(--ease-io),
              border-color var(--dur) var(--ease-io),
              transform var(--dur) var(--ease);
}
.button:hover { transform:translateY(-1px); }
.button:active { transform:translateY(0) scale(.985); }

/* Primary — Red CTA */
.button-primary { background:var(--brand); color:var(--white); border-color:var(--brand); }
.button-primary:hover { background:var(--brand-dk); border-color:var(--brand-dk); }

/* Outline — Dark (Red 절제: outline은 검은색) */
.button-outline { background:transparent; color:var(--white); border-color:rgba(255,255,255,.45); }
.button-outline:hover { background:var(--white); color:var(--ink); border-color:var(--white); }

/* Secondary */
.button-secondary { background:var(--ink2); color:var(--white); border-color:var(--ink2); }
.button-secondary:hover { background:var(--ink3); border-color:var(--ink3); }

/* ── 7. Header ──────────────────────────────────────────────────── */
.site-header {
  position:fixed; top:0; left:0; right:0;
  z-index:1000; height:64px;
  background:rgba(13,13,13,.96);
  border-bottom:1px solid var(--rule-inv);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:64px; gap:16px;
}
.brand {
  font-size:16px; font-weight:900; color:var(--white);
  letter-spacing:.06em; text-transform:uppercase; flex-shrink:0;
  display:flex; align-items:center; min-height:44px;  /* 34px였다 */
}
/* BI 로고 — 높이로만 크기를 정한다(가로는 비율이 정한다).
   🔴 2026-09-17 「좀더 크게」는 이 값만 올려서는 안 됐다 — **로고 파일 자체가 여백 33%**였다
   (그림이 세로 67%만 차지). 보기 영역(viewBox)을 그림에 맞춘 뒤에 높이를 올렸다.
   ⚠ 머리줄은 64px(폰 56px)다 — 더 키우면 줄이 부풀거나 메뉴와 붙는다. */
.brand-logo { display:block; height:34px; width:auto; }
.nav-links { display:flex; align-items:center; gap:2px; flex-wrap:nowrap; }
.nav-links a {
  font-size:12.5px; font-weight:600; color:rgba(255,255,255,.78);
  text-transform:uppercase;
  /* ⚠ 누를 높이 34px였다 — 밑줄이 border-bottom이라 padding을 늘리면 밑줄이 글자에서 멀어졌다.
     밑줄을 글자 장식으로 옮기고 위아래만 넓혔다(CLAUDE.md YA에 적힌 방법, 2026-09-29) */
  padding:13px 11px;
  text-decoration:underline 1.5px transparent; text-underline-offset:7px;
  transition:color var(--dur), text-decoration-color var(--dur);
  white-space:nowrap;
}
.nav-links a:hover { color:var(--white); text-decoration-color:var(--brand); }

/* 패키지 여행 (VP) — **다른 화면으로 나가는 링크**라 나머지 앵커와 구분한다.
   나머지는 이 페이지 안을 이동하는데 이것만 페이지를 떠난다. 같은 모양이면
   눌러 보고 나서야 알게 되고, 돌아올 생각을 못 한다. */
.nav-links a.nav-pkg {
  color:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.22); border-radius:999px;
  padding:5px 12px; margin-left:4px;
}
.nav-links a.nav-pkg:hover { border-color:var(--brand); color:var(--white); }

/* ── 두 번째 갈래 (VT) ──────────────────────────────────────────────
   히어로 바로 다음. 견적 계산기 **앞**에 두는 이유: 계산기를 먼저 만나면
   연수용 폼을 보고 「내 것이 아니다」로 읽고 나간다. 갈림길이 폼보다 먼저다.
   ⚠ 레드는 CTA·아이브로우·핵심 수치 3곳만이라는 원칙(방향 4)을 지킨다 —
     여기서는 아이브로우와 화살표에만 쓴다. 카드 두 장을 색으로 겨루게 하지 않는다. */
/* ⚠ 바탕을 **흰색**으로 둔다. 바로 다음 견적 섹션이 `--bg-off`라, 여기도 off-white로
   두면 두 섹션이 한 덩어리로 보이고 갈림길이 별개 단계로 안 읽힌다.
   어두운 히어로 → 흰 갈림길 → off-white 계산기 순으로 층이 갈린다. */
.section-tracks {
  padding:calc(var(--sec-y) * .62) 0;
  background:var(--bg); border-bottom:1px solid var(--rule);
}
.tracks-hd { text-align:center; margin-bottom:38px; }
.tracks-title {
  font-size:clamp(24px,3.4vw,38px); font-weight:900;
  letter-spacing:-.035em; color:var(--t-head); margin:6px 0 12px;
}
.tracks-sub { font-size:14.5px; line-height:1.9; color:var(--t-mute); margin:0; }

.tracks-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.track-card {
  display:flex; flex-direction:column; gap:9px;
  padding:28px 26px 24px;
  /* 흰 바탕 위의 흰 카드는 테두리가 유일한 경계다 — 옅게 두면 카드로 안 보인다 */
  background:var(--white); border:1px solid var(--rule-md);
  text-decoration:none; color:inherit;
  transition:border-color var(--dur), transform var(--dur), box-shadow var(--dur);
}
.track-card:hover {
  border-color:var(--rule-md); transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.track-tag {
  font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--t-sub);
}
.track-h { font-size:19px; font-weight:800; letter-spacing:-.02em; color:var(--t-head); line-height:1.5; }
.track-h em { font-style:normal; border-bottom:2px solid var(--brand); padding-bottom:1px; }
.track-d { font-size:13.5px; line-height:1.85; color:var(--t-mute); }
.track-d b { color:var(--t-body); font-weight:700; }
.track-go {
  margin-top:6px; font-size:13px; font-weight:700; color:var(--brand);
  transition:letter-spacing var(--dur);
}
.track-card:hover .track-go { letter-spacing:.02em; }

@media (max-width:720px) {
  .tracks-grid { grid-template-columns:1fr; gap:12px; }
  .track-card { padding:22px 20px 20px; }
}

.nav-toggle {
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; min-width:44px; min-height:44px;
  background:none; border:none; cursor:pointer; padding:4px;
}
.nav-toggle span {
  display:block; width:24px; height:1.5px; background:var(--white);
  transition:transform var(--dur), opacity var(--dur);
}
.nav-mobile-open .nav-toggle span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-mobile-open .nav-toggle span:nth-child(2) { opacity:0; }
.nav-mobile-open .nav-toggle span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* ── 8. Hero ────────────────────────────────────────────────────── */
.hero {
  position:relative; min-height:100vh;
  background:var(--bg-dk) linear-gradient(180deg, #0B0B16 0%, #0D0D0D 78%);
  display:flex; flex-direction:column;
  overflow:hidden; padding-top:64px;
}
.hero-canvas {
  position:absolute; inset:0;
  width:100%; height:100%; opacity:.55; z-index:0;  /* .18이라 노선도가 거의 안 보였다(2026-10-01) — 선 자체를 옅게 그리고 여기를 올렸다 */
}
.hero-gradient {
  position:absolute; inset:0; z-index:1;
  /* 2026-10-01 「어두운 배경을 예쁘게」 — 단색 먹색 위에 보라 얼룩 둘이던 것을 **밤하늘의 깊이**로.
     위는 깊은 남색, 아래로 갈수록 먹색 · 바닥(티커 줄)에는 지평선처럼 아주 옅은 민트 빛 ·
     사진 쪽(오른쪽 위)이 조금 더 깊다. 형광 보라 번짐은 쓰지 않는다. */
  background:
    radial-gradient(ellipse 55% 60% at 80% 28%, rgba(46,44,120,.38) 0%, transparent 70%),
    radial-gradient(ellipse 70% 38% at 50% 104%, rgba(99,214,212,.10) 0%, transparent 72%),
    radial-gradient(ellipse 45% 55% at 0% 45%, rgba(81,77,194,.10) 0%, transparent 70%);
  /* ⚠ 불투명한 바탕(위→아래 남색→먹색)은 여기 두지 않는다 — 이 층(z 1)이 노선도 캔버스(z 0)를
       **통째로 덮었다**(처음 그렇게 해서 노선도가 사라졌다). 바탕은 `.hero`에 있다. */
}
/* 필름 질감 — 아주 옅은 입자(4%)가 「매끈한 디지털 단색」 느낌을 걷는다. 그림 파일 없이 SVG 잡음으로. */
.hero::after {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 방향 1 — 대형 배경 텍스트 (에디토리얼) */
.hero-bg-text {
  position:absolute; bottom:-0.1em; left:-.02em;
  font-size:clamp(120px,20vw,260px); font-weight:900;
  color:rgba(255,255,255,.025); line-height:1;
  letter-spacing:-.06em; z-index:1; pointer-events:none;
  white-space:nowrap; text-transform:uppercase;
  user-select:none;
}
.hero-center {
  position:relative; z-index:2; flex:1;
  display:flex; flex-direction:column; justify-content:center;
  padding:80px var(--pad-x) 56px;
  max-width:1180px; width:100%; margin:0 auto; gap:28px;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 14px;
  /* 어두운 히어로 위 배지 — 측정 2.79:1이었다. 글자·테두리를 민트로 돌린다 */
  background:rgba(99,214,212,.08); border:1px solid rgba(99,214,212,.38);
  color:var(--brand-on-dk); font-size:12px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  border-radius:var(--r); align-self:flex-start;
}
.hero-center h1 {
  font-size:clamp(32px,6vw,72px); font-weight:900;
  color:var(--white); line-height:1.05;
  letter-spacing:-.045em; max-width:860px;
}
/* 🔴 어두운 히어로 위다 — 보라는 2.9:1로 큰 글자 기준(3:1)도 못 넘긴다 */
.hero-center h1 em { color:var(--brand-on-dk); font-style:normal; }
.hero-sub {
  font-size:clamp(14px,1.6vw,17px); color:rgba(255,255,255,.75);
  line-height:1.85; max-width:480px; font-weight:400;
}
.hero-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* 방향 3 — 티커 */
.dest-ticker-wrap {
  position:relative; z-index:2;
  background:var(--bg-dk2);
  border-top:1px solid var(--rule-inv);
  padding:14px 0; overflow:hidden;
}
.dest-ticker {
  display:inline-flex; align-items:center;
  white-space:nowrap; will-change:transform;
  animation:ticker 42s linear infinite;
}
.dest-ticker-wrap:hover .dest-ticker { animation-play-state:paused; }
.dest-ticker span:not(.t-sep) {
  font-size:11px; font-weight:600; color:rgba(255,255,255,.58);
  letter-spacing:.14em; text-transform:uppercase;
  padding:0 14px; flex-shrink:0;
}
.t-sep {
  display:inline-block; width:1px; height:10px;
  background:rgba(81,77,194,.5);
  padding:0; margin:0 2px;
  font-size:0; overflow:hidden; line-height:0;
  vertical-align:middle; flex-shrink:0;
}
@keyframes ticker {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

/* Hero Stats */
.hero-stats {
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule-inv);
}
.stat-item {
  padding:32px 28px; text-align:center;
  border-right:1px solid var(--rule-inv);
  transition:background var(--dur);
}
.stat-item:last-child { border-right:none; }
.stat-item:hover { background:rgba(255,255,255,.025); }
/* 방향 3 — 카운터 애니메이션 대상 */
.stat-num-hero {
  font-size:clamp(24px,3.2vw,42px); font-weight:900;
  color:var(--white); line-height:1;
  letter-spacing:-.04em; display:block;
}
.stat-unit { color:var(--brand); font-size:.58em; font-weight:700; }
/* 🔴 히어로 숫자 단위(YRS·+·%)는 **어두운 면** 위다 — 보라는 먹색 위 2.9:1로 큰 글자 기준도 못 넘긴다(2026-10-01 발견) */
.hero-stats .stat-unit { color:var(--brand-on-dk); }
.stat-lbl-hero {
  margin-top:8px; font-size:12px; color:rgba(255,255,255,.62);
  display:block;
}

/* ── 9. Estimate ────────────────────────────────────────────────── */
.section-estimate { padding:var(--sec-y) 0; background:var(--bg-off); }
.estimate-section-hd { text-align:center; margin-bottom:56px; }
.est-hd-badge {
  display:inline-block; font-size:12px; font-weight:700;
  letter-spacing:.2em; color:var(--brand);
  text-transform:uppercase; margin-bottom:14px;
}
.est-hd-title {
  font-size:clamp(26px,4vw,48px); font-weight:900;
  color:var(--t-head); letter-spacing:-.04em; line-height:1.18;
}
.est-hd-title em { color:var(--brand); font-style:normal; }

.estimate-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:40px; align-items:start;
}

/* 폼 */
.estimate-form {
  background:var(--bg);
  border:1px solid var(--rule-md);
  border-radius:var(--r); padding:40px;
  box-shadow:var(--sh-sm);
}
.estimate-step { display:none; }
.estimate-step.step-active { display:block; }

/* 스텝 트래커 */
.step-tracker {
  display:flex; align-items:center; gap:10px;
  margin-bottom:24px; font-size:12px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
}
.step-tracker-item { color:var(--t-sub); transition:color var(--dur); }
.step-tracker-item.active { color:var(--brand); }
.step-tracker-sep { flex:1; height:1px; background:rgba(0,0,0,.1); }

.fld { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.fld-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.fld-row > .fld { margin-bottom:0; }
.fld-lbl {
  font-size:12.5px; font-weight:700; color:var(--t-head);
  display:flex; align-items:center; gap:6px;
}
.fld-hint { font-size:11px; font-weight:400; color:var(--t-sub); text-transform:none; letter-spacing:0; }
.fld select,
.fld input[type="number"],
.fld textarea,
.estimate-step > label > input,
.estimate-step > label > textarea,
.estimate-step > label > select {
  width:100%; padding:11px 14px;
  border:1.5px solid rgba(0,0,0,.12);
  border-radius:var(--r); font-size:14px;
  color:var(--t-head); background:var(--bg);
  transition:border-color var(--dur), box-shadow var(--dur);
  appearance:none; -webkit-appearance:none;
}
.fld select:focus,
.fld input:focus,
.fld textarea:focus,
.estimate-step > label > input:focus,
.estimate-step > label > textarea:focus,
.estimate-step > label > select:focus {
  border-color:var(--brand); outline:none;
  box-shadow:0 0 0 3px rgba(81,77,194,.12);
}
.fld input[readonly] {
  background:var(--bg-off); color:var(--t-mute); cursor:not-allowed;
}
.fld input[readonly]:focus {
  border-color:rgba(0,0,0,.12); box-shadow:none;
}
.estimate-step > label {
  display:flex; flex-direction:column; gap:7px;
  margin-bottom:16px; font-size:11px; font-weight:700;
  color:var(--t-head); text-transform:uppercase; letter-spacing:.06em;
}

/* 날짜 블록 */
.date-block {
  background:var(--bg-off); border:1.5px solid rgba(0,0,0,.1);
  border-radius:var(--r); padding:20px; margin-bottom:16px;
}
.date-block-header {
  display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;
}
.date-block-title { font-size:12.5px; font-weight:700; color:var(--t-head); }
.date-block-hint  { font-size:11px; color:var(--t-sub); }
.date-inputs-row  { display:flex; align-items:flex-end; gap:10px; }
.date-input-wrap  { flex:1; display:flex; flex-direction:column; gap:5px; }
.date-inp-label   { font-size:12px; font-weight:600; color:var(--t-mute); }
.date-inp {
  width:100%; padding:10px 13px;
  border:1.5px solid rgba(0,0,0,.12);
  border-radius:var(--r); font-size:13px;
  color:var(--t-head); background:var(--bg);
  transition:border-color var(--dur);
}
.date-inp:focus { border-color:var(--brand); outline:none; box-shadow:0 0 0 3px rgba(81,77,194,.12); }
.date-arrow-icon { color:var(--t-sub); font-size:18px; padding-bottom:10px; flex-shrink:0; }
.date-result-bar {
  margin-top:10px; padding:8px 13px;
  background:var(--bg); border:1px solid rgba(0,0,0,.1);
  border-radius:var(--r); font-size:12px; color:var(--t-mute);
}
.season-badge {
  display:inline-block; margin-top:7px; padding:3px 11px;
  background:rgba(81,77,194,.07); border:1px solid rgba(81,77,194,.18);
  color:var(--brand); font-size:12px; font-weight:700;
  border-radius:var(--r); letter-spacing:.04em;
}

/* 포함 항목 */
.item-selector {
  background:var(--bg-off); border:1.5px solid rgba(0,0,0,.1);
  border-radius:var(--r); padding:16px 18px; margin-bottom:16px;
}
/* 🔴 **9px였다** (YA). 브라우저로 재 보니 고객 화면에서 가장 작은 글자였고,
   폭 네 가지 **전부**에서 9px이었다(폰에서만 작아지는 게 아니다).
   ⚠ `text-transform:uppercase`와 `.13em` 자간은 **영문 라벨을 위한 것**인데
     실제 내용은 전부 한글이다(「항공」·「숙박」·「추가 선택」·「현지에서 드는 그 밖의
     비용」). 한글은 자간을 벌리면 오히려 덩어리가 흩어져 더 안 읽힌다.
   → 11px · 자간 .06em. 대문자 변환은 남긴다(한글에는 아무 일도 안 하고,
     영문 라벨이 생기면 그때 다시 필요하다). */
.inc-sec-lbl {
  font-size:11px; font-weight:700; color:var(--t-sub);
  letter-spacing:.06em; text-transform:uppercase;
  display:block; padding:10px 0 6px;
  border-top:1.5px solid rgba(0,0,0,.07);
  margin-top:2px;
}
.inc-sec-lbl:first-child { padding-top:0; border-top:none; margin-top:0; }

/* 휴양 선택 시 「차량·가이드를 왜 뺐는지」 (VV). 경고가 아니라 설명이라 레드를 쓰지 않는다 —
   고객이 잘못한 것이 없고, 우리가 계산 기준을 밝히는 자리다. */
.inc-leisure-note {
  margin:0 0 8px; padding:9px 11px;
  background:var(--bg-off); border-left:2px solid var(--rule-md);
  font-size:11.5px; line-height:1.75; color:var(--t-mute);
}
.inc-leisure-note b { color:var(--t-body); font-weight:700; }
.inc-sec-lbl + .inc-fixed-row { margin-top:4px; }
.inc-sec-lbl + .inc-grade-row { border-top:none; padding-top:4px; }
.inc-sec-lbl + .inc-chips { margin-top:2px; }
.inc-fixed-row {
  display:flex; align-items:center; gap:10px;
  margin-bottom:0; padding-bottom:8px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.inc-lock { color:var(--t-mute); }
.inc-fixed-text { font-size:13px; font-weight:600; flex:1; color:var(--t-head); }
.inc-fixed-badge {
  font-size:12px; font-weight:700; padding:2px 9px;
  background:var(--ink); color:var(--white);
  border-radius:var(--r);
}
.inc-chips { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:8px; }
.inc-chip {
  display:flex; align-items:center; gap:5px;
  padding:5px 13px; border:1.5px solid rgba(0,0,0,.12);
  border-radius:var(--r); font-size:12px; font-weight:600;
  color:var(--t-mute); cursor:pointer; background:var(--bg);
  transition:all var(--dur); user-select:none;
}
.inc-chip input { display:none; }
.inc-chip:has(input:checked) { border-color:var(--ink); background:var(--ink); color:var(--white); }
.inc-chip:hover { border-color:var(--ink); }

.inc-grade-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 0 2px; border-top:1px solid rgba(0,0,0,.06); }
.inc-fixed-row + .inc-grade-row { border-top:none; padding-top:6px; }
.grade-label { font-size:12px; font-weight:600; color:var(--t-mute); flex-shrink:0; min-width:58px; }

/* VIP 인원 수 입력 (혼합 객실 선택 시) */
.inc-vip-row {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 14px; margin-top:8px;
  background:rgba(81,77,194,.04); border:1px solid rgba(81,77,194,.14);
  border-radius:var(--r);
}
.vip-count-inp {
  width:72px; padding:6px 10px; min-height:44px; box-sizing:border-box;  /* 37px였다 — 폰에서 누르는 칸 */
  border:1.5px solid rgba(0,0,0,.15); border-radius:var(--r);
  font-size:13px; font-weight:600; color:var(--t-head);
  background:var(--bg); transition:border-color var(--dur);
}
.vip-count-inp:focus { border-color:var(--brand); outline:none; box-shadow:0 0 0 3px rgba(81,77,194,.12); }
.vip-count-unit { font-size:12.5px; color:var(--t-mute); }
/* 단위 뒤 괄호 설명은 **따로 선 조각** (2026-10-20) — 「회 (섭외비+통역비)」를 한 조각으로 두니 폰에서 통째로
   다음 줄로 떨어져 「회」가 숫자 칸과 갈렸다. 단위는 칸 옆에 남고, 자리가 모자라면 설명만 넘어간다.
   ⚠ 단위에 flex-grow를 주는 길은 안 썼다 — 「명 × [칸] 회 라운딩」 줄에서 「명 ×」가 늘어나 두 칸 사이가 벌어진다.
   앞 간격(10px)을 조금 당겨 단위와 한 말로 읽히게 한다. */
.vip-count-note { font-size:12.5px; color:var(--t-mute); margin-left:-4px; }
/* 칸 + 단위 한 묶음 — 줄을 넘길 때 묶음째(골프 「[1] 회 라운딩」) */
.vip-pair { display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
/* TJ: 옵션을 왜 못 쓰는지 그 자리에서 말하는 줄(골프 요금이 없는 목적지).
   ⚠ 색은 --t-sub까지만 쓴다. --t-mute는 이 배경(--bg-off)에서 대비가 모자란다 —
     check_contrast.py가 잡는 자리다(「보이는데 안 읽히는 글자」). */
.inc-note {
  font-size:11.5px; color:var(--t-sub); line-height:1.5;
  padding:6px 0 2px;
}
.grade-pills { display:flex; gap:7px; flex-wrap:wrap; }
.grade-pill {
  display:flex; align-items:center; gap:5px;
  padding:5px 13px; border:1.5px solid rgba(0,0,0,.12);
  border-radius:var(--r); font-size:12px; font-weight:600;
  color:var(--t-mute); cursor:pointer; background:var(--bg);
  transition:all var(--dur);
}
.grade-pill input { display:none; }
.grade-pill:has(input:checked) { border-color:var(--ink); background:var(--ink); color:var(--white); }

.step-actions { display:flex; gap:10px; margin-top:8px; }
.step-actions .button { flex:1; }

/* 무엇이 비었는지 말해 주는 자리 (XK) — 예전엔 버튼을 눌러도 커서만 옮겨 갔다.
   ⚠ 비어 있을 때만 보인다: `:empty`면 자리를 아예 안 차지한다(늘 떠 있으면 아무도 안 본다). */
.step-missing {
  margin: 10px 0 0; padding: 10px 14px;
  background: #FEF0F2; border-left: 3px solid #CC001A;
  color: #8F0B20; font-size: 13px; font-weight: 600; line-height: 1.6;
}
.step-missing:empty { display: none; }
/* 빈 칸 자체도 표시한다 — 문장만으로는 여러 칸 중 어디인지 눈이 못 찾는다 */
.fld-missing { border-color: #CC001A !important; background: #FFF7F8; }

/* ── Step 2 시선 유도 ── */
.step2-dots {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 16px; background:var(--bg-off);
  border:1px solid rgba(0,0,0,.1); border-radius:var(--r); margin-bottom:20px;
}
.step2-dot-item {
  display:flex; align-items:center; gap:7px;
  font-size:10.5px; font-weight:600; color:var(--t-sub);
  letter-spacing:.04em; text-transform:uppercase;
  transition:color var(--dur);
}
.step2-dot-item.done { color:var(--t-head); }
.step2-dot {
  width:8px; height:8px; border-radius:50%;
  background:rgba(0,0,0,.12); flex-shrink:0;
  transition:background .25s, transform .25s;
}
.step2-dot.done { background:#22c55e; transform:scale(1.25); }
.step2-dot-sep { color:rgba(0,0,0,.12); font-size:14px; }
.step2-field-done input,
.step2-field-done textarea { border-color:#22c55e !important; background:rgba(34,197,94,.03) !important; }
.cta-guide-wrap {
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px;
  background:rgba(81,77,194,.05); border:1px solid rgba(81,77,194,.18);
  border-radius:var(--r); font-size:12px; font-weight:700;
  color:var(--brand); letter-spacing:.04em;
  opacity:0; transform:translateY(8px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
  pointer-events:none; margin-bottom:12px;
}
.cta-guide-wrap.show { opacity:1; transform:translateY(0); pointer-events:auto; }
.cta-arrow { display:inline-block; animation:ctaArrow .65s ease-in-out infinite alternate; font-size:13px; }
@keyframes ctaArrow { from{transform:translateY(0)} to{transform:translateY(4px)} }
@keyframes ctaGlow {
  0%   { box-shadow:0 0 0 0    rgba(81,77,194,.6); }
  45%  { box-shadow:0 0 0 14px rgba(81,77,194,0); }
  100% { box-shadow:0 0 0 0    rgba(81,77,194,0); }
}
.btn-cta-ready { animation:ctaGlow 1.4s ease 3; }

/* 견적 확인 */
.estimate-confirm {
  text-align:center; padding:32px 20px 24px;
  display:flex; flex-direction:column; align-items:center; gap:0;
}
.confirm-icon-wrap {
  width:64px; height:64px;
  background:rgba(34,197,94,.07); border:1.5px solid rgba(34,197,94,.2);
  border-radius:var(--r); display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.confirm-title { font-size:17px; font-weight:800; color:var(--t-head); letter-spacing:-.02em; margin-bottom:6px; }
.confirm-msg { font-size:13.5px; color:var(--t-mute); line-height:1.75; margin-bottom:24px; }

/* 견적서 받기 버튼 (연수 일정 탐색하기 다음 순서 — 보조 스타일) */
/* ⚠ `.btn-get-estimate` 규칙 10줄은 **2026-09-15에 걷었다.** 확인 패널의 「견적서 받기」를
   빼면서 그 클래스를 쓰는 요소가 0개가 됐다(`index.html`·`script.js` 전수 확인).
   🔴 마크업만 지우고 CSS를 남기면 **아무도 안 쓰는 채로 살아 있고**, 다음에 읽는 사람은
     그게 도는 줄 알고 고치려다 시간을 쓴다(`test_vT`가 같은 이유로 세운 규칙이다).
   ⚠ 바로 아래 `@keyframes confirmBtnPulse`는 **남긴다** — `.btn-explore-plan`
     (「여행 일정 살펴보기」)이 쓴다. 세어 보고 남겼다.
   경위와 되살리는 법은 `ai-loop/test_zD_quote_entry.js`에 있다. */
@keyframes confirmBtnPulse {
  0%  { box-shadow:0 0 0 0    rgba(81,77,194,.6); }
  45% { box-shadow:0 0 0 14px rgba(81,77,194,0); }
  100%{ box-shadow:0 0 0 0    rgba(81,77,194,0); }
}
.btn-reset-est {
  background:none; border:none; color:var(--t-sub); font-size:12px;
  font-weight:600; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
  transition:color var(--dur);
}
.btn-reset-est:hover { color:var(--t-head); }

/* 결과 카드 */
.estimate-result { position:sticky; top:80px; }
.result-card {
  background:var(--bg); border:1px solid var(--rule-md);
  border-radius:var(--r); padding:32px; box-shadow:var(--sh-md);
}
.result-card-top { margin-bottom:16px; }
.result-label { font-size:12.5px; font-weight:700; color:var(--brand); }
.btn-dl-main {
  width:100%; padding:14px; background:var(--ink); color:var(--white);
  border:2px solid var(--ink); border-radius:var(--r);
  font-size:13px; font-weight:700; cursor:pointer;
  transition:all var(--dur); margin:16px 0 10px;  /* 금액 아래로 옮겨 위 여백을 준다(2026-09-29) */
}
.btn-dl-main:hover { background:var(--ink2); border-color:var(--ink2); }
.btn-consult {
  width:100%; padding:12px; background:transparent; color:var(--brand);
  border:1.5px solid rgba(81,77,194,.35); border-radius:var(--r);
  font-size:13px; font-weight:700; cursor:pointer;
  transition:all var(--dur); margin-bottom:20px;
}
.btn-consult:hover { background:var(--brand); color:var(--white); border-color:var(--brand); }

/* 엑셀 견적서 다운로드 (신규, 되돌리려면 이 블록 삭제) */
.btn-dl-excel {
  width:100%; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:12px; background:transparent; color:var(--t-mute);
  border:1.5px solid var(--rule-md); border-radius:var(--r);
  font-size:13px; font-weight:700; cursor:pointer;
  transition:all var(--dur); margin-bottom:10px;
  letter-spacing:.05em; text-transform:uppercase;
}
.btn-dl-excel:hover { background:var(--ink); color:var(--white); border-color:var(--ink); }

/* 상담 폼 */
.consult-form-wrap {
  background:var(--bg-off); border:1px solid rgba(0,0,0,.1);
  border-radius:var(--r); padding:20px; margin-bottom:20px;
}
.consult-form-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; font-size:14px; font-weight:700; color:var(--t-head); }
.consult-close { background:none; border:none; font-size:20px; color:var(--t-sub); cursor:pointer; line-height:1; }
.consult-form-desc { font-size:12px; color:var(--t-mute); margin-bottom:16px; line-height:1.6; }
.consult-fields { display:flex; flex-direction:column; gap:12px; }
.consult-label {
  display:flex; flex-direction:column; gap:5px;
  font-size:10.5px; font-weight:700; color:var(--t-mute);
  text-transform:uppercase; letter-spacing:.05em;
}
.consult-label input {
  padding:9px 13px; border:1.5px solid rgba(0,0,0,.12);
  border-radius:var(--r); font-size:13px; color:var(--t-head);
  background:var(--bg); transition:border-color var(--dur);
}
.consult-label input:focus { border-color:var(--brand); outline:none; box-shadow:0 0 0 3px rgba(81,77,194,.12); }
.req { color:var(--brand); }
.consult-ok {
  padding:12px; background:rgba(34,197,94,.07);
  border:1px solid rgba(34,197,94,.2); border-radius:var(--r);
  color:#059669; font-size:13px; font-weight:600;
  text-align:center; margin-top:12px;
}
.consult-actions { display:flex; gap:10px; margin-top:16px; }
.btn-consult-cancel {
  flex:1; padding:10px; background:var(--bg);
  color:var(--t-mute); border:1.5px solid rgba(0,0,0,.12);
  border-radius:var(--r); font-size:13px; font-weight:600;
  cursor:pointer; transition:all var(--dur);
}
.btn-consult-cancel:hover { background:var(--bg-off); }
.btn-consult-submit {
  flex:2; padding:10px; background:var(--brand); color:var(--white);
  border:2px solid var(--brand); border-radius:var(--r);
  font-size:13px; font-weight:700; cursor:pointer; transition:all var(--dur);
}
.btn-consult-submit:hover { background:var(--brand-dk); border-color:var(--brand-dk); }

/* 견적 없음 */
.no-estimate-msg { text-align:center; padding:40px 16px 8px; }
.no-est-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  background:rgba(81,77,194,.07); margin-bottom:4px;
}
.no-estimate-msg .no-est-lead { margin-top:12px; font-size:13px; color:var(--t-sub); line-height:1.7; }
.no-est-steps {
  margin:24px auto 0; padding:18px 20px; max-width:280px;
  background:var(--bg-off); border:1px solid var(--rule);
  text-align:left; display:flex; flex-direction:column; gap:11px;
}
.no-est-steps li {
  display:flex; align-items:center; gap:9px;
  font-size:12.5px; color:var(--t-mute); font-weight:500;
}
.no-est-steps li [data-lucide] { color:var(--brand); flex-shrink:0; }

/* 체크리스트 (접이식 details/summary) */
.group-checklist { margin-top:24px; padding-top:24px; border-top:1px solid rgba(0,0,0,.08); }
.gcl-head {
  margin-bottom:16px; cursor:pointer; list-style:none; min-height:44px;  /* 32px였다 */
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.gcl-head::-webkit-details-marker { display:none; }
.gcl-head::after {
  content:'+'; font-size:18px; font-weight:300; color:var(--t-sub);
  flex-shrink:0; transition:transform var(--dur), color var(--dur);
}
.group-checklist[open] > .gcl-head::after { transform:rotate(45deg); color:var(--t-head); }
.gcl-head:hover .gcl-title { color:var(--brand); }
/* 🔴 제목을 **구역 머리로 세운다** (2026-09-15 대표 지시: 「좀 더 디자인이 입혀졌으면」)
   고치기 전 실측: **11px** · 자간 .08em · `uppercase`.
   ⚠ 자간과 `uppercase`는 **영문 라벨을 위한 것**인데 내용은 「기업 단체연수 준비
     체크리스트」 — 전부 한글이다. 한글은 자간을 벌리면 덩어리가 흩어져 **오히려
     안 읽힌다**(YA에서 9px→11px과 함께 확인했고, 오늘 포함 항목 제목도 같았다).
     `uppercase`는 한글에 아무 일도 하지 않으면서 다음 사람을 헷갈리게 한다 — 걷는다.
   → 13px · 800 · 자간 .01em + **앞에 레드 세로 바**. 바가 「여기서 구역이 시작한다」를
     긋는다(포함 항목은 가로선, 여기는 세로 바 — 접이식 한 줄짜리 머리이기 때문이다). */
.gcl-title {
  font-size:13px; font-weight:800; letter-spacing:.01em;
  text-transform:none; color:var(--t-head); transition:color var(--dur);
  display:flex; align-items:center; gap:9px;
}
.gcl-title::before {
  content:''; flex-shrink:0; width:3px; height:14px;
  background:var(--brand); border-radius:1px;
}
/* 🔴 2026-09-14 대표 지시: 체크리스트를 **가로로 나열**한다.
   세 묶음(사전 준비 · 서류·행정 · 현지 운영)이 세로로 쌓여 12줄이 아래로 길게
   뻗어 있었다. 셋을 나란히 두면 같은 내용이 4줄 높이로 들어온다.
   ⚠ 좁은 화면에서는 1열로 돌아간다 — 3열을 유지하면 한 칸이 40px대가 되어 글자가
     한 자씩 끊긴다(아래 미디어쿼리가 그 자리다). */
.gcl-body { display:grid; grid-template-columns:repeat(3,1fr); gap:18px 28px; align-items:start; }
@media (max-width:820px) { .gcl-body { grid-template-columns:1fr; gap:16px; } }
/* 🔴 묶음 제목 — **10px였다.** 저장소 규칙은 「글자는 11px 이상」인데 셋 다 어겼고,
   `check_customer_screens.py`가 **이미 ⚠로 잡고 있었다**(「10px · 사전 준비 / 서류 · 행정 /
   현지 운영 · 폭 전부」). 🔴이 아니라 ⚠이라 199곳 틈에 묻혀 있었을 뿐이다.
   → 11.5px · 800 · 자간 .02em(여기도 한글이다) · **제목 위 2px 레드 선**.
   ⚠ 색을 **레드 글자에서 먹색 글자 + 레드 선**으로 옮겼다. 세 묶음 제목이 통째로
     레드라 시선이 셋으로 갈라졌는데, 선으로 옮기면 **레드 면적은 줄고 구분은 선다.**
     레드는 CTA·아이브로우·핵심 수치 3곳뿐이라는 원칙(방향 4)에도 이쪽이 맞다.
   ⚠ 「제목 위 선」은 오늘 포함 항목에 넣은 것과 **같은 구조**다 — 화면이 한 언어를 쓴다.
     색만 다르다(포함 항목=먹선(주) · 체크리스트=레드선(참고용 보조)). */
.gcl-sec-title {
  font-size:12.5px; font-weight:800;
  text-transform:none; color:var(--t-head);
  border-top:2px solid var(--brand); padding-top:9px; margin-bottom:11px;
}
.gcl-list { display:flex; flex-direction:column; gap:8px; }
/* 글자를 한 단계 진하게 — `--t-mute`(#505050)는 힌트용이고, 이건 **읽으라고 둔 목록**이다 */
.gcl-list li { font-size:12.5px; color:var(--t-body); padding-left:19px; position:relative; line-height:1.65; }
/* 🔴 **이름이 체크리스트인데 표식이 대시(5×1.5px)였다.** 이름과 모양을 맞춘다.
   ⚠ 아이콘 라이브러리를 쓰지 않고 **CSS로 그린다** — 어제(`eee3a0e`) 바깥 CDN이 404라
     아이콘이 한 개도 안 그려지고 있던 사고가 있었다. 테두리 두 변을 돌린 체크는
     폰트에도 CDN에도 기대지 않는다.
   ⚠ 색은 `--t-sub` 회색이다. 레드로 하면 체크가 12개라 위 원칙을 넘는다 —
     레드는 묶음 제목 선 셋으로 충분하다. */
.gcl-list li::before {
  content:''; position:absolute; left:3px; top:4px;
  width:5px; height:9px; background:none;
  border:solid var(--t-mute); border-width:0 1.8px 1.8px 0;
  transform:rotate(45deg);
}

/* 포함 항목 태그 */
#estimateDetail { margin-top:16px; }
.inc-label { font-size:12.5px; font-weight:700; color:var(--t-mute); margin-bottom:10px; }  /* 10px·자간이었다 — 견적을 낸 뒤에만 보여 검사가 못 봤다 */
.inc-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.inc-tag { padding:4px 11px; background:var(--bg-off); border:1px solid rgba(0,0,0,.1); border-radius:var(--r); font-size:12.5px; font-weight:600; color:var(--t-head); }

/* 총액 */
.result-totals { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.total-box { padding:18px; border-radius:var(--r); }
/* VX — **1인당이 주인공이다.** 사람은 1인당으로 비교하고, 8명 여행에서 총액이
   먼저 눈에 들어오면 놀라서 나간다(₩13,018,259 vs ₩1,627,282).
   그래서 검은 강조 상자를 1인당 쪽으로 옮겼다.
   ⚠ 총액을 없애지는 않았다 — 기업 담당자에게는 그게 결재 숫자다. */
.total-per   { background:var(--ink); border-top:3px solid var(--brand); }
.total-grand { background:var(--bg-off); border:1px solid rgba(0,0,0,.08); }
/* ⚠ 10px·자간이었다(2026-09-29) — 결과 카드는 견적을 낸 뒤에만 보여 화면 검사가 한 번도 못 봤다 */
.total-lbl { font-size:12.5px; font-weight:700; margin-bottom:7px; display:block; }
/* 🔴 2026-09-14 대표 지시: 검은 바탕의 「1인당 금액」은 **흰색**이다.
   전에는 65% 투명이라 흐렸다. CLAUDE.md — 흐림은 `opacity`가 아니라 **색으로** 정한다. */
.total-per   .total-lbl { color:#fff; }
.total-grand .total-lbl { color:var(--t-mute); }
.total-amt { font-size:22px; font-weight:900; letter-spacing:-.03em; display:block; }
/* 🔴 2026-09-14 대표 지시: 두 박스의 **글자·숫자 크기 비율을 맞춘다.**
   전에는 32px 대 18px이라 나란히 놓였을 때 한쪽만 크게 튀었다. 크기는 같게 두고
   **색과 바탕으로** 무엇이 먼저 읽히는지 정한다(검정 바탕 + 빨강 = 1인당).
   ⚠ 총액을 1인당보다 **크게 하지는 않는다** — 8명 여행에서 총액이 제일 먼저 눈에
     들어오면 사람은 놀라서 나간다(VX에서 순서를 뒤집은 이유다). 같게까지만 한다. */
.total-per   .total-amt { color:var(--brand); font-size:28px; }
.total-grand .total-amt { color:var(--t-head); font-size:28px; }
.rate-note-badge { font-size:12px; color:var(--t-mute); background:var(--bg-off); border-radius:var(--r); padding:5px 11px; margin-bottom:12px; text-align:center; }
.estimate-disclaimer { background:rgba(81,77,194,.04); border:1px solid rgba(81,77,194,.12); border-radius:var(--r); padding:16px; }
.disc-main { font-size:13px; font-weight:700; color:var(--t-head); margin-bottom:6px; }
.disc-sub  { font-size:12px; color:var(--t-mute); line-height:1.7; margin-bottom:12px; }
/* 🔴 2026-09-14 대표 지시: 상담 신청을 **조금 더 강조**한다.
   전에는 밑줄 친 작은 글자라 안내문에 묻혀 있었다. 테두리를 둘러 버튼으로 보이게 한다.
   ⚠ **꽉 찬 빨강으로는 안 한다.** 이 카드에 이미 「견적서 확인하기」와 「바로 상담
     신청하기」라는 강조 버튼이 있다 — 셋이 되면 무엇부터 눌러야 할지 모른다
     (CLAUDE.md: 한 자리에 강조 버튼을 둘 두지 않는다).
   ⚠ 누를 자리는 44px 이상이어야 한다(WCAG 2.5.5). 밑줄을 `text-decoration`으로만
     쓰던 것을 테두리로 바꾸면서 높이를 확보했다. */
.disc-cta  { display:inline-flex; align-items:center; min-height:44px;
             padding:0 20px; font-size:13px; font-weight:800; color:var(--brand);
             background:#fff; border:1.5px solid var(--brand); border-radius:var(--r);
             text-decoration:none; transition:background .18s, color .18s; }
.disc-cta:hover { background:var(--brand); color:#fff; }
.result-note { font-size:12px; color:var(--t-mute); margin-top:10px; text-align:center; }

/* ── 10. Gallery ────────────────────────────────────────────────── */
.section-gallery { padding:var(--sec-y) 0; background:var(--bg-dk); }

.gal-section-hd { display:flex; align-items:flex-end; gap:24px; margin-bottom:18px; }
.gal-hd-inner { flex-shrink:0; }
/* 어두운 구역의 아이브로우 — 측정 2.95:1이었다 */
.gal-hd-our { display:block; font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--brand-on-dk); margin-bottom:5px; }
.gal-hd-title { font-size:clamp(36px,6vw,64px); font-weight:900; color:var(--white); letter-spacing:-.04em; line-height:.95; }
.gal-hd-line { flex:1; height:1px; background:var(--rule-inv); margin-bottom:14px; }
.gal-hd-sub { font-size:14px; color:rgba(255,255,255,.55); line-height:1.7; max-width:560px; margin-bottom:28px; }

/* 업종별 추천 목적지 미니 위젯 */
.dest-recommender { background:var(--bg-dk2); border:1px solid var(--rule-inv); padding:22px 24px; margin-bottom:24px; }
.dest-rec-lbl { display:block; font-size:13.5px; font-weight:700; color:var(--white); margin-bottom:14px; }
.dest-rec-row { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
/* 🔴 눌렀을 때 열리는 목록만 회색으로 튀었다(2026-09-17 대표 지적).
   상자는 여기서 검게 칠하지만, **열리는 목록은 브라우저가 그린다** — CSS가
   닿지 않는다. `color-scheme`이 없으면 그 목록을 **밝은 모습으로** 그려서,
   검은 구역 위에서 혼자 흰하게 뜨게 된다. `dark`를 주면 목록까지 어두워진다.
   ⚠ 이 쏘은 **어둠 면에 놓인 select가 이것 하나라서** 여기 있다.
     나머지 5개(destination·programType·organizationType·visitMode·departureCity)는
     흰 폼 안이라 기본값이 맞다. **어두운 면에 select를 새로 놓으면 여기 같이 적을 것.** */
#destIndustry {
  color-scheme:dark;
  appearance:none; -webkit-appearance:none;
  background:var(--bg-dk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.4' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;
  border:1px solid var(--rule-inv); color:var(--white);
  font-size:13.5px; font-family:var(--font); padding:11px 36px 11px 14px;
  min-width:260px; cursor:pointer;
}
#destIndustry:focus { outline:none; border-color:var(--brand); }
/* color-scheme을 안 보는 브라우저 몴 — 목록 줄을 직접 칠한다. 둘 다 있어야 안전하다. */
#destIndustry option   { background:var(--bg-dk2); color:var(--white); }
#destIndustry optgroup { background:var(--bg-dk);  color:var(--brand-on-dk); font-weight:700; }
/* 고를 수 없는 줄(「분야를 골라 주세요」)은 흐리게 — 단 `opacity` 말고 **색으로**.
   귀칙은 이 저장소에 이미 있다(투명도는 뒤에 무엇이 오느냐에 따라 결과가 달라진다). */
#destIndustry option:disabled { color:rgba(255,255,255,.45); }
.dest-rec-result {
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:8px;
  font-size:13px; color:rgba(255,255,255,.92); line-height:1.6;
  border-radius:var(--r); border-left:3px solid transparent;
  opacity:0; transform:translateX(-6px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.dest-rec-result.show {
  opacity:1; transform:translateX(0); padding:10px 16px;
  background:rgba(81,77,194,.14); border:1px solid rgba(81,77,194,.4); border-left:3px solid var(--brand);
}
.dest-rec-result strong { color:var(--white); font-weight:800; }
.dest-rec-tag { color:rgba(255,255,255,.6); }

/* 지역 필터 */
.gal-filter-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.gal-filter-chip {
  font-family:var(--font); font-size:12.5px; font-weight:600; color:rgba(255,255,255,.65);
  background:none; border:1px solid var(--rule-inv); padding:8px 16px; cursor:pointer; min-height:44px;
  transition:border-color var(--dur), color var(--dur), background var(--dur);
}
.gal-filter-chip:hover { color:var(--white); border-color:rgba(255,255,255,.3); }
.gal-filter-chip.active { background:var(--brand); border-color:var(--brand); color:var(--white); }

.gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; align-items:stretch; }
.gallery-card.gal-hidden { display:none; }
@keyframes gal-highlight-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--brand) inset, 0 0 0 0 rgba(81,77,194,.5); }
  50%      { box-shadow: 0 0 0 4px var(--brand) inset, 0 0 34px 10px rgba(81,77,194,.55); }
}
.gallery-card.gal-highlight {
  z-index:3; transform:scale(1.045);
  animation: gal-highlight-pulse 1.1s ease-in-out 3;
}
.gallery-card.gal-highlight::after {
  content:'추천 목적지'; position:absolute; top:10px; left:10px; z-index:4;
  background:var(--brand); color:#fff; font-size:11.5px; font-weight:800;
  letter-spacing:.01em; padding:5px 11px; border-radius:3px;
  box-shadow:0 3px 10px rgba(0,0,0,.35);
}

/* 기본 카드 (1칸) — 3/4 비율이 행 높이를 결정 */
.gallery-card {
  position:relative; overflow:hidden; aspect-ratio:3/4; display:block;
  border:1px solid var(--rule-inv);
  transition:transform var(--dur-md) var(--ease), box-shadow var(--dur-md) var(--ease);
}
/* 2026-10-01 — 타일이 들리던 것을 걷었다. 격자 사진은 들리면 이음매가 벌어져 보인다 — 사진만 천천히 다가온다 */
.gallery-card:hover { z-index:1; }

/* Row 1·2 넓은 카드: aspect-ratio 제거 → 옆 단일 카드 높이에 맞춰 stretch */
.gallery-card:nth-child(1),
.gallery-card:nth-child(5) { grid-column:span 2; aspect-ratio:unset; }

/* Row 3: 두 카드 모두 span 2 + 동일 비율 → 바닥 라인 자동 정렬 */
.gallery-card:nth-child(7),
.gallery-card:nth-child(8) { grid-column:span 2; aspect-ratio:16/9; }

.gallery-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease), filter .7s var(--ease); filter:saturate(.9) brightness(.85); }
.gallery-card:hover img { transform:scale(1.045); filter:saturate(1) brightness(.72); }
.gallery-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.35) 55%, transparent 100%);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
  padding:22px; gap:6px;
  transition:background var(--dur-md);
}
/* 2026-10-01 — 마우스를 올리면 보라 그라데이션이 덮이던 것을 걷었다(「AI가 만든 화면」의 전형). 사진 색을 지키고 글자 밑에 민트 선만 그어진다 */
.gallery-card:hover .gallery-overlay { background:linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.42) 60%, transparent 100%); }
.gallery-tag {
  font-size:10.5px; font-weight:700; letter-spacing:.06em; color:var(--white);
  opacity:0; transform:translateY(8px);
  transition:opacity var(--dur-md) var(--ease), transform var(--dur-md) var(--ease);
}
.gallery-card:hover .gallery-tag { opacity:.85; transform:translateY(0); }
.gallery-overlay h3 { font-size:17px; font-weight:700; color:var(--white); letter-spacing:.01em; position:relative; padding-bottom:7px; }
.gallery-overlay h3::after { content:''; position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--brand-on-dk); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-md) var(--ease); }
.gallery-card:hover .gallery-overlay h3::after, .gallery-card:focus-visible .gallery-overlay h3::after { transform:scaleX(1); }

/* ── 11. Services ───────────────────────────────────────────────── */
.section-services { padding:var(--sec-y) 0; background:var(--bg); }
/* 방향 1 — 에디토리얼 번호 배경 */
.section-services .container { position:relative; }

.svc-header {
  display:grid; grid-template-columns:1fr 1fr;
  gap:56px; align-items:end;
  margin-bottom:56px; padding-bottom:48px;
  border-bottom:1px solid var(--rule);
}
.svc-eyebrow { display:block; font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--brand); margin-bottom:14px; }
.svc-title { font-size:clamp(24px,3.5vw,40px); font-weight:900; color:var(--t-head); letter-spacing:-.04em; line-height:1.18; }
.svc-lead  { font-size:15px; color:var(--t-mute); line-height:1.85; }

.svc-list { display:flex; flex-direction:column; }
/* 서비스 열 */
.svc-item-index { display:flex; flex-direction:column; gap:4px; padding-top:4px; }
.svc-item-body  { min-width:0; }
.svc-item {
  display:grid; grid-template-columns:140px 1fr 180px;
  gap:44px; align-items:start;
  padding:48px 0; border-bottom:1px solid var(--rule);
  position:relative;
}
.svc-item:last-child { border-bottom:none; }
/* 방향 1 — 대형 배경 번호 */
.svc-item::before {
  content:attr(data-num);
  position:absolute; left:-0.04em; top:50%;
  transform:translateY(-50%);
  font-size:180px; font-weight:900;
  color:rgba(0,0,0,.03); line-height:1;
  letter-spacing:-.06em; pointer-events:none;
  z-index:0; white-space:nowrap;
  transition:color var(--dur) var(--ease);
}
.svc-item:hover::before { color:rgba(81,77,194,.08); }
.svc-step { display:block; font-size:36px; font-weight:900; color:rgba(0,0,0,.08); line-height:1; letter-spacing:-.05em; margin-bottom:6px; }
.svc-cat  { font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--brand); }
.svc-item-title { font-size:20px; font-weight:800; color:var(--t-head); margin-bottom:12px; letter-spacing:-.02em; }
.svc-item-desc  { font-size:14px; color:var(--t-mute); line-height:1.8; margin-bottom:16px; }
.svc-bullets { display:flex; flex-direction:column; gap:7px; }
.svc-bullets li { font-size:13px; color:var(--t-mute); padding-left:16px; position:relative; line-height:1.7; }
.svc-bullets li::before { content:''; position:absolute; left:0; top:9px; width:7px; height:1px; background:var(--t-sub); }
.svc-item-metric { text-align:right; padding-top:4px; position:relative; z-index:1; }
.svc-metric-val  { font-size:44px; font-weight:900; color:var(--t-head); letter-spacing:-.05em; line-height:1; }
.svc-metric-unit { font-size:.48em; color:var(--brand); font-weight:700; }
.svc-metric-lbl  { font-size:12px; color:var(--t-mute); margin-top:5px; margin-bottom:0; }
/* 🔴 **누를 곳이 79×16px이었다** (YA). 그리고 이 카드에서 **누를 수 있는 것은 이것뿐**이다
   — 카드는 `<div>`라 카드를 눌러도 아무 일도 안 난다. 즉 폰에서 「견적 계산하기」로 가는
   길이 16px짜리 줄 하나였다(WCAG 2.5.5 · Apple HIG 권장 44px).
   ⚠ **밑줄을 `border-bottom`에서 `text-decoration`으로 옮겼다.** 테두리는 **상자**에
     붙는 것이라, 누를 자리를 넓히려고 `padding`을 주면 밑줄이 글자에서 떨어져 나간다.
     글자에 붙는 밑줄로 바꾸면 **보이는 모습은 그대로**인 채 상자만 키울 수 있다.
   ⚠ 위쪽 여백은 `.svc-metric-lbl`의 `margin-bottom:14px`를 여기 `padding-top`으로
     옮긴 것이다 — 여백을 두 곳에서 주면 카드가 그만큼 벌어진다. */
.svc-cta {
  font-size:12px; font-weight:700; color:var(--t-head);
  display:inline-block; padding:14px 0;
  text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px;
  transition:color var(--dur), text-decoration-color var(--dur);
}
.svc-cta:hover { color:var(--brand); text-decoration-color:var(--brand); }
/* svc-header 자식 */
.svc-header-left  { min-width:0; }
.svc-header-right { min-width:0; display:flex; align-items:flex-end; }

.svc-footer { margin-top:34px; text-align:center; }
/* 🔴 239×20px이었다 (YA) — `.svc-cta`와 같은 이유·같은 방법. 여백은 `.svc-footer`의
   `margin-top`에서 14px을 덜어 여기 `padding`으로 옮겼다(48 → 34 + 14). */
.svc-blog-link {
  font-size:14px; font-weight:700; color:var(--t-head);
  display:inline-block; padding:14px 0;
  text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px;
  transition:color var(--dur), text-decoration-color var(--dur);
}
.svc-blog-link:hover { color:var(--brand); text-decoration-color:var(--brand); }
.svc-blog-arrow { margin-left:4px; }

/* 견적 조건 배지 */
.cond-tags-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.cond-tag { padding:3px 10px; border-radius:var(--r); font-size:12px; font-weight:700; }
.cond-discount     { background:rgba(34,197,94,.1); color:#047857;   /* 2026-10-12 #059669 3.46:1 → 5.0:1 */ border:1px solid rgba(34,197,94,.2); }
.cond-season-peak  { background:rgba(239,68,68,.1);  color:#b91c1c; border:1px solid rgba(239,68,68,.2); }
.cond-season-offpeak { background:rgba(59,130,246,.1); color:#1d4ed8; border:1px solid rgba(59,130,246,.2); }

/* 요율 기준일 상태 */
.rate-ok    { color:#059669 !important; }
/* 🔴 #d97706은 옅은 바탕(#F7F7F5) 위 2.97:1로 못 읽혔다(2026-10-01 check_contrast) — admin의 --warn 값(5.0:1)으로 */
.rate-check { color:#B45309 !important; }
.rate-stale { color:#dc2626 !important; }
.rate-badge-note { font-size:10px; color:var(--t-sub); margin-left:4px; }

/* ── 12. Portfolio ──────────────────────────────────────────────── */
.section-portfolio { padding:var(--sec-y) 0; background:var(--bg-off); }
.pf-section-hd { display:flex; align-items:flex-end; gap:28px; margin-bottom:36px; }
.pf-hd-inner { flex-shrink:0; }
.pf-hd-our { display:block; font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--brand); margin-bottom:5px; }
/* 방향 1 — 섹션 대형 타이틀 */
.pf-hd-title { font-size:clamp(40px,7vw,80px); font-weight:900; color:var(--t-head); letter-spacing:-.05em; line-height:.95; }
.pf-hd-line  { flex:1; height:1px; background:var(--rule-md); margin-bottom:14px; }

.pf-filter-wrap { display:flex; gap:8px; margin-bottom:32px; flex-wrap:wrap; }
.pf-filter {
  padding:7px 20px; border:1.5px solid rgba(0,0,0,.12);
  border-radius:var(--r); background:var(--bg);
  font-size:13px; font-weight:600; color:var(--t-mute); min-height:44px;  /* 37px였다 */
  cursor:pointer; transition:all var(--dur);
}
.pf-filter:hover  { border-color:var(--ink); color:var(--t-head); }
.pf-filter.active { background:var(--ink); border-color:var(--ink); color:var(--white); }

.pf-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pf-card {
  display:block; background:var(--bg);
  border:1px solid rgba(0,0,0,.08); border-radius:var(--r);
  overflow:hidden; transition:transform var(--dur-md) var(--ease), box-shadow var(--dur-md) var(--ease);
  box-shadow:var(--sh-sm);
}
.pf-card:hover { transform:translateY(-3px); box-shadow:var(--sh-md); border-color:transparent; }
.pf-more-hidden { display:none; }
.pf-img { position:relative; overflow:hidden; aspect-ratio:4/3; }
.pf-img img { width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); filter:brightness(.9); }
.pf-card:hover .pf-img img { transform:scale(1.04); filter:brightness(.7); }
.pf-hover-info {
  position:absolute; inset:0;
  background:rgba(13,13,13,.88);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:20px; opacity:0; transition:opacity var(--dur-md);
}
.pf-card:hover .pf-hover-info { opacity:1; }
/* 포트폴리오 카드 글자 — 2026-09-17 대표 지적「더 크게」.
   같이 고친 것 둘(크기만 올리면 더 안 읽혔다):
   ① 롤오버 지역명이 **검정 위의 보라(2.9:1)**였다 — `--brand-on-dk`(민트)로.
     ⚠ `check_contrast.py`가 이걸 못 잡는다 — 평소엔 `opacity:0`이라 재는 자가 안 본다.
   ② 한글에 `letter-spacing`을 벌려 놓았다(.14em/.08em) — 영문 대문자용이라 떼었다.
     `text-transform:uppercase`도 한글엔 아무 일도 안 한다 — 같이 떼다. */
.pf-hi-region { font-size:12px; font-weight:700; letter-spacing:0; color:var(--brand-on-dk); margin-bottom:9px; }
.pf-hi-title  { font-size:17px; font-weight:700; color:var(--white); text-align:center; line-height:1.5; }
.pf-body { padding:18px 20px 20px; }
.pf-dest  { font-size:12px; font-weight:700; color:var(--brand); letter-spacing:0; margin-bottom:7px; }
.pf-title { font-size:15.5px; font-weight:600; color:var(--t-head); line-height:1.55; }
.pf-cta { display:flex; align-items:center; gap:12px; justify-content:center; margin-top:44px; }
.pf-blog-btn { color:var(--t-head); border-color:var(--t-head); }

/* ── 13. Testimonials ───────────────────────────────────────────── */
.section-testimonials { padding:var(--sec-y) 0; background:var(--bg-dk); }
.section-testimonials .section-title-center { color:var(--white); }
.section-testimonials .section-sub-center   { color:rgba(255,255,255,.65); }
.testi-eyebrow-row { display:flex; align-items:center; gap:20px; margin-bottom:22px; }
.testi-eyebrow-line { flex:1; height:1px; background:var(--rule-inv); }
.testi-eyebrow-label { font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.55); }

.testimonial-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:56px; }
.testi-card {
  background:var(--bg-dk2); border:1px solid var(--rule-inv);
  border-radius:var(--r); padding:32px;
  transition:background var(--dur), border-color var(--dur);
}
.testi-card:hover { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.16); }
.testi-card-highlight { background:rgba(81,77,194,.07); border-color:rgba(81,77,194,.2); }
/* 방향 1 — 큰 따옴표 */
.testi-quote { font-size:56px; line-height:.75; color:var(--brand); font-family:Georgia,serif; margin-bottom:16px; opacity:.6; }
.testi-text  { font-size:14px; color:rgba(255,255,255,.85); line-height:1.85; margin-bottom:24px; font-weight:400; }
/* ⚠ `opacity:.8`을 걷었다 (YA) — 어두운 카드 위에서 별점이 2.33:1이었다.
   투명도는 색을 배경 쪽으로 **한 번 더** 섞어 대비를 깎는다. 흐리게 보이길 원하면
   색으로 정한다(투명도는 뒤에 무엇이 오는지에 따라 결과가 달라진다). */
.testi-star  { color:var(--brand-on-dk); font-size:12px; letter-spacing:.06em; margin-bottom:7px; }
.testi-name  { font-size:14px; font-weight:700; color:var(--white); margin-bottom:3px; }
.testi-org   { font-size:12.5px; color:rgba(255,255,255,.6); }

/* trust strip */
.trust-strip {
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--bg-dk2); border:1px solid var(--rule-inv); border-radius:var(--r);
}
.trust-item {
  padding:32px 24px; text-align:center;
  border-right:1px solid var(--rule-inv);
  transition:background var(--dur);
}
.trust-item:last-child { border-right:none; }
.trust-item:hover { background:rgba(255,255,255,.03); }
.trust-num  { font-size:32px; font-weight:900; color:var(--white); letter-spacing:-.04em; line-height:1; }
/* 수치 단위(YRS·+·%) — 검정 띄 위라 2.75:1이었다 */
.trust-unit { color:var(--brand-on-dk); font-size:.5em; font-weight:700; }
.trust-lbl  { font-size:12px; color:rgba(255,255,255,.62); margin-top:7px; }
.trust-divider { display:none; }

/* ── 14. FAQ ────────────────────────────────────────────────────── */
.section-faq { padding:var(--sec-y) 0; background:var(--bg); }
.faq-wrap { display:grid; grid-template-columns:300px 1fr; gap:72px; align-items:start; }
.faq-list { display:flex; flex-direction:column; min-width:0; }
.faq-left h2 { font-size:clamp(24px,3.5vw,40px); font-weight:900; color:var(--t-head); letter-spacing:-.04em; line-height:1.2; margin-bottom:18px; }
/* FAQ 글자 — 2026-09-17 대표 지시「여러 상황 고려해서 알맞게」. 재고 정한 값이다:
   · 답 14 → 15.5px — 1440px에서 **줄당 54자**였다(편한 구간 45~50자를 넘어섬).
     칸 폭은 그대로니 글자를 키우면 줄이 짧아진다 → **49자**.
     크기와 읽힘이 같은 방향으로 간 드문 자리다(보통은 키우면 줄이 길어져 손해를 본다).
   · 줄간 1.85 → 1.8 — 글자가 커졌으니 비율을 그대로 두면 문단이 설것게 벌어진다.
   · 질문 15 → 16.5px — 답보다 크게 둔다(접힌 목록을 훑는 제목 역할).
   · 겹치는 `+` 22 → 24px — 질문만 키우면 부호가 작아 보인다.
   ⚠ 질문은 **누르는 자리**다 — 높이 83px(폰 75px)로 44px 기준을 넘긴다(재봤다). */
.faq-sub { font-size:15px; color:var(--t-mute); line-height:1.8; }
.faq-item { border-bottom:1px solid var(--rule); }
.faq-q {
  width:100%; text-align:left; background:none; border:none;
  padding:22px 0; font-size:16.5px; font-weight:600; color:var(--t-head);
  cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:16px; transition:color var(--dur);
}
.faq-q::after { content:'+'; font-size:24px; font-weight:300; color:var(--t-sub); flex-shrink:0; transition:transform var(--dur), color var(--dur); }
.faq-q.open::after  { transform:rotate(45deg); color:var(--t-head); }
.faq-q:hover { color:var(--t-head); }
.faq-q:hover::after { color:var(--t-head); }
.faq-a { display:none; padding-bottom:22px; }
.faq-a.open { display:block; }
.faq-a p { font-size:15.5px; color:var(--t-mute); line-height:1.8; }

/* ── 15. About ──────────────────────────────────────────────────── */
.section-about { padding:var(--sec-y) 0; background:var(--bg-off); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.about-copy h2 { font-size:clamp(24px,3.5vw,40px); font-weight:900; color:var(--t-head); letter-spacing:-.04em; line-height:1.25; margin-bottom:22px; }
.about-copy p  { font-size:15px; color:var(--t-mute); line-height:1.88; }
.about-photo-wrap { overflow:hidden; aspect-ratio:4/3; border-radius:var(--r); box-shadow:var(--sh-lg); margin-bottom:20px; }
.about-photo-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.about-photo-wrap:hover img { transform:scale(1.04); }
/* ── 15b. Partners (함께한 파트너) ─────────────────────────────── */
.partners-groups-wrap { margin-top:64px; padding-top:48px; border-top:1px solid var(--rule); }
.partners-groups-hd { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--t-sub); margin-bottom:24px; }
.partners-groups { display:flex; flex-direction:column; }
.partners-group { display:grid; grid-template-columns:200px 1fr; gap:32px; padding:26px 0; border-top:1px solid var(--rule); align-items:baseline; }
.partners-group:last-child { border-bottom:1px solid var(--rule); }
.partners-cat { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--t-sub); }

/* 로고 마퀴 — 좌우 페이드 마스크 + 무한 스크롤, hover 시 정지 */
.partners-marquee {
  position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.partners-track {
  display:flex; align-items:center; gap:10px; width:max-content;
  animation:partners-scroll 42s linear infinite;
}
.partners-marquee:hover .partners-track { animation-play-state:paused; }
.partners-group:nth-child(even) .partners-track { animation-direction:reverse; }
@keyframes partners-scroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}
.partner-logo-item {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; height:64px; width:124px; padding:4px 8px; flex-shrink:0;
}
.partner-logo-item img {
  max-height:26px; max-width:108px; width:auto; height:auto; object-fit:contain;
  filter:grayscale(1) opacity(.6);
  transition:filter var(--dur);
}
.partner-logo-item:hover img { filter:grayscale(0) opacity(1); }
.partner-logo-name {
  font-size:12px; font-weight:600; color:var(--t-mute); text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px;
  letter-spacing:-.01em;
}

/* 로고 없는 기관은 기존 텍스트 칩으로 폴백 */
.partners-track .p-chip {
  font-size:13.5px; font-weight:500; color:var(--t-body); line-height:1.4;
  padding:7px 14px; border:1px solid var(--rule-md); border-radius:999px;
  white-space:nowrap; background:var(--bg); flex-shrink:0;
  transition:border-color var(--dur), color var(--dur), background var(--dur);
}
.partners-track .p-chip:hover { border-color:var(--brand); color:var(--brand-dk); background:rgba(81,77,194,.05); }

@media (prefers-reduced-motion: reduce) {
  .partners-track { animation:none; }
}

/* ── 16. Contact ────────────────────────────────────────────────── */
.section-contact { padding:var(--sec-y) 0; background:var(--bg-dk); }
.section-contact .eyebrow { color:rgba(255,255,255,.55); letter-spacing:.22em; }
.section-contact h2 { font-size:clamp(26px,4vw,48px); font-weight:900; color:var(--white); letter-spacing:-.04em; line-height:1.18; margin-bottom:18px; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:stretch; }
.contact-grid > div { display:flex; flex-direction:column; }
.contact-grid > div > p { font-size:15px; color:rgba(255,255,255,.72); line-height:1.85; margin-bottom:32px; }
.contact-details { display:flex; flex-direction:column; gap:9px; margin-bottom:32px; }
.contact-details p { font-size:13.5px; color:rgba(255,255,255,.72); line-height:1.65; }
.contact-details strong { color:rgba(255,255,255,.95); font-weight:600; }
.map-wrap { overflow:hidden; flex:1; min-height:200px; border:1px solid var(--rule-inv); border-radius:var(--r); }
.map-wrap iframe { width:100%; height:100%; border:0; }
.contact-form {
  background:var(--bg); border-radius:var(--r);
  padding:36px; display:flex; flex-direction:column; gap:18px;
  box-shadow:var(--sh-lg);
}
.contact-form label { display:flex; flex-direction:column; gap:7px; font-size:12.5px; font-weight:700; color:var(--t-head); }
.contact-form input,
.contact-form textarea {
  padding:11px 14px; border:1.5px solid rgba(0,0,0,.12);
  border-radius:var(--r); font-size:14px; color:var(--t-head);
  background:var(--bg); transition:border-color var(--dur), box-shadow var(--dur);
  font-family:var(--font);
}
.contact-form input:focus,
.contact-form textarea:focus { border-color:var(--ink); outline:none; box-shadow:0 0 0 3px rgba(13,13,13,.07); }
.contact-form textarea { min-height:110px; resize:vertical; }
.inq-success {
  padding:12px; background:rgba(34,197,94,.07);
  border:1px solid rgba(34,197,94,.2); border-radius:var(--r);
  color:#059669; font-size:13px; font-weight:600; text-align:center;
}

/* ── 17. Footer ─────────────────────────────────────────────────── */
.site-footer { background:#080808; padding:72px 0 36px; border-top:1px solid var(--rule-inv); }
.footer-grid {
  display:grid; grid-template-columns:1fr auto;
  gap:56px; margin-bottom:48px; padding-bottom:48px;
  border-bottom:1px solid var(--rule-inv);
}
.footer-brand   { font-size:15px; font-weight:900; color:var(--white); display:block; padding:9px 0; margin:-9px 0 0;  /* 누를 높이 26→44, 보이는 자리는 그대로 */ text-transform:uppercase; letter-spacing:.06em; }
.footer-tagline { font-size:12px; color:rgba(255,255,255,.55); font-weight:600; margin-bottom:18px; }
.footer-info    { max-width:46em; font-size:12.5px; color:rgba(255,255,255,.48); line-height:2; }
.footer-col-contact { text-align:right; }
.footer-col-label   { font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:14px; display:block; }
.footer-col-contact p { font-size:12.5px; color:rgba(255,255,255,.6); line-height:2; }
.footer-bottom { font-size:12px; color:rgba(255,255,255,.38); text-align:center; }

/* ── 18. Floating ───────────────────────────────────────────────── */
.scroll-top-btn {
  position:fixed; bottom:90px; right:20px;
  width:42px; height:42px;
  background:var(--ink2); color:var(--white);
  border:1px solid rgba(255,255,255,.08); border-radius:var(--r);
  font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh-md); opacity:0; pointer-events:none;
  transition:all var(--dur); z-index:900;
}
.scroll-top-btn.visible { opacity:1; pointer-events:auto; }
.scroll-top-btn:hover { background:var(--brand); border-color:var(--brand); transform:translateY(-2px); }
.kakao-float {
  position:fixed; bottom:24px; right:20px;
  display:flex; align-items:center; gap:8px;
  background:#FEE500; color:#3A1D1D;
  padding:11px 16px; border-radius:var(--r);
  font-size:12.5px; font-weight:700;
  box-shadow:var(--sh-md); transition:all var(--dur); z-index:900;
  opacity:0; pointer-events:none; transform:translateY(8px);
}
.kakao-float.visible { opacity:1; pointer-events:auto; transform:translateY(0); }
.kakao-float:hover { transform:translateY(-3px); box-shadow:var(--sh-lg); }

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* ── Tablet (≤1024px) ─────────────────────────────────────────── */
@media (max-width:1024px) {
  :root { --sec-y:96px; }

  .nav-links a { font-size:12px; padding:13px 7px; }

  /* 태블릿: 2열, 모든 카드 span 없이 16/9 균등 배치 → 행 바닥 완벽 정렬 */
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .gallery-card { aspect-ratio:16/9; }
  .gallery-card:nth-child(1),
  .gallery-card:nth-child(5),
  .gallery-card:nth-child(7),
  .gallery-card:nth-child(8) { grid-column:auto; aspect-ratio:16/9; }

  .svc-item { grid-template-columns:120px 1fr; gap:28px; }
  .svc-item::before { font-size:100px; }
  .svc-item-metric { display:none; }

  .faq-wrap  { grid-template-columns:220px 1fr; gap:48px; }
  .about-grid    { gap:48px; }
  .contact-grid  { gap:48px; }
  .partners-group { grid-template-columns:150px 1fr; gap:20px; }
}

/* ── Mobile-L (≤768px) ─────────────────────────────────────────── */
@media (max-width:768px) {
  :root { --sec-y:64px; --pad-x:16px; }

  .site-header { height:56px; }
  .header-inner { height:56px; }
  .nav-links { display:none; }
  .nav-toggle { display:flex; }
  #home, #destinations, #estimate, #portfolio, #testimonials, #faq, #about, #contact {
    scroll-margin-top: 72px;
  }
  .header-inner .button { padding:8px 12px; font-size:11px; letter-spacing:.03em; }

  .nav-mobile-open .nav-links {
    display:flex; flex-direction:column;
    position:fixed; top:56px; left:0; right:0; height:calc(100dvh - 56px);
    background:var(--bg-dk); padding:16px;
    border-bottom:1px solid var(--rule-inv);
    gap:4px; z-index:999; overflow-y:auto;
  }
  .nav-mobile-open .nav-links a { padding:12px 16px; font-size:13px; border-bottom:none; color:rgba(255,255,255,.88); }

  .hero { min-height:calc(100dvh - 56px); padding-top:56px; }
  .hero-bg-text { display:none; }
  .hero-center { padding:40px var(--pad-x) 32px; gap:18px; }
  .hero-actions .button { flex:1; min-width:0; text-align:center; }

  .hero-stats { grid-template-columns:repeat(2,1fr); }
  .stat-item { padding:22px 16px; }
  .stat-item:nth-child(2) { border-right:none; }

  .estimate-grid { grid-template-columns:1fr; gap:24px; }
  .estimate-result { position:static; }
  .estimate-form { padding:24px 20px; }
  .result-card { padding:22px; }
  /* 🔴 align-items도 함께 바꾼다 (2026-10-20) — 넓은 화면의 flex-end(화살표와 바닥 맞춤)가 세로 줄에서는
     「오른쪽 끝 · 내용 폭」이 되어 출발일·귀국일이 오른쪽 절반에 몰리고 왼쪽이 비었다(390px 캡처). */
  .date-inputs-row { flex-direction:column; align-items:stretch; gap:8px; }
  .date-arrow-icon { display:none; }

  /* 모바일-L: 2열, 모든 카드 16/9 균등 → 바닥 라인 정렬 */
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .gallery-card { aspect-ratio:16/9; }
  .gallery-card:nth-child(1),
  .gallery-card:nth-child(5),
  .gallery-card:nth-child(7),
  .gallery-card:nth-child(8) { grid-column:auto; }

  .dest-rec-row { flex-direction:column; align-items:stretch; }
  #destIndustry { min-width:0; width:100%; }

  .svc-header { grid-template-columns:1fr; gap:18px; }
  .svc-item { grid-template-columns:1fr; gap:14px; padding:32px 0; }
  .svc-item::before { display:none; }
  .svc-item-metric { display:block; }
  .svc-metric-val { font-size:32px; }

  .pf-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .pf-section-hd { flex-direction:column; align-items:flex-start; gap:8px; }
  .pf-hd-line { display:none; }

  .gal-section-hd { flex-direction:column; align-items:flex-start; gap:8px; }
  .gal-hd-line { display:none; }
  .gal-hd-sub { margin-bottom:32px; }

  .testimonial-grid { grid-template-columns:1fr; gap:12px; }
  .trust-strip { grid-template-columns:repeat(2,1fr); }
  .trust-item { border-right:none; border-bottom:1px solid var(--rule-inv); padding:22px 16px; }
  .trust-item:nth-child(3),
  .trust-item:nth-child(4) { border-bottom:none; }

  .faq-wrap  { grid-template-columns:1fr; gap:36px; }
  .faq-q { font-size:15.5px; padding:18px 0; }
  .about-grid    { grid-template-columns:1fr; gap:36px; }
  .partners-group { grid-template-columns:1fr; gap:12px; padding:20px 0; }
  .p-chip { font-size:13px; padding:6px 12px; }
  .contact-grid  { grid-template-columns:1fr; gap:36px; }
  .contact-form  { padding:24px 20px; }

  .footer-grid { grid-template-columns:1fr; gap:32px; }
  .footer-col-contact { text-align:left; }

  .step-actions { flex-direction:column; }
  .step-actions .button { width:100%; }
  .fld-row { grid-template-columns:1fr; }
}

/* ── Mobile (≤480px) ─────────────────────────────────────────────  */
@media (max-width:480px) {
  :root { --sec-y:52px; --pad-x:14px; }

  .brand { font-size:14px; }
  .hero-center h1 { font-size:27px; }
  .hero-sub { font-size:13.5px; }
  .hero-actions { flex-direction:column; }
  .hero-actions .button { width:100%; }

  .hero-stats { grid-template-columns:repeat(2,1fr); }
  .stat-num-hero { font-size:22px; }

  /* 모바일: **2열** (2026-10-20) — 1열이었을 때 390px에서 목적지 2,247px · 연수 사례 3,742px로
     두 구역만 홈의 약 7화면이었다(홈 전체 17,822px). 견적 폼·문의로 내려가는 길이 그만큼 길었다.
     2열이면 반쪽 폭이라 16/9는 너무 납작하다(약 95px) → 4/3. 바닥 라인은 전부 같은 비율이라 맞는다. */
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .gallery-card { aspect-ratio:4/3; }
  .gallery-card:nth-child(1),
  .gallery-card:nth-child(5),
  .gallery-card:nth-child(7),
  .gallery-card:nth-child(8) { grid-column:auto; aspect-ratio:4/3; }

  .pf-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  /* 카드 안 글자·여백은 파일 끝 블록에 — 뒤쪽 `.pf-body{padding:20px}`·`.pf-title{17px}`가 여기를 덮는다 */
  .trust-strip { grid-template-columns:1fr 1fr; }

  .section-title-center { font-size:26px; }
  .faq-left h2 { font-size:24px; }
  .about-copy h2 { font-size:24px; }
  .section-contact h2 { font-size:26px; }

  .footer-grid { gap:24px; }

  .header-inner > .button { display:none; }
  .kakao-float span { display:none; }
  .kakao-float { padding:12px; }
  .scroll-top-btn { bottom:72px; right:16px; }

  .step-tracker { font-size:10px; gap:6px; margin-bottom:18px; }
  .total-per .total-amt { font-size:26px; }   /* VX: 강조가 1인당으로 옮겨졌다 */
}

/* ================================================================
   STEP 3 — 연수 일정 탐색
   ================================================================ */

/* ── 탐색 트리거 버튼 (estimate-result 패널 내부) ── */
.btn-explore-plan {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:15px 0;
  background:var(--brand);
  border:1.5px solid var(--brand);
  color:#fff;
  font-size:14px; font-weight:800; letter-spacing:.04em;
  cursor:pointer; margin-bottom:14px;
  border-radius:var(--r);
  box-shadow:0 6px 20px rgba(81,77,194,.28);
  transition:background .18s, border-color .18s, transform .18s, box-shadow .18s;
  animation:confirmBtnPulse 1.4s ease 2;
}
.btn-explore-plan:hover {
  background:var(--brand-dk); border-color:var(--brand-dk);
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(81,77,194,.36);
}

/* ── Step 3 섹션 전체 ── */
.step3-section {
  background:var(--bg-off);
  border-top:2px solid var(--rule);
  padding:64px 0 72px;
}

/* ── 섹션 헤더 ── */
.step3-hd { margin-bottom:40px; }
.step3-hd-top {
  display:flex; align-items:center; gap:14px; margin-bottom:12px;
}
.step3-badge {
  font-size:10px; font-weight:800; letter-spacing:.15em;
  color:#fff; background:var(--brand);
  padding:4px 10px; border-radius:var(--r);
}
.step3-title {
  font-size:clamp(20px, 3vw, 28px);
  font-weight:800; color:var(--t-head); margin:0;
}
.step3-sub {
  font-size:14px; color:var(--t-mute); line-height:1.7; margin:0;
}

/* ── 플랜 카드 그리드 ── */
.plan-cards {
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
  margin-bottom:36px;
}
.plan-card {
  background:#fff;
  border:2px solid var(--rule);
  padding:28px 24px;
  cursor:pointer;
  border-radius:var(--r);
  transition:border-color .18s, box-shadow .18s;
  position:relative;
}
.plan-card:hover {
  border-color:rgba(81,77,194,.3);
  box-shadow:0 4px 20px rgba(81,77,194,.08);
}
.plan-card.active {
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(81,77,194,.12);
}
.plan-card-hd {
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.plan-tag {
  font-size:10px; font-weight:800; letter-spacing:.12em;
  padding:3px 9px; border-radius:var(--r);
}
.plan-tag-a { background:var(--ink2); color:#fff; }
.plan-tag-b { background:var(--brand); color:#fff; }
.plan-type-lbl {
  font-size:13px; font-weight:700; color:var(--t-head);
}
.plan-desc {
  font-size:13px; color:var(--t-mute); margin:0 0 16px; line-height:1.6;
}
.plan-points {
  list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px;
}
.plan-points li {
  font-size:13px; color:var(--t-body);
  display:flex; align-items:flex-start; gap:8px;
}
.plan-points li::before {
  content:'▸'; color:var(--brand); flex-shrink:0; margin-top:1px;
}
.plan-select-indicator {
  display:none; align-items:center; gap:6px;
  font-size:12px; font-weight:700; color:var(--brand);
  margin-top:18px;
}
.plan-card.active .plan-select-indicator { display:flex; }

/* ── 일별 타임라인 ── */
.day-timeline-wrap {
  background:#fff;
  border:1.5px solid var(--rule);
  padding:28px 28px 24px;
  margin-bottom:28px;
  border-radius:var(--r);
}
.day-timeline-title {
  display:flex; align-items:center; gap:8px;
  font-size:15px; font-weight:800; color:var(--t-head);
  margin:0 0 24px;
}
.day-timeline {
  display:flex; flex-direction:column; gap:0;
}
/* ── 일별 일정 카드 (풍부한 am/pm/eve/tip 표시) ── */
.itin-day-card {
  border:1.5px solid var(--rule);
  margin-bottom:10px;
  overflow:hidden;
}
.itin-day-card:last-child { margin-bottom:0; }
.itin-day-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px; background:var(--ink2); gap:14px;
}
.itin-day-hd-l {
  display:flex; align-items:center; gap:8px; flex-shrink:0;
}
.itin-day-num {
  /* 어두운 헤더 위 — 브랜드 레드로는 2.96:1이라 사실상 안 읽혔다 (YA) */
  font-size:10px; font-weight:800; letter-spacing:.18em; color:var(--brand-on-dk);
}
.itin-day-badge {
  font-size:9px; font-weight:700; letter-spacing:.08em;
  padding:2px 8px; color:#fff;
}
.itin-badge-arrive { background:#1a5566; }
.itin-badge-depart { background:#444; }
.itin-day-title {
  font-size:13px; font-weight:700; color:#e0e0e0;
  text-align:right; flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.itin-day-body {
  background:#fff;
}
.itin-slot {
  display:grid; grid-template-columns:44px 1fr; gap:0 14px;
  padding:10px 18px; border-bottom:1px solid var(--rule);
  align-items:baseline;
}
.itin-slot:last-child { border-bottom:none; }
.itin-slot-time {
  font-size:9px; font-weight:800; letter-spacing:.12em;
  flex-shrink:0; padding-top:2px;
}
.itin-slot-time.am  { color:#9A5B00; }   /* 2026-10-12 #B87000 3.92:1 → 5.4:1 */
.itin-slot-time.pm  { color:#0e6e7d; }
.itin-slot-time.eve { color:var(--brand); }
.itin-slot-content {
  font-size:13px; color:var(--t-body); line-height:1.65;
}
.itin-tip {
  padding:9px 18px;
  background:rgba(81,77,194,.045);
  border-left:3px solid var(--brand);
  font-size:12px; color:var(--t-mute);
  display:flex; align-items:flex-start; gap:6px; line-height:1.55;
}
.itin-tip-label {
  font-size:9px; font-weight:800; letter-spacing:.1em;
  color:var(--brand); flex-shrink:0; padding-top:2px; white-space:nowrap;
}

/* ── 결재 기대 효과 박스 ── */
.plan-value-box {
  display:flex; align-items:flex-start; gap:16px;
  background:var(--ink2); color:#fff;
  padding:24px 24px;
  margin-bottom:32px;
  border-radius:var(--r);
}
.plan-value-icon {
  flex-shrink:0; color:var(--brand); margin-top:2px;
}
.plan-value-label {
  font-size:10px; font-weight:800; letter-spacing:.13em;
  color:rgba(255,255,255,.5); text-transform:uppercase;
  margin:0 0 6px;
}
.plan-value-text {
  font-size:15px; font-weight:700; color:#fff;
  line-height:1.6; margin:0;
}

/* ── Step 3 CTA 버튼 행 ── */
.step3-cta-row {
  display:flex; gap:12px;
}
.btn-step3-pdf {
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 0; font-size:14px; font-weight:800; letter-spacing:.04em;
  background:var(--brand); color:#fff; border:none; cursor:pointer;
  border-radius:var(--r);
  transition:background .18s;
}
.btn-step3-pdf:hover { background:var(--brand-dk); }
.btn-step3-consult {
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 0; font-size:14px; font-weight:800; letter-spacing:.04em;
  background:transparent; color:var(--ink);
  border:1.5px solid var(--ink3); cursor:pointer;
  border-radius:var(--r);
  transition:border-color .18s, background .18s;
}
.btn-step3-consult:hover { background:var(--ink); color:#fff; border-color:var(--ink); }

/* ── 목적지 사진 스트립 ── */
.dest-strip-wrap {
  margin-bottom:36px;
}
.dest-strip-meta {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.dest-strip-lbl {
  font-size:10px; font-weight:800; letter-spacing:.14em;
  color:var(--t-sub); text-transform:uppercase;
}
.dest-strip-credit {
  font-size:10px; color:var(--t-sub);
}

.dest-photo-strip {
  display:flex; gap:8px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; /* Firefox */
  -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
  /* 스크롤이 좌우 끝에 닿았을 때 제스처가 상위 페이지로 새어나가 화면 전체가
     밀렸다가 안 돌아오는 문제 방지 */
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}
.dest-photo-strip::-webkit-scrollbar { display:none; }

.dest-photo-item {
  flex-shrink:0;
  width:280px; height:190px;
  scroll-snap-align:start;
  overflow:hidden; cursor:pointer;
  position:relative;
  border-radius:var(--r);
}
.dest-photo-item img {
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .35s ease;
  display:block;
}
.dest-photo-item:hover img { transform:scale(1.04); }
.dest-photo-item:first-child {
  width:400px; /* 첫 번째는 넓게 */
}

/* 목적지 위치 세계지도 */
.dest-map-wrap { margin-bottom:36px; }
.dest-map-frame {
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--rule);
  padding:0; margin-top:10px;
  height:340px;
}
.dest-map-img { position:absolute; display:block; opacity:.92; max-width:none; }
.dest-map-pin {
  /* 좌표(top/left)는 항상 점(dot)의 정중앙에 고정 — 라벨은 아래쪽에 별도로 절대배치되는
     장식 요소일 뿐 이 앵커 계산에 관여하지 않음. (과거엔 dot+라벨 전체 높이만큼
     translateY(-100%)로 밀어 올려서, 실제 점이 목적지 좌표보다 수십 px 북쪽에
     찍히는 오차가 있었음 — 예: 뉴욕이 오대호 부근에 찍히던 문제) */
  position:absolute; transform:translate(-50%,-50%);
  pointer-events:none; z-index:2;
}
.dest-map-pin-dot {
  width:11px; height:11px; border-radius:50%;
  background:var(--brand); border:2px solid #fff;
  box-shadow:0 0 0 3px rgba(81,77,194,.25);
  position:relative; display:block;
}
.dest-map-pin-dot::after {
  content:''; position:absolute; inset:-7px; border-radius:50%;
  border:1.5px solid var(--brand); opacity:.5;
  animation:mapPinPulse 1.8s ease-out infinite;
}
@keyframes mapPinPulse {
  0%   { transform:scale(.6); opacity:.6; }
  100% { transform:scale(2.2); opacity:0; }
}
.dest-map-pin-label {
  position:absolute; left:50%; top:100%; transform:translateX(-50%);
  margin-top:6px; padding:3px 8px;
  background:var(--ink); color:#fff;
  font-size:11px; font-weight:700; white-space:nowrap;
}
.dest-map-pin-origin { z-index:1; }
.dest-map-pin-origin .dest-map-pin-dot {
  background:#fff; border:2px solid var(--ink);
  box-shadow:0 0 0 3px rgba(13,13,13,.15);
}
.dest-map-pin-origin .dest-map-pin-dot::after { display:none; }
.dest-map-pin-origin .dest-map-pin-label { background:var(--t-sub); }
@media (max-width:768px) {
  .dest-map-frame { height:260px; }
}

/* 라이트박스 오버레이 */
.photo-lightbox {
  display:none; position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,.92);
  align-items:center; justify-content:center;
}
.photo-lightbox.open { display:flex; }
.photo-lightbox img {
  max-width:90vw; max-height:88vh;
  object-fit:contain;
}
.photo-lightbox-close {
  position:absolute; top:18px; right:22px;
  width:36px; height:36px; background:none; border:none;
  color:#fff; font-size:26px; cursor:pointer; line-height:1;
}
.photo-lightbox-caption {
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  font-size:11px; color:rgba(255,255,255,.55); white-space:nowrap;
}

/* ── 플랜 카드 커버 이미지 ── */
.plan-card-img {
  margin:-28px -24px 18px;  /* 카드 패딩 역방향으로 뚫기 */
  overflow:hidden;
  height:160px;
}
.plan-card-img img {
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .35s ease;
  display:block;
}
.plan-card:hover .plan-card-img img { transform:scale(1.04); }

/* ── 모바일 반응형 ── */
@media (max-width:768px) {
  .plan-cards { grid-template-columns:1fr; gap:14px; }
  .step3-cta-row { flex-direction:column; }
  .day-timeline-wrap { padding:20px 16px; }
  .plan-value-box { flex-direction:column; gap:10px; }
  .step3-section { padding:44px 0 52px; }
  .dest-photo-item { width:220px; height:150px; }
  .dest-photo-item:first-child { width:300px; }
  .plan-card-img { height:130px; }
  .itin-day-header { flex-wrap:wrap; gap:6px; }
  .itin-day-title  { text-align:left; font-size:12px; }
  .itin-slot       { padding:9px 14px; }
  .itin-tip        { padding:8px 14px; }
}

/* 🔴 견적 폼 단계 머리말 (XT) — 「몇 단계 중 어디이고 무엇을 채우면 되는지」.
   폼을 만나자마자 첫 칸부터 나오면 고객은 끝이 어딘지 모른 채 스크롤한다. */
.step-head { margin: 0 0 1.15rem; padding-bottom: .8rem; border-bottom: 1px solid #EFEDE8; }
.step-badge {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  color: var(--brand); background: #FEF0F2; padding: 3px 9px; border-radius: 999px;
}
.step-guide { margin: .5rem 0 0; font-size: 13.5px; line-height: 1.65; color: #5A5A5A; }
.step-guide b { color: #0D0D0D; font-weight: 700; }
@media (max-width: 480px) { .step-guide { font-size: 13px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   견적 계산기 — **가로로 길게, 위에서 아래로** (2026-09-14 대표 지시)

   대표: 「예상견적 박스가 우측으로 나와 있는데, 견적을 산출하는 순서가 위에서 아래로
   진행되게 새롭게 디자인해 달라. 가로로 길게 뺀 디자인으로.」

   ■ 무엇이 문제였나 (실측)
   `.estimate-grid`가 `1fr 1fr`이라 폼이 **546px에 갇혀** 세로로 1,924px이었고,
   오른쪽 절반은 결과 카드 아래가 **거의 비어 있었다.** 고객은 좁은 기둥 안에서
   길게 스크롤하고, 화면의 절반은 놀고 있었다.

   ■ 어떻게 바꿨나
   ① 결과를 **아래로** 내렸다 — 채우는 순서와 읽는 순서가 같아진다.
   ② 폼을 **3열 그리드**로. `.fld-row`는 `display:contents`로 풀어 자식이 그대로
      바깥 그리드의 칸이 되게 했다(마크업을 안 건드리고 3열에 섞기 위해서다).
   ③ 포함 항목 네 구역(항공·추가 선택·현지 비용·숙박)을 **2×2**로 폈다.
   ④ 1인당·총액을 **가로로** 나란히.

   ⚠ 폭이 좁아지면(1024px 미만) 전부 1열로 돌아간다 — 아래 미디어쿼리가 그 자리다.
   ⚠ `.estimate-step`은 `display:none`/`block`으로 단계를 여닫는다. 여기서 `display`를
     바꾸므로 **`.step-active`가 붙었을 때만** 그리드가 되게 한다(안 그러면 감춘
     2단계가 보인다).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ① 결과는 옆이 아니라 아래 */
.estimate-grid { grid-template-columns:1fr; gap:26px; }
.estimate-result { position:static; top:auto; }

/* ② 폼 — 가로를 쓴다 */
.estimate-grid .estimate-step[data-step="1"].step-active { display:grid; grid-template-columns:repeat(3,1fr); gap:16px 22px; align-items:start; }
.estimate-grid .estimate-step[data-step="2"].step-active { display:grid; grid-template-columns:repeat(2,1fr); gap:16px 22px; align-items:start; }
.estimate-grid .estimate-step > .fld-row { display:contents; }
.estimate-grid .estimate-step > .step-head,
.estimate-grid .estimate-step > .step2-dots,
.estimate-grid .estimate-step > .item-selector,
.estimate-grid .estimate-step > .step-actions,
.estimate-grid .estimate-step > .cta-guide-wrap,
.estimate-grid .estimate-step > .estimate-confirm { grid-column:1 / -1; }
/* 🔴 「여행 기간」 칸을 뺐더니(2026-09-14) 위 두 줄이 3칸씩 꽉 찬다.
   날짜 상자는 한 줄을 **통째로** 쓴다 — 2칸만 쓰면 옆에 빈 칸 하나가 남아 어긋나 보인다. */
.estimate-grid .estimate-step > .date-block { grid-column:1 / -1; }
/* 🔴 칸이 3열에 고르게 앉게 **순서**를 준다. 날짜 상자(2칸)가 가운데 끼면 그 옆이
   통째로 빈다 — 실제로 「여행 방식」 오른쪽에 빈 구멍이 생겼다. 날짜를 칸 뒤로 보내
   한 줄을 채운다. */
.estimate-grid .estimate-step > .step-head { order:-1; }
.estimate-grid .estimate-step > .date-block { order:1; }
.estimate-grid .estimate-step > .item-selector,
.estimate-grid .estimate-step > .cta-guide-wrap { order:2; }
.estimate-grid .estimate-step > .step-actions { order:3; }
.estimate-grid .estimate-step > .estimate-confirm { order:4; }
.estimate-grid .estimate-step > label { margin-bottom:0; }

/* ③ 포함 항목 — 네 구역을 2×2로 */
/* 3열로 (2026-09-14 대표 지시). 「현지 기타 비용」 제목을 빼면서 기관 방문·섭외와
   지방 출발이 **제목 없이 떠 있었다** — 이름 그대로 「추가 선택」이라 그쪽으로 합쳤다.
   구역이 넷에서 셋이 되어 한 줄에 나란히 들어간다(2×2 292px → 3열). */
.item-selector { display:grid; grid-template-columns:repeat(3,1fr); gap:14px 22px; align-items:start; }
.inc-sec { display:flex; flex-direction:column; gap:8px; min-width:0; }
.inc-sec > .inc-sec-lbl { margin:0; }

/* ⑤ 세 영역의 **선택 박스를 같은 자에 태운다** (2026-09-15 대표 지시)
   대표: 「각 영역에서 박스들 크기가 형태별로 유사하게 맞춰지면 좋겠고, 3가지 영역
          안에서 박스별로 좌우 라인이 맞게 떨어지면 좋겠다.」

   ■ 고치기 전 실측 (폭 1440·1280, 브라우저로 잼)
     · 칩 폭이 **49~126px로 흩어져** 있었다 — 호텔·식사·차량·관광·혼합 49 · 가이드 59 ·
       3성급 56 · 4성급 57 · 1인 1실 63 · 2인 1실 64 · 이코노미·비즈니스 69 · 지방 출발 126.
     · 그래서 **숙박의 두 줄이 오른쪽 끝에서 7px 어긋났다**(1156 vs 1163).
     · 줄이 시작하는 x도 갈렸다 — 항공·숙박은 라벨이 **옆**에 있어 칩이 70px 들여쓰기되고
       (`.grade-label`의 min-width 58 + gap 12), 추가 선택은 라벨이 없어 0px에서 시작했다.
       **세 영역의 왼쪽 라인이 안 맞던 진짜 원인이 이것이다.**

   ■ 어떻게 맞췄나 — **3열 고정 그리드 하나로 통일**
     칩과 필을 전부 같은 3열에 태운다. 폭이 (영역폭 − 간격)/3으로 **전부 같아지고**,
     줄이 몇 개든 좌우 라인이 저절로 떨어진다.
   ⚠ 폭을 `min-width`로 하나씩 맞추는 길도 있었지만 **쓰지 않았다.** 글자가 하나
     길어지는 순간 그 칩만 다시 튀어나와 같은 일이 반복된다. 자를 하나 두는 쪽이 맞다.
   ⚠ 라벨(「좌석 등급」·「호텔 등급」·「객실 구성」)을 줄 **위로** 올린다. 옆에 두면
     그 줄만 70px 밀려 3열 밖으로 나간다. **글자는 그대로다 — 자리만 옮겼다.**
   ⚠ 이 규칙은 `.item-selector` **안으로만** 좁힌다. 세어 보니 `.inc-vip-row`만
     `admin-quote.html`도 쓰고 나머지는 전부 `index.html` 전용이다. 어제(`4231502`)
     `styles.css` 규칙이 담당자 화면까지 먹은 일이 있어 이번에는 **먼저 셌다.** */
.item-selector .inc-chips,
.item-selector .grade-pills {
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  margin-top:0; margin-bottom:0;
}
/* 긴 글자 하나만 있는 줄은 3등분하지 않고 한 줄을 쓴다(「지방 출발(국내 수송)」).
   1/3 칸에 넣으면 글자가 두 줄로 꺾여 그 줄만 혼자 높아진다. */
.item-selector .inc-chips > .inc-chip:only-child { grid-column:1 / -1; }
/* 폭이 같아졌으니 글자를 가운데로 — 왼쪽에 붙어 있으면 칸이 빈 것처럼 보인다 */
.item-selector .inc-chip,
.item-selector .grade-pill {
  justify-content:center; text-align:center;
  padding-left:6px; padding-right:6px;
}
/* 라벨을 줄 위로 — 이 한 줄이 왼쪽 라인을 맞춘다 */
.item-selector .inc-grade-row {
  display:flex; flex-direction:column; align-items:stretch; gap:6px;
  padding:0; border-top:none;
}
.item-selector .inc-grade-row > .grade-label { min-width:0; }
/* 「항공 + 유류할증료」·「기관 방문·섭외」는 한 줄을 통째로 쓴다(3열에 안 태운다) */
.item-selector .inc-fixed-row { margin-top:0; }
.item-selector .inc-vip-row { margin-top:0; }

/* ⑥ 영역 제목(「항공」·「추가 선택」·「숙박」)을 **머리로 세운다** (2026-09-15 대표 지시)
   고치기 전: 11px · 회색(`--t-sub`) · 자간 .06em. 게다가 3열이 되면서 제목 셋이 전부
   각 영역의 `:first-child`가 되어 `border-top:none` 규칙에 걸렸다 — **위 선까지
   사라져** 있었다. 제목이 아니라 그냥 작은 회색 글자였던 것이다.
   → 12.5px · 먹색 · 800 · **위에 2px 먹선**. 선이 영역의 시작을 긋는다.
   ⚠ 자간은 .02em으로 **줄인다.** 한글은 벌리면 덩어리가 흩어져 오히려 안 읽힌다
     (YA에서 9px→11px과 함께 이미 확인한 것이다).
   ⚠ **레드를 쓰지 않는다** — 레드는 CTA·아이브로우·핵심 수치 3곳뿐이라는 원칙(방향 4).
     제목 셋을 레드로 칠하면 바로 아래 「견적 계산」 버튼이 묻힌다. */
.item-selector .inc-sec > .inc-sec-lbl,
.item-selector .inc-sec > .inc-sec-lbl:first-child {
  font-size:12.5px; font-weight:800; color:var(--t-head);
  letter-spacing:.02em; padding:9px 0 2px;
  border-top:2px solid var(--ink); margin:0;
}

/* ④ 1인당 · 총액을 가로로 */
.result-totals { flex-direction:row; gap:14px; }
.result-totals > .total-box { flex:1; min-width:0; }

@media (max-width:1024px) {
  .estimate-grid .estimate-step[data-step="1"].step-active,
  .estimate-grid .estimate-step[data-step="2"].step-active { grid-template-columns:1fr; }
  .estimate-grid .estimate-step > .date-block { grid-column:auto; }
  .item-selector { grid-template-columns:1fr 1fr; }
}
@media (max-width:720px) {
  .item-selector { grid-template-columns:1fr; }
  .result-totals { flex-direction:column; }
  /* (빈 결과 안내는 아래 전용 블록이 다룬다) */
}


/* 조건 칩(단체할인·성수기)을 포함 항목 칩과 **같은 높이**로 (2026-09-14 대표 지시).
   전에는 padding 3px·글자 10.5px·테두리 없음이라 옆의 흰 칩(4px·11px·1px 테두리)보다
   낮아서 한 줄에 섞였을 때 들쭉날쭉했다. 세 값을 모두 맞춰야 한다. */
/* 🔴 높이를 맞추려면 padding·글자만으로는 안 된다.
   포함 항목 칩들은 `.inc-tags`(flex)의 자식이라 **가장 높은 칩에 맞춰 늘어난다**.
   조건 칩은 `.cond-tags-row` 안에 따로 있어서 그 늘어남을 못 받아 낮게 머물렀다.
   → 그 줄도 **같이 늘어나게** 하고, 칩 안에서 글자를 가운데 둔다. */

.cond-tag { padding:4px 11px; font-size:12px; border:1px solid transparent;
            display:inline-flex; align-items:center; }
.cond-tags-row { margin-top:0; align-items:stretch; }


/* ═══════════════════════════════════════════════════════════════════════════
   「예상 견적」이 아직 없을 때 — 다시 짰다 (2026-09-14 대표 지시)

   ■ 무엇이 문제였나
   아이콘·문구·3단계 상자가 **가로로 흩어져** 있었다. 왼쪽은 크게 비고 상자만
   오른쪽에 떠 있어, 「무엇을 하면 되는지」를 말하는 자리인데 그 말이 안 읽혔다.

   ■ 어떻게 바꿨나
   가운데로 모아 **아이콘 → 한 문장 → 세 걸음** 순서로 읽히게 했다.
   세 걸음은 **같은 폭 카드 셋**으로 나란히 둔다 — 순서가 있는 것은 나란히 놓아야
   순서로 읽힌다(세로로 쌓으면 길어지고, 흩어 놓으면 순서가 사라진다).
   ⚠ 좁은 화면에서는 1열로 돌아간다. 셋을 유지하면 한 칸이 100px대가 되어 글자가 끊긴다.
   ═══════════════════════════════════════════════════════════════════════════ */
.no-estimate-msg {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:15px; padding:36px 20px 30px;
}
.no-estimate-msg .no-est-icon { margin:0; width:54px; height:54px; }
.no-estimate-msg .no-est-lead {
  margin:0; font-size:16px; font-weight:800; letter-spacing:-.01em;
  color:var(--t-head); line-height:1.55;
}
.no-estimate-msg .no-est-steps {
  margin:4px 0 0; padding:0; width:100%; max-width:760px;
  background:none; border:0; text-align:left;
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.no-estimate-msg .no-est-steps li {
  display:flex; align-items:center; gap:9px; min-height:54px;
  padding:12px 14px; background:var(--bg-off);
  border:1px solid var(--rule); border-radius:var(--r);
  font-size:12.5px; font-weight:600; color:var(--t-head); line-height:1.5;
}
@media (max-width:760px) {
  .no-estimate-msg .no-est-steps { grid-template-columns:1fr; }
}

/* ══ 다듬기 · 움직임 (2026-10-01 대표 요청 「예쁘게 · AI가 만든 것 같지 않게 · 효과는 적절히」) ══
   원칙 — 움직임은 **한 번, 짧게, 같은 곡선(--ease)으로.** 꾸밈용 반짝임·떠다니는 그림자·
   보라 그라데이션 덮개는 쓰지 않는다(그게 「AI가 만든 화면」으로 읽히는 첫째 이유다).
   같은 날 걷은 것: 사진 타일 들림 · 사진 위 보라 덮개 · 후기 카드 들림 · 확대 1.08 → 1.045.
   `prefers-reduced-motion`이면 전부 끈다(맨 아래). */

/* 머리줄 — 히어로 위에서는 **경계선 없이** 히어로와 한 면으로 이어지다가, 내려가면 선이 생겨 면이 갈린다.
   ⚠ 바탕을 투명하게 하지 않는다 — 처음엔 그렇게 했다가 `check_contrast.py`가 메뉴 글자 8개를
     「흰 바탕 위 흰 글자」로 짚었다. 화면에선 히어로가 뒤에 있어 읽히지만, 그 판단은 스크롤 위치에
     기대는 것이라 자가 못 믿는다. 히어로 바탕(#0D0D0D)과 머리줄 바탕이 같은 색이라 **선만 숨겨도**
     보이는 것은 같다.
   ⚠ 히어로가 있는 화면(index)에만 — packages.html에는 `.scrolled`를 붙이는 스크립트가 없다. */
.site-header { transition:border-color var(--dur-md) var(--ease-io), background-color var(--dur-md) var(--ease-io); }
body:has(.hero) .site-header:not(.scrolled):not(.nav-mobile-open) { border-bottom-color:transparent; }

/* 히어로 — 처음 열 때 한 번, 위에서부터 차례로 올라온다(배지 → 제목 → 설명 → 버튼 → 숫자) */
@keyframes heroIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.hero-badge, .hero-center h1, .hero-sub, .hero-actions, .hero-stats { animation:heroIn .9s var(--ease) both; }
.hero-badge   { animation-delay:.05s; }
.hero-center h1 { animation-delay:.15s; }
.hero-sub     { animation-delay:.3s; }
.hero-actions { animation-delay:.42s; }
.hero-stats   { animation-delay:.6s; }

/* 문의 폼 — 「이름」과 「*」가 **두 줄로 갈려** 별표가 혼자 아랫줄에 떠 있었다(label이 세로 flex라
   글자·별표·입력칸이 각각 한 줄씩 됐다). 글자와 별표는 한 줄, 입력칸만 아랫줄로. */
.contact-form label { flex-direction:row; flex-wrap:wrap; align-items:baseline; column-gap:3px; row-gap:7px; }
.contact-form label > input, .contact-form label > textarea { flex-basis:100%; width:100%; }
.contact-form input:focus,
.contact-form textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(81,77,194,.12); }

/* 키보드 초점 — `.button`이 outline:none이라 Tab으로 오면 어디 있는지 안 보였다 */
.button:focus-visible { outline:2px solid var(--brand-on-dk); outline-offset:3px; }
.section-estimate .button:focus-visible, .section-portfolio .button:focus-visible,
.contact-form .button:focus-visible { outline-color:var(--brand); }
.gallery-card:focus-visible, .pf-card:focus-visible { outline:2px solid var(--brand-on-dk); outline-offset:2px; }

@media (prefers-reduced-motion: reduce) {
  .hero-badge, .hero-center h1, .hero-sub, .hero-actions, .hero-stats { animation:none; }
  .reveal { opacity:1; transform:none; transition:none; }
  .gallery-card img, .pf-img img, .gallery-overlay h3::after { transition:none; }
  .gallery-card:hover img, .pf-card:hover .pf-img img { transform:none; }
  .pf-card:hover, .button:hover, .button:active { transform:none; }
}

/* ══ 고객 첫 화면 · 견적 폼 · 푸터 — 눈에 보이는 개편 (2026-10-01 대표 「고객이 보는 곳은 달라진 게 없다」) ══
   앞 블록(다듬기 · 움직임)은 반응만 고쳐서 **고객 눈엔 그대로였다.** 여기서는 모양을 바꾼다.
   방향은 같다 — 각진 에디토리얼 · 먹색 + 보라(흰 면) / 민트(어두운 면) · 장식용 그라데이션 없음. */

/* ① 히어로 사진 구성 — 넓은 화면: 글자 왼쪽 · 사진 오른쪽 */
.hero-visual { position:relative; display:grid; gap:12px; animation:heroIn 1s var(--ease) .32s both; }
.hero-visual figure { position:relative; margin:0; overflow:hidden; background:var(--ink2); }
.hero-visual img { display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.92);
  animation:hvDrift 22s ease-in-out infinite alternate; }
.hero-visual .hv-a img { animation-delay:-7s; }
.hero-visual .hv-b img { animation-delay:-14s; }
@keyframes hvDrift { from { transform:scale(1); } to { transform:scale(1.07); } }
/* 도시 이름 — 사진 아래쪽을 어둡게 깔고 그 위에 흰 글자(사진이 밝아도 읽힌다) */
.hero-visual figcaption {
  position:absolute; left:0; right:0; bottom:0; padding:28px 14px 11px;
  background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  color:#fff; font-size:12.5px; font-weight:700;
}
@media (min-width:1025px) {
  /* ⚠ 사진(높이 500px)이 글자 줄 넷에 걸치면 남는 높이가 **글자 줄 사이로** 나뉘어 제목·설명·버튼이
     벌어진다 — 위아래에 빈 줄(1fr)을 두고 글자는 가운데 auto 줄 넷에 몰아 둔다. */
  .hero-center {
    display:grid; grid-template-columns:minmax(0,1fr) 420px;
    grid-template-rows:1fr auto auto auto auto 1fr;
    column-gap:64px; row-gap:28px;
  }
  .hero-center > * { grid-column:1; }
  .hero-badge { grid-row:2; } .hero-center h1 { grid-row:3; } .hero-sub { grid-row:4; } .hero-actions { grid-row:5; }
  .hero-badge { justify-self:start; }
  .hero-center h1 { font-size:clamp(40px,4.6vw,64px); }
  .hero-visual {
    grid-column:2; grid-row:1 / -1; align-self:center;
    grid-template-columns:1.12fr 1fr; grid-template-rows:1fr 1fr;
    height:min(500px, 58vh);
  }
  .hero-visual .hv-tall { grid-row:1 / 3; }
  /* 에디토리얼 틀 — 큰 사진 뒤로 민트 선 하나가 비껴 선다(장식은 이것 하나뿐) */
  .hero-visual::before {
    content:''; position:absolute; top:-16px; left:-16px; width:56%; height:72%;
    border:1px solid rgba(99,214,212,.4); pointer-events:none; z-index:-1;
  }
}
/* 좁은 화면: 버튼 아래 세 장을 한 줄로 */
@media (max-width:1024px) {
  .hero-visual { grid-template-columns:repeat(3,1fr); height:clamp(120px, 26vw, 220px); }
  .hero-visual figcaption { font-size:11.5px; padding:20px 9px 7px; }
}

/* ② 견적 폼 — 「관리 도구 같다」의 원인 셋을 걷는다
   · 고른 칸이 **먹색 덩어리**로 칠해졌다 → 보라 테두리 + 옅은 보라 바탕 + 보라 글자(7:1)
   · 안쪽 상자가 회색 바탕이라 폼 전체가 칙칙했다 → 흰 바탕 + 실선
   · 폼 머리에 아무 표시가 없었다 → 위에 보라 3px 띠(이 폼이 페이지의 주인공이다) */
.estimate-form { border-top:3px solid var(--brand); box-shadow:var(--sh-md); }
.date-block, .item-selector { background:var(--bg); border-color:var(--rule-md); }
.inc-chip:has(input:checked), .grade-pill:has(input:checked) {
  border-color:var(--brand); background:#F1F0FB; color:var(--brand-dk);
}
.inc-chip:hover, .grade-pill:hover { border-color:var(--brand); color:var(--brand-dk); }
.inc-fixed-badge { background:#F1F0FB; color:var(--brand-dk); }
.date-result-bar { background:var(--bg-off); border-color:transparent; }

/* ③ 푸터 — 글자 「비즈페이지」 대신 BI 로고 · 바로가기 열을 더해 세 칸 */
.footer-logo { display:block; height:28px; width:auto; }
/* 열 머리(MENU·CONTACT) 10px → 12px — 고객 화면 검사의 작은 글자 문턱 위로. CONTACT는 원래부터 10px였다 */
.footer-col-label { font-size:12px; }
.footer-col-nav { row-gap:0; }
.footer-brand { margin-bottom:6px; }
.footer-grid { grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr) auto; }
.footer-col-nav { display:flex; flex-direction:column; align-items:flex-start; }
.footer-col-nav a {
  font-size:13px; color:rgba(255,255,255,.66); line-height:1.6; padding:12px 0;  /* 누를 높이 44px 이상 */
  text-decoration:underline 1px transparent; text-underline-offset:5px;
  transition:color var(--dur), text-decoration-color var(--dur);
}
.footer-col-nav a:hover { color:#fff; text-decoration-color:var(--brand-on-dk); }
@media (max-width:760px) {
  .footer-grid { grid-template-columns:1fr; }
  .footer-col-nav { flex-direction:row; flex-wrap:wrap; column-gap:18px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual, .hero-visual img { animation:none; }
}

/* ══ 밝은 톤 (2026-10-01 대표 지시 「홈페이지 전체를 좀 더 밝은 톤으로」) ══════════════════════
   어두운 면이던 여섯 곳(머리줄 · 히어로 · 목적지 · 후기 · 문의 · 푸터)을 밝은 면으로 돌린다.
   🔴 **면이 바뀌면 강조색도 바뀐다** — 브랜드 규칙(맨 위 토큰 주석): 흰 바탕 = 보라, 어두운 면 = 민트.
     민트는 흰 바탕에서 1.8:1로 사라지므로 이 구역들의 민트 글자·선은 **전부 보라로** 옮긴다.
   ⚠ 위쪽 규칙은 지우지 않고 여기서 덮는다 — 되돌리려면 이 블록과 index.html 로고 두 곳(biz-logo.svg ↔
     biz-logo-white.svg), script.js 노선도 색 주석만 보면 된다.
   ⚠ 사진 위 글자(목적지 카드·히어로 사진 이름표)는 **사진이 어두운 면**이라 그대로 흰 글자다. */

/* 머리줄 — 흰 면 + 살짝 비치는 유리 */
.site-header { background:rgba(255,255,255,.92); border-bottom-color:var(--rule); }
body:has(.hero) .site-header:not(.scrolled):not(.nav-mobile-open) { background:rgba(255,255,255,.92); }
.nav-links a { color:var(--t-mute); }
.nav-links a:hover { color:var(--t-head); text-decoration-color:var(--brand); }
.nav-links a.nav-pkg { color:var(--t-head); border-color:var(--rule-md); }
.nav-links a.nav-pkg:hover { color:var(--brand-dk); border-color:var(--brand); }
.nav-toggle span { background:var(--t-head); }
@media (max-width:1024px) {
  .nav-mobile-open .nav-links { background:var(--bg); border-bottom-color:var(--rule); }
  .nav-mobile-open .nav-links a { color:var(--t-head); }
}

/* 히어로 — **해 질 녘** (2026-10-01 두 번째 지시 「너무 밝아졌다 · 어둠과 밝음 중간 어딘가」)
   먹색 밤(33c6ec1)과 흰 낮(830fc53) 사이 — 깊은 남보라에서 조금 밝은 보라 회색으로 내려오고,
   바닥에 지평선 같은 민트 빛. 면은 **어두운 쪽**이라 강조는 민트, 글자는 흰색(브랜드 규칙).
   ⚠ `background-color`(#1C1A45)가 글자 대비의 기준이다 — check_contrast는 그라데이션이 아니라 이 값을 읽는다.
   ⚠ 노선도 색은 --map-line · --map-dot으로 여기서 정한다(script.js가 읽는다). */
/* 🔄 같은 날 세 번째 — 「살짝 옛날 느낌」(대표). 원인은 **넓은 면을 고르게 채운 중간 채도 보라**였다
   (#2A2852→#4B4886 160°). 후보 셋(미드나이트 네이비 · 딥 인디고 · 슬레이트 차콜)을 실제 화면에 입혀
   보여 드렸고 **딥 인디고(B)**로 정했다: 바탕은 한 단계 깊게, 보라 빛은 사진 뒤에만 번진다. */
.hero { background:#1C1A45 linear-gradient(135deg, #17153A 0%, #221F55 60%, #1B1946 100%); }
.hero-gradient {
  background:
    radial-gradient(ellipse 55% 70% at 85% 30%, rgba(110,104,235,.55) 0%, transparent 68%),
    radial-gradient(ellipse 50% 55% at 5% 100%, rgba(99,214,212,.24) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 40% 0%, rgba(255,255,255,.05) 0%, transparent 70%);
}
.hero::after { opacity:.04; }
.hero-canvas { opacity:.75; --map-line:rgba(255,255,255,.13); --map-dot:99,214,212; }
/* 폰에선 노선 점이 설명 글자 위에 겹친다 — 옅게 */
@media (max-width:1024px) { .hero-canvas { opacity:.4; } }
.hero-bg-text { color:rgba(255,255,255,.04); }
.hero-badge { background:rgba(99,214,212,.10); border-color:rgba(99,214,212,.45); color:var(--brand-on-dk); }
.hero-center h1 { color:var(--white); }
.hero-center h1 em { color:var(--brand-on-dk); }
.hero-sub { color:rgba(255,255,255,.82); }
.hero .button-outline { color:var(--white); border-color:rgba(255,255,255,.55); }
.hero .button-outline:hover { background:var(--white); color:var(--ink); border-color:var(--white); }
.hero .button:focus-visible { outline-color:var(--brand-on-dk); }
/* 보라 버튼이 보라 하늘에 묻혔다 — 이 면에서만 흰 버튼 · 보라 글자(7:1). 누르면 민트. */
.hero .button-primary { background:var(--white); color:var(--brand-dk); border-color:var(--white); }
.hero .button-primary:hover { background:var(--brand-on-dk); color:var(--ink); border-color:var(--brand-on-dk); }
.hero-visual::before { border-color:rgba(99,214,212,.45); }
.hero-visual figure { background:#17153A; box-shadow:0 12px 32px rgba(10,10,40,.35); }
/* 티커는 히어로의 바닥 색으로 이어 — 그 아래 숫자 띠부터 흰 면이 시작된다 */
.dest-ticker-wrap { background:#17153A; border-top-color:rgba(255,255,255,.1); border-bottom:1px solid var(--rule); }
.dest-ticker span:not(.t-sep) { color:rgba(255,255,255,.72); }
.t-sep { background:rgba(99,214,212,.5); }
.hero-stats { background:var(--bg); border-top-color:var(--rule); }
.stat-item { border-right-color:var(--rule); }
.stat-item:hover { background:var(--bg-off); }
.stat-num-hero { color:var(--t-head); }
.hero-stats .stat-unit { color:var(--brand); }
.stat-lbl-hero { color:var(--t-mute); }
.hero-bg-text { display:none; }  /* 「GLOBAL」 워터마크 — 숫자 띠가 흰 면이 되며 위아래로 갈려 반쪽만 보였다 */

/* 목적지 — 흰 면 */
.section-gallery { background:var(--bg); }
.gal-hd-our { color:var(--brand); }
.gal-hd-title { color:var(--t-head); }
.gal-hd-line { background:var(--rule-md); }
.gal-hd-sub { color:var(--t-mute); }
.dest-recommender { background:var(--bg-off); border-color:var(--rule); }
.dest-rec-lbl { color:var(--t-head); }
#destIndustry {
  color-scheme:light; color:var(--t-head); border-color:var(--rule-md);
  background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230D0D0D' stroke-opacity='.55' stroke-width='1.4' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;
}
#destIndustry option   { background:var(--bg); color:var(--t-head); }
#destIndustry optgroup { background:var(--bg-off); color:var(--brand-dk); }
#destIndustry option:disabled { color:var(--t-sub); }
.dest-rec-result { color:var(--t-body); }
.dest-rec-result.show { background:rgba(81,77,194,.06); border-color:rgba(81,77,194,.25); border-left-color:var(--brand); }
.dest-rec-result strong { color:var(--t-head); }
.dest-rec-tag { color:var(--t-mute); }
.gal-filter-chip { color:var(--t-mute); border-color:var(--rule-md); }
.gal-filter-chip:hover { color:var(--t-head); border-color:var(--t-head); }
.gallery-card { border-color:transparent; }
/* 사진을 어두운 면에 맞춰 눌러 뒀다(밝기 .85 + 위까지 덮는 그늘) — 밝은 면에선 무겁다. 사진은 밝히고 그늘은 글자 자리(아래)에만 */
.gallery-card img { filter:saturate(1) brightness(.97); }
.gallery-card:hover img { filter:saturate(1.05) brightness(.9); }
.gallery-overlay { background:linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.18) 45%, transparent 70%); }
.gallery-card:hover .gallery-overlay { background:linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.28) 50%, transparent 75%); }

/* 후기 — 옅은 회백 면 + 흰 카드 */
.section-testimonials { background:var(--bg-off); }
.section-testimonials .section-title-center { color:var(--t-head); }
.section-testimonials .section-sub-center { color:var(--t-mute); }
.testi-eyebrow-line { background:var(--rule-md); }
.testi-eyebrow-label { color:var(--brand); }
.testi-card { background:var(--bg); border-color:var(--rule); }
.testi-card:hover { background:var(--bg); border-color:rgba(81,77,194,.35); }
.testi-card-highlight { background:#F7F6FD; border-color:rgba(81,77,194,.22); }
.testi-quote { opacity:1; color:rgba(81,77,194,.45); }
.testi-text { color:var(--t-body); }
.testi-star { color:var(--brand); }
.testi-name { color:var(--t-head); }
.testi-org { color:var(--t-mute); }
.trust-strip { background:var(--bg); border-color:var(--rule); }
.trust-item { border-right-color:var(--rule); }
.trust-item:hover { background:var(--bg-off); }
.trust-num { color:var(--t-head); }
.trust-unit { color:var(--brand); }
.trust-lbl { color:var(--t-mute); }

/* 문의 — 옅은 보라빛 면 + 흰 폼 */
.section-contact { background:#F3F2FB; }
.section-contact .eyebrow { color:var(--brand); }
.section-contact h2 { color:var(--t-head); }
.contact-grid > div > p { color:var(--t-mute); }
.contact-details p { color:var(--t-body); }
.contact-details strong { color:var(--t-head); }
.map-wrap { border-color:var(--rule-md); }
.contact-form { box-shadow:var(--sh-md); }
.contact-form .button:focus-visible { outline-color:var(--brand); }

/* 푸터 — 회백 면 */
.site-footer { background:#F1F1EE; border-top-color:var(--rule); }
.footer-grid { border-bottom-color:var(--rule-md); }
.footer-tagline { color:var(--t-mute); }
.footer-info { color:var(--t-mute); }
.footer-col-label { color:var(--t-mute); }
.footer-col-contact p { color:var(--t-mute); }
.footer-col-nav a { color:var(--t-mute); }
.footer-col-nav a:hover { color:var(--t-head); text-decoration-color:var(--brand); }
.footer-bottom { color:var(--t-mute); }  /* --t-sub는 이 회백 면에서 3.9:1 */

/* ══ 히어로 움직임 더하기 (2026-10-02 대표 「메인 부분에 동적인 효과 살짝 더」) ═════════════════════
   원칙은 위 「다듬기 · 움직임」과 같다 — 한 번, 짧게, 같은 곡선. 반짝임·떠다니는 그림자는 안 쓴다.
   ① 제목 강조줄 밑에 민트 선이 한 번 그어진다   ② 사진 세 장이 한 장씩 차례로 올라온다
   ③ 사진이 마우스를 따라 최대 8px(큰 사진)·5px(작은 사진) 움직이고, 민트 틀은 반대로 — 깊이감
   ④ 숫자 세어 올리기는 원래 있던 script.js 「Hero Stats 카운트업」 그대로(움직임 줄이기면 안 센다)
   ⚠ 시차는 translate 속성으로 준다 — 등장 애니메이션이 transform을 쓰므로 둘이 겹치지 않는다. */
.hero-center h1 em { position:relative; display:inline-block; }
.hero-center h1 em::after {
  content:""; position:absolute; left:0; right:0; bottom:-.06em; height:.07em; min-height:3px;
  background:var(--brand-on-dk); opacity:.55; transform:scaleX(0); transform-origin:left center;
  animation:heroLine .9s var(--ease) 1.05s forwards;
}
@keyframes heroLine { to { transform:scaleX(1); } }
.hero-visual { animation:none; }
.hero-visual figure { animation:heroIn .9s var(--ease) both; translate:calc(var(--hx,0) * -8px) calc(var(--hy,0) * -8px); transition:translate .6s var(--ease); }
.hero-visual .hv-tall { animation-delay:.3s; }
.hero-visual .hv-a    { animation-delay:.45s; translate:calc(var(--hx,0) * -5px) calc(var(--hy,0) * -5px); }
.hero-visual .hv-b    { animation-delay:.6s;  translate:calc(var(--hx,0) * -5px) calc(var(--hy,0) * -5px); }
@media (min-width:1025px) {
  .hero-visual::before { animation:heroIn 1s var(--ease) .75s both; translate:calc(var(--hx,0) * 6px) calc(var(--hy,0) * 6px); transition:translate .6s var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-center h1 em::after { animation:none; transform:scaleX(1); }
  .hero-visual figure, .hero-visual::before { animation:none; translate:none; transition:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   A안 디자인 시스템 — 「견적서 같은 화면」 (2026-10-06 대표 선택)

   방향: 흰 종이 · 먹색 글자 · **보라는 금액과 행동에만**(강조색 하나). 민트는 로고 안에만 남는다.
   근거: 이 화면의 손님은 숫자를 받아 **결재를 올리는 담당자**다. 화면이 우리가 보내는 견적서와
        같은 언어로 말하면 그대로 믿고 옮겨 적는다.

   🔴 진단(2026-10-06, Playwright 1440·360px 실측)에서 고치려는 것
     · 글자 요소의 82%가 15px 미만(가장 많은 크기 12px · 150곳) → 본문 16px · 최소 13px(태그·각주만)
     · 같은 급 제목(H2)이 40·48·52·64·80px 다섯 가지 → 한 단계(--fs-h2)
     · 1인당 금액이 **검정 바탕 위 보라 2.95:1** → 옅은 보라 바탕 위 짙은 보라 7.9:1
     · 옵션을 바꾸는 자리에서 금액이 화면 밖(폰 약 1,000px 아래) → 하단 요약 막대(quote_bar.js)
     · 밝은 바탕 5종·회색 글자 4종·그림자 4종 → 바탕 2 · 글자 3 · 그림자 2

   ⚠ **위쪽 규칙은 지우지 않고 여기서 덮는다**(앞의 「밝은 톤」 블록과 같은 방식).
     되돌리려면 이 블록과 index.html의 quote_bar.js 한 줄, 소제목 문구만 보면 된다.
   ⚠ 결과 카드는 **아래에 둔다** — 2026-09-14 대표 지시(「위에서 아래로 진행되게」)라 오른쪽으로
     옮기지 않았다. 금액이 안 보이는 문제는 하단 요약 막대로 푼다.
   ⚠ 1인당 금액은 총액보다 **작지 않게** 둔다(VX · test_vX가 지킨다). 둘 다 --fs-amt.
   ⚠ packages.html도 이 파일을 싣는다 — 토큰 값이 바뀌면 그 화면 색도 함께 따라간다(규칙은 안 닿는다).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─ 간격: 4px 단위 */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;

  /* ─ 글자 크기 단계 — 본문 16px. 13·14px는 라벨·태그·각주 전용(줄글에 쓰지 않는다) */
  --fs-cap:13px;   /* 태그 · 각주 · 메타 */
  --fs-sm:14px;    /* 폼 라벨 · 보조 설명 */
  --fs-body:16px;  /* 본문 · 버튼 · 입력칸(16px 미만이면 아이폰이 입력할 때 화면을 확대한다) */
  --fs-lead:18px;  /* 섹션 첫 문장 */
  --fs-h4:18px;    /* 카드 제목 */
  --fs-h3:22px;    /* 묶음 제목 */
  --fs-h2:clamp(28px, 3vw, 38px);   /* 섹션 제목 — 한 단계 */
  --fs-h1:clamp(34px, 4.2vw, 54px); /* 화면 제목 */
  --fs-amt:clamp(28px, 3.2vw, 38px);/* 금액 */
  --lh-body:1.7;
  --lh-head:1.3;
  /* 굵기 — 본문 400 · 라벨/버튼 600 · 제목 700 · **16px 이하의 작은 제목 800**
     (작은 제목은 크기로 못 서니 굵기로 선다 — 포함 항목 · 체크리스트 제목, 2026-09-15 대표 지시를 잇는다) */

  /* ─ 색 — 역할 이름 */
  --c-text:#333132;     /* BI 먹색 — 제목 · 본문 (흰 바탕 12.9:1) */
  --c-text-2:#58565A;   /* 보조 글자 (흰 7.3 · 회백 6.7) */
  --c-text-3:#6B696D;   /* 힌트 · 각주 (흰 5.4 · 회백 5.0) */
  --c-line:#E6E4DF;     /* 구분선 · 카드 테두리(장식) */
  --c-line-2:#8C8A86;   /* 입력칸 · 고르는 버튼 테두리 — 조작 요소라 3:1 이상(흰 3.5 · 회백 3.2) */
  --c-paper:#FFFFFF;    /* 바탕 1 */
  --c-paper-2:#F7F6F3;  /* 바탕 2 — 섹션 교대 · 안쪽 상자 */
  --c-accent:#514DC2;   /* 🔴 유일한 강조색 — 금액 · 주 버튼 · 고른 상태 */
  --c-accent-dk:#3E3AA6;/* 누른 상태 · 옅은 보라 위 글자(7.9:1) */
  --c-accent-weak:#F1F0FB; /* 고른 상태 바탕 · 1인당 금액 상자 */
  --c-hero:#2E2A7A;     /* 첫 화면 바탕 대표색 — 인디고→보라 그라데이션의 중간(어두운 면 · 흰 글자 · 강조는 민트) */
  --c-danger:#B42318;   /* 신호 — 필수 표시 · 오류 (강조색이 아니다) */

  /* ─ 모서리 · 그림자 — 두 단계씩 */
  --r-sm:4px;      /* 버튼 · 입력칸 · 고르는 버튼 */
  --r-md:8px;      /* 카드 · 상자 · 사진 */
  --r-pill:999px;  /* 태그(누르지 않는 것)만 */
  --sh-1:0 1px 2px rgba(20,19,24,.06), 0 1px 1px rgba(20,19,24,.04);  /* 카드 */
  --sh-2:0 12px 32px rgba(20,19,24,.10);                               /* 떠 있는 것(요약 막대 · 떠 있는 버튼) */

  /* ─ 옛 토큰을 새 역할에 잇는다 — 위쪽 규칙 수백 곳이 이 이름을 쓴다 */
  --ink:#333132; --ink2:#333132; --ink3:#4A484C;
  --t-head:var(--c-text); --t-body:var(--c-text); --t-mute:var(--c-text-2); --t-sub:var(--c-text-3);
  --bg-off:var(--c-paper-2); --rule:var(--c-line); --rule-md:#D6D4CF;
  --r:var(--r-sm);
  --sh-sm:var(--sh-1); --sh-md:var(--sh-1); --sh-lg:var(--sh-2);
  --sec-y:96px;
}
@media (max-width:1024px) { :root { --sec-y:80px; } }
@media (max-width:768px)  { :root { --sec-y:56px; --pad-x:16px; } }

/* ── 바탕 글자 ── */
body { font-size:var(--fs-body); line-height:var(--lh-body); color:var(--c-text); }
p { line-height:var(--lh-body); }
h1,h2,h3,h4,h5,h6 { font-weight:700; line-height:var(--lh-head); color:var(--c-text); }

/* ── 버튼 — 주(보라) · 보조(테두리) 두 가지 ── */
.button {
  min-height:48px; padding:0 24px; font-size:var(--fs-body); font-weight:600;
  letter-spacing:0; text-transform:none; border-width:1px; border-radius:var(--r-sm);
}
.button:hover, .button:active { transform:none; }
.button-primary { background:var(--c-accent); border-color:var(--c-accent); color:#fff; }
.button-primary:hover { background:var(--c-accent-dk); border-color:var(--c-accent-dk); }
.button-secondary, .button-outline,
.hero .button-outline, .pf-cta .button {
  background:var(--c-paper); color:var(--c-text); border-color:var(--c-line-2);
}
.button-secondary:hover, .button-outline:hover,
.hero .button-outline:hover, .pf-cta .button:hover {
  background:var(--c-paper-2); color:var(--c-text); border-color:var(--c-text);
}
.faq-left .button { display:inline-flex !important; }  /* 마크업의 inline-block(인라인 style)이면 48px 안에서 글자가 위로 붙는다 */
.button:disabled, .button[aria-disabled="true"] {
  background:var(--c-line); border-color:var(--c-line); color:var(--c-text-3); cursor:not-allowed;
}
.button:focus-visible,
.section-estimate .button:focus-visible, .section-portfolio .button:focus-visible,
.contact-form .button:focus-visible, .hero .button:focus-visible {
  outline:2px solid var(--c-accent); outline-offset:2px;
}

/* ── 머리줄 ── */
.site-header { background:rgba(255,255,255,.96); }
.nav-links a {
  display:inline-flex; align-items:center; min-height:44px; padding:0 10px;
  font-size:15px; font-weight:500; color:var(--c-text-2); text-transform:none;
}
.nav-links a:hover { color:var(--c-text); text-decoration-color:var(--c-accent); }
.nav-links a.nav-pkg { min-height:44px; padding:0 14px; margin-left:6px; color:var(--c-text); border-color:var(--c-line-2); }
.header-inner > .button { min-height:44px; padding:0 18px; font-size:15px; }
@media (max-width:1024px) { .nav-links a { font-size:14px; padding:0 7px; min-width:44px; justify-content:center; } }  /* 두 글자 메뉴가 38px였다(check_customer_screens) */
@media (max-width:768px) {
  .nav-mobile-open .nav-links a { font-size:16px; min-height:48px; padding:0 16px; }
  .header-inner .button { padding:0 12px; font-size:14px; letter-spacing:0; }
}

/* ── 히어로 — 인디고→보라 그라데이션 + 민트 빛 + 노선도 (2026-10-06 대표 「덜 밋밋하게 · 색을 입히자」 → 후보 넷 중 4번)
   같은 날 앞서 고른 옅은 보라(#EEEDF9)가 「밋밋하다」 → 진한 면으로. 사진이 가장 또렷하게 뜬다.
   🔴 **어두운 면이다 — 브랜드 규칙대로 이 면에서만 강조색이 민트**(보라는 이 위에서 안 읽힌다).
     글자는 흰색, 주 버튼은 흰 바탕 + 짙은 보라 글자(보라 버튼을 보라 면에 올리면 묻힌다).
   ⚠ 글자가 놓이는 왼쪽 위가 가장 어둡다(#221F5C). 가장 밝은 오른쪽 아래(#514DC2)에서도 흰 글자 6.6:1 · 민트 3.8:1(큰 제목 기준 3:1 통과).
   ⚠ `background-color`(--c-hero)는 check_contrast가 읽는 대표값이다 — 그라데이션 중간 색으로 둔다.
   ⚠ 잡음 무늬 · 워터마크는 걷은 채로 둔다. 노선도 색은 여기(--map-line · --map-dot)가 정한다. */
.hero { background:var(--c-hero) linear-gradient(135deg, #221F5C 0%, #3B379A 55%, #514DC2 100%); }  /* 높이는 원래대로 화면 가득(100vh · 폰 100dvh−56px) — 내용만큼 줄였더니 「답답하다」(대표 2026-10-06) */
.hero-gradient { display:block; background:radial-gradient(ellipse 45% 55% at 10% 100%, rgba(99,214,212,.22) 0%, transparent 70%); }
.hero-bg-text { display:none; }
.hero::after { display:none; }
.hero-canvas { opacity:1; --map-line:rgba(255,255,255,.14); --map-dot:99,214,212; }
/* 폰에선 비행 점이 설명 글자 위를 지나간다 — 옅게(10/1부터 있던 규칙을 이 블록에서 다시 세운다) */
@media (max-width:1024px) { .hero-canvas { opacity:.4; } }
.hero-center { padding:72px var(--pad-x) 64px; }
.hero-badge {
  background:rgba(255,255,255,.14); border:0; border-radius:var(--r-sm);  /* 알약은 폰에서 두 줄로 접히면 찌그러진다 */
  padding:6px 14px; color:#fff;
  font-size:var(--fs-sm); font-weight:600; letter-spacing:0; text-transform:none;
}
.hero-center h1 {
  font-size:var(--fs-h1); font-weight:700; color:#fff;
  line-height:1.25; letter-spacing:-.03em;
}
.hero-center h1 em { color:var(--brand-on-dk); }
.hero-center h1 em::after { background:var(--brand-on-dk); opacity:.45; height:.1em; bottom:.02em; }
.hero-sub { font-size:var(--fs-lead); line-height:1.7; color:rgba(255,255,255,.86); max-width:30em; }
.hero .button-primary { background:#fff; color:var(--c-accent-dk); border-color:#fff; }
.hero .button-primary:hover { background:var(--brand-on-dk); color:var(--c-text); border-color:var(--brand-on-dk); }
.hero .button-outline { background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.hero .button-outline:hover { background:#fff; color:var(--c-text); border-color:#fff; }
.hero .button:focus-visible { outline-color:var(--brand-on-dk); }
.hero-visual::before { display:none; }  /* 사진 뒤 틀 — 장식 */
.hero-visual figure { background:#1E1B52; box-shadow:0 12px 32px rgba(10,10,40,.35); border-radius:var(--r-md); }
.hero-visual figcaption { font-size:var(--fs-sm); }
@media (min-width:1025px) {
  .hero-center { row-gap:24px; }
  .hero-center h1 { font-size:var(--fs-h1); }
}
@media (max-width:480px) {
  .hero-center { padding:40px var(--pad-x) 40px; }
  .hero-center h1 { font-size:32px; }
  .hero-sub { font-size:var(--fs-body); }
}
/* 티커 — 히어로의 바닥 색으로 잇는다. 그 아래 숫자 띠부터 흰 면 */
.dest-ticker-wrap { background:#1E1B52; border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid var(--c-line); }
.dest-ticker span:not(.t-sep) { font-size:var(--fs-sm); font-weight:500; letter-spacing:0; color:rgba(255,255,255,.78); }
.t-sep { background:rgba(99,214,212,.5); }
/* 숫자 띠 */
.stat-item { padding:28px 24px; }
.stat-num-hero { font-size:clamp(28px, 3vw, 40px); font-weight:700; letter-spacing:-.03em; color:var(--c-text); font-variant-numeric:tabular-nums; }
.hero-stats .stat-unit, .stat-unit { color:var(--c-accent); font-weight:600; }
.stat-lbl-hero { font-size:var(--fs-sm); color:var(--c-text-2); }

/* ── 섹션 머리 — 소제목 · 제목 · 첫 문장을 한 벌로, 전부 왼쪽 정렬 ── */
.eyebrow, .est-hd-badge, .gal-hd-our, .svc-eyebrow, .pf-hd-our,
.testi-eyebrow-label, .section-contact .eyebrow {
  font-size:var(--fs-sm); font-weight:700; letter-spacing:0; text-transform:none;
  color:var(--c-accent); margin-bottom:10px;
}
.est-hd-title, .gal-hd-title, .svc-title, .pf-hd-title, .section-title-center,
.faq-left h2, .about-copy h2, .section-contact h2, .step3-title {
  font-size:var(--fs-h2); font-weight:700; letter-spacing:-.025em; line-height:var(--lh-head);
  color:var(--c-text);
}
.est-hd-title em { color:inherit; }
.section-sub-center, .gal-hd-sub, .svc-lead, .faq-sub, .about-copy p:not(.eyebrow), .contact-grid > div > p:not(.eyebrow) {
  font-size:var(--fs-body); line-height:var(--lh-body); color:var(--c-text-2);
}
.estimate-section-hd { text-align:left; margin-bottom:40px; }
.section-title-center, .section-sub-center { text-align:left; margin-left:0; max-width:36em; }
.section-sub-center { margin-bottom:48px; }
.testi-eyebrow-row { justify-content:flex-start; margin-bottom:10px; }
.testi-eyebrow-line { display:none; }
.gal-hd-line, .pf-hd-line { background:var(--c-line); }
.gal-section-hd, .pf-section-hd { margin-bottom:16px; }

/* ── 섹션 바탕 — 흰 · 회백을 번갈아 (같은 색이 붙으면 섹션이 한 덩어리로 읽힌다) ── */
.section-estimate     { background:var(--c-paper-2); }
.section-gallery      { background:var(--c-paper); }
.section-services     { background:var(--c-paper-2); }
.section-portfolio    { background:var(--c-paper); }
.section-testimonials { background:var(--c-paper-2); }
.section-faq          { background:var(--c-paper); }
.section-about        { background:var(--c-paper-2); }
.section-contact      { background:var(--c-paper); }
.site-footer          { background:var(--c-paper-2); border-top:1px solid var(--c-line); }

/* ── 견적 폼 ── */
.estimate-form {
  background:var(--c-paper); border:1px solid var(--c-line); border-top:3px solid var(--c-accent);
  border-radius:var(--r-md); box-shadow:var(--sh-1); padding:40px;
}
.step-tracker { font-size:var(--fs-sm); font-weight:600; letter-spacing:0; text-transform:none; }
.step-tracker-sep { background:var(--c-line); }
.step-head { border-bottom-color:var(--c-line); }
.step-badge { background:var(--c-accent-weak); color:var(--c-accent-dk); font-size:var(--fs-cap); letter-spacing:0; }
.step-guide { font-size:15px; color:var(--c-text-2); }
.step-guide b { color:var(--c-text); }
.fld-lbl { font-size:var(--fs-sm); font-weight:600; color:var(--c-text); }
.fld-hint { font-size:var(--fs-cap); color:var(--c-text-3); }
.estimate-step > label {
  font-size:var(--fs-sm); font-weight:600; letter-spacing:0; text-transform:none; color:var(--c-text);
}
.fld select, .fld input[type="number"], .fld textarea,
.estimate-step > label > input, .estimate-step > label > textarea, .estimate-step > label > select,
.date-inp, .vip-count-inp, .consult-label input, .contact-form input, .contact-form textarea, #destIndustry {
  min-height:48px; font-size:var(--fs-body); color:var(--c-text);
  border:1px solid var(--c-line-2); border-radius:var(--r-sm); background-color:var(--c-paper);
}
.fld select, .fld input[type="number"], .date-inp,
.estimate-step > label > input, .consult-label input, .contact-form input { padding:0 14px; }
.fld textarea, .estimate-step > label > textarea, .contact-form textarea { padding:12px 14px; }
/* 고르는 칸(select)에 화살표가 없었다 — `appearance:none`이 브라우저 화살표를 지운 뒤 아무것도 안 그렸다 */
.fld select, .estimate-step > label > select {
  padding-right:40px;
  background:var(--c-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23333132' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 16px center;
}
.fld select:hover, .fld input:hover, .date-inp:hover, .estimate-step > label > input:hover,
.estimate-step > label > textarea:hover, .contact-form input:hover, .contact-form textarea:hover { border-color:var(--c-text-2); }
.fld select:focus, .fld input:focus, .fld textarea:focus, .date-inp:focus, .vip-count-inp:focus,
.estimate-step > label > input:focus, .estimate-step > label > textarea:focus, .estimate-step > label > select:focus,
.consult-label input:focus, .contact-form input:focus, .contact-form textarea:focus, #destIndustry:focus {
  border-color:var(--c-accent); outline:none; box-shadow:0 0 0 3px rgba(81,77,194,.2);
}
.fld input[readonly] { background:var(--c-paper-2); color:var(--c-text-2); }
.fld-missing { border-color:var(--c-danger) !important; }
.step-missing { font-size:15px; }

/* 날짜 · 포함 항목 상자 */
.date-block, .item-selector { background:var(--c-paper); border:1px solid var(--c-line); border-radius:var(--r-md); }
.date-block { padding:20px 24px; }
.item-selector { padding:20px 24px; }
.date-block-title { font-size:15px; font-weight:700; }
.date-block-hint { font-size:var(--fs-cap); }
.date-inp-label { font-size:var(--fs-sm); color:var(--c-text-2); }
.date-result-bar { font-size:var(--fs-sm); color:var(--c-text-2); background:var(--c-paper-2); border-color:transparent; }
.season-badge { font-size:var(--fs-cap); letter-spacing:0; border-radius:var(--r-pill); }
.item-selector .inc-sec > .inc-sec-lbl,
.item-selector .inc-sec > .inc-sec-lbl:first-child {
  font-size:15px; font-weight:800; letter-spacing:0; color:var(--c-text); border-top:2px solid var(--c-text);
}
.grade-label { font-size:var(--fs-sm); color:var(--c-text-2); }
.inc-fixed-text { font-size:15px; }
.inc-fixed-badge { font-size:var(--fs-cap); border-radius:var(--r-pill); background:var(--c-accent-weak); color:var(--c-accent-dk); }
.inc-note, .inc-leisure-note { font-size:var(--fs-sm); color:var(--c-text-2); }
.vip-count-unit, .vip-count-note { font-size:var(--fs-sm); }
/* 고르는 버튼 — 한 모양 · 한 「고른 상태」 */
.inc-chip, .grade-pill {
  min-height:44px; font-size:15px; font-weight:500; color:var(--c-text);
  border:1px solid var(--c-line-2); border-radius:var(--r-sm); background:var(--c-paper);
}
.inc-chip:hover, .grade-pill:hover { border-color:var(--c-accent); color:var(--c-accent-dk); }
.inc-chip:has(input:checked), .grade-pill:has(input:checked) {
  background:var(--c-accent-weak); border-color:var(--c-accent); color:var(--c-accent-dk); font-weight:600;
}
.inc-chip:has(input:focus-visible), .grade-pill:has(input:focus-visible) { outline:2px solid var(--c-accent); outline-offset:2px; }
.step2-dot-item { font-size:var(--fs-cap); letter-spacing:0; text-transform:none; }
.cta-guide-wrap { font-size:var(--fs-sm); letter-spacing:0; }
.confirm-title { font-size:20px; }
.confirm-msg { font-size:var(--fs-body); }
.btn-reset-est { font-size:var(--fs-sm); min-height:44px; }
.btn-explore-plan { min-height:48px; font-size:var(--fs-body); font-weight:600; letter-spacing:0; box-shadow:none; border-radius:var(--r-sm); }

/* ── 결과 카드 — 견적서 한 장처럼 ── */
.result-card { border:1px solid var(--c-line); border-radius:var(--r-md); box-shadow:var(--sh-1); padding:32px; }
.result-label { font-size:var(--fs-sm); font-weight:700; color:var(--c-accent); }
.inc-label { font-size:var(--fs-sm); font-weight:600; color:var(--c-text-2); }
.inc-tag { font-size:var(--fs-sm); font-weight:500; padding:5px 12px; background:var(--c-paper-2); border-color:var(--c-line); border-radius:var(--r-pill); color:var(--c-text); }
.cond-tag { font-size:var(--fs-sm); border-radius:var(--r-pill); }
.total-box { padding:20px 24px; border-radius:var(--r-md); }
/* 🔴 1인당 — 검정 바탕 위 보라(2.95:1)였다. 옅은 보라 면 + 짙은 보라 숫자(7.9:1)로 */
.total-per   { background:var(--c-accent-weak); border:1px solid rgba(81,77,194,.35); border-top:3px solid var(--c-accent); }
.total-grand { background:var(--c-paper); border:1px solid var(--c-line); border-top:3px solid var(--c-line); }
.total-lbl { font-size:var(--fs-sm); font-weight:600; margin-bottom:6px; }
.total-per .total-lbl { color:var(--c-accent-dk); }
.total-grand .total-lbl { color:var(--c-text-2); }
.total-per .total-amt, .total-grand .total-amt {
  font-size:var(--fs-amt); font-weight:700; letter-spacing:-.02em; line-height:1.15;
  font-variant-numeric:tabular-nums;
}
.total-per .total-amt { color:var(--c-accent-dk); }
.total-grand .total-amt { color:var(--c-text); }
.rate-note-badge { font-size:var(--fs-cap); background:var(--c-paper-2); border-radius:var(--r-sm); }
.estimate-disclaimer { background:var(--c-paper-2); border:1px solid var(--c-line); border-radius:var(--r-md); padding:20px 24px; }
.disc-main { font-size:15px; }
.disc-sub { font-size:var(--fs-sm); }
.disc-cta { min-height:44px; font-size:15px; font-weight:600; border-radius:var(--r-sm); }
.result-note { font-size:var(--fs-cap); color:var(--c-text-2); }
/* 견적서 받기 = 이 카드의 주 버튼(보라) · 상담 신청 = 보조(테두리) */
.btn-dl-main {
  min-height:48px; font-size:var(--fs-body); font-weight:600; border-radius:var(--r-sm);
  background:var(--c-accent); border:1px solid var(--c-accent); color:#fff;
}
.btn-dl-main:hover { background:var(--c-accent-dk); border-color:var(--c-accent-dk); }
.btn-consult, .btn-dl-excel {
  min-height:48px; font-size:var(--fs-body); font-weight:600; letter-spacing:0; text-transform:none;
  border-radius:var(--r-sm); background:var(--c-paper); color:var(--c-text); border:1px solid var(--c-line-2);
}
.btn-consult:hover, .btn-dl-excel:hover { background:var(--c-paper-2); color:var(--c-text); border-color:var(--c-text); }
.consult-form-wrap { border-radius:var(--r-md); border-color:var(--c-line); }
.consult-form-head { font-size:var(--fs-body); }
.consult-form-desc { font-size:var(--fs-sm); }
.consult-label { font-size:var(--fs-sm); font-weight:600; letter-spacing:0; text-transform:none; color:var(--c-text); }
/* 「이름」과 「*」가 두 줄로 갈렸다 — 문의 폼(10/1)과 같은 원인 · 같은 처방: 글자와 별표는 한 줄, 입력칸만 아랫줄 */
.consult-label { flex-direction:row; flex-wrap:wrap; align-items:baseline; column-gap:3px; row-gap:6px; }
.consult-label > input { flex-basis:100%; width:100%; }
.consult-close { min-width:44px; min-height:44px; }
.btn-consult-cancel, .btn-consult-submit { min-height:48px; font-size:var(--fs-body); border-radius:var(--r-sm); }
.req { color:var(--c-danger); }
/* 아직 견적이 없을 때 */
.no-estimate-msg .no-est-icon { background:var(--c-accent-weak); }
.no-estimate-msg .no-est-lead { font-size:17px; font-weight:700; }
.no-estimate-msg .no-est-steps li { font-size:15px; font-weight:500; border-radius:var(--r-md); }
/* 체크리스트 */
.gcl-title { font-size:16px; font-weight:800; }   /* ⚠ 숫자로 적는다 — jsdom 검사(test_zB)는 var()를 계산 못 한다 */
.gcl-sec-title { font-size:15px; font-weight:800; }
.gcl-list li { font-size:15px; line-height:1.65; }
.gcl-list li::before { top:6px; }

/* ── 금액 요약 막대 (quote_bar.js) — 폼을 채우는 동안 금액이 늘 화면 안에 있게 ── */
.qbar {
  position:fixed; left:0; right:0; bottom:0; z-index:950;
  background:rgba(255,255,255,.98); border-top:1px solid var(--c-line); box-shadow:0 -8px 24px rgba(20,19,24,.08);
  transform:translateY(100%); visibility:hidden;
  transition:transform var(--dur-md) var(--ease), visibility 0s linear var(--dur-md);
}
.qbar.show { transform:none; visibility:visible; transition:transform var(--dur-md) var(--ease), visibility 0s; }
.qbar-inner {
  max-width:1180px; margin:0 auto; padding:12px var(--pad-x);
  display:flex; align-items:center; gap:32px;
}
.qbar-item { display:flex; flex-direction:column; min-width:0; }
.qbar-lbl { font-size:var(--fs-cap); font-weight:600; color:var(--c-text-2); line-height:1.4; }
.qbar-amt { font-size:22px; font-weight:700; letter-spacing:-.02em; line-height:1.3; font-variant-numeric:tabular-nums; white-space:nowrap; }
.qbar-per .qbar-amt { color:var(--c-accent-dk); }
.qbar-tot .qbar-amt { color:var(--c-text); }
.qbar-go {
  margin-left:auto; min-height:44px; padding:0 16px; flex-shrink:0;
  font:inherit; font-size:15px; font-weight:600; color:var(--c-text);
  background:var(--c-paper); border:1px solid var(--c-line-2); border-radius:var(--r-sm); cursor:pointer;
}
.qbar-go:hover { background:var(--c-paper-2); border-color:var(--c-text); }
.qbar-go:focus-visible { outline:2px solid var(--c-accent); outline-offset:2px; }
@media (max-width:600px) {
  .qbar-inner { gap:14px; padding:10px var(--pad-x); }
  .qbar-amt { font-size:17px; }
  .qbar-go { padding:0 12px; font-size:14px; }
  /* 360px에 금액 둘 + 버튼이 한 줄에 들어가게 — 「예상」·「금액 … 보기」를 뺀다(실측: 총액이 버튼 밑으로 잘렸다) */
  .qbar-wide { display:none; }
}
/* 떠 있는 버튼 — 막대가 뜨면 그 위로 비켜서고, 폰에서는 폼을 가리지 않게 숨는다 */
body.qbar-on .kakao-float    { bottom:96px; }
body.qbar-on .scroll-top-btn { bottom:156px; }
@media (max-width:768px) {
  /* 견적 구역(폼 + 결과 카드) 전체에서 숨긴다 — 폼만 보면 결과 카드의 「견적서 받기」를 가렸다 */
  body.in-estimate .kakao-float.visible, body.in-estimate .scroll-top-btn.visible { opacity:0; pointer-events:none; }
}

/* ── 목적지 ── */
.dest-recommender { background:var(--c-paper-2); border:1px solid var(--c-line); border-radius:var(--r-md); }
.dest-rec-lbl { font-size:15px; font-weight:600; }
#destIndustry { padding:0 40px 0 14px; }
.dest-rec-result { font-size:15px; }
.gal-filter-row { gap:8px; }
.gal-filter-chip, .pf-filter {
  min-height:44px; padding:0 16px; font-size:15px; font-weight:500;
  color:var(--c-text); background:var(--c-paper); border:1px solid var(--c-line-2); border-radius:var(--r-sm);
}
.gal-filter-chip:hover, .pf-filter:hover { border-color:var(--c-accent); color:var(--c-accent-dk); }
.gal-filter-chip.active, .pf-filter.active {
  background:var(--c-accent-weak); border-color:var(--c-accent); color:var(--c-accent-dk); font-weight:600;
}
.gallery-grid { gap:8px; }
.gallery-card { border-radius:var(--r-md); }
.gallery-overlay h3 { font-size:var(--fs-h4); }
.gallery-tag { font-size:var(--fs-cap); }

/* ── 서비스 — 배경의 큰 번호(장식)와 위에서 이미 말한 숫자를 걷는다 ── */
.svc-header { border-bottom-color:var(--c-line); }
.svc-item { border-bottom-color:var(--c-line); padding:40px 0; }
.svc-item::before { display:none; }
.svc-step { font-size:var(--fs-sm); font-weight:700; color:var(--c-text-3); letter-spacing:0; margin-bottom:6px; }
.svc-cat { font-size:var(--fs-cap); letter-spacing:.06em; color:var(--c-accent); }
.svc-item-title { font-size:var(--fs-h3); font-weight:700; }
.svc-item-desc { font-size:var(--fs-body); color:var(--c-text-2); }
.svc-bullets li { font-size:15px; color:var(--c-text); }
.svc-bullets li::before { top:12px; background:var(--c-text-3); }
/* 55 · 1,400 · 98%는 첫 화면 숫자 띠가 이미 말한다 — 여기선 「다음 행동」 링크만 남긴다 */
.svc-metric-val, .svc-metric-lbl { display:none; }
.svc-cta { font-size:15px; font-weight:600; }
.svc-blog-link { font-size:var(--fs-body); font-weight:600; }

/* ── 포트폴리오 ── */
.pf-card { border:1px solid var(--c-line); border-radius:var(--r-md); box-shadow:none; }
.pf-card:hover { transform:none; box-shadow:var(--sh-1); border-color:var(--c-line-2); }
.pf-body { padding:20px; }
.pf-dest { font-size:var(--fs-cap); font-weight:600; color:var(--c-accent); }
.pf-title { font-size:17px; font-weight:600; color:var(--c-text); }
.pf-hi-title { font-size:17px; }

/* ── 후기 ── */
.testi-card { background:var(--c-paper); border:1px solid var(--c-line); border-radius:var(--r-md); padding:32px; }
.testi-card:hover { border-color:var(--c-line-2); }
.testi-card-highlight { background:var(--c-paper); border-color:var(--c-line); }
.testi-quote { font-size:40px; color:var(--c-line-2); }
.testi-text { font-size:var(--fs-body); line-height:1.75; color:var(--c-text); }
.testi-star { font-size:var(--fs-sm); color:var(--c-accent); }
.testi-name { font-size:15px; color:var(--c-text); }
.testi-org { font-size:var(--fs-sm); color:var(--c-text-2); }
.trust-strip { background:var(--c-paper); border:1px solid var(--c-line); border-radius:var(--r-md); }
.trust-item { border-right-color:var(--c-line); }
.trust-num { font-size:32px; font-weight:700; color:var(--c-text); }
.trust-unit { color:var(--c-accent); }
.trust-lbl { font-size:var(--fs-sm); color:var(--c-text-2); }

/* ── 자주 묻는 질문 ── */
.faq-item { border-bottom-color:var(--c-line); }
.faq-q { font-size:17px; font-weight:600; }
.faq-a p { font-size:var(--fs-body); line-height:1.75; color:var(--c-text-2); }

/* ── 회사 소개 · 함께한 기관 ── */
.about-photo-wrap { border-radius:var(--r-md); box-shadow:none; }
.partners-groups-wrap, .partners-group, .partners-group:last-child { border-color:var(--c-line); }
.partners-groups-hd, .partners-cat { font-size:var(--fs-sm); font-weight:600; letter-spacing:0; text-transform:none; color:var(--c-text-2); }
.partner-logo-name { font-size:var(--fs-cap); color:var(--c-text-2); }
.partners-track .p-chip { font-size:var(--fs-sm); color:var(--c-text); border-color:var(--c-line); }

/* ── 문의 ── */
.contact-details p { font-size:15px; color:var(--c-text); }
.map-wrap { border-radius:var(--r-md); border-color:var(--c-line); }
.contact-form { border:1px solid var(--c-line); border-radius:var(--r-md); box-shadow:var(--sh-1); }
.contact-form label { font-size:var(--fs-sm); font-weight:600; color:var(--c-text); }
.inq-success, .consult-ok { font-size:15px; border-radius:var(--r-sm); }

/* ── 푸터 ── */
.footer-grid { border-bottom-color:var(--c-line); }
.footer-tagline { font-size:var(--fs-sm); color:var(--c-text-2); }
.footer-info { font-size:var(--fs-sm); line-height:1.8; color:var(--c-text-2); }
.footer-col-label { font-size:var(--fs-cap); letter-spacing:.06em; color:var(--c-text-2); }
.footer-col-nav a { font-size:15px; color:var(--c-text-2); }
.footer-col-contact p { font-size:var(--fs-sm); color:var(--c-text-2); }
.footer-bottom { font-size:var(--fs-cap); color:var(--c-text-2); }

/* ── 떠 있는 버튼 ── */
.scroll-top-btn {
  width:44px; height:44px; background:var(--c-paper); color:var(--c-text);
  border:1px solid var(--c-line-2); border-radius:var(--r-sm); box-shadow:var(--sh-2);
}
.scroll-top-btn:hover { background:var(--c-paper-2); border-color:var(--c-text); transform:none; }
.kakao-float { min-height:44px; font-size:var(--fs-sm); border-radius:var(--r-sm); box-shadow:var(--sh-2); }

/* ── 일정 살펴보기(3단계) — 어두운 면을 걷고 같은 글자 단계로 ── */
.step3-badge, .plan-tag { font-size:var(--fs-cap); letter-spacing:0; border-radius:var(--r-pill); }
.step3-sub, .plan-desc { font-size:15px; }
.plan-card { border:1px solid var(--c-line); border-radius:var(--r-md); }
.plan-card.active { border-color:var(--c-accent); }
.plan-type-lbl { font-size:var(--fs-body); }
.plan-points li { font-size:15px; }
.plan-select-indicator { font-size:var(--fs-sm); }
.day-timeline-wrap, .itin-day-card { border:1px solid var(--c-line); border-radius:var(--r-md); }
.day-timeline-title { font-size:var(--fs-h4); }
.itin-day-header { background:var(--c-paper-2); border-bottom:1px solid var(--c-line); }
.itin-day-num { font-size:var(--fs-cap); letter-spacing:.04em; color:var(--c-accent-dk); }
.itin-day-badge { font-size:12px; letter-spacing:0; border-radius:var(--r-pill); }
.itin-day-title { font-size:15px; color:var(--c-text); }
.itin-slot-time { font-size:12px; letter-spacing:.04em; }
.itin-slot-content { font-size:15px; }
.itin-tip { font-size:var(--fs-sm); background:var(--c-paper-2); border-left-color:var(--c-accent); }
.itin-tip-label { font-size:12px; letter-spacing:0; }
.plan-value-box { background:var(--c-paper-2); color:var(--c-text); border:1px solid var(--c-line); border-radius:var(--r-md); }
.plan-value-icon { color:var(--c-accent); }
.plan-value-label { font-size:var(--fs-cap); letter-spacing:0; text-transform:none; color:var(--c-text-2); }
.plan-value-text { font-size:var(--fs-body); color:var(--c-text); }
.btn-step3-pdf, .btn-step3-consult { min-height:48px; font-size:var(--fs-body); font-weight:600; letter-spacing:0; border-radius:var(--r-sm); }
.btn-step3-consult { color:var(--c-text); border:1px solid var(--c-line-2); }
.btn-step3-consult:hover { background:var(--c-paper-2); color:var(--c-text); border-color:var(--c-text); }
.dest-strip-lbl, .dest-strip-credit { font-size:12px; letter-spacing:0; }
.dest-photo-item { border-radius:var(--r-md); }
.dest-map-frame { border-radius:var(--r-md); }
.dest-map-pin-label { font-size:12px; }

@media (max-width:768px) {
  .estimate-form { padding:24px 20px; }
  .result-card { padding:24px 20px; }
  .date-block, .item-selector { padding:16px; }
  .svc-item { padding:32px 0; }
  .testi-card { padding:24px; }
  .contact-form { padding:24px 20px; }
}
@media (max-width:480px) {
  .step-tracker { font-size:var(--fs-cap); }
  /* 2열 카드(목적지 · 연수 사례 · 2026-10-20) — 반쪽 폭에 맞춘 글자·여백. ⚠ 이 블록은 `.pf-body`·`.pf-title` 기본값(위 2850번대)보다
     **뒤**여야 한다 — 앞쪽 480px 블록에 뒀더니 덮였다. */
  .pf-body { padding:12px; }
  .pf-title { font-size:14px; line-height:1.45; }
  .gallery-overlay h3 { font-size:15px; }
}
@media (prefers-reduced-motion: reduce) {
  .qbar, .qbar.show { transition:none; }
}