/* サンプル印刷 売上分析（デモ版・架空の数字）
   骨組み: 表が主役・月の段は1つ
   見た目: やわらか系 × 配色「写真の緑」
   部品の採決（2026-11-03）: U1 表の見出し=砂色＋今年に緑の下線 / U2 月の段=‹ 年月 ›＋単月・累計 / U3 左メニュー=文字だけ・淡い緑
   U4 前年比=▲▼＋色 / U5 スマホ=下のタブ（案2に変更）。タイトルは文字だけ（丸いアイコンなし） */
:root {
  --bg: #F4F3EE; --card: #ffffff; --line: #E2DED4; --sand: #EBE9E1; --sand-2: #E2DFD5; --row-line: #EFECE5; --hover: #FAF9F5;
  --ink: #2F332D; --muted: #6E7068;
  --c1: #1F6A2E; --c1-dk: #17501F; --c1-mid: #5F9468; --c2: #B9D3BE; --c3: #E2DED4; --c4: #C5C2B8;
  --ma: #C99A3E; --good: #1F6A2E; --bad: #A8443A; --bad-bg: #F6E3DE; --good-bg: #E0EEE2;
  --r-lg: 22px; --r-md: 16px; --r-sm: 10px;
  /* 白い板（カード・数字の枠・月の段・知らせ・窓）は、角の丸みと内側の余白を1つにそろえる（2026-11-11 ご意見: 板ごとの丸み・余白のずれで一体感が崩れる） */
  --r-panel: 16px; --pad-y: 14px; --pad-x: 20px; --gap: 16px; /* 板と板のすき間も1つ */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --font: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 500 13px/1.6 var(--font); }
h1, h2, h3 { margin: 0; font-weight: 900; }
button, select, input { font: inherit; color: inherit; }
button:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--c1); outline-offset: 2px; }
#page-title:focus { outline: none; }
.muted { color: var(--muted); }
.good { color: var(--good); font-weight: 700; }
.bad { color: var(--bad); font-weight: 700; }

/* ---------- 骨組み: 左メニュー ＋ 本文 ---------- */
.shell { display: grid; grid-template-columns: 196px minmax(0, 1fr); min-height: 100vh; }
.menu { background: var(--card); border-right: 1px solid var(--line); padding: var(--sp-5) var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; }
.menu-brand { padding: 0 var(--sp-3) var(--sp-4); font-size: 15px; font-weight: 900; line-height: 1.4; }
.menu-brand small { display: block; font-size: 11px; color: var(--muted); font-weight: 700; }
.menu-item { width: 100%; text-align: left; padding: 8px var(--sp-3); min-height: 38px; font-size: 14px; font-weight: 700; color: var(--muted); border: 0; background: transparent; border-radius: var(--r-sm); cursor: pointer; }
.menu-item:hover:not(.on) { background: var(--sand); color: var(--ink); }
.menu-item.on { background: var(--good-bg); color: var(--c1-dk); font-weight: 900; }
.menu-group { padding: var(--sp-3) var(--sp-3) 2px; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .05em; }
.menu-group:first-child { padding-top: 0; }
.menu-sep { border-top: 1px solid var(--line); margin: var(--sp-2) var(--sp-3); }
.menu-foot { margin-top: auto; padding: var(--sp-3); font-size: 11.5px; color: var(--muted); line-height: 1.7; }
.content { min-width: 0; display: flex; flex-direction: column; padding: var(--sp-5) var(--sp-6) var(--sp-6); gap: var(--gap); }
.content > * { max-width: 1240px; }
#main { display: flex; flex-direction: column; gap: var(--gap); }

/* ---------- 上の帯: 題 ＋ ボタン ---------- */
/* 題と月の段は上に固定する（2026-11-03「月選択欄も」）。表の見出しはその下の表の中で固定 */
.pagehead { position: sticky; top: 0; z-index: 10; background: var(--bg); display: flex; flex-direction: column; gap: var(--sp-3);
  margin: calc(-1 * var(--sp-5)) 0 0; padding: var(--sp-5) 0 var(--sp-2); }
body.picker-open .pagehead { z-index: 25; }
.topbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.topbar h1 { font-size: 21px; margin-right: auto; }
.tools { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.tool { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.tool:hover { border-color: var(--c1-mid); }
.tool-more { display: none; }
/* まだ見ていないお知らせがあるときの印（更新情報のボタン・スマホの「…」） */
.tool.has-news { position: relative; }
.tool.has-news::after { content: ''; position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px var(--card); }

/* ---------- 月の段（U2 案2）: ‹ [印] 2026年8月 › ＋ 単月・累計 ＋ 差額 ---------- */
.period { position: relative; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; background: var(--card); border-radius: var(--r-panel); padding: 10px var(--pad-x); }
.step { display: inline-flex; align-items: center; gap: 2px; background: var(--sand); border-radius: 999px; padding: 3px; }
.step-btn { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font: 700 18px/1 var(--font); cursor: pointer; }
.step-btn:hover:not(:disabled) { background: var(--card); color: var(--ink); }
.step-btn:disabled { opacity: .35; cursor: default; }
.step-month { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; background: var(--card); padding: 6px 14px; font-size: 15px; font-weight: 900; cursor: pointer; font-variant-numeric: tabular-nums; }
.step-month svg { width: 15px; height: 15px; color: var(--c1); flex: none; }
.step-month[aria-expanded="true"] { box-shadow: 0 0 0 1.5px var(--c1) inset; }
.seg { display: inline-flex; background: var(--sand); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--c1-dk); box-shadow: 0 1px 3px rgba(47, 51, 45, .15); }
.chk { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; }
.chk[aria-pressed="true"] { border-color: var(--c1); color: var(--c1-dk); background: var(--good-bg); }
.cust-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.cust-pick select { border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; background: var(--card); font-weight: 700; color: var(--ink); max-width: 240px; }
.cust-pick.on select { border-color: var(--c1); background: var(--good-bg); color: var(--c1-dk); }
.period-note { font-size: 12px; color: var(--muted); margin-left: auto; }
.picker { position: absolute; top: calc(100% + 8px); left: var(--sp-4); z-index: 30; width: min(360px, calc(100vw - 32px)); max-height: min(420px, 70vh); overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: 0 10px 30px rgba(47, 51, 45, .18); padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.picker-year { font-weight: 900; color: var(--muted); font-size: 13px; }
.picker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.picker-grid button { border: 1px solid var(--line); background: var(--card); border-radius: var(--r-sm); padding: 8px 0; font-weight: 700; font-size: 14px; cursor: pointer; }
.picker-grid button:hover:not(:disabled) { border-color: var(--c1); }
.picker-grid button:disabled { color: var(--line); background: transparent; cursor: default; }
.picker-grid button.on { background: var(--c1); border-color: var(--c1); color: #fff; }
body.picker-open::after { content: ''; position: fixed; inset: 0; z-index: 20; background: rgba(244, 243, 238, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ---------- 数字の出どころ（全ページ）・立替を含めたときの黄色の帯 ---------- */
.trust { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted); padding: 0 var(--sp-2); }
.trust b { color: var(--c1-dk); }
.trust-ok { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--good-bg); color: var(--c1-dk); font-size: 10px; font-weight: 900; }
.warnband { background: #FFF1C9; color: #5A4300; border-radius: var(--r-panel); padding: 10px var(--pad-x); font-size: 13px; }
.linkbtn { border: 0; background: transparent; padding: 0; color: var(--c1-dk); font-weight: 900; text-decoration: underline; cursor: pointer; }
#trust:empty { display: none; }

/* ---------- 今月のまとめ: 大きな数字 ---------- */
.kcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.kcard { background: var(--card); border-radius: var(--r-panel); padding: var(--pad-y) var(--pad-x); display: flex; flex-direction: column; gap: 4px; }
.kcard-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.kcard-value { font-size: 30px; font-weight: 900; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kcard.k-good .kcard-value { color: var(--good); }
.kcard.k-bad .kcard-value { color: var(--bad); }
.kcard-unit { font-size: 14px; font-weight: 700; margin-left: 3px; color: var(--muted); }
.kcard-sub { font-size: 12.5px; line-height: 1.6; }
.two { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--gap); align-items: start; }
.card-bad .card-head h2::before { content: '●'; color: var(--bad); margin-right: 6px; font-size: 12px; vertical-align: 2px; }
.card-good .card-head h2::before { content: '●'; color: var(--good); margin-right: 6px; font-size: 12px; vertical-align: 2px; }
.issues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; counter-reset: issue; }
.issue { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--row-line); counter-increment: issue; }
.issue:last-child { border-bottom: 0; }
.issue::before { content: counter(issue); flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 12px; background: var(--bad-bg); color: var(--bad); }
.card-good .issue::before { background: var(--good-bg); color: var(--good); }
.issue-body { flex: 1; min-width: 0; }
.issue-title { font-weight: 900; font-size: 14px; }
.issue-text { font-size: 13px; line-height: 1.7; }
.issue .btn { flex: none; }
@media screen and (max-width: 600px) {
  .issue { flex-wrap: wrap; }
  .issue .btn { margin-left: 36px; }
  .kcard-value { font-size: 24px; }
}
@media screen and (max-width: 1100px) {
  .kcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 打ち合わせ資料・メモ ---------- */
.pack-bar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.memo-in { width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; font: inherit; font-size: 14px; line-height: 1.7; resize: vertical; background: var(--card); }
.memo-in:focus { outline: 2px solid var(--c1); outline-offset: 1px; }
.memo-prev { background: #FFF8E6; border-radius: var(--r-sm); padding: 8px 12px; }
.memo-prev-head { font-weight: 900; font-size: 12.5px; color: #6B5400; }
.memo-text { white-space: pre-wrap; font-size: 13.5px; line-height: 1.7; }
.memo-lines { height: 60mm; background: repeating-linear-gradient(transparent 0 9mm, var(--line) 9mm calc(9mm + 1px)); }
body.packing .pagehead, body.packing #notice { display: none; }
body.packing .chart { height: 230px; } /* 印刷の前に、この高さで描いておく */
.pack-sec { display: flex; flex-direction: column; gap: var(--sp-3); }
.pack-head span { font-size: 11px; color: var(--muted); }
.pack-head h2 { font-size: 18px; }
.pack-foot { font-size: 10.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 4px; }

/* ---------- 会議の記録 ---------- */
.field { display: flex; flex-direction: column; gap: 4px; }
.field > span { font-weight: 900; font-size: 13px; }
.todo-tbl { width: 100%; border-collapse: collapse; }
.todo-tbl th { font-size: 11.5px; color: var(--muted); font-weight: 700; text-align: left; padding: 2px 4px; }
.todo-tbl td { padding: 3px 4px; }
.todo-tbl .td-chk { width: 32px; text-align: center; }
.todo-tbl td:nth-child(3), .todo-tbl th:nth-child(3) { width: 130px; }
.todo-tbl td:last-child, .todo-tbl th:last-child { width: 48px; }
.todo-tbl input[type="checkbox"], .todo-list input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--c1); vertical-align: -3px; }
.txt-in { width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 10px; background: var(--card); }
.txt-in.owner { width: 100%; }
.txt-in:focus { outline: 2px solid var(--c1); outline-offset: 1px; }
.btn-x { padding: 4px 10px; }
.carried { background: #FFF8E6; border-radius: var(--r-sm); padding: 8px 12px; }
.carried-head { font-weight: 900; font-size: 12.5px; color: #6B5400; }
.todo-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.todo-list li small { display: block; margin-left: 26px; font-size: 11px; color: var(--muted); }
.todo-list li.done label { text-decoration: line-through; color: var(--muted); }
.box { display: inline-block; font-size: 10px; font-weight: 700; border: 1px solid var(--ink); border-radius: 4px; padding: 0 4px; margin-right: 6px; }

/* ---------- 月間報告書（A4横1枚） ---------- */
.rp-sheet { background: var(--card); border-radius: var(--r-panel); padding: var(--pad-y) var(--pad-x); font-size: 12px; line-height: 1.5; }
.rp-head { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; border-bottom: 2px solid var(--ink); padding-bottom: 6px; margin-bottom: 8px; }
.rp-head b { font-size: 17px; font-weight: 900; }
.rp-head span { color: var(--muted); }
.rp-head .rp-made { margin-left: auto; }
.rp-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; }
.rp-col { min-width: 0; }
.rp-sheet h3 { font-size: 13px; font-weight: 900; margin: 12px 0 4px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.rp-col > h3:first-child { margin-top: 0; }
.rp-sheet h3 small { font-size: 11px; color: var(--muted); font-weight: 500; }
.rp-sheet .note { font-size: 11px; margin: 2px 0 0; }
table.rp-t { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
table.rp-t th { font-size: 11px; color: var(--muted); font-weight: 700; text-align: left; border-bottom: 1px solid var(--line); padding: 3px 6px; background: var(--sand); }
table.rp-t td { padding: 3px 6px; border-bottom: 1px solid var(--row-line); white-space: nowrap; }
table.rp-t .r { text-align: right; }
table.rp-t td small { display: block; font-size: 10px; color: var(--muted); white-space: normal; }
table.rp-t .now { background: var(--good-bg); font-weight: 700; }
table.rp-t.mini th, table.rp-t.mini td { padding: 3px 4px; font-size: 11px; }
table.rp-t tr.rest td { color: var(--muted); }
table.rp-t .up::before, table.rp-t .dn::before { content: none; }
.rp-wrap { overflow-x: auto; }
.rp-sheet .memo-text { font-size: 12px; }
.rp-sheet .carried { padding: 4px 8px; margin-top: 4px; }
@media screen and (max-width: 900px) {
  .rp-grid { grid-template-columns: minmax(0, 1fr); }
  .rp-head .rp-made { margin-left: 0; }
  table.rp-t:not(.mini) { display: block; overflow-x: auto; }
}

/* ---------- 新しい月が入ったときの1行の知らせ ---------- */
.notice { display: flex; align-items: center; gap: var(--sp-3); background: var(--good-bg); color: var(--c1-dk); border-radius: var(--r-panel); padding: 8px var(--pad-x); font-size: 13.5px; }
.notice span { margin-right: auto; }
.notice-x { border: 0; background: transparent; font-size: 18px; line-height: 1; color: var(--c1-dk); cursor: pointer; padding: 2px 6px; border-radius: var(--r-sm); }
#notice:empty { display: none; }

/* ---------- 板（表をのせる白い板） ---------- */
.card { background: var(--card); border-radius: var(--r-panel); padding: var(--pad-y) var(--pad-x) calc(var(--pad-y) + 4px); display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.card-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.card-head h2 { font-size: 16px; }
.card-head .card-note { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; font-size: 12px; color: var(--muted); }
.btn { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.btn:hover:not(:disabled) { border-color: var(--c1-mid); }
.btn-primary { border: 0; background: var(--c1); color: #fff; border-radius: 999px; padding: 8px 18px; font-size: 13px; font-weight: 900; cursor: pointer; }
.btn-primary:disabled, .btn:disabled { opacity: .5; cursor: default; }
.actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.note { font-size: 12px; color: var(--muted); }
.unit { font-size: 12px; color: var(--muted); }

/* ---------- 表（U1 案2: 砂色の見出し。今年は文字だけ緑。下線は 2026-11-10 ご意見で外した） ---------- */
.tbl-wrap { overflow-x: auto; }
.tbl { border-collapse: separate; border-spacing: 0; width: 100%; font-variant-numeric: tabular-nums; font-size: 13px; }
.tbl th, .tbl td { padding: 7px 10px; white-space: nowrap; }
.tbl thead th { background: var(--sand); color: var(--muted); font-weight: 700; font-size: 12px; text-align: left; }
.tbl thead tr:first-child th:first-child { border-top-left-radius: var(--r-sm); }
.tbl thead tr:first-child th:last-child { border-top-right-radius: var(--r-sm); }
.tbl thead th.now { color: var(--c1-dk); }
.tbl thead th.grp { text-align: center; font-size: 12.5px; }
.tbl th.r, .tbl td.r { text-align: right; }
.tbl tbody td { border-bottom: 1px solid var(--row-line); }
.tbl tbody tr:hover td { background: var(--hover); }
.tbl td.name { min-width: 180px; }
.tbl td.share, .tbl th.share { color: var(--muted); font-size: 12px; }
.tbl tfoot td { font-weight: 900; border-top: 2px solid var(--ink); background: var(--card); }
.tbl tfoot tr + tr td { border-top: 0; font-weight: 700; }
.tbl tr.child td { font-size: 12px; color: var(--muted); background: #FBFAF7; }
.tbl tr.child td.name { padding-left: 28px; }
.tbl tr.sel td { background: var(--good-bg); }
/* 見出しの固定（2026-11-03 決定 案1）: 長い表はその中で縦にも動き、年と列の名前は上に残る。題と月の段は固定しない */
.tbl-wrap.sticky { max-height: calc(100vh - var(--pagehead-h, 150px) - 110px); min-height: 240px; overflow: auto; }
.tbl-wrap.sticky thead th { position: sticky; top: 0; z-index: 2; }
.tbl-wrap.sticky thead tr + tr th { top: var(--head1, 33px); }
/* 左の名前の列も固定（横に動かしても、どの行の数字か分かるように） */
.tbl-wrap.sticky tbody td:first-child, .tbl-wrap.sticky tfoot td:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); box-shadow: 1px 0 0 var(--row-line); }
.tbl-wrap.sticky thead tr:first-child th:first-child { left: 0; z-index: 3; box-shadow: 1px 0 0 var(--line); }
.tbl-wrap.sticky tr.child td:first-child { background: #FBFAF7; }
.tbl-wrap.sticky tr.sel td:first-child { background: var(--good-bg); }
.tbl tr.sub td { background: var(--bg); font-weight: 900; font-size: 12.5px; color: var(--ink); }
.tbl-wrap.sticky tr.sub td:first-child { background: var(--bg); }
.tbl tr.cont td { border-top: 0; }
.items-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.outlook { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.ol-cell { background: var(--card); border-radius: var(--r-panel); padding: var(--pad-y) var(--pad-x); }
.ol-label { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.ol-value { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; }
.ol-value small { font-size: 13px; color: var(--muted); margin-left: 3px; }
.ol-cell.k-good .ol-value { color: var(--good); }
.ol-cell.k-bad .ol-value { color: var(--bad); }
.ol-sub { font-size: 12px; }
@media screen and (max-width: 1100px) { .outlook { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.goal-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.goal-fy select { border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; background: var(--card); font-weight: 700; margin-left: 6px; }
.goal-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; font-size: 14px; }
.num-in { width: 88px; text-align: right; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 8px; font-variant-numeric: tabular-nums; background: var(--card); }
.num-in.wide { width: 150px; }
.num-in:focus { outline: 2px solid var(--c1); outline-offset: 1px; }
.goal-sum { margin: 0; background: #FFF8E6; border-radius: var(--r-sm); padding: 8px 12px; font-weight: 700; }
.toggle { border: 0; background: transparent; padding: 0; font-weight: 700; cursor: pointer; text-align: left; }
/* U4 案2: ▲▼＋色 */
.up { color: var(--good); font-weight: 700; }
.dn { color: var(--bad); font-weight: 700; }
.up::before { content: '▲ '; font-size: 10px; }
/* 小さな動きは色を弱める・大きく減った行は薄い赤地（2026-11-11 #2） */
.up.weak, .dn.weak { font-weight: 500; opacity: .55; }
.tbl tr.warn td { background: var(--bad-bg); }
.tbl-wrap.sticky tr.warn td:first-child { background: var(--bad-bg); }
.tbl tbody tr.warn:hover td { background: #F1D6CF; }
.tag { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; line-height: 1.7; vertical-align: 1px; }
.tag-new { background: var(--good-bg); color: var(--c1-dk); }
.tag-lost { background: var(--bad-bg); color: var(--bad); }
.tag-flat { background: #FFF1C9; color: #6B5400; }
.legend { display: flex; align-items: center; gap: 6px; }
.legend-warn { display: inline-block; width: 14px; height: 10px; border-radius: 3px; background: var(--bad-bg); border: 1px solid #E8C4BB; }
.dn::before { content: '▼ '; font-size: 10px; }

.chart { position: relative; height: 320px; }
.cover { margin: 0; background: var(--bg); border-radius: var(--r-sm); padding: 6px 12px; font-size: 12.5px; }
.chart-fail { color: var(--muted); font-size: 12px; }

/* ---------- くわしく（たたむ） ---------- */
details.more { border-top: 1px solid var(--line); padding-top: var(--sp-3); }
details.more > summary { cursor: pointer; font-weight: 700; color: var(--muted); font-size: 13px; }
details.more[open] > summary { margin-bottom: var(--sp-3); }

/* ---------- データ更新 ---------- */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--sp-5); font-size: 13px; }
.kv .k { color: var(--muted); }
.kv .ind { padding-left: var(--sp-4); }
.drop { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center; border: 2px dashed var(--line); border-radius: var(--r-sm); padding: var(--sp-5); color: var(--muted); cursor: pointer; }
.drop.over { border-color: var(--c1); background: var(--good-bg); }
.drop.busy { opacity: .6; }
.err { background: var(--bad-bg); color: var(--ink); border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4); }
.err b { color: var(--bad); }
.err-text { font-size: 12.5px; }
.progress { display: flex; align-items: center; gap: var(--sp-3); font-size: 12.5px; color: var(--muted); }
.progress-bar { width: 200px; height: 8px; border-radius: 999px; background: var(--sand); overflow: hidden; }
.progress-fill { height: 100%; background: var(--c1); }
.empty { color: var(--muted); padding: var(--sp-4) 0; }
.empty-state { background: var(--card); border-radius: var(--r-panel); padding: var(--sp-6) var(--pad-x); display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.empty-title { font-size: 16px; font-weight: 900; }
.empty-text { color: var(--muted); }
.switch { display: inline-flex; gap: var(--sp-2); align-items: center; align-self: flex-start; }

/* ---------- 窓（よくある質問・更新情報） ---------- */
dialog.dlg { border: 0; border-radius: var(--r-panel); padding: 0; width: min(560px, calc(100vw - 32px)); max-height: 80vh; color: var(--ink); background: var(--card); }
dialog.dlg::backdrop { background: rgba(47, 51, 45, .35); }
.dlg-head { display: flex; align-items: center; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--card); }
.dlg-head h2 { font-size: 16px; margin-right: auto; }
.dlg-body { padding: var(--sp-4) var(--sp-5) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); font-size: 13.5px; line-height: 1.8; }
.dlg-body h3 { font-size: 14px; }
.dlg-body ul { margin: 0; padding-left: 1.2em; }
.dlg-body p { margin: 0; }
.rel-date { font-size: 12px; color: var(--muted); font-weight: 500; margin-left: var(--sp-2); }

.fb-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.fb-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 13px; }
.fb-form select, .fb-form input, .fb-form textarea { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; font-weight: 500; background: var(--card); }
.fb-form textarea { resize: vertical; }
.fb-tabs { align-self: flex-start; }
.fb-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.fb-items li { border-bottom: 1px solid var(--row-line); padding-bottom: var(--sp-2); }
.fb-st { font-size: 11px; border-radius: 999px; padding: 1px 8px; background: var(--sand); margin-left: 6px; }
.fb-done { background: var(--good-bg); color: var(--c1-dk); }
.fb-reply { margin-top: 4px; background: var(--hover); border-radius: var(--r-sm); padding: 6px 10px; }

/* ---------- スマホ（U5 案2 に変更 2026-11-03「タブは画面下の方が操作しやすい」）: 上は題だけ、ページの切り替えは下のタブ ---------- */
.mbar, .msheet { display: none; }
.demo-chip { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 999px; background: #FFF1C9; color: #6B5400; font-size: 11px; font-weight: 700; vertical-align: 1px; }
@media screen and (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .menu { display: none; }
  .mbar { display: block; background: var(--card); border-bottom: 1px solid var(--line); }
  .mbar-title { padding: 10px var(--sp-4); font-weight: 900; font-size: 14px; }
  .mtabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(58px, 1fr); overflow-x: auto; scrollbar-width: none; background: var(--card); border-top: 1px solid var(--line);
    padding: 4px max(4px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px)); }
  .mtab { border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; font-size: 11px; font-weight: 700; color: var(--muted); cursor: pointer; border-radius: var(--r-sm); min-width: 0; }
  .mtab svg { width: 22px; height: 22px; }
  .mtab span { white-space: nowrap; }
  .mtab.on { color: var(--c1-dk); background: var(--good-bg); }
  .mtabs { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-flow: row; overflow: visible; }
  .msheet { position: fixed; left: 8px; right: 8px; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); z-index: 16; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: 0 10px 30px rgba(47, 51, 45, .2); padding: var(--sp-2) var(--sp-2) var(--sp-3); display: flex; flex-direction: column; }
  .msheet-group { font-size: 11px; font-weight: 700; color: var(--muted); padding: var(--sp-2) var(--sp-3) 2px; }
  .msheet-item { display: flex; align-items: center; gap: var(--sp-3); border: 0; background: transparent; padding: 10px var(--sp-3); font-size: 15px; font-weight: 700; text-align: left; border-radius: var(--r-sm); cursor: pointer; }
  .msheet-item svg { width: 22px; height: 22px; color: var(--muted); }
  .msheet-item.on { background: var(--good-bg); color: var(--c1-dk); }
  .content { padding: var(--sp-3) var(--sp-3) calc(84px + env(safe-area-inset-bottom, 0px)); }
  .topbar h1 { font-size: 17px; }
  .topbar { position: relative; }
  .tool-more { display: inline-flex; padding: 4px 12px; font-size: 16px; line-height: 1; }
  .tools { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; flex-direction: column; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 6px; box-shadow: 0 10px 30px rgba(47, 51, 45, .18); }
  .tools.open { display: flex; }
  .tools .tool { border: 0; text-align: left; padding: 8px 14px; font-size: 13px; border-radius: var(--r-sm); }
  .tool.pc { display: none; }
  .period { padding: 6px var(--sp-2); gap: 6px; flex-wrap: wrap; }
  .period button { white-space: nowrap; }
  .period .lg { display: none; }
  .step-btn { width: 24px; height: 28px; }
  .step-month { padding: 5px 8px; font-size: 13.5px; gap: 4px; }
  .seg button, .chk { padding: 5px 8px; font-size: 12px; }
  .topbar { flex-wrap: nowrap; }
  .topbar h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .period-note { margin-left: 0; width: 100%; }
  :root { --pad-y: 12px; --pad-x: 12px; --gap: 12px; }
  .tbl { font-size: 12px; }
  .tbl th, .tbl td { padding: 6px 7px; }
  .tbl td.name { min-width: 112px; max-width: 132px; white-space: normal; }
  #ytbl:not(.full) .old { display: none; }
  .card-head .card-note { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .card-head .card-note .seg button, .card-head .card-note .btn { white-space: nowrap; }
  .chart { height: 260px; }
  .tbl-wrap.sticky { max-height: calc(100dvh - var(--pagehead-h, 170px) - 170px - env(safe-area-inset-bottom, 0px)); }
  .pagehead { margin-top: calc(-1 * var(--sp-3)); padding: var(--sp-3) 0 var(--sp-2); gap: var(--sp-2); }
}

/* ---------- 印刷: 表だけを A4 横に ---------- */
@page { size: A4 landscape; margin: 10mm; }
@media print {
  .menu, .mbar, .tools, .tool-more, #notice, .period .step-btn, .seg, .chk, .card-note .btn, details.more:not([open]), .picker { display: none !important; }
  .shell { display: block; }
  .content { padding: 0; }
  .period { padding: 0 0 6px; }
  .card { padding: 0; border-radius: 0; }
  html, body, .pagehead { background: #fff !important; }
  .period, .step, .step-month { background: transparent !important; box-shadow: none !important; padding: 0 !important; }
  .topbar h1::before { content: 'サンプル印刷 売上分析（デモ・架空の数字）　'; font-size: 12px; color: var(--muted); }
  .card-head h2 { font-size: 13px; }
  .tbl, .tbl th, .tbl td, .tbl td.share, .tbl th.share, .tbl thead th { font-size: 10.5px; }
  .tbl-wrap.sticky { max-height: none; overflow: visible; }
  .tbl-wrap.sticky td:first-child, .tbl-wrap.sticky th:first-child { position: static; box-shadow: none; }
  .pagehead { position: static; }
  .tbl th, .tbl td { padding: 3px 6px; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pack-sec + .pack-sec { break-before: page; }
  /* 月間報告書のページでは、報告書の1枚だけを A4横で */
  body.report-page .pagehead, body.report-page #notice, body.report-page #trust, body.report-page .pack-bar { display: none !important; }
  body.report-page .rp-sheet { padding: 0; font-size: 10px; border-radius: 0; break-inside: avoid; }
  body.report-page table.rp-t { font-size: 10px; }
  body.report-page table.rp-t.mini th, body.report-page table.rp-t.mini td { font-size: 9px; padding: 2px 3px; }
  body.report-page .rp-sheet h3 { margin: 8px 0 3px; font-size: 11.5px; }
  body.report-page .rp-wrap { overflow: visible; }
  body.report-page .rp-grid { gap: 12px; }
  body.report-page table.rp-t td, body.report-page table.rp-t th { padding: 1.5px 5px; }
  body.report-page .rp-sheet .memo-text, body.report-page .todo-list { font-size: 10px; line-height: 1.5; }
  body.report-page .rp-sheet .carried { padding: 3px 6px; }
  body.report-page .carried-head { font-size: 10px; }
  body.report-page .rp-sheet .note { font-size: 9px; }
  body.report-page .rp-head { padding-bottom: 4px; margin-bottom: 6px; }
  body.report-page .rp-head b { font-size: 15px; }
  .issue .btn, .pack-bar, #memo-save, .memo-in + .actions, .legend { display: none !important; }
  .kcards { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .kcard { border: 1px solid var(--line); padding: 8px 12px; }
  .kcard-value { font-size: 22px; }
  .two { grid-template-columns: 3fr 2fr; }
  .card { border: 0; }
  .ol-cell { border: 1px solid var(--line); }
  .outlook { grid-template-columns: repeat(4, 1fr); }
}