:root{
  --bg:#F2F4F3; --surface:#FFFFFF; --surface2:#E8EDEB; --ink:#1C2525; --ink2:#566160; --line:#D2D9D7;
  --accent:#2B5A7E; --accent-ink:#FFFFFF; --accent-weak:#DDE8F0;
  --shu:#C23B22; --ok:#2E7D4F; --ok-weak:#DDEFE3; --warn:#9A6412; --warn-weak:#F6EAD2; --bad:#B8322A; --bad-weak:#F7DEDA;
  --ai:#6B4FA0; --ai-weak:#ECE6F5; --swap:#FFF1B8; --swap-ink:#1C2525;
  --paper:#FFFFFF; --paper-ink:#1E1E1E; --paper-line:#D8D8D8;
  --ledger:#FBF8EC; --ledger-rule:#9DB6D3; --ledger-red:#D98C8C; --ledger-ink:#1F2B5C;
  --f-body:"BIZ UDPGothic","Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;
  --f-doc:"BIZ UDPMincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-hand:"Klee One","Hiragino Maru Gothic ProN","Yu Gothic",cursive;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#131A1B; --surface:#1B2426; --surface2:#233033; --ink:#E4EBE9; --ink2:#A2AFAD; --line:#33423F;
    --accent:#7FB0D6; --accent-ink:#0E1A22; --accent-weak:#1E3446;
    --shu:#E36B52; --ok:#62C38A; --ok-weak:#1C3527; --warn:#E3AE55; --warn-weak:#3A2E17; --bad:#EE7A6C; --bad-weak:#3D1F1C;
    --ai:#B9A2E0; --ai-weak:#2C2440; --swap:#5A4C12; --swap-ink:#FFF6D0;
    --paper:#ECEAE3; --paper-ink:#1E1E1E; --paper-line:#C9C6BC;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#131A1B; --surface:#1B2426; --surface2:#233033; --ink:#E4EBE9; --ink2:#A2AFAD; --line:#33423F;
  --accent:#7FB0D6; --accent-ink:#0E1A22; --accent-weak:#1E3446;
  --shu:#E36B52; --ok:#62C38A; --ok-weak:#1C3527; --warn:#E3AE55; --warn-weak:#3A2E17; --bad:#EE7A6C; --bad-weak:#3D1F1C;
  --ai:#B9A2E0; --ai-weak:#2C2440; --swap:#5A4C12; --swap-ink:#FFF6D0;
  --paper:#ECEAE3; --paper-ink:#1E1E1E; --paper-line:#C9C6BC;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.7}
h1,h2,h3{text-wrap:balance;line-height:1.35;margin:0}
h1{font-size:1.5rem}
h2{font-size:1.15rem}
h3{font-size:1rem}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}

/* 見本であることの帯 */

.app{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100%}
.side{background:var(--surface);border-right:1px solid var(--line);padding-block:20px;position:sticky;top:env(safe-area-inset-top,0px);align-self:start;height:100vh;overflow:auto}
.brand{padding-inline:20px;margin-bottom:16px}
.brand .org{font-size:.8rem;color:var(--ink2)}
.brand .name{font-weight:700;font-size:1.15rem;letter-spacing:.04em}
.brand .year{display:inline-block;margin-top:6px;font-size:.8rem;background:var(--accent-weak);color:var(--ink);padding:1px 8px;border-radius:4px}
.nav{display:flex;flex-direction:column;gap:2px;padding-inline:10px}
.nav .grp{font-size:.72rem;letter-spacing:.12em;color:var(--ink2);padding:14px 10px 4px}
.nav a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;color:var(--ink);text-decoration:none}
.nav a:hover{background:var(--surface2)}
.nav a.on{background:var(--accent);color:var(--accent-ink);font-weight:700}
.nav .cnt{font-size:.72rem;background:var(--shu);color:#fff;border-radius:999px;padding:0 7px;line-height:1.6}
.me{margin-top:18px;padding:12px 20px;border-top:1px solid var(--line);font-size:.85rem;color:var(--ink2)}

.main{padding-block:24px 64px;padding-inline:28px;min-width:0}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.head .sub{color:var(--ink2);font-size:.9rem;margin-top:4px}
.crumb{font-size:.8rem;color:var(--ink2)}

.cols{display:grid;gap:20px}
.c-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.c-main-side{grid-template-columns:minmax(0,1fr) 300px}
.c-side-main{grid-template-columns:300px minmax(0,1fr)}
.c-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px}
.panel > h2,.panel > h3{margin-bottom:12px}
.panel-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.note{font-size:.85rem;color:var(--ink2)}
.muted{color:var(--ink2)}

.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);padding:7px 14px;border-radius:7px;cursor:pointer;text-decoration:none;color:var(--ink);font-size:.92rem;white-space:nowrap}
.btn:hover{background:var(--surface2)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.shu{background:var(--shu);border-color:var(--shu);color:#fff}
.btn.sm{padding:3px 10px;font-size:.82rem}

.pill{display:inline-block;font-size:.78rem;padding:1px 10px;border-radius:999px;white-space:nowrap;border:1px solid transparent}
.st-draft{background:var(--surface2);color:var(--ink2)}
.st-wait{background:var(--warn-weak);color:var(--warn)}
.st-done{background:var(--ok-weak);color:var(--ok)}
.st-bad{background:var(--bad-weak);color:var(--bad)}
.chip-ai{display:inline-block;font-size:.7rem;font-weight:700;padding:0 6px;border-radius:4px;background:var(--ai-weak);color:var(--ai);vertical-align:2px;letter-spacing:.04em}
.chip-calc{display:inline-block;font-size:.7rem;font-weight:700;padding:0 6px;border-radius:4px;background:var(--accent-weak);color:var(--accent);vertical-align:2px;letter-spacing:.04em}
:root[data-theme="dark"] .chip-calc{color:var(--ink)}
.ai-text{border-bottom:2px dotted var(--ai)}

/* 押印 */
.hanko-row{display:flex;gap:14px;flex-wrap:wrap}
.hk{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.75rem;color:var(--ink2)}
.hanko{width:50px;height:50px;border-radius:50%;border:2.5px solid var(--shu);color:var(--shu);font-family:var(--f-doc);font-weight:700;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;font-size:.95rem;letter-spacing:.05em;transform:rotate(-6deg)}
.hanko.yet{border:2px dashed var(--line);color:var(--ink2);transform:none;font-family:var(--f-body);font-weight:400;font-size:.75rem;writing-mode:horizontal-tb}

.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl th,.tbl td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{font-size:.78rem;color:var(--ink2);font-weight:700;letter-spacing:.05em;white-space:nowrap;background:var(--surface2)}
.tbl td.r,.tbl th.r{text-align:right}
.tbl tr.sum td{font-weight:700;border-top:2px solid var(--ink2)}
.tbl tr.sec td{background:var(--surface2);font-weight:700;font-size:.85rem}
.tbl tr.flag td{background:var(--bad-weak)}
.tbl tbody tr.click{cursor:pointer}
.tbl tbody tr.click:hover td{background:var(--surface2)}

.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:.8rem;color:var(--ink2);font-weight:700}
.field input,.field select,.field textarea{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:8px 10px;width:100%}
.grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
input.cell{border:1px solid var(--line);background:var(--surface);border-radius:5px;padding:4px 8px;width:110px;text-align:right}

.list{display:flex;flex-direction:column}
.list > *{padding:11px 0;border-bottom:1px solid var(--line)}
.list > *:last-child{border-bottom:0}
.li{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.li .t{font-weight:700}
.li .s{font-size:.82rem;color:var(--ink2)}

/* 紙の文書プレビュー */
.paper{background:var(--paper);color:var(--paper-ink);font-family:var(--f-doc);border:1px solid var(--paper-line);box-shadow:0 1px 3px rgba(0,0,0,.08);padding:36px 40px;line-height:1.95;font-size:.98rem;max-width:640px}
.paper .rt{text-align:right}
.paper .ttl{text-align:center;font-size:1.2rem;font-weight:700;margin:18px 0}
.paper p{margin-bottom:.6em}
.swap{background:var(--swap);color:var(--swap-ink);padding:0 2px;border-radius:2px}
.paper .swap{color:var(--paper-ink);background:#FFE58A}
.paper .ai-text{border-bottom-color:#6B4FA0}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.8rem;color:var(--ink2)}
.legend span{display:inline-flex;gap:6px;align-items:center}
.sw{display:inline-block;width:14px;height:14px;border-radius:3px}

.suggest{border:1px solid var(--ai);background:var(--ai-weak);border-radius:8px;padding:12px 14px;font-size:.9rem}
.suggest .row{margin-top:8px}

/* 出納帳写真の見本 */
.ledger{background:var(--ledger);color:var(--ledger-ink);font-family:var(--f-hand);border:1px solid #C9C2A8;border-radius:4px;padding:14px 10px 18px;box-shadow:0 2px 6px rgba(0,0,0,.15);transform:rotate(-.6deg);overflow-x:auto}
.ledger table{border-collapse:collapse;width:100%;min-width:430px;font-size:.95rem}
.ledger th{font-family:var(--f-body);font-size:.66rem;color:#6C7A8C;font-weight:400;border-bottom:2px solid var(--ledger-red);padding:2px 4px;text-align:center}
.ledger td{border-bottom:1px solid var(--ledger-rule);border-right:1px solid var(--ledger-rule);padding:3px 6px;height:30px}
.ledger td:last-child{border-right:0}
.ledger td.r{text-align:right}
.ledger tr.hl td{background:rgba(217,140,140,.22)}
.ledger .pg{font-family:var(--f-body);font-size:.72rem;color:#6C7A8C;display:flex;justify-content:space-between;margin-bottom:6px;padding-inline:4px}

.drop{border:2px dashed var(--line);border-radius:10px;padding:18px;text-align:center;color:var(--ink2);font-size:.9rem;background:var(--surface)}

.fix{border:1px solid var(--bad);border-radius:8px;padding:12px 14px;background:var(--bad-weak)}
.okbar{border:1px solid var(--ok);border-radius:8px;padding:10px 14px;background:var(--ok-weak);color:var(--ink);font-size:.9rem}
.warnbar{border:1px solid var(--warn);border-radius:8px;padding:10px 14px;background:var(--warn-weak);color:var(--ink);font-size:.9rem}

.freq{font-size:.72rem;border:1px solid var(--line);border-radius:4px;padding:0 6px;color:var(--ink2);white-space:nowrap}
.freq.hi{border-color:var(--accent);color:var(--accent)}
.tag-gaku{font-size:.72rem;border-radius:4px;padding:0 6px;background:var(--warn-weak);color:var(--warn);font-weight:700;white-space:nowrap}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs .btn[aria-selected="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
:root[data-theme="dark"] .freq.hi{color:var(--ink)}
.ag{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.ag:last-child{border-bottom:0}
.ag input{margin-top:6px;width:18px;height:18px}
.ag .from{font-size:.8rem;color:var(--ink2)}
.order{counter-reset:ag;display:flex;flex-direction:column;gap:8px}
.order li{list-style:none;display:flex;gap:10px;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 12px}
.order li::before{counter-increment:ag;content:counter(ag);font-weight:700;color:var(--accent);min-width:1.2em}
.order .grip{margin-left:auto;color:var(--ink2);cursor:grab;user-select:none}

.tr-line{display:grid;grid-template-columns:70px 64px minmax(0,1fr);gap:8px;font-size:.9rem;padding:4px 0}
.tr-line .tm{color:var(--ink2);font-size:.8rem}
.tr-line .sp{font-weight:700;font-size:.85rem}
.unheard{background:var(--bad-weak);color:var(--bad);border-radius:3px;padding:0 4px;font-size:.85rem;white-space:nowrap}
details summary{cursor:pointer;color:var(--accent);font-size:.9rem}
:root[data-theme="dark"] details summary{color:var(--ink)}

.meter{height:8px;border-radius:999px;background:var(--surface2);overflow:hidden}
.meter > i{display:block;height:100%;background:var(--ok)}

.ver{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;padding-bottom:16px;position:relative}
.ver::before{content:"";position:absolute;left:7px;top:18px;bottom:0;width:2px;background:var(--line)}
.ver:last-child::before{display:none}
.ver .dot{width:16px;height:16px;border-radius:50%;background:var(--surface);border:3px solid var(--accent);margin-top:4px}
.ver.draft .dot{border-style:dashed;border-color:var(--warn)}
.ver.cur .dot{background:var(--accent)}
.oldnew th{width:50%}
.oldnew td{font-family:var(--f-doc);font-size:.92rem}
del.x{background:var(--bad-weak);color:var(--bad);text-decoration:line-through}
ins.x{background:var(--ok-weak);color:var(--ok);text-decoration:none;font-weight:700}

.login{max-width:380px;margin:40px auto}
.rec-top{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.recbtn{width:132px;height:132px;border-radius:50%;border:0;background:var(--shu);color:#fff;font:inherit;font-weight:700;font-size:1.05rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:0 0 0 6px var(--bad-weak)}
.recbtn .dot{width:22px;height:22px;border-radius:50%;background:#fff}
.recbtn.on{background:var(--ink);color:var(--bg);box-shadow:0 0 0 6px var(--surface2)}
.recbtn.on .dot{border-radius:3px;background:var(--bg)}
.timer{font-size:2.6rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em;line-height:1.1}
.live{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700;color:var(--shu)}
.live::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--shu);animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.25}}
.lv{display:flex;gap:3px;align-items:flex-end;height:40px}
.lv i{flex:1;max-width:8px;background:var(--ok);border-radius:2px;height:10%;transition:height .12s}
.agl{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.agl li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.agl li .n{font-weight:700;color:var(--ink2)}
.agl li .ts{font-size:.8rem;color:var(--ink2);font-variant-numeric:tabular-nums}
.agl li.cur{border-color:var(--shu);box-shadow:inset 4px 0 0 var(--shu)}
.agl li.cur .n{color:var(--shu)}
.agl li.done{opacity:.7}
.chk{display:flex;gap:8px;align-items:flex-start;padding:6px 0;font-size:.92rem}
.chk input{margin-top:5px;width:18px;height:18px}
.seat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"a c e" "t t t" "b d f";gap:6px;margin-top:10px;text-align:center;font-size:.85rem}
.seat .st{border:1px solid var(--line);border-radius:6px;padding:4px 2px;background:var(--surface);display:flex;flex-direction:column;line-height:1.3}
.seat .st small{font-size:.68rem;color:var(--shu)}
.seat .tb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--surface2);border:1px solid var(--line);border-radius:6px;padding:10px 0}
.seat .tb i{font-style:normal;font-size:.75rem;font-weight:700;color:var(--accent)}
:root[data-theme="dark"] .seat .tb i{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.live::before{animation:none}}
.login .panel{padding:28px}

.hk-grp{display:flex;flex-direction:column;gap:6px}
.hk-grp > span{font-size:.72rem;letter-spacing:.1em;color:var(--ink2)}
.hk-grp > div{display:flex;gap:12px;flex-wrap:wrap}
.seen{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.75rem;color:var(--ink2)}
.seen b{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:8px;border:1.5px solid var(--ok);color:var(--ok);font-size:1.1rem}
.seen.yet b{border:1.5px dashed var(--line);color:var(--ink2);font-size:.72rem;font-weight:400}
.hist .li{align-items:flex-start}
.hist .who{font-weight:700}
.hist .chg{font-size:.88rem}
.hanko-row{gap:22px}
.perm td{font-size:.88rem}
.ok-mark{color:var(--ok);font-weight:700}
.no-mark{color:var(--ink2)}

@media (max-width:1100px){
  .c-main-side,.c-side-main{grid-template-columns:minmax(0,1fr)}
  .c-3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);padding-block:12px}
  .brand{padding-inline:16px;margin-bottom:8px}
  .nav{flex-direction:row;overflow-x:auto;padding-inline:12px;gap:4px}
  .nav .grp,.me{display:none}
  .nav a{white-space:nowrap;border:1px solid var(--line)}
  .main{padding-inline:16px}
  .c-2{grid-template-columns:minmax(0,1fr)}
  .paper{padding:22px 18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* 本番用の追加（画面見本にはない） */
.me form{display:block}
select.btn{padding:6px 10px}
.field input:disabled,.field select:disabled,.row select:disabled{background:var(--surface2);color:var(--ink)}
mark{background:var(--swap);color:var(--swap-ink);padding:0 1px;border-radius:2px}
.doc-text{white-space:pre-wrap;word-break:break-word;font-size:.9rem;line-height:1.8;max-height:70vh;overflow:auto;background:var(--surface2);border-radius:8px;padding:14px 16px;tab-size:4}
.snippet{margin-top:4px;line-height:1.6}
.field textarea{resize:vertical}
main > .okbar[role="status"],main > .warnbar[role="status"]{white-space:pre-line}
.paper p.ln{white-space:pre-wrap;margin-bottom:0}
.paper p.blank{margin-bottom:0;line-height:1.2}
.paper .ai-text{border-bottom:2px dotted #6B4FA0}
.doc-edit{font-family:var(--f-doc);line-height:1.8}
dialog.panel{border:1px solid var(--line);color:var(--ink)}
dialog::backdrop{background:rgba(0,0,0,.35)}
.suggest details .paper{margin-top:10px}
/* 印刷（A4） */
.print-page{background:#fff}
.print-bar{padding:12px 16px;display:flex;gap:8px;align-items:center}
.print-page .paper{margin:0 auto;box-shadow:none;border:0;max-width:none;width:170mm;padding:0}
@page{size:A4;margin:25mm 22mm}
@media print{.print-bar{display:none}.print-page .paper{width:auto}body{background:#fff}}
/* 会則・規約（新旧対照表と全文） */
.taisho td{white-space:pre-wrap;vertical-align:top;line-height:1.8}
.paper.rule-text{white-space:pre-wrap;max-width:none;line-height:1.9}
.taisho-print{padding:0 16px 24px}
.taisho-print h1{font-family:var(--f-doc);text-align:center;margin:8px 0}
.taisho-print .sub{text-align:center;color:var(--ink2);margin-bottom:12px}
@media print{.taisho-print{padding:0}.taisho-print del.x,.taisho-print ins.x{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
/* レジメ */
.resume-paper .resume-items{list-style:none;margin:10px 0 0;padding:0}
.resume-paper .resume-items li{display:flex;gap:.6em;margin-bottom:.35em}
.resume-paper .resume-items li.lv1{padding-left:2em}
.resume-paper .resume-items .no{min-width:2.2em;flex:none}
.resume-paper .rnote{display:block;font-size:.85em;color:var(--ink2)}
.resume-paper .memo{margin-top:1.2em}
.resume-edit td{vertical-align:top}
.resume-edit input{border:1px solid var(--line);border-radius:6px;padding:6px 8px;background:var(--surface)}
/* 録音の文字起こし */
.transcript{max-height:70vh;overflow:auto;padding-right:4px}
.tr-mark{margin:12px 0 4px;padding:4px 10px;border-left:4px solid var(--shu);background:var(--surface2);font-weight:700;font-size:.9rem}
.recbtn:disabled{opacity:.6;cursor:default}
@media (max-width:600px){.tr-line{grid-template-columns:56px 52px minmax(0,1fr)}}
/* hidden を付けた要素は、display の指定があっても隠す */
[hidden]{display:none!important}