/* IDATSUKA — 読む（III / Read）：漫画の作品一覧・話数一覧・各話の閲覧ページ・準備中ページ。
   css/tokens.css → site.css → page.css の上に重ねる。HTML は tools/build-manga.py が生成する（manga-read.html だけ手書き）。
   ページの絵は js/manga-reader.js が <canvas> に描く。ここで選択・印刷できる形にしてはいけない。
   箱・角丸・影は使わない。区切りは 1px の罫線だけ。 */

/* ── 表紙（canvas） ── */
.mg-cover { display: block; width: 100%; aspect-ratio: 2 / 3; height: auto; }
canvas.mg-cover { height: auto; }

/* ── 作品一覧・話数一覧：特集（表紙 8・情報 4） ── */
.mg-feature-pic { cursor: pointer; max-height: 78vh; }
.mg-feature-pic canvas.mg-cover { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; object-position: right center; }
.mg-feature .ed-info h3 a { text-decoration: none; transition: color var(--d-1) var(--ease-calm); }
.mg-feature .ed-info h3 a:hover { color: var(--c-accent); }
@media (max-width: 760px) {
  .mg-feature-pic { justify-self: start; width: min(100%, 320px); max-height: none; }
  .mg-feature-pic canvas.mg-cover { object-position: left center; }
}

/* 作品の題（話数一覧のタイトル行）。h1 は作品名なので、部屋のタイトルより少し小さく */
.mg-crumb { display: block; margin-bottom: 18px; font-family: var(--f-serif); font-size: 15px; letter-spacing: .24em; color: var(--c-accent); text-decoration: none; transition: color var(--d-1) var(--ease-calm); }
.mg-crumb:hover { color: var(--c-fg); }
.mg-title h1 { font-size: clamp(34px, 6.4vw, 80px); letter-spacing: .1em; }
@media (max-width: 760px) { .mg-title h1 { font-size: 34px; letter-spacing: .08em; } }
.mg-bar-link { font-size: 11.5px; }

/* 話の一覧：公開していない話はリンクにしない。薄く表示するだけ */
.mg-ep-list { margin-top: 0; border-top: 0; }
.mg-ep.is-locked { cursor: default; }
.mg-ep.is-locked .pg-rno, .mg-ep.is-locked .pg-rt, .mg-ep.is-locked .pg-rd { color: var(--c-sub); opacity: .62; }
a.mg-ep .pg-rd { color: var(--c-accent); }

/* お読みいただく前に */
.mg-rules-text { max-width: 46em; padding-top: 18px; font-size: 13.5px; line-height: 2.1; letter-spacing: .04em; color: var(--c-sub); }

/* ── 各話のページ（閲覧・準備中）の見出し ── */
.mg-reader-page main, .mg-soon-page main { padding-top: calc(var(--head-h) + env(safe-area-inset-top, 0px) + clamp(40px, 6vw, 80px)); }
.mg-head { width: min(100% - 40px, 820px); margin: 0 auto; padding: 0 0 clamp(32px, 4vw, 48px); text-align: center; }
.mg-head > a { font-family: var(--f-serif); font-size: 14px; letter-spacing: .22em; color: var(--c-sub); text-decoration: none; transition: color var(--d-1) var(--ease-calm); }
.mg-head > a:hover { color: var(--c-accent); }
.mg-head h1 { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--c-fg); font-family: var(--f-mincho); font-weight: 400; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.5; letter-spacing: .14em; }
.mg-head #rdEp { margin-top: 8px; font-family: var(--f-mincho); font-size: 16px; letter-spacing: .12em; color: var(--c-sub); }
.mg-hint { margin-top: 16px; font-size: 12px; letter-spacing: .08em; color: var(--c-sub); }
.mg-is-locked .mg-hint, .mg-is-locked .mg-bar { display: none; }

/* 前後の話・話数一覧（文字だけ） */
.mg-episode-navigation { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 10px 32px; margin: 24px auto 0;
  padding: 14px 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  font-size: 12.5px; letter-spacing: .14em; color: var(--c-sub); }
.mg-episode-navigation a { display: inline-block; color: var(--c-fg); text-decoration: none;
  border-bottom: 1px solid currentColor; line-height: 1.6; padding: 6px 0 2px; transition: color var(--d-1) var(--ease-calm); }
.mg-episode-navigation a:hover { color: var(--c-accent); }
.mg-soon-page main > .mg-episode-navigation { width: min(100% - 40px, 820px); margin: 0 auto clamp(56px, 7vw, 96px); }

/* ページ移動 */
.mg-page-jump { display: flex; align-items: baseline; justify-content: center; gap: 14px; margin-top: 18px; font-size: 12.5px; letter-spacing: .14em; color: var(--c-sub); }
.mg-page-jump select { appearance: none; min-height: 40px; padding: 8px 22px 6px 0; border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0;
  background: transparent linear-gradient(45deg, transparent 50%, var(--c-sub) 50%) right 6px center / 5px 5px no-repeat,
              linear-gradient(-45deg, transparent 50%, var(--c-sub) 50%) right 1px center / 5px 5px no-repeat;
  color: var(--c-fg); font: inherit; font-size: 13px; letter-spacing: .08em; cursor: pointer; }
.mg-page-jump select:focus { outline: 0; border-bottom-color: var(--c-accent); }
.mg-page-jump select option { background: var(--c-bg); color: var(--c-fg); }

/* ── 閲覧：1ページずつ縦に並ぶ canvas ── */
#reader { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 0 12px;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* PC では 1 ページが 1 画面に収まる幅、スマホでは全幅 */
.mg-page { position: relative; margin: 0; width: min(100%, 820px, calc((100svh - 88px) * 2 / 3)); scroll-margin-top: 20px;
  outline: 1px solid var(--c-line); outline-offset: -1px; }
.mg-page canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .35s; pointer-events: none; }
.mg-page.on canvas { opacity: 1; }
.mg-page.on { outline-color: transparent; }
/* 全ページの上に透明な膜：長押しやドラッグはここに当たり、絵には届かない */
.mg-page::after { content: ''; position: absolute; inset: 0; }

/* 終わり */
.mg-end { width: min(100% - 40px, 820px); margin: 0 auto; padding: clamp(56px, 7vw, 88px) 0 clamp(72px, 9vw, 110px); text-align: center; }
.mg-end .fin { font-family: var(--f-mincho); font-size: 18px; letter-spacing: .4em; color: var(--c-sub); }
.mg-end .fin + div { margin: 28px 0 26px; }
.mg-end .fin + div .mg-episode-navigation { margin-top: 0; }
.mg-end .back { display: inline-block; font-size: 12px; letter-spacing: .22em; color: var(--c-fg); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; transition: color var(--d-1) var(--ease-calm); }
.mg-end .back:hover { color: var(--c-accent); }
.mg-next-lock { font-family: var(--f-mincho); color: var(--c-sub); letter-spacing: .1em; }

/* 読み込めない・公開前（js/manga-reader.js が描く） */
.mg-locked { min-height: 50vh; display: grid; place-content: center; justify-items: center; gap: 24px; padding: 40px 20px; text-align: center;
  font-family: var(--f-mincho); letter-spacing: .1em; color: var(--c-sub); }
.mg-locked .h-seal { font-family: var(--f-mincho); font-size: 40px; line-height: 1; color: var(--c-accent); }
.mg-notice { padding: 0 20px 40px; text-align: center; font-size: 12px; letter-spacing: .06em; color: var(--c-sub); }

/* 下の帯：一覧へ・進み具合・ページ数（親指の届くところ）。ヘッダーと同じく罫線 1 本の帯 */
.mg-reader-page { padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); }
.mg-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 310; display: flex; align-items: center; justify-content: center; gap: 24px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(var(--c-bg-rgb), .94); border-top: 1px solid var(--c-line);
  font-family: var(--f-serif); font-size: 14px; letter-spacing: .16em; color: var(--c-sub); white-space: nowrap; }
.mg-bar a { font-family: var(--f-mincho); font-size: 12.5px; letter-spacing: .2em; color: var(--c-fg); text-decoration: none; transition: color var(--d-1) var(--ease-calm); }
.mg-bar a:hover { color: var(--c-accent); }
.mg-bar .track { position: relative; width: min(320px, 40vw); height: 1px; overflow: hidden; background: var(--c-line); }
.mg-bar .track i { position: absolute; inset: 0; background: var(--c-accent); transform-origin: left; transform: scaleX(0); transition: transform .3s; }
#rdCount { min-width: 4.6em; text-align: right; font-variant-numeric: tabular-nums lining-nums; }

/* 覆い：ウィンドウが離れたとき・撮影キーのとき */
.mg-shield { position: fixed; inset: 0; z-index: 400; display: none; place-content: center; text-align: center;
  background: var(--c-bg); color: var(--c-sub); font-family: var(--f-mincho); letter-spacing: .12em; line-height: 2.2; }
html.mg-shielded .mg-shield { display: grid; }
html.mg-shielded #reader, html.mg-shielded canvas[data-manga-cover] { visibility: hidden; }
@media print {
  #reader, canvas[data-manga-cover], .mg-bar { display: none !important; }
  .mg-reader-page main::before { content: 'この作品は印刷できません。'; display: block; padding: 40px; }
}

@media (max-width: 900px) { .mg-hint .kb { display: none; } }
@media (max-width: 600px) {
  #reader { gap: 6px; }
  .mg-bar { gap: 16px; }
  .mg-bar .track { width: 30vw; }
  .mg-episode-navigation { gap: 6px 22px; }
}

/* ── 準備中の話：表紙と一言だけ。読むものは出さない ── */
.mg-soon { display: grid; justify-items: center; gap: 26px; padding: 0 20px clamp(48px, 6vw, 72px); text-align: center; }
.mg-soon .mg-cover { width: min(300px, 70vw); }
.mg-soon-note { font-family: var(--f-mincho); line-height: 2; letter-spacing: .1em; color: var(--c-sub); }
.mg-soon-note b { display: block; margin-bottom: 4px; font-weight: 400; letter-spacing: .3em; color: var(--c-accent); }

/* ── 感想と評価（js/manga-comments.js） ── */
.mg-talk { width: min(100% - 40px, 760px); margin: 0 auto; padding: 24px 0 90px; }
.mg-talk h2 { padding: 16px 0; border-top: 1px solid var(--c-fg); border-bottom: 1px solid var(--c-line);
  font-family: var(--f-mincho); font-weight: 400; font-size: 18px; letter-spacing: .2em; }
.tk-summary { display: grid; grid-template-columns: auto 1fr; gap: 20px 48px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--c-line); }
.tk-avg { display: grid; justify-items: start; gap: 6px; }
.tk-avg b { font-family: var(--f-serif); font-weight: 300; font-size: 64px; line-height: 1; color: var(--c-accent); }
.tk-avg span:last-child { font-size: 12.5px; letter-spacing: .1em; color: var(--c-sub); }
.tk-avg-stars { --v: 0%; font-size: 18px; letter-spacing: .12em; line-height: 1;
  background: linear-gradient(90deg, var(--c-accent) var(--v), var(--c-line) var(--v)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tk-avg-stars::before { content: '★★★★★'; }
.tk-dist { display: grid; gap: 6px; }
.tk-dist li { display: grid; grid-template-columns: 2.6em 1fr 2em; gap: 10px; align-items: center; font-family: var(--f-serif); font-size: 13px; color: var(--c-sub); }
.tk-dist i { --w: 0%; height: 1px; background: linear-gradient(90deg, var(--c-accent) var(--w), var(--c-line) var(--w)); transition: background .4s; }
.tk-dist em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }

.tk-form { display: grid; gap: 22px; padding: 30px 0 34px; border-bottom: 1px solid var(--c-line); }
.tk-stars { border: 0; margin: 0; padding: 0; min-width: 0; }
.tk-row { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.tk-stars legend { padding: 0; margin-bottom: 8px; font-size: 12px; letter-spacing: .16em; color: var(--c-sub); }
.tk-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tk-stars label { padding: 4px 3px; font-size: 30px; line-height: 1; color: var(--c-sub); cursor: pointer; transition: color .2s, transform .2s; }
.tk-stars label:hover, .tk-stars label:hover ~ label, .tk-stars input:checked ~ label { color: var(--c-accent); }
.tk-stars input:focus-visible + label { outline: 1px solid var(--c-accent); outline-offset: 2px; }
.tk-stars input:checked + label { transform: scale(1.08); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tk-field { display: grid; gap: 8px; font-size: 12px; letter-spacing: .16em; color: var(--c-sub); }
.tk-field input, .tk-field textarea { width: 100%; appearance: none; background: transparent; color: var(--c-fg); border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0;
  padding: 10px 0; font: inherit; font-size: 15px; letter-spacing: .04em; resize: vertical; -webkit-user-select: text; user-select: text;
  transition: border-color var(--d-1) var(--ease-calm); }
.tk-field textarea { line-height: 1.9; }
.tk-field input:focus, .tk-field textarea:focus { outline: none; border-bottom-color: var(--c-accent); }
.tk-field ::placeholder { color: var(--c-sub); opacity: .7; }
.tk-field small { justify-self: end; font-size: 11.5px; color: var(--c-sub); }
.tk-check { display: flex; gap: 8px; align-items: center; font-size: 13px; letter-spacing: .08em; color: var(--c-sub); }
.tk-check input { accent-color: var(--c-accent); }
.tk-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.tk-state { font-size: 13px; letter-spacing: .06em; color: var(--c-sub); }
.tk-state[data-kind="ok"], .tk-state[data-kind="err"] { color: var(--c-accent); }
.tk-state[data-kind="off"] { color: var(--c-sub); }
.tk-rule { font-size: 12px; line-height: 1.9; color: var(--c-sub); }
.tk-form :disabled { opacity: .45; cursor: not-allowed; }

.tk-item { padding: 22px 0; border-bottom: 1px solid var(--c-line); }
.tk-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 12.5px; color: var(--c-sub); }
.tk-meta .tk-s { color: var(--c-accent); letter-spacing: .08em; }
.tk-meta b { font-weight: 400; color: var(--c-fg); }
.tk-meta time { font-family: var(--f-serif); letter-spacing: .14em; }
.tk-body { margin-top: 10px; font-size: 14.5px; line-height: 2; white-space: pre-wrap; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }
.tk-spoiler summary { margin-top: 10px; font-size: 13px; letter-spacing: .06em; color: var(--c-sub); cursor: pointer; }
.tk-empty { padding: 26px 0; font-family: var(--f-mincho); letter-spacing: .1em; color: var(--c-sub); }
@media (max-width: 600px) {
  .tk-summary { grid-template-columns: 1fr; gap: 18px; }
  .tk-stars label { font-size: 34px; padding: 4px 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .mg-page canvas, .mg-bar .track i, .tk-stars label, .tk-dist i, .mg-crumb, .mg-head > a, .mg-episode-navigation a, .mg-end .back, .mg-bar a, .tk-field input, .tk-field textarea { transition: none; }
  .tk-stars input:checked + label { transform: none; }
}