:root{--ink:#17231f;--muted:#64746d;--paper:#fffefa;--bg:#edf2ed;--green:#12372a;--green2:#1f5b44;--mint:#dcecdf;--gold:#d89a2b;--red:#ba4538;--line:#d7dfd9;--shadow:0 12px 34px rgba(24,52,41,.09);font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}body{margin:0;background:linear-gradient(160deg,#e5eee7 0,#f6f5ef 52%,#e9f1eb 100%);min-height:100vh}button,select{font:inherit}.app-shell{width:min(100%,900px);min-height:100vh;margin:auto;background:rgba(249,250,246,.92);box-shadow:0 0 70px rgba(21,50,38,.12);padding-bottom:88px}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:rgba(18,55,42,.96);color:white;backdrop-filter:blur(12px)}.brand{display:flex;gap:11px;align-items:center;background:none;border:0;color:white;text-align:left;padding:0;cursor:pointer}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.6);border-radius:13px;font-family:serif;font-size:22px}.brand small,.brand strong{display:block}.brand small{font-size:11px;letter-spacing:.18em;opacity:.72}.brand strong{font-size:17px;letter-spacing:.04em}.round-button{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);color:white;font-size:21px;cursor:pointer}main{padding:22px 18px 34px}.hero{position:relative;overflow:hidden;padding:32px 25px;background:var(--green);color:white;border-radius:26px;box-shadow:var(--shadow)}.hero:after{content:"";position:absolute;width:240px;height:240px;right:-95px;top:-105px;border:1px solid rgba(255,255,255,.18);border-radius:50%;box-shadow:0 0 0 34px rgba(255,255,255,.035),0 0 0 70px rgba(255,255,255,.025)}.eyebrow{margin:0 0 8px;text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:700;color:#b9d7c6}.hero h1{position:relative;z-index:1;margin:0;font-family:serif;font-size:clamp(28px,6vw,46px);line-height:1.28;letter-spacing:.03em}.hero p{position:relative;z-index:1;max-width:540px;line-height:1.9;color:#dceae2}.primary,.secondary,.period-button,.mode-tab{border:0;border-radius:14px;padding:14px 17px;font-weight:700;cursor:pointer;transition:.18s transform,.18s background}.primary{background:var(--gold);color:#261b05;box-shadow:0 7px 18px rgba(216,154,43,.25)}.primary:hover,.secondary:hover,.period-button:hover{transform:translateY(-1px)}.primary:disabled,.secondary:disabled{opacity:.42;cursor:not-allowed;transform:none}.secondary{background:#fff;border:1px solid var(--line);color:var(--green)}.wide{width:100%}.hero .primary{margin-top:10px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}.stat{padding:16px 9px;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:18px}.stat strong{display:block;font-family:serif;color:var(--green);font-size:25px}.stat span{font-size:11px;color:var(--muted)}.section-title{margin:28px 4px 12px;font-size:19px}.card{padding:20px;background:var(--paper);border:1px solid var(--line);border-radius:21px;box-shadow:0 7px 24px rgba(26,53,43,.055);margin-bottom:14px}.card h2,.card h3{margin-top:0}.muted{color:var(--muted);font-size:14px;line-height:1.7}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.quick{min-height:110px;text-align:left}.quick span{display:block;margin-top:8px;font-size:12px;font-weight:400;color:var(--muted);line-height:1.5}.mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:5px;background:#e4ebe5;border-radius:17px;margin-bottom:16px}.mode-tab{background:transparent;color:var(--muted)}.mode-tab.active{background:white;color:var(--green);box-shadow:0 3px 10px rgba(32,59,47,.1)}.period-list{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.period-button{background:#f5f7f3;border:1px solid var(--line);color:var(--ink)}.period-button.selected{background:var(--green);border-color:var(--green);color:white}.selector-label{display:block;margin:21px 2px 10px;font-size:13px;font-weight:700;color:var(--muted)}.checks{display:grid;gap:9px}.check-card{position:relative;display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:15px;background:#f9faf7;cursor:pointer}.check-card input{width:20px;height:20px;accent-color:var(--green)}.check-card span{font-size:14px;font-weight:700;line-height:1.35}.check-card:has(input:checked){background:var(--mint);border-color:#94b6a1}.action-stack{display:grid;gap:9px;margin-top:19px}.session-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}.session-head h2{font-size:19px;margin:0}.pill{display:inline-block;padding:6px 9px;border-radius:99px;background:var(--mint);color:var(--green);font-size:11px;font-weight:800}.progress{height:7px;background:#dfe6e0;border-radius:99px;overflow:hidden;margin:12px 0 17px}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--green2),#76a886);border-radius:inherit}.question-card{padding:13px}.image-stack{display:grid;gap:10px}.question-image{display:block;width:100%;height:auto;border:1px solid #e0e2dc;border-radius:11px;background:white}.answer-panel{padding:17px 4px 5px}.subquestion{padding:13px 0;border-bottom:1px solid var(--line)}.subquestion:last-child{border:0}.subhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.kana{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--green);color:white;font-weight:800}.answer-status{font-size:12px;font-weight:700}.answer-status.ok{color:var(--green2)}.answer-status.no{color:var(--red)}.choices{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.choice{aspect-ratio:1;border:1px solid var(--line);border-radius:11px;background:white;color:var(--ink);font-weight:800;cursor:pointer}.choice.selected{background:var(--green);border-color:var(--green);color:white}.choice.correct{background:#cde8d2;border-color:#55976b;color:#174c2a}.choice.wrong{background:#f3d1cc;border-color:#d16b5d;color:#842e23}.feedback{padding:13px;border-radius:13px;margin:13px 0 4px;font-size:14px;font-weight:700}.feedback.ok{background:#dcefe0;color:#1d5c32}.feedback.no{background:#f7ded9;color:#8d3025}.pager{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.number-strip{display:flex;gap:6px;overflow:auto;padding:4px 1px 10px;scrollbar-width:thin}.number-strip button{flex:0 0 37px;height:37px;border-radius:10px;border:1px solid var(--line);background:white;font-size:12px;font-weight:700}.number-strip button.now{background:var(--green);color:white}.number-strip button.done{background:var(--mint);border-color:#88aa94}.result-score{text-align:center;padding:12px}.result-score .big{font:700 55px serif;color:var(--green)}.result-score .pass{color:#2c7a46}.result-score .fail{color:var(--red)}.subject-result{display:grid;grid-template-columns:1fr auto;gap:5px;padding:14px 0;border-bottom:1px solid var(--line)}.subject-result:last-child{border:0}.subject-result strong{font-size:14px}.subject-result b{font-size:20px;color:var(--green)}.history-item{display:flex;justify-content:space-between;gap:14px}.history-item strong{display:block}.history-item time{white-space:nowrap;font-size:12px;color:var(--muted)}.empty{text-align:center;padding:38px 20px;color:var(--muted)}.bottom-nav{position:fixed;z-index:30;bottom:0;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(3,1fr);width:min(100%,900px);padding:8px max(12px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,252,.96);border-top:1px solid var(--line);backdrop-filter:blur(14px)}.bottom-nav button{border:0;background:none;color:#7d8a84;font-size:10px;font-weight:700;padding:4px}.bottom-nav button span{display:block;font-size:20px;line-height:1.2}.bottom-nav button.active{color:var(--green)}select{width:100%;padding:13px;border:1px solid var(--line);border-radius:13px;background:white;color:var(--ink)}@media(max-width:520px){main{padding:16px 12px 28px}.topbar{padding:11px 14px}.brand strong{font-size:15px}.hero{padding:26px 20px}.stats{gap:6px}.stat strong{font-size:21px}.period-list{grid-template-columns:1fr}.quick-grid{grid-template-columns:1fr}.choices{gap:5px}.choice{border-radius:9px}.question-card{padding:8px}.card{border-radius:17px;padding:17px}.question-card{padding:8px}}
.question-crop{position:relative;overflow:hidden;width:100%;border:1px solid #e0e2dc;border-radius:11px;background:white}.question-crop .question-image{border:0;border-radius:0;transform:translateY(calc(-1 * var(--crop-top)))}.grade-button{margin-top:15px}.sub-number{font-family:serif;color:var(--green2)}.pass{color:#2c7a46!important}.fail{color:var(--red)!important}.history-scores{display:grid;gap:5px;margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}.history-scores span{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted)}.history-item>div:last-child{display:grid;gap:3px}.history-item small{display:block}
@media(max-width:520px){main{padding-left:8px;padding-right:8px}.question-card{margin-left:-2px;margin-right:-2px;padding:5px!important;border-radius:14px}.answer-panel{padding-left:8px;padding-right:8px}.session-head{padding:0 4px}}
.question-area{overflow:hidden;width:100%;border-radius:11px;background:white}
.question-area.scrollable-question{overscroll-behavior:contain;scrollbar-color:#789588 #eef2ed;scrollbar-width:thin}.question-area.scrollable-question::-webkit-scrollbar{width:7px}.question-area.scrollable-question::-webkit-scrollbar-thumb{background:#789588;border-radius:10px}.question-area.scrollable-question::-webkit-scrollbar-track{background:#eef2ed}
.question-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:0 2px 9px;color:var(--muted);font-size:12px;font-weight:700}.zoom-button{padding:8px 13px;border-radius:11px}.zoom-button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:white}
@media(max-width:520px){.question-area{min-height:0;border:1px solid #e0e2dc}.question-area .question-crop{min-height:0!important;border:0;border-radius:0;overflow:hidden}.question-area .question-image{width:100%;max-width:none;transform-origin:top left}}
@media(max-width:520px){.answer-panel{padding-top:9px;padding-bottom:2px}.answer-panel h3{margin-bottom:8px;font-size:18px}.answer-panel .feedback{padding:9px 11px;margin-top:8px}.session-pager{margin-top:8px}}
@media print{.topbar,.bottom-nav,.answer-panel,.pager,.number-strip,.image-tools{display:none}.app-shell{box-shadow:none}.question-image{break-inside:avoid}}