/* WorldTour — 화면 · 인쇄 스타일 (빌드 없음 · 바닐라 CSS)
   화면: 왼쪽 설정 패널(출발지 · 범위 · 필터 · 추가 정보) + 오른쪽 코스 표. 1,000px 미만은 세로 쌓기.
   인쇄: body > * 는 모두 숨기고 #print-root 만 — 여러 단(column-count 는 js/app.js fitColumns 가 용지 · 방향 · 행 수에 맞춰 정한다).
   @page 크기 · 방향은 js/app.js 가 <style id="wt-page"> 로 주입(A4 · A3 · A5 · B4 · B5 · Letter · Legal × portrait · landscape). */
:root {
  --bg: #f4f6f9; --card: #fff; --ink: #1b1f27; --muted: #5d6675; --line: #dfe4ea; --accent: #0b6e99; --accent-ink: #fff;
  --gold: #b7791f; --gold-bg: #fff7e6; --danger: #b42318; --ok: #15803d; --land: #2f7d32; --ferry: #1565c0; --air: #6a1b9a;
  --radius: 10px; --font: -apple-system, 'Segoe UI', 'Noto Sans KR', 'Noto Sans JP', 'Hiragino Sans', 'Malgun Gothic', Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--font); }
a { color: var(--accent); }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 머리 ── */
.hd { background: var(--card); border-bottom: 1px solid var(--line); }
.hd-in { max-width: 1480px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; margin-right: auto; }
.brand h1 { margin: 0; font-size: 20px; line-height: 1.3; letter-spacing: -.01em; }
.brand .sub { color: var(--muted); font-size: 13px; }
.hd-act { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn { border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 8px 14px; font-weight: 600; line-height: 1.2; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-gold { background: var(--gold-bg); color: var(--gold); border-color: #f0d9a8; }
html.is-licensed .btn-gold .lock { display: none; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* 언어 풀다운 */
.lang { position: relative; }
.lang-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.12); list-style: none; margin: 0; padding: 6px; min-width: 180px; z-index: 30; display: none; max-height: 70vh; overflow: auto; }
.lang[aria-expanded="true"] .lang-menu, .lang.open .lang-menu { display: block; }
.lang-menu li { padding: 7px 12px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.lang-menu li:hover, .lang-menu li[aria-selected="true"] { background: var(--bg); }
.lang-menu li[aria-selected="true"] { font-weight: 700; }

/* ── 본문 레이아웃 ── */
.main { max-width: 1480px; margin: 0 auto; padding: 18px 20px 40px; display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .main { grid-template-columns: 1fr; } }
.lead { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.panel { padding: 16px; display: grid; gap: 14px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
@media (max-width: 1000px) { .panel { position: static; max-height: none; } }
.field { display: grid; gap: 5px; }
.field > label, .grp > summary, .field .lbl { font-weight: 700; font-size: 13px; color: var(--ink); }
.field select, .field input[type="date"] { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #fff; }
.hint { color: var(--muted); font-size: 12px; margin: 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* 필터 그룹 */
.grp { border-top: 1px solid var(--line); padding-top: 10px; }
.grp summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.grp summary::-webkit-details-marker { display: none; }
.grp summary::before { content: '▸'; color: var(--muted); font-size: 12px; transition: transform .15s; }
.grp[open] summary::before { transform: rotate(90deg); }
.grp summary .cnt { margin-left: auto; color: var(--muted); font-weight: 500; font-size: 12px; }
.grp .tools { display: flex; gap: 10px; margin: 6px 0 4px; font-size: 12px; }
.grp .tools button { background: none; border: 0; color: var(--accent); padding: 0; text-decoration: underline; }
.chk { display: flex; gap: 8px; align-items: flex-start; padding: 5px 2px; font-size: 13px; line-height: 1.4; }
.chk input { margin: 3px 0 0; flex: none; }
.field .chk select, .chk select { width: auto; display: inline-block; margin: 0 4px; border: 1px solid var(--line); border-radius: 6px; padding: 1px 4px; font-size: 12px; vertical-align: baseline; }
.chk.locked { color: var(--muted); }
.chk.locked input { cursor: not-allowed; }
.lock { font-size: 12px; }
html.is-licensed .chk.locked { color: inherit; }
html.is-licensed .chk.locked input { cursor: pointer; }
html.is-licensed .lock, html.is-licensed .prem-note { display: none; }
.prem-note { font-size: 12px; color: var(--gold); background: var(--gold-bg); border: 1px solid #f0d9a8; border-radius: 8px; padding: 8px 10px; display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.prem-note button { border: 1px solid var(--gold); background: #fff; color: var(--gold); border-radius: 6px; padding: 3px 10px; font-size: 12px; font-weight: 700; }

/* ── 코스 ── */
.route { padding: 0; overflow: hidden; }
.sum { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); font-weight: 600; }
.sum .drop { color: var(--danger); font-weight: 500; font-size: 13px; }
.sum .ret { margin-left: auto; color: var(--muted); font-weight: 500; font-size: 13px; }
table.rt { width: 100%; border-collapse: collapse; font-size: 14px; }
.rt th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); background: #fafbfc; position: sticky; top: 0; z-index: 1; }
.rt td { padding: 7px 10px; border-bottom: 1px solid #eef1f4; vertical-align: top; }
.rt tr.region td { background: #eef3f8; color: var(--accent); font-weight: 700; font-size: 12px; letter-spacing: .02em; padding: 6px 10px; }
.rt .no { color: var(--muted); width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.rt .cc b { font-weight: 700; }
.rt .cc .city { color: var(--muted); }
.rt .cc .city::before { content: ' / '; color: #a4acb8; }
.rt .arr { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; width: 96px; }
.rt .days { white-space: nowrap; width: 54px; text-align: right; font-variant-numeric: tabular-nums; }
.rt .mv { white-space: nowrap; width: 240px; font-size: 13px; color: var(--muted); }
.rt .mv .m { font-weight: 600; }
.rt .mv .m.land { color: var(--land); } .rt .mv .m.ferry { color: var(--ferry); } .rt .mv .m.air { color: var(--air); }
.rt tr.start td { background: #f3fbf5; }
.rt tr.start .cc b::after { content: ' ★'; color: var(--ok); font-size: 12px; }
.rt tr.spoke .cc b::before { content: '↩ '; color: var(--muted); }
.rt .info { margin: 4px 0 0; padding: 0 0 0 14px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.rt .info li { list-style: none; position: relative; }
.rt .info li::before { content: '·'; position: absolute; left: -10px; }
.rt .info li.warn { color: var(--danger); }
.rt .info li.good { color: var(--ok); }
.empty { padding: 30px; text-align: center; color: var(--muted); }
@media (max-width: 720px) { .rt .mv { white-space: normal; width: auto; } .rt .arr { width: auto; } .rt th:nth-child(3), .rt td.arr { display: none; } }

/* ── 모달 ── */
.modal { position: fixed; inset: 0; background: rgba(20, 24, 32, .55); display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 50; overflow: auto; }
.modal.open { display: flex; }
.modal-box { background: var(--card); border-radius: 14px; max-width: 720px; width: 100%; padding: 22px 24px; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal-box h2 { margin: 0 32px 10px 0; font-size: 20px; }
.modal-x { position: absolute; right: 12px; top: 10px; border: 0; background: none; font-size: 22px; line-height: 1; padding: 4px 8px; color: var(--muted); }
.tips h3 { font-size: 15px; margin: 16px 0 4px; }
.tips p { margin: 0; color: #333; font-size: 14px; }
.prem .price { font-size: 26px; font-weight: 800; margin: 8px 0 2px; }
.prem .dev { color: var(--muted); font-size: 13px; }
.prem .act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.prem input[type="text"], .prem input[type="email"] { flex: 1 1 240px; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; font-family: Consolas, Menlo, monospace; }
.prem .msg { font-size: 13px; margin: 8px 0 0; min-height: 1.2em; }
.prem .msg.err { color: var(--danger); } .prem .msg.ok { color: var(--ok); }
.prem .status { background: #f3fbf5; border: 1px solid #cde9d4; color: var(--ok); border-radius: 8px; padding: 10px 12px; margin: 10px 0; font-weight: 600; display: none; }
html.is-licensed .prem .status { display: block; }
html.is-licensed .prem .buy, html.is-licensed .prem .have { display: none; }
.prem .legal { font-size: 12px; color: var(--muted); margin-top: 14px; }
.prem hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.print-opt { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.print-opt label { font-size: 13px; font-weight: 700; display: grid; gap: 4px; }
.print-opt select { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }

/* ── SEO 섹션 · 바닥 ── */
.seo { max-width: 1480px; margin: 0 auto; padding: 0 20px 30px; color: #333; }
.seo h2 { font-size: 18px; margin: 24px 0 8px; }
.seo p, .seo li { font-size: 14px; }
.seo details { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 6px 0; background: var(--card); }
.seo summary { font-weight: 600; cursor: pointer; }
.seo .disc { color: var(--muted); font-size: 13px; }
footer.ft { border-top: 1px solid var(--line); background: var(--card); }
.ft-in { max-width: 1480px; margin: 0 auto; padding: 16px 20px; display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.ft-in a { color: var(--muted); text-decoration: none; }
.ft-in a:hover { color: var(--accent); text-decoration: underline; }
.ft-in .copy { margin-right: auto; }

/* ── 인쇄 전용 뿌리(화면에서는 숨김) ── */
#print-root { display: none; }
@media print {
  @page { margin: 10mm; }
  html, body { background: #fff; color: #000; font-size: 8pt; }
  body > *:not(#print-root) { display: none !important; }
  #print-root { display: block; }
  #print-root .ph { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid #000; padding-bottom: 2mm; margin-bottom: 2mm; }
  #print-root .ph h1 { margin: 0; font-size: 12pt; }
  #print-root .ph .meta { font-size: 7.5pt; color: #333; }
  /* 설명 없음(한 장): balance — 단 높이 = 전체/단 수 라 머리 · 바닥까지 한 쪽에 든다(auto 면 첫 단이 쪽 끝까지 차고 바닥글이 다음 쪽으로 밀린다) */
  #print-root .cols { column-gap: 5mm; column-fill: balance; column-rule: 1px solid #bbb; }
  #print-root .pr { display: flex; gap: 1.2mm; align-items: baseline; break-inside: avoid; page-break-inside: avoid; line-height: 1.25; padding: .25mm 0; border-bottom: 1px dotted #ddd; }
  #print-root .pr .no { width: 3.2em; text-align: right; color: #555; flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
  #print-root .pr .cc { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #print-root .pr .cc .city { color: #555; }
  #print-root .pr .cc .city::before { content: '/'; color: #999; margin: 0 .3em; }
  #print-root .pr .mv { flex: none; width: 4.6em; color: #333; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  #print-root .pr .days { flex: none; min-width: 2.6em; text-align: right; color: #333; font-variant-numeric: tabular-nums; white-space: nowrap; }
  #print-root .pr .arr { flex: none; min-width: 3.4em; text-align: right; color: #333; font-variant-numeric: tabular-nums; white-space: nowrap; }
  #print-root .pr.region { font-weight: 700; color: #000; background: #eee; border-bottom: 0; padding: .4mm 1mm; margin-top: .5mm; }
  #print-root .pr.region .no { visibility: hidden; }
  #print-root .pr.start .cc { font-weight: 700; }
  #print-root .pr.spoke .cc::before { content: '↩ '; color: #666; }
  #print-root .pi { margin: 0 0 1mm 4.4em; padding: 0; font-size: 7pt; color: #333; line-height: 1.3; break-inside: avoid; }
  #print-root .pi li { list-style: none; }
  #print-root .pi li::before { content: '· '; color: #777; }
  #print-root .pi li.warn { color: #9b1c1c; }
  #print-root .pf { margin-top: 2mm; border-top: 1px solid #000; padding-top: 1.5mm; font-size: 7pt; color: #333; display: flex; justify-content: space-between; gap: 10px; }
  /* 설명 포함(프리미엄 · 여러 장): 단 수는 js(세로 2 · 가로 3) · auto 채움(쪽마다 위에서 아래로) · 행 + 설명을 .pb 로 묶어 쪽 · 단 경계에서 갈라지지 않게 */
  #print-root.with-info .cols { column-fill: auto; column-rule: 0; column-gap: 7mm; }
  #print-root.with-info .pb { break-inside: avoid; page-break-inside: avoid; margin-bottom: 1.2mm; }
  #print-root.with-info .pr { border-bottom: 0; margin-top: 0; }
  #print-root.with-info .pr .no { width: 2.4em; }
  #print-root.with-info .pi { margin-left: 3.2em; }
}