/* slowtravelkorea v0 — 주문 폼 여덟 장.
 *
 * landing.css 를 먼저 깔고 이 파일을 얹는다. 바닥깔기와 단추와 .wrap 은 거기 것을
 * 그대로 쓴다. 값은 전부 tokens.css 에서 가져온다. 여기에 px 을 손으로 적지 않는다.
 * (예외 둘 — 테두리 1px 과 clip 용 0. landing.css 와 같은 예외다.)
 *
 * 입력칸 글자를 var(--t-body) 아래로 내리지 않는다. 16px 미만이면 iOS 사파리가
 * 칸에 들어갈 때 화면을 확대하고, 확대된 화면은 가로로 넘쳐 되돌아오지 않는다.
 */

/* ── 화면만 숨기는 글 ─────────────────────────────────────────────────── */
/* display:none 으로 지우면 읽어 주는 기계에서도 사라진다. 자리만 줄인다 */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 주문 폼에는 아래에 고정된 단추 줄이 있다. 랜딩이 깔아 둔 아래 여백을 바꾼다 */
.order-page { padding-bottom: calc(var(--btn-h) + var(--s8)); }

.topbar-note { margin-left: auto; display: none; }
@media (min-width: 600px) { .topbar-note { display: block; } }

/* ── 진행 줄 ──────────────────────────────────────────────────────────────
 * 라이브는 "Question 6 of 12" 를 다섯째 화면에 띄웠다. 질문이 아니라
 * 화면을 센다. 값은 첫 장부터 여기 붙어 있어서 마지막 장에서 처음 보이지 않는다. */
.track {
  position: sticky; top: var(--nav-h); z-index: 9;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(var(--s2));
  border-bottom: 1px solid var(--line);
}
.track-row {
  min-height: var(--tap-min);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4);
}
.track-step {
  font-size: var(--t-micro);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  font-weight: var(--w-bold);
  color: var(--ink-55);
}
/* accent 는 한 화면에 한 번. 그 한 번이 값이다 */
.track-price {
  font-size: var(--t-small);
  line-height: var(--lh-snug);
  font-weight: var(--w-bold);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* 마지막 장에서는 값 색을 돈 내는 단추 하나에 넘긴다 */
.on-last .track-price { color: var(--ink-70); }
.bar { height: var(--s1); background: var(--line); }
.bar-fill {
  display: block; height: 100%;
  background: var(--prim);
  transition: width var(--ease);
}

/* ── 한 장 ────────────────────────────────────────────────────────────── */
.step { display: none; padding-block: var(--s6) var(--s7); border-top: 0; }
.step.on { display: block; }
.step + .step { border-top: 0; }

/* 한 장에 묻는 것을 묶는다. 라이브는 한 패널에 질문 세 개가 든 장이 넷이었다 */
.panel { max-width: var(--measure); }
.panel h2 { outline: none; }
.panel .lead { margin-bottom: var(--s6); }
.panel h2 + .fset,
.panel h2 + .cal,
.panel h2 + .fld { margin-top: var(--s6); }

/* ── 묻는 덩이 ────────────────────────────────────────────────────────── */
.fset { border: 0; margin: 0; padding: 0; }
.fset + .fset, .fset + .fld, .fld + .fset, .fld + .fld,
.fset + #stayBlock, #stayBlock + #prefBlock, .opts + .fld { margin-top: var(--s6); }

.fld { display: block; }
.fld-label, legend.fld-label {
  display: block;
  font-size: var(--t-small);
  line-height: var(--lh-snug);
  font-weight: var(--w-bold);
  color: var(--ink);
  margin-bottom: var(--s3);
  padding: 0;
}
.fld-help {
  display: block;
  font-size: var(--t-small);
  line-height: var(--lh-loose);
  color: var(--ink-55);
  margin-top: var(--s2);
}

/* 입력칸 — 높이는 단추와 같다. 글자는 본문 크기 그대로다 */
input[type="text"], input[type="email"], input[type="search"],
input[type="time"], input[type="date"], select, textarea {
  width: 100%;
  min-height: var(--btn-h);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-body);
  line-height: var(--lh-loose);
}
textarea { min-height: var(--s9); resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--ink-55); }
input:focus, textarea:focus, select:focus { border-color: var(--prim); }

.grid2 { display: grid; gap: var(--s4); }
@media (min-width: 600px) { .grid2 { grid-template-columns: 1fr 1fr; } }

/* ── 고르는 줄 ────────────────────────────────────────────────────────────
 * 라이브는 체크 칸이 13px 짜리 기본 모양이었다. 여기서는 줄 전체가 누르는
 * 자리다. 줄 높이가 터치 바닥을 넘고, 네모 자체도 24 로 키워 보인다. */
.opts { display: grid; gap: var(--s3); }
.opts-tight { gap: var(--s2); }

.opt {
  display: flex; align-items: flex-start; gap: var(--s4);
  min-height: var(--btn-h);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
}
.opt:hover { border-color: var(--prim); }
.opt input { flex: none; width: var(--s5); height: var(--s5); margin: 0; accent-color: var(--prim); }
.opt-body { display: block; }
.opt-name {
  display: block;
  font-size: var(--t-body);
  line-height: var(--lh-snug);
  font-weight: var(--w-med);
}
.opt-sub {
  display: block;
  font-size: var(--t-small);
  line-height: var(--lh-loose);
  color: var(--ink-55);
  margin-top: var(--s1);
}
/* 고른 줄은 테두리와 옅은 면으로 표시한다. 새 색을 쓰지 않는다 */
.opt:has(input:checked) { border-color: var(--prim); background: var(--prim-wash); }
.opt:has(input:focus-visible) { outline: var(--s1) solid var(--prim); outline-offset: var(--s1); }

/* 도시 묶음 머리 */
.group {
  font-size: var(--t-micro);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  font-weight: var(--w-bold);
  color: var(--ink-55);
  margin-top: var(--s5);
}
.group:first-child { margin-top: 0; }
.fld-find { margin-bottom: var(--s4); }

/* 고른 것을 글로 되읽어 준다. 라이브는 "2 cities picked" 뿐이고 어느 둘인지
 * 보려면 스무 줄을 거슬러 올라가야 했다 */
.picked {
  font-size: var(--t-small);
  line-height: var(--lh-loose);
  font-weight: var(--w-med);
  color: var(--prim);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  background: var(--prim-wash);
  margin-bottom: var(--s5);
}
.empty { margin-top: var(--s4); }

/* ── 알약 꼴 고르기 — 짧은 답이 여럿일 때 ─────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: var(--tap-min);
  padding: 0 var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: var(--t-body);
  line-height: var(--lh-snug);
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
}
.chip input { flex: none; width: var(--s5); height: var(--s5); margin: 0; accent-color: var(--prim); }
.chip:has(input:checked) { border-color: var(--prim); background: var(--prim-wash); font-weight: var(--w-med); }
.chip:has(input:focus-visible) { outline: var(--s1) solid var(--prim); outline-offset: var(--s1); }

/* ── 숫자 올리고 내리기 ──────────────────────────────────────────────── */
.stepper { display: flex; align-items: center; gap: var(--s3); }
.step-btn {
  min-width: var(--btn-h); min-height: var(--btn-h);
  padding: 0 var(--s4);
  border: 1px solid var(--ink);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-small);
  line-height: var(--lh-snug);
  font-weight: var(--w-bold);
  cursor: pointer;
}
.step-btn:disabled { color: var(--ink-55); border-color: var(--line); cursor: default; }
.step-val {
  min-width: var(--s8);
  text-align: center;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}

/* ── 접어 두는 덩이 ──────────────────────────────────────────────────── */
.fold {
  margin-top: var(--s6);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.fold summary {
  min-height: var(--btn-h);
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  font-size: var(--t-body);
  line-height: var(--lh-snug);
  font-weight: var(--w-med);
  cursor: pointer;
  list-style: none;
}
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after {
  content: "+"; margin-left: auto;
  font-size: var(--t-h3); font-weight: var(--w-reg); color: var(--prim);
}
.fold[open] summary::after { content: "\2212"; }
.fold-body { padding: 0 var(--s4) var(--s4); }
.fold-body .note { margin-bottom: var(--s4); }

/* ── 달력 ─────────────────────────────────────────────────────────────────
 * 360px 에서 한 칸이 44 를 지켜야 하는데 일곱 칸이다. 7 x 44 = 308 이고
 * 좌우 여백 40 을 빼면 320 이 남으니 들어간다. 칸 사이를 벌리지 않고
 * 테두리 하나로 가른다. 여백으로 벌리면 그 선에서 넘친다. */
.cal { display: grid; gap: var(--s6); }
@media (min-width: 600px) { .cal { grid-template-columns: 1fr 1fr; } }
.cal-head {
  font-size: var(--t-small);
  line-height: var(--lh-snug);
  font-weight: var(--w-bold);
  margin-bottom: var(--s3);
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
.cal-dow {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--s6);
  font-size: var(--t-micro);
  line-height: var(--lh-snug);
  font-weight: var(--w-bold);
  color: var(--ink-55);
  border-bottom: 1px solid var(--line);
}
.cal-pad { min-height: var(--tap-min); }
.cal-day {
  min-height: var(--tap-min);
  display: flex; align-items: center; justify-content: center;
  border: 0;
  /* 브라우저가 단추에 기본으로 넣는 1px 6px 를 지운다. 여백은 4의 배수만 쓴다 */
  padding: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-small);
  line-height: var(--lh-snug);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.cal-day:hover:not(:disabled) { background: var(--prim-wash); }
/* 오늘 이전 날은 눌리지 않는다. 자리는 그대로 두고 글자만 흐리게 둬
   달의 칸 수가 바뀌지 않게 한다 */
.cal-day:disabled { color: var(--ink-55); cursor: default; }
.cal-day.in { background: var(--prim-wash); color: var(--prim); font-weight: var(--w-med); }
.cal-day.edge { background: var(--prim); color: var(--surface); font-weight: var(--w-bold); }

/* ── 묶은 잠자리 줄 ──────────────────────────────────────────────────── */
.stay { display: grid; gap: var(--s3); margin-bottom: var(--s3); }
@media (min-width: 600px) { .stay { grid-template-columns: 1.4fr 1fr; } }
.btn-wide { width: 100%; margin-top: var(--s3); }
@media (min-width: 600px) { .btn-wide { width: auto; } }

/* ── 건강 정보 동의 ───────────────────────────────────────────────────── */
.consent {
  margin-top: var(--s6);
  padding: var(--card-p);
  border: 1px solid var(--prim);
  border-radius: var(--r-lg);
  background: var(--prim-wash);
}
.consent h3 { font-size: var(--t-h3); line-height: var(--lh-snug); margin-bottom: var(--s3); }
.consent .note { margin-bottom: var(--s4); }
.opt-consent { background: var(--surface); }

/* ── 마지막 장 확인 줄 ───────────────────────────────────────────────── */
.review {
  margin: 0 0 var(--s6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.review > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s1);
  padding: var(--s4);
  border-bottom: 1px solid var(--line);
}
.review > div:last-child { border-bottom: 0; }
@media (min-width: 600px) {
  .review > div { grid-template-columns: var(--s9) 1fr; gap: var(--s4); align-items: baseline; }
}
.review dt {
  font-size: var(--t-micro);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  font-weight: var(--w-bold);
  color: var(--ink-55);
}
.review dd {
  margin: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4);
  font-size: var(--t-body);
  line-height: var(--lh-loose);
}
/* 줄마다 돌아가는 길을 둔다. 44 를 지키려고 글자 높이에 여백을 붙인다 */
.link-btn {
  flex: none;
  min-height: var(--tap-min);
  padding: 0 var(--s2);
  border: 0; background: transparent;
  color: var(--prim);
  font: inherit;
  font-size: var(--t-small);
  line-height: var(--lh-snug);
  font-weight: var(--w-bold);
  text-decoration: underline;
  text-underline-offset: var(--s1);
  cursor: pointer;
}

/* ── 계산 ─────────────────────────────────────────────────────────────── */
.bill {
  margin-top: var(--s6);
  padding: var(--card-p);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.bill-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4);
  padding-bottom: var(--s3);
  font-size: var(--t-body);
  line-height: var(--lh-loose);
  color: var(--ink-70);
  font-variant-numeric: tabular-nums;
}
.bill-total {
  margin-top: var(--s3);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-weight: var(--w-med);
}
.bill-total strong { font-size: var(--t-h3); line-height: var(--lh-snug); }
.bill .note { margin-top: var(--s3); }

/* 약관 두 줄. 문장 안의 링크가 아니라 각자 누르는 자리다 */
.legal { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s2); }
.legal a {
  display: inline-flex; align-items: center;
  min-height: var(--tap-min);
  font-size: var(--t-small);
  line-height: var(--lh-snug);
}

/* ── 아래 단추 줄 ────────────────────────────────────────────────────────
 * 라이브는 Back 과 Next 가 글 끝에 붙어 있어서 긴 장에서는 화면 밖이었다.
 * 둘을 아래에 고정하고, 주된 쪽에 폭을 더 준다. */
.navbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(var(--s2));
  border-top: 1px solid var(--line);
  padding-block: var(--s3);
  padding-bottom: max(var(--s3), env(safe-area-inset-bottom));
}
.navbar-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--s3);
}
@media (min-width: 600px) {
  .navbar-row { grid-template-columns: max-content max-content; justify-content: space-between; }
}
.navbar .btn { width: 100%; }
.navbar .btn:disabled { color: var(--ink-55); border-color: var(--line); cursor: default; }
/* 마지막 장의 주된 단추만 값 색을 쓴다. 돈 내는 자리는 한 군데다 */
.btn-pay { background: var(--accent); }
.btn-pay:hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); }