.site-header{padding:var(--space-2) var(--space-2);background:var(--color-surface);border-bottom:1px solid var(--color-border)}.site-header-logo{font-size:var(--font-size-lg);color:var(--color-text);border-radius:var(--radius-sm);font-weight:700;text-decoration:none}.site-footer{padding:var(--space-2) var(--space-2);border-top:1px solid var(--color-border);text-align:center;color:var(--color-text-muted);font-size:var(--font-size-base)}.site-layout{flex-direction:column;height:100svh;display:flex;overflow:hidden}.site-scroll-area{overscroll-behavior-y:none;flex-direction:column;flex:1;display:flex;overflow-y:auto}.site-main{width:100%;max-width:960px;padding:var(--space-2);flex:1;margin:0 auto}@media print{.site-layout{height:auto;display:block;overflow:visible}.site-scroll-area{display:block;overflow:visible}}.subject-card{font:inherit;background:var(--color-surface);box-shadow:var(--shadow-1);border-radius:var(--radius);cursor:pointer;transition:box-shadow var(--transition), transform var(--transition);border:none;flex-direction:column;padding:0;display:flex;overflow:hidden}.subject-card:hover:not(:disabled){box-shadow:var(--shadow-2)}.subject-card:active:not(:disabled){box-shadow:var(--shadow-1);transform:translateY(1px)}.subject-card:disabled{box-shadow:none;color:var(--color-text-muted);opacity:.85;cursor:not-allowed}.subject-card-thumb{aspect-ratio:210/297;border-bottom:3px solid var(--color-border);font-size:32px;position:relative}.subject-card-badge{font-size:var(--font-size-lg);padding:var(--space-2);color:var(--color-surface);background:#1b1f26d9;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.subject-card-title{padding:var(--space-1);font-weight:700}.subject-card-image{object-fit:cover;width:100%;height:100%;transition:transform .4s}.subject-card:hover:not(:disabled) .subject-card-image{transform:scale(1.03)}.options-form{gap:var(--space-6);flex-direction:column;max-width:420px;margin:0 auto;display:flex}.options-field{gap:var(--space-2);flex-direction:column;font-weight:700;display:flex}.options-field input{font:inherit;color:inherit;padding:var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm)}.options-check{align-items:center;gap:var(--space-3);cursor:pointer;min-height:44px;display:flex}.options-check input{cursor:pointer;width:24px;height:24px}.options-submit{font:inherit;min-height:44px;padding:var(--space-3) var(--space-6);background:var(--color-accent);color:var(--color-surface);border-radius:var(--radius);box-shadow:var(--shadow-1);cursor:pointer;transition:box-shadow var(--transition), transform var(--transition);border:none;font-weight:700}.options-submit:hover{box-shadow:var(--shadow-2)}.options-submit:active{box-shadow:var(--shadow-1);transform:translateY(1px)}.preview-toolbar{align-items:center;gap:var(--space-4);margin-bottom:var(--space-6);display:flex}.preview-print{font:inherit;min-height:44px;padding:var(--space-3) var(--space-6);background:var(--color-accent);color:var(--color-surface);border-radius:var(--radius);box-shadow:var(--shadow-1);cursor:pointer;transition:box-shadow var(--transition), transform var(--transition);border:none;font-weight:700}.preview-print:hover{box-shadow:var(--shadow-2)}.preview-print:active{box-shadow:var(--shadow-1);transform:translateY(1px)}.preview-sheets{overflow-x:auto}.sheet{width:210mm;min-height:297mm;margin:0 auto var(--space-6);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:20mm 16mm}.sheet-header{justify-content:space-between;align-items:flex-start;gap:var(--space-4);padding-bottom:var(--space-4);margin-bottom:var(--space-6);border-bottom:2px solid var(--color-text);flex-wrap:wrap;display:flex}.sheet-title{font-size:var(--font-size-xl);margin:0}.sheet-meta{gap:var(--space-2);flex-direction:column;display:flex}.sheet-meta-row{align-items:baseline;gap:var(--space-2);display:flex}.sheet-meta-label{min-width:5em}.sheet-meta-line{border-bottom:1px solid var(--color-text);text-align:right;min-width:40mm;display:inline-block}.sheet-problems{counter-reset:problem-number;column-count:2;column-gap:16mm;margin:0;padding-left:1.5em;font-size:30px;line-height:2.6;list-style:none}.sheet-problems-small{font-size:22px}.sheet-problems li{break-inside:avoid;counter-increment:problem-number}.sheet-problems li:before{content:counter(problem-number);width:1.5em;height:1.5em;margin-right:var(--space-2);border:1px solid var(--color-text);border-radius:50%;justify-content:center;align-items:center;font-size:.95em;display:inline-flex}@page{size:A4;margin:20mm 16mm}@media print{.no-print{display:none}.preview-sheets{overflow:visible}.sheet{border:none;border-radius:0;width:auto;max-width:none;min-height:auto;margin:0;padding:0}.sheet+.sheet{break-before:page}}*,:before,:after{box-sizing:border-box}:root{--font-size-base:1rem;--font-size-lg:1.25rem;--font-size-xl:1.5rem;--font-size-2xl:2rem;--color-bg:#fff;--color-surface:#fff;--color-muted:#eef0f4;--color-border:#dcdfe5;--color-text:#1b1f26;--color-text-muted:#5c6470;--color-accent:#264af4;--subject-japanese:#e03131;--subject-math:#1c7ed6;--subject-science:#2f9e44;--subject-social:#f08c00;--subject-english:#7048e8;--subject-music:#c2255c;--subject-art:#e8590c;--subject-pe:#0c8599;--subject-tech:#74b816;--subject-info:#495057;--subject-ai:#4263eb;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--radius:16px;--radius-sm:8px;--transition:.15s;--shadow-1:0 1px 2px #10182814, 0 4px 12px #1018281a;--shadow-2:0 2px 4px #1018281a, 0 12px 24px #10182824}body{background:var(--color-bg);color:var(--color-text);font-size:var(--font-size-base);margin:0;line-height:1.7}:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}.subject-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(130px,1fr));display:grid}@media (width<=600px){.subject-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.page-intro{margin-bottom:var(--space-6)}.page-intro h1{font-size:var(--font-size-2xl);margin:0;line-height:1.4}.page-intro p{margin:var(--space-2) 0 0;color:var(--color-text-muted)}
