/* 도마뱀 나이 계산기 전용 CSS (2026-10-23). '종별 생애 레인': 답 띠 → 입력 두 줄(종·입력 방식 / 칸·예시) → 레인(이름 | 0~30년 축의 단계 띠 | 같은 나이의 사람 나이). 공용 부품은 assets/v2.css */
.lzc-work{container:lzc / inline-size;display:flex;flex-direction:column}
.lzc-work [hidden]{display:none !important}
/* 답 띠 */
.lzc-ans{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 24px;padding:16px 18px 18px}
.lzc-main{min-width:0;display:flex;flex-direction:column}
.lzc-main > .v2-label{display:block;margin-bottom:6px}
.lzc-main .v2-big{flex-wrap:wrap;row-gap:6px}
.lzc-main .v2-big > span i{font-style:normal;font-size:.5em;font-weight:700;margin-left:4px;color:var(--muted)}
.lzc-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)}
.lzc-main .v2-big.is-empty span{font-size:18px;font-weight:600;color:var(--muted)}
.lzc-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:14px}
.lzc-foot .v2-status{margin-left:auto}
.lzc-side{min-width:0;display:flex;flex-direction:column}
.lzc-rows{margin-top:10px;min-width:0}
.lzc-rows li span{min-width:0;flex:1 1 auto}
.lzc-rows li span em{display:block;margin-top:2px;font-style:normal;font-size:11.5px;color:var(--muted)}
.lzc-rows li b{flex:0 1 auto;max-width:58%;white-space:normal;text-align:right}
.lzc-basis{margin:auto 0 0;padding-top:10px;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
/* 입력 두 줄: 종 · 입력 방식 / 칸 · 예시·처음으로 (줄마다 늘어나는 칸이 남는 폭을 채움) */
.lzc-in{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px 14px;padding:14px 18px;border-top:1px solid var(--soft);border-bottom:1px solid var(--soft)}
.lzc-in .v2-f > .v2-label{display:block;margin:0 0 5px}
.lzc-spf,.lzc-fields{grid-column:1}
.lzc-mode,.lzc-acts{grid-column:2}
.lzc-sel{display:block;width:100%;height:var(--v2-ctl,42px);padding:0 34px 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:650;text-overflow:ellipsis}
.lzc-sel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lzc-seg{display:flex;flex-wrap:nowrap}
.lzc-seg button{flex:1 1 auto;min-width:0;height:var(--v2-ctl,42px);padding:0 12px;font-family:var(--sans);font-size:13px;font-weight:700;white-space:nowrap}
.lzc-fields{display:flex;flex-wrap:wrap;gap:12px;min-width:0}
.lzc-fields .v2-f{flex:1 1 118px;width:auto;min-width:0}
.lzc-fields .v2-f:has(.lzc-date){flex-basis:172px;min-width:144px} /* 날짜 값이 잘리지 않는 폭(en·es 1181px 입양일 모드 130px 사고), 모자라면 입양 때 나이 칸이 다음 줄로 */
.lzc-fields .v2-f.lzc-aa{flex-basis:132px}
.lzc-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}
.lzc-date:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lzc-date[aria-invalid="true"]{border-color:var(--accent);color:var(--accent)}
.lzc-acts{display:flex;gap:6px;align-items:center;height:var(--v2-ctl,42px)}
.lzc-acts .v2-btn{flex:1 1 0;justify-content:center;height:var(--v2-ctl,42px)} /* 입력 방식 단추 폭만큼 채워 빈 곳을 남기지 않는다 */
/* 종별 생애 레인 */
.lzc-lanebox{padding:16px 18px 16px;min-width:0}
.lzc-lhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 10px;margin-bottom:8px}
.lzc-lhead small{font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--muted)}
.lzc-grid{--lzc-nm:176px;--lzc-hu:84px;--lzc-in:9px;min-width:0}
.lzc-axis,.lzc-lane{display:grid;grid-template-columns:var(--lzc-nm) minmax(0,1fr) var(--lzc-hu);column-gap:12px;align-items:center}
.lzc-axis{position:sticky;top:var(--hd-h,52px);z-index:2;padding:4px 0 6px;background:var(--card);border-bottom:1px solid var(--soft)}
.lzc-axl,.lzc-axh{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted)}
.lzc-axh{text-align:right}
.lzc-scale{position:relative;height:34px;min-width:0}
.lzc-ticks{position:absolute;left:var(--lzc-in);right:var(--lzc-in);top:0;bottom:0;pointer-events:none}
.lzc-ticks span{position:absolute;bottom:4px;width:1px;height:5px;background:var(--line)}
.lzc-ticks span.mj{height:9px;background:var(--muted)}
.lzc-ticks span b{position:absolute;bottom:11px;left:0;transform:translateX(-50%);font-family:var(--sans);font-size:10.5px;font-weight:600;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.lzc-ticks span:first-child b{transform:none}
.lzc-ticks span:last-child b{transform:translateX(-100%)}
.lzc-range{position:absolute;left:0;right:0;bottom:-6px;width:100%;height:20px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.lzc-range::-webkit-slider-runnable-track{height:2px;background:var(--soft);border-radius:1px}
.lzc-range::-moz-range-track{height:2px;background:var(--soft);border-radius:1px}
.lzc-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)}
.lzc-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)}
.lzc-range:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lzc-lanes{display:flex;flex-direction:column}
.lzc-gh{margin:10px 0 2px;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lzc-gh:first-child{margin-top:6px}
.lzc-lane{width:100%;min-height:40px;padding:4px 0;border:0;border-bottom:1px solid var(--soft);background:none;color:var(--ink);text-align:left;cursor:pointer;font:inherit;position:relative}
.lzc-lane:hover{background:color-mix(in srgb, var(--wash) 60%, transparent)}
.lzc-lane:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.lzc-lane.is-sel{background:color-mix(in srgb, var(--wash) 85%, var(--paper))}
.lzc-lane.is-sel::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:2px;background:var(--accent)}
.lzc-nm{display:flex;flex-direction:column;min-width:0;padding-left:10px;line-height:1.25}
.lzc-nm b{font-family:var(--sans);font-size:13px;font-weight:650;color:var(--ink)}
.lzc-lane.is-sel .lzc-nm b{font-weight:800}
.lzc-nm small{font-family:var(--sans);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.lzc-trk{position:relative;height:16px;margin:0 var(--lzc-in);min-width:0}
.lzc-base,.lzc-past{position:absolute;inset:0}
.lzc-trk i{position:absolute;top:2px;bottom:2px}
.lzc-trk i:first-child{border-radius:3px 0 0 3px}
.lzc-trk i:last-child{border-radius:0 3px 3px 0}
.lzc-base .st-young{background:color-mix(in srgb, var(--fill) 9%, var(--paper))}
.lzc-base .st-mature{background:color-mix(in srgb, var(--fill) 15%, var(--paper))}
.lzc-base .st-adult{background:color-mix(in srgb, var(--fill) 21%, var(--paper))}
.lzc-base .st-senior{background:color-mix(in srgb, var(--fill) 30%, var(--paper))}
.lzc-base .st-long{background:color-mix(in srgb, var(--fill) 40%, var(--paper))}
.lzc-past{clip-path:inset(0 100% 0 0);transition:clip-path 560ms cubic-bezier(.2,.7,.2,1)}
.lzc-past .st-young{background:color-mix(in srgb, var(--fill) 32%, var(--paper))}
.lzc-past .st-mature{background:color-mix(in srgb, var(--fill) 46%, var(--paper))}
.lzc-past .st-adult{background:color-mix(in srgb, var(--fill) 60%, var(--paper))}
.lzc-past .st-senior{background:color-mix(in srgb, var(--fill) 76%, var(--paper))}
.lzc-past .st-long{background:var(--fill)}
.lzc-rec{position:absolute;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border:2px solid var(--card);border-radius:50%;background:var(--ink);font-style:normal}
.lzc-now{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:1px;background:var(--accent);transition:left 560ms cubic-bezier(.2,.7,.2,1)}
.lzc-hu{display:flex;flex-direction:column;align-items:flex-end;min-width:0;line-height:1.25;text-align:right}
.lzc-hu b{font-family:var(--sans);font-size:13.5px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.lzc-hu small{font-family:var(--sans);font-size:11px;color:var(--muted)}
.lzc-lane.is-sel .lzc-hu b{color:var(--accent)}
.lzc-lane.is-off .lzc-hu b{color:var(--muted)}
.lzc-legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin:12px 0 0;padding:0;list-style:none;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.lzc-legend li{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.lzc-legend i{display:block;width:13px;height:10px;border-radius:2px}
.lzc-legend i{width:18px}
.lzc-legend .lg-young i{background:linear-gradient(90deg,color-mix(in srgb, var(--fill) 32%, var(--paper)) 50%,color-mix(in srgb, var(--fill) 9%, var(--paper)) 50%)} /* 왼쪽 짙은 지난날 · 오른쪽 옅은 앞날 */
.lzc-legend .lg-mature i{background:linear-gradient(90deg,color-mix(in srgb, var(--fill) 46%, var(--paper)) 50%,color-mix(in srgb, var(--fill) 15%, var(--paper)) 50%)}
.lzc-legend .lg-adult i{background:linear-gradient(90deg,color-mix(in srgb, var(--fill) 60%, var(--paper)) 50%,color-mix(in srgb, var(--fill) 21%, var(--paper)) 50%)}
.lzc-legend .lg-senior i{background:linear-gradient(90deg,color-mix(in srgb, var(--fill) 76%, var(--paper)) 50%,color-mix(in srgb, var(--fill) 30%, var(--paper)) 50%)}
.lzc-legend .lg-long i{background:linear-gradient(90deg,var(--fill) 50%,color-mix(in srgb, var(--fill) 40%, var(--paper)) 50%)}
.lzc-legend .lg-rec i{width:8px;height:8px;border-radius:50%;background:var(--ink)}
.lzc-legend .lg-now i{width:2px;height:12px;border-radius:1px;background:var(--accent)}
.lzc-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 lzc (min-width:640px){
  /* 두 열 답 띠: 왼쪽 = 큰 수·문장·기준점 줄·단추, 오른쪽 = 행(기준점 줄을 문장 아래에 두어 양쪽 높이를 맞춘다. 초점 없는 글이라 Tab 순서 영향 없음) */
  .lzc-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"}
  .lzc-main,.lzc-side{display:contents}
  .lzc-main > .v2-label{grid-area:lab}
  .lzc-main > .v2-big{grid-area:big}
  .lzc-main > .v2-sub{grid-area:sen}
  .lzc-foot{grid-area:foot;align-self:end}
  .lzc-rows{grid-area:rows;margin-top:0;align-self:start}
  .lzc-basis{grid-area:bas;margin:0;padding-top:12px;align-self:start}
}
@container lzc (max-width:639px){
  .lzc-grid{--lzc-nm:132px;--lzc-hu:70px}
  .lzc-axis,.lzc-lane{column-gap:8px}
}
@container lzc (max-width:520px){
  /* 좁은 화면: 이름 | 사람 나이를 한 줄, 그 아래 띠를 전체 폭으로 */
  .lzc-axis{grid-template-columns:minmax(0,1fr)}
  .lzc-axl,.lzc-axh{display:none}
  .lzc-lane{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nm hu" "trk trk";row-gap:4px;padding:6px 0 8px}
  .lzc-nm{grid-area:nm}
  .lzc-hu{grid-area:hu;padding-right:2px}
  .lzc-trk{grid-area:trk}
  .lzc-in{grid-template-columns:minmax(0,1fr)}
  .lzc-spf,.lzc-fields,.lzc-mode,.lzc-acts{grid-column:1}
  .lzc-fields .v2-f,.lzc-fields .v2-f.lzc-aa,.lzc-fields .v2-f:has(.lzc-date){flex:1 1 0}
}
@container lzc (max-width:420px){
  .lzc-lanebox{padding-left:12px;padding-right:12px}
}
@media (prefers-reduced-motion:reduce){
  .lzc-past,.lzc-now{transition:none}
}