/* travel.sw4u.kr — 구석구석 영상여행 (색·폰트·간격은 tokens.css 변수만 사용) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
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-family: var(--font-sans);
  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: static; z-index: var(--z-sticky);
  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; } }