/* ラノベル＋（前の名前ヨミア） — 読む頁の見た目（docs/design.md）。
   決まり: 主役は作品ごとに画像生成で作った表紙の絵。ほかは白い地・細い線・黒いボタンで静かにする（影・柄・飾りの色の地を使わない）。
   字: 物語の字（キャッチコピー・作品の題・本文）は明朝、道具の字（メニュー・ボタン・数）は LINE Seed JP。
   太さは 400（ふつう）と 700（太字）の2つだけ（2026-11-14 NSJ「lineフォントつかって、通常400、太字700で」）。
   上の帯と最初の大きな札は画面の幅いっぱい。読む所（.wrap）は 1240px まで。
   色は :root の変数で変える。背景（白・セピア・黒）は html[data-theme]。 */
:root {
  --bg: #ffffff;
  --bg-2: #f4f4f6;
  --surface: #ffffff;
  --ink: #1b1d24;
  --ink-2: #4a4f5c;
  --ink-3: #858a96;
  --line: #ebebef;
  --line-2: #d9dae0;
  /* 赤（2026-11-14 NSJ「あくせんとからこのいろにするのどう」）。ロゴの栞・約束の印・フォーカスの枠は --accent（#ff333f）。
     小さな字（リンク・札）と白い字を載せる地は、地との明るさの差が 4.5:1 になる濃い赤（--brand・--red。白い地で 4.8:1） */
  --accent: #ff333f;
  --brand: #e01b2a;
  --brand-2: #c0141f;
  --brand-soft: #ffeced;
  --red: #e01b2a;
  --green: #1f8a55;
  --bk-line: rgb(0 0 0 / 0.08);
  --mincho: 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, 'Noto Serif JP', 'Noto Serif CJK JP', serif;
  /* 道具の字は LINE Seed JP（自前で置く。読み込みは layout.tsx の LINE_SEED_JP_CSS）。読めるまでと、無い字は端末のゴシック */
  --gothic: 'LINE Seed JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Noto Sans CJK JP', 'Yu Gothic', Meiryo, system-ui, sans-serif;
  --num: var(--gothic);
  --edge: 16px;
  --fs: 18px;
  --lhv: 1.95;
  --pgr: 0.5;
  --pad: 22px;
  --bar: 52px;
  color-scheme: light;
}
html[data-theme='sepia'] {
  --bg: #f4ead6;
  --bg-2: #ece0c6;
  --surface: #f8f0df;
  --ink: #3b2f22;
  --ink-2: #6b5a46;
  --ink-3: #94826b;
  --line: #e2d3b3;
  --line-2: #d6c39d;
  --brand: #c8202c;
  --brand-2: #a8121d;
  --brand-soft: #f0d8c4;
  --red: #c8202c;
}
html[data-theme='dark'] {
  --bg: #16181d;
  --bg-2: #1f2229;
  --surface: #1f2229;
  --ink: #e8e9ed;
  --ink-2: #b4b8c2;
  --ink-3: #80858f;
  --line: #2a2e37;
  --line-2: #3a3f4a;
  --brand: #ff5a63;
  --brand-2: #ff7a81;
  --brand-soft: #3a1c1f;
  --red: #ff333f;
  --green: #5fd197;
  --bk-line: rgb(255 255 255 / 0.08);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html[data-theme='auto'] {
    --bg: #16181d;
    --bg-2: #1f2229;
    --surface: #1f2229;
    --ink: #e8e9ed;
    --ink-2: #b4b8c2;
    --ink-3: #80858f;
    --line: #2a2e37;
    --line-2: #3a3f4a;
    --brand: #ff5a63;
    --brand-2: #ff7a81;
    --brand-soft: #3a1c1f;
    --red: #ff333f;
    --green: #5fd197;
    --bk-line: rgb(255 255 255 / 0.08);
    color-scheme: dark;
  }
}
html[data-size='0'] { --fs: 14px; }
html[data-size='1'] { --fs: 15.5px; }
html[data-size='2'] { --fs: 17px; }
html[data-size='3'] { --fs: 18.5px; }
html[data-size='4'] { --fs: 20.5px; }
html[data-size='5'] { --fs: 23px; }
html[data-size='6'] { --fs: 26px; }
html[data-lh='0'] { --lhv: 1.7; }
html[data-lh='1'] { --lhv: 1.95; }
html[data-lh='2'] { --lhv: 2.3; }
/* 段落の間（行の高さに対する割合）。Web の小説は段落のあとに空きを置いて読む（なろうの人気作は空行が中央 35%・カクヨム・pixiv も同じ）。
   空きが無いと切れ目が見えず、行の高さが広くても詰まって見える（2026-11-14 NSJ「行間ぎちぎち」。reports/reader-air-20261114.html） */
html[data-pg='0'] { --pgr: 0; }
html[data-pg='1'] { --pgr: 0.5; }
html[data-pg='2'] { --pgr: 1; }
html[data-mg='0'] { --pad: 14px; }
html[data-mg='1'] { --pad: 22px; }
html[data-mg='2'] { --pad: 34px; }

*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--gothic);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }

/* 物語の字の見出しは文節で折り、行の長さをそろえる（「界。」だけ次の行に残さない。効かないブラウザはふつうに折る） */
.hero-catch, .hero-title, .work-title, .work-catch, .wr-catch { word-break: auto-phrase; text-wrap: balance; }

/* ── 表紙（画像生成の絵。無い作品だけジャンルの色の仮の表紙） */
.bk {
  display: block;
  flex: none;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 2px;
  background: var(--bg-2);
  outline: 1px solid var(--bk-line);
  outline-offset: -1px;
}
.bk-none {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  padding: 12% 10%;
  background: var(--c, #46506e);
  color: #fff;
}
.bk-title { display: block; font-family: var(--mincho); font-weight: 700; font-size: 14px; line-height: 1.35; letter-spacing: 0.04em; }
.bk-s { width: 64px; }
.bk-s .bk-title { font-size: 8px; letter-spacing: 0; }
.bk-l { width: 150px; }
.bk-l .bk-title { font-size: 18px; }

/* ── 上の帯（画面の幅いっぱい） */
/* いちばん上の細い帯は、どの背景の色（白・セピア・暗い）でも黒い地に白い字（2026-11-14 NSJ「グレーダサいから黒にしろもじで」。前は灰色の地に黒い字） */
.topband { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 var(--edge); background: #0e0f12; color: #fff; white-space: nowrap; overflow: hidden; }
.topband-tag { margin: 0; font-family: var(--mincho); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: #fff; }
/* 一言の右に「全話無料」の札を1つ（NSJ「てかみぎのなくしてこのみぎに全話無料ラベルつけとく」）。
   地は塗らず、白い細い枠に白い字・太字にしない（NSJ「全話無料らべるあかやめろ白文字でしろわくでふともじもやめろ」。前は赤い地に太い白い字） */
.topband-label { flex: none; display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border: 1px solid #fff; border-radius: 2px; color: #fff; font-size: 11px; font-weight: 400; letter-spacing: 0.06em; line-height: 1; }
.mast { position: relative; z-index: 30; background: var(--bg); padding-top: env(safe-area-inset-top); }
.mast-row { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 var(--edge); }
.logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); flex: none; }
/* ロゴ「ラノベル＋」は字の箱いっぱい（svg の高さ 100 が字の高さ）。前の「栞のヨ」は栞が下へ垂れたので 28px にして上をあけていた */
.logo svg { display: block; height: 23px; width: auto; }
.logo-ink { fill: var(--ink); }
.logo-ribbon { fill: var(--accent); }
.mast-nav { display: none; }
.mast-search { display: none; }
.mast-icons { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 4px; color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 700; }
.icon-btn:hover { background: var(--bg-2); }
.icon-btn-label { display: none; }

.gnav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.gnav-row { display: flex; gap: 2px; max-width: none; padding: 0 var(--edge); overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); }
.gnav-row::-webkit-scrollbar { display: none; }
.gnav a { position: relative; flex: none; display: flex; align-items: center; height: 44px; padding: 0 12px; text-decoration: none; font-size: 14.5px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.gnav a:first-child { padding-left: 0; }
.gnav a:hover, .gnav a[aria-current='page'] { color: var(--ink); }
.gnav a[aria-current='page']::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--ink); }
.gnav a:first-child[aria-current='page']::after { left: 0; }

/* ── 小さな札・ボタン */
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 2px; border: 1px solid var(--line-2); color: var(--ink-2); font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none; }
.tag-on { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.tag-done { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.tag-comic { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.fresh { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: 2px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: 0.04em; }
.fresh-inline { height: 17px; font-size: 10px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 0 20px; border-radius: 4px; border: 1px solid transparent; font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer; background: var(--bg-2); color: var(--ink); transition: opacity 0.15s, background-color 0.15s; }
.btn:hover { opacity: 0.86; }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-accent { background: var(--red); color: #fff; }
.btn-light { background: #fff; color: #1b1d24; }
.btn-ghost { background: transparent; border-color: var(--line-2); }
.btn-ghost:hover { opacity: 1; background: var(--bg-2); }
.btn-lg { min-height: 54px; font-size: 16px; padding: 0 24px; }
.btn-wide { width: 100%; }
.btn-icon { min-height: 54px; padding: 0 16px; background: var(--surface); border-color: var(--line-2); }
.btn-icon:hover { opacity: 1; background: var(--bg-2); }
.btn-icon .fav-off, .btn-icon .fav-on { display: none; }
.btn-icon-only { width: 54px; padding: 0; }
[data-fav] .fav-on { display: none; }
/* 作品の頁の絵のボタン（.btn-icon）は狭い画面では絵だけ。押した後の字は広い画面の決まり（下）で出す（押した後に「第1話から読む」が折れた） */
[data-fav]:not(.btn-icon)[aria-pressed='true'] .fav-on { display: inline; }
[data-fav]:not(.btn-icon)[aria-pressed='true'] .fav-off { display: none; }
[data-fav][aria-pressed='true'] { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
[data-fav][aria-pressed='true'] svg { fill: currentColor; }

/* ── 段 */
.sec { margin-top: 36px; }
.sec-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.sec-head h2, .sec-title { font-size: 18px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; }
.sec-head h2 small { display: block; font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--ink-3); letter-spacing: 0; }
.more { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 1px; font-size: 13px; font-weight: 700; color: var(--ink-2); text-decoration: none; }
.more:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* 切り替え（人気・急上昇）。下線の札 */
.tabs { display: flex; gap: 16px; margin-left: 6px; }
.tabs button { padding: 2px 0 3px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink-3); font-size: 14px; font-weight: 700; cursor: pointer; }
.tabs button:hover { color: var(--ink); }
.tabs [aria-selected='true'] { color: var(--ink); border-bottom-color: var(--ink); }

/* 表紙を並べた段（スマホ3列・タブレット4列・PC 6列） */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 8px; }
.tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-decoration: none; }
.tile-cover { position: relative; display: block; margin-bottom: 6px; }
.tile:hover .tile-title { text-decoration: underline; text-underline-offset: 3px; }
.tile-title { font-size: 13px; font-weight: 700; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-meta { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-up { margin-left: 6px; color: var(--red); font-weight: 700; }
/* 順位: 表紙の左下に大きな白い数字（黒い縁） */
.tile-rank {
  position: absolute;
  left: 5px;
  bottom: -3px;
  font-family: var(--num);
  font-size: 34px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
  -webkit-text-stroke: 1.5px #15161b;
  paint-order: stroke fill;
  pointer-events: none;
}
.tile-rank.is-top { font-size: 42px; }

/* 行（カクヨムの検索の並び: キャッチコピー → 題 → 作者 → 札） */
.rows { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.rows > li { list-style: none; }
.wr { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; min-width: 0; }
.rows > :first-child .wr, .rows > .wr:first-child { padding-top: 4px; }
.wr:hover .wr-title { text-decoration: underline; text-underline-offset: 3px; }
.wr-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.wr-catch { font-family: var(--mincho); font-weight: 700; font-size: 16px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wr-title { font-size: 13.5px; font-weight: 700; line-height: 1.45; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wr-author { font-size: 12px; color: var(--ink-3); }
.wr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; margin-top: 5px; font-size: 11.5px; color: var(--ink-3); }
.wr-num { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wr-date { font-variant-numeric: tabular-nums; }
.wr-tags { color: var(--ink-3); }
.rk { flex: none; align-self: flex-start; width: 26px; margin-top: 1px; font-family: var(--num); font-size: 21px; font-weight: 700; font-style: italic; line-height: 1; letter-spacing: -0.04em; color: var(--ink-3); text-align: center; font-variant-numeric: tabular-nums; }
.rk.is-top { color: var(--ink); }

/* ジャンル（線で囲んだ平らな札） */
.genre-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gt { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 4px; color: var(--ink); text-decoration: none; }
.gt:hover { background: var(--bg-2); }
.gt-name { min-width: 0; font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-n { font-size: 12px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.gt[aria-current='page'] { border-color: var(--ink); outline: 1px solid var(--ink); outline-offset: -2px; }
.chips { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px; padding: 16px 16px 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 4px; border: 1px solid var(--line-2); text-decoration: none; font-size: 13.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.chip:hover { background: var(--bg-2); }
.chip[aria-current='page'] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* ── 最初の大きな札（画面の幅いっぱい。表紙の絵をぼかした地。スマホとタブレットは端まで札・余白なし（2026-11-14 NSJ「すまほheroよはくいらんのでは」）、PC は細い札を3枚と両端の半分を並べる） */
.hero { --sw: 100cqw; --hg: 0px; position: relative; container-type: inline-size; padding-top: 12px; }
.hero-track {
  position: relative;
  display: flex;
  gap: var(--hg);
  overflow-x: auto;
  padding: 0 calc((100cqw - var(--sw)) / 2);
  scroll-padding: 0 calc((100cqw - var(--sw)) / 2);
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.hero-track::-webkit-scrollbar { display: none; }
/* 左の写し（--clones 枚。最後の方の作品）: JS の前は負の余白で左へ出し、1枚目を真ん中に置いたまま左の端に見せる。JS が .is-loop を付けたら外す */
.hero-track[data-loop]:not(.is-loop) > .is-clone:first-child { margin-left: calc(-1 * var(--clones, 1) * (var(--sw) + var(--hg))); }
.hero-slide { position: relative; flex: 0 0 var(--sw); overflow: hidden; isolation: isolate; background: #23252e; color: #fff; scroll-snap-align: center; transition: opacity 0.3s; }
.hero-bg { position: absolute; inset: -12%; z-index: -2; width: 124%; max-width: none; height: 124%; object-fit: cover; filter: blur(26px) saturate(1.7); }
.hero-slide::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgb(14 15 22 / 0.72) 28%, rgb(14 15 22 / 0.22)); }
.hero-inner { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.hero-link { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; align-items: center; color: inherit; text-decoration: none; }
.hero-cover .bk { width: 100%; outline-color: rgb(255 255 255 / 0.14); }
.hero-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; font-size: 11.5px; font-weight: 700; color: rgb(255 255 255 / 0.78); }
.hero-meta span::before { content: ''; display: inline-block; width: 1px; height: 10px; margin: 0 8px; background: currentColor; opacity: 0.6; vertical-align: -1px; }
.hero-catch { font-family: var(--mincho); font-weight: 700; font-size: 17px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.hero-title { font-size: 13px; font-weight: 700; color: rgb(255 255 255 / 0.92); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-author { font-size: 11.5px; color: rgb(255 255 255 / 0.7); }
.hero-link:hover .hero-title { text-decoration: underline; text-underline-offset: 3px; }
/* 「第1話から読む」は白い地のボタンにせず、半透明の地と細い枠の小さいボタン・普通の太さの字（「›」付き）にする
   （2026-11-14 NSJ「ボタンちとださいな」→ 字のリンク →「ふとじださいからボーダー枠つけてふつうのふぉんとにしよ」「はんとうめいボタンてきないめーじ」） */
.hero-read { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 34px; padding: 0 11px 0 12px; border: 1px solid rgb(255 255 255 / 0.5); border-radius: 4px; background: rgb(255 255 255 / 0.14); color: #fff; font-size: 13px; font-weight: 400; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color 0.15s; }
.hero-read::after { content: ''; flex: none; width: 5px; height: 5px; margin-left: 2px; border-top: 1.2px solid currentColor; border-right: 1.2px solid currentColor; transform: rotate(45deg); }
.hero-read:hover { background: rgb(255 255 255 / 0.24); }
.hero-dots { display: flex; justify-content: center; gap: 2px; padding: 8px 0 0; }
.hero-dots button { width: 18px; height: 18px; padding: 6px; border: 0; background: var(--line-2); background-clip: content-box; cursor: pointer; transition: width 0.2s; }
.hero-dots button[aria-current='true'] { width: 34px; background-color: var(--ink); }


/* 続きから読む・本棚 */
.cont-list { display: grid; grid-auto-flow: column; grid-auto-columns: min(300px, 82%); gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
.cont-list::-webkit-scrollbar { display: none; }
.cont-list-col { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; overflow: visible; }
.cont { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px 10px 10px; border: 1px solid var(--line-2); border-radius: 4px; text-decoration: none; }
.cont:hover { background: var(--bg-2); }
.cont .bk-s { width: 48px; }
.cont-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cont-title { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cont-ep { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cont-bar { display: block; height: 3px; background: var(--line); margin-top: 6px; overflow: hidden; }
.cont-bar i { display: block; height: 100%; background: var(--ink); }
.cont-list .empty { grid-column: 1 / -1; }

/* ── 作品の頁（表紙の絵を薄くぼかした地の上に、表紙と題） */
.work-hero { position: relative; overflow: hidden; isolation: isolate; padding: 4px 0 26px; border-bottom: 1px solid var(--line); }
.work-hero-bg { position: absolute; inset: -60px; z-index: -1; width: calc(100% + 120px); max-width: none; height: calc(100% + 120px); object-fit: cover; filter: blur(48px) saturate(1.3); opacity: 0.22; -webkit-mask-image: linear-gradient(#000 35%, transparent 92%); mask-image: linear-gradient(#000 35%, transparent 92%); }
html[data-theme='dark'] .work-hero-bg { opacity: 0.3; }
@media (prefers-color-scheme: dark) {
  html[data-theme='auto'] .work-hero-bg { opacity: 0.3; }
}
.crumbs { display: flex; align-items: center; gap: 4px; padding: 12px 0 0; font-size: 12.5px; color: var(--ink-2); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs svg { color: var(--ink-3); }
.work-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; margin-top: 14px; }
.work-cover .bk-l { width: 168px; }
.work-info { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.work-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 0; }
.work-title { font-family: var(--mincho); font-size: clamp(22px, 6vw, 30px); font-weight: 700; line-height: 1.4; letter-spacing: 0.03em; }
.work-author { margin: 0; font-size: 14px; color: var(--ink-2); }
.work-author a { text-decoration: none; font-weight: 700; }
.work-author a:hover { text-decoration: underline; }
.work-catch { margin: 4px 0 0; font-family: var(--mincho); font-size: 16px; font-weight: 700; line-height: 1.6; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; margin: 10px 0 0; padding: 12px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.stats div { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.stats div + div { border-left: 1px solid var(--line-2); }
.stats dt { font-size: 11px; color: var(--ink-3); }
.stats dd { margin: 0; font-size: 15.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.work-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; width: 100%; margin-top: 10px; }

.work-body { padding-bottom: 8px; }
.synopsis { margin-top: 28px; }
.synopsis .sec-title { margin-bottom: 10px; }
.synopsis-text p { margin: 0 0 0.9em; font-size: 15px; line-height: 1.95; }
.synopsis-text.is-folded { max-height: 11.5em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.fold-btn { display: block; margin: 4px auto 0; padding: 8px 18px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--surface); font-size: 13.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; }
.tag-list a { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 2px; border: 1px solid var(--line-2); color: var(--ink-2); font-size: 12.5px; font-weight: 400; text-decoration: none; }
.tag-list a:hover { background: var(--bg-2); color: var(--ink); }

.toc { margin-top: 36px; }
.toc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.toc-list a { display: grid; grid-template-columns: 30px minmax(0, 1fr) 14px; gap: 8px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.toc-list a > svg { color: var(--ink-3); }
.toc-list a:hover .toc-title { text-decoration: underline; text-underline-offset: 3px; }
.toc-no { font-size: 13px; font-weight: 700; color: var(--ink-3); text-align: center; font-variant-numeric: tabular-nums; }
.toc-main { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; min-width: 0; }
.toc-title { font-size: 15px; font-weight: 700; line-height: 1.5; min-width: 0; }
.toc-meta { flex: none; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.toc-read { display: none; align-items: center; gap: 2px; color: var(--ink-2); font-weight: 700; }
.toc-list a.is-read .toc-title { color: var(--ink-3); font-weight: 400; }
.toc-list a.is-read .toc-read { display: inline-flex; }

.info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 28px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 4px; }
.info div { min-width: 0; }
.info dt { font-size: 11.5px; color: var(--ink-3); }
.info dd { margin: 0; font-size: 14px; font-weight: 700; }
.info a { text-decoration: none; }
.ai-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--ink-3); }
.comic-box { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 22px; padding: 16px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--red) 35%, transparent); }
.comic-label { display: inline-flex; height: 22px; align-items: center; padding: 0 8px; border-radius: 2px; background: var(--red); color: #fff; font-size: 11.5px; font-weight: 700; }

.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform 0.22s ease; }
.sticky-cta.is-on { transform: none; }
.sticky-cta .btn { width: 100%; }

/* ── 一覧・検索・ほか */
.page-head { padding: 24px 0 18px; border-bottom: 1px solid var(--line); }
.page-title { font-size: 24px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.35; }
.page-lead { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.page-count { margin: 8px 0 0; font-size: 13px; color: var(--ink-3); font-weight: 700; }
.list .rows-grid { margin-top: 12px; }
/* 作品の数は一覧の上に小さく（見出しとタブの間に置かない） */
.list-count { margin: 16px 0 0; font-size: 13px; color: var(--ink-3); font-weight: 700; }
.list .list-count + .rows-grid { margin-top: 4px; }
.list-note { margin: 24px 0 0; font-size: 12px; color: var(--ink-3); line-height: 1.7; }
.list-note span { white-space: nowrap; }
.page-head + .wrap > .genre-grid { margin-top: 24px; }
/* 頁の中の切り替えのタブ（新作・最新話／人気・急上昇／読んでいる・お気に入り）。頁の頭の下の端に付け、今の方の太い線を頭の線に重ねる
   （2026-11-14 NSJ「タブはおおきく上部にしたほうがいいのでは」。前は 15px の字で、見出し・説明・作品の数の下にあった） */
.page-head-tabs { padding-bottom: 0; }
.seg-tabs { display: flex; gap: 28px; margin-top: 12px; }
.seg-tabs a, .seg-tabs button { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 2px; border: 0; background: transparent; color: var(--ink-3); font-size: 17px; font-weight: 700; text-decoration: none; cursor: pointer; touch-action: manipulation; }
.seg-tabs a:hover, .seg-tabs button:hover { color: var(--ink); }
.seg-tabs [aria-current='page'], .seg-tabs [aria-selected='true'] { color: var(--ink); }
.seg-tabs [aria-current='page']::after, .seg-tabs [aria-selected='true']::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--ink); }
.rank-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.rank-top .tile-title { font-size: 13px; }
.rank-rest { margin-top: 18px; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 40px 0; text-align: center; color: var(--ink-3); font-size: 14px; }
.empty p { margin: 0; }
.cont-list .empty, .cont-list-col .empty { margin: 18px 0; }
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 24px 0; font-size: 14px; }
.pager-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 42px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 4px; text-decoration: none; font-weight: 700; justify-self: start; }
.pager-btn:last-child { justify-self: end; }
.pager-btn.is-off { opacity: 0.35; }
.pager-now { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pager-now b { color: var(--ink); }
.search-title { margin-top: 24px; }
.search { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; padding: 4px 4px 4px 14px; border-radius: 4px; border: 1px solid var(--line-2); background: var(--surface); }
.search:focus-within { border-color: var(--ink); }
.search svg { flex: none; color: var(--ink-3); }
.search input { flex: 1; min-width: 0; min-height: 42px; border: 0; background: transparent; color: var(--ink); font-size: 16px; outline: none; }
.search .btn { min-height: 42px; padding: 0 18px; }
.search-clear { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 4px; background: transparent; color: var(--ink-3); cursor: pointer; }
.search-clear:hover { background: var(--bg-2); color: var(--ink); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.search-results { transition: opacity 0.15s; }
.search-results[aria-busy='true'] { opacity: 0.5; }
.sec-head button.more { padding: 6px 0; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
/* 最近さがした言葉（この端末だけ。1つずつ消せる） */
.hist { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hist li { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; border: 1px solid var(--line-2); border-radius: 4px; }
.hist a { display: inline-flex; align-items: center; min-width: 0; height: 38px; padding: 0 2px 0 12px; overflow: hidden; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.hist button { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 38px; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; }
/* 一覧への入口（さがすの頁） */
.entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.entry-grid a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 10px 0 14px; border: 1px solid var(--line-2); border-radius: 4px; color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 700; }
.entry-grid a svg:last-child { margin-left: auto; color: var(--ink-3); }
.entry-grid a:hover { background: var(--bg-2); }
/* 入口は5つ（ランキング・新着・完結・ジャンル・コミカライズ）。2列で余る最後の1つは行いっぱいにする */
@media (max-width: 599.98px) { .entry-grid a:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* 本棚: 読んでいる／お気に入りの切り替え・1つずつ外す */
.seg-n { margin-left: 5px; font-size: 13px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.shelf-panel { margin-top: 18px; }
.cont-row { position: relative; min-width: 0; }
.cont-row .cont { padding-right: 52px; }
.cont-x { position: absolute; top: 50%; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; transform: translateY(-50%); border: 0; border-radius: 4px; background: transparent; color: var(--ink-3); cursor: pointer; }
.cont-x:hover { background: var(--bg-2); color: var(--ink); }
.text-page { padding-top: 8px; }
.prose { max-width: 40em; font-size: 15px; line-height: 1.95; }
.prose h2 { font-size: 17px; margin: 28px 0 6px; }
.prose ul { padding-left: 1.3em; }
.prose .lead { font-family: var(--mincho); font-size: 20px; font-weight: 700; color: var(--ink); }
.prose .muted { color: var(--ink-3); font-size: 13px; }
.prose a { color: var(--brand); }

/* ── 下の帯 */
.foot { margin-top: 72px; padding: 36px 0 calc(32px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--ink-2); font-size: 13.5px; }
.foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.foot-brand { grid-column: 1 / -1; }
.foot-tag { margin: 12px 0 0; font-family: var(--mincho); font-size: 16px; font-weight: 700; color: var(--ink); }
.foot-note { margin: 4px 0 0; font-size: 13px; line-height: 1.7; }
.foot-col { display: flex; flex-direction: column; gap: 2px; }
.foot-col h2 { font-size: 12px; font-weight: 700; color: var(--ink-3); margin-bottom: 6px; letter-spacing: 0.04em; }
.foot-col a { padding: 4px 0; text-decoration: none; }
.foot-col a:hover { color: var(--ink); text-decoration: underline; }
body[data-page='work'] .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* ── 小さな知らせ */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); padding: 11px 16px; border-radius: 4px; background: var(--ink); color: var(--bg); font-size: 13.5px; font-weight: 700; }
.toast button { flex: none; white-space: nowrap; border: 0; background: transparent; color: inherit; text-decoration: underline; font-weight: 700; cursor: pointer; padding: 4px; }
body[data-page='work'] .toast { bottom: calc(92px + env(safe-area-inset-bottom)); }

/* ── 読む画面 */
/* 知らせは下の帯の上に重ねる（本文を塞がない。出ている間は帯を出したまま） */
body[data-page='episode'] .toast { left: 0; right: 0; bottom: 0; transform: none; max-width: none; height: calc(var(--bar) + env(safe-area-inset-bottom)); padding: 0 16px env(safe-area-inset-bottom); border-radius: 0; justify-content: center; z-index: 35; }
body[data-page='episode'] { font-family: var(--gothic); }
.rd-top, .rd-bottom { position: fixed; left: 0; right: 0; z-index: 30; display: flex; align-items: center; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform 0.22s ease; }
.rd-top { top: 0; gap: 2px; padding: env(safe-area-inset-top) 6px 0; height: calc(var(--bar) + env(safe-area-inset-top)); border-bottom: 1px solid var(--line); }
.rd-bottom { bottom: 0; justify-content: space-between; padding: 0 8px env(safe-area-inset-bottom); height: calc(var(--bar) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: 14px; }
body.chrome-off .rd-top { transform: translateY(-105%); }
body.chrome-off .rd-bottom { transform: translateY(105%); }
.rd-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 4px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; }
.rd-icon:hover { background: var(--bg-2); }
.rd-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; padding: 0 2px; }
.rd-work { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-ep { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.rd-bar i { display: block; width: 0; height: 100%; background: var(--ink); transition: width 0.15s linear; }
.rd-nav { display: inline-flex; align-items: center; gap: 2px; min-width: 96px; min-height: 44px; padding: 0 10px; text-decoration: none; font-weight: 700; font-size: 14px; }
.rd-nav:last-child { justify-content: flex-end; }
.rd-nav.is-off { color: var(--ink-3); opacity: 0.45; }
.rd-progress { min-width: 48px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.rd { padding: calc(var(--bar) + env(safe-area-inset-top) + 28px) 0 calc(var(--bar) + env(safe-area-inset-bottom) + 40px); }
.rd-scroll { max-width: 38em; margin: 0 auto; padding: 0 var(--pad); outline: none; font-size: var(--fs); }
html[data-font='mincho'] .rd-scroll { font-family: var(--mincho); }
html[data-font='gothic'] .rd-scroll { font-family: var(--gothic); }
.rd-head { margin-bottom: 2.4em; }
.rd-mark { display: block; inline-size: 2.2em; block-size: 3px; background: var(--ink); margin-block-end: 1.1em; }
.rd-head-work { margin: 0; font-size: 0.74em; color: var(--ink-3); }
.rd-head-work a { text-decoration: none; }
.rd-head-title { margin: 0.4em 0 0; font-size: 1.3em; line-height: 1.5; font-weight: 700; }
.rd-head-no { display: block; font-size: 0.6em; color: var(--ink-3); letter-spacing: 0.08em; }
.rd-body { line-height: var(--lhv); letter-spacing: 0.02em; font-feature-settings: 'palt' 0; }
.rd-body p { margin: 0; }
/* 段落のあとに空き（縦書きでも同じ向きに効く）。原稿の空の行（.sp）は場面の切れ目で、空きに1行ぶん足して大きく分ける */
.rd-body p:not(.sp) { margin-block-end: calc(1em * var(--lhv) * var(--pgr)); }
.rd-body .sp { block-size: calc(1em * var(--lhv)); }
.rd-body rt { font-size: 0.5em; letter-spacing: 0; }
/* ふりがなが親の字より長い時、親の字の間を空けずに真ん中に寄せる（既定は「真 鍮」のように親の字が離れる） */
.rd-body ruby { ruby-align: center; }
.rd-body .bt { font-style: normal; -webkit-text-emphasis: filled sesame; text-emphasis: filled sesame; }
/* 縦書きで数・記号を立てる（横書きの所では効かない）。packages/core/src/body.ts の textHtml が包む */
.tcy { -webkit-text-combine: horizontal; text-combine-upright: all; }
.upr { -webkit-text-orientation: upright; text-orientation: upright; }
.rd-end { margin-top: 3.2em; padding-top: 2.2em; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; font-family: var(--gothic); font-size: 15px; }
.rd-end-mark { margin: 0; display: flex; align-items: center; gap: 14px; color: var(--ink-3); font-family: var(--mincho); font-size: 14px; font-weight: 700; letter-spacing: 0.12em; }
.rd-end-mark::before, .rd-end-mark::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.rd-end-count { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-3); font-weight: 700; }
.rd-end-meter { flex: 1; height: 3px; background: var(--line); overflow: hidden; }
.rd-end-meter i { display: block; height: 100%; background: var(--ink); }
.rd-end-note { margin: 4px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 4px; font-size: 14px; line-height: 1.7; color: var(--ink-2); text-align: center; }
.btn-next { flex-direction: column; align-items: stretch; gap: 3px; min-height: 72px; padding: 12px 22px; text-align: left; }
.btn-next-label { display: flex; align-items: center; justify-content: space-between; font-size: 17px; }
.btn-next-title { font-size: 13px; font-weight: 400; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-end-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rd-related { display: flex; flex-direction: column; margin-top: 8px; }
.rd-related-title { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.rd-related .wr-catch { font-size: 14.5px; }
.rd-end-nav { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 2px; }
.rd-end-nav a { display: inline-flex; align-items: center; gap: 2px; text-decoration: none; color: var(--ink-2); font-weight: 700; }

/* 縦書き: 本文の箱が横へ流れ、右から左へ送る */
.rd-mask { position: fixed; top: 0; bottom: 0; width: 0; background: var(--bg); pointer-events: none; z-index: 5; }
.rd-mask-l { left: 0; }
.rd-mask-r { right: 0; }
html[data-mode='v'] body[data-page='episode'] { overflow: hidden; height: 100svh; }
html[data-mode='v'] .rd { position: fixed; inset: 0; padding: 0; }
html[data-mode='v'] .rd-scroll {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  max-width: none;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  padding: calc(var(--bar) + env(safe-area-inset-top) + var(--pad)) 18px calc(var(--bar) + env(safe-area-inset-bottom) + var(--pad));
  scrollbar-width: none;
}
html[data-mode='v'] .rd-scroll::-webkit-scrollbar { display: none; }
html[data-mode='v'] .rd-head { margin: 0 0 0 2em; }
html[data-mode='v'] .rd-head-no { display: inline; margin-left: 0.6em; }
html[data-mode='v'] .rd-end {
  writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
  width: min(88vw, 420px);
  height: 100%;
  margin: 0 3em 0 0;
  padding: 0 0 0 20px;
  border-top: 0;
  border-right: 1px solid var(--line);
  justify-content: center;
  overflow-y: auto;
}

/* ── 表示の設定（下から出る箱） */
.sheet { border: 0; padding: 0; margin: auto 0 0; width: 100%; max-width: 100%; max-height: 90svh; border-radius: 12px 12px 0 0; background: var(--surface); color: var(--ink); font-family: var(--gothic); }
.sheet::backdrop { background: rgb(0 0 0 / 0.38); }
@media (min-width: 640px) {
  .sheet { margin: auto; max-width: 460px; border-radius: 8px; }
}
.sheet-body { display: flex; flex-direction: column; gap: 16px; padding: 10px 18px calc(18px + env(safe-area-inset-bottom)); }
.sheet-grab { width: 40px; height: 4px; margin: 0 auto 2px; border-radius: 4px; background: var(--line-2); }
.sheet-row { display: flex; flex-direction: column; gap: 7px; }
.sheet-label { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.seg { display: flex; gap: 0; border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; }
.seg button { flex: 1; min-height: 42px; border: 0; background: transparent; cursor: pointer; font-weight: 700; font-size: 14px; color: var(--ink-2); }
.seg button + button { border-left: 1px solid var(--line-2); }
.seg button[aria-checked='true'] { background: var(--ink); color: var(--bg); }
.seg .f-mincho { font-family: var(--mincho); }
.stepper { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; }
.stepper button { min-height: 44px; border: 0; background: transparent; cursor: pointer; font-family: var(--mincho); font-weight: 700; }
.stepper button:hover { background: var(--bg-2); }
.stepper button:first-child { border-right: 1px solid var(--line-2); }
.stepper button:last-child { border-left: 1px solid var(--line-2); }
.a-s { font-size: 13px; }
.a-l { font-size: 21px; }
.seg-val { display: grid; place-items: center; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sw { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 4px 0; border: 0; background: transparent; cursor: pointer; }
.sw-dot { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-family: var(--mincho); font-weight: 700; font-size: 17px; border: 1px solid var(--line-2); }
.sw-label { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.sw-auto .sw-dot { background: linear-gradient(135deg, #ffffff 50%, #16181d 50%); color: #888; }
.sw-light .sw-dot { background: #ffffff; color: #1b1d24; }
.sw-sepia .sw-dot { background: #f4ead6; color: #3b2f22; }
.sw-dark .sw-dot { background: #16181d; color: #e6e7eb; }
.sw[aria-checked='true'] .sw-dot { outline: 2px solid var(--ink); outline-offset: 2px; }
.sw[aria-checked='true'] .sw-label { color: var(--ink); }
.sheet-close { margin-top: 2px; }

/* ── スマホ（幅 720px まで）はアプリの形（2026-11-14 NSJ「スマホはアプリみたいにフッターメニュー」「アプリなみにてっていてきにつかいやすいUIUX」）。
   下のタブ（ホーム・さがす・ランキング・本棚）・細い上の帯（下へ送ると隠れ、上へ戻すと出る）・下のタブでない頁は「戻る＋題」。
   作品の頁で下に「読む」が出ている間は、下のタブを下げて「読む」をそこに置く（下の帯は1本だけ）。 */
.tabbar, .quick, .mast-sub { display: none; }
a, button { -webkit-tap-highlight-color: transparent; }
@media (max-width: 719.98px) {
  :root { --tabbar-h: calc(61px + max(10px, env(safe-area-inset-bottom))); }
  .mast { position: sticky; top: 0; border-bottom: 1px solid var(--line); transition: transform 0.22s ease; }
  .mast.is-up { transform: translateY(-100%); }
  .mast-row { height: 52px; }
  .mast-icons, .gnav { display: none; }
  .mast.has-back .logo { display: none; }
  .mast-sub { display: flex; align-items: center; flex: 1; min-width: 0; }
  .mast-back { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -12px; color: var(--ink); }
  .mast-title { min-width: 0; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* 下のタブは浮いた丸い帯（Tapia の Web・アプリの形。2026-11-14 NSJ「tapia のこのまるけいのがいいのでは」）。
     周りは透かし、帯はすりガラス（iPhone の純正の下のタブの形。NSJ「まわりとうめいにしないと」「iphone のメニューネイティブいしきしたい」）。
     Tapia は帯の後ろを白で塗るが、ここは塗らない。帯の外は指が下の頁へ通る。帯だけ下の頁から離すため薄い影を付ける（影を使わない決まりの例外） */
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: block; padding: 0 12px max(10px, env(safe-area-inset-bottom)); pointer-events: none; transition: transform 0.22s ease; }
  .tabbar-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 4px; border: 0.5px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 32px; background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); box-shadow: 0 8px 28px rgb(0 0 0 / 0.12); pointer-events: auto; view-transition-name: tabbar; }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tabbar-in { background: color-mix(in srgb, var(--bg) 96%, transparent); }
  }
  .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 52px; padding: 6px 0; border-radius: 26px; color: var(--ink-3); text-decoration: none; font-size: 10px; font-weight: 400; line-height: 1.15; touch-action: manipulation; transition: background-color 0.15s, color 0.15s; }
  .tab svg { stroke-width: 2.1; transition: transform 0.12s; }
  .tab:active svg { transform: scale(0.88); }
  .tab[aria-current='page'], .tab.is-from { color: var(--ink); font-weight: 700; background: color-mix(in srgb, var(--ink) 8%, transparent); }
  /* 選んだタブの絵は塗る（iPhone の下のタブと同じ。虫めがねは線のまま） */
  :is(.tab-home, .tab-ranking, .tab-shelf):is([aria-current='page'], .is-from) svg { fill: currentColor; }
  body[data-tab] { padding-bottom: var(--tabbar-h); }
  /* 焦点の移り（キーボードの Tab・読み上げ）でブラウザが送る時、ボタンを浮いた帯の下に置かない（2026-11-14 会員の頁のログアウトが帯に隠れた） */
  html:has(> body[data-tab]) { scroll-padding-bottom: calc(var(--tabbar-h) + 12px); }
  body.cta-on .tabbar { transform: translateY(100%); }
  .toast { left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + 10px); transform: none; max-width: none; justify-content: space-between; }
  /* ホームの入口の列（大きな札の下） */
  /* 下線のあるメニューの段が無いので、大きな札は上の帯に付ける（2026-11-14 NSJ「これヘッダーから余白あいてるじょうぶ」） */
  .hero { padding-top: 0; }
  .quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 4px -8px 0; }
  .quick a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0 9px; border-radius: 4px; color: var(--ink); text-decoration: none; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
  .quick a:active { background: var(--bg-2); }
  /* さがすの頁は、さがす欄を上の帯にする（打つ所がいつも指の届く上に残る） */
  body[data-page='search'] .mast, body[data-page='search'] .topband { display: none; }
  .search-bar { position: sticky; top: 0; z-index: 30; padding-top: env(safe-area-inset-top); background: var(--bg); border-bottom: 1px solid var(--line); }
  .search-bar .search-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .search-bar .search { margin: 8px 0; }
  .search-go { display: none !important; }
  .search-page .search-idle > .sec:first-child, .search-page .search-idle > .sec[hidden] + .sec { margin-top: 20px; }
  /* 切り替えのタブは幅いっぱいを等しく分ける（アプリの上のタブの形。押せる所を大きく） */
  .seg-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; margin: 10px -16px 0; }
  .seg-tabs a, .seg-tabs button { font-size: 16px; }
  .seg-tabs a:active, .seg-tabs button:active { background: var(--bg-2); }
  /* 上の帯が「戻る＋題」の頁は、帯の題と同じ見出しを二度出さない（読み上げと検索のために字は残す）。タブは帯のすぐ下 */
  .has-back .page-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .has-back .page-head { padding: 14px 0 16px; }
  .has-back .page-head .page-lead { margin-top: 0; }
  .has-back .page-head-tabs { padding: 0; }
  .has-back .page-head-tabs .seg-tabs { margin-top: 0; }
  .has-back .page-head-bare { padding: 0; border-bottom: 0; }
}
/* スマホとタブレット（幅 960px まで）: 「読む」は作者の行の右に置く（NSJ「よむのボタンでかすぎてたてはばとってるからちいさくしてよみあへんしゅうぶのみぎがわに」）。
   作者の行は表紙の下の端にそろえ、「読む」は同じ行の右に重ねる（作品の頁へのリンクの外のまま）。押せる高さの 44px の真ん中を作者の行の字にそろえる */
@media (max-width: 959.98px) {
  .hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .hero-link { grid-area: 1 / 1 / 2 / 3; align-items: stretch; }
  .hero-author { margin-top: auto; min-height: 34px; padding-right: 136px; line-height: 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hero-read { grid-area: 1 / 2 / 2 / 3; align-self: end; }
}
/* 幅 360px より狭い端末は作者の名前が入らないので、「読む」を作者の下の行の右へ */
@media (max-width: 359.98px) {
  .hero-inner { display: flex; flex-direction: column; gap: 4px; }
  .hero-author { min-height: 0; padding-right: 0; line-height: inherit; }
  .hero-read { align-self: flex-end; margin-top: 6px; }
}
/* いちばん上の細い帯: スマホは少し低く（一言と札は幅 320px の端末でも1行に入る）。
   スマホ・タブレットのホーム画面に入れたアプリの形（standalone）だけ、帯ごと見えない形にする（上の帯が画面の上の切り欠きの分の余白を持つので、上に帯を置くと余白が帯の下に挟まる）。
   指で触る端末だけに絞り、全画面（fullscreen）は条件に入れない（PC のブラウザの全画面表示も fullscreen に当たり、PC で帯が消えていた（NSJ「でてないで？」）。
   PC の全画面でスマホの見え方を試す時も「全画面で指の端末」に当たって消えていた（NSJ「すまほで帯ちらっとでてすぐきえるばぐ」）。本物のスマホの頁は全画面の形にならない） */
@media (max-width: 599.98px) {
  .topband { height: 30px; }
}
@media (display-mode: standalone) and (hover: none) {
  .topband { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); }
}
/* 指で触る端末: 押した所が分かるように（色の地を一瞬だけ） */
@media (hover: none) {
  .wr:active, .cont:active, .entry-grid a:active, .gt:active, .chip:active, .hist a:active { background: var(--bg-2); }
  .tile:active .bk { opacity: 0.82; }
  .btn:active { opacity: 0.8; }
}
/* 頁を移る時に、白く途切れずに入れ替える（対応するブラウザだけ。下のタブは動かさない） */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.16s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ── ホームの段は2段まで（多い分は「もっと見る」へ）。列の数に合わせて隠す */
.home .tiles > :nth-child(n + 7) { display: none; }

/* ── 広い画面 */
@media (min-width: 600px) {
  .genre-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .entry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .btn-icon .fav-off { display: inline; }
  .btn-icon[aria-pressed='true'] .fav-off { display: none; }
  .btn-icon[aria-pressed='true'] .fav-on { display: inline; }
  .foot-grid { grid-template-columns: 2fr 1fr 1fr; }
  .foot-brand { grid-column: auto; }
  .sec-head h2 small { display: inline; margin-left: 10px; font-size: 12.5px; }
  .rank-top { gap: 20px; }
  .hero-link { grid-template-columns: 136px minmax(0, 1fr); gap: 22px; }
  .hero-catch { font-size: 20px; }
}
@media (min-width: 720px) {
  :root { --edge: 24px; }
  .mast-row { height: 64px; gap: 16px; }
  .mast-search { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 400px; height: 40px; margin-left: auto; padding: 0 12px; border-radius: 4px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-3); }
  .mast-search:focus-within { border-color: var(--ink); }
  .mast-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font-size: 14px; outline: none; }
  .mast-icons { margin-left: 0; }
  .icon-btn-label { display: inline; }
  .shelf-btn { height: 40px; padding: 0 16px; background: var(--ink); color: var(--bg); }
  .shelf-btn:hover { background: var(--ink); opacity: 0.86; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 12px; }
  .home .tiles > :nth-child(n + 7) { display: flex; }
  .home .tiles > :nth-child(n + 9) { display: none; }
  .tile-title { font-size: 13.5px; }
  .tile-rank { font-size: 40px; }
  .tile-rank.is-top { font-size: 48px; }
  .bk-s { width: 76px; }
  .work-head { flex-direction: row; align-items: flex-start; text-align: left; gap: 36px; margin-top: 22px; }
  .work-cover .bk-l { width: 220px; }
  .work-info { align-items: flex-start; gap: 9px; }
  .work-badges { justify-content: flex-start; }
  .stats { max-width: 520px; }
  .stats div { align-items: flex-start; padding-left: 14px; }
  .stats div:first-child { padding-left: 0; }
  .work-actions { grid-template-columns: minmax(220px, 300px) auto auto; justify-content: start; }
  .sticky-cta { display: none; }
  body[data-page='work'] .foot { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
  body[data-page='work'] .toast { bottom: calc(24px + env(safe-area-inset-bottom)); }
  .rows-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .rows-grid > .wr:nth-child(2), .rows-grid > li:nth-child(2) .wr { padding-top: 4px; }
  .page-title { font-size: 28px; }
  .page-head { padding: 32px 0 22px; }
  .page-head-tabs { padding-bottom: 0; }
  .seg-tabs { margin-top: 16px; }
  .cont-list { margin: 0; padding: 0; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .chips { margin: 0; padding: 18px 0 4px; flex-wrap: wrap; overflow: visible; }
}
@media (min-width: 960px) {
  .wrap { padding: 0 24px; }
  .work .wrap { max-width: 980px; }
  .sec { margin-top: 48px; }
  .sec-head { margin-bottom: 16px; }
  .sec-head h2 { font-size: 20px; }
  .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 16px; }
  .home .tiles > :nth-child(n + 9) { display: flex; }
  .home .tiles > :nth-child(n + 13) { display: none; }
  .genre-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .gt { min-height: 58px; padding: 0 18px; }
  .gt-name { font-size: 15.5px; }
  .rank-top { grid-template-columns: repeat(3, 180px); gap: 32px; }

  /* 大きな札: 細く短い札を並べ、真ん中の札と左右の札の両端に半分ずつ隣を見せる（2026-11-14 NSJ「pcheroすらいだー3枚+0.50.5で5まいみせてたてはばほそくするのどう？」）。
     --slots は札何枚ぶんの幅を見せるか（2 は1枚＋両端の半分・4 は3枚＋両端の半分）。札の中は札の幅で決める（cqw は札の幅） */
  .hero { --slots: 2; --hg: 12px; --sw: calc((100cqw - var(--slots) * var(--hg)) / var(--slots)); padding-top: 12px; }
  .hero-slide { container-type: inline-size; border-radius: 4px; }
  .hero-inner { --pd: clamp(16px, 5cqw, 24px); --cv: clamp(88px, 29cqw, 148px); --cg: clamp(14px, 4.5cqw, 22px); display: block; padding: var(--pd); }
  .hero-link { grid-template-columns: var(--cv) minmax(0, 1fr); gap: var(--cg); align-items: start; }
  .hero-text { gap: 6px; padding: 2px 0 38px; }
  .hero-meta { font-size: clamp(11px, 3.6cqw, 12.5px); }
  .hero-meta span::before { margin: 0 6px; }
  .hero-catch { font-size: clamp(15px, 4.3cqw, 21px); line-height: 1.5; -webkit-line-clamp: 3; letter-spacing: 0.02em; }
  .hero-title { font-size: 13.5px; }
  .hero-author { font-size: 12px; }
  /* 「第1話から読む」は札の右下 */
  .hero-read { position: absolute; right: var(--pd); bottom: var(--pd); min-height: 30px; padding: 0 10px 0 11px; font-size: 12.5px; }
  .hero-dots { padding-top: 10px; }
}
@media (min-width: 1280px) {
  /* 大きな札: 3枚と両端の半分（札の幅は 300px から） */
  .hero { --slots: 4; }
}
@media (min-width: 1100px) {
  /* メニューを上の帯の中に（下の段は出さない） */
  .mast { position: sticky; top: 0; border-bottom: 1px solid var(--line); }
  .mast-nav { display: flex; align-self: stretch; gap: 2px; margin-left: 20px; }
  .mast-nav a { position: relative; display: flex; align-items: center; padding: 0 11px; text-decoration: none; font-size: 14.5px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
  .mast-nav a:hover, .mast-nav a[aria-current='page'] { color: var(--ink); }
  .mast-nav a[aria-current='page']::after { content: ''; position: absolute; left: 11px; right: 11px; bottom: -1px; height: 2px; background: var(--ink); }
  .mast-search { max-width: 320px; }
  .gnav { display: none; }
}
@media (min-width: 1280px) {
  :root { --edge: 40px; }
  .entry-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .genre-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gt { padding: 0 14px; }
  .gt-name { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ── 会員（docs/account.md）: ログイン・会員・お知らせを止める頁と、本棚のログインの誘い。字の太さは 400・700 だけ。
   形はほかのアプリの画面を見て決めた（2026-11-14。docs/design.md 4「ログイン・会員」）。角は 4px まで・影なし */
.shelf-sync { margin-top: 16px; }
/* 本棚は会員の機能（docs/account.md 4「会員の機能」）。頭の JS が ym_in を見て html.is-in を付け、誘いと本棚を入れ替える（読み込みの後に替わって見えないように） */
.shelf-gate { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; padding: 20px 18px 18px; border: 1px solid var(--line-2); border-radius: 4px; }
html.is-in .shelf-gate { display: none; }
html:not(.is-in) .shelf-own, html:not(.is-in) [data-shelf-tabs] { display: none; }
.shelf-gate-title { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.5; }
.shelf-gate-lead { margin: -6px 0 2px; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.shelf-gate-local { margin: 0; padding: 10px 12px; border-radius: 4px; background: var(--bg-2); font-size: 13.5px; line-height: 1.75; color: var(--ink-2); }
@media (min-width: 720px) { .shelf-gate { max-width: 600px; padding: 24px 24px 22px; } }
/* お気に入りを押した時の誘いの箱 */
.gate-kicker { margin: 4px 0 -8px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.gate-then { margin: 0; padding: 10px 12px; border-radius: 4px; background: var(--bg-2); font-size: 13.5px; line-height: 1.75; color: var(--ink-2); overflow-wrap: anywhere; }
.shelf-sync-in { display: flex; align-items: center; gap: 6px; margin: 0; padding: 2px 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.shelf-sync-in svg { flex: none; color: var(--green); }
.shelf-sync-in a { margin-left: auto; padding: 6px 0; color: var(--ink); font-weight: 700; white-space: nowrap; }
/* 見出しと同じ幅の箱の中で、左に寄せて読みやすい幅に */
.acct-wrap { padding-top: 24px; padding-bottom: 56px; }
.acct-wrap > * { max-width: 480px; }
.acct-box, .acct-start, .acct-out { display: flex; flex-direction: column; gap: 16px; }
.acct-lead { margin: 0; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
/* ログインでできること（絵＋太字の1行＋細い1行） */
.acct-benefits { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0 0 4px; list-style: none; }
.acct-benefits li { display: flex; align-items: flex-start; gap: 12px; }
.acct-bi { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line-2); border-radius: 4px; color: var(--ink); }
.acct-bt { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-top: 1px; }
.acct-bt b { font-size: 14.5px; line-height: 1.55; }
.acct-bt span { font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
/* 入口の並び（Google → または → メール）。アプリの中のブラウザはメールを先に（Google は使えない） */
.acct-methods { display: flex; flex-direction: column; gap: 14px; }
.acct-methods.is-inapp .acct-form { order: -2; }
.acct-methods.is-inapp .acct-or { order: -1; }
.acct-google { gap: 10px; }
.acct-google svg { flex: none; box-sizing: content-box; padding: 3px; border-radius: 50%; background: #fff; }
.acct-google.is-muted { opacity: 0.45; }
.acct-warn { margin: 0; padding: 10px 12px; border-radius: 4px; background: var(--bg-2); font-size: 13px; line-height: 1.75; color: var(--ink-2); }
.acct-or { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--ink-3); font-size: 12.5px; }
.acct-or::before, .acct-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.acct-form { display: flex; flex-direction: column; gap: 10px; }
.acct-label { font-size: 13px; font-weight: 700; color: var(--ink-2); }
/* 字は 16px より小さくしない（iPhone が打つ時に頁を大きくする） */
.acct-input { height: 50px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--surface); color: var(--ink); font-size: 16px; }
.acct-input:focus { outline: none; border-color: var(--ink); }
.acct-free { margin: 0; font-size: 13px; line-height: 1.75; color: var(--ink-3); }
/* コードの画面（1枚に分ける。見出し・送った先・6つの枠・送り直し・届かない時） */
.acct-codestep { gap: 14px; }
.acct-step { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.45; }
.acct-sent { margin: -6px 0 0; font-size: 13.5px; line-height: 1.75; color: var(--ink-2); overflow-wrap: anywhere; }
.acct-sent b { color: var(--ink); }
.otp { position: relative; margin: 4px 0 2px; }
.otp-cells { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.otp-cells span { position: relative; display: grid; place-items: center; height: 58px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--surface); font-family: var(--num); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.otp-cells span:not(:empty) { border-color: var(--ink-3); }
.otp.is-focus .otp-cells span.is-at { border-color: var(--ink); outline: 1px solid var(--ink); outline-offset: -2px; }
.otp.is-focus .otp-cells span.is-at::after { content: ''; width: 2px; height: 26px; background: var(--ink); animation: otp-caret 1s steps(1) infinite; }
.otp.is-bad .otp-cells span { border-color: var(--red); }
@keyframes otp-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .otp.is-focus .otp-cells span.is-at::after { animation: none; } }
/* 本当の欄は枠の上に重ね、字と打つ印を透かす（押すと枠の上のどこでも欄に入る・端末のコードの自動の入力もここに入る） */
.otp-input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; font-size: 16px; outline: none; }
.otp-input::selection { background: transparent; }
.otp-input:-webkit-autofill { transition: background-color 600000s 0s; }
.acct-links { display: flex; justify-content: space-between; gap: 12px; margin: 0; }
.acct-links button, .acct-textbtn { padding: 8px 0; border: 0; background: transparent; color: var(--ink-2); font-family: inherit; font-size: 13.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.acct-links button:disabled { color: var(--ink-3); font-weight: 400; text-decoration: none; cursor: default; }
.acct-help { border-top: 1px solid var(--line); padding-top: 4px; font-size: 14px; color: var(--ink-2); }
.acct-help summary { padding: 10px 0; font-weight: 700; cursor: pointer; }
.acct-help ul { margin: 0 0 4px; padding-left: 1.2em; line-height: 1.85; }
.acct-msg { margin: 0; padding: 10px 12px; border-left: 3px solid var(--red); background: var(--bg-2); font-size: 13.5px; line-height: 1.75; }
.acct-msg[data-notify-msg], .acct-msg[data-unsub-msg] { border-left-color: var(--green); }
.acct-fine { margin: 20px 0 0; font-size: 12px; line-height: 1.8; color: var(--ink-3); }
.acct-fine a { color: var(--ink-2); }
.acct-done { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.acct-done p { flex-basis: 100%; margin: 0; }
.acct-wait { margin: 0; color: var(--ink-3); font-size: 14px; }
/* 会員の頁の頭（メールアドレス・ログインの方法・数の札3つ・この端末をそろえた時刻） */
.acct-me { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.acct-me-email { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.acct-me-via { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }
.acct-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0 0; border: 1px solid var(--line-2); border-radius: 4px; }
.acct-stats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px; }
.acct-stats > div + div { border-left: 1px solid var(--line-2); }
.acct-stats dt { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.acct-stats dd { margin: 0; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
.acct-stats dd b { margin-right: 2px; font-family: var(--num); font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
.acct-synced { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.acct-synced svg { flex: none; color: var(--green); }
.acct-synced .acct-textbtn { margin-left: auto; padding: 6px 0; font-size: 14px; }
.acct-sec { padding: 24px 0; border-bottom: 1px solid var(--line); }
.acct-sec h2 { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.acct-sec > p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.8; color: var(--ink-2); overflow-wrap: anywhere; }
.acct-sec > p b { color: var(--ink); }
.acct-sec-end { border-bottom: 0; }
/* お知らせの種類ごとの切り替え（行の左に名前と1行の説明・右に切り替え。角は 4px まで） */
.acct-toggles { border-top: 1px solid var(--line); }
.acct-toggle { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.acct-toggle:last-child { border-bottom: 0; padding-bottom: 4px; }
.acct-toggle-t { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.acct-toggle-t b { font-size: 15px; line-height: 1.5; }
.acct-toggle-t span { font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.acct-toggle input { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 46px; height: 28px; margin: 0; border: 1px solid var(--line-2); border-radius: 4px; background: var(--bg-2); cursor: pointer; transition: background-color 0.15s, border-color 0.15s; }
.acct-toggle input::before { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 2px; background: var(--surface); border: 1px solid var(--line-2); box-sizing: border-box; transition: transform 0.15s; }
.acct-toggle input:checked { border-color: var(--ink); background: var(--ink); }
.acct-toggle input:checked::before { transform: translateX(18px); border-color: var(--ink); }
.acct-toggle input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.acct-toggle input:disabled { opacity: 0.5; }
.acct-check { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 14.5px; line-height: 1.6; cursor: pointer; }
.acct-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); }
.acct-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 4px 0 0; }
.acct-danger, .acct-textbtn.acct-danger { color: var(--red); }
.btn.acct-danger { border-color: var(--red); }
.acct-page .btn[aria-busy] { opacity: 0.5; pointer-events: none; }
.acct-page .btn:disabled { opacity: 0.4; cursor: default; }
/* ログアウト・会員をやめるの箱（表示の設定と同じ下から出る箱） */
.acct-sheet .sheet-body { gap: 12px; }
.acct-sheet-title { margin: 4px 0 0; font-size: 18px; font-weight: 700; line-height: 1.5; }
.acct-sheet-text { margin: 0; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.acct-lose .nw { white-space: nowrap; }
.acct-lose { margin: 0; padding: 12px 14px 12px 2.2em; border: 1px solid var(--line-2); border-radius: 4px; font-size: 14px; line-height: 1.9; }