:root{
  --bg:#eef4f0;
  --paper:#fbfdfb;
  --ink:#11231f;
  --muted:#5f756d;
  --line:#c5d6cf;
  --green:#2f6f60;
  --teal:#457f8a;
  --sand:#9a7441;
  --shadow:0 20px 40px rgba(17,35,31,.10);
  --ui:"PingFang SC","Noto Sans CJK SC","Helvetica Neue",sans-serif;
  --serif:"Songti SC","Noto Serif CJK SC","STSong",serif;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#eef4f0 0%,#f8fbf8 50%,#e9f0eb 100%);color:var(--ink);font-family:var(--ui);letter-spacing:0}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(rgba(17,35,31,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(17,35,31,.04) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(180deg,#000 0 78%,transparent 100%)}
a{text-decoration:none;color:inherit}
.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:14px 26px;background:rgba(251,253,251,.92);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:12px}
.brand span{display:grid;place-items:center;width:46px;height:46px;border-radius:8px;background:var(--green);color:#fff;font-family:var(--serif);font-size:24px}
.brand strong{display:block;font-size:17px}
.brand em{display:block;color:var(--muted);font-size:12px;font-style:normal}
.topbar nav{display:flex;flex-wrap:wrap;gap:10px}
.topbar nav a,.hero-actions a,.path-nav a,.pill{border:1px solid var(--line);background:#fff;padding:10px 14px;border-radius:999px;box-shadow:var(--shadow);font-weight:700}
.topbar nav a.active{background:var(--green);border-color:var(--green);color:#fff}
main{max-width:1280px;margin:0 auto}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;padding:48px 34px 28px;min-height:calc(100vh - 74px)}
.eyebrow,.kicker,.chapter-kicker{display:inline-block;color:var(--sand);font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.hero h1{margin:12px 0 18px;font-family:var(--serif);font-size:clamp(50px,7vw,98px);line-height:1.02}
.lead{font-size:21px;line-height:1.72;color:var(--muted)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero-panel{display:grid;gap:16px}
.hero-panel img{width:100%;max-height:76vh;object-fit:contain;background:#fff;border:1px solid var(--line);padding:16px;box-shadow:var(--shadow)}
.hero-note,.panel,.volume-card,.chapter-card,.concept-card,.plate-thumb,.route-card,.reading-card,.deep-card,.quiz,.plate-rail,.intro-card{background:rgba(255,255,255,.82);border:1px solid var(--line);box-shadow:var(--shadow)}
.hero-note,.panel,.quiz,.plate-rail{padding:22px}
.hero-note strong{display:block;font-size:20px;margin-bottom:8px}
.section,.narrow-layout{padding:28px 34px 46px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:18px}
.section-head h2,.panel h2,.plate-rail h2,.reading-card h3,.deep-card h3{margin:0 0 8px;font-family:var(--serif)}
.section-head h2{font-size:32px}
.section-head p{max-width:760px;color:var(--muted);line-height:1.65}
.volume-grid,.concept-grid,.plate-grid,.route-grid,.chapter-grid,.reading-grid,.deep-grid{display:grid;gap:16px}
.volume-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.chapter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.concept-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.plate-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.plate-grid.compact,.deep-grid,.route-grid,.reading-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.volume-card,.concept-card,.route-card,.reading-card,.deep-card{padding:18px}
.volume-card small,.chapter-card small,.concept-card small,.plate-thumb small,.breadcrumb,.sample{color:var(--muted)}
.volume-card h3,.concept-card strong,.route-card strong{font-size:24px}
.meta-row{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-weight:700}
.search{width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:#fff;font-size:18px;box-shadow:var(--shadow)}
.chapter-card{display:grid;grid-template-columns:180px minmax(0,1fr);gap:18px;padding:12px}
.chapter-thumb{display:flex;align-items:center;justify-content:center;background:#f4f8f6;border:1px solid var(--line);padding:10px;border-radius:10px}
.chapter-thumb img,.plate-thumb img,.mini-plate img,.intro-thumb img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;padding:8px;border:1px solid rgba(0,0,0,.06)}
.chapter-copy h3{margin:10px 0 8px;font-family:var(--serif);font-size:28px;line-height:1.25}
.chapter-copy p,.concept-card p,.route-card span,.reading-card p,.deep-card p,.hero-note p{line-height:1.66;color:var(--muted)}
.concept-card strong{display:block;margin:8px 0}
.plate-thumb{display:block;padding:10px;border-radius:12px}
.plate-thumb span{display:block;margin-top:10px;font-weight:800;line-height:1.45}
.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;padding:30px 34px 48px;align-items:start}
.content-pane{min-width:0}
.breadcrumb{font-weight:700;margin-bottom:14px}
.breadcrumb a{color:var(--green)}
h1{margin:10px 0 18px;font-family:var(--serif);font-size:clamp(44px,6vw,84px);line-height:1.06}
.intro-card{display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px;padding:14px}
.intro-thumb{display:flex;align-items:center;justify-content:center;background:#f4f8f6;border-radius:12px;padding:10px}
.pill-row{display:flex;flex-wrap:wrap;gap:10px}
.check-list{padding-left:20px}
.check-list li{margin:9px 0;line-height:1.7}
.plate-rail{position:sticky;top:90px;max-height:calc(100vh - 104px);overflow:auto}
.plate-group{margin-bottom:18px}
.plate-group h3{font-size:20px;color:var(--green);margin-bottom:10px}
.mini-plate-grid{display:grid;grid-template-columns:1fr;gap:10px}
.mini-plate{display:grid;grid-template-columns:88px minmax(0,1fr);gap:10px;align-items:center;padding:10px;border:1px solid var(--line);background:#fff;border-radius:10px;box-shadow:var(--shadow)}
.mini-plate span{font-weight:700;line-height:1.45}
.mini-note{color:var(--muted);line-height:1.65;font-size:14px}
.quiz summary{cursor:pointer;font-weight:800;font-size:22px;font-family:var(--serif)}
.quiz p{color:var(--muted);font-size:19px;line-height:1.72}
.warning{border-color:#e0c8b0;background:#fffaf5}
.image-stage img{width:100%;max-height:76vh;object-fit:contain;background:#fff;border:1px solid var(--line);padding:14px;box-shadow:var(--shadow)}
.term-table{width:100%;border-collapse:collapse;background:#fff}
.term-table th,.term-table td{padding:14px;border:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.6}
.path-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:24px 0}
.hidden-by-search{display:none!important}
@media (max-width:1080px){
  .hero,.detail-layout,.volume-grid,.concept-grid{grid-template-columns:1fr}
  .plate-grid,.plate-grid.compact,.deep-grid,.route-grid,.reading-grid,.chapter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plate-rail{position:static;max-height:none;overflow:visible}
}
@media (max-width:720px){
  .topbar{position:static;padding:12px 16px;align-items:flex-start}
  .hero,.section,.detail-layout,.narrow-layout{padding-left:18px;padding-right:18px}
  .hero h1{font-size:52px}
  .chapter-card,.intro-card,.plate-grid,.plate-grid.compact,.deep-grid,.route-grid,.reading-grid,.chapter-grid{grid-template-columns:1fr}
}