:root { color-scheme: dark; --bg: #111615; --panel: #171e1b; --border: #2c3631; --text: #e1e6df; --muted: #94a098; --accent: #abd0b1; --warn: #d6b89b; --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 13px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, select, input { font: inherit; color: inherit; }
button, select { cursor: pointer; touch-action: manipulation; }
button { border: 1px solid var(--border); border-radius: 4px; background: transparent; min-height: 40px; padding: 7px 13px; }
button:hover, select:hover { border-color: #6b8572; background-color: #213027; }
button:disabled { cursor: wait; opacity: .55; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
[hidden], .symbols { display: none !important; }
svg { display: block; shape-rendering: crispEdges; }
code, .mono { font-family: var(--mono); }
.muted { color: var(--muted); font-size: 11px; }
.page-wrap { width: min(1140px, calc(100% - 64px)); margin: auto; }
.site-header { min-height: 88px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 11px; font: 600 25px var(--mono); letter-spacing: -1.5px; }
.brand img { border-radius: 5px; }
.brand-slash { color: #536158; font-size: 20px; font-weight: 400; margin-left: 10px; }
.header-label { font: 12px var(--mono); color: var(--muted); }
.back-link { margin-left: auto; color: var(--muted); font-size: 12px; padding: 10px 0; }
.back-link:hover { color: var(--accent); }
.game-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 35px 0 25px; }
.eyebrow { color: var(--muted); font: 10px/1.5 var(--mono); letter-spacing: 1px; }
h1 { margin: 5px 0 7px; font-size: 27px; font-weight: 600; letter-spacing: -.8px; }
.mock-badge { margin-top: 5px; padding: 2px 8px; border: 1px solid #3d4b41; border-radius: 3px; font: 10px/1.8 var(--mono); color: var(--accent); white-space: nowrap; }
.primary { color: #18271c; border-color: var(--accent); background: var(--accent); font-weight: 600; font-size: 12px; padding: 9px 19px; white-space: nowrap; }
.primary:hover { background: #bdddc2; border-color: #bdddc2; }
.quiet { color: #b4c2b6; font-size: 11px; }
.text-button { border-color: transparent; color: #b4c2b6; padding-left: 0; font-size: 12px; }
.play-toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.cabinet { display: grid; grid-template-columns: minmax(0, 1fr) 258px; border: 1px solid #39483d; border-radius: 6px; overflow: hidden; background: var(--panel); }
.level-bar, .level-bar > div { display: flex; align-items: center; gap: 13px; }
.level-bar { padding: 11px 22px; border-bottom: 1px solid var(--border); justify-content: space-between; }
.level-bar .mono { font-size: 11px; color: var(--accent); }
.level-bar h2 { font-size: 12px; font-weight: 500; }
.board-wrap { position: relative; display: flex; flex-direction: column; min-height: 300px; background: #19271f; border-bottom: 1px solid #314336; padding: 13px 22px 19px; }
.board-loading { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; background: #19271ff2; color: var(--accent); font: 13px/1.7 var(--mono); text-align: center; }
.board-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: 10px; color: #abbda9; margin-bottom: 14px; }
#board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-block: auto; }
#board:empty { min-height: 140px; }
#board.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.piece { min-width: 0; position: relative; padding: 10px 12px; border: 1px solid #35483b; border-radius: 3px; background: #18231d; display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 0 8px; }
.piece.target { border-color: #6f8870; }
.piece svg { width: 54px; height: 42px; grid-row: span 3; }
.piece-name { font: 11px/1.6 var(--mono); overflow-wrap: anywhere; }
.piece-detail { font-size: 10px; color: #a6b3a5; white-space: pre-line; }
.piece-state { color: #8e9e90; font-size: 10px; }
.target .piece-state { color: #b6c9af; }
.piece.caught { background: #26392a; border-color: #93b48f; }
.piece.caught .piece-state { color: #c2dfb8; }
.piece.missed { border-style: dashed; border-color: #b8a480; }
.piece.wrong { border-color: #bc9276; background: #302a22; }
.piece.wrong .piece-state, .piece.missed .piece-state { color: var(--warn); }
.piece.caught svg { animation: caught .3s ease-out; }
.memory { width: 100%; height: 3px; background: #344839; margin-block: 5px; }
.memory span { display: block; height: 100%; background: #8aab83; }
#board.rows { grid-template-columns: 1fr; gap: 5px; }
.raw-data { columns: 5; margin: 0 0 12px; padding: 10px 12px; border: 1px dashed #3f5444; font: 11px/1.7 var(--mono); color: #b1c1ac; }
.rows .piece { display: flex; padding: 5px 12px; gap: 12px; }
.rows .piece svg { width: 24px; height: 22px; flex: none; }
.rows .piece-name { flex: 1; }
.rows .piece-state { min-width: 54px; text-align: right; }
.rows .piece-detail { margin-left: auto; }
.editor { padding: 17px 22px 18px; }
.editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--muted); margin-bottom: 9px; }
.example-label { display: flex; align-items: center; gap: 8px; }
select { min-height: 32px; border: 1px solid #3d4b41; border-radius: 3px; padding: 4px 7px; background: #18221c; font-size: 11px; }
.command-row { display: flex; gap: 9px; }
.command-shell { display: flex; flex: 1; min-width: 0; align-items: center; gap: 10px; border: 1px solid #506852; border-radius: 4px; background: #101814; padding: 0 12px; }
.command-shell > span { font: 18px var(--mono); color: #7e9d7f; }
.command-shell input { width: 100%; min-width: 0; background: transparent; color: #c4dcbb; border: 0; border-radius: 0; font: 14px/1.5 var(--mono); height: 44px; padding: 0; }
.command-shell:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.command-shell input:focus-visible { outline: none; }
.editor-notes { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 9px; color: var(--muted); font-size: 10px; }
.hint-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0; border: 0; color: #bac9b6; font-size: 12px; text-align: left; }
.hint-body { margin-top: 8px; color: #a1b19a; font-size: 11px; }
.hint-body code { display: block; margin-top: 10px; padding: 8px; border: 1px solid var(--border); border-radius: 3px; background: #101814; color: #c4dcbb; white-space: pre-wrap; overflow-wrap: anywhere; }
.hint-body .text-button { margin-top: 5px; }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 15px; border-top: 1px solid var(--border); margin-top: 28px; padding: 20px 0 26px; color: #8d9c91; font: 10px/1.6 var(--mono); }
footer a, .source-page main a { text-decoration: underline; text-underline-offset: 3px; }
.source-page { max-width: 800px; }
.source-page main { padding-top: 28px; }
.source-page section { margin-top: 28px; }
.source-page h2 { font-size: 16px; }
.source-page p { margin-top: 12px; overflow-wrap: anywhere; }
.skip-link { position: fixed; left: 16px; top: 12px; padding: 10px 16px; background: var(--accent); color: var(--bg); z-index: 2; }
.skip-link:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; padding: 0; }
@keyframes caught { from { transform: translateY(-4px); } to { transform: translateY(0); } }
@media (max-width: 700px) {
  .page-wrap { width: calc(100% - 32px); }
  .site-header { min-height: 72px; gap: 12px; }
  .header-label { font-size: 10px; }
  .game-heading { padding: 27px 0 25px; }
  h1 { font-size: 24px; }
  .level-bar, .mission, .editor { padding-inline: 15px; }
  .level-bar { flex-wrap: wrap; gap: 5px 12px; }
  .board-wrap { padding-inline: 13px; }
  #board, #board.four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .piece { padding: 9px; grid-template-columns: 1fr; gap: 0; }
  .piece svg { grid-row: auto; width: 44px; height: 33px; margin-bottom: 5px; }
  .rows .piece { gap: 6px; }
  .rows .piece-name { font-size: 10px; }
  .command-row { flex-wrap: wrap; }
  .command-shell { flex-basis: 100%; }
  #run { width: 100%; }
  .editor-notes { flex-wrap: wrap; gap: 6px; }
}
@media (max-width: 390px) {
  .header-label { display: none; }
  .mock-badge { font-size: 9px; }
  .play-toolbar { gap: 9px; }
  .editor-heading { align-items: flex-start; }
  .example-label { gap: 4px; }
  .rows .piece svg { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* 정규식 낚시와 같은 보드·입력·결과 배치. */
.start-panel { padding: 28px; background: var(--panel); border: 1px solid #39483d; border-radius: 7px; }
.start-panel h2 { font-size: 18px; font-weight: 500; margin-bottom: 18px; }
.start-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.start-controls select { min-height: 40px; font-size: 12px; }
.play-area { min-width: 0; border-right: 1px solid var(--border); }
.level-bar { min-height: 47px; }
.level-bar .level-dots { display: flex; gap: 5px; }
.level-dot { width: 15px; height: 3px; background: #34443a; }
.level-dot.complete { background: #688f71; }
.level-dot.current { background: var(--accent); }
.mobile-goal { display: none; }
.editor-heading .text-button { min-height: 28px; padding: 0; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }
.feedback { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.terminal { border: 1px solid #506852; border-radius: 4px; background: #101814; overflow: hidden; }
.terminal-history { max-height: 240px; overflow: auto; }
.terminal-history:empty { display: none; }
.terminal-entry { padding: 10px 12px; border-left: 2px solid transparent; font: 12px/1.6 var(--mono); overflow-wrap: anywhere; }
.terminal-entry + .terminal-entry { border-top: 1px solid #233029; }
.terminal-command { display: block; white-space: pre-wrap; }
.terminal-command span { color: var(--muted); }
.terminal-output, .terminal-error { margin: 6px 0 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.terminal-error { color: var(--warn); }
.terminal-notice { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; }
.terminal-entry.correct { border-left-color: var(--accent); background: #1d3022; }
.correct .terminal-command, .correct .terminal-output, .correct .terminal-notice { color: #c4dcbb; }
.terminal #command-editor { padding: 8px 12px; border-top: 1px solid #233029; }
.terminal-history:empty + #command-editor { border-top: 0; }
.terminal .command-shell { padding: 0; border: 0; background: transparent; }
#terminal-path { margin-left: auto; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.feedback-actions { display: flex; gap: 10px; margin-top: 13px; }
.run-summary { border-top: 1px solid #34483b; padding-top: 18px; margin-top: 18px; }
.run-summary h2 { font-size: 16px; font-weight: 500; color: var(--accent); }
.run-summary dl { display: flex; gap: 28px; margin: 18px 0; }
.run-summary dt { color: var(--muted); font-size: 11px; }
.run-summary dd { margin: 5px 0 0; font: 25px var(--mono); }
.sidebar { padding: 0 23px; background: #151d18; }
.side-section { min-width: 0; padding: 22px 0; }
.side-section + .side-section { border-top: 1px solid #2d3c31; }
#goal { font-size: 12px; line-height: 1.95; color: #c0ccbf; margin-top: 13px; }
.catch-counter { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.catch-counter > span { color: #a1b09f; font-size: 12px; }
.catch-counter strong { font: 24px var(--mono); color: #d0dfc6; }
.catch-counter small { font-size: 13px; color: #7e917e; }
.catch-counts { display: grid; gap: 8px; margin: 18px 0 0; font-size: 11px; }
.catch-counts > div { display: flex; justify-content: space-between; }
.catch-counts dt { color: #93a48f; }
.catch-counts dd { color: #c1ccba; margin: 0; font-family: var(--mono); }
@media (min-width: 761px) and (max-width: 980px) {
  .cabinet { grid-template-columns: minmax(0, 1fr) 220px; }
  #board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .piece { grid-template-columns: 1fr; }
  .piece svg { grid-row: auto; }
}
@media (max-width: 760px) {
  .cabinet { grid-template-columns: minmax(0, 1fr); }
  .play-area { border-right: 0; }
  .mobile-goal { display: block; padding: 13px 15px; background: #1b261e; border-bottom: 1px solid var(--border); font-size: 12px; }
  .board-wrap { min-height: 260px; }
  .sidebar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding: 0 16px; border-top: 1px solid var(--border); }
  .mission-panel { display: none; }
  .side-section + .side-section { border-top: 0; }
}

.locale-nav { display: flex; gap: 10px; font-size: 11px; color: var(--muted); }
.locale-nav [aria-current="page"] { color: var(--text); }

/* Keep original log order and TAB boundaries visible. */
.raw-data { columns: auto; line-height: 1.35; white-space: pre-wrap; }
.invariant { color: var(--muted); font-size: 10px; margin-top: 6px; }
.rows .piece-name { white-space: pre-wrap; tab-size: 6; }
.level-bar > div:first-child { flex-wrap: wrap; gap: 4px 10px; }
@media (max-width: 760px) {
  .game-heading { padding: 18px 0 12px; }
  .site-header { min-height: 58px; }
  .board-wrap { min-height: 0; padding-block: 10px; }
  .board-caption { margin-bottom: 8px; }
  .piece { padding: 6px; }
  .piece svg { width: 32px; height: 24px; margin: 0; }
  .editor { padding-block: 12px; }
  .command-shell input { font-size: 16px; }
  .terminal-history { max-height: 160px; }
  .terminal .command-row { flex-wrap: nowrap; align-items: center; }
  .terminal .command-shell { flex-basis: auto; }
  .terminal #run { width: auto; padding-inline: 12px; }
  .rows .piece { padding: 3px 6px; }
  .back-link { font-size: 10px; }
}
@media (max-width: 390px) {
  .terminal-history { max-height: 120px; }
}