/* =========================================================================
   Puzzle — 操作マニュアル (Terminal トーン / 可読性優先のドキュメントレイアウト)
   terminal.css と同じトークン。読み物として行間・本文サイズを拡大。
   ========================================================================= */

:root {
  color-scheme: dark;

  --bg:       oklch(0.155 0.004 260);
  --bg-1:     oklch(0.135 0.004 260);
  --panel:    oklch(0.188 0.005 260);
  --panel-2:  oklch(0.225 0.006 260);
  --line:     oklch(1 0 0 / 0.08);
  --line-2:   oklch(1 0 0 / 0.15);

  --text:     oklch(0.97 0.003 260);
  --text-2:   oklch(0.72 0.006 260);
  --text-3:   oklch(0.54 0.006 260);

  --green:    oklch(0.72 0.15 162);
  --green-2:  oklch(0.79 0.15 162);
  --green-ink:oklch(0.16 0.04 165);
  --green-w:  oklch(0.72 0.15 162 / 0.12);
  --green-l:  oklch(0.72 0.15 162 / 0.30);
  --green-glow: oklch(0.72 0.15 162 / 0.25);

  --amber:    oklch(0.85 0.12 90);
  --amber-w:  oklch(0.85 0.12 90 / 0.1);
  --amber-l:  oklch(0.85 0.12 90 / 0.3);

  --font-sans: "Inter", "Noto Sans JP", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --maxw: 1200px;
  --r: 10px;
  --r-lg: 16px;
  --hd-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html { scroll-behavior: auto; } }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.004em;
  overflow-x: clip;
}
::selection { background: var(--green-w); }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img, svg { display: block; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 28px; }
@media (max-width: 640px){ .wrap { padding-inline: 20px; } }

/* ===== header（LP と同型） ===== */
.hd { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--hd-h); display: flex; align-items: center; background: color-mix(in oklch, var(--bg) 86%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.hd .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: 'MuseoModerno', 'Noto Sans JP', sans-serif; font-weight: 600; font-size: 17px; letter-spacing: 0.01em; }
.brand .mk { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(150deg, var(--green-2), oklch(0.6 0.14 162)); position: relative; box-shadow: 0 0 0 1px var(--green-l), 0 0 16px -2px var(--green-glow); flex: none; }
.brand .mk::before { content:""; position:absolute; inset: 6px auto auto 6px; width: 4px; height: 4px; background: var(--bg); }
.brand .mk::after { content:""; position:absolute; inset: auto 6px 6px auto; width: 4px; height: 4px; background: var(--bg); }
.hd-doc { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--text-3); border-left: 1px solid var(--line-2); padding-left: 14px; margin-left: 4px; white-space: nowrap; }
.hd-r { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.hd-r .back { font-size: 13.5px; color: var(--text-2); padding: 7px 11px; border-radius: 7px; transition: color .2s, background-color .2s; white-space: nowrap; }
.hd-r .back:hover { color: var(--text); background: var(--panel); }
.btn-green {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--green-ink);
  background: linear-gradient(150deg, var(--green-2), oklch(0.6 0.14 162));
  border: 1px solid oklch(0.84 0.09 162 / 0.5);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.4), 0 8px 30px -10px var(--green-glow);
  transition: transform .18s, box-shadow .22s;
}
.btn-green svg { width: 15px; height: 15px; }
.btn-green:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.5), 0 14px 40px -12px var(--green-glow); }
@media (max-width: 560px){ .btn-green { display: none; } }

/* ===== layout: sidebar + article ===== */
.doc { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); padding-top: calc(var(--hd-h) + 44px); padding-bottom: 96px; align-items: start; }
@media (max-width: 900px){ .doc { grid-template-columns: minmax(0, 1fr); padding-top: calc(var(--hd-h) + 28px); } }

/* sidebar */
.toc { position: sticky; top: calc(var(--hd-h) + 32px); max-height: calc(100vh - var(--hd-h) - 64px); overflow-y: auto; padding-right: 8px; scrollbar-width: thin; }
@media (max-width: 900px){ .toc { position: static; max-height: none; border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; background: var(--panel); } }
.toc h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); font-weight: 500; margin-bottom: 12px; }
.toc .grp { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--text-3); margin: 16px 0 6px; padding-left: 12px; }
.toc .grp:first-child { margin-top: 0; }
.toc nav { display: flex; flex-direction: column; }
.toc a { display: block; font-size: 13.5px; color: var(--text-2); padding: 6px 12px; border-left: 2px solid var(--line); transition: color .18s, border-color .18s, background-color .18s; line-height: 1.5; }
.toc a:hover { color: var(--text); }
.toc a.on { color: var(--green); border-left-color: var(--green); background: linear-gradient(90deg, var(--green-w), transparent 70%); }
.toc a.sub { padding-left: 24px; font-size: 12.5px; color: var(--text-3); }
.toc a.sub:hover { color: var(--text-2); }
.toc a.sub.on { color: var(--green); }

/* article */
.art { max-width: 760px; }
.art .label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); display: inline-flex; align-items: center; gap: 9px; }
.art .label::before { content: "›"; opacity: .8; }
.art > h1 { font-size: clamp(32px, 4.6vw, 46px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.12; margin-top: 16px; }
.art .lede { color: var(--text-2); font-size: clamp(15.5px, 1.5vw, 17px); margin-top: 16px; line-height: 1.75; text-wrap: pretty; }
.art .meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); margin-top: 18px; display: flex; gap: 18px; flex-wrap: wrap; }

section.ch { padding-top: clamp(48px, 6vw, 72px); }
section.ch:first-of-type { padding-top: clamp(36px, 5vw, 56px); }
.ch-no { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--green); }
section.ch > h2 { font-size: clamp(24px, 2.8vw, 32px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; margin-top: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
section.ch > p, .ch-body > p { color: var(--text-2); font-size: 15.5px; margin-top: 16px; line-height: 1.8; text-wrap: pretty; }
section.ch h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; margin-top: 36px; display: flex; align-items: baseline; gap: 10px; }
section.ch h3 .h-no { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-3); font-weight: 500; }
section.ch h3 + p { margin-top: 10px; }
section.ch h4 { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; margin-top: 26px; color: var(--text); }
section.ch h4 + p { margin-top: 8px; }
.art strong { color: var(--text); font-weight: 600; }
.art em { font-style: normal; color: var(--green); }

/* steps（番号付き手順） */
ol.fsteps { list-style: none; counter-reset: fs; padding: 0; margin-top: 20px; display: flex; flex-direction: column; }
ol.fsteps > li { counter-increment: fs; position: relative; padding: 0 0 26px 52px; }
ol.fsteps > li::before {
  content: counter(fs, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--green);
  border: 1px solid var(--green-l); border-radius: 9px; background: var(--green-w);
}
ol.fsteps > li::after { content: ""; position: absolute; left: 17px; top: 40px; bottom: 6px; width: 1px; background: var(--line); }
ol.fsteps > li:last-child::after { display: none; }
ol.fsteps > li > b { display: block; font-size: 15.5px; font-weight: 600; padding-top: 5px; letter-spacing: -0.01em; }
ol.fsteps > li > p { color: var(--text-2); font-size: 14.5px; margin-top: 6px; line-height: 1.75; max-width: 620px; }

/* 部の区切り */
.part { margin-top: clamp(56px, 8vw, 88px); padding: 18px 0 0; border-top: 2px solid var(--line-2); }
section.ch:first-of-type + .part, .art > .part:first-of-type { margin-top: clamp(40px, 6vw, 64px); }
.part .p-no { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--green); }
.part h2 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; letter-spacing: -0.02em; margin-top: 6px; }

/* アプリ内文言の引用 */
blockquote.uiq { margin-top: 18px; border: 1px solid var(--line); border-left: 3px solid var(--green-l); border-radius: 0 var(--r) var(--r) 0; background: var(--panel); padding: 14px 18px; }
blockquote.uiq p { color: var(--text-2); font-size: 13.5px; line-height: 1.7; margin: 0; }
blockquote.uiq p + p { margin-top: 8px; }
blockquote.uiq b { color: var(--text); }

code { font-family: var(--font-mono); font-size: 0.88em; color: var(--text); background: var(--bg-1); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px 2px; }

/* テーブルの横スクロール退避 */
.dtw { overflow-x: auto; }
.dtw table.dt { min-width: 480px; }

/* 篇内の箇条書き */
.art ul.li { margin-top: 14px; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.art ul.li > li { position: relative; padding-left: 20px; color: var(--text-2); font-size: 14.5px; line-height: 1.7; }
.art ul.li > li::before { content: "–"; position: absolute; left: 2px; color: var(--green); }

/* UI 名の表記 */
.ui { font-family: var(--font-mono); font-size: 0.92em; color: var(--text); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 1px 7px 2px; white-space: nowrap; }
kbd { font-family: var(--font-mono); font-size: 0.85em; color: var(--text); background: var(--bg-1); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; padding: 1px 7px 2px; white-space: nowrap; }

/* callouts */
.note, .warn { display: flex; gap: 12px; border-radius: var(--r); padding: 15px 18px; margin-top: 20px; font-size: 14px; line-height: 1.7; }
.note { background: var(--green-w); border: 1px solid var(--green-l); }
.note svg { width: 17px; height: 17px; color: var(--green); flex: none; margin-top: 3px; }
.note p, .warn p { color: var(--text-2); margin: 0; }
.note b, .warn b { color: var(--text); }
.warn { background: var(--amber-w); border: 1px solid var(--amber-l); }
.warn svg { width: 17px; height: 17px; color: var(--amber); flex: none; margin-top: 3px; }

/* screenshot slots */
.fig { margin: 26px 0 6px; }
.fig .ssbox { position: relative; }
.fig .ss-tag { position: absolute; top: 12px; left: 12px; z-index: 3; pointer-events: none; font-family: var(--font-mono); font-size: 11px; line-height: 1; letter-spacing: 0.06em; color: var(--green); background: oklch(0.155 0.004 260 / 0.85); border: 1px solid var(--green-l); border-radius: 6px; padding: 5px 8px; backdrop-filter: blur(4px); }
/* 画像がドロップ済みの図では撮影管理用チップを隠す（未ドロップの枠だけ表示） */
.fig .ssbox:has(image-slot[src]) .ss-tag { display: none; }
.fig image-slot { display: block; width: 100%; height: auto; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg-1); color: var(--text-2); font-family: var(--font-mono); box-shadow: 0 2px 8px -4px oklch(0 0 0 / 0.4), 0 24px 60px -40px var(--green-glow); }
.fig figcaption { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); margin-top: 10px; }

/* 定義テーブル（印の意味 / 動作環境 など） */
table.dt { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 18px; }
table.dt th { text-align: left; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); font-weight: 500; padding: 9px 12px; border-bottom: 1px solid var(--line-2); }
table.dt td { padding: 11px 12px; border-bottom: 1px solid var(--line); color: var(--text-2); vertical-align: top; line-height: 1.65; }
table.dt td:first-child { color: var(--text); white-space: nowrap; }
table.dt .mkc { font-family: var(--font-mono); font-weight: 700; color: var(--green); font-size: 15px; }

/* 枠色見本 — アプリの UmabanBadge と同じ JRA 伝統色 (Tailwind 相当色) */
.wakurow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.waku {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 700; line-height: 1;
}
.waku-1 { background: #ffffff; color: #18181b; box-shadow: inset 0 0 0 1.5px #a1a1aa; }
.waku-2 { background: #27272a; color: #ffffff; box-shadow: inset 0 0 0 1.5px #71717a; }
.waku-3 { background: #ef4444; color: #ffffff; box-shadow: inset 0 0 0 1.5px #dc2626; }
.waku-4 { background: #3b82f6; color: #ffffff; box-shadow: inset 0 0 0 1.5px #2563eb; }
.waku-5 { background: #facc15; color: #18181b; box-shadow: inset 0 0 0 1.5px #ca8a04; }
.waku-6 { background: #22c55e; color: #ffffff; box-shadow: inset 0 0 0 1.5px #16a34a; }
.waku-7 { background: #f97316; color: #ffffff; box-shadow: inset 0 0 0 1.5px #ea580c; }
.waku-8 { background: #f472b6; color: #18181b; box-shadow: inset 0 0 0 1.5px #db2777; }

/* チャット例 */
.chat-ex { border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg-1); margin-top: 20px; overflow: hidden; }
.chat-ex .bar { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--bg); font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); }
.chat-ex .body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.chat-ex .u, .chat-ex .ai { font-size: 13.5px; line-height: 1.65; max-width: 88%; padding: 9px 14px; border-radius: 10px; }
.chat-ex .u { align-self: flex-end; background: var(--green-w); border: 1px solid var(--green-l); color: var(--text); }
.chat-ex .ai { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); color: var(--text-2); }
.chat-ex .ai .sql { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--green); margin-top: 8px; padding: 8px 10px; background: var(--bg); border-radius: 7px; border: 1px solid var(--line); overflow-x: auto; white-space: pre; }

/* FAQ（トラブルシューティング） */
.qa { border-top: 1px solid var(--line); margin-top: 22px; }
.qa .q { border-bottom: 1px solid var(--line); padding: 18px 2px; }
.qa .q b { display: block; position: relative; padding-left: 26px; font-size: 15px; font-weight: 600; }
.qa .q b::before { content: "Q"; position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-weight: 600; color: var(--green); }
.qa .q p { display: block; position: relative; padding-left: 26px; color: var(--text-2); font-size: 14px; margin-top: 8px; line-height: 1.75; }
.qa .q p::before { content: "A"; position: absolute; left: 0; top: 0; font-family: var(--font-mono); color: var(--text-3); }
.qa .q p + p::before { content: ""; }

/* footer */
.ft { border-top: 1px solid var(--line); padding-block: 40px; }
.ft .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; color: var(--text-3); font-size: 12.5px; }
.ft a { color: var(--text-2); transition: color .2s; } .ft a:hover { color: var(--text); }

/* 次章ナビ */
.next { margin-top: clamp(48px, 6vw, 72px); display: flex; justify-content: flex-end; }
.next a { display: inline-flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 20px; min-width: 220px; background: var(--panel); transition: border-color .2s, background-color .2s; text-align: right; }
.next a:hover { border-color: var(--green-l); }
.next a small { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-3); }
.next a b { font-size: 14.5px; font-weight: 600; color: var(--text); }

/* =========================================================================
   print（PDF 提出用）— 配色をライトに上書きし、画面用ナビ・空の図版枠を除去
   ========================================================================= */
@media print {
  :root {
    color-scheme: light;

    --bg:       #ffffff;
    --bg-1:     #f4f4f4;
    --panel:    #f7f7f7;
    --panel-2:  #ededed;
    --line:     #d4d4d4;
    --line-2:   #bdbdbd;

    --text:     #1a1a1a;
    --text-2:   #2e2e2e;
    --text-3:   #5a5a5a;

    --green:    #0c6b48;
    --green-2:  #0c6b48;
    --green-ink:#ffffff;
    --green-w:  #ffffff;
    --green-l:  #9aa59f;
    --green-glow: transparent;

    --amber:    #8a6400;
    --amber-w:  #ffffff;
    --amber-l:  #c9b27a;
  }

  body { background: #ffffff; color: #1a1a1a; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* 画面用ナビ・固定ヘッダ・サイドバーは印刷では除去 */
  .hd, .toc, .next, .ft { display: none; }

  /* 図版は画像が入っている枠のみ印刷。撮影前の空枠だけ非表示にする */
  .fig:not(:has(image-slot[src])) { display: none; }
  .fig { break-inside: avoid; page-break-inside: avoid; }

  /* 1 カラム化（固定ヘッダ分の余白も解除） */
  .doc { grid-template-columns: minmax(0, 1fr); padding-top: 24px; padding-bottom: 40px; }
  .art { max-width: none; }

  /* リンクは色 + 下線で判別 */
  a { color: #0c6b48; text-decoration: underline; }

  /* 改ページ制御 */
  table, figure, blockquote { page-break-inside: avoid; break-inside: avoid; }
  h2, h3 { page-break-after: avoid; break-after: avoid; }

  /* 色付きボックスは白背景 + 枠線で判読性を確保 */
  .note, .warn, blockquote.uiq { background: #ffffff; border-color: #999999; }
  blockquote.uiq { border-left-color: #666666; }
}