/* 인생시계 계산기 전용 CSS (2026-10-18). 왼쪽 24시간 하늘 시계판 + 칸 | 오른쪽 결과 문장·조건 · 기준별 시각 | 함께 보기 · 인생 하루 일정표 lk-*. 공용 부품은 assets/v2.css.
   시계판: 0시 아래 → 6시 왼쪽 → 정오 위 → 18시 오른쪽(시계 방향). 하늘 띠는 conic-gradient(0~4시 밤 → 6시 새벽 → 정오 낮 → 18시 노을 → 밤), 아직 오지 않은 시간은 종이색 덮개(lk-fut)로 흐리게.
   움직임은 transitions.dev 기준: 바늘·덮개 900ms, 비교 표식 600ms cubic-bezier(.22,1,.36,1) — 테마 --ease는 120ms 지연을 품고 있어 쓰지 않음. 동작 줄이기면 끔.
   두 열 ↔ 한 열은 툴 폭 컨테이너(640px), 한 열이면 시계판 → 결과·조건 → 칸 → 비교 → 함께 보기 → 일정표. */
.lk-work{container:lk / inline-size;text-spacing-trim:space-all;--lk-night:#3c3448;--lk-dawn:#c98762;--lk-morn:#e8c98a;--lk-noon:#f4e3b0;--lk-dusk:#d9773f;--lk-eve:#7d4b57}
html[data-theme="dark"] .lk-work{--lk-night:#34304f;--lk-dawn:#a8694a;--lk-morn:#b89a62;--lk-noon:#ccb685;--lk-dusk:#c06a35;--lk-eve:#6b3f4c}
@media (prefers-color-scheme: dark){ html:not([data-theme="light"]) .lk-work{--lk-night:#34304f;--lk-dawn:#a8694a;--lk-morn:#b89a62;--lk-noon:#ccb685;--lk-dusk:#c06a35;--lk-eve:#6b3f4c} }
.lk-work [hidden]{display:none !important} /* .lk-sub2·.v2-seg·.v2-f 의 display 가 hidden 을 덮지 않게 */
.lk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr auto auto;grid-template-areas:"dial panel" "tiles panel" "cmp with" "day day"}

/* 시계판 */
.lk-dial{grid-area:dial;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 18px 12px;min-width:0;border-right:1px solid var(--soft)}
.lk-face{position:relative;width:100%;max-width:380px;aspect-ratio:1;container:lkf / inline-size}
.lk-sky{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 180deg,var(--lk-night) 0deg,var(--lk-night) 55deg,var(--lk-dawn) 90deg,var(--lk-morn) 130deg,var(--lk-noon) 180deg,var(--lk-morn) 230deg,var(--lk-dusk) 270deg,var(--lk-eve) 305deg,var(--lk-night) 335deg,var(--lk-night) 360deg);-webkit-mask:radial-gradient(closest-side,transparent calc(75% - .5px),#000 75%,#000 92%,transparent calc(92% + .5px));mask:radial-gradient(closest-side,transparent calc(75% - .5px),#000 75%,#000 92%,transparent calc(92% + .5px))}
.lk-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lk-fut{fill:none;stroke:var(--card);stroke-width:35;opacity:.8;transition:stroke-dashoffset 900ms cubic-bezier(.22,1,.36,1)}
.lk-rim{fill:none;stroke:var(--line);stroke-width:1}
.lk-ticks line{stroke:var(--muted);stroke-width:1.3;stroke-linecap:round}
.lk-nums text{font-family:var(--mono);font-size:15px;font-weight:600;fill:var(--muted);text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}
.lk-over{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-dasharray:0 704}
.lk-disc{fill:var(--paper);stroke:var(--soft);stroke-width:1}
.lk-hand{transform-box:view-box;transform-origin:200px 200px;transition:transform 900ms cubic-bezier(.22,1,.36,1)}
.lk-hand line{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.lk-tip{fill:var(--accent);stroke:var(--paper);stroke-width:3}
.lk-peer circle{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.lk-peer.is-over circle{stroke-dasharray:4 3}
.lk-peer text{font-family:var(--sans);font-size:12px;font-weight:800;fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.lk-mid{position:absolute;inset:27%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;pointer-events:none}
.lk-ph{font-family:var(--sans);font-size:clamp(12px,3.7cqw,14px);font-weight:700;color:var(--muted)}
.lk-time{font-family:var(--mono);font-size:clamp(28px,12cqw,46px);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.lk-ml{font-family:var(--sans);font-size:clamp(10.5px,3.1cqw,12px);line-height:1.35;color:var(--muted);font-variant-numeric:tabular-nums}
.lk-leg{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.lk-leg li{display:inline-flex;align-items:center;gap:5px}
.lk-leg li[hidden]{display:none}
.lk-leg i{display:inline-grid;place-items:center;flex:0 0 auto;font-style:normal}
.lk-leg .k-past{width:22px;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--lk-night),var(--lk-dawn),var(--lk-noon))}
.lk-leg .k-me{width:11px;height:11px;border-radius:50%;background:var(--accent)}
.lk-leg .k-with{width:15px;height:15px;border-radius:50%;border:2px solid var(--ink);font-family:var(--sans);font-size:9px;font-weight:800;color:var(--ink)}

/* 결과 문장 · 조건 */
.lk-panel{grid-area:panel;display:flex;flex-direction:column;min-width:0}
.lk-res{padding:16px 18px;border-bottom:1px solid var(--soft)}
.lk-sub{margin:6px 0 0;font-family:var(--sans);font-size:16px;font-weight:600;line-height:1.6;color:var(--ink);overflow-wrap:anywhere}
.lk-form{display:flex;flex-direction:column;gap:14px;padding:16px 18px 18px;margin:0}
.lk-seg-row,.lk-base,.lk-who{display:flex;flex-direction:column;gap:7px;min-width:0}
.lk-f-age .v2-input{max-width:220px}
.lk-f-birth{max-width:280px}
input.lk-in,select.lk-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 lining-nums}
select.lk-in{padding:0 6px;font-size:14px;text-overflow:ellipsis}
input.lk-in:focus{border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash);outline:0}
input.lk-in[aria-invalid="true"]{border-color:var(--accent)}
.lk-chips button{height:28px;padding:0 9px}
.lk-sub2{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.lk-hint{display:block;line-height:1.55}
.lk-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}

/* 칸 */
.lk-tiles{grid-area:tiles;list-style:none;margin:0;padding:0 18px 18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;align-content:start;min-width:0;border-right:1px solid var(--soft)}
.lk-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)}
.lk-tiles span{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.lk-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}

/* 기준별 시각 */
.lk-cmp{grid-area:cmp;display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;min-width:0;border-top:1px solid var(--soft);border-right:1px solid var(--soft)}
.lk-cmp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.lk-cmp-list button{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n t" "b b";align-items:center;gap:5px 10px;width:100%;padding:6px 8px 8px;border:1px solid transparent;border-radius:var(--radius);background:none;text-align:left;cursor:pointer;font-family:var(--sans);color:var(--ink)}
.lk-cmp-list button:hover{background:var(--btn)}
.lk-cmp-list button[aria-pressed="true"]{border-color:var(--line);background:var(--paper)}
.lk-cn{grid-area:n;font-size:12.5px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.lk-cbar{grid-area:b;position:relative;height:10px;margin:0 6px;border-radius:5px;background:linear-gradient(90deg,var(--lk-night) 0%,var(--lk-night) 15.3%,var(--lk-dawn) 25%,var(--lk-morn) 36.1%,var(--lk-noon) 50%,var(--lk-morn) 63.9%,var(--lk-dusk) 75%,var(--lk-eve) 84.7%,var(--lk-night) 93%)}
.lk-cbar i{position:absolute;top:50%;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);transition:left 600ms cubic-bezier(.22,1,.36,1)}
.lk-cmp-list button[aria-pressed="true"] .lk-cbar i{background:var(--accent);border-color:var(--paper);box-shadow:0 0 0 1px var(--ink)}
.lk-cmp-list button.is-over .lk-cbar i{border-style:dashed}
.lk-cmp-list b{grid-area:t;font-family:var(--mono);font-size:13px;font-weight:700;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}

/* 함께 보기 */
.lk-with{grid-area:with;container:lkw / inline-size;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px 18px 18px;min-width:0;border-top:1px solid var(--soft)}
.lk-with-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;width:100%}
.lk-with-list:empty{display:none}
.lk-wrow{display:grid;grid-template-columns:22px minmax(0,1fr) 86px minmax(56px,auto) 34px;align-items:center;gap:6px}
.lk-wn{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:2px solid var(--ink);font-family:var(--sans);font-size:11px;font-weight:800;color:var(--ink)}
.lk-wrow .v2-input input{text-align:right}
.lk-wrow.is-invalid .v2-input{border-color:var(--accent)}
.lk-wt{font-family:var(--mono);font-size:13px;font-weight:700;text-align:right;white-space:nowrap;color:var(--ink)}
.lk-wdel{width:34px;height:var(--v2-ctl,42px);border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-size:18px;line-height:1;color:var(--muted);cursor:pointer}
.lk-wdel:hover{background:var(--btn);color:var(--ink)}
.lk-with .v2-hint.is-error{color:var(--accent)}
@container lkw (max-width:420px){ /* 함께 보기 칸 폭 기준: 좁으면 시각을 둘째 줄로 */
  .lk-wrow{grid-template-columns:22px minmax(0,1fr) 86px 34px}
  .lk-wt{grid-column:2 / 4;grid-row:2;text-align:left}
  .lk-wdel{grid-column:4;grid-row:1}
}

/* 인생 하루 일정표 */
.lk-day{grid-area:day;padding:16px 18px 18px;min-width:0;border-top:1px solid var(--soft)}
.lk-day-sum{margin:4px 0 12px;font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--muted)}
.lk-day-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;align-items:start}
.lk-tbl{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13px;color:var(--ink)}
.lk-tbl caption{padding:0 0 4px;text-align:left;font-size:11.5px;font-weight:600;color:var(--muted)}
.lk-tbl th,.lk-tbl td{padding:5px 8px;border-bottom:1px solid var(--soft);text-align:left;font-variant-numeric:tabular-nums lining-nums}
.lk-tbl thead th{font-size:11.5px;font-weight:600;color:var(--muted)}
.lk-tbl tbody th{font-family:var(--mono);font-weight:700;white-space:nowrap}
.lk-tbl tbody td:last-child{white-space:nowrap}
.lk-tbl tr.is-past{color:var(--muted)}
.lk-tbl tr.is-now{background:linear-gradient(90deg,var(--accent-wash) calc(var(--f,0) * 100%),transparent calc(var(--f,0) * 100%));box-shadow:inset 3px 0 0 var(--accent)}
.lk-tbl tr.is-now th em{margin-left:6px;font-family:var(--sans);font-size:11px;font-style:normal;font-weight:700;color:var(--accent)}
.lk-tag{display:inline-grid;place-items:center;width:17px;height:17px;margin-left:4px;vertical-align:1px;border-radius:50%;border:1.5px solid var(--ink);font-family:var(--sans);font-size:10px;font-style:normal;font-weight:800}

@container lk (max-width:639px){
  .lk-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"dial" "panel" "tiles" "cmp" "with" "day"}
  .lk-dial,.lk-tiles,.lk-cmp{border-right:0}
  .lk-panel{border-top:1px solid var(--soft)}
  .lk-tiles{padding-top:14px;border-top:1px solid var(--soft)}
  .lk-day-cols{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion: reduce){ .lk-hand,.lk-fut,.lk-cbar i{transition:none} }