/* 살아온 날짜 계산기 전용 CSS (2026-10-17). 위 입력 막대 · 살아온 날(큰 수·초 시계·칸 4) | 다음 기념일(카드·진행 막대·목록) · 주 단위 인생 지도 · 행 lv-*. 공용 부품은 assets/v2.css.
   움직임은 transitions.dev 기준: 지도 채움 900ms·막대 600ms cubic-bezier(.22,1,.36,1) — 테마 --ease는 120ms 지연을 품고 있어 쓰지 않음. 동작 줄이기면 끔.
   두 열 ↔ 한 열은 툴 폭 컨테이너(640px), 한 열이면 살아온 날이 입력 위. 지도 칸: 지난 주 --fill, 미래 --soft, 이번 주·기념일 강조색. */
.lv-work{container:lv / inline-size;text-spacing-trim:space-all}
.lv-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);grid-template-areas:"bar bar" "clock ms" "life life" "more more"}

/* 입력 막대 */
.lv-bar{grid-area:bar;display:flex;flex-direction:column;gap:10px;padding:16px 18px 12px;border-bottom:1px solid var(--soft);min-width:0}
.lv-fields{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(140px,.8fr) minmax(0,1.4fr);gap:10px;margin:0} /* 시각 칸은 140px 아래면 '오전 07:30'이 잘림 */
input.lv-in{display:block;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);font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;outline:0;transition:border-color var(--ease),box-shadow var(--ease)}
input.lv-in:focus{border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
input.lv-in[aria-invalid="true"]{border-color:var(--accent)}
.lv-ref{display:flex;gap:6px;min-width:0}
.lv-ref input{flex:1 1 auto}
.lv-ref .v2-btn{flex:0 0 auto}
.lv-opts{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px}
.lv-acts{display:flex;flex-wrap:wrap;gap:6px}

/* 살아온 날 */
.lv-clock{grid-area:clock;display:flex;flex-direction:column;gap:10px;padding:18px;min-width:0;border-right:1px solid var(--soft)}
.lv-clock .v2-big{flex-wrap:wrap}
.lv-clock .v2-sub{margin:0}
.lv-sec{padding:10px 12px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.lv-sec-n{margin:4px 0 3px;font-family:var(--mono);font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere}
.lv-sec-note{display:block;font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--muted)}
.lv-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.lv-tiles li{display:flex;flex-direction:column;gap:2px;min-width:0;padding:8px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.lv-tiles span{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.lv-tiles b{font-family:var(--sans);font-size:15px;font-weight:750;font-variant-numeric:tabular-nums lining-nums;color:var(--ink);overflow-wrap:anywhere}

/* 다음 기념일 */
.lv-ms{grid-area:ms;display:flex;flex-direction:column;gap:10px;padding:18px;min-width:0}
.lv-next{padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.lv-next-name::first-letter{text-transform:uppercase}
.lv-next-name{margin:0;font-family:var(--serif);font-size:26px;font-weight:900;letter-spacing:-.02em;line-height:1.15;color:var(--ink);overflow-wrap:anywhere}
.lv-next-date{margin:5px 0 0;font-family:var(--sans);font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}
.lv-next-rel{margin:2px 0 10px;font-family:var(--sans);font-size:14px;font-weight:750;color:var(--accent);font-variant-numeric:tabular-nums}
.lv-prog{height:8px;border-radius:4px;background:var(--soft);overflow:hidden}
.lv-prog i{display:block;width:0;height:100%;border-radius:4px;background:var(--accent);transition:width 600ms cubic-bezier(.22,1,.36,1)}
.lv-prog-txt{margin:6px 0 0;font-family:var(--sans);font-size:12px;color:var(--muted)}
.lv-next.is-empty .lv-prog,.lv-next.is-empty .lv-prog-txt,.lv-next.is-empty .lv-next-rel{display:none}
.lv-next.is-empty .lv-next-name{font-size:18px;color:var(--muted)}
.lv-mslist{list-style:none;margin:0;padding:0}
.lv-mslist li{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"k name" "k when";column-gap:8px;row-gap:1px;align-items:baseline;padding:7px 0;border-top:1px solid var(--soft)}
.lv-k{grid-area:k;align-self:start;min-width:34px;margin-top:1px;padding:1px 5px;border:1px solid var(--soft);border-radius:var(--radius);text-align:center;font-family:var(--sans);font-size:10.5px;font-weight:650;color:var(--muted);white-space:nowrap}
.lv-mslist b{grid-area:name;font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.lv-when{grid-area:when;font-family:var(--sans);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.lv-mslist em{font-style:normal;font-weight:700;color:var(--ink);white-space:nowrap}
.lv-mslist em::before{content:"·";margin:0 6px;font-weight:400;color:var(--muted)}
.lv-mslist li.is-past b,.lv-mslist li.is-past em{color:var(--muted);font-weight:600}
.lv-mslist li.is-next b,.lv-mslist li.is-next em{color:var(--accent)}
.lv-ms-hint{margin:0;font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--muted)}
.lv-ms-hint:empty{display:none}

/* 주 단위 인생 지도 */
.lv-life{grid-area:life;padding:16px 18px;border-top:1px solid var(--soft);min-width:0}
.lv-life-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px}
.lv-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 12px;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.lv-legend i{display:inline-block;width:9px;height:9px;margin-right:5px;border-radius:2px;vertical-align:-1px}
.lv-legend .k-past{background:var(--fill)}
.lv-legend .k-now{background:var(--accent)}
.lv-legend .k-big{border:1.5px solid var(--accent);border-radius:50%}
.lv-life-sum{margin:6px 0 10px;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.lv-life-sum:empty{display:none}
.lv-map{position:relative;padding:16px 0 0 22px;outline:0}
.lv-map:focus-visible .lv-svgs{outline:2px solid var(--accent);outline-offset:3px}
.lv-yrs{position:absolute;top:0;left:22px;right:0;height:14px}
.lv-yrs span{position:absolute;transform:translateX(-50%);font-family:var(--mono);font-size:10px;line-height:14px;color:var(--muted)}
.lv-yrs span:first-child{transform:none}
.lv-yrs span:last-child{transform:translateX(-100%)}
.lv-wks{position:absolute;top:16px;bottom:0;left:0;width:18px}
.lv-wks span{position:absolute;right:3px;transform:translateY(-50%);font-family:var(--mono);font-size:9.5px;color:var(--muted)}
.lv-wks span:first-child{transform:none}
.lv-wks span:last-child{transform:translateY(-100%)}
.lv-svgs{position:relative;width:100%;cursor:crosshair;touch-action:manipulation}
.lv-svg{position:absolute;inset:0;display:block;width:100%;height:100%}
#lvPe rect{fill:var(--soft)}
#lvPf rect{fill:color-mix(in srgb,var(--fill) 84%,var(--paper))}
.lv-lived{position:absolute;inset:0;clip-path:inset(0 var(--lv-clip,0%) 0 0);transition:clip-path 900ms cubic-bezier(.22,1,.36,1)}
.lv-lived.is-sweep{clip-path:inset(0 100% 0 0);transition:none}
.lv-now{fill:var(--accent)}
.lv-mk{fill:var(--paper);stroke:var(--accent);stroke-width:1.5;vector-effect:non-scaling-stroke}
.lv-mk.is-next{fill:var(--accent)}
.lv-cur{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke}
.lv-map.is-empty .lv-svgs{opacity:.75}
.lv-tip{min-height:1.55em;margin:8px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink);font-variant-numeric:tabular-nums}
.lv-keys{display:block;margin-top:2px;font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--muted)}

/* 행 */
.lv-more{grid-area:more;padding:4px 18px 16px;border-top:1px solid var(--soft);min-width:0}
/* 값이 이름 옆에 다 들어가지 않으면 값 전체를 다음 줄 오른쪽으로(숫자·단위가 갈라지지 않게) */
.lv-rows li{flex-wrap:wrap;row-gap:2px}
.lv-rows li b{margin-left:auto;max-width:100%;white-space:normal;text-align:right}
.lv-rows li b a{margin-left:6px;font-size:12px;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.lv-rows li b a:hover{color:var(--ink)}
.lv-foot{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding-top:10px}

@container lv (max-width:639px){
  .lv-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"clock" "bar" "ms" "life" "more"}
  .lv-clock{border-right:0;border-bottom:1px solid var(--soft)}
}
@container lv (max-width:619px){
  .lv-fields{grid-template-columns:minmax(0,1fr) minmax(140px,1fr)}
  .lv-f-ref{grid-column:1 / -1}
}
@container lv (max-width:519px){
  .lv-clock,.lv-ms{padding:16px}
  .lv-sec-n{font-size:22px}
  .lv-life{padding:14px 16px}
  .lv-more{padding:4px 16px 14px}
}
@container v2in (max-width:330px){
  .lv-fields{grid-template-columns:minmax(0,1fr)}
  .lv-f-ref{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
  .lv-lived,.lv-prog i{transition:none}
}