/* 인생 시즌 계산기 전용 CSS (2026-10-18). 입력 막대 · 계절 바퀴(한 바퀴 = 인생) | 지금 계절 · 계절 지도(나누는 방식·비례 띠·카드 4장) · 행 sz-*.
   공용 부품은 assets/v2.css. 계절 색은 툴 안에서만 쓰는 네 가지(봄·여름·가을·겨울, 밝은/어두운 테마 따로), 강조색은 띠의 '지금' 선 한 곳.
   움직임은 transitions.dev 기준 smooth-out(cubic-bezier(.22,1,.36,1)): 첫 화면에서 바퀴 채움·표식이 0에서 지금까지, 띠가 왼쪽부터 채워짐(600ms), 값이 바뀌면 같은 시간으로 옮겨 감. 동작 줄이기면 끔.
   한 열 ↔ 두 열은 툴 폭 컨테이너: 640px 미만은 바퀴가 입력 위, 560px 미만은 바퀴와 문장을 위아래로. */
.sz-work{container:sz / inline-size;--sz-dur:600ms;--sz-ease:cubic-bezier(.22,1,.36,1);--k0:#5f8f35;--k1:#2b8a7e;--k2:#b8740c;--k3:#5b7393;--sz-on:var(--ink);text-spacing-trim:space-all}
:root[data-theme="dark"] .sz-work{--k0:#9bc96a;--k1:#5cc2b4;--k2:#e2a43c;--k3:#a3b8d4;--sz-on:var(--paper)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .sz-work{--k0:#9bc96a;--k1:#5cc2b4;--k2:#e2a43c;--k3:#a3b8d4;--sz-on:var(--paper)} }
.sz-k0{--k:var(--k0)} .sz-k1{--k:var(--k1)} .sz-k2{--k:var(--k2)} .sz-k3{--k:var(--k3)}
.sz-work [hidden]{display:none!important}
.sz-grid{display:flex;flex-direction:column}

/* 입력 막대 */
.sz-bar{display:flex;flex-direction:column;gap:10px;padding:16px 18px 12px;border-bottom:1px solid var(--soft);min-width:0}
.sz-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:10px;margin:0}
.sz-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;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}
.sz-in:focus{border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.sz-in[aria-invalid="true"]{border-color:var(--accent)}
.sz-f-life .v2-input input{text-align:right}
.sz-opts{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px}
.sz-acts{display:flex;flex-wrap:wrap;gap:6px}
.sz-basis{margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.sz-basis:empty{display:none}

/* 계절 바퀴 | 지금 계절 */
.sz-hero{display:grid;grid-template-columns:minmax(200px,290px) minmax(0,1fr);gap:18px 22px;align-items:center;padding:18px;border-bottom:1px solid var(--soft);min-width:0}
.sz-wheel{position:relative;width:100%;aspect-ratio:1/1;max-width:290px;justify-self:center}
.sz-wheel svg{display:block;width:100%;height:100%;overflow:visible}
.sz-a{fill:none;stroke-width:24}
.sz-ring-bg .sz-a{stroke:color-mix(in srgb, var(--k) 20%, var(--paper))}
.sz-ring-on .sz-a{stroke:var(--k)}
#szMaskC{transition:stroke-dashoffset var(--sz-dur) var(--sz-ease)}
.sz-tk{stroke:var(--line);stroke-width:1}
.sz-tk.is-big{stroke:var(--muted);stroke-width:1.6}
.sz-wl{font-family:var(--sans);font-size:14px;font-weight:700;fill:var(--muted)}
.sz-wl.is-now{fill:var(--ink)}
.sz-mk{transform-box:view-box;transform-origin:150px 150px;transition:transform var(--sz-dur) var(--sz-ease),opacity .2s}
.sz-mk circle{fill:var(--card);stroke:var(--ink);stroke-width:3}
.sz-mk.is-off{opacity:0}
.sz-core{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;pointer-events:none;text-align:center}
.sz-core b{max-width:60%;font-family:var(--sans);font-size:28px;font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--ink);overflow-wrap:anywhere}
.sz-core span{font-family:var(--sans);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)}
.sz-say{display:flex;flex-direction:column;gap:8px;min-width:0}
.sz-say .v2-big{flex-wrap:wrap}
.sz-say .v2-sub{margin:0}
.sz-term{margin:0;font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink)}
.sz-tiles{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sz-tiles li{flex:1 1 122px;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)}
.sz-tiles span{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.sz-tiles b{font-family:var(--sans);font-size:15.5px;font-weight:800;line-height:1.25;font-variant-numeric:tabular-nums lining-nums;color:var(--ink)}
.sz-tiles small{font-family:var(--sans);font-size:11.5px;line-height:1.4;color:var(--muted)}
.sz-tiles small:empty{display:none}

/* 계절 지도 */
.sz-map{display:flex;flex-direction:column;gap:10px;padding:16px 18px;border-bottom:1px solid var(--soft);min-width:0}
.sz-map-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px}
.sz-mode-note{margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.sz-strip{padding-top:22px}
.sz-st-bar{position:relative;height:34px}
.sz-st-base,.sz-st-fill{position:absolute;inset:0}
.sz-st-fill{transition:clip-path var(--sz-dur) var(--sz-ease)}
.sz-sg{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:flex-start;padding-left:7px;box-sizing:border-box;overflow:hidden;border-radius:var(--radius);transition:left var(--sz-dur) var(--sz-ease),width var(--sz-dur) var(--sz-ease)}
.sz-sg span{font-family:var(--sans);font-size:12px;font-style:normal;font-weight:700;white-space:nowrap}
.sz-sg.no-lab span{visibility:hidden}
.sz-st-base .sz-sg{background:color-mix(in srgb, var(--k) 20%, var(--paper));color:var(--ink)}
.sz-st-fill .sz-sg{background:color-mix(in srgb, var(--k) 72%, var(--paper));color:var(--sz-on)}
.sz-tr{position:absolute;top:-4px;bottom:-4px;border-left:1px dashed var(--muted);border-right:1px dashed var(--muted);background:repeating-linear-gradient(135deg,color-mix(in srgb, var(--ink) 30%, transparent) 0 1.5px,transparent 1.5px 6px);pointer-events:none;transition:left var(--sz-dur) var(--sz-ease),width var(--sz-dur) var(--sz-ease)}
.sz-tr.is-now{border-color:var(--ink);background:repeating-linear-gradient(135deg,color-mix(in srgb, var(--ink) 55%, transparent) 0 1.5px,transparent 1.5px 6px)}
.sz-st-now{position:absolute;top:-7px;bottom:-7px;width:2px;margin-left:-1px;background:var(--accent);transition:left var(--sz-dur) var(--sz-ease)}
.sz-st-now em{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:3px;font-family:var(--sans);font-size:11.5px;font-style:normal;font-weight:700;white-space:nowrap;color:var(--ink);font-variant-numeric:tabular-nums}
.sz-st-now.at-l em{left:0;transform:none}
.sz-st-now.at-r em{left:auto;right:0;transform:none}
.sz-st-axis{position:relative;height:16px;margin-top:6px}
.sz-st-axis span{position:absolute;top:0;transform:translateX(-50%);font-family:var(--sans);font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted)}
.sz-st-axis span:first-child{transform:none}
.sz-st-axis span.is-end{transform:translateX(-100%)}
.sz-cards{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sz-card{display:flex;flex-direction:column;gap:3px;min-width:0;padding:9px 11px 10px;border:1px solid var(--soft);border-top:3px solid var(--k);border-radius:var(--radius);background:var(--paper)}
.sz-card.is-now{border-color:var(--line);border-top-color:var(--k);background:color-mix(in srgb, var(--k) 9%, var(--paper))}
.sz-card b{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;font-family:var(--sans);font-size:14px;font-weight:800;color:var(--ink)}
.sz-card b i{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--k)}
.sz-card b em{flex:1 0 100%;font-style:normal;font-size:11.5px;font-weight:700;color:var(--muted)}
.sz-card.is-now b em{color:var(--ink)}
.sz-card-age{font-family:var(--sans);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums lining-nums;color:var(--ink)}
.sz-card-date{font-family:var(--sans);font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}
.sz-card small{font-family:var(--sans);font-size:12px;line-height:1.45;color:var(--muted)}

/* 행·복사 */
.sz-more{display:flex;flex-direction:column;gap:12px;padding:12px 18px 16px;min-width:0}
.sz-rows li b{white-space:normal;text-align:right}
.sz-nw{white-space:nowrap}
.sz-foot{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}

/* 첫 화면 0 → 지금(그리기 직전 한 번), 동작 줄이기 */
.sz-wheel.is-still #szMaskC,.sz-wheel.is-still .sz-mk,.sz-strip.is-still .sz-st-fill,.sz-strip.is-still .sz-sg,.sz-strip.is-still .sz-st-now,.sz-strip.is-still .sz-tr{transition:none}
@media (prefers-reduced-motion:reduce){ #szMaskC,.sz-mk,.sz-st-fill,.sz-sg,.sz-st-now,.sz-tr{transition:none} }

@container sz (max-width:639px){
  .sz-hero{order:-1}
  .sz-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container sz (max-width:559px){
  .sz-hero{grid-template-columns:minmax(0,1fr);padding:16px}
  .sz-wheel{max-width:250px}
  .sz-core b{font-size:24px}
  .sz-bar,.sz-map,.sz-more{padding-left:16px;padding-right:16px}
}