/* OneWorld — 도시 가이드 페이지 (앱과 같은 색·글꼴, 큰 글씨) */
:root {
  --ink: #111827; --ink-2: #374151; --muted: #5F6B7A;
  --ground: #FAFAF8; --card: #FFFFFF; --line: #E6E8EC; --fill: #F1F3F6;
  --accent: #B45309; --accent-strong: #92400E; --accent-soft: #FFF2D1;   /* (T-607) 포인트 B — 글자·링크용 진한 주황 */
  --accent-fill: #FFB300; --on-accent: #111827;   /* 노랑 바탕 + 진한 글자 */
  --sos: #E0383E; --sos-soft: #FDECEC;
  --ok-bg: #E6F6EE; --ok-fg: #11663F; --warn-bg: #FFF4DE; --warn-fg: #7A4B00;   /* 직항·경유 표시 (T-122, 앱과 같은 값) */
  --radius: 16px; --radius-sm: 12px; --radius-xs: 8px; --radius-lg: 24px;   /* (T-626) 모서리 4종 — 앱과 같게(예전 20·14) */
  --fs-sm: 15px; --fs-base: 17px; --fs-lg: 20px; --fs-22: 22px; --fs-26: 26px; --fs-3xl: 30px;   /* (T-626) 글자 6단계 — 앱 T-612 */
  --fw-regular: 400; --fw-strong: 600; --fw-title: 700; --fw-semi: var(--fw-strong); --fw-bold: var(--fw-title);   /* (T-650) 굵기 3단계 — 앱과 같음 */ --lh-title: 1.25; --lh-body: 1.5;
  --accent-hover: #F5A300;
  --shadow-sm: 0 1px 2px rgba(17,24,39,.04), 0 2px 10px rgba(17,24,39,.04);
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --top-bg: rgba(250,250,248,.92);
  color-scheme: light;
}
/* 다크 모드 (T-060 → T-607: 기본 밝게, 앱 설정 '어둡게'·'기기 따라'+기기 다크면 머리 스크립트가 data-theme="dark"). 예전: 기기 설정이 어두우면 가이드·블로그·노선 페이지도 어둡게 (앱 ↔ 가이드 이동 때 번쩍임 없게) */
:root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #F3F4F6; --ink-2: #D1D5DB; --muted: #9CA3AF;
    --ground: #0E1116; --card: #181C23; --line: #2A2F38; --fill: #21262E;
    --accent: #FFB300; --accent-strong: #FFC94D; --accent-soft: rgba(255,179,0,.14);
    --sos: #FF5A5F; --sos-soft: #3A1D20;
    --ok-bg: #12301F; --ok-fg: #5FD39E; --warn-bg: #33290F; --warn-fg: #F5C66B;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.25);
    --top-bg: rgba(14,17,22,.86);
    --accent-hover: #FFC233;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: var(--fs-base); line-height: var(--lh-body); letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; overflow-x: hidden; word-break: keep-all; overflow-wrap: anywhere; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.g-wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }

/* 상단 */
.g-top { position: sticky; top: 0; z-index: 5; background: var(--top-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.g-top-in { display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
.g-logo { font-size: var(--fs-26); font-weight: var(--fw-title); letter-spacing: -0.04em; color: var(--ink); text-decoration: none; }
.g-logo span { color: inherit; }
.g-logo::after { content: ""; display: inline-block; width: .24em; height: .24em; margin-inline-start: .06em; border-radius: 50%; background: var(--accent-fill); }   /* (T-616) 진한 글자 + 노랑 점 */
.g-lang { font-size: var(--fs-base); font-weight: var(--fw-semi); color: var(--ink-2); text-decoration: none; padding: 10px 16px; background: var(--card); border-radius: 999px; box-shadow: var(--shadow-sm); }

/* 제목 */
.g-crumb { font-size: var(--fs-sm); color: var(--muted); margin: 20px 0 8px; }
.g-crumb a { color: var(--muted); }
h1 { font-size: var(--fs-3xl); line-height: var(--lh-title); letter-spacing: -0.03em; margin: 4px 0 12px; font-weight: var(--fw-bold); }
/* (T-291) 제목·카드 제목이 마지막 줄에 1~2글자만 남지 않게 줄 길이를 고르게 (지원 안 하는 브라우저는 지금처럼) */
h1, .g-city strong, .g-post strong { text-wrap: balance; overflow-wrap: break-word; }   /* (T-300) body 의 anywhere 는 모든 글자 사이를 줄바꿈 후보로 쳐서 balance 가 낱말 경계 대신 '·스피드보트'처럼 끊음 → 제목은 넘칠 때만 끊기 */
.g-nb { white-space: nowrap; }
.g-lead { font-size: var(--fs-lg); color: var(--ink-2); margin: 0 0 24px; }
/* (T-601) 휴대폰: 긴 요약은 5줄 + [더 보기] (스크립트가 6줄 넘을 때만 is-clamped) */
.g-lead.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; margin-bottom: 0; }
.g-lead:focus { outline: none; }
.g-lead-more { display: inline-flex; align-items: center; min-height: 48px; margin: 0 0 12px; padding: 0 2px; border: 0; background: none; color: var(--accent); font: inherit; font-size: var(--fs-base); font-weight: var(--fw-bold); cursor: pointer; }
.g-lead-more[hidden] { display: none; }
.g-lead-more:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }
/* (T-207) 일본어·중국어는 띄어쓰기가 없어 keep-all 이면 문장부호에서만 줄이 바뀜 → 글자 단위 줄바꿈(금칙 처리는 strict) */
html[lang="ja"] body, html[lang="zh-Hans"] body { word-break: normal; line-break: strict; }
/* (T-297) 단 제목·카드 제목은 빌드가 낱말 사이에 넣은 <wbr>·공백·문장부호에서만 줄을 바꿈(낱말 가운데 끊김 막기).
   한 낱말이 한 줄보다 길면 body 의 overflow-wrap: anywhere 로 넘치지 않고 끊김 */
html[lang="ja"] :is(h1, .g-city strong, .g-post strong), html[lang="zh-Hans"] :is(h1, .g-city strong, .g-post strong) { word-break: keep-all; }
/* (T-207) 한국 도시 가이드 다른 언어판 바로 가기 — 한 줄, 링크마다 48px 높이 */
.g-langs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin: 16px 0 8px; font-size: var(--fs-sm); color: var(--ink-2); }
.g-langs a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 8px; font-weight: var(--fw-bold); text-decoration: none; }
h2 { font-size: var(--fs-26); line-height: var(--lh-title); letter-spacing: -0.02em; margin: 0 0 14px; font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-lg); line-height: var(--lh-title); margin: 0 0 4px; font-weight: var(--fw-bold); }
p { margin: 0 0 10px; }
.g-muted { color: var(--muted); font-size: var(--fs-base); }

/* 카드·섹션 */
.g-card { background: var(--card); border-radius: var(--radius); padding: 22px 20px; box-shadow: var(--shadow-sm); margin: 0 0 20px; }
.g-sec { margin: 36px 0; }
.g-list { display: grid; gap: 12px; }
.g-item { background: var(--card); border-radius: var(--radius-sm); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.g-item p:last-child { margin-bottom: 0; }
.g-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.g-meta span, .g-tag { display: inline-block; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--accent-strong); background: var(--accent-soft); border-radius: 999px; padding: 3px 12px; }
.g-tag { margin: 2px 0 8px; }

/* 바로가기 버튼 */
/* (T-607) 파란 상자 → 연한 포인트 바탕 + 흰 버튼, 주요 버튼만 노랑 */
.g-cta { background: var(--card); border: 1px solid var(--line); color: var(--ink); }   /* (T-654) 연노랑 → 흰 카드 + 얇은 선 — 노랑은 [항공권 찾기] 하나만 */
.g-cta .g-muted { color: var(--ink-2); }
.g-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.g-btn { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 54px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font-weight: var(--fw-semi); font-size: var(--fs-base); text-decoration: none; line-height: var(--lh-title); }
.g-btn-primary { background: var(--accent-fill); color: var(--on-accent); font-weight: var(--fw-bold); }
button.g-btn { border: 0; font: inherit; font-weight: var(--fw-semi); font-size: var(--fs-base); cursor: pointer; width: 100%; }
.g-save[aria-pressed="true"] { background: var(--accent-fill); color: var(--on-accent); }
.g-save:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* (T-584) 공유 — PC 에서 주소 복사 안내 한 줄 */
.g-share:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.g-share-status { grid-column: 1 / -1; margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.g-share { gap: 8px; }
.g-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g-share-status:empty { display: none; }
.g-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
.g-link { font-weight: var(--fw-bold); text-decoration: none; }

/* 한눈에 보기 */
.g-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin: 0; }
.g-facts dt { font-size: var(--fs-sm); color: var(--muted); }
.g-facts dd { margin: 0; font-weight: var(--fw-bold); }
.g-sos-h { margin-top: 20px; color: var(--sos); }
.g-sos { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.g-sos li { display: flex; flex-direction: column; align-items: flex-start; gap: 0; background: var(--sos-soft); border-radius: var(--radius-sm); padding: 10px 14px; font-size: var(--fs-base); }
.g-sos a { color: var(--sos); font-weight: var(--fw-bold); font-size: var(--fs-lg); text-decoration: none; white-space: nowrap; }

/* 월별 평년 기온·강수 (T-232) — 360px 에서도 4칸이 한 화면에 */
.g-clim { background: var(--card); border-radius: var(--radius-sm); padding: 16px 14px; box-shadow: var(--shadow-sm); margin-top: 14px; }
.g-clim-sum { margin: 0 0 12px; font-size: var(--fs-base); font-weight: var(--fw-semi); line-height: var(--lh-body); }
.g-clim table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.g-clim th, .g-clim td { padding: 6px 4px; text-align: right; border-bottom: 1px solid var(--line); }
.g-clim th[scope="row"], .g-clim thead th:first-child { text-align: left; }
.g-clim thead th { font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-bold); }
.g-clim tbody tr:last-child th, .g-clim tbody tr:last-child td { border-bottom: 0; }
.g-clim .g-muted { margin: 10px 0 0; font-size: var(--fs-sm); }
/* (T-317) 출처에 값이 없는 달 — '자료 없음'(글자 15px 유지, 흐리게), 요약 줄 옆 작은 표기 */
.g-clim .g-clim-na { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-regular); white-space: nowrap; }
.g-clim-part { font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--muted); }

/* 월별 글 지난달·다음 달 (T-249) — 칸마다 48px 이상, 좁은 화면에선 위아래로 */
.g-month-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 28px 0; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.g-month-nav a { display: inline-flex; align-items: center; min-height: 48px; font-size: var(--fs-base); }
.g-month-nav .g-month-next { margin-left: auto; text-align: right; }

/* 목록 */
.g-num, .g-days { padding: 0; margin: 0; list-style: none; counter-reset: n; display: grid; gap: 12px; }
.g-num li, .g-days li { counter-increment: n; position: relative; background: var(--card); border-radius: var(--radius-sm); padding: 16px 18px 16px 62px; box-shadow: var(--shadow-sm); }
.g-num li::before { content: counter(n); position: absolute; left: 16px; top: 16px; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center; font-size: var(--fs-base); }
.g-days li { padding-left: 18px; }
.g-days strong { color: var(--accent); }
.g-num p:last-child, .g-days p:last-child { margin-bottom: 0; }
.g-tips { padding-left: 22px; margin: 0; }
.g-tips li { margin-bottom: 10px; }
/* 블로그 본문 안 사이트 링크 (T-064) — 한 줄에 하나, 누르기 쉬운 48px 높이 */
.g-sec-links { list-style: none; padding: 0; margin: 12px 0 0; }
.g-sec-links a { display: flex; align-items: center; min-height: 48px; font-size: var(--fs-base); }

.g-budget { display: grid; grid-template-columns: 1fr; gap: 10px; }
.g-budget div { background: var(--card); border-radius: var(--radius-sm); padding: 14px 18px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.g-budget span { font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-semi); }
.g-note { font-size: var(--fs-sm); color: var(--muted); background: var(--fill); border-radius: var(--radius-sm); padding: 14px 16px; margin: 32px 0; }

/* 목록 페이지 */
.g-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; }
.g-city { display: flex; flex-direction: column; gap: 2px; background: var(--card); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink); transition: transform .15s ease; }
.g-city:hover { transform: translateY(-2px); }
.g-city-cc { font-size: var(--fs-sm); color: var(--accent); font-weight: var(--fw-bold); }
.g-city strong { font-size: var(--fs-22); }
.g-city-sub { font-size: var(--fs-base); color: var(--muted); }

.g-others { margin: 8px auto 28px; }
/* 이 도시 항공권 최저가 (T-052) — 가격이 있을 때만 스크립트가 보여 줌 */
.g-fare[hidden] { display: none; }
.g-fare h2 { font-size: var(--fs-lg); margin-bottom: 8px; }
.g-fare-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 6px; }
.g-fare-price { font-size: var(--fs-26); font-weight: var(--fw-bold); color: var(--accent-strong); letter-spacing: -0.02em; }
.g-fare-when { font-size: var(--fs-base); color: var(--ink-2); font-weight: var(--fw-semi); }
/* 직항·경유 N회 (T-122): 직항 = 초록, 경유 1회 = 회색, 2회 이상 = 주황으로 눈에 띄게. 자료에 경유 정보가 없으면 표시 안 함 */
.g-stops { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: var(--lh-body); white-space: nowrap; background: var(--fill); color: var(--ink-2); vertical-align: middle; }
.g-stops.is-direct { background: var(--ok-bg); color: var(--ok-fg); }
.g-stops.is-many { background: var(--warn-bg); color: var(--warn-fg); }
.g-route-facts .g-stops { margin-top: 4px; }
.g-fare .g-link { display: inline-flex; align-items: center; min-height: 48px; }
.g-fare-tp[hidden], .g-fare-mrt[hidden], .g-fare-none[hidden], .g-rl-none[hidden] { display: none; }
.g-fare-none p, .g-rl-none p { margin: 0; }
/* 마이리얼트립이 더 싸면 위로 올라감 (T-135) — 아래 줄 위에 구분선 */
.g-fare-mrt:not([hidden]) + .g-fare-tp:not([hidden]) { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
/* 이 도시 인기 투어·입장권 (T-105) — 상품이 있을 때만 스크립트가 보여 줌. 카드 전체가 링크(48px 이상) */
.g-tours[hidden] { display: none; }
.g-tours h2 { font-size: var(--fs-lg); margin-bottom: 12px; }
.g-tour-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 10px; }
.g-tour { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 88px; padding: 8px; border-radius: var(--radius-sm); background: var(--fill); color: var(--ink); text-decoration: none; }
.g-tour-img { display: block; width: 88px; height: 88px; border-radius: var(--radius-sm); object-fit: cover; background: var(--line); }
.g-tour-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.g-tour-name { font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: var(--lh-title); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.g-tour-meta { font-size: var(--fs-sm); color: var(--muted); }
.g-tour-meta b { color: var(--ink-2); }
.g-tour-price { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--accent-strong); }
.g-tour-price small { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--muted); }
@media (min-width: 700px) { .g-tour-list { grid-template-columns: 1fr 1fr; } }
.g-tours .g-link { display: inline-flex; align-items: center; min-height: 48px; }
/* 마이리얼트립 왕복 최저가 (T-098) — 편도 가격 아래 구분선 뒤 한 줄 */
.g-fare-tp:not([hidden]) + .g-fare-mrt { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.g-fare-mrt-text { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--ink); margin: 0 0 4px; }
/* 노선별 항공권 (T-054) — 가격 상자는 받은 항목만 보임 */
.g-route-link { margin: -8px 2px 20px; }
.g-route-facts { margin: 0 0 10px; }
.g-route-facts > div[hidden], .g-rl-go[hidden] { display: none; }
.g-route-facts .g-fare-price { font-size: var(--fs-22); font-weight: var(--fw-bold); color: var(--accent-strong); }
.g-route-facts .g-fare-when { display: block; font-size: var(--fs-base); color: var(--ink-2); font-weight: var(--fw-semi); white-space: nowrap; }   /* 날짜는 가격 아래 한 줄 (T-054 검토) */
.g-rl-go { display: inline-flex; align-items: center; min-height: 48px; }
.g-route-facts .g-rl-air { grid-column: 1 / -1; }                   /* 항공사 이름 목록은 한 줄 전체 (반쪽 칸이면 한 줄에 하나씩 길게 늘어짐) */
.g-route-facts .g-rl-air dd { font-weight: var(--fw-semi); }
/* 가이드 목차 (T-052) — 고정 상단에 제목이 가려지지 않게 이동 위치를 아래로 */
.g-toc { margin: 0 0 20px; }
.g-toc-h { font-size: var(--fs-base); color: var(--muted); margin: 0 0 10px; }
.g-toc .g-chips a { padding: 10px 16px; min-height: 48px; display: inline-flex; align-items: center; }
.g-sec[id] { scroll-margin-top: 96px; }
.g-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.g-chips a { display: inline-block; padding: 9px 16px; background: var(--card); border-radius: 999px; text-decoration: none; color: var(--ink-2); font-weight: var(--fw-semi); font-size: var(--fs-base); box-shadow: var(--shadow-sm); }
.g-foot { border-top: 1px solid var(--line); padding: 24px 0 40px; font-size: var(--fs-sm); color: var(--muted); }
.g-foot a { color: var(--muted); }

/* 상단 메뉴 */
.g-nav { display: flex; align-items: center; gap: 4px; }
/* 상단 글자는 낱말 중간에서 끊지 않음 (body의 overflow-wrap: anywhere 때문에 "OneWorl/d"로 끊기던 것, T-058) */
.g-top-in { gap: 0 6px; flex-wrap: wrap; }   /* 아주 좁은 화면(320px 등)은 메뉴가 통째로 둘째 줄로 */
.g-logo, .g-nav > a { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }
.g-nav > a:not(.g-lang) { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--ink-2); text-decoration: none; padding: 10px 10px; }

/* 블로그 */
.g-posts { display: grid; grid-template-columns: 1fr; gap: 12px; }
/* (T-282) 블로그 목록 분류 칩 — 줄바꿈(가로 스크롤 없음), 누르기 48px */
.g-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.g-kind { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow-sm); color: var(--ink); font-size: var(--fs-base); font-weight: var(--fw-bold); text-decoration: none; }
.g-kind-n { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--muted); }
.g-kind.on { background: var(--accent-fill); color: var(--on-accent); }
.g-kind.on .g-kind-n { color: var(--on-accent); }   /* (T-626) 노랑 위 흰 글자 → 진한 글자(대비) */
/* (T-342) 블로그 목록 검색칸 — 48px·16px, 자바스크립트 없으면 hidden */
.g-search { margin: 4px 0 12px; max-width: 560px; }
.g-search[hidden], .g-search-empty[hidden] { display: none; }
.g-search-label { display: block; margin: 0 0 6px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-2); }
.g-search-in { box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font: inherit; font-size: var(--fs-base); box-shadow: var(--shadow-sm); -webkit-appearance: none; appearance: none; }
.g-search-in::placeholder { color: var(--muted); }
.g-search-in:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.g-search-n { margin: 6px 0 0; min-height: 0; font-size: var(--fs-sm); color: var(--muted); }
.g-search-n:empty { display: none; }
.g-search-empty { margin: 8px 0 24px; padding: 20px 16px; border-radius: var(--radius); background: var(--card); font-size: var(--fs-base); color: var(--ink-2); text-align: center; }
.g-posts > .g-post[hidden], .g-grid > .g-city[hidden] { display: none; }
/* (T-202) 사진·도식 — 크기 고정(width/height 속성)으로 흔들림 없음, 캡션에 장소·작가·라이선스 */
.g-fig { margin: 16px 0 8px; }
.g-fig img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); background: var(--fill); }
.g-fig picture { display: block; }   /* (T-208) AVIF·WebP 크기별 — 그림 칸은 예전 img 와 같게 */
/* (T-654) 사진 출처 줄은 사진 바로 아래 그대로(CC BY-SA) — 위 여백만 6→2px. 글자는 최소 15px 규칙이라 그대로 */
.g-fig figcaption { margin-top: 2px; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--muted); overflow-wrap: anywhere; }
.g-fig figcaption a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; display: inline-block; padding: 14px 2px; margin: -14px 0; }   /* 누름 칸 48px (줄 높이는 그대로) */
.g-fig-hero { margin: 4px 0 12px; }
.g-fig-tall img { width: auto; max-width: 100%; max-height: 560px; margin: 0 auto; }   /* 세로 사진은 화면을 다 차지하지 않게 */
/* (T-599) PC: 맨 위 대표 사진이 높아 첫 앱 버튼이 첫 화면(1200×900) 밖으로 밀리던 것(152곳 중 61곳) — 사진 높이를 화면 높이에 맞춰 상한
   (자르지 않고 비율 그대로, 가운데). 휴대폰(760px 미만)은 그대로 */
/* (T-652) 휴대폰 첫 사진은 3:2 보다 납작하지 않게(최소 높이) — 원본 1.87:1(도쿄 191px)처럼 납작해 첫 화면 사진 비중이 작던 것(공식 관광청·유명 서비스는 큰 사진 하나).
 *  4:3 처럼 이미 더 높은 사진(34곳)은 그대로(줄이거나 자르지 않음). 본문 폭 = 화면 − 양옆 16. PC 는 아래 규칙 그대로 */
@media (max-width: 759px) { .g-fig-hero img { min-height: calc((100vw - 32px) * 2 / 3); object-fit: cover; } }
@media (min-width: 760px) { .g-fig-hero img { width: auto; max-width: 100%; max-height: min(420px, 40vh); margin: 0 auto; } }
.g-fig-svg img { width: auto; max-width: 100%; margin: 0 auto; }                         /* 도식은 폭 360 그대로(넓은 화면에서 커지지 않게) */
.g-fig-svg img { background: var(--card); border: 1px solid var(--line); }
.g-post.has-img { padding-top: 12px; }
.g-post-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 8px; background: var(--fill); }
.g-post { display: flex; flex-direction: column; gap: 4px; background: var(--card); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink); transition: transform .15s ease; }
.g-post:hover { transform: translateY(-2px); }
.g-post strong { font-size: var(--fs-lg); line-height: var(--lh-title); }
.g-post-cat { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--accent); margin: 0; }
.g-post-sub { font-size: var(--fs-base); color: var(--muted); }
.g-date { font-size: var(--fs-sm); color: var(--muted); margin: -12px 0 8px; }
.g-article .g-sec { margin: 28px 0; }
.g-article .g-sec p { font-size: var(--fs-base); }
.g-partners { margin-top: 32px; }
.g-pbtns { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 6px 0 12px; }
.g-pbtn { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 58px; padding: 12px 18px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-strong); text-decoration: none; }
.g-pbtn strong { font-size: var(--fs-base); }
.g-pbtn span { font-size: var(--fs-sm); font-weight: var(--fw-semi); }
/* (T-189) 숙소 지도 — 높이 고정(불러오기 전에도 같은 칸)이라 화면이 흔들리지 않음 */
.g-staymap { margin-top: 16px; }
.g-staymap h3 { margin: 0 0 4px; font-size: var(--fs-lg); }
.g-staymap .g-muted { margin: 0 0 12px; }
.g-staymap-btn { margin-bottom: 12px; }
.g-staymap-frame { display: block; width: 100%; height: 440px; border: 0; border-radius: var(--radius-sm); background: var(--fill); }
@media (min-width: 720px) { .g-staymap-frame { height: 520px; } }
.g-staymap .g-staymap-credit { margin: 8px 0 0; font-size: var(--fs-sm); }
.g-btn-line { display: inline-flex; align-items: center; min-height: 52px; padding: 10px 20px; border: 2px solid var(--accent); border-radius: 999px; font-weight: var(--fw-bold); text-decoration: none; }
.g-faq { background: var(--card); border-radius: var(--radius-sm); padding: 4px 18px; box-shadow: var(--shadow-sm); margin-bottom: 10px; }
.g-faq summary { cursor: pointer; font-weight: var(--fw-bold); padding: 12px 0; min-height: 48px; }
.g-faq p { margin: 0 0 14px; color: var(--ink-2); }

@media (max-width: 420px) {
  .g-nav { gap: 0; }
  .g-nav > a:not(.g-lang) { padding: 10px 5px; font-size: var(--fs-sm); }
  .g-lang { padding: 8px 12px; font-size: var(--fs-sm); margin-left: 2px; min-width: 48px; text-align: center; }
  .g-logo { font-size: var(--fs-lg); }
}
/* 좁은 휴대폰: 언어 버튼은 EN/KO로 짧게 (화면 읽기는 aria-label로 전체 이름) — 상단이 한 줄에 들어가게 */
.g-lang-short { display: none; }
@media (max-width: 400px) {
  .g-lang-full { display: none; }
  .g-lang-short { display: inline; }
}

/* 외교부 여행경보 띠 (T-159·T-160, 앱 .alert-band 와 같은 색) — 빨강 = 전역 3단계 이상 또는 목적지 3단계 이상, 노랑 = 2단계·일부 지역만 3~4단계, 파랑 = 1단계 이하 */
.g-alert { margin: 12px 0 16px; padding: 10px 14px; border-radius: var(--radius-sm); border-left: 5px solid var(--line); background: var(--fill); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--ink); }
.g-alert p { margin: 0; }
.g-alert .g-alert-area { margin-top: 2px; }
.g-alert .g-alert-cancel { font-weight: var(--fw-bold); margin-top: 2px; }
.g-alert .g-alert-sub { color: var(--muted); margin-top: 2px; }
.g-alert .g-alert-sub a { color: var(--accent-strong); font-weight: var(--fw-bold); display: inline-flex; align-items: center; min-height: 48px; min-width: 48px; }
.g-alert-lv1 { border-color: #2F6FED; background: rgba(47, 111, 237, 0.08); }
.g-alert-lv0 { border-color: var(--line); background: var(--fill); }   /* (T-654) 목적지 경보 없음(일부 지역만) — 흐린 회색 */
/* (T-195) 목적지 1단계 이하 — 한 줄로 접고 누르면 펼침 (누름 칸 48px) */
.g-alert-fold { padding-top: 0; padding-bottom: 0; }
.g-alert-fold > summary { display: block; min-height: 48px; padding: 12px 28px 12px 0; cursor: pointer; list-style: none; position: relative; }
.g-alert-fold > summary::-webkit-details-marker { display: none; }
.g-alert-fold > summary::after { content: '▾'; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: var(--fs-base); }
.g-alert-fold[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
.g-alert-fold > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }
.g-alert-body { padding: 0 0 8px; }
.g-alert-lv2 { border-color: #F5A524; background: rgba(245, 165, 36, 0.14); }
.g-alert-lv3 { border-color: #E5484D; background: rgba(229, 72, 77, 0.12); }
.g-alert-lv3 .g-alert-cancel { color: #C4252B; }
:root[data-theme="dark"] .g-alert-lv3 .g-alert-cancel { color: #FF8A8E; }

@media (min-width: 600px) {
  .g-posts { grid-template-columns: 1fr 1fr; }
  h1 { font-size: var(--fs-3xl); }
  .g-btns { grid-template-columns: repeat(4, 1fr); }
  .g-btn:last-child:nth-child(odd) { grid-column: auto; }
  .g-facts { grid-template-columns: repeat(3, 1fr); }
  .g-sos { grid-template-columns: repeat(4, 1fr); }
  .g-budget, .g-grid { grid-template-columns: repeat(3, 1fr); }
  .g-grid { grid-template-columns: 1fr 1fr; }
}
/* (T-501) 목록 더 보기 — 처음 24개, 누르면 24개씩 (자바스크립트 없으면 hidden 그대로, 카드는 전부 보임) */
.g-more { display: block; width: 100%; min-height: 52px; margin: 16px 0 32px; border: 0; border-radius: 999px; background: var(--card); box-shadow: var(--shadow-sm); color: var(--accent); font: inherit; font-size: var(--fs-base); font-weight: var(--fw-bold); cursor: pointer; }
.g-more[hidden] { display: none; }
/* (T-497) 터치 48px — 로고·위 메뉴·언어 버튼·이어 가기 링크(문단 하나에 링크 하나) */
.g-logo, .g-nav > a { display: inline-flex; align-items: center; min-height: 48px; }
.g-nav > a.g-lang { padding-top: 0; padding-bottom: 0; }
p > .g-link:only-child, .g-fare .g-link, .g-route-link .g-link { display: inline-flex; align-items: center; min-height: 48px; }
.g-crumb a { display: inline-block; padding: 15px 8px; margin: -15px -8px; }   /* (T-497) 누르는 칸 48px 높이 — 보이는 자리는 그대로 */
/* (T-506) 글 첫 화면 = 제목 → 대표 사진 → 요약 한 줄 → 경보 한 줄 → 목차(접힘). 다른 언어 줄은 맨 아래 */
.g-chip-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; overflow-wrap: anywhere; }
.g-alert-fold[open] .g-chip-line { display: inline; -webkit-line-clamp: unset; }
.g-toc-fold { margin: 0 0 20px; }
.g-toc-fold > summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; list-style: none; position: relative; padding-right: 28px; margin: 0; }
.g-toc-fold > summary::-webkit-details-marker { display: none; }
.g-toc-fold > summary::after { content: '▾'; position: absolute; right: 2px; color: var(--muted); font-size: var(--fs-base); }
.g-toc-fold[open] > summary::after { transform: rotate(180deg); }
.g-toc-fold > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }
.g-toc-fold .g-toc { margin: 4px 0 0; }
.g-toc-fold > summary { padding: 0 40px 0 18px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm); color: var(--ink-2); font-weight: var(--fw-bold); }
.g-toc-fold > summary::after { right: 16px; }
/* (T-512) 목록 위쪽 압축 — 검색칸 이름표는 화면 읽기 프로그램만(입력칸 안 예시 글이 같은 뜻), 칩은 조금 좁게(줄바꿈은 그대로, 48px 유지), 소개·RSS 줄은 목록 아래 */
.g-search-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.g-search { margin: 8px 0 10px; }
.g-kinds { gap: 6px; margin: 0 0 16px; }
.g-kind { padding: 0 11px; font-size: var(--fs-sm); gap: 4px; }
.g-lead-foot { margin: 24px 0 8px; font-size: var(--fs-base); color: var(--muted); }
/* (T-563) 앱과 같은 모양 — 360 첫 화면에 제목·요약·앱 검색 버튼
 *  검색 상자: 제목 → 버튼 → 안내 한 줄(버튼 아래로), 목차는 상자 뒤. 블로그: 요약·날짜 아래 앱 버튼 하나(앱 .btn-primary 와 같은 파란 바탕·16px 모서리·56px) */
:root { --radius-md: 16px; }
.g-cta .g-btns { margin-top: 10px; }
.g-cta .g-btn:not(.g-btn-primary) { background: var(--fill); }   /* (T-654) 흰 카드 안 흰 단추는 테두리가 안 보여 — 흐린 회색 단추(누르는 칸 그대로) */
.g-cta .g-btns + .g-muted { margin: 12px 0 0; font-size: var(--fs-sm); }
.g-cta + .g-toc-fold { margin-top: -4px; }
.g-quick-p { margin: 0 0 8px; }
.g-quick { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 12px 20px; border-radius: var(--radius-md); background: var(--accent-fill); color: var(--on-accent); font-size: var(--fs-base); font-weight: var(--fw-bold); text-decoration: none; text-align: center; line-height: var(--lh-title); box-shadow: 0 6px 16px rgba(255, 179, 0, .35); }
.g-quick:hover { background: var(--accent-hover); }   /* (T-626) 진한 갈색 위 진한 글자이던 것 → 앱 버튼처럼 조금 진한 노랑 */
.g-quick:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (min-width: 600px) { .g-quick { display: inline-flex; min-width: 320px; } }
.g-date + .g-quick-p { margin-top: 4px; }
/* (T-626) 노랑 버튼 화면당 하나 — 블로그 글은 맨 위 [항공권 찾기](.g-quick) 가 노랑이고, 도시별 칸의 같은 버튼은 흰 버튼(앱 btn-ghost 처럼).
 *  :has 를 모르는 브라우저는 예전처럼 노랑(동작 같음) */
body:has(.g-quick) .g-btn-primary { background: var(--card); color: var(--ink); font-weight: var(--fw-semi); }
/* (T-628) 가이드 목록 = 사진 카드 2열(PC 4열) — 사진(480px 작은 판, 3:2) 위, 나라·도시 아래. 노선 목록(.g-grid)은 그대로 */
.g-grid-photo { grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 760px) { .g-grid-photo { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.g-grid-photo .g-city { padding: 0 0 12px; overflow: hidden; gap: 2px; }
.g-city-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--fill); margin: 0 0 8px; }
.g-grid-photo .g-city-cc, .g-grid-photo .g-city strong { padding: 0 12px; }
.g-grid-photo .g-city strong { font-size: var(--fs-lg); line-height: var(--lh-title); }
/* 사진 출처 — 접힌 한 줄(누름 48px), 펼치면 도시·작가·라이선스 */
.g-credits { margin: 0 0 32px; font-size: var(--fs-sm); color: var(--muted); }
.g-credits > summary { display: inline-flex; align-items: center; min-height: 48px; cursor: pointer; font-weight: var(--fw-semi); }
.g-credits > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }
.g-credits ul { margin: 4px 0 0; padding-left: 20px; line-height: var(--lh-body); }
.g-credits a { color: var(--muted); }
.g-city-pic { display: block; }
/* (T-635) 긴급 전화 — 번호 글자(높이 30)만 눌리던 것 → 카드 전체(76px)가 그 번호로 걸리게(앱 도착지 화면처럼). 링크를 카드 크기로 늘림, 포커스 테두리도 카드에 */
.g-sos li { position: relative; min-height: 48px; }
.g-sos a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.g-sos a:focus-visible { outline: none; }
.g-sos a:focus-visible::after { outline: 3px solid var(--accent); outline-offset: 2px; }
/* (T-635) 블로그 목록 아래 RSS 링크(31x20) → 누름 칸 44x44 */
.g-lead-foot a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
/* (T-637) 언어 단추 = 앱 '🌐 한국어' 단추와 같은 모양(알약 + 선 그림 지구). 좁은 휴대폰은 지구 + 'EN'/'KO' */
.g-lang { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.g-lang .g-ico { width: 18px; height: 18px; }
/* (T-637) 경보 줄 그림 = 선 그림(색 그림 문자 대신), 경보 단계 색 */
.g-alert .g-ico { width: 18px; height: 18px; vertical-align: -3px; }
.g-alert .g-ico-info { color: #2F6FED; }
.g-alert .g-ico-warn { color: #B45309; }
.g-alert .g-ico-stop { color: var(--sos); }
:root[data-theme="dark"] .g-alert .g-ico-info { color: #7FA8FF; }
:root[data-theme="dark"] .g-alert .g-ico-warn { color: #F5C66B; }

/* (T-650) 굵기 정리 — 메타·태그·칩·개수·출처 접기 400 (버튼·가격·제목은 그대로) */
.g-meta span, .g-tag, .g-chips a, .g-kind-n, .g-credits > summary { font-weight: var(--fw-regular); }

/* (T-654) 경보 없음(일부 지역만) 줄의 선 그림도 흐린 색 — .g-alert .g-ico-info(파랑)보다 뒤·더 구체적으로 */
.g-alert.g-alert-lv0 .g-ico-info { color: var(--muted); }
/* (T-654) 노랑 [항공권 찾기]가 있는 쪽(블로그 등)에서 흰 단추로 바뀐 주 단추도 흰 카드 안에선 흐린 회색 — 테두리 없는 흰 단추가 안 보이던 것 */
body:has(.g-quick) .g-cta .g-btn-primary { background: var(--fill); }

/* (T-657) 글 카드 썸네일을 <picture> 로 감쌈 — 줄 안 여백이 생기지 않게 */
.g-post-pic { display: block; }

/* (T-660) 큰 PC(1300 이상) — 가이드·블로그 '목록'(검색 칸이 있는 쪽)은 글 읽는 쪽이 아니라 카드 목록이라 앱과 같은 1080 칸으로(머리 줄도 같은 자리),
 *  가이드 사진 카드 5열·블로그 글 카드 3열. 글 쪽(가이드·블로그·노선)은 한 줄 60자 안팎을 지키려 728 그대로. 390·768·1200 은 바뀌지 않음 */
@media (min-width: 1300px) {
  body:has(.g-search) .g-wrap { max-width: 1112px; }
  body:has(.g-search) .g-grid-photo { grid-template-columns: repeat(5, 1fr); }
  body:has(.g-search) .g-posts { grid-template-columns: repeat(3, 1fr); }
}