/* 日本文化ナビ — 印刷用（A4 / Letter にちょうど2枚）
   紙の大きさは mm で固定。文字は --fs、画像の高さは --art-h、段落の間は --gx を print.js が決める。 */
:root {
  --ink: #1d1b18;
  --ink2: #48433c;
  --ink3: #7b736a;
  --line: #ddd6ca;
  --wash: #f6f2ea;
  --ai: #1b3a5c;
  --shu: #c8402f;
  --pw: 210mm;
  --ph: 297mm;
  --sans: "Inter", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --jsans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --jserif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
body[data-paper="letter"] { --pw: 215.9mm; --ph: 279.4mm; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #e9e5de; color: var(--ink);
  font-family: var(--sans); line-height: 1.6;
  font-feature-settings: "palt" 1;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
p, h1, h2, ul, dl, dd, figure { margin: 0; padding: 0; }
ul { list-style: none; }
i { font-style: normal; }

/* ------------------------------------------------ 画面だけの操作バー */
.pt-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 10px 16px; background: #1b3a5c; color: #fff;
  font-size: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.pt-back { color: #fff; opacity: .85; text-decoration: none; font-size: 13px; }
.pt-back:hover { opacity: 1; text-decoration: underline; }
.pt-title { font-weight: 700; margin-right: auto; display: flex; align-items: baseline; gap: 8px; }
.pt-title small { font-weight: 500; opacity: .75; font-size: 12.5px; }
.pt-paper { display: flex; align-items: center; gap: 4px; font-size: 12.5px; }
.pt-paper span { opacity: .75; margin-right: 4px; }
.pt-paper button {
  font: inherit; color: #fff; background: transparent; cursor: pointer;
  border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 3px 11px;
}
.pt-paper button[aria-pressed="true"] { background: #fff; color: #1b3a5c; border-color: #fff; font-weight: 600; }
.pt-print {
  font: inherit; font-weight: 700; cursor: pointer;
  background: #c8402f; color: #fff; border: 0; border-radius: 999px; padding: 9px 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.pt-print:hover { background: #b33626; }
.pt-print:disabled { opacity: .6; cursor: progress; }
.pt-tip { max-width: 820px; margin: 14px auto 0; padding: 0 16px; font-size: 12.5px; color: #5b554c; line-height: 1.7; }
.pt-status { text-align: center; font-size: 12.5px; color: #7b736a; margin: 8px 0 0; min-height: 1.2em; }
body:not(.is-fitting) .pt-status { visibility: hidden; }

.pages { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 12px 16px 60px; }
.sheet-wrap { box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 10px 30px rgba(0,0,0,.12); background: #fff; overflow: hidden; }
.sheet { transform-origin: 0 0; }
body.is-fitting .pages { opacity: 0; }

/* ------------------------------------------------ 紙 */
.sheet {
  --fs: 1;
  --gx: 0px;
  width: var(--pw);
  /* ぴったりの高さにすると、端数で白紙の3枚目が出るブラウザがある */
  height: calc(var(--ph) - 1mm);
  padding: 11mm 14mm 8mm;
  display: flex; flex-direction: column;
  overflow: hidden; position: relative;
  background: #fff; color: var(--ink);
}
/* 紙の上端にカテゴリ色の細い帯 */
.sheet::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2.2mm; background: var(--k, var(--ai)); }

.sh-top {
  display: flex; align-items: center; gap: 4mm;
  padding-bottom: 2.4mm; border-bottom: .25mm solid var(--line);
  font-size: 7.6pt; color: var(--ink3); letter-spacing: .02em;
}
.sh-brand { display: flex; align-items: center; gap: 1.6mm; color: var(--ink); }
.sh-brand svg { width: 5mm; height: 5mm; }
.sh-brand b { font-family: var(--jserif); font-weight: 700; font-size: 9pt; }
.sh-brand small { font-size: 7pt; color: var(--ink3); font-weight: 500; }
.sh-label { margin-left: auto; font-family: var(--jsans); font-weight: 500; color: var(--ink2); }
.sh-label span { font-family: var(--sans); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--k); }
.sh-no { font-weight: 600; color: var(--ink2); padding-left: 3mm; border-left: .25mm solid var(--line); }

.sh-foot {
  display: flex; justify-content: space-between; gap: 4mm;
  margin-top: 2.6mm; padding-top: 2mm; border-top: .25mm solid var(--line);
  font-size: 6.8pt; color: var(--ink3); letter-spacing: .02em;
}

/* ------------------------------------------------ 見出し（1枚目） */
.sh-title {
  display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 1mm 6mm;
  padding: 5mm 0 4mm;
}
.t-ja { display: flex; flex-direction: column; padding-right: 6mm; border-right: .5mm solid var(--k); }
.t-kana { font-family: var(--jsans); font-size: 8.5pt; color: var(--ink3); letter-spacing: .12em; line-height: 1.2; }
.t-word { font-family: var(--jserif); font-weight: 700; font-size: 30pt; line-height: 1.12; letter-spacing: .04em; }
.t-en { display: flex; flex-direction: column; min-width: 0; padding-bottom: .8mm; }
.t-romaji { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 21pt; line-height: 1.1; color: var(--ink); }
.t-gloss { font-family: var(--sans); font-size: 10.5pt; color: var(--ink2); margin-top: 1mm; line-height: 1.3; }
.t-meta {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1.5mm 3mm; margin-top: 1.6mm;
  font-size: 7.3pt; color: var(--ink3);
}
.t-meta > span { border: .25mm solid var(--line); border-radius: 99px; padding: .3mm 2.4mm; }

/* 画像。高さは print.js が詰める（はみ出るときだけ上下を少し落とす） */
.sh-art {
  height: var(--art-h, 100mm); flex: none;
  border-radius: 1.6mm; overflow: hidden; background: var(--wash);
}
.sh-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.sh-art-none {
  height: 52mm; display: flex; align-items: center; justify-content: center; gap: 8mm;
  background: color-mix(in srgb, var(--k) 10%, #fff); color: var(--k);
}
.sh-art-none span { font-family: var(--jserif); font-size: 64pt; font-weight: 700; opacity: .25; }
.sh-art-none b { font-family: var(--jserif); font-size: 26pt; color: var(--ink); }

/* ------------------------------------------------ 本文 */
.sh-flow { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; padding-top: calc(4.5mm * var(--fs)); }
.sh-flow > * + *, .ps-ja > * + * { margin-top: calc(4.2mm * var(--fs) + var(--gx)); }

.ps-h {
  display: flex; align-items: center; gap: 2.2mm;
  font-family: var(--sans); font-weight: 700; font-size: calc(8.2pt * var(--fs));
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink2);
  margin-bottom: calc(1.5mm * var(--fs));
}
.ps-h i {
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(5.4mm * var(--fs)); height: calc(5.4mm * var(--fs)); border-radius: 50%;
  background: var(--k); color: #fff;
  font-family: var(--jserif); font-size: calc(8pt * var(--fs)); font-weight: 700; letter-spacing: 0;
}
.ps-h small { font-family: var(--jsans); font-weight: 500; font-size: calc(7.2pt * var(--fs)); color: var(--ink3); letter-spacing: .04em; text-transform: none; }
.ps-h-ja { text-transform: none; letter-spacing: .06em; font-family: var(--jsans); }
.ps-h-ja small { font-family: var(--sans); letter-spacing: .06em; text-transform: uppercase; font-size: calc(6.8pt * var(--fs)); }

.sheet-1 .ps p {
  font-family: var(--serif); font-size: calc(10.4pt * var(--fs)); line-height: 1.56; color: var(--ink);
  text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}
.sheet-1 .ps p + p { margin-top: calc(1.8mm * var(--fs)); }
.sheet-1 .ps-speech p + p { text-indent: 1.4em; margin-top: calc(.6mm * var(--fs)); }
.ps p.one {
  font-size: calc(13.2pt * var(--fs)) !important; line-height: 1.4 !important;
  font-weight: 600; text-align: left !important;
  padding: calc(1.6mm * var(--fs)) 0 calc(1.6mm * var(--fs)) 3.6mm; border-left: .9mm solid var(--k);
}

.sheet-2 .ps p {
  font-family: var(--jserif); font-size: calc(9.6pt * var(--fs)); line-height: 1.82; color: var(--ink);
  text-align: justify; line-break: strict;
}
.sheet-2 .ps p + p { text-indent: 1em; }
.sheet-2 .ps p.one { font-size: calc(11.6pt * var(--fs)) !important; line-height: 1.6 !important; text-indent: 0; }

/* 2枚目の見出し */
.sh-title-sm { display: block; padding: 4mm 0 0; }
.t-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1mm 3mm; }
.t-line b { font-family: var(--jserif); font-size: 17pt; font-weight: 700; letter-spacing: .04em; line-height: 1.2; }
.t-line .t-kana { font-size: 8pt; }
.t-line .t-romaji { font-size: 12.5pt; }
.t-line .t-gloss { font-size: 9pt; margin: 0; }
.t-hook {
  margin-top: 2.2mm; padding: 2mm 3.2mm; border-radius: 1.2mm;
  background: color-mix(in srgb, var(--k) 8%, #fff);
  font-family: var(--jsans); font-size: 8.4pt; line-height: 1.6; color: var(--ink2);
}

/* 2枚目の付録（聞かれたら・誤解・フレーズ・豆知識） */
.blk-h {
  display: flex; align-items: baseline; gap: 2.4mm;
  font-family: var(--jsans); font-weight: 700; font-size: calc(9pt * var(--fs)); color: var(--ink);
  padding-bottom: calc(1.2mm * var(--fs)); margin-bottom: calc(1.8mm * var(--fs));
  border-bottom: .3mm solid var(--k);
}
.blk-h small { font-family: var(--sans); font-weight: 600; font-size: calc(6.8pt * var(--fs)); color: var(--ink3); letter-spacing: .08em; text-transform: uppercase; }

.qa + .qa { margin-top: calc(2.2mm * var(--fs)); padding-top: calc(2.2mm * var(--fs)); border-top: .2mm dashed var(--line); }
.qa p { font-size: calc(8.6pt * var(--fs)); line-height: 1.5; }
.qa i {
  display: inline-block; width: 1.3em; font-weight: 700; color: var(--k); font-family: var(--sans);
}
.qa-q { font-family: var(--sans); font-weight: 600; color: var(--ink); padding-left: 1.3em; text-indent: -1.3em; }
.qa-a { font-family: var(--serif); color: var(--ink); padding-left: 1.3em; text-indent: -1.3em; margin-top: calc(.5mm * var(--fs)); }
.qa-ja {
  font-family: var(--jsans); color: var(--ink2); font-size: calc(7.8pt * var(--fs)) !important; line-height: 1.6 !important;
  margin: calc(.8mm * var(--fs)) 0 0 calc(8.6pt * 1.3 * var(--fs));
}
.qa-qja { color: var(--ink3); margin-right: .6em; }
.qa-qja::after { content: " →"; }

.myth { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; }
.myth p {
  padding: calc(2mm * var(--fs)) 2.8mm; border-radius: 1.2mm;
  font-family: var(--serif); font-size: calc(8.4pt * var(--fs)); line-height: 1.5;
}
.myth i { display: block; font-family: var(--sans); font-weight: 700; font-size: calc(6.6pt * var(--fs)); letter-spacing: .12em; margin-bottom: .6mm; }
.myth small { display: block; font-family: var(--jsans); font-size: calc(7.4pt * var(--fs)); color: var(--ink2); margin-top: .8mm; line-height: 1.55; }
.m-x { background: #f4f1ec; }
.m-x i { color: var(--ink3); }
.m-x span { color: var(--ink2); text-decoration: line-through; text-decoration-color: rgba(200,64,47,.45); text-decoration-thickness: .2mm; }
.m-o { background: color-mix(in srgb, var(--k) 9%, #fff); }
.m-o i { color: var(--k); }

.ph { display: grid; grid-template-columns: 1fr 1fr; gap: calc(1.6mm * var(--fs)) 5mm; }
.ph li { padding-left: 3mm; border-left: .5mm solid color-mix(in srgb, var(--k) 45%, #fff); break-inside: avoid; }
.ph span { display: block; font-family: var(--serif); font-size: calc(8.8pt * var(--fs)); line-height: 1.4; color: var(--ink); }
.ph small { display: block; font-family: var(--jsans); font-size: calc(7.5pt * var(--fs)); line-height: 1.45; color: var(--ink2); margin-top: .3mm; }

.tr { font-family: var(--jsans); font-size: calc(8.2pt * var(--fs)); line-height: 1.75; color: var(--ink2); text-align: justify; }

/* ------------------------------------------------ クレジット（2枚目の下） */
.credit {
  flex: none; display: flex; gap: 5mm; align-items: stretch;
  margin-top: 3.4mm; padding: 3mm 3.6mm; border-radius: 1.6mm;
  background: var(--wash); border: .25mm solid var(--line);
}
.cr-body { flex: 1; min-width: 0; font-size: 6.9pt; line-height: 1.55; color: var(--ink2); }
.cr-src { font-family: var(--jsans); color: var(--ink); margin-bottom: 1.2mm; }
.cr-src b { display: inline-block; width: 5em; font-weight: 700; color: var(--ink); }
.cr-src span { display: block; padding-left: 5em; color: var(--ink2); word-break: break-all; font-family: var(--sans); }
.cr-list { display: grid; gap: .3mm; font-family: var(--jsans); }
.cr-list div { display: flex; align-items: baseline; }
.cr-list dt { flex: none; width: 5em; margin: 0; color: var(--ink3); font-weight: 500; }
.cr-list dd { min-width: 0; }
.cr-copy { margin-top: 1.2mm; font-size: 6.5pt; color: var(--ink3); }
.cr-qr { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1mm; width: 22mm; }
.cr-qr .qr { width: 19mm; height: 19mm; display: block; }
.cr-qr span { font-family: var(--jsans); font-size: 6.2pt; line-height: 1.35; color: var(--ink2); text-align: center; }

/* ------------------------------------------------ 印刷 */
@media print {
  html, body { background: #fff; }
  .pt-bar, .pt-tip, .pt-status { display: none !important; }
  .pages { display: block; padding: 0; gap: 0; opacity: 1 !important; }
  .sheet-wrap { box-shadow: none; height: auto !important; width: auto !important; overflow: visible; }
  .sheet { transform: none !important; break-after: page; page-break-after: always; }
  .sheet-wrap:last-child .sheet { break-after: auto; page-break-after: auto; }
}