/* =========================================================
   株式会社バズらせ屋 / 会員動画講座サイト UIプロトタイプ
   コーポレートカラー（名刺より抽出）
   teal #2BB5B5 / coral #FD6470 / yellow #FED02F / black #000
   ========================================================= */
:root{
  /* brand */
  --teal:#2BB5B5; --teal-ink:#0E8A8A; --teal-pale:#E4F6F6; --teal-mist:#F2FBFB;
  --coral:#FD6470; --coral-ink:#DC3C4F; --coral-pale:#FFEBEC;
  --yellow:#FED02F; --yellow-ink:#A97A00; --yellow-pale:#FFF7DD;
  /* neutrals (teal寄りのグレー) */
  --ink:#111617; --ink-soft:#3B4446; --muted:#6C7779; --faint:#98A3A5;
  --paper:#F6F9F9; --surface:#FFFFFF; --surface-2:#EFF4F4;
  --rule:#E1E9E9; --rule-2:#CEDADA;
  --shadow-sm:0 1px 2px rgba(17,22,23,.05);
  --shadow:0 2px 4px rgba(17,22,23,.05), 0 12px 28px -18px rgba(17,22,23,.25);
  --r:10px; --r-lg:16px; --r-pill:999px;
  --disp:"Zen Maru Gothic",'Hiragino Maru Gothic ProN','Yu Gothic',system-ui,sans-serif;
  --body:"Zen Kaku Gothic New",'Hiragino Kaku Gothic ProN','Yu Gothic',system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --teal:#4ED2D2; --teal-ink:#7FE0E0; --teal-pale:#123332; --teal-mist:#0F2827;
    --coral:#FF8D97; --coral-ink:#FFA3AB; --coral-pale:#3A1D21;
    --yellow:#FFDA62; --yellow-ink:#FFE491; --yellow-pale:#332B10;
    --ink:#E9EFEF; --ink-soft:#C6D0D0; --muted:#92A0A0; --faint:#6E7C7C;
    --paper:#0D1313; --surface:#151D1D; --surface-2:#1D2727;
    --rule:#243030; --rule-2:#324040;
    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --shadow:0 2px 4px rgba(0,0,0,.4), 0 14px 32px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --teal:#4ED2D2; --teal-ink:#7FE0E0; --teal-pale:#123332; --teal-mist:#0F2827;
  --coral:#FF8D97; --coral-ink:#FFA3AB; --coral-pale:#3A1D21;
  --yellow:#FFDA62; --yellow-ink:#FFE491; --yellow-pale:#332B10;
  --ink:#E9EFEF; --ink-soft:#C6D0D0; --muted:#92A0A0; --faint:#6E7C7C;
  --paper:#0D1313; --surface:#151D1D; --surface-2:#1D2727;
  --rule:#243030; --rule-2:#324040;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 2px 4px rgba(0,0,0,.4), 0 14px 32px -20px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:15px; line-height:1.8; -webkit-font-smoothing:antialiased}
a{color:var(--teal-ink); text-underline-offset:3px}
img{max-width:100%}
:focus-visible{outline:2.5px solid var(--teal); outline-offset:2px; border-radius:6px}
h1,h2,h3,h4{font-family:var(--disp); font-weight:700; line-height:1.45; margin:0; text-wrap:balance}
p{margin:0 0 14px}
.tnum{font-variant-numeric:tabular-nums}

/* ---- ブランド装飾：3色ブラシバー（名刺の3ストロークのエコー）---- */
.brushbar{height:4px; border:0; margin:0;
  background:linear-gradient(90deg,var(--teal) 0 34%,var(--coral) 34% 67%,var(--yellow) 67% 100%)}
.brushbar--soft{height:3px; border-radius:var(--r-pill)}

/* ---- ヘッダー ---- */
.hd{position:sticky; top:0; z-index:40; background:var(--surface); border-bottom:1px solid var(--rule)}
.hd__in{max-width:1140px; margin:0 auto; padding:0 20px; height:62px; display:flex; align-items:center; gap:20px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex:0 0 auto}
.logo__mark{width:32px; height:32px; border-radius:9px; display:grid; place-items:center; flex:0 0 32px;
  background:conic-gradient(from 210deg,var(--yellow),var(--coral),var(--teal),var(--yellow));
  color:#fff; font-family:var(--disp); font-weight:700; font-size:17px; text-shadow:0 1px 2px rgba(0,0,0,.25)}
.logo__txt{font-family:var(--disp); font-weight:700; font-size:15.5px; letter-spacing:.01em; white-space:nowrap}
.logo__txt small{display:block; font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:var(--muted); font-weight:400; line-height:1.2}
.hd__nav{display:flex; gap:4px; margin-left:auto; align-items:center}
.hd__nav a{padding:7px 13px; border-radius:var(--r-pill); text-decoration:none; color:var(--ink-soft); font-size:14px; font-weight:500; white-space:nowrap}
.hd__nav a:hover{background:var(--surface-2)}
.hd__nav a[aria-current]{background:var(--teal-pale); color:var(--teal-ink); font-weight:700}
.avatar{width:32px; height:32px; border-radius:50%; background:var(--teal-pale); color:var(--teal-ink);
  display:grid; place-items:center; font-weight:700; font-size:13px; flex:0 0 32px; font-family:var(--disp)}

/* ---- レイアウト ---- */
.wrap{max-width:1140px; margin:0 auto; padding:0 20px 80px}
.wrap--narrow{max-width:820px}
.crumb{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:12.5px; color:var(--muted); padding:18px 0 0}
.crumb a{color:var(--muted); text-decoration:none}
.crumb a:hover{color:var(--teal-ink)}
.crumb span{color:var(--rule-2)}
.crumb b{color:var(--ink-soft); font-weight:500}
.phead{padding:16px 0 26px}
.phead h1{font-size:clamp(22px,3.4vw,29px)}
.phead p{color:var(--muted); font-size:14px; margin:8px 0 0; max-width:70ch}
.eyebrow{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-ink); display:block; margin-bottom:8px}
.grid{display:grid; gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.split{display:grid; grid-template-columns:minmax(0,1fr) 316px; gap:26px; align-items:start}
@media (max-width:900px){ .split{grid-template-columns:minmax(0,1fr)} }

/* ---- カード ---- */
.card{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden}
.card--pad{padding:20px}
.card__body{padding:18px 20px}
.card__hd{padding:15px 20px; border-bottom:1px solid var(--rule); display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.card__hd h2,.card__hd h3{font-size:16px; margin:0}
.card__hd .sp{margin-left:auto}
.sect-title{display:flex; align-items:center; gap:12px; margin:34px 0 14px}
.sect-title h2{font-size:18px}
.sect-title .brushbar--soft{flex:1}

/* ---- ボタン ---- */
.btn{appearance:none; border:1.5px solid transparent; font-family:var(--body); font-weight:700; font-size:14.5px;
  padding:11px 20px; border-radius:var(--r-pill); cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; line-height:1.3; transition:filter .15s, background .15s}
.btn--primary{background:var(--teal); color:#062E2E}
.btn--primary:hover{filter:brightness(1.07)}
.btn--coral{background:var(--coral); color:#4A0D14}
.btn--coral:hover{filter:brightness(1.05)}
.btn--ghost{background:transparent; border-color:var(--rule-2); color:var(--ink-soft)}
.btn--ghost:hover{background:var(--surface-2)}
.btn--block{width:100%}
.btn--sm{padding:7px 14px; font-size:13px}
.btn--done{background:var(--teal-pale); border-color:var(--teal); color:var(--teal-ink)}
.btn[disabled]{opacity:.45; cursor:not-allowed}

/* ---- バッジ・チップ ---- */
.chip{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:var(--r-pill); white-space:nowrap}
.chip--done{background:var(--teal-pale); color:var(--teal-ink)}
.chip--new{background:var(--coral-pale); color:var(--coral-ink)}
.chip--soon{background:var(--yellow-pale); color:var(--yellow-ink)}
.chip--off{background:var(--surface-2); color:var(--muted)}
.chip--mono{font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.04em}

/* ---- 進捗 ---- */
.bar{height:6px; background:var(--surface-2); border-radius:var(--r-pill); overflow:hidden}
.bar>i{display:block; height:100%; border-radius:var(--r-pill); background:var(--teal)}
.bar--y>i{background:var(--yellow)}
.pmeta{display:flex; justify-content:space-between; align-items:baseline; font-size:12px; color:var(--muted); margin-bottom:6px}
.pmeta b{font-family:var(--mono); font-size:13px; color:var(--teal-ink)}
.ring{width:86px; height:86px; flex:0 0 86px; position:relative}
.ring svg{display:block; transform:rotate(-90deg)}
.ring span{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--mono); font-size:18px; font-weight:600; color:var(--ink)}
.ring span i{font-size:10px; font-style:normal; color:var(--muted)}

/* ---- チャプター／レッスンカード ---- */
.thumb{aspect-ratio:16/9; background:var(--surface-2); position:relative; display:grid; place-items:center; overflow:hidden}
.thumb__ph{font-family:var(--disp); font-weight:700; font-size:15px; color:#fff; text-align:center; padding:0 14px; line-height:1.4; text-shadow:0 2px 6px rgba(0,0,0,.3)}
.thumb--t{background:linear-gradient(135deg,var(--teal) 0%,#1A9C9C 100%)}
.thumb--c{background:linear-gradient(135deg,var(--coral) 0%,#E8465A 100%)}
.thumb--y{background:linear-gradient(135deg,var(--yellow) 0%,#F0B400 100%)}
.thumb--k{background:linear-gradient(135deg,#2A3436 0%,#0E1617 100%)}
.thumb__time{position:absolute; right:8px; bottom:8px; background:rgba(8,14,15,.82); color:#fff;
  font-family:var(--mono); font-size:11px; padding:2px 7px; border-radius:5px}
.thumb__check{position:absolute; left:8px; top:8px; width:26px; height:26px; border-radius:50%;
  background:var(--teal); color:#fff; display:grid; place-items:center; font-size:14px; box-shadow:0 2px 6px rgba(0,0,0,.25)}
.ccard{display:flex; flex-direction:column; text-decoration:none; color:inherit}
.ccard:hover{box-shadow:var(--shadow)}
.ccard__b{padding:14px 16px 16px; display:flex; flex-direction:column; gap:9px; flex:1}
.ccard__b h3{font-size:15.5px}
.ccard__b .sub{font-size:12.5px; color:var(--muted); display:flex; gap:10px; flex-wrap:wrap}

/* ---- レッスン行リスト ---- */
.llist{list-style:none; margin:0; padding:0}
.llist li{border-bottom:1px solid var(--rule)}
.llist li:last-child{border-bottom:0}
.llist a{display:flex; gap:14px; align-items:center; padding:13px 18px; text-decoration:none; color:inherit}
.llist a:hover{background:var(--teal-mist)}
.llist a[aria-current]{background:var(--teal-pale)}
.llist .no{font-family:var(--mono); font-size:12px; color:var(--faint); width:22px; flex:0 0 22px; text-align:right}
.llist .tick{width:22px; height:22px; flex:0 0 22px; border-radius:50%; border:1.5px solid var(--rule-2);
  display:grid; place-items:center; font-size:12px; color:transparent}
.llist .tick--on{background:var(--teal); border-color:var(--teal); color:#fff}
.llist .ttl{flex:1; font-size:14px; font-weight:500; min-width:0}
.llist .ttl small{display:block; font-size:11.5px; color:var(--muted); font-weight:400}
.llist .dur{font-family:var(--mono); font-size:11.5px; color:var(--faint)}

/* ---- 動画プレイヤー枠 ---- */
.player{position:relative; aspect-ratio:16/9; background:#0A1112; border-radius:var(--r-lg); overflow:hidden; display:grid; place-items:center}
.player__stage{text-align:center; color:#8FA3A5; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; line-height:2}
.player__play{width:66px; height:66px; border-radius:50%; background:var(--teal); color:#062E2E; display:grid; place-items:center;
  font-size:24px; margin:0 auto 12px; box-shadow:0 8px 24px rgba(43,181,181,.45); cursor:pointer}
.player__wm{position:absolute; right:14px; top:12px; font-family:var(--mono); font-size:11px;
  color:rgba(255,255,255,.34); letter-spacing:.05em; pointer-events:none}
.player__seek{position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.18)}
.player__seek i{display:block; height:100%; background:var(--teal)}
.player__resume{position:absolute; left:14px; bottom:18px; background:rgba(9,15,16,.9); color:#fff; border:1px solid rgba(255,255,255,.2);
  padding:8px 14px; border-radius:var(--r-pill); font-size:12.5px; font-weight:700; display:flex; gap:8px; align-items:center; cursor:pointer}

/* ---- レッスンナビ ---- */
.lnav{display:flex; align-items:center; gap:10px; margin:14px 0 18px}
.lnav .mid{flex:1; text-align:center; font-family:var(--mono); font-size:12.5px; color:var(--muted)}

/* ---- 本文 ---- */
.prose{font-size:15px; color:var(--ink-soft)}
.prose h3{font-size:16px; color:var(--ink); margin:22px 0 10px}
.prose ul{padding-left:1.3em; margin:0 0 14px}
.prose li{margin-bottom:6px}
.prose hr{border:0; border-top:1px dashed var(--rule-2); margin:20px 0}
.prose a{font-weight:500}
.notice{background:var(--yellow-pale); border-left:3px solid var(--yellow); padding:12px 16px; border-radius:0 var(--r) var(--r) 0; font-size:14px}

/* ---- 資料リスト ---- */
.files{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.files a{display:flex; gap:11px; align-items:center; padding:11px 14px; background:var(--surface-2); border-radius:var(--r);
  text-decoration:none; color:var(--ink); font-size:14px; font-weight:500}
.files a:hover{background:var(--teal-pale)}
.files .ic{width:26px; height:26px; border-radius:7px; display:grid; place-items:center; font-size:12px; flex:0 0 26px;
  background:var(--surface); color:var(--teal-ink); font-family:var(--mono)}
.files .meta{margin-left:auto; font-size:11.5px; color:var(--muted); font-family:var(--mono)}

/* ---- 備考欄（会員ごとのメモ）---- */
.memo{border:1.5px solid var(--yellow); background:var(--yellow-pale); border-radius:var(--r-lg); overflow:hidden}
.memo__hd{display:flex; align-items:center; gap:10px; padding:13px 18px; border-bottom:1px solid rgba(254,208,47,.5)}
.memo__hd h3{font-size:15px}
.memo__hd .priv{font-size:11.5px; color:var(--yellow-ink); font-weight:700; display:flex; gap:5px; align-items:center}
.memo__hd .sp{margin-left:auto}
.memo textarea{width:100%; border:0; background:transparent; resize:vertical; min-height:150px; padding:16px 18px;
  font-family:var(--body); font-size:14.5px; line-height:1.9; color:var(--ink)}
.memo textarea:focus{outline:none; background:rgba(255,255,255,.5)}
.memo__ft{display:flex; align-items:center; gap:12px; padding:10px 18px 14px; flex-wrap:wrap}
.memo__ft .saved{font-size:12px; color:var(--yellow-ink); font-family:var(--mono)}
.memo__ft .sp{margin-left:auto}
.memo__hint{font-size:12px; color:var(--yellow-ink); padding:0 18px 14px; margin:0}

/* ---- コメント ---- */
.cmt{list-style:none; margin:0; padding:0}
.cmt>li{display:flex; gap:13px; padding:16px 0; border-bottom:1px solid var(--rule)}
.cmt>li:last-child{border-bottom:0}
.cmt .who{font-weight:700; font-size:14px}
.cmt .when{font-size:11.5px; color:var(--faint); font-family:var(--mono); margin-left:8px}
.cmt p{font-size:14px; margin:4px 0 6px; color:var(--ink-soft)}
.cmt .reply{background:none; border:0; color:var(--teal-ink); font-size:12.5px; font-weight:700; cursor:pointer; padding:0; font-family:var(--body)}
.cmt ul{list-style:none; margin:12px 0 0; padding:12px 0 0 0; border-top:1px dashed var(--rule)}
.cmt ul li{display:flex; gap:11px}

/* ---- フォーム ---- */
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:18px}
.field>label{font-size:13px; font-weight:700; color:var(--ink-soft); display:flex; gap:7px; align-items:center}
.field .req{color:var(--coral-ink); font-size:11px}
.field .hint{font-size:12px; color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=date],select,textarea{
  font-family:var(--body); font-size:14.5px; color:var(--ink); background:var(--surface);
  border:1.5px solid var(--rule-2); border-radius:var(--r); padding:11px 13px; width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--teal); outline:none}
.mono-in{font-family:var(--mono); font-size:13px}
.row{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.check{display:flex; gap:10px; align-items:flex-start; font-size:14px; margin-bottom:10px}
.check input{margin-top:5px; accent-color:var(--teal); width:16px; height:16px; flex:0 0 16px}
.switchrow{display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--rule)}
.switchrow:last-child{border-bottom:0}
.switchrow .sp{margin-left:auto}
.switchrow b{font-size:14px; display:block}
.switchrow small{font-size:12px; color:var(--muted)}

/* ---- テーブル ---- */
.tw{overflow-x:auto; border:1px solid var(--rule); border-radius:var(--r-lg); background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:640px; font-size:13.5px}
th,td{text-align:left; padding:12px 15px; border-bottom:1px solid var(--rule); vertical-align:middle}
th{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); background:var(--surface-2); white-space:nowrap; font-weight:400}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--teal-mist)}
td.num{font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}
.mini-bar{width:96px; height:5px; background:var(--surface-2); border-radius:var(--r-pill); overflow:hidden; display:inline-block; vertical-align:middle; margin-right:8px}
.mini-bar>i{display:block; height:100%; background:var(--teal)}
.act{display:flex; gap:6px; flex-wrap:wrap}
.act a,.act button{font-size:12px; font-weight:700; padding:5px 11px; border-radius:var(--r-pill); text-decoration:none;
  border:1.5px solid var(--rule-2); background:transparent; color:var(--ink-soft); cursor:pointer; font-family:var(--body); white-space:nowrap}
.act a:hover{border-color:var(--teal); color:var(--teal-ink)}
.act .danger:hover{border-color:var(--coral); color:var(--coral-ink)}

/* ---- 統計タイル（管理画面）---- */
.stats{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.stat{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg); padding:16px 18px; position:relative; overflow:hidden}
.stat .k{font-size:12px; color:var(--muted); display:block; margin-bottom:2px}
.stat .v{font-family:var(--mono); font-size:27px; font-weight:600; line-height:1.25; letter-spacing:-.01em}
.stat .v small{font-size:13px; color:var(--muted); font-weight:400; margin-left:3px}
.stat .d{font-size:11.5px; color:var(--teal-ink); font-weight:700}
.stat .d.dn{color:var(--coral-ink)}
.stat::after{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--teal)}
.stat--c::after{background:var(--coral)} .stat--y::after{background:var(--yellow)} .stat--k::after{background:var(--ink)}

/* ---- 管理サイドバー ---- */
.ad{display:grid; grid-template-columns:216px minmax(0,1fr); min-height:100vh}
.ad__side{background:var(--surface); border-right:1px solid var(--rule); padding:0 0 30px}
.ad__side .logo{padding:15px 18px}
.ad__side nav{display:flex; flex-direction:column; padding:6px 10px; gap:2px}
.ad__side nav a{padding:9px 13px; border-radius:var(--r); text-decoration:none; color:var(--ink-soft); font-size:13.5px; font-weight:500; display:flex; gap:10px; align-items:center}
.ad__side nav a:hover{background:var(--surface-2)}
.ad__side nav a[aria-current]{background:var(--teal-pale); color:var(--teal-ink); font-weight:700}
.ad__side nav .grp{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); padding:16px 13px 5px}
.ad__main{padding:0 26px 70px; min-width:0}
.ad__bar{display:flex; align-items:center; gap:14px; padding:16px 0; flex-wrap:wrap}
.ad__bar .sp{margin-left:auto}
.ad__bar h1{font-size:21px}
@media (max-width:820px){
  .ad{grid-template-columns:minmax(0,1fr)}
  .ad__side{border-right:0; border-bottom:1px solid var(--rule)}
  .ad__side nav{flex-direction:row; overflow-x:auto; padding:6px 10px 10px}
  .ad__side nav .grp{display:none}
  .ad__main{padding:0 18px 60px}
}

/* ---- 注記（プロトタイプ用の説明）---- */
.note{display:flex; gap:11px; background:var(--teal-mist); border:1px dashed var(--teal); border-radius:var(--r);
  padding:13px 16px; font-size:13px; color:var(--ink-soft); margin:0 0 20px}
.note b{color:var(--teal-ink)}
.note .ic{font-family:var(--mono); color:var(--teal-ink); font-size:11px; font-weight:600; flex:0 0 auto; padding-top:2px}

/* ---- ログイン画面 ---- */
.auth{min-height:100vh; display:grid; place-items:center; padding:40px 20px; position:relative; overflow:hidden}
.auth__blob{position:absolute; border-radius:50%; filter:blur(3px); opacity:.5; pointer-events:none}
.auth__card{position:relative; width:100%; max-width:414px; background:var(--surface); border:1px solid var(--rule);
  border-radius:20px; box-shadow:var(--shadow); overflow:hidden}
.auth__body{padding:28px 28px 26px}
.auth__body h1{font-size:21px; text-align:center}
.auth__body .lead{text-align:center; color:var(--muted); font-size:13px; margin:7px 0 24px}
.auth__foot{text-align:center; font-size:12.5px; color:var(--muted); padding:0 28px 26px}
.auth__brand{display:flex; flex-direction:column; align-items:center; gap:10px; padding:28px 0 4px}
.auth__brand .logo__mark{width:46px; height:46px; flex:0 0 46px; font-size:23px; border-radius:13px}
.auth__brand .nm{font-family:var(--disp); font-weight:700; font-size:16px}
.auth__brand .sub{font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; color:var(--muted)}

/* ---- インデックス（プロトタイプ目次）---- */
.hero{padding:52px 0 34px}
.hero h1{font-size:clamp(27px,4.6vw,40px)}
.hero .lead{font-size:16px; color:var(--ink-soft); max-width:62ch; margin-top:14px}
.swatches{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(138px,1fr)); margin:22px 0 0}
.sw{border-radius:var(--r); overflow:hidden; border:1px solid var(--rule); background:var(--surface)}
.sw i{display:block; height:62px}
.sw div{padding:9px 12px}
.sw b{display:block; font-size:13px}
.sw code{font-family:var(--mono); font-size:11px; color:var(--muted)}
.sw span{font-size:11.5px; color:var(--muted); display:block; margin-top:2px}
.idx{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(252px,1fr))}
.idx a{display:flex; gap:13px; align-items:flex-start; padding:15px 17px; background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--r-lg); text-decoration:none; color:inherit}
.idx a:hover{border-color:var(--teal); box-shadow:var(--shadow)}
.idx .id{font-family:var(--mono); font-size:11px; font-weight:600; color:var(--teal-ink); background:var(--teal-pale);
  padding:3px 8px; border-radius:6px; flex:0 0 auto}
.idx b{display:block; font-size:14.5px; font-family:var(--disp)}
.idx small{display:block; font-size:12px; color:var(--muted); line-height:1.65; margin-top:2px}
footer.ft{border-top:1px solid var(--rule); margin-top:46px; padding:24px 0 0; color:var(--muted); font-size:12.5px}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}