/* ============================================================
   会計エンテック事務所 — Site stylesheet
   v2.0 · 2026-10-26
   Tokens → base → layout → header → sections → courses → member
   → forms → footer → responsive → a11y
   ============================================================ */

/* ============ Design Tokens ============ */
:root{
  /* Ink scale — neutral cool grey, 10 steps */
  --ink-950:#0E1113;
  --ink-900:#161A1D;
  --ink-800:#23292E;
  --ink-700:#333A41;
  --ink-600:#4A525A;   /* body text · 7.67:1 on paper (AAA) */
  --ink-500:#6A737C;   /* meta text · 4.66:1 (AA) */
  --ink-400:#8F979F;
  --ink-300:#B6BDC4;
  --ink-200:#D6DBDF;
  --ink-100:#E9ECEE;
  --ink-50:#F4F6F7;
  --paper:#FBFBFA;
  --seal:#A63A28;      /* 朱 · 6.23:1 on paper */
  --seal-soft:#C25A44;
  --white:#FFFFFF;

  /* --- 枠 session colour ---------------------------------------------
     The logo's solid square reads --square-500. 会議ごとに差し色を変える
     運用のため、この 5 値を差し替えるだけでロゴ・CTA・focus が揃って変わる。
     初期値 = 翠 エメラルド #1DC386。許可色は 9 色（design-system 05 節）。
     深底では必ず --square-dark を使う（--square-700 は 2.84:1 で失格）。
     全亮版（框と方塊を同色）は 16px で 2.28:1・可辨識 0% のため禁止。 */
  --square-100:#E4F8F0;   /* tint / background   */
  --square-500:#1DC386;   /* default square fill */
  --square-600:#19A874;   /* hover               */
  --square-700:#117952;   /* deep · 5.41:1 on paper — 文字可 */
  --square-dark:#1DC386;  /* on --ink-900        */
  --dark-bg:#161A1D;

  --font-serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --font-sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --fs-xs:0.75rem;   /* 12 */
  --fs-sm:0.8125rem; /* 13 */
  --fs-base:0.9375rem;/* 15 */
  --fs-md:1.0625rem; /* 17 */
  --fs-lg:1.375rem;  /* 22 */
  --fs-xl:1.75rem;   /* 28 */
  --fs-2xl:2.25rem;  /* 36 */
  --fs-3xl:3rem;     /* 48 */
  --fs-4xl:3.75rem;  /* 60 */

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-6:24px; --sp-8:32px; --sp-12:48px; --sp-16:64px;
  --sp-24:96px; --sp-32:128px;

  --radius:2px;
  --rule:1px solid var(--ink-200);
  --maxw:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink-600);
  font-family:var(--font-sans);font-size:var(--fs-base);line-height:1.85;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-serif);color:var(--ink-900);margin:0;font-weight:700;line-height:1.32;letter-spacing:.01em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}

:focus-visible{outline:2px solid var(--ink-900);outline-offset:3px}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink-900);color:#fff;
  padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm)
}
.skip:focus{left:var(--sp-4);top:var(--sp-4)}

/* ============ Layout ============ */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-6)}
.sec{padding:var(--sp-24) 0;border-top:var(--rule)}
.sec--tight{padding:var(--sp-24) 0}
.sec--dark{background:var(--ink-900);border-top:none;color:var(--ink-300)}
.sec--dark h2,.sec--dark h3{color:var(--paper)}
.sec--tint{background:var(--ink-50);border-top:var(--rule)}

.eyebrow{
  font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-500);display:flex;align-items:center;gap:var(--sp-3)
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--ink-400);display:block}

.sec-head{display:grid;grid-template-columns:1fr;gap:var(--sp-4);margin-bottom:var(--sp-12)}
.sec-head h2{font-size:var(--fs-2xl);letter-spacing:0}
.sec-head p{max-width:46ch;font-size:var(--fs-base)}
.num{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.1em;color:var(--seal);font-weight:400}

/* ============ Header ============ */
.hdr{
  position:sticky;top:0;z-index:100;background:rgba(251,251,250,.94);
  backdrop-filter:blur(8px);border-bottom:var(--rule)
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);height:72px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand__logo{display:block;width:210px;height:auto;flex-shrink:0}
.brand__mark{width:26px;height:26px;display:block;color:var(--ink-800);flex-shrink:0}
.brand__txt{font-family:var(--font-serif);font-weight:700;font-size:15px;letter-spacing:.06em;color:var(--ink-900);line-height:1.2}
.nav{display:none;gap:var(--sp-8);align-items:center}
.nav a{
  font-size:var(--fs-sm);color:var(--ink-600);position:relative;padding:var(--sp-2) 0;
  transition:color .2s var(--ease)
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--ink-900);
  transition:width .28s var(--ease)
}
.nav a:hover{color:var(--ink-900)}
.nav a:hover::after{width:100%}
.nav a[aria-current="page"]{color:var(--ink-900)}
.nav a[aria-current="page"]::after{width:100%;background:var(--seal)}
.hdr__right{display:flex;align-items:center;gap:var(--sp-3)}

/* The HTML `hidden` attribute must win over any component display rule.
   Without this, `.mbr__user{display:inline-flex}` overrode `hidden` and the
   header rendered the sign-in link and the signed-in chip at the same time. */
[hidden]{display:none !important}

/* ============ Language visibility (ja / zh-Hant / en) ============ */
/* Every translatable node ships all locales in one DOM; only the active one renders.
   This keeps a single URL working for the prototype and guarantees no locale is
   ever empty — see design-system.html → 「語系切換」for the production URL strategy. */
html[data-lang="ja"] .t[data-l="zh"],
html[data-lang="ja"] .t[data-l="en"]{display:none}
html[data-lang="zh"] .t[data-l="ja"],
html[data-lang="zh"] .t[data-l="en"]{display:none}
html[data-lang="en"] .t[data-l="ja"],
html[data-lang="en"] .t[data-l="zh"]{display:none}
/* English runs longer — relax the tight CJK tracking so lines don't collide */
html[data-lang="en"] .hero h1,
html[data-lang="en"] .phero h1{letter-spacing:-.02em;line-height:1.18}
html[data-lang="en"] .eyebrow{letter-spacing:.14em}

/* Language switch — 3 locales */
.lang{
  display:flex;border:var(--rule);border-radius:var(--radius);overflow:hidden;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;flex-shrink:0
}
.lang button{
  background:none;border:none;padding:6px 9px;cursor:pointer;color:var(--ink-500);
  transition:background .18s,color .18s;min-height:32px;line-height:1
}
.lang button:hover{background:var(--ink-50);color:var(--ink-900)}
.lang button[aria-pressed="true"]{background:var(--ink-900);color:var(--paper)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:500;
  padding:11px 20px;border-radius:var(--radius);border:1px solid var(--ink-900);
  background:var(--ink-900);color:var(--paper);cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease),border-color .2s;
  min-height:44px;letter-spacing:.02em;text-align:center
}
.btn:hover{background:var(--ink-700);border-color:var(--ink-700)}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;color:var(--ink-900)}
.btn--ghost:hover{background:var(--ink-50);color:var(--ink-900)}
.btn--light{background:var(--paper);border-color:var(--paper);color:var(--ink-900)}
.btn--light:hover{background:#fff;border-color:#fff}
.btn--sm{padding:8px 14px;font-size:var(--fs-xs);min-height:44px}
.btn--block{width:100%}
.btn__arrow{transition:transform .24s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(3px)}
.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}

/* Member area — header */
.mbr{display:none;align-items:center;gap:var(--sp-2)}
.mbr__login{
  display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:var(--fs-xs);color:var(--ink-600);
  padding:8px 10px;min-height:44px;border:0;border-radius:var(--radius);background:none;transition:color .2s,background .2s
}
.mbr__login:hover{color:var(--ink-900);background:var(--ink-50)}
.mbr__login svg{width:15px;height:15px}
.mbr__login--disabled,.mbr__login--disabled:hover{
  color:var(--ink-400);background:var(--ink-50);border:1px solid var(--ink-200);cursor:not-allowed
}
.mnav__disabled{
  display:flex;align-items:center;min-height:48px;padding:var(--sp-3) var(--sp-6);
  border-bottom:1px solid var(--ink-100);font-size:var(--fs-base);color:var(--ink-400);cursor:not-allowed
}
/* logged-in chip */
.mbr__user{
  display:inline-flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;min-height:44px;
  border:var(--rule);border-radius:var(--radius);background:var(--white);
  font-size:var(--fs-xs);color:var(--ink-800);transition:border-color .2s
}
.mbr__user:hover{border-color:var(--ink-400)}
.mbr__ava{
  width:26px;height:26px;border-radius:50%;background:var(--ink-800);color:var(--paper);
  display:grid;place-items:center;font-family:var(--font-mono);font-size:10px;flex-shrink:0
}
/* state switcher (prototype control) */
.mbr__state{display:none}

/* ============ Hero ============ */
.hero{padding:var(--sp-16) 0 var(--sp-24);position:relative;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1fr;gap:var(--sp-12)}
.hero h1{font-size:clamp(2rem,5.6vw,var(--fs-4xl));line-height:1.24;letter-spacing:-.01em;margin:var(--sp-6) 0 var(--sp-6)}
.hero h1 .u{position:relative;display:inline-block}
.hero h1 .u::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:2px;
  background:var(--seal);transform-origin:left;animation:rule .9s var(--ease) .35s both
}
@keyframes rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero__lead{max-width:44ch;font-size:var(--fs-md);line-height:2;color:var(--ink-600)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-8)}
.hero__tools{
  margin-top:var(--sp-8);padding-top:var(--sp-4);border-top:var(--rule);
  display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);align-items:center
}
.hero__tools span{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--ink-500);text-transform:uppercase}

/* Ledger flow panel */
.panel{border:var(--rule);background:var(--white);border-radius:var(--radius);overflow:hidden}
.panel__hd{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-bottom:var(--rule);background:var(--ink-50)
}
.panel__hd b{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-700)}
.panel__hd i{font-family:var(--font-mono);font-size:10px;font-style:normal;letter-spacing:.08em;color:var(--ink-500)}
.flow{padding:var(--sp-2) 0}
.flow__row{
  display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--ink-100)
}
.flow__row:last-child{border-bottom:none}
.flow__n{font-family:var(--font-mono);font-size:10px;color:var(--ink-400);letter-spacing:.06em}
.flow__lb{font-size:var(--fs-sm);color:var(--ink-800);line-height:1.4}
.flow__bar{margin-top:5px;height:2px;background:var(--ink-100);position:relative;overflow:hidden;display:block}
.flow__bar i{
  position:absolute;inset:0 auto 0 0;background:var(--ink-700);
  width:var(--w);transform-origin:left;animation:bar 1.1s var(--ease) both
}
.flow__row:nth-child(1) .flow__bar i{animation-delay:.15s}
.flow__row:nth-child(2) .flow__bar i{animation-delay:.25s}
.flow__row:nth-child(3) .flow__bar i{animation-delay:.35s}
.flow__row:nth-child(3) .flow__bar i{background:var(--seal)}
.flow__row:nth-child(4) .flow__bar i{animation-delay:.45s}
@keyframes bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.flow__tag{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 7px;border:var(--rule);border-radius:var(--radius);color:var(--ink-500);white-space:nowrap
}
.flow__tag--ai{border-color:var(--seal-soft);color:var(--seal)}

/* ============ Services ============ */
.svc{border-top:var(--rule)}
.svc__row{
  display:grid;grid-template-columns:1fr;gap:var(--sp-3) var(--sp-8);
  padding:var(--sp-8) 0;border-bottom:var(--rule);position:relative;
  transition:background .28s var(--ease)
}
.svc__row::before{
  content:"";position:absolute;left:-24px;right:-24px;top:0;bottom:0;
  background:var(--ink-50);opacity:0;transition:opacity .28s var(--ease);z-index:-1
}
@media(hover:hover){.svc__row:hover::before{opacity:1}}
.svc__no{font-family:var(--font-mono);font-size:11px;color:var(--seal);letter-spacing:.1em;padding-top:.35em}
.svc__body h3{font-size:var(--fs-lg);margin-bottom:var(--sp-2)}
.svc__body p{font-size:var(--fs-base);max-width:52ch}
.tags{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
.tag{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;
  border:var(--rule);padding:3px 8px;border-radius:var(--radius);color:var(--ink-500);
  background:var(--white)
}
.tag--seal{border-color:var(--seal-soft);color:var(--seal)}

/* ============ Projects ============ */
.feat{display:grid;grid-template-columns:1fr;gap:var(--sp-8);border:var(--rule);background:var(--white);border-radius:var(--radius);overflow:hidden}
.feat__txt{padding:var(--sp-8) var(--sp-6);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.feat__txt h3{font-size:var(--fs-xl);margin:var(--sp-3) 0 var(--sp-4);line-height:1.4}
.feat__txt p{font-size:var(--fs-base);max-width:44ch}
.feat__vis{
  background:var(--ink-50);border-top:var(--rule);min-height:220px;
  display:flex;align-items:center;justify-content:center;padding:var(--sp-8) var(--sp-6);position:relative
}
.ledger{width:100%;max-width:300px}
.ledger__hd{
  display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:9px;
  letter-spacing:.1em;color:var(--ink-400);text-transform:uppercase;
  padding-bottom:6px;border-bottom:1px solid var(--ink-300);margin-bottom:6px
}
.ledger__ln{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--ink-200)}
.ledger__ln i{display:block;height:2px;background:var(--ink-300);font-style:normal}
.ledger__ln i:nth-child(1){width:46%}
.ledger__ln i:nth-child(2){width:18%;background:var(--ink-400)}
.ledger__ln--ai i:nth-child(1){background:var(--seal-soft);width:62%}
.ledger__ln:nth-child(n+5) i{background:var(--ink-200)}
.badge-prep{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--seal);
  border:1px solid var(--seal-soft);border-radius:var(--radius);padding:3px 8px;background:var(--white)
}
.badge-prep::before{content:"";width:4px;height:4px;background:var(--seal);border-radius:50%}

.cards{display:grid;grid-template-columns:1fr;gap:var(--sp-4);margin-top:var(--sp-4)}
.card{
  border:var(--rule);background:var(--white);padding:var(--sp-6);border-radius:var(--radius);
  display:flex;flex-direction:column;gap:var(--sp-3);
  transition:border-color .24s var(--ease),transform .24s var(--ease)
}
.card:hover{border-color:var(--ink-400);transform:translateY(-2px)}
.card h3{font-size:var(--fs-md);font-family:var(--font-serif)}
.card p{font-size:var(--fs-sm);color:var(--ink-500);line-height:1.75}
.card__ft{margin-top:auto;padding-top:var(--sp-3);border-top:1px solid var(--ink-100);display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2)}

/* ============ Courses (shared) ============ */
.courses-teaser{display:grid;grid-template-columns:1fr;gap:var(--sp-8)}
.ct-stats{display:grid;grid-template-columns:repeat(3,1fr);border:var(--rule);background:var(--white)}
.ct-stat{padding:var(--sp-4) var(--sp-3);text-align:center;border-right:var(--rule)}
.ct-stat:last-child{border-right:none}
.ct-stat b{display:block;font-family:var(--font-serif);font-size:var(--fs-xl);color:var(--ink-900);line-height:1.2}
.ct-stat span{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500)}

/* page hero (inner pages) */
.phero{padding:var(--sp-16) 0 var(--sp-12);border-bottom:var(--rule)}
.phero h1{font-size:clamp(1.9rem,4.6vw,var(--fs-3xl));line-height:1.26;letter-spacing:-.01em;margin:var(--sp-4) 0 var(--sp-4);max-width:24ch}
.phero__lead{max-width:52ch;font-size:var(--fs-md);line-height:2}
.phero__meta{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-6);margin-top:var(--sp-6);font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--ink-500);text-transform:uppercase}
.phero__meta span{display:flex;align-items:center;gap:6px}
.phero__meta span::before{content:"";width:4px;height:4px;background:var(--ink-400);border-radius:50%}

/* Filters */
.filters{border-top:var(--rule);border-bottom:var(--rule);background:var(--ink-50);padding:var(--sp-4) 0;position:sticky;top:72px;z-index:60}
.filters__row{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);align-items:center}
.fset{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.fset__lbl{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-500);margin-right:var(--sp-1)
}
.chip{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.03em;
  border:1px solid var(--ink-300);background:var(--white);color:var(--ink-600);
  padding:6px 11px;border-radius:var(--radius);cursor:pointer;min-height:34px;
  transition:all .18s var(--ease);white-space:nowrap
}
.chip:hover{border-color:var(--ink-500);color:var(--ink-900)}
.chip[aria-pressed="true"]{background:var(--ink-900);border-color:var(--ink-900);color:var(--paper)}
.filters__count{
  margin-left:auto;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--ink-500);
  font-variant-numeric:tabular-nums
}

/* Course card */
.cgrid{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
.ccard{
  border:var(--rule);background:var(--white);border-radius:var(--radius);
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .24s var(--ease),transform .24s var(--ease)
}
.ccard:hover{border-color:var(--ink-400);transform:translateY(-2px)}
.ccard[hidden]{display:none}
.ccard__top{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--ink-100);background:var(--ink-50)
}
.ccard__cat{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-600)}
.ccard__body{padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3);flex:1}
.ccard__code{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--ink-400)}
.ccard__title{font-family:var(--font-serif);font-size:var(--fs-md);font-weight:700;color:var(--ink-900);line-height:1.48}
.ccard__desc{font-size:var(--fs-sm);color:var(--ink-500);line-height:1.72;flex:1}
.ccard__meta{border-top:1px solid var(--ink-100);padding-top:var(--sp-3);display:grid;gap:6px}
.cmeta{display:grid;grid-template-columns:64px 1fr;gap:var(--sp-2);font-size:var(--fs-xs);line-height:1.6}
.cmeta dt{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-400);padding-top:2px}
.cmeta dd{margin:0;color:var(--ink-700)}
.ccard__ft{
  padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--ink-100);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)
}
/* level badges */
.lvl{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 7px;border-radius:var(--radius);border:1px solid var(--ink-300);color:var(--ink-600);
  background:var(--white);white-space:nowrap
}
.lvl--1{border-color:var(--ink-300);color:var(--ink-600)}
.lvl--2{border-color:var(--ink-500);color:var(--ink-800)}
.lvl--3{border-color:var(--ink-800);background:var(--ink-800);color:var(--paper)}
/* price */
.price{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--ink-900);font-variant-numeric:tabular-nums}
.price--prep{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--seal);display:inline-flex;align-items:center;gap:5px
}
.price--prep::before{content:"";width:4px;height:4px;background:var(--seal);border-radius:50%}
.cgrid__empty{
  display:none;grid-column:1/-1;padding:var(--sp-12) var(--sp-6);text-align:center;
  border:1px dashed var(--ink-300);border-radius:var(--radius);background:var(--white);
  font-size:var(--fs-sm);color:var(--ink-500)
}
.cgrid__empty[data-on="1"]{display:block}

/* ============ Detail page layout spec ============ */
.spec-frame{
  border:1px solid var(--ink-300);border-radius:var(--radius);background:var(--white);
  overflow:hidden
}
.spec-bar{
  display:flex;align-items:center;gap:var(--sp-2);padding:8px 12px;background:var(--ink-50);
  border-bottom:1px solid var(--ink-200)
}
.spec-bar i{width:7px;height:7px;border-radius:50%;background:var(--ink-300);display:block}
.spec-url{
  font-family:var(--font-mono);font-size:10px;color:var(--ink-500);letter-spacing:.04em;
  margin-left:var(--sp-2)
}
.spec-body{padding:var(--sp-6) var(--sp-4);display:grid;gap:var(--sp-6)}
.blk{position:relative;border:1px dashed var(--ink-300);border-radius:var(--radius);padding:var(--sp-4)}
.blk__no{
  position:absolute;top:-9px;left:10px;background:var(--white);padding:0 6px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;color:var(--seal)
}
.blk h4{font-size:var(--fs-sm);font-family:var(--font-serif);margin-bottom:var(--sp-2)}
.blk p{font-size:var(--fs-xs);color:var(--ink-500);line-height:1.7}
.blk__ph{height:8px;background:var(--ink-100);border-radius:1px;margin-top:6px}
.blk__ph:nth-of-type(2){width:82%}
.blk__ph:nth-of-type(3){width:64%}
.annos{display:grid;gap:var(--sp-2);margin-top:var(--sp-4)}
.anno{
  display:grid;grid-template-columns:26px 1fr;gap:var(--sp-3);
  padding:var(--sp-3) 0;border-bottom:1px solid var(--ink-100);font-size:var(--fs-sm);line-height:1.7
}
.anno:last-child{border-bottom:none}
.anno__n{font-family:var(--font-mono);font-size:10px;color:var(--seal);letter-spacing:.06em;padding-top:3px}
.anno b{color:var(--ink-800);font-weight:500}
.anno span{color:var(--ink-500)}

/* ============ Auth (login / register) ============ */
.auth{display:grid;grid-template-columns:1fr;gap:var(--sp-8);align-items:start}
.auth__card{border:var(--rule);background:var(--white);border-radius:var(--radius);padding:var(--sp-6)}
.auth__card h2{font-size:var(--fs-lg);margin-bottom:var(--sp-2)}
.auth__card > p{font-size:var(--fs-sm);color:var(--ink-500);margin-bottom:var(--sp-6);line-height:1.7}
.auth__aside{border:var(--rule);border-radius:var(--radius);padding:var(--sp-6);background:var(--ink-50)}
.auth__aside h3{font-size:var(--fs-sm);font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-600);margin-bottom:var(--sp-4);font-weight:500}
.auth__aside li{display:flex;gap:var(--sp-3);font-size:var(--fs-sm);color:var(--ink-600);padding:var(--sp-2) 0;line-height:1.65}
.auth__aside li::before{content:"—";color:var(--ink-400);flex-shrink:0}
.auth__switch{
  margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:var(--rule);
  font-size:var(--fs-sm);color:var(--ink-500);text-align:center
}
.auth__switch a{color:var(--ink-900);text-decoration:underline;text-underline-offset:3px;font-weight:500}
.auth__forgot{
  display:inline-block;font-size:var(--fs-xs);color:var(--ink-500);
  text-decoration:underline;text-underline-offset:3px
}
.auth__forgot:hover{color:var(--ink-900)}

/* password rules */
.pw-rules{display:grid;gap:6px;margin-top:var(--sp-2)}
.pw-rules li{
  display:flex;align-items:flex-start;gap:var(--sp-2);font-size:var(--fs-xs);
  color:var(--ink-500);line-height:1.6
}
.pw-rules li::before{
  content:"○";font-family:var(--font-mono);font-size:10px;color:var(--ink-400);
  flex-shrink:0;line-height:1.7
}
.pw-rules li[data-ok="1"]{color:var(--ink-800)}
.pw-rules li[data-ok="1"]::before{content:"●";color:var(--ink-800)}

/* state banner */
.state-banner{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);
  border:1px solid var(--seal-soft);background:#FDF6F4;border-radius:var(--radius);
  padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-6)
}
.state-banner__lbl{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--seal)
}
.seg{display:inline-flex;border:1px solid var(--ink-900);border-radius:var(--radius);overflow:hidden}
.seg button{
  background:var(--white);border:none;padding:6px 12px;font-size:var(--fs-xs);cursor:pointer;
  color:var(--ink-600);font-family:var(--font-mono);letter-spacing:.04em;min-height:34px
}
.seg button[aria-pressed="true"]{background:var(--ink-900);color:var(--paper)}

/* ============ Member center ============ */
.mcenter{display:grid;grid-template-columns:1fr;gap:var(--sp-6);align-items:start}
.mside{border:var(--rule);border-radius:var(--radius);background:var(--white);overflow:hidden}
.mside__hd{padding:var(--sp-3) var(--sp-4);border-bottom:var(--rule);background:var(--ink-50)}
.mside__hd b{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-600);font-weight:500}
.mside__nav{display:flex;flex-direction:row;overflow-x:auto;-webkit-overflow-scrolling:touch}
.mside__nav button{
  display:flex;align-items:center;gap:8px;text-align:left;background:none;border:none;
  border-bottom:1px solid var(--ink-100);padding:var(--sp-3) var(--sp-4);cursor:pointer;
  font-size:var(--fs-sm);color:var(--ink-600);min-height:44px;white-space:nowrap;
  transition:background .18s,color .18s
}
.mside__nav button:hover{background:var(--ink-50);color:var(--ink-900)}
.mside__nav button[aria-selected="true"]{
  background:var(--ink-900);color:var(--paper);border-bottom-color:var(--ink-900)
}
.mside__nav button[aria-selected="true"] .mside__cnt{color:var(--ink-300)}
.mside__cnt{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-400);margin-left:auto;font-variant-numeric:tabular-nums}

.mpanel{border:var(--rule);border-radius:var(--radius);background:var(--white);padding:var(--sp-6)}
.mpanel[hidden]{display:none}
.mpanel__hd{margin-bottom:var(--sp-6)}
.mpanel__hd h3{font-size:var(--fs-lg);margin-bottom:var(--sp-2)}
.mpanel__hd p{font-size:var(--fs-sm);color:var(--ink-500);max-width:56ch;line-height:1.72}

/* my courses */
.myc{display:grid;gap:var(--sp-4)}
.myc__row{
  border:var(--rule);border-radius:var(--radius);padding:var(--sp-4);
  display:grid;grid-template-columns:1fr;gap:var(--sp-3)
}
.myc__t{font-family:var(--font-serif);font-size:var(--fs-base);font-weight:700;color:var(--ink-900);line-height:1.5}
.myc__m{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--ink-500);text-transform:uppercase}
.myc__ft{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);justify-content:space-between}

/* progress */
.prog{height:4px;background:var(--ink-100);border-radius:1px;overflow:hidden;position:relative}
.prog i{display:block;height:100%;background:var(--ink-800);width:var(--p,0%);transition:width .6s var(--ease)}
.prog--seal i{background:var(--seal)}
.prog__lbl{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:var(--ink-500);margin-bottom:5px;font-variant-numeric:tabular-nums}
.prog__lbl b{color:var(--ink-800);font-weight:500}
.chapters{display:grid;gap:var(--sp-3);margin-top:var(--sp-4)}
.chap{display:grid;grid-template-columns:1fr auto;gap:var(--sp-3);align-items:center;font-size:var(--fs-sm);padding:var(--sp-2) 0;border-bottom:1px solid var(--ink-100)}
.chap:last-child{border-bottom:none}
.chap__n{font-family:var(--font-mono);font-size:10px;color:var(--ink-400);margin-right:var(--sp-2)}

/* downloads */
.dl{display:grid;gap:0;border-top:var(--rule)}
.dl__row{display:grid;grid-template-columns:1fr auto;gap:var(--sp-3);align-items:center;padding:var(--sp-3) 0;border-bottom:var(--rule)}
.dl__t{font-size:var(--fs-sm);color:var(--ink-800);line-height:1.5}
.dl__m{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;color:var(--ink-400);margin-top:2px}
.dl__btn{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--ink-300);background:var(--white);color:var(--ink-700);
  padding:6px 10px;border-radius:var(--radius);cursor:pointer;min-height:36px;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;transition:all .18s
}
.dl__btn:hover{border-color:var(--ink-900);color:var(--ink-900)}

/* settings */
.set{display:grid;gap:var(--sp-8)}
.set__grp{border-top:var(--rule);padding-top:var(--sp-4)}
.set__grp h4{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-500);font-weight:500;margin-bottom:var(--sp-3)}
.set__row{
  display:grid;grid-template-columns:1fr;gap:var(--sp-2);padding:var(--sp-3) 0;
  border-bottom:1px solid var(--ink-100);font-size:var(--fs-sm)
}
.set__row:last-child{border-bottom:none}
.set__row dt{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-400);padding-top:2px}
.set__row dd{margin:0;color:var(--ink-800);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);justify-content:space-between}
.set__val{color:var(--ink-600);font-family:var(--font-mono);font-size:var(--fs-xs)}
.set__danger{border-color:var(--seal-soft);color:var(--seal)}
.set__danger:hover{background:#FDF6F4;color:var(--seal)}

/* ============ Forms ============ */
form{background:var(--white);border:var(--rule);border-radius:var(--radius);padding:var(--sp-6)}
.field{margin-bottom:var(--sp-4)}
.field label{display:block;font-size:var(--fs-sm);color:var(--ink-800);margin-bottom:6px;font-weight:500}
.field label .req{font-family:var(--font-mono);font-size:9.5px;color:var(--seal);letter-spacing:.06em;margin-left:6px;vertical-align:2px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--font-sans);font-size:var(--fs-base);color:var(--ink-800);
  background:var(--paper);border:1px solid var(--ink-300);border-radius:var(--radius);
  padding:11px 12px;min-height:44px;transition:border-color .2s,box-shadow .2s
}
.field textarea{min-height:120px;resize:vertical;line-height:1.7}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--ink-900);box-shadow:0 0 0 3px rgba(35,41,46,.08)
}
.field input[aria-invalid="true"]{border-color:var(--seal);background:#FDF6F4}
.field__hint{font-size:var(--fs-xs);color:var(--ink-500);margin-top:5px;line-height:1.6}
.field__err{font-size:var(--fs-xs);color:var(--seal);margin-top:5px;display:none;line-height:1.6}
.field__err[data-on="1"]{display:block}
.check{display:flex;gap:var(--sp-3);align-items:flex-start;margin:var(--sp-4) 0}
.check input{width:17px;height:17px;margin-top:4px;flex-shrink:0;accent-color:var(--ink-900)}
.check label{font-size:var(--fs-sm);color:var(--ink-600);font-weight:400;margin:0;line-height:1.6}
.form__note{
  font-family:var(--font-mono);font-size:10px;line-height:1.7;color:var(--ink-500);
  margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px dashed var(--ink-200)
}
.form__ok{
  display:none;padding:var(--sp-4);border:1px solid var(--ink-800);border-radius:var(--radius);
  background:var(--ink-50);font-size:var(--fs-sm);color:var(--ink-800);margin-top:var(--sp-4)
}
.form__ok[data-on="1"]{display:block}

/* ============ Contact ============ */
.contact{display:grid;grid-template-columns:1fr;gap:var(--sp-12)}
.contact__meta{margin-top:var(--sp-8);display:grid;gap:var(--sp-4)}
.contact__meta div{border-top:var(--rule);padding-top:var(--sp-3)}
.contact__meta dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400);margin-bottom:2px}
.contact__meta dd{margin:0;font-size:var(--fs-sm);color:var(--ink-700)}

/* ============ FAQ ============ */
.faq{border-top:var(--rule)}
.faq details{border-bottom:var(--rule);padding:var(--sp-4) 0}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--sp-4);
  align-items:baseline;font-family:var(--font-serif);font-weight:600;color:var(--ink-800);
  font-size:var(--fs-md);line-height:1.6
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-family:var(--font-mono);font-size:16px;color:var(--ink-400);
  transition:transform .24s var(--ease);flex-shrink:0
}
.faq details[open] summary::after{content:"−"}
.faq details p{margin-top:var(--sp-3);font-size:var(--fs-base);max-width:64ch;color:var(--ink-600)}

/* ============ Instagram band ============ */
.ig{display:grid;grid-template-columns:1fr;gap:var(--sp-8);align-items:center}
.ig h2{font-size:var(--fs-2xl)}
.ig p{max-width:44ch;color:var(--ink-400);font-size:var(--fs-base)}
.ig__card{
  border:1px solid var(--ink-700);border-radius:var(--radius);padding:var(--sp-6);
  display:flex;flex-direction:column;gap:var(--sp-4);background:rgba(255,255,255,.02)
}
.social-cards{display:grid;gap:var(--sp-4)}
.ig__row{display:flex;align-items:center;gap:var(--sp-3)}
.ig__avatar{width:42px;height:42px;border-radius:50%;border:1px solid var(--ink-600);display:grid;place-items:center;flex-shrink:0;color:var(--ink-300)}
.ig__handle{font-family:var(--font-mono);font-size:11px;color:var(--ink-500);letter-spacing:.04em}
.ig__name{color:var(--paper);font-weight:500;font-size:var(--fs-base);line-height:1.4}
.note{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--ink-500);display:flex;align-items:center;gap:6px}
.note::before{content:"";width:4px;height:4px;background:var(--ink-500);border-radius:50%}

/* ============ Source / scope badges ============ */
.src{
  display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 6px;border-radius:var(--radius);border:1px solid var(--ink-300);
  color:var(--ink-500);background:var(--white);white-space:nowrap
}
.src--proto{border-color:var(--ink-400);color:var(--ink-600)}
.src--api{border-style:dashed;border-color:var(--seal-soft);color:var(--seal)}
.src::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;opacity:.6}
.anno-l{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}

/* ============ Data table (spec / API) ============ */
.dt{width:100%;border-collapse:collapse;font-size:var(--fs-xs);margin-top:var(--sp-3)}
.dt th,.dt td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--ink-200);vertical-align:top}
.dt th{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-500);font-weight:500;border-bottom:1px solid var(--ink-400);background:var(--ink-50)
}
.dt tbody tr:last-child td{border-bottom:none}
.dt code{
  font-family:var(--font-mono);font-size:10px;background:var(--ink-50);
  padding:1px 4px;border:1px solid var(--ink-100);border-radius:2px;color:var(--ink-800);
  white-space:nowrap
}
.dt__m{font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-800)}
.dt-wrap{overflow-x:auto;border:var(--rule);border-radius:var(--radius);background:var(--white)}
.dt-wrap .dt{margin-top:0;min-width:640px}

/* ============ Footer ============ */
.ftr{background:var(--ink-950);color:var(--ink-400);padding:var(--sp-16) 0 var(--sp-8)}
.ftr__grid{display:grid;grid-template-columns:1fr;gap:var(--sp-8)}
.ftr__brand .brand__mark{color:var(--ink-200)}
.ftr__brand .brand__txt{color:var(--paper)}
.ftr__brand p{font-size:var(--fs-sm);margin-top:var(--sp-4);max-width:32ch;color:var(--ink-500);line-height:1.8}
.ftr h4{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500);font-weight:400;margin-bottom:var(--sp-4)}
.ftr li{margin-bottom:var(--sp-2)}
.ftr li a{font-size:var(--fs-sm);color:var(--ink-300);transition:color .2s}
.ftr li a:hover{color:var(--paper)}
.ftr__bt{
  margin-top:var(--sp-12);padding-top:var(--sp-4);border-top:1px solid var(--ink-800);
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);justify-content:space-between;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-500)
}
.ftr__langs{display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.ftr__langs a{font-size:var(--fs-sm);color:var(--ink-400)}
.ftr__langs a:hover{color:var(--paper)}
.seal{
  width:44px;height:44px;border:1.5px solid var(--seal-soft);border-radius:2px;
  display:grid;place-items:center;color:var(--seal-soft);
  font-family:var(--font-serif);font-size:13px;line-height:1.15;text-align:center;
  letter-spacing:.02em;flex-shrink:0
}

/* ============ Mobile nav disclosure ============ */
.mnav-btn{
  display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--ink-300);
  border-radius:var(--radius);padding:8px 11px;min-height:44px;cursor:pointer;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-700)
}
.mnav-btn:hover{border-color:var(--ink-900);color:var(--ink-900)}
.mnav-btn svg{width:14px;height:14px}
.mnav{
  display:none;border-top:var(--rule);background:var(--paper);
  max-height:calc(100vh - 72px);overflow-y:auto
}
.mnav[data-open="1"]{display:block}
.mnav ul{padding:var(--sp-2) 0}
.mnav a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-6);min-height:48px;font-size:var(--fs-base);color:var(--ink-700);
  border-bottom:1px solid var(--ink-100)
}
.mnav a:hover{background:var(--ink-50);color:var(--ink-900)}
.mnav a::after{content:"→";color:var(--ink-400);font-family:var(--font-mono);font-size:12px}
.mnav__ft{padding:var(--sp-4) var(--sp-6) var(--sp-6);display:grid;gap:var(--sp-3)}

/* ============ Responsive ============ */
@media(min-width:640px){
  .brand__logo{width:230px}
  .svc__row{grid-template-columns:48px 1fr;gap:var(--sp-8)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .cgrid{grid-template-columns:repeat(2,1fr)}
  .ftr__grid{grid-template-columns:1.4fr 1fr 1fr}
  .auth{grid-template-columns:1fr}
  .myc__row{grid-template-columns:1fr auto;align-items:center}
  .set__row{grid-template-columns:120px 1fr;align-items:center}
}
@media(min-width:900px){
  .wrap{padding:0 var(--sp-8)}
  .sec{padding:var(--sp-32) 0}
  .sec--tight{padding:var(--sp-32) 0}
  .nav{display:flex}
  .mbr{display:flex}
  /* Desktop has the full nav, so the mobile disclosure must not appear. */
  .mnav-btn,.mnav{display:none!important}
  .hero{padding:var(--sp-24) 0 var(--sp-32)}
  .hero__grid{grid-template-columns:1.15fr .85fr;gap:var(--sp-16);align-items:center}
  .sec-head{grid-template-columns:auto 1fr;gap:var(--sp-12);align-items:end}
  .sec-head .eyebrow{grid-column:2}
  .sec-head h2{grid-column:2}
  .sec-head p{grid-column:2;margin-top:calc(var(--sp-4) * -1 + var(--sp-2))}
  .feat{grid-template-columns:1.05fr .95fr}
  .feat__vis{border-top:none;border-left:var(--rule);min-height:320px}
  .contact{grid-template-columns:.85fr 1.15fr;gap:var(--sp-16)}
  .ig{grid-template-columns:1.15fr .85fr;gap:var(--sp-16)}
  .ftr__grid{grid-template-columns:1.6fr 1fr 1fr .9fr}
  form{padding:var(--sp-8)}
  .courses-teaser{grid-template-columns:1.1fr .9fr;gap:var(--sp-12);align-items:center}
  .cgrid{grid-template-columns:repeat(3,1fr)}
  .auth{grid-template-columns:1fr .72fr;gap:var(--sp-12)}
  .auth__card{padding:var(--sp-8)}
  .mcenter{grid-template-columns:230px 1fr;gap:var(--sp-8)}
  .mside__nav{flex-direction:column;overflow:visible}
  .mside__nav button{border-bottom:1px solid var(--ink-100);border-left:2px solid transparent}
  .mside__nav button[aria-selected="true"]{border-left-color:var(--seal)}
  .mpanel{padding:var(--sp-8)}
  .spec-body{grid-template-columns:1fr 1fr;gap:var(--sp-8);padding:var(--sp-8)}
  .blk--wide{grid-column:1/-1}
  .filters{top:80px}
  .phero{padding:var(--sp-24) 0 var(--sp-16)}
}
@media(min-width:1100px){
  .hdr__in{height:80px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-delay:0ms !important;transition-duration:.001ms !important}
  .flow__bar i{width:var(--w)}
  .hero h1 .u::after{transform:none}
  .prog i{transition:none}
}
@media print{
  .hdr,.hero__cta,form,.filters,.mside,.mbr{display:none}
  body{background:#fff}
  .sec{padding:24px 0}
}

/* ============ 枠 · session colour picker ============ */
.sqpick{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sqpick__b{
  width:30px;height:30px;border-radius:2px;border:1px solid var(--ink-200);
  background:var(--sw);cursor:pointer;padding:0;position:relative;
}
.sqpick__b:hover{border-color:var(--ink-800)}
.sqpick__b[aria-pressed="true"]{border-color:var(--ink-900);box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink-900)}
.sqpick__b:focus-visible{outline:2px solid var(--ink-900);outline-offset:2px}
.sqpick__b::after{
  content:"";position:absolute;inset:auto -1px -1px auto;width:8px;height:8px;
  background:#fff;border:1px solid var(--ink-200);
}
.sqpick__lbl{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-500);
  letter-spacing:.04em;margin-left:6px}

/* ============ Figma handoff page ============ */
.fh{--fh-gap:26px}
.fh__kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--ink-200);border:1px solid var(--ink-200)}
.fh__kpi{background:var(--paper);padding:16px 18px}
.fh__kpi b{display:block;font-family:var(--font-serif);font-size:26px;color:var(--ink-900);line-height:1.2}
.fh__kpi span{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500)}
.codeblk{
  background:var(--ink-900);color:#E7EAEC;border-radius:2px;padding:16px 18px;
  font-family:var(--font-mono);font-size:11.5px;line-height:1.75;overflow-x:auto;
  white-space:pre;margin:0;
}
.codeblk b{color:var(--square-dark);font-weight:500}
.codeblk i{color:#8F979F;font-style:normal}
.toktb{width:100%;border-collapse:collapse;font-size:12.5px}
.toktb th{
  text-align:left;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-500);border-bottom:1px solid var(--ink-300);
  padding:8px 10px 8px 0;font-weight:400;white-space:nowrap;
}
.toktb td{border-bottom:1px solid var(--ink-100);padding:9px 10px 9px 0;vertical-align:top;color:var(--ink-700)}
.toktb code{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-900);white-space:nowrap}
.toktb .sw{display:inline-block;width:13px;height:13px;border:1px solid var(--ink-300);vertical-align:-2px;margin-right:7px}
.toktb .md{font-family:var(--font-mono);font-size:11px;color:var(--ink-500)}
.ok{color:#0A7041;font-family:var(--font-mono);font-size:11px}
.no{color:var(--seal);font-family:var(--font-mono);font-size:11px}
.mid{color:#8B5709;font-family:var(--font-mono);font-size:11px}
.gtbl{width:100%;border-collapse:collapse;font-size:12.5px}
.gtbl th{text-align:left;background:var(--ink-50);border:1px solid var(--ink-200);padding:9px 11px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-600);font-weight:400}
.gtbl td{border:1px solid var(--ink-100);padding:9px 11px;vertical-align:top}
.gtbl code{font-family:var(--font-mono);font-size:11.5px}
.darkrow{background:var(--ink-900)}
@media (max-width:640px){
  .codeblk{font-size:10.5px;padding:12px}
  .toktb,.gtbl{font-size:11.5px}
}

/* ============ 枠 · session-coloured action (additive) ============
   The base .btn stays ink — it is the conservative default. This variant is
   what carries the session colour into the interface. Measured 6.44:1 with
   ink #23292E on 翠 #1DC386; white on the same swatch is 2.28:1 and fails. */
.btn--action{background:var(--square-500);border-color:var(--square-500);color:var(--ink-800)}
.btn--action:hover{background:var(--square-600);border-color:var(--square-600)}
.btn--action:focus-visible{outline:2px solid var(--square-700);outline-offset:3px}
.btn--action-rev{background:var(--square-700);border-color:var(--square-700);color:var(--paper)}
.btn--action-rev:hover{background:var(--ink-900);border-color:var(--ink-900)}
.badge--action{background:var(--square-100);color:var(--square-700);border:1px solid var(--square-500)}
.markdemo{display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap}

.btn--disabled,.btn--disabled:hover{background:var(--ink-200);border-color:var(--ink-200);color:var(--ink-500);cursor:not-allowed}

.link--disabled{color:var(--ink-400);cursor:not-allowed}
.nav .link--disabled{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-sm)}
.mnav .link--disabled{display:flex;align-items:center;min-height:48px;padding:var(--sp-3) var(--sp-6);border-bottom:1px solid var(--ink-100);font-size:var(--fs-base)}
.ftr .link--disabled{font-size:var(--fs-sm);color:var(--ink-500)}