@charset "utf-8";
/* flow.css — 질문 2개 → 맞춤 결과. 색만이 아니라 구조가 바뀐다.
     .is-office  흰 바탕 · 표와 숫자 · 좁은 단 · 사진 없음      (사무 서비스)
     .is-floor   페이퍼 바탕 · 풀블리드 실사 · 넓은 단 · 큰 타입 (현장 서비스)

   v4 : 지면이 화이트가 되면서 '다크 vs 페이퍼' 였던 분기를
   '흰 바탕 + 좁은 단 + 무사진' vs '페이퍼 바탕 + 넓은 단 + 실사' 로 옮겼다.
   색 대비가 아니라 밀도와 사진 유무로 갈린다. 히어로와 CTA만 네이비다.
   레퍼런스: grouping.ai 사무 파트의 구성 방식을 트랜쇼 토큰으로 옮김. */

.flow{min-height:100svh;display:flex;flex-direction:column;background:var(--bg)}

/* ══ 질문 화면 ══ */
.q{flex:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(96px,12vh,150px) clamp(20px,5vw,72px) clamp(48px,8vh,90px);max-width:1080px;width:100%;margin:0 auto}
.q[hidden]{display:none}
/* ══ v7.7 : 질문 진행 표시 · 앞 답 되짚기 · 고른 보기 표시 ══ */
.q__bar{display:block;width:100%;max-width:340px;height:3px;background:var(--line);border-radius:100px;overflow:hidden;margin-bottom:16px}
.q__bar i{display:block;height:100%;width:50%;background:var(--navy);border-radius:100px;transition:width .45s var(--ease-io)}
.q[data-next="result"] .q__bar i{width:100%}
.q__step{font-family:var(--f-brand);font-size:var(--fs-label);letter-spacing:.26em;color:var(--navy);margin-bottom:20px;font-weight:600}
.q__echo{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 18px;
  border:1px solid var(--line-2);border-radius:100px;padding:8px 10px 8px 16px;background:var(--bg-2)}
.q__echo__k{font-family:var(--f-brand);font-size:var(--fs-micro);font-weight:600;letter-spacing:.14em;color:var(--ink-3)}
.q__echo__v{font-size:var(--fs-cap);font-weight:700;color:var(--navy)}
.q__echo__go{font-size:var(--fs-micro);color:var(--ink-3);border:1px solid var(--line-2);background:var(--bg);
  border-radius:100px;padding:5px 12px;cursor:pointer;transition:border-color .3s var(--ease),color .3s var(--ease)}
.q__echo__go:hover{border-color:var(--navy);color:var(--navy)}
/* 고른 보기 — 되돌아왔을 때 무엇을 골랐는지 바로 보인다 */
.opt.is-picked{border-color:var(--navy);background:var(--bg);box-shadow:inset 3px 0 0 var(--navy)}
.opt.is-picked .opt__k{color:var(--navy)}
/* 결과 상단 : 고른 두 답 */
.res__pick{display:flex;flex-wrap:wrap;gap:8px;margin:-14px 0 20px}
.res__pick__i{display:inline-flex;align-items:center;font-size:var(--fs-micro);font-weight:600;letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.42);border-radius:100px;padding:6px 14px;color:rgba(255,255,255,.92)}
.res__pick__i[hidden]{display:none}
.q__t{font-size:clamp(27px,3.9vw,50px);font-weight:800;line-height:1.24;letter-spacing:-.035em;text-wrap:balance}
.q__d{margin-top:16px;font-size:var(--fs-body);line-height:1.8;color:var(--ink-3)}

.opts{margin-top:clamp(30px,5vh,52px);display:grid;gap:10px}
.opt{display:grid;grid-template-columns:46px 1fr 24px;align-items:center;gap:18px;width:100%;text-align:left;padding:clamp(20px,2.6vh,28px) clamp(18px,2.4vw,28px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2);transition:border-color .3s var(--ease-io),background .3s var(--ease-io),transform .3s var(--ease)}
.opt:hover,.opt:focus-visible{border-color:var(--navy);background:#fff;transform:translateX(5px);box-shadow:0 10px 30px -16px rgba(11,18,48,.42)}
.opt__k{font-family:var(--f-brand);font-size:var(--fs-cap);letter-spacing:.16em;color:var(--ink-3);font-weight:600}
.opt:hover .opt__k{color:var(--navy)}
/* ★ v7 버그 수정 : 둘 다 <span> 이라 인라인으로 붙어 한 줄에 이어져 있었다.
   "…계약이 곧 끝납니다날짜가 정해져 있어…" 처럼 제목과 설명이 붙어 읽혔다(2026-09-07 실물 확인).
   margin-top 도 인라인에는 먹지 않는다. block 으로 바꿔 줄을 나눈다. */
.opt__t{display:block;font-size:clamp(17px,1.8vw,21px);font-weight:700;letter-spacing:-.02em;line-height:1.4}
.opt__s{display:block;margin-top:8px;font-size:var(--fs-cap);line-height:1.65;color:var(--ink-3);font-weight:400;max-width:var(--measure)}
.opt__go{color:var(--ink-3);justify-self:end}
.opt:hover .opt__go{color:var(--navy)}
/* flex 세로 정렬 안에서는 링크가 한 줄을 통째로 차지해, 글자 옆 빈칸까지
   클릭 영역이 된다. 글자 폭만큼만 잡는다. */
.q__back{margin-top:26px;font-size:var(--fs-cap);color:var(--ink-3);align-self:flex-start}
.q__back:hover{color:var(--navy)}

/* ══ 결과 ══ */
.res[hidden]{display:none}
.res__hero{padding:var(--sp-hero) clamp(20px,5vw,72px) var(--sp-lg);background:var(--nv);color:var(--nv-ink)}
.res__in{max-width:var(--maxw);margin:0 auto}
/* 넓은 도해는 제 컨테이너 안에서만 가로 스크롤한다 — 본문은 가로로 밀리지 않는다 */
.figscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:clamp(26px,4vh,42px)}
.figscroll svg{min-width:760px}
.res__tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-brand);font-size:var(--fs-label);letter-spacing:.18em;border:1px solid currentColor;border-radius:100px;padding:8px 17px;margin-bottom:26px;color:var(--accent)}
.res__h{font-size:clamp(30px,4.6vw,62px);font-weight:800;line-height:1.16;letter-spacing:-.038em;text-wrap:balance}
.res__lead{margin-top:22px;font-size:clamp(16px,1.6vw,20px);line-height:1.85;max-width:44em;color:var(--nv-ink-2)}
.res__sec{padding:var(--sp-lg) clamp(20px,5vw,72px)}
/* 여백 리듬 — 균일한 패딩이 AI 티의 절반이다. 역할별로 다르게 준다.
   --open  장이 열리는 자리 (히어로 다음 첫 섹션)
   --tight 앞 섹션과 한 덩어리로 읽혀야 하는 자리 (도해)
   --close 장을 닫는 자리 (다음이 사진 띠나 CTA) */
.res__sec--open{padding-top:var(--sp-xl)}
.res__sec--tight{padding-top:var(--sp-md)}
.res__sec--close{padding-bottom:var(--sp-xl)}
.res__k{font-family:var(--f-brand);font-size:var(--fs-label);letter-spacing:.28em;text-transform:uppercase;margin-bottom:18px;color:var(--navy);font-weight:600;display:flex;align-items:center;gap:11px}
/* 라벨 앞 3px 바 — 도면의 지시선. 섹션이 '항목'으로 읽히게 한다 */
.res__k::before{content:'';width:26px;height:var(--rule);background:currentColor;flex:none}
.res__st{font-size:clamp(22px,2.9vw,38px);font-weight:800;line-height:1.28;letter-spacing:-.03em;text-wrap:balance}
.res__note{margin-top:20px;font-size:var(--fs-cap);line-height:1.92;color:var(--ink-3)}
[data-h][hidden],[data-track][hidden],[data-when][hidden],[data-kind][hidden],[data-q1][hidden],[data-q2][hidden]{display:none!important}
.res__redo{display:inline-flex;align-items:center;gap:9px;margin-top:30px;font-size:var(--fs-cap);border-bottom:1px solid currentColor;padding-bottom:3px}

/* 이유 목록 : 카드 3장이 아니라 번호가 붙은 행 */
.why{margin-top:clamp(28px,4vh,44px);display:grid}
/* ★ v7.3 : .why li 로 쓰면 안에 넣은 .proc 레일의 li 까지 2열 그리드가 된다(실물에서 확인). 반드시 > li 로 쓴다. */
/* ★ v7.5 : 1fr 의 min-width:auto 가 안쪽 .proc(8칸 × 80px = 640px)를 그대로 받아
   390px 에서 li 가 660px 로 부풀었다. minmax(0,1fr) 로 막는다. */
.why > li{display:grid;grid-template-columns:82px minmax(0,1fr);gap:clamp(16px,2.4vw,38px);padding:clamp(22px,3vh,32px) 0;border-top:1px solid var(--line)}
/* ★ 첫 항목만 크게 잡는다. 네 항목이 전부 같은 형식이면 읽는 사람이
   목록을 '훑고' 지나간다. 하나를 키워 시선의 진입점을 만든다. */
.why > li:first-child{border-top:var(--rule) solid var(--ink);padding-top:clamp(26px,3.6vh,40px)}
.why > li:first-child .why__t{font-size:clamp(21px,2.4vw,30px)}
.why > li:first-child .why__d{font-size:var(--fs-body);max-width:34em}
.why > li:first-child .why__k{font-size:20px}
.why__k{font-family:var(--f-brand);font-size:17px;font-weight:600;letter-spacing:.1em;color:var(--navy)}
.why__t{font-size:clamp(18px,1.9vw,24px);font-weight:700;letter-spacing:-.025em;line-height:1.4}
.why__d{margin-top:10px;font-size:var(--fs-body-s);line-height:1.8;max-width:40em;color:var(--ink-2)}

.nums{display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,72px);margin-top:clamp(26px,4vh,42px)}
.nums div{min-width:160px}
.nums .n{font-family:var(--f-num);font-weight:600;font-size:clamp(34px,4.2vw,58px);line-height:1;letter-spacing:-.03em;color:var(--navy)}
.nums .l{margin-top:12px;font-size:var(--fs-cap);line-height:1.6;color:var(--ink-2)}
/* v7.3 : 숫자 아래 옐로 눈금이 카운트업과 함께 자란다 — 계측값이라는 신호 */
.nums .n,.tiers .p{position:relative;display:inline-block}
.nums .n::after,.tiers .p::after{content:'';position:absolute;left:0;bottom:-9px;height:3px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform .9s var(--ease) .35s}
html.rv-on .nums > div.is-in .n::after,html.rv-on .tiers > div.is-in .p::after{transform:none}
@media (prefers-reduced-motion:reduce){.nums .n::after,.tiers .p::after{transform:none;transition:none}}

.tl{margin-top:clamp(28px,4vh,44px)}
.tl li{display:grid;grid-template-columns:clamp(130px,15vw,200px) 1fr;gap:clamp(16px,3vw,44px);padding:clamp(20px,3vh,30px) 0;border-top:1px solid var(--line)}
.tl li:first-child{border-top:var(--rule) solid var(--ink)}
.tl__k{font-family:var(--f-brand);font-size:var(--fs-cap);letter-spacing:.1em;padding-top:4px;color:var(--navy);font-weight:600}
.tl__t{font-size:clamp(17px,1.8vw,22px);font-weight:700;letter-spacing:-.02em}
.tl__d{margin-top:9px;font-size:var(--fs-body-s);line-height:1.8;max-width:42em;color:var(--ink-2)}

.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:var(--sp-sm);background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.tiers div{padding:clamp(22px,3vh,34px);background:var(--bg-2)}
.tiers .p{font-family:var(--f-num);font-weight:600;font-size:clamp(28px,3.4vw,46px);line-height:1;color:var(--navy)}
.tiers .u{margin-top:12px;font-size:var(--fs-cap);line-height:1.6;color:var(--ink-2)}
.terms{margin-top:var(--sp-sm);width:100%;border-collapse:collapse;font-size:var(--fs-body-s);border-top:var(--rule) solid var(--ink)}
.terms th,.terms td{text-align:left;padding:16px 4px;line-height:1.7;vertical-align:top;border-bottom:var(--hair) solid var(--line-2)}
.terms th{width:clamp(130px,18vw,230px);font-weight:600;color:var(--ink)}
.terms td{color:var(--ink-2)}

/* v7.3 : 마감 밴드 상하 패딩을 히어로급(최대 184px)에서 장(章)급으로 내렸다. 밴드가 화면 한 장을 통째로 먹지 않게. */
.res__cta{padding:var(--sp-xl) clamp(20px,5vw,72px);background:var(--nv);color:var(--nv-ink)}
.res__cta .res__st{color:var(--nv-ink)}
.res__cta .row{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
/* '질문 다시 하기' 는 버튼 줄의 마지막 항목으로 들어간다 (v7.3) */
.res__cta .row .res__redo{margin-top:0;margin-left:6px}
.res__cta .btn--fill{background:var(--accent);color:#1A1400}
.res__cta .btn--fill:hover{background:#FFD84D}
.res__cta .btn--line{border-color:var(--nv-line-2);color:var(--nv-ink)}
.res__cta .btn--line:hover{border-color:var(--accent);color:var(--accent)}
.res__cta .res__redo{color:var(--nv-ink-3)}

/* ══ MODE A — 사무 서비스 (흰 바탕 · 좁은 단 · 무사진) ══ */
.is-office{background:var(--bg)}
.is-office .res__in{max-width:1120px}
.is-office .res__sec{max-width:1120px;margin:0 auto;border-bottom:1px solid var(--line)}
.is-office .res__hero{background:radial-gradient(900px 520px at 12% 0%,rgba(78,98,200,.34),transparent 62%),linear-gradient(180deg,#0E1638,#0B1230)}
.is-office .res__figure{margin-top:clamp(26px,4vh,42px);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3vw,36px);background:var(--bg-2)}

/* ══ MODE B — 현장 서비스 (페이퍼 바탕 · 넓은 단 · 실사 · 큰 타입) ══ */
.is-floor{background:var(--bg-2)}
.is-floor .res__in{max-width:1320px}
.is-floor .res__sec{max-width:1320px;margin:0 auto}
.is-floor .res__hero{position:relative;overflow:hidden;isolation:isolate;padding-top:clamp(150px,26vh,300px);padding-bottom:clamp(56px,9vh,110px);background:#0A1024}
.is-floor .res__hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,16,36,.52) 0%,rgba(10,16,36,.88) 78%)}
.is-floor .res__shot{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.is-floor .res__h{font-size:clamp(32px,5.4vw,74px);letter-spacing:-.042em}
.is-floor .res__st{max-width:16em}
.is-floor .why > li{border-top:2px solid var(--line-2)}
.is-floor .why > li:first-child{border-top:2px solid var(--ink)}
.is-floor .tiers div{background:#fff}
.is-floor .res__figure{background:#fff}

/* 현장 모드에만 있는 풀블리드 사진 띠 */
.strip{margin:0;position:relative}
.strip img{width:100%;height:clamp(260px,46vh,540px);object-fit:cover;display:block}
.strip figcaption{position:absolute;left:0;right:0;bottom:0;padding:clamp(40px,7vh,80px) clamp(20px,5vw,72px) clamp(20px,3vh,34px);color:#fff;font-size:clamp(16px,1.6vw,19px);background:linear-gradient(180deg,transparent,rgba(10,16,36,.86));pointer-events:none}
.is-office .strip{display:none}

/* 히어로 위에 있는 동안에는 상단 바를 흰색 계열로 (flow.js 가 갱신) */
body[data-tone="dark"] .topbar.is-solid{background:rgba(11,18,48,.86)}
body[data-tone="dark"] .topbar__back,body[data-tone="dark"] .topbar .lock__a{color:var(--nv-ink)}
body[data-tone="dark"] .topbar .lock__b{color:var(--accent)}

@media (max-width:720px){
  .opt{grid-template-columns:36px 1fr;gap:12px}
  .opt__go{display:none}
  .why > li{grid-template-columns:minmax(0,1fr);gap:10px}
  .tl li{grid-template-columns:1fr;gap:8px}
  .tiers{grid-template-columns:1fr}
  .terms th{width:auto;display:block;padding-bottom:2px;border:0}
  .terms td{display:block;padding-top:0;border:0}
  .terms tr{display:block;border-bottom:1px solid var(--line);padding:12px 0}
}

/* ══════════════════════════════════════════════
   v7.2 인포그래픽 추가
   ══════════════════════════════════════════════ */

/* ── 이관 주간 캘린더 (move) ──
   "며칠 멈추나"가 이 페이지에서 가장 많이 받는 질문이다.
   6단계 목록을 읽기 전에 요일 다섯 칸으로 먼저 답한다. */
.week{margin:26px 0 34px;max-width:920px}
.week__row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.week__d{
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
  padding:14px 12px 12px;text-align:center;
  transition:border-color .4s var(--ease-io),background .4s var(--ease-io),transform .5s var(--ease);
}
.week__d b{
  display:block;font-family:var(--f-brand);font-size:var(--fs-body-s);font-weight:700;
  letter-spacing:.06em;color:var(--ink);
}
.week__d span{display:block;margin-top:7px;font-size:var(--fs-cap);line-height:1.45;color:var(--ink-3)}
.week__d.is-stop{background:#FFF6DC;border-color:#E8C766}
.week__d.is-stop b{color:#8A6A05}
.week__d.is-go{background:var(--navy);border-color:var(--navy)}
.week__d.is-go b,.week__d.is-go span{color:#fff}
.week__d.is-go span{color:rgba(255,255,255,.78)}

/* 두 개의 기간 막대 — 작업 기간(4일)과 그중 배송이 멈추는 구간(2일) */
.week__bars{margin-top:10px;display:grid;gap:7px}
.week__bar{
  position:relative;display:block;height:30px;border-radius:var(--r);
  transform-origin:left center;
}
.week__bar em{
  position:absolute;inset:0;display:flex;align-items:center;padding-left:14px;
  font-style:normal;font-size:var(--fs-cap);font-weight:600;white-space:nowrap;
}
.week__bar--work{width:100%;background:var(--bg-3);border:1px solid var(--line)}
.week__bar--work em{color:var(--ink-2)}
/* 금·토 두 칸 = 5칸 중 2칸. 칸 사이 간격까지 고려해 40% 폭을 목요일 다음 칸부터 그린다 */
.week__bar--stop{width:calc(40% - 4px);margin-left:calc(20% + 2px);background:#F8C429}
.week__bar--stop em{color:#1A1400}

/* 결과 화면은 나중에 그려진다. reveal.js 가 .is-in 을 붙인 뒤에 자란다. */
html.rv-on .week__bar{transform:scaleX(.02);opacity:0;transition:transform .9s var(--ease),opacity .3s linear}
html.rv-on [data-rv].is-in .week__bar,
html.rv-on .is-in .week__bar{transform:none;opacity:1}
html.rv-on .week__bar--stop{transition-delay:.25s}
@media (prefers-reduced-motion:reduce){
  html.rv-on .week__bar{transform:none!important;opacity:1!important;transition:none!important}
}
@media (max-width:640px){
  .week__row{grid-template-columns:repeat(5,1fr);gap:5px}
  .week__d{padding:10px 5px 9px}
  .week__d span{font-size:var(--fs-micro)}
  .week__bar em{font-size:var(--fs-micro);padding-left:9px}
}

/* ── 캐파 게이지 채우기 (grow) ── */
.gauge__track{shape-rendering:geometricPrecision}
.gauge__mk--end{stroke-linecap:square}
html.rv-on .gauge__fill{transform-origin:10px center;transform:scaleX(.02);transition:transform 1.05s var(--ease)}
html.rv-on .gauge__head{opacity:0;transition:opacity .5s linear .5s}
html.rv-on .gauge__mk{opacity:0;transition:opacity .4s linear .75s}
html.rv-on .is-in .gauge__fill{transform:none}
html.rv-on .is-in .gauge__head{opacity:.26}
html.rv-on .is-in .gauge__mk{opacity:1}
@media (prefers-reduced-motion:reduce){
  html.rv-on .gauge__fill{transform:none!important}
  html.rv-on .gauge__head,html.rv-on .gauge__mk{opacity:1!important}
}

/* ── 단계 타임라인 : 지나간 단계의 구분선이 네이비로 채워진다 ──
   세로선을 따로 그리지 않는다. 이미 있는 행 구분선이 진행 표시가 되면
   요소를 늘리지 않고도 "여기까지 왔다"가 읽힌다. */
.tl li{transition:border-top-color .55s var(--ease-io)}
.tl__k{position:relative}
.tl__k::before{
  content:'';position:absolute;left:-14px;top:9px;width:3px;height:0;
  background:var(--accent);transition:height .55s var(--ease);
}
html.rv-on .tl li.is-in{border-top-color:var(--navy)}
html.rv-on .tl li.is-in .tl__k::before{height:16px}
@media (max-width:640px){.tl__k::before{display:none}}
@media (prefers-reduced-motion:reduce){
  .tl li,.tl__k::before{transition:none}
}