/* ═══════════════════════════════════════════════════════════════
   오늘의 기운탕 — 실동작 웹앱 스타일
   모바일 390px 기준 풀블리드, 데스크톱은 중앙 정렬 폰 프레임
   원본 v12 마스터의 컬러/타이포 토큰 계승
   ═══════════════════════════════════════════════════════════════ */
:root{
  --brown:#8A5A2E; --brown-d:#5B3A1E; --brown-l:#B99C78;
  --ink:#40311F; --cream:#F6EFE4;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Noto Sans KR','Malgun Gothic',sans-serif;
  background:#E8E8E8;color:#222;line-height:1.4;
  display:flex;align-items:center;justify-content:center;
}
/* 데스크톱: 폰 프레임 */
#app{
  width:390px;height:844px;max-height:100vh;background:#fff;
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  border-radius:40px;border:3px solid #333;box-shadow:0 10px 40px rgba(0,0,0,.22);
}
/* 모바일: 풀스크린 */
@media (max-width:440px){
  body{display:block;background:#fff;}
  #app{width:100vw;height:100dvh;max-height:none;border:none;border-radius:0;box-shadow:none;}
}
.screen{flex:1;display:flex;flex-direction:column;min-height:0;animation:fade .28s ease;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ── 공통 UI ── */
.hdrbar{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;flex-shrink:0;}
.bbk{font-size:24px;color:var(--brown);cursor:pointer;line-height:1;background:none;border:none;width:44px;height:44px;text-align:left;}
.bbk:disabled{opacity:0;pointer-events:none;}
.hstack{display:flex;flex-direction:column;align-items:center;}
.hlogo{font-size:14px;font-weight:800;color:var(--brown);}
.hsub{font-size:8px;font-weight:700;color:var(--brown-l);letter-spacing:1.5px;}
.hlang{font-size:10px;color:#999;border:1px solid #E0E0E0;border-radius:10px;padding:4px 9px;background:none;cursor:pointer;}
.cwrap{flex:1;display:flex;flex-direction:column;padding:8px 20px 24px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.btnp{width:100%;min-height:56px;background:var(--brown);color:#fff;font-size:15px;font-weight:700;border:none;border-radius:12px;cursor:pointer;transition:transform .08s,filter .15s;}
.btnp:active{transform:scale(.98);filter:brightness(.95);}
.btnp[disabled]{opacity:.4;pointer-events:none;}
.cap{font-size:10.5px;color:#999;text-align:center;margin-top:10px;}

/* ── 토스트 ── */
#toast{position:absolute;left:50%;bottom:40px;transform:translateX(-50%) translateY(20px);
  background:rgba(40,30,20,.94);color:#F6EFE4;font-size:13px;font-weight:600;
  padding:12px 20px;border-radius:999px;opacity:0;pointer-events:none;transition:.3s;z-index:100;max-width:80%;text-align:center;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ── S1 스플래시 ── */
.spbg{flex:1;background:linear-gradient(180deg,#F6EFE4 0%,#EFE3D0 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;padding:24px;overflow-y:auto;}
.afband{background:#3A2A1A;color:#F6EFE4;border-radius:12px;padding:10px 22px;text-align:center;box-shadow:0 4px 12px rgba(58,42,26,.25);}
.afband .l1{font-size:16px;font-weight:800;}
.afband .l2{font-size:8.5px;font-weight:700;color:#C9A97C;letter-spacing:3px;margin-top:2px;}
.hero{width:100%;height:168px;border-radius:18px;position:relative;overflow:hidden;box-shadow:0 6px 16px rgba(90,58,30,.25);flex-shrink:0;background:linear-gradient(135deg,#BBD9EE,#8A5A2E);}
.hero img{width:100%;height:100%;object-fit:cover;display:block;}
.herotag{position:absolute;left:10px;bottom:10px;background:rgba(58,42,26,.78);color:#F6EFE4;font-size:10px;font-weight:700;border-radius:999px;padding:5px 11px;}
.sptit{font-size:28px;font-weight:800;color:var(--brown-d);letter-spacing:-0.5px;}
.spsub{font-size:13px;color:#8A6B4C;text-align:center;line-height:1.55;}
.spsub b{color:var(--brown-d);}
.funchip{background:#fff;border:1px solid #E5D9C6;color:var(--brown);font-size:11px;font-weight:700;border-radius:999px;padding:7px 14px;}
.elemcap{font-size:10px;color:#6E6250;font-weight:800;letter-spacing:.5px;text-align:center;}
.elemrow{display:flex;gap:7px;}
.edot{width:46px;height:46px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--ink);gap:1px;}
.edot small{font-size:8px;font-weight:700;opacity:.75;}
.langrow{display:flex;gap:8px;width:100%;}
.langb{flex:1;min-height:56px;background:#fff;border:2px solid #E5D9C6;border-radius:12px;font-size:13px;font-weight:700;color:#555;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.12s;}
.langb.act{border-color:var(--brown);background:#F3E8D8;color:var(--brown);}

/* ── 오행 소개 ── */
.ohtit{font-size:21px;font-weight:900;color:var(--brown-d);margin:12px 0 3px;}
.ohsub{font-size:11.5px;color:#8A6B4C;line-height:1.6;margin-bottom:12px;}
.ohsub b{color:var(--brown-d);}
.ohrow{display:flex;gap:11px;align-items:center;border-radius:14px;padding:11px 13px;margin-bottom:8px;}
.ohh{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:900;color:var(--ink);flex-shrink:0;border:2px solid rgba(255,255,255,.9);}
.ohn{font-size:13.5px;font-weight:900;color:var(--ink);}
.ohn small{font-size:9.5px;font-weight:800;color:rgba(64,49,31,.55);margin-left:5px;letter-spacing:.5px;}
.ohd{font-size:10.5px;color:#5E4E38;line-height:1.45;margin-top:2px;}

/* ── S2 모드 선택 ── */
.obt{font-size:20px;font-weight:800;color:var(--brown-d);margin:14px 0 4px;}
.obs{font-size:12px;color:#888;margin-bottom:14px;}
.modec{border:2px solid #E5E5E5;border-radius:14px;padding:18px 16px;margin-bottom:12px;cursor:pointer;background:#F9F9F9;display:flex;align-items:center;gap:14px;transition:.12s;min-height:56px;}
.modec.sel{border-color:var(--brown);background:var(--cream);}
.mico{width:50px;height:50px;border-radius:12px;background:#EDE3D2;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:var(--brown);flex-shrink:0;}
.mtit{font-size:15px;font-weight:800;color:#333;}
.msub{font-size:11px;color:#999;margin-top:3px;line-height:1.4;}

/* ── 진단 ── */
.modetag{display:inline-block;background:var(--ink);color:#F3E3C8;font-size:9px;font-weight:800;border-radius:999px;padding:4px 11px;letter-spacing:.5px;margin-bottom:8px;align-self:flex-start;}
.prog{height:6px;background:#F0EAE0;border-radius:3px;margin:6px 0 6px;overflow:hidden;}
.progf{height:100%;background:var(--brown);border-radius:3px;transition:width .3s;}
.pnum{font-size:11px;font-weight:700;color:var(--brown);text-align:right;}
.qcard{background:var(--cream);border-radius:14px;padding:22px 18px;margin:14px 0 16px;}
.qtag{font-size:10px;font-weight:700;color:#B08A5C;letter-spacing:1px;margin-bottom:8px;}
.qtxt{font-size:17px;font-weight:800;color:var(--ink);line-height:1.45;}
.optb{width:100%;min-height:64px;background:#fff;border:2px solid #E8E2D6;border-radius:12px;font-size:13px;font-weight:600;color:#444;cursor:pointer;margin-bottom:10px;padding:14px 16px;text-align:left;line-height:1.4;transition:.1s;}
.optb:active{transform:scale(.99);}
.optb.sel{border-color:var(--brown);background:var(--cream);color:var(--brown-d);}
.prevlink{font-size:11px;color:#AAA;text-align:center;margin-top:2px;text-decoration:underline;cursor:pointer;background:none;border:none;padding:8px;}
.bdrow{margin-top:6px;background:#FAFAFA;border:1.5px solid #E5E5E5;border-radius:12px;padding:14px 16px;}
.bdlab{font-size:11px;font-weight:700;color:#888;line-height:1.4;}
.bdinput{margin-top:9px;width:100%;height:46px;border:1.5px solid #DDD;border-radius:10px;padding:0 12px;font-size:15px;color:#333;background:#fff;}
.bdinput:focus{outline:none;border-color:var(--brown-l);}
.bdnote{font-size:10px;color:#B08A5C;margin-top:8px;}

/* ── 폰 넘겨주기 ── */
.passbg{flex:1;background:linear-gradient(180deg,#F6EFE4,#EFE3D0);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:32px;text-align:center;}
.passemoji{font-size:60px;animation:sway 1.4s ease-in-out infinite;}
@keyframes sway{0%,100%{transform:rotate(-8deg);}50%{transform:rotate(8deg);}}
.passtit{font-size:22px;font-weight:900;color:var(--brown-d);}
.passsub{font-size:13px;color:#8A6B4C;line-height:1.6;}

/* ── S8 로딩 ── */
.ldbg{flex:1;background:linear-gradient(180deg,#F6EFE4,#EFE3D0);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;}
.ripple{width:110px;height:110px;border-radius:50%;border:3px solid #C9A97C;position:relative;display:flex;align-items:center;justify-content:center;animation:pulse 1.4s ease-in-out infinite;}
.ripple::before{content:'';position:absolute;inset:14px;border-radius:50%;border:2px solid #D9C4A2;}
.ripple::after{content:'';position:absolute;inset:30px;border-radius:50%;background:var(--brown);opacity:.85;}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
.ldtxt{font-size:15px;font-weight:700;color:#6B4A28;}
.ldsub{font-size:11px;color:#A98F6E;text-align:center;padding:0 30px;}

/* ── 처방전 (Rx) 결과 ── */
.rxbg{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 14px 20px;background:var(--brown);}
.rxbrand{text-align:center;font-size:17px;font-weight:900;color:#fff;letter-spacing:3px;padding:10px 0 12px;}
.rxbrand span{display:block;font-size:7.5px;letter-spacing:3px;color:rgba(255,255,255,.65);font-weight:700;margin-top:2px;}
.rx{background:#FDFBF5;border:2px solid #E8DCC2;border-radius:18px;padding:16px 14px 12px;position:relative;}
.rxhead{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.rxalias{font-size:12px;font-weight:800;color:#8A6B4C;}
.rxtype{font-size:30px;font-weight:900;color:var(--ink);letter-spacing:-1px;line-height:1.1;margin-top:2px;}
.rxtypeeng{font-size:9.5px;font-weight:800;color:var(--brown-l);letter-spacing:1.5px;margin-top:3px;}
.rxquote{font-size:13px;font-weight:900;color:var(--brown-d);line-height:1.55;margin-top:8px;}
.rxvis{width:104px;flex-shrink:0;text-align:center;}
.rxcircle{width:86px;height:86px;border-radius:50%;margin:0 auto;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:900;color:var(--ink);border:3px solid rgba(255,255,255,.8);box-shadow:0 3px 8px rgba(0,0,0,.1);}
.rxduo{display:flex;justify-content:center;}
.rxduo .rxcircle{width:50px;height:50px;font-size:16px;margin:0;}
.rxduo .rxcircle+.rxcircle{margin-left:-10px;}
.rxscroll{margin-top:7px;background:#fff;border:1.5px solid #D9C9AC;border-radius:8px;font-size:9px;font-weight:700;color:#6E5C44;padding:5px 6px;line-height:1.4;}
.rxbody{background:#F7F1E3;border-radius:12px;padding:12px 12px 6px;margin-top:12px;}
.rxitem{display:flex;gap:11px;align-items:flex-start;margin-bottom:11px;}
.rxitem:last-child{margin-bottom:4px;}
.rximg{width:62px;height:62px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:800;color:#8A6B4C;background:#E8DEC8;border:2px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.08);text-align:center;line-height:1.25;position:relative;overflow:hidden;}
.rximg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.rxit{font-size:13.5px;font-weight:900;color:var(--ink);}
.rxit small{font-size:9.5px;font-weight:800;color:#B08A5C;margin-left:4px;}
.rxid{font-size:10.5px;color:#8A7A5E;line-height:1.5;margin-top:2px;}
.rxcourse{font-size:11px;font-weight:800;color:var(--brown-d);text-align:center;margin:10px 0 2px;}
.rxcorr{background:#EAF3EA;border:1.5px dashed #9DBE9D;border-radius:10px;padding:8px 11px;margin-top:8px;font-size:10px;font-weight:700;color:#4A6B4A;line-height:1.5;}
.rxban{background:#EFD9A8;border-radius:12px;padding:12px 14px;margin-top:10px;}
.rxbant{font-size:12.5px;font-weight:900;color:var(--brown-d);text-align:center;margin-bottom:7px;}
.rxbanl{font-size:10.5px;color:#5B4A2E;line-height:1.8;font-weight:600;}
.rxparent{background:#fff;border:1.5px dashed #C9A97C;border-radius:12px;padding:11px 12px;margin-top:10px;}
.rxpt{font-size:11.5px;font-weight:900;color:var(--brown);margin-bottom:5px;}
.rxpl{font-size:10px;color:#6E5C44;line-height:1.75;}
.rxfoot{background:rgba(255,255,255,.85);border-radius:8px;font-size:9.5px;font-weight:700;color:#4A4536;text-align:center;padding:9px;margin-top:12px;}
.rxcta{display:flex;gap:8px;margin-top:12px;}
.rxcta button{flex:1;min-height:52px;border-radius:12px;font-size:13px;font-weight:800;cursor:pointer;border:none;}
.rxshare{background:#fff;color:var(--brown-d);}
.rxretry{background:rgba(255,255,255,.22);color:#fff;border:1.5px solid rgba(255,255,255,.5)!important;}

/* ── 공유 ── */
.shcard{width:220px;margin:14px auto;border-radius:16px;padding:28px 16px;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,.12);}
.shcard .r1{font-size:9px;font-weight:700;color:rgba(64,49,31,.5);letter-spacing:1.5px;}
.shcard .r2{font-size:21px;font-weight:800;color:var(--ink);margin-top:6px;}
.shcard .r3{font-size:11px;color:#6E5C44;margin-top:8px;line-height:1.5;}
.shcard .wm{font-size:8.5px;color:rgba(64,49,31,.4);margin-top:16px;font-weight:700;}
.shbtns{display:flex;gap:8px;margin-top:6px;}
.shb{flex:1;min-height:52px;background:#FAFAFA;border:1.5px solid #E5E5E5;border-radius:12px;font-size:11px;font-weight:700;color:#555;cursor:pointer;}
.rwcap{background:var(--cream);border-radius:10px;padding:10px 12px;font-size:10.5px;color:var(--brown);text-align:center;margin-top:12px;line-height:1.5;}
.skiplink{font-size:11px;color:#BBB;text-align:center;margin-top:14px;text-decoration:underline;cursor:pointer;background:none;border:none;padding:8px;}

/* colors per type */
.c-fire{background:#F4C7B0;}
.c-water{background:#BBD9EE;}
.c-earth{background:#E6D3AE;}
.c-wood{background:#C7DDB6;}
.c-metal{background:#DCE3E6;}