/* 버킷리스트 타임라인 전용 CSS (2026-10-14). 나이 폼·무대(남은 시간·살아온 비율·다음 목표·인생 격자 SVG·범례)·항목 줄 목록·타임라인·통계 막대·바닥 bt-*. 공용 부품은 assets/v2.css.
   움직임(R45): 격자 칸은 살아온 해부터 차례로 채워지고(transition-delay 계단), 살아온 비율·통계 막대는 너비 전환, 새 줄·표식은 pop. 동작 줄이기면 모두 끈다. 분류 색 8개는 라이트·다크에서 따로 둔다. */
.bt{container:bt / inline-size;--bt-travel:#2b7fb5;--bt-career:#7b5bc4;--bt-health:#2f9a5b;--bt-learning:#b8860b;--bt-relationship:#d14b7d;--bt-finance:#1f8f8f;--bt-adventure:#d9651c;--bt-personal:#8a6a45}
html[data-theme="dark"] .bt{--bt-travel:#5aa8dd;--bt-career:#a68be0;--bt-health:#5cc484;--bt-learning:#d9a93b;--bt-relationship:#ea7aa3;--bt-finance:#4fb8b8;--bt-adventure:#ef8a4a;--bt-personal:#b89470}
@media (prefers-color-scheme: dark){ html:not([data-theme="light"]) .bt{--bt-travel:#5aa8dd;--bt-career:#a68be0;--bt-health:#5cc484;--bt-learning:#d9a93b;--bt-relationship:#ea7aa3;--bt-finance:#4fb8b8;--bt-adventure:#ef8a4a;--bt-personal:#b89470} }
.bt [hidden]{display:none !important}
.bt [data-cat="travel"]{--c:var(--bt-travel)}.bt [data-cat="career"]{--c:var(--bt-career)}.bt [data-cat="health"]{--c:var(--bt-health)}.bt [data-cat="learning"]{--c:var(--bt-learning)}
.bt [data-cat="relationship"]{--c:var(--bt-relationship)}.bt [data-cat="finance"]{--c:var(--bt-finance)}.bt [data-cat="adventure"]{--c:var(--bt-adventure)}.bt [data-cat="personal"]{--c:var(--bt-personal)}
.bt-help{margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.bt-top{padding:14px 18px 12px;border-bottom:1px solid var(--soft)}
.bt-ages{display:grid;grid-template-columns:repeat(2,minmax(0,160px));gap:10px 12px}
.bt-top .bt-help{margin-top:8px}
.bt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.bt-stage{display:flex;flex-direction:column;padding:18px;min-width:0;border-right:1px solid var(--soft)}
.bt-stage .v2-big{margin-top:4px}
.bt-stage .v2-sub{margin-top:6px;font-family:var(--sans);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
/* 살아온 비율 막대: 테두리 안을 --w 만큼 채운다(너비 전환) */
.bt-meter{display:block;height:10px;margin:12px 0 0;border:1px solid var(--line);border-radius:5px;background:var(--paper);overflow:hidden}
.bt-meter i{display:block;height:100%;width:var(--w,0%);background:var(--fill);transition:width .6s cubic-bezier(.22,1,.36,1)}
.bt-meter--s{flex:1 1 80px;height:8px;margin:0}
.bt-lived{margin-top:6px;font-variant-numeric:tabular-nums}
.bt-next{display:flex;flex-direction:column;gap:2px;margin:14px 0 0;padding:10px 12px;border-left:2px solid var(--accent);background:var(--accent-wash)}
.bt-next b{font-family:var(--sans);font-size:14px;font-weight:750;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}
.bt-next b.is-empty{font-weight:500;color:var(--muted)}
.bt-gridhead{margin:16px 0 8px}
/* 인생 격자: 10칸 = 10년, 한 줄 = 10년대. 칸 색은 클래스, 표식은 분류 색 */
.bt-svg{display:block;width:100%;max-width:440px;height:auto;overflow:visible}
.bt-svg .c{fill:var(--paper);stroke:var(--line);stroke-width:.6;transition:fill .35s ease;transition-delay:calc(var(--i,0) * 5ms)}
.bt-svg .c.is-lived{fill:var(--fill);stroke:var(--fill)}
.bt-svg .c.is-now{fill:var(--accent);stroke:var(--accent)}
.bt-svg .r{font-family:var(--sans);font-size:7px;font-weight:700;fill:var(--muted)} /* 360px(칸 32px)에서 8px 안팎(독립 검토 R8) */
.bt-svg .m{fill:var(--c,var(--muted));stroke:var(--paper);stroke-width:.9;transform-box:fill-box;transform-origin:center;animation:bt-pop .45s cubic-bezier(.22,1,.36,1) both}
.bt-svg .m.is-old{animation:none} /* 이미 있던 표식은 다시 튀지 않음(독립 검토 R1) */
.bt-svg .k{fill:none;stroke:var(--paper);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bt-svg .x{font-family:var(--sans);font-size:6.5px;font-weight:800;fill:var(--paper);paint-order:stroke;stroke:var(--fill);stroke-width:1.4}
.bt-svg .x.on-left{fill:var(--ink);stroke:var(--paper)}
@keyframes bt-pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.25)}100%{transform:scale(1);opacity:1}}
.bt-legend{list-style:none;display:flex;flex-wrap:wrap;gap:4px 12px;margin:10px 0 0;padding:0;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.bt-legend li{display:inline-flex;align-items:center;gap:5px}
.bt-legend i{display:inline-grid;place-items:center;width:11px;height:11px;border:1px solid var(--line);border-radius:2px;background:var(--paper);font-style:normal;font-size:8px;line-height:1;color:var(--paper)}
.bt-legend .is-lived i{background:var(--fill);border-color:var(--fill)}
.bt-legend .is-now i{background:var(--accent);border-color:var(--accent)}
.bt-legend .is-cat i{border-radius:50%;background:var(--c);border-color:var(--c)}
.bt-legend .is-done i{background:var(--fill);border-color:var(--fill)}
/* 항목 줄 목록: 한 줄 = 이루고 싶은 것 | 분류 | 나이 | 중요도 | 완료 | 지우기 (좁으면 두 줄) */
.bt-set{display:flex;flex-direction:column;gap:10px;padding:18px;min-width:0}
.bt-list-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.bt-count{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.bt-items{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.bt-items li:not(:last-child){padding-bottom:12px;border-bottom:1px solid var(--soft)}
/* 기본은 세 줄(이루고 싶은 것 + 지우기 / 분류 + 나이 / 중요도 + 완료): 패널 폭 290~400px에서 두 줄이면 분류 칸이 59~79px로 줄어 이름이 잘린다(2차 검토 B2·B4, 2026-10-15 실측). 컨테이너 1100px↑에서만 한 줄.
   나이 칸은 3·4열(46 + 42 + 6 = 94px)이라 "120 años"도 들어간다 */
.bt-items li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 46px 42px 30px;grid-template-areas:"t t t t x" "c c a a ." "p p p d .";gap:6px;align-items:center}
.bt-items li.is-pop{animation:bt-row .4s ease both}
@keyframes bt-row{0%{opacity:0;transform:translateY(-4px)}100%{opacity:1;transform:none}}
.bt-items .bt-text{grid-area:t}
.bt-items .bt-text input{text-align:left;font-size:14.5px;font-weight:600;padding:0 10px}
.bt-items .bt-age{grid-area:a}
.bt-items .bt-age input{padding:0 6px;font-size:14.5px} /* 360px 두 줄 배치에서 칸 폭 75px: 글자 자리 20px 이상(align-check squeeze) */
.bt-items .bt-age b{min-width:24px;padding:0 4px}
.bt-items li.is-done .bt-text input{text-decoration:line-through;color:var(--muted)}
.bt-items li.is-late .bt-age{border-color:var(--accent)}
.bt-items li.is-late .bt-age b{color:var(--accent)} /* 테두리 + 단위 글자 색 + aria-invalid·경고 문구(독립 검토 R9) */
.bt-select{grid-area:c;display:block;width:100%;min-width:0;height:var(--v2-ctl,42px);padding:0 4px 0 26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper) no-repeat 9px center/11px 11px radial-gradient(circle,var(--c,var(--muted)) 55%,transparent 58%);color:var(--ink);font-family:var(--sans);font-size:13px;font-weight:600;text-overflow:ellipsis}
.bt-select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bt-items .bt-prio{grid-area:p;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;height:var(--v2-ctl,42px);border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);overflow:hidden}
.bt-items .bt-prio button{height:100%;padding:0;border:0;border-radius:0;border-left:1px solid var(--soft);background:none;font-size:10px;letter-spacing:-.12em;color:var(--muted);overflow:hidden} /* 360px에서 ★★★ 27px 칸에 들어가게(독립 검토 R7) */
.bt-items .bt-prio button:first-child{border-left:0}
.bt-items .bt-prio button[aria-pressed="true"]{background:var(--fill);color:var(--on-fill)}
.bt-done{grid-area:d;display:grid;place-items:center;height:var(--v2-ctl,42px);border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--muted);font-family:var(--sans);font-size:14px;font-weight:800;transition:background var(--ease),color var(--ease)}
.bt-done[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.bt-done:focus-visible,.bt-x:focus-visible,.bt-items .bt-prio button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.bt-x{grid-area:x;display:grid;place-items:center;width:30px;height:var(--v2-ctl,42px);border:0;border-radius:var(--radius);background:none;color:var(--muted)}
.bt-x:hover{background:var(--btn);color:var(--ink)}
.bt-x:disabled{opacity:.35;cursor:not-allowed}
.bt-x .i{width:14px;height:14px}
.bt-acts{display:flex;flex-wrap:wrap;gap:8px}
.bt-ex{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.bt-warn{margin:0;padding:10px 12px;border-left:2px solid var(--accent);background:var(--accent-wash);font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink)}
/* 아래 상자: 타임라인·통계·바닥 */
.bt-box{padding:16px 18px;border-top:1px solid var(--soft)}
.bt-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 10px}
.bt-headhint{font-family:var(--sans);font-size:12px;color:var(--muted)}
.bt-filters{display:grid;gap:8px;margin-bottom:14px}
.bt-filter{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.bt-filter .v2-label{min-width:44px}
.bt-filter .v2-seg button{height:28px;padding:0 9px;font-size:12px}
/* 타임라인: 왼쪽 세로선, 10년대마다 점·머리글, 항목 카드 */
.bt-tl{display:grid;gap:14px;position:relative;padding-left:4px}
.bt-dec{position:relative;padding-left:22px;border-left:2px solid var(--soft)}
.bt-dec::before{content:"";position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--line)}
.bt-dec.is-now::before{background:var(--accent);border-color:var(--accent)}
.bt-dec-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 8px}
.bt-dec-h b{font-family:var(--serif);font-size:17px;font-weight:900;letter-spacing:-.02em;color:var(--ink)}
.bt-dec-h span{font-family:var(--sans);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.bt-dec-items{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.bt-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:baseline;padding:8px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--card);animation:bt-row .4s ease both}
.bt-card.is-old{animation:none}
.bt-card .bt-when{display:flex;flex-direction:column;min-width:56px;font-family:var(--sans);font-variant-numeric:tabular-nums}
.bt-card .bt-when b{font-size:15px;font-weight:800;color:var(--ink)}
.bt-card .bt-when span{font-size:11.5px;color:var(--muted);white-space:nowrap}
.bt-card .bt-t{font-size:14.5px;font-weight:650;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}
.bt-card .bt-meta{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.bt-chip{display:inline-flex;align-items:center;gap:4px;padding:1px 7px 1px 5px;border-radius:999px;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c);font-weight:700}
.bt-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c)}
.bt-card .bt-stars{letter-spacing:-.05em;color:var(--ink)}
.bt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* 화면 낭독기용 중요도 글자(독립 검토 N8) */
.bt-card.is-done{opacity:.72}
.bt-card.is-done .bt-t{text-decoration:line-through;color:var(--muted)}
.bt-card.is-done .bt-when b::after{content:" ✓";color:var(--accent)}
.bt-card.is-late{border-color:var(--accent)}
.bt-card .bt-flag{color:var(--accent);font-weight:700}
/* 통계: 완료율·분류 균형·10년대별 막대 */
.bt-stat3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 24px}
.bt-stat{display:flex;flex-direction:column;gap:8px;min-width:0}
.bt-stat .bt-help{margin-top:2px}
.bt-rate{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--sans);font-variant-numeric:tabular-nums}
.bt-rate b{font-size:15px;font-weight:800;color:var(--ink);white-space:nowrap}
.bt-pct{font-size:13px;font-weight:700;color:var(--accent);white-space:nowrap}
.bt-bars{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.bt-bars li{display:grid;grid-template-columns:minmax(52px,auto) minmax(0,1fr) 24px;align-items:center;gap:8px;font-family:var(--sans);font-size:12px;color:var(--muted)}
.bt-bars li span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-bars li.is-zero span:first-child{opacity:.55}
.bt-bars i{display:block;height:9px;border-radius:2px;background:var(--c,var(--fill));width:var(--w,0%);min-width:0;transition:width .5s cubic-bezier(.22,1,.36,1)}
.bt-bars li.is-zero i{width:2px;background:var(--soft)}
.bt-bars b{font-weight:700;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.bt-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.bt-btns{display:flex;flex-wrap:wrap;gap:8px}
.bt-foot .v2-status:empty{display:none}
.bt-foot .v2-status{flex-basis:100%}
@container bt (max-width:720px){
  .bt-grid{grid-template-columns:minmax(0,1fr)}
  .bt-stage{border-right:0;border-bottom:1px solid var(--soft)}
  .bt-stat3{grid-template-columns:minmax(0,1fr)}
}
@container bt (min-width:1100px){
  .bt-items li{grid-template-columns:minmax(0,1fr) 96px 76px 110px 42px 30px;grid-template-areas:"t c a p d x"}
}
@container bt (max-width:560px){
  .bt-ages{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (prefers-reduced-motion:reduce){
  .bt-svg .c,.bt-meter i,.bt-bars i{transition:none}
  .bt-svg .m,.bt-items li.is-pop,.bt-card{animation:none}
}