/* 생활비 분배 계산기 전용 CSS (2026-10-12). 모드 막대·입력(소득·규칙·항목 4칸 / 공동 생활비·사람 줄)·결과·권장 대 실제 막대·맞추는 순서·방법 비교·항목 순위 lx-*. 공용 부품은 assets/v2.css */
.lx-work{container:lx / inline-size} /* 두 열 여부는 화면이 아니라 툴 폭으로: 1181px 셸에서 왼쪽 열이 293px로 좁아져 항목 이름 칸이 39px가 됐음 */
.lx-modebar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:14px 18px;border-bottom:1px solid var(--soft)}
.lx-modebar .lx-help{flex:1 1 100%}
.lx-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);border-bottom:1px solid var(--soft)}
.lx-set{display:flex;flex-direction:column;gap:12px;padding:16px 18px;min-width:0}
.lx-pane{display:flex;flex-direction:column;gap:12px;min-width:0}
.lx-pane[hidden]{display:none}
.lx-help,.lx-note{margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.lx-chips{margin-top:-4px}
.lx-chips button{height:28px;padding:0 10px;font-size:12px}
.lx-rule>.v2-label{display:block;margin-bottom:5px}
.lx-row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.lx-row3[hidden]{display:none}
.lx-cats{display:grid;gap:12px}
.lx-cat{display:grid;gap:8px;padding-top:10px;border-top:1px solid var(--soft)}
.lx-cat-h{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:baseline;font-family:var(--sans)}
.lx-cat-h .nm{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink)}
.lx-cat-h .nm b{font-weight:750}
.lx-cat-h .nm i,.lx-plan .nm i,.lx-keys i,.lx-rank .nm i,.lx-pbars .nm i{flex:0 0 10px;width:10px;height:10px;border-radius:2px}
.lx-csum{font-size:12.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.lx-cat-h small{grid-column:1/-1;font-size:11.5px;color:var(--muted)}
.lx-items,.lx-people{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lx-items li{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(130px,1fr) 58px 30px;gap:6px;align-items:center} /* 이름 칸을 넓게, 금액은 130px로 13자(1,200,000,000)까지 */
.lx-people li,.lx-people-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(128px,1.4fr) 30px;gap:6px;align-items:center}
.lx-work.is-pct .lx-people li,.lx-work.is-pct .lx-people-h{grid-template-columns:minmax(0,1fr) minmax(120px,1.3fr) 96px 30px}
.lx-ppct b{min-width:0;padding:0 7px}
.lx-ppct,.lx-pct-h{display:none}
.lx-work.is-pct .lx-ppct{display:flex}
.lx-work.is-pct .lx-pct-h{display:block}
.lx-people-h{margin-bottom:-4px;font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.lx-people-h span:last-child{grid-column:auto}
.lx-name,.lx-pname,.lx-per{height:36px;min-width:0;padding:0 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:13px;font-weight:650}
.lx-per{font-weight:600}
.lx-items .v2-input input,.lx-people .v2-input input{height:34px;padding:0 8px;font-size:14px} /* 천 단위 쉼표가 든 값이 잘리지 않게 */
.lx-name:focus-visible,.lx-pname:focus-visible,.lx-per:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.lx-del{height:36px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--muted);font-size:16px;cursor:pointer}
.lx-del:hover{background:var(--btn);color:var(--ink)}
.lx-del[hidden]{visibility:hidden;display:block}
.lx-subt{grid-column:1/-1;margin-top:-2px;font-family:var(--sans);font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.lx-subt:empty{display:none}
.lx-link{align-self:flex-start;justify-self:start;border:0;background:none;padding:2px 0;font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink);text-decoration:underline;cursor:pointer}
.lx-link[hidden]{display:none}
.lx-acts1{display:flex;flex-wrap:wrap;gap:6px;padding-top:12px;border-top:1px solid var(--soft)}
/* 결과 */
.lx-out{display:flex;flex-direction:column;padding:16px 18px;min-width:0;border-left:1px solid var(--soft)}
.lx-stick{display:flex;flex-direction:column;min-width:0}
@container lx (min-width:780px){ .lx-stick{position:sticky;top:calc(var(--hd-h,52px) + 16px)} }
.lx-stick>.v2-label{display:block;margin-bottom:8px}
.lx-plan{list-style:none;margin:0;padding:0}
.lx-plan li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:baseline;padding:9px 0;border-top:1px solid var(--soft);font-family:var(--sans)}
.lx-plan li:first-child{border-top:0;padding-top:2px}
.lx-plan .nm{display:flex;align-items:center;gap:7px;min-width:0;font-size:14px;font-weight:700;color:var(--ink)}
.lx-plan .nm em{font-style:normal;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.lx-plan b{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;text-align:right;overflow-wrap:anywhere}
.lx-plan small{grid-column:1/-1;font-size:12px;color:var(--ink);opacity:.8;font-variant-numeric:tabular-nums}
.lx-plan small:empty{display:none}
.lx-rows{margin-top:12px}
.lx-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:14px}
.lx-foot .v2-btn[hidden]{display:none}
.lx-foot .v2-status{flex:1 1 100%}
.lx-foot .v2-status:empty{display:none}
/* 아래 상자 */
.lx-box{padding:14px 18px 16px;min-width:0;border-bottom:1px solid var(--soft)}
.lx-box[hidden]{display:none}
.lx-box>.v2-label{display:block;margin-bottom:10px}
.lx-trk{display:flex;height:18px;border-radius:4px;overflow:hidden;background:var(--soft)}
.lx-trk b{display:block;flex:0 0 auto;height:100%;width:0;transition:width .5s var(--ease,ease)}
.lx-cmp{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 10px;align-items:center;margin:20px 0 14px}
.lx-cn{font-family:var(--sans);font-size:12px;font-weight:650;color:var(--muted)}
.lx-mark{position:absolute;top:-6px;bottom:-6px;grid-column:2;grid-row:1/3;width:0;pointer-events:none;transition:left .5s var(--ease,ease)}
.lx-cmp>.lx-mark{left:0}
.lx-mark i{position:absolute;top:0;bottom:0;left:-1px;border-left:2px dashed var(--ink)}
.lx-mark span{position:absolute;bottom:100%;left:0;transform:translateX(-100%);padding-right:3px;font-family:var(--sans);font-size:10.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.lx-keys{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--sans);font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums}
.lx-keys li{display:flex;align-items:center;gap:6px}
.lx-work .k-n i,.lx-work i.k-n,.lx-work b.k-n,.lx-work .lx-rank li.k-n .trk b{background:color-mix(in srgb,var(--ink) 72%,var(--paper))}
.lx-work .k-w i,.lx-work i.k-w,.lx-work b.k-w,.lx-work .lx-rank li.k-w .trk b{background:color-mix(in srgb,var(--ink) 36%,var(--paper))}
.lx-work .k-s i,.lx-work i.k-s,.lx-work b.k-s,.lx-work .lx-rank li.k-s .trk b{background:var(--accent)}
.lx-work .k-o i,.lx-work i.k-o,.lx-work b.k-o,.lx-work .lx-rank li.k-o .trk b{background:color-mix(in srgb,var(--accent) 30%,var(--paper))}
.lx-work .k-l i,.lx-work i.k-l,.lx-work b.k-l{background:repeating-linear-gradient(135deg,var(--line) 0 2px,transparent 2px 6px)}
.lx-work .p0 i,.lx-work b.p0{background:color-mix(in srgb,var(--ink) 72%,var(--paper))}
.lx-work .p1 i,.lx-work b.p1{background:var(--accent)}
.lx-work .p2 i,.lx-work b.p2{background:color-mix(in srgb,var(--ink) 36%,var(--paper))}
.lx-work .p3 i,.lx-work b.p3{background:color-mix(in srgb,var(--accent) 40%,var(--paper))}
.lx-jbar{margin:2px 0 12px}
.lx-pbars,.lx-rank{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px 20px}
.lx-rank{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:4px 20px}
.lx-pbars li,.lx-rank li{display:grid;grid-template-columns:minmax(0,112px) minmax(0,1fr) auto;gap:8px;align-items:center;font-family:var(--sans);font-size:12.5px;color:var(--ink)}
.lx-pbars .nm,.lx-rank .nm{display:flex;align-items:center;gap:6px;min-width:0}
.lx-pbars .nm span,.lx-rank .nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lx-pbars .lx-trk{height:12px}
.lx-rank .trk{height:10px;border-radius:5px;background:var(--soft);overflow:hidden}
.lx-rank .trk b{display:block;height:100%;width:0;border-radius:5px;transition:width .45s var(--ease,ease)}
.lx-pbars .v,.lx-rank .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.lx-steps{margin:0 0 10px;padding-left:22px;display:grid;gap:8px;font-family:var(--sans);font-size:13.5px;line-height:1.55;color:var(--ink)}
.lx-steps li::marker{font-weight:700;color:var(--muted)}
.lx-steps small{display:block;font-size:12px;color:var(--muted)}
.lx-steps b,.lx-res b,.lx-warn b{font-weight:750;font-variant-numeric:tabular-nums}
.lx-res,.lx-warn{margin:0 0 8px;font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--ink)}
.lx-warn{padding:8px 10px;border-left:3px solid var(--accent);background:var(--accent-wash)}
.lx-tbl{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13px;font-variant-numeric:tabular-nums}
.lx-tbl th,.lx-tbl td{padding:7px 8px;border-bottom:1px solid var(--soft);text-align:left;vertical-align:top}
.lx-tbl th{font-size:11.5px;font-weight:650;color:var(--muted)}
.lx-tbl .n{text-align:right;white-space:nowrap}
.lx-tbl .is-on{background:color-mix(in srgb,var(--wash) 70%,var(--paper))}
.lx-tbl small{display:block;font-size:11.5px;color:var(--muted)}
.lx-box .tbl{overflow-x:auto;margin-bottom:8px}
.lx-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;border-bottom:0}
@media (prefers-reduced-motion:reduce){ .lx-trk b,.lx-rank .trk b,.lx-mark{transition:none} }
@container lx (max-width:779px){
  .lx-top{display:flex;flex-direction:column}
  .lx-out{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
}
@container lx (max-width:520px){
  .lx-items li{grid-template-columns:minmax(0,1fr) minmax(100px,1.15fr) 50px 28px;gap:5px}
  .lx-people li,.lx-people-h{grid-template-columns:minmax(0,1fr) minmax(108px,1.3fr) 28px;gap:5px}
  .lx-work.is-pct .lx-people-h{display:none}
  .lx-work.is-pct .lx-people li{grid-template-columns:minmax(0,1fr) 84px 28px} /* 직접 비율이면 이름·빼기 한 줄, 소득·비율 한 줄(센트가 든 소득이 잘리지 않게) */
  .lx-work.is-pct .lx-people .lx-pname{grid-column:1/3}
  .lx-work.is-pct .lx-people .lx-del{grid-column:3;grid-row:1}
  .lx-work.is-pct .lx-people .lx-pinc{grid-column:1/2;grid-row:2}
  .lx-work.is-pct .lx-people .lx-ppct{grid-column:2/4;grid-row:2}
  .lx-name,.lx-pname,.lx-per{padding:0 6px;font-size:12.5px}
  .lx-per{padding:0 2px}
  .lx-row3{gap:6px}
}
@container lx (max-width:420px){ /* 휴대폰: 이름이 잘리지 않게 이름·지우기 한 줄, 금액·주기 한 줄 */
  .lx-items li{grid-template-columns:minmax(0,1fr) 64px 28px}
  .lx-items .lx-name{grid-column:1/3}
  .lx-items .lx-del{grid-column:3;grid-row:1}
  .lx-items .lx-amt{grid-column:1/2}
  .lx-items .lx-per{grid-column:2/4}
}
@container lx (max-width:440px){
  .lx-modebar,.lx-set,.lx-out,.lx-box{padding-left:12px;padding-right:12px}
  .lx-plan b{font-size:21px}
  .lx-pbars li,.lx-rank li{grid-template-columns:minmax(0,84px) minmax(0,1fr) auto}
}