/* 완주잇다 — 공개 앱. 값은 tokens.css 의 토큰을 쓴다.
   2판: 회색 바탕(--c-bg) 위에 흰 카드(.sec)를 쌓는다. 상세 화면만 흰 띠를 회색 틈으로 나눈다(app-views.css).
   3D 그래픽은 .art(img/3d/*.webp), 선 아이콘은 .ic. 크기는 rem 이라 글자 크기 단계를 따른다. */

/* ── 바탕 */
:root {
  /* 흰 카드 위 작은 보조 글자(ink-3 은 흰 카드 5.4:1, 회색 바탕 4.9:1) */
  --muted: var(--c-ink-3);
  --accent-t: var(--c-accent-text);
  --cat: var(--c-primary);
  /* 머리말 바탕: 화면 맨 위 색과 같게 둔다(홈은 민트 띠, 상세·지도는 흰색) */
  --hdr-bg: var(--c-bg);
  --topo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M164 147Q164 150 165 154Q166 158 164 162Q161 166 156 166Q150 166 146 163Q143 160 140 158Q138 156 135 153Q132 150 132 146Q133 142 137 139Q141 137 145 136Q150 135 155 136Q159 137 161 140Q163 144 164 147ZM178 144Q179 150 180 158Q182 165 177 174Q172 182 161 182Q150 182 143 176Q136 170 131 166Q126 162 120 156Q114 150 115 142Q116 134 124 129Q132 124 141 122Q150 120 159 122Q168 124 172 131Q177 137 178 144ZM193 140Q195 150 197 162Q198 173 191 186Q184 199 167 199Q150 199 139 190Q129 181 121 174Q113 168 104 159Q94 150 96 137Q97 124 109 117Q122 109 136 107Q150 105 163 108Q177 111 184 121Q191 130 193 140ZM210 136Q212 150 214 166Q217 182 206 199Q196 216 173 217Q150 217 136 205Q121 192 111 183Q100 174 87 162Q73 150 75 132Q76 114 94 104Q111 94 131 92Q150 90 168 94Q186 98 197 110Q207 122 210 136ZM228 132Q232 150 234 171Q236 191 222 213Q209 235 179 236Q150 236 131 220Q113 204 99 192Q86 181 68 165Q50 150 52 127Q54 104 77 91Q100 78 125 76Q150 74 173 78Q196 83 210 99Q224 114 228 132ZM248 127Q253 150 255 176Q256 201 239 228Q222 255 186 256Q150 257 127 236Q104 216 88 202Q71 188 48 169Q25 150 27 121Q29 92 59 76Q88 61 119 59Q150 57 178 63Q206 68 225 87Q243 105 248 127ZM270 123Q277 150 277 181Q278 212 257 243Q236 275 193 276Q150 278 123 254Q95 230 75 213Q55 196 27 173Q-1 150 1 115Q3 79 39 61Q76 43 113 41Q150 40 183 47Q217 53 240 74Q263 95 270 123ZM294 117Q302 150 302 186Q301 223 276 259Q251 296 200 298Q150 300 118 272Q85 244 62 224Q38 204 5 177Q-29 150 -27 108Q-25 66 19 44Q62 23 106 23Q150 23 189 30Q228 37 257 61Q285 85 294 117Z'/%3E%3C/svg%3E");
}
[data-cat="nature"] { --cat: var(--c-cat-nature); }
[data-cat="walk"] { --cat: var(--c-cat-walk); }
[data-cat="sight"] { --cat: var(--c-cat-sight); }
[data-cat="experience"] { --cat: var(--c-cat-experience); }
[data-cat="local"] { --cat: var(--c-cat-local); }

*, *::before, *::after { box-sizing: border-box; }
/* 키보드로 옮겨 다닐 때 초점이 붙박이 머리말·하단 탭에 가리지 않게 여백을 둔다 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding: calc(var(--header-h) + var(--safe-t) + 8px) 0 calc(var(--tabbar-h) + var(--safe-b) + 8px); }
html:has(dialog[open]) { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-normal);
  color: var(--c-ink);
  background: #e9ecef;
  word-break: keep-all;
  overflow-wrap: anywhere;
  /* 끝줄에 낱말 하나만 남지 않게(span·dd·li·small 등 모든 글자에 물려준다) */
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { line-height: var(--lh-tight); letter-spacing: var(--ls-tight); text-wrap: balance; }
/* 이름 조각(cards.js nm): 쉼표로 나눈 덩어리는 통째로 줄을 바꾸고, 끝 괄호 설명은 보조 줄로 */
.nw { display: inline-block; text-decoration: inherit; }
.paren { display: block; margin-top: 1px; font-size: 0.875em; font-weight: var(--fw-medium); color: var(--muted); }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: 6px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ic { flex: none; width: 24px; height: 24px; }
/* 3D 그래픽(꾸밈). 이미지 크기는 width·height 속성이 정하고, 글자 크기 단계에 맞춰 조금 커진다 */
.art { flex: none; width: calc(var(--art, 48) * 1px); height: auto; aspect-ratio: 1; object-fit: contain; -webkit-user-select: none; user-select: none; pointer-events: none; }
html[data-fs="2"] .art:not(.hero__art), html[data-fs="3"] .art:not(.hero__art) { width: calc(var(--art, 48) * 1.12px); }
.skip { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 14px; border-radius: var(--r-sm); background: var(--c-ink); color: #fff; font-weight: var(--fw-semibold); transform: translateY(-200%); }
.skip:focus { transform: none; }
/* 화면이 바뀔 때 제목으로 초점을 옮기지만(읽어 주기용) 테두리는 그리지 않는다 */
h1:focus, #view:focus { outline: none; }

/* ── 뼈대: 가운데 앱 기둥 */
.app { position: relative; display: flex; flex-direction: column; max-width: var(--app-max); min-height: 100dvh; margin: 0 auto; background: var(--c-bg); box-shadow: 0 0 0 1px var(--c-line), 0 24px 80px rgba(25, 31, 40, 0.08); }
.app:has(.view--home) { --hdr-bg: var(--c-tint-mint); }
.app:has(.view--item), .app:has(.view--map) { --hdr-bg: var(--c-surface); }
#view { flex: 1; display: flex; flex-direction: column; min-width: 0; outline: none; }
.view { flex: 1; padding-bottom: var(--s-12); }

.hdr { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--s-1); height: calc(var(--header-h) + var(--safe-t)); padding: var(--safe-t) var(--s-2) 0 var(--s-1); background: var(--hdr-bg); transition: background var(--dur-2); }
.hdr--root { padding-left: var(--gutter); }
/* 하위 화면 제목은 가운데(뒤로 단추와 오른쪽 도구 사이). 탭 화면 제목은 왼쪽에 크게 */
.hdr__t { flex: 1; min-width: 0; font-size: var(--fs-17); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr:not(.hdr--root) .hdr__t { position: absolute; right: 56px; bottom: 0; left: 56px; display: flex; align-items: center; justify-content: center; height: var(--header-h); pointer-events: none; }
.hdr:not(.hdr--root):has(.chip--off) .hdr__t { right: 132px; left: 132px; }
.hdr--root .hdr__t { font-size: var(--fs-20); font-weight: var(--fw-bold); }
.hdr__r { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.brand { display: flex; flex: none; align-items: center; gap: var(--s-2); min-height: var(--tap); margin-right: var(--s-1); }
/* 좁은 휴대폰의 홈 머리말: 단추 셋 + 오프라인 표시가 로고를 밀지 않게 표시는 아이콘만(글자는 읽어 주기로 남는다) */
@media (max-width: 380px) {
  .hdr--root .chip--off { gap: 0; padding: 4px 6px; font-size: 0; }
  .hdr--root .chip--off .ic { width: 16px; height: 16px; }
}
.brand__logo { flex: none; width: auto; height: 28px; }
.ibtn { display: grid; place-items: center; flex: none; width: var(--tap); height: var(--tap); border-radius: 50%; color: var(--c-ink); transition: background var(--dur-1); }
.ibtn:active { background: rgba(25, 31, 40, 0.07); }
/* 글자 크기 단추: "가" 두 개(작은 것·큰 것) */
.ibtn--fs { font-size: 0; }
.ibtn--fs b { font-size: 13px; font-weight: var(--fw-heavy); line-height: 1; letter-spacing: -0.04em; }
.ibtn--fs b + b { margin-left: 1px; font-size: 18px; }
.ibtn--fs span { display: flex; align-items: flex-end; }

.tabs { position: sticky; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); min-height: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--safe-b); background: var(--c-surface); border-top: 1px solid var(--c-line); }
.tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 6px 0; font-size: var(--fs-12); font-weight: var(--fw-medium); line-height: 1.2; color: var(--muted); white-space: nowrap; }
.tab .ic { transition: transform var(--dur-1); }
.tab:active .ic { transform: scale(0.92); }
/* 지금 화면: 이끄는 색 + 옅은 면을 채운 아이콘 */
.tab[aria-current] { color: var(--c-primary); font-weight: var(--fw-bold); }
.tab[aria-current] .ic { fill: color-mix(in srgb, var(--c-brand) 24%, transparent); }
.tab:focus-visible { outline-offset: -4px; }

.stage { display: none; }
@media (min-width: 1080px) {
  body::before { content: ""; position: fixed; inset: 0; background: var(--c-line-strong); opacity: 0.6; -webkit-mask: var(--topo) calc(50% - 520px) 40% / 620px no-repeat, var(--topo) calc(50% + 560px) 90% / 760px no-repeat; mask: var(--topo) calc(50% - 520px) 40% / 620px no-repeat, var(--topo) calc(50% + 560px) 90% / 760px no-repeat; pointer-events: none; }
  .stage { display: block; position: fixed; top: 132px; left: calc(50% - 240px - 296px); width: 240px; }
  .stage__n { display: flex; align-items: center; gap: var(--s-2); }
  .stage__logo { width: 142px; height: 32px; }
  .stage__t { margin-top: var(--s-3); font-size: var(--fs-24); font-weight: var(--fw-bold); line-height: 1.35; letter-spacing: var(--ls-tight); }
  .stage__d { margin-top: var(--s-4); font-size: var(--fs-14); color: var(--muted); text-wrap: balance; }
  .stage__l { display: flex; flex-direction: column; gap: 8px; margin-top: var(--s-5); padding: var(--s-4); border-radius: var(--r-lg); background: var(--c-surface); font-size: var(--fs-14); color: var(--c-ink-2); }
  .stage__l li { display: flex; align-items: center; gap: 8px; }
  .stage__l li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c-brand); }
  .stage--r { left: calc(50% + 240px + 64px); width: 200px; }
  .stage__qr { width: 148px; height: 148px; padding: 12px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-2); box-sizing: content-box; }
  .stage__qr svg { width: 100%; height: 100%; }
  .stage__h { margin-top: var(--s-4); font-size: var(--fs-16); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
  .stage--r .stage__d { margin-top: var(--s-2); }
  .stage__u { margin-top: var(--s-3); font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--c-primary-strong); overflow-wrap: normal; word-break: keep-all; }
}

/* ── 공통 조각 */
/* 배지: 옅은 면 + 진한 글자(카테고리는 그 색, 대비 4.5:1 이상) */
.chip { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 1.5rem; padding: 2px 9px; border-radius: var(--r-pill); background: var(--c-bg); font-size: var(--fs-12); font-weight: var(--fw-semibold); line-height: 1.2; white-space: nowrap; color: var(--c-ink-2); }
.chip .ic { width: 14px; height: 14px; }
.chip--off { background: var(--c-ink); color: #fff; }
/* 카테고리 배지: 옅은 면 위에서도 4.5:1 을 넘기게 글자는 카테고리 색을 먹색 쪽으로 조금 짙게 */
.chip--cat { background: color-mix(in srgb, var(--cat) 10%, #fff); color: color-mix(in srgb, var(--cat) 85%, #191f28); }
.chip--theme { background: var(--c-primary-soft); color: var(--c-primary-strong); }
.chip--sample { border: 1px dashed var(--accent-t); background: var(--c-accent-soft); color: var(--accent-t); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* 거르기 칩(홈의 관심사, 둘러보기·지도의 거르기): 흰 면 + 테두리, 고르면 민트 테두리·민트 면. 누름 영역은 위아래 4px 더 */
.fchip { position: relative; display: inline-flex; align-items: center; gap: 5px; flex: none; min-height: 2.25rem; padding: 4px 14px; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-surface); font-size: var(--fs-14); font-weight: var(--fw-semibold); line-height: 1.2; color: var(--c-ink-2); white-space: nowrap; transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1); }
.fchip::after, .tag::after, .seg button::after { content: ""; position: absolute; inset: -4px 0; }
.fchip b { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--muted); }
.fchip .ic { width: 16px; height: 16px; }
.fchip[aria-pressed="true"] { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary-strong); box-shadow: inset 0 0 0 0.5px var(--c-primary); }
.fchip[aria-pressed="true"] b { color: var(--c-primary-strong); }
.fchip:disabled { opacity: 0.45; cursor: default; }
/* 글자 단추(작은 보조 동작) */
.tbtn { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: var(--tap); padding: 0 6px; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--c-ink-2); white-space: nowrap; }
.tbtn .ic { width: 16px; height: 16px; color: var(--c-primary); }

/* 단추: 흰 면 + 옅은 테두리(어느 바탕에서도 보인다), 주 단추는 민트 면 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); padding: 6px var(--s-4); border: 1px solid var(--c-line-strong); border-radius: var(--r-btn); background: var(--c-surface); font-size: var(--fs-15); font-weight: var(--fw-semibold); line-height: 1.25; text-align: center; white-space: nowrap; transition: background var(--dur-1), transform var(--dur-1), border-color var(--dur-1); }
.btn .ic { width: 20px; height: 20px; }
.btn:active { transform: scale(0.98); background: var(--c-surface-2); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn--pri { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.btn--pri:active { background: var(--c-primary-strong); }
.btn--sm { padding: 4px 12px; border-radius: 12px; font-size: var(--fs-14); }
.btn--block { display: flex; width: 100%; min-height: 52px; border-radius: var(--r-md); font-size: var(--fs-16); }
/* 회색 면 단추(카드 안의 보조 동작) */
.btn--soft { border-color: transparent; background: var(--c-bg); }
.btn--soft:active { background: var(--c-bg-deep); }
.btn[aria-pressed="true"] { background: var(--c-primary-soft); border-color: transparent; color: var(--c-primary-strong); }
.btn[aria-pressed="true"] .ic { fill: currentColor; }
[aria-pressed="true"] > [data-off], [aria-pressed="false"] > [data-on] { display: none; }

/* 구획 = 흰 카드 */
.sec { margin: var(--card-gap) var(--card-x) 0; padding: var(--s-6) var(--gutter); border-radius: var(--r-xl); background: var(--c-surface); }
.sec__hd { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.sec__t { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-20); font-weight: var(--fw-bold); }
.sec__t .art { --art: 28; margin: -4px 0; }
.sec > .sec__t { margin-bottom: var(--s-3); }
.sec__sub { margin-top: 3px; font-size: var(--fs-14); color: var(--muted); line-height: 1.5; }
.more { display: inline-flex; align-items: center; flex: none; min-height: var(--tap); margin: -10px -4px -10px 0; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--c-ink-2); white-space: nowrap; }
.more .ic { width: 16px; height: 16px; color: var(--c-ink-4); }
.note { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-14); line-height: 1.55; color: var(--muted); }
.note .ic { width: 16px; height: 16px; margin-top: 0.15em; }
.box { overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); }

.media { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--c-bg); background: color-mix(in srgb, var(--cat) 10%, var(--c-bg)); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--sq { flex: none; width: min(5rem, 24vw); aspect-ratio: 1; border-radius: 14px; }
.media--wide { aspect-ratio: 16 / 9; }
.media--tall { aspect-ratio: 3 / 4; }
.media--43 { aspect-ratio: 4 / 3; }
/* 사진이 없을 때의 표지: 카테고리 색을 옅게 깐 면에 같은 색 등고선과 아이콘 */
.cover { position: absolute; inset: 0; background: color-mix(in srgb, var(--cat) 13%, #fff); color: var(--cat); }
.cover svg { width: 100%; height: 100%; fill: none; stroke: currentColor; }
.cover__l { stroke-width: 0.8; opacity: 0.3; }
.cover__b { stroke-width: 1.3; opacity: 0.42; }
.cover__ic { stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* 테마 표지: 단계 장소들을 실제 위치 관계대로 점과 선으로 잇는다(cards.js themeArt) */
.cover--theme { background: var(--c-tint-mint); color: var(--c-primary); }
.tart__line { stroke: var(--c-primary); stroke-width: 2; stroke-dasharray: 0.5 5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.tart__dot { fill: var(--c-primary); stroke: #fff; stroke-width: 1.5; }
.tart__end { fill: var(--c-accent); stroke: #fff; stroke-width: 1.5; }

.over { display: flex; align-items: center; gap: 6px; font-size: var(--fs-13); font-weight: var(--fw-semibold); line-height: 1.35; color: var(--c-ink-2); color: color-mix(in srgb, var(--cat) 78%, #191f28); }
.num { display: inline-grid; place-items: center; flex: none; min-width: 30px; min-height: 1.375rem; padding: 2px 7px; border-radius: 7px; background: var(--c-primary); color: #fff; font-size: var(--fs-12); font-weight: var(--fw-bold); line-height: 1; }
.meta { display: flex; flex-wrap: wrap; align-items: center; font-size: var(--fs-13); line-height: 1.5; color: var(--muted); }
.meta:not(.credit) > * + *::before { content: ""; display: inline-block; width: 1px; height: 0.7em; margin: 0 7px; background: var(--c-line-strong); vertical-align: -0.02em; }
.diff { position: relative; display: inline-flex; align-items: center; gap: 5px; font-weight: var(--fw-semibold); color: var(--c-ink-2); }
.meta > .diff::before { margin-right: 2px; }
.diff__b { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.diff__b i { width: 3px; border-radius: 1px; background: var(--c-line-strong); }
.diff__b i:nth-child(1) { height: 5px; }
.diff__b i:nth-child(2) { height: 8px; }
.diff__b i:nth-child(3) { height: 12px; }
.diff[data-lv="1"] i:nth-child(1) { background: var(--c-easy); }
.diff[data-lv="2"] i:nth-child(-n + 2) { background: var(--c-normal); }
.diff[data-lv="3"] i { background: var(--c-hard); }

.rows { display: flex; flex-direction: column; }
.row + .row { border-top: 1px solid var(--c-line); }
.row__a { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; }
.rows > .row:first-child .row__a { padding-top: 4px; }
.rows > .row:last-child .row__a { padding-bottom: 4px; }
.row__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.row__n { font-size: var(--fs-16); font-weight: var(--fw-bold); line-height: 1.35; }
.row__tag { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--fs-14); line-height: 1.45; color: var(--c-ink-2); }
.rtags { display: flex; flex-wrap: wrap; gap: 4px; }
.rtag { display: inline-flex; align-items: center; min-height: 1.5rem; padding: 2px 8px; border-radius: 7px; background: var(--c-surface-2); background: color-mix(in srgb, var(--cat) 7%, var(--c-surface-2)); font-size: var(--fs-13); font-weight: var(--fw-semibold); line-height: 1.2; color: var(--c-ink-2); }

.hscroll { position: relative; display: flex; gap: var(--s-3); margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 6px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: var(--gutter); scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > li { flex: none; scroll-snap-align: start; }

.ptile { position: relative; display: block; width: min(9.5rem, 44vw); overflow: hidden; border-radius: var(--r-md); color: #fff; }
.ptile .media { border-radius: 0; }
/* 이름이 놓이는 아래쪽은 사진이 밝아도 흰 글자가 4.5:1 을 넘기게 더 위에서 더 짙게 깔고, 글자에는 그림자를 더한다 */
.ptile::after { content: ""; position: absolute; inset: 30% 0 0; background: linear-gradient(transparent, rgba(12, 18, 24, 0.68) 55%, rgba(12, 18, 24, 0.9)); }
.ptile__r { position: absolute; top: 10px; left: 10px; z-index: 1; }
.ptile__b { position: absolute; right: 12px; bottom: 12px; left: 12px; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.ptile__b strong { font-size: var(--fs-15); font-weight: var(--fw-bold); line-height: 1.3; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.ptile__b small { font-size: var(--fs-12); opacity: 0.9; }

/* 카드 안의 가로 카드: 회색 면, 테두리 없음 */
.ctile { display: block; width: min(15.75rem, 72vw); overflow: hidden; border-radius: var(--r-md); background: var(--c-surface-2); }
.ctile .media { border-radius: 0; }
.ctile__b { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.ctile__n { font-size: var(--fs-16); font-weight: var(--fw-bold); }
.spark { width: 100%; height: 28px; margin-top: 6px; }
.spark__a { fill: color-mix(in srgb, var(--c-brand) 16%, transparent); }
.spark__l { fill: none; stroke: var(--c-brand); stroke-width: 1.75; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.empty { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: 48px var(--gutter) 56px; text-align: center; }
.empty__ic { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--s-2); border-radius: 50%; background: var(--c-surface); color: var(--c-primary); }
.empty__ic--art { width: auto; height: auto; margin-bottom: var(--s-1); background: none; }
.empty__ic--art .art { --art: 96; }
.empty__t { font-size: var(--fs-18); font-weight: var(--fw-bold); }
.empty__d { max-width: 26em; font-size: var(--fs-14); color: var(--muted); }
.empty__act { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-3); }
.empty > .btn { margin-top: var(--s-3); }

.boot { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); padding: 96px 0; font-size: var(--fs-14); color: var(--muted); }
.boot__dot { width: 28px; height: 28px; border: 3px solid var(--c-line-strong); border-top-color: var(--c-brand); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes sheet { from { opacity: 0; transform: translateY(32px); } }

.toasts { position: fixed; right: 0; bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px); left: 0; z-index: 60; display: flex; justify-content: center; padding: 0 var(--s-4); pointer-events: none; }
.toast { max-width: 420px; padding: 13px 18px; border-radius: var(--r-md); background: rgba(25, 31, 40, 0.92); color: #fff; font-size: var(--fs-14); font-weight: var(--fw-medium); line-height: 1.5; box-shadow: var(--shadow-2); animation: rise var(--dur-2) var(--ease); }

.sheet { position: fixed; inset: auto 0 0; width: 100%; max-width: var(--app-max); max-height: 88dvh; margin: 0 auto; padding: 0; overflow: auto; border: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow-sheet); }
.sheet[open] { animation: sheet var(--dur-2) var(--ease); }
.sheet::backdrop { background: var(--c-overlay); }
/* 끌어 내리는 손잡이 모양(꾸밈) */
.sheet::before { content: ""; position: sticky; top: 0; z-index: 2; display: block; width: 36px; height: 4px; margin: 8px auto -12px; border-radius: 2px; background: var(--c-line-strong); }
.sheet__in { padding: 0 var(--gutter) calc(var(--s-6) + var(--safe-b)); }
.sheet__hd { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-right: -10px; padding: var(--s-5) 0 var(--s-2); background: var(--c-surface); }
.sheet__t { font-size: var(--fs-20); font-weight: var(--fw-bold); }
.sheet__p { font-size: var(--fs-16); color: var(--c-ink-2); }
.sheet__s { margin-top: var(--s-3); font-size: var(--fs-14); color: var(--muted); }
.sheet__act { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-5); }

/* ── 글자 크기 고르기(시트·소개 화면) */
.fsz-wrap { min-width: 0; margin: 0; padding: 0; border: 0; }
.fsz { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 4px; border-radius: var(--r-md); background: var(--c-bg); }
.fsz__o { position: relative; }
.fsz__o input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fsz__o span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-height: 64px; padding: 8px 2px; border-radius: 12px; font-size: var(--fs-12); font-weight: var(--fw-semibold); line-height: 1.2; color: var(--muted); text-align: center; transition: background var(--dur-1), color var(--dur-1); }
.fsz__o b { font-size: 15px; font-weight: var(--fw-bold); line-height: 1; color: var(--c-ink-2); }
.fsz__o:nth-child(1) b { font-size: 14px; }
.fsz__o:nth-child(3) b { font-size: 18px; }
.fsz__o:nth-child(4) b { font-size: 21px; }
.fsz__o:nth-child(5) b { font-size: 24px; }
.fsz__o input:checked + span { background: var(--c-surface); color: var(--c-primary); box-shadow: var(--shadow-1), 0 0 0 1.5px var(--c-primary); }
.fsz__o input:checked + span b { color: var(--c-primary); }
.fsz__o input:focus-visible + span { outline: 2px solid var(--c-primary); outline-offset: 2px; }
/* 고대비(강제 색상) 모드에서는 면·그림자가 사라지므로 고른 단계를 테두리로 보인다 */
@media (forced-colors: active) {
  .fsz__o input:checked + span { outline: 2px solid CanvasText; outline-offset: -2px; }
}
.fsz__pv { margin-bottom: var(--s-4); padding: var(--s-4); border-radius: var(--r-md); background: var(--c-surface-2); }
.fsz__pv strong { display: block; font-size: var(--fs-18); font-weight: var(--fw-bold); line-height: 1.35; }
.fsz__pv p { margin-top: 4px; font-size: var(--fs-15); color: var(--c-ink-2); }

/* ── 스플래시(index.html #splash, js/splash.js 가 html[data-splash="intro|quick"] 를 붙일 때만). 고객 참고 화면구성안 01 의 구성:
   화면을 채운 완주 풍경 위 가운데 로고·한 줄 소개, 아래 "시작하기". 그림은 위쪽이 비어 있는 하늘이라 먹색 글자가 읽힌다. */
.splash { display: none; }
html[data-splash] body { overflow: hidden; }
html[data-splash] .skip { display: none; }
html[data-splash] .splash { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: center; background: var(--c-splash); }
.splash:focus { outline: none; }
.splash.is-out { opacity: 0; pointer-events: none; transition: opacity var(--dur-3) var(--ease); }
.splash__frame { position: relative; display: flex; flex-direction: column; width: 100%; max-width: var(--app-max); height: 100%; overflow: hidden; }
.splash__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center bottom; }
.splash__top { position: relative; padding: calc(var(--safe-t) + 15dvh) 28px 0; text-align: center; animation: rise 700ms var(--ease) both; }
.splash__logo { width: 213px; height: auto; margin: 0 auto; }
.splash__t { margin-top: 18px; font-size: var(--fs-20); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); color: var(--c-ink); }
.splash__d { margin-top: 6px; font-size: var(--fs-15); line-height: 1.55; color: var(--c-ink-2); }
.splash__bot { position: relative; margin-top: auto; padding: 0 24px calc(var(--safe-b) + 28px); animation: rise 700ms 120ms var(--ease) both; }
.splash__go { min-height: 56px; font-size: var(--fs-17); box-shadow: 0 8px 24px rgba(7, 102, 80, 0.28); }
/* 풍경 위에서도 읽히게 흰 글자에 그림자 */
.splash__s { margin-top: 12px; font-size: var(--fs-13); font-weight: var(--fw-semibold); text-align: center; color: #fff; text-shadow: 0 1px 3px rgba(12, 18, 24, 0.55); }
.splash__go:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* 빠른 스플래시(설치한 앱으로 열 때)는 단추 없이 잠깐 보였다가 닫힌다 */
html[data-splash="quick"] .splash__bot { visibility: hidden; }

/* ── 홈 */
/* 첫 화면 머리: 민트 띠(머리말과 이어진다) 위에 제목·3D 풍경·찾기 칸 */
.hero { position: relative; overflow: hidden; margin: 0; padding: var(--s-2) var(--gutter) var(--s-6); border-radius: 0 0 var(--r-xl) var(--r-xl); background: var(--c-tint-mint); color: var(--c-ink); }
.hero__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.hero__over { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--c-primary-strong); }
.hero__t { margin-top: 6px; font-size: var(--fs-28); font-weight: var(--fw-bold); line-height: 1.28; }
.hero__art { --art: 152; margin: -6px -10px -10px 0; aspect-ratio: auto; }
/* 글자를 크게 하면 제목 자리를 넓히려고 그림을 줄인다 */
html[data-fs="2"] .hero__art, html[data-fs="3"] .hero__art { --art: 124; }
.hero__d { margin-top: var(--s-3); font-size: var(--fs-15); line-height: 1.55; color: var(--c-ink-2); text-wrap: pretty; }
.hero__s { display: flex; align-items: center; gap: 10px; min-height: 52px; margin-top: var(--s-4); padding: 6px var(--s-4); border-radius: var(--r-md); background: var(--c-surface); color: var(--muted); font-size: var(--fs-16); box-shadow: 0 2px 10px rgba(10, 127, 99, 0.08); }
.hero__s .ic { width: 22px; height: 22px; color: var(--c-ink); }

.notice { display: flex; align-items: center; gap: 10px; width: calc(100% - 2 * var(--card-x)); min-height: 52px; margin: var(--card-gap) var(--card-x) 0; padding: 8px 10px 8px 12px; border-radius: var(--r-lg); background: var(--c-surface); color: var(--c-ink); font-size: var(--fs-14); text-align: left; }
.notice > .ic:first-child { box-sizing: content-box; width: 18px; height: 18px; padding: 7px; border-radius: 50%; background: var(--c-info-soft); color: var(--c-info); }
.notice > .ic:last-child { width: 18px; height: 18px; color: var(--c-ink-4); }
.notice__k { flex: none; font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--c-info); }
.notice__t { flex: 1; min-width: 0; overflow: hidden; font-weight: var(--fw-semibold); white-space: nowrap; text-overflow: ellipsis; }
.notice[data-level="warn"] > .ic:first-child, .notice[data-level="alert"] > .ic:first-child { background: var(--c-accent-soft); color: var(--accent-t); }
.notice[data-level="warn"] .notice__k, .notice[data-level="alert"] .notice__k { color: var(--accent-t); }

/* 카테고리: 흰 카드 안에 3D 그래픽 다섯 개 */
.cats { margin: var(--card-gap) var(--card-x) 0; padding: var(--s-5) 6px var(--s-4); border-radius: var(--r-xl); background: var(--c-surface); }
.cats ul { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-1); }
.cat { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 2px 0; font-size: var(--fs-14); font-weight: var(--fw-semibold); line-height: 1.3; color: var(--c-ink-2); text-align: center; }
.cat__ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 20px; background: color-mix(in srgb, var(--cat) 10%, #fff); color: var(--cat); transition: transform var(--dur-1); }
.cat__ic--art { background: var(--c-surface-2); }
.cat__ic--art .art { --art: 44; }
.cat:active .cat__ic { transform: scale(0.94); }

/* 관심사로 고르기(js/ui/interests.js): 칩을 고르면 아래에 맞춤 추천 */
.pick .chips { gap: 8px; }
.pick__res:not(:empty) { margin-top: var(--s-4); padding-top: var(--s-2); border-top: 1px solid var(--c-line); }
.pick__k { margin: var(--s-2) 0 2px; font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--c-primary-strong); }
.pick__x { margin: var(--s-2) 0 -10px -6px; }
.pick .note { margin-top: var(--s-2); }

/* 「오늘, 완주」: 홈에서 가장 먼저 눈에 들어오도록 민트 카드 위에 흰 테마 카드를 가로로 놓는다 */
.today { background: var(--c-primary-soft); }
.today__k { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--c-primary-strong); }
.today__k .art { --art: 24; }
.today__lead { margin: calc(-1 * var(--s-1)) 0 var(--s-3); font-size: var(--fs-15); line-height: 1.55; color: var(--c-ink-2); }
.today .sec__sub { color: var(--c-ink-2); }
.hscroll--t { padding-bottom: 4px; }
.ttile { display: flex; flex-direction: column; width: min(17rem, 78vw); height: 100%; overflow: hidden; border-radius: var(--r-lg); background: var(--c-surface); }
.hscroll--t > li { display: flex; }
.ttile .media { border-radius: 0; }
.ttile__b { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.ttile .over { color: var(--c-primary); }
.ttile__n { font-size: var(--fs-18); font-weight: var(--fw-bold); line-height: 1.3; }
.ttile__d { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--fs-14); line-height: 1.45; color: var(--c-ink-2); }
.ttile .meta { margin-top: auto; }
/* 단계가 이어지는 모양(꾸밈): 찬 점은 장소, 빈 점은 안내·이야기, 주황은 마지막 */
.chain { display: flex; align-items: center; margin: 6px 0 4px; }
.chain i { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c-brand); }
.chain i + i { margin-left: 16px; }
.chain i + i::before { content: ""; position: absolute; top: 50%; right: 100%; width: 16px; height: 2px; margin-top: -1px; background: var(--c-line-strong); }
.chain i.is-n { border: 2px solid var(--c-brand); background: var(--c-surface); }
.chain i.is-end { background: var(--c-accent); border-color: var(--c-accent); }

/* 두 칸 바로가기: 구획 카드를 벗기고 칸마다 카드로 */
.sec:has(> .duo) { padding: 0; background: none; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--card-gap); }
.promo { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 172px; padding: var(--s-5) var(--s-4) var(--s-4); border-radius: var(--r-xl); background: var(--c-surface); }
.promo .art { --art: 48; margin: -4px 0 6px -2px; }
.promo strong { font-size: var(--fs-17); font-weight: var(--fw-bold); line-height: 1.3; }
.promo__k { display: flex; align-items: center; gap: 4px; font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--c-primary); }
.promo__d { font-size: var(--fs-14); line-height: 1.45; color: var(--muted); }
.promo__go { display: flex; align-items: center; margin-top: auto; padding-top: 6px; font-weight: var(--fw-semibold); color: var(--c-ink-2); }
.promo__go .ic { width: 16px; height: 16px; color: var(--c-ink-4); }
.promo--pri { background: var(--c-tint-mint); }
.promo--pri .promo__k { color: var(--c-primary-strong); }
.promo--pri .promo__d { color: var(--c-ink-2); }
.dots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 8px; }
.dots i { width: 10px; height: 10px; border: 1.5px solid color-mix(in srgb, var(--c-primary) 35%, #fff); border-radius: 50%; background: var(--c-surface); }
.dots i.on { border-color: var(--c-accent); background: var(--c-accent); }

.feat { display: block; margin-bottom: var(--s-1); }
.feat .over { margin-top: var(--s-3); }
.feat__t { margin-top: 4px; font-size: var(--fs-20); font-weight: var(--fw-bold); }
.feat__d { margin-top: 4px; font-size: var(--fs-15); color: var(--c-ink-2); }
.feat__m { margin-top: 6px; }
.sec > .btn--block { margin-top: var(--s-3); }
.sec > .note { margin-bottom: var(--s-2); }
.foot { margin: var(--s-8) var(--gutter) 0; font-size: var(--fs-13); line-height: 1.6; color: var(--muted); }
.foot .more { margin: 4px 0 0 -2px; }

[hidden] { display: none !important; }

@media (hover: hover) {
  .btn:hover { border-color: var(--c-ink-4); }
  .btn--soft:hover { background: var(--c-bg-deep); }
  .btn--pri:hover { background: var(--c-primary-strong); border-color: var(--c-primary-strong); }
  .ibtn:hover { background: rgba(25, 31, 40, 0.06); }
  .row__a:hover .row__n, .feat:hover .feat__t, .ctile:hover .ctile__n, .ttile:hover .ttile__n, .more:hover, .promo:hover strong { text-decoration: underline; text-underline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; }