/* 패밀리볼트 공용 화면 규칙 — 장부(종이·먹·놋쇠) 톤, 반듯한 고딕 */
:root{--paper:#F4F1EA;--card:#FCFBF7;--ink:#16211D;--sub:#5B665F;--mute:#8A938D;--line:#D9D2C3;--forest:#1F4035;--forest2:#152E26;--brass:#8C6B3A;--brassbg:#F1E9DA;--red:#A23B2D;--redbg:#F7E7E2;--ok:#2B6A4C;--okbg:#E3EEE6;--blue:#2E5573;--bluebg:#E5ECF1}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Pretendard Variable',Pretendard,'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;background:var(--paper);color:var(--ink);font-size:15px;line-height:1.55;letter-spacing:-.012em;word-break:keep-all;overflow-wrap:anywhere;-webkit-tap-highlight-color:transparent}
body.senior{font-size:18px}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;border:0;background:none}
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}
.wrap{max-width:560px;margin:0 auto;padding:0 18px 110px}
.wrap.wide{max-width:1180px;padding-bottom:60px}
/* 머리 */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0 14px;border-bottom:3px double var(--ink)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.seal{flex:none;width:34px;height:34px;border:1.5px solid var(--forest);color:var(--forest);display:grid;place-items:center;font-weight:800;font-size:13px;letter-spacing:.02em;border-radius:3px;background:var(--card)}
.brand b{display:block;font-size:15px;font-weight:800;white-space:nowrap}
.brand small{display:block;font-size:11.5px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.keyno{flex:none;font-size:11.5px;font-weight:700;color:var(--brass);border:1px solid var(--brass);padding:3px 8px;border-radius:3px;white-space:nowrap;background:var(--card)}
/* 구획 */
.sec{margin-top:26px}
.h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--ink);margin-bottom:0}
.h h2{font-size:1.07em;font-weight:800}
.h span{font-size:.8em;color:var(--sub);white-space:nowrap}
.note{font-size:.84em;color:var(--sub);margin-top:8px}
.box{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:14px}
.box+.box{margin-top:8px}
/* 줄(장부 행) */
.row{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.row .d{flex:none;width:48px;font-size:.8em;color:var(--mute);padding-top:2px;white-space:nowrap}
.row .m{flex:1;min-width:0}
.row .m b{display:block;font-weight:700}
.row .m p{font-size:.88em;color:var(--sub);margin-top:2px}
.row .r{flex:none;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.empty{padding:22px 0;text-align:center;color:var(--mute);font-size:.9em;border-bottom:1px solid var(--line)}
/* 표지 */
.tag{display:inline-block;font-size:.72em;font-weight:700;padding:2px 7px;border-radius:3px;border:1px solid var(--line);color:var(--sub);background:var(--card);white-space:nowrap;vertical-align:middle}
.tag.brass{color:var(--brass);border-color:#D8C49F;background:var(--brassbg)}
.tag.ok{color:var(--ok);border-color:#B9D2C2;background:var(--okbg)}
.tag.red{color:var(--red);border-color:#E2BDB4;background:var(--redbg)}
.tag.blue{color:var(--blue);border-color:#BCCBD6;background:var(--bluebg)}
/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border-radius:4px;background:var(--forest);color:#fff;font-weight:700;font-size:.93em;white-space:nowrap;transition:background .12s}
.btn:active{background:var(--forest2)}
.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--ink)}
.btn.ghost:active{background:var(--brassbg)}
.btn.line{background:none;color:var(--sub);border:1px solid var(--line)}
.btn.red{background:var(--card);color:var(--red);border:1.5px solid var(--red)}
.btn.sm{min-height:34px;padding:0 11px;font-size:.82em}
.btn.full{width:100%}
.btn.big{min-height:76px;font-size:1.3em;font-weight:800;width:100%;border-radius:5px}
.btn[disabled]{opacity:.45}
/* 붙은 막대(탭) */
.seg{display:flex;border:1px solid var(--ink);border-radius:4px;overflow:hidden;background:var(--card)}
.seg button{flex:1;min-width:0;min-height:44px;padding:0 6px;font-weight:700;font-size:.88em;color:var(--sub);border-left:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg button:first-child{border-left:0}
.seg button.on{background:var(--ink);color:#fff}
.seg.sm button{min-height:36px;font-size:.82em}
/* 격자 칸 */
.grid{display:grid;gap:0;border:1px solid var(--ink);border-radius:4px;overflow:hidden;background:var(--card)}
.grid.c2{grid-template-columns:1fr 1fr}.grid.c3{grid-template-columns:repeat(3,1fr)}.grid.c4{grid-template-columns:repeat(4,1fr)}.grid.c6{grid-template-columns:repeat(6,1fr)}
.cell{padding:12px 10px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0;text-align:left;margin:0 -1px -1px 0}
.cell small{display:block;font-size:.76em;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell b{display:block;font-size:1.25em;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell.pick{min-height:58px;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;font-size:.9em;white-space:nowrap}
.cell.pick.on{background:var(--ink);color:#fff}
.cell.warn b{color:var(--red)}
/* 입력 */
label.f{display:block;font-size:.8em;font-weight:700;color:var(--sub);margin:10px 0 4px}
input[type=text],input[type=tel],input[type=number],input[type=search],select,textarea{width:100%;min-height:44px;padding:9px 11px;border:1px solid var(--line);border-radius:4px;background:#fff;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--forest)}
textarea{min-height:76px;resize:vertical}
input[type=range]{width:100%;accent-color:var(--forest);height:28px}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.acts .btn{flex:1}
/* 표 */
.tbw{overflow-x:auto;border:1px solid var(--line);border-radius:4px;background:var(--card)}
table.tb{width:100%;border-collapse:collapse;font-size:.88em;min-width:640px}
.tb th{text-align:left;font-size:.82em;color:var(--sub);font-weight:700;padding:9px 10px;border-bottom:1px solid var(--ink);white-space:nowrap;background:var(--paper)}
.tb td{padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
.tb tr:last-child td{border-bottom:0}
.tb td.wrapok{white-space:normal;min-width:180px}
.tb select{min-height:34px;padding:4px 6px;width:auto}
/* 아래 붙박이 막대 */
.bar{position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--ink);padding:10px 18px calc(10px + env(safe-area-inset-bottom));z-index:20}
.bar .in{max-width:560px;margin:0 auto;display:flex;gap:8px}
.bar .btn{flex:1}
/* 알림·시트 */
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 16px;border-radius:4px;font-size:14px;font-weight:600;z-index:60;max-width:88vw;text-align:center;opacity:0;pointer-events:none;transition:opacity .18s}
.toast.on{opacity:1}
.dim{position:fixed;inset:0;background:rgba(22,33,29,.55);z-index:50;display:none;align-items:flex-end;justify-content:center}
.dim.on{display:flex}
.sheet{background:var(--card);width:100%;max-width:560px;border-top:3px double var(--ink);padding:20px 18px calc(22px + env(safe-area-inset-bottom));max-height:88vh;overflow-y:auto}
.sheet h3{font-size:1.1em;font-weight:800;margin-bottom:6px}
.sheet p{color:var(--sub);font-size:.92em}
.foot{margin-top:30px;padding-top:12px;border-top:1px solid var(--line);font-size:.76em;color:var(--mute);line-height:1.6}
.hide{display:none!important}
.thumb{width:44px;height:44px;object-fit:cover;border:1px solid var(--line);border-radius:3px;background:#eee;flex:none}
.pbar{height:8px;background:#E6E0D2;border-radius:2px;overflow:hidden;margin-top:8px}.pbar i{display:block;height:100%;background:var(--forest)}
@media(min-width:900px){.cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}}
/* 접는 칸 */
.fold{margin-top:12px;border:1px solid var(--ink);border-radius:4px;background:var(--card);overflow:hidden}
.fold>summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:60px;padding:0 14px;cursor:pointer;user-select:none}
.fold>summary::-webkit-details-marker{display:none}
.fold .ft{flex:1;min-width:0;font-weight:800;font-size:1.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fold .fs{flex:none;display:flex;gap:6px;align-items:center}
.fold .fs .tag{font-size:.74em}
.fold .fc{flex:none;width:10px;height:10px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);margin:-4px 4px 0 2px;transition:transform .15s}
.fold[open]>summary{border-bottom:1px solid var(--ink);background:var(--paper)}
.fold[open] .fc{transform:rotate(-135deg);margin-top:4px}
.fold .fb{padding:2px 14px 14px}
.fold .fb>.sub{font-size:.8em;font-weight:800;color:var(--brass);margin:16px 0 4px;padding-bottom:4px;border-bottom:1px solid var(--line)}
/* 체크 줄 */
.ck{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.ck .bx{flex:none;width:30px;height:30px;border:2px solid var(--ink);border-radius:3px;background:#fff;display:grid;place-items:center;margin-top:1px}
.ck .bx::after{content:'';width:8px;height:14px;border-right:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(45deg) translate(-1px,-2px);opacity:0}
.ck.on .bx{background:var(--forest);border-color:var(--forest)}.ck.on .bx::after{opacity:1}
.ck .m{flex:1;min-width:0}.ck .m b{display:block;font-weight:700;line-height:1.4}.ck .m p{font-size:.86em;color:var(--sub);margin-top:2px}
.ck.on .m b{color:var(--mute);text-decoration:line-through}.ck.on .m p{color:var(--mute)}
.ck .r{flex:none;display:flex;gap:6px;align-items:center}
.ck .lv{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:middle;background:var(--line)}
.ck .lv.red{background:var(--red)}.ck .lv.brass{background:var(--brass)}.ck .lv.blue{background:var(--blue)}
.ntc{margin-top:10px;padding:11px 13px;border-left:4px solid var(--red);background:var(--redbg);font-size:.9em;border-radius:0 4px 4px 0}
.ntc b{display:block;font-size:.78em;color:var(--red)}
.cno{font-variant-numeric:tabular-nums;font-feature-settings:'tnum';font-weight:800;letter-spacing:.02em}
h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}
.ck .acts{flex-wrap:nowrap}.ck .acts .btn{flex:0 0 auto;min-width:72px}
.row .acts .btn.sm{flex:1 1 0;min-width:0;padding:0 6px}