/* 강아지 심장사상충 투약 일정 계산기 전용 CSS (2026-10-18). 위 투약 기록 줄(hwm-in) → [다음 투약 표(hwm-ticket) | 1년 약 시트(hwm-sheet)]. 공용 부품은 assets/v2.css.
   약 시트는 블리스터 포장처럼 달마다 칸 하나, 칸 안에 그 달의 알약(날짜·요일). 첫 칸은 마지막 실제 투약(뜯은 칸).
   움직임: 결과가 바뀌면 알약이 칸에 차례로 들어간다(transitions.dev 토큰: 칸마다 40ms, 250ms cubic-bezier(.22,1,.36,1) — 테마 --ease는 120ms 지연을 품어 쓰지 않음). 동작 줄이기면 끔.
   툴 폭 760px 이상이면 표 | 시트 두 열, 그 아래는 표 → 시트. */
.hwm-work{container:hwm / inline-size;display:flex;flex-direction:column}
.hwm-in{display:flex;flex-direction:column;gap:12px;padding:14px 18px 16px;border-bottom:1px solid var(--soft)}
.hwm-in-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.hwm-in-title{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink)}
.hwm-in-title .i{width:15px;height:15px;color:var(--accent)}
.hwm-btns{display:flex;flex-wrap:wrap;gap:6px}
.hwm-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);gap:12px 14px} /* 가운데 열 = 투약 간격 선택(긴 로케일 선택지가 잘리지 않게) */
.hwm-fields>[hidden]{display:none}
.hwm-in .v2-f>.v2-label{display:block;margin:0 0 5px}
.hwm-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.hwm-ctl{font-size:14.5px;padding-right:6px}
.hwm-ctl:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.hwm-ctl[aria-invalid="true"]{border-color:var(--accent)}
.hwm-seg{display:flex;flex-wrap:nowrap}
.hwm-seg button{flex:1 1 0;min-width:0;height:var(--v2-ctl,42px);padding:0 6px;line-height:1.15;white-space:normal} /* 긴 로케일 라벨(Sepanjang tahun 등)은 버튼 안 두 줄 */
.hwm-help{margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
/* 다음 투약 표 | 약 시트 */
.hwm-main{display:grid;grid-template-columns:minmax(0,1fr);border-bottom:1px solid var(--soft)}
.hwm-ticket{display:flex;flex-direction:column;gap:10px;padding:16px 18px;min-width:0}
.hwm-big{font-size:52px}
.hwm-big span{display:inline-flex;align-items:baseline}
.hwm-big i{font-style:normal;font-size:24px;font-weight:750;margin-left:2px}
.hwm-big small{font-family:var(--sans);font-size:15px;font-weight:700;color:var(--muted)}
.hwm-big.is-ahead small{color:var(--accent)}
.hwm-big.is-over span,.hwm-big.is-over small{color:var(--accent)}
.hwm-date{margin:-4px 0 0;font-family:var(--sans);font-size:17px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums}
.hwm-date:empty{display:none}
.hwm-sub{margin:0}
.hwm-gave{align-self:flex-start}
.hwm-gave[hidden]{display:none}
.hwm-rows li{flex-wrap:wrap}
.hwm-rows li span em{display:block;margin-top:2px;font-size:12px}
.hwm-rows li b{margin-left:auto;text-align:right;white-space:normal}
.hwm-caveat{margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.hwm-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.hwm-sheetbox{container:hwms / inline-size;display:flex;flex-direction:column;gap:10px;padding:16px 18px 18px;min-width:0;border-top:1px solid var(--soft)}
.hwm-sheet-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px}
.hwm-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)}
.hwm-keys li{display:inline-flex;align-items:center;gap:5px}
.hwm-keys i{display:inline-block;width:12px;height:12px;border-radius:4px;border:1.5px solid var(--line);background:var(--paper);box-sizing:border-box}
.hwm-keys .k-given i{border-style:dashed;background:none}
.hwm-keys .k-next i{border-color:var(--accent);background:var(--accent)}
.hwm-keys .k-test i{border:1.5px solid var(--ink);border-radius:50%;background:none}
.hwm-keys .k-off i{border-color:var(--soft);background:repeating-linear-gradient(135deg,var(--soft) 0 1.5px,transparent 1.5px 4px)}
/* 약 시트(블리스터) */
.hwm-sheet{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:10px;list-style:none;border:1px solid var(--soft);border-radius:18px;background:var(--card)}
.hwm-sheet.is-empty{min-height:120px;background:repeating-linear-gradient(135deg,transparent 0 10px,var(--dot) 10px 11px),var(--card)}
.hwm-pk{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;min-height:96px;padding:8px 6px 9px;border:1px solid var(--soft);border-radius:14px;background:var(--wash);box-shadow:inset 0 -3px 6px rgba(26,18,8,.05);font-family:var(--sans);box-sizing:border-box}
.hwm-pk-m{display:flex;align-items:baseline;gap:4px;align-self:flex-start;font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap}
.hwm-pk-m small{font-size:10.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.hwm-pk-m em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--muted)}
.hwm-pills{display:flex;justify-content:center;gap:6px;align-items:center;min-height:44px}
.hwm-pill{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:44px;height:44px;border:1.5px solid var(--line);border-radius:13px;background:var(--paper);color:var(--ink);box-sizing:border-box;box-shadow:0 1px 0 var(--soft);transition:opacity 250ms cubic-bezier(.22,1,.36,1),transform 250ms cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i,0) * 40ms)}
.hwm-pill b{font-size:15px;font-weight:750;line-height:1.05;font-variant-numeric:tabular-nums}
.hwm-pill small{font-size:10px;font-weight:600;line-height:1.1;color:var(--muted)}
.hwm-pill.is-next{border-color:var(--accent);background:var(--accent);color:var(--on-fill)}
.hwm-pill.is-next small{color:var(--on-fill);opacity:.85}
.hwm-pill.is-given{border-style:dashed;background:none;box-shadow:none;color:var(--muted)}
.hwm-pill.is-over{border:2px solid var(--accent);background:var(--accent-wash);color:var(--accent)}
.hwm-pill.is-over small{color:var(--accent)}
.hwm-pill.is-tbd{border-style:dashed;border-color:var(--line);background:none;box-shadow:none;color:var(--muted);opacity:.7}
.hwm-pk:has(.hwm-pill:nth-child(2)) .hwm-pill{width:38px;height:40px}
.hwm-sheet.is-pre .hwm-pill{opacity:0;transform:translateY(-6px) scale(.7);transition:none}
.hwm-tag{font-size:11.5px;font-weight:750;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.hwm-tag.is-next,.hwm-tag.is-over{color:var(--accent)}
.hwm-pk.is-off{background:repeating-linear-gradient(135deg,transparent 0 6px,var(--dot) 6px 7px),var(--paper);box-shadow:none;border-style:dashed}
.hwm-pk.is-off .hwm-pk-m{color:var(--muted)}
.hwm-pk.is-now{border-color:var(--ink);border-width:1.5px}
.hwm-now{position:absolute;top:6px;right:6px;padding:1px 6px;border-radius:999px;background:var(--fill);color:var(--on-fill);font-size:10.5px;font-weight:700;line-height:1.5}
.hwm-tb{display:inline-flex;align-items:center;gap:4px;padding:1px 7px 1px 4px;border:1px solid var(--ink);border-radius:999px;background:var(--paper);font-size:10.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.hwm-tb i{width:8px;height:8px;border:1.5px solid var(--ink);border-radius:50%;box-sizing:border-box}
.hwm-pk.is-first{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:0;padding:8px 12px;border-style:dashed;background:none;box-shadow:none}
.hwm-pk.is-first .hwm-pk-m{align-self:center}
.hwm-pk.is-first .hwm-pills{flex:0 0 auto;justify-content:flex-start}
.hwm-pk.is-first .hwm-now{position:static;margin-left:auto;order:9}
.hwm-cal{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.hwm-cal-note{flex:1 1 100%;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
@container hwms (min-width:560px){.hwm-sheet{grid-template-columns:repeat(6,minmax(0,1fr))}}
@container hwms (max-width:330px){.hwm-sheet{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:8px}.hwm-pk{min-height:90px}.hwm-pk .hwm-now{display:none}.hwm-pk.is-first .hwm-now{display:inline-block}}
@container hwm (min-width:760px){
  .hwm-main{grid-template-columns:minmax(0,.92fr) minmax(0,1.25fr)}
  .hwm-sheetbox{border-top:0;border-left:1px solid var(--soft)}
}
@container hwm (max-width:560px){.hwm-fields{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense}#hwmIvBox,#hwmSeaBox{grid-column:1 / -1}} /* 날짜 칸 둘이 한 줄, 간격·예방 기간은 한 줄 전체 */
@container hwm (max-width:330px){.hwm-fields{grid-template-columns:minmax(0,1fr)}.hwm-big{font-size:46px}}
@media (prefers-reduced-motion:reduce){.hwm-pill{transition:none}}