/* 신녀사주 공용 스타일 (입력·결과 페이지 공통) */
/* 웹툰·사극 한글 폰트 (로컬 자체호스팅, OFL) */
@font-face{font-family:"SongMyung";src:url("assets/fonts/SongMyung-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"GowunBatang";src:url("assets/fonts/GowunBatang-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"GowunBatang";src:url("assets/fonts/GowunBatang-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"GowunDodum";src:url("assets/fonts/GowunDodum-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Jua";src:url("assets/fonts/Jua-Regular.ttf") format("truetype");font-weight:400;font-display:swap}

:root{ --gold:#e8c06a; --gold-lite:#f6dc9a; --gold-soft:#c9a24b; --gold-dim:#9c854a; --ink:#0b0910; --paper:#f4ecd8; --red:#a5342f; --cinnabar:#c8452f; --cinnabar-soft:#d06a7e; --muted:#8a8272;
  --w-geum:#e6e9f0; --w-hwa:#e88574; --w-to:#dcb06a; --w-mok:#82c79c; --w-su:#74a8df;
  --ft:"GowunBatang","SongMyung","Nanum Myeongjo",serif;
  --fb:"GowunDodum","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --fd:"GowunBatang","Nanum Myeongjo",serif; --fh:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Batang",sans-serif; }
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fb); color:var(--paper); background:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:hidden}
.worldbg{position:fixed; inset:0; z-index:-2; background:url("assets/backgrounds/home_bg1.png") center/cover no-repeat; filter:brightness(.42) saturate(1.05)}
.worldbg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,12,.55),rgba(8,6,12,.86))}
/* 페이지 = 가운데 세로 칼럼(모바일 폭). 영상·내용이 이 칼럼과 한 몸으로 스크롤 */
.app{position:relative; width:100%; max-width:480px; margin:0 auto; min-height:100svh;
  background:rgba(9,7,14,.30); box-shadow:0 0 120px 24px rgba(0,0,0,.6); overflow:hidden}

/* 히어로: 등장 영상 = 칼럼 폭 꽉(박스 없음) */
#hero{position:relative; height:100svh; width:100%; overflow:hidden}
#hero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000}
#hero .grad{position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,6,12,.2) 0%, transparent 18%, transparent 40%, rgba(8,6,12,.66) 70%, rgba(8,6,12,.94) 100%)}
#hero .who{position:absolute; left:0; right:0; bottom:15svh; text-align:center; padding:0 24px; z-index:2}
#hero .type{display:inline-block; font-family:var(--fb); font-size:14px; font-weight:700; letter-spacing:.2em; color:#2a1e08;
  background:linear-gradient(180deg,var(--gold-lite),var(--gold-soft)); padding:5px 15px; border-radius:999px; box-shadow:0 3px 12px rgba(0,0,0,.5)}
#hero .name{font-family:var(--ft); font-weight:800; font-size:clamp(38px,13vw,62px); margin-top:12px; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.9), 0 4px 26px rgba(0,0,0,.85)}
#hero .teaser{margin-top:12px; font-size:clamp(15px,4.2vw,19px); font-weight:500; color:#f6ecd4; text-shadow:0 1px 3px rgba(0,0,0,.95), 0 2px 14px rgba(0,0,0,.9)}
.cue{position:absolute; left:0; right:0; bottom:24px; text-align:center; z-index:3; color:var(--gold-lite)}
.cue .t{font-family:var(--fb); font-size:13.5px; font-weight:600; letter-spacing:.18em; text-shadow:0 1px 6px rgba(0,0,0,.9)}
.cue .a{font-size:28px; display:block; margin-top:3px; text-shadow:0 1px 6px rgba(0,0,0,.9); animation:bob 1.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(8px);opacity:1}}

section{position:relative; z-index:1}
.wrap{padding:0 18px}

/* ===== 채팅형 입력 위저드 (사극·금박) ===== */
#input{position:relative; min-height:100svh; padding:14svh 0 9svh; display:flex; flex-direction:column; justify-content:center}
#input::before{content:""; position:absolute; left:50%; top:47%; width:170%; height:66%; transform:translate(-50%,-50%);
  background:radial-gradient(56% 46% at 50% 45%, rgba(232,176,90,.16), transparent 72%); pointer-events:none; z-index:-1}
#chat{display:flex; flex-direction:column; gap:17px}

/* 신녀 대사 = 서찰 말풍선(꼬리) */
.bub{display:flex; align-items:flex-end; gap:12px; opacity:0; transform:translateY(14px); animation:pop .5s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes pop{to{opacity:1;transform:none}}
.bub .av{width:54px; height:54px; border-radius:50%; object-fit:cover; object-position:50% 14%; flex:0 0 54px;
  border:2px solid transparent; background:linear-gradient(#15111b,#15111b) padding-box, linear-gradient(150deg,var(--gold-lite),var(--gold-soft)) border-box;
  box-shadow:0 4px 14px rgba(0,0,0,.55), 0 0 20px rgba(232,176,90,.22)}
.bub .say{position:relative; max-width:80%; padding:15px 20px; border-radius:5px 17px 17px 17px;
  font-family:var(--fd); font-size:20px; line-height:1.62; color:#f7efd9; word-break:keep-all; overflow-wrap:anywhere; letter-spacing:.01em; text-shadow:none;
  background:linear-gradient(158deg, rgba(41,33,27,.94), rgba(24,18,27,.95));
  border:1px solid rgba(232,192,106,.30); box-shadow:0 8px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,222,150,.14)}
.bub .say::before{content:""; position:absolute; left:-6px; bottom:13px; width:12px; height:12px; transform:rotate(45deg);
  background:linear-gradient(158deg, rgba(41,33,27,.94), rgba(24,18,27,.95)); border-left:1px solid rgba(232,192,106,.30); border-bottom:1px solid rgba(232,192,106,.30)}

/* 내 답 = 금박 */
.bub.me{display:block; text-align:right}
.me .say{position:relative; display:inline-block; text-align:left; max-width:82%; padding:13px 20px; border:none;
  border-radius:17px 5px 17px 17px; font-family:var(--fb); font-size:18px; font-weight:700; color:#3a2907; word-break:keep-all; overflow-wrap:anywhere; text-shadow:none;
  background:linear-gradient(165deg,#f8e2a6,#e7bf66 52%,#c9a24b);
  box-shadow:0 7px 18px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 7px rgba(150,110,40,.32)}
.me .say::before{display:none}

/* 입력 위젯 */
#answer{margin-top:24px; min-height:60px}
.ipt{display:flex; gap:10px}
.ipt input,.ipt select,.birthgrid select,.chips button,.mbtigrid button,.ok{
  -webkit-appearance:none; appearance:none; font-family:var(--fb); border-radius:13px}
.ipt input,.ipt select,.birthgrid select,.chips button,.mbtigrid button{
  color:var(--gold-lite); border:1px solid rgba(232,192,106,.34);
  background:linear-gradient(180deg,#1e1826,#110c18);
  box-shadow:inset 0 1px 0 rgba(255,222,150,.08), 0 5px 14px rgba(0,0,0,.42)}
.ipt{align-items:stretch}
.ipt input{flex:1 1 auto; min-width:0; box-sizing:border-box; padding:17px 17px; font-size:19px; font-weight:500}
.ipt input::placeholder{color:rgba(206,178,120,.5)}
.ipt select{flex:1 1 auto; min-width:0; box-sizing:border-box}
.ok{flex:0 0 auto}
/* 입력 중 수정(뒤로가기) 버튼 */
#backBtn{display:block; margin:13px auto 0; padding:8px 18px; background:transparent; border:1px solid rgba(232,192,106,.32); border-radius:20px; color:#bcae8a; font-family:var(--fb); font-size:12.5px; font-weight:600; cursor:pointer; transition:all .18s}
#backBtn:hover{border-color:rgba(232,192,106,.6); color:#e8c06a; background:rgba(232,192,106,.08)}
/* 시각 입력(오전/오후 + 시 + 분): 오전/오후 고를 때만 시·분 노출, 확인은 한 줄 전체 */
.ipt.tw{flex-wrap:wrap; align-items:stretch; justify-content:center; gap:10px}
.ipt.tw select{flex:0 1 auto; min-width:96px; padding:16px 40px 16px 18px; font-size:18px; font-weight:600; text-align-last:center}
.ipt.tw .twt{display:inline-flex; align-items:center; gap:8px}
.ipt.tw .twt select{min-width:82px}
.ipt.tw .tsep{flex:0 0 auto; color:var(--gold-lite); font-size:15px; font-weight:600; opacity:.8; align-self:center}
.ipt.tw .ok{flex:1 1 100%; margin-top:5px; padding:18px; font-size:19px; font-weight:700; letter-spacing:.02em}
/* 드롭다운 = 금색 셰브론(기본 화살표 제거) */
.ipt select,.birthgrid select{padding:17px 42px 17px 16px; font-size:18px; font-weight:600; text-align-last:center;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='9'><path d='M1.2 1.4l5.3 5.3 5.3-5.3' fill='none' stroke='%23e8c06a' stroke-width='1.8' stroke-linecap='round'/></svg>") no-repeat right 15px center, linear-gradient(180deg,#1e1826,#110c18)}
.ipt input:focus,.ipt select:focus,.birthgrid select:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(232,192,106,.16), 0 5px 14px rgba(0,0,0,.42)}
/* 열린 드롭다운 목록 = 어두운 배경 + 크림 글씨 (흰배경 방지) */
.ipt select option,.birthgrid select option{background:#17121f; color:#f4ecd8; font-weight:500}
.ipt select option:checked,.birthgrid select option:checked{background:#3a2c12; color:var(--gold-lite)}

/* 금박 확인 버튼 */
.ok{cursor:pointer; white-space:nowrap; border:none; padding:0 24px; font-size:18px; font-weight:800; color:#3a2907;
  background:linear-gradient(165deg,#f8e2a6,#e7bf66 52%,#c9a24b);
  box-shadow:0 6px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 7px rgba(150,110,40,.3); transition:transform .12s}
.ok:active{transform:translateY(1px)}

/* 성별·연애 선택 */
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chips button{cursor:pointer; padding:15px 22px; font-size:18px; font-weight:600}
.chips button:hover,.chips button:active{color:#3a2907; border-color:transparent;
  background:linear-gradient(165deg,#f8e2a6,#e7bf66 52%,#c9a24b); box-shadow:0 6px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5)}

/* 생년월일 = 년/월/일 따로 */
.birthgrid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px}
.birthgrid select{padding:17px 34px 17px 12px; font-size:17px; background-position:right 11px center, center}
.birthgrid #wc{grid-column:1 / 3}
.birthgrid .ok{grid-column:3 / 4; width:100%; padding:17px 0}

/* MBTI 16유형 */
.mbtigrid{display:grid; grid-template-columns:repeat(4,1fr); gap:9px}
.mbtigrid button{cursor:pointer; padding:15px 2px; font-size:16px; font-weight:700; letter-spacing:.02em; border-radius:11px}
.mbtigrid button:hover,.mbtigrid button:active{color:#3a2907; border-color:transparent;
  background:linear-gradient(165deg,#f8e2a6,#e7bf66 52%,#c9a24b); box-shadow:0 5px 13px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.45)}
.mbtigrid .skip{grid-column:1 / 5; font-weight:600; font-size:15px; color:var(--gold-lite); padding:13px 0;
  background:rgba(20,16,26,.5); border-style:dashed}

/* 로딩 */
#loading{position:fixed; inset:0; z-index:40; display:none; place-items:center; text-align:center; background:rgba(6,4,9,.9); backdrop-filter:blur(6px)}
#loading.on{display:grid}
#loading .ring{width:60px;height:60px;border-radius:50%;border:2px solid rgba(232,192,106,.25);border-top-color:var(--gold);animation:spin 1s linear infinite;margin:0 auto 18px}
@keyframes spin{to{transform:rotate(360deg)}}
#loading .msg{font-family:var(--ft); font-size:20px; color:var(--gold)}

/* 결과 */
#resVideo{position:relative; height:100svh; width:100%; overflow:hidden}
#resVideo video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000}
#resVideo .grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%, rgba(8,6,12,.9) 100%)}
#resVideo .lead{position:absolute;left:0;right:0;bottom:12svh;text-align:center;padding:0 24px;font-family:var(--fd);font-weight:700;font-size:clamp(21px,6vw,26px);color:#f9f2df;word-break:keep-all;text-shadow:0 2px 4px rgba(0,0,0,.9),0 2px 16px rgba(0,0,0,.85)}
#resVideo .cue2{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:var(--gold);font-size:24px;animation:bob 1.5s ease-in-out infinite}
/* ===== 결과 웹툰 (한 줄씩 등장) ===== */
.story{padding:40px 12px 0}
/* 한 화면에 하나씩(웹툰) — 블록이 화면을 크게 차지 */
.beat{min-height:auto; padding:11vh 0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.beat.sm{min-height:54vh}
.beat>.r.wide{width:100%}  /* 팔자표·오행그래프·대운 = 칼럼 폭 꽉 채움(수축 방지) */
.r{opacity:0; transition:opacity .6s ease, transform .75s cubic-bezier(.16,1.12,.3,1)}
.r.in{opacity:1 !important; transform:none !important}
/* 좌/우/아래에서 확실히 미끄러져 등장 */
.r.fl{transform:translateX(-72px)} .r.fr{transform:translateX(72px)} .r.fp{transform:translateY(60px)}
/* (동작 줄이기 설정이어도 등장 애니메이션은 유지 — 사이트 핵심 연출) */
/* 대사 = 채팅에서 물어볼 때 쓰던 글씨체(고운바탕), 크게 */
.say{font-family:var(--fd); font-size:27px; font-weight:500; color:#fbf6ec; line-height:1.92; max-width:16.5em; word-break:keep-all; text-shadow:0 1px 3px rgba(0,0,0,.55)}
.say.em{font-family:var(--fd); font-weight:700; font-size:31px; color:var(--gold-lite); line-height:1.66; max-width:15em; text-shadow:0 1px 4px rgba(0,0,0,.6)}
.say.soft{font-family:var(--fd); font-weight:500; color:#ece0c6; font-size:23.5px; line-height:1.85}
.say b{font-weight:700}
.echo{font-family:var(--fb); font-size:16px; font-weight:500; letter-spacing:.03em; color:#e4d9bd; border:1px solid rgba(232,192,106,.4); border-radius:100px; padding:12px 24px; background:rgba(13,10,26,.65)}
.chmark{font-family:var(--fd); font-size:22px; font-weight:700; letter-spacing:.14em; color:#fbe8bc; text-shadow:0 0 14px rgba(232,192,106,.45),0 1px 3px rgba(0,0,0,.9)}
.chmark span{display:block; font-size:32px; letter-spacing:0; color:var(--gold-lite); margin-bottom:12px; text-shadow:0 0 24px rgba(232,192,106,.5)}
/* 신녀 컷 이미지 */
.scut{width:min(340px,90%); aspect-ratio:3/4; position:relative; border-radius:16px; overflow:hidden; background:#140f28; box-shadow:0 18px 50px rgba(0,0,0,.62), 0 0 0 1px rgba(232,192,106,.3)}
.scut img{width:100%;height:100%;object-fit:cover; object-position:50% 16%}
.scut .tag{position:absolute; left:0; right:0; bottom:0; text-align:center; font-family:var(--fd); font-weight:600; font-size:16px; color:#f7f0dd; background:linear-gradient(180deg,transparent,rgba(0,0,0,.88) 55%); padding:32px 12px 15px; text-shadow:0 1px 5px #000}
/* 별점 카드 */
.starcard{width:100%; max-width:min(440px,96%); margin:0 auto; background:linear-gradient(180deg,#1c1533,#120d24); border:1px solid rgba(232,192,106,.4); border-radius:18px; padding:22px 22px; box-shadow:0 16px 44px rgba(0,0,0,.5), inset 0 0 30px rgba(232,192,106,.05)}
.starcard .stitle{font-family:var(--ft); font-weight:700; font-size:19px; color:var(--gold-lite); text-align:center; margin-bottom:16px; letter-spacing:.02em}
.starcard .srow{display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-top:1px solid rgba(255,255,255,.06)}
.starcard .srow:first-of-type{border-top:none}
.starcard .slabel{font-family:var(--fb); font-weight:600; font-size:16.5px; color:#eaddbf}
.stars{font-size:20px; letter-spacing:2px; color:#f6d97a; text-shadow:0 0 10px rgba(246,217,122,.4); white-space:nowrap}
.stars .e{color:#5a5068; text-shadow:none}
#detail .detailstar{margin:6px 0 10px}
.cross-say{font-family:var(--fd); font-size:20px; color:#e4d9bd; line-height:1.9; max-width:19em; word-break:keep-all}
.cross-say b{color:var(--gold-lite); font-weight:700}
.crossbtns{display:flex; flex-direction:column; gap:11px; margin-top:20px}
.crossgo{display:block; text-decoration:none; font-family:var(--fb); font-weight:700; font-size:17px; color:#2a1e08; padding:15px 18px; border-radius:13px;
  background:linear-gradient(165deg,#f8e2a6,#e7bf66 52%,#c9a24b); box-shadow:0 6px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5)}
.crossgo:active{transform:translateY(1px)}
/* 팔자표 */
.palja{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; width:100%; max-width:none; margin:0 auto}
.pcol{background:linear-gradient(180deg,#1c1738,#130f28); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:20px 4px; text-align:center; position:relative}
.pcol.me{border-color:rgba(232,192,106,.75); box-shadow:0 0 26px rgba(232,192,106,.24)}
.pcol .cap{font-family:var(--fb); font-size:11px; color:var(--muted); margin-bottom:11px}
.pcol .gz{font-family:var(--ft); font-size:40px; line-height:1.18; display:block}
.pcol .metag{position:absolute; top:-10px; left:50%; transform:translateX(-50%); font-family:var(--fb); font-size:10px; color:#140f08; background:var(--gold); padding:2px 9px; border-radius:8px; font-weight:800}
.w-geum{color:var(--w-geum)} .w-hwa{color:var(--w-hwa)} .w-to{color:var(--w-to)} .w-mok{color:var(--w-mok)} .w-su{color:var(--w-su)}
.oh-legend{display:flex; flex-wrap:wrap; gap:8px 14px; justify-content:center; margin-top:16px; font-family:var(--fb); font-size:11.5px; color:#cdbf9f}
/* ── 전문 만세력표 ── */
.paljaT{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
.pjt{width:100%; border-collapse:collapse; background:linear-gradient(180deg,#191433,#110d24); border:1px solid rgba(232,192,106,.22); border-radius:14px; overflow:hidden; table-layout:fixed}
.pjt th, .pjt td{text-align:center; padding:7px 3px; border:1px solid rgba(255,255,255,.06); vertical-align:middle}
.pjt tr.rhead th{font-family:var(--fb); font-size:12.5px; font-weight:700; color:var(--gold-lite); background:rgba(232,192,106,.09); padding:9px 3px}
.pjt tr.rhead th i{font-style:normal; font-size:10px; color:#140f08; background:var(--gold); padding:1px 6px; border-radius:6px; margin-left:2px; font-weight:800}
.pjt th:first-child{font-family:var(--fb); font-size:10.5px; font-weight:600; color:#9a8f78; background:rgba(0,0,0,.22); width:52px; white-space:nowrap}
.pjt td.me{background:rgba(232,192,106,.10)}
.pjt .s10{font-family:var(--fb); font-size:12.5px; font-weight:600; color:#e7dcc0}
.pjt .s10.s2{font-size:10.5px; color:#b6ab90; line-height:1.35}
.pjt tr.gzr td{padding:4px 3px}
.pjt tr.gzr .gz{font-family:var(--ft); font-size:30px; font-weight:700; line-height:1.12; display:block}
.pjt tr.jj b{font-family:var(--ft); font-size:14px; font-weight:700; margin:0 1px}
.pjt .uns{font-family:var(--fb); font-size:12px; color:#d8ccae}
.pjt .nay{font-family:var(--fb); font-size:11px; color:#b0a488}
.pjt tr.ssr td{padding:5px 2px}
.pjt .ssal{display:inline-block; font-family:var(--fb); font-size:10px; color:#c9bd9d; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:5px; padding:1px 4px; margin:1px}
.pjt .ssal.good{color:#f6dc9a; border-color:rgba(232,192,106,.5); background:rgba(232,192,106,.12)}
.pjt .dim{color:#6a6250}
.pjmeta{display:flex; justify-content:center; gap:22px; margin-top:11px; font-family:var(--fb); font-size:12.5px; color:#bcb094}
.pjmeta b{color:#f0e4c6; font-weight:700}
.ssal12{font-weight:700; color:#e8c06a; font-size:12px}
.gm{color:#d98f8f; font-size:11px; font-weight:700}
/* 신강신약 반원 게이지(점신식) */
.gywrap{margin:24px auto 4px; max-width:420px; padding:18px 16px 15px; background:rgba(0,0,0,.24); border:1px solid rgba(232,192,106,.2); border-radius:15px}
.gauge{position:relative; width:100%; max-width:240px; margin:10px auto 0}
.gauge svg{width:100%; height:auto; display:block; overflow:visible}
.gtrack{fill:none; stroke:rgba(255,255,255,.09); stroke-width:11; stroke-linecap:round}
.gprog{fill:none; stroke-width:11; stroke-linecap:round; transition:stroke-dasharray .7s ease}
.gnum{position:absolute; left:0; right:0; bottom:2px; text-align:center; font-family:var(--ft)}
.gnum b{font-size:36px; font-weight:800; display:block; line-height:1}
.gnum span{font-size:13px; color:#cdbfa0; letter-spacing:.02em}
.gyleg{display:flex; justify-content:center; gap:15px; flex-wrap:wrap; font-family:var(--fb); font-size:11px; color:#a99c7d; margin-top:14px}
.gyleg i{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:middle}
/* 오행 그래프 */
.ohwrap{width:100%; max-width:none; margin:0 auto; padding:0 6px}
.ohttl{font-family:var(--ft); font-size:16px; letter-spacing:.34em; color:var(--gold-lite); margin-bottom:20px; text-align:center}
.oh5{display:flex; flex-direction:column; gap:17px}
.ohrow{display:flex; align-items:center; gap:14px}
/* 오행 오각형(상생상극 다이어그램) */
.ohpenta{display:block; width:100%; max-width:310px; margin:6px auto 2px; overflow:visible}
.ohpenta .oS{stroke:#c9a24b; stroke-width:1.7; opacity:.72}
.ohpenta .oK{stroke:#8a7666; stroke-width:1.2; stroke-dasharray:3 3; opacity:.5}
.ohpenta .onbg{fill:rgba(18,14,22,.9); stroke:rgba(255,255,255,.07)}
.ohpenta .onw{fill:#fff; font-family:var(--ft); font-size:14px; font-weight:700; text-anchor:middle}
.ohpenta .onp{fill:#e8dcc0; font-family:var(--fb); font-size:8px; font-weight:600; text-anchor:middle}
.ohleg2{display:flex; justify-content:center; gap:20px; font-family:var(--fb); font-size:11px; color:#a99c7d; margin:2px 0 16px}
.ohleg2 i{display:inline-block; width:16px; height:0; vertical-align:middle; margin-right:6px}
.ohleg2 .ls-s{border-top:2px solid #c9a24b} .ohleg2 .ls-k{border-top:2px dashed #8a7666}
/* 오행 분포 — 전문형(십성·상태·%) */
.oh5pro{display:flex; flex-direction:column; gap:13px; max-width:440px; margin:0 auto}
.ohr{display:flex; align-items:center; gap:13px}
.ohr .oh-med{width:42px; height:42px; font-size:20px; flex:0 0 42px}
.ohbody{flex:1 1 auto; min-width:0}
.ohtop{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px}
.ohname{font-family:var(--fb); font-size:13.5px; color:#ece0c4; font-weight:600}
.ohname em{font-style:normal; color:#a99c7d; font-size:12px; margin-left:4px}
.ohst{font-family:var(--fb); font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:11px; letter-spacing:.02em}
.st-lack{color:#e0a0a0; background:rgba(224,120,120,.15)}
.st-ok{color:#93cfa0; background:rgba(120,200,140,.15)}
.st-over{color:#e8b45c; background:rgba(224,168,80,.17)}
.ohtr{height:9px; border-radius:5px; background:rgba(255,255,255,.08); overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.ohtr i{display:block; height:100%; width:var(--v); border-radius:5px}
.ohtr i.w-geum{background:linear-gradient(90deg,#aeb4c0,#e8ecf2)} .ohtr i.w-hwa{background:linear-gradient(90deg,#c4543d,#f0a48f)}
.ohtr i.w-to{background:linear-gradient(90deg,#c69647,#f1d094)} .ohtr i.w-mok{background:linear-gradient(90deg,#57a574,#a9dcb9)} .ohtr i.w-su{background:linear-gradient(90deg,#5a8ec3,#a6cdef)}
.r.in .ohtr i{animation:ohgrow 1.2s cubic-bezier(.2,.75,.2,1)}
.ohpct{flex:0 0 auto; width:52px; text-align:right; font-family:var(--fb); font-size:15px; font-weight:700; color:#e6dcc0; font-variant-numeric:tabular-nums}
.ohpct small{font-size:10px; color:#a99c7d; font-weight:600; margin-left:1px}
.ohr.zero .oh-med{opacity:.45; filter:grayscale(.5)} .ohr.zero .ohpct{color:#8a7f66}
/* 용어 설명 툴팁 */
.tipq{display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin-left:6px; border-radius:50%; border:1px solid rgba(232,192,106,.5); background:rgba(232,192,106,.1); color:#e8c06a; font-family:var(--fb); font-size:11px; font-weight:700; cursor:pointer; vertical-align:middle; line-height:1; padding:0}
.tipq:hover{background:rgba(232,192,106,.22)}
.tippop{position:fixed; z-index:9998; max-width:min(300px,86vw); padding:13px 15px; background:linear-gradient(158deg,#241c14,#17121b); border:1px solid rgba(232,192,106,.4); border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.6); font-family:var(--fb); font-size:13px; line-height:1.65; color:#eaddc4; animation:tippop .18s ease}
.tippop b{color:#f0d493} @keyframes tippop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tippop.big{max-width:min(400px,90vw); max-height:80vh; overflow-y:auto; padding:18px 18px 6px; animation:tippopc .2s ease}
@keyframes tippopc{from{opacity:0}to{opacity:1}}
.tgttl{font-family:var(--ft); font-size:16px; color:var(--gold-lite); text-align:center; margin-bottom:14px; letter-spacing:.06em}
.tgi{padding:10px 0; border-top:1px solid rgba(232,192,106,.14)}
.tgi:first-of-type{border-top:none}
.tgi b{display:block; color:#f0d493; font-family:var(--fb); font-size:13.5px; font-weight:700; margin-bottom:3px}
.tgi span{display:block; font-size:12.5px; line-height:1.6; color:#d8cbb0}
.tipmask{position:fixed; inset:0; z-index:9997}
/* 만세력 헤더 + 용어풀이 버튼 */
.pjhead{display:flex; align-items:center; justify-content:center; gap:7px; font-family:var(--ft); font-size:16px; color:var(--gold-lite); letter-spacing:.06em; margin-bottom:14px}
.pjhead small{font-family:var(--fb); font-size:11px; color:#9a8c6c; letter-spacing:0}
.oh-med{width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--ft); font-size:22px; color:#100c14; box-shadow:0 2px 10px rgba(0,0,0,.5); flex:0 0 48px}
.oh-med.w-geum{background:radial-gradient(circle at 38% 32%,#f4f6fa,#b6bcc8);color:#222}
.oh-med.w-hwa{background:radial-gradient(circle at 38% 32%,#f2ab97,#c4543d);color:#2a0d07}
.oh-med.w-to{background:radial-gradient(circle at 38% 32%,#f1d094,#c69647);color:#231702}
.oh-med.w-mok{background:radial-gradient(circle at 38% 32%,#a9dcb9,#57a574);color:#08240f}
.oh-med.w-su{background:radial-gradient(circle at 38% 32%,#a6cdef,#5a8ec3);color:#05162a}
.oh-track{flex:1; height:22px; border-radius:11px; background:rgba(255,255,255,.1); overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.oh-track i{display:block; height:100%; width:var(--v); border-radius:11px; background:currentColor; box-shadow:0 0 16px currentColor}
.r.in .oh-track i{animation:ohgrow 1.3s cubic-bezier(.2,.75,.2,1)}
@keyframes ohgrow{from{width:0}to{width:var(--v)}}
.ohrow .n{width:26px; text-align:right; font-family:var(--ft); font-size:20px; color:#e6dcc0}
.ohrow.zero .oh-med{opacity:.5; filter:grayscale(.4)}
/* 대운 칩 */
.daeun{display:flex; gap:10px; overflow-x:auto; padding:2px 2px 10px; max-width:min(460px,92vw)}
.daeun::-webkit-scrollbar{height:0}
.dchip{flex:0 0 auto; min-width:78px; text-align:center; padding:14px 10px; border-radius:13px; background:#160f2a; border:1px solid rgba(255,255,255,.08)}
.dchip.now{background:linear-gradient(180deg,#2c1d20,#1e1226); border-color:rgba(200,69,47,.75); box-shadow:0 0 18px rgba(200,69,47,.32)}
.dchip .age{font-family:var(--fb); font-size:12px; color:var(--muted); margin-bottom:6px}
.dchip .gz{font-family:var(--ft); font-size:25px}
.dchip .nowtag{display:none} .dchip.now .nowtag{display:block; font-size:11px; color:var(--cinnabar-soft); margin-top:5px; font-family:var(--fb)}
/* 대운·세운·월운 표 */
.unwrap{width:100%}
.untitle{font-family:var(--ft); font-size:15px; color:var(--gold-lite); letter-spacing:.1em; margin:20px 0 9px; text-align:center}
.untitle small{font-family:var(--fb); font-size:11px; color:#9a8c6c; letter-spacing:0; margin-left:6px}
.unrow{display:flex; gap:7px; overflow-x:auto; padding:2px 2px 9px; max-width:min(460px,92vw); margin:0 auto; -webkit-overflow-scrolling:touch}
/* 모바일(터치): 스크롤바 완전 숨김 — 스와이프로 넘김(지저분한 바 방지) */
.unrow,.daeun,.paljaT{scrollbar-width:none}
.unrow::-webkit-scrollbar,.daeun::-webkit-scrollbar,.paljaT::-webkit-scrollbar{display:none; width:0; height:0}
/* PC(마우스)에서만 얇은 금색 바 노출(가로 스크롤 안내) */
@media (hover:hover) and (pointer:fine){
  .unrow,.daeun,.paljaT{scrollbar-width:thin; scrollbar-color:rgba(232,192,106,.35) transparent}
  .unrow::-webkit-scrollbar,.daeun::-webkit-scrollbar,.paljaT::-webkit-scrollbar{display:block; height:5px}
  .unrow::-webkit-scrollbar-track,.daeun::-webkit-scrollbar-track,.paljaT::-webkit-scrollbar-track{background:transparent}
  .unrow::-webkit-scrollbar-thumb,.daeun::-webkit-scrollbar-thumb,.paljaT::-webkit-scrollbar-thumb{background:rgba(232,192,106,.32); border-radius:3px}
  .unrow::-webkit-scrollbar-thumb:hover,.daeun::-webkit-scrollbar-thumb:hover,.paljaT::-webkit-scrollbar-thumb:hover{background:rgba(232,192,106,.5)}
}
.unrow .dchip{position:relative; flex:0 0 auto; min-width:50px; padding:8px 5px; border-radius:10px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.06); text-align:center}
.unrow .dchip.now{background:rgba(232,192,106,.12); border-color:rgba(232,192,106,.5)}
.dtop{font-family:var(--fb); font-size:11px; color:#c9bb98; font-weight:600}
.dss{font-family:var(--fb); font-size:9.5px; color:#9a8c6c; margin:1px 0 4px}
.gz2{font-family:var(--ft); font-size:18px; font-weight:700; line-height:1.15}
.gz2.w-mok{color:#7cc98f} .gz2.w-hwa{color:#e08a76} .gz2.w-to{color:#e8c983} .gz2.w-geum{color:#dce0e8} .gz2.w-su{color:#86b4e6}
.unrow .dchip .nowtag{display:none} .unrow .dchip.now .nowtag{display:block; font-size:9px; color:#e8c06a; margin-top:3px; font-family:var(--fb)}
/* 공유카드 */
.share-card{width:100%; margin:0 auto; background:linear-gradient(180deg,#1a1330,#110c22); border:1px solid rgba(232,192,106,.4); border-radius:18px; padding:26px 24px; box-shadow:0 20px 56px rgba(0,0,0,.6), inset 0 0 30px rgba(232,192,106,.06); max-width:min(440px,96%); position:relative}
.share-card .cseal{position:absolute; top:15px; right:16px; min-width:32px; height:32px; border-radius:5px; background:var(--cinnabar); color:#fbeee6; font-family:var(--ft); display:flex; align-items:center; justify-content:center; font-size:13px; letter-spacing:-1px; transform:rotate(-4deg); padding:2px 5px}
.share-card .sh-t{font-family:var(--fb); font-size:12.5px; font-weight:600; letter-spacing:.12em; color:var(--gold-lite); margin-bottom:6px}
.share-card .sh-n{font-family:var(--fh); font-weight:700; font-size:23px; color:#fbf4e2; margin-bottom:14px}
.share-card .sh-mini{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; font-family:var(--fh); font-weight:700; font-size:20px; color:#e3d6b4; padding:11px 0; border-top:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.07); margin-bottom:12px}
.share-card .sh-row{display:flex; justify-content:space-between; gap:10px; font-family:var(--fb); font-weight:500; font-size:16px; padding:7px 0; color:#e3d8bd}
.share-card .sh-row b{color:#fbf4e0; font-weight:700; text-align:right}
.share-card .sh-sum{margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.09); text-align:left}
.share-card .sh-sum p{font-family:var(--fd); font-weight:500; font-size:16.5px; line-height:1.8; color:#f2ead3; margin:9px 0; word-break:keep-all}
.share-card .sh-sum b{color:var(--gold-lite); font-weight:700; margin-right:4px}
.share-card .sh-q{margin-top:14px; padding-top:13px; border-top:1px solid rgba(232,192,106,.28); font-family:var(--fd); font-weight:700; font-size:19px; color:var(--gold-lite); text-align:center; line-height:1.62}
.share-btns{display:flex; gap:9px; margin-top:16px}
.share-btns button{flex:1; padding:14px 6px; border-radius:11px; border:1px solid rgba(232,192,106,.4); background:rgba(255,255,255,.05); color:#f6efdd; font-family:var(--fb); font-weight:600; font-size:14.5px; cursor:pointer}
.share-btns button.kko{background:#f7e359; color:#3a2d00; border-color:#f7e359; font-weight:700}
.share-btns button:active{transform:scale(.97)}
/* 공유 메뉴(문자·X·스레드·페북·카톡·링크) */
.share-menu{display:none; flex-wrap:wrap; gap:8px; margin-top:10px}
.share-menu.open{display:flex; animation:shmFade .2s ease}
@keyframes shmFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.share-menu a{flex:1 1 30%; box-sizing:border-box; text-align:center; padding:12px 6px; border-radius:11px; border:1px solid rgba(232,192,106,.32); background:rgba(255,255,255,.055); color:#f2e8cf; font-family:var(--fb); font-weight:600; font-size:13.5px; cursor:pointer; text-decoration:none; user-select:none}
.share-menu a:active{transform:scale(.97); filter:brightness(1.12)}
/* 개인정보 안내 문구 */
.privacy-note{margin:16px 2px 2px; font-family:var(--fb); font-size:12.8px; line-height:1.72; color:#cdbfa0; background:rgba(0,0,0,.22); border:1px dashed rgba(232,192,106,.32); border-radius:11px; padding:12px 14px; text-align:center; word-break:keep-all}
.privacy-note b{color:#f2e2bd; font-weight:700}
.clr-btn{display:inline-block; margin-top:8px; padding:8px 15px; font-family:var(--fb); font-size:12.5px; font-weight:600; color:#e8c06a; background:rgba(232,192,106,.09); border:1px solid rgba(232,192,106,.4); border-radius:20px; cursor:pointer; transition:background .18s}
.clr-btn:hover{background:rgba(232,192,106,.18)}
.clr-btn:disabled{color:#9a8c6c; border-color:rgba(154,140,108,.35); background:transparent; cursor:default}
/* 토스트 알림 */
.toast{position:fixed; left:50%; bottom:38px; transform:translateX(-50%) translateY(18px); background:#1a1330; color:#f4e6c2; border:1px solid rgba(232,192,106,.42); padding:13px 22px; border-radius:13px; font-family:var(--fb); font-weight:600; font-size:14px; z-index:99999; opacity:0; transition:opacity .3s, transform .3s; box-shadow:0 14px 44px rgba(0,0,0,.6); max-width:86%; text-align:center}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
/* 공유카드 2장 분할 */
.share-wrap{display:flex; flex-direction:column; gap:18px; width:100%; align-items:center}
.share-wrap .share-card{margin:0}
.share-card .sh-t{display:flex; justify-content:space-between; align-items:center; gap:10px}
.sh-pg{font-family:var(--fb); font-weight:700; font-size:11px; color:#b9a878; letter-spacing:.08em; opacity:.85}
.share-card .sh-n.sm{font-size:20px}
.sh-foot{margin-top:16px; padding-top:12px; border-top:1px solid rgba(232,192,106,.22); text-align:center; font-family:var(--fb); font-weight:600; font-size:12px; letter-spacing:.04em; color:#c9b98f}
/* 더 깊게 보기 · 상세풀이 */
.deep-btn{display:block; width:calc(100% - 40px); margin:22px auto 60px; padding:22px 18px; border:1.5px solid rgba(232,192,106,.6); border-radius:16px; background:linear-gradient(180deg,#221845,#140e28); color:#fbeecb; font-family:var(--fb); font-weight:800; font-size:23px; letter-spacing:.01em; cursor:pointer; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.5)}
.deep-btn small{display:block; font-family:var(--fb); font-weight:600; font-size:14px; color:#d8c79a; margin-top:8px; letter-spacing:.01em}
#detail{display:none; padding:0 22px 80px} #detail.on{display:block}
#detail .dh{font-family:var(--fd); font-weight:700; font-size:17px; letter-spacing:.01em; color:var(--gold-lite); text-align:center; padding:22px 12px 12px; line-height:1.55; word-break:keep-all}
#detail h3{font-family:var(--fd); font-weight:700; font-size:24px; color:var(--gold-lite); margin:32px 0 11px; padding-bottom:10px; border-bottom:1px solid rgba(232,192,106,.28); text-shadow:0 1px 3px rgba(0,0,0,.6)}
#detail p{font-family:var(--fd); font-size:18.5px; font-weight:500; line-height:1.95; color:#efe5ce; margin:10px 0; word-break:keep-all}
#detail .note{font-family:var(--fb); font-size:11.5px; color:var(--muted); margin-top:24px; text-align:center}
.home{position:fixed;top:14px;left:14px;z-index:45;width:40px;height:40px;border-radius:50%;background:rgba(10,8,14,.55);border:1px solid rgba(232,192,106,.4);color:var(--gold);display:grid;place-items:center;text-decoration:none;font-size:16px;backdrop-filter:blur(4px)}
/* 오행도 */
.ohdo{margin:8px 0 26px}
.ohd-ttl{font-family:var(--fd);font-weight:700;font-size:18px;letter-spacing:.18em;color:var(--gold-lite);text-align:center;margin-bottom:10px}
.ohd-lg{text-align:center;font-family:var(--fb);font-size:12px;margin:6px 0 12px;display:flex;gap:16px;justify-content:center}
.ohd-t{width:100%;border-collapse:collapse;font-family:var(--fb);font-size:12.5px}
.ohd-t th{color:#9a8f78;font-weight:600;padding:6px 4px;border-bottom:1px solid rgba(232,192,106,.25);font-size:11.5px}
.ohd-t td{padding:7px 4px;border-bottom:1px solid rgba(255,255,255,.06);color:#e7dcc4;text-align:center}
.ohd-t td:first-child{text-align:left;white-space:nowrap}
.ohd-t tr.me td{background:rgba(232,192,106,.10);color:#f6dc9a}
.ohd-c{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
/* 스크롤 정사각 영상 */
.scrollvid{width:min(88%,360px);aspect-ratio:1/1;object-fit:cover;border-radius:18px;display:block;margin:0 auto;border:1px solid rgba(232,192,106,.3);box-shadow:0 10px 34px rgba(0,0,0,.5)}
/* 공유카드 컬러 팔자 블록 */
.sh-palja{display:flex;gap:7px;justify-content:center;padding:14px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:14px}
.sp-col{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;max-width:62px}
.sp-cap{font-family:var(--fb);font-size:11px;font-weight:600;color:#a99e83;margin-bottom:1px}
.sp-col .spc{font-family:var(--fh);font-weight:800;font-size:27px;width:100%;aspect-ratio:1;display:grid;place-items:center;border-radius:9px;line-height:1;box-shadow:0 3px 8px rgba(0,0,0,.35)}
.spc.w-mok-bg{background:linear-gradient(160deg,#3fb571,#2b8a54);color:#eafff2}
.spc.w-hwa-bg{background:linear-gradient(160deg,#e0563a,#c13c22);color:#fff2ee}
.spc.w-to-bg{background:linear-gradient(160deg,#e3b256,#caa03c);color:#2a1c00}
.spc.w-geum-bg{background:linear-gradient(160deg,#eef1f6,#d4dae5);color:#20242e}
.spc.w-su-bg{background:linear-gradient(160deg,#3a7fc4,#255f9e);color:#eaf3ff}
.spc.empty{background:rgba(255,255,255,.05);color:#6a6250;box-shadow:none}

/* ── 정적 콘텐츠 푸터(애드센스/SEO: 크롤 가능한 안내·내부링크) ── */
.sitefoot{max-width:660px;margin:38px auto 0;padding:26px 20px 44px;border-top:1px solid rgba(232,192,106,.22);position:relative;z-index:2;font-family:var(--fb)}
.sitefoot .sf-about h2{font-family:var(--ft);font-weight:800;font-size:18px;color:var(--gold-lite);margin-bottom:10px;line-height:1.4}
.sitefoot .sf-about p{font-size:13.5px;line-height:1.88;color:#c3b596;margin-bottom:11px;word-break:keep-all}
.sitefoot .sf-about b{color:#e7d6a8;font-weight:700}
.sf-nav{display:flex;flex-wrap:wrap;gap:18px 24px;margin:24px 0 12px}
.sf-col{flex:1;min-width:150px}
.sf-col h3{font-family:var(--ft);font-weight:700;font-size:13.5px;color:var(--gold);margin-bottom:8px}
.sf-col a{display:block;font-size:13px;color:#b7ab8c;text-decoration:none;padding:3.5px 0;line-height:1.4}
.sf-col a:hover{color:var(--gold-lite)}
.sf-copy{font-size:12px;color:#8a7f66;text-align:center;margin-top:14px}