/* Shared reading layout for the expanded Japanese guide. */
html { scroll-behavior: smooth; }
body { overflow-wrap: anywhere; }
a { color: #1d4ed8; text-underline-offset: .2em; }
a:hover { color: #1e3a8a; }
:focus-visible { outline: 3px solid #ea580c; outline-offset: 4px; }
[id] { scroll-margin-top: 1rem; }
.skip-link { position: absolute; left: 1rem; top: -5rem; padding: .7rem; background: white; z-index: 10; }
.skip-link:focus { top: 1rem; }
.wrap > header { padding: clamp(1.3rem, 4vw, 3rem); border-top: 5px solid #1d4ed8; }
.wrap > header h1 { font-size: clamp(1.7rem, 4.8vw, 3rem); line-height: 1.4; letter-spacing: -.02em; }
.wrap > header h1 span { display: inline-block; }
.wrap > header .edition, .edition { color: #1d4ed8; font-size: .85rem; font-weight: 700; letter-spacing: .04em; }
.guide-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0; }
.guide-button { display: inline-block; padding: .65rem 1.05rem; border-radius: .6rem; background: #1d4ed8; color: white; font-weight: 700; text-decoration: none; }
.guide-button:hover { background: #1e40af; color: white; }
.guide-button.secondary { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.index { padding-top: 1rem; border-top: 1px solid #dbeafe; }
.index a { padding: .35rem .65rem; }
.wrap > section { padding: clamp(1rem, 3vw, 2rem); margin-top: 1.5rem; }
h2 { font-size: clamp(1.2rem, 2.7vw, 1.55rem); line-height: 1.55; }
h3 { margin-top: 1.5rem; font-size: 1.08rem; }
li + li { margin-top: .35rem; }
.block-example { padding: 1rem 1.2rem; background: #f1f5f9; border: 1px solid #dbe3ee; border-radius: .7rem; white-space: pre-wrap; overflow-wrap: anywhere; font: .91rem/1.9 ui-monospace, "Hiragino Sans", monospace; }
.block-figure { text-align: left; }
.block-figure img { width: min(100%, 360px); border: 0; border-radius: 0; background: transparent; }
.block-pair, .example-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.block-pair figure { margin: .5rem 0; }
.example-columns > div { min-width: 0; }
table { display: block; max-width: 100%; overflow-x: auto; }
caption { text-align: left; font-weight: 700; margin: .5rem 0; }
th, td { min-width: 8rem; }
.lesson-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.lesson-card { border: 1px solid #dbeafe; border-top: 4px solid #1d4ed8; border-radius: .7rem; padding: 1.1rem; background: #f8fbff; }
.lesson-card h3 { margin-top: .5rem; }
.lesson-card ol { padding-left: 1.2rem; }
.glossary dt { font-weight: 700; color: #1e3a8a; margin-top: 1rem; }
.glossary dd { margin: .2rem 0 .7rem; }
.guide-footer { padding: 2rem 0; color: #475569; text-align: center; font-size: .9rem; }
.guide-footer > a { display: inline-block; margin: .3rem .6rem; }
@media (max-width: 720px) {
  body { padding: .65rem; }
  .lesson-grid, .example-columns, .block-pair { grid-template-columns: 1fr; }
  .index a { font-size: .84rem; }
  .wrap > section { border-radius: .7rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  body { padding: 0; background: white; }
  .skip-link, .guide-actions, .index, .catalog-controls, .guide-footer { display: none !important; }
  .wrap > section { border: 0; padding: .4rem 0; }
  .block-example, figure, .lesson-card { break-inside: avoid; }
  table { display: table; }
}