/* 아이와 나이 차이 계산기 전용 CSS (2026-10-18). 위 입력 막대 · 나이 차이(큰 수·문장·형제 터울) | 그때 몇 살(찾기·사람별 나이) · 나이 띠(한 줄 = 한 사람, 커서) · 이정표 표 · 행 fg-*.
   공용 부품은 assets/v2.css. 움직임은 transitions.dev 기준: 띠가 태어난 날부터 자라는 700ms(줄마다 90ms 차이)·커서 260ms cubic-bezier(.22,1,.36,1), 동작 줄이기면 끔.
   두 열 ↔ 한 열은 툴 폭 컨테이너(640px), 한 열이면 나이 차이가 입력 위. 사람 색: 부모 --fill, 아이는 --fill을 종이색과 섞어 옅게(첫째 → 셋째), 커서만 강조색. */
.fg-work{container:fg / inline-size;text-spacing-trim:space-all}
.fg-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"bar bar" "hero look" "line line" "ms ms" "more more"}
.k-p{--k:var(--fill);--kt:var(--on-fill)}
.k-c1{--k:color-mix(in srgb, var(--fill) 58%, var(--paper));--kt:var(--on-fill)}
.k-c2{--k:color-mix(in srgb, var(--fill) 34%, var(--paper));--kt:var(--ink)}
.k-c3{--k:color-mix(in srgb, var(--fill) 18%, var(--paper));--kt:var(--ink)}
.fg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 입력 막대 */
.fg-bar{grid-area:bar;display:flex;flex-direction:column;gap:10px;padding:16px 18px 12px;border-bottom:1px solid var(--soft);min-width:0}
.fg-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:10px;margin:0}
input.fg-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;outline:0;transition:border-color .15s,box-shadow .15s}
input.fg-in:focus{border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
input.fg-in[aria-invalid="true"]{border-color:var(--accent)}
.fg-cin{display:flex;gap:6px;min-width:0}
.fg-cin input{flex:1 1 auto}
.fg-del{flex:0 0 auto;width:var(--v2-ctl,42px);justify-content:center;padding:0;font-size:18px;font-weight:500}
.fg-f-add > .v2-label{display:block;margin:0 0 5px} /* 빈 라벨 자리도 label과 같은 아래 여백(v2.css .v2-f > label 5px) — 없으면 버튼이 입력칸보다 5px 위 */
.fg-f-add[hidden],.fg-f-c[hidden]{display:none}
.fg-opts{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px}
.fg-acts{display:flex;flex-wrap:wrap;gap:6px}

/* 나이 차이 */
.fg-hero{grid-area:hero;display:flex;flex-direction:column;gap:10px;padding:18px;min-width:0;border-right:1px solid var(--soft)}
.fg-kidseg[hidden]{display:none}
.fg-hero .v2-big{flex-wrap:wrap;column-gap:4px;row-gap:6px}
.fg-hero .v2-big small{margin-right:8px}
.fg-hero .v2-sub{margin:0}
.fg-wide{margin:0;padding:8px 10px;border-left:2px solid var(--line);font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.fg-wide:empty{display:none}
.fg-sibs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.fg-sibs[hidden]{display:none}
.fg-sibs-h{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.fg-sibs li:not(.fg-sibs-h){display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.fg-sibs b{font-family:var(--sans);font-size:12px;font-weight:700;color:var(--ink)}
.fg-sibs span{font-family:var(--sans);font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.fg-sibs small{font-family:var(--sans);font-size:12px;color:var(--muted)}

/* 그때 몇 살 */
.fg-look{grid-area:look;display:flex;flex-direction:column;gap:10px;padding:18px;min-width:0}
.fg-ask{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fg-ask .v2-seg button{height:var(--v2-ctl,42px);padding:0 14px}
.fg-step{display:flex;gap:6px;min-width:0}
.fg-step .v2-btn{flex:0 0 auto;justify-content:center;min-width:var(--v2-ctl,42px);font-size:16px}
.fg-step #fgNow{font-size:12.5px}
.fg-n{flex:0 0 auto;width:92px}
.fg-n input{text-align:right}
.fg-when{margin:0;font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums}
.fg-chips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:6px}
.fg-chips li{display:flex;flex-direction:column;gap:2px;min-width:0;padding:8px 10px 8px 12px;border:1px solid var(--soft);border-left:4px solid var(--k);border-radius:var(--radius);background:var(--paper)}
.fg-chips span{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.fg-chips b{font-family:var(--sans);font-size:19px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums lining-nums;color:var(--ink);overflow-wrap:anywhere}
.fg-chips li.is-un b{font-size:13.5px;font-weight:650;color:var(--muted)}
.fg-say{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink)}

/* 나이 띠 */
.fg-line{grid-area:line;padding:16px 18px 14px;border-top:1px solid var(--soft);min-width:0}
.fg-line-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;margin-bottom:6px}
.fg-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 12px;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.fg-legend li{display:inline-flex;align-items:center;gap:5px}
.fg-legend i{display:inline-block}
.fg-legend .k-ms{width:8px;height:8px;border-radius:50%;background:var(--paper);border:2px solid var(--ink)}
.fg-legend .k-x{width:8px;height:8px;background:var(--ink);transform:rotate(45deg)}
.fg-legend .k-now{width:0;height:12px;border-left:1.5px dashed var(--muted)}
.fg-track{--lab:52px;position:relative;padding:22px 0 0;cursor:pointer;touch-action:pan-y;user-select:none;outline:0;border-radius:var(--radius)}
.fg-track:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.fg-lanes{display:flex;flex-direction:column;gap:6px}
.fg-lane{display:grid;grid-template-columns:var(--lab) minmax(0,1fr);align-items:center;height:30px}
.fg-who{padding-right:6px;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fg-lane.is-sel .fg-who{color:var(--ink);font-weight:750}
.fg-meas{position:absolute;top:0;left:0;padding:0;visibility:hidden;font-weight:750;overflow:visible;pointer-events:none}
.fg-run{position:relative;height:100%;border-radius:5px;background:color-mix(in srgb, var(--wash) 80%, var(--paper))}
.fg-band{position:absolute;top:5px;bottom:5px;left:calc(var(--x) * 100%);right:0;border-radius:4px;background:var(--k);transform:scaleX(0);transform-origin:left center;transition:transform 700ms cubic-bezier(.22,1,.36,1) var(--d,0ms)}
.fg-band.on{transform:none}
.fg-lane:not(.is-sel) .fg-band{opacity:.75}
.fg-run em{position:absolute;top:50%;left:calc(var(--x) * 100%);transform:translate(-50%,-50%);font-family:var(--mono);font-size:10.5px;font-style:normal;font-weight:600;line-height:1;color:var(--kt);pointer-events:none}
.fg-run s{position:absolute;top:5px;left:calc(var(--x) * 100%);width:9px;height:9px;transform:translate(-50%,-50%);pointer-events:none;text-decoration:none}
.fg-run s.m-d{border-radius:50%;background:var(--paper);border:2px solid var(--ink)}
.fg-run s.m-x{width:8px;height:8px;background:var(--ink);border:1.5px solid var(--paper);transform:translate(-50%,-50%) rotate(45deg)}
.fg-axis{position:relative;height:18px;margin:5px 0 0 var(--lab)}
.fg-axis span{position:absolute;top:0;left:calc(var(--x) * 100%);transform:translateX(-50%);font-family:var(--mono);font-size:10.5px;color:var(--muted);white-space:nowrap}
.fg-axis span:first-child{transform:none}
.fg-axis span.is-end{transform:translateX(-100%)}
.fg-today{position:absolute;top:16px;bottom:22px;left:calc(var(--lab) + (100% - var(--lab)) * var(--x));border-left:1.5px dashed var(--muted);pointer-events:none}
.fg-today[hidden],.fg-cur[hidden]{display:none}
.fg-cur{position:absolute;top:18px;bottom:20px;left:calc(var(--lab) + (100% - var(--lab)) * var(--x));width:0;border-left:2px solid var(--accent);pointer-events:none;transition:left 260ms cubic-bezier(.22,1,.36,1)}
.fg-cur b{position:absolute;bottom:100%;left:0;transform:translateX(-50%);padding:1px 6px;border-radius:3px;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:11px;font-weight:700;line-height:16px;white-space:nowrap}
.fg-keys{display:block;margin-top:6px;font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--muted)}

/* 이정표 표 */
.fg-ms{grid-area:ms;display:flex;flex-direction:column;gap:8px;padding:16px 18px;border-top:1px solid var(--soft);min-width:0}
.fg-msl{list-style:none;margin:0;padding:0;columns:2;column-gap:8px}
.fg-msl li{font-family:var(--sans);font-size:13.5px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:3px 10px;margin:0 0 6px;padding:8px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);break-inside:avoid}
.fg-msl li.is-past{background:transparent}
.fg-msl li.is-today{border-color:var(--line)}
.fg-msl li.is-cur{border-color:var(--ink);background:var(--accent-wash)}
.fg-msl time{font-family:var(--sans);font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.fg-ages{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:2px 12px;font-family:var(--sans);font-size:12.5px;color:var(--muted)}
.fg-ages > span{white-space:nowrap}
.fg-ages i{display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:2px;background:var(--k);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent)}
.fg-ages b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.fg-go{display:inline;min-width:0;padding:0;border:0;background:none;font:inherit;font-weight:650;color:var(--ink);text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.fg-go:hover{text-decoration-color:var(--ink)}
.fg-ms-note{margin:0;font-family:var(--sans);font-size:11.5px;line-height:1.55;color:var(--muted)}

/* 행·복사 */
.fg-more{grid-area:more;padding:12px 18px 16px;border-top:1px solid var(--soft);min-width:0}
.fg-rows li b{white-space:normal;text-align:right}
.fg-foot{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:12px}

@container fg (max-width:639px){
  .fg-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"hero" "bar" "look" "line" "ms" "more"}
  .fg-hero{border-right:0;border-bottom:1px solid var(--soft)}
  .fg-bar{border-bottom:0}
  .fg-look{border-top:1px solid var(--soft)}
  .fg-hero .v2-big{font-size:38px}
  .fg-track{--lab:42px}
  .fg-msl{columns:1}
}
@container fg (max-width:400px){
  .fg-hero,.fg-look,.fg-line,.fg-ms,.fg-bar,.fg-more{padding-left:14px;padding-right:14px}
  .fg-hero .v2-big{font-size:32px}
}
@media (prefers-reduced-motion:reduce){
  .fg-band{transition:none;transform:none}
  .fg-cur{transition:none}
}