/* ==========================================================================
   KIDOKU UI ─ v1.0
   正典: 01_company/DESIGN.md（トークン・状態・z-index・motion はすべてそこが基準）
   骨格と手触りの参照: basement.studio（OSS: basementstudio/website-2k25）
     借りるのは「型」だけ ─ 12カラム編集グリッド / 極小ラベル×巨大数字 /
     角ブラケット / パターン地 / blink / マーキー / 平面（影を使わず罫線と発光で作る）
   使い方: <link rel="stylesheet" href="kidoku-ui.css"> ＋ Google Fonts(Poppins/Zen Kaku Gothic New)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* colors */
  --bg:#060507; --surface:#111014; --surface-2:#0b0a0d;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.16); --line-3:rgba(255,255,255,.24);
  --ink:#f4f2f0; --ink-2:#b7b3ad; --ink-3:#78746e; --ink-4:#514e49;
  --red:#fb0000; --amber:#ff9d3c; --orange:#ff5a1f; --violet:#7b4dff; --blue:#3b6dff;
  --success:#5cc98b; --warning:#ff9d3c; --danger:#ff5a5a;

  /* spacing */
  --s-xs:4px; --s-sm:8px; --s-md:16px; --gutter:24px; --s-lg:24px; --s-xl:40px;
  --s-2xl:64px; --s-3xl:96px; --section:160px;

  /* radii */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:28px; --r-full:9999px;

  /* type */
  --font-disp:"Poppins",-apple-system,sans-serif;      /* Display＝Poppins 900（2026-07-30に正典化） */
  --font-jp:"Zen Kaku Gothic New",-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;
  --font-label:"Poppins",-apple-system,sans-serif;
  --track-label:.22em;

  /* motion */
  --fast:96ms; --base:150ms; --slow:320ms; --curtain:640ms;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-in:cubic-bezier(.4,0,.2,1);

  /* z-index ─ 9段のみ */
  --z-base:0; --z-nav:10; --z-dropdown:20; --z-tooltip:30; --z-drawer:40;
  --z-modal:50; --z-toast:60; --z-curtain:70; --z-cursor:80;

  /* layout */
  --container:1280px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-jp);font-weight:400;line-height:1.9;
  -webkit-font-smoothing:antialiased;word-break:auto-phrase}
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%;display:block}
h1,h2,h3,h4,h5{margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}
::selection{background:var(--red);color:#fff}

.k-container{max-width:var(--container);margin:0 auto;padding:0 32px}
@media(max-width:640px){.k-container{padding:0 22px}}

/* 12カラムの編集グリッド（Basement .grid-layout の骨格） */
.k-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
@media(min-width:1024px){.k-grid{grid-template-columns:repeat(12,1fr)}}
.k-c2,.k-c3{grid-column:span 2} .k-c4,.k-c5,.k-c6,.k-c7,.k-c8{grid-column:span 4}
@media(min-width:1024px){
  .k-c2{grid-column:span 2} .k-c3{grid-column:span 3} .k-c4{grid-column:span 4}
  .k-c5{grid-column:span 5} .k-c6{grid-column:span 6} .k-c7{grid-column:span 7} .k-c8{grid-column:span 8}
}
@media(max-width:560px){.k-c2,.k-c3{grid-column:span 4}}

/* Grid Matrix モード（罫線だけで組む「見比べる面」）
   既定は .k-container の中に置く＝左右に余白が残る（2026-07-30 HAL判断で全幅を既定から外した）。
   端まで伸ばしたい時だけ .k-matrix--bleed を足す（使いすぎない） */
.k-matrix{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%}
@media(min-width:1024px){.k-matrix{grid-template-columns:repeat(12,1fr)}}
.k-matrix--bleed{max-width:none;padding:0 16px}
.k-matrix--tight{row-gap:8px}      /* 行間 */
.k-matrix--block{row-gap:32px}     /* ブロック間 */
.k-matrix--section{row-gap:56px}   /* セクション間 */

/* 行そのものが12カラム。区切りは下罫線だけ */
.k-mrow{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-items:center;
  padding:8px 0;border-bottom:1px solid rgba(255,255,255,.20);transition:background var(--base),padding-left var(--slow) var(--ease-out)}
@media(min-width:1024px){.k-mrow{grid-template-columns:repeat(12,1fr);padding:11px 0}}
.k-mrow:hover{background:rgba(255,255,255,.03)}
.k-mrow > *{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}  /* 1行で切る＝整列を崩さない */
/* モバイルは「主＋数値」で1行、副フィールドは2行目に落として折り返す
   （和文を横に詰めると3文字で省略されて読めなくなる ─ 実測で確認） */
.k-mrow__a{grid-column:1/span 3;grid-row:1;font-family:var(--font-jp);font-weight:700;font-size:1rem}
.k-mrow__b{grid-column:1/-1;grid-row:2;white-space:normal;color:var(--ink-3);font-size:.86rem}
.k-mrow__c{grid-column:4/span 1;grid-row:1;text-align:right;color:var(--ink-2);
  font-family:var(--font-label);font-weight:600;font-size:.8rem;font-variant-numeric:tabular-nums}
@media(min-width:1024px){
  .k-mrow__a{grid-column:1/span 4;grid-row:1;font-size:1.15rem}
  .k-mrow__b{grid-column:5/span 4;grid-row:1;white-space:nowrap;font-size:1rem;color:var(--ink-2)}
  .k-mrow__c{grid-column:10/span 3;grid-row:1;font-size:.94rem}
}
/* 見出し行（件数を添える） */
.k-mhead{grid-column:1/-1;display:flex;align-items:baseline;gap:14px;padding-bottom:6px}
.k-mhead__count{font-family:var(--font-label);font-weight:600;font-size:.8rem;color:var(--ink-4);font-variant-numeric:tabular-nums}

/* ラベル＋巨大コピーのセル（横gap 0で列を接触させ、罫線だけで分ける） */
.k-mcell{border-top:1px solid rgba(255,255,255,.20);padding:14px 24px 0 0}
.k-mcell__label{font-family:var(--font-jp);font-size:.96rem;color:var(--ink-3);margin-bottom:10px}
.k-mcell__copy{font-family:var(--font-jp);font-weight:700;font-size:clamp(1.15rem,1.8vw,1.6rem);line-height:1.45}
.k-matrix--cells{column-gap:0;row-gap:40px}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
.k-display{font-family:var(--font-disp);font-weight:900;text-transform:uppercase;
  font-size:clamp(3rem,9.6vw,8rem);line-height:.86;letter-spacing:.01em}
.k-display--outline{color:transparent;-webkit-text-stroke:1.4px var(--ink)}
.k-display-jp{font-family:var(--font-jp);font-weight:900;font-size:clamp(1.5rem,3.4vw,2.7rem);line-height:1.25;letter-spacing:.005em}
.k-h2{font-family:var(--font-jp);font-weight:700;font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.32}
.k-h3{font-family:var(--font-jp);font-weight:700;font-size:1.3rem;line-height:1.5}
.k-body{font-size:1rem;line-height:1.9;color:var(--ink)}
.k-body--muted{color:var(--ink-2)}
.k-small{font-size:.88rem;line-height:1.85;color:var(--ink-2)}
.k-label{font-family:var(--font-label);font-weight:600;font-size:.72rem;line-height:1.4;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-3)}
.k-num{font-family:var(--font-label);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.k-num-xl{font-family:var(--font-label);font-weight:800;font-variant-numeric:tabular-nums;
  font-size:clamp(3rem,6.5vw,5.5rem);line-height:1;letter-spacing:-.01em;color:var(--ink-4)}
.k-em{font-style:normal;color:var(--amber)}
.k-red{color:var(--red)}

/* eyebrow ─ 赤い罫線＋極小ラベル */
.k-eyebrow{font-family:var(--font-label);font-weight:600;font-size:.72rem;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--red);display:inline-flex;align-items:center;gap:12px}
.k-eyebrow::before{content:"";width:26px;height:1px;background:currentColor}

/* section-header ─ 巨大ナンバリング＋eyebrow → 余白 → 見出し */
.k-sechead{max-width:760px}
.k-sechead__top{display:flex;align-items:baseline;gap:20px;margin-bottom:var(--s-xl)}
.k-sechead__lead{color:var(--ink-2);margin-top:18px}

/* --------------------------------------------------------------------------
   4. Signature ─ 角ブラケット / パターン / マーキー / 罫線
   -------------------------------------------------------------------------- */
.k-hr{border:0;border-top:1px solid var(--line);margin:0}

/* corner-frame（生成の選択範囲）
   ⚠️ overflow:hidden を持つ要素に直付けすると消える → 1階層外のラッパーに当てる */
.k-frame{position:relative}
.k-frame::before,.k-frame::after{content:"";position:absolute;width:22px;height:22px;pointer-events:none;
  transition:inset var(--slow) var(--ease-out),border-color var(--slow)}
.k-frame::before{top:-1px;left:-1px;border-top:1.5px solid var(--red);border-left:1.5px solid var(--red)}
.k-frame::after{bottom:-1px;right:-1px;border-bottom:1.5px solid var(--red);border-right:1.5px solid var(--red)}
.k-frame:hover::before{top:-7px;left:-7px}
.k-frame:hover::after{bottom:-7px;right:-7px}
.k-frame--quiet::before,.k-frame--quiet::after{border-color:var(--line-3)}

/* パターン地（準備中・空きスロット・図解の余白に極薄で） */
.k-dots{background-image:radial-gradient(var(--line-2) 1px,transparent 1px);background-size:8px 8px}
.k-diagonal{background-image:repeating-linear-gradient(45deg,var(--line) 0 1px,transparent 1px 7px);
  animation:k-diagonal 6s linear infinite}
@keyframes k-diagonal{to{background-position:20px 20px}}

/* マーキー（1ページ1〜2箇所） */
.k-marquee{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.k-marquee__track{display:flex;gap:56px;width:max-content;animation:k-mq 34s linear infinite}
.k-marquee__track > *{display:inline-flex;align-items:center;gap:56px;white-space:nowrap;color:var(--ink-3);
  font-family:var(--font-label);font-weight:700;font-size:.9rem;letter-spacing:.16em;text-transform:uppercase}
.k-marquee__track > *::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--red)}
.k-marquee__jp{font-family:var(--font-jp)!important;font-weight:700!important;letter-spacing:.02em!important;
  text-transform:none!important;color:var(--ink-2)!important}
@keyframes k-mq{to{transform:translateX(-50%)}}

/* 32bitレイヤー（KIDOKU 32）*/
.k-px32{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;
  opacity:.28;mix-blend-mode:screen;filter:contrast(1.06) brightness(.9);pointer-events:none}

/* grain / orb */
.k-grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.k-orb{position:absolute;border-radius:50%;filter:blur(64px);mix-blend-mode:screen;pointer-events:none}

/* blink（Basement .actionable の翻訳・下線スワイプとは排他） */
@keyframes k-blink{0%,100%{opacity:1}25%,75%{opacity:.2}}
.k-actionable{transition:color var(--base)}
.k-actionable:hover,.k-actionable:focus-visible{color:var(--ink);animation:k-blink 200ms steps(1,end) 1}
/* 下線スワイプ（ナビ用） */
.k-swipe{position:relative;color:var(--ink-2);transition:color var(--base)}
.k-swipe::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--red);
  transition:right var(--slow) var(--ease-out)}
.k-swipe:hover,.k-swipe:focus-visible{color:var(--ink)}
.k-swipe:hover::after,.k-swipe:focus-visible::after{right:0}

/* --------------------------------------------------------------------------
   5. Buttons ─ 状態7つ（default/hover/focus-visible/active/disabled/loading/error）
   -------------------------------------------------------------------------- */
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 26px;
  border:1px solid transparent;border-radius:var(--r-full);background:none;cursor:pointer;
  font-family:var(--font-jp);font-weight:700;font-size:.92rem;letter-spacing:.02em;color:var(--ink);
  transition:transform var(--base) var(--ease-out),background var(--base),color var(--base),border-color var(--base)}
.k-btn__ico{font-family:var(--font-label);font-weight:600;transition:transform var(--base) var(--ease-out)}
.k-btn:hover .k-btn__ico{transform:translateX(4px)}
.k-btn:active{transform:translateY(0);transition-duration:var(--fast)}
.k-btn--primary{background:var(--red);color:#fff}
.k-btn--primary:hover{background:#fff;color:#000;transform:translateY(-2px)}
.k-btn--ghost{border-color:var(--line-2);color:var(--ink)}
.k-btn--ghost:hover{background:#fff;color:#000;border-color:#fff;transform:translateY(-2px)}
.k-btn--text{height:auto;padding:0;border:0;border-radius:0;font-family:var(--font-label);font-weight:600;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.k-btn--text:hover{color:var(--red)}
.k-btn--sm{height:44px;padding:0 20px;font-size:.85rem}
.k-btn--lg{height:60px;padding:0 34px;font-size:1rem}
.k-btn:disabled,.k-btn[aria-disabled="true"]{opacity:.40;cursor:not-allowed;pointer-events:none;
  background:transparent;color:var(--ink-2);border-color:var(--line)}
/* loading ─ ラベルを保持し幅を変えない */
.k-btn.is-loading{pointer-events:none}
.k-btn.is-loading .k-btn__ico{visibility:hidden;position:relative}
.k-btn.is-loading .k-btn__ico::after{visibility:visible;content:"···";position:absolute;left:0;top:0;
  animation:k-blink 900ms steps(1,end) infinite}

/* chip / badge */
.k-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border:1px solid var(--line-2);
  border-radius:var(--r-full);font-family:var(--font-label);font-weight:600;font-size:.7rem;letter-spacing:.06em;color:var(--ink-2);
  background:none;cursor:pointer;transition:border-color var(--base),color var(--base),background var(--base)}
.k-chip:hover{border-color:var(--line-3);color:var(--ink)}
.k-chip[aria-pressed="true"]{background:var(--ink);color:#000;border-color:var(--ink)}
.k-badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 12px;border-radius:var(--r-full);
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  font-family:var(--font-label);font-weight:600;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.k-badge--red{color:var(--red);border-color:rgba(251,0,0,.35)}
.k-badge--success{color:var(--success);border-color:rgba(92,201,139,.35)}
.k-badge--danger{color:var(--danger);border-color:rgba(255,90,90,.35)}
.k-badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* --------------------------------------------------------------------------
   6. Surfaces
   -------------------------------------------------------------------------- */
.k-card{background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s-xl);transition:border-color var(--slow),transform var(--slow) var(--ease-out)}
.k-card--hover:hover{border-color:var(--line-2);transform:translateY(-6px)}
.k-card__num{font-family:var(--font-label);font-weight:800;font-size:2rem;line-height:1;color:var(--red);font-variant-numeric:tabular-nums}
.k-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-lg)}

/* --------------------------------------------------------------------------
   7. Forms ─ focusで四隅ブラケットが出る（生成の選択範囲メタファ）
   -------------------------------------------------------------------------- */
.k-field{display:flex;flex-direction:column;gap:8px}
.k-field__label{font-family:var(--font-label);font-weight:600;font-size:.68rem;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--ink-2);display:inline-flex;align-items:center;gap:8px}
.k-field__req{width:5px;height:5px;border-radius:50%;background:var(--red)}   /* 必須はレッドのドット（※は使わない） */
.k-field__opt{font-family:var(--font-jp);font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-3);font-size:.72rem}
.k-field__hint{font-size:.78rem;color:var(--ink-3);line-height:1.7}
.k-field__error{font-size:.78rem;color:var(--danger);line-height:1.7;display:none}
.k-field.has-error .k-field__error{display:block}

.k-input,.k-textarea,.k-select{width:100%;height:54px;padding:0 16px;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-md);font-family:var(--font-jp);font-size:1rem;/* 16px未満にしない */
  transition:border-color var(--base),background var(--base);appearance:none}
.k-textarea{height:auto;min-height:120px;padding:14px 16px;line-height:1.8;resize:vertical}
.k-select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 20px) 24px,calc(100% - 14px) 24px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  padding-right:44px;cursor:pointer}
.k-input::placeholder,.k-textarea::placeholder{color:var(--ink-3)}
.k-input:hover,.k-textarea:hover,.k-select:hover{border-color:var(--line-2)}
.k-input:focus-visible,.k-textarea:focus-visible,.k-select:focus-visible{outline:none;border-color:var(--red)}
.k-input:disabled,.k-textarea:disabled,.k-select:disabled{opacity:.40;cursor:not-allowed;background:transparent}
.k-field.has-error .k-input,.k-field.has-error .k-textarea,.k-field.has-error .k-select{border-color:var(--danger)}

/* focus時の角ブラケット */
.k-input-wrap{position:relative}
.k-input-wrap::before,.k-input-wrap::after{content:"";position:absolute;width:14px;height:14px;pointer-events:none;
  opacity:0;transition:opacity var(--base),inset var(--base) var(--ease-out)}
.k-input-wrap::before{top:-1px;left:-1px;border-top:1.5px solid var(--red);border-left:1.5px solid var(--red)}
.k-input-wrap::after{bottom:-1px;right:-1px;border-bottom:1.5px solid var(--red);border-right:1.5px solid var(--red)}
.k-input-wrap:focus-within::before{opacity:1;top:-6px;left:-6px}
.k-input-wrap:focus-within::after{opacity:1;bottom:-6px;right:-6px}

/* checkbox / radio / toggle */
.k-check{display:inline-flex;align-items:flex-start;gap:12px;cursor:pointer;font-size:.94rem;line-height:1.7}
.k-check input{appearance:none;flex:0 0 auto;width:18px;height:18px;margin:5px 0 0;background:var(--surface);
  border:1px solid var(--line-2);cursor:pointer;transition:border-color var(--base),background var(--base)}
.k-check input[type="radio"]{border-radius:50%}
.k-check input:hover{border-color:var(--line-3)}
.k-check input:checked{background:var(--red);border-color:var(--red)}
.k-check input[type="checkbox"]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E");
  background-size:14px 14px;background-position:center;background-repeat:no-repeat}
.k-check input[type="radio"]:checked{box-shadow:inset 0 0 0 3px var(--bg)}
.k-check input:disabled{opacity:.4;cursor:not-allowed}
.k-toggle{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-size:.94rem}
.k-toggle input{appearance:none;width:36px;height:20px;border-radius:var(--r-full);background:var(--surface);
  border:1px solid var(--line-2);position:relative;cursor:pointer;transition:background var(--base),border-color var(--base)}
.k-toggle input::after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;
  background:var(--ink-2);transition:transform var(--base) var(--ease-out),background var(--base)}
.k-toggle input:checked{background:var(--red);border-color:var(--red)}
.k-toggle input:checked::after{transform:translateX(16px);background:#fff}

/* エラーサマリ */
.k-errsum{border:1px solid rgba(255,90,90,.35);border-radius:var(--r-md);padding:16px 18px;background:rgba(255,90,90,.06)}
.k-errsum b{color:var(--danger);font-family:var(--font-jp);font-weight:700;font-size:.92rem}
.k-errsum a{color:var(--danger);text-decoration:underline;font-size:.88rem}

/* --------------------------------------------------------------------------
   8. Data
   -------------------------------------------------------------------------- */
/* 幅の広い中身（表・図・コード）は必ず自分の箱の中で横スクロールさせる ─ ページ本体を横スクロールさせない */
.k-scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.k-table{width:100%;min-width:520px;border-collapse:collapse}
.k-table th{font-family:var(--font-label);font-weight:600;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);text-align:left;padding:0 16px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.k-table td{padding:16px;font-size:.94rem;color:var(--ink);border-bottom:1px solid transparent}
.k-table tbody tr{transition:background var(--base)}
.k-table tbody tr:hover{background:var(--surface)}
.k-table .num,.k-table th.num{text-align:right;font-family:var(--font-label);font-weight:600;font-variant-numeric:tabular-nums}

/* kv-row（Basement info-item の翻訳） */
.k-kv{border-top:1px solid var(--line)}
.k-kv__row{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--line)}
.k-kv__row b{font-family:var(--font-jp);font-weight:700;font-size:1rem}
.k-kv__row span{color:var(--ink-3);font-size:.86rem;text-align:right}

/* 番号付きリスト（マーカーはレッド） */
.k-list{list-style:none;margin:0;padding:0;counter-reset:k}
.k-list li{counter-increment:k;display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:.96rem}
.k-list li::before{content:counter(k,decimal-leading-zero);font-family:var(--font-label);font-weight:600;font-size:.72rem;
  color:var(--red);flex:0 0 auto;padding-top:5px;font-variant-numeric:tabular-nums}

/* stat */
.k-stat__num{font-family:var(--font-label);font-weight:800;font-size:clamp(2.4rem,5vw,4rem);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.k-stat__label{margin-top:10px}

/* skeleton / progress / empty */
.k-skel{background:var(--surface);border-radius:var(--r-sm);position:relative;overflow:hidden;height:14px}
.k-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:k-shim 1.4s infinite}
@keyframes k-shim{to{transform:translateX(100%)}}
.k-progress{height:1px;background:var(--line-2);position:relative;overflow:hidden}
.k-progress i{position:absolute;inset:0;background:var(--red);transform-origin:left}
.k-empty{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-2xl) var(--s-xl);text-align:center}
.k-empty h4{font-family:var(--font-jp);font-weight:700;font-size:1.1rem;margin-bottom:20px}

/* --------------------------------------------------------------------------
   9. Navigation
   -------------------------------------------------------------------------- */
.k-nav{position:sticky;top:0;z-index:var(--z-nav);border-bottom:1px solid transparent;
  transition:background var(--slow),border-color var(--slow),backdrop-filter var(--slow)}
.k-nav.is-scrolled{background:rgba(6,5,7,.72);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.k-nav__in{display:flex;align-items:center;gap:32px;height:64px;max-width:var(--container);margin:0 auto;padding:0 32px}
.k-brand{font-family:var(--font-disp);font-weight:900;font-size:1.35rem;letter-spacing:.03em;line-height:1;margin-right:auto}
.k-brand span{color:var(--red)}

/* tabs */
.k-tabs{display:flex;gap:8px;border-bottom:1px solid var(--line);padding-bottom:0}
.k-tab{height:40px;padding:0 18px;border:0;background:none;cursor:pointer;color:var(--ink-3);
  font-family:var(--font-label);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  position:relative;transition:color var(--base)}
.k-tab:hover{color:var(--ink-2)}
.k-tab[aria-selected="true"]{color:var(--ink)}
.k-tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--red)}

/* pagination */
.k-pager{display:flex;gap:6px;align-items:center;font-family:var(--font-label);font-weight:600;font-size:.74rem}
.k-pager a,.k-pager span{min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-3);font-variant-numeric:tabular-nums;transition:color var(--base)}
.k-pager a:hover{color:var(--ink)}
.k-pager [aria-current="page"]{color:var(--red)}

/* accordion */
.k-acc{border-top:1px solid var(--line)}
.k-acc details{border-bottom:1px solid var(--line)}
.k-acc summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;align-items:center;gap:16px;
  font-family:var(--font-jp);font-weight:700;font-size:1.02rem;transition:color var(--base)}
.k-acc summary::-webkit-details-marker{display:none}
.k-acc summary::after{content:"+";margin-left:auto;color:var(--red);font-family:var(--font-label);font-weight:600;transition:transform var(--base)}
.k-acc details[open] summary::after{content:"−"}
.k-acc summary:hover{color:var(--ink)}
.k-acc__body{padding:0 0 22px;color:var(--ink-2);font-size:.94rem}

/* scroll cue */
.k-cue{font-family:var(--font-label);font-weight:600;font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-3);display:inline-flex;align-items:center;gap:12px}
.k-cue::after{content:"";width:1px;height:34px;background:linear-gradient(var(--ink-3),transparent);animation:k-cue 1.8s ease infinite}
@keyframes k-cue{0%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  50.1%{transform-origin:bottom}100%{transform:scaleY(.3);transform-origin:bottom}}

/* --------------------------------------------------------------------------
   10. Overlays
   -------------------------------------------------------------------------- */
.k-scrim{position:fixed;inset:0;z-index:var(--z-modal);background:rgba(6,5,7,.8);backdrop-filter:blur(8px);
  display:none;place-items:center;padding:24px}
.k-scrim.is-open{display:grid}
.k-modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s-2xl);
  width:min(720px,100%);max-height:86vh;overflow:auto}
@media(max-width:640px){.k-modal{padding:var(--s-lg)}}
.k-modal__head{display:flex;align-items:flex-start;gap:20px;margin-bottom:20px}
.k-modal__close{margin-left:auto;background:none;border:0;color:var(--ink-2);font-size:1.2rem;cursor:pointer;
  width:44px;height:44px;flex:0 0 auto}

.k-drawer{position:fixed;inset:0;z-index:var(--z-drawer);background:var(--bg);display:none;
  flex-direction:column;justify-content:center;padding:0 22px}
.k-drawer.is-open{display:flex}
.k-drawer a{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);
  font-family:var(--font-jp);font-weight:900;font-size:1.6rem}
.k-drawer a .n{font-family:var(--font-label);font-weight:800;font-size:.78rem;color:var(--ink-4);font-variant-numeric:tabular-nums}

.k-toasts{position:fixed;right:24px;bottom:24px;z-index:var(--z-toast);display:flex;flex-direction:column;gap:10px;max-width:360px}
.k-toast{background:var(--surface);border:1px solid var(--line);border-left:1px solid var(--ink-3);border-radius:var(--r-md);
  padding:var(--s-md);font-size:.9rem;display:flex;gap:12px;align-items:flex-start}
.k-toast--success{border-left:2px solid var(--success)}
.k-toast--warning{border-left:2px solid var(--warning)}
.k-toast--danger{border-left:2px solid var(--danger)}

.k-tip{position:relative;display:inline-flex}
.k-tip__body{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);z-index:var(--z-tooltip);
  background:var(--ink);color:var(--bg);border-radius:var(--r-sm);padding:6px 10px;white-space:nowrap;
  font-family:var(--font-label);font-weight:600;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:opacity var(--base)}
.k-tip:hover .k-tip__body,.k-tip:focus-within .k-tip__body{opacity:1}

/* alert */
.k-alert{border:1px solid var(--line);border-left-width:2px;border-radius:var(--r-md);padding:16px 18px;font-size:.92rem;color:var(--ink-2)}
.k-alert--success{border-left-color:var(--success)}
.k-alert--warning{border-left-color:var(--warning)}
.k-alert--danger{border-left-color:var(--danger)}

/* cursor（ドット＋吸着・JSと併用） */
.k-cursor{position:fixed;top:0;left:0;z-index:var(--z-cursor);width:8px;height:8px;border-radius:50%;background:var(--ink);
  pointer-events:none;opacity:0;transform:translate3d(-100px,-100px,0);
  transition:width var(--base),height var(--base),background var(--base),opacity var(--base)}
.k-cursor.is-on{opacity:1}
.k-cursor.is-hot{width:30px;height:30px;background:var(--red)}
@media(hover:hover) and (pointer:fine){body.k-cursor-none,body.k-cursor-none *{cursor:none}}

/* --------------------------------------------------------------------------
   11. Utilities / a11y
   -------------------------------------------------------------------------- */
.k-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.k-stack > * + *{margin-top:var(--s-md)}
.k-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.k-section{padding:var(--section) 0}
@media(max-width:900px){.k-section{padding:var(--s-3xl) 0}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.001s!important}
  .k-cursor{display:none}
  body.k-cursor-none,body.k-cursor-none *{cursor:auto}
}