/* 코스모 대화형 테스트 공용 스타일 — cosmo-home.css 위에 얹어 쓴다. 규칙: docs/DESIGN.md */
.cc-wrap{max-width:520px;margin:0 auto;padding:0 16px 40px}
.cc-intro{text-align:center;padding:14px 0 10px}
.cc-intro h1{font-family:var(--hand);font-size:32px;font-weight:700;line-height:1.12;letter-spacing:-.4px}
.cc-intro p{font-size:13px;color:var(--soft);margin-top:6px}
.cc-badge{display:inline-block;margin-top:8px;font-size:11.5px;border:1.2px solid var(--line);border-radius:var(--wob2);padding:1px 9px;background:#fff;color:#4a4742}

/* 무대 */
:root{--cc-accent:#f3a3b5;--cc-accent-32:#fbdde4;--cc-accent-14:#fdf1f4;--cc-accent-60:#f8c8d3}
.cc-stage{position:relative;overflow:hidden;background:#fff;border:1.5px solid var(--line);border-radius:22px 18px 24px 16px/18px 24px 16px 22px;padding:14px 14px 16px;min-height:430px;display:flex;flex-direction:column;margin-top:10px}
.cc-scene{position:absolute;inset:0;pointer-events:none;opacity:.3}
.cc-scene-item{position:absolute;display:block;transform:translateX(-50%);animation:ccFloat 6s ease-in-out infinite alternate}
@keyframes ccFloat{0%{transform:translate(-50%,0) rotate(-4deg)}50%{transform:translate(calc(-50% + 4px),-7px) rotate(2deg)}100%{transform:translate(calc(-50% - 3px),3px) rotate(5deg)}}
.cc-scene-item .icon{width:100%;height:auto;display:block}
.cc-top{position:relative;display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--muted)}
.cc-bar{flex:1;height:7px;border:1.2px solid var(--line);border-radius:var(--wob2);overflow:hidden;background:var(--paper)}
.cc-bar i{display:block;height:100%;width:0;background:var(--cc-accent);transition:width .35s ease}
.cc-talk{position:relative;flex:1;display:flex;flex-direction:column;gap:8px;padding-top:12px}
.cc-meslot{min-height:40px;display:flex;justify-content:flex-end;align-items:flex-start}
.cc-sayslot{flex:1;min-height:118px;display:flex;flex-direction:column;justify-content:flex-end}
.cc-say{word-break:keep-all;overflow-wrap:break-word;text-wrap:balance;align-self:flex-start;max-width:90%;position:relative;background:#fff;border:1.5px solid var(--line);border-radius:var(--wob);padding:9px 13px 10px;font-family:var(--hand);font-size:19px;font-weight:700;line-height:1.35;margin-left:4px}
.cc-say small{display:block;font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted);margin-bottom:1px;letter-spacing:.02em}
.cc-say.pop{animation:cdPop .42s cubic-bezier(.3,1.6,.5,1)}
.cc-say svg{position:absolute;left:30px;bottom:-14px;width:20px;height:15px}
.cc-me{max-width:78%;background:var(--cc-accent-32);border:1.3px solid var(--line);border-radius:16px 18px 5px 18px/18px 14px 7px 18px;padding:6px 11px;font-size:13px;animation:ccSlide .22s ease-out}
@keyframes ccSlide{from{transform:translateX(16px);opacity:0}to{transform:none;opacity:1}}
.cc-catrow{position:relative;height:132px;display:flex;align-items:flex-end;margin-top:12px}
.cc-cat{width:150px;cursor:pointer}
.cc-cat svg[viewBox^="-74"]{width:206px}

/* 선택지 */
.cc-choices{position:relative;display:flex;flex-direction:column;gap:8px;margin-top:10px;min-height:96px}
.cc-choices button{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;font-family:var(--sans);font-size:14px;font-weight:600;line-height:1.4;border:1.5px solid var(--line);border-radius:var(--wob);background:var(--paper);padding:10px 12px;color:var(--ink);transition:transform .12s,background .12s;display:flex;align-items:center;justify-content:center;gap:8px}
.cc-choices button:nth-child(odd){transform:rotate(-.5deg)}.cc-choices button:nth-child(even){transform:rotate(.4deg)}
.cc-choices button:hover{background:var(--cc-accent-14);transform:rotate(0) scale(1.01)}
.cc-choices button:active{transform:scale(.98)}
.cc-choices button.primary{background:var(--beam)}
.cc-choices button[disabled]{opacity:.55;cursor:default}
.cc-choices.likert{gap:5px}
.cc-choices.likert button{padding:7px 10px;font-size:13px}
.cc-chip{width:20px;height:20px;border:1.3px solid var(--line);border-radius:50%;flex:none}

/* 결과 */
#ccResult[hidden]{display:none}
.cc-card{position:relative;background:#fffdf9;border:1.5px solid var(--line);border-radius:22px 18px 24px 16px/18px 24px 16px 22px;padding:20px 18px 16px;margin-top:16px}
.cc-card.reveal-flip{animation:ccFlip .7s ease-out}
.cc-card.reveal-stamp,.cc-card.reveal-drum{animation:ccRise .45s ease-out}
@keyframes ccFlip{0%{transform:perspective(900px) rotateY(80deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes ccRise{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.cc-stamp{position:absolute;right:92px;top:-28px;width:58px;height:58px;background:#fffdf9;display:grid;place-items:center;text-align:center;line-height:1.05;font-family:var(--hand);font-weight:700;font-size:13.5px;color:#c0392b;border:2.2px solid #c0392b;border-radius:52% 48% 50% 46%;transform:rotate(14deg);animation:ccStamp .5s .25s both cubic-bezier(.3,1.6,.5,1)}
@keyframes ccStamp{0%{transform:scale(2.2) rotate(30deg);opacity:0}100%{transform:scale(1) rotate(14deg);opacity:.85}}
.cc-label{font-size:11px;color:var(--muted);letter-spacing:.04em}
.cc-peek{position:absolute;right:10px;top:-34px;width:82px;transform:rotate(6deg)}
.cc-name{font-family:var(--hand);font-size:30px;font-weight:700;line-height:1.15;margin:4px 0 4px}
.cc-name span{background:linear-gradient(transparent 58%,var(--cc-accent-60) 58%,var(--cc-accent-60) 88%,transparent 88%);padding:0 3px}
.cc-tagline{font-family:var(--hand);font-size:16px;color:var(--soft);margin-bottom:6px}
.cc-sub{font-size:13px;color:var(--soft);margin-bottom:12px}
.cc-desc{font-size:13.5px;line-height:1.75;color:#3d3a35;margin:6px 0}
.cc-palette{display:flex;gap:10px;margin:0 0 14px}
.cc-palette i{width:44px;height:44px;border:1.5px solid var(--line);border-radius:52% 48% 50% 46%/48% 52% 46% 54%}
.cc-h{font-family:var(--hand);font-size:17px;font-weight:700;margin:12px 0 4px}
.cc-trait{position:relative;padding:3px 0 3px 16px;font-size:13px;line-height:1.55}
.cc-trait::before{content:'';position:absolute;left:3px;top:10px;width:6px;height:6px;border-radius:50%;background:var(--cc-accent,#f3a3b5);border:1px solid var(--line)}
.cc-fact{display:flex;gap:8px;font-size:13px;line-height:1.55;padding:3px 0;color:#3d3a35}
.cc-fact b{font-family:var(--hand);font-size:15px;min-width:14px}
.cc-match{display:flex;gap:8px;margin-top:14px}
.cc-match>div{flex:1;border:1.2px solid var(--line);border-radius:var(--wob2);padding:8px 10px;background:#fff;font-size:13px;font-weight:600}
.cc-match small{display:block;font-size:11px;font-weight:400;color:var(--muted)}
.cc-gauge{height:12px;border:1.3px solid var(--line);border-radius:var(--wob2);background:var(--paper);overflow:hidden;margin-top:4px}
.cc-gauge i{display:block;height:100%;background:var(--cc-accent,#a9d6f2)}
.cc-gauge-n{font-size:12px;color:var(--muted);margin-top:3px}
.cc-notice{margin-top:14px;font-size:12.5px;line-height:1.65;background:#f3efe6;border:1.2px dashed #b9b3a8;border-radius:var(--wob2);padding:10px 12px;color:#3d3a35}
.cc-watermark{text-align:center;font-family:var(--hand);font-size:13px;color:var(--muted);margin-top:14px}

/* 결과 아래 버튼 */
#ccActions{display:flex;flex-direction:column;gap:8px;margin-top:14px}
#ccActions .cc-share{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
#ccActions button{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;font-family:var(--sans);font-size:12.5px;font-weight:600;border:1.3px solid var(--line);border-radius:var(--wob);background:#fff;padding:8px 6px;color:var(--ink)}
#ccActions .cc-share button{display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;line-height:1.35}
#ccActions .cc-share button:last-child{grid-column:1/-1}
@media(min-width:600px){#ccActions .cc-share{grid-template-columns:repeat(5,minmax(0,1fr))}#ccActions .cc-share button:last-child{grid-column:auto}}
#ccActions button.kakao{background:#FEE500}
#ccActions button.wide{width:100%}
#ccActions button.muted{color:var(--muted)}

/* 관련 테스트 · 해설 · 소개 */
.cc-related-h{font-family:var(--hand);font-size:18px;font-weight:700;margin:6px 0 8px}
.cc-related{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cc-rel,#relatedTests a{display:flex!important;align-items:center;gap:8px;padding:8px 10px!important;background:#fff!important;border:1.3px solid var(--line)!important;border-radius:var(--wob)!important;text-decoration:none;color:var(--ink)!important;font-size:12.5px!important;font-weight:600;line-height:1.3;text-align:left!important}
.cc-rel-ic .icon{width:30px;height:30px;display:block}
.result-prose{background:#fff!important;border:1.3px solid var(--line);border-radius:var(--wob)!important;margin:16px 0!important;padding:16px!important}
.result-prose .ph{font-family:var(--hand);font-size:16px!important;color:var(--ink)!important}
.result-prose .pt,.cmp p{font-size:13px!important;color:#3d3a35!important;line-height:1.75!important}
.result-prose .pcta{background:var(--beam)!important;color:var(--ink)!important;border:1.3px solid var(--line);border-radius:var(--wob)!important}
.tab,.cmp-link{color:#c46b2c!important}
.tmc{background:var(--paper)!important;color:var(--ink)!important;border:1px solid #c9c3b8!important}
.test-static-info{max-width:640px;margin:36px auto 0;padding:0 16px 24px}
.static-inner{background:none!important;border:none!important;border-top:1.5px dashed #c9c3b8!important;border-radius:0!important;padding:14px 0 0!important}
.static-h2{font-family:var(--hand);font-size:19px;font-weight:700;margin-bottom:6px;color:var(--ink)!important}
.static-intro,.static-method,.static-use{font-size:13px;line-height:1.75;color:var(--soft)!important}
.static-h3{font-family:var(--hand);font-size:16px;font-weight:700;margin:14px 0 4px;color:var(--ink)!important;text-transform:none!important;letter-spacing:0!important}
.static-types{list-style:none;display:flex;flex-wrap:wrap;gap:5px}
.static-types li{font-size:12px;padding:3px 9px;border:1px solid #c9c3b8;border-radius:var(--wob2);background:#fff!important;color:var(--soft)!important}
.ad-wrap{max-width:480px;margin:16px auto;text-align:center}
.ad-wrap ins.kakao_ad_area{margin-left:auto;margin-right:auto}

/* 차분한 톤(척도형) */
.cc-stage.calm .cc-say{font-family:var(--sans);font-size:15px;font-weight:600}
.cc-stage.calm .cc-choices button{transform:none}
.cc-scene-item{will-change:transform}
@media (prefers-reduced-motion:reduce){.cc-scene-item,.cc-card,.cc-stamp,.cc-say.pop,.cc-me{animation:none}}

/* 자동생성 테스트 소개 섹션 (템플릿 공용) */
.cc-intro-text p{font-size:13px;line-height:1.8;color:var(--soft);margin-bottom:8px}
.cc-maker{font-size:12.5px;line-height:1.7;color:var(--soft);background:#fff;border:1.2px dashed #c9c3b8;border-radius:var(--wob2);padding:10px 12px;margin:12px 0}
.cc-maker b{display:block;font-family:var(--hand);font-size:15px;color:var(--ink);margin-bottom:2px}
.type-block{background:#fff;border:1.2px solid #d8d2c6;border-radius:var(--wob);padding:12px 14px;margin-bottom:10px}
.type-block h3{font-family:var(--hand);font-size:17px;margin-bottom:4px}
.type-block p{font-size:12.5px;line-height:1.7;color:var(--soft);margin-bottom:6px}
.type-block .type-match{font-size:12px;color:var(--muted)}
.coupang-box summary{cursor:pointer;font-size:12px;color:#c46b2c}
.coupang-box ul{margin:6px 0 4px 16px;font-size:12px;color:var(--soft)}
.coupang-box .disclosure{font-size:10.5px;color:var(--muted)}

.cc-art{display:flex;justify-content:center;margin:2px 0 6px}
.cc-art .cc-result-image{display:block;width:100%;height:auto;object-fit:contain}
.cc-art svg{max-width:100%;height:auto;display:block}

.cc-cta{margin-top:12px;padding:10px 12px;border:1.2px dashed #c9b84a;border-radius:var(--wob2);background:#fffbe6;text-align:center;font-size:12px;color:var(--soft)}
.cc-cta button{all:unset;box-sizing:border-box;display:block;width:100%;margin-top:7px;cursor:pointer;background:#FEE500;color:#262523;border:1.3px solid var(--line);border-radius:var(--wob);padding:8px 0;font-size:13px;font-weight:700}
.test-static-info>h2,.test-static-info .static-h2{font-family:var(--hand);font-size:19px;font-weight:700;color:var(--ink)}
.test-static-info>p,.test-static-info>ul{font-size:13px;line-height:1.75;color:var(--soft)}

/* 결과 해설(renderResultProse) 공용 스타일 — 페이지마다 따로 두지 않는다 */
.result-prose .ps{margin-bottom:16px}
.result-prose .ph{margin:0 0 4px}
.result-prose .pt{margin:0}
.result-prose .pcta{display:block;text-align:center;margin-top:14px;padding:9px 14px;text-decoration:none;font-size:13px;font-weight:600}
.taw{margin-top:14px}
.tab{list-style:none;cursor:pointer;font-size:13px;font-weight:600;padding:8px 0;display:block}
.tab::-webkit-details-marker{display:none}
.tag{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.tmc{display:block;position:relative;padding:10px 8px;text-align:center;font-size:12px;line-height:1.4;text-decoration:none;border-radius:var(--wob2)}
.tmc.tmc-on{border-color:var(--cc-accent)!important;background:var(--cc-accent-14)!important}
.tmc.tmc-bst{border-color:#8fcca6!important;background:#f2fbf5!important}
.tmc.tmc-wst{border-color:#e6a3a3!important;background:#fdf3f3!important}
.tmc-me,.tmc-best,.tmc-worst{position:absolute;top:3px;right:5px;font-size:9px;font-weight:700}
.tmc-me{color:#c46b2c}.tmc-best{color:#3f9d66}.tmc-worst{color:#c25757}
.cmp{margin:12px 0;border:1.2px solid var(--line);border-radius:var(--wob2);padding:10px 14px;background:#fff}
.cmp-best{border-color:#8fcca6;background:#f2fbf5}
.cmp-worst{border-color:#e6a3a3;background:#fdf3f3}
.cmp summary{cursor:pointer;font-weight:700;font-size:13px;list-style:none;padding:2px 0}
.cmp summary::-webkit-details-marker{display:none}
.cmp[open] summary{margin-bottom:8px}
.cmp p{margin:0}
.cmp-link{display:inline-block;margin-top:8px;font-size:12.5px}
.result-prose .rp-section{margin-bottom:14px}
.result-prose .rp-h{font-family:var(--hand);font-size:16px;font-weight:700;color:var(--ink);margin:0 0 4px}
.result-prose .rp-p{font-size:13px;line-height:1.75;color:#3d3a35;margin:0}
.tmc-wrap{margin:12px 0 0}
.tmc-wrap summary{cursor:pointer;font-weight:700;font-size:13px;color:#c46b2c}
.tmc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
.tmc-emoji{display:block;font-size:18px}
.tmc.tmc-me{border-color:var(--cc-accent)!important;background:var(--cc-accent-14)!important}
.result-prose .pcta a{color:inherit;text-decoration:none}
.cc-sub-row{display:grid;grid-template-columns:7.5em 1fr 2.6em;align-items:center;gap:8px;margin:6px 0;font-size:13px}
.cc-sub-row .cc-gauge{margin:0}
.cc-sub-row b{text-align:right;font-weight:700}
.cc-fields{display:flex;flex-wrap:wrap;gap:8px}
.cc-field{flex:1 1 30%;min-width:84px;display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted)}
.cc-field input,.cc-field select{box-sizing:border-box;width:100%;font:600 15px var(--sans);color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:var(--wob2);padding:9px 10px;appearance:none;-webkit-appearance:none}
.cc-field input:focus,.cc-field select:focus{outline:2px solid var(--cc-accent);outline-offset:1px}
.cc-field-msg{min-height:16px;font-size:12px;color:#c25757;text-align:center}
.test-static-info .static-inner p,.test-static-info .static-inner ul{font-size:13px;line-height:1.75;color:var(--soft);margin:0 0 6px}
.test-static-info .static-inner ul{padding-left:18px}
.cc-catalog .type-block ul{font-size:12.5px;line-height:1.65;color:var(--soft);padding-left:18px;margin:2px 0 6px}
.cc-catalog .type-block a{color:#c46b2c;text-decoration:none;font-weight:600}