/* ============================================================
健康管理システム — デザイントークン
------------------------------------------------------------
色・余白・文字の大きさは、ここにある値だけを使うこと。
HTML の style= と JS の style= は使わない。
例外は3つだけ： .rail-fill の width / .rail-mark の left / .minirail i の width
（どれも計算値。app.js の renderGoal と admin.js の render が書く）
============================================================ */
:root{
color-scheme: light dark;
/* ---- 面（かっこ内は白い面 #fcfcfb の上のコントラスト比） ---- */
--bg: #eceef0; /* 地。ブロックとブロックのすき間に見える */
--paper: #fcfcfb; /* ブロックの面 */
--sunken: #f1f2f4; /* 溝：レールの下地・注意帯の地・選択中でない面 */
--rule: #dcdee2; /* 1pxの罫（ブロックの枠・表の行） */
--rule-2: #c3c7cd; /* 強い罫（合計の上・線ボタンの枠・入力欄） */
/* ---- 文字は3段だけ。いちばん薄い --ink-3 でも 5.8:1 通る ---- */
--ink: #17181a; /* 17.8:1 */
--ink-2: #45484d; /* 8.9:1 */
--ink-3: #5f646b; /* 5.8:1 */
/* ---- 家の色（ZIOBIT 共通入口と同じ #0f766e）----
ZIOBIT-HOME/public/css/app.css の --theme と揃えてあります。
ここを変えるときは、あちらと必ず一緒に変えること。 */
--brand: #0f766e;
--brand-dark: #0d5f59;
--brand-deep: #083f3b; /* ログインの背景のいちばん濃いところ */
--brand-dot: #fbbf24; /* 印の黄の点。家じるし */
/* ---- 唯一の色。「自分の記録」に使います ---- */
--accent: #0f766e; /* 5.35:1（白い面の上）*/
--on-accent: #ffffff; /* --accent の上で 5.35:1 */
/* ---- 押しどころ ---- */
--action: #0f766e;
--action-ink: #ffffff; /* --action の上で 5.35:1 */
/* ---- 失敗のときだけ ---- */
--danger: #8f2c2c; /* --danger-bg の上で 7.0:1 */
--danger-bg: #f7ecec;
/* ---- 余白。4の倍数で9段。これ以外の数値を書かない ---- */
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
--s6:24px; --s7:32px; --s8:40px; --s9:56px;
/* ---- ブロックのすき間（地が見える幅）---- */
--gap: 10px;
/* ---- 角 ---- */
--r1:8px; --r2:12px; --r3:16px; --r-pill:999px;
/* ---- 影は持たない。宙に浮くのはダイアログだけ ---- */
--shadow-dialog: 0 24px 64px rgba(16,18,20,.22);
/* ---- 文字の階段は6段。日本語の床は12.5px ---- */
--t-hero: 40px; /* 今日の体重 */
--t-num: 28px; /* 合計kcal・管理者の数字 */
--t-lead: 20px; /* 目標への進みの一文・ダイアログの問い */
--t-md: 16px; /* 本文・ボタン・入力 */
--t-sm: 14px; /* 補助文・セクション見出し・表 */
--t-xs: 12.5px; /* ラベル・凡例・軸。必ず weight 600 で受ける */
/* ---- 行間 ---- */
--lh-hero: 1.00;
--lh-num: 1.15;
--lh-lead: 1.65;
--lh-body: 1.75; /* かな漢字の混植はここ */
--lh-tight: 1.35; /* 見出し。1.6 では日本語の見出しが散る */
--lh-label: 1.50;
/* ---- 字送り。日本語は少し開ける。詰めるのは数字だけ ---- */
--ls-ja: .02em;
--ls-num: -.01em;
--ls-label: .04em;
--tap: 44px;
/* ---- 端末の標準。外部フォントは読まない。
Windows の Yu Gothic UI が細るので system-ui を先頭へ ---- */
--font: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
"BIZ UDPGothic", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--bg: #0d0f11;
--paper: #16181b;
--sunken: #1e2126;
--rule: #2b2f35;
--rule-2: #3d424a;
--ink: #e9eaec; /* 14.7:1 */
--ink-2: #b9bcc1;
--ink-3: #949aa1; /* 6.3:1 */
/* 家の色は暗い面では沈むので、明るい側の同系色にします。
背景（ログインの緑）は家の色のまま変えません。 */
--accent: #2dd4bf; /* 9.56:1 */
--on-accent: #06302c; /* --accent の上で 7.69:1 */
--action: #2dd4bf;
--action-ink: #06302c; /* --action の上で 7.69:1。ここが以前 2.41:1 だった箇所 */
--danger: #f0a9a9;
--danger-bg: #2a1c1c;
--shadow-dialog: 0 24px 64px rgba(0,0,0,.6);
}
}
/* index.html / admin.html の ：1本の theme-color を2本に分ける
*/
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
font-family: var(--font);
font-size: var(--t-md); line-height: var(--lh-body);
letter-spacing: var(--ls-ja);
line-break: strict; /* 日本語の禁則 */
background: var(--bg); color: var(--ink);
-webkit-text-size-adjust: 100%;
}
button,a{ -webkit-tap-highlight-color: transparent; }
.hide{ display:none !important; }
.muted{ color: var(--ink-3); }
.small{ font-size: var(--t-sm); }
.center{ text-align:center; }
.sr-only{
position:absolute; width:1px; height:1px; margin:-1px; padding:0;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
:where(button,a,summary,input,select,[tabindex]):focus-visible{
outline:2px solid var(--accent); outline-offset:2px; border-radius: var(--r1);
}
/* ------------------------------------------------------------
面とブロック（.card の置き換え）
境界は「10pxの地の帯」＋「1pxの罫」の二重。影は使わない。
------------------------------------------------------------ */
.sheet{
max-width:640px; margin:0 auto;
padding: var(--gap) 0 calc(var(--s8) + env(safe-area-inset-bottom, 0px));
}
.sheet.wide{ max-width:1200px; }
.wrap{ max-width:560px; margin:0 auto; padding: var(--s5) var(--s4); } /* #fatal / #deny 用 */
.blk{
background: var(--paper);
border:1px solid var(--rule); border-left:0; border-right:0;
padding: var(--s5) var(--s4);
}
.blk + .blk, .blk + details.blk, details.blk + .blk{ margin-top: var(--gap); }
@media (min-width:480px){
.sheet{ padding-left: var(--s3); padding-right: var(--s3); }
.blk{ border-left:1px solid var(--rule); border-right:1px solid var(--rule);
border-radius: var(--r2); }
}
@media (min-width:768px){ .blk{ padding: var(--s6) var(--s6); } }
.blk-h{
margin:0 0 var(--s3);
font-size: var(--t-sm); line-height: var(--lh-tight);
letter-spacing: var(--ls-label); font-weight:700; color: var(--ink);
word-break: auto-phrase; /* 対応外のブラウザは無視する */
}
.blk-head{
display:flex; align-items:center; justify-content:space-between;
gap: var(--s3); margin-bottom: var(--s2); min-height: var(--tap);
}
.blk-head .blk-h{ margin:0; }
.sub-h{
margin: var(--s5) 0 var(--s2); padding-top: var(--s3);
border-top:1px solid var(--rule);
font-size: var(--t-sm); line-height: var(--lh-tight);
letter-spacing: var(--ls-label); font-weight:700; color: var(--ink);
}
.note-foot{
margin: var(--s5) var(--s4) 0; text-align:center;
font-size: var(--t-sm); line-height: var(--lh-body); color: var(--ink-3);
}
.note-foot a{
display:inline-flex; align-items:center; justify-content:center;
min-height: var(--tap); padding:0 var(--s3); /* 実測18pxしか無く、指では狙えませんでした */
color: var(--ink-3);
}
/* ------------------------------------------------------------
ヘッダ 48px（現状70px）
------------------------------------------------------------ */
header.bar{
display:flex; align-items:center; gap: var(--s3);
min-height:48px; padding:0 var(--s4);
background: var(--paper); border-bottom:1px solid var(--rule);
position:sticky; top:0; z-index:10;
}
header.bar .who{ font-size: var(--t-sm); font-weight:700; color: var(--ink); line-height:1.3; }
header.bar .sub{ font-size: var(--t-xs); font-weight:600; color: var(--ink-3); line-height:1.3; }
header.bar .spacer{ flex:1; }
header.bar .date{
font-size: var(--t-sm); color: var(--ink-3);
white-space:nowrap; font-variant-numeric: tabular-nums;
}
.demo-badge{
font-size: var(--t-xs); font-weight:700; color: var(--ink-2);
background: var(--sunken); box-shadow: inset 0 0 0 1px var(--rule-2);
padding:3px var(--s2); border-radius: var(--r-pill); white-space:nowrap;
}
/* ------------------------------------------------------------
主役の数字。記録しても画面の形が動かないこと
------------------------------------------------------------ */
.hero{
margin:0; display:flex; align-items:baseline; gap: var(--s2);
font-variant-numeric: tabular-nums;
}
.hero-n{
font-size: var(--t-hero); line-height: var(--lh-hero);
letter-spacing: var(--ls-num); font-weight:600;
}
.hero-u{ font-size: var(--t-md); font-weight:700; color: var(--ink-3); }
.hero.is-none .hero-n{ color: var(--ink-3); font-weight:400; }
.hero.is-none .hero-u{ visibility:hidden; } /* 高さだけ残す */
.metas{
margin: var(--s2) 0 0;
min-height: calc(var(--t-sm) * var(--lh-label)); /* 未記録でも高さを予約 */
display:flex; flex-wrap:wrap; gap:0 var(--s4);
font-size: var(--t-sm); line-height: var(--lh-label);
color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.metas .k{ color: var(--ink-3); }
.metas b{ font-weight:700; color: var(--ink); }
/* 増減は色で言わない。向きは矢印が運ぶ */
.up,.down{ color: var(--ink); }
.flat{ color: var(--ink-3); }
.arw{ font-weight:700; font-style:normal; }
/* ------------------------------------------------------------
ボタン。地は青ではなく墨（ダークでは白地に黒文字）
------------------------------------------------------------ */
.btn{
/* 中にアイコンを置けるように。共通入口の .btn と同じ作りです */
display:inline-flex; align-items:center; justify-content:center; gap:8px;
font: inherit; font-size: var(--t-md); font-weight:700;
letter-spacing: var(--ls-ja); cursor:pointer;
min-height:52px; padding: var(--s3) var(--s5);
background: var(--action); color: var(--action-ink);
border:1px solid transparent; border-radius: var(--r2);
transition: background .12s ease, border-color .12s ease, opacity .12s ease;
}
.btn-wide,
.btn-block{ width:100%; } /* .btn-block は共通入口と同じ呼び名 */
.btn-line{ background:transparent; color: var(--ink); border-color: var(--rule-2); font-weight:600; }
.btn-text{
background:transparent; border-color:transparent; color: var(--ink-2);
font-size: var(--t-sm); font-weight:600; min-height: var(--tap); padding:0 var(--s3);
text-decoration:underline; text-underline-offset:3px; text-decoration-color: var(--rule-2);
}
.btn:disabled{ opacity:.45; cursor:default; }
@media (hover:hover){
.btn:hover{ background: var(--ink-2); }
.btn-line:hover,.btn-text:hover{ background: var(--sunken); border-color: var(--rule-2); }
}
.btn:active{ transform: translateY(1px); }
.acts{ margin-top: var(--s4); }
.btnrow{ display:flex; gap: var(--s2); flex-wrap:wrap; margin-top: var(--s4); }
.btnrow > *{ flex:1 1 auto; }
/* ------------------------------------------------------------
期間の切替（青ベタをやめる＝ダークで読めない問題も消える）
------------------------------------------------------------ */
.seg{ display:inline-flex; gap:2px; padding:2px; background: var(--sunken); border-radius: var(--r2); }
.seg button{
font: inherit; font-size: var(--t-sm); font-weight:600; cursor:pointer;
min-height: var(--tap); padding:0 var(--s3);
background:transparent; color: var(--ink-2);
border:1px solid transparent; border-radius: calc(var(--r2) - 2px);
}
.seg button.on{ background: var(--paper); color: var(--ink); border-color: var(--rule-2); font-weight:700; }
/* ------------------------------------------------------------
食事のスロット（絵文字なし。押した合図は 地・枠・数字 の3重）
------------------------------------------------------------ */
.slots{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap: var(--s2); }
.slot{
font: inherit; cursor:pointer; min-height:52px;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
padding: var(--s2) var(--s1);
background:transparent; color: var(--ink);
border:1px solid var(--rule-2); border-radius: var(--r2);
}
.slot b{ font-size: var(--t-md); font-weight:600; letter-spacing:.02em; }
.slot i{
font-style:normal; font-size:11.5px; line-height:1.2; min-height:14px;
color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.slot.is-done{ background: var(--sunken); border-color: var(--ink); }
.slot.is-done b{ font-weight:700; }
.slot.is-done i{ color: var(--ink-2); }
.slot.is-now{ box-shadow: inset 0 -2px 0 var(--ink); } /* いまの時間帯 */
.slot:disabled{ opacity:.45; cursor:default; }
@media (max-width:360px){ .slots{ gap: var(--s1); } .slot b{ font-size: var(--t-sm); } }
/* ------------------------------------------------------------
進み具合のレール ★この画面の中心部品
満ち＝唯一の色 / いま＝墨の実線 / 今日の予定＝灰の破線
------------------------------------------------------------ */
.lead{
margin:0; font-size: var(--t-lead); line-height: var(--lh-lead);
color: var(--ink); word-break: auto-phrase;
}
.lead b{ font-weight:700; font-variant-numeric: tabular-nums; white-space:nowrap; }
.rail{ margin-top: var(--s4); }
.rail:empty{ display:none; }
.rail-track{
position:relative; height:10px; border-radius: var(--r-pill);
background: var(--sunken); box-shadow: inset 0 0 0 1px var(--rule);
}
.rail-fill{ position:absolute; left:0; top:0; bottom:0; background: var(--accent); border-radius: var(--r-pill); }
.rail-mark{ position:absolute; top:-5px; width:2px; height:20px; border-radius:1px; transform: translateX(-1px); }
.rail-mark.now{ background: var(--ink); }
.rail-mark.plan{ background: repeating-linear-gradient(180deg, var(--ink-3) 0 3px, transparent 3px 6px); }
.rail-ends{
display:flex; justify-content:space-between; margin-top: var(--s3);
font-size: var(--t-sm); color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.rail-key{ display:flex; gap: var(--s4); margin-top: var(--s1);
font-size: var(--t-xs); font-weight:600; line-height: var(--lh-label); color: var(--ink-3); }
.rail-key i{ display:inline-block; width:2px; height:11px; margin-right:6px; vertical-align:-1px; }
.rail-key .k-now i{ background: var(--ink); }
.rail-key .k-plan i{ background: repeating-linear-gradient(180deg, var(--ink-3) 0 3px, transparent 3px 6px); }
/* ------------------------------------------------------------
この7日
------------------------------------------------------------ */
.week{ display:flex; align-items:center; gap:6px; margin-top: var(--s4); }
.week-h{ font-size: var(--t-xs); font-weight:600; color: var(--ink-3); margin-right: var(--s1); }
.week .d{
flex:0 0 22px; width:22px; height:22px; border-radius: var(--r-pill);
display:inline-flex; align-items:center; justify-content:center;
font-style:normal; font-size:11.5px; font-weight:700;
color: var(--ink-3); background:transparent; box-shadow: inset 0 0 0 1px var(--rule-2);
}
.week .d.is-on{ background: var(--sunken); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.week .d.is-today{ outline:1px solid var(--rule-2); outline-offset:2px; }
/* 管理者の表で使う小さいレール */
.minirail{
display:inline-block; width:56px; height:6px; overflow:hidden;
border-radius: var(--r-pill); background: var(--sunken);
box-shadow: inset 0 0 0 1px var(--rule); vertical-align:middle; margin-right: var(--s2);
}
.minirail i{ display:block; height:100%; background: var(--accent); }
/* ------------------------------------------------------------
グラフの枠
------------------------------------------------------------ */
.chart{ margin-top: var(--s3); min-height:200px; } /* 描き直しで潰れない */
.chart svg{ display:block; width:100%; }
.chart-empty{
color: var(--ink-3); font-size: var(--t-sm); text-align:center;
padding: var(--s8) 0; margin:0; line-height: var(--lh-body);
}
.chart-key{ display:flex; gap: var(--s4); margin-top: var(--s2);
font-size: var(--t-xs); font-weight:600; color: var(--ink-3); }
.chart-key i{ display:inline-block; width:18px; height:0; margin-right:6px; vertical-align:middle;
border-top:2.5px solid var(--accent); }
.chart-key .k-goal i{ border-top:1.5px dashed var(--ink-3); }
@media (min-width:560px){ .chart{ min-height:240px; } }
/* ------------------------------------------------------------
状態の表示。黄色い帯をやめ、2pxの左罫だけにする
★ クラス名は .alert のまま（app.js の alertHtml / admin.js が出しているため）
------------------------------------------------------------ */
.alert{
margin: var(--s4) 0 0; padding: var(--s3) var(--s4);
background: var(--sunken); color: var(--ink-2);
border-left:2px solid var(--rule-2); border-radius:0 var(--r1) var(--r1) 0;
font-size: var(--t-sm); line-height: var(--lh-body);
}
.alert b{ font-weight:700; color: inherit; }
.alert.info{ } /* 既定と同じ */
.alert.warn,.alert.ok{ border-left-color: var(--ink); color: var(--ink); }
.alert.danger{ border-left-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
#notice .alert:first-child{ margin-top:0; }
/* 記録できた合図。帯もトーストも出さず、1行だけ静かに置く */
.said{
margin: var(--s3) 0 0;
min-height: calc(var(--t-sm) * var(--lh-label));
font-size: var(--t-sm); line-height: var(--lh-label); color: var(--ink-2);
opacity:0; transition: opacity .16s ease;
}
.said.on{ opacity:1; }
/* 読み込み中。文字を隠して溝だけ見せる（事実と違う文言を一度も出さない） */
[data-state="loading"] .skel{
color: transparent !important; background: var(--sunken);
border-radius: var(--r1); box-shadow: 0 0 0 1px var(--rule);
}
[data-state="loading"] .skel *{ visibility:hidden; }
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
.btn:active{ transform:none; }
}
/* ------------------------------------------------------------
食事の一覧と合計
------------------------------------------------------------ */
.meal{
display:flex; align-items:baseline; gap: var(--s3);
padding: var(--s3) 0; border-bottom:1px solid var(--rule);
font-size: var(--t-md);
}
.meal:last-child{ border-bottom:0; }
.meal .sl{ flex:0 0 34px; font-size: var(--t-xs); font-weight:700;
letter-spacing: var(--ls-label); color: var(--ink-3); }
.meal .it{ flex:1; min-width:0; }
.meal .it .ng{ color: var(--ink-2); }
.meal .kc{ font-weight:700; font-variant-numeric: tabular-nums; white-space:nowrap; }
.meal .kc.none{ color: var(--ink-3); font-weight:400; }
.meal .fix{
font: inherit; font-size: var(--t-sm); color: var(--ink-2); cursor:pointer;
min-height: var(--tap); padding:0 var(--s3);
background:transparent; border:1px solid var(--rule-2); border-radius: var(--r1);
}
.total{
display:flex; justify-content:space-between; align-items:baseline;
margin-top: var(--s4); padding-top: var(--s4); border-top:1px solid var(--rule-2);
}
.total .t{ font-size: var(--t-sm); color: var(--ink-3); }
.total .v{ font-size: var(--t-num); line-height: var(--lh-num); font-weight:600;
letter-spacing: var(--ls-num); font-variant-numeric: tabular-nums; }
.total + .total{ margin-top: var(--s1); padding-top:0; border-top:0; }
/* ------------------------------------------------------------
畳む（目標の詳しい数字・配信の設定）
------------------------------------------------------------ */
details.blk > summary{
list-style:none; cursor:pointer;
display:flex; align-items:center; justify-content:space-between; gap: var(--s2);
min-height: var(--tap);
font-size: var(--t-sm); font-weight:700; letter-spacing: var(--ls-label); color: var(--ink);
}
details.blk > summary::-webkit-details-marker{ display:none; }
details.blk > summary::after{
content:""; flex:0 0 auto; width:8px; height:8px; margin-right:2px;
border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3);
transform: rotate(45deg) translateY(-2px); transition: transform .15s ease;
}
details.blk[open] > summary::after{ transform: rotate(225deg) translateY(-2px); }
details.blk[open] > summary{ margin-bottom: var(--s4); }
.tag{ margin-left:auto; margin-right: var(--s3); font-size: var(--t-xs);
font-weight:600; color: var(--ink-3); }
.deflist{ display:grid; grid-template-columns:auto 1fr; gap: var(--s2) var(--s5);
margin:0; font-size: var(--t-sm); line-height: var(--lh-label); }
.deflist dt{ margin:0; color: var(--ink-3); }
.deflist dd{ margin:0; text-align:right; color: var(--ink); font-weight:700;
font-variant-numeric: tabular-nums; }
/* ------------------------------------------------------------
入力
------------------------------------------------------------ */
label{
display:block; margin: var(--s4) 0 var(--s1);
font-size: var(--t-xs); font-weight:600; line-height: var(--lh-label);
letter-spacing: var(--ls-label); color: var(--ink-3);
}
input[type=text],input[type=password],input[type=number],
input[type=date],input[type=time],select,textarea{
font: inherit; font-size:16px; /* iOS の自動ズームを止める */
width:100%; min-height:48px; padding: var(--s3) var(--s4);
background: var(--paper); color: var(--ink);
border:1px solid var(--rule-2); border-radius: var(--r2);
}
textarea{ resize:vertical; }
input::placeholder{ color: var(--ink-3); opacity:1; }
.row2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap: var(--s4); }
.unitrow{ display:flex; align-items:center; gap: var(--s3); }
.unitrow input{ font-size: var(--t-num); font-weight:600; text-align:right;
letter-spacing: var(--ls-num); font-variant-numeric: tabular-nums; }
.unitrow .unit{ font-size: var(--t-md); color: var(--ink-3); font-weight:700; }
/* ------------------------------------------------------------
ダイアログ。ホームバーを避ける
------------------------------------------------------------ */
dialog{
border:0; padding:0; width:min(440px, calc(100vw - var(--s6)));
max-height: calc(100dvh - var(--s7));
background: var(--paper); color: var(--ink);
border-radius: var(--r3); box-shadow: var(--shadow-dialog);
overflow-y:auto; overscroll-behavior: contain;
}
dialog::backdrop{ background: rgba(10,11,12,.5); }
dialog .body{ padding: var(--s6) var(--s5) calc(var(--s6) + env(safe-area-inset-bottom, 0px)); }
dialog h3{ margin:0 0 var(--s2); font-size: var(--t-lead); line-height: var(--lh-tight); font-weight:700; }
dialog .note{ color: var(--ink-2); font-size: var(--t-sm); margin:0 0 var(--s3); line-height: var(--lh-body); }
#weightPhoto{ width:100%; border-radius: var(--r2); margin-bottom: var(--s2); }
/* 複数枚（焼肉など）を並べて見比べられるように、横に並べて折り返します */
.meal-photos{ display:flex; flex-wrap:wrap; gap: var(--s2); margin-bottom: var(--s2); }
.meal-photos img{ width: calc(50% - var(--s2) / 2); border-radius: var(--r2); display:block; }
.meal-photos img:only-child{ width:100%; }
.wiz .q{ font-size: var(--t-lead); font-weight:700; line-height: var(--lh-tight); margin:0 0 var(--s2); }
.wiz-head{ display:flex; align-items:baseline; gap: var(--s3); margin-bottom: var(--s4); }
.wiz-head h3{ margin:0; flex:1; }
.wiz-step{ font-size: var(--t-xs); font-weight:600; color: var(--ink-3); white-space:nowrap; }
.chips{ display:flex; gap: var(--s2); margin-bottom: var(--s3); }
.chips button{
flex:1; font: inherit; font-size: var(--t-sm); font-weight:600; cursor:pointer;
min-height: var(--tap); padding:0 var(--s1);
background:transparent; color: var(--ink);
border:1px solid var(--rule-2); border-radius: var(--r2);
}
.chips button.on{ background: var(--sunken); border-color: var(--ink); font-weight:700; }
/* ------------------------------------------------------------
カメラ
------------------------------------------------------------
撮るあいだは、画面いっぱいに映像だけを出します。
下のバーは、指の届く画面の下側に置きます。
------------------------------------------------------------ */
dialog.cam{
width:100vw; max-width:100vw; height:100dvh; max-height:100dvh;
margin:0; padding:0; border:0; border-radius:0;
background:#000; color:#fff; overflow:hidden;
}
/* ★ display は [open] のときだけ。dialog.cam に素で display:flex を書くと、
ブラウザ既定の dialog:not([open]){display:none} と同じ強さで author 側が勝ち、
閉じているカメラ画面がページの下にずっと出たままになります（実際になりました）。 */
dialog.cam[open]{ display:flex; flex-direction:column; }
dialog.cam::backdrop{ background:#000; }
.cam-view{
flex:1 1 auto; min-height:0; position:relative;
display:flex; align-items:center; justify-content:center;
}
.cam-view video{
width:100%; height:100%; object-fit:contain; background:#000;
}
.cam-msg{
margin:0; padding:0 var(--s6); text-align:center;
font-size: var(--t-md); line-height: var(--lh-body); color:#fff;
white-space:pre-line; /* 案内は改行のとおりに出します */
}
.cam-hint{
position:absolute; left:0; right:0; bottom: var(--s4);
margin:0; padding:0 var(--s5); text-align:center;
font-size: var(--t-sm); line-height: var(--lh-label); color:#fff;
text-shadow:0 1px 4px rgba(0,0,0,.9); /* 明るい被写体の上でも読めるように */
}
.cam-bar{
flex:0 0 auto;
display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap: var(--s3);
padding: var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom, 0px));
background:#000;
}
.cam-sub{
font: inherit; font-size: var(--t-sm); font-weight:600; cursor:pointer;
min-height: var(--tap); padding:0 var(--s3);
background:transparent; color:#fff; border:0;
}
.cam-sub:first-child{ text-align:left; justify-self:start; }
/* 右は「いま撮った写真だけ」の断り書き。押しどころではありません */
.cam-note{
margin:0; justify-self:end; text-align:right;
font-size: var(--t-xs); font-weight:600; line-height:1.4; color:#c9ccd1;
}
.cam-shot{
width:68px; height:68px; border-radius:50%; cursor:pointer;
background:#fff; border:4px solid rgba(255,255,255,.35);
background-clip:padding-box;
}
.cam-shot:disabled{ opacity:.35; cursor:default; }
.cam-shot:active{ transform:scale(.94); }
@media (prefers-reduced-motion: reduce){ .cam-shot:active{ transform:none; } }
/* ------------------------------------------------------------
ログイン
------------------------------------------------------------ */
#login{
min-height:100vh; min-height:100dvh; /* svh/dvh 非対応でも効くように二段 */
display:flex; align-items:center; justify-content:center;
padding: var(--s5) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom, 0px));
/* ZIOBIT 共通入口と同じ背景。ここは家の色なので、ダークでも変えません */
background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 60%, var(--brand-deep) 100%);
}
.login-box{
width:100%; max-width:400px; background: var(--paper);
border-radius:16px; box-shadow:0 8px 40px rgba(0,0,0,.25); overflow:hidden;
}
.login-head{ text-align:center; padding:28px 24px 8px; }
.sys-logo{ display:block; width:64px; height:64px; margin:0 auto; }
.sys-logo svg{ display:block; width:100%; height:100%; }
.login-head h1{
margin:12px 0 2px; font-size:19px; line-height:1.4; font-weight:700;
color: var(--ink); letter-spacing:.01em;
}
.login-head .sub{ font-size:13px; color: var(--ink-3); line-height:1.5; }
.login-body{ padding:20px 28px 30px; }
.form-row{ margin-bottom:13px; }
.form-label{
display:block; margin:0 0 5px; font-size:13px; font-weight:700;
color: var(--ink); letter-spacing:0;
}
.form-control{
width:100%; font: inherit; font-size:16px; /* iOS の自動ズームを止める */
min-height:48px; padding:11px 12px;
border:1px solid var(--rule-2); border-radius:9px;
background: var(--paper); color: var(--ink);
}
.form-control::placeholder{ color: var(--ink-3); opacity:1; }
.form-control:focus{ outline:2px solid var(--brand); outline-offset:0; border-color: var(--brand); }
/* 覚えておく（スタッフコードだけ）。
★ パスワードはこのシステムの保管には書きません。
ZIOBIT 共通ログインのパスワードは他システムと同じもので、
ここに平文で置くと、この画面ひとつの綻びが全システムに及びます。
端末のパスワード管理に任せます（form と autocomplete を正しく付けてあります）。 */
.login-remember{
display:flex; align-items:center; gap:8px;
margin:2px 0 12px; min-height: var(--tap);
font-size:13px; font-weight:400; color: var(--ink-2);
letter-spacing:0; cursor:pointer; user-select:none;
}
.login-remember input{
width:17px; height:17px; min-height:auto; margin:0; flex:0 0 auto;
cursor:pointer; accent-color: var(--brand);
}
#login .btn{ gap:8px; border-radius:9px; }
.btn-i{ width:18px; height:18px; flex:0 0 auto; }
#loginMsg{
margin:0 0 14px; padding:9px 12px; border-radius:8px;
background: var(--danger-bg); color: var(--danger);
border:1px solid var(--danger); border-left-width:1px;
font-size:13px; line-height:1.6;
}
.form-hint{
margin:12px 0 0; text-align:center;
font-size:12px; line-height:1.6; color: var(--ink-3);
}
/* 縦の狭い端末（iPhone SE 667 など）。印と余白を詰めます */
@media (max-height:700px){
.login-head{ padding:20px 24px 6px; }
.sys-logo{ width:52px; height:52px; }
.login-head h1{ margin-top:10px; font-size:18px; }
.login-body{ padding:16px 24px 22px; }
.form-hint{ display:none; }
}
/* ------------------------------------------------------------
下のリンク
------------------------------------------------------------ */
.footlinks{ display:flex; justify-content:center; gap: var(--s1); margin-top: var(--s4); }
.footlinks a{
display:inline-flex; align-items:center; justify-content:center;
min-height: var(--tap); padding:0 var(--s4);
font-size: var(--t-sm); color: var(--ink-3); text-decoration:none;
}
.footlinks a:hover,.footlinks a:active{ color: var(--ink); text-decoration:underline; }
/* ★ 罫の色（--rule-2）を文字に使わないこと。ダークで 1.9:1 になり読めません。
飾りの区切りでも、文字として置く以上は読める濃さにします。 */
.footlinks .sep{ align-self:center; color: var(--ink-3); }