/* ============================================================
   뷰피크 피부 MBTI — 프로토타입 v2 (디자인 리뉴얼)
   흐름 7단계·문구·채점은 v1과 동일. 비주얼만 뷰피크 톤으로 교체.
   문항·결과는 하단 <script id="mbti-data"> JSON → 관리자 값으로 치환 가능.
   ============================================================ */
:root{
  --pink:#FF709A; --pink-deep:#F0507F; --pink-wash:#FFF1F5; --pink-line:#FFD3E0;
  --lav:#B9A6FF; --ink:#1C1C1E; --body:#3A3D44; --sub:#8B8F98; --line:#E8EAEF; --raise:#F6F7F9; --bg:#FAFAFB; --card:#FFFFFF;
  --r:16px; --shadow:0 1px 2px rgba(20,22,30,.04), 0 10px 30px rgba(20,22,30,.06);
  --f:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{font-family:var(--f);font-size:16px;line-height:1.5;color:var(--ink);background:linear-gradient(160deg,#FFF4F7 0%,#FAFAFB 45%,#F4F2FF 100%) fixed;-webkit-font-smoothing:antialiased;}
button{font-family:inherit;background:transparent;border:0;cursor:pointer;color:inherit;font-size:inherit;}
input{font-family:inherit;font-size:inherit;border:0;outline:0;-webkit-appearance:none;appearance:none;border-radius:0;color:var(--ink);}
a{color:inherit;text-decoration:none;}

/* ---------- 앱 프레임 ---------- */
.app{max-width:480px;margin:0 auto;height:100dvh;background:var(--card);position:relative;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.app::-webkit-scrollbar{display:none;}
@media (min-width:768px){ .app{height:calc(100dvh - 48px);margin:24px auto;border-radius:28px;box-shadow:0 20px 60px rgba(20,22,30,.10);} }
.top{height:56px;flex:0 0 56px;display:flex;align-items:center;justify-content:space-between;padding:0 8px;position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);z-index:5;}
.top .brand{font-weight:800;font-size:15px;letter-spacing:.14em;color:var(--pink);}
.top button{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--ink);}
.top button:hover{background:var(--raise);}
.top button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.top .back{visibility:hidden;}
.app.can-back .top .back{visibility:visible;}
.prog{height:3px;flex:0 0 3px;background:var(--line);position:sticky;top:56px;z-index:5;display:none;}
.prog i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--pink),var(--lav));border-radius:0 3px 3px 0;transition:width .25s ease;}
.app.in-q .prog{display:block;}
main{flex:1 0 auto;display:flex;flex-direction:column;padding:8px 20px 16px;}
main > form{flex:1;display:flex;flex-direction:column;min-height:0;}
.step{display:none;animation:up .22s ease;}
.step.on{display:block;}
@keyframes up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.step.on.from-dark{animation:up .36s ease .06s both;}

h1{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.3;}
h2{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.4;word-break:keep-all;text-wrap:balance;}
.sub{font-size:14px;color:var(--sub);margin-top:8px;}

/* ---------- 액션바 ---------- */
.bar{position:sticky;bottom:0;z-index:6;flex:0 0 auto;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to top,rgba(255,255,255,1) 75%,rgba(255,255,255,0));display:flex;gap:10px;}
.btn{height:54px;border-radius:14px;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;transition:transform .08s,background .15s,box-shadow .15s;}
.btn:active{transform:scale(.985);}
.btn.pri{flex:2;background:linear-gradient(135deg,#FF7EA8,var(--pink) 55%,var(--pink-deep));color:#fff;box-shadow:0 2px 6px rgba(255,112,154,.14);}
.btn.pri:hover{box-shadow:0 4px 10px rgba(255,112,154,.20);}
.btn.pri[disabled]{background:var(--line);color:#B5B9C2;box-shadow:none;cursor:not-allowed;}
.btn.sec{flex:1;background:#fff;color:var(--ink);border:1.5px solid var(--line);}
.btn.sec:hover{background:var(--raise);}
.btn.full{width:100%;}
.bar[hidden]{display:none;}

/* ---------- 01 시작 ---------- */


/* ---------- 01 시작 (다크 · 폰 목업 · 하단 페이드) — 목업 G-2 그대로 ---------- */
@media (max-width:767px){ html, body{background:#fff;} .app{max-width:none;} html.dark-bg, html.dark-bg body{background:#111214;} }
.app{transition:background-color .32s ease,color .32s ease;}
.top{transition:background-color .32s ease;}
.bar{transition:background .32s ease;}
@media (max-width:767px){ html, body{transition:background-color .32s ease;} }
.app.dark{background:#111214;color:#fff;}
.app.dark .top{background:rgba(17,18,20,.92);}
.app.dark .top button{color:#fff;}
.app.dark .bar{background:linear-gradient(to top,#111214 75%,rgba(17,18,20,0));}
._01.on{display:flex;flex-direction:column;flex:1;padding-top:10px;min-height:0;}
._01 h1{font-size:26px;font-weight:800;letter-spacing:-.025em;line-height:1.28;text-align:center;color:#fff;}
._01 .lead{text-align:center;color:#D0D3D9;font-size:14.5px;margin-top:10px;line-height:1.6;}
._01 .stage{position:relative;flex:1;min-height:0;container-type:size;margin:26px -20px 0;overflow:hidden;}
._01 .stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(to top,#111214 0%,#111214 18%,rgba(17,18,20,0) 100%);z-index:5;pointer-events:none;}
._01 .glow{position:absolute;left:50%;top:55%;width:120cqw;height:70cqh;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,112,154,.28),rgba(185,166,255,.10) 55%,transparent 75%);filter:blur(12px);pointer-events:none;}
._01 .meta{display:flex;justify-content:center;gap:8px;margin:0;position:relative;z-index:6;}
._01 .meta span{font-size:13.5px;font-weight:700;color:#FFFFFF;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.26);padding:8px 14px;border-radius:999px;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 24px rgba(0,0,0,.35);}
/* 미니 폰 (베젤 없음) */
.phone{position:absolute;z-index:1;aspect-ratio:190/412;background:transparent;padding:0;border-radius:9cqw;container-type:inline-size;box-shadow:0 34px 60px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.14);}
.scr{width:100%;height:100%;background:#fff;border-radius:9cqw;overflow:hidden;position:relative;font-size:4.2cqw;color:var(--ink);word-break:keep-all;}
.mtop{height:4.6em;display:flex;align-items:center;justify-content:space-between;padding:2.2em 1.25em 0} .mtop b{font-size:.875em;letter-spacing:.14em;color:var(--pink);font-weight:800} .mtop i{width:1.25em;height:1.25em;border-radius:.375em}
.mprog{height:.25em;background:var(--line);margin-top:.75em} .mprog i{display:block;height:100%;background:linear-gradient(90deg,var(--pink),var(--lav))}
.mq{padding:1.75em 1.5em 0} .mq span{font-size:.875em;font-weight:800;color:var(--pink)} .mq em{font-style:normal;color:var(--sub);font-weight:600}
.mq p{font-size:1.25em;font-weight:700;line-height:1.4;margin-top:.6em;letter-spacing:-.02em;word-break:keep-all}
.mopts{padding:1.5em 1.5em 0;display:flex;flex-direction:column;gap:.625em} .mopts div{height:3.25em;border:1px solid var(--line);border-radius:.875em;display:flex;align-items:center;padding:0 1.125em;font-size:1em;font-weight:500;color:var(--body);position:relative}
.mopts div::after{content:"";position:absolute;right:1em;top:50%;width:1.125em;height:1.125em;border-radius:50%;border:1px solid #CFD3DB;transform:translateY(-50%)}
.mopts div.on{border-color:var(--pink);background:var(--pink-wash);color:var(--ink);font-weight:700} .mopts div.on::after{background:var(--pink);border-color:var(--pink);box-shadow:inset 0 0 0 .25em #fff}
.mbar{position:absolute;left:0;right:0;bottom:0;padding:1em 1.25em 1.5em;display:flex;gap:.625em;background:linear-gradient(to top,#fff 70%,transparent)} .mbar span{flex:1;height:2.75em;border-radius:.875em;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:.95em;font-weight:700;color:var(--ink)} .mbar span.p{flex:2;border:0;color:#fff;background:linear-gradient(135deg,#FF7EA8,var(--pink) 55%,var(--pink-deep))}
.mres{padding:1.25em 1.25em 0} .mres small{display:block;text-align:center;font-size:1em;font-weight:800}
.mhero{margin-top:.75em;border-radius:1.5em;background:linear-gradient(160deg,#FFF0F5,#FFE1EA);padding:2em 1em 1.5em;text-align:center} .mhero b{font-size:3.75em;font-weight:900;letter-spacing:-.03em;color:var(--pink-deep);line-height:1}
.mhero div{display:flex;justify-content:center;gap:.5em;margin-top:1em} .mhero span{font-size:.875em;font-weight:800;background:#fff;border-radius:999px;padding:.5em .875em} .mhero span:first-child{color:var(--pink-deep)}
.mcard{margin-top:.75em;border:1px solid var(--line);border-radius:1.25em;padding:1.125em;display:flex;flex-direction:column;gap:.625em} .mcard i{display:block;height:.75em;border-radius:.375em;background:var(--raise)} .mcard span{display:block;height:2.5em;border-radius:.75em;background:linear-gradient(135deg,#FF7EA8,var(--pink) 55%,var(--pink-deep));margin-top:.375em}


/* 다크에선 폰 테두리를 밝게 */


.mtop{height:4.25em;padding-top:1.5em;}
._01 .phone.back{height:112cqh;left:8%;top:7cqh;transform:rotate(-7deg);transform-origin:50% 0;opacity:.72;filter:blur(1.6px) brightness(.82);}
._01 .phone.front{height:112cqh;right:8%;top:15cqh;transform:rotate(7deg);transform-origin:50% 0;}

/* ---------- 02 정보 ---------- */
.fld{margin-top:18px;}
._02 h2{margin-bottom:6px;}
.fld label.l{display:block;font-size:13px;font-weight:600;color:var(--body);margin-bottom:8px;}
input.in{height:52px;width:100%;border:1.5px solid var(--line);border-radius:12px;padding:0 16px;background:#fff;font-size:16px;transition:border-color .15s,box-shadow .15s;}
input.in::placeholder{color:#B5B9C2;}
input.in:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,112,154,.15);}
input.in.err{border-color:#E5484D;}
.msg{display:none;font-size:12.5px;color:#E5484D;margin-top:6px;}
.msg.on{display:block;}
.seg{display:flex;background:var(--raise);border-radius:12px;padding:4px;gap:4px;}
.seg label{flex:1;position:relative;}
.seg input{position:absolute;opacity:0;inset:0;cursor:pointer;}
.seg span{display:flex;align-items:center;justify-content:center;height:44px;border-radius:9px;font-weight:600;color:var(--sub);transition:all .15s;cursor:pointer;}
.seg input:checked+span{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(20,22,30,.10);}
.row2{display:flex;gap:10px;}
.sel{flex:1;height:52px;border:1.5px solid var(--line);border-radius:12px;padding:0 14px 0 16px;background:#fff;display:flex;align-items:center;justify-content:space-between;font-size:16px;color:#B5B9C2;cursor:pointer;transition:border-color .15s;}
.sel.has{color:var(--ink);font-weight:600;}
.sel:hover{border-color:#CFD3DB;}
.sel svg{width:18px;height:18px;stroke:#9AA0AA;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}
.agree{cursor:pointer;margin-top:22px;display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--raise);border-radius:12px;}
.ck{position:relative;width:22px;height:22px;flex:0 0 auto;}
.ck input{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:1;margin:0;}
.ck i{pointer-events:none;position:absolute;inset:0;border-radius:7px;border:1.5px solid #CFD3DB;background:#fff;transition:all .15s;}
.ck input:checked+i{background:var(--pink);border-color:var(--pink);}
.ck input:checked+i::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);}
.agree .t{flex:1;font-size:14px;font-weight:500;}
.agree a{font-size:13px;color:var(--pink);font-weight:600;white-space:nowrap;}

/* ---------- 03 문항 ---------- */
.q,.pre,.last{padding-top:14px;}
.qhead{display:flex;align-items:baseline;gap:4px;margin-bottom:12px;}
.qhead .qn{font-size:13px;font-weight:800;color:var(--pink);letter-spacing:.04em;}
.qhead .qt{font-size:12.5px;color:var(--sub);font-weight:600;}
.opts{margin-top:22px;display:flex;flex-direction:column;gap:10px;}
.opt{position:relative;display:flex;align-items:center;gap:12px;min-height:58px;padding:14px 16px;border:1.5px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;transition:all .15s;}
.opt:hover{border-color:#CFD3DB;background:#FDFDFE;}
.opt input{position:absolute;inset:0;opacity:0;cursor:pointer;}
.opt .t{flex:1;font-size:15.5px;font-weight:500;color:var(--body);line-height:1.4;word-break:keep-all;}
.opt .r{width:22px;height:22px;border-radius:50%;border:1.5px solid #CFD3DB;flex:0 0 auto;position:relative;transition:all .15s;}
.opt.box .r{border-radius:7px;}
.opt input:checked~.r{border-color:var(--pink);background:var(--pink);}
.opt input:checked~.r::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);}
.opt.box input:checked~.r::after{width:5px;height:10px;border-radius:0;background:transparent;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:translate(-50%,-60%) rotate(45deg);}
.opt:has(input:checked){border-color:var(--pink);background:var(--pink-wash);box-shadow:0 0 0 3px rgba(255,112,154,.12);}
.opt:has(input:checked) .t{color:var(--ink);font-weight:600;}
.opt.free{padding:0;}
.opt.free input.txt{position:static;opacity:1;height:58px;width:100%;padding:0 16px;background:transparent;font-size:15.5px;}
.opt.free input.txt::placeholder{color:#B5B9C2;}
.opt.free:has(input.txt:not(:placeholder-shown)){border-color:var(--pink);background:var(--pink-wash);}

/* ---------- 04 로딩 ---------- */
._04{text-align:center;padding-top:120px;}
.spin{width:52px;height:52px;border-radius:50%;border:4px solid var(--pink-line);border-top-color:var(--pink);margin:0 auto 22px;animation:sp .9s linear infinite;}
@keyframes sp{to{transform:rotate(360deg)}}
._04 h2{font-size:19px;}
._04 .sub{margin-top:6px;}

/* ---------- 05 결과 ---------- */
._05{padding-top:10px;}
._05 .eyebrow{text-align:center;font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-bottom:12px;}
.hero-r{position:relative;border-radius:24px;padding:40px 24px 36px;text-align:center;overflow:hidden;}
.hero-r.D{background:linear-gradient(160deg,#FFF0F5 0%,#FFE1EA 100%);}
.hero-r.O{background:linear-gradient(160deg,#F3EFFF 0%,#E6DEFF 100%);}
.hero-r .tags{display:flex;justify-content:center;gap:8px;margin-top:16px;}
.hero-r .tags span{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;background:#fff;font-size:15px;font-weight:800;letter-spacing:-.01em;box-shadow:0 2px 8px rgba(20,22,30,.06);color:var(--ink);}
.hero-r.D .tags .hash{color:var(--pink-deep);} .hero-r.O .tags .hash{color:#7C5CD6;}
.hero-r .big{display:block;font-size:72px;font-weight:900;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;}
.hero-r.D .big{color:var(--pink-deep);} .hero-r.O .big{color:#7C5CD6;}
.hero-r .deco{position:absolute;width:180px;height:180px;border-radius:50%;filter:blur(40px);opacity:.55;pointer-events:none;}
.hero-r.D .deco{background:#FFB6CB;} .hero-r.O .deco{background:#C9B8FF;}
.hero-r .deco.a{left:-60px;top:-60px;} .hero-r .deco.b{right:-70px;bottom:-80px;}
.panel-r{margin-top:12px;background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:6px 18px;}
.panel-r h3{font-size:13px;font-weight:700;color:var(--sub);letter-spacing:.02em;padding:14px 0 4px;}
.ax{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);}
.ax:first-of-type{border-top:0;}
.ax .lbl{width:46px;font-size:12.5px;font-weight:600;color:var(--sub);flex:0 0 auto;}
.ax .pair{flex:1;display:flex;gap:6px;}
.ax .pair span{flex:1;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:4px;font-size:13.5px;line-height:1;font-weight:600;color:#A0A4AD;background:var(--raise);border:1.5px solid transparent;}
.ax .pair span b{font-size:13.5px;line-height:1;font-weight:800;opacity:.6;font-family:inherit;}
.ax .pair span.on{background:var(--pink-wash);color:var(--pink-deep);border-color:var(--pink-line);font-weight:800;}
.ax .pair span.on b{opacity:1;}
.hero-r.O ~ .panel-r .ax .pair span.on{background:#F3EFFF;color:#7C5CD6;border-color:#DCD2FF;}
.desc-r{margin-top:12px;background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:18px 20px 20px;}
.desc-r h3{font-size:13px;font-weight:700;color:var(--sub);margin-bottom:10px;}
.desc-r p{font-size:15.5px;line-height:1.75;color:var(--body);word-break:keep-all;}
.desc-r p strong{font-weight:800;color:var(--ink);}
.note{margin-top:12px;display:flex;gap:10px;padding:14px 16px;background:var(--raise);border-radius:14px;font-size:13px;color:var(--sub);line-height:1.6;word-break:keep-all;}
.note svg{width:18px;height:18px;flex:0 0 auto;stroke:var(--sub);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px;}
._05 .acts{margin-top:18px;display:flex;flex-direction:column;gap:10px;align-items:center;}
._05 .acts .txt{font-size:14px;font-weight:600;color:var(--sub);text-decoration:underline;text-underline-offset:3px;padding:8px;}
.cta-card{margin-top:12px;border-radius:18px;padding:24px 20px 18px;background:#fff;border:1.5px solid var(--line);text-align:center;}
.cta-card .k{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--sub);background:var(--raise);padding:5px 10px;border-radius:999px;}
.cta-card h3{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.35;color:var(--ink);}
.cta-card p{font-size:14px;color:var(--body);line-height:1.6;margin-top:8px;text-wrap:balance;word-break:keep-all;}
.cta-card .btn{margin-top:16px;height:54px;gap:8px;}
.cta-card .btn.home{margin-top:10px;flex:none;width:100%;}
.cta-card .btn svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.btn.kakao{background:#FEE500;color:#191919;gap:8px;box-shadow:0 2px 6px rgba(254,229,0,.25);}
.btn.kakao:hover{background:#F5DC00;}
.cta-card .btn.kakao svg{stroke:none;fill:#191919;width:22px;height:22px;}
._05 .acts .btn_share{gap:8px;}
._05 .acts .btn_share svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
._05 .acts .btn{flex:none;width:100%;height:54px;}

/* ---------- 시트 / 팝업 / 토스트 ---------- */
.sheet{position:fixed;inset:0;z-index:20;display:none;align-items:flex-end;justify-content:center;background:rgba(20,22,30,.45);}
.sheet.on{display:flex;}
.sheet .panel{width:100%;max-width:480px;background:#fff;border-radius:22px 22px 0 0;padding:14px 20px calc(20px + env(safe-area-inset-bottom));max-height:72vh;display:flex;flex-direction:column;animation:up .2s ease;}
.sheet .hd{display:flex;align-items:center;justify-content:space-between;padding:6px 0 12px;}
.sheet .hd b{font-size:17px;font-weight:700;}
.sheet .hd button{font-size:14px;color:var(--sub);font-weight:600;}
.sheet ul{list-style:none;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch;}
.sheet li{padding:14px 12px;border-radius:10px;font-size:16px;font-weight:500;color:var(--body);cursor:pointer;}
.sheet li:hover{background:var(--raise);}
.sheet li.on{background:var(--pink-wash);color:var(--pink-deep);font-weight:700;}
.pop{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;background:rgba(20,22,30,.45);padding:24px;}
.pop.on{display:flex;}
.pop .panel{width:100%;max-width:360px;background:#fff;border-radius:22px;padding:30px 24px 22px;text-align:center;animation:up .2s ease;}
.pop .panel .ic{width:56px;height:56px;border-radius:50%;background:var(--pink-wash);color:var(--pink);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:26px;font-weight:800;}
.pop .panel p{font-size:16px;font-weight:600;line-height:1.5;word-break:keep-all;color:var(--ink);}
.pop .panel .btn{margin-top:20px;width:100%;}
.pop .panel.doc{text-align:left;max-width:440px;max-height:84vh;overflow:auto;padding:0;display:flex;flex-direction:column;}
.pop .panel.doc,.sheet ul{scrollbar-width:none;-ms-overflow-style:none;}
.pop .panel.doc::-webkit-scrollbar,.sheet ul::-webkit-scrollbar{display:none;}
.pop .panel.doc .dh{padding:26px 24px 6px;}
.pop .panel.doc h3{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:0;}
.pop .panel.doc .ds{font-size:13.5px;color:var(--sub);line-height:1.65;margin-top:8px;}
.pop .panel.doc section{padding:18px 24px 0;}
.pop .panel.doc h4{font-size:15px;font-weight:800;color:var(--ink);margin:0 0 8px;letter-spacing:-.01em;}
.pop .panel.doc p{font-size:14px;font-weight:400;color:var(--body);line-height:1.75;margin:0 0 6px;}
.pop .panel.doc ul{list-style:none;padding:0;margin:0 0 6px;}
.pop .panel.doc li{position:relative;padding-left:12px;font-size:14px;color:var(--body);line-height:1.75;margin:2px 0;}
.pop .panel.doc li::before{content:"";position:absolute;left:0;top:.78em;width:4px;height:4px;border-radius:50%;background:#B5B9C2;}
.pop .panel.doc a{color:var(--pink-deep);text-decoration:underline;}
.pop .panel.doc .eff{margin-top:10px;font-size:12.5px;color:var(--sub);}
.pop .panel.doc .lab{font-size:13px;font-weight:700;color:var(--ink);margin:6px 0 2px;}
.pop .panel.doc li small{color:var(--sub);font-size:12.5px;}
.pop .panel.doc .dfoot{position:sticky;bottom:0;padding:14px 24px 18px;background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));margin-top:14px;}
.pop .panel.doc .dfoot .btn{margin:0;}
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(8px);z-index:40;background:rgba(28,28,30,.92);color:#fff;font-size:14px;font-weight:600;padding:12px 18px;border-radius:999px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;}
.toast.on{opacity:1;transform:translateX(-50%);}
.foot{display:none;text-align:center;font-size:11.5px;color:#B5B9C2;padding:18px 0 4px;}
.app.show-foot .foot{display:block;}

/* ---------- 검토용 도구 (프로토타입 전용 — 운영 반영 시 #devbar 블록과 하단 JS 삭제) ---------- */
#devbar{position:fixed;left:12px;bottom:12px;z-index:60;font-family:var(--f);}
#devbar .tg{height:36px;padding:0 14px;border-radius:999px;background:#1C1C1E;color:#fff;font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:6px;box-shadow:0 3px 10px rgba(0,0,0,.16);}
#devbar .tg i{width:8px;height:8px;border-radius:50%;background:#FF709A;}
#devbar .pn{display:none;position:absolute;left:0;bottom:44px;width:300px;background:#1C1C1E;color:#fff;border-radius:16px;padding:14px;box-shadow:0 12px 32px rgba(0,0,0,.35);}
#devbar.on .pn{display:block;}
#devbar .pn b{display:block;font-size:11px;letter-spacing:.1em;color:#9AA0AA;margin:0 0 8px;}
#devbar .pn b+b{margin-top:12px;}
#devbar .g{display:flex;flex-wrap:wrap;gap:6px;}
#devbar .g button{height:30px;padding:0 10px;border-radius:8px;background:#2C2C2E;color:#fff;font-size:12px;font-weight:600;}
#devbar .g button:hover{background:#3A3A3C;}
#devbar .g.t button{width:calc(25% - 4.5px);padding:0;font-family:"SF Mono",Menlo,monospace;letter-spacing:.02em;}
#devbar .g.t button.D{background:#5A3A40;} #devbar .g.t button.O{background:#4A3A5C;}
#devbar .g.t button.D:hover{background:#7A4A54;} #devbar .g.t button.O:hover{background:#624A78;}
#devbar .pn small{display:block;margin-top:10px;font-size:11px;color:#6C7280;}
@media (max-width:767px){ #devbar{left:8px;bottom:calc(84px + env(safe-area-inset-bottom));} #devbar .pn{width:calc(100vw - 16px);} }
/* 데스크톱: 시트·팝업 오버레이를 앱 프레임 크기로 (기본 규칙 뒤에 와야 inset이 적용됨) */
@media (min-width:768px){
  .sheet,.pop{inset:24px 0;width:480px;margin:0 auto;border-radius:28px;overflow:hidden;}
  .sheet{align-items:flex-end;padding:0;}
  .sheet .panel{border-radius:22px 22px 0 0;max-height:calc(100dvh - 120px);padding-bottom:24px;}
}