/* 공통 엔진 스타일 — 장난감 패키지 박스 디자인.
   테스트마다 test.json의 "theme"으로 색 토큰(--pink 등)만 바꿔 끼울 수 있음.
   Layout: 하늘색 진열장 배경 위 한 장짜리 세로 박스, 화면 하나씩 갈아 끼움 */
:root{
  color-scheme: light;
  --sky:#CFE7F8;        /* 진열장 배경 */
  --stripe:#E9F5FD;     /* 냉장고 유리 줄무늬 */
  --box:#FFFFFF;        /* 박스 창 */
  --pink:#F2508E;       /* 메인 핫핑크 */
  --pink-soft:#FFD6E6;  /* 선반·칩 */
  --pink-deep:#C93272;  /* 버튼 그림자 */
  --violet:#7A4FB8;     /* 로고 그림자 */
  --mint:#3DAE62;       /* 말풍선 테두리 */
  --mint-soft:#E7F7EC;
  --ink:#4B2C4F;        /* 본문 */
  --ink-soft:#8A6E8E;
  --butter:#FFE680;     /* 가격표 포인트 */
  --display:"Jua","Gowun Dodum","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --body:"Gowun Dodum","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
/* 박스 디자인 하나로 고정한 단일 테마 (호스트 테마와 무관하게 동일하게 보임) */
html,body{min-height:100%}
body{
  margin:0;background:var(--sky);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;
  background-image:repeating-linear-gradient(90deg,var(--stripe) 0 56px,transparent 56px 112px);
  padding-inline:16px;padding-block:20px 40px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{word-break:keep-all;overflow-wrap:anywhere;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px}

.box{
  max-width:440px;margin:0 auto;background:var(--box);border-radius:28px;
  border:4px solid var(--pink);box-shadow:0 0 0 6px var(--box),0 10px 0 6px var(--pink-soft),0 20px 40px rgba(122,79,184,.18);
  padding:22px 18px 26px;position:relative;overflow:hidden;
}
.box::before{ /* 박스 창 안쪽 하늘 그라데이션 */
  content:"";position:absolute;inset:0 0 auto 0;height:220px;
  background:linear-gradient(180deg,var(--stripe),transparent);pointer-events:none;
}
.screen{position:relative;display:flex;flex-direction:column;gap:18px}

/* 리본 */
.ribbon{align-self:center;position:relative;display:inline-block;padding:5px 26px 6px;
  background:var(--pink);color:#fff;font-family:var(--display);font-size:17px;letter-spacing:.06em;
  clip-path:polygon(0 0,100% 0,94% 50%,100% 100%,0 100%,6% 50%);
  filter:drop-shadow(0 3px 0 var(--pink-deep));}
.ribbon.mint{background:var(--mint)}

/* 간판 제목 */
.sign{margin:0;text-align:center;background:var(--box);border:4px solid var(--pink-soft);border-radius:22px;
  padding:16px 10px 18px;box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 7px var(--stripe);}
.logo{font-family:var(--display);font-weight:400;color:var(--pink);line-height:1.08;
  -webkit-text-stroke:7px #fff;paint-order:stroke fill;
  text-shadow:0 4px 0 var(--violet),0 0 1px var(--violet);
  text-wrap:balance;}
.sign .l1{display:block;font-size:clamp(30px,9vw,40px)}
.sign .l2{display:block;font-size:clamp(34px,10.5vw,46px)}
.heart{display:inline-block;color:var(--pink);transform:translateY(-2px)}

/* 말풍선 */
.bubble{position:relative;background:#fff;border:3px solid var(--mint);border-radius:22px;padding:12px 16px;
  font-family:var(--display);font-size:18px;color:var(--ink);text-align:center;text-wrap:balance}
.bubble::after{content:"";position:absolute;width:16px;height:16px;background:#fff;border:3px solid var(--mint);
  border-top:0;border-left:0;transform:rotate(45deg);bottom:-10px;left:50%;margin-left:-8px}
.bubble.pink{border-color:var(--pink);color:var(--pink-deep)}
.bubble.pink::after{border-color:var(--pink)}
.bubble.left::after{left:22%}

/* 선반 장식 */
.shelf{display:flex;justify-content:center;gap:10px;padding:10px 0 4px;border-bottom:8px solid var(--pink-soft);border-radius:0 0 6px 6px}
.shelf span{width:34px;height:44px;border-radius:9px 9px 6px 6px;border:3px solid var(--pink);background:#fff;position:relative}
.shelf span::before{content:"";position:absolute;left:5px;right:5px;top:12px;height:12px;border-radius:4px;background:var(--pink-soft)}
.shelf span:nth-child(2){height:52px;border-color:var(--mint)}
.shelf span:nth-child(2)::before{background:var(--mint-soft)}
.shelf span:nth-child(3){height:38px;border-color:var(--violet)}
.shelf span:nth-child(3)::before{background:#EADFF8}
.shelf span:nth-child(4){height:48px}

/* 버튼 */
.btn{appearance:none;border:0;cursor:pointer;border-radius:999px;font-family:var(--display);font-size:21px;
  padding:14px 22px;background:var(--pink);color:#fff;box-shadow:0 6px 0 var(--pink-deep);
  transition:transform .08s,box-shadow .08s;width:100%}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--pink-deep)}
.btn.ghost{background:#fff;color:var(--pink);border:3px solid var(--pink);box-shadow:0 5px 0 var(--pink-soft);font-size:18px;padding:11px 18px}
.btn.ghost:active{box-shadow:0 1px 0 var(--pink-soft)}
.row{display:flex;gap:12px}
.row>*{flex:1;min-width:0}
.note{margin:0;text-align:center;font-size:14px;color:var(--ink-soft)}

/* 광고 자리 (실서비스에선 애드센스 슬롯) */
.ad{border:2px dashed #C9B6D6;border-radius:14px;min-height:90px;display:grid;place-items:center;
  font-size:12px;letter-spacing:.08em;color:#A994B4;background:repeating-linear-gradient(135deg,#FBF8FD 0 10px,#F6F0FA 10px 20px)}

/* 문항 */
.qtop{display:flex;align-items:center;gap:12px}
.back{appearance:none;border:0;background:none;cursor:pointer;font-family:var(--display);font-size:16px;color:var(--ink-soft);padding:6px 4px}
.back[disabled]{visibility:hidden}
.dots{flex:1;display:flex;gap:5px}
.dots i{flex:1;height:10px;border-radius:99px;background:var(--pink-soft);transition:background .2s}
.dots i.on{background:var(--pink)}
.count{font-family:var(--display);font-size:16px;color:var(--pink);font-variant-numeric:tabular-nums;min-width:44px;text-align:right}
.qcard{background:#fff;border:3px solid var(--pink-soft);border-radius:22px;padding:22px 18px;text-align:center}
.qno{font-family:var(--display);color:var(--violet);font-size:15px;letter-spacing:.08em}
.qtext{margin:6px 0 0;font-family:var(--display);font-weight:400;font-size:clamp(22px,6.4vw,26px);line-height:1.3;text-wrap:balance}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{appearance:none;cursor:pointer;text-align:left;display:flex;align-items:center;gap:12px;
  background:#fff;border:3px solid var(--pink-soft);border-radius:18px;padding:13px 14px;font-size:17px;
  transition:border-color .12s,background .12s,transform .12s}
.opt b{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:400;
  background:var(--pink-soft);color:var(--pink-deep);font-size:15px}
.opt:hover{border-color:var(--pink)}
.opt.picked{border-color:var(--pink);background:#FFF0F6;transform:scale(.98)}
.opt.picked b{background:var(--pink);color:#fff}

/* 쉬어가기 */
.thermo{display:flex;align-items:flex-end;justify-content:center;gap:18px;padding:6px 0}
.tube{width:34px;height:150px;border-radius:20px;border:4px solid var(--pink);background:#fff;position:relative;overflow:hidden}
.tube i{position:absolute;left:0;right:0;bottom:0;background:var(--pink);transition:height 1s ease}
.bulb{width:52px;height:52px;border-radius:50%;background:var(--pink);border:4px solid var(--pink-deep);margin:-14px auto 0;position:relative}
.temptext{font-family:var(--display);font-size:26px;color:var(--pink);-webkit-text-stroke:5px #fff;paint-order:stroke fill;text-shadow:0 3px 0 var(--violet)}

/* 로딩 */
.loading{align-items:center;text-align:center;padding:40px 0}
.beats{display:flex;gap:12px;font-size:34px;color:var(--pink)}
.beats span{animation:beat 0.9s ease-in-out infinite}
.beats span:nth-child(2){animation-delay:.15s}
.beats span:nth-child(3){animation-delay:.3s}
@keyframes beat{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-10px) scale(1.15)}}
.loadmsg{font-family:var(--display);font-size:22px;color:var(--ink);min-height:1.5em}

/* 결과 가격표 */
.tagwrap{display:flex;justify-content:center;padding-top:4px}
.tag{position:relative;transform:rotate(-4deg);background:#fff;border:4px solid var(--pink);border-radius:18px 18px 26px 26px;
  width:220px;text-align:center;box-shadow:6px 8px 0 var(--pink-soft);overflow:hidden}
.tag .hd{background:var(--pink);color:#fff;font-family:var(--display);font-size:15px;letter-spacing:.14em;padding:7px 0 6px}
.tag .hole{position:absolute;top:8px;right:12px;width:12px;height:12px;border-radius:50%;background:var(--sky);border:2px solid #fff}
.tag .num{font-family:var(--display);color:var(--pink);font-size:76px;line-height:1;padding:14px 0 2px;font-variant-numeric:tabular-nums;
  -webkit-text-stroke:6px #fff;paint-order:stroke fill;text-shadow:0 4px 0 var(--violet)}
.tag .num small{font-size:38px}
.tag .ft{background:var(--butter);font-family:var(--display);font-size:14px;padding:6px 0;color:var(--ink)}
.rlabel{text-align:center;font-family:var(--display);color:var(--ink-soft);font-size:16px;margin:0}
.rname{margin:0;text-align:center;font-size:clamp(36px,11vw,46px)}
.rsum{margin:0;text-align:center;font-size:17px;text-wrap:balance}
.traits{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
.traits li{background:var(--pink-soft);color:var(--pink-deep);border-radius:999px;padding:7px 14px;font-family:var(--display);font-size:15px}
.tips{display:flex;flex-direction:column;gap:6px}
.tips p{margin:0}
.tiplabel{font-size:13px;letter-spacing:.1em;color:var(--mint)}

/* 비교 */
.cmp{background:#fff;border:3px solid var(--violet);border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:12px}
.cmp h3{margin:0;font-family:var(--display);font-weight:400;font-size:19px;color:var(--violet);text-align:center}
.bar{display:grid;grid-template-columns:52px 1fr 52px;align-items:center;gap:10px;font-family:var(--display)}
.bar .track{height:18px;border-radius:99px;background:#F1EAF8;overflow:hidden}
.bar .fill{height:100%;border-radius:99px;background:var(--pink);transition:width 1s ease}
.bar.friend .fill{background:var(--violet)}
.bar .v{text-align:right;font-variant-numeric:tabular-nums}
.cmp .verdict{margin:0;text-align:center;font-family:var(--display);font-size:20px;color:var(--pink)}

/* 다음 테스트 선반 */
.next h3{margin:0 0 10px;font-family:var(--display);font-weight:400;font-size:19px;text-align:center}
.nextgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-bottom:8px solid var(--pink-soft);padding-bottom:10px}
.nitem{appearance:none;cursor:pointer;background:#fff;border:3px solid var(--pink-soft);border-radius:16px;padding:12px 6px 10px;
  display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--display);font-size:14px;line-height:1.25;text-align:center;min-width:0}
.nitem .ico{font-size:26px}
.nitem em{font-style:normal;font-size:11px;color:var(--ink-soft);font-family:var(--body)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:#fff;
  border-radius:999px;padding:10px 18px;font-size:15px;z-index:5;max-width:calc(100% - 32px);text-align:center}
.sharebox{width:100%;border:2px solid var(--pink-soft);border-radius:12px;padding:10px;font:inherit;font-size:14px;resize:none;color:var(--ink);background:#fff}
.foot{margin:0;text-align:center;font-size:12.5px;color:var(--ink-soft);line-height:1.6}
.foot a{color:var(--ink-soft)}
.devlink{appearance:none;border:0;background:none;cursor:pointer;color:var(--violet);text-decoration:underline;font-size:12.5px;padding:0}

.pop{animation:pop .45s cubic-bezier(.3,1.5,.5,1) both}
@keyframes pop{from{transform:scale(.85);opacity:.4}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* 테스트 고르기로 돌아가기 */
.tohub{align-self:flex-start;font-family:var(--display);font-size:15px;color:var(--ink-soft);text-decoration:none;position:relative;z-index:1}
.tohub:hover{color:var(--pink)}

/* ── 결과 페이지 ── */
a.btn{display:block;text-align:center;text-decoration:none}
.rangeNote{font-size:13px;color:var(--ink-soft);text-align:center;margin:-6px 0 0}

/* ── 문서 페이지(개인정보처리방침·404) ── */
.doc h1{font-family:var(--display);font-weight:400;font-size:26px;margin:0;color:var(--pink)}
.doc h2{font-family:var(--display);font-weight:400;font-size:19px;margin:8px 0 0}
.doc p,.doc li{font-size:15px;max-width:65ch}
.doc a{color:var(--violet)}
.home{align-self:center;font-family:var(--display);color:var(--pink);text-decoration:none;font-size:16px}
.tag .num.range{font-size:44px;padding-top:22px}
.tag .num.range small{font-size:24px}
.langnav{margin:0;font-size:13px;color:var(--ink-soft)}
.langnav a{color:var(--violet)}
.doc .small{font-size:12.5px;color:var(--ink-soft)}