/* 画面の形。色は tokens.css の変数だけを使う。
   骨組みは保全基盤モックと同じ：左に白い帯（絞り込み）、上に白い横帯（検索と操作）、地の上にカードを並べる。
   Mac（1360px 以上）は「絞り込み・一覧・詳細」の3列。それより狭いと詳細は右から重ねて出し、
   992px 未満では左の帯も ☰ から出す。 */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 14px; line-height: 1.6;
  font-feature-settings: "palt" 1; -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.mut { color: var(--ink-3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- ボタン ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: var(--surface);
  border-radius: 4px; padding: 6px 12px; font-size: 13px; white-space: nowrap; line-height: 1.4; color: var(--ink); }
.btn:hover { background: var(--sunk); }
.btn-pri { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn-pri:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn-soft { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 600; }
.btn-soft:hover { background: var(--accent-soft); filter: brightness(.97); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-bad { color: var(--bad); }
.btn-sm { padding: 3px 9px; font-size: 12px; }
.btn-ic { padding: 6px 8px; }

/* ---------- 入る前の画面（つなぐ・読み込み中） ---------- */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.gate-in { width: min(460px, 100%); }
.gate-brand { text-align: center; margin-bottom: 18px; }
.gate-brand b { display: block; font-size: 22px; color: var(--accent); letter-spacing: .06em; }
.gate-brand span { font-size: 12px; color: var(--ink-3); }
.gate .card { padding: 26px 24px; }
.gate h2 { font-size: 17px; margin: 0 0 8px; }
.gate p { color: var(--ink-2); margin: 0 0 18px; font-size: 13.5px; }
.gate .btn { width: 100%; justify-content: center; padding: 10px; font-size: 14px; }
.gate-mark { width: 52px; height: 52px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; margin: 0 auto 14px; }
.gate-mark .ic { width: 26px; height: 26px; }
.spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--accent-soft); border-top-color: var(--accent);
  animation: spin .9s linear infinite; margin: 4px auto 14px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 3s; } }

/* ---------- 左の帯 ---------- */
.side { position: fixed; top: 0; bottom: 0; left: 0; width: 250px; background: var(--surface); border-right: 1px solid var(--line);
  z-index: 30; display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); }
.brand { padding: 15px 20px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 30px; height: 30px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; flex: none; }
.brand-mark .ic { width: 18px; height: 18px; }
.brand b { display: block; font-size: 15px; color: var(--accent); letter-spacing: .08em; line-height: 1.3; }
.brand small { display: block; font-size: 11px; color: var(--ink-3); }
.nav { overflow-y: auto; flex: 1; padding: 6px 0 24px; overscroll-behavior: contain; }
.menu-title { font-size: 11px; letter-spacing: .12em; color: var(--ink-3); font-weight: 700; padding: 16px 20px 6px; display: flex; align-items: center; }
.menu-title button { margin-left: auto; font-size: 11px; letter-spacing: 0; font-weight: 600; color: var(--accent); background: none; border: 0; padding: 0; }
.mi { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 20px; color: var(--ink-2); font-size: 13px;
  border: 0; border-left: 3px solid transparent; background: none; text-align: left; }
.mi:hover { color: var(--accent); background: var(--sunk); }
.mi[aria-pressed="true"] { color: var(--accent); background: var(--sunk); border-left-color: var(--accent); font-weight: 600; }
.mi .ic { width: 17px; height: 17px; }
.mi .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin: 0 4px; }
.cnt { margin-left: auto; font-size: 11px; background: var(--sunk); color: var(--ink-2); border-radius: 9px; padding: 0 7px; font-weight: 600; font-family: var(--f-num); }
.mi[aria-pressed="true"] .cnt { background: var(--accent); color: var(--accent-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 20px 4px; }
.chip { font-size: 12px; border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 3px 11px; white-space: nowrap; color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.chip .ic { width: 13px; height: 13px; }
.pp-find { margin: 2px 20px 6px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); border-radius: 4px; padding: 4px 8px; color: var(--ink-3); }
.pp-find input { border: 0; outline: 0; background: none; min-width: 0; flex: 1; font-size: 12.5px; color: var(--ink); }
.pp { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 20px 5px 23px; font-size: 12.5px; color: var(--ink-2); background: none; border: 0; text-align: left; }
.pp:hover { color: var(--accent); background: var(--sunk); }
.pp[aria-pressed="true"] { color: var(--accent); font-weight: 600; background: var(--sunk); }
.pp .ic { width: 14px; height: 14px; color: var(--ink-3); }
.pp .cnt { font-weight: 500; }
.pp-more { font-size: 12px; color: var(--accent); background: none; border: 0; padding: 4px 23px; }
.side-foot { border-top: 1px solid var(--line); padding: 10px 20px; font-size: 11.5px; color: var(--ink-3); display: flex; align-items: center; gap: 7px; }
.side-foot .ic { color: var(--ok); }
.side-scrim { display: none; }

/* ---------- 上の横帯 ---------- */
.main { margin-left: 250px; min-width: 0; }
.top { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top, 0px); padding-right: env(safe-area-inset-right, 0px); }
.top-in { display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 8px 20px 8px 16px; flex-wrap: wrap; }
.search { display: flex; align-items: center; gap: 8px; background: var(--sunk); border: 1px solid transparent; border-radius: 4px;
  padding: 0 10px; height: 38px; width: min(460px, 100%); color: var(--ink-3); }
.search:focus-within { border-color: var(--accent); background: var(--surface); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 13.5px; color: var(--ink); height: 100%; }
.search input::placeholder { color: var(--ink-3); }
.search kbd { font-family: var(--f-mono); font-size: 11px; border: 1px solid var(--line-2); border-radius: 3px; padding: 0 5px; color: var(--ink-3); background: var(--surface); }
.search .x { border: 0; background: none; color: var(--ink-3); padding: 2px; display: grid; }
.top-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
#sideBtn { display: none; }

/* 保存の知らせ。右上のここ1か所だけに出す（設計書の決まり）。 */
.save { font-size: 12px; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; }
.save::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.save[data-state="saving"]::before, .save[data-state="loading"]::before { background: var(--info); }
.save[data-state="dirty"] { color: var(--warn); border-color: var(--warn); }
.save[data-state="dirty"]::before { background: var(--warn); }
.save[data-state="saved"], .save[data-state="ready"] { color: var(--ok); border-color: var(--ok); }
.save[data-state="saved"]::before, .save[data-state="ready"]::before { background: var(--ok); }
.save[data-state="error"] { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }
.save[data-state="error"]::before { background: var(--bad); }

.menu { position: relative; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 6px; min-width: 250px; display: grid; z-index: 40; box-shadow: var(--shadow-lg); }
.menu-pop button { display: flex; align-items: center; gap: 10px; text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 4px; font-size: 13px; }
.menu-pop button:hover { background: var(--sunk); color: var(--accent); }
.menu-pop hr { border: 0; border-top: 1px solid var(--line); margin: 5px 0; }
.menu-pop .ic { color: var(--ink-3); }

/* ---------- 本体 ---------- */
.page { padding: 20px 20px 48px; padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.err { color: var(--bad); background: var(--bad-soft); border: 1px solid var(--bad); border-radius: var(--r); padding: 11px 14px; margin-bottom: 16px; font-size: 13px; }
.err b { display: block; }
.err small { display: block; color: var(--ink); word-break: break-all; margin-top: 4px; }

.pg { margin-bottom: 14px; }
.bc { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); margin-bottom: 6px; flex-wrap: wrap; }
.bc .kind { font-size: 11px; font-weight: 700; border-radius: 3px; padding: 1px 7px; letter-spacing: .08em; background: var(--info-soft); color: var(--info); }
.bc .kind.ok { background: var(--ok-soft); color: var(--ok); }
.bc b { color: var(--ink-2); font-weight: 600; }
.bc .ic { width: 12px; height: 12px; }
.pg-ttl { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pg-ttl h1 { margin: 0; font-size: 18px; font-weight: 700; }
.pg-ttl .n { font-size: 13px; color: var(--ink-3); }
.does { margin-top: 10px; display: flex; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 4px; padding: 9px 12px; font-size: 12.5px; line-height: 1.75; color: var(--ink-2); }
.does .ic { color: var(--accent); margin-top: 3px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.card-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.card-h h2, .card-h h3 { margin: 0; font-size: 14px; font-weight: 600; }
.card-b { padding: 16px; }

/* 集計バー */
.sumbar { display: flex; align-items: stretch; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  margin-bottom: 14px; overflow: hidden; box-shadow: var(--shadow); }
.sb-t { font-size: 11px; color: var(--ink-3); letter-spacing: .06em; padding: 12px 14px; background: var(--sunk); display: flex; align-items: center; border-right: 1px solid var(--line); white-space: nowrap; }
.sb-i { padding: 9px 16px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.sb-i:last-child { border-right: 0; }
.sb-i span { font-size: 11px; color: var(--ink-3); white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.sb-i b { font-size: 18px; font-weight: 700; font-family: var(--f-num); font-variant-numeric: tabular-nums; line-height: 1.3; }
.sb-i b small { font-size: 11px; font-weight: 500; color: var(--ink-3); margin-left: 2px; }
.sb-i .dot { width: 7px; height: 7px; border-radius: 50%; }
.sb-i.big b { font-size: 22px; }

/* 一覧と詳細の2列（左の帯を入れて3列） */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 490px; gap: 18px; align-items: start; }
.cols.no-det { grid-template-columns: minmax(0, 1fr); }

.tb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.tb select { font-size: 12.5px; border: 1px solid var(--line-2); border-radius: 4px; padding: 5px 8px; background: var(--surface); }
.tb .grow { flex: 1; }
.act { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; background: var(--accent-soft); color: var(--accent); border: 0; border-radius: 999px; padding: 3px 6px 3px 11px; font-weight: 600; }
.act .ic { width: 13px; height: 13px; }
.act:hover { filter: brightness(.96); }
.clear { font-size: 12px; color: var(--ink-3); background: none; border: 0; text-decoration: underline; padding: 2px 4px; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; background: var(--surface); }
.seg button { border: 0; background: none; padding: 5px 11px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); }
.seg button + button { border-left: 1px solid var(--line-2); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

/* 行の一覧（保全基盤の表の見た目） */
.grid-h, .rw { display: grid; grid-template-columns: 46px minmax(0, 1fr) 76px 76px 128px 92px; align-items: center; column-gap: 12px; }
.grid-h { background: var(--sunk); font-size: 11px; letter-spacing: .06em; color: var(--ink-3); font-weight: 700; padding: 8px 14px; border-bottom: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0; }
.grid-h .r, .rw .r { text-align: right; }
.rw { padding: 8px 14px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; cursor: pointer; position: relative; }
.rw:last-child { border-bottom: 0; }
.rw:hover { background: var(--hover); }
.rw[aria-current="true"] { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.rw .t { font-weight: 600; font-size: 13.5px; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw .s { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw .why { font-size: 11.5px; color: var(--accent); display: flex; align-items: center; gap: 4px; }
.rw .why .ic { width: 12px; height: 12px; }
.rw .d { font-size: 12px; color: var(--ink-2); text-align: right; }
.more { display: flex; justify-content: center; padding: 12px; border-top: 1px solid var(--line); }
.empty { text-align: center; color: var(--ink-3); font-size: 13px; padding: 40px 16px; }
.empty .ic { width: 34px; height: 34px; color: var(--line-2); display: block; margin: 0 auto 8px; }
.empty b { display: block; color: var(--ink-2); font-size: 14px; margin-bottom: 4px; }
.empty .btn { margin-top: 12px; }

/* 札（ジャンル・状態） */
.gb { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 11px; font-weight: 700; border-radius: 3px; padding: 2px 7px; white-space: nowrap; }
.gb .ic { width: 12px; height: 12px; }
.g-movie { --g: var(--g-movie); --gs: var(--g-movie-soft); }
.g-anime { --g: var(--g-anime); --gs: var(--g-anime-soft); }
.g-manga { --g: var(--g-manga); --gs: var(--g-manga-soft); }
.g-book { --g: var(--g-book); --gs: var(--g-book-soft); }
.g-music { --g: var(--g-music); --gs: var(--g-music-soft); }
.gb[class*="g-"] { background: var(--gs); color: var(--g); }
.dot.g { background: var(--g); }
.st { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; border-radius: 3px; padding: 2px 7px; white-space: nowrap; }
.st-want { background: var(--info-soft); color: var(--info); }
.st-doing { background: var(--warn-soft); color: var(--warn); }
.st-done { background: var(--ok-soft); color: var(--ok); }
.dot.st-want { background: var(--info); } .dot.st-doing { background: var(--warn); } .dot.st-done { background: var(--ok); }

/* ⭐ */
.stars { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.stars .bar { position: relative; display: inline-block; line-height: 0; }
.stars .bar .on { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--star); white-space: nowrap; }
.stars .bar .off { color: var(--star-off); white-space: nowrap; }
.stars .ic { width: 13px; height: 13px; margin-right: 1px; }
.stars b { font-family: var(--f-num); font-size: 13px; font-variant-numeric: tabular-nums; min-width: 24px; text-align: right; }
.stars .none { font-size: 12px; color: var(--ink-3); }
.stars.lg .ic { width: 22px; height: 22px; margin-right: 2px; }
.stars.lg b { font-size: 22px; }

/* 表紙（画像が入るまでは、ジャンルの色の札を表紙の代わりに出す） */
.cov { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden; background: var(--gs); color: var(--g);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04); }
.cov.sq { aspect-ratio: 1 / 1; }
.cov::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 9%; background: var(--g); opacity: .18; }
.cov::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 9px, var(--g) 9px 10px); opacity: .06; }
.cov .ci { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; }
.cov .ci .ic { width: 18px; height: 18px; opacity: .9; }
.cov .ct { position: absolute; left: 14%; right: 9%; top: 17%; z-index: 1; font-weight: 700; line-height: 1.35; font-size: 13px;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }
.cov .cw { position: absolute; left: 14%; right: 9%; bottom: 9%; z-index: 1; font-size: 10.5px; font-weight: 600; opacity: .9;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cov .cg { position: absolute; right: 7%; top: 5%; z-index: 1; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; opacity: .85; }
.rw .cov { width: 36px; }
.rw .cov::before { width: 16%; opacity: .35; }
.rw .cov .ct, .rw .cov .cw, .rw .cov .cg { display: none; }

/* 表紙の並び */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 18px 14px; padding: 16px; }
.tile { text-decoration: none; color: inherit; display: block; border-radius: 6px; min-width: 0; }
.tile .cov { transition: transform .15s, box-shadow .15s; }
.tile:hover .cov { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(26, 32, 44, .18); }
.tile[aria-current="true"] .cov { outline: 3px solid var(--accent); outline-offset: 2px; }
.cov-wrap { position: relative; display: block; }
.tile .st { position: absolute; z-index: 2; left: 6px; bottom: 6px; }
.tile .tt { font-size: 13px; font-weight: 600; margin-top: 7px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .ts { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .stars { justify-content: flex-start; margin-top: 2px; }
.tile .why { font-size: 11px; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 詳細 ---------- */
.detail { position: sticky; top: 80px; max-height: calc(100vh - 96px); overflow: auto; overscroll-behavior: contain; border-radius: var(--r); }
.det-scrim { display: none; }
.det { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.det-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 3; border-radius: var(--r) var(--r) 0 0; }
.det-top .bc { margin: 0; flex: 1; min-width: 0; }
.hero { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 16px; }
.hero .cov .ct { font-size: 11px; }
.hero h2 { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 700; word-break: break-word; }
.hero .kana { font-size: 11.5px; color: var(--ink-3); }
.hero .sub { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.hero .sub a { color: var(--accent); text-decoration: none; cursor: pointer; }
.hero .sub a:hover { text-decoration: underline; }
.hero .stars { justify-content: flex-start; margin-top: 8px; }
.stseg { display: inline-flex; margin-top: 10px; border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; }
.stseg button { border: 0; background: var(--surface); padding: 5px 11px; font-size: 12px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 5px; }
.stseg button + button { border-left: 1px solid var(--line-2); }
.stseg button .ic { width: 13px; height: 13px; }
.stseg button[aria-pressed="true"].want { background: var(--info-soft); color: var(--info); font-weight: 700; }
.stseg button[aria-pressed="true"].doing { background: var(--warn-soft); color: var(--warn); font-weight: 700; }
.stseg button[aria-pressed="true"].done { background: var(--ok-soft); color: var(--ok); font-weight: 700; }

.nextbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r); padding: 9px 12px; margin: 0 16px 14px; }
.nb-l { font-size: 12px; color: var(--accent); font-weight: 700; display: flex; align-items: center; gap: 5px; margin-right: 2px; }
.nextbar .btn { font-size: 12px; padding: 3px 9px; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0 16px 14px; }
.kpi { border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; min-width: 0; }
.kpi span { display: block; font-size: 10.5px; color: var(--ink-3); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi b { display: block; font-size: 14px; font-weight: 700; font-family: var(--f-num); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi b.dim { color: var(--ink-3); font-weight: 500; font-size: 13px; }
.kpi .pbar { height: 5px; background: var(--sunk); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.kpi .pbar div { height: 100%; background: var(--ok); }

.ltabs { display: flex; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.ltabs button { font-size: 13px; padding: 8px 13px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--ink-2); display: flex; align-items: center; gap: 6px; white-space: nowrap; margin-bottom: -1px; }
.ltabs button:hover { color: var(--accent); }
.ltabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.ltabs .n { font-size: 10.5px; background: var(--sunk); border-radius: 9px; padding: 0 6px; color: var(--ink-2); font-family: var(--f-num); }
.ltabs button[aria-selected="true"] .n { background: var(--accent); color: var(--accent-ink); }
.tabp { padding: 16px; }
.sec { margin-bottom: 20px; }
.sec:last-child { margin-bottom: 0; }
.sec-h { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.sec-h h3 { margin: 0; font-size: 12px; letter-spacing: .08em; color: var(--ink-3); font-weight: 700; }
.sec-h .btn { margin-left: auto; }
.kvs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.kv { min-width: 0; }
.kv span { display: block; font-size: 11px; color: var(--ink-3); margin-bottom: 1px; }
.kv > div { font-size: 13.5px; word-break: break-word; }
.kv .none { color: var(--ink-3); font-size: 12.5px; }
.plink { color: var(--accent); background: none; border: 0; padding: 0; font-size: inherit; border-bottom: 1px dotted var(--accent); line-height: 1.4; }
.plink:hover { border-bottom-style: solid; }
.prose { font-size: 13.5px; line-height: 1.85; white-space: pre-wrap; word-break: break-word; }
.hint { font-size: 12px; color: var(--ink-3); line-height: 1.7; }
.soon { display: flex; gap: 10px; align-items: flex-start; border: 1px dashed var(--line-2); border-radius: var(--r); padding: 12px 14px; font-size: 12.5px; color: var(--ink-2); line-height: 1.7; }
.soon .ic { color: var(--ink-3); margin-top: 2px; }
.det-empty { padding: 50px 24px; text-align: center; color: var(--ink-3); font-size: 13px; }
.det-empty .ic { width: 40px; height: 40px; color: var(--line-2); display: block; margin: 0 auto 10px; }
.det-empty b { display: block; color: var(--ink-2); font-size: 14.5px; margin-bottom: 4px; }

/* 感想タブ */
.rate { display: grid; grid-template-columns: minmax(0, 1fr) 82px; gap: 12px; align-items: center; }
.rate input[type="range"] { width: 100%; accent-color: var(--star); }
.rate .rn { display: flex; align-items: center; gap: 4px; }
.rate .rn input { width: 62px; text-align: right; font-family: var(--f-num); }
.rate-lbl { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.fi, .rate .rn input, .ci { font-size: 13.5px; border: 1px solid var(--line-2); border-radius: 4px; padding: 7px 10px; background: var(--surface); width: 100%; min-width: 0; }
.fi:focus, .ci:focus, .rate .rn input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
textarea.fi { resize: vertical; line-height: 1.75; min-height: 150px; }
.fgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 14px; }
.fw { display: flex; flex-direction: column; gap: 4px; min-width: 0; grid-column: span 6; }
.fw.w12 { grid-column: span 12; } .fw.w4 { grid-column: span 4; } .fw.w3 { grid-column: span 3; } .fw.w8 { grid-column: span 8; }
.fl { font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 4px; }
.fl em { color: var(--bad); font-style: normal; font-weight: 700; }
.fl small { color: var(--ink-3); font-size: 11px; margin-left: auto; }
.fsec { grid-column: span 12; font-size: 11px; letter-spacing: .1em; color: var(--ink-3); font-weight: 700; border-bottom: 1px solid var(--line); padding: 6px 0 5px; margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.unit { display: flex; align-items: center; gap: 6px; } .unit span { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.saved-note { font-size: 11.5px; color: var(--ok); display: inline-flex; align-items: center; gap: 4px; }

/* 巻・シーズン・曲目 */
.prog { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 12.5px; color: var(--ink-2); }
.prog .pbar { flex: 1; height: 7px; background: var(--sunk); border-radius: 4px; overflow: hidden; }
.prog .pbar div { height: 100%; background: var(--ok); }
.parts { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.pt-h, .pt { display: grid; grid-template-columns: 30px 52px minmax(0, 1fr) 112px 86px; gap: 6px; align-items: center; padding: 5px 8px; }
.pt-h { background: var(--sunk); font-size: 10.5px; letter-spacing: .06em; color: var(--ink-3); font-weight: 700; }
.pt { border-top: 1px solid var(--line); }
.pt .ci { font-size: 12.5px; padding: 4px 7px; }
.pt .ops { display: flex; gap: 2px; justify-content: flex-end; }
.pt .ops button { border: 0; background: none; padding: 4px; color: var(--ink-3); border-radius: 3px; display: grid; }
.pt .ops button:hover { background: var(--sunk); color: var(--accent); }
.pt .ops button.del:hover { color: var(--bad); }
.pt .ops button:disabled { opacity: .3; cursor: default; }
.pt input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--ok); margin: 0 auto; display: block; }
.pt-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.pt-add .ci { width: 70px; }

/* ---------- 窓（追加・編集・確認） ---------- */
.dlg-back { position: fixed; inset: 0; background: var(--scrim); z-index: 60; display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.dlg { background: var(--surface); width: min(560px, 100%); max-height: 100%; overflow: auto; border-radius: 7px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.dlg.wide { width: min(760px, 100%); }
.dlg-h { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 2; }
.dlg-h h2 { margin: 0; font-size: 15.5px; flex: 1; }
.dlg-b { padding: 18px; }
.dlg-b > p { margin: 0 0 12px; color: var(--ink-2); font-size: 13px; }
.dlg-f { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--sunk); position: sticky; bottom: 0; flex-wrap: wrap; border-radius: 0 0 7px 7px; }
.dlg-f .grow { flex: 1; }
.gpick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.gpick button { border: 1px solid var(--line-2); background: var(--surface); border-radius: var(--r); padding: 10px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.gpick button .ic { width: 22px; height: 22px; color: var(--g); }
.gpick button[aria-pressed="true"] { border-color: var(--g); background: var(--gs); color: var(--g); font-weight: 700; box-shadow: 0 0 0 1px var(--g); }
.dup { margin-top: 12px; background: var(--warn-soft); color: var(--warn); border-radius: 4px; padding: 9px 12px; font-size: 12.5px; display: flex; gap: 8px; align-items: flex-start; }
.dup .ic { margin-top: 2px; }
.dup button { color: var(--warn); background: none; border: 0; padding: 0; text-decoration: underline; font-weight: 700; }
.cf { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; margin: 10px 0; }
.cf .what { font-weight: 600; margin-bottom: 6px; }
.cf label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; padding: 4px 0; }
.cf .v { word-break: break-all; }
.cf .who { font-size: 12px; color: var(--ink-3); display: block; }

/* しらせ */
.toasts { position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 80; display: flex; flex-direction: column; gap: 8px; max-width: min(400px, calc(100vw - 32px)); }
.toast { display: flex; gap: 9px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--ok); border-radius: var(--r); padding: 10px 14px;
  font-size: 13px; line-height: 1.7; box-shadow: var(--shadow-lg); }
.toast .ic { color: var(--ok); margin-top: 3px; }

/* ---------- 幅ごとの形 ---------- */
@media (max-width: 1359px) {
  /* 詳細は右から重ねる。一覧を広く使うため */
  .cols { grid-template-columns: minmax(0, 1fr); }
  .detail { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); max-height: none; z-index: 50; border-radius: 0;
    background: var(--surface); box-shadow: var(--shadow-lg); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-right: env(safe-area-inset-right, 0px); }
  .detail:not(.open) { display: none; }
  .detail .det { border: 0; border-radius: 0; box-shadow: none; min-height: 100%; }
  .detail .det-top { border-radius: 0; }
  .det-scrim.open { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 45; }
}
@media (max-width: 991px) {
  .side { transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow-lg); z-index: 55; }
  body.side-open .side { transform: none; }
  body.side-open .side-scrim { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 54; }
  .main { margin-left: 0; }
  #sideBtn { display: inline-flex; }
  .top-in { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: 12px; }
  .page { padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px)); }
  .sumbar .sb-t { display: none; }
}
@media (max-width: 760px) {
  .top-in { gap: 8px; }
  .search { order: 5; width: 100%; }
  .top-r .btn-pri .lbl { display: none; }
  .search kbd { display: none; }
  .sumbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sb-i { border-bottom: 1px solid var(--line); padding: 8px 12px; }
  .sb-i:nth-child(3n + 1) { border-right: 0; }
  .sb-i b { font-size: 16px; } .sb-i.big b { font-size: 18px; }
  .grid-h { display: none; }
  .rw { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 2px; padding: 10px 12px; }
  .rw .cov { grid-row: 1 / 3; }
  .rw .c-main { grid-column: 2; grid-row: 1 / 3; }
  .rw .c-g { display: none; }
  .rw .c-st { grid-column: 3; grid-row: 1; justify-self: end; }
  .rw .c-sc { grid-column: 3; grid-row: 2; }
  .rw .d { display: none; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px 10px; padding: 12px; }
  .hero { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kvs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fw, .fw.w4, .fw.w3, .fw.w8 { grid-column: span 12; }
  .fw.half { grid-column: span 6; }
  .gpick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pt-h, .pt { grid-template-columns: 26px 44px minmax(0, 1fr) 76px; }
  .pt .c-date { display: none; }
  .pg-ttl h1 { font-size: 16px; }
  .does { display: none; }
}
/* 表紙の並びでは、作者は表紙の下に出すので表紙の上からは外す（状態の札と重なるため）。 */
.tile .cov .cw { display: none; }

/* ---------- 表紙と写真（段3） ---------- */
.cov img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 3; opacity: 0; transition: opacity .2s; }
.cov img.ld { opacity: 1; }
.cov-btn { position: relative; display: block; border: 0; padding: 0; background: none; border-radius: 4px; width: 100%; cursor: pointer; text-align: left; }
.cov-btn .cov-hint { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 4px;
  background: var(--hint-bg); color: var(--on-scrim); font-size: 11px; font-weight: 600; padding: 5px 2px; border-radius: 0 0 4px 4px; opacity: 0; transition: opacity .15s; }
.cov-btn .cov-hint .ic { width: 12px; height: 12px; }
.cov-btn:hover .cov-hint, .cov-btn:focus-visible .cov-hint { opacity: 1; }
@media (hover: none) { .cov-btn .cov-hint { opacity: 1; } }
.drop-on { outline: 3px dashed var(--accent) !important; outline-offset: 3px; }

.cvd { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; align-items: start; }
.cvd .cov { width: 100%; }
.dz { border: 2px dashed var(--line-2); border-radius: var(--r); padding: 18px 14px; text-align: center; color: var(--ink-2); font-size: 13px; line-height: 1.7; background: var(--sunk); }
.dz .ic { width: 28px; height: 28px; color: var(--ink-3); display: block; margin: 0 auto 6px; }
.dz .btn { margin-top: 10px; }
.dz.drop-on { border-color: var(--accent); background: var(--accent-soft); outline: 0 !important; }
.dz small { display: block; color: var(--ink-3); font-size: 11.5px; margin-top: 6px; }
.busy { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-2); padding: 10px 0 0; }
.busy .spin { width: 18px; height: 18px; border-width: 2px; margin: 0; }
.filein { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.ph-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ph-tools .hint { flex: 1; min-width: 160px; }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.ph { border: 1px solid var(--line); background: var(--sunk); border-radius: var(--r); padding: 0; overflow: hidden; text-align: left; display: flex; flex-direction: column; min-width: 0; }
.ph .pi { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--sunk); }
.ph .pi img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s; }
.ph .pi img.ld { opacity: 1; }
.ph .pi .ic { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; color: var(--ink-3); }
.ph .pn { font-size: 11.5px; padding: 5px 8px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--surface); border-top: 1px solid var(--line); }
.ph:hover { border-color: var(--accent); }
.ph-drop { border: 2px dashed var(--line-2); border-radius: var(--r); padding: 26px 14px; text-align: center; color: var(--ink-2); font-size: 13px; }
.ph-drop .ic { width: 30px; height: 30px; color: var(--ink-3); display: block; margin: 0 auto 6px; }
.ph-drop.drop-on { border-color: var(--accent); background: var(--accent-soft); outline: 0 !important; }

/* 写真を大きく見る */
.lb { position: fixed; inset: 0; z-index: 70; background: var(--lb-bg); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; color: var(--lb-ink);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.lb-h { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.lb-h .nm { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-h .nm small { color: var(--lb-ink-2); margin-left: 8px; }
.lb .lbtn { border: 1px solid var(--lb-line); background: var(--lb-btn); color: var(--lb-ink); border-radius: 4px; padding: 6px 11px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.lb .lbtn:hover { background: var(--lb-btn-2); }
.lb-b { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 56px; }
/* 画像は枠いっぱいに置いて contain で縮める。max-height:100% だと行の高さが決まらず、下のボタンに重なるため */
.lb-b { overflow: hidden; }
.lb-b img { position: absolute; top: 0; bottom: 0; left: 56px; right: 56px; width: calc(100% - 112px); height: 100%; object-fit: contain; opacity: 0; transition: opacity .2s; }
.lb-b img.ld { opacity: 1; }
.lb-b .spin { position: absolute; border-color: var(--lb-btn-2); border-top-color: var(--lb-ink); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); border: 0; background: var(--lb-btn); color: var(--lb-ink); width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; }
.lb-nav:hover { background: var(--lb-btn-2); }
.lb-nav.p { left: 8px; } .lb-nav.n { right: 8px; }
.lb-nav:disabled { opacity: .25; cursor: default; }
.lb-f { display: flex; justify-content: center; gap: 8px; padding: 10px 14px 14px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .cvd { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
  .ph-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .lb-b { padding: 0 8px; }
  .lb-b img { left: 8px; right: 8px; width: calc(100% - 16px); }
  .lb-nav { top: auto; bottom: 8px; transform: none; }
}