@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;600;700;900&display=swap');
:root { --red:#b5232d; --dark:#161d20; --paper:#f5f2eb; --mute:#5f686a; --line:#d8d6ce; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--dark); font:16px/1.6 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,textarea { font:inherit; }
button { cursor:pointer; }
a { color:inherit; }
.topbar { width:min(1200px,calc(100% - 48px)); margin:auto; min-height:91px; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.identity { display:flex; align-items:center; gap:12px; text-decoration:none; font-size:14px; line-height:1.1; font-weight:750; letter-spacing:-.025em; }
.identity strong { font-size:18px; }
.seal { width:47px; height:47px; display:grid; place-items:center; border-radius:3px; color:white; background:var(--red); font:700 28px/1 "Noto Sans SC",sans-serif; }
.back-link { font-weight:750; text-decoration:none; border-bottom:1px solid currentColor; padding:5px 0; }
.back-link span { color:var(--red); }
.hero { min-height:570px; background:var(--dark); color:var(--paper); display:grid; grid-template-columns:minmax(0,1fr) minmax(310px,.8fr); align-items:center; gap:6vw; padding:76px max(32px,calc((100vw - 1200px)/2)); overflow:hidden; }
.hero-copy { max-width:720px; }
.overline,.section-no { font-size:13px; font-weight:850; letter-spacing:.13em; }
.overline { display:flex; align-items:center; gap:12px; color:#ee968c; margin:0 0 31px; }
.line { display:block; width:29px; height:1px; background:currentColor; }
h1,h2,h3,p { overflow-wrap:break-word; }
h1 { margin:0; font-size:clamp(54px,7vw,110px); line-height:1.07; letter-spacing:-.065em; font-weight:850; }
h1 em { color:#e3504a; font-style:normal; }
.lead { max-width:520px; margin:30px 0 30px; color:#c5c8c5; font-size:18px; line-height:1.75; }
.hero-encouragement { display:flex; gap:10px; align-items:flex-start; max-width:520px; margin:-12px 0 25px; color:#f3d5bc; font-size:15px; font-weight:650; }
.hero-encouragement span { color:#f6aa79; }
.writing-encouragement { width:fit-content; margin:-18px 0 23px; padding:10px 14px; background:#f9f1ec; border-left:3px solid var(--red); color:#6a433c; font-size:14px; font-weight:650; }
.hero-link { display:inline-flex; align-items:center; gap:36px; padding:14px 0; border-bottom:2px solid #e3504a; text-decoration:none; font-weight:850; }
.hero-link span { font-size:22px; color:#e3504a; }
.hero-art { width:100%; aspect-ratio:5/5.5; max-height:480px; padding:25px; display:flex; flex-direction:column; background:#c4333c; color:#fff7ed; transform:rotate(3deg); box-shadow:25px 28px 0 #232b2d; }
.art-top,.art-bottom { display:flex; justify-content:space-between; gap:14px; font-weight:800; letter-spacing:.1em; font-size:14px; }
.art-center { margin:auto 0; text-align:center; font:900 clamp(64px,8.4vw,130px)/1.18 "Noto Sans SC",sans-serif; letter-spacing:-.08em; }
.art-center span { color:#f7c67c; }
.art-rule { display:inline-block; width:24px; border-top:1px solid; vertical-align:middle; }
.practice { width:min(1200px,calc(100% - 48px)); margin:0 auto; padding:93px 0 105px; scroll-margin-top:20px; }
.section-lead { display:flex; align-items:end; justify-content:space-between; gap:32px; margin-bottom:32px; }
.section-no { color:var(--red); }
h2 { font-size:clamp(32px,4vw,54px); line-height:1.13; letter-spacing:-.05em; margin:12px 0 0; }
.section-lead p { max-width:395px; color:var(--mute); margin:0 0 4px; }
.levels { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-bottom:22px; }
.levels button { min-height:123px; display:flex; flex-direction:column; align-items:flex-start; padding:16px; background:#fff; border:1px solid var(--line); color:var(--dark); text-align:left; transition:transform .2s,background .2s; }
.levels button:hover { transform:translateY(-3px); }
.levels button[aria-pressed="true"] { background:var(--red); color:white; border-color:var(--red); }
.levels button span { font-weight:850; font-size:12px; letter-spacing:.13em; }
.levels button strong { font-size:37px; line-height:1.1; letter-spacing:-.06em; }
.levels button small { font-size:14px; margin-top:auto; }
.exam { max-width:880px; padding:35px 42px 45px; background:#fff; border:1px solid var(--line); box-shadow:12px 12px 0 #e6e1d7; }
.exam-head { display:flex; justify-content:space-between; gap:16px; color:var(--red); font-size:14px; font-weight:850; letter-spacing:.04em; }
.progress-track { height:5px; background:#ece9e4; margin:15px 0 38px; }
.progress-track span { display:block; height:100%; width:0; background:var(--red); transition:width .25s; }
#question-area h3 { max-width:750px; margin:0 0 30px; font-size:clamp(24px,3vw,36px); line-height:1.35; letter-spacing:-.035em; }
#question-area form { display:flex; flex-direction:column; align-items:flex-start; }
#question-area label { font-weight:750; margin-bottom:10px; }
textarea { width:100%; resize:vertical; min-height:110px; padding:15px 17px; border:1px solid #9da5a4; border-radius:0; outline:none; color:var(--dark); background:#fbfaf7; font-size:18px; line-height:1.6; }
textarea:focus { border-color:var(--red); box-shadow:0 0 0 3px #b5232d24; }
.submit-answer { border:0; background:var(--dark); color:white; min-height:53px; padding:12px 22px; display:inline-flex; gap:25px; align-items:center; justify-content:space-between; font-weight:800; margin-top:17px; }
.submit-answer:hover { background:var(--red); }
.model-answer { border-left:4px solid var(--red); padding:17px 22px; background:#f9f1ec; margin-top:28px; }
.model-answer span,.result-kicker { color:var(--red); font-size:12px; font-weight:850; letter-spacing:.13em; }
.model-answer p { margin:10px 0 2px; font-size:20px; font-weight:750; }
.model-answer small { display:block; color:var(--mute); font-size:14px; margin-top:7px; }
.assessment-label { font-weight:750; margin:24px 0 12px; }
.assessment-actions { display:flex; flex-wrap:wrap; gap:10px; }
.assessment-actions button { min-height:48px; padding:9px 20px; border:1px solid var(--dark); background:white; color:var(--dark); font-weight:800; }
.assessment-actions button:first-child { background:var(--red); color:white; border-color:var(--red); }
.assessment-actions button:hover { box-shadow:0 3px 0 #161d2040; }
.result strong { display:block; color:var(--red); font-size:clamp(75px,10vw,135px); line-height:1.15; letter-spacing:-.08em; }
.result strong span { color:#9c9b93; font-size:.4em; }
.result p { font-size:19px; max-width:500px; }
.practice-note { color:var(--mute); font-size:14px; max-width:850px; margin:28px 0 0; }
.afterword { min-height:360px; position:relative; overflow:hidden; background:#e8e0d4; padding:58px max(32px,calc((100vw - 1200px)/2)); }
.afterword h2 { max-width:700px; }
.afterword p { max-width:570px; color:#455052; font-size:18px; }
.afterword a { display:inline-block; text-decoration:none; color:var(--red); font-weight:850; border-bottom:2px solid var(--red); padding-bottom:7px; }
.afterword-symbol { position:absolute; right:10%; bottom:-95px; font:900 360px/1 "Noto Sans SC",sans-serif; color:#d7cabe; pointer-events:none; }
.afterword>div { position:relative; z-index:1; }
footer { width:min(1200px,calc(100% - 48px)); margin:auto; min-height:100px; display:flex; justify-content:space-between; align-items:center; gap:15px; color:#5a6365; font-size:14px; }
:focus-visible { outline:3px solid #f3aa49; outline-offset:3px; }
[hidden] { display:none!important; }
@media (max-width:850px) { .hero { grid-template-columns:1fr; padding:60px 28px; } .hero-art { max-width:450px; aspect-ratio:5/4.5; transform:rotate(2deg); margin:10px auto 12px; } .art-center { font-size:90px; } .levels { grid-template-columns:repeat(3,1fr); } .afterword-symbol { right:-90px; opacity:.45; } }
@media (max-width:550px) { .topbar { width:calc(100% - 32px); min-height:75px; } .back-link { font-size:13px; } .hero { padding:55px 20px 70px; } h1 { font-size:clamp(47px,13vw,70px); } .lead { font-size:16px; } .hero-art { padding:18px; } .art-center { font-size:clamp(55px,17vw,85px); } .practice { width:calc(100% - 32px); padding:66px 0 75px; } .section-lead { display:block; } .section-lead p { margin-top:16px; } .levels { gap:7px; } .levels button { min-height:105px; padding:11px; } .levels button strong { font-size:30px; } .levels button small { font-size:12px; } .exam { padding:24px 19px 32px; box-shadow:6px 6px 0 #e6e1d7; } .afterword { padding:50px 20px; } footer { width:calc(100% - 32px); flex-direction:column; align-items:flex-start; justify-content:center; padding:20px 0; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }