.painting-practice,.painting-print{--painting-mark:#fff;--painting-mark-edge:#0c1410b8;--painting-check:#17634c;--painting-hint:#ffd84d;--painting-cursor:#7fd3ff}.painting-practice .painting-stage{padding-bottom:20px}.painting-example{text-align:center;max-width:420px;margin:0 auto}.painting-example svg{width:100%;height:auto;max-height:220px;margin:0 auto 8px;display:block}.painting-example figcaption{font-size:.875rem;line-height:1.45}.painting-practice .painting-choice{align-content:start;gap:8px;display:grid}.painting-practice .practice-setting>.painting-choice-label{color:var(--ink);margin:0;font-size:.875rem;font-weight:650;line-height:1.5}.painting-choice-slot{min-width:0;display:grid}.painting-choice-slot>.painting-choice-card{grid-area:1/1}.painting-choice-reservation{visibility:hidden;pointer-events:none}.painting-choice-card{border:1px solid var(--control-border);background:var(--card);border-radius:12px;align-items:center;gap:12px;min-width:0;padding:10px;display:flex}.painting-choice-image{object-fit:cover;background:var(--soft);border-radius:6px;flex:none;width:6.5rem;height:4.75rem}.painting-choice-text{gap:2px;min-width:0;display:grid}.painting-choice-text p{overflow-wrap:anywhere;margin:0;line-height:1.4}.painting-choice-note{color:var(--muted);font-size:.8125rem}.painting-choice-title{color:var(--ink);font-size:1rem;font-weight:650}.painting-choice-credit{color:var(--muted);font-size:.875rem}.painting-choice-actions{flex-wrap:wrap;gap:8px;display:flex}.painting-choice-actions .btn{flex:9rem;width:auto;min-height:44px}.painting-board{gap:16px;margin-top:12px;display:grid}.painting-view{min-width:0}.painting-frame{--painting-w:4;--painting-h:3;aspect-ratio:var(--painting-w) / var(--painting-h);width:min(100%, calc((100svh - 10rem) * var(--painting-w) / var(--painting-h)));touch-action:manipulation;background:#1d1f1d;border-radius:6px;margin:0 auto;position:relative;overflow:hidden;box-shadow:0 1px 3px #00000040}.painting-canvas{transform-origin:0 0;transition:transform .24s ease-out;position:absolute;inset:0}.painting-image{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none;width:100%;height:100%;display:block}.painting-marks{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.painting-ring-edge{stroke:var(--painting-mark-edge)}.painting-ring{stroke:var(--painting-mark)}.painting-ring-hint{stroke:var(--painting-hint)}.painting-ring-cursor{stroke:var(--painting-cursor);fill:none}.painting-area-fill{fill:#ffd84d29}.painting-check-disc{fill:var(--painting-check);stroke:var(--painting-mark)}.painting-check{stroke:var(--painting-mark)}.painting-number-disc{fill:var(--painting-mark);stroke:var(--painting-mark-edge)}.painting-number{fill:#1f2a24;font-family:inherit}.painting-surface{z-index:1;cursor:crosshair;touch-action:manipulation;-webkit-tap-highlight-color:transparent;position:absolute;inset:0}.painting-surface:focus{outline:none}.painting-surface:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}.painting-frame[data-magnifier=true]:not([data-zoomed=true]) .painting-surface{cursor:zoom-in}.painting-miss{z-index:2;color:#fff;white-space:nowrap;pointer-events:none;background:#141816d6;border-radius:999px;margin:0;padding:4px 12px;font-size:.9375rem;font-weight:600;line-height:1.4;position:absolute;transform:translate(-50%,-140%)}.painting-miss-shown{animation:1.4s ease-out forwards painting-miss}@keyframes painting-miss{0%,70%{opacity:1}to{opacity:0}}.painting-zoom-note{z-index:2;top:8px;color:#fff;pointer-events:none;background:#141816db;border-radius:10px;width:fit-content;max-width:calc(100% - 16px);margin:0;padding:6px 12px;font-size:.9375rem;font-weight:600;line-height:1.4;position:absolute;inset-inline:8px}.painting-practice .painting-whole{z-index:3;top:8px;width:auto;max-width:calc(100% - 16px);min-height:44px;margin:0;position:absolute;inset-inline-start:8px;box-shadow:0 2px 8px #00000059}.painting-credit{color:var(--muted);text-align:center;overflow-wrap:anywhere;margin:8px 0 0;font-size:.8125rem;line-height:1.5}.painting-credit a{color:inherit;text-underline-offset:var(--underline-offset)}.painting-tools{gap:8px;margin:12px 0 0}.painting-tools .btn{justify-content:center;align-items:center;gap:8px;min-height:48px;display:inline-flex}.painting-tools .painting-magnifier[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--accent)}.painting-load-error{color:var(--ink);font-weight:600}.painting-side{min-width:0}.painting-list-heading{margin:0 0 8px;font-size:1.0625rem}.painting-list{gap:6px;margin:0;padding:0;list-style:none;display:grid}.painting-row-button{border:1px solid var(--line);background:var(--card);width:100%;min-height:48px;color:var(--ink);font:inherit;text-align:start;cursor:pointer;border-radius:12px;align-items:center;gap:10px;padding:8px 12px;font-size:1.0625rem;line-height:1.35;display:flex}.painting-row-button:hover{border-color:var(--control-border)}.painting-row-button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.painting-row-button[aria-pressed=true]{border-color:var(--accent);background:var(--card);box-shadow:inset 0 0 0 2px var(--accent)}.painting-row-name{overflow-wrap:anywhere;flex:auto;min-width:0}.painting-row-chosen{color:var(--muted);margin-top:2px;font-size:.875rem;font-weight:600;display:block}.painting-row-state:not(.board-sr){color:var(--muted);flex:none;font-size:.875rem}.painting-row-mark{margin-inline-start:auto}.painting-row-button[data-answer-state=correct] .painting-row-name{font-weight:600}.painting-row-button[data-answer-state=neutral] .painting-row-name{color:var(--muted)}.painting-cutout{border:1px solid var(--line);background-color:var(--soft);background-repeat:no-repeat;border-radius:8px;flex:none;width:3.5rem;height:3.5rem}.painting-count{padding:8px 4px 2px}.painting-count-options{flex-wrap:wrap;gap:8px;display:flex}.painting-count-option{border:1px solid var(--control-border);background:var(--card);min-width:3.25rem;min-height:48px;color:var(--ink);font:inherit;cursor:pointer;border-radius:12px;justify-content:center;align-items:center;gap:6px;padding:6px 12px;font-size:1.125rem;font-weight:650;display:inline-flex}.painting-count-option:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.painting-count-option:disabled{cursor:default;opacity:1}.painting-count-verdict{margin:8px 0 0;font-size:.9375rem}.painting-finished{margin:20px 0 0}.painting-finished-frame{width:min(100%,44rem);margin:0 auto;position:relative}.painting-finished-frame img{border-radius:6px;width:100%;height:auto;display:block}.painting-finished .painting-credit{text-align:center}.painting-finished-list{gap:6px;max-width:44rem;margin:14px auto 0;padding:0;list-style:none;display:grid}.painting-finished-list li{border-radius:10px;align-items:center;gap:10px;padding:8px 12px;font-size:1rem;line-height:1.4;display:flex}.painting-finished-list li[data-answer-state=neutral] [data-answer-mark]{border:2px dashed var(--line);background:0 0;display:inline-flex}.painting-result-print{max-width:44rem;margin:12px auto 0}.painting-result-print .btn{width:auto}@media (width<=30em){.painting-board .painting-view{margin-inline:-10px}.painting-frame{border-radius:4px}}@media (width>=56em){.painting-board{grid-template-columns:minmax(0,1fr) minmax(15rem,21rem);align-items:start;gap:24px}.painting-side{position:sticky;top:16px}}@media (prefers-reduced-motion:reduce){.painting-canvas{transition:none}.painting-miss-shown{animation:none}}.painting-print{display:none}@media print{html.painting-printing body>:not(#painting-print-sheet){display:none!important}html.painting-printing body{background:#fff!important;min-height:0!important}html.painting-printing .painting-print{color:#1f2a24;-webkit-print-color-adjust:exact;print-color-adjust:exact;font-family:Figtree,Apple SD Gothic Neo,Malgun Gothic,Hiragino Sans,Yu Gothic,sans-serif;display:block}.painting-print-sheet{break-after:page;page-break-after:always;flex-direction:column;height:236mm;display:flex;overflow:hidden}.painting-print-sheet:last-child{break-after:auto;page-break-after:auto}.painting-print-head{border-bottom:1px solid #b8c2b8;justify-content:space-between;align-items:baseline;gap:8mm;margin-bottom:4mm;padding-bottom:2.5mm;font-size:11pt;display:flex}.painting-print-head strong{color:#17634c;font-size:14pt}.painting-print h1{margin:0 0 1mm;font-size:22pt;line-height:1.15}.painting-print h2{margin:0 0 1mm;font-size:20pt;line-height:1.15}.painting-print-credit{color:#3c4a40;margin:0 0 3mm;font-size:10pt}.painting-print-help{margin:0 0 4mm;font-size:13pt}.painting-print-body{flex-direction:column;flex:auto;gap:5mm;min-height:0;display:flex}.painting-print-figure{flex:auto;min-height:60mm;max-height:130mm;position:relative}.painting-print-figure img{object-fit:contain;object-position:center top;width:100%;height:100%;display:block;position:absolute;inset:0}.painting-print-figure .painting-marks{width:100%;height:100%;position:absolute;inset:0}.painting-print-list{flex:none;grid-template-columns:1fr 1fr;gap:3mm 8mm;margin:0;padding:0;font-size:18pt;line-height:1.3;list-style:none;display:grid}.painting-print-list li{break-inside:avoid;align-items:baseline;gap:2.5mm;display:flex}.painting-print-list strong{flex:none;min-width:6mm}.painting-print-box{border:.5mm solid #1f2a24;border-radius:1mm;flex:none;align-self:flex-start;width:6mm;height:6mm;margin-top:calc(.65em - 3mm);display:inline-block}.painting-print-text{flex:auto;min-width:0}.painting-print-portrait .painting-print-body{flex-direction:row;align-items:stretch}.painting-print-portrait .painting-print-figure{flex:none;width:96mm;max-height:none}.painting-print-portrait .painting-print-list{flex:auto;grid-template-columns:1fr;align-content:start}.painting-print-sheet+.painting-print-sheet .painting-print-list{font-size:14pt}.painting-print-foot{color:#53634f;flex:none;margin-top:3mm;font-size:10pt}}
