/* ============================================================
   YSC ロビーサイネージ ／ 利用状況ダッシュボード スタイルシート

   編集の目安
     色を変えたいとき         → 「01. 設定値」だけを編集
     グラフの高さを変えたい   → 「04. グラフ」の --chart-h
     データの場所を変えたい   → style.css ではなく config.json

   目次
     01. 設定値
     02. 全体・ヘッダー
     03. 期間の指定・作業日
     04. グラフ
     05. 表・フッター
   ============================================================ */

/* ------------------------------------------------------------
   01. 設定値
   ------------------------------------------------------------ */
:root{
  --brand:#9DAF88;        /* Pantone 7494 C ／ 棒グラフ・見出しの罫線 */
  --brand-dk:#6F8459;     /* 小見出し・強調 */
  --leaf:#74AA50;         /* 強調（最大値など） */
  --mark:#C0705A;         /* 作業日のマーカー */

  --ink:#242C22;
  --ink-60:rgba(36,44,34,.62);
  --ink-38:rgba(36,44,34,.38);
  --ink-14:rgba(36,44,34,.14);
  --paper:#F7F7F3;
  --white:#fff;
  --line:#DDDFD6;

  --chart-h:190px;        /* 日別・時間帯別グラフの高さ */

  --sans:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic","Noto Sans JP",sans-serif;
  --serif:"Hiragino Mincho ProN","Yu Mincho",Georgia,serif;
  --mono:ui-monospace,Menlo,Consolas,"Courier New",monospace;
}

/* ------------------------------------------------------------
   02. 全体・ヘッダー
   ------------------------------------------------------------ */
*{box-sizing:border-box;margin:0;padding:0;}
body{background:#E7E8E2;font-family:var(--sans);color:var(--ink);line-height:1.8;padding:0 16px 60px;}
.sheet{max-width:1040px;margin:0 auto;background:var(--paper);box-shadow:0 12px 40px rgba(0,0,0,.12);}

header{background:var(--brand);padding:34px 40px 30px;}
header .eyebrow{font-size:11px;letter-spacing:.3em;color:rgba(255,255,255,.85);margin-bottom:9px;}
header h1{font-family:var(--serif);font-size:23px;letter-spacing:.1em;color:#fff;font-weight:600;}
header .sub{font-size:12.5px;color:rgba(255,255,255,.9);margin-top:8px;letter-spacing:.06em;}

main{padding:8px 40px 40px;}
section{margin-top:36px;}
h2{font-size:16px;letter-spacing:.05em;font-weight:600;border-bottom:2px solid var(--ink);padding-bottom:9px;margin-bottom:8px;}
p.note{font-size:12.5px;color:var(--ink-60);margin-bottom:16px;}

/* ------------------------------------------------------------
   03. 期間の指定・作業日
   ------------------------------------------------------------ */
.bar{background:var(--white);border-bottom:1px solid var(--line);padding:14px 40px;
     display:flex;gap:18px 26px;flex-wrap:wrap;align-items:center;justify-content:space-between;}
.presets{display:flex;gap:8px;flex-wrap:wrap;}
.presets button{font-family:inherit;font-size:12.5px;letter-spacing:.04em;padding:7px 14px;
     border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;}
.presets button:hover{border-color:var(--brand);}
.presets button.on{background:var(--brand);border-color:var(--brand);color:#1B2119;font-weight:600;}

.dates{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.dates label{font-size:11.5px;color:var(--ink-60);display:inline-flex;align-items:center;gap:6px;}
.dates input{font-family:inherit;font-size:12.5px;padding:6px 8px;border:1px solid var(--line);background:var(--white);color:var(--ink);}
.dates .apply{font-family:inherit;font-size:12.5px;letter-spacing:.06em;padding:7px 16px;
     border:1px solid var(--brand-dk);background:var(--brand-dk);color:#fff;cursor:pointer;font-weight:600;}

.marks{padding:12px 40px 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.marks .lbl{font-size:11px;letter-spacing:.14em;color:var(--ink-38);margin-right:4px;}
.marks button{font-family:inherit;font-size:11.5px;padding:6px 12px;border:1px solid var(--line);
     background:var(--white);color:var(--ink-60);cursor:pointer;text-align:left;line-height:1.5;}
.marks button:hover{border-color:var(--mark);color:var(--ink);}
.marks button b{color:var(--mark);font-weight:600;}

/* ------------------------------------------------------------
   04. グラフ
   すべて CSS と SVG で描いています。外部ライブラリは使いません。
   ------------------------------------------------------------ */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:28px;}
.kpis div{background:var(--white);border:1px solid var(--line);padding:16px 18px;}
.kpis .l{font-size:11px;letter-spacing:.14em;color:var(--ink-38);}
.kpis .v{font-family:var(--serif);font-size:26px;letter-spacing:.03em;margin-top:6px;line-height:1.2;}
.kpis .v small{font-size:13px;color:var(--ink-60);margin-left:3px;}
.kpis .s{font-size:11.5px;color:var(--ink-60);margin-top:4px;}

.chart{background:var(--white);border:1px solid var(--line);padding:16px 18px 10px;overflow-x:auto;}
.chart svg{display:block;height:var(--chart-h);width:100%;min-width:520px;}
.chart .grid-line{stroke:var(--ink-14);stroke-width:1;}
.chart .bar-r{fill:var(--brand);}
.chart .bar-r.peak{fill:var(--leaf);}
.chart .mark-line{stroke:var(--mark);stroke-width:1.5;stroke-dasharray:4 3;}
.chart .mark-label{fill:var(--mark);font-size:9px;font-family:var(--sans);}
.chart .axis{fill:var(--ink-38);font-size:9.5px;font-family:var(--sans);}
.chart .axis-y{fill:var(--ink-38);font-size:9.5px;font-family:var(--mono);}

.legend{font-size:11.5px;color:var(--ink-60);margin-top:10px;display:flex;gap:18px;flex-wrap:wrap;}
.legend span{display:inline-flex;align-items:center;gap:6px;}
.legend i{width:12px;height:12px;display:inline-block;background:var(--brand);}
.legend i.mk{width:2px;height:13px;background:var(--mark);}

/* 項目別（横棒） */
.rows{background:var(--white);border:1px solid var(--line);padding:16px 18px;}
.row{display:flex;align-items:center;gap:14px;margin-bottom:11px;font-size:13px;}
.row:last-child{margin-bottom:0;}
.row .nm{flex:0 0 30%;color:var(--ink);}
.row .tr{flex:1 1 auto;height:20px;background:rgba(36,44,34,.06);position:relative;}
.row .fl{height:100%;background:var(--brand);}
.row .vl{flex:0 0 86px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-60);font-size:12.5px;}
.row .vl b{color:var(--ink);font-size:13.5px;}

/* ------------------------------------------------------------
   05. 表・フッター
   ------------------------------------------------------------ */
table.health{width:100%;border-collapse:collapse;font-size:12.8px;background:var(--white);border:1px solid var(--line);}
table.health td{border-bottom:1px solid var(--line);padding:11px 14px;}
table.health tr:last-child td{border-bottom:0;}
table.health td:first-child{color:var(--ink-60);width:34%;}
table.health td.ng{color:#A8624F;font-weight:600;}
table.health td.ok{color:var(--brand-dk);}

.empty{background:var(--white);border:1px dashed var(--ink-38);padding:30px;text-align:center;
       font-size:13px;color:var(--ink-60);}

footer{border-top:1px solid var(--line);margin:0 40px;padding:20px 0 30px;font-size:11.5px;color:var(--ink-38);line-height:1.9;}
footer .date{margin-top:6px;letter-spacing:.1em;}

@media print{ body{background:#fff;padding:0;} .sheet{box-shadow:none;} .bar,.marks{display:none;} }
@media (max-width:760px){
  header,main,.bar,.marks{padding-left:20px;padding-right:20px;}
  footer{margin:0 20px;}
  .kpis{grid-template-columns:repeat(2,1fr);}
  .row .nm{flex:0 0 38%;}
  .bar{justify-content:flex-start;}
}