/* Welcome Busan — design system */

/* Gmarket Sans ships every one of the 11,172 Hangul syllables in a single file
   (517KB medium, 596KB bold). unicode-range only decides WHETHER to fetch a
   file, never which slice of it, so any page that names the family pays the
   whole 1.1MB even to set one Latin word. Only Korean pages get enough out of
   those glyphs to be worth it — see the html[lang="ko"] rule below. Every other
   locale, English included, resolves to a system stack and downloads nothing.
   Kana is left out of the range too: with it in, a Japanese sentence would
   render kana in Gmarket and kanji in the fallback face. */
@font-face {
  font-family: "Gmarket Sans";
  src: url("/fonts/GmarketSansMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20A9, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF, U+FF00-FFEF;
}
@font-face {
  font-family: "Gmarket Sans";
  src: url("/fonts/GmarketSansBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20A9, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF, U+FF00-FFEF;
}

:root {
  /* Default is deliberately web-font-free, so a locale added later downloads
     nothing until someone opts it in. Latin-first: the CJK faces belong only on
     the locales that need them, otherwise English Latin text can land on a
     Chinese face. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: var(--font-sans);

  --ink: #10202b;
  --ink-soft: #45606c;
  --paper: #fbfaf6;
  --paper-raised: #ffffff;
  --line: #e2ded2;
  --sea: #0f4c5c;
  --sea-deep: #0a3540;
  --sunset: #e8703a;
  --sunset-soft: #fbe6da;
  --focus: #1b7a93;
  --radius: 14px;
  --max: 1120px;
  --header-bg: rgba(251, 250, 246, 0.92);
  font-size: 17px;
}

/* The one locale that opts in. Hangul is what the 1.1MB actually buys, and the
   system Korean faces behind it cover the swap window and any failed load. */
html[lang="ko"] {
  --font-sans: "Gmarket Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", Helvetica, Arial, sans-serif;
  --font-body: var(--font-sans);
}

/* Chinese and Japanese need CJK ideographs, which Gmarket Sans does not have. */
html[lang^="zh"], html[lang="ja"] {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", Helvetica, Arial, sans-serif;
  --font-body: var(--font-sans);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #eef2f4;
    --ink-soft: #a9bac1;
    --paper: #10161b;
    --paper-raised: #1a2229;
    --line: #2b363e;
    --sea: #4fb3c9;
    --sea-deep: #79cfe3;
    --sunset: #ff9a5c;
    --sunset-soft: #3a2a22;
    --focus: #6fd3ea;
    --header-bg: rgba(16, 22, 27, 0.85);
  }
}
:root[data-theme="dark"] {
  --ink: #eef2f4;
  --ink-soft: #a9bac1;
  --paper: #10161b;
  --paper-raised: #1a2229;
  --line: #2b363e;
  --sea: #4fb3c9;
  --sea-deep: #79cfe3;
  --sunset: #ff9a5c;
  --sunset-soft: #3a2a22;
  --focus: #6fd3ea;
  --header-bg: rgba(16, 22, 27, 0.85);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 0.5em;
}

a { color: var(--sea); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Keyboard users can jump past the header nav; visible only while focused. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 999;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--sea);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

img { max-width: 100%; display: block; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

.kicker {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sunset);
  display: block;
  margin-bottom: 10px;
}

/* Header */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--header-bg);
  backdrop-filter: saturate(140%) blur(6px);
  position: sticky;
  top: 0;
  z-index: 40;
}
.header-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 68px;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 19px;
  color: var(--ink);
  white-space: nowrap;
  text-decoration: none;
  justify-self: start;
  transition: letter-spacing .2s ease;
}
.brand:hover { text-decoration: none; letter-spacing: 0.01em; }
.brand span { color: var(--sunset); transition: color .2s ease; }
.brand:hover span { color: var(--sea); }
.brand-mark { flex-shrink: 0; transition: transform .2s ease; }
.brand:hover .brand-mark { transform: translateY(-1px); }
.brand-mark .mark-sun { fill: var(--sunset); }
.brand-mark .mark-arc, .brand-mark .mark-pylon { stroke: var(--sea); }
.brand-mark .mark-deck { stroke: var(--ink); }
.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
}
.main-nav a { color: var(--ink-soft); padding: 6px 2px; border-bottom: 2px solid transparent; }
.main-nav a:hover { color: var(--sea); text-decoration: none; border-bottom-color: var(--sea); }
.main-nav a.nav-pill {
  color: var(--sunset);
  font-weight: 700;
}
.main-nav a.nav-pill:hover { color: var(--sunset); border-bottom-color: var(--sunset); text-decoration: none; }

.header-controls { display: flex; align-items: center; gap: 10px; justify-self: end; }

/* Flags are drawn at their true 3:2 ratio; the hairline keeps white flags
   (Japan, Korea) from bleeding into a light background. */
.flag-icon {
  width: 18px; height: 12px; border-radius: 2px; flex-shrink: 0;
  display: inline-block; vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.lang-dropdown { position: relative; }
.lang-current {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 700; color: var(--ink);
  background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: 999px; padding: 0 14px; cursor: pointer;
}
.lang-menu {
  list-style: none; margin: 0; padding: 6px; position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 28px -12px rgba(0,0,0,0.25); min-width: 130px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 50;
}
/* Three ways in, in order of who they serve.
   Hover is for pointers only: on a touch screen a tap leaves a sticky :hover
   behind, so the menu could not be closed again by tapping the button.
   :focus-within is the no-JS keyboard path — it opens the menu but cannot close
   it, which is why lang-menu.js marks the dropdown [data-enhanced] and takes
   over from there, driving it off the button's own aria-expanded. */
@media (hover: hover) {
  .lang-dropdown:hover .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
}
.lang-dropdown:not([data-enhanced]):focus-within .lang-menu,
.lang-dropdown[data-enhanced] .lang-current[aria-expanded="true"] + .lang-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.lang-menu a {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft); white-space: nowrap;
}
.lang-menu a:hover { background: var(--sunset-soft); color: var(--sunset); text-decoration: none; }
.lang-menu a.active { color: var(--sea); font-weight: 800; }

.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper-raised);
  color: var(--ink-soft); cursor: pointer;
}
.theme-toggle:hover { color: var(--sea); border-color: var(--sea); }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}

/* Mobile nav toggle */
.nav-toggle {
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--paper-raised); cursor: pointer;
}
.nav-toggle span { display: block; width: 16px; height: 2px; background: var(--ink); border-radius: 1px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav { display: none; }
.mobile-nav.is-open {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper-raised); border-bottom: 1px solid var(--line);
  padding: 8px 24px 18px;
  box-shadow: 0 16px 28px -18px rgba(0,0,0,0.3);
}
.mobile-nav a {
  display: block; padding: 12px 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-sans);
  font-weight: 600; font-size: 15px; color: var(--ink);
}
.mobile-nav a:hover { color: var(--sea); text-decoration: none; }
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav a.nav-pill { color: var(--sunset); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
}

@media (max-width: 480px) {
  .header-controls { gap: 6px; }
  .lang-current { padding: 0 9px; gap: 0; }
  .lang-current span { display: none; }
  .brand { font-size: 16px; }
}

/* Hero */
.hero {
  padding: 76px 0 64px;
  border-bottom: 1px solid var(--line);
}
.hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  max-width: 16ch;
}
.hero .lede {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 18px 0 30px;
}
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14.5px;
  padding: 13px 24px;
  border-radius: 999px;
  display: inline-block;
  background: transparent;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-primary {
  background: linear-gradient(135deg, #ff8a3d 0%, #ff5f7e 55%, #a24bd6 100%);
  color: #fff;
  box-shadow: 0 10px 26px -10px rgba(230, 80, 130, 0.55);
}
.btn-primary:hover { filter: brightness(1.08); text-decoration: none; transform: translateY(-1px); }
.btn-ghost { border: 1px solid var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--sea); text-decoration: none; color: var(--sea); }

/* Hero — Gwangan Bridge night photo backdrop */
.hero--photo {
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 620px;
  display: flex;
  align-items: center;
  border-bottom: none;
}
.hero-media { position: absolute; inset: 0; z-index: 0; background: #1c2b3a; }
.hero-media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 60%; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(6,12,22,.32) 0%, rgba(6,12,22,.38) 42%, rgba(6,12,22,.82) 100%),
    linear-gradient(90deg, rgba(6,12,22,.68) 0%, rgba(6,12,22,.28) 48%, rgba(6,12,22,.08) 100%);
}
/* .hero--photo is a flex container, so this would otherwise shrink to its
   content width and sit further in than the header and the rest of the page. */
.hero-content { position: relative; z-index: 2; width: 100%; padding-top: 130px; padding-bottom: 92px; }
.hero--photo .kicker { color: #ffce8a; }
.hero--photo h1 { color: #fff; text-shadow: 0 6px 34px rgba(0,0,0,.45); }
.hero--photo .lede { color: rgba(255,255,255,.92); text-shadow: 0 2px 16px rgba(0,0,0,.4); }
.hero--photo .btn-ghost { border-color: rgba(255,255,255,.55); color: #fff; }
.hero--photo .btn-ghost:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.08); }

@media (max-width: 720px) {
  .hero--photo { min-height: 520px; }
  .hero-content { padding-top: 84px; padding-bottom: 40px; }
  .hero .lede { font-size: 1.02rem; margin: 14px 0 24px; }
  .hero .btn-row .btn { flex: 1 1 auto; text-align: center; }
}

/* Section headers */
.section { padding: 56px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.section-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); max-width: 24ch; }
.section-head .see-all { font-family: var(--font-sans); font-weight: 700; font-size: 14px; white-space: nowrap; }

/* Category grid */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}
.cat-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  display: block;
  color: var(--ink);
  transition: border-color .15s ease, transform .15s ease;
}
.cat-card:hover { border-color: var(--sea); text-decoration: none; transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(15, 76, 92, 0.45); }
.cat-card .icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffb37a 0%, #ff8a9c 100%);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  color: #fff;
}
.cat-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.cat-card p { color: var(--ink-soft); font-size: 0.92rem; margin: 0; font-family: var(--font-sans); }

/* Category switch (in-page cross-category nav) */
.category-switch {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 24px;
  font-family: var(--font-sans);
}
.category-switch a {
  font-size: 13.5px; font-weight: 700; padding: 7px 14px;
  border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft);
}
.category-switch a:hover { border-color: var(--sea); color: var(--sea); text-decoration: none; }
.category-switch a.active { background: var(--sea); border-color: var(--sea); color: #fff; }

/* Post cards */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.post-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-raised);
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.post-card:hover {
  border-color: var(--sea);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(15, 76, 92, 0.45);
}
.post-card h2, .post-card h3 { color: var(--ink); }
.post-card .thumb {
  height: 150px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sea) 0%, var(--focus) 60%, var(--sunset) 130%);
  color: #fff;
}
.post-card .thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.post-card:hover .thumb img { transform: scale(1.04); }
.post-card .thumb span {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 1;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.5);
  padding: 5px 10px;
  border-radius: 999px;
}
.post-card .body { padding: 18px 20px 22px; flex: 1; display: flex; flex-direction: column; }
.post-card h2, .post-card h3 { font-size: 1.12rem; margin-bottom: 8px; }
.post-card p.excerpt { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 14px; flex: 1; }
.post-card .meta {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-soft);
  opacity: 0.85;
}

/* Article */
.breadcrumb {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.breadcrumb a { color: var(--ink-soft); }
.back-link {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 13.5px; font-weight: 700; color: var(--ink-soft);
  margin-bottom: 18px;
}
.back-link:hover { color: var(--sea); text-decoration: none; }
.post-cover { margin: 28px 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.post-cover img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.post-cover .cover-credit { margin: 0; padding: 6px 12px; font-size: 0.75rem; color: var(--ink-soft); text-align: right; background: var(--paper-raised); border-top: 1px solid var(--line); }
.article-head { padding: 44px 0 8px; border-bottom: 1px solid var(--line); }
.article-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); max-width: 22ch; }
.article-head .dek { font-size: 1.08rem; color: var(--ink-soft); max-width: 60ch; margin: 14px 0 26px; }
.article-meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: 13px; color: var(--ink-soft);
  padding-bottom: 28px;
}
.article-body { padding: 40px 0; max-width: 72ch; }
/* Long unbroken strings (bare URLs in note boxes) would otherwise push the
   page wider than a phone screen. */
.article-body, .prose, .note-box, .info-box, .faq { overflow-wrap: anywhere; }
.article-body h2 { font-size: 1.4rem; margin-top: 2em; }
.article-body h3 { font-size: 1.15rem; margin-top: 1.6em; }
.article-body p { margin: 0 0 1.1em; }
.article-body ul, .article-body ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.article-body li { margin-bottom: 0.4em; }
/* Tables scroll inside their own box rather than widening the page. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.4em 0; }
.article-body table { width: 100%; border-collapse: collapse; margin: 0; font-size: 0.95rem; }
.table-scroll table { min-width: 100%; }
.article-body th, .article-body td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.article-body th { font-family: var(--font-sans); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }

.info-box {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left: 4px solid var(--sea);
  border-radius: 10px;
  padding: 20px 22px;
  margin: 1.6em 0;
  font-family: var(--font-sans);
  font-size: 0.94rem;
}
.info-box h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sea); margin-bottom: 12px; margin-top: 0; font-weight: 700; }

/* Contents list. Numbered to match how the guides are structured, and kept
   visually quieter than the info box so it reads as navigation, not content. */
.toc {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px 20px;
  margin: 0 0 28px;
  background: var(--paper-raised);
}
.toc h2 {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-soft); margin: 0 0 10px; font-weight: 700;
}
.toc ol { margin: 0; padding-left: 1.35em; display: grid; gap: 6px; }
.toc li { font-size: 0.94rem; }
.toc li::marker { color: var(--sunset); font-weight: 700; }
.toc a { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; }
.toc a:hover { color: var(--sea); border-bottom-color: currentColor; }

/* Anchor targets sit under the sticky header without this. */
.article-body h2[id] { scroll-margin-top: 84px; }
.info-box dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.info-box dt { color: var(--ink-soft); }
.info-box dd { margin: 0; }
.info-box .map-links { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.info-box .map-link { display: inline-block; font-weight: 700; margin-top: 0; }
.mini-map { width: 100%; height: 200px; border-radius: 10px; border: 1px solid var(--line); margin-top: 14px; }

.diagram-figure { margin: 1.6em 0; }
.diagram-figure img {
  /* height: auto is required. The width/height attributes stop layout shift, but
     without it the height attribute wins over width: 100% and the image is
     squashed — the metro map rendered 660x810 instead of 660x389 until 2026-09-14. */
  width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line);
  background: #fff;
}
.diagram-figure figcaption {
  font-size: 0.82rem; color: var(--ink-soft); margin-top: 8px; text-align: center;
  font-family: var(--font-sans);
}

.note-box {
  background: var(--sunset-soft);
  border-radius: 10px;
  padding: 16px 20px;
  font-size: 0.92rem;
  font-family: var(--font-sans);
  margin: 1.6em 0;
}
.note-box strong { color: var(--sunset); }

/* Revealed by share.js, so a visitor without JavaScript never sees a button
   that cannot do anything. */
/* Label text that only screen readers need. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Shown by lang-suggest.js only when the visitor reads a language this site
   publishes and is not already on it. Hidden in the markup so it never flashes
   for the majority who need nothing. */
.lang-suggest {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: var(--sea); color: #fff;
  padding: 10px 16px; font-size: 0.92rem;
}
/* display:flex above would otherwise beat [hidden] and show an empty bar with only the close button. */
.lang-suggest[hidden] { display: none; }
.lang-suggest-link { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.lang-suggest-link:hover { color: #fff; }
.lang-suggest-close {
  border: 0; background: none; color: #fff; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 0 4px; opacity: 0.8;
}
.lang-suggest-close:hover { opacity: 1; }

/* A class that sets display beats the browser default for [hidden], so cards
   the filter marks hidden would still take up space and the page would stay the
   same length — which is the entire point of the search. Scoped to the grid so
   it cannot affect anything else that uses hidden. */
#guide-grid [hidden] { display: none !important; }

/* Guides-page filter. Revealed by guide-search.js, so the full list still
   renders for anyone without JavaScript. */
.guide-search { margin: 0 0 22px; }
.guide-search-field {
  display: flex; align-items: center; gap: 10px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0 14px; max-width: 460px;
}
.guide-search-field:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(27, 122, 147, 0.15); }
.guide-search-field svg { flex: none; color: var(--ink-soft); }
.guide-search-field input {
  flex: 1; border: 0; background: none; outline: none;
  font: inherit; font-size: 0.95rem; color: var(--ink); padding: 12px 0;
}
.guide-search-field input::-webkit-search-cancel-button { display: none; }
.guide-search-clear {
  flex: none; border: 0; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--ink-soft); padding: 0 2px;
}
.guide-search-clear:hover { color: var(--ink); }
.guide-search-count { font-size: 13px; color: var(--ink-soft); margin: 10px 2px 0; min-height: 1em; }
.guide-search-empty { color: var(--ink-soft); padding: 28px 2px; margin: 0; }

.share-row { display: flex; justify-content: flex-end; padding: 4px 0 8px; }
.share-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; padding: 9px 16px; }
.share-btn svg { flex: none; }

.related { border-top: 1px solid var(--line); padding: 36px 0 8px; }
.related h2 { font-size: 1.2rem; margin-bottom: 20px; }

.faq { margin: 2.2em 0; padding-top: 1.6em; border-top: 1px solid var(--line); }
.faq h2 { font-size: 1.4rem; }
.faq-item { padding: 18px 0; border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: none; }
.faq-item h3 { font-size: 1.02rem; margin-bottom: 8px; }
.faq-item p { color: var(--ink-soft); margin: 0; }

/* Sources. Deliberately quiet — it is the last thing in the article and it is
   there to be checked, not read through. The host sits beside each link so a
   reader can see it points at the operator before clicking. */
.sources { margin: 2.2em 0 0; padding-top: 1.6em; border-top: 1px solid var(--line); }
.sources h2 { font-size: 1.15rem; margin-bottom: 6px; }
.sources-note { color: var(--ink-soft); font-size: 0.92rem; margin: 0 0 14px; }
.sources ul { list-style: none; margin: 0; padding: 0; }
.sources li { padding: 7px 0; font-size: 0.95rem; line-height: 1.5; }
.sources li + li { border-top: 1px solid var(--line); }
.sources-host { color: var(--ink-soft); font-size: 0.84rem; white-space: nowrap; }

/* Who wrote it. Sits below the sources so the foot of an article answers both
   "where did this come from" and "who checked it". */
.author-box {
  margin: 2.2em 0 0; padding: 18px 20px;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 14px;
}
.author-box h2 {
  font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 10px;
}
.author-name { font-weight: 800; font-size: 1.05rem; margin: 0 0 4px; }
.author-bio { color: var(--ink-soft); font-size: 0.94rem; margin: 0; }
.author-more { margin: 10px 0 0; font-size: 0.9rem; font-weight: 600; }
.byline a { font-weight: 700; }

/* Contact box */
.contact-box {
  display: flex; align-items: center; gap: 16px;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 24px; margin: 22px 0 30px; max-width: 70ch;
}
.contact-icon { flex-shrink: 0; color: var(--sea); }
.contact-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft); margin-bottom: 3px;
}
.contact-box a { font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.contact-box a:hover { color: var(--sea); }

/* Simple static pages */
.prose { padding: 48px 0 64px; }
.prose h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); max-width: 70ch; }
.prose p, .prose li { margin: 0 0 1.1em; max-width: 70ch; }
.prose h2 { font-size: 1.25rem; margin-top: 1.8em; max-width: 70ch; }

/* Category orientation text, above the card grid */
.cat-intro { padding: 0 0 30px; }
.cat-intro p { color: var(--ink-soft); margin: 0 0 1em; }

.map-about { padding: 8px 0 10px; }
.map-about h2 { font-size: 1.2rem; margin: 0 0 12px; }
.map-about p { color: var(--ink-soft); margin: 0 0 1em; max-width: 70ch; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 40px 0 50px;
  margin-top: 40px;
  font-family: var(--font-sans);
}
.site-footer .cols { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.site-footer .note { color: var(--ink-soft); font-size: 0.88rem; max-width: 46ch; }
.site-footer .links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.88rem; }
.site-footer .links a { color: var(--ink-soft); }
.site-footer .links a:hover { color: var(--sea); }
.site-footer .copyright { margin-top: 22px; font-size: 0.8rem; color: var(--ink-soft); opacity: 0.7; }

/* Cheap Eats Map */
.map-toolbar {
  display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap;
  padding: 4px 0 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-sans);
}
.map-filter-group { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 0; }
.map-filter-group label { font-size: 12px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
/* Every control in the toolbar is 40px tall and the row aligns bottoms, so the
   checkbox, button and count centre on the same line as the selects. */
.map-filter-group select {
  height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--paper-raised); color: var(--ink); font-size: 14px; min-width: 160px;
}
.map-count { display: inline-flex; align-items: center; height: 40px; font-size: 13px; color: var(--ink-soft); margin-left: auto; }
.cheap-eats-map { width: 100%; height: 460px; border-radius: var(--radius); border: 1px solid var(--line); z-index: 1; }
.cheap-eats-map--tall { height: 620px; }
.map-disclaimer { font-size: 0.85rem; color: var(--ink-soft); margin: 14px 0 4px; font-family: var(--font-sans); }
.map-disclaimer strong { color: var(--ink); }

/* Quick-select bar (synced to markers currently in view) */
.quickselect-bar {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
  font-family: var(--font-sans);
}
.quickselect-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; padding: 8px 14px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--paper-raised); color: var(--ink-soft);
  cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.quickselect-btn .idx { color: var(--sunset); font-weight: 800; }
.quickselect-btn:hover { border-color: var(--sea); color: var(--sea); }
.quickselect-btn.is-active { border-color: var(--sea); color: var(--sea); background: var(--sunset-soft); }
.quickselect-empty { font-size: 13px; color: var(--ink-soft); padding: 8px 0; margin: 0; }

/* Numbered map pins */
.spot-pin span {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--sea); color: #fff; font-weight: 800; font-size: 12px;
  font-family: var(--font-sans);
  border: 2px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.35);
  transition: transform .15s ease, background .15s ease;
}
.spot-pin.is-active span { background: var(--sunset); transform: scale(1.15); }

/* Attraction pins — square and muted so they read as background context next
   to the round, numbered food pins rather than competing with them. */
.attraction-pin span {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 7px;
  background: var(--paper-raised); color: var(--sea);
  border: 2px solid var(--sea); box-shadow: 0 2px 6px rgba(0,0,0,0.28);
}
.attraction-pin span svg { display: block; }
.pin-badge--attraction { background: #e8eff2; color: var(--sea); }
.map-popup h3 { margin: 6px 0; font-size: 0.98rem; }
.map-popup-links { margin: 6px 0 8px; }
.map-popup-links a { font-weight: 700; color: var(--sea); }

/* Hidden in the markup and shown by the map script only where geolocation
   exists, so the button never appears unable to do anything. */
.map-locate {
  display: inline-flex; align-items: center; gap: 7px; height: 40px;
  border: 1px solid var(--line); background: var(--paper-raised); color: var(--ink);
  border-radius: 999px; padding: 0 14px; font: inherit; font-size: 13px; cursor: pointer;
}
.map-locate:hover:not(:disabled) { border-color: var(--sea); color: var(--sea); }
.map-locate:disabled { opacity: 0.55; cursor: default; }
.map-locate-msg { font-size: 13px; color: var(--ink-soft); margin: 8px 2px 0; }
.you-pin span {
  display: block; width: 14px; height: 14px; margin: 2px;
  border-radius: 50%; background: #1b7a93; border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
}

.map-toggle { display: inline-flex; align-items: center; gap: 8px; height: 40px; font-size: 13px; color: var(--ink-soft); cursor: pointer; }
.map-toggle input { width: 16px; height: 16px; accent-color: var(--sea); cursor: pointer; }
.map-toggle[hidden] { display: none; }

/* Leaflet paints every popup white, so its contents keep the light palette in dark mode too. */
.leaflet-popup-content-wrapper {
  --ink: #10202b;
  --ink-soft: #45606c;
  --sea: #0f4c5c;
  --sunset: #e8703a;
  --sunset-soft: #fbe6da;
  --line: #e2ded2;
  --paper-raised: #ffffff;
}
.map-popup { font-family: var(--font-sans); max-width: 250px; }
.map-popup-img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }
.map-popup h4 { margin: 6px 0 6px; font-size: 0.98rem; }
.map-popup p { font-size: 0.85rem; color: #45606c; margin: 0 0 8px; }
.pin-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--sunset-soft); color: var(--sunset); padding: 3px 8px; border-radius: 999px; }
.pin-badge--submission { background: #e4f3ee; color: #1b7a5e; }
.pin-badge--researched { background: #eceefb; color: #4a51a8; }
.pin-badge--owner { background: #fdeee3; color: #b4531a; }
.map-popup-meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; font-size: 0.8rem; margin: 0 0 8px; }
.map-popup-meta dt { color: #7a8b93; }
.map-popup-meta dd { margin: 0; }

/* Plain-text mirror of the map's pins (see cheapEatsListSection in build.js) —
   the same 28 spots, grouped by area, always in the HTML whether or not the
   map's own script has run. */
.cheap-eats-list-section { padding-top: 6px; }
.cheap-eats-list-all { border: 1px solid var(--line); border-radius: 12px; background: var(--paper-raised); }
.cheap-eats-list-all summary {
  display: flex; align-items: center; gap: 10px; padding: 16px 18px;
  cursor: pointer; list-style: none;
}
.cheap-eats-list-all summary::-webkit-details-marker { display: none; }
.cheap-eats-list-all summary::after {
  content: ""; margin-left: auto; width: 9px; height: 9px;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg); transition: transform .15s;
}
.cheap-eats-list-all[open] summary::after { transform: rotate(-135deg); }
.cheap-eats-list-all summary h2 { margin: 0; font-size: 1.15rem; }
.cheap-eats-list-all summary:hover h2 { color: var(--sea); }
.cheap-eats-list-count {
  font-size: 12px; font-weight: 700; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px;
}
.cheap-eats-list-groups { padding: 4px 18px 8px; border-top: 1px solid var(--line); }
.cheap-eats-list-group { margin: 18px 0 22px; }
.cheap-eats-list-group h3 { font-size: 1rem; margin: 0 0 10px; color: var(--ink); }
.cheap-eats-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cheap-eats-list li { padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.cheap-eats-list li:last-child { border-bottom: none; padding-bottom: 0; }
.cheap-eats-list strong { display: inline-block; margin: 6px 8px 4px 0; font-size: 0.95rem; }
.cheap-eats-list-meta { font-size: 0.78rem; color: #7a8b93; text-transform: uppercase; letter-spacing: 0.03em; }
.cheap-eats-list p { color: var(--ink-soft); margin: 4px 0 0; font-size: 0.88rem; max-width: 65ch; }
.map-popup .map-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.map-link-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; font-weight: 700; padding: 7px 8px; border-radius: 8px;
  border: 1px solid #e2ded2; text-decoration: none;
}
.map-link-btn.google { color: #1a73e8; border-color: #c6dafc; }
.map-link-btn.naver { color: #03a74e; border-color: #bfe8d2; }
.map-link-btn:hover { background: #fbe6da; text-decoration: none; }

@media (max-width: 720px) {
  .cheap-eats-map, .cheap-eats-map--tall { height: 420px; }
  .map-count { margin-left: 0; }
}

/* Cookie consent banner */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--paper-raised); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px -16px rgba(0,0,0,0.3);
}
.cookie-banner-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 16px; padding: 16px 24px;
}
.cookie-banner p {
  margin: 0; font-size: 0.88rem; color: var(--ink-soft);
  font-family: var(--font-sans);
  max-width: 62ch;
}
.cookie-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner-actions .btn { padding: 9px 18px; font-size: 13.5px; }

/* 404 */
.error-page { padding: 100px 0; text-align: center; }
.error-page h1 { font-size: 3rem; }
.error-links {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  max-width: 660px; margin: 52px auto 0; text-align: left;
  border-top: 1px solid var(--line); padding-top: 32px;
}
.error-links h2 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin-bottom: 12px; }
.error-links ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.error-links a { color: var(--ink); }
.error-links a:hover { color: var(--sea); }
@media (max-width: 640px) {
  .error-page { padding: 64px 0; }
  .error-page h1 { font-size: 2.1rem; }
  .error-links { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
}

@media (max-width: 860px) {
  .main-nav { display: none; }
  .header-row { grid-template-columns: auto 1fr; }
  .header-controls { justify-self: end; }
}

@media (max-width: 720px) {
  .header-row { height: 60px; }
  .hero { padding: 48px 0 40px; }
  .section { padding: 40px 0; }
}