/* 도화당 B안 (2026-10-11 주익님: 담백·군더더기 없음·신뢰. 레퍼런스 토속사주보다 모던하게, 여성 대상이라 몽환·이색은 남긴다)
   원칙: 배경 하나 · 그림 하나 · 짧은 문장 · 움직임은 옅은 페이드뿐 · 지어낸 숫자·권위 없음 · 실제 계산(원국)을 보여 주는 게 전문성 */
:root{
  --bg:#0e0a0c; --bg2:#151013; --card:rgba(255,246,240,.035); --line:rgba(232,214,200,.14); --line2:rgba(232,214,200,.24);
  --ink:#efe6dc; --ink2:#cdbfb3; --sub:#9a8c83; --gold:#c9ab82; --blush:#e2a6b0; --rose:#b3485c;
  --f:'Noto Serif KR','Gowun Batang',serif; --col:440px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
/* 2026-10-11 주익님: 폰 화면 비율. 폰(세로)에선 화면 가득, 컴퓨터처럼 넓은 화면에선 폰 비율(9:19.5) 기둥만 쓰고 바깥은 검정 */
:root{--phone:100vw}
@media (min-aspect-ratio:3/4){:root{--phone:min(480px,calc(100vh * .4615))}}
@supports (height:100dvh){@media (min-aspect-ratio:3/4){:root{--phone:min(480px,calc(100dvh * .4615))}}}
html{background:#000;-webkit-text-size-adjust:100%}
body{display:flow-root;position:relative;width:var(--phone);max-width:100%;min-height:100vh;margin:0 auto;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:16px;line-height:1.85;word-break:keep-all;-webkit-font-smoothing:antialiased}
/* 배경 그라데이션은 폰 기둥 안에만, 스크롤해도 제자리 */
body::before{content:"";position:fixed;top:0;bottom:0;left:calc((100% - var(--phone)) / 2);width:var(--phone);z-index:0;pointer-events:none;
  background:radial-gradient(120% 60% at 50% -10%,rgba(122,48,72,.30),transparent 60%),radial-gradient(90% 50% at 50% 115%,rgba(70,36,58,.35),transparent 60%),var(--bg)}
/* 화면에 붙는 것(아래 결제 막대·가림막·꽃잎)도 폰 기둥 폭으로 */
.inframe{left:calc((100% - var(--phone)) / 2)!important;right:auto!important;width:var(--phone)!important}
a{color:inherit}
button{font-family:var(--f);cursor:pointer}
.wrap{position:relative;z-index:1;max-width:var(--col);margin:0 auto;padding:0 26px}
.mark{display:flex;align-items:center;justify-content:center;padding-top:34px;font-size:12px;letter-spacing:.42em;color:var(--gold);text-indent:.42em}
.mark i{display:none}
.hr{width:34px;height:1px;background:var(--gold);opacity:.7;margin:22px auto}
.cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;border:1px solid var(--gold);border-radius:2px;background:rgba(201,171,130,.06);
  color:#f3e6d2;font-size:17px;font-weight:600;letter-spacing:.06em;transition:background .25s ease,opacity .25s ease}
.cta:hover{background:rgba(201,171,130,.14)}
.cta:disabled{opacity:.35;cursor:default}
.cta.fill{background:linear-gradient(180deg,#b9505f,#963a4c);border-color:#c66575;color:#fff}
.cta.fill:hover{background:linear-gradient(180deg,#c35867,#9d4052)}
.fine{font-size:12.5px;line-height:1.75;color:var(--sub);text-align:center}
.legal{padding:46px 0 40px;font-size:11.5px;line-height:1.9;color:#76695f;text-align:center}
.legal nav{margin:8px 0 4px}
.legal nav a{text-decoration:none;color:#9a8c83}
.legal nav i{margin:0 6px;font-style:normal;opacity:.5}
.fade{animation:bfade .7s ease both}
@keyframes bfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fade{animation:none}}
.portrait{position:relative;width:min(62vw,250px,calc(100vh * .30));aspect-ratio:4/5;margin:26px auto 0;border-radius:999px 999px 6px 6px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(201,171,130,.35),0 0 0 7px rgba(14,10,12,1),0 0 0 8px rgba(201,171,130,.16),0 30px 70px -20px rgba(150,60,90,.45)}
.portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 65%,rgba(14,10,12,.55))}

@supports (height:100svh){.portrait{width:min(62vw,250px,calc(100svh * .30))}}