:root{--ac:#FF7A59;--acl:#FFD3C4;--ink:#2b2323;--ac-ink:#fff;--mut:#6f6560;--bg:#FFFBF5;--card:#fff;--line:#efe6dc;--wbg:#FFF6D6}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;font-weight:500;font-size:16px;line-height:1.65;overflow-x:hidden;word-break:keep-all;overflow-wrap:anywhere}
a{color:inherit}
h1,h2,h3{font-weight:800;line-height:1.3;margin:0 0 10px;letter-spacing:-.01em}
h1{font-size:28px}h2{font-size:22px}h3{font-size:18px}
p{margin:0 0 10px}
.wrap{max-width:520px;margin:0 auto;padding:0 16px 40px;position:relative;z-index:2}
.top{display:flex;justify-content:space-between;align-items:center;padding:14px 2px 6px}
.logo{text-decoration:none;display:flex;flex-direction:column;line-height:1.15}.logo b{font-size:19px;font-weight:800}.logo span{font-size:11px;color:var(--mut)}
.zl{font-size:13px;color:var(--mut);text-decoration:none;padding:8px 4px}
.card{background:var(--card);border-radius:20px;padding:20px 18px;margin:0 0 32px;box-shadow:0 2px 14px rgba(70,40,20,.06);position:relative}
.card.soft{background:#fff8ef;box-shadow:none;border:1px solid var(--line)}
.sec{margin:0 0 32px}
.sec>h2{margin:0 0 4px}.sec .lead{color:var(--mut);font-size:14px;margin:0 0 14px}
.mut{color:var(--mut)}.small{font-size:13px;color:var(--mut)}.c{text-align:center}
.btn{display:block;width:100%;border:0;border-radius:16px;background:var(--ac);color:var(--ac-ink);font:800 17px/1 inherit;font-family:inherit;padding:17px 16px;text-align:center;text-decoration:none;cursor:pointer;min-height:54px}
.btn:disabled{opacity:.4;cursor:default}
.btn.alt{background:#fff;color:var(--ink);border:2px solid var(--line)}
.btn.sm{font-size:15px;padding:13px 14px;min-height:48px;margin:8px 0 0}
.btn.kk{background:#FEE500;color:#2b2323}
.btn.ghost{background:transparent;color:var(--mut);border:0;font-weight:600}
.row{display:flex;gap:8px}.row>*{flex:1}
.sticky{position:sticky;bottom:0;padding:10px 0 calc(10px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 30%);z-index:5}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#2b2323;color:#fff;padding:12px 18px;border-radius:14px;font-size:14px;z-index:99;max-width:86vw;text-align:center;animation:fin .2s}
@keyframes fin{from{opacity:0;transform:translate(-50%,8px)}}
/* 첫 화면 */
.hero-h{font-size:28px;font-weight:800;line-height:1.28;margin:14px 0 8px;letter-spacing:-.02em}
.hero-h em{font-style:normal;color:var(--ac)}
.promise{color:var(--mut);font-size:15px;margin:0 0 14px}
.strip{overflow:hidden;margin:6px -16px 14px;padding:4px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.strip .tr{display:flex;width:max-content;animation:walk 46s linear infinite}
.strip .tr>div{width:104px;flex:none;margin:0 2px}
@keyframes walk{to{transform:translateX(-50%)}}
.get3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px}
.get3>div{background:#fff;border-radius:16px;padding:10px 6px 10px;text-align:center;font-size:12.5px;font-weight:700;line-height:1.35;box-shadow:0 2px 10px rgba(70,40,20,.05)}
.get3 .mc{width:64px;height:84px;margin:0 auto 2px;display:block}
.pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:6px 0 12px}
.pick button{border:2px solid var(--line);background:#fff;border-radius:16px;padding:8px 4px;font:700 14px/1.2 inherit;font-family:inherit;cursor:pointer;color:var(--ink);min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px}
.pick button.on{border-color:var(--ac);background:#fff3ee;box-shadow:0 0 0 3px var(--acl)}
.pick .mc{width:50px;height:66px}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:15px;margin:10px 0;cursor:pointer}
.chk input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--ac)}
.fold{border:1px solid var(--line);border-radius:16px;background:#fff;margin:0 0 10px;overflow:hidden}
.fold>summary{padding:14px 16px;font-weight:700;cursor:pointer;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.fold>summary::after{content:"+";font-size:20px;color:var(--mut)}.fold[open]>summary::after{content:"-"}
.fold>div{padding:0 16px 14px;font-size:14px;color:#4a403b}
.fold table{border-collapse:collapse;width:100%;font-size:13px}.fold td,.fold th{border-bottom:1px solid var(--line);padding:6px 4px;text-align:left;vertical-align:top}
/* 문항 */
.qtop{position:sticky;top:0;background:var(--bg);padding:10px 0 6px;z-index:6}
.qn{display:flex;justify-content:space-between;font-size:13px;color:var(--mut);font-weight:700;margin-bottom:6px}
.bar{height:10px;border-radius:99px;background:#f0e7dd;position:relative;margin:38px 0 2px}
.bar i{display:block;height:100%;border-radius:99px;background:var(--ac);width:0;transition:width .4s ease}
.bar .walk{position:absolute;top:-30px;width:34px;height:44px;margin-left:-17px;transition:left .4s ease;filter:brightness(.3);opacity:.35}
.qguide{background:#fff8ef;border-radius:14px;padding:10px 12px;font-size:13px;color:var(--mut);margin:12px 0}
.q{font-size:21px;font-weight:800;line-height:1.5;margin:22px 0 28px;min-height:96px;letter-spacing:-.01em}
.scale{display:flex;justify-content:space-between;gap:6px}
.scale button{width:52px;height:52px;flex:none;border-radius:50%;border:2px solid var(--line);background:#fff;font:800 17px/1 inherit;font-family:inherit;color:var(--ink);cursor:pointer;transition:transform .12s}
.scale button:active{transform:scale(.92)}
.scale button.on{background:var(--ac);border-color:var(--ac);color:var(--ac-ink)}
.scale-l{display:flex;justify-content:space-between;font-size:12px;color:var(--mut);margin:8px 2px 0}
.scale-l span:nth-child(2){text-align:center}
.qnav{display:flex;justify-content:space-between;margin-top:30px}
.cheer{position:fixed;inset:0;background:rgba(255,251,245,.97);z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;animation:fin .25s}
.cheer .mc{width:170px;height:224px}
.cheer p{font-size:20px;font-weight:800;margin:14px 0 0;line-height:1.45}
/* 그리는 중 */
.drawing{text-align:center;padding:30px 0}
.drawing .stage{width:250px;margin:10px auto;border-radius:24px;overflow:hidden;position:relative}
.drawing .stage .mc{display:block;opacity:0;transform:scale(.88);animation:reveal 1.6s .15s ease-out forwards;filter:grayscale(.9) contrast(.8)}
@keyframes reveal{0%{opacity:0;transform:scale(.88);filter:grayscale(1)}60%{opacity:1;transform:scale(1);filter:grayscale(.6)}100%{opacity:1;transform:scale(1);filter:none}}
.drawing p{font-weight:800;font-size:18px}
/* 결과 */
.band{background:#f4eee7;border-radius:12px;padding:8px 12px;font-size:13px;color:var(--mut);margin:10px 0 14px;text-align:center}
.friend{background:#fff3ee;border:1px solid var(--acl);border-radius:14px;padding:12px;margin:10px 0;text-align:center;font-size:14px}
.friend a{font-weight:800;color:var(--ac);display:block;margin-top:4px}
.res-hero{border-radius:26px;overflow:hidden;position:relative;padding:16px 12px 22px;text-align:center;margin:0 0 32px;box-shadow:0 6px 26px rgba(70,40,20,.1)}
.res-hero .cs{display:flex;justify-content:center;align-items:flex-end;gap:0;margin:0 auto}
.res-hero .cs .mc{display:block}
.res-hero .cs.one .mc{width:240px;height:auto}
.res-hero .cs.two>button{background:none;border:0;padding:0;width:50%;cursor:pointer}
.res-hero .cs.two .mc{width:100%}
.res-hero .pickhint{font-size:12px;color:var(--mut);margin:2px 0 4px}
.res-hero .kk{font-size:13px;font-weight:700;color:var(--mut)}
.res-hero h1{margin:6px 0 2px;font-size:30px}
.res-hero .tag{font-weight:700;color:var(--mut);font-size:15px;margin:0 0 12px}
.res-hero .d1{font-weight:800;font-size:18px;line-height:1.5;margin:0 0 6px}
.res-hero .d2{font-size:15px;color:#4a403b;margin:0 0 12px}
.chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:6px 0}
.chip{display:inline-block;padding:6px 11px;border-radius:99px;background:rgba(255,255,255,.85);font-size:13px;font-weight:800;border:1px solid rgba(0,0,0,.06)}
.chip.ac{background:var(--ac);color:var(--ac-ink)}
.cross{font-size:15px;background:rgba(255,255,255,.75);border-radius:14px;padding:11px 13px;margin:10px 0 0;text-align:left}
.other-face{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:12px;font-size:13px;text-decoration:none;font-weight:700;background:rgba(255,255,255,.75);border-radius:14px;padding:6px 12px}
.other-face .mc{width:42px;height:56px}
.bars .b{display:grid;grid-template-columns:62px 1fr 56px;align-items:center;gap:8px;margin:0 0 4px}
.bars .nm{font-weight:800;font-size:15px}
.bars .tr{height:16px;border-radius:99px;background:#f2eae1;overflow:hidden}
.bars .tr i{display:block;height:100%;border-radius:99px;width:0;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.bars .v{font-size:13px;font-weight:800;text-align:right}
.bars .ds{font-size:12.5px;color:var(--mut);margin:0 0 14px 70px;line-height:1.45}
.rk{display:inline-block;font-size:11px;font-weight:800;padding:1px 6px;border-radius:6px;background:var(--ac);color:var(--ac-ink);margin-left:4px;vertical-align:1px}
.plane{width:100%;display:block;margin:8px 0}
.plane .dot{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.wtxt p{margin:0 0 6px;font-size:15px}
.practice{background:#fff8ef;border-radius:14px;padding:12px 14px;font-size:14.5px;margin:10px 0;border-left:4px solid var(--ac)}
.practice b{display:block;font-size:12px;color:var(--mut);margin-bottom:2px}
.scene{border-radius:18px;overflow:hidden;margin:0 0 10px;border:1px solid var(--line);background:#fff}
.scene svg.sc{display:block;width:100%;height:auto}
.scene .tx{padding:12px 14px 14px}
.scene h3{font-size:16px;margin:0 0 6px}
.scene p{font-size:15px;margin:0 0 6px}
.scene p.pers{font-weight:700}
.chipsrc{display:inline-block;font-size:12px;background:var(--acl);border-radius:99px;padding:3px 9px;margin:2px 4px 2px 0;font-weight:700;color:#4a2c24}
.two2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.mate{background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px 10px;text-align:center}
.mate .mc{width:120px;height:auto;margin:0 auto;display:block}
.mate h4{margin:4px 0 0;font-size:16px;font-weight:800}.mate .t{font-size:12px;color:var(--mut)}
.mate .k{font-size:12px;font-weight:800;color:var(--ac);margin-bottom:2px}
.mate p{font-size:13.5px;text-align:left;margin:8px 0 0}
.cl{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;margin:0 0 10px;font-size:15px}
.cl .sc2{font-weight:700;margin:0 0 8px}
.cl .m,.cl .t{border-radius:12px;padding:8px 11px;margin:6px 0 0;font-size:14.5px}
.cl .m{background:#fff3ee}.cl .t{background:#eef5ff}
.ex{display:flex;gap:10px;align-items:flex-start;background:#fff;border:2px solid var(--line);border-radius:16px;padding:12px;margin:0 0 8px;cursor:pointer}
.ex.pick1{border-color:var(--ac);background:#fff6f2}
.ex input{width:22px;height:22px;accent-color:var(--ac);flex:none;margin-top:2px}
.ex b{display:block;font-size:15.5px}.ex span{font-size:13.5px;color:var(--mut)}
.say{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px 12px;margin:0 0 8px}
.say .w{font-size:12px;color:var(--mut);font-weight:700;display:block}
.say .s{font-size:15.5px;font-weight:700;display:block}
.say button,.cp{flex:none;border:0;background:var(--acl);color:#4a2c24;border-radius:10px;font:800 13px/1 inherit;font-family:inherit;padding:10px 12px;cursor:pointer;min-height:40px}
.showcard{background:linear-gradient(160deg,#fff,var(--acl));border-radius:20px;padding:16px;margin:12px 0 8px;border:1px solid var(--line)}
.showcard h3{font-size:16px}.showcard ol{margin:6px 0 0;padding-left:20px;font-size:15px}.showcard li{margin:0 0 6px}
.sits{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin:6px 0 12px}
.sits button{border:2px solid var(--line);background:#fff;border-radius:14px;padding:10px 8px;font:700 14px/1.25 inherit;font-family:inherit;cursor:pointer;color:var(--ink);text-align:left;min-height:62px}
.sits button small{display:block;font-weight:500;color:var(--mut);font-size:11.5px;margin-top:2px}
.sits button.on{border-color:var(--ac);background:#fff6f2}
.talk{display:flex;gap:8px;align-items:flex-start;margin:10px 0}
.talk .face{width:86px;flex:none}.talk .face .mc{width:86px;height:auto;display:block}
.talk .bs{flex:1;display:flex;flex-direction:column;gap:8px}
.bub{background:#fff;border:2px solid var(--line);border-radius:16px;padding:10px 12px;font-size:14.5px;position:relative;opacity:0;animation:pop .4s forwards}
.bub b{display:block;font-size:11.5px;color:var(--mut);margin-bottom:2px}
.bub.sun{border-radius:18px 18px 18px 4px}
.bub.shower{border-radius:18px 18px 18px 4px;border-style:solid;border-bottom-color:#9cc3f2}
.bub.fog{border-style:dashed}
.bub.mixed{border-radius:18px 4px 18px 4px}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.sendbox{background:#fffbe8;border:2px dashed #eacb55;border-radius:16px;padding:12px;margin:10px 0}
.sendbox .s{font-weight:800;font-size:16px;margin:2px 0 8px}
.safe{font-size:12.5px;color:#8a4a3a;background:#fff1ee;border-radius:12px;padding:10px 12px;margin:10px 0}
.sel{width:100%;padding:12px;border-radius:14px;border:2px solid var(--line);font:700 15px/1 inherit;font-family:inherit;background:#fff;margin:6px 0;min-height:48px}
.wsw{display:flex;gap:6px;margin:6px 0}.wsw button{flex:1;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 2px;font:700 12px/1 inherit;font-family:inherit;cursor:pointer}.wsw button.on{background:var(--ac);color:var(--ac-ink)}
.email input[type=email]{width:100%;padding:15px;border-radius:14px;border:2px solid var(--line);font:600 16px inherit;font-family:inherit;margin:8px 0}
.email .chk{font-size:13.5px;color:#4a403b}
.nx a.btn{margin:8px 0 0}
.nx .ytc{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px;text-decoration:none;margin:8px 0 0}
.nx .ytc .mc{width:52px;flex:none}
.nx .ytc b{font-size:15px;display:block}.nx .ytc small{color:var(--mut);font-size:12.5px}
.gal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.gal a{text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:18px;padding:8px;text-align:center;font-weight:800;font-size:14px}
.gal a .mc{width:100%;height:auto}
.gal a small{display:block;font-weight:500;color:var(--mut);font-size:12px}
/* 양옆 흐린 캐릭터(PC) */
.side{display:none;position:fixed;top:0;bottom:0;width:200px;z-index:1;opacity:.32;pointer-events:none;flex-direction:column;justify-content:space-around;align-items:center;padding:40px 0}
.side .mc{width:150px;height:auto}
@media (min-width:1000px){.side{display:flex}.side.L{left:calc(50% - 520px)}.side.R{right:calc(50% - 520px)}}
@media (min-width:700px){.wrap{max-width:520px}body{font-size:16px}}
@media print{.noprint{display:none!important}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.drawing .stage .mc{opacity:1;transform:none}}
.foot{margin-top:10px;font-size:12.5px;color:var(--mut);line-height:1.6}
.foot p{margin:0 0 6px}
.sp{height:8px}

p,li,.bub,.cl,.ds,.q,.cross,.practice,.friend,.safe,.small{text-wrap:pretty}
h1,h2,h3,h4,.d1,.d2,.hero-h,.cheer p{text-wrap:balance}
@media (max-width:380px){.bars .ds{margin-left:0}.bars .b{grid-template-columns:56px 1fr 52px}}
.sits button small{text-wrap:balance}

.rv{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}.rv.in{opacity:1;transform:none}
.res-hero .cs{animation:heroIn .75s cubic-bezier(.2,.9,.3,1.25) both}
@keyframes heroIn{from{opacity:0;transform:translateY(24px) scale(.82)}to{opacity:1;transform:none}}

.qhint{font-size:13px;color:var(--mut);margin:-14px 0 18px}
.qguide.home{margin-bottom:92px}
.chips.sc .chip{font-size:12.5px;background:rgba(255,255,255,.7)}
.chips.sc i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.res-hero .cs.one .mc{width:216px}
.cta-friend{margin:0 0 32px}
.hide{display:none}