@charset "UTF-8";
/* ==========================================================================
   gago.css — 雅語 GAGO
   ゆりのための日本語クリニック / Japanese Clinic for Yuri
   --------------------------------------------------------------------------
   基盤 : design.md（141md Editorial Luxury）のカラートークンを完全継承
   意匠 : v2 "Clinic" — 密度を大幅に下げ、余白・細線・軽い字で静けさを作る
   規約 : 純白/純黒/原色 禁止・カードは radius 0・数字は gold・eyebrow は gold-deep
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  /* ---- 背景・サーフェス（design.md §1 そのまま） ---- */
  --lux-bg:             #F8F5F0;
  --lux-bg-soft:        #FBF8F4;
  --lux-surface:        #FEFCF9;
  --lux-hero-base:      #F6F1EA;
  --lux-silk-blush:     #EEDFD5;
  --lux-silk-champagne: #E8D6C3;
  --lux-bg-warm:        #F3ECE4;

  /* ---- テキスト ---- */
  --lux-text:           #3B312B;
  --lux-h2:             #4A3B31;
  --lux-text-soft:      #6D625A;
  --lux-text-muted:     #988A7D;

  /* ---- ゴールド ---- */
  --lux-gold:           #B08A5A;
  --lux-gold-deep:      #8F6B3E;
  --lux-gold-hairline:  rgba(176,138,90,.34);

  /* ---- 罫線 ---- */
  --lux-border:         #DDD2C4;
  --lux-divider:        #EAE2D8;
  --lux-hover-surface:  #F3ECE4;
  --lux-cta-border:     #D6C5B2;

  /* ---- シルク ---- */
  --lux-rose:           #E9B1AE;
  --lux-peach:          #E8D6C3;
  --lux-bluegray:       #B7CCE7;
  --lux-red:            #8F1218;

  /* ---- 影（Clinic: ほぼ無くす） ---- */
  --lux-shadow-card:    none;
  --lux-shadow:         0 10px 34px rgba(83,64,43,.055);

  --lux-radius:         14px;
  --lux-radius-lg:      18px;
  --lux-radius-pill:    999px;

  /* ---- フォント ---- */
  --lux-serif: 'Noto Serif JP','Yu Mincho','YuMincho','Hiragino Mincho ProN',serif;
  --lux-mono:  'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --lux-transition: 200ms cubic-bezier(.2,.8,.2,1);

  /* ======================================================================
     GAGO 拡張（docs/06 §2）
     ====================================================================== */
  --gago-ruby:        var(--lux-text-muted);
  --gago-ruby-size:   .5em;

  --gago-pitch-high:  var(--lux-gold);
  --gago-pitch-low:   var(--lux-border);
  --gago-pitch-drop:  var(--lux-gold-deep);

  --gago-prosody:     var(--lux-gold-deep);

  --gago-lang-sub:    var(--lux-text-muted);
  --gago-lang-size:   12px;

  --gago-pair-a:      var(--lux-bluegray);
  --gago-pair-b:      var(--lux-rose);

  /* ======================================================================
     Clinic 余白スケール ★意匠の核
     ====================================================================== */
  --sp-xs:   10px;
  --sp-s:    20px;
  --sp-m:    40px;
  --sp-l:    72px;
  --sp-xl:   clamp(84px, 11vw, 152px);   /* セクション間 */
  --sp-hero: clamp(88px, 15vw, 200px);   /* Hero 上下 */

  --gago-measure: 720px;                  /* 本文幅（やや狭く＝余白を増やす） */
  --gago-wide:    1120px;
  --gago-gutter:  clamp(22px, 5vw, 56px); /* 左右余白を大きく */

  --lh-body:  2.05;                       /* 行間を広く */
  --ls-body:  .045em;                     /* 字間を広く */
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--lux-bg);
  color:var(--lux-text);
  font-family:var(--lux-serif);
  font-weight:400;
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg{ max-width:100%; height:auto; display:block; }

a{ color:var(--lux-text); text-decoration:none;
   border-bottom:1px solid var(--lux-gold-hairline);
   transition:border-color var(--lux-transition), color var(--lux-transition); }
a:hover{ color:var(--lux-gold-deep); border-bottom-color:var(--lux-gold); }

:focus-visible{ outline:1px solid var(--lux-gold); outline-offset:4px; }

hr{ border:0; border-top:1px solid var(--lux-divider); margin:var(--sp-l) 0; }
::selection{ background:var(--lux-silk-champagne); color:var(--lux-text); }

/* ==========================================================================
   3. TYPOGRAPHY — Clinic: 軽く・広く・静かに
   ========================================================================== */
.eyebrow{
  font-family:var(--lux-mono);
  font-size:10px; font-weight:400;
  letter-spacing:.34em;                    /* さらにワイド */
  text-transform:uppercase;
  color:var(--lux-gold-deep);
  margin:0 0 22px;
}
.kicker{
  font-family:var(--lux-mono);
  font-size:9.5px; font-weight:400;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--lux-gold-deep);
}
.ja{
  font-style:normal;                       /* italic をやめ、静かに */
  font-size:clamp(13px,1.3vw,16px);
  font-weight:300; letter-spacing:.16em;
  color:var(--lux-text-muted);
}

h1,h2,h3,h4{ font-family:var(--lux-serif); margin:0; }
h1{ font-size:clamp(26px,4vw,42px); font-weight:200;
    letter-spacing:.1em; line-height:1.5; }
h2{ font-size:clamp(17px,1.9vw,21px); font-weight:300;
    letter-spacing:.14em; line-height:1.7;
    margin:var(--sp-xl) 0 var(--sp-s);
    padding-bottom:18px; border-bottom:1px solid var(--lux-divider);
    color:var(--lux-h2); }
h3{ font-size:15px; font-weight:400; letter-spacing:.1em;
    color:var(--lux-h2); margin:var(--sp-m) 0 var(--sp-xs); }
h4{ font-size:14px; font-weight:400; letter-spacing:.08em; margin:28px 0 8px; }

p,li{ font-size:15px; }
p{ margin:0 0 var(--sp-s); }
li{ margin-bottom:8px; }
strong{ font-weight:500; color:var(--lux-text); }
small{ font-size:12px; color:var(--lux-text-soft); }

blockquote{
  margin:var(--sp-m) 0; padding:var(--sp-s) 0 var(--sp-s) var(--sp-s);
  border-left:1px solid var(--lux-gold-hairline);
  background:transparent;
  color:var(--lux-text-soft); font-size:14.5px;
}
blockquote cite{
  display:block; margin-top:14px;
  font-family:var(--lux-mono); font-size:9.5px; font-style:normal;
  letter-spacing:.2em; color:var(--lux-gold-deep);
}

code{ font-family:var(--lux-mono); font-size:.9em;
      background:var(--lux-bg-soft); padding:2px 7px; }

/* ==========================================================================
   4. LAYOUT — 余白が主役
   ========================================================================== */
.page{ max-width:var(--gago-wide); margin:0 auto; padding:0 var(--gago-gutter); }

main.reader{
  max-width:var(--gago-measure);
  margin:0 auto;
  padding:var(--sp-l) var(--gago-gutter) clamp(120px,16vw,200px);
}

.section{ padding:var(--sp-xl) 0 0; }
.section-header{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--sp-m); padding-bottom:26px; margin-bottom:var(--sp-m);
  border-bottom:1px solid var(--lux-divider);
}
.section-count{
  font-family:var(--lux-serif); font-size:clamp(26px,3vw,38px);
  font-weight:200; color:var(--lux-gold); line-height:1;
  letter-spacing:.02em; white-space:nowrap;
}
.section-count .unit{ font-size:.34em; color:var(--lux-gold-deep);
  margin-left:6px; letter-spacing:.14em; }

/* ==========================================================================
   5. MASTHEAD / HERO
   ========================================================================== */
.masthead{
  border-bottom:1px solid var(--lux-divider);
  padding:24px var(--gago-gutter);
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-s);
}
.masthead .logo{
  font-family:var(--lux-serif); font-size:17px; font-weight:300;
  letter-spacing:.3em; color:var(--lux-text); border:0;
}
.masthead .logo .en{
  font-family:var(--lux-mono); font-size:9.5px; font-weight:400;
  letter-spacing:.36em; color:var(--lux-gold-deep); margin-left:14px;
}
.masthead nav{ display:flex; gap:var(--sp-s); }
.masthead nav a{
  font-family:var(--lux-mono); font-size:9px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--lux-text-muted); border:0;
}
.masthead nav a:hover{ color:var(--lux-gold-deep); }

/* --- Hero --- */
.hero{ padding:var(--sp-hero) 0 clamp(56px,9vw,110px); text-align:center; }
.hero .title{
  font-size:clamp(52px,11vw,124px); font-weight:200;
  letter-spacing:.2em; line-height:1.1; margin:0 0 var(--sp-m);
  text-indent:.2em;                      /* letter-spacing の右余りを補正 */
}
.hero .title .en{
  display:block; font-family:var(--lux-mono);
  font-size:clamp(9px,1.1vw,11px); font-weight:400;
  letter-spacing:.52em; text-transform:uppercase;
  color:var(--lux-gold-deep); margin-top:var(--sp-m); text-indent:.52em;
}
.hero .sub{ margin:0; }

/* Hero下の細い金線（クリニックの静かな装飾） */
.hero::after{
  content:''; display:block; width:38px; height:1px;
  background:var(--lux-gold); margin:var(--sp-l) auto 0; opacity:.6;
}

/* --- KPI --- */
.kpi-row{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(40px,8vw,110px); margin:var(--sp-l) 0 0;
}
.kpi-row > div{ text-align:center; }
.kpi-num{
  font-family:var(--lux-serif); font-size:clamp(34px,4.4vw,58px);
  font-weight:200; color:var(--lux-gold); line-height:1; letter-spacing:.02em;
}
.kpi-label{
  font-family:var(--lux-mono); font-size:9px; font-weight:400;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--lux-gold-deep); margin-top:14px;
}

/* ==========================================================================
   6. CARD — Clinic: 影を消し、線を細く、内側を広く
   ========================================================================== */
.card-list{ display:flex; flex-direction:column; gap:var(--sp-xs); }
.card{
  display:grid; grid-template-columns:132px 1fr 76px;
  align-items:stretch; min-height:132px;
  background:var(--lux-surface);
  border:1px solid var(--lux-divider);
  border-left:1px solid var(--lux-rose);
  border-radius:0; box-shadow:var(--lux-shadow-card);
  transition:border-color var(--lux-transition), background var(--lux-transition);
}
.card.variant-blue{ border-left-color:var(--lux-bluegray); }
.card.variant-gold{ border-left-color:var(--lux-peach); }
.card__num{
  padding:var(--sp-s) 0; border-right:1px solid var(--lux-divider);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--lux-serif); font-size:42px; font-weight:200;
  color:var(--lux-gold); line-height:1; letter-spacing:.04em;
}
.card__body{ padding:var(--sp-m) clamp(24px,3.4vw,44px); align-self:center; min-width:0; }
.card__kicker{ font-family:var(--lux-mono); font-size:9px; font-weight:400;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--lux-gold-deep); margin-bottom:14px; }
.card__title{ font-size:clamp(17px,1.5vw,21px); font-weight:300;
  letter-spacing:.1em; line-height:1.6; margin:0 0 10px; color:var(--lux-text); }
.card__sub{ font-size:12.5px; line-height:1.9; color:var(--lux-text-soft);
  max-width:640px; margin:0; }
.card__arrow{
  align-self:center; justify-self:center;
  width:38px; height:38px; border-radius:50%;
  background:transparent; border:1px solid var(--lux-cta-border);
  display:flex; align-items:center; justify-content:center; border-bottom-width:1px;
  transition:background var(--lux-transition), border-color var(--lux-transition);
}
.card__arrow::before{
  content:''; width:7px; height:7px;
  border-top:1px solid var(--lux-gold-deep);
  border-right:1px solid var(--lux-gold-deep);
  transform:rotate(45deg) translate(-1px,1px);
}
@media (min-width:720px){
  .card:hover{ background:var(--lux-bg-soft);
    border-color:var(--lux-cta-border); border-left-color:var(--lux-gold); }
  .card:hover .card__arrow{ border-color:var(--lux-gold); }
}

/* ==========================================================================
   7. CHAPTER HEADER
   ========================================================================== */
.chapter-head{
  padding:0 0 var(--sp-m);
  border-bottom:1px solid var(--lux-divider); margin-bottom:var(--sp-s);
}
.chapter-head h1{ margin:0 0 var(--sp-s); }
.chapter-meta{
  display:flex; flex-wrap:wrap; gap:var(--sp-m); margin-top:var(--sp-m);
  font-family:var(--lux-mono); font-size:9px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--lux-text-muted);
}
.chapter-meta b{ color:var(--lux-gold); font-family:var(--lux-serif);
  font-size:16px; font-weight:200; letter-spacing:.02em; margin-right:7px; }

/* ==========================================================================
   8. WORD CARD — Clinic: 施術台のような広い余白
   ========================================================================== */
.word-card{
  background:var(--lux-surface);
  border:1px solid var(--lux-divider);
  border-top:1px solid var(--lux-gold-hairline);
  border-radius:0; box-shadow:none;
  padding:clamp(36px,5vw,56px) clamp(22px,4vw,52px);
  margin:var(--sp-m) 0;
}
.word-card__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-s); margin-bottom:var(--sp-m);
  padding-bottom:var(--sp-s); border-bottom:1px solid var(--lux-divider);
}
.word-card__no{
  font-family:var(--lux-serif); font-size:30px; font-weight:200;
  color:var(--lux-gold); line-height:1; letter-spacing:.06em;
}
.word-card__stars{ font-size:10px; letter-spacing:.4em; color:var(--lux-gold); }

.word-headword{
  font-size:clamp(30px,3.6vw,46px); font-weight:200;
  letter-spacing:.16em; line-height:1.5; margin:0; text-indent:.16em;
}
.word-headword .warn{
  font-size:.34em; color:var(--lux-gold-deep); vertical-align:.6em;
  margin-left:10px; letter-spacing:0; }
.word-reading{
  font-family:var(--lux-mono); font-size:12px; letter-spacing:.22em;
  color:var(--lux-text-soft); margin:14px 0 0; }

/* --- 欄 --- */
.field{
  display:grid; grid-template-columns:104px 1fr; gap:var(--sp-s);
  padding:var(--sp-s) 0; border-top:1px solid var(--lux-divider);
  align-items:start;
}
.field__label{
  font-family:var(--lux-mono); font-size:9px; font-weight:400;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--lux-gold-deep); padding-top:6px;
}
.field__body{ font-size:14px; line-height:2; min-width:0; }
.field__body p{ margin:0 0 10px; font-size:14px; }
.field__body p:last-child{ margin:0; }

/* --- 定義 --- */
.definition{
  margin:var(--sp-m) 0; padding:var(--sp-s) 0 var(--sp-s) var(--sp-s);
  background:transparent; border-left:1px solid var(--lux-gold);
  font-size:16px; font-weight:300; letter-spacing:.06em; line-height:2;
}
.definition .src{
  display:block; margin-top:16px;
  font-family:var(--lux-mono); font-size:9px; letter-spacing:.2em;
  color:var(--lux-gold-deep);
}

/* --- 語構成 --- */
.composition{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.composition .unit{
  border:1px solid var(--lux-divider); background:transparent;
  padding:12px 18px; text-align:center; min-width:74px;
}
.composition .unit .c{ font-size:22px; font-weight:300; display:block;
  line-height:1.4; letter-spacing:.06em; }
.composition .unit .g{ font-family:var(--lux-mono); font-size:8.5px;
  letter-spacing:.14em; color:var(--lux-text-muted); }
.composition .op{ color:var(--lux-gold); font-size:14px; }

/* --- チップ --- */
.chip{
  display:inline-block; margin:0 10px 10px 0; padding:6px 16px;
  border:1px solid var(--lux-divider); border-radius:var(--lux-radius-pill);
  background:transparent; font-size:12.5px; letter-spacing:.06em;
  color:var(--lux-text-soft);
}
.chip .rt{ font-family:var(--lux-mono); font-size:9px;
  color:var(--lux-text-muted); margin-left:8px; letter-spacing:.1em; }

/* --- レジスター --- */
.register{
  display:inline-block; padding:5px 16px; border-radius:var(--lux-radius-pill);
  font-family:var(--lux-mono); font-size:9px; letter-spacing:.22em;
  text-transform:uppercase; background:var(--lux-bg-soft);
  border:1px solid var(--lux-divider); color:var(--lux-gold-deep);
}
.register[data-level="hard-academic"]{ border-color:#D9D2E4; color:#5A4D7A; }
.register[data-level="neutral"]{ border-color:#D3E0D6; color:#3D5C46; }

/* --- 境界 --- */
.boundary{ border-left:1px solid var(--lux-gold-hairline);
  padding-left:var(--sp-s); color:var(--lux-text-soft); font-size:14px; }

/* ==========================================================================
   9. 三言語併記
   ========================================================================== */
.lang-note{
  margin-top:var(--sp-m); padding-top:var(--sp-s);
  border-top:1px solid var(--lux-divider);
  font-size:var(--gago-lang-size); line-height:2; color:var(--gago-lang-sub);
  display:flex; flex-wrap:wrap; gap:10px var(--sp-m); letter-spacing:.06em;
}
.lang-note .tag{
  font-family:var(--lux-mono); font-size:8.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--lux-gold-deep); margin-right:10px;
}
.lang-note .py{ font-family:var(--lux-mono); font-size:10.5px; letter-spacing:.08em; }

details.divergence{ margin-top:var(--sp-s); }
details.divergence > summary{
  cursor:pointer; list-style:none;
  font-family:var(--lux-mono); font-size:9px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--lux-gold-deep);
  padding:10px 0; display:flex; align-items:center; gap:12px;
}
details.divergence > summary::-webkit-details-marker{ display:none; }
details.divergence > summary::before{
  content:'+'; display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border:1px solid var(--lux-cta-border);
  border-radius:50%; color:var(--lux-gold-deep);
  font-family:var(--lux-mono); font-size:10px;
}
details.divergence[open] > summary::before{ content:'−'; }
details.divergence > .body{
  padding:var(--sp-s) 0 var(--sp-s) var(--sp-s); margin-top:10px;
  background:transparent; border-left:1px solid var(--lux-bluegray);
  font-size:13.5px; color:var(--lux-text-soft); line-height:2;
}

/* ==========================================================================
   10. RUBY / PITCH / PROSODY
   ========================================================================== */
ruby{ ruby-position:over; }
rt{
  font-family:var(--lux-serif); font-size:var(--gago-ruby-size);
  font-weight:300; color:var(--gago-ruby);
  letter-spacing:.06em; user-select:none;
}
body.no-ruby rt{ visibility:hidden; }

.accent{ display:inline-flex; align-items:flex-end; gap:var(--sp-s); vertical-align:baseline; }
.accent__type{
  font-family:var(--lux-mono); font-size:10px; font-weight:400;
  letter-spacing:.18em; color:var(--lux-gold-deep);
}
.pitch{ display:inline-flex; align-items:flex-end; height:26px; }
.pitch .mora{
  position:relative; min-width:18px; padding:0 4px;
  font-family:var(--lux-mono); font-size:11.5px; color:var(--lux-text-soft);
  display:flex; align-items:flex-end; justify-content:center; height:100%;
}
.pitch .mora::before{
  content:''; position:absolute; left:0; right:0; height:0;
  border-top:1px solid var(--gago-pitch-low); bottom:5px;
}
.pitch .mora.hi::before{ border-top-color:var(--gago-pitch-high); bottom:19px; }
.pitch .mora.drop::after{
  content:''; position:absolute; right:0; bottom:5px; width:0; height:14px;
  border-right:1px solid var(--gago-pitch-drop);
}

/* --- 音読み導出 --- */
.derive{
  font-family:var(--lux-mono); font-size:11.5px; line-height:2.6;
  letter-spacing:.08em; color:var(--lux-text-soft);
  background:transparent; border:1px solid var(--lux-divider);
  padding:var(--sp-s) clamp(18px,3vw,32px); overflow-x:auto;
}
.derive .rule{ color:var(--lux-gold-deep); }
.derive .out{ color:var(--lux-gold); font-family:var(--lux-serif);
  font-size:15px; font-weight:300; letter-spacing:.1em; }

/* --- プロソディ --- */
.prosody{ color:var(--gago-prosody); font-family:var(--lux-mono);
  font-size:.8em; padding:0 4px; user-select:none; opacity:.75; }
body.no-prosody .prosody{ display:none; }
.prom{ font-weight:500; color:var(--lux-text); }

/* ==========================================================================
   11. AUDIO BAR
   ========================================================================== */
.audio-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-s);
  padding:var(--sp-s) 0;
}
.play-btn{
  width:46px; height:46px; border-radius:50%; flex:0 0 auto;
  background:transparent; border:1px solid var(--lux-cta-border);
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
  transition:background var(--lux-transition), border-color var(--lux-transition);
}
.play-btn::before{
  content:''; width:0; height:0; margin-left:3px;
  border-left:10px solid var(--lux-gold-deep);
  border-top:6px solid transparent; border-bottom:6px solid transparent;
}
.play-btn[data-state="playing"]::before{
  width:9px; height:12px; margin-left:0; border:0;
  border-left:2px solid var(--lux-gold-deep);
  border-right:2px solid var(--lux-gold-deep); background:transparent;
}
.play-btn:hover{ background:var(--lux-bg-soft); border-color:var(--lux-gold); }

.speed-group{ display:flex; gap:8px; }
.speed-btn{
  font-family:var(--lux-mono); font-size:9px; letter-spacing:.18em;
  padding:8px 16px; border-radius:var(--lux-radius-pill);
  border:1px solid var(--lux-divider); background:transparent;
  color:var(--lux-text-muted); cursor:pointer;
  transition:border-color var(--lux-transition), color var(--lux-transition);
}
.speed-btn[aria-pressed="true"]{ border-color:var(--lux-gold); color:var(--lux-gold-deep); }
.speed-btn:hover{ border-color:var(--lux-cta-border); }

.toggle-group{ display:flex; flex-wrap:wrap; gap:var(--sp-s); margin-left:auto; }
.toggle{ display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--lux-mono); font-size:9px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--lux-text-muted); }
.toggle input{ appearance:none; width:13px; height:13px; margin:0;
  border:1px solid var(--lux-cta-border); background:transparent; cursor:pointer; }
.toggle input:checked{ background:var(--lux-gold); border-color:var(--lux-gold); }

/* ==========================================================================
   12. 音読パート
   ========================================================================== */
.reading-block{
  background:var(--lux-surface); border:1px solid var(--lux-divider);
  border-top:1px solid var(--lux-gold-hairline);
  padding:clamp(32px,5vw,56px) clamp(22px,4vw,48px); margin:var(--sp-m) 0;
}
.reading-text{
  font-size:clamp(16px,1.8vw,19px); line-height:3.4;   /* ルビの上に十分な空 */
  font-weight:300; letter-spacing:.09em; margin:var(--sp-m) 0 0;
}
.reading-src{
  margin-top:var(--sp-m); padding-top:var(--sp-s);
  border-top:1px solid var(--lux-divider);
  font-family:var(--lux-mono); font-size:9px; letter-spacing:.2em;
  color:var(--lux-gold-deep);
}

.shadow-steps{ counter-reset:step; list-style:none;
  margin:var(--sp-m) 0 0; padding:0; display:grid; gap:var(--sp-xs); }
.shadow-steps li{
  counter-increment:step; position:relative;
  padding:18px 20px 18px 62px; background:transparent;
  border-top:1px solid var(--lux-divider); font-size:13.5px; margin:0;
}
.shadow-steps li::before{
  content:counter(step); position:absolute; left:20px; top:16px;
  font-family:var(--lux-serif); font-size:20px; font-weight:200;
  color:var(--lux-gold); line-height:1;
}

/* ==========================================================================
   13. 対立ペア
   ========================================================================== */
.pair{
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:stretch; margin:var(--sp-m) 0;
  border:1px solid var(--lux-divider); background:var(--lux-surface);
}
.pair__side{ padding:clamp(26px,4vw,44px) clamp(22px,3.4vw,40px); }
.pair__side.a{ border-left:1px solid var(--gago-pair-a); }
.pair__side.b{ border-left:1px solid var(--gago-pair-b); }
.pair__word{ font-size:clamp(21px,2.4vw,28px); font-weight:200;
  letter-spacing:.16em; margin:0 0 12px; text-indent:.16em; }
.pair__gloss{ font-size:12.5px; color:var(--lux-text-soft); margin:0; line-height:1.9; }
.pair__axis{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 var(--sp-s); border-left:1px solid var(--lux-divider);
  border-right:1px solid var(--lux-divider); background:transparent;
  font-family:var(--lux-mono); font-size:8.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--lux-gold-deep); text-align:center; gap:10px;
}
.pair__axis::before{ content:'⟷'; font-size:15px; color:var(--lux-gold);
  letter-spacing:0; font-family:var(--lux-serif); }

/* ==========================================================================
   14. 類語表・引用
   ========================================================================== */
.syn-table{ width:100%; border-collapse:collapse; margin:var(--sp-s) 0; font-size:14px; }
.syn-table th,.syn-table td{ text-align:left; padding:16px 18px;
  border-bottom:1px solid var(--lux-divider); vertical-align:top; }
.syn-table thead th{
  font-family:var(--lux-mono); font-size:9px; font-weight:400;
  letter-spacing:.26em; text-transform:uppercase; color:var(--lux-gold-deep);
  border-bottom:1px solid var(--lux-border); padding-bottom:14px; }
.syn-table td:first-child{ white-space:nowrap; font-size:15px; letter-spacing:.08em; }
@media (min-width:720px){ .syn-table tbody tr:hover{ background:var(--lux-bg-soft); } }

.quote-card{
  margin:var(--sp-m) 0; padding:var(--sp-m) 0 var(--sp-m) var(--sp-m);
  background:transparent; border-left:1px solid var(--lux-gold);
}
.quote-card .q{ font-size:16px; line-height:2.3; margin:0;
  font-weight:300; letter-spacing:.06em; }
.quote-card .src{ display:block; margin-top:18px;
  font-family:var(--lux-mono); font-size:9px; letter-spacing:.2em;
  color:var(--lux-gold-deep); }

/* ==========================================================================
   15. 確度バッジ
   ========================================================================== */
.tag-fact,.tag-infer,.tag-hyp{
  display:inline-block; padding:4px 12px; border-radius:var(--lux-radius-pill);
  font-family:var(--lux-mono); font-size:8.5px; letter-spacing:.22em;
  text-transform:uppercase; vertical-align:.14em;
  background:transparent; border:1px solid;
}
.tag-fact { border-color:#C6D8C9; color:#3D5C46; }
.tag-infer{ border-color:#D2C9E0; color:#5A4D7A; }
.tag-hyp  { border-color:var(--lux-cta-border); color:#8F6B3E; }

/* ==========================================================================
   16. 留白 — 最も余白を取るブロック
   ========================================================================== */
.blank{
  margin:var(--sp-l) 0; padding:clamp(44px,7vw,80px) clamp(24px,5vw,64px);
  border:1px solid var(--lux-gold-hairline); background:transparent;
  position:relative; text-align:center;
}
.blank::before{
  content:'留 白'; position:absolute; top:-9px; left:50%;
  transform:translateX(-50%); background:var(--lux-bg); padding:0 18px;
  font-family:var(--lux-mono); font-size:8.5px; letter-spacing:.42em;
  color:var(--lux-gold-deep);
}
.blank .q{ font-size:clamp(15px,1.9vw,18px); line-height:2.6;
  font-weight:300; margin:0; letter-spacing:.09em; }

/* ==========================================================================
   17. 点検欄 / ナビ / フッター
   ========================================================================== */
.review-box{
  margin:var(--sp-l) 0; padding:var(--sp-m) clamp(22px,4vw,44px);
  border:1px solid var(--lux-divider); background:transparent;
  font-size:13.5px; color:var(--lux-text-soft);
}
.review-box h3{ margin:0 0 14px; font-size:13px; color:var(--lux-text);
  font-family:var(--lux-mono); font-size:9px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--lux-gold-deep); }

.chapter-nav{
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-s);
  margin-top:var(--sp-xl); padding-top:var(--sp-m);
  border-top:1px solid var(--lux-divider);
  font-family:var(--lux-mono); font-size:9px; letter-spacing:.26em;
  text-transform:uppercase;
}
.chapter-nav a{ border:0; color:var(--lux-text-muted); }
.chapter-nav a:hover{ color:var(--lux-gold-deep); }

.site-footer{
  border-top:1px solid var(--lux-divider); margin-top:var(--sp-xl);
  padding:var(--sp-m) var(--gago-gutter) var(--sp-l);
  font-family:var(--lux-mono); font-size:9px; letter-spacing:.3em;
  color:var(--lux-text-muted); text-align:center;
}

/* ==========================================================================
   18. TABLE
   ========================================================================== */
main table{ width:100%; border-collapse:collapse; margin:var(--sp-s) 0; font-size:14px; }
main th,main td{ text-align:left; padding:16px 18px;
  border-bottom:1px solid var(--lux-divider); vertical-align:top; line-height:1.9; }
main thead th{
  font-family:var(--lux-mono); font-size:9px; font-weight:400;
  letter-spacing:.26em; text-transform:uppercase; color:var(--lux-gold-deep);
  border-bottom:1px solid var(--lux-border); padding-bottom:14px; }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ==========================================================================
   19. RESPONSIVE
   ========================================================================== */
@media (max-width:960px){
  .card{ grid-template-columns:100px 1fr 60px; }
  .card__num{ font-size:32px; }
}
@media (max-width:768px){
  .masthead{ flex-direction:column; align-items:flex-start; gap:16px; }
  .masthead nav{ flex-wrap:wrap; gap:16px; }
  .section-header{ flex-direction:column; align-items:flex-start; gap:16px; }
  .pair{ grid-template-columns:1fr; }
  .pair__axis{ border-left:0; border-right:0;
    border-top:1px solid var(--lux-divider); border-bottom:1px solid var(--lux-divider);
    flex-direction:row; padding:14px; gap:14px; }
  .pair__side.b{ border-left:1px solid var(--gago-pair-b); }
}
@media (max-width:640px){
  :root{ --lh-body:1.95; }
  .card{ grid-template-columns:1fr; }
  .card__num{ border-right:0; border-bottom:1px solid var(--lux-divider);
    justify-content:flex-start; padding:18px 24px; font-size:28px; }
  .card__arrow{ display:none; }
  .field{ grid-template-columns:1fr; gap:8px; }
  .field__label{ padding-top:0; }
  .toggle-group{ margin-left:0; width:100%; }
  .reading-text{ line-height:3.1; }
  .syn-table td:first-child{ white-space:normal; }
  main table{ font-size:13px; }
  main th,main td{ padding:12px 12px; }
  .hero .title{ letter-spacing:.14em; text-indent:.14em; }
}

/* ==========================================================================
   20. MOTION / PRINT
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
  html{ scroll-behavior:auto; }
}
@media print{
  body{ background:#fff; color:#000; }
  .masthead nav,.audio-bar,.chapter-nav,.site-footer,
  .card__arrow,.review-box,.toggle-group{ display:none !important; }
  main.reader,.page{ max-width:none; padding:0; }
  rt{ visibility:visible !important; color:#555; }
  .prosody{ display:inline !important; }
  .word-card,.reading-block,.pair,.blank{ break-inside:avoid; }
  h2{ break-before:page; }
  a{ border:0; }
}