@charset "UTF-8";
/* ==========================================================================
   航空従事者 学科試験 過去問演習
   デザインの正: https://rekimee.co.jp/tools/assets/tools-top.css?v=21
   トークン・ヘッダー・ヒーロー・カード・FAQ・フッターは実CSSからの移植。
   演習UI（choices/learn/progress 等）はこのツール固有。
   ========================================================================== */

/* ------------------------------------------------------ デザイントークン
   実サイトの :root をそのまま使う（記憶で再現しない） */
:root{
  --ink:      #111111;
  --paper:    #ffffff;
  --violet:   #5b3df5;
  --violet-lt:#9b8cff;   /* 暗い背景に置く紫 */
  --magenta:  #ff2e88;
  --yellow:   #ffe01b;
  --lime:     #b8ff3c;
  --mute:     #6b6b6b;
  --line:     #111111;
  --tint:     #f4f4f2;

  /* 演習の誤答など、白文字を広い面に載せる場所だけ濃い赤紫を使う
     （実サイトのmagentaは小さなチップ用。長文にはコントラストが足りない） */
  --magenta-deep: #d6176f;

  --bw:       3px;
  --shadow:   6px 6px 0 var(--ink);
  --shadow-lg:10px 10px 0 var(--ink);
  --skew:     skewX(-18deg);
  --unskew:   skewX(18deg);

  --ff-display:"Archivo Black","Zen Kaku Gothic New",system-ui,sans-serif;
  --ff-body:"Zen Kaku Gothic New",system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;

  --maxw: 1180px;
  --gut:  clamp(16px, 4vw, 32px);
  --head-h: 67px;   /* ヘッダー実高。JSが実測で更新する */
}

/* --------------------------------------------------------------- 基礎 */
*,*::before,*::after{ box-sizing:border-box; }

html{
  background:#ffffff;
  color-scheme:only light;
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:#ffffff;
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.8;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

[hidden]{ display:none !important; }
.hidden{ display:none !important; }

img,svg{ max-width:100%; }
a{ color:inherit; }

h1,h2,h3,h4,p,ul,ol,figure,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style:none; }

::selection{ background:var(--yellow); color:var(--ink); }

:focus-visible{
  outline:var(--bw) solid var(--magenta);
  outline-offset:3px;
}

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.section{ padding-block:clamp(40px,7vw,72px); }
.section--tint{ background:var(--tint); border-block:var(--bw) solid var(--ink); }

.eyebrow{
  display:inline-block;
  font-family:var(--ff-display);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  border:var(--bw) solid var(--ink);
  padding:4px 12px;
  margin-bottom:18px;
  background:var(--paper);
}
.h2{
  font-family:var(--ff-display);
  font-size:clamp(24px,4.4vw,38px);
  line-height:1.25;
  letter-spacing:.01em;
  margin-bottom:10px;
}
.h2 em{ font-style:normal; background:var(--yellow); padding:0 .18em; box-decoration-break:clone; }
.lede{ color:var(--mute); font-size:15px; max-width:62ch; }

/* --------------------------------------------------------------- chip */
.chip{
  display:inline-block;
  transform:var(--skew);
  background:var(--ink); color:#fff;
  padding:5px 14px;
  border:var(--bw) solid var(--ink);
  font-size:12px; font-weight:700; letter-spacing:.04em;
  white-space:nowrap;
}
.chip > span{ display:inline-block; transform:var(--unskew); }
.chip--violet { background:var(--violet);  color:#fff; }
.chip--magenta{ background:var(--magenta); color:#fff; }
.chip--yellow { background:var(--yellow);  color:var(--ink); }
.chip--lime   { background:var(--lime);    color:var(--ink); }
.chip--paper  { background:var(--paper);   color:var(--ink); }

/* --------------------------------------------------------------- btn */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--ff-body); font-weight:700; font-size:15px;
  padding:12px 20px; min-height:48px;
  border:var(--bw) solid var(--ink);
  background:var(--paper); color:var(--ink);
  text-decoration:none; cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active{ transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink); }
.btn--fill{ background:var(--ink); color:#fff; }
.btn--violet{ background:var(--violet); color:#fff; }
.btn--sm{ padding:8px 14px; font-size:13px; box-shadow:4px 4px 0 var(--ink); min-height:40px; }
.btn:disabled{ background:var(--mute); color:#fff; cursor:not-allowed; }
@media (prefers-reduced-motion:reduce){
  .btn,.btn:active{ transform:none; transition:none; }
}

/* ======================================================== ヘッダー */
.site-head{
  position:sticky; top:0; z-index:100;
  border-bottom:var(--bw) solid var(--ink);
  background:var(--paper);
}
section[id], div[id]{ scroll-margin-top:calc(var(--head-h) + 11px); }
.site-head__in{
  display:flex; align-items:center; gap:16px;
  min-height:64px;
}
.logo{
  display:inline-flex; align-items:baseline; gap:8px;
  text-decoration:none; font-family:var(--ff-display);
  font-size:18px; letter-spacing:.02em; white-space:nowrap;
}
.logo i{
  font-style:normal; font-size:11px; letter-spacing:.18em;
  border:2px solid var(--ink); padding:1px 6px;
}
.site-nav{ margin-left:auto; display:flex; gap:4px; align-items:center; }
.site-nav a{
  text-decoration:none; font-size:14px; font-weight:700;
  padding:8px 12px; border:2px solid transparent;
  white-space:nowrap;
}
@media (max-width:640px){
  .site-nav a.is-optional{ display:none; }
  .site-nav a{ padding:8px 8px; font-size:13px; }
  .logo{ font-size:16px; }
  .logo i{ display:none; }
}

/* ============================================================ ヒーロー */
.hero{
  border-bottom:var(--bw) solid var(--ink);
  background:
    repeating-linear-gradient(-18deg, transparent 0 26px, rgba(17,17,17,.045) 26px 28px);
  padding-block:clamp(36px,6vw,64px);
}
.hero--slim{ padding-block:clamp(22px,3.6vw,36px); }
.hero__title{
  font-family:var(--ff-display);
  font-size:clamp(30px,7vw,58px);
  line-height:1.14;
  letter-spacing:-.01em;
  margin-bottom:16px;
}
.hero__title .mark{
  background:var(--lime);
  border:var(--bw) solid var(--ink);
  padding:0 .14em;
  display:inline-block;
  transform:var(--skew);
}
.hero__title .mark > span{ display:inline-block; transform:var(--unskew); }
.hero__sub{
  font-size:clamp(15px,2.2vw,18px);
  max-width:60ch; margin-bottom:20px; font-weight:500;
}
.hero__pills{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.hero__stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  border:var(--bw) solid var(--ink); background:var(--paper);
  box-shadow:var(--shadow);
  margin-bottom:26px; max-width:760px;
}
.hero__stats div{ padding:14px 12px; border-right:var(--bw) solid var(--ink); text-align:center; }
.hero__stats div:last-child{ border-right:0; }
.hero__stats .n{ font-family:var(--ff-display); font-size:clamp(22px,3.4vw,32px); line-height:1; display:block; }
.hero__stats .l{ font-size:12px; font-weight:700; display:block; margin-top:6px; }

/* ============================================================ 3本柱 */
.pillars{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.pillar{
  border:var(--bw) solid var(--ink); background:var(--paper);
  padding:22px; box-shadow:var(--shadow);
}
.pillar__n{
  font-family:var(--ff-display); font-size:34px; line-height:1;
  display:block; margin-bottom:10px;
}
.pillar h3{ font-size:17px; margin-bottom:8px; font-weight:800; }
.pillar p{ font-size:14px; color:var(--mute); }
.pillar--violet .pillar__n{ color:var(--violet); }
.pillar--magenta .pillar__n{ color:var(--magenta); }

/* ============================================================ 手順 */
.steps{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); counter-reset:st; }
.step{ border:var(--bw) solid var(--ink); padding:20px; background:var(--paper); box-shadow:4px 4px 0 var(--ink); }
.step::before{
  counter-increment:st; content:counter(st,decimal-leading-zero);
  font-family:var(--ff-display); font-size:26px; display:block; margin-bottom:8px;
  color:var(--violet);
}
.step h3{ font-size:16px; margin-bottom:6px; font-weight:800; }
.step p{ font-size:14px; color:var(--mute); }

/* ============================================================ FAQ */
.faq{ display:grid; gap:12px; }
.faq details{
  border:var(--bw) solid var(--ink); background:var(--paper);
}
.faq summary{
  cursor:pointer; list-style:none;
  padding:16px 52px 16px 18px;
  font-weight:800; font-size:15.5px; position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%);
  font-family:var(--ff-display); font-size:22px; line-height:1;
}
.faq details[open] summary{ background:var(--ink); color:#fff; }
.faq details[open] summary::after{ content:"−"; }
.faq .faq__a{ padding:16px 18px; border-top:2px solid var(--ink); font-size:14.5px; }
.faq .faq__a p{ margin-bottom:6px; }
.faq .faq__a a{ color:var(--violet); font-weight:700; }

/* ============================================================ CTA帯 */
.bookmark{
  border:var(--bw) solid var(--ink);
  background:var(--violet); color:#fff;
  box-shadow:var(--shadow-lg);
  padding:clamp(22px,4vw,34px);
  display:grid; gap:14px;
}
.bookmark h2{ font-family:var(--ff-display); font-size:clamp(20px,3.4vw,30px); line-height:1.3; }
.bookmark p{ font-size:14.5px; }
.bookmark .btn{ justify-self:start; }

/* ============================================================ フッター */
.site-foot{
  border-top:var(--bw) solid var(--ink);
  background:var(--ink); color:#fff;
  padding-block:44px 32px;
}
.site-foot a{ color:#fff; }
.foot-grid{ display:grid; gap:28px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.foot-grid .foot-h{
  font-family:var(--ff-display); font-size:12px; letter-spacing:.14em;
  margin-bottom:12px; text-transform:uppercase; color:var(--lime);
}
.foot-grid li{
  margin-bottom:8px; font-size:14px;
  position:relative; padding-left:15px;
}
.foot-grid li::before{
  content:""; position:absolute; left:0; top:.66em;
  width:8px; height:8px; background:var(--violet-lt);
  transform:var(--skew);
}
.foot-grid a{ text-decoration:none; }
.foot-note{ font-size:12.5px; color:#bdbdbd; line-height:1.8; }
.foot-note a{ text-decoration:underline; }
.foot-bottom{
  margin-top:34px; padding-top:18px; border-top:2px solid #444;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-size:12.5px; color:#bdbdbd;
}

/* ==========================================================================
   ここから下は このツール固有（演習UI）。トーンは上のトークンに従う。
   ========================================================================== */

main.app{ padding-block:clamp(28px,5vw,48px); }

/* カード共通 */
/* ---------------------------------------------------- パンくず */
.breadcrumb{ margin-bottom:18px; font-size:.85rem; font-weight:700; }
.breadcrumb ol{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; }
.breadcrumb li{ display:flex; align-items:center; gap:6px; }
.breadcrumb li+li::before{ content:"▸"; color:var(--violet); }
.breadcrumb a{ color:var(--violet); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }
.breadcrumb [aria-current]{ color:var(--ink); }

/* ------------------------------------------ 前回使った演習（LP上部） */
.recent-item{
  display:flex; align-items:center; gap:10px;
  border:var(--bw) solid var(--ink); background:var(--paper);
  padding:10px 12px; margin-bottom:10px;
}
.recent-link{
  flex:1; font-weight:700; color:var(--ink); text-decoration:none;
}
.recent-link:hover{ color:var(--violet); text-decoration:underline; }
.recent-when{ font-size:.78rem; font-weight:700; color:var(--mute); white-space:nowrap; }
.recent-del{
  font-family:inherit; font-size:1rem; font-weight:900; line-height:1;
  width:36px; height:36px; flex-shrink:0;
  background:var(--paper); color:var(--ink);
  border:2px solid var(--ink); cursor:pointer;
}
.recent-del:hover{ background:var(--magenta-deep); color:#fff; }
.recent-del:focus-visible{ outline:3px solid var(--magenta); outline-offset:2px; }
.recent-note{ font-size:.78rem; font-weight:700; color:var(--mute); }

/* ---------------------------------------------- システム更新の記録 */
.changelog{ list-style:none; margin:0; padding:0; }
.changelog li{
  border:var(--bw) solid var(--ink); background:var(--paper);
  box-shadow:var(--shadow);
  padding:12px 16px; margin-bottom:14px; font-size:.92rem;
}
.changelog time{
  display:inline-block; background:var(--yellow);
  border:2px solid var(--ink); padding:0 8px;
  font-weight:900; font-size:.8rem; margin-right:8px;
}

.card{
  background:var(--paper);
  border:var(--bw) solid var(--ink);
  box-shadow:var(--shadow);
  padding:20px 18px;
  margin-bottom:28px;
}
.card h2{
  font-size:1.1rem; font-weight:900; margin-bottom:14px;
  border-bottom:var(--bw) solid var(--ink); padding-bottom:6px;
}
.card h3{ font-size:1rem; font-weight:700; margin:14px 0 6px; }

/* 資格選択 */
.qual-head{
  font-size:1rem; font-weight:900; margin:20px 0 10px;
  border-left:8px solid var(--violet); padding-left:10px;
}
.qual-head:first-child{ margin-top:0; }
.type-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.qual-btn{
  font-family:inherit; text-align:left;
  background:var(--paper); border:var(--bw) solid var(--ink);
  padding:12px 14px; cursor:pointer; min-height:56px;
  box-shadow:4px 4px 0 var(--ink);
  text-decoration:none; color:inherit; display:block;
  transition:transform .12s ease, box-shadow .12s ease;
}
.qual-btn:active{ transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); }
.qual-btn .qname{ font-weight:900; font-size:1rem; display:block; }
.qual-btn .qmeta{ font-size:.8rem; font-weight:700; }
.qual-btn .qmeta .has-expl{
  color:#fff; background:var(--magenta);
  border:2px solid var(--ink); padding:0 6px; margin-left:6px; font-weight:900;
}

/* 設定フォーム */
.field{ margin-bottom:18px; }
.field-label{ font-weight:900; font-size:.95rem; margin-bottom:8px; display:block; }
.seg{ display:flex; flex-wrap:wrap; gap:10px; }
.seg button{
  font-family:inherit; font-size:.95rem; font-weight:700;
  min-height:48px; padding:8px 16px;
  background:var(--paper); color:var(--ink);
  border:var(--bw) solid var(--ink); cursor:pointer;
  transform:var(--skew);
}
.seg button span{ display:inline-block; transform:var(--unskew); }
.seg button[aria-pressed="true"]{ background:var(--ink); color:#fff; }

/* 「この条件で◯問」 = 押す前に見せる */
.pool-count{
  background:var(--lime); border:var(--bw) solid var(--ink);
  padding:12px 16px; font-weight:900; font-size:1.05rem;
  margin:18px 0;
}
.pool-count .n{ font-size:1.6rem; }

.btn-main{
  display:block; width:100%; min-height:60px;
  font-family:inherit; font-size:1.15rem; font-weight:900;
  background:var(--violet); color:#fff;
  border:var(--bw) solid var(--ink); box-shadow:var(--shadow);
  cursor:pointer; transform:var(--skew);
  text-decoration:none; text-align:center;
}
.btn-main span{ display:inline-block; transform:var(--unskew); }
.btn-main:active{ transform:var(--skew) translate(3px,3px); box-shadow:2px 2px 0 var(--ink); }
.btn-main:disabled{ background:var(--mute); cursor:not-allowed; }
.btn-sub{
  display:inline-block; min-height:48px;
  font-family:inherit; font-size:1rem; font-weight:700;
  background:var(--paper); color:var(--ink);
  border:var(--bw) solid var(--ink); padding:8px 20px;
  cursor:pointer; transform:var(--skew);
}
.btn-sub span{ display:inline-block; transform:var(--unskew); }

/* 演習画面 */
.progress{
  display:flex; justify-content:space-between; align-items:center;
  font-weight:900; margin-bottom:14px;
  /* 制限時間と進み具合を、長い問題文をスクロールしても見失わないようにする */
  position:sticky; top:var(--head-h); z-index:20;
  background:var(--paper); border-bottom:2px solid var(--ink);
  padding:6px 0; gap:8px;
}
.drill-timer{
  font-variant-numeric:tabular-nums; white-space:nowrap;
  border:2px solid var(--ink); background:var(--yellow);
  padding:2px 10px; font-size:.9rem;
}
.drill-timer.low{ background:var(--magenta-deep); color:#fff; }
.field-note{ font-size:.78rem; font-weight:700; color:var(--mute); margin-top:6px; }
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0;
}
.progress .bar{
  flex:1; height:14px; border:var(--bw) solid var(--ink); margin:0 12px; background:var(--paper);
}
.progress .bar i{ display:block; height:100%; background:var(--violet); }
.q-meta{ font-size:.8rem; font-weight:700; margin-bottom:8px; }
.q-meta .tag{
  display:inline-block; border:2px solid var(--ink); padding:0 8px; margin-right:6px;
  background:var(--yellow); font-weight:900;
}
.q-text{ font-size:1.05rem; font-weight:700; white-space:pre-wrap; margin-bottom:16px; }
.q-figs img{
  display:block; max-width:100%; height:auto;
  border:2px solid var(--ink); background:#fff;
  margin:10px 0;
}
.q-figs .fig-note{ font-size:.78rem; font-weight:700; color:var(--mute); margin-bottom:10px; }
.choices{ display:grid; gap:12px; }
.choice{ scroll-margin-top:calc(var(--head-h) + 53px);
         scroll-margin-bottom:calc(var(--dock-h, 46vh) + 16px); }
.choice.hl{
  outline:4px solid var(--yellow);
  outline-offset:2px;
  animation:hl-pulse 1.2s ease-in-out 2;
}
@keyframes hl-pulse{
  0%,100%{ outline-color:var(--yellow); }
  50%{ outline-color:var(--magenta); }
}
@media (prefers-reduced-motion:reduce){
  .choice.hl{ animation:none; }
  .qual-btn,.qual-btn:active{ transform:none; transition:none; }
  .btn-main:active{ transform:skew(var(--skew)); box-shadow:6px 6px 0 var(--ink); }
}
.choice{
  display:flex; align-items:flex-start; gap:10px;
  font-family:inherit; font-size:1rem; text-align:left;
  min-height:56px; padding:12px 14px;
  background:var(--paper); border:var(--bw) solid var(--ink); cursor:pointer;
  line-height:1.6;
}
.choice .no{ font-weight:900; flex-shrink:0; }
.choice[data-state="correct"]{ background:var(--lime); }
.choice[data-state="wrong"]{ background:var(--magenta-deep); color:#fff; }
.choice[data-state="answer"]{ background:var(--lime); }
.choice:disabled{ cursor:default; opacity:1; color:inherit; }
.choice[data-state="wrong"]:disabled{ color:#fff; }

/* 判定は選択肢の直後に出す */
.verdict{
  border:var(--bw) solid var(--ink); padding:12px 16px; margin-top:16px;
  font-weight:900; font-size:1.1rem;
}
.verdict.ok{ background:var(--lime); }
.verdict.ng{ background:var(--magenta-deep); color:#fff; }
.next-wrap{ margin-top:16px; }

/* 学びを深める */
.learn{
  border:var(--bw) solid var(--ink); box-shadow:var(--shadow);
  padding:14px 16px; margin-top:16px; background:var(--paper);
}
.learn .learn-head{
  display:inline-block; background:var(--magenta-deep); color:#fff;
  border:2px solid var(--ink); padding:1px 12px;
  transform:var(--skew); font-weight:900; font-size:.85rem;
  margin-bottom:10px;
}
.learn .learn-head span{ display:inline-block; transform:var(--unskew); }
.learn .correct-full{
  background:var(--lime); border:2px solid var(--ink);
  padding:8px 12px; font-weight:700; margin-bottom:10px;
}
.learn .expl{ font-size:.95rem; margin-bottom:10px; white-space:pre-wrap; }
.learn .refs a{
  display:inline-block; color:var(--violet); font-weight:700;
  margin-right:14px; word-break:break-all;
}
.learn .ai-note{
  font-size:.78rem; background:var(--yellow); border:2px solid var(--ink);
  padding:6px 10px; font-weight:700; margin-top:4px;
}

/* 区分の入口（details化。演習開始時にJSがたたむ） */
.intro > summary{
  font-size:1.1rem; font-weight:900; cursor:pointer;
  border-bottom:3px solid var(--ink); padding-bottom:6px; margin-bottom:14px;
  list-style:none;
}
.intro > summary::-webkit-details-marker{ display:none; }
.intro > summary::after{
  content:"たたむ"; float:right;
  font-size:.72rem; font-weight:700;
  border:2px solid var(--ink); padding:1px 10px; background:var(--paper);
}
.intro:not([open]) > summary{ margin-bottom:0; border-bottom:0; }
.intro:not([open]) > summary::after{ content:"ひらく"; background:var(--yellow); }
.intro > summary:focus-visible{ outline:3px solid var(--magenta); outline-offset:2px; }
.intro h3{
  font-size:.98rem; font-weight:900; margin:18px 0 6px;
  border-left:6px solid var(--violet); padding-left:10px;
}
.intro p{ font-size:.92rem; margin-bottom:4px; }
.intro-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  border:var(--bw) solid var(--ink); margin-bottom:6px;
}
.intro-stats div{ padding:12px 14px; border-right:var(--bw) solid var(--ink); }
.intro-stats div:last-child{ border-right:0; }
.intro-stats .n{ font-family:var(--ff-display); font-size:1.7rem; line-height:1; display:block; }
.intro-stats .l{ font-size:.76rem; font-weight:900; display:block; margin-top:4px; }

/* 記録・成績 */
.mystats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  border:var(--bw) solid var(--ink); margin-bottom:16px;
}
.mystats div{ padding:12px 14px; border-right:var(--bw) solid var(--ink); }
.mystats div:last-child{ border-right:0; }
.mystats .n{ font-family:var(--ff-display); font-size:1.7rem; line-height:1; display:block; }
.mystats .l{ font-size:.76rem; font-weight:900; display:block; margin-top:4px; }
.resume-acts{ margin-top:4px; }

/* 分野バー */
.tp{ margin-bottom:12px; }
.tp-head{ display:flex; justify-content:space-between; font-weight:900; font-size:.88rem; gap:10px; }
.tp-head .r{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.tp-bar{ height:16px; border:var(--bw) solid var(--ink); background:var(--paper); margin-top:4px; }
.tp-bar i{ display:block; height:100%; background:var(--lime); }
.tp.weak .tp-bar i{ background:var(--magenta); }
.tp.mid .tp-bar i{ background:var(--yellow); }
.tp-note{ font-size:.78rem; font-weight:700; color:var(--mute); }
.weak-head{
  display:inline-block; background:var(--magenta-deep); color:#fff; border:2px solid var(--ink);
  padding:1px 12px; transform:var(--skew); font-weight:900; font-size:.8rem; margin-bottom:10px;
}
.weak-head span{ display:inline-block; transform:var(--unskew); }
.stats-sec{ margin-bottom:26px; }
.stats-sec h3{ font-size:.98rem; font-weight:900; margin:0 0 10px; border-bottom:var(--bw) solid var(--ink); padding-bottom:5px; }
.hist{ display:flex; align-items:flex-end; gap:4px; height:70px; border-bottom:var(--bw) solid var(--ink); }
.hist b{ flex:1; background:var(--violet); min-width:6px; display:block; }
.hist b.low{ background:var(--magenta); }
.hist-note{ font-size:.76rem; font-weight:700; color:var(--mute); margin-top:6px; }
.score-sub{ text-align:center; font-weight:700; font-size:.86rem; margin-top:6px; }

/* 結果画面 */
.score{ text-align:center; padding:10px 0 4px; }
.score .rate{ font-size:3.2rem; font-weight:900; line-height:1.1; font-family:var(--ff-display); }
.score .detail{ font-weight:700; }
.wrong-item{ border:var(--bw) solid var(--ink); padding:14px; margin-bottom:14px; }
.wrong-item .q-text{ font-size:.98rem; margin-bottom:10px; }
.wrong-item .ans-line{ font-weight:700; padding:4px 10px; border:2px solid var(--ink); margin-top:6px; display:block; }
.wrong-item .ans-line.you{ background:var(--magenta-deep); color:#fff; }
.wrong-item .ans-line.correct{ background:var(--lime); }
.wrong-item .expl{ font-size:.9rem; margin-top:10px; }
.copybox{
  border:var(--bw) solid var(--ink); background:var(--paper);
  padding:14px; white-space:pre-wrap; font-size:.85rem; line-height:1.6;
  max-height:320px; overflow-y:auto; cursor:pointer;
}
.copy-hint{ font-size:.85rem; font-weight:700; margin:8px 0; }
.load-error{ background:var(--yellow); border:var(--bw) solid var(--ink); padding:16px; font-weight:700; }

/* 固定ページ */
.static-doc .doc-updated{ font-size:.8rem; font-weight:700; color:var(--mute); margin-bottom:14px; }
.static-doc h2{ margin-top:22px; }
.static-doc h2:first-of-type{ margin-top:0; }
.static-doc ul,.static-doc ol{ padding-left:22px; margin:8px 0; list-style:disc; }
.static-doc ol{ list-style:decimal; }
.static-doc li{ margin-bottom:6px; font-size:.92rem; }
.static-doc p{ font-size:.92rem; margin-bottom:8px; }
.static-doc a{ color:var(--violet); font-weight:700; }
.guide-steps li{ margin-bottom:12px; }
.static-doc details{ border:var(--bw) solid var(--ink); margin-bottom:10px; }
.static-doc summary{
  cursor:pointer; font-weight:800; padding:14px 52px 14px 16px; list-style:none;
  position:relative; min-height:48px;
}
.static-doc summary::-webkit-details-marker{ display:none; }
.static-doc summary::after{
  content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%);
  font-family:var(--ff-display); font-size:20px;
}
.static-doc details[open] summary{ background:var(--ink); color:#fff; }
.static-doc details[open] summary::after{ content:"−"; }
.static-doc details p{ padding:12px 16px; margin:0; border-top:2px solid var(--ink); }
.guide-cta{ max-width:420px; }
.page-list{ list-style:none !important; padding-left:0 !important; }
.page-list li{
  border-bottom:2px solid var(--ink); padding:8px 0; display:flex;
  justify-content:space-between; gap:12px; flex-wrap:wrap; list-style:none;
}
.page-list a{ font-weight:900; color:var(--violet); }
.page-note{ font-size:.8rem; font-weight:700; color:var(--mute); }

/* ==================================================== ホバー（実サイト準拠） */
@media (hover:hover) and (pointer:fine){
  .btn:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow-lg); }
  .site-nav a:hover{ border-color:var(--ink); }
  .qual-btn:hover{ transform:translate(-3px,-3px); box-shadow:var(--shadow-lg); }
  .foot-grid li:hover::before{ background:var(--lime); }
  .foot-grid a:hover{ text-decoration:underline; }
  @media (prefers-reduced-motion:reduce){
    .btn:hover,.qual-btn:hover{ transform:none; transition:none; }
  }
}
@media (hover:none) and (pointer:coarse){
  input, select, textarea{ font-size:16px; }
  .qual-btn:hover{ transform:none; box-shadow:4px 4px 0 var(--ink); }
}

/* ==================================================== 印刷 */

/* ------------------------------------------ 解説ドック（画面下に固定） */
.learn-dock{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--paper);
  border-top:var(--bw) solid var(--ink);
  box-shadow:0 -6px 0 rgba(17,17,17,.12);
}
.dock-bar{
  display:flex; align-items:center; gap:10px;
  max-width:var(--maxw); margin-inline:auto;
  padding:8px var(--gut);
  flex-wrap:wrap;
}
.dock-verdict{
  font-weight:900; font-size:1rem;
  border:2px solid var(--ink); padding:2px 12px;
}
.dock-verdict.ok{ background:var(--lime); }
.dock-verdict.ng{ background:var(--magenta-deep); color:#fff; }
.dock-toggle{
  font-family:inherit; font-size:.85rem; font-weight:700;
  background:var(--paper); border:2px solid var(--ink);
  padding:8px 14px; cursor:pointer; min-height:44px;
}
.dock-toggle:focus-visible{ outline:3px solid var(--magenta); outline-offset:2px; }
.dock-next{
  margin-left:auto;
  font-family:inherit; font-size:1rem; font-weight:900;
  background:var(--violet); color:#fff;
  border:var(--bw) solid var(--ink);
  padding:8px 22px; min-height:44px; cursor:pointer;
}
.dock-next:focus-visible{ outline:3px solid var(--magenta); outline-offset:2px; }
.dock-body{
  max-height:38vh; overflow-y:auto;
  max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--gut) 12px;
}
.dock-body .learn{ box-shadow:none; margin-top:0; }
.learn-dock.collapsed .dock-body{ display:none; }
/* ドックが開いている間、下端の内容が隠れないように余白を足す
   （高さはJSが実測して --dock-h に入れる。無い場合の初期値だけvh） */
body.dock-open main{ padding-bottom:calc(var(--dock-h, 52vh) + 24px); }
body.dock-open.dock-collapsed main{ padding-bottom:calc(var(--dock-h, 90px) + 24px); }
/* 低い画面（横向き）ではドックの背を抑えて設問側を確保する */
@media (max-height:480px){ .dock-body{ max-height:26vh; } }
@media (max-width:640px){
  .dock-bar{ padding:6px 10px; }
  .dock-next{ padding:8px 14px; }
  .dock-body{ max-height:34vh; }
}
@media print{
  .learn-dock{ position:static; box-shadow:none; }
  body.dock-open main,
  body.dock-open.dock-collapsed main{ padding-bottom:0; }
  .dock-toggle,.dock-next,.drill-timer{ display:none; }
  .learn-dock.collapsed .dock-body{ display:block; }
  .dock-body{ max-height:none; overflow:visible; }
}

@media print{
  .site-head,.site-foot,.no-print,.bookmark{ display:none !important; }
  .card{ box-shadow:none; break-inside:avoid; border-width:2px; }
  body{ font-size:11pt; }
}
@media (max-width:480px){
  .card{ padding:16px 12px; }
  .type-grid{ grid-template-columns:1fr; }
}

/* 区分ページ: 同じ資格の他の種類 / 収録の内訳表 */
.siblings-more{ margin-top:16px; }
.breakdown{ margin-bottom:34px; }
.breakdown h2{ margin-top:26px; }
.breakdown h2:first-of-type{ margin-top:0; }
.bd-table{ width:100%; border-collapse:collapse; margin-top:12px; }
.bd-table th,.bd-table td{
  border:3px solid var(--ink); padding:10px 12px; text-align:left;
  vertical-align:top; font-size:15px;
}
.bd-table th{ background:var(--ink); color:#fff; }
.bd-table td:last-child{ text-align:right; white-space:nowrap; }