/* base.css — products/web の共通の形と 図鑑の本の見た目 A（古い紙の本 — DEC-WEB-001 v0 W-1）。試作 work/review/website/proto/site.css から移植（2026-10-17） */

/* ---------- めくり（pageflip.js） ---------- */
.pf-book { position: relative; width: 100%; aspect-ratio: 1000 / 680; touch-action: pan-y; user-select: none; -webkit-user-select: none; font-size: calc(var(--pf-W, 500px) / 33); outline: none; }
.pf-book:focus-visible { box-shadow: 0 0 0 4px var(--focus); border-radius: 6px; }
.pf-book.pf-single { aspect-ratio: 500 / 830; overflow: hidden; font-size: calc(var(--pf-W, 360px) / 24); }
.pf-stage { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; }
.pf-single .pf-stage { left: -100%; width: 200%; }
.pf-page { position: absolute; top: 0; bottom: 0; width: 50%; box-sizing: border-box; overflow: hidden; }
.pf-at-L { left: 0; } .pf-at-R { left: 50%; }
.pf-turn { position: absolute; inset: 0; pointer-events: none; }
.pf-clip { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.pf-flapwrap { position: absolute; inset: 0; filter: drop-shadow(0 6px 14px rgba(40, 25, 5, .45)); }
.pf-flap { transform-origin: 0 0; }
.pf-band { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.pf-dog { position: absolute; right: 0; bottom: 0; width: 2.3em; height: 2.3em; pointer-events: none; background: linear-gradient(135deg, transparent 50%, var(--dog1) 50%, var(--dog2) 100%); box-shadow: -2px -2px 6px rgba(60, 40, 10, .25); }
.pf-blank { position: absolute; inset: 0; }

/* ---------- サイトの骨組み ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); line-height: 1.7; font-size: 17px; }
a { color: var(--link); }
img { max-width: 100%; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.site-head { position: sticky; top: 0; z-index: 20; background: var(--head-bg); border-bottom: var(--head-line); }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 8px; padding-bottom: 8px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--head-ink); font-family: var(--f-display); font-size: 20px; }
.logo img { height: 40px; width: auto; }
.nav { display: flex; flex-wrap: wrap; gap: 4px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--pill); text-decoration: none; font-weight: 700; color: var(--nav-ink); }
.nav a[aria-current] { background: var(--nav-on-bg); color: var(--nav-on-ink); }
.site-foot { margin-top: 64px; border-top: var(--head-line); color: var(--sub); font-size: 15px; }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 20px; padding-bottom: 28px; }
h1, h2, h3 { line-height: 1.3; }
.sub { color: var(--sub); }


/* ---------- 図鑑の画面 ---------- */
.zk-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin: 32px 0 16px; }
.zk-title h1 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(30px, 5vw, 44px); }
.zk-tools { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; padding: 16px; border-radius: var(--r); background: var(--panel); border: var(--panel-line); }
.zk-tools label { display: block; font-size: 15px; font-weight: 700; color: var(--sub); margin-bottom: 4px; }
.zk-tools input[type=search] { min-height: 48px; width: min(280px, 100%); padding: 0 14px; border-radius: 10px; border: var(--input-line); background: var(--input-bg); color: var(--ink); font: inherit; }
.zk-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 420px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: var(--pill); border: var(--chip-line); background: var(--chip-bg); color: var(--ink); font: 700 15px/1 var(--f-body); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--chip-on-bg); color: var(--chip-on-ink); border-color: var(--chip-on-bg); }
.chip .dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(0, 0, 0, .45); }
.chip .n { font-weight: 500; opacity: .8; }

.zk-bookarea { position: relative; margin: 28px auto 0; max-width: 1040px; }
.zk-frame { position: relative; padding: var(--frame-pad); border-radius: var(--frame-r); background: var(--frame-bg); box-shadow: var(--frame-shadow); }
.zk-tabs { position: absolute; top: 28px; right: -46px; display: flex; flex-direction: column; gap: 4px; z-index: 3; }
.zk-tab { width: 46px; min-height: 46px; padding: 6px 0 6px 8px; border: none; border-radius: 0 10px 10px 0; background: var(--tc, #888); color: #111; font: 700 13px/1.1 var(--f-body); writing-mode: vertical-rl; text-orientation: upright; letter-spacing: -.05em; cursor: pointer; box-shadow: 2px 2px 0 rgba(0, 0, 0, .25); transform: translateX(-10px); transition: transform .15s; max-height: 92px; overflow: hidden; }
.zk-tab:hover, .zk-tab[aria-current="true"] { transform: translateX(0); }
.zk-tab[aria-current="true"] { outline: 3px solid var(--ink); outline-offset: -3px; }
.zk-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; }
.zk-nav button { min-height: 48px; padding: 0 18px; border-radius: 12px; border: var(--btn2-line); background: var(--btn2-bg); color: var(--ink); font: 700 16px/1 var(--f-body); cursor: pointer; }
.zk-nav button.primary { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); }
.zk-nav button:disabled { opacity: .4; cursor: default; }
.zk-pos { min-width: 92px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.zk-howto { text-align: center; color: var(--sub); font-size: 15px; margin: 8px 0 0; }
.zk-index { margin-top: 48px; }
#index { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 8px 28px; }
.zk-index h2 { font-family: var(--f-display); font-weight: 400; font-size: 28px; margin: 0 0 14px; }
.zk-line { margin-bottom: 18px; }
.zk-line h3 { margin: 0 0 8px; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.zk-line h3::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--tc); border: 1.5px solid rgba(0, 0, 0, .4); }
.zk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.zk-card { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 12px; background: var(--card-bg); border: var(--card-line); color: var(--ink); font: 15px/1.35 var(--f-body); text-align: left; cursor: pointer; }
.zk-card[aria-current="true"] { outline: 3px solid var(--accent); }
.zk-card .ph { aspect-ratio: 1; border-radius: 8px; background: var(--card-ph); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.zk-card .ph img { width: 88%; height: 88%; object-fit: contain; }
.zk-card .no { font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; }
.zk-card b { font-size: 16px; }
@media (max-width: 1180px) { .zk-tabs { display: none; } }

/* ---------- 図鑑のページの中（em は本の大きさに合わせて伸び縮み） ---------- */
.pg { position: absolute; inset: 0; padding: 1.5em 1.7em 1.9em; display: flex; flex-direction: column; gap: .42em; background: var(--paper); color: var(--p-ink); font-family: var(--f-page); }
.pf-at-L .pg { box-shadow: var(--spine-L); }
.pf-at-R .pg { box-shadow: var(--spine-R); }
.pf-back { background: var(--paper); }
.pg-run { display: flex; justify-content: space-between; align-items: center; font-size: .78em; letter-spacing: .08em; color: var(--p-sub); border-bottom: var(--p-rule); padding-bottom: .25em; }
.pg-folio { position: absolute; bottom: .45em; font-size: .82em; color: var(--p-ink); font-variant-numeric: tabular-nums; }
.pf-at-L .pg-folio, .pg.L .pg-folio { left: 1.7em; } .pg.R .pg-folio { right: 2.6em; }
.pg-head { display: flex; align-items: flex-end; gap: .7em; }
.pg-no { font-family: var(--f-num); font-size: 3.1em; line-height: .9; color: var(--no-fill); -webkit-text-stroke: var(--no-stroke); letter-spacing: .02em; }
.pg-name { display: flex; flex-direction: column; }
.pg-name b { font-size: 1.9em; line-height: 1.15; font-family: var(--f-name); font-weight: var(--name-w); }
.pg-name span { font-size: .85em; color: var(--p-sub); }
.pg-art { position: relative; flex: 1; min-height: 0; border-radius: var(--art-r); background: var(--art-bg); border: var(--art-line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pg-art::before { content: ""; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: var(--burst); opacity: var(--burst-o); }
.pg-art img { position: relative; max-width: 86%; max-height: 88%; object-fit: contain; filter: var(--art-filter); }
.pg-art .none { position: relative; color: var(--p-sub); font-size: .95em; }
.pg-art .tape { position: absolute; width: 5.5em; height: 1.5em; background: rgba(230, 210, 140, .75); top: -.3em; transform: rotate(-6deg); left: 1em; display: var(--tape); }
.pg-art .tape.r { left: auto; right: 1em; transform: rotate(5deg); }
.pg-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.box { border: var(--box-line); border-radius: var(--box-r); padding: .45em .6em .5em; background: var(--box-bg); min-width: 0; }
.box h4 { margin: 0 0 .25em; font-size: .78em; font-weight: 700; letter-spacing: .06em; color: var(--h4-ink); background: var(--h4-bg); display: inline-block; padding: var(--h4-pad); border-radius: .3em; font-family: var(--f-h4); }
.size { display: flex; align-items: flex-end; gap: .5em; height: 5.4em; }
.size .fig { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; font-size: .8em; color: var(--p-sub); }
.size .fig svg, .size .fig img { display: block; }
.size .fig img { filter: brightness(0) var(--sil-filter); opacity: .78; width: auto; max-width: 6em; object-fit: contain; }
.size .facts { font-size: .82em; line-height: 1.45; margin-left: auto; text-align: right; }
.evo { display: flex; align-items: center; gap: .2em; }
.evo button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .1em; padding: .2em; border-radius: .5em; border: 2px solid transparent; background: none; color: inherit; font: inherit; font-size: .8em; line-height: 1.2; cursor: pointer; pointer-events: auto; }
.evo button[aria-current="true"] { border-color: var(--accent2); background: var(--evo-on); }
.evo img { width: 3.6em; height: 3.2em; object-fit: contain; }
.evo .ar { font-size: .9em; color: var(--p-sub); }
.types { display: flex; gap: .35em; flex-wrap: wrap; align-items: center; }
.type { display: inline-flex; align-items: center; gap: .3em; padding: .12em .65em; border-radius: var(--type-r); background: var(--tcol); color: #111; font: 700 .82em/1.3 var(--f-body); border: var(--type-line); }
.stagechip { font-size: .78em; color: var(--p-sub); margin-left: auto; }
.desc { font-size: .88em; line-height: 1.5; }
.desc .todo { color: var(--p-sub); }
.desc .kari { font-size: .75em; color: var(--accent2); font-weight: 700; margin-left: .3em; }
.stats { display: grid; grid-template-columns: auto 2.2em 1fr; gap: 0 .45em; line-height: 1.38; align-items: center; font-size: .84em; }
.stats .v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.stats .bar { height: .62em; border-radius: var(--bar-r); background: var(--bar-bg); overflow: hidden; border: var(--bar-line); }
.stats .bar i { display: block; height: 100%; background: var(--bar); border-radius: inherit; }
.stats .bar i.hi { background: var(--bar-hi); }
.stats .tot { grid-column: 1 / -1; text-align: right; font-size: .9em; color: var(--p-sub); }
.abil b { display: block; font-size: .9em; }
.abil p, .eff p { margin: 0; font-size: .74em; line-height: 1.4; }
.eff .row { display: flex; flex-wrap: wrap; gap: .15em; align-items: center; margin-bottom: .12em; font-size: .72em; line-height: 1.35; }
.eff .row > span:first-child { min-width: 4.4em; font-weight: 700; }
.eff .mini { display: inline-block; padding: 0 .4em; border-radius: .3em; background: var(--tcol); color: #111; font-weight: 700; font-size: .92em; }
.skills { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8em; font-size: .78em; }
.skills .sk { display: grid; grid-template-columns: 2.2em 1fr auto; gap: .3em; align-items: center; padding: .14em 0; border-bottom: var(--sk-line); }
.skills .lv { color: var(--p-sub); font-variant-numeric: tabular-nums; }
.skills .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skills .nm i { display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--tcol); border: 1px solid rgba(0, 0, 0, .4); margin-right: .3em; }
.skills .pw { font-variant-numeric: tabular-nums; color: var(--p-sub); font-size: .92em; }
.point { position: relative; padding: .45em .7em .45em 3.6em; border-radius: var(--box-r); background: var(--point-bg); border: var(--point-line); font-size: .78em; line-height: 1.45; }
.point::before { content: var(--point-label); position: absolute; left: .45em; top: 50%; transform: translateY(-50%) rotate(-8deg); font: 700 .85em/1 var(--f-num); color: var(--point-ink); background: var(--point-tag); padding: .45em .35em; border-radius: var(--point-tag-r); }
.note-hand { font-family: var(--f-hand); color: var(--hand-ink); display: var(--hand-show); position: absolute; font-size: .9em; transform: rotate(-4deg); }

/* ================= 見た目 A 夜の書斎（Claude Design の案のまま） ================= */
body[data-skin="a"] {
  --bg: #12141C; --ink: #EEF0F5; --sub: #C2C7D4; --link: #F2B544; --accent: #F2B544; --focus: #F2B544;
  --f-body: 'Zen Kaku Gothic New', system-ui, sans-serif; --f-display: 'Dela Gothic One', sans-serif; --f-page: 'Shippori Mincho', serif;
  --f-num: 'Shippori Mincho', serif; --f-name: 'Shippori Mincho', serif; --name-w: 700; --f-h4: 'Zen Kaku Gothic New', sans-serif; --f-hand: 'Klee One', cursive;
  --head-bg: #12141C; --head-line: 1px solid #2A2F42; --head-ink: #EEF0F5; --nav-ink: #C9CEDB; --nav-on-bg: #F2B544; --nav-on-ink: #12141C; --pill: 999px;
  --panel: #1C2030; --panel-line: 1px solid #2A2F42; --r: 16px; --input-line: 1px solid #3A4058; --input-bg: #12141C;
  --chip-line: 2px solid #3A4058; --chip-bg: transparent; --chip-on-bg: #4FC3B0; --chip-on-ink: #12141C;
  --frame-pad: 14px; --frame-r: 14px; --frame-bg: #4A3220; --frame-shadow: 0 24px 48px rgba(0, 0, 0, .45);
  --btn-bg: #F2B544; --btn-ink: #12141C; --btn2-bg: transparent; --btn2-line: 2px solid #4A5068;
  --card-bg: #1C2030; --card-line: 1px solid #2A2F42; --card-ph: #262B3D;
  --paper: radial-gradient(circle at 25% 20%, rgba(160, 115, 55, .14), transparent 45%), radial-gradient(circle at 70% 85%, rgba(150, 105, 45, .12), transparent 50%), #EADBBE;
  --p-ink: #3B2A1A; --p-sub: #563E24; --p-rule: 1px solid #B79E73; --accent2: #8A4B16;
  --spine-L: inset 0 0 60px rgba(110, 75, 30, .38), inset -28px 0 32px -16px rgba(90, 60, 20, .45);
  --spine-R: inset 0 0 60px rgba(110, 75, 30, .38), inset 28px 0 32px -16px rgba(90, 60, 20, .45);
  --dog1: #D6C29C; --dog2: #C9B285;
  --no-fill: #5A4128; --no-stroke: 0; --art-r: 6px; --art-bg: transparent; --art-line: 1px solid #B79E73; --burst: radial-gradient(circle, rgba(255, 245, 220, .9), transparent 70%); --burst-o: 1; --art-filter: sepia(.15);
  --tape: none; --box-line: 1px solid #B79E73; --box-r: 4px; --box-bg: transparent; --h4-ink: #563E24; --h4-bg: transparent; --h4-pad: 0;
  --sil-filter: sepia(1) saturate(.4); --evo-on: rgba(255, 255, 255, .35); --type-r: 999px; --type-line: 1px solid rgba(59, 42, 26, .35);
  --bar-bg: rgba(107, 82, 54, .18); --bar: #8A6A40; --bar-hi: #A0481C; --bar-r: 2px; --bar-line: 0; --sk-line: 1px dotted #B79E73;
  --point-bg: rgba(255, 250, 235, .5); --point-line: 1px dashed #B79E73; --point-label: "覚え書き"; --point-ink: #EADBBE; --point-tag: #6B5236; --point-tag-r: 3px; --hand-show: none; --hand-ink: #2B4C7E;
}
body[data-skin="a"] .type { background: color-mix(in srgb, var(--tcol) 55%, #EADBBE); }


/* スマホ: 上のメニューは 1 行で横にすべらせる・固定しない。1 ページ表示は縦長に */
@media (max-width: 760px) {
  .site-head { position: static; }
  .site-head .wrap { flex-wrap: nowrap; }
  .logo img { height: 34px; }
  .nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nav a { padding: 0 12px; white-space: nowrap; }
  .zk-frame:has(.pf-single) { background: var(--frame-solid, #16161D); }
  .zk-nav { display: grid; grid-template-columns: 1fr 1fr; }
  .zk-pos { grid-column: 1 / -1; grid-row: 1; }
}
.pf-book.pf-single { aspect-ratio: 500 / 1080; font-size: calc(var(--pf-W, 360px) / 22); }   /* page_check PC-02: スマホでも 11px 以上 */
body[data-skin="a"] { --frame-solid: #4A3220; }
@media (max-width: 760px) {
  .zk-tools { padding: 12px; }
  .zk-tools > div:first-child, .zk-tools input[type=search] { width: 100%; }
  .zk-chips { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .chip { white-space: nowrap; }
}


/* ツメの名前を折り返さない（2026-10-30 系列名を正式な名前に — シャコチャンプは 7 文字） */
.zk-tab { white-space: nowrap; }