/* 레이아웃: 홈은 Day 칼럼 그리드, 문제 화면은 [지문 | 에디터+채점] 2단 분할 */
:root {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #eef1f6;
  --ink: #18202c;
  --ink-2: #4a5566;
  --ink-3: #7b8597;
  --line: #dde2ea;
  --accent: #0b5cad;
  --accent-soft: #e3eefa;
  --code-bg: #f7f8fb;
  /* 백준 채점 결과 색 */
  --ac: #009874;
  --wa: #dd4124;
  --tle: #e67e22;
  --re: #8e44ad;
  --pending: #8a94a6;
  --tier-silver: #5f7389;
  --tier-gold: #c48a00;
  --tier-lv: #2f6fd6;
  --font-ui: 'IBM Plex Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --font-code: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --radius: 8px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11151c; --surface: #181d26; --surface-2: #1f2531; --ink: #e6eaf1; --ink-2: #aab3c2; --ink-3: #7a8496;
    --line: #2c3442; --accent: #5aa2ec; --accent-soft: #1b2a3d; --code-bg: #141920;
    --ac: #2fc39a; --wa: #ff6b55; --tle: #f5a04a; --re: #b98be0; --pending: #7a8496;
    --tier-silver: #9aaabd; --tier-gold: #e3b23c; --tier-lv: #6aa1f5;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #11151c; --surface: #181d26; --surface-2: #1f2531; --ink: #e6eaf1; --ink-2: #aab3c2; --ink-3: #7a8496;
  --line: #2c3442; --accent: #5aa2ec; --accent-soft: #1b2a3d; --code-bg: #141920;
  --ac: #2fc39a; --wa: #ff6b55; --tle: #f5a04a; --re: #b98be0; --pending: #7a8496;
  --tier-silver: #9aaabd; --tier-gold: #e3b23c; --tier-lv: #6aa1f5;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); font-size: 15px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
code, pre, .mono { font-family: var(--font-code); }

/* ── 상단바 ── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 1480px; margin: 0 auto; height: 54px;
  display: flex; align-items: center; gap: 20px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; }
.brand-mark {
  font-family: var(--font-code); font-size: 13px; font-weight: 600; color: #fff;
  background: var(--accent); border-radius: 6px; padding: 2px 7px;
}
.brand-text { font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; }
.topnav { display: flex; gap: 4px; margin-left: auto; }
.topnav a {
  text-decoration: none; color: var(--ink-2); font-weight: 500; font-size: 14px;
  padding: 6px 12px; border-radius: 6px;
}
.topnav a:hover { background: var(--surface-2); }
.topnav a.on { color: var(--accent); background: var(--accent-soft); }
.theme-btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 16px;
}

/* ── 공통 ── */
.wrap {
  max-width: 1480px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 28px 64px;
}
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
h1, h2, h3 { text-wrap: balance; line-height: 1.3; }
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  padding: 7px 14px; border-radius: 7px; font-size: 14px; font-weight: 500; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--ink-3); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn.small { padding: 4px 10px; font-size: 13px; }

.tier { font-size: 12px; font-weight: 700; white-space: nowrap; }
.tier.silver { color: var(--tier-silver); }
.tier.gold { color: var(--tier-gold); }
.tier.lv { color: var(--tier-lv); }
.tag {
  display: inline-block; font-size: 12px; color: var(--ink-2); background: var(--surface-2);
  border-radius: 4px; padding: 1px 7px; white-space: nowrap;
}
.status-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; border: 2px solid var(--line); }
.status-dot.solved { background: var(--ac); border-color: var(--ac); }
.status-dot.tried { background: transparent; border-color: var(--wa); }

/* ── 홈 ── */
.hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-bottom: 28px; }
.hero h1 { font-size: 28px; margin: 4px 0 6px; letter-spacing: -0.02em; }
.hero p { margin: 0; color: var(--ink-2); max-width: 62ch; }
.goal {
  display: inline-block; margin-top: 10px; font-weight: 600; color: var(--ink);
  background: linear-gradient(transparent 58%, color-mix(in srgb, var(--tle) 30%, transparent) 58%);
}
.meter { min-width: 240px; flex: 0 1 320px; }
.meter-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.meter-row strong { font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
.meter-bar { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; display: flex; }
.meter-bar i { display: block; height: 100%; }
.meter-bar .s { background: var(--ac); }
.meter-bar .t { background: color-mix(in srgb, var(--wa) 55%, transparent); }
.meter-legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.meter-legend span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: 0; }
.meter-legend .s::before { background: var(--ac); }
.meter-legend .t::before { background: color-mix(in srgb, var(--wa) 55%, transparent); }

.days { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.day-head { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.day-head h2 { margin: 0; font-size: 16px; }
.day-head .mark { font-family: var(--font-code); font-size: 13px; color: var(--ink-3); }
.day-head .count { margin-left: auto; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.day ul { list-style: none; margin: 0; padding: 4px 0; }
.day li a, .type-list li a {
  display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 12px;
  padding: 9px 16px; text-decoration: none; color: var(--ink);
}
.day li a:hover, .type-list li a:hover { background: var(--surface-2); }
.p-title { min-width: 0; }
.p-title b { font-weight: 600; }
.p-title .num { font-family: var(--font-code); font-size: 12px; color: var(--ink-3); margin-left: 6px; }
.p-title .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.day .bonus { border-top: 1px dashed var(--line); }
.day .bonus-label { font-size: 12px; color: var(--ink-3); padding: 8px 16px 0; }
.repeat { font-size: 11px; color: var(--ink-3); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; margin-left: 6px; vertical-align: 1px; }

.foot-note { margin-top: 36px; font-size: 13px; color: var(--ink-3); max-width: 80ch; }
.foot-note p { margin: 6px 0; }
.foot-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* 유형별 */
.types { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.type-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.type-card header { padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.type-card h2 { margin: 0 0 4px; font-size: 17px; }
.type-card .pattern { margin: 0; font-size: 13px; color: var(--ink-2); }
.type-card .signal { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }
.type-card .signal b { color: var(--ink); font-weight: 600; }
.type-list { list-style: none; margin: 0; padding: 4px 0; }

/* ── 문제 화면 ── */
.pv { max-width: 1480px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 18px 40px; }
.pv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 14px; }
.pv-head h1 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
.pv-head .num { font-family: var(--font-code); color: var(--ink-3); font-size: 14px; }
.pv-head .back { text-decoration: none; color: var(--ink-2); font-size: 14px; }
.pv-head .src-link { font-size: 12px; color: var(--ink-3); }
.limits { width: 100%; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink-2); }
.limits b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.pv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pane { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.pane-left { position: sticky; top: 70px; max-height: calc(100vh - 86px); display: flex; flex-direction: column; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); padding: 0 10px; overflow-x: auto; flex: none; }
.tabs button {
  border: 0; background: none; color: var(--ink-2); padding: 11px 12px 10px; font-size: 14px; font-weight: 500;
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.tabs .badge { font-size: 11px; color: var(--ink-3); margin-left: 4px; }
.tab-body { padding: 18px 22px 28px; overflow-y: auto; min-height: 0; }

/* 지문 */
.statement h2 { font-size: 16px; margin: 26px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.statement h2:first-child { margin-top: 0; }
.statement p, .statement li { max-width: 72ch; }
.statement p { margin: 0 0 10px; }
.statement ul, .statement ol { padding-left: 22px; margin: 0 0 10px; }
.statement table { border-collapse: collapse; font-size: 13px; margin: 8px 0 14px; }
.statement th, .statement td { border: 1px solid var(--line); padding: 5px 9px; text-align: center; }
.statement thead th { background: var(--surface-2); }
.statement .tbl { overflow-x: auto; }
.statement pre, .samples pre, .analysis pre, .solution pre {
  background: var(--code-bg); border: 1px solid var(--line); border-radius: 6px;
  padding: 10px 12px; font-size: 13px; line-height: 1.5; overflow-x: auto; margin: 0 0 12px;
}
.statement :not(pre) > code, .analysis :not(pre) > code, .hint :not(pre) > code {
  background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: 0.88em;
}
.samples { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 14px; }
.samples h3 { font-size: 14px; margin: 14px 0 6px; display: flex; align-items: center; gap: 8px; }
.copy { border: 1px solid var(--line); background: var(--surface); color: var(--ink-3); font-size: 11px; border-radius: 4px; padding: 0 6px; cursor: pointer; }
.copy:hover { color: var(--ink); }
.pgs-table { font-family: var(--font-code); font-size: 12px; }
.pgs-table td { text-align: left !important; }

/* 그림 */
figure { margin: 12px 0 16px; }
figure svg { display: block; max-width: 100%; height: auto; }
figure figcaption { font-size: 12px; color: var(--ink-3); text-align: center; margin-top: 4px; }
.fig-row { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.fig-row figure { margin: 8px 0; }

/* 힌트 */
.hint { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.hint-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface-2); font-weight: 600; font-size: 14px; }
.hint-head .lvl { font-family: var(--font-code); font-size: 12px; color: var(--ink-3); font-weight: 400; }
.hint-body { padding: 12px 14px; }
.hint-body p { margin: 0; }
.hint.locked .hint-body { display: none; }
.hint.locked .hint-head { cursor: pointer; }
.hint-head button { margin-left: auto; }

/* 해설 */
.gate { text-align: center; padding: 36px 12px; color: var(--ink-2); }
.gate p { margin: 0 0 14px; }
.analysis h3 { font-size: 15px; margin: 22px 0 8px; }
.analysis h3:first-child { margin-top: 0; }
.analysis p, .analysis li { max-width: 72ch; }
.analysis table { border-collapse: collapse; font-size: 13px; margin: 6px 0 12px; }
.analysis th, .analysis td { border: 1px solid var(--line); padding: 4px 9px; }
.analysis thead th { background: var(--surface-2); }
.solution { margin-top: 26px; }
.solution-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.solution-head h3 { margin: 0; font-size: 15px; }
.solution-head .btn { margin-left: auto; }

/* 기록 */
.history { width: 100%; border-collapse: collapse; font-size: 13px; }
.history th, .history td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.history th { color: var(--ink-3); font-weight: 500; }
.history td.num { font-variant-numeric: tabular-nums; }
.history .load { font-size: 12px; }
.empty { color: var(--ink-3); font-size: 14px; padding: 20px 0; }

/* ── 에디터 ── */
.pane-right { display: flex; flex-direction: column; }
.editor-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.editor-bar select {
  font-family: inherit; font-size: 14px; padding: 6px 8px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.editor-bar .spacer { flex: 1; }
.rt-status { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.rt-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--pending); }
.rt-status.ready::before { background: var(--ac); }
.rt-status.loading::before { background: var(--tle); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .rt-status.loading::before { animation: none; } }
.editor-wrap { border-bottom: 1px solid var(--line); }
.CodeMirror {
  height: 46vh; min-height: 300px; font-family: var(--font-code); font-size: 14px; line-height: 1.55;
  background: var(--surface); color: var(--ink);
}
.CodeMirror-gutters { background: var(--surface); border-right: 1px solid var(--line); }
.CodeMirror-linenumber { color: var(--ink-3); }
.CodeMirror-cursor { border-left-color: var(--ink); }
.CodeMirror-selected { background: var(--accent-soft) !important; }
.CodeMirror-focused .CodeMirror-selected { background: color-mix(in srgb, var(--accent) 22%, transparent) !important; }
.CodeMirror-matchingbracket { color: var(--ac) !important; text-decoration: underline; }
.cm-s-default .cm-keyword { color: #a626a4; }
.cm-s-default .cm-def { color: #0b5cad; }
.cm-s-default .cm-variable-2, .cm-s-default .cm-variable-3 { color: #b45309; }
.cm-s-default .cm-builtin { color: #0e7490; }
.cm-s-default .cm-string { color: #2f7d32; }
.cm-s-default .cm-number { color: #b45309; }
.cm-s-default .cm-comment { color: var(--ink-3); font-style: italic; }
.cm-s-default .cm-operator { color: var(--ink-2); }
.cm-s-default .cm-property { color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cm-s-default .cm-keyword { color: #d58cf0; }
  :root:not([data-theme="light"]) .cm-s-default .cm-def { color: #6cb2ff; }
  :root:not([data-theme="light"]) .cm-s-default .cm-variable-2, :root:not([data-theme="light"]) .cm-s-default .cm-number { color: #f0b46a; }
  :root:not([data-theme="light"]) .cm-s-default .cm-builtin { color: #5fd3e6; }
  :root:not([data-theme="light"]) .cm-s-default .cm-string { color: #8fd18c; }
}
:root[data-theme="dark"] .cm-s-default .cm-keyword { color: #d58cf0; }
:root[data-theme="dark"] .cm-s-default .cm-def { color: #6cb2ff; }
:root[data-theme="dark"] .cm-s-default .cm-variable-2, :root[data-theme="dark"] .cm-s-default .cm-number { color: #f0b46a; }
:root[data-theme="dark"] .cm-s-default .cm-builtin { color: #5fd3e6; }
:root[data-theme="dark"] .cm-s-default .cm-string { color: #8fd18c; }

.run-bar { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); align-items: center; }
.run-bar .hint-key { font-size: 12px; color: var(--ink-3); margin-left: auto; }
.custom { padding: 0 12px; border-bottom: 1px solid var(--line); }
.custom summary { cursor: pointer; font-size: 13px; color: var(--ink-2); padding: 9px 0; }
.custom textarea {
  width: 100%; min-height: 90px; font-family: var(--font-code); font-size: 13px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--code-bg); color: var(--ink); resize: vertical;
}
.custom .row { display: flex; gap: 8px; margin: 8px 0 12px; }

/* 결과 */
.results { padding: 14px 14px 18px; min-height: 120px; }
.results .idle { color: var(--ink-3); font-size: 14px; }
.verdict-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 10px; }
.verdict { font-weight: 700; font-size: 18px; }
.v-ac { color: var(--ac); }
.v-wa { color: var(--wa); }
.v-tle { color: var(--tle); }
.v-re { color: var(--re); }
.v-pending { color: var(--pending); }
.verdict-meta { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.case-strip { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.case-strip i { width: 22px; height: 22px; border-radius: 4px; font-style: normal; font-size: 11px; display: grid; place-items: center; color: #fff; font-family: var(--font-code); }
.case-strip .ac { background: var(--ac); }
.case-strip .wa { background: var(--wa); }
.case-strip .tle { background: var(--tle); }
.case-strip .re { background: var(--re); }
.case-strip .wait { background: var(--surface-2); color: var(--ink-3); }
.case-strip .skip { background: var(--surface-2); color: var(--ink-3); opacity: .5; }
.case { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.case-head { display: flex; align-items: center; gap: 10px; padding: 7px 12px; background: var(--surface-2); font-size: 13px; }
.case-head .verdict { font-size: 13px; }
.case-head .t { margin-left: auto; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.case-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; padding: 10px 12px; }
.case-body > div { min-width: 0; }
.case-body .lbl { font-size: 11px; color: var(--ink-3); margin-bottom: 3px; }
.case-body pre { margin: 0; background: var(--code-bg); border: 1px solid var(--line); border-radius: 5px; padding: 7px 9px; font-size: 12px; line-height: 1.45; max-height: 220px; overflow: auto; }
.case-body pre .bad { background: color-mix(in srgb, var(--wa) 18%, transparent); }
.err-box { grid-column: 1 / -1; }
.err-box pre { color: var(--wa); white-space: pre-wrap; }
.celebrate { margin: 4px 0 12px; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--ac) 12%, transparent); color: var(--ink); font-size: 14px; }
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--ink); color: var(--bg); padding: 8px 16px; border-radius: 8px; font-size: 14px; z-index: 50;
}

/* ── 반응형 ── */
@media (max-width: 980px) {
  .pv-grid { grid-template-columns: minmax(0, 1fr); }
  .pane-left { position: static; max-height: none; }
  .CodeMirror { height: 50vh; }
}
@media (max-width: 560px) {
  .brand-text { font-size: 15px; }
  .topbar-inner { gap: 10px; }
  .topnav a { padding: 6px 8px; }
  .samples { grid-template-columns: minmax(0, 1fr); }
  .tab-body { padding: 14px 14px 22px; }
  .hero h1 { font-size: 23px; }
  .run-bar .hint-key { display: none; }
}