/*
 * 가나 받아쓰기 공통 스타일. 가타카나·히라가나 두 페이지가 함께 쓴다.
 * 종이 연습장: 따뜻한 종이색, 먹색 글자, 채점할 때만 쓰는 주홍 펜.
 */

:root {
    color-scheme: light dark;

    --c-paper: #f6f2e9;
    --c-surface: #fdfbf6;
    --c-hover: #efe9dd;
    --c-pressed: #e4dccd;
    --c-disabled-bg: #ebe5d9;
    --c-text: #22201c;
    --c-text-muted: #635b50;
    --c-line: #e0d9cb;
    --c-line-strong: #857c6e;
    --c-primary-bg: #22201c;
    --c-primary-bg-hover: #3b3731;
    --c-primary-bg-active: #0f0e0c;
    --c-primary-fg: #fdfbf6;
    --c-focus: #22201c;
    --c-accent: #b8401e;
    --c-pass: #2e6a3c;
    --c-partial: #8c5a12;

    /* 쓰기 칸은 다크 모드에서도 종이색 그대로 둔다. */
    --canvas-paper: #fffdf8;
    --canvas-guide: #d8cfbf;
    --canvas-pass: #2e6a3c;
    --canvas-partial: #8c5a12;
    --canvas-fail: #b8401e;

    --font-ui: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕",
        "Noto Sans KR", "Noto Sans CJK KR", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* 명조 계열을 먼저 찾고, 없으면 고딕으로 보여 준다. */
    --font-question: "Noto Serif KR", "Noto Serif CJK KR", "Source Han Serif K", "Nanum Myeongjo", "나눔명조",
        AppleMyungjo, "Batang", "바탕", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
    --font-mono: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;

    --fs-caption: 12px;
    --fs-small: 13px;
    --fs-body: 14px;
    --fs-lead: 16px;
    --fs-title: 17px;
    --fs-label: 20px;
    --fs-question-compact: 26px;
    --fs-question: 40px;

    --radius-s: 4px;
    --radius-m: 6px;
    --radius-l: 8px;

    --gutter-l: max(12px, env(safe-area-inset-left, 0px));
    --gutter-r: max(12px, env(safe-area-inset-right, 0px));
    --control-h: 44px;
    --tab-h: 36px;
    --dur-ui: 120ms;
    --dur-mark: 320ms;

    /* 채점 기호: 손으로 그린 ○ △ ✕. 모양만 쓰고 색은 background-color로 칠한다. */
    --mark-pass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M28.5 8.2C25.9 6.4 22.8 5.5 19.5 5.8 11.7 6.4 5.7 13.2 6.3 21c.6 7.8 7.4 13.6 15.2 13 7.8-.6 13.4-7.4 12.8-15.2-.2-2.9-1.2-5.5-2.9-7.6' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
    --mark-partial: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M19.6 6.8 34 32.6 5.8 33.2 18.4 8.9' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --mark-fail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M9.5 9.8 30.8 31.2M31.2 9 8.8 31.4' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
    :root {
        --c-paper: #1b1916;
        --c-surface: #24211d;
        --c-hover: #2f2b26;
        --c-pressed: #3a352f;
        --c-disabled-bg: #2c2824;
        --c-text: #ece6da;
        --c-text-muted: #b1a898;
        --c-line: #3a352f;
        --c-line-strong: #8a8174;
        --c-primary-bg: #ece6da;
        --c-primary-bg-hover: #d9d2c4;
        --c-primary-bg-active: #fdfbf6;
        --c-primary-fg: #1b1916;
        --c-focus: #ece6da;
        --c-accent: #f0825f;
        --c-pass: #86c28e;
        --c-partial: #d9a74e;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

[hidden],
.is-hidden {
    display: none !important;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--c-paper);
    color: var(--c-text);
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    line-height: 1.45;
    -webkit-tap-highlight-color: transparent;
}

button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-m);
    background: transparent;
    color: var(--c-text);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--dur-ui), border-color var(--dur-ui), color var(--dur-ui);
}

button:disabled {
    cursor: not-allowed;
}

:focus-visible {
    outline: 2px solid var(--c-focus);
    outline-offset: 2px;
}

.icon {
    flex: none;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- 상단 바: 제목 · 가나 전환 · 연습 방식 ---------- */

.top-bar {
    padding: calc(8px + env(safe-area-inset-top, 0px)) var(--gutter-r) 8px var(--gutter-l);
    border-bottom: 1px solid var(--c-line);
}

.top-bar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    max-width: 960px;
    margin: 0 auto;
}

.app-title {
    margin: 0 auto 0 0;
    font-size: var(--fs-lead);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.kana-switch {
    display: flex;
    gap: 2px;
}

.kana-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tab-h);
    padding: 0 10px;
    border-radius: var(--radius-m) var(--radius-m) 0 0;
    color: var(--c-text-muted);
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--dur-ui), color var(--dur-ui);
}

.kana-link:hover {
    background: var(--c-hover);
    color: var(--c-text);
}

.kana-link[aria-current="page"] {
    color: var(--c-text);
    box-shadow: inset 0 -2px 0 currentColor;
}

.mode-switch {
    display: flex;
    flex: 1 1 100%;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-m);
    background: var(--c-surface);
}

.mode-btn {
    flex: 1 1 0;
    min-height: var(--tab-h);
    padding: 0 12px;
    border: 0;
    border-radius: var(--radius-s);
    white-space: nowrap;
}

.mode-btn:hover:not(.is-active) {
    background: var(--c-hover);
}

.mode-btn:active:not(.is-active) {
    background: var(--c-pressed);
}

.mode-btn.is-active {
    background: var(--c-primary-bg);
    color: var(--c-primary-fg);
}

/* ---------- 본문 틀 ---------- */

.test-container {
    /* 한 자 모드에서 캔버스를 뺀 나머지 높이의 합. 캔버스 크기는 뷰포트로만 정한다. */
    --reserve: 366px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: calc(max(320px, min(480px, 100vh - var(--reserve))) + var(--gutter-l) + var(--gutter-r));
    max-width: calc(max(320px, min(480px, 100svh - var(--reserve))) + var(--gutter-l) + var(--gutter-r));
    margin: 0 auto;
    padding: 12px var(--gutter-r) 0 var(--gutter-l);
}

.test-container.is-row,
.test-container.is-chart {
    max-width: calc(960px + var(--gutter-l) + var(--gutter-r));
}

/* ---------- 문제 줄: 이전 · 진행/문제 · 다음 ---------- */

.question-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.question-stack {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    text-align: center;
}

.nav-group {
    display: contents;
}

#prevBtn {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
}

#nextBtn {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
}

.progress {
    min-height: 16px;
    color: var(--c-text-muted);
    font-size: var(--fs-caption);
    line-height: 16px;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

.question-box {
    font-family: var(--font-question);
    font-size: var(--fs-question);
    font-weight: 500;
    line-height: 1.1;
}

.question-box.compact {
    font-size: var(--fs-question-compact);
    line-height: 1.25;
}

.btn-nav {
    padding: 0 10px;
    color: var(--c-text-muted);
}

.btn-nav:hover:not(:disabled) {
    background: var(--c-hover);
    color: var(--c-text);
}

.btn-nav:active:not(:disabled) {
    background: var(--c-pressed);
}

.btn-nav:disabled {
    opacity: 0.35;
}

.board-hint {
    display: none;
    margin: 0;
    color: var(--c-text-muted);
    font-size: var(--fs-caption);
    text-align: center;
}

.test-container.is-row .board-hint,
.test-container.is-chart .board-hint {
    display: block;
}

/* ---------- 쓰기 칸 ---------- */

.canvas-area {
    align-self: center;
    width: min(100%, max(200px, 100vh - var(--reserve) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    width: min(100%, max(200px, 100svh - var(--reserve) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
}

/* 틀은 감싸는 요소가 맡고 캔버스에는 테두리를 두지 않는다. 포인터 좌표가 그리기 영역과 정확히 맞는다. */
.canvas-area,
.cell-canvas-slot {
    position: relative;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-l);
    background: var(--canvas-paper);
    transition: border-color var(--dur-ui), box-shadow var(--dur-ui);
}

/* 十자 점선 안내선은 CSS 배경이라 캔버스 비트맵과 채점 입력에는 들어가지 않는다. */
.canvas-area canvas,
.cell-canvas-slot canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: calc(var(--radius-l) - 1px);
    background-color: var(--canvas-paper);
    background-image:
        repeating-linear-gradient(to bottom, var(--canvas-guide) 0 5px, transparent 5px 10px),
        repeating-linear-gradient(to right, var(--canvas-guide) 0 5px, transparent 5px 10px);
    background-position: center, center;
    background-size: 1px 100%, 100% 1px;
    background-repeat: no-repeat;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 20.5 5 15 16.2 3.8a2 2 0 0 1 2.8 0l1.2 1.2a2 2 0 0 1 0 2.8L9 19z' fill='%23fffdf8' stroke='%2322201c' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M3.5 20.5 5 15l4 4z' fill='%2322201c'/%3E%3C/svg%3E") 3 21, crosshair;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.cell.is-active .cell-canvas-slot {
    border-color: var(--c-text);
}

.canvas-area:has(> canvas.frame-pass),
.cell.pass .cell-canvas-slot {
    border-color: var(--c-pass);
    box-shadow: 0 0 0 1px var(--c-pass);
}

.canvas-area:has(> canvas.frame-partial),
.cell.partial .cell-canvas-slot {
    border-color: var(--c-partial);
    box-shadow: 0 0 0 1px var(--c-partial);
}

.canvas-area:has(> canvas.frame-fail),
.cell.fail .cell-canvas-slot {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 1px var(--c-accent);
}

/* 채점 기호. 장식이라 보조기술에는 노출하지 않고, 결과는 글자로도 알려 준다. */
.canvas-area:has(> canvas:is(.frame-pass, .frame-partial, .frame-fail))::after,
.cell:is(.pass, .partial, .fail) .cell-canvas-slot::after {
    content: "";
    position: absolute;
    top: 6%;
    right: 6%;
    width: clamp(14px, 20%, 60px);
    aspect-ratio: 1 / 1;
    pointer-events: none;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: grade-mark var(--dur-mark) ease-out both;
}

.canvas-area:has(> canvas.frame-pass)::after,
.cell.pass .cell-canvas-slot::after {
    background-color: var(--canvas-pass);
    -webkit-mask-image: var(--mark-pass);
    mask-image: var(--mark-pass);
}

.canvas-area:has(> canvas.frame-partial)::after,
.cell.partial .cell-canvas-slot::after {
    background-color: var(--canvas-partial);
    -webkit-mask-image: var(--mark-partial);
    mask-image: var(--mark-partial);
}

.canvas-area:has(> canvas.frame-fail)::after,
.cell.fail .cell-canvas-slot::after {
    background-color: var(--canvas-fail);
    -webkit-mask-image: var(--mark-fail);
    mask-image: var(--mark-fail);
}

@keyframes grade-mark {
    from {
        clip-path: inset(0 100% 0 0);
        opacity: 0.4;
    }
    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

/* ---------- 형태·획순 표시와 정답 보기 ---------- */

.marks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 8px;
}

.mark-group {
    display: flex;
    gap: 6px;
}

.mark {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 8px;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-s);
    color: var(--c-text-muted);
    font-size: var(--fs-small);
    font-weight: 600;
    white-space: nowrap;
}

.mark.wait {
    border-style: dashed;
}

.mark.ok {
    border-color: currentColor;
    color: var(--c-pass);
}

.mark.bad {
    border-color: currentColor;
    color: var(--c-accent);
}

/* 누르고 있는 동안에만 정답을 보여 주는 버튼. 길게 누를 때 스크롤·선택·메뉴가 끼어들지 않게 한다. */
.btn-peek,
.cell-peek,
.cell-clear {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.btn-peek,
.cell-peek {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--c-line-strong);
    text-underline-offset: 4px;
}

.btn-peek {
    min-height: 36px;
    padding: 0 8px;
}

.btn-peek:hover:not(.is-holding),
.cell-peek:hover:not(.is-holding) {
    background: var(--c-hover);
}

.btn-peek.is-holding,
.cell-peek.is-holding {
    border-color: var(--c-primary-bg);
    background: var(--c-primary-bg);
    color: var(--c-primary-fg);
    text-decoration: none;
}

/* ---------- 채점 영역 ---------- */

.action-dock {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dock-buttons {
    display: flex;
    gap: 8px;
}

.dock-buttons > button {
    flex: 1 1 0;
    min-height: var(--control-h);
}

.dock-buttons > .btn-submit {
    flex-grow: 1.6;
}

.btn-clear,
.cell-clear {
    border-color: var(--c-line-strong);
    background: var(--c-surface);
}

.btn-clear:hover:not(:disabled),
.cell-clear:hover:not(:disabled) {
    background: var(--c-hover);
}

.btn-clear:active:not(:disabled),
.cell-clear:active:not(:disabled) {
    background: var(--c-pressed);
}

.btn-submit {
    border-color: var(--c-primary-bg);
    background: var(--c-primary-bg);
    color: var(--c-primary-fg);
    font-weight: 700;
}

.btn-submit:hover:not(:disabled) {
    border-color: var(--c-primary-bg-hover);
    background: var(--c-primary-bg-hover);
}

.btn-submit:active:not(:disabled) {
    border-color: var(--c-primary-bg-active);
    background: var(--c-primary-bg-active);
}

.btn-submit:disabled,
.btn-clear:disabled {
    border-color: transparent;
    background: var(--c-disabled-bg);
    color: var(--c-text-muted);
}

.feedback {
    min-height: 20px;
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.feedback.info {
    color: var(--c-text-muted);
    font-weight: 500;
}

.feedback.success {
    color: var(--c-pass);
}

.feedback.error {
    color: var(--c-accent);
}

.ai-status {
    min-height: 16px;
    color: var(--c-text-muted);
    font-size: var(--fs-caption);
    line-height: 16px;
    text-align: center;
}

.ai-status[data-state="error"] {
    color: var(--c-accent);
}

/* 준비가 끝나면 잠시 보여 준 뒤 자리를 지킨 채 흐려진다(레이아웃은 움직이지 않는다). */
.ai-status[data-state="success"] {
    color: var(--c-pass);
    animation: status-fade 600ms ease 3s forwards;
}

@keyframes status-fade {
    to {
        opacity: 0;
    }
}

/* ---------- 한 행 ---------- */

.row-board {
    width: 100%;
}

.row-grid {
    --row-gap: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px var(--row-gap);
}

.row-grid > .cell {
    flex: 0 0 calc((100% - 2 * var(--row-gap)) / 3);
}

.test-container.is-row .action-dock {
    align-self: center;
    width: min(100%, 420px);
}

/* ---------- 칸(한 행 · 50음도 공통): 글자 → 쓰기 칸 → 버튼 → 결과 ---------- */

.cell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "label" "canvas" "actions" "marks";
    align-content: start;
    gap: 6px;
    min-width: 0;
}

.cell-top {
    display: contents;
}

.cell-label {
    grid-area: label;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    font-family: var(--font-question);
    font-size: var(--fs-label);
    font-weight: 500;
    line-height: 1.2;
}

.cell-index {
    color: var(--c-text-muted);
    font-family: var(--font-ui);
    font-size: var(--fs-caption);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cell-canvas-slot {
    grid-area: canvas;
    justify-self: center;
    width: 100%;
    max-width: 220px;
}

.cell-actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.cell-actions button {
    min-height: 30px;
    padding: 0 10px;
    font-size: var(--fs-small);
}

.cell-marks {
    grid-area: marks;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.cell-marks .mark {
    min-height: 22px;
    padding: 0 6px;
    font-size: var(--fs-caption);
}

.cell-status,
.cell-coach {
    flex-basis: 100%;
    font-size: var(--fs-caption);
    text-align: center;
}

.cell-status {
    font-weight: 700;
}

.cell.pass .cell-status {
    color: var(--c-pass);
}

.cell.partial .cell-status,
.cell.fail .cell-status {
    color: var(--c-accent);
}

.cell-coach {
    color: var(--c-accent);
    line-height: 1.35;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* ---------- 50음도 ---------- */

.test-container.is-chart {
    padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
}

.chart-board {
    --chart-gap: 6px;
    width: 100%;
}

.chart-columns,
.chart-slots {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--chart-gap);
}

.chart-columns {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 0 0 10px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 0 6px;
    border-bottom: 1px solid var(--c-line);
    background: var(--c-paper);
    color: var(--c-text-muted);
    font-size: var(--fs-small);
    font-weight: 700;
    text-align: center;
}

.chart-line {
    margin: 0 0 20px;
}

.chart-name {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 8px;
    font-size: var(--fs-body);
    font-weight: 700;
    line-height: 1.3;
}

.chart-tally {
    color: var(--c-text-muted);
    font-size: var(--fs-caption);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.chart-tally.is-good {
    color: var(--c-pass);
}

.chart-tally.is-bad {
    color: var(--c-accent);
}

.chart-board .cell {
    scroll-margin-top: 56px;
    scroll-margin-bottom: 160px;
}

.chart-board .cell.is-empty {
    pointer-events: none;
}

.chart-board .cell-label {
    font-size: var(--fs-lead);
}

.chart-board .cell-canvas-slot {
    max-width: 176px;
}

.chart-board .cell-actions {
    gap: 2px;
}

.chart-board .cell-actions button {
    min-height: 26px;
    padding: 0 6px;
    font-size: var(--fs-caption);
}

.chart-board .cell-marks .mark {
    padding: 0 4px;
}

/* 50음도에서는 채점 영역을 화면 아래에 붙여 둔다. */
.test-container.is-chart .action-dock {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "buttons" "feedback" "status";
    gap: 4px;
    padding:
        10px max(var(--gutter-r), calc((100% - 960px) / 2))
        calc(10px + env(safe-area-inset-bottom, 0px)) max(var(--gutter-l), calc((100% - 960px) / 2));
    border-top: 1px solid var(--c-line-strong);
    background: var(--c-surface);
}

.test-container.is-chart .dock-buttons {
    grid-area: buttons;
}

.test-container.is-chart .feedback {
    grid-area: feedback;
    max-height: 40px;
    overflow-y: auto;
}

.test-container.is-chart .ai-status {
    grid-area: status;
}

/* ---------- 디버그: 주소에 ?debug 가 있을 때만 보인다 ---------- */

.debug-area {
    display: contents;
}

html:not([data-debug]) #debugToggle,
html:not([data-debug]) #debugPanel {
    display: none !important;
}

.btn-debug {
    align-self: center;
    min-height: 28px;
    padding: 0 8px;
    color: var(--c-text-muted);
    font-size: var(--fs-caption);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.btn-debug:hover {
    color: var(--c-text);
}

.debug-panel {
    padding: 12px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-l);
    background: var(--c-surface);
    color: var(--c-text-muted);
    font-size: var(--fs-caption);
    line-height: 1.5;
    text-align: left;
    overflow-wrap: anywhere;
}

.test-container.is-chart .debug-panel {
    max-height: 40vh;
    overflow: auto;
}

.debug-panel h3 {
    margin: 0 0 4px;
    color: var(--c-text);
    font-size: var(--fs-small);
}

.debug-panel p {
    margin: 0 0 10px;
}

.debug-block:last-child p {
    margin-bottom: 0;
}

/* ---------- 단축키 힌트: 마우스·트랙패드 환경에서만 ---------- */

[data-key-hint]::after {
    content: none;
}

@media (hover: hover) and (pointer: fine) {
    [data-key-hint]::after {
        content: attr(data-key-hint);
        content: attr(data-key-hint) / "";
        padding: 0 5px;
        border: 1px solid currentColor;
        border-radius: var(--radius-s);
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 500;
        line-height: 16px;
        opacity: 0.65;
    }

    button:disabled[data-key-hint]::after {
        content: none;
    }
}

/* ---------- 넓은 화면 ---------- */

@media (min-width: 600px) {
    .row-grid {
        --row-gap: 14px;
    }

    .row-grid > .cell {
        flex-basis: calc((100% - 4 * var(--row-gap)) / 5);
    }

    .chart-board {
        --chart-gap: 12px;
    }

    .test-container.is-chart {
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    }

    .test-container.is-chart .action-dock {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
        grid-template-areas: "feedback buttons" "status buttons";
        align-items: center;
        column-gap: 20px;
    }

    .test-container.is-chart .feedback,
    .test-container.is-chart .ai-status {
        text-align: left;
    }
}

@media (min-width: 720px) {
    :root {
        --fs-question: 44px;
    }

    .app-title {
        margin-right: 0;
        font-size: var(--fs-title);
    }

    .mode-switch {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .mode-btn {
        flex: 0 0 auto;
        min-width: 76px;
    }

    .test-container {
        --reserve: 330px;
    }
}

/* 한 자 모드, 넓은 화면: 왼쪽은 쓰기 칸, 오른쪽은 문제와 채점. 노트북에서도 칸을 크게 쓴다. */
@media (min-width: 900px) {
    :root {
        --fs-question: 52px;
    }

    .test-container:not(.is-row):not(.is-chart) {
        display: grid;
        grid-template-columns:
            min(500px, max(280px, 100vh - 120px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)))
            300px;
        grid-template-columns:
            min(500px, max(280px, 100svh - 120px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)))
            300px;
        grid-template-rows: auto auto auto 1fr;
        grid-template-areas:
            "canvas question"
            "canvas marks"
            "canvas dock"
            "canvas .";
        justify-content: center;
        align-items: start;
        gap: 16px 40px;
        max-width: calc(840px + var(--gutter-l) + var(--gutter-r));
        padding-top: 24px;
    }

    .test-container:not(.is-row):not(.is-chart) .question-row {
        grid-area: question;
    }

    .test-container:not(.is-row):not(.is-chart) .canvas-area {
        grid-area: canvas;
        align-self: start;
        width: 100%;
    }

    .test-container:not(.is-row):not(.is-chart) #singleMarks {
        grid-area: marks;
    }

    .test-container:not(.is-row):not(.is-chart) .action-dock {
        grid-area: dock;
    }

    .test-container:not(.is-row):not(.is-chart) :is(#debugToggle, #debugPanel) {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

@media (forced-colors: active) {
    .mode-btn.is-active,
    .btn-peek.is-holding,
    .cell-peek.is-holding {
        outline: 2px solid CanvasText;
        outline-offset: -2px;
    }

    .canvas-area:has(> canvas:is(.frame-pass, .frame-partial, .frame-fail))::after,
    .cell:is(.pass, .partial, .fail) .cell-canvas-slot::after {
        forced-color-adjust: none;
    }
}