/* 주차 시간·요금 계산기 전용 CSS (2026-10-20). 예시 줄(pf-head) → [결과(pf-res) | 주차권 행(pf-tk)] → 요금 계단(pf-graph) → 이 시각까지 나가면(pf-bd) → [요금표(pf-sg) | 정산 내역(pf-rc)].
   공용 부품은 assets/v2.css. 움직임은 transitions.dev 토큰(위치 이동 400ms·선 그리기 500ms, cubic-bezier(.22,1,.36,1)) — 테마 --ease는 120ms 지연을 품고 있어 쓰지 않음 */
.pf-work{container:pfw / inline-size;--pf-mv:400ms;--pf-ease:cubic-bezier(.22,1,.36,1)}
.pf-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px 18px;border-bottom:1px solid var(--soft)}
.pf-exs{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto;min-width:0}
.pf-exs .v2-btn,.pf-reset{height:30px;padding:0 10px;font-size:12px}
.pf-exs .v2-btn[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}

/* 결과 | 주차권: 넓으면 나란히(결과가 먼저), 좁으면 결과가 위 */
.pf-top{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);border-bottom:1px solid var(--soft);overflow:hidden} /* 절취선 반원 홈이 카드 밖으로 나가지 않게 */
.pf-res{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:16px 18px;min-width:0}
.pf-big{flex-wrap:wrap;gap:2px 10px;font-size:42px}
.pf-big span{white-space:nowrap}
.pf-big small{font-family:var(--sans);font-size:14px;font-weight:650;letter-spacing:0;font-variant-numeric:tabular-nums}
.pf-big.is-empty{font-size:17px;line-height:1.45}
.pf-big.is-empty span{white-space:normal}
.pf-sent{margin:4px 0 0;min-height:1.6em}
.pf-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:8px}
/* 주차권: 왼쪽 가장자리를 절취선(점선 + 반원 홈)으로 */
.pf-tk{position:relative;display:grid;grid-template-columns:max-content minmax(150px,1.35fr) minmax(132px,1fr) max-content;align-content:center;gap:8px 10px;padding:14px 18px 14px 22px;border-left:1px dashed var(--line);min-width:0}
.pf-tk::before,.pf-tk::after{content:"";position:absolute;left:-7px;width:12px;height:12px;border-radius:50%;background:var(--card);border:1px solid var(--soft)}
.pf-tk::before{top:-7px}
.pf-tk::after{bottom:-7px}
.pf-th,.pf-tr{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center}
.pf-th{margin-bottom:-3px}
.pf-th .v2-label{padding-left:2px}
.pf-tl{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:13px;font-weight:750;color:var(--ink);white-space:nowrap}
.pf-tl i{font-style:normal;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;line-height:1;padding:3px 4px 2px;border:1px solid var(--ink);border-radius:var(--radius)}
.pf-tr-out .pf-tl i{background:var(--ink);color:var(--paper)}
.pf-tr-dur .pf-tl{font-weight:650;color:var(--muted)}
.pf-in{display:block;box-sizing:border-box;width:100%;min-width:0;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:15px;font-weight:600;font-variant-numeric:tabular-nums}
.pf-in:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.v2-f.is-invalid .pf-in{border-color:var(--accent)}
.pf-now{display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;padding:0 2px;border:0;background:none;font-family:var(--sans);font-size:12px;font-weight:650;color:var(--muted);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.pf-now:hover{color:var(--ink)}
.pf-now:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pf-live{grid-column:2/-1;margin-top:2px}
@container pfw (max-width:719px){
  .pf-top{grid-template-columns:minmax(0,1fr)}
  .pf-tk{border-left:0;border-top:1px dashed var(--line);padding:14px 18px}
  .pf-tk::before{top:-7px;left:-7px}
  .pf-tk::after{top:-7px;bottom:auto;left:auto;right:-7px}
}
@container pfw (max-width:479px){
  .pf-head{display:grid;grid-template-columns:minmax(0,1fr) max-content;grid-template-areas:"l r" "e e"}
  .pf-head > .v2-label{grid-area:l}
  .pf-exs{grid-area:e}
  .pf-reset{grid-area:r}
  .pf-tk{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);row-gap:10px}
  .pf-th{display:none}
  .pf-tr{row-gap:5px}
  .pf-tl{grid-column:1;grid-row:1}
  .pf-tr > span:last-child:empty{display:none}
  .pf-tr .pf-now{grid-row:1;grid-column:2;justify-self:end;min-height:24px}
  .pf-tr-dur .pf-tl{grid-column:1/-1}
  .pf-live{grid-column:1/-1}
}

/* 요금 계단 그림 */
.pf-graph{padding:14px 18px 6px;border-bottom:1px solid var(--soft)}
.pf-graph[hidden],.pf-bd[hidden]{display:none}
.pf-ghead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;margin:0 0 6px}
.pf-ghead small{font-family:var(--sans);font-size:12px;color:var(--muted)}
.pf-svg{position:relative;min-height:178px;touch-action:pan-y;cursor:ew-resize}
.pf-svg svg{display:block;max-width:100%;overflow:visible;user-select:none;-webkit-user-select:none}
.pf-svg text{font-family:var(--sans);font-size:11px;fill:var(--muted);font-variant-numeric:tabular-nums}
.pf-gl{stroke:var(--soft);stroke-width:1}
.pf-ax{stroke:var(--line);stroke-width:1}
.pf-hl{stroke:var(--line);stroke-width:1.2;opacity:.55}
.pf-free{fill:url(#pfHatch)}
.pf-svg .pf-fl{font-size:10.5px;font-weight:650;fill:var(--muted)}
.pf-wl{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3}
.pf-svg .pf-wt{font-size:10.5px}
.pf-cl{stroke:var(--muted);stroke-width:1;stroke-dasharray:6 4;opacity:.7}
.pf-svg .pf-ct{font-size:10.5px;font-weight:650}
.pf-area{fill:color-mix(in srgb,var(--wash) 85%,var(--ink) 4%)}
.pf-line{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.pf-line.is-drawing{transition:stroke-dashoffset 500ms var(--pf-ease)}
.pf-nx{fill:var(--card);stroke:var(--accent);stroke-width:1.6}
.pf-svg .pf-nt{font-size:11px;font-weight:700;fill:var(--accent)}
.pf-svg .pf-xl.is-mid{font-weight:700;fill:var(--ink)}
.pf-mk{transition:transform var(--pf-mv) var(--pf-ease)}
.pf-md{transition:transform var(--pf-mv) var(--pf-ease)}
.pf-ml{stroke:var(--accent);stroke-width:1.4;stroke-dasharray:2 3}
.pf-md circle{fill:var(--accent);stroke:var(--card);stroke-width:2}
.pf-tip rect{fill:var(--ink)}
.pf-svg .pf-tip text{font-size:11.5px;font-weight:700;fill:var(--paper)}
.pf-scrub{display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:center;gap:12px;padding:4px 0 6px}
.pf-scrub input{width:100%;margin:0;accent-color:var(--ink)}
.pf-scrub span{font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}

/* 이 시각까지 나가면: 지금 구간 + 다음 인상 5개 */
.pf-bd{padding:12px 18px 16px;border-bottom:1px solid var(--soft)}
.pf-board{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--pf-chip,118px)),1fr));gap:6px;margin:6px 0 0;padding:0}
.pf-board button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;height:100%;padding:8px 10px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);text-align:left;cursor:pointer;color:var(--ink);transition:border-color 150ms ease-out,background 150ms ease-out}
.pf-board button:hover{border-color:var(--line);background:var(--card)}
.pf-board button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.pf-bt{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.pf-bv{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px}
.pf-bv b{font-family:var(--sans);font-size:15px;font-weight:750;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.pf-bv em{font-style:normal;font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
.pf-board .is-cur button{border-color:var(--ink);background:color-mix(in srgb,var(--wash) 70%,var(--paper))}
.pf-board .is-cur .pf-bt{color:var(--ink)}
.pf-bar{position:absolute;left:10px;right:10px;bottom:4px;height:3px;background:var(--soft);border-radius:2px;overflow:hidden}
.pf-bar i{display:block;height:100%;background:var(--ink);transition:width var(--pf-mv) var(--pf-ease)}

/* 요금표(안내판) | 정산 내역 */
.pf-low{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.pf-sg{padding:14px 18px 16px;min-width:0}
.pf-rc{padding:14px 18px 16px;min-width:0;border-left:1px solid var(--soft);background:color-mix(in srgb,var(--wash) 45%,var(--card))}
.pf-sg-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin:0 0 10px}
.pf-sg-head span{font-family:var(--sans);font-size:13px;font-weight:750;color:var(--ink)}
.pf-sg-head small{font-family:var(--sans);font-size:12px;color:var(--muted)}
.pf-sign{display:grid;grid-template-columns:max-content minmax(0,.8fr) minmax(0,1.2fr);gap:0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.pf-row{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;row-gap:6px;padding:10px 12px}
.pf-row + .pf-row{border-top:1px solid var(--soft)}
.pf-rl{font-family:var(--sans);font-size:12.5px;font-weight:750;color:var(--ink);white-space:nowrap}
.pf-rh{grid-column:2/-1;font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted)}
.pf-dh{font-family:var(--sans);font-size:11.5px;line-height:1.4;color:var(--muted)}
.pf-fm{display:flex;flex-wrap:nowrap;gap:4px}
.pf-fm button{flex:1 1 0;min-width:0;height:var(--v2-ctl,42px);padding:0 6px;line-height:1.15} /* 긴 로케일 문구는 상자 안 두 줄 */
.pf-work.is-h12{--pf-chip:156px} /* 오전·오후 시각은 칸이 넓어야 한 줄 */
.pf-sel{padding-right:6px;font-size:13.5px}
.pf-rows li span em{display:block;margin-top:1px;font-size:11.5px}
.pf-rows li{align-items:flex-start}
.pf-rows li.sum b{font-size:16px}
@container pfw (max-width:719px){
  .pf-low{grid-template-columns:minmax(0,1fr)}
  .pf-rc{border-left:0;border-top:1px solid var(--soft)}
}
@container pfw (max-width:479px){
  .pf-row-max{grid-template-columns:minmax(0,1fr)}
  .pf-row-max .pf-rh{grid-column:1}
}
@container pfw (max-width:399px){
  .pf-sign{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .pf-rl,.pf-rh{grid-column:1/-1}
  .pf-fm button{font-size:12px;padding:0 4px}
}
@media (prefers-reduced-motion:reduce){
  .pf-mk,.pf-md,.pf-bar i,.pf-line.is-drawing,.pf-board button{transition:none}
}