/* slowtravelkorea v0 — 랜딩 판짜기.
 *
 * 값은 전부 tokens.css 에서 가져온다. 이 파일에 px 을 손으로 적지 않는다.
 * (예외 둘 — 테두리 1px 과 clip 용 0. 그 둘은 규격이 아니라 그림이다.)
 */

/* ── 바닥깔기 ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--t-body);
  line-height: var(--lh-loose);
  font-weight: var(--w-reg);
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 { margin: 0; font-weight: var(--w-bold); }
p, ul, ol, dl { margin: 0; }
ul, ol { padding-left: var(--s5); }

/* 🔴 figure 와 blockquote 를 같이 지우는 이유 (2026-11-03 test_v0_pages.py 실측)
 * 브라우저 기본값이 `margin: 1em 40px` 이다. 1em 은 본문 크기에 매여 있어
 * 1440px 에서 17px 로 나왔고(본문 --t-body 가 거기서 17px), 여백이 4의 배수여야
 * 한다는 자에 걸렸다. 가로 40px 들여쓰기도 같이 남아 있어 그림이 글줄과 안 맞았다.
 * 여백은 전부 --s* 에서 나와야 한다 — 기본값이 섞이면 어디서 온 값인지 못 센다. */
figure, figcaption, blockquote { margin: 0; }

a { color: var(--prim); text-decoration-thickness: 1px; text-underline-offset: var(--s1); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: var(--s1) solid var(--prim);
  outline-offset: var(--s1);
  border-radius: var(--r-sm);
}

.skip {
  position: absolute; left: var(--s2); top: 0;
  padding: var(--s3) var(--s4);
  background: var(--ink); color: var(--bg);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transform: translateY(-100%);
}
.skip:focus { transform: translateY(0); }

/* ── 폭과 절 ───────────────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--page-x);
}

section { padding-block: var(--section-y); }
section + section { border-top: 1px solid var(--line); }

/* 글이 든 덩이는 68자에서 멈춘다 */
.prose { max-width: var(--measure); }

.eyebrow {
  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(--prim);
  margin-bottom: var(--s3);
}

h2 {
  font-size: var(--t-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h2);
  text-wrap: balance;
}

h3 {
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
}

.lead {
  font-size: var(--t-lead);
  line-height: var(--lh-loose);
  color: var(--ink-70);
  margin-top: var(--s4);
}

.note {
  font-size: var(--t-small);
  line-height: var(--lh-loose);
  color: var(--ink-55);
}

/* ── 맨 위 줄 ──────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(var(--s2));
  border-bottom: 1px solid var(--line);
}
.topbar .wrap {
  min-height: var(--nav-h);
  display: flex; align-items: center; gap: var(--s4);
}
.brand {
  display: inline-flex; align-items: center;
  min-height: var(--tap-min);
  font-size: var(--t-body);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-h2);
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
/* 폰에서는 차림표 다섯 칸을 지운다. 파는 단추 하나만 남긴다 */
.topnav { display: none; }

/* 🔴 폰에서 다른 장으로 가는 길 (김민수 지시 2026-11-05).
   위 차림표는 960px 아래에서 통째로 숨는다 — 폰에서 파는 단추 하나만 남기기로 한
   것이고 그 판단은 그대로 둔다. 다만 그러면 다른 장으로 갈 길이 **아예** 없어져
   바닥글까지 내려가야 했다. 11-03 판은 그 오른쪽에 Notes 한 칸만 두었는데, 숨는
   칸이 다섯이라 한 칸으로는 모자랐다. 그래서 단추는 그대로 두고 그 오른쪽에 三 하나를
   두어 눌러서 모든 장을 연다. 단추 꼴을 주지 않아 엄지가 어디로 갈지 흐려지지 않는다. */
/* 🔴 단추는 찌그러지지 않는다. flex-shrink 를 1 로 두면 좁은 폭에서 상자만 줄고
   nowrap 글자는 그대로라 글자가 상자 밖으로 흘러 브랜드 위에 올라탄다 — 360px 에서
   3px, 320px 에서 23px 넘친 것을 사진으로 먼저 보고 scrollWidth 로 확인했다.
   상자 크기(getBoundingClientRect)만 보면 「겹침 0」으로 통과한다. 글자 넘침은
   scrollWidth 에서만 드러난다. */
.topbar .btn { margin-left: auto; white-space: nowrap; flex-shrink: 0; }
/* 360px 에서 브랜드 148 + 단추 128 + 오른쪽 칸 56 + 사이 16 + 좌우 여백 40 = 388 로
   28px 모자랐다. 폰에서만 사이와 여백과 글자를 깎아 32px 를 만든다.
   三 칸은 44 라 Notes 글자(56)보다 12px 덜 먹는다 — 자리는 그만큼 남는다. */
.topbar .wrap { gap: var(--s1); padding-inline: var(--s4); }
/* 폰에서 브랜드를 한 단계 내린다. 16px 로 두면 360px 에서 21px 이 모자라 글자가
   잘렸다(SlowTravelKo…). 잘린 브랜드보다 한 치수 작은 브랜드가 낫다. 320px 처럼
   더 좁은 자리는 그래도 모자라니 거기서만 말줄임으로 떨어진다. */
.brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
         font-size: var(--t-small); }
/* 🔴 <details> 로 짠다. 이 장들에는 script 가 한 줄도 없고 앞으로도 없다 — 열고
   닫기, 키보드 Enter, 포커스를 브라우저가 공짜로 해 준다. 체크박스 꼼수나 JS 는
   그 공짜를 손으로 다시 짜는 일이다. 다만 바깥을 눌러 닫는 것은 details 가 안 해
   주니, 장을 옮기면 저절로 닫히는 것(새로 그려짐)으로 갈음한다. */
.menu { position: relative; flex-shrink: 0; }
/* 🔴 바탕도 테두리도 주지 않는다 (김민수 지적 2026-11-05 · 라이브 사진).
   1회차는 흰 바탕(--surface)에 테두리를 둘렀다. 맨 위 줄 바탕은 #f4f3ef 이고 그 줄에
   테두리를 두른 것이 하나도 없어서, 三 칸만 흰 네모로 떠 보였다. 파는 단추 옆에 상자가
   둘이면 어디를 눌러야 하는지도 흐려진다. 글자 하나만 남기고 상자를 걷는다. */
.menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap-min); min-height: var(--tap-min);
  font-size: var(--t-body); line-height: 1;
  color: var(--ink);
  cursor: pointer;
  border: 0; background: none;
  list-style: none;            /* 파이어폭스 삼각형 */
}
.menu-btn::-webkit-details-marker { display: none; }   /* 사파리·크롬 삼각형 */
.menu-btn::marker { content: ""; }
.menu-btn:hover { color: var(--prim); }
.menu[open] > .menu-btn { color: var(--prim); }
/* 🔴 absolute 로 띄운다. flex 줄 안에 그대로 두면 열 때 맨 위 줄이 늘어나 본문이
   아래로 밀린다 — 열었다 닫을 때마다 화면이 튄다. */
/* 🔴 닫힘 상태를 손으로 끈다. details 가 알아서 숨겨 줄 거라고 두면 안 된다 —
   요즘 브라우저는 안 열린 속을 ::details-content 에 content-visibility: hidden 으로
   덮는데, 그 속에서 absolute 로 떠 버린 칸은 그 덮개를 빠져나온다. 1회차 실측:
   일곱 장 x 폭 여섯 = 42자리 전부 「안 눌렀는데 펴져 있다」로 걸렸다. */
.menu-panel {
  display: none;                /* 열릴 때만 켠다. 아래 .menu[open] 한 줄이 켠다 */
  position: absolute; z-index: 20;
  top: calc(100% + var(--s2)); right: 0;
  flex-direction: column;
  min-width: 11.5rem;
  padding-block: var(--s2);
  /* 떠 있는 것은 카드다 — 카드 바닥(--surface)과 카드 둥글기(--r-lg)를 쓴다.
     그림자도 한 종(--shadow)뿐이고 그 한 종이 카드에 쓰는 것이다. */
  background: var(--surface);
  border: var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  /* 칸이 아홉이라 작은 폰에서는 넘친다. 창 안에서 굴러가게 둔다 */
  max-height: calc(100vh - var(--nav-h) - var(--s5));
  overflow-y: auto;
}
.menu[open] > .menu-panel { display: flex; }
.menu-panel a {
  display: flex; align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--s4);
  font-size: var(--t-small);
  color: var(--ink-70);
  text-decoration: none;
  white-space: nowrap;
}
.topnote:hover { color: var(--ink); text-decoration: underline; }
.menu-panel a:hover { color: var(--ink); background: var(--bg); }
.menu-panel a[aria-current="page"] { color: var(--ink); font-weight: var(--w-bold); }
.menu-panel hr { margin: var(--s2) 0; border: 0; border-top: var(--border); }
/* 🔴 데스크톱 맨 위 줄의 세 값은 SaaS 넷을 1440px 에서 재서 맞춘 것이다
   (2026-11-07 플레이라이트 실측 · Stripe · Linear · Notion · Vercel).

     잰 것          고치기 전 우리   스트라이프  리니어  노션  버셀   맞춘 값
     차림표 글자      17px           14      13     16    14    14 (--t-small)
     차림표와 단추    16px            399*    29    289   734   남는 폭 전부
     브랜드와 첫 칸   201~449px       34       —     —     0    32 (--s6)
     * 차림표 끝에서 오른쪽 행동 덩이까지의 거리.

   읽은 표준 — 넷 다 차림표 글자를 본문보다 작게 두고, 차림표와 파는 단추 사이를
   칸 사이보다 훨씬 크게 벌려 둘을 다른 덩이로 가른다. 우리는 그 자리가 16px 로
   칸 사이(24px)보다 **좁아서** 단추가 일곱 번째 차림표 칸으로 읽혔다. 그래서
   브랜드에서 밀어내기(margin-right: auto)를 걷어 브랜드와 차림표를 왼쪽에 붙이고,
   남는 폭 전부를 파는 단추 앞에 둔다(폰과 같은 .topbar .btn 의 margin-left: auto).
   🔴 밀어내기는 줄에 **하나만** 둔다. 차림표 쪽에도 같이 주면 남는 폭이 반으로
      갈려 차림표가 다시 가운데로 가고, 차림표가 없는 장(주문·광고 도착지)에서는
      밀어줄 것이 없어져 단추가 브랜드에 들러붙는다. */
@media (min-width: 960px) {
  .topnav { display: flex; gap: var(--s5); align-items: center;
            margin-left: var(--s6); }
  .topnote { display: none; }
  .menu { display: none; }
  .topbar .wrap { gap: var(--s4); padding-inline: var(--page-x); }
  .brand { font-size: var(--t-body); margin-right: 0; }
  .topnav a {
    color: var(--ink-70);
    text-decoration: none;
    font-size: var(--t-small);
    min-height: var(--tap-min);
    display: inline-flex; align-items: center;
  }
  .topnav a:hover { color: var(--ink); text-decoration: underline; }
}

/* ── 단추 ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  min-height: var(--btn-h);
  min-width: var(--tap-min);
  padding: 0 var(--btn-px);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--t-body);
  line-height: var(--lh-snug);
  font-weight: var(--w-bold);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.btn-primary { background: var(--prim); color: var(--surface); }
.btn-primary:hover { background: var(--prim-dark); }
/* 보조 단추는 테두리만. 주된 단추와 무게를 벌린다 */
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--surface); }
.btn-sm { min-height: var(--btn-h-sm); font-size: var(--t-small); padding: 0 var(--s4); }

/* 폰에서는 단추를 폭 전체로. 엄지가 어디를 눌러도 맞는다 */
.btns { display: grid; gap: var(--s3); margin-top: var(--s5); }
@media (min-width: 600px) {
  .btns { grid-auto-flow: column; justify-content: start; gap: var(--s4); }
}

/* ── 히어로 ────────────────────────────────────────────────────────────── */
/* 360px 세로 800 안에 제목과 주된 단추까지 들어가야 한다.
 * 그래서 사진을 배경으로 깔지 않고 글 아래로 내렸다. 글이 먼저 그려진다. */
.hero { padding-block: var(--s6) var(--section-y); border-top: 0; }
.hero h1 {
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
.hero .lead { max-width: var(--measure); }
.hero-meta {
  margin-top: var(--s5);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  font-size: var(--t-small);
  color: var(--ink-55);
  list-style: none; padding: 0;
}
.hero-shot { margin-top: var(--s6); }
.hero-shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
}
/* 사진 출처는 사진 아래에 둔다. 손님이 처음 읽는 줄이 출처면 안 된다 */
.credit { margin-top: var(--s2); font-size: var(--t-micro); color: var(--ink-55); }

@media (min-width: 960px) {
  .hero .wrap {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--s8);
    align-items: center;
  }
  .hero-shot { margin-top: 0; }
  .hero-shot img { aspect-ratio: 3 / 4; }
}

/* ── 카드 ──────────────────────────────────────────────────────────────── */
.cards {
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: repeat(auto-fit, minmax(var(--col-min), 1fr));
  margin-top: var(--s6);
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--card-p);
}
.card h3 { margin-bottom: var(--s3); }
.card p { color: var(--ink-70); }

/* ── 샘플 절 ───────────────────────────────────────────────────────────── */
.sample { display: grid; gap: var(--s6); margin-top: var(--s6); }
@media (min-width: 960px) {
  .sample { grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: start; }
}
.sample img {
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}
/* 하루치 일정 미리보기. 시각과 할 일이 두 칸으로 선다 */
.day {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--card-p);
}
.day-head {
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  font-weight: var(--w-bold);
  color: var(--ink-55);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.day-row {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s2) var(--s4);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--line);
}
.day-row:last-child { border-bottom: 0; padding-bottom: 0; }
.day-time {
  font-size: var(--t-small);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-loose);
}
.day-what strong { display: block; font-weight: var(--w-med); }
.day-what span { display: block; font-size: var(--t-small); color: var(--ink-55); }

/* ── 어떻게 되나 — 번호 셋 ─────────────────────────────────────────────── */
.steps {
  list-style: none; padding: 0;
  display: grid; gap: var(--card-gap);
  grid-template-columns: repeat(auto-fit, minmax(var(--col-min), 1fr));
  margin-top: var(--s6);
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--card-p);
}
.steps li::before {
  content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: var(--s6); height: var(--s6);
  margin-bottom: var(--s4);
  border-radius: var(--r-md);
  background: var(--prim-wash);
  color: var(--prim);
  font-size: var(--t-body);
  font-weight: var(--w-bold);
}
.steps h3 { margin-bottom: var(--s2); }
.steps p { color: var(--ink-70); }

/* ── 값 ────────────────────────────────────────────────────────────────── */
/* 폰에서 표를 쓰지 않는다. 라이브에서 이 표가 360 화면을 620px 까지 밀었다.
 * 네 벌을 세로 카드로 세우고 우리 것을 맨 위에 둔다. */
/* 네 벌이라 auto-fit 에 맡기면 1120px 에서 3 + 1 로 끊어져 마지막 한 장이 혼자 선다.
 * 비교는 나란히 놓고 읽는 것이라 짝수로 고정한다. 폰 1열, 그 위로 2 x 2. */
.plans {
  list-style: none; padding: 0;
  display: grid; gap: var(--card-gap);
  grid-template-columns: 1fr;
  margin-top: var(--s6);
}
@media (min-width: 600px) {
  .plans { grid-template-columns: 1fr 1fr; }
}
.plan {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--card-p);
  display: flex; flex-direction: column; gap: var(--s3);
}
.plan-ours { border-color: var(--prim); box-shadow: var(--shadow); }
.plan-tag {
  align-self: start;
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  font-weight: var(--w-bold);
  padding: var(--s1) var(--s2);
  border-radius: var(--r-sm);
  background: var(--prim-wash);
  color: var(--prim);
}
.plan-name { font-size: var(--t-h3); line-height: var(--lh-snug); font-weight: var(--w-bold); }
.plan-price { font-size: var(--t-h3); line-height: var(--lh-snug); font-weight: var(--w-bold); }
/* 다섯 색 중 accent 는 값 한 자리에만 쓴다 */
.plan-ours .plan-price { color: var(--accent); }
.plan dl { display: grid; gap: var(--s3); margin: 0; }
.plan dt {
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  font-weight: var(--w-bold);
  color: var(--ink-55);
}
.plan dd { margin: 0; font-size: var(--t-small); line-height: var(--lh-loose); }

/* 며칠치면 얼마인가. 라이브에 합계가 어디에도 없던 자리다 */
.totals {
  margin-top: var(--s6);
  display: grid; gap: var(--s3);
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 960px) {
  .totals { grid-template-columns: repeat(4, 1fr); }
}
.total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.total span { font-size: var(--t-small); color: var(--ink-70); }
.total strong { font-size: var(--t-h3); font-variant-numeric: tabular-nums; }

/* ── 묻는 말 ───────────────────────────────────────────────────────────── */
.faq { margin-top: var(--s6); max-width: var(--measure); }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  min-height: var(--btn-h);
  display: flex; align-items: center; gap: var(--s4);
  padding-block: var(--s4);
  font-size: var(--t-body);
  font-weight: var(--w-med);
  line-height: var(--lh-snug);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  margin-left: auto;
  font-size: var(--t-h3);
  font-weight: var(--w-reg);
  color: var(--prim);
  transition: transform var(--ease);
}
.faq details[open] summary::after { content: "\2212"; }
.faq p { padding-bottom: var(--s5); color: var(--ink-70); }

/* ── 맺음 ──────────────────────────────────────────────────────────────── */
.closer { background: var(--ink); color: var(--bg); }
.closer h2 { color: var(--bg); }
.closer .lead { color: color-mix(in srgb, var(--bg) 72%, transparent); }
.closer .btn-ghost { color: var(--bg); border-color: var(--bg); }
.closer .btn-ghost:hover { background: color-mix(in srgb, var(--bg) 14%, transparent); }
.closer .note { color: color-mix(in srgb, var(--bg) 60%, transparent); }

/* ── 바닥글 ────────────────────────────────────────────────────────────── */
/* 라이브 바닥글 링크 일곱 개가 전부 높이 22px 였다. 여기서는 터치 바닥을 세운다 */
footer { border-top: 1px solid var(--line); padding-block: var(--s7); }
.foot-cols {
  display: grid; gap: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(var(--col-min), 1fr));
}
.foot-cols h3 {
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--ink-55);
  margin-bottom: var(--s2);
}
.foot-cols ul { list-style: none; padding: 0; }
.foot-cols a {
  display: flex; align-items: center;
  min-height: var(--tap-min);
  color: var(--ink-70);
  text-decoration: none;
}
.foot-cols a:hover { color: var(--prim); text-decoration: underline; }
.foot-base {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

/* ── 폰 아래쪽 고정 단추 ───────────────────────────────────────────────── */
/* 히어로를 지나간 뒤에도 사는 자리가 손에 닿아야 한다. 데스크톱에서는 숨긴다 */
.sticky-buy {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: var(--s3) var(--page-x);
  padding-bottom: max(var(--s3), env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(var(--s2));
  border-top: 1px solid var(--line);
}
.sticky-buy .btn { width: 100%; }
body { padding-bottom: calc(var(--btn-h) + var(--s6)); }
@media (min-width: 960px) {
  .sticky-buy { display: none; }
  body { padding-bottom: 0; }
}