/* 리포트 v2 (10-08). 로딩 연출, 지금 상태 카드, 영역 밑 해결 사례, 맨 아래 공유 칸, 앱 사전예약 안내, 이모지 만족도, 내려받기 버튼.
   색과 둥글기는 index.html 의 :root 변수를 그대로 쓴다. v1 화면에는 이 파일의 요소가 그려지지 않는다 */

/* index.html 의 display 규칙이 hidden 을 이기지 않게 */
#cta-block>.cta[hidden],.apppromo[hidden],.dlrow[hidden],.fb-v2[hidden],.fb-v2 [hidden]{display:none !important}

/* 로딩 */
.loading{display:grid;gap:18px;justify-items:center;align-content:start;text-align:center;padding:48px 8px 32px;min-height:70vh}
.loading h2{font-size:clamp(22px,3.4vw,28px);margin-bottom:8px}   /* 11-03 제목 아래 26px(gap 18 + 8), 항목과 막대 사이 22px */
.ld-puku img{width:96px;height:96px;border-radius:50%;display:block;background:#fff;
  animation:ld-bob 1.6s ease-in-out infinite}
@keyframes ld-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.ld-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;width:100%;max-width:26em;text-align:left}
.ld-steps li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:16px;line-height:1.5;
  color:var(--muted);transition:color .3s}
.ld-steps li::before{content:'';width:14px;height:14px;margin-top:4px;border-radius:50%;border:2px solid var(--line);box-sizing:border-box}
.ld-steps li[data-state="now"]{color:var(--ink);font-weight:600}
.ld-steps li[data-state="now"]::before{border-color:var(--coral);border-top-color:transparent;animation:ld-spin .8s linear infinite}
.ld-steps li[data-state="done"]{color:var(--ink)}
.ld-steps li[data-state="done"]::before{content:'✓';border:0;width:auto;height:auto;margin-top:0;color:var(--coral);font-weight:700}
.ld-steps li[data-state="todo"]{opacity:.5}
@keyframes ld-spin{to{transform:rotate(360deg)}}
.ld-bar{margin-top:4px;width:100%;max-width:26em;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.ld-bar i{display:block;height:100%;width:0;background:var(--coral);transition-property:width;transition-timing-function:linear}
@media (prefers-reduced-motion:reduce){
  .ld-puku img,.ld-steps li[data-state="now"]::before{animation:none}
}

/* 지금 상태 카드 — 문항 풀이 문단 (10-08 2차, 4차에 지금 상태 카드에만 남김). 제목은 아이콘과 배지 자리 없이 왼쪽 끝에 붙인다 */
.qxcard-h{grid-template-columns:1fr}
.qxp{display:grid;gap:12px}
.qxp-p{font-size:16px;line-height:1.75;color:var(--ink)}
.qxp-p b{background:var(--hl-soft);padding:0 2px;border-radius:3px;font-weight:700}   /* 고객 답과 첫 줄. 판정 문장은 일반 글자(7차, 6차 형광펜 되돌림) */

/* 내려받기용 복제본(화면 밖, app/report-v2.js capture). #report-root 와 같은 간격을 준다. 공유 칸은 복제본에서 지운다 (8차) */
#report-capture{display:grid;gap:clamp(22px,3vh,32px)}
#report-capture>.whycard{margin-top:clamp(4px,1vh,10px)}
#report-capture>*{min-width:0}

/* 해결 사례 — 점수가 붙은 영역 카드 바로 밑 */
.sol-area{display:grid;gap:10px;margin-top:-6px;border:1px solid #F3DDD3;border-top:3px solid var(--coral);
  border-radius:var(--r);padding:18px 20px;background:var(--sol-bg,#FFF5EF)}   /* 7차: 흰 분석 카드와 구분되는 아주 옅은 코랄. 체크박스는 흰 바탕 그대로 */
.sol-area h3{font-size:17px;line-height:1.4}
.sol-intro{font-size:16px;line-height:1.7;color:var(--muted)}
.solchecks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.solchecks li{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;font-size:16px;line-height:1.6}
.solchecks .ck{display:inline-flex;justify-content:center;align-items:center;width:22px;height:22px;margin-top:2px;
  border:1.5px solid var(--ink);border-radius:6px;font-size:13px;font-weight:700;color:var(--coral);background:var(--surface)}

/* 맨 아래 공유 칸 */
.share-bottom[hidden]{display:none !important}

/* 앱 선결제 안내 (10-14: 사전 신청 모달 대신 /app 링크) */
.apppromo{display:grid;gap:16px;justify-items:center;text-align:center;background:var(--ink);border-color:var(--ink)}
.apppromo .puku img{width:88px;height:88px;border-radius:50%;display:block;background:#fff}
.apppromo-t{color:#FFF7F2;font-size:clamp(21px,3.4vw,24px);line-height:1.35;margin-bottom:10px}   /* 6차: 제목답게 본문보다 한 단계 크게. 모바일 21px, 넓은 화면 24px */
.apppromo .lead{color:#E9E5DC;max-width:34em}
/* 8차: 불릿 목록과 혜택 줄. 블록 안에서 최대 폭으로 가운데 놓고 글자는 왼쪽 정렬. 점은 랜딩 .lp-bullets 와 같은 코랄 점 */
.apppromo-body{display:grid;gap:12px;width:100%;max-width:32em;justify-self:center;text-align:left}
.apppromo-list{display:block;margin:0;padding:0;list-style:none;line-height:1.7}
.apppromo-list li{display:inline}
.apppromo-list li+li::before{content:" "}
.apppromo-list li{position:relative;padding-left:0;color:#E9E5DC;font-size:16px;line-height:1.7;word-break:keep-all}

.apppromo-benefit{margin-top:6px;padding:16px 18px;border:2px dashed var(--coral);border-radius:14px;background:#FFF1EA;color:var(--ink);font-weight:800;font-size:17px;line-height:1.55;text-align:center;word-break:keep-all;white-space:pre-line}   /* 어두운 바탕 위 글자만으로는 눈에 안 띄어 쿠폰 모양 상자로 띄운다 */
.apppromo .btn-primary{background:var(--coral);color:#FFF7F2;min-width:12em}
.apppromo .btn-primary:hover{background:var(--paper);color:var(--coral)}
.apppromo .btn-primary{max-width:100%;text-align:center;word-break:keep-all;line-height:1.35}   /* 긴 버튼 문구가 좁은 폭에서 두 줄로 접혀도 가운데 맞춤 */
.apppromo-note{margin-top:-6px;color:#B8B2A5;font-size:13px;line-height:1.5;word-break:keep-all}

/* 이모지 만족도 */
.fb-v2{display:grid;gap:12px}
.fbv2-pick{display:grid;gap:12px}
.fbv2-pick h3{margin-bottom:8px}
.fbemoji{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.fbemoji .opt{display:grid;justify-items:center;justify-content:center;gap:4px;padding:12px 2px;text-align:center}   /* 기본 .opt 의 space-between 이 grid 칸을 왼쪽으로 몰아서 가운데로 되돌린다 */
.fbemoji .em{font-size:28px;line-height:1}
.fbemoji .lb{font-size:11px;color:var(--muted);line-height:1.3;word-break:keep-all}
.fbemoji .opt:disabled{cursor:default}
.fbemoji .opt:disabled:not([aria-pressed="true"]){opacity:.45}
.fbv2-comment{display:grid;gap:10px}
.fbv2-thanks{font-size:16px;font-weight:600;line-height:1.6}
.fbv2-thanks .em{font-size:22px}
.fbv2-comment input{width:100%}

/* 내려받기 — 공유 링크 칸 */
.dlrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dlrow .btn{width:100%}


/* ───────── 10-22 개편 ─────────
   1. 습관 5가지 CTA 카드: 위 자리(결과 공유 다음)와 아래 자리(만족도 다음, 결과 공유 앞)
   2. 앱 전환 안내 /app/start: 세 단계와 안드로이드 베타 테스터 신청
   3. PDF, 이미지 결과물 머리(로고)와 꼬리(QR, 짧은 링크) */
.habitcta[hidden],.bsum[hidden],.bget[hidden],.beta [hidden],.beta[hidden],.store1[hidden]{display:none !important}
.habitcta{display:grid;gap:16px;border:2px solid var(--ink);box-shadow:var(--shadow);padding:22px 20px}
.habitcta .hc-head{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center}
.habitcta .hc-puku{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:#fff;object-fit:contain}
.habitcta h3{font-size:20px;margin-top:2px;word-break:keep-all}
.habitcta .btn{font-size:16px;padding:16px 20px;text-align:center;word-break:keep-all}
.hlist{margin:0;padding:0;list-style:none;display:grid;gap:0;counter-reset:h;border-top:1px solid var(--line)}
.hlist li{counter-increment:h;display:grid;grid-template-columns:22px 1fr;column-gap:10px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)}
.hlist li::before{content:counter(h);grid-row:1/3;font-size:12px;font-weight:800;color:var(--muted)}
.hlist .hl-a{font-size:12px;color:var(--muted);line-height:1.4}
.hlist b{font-size:15.5px;line-height:1.45;word-break:keep-all}
.hc-drug{display:grid;gap:6px;padding:14px 16px;border-radius:12px;background:#FFF5EF;border:1px solid #F3DDD3;border-left:3px solid var(--coral,#E86A4A)}
.hc-drug b{font-size:15px;line-height:1.4;word-break:keep-all}
.hc-drug ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14px;line-height:1.6;color:var(--ink);word-break:keep-all}
.hc-drug p{margin:0;font-size:14px;line-height:1.6;color:var(--ink);word-break:keep-all}

.bridge{max-width:560px;margin:0 auto;display:grid;gap:18px;padding:0 0 60px}
.bridge h1{font-size:clamp(26px,7vw,34px);line-height:1.3;word-break:keep-all}
.bridge .mark{background:linear-gradient(transparent 58%,var(--hl) 58%);padding:0 2px}
.bsum{display:grid;gap:10px;padding:18px}
.bsteps{margin:0;padding:0;list-style:none;display:grid;gap:12px;counter-reset:s}
.bsteps>li{counter-increment:s;position:relative;display:grid;gap:10px;padding:16px 16px 16px 54px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.bsteps>li::before{content:counter(s);position:absolute;left:16px;top:16px;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:13px;font-weight:800}
.bsteps>li>b{font-size:16px;line-height:1.5;word-break:keep-all}
.bsteps>li>.store1{display:flex;align-items:center;justify-content:center;gap:8px;margin-left:-38px;width:calc(100% + 38px);white-space:nowrap;padding:14px 12px}
.store1 svg{width:20px;height:20px;flex:none}
.bget{display:grid;gap:10px;margin-left:-38px;padding:14px;border-radius:14px;background:var(--paper);border:1px solid var(--line)}
.bget input{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font:inherit;font-size:14px;color:var(--muted);background:var(--surface)}
.bget .sharerow,.bget .sharerow .btn{width:100%}
.bget #bridge-code{font-size:20px;font-weight:700;letter-spacing:.18em;text-align:center;color:var(--ink)}
.bget #bridge-code::placeholder{font-size:14px;font-weight:400;letter-spacing:0}
.bget .dlrow{grid-template-columns:1fr 1fr;gap:8px}
.bget .dlrow .btn{padding:12px 8px}
.beta{display:grid;gap:10px;margin-left:-38px;padding:14px;border-radius:14px;background:var(--paper);border:1px solid var(--line)}
.beta-t{font-size:15.5px}
.beta .field input{width:100%}
.beta-ck{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.5;cursor:pointer}
.beta-ck input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--coral)}
.beta .fine{font-size:12.5px;line-height:1.6}
.beta-done{font-size:15px;font-weight:600;line-height:1.6;word-break:keep-all}

/* 결과물(화면 밖 복제본에만 붙는다) */
.exhead img{display:block;height:40px;width:auto}
.exqr{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:16px;border:2px solid var(--ink);border-radius:var(--r);background:var(--surface)}
.exqr .qr{display:block;width:104px;height:104px;border:1px solid var(--line);border-radius:6px}
.exqr div{display:grid;gap:6px;min-width:0}
.exqr b{font-size:15px;line-height:1.4;word-break:keep-all}
.exlink{font-size:14px;font-weight:700;line-height:1.4;color:var(--coral);overflow-wrap:anywhere}
/* 좁은 화면(320)에서도 주소가 co/ 뒤에서만 한 번 꺾이게 QR 과 글자를 줄인다. 그래도 넘치면 아무 데서나 꺾어 잘리지 않게 한다 */
@media (max-width:360px){.exqr{gap:10px;padding:14px}.exqr .qr{width:88px;height:88px}.exlink{font-size:13px}}
/* 11-03 공유 칸: 링크 복사(왼쪽)와 PDF 받기(CTA, 오른쪽)를 한 줄에 나란히. PDF 줄이 보일 때만 */
.share:has(> .dlrow:not([hidden])){display:grid;grid-template-columns:1fr 1fr;column-gap:10px}
.share:has(> .dlrow:not([hidden]))>*{grid-column:1/-1}
.share:has(> .dlrow:not([hidden]))>.dlrow{grid-column:2;grid-row:4;grid-template-columns:1fr;margin:0}
.share:has(> .dlrow:not([hidden]))>.sharerow{grid-column:1;grid-row:4;margin:0}
/* 11-03 순위 목록에서 영역 카드로 내려갈 때 고정 헤더에 가리지 않게 */
.sec[id^="s-"]{scroll-margin-top:96px}