/* strength-bodypro shared component library (variable-driven theme) */
:root { --bg:#0f0f13; --surface:#1a1a22; --card:#22222e; --border:#2e2e3e; --text:#e2e2f0; --muted:#888899; --green:#4ade80; --yellow:#facc15; --blue:#60a5fa; --pink:#ff6584; --purple:#6c63ff; --orange:#fb923c; --warm:#fb923c; --red:#f87171; --accent:#6c63ff; --accent2:#ff6584; --accent-rgb:108,99,255; --badge-fg:#fff; --p1:108,99,255; --p2:74,222,128; --p3:255,101,132; --dot-mon:108,99,255; --dot-tue:74,222,128; --dot-wed:250,204,21; --dot-thu:255,101,132; --dot-fri:96,165,250; --dot-a:96,165,250; --dot-b:74,222,128; --header-bg:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%) }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif; min-height: 100vh; }
/* HEADER */ .header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 36px 24px 28px;
    text-align: center;
    border-bottom: 1px solid var(--border);
  }
.badge { display:inline-block; background:var(--accent); color:var(--badge-fg); font-size:11px; font-weight:800; letter-spacing:1.5px; padding:4px 12px; border-radius:20px; margin-bottom:12px; }
.header h1 { font-size: 28px; font-weight: 800; margin-bottom: 6px; }
.header p { color: var(--muted); font-size: 14px; }
.stats { display: flex; justify-content: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.stat { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 10px 18px; text-align: center; }
.stat .val { font-size: 18px; font-weight: 800; color: var(--accent); }
.stat .lbl { font-size: 11px; color: var(--muted); margin-top: 2px; }
/* 12주 진행 타임라인 */ .timeline { padding: 20px 16px 0; background: var(--surface); border-bottom: 1px solid var(--border); }
.timeline-title { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; margin-bottom: 12px; }
.timeline-track { display: flex; gap: 4px; margin-bottom: 8px; }
.tl-week {
    flex: 1; height: 10px; border-radius: 3px; background: var(--border); cursor: pointer; transition: background 0.2s;
  }
.tl-week.p1 { background:rgba(var(--p1),0.3); }
.tl-week.p2 { background:rgba(var(--p2),0.3); }
.tl-week.p3 { background:rgba(var(--p3),0.3); }
.tl-week.done { opacity: 0.5; }
.timeline-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); padding-bottom: 12px; }
.phase-legend { display: flex; gap: 16px; padding-bottom: 14px; }
.leg { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.leg-dot { width: 10px; height: 10px; border-radius: 3px; }
/* TABS */ .tabs { display: flex; background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 12px; overflow-x: auto; gap: 2px; }
.tab { padding: 13px 16px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; transition: all 0.2s; }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab.t2.active { color:rgb(var(--p2)); border-bottom-color:rgb(var(--p2)); }
.tab.t3.active { color:rgb(var(--p3)); border-bottom-color:rgb(var(--p3)); }
.tab.tc.active { color:var(--warm); border-bottom-color:var(--warm); }
/* CONTENT */ .content { max-width: 720px; margin: 0 auto; padding: 20px 16px 60px; }
.panel { display: none; }
.panel.active { display: block; }
.section-title { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; margin: 24px 0 10px; }
/* 페이즈 헤더 */ .phase-header {
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 16px;
    border: 1px solid;
  }
.phase-header.p1 { background:rgba(var(--p1),0.08); border-color:rgba(var(--p1),0.3); }
.phase-header.p2 { background:rgba(var(--p2),0.08); border-color:rgba(var(--p2),0.3); }
.phase-header.p3 { background:rgba(var(--p3),0.08); border-color:rgba(var(--p3),0.3); }
.phase-header .ph-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ph-badge { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 6px; }
.ph-badge.p1 { background:rgba(var(--p1),0.3); color:rgb(var(--p1)); }
.ph-badge.p2 { background:rgba(var(--p2),0.3); color:rgb(var(--p2)); }
.ph-badge.p3 { background:rgba(var(--p3),0.3); color:rgb(var(--p3)); }
.ph-title { font-size: 15px; font-weight: 800; }
.ph-desc { font-size: 12px; color: var(--muted); line-height: 1.6; }
.ph-goals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ph-goal { font-size: 11px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 3px 9px; }
/* DAY CARDS */ .day-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 8px; cursor: pointer; transition: border-color 0.2s; }
.day-card:hover { border-color:rgba(var(--accent-rgb),0.4); }
.day-card.expanded { border-color: var(--accent); }
.day-header { display: flex; align-items: center; gap: 12px; }
.day-dot { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.day-dot.mon { background:rgba(var(--dot-mon),0.2); color:rgb(var(--dot-mon)); }
.day-dot.tue { background:rgba(var(--dot-tue),0.2); color:rgb(var(--dot-tue)); }
.day-dot.wed { background:rgba(var(--dot-wed),0.2); color:rgb(var(--dot-wed)); }
.day-dot.thu { background:rgba(var(--dot-thu),0.2); color:rgb(var(--dot-thu)); }
.day-dot.fri { background:rgba(var(--dot-fri),0.2); color:rgb(var(--dot-fri)); }
.day-dot.rest { background: rgba(255,255,255,0.05); color: var(--muted); }
.day-dot.cardio { background: rgba(251,146,60,0.2); color: var(--orange); }
.day-info { flex: 1; }
.day-name { font-size: 14px; font-weight: 700; }
.day-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.day-tags { display: flex; gap: 4px; margin-top: 4px; }
.dtag { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 5px; }
.dtag-s { background:rgba(var(--p1),0.2); color:var(--accent); }
.dtag-c { background: rgba(251,146,60,0.2); color: var(--orange); }
.day-arrow { color: var(--muted); font-size: 14px; transition: transform 0.2s; }
.day-card.expanded .day-arrow { transform: rotate(180deg); }
.day-body { display: none; margin-top: 14px; }
.day-card.expanded .day-body { display: block; }
.ex-section { margin-bottom: 12px; }
.ex-section-label { font-size: 10px; font-weight: 700; letter-spacing: 0.8px; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; padding-left: 4px; }
.exercise-table { width: 100%; border-collapse: collapse; }
.exercise-table th { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; color: var(--muted); text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border); }
.exercise-table td { font-size: 13px; padding: 9px 8px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.exercise-table tr:last-child td { border-bottom: none; }
.ex-name { font-weight: 600; }
.ex-set { font-weight: 700; font-size: 13px; }
.ex-set.s { color: var(--accent); }
.ex-set.c { color: var(--orange); }
.ex-rest { color: var(--muted); font-size: 12px; }
.ex-note { color: var(--muted); font-size: 11px; }
/* 주차별 조정 박스 */ .adjust-box { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-top: 10px; }
.adjust-box .adj-title { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.adj-row { display: flex; justify-content: space-between; font-size: 12px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.adj-row:last-child { border-bottom: none; }
.adj-wk { color: var(--muted); }
.adj-val { font-weight: 600; color: var(--text); }
/* 유산소 카드 */ .cardio-card { background: rgba(251,146,60,0.07); border: 1px solid rgba(251,146,60,0.25); border-radius: 14px; padding: 16px; margin-bottom: 10px; }
.cardio-card .cc-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cc-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(251,146,60,0.2); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.cc-title { font-size: 15px; font-weight: 800; }
.cc-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.cardio-phase-row { display: flex; flex-direction: column; gap: 6px; }
.cp-item { background: rgba(255,255,255,0.04); border-radius: 10px; padding: 10px 12px; }
.cp-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.cp-phase { font-size: 11px; font-weight: 800; }
.cp-phase.p1 { color:rgb(var(--p1)); }
.cp-phase.p2 { color:rgb(var(--p2)); }
.cp-phase.p3 { color:rgb(var(--p3)); }
.cp-freq { font-size: 11px; color: var(--muted); }
.cp-name { font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.cp-detail { font-size: 12px; color: var(--muted); line-height: 1.5; }
.cardio-menu { margin-top: 12px; }
.cm-title { font-size: 11px; font-weight: 700; letter-spacing: 0.8px; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; }
.cm-item { display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 13px; }
.cm-item:last-child { border-bottom: none; }
.cm-name { font-weight: 700; }
.cm-info { text-align: right; color: var(--muted); font-size: 12px; }
/* 체크리스트 */ .checklist-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin-bottom: 10px; }
.check-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 13px; }
.check-item:last-child { border-bottom: none; }
.check-icon { flex-shrink: 0; margin-top: 1px; }
.check-ex { font-weight: 700; display: block; margin-bottom: 3px; }
.check-point { color: var(--muted); font-size: 12px; }
.alert-card { background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.3); border-radius: 14px; padding: 16px; margin-bottom: 10px; }
.alert-title { font-size: 12px; font-weight: 700; color: var(--red); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.alert-item { font-size: 13px; color: var(--text); padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); display: flex; gap: 8px; }
.alert-item:last-child { border-bottom: none; }
.note-card { background:rgba(var(--accent-rgb),0.08); border:1px solid rgba(var(--accent-rgb),0.25); border-radius:14px; padding:16px; margin-bottom:10px; font-size:13px; color:var(--text); line-height:1.8; }
.note-card li { margin-left: 16px; margin-bottom: 4px; }
.divider { height: 1px; background: var(--border); margin: 14px 0; }
footer { text-align: center; padding: 20px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--border); }
/* ── 운동 완료 체크 ── */ .exercise-table tr.ex-data { cursor: pointer; transition: background .15s; }
.exercise-table tr.ex-data:active { background: rgba(255,255,255,.04); }
.exercise-table tr.ex-row-done td { color: var(--muted); }
.exercise-table tr.ex-row-done td.ex-name { text-decoration: line-through; }
.exercise-table tr.ex-row-done td.ex-name::before { content: "✓ "; color: #4ade80; display: inline-block; text-decoration: none; }
.exercise-table tr.ex-row-done td.ex-set, .exercise-table tr.ex-row-done td.ex-rest, .exercise-table tr.ex-row-done td.ex-note { opacity: .45; }
.day-card.day-done { border-color: rgba(74,222,128,.35) !important; }
.day-card.day-done .day-dot { background: rgba(74,222,128,.2) !important; color: #4ade80 !important; }
.day-done-marker { display: none; font-size: 11px; color: #4ade80; font-weight: 700; margin-left: 6px; }
.day-card.day-done .day-done-marker { display: inline; }

/* ── level4 A/B & yearly-cycle extras ── */
.tab.ta.active { color:var(--accent); border-bottom-color:var(--accent); }
.tab.tb.active { color:var(--green); border-bottom-color:var(--green); }
.tab.ty.active { color:var(--warm); border-bottom-color:var(--warm); }
.day-dot.a { background:rgba(var(--dot-a),0.2); color:rgb(var(--dot-a)); }
.day-dot.b { background:rgba(var(--dot-b),0.2); color:rgb(var(--dot-b)); }

@media (max-width:480px) {
  .topnav { padding:8px 10px; }
  .header h1 { font-size:20px; }
  .tab { padding:10px; font-size:12px; }
  .content { padding:16px 12px 60px; }
  .exercise-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .stats { gap:6px; }
  .stat { padding:6px 10px; }
  .day-dot { width:28px; height:28px; }
}

/* ══════════ v2 enhancement layer (app.js) ══════════ */
/* a11y focus */
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.tab:focus-visible, .tab-btn:focus-visible { outline-offset:-2px; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }

/* 진행률 바 (레벨 헤더 하단) */
.sbp-progress { max-width:720px; margin:0 auto; padding:14px 16px 0; }
.sbp-progress-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.sbp-progress-label { font-size:11px; font-weight:700; letter-spacing:1px; color:var(--muted); text-transform:uppercase; }
.sbp-progress-pct { font-size:13px; font-weight:800; color:var(--accent); }
.sbp-progress-track { height:8px; border-radius:5px; background:rgba(255,255,255,0.07); overflow:hidden; }
.sbp-progress-fill { height:100%; width:0; border-radius:5px; background:linear-gradient(90deg, rgb(var(--accent-rgb)), rgba(var(--accent-rgb),0.55)); transition:width .5s cubic-bezier(.4,0,.2,1); }

/* 오늘의 운동 강조 */
.day-card.is-today { border-color:rgba(var(--accent-rgb),0.55); box-shadow:0 0 0 1px rgba(var(--accent-rgb),0.25), 0 6px 20px rgba(var(--accent-rgb),0.10); }
.today-chip { display:none; font-size:10px; font-weight:800; letter-spacing:.5px; color:#fff; background:var(--accent); padding:2px 8px; border-radius:20px; margin-left:6px; vertical-align:middle; }
.day-card.is-today .today-chip { display:inline-block; }

/* 인덱스 카드 진행률 미니바 */
.card-mini-prog { display:flex; align-items:center; gap:8px; padding:0 20px 14px; margin-top:-4px; }
.card-mini-track { flex:1; height:6px; border-radius:4px; background:rgba(255,255,255,0.06); overflow:hidden; }
.card-mini-fill { height:100%; width:0; border-radius:4px; background:linear-gradient(90deg, var(--accent), var(--accent2)); transition:width .5s ease; }
.card-mini-pct { font-size:11px; font-weight:800; color:var(--accent); min-width:34px; text-align:right; }

/* 설정 FAB + 시트 */
.sbp-fab { position:fixed; right:16px; bottom:16px; width:48px; height:48px; border-radius:50%; border:1px solid var(--border); background:var(--card); color:var(--text); font-size:20px; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:200; box-shadow:0 6px 20px rgba(0,0,0,0.4); }
.sbp-fab:hover { border-color:var(--accent); }
.sbp-sheet-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:300; display:none; }
.sbp-sheet-backdrop.open { display:block; }
.sbp-sheet { position:fixed; left:0; right:0; bottom:0; max-width:520px; margin:0 auto; background:var(--surface); border:1px solid var(--border); border-radius:20px 20px 0 0; padding:20px 20px calc(20px + env(safe-area-inset-bottom)); z-index:301; transform:translateY(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); }
.sbp-sheet.open { transform:translateY(0); }
.sbp-sheet h3 { font-size:15px; font-weight:800; margin-bottom:4px; }
.sbp-sheet .sub { font-size:12px; color:var(--muted); margin-bottom:16px; }
.sbp-btn { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:13px 16px; margin-bottom:8px; color:var(--text); font-size:14px; font-weight:600; cursor:pointer; }
.sbp-btn:hover { border-color:var(--accent); }
.sbp-btn .ic { font-size:18px; }
.sbp-btn.danger:hover { border-color:var(--red); }
.sbp-btn small { display:block; font-size:11px; font-weight:500; color:var(--muted); margin-top:1px; }

/* 설치 배너 */
.sbp-install { display:none; max-width:720px; margin:12px auto 0; padding:12px 16px; }
.sbp-install.show { display:block; }
.sbp-install-inner { display:flex; align-items:center; gap:12px; background:rgba(var(--accent-rgb),0.10); border:1px solid rgba(var(--accent-rgb),0.3); border-radius:12px; padding:12px 14px; }
.sbp-install-inner .txt { flex:1; font-size:13px; line-height:1.4; }
.sbp-install-inner .txt b { color:var(--accent); }
.sbp-install button { background:var(--accent); color:#fff; border:none; border-radius:8px; padding:8px 14px; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; }
.sbp-install .close { background:none; color:var(--muted); font-size:18px; padding:4px 8px; }

/* 토스트 */
.sbp-toast { position:fixed; left:50%; bottom:80px; transform:translateX(-50%) translateY(20px); background:var(--card); border:1px solid var(--accent); color:var(--text); font-size:13px; font-weight:600; padding:10px 18px; border-radius:24px; z-index:400; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; box-shadow:0 6px 24px rgba(0,0,0,0.4); }
.sbp-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── 레벨 상단 내비 (level2~4; body[data-level]로 스코프) ── */
body[data-level] .topnav { background:#0f0f13; border-bottom:1px solid var(--border); padding:10px 16px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; }
body[data-level] .topnav a { color:var(--muted); font-size:12px; font-weight:600; text-decoration:none; }
body[data-level] .topnav a:hover { color:var(--text); }
body[data-level] .topnav .cur { font-size:11px; font-weight:800; background:rgba(var(--accent-rgb),0.2); color:var(--accent); padding:3px 10px; border-radius:6px; }
body[data-level] .topnav .next, body[data-level] .topnav .prev { color:var(--accent); }

/* ══════════ index: 캠페인 섹션 ══════════ */
/* 왜 지금 몸인가 */
.why-band { max-width:720px; margin:0 auto; padding:8px 16px 4px; }
.why-lead { font-size:14px; line-height:1.8; color:var(--text); background:rgba(108,99,255,0.06); border:1px solid rgba(108,99,255,0.18); border-radius:14px; padding:16px 18px; margin-bottom:14px; }
.why-lead b { color:var(--accent); }
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.why-item { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px 14px; text-align:center; }
.why-item .ic { font-size:24px; }
.why-item .t { font-size:13px; font-weight:800; margin:8px 0 4px; }
.why-item .d { font-size:11px; color:var(--muted); line-height:1.6; }
@media (max-width:560px){ .why-grid{ grid-template-columns:1fr; } .why-item{ text-align:left; display:flex; gap:12px; align-items:center; } .why-item .ic{font-size:22px} .why-item .t{margin:0 0 2px} }

/* 30일 비주얼 */
.day30 { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:18px; margin-bottom:14px; }
.day30 svg { width:100%; height:auto; display:block; }
.day30-cap { font-size:12px; color:var(--muted); line-height:1.7; margin-top:12px; }
.day30-cap b { color:var(--accent); }

/* 신뢰 자료 링크 */
.ref-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ref-card { display:block; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px 16px; text-decoration:none; color:var(--text); transition:border-color .2s, transform .2s; }
.ref-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.ref-card .rt { font-size:13px; font-weight:800; display:flex; align-items:center; gap:6px; }
.ref-card .rt .ext { font-size:11px; color:var(--muted); font-weight:600; }
.ref-card .rd { font-size:11px; color:var(--muted); line-height:1.6; margin-top:4px; }
.ref-card .rk { display:inline-block; font-size:10px; font-weight:700; color:var(--accent); background:rgba(108,99,255,0.12); border-radius:5px; padding:2px 7px; margin-top:8px; }
@media (max-width:560px){ .ref-grid{ grid-template-columns:1fr; } }
.ref-note { font-size:11px; color:var(--muted); margin-top:10px; line-height:1.6; }

/* 이주민 선교 후원 CTA */
.donate { max-width:720px; margin:28px auto 0; padding:0 16px; }
.donate-card { background:linear-gradient(135deg, rgba(108,99,255,0.12), rgba(255,101,132,0.10)); border:1px solid rgba(108,99,255,0.3); border-radius:18px; padding:22px 20px; }
.donate-badge { display:inline-block; font-size:10px; font-weight:800; letter-spacing:1.5px; color:#fff; background:linear-gradient(90deg,var(--accent),var(--pink)); padding:4px 12px; border-radius:20px; margin-bottom:12px; }
.donate-card h3 { font-size:19px; font-weight:900; line-height:1.4; margin-bottom:10px; }
.donate-card p { font-size:13px; color:var(--text); line-height:1.8; }
.donate-card p .hl { color:var(--accent); font-weight:700; }
.donate-mission { display:flex; gap:10px; margin:14px 0; flex-wrap:wrap; }
.donate-mission .m { flex:1; min-width:120px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:10px 12px; }
.donate-mission .m .mt { font-size:12px; font-weight:800; }
.donate-mission .m .md { font-size:11px; color:var(--muted); margin-top:2px; line-height:1.5; }
.donate-actions { display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.donate-box { background:rgba(0,0,0,0.25); border:1px dashed rgba(255,255,255,0.2); border-radius:12px; padding:14px 16px; }
.donate-box .dl { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.donate-box .dv { font-size:14px; font-weight:700; color:var(--text); }
.donate-box .dph { color:var(--muted); font-style:italic; font-weight:500; }
.donate-btn { display:block; width:100%; text-align:center; background:var(--accent); color:#fff; font-size:15px; font-weight:800; padding:14px; border-radius:12px; text-decoration:none; border:none; cursor:pointer; }
.donate-btn:hover { filter:brightness(1.08); }
.donate-note { font-size:11px; color:var(--muted); margin-top:12px; line-height:1.7; text-align:center; }

/* 계좌 복사 버튼 */
.acct-copy { margin-top:10px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); color:var(--text); font-size:12px; font-weight:700; padding:7px 14px; border-radius:8px; cursor:pointer; }
.acct-copy:hover { border-color:var(--accent); color:var(--accent); }

/* ══════════ 최종 보완: 온보딩·퀴즈 ══════════ */
/* 3단계 시작 가이드 */
.start-steps { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:14px; }
.ss { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:20px; padding:6px 14px; font-size:12px; font-weight:700; }
.ss b { color:var(--accent); }
.ss-arrow { color:var(--muted); font-size:12px; }

/* 30초 자가 테스트 */
.quiz-card { background:var(--card); border:1px solid rgba(108,99,255,0.3); border-radius:18px; padding:20px; margin-bottom:24px; }
.quiz-head { font-size:15px; font-weight:900; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }
.quiz-step { font-size:11px; font-weight:700; color:var(--muted); background:rgba(255,255,255,0.06); padding:3px 10px; border-radius:12px; }
.quiz-q { font-size:14px; font-weight:700; line-height:1.6; margin-bottom:14px; }
.quiz-opts { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.quiz-opt { background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:12px; padding:13px 14px; color:var(--text); font-size:13px; font-weight:600; cursor:pointer; text-align:center; transition:border-color .15s, background .15s; }
.quiz-opt:hover { border-color:var(--accent); background:rgba(108,99,255,0.08); }
@media (max-width:480px){ .quiz-opts{ grid-template-columns:1fr; } }
.quiz-result { border-radius:14px; padding:16px; background:rgba(255,255,255,0.03); border:1px solid var(--border); }
.qr-name { font-size:18px; font-weight:900; margin-bottom:6px; }
.quiz-result.q-l1 .qr-name { color:#6c63ff; }
.quiz-result.q-l2 .qr-name { color:#4ade80; }
.quiz-result.q-l3 .qr-name { color:#ff6584; }
.qr-desc { font-size:13px; color:var(--text); line-height:1.7; margin-bottom:14px; }
.qr-actions { display:flex; gap:8px; flex-wrap:wrap; }
.qr-go { flex:1; min-width:150px; text-align:center; background:var(--accent); color:#fff; font-size:14px; font-weight:800; padding:12px 18px; border-radius:10px; text-decoration:none; }
.qr-go:hover { filter:brightness(1.08); }
.qr-retry { background:none; border:1px solid var(--border); color:var(--muted); font-size:13px; font-weight:600; padding:12px 16px; border-radius:10px; cursor:pointer; }
.qr-retry:hover { color:var(--text); border-color:var(--muted); }

/* 추천 레벨 카드 글로우 */
.level-card.rec-glow { border-color:var(--accent) !important; box-shadow:0 0 0 2px rgba(108,99,255,0.35), 0 8px 28px rgba(108,99,255,0.18); }

/* ══════════ 운동 설명 시트 (exercises.js) ══════════ */
.ex-info { margin-left:6px; width:18px; height:18px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); color:var(--muted); font-size:11px; font-weight:800; line-height:1; cursor:pointer; vertical-align:middle; padding:0; }
.ex-info:hover { color:var(--accent); border-color:var(--accent); }
.exm-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:340; display:none; }
.exm-backdrop.open { display:block; }
.exm-sheet { position:fixed; left:0; right:0; bottom:0; max-width:520px; margin:0 auto; background:var(--surface); border:1px solid var(--border); border-radius:20px 20px 0 0; padding:20px 20px calc(24px + env(safe-area-inset-bottom)); z-index:341; transform:translateY(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); max-height:82vh; overflow-y:auto; }
.exm-sheet.open { transform:translateY(0); }
.exm-x { position:absolute; top:12px; right:14px; background:none; border:none; color:var(--muted); font-size:22px; cursor:pointer; padding:4px 8px; }
.exm-fig { background:rgba(var(--accent-rgb),.07); border:1px solid rgba(var(--accent-rgb),.2); border-radius:14px; padding:8px; margin:10px 0 14px; }
.exm-fig svg { width:100%; height:auto; display:block; max-height:190px; }
.exm-fig .fig { stroke:var(--accent); stroke-width:3.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.exm-fig .hd { fill:var(--accent); stroke:none; }
.exm-fig .eq { stroke:var(--muted); stroke-width:2.5; fill:none; stroke-linecap:round; opacity:.7; }
.exm-fig .ar { stroke:var(--green); stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.exm-name { font-size:17px; font-weight:900; padding-right:30px; }
.exm-alias { font-size:12px; color:var(--accent); font-weight:700; margin-top:2px; }
.exm-what { font-size:13px; line-height:1.7; margin-bottom:12px; }
.exm-step { display:flex; gap:8px; font-size:13px; line-height:1.6; padding:4px 0; }
.exm-step .n { width:20px; height:20px; border-radius:6px; background:rgba(var(--accent-rgb),.15); color:var(--accent); font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.exm-tip { font-size:12px; color:var(--muted); background:rgba(255,255,255,.04); border-radius:10px; padding:10px 12px; line-height:1.6; margin-top:10px; }
.exm-tip b { color:var(--green); }

/* ══════════ 보상 시스템 ══════════ */
.sbp-confetti { position:fixed; inset:0; pointer-events:none; z-index:500; overflow:hidden; }
.sbp-confetti i { position:absolute; top:-12px; width:8px; height:8px; display:block; animation:sbpFall 1.4s ease-in forwards; }
@keyframes sbpFall { to { transform:translateY(108vh) rotate(600deg); opacity:.85; } }
.sbp-achieve { position:fixed; inset:0; background:rgba(10,10,16,.82); backdrop-filter:blur(4px); z-index:450; display:flex; align-items:center; justify-content:center; padding:24px; }
.sbp-achieve-card { background:var(--card); border:1px solid rgba(var(--accent-rgb),.4); border-radius:22px; max-width:340px; width:100%; padding:30px 24px 22px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.sa-trophy { font-size:56px; line-height:1; margin-bottom:12px; animation:saPop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes saPop { from { transform:scale(.3); opacity:0; } }
.sa-title { font-size:22px; font-weight:900; margin-bottom:8px; color:var(--accent); }
.sa-sub { font-size:13px; color:var(--text); line-height:1.7; margin-bottom:18px; }
.sa-next { display:block; background:var(--accent); color:#fff; font-weight:800; font-size:14px; padding:13px; border-radius:12px; text-decoration:none; margin-bottom:8px; }
.sa-next:hover { filter:brightness(1.08); }
.sa-close { background:none; border:1px solid var(--border); color:var(--muted); font-size:13px; padding:11px; border-radius:12px; width:100%; cursor:pointer; }
.sa-close:hover { color:var(--text); }
.badge-finish { display:inline-block; font-size:10px; font-weight:800; background:rgba(74,222,128,.15); color:var(--green); border:1px solid rgba(74,222,128,.35); padding:3px 9px; border-radius:5px; margin-left:6px; vertical-align:middle; }