/* 초이장부 25판: 설정 and the 개발 예정 screens (부동자산, 금융자산). Loaded after choi.css; black and white, tokens only. */

/* ----- 설정, PC: section list on the left, one section on the right, both under one 2px ink rule ----- */
.set-wrap{display:grid;grid-template-columns:280px minmax(0,1fr);column-gap:36px;border-top:2px solid var(--ink);padding-top:12px;align-items:start}
.set-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:16px}
.set-nav button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:11px 14px;border:0;border-radius:10px;background:none;color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.set-nav button b{font-size:14px;font-weight:700}
.set-nav button span{font-size:12px;color:var(--ink-3);line-height:1.4}
@media (hover:hover){.set-nav button:hover{background:var(--surface-2)}}
.set-nav button[aria-current="page"]{background:var(--ink);color:var(--brand-ink)}
.set-nav button[aria-current="page"] span{color:var(--ink-4)}
:root[data-theme="dark"] .set-nav button[aria-current="page"] span{color:var(--line)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .set-nav button[aria-current="page"] span{color:var(--line)}}
.set-main{display:flex;flex-direction:column;gap:28px;min-width:0}

/* a section inside the settings panel: big title, no rule of its own (the panel has one); later sections keep a 2px rule */
.set-main>.card:first-child,.set-sub>.card:first-child{border-top:0!important;padding-top:0!important}
.set-main>.card:first-child>.card-h{padding:6px 0 4px!important}
.set-main>.card:first-child>.card-h h2{font-size:20px;font-weight:900;letter-spacing:-.03em}
.set-main .card,.set-sub .card{gap:12px}
.set-main .card.pad0>.card-h,.set-sub .card.pad0>.card-h{padding:14px 0 6px!important}
.set-main>.card:first-child.pad0>.card-h{padding:6px 0 8px!important}
.set-main .card-h .badge,.set-sub .card-h .badge{font-weight:700}

/* inputs read as quiet boxes on white, as on the board */
.set-main input[type=text],.set-main input[type=search],.set-main input[type=date],.set-main input[type=number],.set-main select,.set-main textarea,
.set-sub input[type=text],.set-sub input[type=search],.set-sub input[type=date],.set-sub input[type=number],.set-sub select,.set-sub textarea{
  height:40px;border:1px solid var(--line);border-radius:9px;background-color:var(--surface);font-size:14px;padding:0 12px}
.set-main textarea,.set-sub textarea{height:auto;min-height:96px;padding:10px 12px;line-height:1.6;resize:vertical}
.set-main input:focus,.set-main select:focus,.set-main textarea:focus,.set-sub input:focus,.set-sub select:focus,.set-sub textarea:focus{border-color:var(--ink);outline:none}
.set-main input:disabled,.set-main select:disabled,.set-main textarea:disabled,.set-sub input:disabled,.set-sub select:disabled,.set-sub textarea:disabled{background-color:var(--surface-2);color:var(--ink-2)}
.set-main .searchbox,.set-sub .searchbox{border:1px solid var(--line);border-radius:9px;background:var(--surface);box-shadow:none}
.set-main .searchbox input,.set-sub .searchbox input{border:0;height:38px}

/* label-left rows (장부, 우리 집 정보 and every other form in the panel) */
.set-rows{display:flex;flex-direction:column}
.set-fl{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:20px;align-items:start;padding:16px 0;border-top:1px solid var(--line-2);margin:0}
.set-fl .set-l{font-size:13px;font-weight:700;color:var(--ink);padding-top:10px}
.set-col{display:flex;flex-direction:column;gap:6px;min-width:0}
.set-col small{font-size:12px}
.set-val{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;font-size:14px;flex-wrap:wrap}
.set-link{display:inline-flex;align-items:center;gap:2px;border:0;background:none;padding:4px 0;font:inherit;font-size:13px;color:var(--ink-3);cursor:pointer}
@media (hover:hover){.set-link:hover{color:var(--ink);text-decoration:underline}}
.set-ppl{display:flex;flex-direction:column;gap:8px;padding-top:4px}
.set-ppl .set-link{align-self:flex-start;font-weight:700;color:var(--ink)}
.set-p{display:flex;align-items:center;gap:10px;min-height:30px}
.set-p .ava{width:30px;height:30px;font-size:13px;box-shadow:none}
.set-p b{flex:1;font-size:14px;font-weight:700;min-width:0}
.set-p b small{font-size:12px;font-weight:500;color:var(--ink-3)}
.set-cols{display:flex;flex-wrap:wrap;gap:10px;padding-top:6px}
.set-cols button{width:26px;height:26px;border-radius:999px;border:0;padding:0;background:var(--c);cursor:pointer;box-shadow:0 0 0 2px var(--surface),0 0 0 2px transparent}
.set-cols button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.set-cols button:disabled{cursor:default}
.set-foot{display:flex;align-items:center;gap:8px;padding-top:16px;border-top:1px solid var(--line-2);flex-wrap:wrap}
.set-delq{display:flex;flex-direction:column;gap:10px;background:var(--surface-2);border-radius:12px;padding:14px 16px}
.set-delq p{font-size:13.5px;line-height:1.6;color:var(--ink)}

/* the older forms (.fgrid of .field) take the same label-left rows inside settings */
.set-main .fgrid,.set-sub .fgrid{display:flex;flex-direction:column;gap:0}
.set-main .fgrid>.field,.set-main .fgrid>label.field{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:20px;row-gap:6px;align-items:start;padding:16px 0;border-top:1px solid var(--line-2)}
.set-main .fgrid>.field>span:first-child{grid-column:1;grid-row:1 / span 3;font-size:13px;font-weight:700;color:var(--ink);padding-top:10px}
.set-main .fgrid>.field>*:not(:first-child){grid-column:2}
.set-main .fgrid>.field>small{font-size:12px}
.set-sub .fgrid>.field{padding:14px 0;border-top:1px solid var(--line-2);gap:6px}
.set-sub .fgrid>.field>span:first-child{font-size:13px;font-weight:700;color:var(--ink)}
.set-main .card>.row:last-child,.set-sub .card>.row:last-child{padding-top:14px;border-top:1px solid var(--line-2)}
.set-main .card>.muted,.set-main .card>p.sub,.set-sub .card>.muted{font-size:13.5px;line-height:1.6}

/* list rows inside sections (항목, 자주 쓰는 거래, 반복 거래, 아이템): hairlines, no tinted icon tiles */
.set-main .lrow,.set-sub .lrow{padding-top:11px!important;padding-bottom:11px!important}
.set-main .lrow .mi,.set-sub .lrow .mi{background:var(--surface-2);border-radius:8px;color:var(--ink-2)}
.set-main .lrow .t b,.set-sub .lrow .t b{font-weight:700}
.set-main .tabs,.set-sub .tabs{border-radius:8px}
.set-main .split,.set-sub .split{height:1px;background:var(--line-2);margin:4px 0}

/* ----- 설정, phone: a plain list with the ledger on top ----- */
.set-phone{display:flex;flex-direction:column;border-top:2px solid var(--ink)}
.set-top{display:flex;align-items:center;gap:14px;padding:16px 0;border:0;border-bottom:1px solid var(--line-2);background:none;text-align:left;color:var(--ink);font:inherit;cursor:pointer;width:100%}
.set-avas{display:flex;flex:none}
.set-avas .ava{width:38px;height:38px;font-size:13px;box-shadow:0 0 0 2px var(--surface)}
.set-avas .ava+.ava{margin-left:-8px}
.set-top .t,.set-li .t{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.set-top b{font-size:16px;font-weight:900;letter-spacing:-.02em}
.set-top small,.set-li small{font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-list{display:flex;flex-direction:column}
.set-li{display:flex;align-items:center;gap:10px;width:100%;padding:13px 0;border:0;border-bottom:1px solid var(--line-2);background:none;color:var(--ink);text-align:left;font:inherit;cursor:pointer}
.set-li b{font-size:15px;font-weight:700}
.set-li>.ico{color:var(--ink-3);flex:none}
.set-del{align-self:center;margin:22px 0 8px;border:0;background:none;color:var(--ink-3);font:inherit;font-size:13.5px;padding:8px 12px;cursor:pointer}
@media (hover:hover){.set-del:hover{color:var(--ink);text-decoration:underline}}
.set-sub .set-fl{grid-template-columns:minmax(0,1fr);row-gap:8px;padding:14px 0}
.set-sub .set-fl .set-l{padding-top:0}
.set-sub>.card:first-child>.card-h{min-height:0}
.set-sub .set-foot .btn{flex:1 1 auto}
.set-sub .set-foot .sp{display:none}

@media (max-width:1099px){.set-wrap{grid-template-columns:220px minmax(0,1fr);column-gap:24px}}

/* ----- 부동자산, 금융자산 (개발 예정) ----- */
.cm-note{display:flex;align-items:center;gap:14px;background:var(--surface-2);border-radius:12px;padding:14px 18px;font-size:14px;color:var(--ink)}
.cm-note>.ico{flex:none}
.cm-note .sp{flex:1}
.cm-note .btn{font-weight:700;color:var(--ink);flex:none}
.cm-sec{display:flex;flex-direction:column}
.cm-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.cm-h h2{font-size:15px;font-weight:900;letter-spacing:-.02em;margin:0}
.cm-h .sub{font-size:12px}
.cm-row{display:grid;grid-template-columns:minmax(0,1fr) 150px 150px 140px;gap:16px;align-items:center;padding:10px 0;border-top:1px solid var(--line-2);font-size:13px}
.cm-row:first-of-type{border-top:0}
.cm-row .r{text-align:right;font-variant-numeric:tabular-nums}
.cm-row.cm-head{font-size:11px;font-weight:700;color:var(--ink-3);padding:8px 0 4px;border-top:0}
.cm-row.cm-tot{border-top:2px solid var(--ink);font-weight:900;font-size:14px;padding:12px 0}
.cm-row .cm-n{min-width:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cm-row .cm-v1{font-weight:700;color:var(--ink)}
.cm-row .cm-v0{color:var(--ink-3)}
.cm-row .cm-d{display:none}
.cm-empty{padding:16px 0;font-size:13.5px;color:var(--ink-3)}
.cm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding-top:16px}
.cm-tile{border:1.5px dashed var(--line);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-height:180px}
.cm-tile b{font-size:14px;font-weight:700}
.cm-tile p{margin:0;font-size:12px;color:var(--ink-3);line-height:1.5}
.cm-sk{display:block;background:var(--surface-3);border-radius:4px}
.cm-line{width:100%;height:80px;display:block}
.cm-line polyline{fill:none;stroke:var(--s5);stroke-width:3}
.cm-line line{stroke:var(--surface-3)}
.cm-kv{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cm-kv i{height:44px}
.cm-bars{display:flex;flex-direction:column;gap:8px}
.cm-bars i{height:14px}
.cm-stack{display:flex;height:22px;gap:2px;border-radius:3px;overflow:hidden}
.cm-stack i{border-radius:0}
.cm-stack i:nth-child(1){width:55%;background:var(--s5)}
.cm-stack i:nth-child(2){width:25%;background:var(--surface-3)}
.cm-stack i:nth-child(3){width:20%;background:var(--surface-2)}
.cm-legend{display:flex;gap:14px}.cm-legend i{height:10px;width:60px}
.phead .cm-tag{height:24px;font-size:12px;font-weight:700;align-self:center}

.cm-tile .cm-ph{display:none}
.cm-tile .cm-ph i{height:10px}
.cm-row.cm-tot .cm-v0{color:var(--ink)}
@media (max-width:700px){
  .cm-note{padding:12px 14px;gap:10px;font-size:13px;align-items:flex-start}
  .cm-note>.ico{display:none}
  .cm-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n v1" "n d";row-gap:2px;column-gap:12px;padding:12px 0;font-size:14px}
  .cm-row.cm-head{display:none}
  .cm-row .cm-n{grid-area:n}
  .cm-row .cm-v1{grid-area:v1;font-size:14px}
  .cm-row .cm-v0,.cm-row .cm-dd{display:none}
  .cm-row .cm-d{display:block;grid-area:d;font-size:12px;color:var(--ink-3);text-align:right}
  .cm-row.cm-tot{grid-template-areas:"n v1";font-size:16px}
  .cm-row.cm-tot .cm-d{display:none}
  .cm-grid{grid-template-columns:1fr;gap:12px}
  .cm-tile{min-height:0;gap:10px}
  .cm-tile .cm-viz{display:none}
  .cm-tile .cm-ph{display:flex;flex-direction:column;gap:8px}
}
.set-main select,.set-sub select{padding-right:34px}
.set-main .btn,.set-sub .btn{box-shadow:none!important}
.set-sub>.set-sec>.card-h{display:none}

/* 2026-10-19 설정 묶음 (screens2.js SetGroupList) */
.setg{display:flex;flex-direction:column}
.setg+.setg{margin-top:14px}
.setg-h{margin:0;padding:6px 14px 4px;font-size:11.5px;font-weight:800;letter-spacing:.04em;color:var(--ink-3)}
.setg-tg{display:flex;align-items:center;gap:4px;border:0;background:none;cursor:pointer;font:inherit;font-size:11.5px;font-weight:800;color:var(--ink-3);text-align:left}
.set-list .setg-h{padding-left:0;padding-right:0}
.set-list .setg+.setg{margin-top:18px}
.ac-adv{grid-column:1/-1;justify-self:start;font-size:12.5px;color:var(--ink-3)}
.set-nav{max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:contain}
.set-nav .setg-tg{flex-direction:row;align-items:center;padding:6px 14px 4px;border-radius:0}
.set-nav .setg-tg:hover{background:none;color:var(--ink)}