/* web/styles.css — Deskmate 웹 프리뷰 퍼널. 확장과 같은 디자인 토큰. */
:root{
  --cream:#f6efe2; --forest:#3d5240; --terra:#c97b50; --gold:#e3b34c;
  --ink:#2a2722; --ink-soft:#6b6256;
  --serif: ui-serif, Georgia, "Times New Roman", serif;
  --sans: -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}
*{box-sizing:border-box} html,body{margin:0}
body{background:var(--cream); color:var(--ink); font-family:var(--sans); line-height:1.55;}
.wrap{max-width:560px; margin:0 auto; padding:28px 20px 64px;}
.brand{display:flex; align-items:center; gap:8px; font-family:var(--serif);}
.brand .mark{color:var(--terra); font-size:22px} .brand h1{font-size:20px; margin:0}
.lang-toggle{margin-left:auto; font:600 12.5px var(--sans); color:var(--forest); text-decoration:none;
  border:1px solid #3d524040; border-radius:99px; padding:4px 11px}
.lang-toggle:hover{background:#3d52400f}
.lang-toggle:focus-visible{outline:2px solid var(--terra); outline-offset:2px}
.tagline{color:var(--ink-soft); font-style:italic; margin:2px 0 0 30px; font-size:13px}

.hero{margin:28px 0 18px}
.hero h2{font-family:var(--serif); font-size:30px; line-height:1.25; margin:0 0 10px}
.hero p{color:var(--ink-soft); margin:0 0 18px}
.beforeafter{display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; margin:14px 0 22px}
.beforeafter figure{margin:0; text-align:center}
.beforeafter .ph{aspect-ratio:1; border-radius:16px; background:#0000000d; display:grid; place-items:center; color:var(--ink-soft); font-size:13px; border:1px dashed #0000002e}
.beforeafter .arrow{color:var(--terra); font-size:24px}
.cap{font-size:12px; color:var(--ink-soft); margin-top:6px}
/* 랜딩 데모: Before=사진 자리, After=실제 걸어다니는 캐릭터 */
.ph-photo{line-height:1.5; text-align:center}
.ph-ico{display:block; font-size:26px; margin-bottom:6px}
.ph-live{background:radial-gradient(120% 120% at 50% 24%, #fbf6ec 0%, #f2e7d2 82%, #ecdec2 100%); border-style:solid; border-color:#c97b5040}
.ph-live img{width:78%; height:78%; object-fit:contain; animation:demo-bob 2.4s ease-in-out infinite}
@keyframes demo-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion: reduce){.ph-live img{animation:none}}
/* 랜딩 3단계 안내 */
.steps{display:flex; gap:6px; justify-content:center; list-style:none; padding:0; margin:18px 0 0; flex-wrap:wrap}
.steps li{font-size:12px; color:var(--ink-soft); background:#fff9; border:1px solid #3d524026; border-radius:99px; padding:6px 12px; white-space:nowrap}
.steps li b{color:var(--terra); font-family:var(--serif); margin-right:3px}
/* 퍼널 진행 표시(스테이지 상단) */
.funnel-steps{display:flex; gap:4px; justify-content:center; align-items:center; margin:10px 0 2px; font-size:11.5px; color:var(--ink-soft)}
.funnel-steps[hidden]{display:none}   /* display:flex가 hidden 속성을 덮어써 랜딩에 노출되던 버그 */
.funnel-steps span{padding:3px 10px; border-radius:99px; position:relative}
.funnel-steps span+span::before{content:"·"; position:absolute; left:-6px; color:#3d524040}
.funnel-steps span.cur{background:var(--forest); color:#fff; font-weight:600}
.funnel-steps span.past{color:var(--forest); font-weight:600}

.btn{display:block; width:100%; padding:15px; border:none; border-radius:13px;
  background:var(--forest); color:#fff; font:600 16px var(--sans); cursor:pointer;
  transition:filter .15s, transform .08s}
.btn:hover{filter:brightness(1.06)} .btn:active{transform:translateY(1px)}
.btn.terra{background:var(--terra)} .btn[disabled]{opacity:.5; cursor:default}
.btn.ghost{background:transparent; color:var(--forest); border:1px solid #3d524059}

.stage{display:none} .stage.on{display:block}
.note{font-size:12px; color:var(--ink-soft); margin-top:12px}
.err{color:#b3402b; font-size:14px; margin-top:10px; min-height:18px}

.uploader{display:block; margin:6px 0 0; border:2px dashed #3d524059; border-radius:16px; padding:26px; text-align:center; background:#fff7; cursor:pointer}
.uploader.drag{background:#3d52401a; border-color:var(--forest)}
.thumbs{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0}
.thumbs img{width:64px; height:64px; object-fit:cover; border-radius:10px}

.candidates{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin:8px 0 18px}
.cand{border:2px solid transparent; border-radius:16px; overflow:hidden; cursor:pointer; background:#fff; padding:0}
.cand img{width:100%; display:block; aspect-ratio:1; object-fit:contain; background:var(--cream)}
.cand.sel{border-color:var(--terra)}
.cand .cap{display:block;padding:6px 4px 8px;text-align:center;font-size:12px;color:var(--ink-soft)}
.cand.sel .cap{color:var(--terra);font-weight:600}
.cand.pending,.cand.fail{display:grid;place-items:center;aspect-ratio:1;background:var(--cream);cursor:default}
.cand.fail{background:#fbeeee;color:var(--terra);font-size:22px}
.cand-spin{width:26px;height:26px;border:3px solid #3d524033;border-top-color:var(--forest);border-radius:50%;animation:spin .8s linear infinite}
.review-frames{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px;margin:8px 0 14px}
.rv-cell{position:relative;aspect-ratio:1;background:var(--cream);border-radius:10px;overflow:hidden}
.rv-cell img{width:100%;height:100%;object-fit:contain}
.rv-flip{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;color:#fff;background:rgba(61,82,64,.72);cursor:pointer}
.rv-flip:hover{background:var(--terra,#c97b50)}
.spinner{width:34px;height:34px;border:3px solid #0000001a;border-top-color:var(--terra);border-radius:50%;
  animation:spin 1s linear infinite; margin:30px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* 생성 대기 화면(이탈방지): 그 아이가 둥실 + 진행바 + 재미 문구 */
#gen-stage{text-align:center; padding:8px 0 4px}
#gen-master{width:190px; height:190px; object-fit:contain; border-radius:22px;
  background:radial-gradient(120% 120% at 50% 24%, #fbf6ec 0%, #f2e7d2 82%, #ecdec2 100%);
  box-shadow:0 14px 30px -14px #2a272240; animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-9px) rotate(1.2deg)}}
.gen-bar{max-width:280px; height:8px; margin:18px auto 10px; border-radius:99px; background:#0000000f; overflow:hidden}
#gen-fill{height:100%; width:4%; border-radius:99px; background:linear-gradient(90deg,var(--terra),#e3b34c);
  transition:width .6s ease}
#gen-tip{min-height:20px; margin:0; font-size:13.5px; color:var(--ink-soft); animation:tipfade 2.8s ease-in-out infinite}
@keyframes tipfade{0%,12%{opacity:0}22%,82%{opacity:1}94%,100%{opacity:0}}
@media (prefers-reduced-motion: reduce){#gen-master,#gen-tip{animation:none}}
.price-line{text-align:center; font-size:13.5px; color:var(--ink); margin:18px 0 0}
.price-line b{color:var(--forest)}
.price{font-family:var(--serif); font-size:26px; color:var(--forest); text-align:center; margin:6px 0}
.pay-perks{list-style:none; padding:12px 16px; margin:0 0 16px; background:#fff9; border:1px solid #3d524026; border-radius:13px}
.pay-perks li{font-size:13.5px; color:var(--ink); padding:3px 0}
.lead{text-align:center; color:var(--ink-soft); margin:0 0 16px}
.serif{font-family:var(--serif)}
.fld{display:block; margin:0 0 14px}
.fld span{display:block; font-size:13px; color:var(--ink-soft); margin-bottom:5px}
.fld input, .fld textarea, .fld-input{width:100%; padding:11px 12px; border:1px solid #3d524040;
  border-radius:11px; background:#fff; font:15px var(--sans); color:var(--ink); resize:vertical}
.fld-input{margin:6px 0 10px}
.fld input:focus, .fld textarea:focus{outline:none; border-color:var(--forest)}