/* 환갑·칠순·팔순 계산기 전용 CSS (2026-10-18). 위 입력 줄 → 무대(고른 잔치 카드 | 간지 고리) → 잔치 날짜 카드 격자 → 그해 출생 연도 표. 공용 부품은 assets/v2.css
   움직임(R45): 간지 고리의 채움 선이 태어난 해에서 오늘 자리까지 나선을 따라 그려진다(1.1s, 입력이 바뀔 때만). 동작 줄이기면 끈다 */
.hg-work{container:hg/inline-size;display:flex;flex-direction:column}
.hg-in{padding:14px 18px 16px;border-bottom:1px solid var(--soft);min-width:0}
.hg-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 14px;margin:0}
.hg-form .v2-f{flex:0 1 auto;min-width:0}
.hg-form .v2-f > .v2-label{display:block;white-space:nowrap}
.hg-ctl{display:block;height:var(--v2-ctl,42px);min-width:84px;max-width:100%;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums;box-sizing:border-box}
.hg-mf .hg-ctl{min-width:104px}
.hg-febf .hg-ctl{min-width:150px}
.hg-ctl:focus-visible,.hg-seg button:focus-visible,.hg-list button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hg-seg{display:flex;flex-wrap:nowrap;gap:0}
.hg-seg button{height:var(--v2-ctl,42px);padding:0 14px;font-size:13.5px;white-space:nowrap}
.hg-seg button + button{margin-left:-1px}
.hg-seg button:first-child{border-radius:var(--radius) 0 0 var(--radius)}
.hg-seg button:last-child{border-radius:0 var(--radius) var(--radius) 0}
.hg-sw{height:var(--v2-ctl,42px);white-space:nowrap}
.hg-byf .v2-input{width:124px}
.hg-byf .v2-input input{text-align:left}
.hg-byf.is-invalid .v2-input{border-color:var(--accent)}
.hg-exf .v2-btn{white-space:nowrap}
.hg-exf .v2-btn svg{width:16px;height:16px}

/* 무대: 카드 | 고리 */
.hg-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,350px);gap:16px 26px;align-items:center;padding:20px 22px 18px;min-width:0}
.hg-card{min-width:0;display:flex;flex-direction:column;font-family:var(--sans)}
.hg-lab{display:block}
.hg-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:4px}
.hg-name{font-size:clamp(34px,8cqi,50px);font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--ink)}
.hg-alt{font-size:13.5px;font-weight:600;color:var(--muted);overflow-wrap:anywhere}
.hg-when{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:10px}
.hg-date{font-size:clamp(18px,3.6cqi,22px);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.hg-dd{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap}
.hg-dd b{font-size:clamp(18px,3.6cqi,22px);font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.hg-dd small{font-size:13px;font-weight:600;color:var(--muted)}
.hg-stage.is-past .hg-dd b{color:var(--muted)}
.hg-sent{margin:10px 0 0;font-size:15px;font-weight:600;line-height:1.6;color:var(--ink);word-break:keep-all;overflow-wrap:anywhere}
.hg-stage.is-empty .hg-sent{font-size:14px;font-weight:500;color:var(--accent)}
.hg-stage.is-empty .hg-name{color:var(--muted);opacity:.6}
.hg-rows{margin-top:10px}
.hg-rows li span{flex:0 0 auto;max-width:42%;color:var(--muted)}
.hg-rows li b{white-space:normal;text-align:right;overflow-wrap:anywhere}
.hg-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.hg-foot .v2-btn svg{width:16px;height:16px}

.hg-ringbox{margin:0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.hg-ring{display:block;width:100%;max-width:350px;height:auto;overflow:visible}
.hg-track{fill:none;stroke:color-mix(in srgb,var(--muted) 20%,transparent);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.hg-fill{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;transition:stroke-dashoffset 1.1s cubic-bezier(.25,.7,.2,1)}
.hg-spoke{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3}
.hg-birth{fill:var(--ink)}
.hg-now{fill:var(--accent);stroke:var(--paper);stroke-width:2.5}
.hg-dot{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.hg-dot.is-past{fill:var(--ink)}
.hg-dot.is-next{stroke-width:3}
.hg-dot.is-sel{stroke:var(--ink);stroke-width:3.5}
.hg-dot.is-nodate{stroke:var(--muted);stroke-dasharray:2 2}
.hg-labs text{font-family:var(--sans);paint-order:stroke;stroke:color-mix(in srgb,var(--wash) 70%,var(--paper));stroke-width:3.5px;stroke-linejoin:round}
.hg-mlab{font-size:12px;font-weight:700;fill:var(--ink)}
.hg-mlab.is-past{fill:var(--muted);font-weight:600}
.hg-mlab.is-sel{font-size:13px;font-weight:800;fill:var(--ink)}
.hg-nowlab{font-size:11px;font-weight:800;fill:var(--accent)}
.hg-blab,.hg-splab{font-size:10.5px;font-weight:600;fill:var(--muted)}
/* 십 년 격자(en·es·id) */
.hg-cell{fill:color-mix(in srgb,var(--muted) 10%,var(--paper))}
.hg-lived{fill:color-mix(in srgb,var(--accent) 34%,var(--paper));transition:opacity .45s ease-out}
.hg-gnow{stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}
.hg-mcell{fill:none;stroke:var(--ink);stroke-width:1.5}
.hg-mcell.is-past{stroke:var(--muted)}
.hg-mcell.is-nodate{stroke:var(--muted);stroke-dasharray:3 2}
.hg-mcell.is-sel{stroke:var(--ink);stroke-width:3}
.hg-gnum,.hg-gcol,.hg-grow{stroke:none}
.hg-gnum{font-size:11.5px;font-weight:800;fill:var(--ink)}
.hg-gnum.is-sel{font-size:12.5px}
.hg-gcol{font-size:10px;font-weight:600;fill:var(--muted)}
.hg-grow{font-size:11px;font-weight:600;fill:var(--muted);font-variant-numeric:tabular-nums}
.hg-grow.is-now{font-weight:800;fill:var(--ink)}

/* 잔치 날짜 카드 격자 */
.hg-listbox{padding:16px 22px 14px;border-top:1px solid var(--soft);min-width:0}
.hg-lhead,.hg-ythead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;margin-bottom:10px}
.hg-lsum{font-family:var(--sans);font-size:12.5px;color:var(--muted)}
.hg-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,196px),1fr));gap:8px}
.hg-list li{min-width:0}
.hg-list button{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n s" "d d" "a a";gap:3px 8px;width:100%;height:100%;padding:10px 12px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);text-align:left;cursor:pointer;transition:border-color .15s ease-out,background .15s ease-out}
.hg-list button:hover{border-color:var(--line)}
.hg-list .is-sel button{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.hg-ln{grid-area:n;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;min-width:0}
.hg-ln b{font-size:15.5px;font-weight:800}
.hg-ln small,.hg-ld small{font-size:11.5px;color:var(--muted);overflow-wrap:anywhere}
.hg-ls{grid-area:s;font-size:12.5px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.hg-ld{grid-area:d;display:flex;flex-direction:column;min-width:0}
.hg-ld b{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
.hg-la{grid-area:a;font-size:12px;color:var(--muted)}
.hg-list .is-past button{background:transparent}
.hg-list .is-past .hg-ln b,.hg-list .is-past .hg-ld b{color:var(--muted)}
.hg-list .is-past .hg-ls{color:var(--muted);font-weight:600}
.hg-list .is-nodate button{border-style:dashed;background:transparent}
.hg-list .is-nodate .hg-ld b,.hg-list .is-nodate .hg-ls{color:var(--muted);font-weight:600}
.hg-note{margin:10px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted);word-break:keep-all;overflow-wrap:anywhere}

/* 그해 출생 연도 표 */
.hg-ytbox{padding:16px 22px 18px;border-top:1px solid var(--soft);min-width:0}
.hg-ytsel{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--muted)}
.hg-ytsel .hg-ctl{min-width:140px}
.hg-ytwrap{overflow-x:auto}
.hg-yt{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13.5px}
.hg-yt th,.hg-yt td{padding:8px 10px;border-top:1px solid var(--soft);text-align:left;vertical-align:top}
.hg-yt thead th{border-top:0;font-size:12px;font-weight:600;color:var(--muted)}
.hg-yt tbody th{font-weight:800;white-space:nowrap}
.hg-yt tbody th small{display:block;font-size:11.5px;font-weight:500;color:var(--muted)}
.hg-yt td b{display:block;font-weight:700;font-variant-numeric:tabular-nums}
.hg-yt td small{display:block;font-size:12px;color:var(--muted)}
.hg-yt td.is-you{background:color-mix(in srgb,var(--wash) 80%,var(--paper))}
.hg-yt td.is-you b{text-decoration:underline;text-underline-offset:3px}

@container hg (max-width:640px){
  .hg-stage{grid-template-columns:minmax(0,1fr);padding:18px 16px 16px}
  .hg-ringbox{order:0}
  .hg-in,.hg-listbox,.hg-ytbox{padding-left:16px;padding-right:16px}
  .hg-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .hg-list button{padding:9px 10px;grid-template-areas:"n n" "d d" "a s"}
  .hg-ld b{font-size:13px}
}
@container hg (max-width:300px){.hg-list{grid-template-columns:minmax(0,1fr)}}
@container hg (max-width:420px){
  .hg-yt th,.hg-yt td{padding:7px 6px}
  .hg-yt tbody th{white-space:normal}
}
@media (prefers-reduced-motion:reduce){.hg-fill,.hg-lived,.hg-list button{transition:none}}