/* 반려동물 중성화 시기 계산기 전용 CSS (2026-10-17). 위 입력 줄(nt-in, 영역 이름 격자) → 결과 | 날짜별 일정(nt-res) → 5줄 시기 지도(nt-map). 공용 부품은 assets/v2.css.
   움직임: 지도 막대·오늘 선은 위치·폭 450ms cubic-bezier(.22,1,.36,1)(transitions.dev 기준, 테마 --ease는 120ms 지연을 품어 쓰지 않음), 동작 줄이기면 끔.
   지도는 HTML 막대라 360px에서도 줄이지 않고 그대로 읽힌다(라벨은 좁으면 막대 위로). 모바일은 결과가 입력 위. */
.nt-work{container:nt / inline-size;display:flex;flex-direction:column}
.nt-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"sp sex sz" "mode date op" "help help btn";gap:12px 14px;padding:16px 18px;border-bottom:1px solid var(--soft)}
.nt-a-sp{grid-area:sp}.nt-a-sex{grid-area:sex}.nt-a-sz{grid-area:sz}.nt-a-mode{grid-area:mode}.nt-a-date{grid-area:date}.nt-a-op{grid-area:op}.nt-a-help{grid-area:help}.nt-a-btn{grid-area:btn}
.nt-in .v2-f>.v2-label{display:block;margin:0 0 5px}
.nt-in [hidden]{display:none}
.nt-seg{display:flex;flex-wrap:nowrap}
.nt-seg button{flex:1 1 0;min-width:0;height:var(--v2-ctl,42px);padding:0 8px;white-space:nowrap}
.nt-date{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}
.nt-date:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.nt-date[aria-invalid="true"]{border-color:var(--accent)}
.nt-help{margin:0;align-self:center;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.nt-btns{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px}
/* 결과 | 일정 */
.nt-res{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);border-bottom:1px solid var(--soft)}
.nt-head{display:flex;flex-direction:column;gap:10px;padding:16px 18px;min-width:0}
.nt-big{font-size:52px}
.nt-big span{display:inline-flex;align-items:baseline}
.nt-big i{font-style:normal;font-size:24px;font-weight:750;margin-left:2px}
.nt-big small{font-family:var(--sans);font-size:15px;font-weight:700;color:var(--muted)}
.nt-big.is-before small,.nt-big.is-in small{color:var(--accent)}
.nt-sub{margin:0}
.nt-rows li{flex-wrap:wrap}
.nt-rows li span em{display:block;margin-top:2px;font-size:12px}
.nt-rows li b{margin-left:auto;text-align:right;white-space:normal}
.nt-caveat{margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.nt-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.nt-planbox{display:flex;flex-direction:column;gap:8px;padding:16px 18px;min-width:0;border-left:1px solid var(--soft)}
.nt-plan{list-style:none;margin:0;padding:0;position:relative}
.nt-plan:empty{display:none}
.nt-plan li{position:relative;display:flex;align-items:flex-start;gap:10px;padding:7px 0 7px 18px;font-family:var(--sans)}
.nt-plan li::before{content:"";position:absolute;left:4px;top:0;bottom:0;width:2px;background:var(--soft)}
.nt-plan li:first-child::before{top:14px}.nt-plan li:last-child::before{bottom:calc(100% - 14px)}
.nt-plan li>i{position:absolute;left:0;top:10px;width:10px;height:10px;border-radius:50%;background:var(--paper);border:2px solid var(--line);box-sizing:border-box}
.nt-plan li.k-rec>i{background:var(--accent);border-color:var(--accent)}
.nt-plan li.k-heat>i{border-color:var(--accent);background:repeating-linear-gradient(45deg,var(--accent) 0 2px,transparent 2px 4px)}
.nt-plan li.k-law>i{border-color:var(--ink);background:var(--ink);border-radius:1px}
.nt-plan li.k-op>i{border-style:dashed;border-color:var(--ink)}
.nt-plan li.is-today>i{width:12px;height:12px;left:-1px;top:9px;background:var(--ink);border-color:var(--ink)}
.nt-pd{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.nt-pd time{font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.nt-pd span{font-size:12.5px;line-height:1.45;color:var(--muted)}
.nt-plan li>b{flex:0 0 auto;margin-left:auto;padding:1px 7px;border:1px solid var(--soft);border-radius:var(--radius);font-size:12px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;background:var(--paper)}
.nt-plan li.is-today>b{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.nt-plan li.k-rec:not(.is-past)>b{border-color:var(--accent);color:var(--accent)}
.nt-plan li.is-past .nt-pd,.nt-plan li.is-past>b{opacity:.5}
/* 시기 지도 */
.nt-mapbox{display:flex;flex-direction:column;gap:10px;padding:16px 18px 18px}
.nt-map{--nt-lab:168px;position:relative;display:flex;flex-direction:column}
.nt-ax,.nt-lane{display:grid;grid-template-columns:var(--nt-lab) minmax(0,1fr);gap:0 14px;align-items:center}
.nt-ax--top{height:30px}
.nt-ax--bot{height:34px;align-items:start}
.nt-lane{width:100%;margin:0;padding:8px 0;border:0;border-top:1px solid var(--soft);background:none;text-align:left;cursor:pointer;color:var(--ink);font:inherit}
.nt-lane:last-of-type{border-bottom:1px solid var(--soft)}
.nt-lane:hover .nt-lab b{text-decoration:underline;text-underline-offset:3px}
.nt-lane:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.nt-lab{display:flex;flex-direction:column;gap:1px;min-width:0;font-family:var(--sans)}
.nt-lab b{font-size:13px;font-weight:650;color:var(--ink)}
.nt-lab small{font-size:11.5px;color:var(--muted)}
.nt-lane[aria-pressed="true"] .nt-lab b{font-weight:800}
.nt-lane[aria-pressed="true"]{background:color-mix(in srgb,var(--wash) 80%,transparent)}
.nt-rail{position:relative;display:block;height:22px;min-width:0}
.nt-lane .nt-rail::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--soft)}
.nt-band,.nt-heat,.nt-dot,.nt-law,.nt-now,.nt-opl{position:absolute;display:block;transition:left 450ms cubic-bezier(.22,1,.36,1),width 450ms cubic-bezier(.22,1,.36,1)}
.nt-band{top:50%;height:10px;margin-top:-5px;border-radius:5px;background:var(--line);min-width:4px}
.nt-lane[aria-pressed="true"] .nt-band{height:14px;margin-top:-7px;border-radius:7px;background:var(--accent)}
.nt-dot{top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--line);border:2px solid var(--card);box-sizing:content-box}
.nt-lane[aria-pressed="true"] .nt-dot{width:14px;height:14px;margin:-9px 0 0 -9px;background:var(--accent)}
.nt-heat{top:50%;height:20px;margin-top:-10px;border:1px dashed var(--accent);border-radius:3px;background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--accent) 28%,transparent) 0 2px,transparent 2px 6px)}
.nt-law{top:1px;bottom:1px;width:3px;margin-left:-1.5px;background:var(--ink)}
.nt-now{top:-8px;bottom:-8px;width:2px;margin-left:-1px;background:var(--ink)}
.nt-now.is-over{background:repeating-linear-gradient(var(--ink) 0 3px,transparent 3px 6px)}
.nt-opl{top:-8px;bottom:-8px;width:0;margin-left:-1px;border-left:2px dashed var(--ink)}
.nt-band[hidden],.nt-heat[hidden],.nt-dot[hidden],.nt-law[hidden],.nt-opl[hidden],.nt-bub[hidden]{display:none}
.nt-map.is-empty .nt-band,.nt-map.is-empty .nt-dot,.nt-map.is-empty .nt-now,.nt-map.is-empty .nt-heat,.nt-map.is-empty .nt-law{visibility:hidden}
.nt-bub{position:absolute;bottom:4px;transform:translateX(-50%);padding:2px 7px;border-radius:var(--radius);background:var(--fill);color:var(--on-fill);font-family:var(--sans);font-size:11.5px;font-weight:700;white-space:nowrap;transition:left 450ms cubic-bezier(.22,1,.36,1)}
.nt-bub.is-op{background:var(--paper);color:var(--ink);border:1px dashed var(--ink)}
.nt-bub.is-start{transform:none}
.nt-bub.is-end{transform:translateX(calc(-100% + 8px))}
.nt-map.is-near .nt-ax--top,.nt-map.is-near .nt-ax--top .nt-rail{height:54px}
.nt-map.is-near #ntBubToday{bottom:31px}
.nt-ax--top .nt-rail{height:30px}
.nt-ax--bot .nt-rail{height:34px}
#ntTicks>span{position:absolute;top:6px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap}
#ntTicks>span:first-child{transform:none;align-items:flex-start}
#ntTicks>span:last-child{transform:translateX(-100%);align-items:flex-end}
#ntTicks small{font-size:10.5px;font-weight:500;opacity:.85;font-variant-numeric:tabular-nums}
.nt-keys{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;padding:0;list-style:none;font-family:var(--sans);font-size:12px;color:var(--muted)}
.nt-keys li{display:inline-flex;align-items:center;gap:6px}
.nt-keys li[hidden]{display:none}
.nt-keys i{display:inline-block;width:16px;height:8px;border-radius:4px;background:var(--accent)}
.nt-keys .k-now i{width:2px;height:12px;border-radius:0;background:var(--ink)}
.nt-keys .k-op i{width:0;height:12px;border-radius:0;border-left:2px dashed var(--ink);background:none}
.nt-keys .k-heat i{border:1px dashed var(--accent);background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--accent) 28%,transparent) 0 2px,transparent 2px 6px)}
.nt-keys .k-law i{width:3px;height:12px;border-radius:0;background:var(--ink)}
.nt-note{margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.nt-band,.nt-heat,.nt-dot,.nt-law,.nt-now,.nt-opl,.nt-bub{transition:none}}
/* 좁은 작업면 */
@container nt (max-width:720px){
  .nt-in{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"sp sex" "sz sz" "mode mode" "date op" "help help" "btn btn"}
  .nt-btns{justify-content:flex-start}
  .nt-res{order:-1;grid-template-columns:minmax(0,1fr)}
  .nt-planbox{border-left:0;border-top:1px solid var(--soft)}
  .nt-in{border-bottom:1px solid var(--soft)}
}
@container nt (max-width:520px){
  .nt-map{--nt-lab:0px}
  .nt-ax,.nt-lane{grid-template-columns:minmax(0,1fr);gap:4px 0}
  .nt-ax .nt-lab{display:none}
  .nt-lab{flex-direction:row;align-items:baseline;gap:8px}
  .nt-big{font-size:46px}
  #ntTicks>span:nth-child(even){font-size:0}
  #ntTicks>span:nth-child(even) small{display:none}
  #ntTicks>span:nth-child(even)::before{content:"";display:block;width:1px;height:5px;background:var(--line)}
}
@container nt (max-width:400px){
  .nt-in{grid-template-areas:"sp sex" "sz sz" "mode mode" "date date" "op op" "help help" "btn btn"}
}