/* 앵무새 나이 계산기 전용 CSS (2026-10-23). '나이 다이얼': [다이얼 열(270° 눈금판: 바깥 사람 나이·안쪽 종 나이, 가운데 사람 나이 큰 수) | 카드(종 단추 8·나이·행·기준값)]. 공용 부품은 assets/v2.css */
.pra-work{container:praw / inline-size}
.pra-grid{display:grid;grid-template-columns:minmax(0,1fr)}
/* 다이얼 열 */
.pra-side{display:flex;flex-direction:column;min-width:0;padding:14px 16px;border-bottom:1px solid var(--soft)}
.pra-dial{container:prad / inline-size;position:relative;width:100%;max-width:340px;margin:0 auto;aspect-ratio:1;border-radius:50%;outline:none}
.pra-dial:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.pra-svg{display:block;width:100%;height:100%;overflow:visible;font-family:var(--sans)}
.pra-seg{fill:none;stroke-width:14;transition:stroke-width 200ms ease}
.pra-seg.is-cur{stroke-width:20}
.pra-seg.st-young{stroke:color-mix(in srgb, var(--fill) 24%, var(--paper))}
.pra-seg.st-prime{stroke:color-mix(in srgb, var(--fill) 40%, var(--paper))}
.pra-seg.st-middle{stroke:color-mix(in srgb, var(--fill) 57%, var(--paper))}
.pra-seg.st-senior{stroke:color-mix(in srgb, var(--fill) 74%, var(--paper))}
.pra-seg.st-oldest{stroke:color-mix(in srgb, var(--fill) 90%, var(--paper))}
.pra-prog{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:1000 1000}
.pra-ot{stroke:var(--muted);stroke-width:1}
.pra-ol{font-family:var(--mono);font-size:11px;fill:var(--muted);dominant-baseline:middle}
.pra-it{stroke:var(--muted);stroke-width:1;opacity:.7}
.pra-it.is-key{stroke:var(--ink);stroke-width:2;opacity:1}
.pra-il{font-size:10.5px;font-weight:600;fill:var(--muted);text-anchor:middle;dominant-baseline:middle}
.pra-il.is-key{font-size:11px;font-weight:800;fill:var(--ink)}
.pra-hand{transform-box:view-box;transform-origin:160px 160px}
.pra-hand line{stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}
.pra-knob{fill:var(--paper);stroke:var(--accent);stroke-width:3.5}
.pra-hit{fill:transparent;touch-action:none;cursor:grab}
.pra-dial.is-drag .pra-hit{cursor:grabbing}
.pra-dial.is-empty .pra-hand,.pra-dial.is-empty .pra-prog{visibility:hidden}
.pra-dial.is-live .pra-hand{transition:transform 460ms cubic-bezier(.2,.7,.2,1)}
.pra-dial.is-live .pra-prog{transition:stroke-dashoffset 460ms cubic-bezier(.2,.7,.2,1)}
.pra-dial.is-drag .pra-hand,.pra-dial.is-drag .pra-prog{transition:none}
.pra-mid{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;width:46%;text-align:center;pointer-events:none}
.pra-ml{font-family:var(--sans);font-size:11.5px;font-weight:600;line-height:1.3;color:var(--muted)}
.pra-big{display:flex;flex-direction:column;align-items:center;max-width:100%;margin:2px 0 5px;font-family:var(--sans);color:var(--ink)} /* 글자 상자를 내용 폭으로(안쪽 눈금 글자와 겹침 방지) */
.pra-big > span{display:block;font-size:clamp(34px,15cqi,52px);font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums}
.pra-big > span i{font-style:normal;font-size:.42em;font-weight:700;margin-left:3px;letter-spacing:0;color:var(--muted)}
.pra-big > span.is-empty{font-size:13px;font-weight:600;line-height:1.45;letter-spacing:0;color:var(--muted)}
.pra-big small{display:block;margin-top:4px;font-size:10.5px;font-weight:600;line-height:1.25;color:var(--muted)}
.pra-st{padding:2px 10px;border-radius:999px;font-family:var(--sans);font-size:12px;font-weight:750;line-height:1.5;color:var(--ink);white-space:nowrap} /* 두 줄로 접히면 아래 기록 눈금 글자와 겹침 */
.pra-st:empty{display:none}
.pra-st.st-young{background:color-mix(in srgb, var(--fill) 24%, var(--paper))}
.pra-st.st-prime{background:color-mix(in srgb, var(--fill) 40%, var(--paper))}
.pra-st.st-middle{background:color-mix(in srgb, var(--fill) 57%, var(--paper))}
.pra-st.st-senior{background:color-mix(in srgb, var(--fill) 74%, var(--paper))}
.pra-st.st-oldest{background:color-mix(in srgb, var(--fill) 90%, var(--paper))}
.pra-tag{position:absolute;left:50%;bottom:1%;transform:translateX(-50%);display:flex;align-items:flex-end;gap:6px;width:max-content;max-width:58%;color:var(--accent);pointer-events:none}
.pra-tag .pra-g{flex:none}
.pra-tag span{display:flex;flex-direction:column;min-width:0;font-family:var(--sans);font-size:11.5px;font-weight:600;line-height:1.3;color:var(--muted)}
.pra-tag b{font-size:12.5px;font-weight:800;line-height:1.2;color:var(--ink)} /* 긴 이름(Blue-fronted Amazon 등)은 두 줄로 */
.pra-sentence{margin:10px 0 0}
.pra-sentence.is-top{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--soft)}
.pra-sentence:empty{display:none}
.pra-legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin:10px 0 0;padding:0;list-style:none;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.pra-legend li{display:inline-flex;align-items:center;gap:5px}
.pra-legend i{display:inline-block;width:10px;height:10px;border-radius:2px}
.pra-legend .lg-young i{background:color-mix(in srgb, var(--fill) 24%, var(--paper))}
.pra-legend .lg-prime i{background:color-mix(in srgb, var(--fill) 40%, var(--paper))}
.pra-legend .lg-middle i{background:color-mix(in srgb, var(--fill) 57%, var(--paper))}
.pra-legend .lg-senior i{background:color-mix(in srgb, var(--fill) 74%, var(--paper))}
.pra-legend .lg-oldest i{background:color-mix(in srgb, var(--fill) 90%, var(--paper))}
.pra-legend .lg-key i{width:2px;height:11px;border-radius:0;background:var(--ink)}
.pra-hint{margin:6px 0 0;font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--muted)}
.pra-slot{margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--soft)}
.pra-slot:empty{display:none}
.pra-slot .pra-facts{margin-top:0}
.pra-slot .pra-caveat{margin-top:10px}
.pra-slot .pra-facts + .pra-caveat{padding-top:10px;border-top:1px solid var(--soft)}
/* 다이얼 열로 옮긴 기준값은 2 × 2 수치 타일(값 먼저, 이름·출처 아래) — 두 열 높이 차를 줄인다 */
.pra-slot .pra-facts .pra-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
.pra-slot .pra-facts .pra-rows li{flex-direction:column-reverse;justify-content:flex-end;align-items:flex-start;gap:3px;padding:9px 0}
.pra-slot .pra-facts .pra-rows li b{max-width:100%;font-size:17px;line-height:1.2;text-align:left}
.pra-g{display:block;fill:currentColor}
.pra-g .e{fill:var(--paper)}
/* 카드 */
.pra-card{container:prac / inline-size;display:flex;flex-direction:column;min-width:0;padding:16px 18px 14px}
.pra-card > .v2-label{display:block;margin-bottom:8px}
.pra-sps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.pra-sp{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:8px;min-height:48px;margin:0;padding:6px 10px 6px 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.pra-sp:hover{border-color:color-mix(in srgb, var(--ink) 32%, var(--line))}
.pra-sp.is-sel{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, var(--paper));box-shadow:inset 0 0 0 1px var(--accent)}
.pra-sp:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pra-sg{display:grid;place-items:end center;height:30px;color:var(--muted)}
.pra-sp.is-sel .pra-sg{color:var(--accent)}
.pra-sn{display:flex;flex-direction:column;min-width:0}
.pra-sn b{font-family:var(--sans);font-size:12.5px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.pra-sn small{margin-top:1px;font-family:var(--sans);font-size:12px;font-weight:600;line-height:1.25;color:var(--muted);font-variant-numeric:tabular-nums lining-nums}
.pra-sn small.is-over{font-size:11px}
.pra-sp.is-sel .pra-sn small{color:var(--ink);font-weight:800}
.pra-cap{margin:8px 0 0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.pra-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--soft)}
.pra-rows{margin-top:14px;min-width:0}
.pra-rows li span{min-width:0;flex:1 1 auto}
.pra-rows li span em{display:block;margin-top:2px;font-style:normal;font-size:11.5px;line-height:1.45;color:var(--muted)}
.pra-rows li b{flex:0 1 auto;max-width:56%;white-space:normal;word-break:keep-all;text-align:right}
.pra-facts{margin-top:14px;min-width:0}
.pra-facts > .v2-label{display:block;margin-bottom:2px}
.pra-facts .pra-rows{margin-top:0}
.pra-caveat{margin:12px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.pra-foot{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:14px}
.pra-card > .v2-status{min-height:18px;margin:8px 0 0;line-height:1.5}
.pra-grid.is-measure{align-items:start}
.pra-grid.is-measure .pra-foot{margin-top:0}
.pra-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@container prac (min-width:520px){
  .pra-sps{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@container praw (min-width:640px){
  .pra-grid{grid-template-columns:minmax(300px,45%) minmax(0,1fr)}
  .pra-side{border-bottom:0;border-right:1px solid var(--soft)}
}
@media (prefers-reduced-motion:reduce){
  .pra-dial.is-live .pra-hand,.pra-dial.is-live .pra-prog,.pra-seg{transition:none}
}