/* ===== パーツ・ライブラリ 共通トークン契約 =====
 * 全 variant パーツはこの変数だけで色/フォント/角丸を参照する（craftはHTML側に凍結）。
 * パーツ側は <link rel="stylesheet" href="../tokens.css"> し、
 * <script> で URL の ?theme= を読んで document.documentElement.dataset.theme に設定する。
 * これで同じ凍結craftが、テーマ切替で一斉に着せ替わる。
 */
:root,
[data-theme="mono"] {
  --ink: #1c2127; --muted: #6b7280;
  --accent: #c0552b;        /* アイコン/CTA/グラフィック（強い） */
  --accent-text: #9a4421;   /* 小さな文字のアクセント（可読性のため濃い） */
  --accent-soft: #f1e7df;   /* 淡いアクセント面 */
  --page: #f5f4f1; --paper: #ffffff; --card: rgba(255,255,255,.6);
  --line: #e6e3dc;
  --display: "Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  --jp: "Noto Sans JP","Hiragino Sans",sans-serif;
  --num: "Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  --radius: 12px; --radius-sm: 6px;
  --shadow: 0 18px 50px rgba(20,28,40,.10);
}
[data-theme="navy"] {        /* 紺×橙（自社ブランド/工務店・士業向け） */
  --ink: #15243c; --muted: #5b6573;
  --accent: #dd5e2b; --accent-text: #c2562a; --accent-soft: #f6ddcf;
  --page: #f6f2ec; --paper: #ffffff; --card: rgba(255,255,255,.66); --line: #e8e2d8;
  --display: "Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  --num: "Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  --radius: 14px; --shadow: 0 22px 60px rgba(20,30,40,.12);
}
[data-theme="ink-gold"] {    /* 黒×金（美容/飲食/高級） */
  --ink: #f4efe6; --muted: #b6ab98;
  --accent: #c8a24a; --accent-text: #cdaa57; --accent-soft: rgba(200,162,74,.16);
  --page: #14110d; --paper: #1b1712; --card: rgba(255,255,255,.05); --line: rgba(244,239,230,.16);
  --display: "Shippori Mincho","Noto Serif JP",serif;
  --jp: "Noto Serif JP","Yu Mincho",serif;
  --num: "Shippori Mincho","Noto Serif JP",serif;
  --radius: 4px; --shadow: 0 26px 70px rgba(0,0,0,.45);
}
[data-theme="forest"] {      /* 深緑（クリニック/自然派/整体） */
  --ink: #16241d; --muted: #5a6b62;
  --accent: #1f7a5a; --accent-text: #1b6e50; --accent-soft: #d9ece4;
  --page: #f2f6f2; --paper: #ffffff; --card: rgba(255,255,255,.66); --line: #dde7e0;
  --display: "Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  --num: "Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  --radius: 16px; --shadow: 0 20px 56px rgba(20,40,30,.10);
}
[data-theme="sakura"] {      /* 薄ピンク×韓国系（まつげ/ネイル/美容サロン） */
  --ink: #2a1b1e; --muted: #9a7b82;
  --accent: #d4607a; --accent-text: #b85469; --accent-soft: #fae8ec;
  --page: #fdf7f8; --paper: #ffffff; --card: rgba(255,255,255,.75); --line: #f0dde1;
  --display: "Cormorant Garamond","Noto Serif JP",serif;
  --jp: "Noto Sans JP","Hiragino Sans",sans-serif;
  --num: "Cormorant Garamond","Noto Serif JP",serif;
  --radius: 16px; --radius-sm: 8px; --shadow: 0 20px 56px rgba(80,20,35,.09);
}
[data-theme="blue-trust"] {  /* 青（医療/IT/法人） */
  --ink: #0f2233; --muted: #56697a;
  --accent: #1f6f8b; --accent-text: #1a5f78; --accent-soft: #dcecf2;
  --page: #f4f7fb; --paper: #ffffff; --card: rgba(255,255,255,.7); --line: #dde6ee;
  --display: "Noto Sans JP","Hiragino Sans",sans-serif;
  --num: "Noto Sans JP",sans-serif;
  --radius: 10px; --shadow: 0 18px 50px rgba(15,40,60,.10);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--page); color: var(--ink);
  font-family: var(--jp); line-height: 1.8; letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}

/* SP はみ出しガード（メディアは枠を超えない） */
img, svg, video, .ph { max-width: 100%; }

/* ダミー画像枠（写真はコードで描かず、本番はデザイナーが差し込む前提） */
.ph { display: grid; place-items: center; background: var(--card); border: 1px dashed var(--line);
  border-radius: var(--radius); color: var(--muted); font-size: 13px; letter-spacing: .04em; aspect-ratio: 16 / 9; overflow: hidden; }
.ph::before { content: "画像が入ります"; opacity: .8; }
.ph--wide { aspect-ratio: 24 / 9; }
.ph--portrait { aspect-ratio: 3 / 4; }
.ph--square { aspect-ratio: 1 / 1; }
.ph--avatar { aspect-ratio: 1 / 1; border-radius: 999px; max-width: 84px; }
.ph--avatar::before { content: ""; }
/* 認定/受賞バッジ枠：公式バッジ画像をデザイナーが差す前提（コードで認定を捏造しない）。月桂冠の薄い輪郭付き。 */
.ph--badge { aspect-ratio: 1 / 1; max-width: 132px; border-style: dotted; border-radius: 999px;
  background:
    radial-gradient(closest-side, transparent 62%, color-mix(in srgb, var(--accent) 12%, transparent) 63% 72%, transparent 73%); }
.ph--badge::before { content: "認定バッジ"; font-size: 11px; }