/* ==========================================================================
   スキル図鑑 購入者限定サイト — 共通スタイル「魔導書」(2026-08-06 SITE-01でA案採用)
   世界: 蝋燭の灯る机の上に置かれた1冊の本。サイト全体が本、各ページが章。
   材質: 生成りの紙・箔押しの金・焦茶のインク・蝋封。ガラス/LED/SF表記は使わない。
   光源: 左上の蝋燭ただ1つ(全ての静的影は右下向きで統一)。
   紙の質感: feTurbulence(各ページ末尾の #paperTexture フィルタ)。
   テーマ切替なし: 「紙の本」という虚構が世界の核のため、ダークテーマは作らない(設計判断)。
   前作(AIオフィスの育て方=暗いガラスの司令室)とは意図的に正反対の造形。
   アクセシビリティ: 本文の小さい文字は --ink/--ink-2 のみ(紙地に4.5:1以上)。
   --gold は装飾・大きい見出し・キッカー専用(小さい本文に使わない)。
   ========================================================================== */
:root{
  --desk:#241809;
  --paper:#f4ead4;
  --paper-2:#ecdfc2;
  --ink:#3b2a15;      /* 本文の焦茶インク(紙地に約9:1) */
  --ink-2:#63502f;    /* 補足文(紙地に約5.5:1) */
  --gold:#a67c2e;     /* 箔押しの金(装飾・キッカー用) */
  --gold-2:#c9a25a;
  --wax:#8a2f23;      /* 蝋封の赤 */
  --rule:rgba(59,42,21,.22);
  --mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --gothic:"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}
body{
  margin:0; color:var(--ink); font-family:var(--gothic); font-size:16px; line-height:1.9;
  background:#241809; min-height:100vh;
}
/* 机: 油彩の樫の天板(左上から蝋燭の光=唯一の光源) */
body::before{
  content:""; position:fixed; inset:0; z-index:0;
  background:url('desk-wood.png') center top/cover no-repeat;
}
/* 机を暗く落として本を主役にする */
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 24% 0%, transparent 0%, rgba(18,10,4,.42) 70%),
    linear-gradient(180deg, rgba(18,10,4,.06) 0%, rgba(18,10,4,.5) 100%);
}

h1,h2,h3{font-family:var(--mincho); color:var(--ink); margin:0; font-weight:700; letter-spacing:.05em;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
ul,ol{margin:0; padding:0; list-style:none;}
button{font-family:inherit;}
img{max-width:100%; height:auto;}

/* キーボード操作の視認(全ページ共通) */
a:focus-visible, button:focus-visible{
  outline:2.5px solid var(--gold); outline-offset:3px; border-radius:4px;
}

/* ---------- 本(紙の束) ---------- */
.book{
  position:relative; z-index:1; max-width:1040px;
  margin:clamp(18px,4vw,52px) auto clamp(30px,5vw,70px);
  background:linear-gradient(178deg, var(--paper) 0%, var(--paper-2) 100%);
  box-shadow:
    26px 46px 90px -30px rgba(0,0,0,.9),
    8px 14px 30px -12px rgba(0,0,0,.65);
  border-radius:3px 10px 10px 3px;
}
/* 紙の束の断面(右・下) */
.book::after{
  content:""; position:absolute; top:6px; right:-7px; bottom:-7px; width:7px; border-radius:0 4px 4px 0;
  background:repeating-linear-gradient(180deg, #e6d9b8 0 2px, #cdbb92 2px 3px);
  box-shadow:inset -2px 0 3px rgba(0,0,0,.25);
}
.book::before{
  content:""; position:absolute; left:10px; right:-4px; bottom:-7px; height:7px; border-radius:0 0 4px 4px;
  background:repeating-linear-gradient(90deg, #e6d9b8 0 3px, #cdbb92 3px 4px);
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.28);
}
/* 背(左の綴じ) */
.spine-edge{
  position:absolute; left:0; top:0; bottom:0; width:26px; border-radius:3px 0 0 3px; z-index:2;
  background:linear-gradient(90deg, #4a3118 0%, #6a4a24 34%, rgba(106,74,36,0) 100%);
}
.spine-edge::after{
  content:""; position:absolute; left:22px; top:0; bottom:0; width:14px;
  background:linear-gradient(90deg, rgba(59,42,21,.22), transparent);
}
/* 紙の繊維(feTurbulence)と四隅の焼け */
.page{position:relative; z-index:1; overflow:hidden; border-radius:3px 10px 10px 3px;}
.page::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.16;
  filter:url(#paperTexture); background:#f4ead4; mix-blend-mode:multiply;
}
.page::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 34% 22% at 0% 0%, rgba(140,100,50,.14), transparent 70%),
    radial-gradient(ellipse 34% 22% at 100% 0%, rgba(140,100,50,.10), transparent 70%),
    radial-gradient(ellipse 40% 26% at 100% 100%, rgba(140,100,50,.16), transparent 70%),
    radial-gradient(ellipse 40% 26% at 0% 100%, rgba(140,100,50,.12), transparent 70%);
}
.inner{position:relative; z-index:2; padding:0 clamp(26px,6vw,84px) 64px;}

/* ---------- しおり紐ナビ ---------- */
.ribbons{
  display:flex; justify-content:center; gap:clamp(8px,2vw,18px); padding:0 clamp(20px,5vw,70px);
  position:relative; z-index:3; margin-bottom:-4px;
}
.ribbon{
  --rb:#8a2f23;
  color:#f6e8cd; font-family:var(--mincho); font-size:12.5px; letter-spacing:.1em;
  padding:20px 6px 12px; position:relative; text-align:center;
  width:112px; flex:none;  /* 全しおり同寸(内容量で幅が揺れない) */
  background:linear-gradient(180deg, color-mix(in srgb, var(--rb) 82%, black) 0%, var(--rb) 30%, color-mix(in srgb, var(--rb) 78%, black) 100%);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 9px), 50% 100%, 0 calc(100% - 9px));
  box-shadow:inset 0 -8px 12px rgba(0,0,0,.28);
  transform-origin:top center; transition:transform .18s ease;
}
.ribbon:hover{transform:translateY(4px);}
.ribbon:active{transform:translateY(7px) scale(.98);}
.ribbon[aria-current="page"]{
  filter:brightness(1.14);
  box-shadow:inset 0 0 0 2px rgba(232,205,147,.95), inset 0 -8px 12px rgba(0,0,0,.28);
}
.ribbon .no{display:block; font-size:10px; letter-spacing:.3em; opacity:.8; margin-bottom:2px;}
.ribbon.r2{--rb:#1f4a38;}
.ribbon.r3{--rb:#274168;}
.ribbon.r4{--rb:#6d5313;}
.ribbon.r5{--rb:#5a2a52;}
/* focus-visible はリボンでは clip-path の外に出るため内側リングで代替 */
.ribbon:focus-visible{outline:none; box-shadow:inset 0 0 0 2.5px #f6e8cd, inset 0 -8px 12px rgba(0,0,0,.28);}

/* ---------- ページ見出し(章の扉) ---------- */
.chapter-title{padding:56px 0 8px; text-align:center;}
.chapter-title .no{
  display:block; font-family:var(--mincho); font-size:12px; letter-spacing:.5em; text-indent:.5em;
  color:var(--gold); margin-bottom:10px;
}
.chapter-title h1{font-size:clamp(28px,4.2vw,40px); letter-spacing:.12em; text-indent:.12em;}
.chapter-title .lede{font-size:15.5px; color:var(--ink-2); max-width:36em; margin:14px auto 0;}
.chapter-title .orn{margin-top:16px; color:var(--gold-2); font-size:12px; letter-spacing:.8em; text-indent:.8em;}

/* ---------- 章(セクション) ---------- */
.chapter{margin:56px 0 0;}
.chapter-head{text-align:center; margin-bottom:20px;}
.chapter-head .no{
  display:block; font-family:var(--mincho); font-size:12px; letter-spacing:.5em; text-indent:.5em;
  color:var(--gold); margin-bottom:8px;
}
.chapter-head h2{font-size:clamp(23px,3.2vw,30px); letter-spacing:.1em;}
.chapter-head .orn{margin-top:10px; color:var(--gold-2); font-size:12px;}
.chapter .lede{font-size:15.5px; color:var(--ink-2); max-width:36em; margin:0 auto 24px; text-align:center;}

/* ---------- 白い台紙のカード(汎用) ---------- */
.sheet{
  background:#fffaf0; border:1px solid rgba(120,90,50,.26); padding:26px 24px;
  box-shadow:8px 18px 36px -22px rgba(70,50,20,.6); position:relative;
}
.sheet::before{content:""; position:absolute; inset:6px; border:1px solid rgba(166,124,46,.3); pointer-events:none;}
.sheet > *{position:relative;}

/* ---------- 三つの手順(読書札) ---------- */
.steps3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.step{
  background:#fffaf0; border:1px solid rgba(120,90,50,.26); padding:26px 22px 22px;
  box-shadow:6px 16px 32px -20px rgba(70,50,20,.55);
  position:relative; text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.step::before{content:""; position:absolute; inset:6px; border:1px solid rgba(166,124,46,.30); pointer-events:none;}
.step:hover{transform:translateY(-4px); box-shadow:6px 20px 38px -22px rgba(70,50,20,.6);}
.step .num{
  width:32px; height:32px; margin:0 auto 12px; border-radius:50%;
  background:linear-gradient(160deg,#e8cd93,#a67c2e); color:#fffaf0;
  font-family:var(--mincho); font-size:15px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 7px rgba(90,60,20,.4), inset 0 1px 0 rgba(255,255,255,.5);
}
.step h3{font-size:18px; margin:0 0 8px; letter-spacing:.06em;}
.step p{font-size:13.5px; color:var(--ink-2); line-height:1.85;}
.step .go{
  display:inline-block; margin-top:14px; font-family:var(--mincho); font-size:12.5px; letter-spacing:.1em;
  color:var(--ink); border-bottom:1.5px solid var(--gold-2); padding-bottom:2px; font-weight:700;
}
.step .go:hover{color:var(--gold);}

/* ---------- 番号つき手順(縦) ---------- */
.olsteps{counter-reset:step; display:flex; flex-direction:column; gap:14px;}
.olsteps li{
  position:relative; padding:16px 18px 16px 54px; background:#fffaf0;
  border:1px solid rgba(120,90,50,.24); box-shadow:4px 10px 24px -18px rgba(70,50,20,.5);
}
.olsteps li::before{
  counter-increment:step; content:counter(step); position:absolute; left:16px; top:16px;
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--mincho); font-size:13px; font-weight:700;
  background:linear-gradient(160deg,#e8cd93,#a67c2e); color:#fffaf0;
  box-shadow:0 2px 6px rgba(90,60,20,.35);
}
.olsteps li strong{display:block; color:var(--ink); font-size:15px; margin-bottom:4px; font-family:var(--mincho); letter-spacing:.04em;}
.olsteps li p{font-size:14px; color:var(--ink-2);}
.olsteps code{
  font-family:var(--gothic); font-size:13px; background:rgba(166,124,46,.10);
  border:1px solid rgba(166,124,46,.3); border-radius:5px; padding:2px 8px; color:var(--ink);
}

/* ---------- カードの標本(写真コーナー留め) ---------- */
.specimens{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,30px);}
.specimen{text-align:center;}
.specimen .mount{
  padding:clamp(10px,1.4vw,14px); background:#fffaf0; border:1px solid rgba(120,90,50,.26);
  box-shadow:8px 18px 36px -22px rgba(70,50,20,.65); position:relative;
  transition:transform .22s ease, box-shadow .22s ease;
}
.specimen .mount:hover{transform:translateY(-6px) rotate(-.5deg); box-shadow:8px 26px 44px -22px rgba(50,34,12,.75);}
.specimen .corner{position:absolute; width:22px; height:22px; z-index:2; filter:drop-shadow(0 1px 2px rgba(90,60,20,.35));}
.specimen .corner.tl{left:-3px; top:-3px; background:linear-gradient(135deg, #c9a25a 0 49%, transparent 50%);}
.specimen .corner.tr{right:-3px; top:-3px; background:linear-gradient(225deg, #c9a25a 0 49%, transparent 50%);}
.specimen .corner.bl{left:-3px; bottom:-3px; background:linear-gradient(45deg, #c9a25a 0 49%, transparent 50%);}
.specimen .corner.br{right:-3px; bottom:-3px; background:linear-gradient(-45deg, #c9a25a 0 49%, transparent 50%);}
.specimen img{width:100%; height:auto; display:block;}
.specimen .name{font-family:var(--mincho); font-size:16px; margin-top:14px; letter-spacing:.12em; font-weight:700;}
.specimen .cond{font-size:12.5px; color:var(--ink-2); margin-top:2px;}
.specimen .gem{font-size:12px; color:var(--ink-2); margin-top:1px; letter-spacing:.08em;}

/* ---------- 蝋封ボタン(主導線・1ページ1つまで) ---------- */
.wax-btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mincho); font-size:15px; letter-spacing:.1em; color:#fff6e6; font-weight:700;
  padding:13px 30px; border-radius:999px; border:none; cursor:pointer;
  background:radial-gradient(circle at 32% 26%, #b8483a, #8a2f23 62%, #5f1d15);
  box-shadow:0 5px 14px rgba(90,30,20,.45), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -4px 8px rgba(0,0,0,.3);
  transition:transform .15s ease, box-shadow .15s ease;
}
.wax-btn:hover{transform:translateY(-2px); box-shadow:0 8px 18px rgba(90,30,20,.55), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -4px 8px rgba(0,0,0,.3);}
.wax-btn:active{transform:translateY(1px) scale(.97); box-shadow:0 2px 6px rgba(90,30,20,.5), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 5px rgba(0,0,0,.35);}
.wax-btn .seal-mini{
  width:20px; height:20px; border-radius:50%; border:1px solid rgba(255,246,230,.55);
  display:flex; align-items:center; justify-content:center; font-size:10px; flex:none;
}
.wax-btn[aria-disabled="true"]{
  background:radial-gradient(circle at 32% 26%, #a89f92, #7d7568 62%, #5a544a);
  box-shadow:0 3px 8px rgba(40,36,28,.35), inset 0 1px 0 rgba(255,255,255,.2);
  cursor:not-allowed;
}
.wax-btn[aria-disabled="true"]:hover{transform:none;}

/* ---------- 補足ボタン(金の縁) ---------- */
.quill-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mincho); font-size:13.5px; letter-spacing:.08em; color:var(--ink); font-weight:700;
  padding:10px 22px; border-radius:999px; border:1.5px solid var(--gold-2); background:#fffaf0;
  cursor:pointer; transition:background .15s ease, transform .15s ease;
}
.quill-btn:hover{background:rgba(201,162,90,.14); transform:translateY(-1px);}
.quill-btn:active{transform:translateY(1px);}

/* ---------- 問いと答え(Q&A) ---------- */
.faq{padding:18px 0; border-top:1px dotted var(--rule);}
.faq:first-of-type{border-top:none; padding-top:0;}
.faq h3{font-size:15.5px; margin-bottom:6px; letter-spacing:.03em;}
.faq h3::before{content:"問 "; color:var(--gold); font-size:13px; letter-spacing:.1em;}
.faq p{font-size:14px; color:var(--ink-2);}
.faq p a{color:var(--ink); border-bottom:1px dotted var(--gold); font-weight:600;}
.faq p a:hover{color:var(--gold);}

/* ---------- 罫線・注記 ---------- */
.hr-orn{height:16px; margin:8px 0 20px; position:relative; text-align:center;}
.hr-orn::before{
  content:""; position:absolute; left:0; right:0; top:8px; height:1px;
  background:linear-gradient(90deg, transparent, var(--rule) 20%, var(--rule) 80%, transparent);
}
.hr-orn::after{
  content:"◆"; position:relative; z-index:1; color:var(--gold-2); font-size:10px;
  background:var(--paper); padding:0 12px;
}
.note{font-size:12.5px; color:var(--ink-2); line-height:1.9;}
.tag-line{
  display:inline-block; font-family:var(--mincho); font-size:12px; letter-spacing:.14em;
  color:var(--ink); background:rgba(166,124,46,.12); border:1px solid rgba(166,124,46,.35);
  border-radius:999px; padding:4px 14px; font-weight:700;
}

/* ---------- 図版(章の扉絵) ---------- */
.plate .mat{
  padding:clamp(10px,1.6vw,16px); background:#fffaf0; border:1px solid rgba(120,90,50,.30);
  box-shadow:0 3px 0 rgba(255,255,255,.55) inset, 10px 22px 44px -22px rgba(70,50,20,.6);
}
.plate .art{position:relative; overflow:hidden;}
.plate img{width:100%; height:auto; display:block;}
.plate .art::after{content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 44px rgba(60,40,15,.55);}
.plate .cap{font-family:var(--mincho); font-size:12.5px; color:var(--ink-2); text-align:center; padding-top:12px; letter-spacing:.22em; text-indent:.22em;}
.plate--chapter{max-width:760px; margin:26px auto 0;}

/* ---------- 目次(index) / 奥付 ---------- */
.toc a{
  display:flex; align-items:baseline; gap:16px; color:var(--ink);
  padding:15px 8px; border-bottom:1px dotted var(--rule);
  transition:background .15s ease, padding-left .2s ease;
}
.toc a:hover{background:rgba(166,124,46,.08); padding-left:14px;}
.toc .no{
  font-family:var(--mincho); font-size:14px; color:#fffaf0; flex:none;
  width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#c9a25a,#8a6520); box-shadow:0 2px 5px rgba(90,60,20,.35);
  transform:translateY(4px);
}
.toc .ttl{font-family:var(--mincho); font-size:clamp(17px,2.2vw,20px); letter-spacing:.08em; flex:none; font-weight:700;}
.toc .dots{flex:1; border-bottom:1px dotted rgba(59,42,21,.35); transform:translateY(-5px); min-width:30px;}
.toc .desc{font-size:12.5px; color:var(--ink-2); flex:none;}

.colophon{
  margin-top:64px; padding-top:20px; border-top:1px solid var(--rule);
  font-size:12.5px; color:var(--ink-2); text-align:center; line-height:2.1;
}
.colophon .orn{color:var(--gold-2); margin-bottom:6px;}
.colophon a{border-bottom:1px dotted var(--gold); font-weight:600;}
.colophon a:hover{color:var(--gold);}

/* 未確定リンクの見た目(押せないことが分かるように) */
.link-pending{opacity:.65; cursor:default;}

/* ---------- レスポンシブ ---------- */
@media (max-width:820px){
  .steps3,.specimens{grid-template-columns:1fr;}
  .ribbons{flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
  .ribbons::-webkit-scrollbar{display:none;}
  .ribbon{width:104px;}
  .toc .desc{display:none;}
  .book{margin-left:10px; margin-right:14px;}
  .specimen{max-width:340px; margin:0 auto; width:100%;}
}