/* 호라 상담지 · 웜 베이지 */
:root{--bg:#EFE8DF;--paper:#FBF8F4;--ink:#2E2925;--muted:#8B8178;--line:#E6DDD2;--soft:#F3EDE5;--sel:#F1E6D6;--selLine:#D9C3A5;--gold:#A8916F;--err:#B4432F;--r:18px}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;font-size:16px;line-height:1.55;-webkit-text-size-adjust:100%;word-break:keep-all}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,.addimg:focus-within{outline:2px solid var(--ink);outline-offset:2px}
#app{height:100%;display:flex;justify-content:center}
.shell{width:100%;max-width:480px;height:100%;height:100dvh;background:var(--paper);display:flex;flex-direction:column;position:relative}
@media(min-width:560px){#app{padding:24px 0}.shell{height:calc(100dvh - 48px);border-radius:32px;overflow:hidden;box-shadow:0 24px 60px #2e29251a}}

/* 시작 화면 */
.hero-shell,.hero-shell .foot{background:var(--soft)}
.hero{flex:1;overflow-y:auto;padding:64px 32px 24px;display:flex;flex-direction:column}
.hero img{width:64px;filter:invert(1);margin-bottom:auto;padding-bottom:40px}
.eb{font-size:11px;letter-spacing:.22em;color:var(--gold);font-weight:700;margin-bottom:14px}
.hero h1{font-size:31px;line-height:1.38;font-weight:700;letter-spacing:-.03em;margin-bottom:16px}
.hero p{font-size:15px;line-height:1.75;color:var(--muted)}
.meta{display:flex;gap:18px;margin-top:24px;font-size:13px;color:var(--muted)}
.meta span:before{content:"— ";opacity:.6}

/* 위쪽 */
.top{height:60px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 24px}
.top img{width:30px;filter:invert(1)}
.count{font-size:13px;color:var(--muted);font-weight:700}
.bar{height:3px;flex:none;background:var(--line)}
.bar i{display:block;height:3px;background:var(--ink);transition:width .25s}

/* 본문 */
.body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:26px 24px 28px}
.qn{font-size:12px;letter-spacing:.16em;color:var(--muted);font-weight:700;margin-bottom:10px}
.q{font-size:23px;line-height:1.45;font-weight:700;letter-spacing:-.03em;margin-bottom:8px}
.hint{font-size:14px;color:var(--muted);margin-bottom:22px;line-height:1.7}
.hint.small{font-size:13px;margin-top:-10px}
.field{margin-bottom:22px}
.ftitle{font-size:14px;font-weight:700;margin-bottom:10px}
.tag{font-size:11px;font-weight:500;color:var(--muted);background:var(--soft);border-radius:99px;padding:2px 8px;margin-left:4px}
.in{width:100%;height:54px;border:1px solid var(--line);border-radius:var(--r);padding:0 18px;background:#fff;font-size:16px}
.in::placeholder{color:#B5ABA1}
.in:focus{outline:0;border-color:var(--ink)}
.in.pin{letter-spacing:.3em;font-size:20px;font-weight:700;max-width:180px}
.in.pin::placeholder{letter-spacing:0;font-size:16px;font-weight:400}
.ta{height:auto;min-height:150px;padding:16px 18px;resize:vertical;line-height:1.6}

/* 보기 */
.opts{display:grid;gap:9px}
.opts.cols2{grid-template-columns:1fr 1fr}
.opts.cols3{grid-template-columns:1fr 1fr 1fr}
.opt{min-height:52px;border:1px solid var(--line);border-radius:var(--r);display:flex;align-items:center;gap:11px;padding:12px 16px;font-size:15px;background:#fff;text-align:left;line-height:1.4;transition:background .15s,border-color .15s}
.cols2 .opt,.cols3 .opt{font-size:14px;padding:11px 13px;gap:9px}
.cols3 .opt{justify-content:center;text-align:center}
.cols3 .opt i{display:none}
.opt i{flex:none;width:18px;height:18px;border:1.5px solid var(--line);border-radius:50%;position:relative}
.opt.multi i{border-radius:6px}
.opt.on{background:var(--sel);border-color:var(--selLine);font-weight:600}
.opt.on i{background:var(--ink);border-color:var(--ink)}
.opt.on i:after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.sub{grid-column:1/-1;background:var(--soft);border-radius:var(--r);padding:14px}
.sub-q{font-size:13px;font-weight:700;margin-bottom:10px}
.pills{display:flex;gap:6px}
.pill{flex:1;height:42px;border-radius:99px;background:#fff;border:1px solid var(--line);font-size:13.5px;white-space:nowrap}
.pill.on{background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:600}

/* 디자이너 */
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dz{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;text-align:center}
.dz img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--soft)}
.dz b{display:block;padding:11px 0;font-size:14px}
.dz.on{box-shadow:0 0 0 2px var(--ink)}
.dz .noph{display:grid;place-items:center;aspect-ratio:16/10;background:var(--soft)}
.dz .noph img{width:44px;aspect-ratio:auto;filter:invert(1);opacity:.35;background:none}
.dz.on b{background:var(--sel)}

/* 사진 */
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.thumb{position:relative;aspect-ratio:1}
.thumb img{width:100%;height:100%;object-fit:cover;border-radius:14px}
.thumb button{position:absolute;right:5px;top:5px;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-size:17px;line-height:1}
.addimg{aspect-ratio:1;border:1.5px dashed var(--selLine);border-radius:14px;background:var(--soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;position:relative;color:var(--muted);font-size:13px}
.addimg b{font-size:26px;font-weight:300;line-height:1;color:var(--ink)}
.addimg small{font-size:11px}
.addimg input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* 동의 */
.agree-all{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:6px}
.agree{padding:10px 0;border-bottom:1px solid var(--line)}
.chk{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;padding:8px 0;font-size:15px;line-height:1.5}
.chk i{flex:none;width:22px;height:22px;border:1.5px solid var(--selLine);border-radius:7px;position:relative;margin-top:0}
.chk.on i{background:var(--ink);border-color:var(--ink)}
.chk.on i:after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.chk em{font-style:normal;color:var(--muted);font-weight:600}
.chk em.req{color:var(--ink)}
details{margin:2px 0 4px 34px}
summary{font-size:13px;color:var(--muted);cursor:pointer;list-style:none;text-decoration:underline;text-underline-offset:3px;width:max-content}
summary::-webkit-details-marker{display:none}
.terms{margin-top:10px;background:var(--soft);border-radius:14px;padding:14px 16px;font-size:13px;display:grid;grid-template-columns:62px 1fr;gap:8px 10px;color:var(--ink)}
.terms dt{font-weight:700;color:var(--muted)}

/* 확인 */
.review{border-top:1px solid var(--line)}
.row{padding:13px 0;border-bottom:1px solid var(--line)}
.row .k{font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}
.edit{font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:2px 0 2px 10px}
.row .v{font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere}
.mini{display:flex;gap:6px;margin-top:4px}
.mini img{width:64px;height:64px;object-fit:cover;border-radius:10px}

/* 완료 */
.done{display:flex;flex-direction:column;justify-content:center;padding-bottom:80px}
.ck{width:64px;height:64px;border-radius:50%;background:var(--sel);display:grid;place-items:center;font-size:26px;margin-bottom:24px}
.kakao{margin-top:8px;background:var(--soft);border-radius:var(--r);padding:20px}
.kakao p{font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:14px}
.kakao p b{color:var(--ink);font-size:15px}
.kbtn{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:99px;background:#FEE500;color:#191919;font-weight:700;font-size:15px;text-decoration:none}
.kbtn:before{content:"";width:20px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath fill='%23191919' d='M10 0C4.5 0 0 3.5 0 7.8c0 2.8 1.9 5.3 4.7 6.6l-1 3.6 4.1-2.7c.7.1 1.4.2 2.2.2 5.5 0 10-3.5 10-7.8S15.5 0 10 0z'/%3E%3C/svg%3E") no-repeat center/contain}
.preview{margin-top:20px;font-size:12px;color:var(--err)}

/* 아래 버튼 */
.foot{flex:none;padding:14px 24px calc(18px + env(safe-area-inset-bottom));background:var(--paper)}
.btn{width:100%;height:56px;border-radius:99px;background:var(--ink);color:var(--paper);font-weight:700;font-size:16px}
.btn:disabled{opacity:.55}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.nav{display:flex;gap:10px}
.nav .ghost{flex:0 0 32%}

.err{color:var(--err);font-size:13px;margin-top:8px}
[hidden]{display:none!important}
@media(max-width:360px){.body{padding:22px 18px}.q{font-size:21px}.cols2 .opt{font-size:13px;padding:10px}.foot{padding-left:18px;padding-right:18px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}