:root {
  --ink:#2b2724;
  --base:#f7f4ed;
  --paper:#ffffff;
  --oribe:#33604f;
  --oribe-line:#3f6b5f;
  --shino:#a8493a;
  --kiseto:#c9a227;
  --line:#e0dbd1;
  --muted:#645d55;
  --oribe-soft:#e8f0ed;
  --shino-soft:#f8ebe6;
  --kiseto-soft:#faf4d7;
  --shadow:0 10px 30px rgba(43,39,36,.08);
  --tap:44px;
}
* { box-sizing:border-box; }
html { color:var(--ink); background:var(--base); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif; font-size:16px; -webkit-text-size-adjust:100%; }
body { margin:0; min-width:0; overflow-x:hidden; background:var(--base); font-size:1rem; line-height:1.75; }
button,input,select,textarea { max-width:100%; font:inherit; font-size:16px; }
button { cursor:pointer; }
a { color:inherit; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid #8a6d10; outline-offset:2px; }
.app-shell { min-height:100vh; }

/* ---------- sidebar / nav ---------- */
.sidebar { position:fixed; inset:0 auto 0 0; z-index:20; width:268px; display:flex; flex-direction:column; overflow-y:auto; color:#fff; background:var(--ink); }
.brand { min-height:92px; display:flex; align-items:center; gap:12px; padding:20px 18px; border-bottom:1px solid rgba(255,255,255,.14); }
.brand-mark { width:46px; height:46px; display:grid; place-items:center; flex:none; border:1px solid rgba(255,255,255,.55); border-radius:50%; color:#fff; font-family:"Yu Mincho",serif; font-size:21px; }
.brand strong,.brand span { display:block; }
.brand strong { font-size:15px; line-height:1.5; }
.brand span { margin-top:4px; color:#d6d0c6; font-size:12px; letter-spacing:.06em; }
.sidebar nav { padding:14px 10px 24px; }
.nav-group + .nav-group { margin-top:18px; }
.nav-group { display:block; }

/* ---------- よく使う(この端末で選ぶ) ---------- */
.nav-row { display:flex; align-items:stretch; gap:2px; }
.nav-row .nav-link { flex:1 1 auto; min-width:0; }
.nav-row .nav-link > span:last-child { min-width:0; overflow-wrap:anywhere; }
.nav-star { min-width:var(--tap); min-height:var(--tap); flex:none; display:grid; place-items:center; padding:0; border:0; border-radius:8px; background:transparent; color:#b9b1a4; font-size:19px; line-height:1; }
.nav-star:hover { background:rgba(255,255,255,.1); color:#f0d98a; }
.nav-star.is-on { color:#f0d98a; }
.nav-group--fav { padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.14); }
.nav-note { margin:8px 10px 0; color:#b9b1a4; font-size:12px; line-height:1.6; }
.nav-empty { margin:2px 10px 0; color:#cfc8bd; font-size:13px; line-height:1.7; }
.nav-all { margin-top:16px; }
.nav-group > p { margin:0 10px 8px; color:#cfc8bd; font-size:13px; font-weight:800; letter-spacing:.08em; }
.nav-link { min-height:var(--tap); display:flex; align-items:center; gap:11px; margin:3px 0; padding:9px 11px; border-radius:8px; color:#f0ece5; font-size:15px; line-height:1.45; text-decoration:none; }
.nav-link:hover { background:rgba(255,255,255,.1); }
.nav-link.is-active { color:#fff; background:var(--oribe-line); font-weight:800; box-shadow:inset 3px 0 0 #f0d98a; }
.nav-icon { width:29px; height:29px; display:grid; place-items:center; flex:none; border:1px solid currentColor; border-radius:50%; font-size:12px; font-weight:800; }
.sidebar-date { margin-top:auto; padding:17px 19px 21px; background:rgba(0,0,0,.2); }
.sidebar-date span,.sidebar-date strong { display:block; }
.sidebar-date span { color:#cdc6bb; font-size:12px; }
.sidebar-date strong { margin-top:6px; font-size:14px; }

/* ---------- main / topbar ---------- */
.main { min-width:0; margin-left:268px; }
.topbar { position:sticky; top:0; z-index:15; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:11px 28px; border-bottom:1px solid var(--line); background:rgba(247,244,237,.97); backdrop-filter:blur(8px); }
.topbar-title { min-width:0; flex:1 1 auto; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
.topbar-title span { color:var(--muted); font-size:13px; }
.topbar-title strong { font-size:17px; }
.feedback-button,.nav-toggle { min-height:var(--tap); flex:none; padding:10px 15px; border:1px solid var(--oribe); border-radius:6px; color:var(--oribe); background:#fff; font-size:15px; font-weight:800; line-height:1.3; }
.feedback-button:hover,.nav-toggle:hover { color:#fff; background:var(--oribe); }
.nav-toggle { display:none; }
.content { width:100%; max-width:1460px; margin:0 auto; padding:26px 32px 72px; overflow:hidden; }

/* ---------- honesty markers ---------- */
.connection-bar { display:flex; gap:12px; margin-bottom:22px; padding:15px 17px; border:1px solid #b6cac3; border-left:5px solid var(--oribe); border-radius:7px; background:var(--oribe-soft); }
.connection-dot { width:10px; height:10px; flex:none; margin-top:8px; border-radius:50%; background:var(--oribe); box-shadow:0 0 0 4px rgba(51,96,79,.16); }
.connection-bar strong { display:block; font-size:15px; line-height:1.7; }
.connection-bar p { margin:4px 0 0; color:var(--muted); font-size:14px; line-height:1.7; }

/* ---------- page head ---------- */
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:22px; margin:6px 0 24px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.page-head > div:first-child { min-width:0; max-width:860px; }
.page-head h1 { margin:6px 0 10px; color:var(--ink); font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:clamp(28px,3vw,42px); line-height:1.3; letter-spacing:-.02em; }
.page-lede { margin:0; color:#3f3a35; font-size:17px; line-height:1.8; }
.eyebrow { margin:0; color:var(--oribe); font-size:13px; font-weight:900; letter-spacing:.1em; }

/* ---------- badges ---------- */
.badge { display:inline-flex; align-items:center; min-height:26px; padding:4px 10px; border-radius:999px; font-size:13px; font-weight:800; line-height:1.4; white-space:nowrap; }
.badge--sample { color:#4f4a44; background:#e8e4dc; }
.badge--public { color:#fff; background:var(--oribe); }
.badge--unmeasured { color:#5c4a08; border:1px solid #c7ad46; background:var(--kiseto-soft); }
.badge--unregistered { color:#8a3a27; background:var(--shino-soft); }
.badge--quiet { color:#2c5145; background:var(--oribe-soft); }
.source-pair { display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; }
.source-url { color:var(--oribe); font-size:12px; overflow-wrap:anywhere; }
.status { display:inline-flex; align-items:center; min-height:26px; padding:4px 10px; border-radius:5px; font-size:13px; font-weight:800; white-space:nowrap; }
.status--urgent { color:#8a3a27; background:var(--shino-soft); }
.status--quiet { color:#37554b; background:var(--oribe-soft); }

/* ---------- metrics ---------- */
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:22px; }
.metric-card { min-width:0; min-height:var(--tap); padding:20px; border:1px solid var(--line); border-top:5px solid var(--oribe); border-radius:7px; background:var(--paper); box-shadow:0 3px 14px rgba(43,39,36,.04); text-decoration:none; }
.metric-card:hover { border-color:var(--oribe); }
.metric-card--urgent { border-top-color:var(--shino); }
.metric-card > span,.metric-card em { display:block; }
.metric-card > span { color:#3f3a35; font-size:15px; font-weight:800; line-height:1.6; }
.metric-card strong { display:block; margin:10px 0 6px; color:var(--oribe); font-family:Georgia,"Yu Mincho",serif; font-size:44px; line-height:1; }
.metric-card--urgent strong { color:var(--shino); }
.metric-card small { margin-left:4px; font-size:17px; }
.metric-card em { color:var(--muted); font-size:14px; font-style:normal; line-height:1.6; }

/* ---------- panels ---------- */
.panel { min-width:0; margin-bottom:22px; padding:22px; border:1px solid var(--line); border-radius:8px; background:var(--paper); box-shadow:0 3px 13px rgba(43,39,36,.04); }
.panel--flush { padding:0; overflow:hidden; }
.section-title { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px 16px; margin-bottom:16px; }
.section-title--padded { padding:20px 22px 0; }
.section-title h2,.panel h2 { margin:0; font-family:"Yu Mincho",serif; font-size:22px; line-height:1.45; }
.section-title p:not(.eyebrow) { margin:6px 0 0; color:var(--muted); font-size:15px; line-height:1.7; }
.text-link { display:inline-flex; align-items:center; min-height:var(--tap); padding:6px 2px; color:var(--oribe); font-size:15px; font-weight:900; text-decoration:underline; }
.back-link { display:inline-flex; align-items:center; min-height:var(--tap); margin-bottom:6px; padding:8px 14px 8px 10px; border:1px solid var(--oribe); border-radius:999px; color:var(--oribe); background:#fff; font-size:15px; font-weight:800; text-decoration:none; }
.back-link:hover { color:#fff; background:var(--oribe); }
.split-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr); gap:18px; align-items:start; }
.split-layout--equal { grid-template-columns:repeat(2,minmax(0,1fr)); }

/* ---------- desk rows ---------- */
.desk-list { display:grid; }
.desk-row { min-height:var(--tap); display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:4px 12px; align-items:center; padding:14px 4px; border-top:1px solid var(--line); text-decoration:none; }
.desk-row strong { grid-column:1; }
.desk-row span { grid-column:1; }
.desk-row:first-child { border-top:0; }
.desk-row:hover { background:#f7f5f0; }
.desk-row strong { font-size:15px; line-height:1.5; }
.desk-row span,.desk-row small { color:#4a453f; font-size:14px; line-height:1.6; }
.desk-row b { min-width:66px; color:var(--shino); font-size:15px; white-space:nowrap; }
.desk-row small { min-width:90px; white-space:nowrap; }
.manual-note { padding:17px 20px; border-left:5px solid var(--kiseto); background:var(--kiseto-soft); font-size:16px; line-height:1.8; }

/* ---------- buttons ---------- */
.button { min-height:var(--tap); padding:10px 16px; border:1px solid var(--oribe); border-radius:6px; color:var(--oribe); background:#fff; font-size:15px; font-weight:800; line-height:1.3; }
.button--accent { color:#fff; background:var(--oribe); }
.mini-button { min-height:var(--tap); margin:4px 4px 4px 0; padding:10px 14px; border:1px solid var(--oribe); border-radius:5px; color:var(--oribe); background:#fff; font-size:14px; font-weight:800; line-height:1.3; white-space:nowrap; }
.mini-button:hover { color:#fff; background:var(--oribe); }
.target-counter { flex:none; padding:11px 16px; border:1px solid #adc3bc; border-radius:6px; color:var(--oribe); background:var(--oribe-soft); font-size:15px; font-weight:800; }
.target-counter strong { margin-right:4px; font-family:Georgia,serif; font-size:30px; }
.dual-filter { min-height:var(--tap); max-width:380px; padding:12px 15px; border:2px solid var(--shino); border-radius:8px; color:#8a3a27; background:var(--shino-soft); font-size:15px; font-weight:800; line-height:1.6; text-align:left; }
.dual-filter strong { font-size:22px; }
.dual-filter.is-active { color:#fff; background:var(--shino); }

/* ---------- tabs / notes ---------- */
.tab-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:14px 17px; border-bottom:1px solid var(--line); background:#f1eee7; }
.tab-bar .tab { min-height:var(--tap); padding:10px 14px; border:1px solid transparent; border-radius:6px; color:#443f3a; background:#fff; font-size:15px; font-weight:700; }
.tab-bar .tab.is-active { color:#fff; background:var(--oribe); border-color:var(--oribe); }
.tab-bar > span { margin-left:auto; color:var(--muted); font-size:14px; }
.tab-note,.result-note,.panel-note { margin:0; padding:14px 18px; color:#453f3a; background:#faf8f3; font-size:15px; line-height:1.75; }
.result-note { border-top:1px solid var(--line); }

/* ---------- tables (desktop) ---------- */
.table-wrap { width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; min-width:720px; border-collapse:collapse; font-size:15px; }
th,td { padding:13px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; line-height:1.7; }
thead th { color:#4a443e; background:#f1eee7; font-size:14px; letter-spacing:.02em; white-space:nowrap; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:nth-child(even) { background:#fbfaf7; }
tfoot th { background:#f1eee7; font-size:15px; }
td a { color:var(--oribe); font-weight:700; }
.click-row { cursor:pointer; }
.click-row:hover { background:#f2efe8; }
.muted { color:var(--muted); font-size:14px; line-height:1.7; overflow-wrap:anywhere; }
td::before { display:none; }

.nowrap-pair { display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; }
.due-left { display:inline-flex; align-items:center; padding:2px 8px; border-radius:4px; color:#8a3a27; background:var(--shino-soft); font-size:14px; font-weight:800; white-space:nowrap; }

/* ---------- unmeasured ---------- */
.unmeasured { display:grid; grid-template-columns:minmax(230px,.7fr) minmax(300px,1.6fr); gap:20px; align-items:center; margin-top:24px; padding:21px 23px; border:1px solid #c7ad46; border-radius:8px; background:var(--kiseto-soft); }
.unmeasured > div { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.unmeasured h2 { margin:0; color:#4d3f0f; font-size:19px; }
.unmeasured p { margin:0; color:#4e4527; font-size:16px; line-height:1.8; }

/* ---------- svg panels ---------- */
.flow-panel { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(220px,.45fr); gap:20px; align-items:center; }
.flow-panel p { color:#433e39; font-size:16px; line-height:1.8; }
.flow-svg,.device-svg { display:block; width:100%; height:auto; overflow:visible; }
.flow-svg text,.device-svg text { fill:var(--ink); font-size:16px; font-weight:700; }
.svg-paper,.svg-box { fill:var(--base); stroke:var(--oribe); stroke-width:2; }
.svg-card { fill:#fff; stroke:var(--line); stroke-width:2; }
.svg-lens { fill:none; stroke:var(--shino); stroke-width:5; }
.svg-arrow { fill:none; stroke:var(--oribe); stroke-width:3; }
.device-svg rect,.device-svg path { fill:none; stroke:var(--oribe); stroke-width:4; }

/* ---------- funnel ---------- */
.funnel { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin:22px 0; }
.funnel > div { position:relative; min-height:158px; display:flex; flex-direction:column; justify-content:center; padding:16px 14px; border:1px solid var(--line); border-top:6px solid var(--oribe); border-radius:5px; background:#fff; text-align:center; }
.funnel span,.funnel em { color:#453f3a; font-size:14px; font-style:normal; line-height:1.6; }
.funnel em { color:var(--muted); }
.funnel strong { margin:10px 0; color:var(--oribe); font-family:Georgia,serif; font-size:36px; }
.funnel small { font-size:15px; }
.funnel-stop { border-top-color:var(--shino) !important; background:var(--shino-soft) !important; }
.funnel-stop strong { color:var(--shino); }
.core-message { padding:19px 22px; border-left:6px solid var(--shino); color:#69392c; background:var(--shino-soft); font-size:18px; line-height:1.8; }

/* ---------- breakdown / filters ---------- */
.breakdown { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.breakdown > div { min-width:155px; flex:1; padding:15px 17px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.breakdown span,.breakdown strong { display:block; }
.breakdown span { color:#453f3a; font-size:14px; line-height:1.6; }
.breakdown strong { margin-top:6px; color:var(--oribe); font-size:21px; }
.filter-bar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 14px; padding:16px 18px; border-bottom:1px solid var(--line); background:#f4f1eb; }
.filter-bar label:not(.check) { display:grid; gap:5px; color:#413c37; font-size:14px; font-weight:800; }
.filter-bar > strong { margin-left:auto; padding-bottom:8px; color:var(--oribe); font-size:17px; }
select,input[type="number"],input[type="text"] { min-height:var(--tap); padding:9px 11px; border:1px solid #9d968d; border-radius:5px; background:#fff; font-size:16px; }
.check { display:flex; align-items:center; gap:9px; min-height:var(--tap); font-size:15px; }
.check input { width:22px; height:22px; flex:none; accent-color:var(--oribe); }

/* ---------- customer ---------- */
.customer-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.customer-summary { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.customer-summary span { padding:9px 14px; border-radius:999px; background:var(--oribe-soft); color:var(--oribe); font-size:15px; font-weight:800; }
.contact-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.contact-card { display:grid; grid-template-columns:44px 1fr; gap:12px; min-width:0; padding:16px; border:1px solid var(--line); border-radius:6px; background:#fbfaf7; }
.avatar { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--oribe); font-weight:800; }
.contact-card strong,.contact-card > div > span { display:block; }
.contact-card span.badge { display:inline-flex; }
.contact-card strong { font-size:16px; line-height:1.5; }
.contact-card span { color:var(--muted); font-size:14px; }
.contact-card p { margin:8px 0; font-size:14px; line-height:1.7; overflow-wrap:anywhere; }

.empty-state { padding:24px; color:var(--muted); background:#f4f1eb; border-radius:6px; font-size:15px; text-align:center; }
.history { margin:0; padding:0; list-style:none; }
.history-item { position:relative; display:grid; grid-template-columns:120px minmax(0,1fr); gap:6px 20px; padding:16px 0 16px 22px; border-left:3px solid var(--line); }
.history-item::before { content:""; position:absolute; left:-7px; top:23px; width:11px; height:11px; border-radius:50%; background:var(--oribe); }
.history-電話::before,.history-見積::before { background:var(--shino); }
.history-item time { color:#453f3a; font-size:15px; }
.history-item strong { font-size:16px; line-height:1.6; }
.history-item > div > span { display:inline-block; margin-right:8px; padding:2px 8px; border-radius:4px; background:var(--oribe-soft); color:var(--oribe); font-size:13px; font-weight:900; }
.history-item p { margin:6px 0 0; color:#4a453f; font-size:15px; line-height:1.75; }
.compact-list { margin:0; padding:0; list-style:none; }
.compact-list li { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; min-height:var(--tap); padding:12px 0; border-top:1px solid var(--line); font-size:15px; }
.compact-list li:first-child { border-top:0; }
.compact-list span { color:var(--muted); font-size:14px; }
.next-task { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:19px 22px; border-radius:8px; color:#fff; background:var(--oribe); font-size:17px; }
.next-task span { font-size:14px; letter-spacing:.08em; }
.next-task strong { font-size:19px; }
.next-task time { margin-left:auto; font-size:16px; }
.attention-line { padding:15px 18px; border-left:6px solid var(--shino); color:#69392c; background:var(--shino-soft); font-size:16px; line-height:1.8; }

/* ---------- pipeline ---------- */
.scroll-hint { display:flex; align-items:center; gap:8px; margin:18px 0 8px; color:#453f3a; font-size:15px; font-weight:700; }
.scroll-hint::before { content:"→"; display:inline-grid; place-items:center; width:28px; height:28px; flex:none; border-radius:50%; color:#fff; background:var(--oribe); font-weight:900; }
.pipeline-shell { position:relative; }
.pipeline-shell::after { content:""; position:absolute; top:0; right:0; bottom:14px; width:44px; pointer-events:none; background:linear-gradient(to right,rgba(247,244,237,0),rgba(247,244,237,.96)); }
.pipeline-board { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(210px,1fr); gap:12px; align-items:start; padding:2px 44px 14px 2px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.pipeline-column { scroll-snap-align:start; min-width:210px; padding:12px; border:1px solid var(--line); border-radius:7px; background:#efebe3; }
.pipeline-column header { padding-bottom:6px; border-bottom:1px solid #ded8ce; }
.pipeline-column header strong { font-size:16px; }
.pipeline-column header span { float:right; color:var(--oribe); font-size:15px; font-weight:800; }
.pipeline-column header p { margin:6px 0 0; min-height:42px; color:#4c4641; font-size:14px; line-height:1.6; }
.deal-card { margin:10px 0; padding:13px; border:1px solid var(--line); border-left:5px solid var(--oribe); border-radius:5px; background:#fff; box-shadow:0 2px 7px rgba(43,39,36,.06); }
.deal-card--stale { border-left-color:var(--shino); }
.deal-card span,.deal-card strong,.deal-card small,.deal-card b { display:block; }
.deal-card span,.deal-card small { color:var(--muted); font-size:13px; }
.deal-card strong { margin-top:2px; font-size:15px; line-height:1.5; }
.deal-card p { margin:7px 0; font-size:14px; line-height:1.6; }
.deal-card b { margin-top:8px; color:var(--shino); font-size:14px; }

/* ---------- quote / spec papers ---------- */
.quote-controls { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 14px; padding:18px; background:#f4f1eb; }
.quote-controls label { display:grid; gap:6px; color:#413c37; font-size:14px; font-weight:800; }
.unit-input { width:120px; }
.switch { display:flex; align-items:center; gap:7px; min-height:38px; margin-top:6px; color:#4a443e; font-size:14px; font-weight:600; }
.switch input { width:20px; height:20px; flex:none; accent-color:var(--oribe); }
.paper-preview,.instruction-paper { padding:28px; border:1px solid #cfc8bd; border-radius:4px; background:#fff; box-shadow:0 12px 25px rgba(43,39,36,.1); }
.paper-preview header,.instruction-paper header { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 12px; padding-bottom:18px; border-bottom:3px double var(--ink); font-family:"Yu Mincho",serif; font-size:22px; }
.paper-preview dl,.instruction-paper dl { margin:20px 0; }
.paper-preview dl > div,.instruction-paper dl > div { display:grid; grid-template-columns:112px 1fr; gap:4px 12px; padding:11px 0; border-bottom:1px solid var(--line); }
.paper-preview dt,.instruction-paper dt { color:var(--muted); font-size:14px; }
.paper-preview dd,.instruction-paper dd { margin:0; font-size:16px; line-height:1.7; overflow-wrap:anywhere; }
.paper-preview footer { padding-top:18px; border-top:3px double var(--ink); text-align:right; font-size:18px; }
.spec-workflow { display:grid; grid-template-columns:minmax(0,1fr) minmax(350px,.78fr); gap:18px; align-items:start; }
.step-line { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin:0 0 22px; padding:0; list-style:none; }
.step-line li { min-width:0; color:var(--muted); font-size:13px; line-height:1.5; text-align:center; overflow-wrap:anywhere; }
.step-line b { width:32px; height:32px; display:grid; place-items:center; margin:0 auto 6px; border-radius:50%; color:#fff; background:#6b645c; font-size:15px; }
.step-line .is-current { color:var(--shino); font-weight:800; }
.step-line .is-current b { background:var(--shino); }
.step-line span { display:block; }
.field-label { display:grid; gap:6px; margin-bottom:16px; color:#413c37; font-size:15px; font-weight:800; }
.spec-candidate { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 14px; padding:16px 0; border-top:1px solid var(--line); }
.spec-candidate > div { min-width:0; }
.spec-candidate span,.spec-candidate strong { display:block; }
.spec-candidate span { color:var(--shino); font-size:14px; font-weight:800; }
.spec-candidate strong { margin-top:3px; font-size:17px; }
.spec-candidate p { margin:5px 0 0; color:#4a453f; font-size:15px; line-height:1.7; }
.instruction-paper dl { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.instruction-paper dl > div { display:block; }
.instruction-paper .wide { grid-column:1/-1; }
.instruction-paper footer { color:var(--muted); font-size:14px; }

/* ---------- files / access ---------- */
.version-example { display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; margin-bottom:22px; padding:18px 21px; border-left:6px solid var(--oribe); border-radius:5px; background:var(--oribe-soft); }
.version-example > div { min-width:0; }
.version-example span,.version-example strong { display:block; }
.version-example span { color:var(--muted); font-size:14px; }
.version-example strong { font-size:17px; }
.version-example ol { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.version-example li { padding:8px 11px; border-radius:5px; background:#fff; font-size:14px; }
.version-example p { margin:0 0 0 auto; color:var(--muted); font-size:14px; }
.access-table td:not(:first-child) { text-align:center; font-size:22px; font-weight:900; }
.access-yes { color:var(--oribe); }
.access-no { color:#8b847b; }
.device-panel { display:grid; grid-template-columns:minmax(240px,.5fr) minmax(0,1.5fr); gap:24px; align-items:center; }
.device-panel p { color:#433e39; font-size:16px; line-height:1.8; }

/* ---------- hearing ---------- */
.hearing-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.hearing-field { margin:0; padding:15px; border:1px solid var(--line); border-radius:6px; }
.hearing-field legend { padding:0 5px; font-size:16px; font-weight:700; line-height:1.6; }
.hearing-field legend b,.hearing-question b { width:26px; height:26px; display:inline-grid; place-items:center; margin-right:8px; border-radius:50%; color:#fff; background:var(--oribe); font-size:13px; }
.radio-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.radio-row label { position:relative; }
.radio-row input { position:absolute; opacity:0; }
.radio-row span { display:flex; align-items:center; min-height:var(--tap); padding:9px 15px; border:1px solid #b4ada3; border-radius:999px; font-size:15px; }
.radio-row input:checked + span { color:#fff; border-color:var(--oribe); background:var(--oribe); font-weight:800; }
.radio-row input:focus-visible + span { outline:3px solid #8a6d10; outline-offset:2px; }
.hearing-notes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.hearing-question { display:block; }
.hearing-question > span { display:flex; align-items:center; min-height:52px; margin-bottom:6px; font-size:16px; font-weight:800; line-height:1.6; }
textarea { width:100%; padding:12px; border:1px solid #9d968d; border-radius:6px; color:var(--ink); background:#fff; font-size:16px; line-height:1.75; resize:vertical; }
.save-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 20px; margin:22px 0; padding:21px; border-radius:8px; color:#fff; background:var(--ink); }
.save-bar strong,.save-bar span { display:block; }
.save-bar strong { font-size:19px; }
.save-bar span { margin-top:5px; color:#d6d0c6; font-size:15px; }
.save-bar .eyebrow { color:#f0d98a; }
.save-bar .button { border-color:#fff; }
.scope-note { padding:16px 19px; border:1px solid var(--line); border-radius:6px; background:#fff; font-size:16px; line-height:1.8; }

/* ---------- updates ---------- */
.update-entry { display:grid; grid-template-columns:170px 60px 1fr; gap:6px 16px; padding:17px 0; border-bottom:1px solid var(--line); }
.update-entry time,.update-entry span { color:#453f3a; font-size:15px; }
.update-entry strong { font-size:17px; }
.update-entry p { margin:6px 0 0; color:#4a453f; font-size:15px; line-height:1.75; }
.empty-history { margin-top:20px; padding:32px; color:var(--muted); background:#f4f1eb; border-radius:6px; text-align:center; font-size:16px; }
.empty-history strong { color:var(--ink); }
.empty-history p { margin:8px 0 0; }

/* ---------- overlay / modal / toast ---------- */
.nav-overlay { display:none; }
.modal-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:16px; background:rgba(43,39,36,.72); }
.modal { width:min(560px,100%); max-height:92vh; overflow-y:auto; padding:24px; border-radius:10px; background:var(--base); box-shadow:0 18px 60px rgba(0,0,0,.3); }
.modal > p { color:#433e39; font-size:15px; }
.icon-button { width:var(--tap); height:var(--tap); flex:none; border:1px solid var(--line); border-radius:50%; color:var(--ink); background:#fff; font-size:22px; }
.modal-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin-top:16px; }
.toast { position:fixed; right:16px; bottom:16px; z-index:120; max-width:min(420px,calc(100vw - 32px)); padding:14px 18px; border-radius:6px; color:#fff; background:var(--oribe); box-shadow:var(--shadow); font-size:16px; opacity:0; transform:translateY(8px); pointer-events:none; transition:.2s; }
.toast.is-visible { opacity:1; transform:none; }
.not-found { max-width:620px; margin:60px auto; padding:34px; border:1px solid var(--line); border-radius:8px; background:#fff; text-align:center; }
.not-found h1 { font-family:"Yu Mincho",serif; }
.not-found .button { display:inline-flex; align-items:center; margin-top:14px; text-decoration:none; }

@media (prefers-reduced-motion:reduce) {
  * { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .pipeline-board { scroll-snap-type:none; }
}

/* ================= 1180px ================= */
@media (max-width:1180px) {
  .content { padding-inline:24px; }
  .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .funnel { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .contact-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .spec-workflow { grid-template-columns:1fr; }
}

/* ================= 1023px : drawer ================= */
@media (max-width:1023px) {
  .sidebar { width:min(300px,86vw); transform:translateX(-100%); transition:transform .2s; box-shadow:8px 0 30px rgba(0,0,0,.25); }
  body.nav-open .sidebar { transform:none; }
  .nav-overlay { display:block; position:fixed; inset:0; z-index:19; border:0; background:rgba(43,39,36,.5); }
  .main { margin-left:0; }
  .nav-toggle { display:block; }
  .topbar { padding-inline:18px; }
  .split-layout,.split-layout--equal { grid-template-columns:1fr; }
  .flow-panel,.device-panel { grid-template-columns:1fr; }
}

/* ================= 767px : phone ================= */
@media (max-width:767px) {
  .content { padding:18px 14px 56px; }
  .topbar { gap:8px 10px; padding:10px 14px; }
  .topbar-title { order:3; flex:1 1 100%; }
  .topbar-title strong { font-size:16px; }
  .nav-toggle { order:1; }
  .feedback-button { order:2; margin-left:auto; }
  .nav-toggle,.feedback-button { padding:10px 12px; font-size:14px; }

  .page-head { display:block; }
  .page-head > :not(:first-child) { margin-top:16px; }
  .page-head h1 { font-size:26px; overflow-wrap:anywhere; }
  .page-lede { font-size:16px; }
  .customer-actions { justify-content:flex-start; }
  .customer-actions .button { flex:1 1 46%; }

  .metric-grid,.funnel,.contact-grid,.hearing-fields,.hearing-notes { grid-template-columns:1fr; }
  .metric-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; align-items:center; padding:15px 17px; }
  .metric-card strong { margin:0; font-size:34px; }
  .metric-card em { grid-column:1/-1; }
  .funnel { gap:6px; }
  .funnel > div { min-height:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:center; padding:12px 14px; border-top:1px solid var(--line); border-left:6px solid var(--oribe); text-align:left; }
  .funnel strong { margin:0; font-size:27px; }
  .funnel em { grid-column:1/-1; }
  .funnel-stop { border-left-color:var(--shino) !important; }

  .desk-row { grid-template-columns:minmax(0,1fr) auto; padding:14px 2px; }
  .desk-row strong,.desk-row span { grid-column:1; }
  .desk-row small { grid-column:1/-1; min-width:0; }
  .unmeasured { grid-template-columns:1fr; gap:12px; padding:18px; }
  .tab-bar > span { width:100%; margin-left:0; }
  .tab-bar .tab { flex:1 1 auto; }
  .filter-bar { gap:10px; }
  .filter-bar label:not(.check),.filter-bar select { width:100%; }
  .filter-bar > strong { width:100%; margin-left:0; padding-bottom:0; }
  .history-item { grid-template-columns:1fr; gap:4px; }
  .next-task time { width:100%; margin-left:0; }
  .paper-preview,.instruction-paper { padding:20px 16px; }
  .paper-preview dl > div,.instruction-paper dl > div { grid-template-columns:1fr; }
  .instruction-paper dl { grid-template-columns:1fr; }
  .instruction-paper .wide { grid-column:auto; }
  .step-line { gap:4px; }
  .step-line li { font-size:11px; }
  .step-line b { width:28px; height:28px; font-size:13px; }
  .spec-candidate { align-items:stretch; flex-direction:column; }
  .spec-candidate .button { width:100%; }
  .version-example,.save-bar { align-items:flex-start; flex-direction:column; }
  .version-example p { margin-left:0; }
  .save-bar .button { width:100%; }
  .update-entry { grid-template-columns:1fr; gap:4px; }
  .modal-actions { flex-direction:column-reverse; }
  .modal-actions .button { width:100%; }
  .unit-input,.quote-controls label,.quote-controls input { width:100%; }
  .quote-controls label { flex:1 1 100%; }
  .breakdown > div { min-width:0; flex:1 1 100%; }
  .scroll-hint { font-size:14px; }

  /* pipeline: one column per screen */
  .pipeline-board { grid-auto-columns:84vw; gap:10px; padding-right:24px; }
  .pipeline-column { min-width:0; }
  .pipeline-shell::after { width:22px; }

  /* ---- wide tables become stacked cards ---- */
  .cardify table { min-width:0; font-size:15px; }
  .cardify .table-wrap { overflow-x:visible; }
  .cardify thead { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .cardify tbody,.cardify tfoot { display:block; }
  .cardify tr { display:block; margin:12px 14px; padding:6px 14px 12px; border:1px solid var(--line); border-left:5px solid var(--oribe); border-radius:7px; background:#fff !important; box-shadow:0 2px 8px rgba(43,39,36,.05); }
  .cardify td { display:grid; grid-template-columns:8.5em minmax(0,1fr); gap:4px 12px; padding:9px 0; border-bottom:1px dashed var(--line); overflow-wrap:anywhere; }
  .cardify tr td:last-child { border-bottom:0; }
  .cardify td::before { content:attr(data-label); display:block; color:var(--muted); font-size:14px; font-weight:800; line-height:1.6; }
  .cardify td[data-label=""]::before,.cardify td:not([data-label])::before { display:none; }
  .cardify td[data-label=""],.cardify td:not([data-label]) { display:block; }
  .cardify td[data-primary] { grid-template-columns:1fr; padding-top:4px; }
  .cardify td[data-primary]::before { display:none; }
  .cardify td[data-primary] strong { font-size:17px; line-height:1.55; }
  .cardify td > .badge,.cardify td > .status,.cardify td > .source-pair,.cardify td > .mini-button { justify-self:start; }
  .cardify td > * { min-width:0; }
  /* 見える範囲：○×は1文字なので、見出しと同じ行に並べる */
  /* 見積のひな型：入力欄が切れないように、項目ごとの積み上げにする */
  .cardify--quote tfoot tr { border-left-color:var(--kiseto); }
  .cardify--quote td[data-label="項目"] { grid-template-columns:1fr; padding-top:4px; font-size:16px; font-weight:800; }
  .cardify--quote td[data-label="項目"]::before { display:none; }
  .cardify--quote td[data-label="単価"] input { width:100%; }
  .cardify--quote tfoot th { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:10px 0; background:transparent; }
  .cardify--quote tfoot th[colspan] { border-bottom:1px dashed var(--line); }

  .cardify .access-table td:not(:first-child) { grid-template-columns:minmax(0,1fr) auto; align-items:center; padding:11px 0; text-align:left; font-size:20px; }
  .cardify .access-table td:not(:first-child)::before { font-size:15px; font-weight:700; }
}

/* ================= 400px ================= */
@media (max-width:400px) {
  .content { padding:16px 12px 52px; }
  .page-head h1 { font-size:24px; }
  .cardify td { grid-template-columns:1fr; }
  .customer-actions .button { flex:1 1 100%; }
  .pipeline-board { grid-auto-columns:86vw; }
}

/* ================= wide screens ================= */
@media (min-width:1024px) {
  }