/* インフルエンサー側のトークン。**正典は docs/33、値の実体は design/liff-home.html の :root**。
 *
 * ここを直すときは docs/33 を先に直す。**#fff / #000 / rgba() を直接書かない**
 * （例外は写真の上に乗るバッジだけ）。ダークではボタンの文字が白ではなく
 * --on-brand（濃い臙脂）になるため、必ず --on-* を使う。
 *
 * サイズは docs/33 2-3 の階段だけを使う。rem の小数（.7rem = 9.8px）は使わない。
 * 23種類のサイズが混ざって「見づらい」と言われた経緯がある。
 */

:root{
  --bg:#FFFFFF; --card:#FFFFFF; --sunk:#F0EEE9;
  --ink:#111111; --ink2:#5F6368; --ink3:#767A7F;
  --line:#E8E8EA; --line2:#F1F1F3;
  --brand:#D0356A; --on-brand:#FFFFFF; --brand-ink:#B02A59; --brand-bg:#FDEEF3;
  --hot:#D0356A; --hot-bg:#FDEEF3; --on-hot:#FFFFFF;
  --warn:#96620F; --warn-bg:#FBF3E3;
  --ok:#1E7F46; --ok-bg:#E6F4EB; --on-ok:#FFFFFF;
  --sans:"Noto Sans JP","Hiragino Sans",system-ui,sans-serif;
}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0F0F10; --card:#0F0F10; --sunk:#1A1A1C;
  --ink:#F5F5F5; --ink2:#A8ABB0; --ink3:#8A8D91;
  --line:#26272A; --line2:#1C1D20;
  --brand:#FF6B9E; --on-brand:#2A0A17; --brand-ink:#FF8FB5; --brand-bg:#2B1520;
  --hot:#FF6B9E; --hot-bg:#2B1520; --on-hot:#2A0A17;
  --warn:#E0B060; --warn-bg:#2A2214;
  --ok:#5DC585; --ok-bg:#0F2A1A; --on-ok:#06210F;
}}

:root[data-theme="dark"]{
  --bg:#0F0F10; --card:#0F0F10; --sunk:#1A1A1C;
  --ink:#F5F5F5; --ink2:#A8ABB0; --ink3:#8A8D91;
  --line:#26272A; --line2:#1C1D20;
  --brand:#FF6B9E; --on-brand:#2A0A17; --brand-ink:#FF8FB5; --brand-bg:#2B1520;
  --hot:#FF6B9E; --hot-bg:#2B1520; --on-hot:#2A0A17;
  --warn:#E0B060; --warn-bg:#2A2214;
  --ok:#5DC585; --ok-bg:#0F2A1A; --on-ok:#06210F;
}

*{box-sizing:border-box}
html,body{margin:0}
/* クラス側の display が [hidden] に勝ってしまう。**JS で出し分けるものが常時見えていた** */
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:14px;line-height:1.7;-webkit-font-smoothing:antialiased}
.num{font-variant-numeric:tabular-nums}

/* 画面の器。LIFF は端末幅いっぱい。左右の余白は 14px（docs/33 1節） */
.sheet{max-width:430px;margin:0 auto;background:var(--card);min-height:100vh}

/* 画面のバー。**LINE のヘッダーとは別に、画面内に閉じる手段を置く** */
.bar{display:flex;align-items:center;gap:10px;padding:12px 14px;
  border-bottom:1px solid var(--line2);font-size:16px;font-weight:900;color:var(--ink)}
.bar .x{font-size:18px;font-weight:400;color:var(--ink3);line-height:1}
.bar .me{margin-left:auto;display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:400;color:var(--ink3)}
.bar .av{width:22px;height:22px;border-radius:50%;background:var(--sunk);object-fit:cover}

/* ボタン。46px（docs/33 1節） */
.btn{display:block;width:100%;text-align:center;border:1px solid var(--line);
  background:var(--card);color:var(--ink);border-radius:10px;padding:13px;
  font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;text-decoration:none}
.btn+.btn{margin-top:8px}
.btn.pri{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-size:16px}
.btn.ghost{color:var(--ink2)}
.btn:disabled{opacity:.45;cursor:default}

/* 画像が無い案件の既定のサムネ：撮影現場の光（ボケ）。design/campaign-default-thumb.html 案 D。
 * 写真の一覧に混ざっても写真に見えるように。**何の店かは描かない**（実際の撮影先を誤解させない）。
 * 色は「画像」の色なので、テーマのトークンではなくここで持つ（ダークでも同じ写真に見える）。 */
.bokeh{position:relative;overflow:hidden;background:var(--bk0)}
.bokeh::before,.bokeh::after{content:"";position:absolute;inset:-20%;filter:blur(14px);pointer-events:none}
.bokeh::before{background:
  radial-gradient(circle at 22% 30%, var(--bk1) 0 14%, transparent 15%),
  radial-gradient(circle at 70% 22%, var(--bk2) 0 10%, transparent 11%),
  radial-gradient(circle at 78% 64%, var(--bk1) 0 17%, transparent 18%),
  radial-gradient(circle at 36% 74%, var(--bk3) 0 12%, transparent 13%)}
.bokeh::after{filter:blur(4px);opacity:.75;background:
  radial-gradient(circle at 56% 42%, var(--bk3) 0 5%, transparent 6%),
  radial-gradient(circle at 30% 52%, var(--bk2) 0 4%, transparent 5%),
  radial-gradient(circle at 84% 40%, var(--bk3) 0 3.5%, transparent 4.5%)}
.bokeh.sm::before{filter:blur(6px)}.bokeh.sm::after{filter:blur(2px)}
.bokeh .bklab{position:absolute;z-index:2;left:10px;bottom:9px;display:flex;align-items:center;gap:5px;
  color:#FFFFFF;font-size:12px;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.bokeh .bklab svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* 夕方の店内／昼の窓辺の桃色／緑の窓辺／夜の街／夕暮れの紫 */
.bk1{--bk0:#C98A5B;--bk1:#F6C88F;--bk2:#FFE7BD;--bk3:#FFF4DE}
.bk2{--bk0:#B9707E;--bk1:#F1A9B4;--bk2:#FFD5DA;--bk3:#FFF0F2}
.bk3{--bk0:#5E7F76;--bk1:#A6CBB9;--bk2:#DDF0E5;--bk3:#F4FBF7}
.bk4{--bk0:#3E4E6E;--bk1:#8C9FCB;--bk2:#F2C98A;--bk3:#FFF1D8}
.bk5{--bk0:#7C6A93;--bk1:#C3B2DE;--bk2:#F3D2E2;--bk3:#FFF3F8}