:root { --yellow: #fcbb4c; --brown: #4a2400; --soy: #bbaa88; --ink: #403224; --muted: #796a58; --paper: #faf7f0; --line: #e5ddcf; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Josefin Sans', 'M PLUS 1p', sans-serif; font-size: 14px; line-height: 1.9; }
a { color: inherit; text-underline-offset: 4px; }
button { font: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 3px solid #ba7200; outline-offset: 5px; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 5; background: var(--yellow); padding: 10px 20px; }
.skip-link:focus { top: 10px; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 300px; padding: 34px 26px 24px; background: #221100; color: var(--soy); overflow-y: auto; }
.brand { display: block; padding: 0 6px; }
.brand img { display: block; width: 220px; height: auto; }
.toc { padding-bottom: 25vh; padding-bottom: 25dvh; }
.toc-home { display: block; margin-bottom: 22px; color: var(--yellow); font-size: 12px; }
.toc-heading { margin-top: 24px; display: flex; align-items: center; gap: 10px; margin-bottom: 23px; font-size: 11px; letter-spacing: .2em; }
.toc-heading::after { content: ''; height: 1px; background: #59432c; flex: 1; }
.nav-group + .nav-group { margin-top: 22px; }
.nav-group h2 { margin: 0 0 7px; color: #f6eddb; font-size: 13px; font-weight: 500; }
.nav-group h2 span { margin-right: 10px; color: var(--yellow); font-size: 11px; }
.nav-group ul { list-style: none; margin: 0; padding: 0; }
.nav-group a { display: block; border-radius: 4px; padding: 7px 12px 7px 29px; text-decoration: none; font-size: 12px; }
.nav-group a:hover { background: #372410; color: #fff; }
.nav-group a[aria-current] { background: var(--yellow); color: var(--brown); }
.sidebar-footer { margin-top: 32px; padding-top: 18px; border-top: 1px solid #59432c; font-size: 11px; }
.menu-toggle { display: none; }
.page { margin-left: 300px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 19px 48px; border-bottom: 1px solid var(--line); font-size: 12px; }
.topbar strong { font-weight: 400; letter-spacing: .13em; }
.topbar a { color: var(--muted); }
main { max-width: 1030px; margin: auto; padding: 52px 64px 30px; }
.eyebrow { color: #926119; font-size: 12px; letter-spacing: .24em; margin: 0 0 5px; }
h1 { margin: 0; color: var(--brown); font-size: 30px; font-weight: 800; letter-spacing: .06em; }
.intro { margin: 12px 0 26px; color: var(--muted); }
.notice { display: flex; align-items: baseline; gap: 15px; padding: 12px 18px; margin-bottom: 36px; background: #f2ead9; border-left: 3px solid var(--yellow); font-size: 12px; }
.notice strong { flex-shrink: 0; color: var(--brown); }
.guide-section { scroll-margin-top: 24px; }
.guide-section + .guide-section { margin-top: 48px; }
.enhanced .guide-section { margin-top: 0; }
[hidden] { display: none !important; }
.section-category { margin: 0 0 9px; color: var(--muted); font-size: 12px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 19px; border-bottom: 1px solid var(--line); }
.section-heading h2 { margin: 0; color: var(--brown); font-size: 25px; line-height: 1.5; }
.badge { white-space: nowrap; border: 1px solid #d8cab2; padding: 2px 10px; border-radius: 3px; color: var(--muted); font-size: 10px; font-weight: 500; }
.section-desc { color: var(--muted); margin: 22px 0 28px; font-size: 13px; }
.placeholder { padding: 26px 28px; border: 1px solid var(--line); background: #fffdf8; border-radius: 5px; margin: 18px 0; }
.placeholder h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 15px; font-weight: 500; }
.placeholder h3::before { content: ''; width: 4px; height: 16px; background: var(--yellow); }
.placeholder p { color: var(--muted); font-size: 12px; margin: 0; }
.guide-body { margin: 28px 0; }
.guide-body h3 { margin: 0 0 12px; color: var(--brown); font-size: 17px; }
.guide-body p { margin: 10px 0; }
.guide-body strong { color: var(--brown); }
.guide-note { padding: 16px 20px; border-left: 3px solid var(--yellow); background: #f2ead9; font-size: 13px; }
.table-scroll { overflow-x: auto; margin: 28px 0; }
.guide-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
.guide-table caption { text-align: left; color: var(--muted); padding-bottom: 12px; }
.guide-table th, .guide-table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.guide-table thead { background: #f2ead9; }
.guide-table tbody th { font-weight: 500; }
.painting-table { min-width: 570px; }
.painting-table img { display: block; width: 64px; height: 52px; object-fit: contain; image-rendering: pixelated; }
.item-figure { margin: 24px 0; padding: 24px; background: #f2ead9; text-align: center; }
.item-figure img { max-width: 100%; height: auto; image-rendering: pixelated; }
.item-figure figcaption { margin-top: 12px; color: var(--muted); font-size: 12px; }
.quest-detail { margin: 20px 0; padding: 16px 20px; border: 1px solid var(--line); }
.quest-detail summary { cursor: pointer; color: var(--brown); }
.quest-detail p { margin: 12px 0 0; }
.guide-flow, .walkthrough { padding-left: 26px; }
.guide-flow li { padding-left: 7px; margin: 16px 0; }
.guide-flow li::marker, .walkthrough li::marker { color: #926119; font-weight: 800; }
.walkthrough > li { padding: 0 0 24px 10px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.walkthrough > li:last-child { margin-bottom: 0; }
.walkthrough h3 { margin-bottom: 8px; }
.walkthrough .step-condition { display: inline-block; margin: 0 0 8px; color: #77501b; font-size: 12px; }
.skeleton { margin-top: 22px; display: grid; gap: 10px; }
.skeleton span { height: 7px; background: #eee9df; border-radius: 3px; width: 92%; }
.skeleton span:last-child { width: 62%; }
.section-next { display: flex; justify-content: flex-end; margin-top: 30px; }
.section-next a { min-width: 200px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; font-size: 13px; }
.section-next a:hover { border-color: #b79a68; background: #f2ead9; }
.section-next small { display: block; color: var(--muted); font-size: 10px; }
.page-footer { display: flex; justify-content: space-between; gap: 12px; padding: 24px 0 0; margin-top: 48px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; letter-spacing: .05em; }
@media (min-width: 1500px) { main { padding-top: 68px; } }
@media (max-width: 1000px) { .sidebar { width: 240px; padding: 28px 20px; } .page { margin-left: 240px; } main { padding: 36px 32px 24px; } .topbar { padding: 18px 32px; } }
@media (max-width: 700px) {
  html.enhanced:has(.toc.is-open), html.enhanced:has(.toc.is-open) body { overflow: hidden; }
  .sidebar { position: relative; width: 100%; padding: 12px 22px; }
  .brand { padding: 0; width: 172px; }
  .brand img { width: 100%; }
  .enhanced .sidebar { position: fixed; inset: 0 0 auto; z-index: 4; height: 82px; overflow: visible; }
  .enhanced .toc { position: fixed; inset: 82px 0 0; margin: 0; padding: 24px 22px 25vh; padding-bottom: 25dvh; background: #221100; overflow-y: auto; overscroll-behavior: contain; }
  main, .guide-section { scroll-margin-top: 98px; }
  .enhanced .menu-toggle { display: block; position: absolute; top: 22px; right: 22px; padding: 6px 13px; border: 1px solid #796344; border-radius: 4px; background: transparent; color: #f6eddb; font-size: 12px; }
  .toc { margin-top: 24px; }
  .enhanced .toc:not(.is-open) { display: none; }
  .sidebar-footer { display: none; }
  .page { margin-left: 0; }
  .enhanced .page { padding-top: 82px; }
  .topbar { padding: 12px 22px; font-size: 10px; }
  main { padding: 30px 22px 22px; }
  h1 { font-size: 26px; }
  .intro { font-size: 12px; }
  .notice { gap: 10px; padding: 12px; font-size: 11px; }
  .section-heading h2 { font-size: 22px; }
  .placeholder { padding: 22px 20px; }
  .page-footer { margin-top: 36px; flex-wrap: wrap; }
}
@media print {
  .sidebar, .topbar, .skip-link, .section-next { display: none; }
  .page, .enhanced .page { margin: 0; padding-top: 0; }
  main { max-width: none; padding: 0; }
  .guide-section[hidden] { display: block !important; }
  .enhanced .guide-section { margin-top: 32px; }
  .placeholder { break-inside: avoid; }
}

.language-switch { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.language-switch [aria-current] { color: var(--brown); font-weight: 800; }