/* =====================================================================
   kiokuru.com  共通クイズエンジン CSS
   藍×和紙×朱  セリフ系デザインシステム
   全科目（英語／日本史／古文…）で共用するコア。
   科目固有のカラーは --accent をconfig.jsonから上書き可能。
   ===================================================================== */

:root{
  --navy:#1a2740;
  --navy-deep:#0f1729;
  --navy-soft:#2a3a5a;
  --washi:#f3ead6;
  --washi-dark:#e8dcc0;
  --paper:#faf6ec;
  --vermilion:#c0392b;
  --vermilion-soft:#d35a47;
  --gold:#b8923a;
  --ink:#1a1a1a;
  --ink-soft:#3a3a3a;
  --muted:#7a7466;
  --line:rgba(26,39,64,.12);
  --shadow:0 1px 0 rgba(26,39,64,.04), 0 8px 24px -12px rgba(26,39,64,.18);
  --accent:var(--vermilion); /* 科目別アクセント。config.jsonで上書き */
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overscroll-behavior:none}
body{
  font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
body.in-quiz{overflow:hidden}

/* 和紙テクスチャ */
body::before{
  content:"";
  position:fixed;inset:0;
  background-image:
    radial-gradient(rgba(184,146,58,.04) 1px, transparent 1px),
    radial-gradient(rgba(26,39,64,.025) 1px, transparent 1px);
  background-size:3px 3px, 7px 7px;
  background-position:0 0, 1px 1px;
  pointer-events:none;
  z-index:1;
}

a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------------------------------------------------------------------
   ランディング（科目トップ：ヒーロー + レベルカード + 説明）
   --------------------------------------------------------------------- */
.landing{
  position:relative;z-index:2;
  max-width:640px;
  margin:0 auto;
  padding:28px 20px 80px;
}
.landing .site-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:28px;
}
.landing .site-brand{
  font-family:"Cormorant Garamond",serif;font-weight:600;
  font-size:17px;letter-spacing:.1em;color:var(--navy);
  display:flex;align-items:center;gap:10px;
}
.landing .site-brand .mark{
  display:inline-block;width:18px;height:18px;background:var(--vermilion);
  border-radius:50%;position:relative;
}
.landing .site-brand .mark::after{
  content:"";position:absolute;inset:5px;background:var(--paper);border-radius:50%;
}
.landing .site-nav a{
  font-family:"Cormorant Garamond",serif;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}

.hero{text-align:center;padding:10px 0 34px}
.hero .eyebrow{
  font-family:"Cormorant Garamond",serif;font-size:12px;letter-spacing:.4em;
  text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:14px;
}
.hero h1{
  font-size:34px;color:var(--navy-deep);font-weight:700;letter-spacing:.04em;
  line-height:1.25;margin-bottom:14px;
}
.hero .lede{
  font-size:14px;color:var(--muted);line-height:1.8;max-width:440px;margin:0 auto;
}

.spec-strip{
  display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden;
  margin:26px auto 0;max-width:440px;
}
.spec-strip .item{
  flex:1;padding:14px 10px;background:var(--washi);text-align:center;
  border-right:1px solid var(--line);
}
.spec-strip .item:last-child{border-right:none}
.spec-strip .num{
  font-family:"Cormorant Garamond",serif;font-size:22px;font-weight:600;
  color:var(--navy);line-height:1;margin-bottom:4px;
}
.spec-strip .lbl{font-size:10px;color:var(--muted);letter-spacing:.15em}

/* レベルカード（共通テスト／MARCH／早慶など） */
.level-section{margin-top:40px}
.level-section h2{
  font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
  text-align:center;margin-bottom:18px;font-weight:600;
  font-family:"Cormorant Garamond",serif;
}
.level-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:520px){.level-grid{grid-template-columns:1fr 1fr 1fr}}
.level-card{
  background:var(--paper);border:1px solid var(--line);
  border-left:4px solid var(--card-color,var(--gold));
  padding:18px 20px;cursor:pointer;transition:all .18s ease;
  box-shadow:var(--shadow);border-radius:2px;text-align:left;
  font-family:inherit;
}
.level-card:hover{transform:translateY(-2px);box-shadow:0 2px 0 rgba(26,39,64,.04), 0 14px 28px -14px rgba(26,39,64,.24)}
.level-card:active{transform:translateY(0) scale(.98)}
.level-card .level-en{
  font-family:"Cormorant Garamond",serif;font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:6px;
}
.level-card .level-jp{
  font-size:20px;color:var(--navy-deep);font-weight:700;letter-spacing:.02em;
  margin-bottom:6px;
}
.level-card .level-count{
  font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted);
  letter-spacing:.05em;
}
.level-card .level-desc{
  font-size:12px;color:var(--ink-soft);line-height:1.6;margin-top:10px;
}

/* コンテンツセクション（SEO + AdSense用） */
.prose-section{
  margin-top:56px;padding-top:32px;border-top:1px solid var(--line);
}
.prose-section h2{
  font-size:20px;color:var(--navy-deep);font-weight:700;margin-bottom:18px;
  letter-spacing:.03em;
}
.prose-section h3{
  font-size:15px;color:var(--navy);font-weight:700;margin:22px 0 8px;
}
.prose-section p{
  font-size:14px;color:var(--ink-soft);line-height:1.85;margin-bottom:14px;
}
.prose-section ul{
  list-style:none;padding:0;margin:14px 0;
}
.prose-section ul li{
  padding:8px 0 8px 22px;position:relative;font-size:13.5px;
  color:var(--ink-soft);line-height:1.7;border-bottom:1px dashed var(--line);
}
.prose-section ul li::before{
  content:"●";position:absolute;left:0;top:8px;color:var(--accent);font-size:9px;
}
.prose-section ul li:last-child{border-bottom:none}

.tip-card{
  background:var(--washi);border-left:3px solid var(--accent);
  padding:16px 20px;border-radius:2px;margin:16px 0;
}
.tip-card .tip-label{
  font-family:"Cormorant Garamond",serif;font-size:10px;letter-spacing:.25em;
  text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:6px;
}
.tip-card p{font-size:13px;color:var(--navy-deep);margin:0;line-height:1.7}

/* フッター */
.site-footer{
  margin-top:56px;padding-top:24px;border-top:1px solid var(--line);
  text-align:center;font-family:"JetBrains Mono",monospace;font-size:11px;
  color:var(--muted);letter-spacing:.05em;
}
.site-footer .foot-links{margin-bottom:10px}
.site-footer .foot-links a{margin:0 8px;color:var(--muted)}

/* ---------------------------------------------------------------------
   クイズアプリ（全画面オーバーレイ。レベル選択後に出現）
   --------------------------------------------------------------------- */
.quiz-stage{
  display:none;
  position:fixed;inset:0;z-index:100;
  background:var(--paper);
}
.quiz-stage.active{display:block}
.quiz-stage::before{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(rgba(184,146,58,.04) 1px, transparent 1px),
    radial-gradient(rgba(26,39,64,.025) 1px, transparent 1px);
  background-size:3px 3px, 7px 7px;
  pointer-events:none;
}

.quiz-app{
  position:relative;z-index:2;
  height:100dvh;max-width:480px;margin:0 auto;
  display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

/* ヘッダー */
.quiz-app header{
  flex:0 0 auto;padding:14px 20px 10px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);
}
.quiz-brand{
  font-family:"Cormorant Garamond",serif;font-size:16px;font-weight:600;
  letter-spacing:.08em;color:var(--navy);
  display:flex;align-items:center;gap:8px;
}
.quiz-brand .mark{
  display:inline-block;width:18px;height:18px;background:var(--accent);
  border-radius:50%;position:relative;
}
.quiz-brand .mark::after{
  content:"";position:absolute;inset:5px;background:var(--paper);border-radius:50%;
}
.quiz-close{
  background:none;border:none;font-family:"JetBrains Mono",monospace;
  font-size:12px;color:var(--muted);cursor:pointer;letter-spacing:.1em;padding:4px 8px;
}
.progress-text{
  font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--muted);
  letter-spacing:.05em;
}

/* タイマーバー */
.timer-wrap{
  flex:0 0 auto;height:3px;background:var(--washi-dark);
  position:relative;overflow:hidden;
}
.timer-bar{
  position:absolute;left:0;top:0;bottom:0;width:100%;
  background:linear-gradient(90deg,var(--vermilion) 0%, var(--gold) 100%);
  transform-origin:left;transform:scaleX(1);transition:transform .1s linear;
}
.timer-bar.review{background:linear-gradient(90deg,var(--navy-soft) 0%, var(--navy) 100%)}

/* メイン */
.quiz-app main{
  flex:1 1 auto;display:flex;flex-direction:column;
  padding:24px 20px 16px;overflow:hidden;position:relative;
}

/* 問題 */
.q-stage{flex:0 0 auto;text-align:center;padding:20px 0 28px;position:relative}
.q-label{
  font-family:"Cormorant Garamond",serif;font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px;
}
.q-label::before,.q-label::after{content:"—";margin:0 10px;color:var(--washi-dark)}
.q-word{
  font-family:"Cormorant Garamond",serif;font-weight:500;
  font-size:clamp(32px,8vw,48px);letter-spacing:.01em;color:var(--navy-deep);
  line-height:1.15;word-break:break-word;position:relative;display:inline-block;
}
/* 日本史など日本語問題のときはMinchoに切り替え */
.q-word.jp{font-family:"Shippori Mincho",serif;font-weight:700}
.q-word .pos{
  display:block;font-family:"Shippori Mincho",serif;font-size:11px;
  letter-spacing:.2em;color:var(--accent);margin-top:10px;font-weight:400;
}

.timer-num{
  position:absolute;top:14px;right:0;
  font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--muted);
  font-weight:500;
}
.timer-num.urgent{color:var(--vermilion);font-weight:600}

/* 選択肢 */
.choices{
  flex:1 1 auto;display:flex;flex-direction:column;
  gap:10px;justify-content:center;
}
.choice{
  background:var(--paper);border:1px solid var(--line);
  border-left:3px solid var(--washi-dark);border-radius:2px;
  padding:16px 18px;font-family:"Shippori Mincho",serif;
  font-size:16px;color:var(--ink);text-align:left;cursor:pointer;
  transition:all .18s ease;display:flex;align-items:center;gap:12px;
  min-height:60px;box-shadow:var(--shadow);
}
.choice:active{transform:scale(.98)}
.choice .num{
  font-family:"Cormorant Garamond",serif;font-size:13px;color:var(--muted);
  font-weight:600;letter-spacing:.05em;min-width:18px;
}
.choice .txt{flex:1;line-height:1.4}

.choice.correct{background:#f0f4ee;border-left-color:#5a7a4a;color:#2d4424}
.choice.correct .num{color:#5a7a4a}
.choice.wrong{background:#faeae6;border-left-color:var(--vermilion);color:var(--vermilion)}
.choice.wrong .num{color:var(--vermilion)}
.choice.dim{opacity:.4}
.choices.locked .choice{cursor:default;pointer-events:none}

/* 復習オーバーレイ */
.review-overlay{
  position:absolute;inset:0;background:var(--paper);
  display:flex;flex-direction:column;padding:24px 20px;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.review-overlay.show{opacity:1;pointer-events:auto;cursor:pointer}
.review-overlay.show:active{background:#f5efe0}
.review-result{
  font-family:"Cormorant Garamond",serif;font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;text-align:center;margin-bottom:8px;
}
.review-result.ok{color:#5a7a4a}
.review-result.ng{color:var(--vermilion)}
.review-result.timeout{color:var(--muted)}
.review-word{
  font-family:"Cormorant Garamond",serif;font-size:clamp(28px,7vw,40px);
  font-weight:500;text-align:center;color:var(--navy-deep);
  line-height:1.15;margin-bottom:6px;
}
.review-word.jp{font-family:"Shippori Mincho",serif;font-weight:700}
.review-pron{
  text-align:center;font-family:"JetBrains Mono",monospace;font-size:13px;
  color:var(--muted);margin-bottom:18px;letter-spacing:.02em;
}
.review-meaning-card{
  background:var(--washi);border-left:3px solid var(--accent);
  padding:18px 20px;border-radius:2px;margin-bottom:14px;
}
.review-meaning-label{
  font-family:"Cormorant Garamond",serif;font-size:10px;letter-spacing:.25em;
  text-transform:uppercase;color:var(--accent);margin-bottom:6px;font-weight:600;
}
.review-meaning{font-size:18px;color:var(--navy-deep);font-weight:500;line-height:1.4}

.review-extra{
  flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.review-section{
  margin-bottom:14px;padding-bottom:14px;border-bottom:1px dashed var(--line);
}
.review-section:last-child{border-bottom:none}
.review-section-label{
  font-family:"Cormorant Garamond",serif;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px;
}
.review-example{
  font-family:"Cormorant Garamond",serif;font-size:15px;color:var(--ink-soft);
  font-style:italic;line-height:1.5;margin-bottom:4px;
}
.review-example.jp{font-family:"Shippori Mincho",serif;font-style:normal}
.review-example-ja{font-size:13px;color:var(--muted);line-height:1.5}

.review-footer{
  flex:0 0 auto;padding-top:12px;display:flex;
  align-items:center;justify-content:space-between;
  font-family:"JetBrains Mono",monospace;font-size:11px;
  color:var(--muted);letter-spacing:.05em;
}
.tap-hint{
  font-family:"Cormorant Garamond",serif;font-size:11px;letter-spacing:.25em;
  color:var(--accent);font-weight:600;animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}

/* 結果画面 */
.result-screen{
  position:absolute;inset:0;background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 24px;text-align:center;z-index:10;
}
.result-screen.hide{display:none}
.result-label{
  font-family:"Cormorant Garamond",serif;font-size:11px;letter-spacing:.4em;
  text-transform:uppercase;color:var(--accent);margin-bottom:24px;
}
.result-score{
  font-family:"Cormorant Garamond",serif;font-size:96px;font-weight:600;
  color:var(--navy-deep);line-height:.9;margin-bottom:8px;
}
.result-score .total{font-size:32px;color:var(--muted)}
.result-rate{
  font-family:"JetBrains Mono",monospace;font-size:14px;color:var(--muted);margin-bottom:32px;
}
.result-comment{
  font-size:15px;color:var(--navy-deep);margin-bottom:36px;
  max-width:280px;line-height:1.7;
}
.result-actions{display:flex;gap:10px;width:100%;max-width:300px}
.result-actions button{
  flex:1;padding:14px;border-radius:2px;
  font-family:"Cormorant Garamond",serif;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;cursor:pointer;font-weight:600;border:none;
}
.btn-primary{background:var(--navy);color:var(--paper)}
.btn-secondary{background:var(--washi);color:var(--navy);border:1px solid var(--line) !important}

/* アニメーション */
.fade-in{animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* AdSense用予約スペース */
.ad-slot{flex:0 0 auto;min-height:0}

/* ---------------------------------------------------------------------
   ポータル（kiokuru.com トップの科目カード一覧）
   --------------------------------------------------------------------- */
.portal{
  position:relative;z-index:2;
  max-width:880px;margin:0 auto;padding:32px 20px 80px;
}
.portal-hero{text-align:center;padding:20px 0 40px}
.portal-hero .eyebrow{
  font-family:"Cormorant Garamond",serif;font-size:12px;letter-spacing:.4em;
  text-transform:uppercase;color:var(--vermilion);font-weight:600;margin-bottom:14px;
}
.portal-hero h1{
  font-size:40px;color:var(--navy-deep);font-weight:700;letter-spacing:.05em;
  line-height:1.2;margin-bottom:16px;
}
.portal-hero .sub{
  font-size:15px;color:var(--muted);max-width:520px;margin:0 auto;line-height:1.85;
}

.subject-grid{
  display:grid;grid-template-columns:1fr;gap:14px;margin-top:20px;
}
@media(min-width:640px){.subject-grid{grid-template-columns:1fr 1fr}}
@media(min-width:880px){.subject-grid{grid-template-columns:1fr 1fr 1fr}}

.subject-card{
  background:var(--paper);border:1px solid var(--line);
  border-top:4px solid var(--card-color,var(--gold));
  padding:24px 22px;border-radius:2px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;transition:all .18s ease;position:relative;
}
.subject-card.active{cursor:pointer}
.subject-card.active:hover{transform:translateY(-3px);box-shadow:0 2px 0 rgba(26,39,64,.04), 0 18px 36px -16px rgba(26,39,64,.28)}
.subject-card.coming{opacity:.55;cursor:default}
.subject-card .tag{
  position:absolute;top:14px;right:14px;
  font-family:"Cormorant Garamond",serif;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;padding:4px 8px;background:var(--washi);color:var(--muted);
  border-radius:2px;font-weight:600;
}
.subject-card .tag.new{background:var(--vermilion);color:var(--paper)}
.subject-card .icon{
  font-family:"Cormorant Garamond",serif;font-size:28px;font-weight:600;
  color:var(--card-color,var(--gold));line-height:1;margin-bottom:14px;
}
.subject-card h3{
  font-size:22px;color:var(--navy-deep);font-weight:700;letter-spacing:.02em;
  margin-bottom:4px;
}
.subject-card .name-en{
  font-family:"Cormorant Garamond",serif;font-size:11px;letter-spacing:.25em;
  text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:14px;
}
.subject-card .desc{
  font-size:13px;color:var(--ink-soft);line-height:1.7;margin-bottom:14px;flex:1;
}
.subject-card .meta{
  padding-top:12px;border-top:1px dashed var(--line);
  display:flex;justify-content:space-between;
  font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted);
  letter-spacing:.05em;
}