:root{--bg:#f5f2ea;--paper:#fffdf8;--ink:#1d1d1d;--muted:#716d65;--line:#d9d4ca;--red:#d94343;--shadow:0 10px 30px rgba(28,24,18,.10)}*{box-sizing:border-box}html{background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif}body{margin:0;min-height:100vh;background:linear-gradient(rgba(60,55,45,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(60,55,45,.025) 1px,transparent 1px),var(--bg);background-size:24px 24px}button,input{font:inherit}.topbar{position:sticky;top:0;z-index:20;min-height:64px;padding:8px max(14px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:rgba(255,253,248,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.topbar>:last-child{justify-self:end}.brand{text-align:center}.brand strong{display:block;letter-spacing:.12em}.brand span{font-size:10px;color:var(--muted);letter-spacing:.18em}.screen{display:none}.screen.active{display:block}main{width:min(1120px,100%);margin:auto;padding:20px max(12px,env(safe-area-inset-left)) 50px}.intro,.final-answer-card,.problem-panel,.input-panel{background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:18px}.intro{padding:18px 20px;margin-bottom:16px}.intro h1{margin:0 0 4px;letter-spacing:.1em}.intro p{margin:0;color:var(--muted);line-height:1.7}.problem-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.problem-card{position:relative;border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:0;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.07);cursor:pointer}.problem-card img{display:block;width:100%;height:auto;object-fit:contain}.problem-card span{position:absolute;left:7px;top:6px;min-width:28px;padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.92);font-weight:800;font-size:12px;border:1px solid var(--line)}.final-answer-card{max-width:620px;margin:22px auto 0;padding:18px;display:grid;gap:10px}.final-answer-card label{font-weight:800}.final-answer-card input{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:white;font-size:16px}.primary,.ghost,.mode,.number-key{border-radius:10px;min-height:42px;cursor:pointer}.primary{border:1px solid #222;background:#222;color:#fff;font-weight:800;padding:10px 18px}.ghost{border:1px solid var(--line);background:var(--paper);padding:8px 12px}.hidden{display:none!important}.feedback{margin:0;min-height:1.5em;text-align:center;font-weight:800}.feedback.error{color:#b42318}.detail-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,.6fr);gap:18px}.problem-panel,.input-panel{padding:16px}.problem-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:12px}.problem-head h2{margin:0;font-size:30px}.problem-head span{color:var(--muted)}.image-stage{position:relative;width:100%;background:white;border:1px solid var(--line);overflow:hidden}.image-stage>img{width:100%;height:100%;display:block;object-fit:fill}.red-frame{position:absolute;transform:translate(-50%,-50%);border:3px solid var(--red);background:rgba(255,255,255,.72);padding:0;display:flex;align-items:center;justify-content:center;color:#111;overflow:visible}.red-frame.selected{outline:3px solid rgba(40,105,255,.8);outline-offset:2px}.red-frame strong{font-size:clamp(15px,4vw,32px)}.red-frame small{font-size:clamp(8px,1.5vw,14px);line-height:1.1}.frame-id{position:absolute;left:-2px;top:-18px;font-size:10px;font-weight:800;color:var(--red);white-space:nowrap}.selected-box{border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:2px}.selected-box span,.selected-box small{color:var(--muted)}.selected-box strong{font-size:25px}.mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.mode{border:1px solid var(--line);background:#fff}.mode.active{border-color:#222;background:#222;color:#fff}.number-pad{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.number-key{border:1px solid var(--line);background:white;display:grid;place-items:center;padding:4px}.number-key strong{font-size:20px}.number-key small{font-size:9px;color:var(--muted);min-height:1em}.number-key.used{background:#e6e4df;color:#888}.number-key.active,.number-key.candidate-active{outline:2px solid #2f6fed}.number-refs{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;margin-top:8px}.number-refs div{display:flex;gap:8px;padding:5px 7px;background:#f3f1eb;border-radius:6px}.modal-backdrop{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:18px}.modal{position:relative;width:min(500px,100%);background:var(--paper);border-radius:20px;padding:32px 22px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.3)}.modal-close{position:absolute;right:10px;top:10px;border:0;background:transparent;font-size:26px}.clear-mark{width:72px;height:72px;margin:auto;border-radius:50%;display:grid;place-items:center;background:#222;color:white;font-size:42px}.modal h2{letter-spacing:.06em}.modal-actions{display:flex;justify-content:center;gap:10px;margin-top:22px}.link-button{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.result-modal p{font-size:18px;font-weight:700}@media(max-width:720px){main{padding-top:12px}.intro{padding:14px}.intro p{font-size:13px}.problem-grid{gap:4px}.problem-card{border-radius:6px}.problem-card span{left:3px;top:3px;min-width:auto;padding:2px 5px;font-size:9px}.detail-layout{grid-template-columns:1fr}.problem-panel,.input-panel{padding:10px}.input-panel{margin-bottom:env(safe-area-inset-bottom)}.number-pad{grid-template-columns:repeat(5,1fr)}.topbar{min-height:56px}.brand strong{font-size:15px}.ghost{padding:6px 8px;font-size:12px}.modal-actions{flex-direction:column}.link-button{width:100%}}


/* v7 digit image support */
.red-frame{display:flex;align-items:center;justify-content:center;padding:0;overflow:visible}
.fixed-digit-wrap,.number-key-digit{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.frame-digit-image{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.key-digit-image{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.digit-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:800;font-size:clamp(15px,4vw,32px)}
.candidate-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;width:100%;height:100%;padding:2px}
.candidate-digit-image{display:block;width:100%;height:100%;object-fit:contain;min-width:0;min-height:0;pointer-events:none}
.candidate-placeholder{display:block;width:100%;height:100%}
.number-key{grid-template-rows:1fr auto;padding:6px 4px;overflow:hidden}
.number-key-digit{min-height:44px;aspect-ratio:1 / 1;max-width:100%;justify-self:center}
.number-key strong{display:none}
.red-frame strong,.red-frame small{display:none}
.number-key small{display:block;margin-top:2px;font-size:9px;color:var(--muted);min-height:1em;text-align:center;line-height:1.1}
.red-frame .digit-fallback{font-size:clamp(14px,4vw,28px)}


.top-actions{display:flex;justify-content:flex-end;gap:7px}

.hint-backdrop{
  position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);
  display:grid;place-items:center;padding:18px
}
.hint-modal{
  position:relative;width:min(560px,100%);max-height:min(86svh,760px);overflow:auto;
  background:var(--paper);border:1px solid var(--line);border-radius:20px;
  padding:26px 22px 20px;box-shadow:0 24px 70px rgba(0,0,0,.3)
}
.hint-modal h2{margin:0 48px 14px 0}
.hint-body{min-height:90px;line-height:1.8}
.hint-body p{margin:.5em 0}
.hint-actions{display:grid;gap:8px;margin:14px 0}
.hint-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted)}
.hint-nav button:disabled{opacity:.4;cursor:default}

@media(max-width:600px){
  .top-actions{gap:4px}
  .top-actions .ghost{padding:7px 8px;font-size:12px}
  .hint-modal{padding:22px 16px 16px;border-radius:16px}
}