/* コエ日報（仮称） 動作モック 共通スタイル
企画書 index.html と配色・名称を揃えること（別世界に見せない） */
:root{
--ink:#1e2b28; --ink-soft:#4a5b57; --ink-mute:#849691;
--paper:#ffffff; --paper2:#f3f8f6; --paper3:#eaf2ef; --line:#d8e6e1;
--accent:#0f766e; --accent-d:#0b5952; --accent-l:#15938a;
--warm:#c2701a; --green:#3f7d3a; --red:#b4483c;
--nav-h:60px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
color:var(--ink); background:#c9d9d5; line-height:1.75;
-webkit-font-smoothing:antialiased; font-feature-settings:"palt";
}
.phone{
max-width:430px; margin:0 auto; min-height:100vh; background:var(--paper);
display:flex; flex-direction:column; box-shadow:0 0 40px rgba(15,60,52,.22); position:relative;
}
@media (min-width:520px){ body{padding:18px 0} .phone{min-height:calc(100vh - 36px);border-radius:14px;overflow:hidden} }
/* ── デモ帯 ── */
.demo-bar{
background:#3b2f12; color:#ffdca0; font-size:10.5px; letter-spacing:.06em;
padding:5px 12px; text-align:center; font-weight:700;
}
.demo-bar a{color:#ffdca0}
/* ── ヘッダ ── */
.hd{
background:linear-gradient(135deg,#0d3b36,#12564e); color:#fff;
padding:14px 16px; display:flex; align-items:center; gap:12px; flex-shrink:0;
}
.hd .back{color:#9fd6cb;text-decoration:none;font-size:20px;line-height:1;padding:2px 4px 4px}
.hd .t{font-size:15.5px;font-weight:800;letter-spacing:.02em}
.hd .s{font-size:10.5px;color:#9fd6cb;margin-top:1px}
.hd .right{margin-left:auto;font-size:11px;color:#9fd6cb;text-align:right;line-height:1.5}
.hd .right b{display:block;color:#fff;font-size:12.5px;font-weight:700}
/* ── 本体 ── */
.main{flex:1;padding:16px;overflow-y:auto;padding-bottom:calc(var(--nav-h) + 20px)}
.main.flush{padding:0 0 calc(var(--nav-h) + 20px)}
h2.sec{font-size:13px;font-weight:800;color:var(--accent-d);margin:18px 0 9px;display:flex;align-items:center;gap:8px}
h2.sec:first-child{margin-top:0}
h2.sec::after{content:"";flex:1;height:1px;background:var(--line)}
p.desc{font-size:12.5px;color:var(--ink-soft);line-height:1.85;margin-bottom:12px}
.small{font-size:11px;color:var(--ink-mute);line-height:1.7}
.card{background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:14px 15px;margin-bottom:11px}
.card.tint{background:var(--paper2)}
.note{background:var(--paper2);border-left:3px solid var(--accent);padding:11px 13px;border-radius:0 5px 5px 0;font-size:11.8px;color:var(--ink-soft);line-height:1.8;margin:12px 0}
.note strong{color:var(--accent-d)}
.warn{background:#fdf4ec;border-left:3px solid var(--warm);padding:11px 13px;border-radius:0 5px 5px 0;font-size:11.8px;color:var(--ink-soft);line-height:1.8;margin:12px 0}
.warn strong{color:#a35c11}
.alert{background:#fdf1ef;border-left:3px solid var(--red);padding:11px 13px;border-radius:0 5px 5px 0;font-size:11.8px;color:var(--ink-soft);line-height:1.8;margin:12px 0}
.alert strong{color:var(--red)}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:7px;
background:var(--accent);color:#fff;border:none;border-radius:8px;
padding:12px 18px;font-size:13.5px;font-weight:700;font-family:inherit;
cursor:pointer;text-decoration:none;
}
.btn.ghost{background:#fff;color:var(--accent-d);border:1.5px solid var(--line)}
.btn.wide{width:100%}
.btn.warm{background:var(--warm)}
.btn:disabled{opacity:.45}
.pill{display:inline-block;font-size:10px;font-weight:800;padding:2px 8px;border-radius:11px;letter-spacing:.03em;white-space:nowrap}
.pill.sent{background:#dff0ec;color:var(--accent-d)}
.pill.queue{background:#fdeee0;color:#a35c11}
.pill.done{background:#e6f2e4;color:var(--green)}
.pill.need{background:#fbe4e0;color:var(--red)}
.pill.demo{background:#efe6cf;color:#7a5c17}
/* ── 下部ナビ ── */
.nav{
position:fixed;bottom:0;left:0;right:0;max-width:430px;margin:0 auto;
background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);
height:var(--nav-h);z-index:20;
}
@media (min-width:520px){ .nav{bottom:18px;border-radius:0 0 14px 14px} }
.nav a{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
text-decoration:none;color:var(--ink-mute);font-size:10px;font-weight:700;
}
.nav a .ic{font-size:17px;line-height:1}
.nav a.on{color:var(--accent)}
.nav a.on .ic{filter:none}
/* ── 一覧アイテム ── */
.item{display:flex;gap:11px;padding:12px 14px;border-bottom:1px solid #eef4f2;background:#fff;align-items:flex-start}
.item .tm{font-size:11px;font-weight:800;color:var(--accent);min-width:38px;padding-top:2px;font-variant-numeric:tabular-nums}
.item .bd{flex:1;min-width:0}
.item .who{font-size:11px;font-weight:800;color:var(--ink-mute);margin-bottom:2px}
.item .tx{font-size:12.8px;color:var(--ink);line-height:1.75}
.item .mt{display:flex;gap:8px;align-items:center;margin-top:6px;flex-wrap:wrap}
.item .len{font-size:10.5px;color:var(--ink-mute);font-variant-numeric:tabular-nums}
.item audio{width:100%;height:30px;margin-top:7px}
/* ── 日報の項目 ── */
.field{border:1px solid var(--line);border-radius:8px;margin-bottom:10px;overflow:hidden}
.field .lb{background:var(--paper3);padding:7px 12px;font-size:11.5px;font-weight:800;color:var(--accent-d);display:flex;align-items:center;gap:7px}
.field .lb .req{background:var(--red);color:#fff;font-size:9px;padding:1px 6px;border-radius:3px}
.field .vl{padding:11px 13px;font-size:12.8px;color:var(--ink);line-height:1.85}
.field .vl.empty{color:var(--red);font-weight:700;background:#fdf1ef}
.field .src{padding:7px 13px 9px;font-size:10.5px;color:var(--ink-mute);border-top:1px dashed var(--line);background:#fbfdfc}
.field .src b{color:var(--accent);font-weight:700}
table.mini{width:100%;border-collapse:collapse;font-size:11.8px;margin:8px 0}
table.mini th,table.mini td{border:1px solid var(--line);padding:7px 9px;text-align:left;line-height:1.7;vertical-align:top}
table.mini th{background:var(--paper3);font-weight:800;color:var(--accent-d);font-size:11px}
.foot-note{padding:16px;font-size:10.5px;color:var(--ink-mute);line-height:1.8;text-align:center}
.foot-note a{color:var(--accent)}