/* 통상임금 계산기 전용 CSS (2026-10-20). 위 결과 띠(owc-sum) → 급여명세서 줄(owc-ledger) → 시간 기준 | 쓰임(owc-low). 공용 부품은 assets/v2.css.
   시각 요소(R45): 월 지급액 중 통상임금 몫 막대(줄마다 조각, 폭 미끄러짐·처음 자라남) · 1주 기준시간 막대(7일 × 8시간 눈금) · 2024년 판결 전후 통상시급 막대. 동작 줄이기면 멈춤 */
.owc{container:owc / inline-size}
.owc [hidden]{display:none !important}
.owc-sum{padding:16px 18px 18px;border-bottom:1px solid var(--soft);container:owcs / inline-size}
.owc-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 22px;align-items:start}
.owc-main{min-width:0;container:owcm / inline-size}
.owc-main .v2-label,.owc-split .v2-label,.owc-era .v2-label,.owc-boxlabel{display:block;margin-bottom:6px}
.owc-main .v2-big{flex-wrap:wrap}
.owc-main .v2-big>span{min-width:0;overflow-wrap:anywhere}
.owc-main .v2-big:not(.is-empty)>span{white-space:nowrap;font-size:clamp(20px, calc(100cqi / (var(--owc-len, 9) * .62)), 1em)}
.owc-main .v2-big>span i{font-style:normal;font-size:.48em;font-weight:700;margin-left:4px;color:var(--muted)}
.owc-main .v2-big.is-empty span{font-size:18px;font-weight:600;color:var(--muted);white-space:normal}
.owc-stats{margin:0;display:grid;gap:10px;min-width:150px;padding-left:18px;border-left:1px solid var(--soft)}
.owc-stats div{display:grid;gap:2px;min-width:0}
.owc-stats dt{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.owc-stats dd{margin:0;font-family:var(--sans);font-size:18px;font-weight:800;line-height:1.25;font-variant-numeric:tabular-nums lining-nums;color:var(--ink);white-space:nowrap}
@container owcs (max-width:540px){
  .owc-head{grid-template-columns:minmax(0,1fr)}
  .owc-stats{grid-template-columns:repeat(3,minmax(0,1fr));min-width:0;padding:10px 0 0;border-left:0;border-top:1px solid var(--soft)}
  .owc-stats dd{font-size:15px;white-space:normal;overflow-wrap:anywhere}
}
/* 통상임금 몫 막대 */
.owc-split{margin-top:16px}
.owc-bar{display:flex;height:34px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.owc-sg{position:relative;flex:0 0 auto;min-width:0;height:100%;overflow:hidden;box-shadow:inset -2px 0 0 var(--paper);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.owc-sg em{position:absolute;left:7px;top:50%;transform:translateY(-50%);font-style:normal;font-family:var(--sans);font-size:11.5px;font-weight:700;white-space:nowrap}
.owc-sg.is-tight em{display:none}
.owc-sg.is-i{background:var(--fill);color:var(--on-fill)}
.owc-sg.is-i:nth-child(even){background:color-mix(in srgb,var(--fill) 80%,var(--paper))}
.owc-sg.is-r{background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--accent) 60%,transparent) 0 2px,transparent 2px 6px) var(--wash);color:var(--ink)}
.owc-sg.is-x{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 28%,transparent) 0 2px,transparent 2px 7px) var(--wash);color:var(--muted)}
.owc-key{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.owc-key li{display:flex;align-items:center}
.owc-sw{display:inline-block;flex:0 0 auto;width:11px;height:11px;margin-right:6px;border:1px solid var(--line);border-radius:2px}
.owc-sw.is-i{background:var(--fill);border-color:var(--fill)}
.owc-sw.is-r{background:repeating-linear-gradient(90deg,var(--accent) 0 2px,transparent 2px 4px) var(--wash)}
.owc-sw.is-x{background:repeating-linear-gradient(135deg,var(--muted) 0 1px,transparent 1px 4px) var(--wash)}
.owc-notes{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.owc-notes:empty{display:none}
.owc-notes li{padding:8px 10px;border-radius:var(--radius);background:var(--accent-wash);font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink)}
/* 2024년 판결 전후 */
.owc-era{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.owc-eras{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.owc-eras li{display:grid;grid-template-columns:max-content minmax(0,1fr) auto;gap:10px;align-items:center;font-family:var(--sans);font-size:12.5px;color:var(--muted)}
.owc-eras li>i{display:block;height:12px;border:1px solid var(--soft);border-radius:2px;background:var(--paper);overflow:hidden}
.owc-eras li>i i{display:block;width:0;height:100%;background:var(--fill);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.owc-eras li+li>i i{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 45%,transparent) 0 2px,transparent 2px 6px) color-mix(in srgb,var(--fill) 25%,var(--paper))}
.owc-eras li>span{white-space:nowrap}
.owc-eras b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
@container owcs (max-width:460px){ .owc-eras li{grid-template-columns:minmax(0,1fr) auto} .owc-eras li>i{grid-column:1 / -1;grid-row:2} }
.owc-note{margin:8px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.owc-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--soft)}
.owc-foot .v2-status{margin-left:auto}
/* 급여명세서 줄: 줄마다 같은 열 정의라 세로선이 맞는다. 660px 미만은 두 줄(종류 | 판정 / 금액 | 주기 | 지우기). 줄 구분선은 아래쪽(위쪽 테두리면 align-check가 줄 전체를 입력 상자로 잼) */
.owc-ledger{padding:16px 18px 18px;border-bottom:1px solid var(--soft)}
.owc-lhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.owc-lhead .v2-label{margin:0}
.owc-count{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap}
.owc-hint{margin:4px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.owc-form{margin-top:10px;container:owcl / inline-size} /* 폼을 품은 칸은 v2.css가 v2in 컨테이너로 잡으므로 줄 배치 기준은 폼 자신 */
.owc-colh{display:none}
.owc-list{list-style:none;margin:0;padding:0}
.owc-row{display:grid;grid-template-columns:minmax(0,1fr) 112px 32px;grid-template-areas:"type dec dec" "amt cyc del" "why why why";gap:6px;align-items:center;padding:10px 0;border-bottom:1px solid var(--soft)}
.owc-row:first-child{padding-top:0}
.owc-row:last-child{border-bottom:0}
.owc-row .owc-type{grid-area:type}.owc-row .owc-amt{grid-area:amt}.owc-row .owc-cyc{grid-area:cyc}.owc-row .owc-dec{grid-area:dec}.owc-row .owc-del{grid-area:del}.owc-row .owc-why{grid-area:why}
@container owcl (min-width:660px){
  .owc-colh,.owc-row{grid-template-columns:minmax(140px,1.2fr) minmax(132px,1fr) 108px 150px 32px;grid-template-areas:"type amt cyc dec del" "why why why why why"}
  .owc-colh{display:grid;gap:6px;padding-bottom:6px;margin-bottom:8px;border-bottom:1px solid var(--soft);font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted)}
  .owc-colh span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .owc-colh span:nth-child(1){grid-area:type}.owc-colh span:nth-child(2){grid-area:amt}.owc-colh span:nth-child(3){grid-area:cyc}.owc-colh span:nth-child(4){grid-area:dec}.owc-colh span:nth-child(5){grid-area:del}
}
.owc-row select{display:block;width:100%;min-width:0;height:var(--v2-ctl,42px);padding:0 24px 0 10px;border:1px solid var(--line);border-radius:var(--radius);appearance:none;-webkit-appearance:none;background:var(--paper) no-repeat right 8px center/9px 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E");font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink);text-overflow:ellipsis}
.owc-row select:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.owc-row .v2-input{min-width:0}
.owc-row .v2-input input{padding:0 8px;font-size:14.5px}
.owc-row .v2-input b{min-width:0;padding:0 8px}
.owc-fixed{display:flex;align-items:center;min-width:0;height:var(--v2-ctl,42px);padding:0 10px;border:1px dashed var(--line);border-radius:var(--radius);font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden}
.owc-dec.owc-fixed{justify-content:center;font-size:12.5px;color:var(--muted)}
.owc-dec.v2-seg{display:flex;flex-wrap:nowrap;gap:3px;min-width:0}
.owc-dec.v2-seg button{flex:1 1 0;min-width:0;height:var(--v2-ctl,42px);padding:0 6px;font-weight:700;white-space:nowrap}
.owc-row[data-d="r"] .owc-dec button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.owc-del{width:32px;height:var(--v2-ctl,42px);border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--muted);font-size:16px;line-height:1;cursor:pointer}
.owc-del:hover{background:var(--btn);color:var(--ink)}
.owc-del.is-none{border:0;background:none;cursor:default}
.owc-why{margin:0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.owc-why b{margin-right:2px;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.owc-why b:empty{display:none}
.owc-row[data-d="x"] .owc-why b,.owc-row[data-d="r"] .owc-why b{color:var(--muted);font-weight:600}
.owc-row.is-invalid .owc-amt,.owc-row [aria-invalid="true"]{border-color:var(--accent)}
.owc-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.owc-q{height:30px;padding:0 10px;background:var(--paper);border-color:var(--soft);font-weight:600}
.owc-q:disabled{opacity:.45;cursor:default}
.owc-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
/* 시간 기준 | 쓰임 */
.owc-low{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.owc-hours,.owc-uses{padding:16px 18px 18px;min-width:0}
.owc-uses{border-left:1px solid var(--soft)}
@container owc (max-width:640px){ .owc-low{grid-template-columns:minmax(0,1fr)} .owc-uses{border-left:0;border-top:1px solid var(--soft)} }
.owc-hf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.owc-hf .v2-f{min-width:0}
.owc-hf .v2-f>.v2-label{display:block}
.owc-hf .v2-f.is-auto input{color:var(--muted)}
.owc-auto{margin:0 0 0 2px;padding:0;border:0;background:none;font:inherit;font-weight:700;color:var(--ink);text-decoration:underline;cursor:pointer}
.owc-hours .owc-hint{margin-top:8px}
.owc-week{display:flex;height:30px;margin-top:12px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:repeating-linear-gradient(90deg,transparent 0 calc(100% / 7 - 1px),var(--soft) calc(100% / 7 - 1px) calc(100% / 7)) var(--paper)}
.owc-week span{position:relative;flex:0 0 auto;min-width:0;height:100%;overflow:hidden;box-shadow:inset -2px 0 0 var(--paper);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.owc-week em{position:absolute;left:7px;top:50%;transform:translateY(-50%);font-style:normal;font-family:var(--sans);font-size:11.5px;font-weight:700;white-space:nowrap}
.owc-week .is-tight em{display:none}
.owc-week .is-reg{background:var(--fill);color:var(--on-fill)}
.owc-week .is-wr{background:color-mix(in srgb,var(--fill) 55%,var(--paper));color:var(--ink)}
.owc-week .is-xh{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 35%,transparent) 0 2px,transparent 2px 6px) var(--wash);color:var(--ink)}
.owc-urows{margin-top:2px}
.owc-urows li{gap:10px}
.owc-urows li span{min-width:0;flex:1 1 auto;color:var(--ink);font-size:12.5px}
.owc-urows li em{flex:0 0 auto;font-style:normal;font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.owc-urows li b{flex:0 0 auto;min-width:6.2em;text-align:right}
.owc-next{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.owc-next .i{width:14px;height:14px}
@media (prefers-reduced-motion:reduce){ .owc-sg,.owc-week span,.owc-eras li>i i{transition:none} }