/* 일용직 4대보험 계산기 전용 CSS (2026-10-23). 입력 | 결과 두 칸 + 출근 칸(1~31일, 칸 높이 = 그날 하루가 보탠 실수령). 공용 부품은 assets/v2.css */
.dwi{container:dwi / inline-size}
.dwi-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);grid-template-rows:auto 1fr;grid-template-areas:"in out" "in detail"} /* DOM 은 요약 → 입력 → 원장(좁으면 그 순서로 쌓임) */
.dwi-in{grid-area:in;padding:16px 18px 18px;min-width:0}
.dwi-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 12px}
.dwi-fields .v2-f>.v2-label{display:block}
.dwi-wage{grid-column:1/-1}
.dwi-chips{margin-top:8px}
.dwi-chips button{height:28px;padding:0 10px;font-family:var(--sans);font-size:12px;font-weight:600}
.dwi-hint{display:block;margin-top:5px;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted);word-break:keep-all;overflow-wrap:anywhere}
.dwi-wage .dwi-hint{text-align:right;min-height:18px}
.dwi-step button{flex:0 0 34px;border:0;background:var(--btn);color:var(--ink);font-family:var(--sans);font-size:17px;font-weight:700;cursor:pointer}
.dwi-step button:first-child{border-right:1px solid var(--soft)}
.dwi-step button:last-child{border-left:1px solid var(--soft)}
.dwi-step button:hover{background:var(--btn-hover)}
.dwi-step button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.dwi-step input{text-align:center;padding:0 4px}
.dwi-step b{border-left:0;min-width:0;padding:0 8px 0 0}

/* 출근 칸 */
.dwi-cal{margin-top:16px}
.dwi-cal__head{display:flex;align-items:baseline;justify-content:space-between;gap:4px 12px;flex-wrap:wrap;margin-bottom:8px}
.dwi-cal__head .dwi-hint{margin:0}
.dwi-cells{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.dwi-cells button{position:relative;height:54px;min-width:0;padding:0;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);cursor:pointer;overflow:hidden}
.dwi-cells button i{position:absolute;left:3px;right:3px;top:3px;bottom:17px;transform:scaleY(var(--h,0));transform-origin:50% 100%;background:color-mix(in srgb, var(--fill) 30%, var(--paper));transition:transform .44s cubic-bezier(.2,.75,.25,1) calc(var(--i,0) * 14ms),background-color .2s ease}
.dwi-cells button span{position:absolute;left:0;right:0;bottom:1px;font-family:var(--mono);font-size:10.5px;line-height:15px;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
.dwi-cells button.p1 i{background:color-mix(in srgb, var(--fill) 55%, var(--paper))}
.dwi-cells button.p2 i{background:color-mix(in srgb, var(--fill) 80%, var(--paper))}
.dwi-cells button.is-off{border-style:dashed;background:transparent}
.dwi-cells button.is-off i{background:color-mix(in srgb, var(--fill) 11%, var(--paper))}
.dwi-cells button.is-cut i{background:var(--accent)}
.dwi-cells button.is-cut.is-off i{background:color-mix(in srgb, var(--accent) 32%, var(--paper))}
.dwi-cells button.is-cut span{color:var(--accent);font-weight:700}
.dwi-cells button.is-neg{border-color:var(--accent)}
.dwi-cells button.is-on span{color:var(--ink)}
.dwi-cells button[aria-checked="true"]{border:2px solid var(--ink)}
.dwi-cells button[aria-checked="true"] span{font-weight:700}
.dwi-cells button:hover{border-color:var(--line)}
.dwi-cells button[aria-checked="true"]:hover{border-color:var(--ink)}
.dwi-cells button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.dwi-legend{display:flex;flex-wrap:wrap;gap:4px 12px;list-style:none;margin:8px 0 0;padding:0;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.dwi-legend li{display:inline-flex;align-items:center;gap:5px}
.dwi-legend li::before{content:"";width:10px;height:10px;border-radius:1px;background:color-mix(in srgb, var(--fill) 30%, var(--paper))}
.dwi-legend li.p1::before{background:color-mix(in srgb, var(--fill) 55%, var(--paper))}
.dwi-legend li.p2::before{background:color-mix(in srgb, var(--fill) 80%, var(--paper))}
.dwi-legend li.cut::before{background:var(--accent)}
.dwi-read{min-height:58px;margin:8px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink);word-break:keep-all;overflow-wrap:anywhere}

/* 조건 */
.dwi-conds{display:grid;grid-template-columns:minmax(0,1fr);gap:13px;margin-top:14px;padding-top:14px;border-top:1px solid var(--soft)}
.dwi-cond>.v2-label{display:block}
.dwi-seg{margin-top:6px}
.dwi-seg button{height:32px;padding:0 10px;font-family:var(--sans);font-size:12.5px;font-weight:700;white-space:nowrap}
.dwi-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:16px}
.dwi-year{margin-left:auto;font-family:var(--sans);font-size:12px;color:var(--muted);text-align:right}

/* 결과 */
.dwi-out{grid-area:out;padding:16px 18px 14px;min-width:0;border-left:1px solid var(--soft)}
.dwi-detail{grid-area:detail;padding:0 18px 18px;min-width:0;border-left:1px solid var(--soft)}
.dwi-out>.v2-label{display:block;margin-bottom:6px}
.dwi-out .v2-big{flex-wrap:wrap;row-gap:6px}
.dwi-out .v2-big>span{min-width:0;overflow-wrap:anywhere}
.dwi-out .v2-big>span i{font-style:normal;font-size:.5em;font-weight:700;margin-left:4px;color:var(--muted)}
.dwi-out .v2-big>span small{display:block;margin-top:6px;font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--muted)}
.dwi-out .v2-big.is-empty>span{font-size:18px;font-weight:600;color:var(--muted)}
.dwi-warn{margin:8px 0 0;padding:8px 10px;border-left:2px solid var(--accent);background:var(--accent-wash);font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink)}
.dwi-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;list-style:none;margin:14px 0 0;padding:0}
.dwi-tiles li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;align-content:start;padding:8px 10px;border:1px solid var(--soft);border-left:3px solid var(--fill);border-radius:var(--radius);background:var(--paper);font-family:var(--sans)}
.dwi-tiles b{font-size:13px;font-weight:800;color:var(--ink)}
.dwi-tiles span{font-size:12px;font-weight:700;color:var(--ink);text-align:right;white-space:nowrap}
.dwi-tiles small{grid-column:1/-1;font-size:11.5px;line-height:1.45;color:var(--muted);word-break:keep-all;overflow-wrap:anywhere}
.dwi-tiles li[data-state="off"]{border-left-color:var(--soft)}
.dwi-tiles li[data-state="off"] b,.dwi-tiles li[data-state="off"] span{color:var(--muted)}
.dwi-tiles li[data-state="next"],.dwi-tiles li[data-state="part"]{border-left-style:dashed;border-left-color:var(--line)}
.dwi-tiles li[data-state="emp"]{border-left-color:var(--line)}
.dwi-ledger-wrap{padding-top:12px;border-top:1px solid var(--soft);overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.dwi-ledger{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13px;font-variant-numeric:tabular-nums}
.dwi-ledger caption{caption-side:top;text-align:left;padding:0 0 4px;font-size:11.5px;font-weight:600;color:var(--muted)}
.dwi-ledger th,.dwi-ledger td{padding:7px 6px;border-top:1px solid var(--soft);text-align:left;vertical-align:top}
.dwi-ledger thead th{font-size:11.5px;font-weight:700;color:var(--muted);border-top:0}
.dwi-ledger tbody th,.dwi-ledger tfoot th{font-weight:700;color:var(--ink)}
.dwi-ledger th small{display:block;margin-top:2px;font-size:11.5px;font-weight:400;color:var(--muted);word-break:keep-all;overflow-wrap:anywhere}
.dwi-ledger .n{text-align:right;white-space:nowrap;width:1%}
.dwi-ledger .is-none{color:var(--muted)}
.dwi-ledger tr.sum th,.dwi-ledger tr.sum td{border-top:1px solid var(--line);font-weight:800}
.dwi-emp{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:12px 0}
.dwi-emp .v2-label{display:block;margin-bottom:5px}
.dwi-select{display:block;width:100%;max-width:100%;height:var(--v2-ctl,42px);padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:13.5px;font-weight:600}
.dwi-select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dwi-detail .v2-formula{margin:0;white-space:normal;overflow-wrap:anywhere;line-height:1.6}
.dwi-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.dwi-foot .v2-status{margin-left:auto}

/* 작업면이 좁으면 한 칸: 요약 → 입력 → 원장 */
@container dwi (max-width:619px){
  .dwi-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"out" "in" "detail"}
  .dwi-out{border-left:0;border-bottom:1px solid var(--soft)}
  .dwi-detail{border-left:0;border-top:1px solid var(--soft);padding-top:4px}
  .dwi-ledger-wrap{border-top:0}
}
@container dwi (max-width:420px){
  .dwi-in,.dwi-out,.dwi-detail{padding-left:12px;padding-right:12px}
  .dwi-cells button{height:50px}
  .dwi-year{margin-left:0;flex-basis:100%;text-align:left}
}