/* 코스모테스트 결과 상세 페이지(유형별 254쪽) 공용 — 낙서 고양이 테마.
   cosmo-home.css 위에 얹는다. 페이지마다 마크업이 4~5계열이라 클래스명을 계열별로 모두 덮는다.
   계열 A(.result-card, 동물 8종) · B(ai-era .container/.hero-emoji/.match-row/.faq-item)
   C(.hero-type/.btn-test/.traits, 대부분) · D(dog·spending .hero-tag/h1/.sub/.body-text/.cta)
   E(personal-color·sleep·worker·weather .back-link/.hero-label/.match-grid/.cta) · 공통 .result-prose-extended */
:root{
  --box:18px 14px 20px 12px/14px 20px 12px 18px;
  --box2:12px 18px 10px 20px/18px 10px 20px 12px;
  --ink2:#4a4742;
  --hair:#d9d3c8;
}
html,body{max-width:100%}
img,svg{max-width:100%}

/* 헤더·푸터 폭을 본문(680)에 맞춘다 */
.cd-wrap{max-width:720px}
.cd-header{padding:14px 0 2px}
.cd-footer{margin-top:36px}
.cd-foot-links a{padding:2px 0}

/* ── 본문 컨테이너 ── */
.wrap,.container{max-width:680px;margin:0 auto;padding:14px 20px 8px}
body>.result-prose-extended{width:calc(100% - 40px);max-width:640px;margin:16px auto}
.adfit-box{max-width:300px;margin:22px auto!important}

/* ── 히어로 (B·C·D·E) ── */
.hero{position:relative;text-align:center;background:#fff;border:1.5px solid var(--line);border-radius:var(--box);padding:24px 18px 22px;margin:14px 0 20px}
.hero-label,.hero-tag,.hero-type:first-child,.eyebrow,.result-tag{display:inline-block;font-family:var(--sans);font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink2);opacity:1;background:#fff;border:1.3px solid var(--line);border-radius:var(--wob);padding:2px 11px;margin:0 0 12px;transform:rotate(-1deg)}
.hero-type:not(:first-child){font-size:12px;letter-spacing:0;text-transform:none;color:var(--muted);margin-top:10px}
.hero-emoji,.result-emoji{display:flex;align-items:center;justify-content:center;width:86px;height:86px;margin:0 auto 12px;font-size:44px;line-height:1;background:#fff0cf;border:1.5px solid var(--line);border-radius:var(--wob);box-shadow:3px 3px 0 rgba(245,165,95,.55);transform:rotate(-3deg)}
.hero-title,.result-title,.hero h1{font-family:var(--hand);font-size:32px;line-height:1.15;font-weight:700;letter-spacing:-.4px;color:var(--ink);margin:2px 0 10px}
.hero-title::after,.result-title::after,.hero h1::after{content:"";display:block;width:70px;height:7px;margin:9px auto 0;border-bottom:2.5px solid var(--beam);border-radius:50%}
.hero-sub,.sub,.result-sub{font-size:14px;line-height:1.7;color:var(--soft);max-width:440px;margin:0 auto 18px}
.hero-sub:last-child,.sub:last-child{margin-bottom:0}
.hero>.btn-test{margin-top:2px}

/* ── 낙서 버튼 (CTA) ── */
.btn-test,.cta-btn,a.cta,.cta a{display:inline-block;font-family:var(--sans);font-size:14px;font-weight:700;line-height:1.4;color:var(--ink);background:var(--beam);border:1.5px solid var(--line);border-radius:var(--wob);padding:10px 22px 11px;text-decoration:none;text-align:center;cursor:pointer;transition:transform .12s;transform:rotate(-.6deg)}
.btn-test:hover,.cta-btn:hover,a.cta:hover,.cta a:hover{transform:rotate(0) translateY(-1px);opacity:1}
.btn-test:active,.cta-btn:active,a.cta:active,.cta a:active{transform:scale(.97)}
.cta-btn,a.cta{display:block;width:100%;margin:18px 0}
div.cta{text-align:center;margin:26px 0 8px}
div.cta a{padding:11px 24px 12px}
div[style*="margin-top:32px"]{margin-top:26px!important}
div[style*="margin-top:32px"] p{font-size:13px!important;color:var(--soft)!important;margin-bottom:12px!important}

/* ── 섹션 카드 ── */
.card,.detail-section,.test-info{background:#fff;border:1.5px solid var(--line);border-radius:var(--box);padding:16px 18px 14px;margin:16px 0;text-align:left}
.card:nth-child(even),.detail-section:nth-of-type(even){border-radius:var(--box2)}
.card h2,.card-title,.detail-section h2,.prose-h,.section-title{font-family:var(--hand);font-size:20px;font-weight:700;line-height:1.25;letter-spacing:-.2px;text-transform:none;color:var(--ink);margin:0 0 8px}
.card p,.body-text,.detail-section p,.prose-p,.faq-a{font-size:13.5px;line-height:1.8;color:var(--soft);margin:0;word-break:keep-all;overflow-wrap:break-word}
.card p+p,.body-text+.body-text,.detail-section p+p{margin-top:9px}
.card strong{color:var(--ink)}
.detail-section{padding-bottom:6px}
.detail-section p{margin-bottom:10px}
.test-info{text-align:center}
.test-info-thumb{display:flex;align-items:center;justify-content:center;width:60px;height:60px;margin:0 auto 8px;font-size:30px;line-height:1;background:#e6f2fb;border:1.3px solid var(--line);border-radius:var(--wob2)}
.test-info-title{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:3px}
.test-info-desc{font-size:12.5px;line-height:1.6;color:var(--muted)}
.section-title{margin:22px 0 8px;font-size:18px}

/* 목록 */
.card ul{list-style:none;margin:10px 0 0}
.card li{position:relative;display:block;font-size:13.5px;line-height:1.65;color:var(--soft);padding:7px 0 7px 22px;border:0;border-bottom:1.2px dashed var(--hair);word-break:keep-all;overflow-wrap:break-word}
.card li:last-child{border-bottom:0;padding-bottom:2px}
.card li::before{content:"✦";position:absolute;left:3px;top:7px;font-size:12px;line-height:1.65;color:var(--beam);margin:0}
.card h2+ul,.card-title+ul{margin-top:2px}

/* 칩 (특징 키워드 · 점수 태그) */
.trait-chips,.score-tags,.score-legend{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
.trait-chip,.score-tag{display:inline-block;font-size:12px;font-weight:500;line-height:1.5;color:var(--ink);background:var(--sun);border:1.2px solid var(--line);border-radius:var(--wob2);padding:2px 10px 3px;margin:4px 4px 4px 0}
.trait-chips .trait-chip,.score-tags .score-tag,.score-legend .score-tag{margin:0}
.trait-chip:nth-of-type(5n+2){background:var(--pink)}
.trait-chip:nth-of-type(5n+3){background:var(--sky)}
.trait-chip:nth-of-type(5n+4){background:var(--lav)}
.trait-chip:nth-of-type(5n+5){background:#d8efb6}
.tag-ax,.tag-ue{background:var(--pink)}
.tag-av,.tag-ee{background:var(--sky)}
.tag-cr{background:var(--sun)}

/* 궁합 박스 */
.match-row,.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.match-box,.match-card{min-width:0;text-align:center;font-size:13px;line-height:1.45;color:var(--ink);background:#eaf5d6;border:1.3px solid var(--line);border-radius:var(--wob);padding:11px 10px 12px}
.match-box:nth-child(2),.match-card:nth-child(2){background:#fde6ec;border-radius:var(--wob2)}
.match-box a{text-decoration:none;color:inherit;display:block}
.match-box a:hover .match-name{text-decoration:underline wavy var(--beam) 1px;text-underline-offset:3px}
.match-label{font-size:11px;letter-spacing:0;text-transform:none;color:var(--ink2);margin:0 0 4px}
.match-name{font-size:13.5px;font-weight:700;color:var(--ink)}
.match-card div[style]{color:var(--ink)!important;font-weight:700}
.match-box,.match-card{word-break:keep-all;overflow-wrap:break-word}

/* FAQ */
.faq-item{margin:0 0 12px;padding-bottom:12px;border-bottom:1.2px dashed var(--hair)}
.faq-item:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.faq-q{font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ink);margin:0 0 4px;line-height:1.5}

/* 같은 테스트, 다른 결과 (A) */
.other-results{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 20px}
.other-results a{display:block!important;background:#fff!important;border:1.3px solid var(--line)!important;border-radius:var(--wob2)!important;color:var(--ink)!important;padding:9px 8px 10px!important;font-size:12.5px!important;line-height:1.4!important;text-decoration:none;text-align:center;word-break:keep-all;transition:transform .12s}
.other-results a:nth-child(odd){border-radius:var(--wob)!important}
.other-results a:hover{transform:translateY(-2px) rotate(-.6deg)}

/* 계열 A: 히어로 카드(.result-card)가 닫히지 않은 채 본문 전체를 품는다 — 껍데기만 투명하게 */
.result-card{background:none;border:0;border-radius:0;padding:14px 0 0;margin:0;text-align:center}
.eyebrow{margin-bottom:12px;color:var(--muted);background:none;border:0;padding:0;transform:none;font-family:var(--hand);font-size:16px;font-weight:700;display:block}
.result-tag{margin-bottom:10px}
.result-sub{margin-bottom:22px}
.result-title{margin-top:0}

/* 계열 E: 뒤로가기 링크 */
.back-link{display:inline-block;font-size:13px;color:var(--soft);text-decoration:none;margin:2px 0 4px}
.back-link:hover{color:var(--ink);text-decoration:underline wavy var(--beam) 1px;text-underline-offset:4px}
.hero div[style*="border-radius:50%"]{border:1.5px solid var(--ink)!important;box-shadow:none!important}
.hero div[style*="text-align:center"]{margin:14px 0 4px!important}

/* ── 상세 해설 블록 ── */
.result-prose-extended{background:rgba(220,207,245,.38);border:1.5px solid var(--line);border-radius:var(--box);padding:18px 18px 16px;margin:20px 0;text-align:left}
.prose-block{margin:0 0 14px}
.prose-block+.prose-block{padding-top:12px;border-top:1.2px dashed #b9b3a8}
.prose-block:last-child{margin-bottom:0}
.prose-h{font-size:19px;margin-bottom:5px}
.prose-p{color:var(--ink2)}
.citation{font-size:11.5px;line-height:1.7;color:var(--muted);text-align:center;padding:12px 0 0;margin-top:14px;border-top:1.2px dashed #b9b3a8}

/* ── 모바일 ── */
@media (max-width:480px){
  .wrap,.container{padding:10px 16px 4px}
  body>.result-prose-extended{width:calc(100% - 32px)}
  .cd-wrap{padding:0 16px}
  .hero{padding:20px 14px 18px}
  .hero-title,.result-title,.hero h1{font-size:27px}
  .hero-emoji,.result-emoji{width:76px;height:76px;font-size:38px}
  .card,.detail-section{padding:14px 14px 12px}
  .result-prose-extended{padding:16px 14px 14px}
  .btn-test{padding:10px 18px 11px}
}
@media (max-width:340px){
  .match-row,.match-grid{grid-template-columns:1fr}
}
.prose-list{margin:4px 0 0;padding-left:18px;font-size:13.5px;line-height:1.8;color:var(--soft)}
.prose-list li{margin:2px 0;word-break:keep-all}
.prose-block a{color:#c46b2c;font-weight:600;text-decoration:none}