/* 출산휴가·육아휴직 급여 계산기 — 가족 휴가 계획판. 구역마다 padding 18px + soft 구분선(.v2-work 안쪽 여백 0).
   색: 엄마 = --fill, 아빠 = --fill 42%, 회사 몫 = 같은 색 빗금, 6+6 = accent(이 화면의 accent 한 곳). 계획판 줄은 [입력 --mpl-ctl | 시간축], 컨테이너 760px 아래에서 위아래로 쌓는다. */
.mpl{container:mpl / inline-size;--mpl-ctl:378px;--mpl-m:var(--fill);--mpl-d:color-mix(in srgb,var(--fill) 42%,var(--paper));--mpl-x:var(--accent)}
.mpl > *{padding:18px}
.mpl > * + *{border-top:1px solid var(--soft)}
.mpl .v2-f > .v2-label{display:block;margin:0 0 5px}
.mpl-split b,.mpl-psum,.mpl-mhead b,.mpl-clist li b,.mpl-len,.mpl-table td{font-family:var(--sans)}
.mpl-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none}
.mpl-dot--mom{background:var(--mpl-m)}
.mpl-dot--dad{background:var(--mpl-d);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fill) 55%,transparent)}

/* 결과 띠 */
.mpl-sum{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px 28px;align-items:start;border-radius:var(--radius) var(--radius) 0 0}
.mpl-main .v2-big{margin-top:6px}
.mpl-split{list-style:none;margin:0;padding:0;align-self:center}
.mpl-split li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;grid-template-rows:auto auto;gap:3px 10px;align-items:center;padding:8px 0;border-top:1px solid var(--soft)}
.mpl-split li:first-child{border-top:0}
.mpl-sn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700}
.mpl-sbar{display:flex;height:12px;background:color-mix(in srgb,var(--wash) 80%,var(--paper));border-radius:2px;overflow:hidden}
.mpl-sbar i{display:block;height:100%;transition:width var(--ease)}
.mpl-split li[data-p="mom"] .g{background:var(--mpl-m)}
.mpl-split li[data-p="mom"] .c{background:repeating-linear-gradient(135deg,var(--mpl-m) 0 1.5px,transparent 1.5px 4px)}
.mpl-split li[data-p="dad"] .g{background:var(--mpl-d)}
.mpl-split li[data-p="dad"] .c{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--fill) 55%,var(--paper)) 0 1.5px,transparent 1.5px 4px)}
.mpl-split b{font-size:15px;font-weight:750;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;text-align:right}
.mpl-split small{grid-column:2 / -1;font-family:var(--sans);font-size:12px;color:var(--muted);line-height:1.5}
.mpl-split li.is-off{opacity:.5}
.mpl-notes{grid-column:1 / -1;list-style:none;margin:0;padding:0;display:grid;gap:5px}
.mpl-notes:empty{display:none}
.mpl-notes li{position:relative;padding-left:14px;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted)}
.mpl-notes li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;background:var(--line)}
.mpl-notes li.is-key{color:var(--ink)}
.mpl-notes li.is-key::before{background:var(--mpl-x)}
.mpl-foot{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}

/* 가족 줄 */
.mpl-home{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px}
.mpl-home .mpl-fd{width:190px}
.mpl-resetw{margin-left:auto}
.mpl .mpl-date{display:block;width:100%;height:var(--v2-ctl);padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.mpl .mpl-date:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.mpl .v2-f.is-invalid .mpl-date{border-color:var(--accent)}
.mpl-home .v2-seg button,.mpl-pform .v2-seg button{height:var(--v2-ctl);padding:0 13px;font-size:13px}
.mpl .v2-seg{flex-wrap:nowrap}

/* 계획판 */
.mpl-board{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 24px;padding-top:12px}
.mpl-board > *{grid-column:1 / -1}
.mpl-axisrow,.mpl-lane,.mpl-cash{display:grid;grid-template-columns:var(--mpl-ctl) minmax(0,1fr);gap:0 18px}
.mpl-axcap{align-self:end;font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);padding-bottom:3px}
.mpl-axis{position:relative;height:34px;overflow:hidden;border-bottom:1px solid var(--line)}
.mpl-axis span{position:absolute;bottom:0;height:18px;padding:0 0 0 4px;border-left:1px solid var(--line);font-family:var(--sans);font-size:10.5px;line-height:18px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.mpl-axis span b{font-weight:700;color:var(--ink);margin-right:3px}
.mpl-axis span.is-y{border-left-color:var(--ink)}
.mpl-axm{position:absolute;top:0;transform:translateX(-50%);padding:0 4px;font-family:var(--sans);font-size:10.5px;font-style:normal;font-weight:700;line-height:15px;color:var(--ink);background:var(--card);white-space:nowrap;border-radius:2px}
.mpl-axm--dl{color:var(--mpl-x)}

.mpl-person{padding:14px 0 6px;border-top:1px solid var(--soft)}
.mpl-axisrow + .mpl-person{border-top:0}
.mpl-who-h{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 10px}
.mpl-pname{margin:0;font-family:var(--serif);font-size:17px;font-weight:850;letter-spacing:-.02em}
.mpl-on{margin-left:4px}
.mpl-psum{margin-left:auto;font-size:14px;font-weight:750;font-variant-numeric:tabular-nums}
.mpl-pform,.mpl-extra{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px}
.mpl-extra{margin-top:10px;padding:12px;background:color-mix(in srgb,var(--wash) 55%,var(--paper));border-radius:var(--radius)}
.mpl-extra[hidden]{display:none}
.mpl-wage{width:230px}
.mpl-extra .v2-f:first-child{width:150px}
.mpl-extra .v2-f:nth-child(2){width:230px}
.mpl-ok{height:var(--v2-ctl)}
.mpl-more .mpl-chev{transform:rotate(90deg);transition:transform var(--ease)}
.mpl-more[aria-expanded="true"] .mpl-chev{transform:rotate(-90deg)}
.mpl .is-dim{opacity:.45;pointer-events:none}
.mpl-off{margin:2px 0 6px;font-family:var(--sans);font-size:12.5px;color:var(--muted)}
.mpl-off[hidden]{display:none}

.mpl-lane{padding:12px 0 8px}
.mpl-lane[hidden]{display:none}
.mpl-ctl{display:grid;grid-template-columns:172px 94px 94px;gap:5px 8px;align-content:start}
.mpl-lname{grid-column:1 / -1;margin:0;font-family:var(--sans);font-size:13px;font-weight:750;color:var(--ink)}
.mpl-len{display:flex;align-items:center;justify-content:flex-end;height:var(--v2-ctl);padding:0 10px;border:1px dashed var(--line);border-radius:var(--radius);font-size:15px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--muted)}
.mpl-short .v2-input b{min-width:0;padding:0 8px}
.mpl-track{display:flex;flex-direction:column-reverse;justify-content:flex-start;min-width:0}
.mpl-tb{position:relative;height:var(--v2-ctl);background:color-mix(in srgb,var(--soft) 55%,transparent);border-radius:var(--radius)}
.mpl-cap{margin:0 0 5px;padding-left:clamp(0px,var(--l,0%),calc(100% - 12em));font-family:var(--sans);font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.mpl-cap.is-r{padding-left:0;padding-right:clamp(0px,var(--r,0%),calc(100% - 12em));text-align:right}
.mpl-cap--none{padding-left:0}
.mpl-bar{position:absolute;top:6px;bottom:6px}
.mpl-bar{border-radius:3px;background:var(--mpl-m)}
.mpl-bar.is-dad{background:var(--mpl-d)}
.mpl-bar.is-seg{border-radius:0;box-shadow:inset -1px 0 0 var(--card)}
.mpl-bar.is-late{background:color-mix(in srgb,var(--mpl-m) 62%,var(--paper))}
.mpl-bar.is-dad.is-late{background:color-mix(in srgb,var(--fill) 26%,var(--paper))}
.mpl-bar.is-part{opacity:.55}
.mpl-bar.is-six{box-shadow:inset -1px 0 0 var(--card),inset 0 3px 0 var(--mpl-x)}
.mpl-mk{position:absolute;top:-4px;bottom:-4px;width:0;border-left:1px dashed var(--ink);z-index:2;opacity:.55}
.mpl-mk--dl{border-left:1px dotted var(--mpl-x);opacity:1}

/* 달마다 받는 돈 */
.mpl-cash{padding:14px 0 6px;border-top:1px solid var(--soft)}
.mpl-cashl .mpl-lname{margin-bottom:8px}
.mpl-key{list-style:none;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:5px 14px}
.mpl-key li{display:flex;align-items:center;gap:6px;font-family:var(--sans);font-size:12px;color:var(--ink)}
.mpl-key i,.mpl-col i{display:block}
.mpl-key i{width:14px;height:10px;flex:none;border-radius:1px}
.k-mg,.s-mg{background:var(--mpl-m)}
.k-mc,.s-mc{background:repeating-linear-gradient(135deg,var(--mpl-m) 0 1.5px,transparent 1.5px 4px)}
.k-mc{box-shadow:inset 0 0 0 1px var(--mpl-m)}
.k-dg,.s-dg{background:var(--mpl-d)}
.k-dc,.s-dc{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--fill) 55%,var(--paper)) 0 1.5px,transparent 1.5px 4px)}
.k-dc{box-shadow:inset 0 0 0 1px var(--mpl-d)}
.k-x,.s-x{background:var(--mpl-x)}
.mpl-cashnote{margin:0;font-family:var(--sans);font-size:12px;line-height:1.6;color:var(--muted)}
.mpl-cols{display:grid;height:168px;column-gap:1px;border-bottom:1px solid var(--line)}
.mpl-col{display:flex;flex-direction:column;justify-content:flex-end;min-width:0;padding:0;border:0;border-radius:2px 2px 0 0;background:none;cursor:pointer;transition:background var(--ease)}
.mpl-col:hover{background:color-mix(in srgb,var(--wash) 80%,transparent)}
.mpl-col[aria-pressed="true"]{background:var(--accent-wash)}
.mpl-col:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.mpl-col i{flex:none;width:100%}

.mpl-month,.mpl-claims{grid-column:auto;padding:12px 0 4px;border-top:1px solid var(--soft);min-width:0}
.mpl-mhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:4px}
.mpl-mhead b{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.mpl-mrows li span{line-height:1.5}
.mpl-mrows li.is-none span,.mpl-clist li.is-none span{color:var(--muted)}
.mpl-clist{list-style:none;margin:6px 0 0;padding:0}
.mpl-clist li{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--soft);font-size:13px}
.mpl-clist li span{color:var(--muted);font-family:var(--sans)}
.mpl-clist li b{font-weight:650;font-variant-numeric:tabular-nums}

/* 달마다 지급표 */
.mpl-table summary{cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:700}
.mpl-table[open] summary{margin-bottom:10px}
.mpl-tblw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mpl-table table{width:100%;border-collapse:collapse;font-size:13px}
.mpl-table th{background:var(--wash);font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted);text-align:left;padding:7px 9px;border-bottom:1px solid var(--line);white-space:nowrap}
.mpl-table td{padding:7px 9px;border-bottom:1px solid var(--soft);white-space:nowrap;font-variant-numeric:tabular-nums}
.mpl-table .n{text-align:right}
.mpl-table tr.sum td{background:var(--wash);font-weight:750;border-top:1px solid var(--line)}

/* 고칠 칸이 있을 때 결과 흐림 */
.mpl.is-stale .mpl-main .v2-big,.mpl.is-stale .mpl-split,.mpl.is-stale .mpl-tb,.mpl.is-stale .mpl-cols,.mpl.is-stale .mpl-month,.mpl.is-stale .mpl-claims{opacity:.38}

@container mpl (max-width:759px){
  .mpl-sum{grid-template-columns:minmax(0,1fr)}
  .mpl-month,.mpl-claims{grid-column:1 / -1}
}
@container mpl (max-width:679px){
  .mpl-axisrow,.mpl-lane,.mpl-cash{grid-template-columns:minmax(0,1fr)}
  .mpl-ctl{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr) minmax(0,1fr)}
  .mpl-lane:not([data-lane="pl"]) .mpl-ctl{grid-template-columns:minmax(0,1.8fr) minmax(0,2fr)}
  .mpl-axcap{display:none}
  .mpl-track{margin-top:10px}
  .mpl-cashl{margin-bottom:10px}
  .mpl-key{grid-template-columns:repeat(3,max-content)}
}
@container mpl (max-width:479px){
  .mpl > *{padding:16px 14px}
  .mpl-home .mpl-fd,.mpl-wage{width:100%}
  .mpl-resetw{margin-left:0}
  .mpl-ctl{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mpl-lane[data-lane="pl"] .mpl-fd{grid-column:1 / -1}
  .mpl-extra .v2-f:first-child,.mpl-extra .v2-f:nth-child(2){width:100%}
  .mpl-key{grid-template-columns:repeat(2,max-content)}
  .mpl-split li{grid-template-columns:48px minmax(0,1fr) auto}
}
@media (prefers-reduced-motion:reduce){.mpl-sbar i,.mpl-col,.mpl-more .mpl-chev{transition:none}}