/* travel.sw4u.kr — 구석구석 영상여행 (색·폰트·간격은 tokens.css 변수만 사용) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-family: var(--font-sans); }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
body {
  margin: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
  font-size: var(--fs-base);
  line-height: var(--line-base);
  color: var(--color-fg);
  background: var(--color-bg);
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; letter-spacing: var(--letter-tight); line-height: var(--line-tight); }
:focus-visible { outline: 2px solid var(--color-primary-strong); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: var(--space-2); background: var(--color-primary-strong); color: var(--color-primary-fg); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); z-index: var(--z-toast); }
.skip:focus { left: var(--space-2); }
.container { width: 100%; max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--space-4); }
.muted { color: var(--color-fg-muted); }
.link { color: var(--color-primary-soft-fg); font-size: var(--fs-sm); display: inline-flex; align-items: center; min-height: var(--control-height); }
.link:hover { text-decoration: underline; }

/* ── 헤더: 모바일은 브랜드+토글 / 검색 / 메뉴 세 줄, 900px 이상은 한 줄 고정 ── */
.site-header {
  position: relative; z-index: var(--z-sticky);   /* 모바일도 relative — 언어 목록이 카드 밑으로 숨지 않게 */
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner { display: flex; align-items: center; gap: var(--space-2) var(--space-3); min-height: var(--header-height-mobile); flex-wrap: wrap; padding-block: var(--space-2); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); font-weight: var(--fw-bold); font-size: var(--fs-md); white-space: nowrap; }
.brand__mark { font-size: 1.4em; }
.theme-toggle { order: 2; margin-left: auto; width: var(--control-height); height: var(--control-height); border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-fg); font-size: var(--fs-lg); cursor: pointer; }
.theme-toggle:hover { background: var(--color-surface-2); }
.theme-toggle::before { content: "☾"; }
[data-theme="dark"] .theme-toggle::before { content: "☀"; }
.site-search { order: 3; flex: 1 1 100%; display: flex; min-width: 0; }
.site-search input {
  flex: 1; min-width: 0; height: var(--control-height); padding: 0 var(--space-3);
  border: 1px solid var(--color-border-input); border-right: 0; border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--color-surface); color: var(--color-fg); font: inherit; font-size: var(--fs-sm);
}
.site-search input:focus-visible { outline-offset: -2px; position: relative; z-index: 1; }
.site-search button { height: var(--control-height); min-width: var(--control-height); padding: 0 var(--space-3); border: 1px solid var(--color-border-input); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--color-surface-2); color: var(--color-fg); cursor: pointer; }
.site-nav { order: 4; flex: 1 1 100%; display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; }
.site-nav a { display: inline-flex; align-items: center; min-height: var(--control-height); padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--color-fg-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; }
.site-nav a:hover { color: var(--color-fg); background: var(--color-surface-2); }
.site-nav a[aria-current="page"] { color: var(--color-fg); background: var(--color-surface-2); font-weight: var(--fw-semibold); }
@media (min-width: 900px) {
  .site-header { position: sticky; top: 0; }
  .site-header__inner { flex-wrap: nowrap; min-height: var(--header-height); }
  .site-nav { order: 0; flex: 0 1 auto; overflow: visible; }
  .site-search { order: 0; flex: 0 1 300px; margin-left: auto; }
  .theme-toggle { order: 0; margin-left: 0; }
}

/* ── 히어로: 흰 글자가 읽히는 진한 바탕(--gradient-hero-strong) ── */
.hero {
  margin-block: var(--space-6) var(--space-10);
  padding: var(--space-10) var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--gradient-hero-strong);
  color: var(--color-on-dark);
  box-shadow: var(--shadow-lg);
}
.hero__text { max-width: var(--container-sm); }
.hero__eyebrow { margin: 0 0 var(--space-3); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-on-dark); letter-spacing: var(--letter-wide); }
.hero h1 { font-size: var(--fs-3xl); font-weight: var(--fw-bold); }
.hero__lead { margin: var(--space-4) 0 var(--space-6); font-size: var(--fs-md); font-weight: var(--fw-regular); color: var(--color-on-dark); }
.hero__search { display: flex; gap: var(--space-2); max-width: var(--container-sm); }
.hero__search input {
  flex: 1; min-width: 0; height: var(--control-height-lg); padding: 0 var(--space-4);
  border: 1px solid var(--color-border-input); border-radius: var(--radius-lg);
  background: var(--color-bg); color: var(--color-fg); font: inherit;
}
.hero__search input::placeholder { color: var(--color-fg-muted); }
.hero .btn--primary { height: var(--control-height-lg); background: var(--color-on-dark); border-color: transparent; color: var(--gray-900); }
.hero .btn--primary:hover { background: var(--gray-100); }
.hero :focus-visible { outline-color: var(--color-on-dark); }
@media (max-width: 899px) { .hero h1 { font-size: var(--fs-2xl); } }
@media (min-width: 900px) { .hero { padding: var(--space-16) var(--space-12); } .hero h1 { font-size: var(--fs-4xl); } }

/* ── 버튼·칩 (모두 44px 이상) ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); padding: 0 var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-fg); font: inherit; font-weight: var(--fw-semibold); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
.btn:hover { background: var(--color-surface-2); }
.btn--primary { background: var(--color-primary-strong); border-color: transparent; color: var(--color-primary-fg); }
.btn--primary:hover { background: var(--color-primary-hover); }
.btn--block { width: 100%; margin-top: var(--space-4); font-size: var(--fs-sm); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1); flex: 0 0 auto;
  min-height: var(--control-height); padding: 0 var(--space-4); border-radius: var(--radius-full);
  background: var(--color-surface-2); color: var(--color-fg);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--line-tight); white-space: nowrap;
  border: 1px solid transparent; scroll-snap-align: start;
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.chip:hover { border-color: var(--color-border-strong); }
.chip.is-on { background: var(--color-primary-strong); color: var(--color-primary-fg); }
.chip--region { background: var(--color-accent-soft); color: var(--color-accent-soft-fg); }
.chip i { font-style: normal; font-weight: var(--fw-regular); }
.chips { display: flex; gap: var(--space-2); flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); }
.chips::-webkit-scrollbar { display: none; }

/* ── 섹션·타일·지역 ── */
.section { margin-block: var(--space-10); }
.section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.section__head h2 { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.more { display: inline-flex; align-items: center; min-height: var(--control-height); color: var(--color-primary-soft-fg); font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; }
.tiles { display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); }
.tiles::-webkit-scrollbar { display: none; }
.tile {
  display: flex; flex: 0 0 140px; flex-direction: column; align-items: flex-start; gap: var(--space-1); scroll-snap-align: start;
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); border: 1px solid var(--color-border);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.tile__icon { font-size: var(--fs-2xl); }
.tile__name { font-weight: var(--fw-semibold); }
.tile__count { font-size: var(--fs-xs); color: var(--color-fg-muted); }
.region-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.region { display: flex; flex-direction: column; justify-content: center; min-height: var(--control-height); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); }
a.region:hover { border-color: var(--color-primary); }
.region span { font-size: var(--fs-xs); color: var(--color-fg-muted); }
.region.is-empty { opacity: .5; }
@media (min-width: 900px) {
  .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .tile { flex: initial; }
  .region-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .region { padding: var(--space-3) var(--space-4); }
}

/* ── 카드: 탭 정지는 제목 하나, 위계는 썸네일 → 제목 → 지역·테마 ── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-5); }
.card { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card__media { position: relative; aspect-ratio: 16 / 9; background: var(--color-surface-2); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.card:hover .card__media img { transform: scale(1.04); }
.card__media.is-broken img { display: none; }
.card__media.is-broken::after { content: "썸네일 준비 중"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--color-fg-muted); font-size: var(--fs-sm); }
.card__play {
  position: absolute; inset: 0; margin: auto; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full); background: color-mix(in srgb, var(--gray-900) 60%, transparent); color: var(--color-on-dark);
  font-size: var(--fs-md); padding-left: 3px; opacity: 0; transition: opacity var(--duration-fast);
}
.card:hover .card__play, .card:focus-within .card__play { opacity: 1; }
@media (hover: none) { .card__play { opacity: 1; } }
.card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.card__meta { margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--color-fg-muted); }
.card__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__title a { display: block; }
.card__title a::after { content: ""; position: absolute; inset: 0; }   /* 카드 전체를 클릭 영역으로 */
.card { position: relative; }
.card__title a:hover { color: var(--color-primary-soft-fg); }
.card__title a:focus-visible { outline: none; }
.card__title a:focus-visible::after { outline: 2px solid var(--color-primary-strong); outline-offset: -2px; border-radius: var(--radius-lg); }

/* ── 목록·필터 ── */
.listing { margin-block: var(--space-6); }
.listing__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.listing__head .link { white-space: nowrap; margin-left: auto; }
.listing__head h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); }
.listing__head small { font-size: var(--fs-sm); color: var(--color-fg-muted); font-weight: var(--fw-regular); margin-left: var(--space-2); }
.filters { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); margin-bottom: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); }
.filter { display: grid; grid-template-columns: 1fr; gap: var(--space-2); align-items: start; }
.filter__label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-fg-muted); }
@media (min-width: 900px) {
  .filter { grid-template-columns: auto 1fr; gap: var(--space-3); align-items: center; }
  .filter__label { min-width: 56px; }
  .chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
}
.pager { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-8); }
.pager__btn { min-width: var(--control-height); min-height: var(--control-height); padding: 0 var(--space-3); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); font-size: var(--fs-sm); }
.pager__btn:hover { border-color: var(--color-border-strong); }
.pager__btn.is-current { background: var(--color-primary-strong); color: var(--color-primary-fg); border-color: transparent; }
.pager__btn.is-disabled { opacity: .4; }
@media (max-width: 899px) { .pager__btn[data-far] { display: none; } }
.empty { text-align: center; padding: var(--space-16) var(--space-4); color: var(--color-fg-muted); }
.empty h1 { font-size: var(--fs-xl); color: var(--color-fg); margin-bottom: var(--space-3); }

/* ── 영상 상세 ── */
.watch { margin-block: var(--space-4) var(--space-10); }
.crumbs { font-size: var(--fs-sm); color: var(--color-fg-muted); margin-bottom: var(--space-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--control-height); }
.crumbs a:hover { color: var(--color-fg); }
.player {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--gray-900); box-shadow: var(--shadow-lg);
  max-width: min(100%, calc((100svh - var(--header-height) - var(--space-16) * 3) * 16 / 9)); margin-inline: auto;
}
.player video, .player img { width: 100%; height: 100%; object-fit: contain; }
.player__note { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: var(--space-3); background: color-mix(in srgb, var(--gray-900) 70%, transparent); color: var(--color-on-dark); font-size: var(--fs-sm); text-align: center; }
.watch__head { margin-block: var(--space-5) var(--space-4); }
.watch__head .chips { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; }
.watch__head h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); }
.watch__head .chips { margin-top: var(--space-3); }
.watch__en { margin: var(--space-1) 0 0; color: var(--color-fg-muted); font-size: var(--fs-sm); }
.watch__body { display: grid; gap: var(--space-6); }
.watch__desc { max-width: var(--container-md); font-size: var(--fs-md); line-height: var(--line-loose); margin: 0 0 var(--space-4); }
.watch__en-desc { max-width: var(--container-md); margin-bottom: var(--space-4); color: var(--color-fg-muted); font-size: var(--fs-sm); }
.watch__en-desc summary { cursor: pointer; font-weight: var(--fw-medium); min-height: var(--control-height); display: flex; align-items: center; }
.watch__tags { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); font-size: var(--fs-sm); color: var(--color-fg-muted); }
.watch__tags a { display: inline-flex; align-items: center; min-height: var(--control-height); }
.watch__tags a:hover { color: var(--color-primary-soft-fg); }
.watch__side { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); align-self: start; }
.facts { margin: 0; display: grid; gap: var(--space-3); }
.facts div { display: grid; gap: var(--space-1); }
.facts dt { font-size: var(--fs-xs); color: var(--color-fg-muted); font-weight: var(--fw-semibold); }
.facts dd { margin: 0; font-size: var(--fs-sm); }
@media (min-width: 900px) { .watch__body { grid-template-columns: 1fr 300px; } }

/* ── 관광 콘텐츠: 카드 배지·갤러리·기간 ── */
.badge { display: inline-flex; align-items: center; padding: 0 var(--space-2); min-height: 24px; border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1; }
.badge--on { background: var(--color-success-soft); color: var(--color-success-soft-fg); }
.badge--end { background: var(--color-danger-soft); color: var(--color-danger-soft-fg); }
.badge--soon { background: var(--color-warn-soft); color: var(--color-warn-soft-fg); }
.card__badge { position: absolute; top: var(--space-2); left: var(--space-2); box-shadow: var(--shadow-sm); }
.card__noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--fs-4xl); background: var(--color-surface-2); }
.gallery { display: flex; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); }
.gallery::-webkit-scrollbar { display: none; }
.gallery__item { position: relative; flex: 0 0 min(85%, 640px); aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface-2); scroll-snap-align: start; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery__item:focus-visible { outline-offset: -3px; }
.place__hero { aspect-ratio: 16 / 10; background: var(--color-surface-2); }
.place__hero img { object-fit: cover; }
.place__period { margin: var(--space-2) 0 0; display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-md); font-weight: var(--fw-medium); }
.place__h2 { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin: var(--space-6) 0 var(--space-3); }
.facts--wide { max-width: var(--container-md); }
.watch__side .btn--block + .btn--block { margin-top: var(--space-2); }
.watch__side .facts > div + div { padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.place__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.place__actions .btn { flex: 1 1 auto; font-size: var(--fs-sm); }
@media (min-width: 900px) { .place__actions .btn { flex: 0 0 auto; } }
.nowrap { white-space: nowrap; }
@media (min-width: 900px) { .gallery { margin-inline: 0; padding-inline: 0; } .gallery__item { flex-basis: 480px; } }
@media (min-width: 900px) and (hover: hover) {
  .gallery { scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; padding-bottom: var(--space-2); }
  .gallery::-webkit-scrollbar { display: block; height: var(--space-2); }
  .gallery::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-full); }
}
.rail { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); }
.rail::-webkit-scrollbar { display: none; }
.rail > .card { flex: 0 0 78%; scroll-snap-align: start; }
@media (min-width: 900px) {
  .rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-5); overflow: visible; margin-inline: 0; padding-inline: 0; }
}

.tabs { display: flex; gap: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.tabs a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); padding: 0 var(--space-1); border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--color-fg-muted); font-weight: var(--fw-medium); margin-bottom: -1px; }
.tabs a:hover { color: var(--color-fg); }
.tabs a[aria-current="page"] { color: var(--color-fg); font-weight: var(--fw-semibold); border-bottom-color: var(--color-primary-strong); }
.tabs i { font-style: normal; font-weight: var(--fw-regular); }

/* ══════════ 회원·리뷰·레벨·배지·가이드북 (web-designer 시안 2026-10-14) ══════════ */
@media (max-width: 899px) { .site-nav a { padding: 0 var(--space-2); } }

/* 버튼 변형 */
.btn--sm { padding: 0 var(--space-3); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--color-fg-muted); }
.btn--ghost:hover { background: var(--color-surface-2); color: var(--color-fg); }
.btn--ghost[aria-pressed="true"], .btn--ghost.is-done { background: var(--color-primary-soft); color: var(--color-primary-soft-fg); }
.btn.is-done { cursor: default; }
.btn--danger { background: transparent; color: var(--color-danger-soft-fg); border-color: var(--color-danger); }
.btn--danger:hover { background: var(--color-danger-soft); }
details > summary.btn { list-style: none; }
details > summary.btn::-webkit-details-marker { display: none; }

/* 공지 줄 (안내 문구) */
.notice { display: flex; gap: var(--space-2); margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary-strong); border-radius: var(--radius-md); font-size: var(--fs-sm); line-height: var(--line-base); color: var(--color-fg); }
.notice__icon { color: var(--color-primary-soft-fg); flex: 0 0 auto; }
.notice--side { margin: var(--space-4) 0 0; padding: var(--space-4) 0 0; background: transparent; border: 0; border-top: 1px solid var(--color-border); border-radius: 0; font-size: var(--fs-xs); }

/* flash */
.flash { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--fs-sm); }
.flash.is-ok { background: var(--color-success-soft); color: var(--color-success-soft-fg); }
.flash.is-err { background: var(--color-danger-soft); color: var(--color-danger-soft-fg); }
.flash ul { margin: 0; padding-left: var(--space-5); flex-basis: 100%; }
.flash a { text-decoration: underline; }

/* 폼 공용 */
.field { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
.field__label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.field__input { min-height: var(--control-height); padding: 0 var(--space-3); border: 1px solid var(--color-border-input); border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-fg); font: inherit; line-height: var(--line-base); width: 100%; }
textarea.field__input { padding: var(--space-3); resize: vertical; }
.field__input:focus-visible { outline: 2px solid var(--color-primary-strong); outline-offset: 0; box-shadow: var(--shadow-focus); }
.field__input[aria-invalid="true"] { border-color: var(--color-danger); }
.field__hint { margin: 0; font-size: var(--fs-xs); color: var(--color-fg-muted); }
.field__hint.is-warn, .field__hint .is-near { color: var(--color-warn-soft-fg); font-weight: var(--fw-semibold); }
.field__error { margin: 0; font-size: var(--fs-sm); color: var(--color-danger-soft-fg); }
.field__pw { display: flex; gap: var(--space-2); }
.field__pw .field__input { flex: 1; }
.req { font-size: var(--fs-xs); color: var(--color-danger-soft-fg); font-weight: var(--fw-regular); }
.hp { position: absolute; left: -999px; width: 1px; height: 1px; overflow: hidden; }

/* 별 */
.stars-static { margin: 0; color: var(--color-warn); letter-spacing: 0.05em; line-height: 1; }
.stars-static .off { color: var(--color-border-input); }
.stars { border: 0; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-wrap: wrap; align-items: center; min-width: 0; }
.stars legend { font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-bottom: var(--space-1); padding: 0; }
.stars label { inline-size: var(--control-height); block-size: var(--control-height); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-2xl); color: var(--color-border-input); cursor: pointer; border-radius: var(--radius-sm); transition: color var(--duration-fast) var(--ease-out); }
.stars input:checked + label { color: var(--color-warn); }
.stars:has(#r2:checked) label:nth-of-type(-n+2), .stars:has(#r3:checked) label:nth-of-type(-n+3),
.stars:has(#r4:checked) label:nth-of-type(-n+4), .stars:has(#r5:checked) label:nth-of-type(-n+5) { color: var(--color-warn); }
@media (hover: hover) { .stars:hover label { color: var(--color-warn); } .stars label:hover ~ label { color: var(--color-border-input); } }
.stars input:focus-visible + label { outline: 2px solid var(--color-primary-strong); outline-offset: 2px; }
.stars__out { margin-left: var(--space-2); font-size: var(--fs-sm); color: var(--color-fg-muted); }

/* 리뷰 섹션 */
.reviews { scroll-margin-top: calc(var(--header-height) + var(--space-4)); }
.rating { display: grid; grid-template-columns: auto 1fr; gap: var(--space-6); align-items: center; padding: var(--space-5); margin-bottom: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.rating__score { text-align: center; }
.rating__avg { margin: 0; font-size: var(--fs-4xl); font-weight: var(--fw-bold); line-height: var(--line-tight); font-variant-numeric: tabular-nums; }
.rating__count { margin: var(--space-1) 0 0; font-size: var(--fs-sm); }
.rating__dist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.rating__dist li { display: grid; grid-template-columns: 2.5em 1fr 2em; gap: var(--space-2); align-items: center; font-size: var(--fs-sm); }
.rating__bar { height: var(--space-2); border-radius: var(--radius-full); background: var(--color-border-strong); overflow: hidden; }
.rating__bar i { display: block; height: 100%; background: var(--color-primary-strong); border-radius: inherit; }
.rating__n { text-align: right; color: var(--color-fg); font-variant-numeric: tabular-nums; }
.review-form, .review.is-mine, .review-cta { margin-bottom: var(--space-6); }
.review-form { padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.review-cta { display: grid; gap: var(--space-4); align-items: center; padding: var(--space-5); background: var(--color-surface); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); }
.review-cta__title { margin: 0 0 var(--space-1); font-weight: var(--fw-semibold); }
.review-cta p { margin: 0; }
.review-cta__actions { display: grid; gap: var(--space-2); }
@media (min-width: 900px) { .review-cta { grid-template-columns: auto 1fr auto; } .review-cta__actions { grid-auto-flow: column; } }
.review-list { list-style: none; margin: 0; padding: 0; }
.review { padding-block: var(--space-5); border-top: 1px solid var(--color-border); }
.review.is-mine { padding: var(--space-5); background: var(--color-primary-soft); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.review__mine-label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-primary-soft-fg); }
.review__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--fs-sm); }
.review__who { display: inline-flex; align-items: center; min-height: var(--control-height); font-weight: var(--fw-semibold); color: var(--color-fg); }
.review__who:hover { text-decoration: underline; }
.review__date { margin-left: auto; font-size: var(--fs-xs); color: var(--color-fg-muted); }
@media (max-width: 479px) { .review__head .lv__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.review__meta { margin: var(--space-1) 0 0; font-size: var(--fs-xs); color: var(--color-fg-muted); }
.stats__of { font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--color-fg-muted); }
.king__label { font-size: var(--fs-sm); color: var(--color-fg-muted); }
.review__place { font-weight: var(--fw-semibold); }
.review__place:hover { text-decoration: underline; }
.review__body { margin: var(--space-1) 0 0; max-width: var(--container-md); white-space: pre-line; overflow-wrap: anywhere; }
.review__foot { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-2); }
.review__foot form { margin: 0; }
.review__foot .muted { display: inline-flex; align-items: center; min-height: var(--control-height); font-size: var(--fs-sm); padding: 0 var(--space-3); }
.review__panel { margin-top: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--fs-sm); }
.review__panel p { margin: 0 0 var(--space-2); }
.review__panel label { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); }
.review__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.review__actions details[open] { flex-basis: 100%; }
.card__rating { color: var(--color-fg); font-weight: var(--fw-semibold); white-space: nowrap; }
.card__rating > span:first-child { color: var(--color-warn); }

/* 축하 배너 */
.celebrate { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; margin-bottom: var(--space-5); padding: var(--space-5); padding-right: calc(var(--control-height) + var(--space-4)); border-radius: var(--radius-lg); background: var(--gradient-hero-strong); color: var(--color-on-dark); box-shadow: var(--shadow-md); }
.celebrate :focus-visible { outline-color: var(--color-on-dark); }
.celebrate__title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.celebrate__msg { margin: var(--space-1) 0; }
.celebrate .link { color: var(--color-on-dark); text-decoration: underline; min-height: auto; }
.celebrate__close { position: absolute; top: var(--space-2); right: var(--space-2); width: var(--control-height); height: var(--control-height); border: 0; border-radius: var(--radius-full); background: var(--color-on-dark-soft); color: var(--color-on-dark); font-size: var(--fs-md); cursor: pointer; }
.celebrate .medal { animation: medal-in var(--duration-slow) var(--ease-out) both; }
@keyframes medal-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

/* 레벨 칩 — 칭호 단계(tier 1~12)가 오를수록 진해진다 */
.lv { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1; white-space: nowrap; color: var(--color-fg); border: 1px solid transparent; }
.lv--md { font-size: var(--fs-sm); min-height: 28px; }
.lv__title { font-weight: var(--fw-medium); }
.lv[data-tier="0"], .lv[data-tier="1"] { background: transparent; border-color: var(--color-border-input); }
.lv[data-tier="2"] { background: var(--color-surface-2); }
.lv[data-tier="3"], .lv[data-tier="4"] { background: var(--color-primary-soft); color: var(--color-primary-soft-fg); }
.lv[data-tier="5"], .lv[data-tier="6"] { background: var(--color-success-soft); color: var(--color-success-soft-fg); }
.lv[data-tier="7"], .lv[data-tier="8"] { background: var(--color-warn-soft); color: var(--color-warn-soft-fg); }
.lv[data-tier="4"], .lv[data-tier="6"], .lv[data-tier="8"] { box-shadow: inset 0 0 0 1px currentColor; }
.lv[data-tier="9"], .lv[data-tier="10"] { background: var(--color-primary-strong); color: var(--color-primary-fg); }
.lv[data-tier="10"] { box-shadow: inset 0 0 0 2px var(--color-primary-soft); }
.lv[data-tier="11"], .lv[data-tier="12"] { background: var(--gradient-hero-strong); color: var(--color-on-dark); }
.lv[data-tier="12"] { box-shadow: 0 0 0 2px var(--color-warn); }

/* 메달(인증 배지) */
.medal { display: inline-grid; place-items: center; flex: 0 0 auto; inline-size: var(--medal-lg); block-size: var(--medal-lg); border-radius: var(--radius-full); background: var(--medal-gold-soft); box-shadow: inset 0 0 0 3px var(--medal-gold); font-size: var(--fs-2xl); line-height: 1; }
.medal.is-silver { background: var(--medal-silver-soft); box-shadow: inset 0 0 0 3px var(--medal-silver); }
.medal.is-bronze { background: var(--medal-bronze-soft); box-shadow: inset 0 0 0 3px var(--medal-bronze); }
.medal--md { inline-size: var(--medal-md); block-size: var(--medal-md); font-size: var(--fs-lg); box-shadow: inset 0 0 0 2px var(--medal-gold); }
.medal--md.is-silver { box-shadow: inset 0 0 0 2px var(--medal-silver); } .medal--md.is-bronze { box-shadow: inset 0 0 0 2px var(--medal-bronze); }
.medal--xs { inline-size: var(--medal-sm); block-size: var(--medal-sm); font-size: var(--fs-xs); box-shadow: inset 0 0 0 2px var(--medal-gold); }
.medal--xs.is-silver { box-shadow: inset 0 0 0 2px var(--medal-silver); } .medal--xs.is-bronze { box-shadow: inset 0 0 0 2px var(--medal-bronze); }
.medal.is-locked { background: var(--color-surface); box-shadow: none; outline: 2px dashed var(--color-border-input); outline-offset: -2px; }
.medal.is-locked > span { filter: grayscale(1); opacity: .4; }

/* 헤더 계정 칩 */
.account { order: 2; margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); padding: 0 var(--space-3) 0 var(--space-1); border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; }
.account.is-guest { padding: 0 var(--space-4); }
.account:hover { background: var(--color-surface-2); }
.account__name { max-inline-size: 8em; overflow: hidden; text-overflow: ellipsis; }
.account ~ .theme-toggle { margin-left: 0; }
@media (max-width: 479px) { .account__name { display: none; } .account { padding: 0 var(--space-1); } .account.is-guest { padding: 0 var(--space-3); } }
@media (min-width: 900px) { .account { order: 0; margin-left: 0; } }

/* 가입·로그인 카드 */
.auth { max-inline-size: var(--container-sm); margin: var(--space-10) auto; padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); }
.auth h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); margin-bottom: var(--space-2); }
.auth__lead { margin: 0 0 var(--space-4); color: var(--color-fg-muted); }
.auth__medals { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); }
.auth .btn--primary { width: 100%; }
.auth__alt { margin: var(--space-4) 0 0; text-align: center; font-size: var(--fs-sm); }
.auth__alt a { color: var(--color-primary-soft-fg); text-decoration: underline; }
.check { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); font-size: var(--fs-sm); margin-bottom: var(--space-4); }
.check input { width: 20px; height: 20px; }

/* /me · /u 프로필 */
.profile { display: grid; gap: var(--space-5); margin-block: var(--space-6) var(--space-10); }
@media (min-width: 900px) { .profile { grid-template-columns: 7fr 5fr; } .profile > .span-all { grid-column: 1 / -1; } }
.lvcard { padding: var(--space-8); border-radius: var(--radius-xl); background: var(--gradient-hero-strong); color: var(--color-on-dark); box-shadow: var(--shadow-lg); }
.lvcard :focus-visible { outline-color: var(--color-on-dark); }
.lvcard__name { margin: 0 0 var(--space-2); font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.lvcard__level { margin: 0; display: flex; align-items: baseline; gap: var(--space-1); font-variant-numeric: tabular-nums; }
.lvcard__level small { font-size: var(--fs-lg); }
.lvcard__level strong { font-size: var(--fs-4xl); font-weight: var(--fw-bold); line-height: 1; }
.lvcard .lv { margin: var(--space-2) 0 var(--space-5); border-color: var(--color-on-dark-border); }
.lvcard .lv[data-tier="0"], .lvcard .lv[data-tier="1"] { color: var(--color-on-dark); background: var(--color-on-dark-soft); }
.xp { height: var(--space-2); border-radius: var(--radius-full); background: var(--color-on-dark-soft-2); overflow: hidden; }
.xp__fill { display: block; height: 100%; background: var(--color-on-dark); border-radius: inherit; transform-origin: left; animation: xp-in var(--duration-slow) var(--ease-out) both; }
@keyframes xp-in { from { transform: scaleX(0); } to { transform: none; } }
.xp__text { margin: var(--space-2) 0 0; font-size: var(--fs-sm); }
.lvcard details { margin-top: var(--space-4); font-size: var(--fs-sm); }
.lvcard summary { cursor: pointer; min-height: var(--control-height); display: flex; align-items: center; text-decoration: underline; }
.lvcard ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: 0; align-content: start; }
.stats div { display: flex; flex-direction: column-reverse; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.stats dd { margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.stats dt { font-size: var(--fs-xs); color: var(--color-fg-muted); }
.panel { padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.panel h2 { font-size: var(--fs-xl); font-weight: var(--fw-bold); margin-bottom: var(--space-4); }
.panel h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin: var(--space-5) 0 var(--space-3); }
.medal-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: var(--space-4) var(--space-3); }
.medal-more { margin-top: var(--space-3); }
.medal-more > .medal-grid { margin-top: var(--space-3); }
.medal-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); text-align: center; }
.medal-card__name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.medal-card__sub { font-size: var(--fs-xs); color: var(--color-fg-muted); }
.medal-card__bar { width: 64px; height: var(--space-1); border-radius: var(--radius-full); background: var(--color-surface-2); overflow: hidden; }
.medal-card__bar i { display: block; height: 100%; background: var(--color-primary-strong); }

/* 랭킹 표 */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.rank { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.rank th, .rank td { height: var(--control-height); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; white-space: nowrap; }
.rank thead th { font-size: var(--fs-xs); color: var(--color-fg-muted); font-weight: var(--fw-semibold); }
.rank td.num { text-align: right; font-variant-numeric: tabular-nums; }
.rank td.pos { width: 3.5em; color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }
.rank tbody th { font-weight: var(--fw-semibold); }
.rank tbody th a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); }
.rank tbody th a:hover { text-decoration: underline; }
.rank tr.is-me { background: var(--color-primary-soft); }
.rank__me { font-size: var(--fs-xs); color: var(--color-primary-soft-fg); }
.king { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); margin-bottom: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.king p { margin: 0; }

/* 가이드북 */
.get-guide { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.get-guide__h { margin: 0 0 var(--space-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-fg-muted); }
.get-guide__btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.get-guide__btns .btn { font-size: var(--fs-sm); padding: 0 var(--space-3); }
.res-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 900px) { .res-list { grid-template-columns: 1fr 1fr; } }
.res { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: border-color var(--duration-fast) var(--ease-out); }
.res:hover { border-color: var(--color-border-strong); }
.res__title { font-weight: var(--fw-semibold); color: var(--color-fg); }
.res__title::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.res__title:hover { color: var(--color-primary-soft-fg); }
.res__title:focus-visible { outline: none; }
.res__title:focus-visible::after { outline: 2px solid var(--color-primary-strong); outline-offset: -2px; }
.res__meta { margin: var(--space-1) 0 0; font-size: var(--fs-xs); color: var(--color-fg-muted); }
.fmt { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: var(--fw-semibold); white-space: nowrap; }
.fmt--pdf { background: var(--color-primary-soft); color: var(--color-primary-soft-fg); }
.fmt--ebook { background: var(--color-accent-soft); color: var(--color-accent-soft-fg); }
.fmt--map { background: var(--color-success-soft); color: var(--color-success-soft-fg); }
.guide-make { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); padding: var(--space-5); background: var(--color-primary-soft); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.guide-make h2 { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-fg); }
.guide-make p { margin: var(--space-1) 0 0; }
@media (min-width: 900px) { .guide-make { grid-template-columns: 1fr auto; align-items: center; } }

/* ── 소개·푸터 ── */
.prose { max-width: var(--container-md); margin-block: var(--space-8); line-height: var(--line-loose); }
.prose h1 { font-size: var(--fs-2xl); margin-bottom: var(--space-4); }
.prose h2 { font-size: var(--fs-lg); margin: var(--space-6) 0 var(--space-2); }
.prose a { color: var(--color-primary-soft-fg); text-decoration: underline; }
.site-footer { margin-top: var(--space-16); padding-block: var(--space-8); border-top: 1px solid var(--color-border); font-size: var(--fs-xs); color: var(--color-fg-muted); }
.site-footer a { text-decoration: underline; }
.site-footer p { margin: 0 0 var(--space-2); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ── 가이드북·관광지도: 발행처 파일 목록 · 언어 선택 · 뷰어 (2026-10-14, web-designer 조건부 승인 반영) ── */
.langs-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-4); }
.langs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
/* 파일 버튼이 있는 카드는 전면 링크를 끈다 (빈 곳을 눌러 새 창이 뜨는 함정 방지). compact 카드만 카드 전체가 링크 */
.res:has(.files) .res__title::after { content: none; }
.res:has(.files):hover { border-color: var(--color-border); }
.res:has(.files) a.res__title { color: var(--color-primary-soft-fg); }
.res__meta a { position: relative; z-index: 1; color: var(--color-primary-soft-fg); text-decoration: underline; }
.res-list:has(.files) { grid-template-columns: 1fr; }             /* 파일 목록 카드는 1열 — 옆 카드가 늘어나 빈 상자가 생기지 않게 */
@media (max-width: 599px) { .res:has(.files) { grid-template-columns: 1fr; } }  /* 배지를 제목 위로, 파일 목록 들여쓰기 없이 */
.files { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 0; }
.files .files { margin-top: 0; }
.files__note { margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); background: var(--color-warn-soft); color: var(--color-warn-soft-fg); border-radius: var(--radius-md); font-size: var(--fs-xs); line-height: var(--line-base); }
.file { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3); align-items: center; padding: var(--space-2) 0; border-top: 1px solid var(--color-border); font-size: var(--fs-sm); }
.file > .fmt { background: var(--color-surface-2); color: var(--color-fg-muted); }   /* 파일 형식은 중립색 — 색은 카드의 종류 배지에만 */
.file__title { color: var(--color-fg); line-height: var(--line-base); }
.files__lang { display: inline-block; margin-left: var(--space-1); padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--color-surface-2); color: var(--color-fg-muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.file__btns { grid-column: 1 / -1; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.file__btns .btn.is-recommended { background: var(--color-primary-soft); color: var(--color-primary-soft-fg); border-color: transparent; }
@media (min-width: 600px) {
  .file { grid-template-columns: auto 1fr auto; }
  .file__btns { grid-column: auto; }
}
@media (min-width: 600px) and (pointer: fine) { .file__btns .btn { min-height: var(--control-height-sm); } }   /* 마우스 환경에서만 촘촘하게, 터치는 44px 유지 */
.files__more > summary { cursor: pointer; list-style: none; min-height: var(--control-height); display: flex; align-items: center; gap: var(--space-2); color: var(--color-primary-soft-fg); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.files__more > summary::-webkit-details-marker { display: none; }
.files__more > summary::before { content: "▸" / ""; transition: transform var(--duration-fast) var(--ease-out); }
.files__more[open] > summary::before { transform: rotate(90deg); }
.files__group-h { margin: var(--space-3) 0 var(--space-1); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-fg-muted); }
.viewer__head { margin-bottom: var(--space-4); }
.viewer__head h1 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-xl); font-weight: var(--fw-bold); margin: 0 0 var(--space-3); }
.viewer__head .notice { margin-bottom: var(--space-3); }
.viewer__alts { margin: 0 0 var(--space-3); font-size: var(--fs-sm); color: var(--color-fg-muted); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.viewer__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.btn__meta { font-weight: var(--fw-regular); }                      /* 버튼 안 보조 글자(크기) — 버튼 글자색을 물려받는다 */
.viewer__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); margin: var(--space-2) 0 0; }
.viewer__stage { display: grid; gap: var(--space-3); justify-items: center; padding: var(--space-4) 0; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); min-height: 40vh; }
.viewer__stage canvas { max-width: 100%; height: auto; background: var(--color-on-dark); box-shadow: var(--shadow-md); border-radius: var(--radius-sm); }
.viewer__stage--img img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.viewer__text { margin-top: var(--space-4); padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); font-size: var(--fs-base); line-height: var(--line-loose); }
.viewer__text h2 { margin: var(--space-5) 0 var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-fg-muted); }
.viewer__text h2:first-child { margin-top: 0; }
.viewer__text p { margin: 0 0 var(--space-3); white-space: pre-wrap; }
.viewer__foot { margin-top: var(--space-4); font-size: var(--fs-xs); }

/* ── 다국어 (web-designer 시안 2026-10-14) ── */
/* 글꼴: 언어마다 맞는 스택, 외국어 화면 속 한국어 조각(lang="ko")은 한국어 스택으로 */
:where(:lang(en), :lang(vi), :lang(id), :lang(ms), :lang(mn), :lang(ru), :lang(fr), :lang(de), :lang(es)) { font-family: var(--font-sans-intl); }
:where(:lang(th)) { font-family: var(--font-sans-th); }
:where(:lang(ja)) { font-family: var(--font-sans-ja); }
:where(:lang(zh-Hans)) { font-family: var(--font-sans-zh-hans); }
:where(:lang(zh-Hant)) { font-family: var(--font-sans-zh-hant); }
:where(:lang(ko)) { font-family: var(--font-sans); }
/* 띄어쓰기 없는 중·일은 keep-all 이면 넘친다 */
:where(:lang(ja), :lang(zh), :lang(th)) { word-break: normal; line-break: strict; }
/* 태국어: 위아래로 쌓이는 기호 — 본문 줄간격 넉넉히, 제목 1.3 이면 윗기호가 잘린다 */
:where(:lang(th)) body { line-height: var(--line-loose); }
:where(:lang(th), :lang(vi)) :is(h1, h2, h3, .card__title) { line-height: var(--line-base); }
:where(:lang(th), :lang(ja), :lang(zh)) :is(h1, h2, h3) { letter-spacing: var(--letter-normal); }
/* 카드 제목: 알파벳·키릴·태국 문자는 3줄 */
html:not(:lang(ko)):not(:lang(ja)):not(:lang(zh)) .card__title { -webkit-line-clamp: 3; }
.card__title { overflow-wrap: anywhere; }
:where(:lang(de), :lang(fr), :lang(ru), :lang(es)) :is(.card__title, .watch__desc) { hyphens: auto; }
.brand { min-width: 0; }
.brand__name { overflow: hidden; text-overflow: ellipsis; }

/* 언어 선택기 (details) */
.lang { order: 2; position: relative; }   /* 목록을 버튼에 붙인다 — 헤더가 몇 줄이든 버튼 바로 아래 */
.lang__btn {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-height); padding: 0 var(--space-3);
  border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-fg);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; list-style: none; white-space: nowrap;
}
.lang__btn::-webkit-details-marker { display: none; }
.lang__btn:hover { background: var(--color-surface-2); }
.lang__caret { font-size: var(--fs-xs); color: var(--color-fg-muted); transition: transform var(--duration-fast) var(--ease-out); }
.lang[open] .lang__caret { transform: rotate(180deg); }
.lang__menu {
  position: absolute; z-index: var(--z-dropdown); margin: 0; padding: var(--space-2); list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1);
  inset-inline: auto 0; top: calc(100% + var(--space-1)); width: min(22rem, calc(100vw - 2 * var(--space-4)));
  background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.lang__menu a { display: flex; align-items: center; min-height: var(--control-height); padding: 0 var(--space-3); border-radius: var(--radius-md); font-size: var(--fs-sm); color: var(--color-fg); }
.lang__menu a:hover { background: var(--color-surface-2); }
.lang__menu a:focus-visible { outline-offset: -2px; }
.lang__menu a[aria-current="true"] { background: var(--color-primary-soft); color: var(--color-primary-soft-fg); font-weight: var(--fw-semibold); }
.lang__menu a[aria-current="true"]::after { content: "✓"; margin-inline-start: auto; padding-inline-start: var(--space-2); }
@media (min-width: 900px) { .lang { order: 0; } .site-nav { flex: 0 0 auto; } }   /* 메뉴는 줄지 않고 검색칸이 줄어든다 */
@media (max-width: 479px) { .lang__code, .lang__caret { display: none; } .lang__btn { width: var(--control-height); justify-content: center; padding: 0; } }
/* 한·중·일이 아닌 언어는 900–1199px 에서 헤더 두 줄 (메뉴 글자가 길다) */
@media (min-width: 900px) and (max-width: 1199px) {
  html:not(:lang(ko)):not(:lang(ja)):not(:lang(zh)) .site-header__inner { flex-wrap: wrap; }
  html:not(:lang(ko)):not(:lang(ja)):not(:lang(zh)) .site-nav { order: 4; flex: 1 1 100%; }
}
.footer-langs { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-2); }
.footer-langs a[aria-current="true"] { font-weight: var(--fw-semibold); color: var(--color-fg); }
@media (pointer: coarse) { .footer-langs a { display: inline-flex; align-items: center; min-height: var(--control-height); } }

/* 한국어 원래 이름·주소 (현지인에게 보여 주기) */
.orig-name { margin: var(--space-1) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.orig-name__label { font-size: var(--fs-xs); color: var(--color-fg-muted); }
.orig-name__text { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--color-fg); }   /* 현지인에게 보여 주는 글 — 흐리게 두지 않는다 */
.orig-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.orig-addr { font-size: var(--fs-sm); color: var(--color-fg); }
.copy-btn.is-done { background: var(--color-success-soft); color: var(--color-success-soft-fg); }
/* 기계번역 고지 */
.mt-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; font-size: var(--fs-xs); color: var(--color-fg-muted); }
.mt-note svg { flex: none; }
.mt-note .link { font-size: var(--fs-xs); }
/* 번역 대기 */
.badge--pending { background: var(--color-surface-2); color: var(--color-fg); border: 1px solid var(--color-border); }   /* fg-muted 는 라이트 4.4:1 이라 미달 */

/* 네이버 이미지 검색 결과 — 공식 갤러리와 분리, 이 장소라는 보장 없음 (web-designer 7차 재검토) */
.naver-photos { margin: var(--space-4) 0; }
.naver-photos__h { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.naver-photos__note { margin: var(--space-1) 0 0; font-size: var(--fs-xs); }
.naver-photos__list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-2); }
.naver-photos__list img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); background: var(--color-surface-2); }
.naver-photos__src { margin: var(--space-1) 0 0; font-size: var(--fs-xs); color: var(--color-fg-muted); }