/* Code-editor skin: activity bar, explorer, editor tabs, breadcrumb, status bar.
   Dark unless 라이트 is picked (the light tokens are at the end); the shell sets data-mode to match. */
html[data-skin="vscode"] {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "D2Coding", monospace;
  --bg: #1f1f1f; --fg: #cccccc; --muted: #9d9d9d; --line: #3c3c3c; --subtle: #2a2a2a;
  --accent: #4d8dff; --good: #4ec98a; --bad: #f1707b; --focus: #4d8dff;
  --vs-chrome: #181818; --vs-border: #2b2b2b; --vs-hover: #2a2d2e; --vs-sel: #37373d; --vs-brand: #4656c8; --vs-input: #313131;
  --vs-cm: #6a9955; --vs-kw: #c586c0; --vs-str: #ce9178; --vs-var: #9cdcfe; --vs-fn: #dcdcaa; --vs-num: #b5cea8; --vs-ln: #6e7681;
  --rail-w: 260px;
  color-scheme: dark;
}
[data-skin="vscode"] body { font-size: 13px; background: var(--bg); }

/* frame: title bar on top, status bar at the bottom, explorer on the left */
[data-skin="vscode"] .app { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
[data-skin="vscode"] .app-body { display: contents; }
[data-skin="vscode"] .app-top { grid-column: 1 / -1; grid-row: 1; position: sticky; top: 0; z-index: 30; background: var(--vs-chrome); border-bottom: 1px solid var(--vs-border); }
[data-skin="vscode"] .app-side { grid-column: 1; grid-row: 2; align-self: start; position: sticky; top: 36px; height: calc(100vh - 36px - 22px); height: calc(100dvh - 36px - 22px); display: flex; background: var(--vs-chrome); border-right: 1px solid var(--vs-border); overflow: hidden; }
[data-skin="vscode"] .app-stage { grid-column: 2; grid-row: 2; }
[data-skin="vscode"] .app-foot { grid-column: 1 / -1; grid-row: 3; position: sticky; bottom: 0; z-index: 30; }

/* title bar */
[data-skin="vscode"] .vs-title { display: flex; align-items: center; gap: 6px; height: 35px; padding: 0 8px; }
[data-skin="vscode"] .vs-mark { display: grid; width: 18px; height: 18px; flex: none; margin: 0 4px; color: var(--vs-brand); --logo-fg: #fff; }
[data-skin="vscode"] .vs-menu { display: flex; gap: 1px; }
[data-skin="vscode"] .vs-menu span { padding: 2px 7px; border-radius: 4px; color: var(--fg); white-space: nowrap; }
[data-skin="vscode"] .vs-menu span:hover { background: rgba(255, 255, 255, .08); }
[data-skin="vscode"] .vs-cmd { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: min(38vw, 520px); height: 24px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--subtle); color: var(--muted); }
[data-skin="vscode"] .vs-cmd svg { width: 13px; height: 13px; }
[data-skin="vscode"] .skin-btn { height: 26px; padding: 0 7px; border-color: transparent; border-radius: 5px; color: var(--fg); font-size: 12px; }
[data-skin="vscode"] .skin-btn:hover { background: rgba(255, 255, 255, .08); }
[data-skin="vscode"] .vs-me { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #c74e89; color: #fff; font-size: 11px; font-weight: 700; flex: none; margin: 0 4px; }

/* activity bar + explorer */
[data-skin="vscode"] .vs-activity { display: flex; flex-direction: column; width: 48px; flex: none; border-right: 1px solid var(--vs-border); }
[data-skin="vscode"] .vs-activity span { position: relative; display: grid; place-items: center; height: 48px; color: #868686; }
[data-skin="vscode"] .vs-activity span.on { color: var(--fg); box-shadow: inset 2px 0 0 var(--vs-brand); }
[data-skin="vscode"] .vs-activity svg { width: 24px; height: 24px; stroke-width: 1.1; }
[data-skin="vscode"] .vs-activity b { position: absolute; right: 8px; bottom: 9px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--vs-brand); color: #fff; font-size: 9px; line-height: 16px; text-align: center; }
[data-skin="vscode"] .vs-explorer { width: 232px; overflow-y: auto; scrollbar-width: thin; padding-bottom: 8px; }
[data-skin="vscode"] .vs-panehead { display: flex; align-items: center; justify-content: space-between; gap: 4px; height: 35px; padding: 0 8px 0 20px; font-size: 11px; color: var(--muted); letter-spacing: .02em; }
[data-skin="vscode"] .vs-panehead.sub { justify-content: flex-start; height: 22px; padding-left: 4px; font-weight: 700; color: var(--fg); border-top: 1px solid var(--vs-border); }
[data-skin="vscode"] .vs-panehead.sub:first-of-type { margin-top: 12px; }
[data-skin="vscode"] .vs-root { display: flex; align-items: center; gap: 2px; height: 22px; padding-left: 4px; font-size: 11px; font-weight: 700; }
[data-skin="vscode"] .vs-dir, [data-skin="vscode"] .vs-file { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg); }
[data-skin="vscode"] .vs-dir svg { color: var(--muted); margin-right: 1px; }
[data-skin="vscode"] .vs-file { padding-left: 32px; }
[data-skin="vscode"] .vs-file.root { padding-left: 16px; }
[data-skin="vscode"] a.vs-file:hover { background: var(--vs-hover); }
[data-skin="vscode"] .vs-file.on { background: var(--vs-sel); box-shadow: inset 0 0 0 1px var(--vs-brand); }
[data-skin="vscode"] .vs-fi { display: inline-grid; place-items: center; width: 16px; flex: none; font: 700 8.5px/1 var(--mono); font-style: normal; letter-spacing: -.04em; color: #519aba; }
[data-skin="vscode"] .vs-fi.ts, [data-skin="vscode"] .vs-fi.md { color: #519aba; }
[data-skin="vscode"] .vs-fi.tsx, [data-skin="vscode"] .vs-fi.go { color: #4fc1d9; }
[data-skin="vscode"] .vs-fi.py { color: #e3b341; }
[data-skin="vscode"] .vs-fi.js, [data-skin="vscode"] .vs-fi.json { color: #cbcb41; }

/* editor: tabs, breadcrumb, a line-number gutter */
[data-skin="vscode"] .page-head { background: var(--bg); }
[data-skin="vscode"] .vs-tabs { display: flex; align-items: stretch; height: 35px; background: var(--vs-chrome); border-bottom: 1px solid var(--vs-border); overflow-x: auto; scrollbar-width: none; }
[data-skin="vscode"] .vs-tab { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 12px; border-right: 1px solid var(--vs-border); color: var(--muted); white-space: nowrap; }
[data-skin="vscode"] a.vs-tab:not(.on):hover { background: var(--vs-hover); }
[data-skin="vscode"] .vs-tab.on { background: var(--bg); color: var(--fg); box-shadow: inset 0 1px 0 var(--vs-brand); margin-bottom: -1px; }
[data-skin="vscode"] .vs-x { width: 18px; text-align: center; border-radius: 4px; font-size: 15px; line-height: 18px; color: var(--muted); }
[data-skin="vscode"] .vs-tabacts { display: flex; align-items: center; gap: 10px; padding: 0 12px; color: var(--muted); }
[data-skin="vscode"] .vs-crumb { display: flex; align-items: center; gap: 3px; height: 22px; padding: 0 16px; color: var(--muted); white-space: nowrap; overflow: hidden; }
[data-skin="vscode"] .vs-crumb > span { display: inline-flex; align-items: center; gap: 4px; }
[data-skin="vscode"] .vs-crumb a:hover { color: var(--fg); }
[data-skin="vscode"] .vs-dochead { padding: 10px 24px 4px 64px; }
[data-skin="vscode"] .vs-dochead h1 { font: 500 15px/1.6 var(--mono); color: var(--vs-cm); }
[data-skin="vscode"] .page-cols { gap: 0; }
[data-skin="vscode"] .page-main { position: relative; padding: 12px 28px 24px 64px; font-size: 14px; }
[data-skin="vscode"] body:not([data-page="hub"]) .page-main::before {
  content: "1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 55\A 56\A 57\A 58\A 59\A 60\A 61\A 62\A 63\A 64\A 65\A 66\A 67\A 68\A 69\A 70\A 71\A 72\A 73\A 74\A 75\A 76\A 77\A 78\A 79\A 80\A 81\A 82\A 83\A 84\A 85\A 86\A 87\A 88\A 89\A 90\A 91\A 92\A 93\A 94\A 95\A 96\A 97\A 98\A 99\A 100\A 101\A 102\A 103\A 104\A 105\A 106\A 107\A 108\A 109\A 110\A 111\A 112\A 113\A 114\A 115\A 116\A 117\A 118\A 119\A 120\A 121\A 122\A 123\A 124\A 125\A 126\A 127\A 128\A 129\A 130\A 131\A 132\A 133\A 134\A 135\A 136\A 137\A 138\A 139\A 140\A 141\A 142\A 143\A 144\A 145\A 146\A 147\A 148\A 149\A 150\A 151\A 152\A 153\A 154\A 155\A 156\A 157\A 158\A 159\A 160\A 161\A 162\A 163\A 164\A 165\A 166\A 167\A 168\A 169\A 170\A 171\A 172\A 173\A 174\A 175\A 176\A 177\A 178\A 179\A 180\A 181\A 182\A 183\A 184\A 185\A 186\A 187\A 188\A 189\A 190\A 191\A 192\A 193\A 194\A 195\A 196\A 197\A 198\A 199\A 200";
  position: absolute; top: 12px; bottom: 0; left: 0; width: 44px; overflow: hidden; white-space: pre; text-align: right;
  font: 13px/20px var(--mono); color: var(--vs-ln); pointer-events: none; user-select: none;
}
[data-skin="vscode"] .page-rail { align-self: stretch; padding: 0 14px 16px; background: var(--vs-chrome); border-left: 1px solid var(--vs-border); }
[data-skin="vscode"] .vs-railhead { display: flex; justify-content: space-between; align-items: center; height: 35px; margin: 0 -14px 6px; padding: 0 8px 0 14px; font-size: 11px; color: var(--muted); }
[data-skin="vscode"] .nw-foot, [data-skin="vscode"] .nw-ad { border-top-color: var(--vs-border); }
[data-skin="vscode"] kbd { background: var(--subtle); border-color: var(--line); color: var(--fg); }
[data-skin="vscode"] .cd-input { border: 1px solid var(--line); border-radius: 2px; background: var(--vs-input); color: var(--fg); font: 12px var(--mono); padding: 1px 4px; }
[data-skin="vscode"] .cd-input:focus { outline: 1px solid var(--focus); outline-offset: -1px; }

/* status bar */
[data-skin="vscode"] .vs-status { display: flex; align-items: center; height: 22px; padding-right: 6px; background: var(--vs-brand); color: #fff; font-size: 12px; white-space: nowrap; overflow: hidden; }
[data-skin="vscode"] .vs-status > span { display: inline-flex; align-items: center; gap: 4px; height: 100%; padding: 0 7px; }
[data-skin="vscode"] .vs-status svg { width: 13px; height: 13px; }
[data-skin="vscode"] .vs-status b { font-weight: 400; font-variant-numeric: tabular-nums; }
[data-skin="vscode"] .vs-remote { padding: 0 10px !important; background: rgba(0, 0, 0, .22); }
[data-skin="vscode"] .fb-btn { bottom: 34px; border-radius: 6px; background: var(--subtle); border-color: var(--line); color: var(--fg); }

/* hub: the source file */
[data-skin="vscode"] body[data-page="hub"] .page-main { padding-left: 0; }
[data-skin="vscode"] body[data-page="hub"] .vs-dochead { padding-left: 64px; }
[data-skin="vscode"] .vs-src { font: 13px/20px var(--mono); }
[data-skin="vscode"] .vs-line { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; }
[data-skin="vscode"] .vs-line.cur { background: rgba(255, 255, 255, .04); box-shadow: inset 0 1px 0 #282828, inset 0 -1px 0 #282828; }
[data-skin="vscode"] .vs-line.cur .vs-ln { color: var(--fg); }
[data-skin="vscode"] .vs-ln { text-align: right; color: var(--vs-ln); user-select: none; }
[data-skin="vscode"] .vs-code { white-space: pre-wrap; min-height: 20px; }
[data-skin="vscode"] .vs-cm { color: var(--vs-cm); }
[data-skin="vscode"] .vs-kw { color: var(--vs-kw); }
[data-skin="vscode"] .vs-str { color: var(--vs-str); }
[data-skin="vscode"] .vs-var { color: var(--vs-var); }
[data-skin="vscode"] .vs-fn { color: var(--vs-fn); }
[data-skin="vscode"] .vs-num { color: var(--vs-num); }
[data-skin="vscode"] a.vs-link { text-decoration: underline; text-decoration-color: rgba(206, 145, 120, .4); text-underline-offset: 3px; }
[data-skin="vscode"] a.vs-link:hover { text-decoration-color: currentColor; }
[data-skin="vscode"] .vs-src kbd { font-size: 11px; }

/* shared page parts: buttons, inputs, the match thread as peek panels */
[data-skin="vscode"] .btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 2px; cursor: pointer; border: 1px solid transparent; background: #313131; color: var(--fg); font-size: 13px; white-space: nowrap; }
[data-skin="vscode"] .btn:hover { background: #3c3c3c; }
[data-skin="vscode"] .btn.primary { background: var(--vs-brand); color: #fff; }
[data-skin="vscode"] .btn.primary:hover { background: #5466d6; }
[data-skin="vscode"] .result-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
[data-skin="vscode"] .timeline { max-width: 820px; }
[data-skin="vscode"] .entry { margin: 0 0 14px; border: 1px solid var(--line); border-top: 2px solid var(--vs-brand); background: var(--vs-chrome); }
[data-skin="vscode"] .entry-av { display: none; }
[data-skin="vscode"] .entry-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--vs-border); font-size: 12px; color: var(--muted); }
[data-skin="vscode"] .entry-title { color: var(--fg); font-weight: 600; font-family: var(--mono); }
[data-skin="vscode"] .entry-score { margin-left: auto; color: var(--vs-num); font-family: var(--mono); }
[data-skin="vscode"] .entry-body { padding: 12px; line-height: 1.6; }
[data-skin="vscode"] .entry-body p + p { margin-top: 8px; }
[data-skin="vscode"] .entry-body .chips, [data-skin="vscode"] .entry-body .mission { margin-top: 10px; }
[data-skin="vscode"] .entry-body .criterion { color: var(--muted); }
[data-skin="vscode"] .entry.solo { border-top-color: #cca700; }
[data-skin="vscode"] .composer .name-input { width: 100%; min-height: 40px; padding: 5px 6px; border: 1px solid var(--line); background: var(--vs-input); }
[data-skin="vscode"] .composer .name-input:focus-within { border-color: var(--focus); }
[data-skin="vscode"] .composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
[data-skin="vscode"] .field { padding: 0 0 14px; margin-bottom: 14px; border-bottom: 1px solid var(--vs-border); }
[data-skin="vscode"] .field-label { font-size: 11px; font-weight: 700; color: var(--fg); margin-bottom: 6px; letter-spacing: .02em; }
[data-skin="vscode"] .field-value { color: var(--fg); }
[data-skin="vscode"] .mode { display: flex; gap: 8px; align-items: flex-start; padding: 4px 6px; margin: 0 -6px; cursor: pointer; }
[data-skin="vscode"] .mode:hover { background: var(--vs-hover); }
[data-skin="vscode"] .mode input { margin: 3px 0 0; accent-color: var(--vs-brand); }
[data-skin="vscode"] .mode b { display: block; font-weight: 500; }
[data-skin="vscode"] .mode small { color: var(--muted); font-size: 12px; }
[data-skin="vscode"] .labels { display: flex; flex-wrap: wrap; gap: 4px; }
[data-skin="vscode"] .lbl { padding: 0 6px; border-radius: 2px; font: 12px/20px var(--mono); background: var(--subtle); }
[data-skin="vscode"] .lbl.l1 { color: var(--vs-var); } [data-skin="vscode"] .lbl.l2 { color: var(--vs-kw); }
[data-skin="vscode"] .lbl.l3 { color: var(--vs-cm); } [data-skin="vscode"] .lbl.l4 { color: var(--vs-str); }
[data-skin="vscode"] .hint { color: var(--muted); }
/* 2048: tiles in the editor's syntax colours */
[data-skin="vscode"] .game {
  --board-bg: var(--vs-chrome); --cell-bg: rgba(255, 255, 255, .04); --tile-radius: 3px; --board-radius: 4px;
  --t2-bg: #2d2d2d; --t2-fg: #cccccc; --t4-bg: #264f78; --t4-fg: #e6f0ff; --t8-bg: #3b5a2a; --t8-fg: #d7f5c4;
  --t16-bg: #6a9955; --t16-fg: #fff; --t32-bg: #ce9178; --t32-fg: #1f1f1f; --t64-bg: #c586c0; --t64-fg: #1f1f1f;
  --t128-bg: #dcdcaa; --t128-fg: #1f1f1f; --t256-bg: #4fc1d9; --t256-fg: #1f1f1f; --t512-bg: #b5cea8; --t512-fg: #1f1f1f;
  --t1024-bg: #f1707b; --t1024-fg: #1f1f1f; --t2048-bg: #4656c8; --t2048-fg: #fff;
}

@media (max-width: 1011px) {
  [data-skin="vscode"] .vs-explorer { width: 200px; }
}
@media (max-width: 800px) {
  [data-skin="vscode"] .app { grid-template-columns: minmax(0, 1fr); }
  [data-skin="vscode"] .app-side { display: none; }
  [data-skin="vscode"] .app-stage { grid-column: 1; }
  [data-skin="vscode"] .vs-cmd { width: auto; }
  [data-skin="vscode"] .vs-dochead { padding: 10px 16px 4px; }
  [data-skin="vscode"] .page-main { padding: 12px 16px 24px; }
  [data-skin="vscode"] body:not([data-page="hub"]) .page-main::before { display: none; }
  [data-skin="vscode"] body[data-page="hub"] .vs-dochead { padding-left: 16px; }
  [data-skin="vscode"] .vs-line { grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; }
  [data-skin="vscode"] .vs-src { font-size: 12px; }
  [data-skin="vscode"] .page-rail { border-left: 0; border-top: 1px solid var(--vs-border); }
  [data-skin="vscode"] body[data-page="match"] .page-rail { border-top: 0; border-bottom: 1px solid var(--vs-border); }
}

/* ---------- light variant (only when 라이트 is picked) ---------- */
html[data-skin="vscode"][data-mode-pref="light"] {
  --bg: #ffffff; --fg: #3b3b3b; --muted: #6f6f6f; --line: #cecece; --subtle: #f2f2f2;
  --accent: #005fb8; --good: #2e8b57; --bad: #c72e2e; --focus: #005fb8;
  --vs-chrome: #f8f8f8; --vs-border: #e5e5e5; --vs-hover: #ececec; --vs-sel: #e4e6f1; --vs-brand: #4656c8; --vs-input: #ffffff;
  --vs-cm: #008000; --vs-kw: #af00db; --vs-str: #a31515; --vs-var: #001080; --vs-fn: #795e26; --vs-num: #098658; --vs-ln: #9a9a9a;
  color-scheme: light;
}
[data-skin="vscode"][data-mode-pref="light"] .vs-menu span:hover, [data-skin="vscode"][data-mode-pref="light"] .skin-btn:hover { background: rgba(0, 0, 0, .06); }
[data-skin="vscode"][data-mode-pref="light"] .vs-activity span { color: #8a8a8a; }
[data-skin="vscode"][data-mode-pref="light"] .vs-line.cur { background: rgba(0, 0, 0, .03); box-shadow: inset 0 1px 0 #eee, inset 0 -1px 0 #eee; }
[data-skin="vscode"][data-mode-pref="light"] .btn { background: #e5e5e5; }
[data-skin="vscode"][data-mode-pref="light"] .btn:hover { background: #d9d9d9; }
[data-skin="vscode"][data-mode-pref="light"] .btn.primary { background: var(--vs-brand); }
[data-skin="vscode"][data-mode-pref="light"] .game {
  --t2-bg: #eeeeee; --t2-fg: #3b3b3b; --t4-bg: #dbe7f7; --t4-fg: #001080; --t8-bg: #d4ecd2; --t8-fg: #0b5c0b;
  --t16-bg: #008000; --t32-bg: #a31515; --t32-fg: #fff; --t64-bg: #af00db; --t64-fg: #fff; --t128-bg: #795e26; --t128-fg: #fff;
  --t256-bg: #0070c1; --t256-fg: #fff; --t512-bg: #098658; --t512-fg: #fff; --t1024-bg: #c72e2e; --t1024-fg: #fff;
}

/* the rail under the page below 1100px (base.css): no side border there */
@media (max-width: 1100px) {
  [data-skin="vscode"] .page-rail { border-left: 0; border-top: 1px solid var(--vs-border); }
}