:root{--bg:#fff8fb;--panel:rgba(255,255,255,.9);--line:rgba(201,58,112,.28);--text:#2b2230;--sub:#74667c;--gold:#c2386b;--rose:#c93a70;}
*{box-sizing:border-box}
body{margin:0;background:var(--bg) url(bg.svg) center top/640px 640px repeat;background-attachment:fixed;color:var(--text);font-family:-apple-system,"Pretendard","Noto Sans KR",sans-serif;line-height:1.65}
body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(255,248,251,0),rgba(255,236,244,.55) 90%);pointer-events:none;z-index:0}
.wrap{position:relative;z-index:1}
/* 제목 분위기: 가는 명조 계열, 창백한 푸른빛, 넓은 자간, 점 달린 구분선, 광선과 네 꼭짓점 별 */
:root{--ice:#d0507f}
html::before,html::after{content:"";position:fixed;width:190px;height:190px;background:url(burst.svg) no-repeat;pointer-events:none;z-index:0;opacity:.55}
html::before{top:0;left:0}
html::after{bottom:0;right:0;transform:rotate(180deg)}
header{position:relative;padding:28px 0 10px}
header .rule{height:1px;background:linear-gradient(90deg,transparent,var(--ice),transparent);opacity:.7;margin:0 auto 22px;max-width:420px}
header h1{font-family:"Noto Serif KR","Noto Serif CJK KR","Nanum Myeongjo","AppleMyungjo","Batang",serif;font-weight:200;font-size:44px;letter-spacing:.3em;margin:0 0 0 .3em;color:var(--ice);text-shadow:0 0 18px rgba(208,80,127,.18)}
header .div{display:flex;align-items:center;justify-content:center;gap:0;margin:14px auto 12px;max-width:180px}
header .div::before,header .div::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--ice);flex:none}
header .div i{flex:1;height:1px;background:var(--ice);opacity:.8}
header .en{font-family:"Noto Serif KR","Noto Serif CJK KR","AppleMyungjo",serif;font-weight:300;font-size:13px;letter-spacing:.55em;margin-left:.55em;color:var(--ice);opacity:.9}
header .spk{position:absolute;width:26px;height:26px;background:url(sparkle.svg) center/contain no-repeat;opacity:.9}
header .spk.a{left:12%;top:36px}
header .spk.b{right:14%;bottom:34px;width:18px;height:18px}
header .tag{margin-top:12px}
@media(max-width:480px){header h1{font-size:34px;letter-spacing:.22em}header .spk.a{left:4%}header .spk.b{right:6%}}
a{color:var(--gold)}
.wrap{max-width:720px;margin:0 auto;padding:0 16px 60px}
header{text-align:center;padding:32px 0 8px}
h1{margin:0;font-size:26px;color:var(--gold);letter-spacing:.08em}
.tag{color:var(--sub);font-size:14px;margin-top:4px}
h2{font-size:15px;color:var(--sub);font-weight:600;margin:28px 0 10px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{background:var(--panel);border:1px solid var(--line);color:var(--text);padding:14px 12px;border-radius:10px;font-size:15px;cursor:pointer;text-align:left;font-family:inherit}
.btn small{display:block;color:var(--sub);font-size:12px;margin-top:2px}
.btn:hover,.btn:focus-visible,.chip:focus-visible{border-color:var(--gold);outline:2px solid var(--gold);outline-offset:1px}
.btn.primary{background:var(--rose);border-color:var(--rose);text-align:center;font-weight:700;color:#fff}
.daily{width:100%;margin-top:16px;border-color:var(--gold);display:flex;justify-content:space-between;align-items:center}
.daily b{color:var(--gold)}
.row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.chip{padding:8px 14px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--sub);cursor:pointer;font-size:14px;font-family:inherit}
.chip.on{background:var(--gold);color:#fff;border-color:var(--gold);font-weight:700}
textarea{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:12px;font-size:15px;resize:vertical;min-height:64px;font-family:inherit}
.top{display:flex;justify-content:space-between;align-items:center;padding:16px 0}
.cards{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:16px 0}
.slot{width:calc(33.3% - 10px);min-width:104px;max-width:170px;text-align:center}
.slot .pos{font-size:12px;color:var(--gold);margin-bottom:6px;min-height:18px}
.card{perspective:700px;aspect-ratio:330/554;cursor:pointer;background:none;border:0;padding:0;width:100%;display:block}
.inner{position:relative;width:100%;height:100%;transition:transform .7s;transform-style:preserve-3d}
.card.open .inner{transform:rotateY(180deg)}
.face,.back{position:absolute;inset:0;border-radius:8px;backface-visibility:hidden;overflow:hidden}
.back{background:repeating-linear-gradient(45deg,#f6c3d6,#f6c3d6 6px,#fbdce8 6px,#fbdce8 12px);border:2px solid var(--gold)}
.face{transform:rotateY(180deg);background:#f3ead4;color:#2b2113;border:2px solid #e3a9be;display:flex;flex-direction:column}
.face img{width:100%;height:100%;object-fit:cover;display:block}
.face.rev img,.face.rev .fb{transform:rotate(180deg)}
.fb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px;text-align:center}
.fb b{font-size:15px}.fb i{font-size:11px;color:#6b5a38;font-style:normal;margin-top:4px}
.fb .sym{font-size:30px;margin-bottom:6px}
.nm{font-size:13px;margin-top:6px}
.nm em{color:var(--rose);font-style:normal;font-size:11px;margin-left:4px}
.nm small{color:var(--sub)}
.mean{margin-top:6px;font-size:12px;color:var(--sub);text-align:left;background:var(--panel);border-radius:8px;padding:8px}
.mean b{color:var(--gold);font-weight:600;display:block;margin-bottom:2px}
.pick{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;margin:12px 0}
.pb{width:34px;height:56px;border-radius:4px;border:1px solid var(--gold);background:repeating-linear-gradient(45deg,#f6c3d6,#f6c3d6 4px,#fbdce8 4px,#fbdce8 8px);cursor:pointer;padding:0}
.pb.sel{outline:3px solid var(--rose);transform:translateY(-6px)}
.sum{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin:20px 0;text-align:left;font-size:14px;line-height:1.7}
.sum h2{margin:0 0 10px;font-size:16px;color:var(--gold)}
.sum h3{margin:14px 0 4px;font-size:14px;color:var(--gold)}
.sum ol{margin:0;padding-left:20px}
.sum li{margin-bottom:10px}
.sum li b{color:var(--text)}
.sum li small{display:block;color:var(--sub);font-size:12px}
.sum li p{margin:2px 0 0}
.sum ul{margin:0;padding-left:18px}
.sum .sumq{background:#fff;border-radius:8px;padding:8px 10px;color:var(--sub);font-size:13px}
.sum .sumf{margin:12px 0 0;font-weight:600}
.sum .sumn{margin:10px 0 0;font-size:12px;color:var(--sub)}
.ai{margin:20px 0;text-align:center}
.ai h2{font-size:16px;color:var(--gold);margin:0 0 6px}
.ai h2 small{font-weight:400;color:var(--sub);font-size:12px}
.ai .ainote{font-size:12px;color:var(--sub);line-height:1.6;margin:0 0 10px;text-align:left}
.ai .btn{width:100%;justify-content:center}
.ai .aimsg{font-size:13px;margin:10px 0 0;color:var(--sub)}
.ai .aimsg.warn{color:var(--rose)}
.aiout{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:12px;text-align:left;font-size:14px;line-height:1.75}
.aiout h3{margin:14px 0 4px;font-size:14px;color:var(--gold)}
.aiout h3:first-of-type{margin-top:6px}
.aiout p{margin:0 0 6px}
.aiout .aitag{font-size:12px;color:var(--rose);margin-bottom:6px}
.note{font-size:12px;color:var(--sub);text-align:center;margin-top:24px}
.cta{background:var(--panel);border:1px solid var(--gold);border-radius:12px;padding:16px;margin-top:20px;font-size:14px}
.cta b{color:var(--gold)}
.hist{list-style:none;padding:0;margin:0}
.hist li{display:flex;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.hist a{color:var(--text);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist span{color:var(--sub);font-size:12px;white-space:nowrap}
.price{width:100%;border-collapse:collapse;font-size:14px}
.price td{padding:8px 4px;border-bottom:1px solid var(--line)}
.price td:last-child{text-align:right;color:var(--gold);white-space:nowrap}
footer{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--sub);text-align:center}
footer a{color:var(--sub);margin:0 6px}
.hide{display:none}
.sr{position:absolute;left:-9999px}
.tl{text-align:left}.tc{text-align:center}.mt8{margin-top:8px}.grow{flex:1}.jc{justify-content:center}.nodec{text-decoration:none}
/* 카드 소개 페이지 */
header.sm h1{font-size:34px;letter-spacing:.14em;margin-left:.14em}
header.sm .spk{display:none}
.crumb{font-size:12px;color:var(--sub);text-align:center;margin:6px 0 14px}
.crumb a{color:var(--sub)}
.pair{display:flex;gap:18px;justify-content:center;margin:12px 0 8px}
.pair figure{margin:0;text-align:center}
.pair img{width:165px;max-width:42vw;height:auto;border-radius:8px;border:2px solid #e3a9be;display:block}
.pair img.rot{transform:rotate(180deg)}
.pair figcaption{font-size:12px;color:var(--sub);margin-top:6px}
.kw{display:inline-block;margin:0 6px 6px 0;padding:4px 12px;border:1px solid var(--line);border-radius:99px;font-size:14px;color:var(--gold)}
main p,.wrap>p{font-size:15px}
.pn{display:flex;justify-content:space-between;gap:12px;margin-top:22px;font-size:14px}
.dict{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.dc{display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 6px;font-size:13px}
.dc img{width:66px;height:auto;border-radius:4px;margin-bottom:6px}
.dc small{color:var(--sub);font-size:11px;margin-top:2px;line-height:1.35}
.dc:hover,.dc:focus-visible{border-color:var(--gold);outline:none}
a.cl{color:inherit;text-decoration:none;border-bottom:1px dotted var(--sub)}
a.btn{text-decoration:none}
/* 해석 예시 */
.sample{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.sample .stag{font-size:12px;color:var(--gold);margin:0 0 8px}
.sample .sq{font-size:15px;margin:0 0 14px}
.sc{display:flex;gap:10px;justify-content:center;margin:6px 0 14px}
.sc figure{margin:0;text-align:center;width:calc(33.3% - 8px);max-width:130px}
.sc img{width:100%;height:auto;border-radius:6px;border:2px solid #e3a9be;display:block}
.sc img.rot{transform:rotate(180deg)}
.sc figcaption{font-size:13px;margin-top:6px}
.sc figcaption small{display:block;color:var(--gold);font-size:11px}
.sample h3{font-size:14px;color:var(--gold);margin:18px 0 4px}
.sample p{font-size:14px;margin:0}
.sample .sclose{margin-top:18px;color:var(--sub);font-size:13px}
/* 마스터 소개 */
.master{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.master p{font-size:14px;margin:0}
.master .mname{font-family:"Noto Serif KR","Noto Serif CJK KR","Nanum Myeongjo","AppleMyungjo","Batang",serif;font-size:22px;color:var(--ice,#cfdcf7);letter-spacing:.2em;margin-bottom:6px}
.master .mname small{font-family:inherit;font-size:11px;letter-spacing:0;color:var(--sub);margin-left:8px}
.master .mdot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-right:10px;vertical-align:middle}
.master h3{font-size:14px;color:var(--gold);margin:16px 0 4px}
.master ul{margin:0;padding-left:18px;font-size:14px}
.master li{margin:3px 0}
/* 고민별 길잡이, 탄생 카드 */
header.gd h1{font-size:22px;letter-spacing:.06em;margin-left:.06em;line-height:1.4}
.gq{padding-left:18px;font-size:14px;margin:6px 0}.gq li{margin:5px 0}
.gcta{display:block;width:100%}
.glist{display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px}
.glist b{display:block;color:var(--gold);font-weight:600}
.bbox{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:14px}
.bl{display:block;font-size:14px;color:var(--gold);margin:12px 0 6px}.bl:first-child{margin-top:0}
.bl small{color:var(--sub)}
input[type=date]{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:12px;font-size:16px;font-family:inherit;color-scheme:light}
.berr{color:var(--rose);font-size:13px;margin:10px 0 0}
.bperson{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-top:14px}
.bperson h2{margin:0 0 8px;color:var(--gold);font-size:16px}
.bperson p{font-size:14px;margin:6px 0}
.bperson .bline{color:var(--text);border-top:1px dotted var(--line);padding-top:8px}
#bout .row{margin-top:16px}
.daily.alt{margin-top:10px;border-color:var(--line)}
.bbox input[type=text]{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:12px;font-size:16px;font-family:inherit;letter-spacing:.04em}
.bd{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--sub);margin-top:8px}
.bd input[type=date]{width:auto;flex:1;padding:8px 10px;font-size:14px}
.price small{display:block;color:var(--sub);font-size:12px}