/* 비즈브릭스 — 세무대리 ERP 형식 화면 틀 (아이콘 레일 · 어두운 메뉴 패널 · 흰 상단 바 · 촘촘한 표)
   app.css 위에 덮어씁니다. */
:root { --rail: #17181b; --pnl: #232427; --pnl2: #2e2f33; --pnl-on: #3b3c41; --pnl-t: #e7e8ea; --pnl-m: #8b8f97; --ln: #eceef1; --hd: #f7f8fa; --t1: #1d2025; --t2: #6c717a; --sel: #eaf1fe; --blk: #18191c; }
body { font-size: 12.5px; color: var(--t1); background: #fff; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ws { display: flex; height: 100vh; overflow: hidden; }
/* 아이콘 레일 */
.rail { width: 62px; flex: none; background: var(--rail); display: flex; flex-direction: column; align-items: center; padding: 10px 0 8px; gap: 2px; }
.rl-logo { border: 0; background: none; padding: 6px 0 14px; cursor: pointer; } .rl-logo .lg-mark { height: 26px; filter: brightness(0) invert(1); display: block; }
.rl { border: 0; background: none; color: #9a9ea6; width: 54px; padding: 7px 0 6px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; font: inherit; font-size: 10.5px; }
.rl:hover { color: #fff; background: #26272b; } .rl.on { color: #fff; background: #2d2e33; } .rl span { white-space: nowrap; }
.rail .sp { flex: 1; }
/* 메뉴 패널 */
.panel { width: 178px; flex: none; background: var(--pnl); color: var(--pnl-t); display: flex; flex-direction: column; overflow-y: auto; }
.nopanel .panel { display: none; }
.pco { padding: 14px 12px 10px; border-bottom: 1px solid #303135; }
.pco-t { font-size: 11.5px; color: var(--pnl-m); display: flex; align-items: center; gap: 6px; } .pco b { display: block; font-size: 13.5px; margin-top: 4px; color: #fff; letter-spacing: -.02em; } .pco small { display: block; color: var(--pnl-m); font-size: 11.5px; margin-top: 1px; }
.pbadge { display: inline-block; font-size: 10.5px; font-weight: 700; background: #3d5bd9; color: #fff; border-radius: 4px; padding: 0 5px; line-height: 17px; flex: none; }
.pco-b { display: flex; gap: 6px; margin-top: 10px; } .pbtn { flex: 1; border: 0; background: #3a3b40; color: #e7e8ea; border-radius: 7px; height: 28px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; } .pbtn:hover { background: #46474d; } .pbtn.sq { flex: none; width: 30px; font-size: 11px; } .pbtn.static { cursor: default; font-size: 11.5px; color: var(--pnl-m); }
.pnav { flex: 1; padding: 6px 0 10px; }
.pg { padding: 4px 8px; border-bottom: 1px solid #2c2d31; } .pg:last-child { border-bottom: 0; }
.pgh { width: 100%; display: flex; align-items: center; justify-content: space-between; border: 0; background: none; color: var(--pnl-m); font: inherit; font-size: 11.5px; padding: 8px 6px 6px; cursor: pointer; }
.pgh svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .15s; } .pgh svg.up { transform: rotate(180deg); }
.pgb { padding-bottom: 4px; }
.pi { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: var(--pnl-t); text-decoration: none; padding: 7px 10px; border-radius: 8px; font-size: 13px; font-weight: 500; }
.pi:hover { background: var(--pnl2); } .pi.on { background: var(--pnl-on); color: #fff; font-weight: 700; } .pi span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pi .n { font-size: 10.5px; background: #e8590c; color: #fff; border-radius: 99px; padding: 0 6px; line-height: 16px; font-weight: 700; flex: none; }
.pcollect { display: flex; align-items: center; gap: 7px; border: 0; border-top: 1px solid #303135; background: none; color: var(--pnl-t); font: inherit; font-size: 12px; padding: 10px 14px; cursor: pointer; text-align: left; } .pcollect span { flex: 1; } .pcollect small { color: var(--pnl-m); font-size: 10.5px; } .pcollect:hover { background: var(--pnl2); }
.psys { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--pnl-m); padding: 10px 14px; border-top: 1px solid #303135; } .psys i { width: 8px; height: 8px; border-radius: 3px; background: var(--c); }
/* 본문 */
.mainw { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; background: #fff; }
.guide-on .mainw { margin-right: 380px; } .guide { top: 0; }
.top2 { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 12px; background: #fff; border-bottom: 1px solid var(--ln); }
.top2.pick { position: static; padding: 0 22px; } .tlogo2 { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 15px; } .tlogo2 .lg-mark { height: 22px; } .tlogo2 em { font-style: normal; font-weight: 800; color: #005BEE; }
.gridbtn { border: 0; background: none; color: var(--t2); cursor: pointer; padding: 4px; border-radius: 6px; display: flex; } .gridbtn:hover { background: var(--hd); color: var(--t1); } .gridbtn .ic { width: 16px; height: 16px; stroke-width: 0; fill: currentColor; }
.top2 .sysdd { position: relative; display: flex; } .top2 .sysm { top: 34px; }
.sysm button { display: flex; width: 100%; gap: 12px; align-items: center; color: var(--ink); padding: 10px 12px; border-radius: 9px; text-align: left; font-weight: 500; border: 0; background: none; cursor: pointer; font: inherit; } .sysm button:hover, .sysm button.on { background: #F5F6F8; }
.crumb2b { display: flex; align-items: center; gap: 7px; font-size: 13.5px; white-space: nowrap; min-width: 0; } .crumb2b a { color: var(--t1); text-decoration: none; font-weight: 700; } .crumb2b a:hover { text-decoration: underline; } .crumb2b .sep { color: #b0b4bb; } .crumb2b .cg { color: var(--t2); } .crumb2b .bar { color: #d4d7dc; } .crumb2b b { font-weight: 700; }
.tbtn { border: 0; background: none; color: var(--t2); font: inherit; font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; padding: 5px 6px; border-radius: 6px; } .tbtn:hover { background: var(--hd); color: var(--t1); } .tbtn .ic { width: 15px; height: 15px; } .tbtn.sq { font-size: 11px; font-weight: 700; }
.tlink { color: var(--t1); text-decoration: none; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .tlink:hover { text-decoration: underline; } .tsep2 { width: 1px; height: 14px; background: #dcdfe3; }
.ldot { width: 11px; height: 11px; border-radius: 99px; border: 2.5px solid #19a35b; box-sizing: border-box; display: inline-block; } .ldot.bad { border-color: #e5484d; }
.demochip { font-size: 11px; font-weight: 700; background: #FFE08A; color: #4A3800; border-radius: 99px; padding: 1px 8px; white-space: nowrap; }
.demosel { border: 1px solid #f0d77a; background: #FFF6D6; color: #4A3800; border-radius: 7px; font-size: 11.5px; font-weight: 600; padding: 3px 6px; max-width: 200px; }
.top2 .ptools { display: flex; gap: 6px; } .top2 .ptools .btn { height: 30px; line-height: 28px; font-size: 12.5px; }
.top2 .pg-help { width: 24px; height: 24px; margin: 0; font-size: 12px; }
.view2 { padding: 14px 20px 48px; min-width: 0; }
/* 시스템 선택 화면 (흰 상단) */
.picking .syspick { min-height: calc(100vh - 49px); }
/* 공통 구성요소 — 회색조 · 촘촘하게 */
.btn { height: 30px; line-height: 28px; border-radius: 8px; border-color: #e1e4e8; font-size: 12.5px; font-weight: 600; color: #2b2f36; padding: 0 11px; }
.btn:hover { border-color: #b9bec6; background: #fafbfc; }
.btn.pri, .btn.pri:hover { background: var(--blk); border-color: var(--blk); color: #fff; } .btn.pri:hover { background: var(--brand-d); border-color: var(--brand-d); }
.btn.sm { height: 26px; line-height: 24px; border-radius: 7px; } .btn.xs { height: 22px; line-height: 20px; border-radius: 6px; } .btn.big { height: 40px; line-height: 38px; border-radius: 10px; }
.btn.warn { background: #fff; border-color: #e1e4e8; color: #2b2f36; }
input, select, textarea { border-color: #e1e4e8; border-radius: 8px; } input, select { height: 30px; padding: 4px 9px; } textarea { padding: 8px 10px; }
input[type=checkbox], input[type=radio] { height: auto; accent-color: var(--blk); }
.kpis { gap: 8px; margin-bottom: 14px; } .kpi { border-color: var(--ln); border-radius: 10px; padding: 10px 14px; } .kpi > span:first-child { font-weight: 500; color: var(--t2); font-size: 12px; } .kpi > b { font-size: 18px; }
.card { border-color: var(--ln); border-radius: 10px; padding: 14px 16px; } .card-h h3 { font-size: 14px; }
.box { border-color: var(--ln); border-radius: 10px; }
.tbl-wrap { border-color: var(--ln); border-radius: 8px; }
table, .tbl { font-size: 12.5px; } th, td { height: 33px; padding: 5px 9px; border-bottom-color: #f0f1f3; } th { background: var(--hd); color: var(--t2); font-weight: 500; height: 31px; font-size: 12px; } td { color: var(--t1); }
tbody tr.click:hover { background: #f6f8fb; } tbody tr.sel, tbody tr.sel:hover { background: var(--sel); }
.utabs { gap: 2px; margin-bottom: 12px; border-bottom-color: var(--ln); } .utabs button { padding: 8px 10px; font-size: 13px; color: #8a8f98; font-weight: 500; } .utabs button.on { color: var(--t1); border-bottom-color: var(--t1); font-weight: 700; }
.seg { border: 0; background: #f1f2f4; border-radius: 8px; padding: 2px; gap: 2px; } .seg button { border: 0 !important; border-radius: 6px; padding: 4px 10px; color: #6c717a; font-weight: 600; } .seg button.on { background: #fff; color: var(--t1); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.ctab { border-color: #e1e4e8; padding: 4px 11px; font-size: 12px; } .ctab.on { background: var(--blk); border-color: var(--blk); }
.filterbox { border: 0; padding: 0; margin-bottom: 8px; background: none; } .filterbox .row { margin: 0 0 8px; }
.st h2 { font-size: 14.5px; } .note, .hint { color: var(--t2); }
.infobox { background: #f6f7f9; border-radius: 10px; }
.tag { border-radius: 5px; font-weight: 600; } .todo-i { border-width: 1px; box-shadow: none; border-radius: 10px; }
.mnav b { font-size: 13px; } .mn { border-radius: 7px; border-color: #e1e4e8; }
.chart .ax { font-size: 11px; }
.modal { border-radius: 16px; } .modal .mh { padding: 18px 24px; border-bottom: 0; } .modal .mh h2 { font-size: 17px; } .modal .mb { padding: 6px 24px 22px; }
.modal .mb .row.end > .btn.pri { background: var(--blk); }
.fcard { border-left-width: 1px; } .fcard:not(.done) { border-left: 3px solid var(--t1); }
.hcard { border-radius: 12px; } .greet h2 { font-size: 21px; }
.copick { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow: auto; } .copi { display: flex; align-items: center; gap: 10px; border: 1px solid var(--ln); background: #fff; border-radius: 10px; padding: 10px 12px; text-align: left; cursor: pointer; font: inherit; } .copi:hover, .copi.on { border-color: var(--t1); } .copi span:nth-child(2) { flex: 1; display: flex; flex-direction: column; } .copi small { color: var(--t2); } .copi em { font-style: normal; font-size: 11px; font-weight: 700; color: #e8590c; }
/* ---------- 회계 화면 공통 (전표 · 장부) ---------- */
.tb1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .tb1 .sp { flex: 1; }
.pill { display: inline-flex; align-items: center; gap: 5px; height: 30px; border: 1px solid #e1e4e8; background: #fff; border-radius: 8px; padding: 0 10px; font: inherit; font-size: 12.5px; color: var(--t1); cursor: pointer; white-space: nowrap; } .pill:hover { border-color: #b9bec6; } .pill .ic { width: 14px; height: 14px; } .pill.on { border-color: var(--t1); font-weight: 700; } .pill.ghost { border-color: transparent; color: var(--t2); }
select.pill { padding-right: 24px; }
.kbd { display: inline-block; font-size: 10.5px; font-weight: 700; border: 1px solid #d5d8dd; border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; line-height: 15px; color: #4a4f57; background: #fff; }
.kbd.d { background: rgba(255,255,255,.22); color: #fff; border-color: rgba(255,255,255,.35); }
.ok-ic { color: #19a35b; font-weight: 800; }
.srch { position: relative; display: inline-flex; align-items: center; } .srch .ic { position: absolute; left: 9px; width: 14px; height: 14px; color: #9aa0a8; } .srch input { padding-left: 28px; width: 210px; }
.amt-in { width: 110px; text-align: right; }
.grid1 { border: 1px solid var(--ln); border-radius: 8px; overflow: auto; max-height: calc(100vh - 360px); min-height: 220px; }
.grid1 table { font-size: 12px; } .grid1 th { position: sticky; top: 0; z-index: 2; } .grid1 thead tr:nth-child(2) th { top: 31px; } .grid1 td, .grid1 th { height: 30px; padding: 3px 8px; white-space: nowrap; } .grid1 th.grp { text-align: left; font-weight: 600; color: var(--t1); background: #fff; border-right: 1px solid var(--ln); }
.grid1 td.r, .grid1 th.r { text-align: right; } .grid1 td.l { text-align: left; } .grid1 tbody tr { cursor: pointer; } .grid1 tbody tr:hover { background: #f6f8fb; } .grid1 tbody tr.sel { background: var(--sel); }
.grid1 td.ed select { height: 24px; padding: 0 4px; font-size: 12px; border-color: transparent; background: transparent; max-width: 120px; } .grid1 tr:hover td.ed select, .grid1 tr.sel td.ed select { border-color: #cfd3d9; background: #fff; }
.tt-s { color: #d03b3b; } .tt-p { color: #2f6fed; } .tt-n { color: #8a8f98; }
.st-dot { display: inline-block; width: 12px; height: 12px; border-radius: 99px; background: #e8590c; vertical-align: -2px; } .st-dot.g { background: #d6d9de; }
.jpanel { margin-top: 10px; border: 1px solid var(--ln); border-radius: 8px; overflow: auto; } .jpanel table { font-size: 12px; } .jpanel td { height: 30px; } .jpanel .emptyj { color: var(--t2); padding: 14px; text-align: center; }
.split2 { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.rpanel { border: 1px solid var(--ln); border-radius: 12px; padding: 16px 18px; position: sticky; top: 62px; background: #fff; } .rpanel h3 { font-size: 15px; margin: 2px 0 12px; } .rpanel .f > label { grid-template-columns: 96px minmax(0, 1fr); }
.rpanel input, .rpanel select { background: #f3f4f6; border-color: #f3f4f6; } .rpanel input:focus, .rpanel select:focus { background: #fff; border-color: #b9bec6; }
.rq-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 4px 0 14px; flex-wrap: wrap; } .rq-head h2 { font-size: 20px; letter-spacing: -.03em; } .rq-head p { margin: 4px 0 0; color: var(--t2); }
.prog { min-width: 220px; } .prog div { display: flex; justify-content: space-between; font-size: 12px; color: var(--t2); } .prog div b { color: var(--t1); font-size: 13px; } .prog i { display: block; height: 5px; border-radius: 99px; background: #e9ebee; margin-top: 6px; overflow: hidden; } .prog i em { display: block; height: 100%; background: var(--brand); }
.rlist { border-top: 1px solid var(--ln); } .rlist .rr { display: grid; grid-template-columns: 1.3fr 1.2fr 60px 80px; align-items: center; gap: 10px; padding: 11px 12px; border-bottom: 1px solid #f0f1f3; cursor: pointer; } .rlist .rr:hover { background: #f8f9fb; } .rlist .rr.on { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); } .rlist .rr b { display: block; } .rlist .rr small { color: var(--t2); } .rlist .rh { cursor: default; background: none !important; color: var(--t2); font-size: 12px; padding: 8px 12px; }
.recbox { background: var(--brand-soft); border: 1px solid var(--brand-light); border-radius: 10px; padding: 11px 13px; font-size: 12.5px; margin: 10px 0 12px; } .recbox b { display: block; margin-bottom: 2px; }
.blk-btn { width: 100%; height: 44px; border: 0; border-radius: 10px; background: var(--blk); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } .blk-btn:disabled { opacity: .4; cursor: default; }
.two-btn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } .two-btn .btn { height: 40px; line-height: 38px; border-radius: 10px; }
.tree { font-size: 12.5px; } .tree button { display: flex; justify-content: space-between; width: 100%; border: 0; background: none; font: inherit; padding: 6px 8px; border-radius: 6px; cursor: pointer; text-align: left; color: var(--t1); } .tree button:hover { background: #f4f5f7; } .tree button.on { background: #eef0f3; font-weight: 700; } .tree button small { color: var(--t2); font-size: 11.5px; } .tree .l1 { padding-left: 18px; } .tree .l2 { padding-left: 30px; }
.lsplit { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; align-items: start; } .lsplit .tree { position: sticky; top: 62px; max-height: calc(100vh - 120px); overflow: auto; border-right: 1px solid var(--ln); padding-right: 8px; }
.code-red { color: #c2410c; } .toggle { appearance: none; width: 30px; height: 17px; border-radius: 99px; background: #cfd3d9; position: relative; cursor: pointer; vertical-align: middle; } .toggle::after { content: ''; position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; border-radius: 99px; background: #fff; transition: left .15s; } .toggle:checked { background: var(--blk); } .toggle:checked::after { left: 15px; }
.sumline { display: flex; gap: 18px; margin: 4px 0 10px; font-size: 12.5px; color: var(--t2); } .sumline b { color: var(--t1); font-size: 13.5px; margin-left: 4px; }
.dmodal .mb { padding-top: 0; } .dtbl { border: 1px solid var(--ln); border-radius: 8px; overflow: auto; min-height: 180px; max-height: 300px; }
.recsel { border: 1.5px solid var(--brand); border-radius: 10px; padding: 10px 12px; display: flex; gap: 12px; align-items: center; flex: 1; } .recsel .num { width: 20px; height: 20px; border: 1px solid var(--brand-light); border-radius: 99px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--brand); } .recsel small { color: var(--t2); margin-right: 6px; }
@media (max-width: 1000px) { .panel { width: 150px; } .split2, .lsplit { grid-template-columns: 1fr; } .rpanel { position: static; } .top2 { flex-wrap: wrap; padding: 6px 12px; } .crumb2b { font-size: 12.5px; } }
@media (max-width: 700px) { .ws { flex-direction: column; height: auto; overflow: visible; } .rail { width: 100%; flex-direction: row; overflow-x: auto; padding: 4px; } .rl-logo { padding: 4px 8px; } .rail .sp { display: none; } .panel { width: 100%; max-height: 40vh; } .mainw { overflow: visible; } }

.pill select.bare { border: 0; background: transparent; height: 26px; padding: 0 2px; font: inherit; font-size: 12.5px; color: var(--t1); outline: 0; cursor: pointer; }
.rcl { max-height: 240px; overflow: auto; border-top: 1px solid var(--ln); margin-bottom: 14px; } .rci { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; padding: 9px 2px; border-bottom: 1px solid #f0f1f3; cursor: pointer; } .rci span { display: flex; flex-direction: column; } .rci small { color: var(--t2); font-size: 11.5px; } .rci span:last-child { font-weight: 600; }
tr.warnrow td { background: #fff7ed; }
.grid1 tr.total td { background: var(--hd); font-weight: 700; } .grid1 tr.cat td { background: #fafbfc; font-weight: 600; }

.pltbl tr.sum td { background: #f4f6f9; } .pltbl tr.sum td:first-child { color: var(--t1); } .pltbl tr.subrow td { background: #fff; }
.pgh span { font-weight: 600; letter-spacing: .01em; }

/* ===== 시스템 대표색: 메뉴 띠(레일 · 패널)와 주요 강조색 (01 파랑 · 02 I-브라운 · 03 BRICKS 레드) ===== */
body[data-sys=client] { --rail: #083A8C; --pnl: #0B47AC; }
body[data-sys=staff] { --rail: #561A21; --pnl: #6B2129; }
body[data-sys=admin] { --rail: #8F0B19; --pnl: #AD0F20; }
body[data-sys] { --blk: var(--brand); --sel: var(--brand-soft); --pnl2: rgba(255,255,255,.09); --pnl-on: rgba(255,255,255,.18); --pnl-m: rgba(255,255,255,.62); --pnl-t: #fff; }
.rl { color: rgba(255,255,255,.66); } .rl:hover { color: #fff; background: rgba(255,255,255,.1); } .rl.on { color: #fff; background: rgba(255,255,255,.2); }
.pco, .pg, .pcollect, .psys { border-color: rgba(255,255,255,.12) !important; }
.pbadge { background: #fff; color: var(--brand); }
.pbtn { background: rgba(255,255,255,.16); color: #fff; } .pbtn:hover { background: rgba(255,255,255,.26); } .pbtn.static { color: rgba(255,255,255,.75); }
.pi.on { box-shadow: inset 3px 0 0 #fff; }
.pi .n { background: #fff; color: var(--brand); }
.psys i { background: #fff; }
/* 강조색 */
.btn.pri, .btn.pri:hover, .modal .mb .row.end > .btn.pri { background: var(--brand); border-color: var(--brand); }
.btn.pri:hover, .modal .mb .row.end > .btn.pri:hover { background: var(--brand-d); border-color: var(--brand-d); }
.blk-btn { background: var(--brand); } .blk-btn:hover:not(:disabled) { background: var(--brand-d); }
.ctab.on { background: var(--brand); border-color: var(--brand); }
.utabs button.on { color: var(--brand); border-bottom-color: var(--brand); }
.seg button.on { color: var(--brand); }
.pill.on { border-color: var(--brand); color: var(--brand); }
.toggle:checked { background: var(--brand); }
input[type=checkbox], input[type=radio] { accent-color: var(--brand); }
.grid1 tbody tr.sel, tbody tr.sel, tbody tr.sel:hover { background: var(--brand-soft); }
.grid1 tbody tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.rlist .rr.on { box-shadow: inset 3px 0 0 var(--brand); }
.ldot { border-color: #19a35b; }
.crumb2b b { color: var(--brand); }
.top2 { box-shadow: inset 0 3px 0 var(--brand); }
.pg-help:hover, .guide-on .pg-help { border-color: var(--brand); color: var(--brand); }
.copi:hover, .copi.on { border-color: var(--brand); }
.prog i em { background: var(--brand); }
.fcard:not(.done) { border-left-color: var(--brand); }
.pltbl tr.sum td { background: var(--brand-soft); } .pltbl tr.sum td:first-child { color: var(--brand-d); }
.n2, .utabs button em, .ctab .n { background: var(--brand); }
.ctab.on .n { background: rgba(255,255,255,.3); }

/* ===== 12-1 원칙: 홈은 묶음 밖 맨 위 · 패널 아래 처리할 일 · 화면마다 메뉴명 + 한 줄 설명 ===== */
.phomew { padding: 6px 8px 8px; border-bottom: 1px solid rgba(255,255,255,.12); } .pi.phome span { display: inline-flex; align-items: center; gap: 8px; } .pi.phome .ic { width: 16px; height: 16px; }
.ptodo { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid rgba(255,255,255,.12); padding: 10px 14px; font-size: 12px; color: var(--pnl-t); } .ptodo small { display: block; color: var(--pnl-m); font-size: 10.5px; } .ptodo b { font-size: 13px; color: #fff; white-space: nowrap; }
.phd { margin: 2px 0 16px; } .phd h2 { font-size: 18px; font-weight: 800; letter-spacing: -.03em; margin: 0; color: var(--t1); } .phd p { margin: 4px 0 0; font-size: 12.5px; color: var(--t2); line-height: 1.6; } .phd p b { color: var(--t1); font-weight: 600; }

/* Smart A 입력 폼 (일반전표 · 매입매출전표) */
.jform { margin-top: 10px; border: 1px solid var(--ln); border-top: 2px solid var(--brand); border-radius: 8px; padding: 10px 12px; background: #fff; }
.jform .jfh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; } .jform .jfh .sp { flex: 1; } .jform .jfh small { font-size: 11.5px; }
.jform .tbl td { padding: 3px 4px; } .jform .tbl input, .jform .tbl select { width: 100%; height: 30px; font-size: 13px; }
.jform .row { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .jform .row .sp { flex: 1; }
.mmgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 10px; }
.mmgrid > label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--t2); }
.mmgrid > label input, .mmgrid > label select { height: 32px; font-size: 13px; width: 100%; }
.mmgrid > label.ck { flex-direction: row; align-items: center; gap: 6px; padding-top: 18px; color: inherit; } .mmgrid > label.ck input { width: auto; height: auto; }
.srcchip { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 3px; background: #EEF1F5; color: #556; } .srcchip.man { background: #FFF1E0; color: #A55A00; } .srcchip.pay { background: #E8F4EC; color: #2D7A46; }
.memo-tri { color: #E8590C; font-size: 10px; cursor: help; }
.chk { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 8px; border-radius: 12px; margin-left: 4px; } .chk.ok { background: #E8F4EC; color: #2D7A46; } .chk.bad { background: #FDECEC; color: #C92A2A; font-weight: 600; }
.stmt .pltbl tr.cat td { font-weight: 700; background: #F6F7F9; } .stmt .pltbl tr.sum td { font-weight: 700; color: var(--brand); } .stmt .pltbl tr.total td { font-weight: 800; border-top: 2px solid #333; } .stmt .pltbl tr.subrow td:first-child { padding-left: 24px; color: #555; }

/* 위하고T 카운터 · 통장 메모 대화 */
a.cnt { font-weight: 600; color: var(--brand); text-decoration: underline; } a.cnt.hot { color: #C92A2A; }
.txq { margin-top: 12px; border-top: 1px dashed var(--ln); padding-top: 8px; } .txq h4 { margin: 0 0 6px; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.txq .bub { max-width: 80%; padding: 6px 10px; border-radius: 10px; margin: 4px 0; font-size: 13px; } .txq .bub p { margin: 2px 0 0; } .txq .bub small { color: var(--t2); font-size: 11px; }
.txq .bub.firm { background: #F3F5F8; } .txq .bub.client { background: #FFF4E5; margin-left: auto; }
.txq .row input.grow { flex: 1; height: 32px; }