/* 基本の色・骨組みはsmuto/ui-by原本を使用。図鑑固有の図と配置のみ追加する。 */
:root {
  --diagram-bg: #eee6d2; --diagram-ink: #374952; --diagram-guide: #94751b;
  --diagram-guide-halo: #fff9e8; --diagram-shadow: #cfc5af; --diagram-glass: #cccbbb;
  --diagram-coffee: #6a432b; --diagram-straw: #547c8b; --diagram-ice: #be965f;
  --diagram-plate: #fbf7eb; --diagram-pudding: #c79a55; --diagram-cream: #fffdf5;
  --diagram-stem: #7a8965; --diagram-petal: #d7b16a; --diagram-core: #796544;
  --diagram-sky: #dbe3df; --diagram-hill: #9ba99c; --diagram-ground: #c2c6ae;
  --diagram-skin: #ccac87; --diagram-person: #526e77; --diagram-wall: #b2ada0;
  --diagram-table: #e9dfc9; --diagram-water: #b4caca; --diagram-sun: #dcb96f;
  --diagram-building: #bdb8a5; --diagram-window: #667f83; --diagram-cone: #b86f50;
  --diagram-cone-shadow: #b9b7a9; --diagram-road: #e3d8bd; --diagram-frame: #6e6558;
  --diagram-reflection: #9cafad; --catalog-label: color-mix(in srgb, var(--gold-line) 85%, var(--ink));
}
/* 図の地は明暗テーマとも明るいので、図中の青は暗くして線のコントラストを確保する。 */
:root[data-theme="dark"] { --diagram-guide: #276b87; --diagram-guide-halo: #263f4b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --diagram-guide: #276b87; --diagram-guide-halo: #263f4b; } }
[hidden] { display: none; }
.brand { display: flex; align-items: center; gap: 20px; }
.brand__icon { width: 44px; height: 44px; stroke: var(--gold); stroke-width: 1.5; fill: none; }
.site-header__title { letter-spacing: .08em; }
.site-header__eyebrow { letter-spacing: .1em; }
.project-mark { font-size: 14px; color: var(--sub); }
.site-header__right { gap: 20px; }
.site-main { min-width: 0; }
.nav-panel__title,.nav-panel__item--active { color: var(--catalog-label); }
.intro { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 32px; padding: 40px 0px 32px 0px; border-bottom: 1px solid var(--hairline-strong); }
.intro__eyebrow { font-size: 14px; font-family: var(--mono); letter-spacing: .08em; color: var(--catalog-label); margin: 0px 0px 20px 0px; }
.intro h1,.doc-head h1 { font-size: 32px; line-height: 1.5; font-weight: 800; letter-spacing: .04em; margin: 0px 0px 20px 0px; }
.intro__description { font-size: 16px; line-height: 1.9; color: var(--sub); }
.intro__meta { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px; color: var(--sub); padding: 24px 0px 0px 0px; }
.intro__example { min-width: 0; }
.intro__example .diagram { max-height: 276px; border-radius: 4px; }
.intro__caption { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; padding: 12px 0px 0px 0px; }
.intro__caption .text-link { font-size: 14px; min-height: 36px; }
.sidebar-note { padding: 40px 12px 0px 12px; }
.sidebar-note__eyebrow { font-size: 14px; font-family: var(--mono); letter-spacing: .08em; color: var(--catalog-label); }
.sidebar-note>p:not(.sidebar-note__eyebrow) { font-size: 20px; line-height: 1.8; font-weight: 800; margin: 16px 0px 20px 0px; }
.sidebar-note>span { font-size: 14px; line-height: 1.9; color: var(--sub); }
.catalog-tools { padding: 24px 0px 20px 0px; }
.catalog-tools__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.catalog-tabs { display: flex; gap: 24px; flex-wrap: wrap; }
.catalog-tabs__item { position: relative; height: 44px; padding: 0px 0px 0px 0px; color: var(--sub); font-size: 16px; background: transparent; border-bottom: 1px solid var(--hairline); }
.catalog-tabs__item span { font-size: 14px; font-family: var(--mono); margin: 0px 0px 0px 4px; }
.catalog-tabs__item::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 1px; background: var(--select-ink); transition: width var(--underline) ease; }
.catalog-tabs__item--active { color: var(--catalog-label); }
.catalog-tabs__item--active::after { width: 100%; }
.catalog-search { display: flex; align-items: center; flex: 0 1 300px; gap: 12px; border-bottom: 1px solid var(--hairline-strong); height: 44px; }
.catalog-search svg { width: 20px; height: 20px; fill: none; stroke: var(--sub); stroke-width: 1.5; flex: 0 0 auto; }
.catalog-search input { width: 100%; min-width: 0; height: 44px; border: 0; background: transparent; font-size: 16px; color: var(--ink); padding: 0px 0px 0px 0px; }
.catalog-tools__bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 20px 0px 0px 0px; font-size: 14px; color: var(--sub); }
.legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; }
.legend__guide { color: var(--catalog-label); }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,264px),1fr)); gap: 28px 24px; }
.guide-card { min-width: 0; border-bottom: 1px solid var(--hairline-strong); padding: 0px 0px 20px 0px; }
.guide-card__visual { display: block; width: 100%; overflow: hidden; padding: 0px 0px 0px 0px; border: 1px solid var(--hairline); border-radius: 4px; background: transparent; transition: border-color var(--color) ease; }
.guide-card__meta { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--sub); padding: 16px 0px 8px 0px; }
.guide-card__number { font-family: var(--mono); color: var(--catalog-label); }
.guide-card h2 { font-size: 20px; font-weight: 800; line-height: 1.4; margin: 0px 0px 8px 0px; }
.guide-card__description { font-size: 14px; line-height: 1.8; color: var(--sub); margin: 0px 0px 8px 0px; }
.guide-card__link { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 40px; font-size: 14px; color: var(--catalog-label); background: transparent; text-align: left; }
.guide-card__link::after { content: ''; position: absolute; width: 0; height: 1px; bottom: 0; left: 0; background: currentColor; transition: width var(--underline) ease; }
.catalog-end { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 0px 16px 0px; text-align: center; font-size: 14px; color: var(--sub); }
.catalog-end button { min-height: 44px; font-size: 14px; }
.empty-state { padding: 64px 0px 64px 0px; gap: 20px; }
.empty-state h2 { font-size: 24px; }
.empty-state p { font-size: 16px; }
/* ガイドと被写体は色だけでなく、破線と塗りでも識別する。 */
.diagram { display: block; width: 100%; height: auto; }
.diagram__base { fill: var(--diagram-bg); }
.diagram__scene { stroke: var(--diagram-ink); stroke-width: 1; fill: none; }
.diagram__guide { stroke: var(--diagram-guide); stroke-width: 2; stroke-dasharray: 7 5; fill: none; paint-order: stroke; }
.diagram__guide text { stroke: none; fill: var(--diagram-guide); }
.diagram__label { font-size: 14px; font-family: sans-serif; fill: var(--diagram-ink); stroke: none; }
.diagram__shadow { fill: var(--diagram-shadow); stroke: none; }
.diagram__glass { fill: var(--diagram-glass); }
.diagram__coffee { fill: var(--diagram-coffee); stroke: none; }
.diagram__rim { stroke: var(--diagram-ink); fill: none; }
.diagram__straw { stroke: var(--diagram-straw); stroke-width: 5; }
.diagram__ice { fill: var(--diagram-ice); opacity: .8; stroke: none; }
.diagram__plate { fill: var(--diagram-plate); stroke: none; }
.diagram__pudding { fill: var(--diagram-pudding); stroke: none; }
.diagram__cream { fill: var(--diagram-cream); stroke: none; }
.diagram__stem { stroke: var(--diagram-stem); stroke-width: 3; fill: var(--diagram-stem); }
.diagram__petal { fill: var(--diagram-petal); stroke: var(--diagram-core); }
.diagram__flower-core { fill: var(--diagram-core); stroke: none; }
.diagram__sky { fill: var(--diagram-sky); stroke: none; }
.diagram__hill { fill: var(--diagram-hill); stroke: none; }
.diagram__ground { fill: var(--diagram-ground); stroke: none; }
.diagram__skin { fill: var(--diagram-skin); stroke: none; }
.diagram__person { fill: var(--diagram-person); stroke: var(--diagram-person); stroke-width: 7; }
.diagram__camera { fill: var(--diagram-plate); stroke: var(--diagram-ink); stroke-width: 2; }
.diagram__camera circle { fill: var(--diagram-straw); }
.diagram__object { fill: var(--diagram-building); }
.diagram__wall { fill: var(--diagram-wall); stroke: none; }
.diagram__table { fill: var(--diagram-table); stroke: none; }
.diagram__water { fill: var(--diagram-water); stroke: none; }
.diagram__sun { fill: var(--diagram-sun); stroke: none; }
.diagram__building { fill: var(--diagram-building); }
.diagram__window { fill: var(--diagram-window); stroke: none; }
.diagram__cone { fill: var(--diagram-cone); stroke: none; }
.diagram__cone-shadow { fill: var(--diagram-cone-shadow); stroke: none; }
.diagram__road { fill: none; stroke: var(--diagram-road); stroke-width: 27; }
.diagram__road-fill { fill: var(--diagram-road); stroke: none; }
.diagram__frame { fill: none; stroke: var(--diagram-frame); stroke-width: 17; }
.diagram__blur { filter: blur(6px); }
.diagram__hill-reflection { fill: var(--diagram-reflection); stroke: none; }
.doc-head { padding: 40px 0px 32px 0px; border-bottom: 1px solid var(--hairline-strong); }
.doc-head p { color: var(--sub); margin: 0px 0px 16px 0px; }
.doc-section { padding: 32px 0px 32px 0px; border-bottom: 1px solid var(--hairline-strong); scroll-margin: 24px; }
.doc-section h2 { font-size: 24px; line-height: 1.4; margin: 0px 0px 24px 0px; }
.doc-section p { color: var(--sub); font-size: 16px; line-height: 1.9; margin: 0px 0px 16px 0px; }
.journey { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 24px; padding: 16px 0px 0px 0px; }
.journey span,.layer-diagram span { color: var(--catalog-label); font-size: 14px; font-family: var(--mono); }
.journey h3,.scope-list h3 { font-size: 20px; line-height: 1.5; margin: 12px 0px 8px 0px; }
.scope-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; }
.feature-example { margin: 16px 0px 20px 0px; }
.feature-example img { display: block; width: 100%; height: auto; border-radius: 4px; }
.feature-example figcaption { font-size: 14px; line-height: 1.8; color: var(--sub); padding: 12px 0px 0px 0px; }
.doc-section .doc-note { font-size: 14px; line-height: 1.9; color: var(--sub); }
.layer-diagram { display: grid; gap: 12px; padding: 0px 0px 24px 0px; }
.layer-diagram>div { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 16px 16px 16px 16px; border: 1px solid var(--hairline-strong); border-radius: 4px; }
.layer-diagram p { font-size: 14px; margin: 0px 0px 0px 0px; }
.doc-list { padding: 0px 0px 0px 24px; color: var(--sub); font-size: 16px; line-height: 1.9; }
.doc-list li { padding: 0px 0px 12px 0px; }
.side-panel__body h2 { font-size: 24px; line-height: 1.5; margin: 0px 0px 24px 0px; }
.side-panel__body p { margin: 0px 0px 16px 0px; font-size: 16px; line-height: 1.9; }
/* 全32種を同じ大きな図で比較するため、詳細だけは標準の340pxパネルより広い器とする。 */
.guide-detail { position: fixed; inset: 32px; z-index: 100; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--hairline-strong); border-radius: 4px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(16px); transition: opacity var(--color) ease, transform var(--slide) var(--slide-ease), visibility var(--slide); }
.guide-detail[data-open="1"] { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.guide-detail__head,.guide-detail__foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px 12px 24px; font-size: 14px; color: var(--sub); }
.guide-detail__head { border-bottom: 1px solid var(--hairline-strong); }
.guide-detail__foot { border-top: 1px solid var(--hairline-strong); }
.guide-detail__foot>div { display: flex; gap: 8px; }
.guide-detail__body { overflow-y: auto; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); align-items: start; gap: 40px; padding: 32px 32px 32px 32px; min-height: 0; }
.guide-detail__visual { min-width: 0; }
.guide-detail__visual-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 14px; padding: 0px 0px 12px 0px; color: var(--sub); }
.guide-detail__visual .diagram { border-radius: 4px; }
.preview-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 20px 0px 16px 0px; }
.preview-controls__opacity { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; font-size: 14px; }
.preview-controls__opacity input { width: 100%; height: 36px; accent-color: var(--catalog-label); }
.guide-detail__hint { font-size: 14px; color: var(--sub); line-height: 1.9; }
.guide-detail__copy h2 { font-size: 28px; line-height: 1.4; margin: 0px 0px 16px 0px; }
.guide-detail__copy .intro__eyebrow { margin: 0px 0px 12px 0px; }
.guide-detail__summary { font-size: 16px; color: var(--sub); margin: 0px 0px 24px 0px; }
.detail-definition { display: grid; gap: 8px; }
.detail-definition dt { font-size: 14px; color: var(--catalog-label); font-weight: 800; }
.detail-definition dd { font-size: 16px; line-height: 1.9; padding: 0px 0px 16px 0px; margin: 0px 0px 0px 0px; overflow-wrap: anywhere; }
@media (hover: hover) { .catalog-tabs__item:hover::after,.guide-card__link:hover::after { width: 100%; } .guide-card__visual:hover { border-color: var(--catalog-label); } }
@media (min-width: 900px) { .guide-detail__visual { position: sticky; top: 0; } }
@media (max-width: 899px) {
  .site-header { display: none; }
  .sp-header { justify-content: space-between; }
  .sp-header__title { font-size: 20px; letter-spacing: .04em; }
  .site-main { padding: 0px 20px 32px 20px; }
  /* 節へ移動したとき、56pxの固定ヘッダーで見出しが隠れないようにする。 */
  .doc-section { scroll-margin: 72px; }
  .guide-detail { inset: 12px 12px calc(12px + env(safe-area-inset-bottom)) 12px; }
  .guide-detail__body { grid-template-columns: minmax(0,1fr); gap: 24px; padding: 20px 20px 20px 20px; }
  .guide-detail__head,.guide-detail__foot { padding: 8px 16px 8px 16px; }
  .close-btn { width: 44px; height: 44px; }
  /* 4 の倍数の例外：44pxの当たりに16pxの線を中央配置するため(44−16)/2=14。 */
  .close-btn::before,.close-btn::after { left: 14px; }
  .btn,.text-link,.guide-card__link { min-height: 44px; }
  .catalog-tabs__item:hover::after { width: 0; }
  .catalog-tabs__item--active:hover::after { width: 100%; }
}
@media (max-width: 768px) {
  .intro { grid-template-columns: minmax(0,1fr); gap: 24px; padding: 28px 0px 24px 0px; }
  .intro h1,.doc-head h1 { font-size: 28px; }
  .intro__eyebrow { letter-spacing: .02em; }
  .intro__example .diagram { max-height: 264px; }
  .intro__meta { gap: 16px; padding: 16px 0px 0px 0px; }
  .catalog-tools__top { gap: 16px; }
  .catalog-tabs { gap: 16px; width: 100%; justify-content: space-between; }
  .catalog-tabs__item { font-size: 14px; }
  .catalog-tabs__item span { margin: 0px 0px 0px 0px; }
  .catalog-search { flex-basis: 100%; }
  .guide-grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .scope-list { grid-template-columns: minmax(0,1fr); }
  .legend { gap: 8px; }
  .doc-head { padding: 28px 0px 24px 0px; }
  .doc-section h2 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .guide-detail,.catalog-tabs__item::after,.guide-card__link::after { transition: none; } }
@media (forced-colors: active) { .catalog-tabs__item--active { border-bottom-color: Highlight; } .diagram__guide { stroke: Highlight; } .diagram__scene { stroke: CanvasText; } }
@media print {
  html,body,.app { height: auto; overflow: visible; }
  .intro,.guide-card,.doc-section { break-inside: avoid; }
  .catalog-tools,.guide-detail,.catalog-end button,.sidebar-note { display: none; }
  .guide-grid { grid-template-columns: 1fr 1fr; }
  .guide-card__link { display: none; }
  .diagram { max-height: 220px; }
}