/* CSS sign templates — intentionally OUTSIDE the RetroMorphism design system.
   The page chrome (panels, buttons, cards) follows the design system, but the
   sign itself must look like a real-world Korean street sign so the learner
   trains on a realistic stimulus. Each template defines its own colors, shape,
   typography weight, and shadow — none reference RetroMorphism tokens. */

.sign {
  /* Per-template overrides; defaults below are a neutral fallback. */
  --sign-bg: #ffffff;
  --sign-fg: #111111;
  --sign-border: transparent;
  --sign-glow: transparent;
  --sign-accent: transparent;

  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 26px;
  background: var(--sign-bg);
  color: var(--sign-fg);
  border: 4px solid var(--sign-border);
  border-radius: 12px;
  font-weight: 800;
  /* Length-aware fit: 64px cap for short signs; long phrases shrink to the
     card's inline size (minus ~56px horizontal padding) divided by the glyph
     count (--sign-len, set in flashcard.js), so e.g. "관계자 외 출입금지" stays on
     one line inside the card on mobile instead of overflowing. The .card__sign-
     wrap is the query container; --sign-len defaults to 4 if unset. */
  font-size: clamp(18px, calc((100cqi - 56px) / var(--sign-len, 4)), 64px);
  line-height: 1;
  letter-spacing: -0.01em;
  /* Soft realistic drop shadow (not the design-system hard shadow) */
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.18),
    0 0 28px var(--sign-glow);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
  max-width: 100%;
  text-align: center;
}

.sign__badge {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background: var(--sign-accent);
  color: #ffffff;
  font-size: 0.5em;
  font-weight: 800;
  display: grid;
  place-items: center;
  letter-spacing: 0;
}

.sign__text {
  /* Korean web font with system-Korean fallbacks. Kept literal (not an
     --rm-* token) so signs stay visually self-contained — see design-system.md. */
  font-family: "Seoul Namsan", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  white-space: nowrap;
  word-break: keep-all;
}

/* ───── Subway (Seoul Metro lines 1–9) ───── */
/* Real station markers: a white pill with dark text, a line-coloured border and
   a line-coloured number badge (the official per-line brand colours). The shared
   rule fixes the shape/typography so each line rule only declares its colour via
   --line; the border and number badge both read --line, the number stays white.
   A station serving several lines uses its lowest-numbered line's colour (set in
   gen-subway.mjs); every line it serves is still listed on the card back. */
.sign--subway-line1, .sign--subway-line2, .sign--subway-line3,
.sign--subway-line4, .sign--subway-line5, .sign--subway-line6,
.sign--subway-line7, .sign--subway-line8, .sign--subway-line9 {
  --sign-bg: #ffffff;
  --sign-fg: #1f2937;
  --sign-border: var(--line);
  --sign-accent: var(--line);
  border-radius: 999px;
  padding: 14px 22px 14px 14px;
}
.sign--subway-line1 { --line: #0052a4; }  /* dark blue   */
.sign--subway-line2 { --line: #00a84d; }  /* green       */
.sign--subway-line3 { --line: #ef7c1c; }  /* orange      */
.sign--subway-line4 { --line: #00a5de; }  /* sky blue    */
.sign--subway-line5 { --line: #996cac; }  /* purple      */
.sign--subway-line6 { --line: #cd7c2f; }  /* ochre brown */
.sign--subway-line7 { --line: #747f00; }  /* olive       */
.sign--subway-line8 { --line: #e6186c; }  /* pink        */
.sign--subway-line9 { --line: #bb8336; }  /* gold        */

/* The non-subway categories (Tour, Restaurant, Market) all share ONE olive
   panel (no border, soft shadow from .sign base, rounded). Only the main text
   colour differs per category; every "sub" sign is white. Defined once here so
   a panel tweak is a single edit. */
.sign--wayfinding-yellow, .sign--wayfinding-white,
.sign--food-cream, .sign--food-white,
.sign--board-mint, .sign--board-white {
  --sign-bg: #5d6451;        /* rgb(93,100,81) — shared olive */
  border-radius: 8px;
}
/* Sub signs — white text (all three categories) */
.sign--wayfinding-white, .sign--food-white, .sign--board-white { --sign-fg: #ffffff; }
/* Main signs — one accent colour each */
.sign--wayfinding-yellow { --sign-fg: #ffcd00; }  /* tour — exit yellow */
.sign--food-cream        { --sign-fg: #fff4d6; }  /* restaurant — cream */
.sign--board-mint        { --sign-fg: #b8ffd0; }  /* market — mint */