/* 반려동물 예방접종 일정 계산기 전용 CSS (2026-10-23). 위 입력 줄(pvs-in) → 다음 접종 띠(pvs-next) → 생후 접종 지도(pvs-map) → 접종 수첩 펼침면(pvs-book). 공용 부품은 assets/v2.css.
   수첩은 동물병원 접종 수첩처럼 두 쪽(기초 접종 | 그 뒤 접종)에 차수 칸을 적고, 칸 머리의 동그라미를 누르면 도장이 찍히듯 체크가 들어간다.
   움직임(R45): 첫 그림에서 지도가 생일부터 오늘까지 차오르고 접종 점이 차례로 나오며, 수첩에 기록하면 도장이 눌린다
   (transitions.dev 토큰: 차오름 900ms·점 40ms 간격 220ms·도장 320ms, cubic-bezier(.22,1,.36,1)). 동작 줄이기면 끔.
   툴 폭 600px 이상이면 수첩 두 쪽을 나란히, 640px 이상이면 다음 접종 띠를 두 열로 둔다. */
.pvs-work{container:pvs / inline-size;display:flex;flex-direction:column}
.pvs-in{display:flex;flex-direction:column;gap:12px;padding:14px 18px 14px;border-bottom:1px solid var(--soft)}
.pvs-in-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.pvs-in-title{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink)}
.pvs-in-title .i{width:15px;height:15px;color:var(--accent)}
.pvs-btns{display:flex;flex-wrap:wrap;gap:6px}
.pvs-fields{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr) minmax(0,.95fr) minmax(0,1.2fr);gap:12px 14px} /* 넷째 열 = 간격 단추 3개(긴 로케일 2 sem.) */
.pvs-in .v2-f>.v2-label{display:block;margin:0 0 5px}
.pvs-ctl{display:block;width:100%;min-width:0;height:var(--v2-ctl,42px);margin:0;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;box-sizing:border-box}
select.pvs-ctl{font-size:14.5px;padding-right:6px}
.pvs-ctl:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.pvs-ctl[aria-invalid="true"]{border-color:var(--accent)}
.pvs-seg{display:flex;flex-wrap:nowrap}
.pvs-seg button{flex:1 1 0;min-width:0;height:var(--v2-ctl,42px);padding:0 6px;font-size:13.5px;line-height:1.15;white-space:normal}
.pvs-opt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.pvs-help{flex:1 1 280px;margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}

/* 다음 접종 띠 */
.pvs-next{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:4px 26px;padding:16px 18px;border-bottom:1px solid var(--soft)}
.pvs-next-main{display:flex;flex-direction:column;gap:8px;min-width:0}
.pvs-big{font-size:52px}
.pvs-big.is-over,.pvs-big.is-now{color:var(--accent)}
.pvs-big.is-empty{font-size:22px}
.pvs-what{display:flex;flex-direction:column;gap:3px;margin:0;font-family:var(--sans)}
.pvs-what:empty{display:none}
.pvs-what b{font-size:17px;font-weight:750;color:var(--ink)}
.pvs-what span{font-size:13.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.pvs-sub{margin:2px 0 0}
.pvs-rows{align-self:start;min-width:0}
.pvs-rows li:first-child{border-top:0}
.pvs-rows li b{white-space:normal;text-align:right}
.pvs-foot{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}

/* 생후 접종 지도 */
.pvs-map{display:flex;flex-direction:column;gap:8px;padding:14px 18px 14px;border-bottom:1px solid var(--soft)}
.pvs-map-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px}
.pvs-keys{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;padding:0;list-style:none;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.pvs-keys li{display:inline-flex;align-items:center;gap:5px}
.pvs-keys li[hidden]{display:none}
.pvs-keys i{display:inline-block;width:11px;height:11px;border-radius:50%;box-sizing:border-box}
.pvs-keys .k-done i{background:var(--ink)}
.pvs-keys .k-next i{border:2.5px solid var(--accent);background:var(--paper)}
.pvs-keys .k-plan i{border:1.5px solid var(--line);background:var(--paper)}
.pvs-keys .k-mda i{width:18px;height:9px;border-radius:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 22%,transparent),transparent)}
.pvs-chart{min-height:120px}
.pvs-svg{display:block;max-width:100%;height:auto;overflow:visible}
.pvs-svg text{font-family:var(--sans)}
.pvs-fill{fill:var(--accent-wash);transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0)}
.pvs-svg.is-ready .pvs-fill{transform:scaleX(1);transition:transform 900ms cubic-bezier(.22,1,.36,1)}
.pvs-mda .g0,.pvs-svg .g0{stop-color:var(--ink);stop-opacity:.17}
.pvs-svg .g1{stop-color:var(--ink);stop-opacity:.07}
.pvs-svg .g2{stop-color:var(--ink);stop-opacity:0}
.pvs-tk{stroke:var(--soft);stroke-width:1}
.pvs-tl{font-size:10.5px;font-weight:600;fill:var(--muted);font-variant-numeric:tabular-nums}
.pvs-lane{stroke:var(--line);stroke-width:1;stroke-dasharray:2 3}
.pvs-ln{font-size:11.5px;font-weight:700;fill:var(--muted)}
.pvs-pt{transform-box:fill-box;transform-origin:50% 50%;opacity:0;transform:scale(.4)}
.pvs-svg.is-ready .pvs-pt{opacity:1;transform:none;transition:opacity 220ms ease-out,transform 220ms cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i) * 40ms + 260ms)}
.pvs-pt circle{fill:var(--paper);stroke:var(--line);stroke-width:1.5}
.pvs-pt text{font-size:10px;font-weight:800;fill:var(--muted)}
.pvs-pt.is-done circle{fill:var(--ink);stroke:var(--ink)}
.pvs-pt.is-done text{fill:var(--paper)}
.pvs-pt.is-next circle,.pvs-pt.is-now circle{stroke:var(--accent);stroke-width:2.5}
.pvs-pt.is-next text,.pvs-pt.is-now text{fill:var(--accent)}
.pvs-pt.is-over circle{fill:var(--accent);stroke:var(--accent)}
.pvs-pt.is-over text{fill:var(--paper)}
.pvs-pt.is-far text{font-size:12px}
#pvsL1x:not(:empty){margin-top:10px}
.pvs-today{stroke:var(--accent);stroke-width:1.5}
.pvs-todayT{font-size:11px;font-weight:800;fill:var(--accent)}
.pvs-immL{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 2;opacity:.6}
.pvs-immT{font-size:10.5px;font-weight:700;fill:var(--muted)}
.pvs-map-note{margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}

/* 접종 수첩 펼침면 */
.pvs-book{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pvs-page{container:pvsp / inline-size;display:flex;flex-direction:column;gap:6px;min-width:0;padding:14px 18px 16px}
.pvs-page+.pvs-page{border-left:1px solid var(--line);box-shadow:inset 7px 0 9px -9px color-mix(in srgb,var(--ink) 40%,transparent)}
.pvs-ph{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:2px 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.pvs-pn{grid-row:span 2;align-self:center;display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid var(--line);border-radius:50%;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted)}
.pvs-ph h3{margin:0;font-family:var(--serif);font-size:16px;font-weight:700;color:var(--ink)}
.pvs-ph small{font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted)}
.pvs-ph small:empty{display:none}
.pvs-sec{display:flex;flex-direction:column}
.pvs-sec+.pvs-sec{margin-top:10px}
.pvs-sec h4{margin:4px 0 0;font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--muted)}
.pvs-list{list-style:none;margin:0;padding:0}
.pvs-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;grid-template-areas:"s t d";align-items:center;gap:4px 10px;padding:8px 0;border-top:1px dashed var(--soft)}
.pvs-list>.pvs-row:first-child{border-top:0}
.pvs-stamp{grid-area:s;display:grid;place-items:center;width:30px;height:30px;padding:0;border:1.5px dashed var(--line);border-radius:50%;background:var(--paper);color:transparent;cursor:pointer;transition:background 120ms ease-out,border-color 120ms ease-out}
.pvs-stamp svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pvs-stamp:hover:not(:disabled){border-color:var(--ink)}
.pvs-stamp:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pvs-stamp:disabled{cursor:default;opacity:.55}
.pvs-stamp[aria-pressed="true"]{border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);opacity:1}
.pvs-row.is-next .pvs-stamp,.pvs-row.is-now .pvs-stamp,.pvs-row.is-over .pvs-stamp{border:2px solid var(--accent)}
.pvs-stamp.is-stamped{animation:pvsStamp 320ms cubic-bezier(.22,1,.36,1)}
@keyframes pvsStamp{0%{transform:scale(1.45) rotate(-14deg);opacity:.35}60%{transform:scale(.92) rotate(2deg);opacity:1}100%{transform:none}}
.pvs-rt{grid-area:t;display:flex;flex-direction:column;gap:2px;min-width:0;font-family:var(--sans)}
.pvs-rt b{font-size:14px;font-weight:750;color:var(--ink)}
.pvs-rt small{font-size:11.5px;line-height:1.4;color:var(--muted)}
.pvs-rd{grid-area:d;display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-family:var(--sans);text-align:right}
.pvs-rm{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.pvs-rd time{font-size:13.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.pvs-rd small{font-size:11px;color:var(--muted);white-space:nowrap}
.pvs-dd{width:138px;height:var(--v2-ctl,42px);padding:0 8px;font-size:14px}
.pvs-chip{padding:0 6px;border:1px solid var(--soft);border-radius:var(--radius);font-family:var(--sans);font-size:11px;font-style:normal;font-weight:750;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.pvs-row.is-done .pvs-chip{border-color:var(--ink);color:var(--ink)}
.pvs-row.is-next .pvs-chip,.pvs-row.is-now .pvs-chip{border-color:var(--accent);color:var(--accent)}
.pvs-row.is-over .pvs-chip{border-color:var(--accent);background:var(--accent);color:var(--paper)}
.pvs-row.is-done .pvs-rt b{color:var(--muted)}
.pvs-empty{padding:12px 0;font-family:var(--sans);font-size:13px;color:var(--muted)}
.pvs-imm{margin:4px 0 0;padding-top:8px;border-top:1px solid var(--soft);font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink)}
.pvs-imm:empty{display:none}
.pvs-law{margin:6px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}

@container pvsp (max-width:250px){
  .pvs-row{grid-template-areas:"s t t" "s d d"}
  .pvs-rd{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;width:100%;text-align:left}
}
@container pvs (max-width:599px){
  .pvs-book{grid-template-columns:minmax(0,1fr)}
  .pvs-page+.pvs-page{border-left:0;border-top:1px solid var(--line);box-shadow:inset 0 7px 9px -9px color-mix(in srgb,var(--ink) 40%,transparent)}
}
@container pvs (max-width:639px){
  .pvs-next{grid-template-columns:minmax(0,1fr)}
  .pvs-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pvs-big{font-size:44px}
}
@container pvs (max-width:359px){
  .pvs-fields{grid-template-columns:minmax(0,1fr)}
  .pvs-in,.pvs-next,.pvs-map,.pvs-page{padding-left:14px;padding-right:14px}
}
@media (prefers-reduced-motion:reduce){
  .pvs-fill,.pvs-pt{transition:none!important}
  .pvs-stamp.is-stamped{animation:none}
}