/* ============================================================
   地点页（/ko/place/seoul-Q8684、/ko/places）
   —— Pages Functions 拼出来的纯 HTML 页，没有脚本，也不经过 Vite，所以样式单独一份。
      变量抄自 src/styles/tokens.css：近黑底、胶片金、发丝线，和地球那边是同一个站
   —— 这一页是从搜索点进来的人看到的第一眼：海报墙要像片单，不像目录站
   ============================================================ */

:root {
  color-scheme: dark;
  --void: #050609;
  --ink-800: #0d0f14;
  --ink-700: #13161c;
  --ink-600: #1a1e26;
  --line: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.11);
  --line-warm: rgba(217, 182, 120, 0.22);
  --gold: #d9b678;
  --gold-lit: #f2ddb4;
  --text: #efece6;
  --text-dim: #9b968b;
  --text-faint: #5c5952;
  --text-ghost: #383632;
  --gut: clamp(20px, 3.2vw, 44px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sans: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --num: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --num-figures: lining-nums tabular-nums;
}
/* 方块字整页走无衬线（和主站一样：系统自带的宋体、明朝体在这种尺寸下又细又旧） */
:lang(zh-CN) {
  --sans: 'Inter', 'Noto Sans SC', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --serif: 'Inter', 'Noto Sans SC', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
:lang(zh-TW) {
  --sans: 'Inter', 'Noto Sans TC', -apple-system, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --serif: 'Inter', 'Noto Sans TC', -apple-system, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
}
:lang(ja) {
  --sans: 'Inter', 'Noto Sans JP', -apple-system, 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
  --serif: 'Inter', 'Noto Sans JP', -apple-system, 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
}
:lang(ko) {
  --sans: 'Inter', 'Pretendard Variable', 'Pretendard', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --serif: 'Pretendard Variable', 'Pretendard', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--void);
}
body {
  margin: 0;
  min-height: 100vh;
  /* 顶上一抹很淡的金光：像放映厅里银幕漏到观众席的那点光 */
  background:
    radial-gradient(1100px 520px at 50% -240px, rgba(217, 182, 120, 0.08), transparent 70%),
    var(--void);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── 顶栏：和地球那边同一个标志、同一个位置 ─────────────── */
.sp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1320px;
  height: 62px;
  margin: 0 auto;
  padding: 0 var(--gut);
}
.sp-brand {
  display: block;
}
.sp-logo {
  display: block;
  height: 44px;
  aspect-ratio: 874 / 334;
  background: var(--text);
  -webkit-mask: url('/logo.png') center / contain no-repeat;
  mask: url('/logo.png') center / contain no-repeat;
  transform: translateY(2px);
  transition: background 200ms linear;
}
.sp-brand:hover .sp-logo {
  background: var(--gold-lit);
}
.sp-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sp-navlink,
.sp-lang summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  font-size: 12.5px;
  color: var(--text-dim);
  transition:
    color 180ms linear,
    background 180ms linear;
}
.sp-navlink:hover,
.sp-lang summary:hover,
.sp-lang[open] summary {
  color: var(--gold-lit);
  background: rgba(255, 255, 255, 0.05);
}
.sp-lang {
  position: relative;
}
.sp-lang summary {
  list-style: none;
  cursor: pointer;
}
.sp-lang summary::-webkit-details-marker {
  display: none;
}
.sp-lang summary svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.1;
}
.sp-lang ul {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10;
  min-width: 172px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border-radius: 5px;
  background: linear-gradient(168deg, rgba(19, 22, 28, 0.985), rgba(8, 9, 13, 0.99));
  box-shadow:
    0 0 0 1px var(--line-strong),
    0 30px 70px -30px rgba(0, 0, 0, 0.92);
}
.sp-lang li a {
  display: block;
  padding: 7px 12px;
  border-radius: 3px;
  font-size: 13px;
  color: var(--text-dim);
}
.sp-lang li a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}
.sp-lang li a[aria-current] {
  color: var(--gold-lit);
}

/* ── 标题区 ─────────────────────────────────────────────── */
.sp-main {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 92px) var(--gut) 96px;
}
.sp-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-height: 16px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.sp-crumbs a {
  color: var(--text-dim);
  transition: color 180ms linear;
}
.sp-crumbs a:hover {
  color: var(--gold-lit);
}
.sp-crumbs i {
  width: 16px;
  height: 1px;
  background: var(--line-strong);
}
.sp-title {
  margin: 20px 0 0;
  font-family: var(--serif);
  font-size: clamp(46px, 7.6vw, 96px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--text);
  overflow-wrap: anywhere;
}
:lang(zh-CN) .sp-title,
:lang(zh-TW) .sp-title,
:lang(ja) .sp-title,
:lang(ko) .sp-title {
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.12;
}
.sp-index .sp-title {
  font-size: clamp(38px, 5.6vw, 68px);
}
.sp-lead {
  max-width: 40em;
  margin: 20px 0 0;
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-dim);
}
.sp-also {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--text-faint);
}
.sp-also b {
  font-family: var(--num);
  font-variant-numeric: var(--num-figures);
  font-weight: 400;
  color: var(--text-dim);
}

/* 回到地球：全页唯一的主按钮。金色细边的药丸，和地球那边的「故事年代」同一个语汇 */
.sp-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  margin-top: 32px;
  padding: 0 20px 0 24px;
  border-radius: 23px;
  box-shadow: inset 0 0 0 1px var(--line-warm);
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--gold-lit);
  transition:
    background 220ms linear,
    box-shadow 220ms linear;
}
.sp-cta:hover {
  background: rgba(217, 182, 120, 0.1);
  box-shadow: inset 0 0 0 1px rgba(217, 182, 120, 0.5);
}
.sp-cta svg,
.sp-more svg {
  width: 16px;
  height: 16px;
  transition: transform 320ms var(--ease-out);
}
.sp-cta:hover svg,
.sp-more:hover svg {
  transform: translateX(3px);
}

/* ── 海报墙 ─────────────────────────────────────────────── */
.sp-sec {
  margin-top: clamp(60px, 8vw, 104px);
}
.sp-h2 {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 28px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.sp-h2::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.sp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  gap: 36px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-card {
  display: flex;
  flex-direction: column;
}
.sp-poster {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 5px;
  background: var(--ink-700);
  box-shadow:
    0 0 0 1px var(--line),
    0 18px 40px -26px rgba(0, 0, 0, 0.9);
  transition:
    transform 420ms var(--ease-out),
    box-shadow 420ms var(--ease-out);
}
.sp-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sp-card:hover .sp-poster,
.sp-card:focus-visible .sp-poster {
  transform: translateY(-5px);
  box-shadow:
    0 0 0 1px rgba(217, 182, 120, 0.55),
    0 30px 56px -26px rgba(0, 0, 0, 0.95);
}
.sp-card:focus-visible {
  outline: none;
}
/* 没有海报：写片名的素净深色卡，不做假海报 */
.sp-noposter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 16px 14px;
  background: linear-gradient(160deg, var(--ink-600), var(--ink-800));
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.2;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}
.sp-name {
  display: -webkit-box;
  margin-top: 12px;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.38;
  color: var(--text);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: color 180ms linear;
}
.sp-card:hover .sp-name {
  color: var(--gold-lit);
}
.sp-sub {
  margin-top: 4px;
  font-family: var(--num);
  font-variant-numeric: var(--num-figures);
  font-size: 11.5px;
  color: var(--text-faint);
}
.sp-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 44px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-strong);
  font-size: 13.5px;
  color: var(--text-dim);
  transition:
    color 180ms linear,
    border-color 180ms linear;
}
.sp-more:hover {
  color: var(--gold-lit);
  border-color: var(--line-warm);
}

/* ── 地名胶囊：下属城市、附近、总表 ─────────────────────── */
.sp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 13px;
  color: var(--text-dim);
  transition:
    color 180ms linear,
    background 180ms linear,
    box-shadow 180ms linear;
}
.sp-chip b {
  font-family: var(--num);
  font-variant-numeric: var(--num-figures);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-faint);
  transition: color 180ms linear;
}
.sp-chip:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px var(--line-warm);
}
.sp-chip:hover b {
  color: var(--gold);
}

/* ── 地点总表：一个国家一栏 ─────────────────────────────── */
.sp-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 56px 48px;
  margin-top: clamp(56px, 7vw, 88px);
}
.sp-group h2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
}
.sp-group h2 a {
  transition: color 180ms linear;
}
.sp-group h2 a:hover {
  color: var(--gold-lit);
}
.sp-group h2 b {
  font-family: var(--num);
  font-variant-numeric: var(--num-figures);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-faint);
}
.sp-group .sp-chips {
  gap: 8px;
}
.sp-group .sp-chip {
  height: 30px;
  padding: 0 13px;
  border-radius: 15px;
  font-size: 12.5px;
}

.sp-404 {
  min-height: 60vh;
}

/* ── 页脚：TMDB 条款要求的 logo 和原文声明 ─────────────── */
.sp-foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 36px var(--gut) 52px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--text-faint);
}
.sp-tmdb img {
  display: block;
  height: 11px;
  width: auto;
  opacity: 0.45;
  transition: opacity 200ms linear;
}
.sp-tmdb:hover img {
  opacity: 0.9;
}
.sp-legal,
.sp-fine {
  margin: 0;
}
.sp-fine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.sp-fine a {
  color: var(--text-dim);
  transition: color 180ms linear;
}
.sp-fine a:hover {
  color: var(--gold-lit);
}
.sp-fine i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-ghost);
}

@media (max-width: 560px) {
  .sp-top {
    height: 54px;
    padding: 0 16px;
  }
  .sp-logo {
    height: 38px;
  }
  .sp-navlink {
    display: none;
  }
  .sp-main {
    padding: 32px 16px 72px;
  }
  .sp-grid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 26px 12px;
  }
  .sp-name {
    font-size: 12.5px;
  }
  .sp-groups {
    grid-template-columns: 1fr;
  }
  .sp-foot {
    padding: 28px 16px 40px;
  }
}