/* m28e 顧客管理システム(提案用デモ) 共通スタイル */
:root {
  --ink:#252a24; --sub:#6b7266; --bg:#f2f0e9; --panel:#ffffff;
  --moss:#3d5a45; --moss-deep:#24382b; --gold:#b39257; --line:#e3dfd2;
  --red:#b05a4a; --blue:#4a6f8a; --green:#5a8a5f;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
  --serif:"Shippori Mincho",serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--sans); background:var(--bg); color:var(--ink); line-height:1.7; letter-spacing:.02em; font-size:15px; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { font-family:var(--sans); cursor:pointer; }

.app { display:flex; min-height:100svh; }

/* ---- sidebar ---- */
.side {
  width:224px; flex-shrink:0; background:var(--moss-deep); color:#e8e4d6;
  display:flex; flex-direction:column; position:sticky; top:0; height:100svh;
}
.side .logo { font-family:var(--serif); font-size:1.3rem; letter-spacing:.1em; color:#fff; padding:22px 22px 4px; }
.side .sys { font-size:.62rem; letter-spacing:.18em; opacity:.6; padding:0 22px 18px; border-bottom:1px solid rgba(255,255,255,.12); }
.side nav { flex:1; padding:14px 0; overflow-y:auto; }
.side nav a {
  display:flex; align-items:center; gap:12px; padding:12px 22px;
  font-size:.86rem; letter-spacing:.08em; opacity:.82; border-left:3px solid transparent; transition:.2s;
}
.side nav a:hover { background:rgba(255,255,255,.07); opacity:1; }
.side nav a.current { background:rgba(255,255,255,.1); border-left-color:var(--gold); opacity:1; color:#fff; }
.side nav .grp { font-size:.62rem; letter-spacing:.25em; opacity:.45; padding:16px 22px 6px; }
.side .user { padding:16px 22px; border-top:1px solid rgba(255,255,255,.12); font-size:.78rem; display:flex; align-items:center; gap:10px; }
.side .user .av { width:34px; height:34px; border-radius:50%; overflow:hidden; flex-shrink:0; }
.side .user .av img { width:100%; height:100%; object-fit:cover; }
.side .user a { opacity:.6; font-size:.68rem; }

/* ---- main ---- */
.main { flex:1; min-width:0; padding:26px 30px 60px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.topbar h1 { font-family:var(--serif); font-size:1.35rem; letter-spacing:.1em; font-weight:600; }
.topbar .date { font-size:.8rem; color:var(--sub); }
.crumb { font-size:.75rem; color:var(--sub); margin-bottom:6px; }
.crumb a { color:var(--moss); }

/* ---- cards / KPI ---- */
.kpi-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:24px; }
.kpi {
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:18px;
  display:block; transition:.2s; position:relative; overflow:hidden;
}
a.kpi:hover { border-color:var(--moss); box-shadow:0 4px 18px rgba(36,56,43,.08); }
.kpi .lbl { font-size:.72rem; color:var(--sub); letter-spacing:.1em; }
.kpi .num { font-family:var(--serif); font-size:1.9rem; line-height:1.3; }
.kpi .num small { font-size:.8rem; margin-left:2px; }
.kpi.warn .num { color:var(--red); }
.kpi.ok .num { color:var(--moss); }

.panel { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:22px; margin-bottom:20px; }
.panel h2 { font-size:.95rem; letter-spacing:.12em; margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.panel h2 .ic { color:var(--gold); }
.panel h2 .more { margin-left:auto; font-size:.72rem; color:var(--moss); font-weight:400; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
@media (max-width:1000px) { .two-col { grid-template-columns:1fr; } }

/* ---- quick actions ---- */
.quick-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:24px; }
.quick-row a {
  background:var(--moss); color:#fff; border-radius:10px; padding:16px 12px; text-align:center;
  font-size:.82rem; letter-spacing:.08em; transition:.2s;
}
.quick-row a:hover { background:var(--moss-deep); }
.quick-row a .ic { display:block; font-size:1.25rem; margin-bottom:4px; }
.quick-row a.alt { background:#fff; color:var(--moss); border:1px solid var(--moss); }
.quick-row a.alt:hover { background:var(--bg); }

/* ---- table ---- */
.tbl { width:100%; border-collapse:collapse; font-size:.86rem; }
.tbl th { text-align:left; font-size:.7rem; letter-spacing:.12em; color:var(--sub); padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl td { padding:13px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl tr:last-child td { border-bottom:none; }
.tbl tbody tr { transition:.15s; }
.tbl tbody tr:hover { background:#faf8f2; }
.tbl a.nm { color:var(--moss); font-weight:500; }

/* ---- status pills ---- */
.pill { display:inline-block; font-size:.68rem; letter-spacing:.06em; padding:3px 12px; border-radius:999px; white-space:nowrap; }
.pill.consult { background:#eef2f6; color:var(--blue); }
.pill.estimate { background:#f7efe2; color:#9a7b32; }
.pill.work { background:#e9f2ea; color:var(--green); }
.pill.bill { background:#f6e9e6; color:var(--red); }
.pill.done { background:#ececec; color:#777; }
.pill.future { background:#eee; color:#999; border:1px dashed #bbb; }

/* ---- buttons ---- */
.btn { display:inline-flex; align-items:center; gap:8px; font-size:.82rem; letter-spacing:.08em; padding:11px 22px; border-radius:8px; border:1px solid var(--moss); background:var(--moss); color:#fff; transition:.2s; text-decoration:none; }
.btn:hover { background:var(--moss-deep); }
.btn.ghost { background:transparent; color:var(--moss); }
.btn.ghost:hover { background:#eef0e8; }
.btn.sm { padding:7px 14px; font-size:.74rem; border-radius:6px; }
.btn.danger { background:var(--red); border-color:var(--red); }

/* ---- forms ---- */
.fld label { display:block; font-size:.72rem; letter-spacing:.1em; color:var(--sub); margin-bottom:5px; }
.fld input, .fld select, .fld textarea {
  width:100%; font-family:var(--sans); font-size:.9rem; padding:11px 13px;
  border:1px solid var(--line); border-radius:8px; background:#fff; outline:none; transition:border .2s; color:var(--ink);
}
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color:var(--moss); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid .w { grid-column:1 / -1; }
@media (max-width:760px) { .form-grid { grid-template-columns:1fr; } }

/* ---- tabs ---- */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:20px; overflow-x:auto; }
.tabs button {
  background:none; border:none; font-size:.84rem; letter-spacing:.08em; color:var(--sub);
  padding:11px 18px; border-bottom:2px solid transparent; white-space:nowrap;
}
.tabs button.active { color:var(--moss-deep); border-bottom-color:var(--gold); font-weight:600; }
.tabpane { display:none; } .tabpane.active { display:block; }

/* ---- timeline ---- */
.tl { position:relative; padding-left:22px; }
.tl::before { content:""; position:absolute; left:6px; top:6px; bottom:6px; width:1.5px; background:var(--line); }
.tl li { position:relative; padding-bottom:18px; font-size:.84rem; }
.tl li::before { content:""; position:absolute; left:-20px; top:7px; width:9px; height:9px; border-radius:50%; background:var(--gold); }
.tl li .dt { font-size:.7rem; color:var(--sub); display:block; }

/* ---- photo grid ---- */
.pgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; }
.pgrid .p { aspect-ratio:1; overflow:hidden; border-radius:8px; position:relative; }
.pgrid .p img { width:100%; height:100%; object-fit:cover; }
.pgrid .p .cap { position:absolute; inset:auto 0 0 0; background:rgba(20,26,20,.65); color:#fff; font-size:.62rem; padding:3px 8px; }
.pgrid .add { aspect-ratio:1; border:2px dashed var(--line); border-radius:8px; display:grid; place-items:center; color:var(--sub); font-size:.72rem; text-align:center; cursor:pointer; }
.pgrid .add:hover { border-color:var(--moss); color:var(--moss); }

/* ---- notice / future ---- */
.future-box { border:1px dashed var(--gold); background:#fbf7ee; border-radius:10px; padding:14px 18px; font-size:.8rem; color:#8a6d3b; margin-top:14px; }
.demo-tag { position:fixed; right:14px; bottom:14px; z-index:50; background:var(--gold); color:#fff; font-size:.62rem; letter-spacing:.22em; padding:6px 14px; border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.2); pointer-events:none; }

/* ---- mobile / iPad ---- */
.menu-btn { display:none; }
@media (max-width:860px) {
  .side { position:fixed; z-index:90; left:0; transform:translateX(-100%); transition:transform .3s; box-shadow:4px 0 30px rgba(0,0,0,.2); }
  .side.open { transform:none; }
  .menu-btn { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:9px 14px; font-size:.8rem; }
  .main { padding:18px 16px 70px; }
  .overlay { position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:80; display:none; }
  .overlay.show { display:block; }
}