/* Korea Briefly — 디자인 P0(2026-11-01, docs/stay-en/review/DESIGN_REVIEW_2026-11-01.md 추천 C: 겉모습은 Codex 시안).
   자바스크립트·외부 글꼴 없음(속도). 색은 아래 토큰만 쓴다 — 글자 대비 4.5:1 이상(tests/test_design.py 가 잰다).
   다크 모드는 prefers-color-scheme 로만(스위치 없음). 터치 영역 44px. 넓은 표는 .table-wrap 안에서만 옆으로 움직인다. */
:root {
  color-scheme: light dark;
  --paper: #F7F5EF;          /* 바탕(종이) */
  --card: #FFFFFF;           /* 카드·표 바탕 */
  --ink: #1C2421;            /* 본문 글자 */
  --muted: #46504B;          /* 보조 글자 (R19: 독자가 '작은 회색 글자가 안 읽힌다' — #525C57 에서 더 진하게) */
  --line: #D9D3C4;           /* 선 */
  --edge: #8A8672;           /* 누르는 것(단추·알약)의 테두리 — 바탕과 3:1 이상(R18, WCAG 1.4.11) */
  --btn-edge: var(--green);  /* 채운 단추(Trip.com)의 테두리 */
  --green: #173F35;          /* 짙은 녹색 — 머리·제목·링크 */
  --lime: #DBF278;           /* 라임 — 강조 바탕(글자색으로 쓰지 않는다) */
  --apricot: #ECC6B5;        /* 살구 — 보조 바탕 */
  --heading: var(--green);
  --link: var(--green);
  --head-bg: var(--green);   /* 사이트 머리 */
  --head-ink: #F7F5EF;
  --head-muted: #C9D8D0;
  --accent-ink: #173F35;     /* 라임 위 글자 */
  --soft-bg: #F6E3DA;        /* 살구 옅게 — 공개 문구·그날 공지 */
  --soft-ink: #1C2421;
  --qa-bg: #FBFDF0;          /* Quick answer 상자 */
  --alert-bg: #FBE9E5;       /* Re-checking 안내 */
  --alert-line: #9F2A1B;
  --ok: #1F5F2F;             /* 상태 칩: Official */
  --warn: #8A4B00;           /* Secondary — confirm */
  --temp: #5B3FA8;           /* Temporary timetable */
  --focus: #173F35;
  /* 타임라인 그림은 모드와 상관없이 늘 같은 '어두운 판'(R18). 삼성 인터넷 같은 강제 다크 모드는 prefers-color-scheme 을 무시하고 글자색만 밝게 바꿔
     밝은 판 위 글자가 안 읽혔다 — 판·글자·막대를 한 벌의 고정 색으로 두면 라이트·다크·강제 다크 어디서나 같은 짝(글자 4.5:1 이상, tests/test_timeline.py) */
  --tl-bg: #12201B;
  --tl-ink: #ECEAE3;
  --tl-muted: #B7C2BC;
  --tl-run: #3BA17A;                      /* 운행 막대·출발 눈금 */
  --tl-band-1: rgba(232, 122, 74, .26);   /* 할증 옅음(20%) — 반투명 한 색상 두 단계, 값은 늘 글자로도 */
  --tl-band-2: rgba(232, 122, 74, .55);   /* 할증 짙음(40%) */
  --tl-band-line: #EE9468;                /* 구간 테두리 */
  --serif: Georgia, "Noto Serif", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --tap: 44px;
  --lift: 0 1px 2px rgba(28, 36, 33, .06);   /* 카드·표 카드의 아주 옅은 그림자(크림 바탕 위 흰 카드가 납작하게 보이지 않게) */
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #101B17;
    --card: #16241F;
    --ink: #ECEAE3;
    --muted: #BAC4BF;
    --line: #33463F;
    --edge: #6E8D81;
    --btn-edge: #6E8D81;
    --heading: #E6F0B8;
    --link: #A8D5C2;
    --head-bg: #0B1411;
    --head-ink: #F7F5EF;
    --head-muted: #A9B8B1;
    --accent-ink: #173F35;
    --soft-bg: #3B2A22;
    --soft-ink: #F3DED4;
    --qa-bg: #1B2B25;
    --alert-bg: #3A1E19;
    --alert-line: #F0A493;
    --ok: #8FD6A2;
    --warn: #F2B872;
    --temp: #C7B6F5;
    --focus: #DBF278;
    }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 1.0625rem/1.65 var(--sans); overflow-wrap: break-word; }   /* 17px — rem 이라 브라우저 글자 크기 설정을 따른다 */
/* 폭(2026-11-01 사이트 구조 판정): 글은 읽기 열 42rem 그대로, 홈·허브는 고르는 화면이라 넓게(68rem) — 머리·바닥은 넓은 쪽에 맞춘다.
   넓은 쪽 안의 글줄(.prose)은 읽기 폭. 폰은 모두 한 열 */
main { max-width: 42rem; margin-left: auto; margin-right: auto; padding: 0 1rem 1rem; display: block; }
body.t-home main, body.t-hub main { max-width: 68rem; }
.prose, .hub-body > :not(.card-grid) { max-width: 42rem; }   /* 넓은 쪽(허브) 안의 글줄은 읽기 폭, 카드 격자만 넓게 */
footer.site > * { max-width: 68rem; margin-left: auto; margin-right: auto; }
main:focus { outline: none; }
h1, h2, h3 { font-family: var(--serif); color: var(--heading); line-height: 1.25; font-weight: 700; }
h1 { font-size: 1.85rem; margin: .6rem 0 .5rem; letter-spacing: -.01em; }
main > h1:first-child { margin-top: 1.3rem; }   /* 첫 화면(빵부스러기 없음) — 머리 바로 밑에 붙지 않게 */
h2 { font-size: 1.35rem; margin: 2.2rem 0 .6rem; }
h3 { font-size: 1.2rem; margin: 1.6rem 0 .4rem; }   /* 본문(17px)과 확실히 다르게(19px, 디자인 크리틱) */
a { color: var(--link); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
pre { overflow-x: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
           white-space: nowrap; border: 0; }
/* 건너뛰기 링크 — 키보드로 처음 누르면 보인다 */
.skip-link { position: absolute; left: .5rem; top: -4rem; z-index: 10; display: inline-flex; align-items: center;
             min-height: var(--tap); padding: 0 1rem; background: var(--lime); color: var(--accent-ink); font-weight: 700;
             border-radius: 6px; text-decoration: none; }
.skip-link:focus { top: .5rem; }
/* 사이트 머리: 이름 + 섹션 줄(공개 글이 있는 허브만) — 한 줄 소개는 홈 제목에만(쪽마다 되풀이하지 않는다, 사이트 구조 판정) */
header.site { background: var(--head-bg); color: var(--head-ink); }
header.site .inner { max-width: 68rem; margin: 0 auto; padding: .45rem 1rem .1rem; display: flex; flex-wrap: wrap; align-items: center;
                     gap: 0 1.6rem; }
.brand { display: inline-flex; align-items: center; min-height: var(--tap); font: 700 1.3rem/1.1 var(--serif);
         color: var(--head-ink); text-decoration: none; letter-spacing: -.01em; }
.brand::before { content: ""; display: inline-block; width: 1rem; height: 1rem; margin-right: .5rem; border-radius: 3px;
                 background: linear-gradient(var(--head-bg), var(--head-bg)) center / 42% 42% no-repeat, var(--lime); }   /* 파비콘과 같은 꼴(R1 홈) */
nav.sections ul { display: flex; flex-wrap: wrap; gap: 0 .9rem; list-style: none; margin: 0; padding: 0; }
nav.sections a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--head-ink); font-weight: 600;
                 font-size: .95rem; text-decoration: none; border-bottom: 3px solid transparent; }
nav.sections a:hover, nav.sections a[aria-current] { border-bottom-color: var(--lime); }   /* 허브 쪽(page)·그 허브의 글(true) */
header.site :focus-visible { outline-color: var(--lime); }
@media (max-width: 39.99rem) {   /* 폰(R1 홈): 이름 줄 + 섹션 줄 — 섹션 줄은 가는 선 위에 한 줄로, 두 줄이 얼기설기 보이지 않게 */
  header.site .inner { padding-top: .1rem; }
  header.site nav.sections { flex: 1 1 100%; border-top: 1px solid rgba(247, 245, 239, .16); }
  nav.sections ul { gap: 0 1.2rem; }
}
/* 미리보기 띠(review 글 확인용 배포에만) */
.preview-banner { background: #9F2A1B; color: #FFFFFF; text-align: center; font-weight: 700; padding: .45rem 1rem; letter-spacing: .03em; }
/* 글 머리: 빵부스러기 · Checked·Changed 줄 · 공개 문구 */
.crumbs { margin-top: .3rem; color: var(--muted); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--tap); }
.crumbs a:focus-visible { outline-offset: -3px; }   /* 빵부스러기 줄은 overflow: hidden — 초점 테두리가 잘리지 않게 안쪽에 */
.meta, .source-note { color: var(--muted); font-size: .9rem; }
.meta { margin: 0 0 .8rem; }
.source-note { margin: 0 0 .8rem; font-size: .85rem; line-height: 1.5; }   /* 제목 아래 둘째 줄(출처 한 줄, R13 — AI 문구 없음) */
.meta + .source-note { margin-top: -.55rem; }
.dates time { color: var(--ink); font-weight: 600; }
.disclosure { background: var(--soft-bg); color: var(--soft-ink); border-left: 4px solid var(--apricot); border-radius: 0 6px 6px 0;
              padding: .45rem .75rem; margin: .8rem 0; font-size: .85rem; line-height: 1.5; }
.aff-note { color: var(--muted); }
/* 글 머리 한 덩어리(R8, 2026-11-02 시각 리뷰 3번): 확인일 · 출처 한 줄 · 제휴 한 줄을 작은 글씨 한 묶음으로 — 상자 없이 아래 선 하나.
   폰 844px 첫 화면에 Quick answer 가 올라오게(살구 상자 4줄 → 회색 1~2줄) */
.post-meta { margin: 0 0 1rem; padding: 0 0 .55rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .82rem;
             line-height: 1.45; }
.post-meta .meta, .post-meta .source-note { margin: 0; font-size: inherit; line-height: inherit; }
.post-meta .meta + .source-note { margin-top: .1rem; }
.post-meta .disclosure { margin: .3rem 0 0; padding: 0; background: none; border: 0; border-radius: 0; color: var(--muted);
                         font-size: inherit; line-height: inherit; }
.post-meta .disclosure strong { color: var(--ink); font-weight: 600; }
.post-meta a { color: var(--muted); }
.post-meta .dates time { color: var(--ink); }
/* 제휴 링크 바로 뒤 작은 'Ad'(2026-11-02: 줄글 속 '(affiliate link)' 대신) — 글자로 있어 리더·스크린리더에도 읽힌다, 말은 쪽 첫머리 .disclosure 한 줄이 한다 */
.ad-tag { display: inline-block; margin-left: .15em; padding: 0 .3em; border: 1px solid currentColor; border-radius: 3px;
          font-size: .7rem; font-weight: 600; line-height: 1.35; letter-spacing: .04em; text-transform: uppercase;
          vertical-align: .18em; color: var(--muted); }
.stale-notice { background: var(--alert-bg); border-left: 4px solid var(--alert-line); border-radius: 0 6px 6px 0;
                padding: .6rem .8rem; margin: 1rem 0; }
/* Quick answer — 답이 첫 화면에 보이게 상자로 */
section.quick-answer { background: var(--qa-bg); border: 1px solid var(--line); border-top: 6px solid var(--lime);
                       border-radius: 10px; padding: .2rem 1rem .4rem; margin: 1rem 0 1.4rem; }
section.quick-answer h2 { display: inline-block; margin: .7rem 0 .2rem; padding: 0 .4rem; font: 700 .8rem/1.8 var(--sans);
                          letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); background: var(--lime);
                          border-radius: 4px; }
section.quick-answer > p:first-of-type { font-size: 1.08rem; }
section.quick-answer ul { padding-left: 1.2rem; }
/* 표 — 넓은 표는 감싼 상자 안에서 옆으로(표 의미는 그대로, C23) */
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .93rem; background: var(--card);
        border: 1px solid var(--line); border-radius: 10px; }   /* 바깥 테두리 하나 + 가로줄만(디자인 크리틱 — 칸마다 선인 격자는 무겁다) */
.table-wrap { position: relative; overflow-x: auto; max-width: 100%; margin: 1rem 0; -webkit-overflow-scrolling: touch; }   /* tabindex=0·role=region(readable.label_table_regions) — 키보드로도 옆으로 */
.table-wrap > table { margin: 0; }
th, td { border: 0; border-bottom: 1px solid var(--line); padding: .5rem .65rem; text-align: left; vertical-align: top; }
tbody tr:last-child > td { border-bottom: 0; }
th { background: var(--paper); font-weight: 700; font-size: .88rem; }
thead th:first-child { border-top-left-radius: 9px; }
thead th:last-child { border-top-right-radius: 9px; }
caption, table.data caption { caption-side: top; text-align: left; font-weight: 700; padding: .3rem 0; color: var(--ink); }
/* 폰 폭에 안 들어가는 표(칸 5개 이상·긴 문장 칸 4칸 — readable.needs_stack 이 class="stack"·data-label 을 단다) — 좁은 화면에서는
   줄마다 카드 한 장(2026-11-01 가독성 · 구조 크리틱: 3~4칸 짧은 표는 표 그대로가 짧다).
   숨기는 칸은 display:none 이 아니라 글자를 잘라 숨긴다(clip) — 낭독기의 머리 칸↔값 칸 짝이 그대로다. 그 안의 링크는
   visibility:hidden 으로 탭 순서·낭독기에서 뺀다(같은 값·링크가 표 아래 메모에 보인다, 2026-11-01 접근성 크리틱) */
.table-note, .table-cites { color: var(--muted); font-size: .8rem; line-height: 1.5; margin: .35rem 0 0; }
.table-note span { white-space: normal; }
.table-cites { display: none; }   /* 머리 칸의 [n] — 머리 줄이 숨는 카드(좁은 화면)에서만 */
.table-cites.table-cites-all { display: block; }   /* 카드로 바꾸지 않는 표의 머리 칸 [n] — 모든 폭에서 표 아래 한 줄(readable._cites_below) */
table.stack th.const, table.stack td.const { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
                                             clip: rect(0 0 0 0); white-space: nowrap; border: 0; }   /* 모든 줄이 같은 값 — 모든 폭에서 메모로 */
table.stack th.const a, table.stack td.const a { visibility: hidden; }
@media (max-width: 40rem) {
  .table-wrap:has(> table.stack) { overflow-x: visible; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack { background: transparent; font-size: .95rem; border: 0; border-radius: 0; }
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.stack thead a { visibility: hidden; }   /* 숨은 머리 줄의 [n] 은 탭 순서에 남기지 않는다(.table-cites 에 같은 링크) */
  table.stack tr { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 10px; margin: 0 0 .75rem;
                   padding: .3rem .85rem; box-shadow: var(--lift); }
  table.stack td, table.stack tbody tr:last-child > td { border: 0; border-top: 1px solid var(--line); padding: .4rem 0; display: grid;
                   line-height: 1.5;
                   grid-template-columns: minmax(5.5rem, 34%) minmax(0, 1fr); gap: .7rem; align-items: baseline; }
  /* 태그가 든 칸 값은 readable.scan_cells 가 <span class="cv"> 하나로 감싼다 — 날짜 + 상태 표시 + [n] 같은 여러 조각이 그리드 칸으로 흩어지지 않게 */
  table.stack td::before { content: attr(data-label); color: var(--muted); font-size: .82rem; font-weight: 600; line-height: 1.45; }
  table.stack td:first-child { border-top: 0; display: block; font-family: var(--serif); font-weight: 700; font-size: 1.06rem;
                               color: var(--heading); padding: .35rem 0 .3rem; }
  table.stack tbody tr:last-child > td:first-child { display: block; border-top: 0; }   /* 마지막 카드 제목이 좁은 칸에 갇히지 않게(위 마지막 줄 규칙보다 앞서게) */
  table.stack td:first-child::before { display: none; }   /* 첫 칸(카드 제목) 이름은 카드마다 되풀이하지 않고 첫 카드 위에 한 번 */
  table.stack tbody { padding-top: 1.35rem; }
  table.stack tbody tr:first-child td:first-child::before { display: block; position: absolute; top: -1.4rem; left: 0;
                                                           font-family: var(--sans); font-size: .75rem; font-weight: 700;
                                                           letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  table.stack td.empty, table.stack td.dup { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
                                             clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  table.stack td.empty a, table.stack td.dup a { visibility: hidden; }
  .table-cites { display: block; }
  table.stack caption { display: block; width: 100%; padding-bottom: .5rem; }
  table.stack caption.sr-only { width: 1px; padding: 0; }   /* 화면 읽기용 caption 은 폭 1px 그대로(390px 에서 쪽이 옆으로 밀리지 않게) */
}
/* 폰에서도 표 그대로인 표(readable.needs_stack 가 '들어간다'고 본 3~4칸 표 — 시간표 등): 글자·칸 여백을 조금 줄인다(디자인 크리틱) */
@media (max-width: 40rem) {
  table:not(.stack) { font-size: .88rem; }
  table:not(.stack) th, table:not(.stack) td { padding: .45rem .45rem; }
}
.day-check { display: block; margin: 1rem 0 .4rem; padding: .4rem .65rem; background: var(--soft-bg); color: var(--soft-ink);
             border-radius: 6px; font-size: .88rem; font-weight: 600; }
dd .day-check { margin: 0 0 .3rem; }
/* 글 카드(홈·허브·글 끝 'Read next', shortcodes.card_html) — 링크는 제목 하나, 그 링크를 카드 전체로 넓힌다(안에 다른 링크를
   겹치지 않는다 — 사진 출처 줄만 위에 올린다). 작은 분류(kicker)는 글자로 */
.card-grid { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: 1rem;
             grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.card-grid-tight { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: .85rem 1rem .95rem; background: var(--card);
        border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--lift); }
.card:hover { border-color: var(--link); box-shadow: 0 3px 10px rgba(28, 36, 33, .10); }
.card { transition: box-shadow .15s ease, border-color .15s ease; }
/* R8: 누르는 카드임을 보이게 — 제목 끝 화살표(글자 링크와 같은 색, 낭독기에는 읽지 않음) */
.card .card-title a::after { content: "\00a0→"; content: "\00a0→" / ""; font-family: var(--sans); font-weight: 600; }   /* 붙는 빈칸 — 화살표만 홀로 다음 줄로 가지 않는다 */
.card:hover .card-title a::after, .card .card-title a:focus-visible::after { font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }
.card:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.card .card-title { margin: 0; font-family: var(--serif); font-size: 1.12rem; font-weight: 700; line-height: 1.3; color: var(--heading); }
.card .card-title a { color: var(--link); text-decoration: none; }
.card:hover .card-title a, .card .card-title a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; }   /* 카드 테두리가 누름 신호 — 밑줄은 누를 때만 */
.card .card-title a:focus-visible { outline: none; }
.card .card-title a::before { content: ""; position: absolute; inset: 0; border-radius: 10px; }   /* 카드 전체가 누르는 자리(R8: ::before — 글 앞이라 끝의 화살표와 줄이 갈리지 않는다) */
.kicker { margin: 0 0 .3rem; color: var(--muted); font: 700 .75rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.card-why { margin: 0 0 .25rem; color: var(--muted); font-size: .9rem; font-weight: 600; line-height: 1.4; }
.card-desc { margin: .4rem 0 0; color: var(--muted); font-size: .92rem; line-height: 1.5; display: -webkit-box; overflow: hidden;
             -webkit-box-orient: vertical; -webkit-line-clamp: 4; }   /* 카드 설명은 4줄까지(전문은 글 첫머리) — 3줄이면 핵심 문장이 '…' 로 잘렸다(2026-11-02 디자인 크리틱) */
.card-featured .card-desc { -webkit-line-clamp: unset; display: block; }
.card-date { margin: .45rem 0 0; color: var(--muted); font-size: .82rem; }
.card-count { margin: .55rem 0 0; color: var(--ink); font-size: .85rem; font-weight: 600; }
.card-credit { position: relative; z-index: 1; margin: .7rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.card.has-media { padding: 0; overflow: hidden; }
.card.has-media .card-body { padding: .85rem 1rem .95rem; }
.card-media-link { display: contents; }   /* R21: 사진 링크가 카드 격자 칸을 바꾸지 않게 */
.card-media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* R8: 사진 출처 줄은 카드 글 아래가 아니라 사진 오른쪽 위 구석에 작게(카드 글 흐름에서 뺀다 — 링크는 그대로 따로 누른다) */
.card.has-media .card-credit { position: absolute; top: 0; right: 0; z-index: 1; max-width: 80%; margin: 0; padding: .15rem .45rem;
                               background: rgba(16, 27, 23, .86); color: #F7F5EF; font-size: .72rem; line-height: 1.35;
                               border-bottom-left-radius: 6px; }
.card.has-media .card-credit a { color: #F7F5EF; }
.card-group { margin: 1.6rem 0 0; font-size: 1.15rem; }   /* index_all 허브의 허브별 묶음 제목 */
.card-group a { display: inline-flex; align-items: center; min-height: var(--tap); }
/* 홈: 짧은 소개 → 대표 글 1 + 카드 → 나머지 → 장소 → 확인 방법 */
.lead { font-size: 1.05rem; }
.home-intro { max-width: 46rem; padding: 1.2rem 0 .2rem; }
.home-intro h1 { font-size: 2.35rem; line-height: 1.15; margin: .4rem 0 .6rem; }
.home-intro .lead { margin: 0; color: var(--muted); font-size: 1.1rem; }
.start-grid { display: grid; gap: 1rem; margin-top: .8rem; }
.start-featured, .start-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.start-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.card-featured { border-top: 6px solid var(--lime); }
.card-featured .card-title { font-size: 1.45rem; line-height: 1.25; }
.card-featured .card-desc { color: var(--ink); font-size: 1rem; max-width: 40rem; }
@media (max-width: 51.99rem) {   /* 폰: 대표 사진은 띠로 얇게(첫 화면에 소개·카드 제목이 보이게 — 2026-11-02 디자인 크리틱·승인). 사진 출처 줄은 카드 글 아래에 그대로 */
  .card-featured.has-media .card-media img { aspect-ratio: 3 / 1; }
}
@media (min-width: 52rem) {   /* 넓은 화면: 대표 카드는 사진 왼쪽 · 글 오른쪽(가운데 맞춤), 그 아래 카드 줄. 사진이 없으면 글만(색 띠) */
  .card-featured.has-media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .card-featured.has-media .card-media, .card-featured.has-media .card-media img { height: 100%; }
  .card-featured.has-media .card-body { padding: 1.4rem 1.6rem; }
  .card-featured.has-media .card-credit { top: auto; bottom: 0; right: auto; left: 0; max-width: 48%; border-radius: 0 6px 0 0; }   /* 사진이 왼쪽 칸 — 사진 왼쪽 아래 */
}
/* R2 홈 디자인(2026-11-02): 벤치마크 토큰(GOV.UK·Visit Denmark·Japan Guide·Seat61) — 폭 62rem, 8px 단위(1rem=16px 기준 .5rem 배수),
   납작한 1px 테두리 카드(그림자 없음), 본문 .94rem/1.55, 한 가지 강조색(짙은 녹색). 순서: 머리글·주제 알약 + 'Start here' 큰 카드 → 나머지 상황 카드 3열(전부 사진) → 확인 방법 띠 → 바닥글 3열 */
body.t-home main { max-width: 62rem; padding-bottom: 0; }
:root { --band: #EDE9DE; }
@media (prefers-color-scheme: dark) { :root { --band: #16241F; } }
.home-hero { padding: 2rem 0 0; display: grid; gap: 1.5rem; align-items: center; }
.home-hero h1 { text-wrap: balance; font-size: 2.5rem; line-height: 1.15; margin: 0 0 .75rem; letter-spacing: -.015em; }
.home-hero .lead { text-wrap: balance; margin: 0; color: var(--muted); font-size: 1.125rem; line-height: 1.55; max-width: 34rem; }
.path-lead { list-style: none; margin: 0; padding: 0; }
@media (min-width: 52rem) { .home-hero { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 2.5rem; padding-top: 1.75rem; align-items: center; }
                            .hero-text { padding-top: 0; } .path-lead .card-title { font-size: 1.35rem; } }
.home-paths { margin-top: 1.25rem; }
.path-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
body.t-home .card-path { border-radius: 8px; box-shadow: none; }
body.t-home .card-path:hover { box-shadow: none; border-color: var(--green); }
body.t-home .card-path .card-title a::before { border-radius: 8px; }
.card-path.has-media .card-body { display: flex; flex: 1; flex-direction: column; padding: 1rem 1.25rem 1.1rem; }
.card-path .kicker { display: flex; align-items: center; min-height: 1.4rem; margin: 0 0 .35rem; color: var(--muted); font: 700 .75rem/1.2 var(--sans); text-transform: uppercase; letter-spacing: .06em; }
.card-path .card-media img, .card-path .card-tile { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.card-path .card-tile { display: flex; align-items: center; justify-content: center; background: var(--soft-bg); border-bottom: 1px solid var(--line); color: var(--heading); }
.path-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--card); border: 1px solid var(--line); }
.path-icon svg { width: 2.2rem; height: 2.2rem; stroke-width: 1.6; }
.card-path .card-title { font-size: 1.2rem; line-height: 1.3; }
.card-path .card-desc { margin-top: .4rem; color: var(--ink); font-size: .94rem; line-height: 1.55; display: block; }
.card-path .card-date { margin-top: auto; padding-top: .75rem; }
.card-path.has-media .card-credit { position: static; max-width: none; margin: .4rem 0 0; padding: 0; background: none; border-radius: 0; color: var(--muted); font-size: .72rem; }
.card-path.has-media .card-credit a { color: var(--muted); }
@media (min-width: 48rem) { .path-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } .card-path .card-media img, .card-path .card-tile { aspect-ratio: 16 / 10; } }
.home-topics { margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; }
.topics-label { color: var(--muted); font: 700 .75rem/1.2 var(--sans); text-transform: uppercase; letter-spacing: .06em; }
.topic-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.topic-pills a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 1rem; border: 1px solid var(--edge); border-radius: 999px; background: var(--card);
                 color: var(--link); font-weight: 600; font-size: .94rem; text-decoration: none; }
.topic-pills a::after { content: "\00a0→"; }
.topic-pills a:hover { border-color: var(--green); }
.kicker .pill { display: inline-block; margin-left: .5rem; padding: .1rem .5rem; border-radius: 999px; background: #DCE8C0; color: var(--accent-ink); font-size: .68rem; font-weight: 700; letter-spacing: .04em; vertical-align: 1px; }
@media (max-width: 39.99rem) { .home-hero { padding-top: .75rem; gap: .875rem; } .topics-label { display: none; } .home-topics { margin-top: .875rem; } .path-lead .card-media img { aspect-ratio: 5 / 2; } .home-hero h1 { font-size: 1.875rem; line-height: 1.2; margin-bottom: .5rem; } .home-hero .lead { font-size: .97rem; line-height: 1.45; }
                               .home-paths { margin-top: .875rem; } .home-topics { margin-top: .75rem; } .path-grid { gap: .875rem; }
                               .topic-pills a { padding: 0 .75rem; font-size: .88rem; } .topic-pills { gap: .4rem; }
                               .card-path.has-media .card-body { padding: .85rem 1rem 1rem; }
                               .card-path .card-media img, .card-path .card-tile { aspect-ratio: 2 / 1; }
                               body.t-home header.site nav.sections { display: none; } }   /* 폰 홈: 네 입구가 곧 길잡이라 섹션 줄은 접는다(다른 쪽은 그대로) */
/* 확인 방법: 전체 폭 띠(바탕만 화면 끝까지 — 글은 본문 폭 안) */
body.t-home .home-trust { max-width: none; margin: 3rem 0 0; padding: 2rem 0; }
body.t-home .home-trust.trust-band { background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); }
body.t-home .home-trust h2 { font-size: 1.5rem; margin: 0 0 .75rem; }
body.t-home .home-trust p { max-width: 46rem; color: var(--muted); font-size: .94rem; line-height: 1.55; }
.trust-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem 2rem; }
.trust-steps li { display: flex; flex-direction: column; gap: .15rem; border-left: 3px solid var(--green); padding-left: .85rem; font-size: .94rem; line-height: 1.5; color: var(--muted); }
.trust-steps strong { color: var(--ink); font-size: 1rem; }
@media (min-width: 40rem) { .trust-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body.t-home .home-trust .trust-note { margin: 1rem 0 0; }
body.t-home footer.site { margin-top: 0; }
body.t-home header.site .inner, body.t-home footer.site > * { max-width: 62rem; }   /* 머리·글·바닥이 같은 왼쪽 선 */
.see-all { margin: .8rem 0 0; }
.see-all a, .trust-links a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; }
.home-trust { max-width: 42rem; }
.home-trust p { margin: .3rem 0; }
/* 글 끝 'Read next' — 독자의 다음 결정(앞머리 related 의 까닭 한 줄 + 제목). How we checked 앞에 */
.read-next { margin: 2.2rem 0 1.4rem; }
.read-next h2 { margin-bottom: .4rem; }
.sources ul, .sources ol { padding-left: 1.6rem; font-size: .9rem; }
ol.sources-list { font-size: .86rem; line-height: 1.5; color: var(--muted); }   /* 글 끝 출처 목록 — 조용하고 촘촘하게(폰 2화면 넘던 것, 디자인 크리틱) */
ol.sources-list li::marker { color: var(--ink); font-weight: 600; }
.author { border-top: 1px solid var(--line); margin-top: 2rem; font-size: .95rem; }
footer.site { border-top: 1px solid var(--line); margin-top: 3rem; padding: 1rem 0 2rem; color: var(--muted); font-size: .85rem; }
footer.site > * { padding-left: 1rem; padding-right: 1rem; }   /* 넓은 화면에서도 본문 글줄과 같은 왼쪽 선 */
footer.site a { display: inline-flex; align-items: center; min-height: var(--tap); }
.footer-pages { display: flex; flex-wrap: wrap; gap: 0 1.1rem; list-style: none; margin: .3rem auto; padding: 0; }   /* 사이는 간격만(글자 '·' 없음) */
.footer-disclosure, .copyright { margin: .6rem auto; }
/* R2 바닥글: 3열(이 사이트 · Guides · About this site) — 폰은 한 열. 수수료 문장은 열 아래 전체 폭 */
.footer-cols { display: grid; gap: 1rem 2rem; padding-top: .5rem; }
.footer-h { margin: 0 0 .3rem; color: var(--ink); font: 700 .8rem/1.3 var(--sans); text-transform: uppercase; letter-spacing: .06em; }
.footer-about p:not(.footer-h) { margin: 0; max-width: 24rem; line-height: 1.55; }
.footer-hubs, .footer-cols .footer-pages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.footer-cols .footer-nav { margin: 0; }
@media (min-width: 40rem) { .footer-cols { grid-template-columns: 1.4fr 1fr 1fr; } }
/* 실측 데이터(숏코드) — 상자·표·숙소 카드 */
.measure { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 0 6px 6px 0;
           padding: .6rem .9rem; margin: 1rem 0; font-size: .95rem; }
.measure-head { margin: 0; }
.measure ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.data-empty, .est, .area { color: var(--muted); }
.hotel-cards { display: grid; gap: 1rem; margin: 1rem 0; }
.hotel-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem 1rem; min-width: 0;
              box-shadow: var(--lift); }
.hotel-name { scroll-margin-top: 1rem; }   /* 위쪽 표·빠른 답이 #hotel-… 로 바로 오게(R10) */
.hotel-card:has(.hotel-name:target) { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.hotel-card p { margin: 0 0 .3rem; }
.hotel-name { margin: 0 0 .15rem; line-height: 1.3; }
.hotel-name strong { font-family: var(--serif); font-size: 1.17rem; color: var(--heading); }
.hotel-name .area { display: block; margin-top: .25rem; font-size: .88rem; }   /* 위치는 이름 아래 줄로(R4 디자인 크리틱) */
.hotel-card .glance { display: flex; flex-wrap: wrap; gap: .3rem .4rem; list-style: none; margin: .45rem 0 .1rem; padding: 0; }   /* 한눈에 꼬리표(R10) */
.hotel-card .glance li { margin: 0; padding: .1rem .6rem; border-radius: 999px; background: var(--soft-bg); color: var(--heading);
                         border: 1px solid var(--green); font-size: .84rem; font-weight: 700; line-height: 1.35; }
.hotel-card .good-for { margin: .6rem 0 .3rem; padding: .5rem .7rem; font-size: .95rem; background: var(--qa-bg);
                        border-left: 4px solid var(--green); border-radius: 0 8px 8px 0; }   /* 읽는 사람 상황 한 줄(확인된 사실에 근거) */
.hotel-card .good-for strong { font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--heading); margin-right: .25rem; }
.hotel-card dl { display: grid; grid-template-columns: 8.2rem minmax(0, 1fr); gap: 0; margin: .5rem 0 0; font-size: .95rem; }
.hotel-card dt { color: var(--muted); font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
                 padding: .15rem .9rem 0 0; margin-top: .6rem; border-top: 1px solid var(--line); }
.hotel-card dd { margin: .6rem 0 0; padding-top: .1rem; min-width: 0; border-top: 1px solid var(--line); }
.hotel-card dl > dt:first-child, .hotel-card dl > dt:first-child + dd { border-top: 0; margin-top: .1rem; }
@media (max-width: 30rem) {   /* 폰: 칸 이름을 값 위에 — 왼쪽 칸이 폭을 먹어 좁은 기둥이 되지 않게 */
  .hotel-card dl { grid-template-columns: minmax(0, 1fr); }
  .hotel-card dt { padding-top: .6rem; margin-top: .7rem; padding-bottom: .1rem; }
  .hotel-card dd { margin-top: 0; padding-top: 0; border-top: 0; }
  .hotel-card dl > dt:first-child { padding-top: 0; margin-top: .2rem; }
}
.hotel-card details.card-more { margin: .5rem 0 0; }
.hotel-card details.card-more > summary { display: flex; align-items: center; min-height: var(--tap); cursor: pointer; font-weight: 700;
                                          color: var(--link); font-size: .95rem; list-style: none; }
.hotel-card details.card-more > summary::-webkit-details-marker { display: none; }
.hotel-card details.card-more > summary::after { content: "▾"; margin-left: .4rem; }
.hotel-card details.card-more[open] > summary::after { content: "▴"; }
.hotel-card details.card-more > dl { margin-top: 0; }
.hotel-card figure.card-photo { margin: .6rem 0 .4rem; }
.hotel-card figure.card-photo img { display: block; width: 100%; max-height: 9.5rem; object-fit: cover; border-radius: 8px; }
.hotel-card figure.card-photo figcaption { margin-top: .25rem; font-size: .8rem; line-height: 1.4; color: var(--muted); }
.hotel-card .hotel-checked { margin: .5rem 0 0; color: var(--muted); font-size: .82rem; }   /* 카드마다 확인일 한 번(사실마다 되풀이하지 않는다) */
.hotel-card .book { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .5rem; margin: .45rem 0 0; }   /* 트립닷컴·공식 버튼 한 줄(R9) */
.hotel-card .spec-list { margin: 0; padding-left: 1.05rem; }   /* 칸 안 값은 짧은 목록(R9) */
.hotel-card .spec-list li { margin: 0 0 .28rem; }
.hotel-card .spec-list li:last-child { margin-bottom: 0; }
.book a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 .9rem; border-radius: 8px; font-weight: 700;
          text-decoration: none; background: var(--green); color: var(--head-ink); border: 1px solid var(--btn-edge); }
.book a.official-site { background: transparent; color: var(--link); border: 2px solid currentColor; }
.badge { display: inline-block; font-size: .8rem; font-weight: 700; padding: 0 .45rem; border-radius: 999px; border: 1px solid currentColor; }
.badge-stayed { color: var(--ok); }
.badge-lobby { color: var(--link); }
.badge-exterior { color: var(--temp); }
.badge-research { color: var(--muted); }
.updates { padding-left: 1.2rem; font-size: .95rem; }
/* 갱신 기록: 가장 최근 한 줄만 보이고 나머지는 'Earlier updates (N)'(shortcodes.render_updates) — 누르는 자리 44px */
.updates + .updates-more { margin-top: -.6rem; }
.updates-more { margin: 0 0 1rem; font-size: .95rem; }
.updates-more > summary { display: flex; align-items: center; gap: .35rem; min-height: var(--tap); cursor: pointer; list-style: none;
                          color: var(--link); font-weight: 600; }
.updates-more > summary::-webkit-details-marker { display: none; }
.updates-more > summary::after { content: "▾"; content: "▾" / ""; }
.updates-more[open] > summary::after { content: "▴"; content: "▴" / ""; }
.updates-more ul { margin: 0; padding-left: 1.2rem; }
/* 사진([[image:<id>]] — 공개 라이선스, 출처는 그림 아래와 /photo-credits/) */
figure.photo { margin: 1.2rem 0; }
figure.photo img { display: block; max-width: 100%; height: auto; max-height: 75vh; object-fit: contain; margin: 0 auto;
                   border-radius: 6px; }   /* width·height 속성의 비율로 자리를 먼저 잡는다(width: auto 는 그 자리를 지워 쪽이 밀렸다, CLS) */
figure.photo figcaption { color: var(--muted); font-size: .85rem; margin-top: .35rem; line-height: 1.45; }
figure.photo .credit { font-size: .8rem; }
figure.photo .credit a, .card-credit a { color: var(--muted); text-decoration-thickness: 1px; }   /* 출처 줄은 조용하게(디자인 크리틱) */
figure.photo .caption { color: var(--ink); }
.photo-omitted { border: 1px dashed var(--line); padding: 1.2rem .8rem; margin: 0; text-align: center; color: var(--muted); font-size: .9rem; }
.credits { list-style: none; padding: 0; }
.credits li { border-bottom: 1px solid var(--line); padding: .6rem 0; }
.credits p { margin: .15rem 0; }
/* 타임라인 그림([[timeline:<id>]] — data/stay-en/charts/, src/blogops/timeline.py): 인라인 SVG(자바스크립트 없음), 폰 390px 기준.
   운행은 --tl-run 한 색(막대·눈금·점), 할증은 한 색상 두 단계 + 글자, 빈 시간은 점선 상자 + 글자 — 색만으로 구분하지 않는다 */
figure.timeline { margin: 1rem 0 1.6rem; padding: .7rem .6rem .35rem; background: var(--card); border: 1px solid var(--line);
                  border-radius: 10px; }
figure.timeline figcaption { margin: 0 0 .3rem; }
.tl-title { display: block; font-family: var(--serif); font-weight: 700; font-size: 1.06rem; line-height: 1.3; color: var(--heading); }
.tl-sub { display: block; margin-top: .2rem; color: var(--muted); font-size: .84rem; line-height: 1.45; }
.tl-svg { display: block; width: 100%; max-width: 32rem; height: auto; margin: .35rem auto 0; font-family: var(--sans); }
/* 글자 테두리(paint-order·stroke) 없음 — 삼성 인터넷 등 강제 다크 모드가 테두리 색만 남겨 흰 외곽선이 생겼다(R18). 글자는 늘 판 위에 바로 놓는다 */
.tl-bg { fill: var(--tl-bg); }
.tl-svg text { fill: var(--tl-ink); stroke: none; }
.tl-svg .tl-row { font-size: 15px; font-weight: 700; }
.tl-svg .tl-val, .tl-svg .tl-gap-t { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tl-svg .tl-gap-t { fill: var(--tl-muted); }
.tl-svg .tl-note { fill: var(--tl-muted); font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tl-svg .tl-axis { fill: var(--tl-muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tl-svg .tl-axis.tl-mid { fill: var(--tl-ink); font-weight: 700; }
.tl-svg .tl-in { font-size: 14px; font-weight: 700; }   /* 구간 위 글자 — 구간은 반투명이라 판이 비쳐 본문 글자색 그대로 4.5:1 이상 */
.tl-lane { fill: var(--tl-muted); fill-opacity: .16; }
.tl-grid { stroke: var(--tl-muted); stroke-opacity: .6; stroke-width: 1; }
.tl-grid.tl-mid { stroke-opacity: 1; stroke-width: 1.5; }
.tl-run { fill: var(--tl-run); }
.tl-dot { fill: var(--tl-run); }
.tl-tick { stroke: var(--tl-run); stroke-width: 2; stroke-linecap: round; }
.tl-hit { fill: transparent; }
.tl-dep:hover .tl-tick { stroke-width: 3.5; }   /* 눈금 hover — 시각은 <title> 로(값은 글 목록에도) */
.tl-band-1 { fill: var(--tl-band-1); stroke: var(--tl-band-line); stroke-width: 1; }
.tl-band-2 { fill: var(--tl-band-2); stroke: var(--tl-band-line); stroke-width: 1; }
.tl-gap { fill: none; stroke: var(--tl-muted); stroke-width: 1.2; stroke-dasharray: 3 2.5; }
.tl-alt { margin: .25rem 0 0; font-size: .9rem; }
.tl-alt summary { display: flex; align-items: center; gap: .35rem; min-height: var(--tap); cursor: pointer; list-style: none;
                  color: var(--link); font-weight: 600; }   /* 다른 접기와 같은 ▾/▴ 표시 */
.tl-alt summary::-webkit-details-marker { display: none; }
.tl-alt summary::after { content: "▾"; content: "▾" / ""; }
.tl-alt[open] summary::after { content: "▴"; content: "▴" / ""; }
.tl-alt ul { margin: 0 0 .5rem; padding-left: 1.1rem; }
.tl-alt li { margin: .25rem 0; }
@media (forced-colors: active) {
  .tl-run, .tl-dot { fill: CanvasText; }
  .tl-tick { stroke: CanvasText; }
  .tl-band-1, .tl-band-2, .tl-lane { fill: Canvas; stroke: CanvasText; }
  .tl-svg text { fill: CanvasText; }
  .tl-bg { fill: Canvas; }
}
/* 출처(data/stay-en/sources/) — 번호 붙은 목록(id src-<n>) · 본문 인용 [n] · 막차 줄 상태 표시(글자 + 테두리, 색만으로 구분하지 않음) */
.sources-list li { margin: .35rem 0; overflow-wrap: anywhere; }
.sources-list li:target { background: var(--qa-bg); outline: 3px solid var(--focus); outline-offset: 2px; }   /* [n] 로 온 줄 */
.sources-list a { display: inline-block; padding: .2rem 0; }   /* 누르는 자리 24px 이상(줄 높이 + 위아래) */
.src-back { min-width: 24px; text-align: center; text-decoration: none; }   /* ↩ 본문의 첫 인용으로 */
.src-end, .sources-list time { white-space: nowrap; }   /* 줄 끝 주소 링크 + ↩ 은 한 덩어리(inline-block 사이는 줄바꿈 없는 빈칸으로도 끊긴다) */
.src-lang, .src-note, .src-kind { color: var(--muted); }
sup.cite { font-size: .72em; line-height: 0; margin-left: .1em; white-space: nowrap; }   /* R8: 작고 회색 — 본문 흐름을 끊지 않게(누르는 자리는 아래 ::after 로 그대로) */   /* [1][3] 은 한 덩어리(앞 낱말에는 빌드가 붙인다) */
sup.cite a { position: relative; text-decoration: none; padding: 0 .05em; font-weight: 500; color: var(--muted); }
sup.cite a:hover { color: var(--link); text-decoration: underline; }
sup.cite a::after { content: ""; position: absolute; left: -.5em; right: -.5em; top: -1.6em; bottom: -1.6em; }   /* 누르는 자리 넓게(세로 44px 안팎) */
sup.cite a + a::after { left: 0; }   /* 붙은 [1][3] 은 누르는 자리가 서로 겹치지 않게 */
sup.cite a:has(+ a)::after { right: 0; }
sup.cite a:focus-visible, .sources-list a:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.chip { display: inline-block; font-size: .78rem; font-weight: 700; line-height: 1.35; padding: 0 .4rem; border: 1px solid currentColor;
        border-radius: 4px; background: var(--card); white-space: nowrap; }
.chip-official { color: var(--ok); }
.chip-secondary { color: var(--warn); }
.chip-unchecked { color: var(--muted); border-style: dashed; }
.chip-temporary { color: var(--temp); }
/* 폰 읽기 장치(2026-11-01 '요약 그림·길 찾기 링크 등') — 자바스크립트 없음, 라이트·다크 모두 위 토큰만 */
/* 표 칸 훑어보기(readable.scan_cells): 시각 칸 · 24:xx → 00:xx + 'after midnight' · 예/아니오 = ✓/✕ 표시 + 글자(색만으로 구분하지 않는다) */
td.cell-time { font-variant-numeric: tabular-nums; }
.after-midnight { display: block; color: var(--muted); font-size: .75rem; font-weight: 600; line-height: 1.3; }
.yn-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.3em; height: 1.3em; margin-right: .4em;
           border-radius: 50%; font-size: .82em; font-weight: 700; line-height: 1; color: var(--card); }
td.cell-yes .yn-mark { background: var(--ok); }
td.cell-no .yn-mark { background: var(--alert-line); }
@media (max-width: 40rem) {
  table.stack td.cell-time { font-size: 1.12rem; font-weight: 700; }
  table.stack td.cell-yes, table.stack td.cell-no { font-weight: 600; }
}
/* 'On this page' 칩 줄(readable.page_nav) — 빠른 답 바로 다음(그림 앞). 보이는 높이 36px, 누르는 자리는 위아래로 넓혀 44px */
nav.on-page { margin: -.3rem 0 1.5rem; }
.on-page-label { margin: 0 0 .3rem; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
nav.on-page ul { display: flex; flex-wrap: wrap; gap: .6rem .45rem; list-style: none; margin: 0; padding: 0; }
nav.on-page a { position: relative; display: inline-flex; align-items: center; min-height: 2.25rem; padding: .2rem .8rem;
                border: 1px solid var(--edge); border-radius: 999px; background: var(--card); color: var(--link); font-size: .88rem;
                font-weight: 600; line-height: 1.25; text-decoration: none; }
nav.on-page a::after { content: ""; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }   /* 테두리 안쪽부터 재서 34 + 10 = 누르는 자리 44px */
nav.on-page a:hover { border-color: currentColor; }
@media (max-width: 40rem) {   /* 폰(R8): 칩 대신 두 칸 격자 — 옆으로 넘기는 한 줄은 늘 반쯤 잘린 칩이 보였고(시각 리뷰 4번), 그냥 감싸면 들쭉날쭉 6줄.
                                 칸 높이 2.5rem 이상(+ 위아래 2px = 누르는 자리 44px), 글이 길면 칸 안에서 두 줄 */
  nav.on-page ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
  nav.on-page a { display: flex; height: 100%; min-height: 2.5rem; padding: .3rem .7rem; border-radius: 8px; font-size: .82rem; line-height: 1.25; }
  nav.on-page a::after { top: -2px; bottom: -2px; }
}
/* 넓은 화면(75rem+): 'On this page' 를 글 오른쪽 고정 목차로(같은 링크 — 본문 안 칩 줄은 숨긴다, 한 번에 하나만 보인다) */
.toc-rail { display: none; }
@media (min-width: 75rem) {
  body.t-article.has-toc main { max-width: 68rem; }   /* 머리(68rem)와 같은 왼쪽 선 — 글 열은 그 선에서 시작, 목차는 오른쪽 */
  .has-toc .article-layout { display: grid; grid-template-columns: minmax(0, 42rem) 16rem; gap: 4rem; align-items: start; }
  .has-toc article nav.on-page { display: none; }
  .toc-rail { display: block; position: sticky; top: 1.5rem; margin-top: .6rem; }
  .toc-rail ul { list-style: none; margin: .4rem 0 0; padding: 0; border-left: 2px solid var(--line); }
  .toc-rail a { display: block; padding: .3rem 0 .3rem .9rem; margin-left: -2px; border-left: 2px solid transparent; color: var(--link);
                font-size: .9rem; line-height: 1.35; text-decoration: none; }
  .toc-rail a:hover { border-left-color: var(--lime); text-decoration: underline; }
}
/* 절 접기(readable.collapse_method): 'How we checked'(method, 늘) · 앞머리 fold 에 적은 절(fold) — 같은 꼴. 제목(h2)은 보통 제목
   그대로 위에, 그 아래 'Show details ▾' 줄이 <summary>(44px, 펼치면 'Hide details ▴'). 색은 토큰만(라이트·다크 같은 규칙) */
h2:has(+ details.method), h2:has(+ details.fold) { margin-bottom: .1rem; }
details.method, details.fold { margin: 0 0 1.2rem; }
details.method > summary, details.fold > summary { display: flex; align-items: center; justify-content: space-between; gap: .35rem; min-height: var(--tap);
                                                   cursor: pointer; list-style: none; color: var(--link); font-size: .95rem;
                                                   font-weight: 600; padding: .2rem .9rem; border: 1px solid var(--edge); border-radius: 8px;
                                                   background: var(--card); }   /* 접힌 자리를 누르는 줄로 보이게(2026-11-02 디자인 크리틱) */
details.method > summary:hover, details.fold > summary:hover { border-color: currentColor; }
details.method > summary::-webkit-details-marker, details.fold > summary::-webkit-details-marker { display: none; }
details.method > summary::after, details.fold > summary::after { content: "▾"; content: "▾" / ""; }
details.method[open] > summary::after, details.fold[open] > summary::after { content: "▴"; content: "▴" / ""; }
details[open] > summary .when-closed, details:not([open]) > summary .when-open { display: none; }
/* 번호 목록 = 단계 카드(CSS 만) — 글 본문(article 바로 아래)의 ol. 출처 목록(.sources-list)은 그대로 */
article > ol:not(.sources-list) { list-style: none; counter-reset: step; display: grid; gap: .55rem; margin: 1rem 0 1.3rem; padding: 0; }
article > ol:not(.sources-list) > li { counter-increment: step; position: relative; min-height: 2.9rem; padding: .6rem .85rem .6rem 3rem;
                                       background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
article > ol:not(.sources-list) > li::before { content: counter(step); position: absolute; left: .7rem; top: .62rem; display: flex;
                                               align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem;
                                               border-radius: 50%; background: var(--lime); color: var(--accent-ink);
                                               font-size: .9rem; font-weight: 700; line-height: 1; }
/* 길 찾기([[maps]]·숙소 카드, shortcodes.maps_html): 기사에게 보일 큰 한국어 이름 + 지도 앱 링크 3개(누르는 자리 44px) */
.maps { margin: 1rem 0; padding: .55rem .9rem .15rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.hotel-card .maps { margin: .6rem 0 0; padding: .5rem 0 0; background: transparent; border: 0; border-top: 1px solid var(--line);
                    border-radius: 0; }
.maps p { margin: 0; }
.maps-name { font-family: var(--serif); font-weight: 700; color: var(--heading); line-height: 1.3; }
.maps-driver { margin-top: .2rem; color: var(--muted); font-size: .82rem; font-weight: 600; }
.maps-ko { display: block; color: var(--ink); font-family: var(--sans); font-size: 1.6rem; font-weight: 700; line-height: 1.3;
           word-break: keep-all; -webkit-user-select: all; user-select: all; }   /* 한 번 누르면 한국어 이름 전체가 선택 — 택시 앱에 붙이기(자바스크립트 없이, 2026-11-01 Gemini 검토) */
.maps .maps-open { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin: .1rem 0 .6rem; }
.maps-label { grid-column: 1 / -1; color: var(--muted); font-size: .82rem; font-weight: 600; }
.maps-open .sep { display: none; }   /* 글자만 읽을 때의 'Naver Map · Kakao Map · Google Maps' — 화면에서는 단추 세 개 */
.maps-open a { display: flex; align-items: center; justify-content: center; min-height: var(--tap); padding: .2rem .3rem;
               background: var(--paper); border: 1px solid var(--edge); border-radius: 8px; color: var(--link); font-size: .88rem;
               font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; }
.maps-open a:hover { border-color: currentColor; }
/* 카드 안 길 찾기(R10): 큰 단추 셋 대신 한 줄 글 링크(누르는 자리는 44px 그대로), 한국어 이름은 줄여서 */
.hotel-card .maps-open { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .2rem; margin: 0; }
.hotel-card .maps-label { grid-column: auto; margin-right: .2rem; }
.hotel-card .maps-open a { display: inline-flex; min-height: var(--tap); padding: .2rem .55rem; background: transparent; border: 0;
                           font-size: .9rem; text-decoration: underline; text-underline-offset: .15em; }
.hotel-card .maps-ko { font-size: 1.25rem; }
.hotel-card .maps-driver { margin-top: .1rem; }
@media (max-width: 30rem) {
  body { font-size: 1.03125rem; }   /* 16.5px */
  h1 { font-size: 1.55rem; }
  .home-intro h1 { font-size: 1.75rem; }
  .card-featured .card-title { font-size: 1.25rem; }
  header.site .inner { gap: 0 1rem; }
}
/* ── R11(2026-11-02): 읽기 소음 줄이기 · 숙소 카드 v3 · 폰 길찾기 ─────────────────────────────── */
/* 글 머리: 확인일 · 출처 한 줄를 한 줄(작은 회색)로 — 문구는 그대로, 줄만 합친다. 제휴 한 줄은 그 아래 그대로 */
.post-meta .meta, .post-meta .source-note { display: inline; }
.post-meta .meta + .source-note { margin: 0; }
.post-meta .meta + .source-note::before { content: " · "; content: " · " / ""; }
.post-meta .dates time { font-weight: 500; }
.post-meta .disclosure { display: block; }
/* 인용 [n]: 더 작고 옅게(누르는 자리는 그대로) */
sup.cite { font-size: .62em; vertical-align: .5em; line-height: 0; }
sup.cite a { color: var(--muted); opacity: .8; letter-spacing: -.02em; }
sup.cite a:hover, sup.cite a:focus-visible { opacity: 1; }
/* 긴 출처 목록은 접는다(readable.fold_sources) — 열면 목록 그대로 */
details.sources-fold { margin: .2rem 0 1.4rem; }
details.sources-fold > summary { display: inline-flex; align-items: center; gap: .35rem; min-height: var(--tap); cursor: pointer;
                                 color: var(--link); font-size: .9rem; font-weight: 600; list-style: none; }
details.sources-fold > summary::-webkit-details-marker { display: none; }
details.sources-fold > summary::after { content: "▾"; content: "▾" / ""; }
details.sources-fold[open] > summary::after { content: "▴"; content: "▴" / ""; }
details.sources-fold ol.sources-list { font-size: .82rem; }
/* 숙소 카드 v3: 머리(이름·위치·꼬리표 | 작은 사진) — 사진이 없는 카드도 같은 머리 · 칸 이름은 대문자 서식 대신 작은 굵은 글자 · 선 없이 촘촘하게 */
.hotel-card { padding: .85rem .95rem .8rem; }
.hotel-card .card-head { display: flex; align-items: flex-start; gap: .75rem; }
.hotel-card .card-title { flex: 1 1 auto; min-width: 0; }
.hotel-card .card-head figure.card-photo { flex: 0 0 6.5rem; margin: .15rem 0 0; }
.hotel-card .card-head figure.card-photo img { width: 6.5rem; height: 5rem; max-height: none; object-fit: cover; border-radius: 8px; }
.hotel-card .glance { margin: .4rem 0 0; }
.hotel-card .good-for { margin: .6rem 0 .1rem; padding: .4rem .65rem; font-size: .93rem; line-height: 1.45; }
.hotel-card .good-for strong { font-size: .93rem; letter-spacing: 0; text-transform: none; margin-right: .2rem; }
.hotel-card .good-for strong::after { content: ":"; }
/* R12 카드 v4: 칸 이름은 양식 칸이 아니라 문장 머리의 굵은 글자(콜론) — 값이 한 줄이면 이름 옆에 이어 쓰고, 목록이면 이름 아래 */
.hotel-card dl { display: block; margin: .5rem 0 0; font-size: .95rem; line-height: 1.5; }
.hotel-card dt { display: inline; margin: 0; padding: 0; border: 0; color: var(--heading); font-size: inherit; font-weight: 700; letter-spacing: 0; text-transform: none; line-height: inherit; }
.hotel-card dt::after { content: ":"; margin-right: .3rem; }
.hotel-card dd { display: inline; margin: 0; padding: 0; border: 0; }
.hotel-card dd::after { content: ""; display: block; height: .45rem; }
.hotel-card dl > dt:first-child, .hotel-card dl > dt:first-child + dd { margin: 0; padding: 0; }
.hotel-card dd > .spec-list { display: block; margin: .15rem 0 0; }
.hotel-card .spec-list li { margin: 0 0 .15rem; }
.hotel-card details.card-more > dl { margin-top: .1rem; }
@media (max-width: 30rem) {
  .hotel-card .card-head figure.card-photo { flex-basis: 5.5rem; }
  .hotel-card .card-head figure.card-photo img { width: 5.5rem; height: 4.4rem; }
}
.hotel-card details.card-more { margin: .3rem 0 0; }
.hotel-card details.card-more > summary { font-size: .9rem; }
.hotel-card .card-foot { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.hotel-card .card-foot .hotel-checked { margin: 0 0 .1rem; }
.hotel-card .card-foot .maps { margin: .4rem 0 0; padding: 0; border-top: 0; }
.hotel-card .card-foot .maps-open a { padding: .2rem .45rem; font-size: .86rem; }
.hotel-card .card-foot .maps-label { margin-right: 0; font-size: .78rem; }
.hotel-card .photo-note { margin: .35rem 0 0; color: var(--muted); font-size: .76rem; line-height: 1.4; }
.hotel-card .photo-note a { color: var(--muted); }
/* 폰: 오른쪽 아래 'Contents ↑' — 긴 글에서 고르기 줄·절 칩으로 한 번에 돌아간다(자바스크립트 없음). 넓은 화면은 옆 목차가 있다 */
.to-contents { display: none; }
@media (max-width: 74.99rem) {
  .to-contents { display: inline-flex; align-items: center; position: fixed; right: .75rem; bottom: .9rem; z-index: 20; min-height: var(--tap);
                 padding: 0 .9rem; border-radius: 999px; background: var(--heading); color: var(--paper); font-size: .85rem; font-weight: 700;
                 text-decoration: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
  .to-contents:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  footer.site { padding-bottom: 4rem; }
}
@media print { .to-contents { display: none !important; } }
/* R17: 첫 화면은 글을 가리지 않게 — 300px 내려간 뒤에야 나타난다(스크롤 타임라인을 아는 브라우저만, 모르면 늘 보임) */
@keyframes tc-in { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
@supports (animation-timeline: scroll()) {
  @media (max-width: 74.99rem) { .to-contents { animation: tc-in linear both; animation-timeline: scroll(root); animation-range: 280px 420px; } }
}
@media (max-width: 30rem) {   /* 폰: 지도 링크 셋이 한 줄에 들어가게 'Open in:' 글자는 낭독기에만(링크 이름이 'Google Maps' 라 뜻은 그대로) */
  .hotel-card .card-foot .maps-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hotel-card .card-foot .maps-open a:first-of-type { padding-left: 0; }
}
/* R13 짧은 목록(Ron 2026-11-02 19:26): 모르는 값이 많은 숙소 — 이름 · 누구에게 맞나 한 줄 · 단추. 카드보다 가볍게, 같은 폭 */
.hotels-short { margin: 1rem 0 1.4rem; padding: .2rem 0 0; border-top: 1px solid var(--line); }
.hotels-short-lead { margin: .7rem 0 .3rem; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--heading); }
.hotels-short ul { list-style: none; margin: 0; padding: 0; }
.hotels-short li { margin: 0; padding: .65rem 0; border-bottom: 1px solid var(--line); line-height: 1.45; }
.hotels-short li .area { margin-left: .35rem; color: var(--muted); font-size: .85rem; }
.hotels-short .short-why { display: block; margin-top: .15rem; font-size: .95rem; }
.hotels-short .book { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .45rem; }
.hotels-short .book a { min-height: 40px; font-size: .9rem; }
/* R13 카드 칸: 문장 머리 굵은 글자(R12) → 좁은 이름 칸 + 값 칸(격자). 이름은 작은 회색 굵은 글자(양식 칸처럼 대문자·선 없이) */
.hotel-card dl { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: .45rem .7rem; margin: .6rem 0 0; font-size: .95rem; line-height: 1.5; }
.hotel-card dt { display: block; color: var(--muted); font-size: .85rem; font-weight: 700; line-height: 1.75; }
.hotel-card dt::after { content: none; }
.hotel-card dd { display: block; margin: 0; }
.hotel-card dd::after { content: none; }
.hotel-card .card-more dl { margin-top: .4rem; }
@media (max-width: 40rem) {   /* 폰: 이름 칸을 값 위 한 줄로(값이 폭을 다 쓴다 — 좁은 값 칸이 카드를 길게 만들었다, R13) */
  .hotel-card dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hotel-card dt { margin-top: .55rem; line-height: 1.4; font-size: .8rem; }
  .hotel-card dl > dt:first-child { margin-top: 0; }
  .hotel-card dd { margin-top: .05rem; }
}
.hotels-short .book { flex-wrap: wrap; align-items: center; gap: .4rem .5rem; }   /* R13: 좁은 폰에서 'Ad' 글자가 세로로 눌리지 않게 */
.hotels-short .ad-tag, .hotel-card .ad-tag { white-space: nowrap; flex: none; }

/* R15 호텔 글: 빠른 답은 '상황 → 고를 곳 → Catch' 줄로, 카드의 Catch 줄은 Good for 와 다른 색 띠로, 'More details' 는 눌리는 단추처럼, 지도 링크는 누르는 자리가 보이는 알약으로 */
section.quick-answer li { margin: 0 0 .7rem; line-height: 1.5; }
section.quick-answer li em { font-style: normal; font-weight: 700; color: var(--warn); white-space: nowrap; }
.hotel-card .good-for.catch { margin-top: .25rem; background: var(--soft-bg); border-left-color: var(--warn); }
.hotel-card details.card-more > summary { width: fit-content; padding: 0 .85rem; border: 1px solid var(--edge); border-radius: 8px; background: var(--paper); color: var(--link); }
.hotel-card details.card-more > summary:hover { border-color: currentColor; }
.hotel-card .maps-open { gap: .35rem .3rem; }
.hotel-card .maps-open a, .hotel-card .card-foot .maps-open a, .hotel-card .card-foot .maps-open a:first-of-type { padding: .2rem .5rem; font-size: .82rem; border: 1px solid var(--edge); border-radius: 8px; background: var(--paper); }
.book a.official-site:only-child { background: var(--green); color: var(--head-ink); border-color: var(--green); }

/* R15 홈: 첫 화면에 상황 알약 넷(바로 글로), 폰에서는 나머지 입구 셋을 '사진 왼쪽 + 글 오른쪽' 줄로 — 네 글이 한 화면 반 안에 보이게. 주제 알약은 카드 아래로 */
.situation-chips { margin-top: 1rem; }
.situation-chips a { border: 2px solid var(--green); font-weight: 700; }
.situation-chips a::after { content: none; }
.situation-chips a:hover { background: var(--lime); }
.home-topics-row { margin-top: 1.5rem; }
@media (max-width: 39.99rem) {
  .situation-chips { margin-top: .75rem; gap: .35rem; }
  .situation-chips a { padding: 0 .7rem; font-size: .88rem; }
  .path-grid .card-path.has-media { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); align-items: stretch; }
  .path-grid .card-path .card-media { grid-row: 1 / span 2; height: 100%; }
  .path-grid .card-path .card-media img { height: 100%; aspect-ratio: auto; min-height: 100%; }
  .path-grid .card-path.has-media .card-body { display: contents; }
  .path-grid .card-path .kicker, .path-grid .card-path .card-title, .path-grid .card-path .card-desc, .path-grid .card-path .card-date { grid-column: 2; margin-left: 0; padding: 0 .85rem 0 .8rem; }
  .path-grid .card-path .kicker { padding-top: .7rem; margin-bottom: .1rem; }
  .path-grid .card-path .card-title { font-size: 1.05rem; }
  .path-grid .card-path .card-desc { font-size: .88rem; line-height: 1.45; margin-top: .3rem; }
  .path-grid .card-path .card-date { padding-top: .45rem; padding-bottom: .15rem; }
  .path-grid .card-path .card-credit { grid-column: 1 / -1; padding: .25rem .85rem .5rem; margin: 0; border-top: 1px solid var(--line); }
}

/* R15 click-intent: booking/official links in the compare cards are real tap targets on a phone */
@media (max-width: 40rem) {
  table.stack td[data-label="Links"] a { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 .35rem; font-weight: 600; }
}

/* ───────── R16 ───────── */
/* 인용: 괄호 하나, 더 옅게 — 문장 사이 [2][3][4] 더미가 눈을 끌지 않게 */
sup.cite { font-size: .6em; vertical-align: .55em; letter-spacing: 0; }
sup.cite a { opacity: .7; padding: 0 .08em; }
.hotel-card sup.cite { opacity: .85; }
/* 버튼: 트립닷컴(채움) · 공식(윤곽) — 폰에서는 가로로 나란히 꽉 차게, 글자 끝에 ↗ */
.book a { gap: .3em; justify-content: center; text-align: center; line-height: 1.2; padding: .45rem 1rem; }
.book a::after { content: "↗"; content: "↗" / ""; font-weight: 700; font-size: .95em; }
.book a:hover { box-shadow: 0 0 0 2px var(--lime); }
.book a.official-site, .book a.official-site:only-child { background: var(--card); color: var(--link); border: 2px solid var(--link); }
.book a.official-site:only-child { background: var(--green); color: var(--head-ink); }
.hotel-card .book { margin-top: .7rem; }
.hotel-card .book > a { flex: 2 1 13.5rem; }
.hotel-card .book > a.official-site { flex: 1 1 7rem; }
.hotel-card .book .ad-tag { margin-left: -.25rem; align-self: flex-start; margin-top: .3rem; }
@media (max-width: 40rem) { .hotel-card .book > a.official-site { flex: 1 1 100%; } .hotel-card .book > a:not(.official-site) { flex: 1 1 calc(100% - 3.4rem); } .hotel-card .book .ad-tag { align-self: center; margin: 0; } }
.hotel-card .book > a:not(.official-site) + .ad-tag { order: 0; }
/* 사진 없는 카드: 머리 오른쪽 '터미널에서 몇 분' 판 */
.route-tile { flex: 0 0 7.4rem; margin: .15rem 0 0; padding: .45rem .55rem .5rem; border-radius: 8px; background: var(--qa-bg); border: 1px solid var(--line); }
.route-tile .route-lead { margin: 0 0 .2rem; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.route-tile ul { list-style: none; margin: 0; padding: 0; }
.route-tile li { margin: 0 0 .2rem; font-size: .82rem; line-height: 1.3; font-weight: 700; color: var(--heading); }
.route-tile li:last-child { margin-bottom: 0; }
/* FAQ: 질문 굵게, 답은 짧게 */
article h2#faq ~ h3 { font-size: 1.05rem; margin: 1.1rem 0 .25rem; }
/* 넓은 화면: 글 열을 넓혀 카드를 두 칸으로, 읽는 글줄은 그대로 읽기 폭 */
@media (min-width: 75rem) {
  body.t-article.has-toc main { max-width: 82rem; }
  body.t-article.has-toc header.site .inner, body.t-article.has-toc footer.site > * { max-width: 82rem; }
  .has-toc .article-layout { grid-template-columns: minmax(0, 1fr) 14.5rem; gap: 3rem; }
  .has-toc article > :is(p, ul, ol, h2, h3, h4, blockquote, details, aside, nav, dl):not(.day-check) { max-width: 44rem; }
  .has-toc article > .hotel-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1.1rem; }
  .has-toc article > .hotel-cards > .hotel-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .has-toc article > .hotel-cards .hotel-card { height: auto; }
  .has-toc article > .day-check { max-width: 60rem; }
  .has-toc article .hotels-short { max-width: 60rem; }
  .has-toc article .table-wrap { max-width: 100%; }
}
/* 비교표의 'Book' 칸: 링크가 아니라 작은 버튼 둘(Trip.com 채움 · Official 윤곽) — 가운뎃점 글자는 칸 글자 크기 0 으로 가린다 */
td[data-label="Links"] { font-size: 0; line-height: 0; white-space: normal; }
td[data-label="Links"] a { display: inline-flex; align-items: center; min-height: 2.4rem; margin: .15rem .3rem .15rem 0; padding: 0 .7rem; border: 2px solid var(--green);
                          border-radius: 8px; font-size: .88rem; line-height: 1.2; font-weight: 700; text-decoration: none; color: var(--link); background: var(--card); }
td[data-label="Links"] a[rel~="sponsored"] { background: var(--green); color: var(--head-ink); }
td[data-label="Links"] a::after { content: "↗"; content: "↗" / ""; margin-left: .25em; }
td[data-label="Links"] a:hover { box-shadow: 0 0 0 2px var(--lime); }
td[data-label="Links"] .ad-tag { font-size: .7rem; line-height: 1.35; margin: 0 .5rem 0 -.15rem; }
@media (max-width: 40rem) { table.stack td[data-label="Links"] a { min-height: 44px; line-height: 1.2; padding: 0 .75rem; font-weight: 700; } }
/* R16 홈: 첫 카드 사진 모서리의 작은 출처 칩(글 아래 작은 글씨 대신), 줄 카드는 출처 한 줄을 더 조용히, 사진 칸 104px, 주제는 48px 큰 칸 둘 */
.path-lead .card-path.has-media { position: relative; }
.path-lead .card-path.has-media .card-credit { position: absolute; top: 0; right: 0; max-width: 80%; margin: 0; padding: .15rem .45rem; background: rgba(16, 27, 23, .86);
                                               color: #F7F5EF; font-size: .72rem; line-height: 1.35; opacity: 1; border-radius: 0 0 0 6px; }
.path-lead .card-path.has-media .card-credit a { color: #F7F5EF; }
@media (max-width: 39.99rem) {
  .path-grid .card-path.has-media { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .path-grid .card-path .card-credit { padding: .2rem .85rem .4rem; border-top: 0; font-size: .62rem; opacity: .8; }
  .home-topics-row .topic-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .home-topics-row .topic-pills a { display: flex; align-items: center; justify-content: center; min-height: 3rem; font-weight: 700; }
}

/* R16 loop 1: 폰 비교 카드의 '예약' 칸 — 라벨을 없애고 두 버튼을 한 줄에(카드 높이 줄임, 탭 칸 44px 유지) */
@media (max-width: 40rem) {
  table.stack td[data-label="Links"] { display: flex; align-items: center; gap: .4rem; padding: .55rem 0 .45rem; }
  table.stack td[data-label="Links"]::before { display: none; }
  table.stack td[data-label="Links"] a { flex: 1 1 0; justify-content: center; margin: 0; padding: 0 .4rem; font-size: .9rem; white-space: nowrap; }
  table.stack td[data-label="Links"] a[rel~="sponsored"] { flex: 1.35 1 0; }
  table.stack td[data-label="Links"] .ad-tag { flex: none; margin: 0 .1rem 0 -.2rem; }
}

/* ───────── R17 ───────── */
/* 숙소 카드는 접은 채(이름·꼬리표·Good for·Catch·단추) · 같은 무게의 두 단추(Trip.com 비교 · 공식) — 제휴는 'Ad' 꼬리표가 말한다 */
.hotel-card { padding: .75rem .9rem .7rem; }
.hotel-card .card-foot { margin-top: .45rem; padding-top: .4rem; }
.hotel-card details.card-more { margin-top: .45rem; }
.hotel-card details.card-more > summary { min-height: 40px; display: inline-flex; align-items: center; font-size: .88rem; }
.book a:not(.official-site), td[data-label="Links"] a[rel~="sponsored"] { background: var(--qa-bg); color: var(--link); border: 2px solid var(--green); }
.hotel-card .book { display: flex; flex-wrap: wrap; gap: .45rem .5rem; }
.hotel-card .book > a, .hotel-card .book > a.official-site { flex: 1 1 11rem; min-height: 44px; font-size: .92rem; font-weight: 700; }
@media (max-width: 40rem) {
  .hotel-card .book > a.official-site { flex: 1 1 100%; }
  .hotel-card .book > a:not(.official-site) { flex: 1 1 calc(100% - 3.4rem); }
}
/* 접은 절: 'Show N hotels' + 숙소 이름 한 줄(접어도 무엇이 들었는지) */
details.fold > summary .fold-what { display: flex; flex-direction: column; min-width: 0; padding: .35rem 0; }
details.fold > summary .fold-names { font-size: .78rem; font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details.fold > summary:has(.fold-what) { align-items: center; }
details.fold:has(:target)::details-content { content-visibility: visible; }
/* 폰 비교표: 카드 한 장을 낮게 */
@media (max-width: 40rem) {
  table.stack tr { margin-bottom: .55rem; padding: .15rem .8rem; }
  table.stack td, table.stack tbody tr:last-child > td { padding: .22rem 0; line-height: 1.38; font-size: .9rem; gap: .5rem; grid-template-columns: minmax(4.6rem, 30%) minmax(0, 1fr); }
  table.stack td:first-child, table.stack tbody tr:last-child > td:first-child { padding: .25rem 0 .15rem; }
  table.stack td[data-label="Links"] { padding: .35rem 0 .3rem; font-size: 0; }
  table.stack td[data-label="Links"] a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-size: .9rem; }
}
/* R17 홈 폰: 첫 카드 사진 위 출처 칩 대신 다른 카드처럼 글 아래 조용한 한 줄(두 critic: 사진 위 어두운 칩이 거슬림) */
@media (max-width: 39.99rem) {
  .path-lead .card-path.has-media .card-credit { position: static; max-width: none; margin: .4rem 0 0; padding: 0 .85rem .6rem; background: none; border-radius: 0; color: var(--muted); font-size: .72rem; }
  .path-lead .card-path.has-media .card-credit a { color: var(--muted); }
}

/* ───────────── R19 (실독자 6명 · 2026-11-03): 작은 회색 글자 키우기·진하게, 각주 번호 가볍게, 'Contents ↑' 가 글을 가리지 않게 ───────────── */
.crumbs { font-size: .92rem; }
.source-note { font-size: .92rem; }
.post-meta { font-size: .92rem; line-height: 1.5; }
.disclosure { font-size: .92rem; }
.table-note, .table-cites { font-size: .88rem; }
.card-desc { font-size: 1rem; }
.card-date { font-size: .9rem; }
.card-credit, .card-path.has-media .card-credit { font-size: .82rem; }
.hotel-card .hotel-checked { font-size: .9rem; }
.hotel-card dt { font-size: .84rem; }
.hotel-card figure.card-photo figcaption, figure.photo figcaption { font-size: .92rem; }
figure.photo .credit { font-size: .86rem; }
.tl-sub { font-size: .9rem; }
.on-page-label { font-size: .8rem; }
.kicker, .card-path .kicker, .topics-label { font-size: .8rem; }
@media (max-width: 40rem) {
  table.stack td::before { font-size: .88rem; }
}
/* 각주 번호: 더 작고 가는 글씨(누르는 자리 넓이는 그대로) — 한 줄 한 줄이 아니라 글머리·표 줄 끝에 한 덩어리만 둔다 */
sup.cite { font-size: .62em; font-weight: 400; letter-spacing: -.01em; }
sup.cite a { font-weight: 400; }
/* 'Contents ↑': 떠다니는 알약이 글자 위에 걸치던 것을 아래 가로 띠로 — 글이 띠 밑으로 깨끗이 지나가고 글자 위에 걸치지 않는다 */
@media (max-width: 74.99rem) {
  .to-contents { left: 0; right: 0; bottom: 0; justify-content: center; border-radius: 0; box-shadow: 0 -1px 0 var(--line);
                 background: var(--head-bg); color: var(--head-ink); border-top: 1px solid var(--edge);
                 min-height: var(--tap); padding: 0 1rem calc(env(safe-area-inset-bottom, 0px)); font-size: .9rem; }
  footer.site { padding-bottom: 4rem; }
}
/* R19 홈: 가족·환승·예산·이동 약자 입구(이미 있는 글의 절로 바로) */
.home-shortcuts { margin: 1.4rem 0 1.4rem; }
.home-shortcuts h2 { margin: 0 0 .7rem; font-size: 1.25rem; }
.shortcut-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shortcut-grid a { display: block; min-height: var(--tap); padding: .65rem .9rem; border: 1px solid var(--line); border-radius: 10px;
                   background: var(--card); color: var(--ink); text-decoration: none; box-shadow: var(--lift); }
.shortcut-grid a:hover strong { text-decoration: underline; }
.shortcut-grid a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.shortcut-grid strong::after { content: " →"; content: " →" / ""; white-space: nowrap; }
.shortcut-grid strong { display: block; color: var(--heading); font-family: var(--serif); font-size: 1.05rem; line-height: 1.3; }
.shortcut-grid span { display: block; margin-top: .15rem; color: var(--muted); font-size: .92rem; line-height: 1.4; }
@media (max-width: 30rem) { .shortcut-grid a { padding: .55rem .7rem; } .shortcut-grid strong { font-size: 1rem; } }
@media (min-width: 62rem) { .shortcut-grid { grid-template-columns: repeat(4, 1fr); } }
/* R19 폰 길이: 풀어 놓은 비교표·카드가 두 배로 길어지지 않게 — 트립닷컴·공식 단추 한 줄, 사진 출처·확인일 줄 압축 */
@media (max-width: 40rem) {
  .hotel-card .book { align-items: stretch; }
  .hotel-card .book > a:not(.official-site) { flex: 1.5 1 9rem; padding: .4rem .6rem; min-width: 0; }
  .hotel-card .book > a.official-site { flex: 1 1 5.5rem; padding: .4rem .5rem; min-width: 0; }
  .hotel-card .book .ad-tag { align-self: center; margin: 0 -.2rem; }
  .hotel-card .card-foot .hotel-checked { margin: 0; line-height: 1.35; }
  .hotel-card .card-foot { margin-top: .35rem; padding-top: .35rem; }
  .hotel-card .card-foot .photo-note { font-size: .8rem; line-height: 1.4; margin: .3rem 0 0; }
  table.stack td { padding: .3rem 0; }
}
/* R20 실독자 R19: 홈 줄 카드 사진이 폰에서 빈 판처럼 — 바로 받고(eager), 가는 세로 띠 대신 위쪽 정사각 사진(크리틱 R20: 띠가 피사체를 자른다) */
@media (max-width: 39.99rem) {
  .path-grid .card-path .card-media { grid-row: 1 / span 4; align-self: start; height: auto; margin: .75rem 0 0 .75rem; border-radius: 8px; overflow: hidden; background: var(--line); }
  .path-grid .card-path .card-media img { width: 100%; height: auto; min-height: 0; aspect-ratio: 1 / 1; object-fit: cover; }
  .path-grid .card-path .card-date { padding-bottom: .7rem; }
}
.shortcuts-note { margin: -.35rem 0 .75rem; color: var(--ink); font-size: .95rem; line-height: 1.45; }
/* R20: 빠른 답은 항목마다 [n] 대신 끝에 출처 한 줄(같은 링크) — 각주 표시를 가볍게 */
.quick-answer li sup.cite { display: none; }
.qa-sources { margin: .5rem 0 0; color: var(--muted); font-size: .85rem; }
.qa-sources sup.cite { font-size: .95em; vertical-align: baseline; }
/* R20: 폰 비교 카드 라벨 — 작은 회색 대신 읽히는 크기·색 */
@media (max-width: 40rem) { table.stack td::before { color: var(--ink); font-size: .88rem; font-weight: 700; opacity: .85; } }
/* R20: 표지 사진 출처 — PC 에서 너무 작다는 실독자 */
@media (min-width: 40rem) { .path-lead .card-path.has-media .card-credit { font-size: .82rem; padding: .25rem .6rem; } }
/* R20: 폰 아래 'Contents' 띠를 조용하게(짙은 띠 → 종이색, 링크색 글자) */
@media (max-width: 74.99rem) {
  .to-contents { background: var(--paper, var(--bg)); color: var(--link); border-top: 1px solid var(--line); box-shadow: none; font-weight: 600; opacity: .96; }
}
.table-cites sup.cite { font-size: .95em; vertical-align: baseline; }   /* R20: 표 아래 'Sources:' 줄의 번호는 읽히는 크기로 */
/* R20 loop1: 폰 'On this page' 판을 낮게(두 칸 격자는 그대로 — R8 반쯤 잘린 칩 없음) — 칸 높이 36px, 누르는 자리는 ::after 로 44px */
@media (max-width: 40rem) {
  nav.on-page ul { gap: .3rem .4rem; }
  nav.on-page a { min-height: 2.25rem; padding: .2rem .6rem; font-size: .8rem; line-height: 1.2; }
  nav.on-page a::after { top: -4px; bottom: -4px; }
}
/* R20 loop1: 표 'Links' 칸 — Trip.com 과 Ad 가 떨어지지 않게 */
td[data-label="Links"] .cv { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
td[data-label="Links"] .cv .ad-tag { margin: 0 .2rem 0 -.35rem; }
/* R20 loop1: 다크에서 알약·카드 테두리가 묻힌다 */
@media (prefers-color-scheme: dark) {
  .situation-chips a, nav.on-page a, .shortcut-grid a, .home-topics-row .topic-pills a { border-color: var(--link); }
  .shortcut-grid a, .card-path { border-color: var(--edge); }
}
/* R20 loop2: PC 표지 사진 출처도 사진 위 덮개 대신 사진 아래(폰과 같은 자리) */
.path-lead .card-path.has-media .card-credit { position: static; max-width: none; margin: .4rem 0 0; padding: 0 .85rem .6rem; background: none; border-radius: 0; color: var(--muted); font-size: .8rem; }
.path-lead .card-path.has-media .card-credit a { color: var(--muted); }
/* R20 loop2: 다크에서 [n] 이 묻힌다 */
@media (prefers-color-scheme: dark) { sup.cite a { opacity: 1; } }
/* R20 loop4: 공항 숙소 글 카드 → 그 글의 절 바로 가기(부모 먼저). 폰은 위아래, PC 는 카드 1칸 + 바로 가기 2칸, 나머지 두 카드는 두 칸 */
.home-guide-block { margin-top: .875rem; }
.home-guide-block .home-shortcuts { margin: 1rem 0 0; }
@media (min-width: 48rem) {
  .home-guide-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.25rem; align-items: start; margin-top: 1.25rem; }
  .home-guide-block .path-grid { grid-template-columns: minmax(0, 1fr); }
  .home-guide-block .home-shortcuts { margin: 0; }
  .path-grid.path-rest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .path-grid.path-rest .card-path .card-media img { aspect-ratio: 2 / 1; }
}
@media (min-width: 48rem) { .home-guide-block .shortcut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-guide-block .shortcut-grid a { padding: .85rem 1rem; } }
/* R21: PC 바로 가기 칸 — 카드 높이를 채우되 글자는 위에 붙인다(칸 안 위가 비어 보인다는 크리틱 + 1920 폭에서 아래가 비어 보인다는 독자) */
@media (min-width: 48rem) {
  .home-guide-block { align-items: stretch; }
  .home-guide-block .home-shortcuts { display: flex; flex-direction: column; }
  .home-guide-block .shortcut-grid { flex: 1; grid-auto-rows: 1fr; }
  .home-guide-block .shortcut-grid a { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; font-size: 1.02rem; }
}

/* R21: 다크 — 작은 글자(날짜·사진 출처·각주 번호·그림 시간축)는 흐리게 깔지 않고 본문 색에 가깝게, 사진은 살짝 눌러 눈부심을 줄인다 */
@media (prefers-color-scheme: dark) {
  :root { --muted: #CBD3CF; --tl-muted: #D3DBD7; }
  .card-date, .post-meta, .card-credit, .card-credit a, figure.photo .credit, figure.photo .credit a { color: #D3DBD7; }
  .path-grid .card-path .card-credit, .path-lead .card-path.has-media .card-credit { opacity: 1; }
  .card-credit, .path-grid .card-path .card-credit, .card-path.has-media .card-credit { font-size: max(.72rem, 11.5px); }
  sup.cite, .hotel-card sup.cite { font-size: .7em; }
  sup.cite a { opacity: 1; color: #D3DBD7; }
  .tl-svg .tl-axis { fill: #DDE4E0; }
  .card-media img, figure.photo img { filter: brightness(.86) contrast(1.02); }
}

/* ───────────── R23 (실독자 6명 R22): 숙소 카드 사진 크게 · 'Contents' 띠 낮게 · 어두운 화면 사진 설명 · 차트 글자 ───────────── */
/* 숙소 카드: 사진 있는 카드는 맨 위 가로 전체 사진 + 바로 아래 설명(작은 머리 사진 88~104px 은 알아볼 수 없었다) */
.hotel-card .card-head { flex-wrap: wrap; }
.hotel-card .card-head figure.card-photo { order: -1; flex: 0 0 100%; margin: 0 0 .35rem; }
.hotel-card .card-head figure.card-photo img { width: 100%; height: 11.5rem; max-height: none; object-fit: cover; object-position: 50% 62%; border-radius: 8px; }
.hotel-card .card-head figure.card-photo figcaption { margin-top: .3rem; font-size: .84rem; line-height: 1.45; color: var(--muted); }
@media (min-width: 40rem) { .hotel-card .card-head figure.card-photo img { height: 15rem; } }
@media (max-width: 30rem) { .hotel-card .card-head figure.card-photo { flex-basis: 100%; } .hotel-card .card-head figure.card-photo img { width: 100%; height: 11.5rem; } }
/* 폰 'Contents' 띠: 낮게(글 위로 덮는 높이를 줄이고, 누르는 자리는 위로 넓힌다) */
@media (max-width: 74.99rem) {
  .to-contents { min-height: 2.3rem; font-size: .85rem; }
  .to-contents::before { content: ""; position: absolute; left: 0; right: 0; top: -.45rem; height: .45rem; }
  footer.site { padding-bottom: 3.4rem; }
  figure.photo { scroll-margin-bottom: 3rem; }
  /* 사진 설명은 띠 위로 올려(같은 종이색 바탕) 띠가 설명의 마지막 줄을 덮지 않게 — 스크롤하면 띠가 설명 밑으로 들어갔다 나온다 */
  figure.photo:not(.card-photo) figcaption { position: relative; z-index: 21; background: var(--paper); padding: .15rem 0; }
}
/* 사진 설명·크레딧: 어두운 화면에서 더 밝게·조금 크게(실독자 R22 — 회색 11~13px 가 흐리다) */
@media (prefers-color-scheme: dark) {
  figure.photo figcaption, .hotel-card figure.card-photo figcaption { color: var(--ink); font-size: .92rem; }
  figure.photo .credit, figure.photo .credit a, .card-credit, .card-credit a { color: var(--ink); opacity: .86; font-size: .88rem; }
}
/* R23: 사진이 늦게 와도 빈 흰 판이 아니라 칸이 잡힌 자리(폭·높이 속성 비율) */
figure.photo img { background: var(--band); }
/* R23 critics: PC 에서 세로 사진이 800px 넘게 차지하지 않게(비율은 그대로, contain) */
@media (min-width: 40rem) { figure.photo:not(.card-photo) img { max-height: 26rem; } }

/* ───────────── R24 (실독자 6명 R23): PC 본문 사진 크게 · 설명이 사진 폭에 맞게 · 크레딧·카드 설명 글자 · 사진 없는 숙소 카드 높이 ───────────── */
/* PC: 4:3 사진이 높이 한도(26rem)·sizes 40rem 때문에 555~640px 로 작았다 → 한도를 36rem 로, sizes 를 50rem 로 올리고, 그림 상자를 사진 폭으로 줄여 설명이 사진과 같은 왼쪽에서 시작(세로 사진도) */
@media (min-width: 40rem) {
  figure.photo:not(.card-photo) { display: table; margin-left: auto; margin-right: auto; max-width: 100%; }
  figure.photo:not(.card-photo) img { width: auto; height: auto; max-width: 100%; max-height: min(32rem, 78vh); }   /* 고유 폭 = sizes 50rem(800px) · 높이 한도 32rem(4:3 이면 683px) 안에서 비율 그대로 */
  figure.photo:not(.card-photo) figcaption { display: table-caption; caption-side: bottom; }
}
/* 숙소 카드 사진 설명: 본문 사진 설명과 같은 크기(13.4px → 14.7px) */
.hotel-card .card-head figure.card-photo figcaption { font-size: .92rem; }
/* 첫 화면 카드 크레딧: PC 11~12px 가 작았다 → 어디서나 13px 이상 */
.card-credit, .path-grid .card-path .card-credit, .path-lead .card-path.has-media .card-credit,
.card.has-media .card-credit, .card-featured.has-media .card-credit { font-size: max(.82rem, 13px); }
@media (prefers-color-scheme: dark) {
  .card-credit, .path-grid .card-path .card-credit, .path-lead .card-path.has-media .card-credit,
  .card.has-media .card-credit, .card-featured.has-media .card-credit { font-size: max(.82rem, 13px); opacity: 1; }
}
/* 두 칸 숙소 카드(넓은 PC): 같은 줄 카드는 같은 높이, 버튼은 카드 바닥에 맞춘다. 사진 없는 카드는 원래 모양 */
@media (min-width: 75rem) {
  .has-toc article > .hotel-cards { align-items: stretch; }
  .has-toc article > .hotel-cards .hotel-card { display: flex; flex-direction: column; }
  .has-toc article > .hotel-cards .hotel-card > .card-foot { margin-top: auto; }
  /* 사진 없는 카드: 큰 '가는 길' 판은 R24 critic 이 '빈 자리표'로 읽었다 → 원래 모양 그대로, 버튼만 바닥에 */
}

/* R24 critic 3명(codex·flash·opus): PC 에서 사진 두 장이 잇달아 서면 한 화면을 다 먹는다 → 넓은 PC 에서만 나란히(같은 높이 4:3, 설명은 각 사진 밑) */
@media (min-width: 64rem) {
  figure.photo:not(.card-photo):has(+ figure.photo:not(.card-photo)),
  figure.photo:not(.card-photo):has(+ figure.photo:not(.card-photo)) + figure.photo:not(.card-photo) {
    display: block; float: left; width: calc(50% - .5rem); margin: .25rem 0 1.25rem; }
  figure.photo:not(.card-photo):has(+ figure.photo:not(.card-photo)) { margin-right: 1rem; }
  figure.photo:not(.card-photo):has(+ figure.photo:not(.card-photo)) img,
  figure.photo:not(.card-photo):has(+ figure.photo:not(.card-photo)) + figure.photo:not(.card-photo) img {
    width: 100%; height: auto; max-height: none; aspect-ratio: 4 / 3; object-fit: cover; }
  figure.photo:not(.card-photo):has(+ figure.photo:not(.card-photo)) figcaption,
  figure.photo:not(.card-photo):has(+ figure.photo:not(.card-photo)) + figure.photo:not(.card-photo) figcaption { display: block; }
  figure.photo:not(.card-photo):has(+ figure.photo:not(.card-photo)) + figure.photo:not(.card-photo) + * { clear: both; }
}
/* 홈 PC: 오른쪽 '숙소 안내 바로 가기' 네 칸이 왼쪽 카드 높이만큼 늘어나 빈 상자가 됐다 → 한 줄씩(제목 · 설명) 내용 높이 목록 */
@media (min-width: 62rem) {
  .home-guide-block { align-items: start; }
  .home-guide-block .home-shortcuts { display: block; }
  .home-guide-block .shortcut-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; flex: none; gap: .6rem; }   /* 내용 높이 줄(늘린 빈 상자·키운 줄 모두 critic 지적) */
  .home-guide-block .shortcut-grid a { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); column-gap: 1rem; height: auto; align-items: baseline; padding: 1rem 1.15rem; }
  .home-guide-block .shortcut-grid span { margin-top: 0; font-size: .95rem; }
}

/* ───────── R25 (실독자 R24) ───────── */
/* 숙소 카드 PC: (R25 의 머리 안 두 칸 규칙은 R26 에서 카드 전체 두 칸으로 바뀌었다 — 파일 끝 R26) */
@media (min-width: 75rem) {
  .has-toc article > .hotel-cards > .hotel-card:last-child:nth-child(odd) { grid-column: auto; }
}
/* Trip.com(광고) = 채운 단추, 공식 = 테두리만 — 다크에서 둘이 같아 보였다(실독자). 'Ad' 꼬리표·rel=sponsored 그대로 */
.book a:not(.official-site), td[data-label="Links"] a[rel~="sponsored"] { background: var(--green); color: var(--head-ink); border: 2px solid var(--green); }
.book a.official-site, .book a.official-site:only-child, td[data-label="Links"] a:not([rel~="sponsored"]) { background: transparent; color: var(--link); border: 2px solid var(--edge); }
@media (prefers-color-scheme: dark) {
  .book a:not(.official-site), td[data-label="Links"] a[rel~="sponsored"] { background: #A8D5C2; color: #101B17; border-color: #A8D5C2; }
  .book a.official-site, .book a.official-site:only-child, td[data-label="Links"] a:not([rel~="sponsored"]) { background: transparent; color: #A8D5C2; border-color: #6E8D81; }
}
/* 인용 번호: 괄호·쉼표는 옅게, 번호만 작게 — 문장 흐름을 덜 끊게 */
sup.cite { color: color-mix(in srgb, var(--muted) 55%, transparent); font-size: .58em; }
sup.cite a { color: var(--muted); text-decoration: none; opacity: .85; }
sup.cite a:hover, sup.cite a:focus-visible { color: var(--link); text-decoration: underline; opacity: 1; }
/* 홈: 사진 출처 한 곳(읽히는 크기, 조용한 색) */
.home-credits { margin: 1.6rem 0 0; padding: .7rem 0 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .86rem; line-height: 1.5; }
.home-credits-lead { margin: 0 0 .25rem; font-weight: 700; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.home-credits ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem 1.5rem; }
.home-credits li { margin: 0; }
.home-credits a { color: var(--muted); }
.home-credits-what { color: var(--ink); font-weight: 600; }
@media (min-width: 48rem) { .home-credits ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 홈 PC: 숙소 카드 옆 큰 빈칸 → 카드는 한 줄 전체(사진 왼쪽 · 글 오른쪽), 바로 가기 네 칸은 그 아래 한 줄 */
@media (min-width: 62rem) {
  .home-guide-block { display: block; }
  .home-guide-block .path-parent { grid-template-columns: minmax(0, 1fr); }
  .home-guide-block .path-parent .card-path.has-media { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .home-guide-block .path-parent .card-path .card-media-link, .home-guide-block .path-parent .card-path .card-media { height: 100%; }
  .home-guide-block .path-parent .card-path .card-media img { height: 100%; min-height: 15rem; aspect-ratio: auto; }
  .home-guide-block .home-shortcuts { margin: 1rem 0 0; }
  .home-guide-block .shortcut-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-guide-block .shortcut-grid a { display: block; padding: .85rem 1rem; }
  .home-guide-block .shortcut-grid span { margin-top: .2rem; font-size: .92rem; }
}
/* R25 루프 1: 사진 없는 두 카드도 짝이 되면 짧은 쪽에 빈칸 → PC 도 카드는 한 줄에 하나(사진·'Getting there' 판은 오른쪽) */
@media (min-width: 75rem) {
  .has-toc article > .hotel-cards { grid-template-columns: minmax(0, 1fr); }
  .has-toc article > .hotel-cards > .hotel-card .card-foot { margin-top: .5rem; }
}
/* R25 루프 2: 표의 마지막 줄은 'tbody tr:last-child > td' 규칙(grid)이 이겨 Trip.com·Ad·Official 이 세 줄로 갈라졌다 → 다른 줄과 같은 한 줄 */
@media (max-width: 40rem) {
  table.stack tbody tr:last-child > td[data-label="Links"] { display: flex; align-items: center; gap: .4rem; }
}
/* R25 루프 3: 폰에서도 'Browse by topic' 이름표를 보인다(이름 없는 알약 두 개가 떠 보였다 — critic) */
@media (max-width: 39.99rem) { .home-topics-row .topics-label { display: block; margin: 0 0 .4rem; } }

/* ───────── R26 (실독자 R25) ───────── */
/* 숙소 카드 PC: 사진 옆(제목 밑) 250px 빈칸·카드가 길어 FAQ 까지 안 읽음 → 카드 전체를 두 칸으로: 왼쪽 제목·Good for·Catch·Details, 오른쪽 사진(또는 '가는 길' 판),
   아래 한 줄 전체에 확인일·단추·지도. 마지막 왼쪽 줄(1fr)이 남는 높이를 받아 Good for·Catch 사이가 벌어지지 않는다 */
@media (min-width: 64rem) {
  .has-toc article > .hotel-cards > .hotel-card,
  article > .hotel-cards > .hotel-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); grid-template-rows: auto auto auto 1fr; column-gap: 1.4rem; align-items: start; }
  article > .hotel-cards > .hotel-card > * { grid-column: 1; }
  article > .hotel-cards > .hotel-card > .card-head { display: contents; }
  article > .hotel-cards > .hotel-card .card-title { grid-column: 1; grid-row: 1; }
  article > .hotel-cards > .hotel-card .card-head > figure.card-photo,
  article > .hotel-cards > .hotel-card .card-head > .route-tile { grid-column: 2; grid-row: 1 / span 4; margin: 0; align-self: start; }
  article > .hotel-cards > .hotel-card .card-head > figure.card-photo img { width: 100%; height: 12.5rem; object-fit: cover; }
  article > .hotel-cards > .hotel-card > .card-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin-top: .6rem; }
  article > .hotel-cards > .hotel-card > .card-foot > .hotel-checked { flex: 1 0 100%; margin: 0; }
  article > .hotel-cards > .hotel-card > .card-foot > .book { flex: 1 1 36rem; margin: 0; }
  article > .hotel-cards > .hotel-card > .card-foot > .book > a:not(.official-site) { white-space: nowrap; }
  article > .hotel-cards > .hotel-card:not(:has(.card-photo, .route-tile)) { grid-template-columns: minmax(0, 1fr); }
  article > .hotel-cards > .hotel-card .card-head > figure.card-photo figcaption { font-size: .85rem; line-height: 1.4; }
  article > .hotel-cards > .hotel-card > .card-foot > .maps { flex: 0 1 auto; margin: 0; }
}
/* 표 속 인용: 폰의 쌓은 표는 머리 줄을 숨기는데 '[, ]' 괄호·쉼표 글자가 남아 'Taxi [, ]' 로 읽혔다(실독자) → 숨긴 머리의 인용은 통째로 안 그린다 */
@media (max-width: 40rem) { table.stack thead sup.cite { display: none; } }
/* 본문 사진 다크: 어두운 표지판 사진이 바탕에 묻혔다(실독자) → 얇은 테두리 */
@media (prefers-color-scheme: dark) { figure.photo:not(.card-photo) img { border: 1px solid #8fa79e; border-radius: 6px; padding: 3px; background: #26332e; box-sizing: border-box; } }   /* R26 루프 2: 1px 어두운 선은 critic 이 못 봤다 → 밝은 선 + 3px 틀 */
/* 세로 사진 짝(택시 표지판): 4:3 로 잘라 글자가 작았다 → 세로 사진은 자르지 않고 높이 한도 안에서 통째로 */
@media (min-width: 64rem) {
  figure.photo:not(.card-photo):has(+ figure.photo:not(.card-photo)) img[data-shape="tall"],
  figure.photo:not(.card-photo):has(+ figure.photo:not(.card-photo)) + figure.photo:not(.card-photo) img[data-shape="tall"] { aspect-ratio: 3 / 4; object-fit: cover; height: auto; width: 100%; }
}
/* 홈: 사진 출처 글자 크게(실독자 '작다') */
.home-credits { font-size: .95rem; }
.home-credits-lead { font-size: .85rem; }
/* 홈 첫 화면: 큰 단추 하나 + 작은 링크 한 줄(실독자 R25: 단추 6개가 같은 무게) */
.hero-primary { margin: 1rem 0 .6rem; }
.hero-cta { display: inline-block; background: var(--green); color: var(--head-ink); border: 2px solid var(--green); border-radius: 999px; padding: .6rem 1.25rem; font-weight: 700; font-size: 1.05rem; text-decoration: none; min-height: 2.75rem; }
.hero-cta:hover, .hero-cta:focus-visible { background: var(--ink); border-color: var(--ink); }
@media (prefers-color-scheme: dark) { .hero-cta { background: #A8D5C2; color: #101B17; border-color: #A8D5C2; } .hero-cta:hover { background: #cfe9de; border-color: #cfe9de; } }
.hero-more { margin: 0; font-size: .97rem; line-height: 2; color: var(--muted); }
.hero-more-label { font-weight: 700; margin-right: .3rem; color: var(--ink); }
.hero-more a { font-weight: 600; color: var(--link); padding: .45rem .1rem; display: inline-block; line-height: 1.5; }   /* 누르는 높이 ~44px(critic: 줄이 붙어 잘못 누름) */
.hero-more .sep { color: var(--muted); }
/* 홈 폰: 줄 카드 사진이 작은 정사각(Inspire 사진 작다 — 실독자) → 카드 위 가로 전체 5:2 */
@media (max-width: 39.99rem) {
  .path-grid .card-path.has-media { display: block; }
  .path-grid .card-path .card-media-link { display: block; }
  .path-grid .card-path .card-media { margin: 0; border-radius: 0; height: auto; }
  .path-grid .card-path .card-media img { width: 100%; aspect-ratio: 5 / 2; height: auto; object-fit: cover; }
  .path-grid .card-path.has-media .card-body { display: block; }
  .path-grid .card-path .kicker, .path-grid .card-path .card-title, .path-grid .card-path .card-desc, .path-grid .card-path .card-date { padding-left: .9rem; padding-right: .9rem; }
}
/* 홈 PC: 숙소 카드 글 아래 빈칸(실독자) → 사진 높이를 줄여 글 높이에 맞춘다 */
@media (min-width: 62rem) {
  .home-guide-block .path-parent .card-path .card-media img { min-height: 12rem; }
}
/* 목록 뒤 'Sources for this list' 한 줄이 있으면 항목마다 [n] 은 숨긴다(실독자: 티머니 목록이 번호로 끊긴다) — 글·점검의 cite 는 그대로 */
ul:has(+ p.qa-sources) li sup.cite { display: none; }
@media (prefers-color-scheme: dark) { .hotel-card figure.card-photo img, .card-media img { outline: 1px solid #8fa79e; outline-offset: -1px; } }   /* R26 루프 3: 카드 사진도 다크에서 테두리(레이아웃 변화 없음) */
/* R26 루프 3(critic 3/3: 'Or jump to' 가 390px 에서 가운뎃점 사이로 세 줄 붙어 잘못 누름) → 줄바꿈 틈을 넓힌 낱말 링크 묶음, 가운뎃점은 숨김 */
.hero-more { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem 1.1rem; line-height: 1.5; }
.hero-more .sep { display: none; }
.hero-more-label { margin-right: 0; }