/* ════════════════════════════════════════════════════════════════════
   RiseOJ design system — implements DESIGN.md.
   Loaded AFTER theme.css: section 2 remaps the legacy variable
   vocabulary onto the new tokens so every page inherits the palette;
   sections 3+ are the new component system used by rebuilt templates.
   Editorial dark, hairline dividers, big display type, restrained motion.
   ════════════════════════════════════════════════════════════════════ */

/* ── 0. Fonts ─────────────────────────────────────────────────────────
   Display: Archivo (variable, Google). Body: Pretendard Variable
   (jsdelivr). Mono: IBM Plex Mono (Google). Per DESIGN.md — no others. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

/* ── 1. Tokens (DESIGN.md — the only colors allowed) ────────────────── */
:root {
  --bg:     #0E0E0D;   /* page background            */
  --panel:  #151513;   /* raised surfaces            */
  --ink:    #F2F0EB;   /* primary text               */
  --dim:    #8C8A84;   /* secondary text, labels     */
  --hair:   #262523;   /* ALL borders/dividers (1px) */
  --indigo: #7B8CFF;   /* single accent              */
  --ac:     #3FBF7F;   /* accepted verdict only      */
  --wa:     #E05555;   /* wrong answer verdict only  */
  --bronze: #AD5600;
  --silver: #8AA3BD;
  --gold:   #EC9A00;

  --font-display: 'Archivo', 'Pretendard Variable', sans-serif;
  --font-body: 'Pretendard Variable', Pretendard, system-ui, -apple-system, 'RiseEmoji', sans-serif;
  --font-mono-ds: 'IBM Plex Mono', ui-monospace, 'RiseEmoji', monospace;
}
/* Light theme (인디고/라이트 toggle) — same variables, light palette.
   Accents unchanged. Nothing else changes. */
:root[data-theme="light"], body[data-theme="light"] {
  --bg:    #F7F6F2;
  --panel: #FFFFFF;
  --ink:   #171613;
  --dim:   #6E6C66;
  --hair:  #E4E2DC;
}

/* ── 2. Legacy vocabulary remap ───────────────────────────────────────
   theme.css components read these names; pointing them at the new
   tokens retokenizes the whole site. Selectors mirror theme.css's own
   (equal specificity, later source order → this file wins). */
:root,
:root[data-theme="dark"], body[data-theme="dark"],
:root[data-theme="light"], body[data-theme="light"] {
  color-scheme: dark;
  --font-sans: var(--font-body);
  --font-mono: var(--font-mono-ds);

  --bg-surface:  var(--panel);
  --bg-subtle:   var(--panel);
  --bg-muted:    color-mix(in srgb, var(--panel) 86%, var(--ink));
  --bg-sunken:   var(--panel);
  --bg-elevated: var(--panel);
  --bg-overlay:  color-mix(in srgb, var(--bg) 94%, transparent);
  --surface:   var(--panel);
  --surface-2: var(--panel);

  --text:       var(--ink);
  --text-2:     color-mix(in srgb, var(--ink) 72%, var(--dim));
  --text-muted: var(--dim);
  --text-faint: color-mix(in srgb, var(--dim) 72%, var(--bg));

  --tier-bronze: var(--bronze); --tier-silver: var(--silver); --tier-gold: var(--gold);
  --border:        var(--hair);
  --border-strong: color-mix(in srgb, var(--hair) 72%, var(--ink));
  --border-subtle: var(--hair);

  --success:      var(--ac);
  --success-soft: color-mix(in srgb, var(--ac) 10%, transparent);
  --danger:       var(--wa);
  --danger-soft:  color-mix(in srgb, var(--wa) 9%, transparent);
  --warning:      var(--gold);
  --warning-soft: color-mix(in srgb, var(--gold) 10%, transparent);
  --info:         var(--indigo);
  --info-soft:    color-mix(in srgb, var(--indigo) 9%, transparent);
  --orange:       var(--gold);
  --orange-soft:  color-mix(in srgb, var(--gold) 10%, transparent);
  --yellow:       var(--gold);

  /* Hard ban: no box-shadows. Floating layers get a hairline ring so
     they still separate from the page. (Verdict glow is the exception,
     declared on the component itself.) */
  --shadow-xs: 0 0 0 1px var(--hair);
  --shadow-sm: 0 0 0 1px var(--hair);
  --shadow-md: 0 0 0 1px var(--hair);
  --shadow-lg: 0 0 0 1px var(--hair);
  --shadow-ring: 0 0 0 2px color-mix(in srgb, var(--indigo) 45%, transparent);
  --glow-accent:      0 0 0 1px color-mix(in srgb, var(--indigo) 40%, transparent);
  --glow-accent-soft: 0 0 0 1px color-mix(in srgb, var(--indigo) 22%, transparent);
  --glow-success:     0 0 0 1px color-mix(in srgb, var(--ac) 35%, transparent);

  /* Radii — hard ban above 3px (r-full stays for circles: avatars/dots,
     a circle is geometry, not corner rounding). */
  --r-xs: 2px;
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 3px;
  --r-xl: 3px;
  --r-2xl: 3px;

  /* Verdicts — mono font, token colors only. */
  --vd-ac:      var(--ac);
  --vd-wa:      var(--wa);
  --vd-tle:     var(--wa);
  --vd-mle:     var(--wa);
  --vd-re:      var(--wa);
  --vd-ce:      var(--gold);
  --vd-pc:      var(--gold);
  --vd-pending: var(--dim);
  --vd-judging: var(--gold);

  --toggle-thumb: var(--ink);
  --glow-arena:      0 0 0 1px var(--hair);
  --glow-arena-soft: 0 0 0 1px var(--hair);

  /* Brand-logo tokens — asset untouched, keep resolving to accent. */
  --logo-c1: var(--accent);
  --logo-c2: var(--accent);
  --logo-c3: var(--accent);
  --logo-oj1: var(--accent-text);
  --logo-oj2: var(--accent-text);
  --logo-glow: transparent;
}
:root[data-theme="light"], body[data-theme="light"] { color-scheme: light; }

/* Accent: default preset becomes the DESIGN.md indigo. The accent
   cycler (existing functionality) still works — non-indigo presets from
   theme.css keep their values; components read --accent so they follow. */
:root[data-accent="indigo"], :root:not([data-accent]),
:root[data-theme="dark"][data-accent="indigo"], :root[data-theme="dark"]:not([data-accent]) {
  --accent:        var(--indigo);
  --accent-hover:  color-mix(in srgb, var(--indigo) 88%, var(--ink));
  --accent-strong: color-mix(in srgb, var(--indigo) 84%, var(--bg));
  --accent-text:   var(--indigo);
  --accent-soft:   color-mix(in srgb, var(--indigo) 12%, transparent);
  --accent-2:      var(--indigo);
}

/* ── 3. Base ────────────────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.mono, code, kbd, samp, pre {
  font-family: var(--font-mono-ds);
  font-variant-numeric: tabular-nums;
}
h1, h2 {
  font-family: var(--font-display);
  font-weight: 780;
  font-stretch: 107%;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(44px, 7vw, 84px); }
h2 { font-size: clamp(28px, 4vw, 44px); }
h3, h4, h5, h6 { font-family: var(--font-body); font-weight: 700; letter-spacing: -0.01em; }
small, .small { font-size: 13.5px; }
a { color: inherit; }
a:hover { color: var(--indigo); }
::selection { background: color-mix(in srgb, var(--indigo) 30%, transparent); }

/* Visible keyboard focus — indigo ring, everywhere. */
:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── 4. Section chrome (use on every section) ───────────────────────── */
.ds-sec {
  padding: 96px 0;
  border-bottom: 1px solid var(--hair);
}
.ds-sec--compact { padding: 48px 0; }
.ds-eyebrow {
  display: block;
  font-size: 12px;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--dim);
  margin: 0 0 14px;
}
.ds-eyebrow::before {
  content: "+ ";
  font-family: var(--font-mono-ds);
  color: var(--indigo);
}
.ds-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 40px;
}
.ds-sec--compact .ds-sec-head { margin-bottom: 24px; }
.ds-sec-head h2 { margin: 0; }
.ds-sec--compact .ds-sec-head h2,
.ds-sec-head.ds-sec-head--sm h2 { font-size: clamp(20px, 2.4vw, 28px); }
.ds-more {
  flex: 0 0 auto;
  font-size: 13.5px;
  color: var(--dim);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 6px;
}
.ds-more .arr { display: inline-block; transition: transform 0.2s ease; }
.ds-more:hover { color: var(--indigo); }
.ds-more:hover .arr { transform: translateX(4px); }

.ds-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 480px) { .ds-wrap { padding: 0 16px; } }

/* ── 5. Buttons ─────────────────────────────────────────────────────── */
.btn, button.btn, a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 10px 20px;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  box-shadow: none;
}
.btn:hover { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-primary, .btn.btn-primary, a.btn-primary, button.btn-primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.btn-primary:hover, .btn.btn-primary:hover {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
}
.btn-secondary, .btn.btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--hair); }
.btn-secondary:hover { border-color: var(--ink); }
.btn-lg, .btn.btn-lg { padding: 13px 26px; font-size: 15px; }
.btn-sm, .btn.btn-sm { padding: 6px 12px; font-size: 13px; }

/* ── 6. Tables ──────────────────────────────────────────────────────── */
.ds-table { width: 100%; border-collapse: collapse; }
.ds-table th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dim);
  padding: 12px 14px;
  border-bottom: 1px solid var(--hair);
  background: none;
}
.ds-table td {
  padding: 17px 14px;
  border-bottom: 1px solid var(--hair);
  font-size: 14.5px;
  background: none;
}
.ds-table--compact td { padding: 12px 14px; }
.ds-table tbody tr { transition: background 0.15s ease; }
.ds-table tbody tr:hover { background: var(--panel); }
.ds-table .cell-id { font-family: var(--font-mono-ds); font-variant-numeric: tabular-nums; color: var(--dim); font-size: 13px; }
.ds-table .cell-num { font-family: var(--font-mono-ds); font-variant-numeric: tabular-nums; }
.ds-table a { text-decoration: none; }
.ds-table a:hover { color: var(--indigo); }

/* ── 7. List rows (submissions, rankings, forum) ────────────────────── */
.ds-rows { list-style: none; margin: 0; padding: 0; }
.ds-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--hair);
  transition: padding-left 0.2s ease;
}
.ds-row:hover { padding-left: 12px; }
.ds-row a { text-decoration: none; }
.ds-row .ds-when {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--font-mono-ds);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--dim);
  text-align: right;
}
.ds-row .ds-main { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 8. Bordered grid strips (instead of cards) ─────────────────────── */
/* Interior 1px dividers come from a 1px grid gap over a --hair
   background; cells paint --bg on top. Works for any column count. */
.ds-strip {
  --strip-cols: 1;
  display: grid;
  grid-template-columns: repeat(var(--strip-cols), minmax(0, 1fr));
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: 3px;
  overflow: hidden;
}
.ds-strip > * {
  padding: 26px 28px;
  background: var(--bg);
  min-width: 0;
}
.ds-strip--panel > * { background: var(--panel); }
.ds-stat-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 780;
  font-stretch: 107%;
  letter-spacing: -0.02em;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ds-stat-lbl {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--dim);
}

/* ── 9. Code blocks ─────────────────────────────────────────────────── */
.ds-code {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 3px;
  overflow: hidden;
}
.ds-code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--hair);
  font-family: var(--font-mono-ds);
  font-size: 12px;
  color: var(--dim);
}
.ds-code pre {
  margin: 0;
  padding: 16px;
  background: none;
  border: 0;
  font-size: 13.5px;
  line-height: 1.65;
  overflow-x: auto;
}

/* ── 10. Verdicts & tier display ────────────────────────────────────── */
.ds-verdict {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono-ds);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.ds-verdict::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 9999px;
  background: currentColor;
  flex: 0 0 auto;
}
.ds-verdict--ac { color: var(--ac); }
.ds-verdict--ac::before { box-shadow: 0 0 8px 1px color-mix(in srgb, var(--ac) 65%, transparent); }
.ds-verdict--wa { color: var(--wa); }
.ds-verdict--pending { color: var(--dim); }
.ds-verdict--pending::before { animation: ds-pulse 1.2s ease-in-out infinite; }
@keyframes ds-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

.ds-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 9999px;
  background: currentColor;
  margin-right: 6px;
  vertical-align: 1px;
}

/* ── 11. Motion (nothing else) ──────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-in { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .ds-more .arr, .ds-row, .ds-table tbody tr, .btn { transition: none; }
  .ds-verdict--pending::before { animation: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── 12. Nav & footer (editorial pass over theme.css structure) ─────── */
.nav {
  background: var(--bg);
  border-bottom: 1px solid var(--hair);
  box-shadow: none;
  backdrop-filter: none;
}
.nb {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--dim);
}
.nb:hover { color: var(--ink); }
.nb.is-active { color: var(--ink); }
.nav-search-input {
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 2px;
  color: var(--ink);
  font-size: 13.5px;
}
.nav-search-input:focus { border-color: var(--indigo); }
.nav-grp-lbl {
  font-size: 13.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--dim);
}

.site-footer { background: var(--bg); border-top: 1px solid var(--hair); margin-top: 0; }
.site-footer-col h3 {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--dim);
  font-weight: 600;
}
.site-footer-col a { color: var(--dim); font-size: 13.5px; }
.site-footer-col a:hover { color: var(--indigo); }
.site-footer-bottom { border-top: 1px solid var(--hair); color: var(--dim); font-size: 12.5px; }
.site-footer-tag { color: var(--dim); font-size: 13.5px; }

/* ── 13. Layout utilities & homepage ────────────────────────────────── */
.ds-grid-21 { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: start; }
.ds-grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.ds-grid-3  { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; align-items: start; }
@media (max-width: 900px) {
  .ds-grid-21, .ds-grid-2, .ds-grid-3 { grid-template-columns: 1fr; gap: 40px; }
}

.ds-hero { padding: 88px 0 96px; border-bottom: 1px solid var(--hair); }
.ds-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; align-items: center; }
@media (max-width: 900px) { .ds-hero-grid { grid-template-columns: 1fr; gap: 48px; } .ds-hero { padding: 56px 0 64px; } }
.ds-hero-lede { max-width: 46ch; font-size: 16.5px; line-height: 1.7; color: var(--dim); margin: 22px 0 0; }
.ds-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.ds-hero-hints { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; font-size: 13.5px; color: var(--dim); }
.ds-hero-hints a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair); }
.ds-hero-hints a:hover { color: var(--indigo); border-color: var(--indigo); }

/* Hero code sample — the code-block component with verdict footer. */
.ds-hero-code-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-top: 1px solid var(--hair);
  font-family: var(--font-mono-ds); font-size: 12px; color: var(--dim);
}
.ds-hero-code .hln { display: inline-block; width: 2ch; margin-right: 1.4ch; color: var(--dim); opacity: .6; user-select: none; }
.ds-hero-code .hcl { display: block; }
.ds-hero-code .hcl-on { background: color-mix(in srgb, var(--indigo) 10%, transparent); margin: 0 -16px; padding: 0 16px; }
.ds-hero-code .hc-key { color: var(--indigo); }
.ds-hero-code .hc-str { color: var(--ac); }
.ds-hero-code .hc-fn  { color: var(--ink); font-weight: 600; }

/* Section panels used in multi-column sections */
.ds-panel-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 0 10px;
}
.ds-panel-h h3 {
  margin: 0; font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--dim);
}
.ds-panel-h .ds-more { padding-bottom: 0; font-size: 12.5px; }

/* Ranking rows */
.ds-pos {
  flex: 0 0 2ch; font-family: var(--font-mono-ds); font-variant-numeric: tabular-nums;
  font-size: 13px; color: var(--dim); text-align: right;
}
.ds-row .ds-elo { margin-left: auto; font-family: var(--font-mono-ds); font-variant-numeric: tabular-nums; font-size: 13.5px; }

/* Pillars (features) — bordered grid strip, not cards. */
.ds-pillar { display: flex; flex-direction: column; gap: 12px; padding: 34px 32px; text-decoration: none; color: inherit; }
.ds-pillar-tag { font-family: var(--font-mono-ds); font-size: 12px; color: var(--indigo); text-transform: lowercase; }
.ds-pillar h3 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.ds-pillar p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--dim); }
.ds-pillar-arr { margin-top: auto; padding-top: 8px; font-size: 13.5px; color: var(--ink); }
.ds-pillar-arr .arr { display: inline-block; transition: transform 0.2s ease; }
.ds-pillar:hover .ds-pillar-arr .arr { transform: translateX(4px); }
.ds-pillar:hover h3 { color: var(--indigo); }

/* POTD strip */
.ds-potd {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  border: 1px solid var(--hair); border-radius: 3px;
  padding: 24px 28px; text-decoration: none; color: inherit;
  transition: border-color 0.2s ease;
}
.ds-potd:hover { border-color: var(--ink); color: inherit; }
.ds-potd-main { min-width: 0; flex: 1 1 260px; }
.ds-potd-title { display: block; font-family: var(--font-display); font-weight: 760; font-stretch: 106%; letter-spacing: -0.02em; font-size: clamp(20px, 2.6vw, 30px); line-height: 1.15; }
.ds-potd-meta { display: flex; align-items: center; gap: 14px; margin-top: 8px; font-size: 13px; }
.ds-potd-id { font-family: var(--font-mono-ds); color: var(--dim); }
.ds-potd-go { margin-left: auto; flex: 0 0 auto; font-size: 13.5px; color: var(--ink); white-space: nowrap; }
.ds-potd-go .arr { display: inline-block; transition: transform 0.2s ease; }
.ds-potd:hover .ds-potd-go .arr { transform: translateX(4px); }
.potd-solved-flag { font-family: var(--font-mono-ds); font-size: 12px; color: var(--ac); }

/* Empty states */
.ds-empty { padding: 15px 0; font-size: 13.5px; color: var(--dim); border-bottom: 1px solid var(--hair); }

@media (max-width: 480px) {
  .ds-hero-cta .btn { flex: 1 1 100%; }
  .ds-strip { grid-template-columns: 1fr 1fr !important; }
  .ds-strip > * { padding: 18px 16px; }
  .ds-pillar { padding: 24px 20px; }
}

/* ── 14. Tier display (DESIGN.md): 7px dot + tier name in tier color ── */
/* Flatten the legacy .dp pill: color only, no surface, no border. */
.dp, .dp-unrated, .dp-bronze, .dp-silver, .dp-gold,
.dp-platinum, .dp-diamond, .dp-ruby, .dp-master {
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  font-family: var(--font-mono-ds);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
.dp .ds-dot { margin-right: 0; }

/* Nav controls: 2px radius per button spec (logo mark itself untouched). */
.nav .nb, .nav .nav-acct-btn, .nav .btn-primary, .nav .nav-primary-action,
.nav .lang-select, .nav .tt, .nav .inbox-btn { border-radius: 2px; }
.nav .nav-primary-action { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.nav .nav-primary-action:hover { background: var(--indigo); border-color: var(--indigo); color: #fff; }

/* ── 15. Inner pages, compact variant (DESIGN.md density rules) ─────── */
/* Page titles: display face at compact scale (≤28px). */
.h1, .page-head-text > .h1 {
  font-family: var(--font-display);
  font-weight: 780;
  font-stretch: 107%;
  letter-spacing: -0.02em;
  font-size: clamp(22px, 2.4vw, 28px);
}
.subtitle { color: var(--dim); font-size: 13.5px; }

/* Problem rows: flat on the page, hairline dividers, panel hover. */
.prow {
  background: transparent;
  border-left: 0;
  border-bottom: 1px solid var(--hair);
  padding: 12px 14px;
}
.plist { border: 0; }
.plist-wrap { border: 1px solid var(--hair); border-radius: 3px; overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  .prow:hover { background: var(--panel); border-left: 0; }
}
.prow:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; background: var(--panel); }
.prow-id { font-family: var(--font-mono-ds); font-variant-numeric: tabular-nums; color: var(--dim); font-size: 12.5px; }
.prow-rate, .prow-tries { font-family: var(--font-mono-ds); font-variant-numeric: tabular-nums; }
.plist-head {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--dim); border-bottom: 1px solid var(--hair);
  background: transparent;
}

/* Pills & chips: 2px radius (hard ban above 3px; circles exempt). */
.spj-pill, .st-pill, .fchip, .badge, .chip-item, .tag-chip, .tag-mode,
.prow-srcno, .prow-private, .prow-added, .nb-badge, .nav-acct-role,
.plist-pager-btn, .fchips-clear, .tag-mode-opt, .rank-label {
  border-radius: 2px;
}
.input, select.input, .lang-select { border-radius: 2px; background: transparent; border-color: var(--hair); }
select.input, .lang-select {
  color: var(--ink);
  background-color: var(--panel);
  color-scheme: inherit;
}
select.input option, .lang-select option {
  color: var(--ink);
  background: var(--panel);
}
.input:focus { border-color: var(--accent); box-shadow: none; }

/* Judge and source filters are navigation state, so they follow the user's
   global accent and theme instead of model-provided category colors. */
.fbar-cat-group[data-category="judge_type"],
.fbar-cat-group[data-category="source"] { --tc: var(--accent) !important; }
.fbar-cat-group[data-category="judge_type"] .chip-tc:has(input:checked),
.fbar-cat-group[data-category="source"] .chip-tc:has(input:checked) {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  border-color: var(--accent);
  box-shadow: none;
}
.fbar-cat-group[data-category="judge_type"] .chip-tc:has(input:checked)::before,
.fbar-cat-group[data-category="source"] .chip-tc:has(input:checked)::before {
  background: var(--accent);
  box-shadow: none;
}

/* Tabs: quiet text buttons with an indigo active underline. */
.plist-tab-btn {
  border-radius: 0;
  background: none;
  font-size: 13.5px;
  color: var(--dim);
}
.plist-tab-btn.active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--indigo); }

/* ── 16. Problem detail & statement typography ──────────────────────── */
/* Statement sections: flat editorial blocks, not cards. */
.sec {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  padding: 26px 0;
  margin-bottom: 0;
}
.sh {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--dim);
  margin-bottom: 14px;
}
.sh::before { content: "+ "; font-family: var(--font-mono-ds); color: var(--indigo); }
/* Statement body: Pretendard 15.5px / 1.75 (DESIGN.md). */
.prob-page .sec p, .prob-page .sec div, .prob-page .sec li {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink);
}
.prob-page .sec .sh { font-size: 12px; color: var(--dim); }

/* Samples: code-block component. */
.io-box {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 3px;
}
.io-box pre { padding: 14px 16px; font-size: 13.5px; line-height: 1.65; }
.io-copy {
  font-family: var(--font-mono-ds); font-size: 11.5px; color: var(--dim);
  background: transparent; border: 1px solid var(--hair); border-radius: 2px;
}
.io-copy:hover { color: var(--ink); border-color: var(--ink); }
.eexp {
  border-left: 1px solid var(--indigo);
  background: transparent;
  border-radius: 0;
}

.prob-head-id { color: var(--dim); font-size: 13px; }
.prob-head-title {
  font-family: var(--font-display);
  font-weight: 780; font-stretch: 107%;
  letter-spacing: -0.02em;
  font-size: clamp(22px, 2.4vw, 28px);
}
.prob-nav { background: transparent; border: 1px solid var(--hair); border-radius: 3px; }
.prob-nav-btn { border-radius: 2px; }
.stmt-lang-btn, .tag, .tags-r .tag, .prob-page .prob-head-id { border-radius: 2px; }
.prob-page .tag { background: transparent; border: 1px solid var(--hair); }
.prob-page .tag:hover { border-color: var(--ink); box-shadow: none; transform: none; }

/* Tier voting: a stable five-column V→I matrix. The first and last options
   anchor the scale without turning 32 choices into an undifferentiated cloud. */
.rf-vote-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.rf-vote-heading .field-label { margin: 0; }
.rf-vote-required {
  font-family: var(--font-mono-ds);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
}
.rf-tier-scroll { overflow-x: auto; padding: 2px 0 8px; }
.tier-vote-axis,
.tier-radio {
  min-width: 680px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.tier-vote-axis {
  margin-bottom: 6px;
  font-family: var(--font-mono-ds);
  font-size: 10.5px;
  color: var(--dim);
  text-align: center;
}
.tier-chip.dp {
  position: relative;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--hair);
  border-radius: 2px;
  background: var(--panel);
  opacity: 1;
  cursor: pointer;
  color: var(--tg, var(--dim));
  font-family: var(--font-mono-ds);
  font-size: 12px;
  font-weight: 600;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.tier-chip.dp:hover {
  transform: none;
  filter: none;
  border-color: color-mix(in srgb, var(--tg, var(--accent)) 55%, var(--hair));
  background: color-mix(in srgb, var(--tg, var(--accent)) 6%, var(--panel));
}
.tier-chip.dp:has(input:checked) {
  transform: none;
  color: var(--tg, var(--ink));
  background: color-mix(in srgb, var(--tg, var(--accent)) 10%, var(--panel));
  border-color: var(--tg, var(--accent));
  box-shadow: inset 0 0 0 1px var(--tg, var(--accent));
}
.tier-chip.dp:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.tier-chip .tier-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.tier-chip-lbl { min-width: 0; line-height: 1.2; }
.tier-chip-check {
  display: none;
  margin-left: auto;
  color: var(--tg, var(--accent));
  font-size: 12px;
}
.tier-chip:has(input:checked) .tier-chip-check { display: inline; }
.tier-chip-edge { grid-column: 1 / -1; width: calc((100% - 24px) / 5); }
.tier-chip-low { justify-self: start; }
.tier-chip-high { justify-self: end; }

/* The vote breakdown belongs to the page flow, not inside another card. */
.rf-dist {
  margin: 18px 0 8px;
  padding: 16px 0;
  border: 1px solid var(--hair);
  border-width: 1px 0;
  border-radius: 0;
  background: transparent;
}
.rf-dist-row { grid-template-columns: minmax(120px, auto) 1fr 32px; gap: 12px; }
.rf-dist-bar { height: 5px; border-radius: 2px; background: var(--hair); }
.rf-dist-bar span { border-radius: 2px; background: var(--accent); }

@media (max-width: 720px) {
  .rf-tier-scroll { margin-right: -16px; padding-right: 16px; }
}

/* ── 17. Submissions ────────────────────────────────────────────────── */
table.subs-tbl thead th {
  font-size: 11.5px; letter-spacing: 0.1em; color: var(--dim);
  background: var(--bg); border-bottom: 1px solid var(--hair);
}
table.subs-tbl tbody td { border-bottom: 1px solid var(--hair); padding: 12px 14px; }
table.subs-tbl tbody tr:hover { background: var(--panel); }
.subs-card, .subs-table-card { background: transparent; border: 1px solid var(--hair); border-radius: 3px; box-shadow: none; }
.subs-verdict-cell span { font-family: var(--font-mono-ds); font-variant-numeric: tabular-nums; }
/* Verdict block rendering (result-*): flat mono text, no filled banner. */
.subs-tbl .result-accepted, .subs-tbl .result-wrong-answer, .subs-tbl .result-partial-correct,
.subs-tbl .result-runtime-error, .subs-tbl .result-time-limit-exceeded,
.subs-tbl .result-memory-limit-exceeded, .subs-tbl .result-compilation-error,
.subs-tbl .result-judging, .subs-tbl .result-pending {
  background: none; border: 0; padding: 0;
}
.subs-go { border-radius: 2px; background: var(--ink); color: var(--bg); }
.subs-go:hover { background: var(--indigo); color: #fff; }
.subs-view { border-radius: 2px; border-color: var(--hair); }
.subs-view:hover { border-color: var(--ink); background: transparent; }
.subs-live { border-radius: 2px; border-color: var(--hair); color: var(--dim); }
.subs-page .btn { border-radius: 2px; }
.count-pill, .subs-count { border-radius: 2px; }

/* ── 18. Tier display ────────────────────────────────────────────────
   solved.ac gem badges stay (© solved.ac, credited in the top banner and
   footer); chips are flat — tier color + mono label, no pill surface. */
.tier-icon { display: inline-block; vertical-align: -2px; }
.rank-label {
  background: none; border: none; padding: 0; border-radius: 0;
  font-family: var(--font-mono-ds); font-size: 12.5px; letter-spacing: 0.02em;
}

/* ── 19. Landing pages (contest list, learn): full editorial scale ──── */
.ds-landing .page-head { padding: 40px 0 48px; margin-bottom: 48px; }
.ds-landing .page-head-text > .h1 { font-size: clamp(34px, 5vw, 56px); }
.ds-landing .subtitle { font-size: 15px; }

/* Contest sub-nav & tabs: quiet text row, indigo underline for active. */
.kb-tabs { background: transparent; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; padding: 0; gap: 4px; }
.kb-tab {
  background: none; border: 0; border-radius: 0;
  color: var(--dim); font-size: 13.5px; padding: 10px 12px;
  box-shadow: none;
}
.kb-tab:hover { color: var(--ink); background: none; }
.kb-tab.is-active { background: none; color: var(--ink); box-shadow: inset 0 -2px 0 var(--indigo); }
.kb-tab-n { font-family: var(--font-mono-ds); font-size: 11px; color: var(--dim); background: none; border: 1px solid var(--hair); border-radius: 2px; padding: 0 5px; }
.ct-tab { border-radius: 0; }
.ct-tab.is-active { box-shadow: inset 0 -2px 0 var(--indigo); }
.ct-pill { border-radius: 2px; }

/* ── 20. Community ──────────────────────────────────────────────────── */
.ch-sec-h { font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--dim); font-weight: 600; }
.ch-sec-h::before { content: "+ "; font-family: var(--font-mono-ds); color: var(--indigo); }
.ch-stat-n { font-family: var(--font-display); font-weight: 780; font-stretch: 107%; }
.fm-pin, .fm-lock { color: var(--indigo); font-size: 11.5px; }

/* ── 21. Site notice banner (solved.ac attribution / non-affiliation) ── */
.ds-site-notice {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--dim);
  padding: 6px 16px;
  border-bottom: 1px solid var(--hair);
  background: var(--panel);
}
.ds-site-notice a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ds-site-notice a:hover { color: var(--indigo); }