/* A to Z guide (guide.html) — screen + print (PDF) */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Rubik, system-ui, -apple-system, "Segoe UI", sans-serif; color: #0f172a; background: #f4f5fb; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: #4f46e5; }
.w { width: min(900px, 100% - 32px); margin: 0 auto; }
.gh { background: #0a0d24; padding: 14px 0; position: sticky; top: 0; z-index: 5; }
.gh .w { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gh img { display: block; }
.gh-r { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lang { display: flex; background: rgba(255,255,255,.1); border-radius: 10px; padding: 3px; }
.lang button { border: 0; background: none; color: #cbd5e1; font: 600 13px Rubik, sans-serif; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.lang button.on { background: #fff; color: #0a0d24; }
.pdf { border: 0; background: #4f46e5; color: #fff; font: 600 14px Outfit, Rubik, sans-serif; padding: 9px 16px; border-radius: 10px; cursor: pointer; }
.cover { padding: 36px 0 18px; }
.cover h1 { font: 800 clamp(30px, 5vw, 46px)/1.08 Outfit, Rubik, sans-serif; letter-spacing: -1px; }
.cover p { color: #475569; font-size: 16.5px; margin-top: 10px; max-width: 640px; }
.toc { background: #fff; border-radius: 18px; padding: 18px 22px; margin-bottom: 18px; box-shadow: 0 6px 18px rgba(15,23,42,.04); }
.toc h2 { font: 700 16px Outfit, sans-serif; margin-bottom: 8px; }
.toc ol { columns: 2; column-gap: 28px; padding-left: 22px; }
.toc li { font-size: 14.5px; padding: 3px 0; break-inside: avoid; }
.toc a { text-decoration: none; color: #334155; }
.sec { background: #fff; border-radius: 22px; padding: clamp(18px, 4vw, 32px); margin-bottom: 16px; box-shadow: 0 6px 18px rgba(15,23,42,.04); scroll-margin-top: 80px; }
.sec h2 { font: 700 clamp(21px, 3vw, 26px)/1.2 Outfit, Rubik, sans-serif; letter-spacing: -.4px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sec h2 .no { font-size: 13px; font-weight: 700; color: #4f46e5; background: #eef2ff; border-radius: 8px; padding: 3px 8px; letter-spacing: 0; }
.body p, .body li { font-size: 15.5px; color: #334155; }
.body p + p { margin-top: 8px; }
.body ul, .body ol { padding-left: 22px; display: grid; gap: 6px; margin: 6px 0; }
.box { background: #eef2ff; border-radius: 14px; padding: 14px 16px; margin: 14px 0 4px; font-size: 15px; color: #312e81; }
.box.warn { background: #fffbeb; color: #78350f; }
.box ul { margin-top: 8px; }
.shots { display: grid; gap: 14px; margin-top: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; }
.shots.n1 { grid-template-columns: minmax(0, 1fr); }
.shots.n1 figure { max-width: 560px; }
.shots figure { background: #f1f5f9; border-radius: 16px; padding: 8px; }
.shots img { display: block; width: 100%; height: auto; border-radius: 10px; }
.gf { color: #5b6677; font-size: 14px; padding: 10px 4px 50px; }
@media (max-width: 600px) { .toc ol { columns: 1; } .gh img { height: 26px; } }

@media print {
  @page { size: A4; margin: 14mm 12mm; }
  body { background: #fff; }
  .gh { display: none; }
  .w { width: 100%; }
  .cover { padding-top: 0; }
  .toc, .sec { box-shadow: none; border: 1px solid #e2e8f0; }
  .sec { break-inside: auto; page-break-before: auto; }
  .sec h2 { break-after: avoid; }
  .shots { grid-template-columns: repeat(3, 1fr); }
  .shots.n1 { grid-template-columns: 1fr; }
  .shots figure { break-inside: avoid; padding: 4px; }
  .shots img { max-height: 105mm; width: auto; max-width: 100%; margin: 0 auto; }
  .shots.n1 figure { max-width: 62%; }
  a { color: inherit; text-decoration: none; }
}