/* 싸고 재밌게 놀자 — 화면 스타일
 *
 * 이 사이트가 파는 것은 "결정"이다. 그래서 화면에서 가장 큰 글자는 상품명이
 * 아니라 **가격과 목적지**다. 사용자가 스크롤하면서 읽는 것이 아니라
 * 훑으면서 고를 수 있어야 한다.
 *
 * 모바일이 기본이다. 여행지를 고르는 일은 대부분 침대에서 폰으로 한다.
 */

:root {
  /* **밝은 화면만 쓴다.** 한때 `light dark` 였다 — 그러면 기기 설정이
     어두움인 사람에게는 사이트가 저절로 어두워지는데, 요즘 폰·PC 의 기본
     설정이 어두움인 경우가 많아 "대부분 다크모드로 들어가진다"가 됐다
     (운영자 지적 2026-09-10). 어두운 판은 손으로 맞춘 자리가 아니라
     색 변수만 뒤집은 것이라, 사진 위 글씨·지도 타일·rgba 로 박아 둔 칩
     배경처럼 변수를 안 타는 곳이 그대로 남아 어긋났다 — 운영자가
     2026-09-09 에 이미 "다크모드에서는 글자도 잘 안보여"라고 지적했다.

     이 값이 `light` 여야 하는 까닭은 색 변수만으로는 안 되는 것이 있어서다.
     스크롤바·`<select>` 목록·입력칸 같은 **브라우저가 직접 그리는 부품**은
     CSS 변수를 안 보고 이 값만 본다. `light dark` 로 두고 색만 밝게 잡으면
     밝은 화면에 검은 드롭다운이 뜬다.

     어두운 판을 지우지는 않았다 — 아래 `[data-theme="dark"]` 로 남겨서
     골라 쓸 수 있게 뒀다. 기기 설정(`prefers-color-scheme`)으로는 더 이상
     저절로 켜지지 않는다. */
  color-scheme: light;

  --paper:  #f4f6f8;
  --card:   #ffffff;
  --ink:    #10161d;
  --ink-2:  #55616e;
  /* 보조 문구 색. 4.5:1 을 넘겨야 한다 — 이 색이 제휴 고지와 값의 근거
     설명(.note)에 쓰이는데, 하필 그 두 가지가 이 사이트에서 제일 읽혀야
     하는 문장이다. 이전 값 #8c98a5 는 흰 배경 대비 2.94:1 로 큰 글자
     기준(3:1)에도 못 미쳤다. */
  --ink-3:  #68727f;   /* 흰 배경 대비 4.88:1 */
  --line:   #dde3ea;
  /* **누를 수 있는 것**의 테두리. --line 은 칸을 나누는 선이라 연해야 하고,
     버튼 테두리는 그 버튼이 거기 있다는 걸 알려야 해서 세기가 다르다.
     실측(2026-08-24) /guide/ 의 조건 버튼이 --line 1px 이라, 흰 바탕
     위에서 대비 1.3:1 이었다 — 사용자가 "회색이라 안 보인다"고 한 게
     그 선이다. 테두리는 글자가 아니라 비문자 요소이므로 기준이 3:1 이다 —
     #98a5b3 은 2.5:1 이라 모자라고, #808e9d 가 3.35:1 로 넘긴다. */
  --line-2: #808e9d;
  --brand:  #f4511e;   /* 결정을 재촉하는 색. 링크가 아니라 '행동'에만 쓴다 */
  --brand-ink: #ffffff;
  /* **주황을 글자로 쓸 때**의 색. --sale 과 같은 이유로 따로 둔다 —
     --brand 는 단추 바탕에 흰 글씨를 얹으라고 고른 색이라 글자로 쓰면
     --paper 대비 3.21:1 밖에 안 나온다. 값을 강조하는 자리
     (제일 싼 일정·제일 싼 요일·예산 칸의 곳 수)가 전부 그 색이었고,
     그게 폰에서 "금액이 잘 안 보인다"로 돌아왔다.
     여기 값은 paper 4.85 · card 5.25 · blue-soft 4.57 로 세 바탕 전부에서
     본문 기준(4.5:1)을 넘긴다.
     --sale(빨강)을 쓰지 않는 이유: 그건 '깎였다'는 뜻이고 여기는
     '제일 싸다'는 뜻이라, 두 가지가 같은 색이면 구분이 사라진다. */
  --brand-text: #bf4207;
  /* "78%↓" 처럼 **글자로 읽어야 하는 할인율**의 색. --brand 를 그대로
     쓰고 있었는데 그 색은 단추 바탕에 흰 글씨로 얹으라고 고른 것이라,
     글자 색으로 쓰면 --paper 대비 3.21:1 로 4.5:1 에 못 미친다
     (PSI 2026-08-28 접근성 지적). 여기 값은 할인 카드가 깔리는 세 바탕
     전부에서 4.5:1 을 넘긴다 — paper 5.19, card 5.62, 마우스 올렸을 때
     blue-soft 4.89. */
  --sale:   #c62828;
  /* **제목 숫자 색(.hl = crimson)의 본문 크기용 짝.** --brand / --brand-text
     가 갈라져 있는 것과 같은 이유다: crimson(#DC143C)은 어두운 판(#0e1216)
     대비 3.77:1, 카드(#161c23) 대비 3.44:1 로 본문 기준 4.5:1 에 못 미친다.
     표 안의 숫자는 clamp(.9rem~1.02rem) = 14~16px 이라 본문 크기다.
     여기 값은 밝은 판 card 5.88 · paper 5.43, 어두운 판 card 6.27 ·
     paper 6.87 로 네 바탕 전부에서 넘긴다.
     --sale(#c62828)을 쓰지 않는 이유: 그건 '깎였다 · 비싼 편 · 자리 없음'
     이라는 뜻을 이미 지고 있다(.badge.high · .sold-out). 개수와 값에 같은
     색을 쓰면 그 구분이 사라진다. */
  --hl-text: #c8102e;
  --accent: #1256a0;   /* 값·링크 */
  --good:   #0b7d3b;
  --spark-line: #2a78d6;
  --spark-surface: #ffffff;
  --blue-soft: #e3f1fd;
  /* 월별 막대. 같은 색상(hue) 안에서 밝기로만 강조를 준다 —
   * 색을 두 개 쓰면 색약 사용자에게 두 계열처럼 읽힌다. */
  --bar:      #b3c8e0;
  --bar-best: #2a78d6;

  --r: 14px;
  --shadow: 0 1px 2px rgba(16,22,29,.05), 0 4px 16px rgba(16,22,29,.06);
  /* 프리텐다드가 오기 전에 **글이 안 움직이도록** 대신 서는 글꼴.
     `돌아갈 글꼴` 이 무엇인지는 아래 @font-face 에 적혀 있다. */
  --sans: "Pretendard Variable", Pretendard, "돌아갈 글꼴",
          -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

/* ── 프리텐다드가 오기 전에 서 있는 글꼴 ──
 *
 * 운영자 지적(2026-09-10): "처음의 글자들이 보여지다가 0.3~0.5초 후에
 * 프리텐다드로 변경되는 게 보인다. 뭔가 딜레이가 걸리고 변경되는 게 눈에
 * 보여서 거슬린다."
 *
 * 거슬리는 것이 둘로 나뉜다. 글꼴 모양이 바뀌는 것과, **글이 움직이는
 * 것**이다. 뒤엣것이 크다 — 실측(2026-09-10) 같은 한국어 문장이 맑은
 * 고딕에서 프리텐다드보다 **11.9~17.2% 넓다**. 그만큼 넓으면 줄바꿈 자리가
 * 달라져서, 글꼴이 도착하는 순간 문단이 통째로 다시 접히고 아래 것들이
 * 밀린다.
 *
 * size-adjust 는 대신 서는 글꼴의 em 크기를 줄여 준다. 87.5% 로 두면 위
 * 어긋남이 **-2.1~+2.6%** 로 떨어진다(같은 실측, 문장 다섯으로 확인).
 * 그 정도면 줄바꿈 자리가 거의 안 바뀌어서, 글꼴이 바뀌어도 글이 제자리에
 * 있다. 완전히 0 으로는 못 만든다 — 숫자와 한글이 서로 다른 비율로
 * 넓어지므로 한 값으로는 둘을 동시에 맞출 수 없다.
 *
 * **87.5% 는 맑은 고딕에서 잰 값이다.** 그래서 `local()` 도 맑은 고딕만
 * 적는다. 맥·안드로이드에서는 이 이름이 안 잡혀서 이 묶음이 통째로
 * 건너뛰어지고 --sans 의 다음 후보(-apple-system …)로 넘어간다 — 즉
 * 그 기기에서는 예전과 똑같이 동작한다. 거기 맞는 값은 그 기기에서
 * 재 봐야 알 수 있고, 재지 않은 숫자를 적어 두면 안 된다.
 *
 * unicode-range 를 좁게 잡은 까닭. 프리텐다드가 못 덮는 글자가 우리
 * 화면에 실제로 있다(상품 이름에 든 이모지·한자 — 표본 60쪽에서 310종).
 * 범위를 안 적으면 그 글자들까지 87.5% 로 작게 그려진다. 한글과 ASCII 만
 * 적으면 표본 글자의 **99.05%** 를 덮고, 나머지는 맑은 고딕 제 크기로
 * 넘어간다. 프리텐다드의 전체 범위를 그대로 옮겨 적으면 정확하기는 한데
 * gzip 으로 2,085바이트가 붇는다 — 좁게 적으면 168바이트다. */
@font-face {
  font-family: "돌아갈 글꼴";
  src: local("Malgun Gothic"), local("맑은 고딕");
  size-adjust: 87.5%;
  unicode-range: U+20-7e, U+ac00-d7a3, U+3131-318e, U+2010, U+2013-2019,
                 U+201c-201d, U+2022, U+2026, U+00b7, U+20a9, U+ff01-ff5e;
}

/* 어두운 판. **기기 설정으로 저절로 켜지지 않는다** — 위 `color-scheme` 에
   적어 둔 이유로, 켜려면 `<html data-theme="dark">` 로 골라야 한다.
   어두운 바탕에서 대비가 뒤집히는 색들은 그대로 남겨 뒀다 — 나중에 손으로
   고른 어두운 판을 만들 때 여기서 시작하면 된다. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0e1216; --card: #161c23; --ink: #eef2f6; --ink-2: #a7b2be;
  --ink-3: #8d98a4; --line: #262e37; --line-2: #6b7784;
  --accent: #7db2ee; --good: #46c07c;
  --spark-line: #3987e5; --spark-surface: #161c23;
  --bar: #35485e; --bar-best: #3987e5;
  --blue-soft: #17304a;
  --sale: #ff7a6b;
  --hl-text: #ff6b81;
  --brand-text: #ff8a5c;
  --shadow: none;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }

/* 한국어 줄바꿈. 브라우저 기본값은 한글을 **글자 단위로** 끊는다 —
   "어디서 뭐 하고 싶으세/요?" 처럼 낱말 가운데가 갈라진다. 영어에는
   없는 문제라 기본값이 그렇게 잡혀 있다.

   keep-all 이면 띄어쓰기에서만 끊는다. 대신 한 낱말이 칸보다 길면
   넘쳐 나가므로(긴 상품명·주소), 그때만 anywhere 가 받아 준다.
   둘을 같이 써야 옳고, 하나만 쓰면 다른 쪽이 깨진다. */
h1, h2, h3, p, li, dt, dd, .slogan, .tagline, .lede, .chip, .card-name,
.door-name, .door-eg, summary {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* 위 목록에 span 이 없어서 생긴 구멍을 막는다.

   word-break 는 물려받는 성질이라 <p>·<li> 안의 span 은 저절로 따라온다.
   문제는 **카드 안**이다 — 격자에 깔리는 카드는 <a> 안에 span 만 쌓여
   있어서(.cityc-meta > span 의 "후기 12,345건", .mc-count 의 "24곳")
   위 규칙이 닿는 조상이 하나도 없다. 거기서는 브라우저 기본값대로
   글자 단위로 끊겨서 숫자와 단위가 갈라졌다.

   여기서는 anywhere 가 아니라 break-word 를 쓴다. 둘 다 '한 낱말이
   칸보다 길 때만' 끊는 것은 같은데, anywhere 는 그 끊을 자리를
   min-content 계산에도 넣어서 격자 칸이 한 글자 폭까지 쪼그라들 수
   있다. span 은 격자·flex 안에 제일 많이 들어 있는 태그라 그 쪽이 위험이
   더 크다. */
span { word-break: keep-all; overflow-wrap: break-word; }

/* 금액은 단위와 갈라지면 안 된다.

   위 규칙만으로는 모자란다. 첫째, keep-all 이 걸린 자리(h1·p·li…)
   안이라도 낱말이 남은 칸보다 길면 anywhere 가 아무 데서나 끊는데,
   그 '아무 데'가 하필 숫자와 단위 사이다. 둘째, 값은 대개 <a> 나
   <div> 안의 span 이라 위 선택자가 아예 안 닿는다.

   그래서 폰에서 이렇게 보였다(실측 2026-09-06, /city/add/ h1):

       아디스 아바바 항공권 최저가, 지금 1,334,300
       원

   숫자만 남은 줄은 **값이 잘린 것**으로 읽힌다. 이 사이트가 파는 게
   값이라 이건 글자 모양 문제가 아니다.

   막는 방법은 하나뿐이다 — 값을 담는 자리에 nowrap 을 직접 박는 것.
   white-space 가 nowrap 이면 overflow-wrap 은 아예 안 걸린다. 자리를
   일일이 적어 두지 않으면 화면을 새로 만들 때마다 같은 일이 되풀이된다.

   tabular-nums 를 같이 준다. 값이 매일 바뀌는 사이트라, 자릿수마다
   너비가 다르면 어제 본 자리에서 오늘 숫자가 움찔거린다. */
.amt, .dest-price, .was, .num, .bd-price, .dow-price, .mw-price,
.course-cost, .budget-count, .mc-price, .hot-price,
.rank-price, .drop-now, .drop-was,
.lede b, .plan-total b, .count-note b {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 값 하나가 아니라 **값이 낀 문장**인 자리(“12,000원 아낌 (25%)”)는
   통째로 묶으면 카드를 넘친다. 띄어쓰기에서만 끊게 해서 '12,000원' 은
   붙어 있고 '아낌' 부터 다음 줄로 넘어가게 한다. .readout 은 카드 값칸
   전체다 — word-break 는 물려받는 성질이라 여기 한 번만 적으면 안쪽
   .price·.save·.note 가 다 따라온다. */
.readout, .save { word-break: keep-all; }

/* 자바스크립트가 글자로 만들어 넣는 값. saved.html·test.html·guide.html
   이 `toLocaleString('ko-KR') + '원'` 으로 문자열을 만들어 넣어서,
   템플릿을 고쳐도 이 값에는 안 닿는다. **CSS 로만 막을 수 있는 자리다.**
   (.course-cost 는 위 nowrap 목록에 이미 들어 있다.) */
.plan-price { white-space: nowrap; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 6px;
}

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--brand);
  color: var(--brand-ink); padding: 10px 16px; z-index: 10;
}
.skip:focus { left: 0; }

/* ── 상단바 ── */
/* 스크롤을 내려도 메뉴가 따라온다. 다시 맨 위로 올라가서 누르는 건
   그 자체로 이탈 이유가 된다. 배경을 반투명 + 흐림으로 둬서 아래
   내용이 비치게 한다 — 불투명한 띠는 화면을 잘라 놓은 것처럼 보인다. */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
}
/* 흐림을 못 쓰는 브라우저에서는 그냥 불투명하게. */
@supports not (backdrop-filter: blur(1px)) {
  .topbar { background: var(--card); }
}
/* 폰 메뉴를 펼치면 화면을 다 덮지 않게 스크롤을 준다. */
.topbar-in { max-height: 100dvh; overflow-y: auto; }
.topbar-in {
  max-width: 1120px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 12px;
}
/* 폰에서 홈으로 가는 유일한 길이다. 그림 48px 인데 줄 높이 때문에
   38px 로 서 있었다 — 그림보다 작은 누를 자리는 사람을 헷갈리게 한다. */
.brand {
  display: flex; align-items: center; gap: 9px; min-height: 44px;
  text-decoration: none; color: inherit;
}
/* 마스코트 얼굴. 뒤가 비어 있는 그림이라 어두운 화면에서도 그대로 쓴다. */
.brand-mark { width: 48px; height: 48px; display: block; flex: 0 0 48px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 800; letter-spacing: -.03em; font-size: 1.02rem; }
.brand-slogan { color: var(--ink-3); font-size: .68rem; font-weight: 700; }
/* 폰에서는 슬로건을 접는다. 메뉴가 다섯 개라 자리를 다투면 메뉴가 진다. */
@media (max-width: 560px) {
  .brand-mark { width: 38px; height: 38px; flex-basis: 38px; }
  .brand-slogan { display: none; }
}
.nav { margin-left: auto; display: flex; gap: 4px; }
.nav a {
  padding: 8px 12px; border-radius: 999px; text-decoration: none;
  color: var(--ink-2); font-weight: 600; font-size: .9rem; white-space: nowrap;
}
.nav a { transition: background .14s ease, color .14s ease; }
.nav a:hover { background: var(--blue-soft, #e3f1fd); color: var(--accent); }
.nav a[aria-current="page"] { background: var(--ink); color: var(--card); }

/* ── 히어로 ── */
.hero { background: var(--card); border-bottom: 1px solid var(--line); }
.hero-in { max-width: 1120px; margin: 0 auto; padding: 40px 16px 34px; }
.slogan {
  margin: 0; font-size: clamp(2rem, 1.2rem + 4vw, 3.4rem);
  font-weight: 800; letter-spacing: -.045em; line-height: 1.08;
}
.tagline { margin: 12px 0 0; color: var(--ink-2); font-size: clamp(.98rem, .9rem + .4vw, 1.14rem); max-width: 40ch; }
/* 운영자 지정(2026-09-10): 이 두 쪽은 글줄 폭 제한을 푼다. 40ch 는 읽기
   좋은 폭이지만, 여기 문장은 조건 고르개 바로 위의 안내라 두 줄로 접히면
   고르개와 사이가 벌어진다. **전역을 건드리지 않는다** — 도시 허브와
   코스 쪽의 소개문은 40ch 가 맞다. */
.wherepage .tagline, .whenpage .tagline { max-width: none; }
/* 슬로건 옆에 그림. 좁은 화면에서는 글이 먼저 오고 그림이 아래로 간다 —
   그림부터 보이면 첫 화면에서 이 사이트가 뭘 하는 곳인지 안 읽힌다. */
.hero-top { display: grid; gap: 20px; align-items: center; }
.hero-art {
  width: 100%; height: auto; display: block; border-radius: 16px;
  border: 1px solid var(--line);
}
@media (min-width: 860px) {
  .hero-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}
.ask { margin: 30px 0 10px; font-weight: 700; font-size: 1.02rem; }

.budgets { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: 0; padding: 0; }
.budget {
  display: flex; flex-direction: column; gap: 1px;
  padding: 11px 16px; border-radius: 12px; text-decoration: none;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink);
  min-width: 108px;
}
.budget:hover { border-color: var(--brand); }
.budget-label { font-weight: 700; font-size: .93rem; letter-spacing: -.01em; }
.budget-count { color: var(--brand-text); font-weight: 800; font-size: .84rem; }
.budget.empty { opacity: .45; }
.budget.empty .budget-count { color: var(--ink-3); }


/* ── 섹션 ── */
.band { padding: 34px 0; }
.band.alt { background: var(--card); border-block: 1px solid var(--line); }
.band-in { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.band-in.narrow { max-width: 660px; }
.head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
h2 { margin: 0; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 800; letter-spacing: -.03em; }
/* '전부 보기 →'. 8개 템플릿에서 17번 쓴다.
 *
 * 예전에는 `text-decoration: none` 만 걸린 맨 글자였다. 밑줄이 없어서
 * 링크로도 안 보이고, 높이가 글자 높이(22px)뿐이라 손가락으로 정확히
 * 짚기도 어려웠다. 운영자가 /today/ 에서 "블로그도 아니고 하이퍼링크로
 * 되어 있으면 누가 선택할까"라고 한 것과 같은 자리가 여기 17군데 있다.
 *
 * `.chip` 과 같은 알약으로 맞춘다 — 새 모양을 만들면 이 사이트에 누를
 * 수 있는 것의 생김새가 하나 더 늘어난다.
 *
 * `white-space: nowrap` 을 뺀다. "프랑크푸르트 비 오는 날 하루 코스 전체
 * 보기 →" 는 330px 라 320px 기기에서 **쪽 전체를 가로로 밀어냈다**.
 * 대신 `keep-all` 로 어절 안에서만 안 끊기게 한다. */
.more {
  margin-left: auto; align-self: center;
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; padding: 10px 15px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--card); color: var(--ink-2);
  text-decoration: none; font-weight: 700; font-size: .88rem;
  word-break: keep-all;
  transition: border-color .12s ease, color .12s ease;
}
.more:hover { border-color: var(--brand); color: var(--brand); }
.more:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
/* 회색 띠 위에서는 판을 뒤집는다 — 같은 색끼리 겹치면 알약이 안 보인다. */
.band.alt .more { background: var(--paper); }
.head-note { margin: 8px 0 0; color: var(--ink-2); font-size: .9rem; }
.body { margin: 12px 0 0; color: var(--ink-2); }
.body.muted { color: var(--ink-3); font-size: .92rem; }

.page-head { background: var(--card); border-bottom: 1px solid var(--line); padding: 30px 0 22px; }
/* 아래 끝을 1.5rem 에서 1.28rem 으로 내린다. 이 제목에는 도시 이름과
   곳 수가 같이 들어가서(“오사카 여행 가볼만한 곳”, “… 137곳”) 320px
   기기에서 세 줄까지 갔다. clamp 의 기울기로 메우면 360·390·414px 이
   각각 제 크기를 갖는다 — 미디어쿼리 단계로는 그 사이가 다 같아진다. */
.page-head h1 { margin: 0; font-size: clamp(1.28rem, 1rem + 1.9vw, 2.3rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.18; }

/* 같은 도시로 들어가는 다른 공항. 뉴욕은 JFK·EWR·NYC 로 들어가는데
   값이 서로 다르다. 이 줄이 그 쪽들로 가는 유일한 길이기도 하다. */
.alsoair { margin: 14px 0 0; font-size: .9rem; color: var(--ink-2); }
.alsoair a {
  display: inline-flex; align-items: center; min-height: 44px;
  margin: 3px 2px 0; padding: 8px 11px;
  border: 1px solid var(--line-2, #808e9d); border-radius: 999px;
  color: inherit; text-decoration: none; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.alsoair a:hover { border-color: var(--brand); color: var(--brand); }

/* ── 도시 허브 테마 바로가기 타일 (.hub-themes, city.html B-2, 2026-10-20) ──
 *
 * 2~3열 그리드. minmax(0,1fr)·min-width:0 로 글자 130% 에서 안 넘친다.
 * href 에 ? 쿼리 없는 길 안내 링크라 사진 없이 타일로만 구분. */
.hub-themes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
  gap: 8px; margin-top: 14px;
}
.hub-theme {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--card); border: 1.5px solid var(--line);
  text-decoration: none; color: var(--ink);
  min-width: 0;
  transition: border-color .12s ease;
}
.hub-theme:hover, .hub-theme:focus-visible { border-color: var(--accent); }
.hub-theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hub-theme-ico { flex: none; }
.hub-theme-name {
  font-size: .95rem; font-weight: 700; word-break: keep-all; min-width: 0;
  overflow-wrap: anywhere; line-height: 1.3;
}
.hub-theme-n { font-size: .82rem; color: var(--ink-3); }

/* ── 숙소가 없는 도시의 아고다 숙소 칸 (.astays) ──
 *
 * **우리 상품 카드(.card)와 일부러 다르게 생겼다.** 우리 카드에는 우리가
 * 직접 잰 값과 값 흐름 그래프가 붙는데 여기에는 값이 없다(약관이 요금
 * 저장을 금지한다). 같은 모양으로 섞으면 값이 빠진 것을 '아직 안 불러온
 * 것'으로 읽고, 우리 그래프의 신뢰까지 같이 떨어진다.
 *
 * 그래서 가로로 누운 칸이다 — 사진 왼쪽, 글 오른쪽. 값 자리가 없다.
 * `.offsite` 가 같은 이유로 카드와 다르게 생긴 것과 같은 장치다. */
.astays { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 760px) {
  .astays { grid-template-columns: repeat(3, 1fr); }
}
.astay-in {
  display: flex; gap: 12px; align-items: stretch;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; text-decoration: none; color: inherit;
}
.astay-in:hover { border-color: var(--ink-3); }
.astay-img {
  width: 108px; height: auto; align-self: stretch; object-fit: cover;
  background: var(--paper); flex: 0 0 auto;
}
@media (min-width: 760px) {
  /* 석 장이 나란히 설 때는 위아래로 눕는다 — 좁은 칸에서 사진이 108px 를
     먹으면 호텔 이름이 두 글자씩 끊긴다. */
  .astay-in { flex-direction: column; gap: 0; }
  .astay-img { width: 100%; height: 132px; }
}
.astay-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; min-width: 0; }
.astay-name {
  font-weight: 700; font-size: .92rem; line-height: 1.35; color: var(--ink);
  /* 호텔 이름이 길다("APA 호텔 앤 리조트 오사카 우메다 에키타마에"). 두 줄로
     자른다 — 세 줄이 되면 칸 높이가 저마다 달라져 줄이 어긋난다. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.astay-meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: .78rem; color: var(--ink-3);
}
.astay-star { color: #b8860b; font-weight: 700; }
.astay-score {
  font-weight: 800; color: var(--ink); background: var(--paper);
  border-radius: 6px; padding: 1px 6px;
}
.astay-cta { margin-top: 2px; font-size: .82rem; font-weight: 800; color: var(--accent); }

/* 같은 도시의 다른 갈래(테마). 이 줄이 없으면 테마 쪽으로 들어오는
   링크가 도시 허브 하나뿐이라, 검색엔진이 덜 중요하게 본다. */
.alsothemes { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.alsothemes-head {
  margin: 0 0 10px; font-size: .96rem; font-weight: 800; letter-spacing: -.02em;
}
.alsothemes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.alsothemes a {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 10px 14px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--card);
  color: inherit; text-decoration: none; font-weight: 700; font-size: .9rem;
}
.band.alt .alsothemes a { background: var(--paper); }
.alsothemes a:hover { border-color: var(--brand); color: var(--brand); }
.alsothemes .n { color: var(--ink-3); font-weight: 700; font-size: .82rem; }

/* ── 목적지 148쪽의 머리 ──
 *
 * 이 쪽들에는 큰 사진이 하나도 없다. 사진은 그 도시 상품에 판매자가 붙인
 * 것을 빌려 쓰는데, 목적지 148곳 중 상품을 다루는 곳은 33곳뿐이다
 * (실측 2026-08-25). 흰 바탕에 글자만 서 있으니 페이지가 밋밋했다.
 *
 * 사진을 구해 오는 대신 **우리가 이미 아는 것으로 색을 정한다** — 어느
 * 권역인가. 148쪽 전부가 같은 규칙으로 색을 갖고, 일본 쪽끼리는 같은
 * 색이라 돌아다니면 그 규칙이 읽힌다. 33곳만 사진을 다는 것보다 낫다.
 *
 * 색은 목적지 카드의 권역 색(.dest-noph)과 같은 계열이되 한 단계 어둡다.
 * 카드 한 장을 채우는 색과 화면 폭을 채우는 색은 같은 밝기로 두면 안 된다.
 * 그라데이션은 쓰지 않는다 — 단색이라 어디서 잘려도 같은 색이다.
 */
.dest-head {
  --dh-bg: #17364f;
  background: var(--dh-bg); border-bottom: 0;
  padding: 26px 0 24px; color: #fff;
}
.dest-head[data-region="japan"]    { --dh-bg: #7d2b41; }
.dest-head[data-region="china"]    { --dh-bg: #6f3a13; }
.dest-head[data-region="sea"]      { --dh-bg: #0e5244; }
.dest-head[data-region="casia"]    { --dh-bg: #50306c; }
.dest-head[data-region="europe"]   { --dh-bg: #1a4069; }
.dest-head[data-region="americas"] { --dh-bg: #174e63; }
.dest-head[data-region="pacific"]  { --dh-bg: #105257; }
.dest-head[data-region="africa"]   { --dh-bg: #613a11; }

/* 이 제목만 **금액을 통째로 안고 있다** — "…항공권 최저가, 지금
   1,334,300원". 값은 이제 안 쪼개지므로(.amt) 대신 **들어갈 자리**가
   있어야 한다. 320px 23.0 · 360px 23.9 · 390px 24.6 · 414px 25.1px 로
   기기 사이가 단계 없이 이어진다(전에는 360px 에서 25.9px). 위 끝은
   그대로 둔다 — 넓은 화면에서 작아질 이유가 없다. */
.dest-head h1 { color: #fff; font-size: clamp(1.32rem, 1rem + 2.2vw, 2.5rem); }
/* 색 판 위에서는 --ink-2 같은 회색 글자가 안 읽힌다. 흰색의 투명도로
   단계를 준다 — 바탕색이 무엇이든 대비가 같이 따라온다. */
.dest-head .lede { color: rgba(255,255,255,.86); }
.dest-head .lede.strong { color: #fff; }
.dest-head .crumb, .dest-head .crumb a { color: rgba(255,255,255,.72); }
.dest-head .crumb a:hover { color: #fff; }

/* 값이 **어떤 조건의 값인지**. 표를 안 내려봐도 알 수 있게 머리에 붙인다. */
.dh-facts {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.dh-facts li {
  display: flex; flex-direction: column; gap: 1px;
  padding: 9px 14px; border-radius: 11px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
}
.dh-k { font-size: .74rem; font-weight: 700; color: rgba(255,255,255,.75); }
.dh-v {
  font-size: 1rem; font-weight: 800; letter-spacing: -.02em; color: #fff;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* 머리 바로 아래 띠가 흰색이면 색 판이 허공에 뜬 것처럼 보인다.
   회색 띠로 받아서 색 -> 회색 -> 흰색으로 내려가게 한다. */
.dest-head + .band { background: var(--paper); }

/* ── 거르개 (드롭다운) ──
 *
 * 예전에는 칩을 줄줄이 늘어놓고, 폰에서만 그 줄을 옆으로 미는 방식이었다.
 * 그래서 PC 와 폰이 서로 다른 물건이 됐다 — PC 는 스무 개가 한눈에 깔리고
 * 폰은 두 개만 보이는 채로 밀어야 했고, 어느 쪽이 켜져 있는지도 화면마다
 * 달라 보였다. 고르는 자리는 두 곳에서 같은 모양이어야 한다.
 *
 * 그래서 **네이티브 select** 다. 폰에서는 OS 가 익숙한 고르개를 띄우고
 * PC 에서는 드롭다운이 열린다. 우리가 만든 가짜 메뉴가 아니라서 키보드도
 * 화면 낭독기도 저절로 된다. 자리도 조건 하나에 한 칸으로 고정된다.
 */
.filters {
  margin-top: 20px; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: end;
}
.picker { display: grid; gap: 6px; min-width: 0; }
.picker-label {
  margin: 0; color: var(--ink); font-size: .95rem; font-weight: 800;
  letter-spacing: -.02em;
}
.picker-select {
  appearance: none; -webkit-appearance: none; width: 100%;
  /* 손가락이 닿는 크기. 44px 아래로는 안 내려간다. */
  min-height: 50px; padding: 13px 42px 13px 15px;
  border-radius: 12px; border: 2px solid var(--line-2);
  background-color: var(--card); color: var(--ink);
  font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2;
  cursor: pointer; text-overflow: ellipsis;
  /* 화살표. 그림 파일을 하나 더 받게 하지 않으려고 그려 넣는다. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310161d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
  background-size: 15px;
}
.picker-select:hover { border-color: var(--brand); }
.picker-select:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
/* 기본값이 아닌 것을 고른 칸. 색만으로 말하지 않으려고 글자도 굵어진다. */
.picker-select.set { border-color: var(--ink); font-weight: 800; }
:root[data-theme="dark"] .picker-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eef2f6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* ── 거르개 아래 단추 줄 ──
 *
 * 예전에는 [조건 지우기] 하나뿐이었고, 그나마 조건이 걸려야 나왔다. 그래서
 * 고르개를 눌러 목록이 걸러져도 그 목록이 화면 밖이면 **아무 일도 안 일어난
 * 것처럼** 보였다(폰에서 실측). 결과로 데려가는 주 단추를 앞에 세운다.
 *
 * 고르개 격자 안에 넣지 않고 한 줄을 따로 쓴다. 격자 칸(190px) 안에 단추
 * 둘을 밀어 넣으면 PC 에서 글자가 잘리고, 잘리는 쪽은 언제나 주 단추다.
 */
.picker-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
/* 주 단추. 오렌지는 이 사이트에서 '행동'에만 쓰는 색이라, 점선 보조 단추와
   위계가 색·굵기·채움·크기 넷으로 갈린다. 링크인 이유는 자바스크립트가
   없어도 #results 로 뛰어야 하기 때문이다.

   글자를 1.2rem 까지 올린 것은 위계 때문만이 아니다. 흰 글자와 --brand 는
   3.47:1 이라 본문 크기(4.5:1)로는 모자라고, **굵은 18.66px 이상**부터
   적용되는 큰 글자 기준(3:1)을 넘겨야 통과한다. 사이트의 다른 .btn 들도
   같은 색 조합인데, 새로 세우는 이 단추만은 기준 안에 들여놓는다. */
.picker-go {
  flex: 1 1 auto; display: inline-flex; align-items: center;
  justify-content: center; gap: 5px;
  min-height: 54px; padding: 14px 24px;
  /* 흰 판에 검은 글씨(운영자 지정 2026-09-06). 색을 박지 않고 변수를
     쓰는 이유: --card/--ink 가 밝은 화면에서는 정확히 흰색·검정이고,
     어두운 화면에서는 뒤집혀서 **두 모드 다 읽힌다**. 흰색을 박아 두면
     어두운 화면에서 이 단추만 손전등처럼 튄다.
     테두리를 남기는 것은 판 색이 바탕과 가까워질 때를 위해서다. */
  margin: 6px 0 4px;
  border-radius: 12px; border: 2px solid var(--ink);
  background: var(--card); color: var(--ink);
  font-family: inherit; font-size: 1.2rem; font-weight: 800; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.picker-go:hover { background: var(--ink); color: var(--card); }
.picker-go:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.picker-go b { font-variant-numeric: tabular-nums; }
/* 남는 곳이 0일 때. 단추를 죽이지는 않는다 — 눌러서 닿는 자리에 **왜
   없는지**와 다음에 할 일이 적혀 있다. 대신 행동색을 거둬서 '가면 뭔가
   있다'고 약속하지 않는다. */
/* 글자색을 --brand-ink(흰색)로 두면 안 된다 — 어두운 화면의 --ink-2 는
   밝은 회색이라 흰 글자가 1.9:1 로 깔린다. --card 는 두 모드에서 모두
   바탕과 반대쪽이라 어느 쪽이든 읽힌다. */
.picker-go.none {
  background: var(--ink-2); border-color: var(--ink-2); color: var(--card);
}
/* 고른 것을 한 번에 무르는 보조 단추. 조건이 하나라도 걸려 있을 때만 나온다. */
.picker-reset {
  flex: 0 1 auto; min-height: 50px; padding: 13px 18px;
  border-radius: 12px; border: 2px dashed var(--line-2);
  background: transparent; color: var(--ink-2);
  font-family: inherit; font-size: .95rem; font-weight: 800; cursor: pointer;
}
.picker-reset:hover { border-color: var(--brand); color: var(--brand); }
.picker-reset:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.picker-reset[hidden] { display: none; }
/* [조회하기] 가 뛰어오는 자리. 상단바가 붙박이라 그만큼 비워 두지 않으면
   방금 도착한 제목이 그 아래에 깔린다. */
/* 뛰어서 닿는 자리는 머리띠 높이만큼 비워 둔다. 머리띠가 붙어 있어서
   (position: sticky) 안 비우면 그 아래 소제목이 덮인다 — 자리 고르개로
   '골프여행'을 골랐는데 카드부터 보이면 고른 것이 맞는지 알 수 없다. */
.pick-results, .pick-band { scroll-margin-top: 76px; }
/* 자바스크립트가 없을 때 대신 나가는 링크 줄. */
.filters-plain { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* 누를 것은 눌러 보이게 한다. 예전 칩은 연회색 바탕에 연회색 1px 테두리라
   글자만 떠 있는 것처럼 보였고, 실제로 "회색이라 안 보인다"는 말을 들었다.
   흰 판 + 진한 2px 테두리 + 1rem 글자로 바꾼다. 그림자도 그라데이션도
   쓰지 않는다 — 두 가지 다 이 사이트에서 값을 읽는 눈을 흐린다. */
.chip {
  appearance: none; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
  /* 손가락이 닿는 크기. 44px 는 아래로 못 내려간다. */
  min-height: 46px; padding: 11px 18px;
  border-radius: 999px; font-size: 1rem; font-weight: 700; line-height: 1.2;
  border: 2px solid var(--line-2); background: var(--card); color: var(--ink);
  font-family: inherit; font-variant-numeric: tabular-nums;
  transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}
.chip:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.chip:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
/* 고른 것. 색만으로 말하지 않는다 — 앞에 체크를 붙여서 색을 못 보는
   사람도, 흑백으로 인쇄해도 어느 것을 골랐는지 알 수 있게 한다. */
.chip.on { background: var(--ink); color: var(--card); border-color: var(--ink); }
.chip.on::before { content: "✓"; font-weight: 900; }
.chip.on:hover { color: var(--card); border-color: var(--ink); }
.chip:disabled { opacity: .45; cursor: not-allowed; border-style: dashed; }

/* ── 목적지 ── */
/* 여기가 이 사이트에서 카드가 제일 많이 깔리는 자리다(126곳). 글자만
   빽빽하게 세워 두면 126개가 전부 똑같아 보여서, 볼 마음이 안 생긴다.
   그래서 카드마다 **그 도시 사진 한 장**과 **값 하나**를 앞세운다 —
   이 화면에서 사람이 실제로 하는 일은 "어디가 싼가" 를 훑는 것이라,
   값이 사진 위에 얹혀 있으면 스크롤만으로 비교가 된다. */
.dests {
  display: grid; gap: 14px; margin-top: 16px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.dest {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--card-r, 16px);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.dest:hover { transform: translateY(-3px); box-shadow: var(--lift-hi, 0 12px 30px rgba(16,22,29,.16)); }
.dest[hidden] { display: none; }

.dest-ph { position: relative; aspect-ratio: 16 / 10; background: var(--paper); }
.dest-ph img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* 사진이 없는 곳. 사진은 그 도시 **상품에 판매자가 붙인 것**이라, 아직
   현지 상품을 안 모은 도시(31곳)에는 붙일 사진이 없다. 다른 도시 사진을
   빌려 오면 그 순간 이 사이트의 사진이 전부 못 믿을 것이 된다.
   그래서 권역 색 판에 나라 이름을 적고, 왜 사진이 없는지도 적어 둔다.
   그라데이션은 걷어냈다 — 한 칸에 두 색이 들어가면 그 판이 사진인지
   색인지 헷갈린다. */
.dest-noph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  font-weight: 800; font-size: 1.02rem; letter-spacing: -.03em; color: #fff;
  text-align: center; padding: 0 10px; word-break: keep-all;
  background: #1f4f80;
}
.dest-noph::after {
  content: "항공권 값만";
  font-size: .68rem; font-weight: 700; letter-spacing: 0;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,.22); color: #fff;
}
.dest-noph[data-region="japan"]    { background: #a83b58; }
.dest-noph[data-region="china"]    { background: #96501a; }
.dest-noph[data-region="sea"]      { background: #14705c; }
.dest-noph[data-region="casia"]    { background: #6e4394; }
.dest-noph[data-region="europe"]   { background: #23568f; }
.dest-noph[data-region="americas"] { background: #1f6a86; }
.dest-noph[data-region="pacific"]  { background: #157076; }
.dest-noph[data-region="africa"]   { background: #855017; }

/* ── 항공권만 있는 곳: 카드가 아니라 줄 목록 ──
   사진은 그 도시 상품에 판매자가 붙인 것을 빌려 쓴다. 투어·숙소가 하나도
   안 팔리는 도시(연대·위해·요나고 …)는 빌려 올 데가 없다. 실측(2026-08-25)
   목적지 카드 2,031장 중 527장(25.9%)이 그랬고, 화면은 회색 벽이 됐다.

   지우지 않는다 - 그 카드에도 실제 항공권 값과 우리 제휴 링크가 멀쩡히
   들어 있었다(527장 전부, 빠진 것 0). 대신 **틀을 바꾼다**. 줄 목록에는
   원래 사진이 없으므로, 없는 것이 결함으로 보이지 않는다. */
.dl-wrap { margin-top: 22px; }
.dl-wrap[hidden] { display: none; }
.dl-head {
  margin: 0 0 2px; font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em;
  display: flex; align-items: baseline; gap: 8px;
}
.dl-count { font-size: .84rem; font-weight: 700; color: var(--ink-3, #6b7784); }
.dl-note { margin: 0 0 10px; font-size: .84rem; color: var(--ink-3, #6b7784); }

.dl-list { border-top: 1px solid var(--line); }
.dest-lite {
  position: relative;
  display: grid; align-items: center; gap: 2px 12px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "city price fly" "meta price fly";
  padding: 11px 2px;
  /* .dest 의 카드 차림(테두리·둥근 모서리·그림자·뜨는 효과)을 지운다.
     같은 class 를 쓰는 이유는 /where/ 의 거르개가 .dest 를 세기 때문이다 -
     세는 잣대와 보이는 모양은 따로 간다. */
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  box-shadow: none; overflow: visible; background: none;
}
.dest-lite:hover { transform: none; box-shadow: none; }
.dest-lite[hidden] { display: none; }
/* 이름 칸만 44px 로 키우면 두 줄짜리 격자가 통째로 두 배가 된다.
   대신 **줄 전체**를 이 링크의 누를 자리로 만든다(카드와 같은 방법).
   항공권 링크는 그 위에 남는다(.dl-fly 의 z-index). */
.dl-city {
  grid-area: city; font-weight: 800; font-size: 1rem; letter-spacing: -.02em;
  color: inherit; text-decoration: none;
}
.dl-city::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.dl-city:hover { text-decoration: underline; }
.dl-meta {
  grid-area: meta; font-size: .8rem; color: var(--ink-3, #6b7784);
  word-break: keep-all;
}
.dl-price {
  grid-area: price; font-size: 1.06rem; font-weight: 900; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dl-price .won { font-size: .68em; font-weight: 800; margin-left: 1px; }
/* 단추는 카드의 '항공권 보기'와 같은 크기로 둔다 - 같은 일을 하는
   단추가 자리마다 다른 크기면 누르기 전에 한 번 더 생각하게 된다. */
.dl-fly {
  /* 도시 이름 링크가 줄 전체를 덮으므로 그 위에 서야 눌린다. */
  position: relative; z-index: 2;
  grid-area: fly; white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 9px 13px; border-radius: 10px;
  border: 2px solid var(--line-2, #808e9d);
  background: var(--card); color: inherit;
  font-size: .86rem; font-weight: 800; text-decoration: none;
}
.dl-fly:hover { border-color: var(--brand); color: var(--brand); }

@media (max-width: 460px) {
  /* 좁은 화면에서는 단추를 아래로 내린다. 세 칸을 억지로 붙이면
     도시 이름이 두 글자에서 잘린다. */
  .dest-lite {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "city price" "meta price" "fly fly";
    gap: 2px 10px;
  }
  .dl-fly { justify-self: start; margin-top: 8px; }
}

/* 값은 사진 위 아래쪽에 얹는다. 사진이 밝든 어둡든 읽히게 그 아래로
   어둠을 깐다 — 판매자 사진이라 밝기를 우리가 고를 수 없다. */
.dest-price {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 26px 12px 9px;
  /* 폰에서는 이 카드가 한 줄에 두 장씩 깔린다(360px 에서 폭 161px).
     예전에는 420px 에서 한 번 툭 떨어지는 단계였는데, 그러면 360·390·414px
     기기가 전부 같은 크기를 받아 어떤 기기에서는 값이 카드를 꽉 채웠다.
     360px 18.2 · 414px 19.1 · 1120px 21.4px 로 이어지게 한다. */
  font-size: clamp(1.14rem, .98rem + .5vw, 1.34rem);
  font-weight: 900; letter-spacing: -.035em; color: #fff;
  text-shadow: 0 1px 10px rgba(3,18,36,.7);
  background: linear-gradient(180deg, rgba(6,20,38,0) 0%, rgba(6,20,38,.62) 55%, rgba(6,20,38,.82) 100%);
}
.dest-price .won { font-size: .6em; font-weight: 800; margin-left: 2px; opacity: .9; }
.dest-badge {
  position: absolute; top: 9px; left: 9px;
  background: var(--brand); color: var(--brand-ink);
  font-weight: 800; font-size: .72rem; padding: 4px 9px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(3,18,36,.3);
}

.dest-body { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 3px; }
.dest-city { margin: 0; font-size: 1.06rem; font-weight: 800; letter-spacing: -.03em; }
.dest-city a { color: var(--ink); text-decoration: none; }
/* 카드 전체를 누를 수 있게 도시 이름 링크를 카드만큼 늘린다. 링크를
   중첩하지 않으므로(a 안의 a 는 잘못된 문서다) 화면 낭독기도 링크를
   하나로 읽는다. */
.dest-city a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.dest-city a:hover { color: var(--accent); }
.dest-country { color: var(--ink-3); font-size: .78rem; }
.dest-when { margin: 0; color: var(--ink-2); font-size: .76rem; font-variant-numeric: tabular-nums; }
.dest-fly {
  position: relative; z-index: 2;      /* 겹쳐 놓은 카드 링크보다 위로 */
  margin-top: 9px; text-align: center; text-decoration: none;
  display: block; min-height: 44px; line-height: 26px;
  padding: 9px 10px; border-radius: 10px;
  background: transparent; color: var(--brand);
  border: 1.5px solid color-mix(in srgb, var(--brand) 45%, transparent);
  font-weight: 800; font-size: .84rem; white-space: nowrap;
}
.dest-fly:hover { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.count-note { margin: 0; color: var(--ink-2); font-size: .88rem; font-weight: 700; }
.count-note b { color: var(--accent); font-variant-numeric: tabular-nums; }
.empty-note { margin-top: 20px; color: var(--ink-2); }

/* ── 도시 가이드 ── */
.guides { display: grid; gap: 10px; margin-top: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.guide {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow);
}
.guide:hover { border-color: var(--brand); }
.guide-city { font-size: 1.2rem; font-weight: 800; letter-spacing: -.03em; }
.guide-meta { color: var(--ink-2); font-size: .84rem; font-variant-numeric: tabular-nums; }
.guide-go { margin-top: 8px; color: var(--accent); font-weight: 700; font-size: .86rem; }

/* ── 상품 카드 ── */
.grid { display: grid; gap: 12px; margin-top: 16px; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
/* 카드에서 **판을 걷어냈다**(2026-09-06).
 *
 * 라이트에서 카드 대 바탕의 명도차가 1.08:1, 다크에서 1.10:1 이었다
 * (실측). 사실상 같은 색이고 1px 테두리 하나로 카드인 척하고 있었다는
 * 뜻이다. 운영자가 "라이트모드도 다크모드도 이상해" 라고 한 것이 이
 * 숫자다 — 대비가 모자란 게 아니라(글자는 15~18:1 로 넉넉하다)
 * **판이 판으로 안 보이는** 것이었다.
 *
 * 야놀자는 이 문제를 아예 피한다. 판을 안 쓰고 사진이 곧 카드다. 같은
 * 길을 간다 — 두 모드 다 사진이 알아서 경계를 만들어 준다. 덤으로
 * 그림자 27,000개가 사라져서 스크롤이 가벼워진다.
 *
 * position: relative 는 .card-link 의 늘어난 ::after 를 받는 자리다. */
.card {
  position: relative; border-radius: var(--card-r, 14px);
  display: flex; flex-direction: column;
}
/* 거르개로 덜어낸 카드. display:flex 가 [hidden] 의 기본 규칙을 이겨서
   따로 적어 줘야 실제로 사라진다. */
.card[hidden] { display: none; }
/* 사진을 1:1 로 자른다.
   390px 실측(2026-09-06)에서 사진이 175×320, 즉 1:1.83 이었다. 카드
   한 장 597px 중 절반이 사진이었고 한 화면에 2.8장밖에 안 들어갔다.
   같은 잣대로 잰 야놀자는 1:1 에 카드 260px 이다.
   정사각으로 못 박으면 어떤 사진이 와도 카드 높이가 같아서 목록이
   격자로 읽힌다. 새 사진을 받아 오지 않는다 — 있는 파일의 가운데를
   취할 뿐이다. */
/* `height: auto` 가 **꼭 있어야 한다.** 마크업의 height="320" 은 CSS
   height 로 매핑되는 표시 힌트라, 이걸 안 풀면 aspect-ratio 가 아무
   일도 못 한다 — 예전 규칙이 `aspect-ratio: 3/2` 였는데도 사진이
   1:1.83 으로 서 있었던 것이 이 때문이다. 규칙은 있는데 안 듣고
   있었고, 아무도 몰랐다. */
.card img {
  width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover;
  background: var(--line); border-radius: var(--card-r, 14px);
}
.card-body { padding: 8px 2px 0; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.card-name {
  margin: 0; font-size: .92rem; font-weight: 700; line-height: 1.38; letter-spacing: -.015em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 주변 도시 상품의 실제 지역(taxonomy.NEARBY). 이 도시 안의 것이 아니라는
   표시라 이름 **위**에 둔다 — 이름부터 읽으면 이 도시 것으로 안다. */
.card-area {
  margin: 0; font-size: .74rem; font-weight: 700; color: var(--accent);
  letter-spacing: -.01em;
}
.card-area::before { content: "📍 "; }
.nearby-band .note { margin: -4px 0 14px; color: var(--ink-2); font-size: .88rem; }
.nearby-area { margin: 22px 0 10px; font-size: 1.02rem; }
.nearby-area span { color: var(--ink-3); font-weight: 600; font-size: .85rem; margin-left: 4px; }

/* 이름이 곧 링크다. 예약 단추를 없앤 자리를 이것이 대신한다 —
   ::after 를 카드 전체에 늘려서 어디를 눌러도 열린다. 낭독기에는
   상품 이름으로 들린다(예전에는 48장이 전부 "예약하러 가기" 였다). */
.card-link { color: inherit; text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card-link:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
/* 소개문 손잡이는 늘어난 링크 **위**에 있어야 눌린다. */
.card-intro { position: relative; z-index: 2; }

/* 값 지켜보기 단추 (watch.js 가 붙인다. 판에는 없다).
 *
 * **사진 위 모서리에 얹는다 — 카드 흐름에 넣지 않는다.** 이 카드는
 * 597px 에서 323px 로 줄인 결과물이고 그 방법 중 하나가 42px 예약 단추를
 * 없앤 것이었다(_card.html). 값 줄이나 카드 아래에 넣으면 카드 48장마다
 * 그 높이가 도로 붙어서, 줄이려고 한 일을 되돌린다. 얹으면 높이가 0 이다.
 *
 * 44px 은 손가락 기준이다. 보이는 원은 34px 이고 나머지는 투명한 여백이라
 * **작아 보이면서 크게 눌린다** — /onsen/ 특가확인 단추가 29px 이라
 * 걸렸던 것과 같은 잣대를 여기서는 처음부터 지킨다.
 *
 * z-index 는 .card-intro 와 같은 2 다. .card-link::after 가 1 로 카드
 * 전체를 덮고 있어서, 1 이하면 눌러도 제휴 페이지로 나가 버린다.
 *
 * 그림자 대신 반투명 바탕을 쓴다 — 목록에 카드가 수백 장이라 그림자를
 * 주면 스크롤이 무거워진다(위 .card 주석의 그 이유). */
.watch-btn {
  position: absolute; top: 0; right: 0; z-index: 2;
  width: 44px; height: 44px; padding: 5px; margin: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer;
  color: #fff; -webkit-tap-highlight-color: transparent;
}
.watch-btn[hidden] { display: none; }
/* 실제로 보이는 원. 사진이 밝든 어둡든 하트가 읽혀야 해서 바탕을 깐다. */
.watch-btn::before {
  content: ""; position: absolute; top: 5px; right: 5px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(17, 22, 28, .38);
}
.watch-btn svg { position: relative; }
.watch-btn:hover::before { background: rgba(17, 22, 28, .55); }
.watch-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: -2px; border-radius: 50%; }
/* 담아 둔 것. 색으로만 가르지 않는다 — 속을 채워서 **모양으로도** 갈린다
 * (색각 이상에서 빨강/흰색 테두리는 같은 하트로 보인다). */
.watch-btn.on { color: var(--hl-text, #ff6b81); }
.watch-btn.on svg path { fill: currentColor; }
.watch-btn.on::before { background: rgba(17, 22, 28, .55); }
.rating { margin: 0; font-size: .76rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rating b { color: var(--ink); }
/* 숙소가 시내에서 얼마나 떨어졌나. 후기 옆에 붙는다 — 값 다음으로 사람이
   많이 보는 것이 이것이라, 별도 줄을 새로 만들어 카드를 높이지 않는다. */
.near { color: var(--accent); font-weight: 700; }
.readout { padding-top: 2px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 2px; }

/* 값 판정 배지. 야놀자의 빨간 `37%` 가 서 있는 자리이자, 그들에게
   할인율이 하는 일을 우리에게는 이것이 한다 — 다만 우리 것은 판매자가
   부르는 정가가 아니라 **우리가 직접 재서 쌓은 값**과 견준 결과다.
   그게 이 사이트가 다른 제휴 목록과 다른 유일한 지점이라, 카드에서
   제일 먼저 눈에 걸리는 자리에 둔다.

   색만으로 말하지 않는다. 글자가 '싼 편'이라고 적혀 있어서 색을 못
   보는 사람도, 흑백으로 인쇄해도 읽힌다. */
.badge {
  font-size: .72rem; font-weight: 800; letter-spacing: -.02em;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  border: 1px solid currentColor;
}
.badge.low { color: var(--good); }
.badge.mid { color: var(--ink-3); }
.badge.high { color: var(--sale); }
/* 값 · 단위 · 예전 값을 **각각 한 덩어리로** 놓고 줄바꿈은 덩어리
   사이에서만 일어나게 한다. 예전에는 셋이 그냥 흘러 있어서, 좁은
   카드(360px 에서 폭 143px)에서 "1,234,000 / 원 / 1,500,000원" 처럼
   숫자와 단위 사이가 갈라졌다. 사이 간격은 margin 이 아니라 gap 으로
   준다 — 줄이 바뀌면 margin 은 줄 앞에 남아 값이 밀려 보인다. */
.price {
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: 5px; row-gap: 1px;
  /* 360px 에서 16.3px, 1120px 에서 18.6px. 카드가 두 줄로 깔리는
     폰에서 값이 카드 폭의 절반을 넘지 않게 아래 끝을 잡았다. */
  font-size: clamp(1.02rem, .94rem + .35vw, 1.16rem);
  font-weight: 800; letter-spacing: -.025em; font-variant-numeric: tabular-nums;
}
.price .won { font-size: .68em; font-weight: 700; color: var(--ink-2); }
.was { color: var(--ink-3); text-decoration: line-through; font-size: .8rem; font-weight: 600; }
.save { color: var(--good); font-weight: 800; font-size: .8rem; }
/* 글자색이라 --brand 를 쓰면 안 된다(흰 글씨를 얹는 단추 바탕용이다).
   --sale 이 그래서 따로 있다 — 밝은 화면 5.9:1, 어두운 화면 6.4:1. */
.sold-out { color: var(--sale); font-weight: 700; font-size: .8rem; margin-top: 2px; }
.note { display: block; font-size: .8rem; color: var(--ink-3); margin-top: 2px; }
/* `display` 를 준 요소는 브라우저의 `[hidden]`(display:none)을 이긴다.
   이 함정에 `.card`·`.az`·`.pkg` 에서 세 번 걸렸고, `.note` 가 네 번째다 —
   `/saved/` 의 "지금 가격을 받지 못했습니다"가 받아 왔는데도 계속 떠 있었다.
   tests/test_web_packages.py 가 네 이름을 지킨다. */
.note[hidden] { display: none; }
/* 값 추이 그림. **칸보다 커지지 않게 한다.**
 *
 * chart.py 가 width="132" height="36" 을 속성으로 박아 내고, model.py 는
 * 폭 인자 없이 부른다 — 그래서 어디서나 132px 다. 그런데 320px 기기에서
 * 카드 안쪽은 113.5px 다(292 안쪽 → 두 칸 141.5 → 테두리 −2 → padding −26).
 * 18.5px 이 밖으로 나간다. 실측(2026-09-06 `python -m src.web.mobile`)에서
 * 320px 320건 중 429건이 이것 하나였고, 전부 정확히 18px 이었다 —
 * 글자 길이와 무관하다는 뜻이라 원인이 폭 고정임이 그대로 드러났다.
 *
 * **360px 은 1.5px 차로 겨우 통과하고 있었다**(133.5 vs 132). 카드
 * padding 을 1px 만 키워도 갤럭시 A 계열에서 다시 터진다.
 *
 * 파이썬이 아니라 여기서 고치는 이유: 속성을 빼면 그림이 도착하기 전
 * 높이가 0 이 되어 그 아래가 밀린다(CLS). 속성은 그대로 두고 CSS 로만
 * 줄인다 — viewBox 가 있어 비율은 알아서 지켜진다.
 */
/* 카드가 597px 에서 323px 로 내려오니 132px 짜리 그림이 이제 카드
   안에서 제일 큰 덩어리가 됐다. 값 옆에 붙는 곁다리라 그만큼 크면 안
   된다 — 폭을 줄이면 viewBox 가 높이도 같이 줄여 준다(132×36 → 92×25).
   비율은 그대로라 선 모양은 안 뭉개진다. */
/* .spark 는 가격변동 시트 도입(2026-10-21)으로 제거. 하단 prc-btn 으로 대체. */

/* 일주일 뒤 예상. **판정 배지와 다르게 생겨야 한다** — 배지는 지금까지
   잰 사실이고 이건 예상이다. 그래서 바탕을 안 깔고 점선 테두리만 둘러
   "아직 안 일어난 일"로 읽히게 한다. 색은 방향만 말하고, 초록/빨강은
   판정 배지와 같은 뜻(싸다/비싸다)을 쓴다. */
.cast {
  display: inline-flex; align-items: center; gap: 3px;
  margin-top: 4px; padding: 2px 7px;
  border: 1px dashed var(--line-2);
  border-radius: 999px;
  font-size: .72rem; font-weight: 700; line-height: 1.5;
  color: var(--ink-2);
}
.cast-arrow { font-weight: 800; }
.cast.down { border-color: var(--good); color: var(--good); }
.cast.up { border-color: var(--sale); color: var(--sale); }
/* .cta 는 상품 카드에서 없앴다(카드 전체가 링크가 됐다). 규칙은
   남겨 둔다 — 코스 화면 등 카드 밖에서 아직 쓴다. */
.cta {
  margin-top: 9px; display: block; text-align: center; padding: 12px 10px;
  border-radius: 10px; background: var(--brand); color: var(--brand-ink);
  text-decoration: none; font-size: .86rem; font-weight: 800;
}
.cta:hover { filter: brightness(1.06); }

/* ── 판매자 소개 (카드) ──
 * 판매자가 쓴 글이라 접어 두고 출처를 밝힌다 — 코스 페이지의 .whatsin 과
 * 같은 규칙이다. 다만 여기서는 테두리 없이 글자만 쓴다: 카드가 한 화면에
 * 48장씩 깔리는데 알약 단추를 48개 얹으면 목록이 단추밭이 된다.
 * 여는 손잡이는 그래도 눌러지는 크기(30px)와 초점 테두리를 갖는다.
 */
.card-intro { margin-top: 8px; }
.card-intro > summary {
  cursor: pointer; list-style: none;
  /* 30px 이던 것을 44px 로 올린다. 카드가 597 → 323px 로 줄면서 이
     14px 을 낼 자리가 생겼다. 테두리는 여전히 안 두른다 — 한 화면에
     48장이 깔리는데 알약을 48개 얹으면 목록이 단추밭이 된다. */
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .79rem; font-weight: 700; color: var(--ink-2);
}
.card-intro > summary::-webkit-details-marker { display: none; }
.card-intro > summary::after { content: " ▾"; margin-left: 3px; }
.card-intro[open] > summary::after { content: " ▴"; }
/* 마우스를 올렸을 때도 4.5:1 을 넘겨야 한다. --brand 는 단추 바탕에 흰
   글씨로 얹으라고 고른 색이라 글자색으로 쓰면 흰 바탕 대비 3.48:1 이다
   (--sale 이 그래서 따로 생겼다). 링크 색인 --accent 는 밝은 데서 7.33:1,
   어두운 데서 7.74:1 이다. */
.card-intro > summary:hover { color: var(--accent); }
.card-intro > summary:focus-visible {
  outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 6px;
}
.card-intro-body {
  margin: 4px 0 0; font-size: .82rem; line-height: 1.6; color: var(--ink-2);
}

/* ── 테마 칩 (도시 페이지) ── */
.themes { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 0; padding: 0; list-style: none; }
.themes a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); text-decoration: none; color: var(--ink);
  font-size: .87rem; font-weight: 700;
}
.themes a:hover { border-color: var(--brand); }
.themes .n { color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.crumb { color: var(--ink-3); font-size: .82rem; margin: 0 0 4px; }
.crumb a { color: var(--ink-2); text-decoration: none; }
.lede { color: var(--ink-2); margin: 10px 0 0; max-width: 62ch; }
/* 운영자 지정(2026-09-10). 패키지 쪽 소개문은 숫자가 셋 들어가서
   62ch 에서 세 줄로 접힌다. 전역은 그대로 둔다(위 .tagline 과 같은 판단). */
.pkgpage .lede { max-width: none; }

/* 제목 안의 숫자. 운영자 지정 색이다.
   **큰 글자에만 쓴다.** crimson(#DC143C)은 어두운 판(#0e1216)에 대해
   4.4:1 이라 h1 크기(24px 이상)에서는 기준을 넘지만 본문 크기에서는 모자란다. */
.hl { color: crimson; }

/* ── 꼬리말 ── */
.foot { background: var(--card); border-top: 1px solid var(--line); margin-top: 10px; }
.foot-in {
  max-width: 1120px; margin: 0 auto; padding: 26px 16px 40px;
  color: var(--ink-3); font-size: .875rem; text-align: center;
}
.foot-in p { margin: 0 0 6px; }
.disclose {
  border: 1px dashed var(--line); border-radius: 10px; padding: 11px 15px;
  color: var(--ink-2); margin: 0 auto 14px !important;
  max-width: 44em; text-align: center;
}
.foot-name { font-weight: 700; color: var(--ink-2); margin-top: 12px !important; }
/* 사업자 정보. **지금은 안 뜬다** — config.BUSINESS 가 비어 있다(2026-09-15
 * 카카오 심사 통과 후 내렸다). 채우면 다시 뜨므로 남겨 둔다.
 * 읽을 사람은 검수원과 대조해 보는 사람이라, 눈에 먼저 오는 자리가 아니라
 * 맨 아래여야 한다 — 대가성 문구(.disclose)보다 뒤다.
 * <address> 는 브라우저 기본이 이탤릭이라 normal 로 되돌린다. */
.foot-biz {
  font-style: normal; font-size: .8rem; line-height: 1.75;
  color: var(--ink-3); margin-top: 14px;
}
.foot-biz a { color: inherit; text-decoration: none; }
.foot-biz a:hover { text-decoration: underline; }

/* ── 세 갈래 진입 (홈) ──
 * 계획 문서 §1. 사람마다 검색 습관이 다르다: 말하는 사람, 모르는 사람,
 * 이미 정한 사람. 세 문을 같은 크기로 나란히 둬서 아무거나 고르게 한다.
 */
.doors { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); margin-top: 4px; }
.door {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: 20px 18px 18px; border-radius: var(--r); text-decoration: none;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink);
}
.door:hover { border-color: var(--brand); }
.door-no { color: var(--ink-3); font-weight: 800; font-size: .8rem; }
.door-name { font-size: 1.08rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.25; }
.door-eg { color: var(--ink-2); font-size: .85rem; line-height: 1.45; }
.door-go { margin-top: 10px; color: var(--brand); font-weight: 800; font-size: .85rem; }
.door-ai { background: var(--card); border-color: var(--brand); }
.door-test .door-go, .door-browse .door-go { color: var(--accent); }
.result[hidden] { display: none; }
.ask.small { margin-top: 26px; font-size: .92rem; color: var(--ink-2); font-weight: 700; }

/* ── 코스 카드 ── */
.courses { display: grid; gap: 10px; margin-top: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.course-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 17px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 5px; box-shadow: var(--shadow);
}
.course-card:hover { border-color: var(--brand); }
/* 사진이 있으면 카드 위쪽을 채운다. padding 을 뚫고 나가야 사진이 카드
   너비를 다 쓴다 — 안 그러면 양옆에 흰 띠가 남아 붙임딱지처럼 보인다. */
.course-ph {
  position: relative; display: block;
  margin: -16px -17px 6px; border-radius: var(--r) var(--r) 0 0; overflow: hidden;
}
.course-ph img {
  width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover;
  background: var(--line); display: block;
}
/* 유형 이모지. **사진의 대역이 아니라 그 자체가 뜻을 가진 표시다**
   (🧭 알찬 수집가형 · ☕ 느긋한 휴식형 …). 그래서 사진이 생겨도 없애지
   않고 위에 얹는다. 사진이 밝든 어둡든 읽히도록 판을 깔았다. */
.course-ph .course-emoji {
  position: absolute; left: 8px; bottom: 8px; margin: 0;
  width: 30px; height: 30px; display: grid; place-items: center;
  font-size: 1rem; border-radius: 50%;
  background: rgba(255,255,255,.94);
  box-shadow: 0 1px 3px rgba(16,22,29,.28);
}
.course-emoji { font-size: 1.3rem; line-height: 1; }
.course-title { font-size: 1.02rem; font-weight: 800; letter-spacing: -.025em; }
.course-plan {
  color: var(--ink-2); font-size: .8rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.course-cost {
  margin-top: 6px; color: var(--ink); font-weight: 800; font-size: 1.05rem;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

/* ── 버튼 ── */
/* 좌우 40px 은 운영자 지정(2026-09-13). 22px 이었다 — 단추가 글자에
   붙어 보여서 눌러야 할 것으로 덜 읽혔다. 폰 360px 에서 제일 긴 딱지
   ('AI 여행가이드 시작하기')도 넘치지 않는 것을 그려 보고 확인했다. */
.btn {
  display: inline-block; padding: 13px 40px; border-radius: 11px;
  max-width: 100%;
  background: var(--brand); color: var(--brand-ink); text-decoration: none;
  font-weight: 800; font-size: .95rem; border: 0; cursor: pointer;
  font-family: inherit;
}
.btn:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--brand); filter: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* 한 덩이로 붙어 있어야 하는 말. 브라우저는 가운뎃점(·)에서도 줄을 가르는데,
   그러면 다음 줄이 "·택시로" 처럼 점으로 시작한다 — 실제로 그렇게 나왔다. */
.nobr { white-space: nowrap; }

/* ── 성향 테스트 ── */
.quiz { min-height: 300px; }
.quiz-step { margin: 0; color: var(--ink-3); font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.quiz-bar { height: 4px; border-radius: 999px; background: var(--line); margin: 8px 0 22px; overflow: hidden; }
.quiz-bar span { display: block; height: 100%; background: var(--brand); }
.quiz-q { margin: 0 0 18px; font-size: clamp(1.2rem, 1rem + 1.2vw, 1.6rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.3; }
.quiz-opts { display: grid; gap: 9px; }
.quiz-opts.ox { grid-template-columns: 1fr 1fr; }
.quiz-opt {
  appearance: none; cursor: pointer; font-family: inherit; text-align: left;
  padding: 16px 18px; border-radius: 12px; font-size: 1rem; font-weight: 700;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
.quiz-opt:hover { border-color: var(--brand); }
/* 앞 질문으로 돌아왔을 때 내가 고른 답. 색만으로 말하지 않는다 — 앞에
   체크 표시를 붙인다. */
.quiz-opt.picked { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.quiz-opt.picked::before { content: "✓ "; color: var(--brand); }
.quiz-opts.ox .quiz-opt { text-align: center; font-size: 1.05rem; padding: 20px; }
/* 7문항을 되돌릴 **유일한 길**이다. 바로 위 답 단추(.quiz-opt)는
   padding 16px 로 크고 뚜렷한데 이것만 흐린 맨 글자 34px 이었다.
   잘못 고른 사람이 제일 급하게 찾는 단추가 제일 안 보였다. */
.quiz-back {
  appearance: none; cursor: pointer; font-family: inherit; margin-top: 16px;
  display: inline-flex; align-items: center; min-height: 44px;
  background: none; border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink-2); font-size: .86rem; font-weight: 700; padding: 10px 14px;
}
.quiz-back:hover { border-color: var(--brand); color: var(--brand); }
.quiz-fallback { color: var(--ink-2); }

.result-kicker { margin: 0; color: var(--ink-3); font-weight: 700; font-size: .86rem; }
.result-name { margin: 4px 0 0; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); font-weight: 800; letter-spacing: -.04em; }
.result-line { margin: 8px 0 0; font-size: 1.05rem; font-weight: 700; color: var(--ink-2); }
.result-blurb { margin: 12px 0 0; color: var(--ink-2); }
.result-sub { margin: 30px 0 0; font-size: 1.1rem; font-weight: 800; letter-spacing: -.03em; }
.axes { list-style: none; margin: 22px 0 0; padding: 16px 18px; display: grid; gap: 7px;
        background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.axes li { display: flex; align-items: center; gap: 12px; }
.axis-name { width: 5.5em; color: var(--ink-2); font-size: .88rem; font-weight: 700; }
.axis-stars { color: var(--brand); letter-spacing: .12em; font-size: .95rem; }
/* 칸(band) 을 닫는 단추 줄. **가운데로 모은다.**
 *
 * 글줄은 왼쪽에서 시작하는 게 읽기 좋지만, 단추는 글이 아니라 '누를 것'이다.
 * 왼쪽에 붙여 두면 넓은 화면에서 단추 하나가 1,120px 칸의 왼쪽 끝에 덩그러니
 * 남고(실측 2026-09-10: 오른쪽 여백 919px), 눌러야 할 것으로 안 읽힌다.
 * 이 줄이 들어가는 자리는 전부 칸의 마지막 — 다음 할 일을 내미는 곳이다.
 *
 * 카드 안의 링크(.offsite-cta)는 여기 넣지 않는다 — 제 옆의 글과 왼쪽을
 * 맞춰야 뜻이 이어진다.
 *
 * **.head-quiz 는 2026-09-13 에 가운데로 옮겼다(운영자 지시).** 여기
 * "왼쪽을 맞춰야 한다"고 적혀 있었는데, 단추만 옮기면 그 말이 맞으므로
 * **바로 위 문장(.head-quiz-say)까지 같이** 가운데로 보낸다. 둘이 한
 * 덩이로 움직이면 왼쪽 정렬된 h1·lede 아래에서 따로 부르는 자리로
 * 읽힌다. 단추만 옮기지 말 것. */
.result-acts {
  margin-top: 26px; display: flex; gap: 9px; flex-wrap: wrap;
  justify-content: center;
}

/* ── 하루 코스 ── */
.cost { margin: 12px 0 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.plan > li { display: grid; grid-template-columns: 62px 1fr; gap: 14px; position: relative; padding-bottom: 22px; }
.plan > li::before {
  content: ""; position: absolute; left: 30px; top: 26px; bottom: 0;
  width: 2px; background: var(--line);
}
.plan > li:last-child::before { display: none; }
.plan-time {
  font-weight: 800; font-size: .92rem; font-variant-numeric: tabular-nums;
  color: var(--brand); padding-top: 14px; position: relative; z-index: 1;
}
.plan-prep .plan-time { color: var(--ink-3); font-size: .8rem; }
.plan-body {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 16px 16px; box-shadow: var(--shadow); overflow: hidden;
}
.plan-body img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 10px; margin: 8px 0; background: var(--line); }
.plan-slot { margin: 0; color: var(--ink-3); font-size: .76rem; font-weight: 800; letter-spacing: .02em; }
.plan-name { margin: 4px 0 0; font-weight: 700; line-height: 1.4; letter-spacing: -.015em; }
.plan-price { margin: 6px 0 0; font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plan-cta {
  margin-top: 12px; display: inline-flex; align-items: center;
  min-height: 44px; padding: 10px 16px; border-radius: 10px;
  background: var(--brand); color: var(--brand-ink); text-decoration: none;
  font-size: .85rem; font-weight: 800;
}
.plan-cta:hover { filter: brightness(1.06); }
/* ── 상품 상세 (포함/불포함·소개) ──
 *
 * 판매자가 쓴 문장이다. 우리가 지어낸 게 아니라는 걸 화면에서도 알 수
 * 있어야 해서, 접어 두고 "판매자가 적어 둔 내용"이라고 밝힌다.
 */
.plan-intro {
  margin: 0; color: var(--ink-2); font-size: .88rem; line-height: 1.65;
}
.plan-steps { margin: 8px 0 0; font-size: .86rem; font-weight: 700; }
.plan-steps-label {
  display: inline-block; margin-right: 4px; padding: 2px 8px;
  border-radius: 999px; background: var(--blue-soft); color: var(--accent);
  font-size: .76rem; font-weight: 800;
}
.whatsin { margin-top: 10px; }
.whatsin > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 9px 14px; border-radius: 999px;
  border: 2px solid var(--line-2); background: var(--card);
  color: var(--ink); font-size: .88rem; font-weight: 800;
}
.whatsin > summary::-webkit-details-marker { display: none; }
.whatsin > summary::after { content: " ▾"; margin-left: 4px; }
.whatsin[open] > summary::after { content: " ▴"; }
.whatsin > summary:hover { border-color: var(--brand); color: var(--brand); }
.whatsin > summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.whatsin-label { margin: 12px 0 4px; font-size: .82rem; font-weight: 800; color: var(--ink-2); }
.whatsin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.whatsin-list li {
  position: relative; padding-left: 20px;
  font-size: .88rem; line-height: 1.55; color: var(--ink-2);
}
/* 들어 있는 것과 아닌 것을 색으로만 가르지 않는다 — 앞에 기호를 둔다. */
.whatsin-list.in li::before {
  content: "✓"; position: absolute; left: 0; color: var(--good); font-weight: 900;
}
.whatsin-list.out li::before {
  content: "＋"; position: absolute; left: 0; color: var(--ink-3); font-weight: 900;
}
.whatsin .note { margin-top: 10px; }

.plan-total {
  margin: 6px 0 0; padding: 16px 18px; border-radius: var(--r);
  background: var(--card); border: 1px solid var(--line);
  font-size: 1.05rem; font-variant-numeric: tabular-nums;
}
.plan-total b { font-size: 1.25rem; letter-spacing: -.025em; }
.plan-mini { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
/* 시각 · 이름 · 값 · 단추. 이름만 늘었다 줄었다 하고 나머지는 제 폭을
   지킨다(flex: 0 0 auto). 폰에서는 이름이 길어 두 줄이 되므로 줄바꿈을
   허용하고, 단추는 값 옆에 붙어 같이 내려간다. */
.plan-mini li {
  display: flex; gap: 6px 10px; align-items: baseline; flex-wrap: wrap;
  font-size: .93rem;
}
.plan-mini .plan-time { padding: 0; flex: 0 0 auto; }
.plan-mini .plan-what { flex: 1 1 180px; min-width: 0; }
.plan-mini .plan-price { margin-left: auto; flex: 0 0 auto; font-size: .88rem; color: var(--ink-2); }
/* 답 카드 안의 작은 예약 단추.
   **색을 --brand(#f4511e) 로 쓰지 않는다.** 그 위의 흰 글자는 3.6:1 이라
   본문 기준(4.5:1)에 못 미친다. 큰 단추(.plan-cta)는 글자가 커서 넘어가지만
   이건 .78rem 이다. 한 단계 어두운 주황을 따로 둔다 — 흰 글자 대비 7.9:1.
   어두운 판에서도 같은 색을 쓴다(주황 단추는 어두운 바탕에서도 읽힌다). */
.mini-cta {
  flex: 0 0 auto; display: inline-block;
  padding: 5px 11px; border-radius: 8px;
  background: #c2410c; color: #fff; text-decoration: none;
  font-size: .78rem; font-weight: 800; letter-spacing: -.01em;
  white-space: nowrap;
}
.mini-cta:hover { filter: brightness(1.08); }
.mini-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* plan-mini: 상품 링크 — li 전체가 눌리게(::after 패턴).
   GA4 실측: 카드 전체 링크 목록 CTR 84% vs 단추만 눌리던 도시 허브 17.9%.
   .mini-cta 와 마찬가지로 z-index 는 2 이상 링크만 link::after 위에 올린다. */
.plan-mini li { position: relative; }
.plan-mini-link { color: inherit; text-decoration: none; }
.plan-mini-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.plan-mini-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* plan-mini 안의 작은 썸네일 */
.plan-mini-img {
  flex: 0 0 auto; width: 48px; height: 32px;
  border-radius: 6px; object-fit: cover; background: var(--line);
  align-self: center;
}

/* ── 이 하루에 빠진 것 ──
 *
 * 답 카드 **바로 아래**다. 이 자리가 이 기능의 전부다 — 같은 것이 도시
 * 쪽에서는 문서의 87% 지점(폰 9,122px)에 있었고 13일 동안 클릭이 5건이었다.
 *
 * display 를 주므로 [hidden] 규칙을 짝으로 둔다. 이 사이트에서 세 번
 * 걸린 함정이다(.card·.az·.pkg).
 */
.gaps { margin: 16px 0 0; display: grid; gap: 8px; }
.gaps[hidden] { display: none; }
.gaps-head {
  margin: 0; color: var(--ink-3); font-size: .82rem; font-weight: 800;
}
.gap {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--ink); text-decoration: none;
}
.gap:hover { border-color: var(--accent); }
.gap:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.gap-icon { flex: 0 0 auto; font-size: 1.1rem; }
.gap:has(.gap-img) { flex-wrap: wrap; }
.gap:has(.gap-img) .gap-cta { margin-left: auto; }
.gap-img { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: var(--paper); }
.gap-title { flex: 1 1 auto; min-width: 0; font-size: .92rem; font-weight: 700; }
.gap-price {
  flex: 0 0 auto; font-size: .85rem; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
/* mini-cta 와 같은 색. 흰 글자 대비 5.18:1 (실측) */
.gap-cta {
  flex: 0 0 auto; padding: 5px 11px; border-radius: 8px;
  background: #c2410c; color: #fff;
  font-size: .78rem; font-weight: 800; white-space: nowrap;
}
.gaps-note { margin: 2px 0 0; color: var(--ink-3); font-size: .78rem; line-height: 1.6; }
/* 띠 끝의 패키지 한 줄(_gaps.html). **칸(.gap)처럼 만들지 않는다** — 카드로
 * 그리면 네 번째 칸으로 읽혀서 "최대 3칸"이 무너져 보인다. 여기는 '이
 * 하루'가 아니라 '통짜 상품'이라 결이 다르다는 것을 모양으로 말한다.
 * 글자 링크라도 손가락으로 누르는 자리라 44px 은 준다(.gap·.more 와 같다). */
.gaps-more { margin: 10px 0 0; font-size: .85rem; font-weight: 700; }
.gaps-more a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--accent); text-decoration: none; word-break: keep-all;
}
.gaps-more a:hover { text-decoration: underline; }
.gaps-more a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ── 주관식 화면의 하단 고정 단추 ──
 *
 * 답이 나온 뒤에만 뜬다(guide.html 의 bottomBar). 폭을 480px 로 묶는 것은
 * 운영자 지정이다 — PC 에서 화면 폭 전체를 띠로 덮으면 광고로 읽힌다.
 *
 * **바탕색을 #ff4d24 로 두지 않았다.** 지정받은 색인데 그 위의 흰 16px
 * 굵은 글자가 3.31:1 이다(실측). 16px 굵게는 WCAG 의 '큰 글자'(18.66px
 * 굵게)에 못 미쳐 4.5:1 을 받아야 한다. 한 단계 어두운 #d93b12 는
 * 4.58:1 이고 눈으로는 거의 같은 색이다.
 *
 * hidden 규칙을 같이 둔다 — 이 사이트에서 세 번 걸린 함정이다. 자식에
 * display:flex 를 주면 [hidden] 이 안 듣는 경우가 있어 짝으로 못박는다. */
/* 폰에서는 **좌우·아래로 꽉 찬다**(운영자 지시 2026-09-13). 흰 여백 안에
   단추가 앉아 있던 모양을 걷어냈다 — 띠 전체가 단추다.
   색은 띠가 들고 단추는 투명하다. 둘 다 애니메이션을 걸면 두 개가 각자
   돌아 한 프레임씩 어긋나 보이는 순간이 생긴다.
   `env(safe-area-inset-bottom)` 은 아이폰 홈 막대 자리다. 안 채우면 그
   띠만 흰색으로 남아 아래가 잘린 것처럼 보인다. */
.fixed-cta {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 1000;
  width: 100%; box-sizing: border-box;
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  background-color: #d93b12;
  animation: cta-blink .9s steps(1, end) infinite;
  box-shadow: 0 -4px 16px rgb(0 0 0 / 18%);
}
/* 넓은 화면에서 1,280px 짜리 띠는 광고 배너로 읽힌다. 폭을 묶고
   위쪽 모서리만 둥글린다 — 폰에서는 각지고 꽉 찬 그대로다. */
@media (min-width: 760px) {
  .fixed-cta {
    max-width: 480px; margin-inline: auto;
    border-radius: 14px 14px 0 0; overflow: hidden;
  }
}
.fixed-cta[hidden] { display: none; }
/* 단추는 색을 안 들고 띠를 꽉 채우기만 한다(색은 .fixed-cta 가 든다).
   높이 56px 은 손가락 기준 44px 을 넉넉히 넘긴다. */
.fixed-cta-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: 56px; border-radius: 0;
  background: transparent; color: #fff; text-decoration: none;
  font-size: 16px; font-weight: 700;
  transition: transform .1s ease;
}
/* ── 0.3초마다 색이 바뀐다 (운영자 지시) ──
 *
 * **색 셋의 밝기를 맞춰 놨다.** 밝기가 크게 오르내리면 깜빡임이 광과민성
 * 발작을 부를 수 있다(WCAG 2.3.1). 여기 셋은 상대밝기 0.173~0.179 로
 * 3% 안에서만 움직이고 색상만 돈다 — 눈에는 확 띄는데 번쩍이지는 않는다.
 * 셋 다 흰 글자 대비 4.58~4.71:1 이라 어느 순간에 멈춰도 글자가 읽힌다.
 * 색을 바꿀 때는 대비와 밝기를 **둘 다** 다시 재고 넣을 것.
 *
 * steps(1) 이라 스르르 섞이지 않고 딱딱 바뀐다. 0.9초에 셋이니 한 색이
 * 0.3초다.
 */
@keyframes cta-blink {
  0%,      33.32% { background-color: #d93b12; }  /* 주황 4.58:1 */
  33.33%,  66.65% { background-color: #e11d48; }  /* 장미 4.70:1 */
  66.66%, 100%    { background-color: #c026d3; }  /* 자홍 4.71:1 */
}
/* 손을 올리면 멈춘다. 누르려는 순간까지 색이 바뀌면 눌러야 할 것이
   아니라 배너로 읽힌다. 색을 든 쪽(띠)에 건다. */
.fixed-cta:hover { animation-play-state: paused; }
.fixed-cta-btn:active { transform: scale(.98); }
.fixed-cta-arrow { font-weight: 800; }
/* 띄운 동안 바닥글이 가려지지 않게 자리를 만든다. */
body.has-fixed-cta { padding-bottom: 88px; }
/* '맨 위로'(.totop)도 화면 오른쪽 아래에 붙박이다. 그대로 두면 띠와
   겹쳐 앉는다 — 실측으로 두 개가 포개졌다. 띠 높이만큼 올린다. */
body.has-fixed-cta .totop { bottom: 92px; }
@media (max-width: 560px) {
  body.has-fixed-cta .totop { bottom: 88px; }
}
/* 움직임을 줄여 달라고 기기에 설정해 둔 사람에게는 **깜빡이지 않는다.**
   광과민성이나 어지럼 때문에 켜 두는 설정이라, 여기서 무시하면 그 사람에게
   이 화면은 못 쓰는 화면이 된다. 색 하나로 고정한다. */
@media (prefers-reduced-motion: reduce) {
  .fixed-cta { animation: none; background-color: #d93b12; }
  .fixed-cta-btn { transition: none; }
  .fixed-cta-btn:active { transform: none; }
}

/* ── 폰 아래에 붙는 토스 미니앱 띠 (.tossbar) ──
 *
 * 위 `.fixed-cta` 를 베꼈지만 셋이 다르다.
 *
 * ① **깜빡이지 않는다.** `.fixed-cta` 는 "답을 고른 뒤" 한 화면에만 뜨므로
 *    깜빡여도 됐다. 이 띠는 1,600쪽 전부에 뜬다 — 다 깜빡이면 사이트가
 *    광고판으로 읽힌다.
 * ② **색이 파랑이다.** 주황(`#d93b12`)과 갈라 놔야 같은 단추로 안 읽힌다.
 *    토스 브랜드 파랑 `#3182F6` 은 흰 글자 대비가 **3.71:1 로 탈락**이다
 *    (실측 2026-09-21). 16px 굵게는 WCAG 의 '큰 글자'(18.66px 굵게)에
 *    못 미쳐 4.5:1 을 받아야 한다. 한 단계 어두운 `#1B64DA` 가 5.41:1 이고
 *    눈으로는 거의 같은 파랑이다.
 * ③ **폰에서만 뜬다.** 760px 이상에서는 통째로 숨긴다. 서버에서 UA 로
 *    가르지 않는다 — 엣지 캐시가 한 판을 모두에게 내주므로 PC 에 띠가
 *    뜨거나 폰에서 안 뜨는 일이 생긴다.
 *
 * `body` 클래스를 쓰지 않는다. `<body class>` 를 건드리면 `_fingerprint` 가
 * 1,556쪽의 lastmod 를 오늘로 찍는다(base.html 의 주석 참고). 그래서 자리는
 * 아래 `.foot` 여백과 `.totop` 올림으로 만든다.
 *
 * `[hidden]` 규칙을 짝으로 박는다 — 이 사이트에서 네 번 걸린 함정이다. */
.tossbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; box-sizing: border-box;
  /* 56px + 아이폰 홈 막대. 높이를 56px 로 맞춰 둬야 아래 여백 값들이
     `.fixed-cta` 와 같은 수로 유지된다. */
  height: calc(56px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background-color: #1B64DA;
  color: #fff; text-decoration: none;
  font-size: 16px; font-weight: 700;
  box-shadow: 0 -4px 16px rgb(0 0 0 / 18%);
}
.tossbar[hidden] { display: none; }
.tossbar-arrow { font-weight: 800; }
.tossbar:active { filter: brightness(.94); }

/* 띠가 바닥글을 가리지 않게 자리를 만든다.
 *
 * **`.foot` 에 여백을 주지 않는다.** 그러면 띠가 없는 `/guide/` 에도 붙어
 * 그 쪽만 빈 자리가 두 겹이 된다(거기는 `.fixed-cta` 가 `body` 에 88px 을
 * 따로 준다). 자리는 띠와 **같이 나오는 빈 칸**이 만든다 — 띠를 안 그리는
 * 쪽에는 이 칸도 없다. `:has()` 를 쓰지 않아 브라우저를 안 가린다. */
.tossbar-space { height: calc(62px + env(safe-area-inset-bottom, 0px)); }
/* '맨 위로'는 꼬리 안에서 오른쪽 아래에 붙박이라 그대로 두면 띠와 포개진다
   (`.fixed-cta` 에서 실측으로 겪었다). **띠가 있는 쪽에서만** 올린다 —
   그래서 형제 선택자를 쓴다(띠가 `.totop` 보다 앞에 있어야 듣는다). */
@media (max-width: 759px) {
  .tossbar ~ .totop { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 760px) {
  .tossbar, .tossbar-space { display: none; }
}

.stay-note {
  margin-top: 22px; padding: 16px 18px; border-radius: var(--r);
  background: var(--card); border: 1px dashed var(--line);
}
.stay-label { margin: 0; color: var(--ink-3); font-size: .78rem; font-weight: 800; }
/* 숙소 사진 카드 — 상품 제휴 링크는 사진 카드 + 단추(CLAUDE.md 전역 규칙) */
.stay-img-link { display: block; margin: 10px 0; border-radius: calc(var(--r) - 4px); overflow: hidden; }
.stay-img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; display: block; }
/* 이름 링크 — course.html plan 줄과 stay-note 둘 다 쓴다 */
.plan-name-link { color: inherit; text-decoration: none; }
.plan-name-link:hover { text-decoration: underline; }
.plan-name-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* 사진 링크 — course.html plan 줄 이미지 */
.plan-img-link { display: block; }
.rechips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }

/* ── 국내 가볼 곳 (한국관광공사) ──
 *
 * 상품 카드와 **일부러 다르게** 생겼다. 우리 상품에는 값과 예약 단추가
 * 있고 이쪽에는 없는데, 같은 모양으로 깔면 사람이 눌러 보고 나서야
 * 그 차이를 알게 된다. 그림자도 뜨는 움직임도 없다 — 누르는 것이 아니다.
 *
 * 이름을 `.spot*` 로 쓰면 안 된다. /today/ 의 도시 카드가 이미 .spots·
 * .spot-body·.spot-when 을 쓰고 있어서, 나중에 적힌 쪽이 이쪽을 덮어쓰거나
 * 그 화면이 이쪽 규칙에 끌려 들어간다. **같은 종류의 충돌에 두 번 당했다** —
 * 두 번째는 동선 짜기 화면의 명소 목록이었고(운영자 지적 2026-09-10),
 * 그래서 그쪽을 `.poi*` 로 바꿨다(아래 `.poi-list`).
 */
.locals {
  list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.local-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column;
}
.band.alt .local-card { background: var(--paper); }
.local-img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--line);
}
.local-body { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 3px; }
.local-kind {
  margin: 0; color: var(--ink-3); font-size: .76rem; font-weight: 800;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
}
/* 날짜가 이 자료에서 제일 쓸모 있는 값이다. 그래서 눈에 띄게 둔다. */
.local-when {
  color: var(--accent); font-size: .78rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.local-name {
  margin: 0; font-size: .95rem; font-weight: 700; line-height: 1.4;
  letter-spacing: -.02em;
}
.local-area { margin: 0; color: var(--ink-3); font-size: .78rem; }
@media (max-width: 720px) {
  .locals { grid-template-columns: 1fr 1fr; gap: 9px; }
}

/* ── 걷기길 (두루누비) ──
 *
 * 사진이 없는 자료라 카드가 아니라 줄로 놓는다. 대신 숫자(거리·시간·
 * 난이도)가 있어서 그것이 이 줄의 주인공이다.
 */
.trails { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.trail {
  background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--good);
  border-radius: 12px; padding: 14px 16px;
}
.band.alt .trail { background: var(--paper); }
.trail-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.trail-name { margin: 0; font-size: 1.02rem; font-weight: 800; letter-spacing: -.03em; }
.trail-route { margin: 0; color: var(--ink-3); font-size: .8rem; font-weight: 700; }
.trail-facts {
  margin: 7px 0 0; display: flex; flex-wrap: wrap; gap: 6px;
  font-variant-numeric: tabular-nums;
}
.trail-facts span {
  padding: 3px 9px; border-radius: 999px; background: var(--paper);
  border: 1px solid var(--line); font-size: .8rem; font-weight: 700;
}
.band.alt .trail-facts span { background: var(--card); }
.trail-long { color: var(--ink); }
.trail-hard, .trail-cycle { color: var(--ink-2); }
.trail-why { margin: 8px 0 0; color: var(--ink-2); font-size: .88rem; line-height: 1.6; }
.trail-area { margin: 6px 0 0; color: var(--ink-3); font-size: .78rem; }

/* ── 우리가 안 파는 것 (eSIM · 공항픽업 · 짐 보관) ──
 *
 * 이 사이트에서 **값이 없는 유일한 카드**다. 그래서 상품 카드(.card)와
 * 일부러 다르게 생겼다 — 사진도 값도 없고, 왼쪽 띠 색도 상품(--brand)이
 * 아니라 --accent 다. 같은 모양으로 만들면 사람이 "우리가 재는 값"이
 * 빠진 상품 카드로 읽는다.
 *
 * 걷기길(.trail)과 골격이 같은 것은 우연이 아니다. 둘 다 '값 없이 사실만
 * 있는 줄'이라 같은 문법을 쓴다.
 */
/* 격자가 아니라 흐름이다. 격자(auto-fit)로 두면 **줄이 하나뿐인 쪽
 * 187곳에서 카드 한 장이 1,088px 를 가로로 다 먹는다** — 그러면 이게
 * 카드가 아니라 광고 띠로 읽힌다. 실제로 245쪽 중 187쪽이 한 줄짜리다.
 * max-width 로 위를 막고 flex 로 왼쪽부터 채운다. */
.offsites {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.offsite {
  flex: 1 1 240px; max-width: 360px;
  background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column;
}
.band.alt .offsite { background: var(--paper); }
.offsite-title {
  margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -.03em;
  display: flex; align-items: baseline; gap: 8px;
}
/* 그림글자는 뜻을 나르지 않는다(옆에 같은 말이 글자로 있다). 화면
   낭독기가 "전파 세 칸"을 읽으면 제목이 두 번 읽히므로 aria-hidden 이다. */
.offsite-icon { font-size: 1.05rem; line-height: 1; }
.offsite-why {
  margin: 7px 0 0; color: var(--ink-2); font-size: .88rem; line-height: 1.6;
  flex: 1;
}
/* 단추가 아니라 링크로 둔다. 이 줄은 우리 상품이 아니라서 예약 단추
   (.plan-cta, --brand)와 같은 무게를 가지면 안 된다 — 화면에서 제일
   눈에 띄는 것은 언제나 우리가 값을 재는 쪽이어야 한다. */
/* 글자만 쓰되 눌러지는 크기는 갖춘다(.card-intro summary 와 같은 규칙).
   한 쪽에 많아야 세 개라 알약 단추를 써도 단추밭이 되지는 않지만,
   알약으로 만들면 우리 예약 단추와 무게가 같아진다. */
.offsite-cta {
  margin-top: 10px; align-self: flex-start;
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 800; font-size: .88rem;
  color: var(--accent); text-decoration: none;
}
.offsite-cta:hover { text-decoration: underline; }
.offsites + .note { margin-top: 12px; }

/* ── 상황 태그 ── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* 개수는 칩과 같은 색에서 흐리기만 한다. 따로 색을 주면 칩이 검게
   뒤집혔을 때(고른 상태) 그 숫자만 안 읽힌다. */
.chips .n { color: inherit; opacity: .6; font-weight: 700; }
.tagrow { margin-top: 18px; }
.tagrow-label { margin: 0; color: var(--ink-3); font-size: .8rem; font-weight: 800; letter-spacing: .02em; }

/* ── 목적지 상세 ── */
.lede.strong { color: var(--ink); font-weight: 700; font-size: 1.05rem; }
.sub { margin: 30px 0 0; font-size: 1.14rem; font-weight: 800; letter-spacing: -.03em; }
/* 표 감싸개. 달 그래프(.chart-wrap)와 같은 처방이다 — 표는 제 몸을
   min-content 만큼 늘리고 **부모를 밀어내므로**, 밀리는 것을 여기서
   받는다. 실측(2026-09-06): 320px 에서 /city/add/(1,361,300원)가 쪽
   전체를 23px 밀었고, 여섯 자리인 /city/kix/(162,600원)는 7px 이었다 —
   자릿수가 곧 넘침 폭이었다.
   오른쪽 끝을 흐리게 덮어 "옆에 더 있다"를 알린다. */
/* `.tbl` 은 **본문 표 일반**이고 `.fares` 는 그중 항공값 표다(제일 싼 줄에
   띠를 세우는 것만 다르다). 규칙을 베껴 두면 한쪽만 고치게 되므로
   선택자를 같이 쓴다 — 이 파일에서 이름을 나눠 놓고 규칙을 복사해 두면
   무슨 일이 생기는지는 `.poi-list` 주석에 적어 두었다. */
.fares-wrap, .tbl-wrap { overflow-x: auto; position: relative; }
.fares-wrap::after, .tbl-wrap::after {
  content: ""; position: sticky; top: 0; right: 0; float: right;
  width: 24px; height: 100%; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--card));
}
.band.alt .fares-wrap::after,
.band.alt .tbl-wrap::after {
  background: linear-gradient(to right, transparent, var(--paper));
}
@media (min-width: 560px) {
  .fares-wrap::after, .tbl-wrap::after { display: none; }
}

/* 기간별 값. 예전에는 바탕이 비어 있고 선만 있어서, 회색 판 위에 글자를
   줄줄이 세워 둔 것처럼 보였다("표처럼 보이지도 않는다"). 흰 판에 얹고
   머리줄에 바탕색을 줘서 표를 표로 만든다. 그림자는 쓰지 않는다. */
.fares, .tbl {
  width: 100%; border-collapse: separate; border-spacing: 0;
  margin-top: 14px; font-variant-numeric: tabular-nums;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
}
.band.alt .fares, .band.alt .tbl { background: var(--paper); }
.fares th, .fares td, .tbl th, .tbl td {
  text-align: left; padding: 13px 12px; font-size: .95rem;
  border-bottom: 1px solid var(--line);
}
.fares tbody tr:last-child th, .fares tbody tr:last-child td,
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }
.fares thead th, .tbl thead th {
  background: var(--paper); color: var(--ink-2);
  font-size: .82rem; font-weight: 800; letter-spacing: .01em; padding: 10px 12px;
}
.band.alt .fares thead th, .band.alt .tbl thead th { background: var(--card); }
.fares tbody th, .tbl tbody th { font-weight: 800; white-space: nowrap; }
/* 표 안의 값이라 폰에서는 눌러 준다. 값이 이제 한 덩어리로 서기
   때문에(위 nowrap) **이 칸의 최소 너비가 곧 값의 너비다** — 크기를
   그대로 두면 표가 옆으로 더 삐져나간다.
   아래 끝은 재서 잡았다(src.web.mobile, 320px, /city/add/): 이 표는
   원래도 320px 에서 23px 넘치고 있었는데, nowrap 만 붙이면 27px 로
   늘었다. 값 칸이 예전(줄바꿈으로 두 줄이 되던 때)의 최소 너비보다
   좁아지는 크기가 여기다. 320px 14.9 · 390px 15.3 · 933px 부터 18.2px. */
.fares .num, .tbl .num { font-weight: 900; font-size: clamp(.92rem, .82rem + .55vw, 1.14rem); letter-spacing: -.03em; }
/* 온천 쪽의 표는 칸이 여섯이라(지역·수·값·일정·료칸·온천지) 항공값 표보다
   촘촘해야 한다. 값 칸만 키우면 나머지가 밀려서 폰에서 옆으로 넘친다. */
.tbl .num { font-size: clamp(.9rem, .84rem + .3vw, 1.02rem); }
/* 표 안의 숫자에 색을 준다(운영자 지정 2026-09-11: "표안에 들어간 숫자는
   우리 사이트에 어울리는 빨간색"). 제목 숫자와 **같은 뜻의 색**이지만
   crimson 을 그대로 쓰지 않는다 — 이 크기(14~16px)에서 어두운 판 대비가
   3.4:1 로 모자란다. 그 짝으로 --hl-text 가 있다(:root 주석 참조).
   `.fares`(항공값 표)는 안 건드린다. 그쪽 강조는 '제일 싼 줄'이고 색이
   이미 --brand-text 로 정해져 있다. */
.tbl .num { color: var(--hl-text); }
.tbl td, .tbl th { padding: 11px 10px; }
/* 칸이 여섯인 표(온천 쪽의 도시 표)만 최소 폭을 준다.
   **안 주면 브라우저가 짜부라뜨린다.** 실측(2026-09-10, 390px): 넘침은
   0인데 마지막 칸의 '벳푸 · 유후인' 이 세 줄로 접히고 '도카치가와' 가
   잘려 읽혔다. 넘치지 않으니 폰 검사도 안 잡는다 — 눈으로 봐야 보이는
   종류다. 밀리게 두면 오른쪽 흐림(::after)이 "옆에 더 있다"를 알린다.
   칸이 셋인 표(값·일정)는 390px 에서도 편하게 들어가므로 안 건드린다. */
.tbl-wide { min-width: 560px; }
/* 제일 싼 줄. 색만으로 말하지 않으려고 왼쪽에 굵은 띠를 세우고 값도 키운다. */
.fares tr.best th[scope="row"] { box-shadow: inset 4px 0 0 var(--brand); }
/* 글자색이라 --brand 가 아니라 --brand-text 다. --brand 는 흰 배경에서
   3.48:1 이라 이 크기(18.2~19.8px)에서 본문 기준에 못 미쳤다. */
.fares tr.best .num { color: var(--brand-text); font-size: clamp(1rem, .88rem + .6vw, 1.24rem); }
.fares .plan-cta {
  margin: 0; padding: 10px 15px; font-size: .88rem; white-space: nowrap;
}
/* 달 그래프는 열두 달을 460px 안에 그린다. 360px 기기에서는 옆으로
   밀어야 하는데, `.rail` 과 달리 **밀라는 신호가 없다** — 카드가 반쯤
   잘리면 "옆에 더 있다"로 읽히지만, 막대그래프가 잘리면 그냥 고장으로
   읽힌다. 그래서 오른쪽 끝을 흐리게 덮어 이어진다는 것을 보여 준다.
   달 수를 줄이거나 폭을 좁히는 길도 있는데, 열두 달을 328px 에 넣으면
   달 하나가 27px 이라 "9월" 이라는 글자부터 안 들어간다. */
.chart-wrap { margin-top: 16px; overflow-x: auto; position: relative; }
.chart-wrap::after {
  content: ""; position: sticky; top: 0; right: 0; float: right;
  width: 28px; height: 100%; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--paper));
}
.band.alt .chart-wrap::after {
  background: linear-gradient(to right, transparent, var(--card));
}
/* 다 보이는 넓은 화면에서는 덮을 이유가 없다. */
@media (min-width: 520px) { .chart-wrap::after { display: none; } }
.months { width: 100%; min-width: 460px; height: auto; display: block; }
.bar-x { fill: var(--ink-3); font-size: 12px; font-family: var(--sans); }
.bar-v { fill: var(--ink-2); font-size: 12px; font-weight: 700; font-family: var(--sans); }
.bestdays, .dows { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
/* 판 위의 판. 바탕이 흰 띠(.band.alt)면 회색으로, 회색 띠면 흰색으로
   뒤집는다 — 같은 색끼리 겹치면 칸이 통째로 안 보인다. */
.bestdays li, .dows li {
  background: var(--card); border: 1px solid var(--line); border-radius: 11px;
  padding: 11px 15px; display: flex; flex-direction: column; gap: 1px; min-width: 108px;
}
.band.alt .bestdays li, .band.alt .dows li { background: var(--paper); }
.bd-date, .dow-name { color: var(--ink-2); font-size: .84rem; font-weight: 700; }
.bd-price, .dow-price { font-weight: 800; font-size: clamp(1rem, .92rem + .34vw, 1.1rem); letter-spacing: -.025em; }
.bd-air { color: var(--ink-3); font-size: .74rem; }
.dows li.best { border-color: var(--brand); }
/* 여기도 글자색이라 --brand-text 다. 17.6px 는 '큰 글자'(18.66px)에
   못 미쳐서 본문 기준 4.5:1 을 받아야 하는데 --brand 는 3.48:1 이었다. */
.dows li.best .dow-price { color: var(--brand-text); }
/* bestdays: 각 출발일 카드 전체가 항공권 검색으로 눌리게 — card-link::after 패턴과 동일.
   li(position:relative) 안 .bestday-link 의 ::after 가 inset:0 으로 li 전체를 덮는다.
   단추 모양은 유지하고 투명 오버레이만 위에 얹힌다. */
.bestdays .bestday-item { position: relative; }
.bestday-link {
  display: inline-block; margin-top: 6px;
  padding: 5px 10px; border-radius: 8px;
  background: var(--brand); color: #fff; text-decoration: none;
  font-size: .78rem; font-weight: 800; white-space: nowrap;
}
.bestday-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bestday-link:hover { filter: brightness(1.06); }
.bestday-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ── 주관식(코스 추천) ──
 *
 * **앱의 「코스」 탭과 같은 화면이다**(운영자 지시 2026-09-18). 입력창을
 * 없애고, 코스를 두셋 늘어놓아 견주게 하고, 시간표는 판으로 펼친다.
 * 넓은 화면에서는 카드가 가로로 늘어서고 판이 가운데 뜨며, 좁은 화면
 * 에서는 카드가 한 줄씩 쌓이고 판이 바닥에서 올라온다 — 모양이 달라도
 * 차례와 낱말은 같다.
 */
.guide-go { font-size: 1.06rem; }
.guide-hint {
  margin: 9px 0 0; text-align: center;
  color: var(--ink-3); font-size: .84rem; font-weight: 600;
}
/* 이 쪽의 갈래를 가르는 글자. 「어디서 뭐 하고 싶으세요?」와 같은 급이다 —
   길이 둘(바로 추천 · 조건으로 좁히기)이라는 것이 한눈에 보여야 하고,
   작은 회색 딱지로 두면 설명문에 섞여 읽힌다. */
.big-head {
  margin: 34px 0 4px; font-size: clamp(1.18rem, 1.06rem + .5vw, 1.4rem);
  font-weight: 800; letter-spacing: -.035em; color: var(--ink);
}
.big-sub { margin: 0 0 12px; color: var(--ink-2); font-size: .92rem; line-height: 1.55; }
.build-clear { margin: 10px 0 0; }
.build-clear button {
  background: none; border: 0; cursor: pointer; font-family: inherit;
  padding: 6px 8px; border-radius: 9px;
  color: var(--ink-3); font-size: .92rem; font-weight: 700;
}
.build-clear button:hover { color: var(--ink); }

/* 여행경비 — 끄는 막대.
 * 칩 여섯 개를 쓰던 자리다. 금액은 원래 이어진 것이라 막대가 맞다.
 * 칸은 여섯으로 못 박는다(step=1) — 1원 단위로 끌게 하면 우리가 가진
 * 자료보다 정밀한 척을 하게 된다. 코스 값은 만원 단위로 떨어진다. */
.bbar { padding-top: 4px; }
.bbar-now {
  margin: 0 0 4px; text-align: center;
  font-size: 1.24rem; font-weight: 800; letter-spacing: -.03em; color: var(--brand-text);
}
.bbar-range { width: 100%; accent-color: var(--brand); cursor: pointer; }
.bbar-range:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.bbar-ends {
  display: flex; justify-content: space-between;
  color: var(--ink-3); font-size: .78rem; font-weight: 600;
}
/* 칸 이름의 **유일한 출처**다. 보이지는 않지만 JS 가 여기서 읽는다 —
   JS 에 다시 적어 두면 빌드가 값을 바꿨을 때 화면만 옛말을 한다. */
.bbar-steps[hidden] { display: none; }

/* ── 답 ── */
/* 답으로 옮겨 줄 때 **머리띠 아래로 내려 세운다.** 안 하면 화면 맨 위에
   딱 붙어서 「이 중에서 골라 보세요」가 머리띠에 가린다(실측 2026-09-18,
   폰 390px). 76px 은 이 사이트가 이미 쓰는 값이다(.pick-results). */
.answer { margin-top: 26px; scroll-margin-top: 76px; }
/* 답이 도착했다고 말하는 자리. 조건 머리(작은 회색 딱지)와 **등급을
   가른다** — 화면에서 제일 중요한 것이 캡션처럼 읽히면 안 된다. */
.answer-head {
  margin: 0 0 4px; font-size: clamp(1.2rem, 1.08rem + .5vw, 1.42rem);
  font-weight: 800; letter-spacing: -.035em; color: var(--ink);
}
.answer-sub { margin: 0 0 8px; color: var(--ink-3); font-size: .88rem; line-height: 1.5; }
.answer-read { margin: 0 0 14px; color: var(--ink-3); font-size: .86rem; font-weight: 700; }

/* 견주는 카드. **한 장이 아니라 두셋이다** — 자료는 원래부터 여럿이었는데
   (오사카 5개) 제일 높은 하나만 주고 나머지를 버리고 있었다.
   넓은 화면에서는 나란히, 좁은 화면에서는 한 줄씩. */
/* 넓은 화면에서는 **세 장이 한 줄에 다 보여야 한다.** 250px 로 두었더니
   좁은 본문(narrow, 660px)에 두 칸만 들어가 셋째가 아랫줄로 떨어졌다 —
   「이 중에서 골라 보세요」라고 해 놓고 한 장은 스크롤해야 보였다
   (실측 2026-09-18, 1280px). 196px 이면 셋이 한 줄이고, 폰(362px)에서는
   둘이 안 들어가 그대로 한 줄씩 쌓인다. */
.cts { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }
.ct {
  display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow); transition: transform .16s ease, border-color .16s ease;
}
.ct:hover { transform: translateY(-2px); border-color: var(--line-2); }
/* 점수가 제일 높았던 한 장. **테두리로만 짚어 준다** — 나머지를 흐리게
   만들면 견주라고 내놓고 하나만 보라는 말이 된다. */
.ct.best { border: 1.5px solid var(--brand); }
.ct-shot {
  position: relative; height: 138px; background: var(--blue-soft);
  flex: 0 0 auto; overflow: hidden;
}
.ct-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-flag {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  background: var(--brand); color: var(--brand-ink);
  border-radius: 999px; padding: 4px 9px;
  font-size: .68rem; font-weight: 800; letter-spacing: -.01em;
}
.ct-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 15px 16px 16px; }
.ct-body h3 {
  margin: 0; font-size: 1.06rem; font-weight: 800;
  letter-spacing: -.035em; line-height: 1.35; color: var(--ink);
}
.ct-total { margin: 5px 0 0; font-size: .88rem; font-weight: 700; color: var(--brand-text); }
.ct-total b { font-weight: 800; }
/* **두 줄까지만.** 나머지는 판에서 본다 — 카드에 다 적으면 세 장을
   견주는 자리가 아니라 세 편의 글이 된다. */
.ct-why {
  margin: 9px 0 0; color: var(--ink-2); font-size: .88rem; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 남는 자리는 여기로 — 단추는 늘 카드 바닥에 붙는다. 이게 없으면 설명이
   짧은 카드만 키가 작아져서 오와열이 어긋난다(앱에서 먼저 겪었다). */
.ct-open {
  margin-top: auto; width: 100%; cursor: pointer; font-family: inherit;
  border: 0; border-radius: 12px; padding: 12px 10px;
  background: color-mix(in srgb, var(--brand) 12%, var(--card));
  color: var(--brand-text); font-size: .95rem; font-weight: 800;
}
.ct-body > .ct-open { margin-top: 14px; }
.ct.best .ct-open { background: var(--brand); color: var(--brand-ink); }
.ct-open:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.answer-more { margin: 14px 0 0; font-size: .88rem; font-weight: 700; }
.answer-lost { margin: 10px 0 0; color: var(--ink-3); font-size: .86rem; line-height: 1.55; }

/* ── 코스 판 ──
 * 쪽을 새로 만들지 않는다 — 넘어갔다 돌아오면 견주던 자리를 잃는다.
 * 네이티브 <dialog> 라 ESC 와 뒷배경 막기를 브라우저가 해 준다.
 *
 * **`display` 를 `.cdlg` 에 주면 안 된다.** 브라우저의 `dialog:not([open])
 * { display:none }` 을 이겨서 판이 늘 펼쳐진 채로 쪽에 박힌다. 이 사이트
 * 에서 `[hidden]` 으로 네 번 걸린 것과 같은 함정이라 `[open]` 에만 준다. */
.cdlg {
  padding: 0; border: 0; border-radius: 20px;
  width: min(660px, calc(100% - 28px)); max-width: none; max-height: 86vh;
  background: var(--card); color: var(--ink);
  box-shadow: 0 18px 60px rgba(16, 22, 29, .28);
  overflow: hidden;
}
.cdlg[open] { display: flex; flex-direction: column; }
.cdlg::backdrop { background: rgba(16, 22, 29, .55); }
/* 손잡이는 바닥에서 올라오는 좁은 화면에서만 뜻이 있다. */
.cdlg-grab { display: none; }
.cdlg-in { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cdlg-shot { width: 100%; height: 168px; object-fit: cover; display: block; background: var(--blue-soft); }
.cdlg-head { padding: 16px 18px 6px; }
.cdlg-head h2 {
  margin: 0; font-size: 1.24rem; font-weight: 800;
  letter-spacing: -.035em; line-height: 1.35;
}
.cdlg-total { margin: 5px 0 0; font-size: .98rem; font-weight: 700; color: var(--brand-text); }
.cdlg-note { margin: 10px 18px 0; }
.cdlg-acts { margin: 20px 18px 22px; }
.cdlg-acts .btn { display: block; width: 100%; text-align: center; }
.cdlg-close {
  flex: 0 0 auto; width: 100%; cursor: pointer; font-family: inherit;
  border: 0; border-top: 1px solid var(--line); background: var(--paper);
  padding: 15px 10px; color: var(--ink-2); font-size: .98rem; font-weight: 800;
}
.cdlg-close:hover { color: var(--ink); }
/* 판이 열려 있는 동안 하단 고정 단추는 숨는다 — 판의 [이 코스로 갈래요]와
   나란히 뜨면 어느 것이 이 자리의 다음 걸음인지 안 갈린다. */
.fixed-cta.under-dlg { display: none; }

/* 「왜 이 코스인지」. **문장마다 줄을 나눈다** — 폰에서 한 덩어리 여섯
   줄은 벽처럼 보여서 첫 줄에서 눈이 미끄러진다. 숫자에는 색과 굵기를
   준다. 사람이 실제로 찾는 것은 숫자다. */
.why { margin: 12px 0 0; display: grid; gap: 7px; }
.why p { margin: 0; color: var(--ink-2); font-size: .94rem; line-height: 1.6; }
.why .num { color: var(--brand-text); font-weight: 800; }
.why-more {
  justify-self: start; background: none; border: 0; cursor: pointer;
  font-family: inherit; padding: 2px 0;
  color: var(--accent); font-size: .88rem; font-weight: 700;
}
.why-more:hover { text-decoration: underline; }

/* 시간대 타임라인. **세로선 하나에 좌우로 번갈아 붙인다.**
 * 전에는 아래로 죽 쌓여서 「가기 전 → 09:30 → 13:00」이 그냥 목록으로
 * 읽혔다 — 하루의 흐름이라는 것이 안 보였다.
 *
 * 선은 **칸마다 반씩** 그린다. 하나로 이어 그리면 첫 시각 위와 끝 시각
 * 아래로 삐져나오는데, 칸 높이가 제각각이라 자리를 미리 못 박는다. */
.tl { list-style: none; margin: 16px 0 0; padding: 0 12px; }
.tl-row {
  position: relative; display: grid; align-items: center;
  grid-template-columns: 1fr 62px 1fr;
}
.tl-row::before {
  content: ""; grid-column: 2; grid-row: 1; justify-self: center;
  width: 2px; height: 100%; background: var(--line);
}
.tl-row:first-child::before { align-self: end; height: 50%; }
.tl-row:last-child::before { align-self: start; height: 50%; }
.tl-row:only-child::before { display: none; }
.tl-time {
  grid-column: 2; grid-row: 1; justify-self: center; z-index: 1;
  background: var(--brand); color: var(--brand-ink);
  border-radius: 999px; padding: 5px 8px; white-space: nowrap;
  font-size: .72rem; font-weight: 800;
}
.tl-row.l .tl-card { grid-column: 1; }
.tl-row.r .tl-card { grid-column: 3; }
.tl-card {
  grid-row: 1; display: flex; flex-direction: column; overflow: hidden;
  margin: 6px 0; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: 13px;
}
.tl-card:hover { border-color: var(--line-2); }
.tl-shot { display: block; height: 76px; background: var(--blue-soft); }
.tl-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-bare { display: block; width: 100%; height: 100%; }
.tl-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin: 9px 10px 0;
  font-size: .82rem; font-weight: 700; line-height: 1.4; color: var(--ink);
}
/* **값에 한 줄을 통째로 준다.** 옆에 예약 딱지를 붙였더니 폭이 모자라
   「29,643」에서 '원'이 잘렸다(앱에서 폰으로 실측). 카드 전체가 이미
   예약 링크라 딱지는 없어도 갈 데가 없어지지 않는다. */
.tl-price { margin: 4px 10px 0; font-size: .88rem; font-weight: 800; color: var(--ink); }
.tl-cta { margin: 1px 10px 10px; font-size: .7rem; font-weight: 700; color: var(--accent); }

/* '이 하루에 얹으면 좋은 것'. **가로로 넘긴다** — 세로로 쌓으면 이 칸이
   코스 시간표보다 길어져서, 얹으면 좋은 것이 하루보다 커 보인다. */
.big-head.in-dlg { margin: 26px 18px 10px; font-size: 1.1rem; }
.extras {
  display: flex; gap: 9px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 0 18px 4px; scrollbar-width: thin;
}
.extra {
  flex: 0 0 auto; width: 168px; display: flex; flex-direction: column;
  text-decoration: none; color: inherit; padding: 13px;
  background: color-mix(in srgb, var(--brand) 8%, var(--card));
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--card));
  border-radius: 14px;
}
.extra:hover { border-color: var(--brand); }
.extra-ico { font-size: 1.5rem; line-height: 1; }
.extra-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-top: 6px;
  font-size: .88rem; font-weight: 800; line-height: 1.35; color: var(--ink);
}
/* 남는 자리는 값 위로 — 값은 늘 카드 바닥에 붙는다. */
.extra-price { margin-top: auto; padding-top: 10px; font-size: .88rem; font-weight: 800; color: var(--brand-text); }
.extra-cta { font-size: .78rem; font-weight: 700; color: var(--accent); }
.extras-note { margin: 8px 18px 0; }

/* 「어디 갈지 모르겠다면」. 이 쪽의 본 일은 코스를 짜는 것이고, 성향
   테스트는 "그래도 모르겠다"는 사람의 뒷문이라 맨 아래다. */
.testcard {
  display: flex; align-items: center; gap: 13px; text-decoration: none; color: inherit;
  padding: 16px; background: var(--card);
  border: 1px solid var(--line); border-radius: 16px;
}
.testcard:hover { border-color: var(--line-2); }
.testcard-ico { flex: 0 0 auto; line-height: 0; }
.testcard-txt { flex: 1 1 auto; min-width: 0; }
.testcard-txt b { display: block; font-size: 1.04rem; font-weight: 800; letter-spacing: -.03em; }
.testcard-txt small { display: block; margin-top: 2px; color: var(--ink-3); font-size: .84rem; }
.testcard-go { flex: 0 0 auto; color: var(--ink-3); font-size: 1.1rem; }

/* ── 꼬리말 메뉴 ── */
.foot-nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 18px; }
.foot-nav a { color: var(--ink-2); text-decoration: none; font-weight: 700; font-size: .86rem; }
.foot-nav a:hover { color: var(--ink); }

/* ── 빠른 선택 (홈) ── */
.chips.quick { margin-bottom: 4px; }
.chips.quick .chip { background: var(--card); }
.more-chip { border-style: dashed; color: var(--ink-2); }

/* ── 조건 조립기 (주관식) ──
 * 빈 입력창만 두면 대부분 아무것도 안 쓰고 나간다. 누를 것을 준다.
 *
 * 2026-09-17 에 앱과 같은 모양으로 바꿨다. 전에는 줄마다 판이 따로
 * 떠 있고 도시 칩 116개가 화면을 먹었다. 이제 **판 한 장 안에 네 줄**
 * 이고, 줄 사이는 머리카락 선이며, 누른 줄만 펴진다.
 */
/* 조건 머리는 `.build-head`(작은 회색 딱지)를 쓰다가 `.big-head` 로
   올렸다(2026-09-18, 앱과 같은 급). 이 쪽에는 길이 둘뿐이라 둘째 길이
   설명문에 섞여 읽히면 없는 기능이 된다. */
.builder {
  border-radius: 16px; overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
}
.build-row + .build-row { border-top: 1px solid var(--line); }
/* 줄 머리. 접혀 있을 때는 무엇을 고른 상태인지만 오른쪽에 적는다. */
.build-open {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 16px 18px; background: none; border: 0; cursor: pointer;
  font-family: inherit; text-align: left;
}
.build-open:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.build-label {
  color: var(--ink); font-size: 1.02rem; font-weight: 800; letter-spacing: -.03em;
}
/* 지금 고른 값. 고르기 전에는 회색 「고르기」다. */
.build-pick {
  margin-left: auto; font-size: .98rem; font-weight: 700;
  color: var(--ink-3); letter-spacing: -.02em;
}
.build-pick.on { color: var(--brand-text); font-weight: 800; }
/* 꺾쇠. 펴지면 뒤집힌다. */
.build-open::after {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-left: 2px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: translateY(-3px) rotate(45deg); transition: transform .18s ease;
}
.build-row.open .build-open::after { transform: translateY(1px) rotate(-135deg); }
.build-body { padding: 0 18px 18px; }
/* `display` 를 준 요소는 브라우저의 `[hidden]`(display:none)을 이긴다.
   아래 `.build-body.panes` 가 grid 라서, 이 줄이 없으면 **접힌 줄의 두
   칸이 늘 펼쳐진 채로 보인다.** 이 사이트에서 네 번 걸린 함정이다. */
.build-body[hidden] { display: none; }
.build-row .chips { margin-top: 0; }
.build-acts { margin: 16px 0 0; }
.build-acts .btn { display: block; width: 100%; text-align: center; }
.build-acts .btn:disabled { opacity: .45; cursor: not-allowed; }

/* 어디로 — 권역 → 도시 두 칸.
 * 떠오르는 메뉴를 쓰지 않는다. 고르는 자리 위에 겹쳐 뜨면 방금 누른
 * 줄이 자기가 띄운 것에 가려진다(앱에서 먼저 겪고 되돌렸다). */
.build-body.panes {
  display: grid; grid-template-columns: 150px 1fr;
  padding: 0; height: 288px; border-top: 1px solid var(--line);
}
.pane { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pane-region { background: var(--paper); border-right: 1px solid var(--line); }
.pane-item {
  width: 100%; display: block; text-align: left; cursor: pointer;
  padding: 13px 14px; background: none; border: 0; border-left: 3px solid transparent;
  font-family: inherit; font-size: .96rem; font-weight: 600; color: var(--ink-2);
}
.pane-item:hover { color: var(--brand-text); }
.pane-item:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.pane-region .pane-item.on {
  background: var(--card); border-left-color: var(--brand);
  color: var(--brand-text); font-weight: 800;
}
.pane-city .pane-item { padding: 11px 16px; }
.pane-city-name { display: block; font-size: 1.02rem; font-weight: 600; color: var(--ink); }
.pane-city-sub { display: block; font-size: .8rem; color: var(--ink-3); margin-top: 1px; }
.pane-city .pane-item.on .pane-city-name { color: var(--brand-text); font-weight: 800; }
.pane-city .pane-item.on .pane-city-name::after { content: " ✓"; }
.pane-hint { margin: 0; padding: 24px 16px; color: var(--ink-3); font-size: .92rem; }

/* 코스 판 — 좁은 화면에서는 **바닥에서 올라온다**.
 *
 * 폰에서 가운데 뜨는 상자는 위아래로 잘리고, 엄지가 닿는 곳(화면 아래)
 * 에서 제일 멀다. 앱이 바닥 판을 쓰는 까닭이 그것이고, 여기서도 같다.
 * `<dialog>` 는 기본이 `margin:auto` 라 아래만 0 으로 눌러 붙인다. */
@media (max-width: 760px) {
  .cdlg {
    width: 100%; max-height: 90vh;
    margin: auto auto 0; border-radius: 20px 20px 0 0;
  }
  /* 내려서 닫을 수 있다는 것을 아무 데서도 말하지 않으면 아무도 안
     내린다. 여기서는 손잡이가 "이건 판이다"라고만 말한다 — 닫기는 아래
     단추와 뒷배경이 맡는다. */
  .cdlg-grab {
    display: block; flex: 0 0 auto; width: 40px; height: 4px;
    margin: 9px auto 2px; border-radius: 999px; background: var(--line-2); opacity: .55;
  }
  .cdlg-shot { height: 136px; }
  /* 칸을 좁힌다. 360px 화면에서 62px 을 떼면 양쪽 카드가 140px 밖에
     안 남아 상품 이름이 두 줄로도 안 들어간다.
     **46px 은 너무 좁았다** — 제일 긴 딱지(「가기 전」 42px)와 카드
     사이가 2px 이라 붙어 보였다(실측 2026-09-18, 390px). 56px 이면
     양쪽에 7px 씩 남고 카드는 여전히 159px 다. */
  .tl { padding: 0 8px; }
  .tl-row { grid-template-columns: 1fr 56px 1fr; }
  .tl-time { font-size: .66rem; padding: 4px 6px; }
  .tl-shot { height: 64px; }
  .big-head.in-dlg, .extras, .extras-note, .cdlg-note { padding-inline: 14px; }
  .big-head.in-dlg, .extras-note, .cdlg-note { margin-inline: 0; }
  .cdlg-head { padding-inline: 14px; }
  .cdlg-acts { margin-inline: 14px; }
}

/* ── 좁은 화면 ── */
@media (max-width: 720px) {
  .topbar-in { flex-wrap: wrap; padding: 9px 14px; }
  .nav { width: 100%; margin-left: 0; overflow-x: auto; padding-bottom: 2px; }
  .nav a { padding: 7px 11px; font-size: .86rem; }
  .hero-in { padding: 28px 14px 26px; }
  .band { padding: 26px 0; }
  .band-in, .foot-in { padding-inline: 14px; }
  .budget { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .dests { grid-template-columns: 1fr 1fr; gap: 10px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .guides { grid-template-columns: 1fr 1fr; }
  .doors { grid-template-columns: 1fr; }
  .door { padding: 16px; }
  .courses { grid-template-columns: 1fr; }
  .plan > li { grid-template-columns: 52px 1fr; gap: 10px; }
  .plan > li::before { left: 25px; }
  .months { min-width: 380px; }
  .fares th, .fares td { padding: 10px 6px; font-size: .85rem; }
}
@media (max-width: 420px) {
  .dests { gap: 9px; }
  .dest-body { padding: 9px 10px 11px; }
  .dest-city { font-size: .98rem; }
  /* 크기는 clamp 가 알아서 줄인다. 여기서는 여백만 줄인다. */
  .dest-price { padding: 22px 9px 7px; }
  .dest-when { font-size: .71rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* 숙소 값의 단위. 성인 2인 1박 고정 조건으로만 재고 있어서, 안 밝히면
   장기 체류를 재려던 사람이 이 값을 총액으로 읽는다. */
.unit { font-weight: 700; font-size: .72rem; color: var(--ink-3); white-space: nowrap; }
/* 값을 마지막으로 확인한 날. 이 사이트가 파는 것이 값의 최신성이다. */
.foot-checked { margin: 0 0 4px; font-weight: 700; color: var(--ink-2); }

/* 값이 싼 달과 날이 좋은 달의 맞바꿈. 싼 달이 실제로 젖은 달일 때만 뜬다. */
.tradeoff {
  margin: 14px 0 0; padding: 13px 15px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  font-weight: 700; line-height: 1.55;
}
.band.alt .tradeoff { background: var(--paper); }
/* 월별 날씨 + 값. 한 줄에 달·기온·비·값을 나란히 둔다. */
.months-w {
  list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 0;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
}
.band.alt .months-w { background: var(--paper); }
.months-w li {
  display: grid; grid-template-columns: 3.4em 5.6em 4.4em 1fr; gap: 8px;
  align-items: baseline; padding: 11px 14px;
  border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
.months-w li:last-child { border-bottom: 0; }
/* 제일 싼 달. 색 하나로만 말하지 않으려고 왼쪽에 띠를 세운다. */
.months-w li.best {
  background: var(--blue-soft); box-shadow: inset 4px 0 0 var(--accent);
}
.mw-name { font-weight: 800; }
.months-w li.best .mw-name, .months-w li.best .mw-price { color: var(--accent); }
.mw-temp { font-weight: 700; }
.mw-lo { color: var(--ink-3); font-weight: 600; }
.mw-rain { color: var(--ink-2); font-size: .88rem; }
/* 값 칸은 남는 자리(1fr)를 쓰는데, 이제 값이 안 쪼개지므로 그 자리가
   한 줄 너비만큼은 돼야 한다. 320px 기기에서 앞 세 칸을 빼면 87px 이
   남고, 여기서 일곱 자리 값이 76px 이다. */
.mw-price { text-align: right; font-weight: 800; font-size: clamp(.88rem, .74rem + .42vw, 1.02rem); }
@media (max-width: 420px) {
  .months-w li { grid-template-columns: 2.8em 4.5em 3.6em 1fr; gap: 5px; padding: 6px 8px; }
  .mw-rain { font-size: .82rem; }
}
/* months-w: when/ 달 쪽이 있는 달은 카드 전체가 눌리게 — ::after 패턴.
   빈 <a> 에 position:absolute; inset:0 으로 li 전체를 덮는다. */
.months-w li { position: relative; }
.mw-link { position: absolute; inset: 0; z-index: 1; }
.mw-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* 링크가 있는 줄에서 마우스를 올리면 달 이름에 밑줄 */
.months-w li:has(.mw-link:hover) .mw-name { text-decoration: underline; }

/* ── 지도 ──
 *
 * 타일도 지도 라이브러리도 없다. 해안선은 빌드 때 그려 넣은 SVG path 이고,
 * 점 하나가 도시 하나다. 그래서 이 화면을 열어도 바깥으로 나가는 요청이
 * 하나도 없다 — 남의 타일 서버가 죽어도 우리 지도는 그대로다.
 *
 * 점 색은 **한 가지 색상(hue)의 밝기 단계**다. 값의 크기를 나타내는 데
 * 서로 다른 색을 쓰면 색약 사용자에게 무관한 계열로 읽히고, 애초에 값은
 * 순서가 있는 양이라 순서가 있는 밝기로 나타내는 것이 맞다.
 * 진할수록 싸다 — 이 화면에서 사람이 찾는 것이 싼 곳이라, 찾는 것이
 * 가장 눈에 띄어야 한다. 그 방향은 범례에 글자로 적어 둔다. */
:root {
  --sea:  #ffffff;
  --land: #dde5ee;
  --land-edge: #c3cedb;
  /* 행동색(채도 낮은 빨강). 두 모드에서 같은 값을 쓴다 — 위 .budget
     주석에 잰 대비가 있다. --brand(파랑)와 나누는 일이 다르다:
     --brand 는 '우리 색'이고 --act 는 '눌러 주세요'다. */
  --act: #b4544f;
  --act-hi: #9e443f;
  --pin-ring: rgba(12,22,32,.5);
  --pin-under20: #0c3d6d;
  --pin-b20:     #17609f;
  --pin-b30:     #3d86c4;
  --pin-b40:     #7aabd8;
  --pin-over60:  #b9d0e5;
}
/* **지도는 어두운 화면에서도 밝게 둔다.**
 *
 * 2026-09-06 에 어두운 지도용 값 사다리를 따로 만들었었다. 대비는 맞췄지만
 * 정작 지도가 안 읽힌다는 말이 계속 나왔다(운영자 지적 2026-09-09:
 * "모바일에서는 잘 안보이고 특히나 다크모드에서는 더욱더 안보여").
 *
 * 대비를 더 올려서 풀 문제가 아니었다. 사람이 지도에서 찾는 것은 글자가
 * 아니라 **모양**이고, 해안선 한 줄로 그린 세계는 바탕이 어두우면 형태가
 * 사라진다. 네이버·카카오 지도가 어두운 화면에서도 밝은 것과 같은 이유다.
 *
 * 그래서 이 색들을 :root 에서 떼어 **지도 안으로 옮긴다.** 테마를 따라가지
 * 않으므로 밝은 화면과 어두운 화면이 같은 지도를 본다. 아래 --map-ink /
 * --map-ink-2 는 그 밝은 바탕 위에 얹는 글자용이다 — --ink 를 쓰면 어두운
 * 화면에서 흰 글자가 되어 흰 바다 위에서 사라진다. */
/* 지도 위에 얹는 것들(범위 딱지·안내·풍선말·확대 단추)이 기대는 상자.
   **figure 가 아니라 이것**이다 — figure 에는 아래 범례와 출처가 같이
   들어 있어서, bottom 으로 앉히면 지도 밖으로 흘러나온다. */
.atlas-view { position: relative; }
.atlas-wrap {
  position: relative; margin: 0;
  --sea:  #ffffff;
  --land: #dde5ee;
  --land-edge: #c3cedb;
  --pin-ring: rgba(12,22,32,.5);
  --pin-under20: #0c3d6d;
  --pin-b20:     #17609f;
  --pin-b30:     #3d86c4;
  --pin-b40:     #7aabd8;
  --pin-over60:  #b9d0e5;
  /* 지도 위 글자. 흰 바다(#fff) 기준 18.3:1 / 9.5:1 */
  --map-ink:   #10161d;
  --map-ink-2: #3b4653;
}

.band-map { padding-top: 0; }
@media (max-width: 760px) {
  .atlas-wrap svg { max-height: 46vh; }
}
.atlas {
  display: block; width: 100%; height: auto; min-height: 200px;
  background: var(--sea); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
.atlas-land path {
  fill: var(--land); stroke: var(--land-edge); stroke-width: 1;
  vector-effect: non-scaling-stroke;
  /* 카스피해·오대호는 육지 폴리곤 안의 구멍으로 들어온다. 이 규칙이
     없으면 그 안쪽까지 육지 색으로 칠해져 호수가 땅이 된다. */
  fill-rule: evenodd;
}

/* ── CARTO 밑그림 타일 (atlas.tiles.js) ──
 *
 * 해안선 그림 **위**, 점 **아래**. 이 순서는 마크업이 정한다(insertBefore)
 * 지만, 여기 적어 두는 이유는 이게 우연이 아니라서다 — 타일이 안 오면
 * 밑에 있던 해안선이 그대로 보이는 것이 이 화면의 대비책이다.
 *
 * 점과 풍선말은 타일을 뚫고 눌려야 한다. <image> 는 기본이 눌리는 물건이라
 * 그냥 두면 타일이 점의 손잡이를 먹는다. */
.atlas-tiles { pointer-events: none; }
.atlas-tiles image { pointer-events: none; }
/* 타일 한 장이 뒤늦게 도착할 때 톡 튀어나오지 않게. 확대 중에도 이 그림이
   같이 굴러가고 있어서, 갑자기 나타나면 굴러가는 것과 따로 노는 것으로 보인다.

   **구워 넣은 것은 뺀다.** 그건 첫 그림에 이미 있는 것이라, 스르르 나타나면
   그게 바로 운영자가 지적한 "나중에 바뀌는 것"이 된다 — 없애려고 구운
   것에 다시 그 움직임을 붙이면 앞뒤가 안 맞는다(atlas.py 의 tiles_svg). */
@media (prefers-reduced-motion: no-preference) {
  .atlas-tiles:not(.baked) image { animation: tileIn .25s ease-out 1; }
}
@keyframes tileIn { from { opacity: 0; } to { opacity: 1; } }

/* 밑그림 출처. CARTO 무료 한도가 이 표시를 남기는 조건으로 주는 것이라
   **지울 수 있는 줄이 아니다.** 타일이 실제로 걸렸을 때만 켠다 — 안 걸린
   화면은 우리 해안선이라 남의 이름을 적을 일이 없다. */
.atlas-credit { display: none; }
.atlas-wrap.tiled .atlas-credit {
  display: block; margin: 5px 0 0;
  font-size: .68rem; color: var(--ink-2); line-height: 1.4;
}
.atlas-credit a { color: inherit; text-decoration: underline; }
.pin { cursor: pointer; }
.pin-hit { fill: transparent; r: var(--hit, 30px); }
.pin-dot {
  r: var(--dot, 12px); stroke: var(--pin-ring); stroke-width: 1;
  vector-effect: non-scaling-stroke; fill: var(--pin-b30);
  transition: r .12s ease;
}
.pin[data-band="under20"] .pin-dot { fill: var(--pin-under20); }
.pin[data-band="b20"]     .pin-dot { fill: var(--pin-b20); }
.pin[data-band="b30"]     .pin-dot { fill: var(--pin-b30); }
.pin[data-band="b40"]     .pin-dot { fill: var(--pin-b40); }
.pin[data-band="over60"]  .pin-dot { fill: var(--pin-over60); }
/* 거른 조건에서 빠진 곳. 지우지 않고 흐리게 남긴다 — 세계의 모양이
   그대로 있어야 "내 조건으로 갈 수 있는 곳"이 어디에 몰려 있는지 보인다. */
.pin.off .pin-dot { fill: var(--land-edge); stroke: none; r: calc(var(--dot, 12px) * .5); }
.pin.off { cursor: default; }
.pin:hover .pin-dot, .pin.lit .pin-dot { r: calc(var(--dot, 12px) * 1.7); }
/* 손가락으로 눌러 둔 점. 커지기만 하면 hover 와 구별이 안 되니 행동색
   테두리를 두른다 — 지도에서 '지금 이것'을 가리키는 유일한 표시다.
   stroke 는 non-scaling 이라 확대해도 3px 그대로다. */
.pin.on .pin-dot { stroke: var(--brand); stroke-width: 3; }

/* 자바스크립트가 없을 때의 점 크기. 있을 때는 where.html 이 지도의 **실제
   화면 폭**을 재서 인라인으로 덮어쓴다(인라인이 이긴다). 여기 값은 폰과
   PC 를 화면 폭으로만 갈라 놓은 어림값이다 — 아무것도 안 주면 12px 기본이
   걸려 폰에서 점 지름이 2px 가 된다. */
.atlas { --dot: 9px; --hit: 26px; }
@media (max-width: 720px) {
  .atlas { --dot: 26px; --hit: 120px; }
}

/* 지도 위에 얹는 두 마디. 왼쪽은 지금 보고 있는 범위(확대가 일어난 것을
   그림 말고 글자로도 말한다), 오른쪽은 '눌러도 된다'는 안내다. 폰에서
   지도가 그냥 그림으로 읽히던 이유의 절반이 이 안내가 없어서였다. */
.atlas-now, .atlas-hint {
  position: absolute; top: 8px; margin: 0; z-index: 2;
  padding: 5px 10px; border-radius: 999px;
  font-size: .76rem; font-weight: 800; line-height: 1.3;
  pointer-events: none; max-width: calc(50% - 14px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 딱지 색은 **테마가 아니라 지도**를 따라간다. var(--ink)/var(--card) 를
   쓰면 어두운 화면에서 흰 딱지에 어두운 글자가 되는데, 지도가 이제 늘
   흰 바다라 딱지가 통째로 사라진다. */
.atlas-now {
  left: 8px; background: var(--map-ink); color: #fff;
  font-variant-numeric: tabular-nums;
}
.atlas-hint {
  right: 8px; color: var(--map-ink-2);
  background: rgba(255,255,255,.9);
  border: 1px solid var(--land-edge);
  transition: opacity .25s ease;
}
/* 한 번이라도 점을 눌러 봤으면 안내는 물러난다. 계속 떠 있으면 지도를 가린다. */
.atlas-wrap.used .atlas-hint { opacity: 0; }
/* hover 가 없는 기기에 "올려 보세요"는 거짓말이다. 기본은 누르기로 두고,
   마우스가 확실한 기기에서만 바꿔 단다 — 모르는 기기에서는 눌러도 되는
   쪽이 언제나 참이다. */
.ah-hover { display: none; }
@media (hover: hover) and (pointer: fine) {
  .ah-tap { display: none; }
  .ah-hover { display: inline; }
}
/* 마우스 쪽 문구는 손가락 쪽보다 길어서, 창이 좁으면 딱지 폭(50%)을
   넘겨 꼬리가 잘린다(mobile.py 360px 에서 잡혔다). 잘린 안내는 안 하느니
   못하다 — 좁은 마우스 창에서는 딱지를 통째로 접는다. 지도 아래 .note 가
   이미 "점을 누르면 그 도시를 볼 수 있고" 라고 적어 두고 있다.
   손가락 기기는 여기 안 걸린다(hover: hover 가 아니다). */
@media (hover: hover) and (pointer: fine) and (max-width: 460px) {
  .atlas-hint { display: none; }
}

/* 확대·축소 단추.
 *
 * **왼쪽 아래다.** 지도 단추는 보통 오른쪽인데, 이 사이트는 오른쪽 아래에
 * '맨 위로'(.totop)가 화면에 붙박이로 떠 있다(position: fixed, z-index 5).
 * 지도가 화면 아래쪽에 걸리는 순간 그 동그라미가 축소 단추를 덮는다 —
 * 폰에서는 지도 높이가 46vh 라 스크롤 중에 반드시 한 번은 겹친다.
 * 왼쪽 위는 '지금 보는 범위' 딱지가, 오른쪽 위는 안내 문구가 쓰고 있어서
 * 남는 자리가 여기다.
 *
 * **44px 다.** 한때 40px 이었고 주석에는 "손가락 최소치(44px)에서 테두리를
 * 뺀 값" 이라고 적혀 있었는데, 그 계산이 틀렸다 — 이 사이트는 맨 위에서
 * `box-sizing: border-box` 를 걸어 두므로 테두리가 40px **안**에 든다.
 * 40px 은 그냥 40px 이었다. 게다가 720px 아래에서는 36px 로 **더 줄이고**
 * 있었다. 손가락으로 쓰는 기기에서 작아지는 것이라 거꾸로다 —
 * `python -m src.web.mobile` 이 360px 에서 이 단추 둘을 "손가락보다 작음"
 * 으로 집어냈다(2026-09-10). 폭을 줄이던 규칙을 지웠다. */
.atlas-zoom {
  position: absolute; left: 8px; bottom: 8px; z-index: 3;
  display: flex; flex-direction: column; gap: 4px;
}
.az {
  width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--map-ink);
  border: 1px solid var(--land-edge); border-radius: 10px;
  font-size: 1.15rem; font-weight: 800; line-height: 1; cursor: pointer;
  box-shadow: 0 1px 3px rgba(12,22,32,.22);
}
/* **display 를 준 요소는 hidden 이 안 듣는다.** 브라우저의 `[hidden]` 은
   `display: none` 인데 위 `.az { display: flex }` 가 그것을 덮는다. 그래서
   '전체' 단추가 확대하기 전에도 보였다(확대한 적이 없으니 돌아갈 곳도
   없는 단추다). /where/ 도 같은 상태였다. */
.az[hidden] { display: none; }
.az:hover { background: #f2f6fa; }
.az:active { transform: translateY(1px); }
.az-home { font-size: .74rem; font-weight: 800; }

.atlas-tip {
  position: absolute; margin: 0; pointer-events: none; z-index: 2;
  transform: translate(-50%, -168%); white-space: nowrap;
  background: var(--map-ink); color: #fff;
  padding: 5px 9px; border-radius: 8px;
  font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* 범례는 지도 **밖**(figcaption)이라 페이지 바탕 위에 앉는다. 그런데 칸의
   색은 이제 밝은 지도용 값이라, 어두운 페이지에서는 제일 진한 칸이
   바탕(#0e1216)에 대해 1.7:1 로 사라진다. 그래서 범례에도 지도와 같은
   바탕을 깔아 준다 — 지도를 설명하는 물건이니 지도의 바탕을 쓰는 것이 맞다. */
/* 범례와 밑그림 출처를 담는 자리. figure 의 caption 은 첫째나 막내여야
   해서 둘을 한 상자에 넣었다(where.html 참조). 이 상자 자체는 아무 모양도
   없다 — 모양은 안쪽 두 개가 각자 낸다. */
.atlas-cap { display: block; }
.atlas-legend {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 9px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--sea); border: 1px solid var(--land-edge);
  font-size: .76rem; color: var(--map-ink-2); font-weight: 700;
}
.lg-step {
  /* 22×10 은 색 다섯을 나란히 견주기에 좁았다. */
  width: 28px; height: 13px; border-radius: 3px;
  border: 1px solid var(--pin-ring);
}
.lg-step[data-band="under20"] { background: var(--pin-under20); }
.lg-step[data-band="b20"]     { background: var(--pin-b20); }
.lg-step[data-band="b30"]     { background: var(--pin-b30); }
.lg-step[data-band="b40"]     { background: var(--pin-b40); }
.lg-step[data-band="over60"]  { background: var(--pin-over60); }
.dest.lit { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent); }
/* 지도에서 점을 눌러 데려온 카드. 화면이 스크롤로 움직이는 동안 도착지를
   놓치기 쉬워서, 테두리를 바꾸는 것으로 끝내지 않고 한 번 두드린다.
   .lit(파랑, 지도와 이어져 있다는 표시) 위에 행동색으로 덮어써서 '방금
   내가 고른 것'과 '이어져 있는 것'이 눈으로 갈린다. */
.dest.picked, .dest.lit.picked {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand);
  scroll-margin-top: 84px;
}
@media (prefers-reduced-motion: no-preference) {
  .dest.picked { animation: destPick .85s ease-out 1; }
}
@keyframes destPick {
  from { box-shadow: 0 0 0 3px var(--brand), 0 0 0 0 rgba(244,81,30,.5); }
  to   { box-shadow: 0 0 0 3px var(--brand), 0 0 0 18px rgba(244,81,30,0); }
}
@media (max-width: 720px) {
  .atlas { min-height: 230px; }
  .atlas-tip { font-size: .74rem; padding: 4px 7px; }
  /* 폰에서는 지도 위 두 딱지가 서로를 밀어낸다. 지금 보는 범위가 먼저다. */
  .atlas-now, .atlas-hint { font-size: .72rem; padding: 4px 8px; }
}

/* 판매자가 상품 이름에 적어 둔 소요 시간. 우리가 잰 값이 아니라서
   적혀 있는 일정에만 붙는다. */
.plan-hours {
  margin-left: 6px; font-weight: 700; font-size: .78rem;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}

/* ── 언제 갈까 ──
 *
 * '어디 갈까'는 목적지를 먼저 고르게 한다. 휴가가 9월로 정해져 있는
 * 사람에게는 순서가 반대라, 달을 먼저 고르는 길을 따로 둔다. */
/* 달 카드. 숫자만 늘어놓으면 '어느 달에 갈까' 가 표 읽기가 된다.
   그 달 가장 싼 도시의 사진을 깔아서, 값을 읽기 전에 **가고 싶어지게**
   한다. 다섯 칸으로 고정하는 이유는 아랫줄이 둘만 남아 쏠리지 않게
   빈 칸을 사진으로 채우기 때문이다(mc-filler). */
.months-grid {
  display: grid; gap: 12px; margin-top: 16px;
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 900px) { .months-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .months-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; } }
.month-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: block; text-decoration: none; color: #fff;
  border: 0; border-radius: var(--card-r, 16px);
  aspect-ratio: 5 / 6; background: #123a5e;
  box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease;
}
a.month-card:hover { transform: translateY(-3px); box-shadow: var(--lift-hi, 0 12px 30px rgba(16,22,29,.16)); }
.months-grid .mc-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* 글자가 서는 칸은 사진을 **은은하게** 눌러 둔다. 판매자 사진이라
   밝기를 우리가 고를 수 없어서, 밝은 사진 위에서도 값이 읽히려면
   이 정도가 필요하다. */
.month-card:not(.mc-filler)::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(6,24,45,.74) 0%, rgba(6,24,45,.62) 45%, rgba(6,24,45,.82) 100%);
}
.months-grid .mc-in {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 2px;
  padding: 15px 15px 14px; height: 100%;
}
.months-grid .mc-name {
  font-size: clamp(1.16rem, 1rem + .6vw, 1.5rem); font-weight: 900;
  letter-spacing: -.04em; text-shadow: 0 1px 10px rgba(3,18,36,.6);
}
.months-grid .mc-price {
  margin-top: 2px;
  font-size: clamp(1.02rem, .9rem + .5vw, 1.26rem); font-weight: 900;
  color: var(--sun-ink, #fdec90); font-variant-numeric: tabular-nums;
  letter-spacing: -.03em; text-shadow: 0 1px 10px rgba(3,18,36,.65);
  white-space: nowrap;
}
.months-grid .mc-price .won { font-size: .64em; margin-left: 1px; opacity: .92; }
/* 아래 둘은 카드 바닥에 붙인다. 값과 붙여 두면 넷이 뭉쳐 보인다. */
.months-grid .mc-city { margin-top: auto; color: rgba(255,255,255,.92); font-size: .8rem; text-shadow: 0 1px 8px rgba(3,18,36,.6); }
.months-grid .mc-count { color: rgba(255,255,255,.78); font-size: .74rem; font-weight: 700; text-shadow: 0 1px 8px rgba(3,18,36,.6); }
/* 빈 칸. 글자가 없으니 사진을 그대로 선명하게 둔다 — 여기가 이 화면에서
   유일하게 사진이 사진으로만 있는 자리다. 누를 수 없다는 게 보이도록
   손 모양도, 뜨는 움직임도 주지 않는다. */
.mc-filler { cursor: default; }
.mc-filler::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(6,24,45,.06) 0%, rgba(6,24,45,.14) 100%);
}

/* 월별 쪽(/when/{월}/) 카드의 「이 노선은 그 달이 제일 쌉니다」. 카드는 .dest 를 쓴다 */
.pick-best { color: var(--good); font-weight: 800; }

/* 정한 하루를 같이 갈 사람에게 넘기는 버튼. 서버도 계정도 없다 —
   이 주소가 곧 코스다. */
/* 가운데로 모은다(2026-09-13, 운영자 지시). 왼쪽에 붙어 있을 때
   실측 오른쪽 여백이 PC 404px 이었다 — 코스를 다 읽고 나서 다음에
   무엇을 할지 내미는 자리라 가운데가 맞다. */
.plan-share {
  margin: 12px 0 0; display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; justify-content: center;
}
.btn.ghost {
  background: transparent; color: var(--accent); border: 1.5px solid var(--accent);
}
.btn.ghost:hover { background: var(--accent); color: var(--card); }
.share-said { color: var(--ink-2); font-size: .82rem; word-break: break-all; }

/* 저장한 코스. 브라우저 안에만 있는 목록이라 서버도 계정도 없다.
   한 줄에 하나씩 — 카드 격자를 쓰면 '빼기'가 옆 칸으로 떨어져 나간다. */
.saved-list { display: grid; gap: 10px; margin-top: 16px; }
.saved-card { display: flex; align-items: stretch; gap: 10px; }
.saved-go {
  flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 15px 16px; text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow); min-width: 0;
}
.saved-go:hover { border-color: var(--brand); }
.saved-drop {
  flex: 0 0 auto; background: transparent; border: 1px solid var(--line);
  border-radius: var(--r); color: var(--ink-2); font: inherit; font-size: .84rem;
  font-weight: 700; padding: 0 14px; cursor: pointer;
}
.saved-drop:hover { border-color: var(--brand); color: var(--brand); }
.saved-link { font-weight: 700; font-size: .84rem; text-decoration: none; }

/* 값을 지켜보는 상품 (/saved/). 저장한 코스와 **같은 틀**을 쓴다 —
   한 화면에 두 목록이 서로 다르게 생기면 같은 곳이라는 것이 안 읽힌다.
   '빼기'(.saved-drop)도 그대로 쓴다. */
.watch-head { font-size: 1.04rem; font-weight: 800; letter-spacing: -.025em; margin: 0; }
.watch-list { display: grid; gap: 10px; margin-top: 16px; }
/* 가운데로 맞춘다. 코스 목록(.saved-card)은 stretch 인데, 그쪽은 줄이
   낮아서 '빼기'가 카드 높이만큼 늘어나도 자연스럽다. 이쪽은 이름이 두
   줄에 가격·판정까지 붙어 줄이 두 배로 높다 — 늘리면 '빼기'가 기둥이
   된다(2026-09-16 화면으로 확인). */
.watch-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 14px; box-shadow: var(--shadow);
}
/* 세로 칸(.watch-body) 안에서 배지는 **글자만큼만** 넓어야 한다. flex 는
   기본이 stretch 라, 안 막으면 알약이 줄 끝까지 늘어나 단추처럼 보인다. */
.watch-body .badge { align-self: flex-start; }
/* '빼기'도 줄 높이만큼 늘리지 않는다. 손가락 기준은 지킨다. */
.watch-row .saved-drop { align-self: center; min-height: 44px; }
.watch-row[hidden] { display: none; }
/* 64px 정사각. 카드와 같은 자르기(1:1)라 같은 사진이 같게 보인다. */
.watch-img {
  flex: 0 0 auto; width: 64px; height: 64px; object-fit: cover;
  border-radius: 10px; background: var(--line);
}
.watch-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.watch-name {
  font-size: .92rem; font-weight: 700; line-height: 1.38; letter-spacing: -.015em;
  color: var(--ink); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.watch-name:hover { color: var(--accent); }
/* 값 줄. 카드의 .readout 과 같은 규칙 — 좁은 화면에서 숫자가 낱말
   가운데서 갈리지 않게 한다. */
.watch-move {
  margin: 0; font-size: .82rem; color: var(--ink-2);
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 2px;
  word-break: keep-all; font-variant-numeric: tabular-nums;
}
/* 담을 때 가격. 줄을 긋는 것은 **실제로 달라졌을 때뿐이다** — 같은
   숫자에 줄이 그어져 있으면 오류로 읽힌다. */
.watch-then { text-decoration: line-through; opacity: .75; }
.watch-then.keep { text-decoration: none; opacity: 1; }
.watch-now { color: var(--ink); font-weight: 700; }
/* 내림과 오름을 **색으로만** 가르지 않는다. ▼▲ 가 같이 붙어 있어서
   색각 이상에서도 모양으로 읽힌다. crimson 계열은 본문 크기에서 대비가
   모자라 --hl-text 짝을 쓴다(site.css 의 .hl 주석과 같은 이유). */
.watch-down { color: var(--hl-text); font-weight: 800; }
.watch-up { color: var(--ink-2); font-weight: 700; }
.watch-same, .watch-gone { color: var(--ink-2); }
#save[aria-pressed="true"] { background: var(--accent); color: var(--card); }

/* `.more-chips`(조건 조립기의 「N곳 더 보기」)는 **없앴다**(2026-09-17).
   도시를 권역 → 도시 두 칸으로 고르게 하면서 접어 둘 것이 없어졌다.
   같은 모양의 손잡이가 필요하면 아래 `.more-cards` 를 쓴다. */

/* 읽었지만 코스로는 못 쓴 상황. 그 도시의 상황 페이지로 보낸다. */
.answer-more { margin: 12px 0 0; font-weight: 700; font-size: .88rem; }
.answer-more a { text-decoration: none; }

/* 여섯 가지 여행자 — /test/ 의 스크립트 없이도 읽히는 부분 */
.types { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.type-row { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; }
.type-row h3 { margin: 0 0 4px; font-size: 1.1rem; font-weight: 800; letter-spacing: -.03em; }
.type-emoji { font-size: 1.2rem; }
.type-line { margin: 0 0 8px; color: var(--ink-2); font-weight: 700; }
.type-blurb { margin: 0 0 10px; color: var(--ink-3); font-size: .94rem; line-height: 1.65; }

/* 카드 목록의 '나머지 더 보기'. 잘라낸 게 아니라 접어 둔 것이다 —
   접힌 카드의 이미지는 브라우저가 안 받아 온다. */
.more-cards { margin-top: 14px; }
/* 같은 일을 하는 손잡이가 둘인데(.more-chips 와 이것) 하나만 눌러
   보였다. 위엣것과 같은 알약으로 맞춘다 — 화면마다 다르게 생기면
   같은 사이트로 안 읽힌다. */
.more-cards > summary {
  cursor: pointer; color: var(--accent); font-weight: 700; font-size: .92rem;
  list-style: none; display: inline-flex; align-items: center;
  min-height: 44px; padding: 10px 16px; border-radius: 999px;
  border: 2px dashed var(--line-2); background: var(--card);
}
.more-cards > summary:hover { border-color: var(--brand); color: var(--brand); }
.more-cards > summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.more-cards > summary::-webkit-details-marker { display: none; }
.more-cards > summary::after { content: " ▾"; }
.more-cards[open] > summary::after { content: " ▴"; }
.more-cards > .grid { margin-top: 10px; }
/* 거르개가 있는 긴 목록(/packages/·/onsen/·/deals/)의 「더 보기 (N개 남음)」.
   위 손잡이와 같은 알약이되 폭을 꽉 채운다 — 목록 끝에서 다음 동작이 이것뿐이다. */
.list-more {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 48px; margin: 16px 0 0; padding: 10px 16px; border-radius: 999px;
  border: 2px solid var(--line); background: var(--card); color: var(--ink);
  font: inherit; font-weight: 800; font-size: .95rem; cursor: pointer;
}
.list-more:hover { border-color: var(--brand); color: var(--brand-text); }
.list-more:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.list-more[hidden] { display: none; }

/* 마이리얼트립 패키지 카드 두 장(_pkc.html). 사진 위에 글을 얹는 큰 카드 —
   아래 네이버 목록(.pkgs)과 일부러 다르게 생겼다: 이쪽은 상품 하나가 아니라
   「그 도시 패키지 모아 보기」 입구다. 카드 전체가 링크. */
.pkc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 12px; margin: 14px 0 6px; }
.pkc-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 176px; padding: 16px; border-radius: 16px; overflow: hidden;
  background: #2b3440; color: #fff; text-decoration: none; isolation: isolate;
  box-shadow: 0 6px 18px rgba(16,22,29,.14); transition: transform .15s ease, box-shadow .15s ease;
}
.pkc-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16,22,29,.2); }
.pkc-card:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.pkc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* 그늘을 글이 놓이는 왼쪽·아래에 짙게. 판매자 사진에 글자가 박혀 있는 일이
   흔해서(테마파크 광고 사진 등) 위아래 그늘만으로는 제목이 묻혔다. */
.pkc-shade { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(10,14,20,.82) 0%, rgba(10,14,20,.55) 50%, rgba(10,14,20,.2) 100%),
    linear-gradient(180deg, rgba(10,14,20,0) 40%, rgba(10,14,20,.5) 100%); }
.pkc-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-right: 4px; }
.pkc-tag { align-self: flex-start; padding: 2px 8px; border-radius: 6px; font-size: .74rem; font-weight: 800; background: #fdec90; color: #10161d; }
.pkc-urgent .pkc-tag { background: #e53935; color: #fff; }
.pkc-title { font-size: 1.12rem; font-weight: 800; line-height: 1.3; letter-spacing: -.02em; word-break: keep-all; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.pkc-sub { font-size: .85rem; font-weight: 600; opacity: .92; word-break: keep-all; }
.pkc-go {
  align-self: flex-start; margin-top: 10px; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border-radius: 999px; background: #fff; color: var(--brand-text, #bf4207); font-weight: 800; font-size: .9rem; white-space: nowrap;
}

/* 읽었는데 코스에도 못 넣고 보낼 곳도 없는 조건. 삼키지 않고 말한다. */
.answer-lost { margin: 10px 0 0; color: var(--ink-3); font-size: .88rem; }

/* ── 값을 어떻게 재나요 ── */
.facts { margin: 16px 0 0; display: grid; gap: 0; }
.facts > div {
  display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line);
}
.facts dt { flex: 0 0 118px; font-weight: 700; color: var(--ink-2); font-size: .92rem; }
/* 폰에서는 이름을 값 **위**로 올린다.
   320px 기기에서 안쪽이 292px 인데 이름 칸이 118px + 틈 14px 을 가져가면
   설명에 160px 밖에 안 남는다. "인천 출발 131곳 · 48개 나라. 2박3일·
   4박5일·6박7일을 따로 확인합니다." 가 한 줄짜리 이름 옆에서 대여섯
   줄로 흐르고, `2박3일·4박5일·6박7일` 은 붙일 데가 없어 아무 데서나
   갈라진다. 이 쪽은 우리가 무엇을 하는지 밝히는 곳이라 읽히지 않으면
   있으나 마나다. */
@media (max-width: 560px) {
  .facts > div { flex-direction: column; gap: 3px; }
  .facts dt { flex: none; }
}
.facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.dont { margin: 18px 0 0; padding-left: 0; list-style: none; counter-reset: dont; }
.dont > li { counter-increment: dont; padding: 0 0 18px 38px; position: relative; }
.dont > li::before {
  content: counter(dont); position: absolute; left: 0; top: 1px;
  width: 25px; height: 25px; border-radius: 50%; background: var(--ink);
  color: var(--card); font-size: .8rem; font-weight: 800;
  display: grid; place-items: center;
}
.dont h3 { margin: 0 0 6px; font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em; }
.dont p { margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.68; }
.cases { margin: 14px 0 0; padding-left: 20px; color: var(--ink-2); }
.cases li { margin-bottom: 10px; line-height: 1.68; }

/* 문답. 질문이 h3 라서 제목 구조에도 잡힌다.
   **접는다 (2026-09-13, 운영자 지시).** 여기 "접지 않는다 — 검색·답변
   엔진이 읽는 텍스트가 첫 화면에서 사라진다"고 적혀 있었는데, 그 뒤에
   붙은 FAQPage 구조화데이터가 문답을 통째로 싣는다(seo.py). 검색 결과에
   펼쳐지는 문답은 화면이 아니라 그쪽이 내고, 접힌 글도 DOM 에 그대로
   있다. 왼쪽 색 선은 뺐다 — 카드 넷이 세로줄 넷으로 보였다. */
.faq { margin: 16px 0 0; display: grid; gap: 10px; }
.faq-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgb(16 22 29 / 6%);
}
/* 손가락 기준 44px 을 padding 으로 채운다(14+16+14). 여기서 줄이면
   폰 검사(mobile.py)가 아니라 사람이 먼저 안다. */
.faq-item > summary {
  display: flex; gap: 10px; align-items: baseline;
  padding: 14px 16px; cursor: pointer; list-style: none; color: var(--ink);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: "▾"; margin-left: auto; color: var(--ink-3); }
.faq-item[open] > summary::after { content: "▴"; }
.faq-item > summary:hover h3 { color: var(--accent); }
.faq-item > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 번호는 h3 밖이다 — 화면 질문과 구조화데이터 질문을 글자까지 대조하는
   검사가 있어서, 안에 넣으면 거기서 갈라진다(_faq.html 주석 참조). */
.faq-no {
  flex: none; font-size: .82rem; font-weight: 800; color: var(--ink-3);
  letter-spacing: .02em;
}
/* /faq/ 는 문답이 본문이라 질문이 h2 다. 나머지 쪽은 h3 — 크기는 같게 둔다. */
.faq-item h2, .faq-item h3 {
  margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--ink);
}
.faq-item > summary:hover h2 { color: var(--accent); }
.faq-item p {
  margin: 0; padding: 0 16px 16px 42px; color: var(--ink-2);
  font-size: .95rem; line-height: 1.7;
}

/* 제목 옆 그림. 좁은 화면에서는 글이 먼저 오고 그림이 아래로 내려간다. */
.head-art { display: grid; gap: 16px; align-items: center; }
.art { width: 100%; max-width: 320px; height: auto; display: block; justify-self: center; }
@media (min-width: 760px) {
  .head-art { grid-template-columns: 1fr minmax(0, 320px); gap: 28px; }
}
/* 글 폭이 660px 로 묶인 화면(주관식·404)에서는 그림을 더 줄인다.
   안 줄이면 제목이 "어디서 뭐 하고 / 싶으세요?" 로 꺾인다 — 글이
   그림에 자리를 내주는 순간 이 화면이 하려던 말이 안 읽힌다. */
@media (min-width: 760px) {
  .band-in.narrow .head-art { grid-template-columns: 1fr minmax(0, 230px); }
  .band-in.narrow .art { max-width: 230px; }
}

/* ══ 시안 구성 (docs/design/screen-pc.json · screen-mobile.json) ══ */

.ico { flex: 0 0 auto; }

/* ── 상단바 오른쪽 ── */
.topbar-act {
  display: flex; align-items: center; gap: 5px; text-decoration: none;
  color: var(--ink-2); font-weight: 700; font-size: .87rem; white-space: nowrap;
  padding: 8px 10px; border-radius: 999px;
}
/* 900px 아래에서는 CSS 가 글자를 감춰 그림만 남는다(아래 미디어쿼리).
   그러면 20px 아이콘에 padding 8/10 이라 40×36px 이 된다. 글자가
   빠진 만큼 여백으로 메운다 — 폰에서 이 둘이 검색과 찜의 유일한 문이다. */
@media (max-width: 900px) { .topbar-act { padding: 12px; } }
.topbar-act:hover { background: var(--blue-soft, #e3f1fd); color: var(--accent); }

/* 폰 메뉴. 체크박스 하나로 연다 — 스크립트가 없다. */
.drawer-toggle { position: absolute; opacity: 0; pointer-events: none; }
/* 폰에서 이게 유일한 메뉴다. 40px 이던 것을 44px 로 올린다. */
.drawer-btn {
  display: none; cursor: pointer; padding: 10px; border-radius: 10px;
  color: var(--ink); border: 1px solid var(--line); background: var(--paper);
}
.drawer-toggle:focus-visible + .drawer-btn { outline: 3px solid var(--brand); outline-offset: 2px; }
.drawer-close { display: none; }
.drawer-toggle:checked ~ .drawer-btn .drawer-open { display: none; }
.drawer-toggle:checked ~ .drawer-btn .drawer-close { display: block; }
.drawer { display: none; }
.drawer-toggle:checked ~ .drawer {
  display: grid; order: 9; width: 100%; gap: 2px;
  border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px;
}
.drawer a {
  padding: 11px 12px; border-radius: 10px; text-decoration: none;
  color: var(--ink); font-weight: 700; font-size: .95rem;
}
.drawer a:hover { background: var(--paper); }

@media (max-width: 900px) {
  .topbar-in { flex-wrap: wrap; }
  .nav { display: none; }
  .drawer-btn { display: flex; }
  .topbar-act { margin-left: auto; }
  .topbar-act span { display: none; }
}

/* ── 히어로 ── */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #dff1ff 0%, #f2f9ff 62%, var(--paper) 100%);
  border-bottom: 1px solid var(--line);
}
:root[data-theme="dark"] .hero {
  background: linear-gradient(180deg, #17293a 0%, #131c26 62%, var(--paper) 100%);
}
/* 시안이 화면 폭에 따라 배치가 다르다.
     · 폰   : 제목 옆에 마스코트, 그 아래 세 칸이 가로로 (모바일 시안)
     · PC   : 왼쪽에 제목+세 칸, 오른쪽에 큰 마스코트 (PC 시안)
   그리드 영역으로 두 배치를 같은 HTML 로 만든다.
   폰에서 그림을 제목 아래로 내리지 않는 이유: 시안이 그렇고, 무엇보다
   첫 화면에 마스코트가 보여야 이 사이트가 어떤 곳인지 한 번에 읽힌다. */
.hero-in {
  max-width: 1120px; margin: 0 auto; padding: 26px 16px 26px;
  display: grid; gap: 16px 14px;
  grid-template-columns: 1fr 40%;
  /* 폰에서는 숫자 띠를 카드 **아래**로 내린다. 옆에 두면 칸이 좁아
     "갈 수 / 있는 곳" 으로 두 줄이 되고, 무엇보다 눌러야 할 카드 셋이
     그만큼 아래로 밀린다. 아래로 내리면 폭을 다 쓰고 한 줄로 선다. */
  grid-template-areas: "title title" "tag art" "doors doors" "trust trust";
  align-items: center;
}
.hero-title { grid-area: title; min-width: 0; }
.hero-copy { grid-area: tag; min-width: 0; align-self: start; }
.trustline { grid-area: trust; align-self: start; }
.hero-art-wrap { grid-area: art; }
.doors { grid-area: doors; }
.hero-art-wrap { position: relative; }
.hero-art {
  width: 100%; height: auto; display: block; border-radius: 18px;
  box-shadow: 0 6px 26px rgba(16,22,29,.12);
}
/* 말풍선. 시안의 "안녕! 싸잼이가 도와줄게요!" */
.bubble {
  margin: 0; background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 16px;
  padding: 10px 14px; font-weight: 700; font-size: .86rem; line-height: 1.35;
  box-shadow: var(--shadow); position: relative; display: inline-block;
}
.bubble::after {
  content: ""; position: absolute; left: 22px; bottom: -7px;
  width: 12px; height: 12px; background: var(--card);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}
/* 말풍선은 자리가 넉넉할 때만 띄운다. 폰에서 그림이 작아지면
   말풍선이 마스코트 얼굴을 덮는다. */
.hero-art-wrap .bubble { display: none; }
@media (min-width: 700px) {
  .hero-art-wrap .bubble {
    display: inline-block; position: absolute; z-index: 2;
    top: 4px; left: -14px; max-width: 12em;
  }
}
@media (min-width: 1000px) {
  .hero-in {
    grid-template-columns: 1fr 1fr; gap: 10px 36px; padding: 44px 16px 40px;
    grid-template-areas: "title art" "tag art" "trust art" "doors art";
    align-items: start;
  }
  .hero-art-wrap { align-self: center; }
  .hero-copy { align-self: start; }
}

/* ── 세 개의 문 ── */
/* 시안은 폰에서도 세 칸을 가로로 놓는다. 모바일 시안의 quickActions
   에는 설명글이 아예 없다 — 좁은 칸에 설명까지 넣으면 셋 다 못 읽는다.
   그래서 좁을 때는 아이콘과 이름만 남긴다. */
.doors { display: grid; gap: 8px; margin-top: 6px; grid-template-columns: repeat(3, 1fr); }
@media (min-width: 620px) { .doors { gap: 10px; margin-top: 14px; } }
.door {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: 15px 16px 40px; border-radius: 14px; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); color: var(--ink);
  box-shadow: var(--shadow);
}
.door:hover { border-color: var(--brand); }
.door-ico { color: var(--accent); }
.door-name { font-weight: 800; font-size: 1rem; letter-spacing: -.02em; }
.door-eg { color: var(--ink-2); font-size: .82rem; line-height: 1.45; }
.door-go { position: absolute; right: 13px; bottom: 12px; color: var(--ink-3); }
@media (max-width: 619px) {
  .door { padding: 13px 10px; align-items: center; text-align: center; gap: 6px; }
  .door-eg, .door-go { display: none; }
  .door-name { font-size: .84rem; letter-spacing: -.03em; }
}
/* 시안에서 첫 칸이 파란 칸이다 — 우리가 제일 밀고 싶은 문이기도 하다. */
.door-ai {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.door-ai .door-eg, .door-ai .door-go { color: rgba(255,255,255,.88); }
.door-ai:hover { filter: brightness(1.06); border-color: var(--accent); }

/* ── 빠른 메뉴 ── */
.quickmenu { background: var(--card); border-bottom: 1px solid var(--line); }
.quickmenu ul {
  list-style: none; margin: 0; padding: 14px 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
}
@media (min-width: 760px) { .quickmenu ul { grid-template-columns: repeat(8, 1fr); } }
.quickmenu a {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 4px; border-radius: 12px; text-decoration: none; color: var(--ink);
  text-align: center;
}
.quickmenu a:hover { background: var(--paper); }
.qm-ico { line-height: 1; }
.qm-ico .fx { width: 34px; height: 34px; margin: 0 auto; }
.qm-label { font-size: .76rem; font-weight: 700; letter-spacing: -.02em; }

/* ── 가로 카드 (지금 가장 싸게) ── */
.rail {
  list-style: none; margin: 16px 0 0; padding: 0 0 6px;
  display: grid; grid-auto-flow: column; grid-auto-columns: 210px; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.rail > li { scroll-snap-align: start; }
.hot {
  position: relative; display: block; text-decoration: none; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--shadow); height: 100%;
}
.hot:hover { border-color: var(--brand); }
.hot-photo { width: 100%; height: 132px; object-fit: cover; background: var(--line); }
.hot-blank {
  display: grid; place-items: center;
  background: linear-gradient(135deg, #cfe4f7, #eaf3fb);
}
.hot-badge {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  background: var(--brand); color: var(--brand-ink);
  font-size: .72rem; font-weight: 800; padding: 3px 9px; border-radius: 999px;
}
.hot-body { display: flex; flex-direction: column; gap: 1px; padding: 11px 13px 13px; }
.hot-country { color: var(--ink-3); font-size: .76rem; font-weight: 700; }
.hot-city { font-size: 1.08rem; font-weight: 800; letter-spacing: -.03em; }
.hot-days { color: var(--ink-2); font-size: .78rem; }
.hot-price {
  margin-top: 3px; font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* ── 세 칸 ── */
.trio { display: grid; gap: 14px; }
@media (min-width: 980px) { .trio { grid-template-columns: 1fr 1.15fr 1fr; align-items: start; } }
.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 18px 16px; box-shadow: var(--shadow);
}
.panel h2 { font-size: 1.12rem; }
.panel-sub { margin: 6px 0 0; color: var(--ink-2); font-size: .85rem; }
.panel .budgets { flex-direction: column; margin-top: 14px; }
.panel .budgets li { width: 100%; }
.panel .budget { flex-direction: row; align-items: baseline; justify-content: space-between; width: 100%; }
.panel-foot, .panel-top { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.panel-top { margin: 12px 0 0; }
.panel-mascot { width: 96px; height: 96px; flex: 0 0 96px; }
.panel-mascot.small { width: 78px; height: 78px; flex-basis: 78px; }
.bubble.small { font-size: .78rem; padding: 8px 11px; }
.panel-foot .bubble::after, .panel-top .bubble::after { display: none; }

/* 값 내려간 것 */
.drops { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.drop {
  display: grid; grid-template-columns: 74px 1fr; gap: 11px; align-items: center;
  text-decoration: none; color: var(--ink); padding: 8px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--paper);
}
.drop:hover { border-color: var(--brand); }
.drop-photo { width: 74px; height: 58px; object-fit: cover; border-radius: 8px; background: var(--line); }
.drop-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.drop-kind {
  align-self: flex-start; font-size: .68rem; font-weight: 800; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 1px 7px; border-radius: 999px;
}
.drop-name {
  font-weight: 700; font-size: .85rem; letter-spacing: -.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drop-was { color: var(--ink-3); font-size: .74rem; text-decoration: line-through; font-variant-numeric: tabular-nums; }
.drop-now { font-weight: 800; font-size: .95rem; font-variant-numeric: tabular-nums; }
.drop-off { color: var(--sale); font-size: .82rem; margin-left: 3px; }

/* 순위 */
.ranks { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.ranks a {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 9px; align-items: baseline;
  text-decoration: none; color: var(--ink); padding: 9px 10px; border-radius: 10px;
}
.ranks a:hover { background: var(--paper); }
.rank-no {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
  background: var(--accent); color: #fff; font-size: .76rem; font-weight: 800;
  align-self: center;
}
.rank-name { font-weight: 700; font-size: .92rem; letter-spacing: -.02em; }
.rank-days { display: none; }
.rank-price { font-weight: 800; font-size: .88rem; font-variant-numeric: tabular-nums; }

/* ── AI 배너 ── */
.aibanner { background: #fef3c7; border-block: 1px solid #f6dd93; }
:root[data-theme="dark"] .aibanner { background: #3a3117; border-color: #5a4c22; }
.aibanner .band-in {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-block: 18px;
}
.aibanner-mascot { width: 108px; height: 108px; flex: 0 0 108px; }
.aibanner-copy { flex: 1 1 260px; min-width: 0; }
.aibanner-q { margin: 0; font-size: .86rem; font-weight: 700; color: var(--ink-2); }
.aibanner-title { margin: 2px 0 0; font-size: clamp(1.2rem, 1rem + 1.2vw, 1.7rem); font-weight: 800; letter-spacing: -.04em; }
.aibanner-desc { margin: 4px 0 0; color: var(--ink-2); font-size: .9rem; }
.aibanner-cta { display: inline-flex; align-items: center; gap: 7px; }

/* ── 이 사이트가 하는 것 ── */
.props {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.props li {
  display: grid; gap: 5px; padding: 16px 16px 15px; border-radius: var(--r);
  background: var(--card); border: 1px solid var(--line);
}
.prop-ico { color: var(--accent); }
.props b { font-size: .98rem; letter-spacing: -.02em; }
.props span:last-child { color: var(--ink-2); font-size: .85rem; line-height: 1.6; }

/* ── 푸터 ── */
/* 푸터는 짧게. 메뉴는 위에 늘 붙어 있으니 되풀이하지 않는다. */
.foot-links {
  /* 가운데로 모으고 사이에 세로 구분선. 구분선은 글자 '|' 가 아니라
     테두리다 — 글자로 넣으면 화면 낭독기가 링크 사이마다 "세로줄"을
     읽는다. 눈에는 똑같이 보이고 귀에는 안 들린다. */
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 6px 0; margin: 0 0 12px;
}
/* 손가락으로 짚을 수 있어야 한다. 예전에는 padding 이 위아래 2px 이라
   줄 높이까지 더해도 22px 였고, 가로 틈이 0 이라 세 링크의 누를 수 있는
   자리가 1px 선 하나를 두고 맞닿아 있었다 — 하나를 누르려다 옆엣것이
   눌린다. 이 셋이 이 사이트에서 나가는 유일한 문(공지·FAQ·문의)이다. */
.foot-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink-2); text-decoration: none; font-weight: 700;
  font-size: .88rem; padding: 10px 16px; line-height: 1.3;
}
.foot-links a + a { border-left: 1px solid var(--line); }
.foot-links a:hover { color: var(--accent); text-decoration: underline; }

.totop {
  position: fixed; right: 16px; bottom: 16px; z-index: 5;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; text-decoration: none;
  box-shadow: 0 4px 14px rgba(16,22,29,.22);
}
.totop:hover { filter: brightness(1.08); }
/* 폰에서 더 작게 만들 이유가 없다. 손가락은 화면이 좁다고 작아지지
   않는다 — 자리만 조금 당긴다. */
@media (max-width: 560px) { .totop { right: 12px; bottom: 12px; } }

/* ══════════════════════════════════════════════════════════════════
   홈 첫 화면 (.home 에서만)

   세부 페이지 1,600쪽은 건드리지 않는다. 거기서 필요한 건 화려함이
   아니라 값을 빨리 읽는 것이고, 지금 모양이 그 일을 한다.

   색은 시안(docs/design/screen-pc.webp)에서 직접 뽑았다. 눈대중으로
   맞추면 늘 탁해진다 — 실제로 사이트가 쓰던 파랑은 #1256a0 였는데
   시안은 #117ad6 이다. 같은 '파랑'인데 채도가 한 단계 다르고, 그
   차이가 화면 전체를 가라앉혀 놓고 있었다.
   ══════════════════════════════════════════════════════════════════ */
.home {
  --sky-1: #c7eafe;      /* 히어로 하늘 위 */
  --sky-2: #eaf6ff;      /* 히어로 하늘 아래 */
  --blue:  #117ad6;      /* 시안의 파란 카드 */
  --blue-2:#0f62c1;      /* 시안의 배너 버튼 */
  --blue-soft: #e3f1fd;
  --sun:   #fdec90;      /* 노란 배너 **판 색** */
  --sun-2: #ffd84d;
  /* 사진 위에 서는 **노란 글자**. --sun 과 반드시 따로 둔다.
     --sun 은 판 색이라 어두운 화면에서 같이 어두워져야 맞는데, 글자는
     반대다 — 배경 사진은 화면 설정과 상관없이 그대로라, 글자까지 같이
     어두워지면 사진 위에서 사라진다. 실측(2026-08-26) 어두운 화면에서
     "130곳 / 13,251개 / 2026년 08월 25일" 이 rgb(74,63,26) 으로
     찍혀 한 글자도 안 보였다. */
  --sun-ink: #fdec90;
  --card-r: 18px;
  --lift: 0 1px 2px rgba(16,22,29,.04), 0 8px 24px rgba(16,22,29,.08);
  --lift-hi: 0 2px 6px rgba(16,22,29,.06), 0 16px 38px rgba(16,22,29,.14);
}
:root[data-theme="dark"] .home {
  --sky-1: #10283d; --sky-2: #0e1620;
  --blue: #3f9bef; --blue-2: #2f86d8; --blue-soft: #17304a;
  --sun: #4a3f1a; --sun-2: #6b5a20;
  --lift: 0 1px 2px rgba(0,0,0,.4), 0 10px 26px rgba(0,0,0,.34);
  --lift-hi: 0 2px 8px rgba(0,0,0,.5), 0 18px 40px rgba(0,0,0,.46);
}

/* 움직임은 거들 뿐이다. 끄기를 원하는 사람에게는 전부 멈춘다. */
.home .door, .home .quickmenu a, .home .hot, .home .drop,
.home .ranks a, .home .budget, .home .guide, .home .course-card,
.home .chip, .home .props li {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
@media (prefers-reduced-motion: reduce) {
  .home * { transition: none !important; animation: none !important; }
}

/* ── 히어로 ───────────────────────────────────────────────── */
.home .hero {
  position: relative; overflow: hidden; isolation: isolate;
  /* 사진이 도착하기 전에 깔려 있는 색. 스크림과 같은 남색이라
     그림이 뜨는 순간 깜빡이지 않는다 — 흰 바탕이었으면 첫 화면이
     한 번 하얗게 번쩍인다. */
  background: #08213c;
  border-bottom: 0;
}
.home .hero-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; border-radius: 0;
  /* 원본이 가로로 긴 그림(1200×630)이라 폰에서는 세로로 잘린다.
     어디를 남길지 고른다: 오른쪽의 흰 건물과 바다가 보이는 쪽. */
  object-position: 74% 44%;
}
.home .hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* 폰에서는 글이 화면 폭을 다 쓰므로 위아래로 덮는다. 세기는
     눈대중이 아니라 **띄워 놓고 대비를 재서** 정했다(구름 위가
     제일 밝은 자리라 거기 기준). */
  background: linear-gradient(180deg,
    rgba(5,27,50,.86) 0%,
    rgba(5,27,50,.72) 34%,
    rgba(5,27,50,.62) 62%,
    rgba(5,27,50,.74) 100%);
}
@media (min-width: 1000px) {
  .home .hero-bg { object-position: 60% 40%; }
  .home .hero-scrim {
    /* 넓은 화면에서는 글이 왼쪽 절반에만 있다. 오른쪽까지 똑같이
       덮으면 사진을 깔아 둔 이유가 없어지므로, 왼쪽만 짙게 하고
       오른쪽은 거의 그대로 둔다 — 마스코트가 서는 쪽이다. */
    background:
      linear-gradient(96deg,
        rgba(5,27,50,.90) 0%,
        rgba(5,27,50,.80) 30%,
        rgba(5,27,50,.50) 52%,
        rgba(5,27,50,.14) 76%,
        rgba(5,27,50,.02) 100%),
      linear-gradient(180deg, rgba(5,27,50,.24) 0%, rgba(5,27,50,0) 38%);
  }
}
/* 여백을 넓혔다(운영자 지시 2026-09-11, "지금은 너무 빡빡해서 답답해
   보인다"). 26/16 → 34/20. 폰에서 장이 이미 32px 좁아진 터라 좌우를 더
   주면 글이 접히는데, 문서가 그 경우를 미리 적어 뒀다 — "기존의 구조가
   무너질 경우에는 글자 폰트 크기를 적절하게 줄여준다"(아래 .home .slogan
   과 .door 의 자). */
.home .hero-in { position: relative; z-index: 2; padding: 34px 20px 30px; gap: 12px 14px; }
.home .slogan {
  /* 폰에서 한 줄로 서는 크기를 아래쪽 한계로 잡았다. 360px 에서 안쪽
     여백을 빼면 328px 이고, "싸고 재밌는 여행!" 이 자간 -.055em 로
     약 8.3em 이라 39px 까지 들어간다. 2.1rem(33.6px)이면 넉넉하다. */
  /* 위쪽 한계는 **재서** 정했다. 넓은 화면에서 제목 칸이 524px 이고
     이 문장이 7.48em 이라 70px 까지 한 줄로 선다. 4.3rem(68.8px)이면
     여유가 남는다 — 4.6rem 으로 뒀다가 PC 에서 두 줄이 됐다. */
  font-size: clamp(2.1rem, 1.05rem + 5.6vw, 4.3rem);
  font-weight: 900; letter-spacing: -.055em; line-height: 1.02;
  /* 사진 위에 서므로 밝은 화면·어두운 화면 모두 흰색이다. 스크림만으로는
     구름 위에서 모자라서 글자 자체에 그림자를 하나 깔았다 — 스크림을
     더 짙게 하면 대신 사진이 사라진다. */
  color: #fff; text-shadow: 0 2px 20px rgba(3,18,36,.55);
}
.home .tagline {
  margin-top: 8px; font-size: clamp(.94rem, .84rem + .55vw, 1.3rem);
  line-height: 1.55; font-weight: 600; max-width: 42ch;
  color: rgba(255,255,255,.95); text-shadow: 0 1px 12px rgba(3,18,36,.6);
}

/* 진짜 숫자 띠. 파는 화면의 설득은 급한 척이 아니라 근거다. */
/* 숫자 띠. **가로 한 줄로 붙여 둔다.** 세로로 쌓으면 폰 첫 화면에서
   세 줄을 먹고, 정작 눌러야 할 카드 셋이 화면 밖으로 밀린다. */
/* 칸을 1fr 로 똑같이 삼등분하지 않는다. 세 값의 길이가 다르기 때문이다
   — "131곳"은 82px, 날짜는 그보다 넓다. 똑같이 나누면 짧은 쪽은 남고
   긴 쪽만 넘쳐서, 넘친 글자가 nowrap 인 채로 옆 칸을 밟는다(실측
   2026-09-06: 320px 기기에서 날짜가 47px 삐져나가 아래 문 위로 걸쳤다).
   내용만큼씩 차지하게 두고 남는 자리를 사이에 뿌린다. */
.home .trustline {
  list-style: none; margin: 4px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, auto);
  /* space-between 이었다. 그러면 첫 칸("131곳 여행지")이 왼쪽 끝에
     딱 붙어서 가운데 정렬된 위 문구들과 축이 어긋난다. 내용만큼씩
     차지하는 것은 그대로 두고 **줄 전체를 가운데**로 놓는다. */
  justify-content: center; gap: 0;
}
@media (min-width: 1000px) {
  .home .trustline { grid-template-columns: repeat(3, auto); margin-top: 14px; }
}
.home .trustline li {
  display: flex; flex-direction: column; line-height: 1.2;
  /* 좁은 화면에서는 칸 사이 여백부터 줄인다. 글자 크기를 먼저 줄이면
     읽히지 않게 되고, 여백은 줄여도 읽힌다. */
  padding: 0 clamp(8px, 1.4vw + 3px, 14px); min-width: 0;
}
/* 가운데 정렬이 되면서 첫 칸의 왼쪽 여백을 지울 이유가 없어졌다.
   지우면 오히려 줄이 왼쪽으로 그만큼 밀린다. */
.home .trustline li { text-align: center; align-items: center; }
.home .trustline li + li { box-shadow: inset 1px 0 0 rgba(13,27,42,.13); }
.home .trustline b {
  font-size: clamp(.92rem, .78rem + .55vw, 1.24rem); font-weight: 900;
  /* 판 색(--sun)이 아니라 **글자용 노랑**(--sun-ink)을 쓴다.
     --sun 을 쓰면 어두운 화면에서 이 세 숫자가 통째로 사라진다. */
  letter-spacing: -.04em; color: var(--sun-ink, #fdec90);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  text-shadow: 0 1px 10px rgba(3,18,36,.6);
}
/* 말줄임(…)을 쓰지 않는다. "인천에…" 로 잘리면 고장 난 것처럼 보인다.
   글자를 짧게 쓰고, 그래도 넘치면 줄을 바꾼다. */
.home .trustline span {
  font-size: .68rem; color: rgba(255,255,255,.86); font-weight: 700;
  text-shadow: 0 1px 8px rgba(3,18,36,.6);
}
@media (min-width: 620px) { .home .trustline span { font-size: .75rem; } }
.home .trustline li + li { box-shadow: inset 1px 0 0 rgba(255,255,255,.3); }

/* 마스코트는 액자를 두르지 않는다. 테두리나 그림자 상자를 두르는 순간
   '배경 위에 붙인 삽화'로 보이지, 저 바닷가에 서 있는 것으로 안 보인다.
   대신 몸 모양을 따라가는 그림자만 깐다 — 그래야 바닥에 발이 닿는다. */
.home .hero-art {
  border-radius: 0; border: 0; box-shadow: none;
  filter: drop-shadow(0 14px 26px rgba(3,18,36,.45));
}
.home .hero-art-wrap { align-self: end; justify-self: end; }
@media (min-width: 1000px) {
  /* 글 쪽을 조금 더 넓게. 반반으로 나누면 카드 셋이 각 165px 이 되고
     "자연스러운 대화로 여행 계획을 세워보세요!" 가 세 줄로 접힌다. */
  .home .hero-in { grid-template-columns: 1.3fr 1fr; padding: 64px 28px 0; gap: 22px 32px; }
  .home .hero-art-wrap {
    align-self: end; max-width: 430px; width: 100%;
    /* 발이 히어로 바닥선에 닿게 한다. hero-in 아래 여백을 0 으로
       두고 여기서 마지막 칸까지 내려 보낸다. */
    margin-bottom: 0;
  }
  /* 마지막 줄(카드 셋) 아래 숨 쉴 자리. 마스코트가 그 옆에 나란히
     서 있으므로 여백은 카드 쪽에만 준다. */
  .home .doors { margin-bottom: 48px; }
}
.home .bubble {
  border: 0; border-radius: 18px; padding: 11px 15px; font-size: .88rem;
  box-shadow: var(--lift); font-weight: 800;
}
.home .bubble::after { border: 0; box-shadow: none; }

/* ── 세 개의 문 ───────────────────────────────────────────── */
.home .doors { gap: 10px; }
.home .door {
  border: 0; border-radius: var(--card-r); box-shadow: var(--lift);
  padding: 16px 16px 42px; background: var(--card);
}
.home .door:hover { transform: translateY(-3px); box-shadow: var(--lift-hi); }
/* 3D 그림에는 칩 배경을 두르지 않는다. 선으로 그린 아이콘은 배경이
   없으면 카드가 비어 보였지만, 3D 는 그림 자체가 색과 부피를 갖고
   있어서 그 위에 또 색 판을 깔면 두 겹이 된다. */
.home .door-ico {
  display: block; margin-bottom: 6px; width: 52px; height: 52px;
}
.home .door-ico .fx { width: 100%; height: 100%; }
/* 파란 칸에서만 그림 뒤에 옅은 판을 깐다. 첫 칸 그림이 흰 말풍선이라
   파란 바탕에 얹으면 거의 안 보인다 — 흰 그림을 파란 데 놓은 우리
   잘못이지, 그림 잘못이 아니다. 나머지 칸(흰 바탕)은 판이 필요 없다. */
.home .door-ai .door-ico {
  display: grid; place-items: center; width: 58px; height: 58px;
  background: rgba(255,255,255,.2); border-radius: 16px;
}
.home .door-ai .door-ico .fx { width: 42px; height: 42px; }
.home .door-name { font-size: clamp(1rem, .94rem + .3vw, 1.2rem); font-weight: 900; letter-spacing: -.035em; }
.home .door-eg { font-size: clamp(.83rem, .78rem + .2vw, .95rem); line-height: 1.5; }
.home .door-ai {
  background: linear-gradient(158deg, var(--blue) 0%, var(--blue-2) 100%);
  border: 0; box-shadow: 0 8px 24px rgba(17,122,214,.34);
}

.home .door-ai .door-name { color: #fff; }
.home .door-ai .door-eg { color: rgba(255,255,255,.9); }
.home .door-ai .door-go { color: #fff; }
.home .door-ai:hover { filter: none; box-shadow: 0 14px 34px rgba(17,122,214,.44); }
@media (max-width: 619px) {
  .home .door { padding: 14px 8px 13px; }
  .home .door-ico { width: 40px; height: 40px; }
  .home .door-name { font-size: .82rem; }
}

/* ── 폰 첫 화면 다이어트 (2026-09-15, 운영자 지시) ─────────────
   지적: "히어로가 차지하는 면적이 너무 크다. 갤럭시 S9·폴드 접은 화면
   에서 빠른메뉴 여덟 칸이 아예 안 보인다."

   실측이 그대로였다(360px) —
     히어로 439px · 빠른메뉴 시작 542px · 8칸 끝 821px
     S9 에서 주소창을 뺀 실제 높이가 640px 이라 아랫줄 네 칸이 화면 밖.

   네 단계로 줄여 439 → 298px 로 만들었다. 8칸 끝이 597px 이라 640 안에
   들어온다. 줄인 자리와 그 이유:
     ① 여백·버튼 안쪽 (보이는 것은 하나도 안 뺀다)
     ② 마스코트 칸 40% → 34/30/27% · 제목·부제 자
     ③ 세 문을 **가로로 눕힌다** — 아이콘을 위에 얹지 않고 이름 옆에
        붙이면 카드 키가 113 → 52px 이 된다

   **세 문을 지우는 안(-121px)은 안 골랐다.** 셋이 가는 곳이 빠른메뉴와
   완전히 겹치긴 한다(/guide/·/test/·/where/ = AI 여행가이드·여행 성향
   테스트·예산별 찾기). 그래도 파란 AI 카드가 빠른메뉴의 8분의 1 칸이
   되는 것이 손해라고 봤다. 다시 꺼낼 일이 있으면 이 문단이 근거다.

   숫자 띠를 숨기는 안(-33px)도 안 골랐다 — 그건 "급한 척이 아니라
   근거"라고 일부러 넣은 자리다(위 .home .trustline 주석). */
@media (max-width: 619px) {
  .home .hero-in {
    padding: 20px 16px 18px; gap: 8px 12px;
    grid-template-columns: 1fr 34%;
  }
  .home .slogan { font-size: clamp(1.85rem, 1rem + 4.6vw, 3.2rem); }
  .home .tagline { margin-top: 6px; font-size: .88rem; line-height: 1.34; }
  .home .herosearch { margin-top: 10px; min-height: 46px; padding: 11px 15px; }
  .home .trustline { margin-top: 2px; }

  /* 세 문을 눕힌다. 아이콘 위·이름 아래였던 것을 한 줄로 붙인다. */
  .home .doors { margin-top: 2px; gap: 8px; }
  .home .door {
    flex-direction: row; align-items: center; justify-content: center;
    gap: 6px; padding: 11px 6px; text-align: left;
  }
  .home .door-ico { width: 24px; height: 24px; margin: 0; flex: 0 0 auto; }
  .home .door-ai .door-ico { width: 28px; height: 28px; background: none; border-radius: 0; }
  .home .door-ai .door-ico .fx { width: 24px; height: 24px; }
  .home .door-name { font-size: .76rem; letter-spacing: -.045em; }
}
@media (max-width: 459px) { .home .hero-in { grid-template-columns: 1fr 30%; } }
@media (max-width: 399px) {
  .home .hero-in { grid-template-columns: 1fr 27%; }
  .home .tagline { font-size: .84rem; }
}

/* ── 빠른 메뉴 ────────────────────────────────────────────── */
.home .quickmenu { background: transparent; border: 0; }
.home .quickmenu ul { padding: 22px 0 6px; gap: 10px; }
.home .quickmenu a {
  background: var(--card); border-radius: 18px; padding: 18px 8px 15px;
  box-shadow: var(--lift); gap: 9px;
}
.home .quickmenu a:hover { transform: translateY(-3px); box-shadow: var(--lift-hi); }
/* 그림이라 clamp 를 px 로 잡는다. 폰 42 → PC 54. 시안의 빠른 메뉴가
   이 정도 크기고, 여기가 홈에서 두 번째로 많이 눌리는 자리다. */
.home .qm-ico .fx { width: clamp(42px, 34px + 1.6vw, 54px); height: auto; }
.home .qm-label {
  font-size: clamp(.76rem, .72rem + .22vw, .92rem);
  font-weight: 800; letter-spacing: -.03em;
}
/* ── 오와열 (2026-09-15, 운영자 지적) ──────────────────────────
   "470px 까지는 여덟 칸이 같은 크기로 정렬이 맞는데, 그 아래로 내려가면
   일부 글자가 2열로 내려가면서 버튼 크기가 뒤죽박죽된다."

   실측이 정확했다. 경계가 470px 인 이유는 칸 폭이다 —
     470px: 칸 103px, '가볼만한곳 추천'(제일 긴 이름)이 한 줄에 들어간다
     400px: 칸  86px, 세 칸이 2줄  → 행 높이 104 대 124
     360px: 칸  76px, 다섯 칸이 2줄 → 행 높이 104 대 123

   **원인은 격자의 두 행이 각자 높이를 잰다는 것이다.** 윗줄에 2줄짜리가
   하나만 있어도 윗줄 전체가 커지고 아랫줄은 그대로다. 셋을 같이 쓴다:
     · grid-auto-rows: 1fr  — 두 행을 같은 높이로
     · 글자칸에 2줄 자리를 미리 잡아(min-height) 1줄짜리도 같은 키
     · 폭이 줄면 아이콘·글자도 단계적으로 줄여 2줄이 되는 칸 수 자체를 줄인다

   앞의 둘만으로도 정렬은 맞지만 칸이 쓸데없이 높아진다. 셋째가 있어야
   첫 화면에 여덟 칸이 다 들어온다.

   **칸을 44px 아래로 내리지 말 것**(src/web/mobile.py TOUCH_MIN).
   지금 360px 에서 88px 이라 여유가 있다. */
@media (max-width: 479px) {
  .home .quickmenu ul { grid-auto-rows: 1fr; gap: 8px; padding: 14px 0 6px; }
  .home .quickmenu li { display: flex; }
  .home .quickmenu a { width: 100%; height: 100%; justify-content: flex-start; }
  .home .qm-label {
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 2.4em; line-height: 1.2;
  }
}
@media (max-width: 419px) {
  .home .quickmenu ul { gap: 7px; }
  .home .quickmenu a { padding: 14px 4px 11px; gap: 7px; }
  .home .qm-ico .fx { width: 38px; }
  .home .qm-label { font-size: .72rem; letter-spacing: -.045em; }
}
@media (max-width: 379px) {
  .home .quickmenu ul { gap: 6px; }
  .home .quickmenu a { padding: 12px 3px 10px; gap: 6px; }
  .home .qm-ico .fx { width: 34px; }
  .home .qm-label { font-size: .68rem; }
}

/* ── 섹션 제목 ────────────────────────────────────────────── */
.home h2 {
  font-size: clamp(1.28rem, 1.02rem + 1.15vw, 2.05rem);
  font-weight: 900; letter-spacing: -.045em;
}
.home .head-note { font-size: clamp(.88rem, .84rem + .2vw, 1rem); }
.home .more { color: var(--blue-2); font-weight: 800; }

/* ── 가로 카드 ────────────────────────────────────────────── */
.home .rail { grid-auto-columns: 232px; gap: 14px; margin-top: 18px; padding-bottom: 10px; }
@media (min-width: 1000px) { .home .rail { grid-auto-columns: 258px; gap: 16px; } }
.home .hot { border: 0; border-radius: var(--card-r); box-shadow: var(--lift); }
.home .hot:hover { transform: translateY(-4px); box-shadow: var(--lift-hi); }
.home .hot-photo { height: 152px; }
/* 사진 아래를 살짝 어둡게 깔아 배지와 경계가 뜨게 한다. */
.home .hot::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 152px;
  background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 38%);
  pointer-events: none; z-index: 1;
}
.home .hot-blank { background: linear-gradient(150deg, #bfe0fa, #eaf4fd); }
.home .hot-badge {
  background: linear-gradient(140deg, #ff6a3d, #f4511e);
  box-shadow: 0 3px 10px rgba(244,81,30,.4);
  font-size: .74rem; padding: 4px 11px;
}
.home .hot-body { padding: 13px 15px 15px; gap: 2px; }
.home .hot-city { font-size: clamp(1.16rem, 1.06rem + .4vw, 1.34rem); font-weight: 900; letter-spacing: -.04em; }
.home .hot-price {
  margin-top: 5px; font-size: clamp(1.24rem, 1.12rem + .5vw, 1.46rem);
  font-weight: 900; color: var(--blue-2); letter-spacing: -.035em;
}

/* ── 세 칸 ───────────────────────────────────────────────── */
.home .trio { gap: 16px; }
.home .panel {
  border: 0; border-radius: 20px; box-shadow: var(--lift);
  padding: 22px 20px 20px;
}
.home .panel h2 { font-size: 1.16rem; }
.home .panel-sub { font-size: .84rem; margin-top: 5px; }

/* 예산 칸과 추천 순위를 **단추로** 세운다.
 *
 * 예전에는 판 바탕(--paper)에 글자만 얹혀 있었다. 밝은 화면에서는
 * 그런대로 보였는데 어두운 화면에서 --paper 와 판(--card) 이 거의 같은
 * 색이라(1.1:1) 누를 수 있는 것으로 안 읽혔다(운영자 지적 2026-09-06).
 *
 * 색은 운영자가 고른 '채도 낮은 빨강'이다. 재 보니 그 판단이 맞았다 —
 * 한 색으로 두 모드를 다 감당하는 구간이 좁은데 여기가 그 자리다:
 *
 *     #b4544f   흰 글자와 4.86:1   밝은 바탕과 4.49:1   어두운 바탕과 3.87:1
 *
 * 더 어둡게 하면 흰 글자는 편해지지만 어두운 화면에서 판에 묻히고
 * (#8c3a35 는 2.48:1), 더 밝게 하면 흰 글자가 규격 아래로 떨어진다
 * (#c0605a 는 4.15:1). 그래서 모드마다 색을 나누지 않고 하나로 간다 —
 * 두 모드에서 같은 단추로 보이는 편이 낫다.
 */
.home .panel .budget {
  border: 0; background: var(--act); color: #fff;
  border-radius: 12px; padding: 13px 15px; font-weight: 800;
}
.home .panel .budget:hover { background: var(--act-hi); transform: translateX(3px); }
.home .budget-label { font-size: .94rem; font-weight: 800; color: #fff; }
/* 흰 판 위 --blue-2 였다. 빨간 단추 위에서는 안 읽힌다. */
.home .budget-count { color: rgba(255,255,255,.88); font-weight: 900; }
/* 갈 수 있는 곳이 0인 구간. 단추 모양은 유지하되 행동색을 거둔다 —
   눌러도 아무것도 없는데 빨갛게 부르면 그건 속이는 것이다. */
.home .panel .budget.empty { background: var(--ink-3); opacity: .5; }
.home .panel .budget.empty:hover { transform: none; }

/* '가격이 내려갔어요!' 안의 숙소 카드. **운영자 지정 색이다**(2026-09-11).
   전에는 var(--paper) 였는데 그 낱말은 사이트 전체의 바탕이라, 색을 바꾸면
   홈뿐 아니라 모든 쪽의 바탕이 같이 움직였다 — 그래서 여기만 값을 박는다.
   `.drop` 은 홈에만 쓰는 이름이므로(templates 전체에서 home.html 하나)
   이 한 줄이 다른 쪽에 닿지 않는다.

   **어두운 판에서는 안 쓴다.** #f7f7e694 는 알파가 58% 라 어두운 바탕
   (#0e1216) 위에서 밝은 올리브(약 #989a89)로 섞이는데, 그 위에 얹히는
   글자색(--ink #eef2f6)이 2.3:1 밖에 안 된다. 아래에서 원래 색으로
   되돌린다. */
.home .drop { border: 0; background: #f7f7e694; border-radius: 14px; padding: 9px; }
:root[data-theme="dark"] .home .drop { background: var(--paper); }
.home .drop:hover { background: var(--blue-soft); transform: translateX(3px); }
.home .drop-kind { background: var(--blue-soft); color: var(--blue-2); }
.home .drop-now { font-size: 1.02rem; font-weight: 900; }
.home .drop-off { color: var(--sale); font-weight: 900; }

/* 추천 넷도 같은 단추다. 예산 칸과 나란히 서는 자리라 다르게 생기면
   하나는 누를 수 있고 하나는 아닌 것처럼 보인다. */
.home .ranks a {
  padding: 11px 12px; border-radius: 12px;
  background: var(--act); color: #fff;
}
.home .ranks a:hover { background: var(--act-hi); transform: translateX(3px); }
.home .rank-no {
  width: 24px; height: 24px; border-radius: 9px; font-size: .8rem;
  background: linear-gradient(150deg, var(--blue), var(--blue-2));
  box-shadow: 0 2px 7px rgba(17,122,214,.34);
}
/* 1~3위는 금·은·동. 순위표에 색이 없으면 그냥 목록으로 읽힌다. */
.home .ranks li:nth-child(1) .rank-no { background: linear-gradient(150deg,#ffc93c,#f0a500); box-shadow: 0 2px 7px rgba(240,165,0,.42); }
.home .ranks li:nth-child(2) .rank-no { background: linear-gradient(150deg,#c6ced8,#9aa6b4); box-shadow: 0 2px 7px rgba(154,166,180,.4); }
.home .ranks li:nth-child(3) .rank-no { background: linear-gradient(150deg,#e0a273,#c07d4a); box-shadow: 0 2px 7px rgba(192,125,74,.4); }
.home .rank-name { font-size: .95rem; font-weight: 800; color: #fff; }
.home .rank-price { color: #fff; font-weight: 900; font-size: .92rem; }
.home .rank-days { color: rgba(255,255,255,.8); }
/* 순위 뱃지는 빨간 판 위에 선다. 파란 그러데이션은 묻히므로 흰 알약에
   빨간 숫자로 뒤집는다. 금·은·동은 그대로 둔다 — 그 셋은 빨강 위에서도
   충분히 밝다. */
.home .ranks .rank-no {
  background: #fff; color: var(--act);
  box-shadow: 0 2px 7px rgba(0,0,0,.18);
}

/* ── 칩·코스·도시 카드 ────────────────────────────────────── */
.home .chip {
  border: 0; background: var(--card); box-shadow: var(--lift);
  padding: 10px 16px; font-size: .89rem; font-weight: 800;
}
.home .chip:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--lift-hi); }
.home .course-card, .home .guide {
  border: 0; border-radius: var(--card-r); box-shadow: var(--lift);
}
.home .course-card:hover, .home .guide:hover {
  transform: translateY(-3px); box-shadow: var(--lift-hi);
}
.home .guide-city { font-weight: 900; letter-spacing: -.035em; }
.home .guide-go { color: var(--blue-2); font-weight: 800; }
.home .course-cost { color: var(--blue-2); font-weight: 900; }

/* ── AI 배너 ─────────────────────────────────────────────── */
.home .aibanner {
  background: linear-gradient(122deg, var(--sun) 0%, var(--sun-2) 100%);
  border: 0; border-radius: 22px; box-shadow: var(--lift);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 20px 24px; position: relative; overflow: hidden;
}
/* 오른쪽 위에 옅은 빛. 노란 판이 평평하면 종이처럼 보인다. */
.home .aibanner::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 120% at 88% 0%, rgba(255,255,255,.6), rgba(255,255,255,0) 60%);
  pointer-events: none;
}
.home .aibanner > * { position: relative; }
.home .aibanner-mascot { width: 124px; height: 124px; flex-basis: 124px; }
.home .aibanner-q { color: #8a6a12; font-weight: 800; }
.home .aibanner-title {
  font-size: clamp(1.3rem, 1rem + 1.5vw, 1.95rem); font-weight: 900;
  letter-spacing: -.05em; color: #2a2103;
}
.home .aibanner-desc { color: #6b551a; font-weight: 600; }
.home .aibanner-cta {
  background: linear-gradient(150deg, var(--blue), var(--blue-2));
  border-radius: 999px; padding: 13px 22px; font-weight: 900;
  box-shadow: 0 8px 22px rgba(15,98,193,.36); border: 0;
}
.home .aibanner-cta:hover { filter: brightness(1.06); transform: translateY(-2px); }
:root[data-theme="dark"] .home .aibanner-q { color: #e0c66a; }
:root[data-theme="dark"] .home .aibanner-title { color: #fdf3d2; }
:root[data-theme="dark"] .home .aibanner-desc { color: #cbb87e; }
:root[data-theme="dark"] .home .aibanner::before { background: none; }

/* ── 이 사이트가 하는 것 ──────────────────────────────────── */
.home .props {
  background: var(--card); border-radius: 20px; box-shadow: var(--lift);
  padding: 6px; gap: 0;
}
.home .props li {
  border: 0; background: transparent; padding: 20px 18px; box-shadow: none;
  border-radius: 16px; text-align: center; justify-items: center; gap: 7px;
}
.home .props li:hover { background: var(--paper); }
.home .prop-ico {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; background: var(--blue-soft); color: var(--blue-2);
}
.home .props b { font-size: 1rem; font-weight: 900; letter-spacing: -.035em; }
.home .props span:last-child { font-size: .84rem; }
@media (min-width: 720px) {
  .home .props li + li { box-shadow: inset 1px 0 0 var(--line); }
}

/* ── 공지사항 ── */
.notices { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.notices > li {
  padding-left: 16px; border-left: 3px solid var(--line);
}
.notice-date {
  margin: 0; color: var(--ink-3); font-size: .82rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.notices h2 { margin: 4px 0 0; font-size: 1.08rem; }

/* ── 오늘 뭐하지: 상황 타일 ───────────────────────────────── */
/* 이 화면에서 제일 먼저 눈에 들어와야 하는 것이 상황이다. 칩(작은
   알약)으로 두면 위 거르개와 구별이 안 되고, 무엇보다 "이걸 고르는
   화면" 이라는 게 안 읽힌다. 그래서 눌러야 할 만큼 크게 만든다. */
/* 위 머리칸에 딱 붙여 두고 있었다(padding-top: 0). 붙여 두면 상황
   메뉴가 머리칸의 일부처럼 읽혀서 좋을 줄 알았는데, 폰에서 보면 글과
   타일이 맞닿아 답답하다 — 고르라고 만든 자리인데 숨 쉴 틈이 없다.
   띠 하나만큼(34px)은 과하니 그 절반쯤만 준다. */
/* 위 문단과 타일 사이가 붙어 보였다("여백이 없어보인다", "첫 줄
   상단이 잘려 보인다" — 운영자 2026-09-06). 실제로 잘리는 것은
   없었지만(그리는 조상 중에 자르는 것이 없다) 16px 은 타일 그림자와
   겹쳐 읽혀서 붙은 것처럼 보인다. 위쪽을 더 준다. */
.moods-band { padding-top: clamp(26px, 6vw, 38px); padding-bottom: clamp(24px, 5vw, 34px); }
/* 타일 크기를 화면 폭에 맡긴다. 예전에는 52px(폰 44px) 고정이라
   360px 짜리 폰에서 한 줄에 세 개밖에 안 들어갔다. 폰에서는 4열,
   그보다 넓으면 5열, 더 넓으면 알아서 채우게 둔다 — 열 수를 못 박는
   대신 아래 breakpoint 에서 고정하는 이유는, auto-fill 로 두면 폰 폭에
   따라 3열과 4열을 오가서 같은 화면이 기기마다 다르게 보이기 때문이다. */
.moods {
  display: grid; gap: clamp(6px, 1.8vw, 10px);
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
}
.mood {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: clamp(9px, 2.4vw, 16px) clamp(4px, 1.6vw, 8px) clamp(8px, 2vw, 13px);
  border-radius: var(--card-r, 16px);
  background: var(--card); border: 1.5px solid var(--line); cursor: pointer;
  font: inherit; color: var(--ink); text-align: center;
  box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.mood:hover { transform: translateY(-2px); box-shadow: var(--lift, 0 8px 20px rgba(16,22,29,.12)); border-color: var(--brand); }
.mood-emoji { line-height: 1; }
/* height 를 안 적고 aspect-ratio 로 두는 이유: 그림 파일이 정사각형이라
   폭만 정하면 높이가 따라온다. 둘 다 적으면 한쪽만 고치는 실수가 난다. */
.mood-emoji .fx { width: clamp(34px, 11vw, 52px); height: auto; aspect-ratio: 1; margin: 0 auto; }
/* keep-all: 좁아지면 "비 오는 날" 이 낱말 가운데서 잘린다. 띄어쓴
   자리에서만 접히게 둔다 — 이름이 두 줄이 되는 건 괜찮지만 낱말이
   쪼개지면 무슨 상황인지 못 읽는다. */
.mood-name {
  font-weight: 800; font-size: clamp(.78rem, .55rem + 1.1vw, .95rem);
  letter-spacing: -.03em; line-height: 1.25; word-break: keep-all;
}
.mood-n { font-size: clamp(.66rem, .5rem + .5vw, .74rem); color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* 고른 것은 **색이 아니라 채움**으로 표시한다. 색만 바꾸면 색을 못
   가리는 사람에게는 아무 일도 안 일어난 화면이 된다. */
.mood.on {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: var(--lift, 0 8px 20px rgba(16,22,29,.12));
}
.mood.on .mood-n { color: rgba(255,255,255,.85); }
/* 어두운 화면에서 --accent 는 옅은 하늘색(#7db2ee)이다. 그 위에 흰
   글씨를 얹으면 1.9:1 이라, 고른 타일이 오히려 화면에서 제일 안 읽힌다 —
   "눌러도 아무 일이 안 일어난 것 같다"는 말이 여기서도 나온다.
   밝은 바탕에는 어두운 글씨로 뒤집는다(9.6:1). */
:root[data-theme="dark"] .mood.on { color: #0e1216; }
:root[data-theme="dark"] .mood.on .mood-n { color: rgba(14,18,22,.78); }
.mood:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ── 오늘 뭐하지: 도시 카드 ───────────────────────────────── */
/* 목적지 카드(.dest)와 같은 말을 쓴다. 화면마다 카드가 다르게 생기면
   같은 사이트로 안 읽힌다. 다른 점은 값 대신 **상황 칩**이 붙는 것. */
.spots {
  display: grid; gap: 14px; margin-top: 16px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.spot {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--card-r, 16px);
  display: flex; flex-direction: column; box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease;
}
.spot:hover { transform: translateY(-3px); box-shadow: var(--lift-hi, 0 12px 30px rgba(16,22,29,.16)); }
.spot[hidden] { display: none; }
.spot-ph { position: relative; aspect-ratio: 16 / 10; background: var(--paper); }
.spot-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.spot-noph {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(140deg, #4f8fd8, #23568f);
  color: #fff; font-weight: 800; letter-spacing: -.03em;
  text-shadow: 0 1px 8px rgba(3,18,36,.45);
}
/* '오늘 당장' 이냐 '비행기' 냐. 이 화면의 이름이 '오늘'이라 이게
   카드에서 제일 중요한 사실이다. */
.spot-when {
  position: absolute; top: 9px; left: 9px;
  background: rgba(6,20,38,.72); color: #fff;
  font-weight: 800; font-size: .72rem; padding: 4px 9px; border-radius: 999px;
  backdrop-filter: blur(4px);
}
.spot-body { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 4px; }
.spot-city { margin: 0; font-size: 1.06rem; font-weight: 800; letter-spacing: -.03em; }
.spot-city a { color: var(--ink); text-decoration: none; }
.spot-city a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.spot-city a:hover { color: var(--accent); }
.spot-meta { margin: 0; color: var(--ink-2); font-size: .77rem; font-variant-numeric: tabular-nums; }
.spot-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.spot-chip {
  position: relative; z-index: 2;      /* 겹쳐 놓은 카드 링크보다 위로 */
  text-decoration: none; font-size: .76rem; font-weight: 700;
  /* gap 이 있어야 한다. 안에 든 것이 [그림][말][숫자] 셋인데
     `inline-flex` 는 조각 사이의 띄어쓰기를 지운다 — 판에 " <b>" 로
     적어 둔 빈칸이 사라져서 "비 오는 날71" 로 붙어 나왔다. */
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px;
  padding: 8px 11px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink-2);
  white-space: nowrap;
}
.spot-chip b { color: var(--accent); font-variant-numeric: tabular-nums; }
.spot-chip:hover { border-color: var(--brand); color: var(--ink); }
.spot-chip.on { background: var(--blue-soft, #e6f1fc); border-color: var(--accent); color: var(--accent); }
/* 상황을 누르면 화면이 여기로 끌려온다(today.html 의 reveal()).
   따라다니는 상단바(.topbar) 아래로 제목이 숨지 않게 그 높이만큼
   비워 둔다 — 안 비우면 "N곳 보는 중" 이 바에 가려서, 끌어다 놓은
   보람이 없다. */
.spots-head { scroll-margin-top: 76px; }

/* 성향 테스트로 가는 두 번째 길. 글줄 안의 링크였을 때는 아무도 안
   눌렀다. 말은 위에 두고 누를 것만 아래로 떼어 낸다. */
/* 운영자 지정 색(2026-09-10). "고르기 귀찮으면 이렇게 해보세요" 는 이
   화면의 두 번째 길로 데려가는 말이라, 곁말 색(--ink-2)으로 두면 안 읽힌다. */
/* 문장과 단추가 한 덩이로 가운데에 선다(2026-09-13). 위 .result-acts
   주석 참조 — 단추만 옮기면 문장과 어긋난다. */
.head-quiz-say {
  margin: 14px 0 8px; color: #ff0f85; font-size: .92rem; font-weight: 700;
  text-align: center;
}
.head-quiz {
  display: flex; width: fit-content; margin-inline: auto;
  align-items: center; gap: 7px;
  padding: 11px 17px; border-radius: 10px; font-size: .92rem;
}
.head-quiz::after { content: "→"; font-weight: 800; }

@media (max-width: 900px) {
  /* 폰보다는 넓지만 8열이 들어갈 만큼은 아닌 폭(태블릿 세로 768px 포함).
     여기서 열 수를 못 박아 두지 않으면 126px 최소폭이 5열과 6열 사이를
     오간다. */
  .moods { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 560px) {
  /* 폰. 한 줄에 4개 — 3개면 타일이 쓸데없이 크고, 5개면 도시 이름이
     두 줄로 접힌다. 360px 에서도 4개가 들어가도록 위 clamp 들이
     같이 줄어든다. */
  .moods { grid-template-columns: repeat(4, 1fr); }
  .spots { grid-template-columns: 1fr 1fr; gap: 10px; }
  .spot-body { padding: 9px 10px 11px; }
  .spot-city { font-size: .98rem; }
  .spot-chip { font-size: .71rem; padding: 4px 7px; }
  /* 폰에서는 손가락에 맞춘다. 글줄 옆에 붙은 작은 알약이 아니라,
     화면을 가로지르는 하나의 누를 것으로 보여야 한다. */
  .head-quiz { display: flex; width: 100%; justify-content: center; padding: 13px 16px; }
  /* 배너는 폰에서 세 줄로 접힌다(그림·글·단추). 단추가 제 글자 길이만큼만
     차지하면 노란 판 왼쪽에 치우쳐 남는다 — 위의 .head-quiz 와 같은 이유로
     화면을 가로지르게 둔다. */
  .aibanner-cta { width: 100%; justify-content: center; }
}

/* ── 3D 아이콘 ─────────────────────────────────────────────── */
/* 글자 이모지를 그림 파일로 바꿨다. 글자였을 때는 크기를 font-size 로
   잡았는데, 이제 img 라 width/height 가 붙어 있다 — 그 값이 곧 크기다.
   여기서는 **글자 흐름 안에 앉는 방식**만 정한다. */
.fx { display: block; object-fit: contain; }
/* 글줄 안에 섞여 들어가는 것(칩·제목)은 글자와 밑선을 맞춘다. */
.chip-fx .fx, .h2-fx .fx, .spot-chip .fx {
  display: inline-block; vertical-align: -.22em; margin-right: 1px;
}
.h2-fx { display: flex; align-items: center; gap: 8px; }
.h2-fx .fx { vertical-align: baseline; flex: 0 0 auto; }

/* ── 도시 테마 줄 ──────────────────────────────────────────── */
/* '지금 가장 싸게' 줄(.rail)의 미는 방식을 그대로 쓴다. 화면마다 미는
   방식이 다르면 같은 사이트로 안 읽힌다. */
.railset { margin-top: 22px; }
.railset + .railset { margin-top: 26px; }
.rail-title {
  margin: 0; font-size: clamp(1.02rem, .95rem + .4vw, 1.24rem);
  font-weight: 900; letter-spacing: -.035em;
}
.rail-note { margin: 3px 0 0; color: var(--ink-2); font-size: .84rem; }
.cityrail { grid-auto-columns: 208px; margin-top: 10px; }
@media (max-width: 560px) { .cityrail { grid-auto-columns: 168px; } }

.cityc {
  display: flex; flex-direction: column; height: 100%;
  background: var(--card); border-radius: var(--card-r, 16px);
  border: 1px solid var(--line); overflow: hidden;
  text-decoration: none; color: var(--ink); box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.cityc:hover { transform: translateY(-3px); box-shadow: var(--lift-hi, 0 12px 30px rgba(16,22,29,.16)); border-color: var(--brand); }
.cityc-ph { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--paper); }
.cityc-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cityc-noph {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(140deg, #4f8fd8, #23568f);
  color: #fff; font-weight: 800; letter-spacing: -.03em; font-size: .95rem;
  text-shadow: 0 1px 8px rgba(3,18,36,.45);
}
.cityc-body { display: block; padding: 10px 12px 12px; }
.cityc-name { display: block; font-size: 1.04rem; font-weight: 800; letter-spacing: -.035em; }
/* 숫자 옆에 작은 그림을 붙인다. 두 줄이 다 글자면 어느 쪽이 즐길거리
   이고 어느 쪽이 후기인지 매번 읽어야 한다. */
.cityc-meta { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.cityc-meta > span {
  display: flex; align-items: center; gap: 5px;
  color: var(--ink-2); font-size: .77rem; font-variant-numeric: tabular-nums;
}
.cityc-meta .fx { flex: 0 0 auto; }

/* 접어 둔 전체 도시. 여기서 할 일은 '고르기'가 아니라 '내가 아는 이름
   찾기'라 카드가 아니라 글자 목록이다. */
.citylist {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: grid; gap: 4px 10px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
/* 126개가 두 칸 격자로 깔린다. padding 6px 이면 한 칸이 34px 이고
   세로 틈이 4px 이라, 누르려는 도시 위아래·옆에 다른 도시가 4px 옆에
   있다. 한 번에 맞히기 어려운 크기다. */
.citylist a {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  min-height: 44px; padding: 10px; border-radius: 9px; text-decoration: none;
  color: var(--ink); font-size: .88rem; font-weight: 700;
}
.citylist a:hover { background: var(--card); color: var(--accent); }
.citylist b { color: var(--ink-3); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── 달 칩 ─────────────────────────────────────────────────── */
/* '8월 162,600원~' 을 한 줄 검정 글자로 붙여 두면 훑을 수가 없다.
   달은 위, 값은 아래. 값에만 색을 준다 — 이 줄에서 비교하는 것은
   달이 아니라 값이다. */
.monthchips {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
}
.monthchips a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 11px 8px 10px; border-radius: 14px; text-decoration: none;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.monthchips a:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: var(--lift, 0 8px 20px rgba(16,22,29,.12)); }
.monthchips .mc-when {
  /* 달 이름이 13px 이라 값보다 한참 작아서, 훑을 때 '몇 월' 을 놓친다.
     이 줄에서 먼저 찾는 것은 달이다. */
  font-size: 1rem; font-weight: 800; color: var(--ink); letter-spacing: -.03em;
}
.monthchips .mc-price {
  font-size: 1.2rem; font-weight: 900; letter-spacing: -.035em;
  color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap;
  /* 흰 바탕이라 글자 그림자가 필요 없다. 있으면 숫자가 번져 보인다. */
  text-shadow: none;
}
.monthchips .mc-price .won { font-size: .68em; font-weight: 800; color: var(--ink-3); margin-left: 1px; }
@media (max-width: 560px) {
  .monthchips { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; }
  .monthchips .mc-when { font-size: .9rem; }
  .monthchips .mc-price { font-size: 1.06rem; }
}

/* ══ 손가락으로 쓰는 기기 ══════════════════════════════════════
 *
 * 2026-09-06. 운영자가 폰에서 "메뉴를 눌러도 화면에서 아무런 반응이
 * 없다"고 했다. /today/ 만의 문제인 줄 알았는데 세어 보니 이 파일에
 * `:hover` 규칙이 63개이고 `:active` 규칙이 **0개**였다. 즉 이 사이트는
 * 마우스에게만 반응을 돌려주고 있었다.
 *
 * 두 가지가 같이 잘못돼 있다.
 *
 * 하나. **누르는 순간 아무 일도 안 일어난다.** 눌렀는지 안 눌렀는지
 * 모르니 사람은 한 번 더 누른다. 그게 두 번 눌린 것으로 처리되거나,
 * 아니면 "고장 났나" 하고 떠난다.
 *
 * 둘. **떼고 나서도 hover 가 붙어 있는다.** 터치 브라우저는 탭한 요소에
 * hover 를 걸고 다른 데를 누를 때까지 그대로 둔다. 그래서 카드를 눌러
 * 넘어갔다가 뒤로 오면 그 카드 하나만 떠 있다. 사람은 그걸 "내가 고른
 * 것"으로 읽는데 아무 뜻도 없는 표시다.
 *
 * 여기서 hover 를 다 지우지는 않는다. 색만 바뀌는 hover 는 떠 있어도
 * 고장으로 안 읽힌다. 문제는 **들어올리는 것**(transform)이라, 그 16개만
 * 끈다(hover 에서 transform 을 쓰는 규칙 전부).
 */
@media (hover: none) {
  .dest:hover,
  .dest-lite:hover,
  a.month-card:hover,
  .home .door:hover,
  .home .quickmenu a:hover,
  .home .hot:hover,
  .home .panel .budget:hover,
  .home .drop:hover,
  .home .ranks a:hover,
  .home .chip:hover:not(:disabled),
  .home .course-card:hover,
  .home .guide:hover,
  .home .aibanner-cta:hover,
  .mood:hover,
  .spot:hover,
  .cityc:hover,
  .monthchips a:hover { transform: none; }
}

/* 누르는 동안의 표시. **살짝 줄어드는 것**으로 통일한다 — 색을 바꾸면
 * 이미 색으로 말하고 있는 것들(고른 칩, 지금 쪽)과 헷갈리고, 그림자를
 * 바꾸면 카드마다 바탕이 달라 어떤 데서는 안 보인다. 크기는 어디서나
 * 보인다.
 *
 * 0.06초다. 이보다 길면 누르고 나서 화면이 굼떠 보인다.
 *
 * 글 속의 링크(`a` 전부)에는 안 건다. 문단 가운데 글자가 줄었다 커지면
 * 그건 반응이 아니라 잡음이다. **판으로 생긴 것**에만 건다.
 */
.btn, .cta, .chip, .more, .card, .dest, .dest-lite, .mood, .spot,
.door, .hot, .course-card, .guide, .quiz-opt, .picker-select,
.picker-reset, .picker-go, .month-card, .cityc, .monthchips a,
.spot-chip, .drop, .budget, .offsite-cta, .plan-cta, .saved-go,
button, summary { -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: no-preference) {
  .btn:active, .cta:active, .chip:active:not(:disabled), .more:active,
  .card:active, .dest:active, .dest-lite:active, .mood:active, .spot:active,
  .door:active, .hot:active, .course-card:active, .guide:active,
  .quiz-opt:active, .picker-reset:active, .picker-go:active,
  .month-card:active, .cityc:active, .monthchips a:active,
  .spot-chip:active, .drop:active, .budget:active, .offsite-cta:active,
  .plan-cta:active, .saved-go:active {
    transform: scale(.97);
    transition: transform .06s ease;
  }
}

/* ══ 도시 찾기 ═══════════════════════════════════════════════
 *
 * 2026-09-06. 운영자가 "최상단에 [검색 입력창] 돋보기 아이콘 같은것도
 * 없다"고 했다. 없는 게 맞았다 — 도시 이름을 이미 아는 사람이 메뉴를
 * 뒤져야 했다.
 *
 * 다만 **상품은 안 찾는다.** 27,000개를 색인하면 JSON 이 몇 MB 라
 * 폰에서 못 쓰고, 그러면 검색 서버가 필요해진다. 도시·목적지·고정
 * 화면만 담아 20KB 로 끝낸다. 사람이 치는 말이 실제로 그것이다.
 *
 * 화면은 search.js 가 만든다. 여기 있는 것은 그 화면의 옷이다.
 */
/* 뒤를 충분히 덮는다. 반쯤 비치게 두면 아래 안내 글자가 페이지의
   칩·카드 위에 겹쳐서, 검색창이 페이지 위에 뜬 것이 아니라 **깨진
   것처럼** 보인다(실측 스크린샷 2026-09-06). */
.sitesearch-panel {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(9, 14, 20, .78);
  display: none; flex-direction: column;
}
.sitesearch-panel.on { display: flex; }
/* 열려 있는 동안 뒤쪽이 같이 밀리지 않게 한다. 폰에서 이게 없으면
   결과를 훑다가 뒤 페이지가 스크롤돼서 닫고 나면 딴 데 가 있다. */
.ss-lock, .ss-lock body { overflow: hidden; }

.ss-bar {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 12px; background: var(--card);
  border-bottom: 1px solid var(--line);
}
.ss-input {
  flex: 1; min-width: 0; font: inherit; font-size: 1rem;
  padding: 12px 14px; border-radius: 12px;
  border: 2px solid var(--line-2); background: var(--paper); color: var(--ink);
}
.ss-input:focus { outline: none; border-color: var(--brand); }
.ss-close {
  font: inherit; font-weight: 700; font-size: .92rem;
  min-height: 44px; padding: 10px 12px;
  background: none; border: 0; color: var(--ink-2); cursor: pointer;
}

.ss-out {
  list-style: none; margin: 0; padding: 0;
  background: var(--card); overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.ss-out:empty { border-bottom: 0; }
.ss-row {
  display: flex; align-items: center; gap: 9px;
  min-height: 52px; padding: 10px 16px;
  text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line);
}
.ss-out li.on .ss-row, .ss-row:hover { background: var(--paper); }
.ss-t { font-weight: 700; }
.ss-s { color: var(--ink-2); font-size: .88rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ss-k {
  margin-left: auto; font-size: .74rem; font-weight: 800; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px;
  white-space: nowrap;
}
.ss-none { padding: 18px 16px; color: var(--ink-2); background: var(--card); }
/* 안내 한 줄. 결과가 뜨면 그 아래로 밀려 내려가고, 화면이 좁으면
   가려진다 — 결과가 안내보다 먼저다. */
.ss-hint {
  margin: 0; padding: 14px 16px; color: rgba(255, 255, 255, .8);
  font-size: .84rem; text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

/* ══ 뒤로 가는 길 ════════════════════════════════════════════
 *
 * 부스러기 줄의 맨 앞에 바로 윗 단계를 화살표와 함께 세운다.
 * 폰에서는 이것만 보이고 나머지 부스러기는 접는다 — 좁은 화면에서
 * "홈 › 오사카 › 투어"는 한 줄을 다 먹으면서, 정작 사람이 누르고 싶은
 * 것은 그중 하나뿐이다. 넓은 화면에서는 전부 보인다(길 안내가 된다).
 */
/* 아이콘과 글자를 같은 크기로 세운다.
   .crumb 의 .82rem 을 그대로 물려받아서 20px 짜리 화살표 옆에 13px
   글자가 붙어 있었다 — 둘이 다른 것을 말하는 것처럼 보이고, 글자
   중심선도 아이콘 중심과 어긋났다(운영자 지적 2026-09-06).
   1rem(16px)이면 20px 아이콘의 시각 무게와 맞고, align-items: center
   가 두 중심을 한 줄에 세운다. 사이 간격도 2px 은 붙어 보여서 6px. */
.crumb-up {
  display: none; align-items: center; gap: 6px;
  min-height: 44px; margin-left: -8px; padding: 0 10px 0 6px;
  text-decoration: none; color: var(--ink-2);
  font-size: 1rem; font-weight: 700; line-height: 1;
}
.crumb-up .ico { flex: 0 0 auto; }
.crumb-up:hover { color: var(--accent); }
@media (max-width: 700px) {
  .crumb { position: relative; }
  .crumb-up { display: inline-flex; }
  /* 부스러기 본문은 로봇과 낭독기에만 남긴다. display:none 으로 지우면
     구조화 데이터가 아니라 **화면의 길 안내**가 통째로 사라지고,
     낭독기 사용자는 지금 어디 있는지 알 길이 없어진다. */
  .crumb-full {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* 판정 배지가 무엇과 견준 것인지 알려 주는 한 줄. 목록 아래에 한 번만
   나온다 — 카드마다 적으면 48번 같은 말을 하게 된다. */
.grid-note {
  margin: 12px 0 0; color: var(--ink-3); font-size: .82rem; line-height: 1.6;
}
.grid-note a { color: var(--accent); }


/* ══ '이건 어때요' 블록 ═══════════════════════════════════════
 *
 * 다른 화면으로 보내는 길을 **문단 속의 파란 링크**로 두면 아무도 안
 * 누른다. 본문의 각주처럼 읽혀서다. 그런데 /where/ 에서 /when/ 으로
 * 가는 길은 각주가 아니라 **다른 방식으로 고르고 싶은 사람의 유일한
 * 문**이다(예산으로 고를 것인가, 날짜로 고를 것인가).
 *
 * 그래서 설명문에서 떼어 내 소제목 + 단추로 세운다. 위아래로 충분히
 * 띄워서 앞 문단과 다른 이야기임이 보이게 한다.
 */
.nextway {
  margin: 30px 0 8px; padding: 22px 18px;
  border-top: 1px solid var(--line); text-align: center;
}
.nextway h3 {
  margin: 0; font-size: clamp(1.02rem, .95rem + .4vw, 1.2rem);
  font-weight: 800; letter-spacing: -.03em;
}
.nextway p { margin: 6px 0 0; color: var(--ink-2); font-size: .92rem; }
/* 조회하기 단추와 같은 옷이다 — 한 화면에 흰 단추가 둘 서는데 서로
   다르게 생기면 하나는 단추로 안 읽힌다. */
.nextway .btn-plain {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; margin: 16px auto 0; padding: 14px 26px;
  border-radius: 12px; border: 2px solid var(--ink);
  background: var(--card); color: var(--ink);
  font-size: 1.02rem; font-weight: 800; text-decoration: none;
}
.nextway .btn-plain:hover { background: var(--ink); color: var(--card); }
.nextway .btn-plain:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* ══ 홈 첫 화면의 도시 찾기 ═══════════════════════════════════
 *
 * 머리표에서 돋보기를 뺀 자리를 여기가 대신한다. 야놀자 홈이 그렇듯,
 * 도시 이름을 이미 아는 사람에게는 이게 제일 빠른 길이다.
 *
 * **진짜 입력칸이 아니라 링크다.** 그런데 입력칸처럼 보여야 눌린다 —
 * 링크처럼 생긴 것을 눌러 검색창이 뜨면 그건 놀라움이지 편의가 아니다.
 * 그래서 생김새만 입력칸으로 짓는다. 누르면 search.js 가 진짜 칸을
 * 만들고 그때 도시 목록(12KB)을 받는다.
 *
 * 배경 사진 위에 서므로 반투명 흰 판에 흐림을 준다. 불투명 흰 판을
 * 얹으면 사진에 흰 막대를 붙인 것처럼 보인다.
 */
.herosearch {
  display: flex; align-items: center; gap: 9px;
  /* 운영자 지정(2026-09-10): 폭 제한을 뺀다. 420px 로 묶어 두면 넓은
     화면에서 첫 화면의 다른 것들보다 유난히 짧게 남는다. */
  width: 100%; margin-top: 16px;
  min-height: 52px; padding: 13px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 6px 18px rgba(3, 18, 36, .22);
  color: #47535f; font-weight: 700; font-size: .98rem;
  text-decoration: none;
}
.herosearch .ico { flex: 0 0 auto; color: #1d64b3; }
.herosearch:hover { background: #fff; color: var(--ink, #101619); }
.herosearch:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* 운영자 지정(2026-09-10). 아주 좁은 폰(갤럭시 폴드 접은 상태 344px,
   iPhone SE 1세대 320px)에서 글자가 알약을 밀어낸다. 370px 를 경계로 둔
   이유는 우리가 기준으로 쓰는 폰 폭(390px)은 건드리지 않기 위해서다. */
@media (max-width: 370px) {
  .herosearch { font-size: .8rem; padding: 12px 15px; gap: 7px; }
}
/* 어두운 화면에서도 이 자리는 배경 사진 위다. 사진은 모드와 상관없이
   같은 밝기라, 판을 어둡게 뒤집으면 오히려 사진에 묻힌다. 밝게 둔다. */

/* ══ 숙소 목록의 소제목 띠 ═══════════════════════════════════
 *
 * 운영자가 폰에서 보고 한 말(2026-09-06): "숙소는 1열에 2칸 나오고
 * 있는데 … 1열에 1칸만 보이게 하고 좌우로 … 야놀자나 여기어때 처럼
 * 모바일에서 좌우로 손으로 이동해서 볼 수 있도록".
 *
 * 사진 비율은 여기서 손대지 않는다. 재 보니 `.card img` 의
 * `aspect-ratio: 1/1` 이 이미 듣고 있었다 — 360px 에서 162×162,
 * 390px 에서 177×177, 1200px 에서 208×208 로 전부 정확히 1:1 이다.
 * 세로로 길어 보였던 것은 사진이 아니라 **카드 아래 글 부분**이고
 * (390px 에서 사진 177 + 글 133~177 = 카드 310~354), 그건 이 일이
 * 아니다. 안 그런 것을 고쳤다고 적지 않는다.
 *
 * 화면 폭에 따라 두 모습이다. 가르는 선은 720px — 이 저장소가 이미
 * '좁은 화면'이라고 부르는 그 선이다(.grid 가 두 칸으로 접히는 자리).
 *   721px 위    지금까지와 같은 격자 (.grid 와 같은 잣대)
 *   720px 아래  가로로 미는 띠 — 한 장이 거의 다 보이고 옆엣것이 걸친다
 *
 * **넓은 화면에서 미는 띠로 두지 않는 이유**: 마우스로 가로 스크롤은
 * 불편하다. 미는 것은 손가락이 있는 화면에서만 값을 한다.
 *
 * 중간에 '두 칸 격자'를 한 단계 두었다가 뺐다. 실측 561px 에서 한 띠가
 * 10장 × 2칸 = 5줄이 되어 쪽 높이가 12,555 → 18,556px 으로 뛰었다.
 * 소제목을 붙인 이유가 덜 긁게 하려는 것인데 그 자리에서만 두 배로
 * 긁게 된다. 720px 까지 띠로 두면 그 폭에서도 2.1장이 보인다.
 */
.staysec + .staysec { margin-top: 26px; }
/* 이 띠가 무엇으로 고른 것인지 한 줄. 소제목만 있으면 '값도 후기도
   괜찮은 곳'이 우리가 눈으로 고른 것처럼 읽힌다 — 실제로는 전부
   숫자로 자른 것이라 그 잣대를 밝힌다(build._stay_lanes). */
.lane-note { margin: 3px 0 0; color: var(--ink-2); font-size: .84rem; line-height: 1.5; }

.staylane {
  display: grid; gap: 12px; margin-top: 12px;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
}
@media (max-width: 720px) {
  /* '지금 가장 싸게' 줄(.rail)의 미는 방식을 **그대로** 쓴다. 화면마다
     미는 방식이 다르면 같은 사이트로 안 읽힌다(.railset 위 주석과 같은
     규칙이다). .rail 을 고치지 않고 같은 선언을 여기 다시 적는 이유는
     .rail 이 홈에서 늘 가로인 반면 이것은 폰에서만 가로이기 때문이다 —
     한 클래스에 두 성격을 넣으면 홈을 건드리게 된다.

     `grid-template-columns: none` 이 **꼭 있어야 한다.** 위 규칙이
     남겨 놓은 명시적 열(auto-fill)이 살아 있으면 앞쪽 몇 장만 그 열에
     들어가고 나머지가 암시적 열로 흘러서, 띠가 격자 옆에 붙은 꼴이 된다.

     칸 너비 `min(100% - 60px, 320px)`:
       · 100% 는 이 띠의 안쪽 폭이다. 60 = 걸치는 48 + 사이 틈 12 이라
         **폰 폭에서 옆 카드가 정확히 48px 걸친다**(실측 320·360·390px
         에서 전부 48). 그 걸침이 "옆에 더 있다"는 유일한 신호라 폭을
         따라 변하면 안 된다.
       · 320px 상한이 없으면 720px 화면에서 한 장이 632px 이 되고,
         사진이 1:1 이라 그만큼 세로로도 커진다. 상한을 두면 그 폭에서는
         2.1장이 보이는데, 손가락으로 미는 화면이라 그래도 읽힌다. */
  .staylane {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(100% - 60px, 320px);
    gap: 12px; padding-bottom: 8px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: thin; overscroll-behavior-x: contain;
  }
  /* 손을 떼면 카드가 칸에 딱 맞게 선다. .rail > li 와 같은 자리다. */
  .staylane > .card { scroll-snap-align: start; }
}
/* mandatory 는 손을 뗀 뒤 브라우저가 화면을 카드 자리까지 **끌어당긴다.**
   그 끌림을 불편해하는 사람이 있어서, 줄여 달라고 한 기기에서는
   proximity 로 낮춘다 — 가까이 놓으면 맞춰 주고 아니면 놔둔다.
   띠를 없애지는 않는다. 미는 것 자체는 움직임이 아니라 조작이다. */
@media (prefers-reduced-motion: reduce) {
  .staylane { scroll-snap-type: x proximity; }
}

/* ── 네이버 여행 커넥트 패키지 자리 ──────────────────────────────────
 *
 * 우리 상품 카드(.card)와 **일부러 다르게** 생겼다. 같은 틀로 그리면
 * 같은 잣대로 잰 것처럼 보이는데, 이 상품들에는 후기도 값 이력도 없다.
 * 판정 배지가 붙는 자리가 아니라는 것이 눈으로 먼저 보여야 한다.
 *
 * 좁은 화면에서는 옆으로 미는 줄이다(.rail 과 같은 방식). 이 자리는
 * 그 화면의 주인공이 아니라 "이런 길도 있다" 라서, 세로로 쌓으면
 * 아래쪽 내용을 통째로 밀어낸다. 720px 은 이 저장소가 이미 '좁은
 * 화면'이라고 부르는 선이다(.grid 가 두 칸으로 접히는 자리). */
.pkgs {
  list-style: none; margin: 14px 0 0; padding: 0 0 6px;
  display: grid; grid-auto-flow: column; grid-auto-columns: 168px; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.pkgs > li { scroll-snap-align: start; }
.pkg { position: relative; display: flex; flex-direction: column; }
/* **거르개로 덜어낸 것.** `display: flex` 가 브라우저의 `[hidden]`
   (display:none)을 이겨서, 거르개가 "154개 보는 중"이라고 적어 놓고도
   943개가 그대로 보였다(운영자 지적 2026-09-10). `.card[hidden]`·
   `.az[hidden]` 과 같은 함정이다 — display 를 준 요소에는 반드시 이 줄이
   같이 있어야 한다. */
.pkg[hidden] { display: none; }
/* 1:1 로 못 박는다. 카드와 같은 이유이고, 무엇보다 네이버 CDN 은 정사각
   말고는 줄여 주지 않는다(f320_320 이 천장, 340 이상은 404). */
.pkg-img {
  width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover;
  background: var(--line); border-radius: var(--card-r, 14px); display: block;
}
/* 사진이 죽었을 때(상품이 내려가면 그렇게 된다) 빈 판이 남는다.
   깨진 아이콘보다 낫다 — 그 자리가 일부러 그런 것처럼 보인다. */
.pkg-noimg { background: linear-gradient(135deg, #cfe4f7, #eaf3fb); }
.pkg-body { padding: 8px 2px 0; display: flex; flex-direction: column; gap: 3px; }
.pkg-name {
  margin: 0; font-size: .88rem; font-weight: 700; line-height: 1.38;
  letter-spacing: -.015em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pkg-link { color: inherit; text-decoration: none; }
/* 카드 전체가 눌린다. _card.html 과 같은 방식이라 낭독기에는 링크
   하나로 들린다. */
.pkg-link::after { content: ""; position: absolute; inset: 0; }
.pkg-link:hover { text-decoration: underline; }
.pkg-meta {
  margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px;
  font-size: .82rem;
}
.pkg-days {
  font-size: .72rem; font-weight: 700; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px;
}
.pkg-price { font-weight: 800; color: var(--brand-text); }
.pkg-price .won { font-weight: 600; font-size: .84em; margin-left: 1px; }
.pkg-was { color: var(--ink-3); text-decoration: line-through; font-size: .76rem; }
.pkg-count { font-size: .8rem; color: var(--ink-3); font-weight: 700; }

/* ── 카드의 [특가확인] 단추 ──
 *
 * 운영자 요청(2026-09-11): "사진을 클릭하든 '특가확인' 버튼을 눌러서
 * 마이리얼트립으로 가는걸 원한거야."
 *
 * 카드 전체는 이미 눌린다(`.pkg-link::after` 가 카드를 덮는다). 없던 것은
 * 기능이 아니라 **눌린다는 표시**였다.
 *
 * **다만 높이를 조심해야 한다.** 이 사이트는 예약 단추를 한 번 없앤 적이
 * 있다 — _card.html 머리말: "예약 버튼 42px → 없앤다" (폰에서 카드가
 * 597px 이라 한 화면에 2.8장밖에 안 들어간다는 지적 때문). 그래서 그
 * 크기로 되돌리지 않는다: 글자 .78rem · 패딩 6px 로 **26px**쯤이고,
 * 값 줄과 붙여서 한 덩어리로 읽히게 둔다.
 *
 * `z-index` 가 없으면 위의 덮는 층에 깔려서 제 hover 도 안 뜬다.
 * 가는 곳은 카드 링크와 같은 주소다. */
/* 단추를 **카드 맨 아래에 붙인다.** 카드 높이는 한 줄 안에서 제일 높은
   것에 맞춰 늘어나는데(격자라 stretch), 이름이 두 줄인 카드와 한 줄인
   카드가 섞이면 단추가 들쭉날쭉 선다 — 여섯 장 띠에서 눈에 띈다.
   `margin-top: auto` 가 남는 높이를 다 먹으므로 위 간격은 padding 으로
   준다(auto 가 margin 을 덮어쓴다). */
.pkg-body { flex: 1; }
.pkg-act { margin-top: auto; padding-top: 6px; position: relative; z-index: 1; }
/* 예약으로 데려가는 단추.
 *
 * **높이를 44px 로 잡는다.** 처음에 32px 로 뒀다 — 예전에 이 사이트는
 * 42px 예약 단추를 없앤 적이 있어서(카드가 597px 이라 폰에서 너무 길다는
 * 지적) 작게 두는 것이 안전하다고 봤다. 그 판단이 틀렸다:
 *
 *   · 손가락 기준은 44px 이고, 그보다 작으면 못 누르는 게 아니라
 *     **옆엣것이 눌린다**(src/web/mobile.py 의 TOUCH_MIN 주석).
 *   · 폰 검사가 못 잡았던 이유는 /onsen/ 이 표본에 없었기 때문이다.
 *     넣자마자 360px 에서 29px 로 잡혔다(2026-09-11).
 *   · 597px 이 문제였던 것은 단추 때문이 아니었다. 지금 카드는 334px 이라
 *     12px 을 더 써도 그때의 절반이다.
 *
 * 글자 크기는 그대로 두고 min-height 로만 채운다 — 띠에서는 카드가
 * 168px 이라 글자를 키우면 단추가 글자보다 넓어 보인다(아래 규칙). */
.pkg-go {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; text-decoration: none;
  padding: 6px 10px; border-radius: 8px;
  background: var(--brand); color: var(--brand-ink);
  font-size: .78rem; font-weight: 800; letter-spacing: -.02em;
}
.pkg-go:hover { filter: brightness(.94); }
/* 옆으로 미는 띠(도시 화면의 `.pkgs`)에서는 카드가 168px 이라 단추가
   글자보다 넓어 보인다. 거기서는 조금 줄인다. */
.pkgs:not(.pkgs-wide) .pkg-go { padding: 5px 8px; font-size: .74rem; }

/* ── 읽는 자리의 말머리 목록 ──
 * 온천 쪽의 팁·노하우처럼 **문단으로 쓰기엔 항목이 갈리는 것**에 쓴다.
 * 운영자 요청대로 블로그·칼럼처럼 읽히게 두되, 글머리표가 화면을 채우는
 * 장식이 되지 않게 항목 사이를 넉넉히 띄운다. */
.col-list { margin: 10px 0 0; padding-left: 1.15em; }
.col-list li { margin-top: 7px; line-height: 1.65; }
.col-list li::marker { color: var(--brand-text); }
.col-list b { font-weight: 800; }

/* ── 패키지만 모은 쪽(/packages/) ──
 *
 * 도시 화면의 `.pkgs` 는 옆으로 미는 띠다(그 자리에 열 개쯤 놓기 위한 것).
 * 이 쪽은 943개를 늘어놓는 곳이라 **접히는 격자**여야 한다. 옆으로 미는
 * 띠로 두면 943개를 한 줄로 밀어야 한다.
 *
 * 칸 폭 168px 은 띠에서 정한 값이다. 격자에서는 auto-fill 로 화면에
 * 맞춰 늘린다 — 폰 390px 에서 두 칸, PC 1,120px 에서 여섯 칸이 된다. */
.pkgs-wide {
  grid-auto-flow: row; grid-auto-columns: auto;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px 12px; overflow-x: visible; scroll-snap-type: none;
}
/* 어느 도시 것인지. 도시 화면에서는 이미 아는 것이라 없었지만, 여기는
   97개 도시가 섞여 있어서 이게 없으면 무엇을 보고 있는지 알 수 없다. */
.pkg-where {
  margin: 0; font-size: .76rem; font-weight: 700; color: var(--accent);
}
/* 규정: 대가성 문구는 목록보다 위, 접기 밖, 스크롤 없이 보이는 자리에. */
.pkg-disc-top { margin-top: 10px; }
@media (min-width: 900px) {
  .pkgpage .pkg-name { font-size: .92rem; }
  .pkgpage .pkg-meta { font-size: .88rem; }
  .pkgpage .pkg-where { font-size: .8rem; }
}
.pkg-note { margin: 4px 0 0; color: var(--ink-2); font-size: .9rem; }
/* 값 판정이 왜 없는지와 대가성 문구. 둘 다 접으면 안 된다 — 네이버
   가이드가 "스크롤 없이 바로 보이는 위치"를 요구한다. */
.pkg-why { margin-top: 10px; }
.pkg-disc { margin-top: 4px; }

@media (min-width: 720px) {
  /* 넓은 화면에서는 밀 이유가 없다. 다 보인다. */
  .pkgs {
    grid-auto-flow: row; grid-auto-columns: auto;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    overflow-x: visible; scroll-snap-type: none;
  }
}

:root[data-theme="dark"] .pkg-noimg { background: linear-gradient(135deg, #2b3d52, #1e2a38); }
/* 값이 다를 수 있다는 안내. 앞 두 줄보다 한 단계 작게 둔다 — 읽어야
   하는 것이지만 카드보다 먼저 눈에 들어오면 안 된다. */
.pkg-vary { margin-top: 4px; font-size: .78rem; }

/* ── 패키지 쪽의 상황별 자리 ──
 *
 * 운영자 지적(2026-09-10): "전체 상품이 아무런 분류없이 나열되고 있다.
 * 홈화면처럼 섹션이 나눠져야 한다." 거르개는 조건을 이미 정한 사람의
 * 도구라, 아직 정하지 못한 사람에게는 골라 놓은 묶음이 필요하다.
 *
 * 소제목을 h3 로 둔 이유. 이 자리들은 "어떤 여행을 찾으세요?"(h2) 아래에
 * 딸린 갈래라, h2 를 일곱 개 세우면 제목 구조가 평평해진다 — 검색엔진이
 * 읽는 것도 그 구조다. */
.pick-title {
  margin: 0; font-size: clamp(1.02rem, .95rem + .4vw, 1.24rem);
  font-weight: 900; letter-spacing: -.035em;
}
/* 개수는 제목 안에 있지만 제목만큼 크지 않아야 한다. 훑을 때 눈이 먼저
   잡는 것은 낱말이고, 숫자는 그 낱말을 고른 뒤에 읽는다. */
.pick-n { font-size: .8em; font-weight: 800; color: var(--brand-text); }
/* 자리로 건너뛰는 알약 줄. 폰에서 일곱 자리를 스크롤로 지나가게 두면
   아래에 무엇이 있는지 모른 채 지나친다. */

/* ══════════════════════════════════════════════════════════════════
   동선 직접 짜기 (/{도시}/course/map/)

   이 화면은 사이트의 다른 곳과 성질이 다르다. 다른 페이지는 **읽는** 것이고
   여기는 **쓰는** 것이다 — 담고, 순서를 바꾸고, 수단을 갈아 본다. 그래서
   누를 것이 크고, 지금 어떤 상태인지가 눈에 보여야 한다.

   글자 크기를 다른 데보다 한 급 키웠다. 운영자 지적(2026-09-09):
   "다크모드에서는 글자도 잘 안보여. css, 불편하고 안이쁘고 글자 크기도
   너무 작아." 여기는 손으로 만지는 화면이라 특히 그렇다.
   ══════════════════════════════════════════════════════════════════ */

/* ── 도시 지도 ──
   세계지도와 달리 해안선 폴리곤이 없다(도시 하나는 그릴 해안선이 없다).
   그래서 타일이 안 오면 빈 바탕만 남는데, 그 바탕을 지도 색으로 둔다. */
.citymap-svg { background: #eef3f7; }
.citymap .atlas { min-height: 260px; }
@media (max-width: 760px) {
  .citymap .atlas { max-height: 52vh; }
}

/* ── PC 에서 지도가 너무 컸다 ──
 *
 * 가로세로비가 3:2 로 고정(citymap.Frame)이라 폭이 곧 높이다. 칸을 그대로
 * 쓰면 1,120 - 32 = 1,088px 폭 → **높이 725px**. 1,280×800 화면에서 지도
 * 하나가 첫 화면을 통째로 먹는다.
 *
 * max-height 로 누르면 안 된다 — svg 는 width:100% 라 폭이 그대로 남고,
 * 그림만 작아져 좌우에 빈 바다가 생긴다. **칸 폭을 줄여야** 비율이 유지된
 * 채로 작아진다. 728px 폭 → 485px 높이.
 *
 * 이 칸만 줄인다(아래 명소 목록은 두 칸으로 넓게 쓴다). 담은 동선·환율·
 * 안내가 지도와 같은 폭으로 서서 한 덩이로 읽히는 부수 효과도 있다. */
@media (min-width: 900px) {
  .band-map .band-in { max-width: 760px; }
}

/* "지도상의 점들을 눌러서 나만의 코스를 짜보세요" / "아래 여행지를 선택해서
   나만의 코스를 만들어보세요."
   조작법 한 줄이다. 제목(h1·h2)만큼 크면 안 되고 곁말(.note)만큼 작으면
   안 읽힌다 — 그 사이를 쓴다. */
.map-lead, .list-lead {
  margin: 0 0 12px; font-size: .98rem; font-weight: 700; color: var(--ink-2);
}
.list-lead { margin-top: 14px; }
@media (min-width: 900px) {
  .map-lead, .list-lead { font-size: 1.05rem; }
}

/* 지도 아래 곁말 두 줄(환율·점 설명). 오른쪽으로 몬다 — 지도를 설명하는
   말이라 본문처럼 왼쪽에서 시작하면 다음 문단의 첫 줄로 읽힌다. */
.map-side { text-align: right; }
.map-side .fx-line { margin-left: auto; text-align: left; }
.map-side .map-note { margin-top: 8px; }

/* 점. 세계지도의 점보다 크다 — 저기서는 보는 것이고 여기서는 누르는 것이다. */
.citymap-svg .pin { cursor: pointer; }
.citymap-svg .pin-hit { fill: transparent; r: var(--hit, 22px); }
.citymap-svg .pin-dot {
  r: var(--dot, 9px); fill: #fff; stroke: var(--accent); stroke-width: 3;
  vector-effect: non-scaling-stroke; transition: r .12s ease;
}
.citymap-svg .pin:hover .pin-dot,
.citymap-svg .pin:focus .pin-dot { r: calc(var(--dot, 9px) * 1.35); }
.citymap-svg .pin:focus { outline: none; }
.citymap-svg .pin:focus-visible .pin-dot { stroke: var(--brand); }
/* ── 담은 곳: 물방울 마커 ──
 *
 * 운영자 시안(9월신기능및홍보/샘플시안.png)의 그것이다. 처음에는 큰 원에
 * 번호를 넣었는데, 원은 **어디를 가리키는지 말하지 않는다** — 지도 위의
 * 표시는 한 지점을 찍는 것이라 뾰족한 끝이 있어야 그 지점이 어디인지
 * 읽힌다. 동선 선도 그 끝에서 이어진다.
 *
 * 크기는 배율(--pin)로 잡는다. 길(path)이라 반지름 하나로 줄일 수 없어서
 * 그림을 그대로 두고 scale 을 준다. `transform-origin: 0 0` 이 있어야
 * **끝이 제자리에 남는다** — 없으면 그림의 가운데를 기준으로 커져서
 * 마커가 명소에서 위로 떠오른다. */
.citymap-svg .pin-drop {
  display: none;
  fill: var(--brand); stroke: #fff; stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  transform: scale(var(--pin, 1));
  transform-origin: 0 0;
  transition: transform .12s ease;
}
.citymap-svg .pin.picked .pin-drop { display: block; }
.citymap-svg .pin.picked:hover .pin-drop,
.citymap-svg .pin.picked:focus .pin-drop {
  transform: scale(calc(var(--pin, 1) * 1.12));
}
/* 담기면 동그라미는 물러난다. 둘이 같이 보이면 한 곳에 표시가 둘이다. */
.citymap-svg .pin.picked .pin-dot { display: none; }

.citymap-svg .pin-no {
  text-anchor: middle; dominant-baseline: middle; pointer-events: none;
  /* 점 크기를 따라간다. 11px 로 박아 두었더니 확대·축소나 폰에서 번호가
     점보다 커지거나 안 보이게 작아졌다. */
  font-size: calc(var(--dot, 9px) * 1.9); font-weight: 800; fill: #fff;
  /* 물방울의 **머리 가운데**로 올린다(citymap.DROP_HEAD_Y = -24).
     안 올리면 번호가 뾰족한 끝에 걸터앉는다. */
  transform: translateY(calc(-24px * var(--pin, 1)));
}

/* ── 동선 선 ──
 *
 * 점 아래, 밑그림 위에 깔린다(coursemap.js 가 그렇게 넣는다).
 *
 * 예전에는 한 겹의 가느다란 점선(stroke-width 3 · dasharray 7 5)이었다.
 * 운영자 지적(2026-09-10): "빨간색 매우 얇은 점선"이라 있는지 없는지
 * 모르겠다. 지도 앱의 경로선처럼 **흰 테를 깔고 굵은 실선**을 얹는다 —
 * 밑그림의 큰길(노란 선)이나 물(파란 면) 위에서도 그래야 읽힌다.
 *
 * 굵기는 vector-effect 로 화면 px 에 고정한다. 안 하면 확대할 때 선이
 * 도로만큼 굵어진다.
 */
.route-case, .route-line {
  fill: none; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke; pointer-events: none;
}
.route-case { stroke: #fff; stroke-width: 10; opacity: .9; }
.route-line { stroke: var(--accent); stroke-width: 5.5; }

/* ── 담은 동선 ── */
.myroute {
  margin-top: 14px; padding: 14px 16px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
}
.myroute-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.myroute-head h2 { margin: 0; font-size: 1.06rem; }
.route-empty { margin: 0; color: var(--ink-2); font-size: .92rem; }

/* 이동 수단 고르개. 라디오처럼 쓰지만 단추다 — 좁은 화면에서 네이티브
   라디오는 손가락으로 못 맞힌다. */
.mode-pick { display: flex; gap: 4px; }
.mode {
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  background: var(--card); color: var(--ink-2);
  border: 1px solid var(--line); font-size: .9rem; font-weight: 700;
}
.mode:hover { border-color: var(--accent); color: var(--accent); }
.mode.on {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

.route-list { list-style: none; margin: 0; padding: 0; }
.route-item {
  display: grid; align-items: center; gap: 4px 10px;
  grid-template-columns: auto 1fr auto;
  padding: 9px 0; border-top: 1px solid var(--line);
}
.route-item:first-child { border-top: none; }
.route-no {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  font-size: .82rem; font-variant-numeric: tabular-nums;
}
.route-name { font-weight: 700; font-size: 1rem; }
/* 앞자리에서 여기까지 걸리는 시간. **줄을 따로 쓴다** — 이름 옆에 붙이면
   긴 이름에서 밀려나고, 이 숫자가 이 화면의 요점이다. */
.route-gap {
  grid-column: 2; font-size: .88rem; color: var(--accent); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.route-gap.unknown { color: var(--ink-2); font-weight: 600; }
.route-acts-in { grid-row: 1 / span 2; grid-column: 3; display: flex; gap: 3px; }
.route-btn {
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  background: var(--card); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 9px;
  font-size: .9rem; line-height: 1;
}
.route-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.route-btn:disabled { opacity: .32; cursor: default; }

.route-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.route-total {
  margin: 0 0 10px; font-weight: 800; font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
/* 걷기에 먼 구간이 있거나 하루에 너무 많이 담았을 때. 막지 않고 말만 한다 —
   이틀치를 미리 짜 보는 사람도 있다. */
.route-total.warn { color: var(--brand); }
/* 가운데로 모은다. 왼쪽에 붙여 두었더니 위의 '이동만 8분' 과도 어긋나고
   아래 출처 한 줄과도 어긋나 세 줄이 다 따로 놀았다. */
.route-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
/* 출처 한 줄. 단추 바닥에 거의 붙어 있어서 단추의 설명처럼 읽혔다. */
.route-foot .note { margin-top: 15px; text-align: center; }

/* ── 테두리만 있는 단추 ──
 *
 * **기본 모양이 없었다.** `.nextway .btn-plain` 과 `.btn-plain.ghost` 만
 * 있어서, 그 둘 밖에서 쓰면(동선 화면의 '짧은 순서로 바꾸기'·'비우기')
 * 브라우저 기본 단추가 그대로 나왔다 — 회색 네모에 13px 글자다.
 * 운영자 지적("우리 사이트의 CSS랑 맞질 않는다")의 원인이 이것이다.
 *
 * .btn 과 같은 크기·굵기를 쓰되 색만 뺀다. 한 화면에서 우리가 파는 것을
 * 누르는 단추(.btn)와 화면을 조작하는 단추가 같은 무게를 가지면 안 된다. */
.btn-plain {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 11px 20px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-family: inherit; font-size: .95rem; font-weight: 800;
  text-decoration: none; cursor: pointer;
}
.btn-plain:hover { border-color: var(--accent); color: var(--accent); }
.btn-plain:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.btn-plain.ghost { background: transparent; color: var(--ink-2); font-weight: 700; }
.btn-plain.ghost:hover { color: var(--accent); }

/* ── PC 에서 이 화면만 글자를 올린다 ──
 *
 * 운영자 지적: "PC 기준 글자 크기가 전반적으로 작다. 모바일은 괜찮음."
 * 이 화면은 다른 화면과 사정이 다르다 — 카드가 아니라 **목록과 숫자를
 * 읽는 화면**이고, 명소 목록이 두 칸으로 갈리면서 한 칸 폭이 좁아져
 * 원래 크기가 더 작아 보인다. 그래서 폭이 넓을 때만 올린다(모바일은
 * 한 칸이라 지금 크기가 맞다).
 *
 * 페이지에만 걸기 위해 body 에 class 를 준다(coursemap.html 의 bodyclass).
 * 전역으로 올리면 사이트 1,550쪽의 균형이 같이 움직인다. */
@media (min-width: 900px) {
  .coursemap .myroute-head h2 { font-size: 1.16rem; }
  .coursemap .mode { font-size: .95rem; padding: 8px 15px; }
  .coursemap .route-empty { font-size: 1rem; }
  .coursemap .route-name { font-size: 1.06rem; }
  .coursemap .route-gap { font-size: .94rem; }
  .coursemap .route-total { font-size: 1.1rem; }
  .coursemap .note { font-size: .88rem; }
  .coursemap .count-note { font-size: .94rem; }
  .coursemap .fx-line { font-size: .95rem; }
  .coursemap .fx-tag,
  .coursemap .fx-day { font-size: .84rem; }
  .coursemap .poi-name { font-size: 1.07rem; }
  .coursemap .poi-desc { font-size: .93rem; }
  .coursemap .poi-meta span { font-size: .87rem; }
  .coursemap .poi-kind { font-size: .78rem; }
  .coursemap .ours-chip { font-size: .83rem; }
  .coursemap .grid-note { font-size: .88rem; }
}

/* ── 가 볼 만한 곳 목록 ──
   왼쪽 작은 사진, 오른쪽 이름과 설명. 운영자가 시안을 보고 정한 배치다:
   "미니썸네일이 왼쪽에 오른쪽은 이름이나 간단한 설명문구"

   **이름이 `.poi*` 인 이유.** 이 묶음은 한때 `.spot*` 였다. 그런데 /today/ 의
   도시 카드가 이미 `.spot`·`.spot-body`·`.spot-meta` 를 쓰고 있어서, 파일에서
   나중에 적힌 이쪽이 그 화면을 덮어썼다 — /today/ 카드가 위아래로 쌓인 카드가
   아니라 **왼쪽 92px 사진 + 오른쪽 글**의 2열 격자가 되고, nowrap 인 상황
   칩이 카드 밖으로 삐져나왔다(운영자 지적 2026-09-10). 위 1135줄에 "`.spot*`
   로 쓰면 안 된다"고 적어 두고도 같은 데 또 걸린 것이라 이름을 바꿨다.
   **한 이름은 한 화면만 쓴다** — 이 규칙은
   tests/test_web_css_names.py 가 지킨다. */
.poi-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 900px) {
  .poi-list { grid-template-columns: 1fr 1fr; }
}
.poi {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 12px;
  align-items: start; padding: 11px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r);
}
.poi.picked { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.poi-img {
  width: 92px; height: 92px; object-fit: cover; border-radius: 10px;
  background: var(--line);
}
.poi-body { min-width: 0; }
.poi-name { margin: 0 0 3px; font-weight: 800; font-size: 1rem; line-height: 1.35; }
.poi-kind {
  font-size: .74rem; font-weight: 700; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px;
  white-space: nowrap; vertical-align: 2px;
}
.poi-desc {
  margin: 0 0 5px; font-size: .88rem; line-height: 1.5; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.poi-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.poi-meta span { font-size: .82rem; font-weight: 700; color: var(--ink-2); }
/* 가까운 역은 이 화면에서 제일 쓸모 있는 한 줄이다 — 대중교통 시간은
   무료로 구할 데가 없어서, 이것이 그 자리를 대신한다. 그래서 색을 준다.
   **선택자에 부모를 붙인다.** `.poi-station` 만 쓰면 위 `.poi-meta span`
   (클래스1+요소1)이 더 세서 색이 안 먹는다 — 실제로 그래서 안 먹었다. */
.poi-meta .poi-station { color: var(--accent); }
.poi-ours { margin: 7px 0 0; display: flex; flex-wrap: wrap; gap: 5px; }
/* 명소에 붙은 우리 상품. 글자 칩이던 것을 사진 카드로(2026-10-03, 운영자 전역
   규칙: 상품 제휴 링크를 글자로만 걸지 않는다). 사진 40px · 이름 · 가격 · [예약]. */
.ours-chip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; width: 100%; max-width: 100%;
  padding: 6px 8px 6px 6px; border-radius: 12px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line);
  font-size: .8rem; text-decoration: none;
}
.ours-chip img { flex: none; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--paper); }
.ours-chip-name { flex: 1 1 110px; min-width: 0; font-weight: 700; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.ours-chip b { flex: none; margin-left: auto; color: var(--sale); font-weight: 800; white-space: nowrap; }
.ours-chip-go { flex: none; padding: 5px 10px; border-radius: 999px; background: var(--brand); color: #fff; font-weight: 800; font-size: .75rem; white-space: nowrap; }
.ours-chip:hover { border-color: var(--brand); }
.poi-dir {
  display: inline-flex; align-items: center; min-height: 32px; margin: 6px 0 0; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  color: var(--accent); font-size: .8rem; font-weight: 800; text-decoration: none;
}
.poi-dir:hover { border-color: var(--accent); }
.poi-add {
  align-self: center; min-width: 60px; padding: 9px 12px; cursor: pointer;
  background: var(--card); color: var(--accent);
  border: 1px solid var(--accent); border-radius: 10px;
  font-size: .86rem; font-weight: 800; white-space: nowrap;
}
.poi-add:hover { background: rgba(18,86,160,.09); }
.poi-add.on {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
@media (max-width: 520px) {
  .poi { grid-template-columns: 74px 1fr; }
  .poi-img { width: 74px; height: 74px; }
  .poi-add { grid-column: 1 / -1; width: 100%; }
}

/* 어두운 화면. 칩 배경이 rgba 고정값이라 어두운 바탕에서 거의 안 보인다 —
   같은 색을 밝은 쪽으로 다시 잡는다. 지도 바탕도 조금 눌러 준다(타일이
   오기 전 한순간 흰 사각형이 번쩍이는 것을 막는다). */
:root[data-theme="dark"] .ours-chip {
  background: rgba(125,178,238,.13); border-color: rgba(125,178,238,.3);
}
:root[data-theme="dark"] .poi-add:hover { background: rgba(125,178,238,.14); }
:root[data-theme="dark"] .citymap-svg { background: #dde5ec; }

/* 현지 돈 감 잡기 한 줄. 상품 가격 옆이 아니라 **화면에 한 번만** 나온다 —
   가격마다 붙이면 근거 없는 숫자가 카드 수만큼 늘어난다(src/collect/fx.py).

   한 줄이지만 조각은 셋이다 — 무엇에 쓰는 줄인지(.fx-tag), 값(.fx-say),
   언제 기준인지(.fx-day). 처음에는 알약(border-radius:999px) 하나에 문장을
   통째로 넣었는데, 폰에서 글이 두 줄로 접히면 둥근 끝만 과장되게 커져
   모양이 깨졌다. 조각을 나눠 두면 좁을 때 세로로 접히고 넓을 때 한 줄로
   늘어선다 — 화면 폭마다 따로 손볼 것이 없다. */
.fx-line {
  margin: 14px 0 0; padding: 11px 15px; border-radius: 14px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px;
  /* 내용만큼만 차지한다. 칸 폭(1,120px)을 다 늘려 쓰게 두었더니 가운데가
     텅 비고 기준일이 900px 저쪽에 떨어져 남았다 — 알림 띠처럼 보였다.
     좁은 화면에서는 max-width 가 걸려 알아서 접힌다. */
  width: fit-content; max-width: 100%;
  background: var(--card); border: 1px solid var(--line);
  /* 왼쪽 색 띠. 우리가 값을 재서 내놓는 숫자가 아니라 '가늠하라고 얹은
     참고 값'이라는 표시다 — .offsite 가 쓰는 것과 같은 장치다. */
  border-left: 4px solid var(--accent);
  font-size: .9rem; color: var(--ink-2); line-height: 1.5;
}
.band.alt .fx-line { background: var(--paper); }
.fx-tag { flex: 0 0 auto; font-size: .78rem; font-weight: 800; color: var(--ink-3); }
.fx-line b {
  color: var(--ink); font-weight: 800; font-size: 1.04rem;
  font-variant-numeric: tabular-nums;
}
/* 기준일은 값에서 떼어 놓는다. 그냥 옆에 붙이면 숫자가 셋으로 읽힌다
   ("100엔 · 872원 · 9월 9일"). 가느다란 선 하나로 가른다. */
.fx-day {
  flex: 0 0 auto; font-size: .78rem; color: var(--ink-3);
  padding-left: 10px; border-left: 1px solid var(--line);
}
/* 한 줄짜리를 위해 칸을 하나 쓰는 것이라 위아래를 줄인다. */
.fx-band { padding: 16px 0 0; }
@media (max-width: 560px) {
  /* 폰에서는 기준일이 제 줄로 접힌다. 줄 맨 앞에 세로선이 남으면 뭘
     가르는 선인지 알 수 없으니 그때는 뗀다. */
  .fx-day { padding-left: 0; border-left: 0; }
}

/* ── 해외 유심·eSIM (/sim/, /sim/{나라}/) — 2026-09-27 ──
   앱의 나라 격자·일수 칩·요금제 카드를 옮긴 것. 카드는 <details> 라 스크립트가
   없어도 펼쳐진다. */
.sim-grid { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sim-grid a { display: flex; flex-direction: column; gap: 4px; padding: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  color: inherit; text-decoration: none; min-height: 44px; }
.sim-grid img { width: 40px; height: 30px; border-radius: 4px; object-fit: cover; }
.sim-grid span { color: var(--ink-2); font-size: .85rem; }
.sim-days { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.sim-days .chip { min-height: 40px; min-width: 52px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink);
  font: inherit; font-weight: 700; cursor: pointer; }
.sim-days .chip.on { background: var(--ink); color: var(--card); border-color: var(--ink); }
.sim-cards { display: grid; gap: 10px; }
.sim-cards[hidden] { display: none; }
.sim-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.sim-card summary { list-style: none; cursor: pointer; padding: 14px 16px;
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; }
.sim-card summary::-webkit-details-marker { display: none; }
.sim-lb { font-weight: 800; font-size: 1.02rem; }
.sim-price { font-weight: 800; font-size: 1.1rem; color: var(--sale); white-space: nowrap; }
.sim-price .won { font-size: .8em; margin-left: 1px; }
.sim-meta { grid-column: 1 / -1; color: var(--ink-2); font-size: .84rem; }
.sim-offers { list-style: none; margin: 0; padding: 0 12px 12px; display: grid; gap: 10px; }
.sim-offers li { min-width: 0; }
/* 판매자 카드 (2026-10-03, 운영자: 글자 링크 말고 사진 카드·단추로).
   카드 한 장이 통째로 링크다. 사진 88px 정사각 + 이름 두 줄 + 가격·단추 한 줄. */
.sim-off {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: stretch;
  padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--card);
  color: var(--ink); text-decoration: none; box-shadow: var(--shadow);
  transition: border-color .15s ease, transform .15s ease;
}
.sim-off:hover { border-color: var(--brand); transform: translateY(-1px); }
.sim-off-img { width: 88px; height: 88px; border-radius: 10px; object-fit: cover; background: var(--paper); display: block; }
.sim-off-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sim-off-tag { align-self: flex-start; padding: 1px 7px; border-radius: 6px; background: var(--sale); color: #fff; font-size: .72rem; font-weight: 800; }
.sim-off-name {
  font-weight: 700; font-size: .92rem; line-height: 1.35; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sim-off-meta { color: var(--ink-3); font-size: .78rem; }
.sim-off-meta b { color: var(--ink-2); font-weight: 700; }
.sim-off-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sim-off-price { font-weight: 800; font-size: 1.08rem; color: var(--sale); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sim-off-price small { font-size: .78em; margin-left: 1px; }
.sim-off-go {
  margin-left: auto; display: inline-flex; align-items: center; gap: 3px; min-height: 36px; padding: 0 14px;
  border-radius: 999px; background: var(--brand); color: var(--brand-ink, #fff); font-weight: 800; font-size: .85rem; white-space: nowrap;
}
.sim-plain { padding: 0; }
.sim-sub { margin: 22px 0 6px; font-size: 1rem; }
.sim-notes { padding-left: 20px; color: var(--ink-2); display: grid; gap: 6px; }
.sim-kind .count { color: var(--ink-3); font-size: .85em; font-weight: 600; }

/* ── 테마여행 (/trips/, 홈 줄) — 앱 「테마로 떠나는 여행」·테마 화면과 같은 모양 (2026-09-27) ──
   카드 = 사진 위에 지역·이름 + [오늘의 특가 보기][가격 흐름]. 가격은 카드에 안 적는다
   (src/web/tripweb.py 머리말). 폰에서 두 단추가 한 줄에 안 들어가면 `.stack` 으로 두 줄
   (trips.html 스크립트가 그려 본 뒤 재서 붙인다 — 앱에서 폭만 보고 정했다가 잘렸다). */
.trw-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.trw-row::-webkit-scrollbar { display: none; }
.trw-tile { position: relative; flex: 0 0 150px; height: 196px; border-radius: 18px; overflow: hidden; scroll-snap-align: start; background: var(--line); color: #fff; text-decoration: none; }
.trw-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trw-tile-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.72)); }
.trw-tile-text { position: absolute; left: 12px; right: 10px; bottom: 12px; display: flex; flex-direction: column; }
.trw-tile-text b { font-size: 16px; font-weight: 800; letter-spacing: -.3px; }
.trw-tile-text small { font-size: 12px; opacity: .88; margin-top: 2px; }
@media (min-width: 900px) { .trw-tile { flex-basis: 200px; height: 250px; } }
.trw-home .note { margin: -4px 0 12px; color: var(--ink-2); }

.trw-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-top: 14px; padding-bottom: 2px; }
.trw-chips::-webkit-scrollbar { display: none; }
.trw-chips .chip { flex: none; }

.trw-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 720px) { .trw-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .trw-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trw-card { border-radius: 22px; overflow: hidden; background: var(--card); box-shadow: 0 8px 26px rgba(25, 31, 40, .12); content-visibility: auto; contain-intrinsic-size: auto 480px; }
.trw-card[hidden] { display: none; }
.trw-shot { position: relative; aspect-ratio: 4 / 5; background: var(--line); }
.trw-photo { position: absolute; inset: 0; display: block; }
.trw-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trw-drop { position: absolute; left: 12px; top: 12px; padding: 7px 12px; border-radius: 12px; background: #F04452; color: #fff; font-size: 14px; font-weight: 800; box-shadow: 0 4px 12px rgba(240, 68, 82, .35); }
/* 글자 막은 클릭을 통과시킨다 — 사진 어디를 눌러도 상품으로 */
.trw-over { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 8px; padding: 120px 16px 16px; background: linear-gradient(180deg, rgba(10,14,20,0) 0%, rgba(10,14,20,.55) 35%, rgba(10,14,20,.88) 100%); pointer-events: none; }
.trw-over a, .trw-over button { pointer-events: auto; }
.trw-place { font-size: 14px; font-weight: 700; color: #BFE3FF; }
.trw-name { margin: 0; font-size: 19px; line-height: 26px; font-weight: 800; color: #fff; letter-spacing: -.4px; text-shadow: 0 1px 3px rgba(0,0,0,.35); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.trw-pair { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 8px; align-items: stretch; container-type: inline-size; }
.trw-pair > * { min-width: 0; }
.trw-cta { display: flex; align-items: center; gap: 4px; padding: 12px 10px 12px 14px; border-radius: 14px; background: #F04452; color: #fff; text-decoration: none; box-shadow: 0 6px 18px rgba(240, 68, 82, .4); }
.trw-cta b { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 800; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trw-cta i { flex: none; font-style: normal; font-size: 22px; font-weight: 700; line-height: 1; }
.trw-graph { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 8px 8px 10px; border: 0; border-radius: 14px; background: #fff; color: #191F28; font: inherit; cursor: pointer; text-align: left; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.trw-graph-ico { flex: none; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; background: #FFF0F1; color: #F04452; }
.trw-graph-txt { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trw-see, .trw-more { display: none; }
.trw-cue { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #F2F4F6; color: #4E5968; transition: transform .25s ease; }
.trw-card.open .trw-cue { transform: rotate(180deg); }
.trw-graph.none { justify-content: center; font-size: 12.5px; font-weight: 700; color: var(--ink-3); cursor: default; }
@container (max-width: 330px) { .trw-graph-ico { display: none; } }
/* 두 줄: 위 [오늘의 특가 보기], 아래 [가격 흐름 보기 · 판정] — 글자는 잘리지 않고 줄을 바꾼다 */
.trw-list.stack .trw-pair { grid-template-columns: minmax(0, 1fr); }
.trw-list.stack .trw-cta b { white-space: normal; overflow: visible; line-height: 1.3; }
.trw-list.stack .trw-graph-ico { display: grid; }
.trw-list.stack .trw-see { display: inline; }
.trw-list.stack .trw-graph-txt { white-space: normal; overflow: visible; display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.trw-list.stack .trw-more { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
/* 가격 흐름 펼친 칸 */
.trw-body { padding: 14px; background: var(--card); border-top: 1px solid var(--line); }
.trw-area { display: block; width: 100%; height: 90px; }
.trw-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.trw-stats span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; border-radius: 12px; background: var(--paper); }
.trw-stats small { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.trw-stats b { font-size: 14px; font-weight: 800; color: var(--ink); }
.trw-foot { margin-top: 18px; }
/* 글자 막의 **모든** 자손이 클릭을 통과시키게(이름 줄 안쪽 글자가 클릭을 먹었다) — 단추·링크만 받는다 */
.trw-over, .trw-over * { pointer-events: none; }
.trw-over a, .trw-over a *, .trw-over button, .trw-over button * { pointer-events: auto; }

/* ── 글자 키움(안드로이드 130%)·좁은 폭(아이폰 사파리 확대 = 280~300px)에서 화면이 옆으로
   밀리던 것 (2026-09-27, 28쪽 × 4조건 중 26조합) ──
   원인은 하나다: **안에 든 글보다 좁아질 줄 모르는 칸.** 격자·flex 의 칸은 기본으로
   `min-width: auto`(= 글 폭)라 글자가 커지면 칸이 화면 밖으로 밀고 나간다. 그래서
   칸이 줄어들 수 있게 하고(min-width: 0 · minmax(0, …)), 긴 낱말은 칸 안에서 꺾는다.
   값(“221,100원”)은 여전히 한 덩어리 — 띄어쓰기에서만 꺾고(keep-all) 숫자 안은 안 꺾는다. */
.grid { grid-template-columns: repeat(auto-fill, minmax(min(196px, 100%), 1fr)); }
.grid > *, .card-body, .readout > * { min-width: 0; }
.card-body { overflow-wrap: anywhere; }
.readout { flex-wrap: wrap; }
/* 문장 속 굵은 값: 통째 nowrap 이면 글자 키움에서 문장이 화면을 민다. 띄어쓰기에서만 꺾는다 */
.lede b, .plan-total b, .count-note b, .plan-price { white-space: normal; word-break: keep-all; }
.lede { overflow-wrap: anywhere; }
/* 유심 판매자 줄 — 띄어쓰기 없는 긴 상품 이름 */
.sim-offers { grid-template-columns: minmax(0, 1fr); }
/* 아래 토스 띠: 글자가 커지면 두 줄로(높이는 최소값만 지킨다) */
.tossbar { height: auto; min-height: calc(56px + env(safe-area-inset-bottom, 0px)); padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; text-align: center; }
.tossbar > * { min-width: 0; }
/* 빠진 것 줄·패키지 값 줄·가까운 역 */
.gap > *, .pkg-meta > *, .poi-meta span { min-width: 0; overflow-wrap: anywhere; }
/* 달력 칸(5칸)과 달 칩 — 칸이 글보다 좁아질 수 있게 */
.months-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* 위 줄이 앞쪽의 폭별 칸 수(3칸·2칸)를 덮어 폰에서도 다섯 칸으로 찌그러졌다
   (2026-10-21 발견: 390px 에서 「27년」이 두 줄로 꺾임). 칸 수를 여기서 다시 준다.
   줄 채움 사진(mc-filler)은 그 칸 수에 필요한 만큼만 남긴다 — when.html 의 f3·f2. */
@media (max-width: 900px) {
  .months-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .months-grid .mc-filler:not(.f3) { display: none; }
}
@media (max-width: 560px) {
  .months-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .months-grid .mc-filler:not(.f2) { display: none; }
  .months-grid .mc-filler.f2 { display: block; }
}
.months-grid > *, .monthchips > * { min-width: 0; }
.monthchips { grid-template-columns: repeat(auto-fit, minmax(min(104px, 100%), 1fr)); }
.months-grid .mc-price, .monthchips .mc-price { white-space: normal; word-break: keep-all; }
/* 2차: 남은 다섯 조합 */
/* 달 칩 값 — 숫자는 붙인 채로, 좁으면 「원~」만 아랫줄로(keep-all 을 풀어 원 앞에서 꺾일 수 있게) */
.monthchips .mc-price, .months-grid .mc-price { white-space: normal; word-break: normal; }
/* 토스 띠 — 글자를 키우면 줄을 바꾸고, 그래도 남는 몇 px 은 띠 안에서 자른다(띠는 화면 폭 그대로) */
.tossbar { overflow: hidden; }
.tossbar > span:first-child { flex: 0 1 auto; }
/* 유심 요금제 카드 — 칸이 판매자 줄의 글보다 좁아질 수 있게 */
.sim-cards { grid-template-columns: minmax(0, 1fr); }
.sim-card, .sim-card summary > * { min-width: 0; }
.sim-card summary { grid-template-columns: minmax(0, 1fr) auto; }
/* 3차: 접힌 요금제 카드의 판매자 줄이 **안 보이는데도 폭을 잡아** 화면을 밀었다
   (크롬은 닫힌 details 안도 배치한다). 접혀 있으면 아예 그리지 않는다 */
.sim-card:not([open]) .sim-offers { display: none; }
/* 손가락 크기(44px) — 유심 일수 칩(40px)·가이드 만들기 단추(43px)가 모자랐다(mobile 검사) */
.sim-days .chip { min-height: 44px; }
.btn { min-height: 44px; }

/* ══ 가격변동 시트 (앱 PriceChartSheet 이식, 2026-10-21) ══
 *
 * 앱 「싸잼여행 투어특가」PriceChart.tsx + PriceChartSheet.tsx 를 바닐라 JS 로 이식.
 * JS: src/web/static/price-chart.js (자산 해시 붙음, 첫 클릭 시 동적 로드).
 * 색상 토큰은 :root 의 --brand·--good·--sale 와 맞춥니다.
 *
 * CSS [hidden] 함정:
 *   [hidden] 재정의가 없으면 display 속성이 설정된 요소가 hidden 을 무시합니다.
 *   관련 요소마다 [hidden] { display: none } 을 명시합니다 — 네 번 걸렸습니다.
 */

/* ─ [가격변동 확인] 단추 (카드 안) ─
   card-link::after 가 z-index:1 로 카드 전체를 덮으므로
   단추는 position:relative + z-index:2 가 있어야 클릭됩니다.
   card-intro 가 z-index:2 를 쓰는 것과 같은 패턴입니다. */
.prc-btn {
  /* 운영자 지시(2026-10-21): 후기 줄 아래, 카드 안 폭 100%. 진한 남색 단색
     바탕 + 흰 굵은 글자. 아이콘은 사이트의 행동색(주황)을 남색 위에서도
     또렷하게 조금 밝혀 쓴다 — 남색과 주황은 보색이라 서로를 살린다. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: #1d3557;
  color: #fff;
  font: inherit;
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  position: relative;
  z-index: 2;
  min-height: 44px;
  transition: background 0.15s;
}
.prc-btn:hover { background: #274774; }
.prc-btn:focus-visible { outline: 2px solid var(--brand, #F4511E); outline-offset: 2px; }
.prc-btn svg { flex-shrink: 0; color: #ff7a45; width: 16px; height: 16px; }
.prc-btn[hidden] { display: none; }

/* ─ 시트 바깥 래퍼 ─
   dialog 역할, 초기엔 hidden. prc-open 클래스가 붙어야 보입니다. */
.prc-wrap {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  /* 열리기 전·닫힌 뒤: 렌더는 하되 상호작용 불가 */
  pointer-events: none;
}
.prc-wrap[hidden] { display: none; }
/* pointer-events 는 열릴 때만 살립니다 */
.prc-wrap.prc-open { pointer-events: auto; }

/* ─ 배경막 ─ */
.prc-dim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.28s ease;
  z-index: 0;
}
.prc-open .prc-dim { background: rgba(0,0,0,0.45); }

/* ─ 시트 본체 ─ */
.prc-sheet {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 18px 18px 0 0;
  max-height: 90dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 처음엔 아래로 숨김 */
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.34,1.05,0.64,1);
}
.prc-open .prc-sheet { transform: translateY(0); }
@media (min-width: 640px) {
  /* 태블릿·데스크톱: 가운데 모달 */
  .prc-wrap {
    justify-content: center;
    align-items: center;
  }
  .prc-sheet {
    width: min(480px, 100%);
    max-height: 80dvh;
    border-radius: 18px;
    transform: scale(0.92) translateY(24px);
    opacity: 0;
    transition: transform 0.26s cubic-bezier(0.34,1.05,0.64,1), opacity 0.18s;
  }
  .prc-open .prc-sheet { transform: scale(1) translateY(0); opacity: 1; }
  .prc-dim { position: absolute; }
}
/* 다크모드는 prefers-color-scheme 이 아니라 [data-theme="dark"] 로만 켠다.
   (운영자 지시 2026-09-10: 기기 설정을 자동으로 따르면 안 된다) */
:root[data-theme="dark"] .prc-sheet { background: #1a1b1e; color: #e8eaed; }

/* ─ 패드 (안쪽 여백 블록) ─ */
.prc-pad {
  padding: 20px 20px 0;
}
.prc-pad + .prc-pad { padding-top: 0; }

/* ─ 상품 이름 ─ */
.prc-title {
  font-size: 0.85rem;
  color: var(--ink3, #68727F);
  margin: 0 0 6px;
  line-height: 1.4;
  /* 두 줄로 자릅니다 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ─ 현재 가격 행 ─ */
.prc-now {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.prc-now b {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.prc-now em {
  font-style: normal;
  font-size: 0.82rem;
  color: var(--ink3, #68727F);
}
.prc-now em.on {
  /* 오늘이 아닌 날 짚을 때 — 강조 */
  color: var(--brand, #F4511E);
  font-weight: 600;
}
.prc-now i {
  font-style: normal;
  font-size: 0.78rem;
  color: var(--ink3, #68727F);
  margin-left: auto;
}

/* ─ 차트 영역 ─ */
.prc-chart {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: visible;
  margin-bottom: 2px;
}
/* 점(dot) — SVG 밖에 절대 위치로 올려야 찌그러지지 않습니다.
   preserveAspectRatio="none" SVG 안에 원을 두면 타원이 됩니다. */
.pdot {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  display: block;
}
.pdot[hidden] { display: none; }

/* ─ 기록 없을 때 ─ */
.prc-nochart {
  padding: 28px 0;
  text-align: center;
}
.prc-nochart b { display: block; font-size: 0.92rem; margin-bottom: 6px; }
.prc-nochart p { font-size: 0.8rem; color: var(--ink3, #68727F); max-width: 260px; margin: 0 auto; line-height: 1.5; }

/* ─ 가로 축 (날짜 범위) ─ */
.prc-axis {
  display: flex;
  font-size: 0.72rem;
  color: var(--ink3, #68727F);
  margin-bottom: 8px;
  padding: 0 2px;
}
.prc-axis span {
  display: flex;
  justify-content: space-between;
}
.prc-axis span i {
  font-style: normal;
  padding-left: 6px;
  color: var(--ink3, #68727F);
  opacity: 0.7;
}

/* ─ 평균 + 핀 단추 ─ */
.prc-avg {
  margin-bottom: 12px;
}
.prc-avg-top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  margin-bottom: 8px;
}
.prc-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink3, #68727F);
  opacity: 0.5;
}
.prc-avg-top b { font-size: 0.8rem; }
.prc-avg-top em { font-style: normal; color: var(--ink3, #68727F); }

/* 핀 단추 */
.prc-pins {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.prc-pin {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1.5px solid var(--border, #d8dde5);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.prc-pin i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.prc-pin.good  i { background: #0B7D3B; }
.prc-pin.sale  i { background: #C62828; }
.prc-pin.brand i { background: #F4511E; }
.prc-pin:hover { background: var(--surface2, #f3f5f8); }
.prc-pin[hidden] { display: none; }

/* ─ 이유 줄 ─ */
.prc-why {
  margin: 10px 0 12px;
  padding: 0 0 0 16px;
  font-size: 0.8rem;
  color: var(--ink2, #343a40);
  line-height: 1.6;
}
.prc-why li { margin-bottom: 2px; }
.prc-why li.strong { color: #0B7D3B; font-weight: 600; }

/* ─ 예약 단추 ─ */
.prc-acts {
  padding: 10px 20px 8px;
}
.prc-book {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 13px;
  border-radius: 10px;
  background: var(--brand, #F4511E);
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.15s;
}
.prc-book:hover { opacity: 0.88; }
.prc-book:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* ─ 경제적 이해관계 표시 ─ */
.prc-disclose {
  font-size: 0.72rem;
  color: var(--ink3, #68727F);
  text-align: center;
  padding: 0 20px 10px;
  margin: 0;
  line-height: 1.5;
}

/* ─ 닫기: 오른쪽 위 동그라미 X (운영자 지시 2026-10-21) ─ */
.prc-x {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%;
  background: #eef1f5; color: var(--ink2, #343a40);
  cursor: pointer;
}
.prc-x:hover { background: #e1e6ed; }
.prc-x:focus-visible { outline: 2px solid var(--brand, #F4511E); outline-offset: 2px; }
:root[data-theme="dark"] .prc-x { background: #2a2b2e; color: #e8eaed; }
/* 이름 줄이 X 밑으로 들어가지 않게 */
.prc-sheet > .prc-pad:first-of-type { padding-right: 60px; }
/* 닫기 단추가 빠져 맨 아래가 수수료 안내다 — 바닥 여백을 그 줄이 진다 */
.prc-disclose { padding-bottom: 20px; }
/* iOS Safe Area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .prc-disclose { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}

/* ── AI 여행가이드(/guide/) PC 폭 맞추기 (2026-10-21, 시안 C) ──
   다른 쪽과 같은 1120px 로 펴고, 왼쪽에 쓰는 법 칸을 붙인다.
   폰·태블릿은 전처럼 660px 한 줄이고 쓰는 법 칸은 안 보인다. */
.guide-how { display: none; }
@media (min-width: 960px) {
  .guidepage .band-in.narrow { max-width: 1120px; }
  .guidepage .band-in.narrow .head-art { grid-template-columns: 1fr minmax(0, 300px); }
  .guidepage .band-in.narrow .art { max-width: 300px; justify-self: end; }
  .guide-cols { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 36px; align-items: start; }
  .guide-how {
    display: block; position: sticky; top: 90px;
    background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px;
  }
  .guide-how h2 { margin: 0 0 14px; font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; }
  .guide-how ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
  .guide-how li {
    display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start;
    color: var(--ink-2); font-size: .93rem; line-height: 1.5;
  }
  .guide-how li b {
    display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    background: #1d3557; color: #fff; font-size: .85rem;
  }
  /* 아래 「어디 갈지 모르겠다면」 카드는 오른쪽 칸에 줄을 맞춘다. */
  .guidepage .band.alt .band-in.narrow { padding-left: calc(16px + 336px); }
}

/* ── 오늘 뭐하지: 상황 고르기(2026-10-21, 시안 E) ──
   누구랑 · 어떤 날 두 줄, 동그란 그림 단추. 폰에서는 줄마다 옆으로 민다.
   위쪽 .mood 칸 모양(테두리 상자·채움)을 여기서 동그라미로 덮는다. */
.moods-band { overflow-x: clip; }
.pick-row + .pick-row { margin-top: 14px; }
.pick-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; }
.pick-h b { font-size: 1.08rem; font-weight: 800; letter-spacing: -.03em; }
.pick-h small { display: none; color: var(--ink-3); font-size: .82rem; }
.pick-sc {
  display: flex; flex-wrap: wrap; gap: 14px; padding: 4px 2px 6px;
}
.pick-sc .mood {
  flex: none; width: 92px; gap: 6px; padding: 4px 0;
  border: 0; background: transparent; box-shadow: none; border-radius: 14px;
}
.pick-sc .mood:hover { transform: none; box-shadow: none; }
.pick-sc .mood-emoji {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
  background: var(--paper); border: 2.5px solid transparent;
  transition: transform .16s, background .16s, border-color .16s;
}
.pick-sc .mood:hover .mood-emoji { transform: scale(1.06); border-color: var(--line); }
.pick-sc .mood-emoji .fx { width: 42px; margin: 0; }
.pick-sc .mood-name { font-size: .92rem; color: var(--ink-2); }
.pick-sc .mood-n { display: none; }
.pick-sc .mood.on, :root[data-theme="dark"] .pick-sc .mood.on { background: transparent; box-shadow: none; }
.pick-sc .mood.on .mood-emoji {
  background: var(--blue-soft); border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(18, 86, 160, .15);
}
.pick-sc .mood.on .mood-name { color: var(--accent); }
.quiz-band {
  margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 18px; border-radius: 14px; background: #fff1f7; border: 1px solid #ffd0e4;
}
.quiz-band .head-quiz-say { margin: 0; text-align: left; }
.quiz-band .head-quiz { margin: 0; white-space: nowrap; background: #fff; padding: 9px 16px; }
:root[data-theme="dark"] .quiz-band { background: #2a1822; border-color: #4a2a3a; }
:root[data-theme="dark"] .quiz-band .head-quiz { background: transparent; }
@media (max-width: 700px) {
  .pick-h small { display: inline; }
  .pick-sc {
    flex-wrap: nowrap; gap: 2px; overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; margin: 0 -14px; padding: 4px 14px 6px; scroll-padding-left: 14px;
  }
  .pick-sc::-webkit-scrollbar { display: none; }
  .pick-sc .mood { width: 76px; scroll-snap-align: start; }
  .pick-sc .mood-emoji { width: 62px; height: 62px; }
  .pick-sc .mood-emoji .fx { width: 36px; }
  .pick-sc .mood-name { font-size: .84rem; }
  .quiz-band { flex-direction: column; align-items: stretch; gap: 8px; text-align: center; }
  .quiz-band .head-quiz-say { text-align: center; }
  .quiz-band .head-quiz { width: 100%; justify-content: center; }
}

/* ── 목적지(항공권) 쪽: 며칠 일정 카드 · 하루 코스 도시 타일 (2026-10-21, 시안 B) ──
   제일 싼 일정은 사진 위 가격 + 큰 단추, 나머지는 줄 전체가 눌리는 카드.
   이름·가격 칸은 클릭 기록 때문에 .plan-name · .plan-price 를 쓴다 —
   그 이름의 전역 여백·크기를 여기서 덮는다. */
.pfares {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; gap: 12px; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
}
.pfares > li { min-width: 0; }
.pf-best { grid-column: 1; }
.pf-hero {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  height: 100%; min-height: 300px; padding: 16px; border-radius: 18px; overflow: hidden; isolation: isolate;
  color: #fff; text-decoration: none; background: linear-gradient(135deg, #1d3557, #274774);
  box-shadow: var(--shadow);
}
.pf-hero img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.pf-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6,24,45,.18) 0%, rgba(6,24,45,.05) 35%, rgba(6,24,45,.72) 100%);
}
.pf-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-badge, .pf-tag { padding: 5px 10px; border-radius: 999px; font-size: .78rem; font-weight: 800; }
.pf-badge { background: #d6282f; color: #fff; }
.pf-tag { background: rgba(255,255,255,.92); color: #1d2733; }
.pf-info { display: flex; flex-direction: column; gap: 2px; }
.pf-hero .plan-name { margin: 0; font-size: .98rem; font-weight: 800; text-shadow: 0 1px 8px rgba(3,18,36,.6); }
.pf-hero .plan-price {
  margin: 0; font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); font-weight: 900; letter-spacing: -.04em;
  line-height: 1.1; text-shadow: 0 2px 14px rgba(3,18,36,.55); white-space: nowrap;
}
.pf-hero .plan-price small { font-size: .38em; margin-left: 3px; }
.pf-go {
  margin-top: 10px; display: flex; align-items: center; justify-content: center; min-height: 48px;
  border-radius: 12px; background: #f4511e; color: #fff; font-weight: 800; font-size: 1rem;
}
.pf-hero:hover .pf-go { background: #e0440f; }
.pf-row {
  display: flex; align-items: center; gap: 12px; height: 100%; min-height: 72px; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  color: var(--ink); text-decoration: none; box-shadow: var(--shadow);
}
.pf-row:hover { border-color: #f4511e; }
.pf-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-row .plan-name { margin: 0; font-weight: 800; font-size: 1rem; }
.pf-sub { color: var(--ink-3); font-size: .82rem; }
.pf-row .plan-price { margin: 0 0 0 auto; font-size: 1.12rem; font-weight: 900; white-space: nowrap; }
.pf-btn {
  flex: none; display: grid; place-items: center; min-width: 54px; min-height: 40px; padding: 0 12px;
  border-radius: 10px; background: #f4511e; color: #fff; font-weight: 800; font-size: .9rem;
}
.gtiles {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; gap: 12px; grid-template-columns: repeat(6, minmax(0, 1fr));
}
.gtiles > li { min-width: 0; }
.gtile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  aspect-ratio: 4 / 5; padding: 12px; border-radius: 16px; overflow: hidden; isolation: isolate;
  color: #fff; text-decoration: none; background: linear-gradient(135deg, #1d3557, #3a6ea5);
  box-shadow: var(--shadow); transition: transform .16s ease;
}
.gtile:hover { transform: translateY(-3px); }
.gtile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.gtile::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6,24,45,0) 40%, rgba(6,24,45,.78) 100%);
}
.gt-name { font-size: 1.05rem; font-weight: 900; letter-spacing: -.03em; text-shadow: 0 1px 8px rgba(3,18,36,.6); }
.gt-sub { font-size: .76rem; font-weight: 700; color: rgba(255,255,255,.9); word-break: keep-all; }
@media (max-width: 900px) {
  .gtiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pfares { grid-template-columns: minmax(0, 1fr); }
  .pf-best { grid-row: auto !important; }
  .pf-hero { min-height: 260px; }
  .gtiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
  .gtile { padding: 10px; }
}
@media (max-width: 380px) {
  .pf-row { gap: 8px; padding: 12px; }
  .pf-btn { min-width: 46px; }
  .gtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 머리표 메뉴판(2026-10-21, 시안 B) ──
   PC: 「여행지 찾기」·「여행 상품」 두 단추. 올리거나 누르면 머리표 아래로
   전폭 판이 펼쳐진다. 판은 .topbar 기준으로 선다(.topbar-in 은 static).
   폰(900px 아래): 이 판은 숨고 서랍(.drawer)이 같은 두 묶음을 <details> 로 보인다. */
@media (min-width: 901px) {
  /* 서랍용 스크롤 상자가 판을 잘라 먹는다. PC 에서는 서랍이 없으니 푼다. */
  .topbar-in { max-height: none; overflow: visible; }
}
.mega-btn {
  display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: inherit; font-weight: 700; font-size: .92rem; color: var(--ink-2); white-space: nowrap;
}
.mega-chev { transition: transform .18s ease; }
.mega.open .mega-btn, .mega-btn:focus-visible {
  background: var(--blue-soft, #e3f1fd); color: var(--accent);
}
.mega.open .mega-chev { transform: rotate(180deg); }
.mega-btn.here { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); border-radius: 0; }
.mega-pn {
  display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  background: var(--card); border-bottom: 1px solid var(--line);
  box-shadow: 0 28px 40px -22px rgba(16, 22, 29, .35);
}
/* 단추에서 판으로 마우스를 내릴 때 머리표 여백에서 hover 가 끊기지 않게. */
.mega-pn::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.mega.open .mega-pn, .mega:has(:focus-visible) .mega-pn { display: block; }
/* 마우스가 있는 기기에서만 올리면 열린다. 터치에서 :hover 는 누른 뒤에도
   남아서, 다시 눌러도 판이 안 닫혔다. */
@media (hover: hover) {
  .mega:hover .mega-btn { background: var(--blue-soft, #e3f1fd); color: var(--accent); }
  .mega:hover .mega-chev { transform: rotate(180deg); }
  .mega:hover .mega-pn { display: block; }
}
.mega-in {
  max-width: 1120px; margin: 0 auto; padding: 22px 16px 26px;
  display: grid; grid-template-columns: 230px 1fr 250px; gap: 28px;
}
.mega-title { margin: 0 0 6px; font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.mega-h p:not(.mega-title) { margin: 0; color: var(--ink-3); font-size: .88rem; line-height: 1.5; }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; align-content: start; }
.topbar .mega-row {
  display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; row-gap: 1px; align-items: center;
  min-height: 52px; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent;
  font-weight: 400; white-space: normal;
  color: var(--ink); text-decoration: none;
}
.topbar .mega-row:hover { background: var(--paper); border-color: var(--line); }
.topbar .mega-row[aria-current="page"] { background: var(--blue-soft, #e3f1fd); }
.mega-i {
  grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: var(--blue-soft, #e3f1fd); color: var(--accent);
}
.goods .mega-i, .dgroup + .dgroup .mega-i { background: #fff1ea; color: #bf4207; }
.mega-t { font-weight: 700; font-size: .95rem; line-height: 1.25; }
.mega-d { font-size: .8rem; line-height: 1.3; color: var(--ink-3); }
.topbar .mega-side {
  align-self: start; display: flex; flex-direction: column; gap: 8px; padding: 16px;
  border-radius: 18px; background: #fff7f3; border: 1px solid #f5c7b3; color: var(--ink); text-decoration: none;
  white-space: normal; font-weight: 400;
}
.topbar .mega-side b { display: flex; align-items: center; gap: 8px; font-size: .98rem; color: #bf4207; }
.topbar .mega-side span { font-size: .82rem; line-height: 1.45; color: var(--ink-2); }
:root[data-theme="dark"] .mega-side { background: #2a1d16; border-color: #5a3a2a; }
:root[data-theme="dark"] .goods .mega-i,
:root[data-theme="dark"] .dgroup + .dgroup .mega-i { background: #3a2418; color: #ffb38a; }
/* 서랍(폰) 안의 두 묶음 */
.dgroup { border-bottom: 1px solid var(--line); }
.dgroup summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 12px;
  font-weight: 800; font-size: 1rem; letter-spacing: -.02em; cursor: pointer; list-style: none;
}
.dgroup summary::-webkit-details-marker { display: none; }
.dgroup[open] summary .mega-chev { transform: rotate(180deg); }
.topbar .dgroup .mega-row { padding: 8px 12px; margin-bottom: 2px; }
.topbar .dgroup .mega-row:hover { border-color: transparent; }
.drawer a.dsaved { display: flex; align-items: center; gap: 10px; min-height: 52px; margin-top: 4px; }
.dmore { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 6px 0 4px; }
.drawer .dmore a { padding: 8px 12px; font-size: .86rem; font-weight: 600; color: var(--ink-2); }

/* ── 홈 세 칸, 시안 B(2026-10-21) ──
   예산 · 가격 내림 · 추천을 위아래 세 줄의 사진 카드로. 폰은 줄마다 옆으로 민다.
   위쪽 .home .panel/.budget/.drop/.ranks 규칙이 많아서 전부 .home .trio-b 로 덮는다. */
.home .trio.trio-b { display: block; }
.home .trio-b .tb-sec + .tb-sec { margin-top: 44px; }
.home .trio-b .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.home .trio-b h2 { margin: 0; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.home .trio-b .panel-sub { margin: 6px 0 0; font-size: .9rem; color: var(--ink-2); font-weight: 600; }
.tb-swipe { display: none; color: var(--ink-3); font-size: .84rem; font-weight: 600; white-space: nowrap; }
.home .trio-b .tb-row {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; gap: 14px; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
}
.home .trio-b .tb-row > li { min-width: 0; width: auto; }
/* 예산 카드 */
.home .trio-b .bcard {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; height: 100%;
  aspect-ratio: 4 / 5; padding: 18px 16px 16px; border: 0; border-radius: 20px;
  color: #fff; text-decoration: none; background: #1d3557; box-shadow: var(--shadow); font-weight: 400;
}
.home .trio-b .bcard:hover { transform: translateY(-3px); background: #1d3557; }
.home .trio-b .bcard img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.home .trio-b .bcard::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .78; }
.home .trio-b .bcard.b1::after { background: linear-gradient(180deg, #0f8a5f 0%, rgba(15,138,95,.55) 55%, #064d36 100%); }
.home .trio-b .bcard.b2::after { background: linear-gradient(180deg, #11807f 0%, rgba(17,128,127,.55) 55%, #0a4a52 100%); }
.home .trio-b .bcard.b3::after { background: linear-gradient(180deg, #2867c9 0%, rgba(40,103,201,.55) 55%, #133a78 100%); }
.home .trio-b .bcard.b4::after { background: linear-gradient(180deg, #5b3fc4 0%, rgba(91,63,196,.55) 55%, #2f1f74 100%); }
.home .trio-b .bcard.b5::after { background: linear-gradient(180deg, #e0562a 0%, rgba(224,86,42,.55) 55%, #7a2a12 100%); }
.home .trio-b .bcard.empty { opacity: .55; }
.bc-top { display: flex; flex-direction: column; gap: 4px; }
.home .trio-b .budget-label { color: #fff; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.home .trio-b .budget-label b { font-size: 2.6rem; font-weight: 900; letter-spacing: -.05em; line-height: 1; margin-right: 2px; }
.home .trio-b .budget-count { color: rgba(255,255,255,.95); font-size: .88rem; font-weight: 800; }
.bc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.bc-low { display: flex; flex-direction: column; white-space: nowrap; min-width: 0; font-size: 1.12rem; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.bc-low small { font-size: .74rem; font-weight: 700; opacity: .9; }
.bc-go { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #1d2733; }
/* 가격 내림 카드 */
.home .trio-b .dcard {
  display: flex; flex-direction: column; height: 100%; padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--ink);
  text-decoration: none; box-shadow: var(--shadow);
}
.home .trio-b .dcard:hover { transform: translateY(-3px); background: var(--card); }
.dc-ph { position: relative; display: block; aspect-ratio: 16 / 11; background: var(--line); }
.home .trio-b .dc-ph .drop-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; }
.dc-off {
  position: absolute; top: 10px; right: 10px; width: 62px; height: 62px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  background: #d6282f; color: #fff; border: 3px solid #fff; font-size: .7rem; font-weight: 800;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.dc-off b { font-size: 1.12rem; font-weight: 900; letter-spacing: -.04em; }
.home .trio-b .drop-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 14px 14px 16px; justify-content: space-between; }
.home .trio-b .drop-name { font-size: .95rem; font-weight: 700; line-height: 1.35; white-space: normal; }
.dc-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.home .trio-b .drop-now { color: #d6282f; font-size: 1.35rem; font-weight: 900; letter-spacing: -.03em; }
.home .trio-b .drop-was { font-size: .82rem; }
/* 추천 카드 */
.home .trio-b .ranks a.rcard {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 25 / 23; height: 100%; padding: 14px 16px; border-radius: 20px;
  background: linear-gradient(135deg, #1d3557, #3a6ea5); color: #fff; text-decoration: none; box-shadow: var(--shadow);
}
.home .trio-b .ranks a.rcard:hover { transform: translateY(-3px); background: linear-gradient(135deg, #1d3557, #3a6ea5); }
.home .trio-b .rcard img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.home .trio-b .rcard::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6,24,45,.1) 0%, rgba(6,24,45,0) 40%, rgba(6,24,45,.8) 100%);
}
.home .trio-b .ranks .rank-no {
  position: absolute; top: 6px; left: 12px; width: auto; height: auto; border-radius: 0;
  background: none !important; box-shadow: none !important; font-size: 4.2rem; font-weight: 900; line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 2.5px #fff; text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.rc-badge { position: absolute; top: 14px; right: 14px; padding: 5px 11px; border-radius: 999px; background: #f4511e; color: #fff; font-size: .8rem; font-weight: 800; }
.rc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.rc-foot > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.home .trio-b .rank-name { color: #fff; font-size: 1.25rem; font-weight: 900; letter-spacing: -.03em; }
.home .trio-b .rank-days { display: block; color: rgba(255,255,255,.88); font-size: .8rem; }
.home .trio-b .rank-price { color: #fff; font-size: 1.3rem; font-weight: 900; white-space: nowrap; }
.home .trio-b .rank-price small { font-size: .62em; }
@media (max-width: 720px) {
  .tb-swipe { display: inline; }
  .home .trio-b .tb-sec + .tb-sec { margin-top: 34px; }
  .home .trio-b .tb-row {
    grid-auto-columns: 46%; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    margin: 16px -14px 0; padding: 2px 14px 8px; scroll-padding-left: 14px; gap: 12px;
  }
  .home .trio-b .tb-row::-webkit-scrollbar { display: none; }
  .home .trio-b .tb-row > li { scroll-snap-align: start; }
  .home .trio-b .drops.tb-row { grid-auto-columns: 62%; }
  .home .trio-b .ranks.tb-row { grid-auto-columns: 78%; }
  .home .trio-b .budget-label b { font-size: 2.2rem; }
  .bc-low { font-size: .98rem; }
  .bc-go { width: 32px; height: 32px; }
}
.home .band.alt:has(.trio-b) { overflow-x: clip; }