/* カキイレ アプリCSS。デザイン正本= mock_ui.html（brand_guidelines v4.1 / design_concept v3.1）から
   トークン・部品を移植。テンプレは素のHTML＋少数クラス（btn/secondary/badge/warn/notice/error/muted/
   menu-grid/appfooter）なので、classless基調＋そのクラスだけを定義する。Pico置き換え（2026-08-02 指摘反映:
   #4 メニュー2列 / #6 キャスト追加=朱強調 / #14 フッター下部固定 / #26 ロゴ中央）。 */

:root{
  --bg:#f7f3ea; --panel:#fffdf8; --panel2:#fbf7ee; --border:#e8e0d2;
  --ink:#292420; --ink2:#6a6255; --ink3:#99907f;
  --accent:#3d6bad; --accent-w:#3d6bad19;
  --st-draft:#99907f; --st-gen:#3d6bad; --st-sched:#b97b1f; --st-post:#1e7a5a; --st-fail:#bf3d2b;
  --shu:#de5626; color-scheme:light;
  --font-ui:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI",-apple-system,"Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#171310; --panel:#211c16; --panel2:#272119; --border:#3a3227;
    --ink:#f1ebdf; --ink2:#b3a995; --ink3:#857c6b;
    --accent:#6e97d9; --accent-w:#6e97d92b;
    --st-draft:#857c6b; --st-gen:#6e97d9; --st-sched:#d99a3d; --st-post:#3fa57e; --st-fail:#e06450;
    --shu:#de5626; color-scheme:dark;
  }
}

*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html{height:100%}
body{min-height:100dvh;background:var(--bg);color:var(--ink);font-family:var(--font-ui);line-height:1.6;
  font-size:15px;-webkit-font-smoothing:antialiased;font-feature-settings:"palt" 1;
  max-width:430px;margin:0 auto;display:flex;flex-direction:column}
@media (min-width:520px){
  body{border-left:1px solid var(--border);border-right:1px solid var(--border)}
}

/* ヘッダー（ロゴ中央=指摘#26） */
header.apphd{display:flex;align-items:center;justify-content:center;padding:12px 16px 8px;
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px)}
header.apphd img{height:26px;width:auto;display:block}
header.apphd .lg-d{display:none}
@media (prefers-color-scheme:dark){
  header.apphd .lg-l{display:none}
  header.apphd .lg-d{display:block}
}

main{flex:1;padding:8px 16px 120px;display:flex;flex-direction:column;gap:12px}

h1{font-size:19px;font-weight:700;letter-spacing:.01em}
h2{font-size:13px;font-weight:700;color:var(--ink2);margin-top:8px}
h3{font-size:14px;font-weight:700}
p{font-size:14px}
a{color:var(--accent)}
.muted{font-size:12px;color:var(--ink3)}

/* カード（<article>=モックの.card） */
article{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:16px}

/* フォーム */
label{display:block;font-size:12px;font-weight:700;color:var(--ink2);margin:10px 0 5px}
input,textarea,select{width:100%;border:1px solid var(--border);background:var(--panel2);border-radius:8px;
  padding:11px 12px;font:inherit;font-size:16px;color:var(--ink);outline:none} /* 16px未満はiOSが自動ズーム */
input[type="checkbox"],input[type="radio"]{width:auto;padding:0;vertical-align:middle}
input:focus,textarea:focus,select:focus{border-color:var(--accent)}
textarea{resize:vertical;line-height:1.7}
form{display:block}
form button{margin-top:12px}

/* ボタン: 素のbutton/.btn=主要（藍塗り）・.secondary=枠・.danger=赤枠・.shu=朱強調（指摘#6） */
button,.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;
  border-radius:8px;border:1px solid var(--accent);background:var(--accent);color:#fff;
  font:inherit;font-weight:700;font-size:15px;padding:10px 16px;cursor:pointer;text-decoration:none}
button:active,.btn:active{transform:translateY(1px)}
button.secondary,.btn.secondary{background:var(--panel);border-color:var(--border);color:var(--ink)}
button.danger,.btn.danger{background:var(--panel);color:var(--st-fail);
  border-color:color-mix(in srgb,var(--st-fail) 40%,var(--border))}
button.shu,.btn.shu{background:var(--shu);border-color:var(--shu);color:#fff}
button[disabled]{opacity:.45;cursor:not-allowed}

/* メニュー2列グリッド（指摘#4） */
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.menu-grid .btn{min-height:56px}

/* 判子風スタンプ（伝票様式=塗りピル廃止） */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.06em;
  border-radius:4px;padding:2px 8px;border:1.5px solid currentColor;background:transparent;
  color:var(--ink2);white-space:nowrap}
.badge.green{color:var(--st-post)}
.badge.red{color:var(--st-fail)}

/* 帯・通知 */
.warn{border:1px solid color-mix(in srgb,var(--st-sched) 55%,var(--border));
  background:color-mix(in srgb,var(--st-sched) 9%,var(--panel));
  border-radius:8px;padding:12px 14px;font-size:13px}
.warn b{color:var(--st-sched)}
.error{border:1px solid color-mix(in srgb,var(--st-fail) 55%,var(--border));
  background:color-mix(in srgb,var(--st-fail) 9%,var(--panel));
  border-radius:8px;padding:12px 14px;font-size:13px;color:var(--st-fail)}
.notice{border:1px solid color-mix(in srgb,var(--st-post) 55%,var(--border));
  background:color-mix(in srgb,var(--st-post) 9%,var(--panel));
  border-radius:8px;padding:12px 14px;font-size:13px}

/* テーブル */
table{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--panel);
  border:1px solid var(--border);border-radius:8px;overflow:hidden}
th{font-size:11px;color:var(--ink3);text-align:left;padding:8px;border-bottom:1px solid var(--border)}
td{padding:8px;border-bottom:1px solid var(--border);vertical-align:top}
tr:last-child td{border-bottom:0}

/* ログイン画面のロゴ（正式SVG・明暗出し分け） */
.loginlogo{text-align:center;padding:36px 0 8px}
.loginlogo img{width:238px;max-width:82%;height:auto;display:block;margin:0 auto 2px}
.loginlogo .lg-d{display:none}
@media (prefers-color-scheme:dark){
  .loginlogo .lg-l{display:none}
  .loginlogo .lg-d{display:block}
}
.loginlogo span{font-size:12px;color:var(--ink3)}

/* 下部ナビ S-10（画面下固定=指摘#14） */
footer.appfooter{position:fixed;bottom:0;left:0;right:0;z-index:30;max-width:430px;margin:0 auto;
  display:flex;background:var(--panel);border-top:1px solid var(--border);
  padding:6px 8px calc(8px + env(safe-area-inset-bottom))}
footer.appfooter a{flex:1;color:var(--ink3);font-size:10.5px;font-weight:700;text-decoration:none;
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;border-radius:8px;position:relative}
footer.appfooter a svg{display:block}
footer.appfooter a .badge.red{position:absolute;top:0;right:calc(50% - 22px);
  font-size:10px;padding:0 5px;border-width:1px;background:var(--panel)}

:is(button,input,textarea,select,summary,a):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}