/* 토끼 나이 계산기 전용 CSS (2026-10-23). '나이별 돌봄 지도': 답 띠 → 입력 두 줄(체구 · 입력 방식 / 이름 · 칸 · 예시) → 지도(이름 | 첫 1년 40% 확대 축의 띠 | 지금 상태). 공용 부품은 assets/v2.css */
.rba-work{container:rba / inline-size;display:flex;flex-direction:column}
.rba-work [hidden]{display:none !important}
/* 답 띠 */
.rba-ans{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 24px;padding:16px 18px 18px}
.rba-main{min-width:0;display:flex;flex-direction:column}
.rba-main > .v2-label{display:block;margin-bottom:6px}
.rba-main .v2-big{flex-wrap:wrap;row-gap:6px}
.rba-main .v2-big small{flex-basis:100%;display:block;margin:0;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted)}
.rba-main .v2-big.is-empty span{font-size:18px;font-weight:600;color:var(--muted)}
.rba-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:14px}
.rba-foot .v2-status{margin-left:auto}
.rba-side{min-width:0;display:flex;flex-direction:column}
.rba-rows{margin-top:10px;min-width:0}
.rba-rows li span{min-width:0;flex:1 1 auto}
.rba-rows li span em{display:block;margin-top:2px;font-style:normal;font-size:11.5px;color:var(--muted)}
.rba-rows li b{flex:0 1 auto;max-width:56%;white-space:normal;text-align:right}
.rba-basis{margin:auto 0 0;padding-top:10px;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
/* 입력: 체구 · 입력 방식 / 체구 안내 · 예시·지우기 / 이름 · 칸(전체 폭, 늘어나는 칸이 남는 폭을 채움) */
.rba-in{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px 14px;padding:14px 18px;border-top:1px solid var(--soft);border-bottom:1px solid var(--soft)}
.rba-in .v2-f > .v2-label{display:block;margin:0 0 5px}
.rba-szf{grid-column:1;grid-row:1}
.rba-mdf{grid-column:2;grid-row:1}
.rba-hint{grid-column:1;grid-row:2;align-self:center;margin:0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.rba-acts{grid-column:2;grid-row:2}
.rba-fields{grid-column:1 / -1;grid-row:3}
.rba-seg{display:flex;flex-wrap:nowrap}
.rba-seg button{flex:1 1 auto;min-width:0;height:var(--v2-ctl,42px);padding:0 10px;font-family:var(--sans);font-size:13px;font-weight:700;white-space:nowrap}
.rba-size{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.rba-size button{display:flex;align-items:center;justify-content:center;gap:6px;padding:0 6px;line-height:1.15;white-space:normal;text-align:center}
.rba-size button span{overflow-wrap:normal}
.rba-size button.no-gl .rba-gl{display:none} /* 글자가 칸에 안 들어가면 토끼 그림만 숨김(tool.js fitSize, 낱말 가운데 줄바꿈 금지) */
.rba-size .rba-gl{flex:none;height:auto;fill:currentColor}
.rba-size .sz-s .rba-gl{width:12px}
.rba-size .sz-m .rba-gl{width:15px}
.rba-size .sz-l .rba-gl{width:18px}
.rba-size .sz-g .rba-gl{width:21px}
.rba-size .rba-eye{fill:var(--paper)}
.rba-size button[aria-pressed="true"] .rba-eye{fill:var(--fill)}
.rba-fields{display:flex;flex-wrap:wrap;gap:12px;min-width:0}
.rba-fields .v2-f{width:auto;min-width:0}
.rba-nmf{flex:1 1 120px}
.rba-nmf input{text-align:left}
.rba-box{display:contents} /* 이름 칸과 같은 줄의 형제로 풀어 라벨 높이 맞춤(theme.js)이 한 줄 전체에 걸리게 */
.rba-box .v2-f{flex:1 1 96px}
.rba-box .v2-f.rba-df{flex-basis:168px;min-width:144px} /* 날짜 값이 잘리지 않는 폭 */
.rba-box .v2-f.rba-aa{flex-basis:150px}
.rba-date{display:block;width:100%;height:var(--v2-ctl,42px);padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:600}
.rba-date:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rba-date[aria-invalid="true"]{border-color:var(--accent);color:var(--accent)}
.rba-albl{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px}
.rba-albl label{white-space:nowrap}
.rba-unit{display:inline-flex;gap:6px}
.rba-unit button{display:inline-grid;place-items:center;min-width:24px;min-height:24px;margin:-4px 0;padding:0 4px;border:0;background:none;font:inherit;color:var(--muted);cursor:pointer} /* 누르는 자리 24px(WCAG 2.5.8), 라벨 줄 높이는 음수 여백으로 유지 */
.rba-unit button[aria-pressed="true"]{color:var(--ink);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.rba-unit button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rba-acts{display:flex;gap:6px;align-items:center;height:var(--v2-ctl,42px)}
.rba-acts .v2-btn{flex:1 1 0;justify-content:center;height:var(--v2-ctl,42px)}
/* 나이별 돌봄 지도: 줄 = 이름 | 띠 | 지금 상태 (subgrid 로 세 열이 모든 줄에서 맞는다) */
.rba-map{padding:16px 18px 14px;min-width:0}
.rba-mhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 10px;margin-bottom:6px}
.rba-mhead small{font-family:var(--sans);font-size:12px;color:var(--muted)}
.rba-mhead #rbaMapSize{color:var(--ink);font-weight:650}
.rba-mhint{flex-basis:100%}
.rba-grid{--rba-pad:9px;display:grid;grid-template-columns:fit-content(26%) minmax(0,1fr) fit-content(28%);column-gap:12px;min-width:0}
.rba-row{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:center;padding:5px 0;min-width:0}
.rba-lane{border-top:1px solid var(--soft)}
.rba-r-hx{padding-bottom:9px}
.rba-nm{min-width:0;font-family:var(--sans);font-size:12.5px;font-weight:650;line-height:1.3;color:var(--ink)}
.rba-r-ax .rba-nm,.rba-r-hx .rba-nm{color:var(--muted);font-weight:600}
.rba-st{min-width:0;font-family:var(--sans);font-size:12.5px;font-weight:700;line-height:1.3;text-align:right;color:var(--ink);overflow-wrap:anywhere}
.rba-lane .rba-st{color:var(--muted);font-weight:650}
.rba-trk{position:relative;height:16px;min-width:0}
.rba-lane .rba-trk{cursor:pointer}
.rba-bar{position:absolute;top:3px;height:10px;border-radius:5px;background:color-mix(in srgb, var(--fill) 34%, var(--paper));transition:opacity .3s ease,background-color .3s ease}
.rba-bar.lv2{background:color-mix(in srgb, var(--fill) 20%, var(--paper))}
.rba-bar.lv3{background:repeating-linear-gradient(90deg,color-mix(in srgb, var(--fill) 26%, var(--paper)) 0 4px,transparent 4px 7px);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--fill) 18%, var(--paper))}
.rba-bar.is-now{background:var(--fill)} /* 지금 해당하는 조각은 진한 잉크, 강조색은 지금 선·손잡이 한 곳만 */
.rba-bar.lv2.is-now{background:color-mix(in srgb, var(--fill) 62%, var(--paper))}
.rba-bar.lv3.is-now{background:repeating-linear-gradient(90deg,var(--fill) 0 4px,transparent 4px 7px);box-shadow:inset 0 0 0 1px var(--fill)}
.rba-bar.is-past{opacity:.38}
.rba-lane:has(.rba-bar.is-now) .rba-st{color:var(--ink);font-weight:750}
.rba-now{position:absolute;top:-5px;bottom:-6px;width:2px;margin-left:-1px;border-radius:1px;background:var(--accent);pointer-events:none;transition:left .45s cubic-bezier(.3,.7,.3,1)}
.rba-r-stage .rba-now{top:auto;bottom:-6px;height:26px}
.rba-r-ax .rba-now{top:16px}
.rba-grid.is-empty .rba-now,.rba-grid.is-empty .rba-bun{display:none}
/* 생애 단계 띠 + 토끼 */
.rba-r-stage .rba-trk{height:44px;cursor:pointer}
.rba-band{position:absolute;left:0;right:0;bottom:4px;height:16px}
.rba-band::before{content:"";position:absolute;left:var(--rba-pad);bottom:-4px;width:var(--rba-fill,0px);height:2px;border-radius:1px;background:var(--accent);transition:width .45s cubic-bezier(.3,.7,.3,1)}
.rba-sg{position:absolute;top:0;bottom:0;box-shadow:inset -2px 0 0 var(--card);overflow:hidden}
.rba-sg em{display:block;padding:0 5px;font-family:var(--sans);font-size:10.5px;font-style:normal;font-weight:700;line-height:16px;white-space:nowrap;color:var(--ink)}
.rba-sg.st-senior em,.rba-sg.st-long em{color:var(--card)} /* 띠 이름 명암비 4.5 이상(검토 R2): 옅은 칸 = 잉크, 짙은 칸 = 카드색 */
.rba-sg em[hidden]{display:none}
.rba-sg:first-child{border-radius:6px 0 0 6px}
.rba-sg:last-child{border-radius:0 6px 6px 0;box-shadow:none}
.rba-sg.st-baby{background:color-mix(in srgb, var(--fill) 10%, var(--paper))}
.rba-sg.st-young{background:color-mix(in srgb, var(--fill) 18%, var(--paper))}
.rba-sg.st-teen{background:color-mix(in srgb, var(--fill) 26%, var(--paper))}
.rba-sg.st-adult{background:color-mix(in srgb, var(--fill) 36%, var(--paper))}
.rba-sg.st-senior{background:color-mix(in srgb, var(--fill) 68%, var(--paper))}
.rba-sg.st-long{background:color-mix(in srgb, var(--fill) 84%, var(--paper))}
.rba-bun{position:absolute;bottom:21px;width:24px;margin-left:-12px;color:var(--ink);transition:left .5s cubic-bezier(.3,.7,.3,1);pointer-events:none}
.rba-bun svg{display:block;width:24px;height:20px;fill:currentColor;transform-origin:50% 100%}
.rba-bun .rba-eye{fill:var(--card)}
.rba-bun.is-hop svg{animation:rba-hop .5s cubic-bezier(.3,.7,.3,1)}
@keyframes rba-hop{0%{transform:translateY(0) scaleY(1)}12%{transform:translateY(0) scaleY(.86)}45%{transform:translateY(-10px) scaleY(1.04)}75%{transform:translateY(0) scaleY(.92)}88%{transform:translateY(-2px)}100%{transform:none}}
/* 토끼 나이 눈금(축 고르개) · 사람 나이 */
.rba-r-ax .rba-trk{height:36px}
.rba-r-hx .rba-trk{height:16px;cursor:pointer}
.rba-ticks{position:absolute;left:0;right:0;top:0;height:16px;font-family:var(--mono);font-size:11px;line-height:16px;color:var(--muted)}
.rba-ticks span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.rba-hticks{color:var(--ink);font-weight:650}
.rba-range{position:absolute;left:0;right:0;bottom:0;width:100%;height:20px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;touch-action:pan-y}
.rba-range::-webkit-slider-runnable-track{height:2px;background:var(--soft);border-radius:1px}
.rba-range::-moz-range-track{height:2px;background:var(--soft);border-radius:1px}
.rba-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-8px;border:2px solid var(--card);border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.rba-range::-moz-range-thumb{width:14px;height:14px;border:2px solid var(--card);border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.rba-range:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rba-src{margin:10px 0 0;font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--muted)}
.rba-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 본문 표: 숫자 칸 머리글은 줄바꿈 허용(긴 로케일 머리글 때문에 360px에서 표가 넓어지지 않게) */
#size-table th.n,#age-table th.n{white-space:normal}
@media (max-width:480px){#size-table :is(th,td),#age-table :is(th,td),#diet-table :is(th,td),#life-table :is(th,td){padding-left:5px;padding-right:5px}#diet-table td,#life-table td{overflow-wrap:anywhere;hyphens:auto}}
@container rba (min-width:640px){
  /* 두 열 답 띠: 왼쪽 = 큰 수·문장·기준 줄·단추, 오른쪽 = 행 */
  .rba-ans{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto auto 1fr auto;grid-template-areas:"lab rows" "big rows" "sen rows" "bas rows" "foot rows"}
  .rba-main,.rba-side{display:contents}
  .rba-main > .v2-label{grid-area:lab}
  .rba-main > .v2-big{grid-area:big}
  .rba-main > .v2-sub{grid-area:sen}
  .rba-foot{grid-area:foot;align-self:end}
  .rba-rows{grid-area:rows;margin-top:0;align-self:start}
  .rba-basis{grid-area:bas;margin:0;padding-top:12px;align-self:start}
}
@container rba (max-width:600px){
  .rba-in{grid-template-columns:minmax(0,1fr)}
  .rba-szf,.rba-mdf,.rba-hint,.rba-fields,.rba-acts{grid-column:1;grid-row:auto}
  .rba-hint{margin:-4px 0 0}
}
@container rba (max-width:520px){
  /* 좁은 화면: 이름 | 지금 상태를 한 줄, 그 아래 띠를 전체 폭으로 */
  .rba-grid{grid-template-columns:minmax(0,1fr)}
  .rba-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nm st" "trk trk";column-gap:10px;row-gap:3px;padding:6px 0}
  .rba-nm{grid-area:nm}
  .rba-st{grid-area:st;max-width:60vw}
  .rba-trk{grid-area:trk}
  .rba-r-ax .rba-nm,.rba-r-hx .rba-nm{font-size:11.5px}
  .rba-now,.rba-r-ax .rba-now{top:-2px;bottom:-2px} /* 이름·상태 줄을 가로지르지 않게 띠 안에만 */
  .rba-r-stage .rba-now{bottom:-2px;height:24px}
  .rba-nmf{flex-basis:100%}
  .rba-box .v2-f,.rba-box .v2-f.rba-aa,.rba-box .v2-f.rba-df{flex:1 1 0}
}
@container rba (max-width:420px){
  .rba-map,.rba-in,.rba-ans{padding-left:12px;padding-right:12px}
  .rba-size button{font-size:12px;padding:0 3px}
}
@media (prefers-reduced-motion:reduce){
  .rba-now,.rba-bun,.rba-band::before,.rba-bar{transition:none}
  .rba-bun.is-hop svg{animation:none}
}