/* deskloom portfolio — shared tokens & base components
   すべての公開ページ（index.html / screens/*）はこの1枚だけを読み込み、
   トークン・共通コンポーネントの見た目を統一する。値は index.html から
   そのまま移設したもので、ここでの変更は他ページの見た目に波及する。 */

:root{
  --bg:#f7f6f2; --surface:#ffffff; --ink:#1d2321; --muted:#5c6560;
  --line:#e4e2da; --accent:#2f6f4f; --accent-soft:#e7f0ea;
  --hi:#f8cbad; --mid:#fff2cc; --lo:#e2efda; --code-bg:#1e2422; --code-ink:#e8eae6;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#14181a; --surface:#1c2224; --ink:#e9ece9; --muted:#9aa39e;
    --line:#2b3336; --accent:#5fb88b; --accent-soft:#1f2e28; --code-bg:#0f1413; --code-ink:#dfe4e0; }
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
  line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
.wrap{max-width:920px;margin:0 auto;padding:0 20px}
code{background:var(--accent-soft);color:var(--accent);padding:1px 6px;border-radius:5px;font-size:.9em}

.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:26px;margin-bottom:20px}
.card h3{margin:0 0 10px;font-size:1.02rem;color:var(--accent);font-weight:700}
.card p{margin:0 0 10px;color:var(--ink)}
.card ul{margin:0;padding-left:1.2em;color:var(--ink)}
.card li{margin:4px 0}

table{width:100%;border-collapse:collapse;font-size:.9rem;margin:2px 0}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:600;font-size:.82rem}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

.badge{display:inline-block;border-radius:6px;padding:1px 9px;font-size:.8rem;font-weight:700;color:#5a3d2b}
.b-hi{background:var(--hi)} .b-mid{background:var(--mid);color:#6b5a1e} .b-lo{background:var(--lo);color:#3c5a34}

.scroll{overflow-x:auto}

.reply{background:var(--code-bg);color:var(--code-ink);border-radius:10px;padding:16px 18px;
  font-size:.86rem;line-height:1.7;margin-top:14px}
.reply .who{color:var(--accent);font-weight:700;font-size:.8rem;display:block;margin-bottom:6px}

.btnrow{margin-top:18px}
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:#fff;
  text-decoration:none;border-radius:9px;padding:9px 16px;font-weight:700;font-size:.9rem}
.btn:hover{opacity:.9}
.btn.secondary{background:var(--surface);color:var(--accent);border:1px solid var(--accent)}

.muted{color:var(--muted)}

/* --- サブページ（screens/*）共通の追加コンポーネント ---
   index.html には存在しない新規パーツだが、複数のプレビューページで
   共有するためここに置く（トークン・カード等の見た目とは独立）。 */
.notice{background:var(--accent-soft);border-left:4px solid var(--accent);border-radius:8px;
  padding:14px 18px;font-size:.88rem;color:var(--ink);margin:0 0 28px}
.notice strong{color:var(--accent)}
.backlink{display:inline-block;color:var(--muted);text-decoration:none;font-size:.86rem;margin-bottom:18px}
.backlink:hover{color:var(--accent)}
.pagehead{padding:36px 0 8px}
.pagehead .kicker{color:var(--accent);font-weight:700;letter-spacing:.04em;margin:0 0 8px;font-size:.85rem}
.pagehead h1{font-size:1.6rem;line-height:1.4;margin:0 0 12px;font-weight:800}
.pagehead p{font-size:1rem;color:var(--muted);margin:0;max-width:42em}