/* ============================================================
   SC STUDY β — KAIWAI.TECH
   "Technical Study Desk" — a calm, paper-toned reading environment.
   Deliberately NOT the Zscaler Lab control-room or Mirai Note dark
   theme: a light, low-fatigue surface built for long reading.
   ============================================================ */

:root{
  --sc-bg:#f6f4ee;
  --sc-panel:#ffffff;
  --sc-panel2:#f0ede3;
  --sc-line:#ddd7c8;
  --sc-text:#211f1a;
  --sc-muted:#6c6656;
  --sc-muted-dim:#9a927d;
  --sc-accent:#2c5f8a;
  --sc-accent-ink:#ffffff;
  --sc-ok:#2e7d4f;
  --sc-ok-bg:#e7f3ea;
  --sc-bad:#b3422f;
  --sc-bad-bg:#fbeae6;
  --sc-warn:#a6741a;
  --sc-warn-bg:#f8efdd;
  --sc-max:920px;
  --sc-mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  --sc-sans:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--sc-bg);color:var(--sc-text);
  font-family:var(--sc-sans);line-height:1.85;-webkit-font-smoothing:antialiased;
}
a{color:var(--sc-accent)}
button{font:inherit;color:inherit}
::selection{background:var(--sc-accent);color:#fff}
textarea,input{font-family:inherit}

.sc-wrap{width:min(calc(100% - 32px),var(--sc-max));margin:auto}

/* ---------- topbar ---------- */
.sc-topbar{position:sticky;top:0;z-index:40;background:rgba(246,244,238,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--sc-line)}
.sc-topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.sc-brand-group{display:flex;align-items:center;gap:10px;min-width:0}
.sc-brand{font-weight:800;text-decoration:none;font-size:14px;color:var(--sc-muted);white-space:nowrap}
.sc-brand-sep{color:var(--sc-muted-dim);font-size:12px}
.sc-brand-sub{font-weight:800;text-decoration:none;color:var(--sc-text);font-size:15px;white-space:nowrap}
.sc-brand-sub small{color:var(--sc-accent);font-size:10px;vertical-align:super}
.sc-nav{display:flex;gap:18px;flex-wrap:wrap}
.sc-nav a{text-decoration:none;font-size:13.5px;font-weight:600;color:var(--sc-muted)}
.sc-nav a:hover{color:var(--sc-accent)}
.sc-nav-toggle{display:none;border:1px solid var(--sc-line);background:var(--sc-panel);border-radius:6px;padding:6px 10px;font-size:16px;cursor:pointer}

/* ---------- buttons ---------- */
.sc-btn{appearance:none;border:1px solid var(--sc-accent);background:var(--sc-accent);color:var(--sc-accent-ink);
  padding:13px 22px;font-weight:700;font-size:14px;border-radius:6px;cursor:pointer;text-decoration:none;display:inline-block;
  transition:opacity .15s ease, transform .1s ease;}
.sc-btn:hover{opacity:.88}
.sc-btn:active{transform:translateY(1px)}
.sc-btn:disabled{opacity:.5;cursor:not-allowed}
.sc-btn-ghost{background:transparent;color:var(--sc-text);border-color:var(--sc-line)}
.sc-btn-ghost:hover{border-color:var(--sc-accent);color:var(--sc-accent)}
.sc-btn-secondary{background:transparent;color:var(--sc-accent);border-color:var(--sc-accent)}
.sc-btn-secondary:hover{background:var(--sc-accent);color:var(--sc-accent-ink)}
.sc-btn-small{padding:8px 14px;font-size:12.5px}

/* ---------- hero ---------- */
.sc-hero{padding:72px 0 40px;text-align:center}
.sc-kicker{font:11px var(--sc-mono);letter-spacing:.16em;color:var(--sc-accent);text-transform:uppercase;margin:0 0 14px}
.sc-hero h1{font-size:clamp(40px,8vw,64px);font-weight:900;letter-spacing:-.02em;margin:0 0 14px}
.sc-hero-copy{font-size:clamp(17px,2.4vw,22px);font-weight:700;margin:0 0 18px}
.sc-hero-lead{font-size:14.5px;color:var(--sc-muted);max-width:520px;margin:0 auto 26px;line-height:1.9}
.sc-hero-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.sc-hero-note{font-size:12.5px;color:var(--sc-muted-dim);margin:6px auto;max-width:520px}
.sc-hero-schedule{font-size:11.5px;color:var(--sc-muted-dim);max-width:640px;margin:14px auto 4px;line-height:1.8}

/* ---------- generic section ---------- */
.sc-section{padding:36px 0}
.sc-page-title{font-size:clamp(26px,4vw,36px);font-weight:900;margin:0 0 16px}
.sc-section-title{font-size:18px;font-weight:800;margin:0 0 18px}
.sc-subhead{font-size:15px;font-weight:800;margin:32px 0 14px}
.sc-lead{font-size:14px;color:var(--sc-muted);line-height:1.9;max-width:640px;margin:0 0 20px}
.sc-loading{color:var(--sc-muted);padding:60px 0;text-align:center}
.sc-muted{color:var(--sc-muted-dim)}
.sc-error{color:var(--sc-bad)}

/* ---------- stat grid (home) ---------- */
.sc-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--sc-line);border:1px solid var(--sc-line);border-radius:8px;overflow:hidden}
.sc-stat{background:var(--sc-panel);padding:20px;display:flex;flex-direction:column;gap:6px}
.sc-stat-label{font-size:11.5px;color:var(--sc-muted)}
.sc-stat-value{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.sc-stat-sub{font-size:11px;color:var(--sc-muted-dim)}
.sc-weak-list{margin:0;padding-left:22px;font-size:14px;line-height:2}
.sc-weak-list b{color:var(--sc-bad)}

/* ---------- menu grid ---------- */
.sc-menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sc-menu-card{display:block;background:var(--sc-panel);border:1px solid var(--sc-line);border-radius:8px;padding:20px;text-decoration:none;color:inherit;transition:border-color .15s ease}
.sc-menu-card:hover{border-color:var(--sc-accent)}
.sc-menu-card h4{margin:0 0 8px;font-size:15px}
.sc-menu-card p{margin:0;font-size:12.5px;color:var(--sc-muted)}

/* ---------- topic grid ---------- */
.sc-topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:8px}
.sc-topic-card{display:block;background:var(--sc-panel);border:1px solid var(--sc-line);border-radius:8px;padding:16px;text-decoration:none;color:inherit}
.sc-topic-card:hover{border-color:var(--sc-accent)}
.sc-topic-card h4{margin:0 0 6px;font-size:14px}
.sc-topic-card p{margin:0 0 10px;font-size:12px;color:var(--sc-muted)}
.sc-badge{display:inline-block;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px}
.sc-badge.is-ok{background:var(--sc-ok-bg);color:var(--sc-ok)}
.sc-badge.is-warn{background:var(--sc-warn-bg);color:var(--sc-warn)}
.sc-badge.is-bad{background:var(--sc-bad-bg);color:var(--sc-bad)}
.sc-badge.is-muted{background:var(--sc-panel2);color:var(--sc-muted)}

/* ---------- ability / dashboard extras (home) ---------- */
.sc-ability-block{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.sc-ability-row{display:grid;grid-template-columns:70px 1fr 80px;align-items:center;gap:12px}
.sc-ability-label{font-size:12.5px;font-weight:700;color:var(--sc-muted)}
.sc-ability-value{font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums}
.sc-mock-latest{font-size:14px;margin:0 0 20px}
.sc-mock-latest b{color:var(--sc-accent);font-size:16px}
.sc-recommend{font-size:13.5px;background:var(--sc-panel2);border-radius:8px;padding:14px 16px;margin:20px 0 0}
.sc-recommend b{color:var(--sc-accent)}

/* ---------- bar chart (weak points) ---------- */
.sc-bar-chart{display:flex;flex-direction:column;gap:12px}
.sc-bar-row{display:grid;grid-template-columns:160px 1fr 48px;align-items:center;gap:12px}
.sc-bar-label{font-size:13px}
.sc-bar-track{height:12px;background:var(--sc-panel2);border-radius:999px;overflow:hidden}
.sc-bar-fill{display:block;height:100%;border-radius:999px}
.sc-bar-fill.is-ok{background:var(--sc-ok)}
.sc-bar-fill.is-warn{background:var(--sc-warn)}
.sc-bar-fill.is-bad{background:var(--sc-bad)}
.sc-bar-value{font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- practice / question card ---------- */
.sc-practice{max-width:720px}
.sc-progress-row{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--sc-muted);margin-bottom:20px}
.sc-progress-track{flex:1;height:6px;background:var(--sc-panel2);border-radius:999px;overflow:hidden}
.sc-progress-fill{display:block;height:100%;background:var(--sc-accent)}
.sc-q-meta{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.sc-topic-tag{font-size:11px;background:var(--sc-panel2);color:var(--sc-muted);padding:4px 10px;border-radius:999px}
.sc-q-text{font-size:17px;line-height:1.85;font-weight:600;margin:0 0 24px}
.sc-choices{display:grid;gap:10px;margin-bottom:20px}
.sc-choice{display:flex;align-items:flex-start;gap:12px;text-align:left;background:var(--sc-panel);border:1.5px solid var(--sc-line);
  border-radius:8px;padding:14px 16px;font-size:14px;cursor:pointer;line-height:1.7;}
.sc-choice:hover:not(:disabled){border-color:var(--sc-accent)}
.sc-choice:disabled{cursor:default}
.sc-choice-key{flex:none;width:24px;height:24px;border-radius:50%;background:var(--sc-panel2);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px}
.sc-choice.is-correct{border-color:var(--sc-ok);background:var(--sc-ok-bg)}
.sc-choice.is-correct .sc-choice-key{background:var(--sc-ok);color:#fff}
.sc-choice.is-wrong{border-color:var(--sc-bad);background:var(--sc-bad-bg)}
.sc-choice.is-wrong .sc-choice-key{background:var(--sc-bad);color:#fff}
.sc-choice.is-selected{border-color:var(--sc-accent);background:#eef3f8}

.sc-q-actions{margin-bottom:14px}
.sc-bookmark-btn{font-size:12.5px}
.sc-source-note{font-size:11px;color:var(--sc-muted-dim);margin-top:24px}

.sc-feedback{border:1px solid var(--sc-line);border-radius:8px;padding:22px;margin-top:8px}
.sc-feedback.is-correct{border-color:var(--sc-ok);background:var(--sc-ok-bg)}
.sc-feedback.is-wrong{border-color:var(--sc-bad);background:var(--sc-bad-bg)}
.sc-feedback-headline{font-size:16px;font-weight:800;margin:0 0 12px}
.sc-explain{font-size:13.5px;line-height:1.9;color:#33312b;margin-bottom:12px}
.sc-keypoint{font-size:13px;background:var(--sc-panel);border-radius:6px;padding:12px 14px;margin:0 0 14px}
.sc-keypoint b{color:var(--sc-accent)}
.sc-wrong-notes-title{font-size:12.5px;font-weight:800;margin:0 0 8px}
.sc-wrong-note{font-size:12.5px;color:#33312b;margin-bottom:6px}
.sc-wrong-note b{color:var(--sc-bad);margin-right:6px}
.sc-set-done{text-align:center;padding:80px 0}

/* ---------- mock exam ---------- */
.sc-mock-picker{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.sc-mock-card{background:var(--sc-panel);border:1px solid var(--sc-line);border-radius:8px;padding:24px;text-align:center}
.sc-mock-card h3{margin:0 0 10px}
.sc-mock-card p{color:var(--sc-muted);font-size:13px;margin:0 0 18px}
.sc-mock-counts{font-size:11.5px !important;color:var(--sc-muted-dim) !important;margin:0 !important}
.sc-mock-detail table{margin-bottom:28px}
.sc-caution-list{font-size:13px;color:var(--sc-muted);line-height:2;padding-left:20px;margin:0 0 28px}
.sc-mock-section-badge{font-size:12px;font-weight:800;background:var(--sc-accent);color:var(--sc-accent-ink);padding:5px 12px;border-radius:6px}

.sc-mock-header{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px;font-size:13px}
.sc-mock-timer{font:16px var(--sc-mono);font-weight:800;color:var(--sc-accent);background:var(--sc-panel2);padding:6px 14px;border-radius:6px}
.sc-mock-timer.is-urgent{color:var(--sc-bad);background:var(--sc-bad-bg);animation:scTimerPulse 1.4s ease-in-out infinite}
@keyframes scTimerPulse{50%{opacity:.55}}
.sc-mock-nav{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px;padding:14px;background:var(--sc-panel);border:1px solid var(--sc-line);border-radius:8px}
.sc-mock-nav-btn{width:34px;height:34px;border:1px solid var(--sc-line);background:var(--sc-panel2);border-radius:6px;font:12px var(--sc-mono);cursor:pointer}
.sc-mock-nav-btn.is-answered{background:var(--sc-ok-bg);border-color:var(--sc-ok);color:var(--sc-ok)}
.sc-mock-nav-btn.is-flagged{box-shadow:inset 0 0 0 2px var(--sc-warn)}
.sc-mock-nav-btn.is-current{outline:2px solid var(--sc-accent);outline-offset:1px}
.sc-flag-btn{margin-left:auto;font-size:12px;border:1px solid var(--sc-line);background:var(--sc-panel);border-radius:999px;padding:5px 12px;cursor:pointer}
.sc-flag-btn.is-on{background:var(--sc-warn-bg);border-color:var(--sc-warn);color:var(--sc-warn)}
.sc-mock-footer{display:flex;justify-content:space-between;margin-top:20px}

.sc-score-hero{text-align:center;margin:20px 0}
.sc-score-num{font-size:clamp(56px,10vw,96px);font-weight:900;color:var(--sc-accent)}
.sc-score-den{font-size:16px;color:var(--sc-muted)}
.sc-table{width:100%;border-collapse:collapse;margin:12px 0 24px}
.sc-table th,.sc-table td{border:1px solid var(--sc-line);padding:10px 12px;font-size:13px;text-align:left}
.sc-table th{background:var(--sc-panel2)}

/* ---------- subject B ---------- */
.sc-scenario{background:var(--sc-panel);border:1px solid var(--sc-line);border-radius:8px;padding:22px;font-size:14px;line-height:1.9;margin:16px 0 20px;white-space:pre-wrap}
.sc-answer-box{width:100%;border:1.5px solid var(--sc-line);border-radius:8px;padding:14px;font-size:14px;line-height:1.8;resize:vertical}
.sc-answer-box:focus{outline:none;border-color:var(--sc-accent)}
.sc-b-result{margin-top:24px;padding:20px;background:var(--sc-panel);border:1px solid var(--sc-line);border-radius:8px}
.sc-b-note{font-size:12px;color:var(--sc-muted-dim);margin:0 0 16px}
.sc-scenario-block{margin-bottom:36px;padding-bottom:8px;border-bottom:1px dashed var(--sc-line)}
.sc-b-subq{margin:20px 0}
.sc-b-prompt{font-size:14.5px;font-weight:700;margin:0 0 12px}
.sc-b-missing{font-size:13px;background:var(--sc-warn-bg);color:var(--sc-warn);border-radius:6px;padding:10px 14px;margin:12px 0}
.sc-b-pick-card{display:block;background:var(--sc-panel);border:1px solid var(--sc-line);border-radius:8px;padding:16px;cursor:pointer}
.sc-b-pick-card input{margin-right:8px}
.sc-b-pick-card h4{display:inline;margin:0;font-size:14px}
.sc-b-pick-card p{margin:8px 0 0;font-size:12px;color:var(--sc-muted)}
.sc-kw{display:inline-block;font-size:12px;padding:3px 10px;border-radius:999px;background:var(--sc-panel2);color:var(--sc-muted);margin:2px 3px 2px 0}
.sc-kw.is-hit{background:var(--sc-ok-bg);color:var(--sc-ok);font-weight:700}

/* ---------- glossary ---------- */
.sc-search-row{display:flex;gap:8px;margin-bottom:24px;max-width:420px}
.sc-search-row input{flex:1;border:1.5px solid var(--sc-line);border-radius:6px;padding:10px 14px;font-size:14px}
.sc-search-row input:focus{outline:none;border-color:var(--sc-accent)}
.sc-glossary-list{display:grid;gap:14px}
.sc-glossary-item{background:var(--sc-panel);border:1px solid var(--sc-line);border-radius:8px;padding:18px}
.sc-glossary-item h4{margin:0 0 8px;font-size:15px}
.sc-glossary-item h4 small{color:var(--sc-muted-dim);font-weight:400;font-size:12px}
.sc-glossary-item p{margin:0 0 8px;font-size:13px;color:var(--sc-muted)}

/* ---------- search ---------- */
.sc-search-list{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:8px}
.sc-search-list li{font-size:13.5px;padding:12px 14px;background:var(--sc-panel);border:1px solid var(--sc-line);border-radius:6px}

/* ---------- archive ---------- */
.sc-archive-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:8px}
.sc-archive-card{background:var(--sc-panel);border:1px solid var(--sc-line);border-radius:8px;padding:14px 16px}
.sc-archive-card h4{margin:0 0 8px;font-size:13.5px}
.sc-archive-links{font-size:12.5px;margin:0}

/* ---------- PRO / AI CTA banner ---------- */
.sc-pro-banner{margin-top:32px;padding:24px;background:var(--sc-panel2);border:1px dashed var(--sc-muted-dim);border-radius:10px;text-align:center}
.sc-pro-banner h3{margin:0 0 12px;font-size:16px}
.sc-pro-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:0;margin:0 0 12px}
.sc-pro-list li{font-size:11.5px;background:var(--sc-panel);border:1px solid var(--sc-line);border-radius:999px;padding:4px 12px}
.sc-pro-price{font-weight:800;margin:0 0 14px}
.sc-pro-note{font-size:11.5px;color:var(--sc-muted-dim);margin:10px 0 0}

/* ---------- footer ---------- */
.sc-footer{border-top:1px solid var(--sc-line);padding:36px 0 50px;margin-top:40px}
.sc-official-note{font-size:11.5px;line-height:1.9;color:var(--sc-muted-dim);max-width:760px;margin:0 0 14px}
.sc-official-note b{color:var(--sc-muted)}
.sc-footer-meta{font-size:11px;color:var(--sc-muted-dim);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:20px}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .sc-stat-grid{grid-template-columns:repeat(2,1fr)}
  .sc-menu-grid,.sc-topic-grid{grid-template-columns:repeat(2,1fr)}
  .sc-archive-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .sc-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--sc-bg);border-bottom:1px solid var(--sc-line);flex-direction:column;padding:12px 16px;gap:14px}
  .sc-nav.is-open{display:flex}
  .sc-nav-toggle{display:block}
  .sc-hero{padding:48px 0 32px}
  .sc-stat-grid{grid-template-columns:1fr 1fr}
  .sc-menu-grid,.sc-topic-grid{grid-template-columns:1fr}
  .sc-bar-row{grid-template-columns:1fr;gap:4px}
  .sc-bar-value{text-align:left}
  .sc-mock-picker{grid-template-columns:1fr}
  .sc-choice{padding:12px 14px}
  .sc-mock-nav-btn{width:30px;height:30px}
}
@media(max-width:420px){
  .sc-stat-grid{grid-template-columns:1fr}
  .sc-hero-actions .sc-btn{width:100%}
}