:root{
  /* 한자 전용 폰트 스택 — Pretendard에는 한자 글리프가 없어 시스템 폰트로 떨어진다.
     한국식 자형을 쓰는 폰트를 먼저 두어야 중국 간체 자형으로 렌더되지 않는다. */
  /* 한자(간지·건제12신·황흑도). 시스템 폰트에 기대면 기기마다 자형이 달라져서
     웹폰트로 고정한다. 쓰는 글자가 73자뿐이라 text= 부분집합으로 13KB면 끝난다. */
  --hanja:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  /* 모던·심플 팔레트 (토스st 무채색 + 우리 포인트 컬러) */
  --bg1:#f4f5f7; --bg2:#f4f5f7; --bg3:#f4f5f7;
  --ink:#191f28; --sub:#8b95a1; --card:#ffffff; --line:#eaecef;
  /* 포인트 색 — 강조 글자·게이지·뱃지에 쓴다 (누르는 것은 아래 --btn 검정)
     tint 는 그 색의 아주 옅은 바탕 (말풍선·태그 배경) */
  --accent:#f0417e; --accent2:#d81f63; --tint:#ffeaf2;
  /* 누르는 것은 검정으로 통일한다. 강조(파랑)와 행동(검정)을 색으로 갈라두면
     화면에서 "눌러야 할 것"이 하나로 보인다. 버튼 색만 여기서 갈아끼우면 된다 */
  --btn:#16181d; --btn-on:#000000;        /* 기본 / 누른 순간 */
  --shadow:0 2px 10px rgba(25,31,40,.05);
  --app-shift:0px;   /* 앱 컬럼 가로 오프셋 (데스크탑 좌/우 패널 구조에선 0 = 중앙) */
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
/* 스크롤바 자리를 항상 확보 → 페이지마다 폭/정렬이 안 흔들림 */
html{overflow-y:scroll; scrollbar-gutter:stable;}
body{
  font-family:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  color:var(--ink); letter-spacing:-.2px;
  background:var(--bg1); min-height:100vh;
  display:flex; flex-direction:column; align-items:center; padding:62px 0 0;
}
a{color:inherit; text-decoration:none;}
#app{width:100%; display:flex; flex-direction:column; align-items:center;}
.wrap{width:100%; max-width:440px; margin:0 auto; padding:16px; transform:translateX(var(--app-shift));}

/* 상단 고정 헤더 틀 (완전 고정) */
.topbar-fixed{position:fixed; top:0; left:0; right:0; z-index:100; background:#fff;
  border-bottom:1px solid var(--line);}
.topbar-inner{max-width:440px; margin:0 auto; padding:10px 16px; transform:translateX(var(--app-shift));}
.card{background:var(--card); border-radius:20px; box-shadow:var(--shadow);
  padding:26px 20px; text-align:center; position:relative; overflow:hidden;}
/* 읽는 화면(사주·궁합·운세 결과)은 스크롤이 아주 길다. 흰 카드가 회색 바탕 위에
   얹혀 있으면 글을 읽는 내내 상자 모서리가 따라다닌다. 여기서는 상자를 없애고
   바탕째 흰색으로 간다 — 목록 화면은 카드로 나뉘어야 하니 그대로 둔다.
   없애는 건 상자뿐이다. 안쪽 여백은 건드리지 않는다 — 같이 걷어냈더니
   글이 화면 가장자리에 붙어버렸다. */
body.reading{background:#fff;}
/* 읽는 화면은 글이 주인공이다. 좌우 여백 20px + wrap 16px = 36px가 양쪽에
   물려 한 줄에 들어가는 글자가 확 줄었다. 상자가 없으니 여백도 줄인다 */
/* 12+8=20px는 이번엔 반대로 너무 붙었다 — 글이 화면 테두리를 스친다.
   26px면 한 줄 글자 수는 거의 그대로면서 숨 쉴 자리가 생긴다 */
body.reading .wrap{padding-left:16px; padding-right:16px;}
body.reading .wrap > .card{box-shadow:none; border-radius:0; padding-left:10px; padding-right:10px;}

  /* 목록 사이: flex gap이 간격 담당 */

/* ===== 홈: 사이트 헤더 (로고 + 검색 + 문의) ===== */
.site-header{display:flex; align-items:center; justify-content:space-between;
  padding:0; gap:8px;}
.site-header .logo{font-size:22px; font-weight:700; letter-spacing:-.5px; color:var(--ink);
  display:flex; align-items:center; gap:5px;}
.site-header .logo .dot{color:var(--accent);}
.hactions{display:flex; gap:8px;}
/* 이모지였을 땐 흰 동그라미를 깔아야 배경에서 떠 보였는데, SVG 로 바꾸고 나서는
   아이콘 자체가 또렷해서 그 동그라미가 군더더기가 됐다 */
.hicon{width:40px; height:40px; border-radius:50%; background:transparent;
  border:none; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--ink); transition:transform .12s ease, background .12s ease;
  text-decoration:none;}
.hicon svg{width:22px; height:22px; display:block;}
.hicon:active{transform:scale(.9);}
@media (hover:hover){ .hicon:hover{background:#f2f4f6;} }
/* 코인 배지 (상단 노출) */
.coin-badge{display:flex; align-items:center; gap:4px; height:40px; padding:0 13px 0 11px;
  border-radius:999px; background:linear-gradient(135deg,#ffe9a8,#ffd66b); color:#8a5a00;
  font-size:14.5px; font-weight:700; text-decoration:none; box-shadow:0 2px 6px rgba(220,160,20,.35);
  transition:transform .12s ease;}
.coin-badge b{font-size:15px; font-weight:700;}
.coin-badge:active{transform:scale(.92);}
.searchbar{margin-top:10px;}
.searchbar input{width:100%; padding:13px 16px; border-radius:14px; border:2px solid #e6f1fb;
  font-size:15px; outline:none; background:#fff; color:var(--ink);}
.searchbar input:focus{border-color:var(--accent2);}
.noresult{text-align:center; color:var(--sub); font-size:14px; padding:30px 0;}

/* ===== 상단바 ===== */
.topbar{width:100%; max-width:440px; margin:0 auto 12px; display:flex; align-items:center;
  justify-content:space-between;}
.topbar .home{font-weight:600; font-size:17px; color:var(--ink);}


/* ===== 홈: 히어로 ===== */
.hero{text-align:center; padding:22px 10px 6px;}
.hero .big{font-size:52px; line-height:1;}
.hero h1{font-size:24px; font-weight:700; margin:10px 0 4px; letter-spacing:-.5px;}
.hero p{color:var(--sub); font-size:14px; margin:0;}

/* ===== 홈: 풀와이드 히어로 배너 (스와이프) ===== */
.hero-banner{position:relative; margin-bottom:6px;}
.hero-track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; border-radius:22px;
  box-shadow:var(--shadow); -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.hero-track::-webkit-scrollbar{display:none;}
.hslide{flex:0 0 100%; scroll-snap-align:center; position:relative; min-height:188px;
  display:flex; flex-direction:column; justify-content:center; padding:26px 24px;
  color:#fff; overflow:hidden; cursor:pointer;}
.hslide .bgemoji{position:absolute; right:-12px; bottom:-24px; font-size:150px; line-height:1;
  opacity:.30; transform:rotate(-8deg); pointer-events:none;}
.hslide .htag{font-size:11.5px; font-weight:600; background:rgba(255,255,255,.28);
  width:fit-content; padding:4px 11px; border-radius:999px; margin-bottom:9px; z-index:1;}
.hslide .htitle{font-size:26px; font-weight:700; line-height:1.2; letter-spacing:-.5px;
  text-shadow:0 2px 10px rgba(0,0,0,.18); z-index:1;}
.hslide .hsub{font-size:14px; font-weight:600; margin-top:7px; opacity:.96; z-index:1;
  text-shadow:0 1px 6px rgba(0,0,0,.15);}
.hslide .hbtn{margin-top:15px; align-self:flex-start; background:#fff; color:#2b2b3a;
  font-size:14px; font-weight:600; padding:10px 18px; border-radius:999px; z-index:1;}
.hslide.soon .hbtn{background:rgba(255,255,255,.55);}
.hero-count{position:absolute; right:12px; bottom:12px; background:rgba(0,0,0,.35);
  color:#fff; font-size:11.5px; font-weight:700; padding:4px 11px; border-radius:999px; z-index:2;}
.hero-dots{display:flex; gap:6px; justify-content:center; margin-top:11px;}
.hero-dots i{width:8px; height:8px; border-radius:50%; background:#cfdae6; transition:all .25s; cursor:pointer;}
.hero-dots i.on{background:var(--btn); width:18px; border-radius:999px;}
/* 좌우 화살표 (마우스 있는 기기에서만 노출) */
.hero-nav{position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px;
  border-radius:50%; background:rgba(255,255,255,.9); border:none; cursor:pointer;
  font-size:24px; font-weight:700; color:var(--ink); line-height:1;
  align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(0,0,0,.18); z-index:3;
  display:none; padding-bottom:3px;}
.hero-nav:active{transform:translateY(-50%) scale(.92);}
.hero-nav.prev{left:10px;} .hero-nav.next{right:10px;}
@media (hover:hover){ .hero-nav{display:flex;} }

/* ===== 홈: 카테고리 칩 필터 ===== */
.catbar{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 4px; margin-bottom:16px; scrollbar-width:none;}
.catbar::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto; cursor:pointer; border:none; background:rgba(255,255,255,.7);
  color:var(--sub); font-size:13.5px; font-weight:600; padding:9px 15px; border-radius:999px;
  transition:all .12s ease; white-space:nowrap;}
.chip:active{transform:scale(.94);}
.chip.on{background:var(--btn); color:#fff;
  box-shadow:0 5px 12px rgba(78,175,255,.26);}

/* ===== 홈: 테스트 카드 목록 ===== */
.section-title{font-size:15px; font-weight:600; margin:22px 4px 12px; color:var(--ink);}
.tlist{display:flex; flex-direction:column; gap:14px;}
.tcard{display:flex; align-items:center; gap:14px; background:var(--card);
  border-radius:20px; box-shadow:var(--shadow); padding:16px; cursor:pointer;
  transition:transform .12s ease;}
.tcard:active{transform:scale(.985);}
.tcard .thumb{width:66px; height:66px; border-radius:16px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:34px;}
.tcard .info{flex:1; min-width:0; text-align:left;}
.tcard .badge{display:inline-block; font-size:11px; font-weight:600; color:var(--accent);
  background:var(--tint); padding:3px 9px; border-radius:999px; margin-bottom:5px;}
.tcard .t-title{font-size:16px; font-weight:600; margin:0 0 3px;}
.tcard .t-tag{font-size:12.5px; color:var(--sub); line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.tcard .t-players{font-size:11px; color:#9babbd; font-weight:700; margin-top:5px;}
.tcard .arrow{color:#c6d1dd; font-size:20px; font-weight:600;}
.soon{opacity:.55;}
.soon .arrow{color:transparent;}

/* ===== 홈: 인기 순위 ===== */
.ranklist{display:flex; flex-direction:column;}
.rankrow{display:flex; align-items:center; gap:12px; padding:11px 6px; cursor:pointer;
  border-top:1px solid rgba(100,124,150,.14); transition:opacity .12s ease;}
.rankrow:first-child{border-top:none;}
.rankrow:active{opacity:.6;}
.rankrow .num{width:24px; text-align:center; font-size:18px; font-weight:700; color:#b9c8d6; flex-shrink:0;}



.rankrow .thumb{width:44px; height:44px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:24px;}
.rankrow .info{flex:1; min-width:0;}
.rankrow .r-name{font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rankrow .r-plays{font-size:11.5px; color:var(--sub); font-weight:700; margin-top:2px;}
.rankrow .arrow{color:#c6d1dd; font-size:18px; font-weight:600;}

/* ===== 테스트: 시작 화면 ===== */
.emoji-hero{font-size:64px; line-height:1; margin:6px 0 10px; animation:pop .6s ease;}
h1.q{font-size:26px; margin:6px 0 4px; font-weight:600; letter-spacing:-.5px;}
.subtitle{color:var(--sub); font-size:14px; margin:0 0 4px;}
.tag{display:inline-block; background:var(--tint); color:var(--accent); font-size:12px;
  font-weight:700; padding:5px 12px; border-radius:999px; margin:12px 0 2px;}
.count{color:var(--sub); font-size:13px; margin-top:14px;}

.btn{display:block; width:100%; border:none; cursor:pointer;
  background:var(--btn);
  color:#fff; font-size:16.5px; font-weight:700; padding:16px; border-radius:14px;
  margin-top:18px; letter-spacing:-.3px;
  transition:transform .12s ease, filter .12s ease;}
.btn:active{transform:scale(.985); filter:brightness(.94);}
.btn.ghost{background:#f2f4f6; color:#4e5968; box-shadow:none;}
.btn.kakao{background:#FEE500; color:#3a1d1d; box-shadow:0 8px 18px rgba(254,229,0,.35);}

/* ===== 테스트: 질문 화면 ===== */
.progress{height:8px; background:#eaf0f6; border-radius:999px; overflow:hidden; margin-bottom:20px;}
.progress > i{display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .35s ease;}
.qnum{color:var(--accent2); font-weight:600; font-size:13px; letter-spacing:1px;}
.qtext{font-size:20px; font-weight:600; margin:8px 4px 22px; line-height:1.45;}
.opt{display:block; width:100%; text-align:left; cursor:pointer;
  background:#f6f9fc; border:2px solid transparent; color:var(--ink);
  font-size:16px; font-weight:600; padding:16px 18px; border-radius:15px; margin-bottom:12px;
  transition:all .15s ease;}
@media (hover:hover){ .opt:hover{border-color:var(--accent2);} }
.opt:active{transform:scale(.985); background:#eaf3fb;}
.opt.sel{border-color:var(--accent); background:var(--tint); color:var(--accent);
  transform:scale(.99); transition:all .05s ease;}
/* ===== 리커트(척도) 답변 UI ===== */
.lk-statement{font-size:20px; font-weight:600; margin:8px 4px 4px; line-height:1.5; min-height:84px;
  display:flex; align-items:center; justify-content:center; text-align:center; word-break:keep-all;}
.lk-poles{display:flex; justify-content:space-between; align-items:center; margin:6px 2px 14px;}
.lk-lbl{font-size:13px; font-weight:600; white-space:nowrap;}
.lk-lbl.agree{color:#22b07d;} .lk-lbl.disagree{color:#7dc5ff;}
.lk-dots{display:flex; align-items:center; justify-content:space-between; width:100%; padding:0 2px;}
.lk-dot{border-radius:50%; background:#fff; cursor:pointer; padding:0; box-sizing:border-box; flex:0 0 auto;
  transition:transform .1s ease, background .1s ease;}
.lk-dot:active{transform:scale(.85);}
.lk-dot.sel{background:currentColor;}
.lk-dot.s0{width:38px;height:38px;border:3px solid #22b07d;color:#22b07d;}
.lk-dot.s1{width:31px;height:31px;border:3px solid #37b98a;color:#37b98a;}
.lk-dot.s2{width:25px;height:25px;border:3px solid #6cc0a8;color:#6cc0a8;}
.lk-dot.s3{width:20px;height:20px;border:2px solid #c2ccd6;color:#c2ccd6;}
.lk-dot.s4{width:25px;height:25px;border:3px solid #a6c8e6;color:#a6c8e6;}
.lk-dot.s5{width:31px;height:31px;border:3px solid #86b6e0;color:#86b6e0;}
.lk-dot.s6{width:38px;height:38px;border:3px solid #7dc5ff;color:#7dc5ff;}
@media (max-width:360px){ .lk-dot.s0,.lk-dot.s6{width:34px;height:34px;} .lk-dot.s1,.lk-dot.s5{width:28px;height:28px;} }

.qbottom{display:flex; justify-content:flex-start; margin-top:6px; min-height:34px;}
.back{background:none; border:none; cursor:pointer; color:var(--sub); font-size:14px;
  font-weight:700; padding:8px 10px; border-radius:10px; transition:background .15s;}
@media (hover:hover){ .back:hover{background:#f0f4f8; color:var(--ink);} }
.back:active{transform:scale(.94);}
.back.hidden{visibility:hidden;}

/* ===== 테스트: 결과 화면 ===== */
.result-badge{width:150px; height:150px; margin:8px auto 6px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:82px;
  box-shadow:0 10px 26px rgba(0,0,0,.14); animation:pop .6s ease;}
/* 결과의 첫 얼굴이다. 여기가 작으면 표만 잔뜩 있는 화면으로 시작한다 */
.r-type{font-size:14.5px; color:var(--sub); margin-top:14px; font-weight:700;}
.r-title{font-size:32px; font-weight:800; margin:6px 0 8px; letter-spacing:-1.2px; line-height:1.25;}
.r-catch{font-size:15px; font-weight:600; color:var(--accent2); margin:0 6px 8px; line-height:1.4;}
/* 점수(지수)형 결과 */
.score-num{font-size:56px; font-weight:700; color:var(--accent); line-height:1; margin:34px 0 2px;}
.score-gauge{height:15px; background:#eaf0f6; border-radius:999px; overflow:hidden; margin:14px 24px 0;}
.score-gauge > i{display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .9s cubic-bezier(.2,.8,.2,1);}
.score-label{font-size:13px; color:var(--sub); font-weight:700; margin-top:10px;}
.rarity{display:inline-block; background:var(--tint); color:var(--accent); font-size:12.5px;
  font-weight:600; padding:6px 13px; border-radius:999px; margin:2px 0 4px;}
.r-desc{font-size:15px; color:#4a4a5a; line-height:1.7; margin:14px 4px; text-align:left;}
.r-desc p{margin:0 0 12px;} .r-desc p:last-child{margin-bottom:0;}
.d-desc p{margin:0 0 10px;} .d-desc p:last-child{margin-bottom:0;}
.traits{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:16px 0;}
.traits span{background:#f0f6fb; color:var(--accent2); font-weight:700; font-size:13px;
  padding:7px 13px; border-radius:999px;}
.match{display:flex; gap:10px; margin:0;}
.match .box{flex:1; background:#f7fafd; border-radius:14px; padding:12px 8px;}
.match .box .lbl{font-size:11px; color:var(--sub); font-weight:700;}
.match .box .memoji{font-size:40px; line-height:1; margin:8px 0 4px;}
.match .box .val{font-size:16px; font-weight:600; margin-top:2px;}
.match .good .val{color:#22b07d;} .match .bad .val{color:#ff6b6b;}

.others-title{font-size:14px; font-weight:600; color:var(--ink); margin:6px 0 14px;}
.divider{height:1px; background:#e7edf4; margin:36px -22px;}

/* 성향 축 그래프 */
.chart{display:flex; flex-direction:column; gap:16px; text-align:left;}
.ax .poles{display:flex; justify-content:space-between; font-size:13px; font-weight:700;
  color:var(--sub); margin-bottom:6px;}
.ax .poles .on{color:var(--accent);}
.ax .track{position:relative; height:14px; background:#eaf0f6; border-radius:999px; overflow:hidden;}
.ax .fill{position:absolute; top:0; height:100%; width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .8s cubic-bezier(.2,.8,.2,1);}
.ax .fill.r{background:linear-gradient(90deg,var(--accent2),var(--accent));}

/* 다른 결과 그리드 */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.gcell{display:flex; align-items:center; gap:10px; cursor:pointer;
  background:#f6f9fc; border:2px solid transparent; border-radius:14px; padding:12px 12px;
  transition:all .15s ease; text-align:left;}
@media (hover:hover){ .gcell:hover{border-color:var(--accent2);} }
.gcell:active{transform:scale(.97);}
.gcell.active{border-color:var(--accent); background:var(--tint);}
.gcell .ge{font-size:30px; line-height:1; flex:0 0 auto;}
.gcell .gt{font-size:14px; font-weight:600; word-break:keep-all;}
/* 한글 제목이 단어 중간에서 안 끊기게 */
.gcell .gt, .rcard .rt, .t-title, .r-name, .prod .p-name{ word-break:keep-all; }
.gcell .gs{font-size:11px; color:var(--sub); font-weight:600;}

.detail{background:#f8fcff; border:2px solid #e6f1fb; border-radius:16px;
  padding:18px 16px; margin-top:12px; animation:fade .3s ease;}
.d-badge{font-size:44px; line-height:1;}
.d-title{font-size:20px; font-weight:700; margin-top:4px;}
.d-desc{font-size:14px; color:#4a4a5a; line-height:1.65; margin-top:6px; text-align:left;}
.d-match{display:flex; gap:14px; justify-content:center; margin-top:12px;
  font-size:13px; color:var(--sub); font-weight:700;}
.d-match b{color:var(--ink);}

/* 추천 테스트 */
/* ── 이 사주로 더 볼까요 ──
   사주를 다 본 사람에게 심리테스트를 권하면 딴 데로 보내는 셈이다.
   방금 세운 여덟 글자를 그대로 쓰는 곳으로 잇는다 */
/* 버튼 묶음이 끝나고 "다른 걸 더 볼래요?"로 넘어가는 자리 — 붙여두면
   버튼의 일부처럼 읽힌다. 묶음 사이(36px)의 한 배 반 */
.nx-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin:80px 2px 2px;}
.nx-t{font-size:18px; font-weight:800; letter-spacing:-.6px; color:var(--ink);}
.nx-sub{margin:0 2px 14px; text-align:left; font-size:13px; color:var(--sub); word-break:keep-all;}
/* 마지막 칸과 푸터가 붙으면 페이지가 잘린 것처럼 보인다 */
.reco{display:flex; flex-direction:column; gap:10px; margin-bottom:40px;}
.reco .rcard{display:flex; align-items:center; gap:12px; background:#fff;
  box-shadow:0 1px 6px rgba(30,60,100,.07); border-radius:14px; padding:14px;
  text-align:left; text-decoration:none; color:var(--ink); cursor:pointer;
  transition:transform .12s ease;}
.reco .rcard:active{transform:scale(.98);}
.reco .rcard .re{flex:0 0 38px; width:38px; height:38px; border-radius:11px;
  background:var(--tint); color:var(--accent2);
  display:flex; align-items:center; justify-content:center;}
.reco .rcard .re svg{width:20px; height:20px; display:block;}
.reco .rcard .rt{flex:1; min-width:0; font-size:14.5px; font-weight:700;
  letter-spacing:-.3px; word-break:keep-all;}
.reco .rcard .rarr{flex:0 0 auto; font-size:18px; font-weight:700; color:#c6d1dd;}
/* 저장·다시보기는 같은 무게의 곁다리라 나란히 */
/* 절반 폭이라 '다른 생일로 신년운세 보기'처럼 긴 이름은 두 줄이 된다.
   그냥 두면 "…신년운세 / 보기"로 끊겨 꼬리만 남는다 — balance로 두 줄을
   비슷한 길이로 나눠 "다른 생일로 / 신년운세 보기"가 되게 한다 */
.two-btn{display:flex; gap:10px; margin-top:12px; align-items:stretch;}
.two-btn .btn{margin-top:0; flex:1; min-width:0; padding-left:8px; padding-right:8px;
  font-size:14.5px; letter-spacing:-.4px; line-height:1.35;
  word-break:keep-all; text-wrap:balance;}

/* 본문이 끝나고 버튼이 바로 붙으면 글이 끊긴 느낌이 든다 */
/* 결과를 다 읽고 만나는 버튼 묶음. 본문과 확실히 떼어놔야 "여기서 끝"이 읽힌다.
   여백이 페이지마다 inline 으로 흩어져 있어 타로만 10px, 나머지는 12px이었다 —
   여기 한 곳으로 모은다 */
/* 96px은 화면 3분의 1이 비어 글이 끝난 줄 알았다. 읽기가 끝나고 할 일이
   시작되는 자리라 묶음 사이(36px)의 두 배 — 72px로 잡는다.
   더 좁히면 본문에 붙어 보인다 (check_layout 이 72px 미만을 막는다) */
.share-row{display:flex; gap:10px; margin-top:92px;}
.share-row .btn{margin-top:0;}
.share-row ~ .btn.ghost{margin-top:12px;}
.mini{font-size:12.5px; color:var(--sub); margin-top:16px; line-height:1.7;}
footer{color:#818d9a; font-size:11px; text-align:center; margin:18px 0 4px; line-height:1.7;}

/* ===== 월드컵 (사진형 카드) ===== */
.wc-round{color:var(--accent2); font-weight:600; font-size:14px; text-align:center; letter-spacing:.5px;}
.wc-arena{display:flex; flex-direction:column; gap:12px; align-items:center; margin-top:14px;}
.wc-card{width:100%; border:none; cursor:pointer; border-radius:20px; padding:0; overflow:hidden;
  position:relative; box-shadow:var(--shadow); transition:transform .12s ease; height:230px; display:block;}
.wc-card:active{transform:scale(.97);}
.wc-card .wc-img{width:100%; height:100%; object-fit:cover; display:block;}
.wc-card .wc-ph{width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:84px;}
.wc-card .wc-cap{position:absolute; left:0; right:0; bottom:0; padding:16px 16px 15px; text-align:left;
  background:linear-gradient(transparent,rgba(0,0,0,.68)); color:#fff;}
.wc-card .wc-name{font-size:21px; font-weight:700; text-shadow:0 2px 8px rgba(0,0,0,.3);}
.wc-card .wc-tag{font-size:12.5px; opacity:.95; margin-top:2px; text-shadow:0 1px 6px rgba(0,0,0,.3);}
.wc-vs{font-size:22px; font-weight:700; color:var(--sub); margin:2px 0;}

/* 결과: 추천 상품 그리드 */
.prod-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; text-align:left;}
.prod{background:#f6f9fc; border-radius:14px; overflow:hidden; display:block; transition:transform .12s ease;}
.prod:active{transform:scale(.97);}
.prod .p-img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:#eee;}
.prod .p-ph{width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  font-size:40px; color:#bccbda;}
.prod .p-body{padding:10px 12px;}
.prod .p-name{font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.prod .p-price{font-size:13.5px; font-weight:600; color:var(--accent); margin-top:3px;}

/* ===== 프리미엄 잠금(더보기 990원) ===== */
.lock-wrap{position:relative; margin-top:6px;}
/* 잠긴 구간 — 전체를 똑같이 뭉개면 첫 줄부터 못 읽어 '내 얘기'인지 알 수가 없다.
   맨 위는 또렷하게 두고 아래로 갈수록 흐려지게 해서, 읽다가 놓치는 느낌을 만든다.
   (줄마다의 blur 값은 reading.js가 넣어준다) */
/* 유료 구간 맛보기. 430px이던 시절엔 세 꼭지 중 둘이 통째로 읽혀서,
   결제 문구에 적힌 것을 이미 다 보여주고 돈을 받는 꼴이었다.
   첫 꼭지의 도입부만 보이고 곧 흐려지게 한다. */
.locked{max-height:190px; overflow:hidden; pointer-events:none; user-select:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 26%,rgba(0,0,0,.45) 62%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 26%,rgba(0,0,0,.45) 62%,transparent 100%);}
.locked span{display:inline;}
.locked > *{transition:none;}
/* 궁합은 잠긴 쪽 맨 위가 십성 도식이고 그 아래가 풀이 글이다.
   330px이면 도식에서 잘려 정작 "풀이"가 한 줄도 안 걸린다 */
.locked.gh{max-height:520px;}
/* 예고 목록은 잠금 바로 위 — 읽고 나서 곧장 "그래서 뭔데"가 걸리는 자리 */
.gh-intro{margin:18px 0 4px;}
.lock-cta{position:relative; margin-top:-70px; padding-top:56px; text-align:center; z-index:2;
  background:linear-gradient(rgba(255,255,255,0), var(--card) 55%);}
.lock-cta .lk-ic{font-size:32px;}
.lock-cta .lk-t{font-size:18px; font-weight:700; margin-top:2px;}
.lock-cta .lk-sub{font-size:13px; color:var(--sub); margin-top:4px; word-break:keep-all;}
.lock-cta .lk-d{font-size:13.5px; color:var(--sub); margin:6px 4px 14px; line-height:1.6;
  word-break:keep-all;}
/* 무엇이 열리는지가 이 문장의 알맹이다 — 바로 아래 파란 버튼과 같은 색으로
   묶어야 "이걸 누르면 저게 열린다"가 눈으로 이어진다 */
.lock-cta .lk-d b{color:var(--accent); font-weight:800;}
/* 잠긴 꼭지를 그대로 늘어놓는 차림표. "전체 풀이" 넉 자로는 뭘 사는지 알 수가 없다 */
.lk-menu{list-style:none; margin:0 0 12px; padding:12px 14px; text-align:left;
  background:#f5faff; border-radius:12px; border:1px solid #e2effa;}
/* 사주 쪽 잠긴 목록(.locked-row)과 같은 결 — 이모지 자리에 번호를 세우고
   글자는 번호에 맞춰 들여쓴다. 줄이 길어 두 줄이 되어도 번호와 안 엉킨다 */
.lk-menu li{display:flex; gap:9px; align-items:baseline;
  font-size:13.5px; line-height:1.5; color:var(--ink); font-weight:600;
  padding:7px 0; word-break:keep-all; border-bottom:1px solid rgba(78,175,255,.07);}
.lk-menu li:last-child{border-bottom:0;}
.lk-menu .lr-n{flex:none; width:19px; text-align:center; font-style:normal;
  font-size:12px; font-weight:800; color:#9fb2c6; font-variant-numeric:tabular-nums;}
/* 갈래 제목 — 목록 안에서 한 단 위라는 게 보여야 열두 줄이 네 묶음으로 읽힌다 */
.lk-menu .lk-grp{display:block; border-bottom:0; padding:12px 0 4px;
  font-size:12.5px; font-weight:800; color:var(--accent2); letter-spacing:-.2px;}
.lk-menu .lk-grp:first-child{padding-top:2px;}
.lk-meta{font-size:12.5px; color:var(--sub); margin:0 0 14px;}
.lk-meta b{color:var(--accent); font-weight:800;}



/* ===== 사주판 8칸 그리드 (오행 색상 + 한자/한글) ===== */
.saju-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:26px 0 8px;}
.sg-col{display:flex; flex-direction:column; gap:8px;}
.sg-label{text-align:center; font-size:12px; font-weight:600; color:var(--sub);}
/* 색은 오행 클래스(.oh-목 …)가 채운다. 그림자는 뺐다 — 칸이 여덟 개나 되는데
   저마다 떠 있으면 화면이 지저분해진다. 색만으로도 충분히 구분된다 */
/* 글씨 색은 오행 클래스가 정한다 — 황(黃)·백(白) 칸은 검은 글씨여야 읽힌다 */
.sg-cell{border-radius:12px; padding:12px 4px 10px; text-align:center;}
.sg-cell .h{font-family:var(--hanja); font-size:30px; font-weight:600; line-height:1;}
.sg-cell .k{font-size:12.5px; font-weight:700; margin-top:4px; opacity:.92;}
.sg-cell.na{background:#e5e8eb; color:#8b95a1;}
/* 시주가 물음표일 때의 안내 — 계산이 틀린 게 아니라 재료가 없는 것이다 */
.no-hour{margin:12px 0 0; padding:11px 13px; background:#fff7ed; border-radius:12px;
  font-size:12.5px; line-height:1.7; color:#8a6d3b; text-align:left; word-break:keep-all;}
.no-hour b{color:#7a5a20; font-weight:800;}
.oh-legend{display:flex; flex-wrap:wrap; gap:6px 12px; justify-content:center; margin:4px 0 8px; font-size:12px; font-weight:700; color:var(--sub);}
.oh-legend .dot{display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:4px; vertical-align:-1px;}
.oh-legend em{font-style:normal; font-weight:600; color:#b1bcc6;}
/* 만세력 표 아래 안내 — 오행·십성 같은 용어를 그 자리에서 풀어준다 */
/* 그래프 밑에서 "그래서 뭔데"를 알려주는 줄이라 본문만큼 읽혀야 한다. 12px은 작았다 */
.grid-help{margin:18px 0 6px; font-size:13.5px; line-height:1.7; text-align:center; color:var(--sub);
  word-break:keep-all;}
.grid-help b{color:var(--ink); font-weight:700;}
/* 충·원진은 붉게, 육합·삼합은 보라 — 그래프 안 뱃지와 같은 색이어야 같은 말인 줄 안다 */
.grid-help .good{color:var(--accent); font-weight:800;}
.grid-help .bad{color:#c03a2f; font-weight:800;}
.oh-legend > b{color:#b1bcc6; font-weight:700; margin-right:2px;}

/* ===== 하단 탭바 (앱 스타일) ===== */
.tabbar{position:fixed; left:50%; transform:translateX(calc(-50% + var(--app-shift))); bottom:0; z-index:100; width:100%; max-width:440px; background:#fff;
  display:flex; border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom);}
.tabbar .tab{flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 0 7px; font-size:11px; font-weight:600; color:#b0b8c1; text-decoration:none;}
/* 아이콘은 SVG — 선 색이 글자색을 따라가서 고른 탭만 파랗게 든다 */
.tabbar .tab .ic{font-size:21px; line-height:1; display:flex; align-items:center; justify-content:center;}
.tabbar .tab .ic svg{width:25px; height:25px; display:block;}
.tabbar .tab.on{color:var(--ink); font-weight:700;}
body.has-tabbar{padding-bottom:64px;}

/* ===== 사주 홈 요소 ===== */
/* ── 홈 맨 위 배너 슬라이더 ──
   카드 한 장이던 자리다. 오늘의 운세 말고도 매일 들를 이유를 하나 더 두려면
   자리가 필요한데, 세로로 쌓으면 아래 것은 아무도 안 본다 — 옆으로 넘긴다.
   스크롤 스냅으로 굴리면 모바일에서 관성·튕김이 브라우저 것 그대로라
   직접 짠 드래그보다 손에 붙는다 */
.hero{position:relative;}
.hero-track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.hero-track::-webkit-scrollbar{display:none;}
.hero-slide{flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always;}
/* 페이징 표시 — 점 대신 짧은 가로선. 지금 몇 번째인지가 길이로 보인다 */
.hero-bars{display:flex; justify-content:center; align-items:center; gap:6px; margin-top:11px;}
.hero-bars button{width:16px; height:3.5px; padding:0; border:0; border-radius:999px;
  background:#dde4ec; cursor:pointer; transition:width .28s ease, background .28s ease;}
.hero-bars button.on{width:30px; background:var(--btn);}
/* 손가락으로 넘기는 화면에는 화살표가 군더더기다. 마우스가 있는 화면에만 띄운다 */
.hero-arrow{display:none;}
@media (hover:hover) and (pointer:fine){
  .hero-arrow{display:flex; align-items:center; justify-content:center;
    position:absolute; top:calc(50% - 22px); transform:translateY(-50%);
    width:34px; height:34px; padding:0; border:0; border-radius:50%; cursor:pointer;
    background:rgba(255,255,255,.9); box-shadow:0 2px 8px rgba(20,50,90,.18);
    color:#4a5866; font-size:19px; font-weight:700; line-height:1;
    opacity:0; transition:opacity .18s; z-index:2;}
  .hero:hover .hero-arrow{opacity:1;}
  .hero-arrow.prev{left:-6px;} .hero-arrow.next{right:-6px;}
  .hero-arrow:disabled{opacity:0 !important; pointer-events:none;}
}
/* isolation — 아래 ::before(z-index:-1)가 카드 밖으로 빠져나가 배경 뒤에
   숨지 않게 여기서 쌓임 맥락을 만든다 */
/* 배너는 잉크 블랙 — 검정 버튼과 한 벌이 되고, 그 위에서 핑크가 포인트로 산다.
   파랑으로 두면 화면에서 이것만 계열이 달라 혼자 떠 보였다 */
.today-card{background:linear-gradient(135deg,#2a2f3a,#12151c); color:#fff; border-radius:22px;
  padding:22px; box-shadow:var(--shadow); text-align:left; position:relative; overflow:hidden;
  isolation:isolate;}
/* 그라데이션 한 겹만 깔면 종이처럼 납작하다. 빛 두 덩이와 아주 옅은 점무늬를
   얹으면 같은 색인데도 깊이가 생긴다 (이미지 없이 무게를 주는 가장 싼 방법) */
.today-card::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(150px 150px at 82% 14%, rgba(255,255,255,.30), transparent 68%),
    radial-gradient(190px 190px at 6% 112%, rgba(255,255,255,.20), transparent 66%),
    radial-gradient(rgba(255,255,255,.55) .9px, transparent 1px);
  background-size:auto, auto, 15px 15px;}
.today-card .t-date{font-size:12.5px; font-weight:600; opacity:.9;}
.today-card .t-head{font-size:21px; font-weight:700; margin:6px 0 4px; letter-spacing:-.3px;}
.today-card .t-sub{font-size:14px; opacity:.95; line-height:1.5;}
.today-card .t-btn{display:inline-block; margin-top:14px; background:#fff; color:var(--accent);
  font-size:14px; font-weight:600; padding:11px 18px; border-radius:999px;}
/* 문장 뽑기 칸 — 운세 카드와 같은 틀에 색과 그림만 갈아 끼운다.
   틀까지 다르면 옆으로 넘겼을 때 다른 앱으로 넘어간 것처럼 보인다 */
.today-card.mj-slide{background:linear-gradient(135deg,#332b46,#1a1622);}
.today-card.mj-slide .t-btn{color:#8d5fd6;}
.today-card.mj-slide .t-art .pp{fill:rgba(255,255,255,.52);}
/* 그림은 오른쪽 아래에서 살짝 잘려 나가게 둔다 — 카드 밖으로 이어지는 느낌이
   나야 붙여 넣은 스티커로 안 보인다. 통째 opacity 대신 획마다 알파를 달리 줘야
   구슬의 테두리·하이라이트·반짝임이 서로 구분된다 */
.today-card .t-art{position:absolute; right:-12px; bottom:-4px; width:150px; z-index:-1;
  pointer-events:none;}
.today-card .t-art svg{width:100%; display:block; overflow:visible;}
.today-card .t-art .ln{fill:none; stroke:rgba(255,255,255,.5); stroke-width:2.4;
  stroke-linejoin:round; stroke-linecap:round;}
.today-card .t-art .fl{fill:rgba(255,255,255,.15); stroke:none;}
.today-card .t-art .hl{fill:none; stroke:rgba(255,255,255,.7); stroke-width:3.4;
  stroke-linecap:round;}
.today-card .t-art .sp{fill:rgba(255,255,255,.72); stroke:none;}
.today-card .t-art .pp{fill:rgba(255,255,255,.34); stroke:none;}
/* 홈은 훑는 화면이라 블록 사이가 좁으면 통째로 빽빽해 보인다.
   메인 버튼 위아래를 특히 열어 이 버튼이 혼자 서 있게 한다 */
.home-cta{display:block; width:100%; text-align:center; background:var(--btn);
  color:#fff; font-size:17px; font-weight:700; padding:19px; border-radius:16px; margin:24px 0 8px;
  box-shadow:0 8px 18px rgba(22,24,29,.22);}




/* ===== 사주 입력 폼 ===== */
/* 입력칸 사이 — 15px이라 이름·성별·생년월일이 한 덩어리로 붙어 보였다 */
.field{text-align:left; margin-bottom:24px;}
.field > label{display:flex; justify-content:space-between; align-items:baseline;
  font-size:13.5px; font-weight:600; color:var(--sub); margin-bottom:9px;}
/* 11.5px에 #b0b8c1이면 안 보인다. '최대 6자' 같은 제약은 놓치면 입력하다 막힌다 */
.field > label .lb-hint{font-size:12.5px; font-weight:500; color:#8b95a1;}

/* 라벨 옆 미니 토글 (양력/음력) */
.seg-mini{display:inline-flex; gap:4px; background:#f2f4f6; border-radius:999px; padding:3px;}
.seg-mini button{border:none; background:transparent; color:#8b95a1; font-size:12px; font-weight:600;
  padding:5px 12px; border-radius:999px; cursor:pointer; transition:all .12s ease;}
/* 선택 = 옅은 파랑 바탕 + 파란 글씨. 진한 파랑으로 꽉 채우면 이 작은 토글이
   화면에서 제일 센 것이 돼서, 정작 아래 '사주 풀이 받기'와 무게가 겹친다 */
.seg-mini button.on{background:#e9ebee; color:var(--ink);}
/* 입력칸 모양. .field 안에만 걸어뒀더니 지정일 운세의 날짜 셀렉트(.q-block 안)가
   브라우저 기본 모양으로 나와서 바로 위 생년월일과 따로 놀았다. 둘 다 걸어준다. */
.field input, .field select,
.q-block input, .q-block select{width:100%; padding:13px 14px; border:1px solid #e5e8eb; border-radius:12px;
  font-size:15px; background:#fff; color:var(--ink); outline:none; -webkit-appearance:none; appearance:none;}
.field input:focus, .field select:focus,
.q-block input:focus, .q-block select:focus{border-color:var(--accent);}
/* 안 채운 칸을 흔들어 알려준다. 토스트만 띄우면 연·월·일 셋 중 어디가 빈지
   눈으로 찾아야 한다 — 흔들리는 칸이 곧 답이다 */
@keyframes shakeX{
  10%,90%{transform:translateX(-2px);} 20%,80%{transform:translateX(3px);}
  30%,50%,70%{transform:translateX(-5px);} 40%,60%{transform:translateX(5px);}}
.shake{animation:shakeX .52s cubic-bezier(.36,.07,.19,.97) both;}
/* 흔들림은 한 번 지나가면 끝이라, 잠깐 테두리도 붉혀 자리를 남긴다 */
.miss-in{border-color:#f0a3b4 !important; background:#fffafb !important;}
.seg{display:flex; gap:8px;}
.seg button{flex:1; padding:13px; border-radius:12px; border:1px solid #e5e8eb; background:#fff;
  font-weight:600; font-size:15px; color:#8b95a1; cursor:pointer; transition:all .12s;}
/* 선택 = 옅은 파랑 바탕에 파란 글씨. 진한 파랑으로 채우면 '여자' 칸이 화면에서
   제일 강해져서, 눌러야 할 파란 버튼과 위계가 뒤엉킨다.
   테두리는 없앤다 — 바탕색이 이미 선택을 말하는데 선까지 두르면 겹말이다 */
.seg button.on{border-color:transparent; background:#e9ebee; color:var(--ink); font-weight:700;}
.seg button:active{transform:scale(.97);}
.spinner{width:46px; height:46px; border:4px solid #e7edf4; border-top-color:var(--accent);
  border-radius:50%; animation:spin 1s linear infinite; margin:26px auto 14px;}
@keyframes spin{to{transform:rotate(360deg);}}
.saju-body{text-align:left; font-size:16px; line-height:1.85; color:#3f3f52;}
.saju-body .saju-h{font-size:19px; font-weight:800; color:var(--accent2); margin:48px 0 12px;}
.saju-body p{margin:0 0 11px;}
.saju-note{font-size:13px; line-height:1.7; color:var(--sub); margin-top:14px;}

/* ===== 타로 한 장 뽑기 ===== */
.tarot-guide{color:var(--sub); font-size:14px; margin:2px 0 4px;}
/* 부채꼴(아치)로 펼쳐지는 카드 — 클릭/탭으로 선택 (데스크탑·모바일 공통)
   각 카드를 좌표(x,y)+각도(a)로 배치. 뽑을 땐 똑바로 서서(rotate 0) 제자리에서 위로 상승. */
.tarot-fan{position:relative; height:250px; margin:14px 0 4px;}
.tarot-fan .tslot{position:absolute; left:50%; top:44px; margin-left:-33px; width:66px; height:104px;
  transform-origin:50% 50%;
  transform:translate(calc(var(--x)*1px), calc(var(--y)*1px)) rotate(var(--a));
  border:none; background:transparent; padding:0; cursor:pointer; transition:transform .22s cubic-bezier(.34,1.2,.5,1);}
.tarot-fan .tslot:hover, .tarot-fan .tslot:focus-visible, .tarot-fan .tslot:active{
  transform:translate(calc(var(--x)*1px), calc((var(--y) - 46)*1px)) rotate(0deg) scale(1.06);
  z-index:40 !important; outline:none;}
.tback{width:100%; height:100%; border-radius:12px;
  background:linear-gradient(140deg,#7c83ff,#9bcbff);
  background-image:radial-gradient(circle at 50% 35%, rgba(255,255,255,.35) 0 6px, transparent 7px), linear-gradient(140deg,#7c83ff,#9bcbff);
  color:#fff; box-shadow:0 6px 16px rgba(60,90,120,.28);
  display:flex; align-items:center; justify-content:center; font-size:24px;
  border:2px solid rgba(255,255,255,.6); transition:box-shadow .2s ease;}
.tarot-fan .tslot:hover .tback, .tarot-fan .tslot:focus-visible .tback, .tarot-fan .tslot:active .tback{
  box-shadow:0 16px 30px rgba(60,90,120,.42);}

/* 타로 결과 본문 (섹션형) */
.t-read{text-align:left;}
.t-read .t-main{font-size:14.5px; line-height:1.8; color:#42424f;}
.t-read .tsec{margin-top:15px;}
.t-read .tsec b{display:block; font-size:14.5px; font-weight:700; color:var(--accent2); margin-bottom:3px;}
.t-read .tsec p{font-size:14px; line-height:1.7; color:#4a4a5a;}
.tface{width:160px; height:236px; margin:6px auto 10px; border-radius:18px; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:0 12px 30px rgba(60,90,120,.28); animation:pop .5s ease; border:3px solid rgba(255,255,255,.6);}
.tface .tf-emoji{font-size:74px; line-height:1;}
.tface .tf-name{font-size:19px; font-weight:700; margin-top:10px; text-shadow:0 2px 8px rgba(0,0,0,.2);}
.tf-sub{font-size:12px; opacity:.9; margin-top:2px;}

/* ===== 약관/개인정보 등 텍스트 페이지 ===== */
.legal{background:var(--card); border-radius:22px; box-shadow:var(--shadow);
  padding:26px 22px; margin-top:16px;}
.legal h1{font-size:23px; font-weight:700; margin:0 0 4px;}
.legal .updated{font-size:12px; color:var(--sub); margin-bottom:18px;}
.legal h2{font-size:16px; font-weight:600; margin:22px 0 8px; color:var(--ink);}
.legal p, .legal li{font-size:14px; line-height:1.75; color:#4a4a5a;}
.legal ul{margin:6px 0; padding-left:20px;}
.legal a{color:var(--accent2); font-weight:700;}

/* 홈 푸터 링크 */
.footlinks{display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center;
  margin:16px 0 4px; font-size:12px;}
.footlinks a{color:var(--sub); font-weight:700;}

/* ===== 애니메이션/공통 ===== */
@keyframes pop{0%{transform:scale(.6); opacity:0;} 70%{transform:scale(1.08);} 100%{transform:scale(1); opacity:1;}}
.fade{animation:fade .35s ease;}
@keyframes fade{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.hidden{display:none;}
/* 탭바·결제바처럼 앱 컬럼을 따라간다. 예전엔 화면 정중앙에 떠서
   데스크탑에서 카드가 230px 밀리면 토스트만 딴 데 떨어져 있었다. */
.toast{position:fixed; bottom:26px; left:50%; transform:translateX(calc(-50% + var(--app-shift)));
  background:#2b2b3a; color:#fff; padding:12px 20px; border-radius:12px; font-size:14px;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:250; max-width:min(88%, 408px); text-align:center;}
/* 하단탭 있는 페이지는 탭바 위로 띄워서 안 가리게 */
body.has-tabbar .toast{bottom:80px;}
.toast.show{opacity:1;}

/* ===== 코인 · 충전소 ===== */
/* 노란 배너 하나만 남으면 파란 톤에서 혼자 튄다.
   재화 이모지(🍀)가 이미 초록이라 배경까지 노랑일 이유가 없다 */
.coin-banner{display:flex; align-items:center; gap:11px; background:var(--tint);
  border:1px solid #d6e6fb; border-radius:16px; padding:13px 15px; margin-bottom:14px;}
.coin-banner .cb-ic{font-size:26px;}
.coin-banner .cb-t{flex:1; font-size:13.5px; font-weight:600; color:var(--accent2); line-height:1.4;}
.coin-banner .cb-t small{display:block; font-weight:600; color:#a2748c; font-size:12px; margin-top:1px;}

/* ── 복 충전소 머리 ──
   파란 상자 한 장에 잔액만 크게 띄웠더니, 무엇을 사는 곳인지는 없고 숫자만
   덩그러니 남았다. 상자를 걷고 은은한 하늘빛을 위에서 아래로 흐리게 깐다 —
   그림과 문장으로 먼저 말하고 잔액은 그 아래에.
   좌우로 -16px 물려 화면 끝까지 간다 (아래 가격표와 결이 갈리게) */
/* 복을 파는 자리라 포인트색을 쓴다. 위에서 아래로 옅어지며 본문 흰 바탕에 녹는다 */
.coin-hero{text-align:center; margin:-16px -16px 0; padding:24px 24px 18px;
  background:linear-gradient(180deg,#ffdce8 0%,#ffeef4 45%,#fff 100%);}
.coin-hero .ch-tag{font-size:13.5px; font-weight:800; color:var(--accent); letter-spacing:-.3px;}
.coin-hero .ch-h{margin:5px 0 0; font-size:25px; font-weight:800; color:var(--ink);
  letter-spacing:-1px; line-height:1.35;}
/* 그림 자리 — 뒤에 옅은 원을 깔아 그림이 허공에 뜨지 않게 한다 */
.coin-hero .ch-art{width:112px; height:112px; margin:6px auto 4px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 45%, #fff 0%, var(--tint) 62%, rgba(255,234,242,0) 72%);}
.coin-hero .ch-art span{font-size:56px; line-height:1;
  filter:drop-shadow(0 6px 12px rgba(60,120,190,.22));}
.coin-hero .ch-sub{margin:0 auto; max-width:300px; font-size:13px; line-height:1.7;
  color:#7b6b74; word-break:keep-all;}
.coin-hero .ch-sub b{color:var(--accent2); font-weight:800;}
.coin-hero .ch-have{margin-top:12px; display:inline-block; background:#fff; border-radius:999px;
  padding:9px 16px; font-size:13.5px; font-weight:700; color:#4e5968;
  box-shadow:0 2px 8px rgba(60,110,170,.10);}
.coin-hero .ch-have b{font-size:16px; font-weight:800; color:var(--accent2); margin:0 1px;}











.charge-note{font-size:11.5px; color:var(--sub); text-align:center; line-height:1.6; margin-top:16px;}
/* 복 등급 선택 (가격표) */
.tier{display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--card);
  border:2px solid #e7edf5; border-radius:14px; padding:14px 16px; margin-bottom:10px; cursor:pointer;
  transition:border-color .12s ease, background .12s ease;}
.tier.on{border-color:var(--accent); background:#fff6f9;}
.tier:active{transform:scale(.99);}
/* "가장 인기"는 카드 위 테두리에 걸쳐 올린다 — 안에 넣으면 줄을 하나 더 먹는다.
   걸치려면 카드가 기준점이어야 하므로 relative 를 꼭 같이 준다 */
.tier{position:relative;}
.tier .ti-tag{position:absolute; top:-9px; left:14px; font-size:10.5px; font-weight:800;
  color:#fff; background:var(--accent); padding:2px 9px; border-radius:20px; letter-spacing:-.2px;}
/* 고른 칸은 테두리·배경이 함께 바뀌어야 눈에 걸린다 */
.tier.on{box-shadow:0 0 0 1px var(--accent);}
/* 이름은 작게 위에, 개수는 크게 아래에 — 개수가 고르는 기준이다 */
.tier .ti-label{font-size:12.5px; font-weight:700; color:var(--sub); letter-spacing:-.2px;}
.tier .ti-get{font-size:20px; font-weight:800; color:var(--ink); letter-spacing:-.6px; margin-top:2px;}
/* 정가·할인율·낼 돈을 한 줄에 세워 "얼마 깎였나"가 한눈에 보이게 */
.tier .ti-right{display:flex; align-items:center; gap:7px;}
.tier .ti-list{font-size:13px; color:#a2afbb; text-decoration:line-through;}
.tier .ti-off{font-size:11.5px; font-weight:800; padding:2px 7px; border-radius:20px;
  background:#eef2f6; color:#8394a3; letter-spacing:-.2px;}
.tier.sv1 .ti-off{background:#ffe7ef; color:#d4749b;}
.tier.sv2 .ti-off{background:#ffd9e6; color:#e0407c;}
.tier.sv3 .ti-off{background:var(--accent); color:#fff;}
.tier .ti-price{font-size:18px; font-weight:800; white-space:nowrap;}
.ch-guide{font-size:13px; color:var(--sub); line-height:1.6; margin:-4px 0 14px;
  word-break:keep-all;}
.ch-guide b{color:var(--ink); font-weight:700;}
.tier .ti-price{font-size:18px; font-weight:700; white-space:nowrap;}
.buy-btn{width:100%; border:none; border-radius:14px; padding:15px; font-size:16px; font-weight:700; color:#fff;
  background:var(--btn); cursor:pointer; margin-top:4px;}
.buy-btn:disabled{background:#e0e6ec; color:#9fadbb; cursor:default;}
.buy-btn:not(:disabled):active{transform:scale(.99);}

/* 로그인 */
.login-hero{text-align:center; padding:26px 10px 22px;}
.login-hero .lh-emoji{font-size:52px;}
.login-hero .lh-title{font-size:24px; font-weight:700; line-height:1.35; margin:10px 0 8px;}
.login-hero .lh-sub{font-size:13.5px; color:var(--sub); line-height:1.6;}
.login-btns{display:flex; flex-direction:column; gap:10px; margin-top:6px;}
.sbtn{display:flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:15px;
  border-radius:13px; font-size:15.5px; font-weight:600; border:none; cursor:pointer; transition:transform .12s ease;}
.sbtn:active{transform:scale(.98);}
.sbtn .si{font-size:18px; font-weight:700;}
.sbtn.kakao{background:#FEE500; color:#191600;}
.sbtn.google{background:#fff; color:#333; border:1.5px solid #e2e2e6;}
.sbtn.apple{background:#000; color:#fff;}
.login-terms{text-align:center; font-size:12px; color:var(--sub); line-height:1.6; margin:18px 0 24px;}
.login-terms a{color:var(--accent2); font-weight:600;}
.login-card{display:flex; align-items:center; gap:12px; background:linear-gradient(135deg,#7dc5ff,#9bcbff);
  color:#fff; border-radius:16px; padding:15px 16px; margin-top:6px; box-shadow:var(--shadow); text-decoration:none;}
.login-card .lc-ic{font-size:26px;}
.login-card .lc-t{flex:1; line-height:1.35;}
.login-card .lc-t b{font-size:15.5px; font-weight:700;}
.login-card .lc-t small{display:block; font-size:11.5px; opacity:.92; margin-top:2px;}
.login-card .lc-arr{font-size:22px; font-weight:700; opacity:.8;}

/* ===== 마이페이지 드로어 ===== */
.mp-overlay{position:fixed; inset:0; background:rgba(30,20,50,.45); opacity:0; pointer-events:none; transition:opacity .22s ease; z-index:200;}
.mp-overlay.open{opacity:1; pointer-events:auto;}
.mp-panel{position:fixed; top:0; right:0; height:100%; width:86%; max-width:360px; background:#f3f7fb;
  transform:translateX(100%); transition:transform .26s cubic-bezier(.4,0,.2,1); z-index:201; overflow-y:auto;
  -webkit-overflow-scrolling:touch; box-shadow:-6px 0 24px rgba(40,70,100,.18);}
.mp-panel.open{transform:translateX(0);}
/* 파란 띠로 머리를 덮으면 그 자리가 화면에서 제일 세진다. 여기는 이동 통로일
   뿐이라 앞에 나설 자리가 아니다 — 흰 바탕에 검은 제목으로 물러난다 */
.mp-head{display:flex; align-items:center; justify-content:space-between; padding:18px 18px 14px;
  background:#fff; color:var(--ink); font-size:19px; font-weight:800; letter-spacing:-.5px;
  position:sticky; top:0; z-index:2; border-bottom:1px solid var(--line);}
.mp-head .mp-x{border:none; background:transparent; color:#8b95a1; font-size:20px; font-weight:700; cursor:pointer; line-height:1;}
.mp-body{padding:14px;}
.mp-arr{color:#bfd0e0; font-weight:700;}
/* 로그인 권유 묶음 — 버튼만 덩그러니 두면 왜 눌러야 하는지가 없다.
   이유를 먼저 적고 버튼은 그 밑에 */
.mp-cta{background:#fff; border-radius:14px; padding:16px 16px 14px; margin-bottom:14px;}
.mp-cta-t{font-size:16px; font-weight:800; letter-spacing:-.4px; color:var(--ink);}
.mp-cta-d{font-size:12.5px; color:var(--sub); margin-top:4px; word-break:keep-all;}
.mp-login{display:flex; align-items:center; gap:11px; background:#f4f8ff;
  border-radius:12px; padding:14px; font-size:14.5px; font-weight:700;
  color:var(--accent2); text-decoration:none; margin:13px 0 0;}
.mp-login .mp-ic, .mp-login .mp-arr{color:var(--accent2);}
.mp-login:active{background:var(--tint);}
.mp-login > span:not(.mp-arr){flex:1;}
/* 계정에 안 매인 사주라는 표시 — 이름 위에 작게 */
.mp-who{display:block; font-size:11.5px; font-weight:700; color:#a4adb8; margin-bottom:1px;}
/* 줄 아이콘 — 탭·헤더와 같은 규칙. 글줄과 같은 회색이라 앞으로 나서지 않는다 */
.mp-ic{flex:0 0 22px; width:22px; height:22px; display:flex; align-items:center; justify-content:center; color:#8b95a1;}
.mp-ic svg{width:20px; height:20px; display:block;}
.mp-user{background:#fff; border-radius:14px; padding:15px 16px; margin-bottom:14px;}
.mp-user .mp-uname{font-size:16px; font-weight:700;}
.mp-user .mp-uemail{font-size:12.5px; color:var(--sub); margin-top:2px;}
.mp-sect-t{font-size:12.5px; font-weight:600; color:var(--sub); margin:4px 2px 7px;}
/* 내 정보 칸 — 사이드바에서 제일 먼저 보는 자리라 얇으면 존재감이 없다 */
/* 줄 본체(.mp-pick)는 대표를 바꾸고, 오른쪽 '수정'은 그 사주를 연다.
   둘이 한 줄에 있어야 대표가 아닌 사주도 곧장 고칠 수 있다 */
.mp-prof{display:flex; align-items:center; gap:8px; background:#fff; border-radius:14px;
  padding:9px 12px 9px 8px; margin-bottom:10px; text-decoration:none; color:var(--ink); width:100%;}
.mp-prof .mp-pick{flex:1; min-width:0; display:flex; align-items:center; gap:11px;
  background:none; border:none; padding:8px 4px; font:inherit; color:inherit;
  text-align:left; cursor:pointer;}
.mp-prof .mp-pick:disabled{cursor:default;}
.mp-prof.alt{opacity:.62; transition:opacity .12s ease;}
.mp-prof.alt:hover,.mp-prof.alt:active{opacity:1;}
.mp-repb{font-size:10px; color:#fff; background:var(--btn); padding:2px 7px; border-radius:6px; margin-left:4px; vertical-align:middle; font-weight:600;}
.mp-switch{font-size:12px; font-weight:700; color:var(--ink); background:#eceef1; padding:7px 9px; border-radius:9px; flex-shrink:0;}
.mp-addprof{display:flex; align-items:center; justify-content:center; gap:4px; border:1.5px dashed #bfd8f0; color:var(--accent2); font-weight:600; font-size:13.5px; border-radius:12px; padding:12px; text-decoration:none; margin-bottom:14px; background:#f8fcff;}
.mp-addprof:active{background:var(--tint);}
/* 띠 아바타 — 년지 한자. 색은 오행 클래스가 채운다 */
.mp-prof .mp-pav{width:42px; height:42px; border-radius:50%; background:#eef3f9;
  display:flex; align-items:center; justify-content:center; font-size:24px;}
.mp-prof .mp-pinfo{flex:1; min-width:0;}
/* 버튼이 둘이라 남는 폭이 좁다. 넘치면 줄바꿈 대신 말줄임 —
   '1992-12-11 · 사 / 시'처럼 두 줄로 깨지면 읽다 만 것처럼 보인다 */
.mp-prof .mp-pinfo b{display:block; font-size:15px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mp-prof .mp-pinfo small{display:block; font-size:12.5px; color:var(--sub); margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mp-prof .mp-edit{flex-shrink:0; font-size:12.5px; font-weight:700; color:var(--accent2); background:var(--tint); padding:7px 10px; border-radius:9px; text-decoration:none;}
.mp-bok{display:flex; align-items:center; justify-content:space-between; background:#fff;
  border-radius:14px; padding:17px 16px; margin-bottom:10px;}
.mp-bok-l{font-size:15px; font-weight:700;} .mp-bok-n{font-size:20px; font-weight:800; color:#b8860b;}
/* 그라데이션을 빼고 노랑 단색으로. 잔액 칸에 붙은 반쪽 라운드가 아니라
   제 몫을 하는 버튼이라 네 귀를 같게 준다 */
.mp-charge{display:block; text-align:center; background:#ffd400; color:#191f28;
  font-weight:800; font-size:15px; padding:15px; border-radius:12px;
  text-decoration:none; margin-bottom:14px; letter-spacing:-.3px;}
.mp-charge:active{background:#f2c800;}
.mp-menu{background:#fff; border-radius:14px; overflow:hidden; margin-bottom:14px;}
.mp-menu a{display:flex; align-items:center; gap:11px; padding:15px 16px; border-top:1px solid #f0f5fa;
  font-size:14.5px; font-weight:700; color:var(--ink); text-decoration:none;}
.mp-menu a > span:not(.mp-arr){flex:1;}
.mp-menu a:first-child{border-top:none;}
.mp-menu a.quit{color:#e05a5a; font-weight:700;}
.mp-menu a.quit .mp-ic{color:#e8a0a0;}
.mp-foot{display:flex; gap:14px; justify-content:center; padding:10px 0 24px;}
.mp-foot a{font-size:12px; color:var(--sub); font-weight:700; text-decoration:none;}

/* ===== 결제/지급 내역 ===== */
.hist-tab{background:#fff; border-radius:12px 12px 0 0; padding:14px 16px; font-size:14px; font-weight:700;
  color:var(--accent); border-bottom:2px solid var(--accent);}
.hist-tab b{color:var(--sub); font-weight:600; margin-left:2px;}
.hist-item{display:flex; align-items:center; gap:12px; background:#fff; padding:14px 16px; border-bottom:1px solid #eef3f8;}
.hist-item:last-of-type{border-radius:0 0 12px 12px;}
.hist-ic{width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:700; flex-shrink:0;}
.hist-ic.plus{background:#e8f7ec; color:#2ba24e;}
.hist-ic.minus{background:#fdeaea; color:#e05a5a;}
.hist-info{flex:1; min-width:0;}
.hist-title{font-size:14.5px; font-weight:600;}
.hist-title .hist-tag{font-size:10.5px; font-weight:600; color:var(--sub); background:#edf2f6; padding:2px 7px; border-radius:6px; margin-left:6px; vertical-align:middle;}
.hist-date{font-size:12px; color:var(--sub); margin-top:2px;}
.hist-right{text-align:right; flex-shrink:0;}
.hist-delta{font-size:15.5px; font-weight:700;}
.hist-delta.plus{color:#2ba24e;} .hist-delta.minus{color:#e05a5a;}
.hist-bal{font-size:11.5px; color:var(--sub); margin-top:2px;}
.hist-foot{text-align:center; font-size:12px; color:var(--sub); margin-top:16px;}

/* ===== 2열 그리드 카드 ===== */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.gcard{position:relative; background:var(--card); border-radius:16px; box-shadow:var(--shadow);
  padding:15px 13px 13px; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; align-items:flex-start;
  transition:transform .12s ease;}
.gcard:active{transform:scale(.97);}
.gcard .g-thumb{width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:27px; margin-bottom:9px;}
.gcard .g-badge{position:absolute; top:11px; right:11px; font-size:10px; font-weight:600; color:var(--accent);
  background:var(--tint); padding:3px 8px; border-radius:999px;}
.gcard .g-title{font-size:14.5px; font-weight:700; line-height:1.3; word-break:keep-all;}
.gcard .g-tag{font-size:11.5px; color:var(--sub); line-height:1.4; margin-top:4px; word-break:keep-all; flex:1;}
.gcard .g-players{font-size:11px; color:var(--accent2); font-weight:600; margin-top:8px;}
.gcard.soon{opacity:.55;} .gcard.soon .g-players{color:var(--sub);}

/* ===== 오늘의 운세 리치 결과 (점수·게이지·럭키·섹션) ===== */
.oh-tags{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:4px;}
.oh-tags span{font-size:12px; font-weight:600; color:var(--accent2); background:var(--tint); padding:4px 10px; border-radius:999px;}
.oh-title{font-size:19px; font-weight:700; text-align:center; line-height:1.35; margin:10px 6px 4px; word-break:keep-all;}
.score-hero{display:flex; flex-direction:column; align-items:center; margin:16px 0 6px;}
.score-ring{width:132px; height:132px; border-radius:50%;
  background:conic-gradient(var(--accent) calc(var(--p)*1%), #e9eff5 0);
  display:flex; align-items:center; justify-content:center;}
.score-ring .sr-in{width:104px; height:104px; border-radius:50%; background:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:inset 0 1px 3px rgba(0,0,0,.05);}
.score-ring .sr-in b{font-size:40px; font-weight:700; color:var(--accent); line-height:1;}
.score-ring .sr-in span{font-size:12px; color:var(--sub); font-weight:600; margin-top:2px;}
.score-cap{font-size:13px; font-weight:600; color:var(--sub); margin-top:8px;}
.cat-gauges{display:flex; flex-direction:column; gap:9px; margin:16px 2px 4px;}
.cg{display:flex; align-items:center; gap:9px;}
.cg-l{flex:0 0 76px; font-size:13px; font-weight:600;}
.cg-bar{flex:1; height:9px; border-radius:999px; background:#e9eff5; overflow:hidden;}
.cg-bar i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent2),var(--accent));}
.cg-v{flex:0 0 32px; text-align:right; font-size:13px; font-weight:700; color:var(--accent2);}
.lucky-row{display:flex; gap:8px; margin:18px 0 4px;}
.lucky{flex:1; background:#f7fbff; border:1px solid #e8f1fb; border-radius:14px; padding:12px 6px; text-align:center;}
.lucky .lk-e{font-size:22px;}
.lucky .lk-l{font-size:11px; color:var(--sub); font-weight:600; margin-top:3px;}
.lucky .lk-v{font-size:12.5px; font-weight:600; margin-top:2px; line-height:1.3; word-break:keep-all;}
.rsec{margin-top:16px; text-align:left;}
.rsec-h{display:flex; align-items:center; justify-content:space-between; margin-bottom:5px;}
.rsec-t{font-size:15.5px; font-weight:700;}
.rsec-t .rsec-sub{font-size:11.5px; font-weight:700; color:var(--sub); margin-left:6px;}
.rsec-s{font-size:12.5px; font-weight:700; color:var(--accent2); background:var(--tint); padding:2px 9px; border-radius:999px; flex-shrink:0;}
.rsec p{font-size:14px; line-height:1.8; color:#4a4a5a;}
.rsec p + p{margin-top:9px;}   /* 단락 사이 여백 */
/* 보관함 상세 */
/* 토정비결 — 괘사 · 월별 운세 */
.gwesa{font-size:14.5px; font-weight:700; color:var(--accent2); background:#f7fbff; border-left:3px solid var(--accent);
  padding:11px 13px; border-radius:0 10px 10px 0; margin:10px 0 14px; line-height:1.6;}
.mcard{background:#fafbfc; border:1px solid #eef0f3; border-radius:16px; padding:16px 16px 17px; margin:0 0 18px;}
.mcard .mrow{margin:0 0 4px;}
.mcard .hanja{margin:12px 0 0;}
.mcard .hstory{background:transparent; padding:12px 0 0; margin:0; border-top:1px solid #eef0f3;}
.mcard .hanja + .hstory{margin-top:13px;}
.mrow{display:flex; align-items:center; gap:9px; margin:9px 0;}
.mrow-n{flex:0 0 104px; font-size:15.5px; font-weight:700; letter-spacing:-.2px;}
.mrow-bar{flex:1; height:8px; border-radius:999px; background:#e9eff5; overflow:hidden;}
.mrow-bar i{display:block; height:100%; border-radius:999px; background:var(--accent2); transition:width .4s ease;}
/* 점수대별 색 — 좋음(초록) · 보통(앰버) · 조심(코랄) */
.mrow.good .mrow-bar i{background:#2ba24e;}  .mrow.good .mrow-s{color:#2ba24e;}
.mrow.ok   .mrow-bar i{background:#f0a92c;}  .mrow.ok   .mrow-s{color:#d98f16;}
.mrow.bad  .mrow-bar i{background:#e0574e;}  .mrow.bad  .mrow-s{color:#e0574e;}
.mrow.good .mrow-n, .mrow.bad .mrow-n{font-weight:700;}
/* 범례 */
.mrow-legend{display:flex; gap:14px; font-size:11.5px; color:var(--sub); margin:2px 0 14px;}
.mrow-legend span{display:flex; align-items:center; gap:5px;}
.mrow-legend i{width:9px; height:9px; border-radius:50%; display:inline-block;}
.mrow-s{flex:0 0 30px; text-align:right; font-size:14px; font-weight:700; color:var(--accent2);}
.mrow + p{margin:2px 0 14px; font-size:13.5px; line-height:1.7; color:#4a4a5a;}
/* ===== 용어 툴팁 (? 버튼 + 바텀시트) ===== */
.tip-btn{width:18px; height:18px; border-radius:50%; border:none; padding:0; margin-left:4px;
  background:#e5e8eb; color:#8b95a1; font-size:11.5px; font-weight:700; line-height:18px;
  cursor:pointer; vertical-align:middle; transition:background .12s ease;}
.tip-btn:active{background:var(--btn); color:#fff;}
@media (hover:hover){ .tip-btn:hover{background:var(--btn); color:#fff;} }
.tip-ov{position:fixed; inset:0; background:rgba(25,31,40,.45); opacity:0; pointer-events:none;
  transition:opacity .2s ease; z-index:400;}
.tip-ov.open{opacity:1; pointer-events:auto;}
.tip-sheet{position:fixed; left:50%; bottom:0; width:100%; max-width:440px; z-index:401;
  transform:translate(calc(-50% + var(--app-shift)), 100%); transition:transform .26s cubic-bezier(.3,0,.2,1);
  background:#fff; border-radius:20px 20px 0 0; padding:12px 22px calc(28px + env(safe-area-inset-bottom));
  max-height:82vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  text-align:left; box-shadow:0 -6px 26px rgba(25,31,40,.14);}
.tip-sheet.open{transform:translate(calc(-50% + var(--app-shift)), 0);}
.tip-bar{width:40px; height:4px; border-radius:999px; background:#e5e8eb; margin:0 auto 16px;}
.tip-t{font-size:20px; font-weight:700; letter-spacing:-.4px;}
.tip-d{font-size:14.5px; line-height:1.8; color:#4e5968; margin-top:14px;}
.tip-d b{color:var(--ink); font-weight:600;}
.tip-x{width:100%; margin-top:20px; border:none; border-radius:12px; padding:14px;
  background:#f2f4f6; color:#4e5968; font-size:15px; font-weight:600; cursor:pointer;}

/* ===== 만세력 상세 (사주원국·오행·십성·신강신약·대운·세운) ===== */
.w-box{text-align:left; margin:28px 0 10px;}
/* 섹션 제목 — 본문 16px과 차이가 작아 제목으로 안 읽혔다. 키우고 위아래를 벌린다 */
/* 꼭지가 줄줄이 이어지면 어디서 이야기가 바뀌는지 눈이 못 끊는다.
   제목 앞을 비워 한 꼭지가 한 덩어리로 보이게 한다.
   예전엔 86px이었는데 화면 하나가 통째로 빌 만큼 벌어져서, 끊긴 게 아니라
   글이 끝난 것처럼 보였다. 여백은 줄이고 위에 실선을 그어 경계를 대신한다. */
.w-sec-t{font-size:20px; font-weight:800; margin:40px 0 18px; letter-spacing:-.5px;
  line-height:1.25; padding-top:22px; border-top:1px solid var(--line);}
/* 맨 위 제목은 그을 것이 없다 (잠금 안내 바로 밑도 마찬가지) */
.w-sec-t:first-child, .lock-line + .w-sec-t{border-top:0; padding-top:0;}
.w-sec-t span{display:block; font-size:13px; font-weight:500; color:var(--sub);
  margin:3px 0 0; line-height:1.4;}
/* 풀이 쪽 묶음 제목 — 아래가 카드 목록이라 선까지 그으면 칸이 이중으로 나뉜다.
   여기서는 제목 자체가 경계다.
   세로 리듬은 11(줄 사이) / 14(제목 아래) / 36(묶음 사이) / 56(값 묻는 자리)
   / 72(읽기 끝, 할 일 시작) 다섯 칸만 쓴다. */
.sec-grp{border-top:0; padding-top:0; margin:36px 0 14px;}
/* 잠긴 목록은 flex라 margin이 안 겹치고 gap 11px가 그대로 더해진다.
   같은 36 / 14로 보이게 하려면 그만큼 빼고 적어야 한다 */
.lockmenu-body .sec-grp{margin:25px 0 3px;}
/* '모두 펼치기' 줄 바로 아래 오는 첫 제목은 위 여백을 줄인다 */
.saju-body > .sec-grp:first-child{margin-top:20px;}

/* ── 문 여는 화면 ──
   계산(만세력)이 끝나고 풀이가 시작되는 자리. 묶음 제목 하나로는 '다음 꼭지'로
   읽혀 그냥 지나간다. 표지처럼 크게 세워 여기서 이야기가 시작된다고 알린다 */
.open-cover{margin:32px 0 24px; text-align:center;}
.open-cover .oc-l{font-size:13.5px; font-weight:700; color:var(--accent2); letter-spacing:-.2px;}
.open-cover .oc-t{margin-top:8px; font-size:25px; font-weight:800; color:var(--ink);
  letter-spacing:-1px; line-height:1.35; word-break:keep-all;}
/* '진짜'에만 색을 준다 — 문장 전체를 파랗게 하면 표지가 광고처럼 읽힌다 */
.open-cover .oc-t b{color:var(--accent2); font-weight:800;}

/* 아래에서 위로 스르르 — 스크롤이 닿을 때 한 번만.
   .in 이 붙기 전에는 안 보이므로, 붙여줄 사람(JS)이 없으면 아예 걸지 않는다 */
.rise{opacity:0; transform:translateY(18px); will-change:opacity, transform;}
.rise.in{opacity:1; transform:none;
  transition:opacity .5s ease, transform .55s cubic-bezier(.2,.8,.25,1);}
@media (prefers-reduced-motion: reduce){
  .rise, .rise.in{opacity:1; transform:none; transition:none;}
}
/* 잠금 안에서는 맛보기 높이가 정해져 있어 첫 제목이 여백을 다 먹으면 볼 게 없다.
   맨 위 한 덩어리에만 적용한다 — 아래쪽 꼭지까지 당기면 본문과 제목이 붙어버린다 */
#locked-body > *:first-child > .w-sec-t:first-child{margin-top:22px;}
/* 만세력 꼭지 밑 한 줄 설명 — 표가 무슨 뜻인지 그 자리에서 풀어준다.
   본문(16px)보다 작게 두되 회색으로 죽이지는 않는다. 읽히라고 넣은 글이다 */
/* 본문과 같은 조판 규칙 — 양쪽 정렬 + 음절 끊기.
   keep-all 인 채로 양쪽 정렬만 걸면 공백이 11px씩 벌어져 오히려 더 나쁘다
   (본문 .saju-body p 주석 참고) */
.w-note{margin:14px 0 0; font-size:14.5px; line-height:1.8; color:#4e5968;
  letter-spacing:-.2px; text-align:justify; word-break:normal; overflow-wrap:anywhere;}
.w-note b{color:var(--ink); font-weight:700;}
.w-scroll{overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
.w-scroll::-webkit-scrollbar{display:none;}
.w-table{width:100%; border-collapse:collapse; font-size:11.5px; min-width:330px;}
.w-table th{width:52px; color:var(--sub); font-weight:500; font-size:11px; text-align:left; padding:6px 4px; white-space:nowrap;}
.w-table td{text-align:center; padding:4px 3px; color:#4e5968;}
.w-table td.w-head{font-size:12px; font-weight:700; color:var(--ink); padding-bottom:8px;}
.w-table td.w-head span{display:block; font-size:10px; font-weight:500; color:var(--sub); margin-top:1px;}
.w-table td.w-sip{font-weight:600; color:var(--accent2);}
.wc{border-radius:10px; padding:7px 2px; display:flex; flex-direction:column; align-items:center; gap:1px;}
.wc b{font-size:19px; font-weight:700; line-height:1.1;}
.wc span{font-size:9.5px; opacity:.92;}
.wc-na{border-radius:10px; padding:12px 2px; background:#f2f4f6; color:#b0b8c1; text-align:center;}
/* ===== 오행 색 — 오방색(五方色) =====
   목=청 화=적 토=황 금=백 수=흑. 만세력이 원래 쓰는 색이고, 순색·흰색·검정을
   그대로 쓰기 때문에 칸끼리 대비가 가장 크게 벌어진다. 전부 중간 채도로
   맞췄던 예전 색이 탁해 보였던 게 이 대비가 없어서였다.
   글씨 색이 칸마다 다르다 — 황·백 칸에 흰 글씨를 얹으면 안 읽힌다.
     -i 칸 안 글씨 (대비 3.62~15.26)
     -b 막대·점  (흰 바탕에서도 보여야 해서 백·흑은 따로 잡는다)
     -t 흰 바탕 위 글씨 (대비 4.4 이상)

   오방색 체계 자체는 수백 년 된 규약이라 누구 것도 아니지만, 색값까지 남과
   같으면 베낀 게 된다. 그래서 규약은 따르되 톤은 우리 것으로 잡았다 —
   전체를 푸른 기조로 가는 서비스라 청은 더 짙게, 흑은 순검정 대신 남색빛으로.
   (수는 물이라 남색기가 도는 편이 오히려 뜻에 맞는다) */
:root{
  --oh-목:#2f7be0; --oh-목-i:#fff;     --oh-목-b:#2f7be0; --oh-목-t:#1a63c4;
  --oh-화:#ef4b55; --oh-화-i:#fff;     --oh-화-b:#ef4b55; --oh-화-t:#d63a44;
  --oh-토:#f5bb18; --oh-토-i:#191f28;  --oh-토-b:#f5bb18; --oh-토-t:#9c7000;
  --oh-금:#eef1f6; --oh-금-i:#39424e;  --oh-금-b:#97a2b0; --oh-금-t:#5a6675;
  --oh-수:#1c2634; --oh-수-i:#fff;     --oh-수-b:#2c3a4d; --oh-수-t:#1c2634;
}
.oh-목{background:var(--oh-목); color:var(--oh-목-i);}
.oh-화{background:var(--oh-화); color:var(--oh-화-i);}
.oh-토{background:var(--oh-토); color:var(--oh-토-i);}
/* 백(白)은 흰 종이 위에서 칸 자체가 사라지므로 여기만 테두리를 준다 */
.oh-금{background:var(--oh-금); color:var(--oh-금-i); box-shadow:inset 0 0 0 1px #dde1e6;}
.oh-수{background:var(--oh-수); color:var(--oh-수-i);}
.oh-b-목{background:var(--oh-목-b);} .oh-b-화{background:var(--oh-화-b);}
.oh-b-토{background:var(--oh-토-b);} .oh-b-금{background:var(--oh-금-b);}
.oh-b-수{background:var(--oh-수-b);}
.oh-t-목{color:var(--oh-목-t);} .oh-t-화{color:var(--oh-화-t);} .oh-t-토{color:var(--oh-토-t);}
.oh-t-금{color:var(--oh-금-t);} .oh-t-수{color:var(--oh-수-t);}
/* 오행 막대 */
.w-bars{display:flex; flex-direction:column; gap:12px;}
.w-bar{display:flex; align-items:center; gap:8px; font-size:12.5px;}
.wb-l{flex:0 0 20px; font-weight:700;}
.wb-track{flex:1; height:8px; border-radius:999px; background:#f2f4f6; overflow:hidden;}
.wb-track i{display:block; height:100%; border-radius:999px;}
.wb-v{flex:0 0 44px; text-align:right; font-weight:600; font-size:12px;}
/* 넘침과 모자람은 정반대인데 예전엔 둘 다 같은 빨강이라 구분이 안 됐다.
   색만으로 가르면 색약인 사람은 못 읽으므로 방향 표시도 같이 붙인다.
   넘침=위(빨강) · 모자람=아래(파랑) · 없음=아예 빔 */
.wb-lv{flex:0 0 46px; text-align:right; font-size:11px; color:var(--sub); white-space:nowrap;}
.wb-lv::before{margin-right:2px; font-size:9px;}
.wb-lv.lv-과다{color:#d0453a; font-weight:700;}
.wb-lv.lv-과다::before{content:"▲";}
.wb-lv.lv-부족{color:#4a72b8; font-weight:600;}
.wb-lv.lv-부족::before{content:"▼";}
.wb-lv.lv-없음{color:#2f5596; font-weight:700;}
.wb-lv.lv-없음::before{content:"○";}
.wb-lv.lv-적정{color:#7c8899;}
/* 십성 칩 */
.w-chips{display:flex; flex-wrap:wrap; gap:7px;}
.w-chip{display:inline-flex; align-items:baseline; gap:5px;
  font-size:12px; font-weight:500; color:#4e5968; background:#f4f5f7;
  padding:7px 11px; border-radius:999px;}
/* 편인·겁재는 그 말만 봐선 뜻을 모른다. 한 마디 풀이를 옆에 붙인다 */
.w-chip .wc-n{color:var(--ink); font-weight:700;}
.w-chip .wc-e{font-style:normal; font-size:11px; color:#8b95a1; letter-spacing:-.2px;}
.w-chip .wc-p{color:var(--accent); font-weight:700;}
/* 신강신약 */
.w-str{background:#f9f9fb; border-radius:14px; padding:16px; text-align:center;}
.ws-num{font-size:38px; font-weight:700; color:var(--accent); line-height:1;}
.ws-num small{font-size:14px; margin-left:2px;}
.ws-label{font-size:13.5px; font-weight:600; margin-top:4px;}
.ws-track{height:8px; border-radius:999px; background:#e9ebee; margin:12px 0 7px; overflow:hidden;}
/* 옅은 하늘 → 파랑 → 보라. 기운이 얇은 쪽에서 두꺼운 쪽으로 색이 진해진다.
   예전엔 노랑→빨강→파랑이라, 중화가 제일 위험해 보이는 색이었다 */
.ws-track i{display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,#d81f63,#f0417e 60%,#ff9dc0);}
.ws-scale{display:flex; justify-content:space-between; font-size:10.5px; color:var(--sub);}
/* 경계에 걸친 사주 — 1점 차이로 용신이 뒤집히는 자리라 딱 잘라 말하지 않는다 */
.w-str.ws-edge{background:#fdfaf4; box-shadow:inset 0 0 0 1.5px #f2e6d0;}
.ws-note{margin:11px 0 0; padding-top:10px; border-top:1px dashed #ece0cb;
  font-size:12px; line-height:1.65; color:#9a8663; word-break:keep-all;}
/* 대운·세운 */
.w-daeun{display:flex; gap:8px; padding-bottom:4px;}
.wd-col{flex:0 0 52px; display:flex; flex-direction:column; gap:4px;}
.wd-age{font-size:11px; font-weight:600; color:var(--sub); text-align:center;}
.wd-sip{font-size:10px; color:var(--accent2); text-align:center; font-weight:600;}

/* ===== 인기 심리테스트 2열 그리드 (썸네일 카드) ===== */
.pgrid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.pcard{display:flex; flex-direction:column; background:var(--card); border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow); text-decoration:none; color:var(--ink); transition:transform .12s ease;}
.pcard:active{transform:scale(.98);}
/* 썸네일: 지금은 컬러+이모지 더미, t.img 채우면 이미지로 자동 교체 */
.pcard .pc-thumb{aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  background-size:cover; background-position:center; background-repeat:no-repeat;}
.pcard .pc-thumb span{font-size:44px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.15));}
.pcard .pc-body{padding:12px 12px 14px; text-align:left; flex:1; display:flex; flex-direction:column;}
.pcard .pc-badge{display:inline-block; align-self:flex-start; font-size:10.5px; font-weight:600; color:var(--accent);
  background:var(--tint); padding:3px 8px; border-radius:999px; margin-bottom:6px;}
.pcard .pc-title{font-size:14.5px; font-weight:700; line-height:1.32; letter-spacing:-.3px; word-break:keep-all;}
.pcard .pc-tag{font-size:11.5px; color:var(--sub); line-height:1.45; margin-top:5px; word-break:keep-all;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
/* 참여수는 카드 맨 아래 왼쪽에 고정 (카드 높이가 달라도 한 줄에 정렬) */
.pcard .pc-players{font-size:11px; font-weight:600; color:var(--accent2); margin-top:auto; padding-top:10px; text-align:left;}

/* ===== 타로 배너 (홈 전용 섹션) ===== */
.tarot-banner{display:flex; align-items:center; gap:14px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#233b50,#3a5c7a 55%,#4eafff); color:#fff;
  border-radius:20px; padding:20px 18px; text-decoration:none; box-shadow:0 6px 20px rgba(40,82,120,.22);
  transition:transform .14s ease;}
.tarot-banner:active{transform:scale(.99);}
.tarot-banner::after{content:"✦"; position:absolute; right:16px; top:12px; font-size:13px; opacity:.5;}
.tb-cards{position:relative; width:62px; height:76px; flex-shrink:0;}
.tb-cards i{position:absolute; left:50%; bottom:0; width:34px; height:52px; margin-left:-17px;
  border-radius:6px; background:linear-gradient(140deg,#7bc4ff,#b8ddff);
  border:1px solid rgba(255,255,255,.55); transform-origin:50% 110%;
  box-shadow:0 3px 8px rgba(0,0,0,.25);}
.tb-cards i:nth-child(1){transform:rotate(-26deg);}
.tb-cards i:nth-child(2){transform:rotate(-13deg);}
.tb-cards i:nth-child(3){transform:rotate(0deg);}
.tb-cards i:nth-child(4){transform:rotate(13deg);}
.tb-cards i:nth-child(5){transform:rotate(26deg);}
.tb-txt{flex:1; min-width:0;}
.tb-txt .tb-t{font-size:18px; font-weight:700; letter-spacing:-.4px;}
.tb-txt .tb-d{font-size:12.5px; opacity:.86; line-height:1.5; margin-top:5px;}
.tb-go{font-size:12.5px; font-weight:600; opacity:.9; white-space:nowrap; align-self:flex-end;}

/* 섹션 헤드 (작은 카피 + 큰 타이틀) */
/* 홈에서 구역을 가르는 유일한 표시다. 작으면 목록이 통째로 하나로 읽힌다 */
.sec-head{margin:38px 4px 16px; text-align:left;}
.sec-head .sec-sub{font-size:13.5px; font-weight:600; color:var(--sub);}
.sec-head .sec-title{font-size:23px; font-weight:800; letter-spacing:-.8px; margin-top:4px; line-height:1.3;}

/* ===== 운세 아이콘 그리드 (홈) ===== */
.icon-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px 4px;
  background:var(--card); border-radius:20px; padding:24px 10px; box-shadow:var(--shadow);}
.icon-item{display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px 4px;
  border-radius:14px; text-decoration:none; color:var(--ink); position:relative; transition:background .12s ease;}
.icon-item:active{background:#f7f8fa;}
/* 회색 상자를 빼고 이모지를 키운다. 다만 자리(고정 크기)는 남긴다 —
   이모지는 글자마다 실제 폭이 달라서, 상자를 통째로 없애면 줄이 흔들린다 */
.icon-item .ic{width:52px; height:52px; border-radius:16px; background:transparent;
  display:flex; align-items:center; justify-content:center; font-size:36px; line-height:1;}
/* 라벨이 12.5px 이면 아이콘만 보이고 이름이 안 읽힌다 — 한 줄 유지되는 선까지 키운다 */
.icon-item .lb{font-size:15px; font-weight:600; text-align:center; word-break:keep-all;
  line-height:1.3; letter-spacing:-.3px;}
/* N 뱃지는 아이콘 어깨에 붙어야 한다. 아이템 기준으로 두면
   아이콘을 키운 만큼 저 혼자 멀리 떠 보인다 */
.icon-item .ic{position:relative;}
.icon-item.is-new .ic::after{content:"N"; position:absolute; top:-3px; right:-5px;
  width:16px; height:16px; border-radius:50%; background:var(--accent); color:#fff;
  font-size:9.5px; font-weight:700; display:flex; align-items:center; justify-content:center;}

/* ===== 단계별 입력 폼 ===== */
.form-title{font-size:15px; font-weight:600; color:var(--sub); text-align:left; margin-bottom:2px;}
.sf-step{font-size:12.5px; font-weight:600; color:var(--accent); letter-spacing:.3px; text-align:left;}
.sf-step b{font-weight:700;}
.sf-q{font-size:22px; font-weight:700; line-height:1.4; letter-spacing:-.6px; text-align:left;
  margin:7px 0 18px; word-break:keep-all;}
.sf-fields{display:flex; flex-direction:column-reverse; gap:0; text-align:left;}
.sf-hide{display:none !important;}
@keyframes sfIn{from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:none;}}
/* 지나간 항목은 흐리게 (현재 항목에 집중) · 항목 사이는 넉넉하게 */
.sf-fields > [data-step]{animation:sfIn .3s ease; padding-bottom:30px;}
.sf-fields > [data-step].sf-cur{padding-bottom:20px;}
/* 흐리게는 상자째가 아니라 요소별로 건다. 상자에 opacity를 걸면 고른 값의 표시
   (옅은 파랑 바탕)까지 같이 바래서 뭘 골랐는지 안 보인다 — 고른 것은 또렷하게 남긴다 */
.sf-fields label, .sf-fields input, .sf-fields select{transition:opacity .2s ease;}
.sf-fields > [data-step]:not(.sf-cur) label,
.sf-fields > [data-step]:not(.sf-cur) .q-hint{opacity:.5;}
.sf-fields > [data-step]:not(.sf-cur) input,
.sf-fields > [data-step]:not(.sf-cur) select{opacity:.72;}
.sf-fields > [data-step]:not(.sf-cur) .chips button:not(.on),
.sf-fields > [data-step]:not(.sf-cur) .seg button:not(.on),
.sf-fields > [data-step]:not(.sf-cur) .seg-mini button:not(.on){opacity:.45;}
.sf-fields .field{margin-bottom:0;}
.sf-fields .field + .field{margin-top:16px;}
.sf-fields .q-hint{margin:0 0 12px; text-align:left;}
.sf-fields .chips{justify-content:flex-start;}
.sf-next{width:100%; border:none; border-radius:14px; padding:15px; font-size:15.5px; font-weight:600;
  background:#f2f4f6; color:#b0b8c1; transition:background .15s ease, color .15s ease; cursor:pointer; margin-top:4px;}
.sf-next:active{transform:scale(.99);}
/* 값이 입력되면 버튼에 불이 들어온다 */
.sf-next.on{background:var(--btn); color:#fff;}
/* 지나간 단계의 '다음' 버튼은 숨김 */
.sf-fields > [data-step]:not(.sf-cur) .sf-next{display:none;}

/* 마지막 단계의 제출 버튼은 화면 아래에 붙여 띄운다.
   폼 안에 두면 채운 항목이 쌓일수록 버튼이 아래로 밀려 매번 찾아 스크롤해야 한다 */
.sf-bar{position:fixed; left:50%; bottom:0; z-index:99;
  transform:translateX(calc(-50% + var(--app-shift)));
  width:100%; max-width:440px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
  border-top:1px solid #ecf0f3; padding:11px 16px 13px;
  box-shadow:0 -8px 22px rgba(0,0,0,.07);
  transition:transform .44s cubic-bezier(.22,1,.36,1), opacity .3s ease, visibility .44s;}
/* display 를 껐다 켜면 브라우저가 첫 프레임을 건너뛰어 애니메이션이 씹힌다.
   늘 그려둔 채 화면 밖으로 밀어놓고 transform 으로 스르륵 올린다 (.sf-hide 의 display:none 은 여기서 무른다) */
.sf-bar.sf-hide{display:block !important; opacity:0; visibility:hidden; pointer-events:none;
  transform:translate(calc(-50% + var(--app-shift)), 105%);}
/* 탭바 위에 얹으면 높이가 조금만 어긋나도 그 틈으로 본문이 비친다.
   바닥까지 깔고 탭바 높이만큼 안쪽 여백을 준다 (탭바가 위에 그려진다) */
body.has-tabbar .sf-bar{padding-bottom:calc(58px + env(safe-area-inset-bottom) + 13px);}
.sf-bar .btn{margin:0 !important;}
/* 바가 떠 있는 동안은 본문 끝이 가려지지 않게 여백을 준다 */
body.sf-bar-on .wrap{padding-bottom:96px;}

/* ===== 확인창 (브라우저 기본 confirm 대신) =====
   기본 confirm 은 주소가 그대로 노출되고 생김새가 우리 화면과 따로 논다 */
.cm-overlay{position:fixed; inset:0; background:rgba(30,20,50,.5); display:none;
  align-items:center; justify-content:center; z-index:300; padding:24px;}
.cm-overlay.open{display:flex;}
.cm-box{background:#fff; border-radius:18px; padding:22px 20px; width:100%; max-width:360px;
  animation:cmIn .26s cubic-bezier(.22,1,.36,1);}
@keyframes cmIn{from{opacity:0; transform:translateY(14px) scale(.97);} to{opacity:1; transform:none;}}
.cm-title{font-size:17px; font-weight:700; text-align:center; word-break:keep-all;}
.cm-sub{font-size:12.5px; color:var(--sub); text-align:center; margin-top:6px; word-break:keep-all;}
.cm-sub b{color:var(--accent2);}
.cm-rows{margin:16px 0;}
.cm-row{display:flex; justify-content:space-between; gap:12px; padding:9px 0;
  border-bottom:1px solid #f0f5fa; font-size:14px;}
.cm-row .k{color:var(--sub); font-weight:700;}
.cm-row .v{font-weight:700; text-align:right; word-break:break-all;}
.cm-acts{display:flex; gap:10px;}
.cm-acts button{flex:1; border:none; border-radius:12px; padding:14px; font-size:15px;
  font-weight:700; cursor:pointer; transition:filter .12s ease, transform .12s ease;}
.cm-acts button:active{transform:scale(.98); filter:brightness(.96);}
.cm-edit{background:#f2f4f6; color:#4e5968;}
.cm-ok{background:var(--btn); color:#fff;}
/* 되돌릴 수 없는 동작(삭제)은 빨강으로 확실히 구분한다 */
.cm-ok.danger{background:#e05a5a;}
.cm-rows:empty, .cm-sub:empty{display:none;}

/* ===== 데스크탑 브랜드 패널 (좁은 화면에선 숨김) ===== */
.desk-side{display:none;}
@media (min-width:1120px){
  :root{--app-shift:230px;}
  /* 바깥은 차분한 배경, 앱 컬럼만 우리 그라데이션 + 좌우 얇은 경계선 */
  body{background:#eceef1;}
  body::before{
    content:""; position:fixed; top:0; bottom:0; left:50%;
    transform:translateX(calc(-50% + var(--app-shift)));
    width:100%; max-width:440px; z-index:-1; pointer-events:none;
    background:var(--card);
    border-left:1px solid var(--line);
    border-right:1px solid var(--line);
    box-shadow:0 0 40px rgba(25,31,40,.05);
  }
  .desk-side{display:block; position:fixed; top:50%; transform:translateY(-50%);
    left:calc(50% - 520px); width:400px; z-index:90;}
  .desk-side .ds-logo{font-size:26px; font-weight:700; letter-spacing:-.5px;}
  .desk-side .ds-logo .dot{color:var(--accent);}
  .desk-side .ds-lead{font-size:14.5px; color:var(--sub); font-weight:700; margin-top:30px;}
  .desk-side .ds-head{font-size:34px; font-weight:700; line-height:1.3; letter-spacing:-1px; margin-top:8px;}
  .desk-side .ds-head b{color:var(--accent2);}
  .desk-side .ds-list{margin-top:28px; display:flex; flex-direction:column; gap:13px;}
  .desk-side .ds-item{display:flex; align-items:center; gap:11px; font-size:14.5px; font-weight:700; color:#4a4a5a;}
  .desk-side .ds-item .ds-e{font-size:20px;}
  .desk-side .ds-item b{color:var(--ink); font-weight:700;}
  /* 이렇게 계산해요 (신뢰 카드) */
  .desk-side .ds-trust{background:#fff; border-radius:16px; padding:16px 18px; margin-top:28px;
    box-shadow:0 8px 22px rgba(60,90,120,.10);}
  .desk-side .ds-trust .dt-t{font-size:13px; font-weight:700; margin-bottom:9px;}
  .desk-side .ds-trust .dt-row{font-size:12.5px; color:#4a4a5a; font-weight:700; margin-top:7px; line-height:1.5;}
  .desk-side .ds-foot{margin-top:22px; font-size:12px; color:var(--sub); line-height:1.7;}
  .desk-side .ds-foot a{color:var(--accent2); font-weight:600;}
}
/* 앱은 440px 컬럼이라 화면이 그보다 넓으면 곧바로 가운데 정렬된다.
   그런데 상단바 배경만 화면 끝까지 깔려 있어서, 카드와 세로선이 안 맞아 보였다.
   예전엔 이 규칙이 900px 이상에만 있어 그 아래 폭(태블릿·좁은 창)에서 어긋났다. */
@media (min-width:470px){
  /* 넓은 화면에서는 헤더가 앱 폭 안에만 있어야 한다. 밑줄을 바깥 틀에 두면
     그 한 줄이 화면 끝까지 가로질러서, 바탕이 흰 쪽에서는 선만 덩그러니 남는다 */
  .topbar-fixed{background:transparent; box-shadow:none; border-bottom:0;}
  .topbar-inner{background:#fff; box-shadow:0 2px 12px rgba(60,90,120,.08);
    border-left:1px solid var(--line); border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);}
  .tabbar{border-left:1px solid var(--line); border-right:1px solid var(--line);}
}
.back-link{display:inline-block; font-size:13.5px; font-weight:600; color:var(--accent2); text-decoration:none; margin:2px 0 10px;}
.v-date{font-size:12.5px; color:var(--sub); margin-top:4px;}
.ticket-banner{background:var(--tint); color:var(--accent); font-size:12.5px; font-weight:600;
  text-align:center; padding:9px 12px; border-radius:12px; margin-bottom:14px;}
/* 상황 선택 칩 (오늘의 운세 입력) */
.chips{display:flex; flex-wrap:wrap; gap:9px;}
.chips button{border:1px solid #e5e8eb; background:#fff; color:#4e5968; font-weight:500; font-size:13.5px; padding:10px 15px; border-radius:999px; cursor:pointer; transition:all .12s ease;}
/* 선택 = 테두리와 배경 동일 색 */
.chips button.on{background:#e9ebee; border-color:transparent; color:var(--ink); font-weight:700;}
.chips.miss button{border-color:#f0a3b4;}
.chips.miss{animation:shakeX .52s cubic-bezier(.36,.07,.19,.97) both;}
.chips button.skip{color:#b0b8c1; border-style:dashed;}
.chips button.skip.on{color:var(--accent2); border-style:solid;}
/* 상황 질문 블록 (부드러운 질문형) */
.q-block{text-align:left; margin:30px 0 26px;}
.q-block .q-title{font-size:15.5px; font-weight:600; line-height:1.5; color:var(--ink);}
.q-block .q-hint{font-size:12.5px; font-weight:600; color:var(--sub); margin:5px 0 14px;}
/* 대표프로필 불러오기 카드 (운세 입력) */
/* ── 저장된 사주 고르기 ──
   아래 입력칸과 다른 섹션이라는 게 보여야 한다. 붙여두면 카드가 입력칸의
   머리말처럼 읽혀서, 눌러서 갈아 끼울 수 있다는 걸 아무도 모른다 */
.prof-load{background:#f7fbff; border:1.5px solid #e3effb; border-radius:16px;
  padding:13px 10px 10px; margin-bottom:30px;}
.prof-load .pl-head{font-size:13.5px; font-weight:700; color:var(--accent2); margin:2px 0 10px 4px; text-align:left;}
.prof-load .pl-list{display:flex; flex-direction:column; gap:8px;}
.prof-load .pl-row{display:flex; align-items:center; gap:11px; width:100%;
  background:#fff; border:1.5px solid transparent; border-radius:12px; padding:10px 11px;
  font:inherit; color:var(--ink); text-align:left; cursor:pointer; transition:border-color .12s ease;}
.prof-load .pl-row.on{border-color:var(--accent); background:#fff;}
.prof-load .pl-row:active{background:#f4f8ff;}
.prof-load .pl-av{width:38px; height:38px; border-radius:50%; background:#eef3f9;
  display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0;}
.prof-load .pl-info{flex:1; min-width:0;}
.prof-load .pl-info b{display:block; font-size:16px; font-weight:700;}
.prof-load .pl-info small{display:block; font-size:13px; color:var(--sub); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.prof-load .pl-pick{flex-shrink:0; font-size:12.5px; font-weight:700; color:#a4adb8;
  background:#f2f4f6; padding:7px 11px; border-radius:8px;}
.prof-load .pl-row.on .pl-pick{color:var(--ink); background:#eceef1;}
/* '새로 입력하기'도 같은 목록의 한 줄이다. 다만 사람이 아니라 동작이라
   테두리를 점선으로 두어 결이 다르다는 걸 보인다 */
.prof-load .pl-row.pl-new{border-style:dashed; border-color:#cfe0f2; background:#fbfdff;}
.prof-load .pl-row.pl-new .pl-av{background:#eef3f9; color:var(--accent2); font-weight:700;}
.prof-load .pl-row.pl-new.on{border-style:solid; border-color:var(--accent);}
.prof-load .pl-add{display:block; text-align:center; margin-top:10px; padding:9px;
  font-size:12.5px; font-weight:700; color:#8b95a1; text-decoration:none;}x 13px; border-radius:9px; cursor:pointer;}

/* 궁합: 두 사람 입력 사이 구분 */
.gh-divider{height:1px; background:var(--line); margin:30px 0 22px;}

/* 결과 상단 생년월일 병기 */
/* ── 첫 화면 요약 ──
   여덟 글자 표를 바로 들이밀면 읽을 줄 아는 사람만 얻어간다.
   "나는 뭐냐"에 한 단어로 답하는 것 셋을 앞에 세운다.
   동그란 아이콘 석 장을 나란히 두는 건 남의 집 문법이라, 한 장짜리 띠에
   가는 선으로 칸만 나눈다 — 표와 설명이 쓰는 결과 같게. */
.sum3{display:grid; grid-template-columns:repeat(3,1fr);
  background:#f7f9fc; border-radius:14px; padding:15px 4px; margin:18px 0 4px;}
.sum3.hidden{display:none;}
.s3{text-align:center; padding:0 6px; position:relative;}
.s3 + .s3::before{content:""; position:absolute; left:0; top:6%; bottom:6%;
  width:1px; background:#e3e9f0;}
.s3 small{display:block; font-size:11.5px; font-weight:600; color:#a4adb8; letter-spacing:-.2px;}
.s3 b{display:block; margin-top:6px; font-size:15.5px; font-weight:800;
  letter-spacing:-.5px; color:var(--ink); word-break:keep-all; line-height:1.35;}
.s3 b em{font-style:normal; font-weight:800;}
@media (max-width:360px){ .s3 b{font-size:14px;} .s3 small{font-size:11px;} }
.birth-line{font-size:13.5px; color:var(--sub); margin:2px 0 4px;}

/* 토정비결 원문 — 한자 위, 한글 독음 아래 */
.hanja{margin:12px 0 16px; text-align:center;}
.hanja .hv{margin:14px 0;}
/* 한자는 Pretendard에 글리프가 없어 시스템 폰트로 떨어진다. 한국식 자형을 쓰는
   폰트를 먼저 지정해야 중국 간체 자형으로 렌더되지 않는다.
   획이 많아 한글과 같은 크기면 훨씬 작아 보이므로 한 단계 키운다. */
.hanja .hh{font-family:var(--hanja); font-size:22px; font-weight:600; letter-spacing:1.5px; color:var(--ink); line-height:1.25;}
.hanja .hr{font-size:13px; color:var(--sub); margin-top:1px; line-height:1.25; letter-spacing:.2px;}
.hanja .ht{margin-top:18px; padding-top:15px; border-top:1px solid #eef0f3; text-align:center;
  font-size:15.5px; color:#4a4a5a; line-height:1.55;}
.hanja .ht p{margin:0 auto 13px; max-width:26em; text-wrap:balance;}
.hanja .ht p:last-child{margin-bottom:0;}
.hstory{font-size:15.5px; color:#4a4a5a; line-height:1.85; margin:0 0 18px; padding:12px 14px; background:#f7f8fa; border-radius:12px;}
.hanja + .hstory{margin-top:-4px;}
.mrow + .hanja{margin:6px 0 18px;}
.mrow + .hanja .hh{font-size:19px; letter-spacing:1.2px;}
.mrow + .hanja .hv{margin:11px 0;}




/* ── 대운 전용 ────────────────────────────────── */
.pick-hint{background:var(--tint); border-radius:10px; padding:11px 14px; margin:-6px 0 12px;
  font-size:13.5px; color:#4b87b8; font-weight:600; text-align:center;}

.toc{display:flex; flex-direction:column; gap:6px; margin-top:14px;}
.toc-row{display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  background:#fff; border:1.5px solid #eef2f6; border-radius:14px;
  padding:14px 14px 14px 12px; font:inherit; cursor:pointer; transition:.15s;}
.toc-row:active{transform:scale(.99);}
.toc-row.pick{border-color:var(--accent2); background:#f9fcff;
  box-shadow:0 0 0 3px rgba(78,175,255,.09);}
.toc-n{flex:0 0 auto; font-size:13px; font-weight:800; color:#c9d3dd; letter-spacing:.5px;
  min-width:22px; text-align:center;}
.toc-row.pick .toc-n{color:var(--accent2);}
.toc-b{flex:1; min-width:0;}
/* 목차 앞의 간지 블록 — 천간/지지를 오행 색으로 쌓아 10개 장을 한눈에 구분한다 */
.toc-gz{flex:0 0 auto; display:flex; flex-direction:column; gap:2px; width:34px;}
.toc-gz i{font-family:var(--hanja); display:block; height:26px; line-height:26px; text-align:center; border-radius:7px;
  font-style:normal; font-size:15px; font-weight:700; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.18);}
.toc-row.pick .toc-gz i{box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--accent2);}
.toc-num{display:inline-block; font-size:11px; font-weight:800; color:#c9d3dd;
  letter-spacing:.3px; margin-right:5px; vertical-align:1px;}
.toc-row.pick .toc-num{color:var(--accent2);}
.toc-row.done .toc-num::before{content:"✓ "; color:#2f8f52;}
.toc-age{display:block; font-size:12.5px; font-weight:700; color:#8695a3; letter-spacing:-.2px;}
.toc-age small{font-weight:600; color:#b1bcc6; margin-left:4px;}
.toc-t{display:block; margin-top:3px; font-size:16px; font-weight:700; color:var(--ink);
  letter-spacing:-.4px; line-height:1.4;}
.toc-row.pick .toc-t{color:var(--accent2);}
.toc-now{flex:0 0 auto; background:var(--accent2); color:#fff; font-size:11px; font-weight:700;
  padding:4px 9px; border-radius:999px;}
.toc-go{flex:0 0 auto; color:#c9d3dd; font-size:20px; line-height:1;}

/* 장 아래의 절(節) — 연도별.
   위쪽 '인생 목차'는 눌러서 옮기는 카드지만 여기는 읽기만 하는 목록이다.
   카드처럼 배경·테두리를 두면 눌러도 될 것처럼 보여서, 세로선만 남긴 타임라인으로 둔다. */
.toc.sub{position:relative; gap:0; border:0; border-radius:0;
  background:transparent; overflow:visible; margin-top:12px; padding-left:2px;}
.toc.sub::before{content:""; position:absolute; left:15px; top:20px; bottom:20px;
  width:2px; background:#eaeff3; z-index:0;}
.toc-row.sec .toc-n{position:relative; z-index:1; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; min-width:26px; border-radius:50%;
  background:var(--bg1); border:2px solid #eaeff3; font-size:11px; color:#b1bcc6;}
.toc-row.sec.pick .toc-n{background:var(--accent2); border-color:var(--accent2); color:#fff;}
.toc-row.sec{border:0; border-radius:0; cursor:default; box-shadow:none;
  padding:11px 4px 11px 2px; background:transparent;}
.toc-row.sec:active{transform:none;}
.toc-row.sec.pick{background:transparent; box-shadow:none;}
.toc-row.sec.pick .toc-t{color:var(--accent2);}
.toc-row.sec .toc-t{font-size:14.5px; font-weight:600;}
.toc-row.sec .toc-age{font-size:12px;}








.lc-help{margin:12px 0 0; padding:16px 18px; background:#fafafc; border-radius:14px;
  font-size:15px; line-height:1.9; color:#4a4a5a; text-align:center;}
.lc-help b{color:var(--ink); font-weight:700;}
.lc-help b.up{color:var(--accent2);} .lc-help b.dn{color:#2f9e8f;}


















.tl{border-left:2px solid #eaeff3; margin:2px 0 0 9px; padding:2px 0;}









.du-chapter{background:linear-gradient(180deg,#f5faff,#fff); border:1px solid #e8f5ff;
  border-radius:16px; padding:20px 18px;}
.dc-title{font-size:21px; font-weight:700; color:var(--accent2); text-align:center;
  letter-spacing:-.5px; line-height:1.4;}
.dc-body{margin:14px 0 0; font-size:16px; line-height:1.9; color:#4a4a5a;}

/* 세운 연도 카드 */
.saju-body .saju-h.big{font-size:23px; margin:50px 0 12px;}
.sec-note{margin:0 0 20px; padding:14px 16px; background:#f6f9fb; border-radius:12px;
  font-size:13.5px; line-height:1.8; color:#646e78; text-align:left;}
.sec-note b{color:var(--ink); font-weight:700;}
.mcard.yr{padding:16px;}
.mcard.yr.now{border-color:#d5ecff; background:#f9fcff;}
.yr-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.yr-y{font-size:15px; font-weight:800; color:var(--ink); letter-spacing:-.3px;}
.yr-y small{font-size:12.5px; font-weight:600; color:#8695a3; margin-left:3px;}
.yr-now{background:var(--accent2); color:#fff; font-size:11px; font-weight:700;
  padding:3px 8px; border-radius:999px;}
.yr-gz{font-family:var(--hanja); margin-left:auto; font-size:13.5px; font-weight:600; color:#8695a3;
  background:#f2f5f8; padding:4px 9px; border-radius:8px; white-space:nowrap;}
.yr-gz small{font-size:11px; font-weight:600; color:#a1acb8; margin-left:3px;}
.yr-t{margin:11px 0 10px; font-size:16.5px; font-weight:700; color:var(--accent2);
  letter-spacing:-.4px; line-height:1.45;}
.mcard.yr .hstory{background:transparent; padding:0; margin:0; border:0;}

/* ── 대운 결제 유도 (부분 결제형) ────────────────── */
.lm-h{font-size:23px; font-weight:800; margin:46px 0 8px; letter-spacing:-.5px;}
/* 제목이 가운데라 본문도 가운데로. 왼쪽 정렬이면 제목과 축이 어긋나 보인다 */
.lm-d{margin:0 0 22px; font-size:15px; line-height:1.75; color:var(--sub);
  text-align:center; word-break:keep-all;}
.lm-d b{color:var(--ink); font-weight:700;}
.lockmenu{display:flex; flex-direction:column; gap:7px;}
.lm-row{display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:#fafcfd; border:1.5px solid #eef2f6; border-radius:13px;
  padding:14px 14px; font:inherit; cursor:pointer; transition:.15s;}
.lm-row:active{transform:scale(.99); background:var(--tint);}
.lm-e{font-size:17px; flex:0 0 auto;}
.lm-t{flex:1; min-width:0; font-size:15px; font-weight:600; color:#646e78; letter-spacing:-.3px;}
.lm-row{cursor:pointer;}
.lm-row{align-items:flex-start;}
.lm-e{align-self:center;}
.lm-b{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
.lm-b .lm-t{flex:none;}
/* 실제 본문의 첫 조각 — 끝을 흐리게 지워 문장이 끊긴 느낌을 준다.
   블러를 걸어봤는데 12px짜리 짧은 줄에서는 뭉개지기만 하고 '잠김'으로 안 읽혔다.
   가로 페이드만 남긴다. */
.lm-tease{display:block; font-size:12.5px; line-height:1.55; color:#9baab8;
  white-space:nowrap; overflow:hidden; user-select:none;
  -webkit-mask-image:linear-gradient(90deg,#000 55%,transparent 97%);
          mask-image:linear-gradient(90deg,#000 55%,transparent 97%);}
.lm-sub{margin:26px 0 10px; font-size:13.5px; font-weight:700; color:#9babbd; letter-spacing:-.2px;}
.lm-row.yr{padding:12px 14px;}
.lm-row.yr .lm-y{flex:0 0 84px; font-size:13.5px; font-weight:800; color:var(--ink);}
.lm-row.yr .lm-y small{display:block; font-size:11.5px; font-weight:600; color:#a1acb8;}
.lm-row.yr .lm-t{font-size:14px;}

.paybar{position:fixed; left:50%; transform:translateX(calc(-50% + var(--app-shift)));
  width:100%; max-width:440px; bottom:0; z-index:99;
  background:#fff; backdrop-filter:blur(10px);
  border-top:1px solid #ecf0f3; padding:11px 16px 13px;
  box-shadow:0 -8px 22px rgba(0,0,0,.07);}
/* 탭바 위에 띄우면 높이가 조금만 어긋나도 그 틈으로 본문이 비친다.
   바닥까지 깔고 탭바 높이만큼 안쪽 여백을 줘서 틈이 생길 수 없게 한다 (탭바가 위에 그려진다) */
body.has-tabbar .paybar{bottom:0; padding-bottom:calc(58px + env(safe-area-inset-bottom) + 13px);}
.paybar .btn{margin:0;}
.pb-list{margin:0 0 9px; font-size:12px; font-weight:700; color:var(--accent2); text-align:center;}
body.has-paybar .wrap{padding-bottom:150px;}
/* 이미 결제해 열어둔 장 — 간지 블록에 초록 테두리를 둘러 구분한다 */
.toc-row.done{border-color:#bfe3cb; background:#fbfffc;}
.toc-row.done .toc-gz i{box-shadow:0 0 0 2px #fff, 0 0 0 3.5px #6cbf8c;}
.toc-row.done.pick .toc-gz i{box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--accent2);}

/* ===== 택일 — 달력 ===== */
.chips{display:flex; flex-wrap:wrap; gap:7px;}
.chips.center{justify-content:center; margin:14px 0 4px;}
.chip{background:#fff; border:1.5px solid #eaeff3; border-radius:999px; padding:9px 13px;
  font:inherit; font-size:13.5px; font-weight:700; color:var(--sub); cursor:pointer; transition:.15s;}
.chip.on{background:#e9ebee; border-color:transparent; color:var(--ink); font-weight:700;}
.chip:active{transform:scale(.97);}

.cal{margin-top:14px; border:1.5px solid #eef2f6; border-radius:16px; overflow:hidden; background:#fff;}
.cal-head{display:flex; align-items:center; gap:8px; padding:12px 10px; border-bottom:1px solid #f2f5f8;}
.cal-title{flex:1; text-align:center; font-size:16px; font-weight:800; color:var(--ink); letter-spacing:-.3px;}
.cal-nav{width:34px; height:34px; border-radius:10px; border:1.5px solid #eaeff3; background:#fff;
  font:inherit; font-size:19px; line-height:1; color:var(--sub); cursor:pointer;}
.cal-nav:disabled{opacity:.3; cursor:default;}
.cal-dow{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); padding:8px 4px 4px;
  font-size:11.5px; font-weight:700; color:#b1bcc6; text-align:center;}
.cal-dow .sun{color:#e0574e;} .cal-dow .sat{color:#3f5b8c;}
/* 1fr은 칸 내용보다 작아지지 못한다. 게다가 .cal-cell의 aspect-ratio가
   '줄 높이 → 칸 너비'로 거꾸로 작동해서 한 칸이 89px까지 부풀었고,
   격자가 647px이 되어 수요일 뒤로는 화면 밖으로 잘려 나갔다.
   minmax(0,1fr)로 열 너비를 먼저 정하면 높이가 거기서 따라온다. */
.cal-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; padding:4px 4px 8px;}
.cal-cell{position:relative; aspect-ratio:1/1.12; border:0; border-radius:9px; background:#fafafd;
  font:inherit; cursor:pointer; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:1px; padding:0; transition:.12s;}
.cal-cell.empty{background:transparent; cursor:default;}
.cal-cell.lock{background:#f5f8fa; cursor:default;}
.cal-cell:active{transform:scale(.94);}
.cd-n{font-size:14px; font-weight:800; color:var(--ink); line-height:1;}
.cd-g{font-size:9.5px; font-weight:800; letter-spacing:-.3px; line-height:1;}
.cd-son{position:absolute; top:3px; right:4px; font-size:8.5px; font-weight:800;
  color:#2f8f52; background:#e8f6ec; border-radius:4px; padding:1px 3px; line-height:1.3;}
.cal-cell.g-대길{background:#eef3ff;} .cal-cell.g-대길 .cd-g{color:#3d5ccc;}
.cal-cell.g-길  {background:#f0faf3;} .cal-cell.g-길   .cd-g{color:#2f8f52;}
.cal-cell.g-보통{background:#fafafd;} .cal-cell.g-보통 .cd-g{color:#b1bcc6;}
.cal-cell.g-주의{background:#fdf1f0;} .cal-cell.g-주의 .cd-g{color:#c9463c;}
.cal-cell.on{box-shadow:0 0 0 2.5px var(--accent2); z-index:1;}
.cal-legend{display:flex; justify-content:center; flex-wrap:wrap; gap:6px 14px; margin-top:10px;
  font-size:11.5px; font-weight:700; color:var(--sub);}
.cal-legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:4px; vertical-align:-1px;}
.cal-legend .g-대길{background:#c9d6ff;} .cal-legend .g-길{background:#b5e5c6;}
.cal-legend .g-보통{background:#e3e9ee;} .cal-legend .g-주의{background:#f5c4bf;}

/* 고른 날 카드 */
.daybox:empty{display:none;}
.dayc{margin-top:14px; border:1.5px solid #eef2f6; border-radius:14px; padding:14px; background:#fff; text-align:left;}
.dayc + .dayc{margin-top:10px;}
.dayc.g-대길{border-color:#c9d6ff; background:#fbfcff;}
.dayc.g-길{border-color:#bfe3cb; background:#fbfffc;}
.dayc.g-주의{border-color:#f2cdc9; background:#fffbfb;}
.dc-head{display:flex; align-items:center; gap:10px;}
.dc-date{flex:1; font-size:16px; font-weight:800; color:var(--ink); letter-spacing:-.4px;}
.dc-date small{display:block; margin-top:2px; font-size:11.5px; font-weight:600; color:#b1bcc6; letter-spacing:0;}
.dc-grade{flex:0 0 auto; font-size:12px; font-weight:800; padding:5px 10px; border-radius:999px;}
.dc-grade.g-대길{background:#3d5ccc; color:#fff;} .dc-grade.g-길{background:#e8f6ec; color:#2f8f52;}
.dc-grade.g-보통{background:#f0f4f7; color:#8695a3;} .dc-grade.g-주의{background:#fdeceb; color:#c9463c;}
.dc-tags{display:flex; flex-wrap:wrap; gap:5px; margin-top:10px;}
.dt{font-size:11.5px; font-weight:700; color:var(--sub); background:#f5f8fa; border-radius:7px; padding:4px 8px;}
.dt.gz{font-family:var(--hanja); font-size:12.5px; background:#edf2f7; color:var(--accent2);} .dt.gz small{font-weight:600; opacity:.7;}
.dt.good{background:#e8f6ec; color:#2f8f52;} .dt.bad{background:#fdeceb; color:#c9463c;}
.dt.son{background:#fff6e0; color:#a5761a;}
.dc-b{margin:9px 0 0; font-size:14.5px; line-height:1.75; color:var(--ink);}
.dc-b b{color:var(--accent2);}
.dc-notes{margin-top:9px; border-top:1px dashed #eaeff3; padding-top:9px;}
.dc-notes p{margin:0 0 5px; font-size:13.5px; line-height:1.7; color:var(--sub);}
.dc-notes p:last-child{margin-bottom:0;}
.dc-notes .good b{color:#2f8f52;} .dc-notes .bad b{color:#c9463c;}
.dc-adv{margin:10px 0 0; font-size:13.5px; line-height:1.75; color:var(--ink);
  background:#f9fcff; border-radius:10px; padding:10px 12px;}
/* 날짜를 눌렀을 때 뜨는 '자세히 보기' — 예전엔 '아래에서 열 수 있어요'라는 안내문이었는데,
   정작 바로 아래엔 다른 내용이 있어 어색했다. 그 자리에서 바로 여는 버튼으로 바꿨다. */
.dc-more{display:block; margin:14px auto 2px; padding:11px 18px; border:1px solid #dce8f3;
  border-radius:12px; background:#f5faff; color:var(--accent2);
  font:inherit; font-size:13.5px; font-weight:800; cursor:pointer; transition:.12s;}
.dc-more:active{transform:scale(.97);}

/* ===== 신년운세 — 연간 카드 / 레이더 / 12개월 히트맵 ===== */
.yearcard{margin-top:16px; border:1.5px solid #eef2f6; border-radius:18px; padding:20px 16px;
  background:linear-gradient(160deg,#fafdff,#fff); text-align:center;}
.yc-gz{display:flex; justify-content:center; gap:6px;}
.yc-h{font-family:var(--hanja); display:block; width:44px; height:52px; line-height:52px; border-radius:11px;
  background:var(--accent2); color:#fff; font-style:normal; font-size:26px; font-weight:700;
  text-shadow:0 1px 3px rgba(0,0,0,.2);}
.yc-t{margin-top:14px; font-size:21px; font-weight:800; color:var(--ink); letter-spacing:-.6px; line-height:1.35;}
.yc-gzk{margin-top:4px; font-size:12.5px; font-weight:700; color:#b1bcc6;}
.yc-line{margin:12px 0 0; font-size:15px; line-height:1.85; color:var(--sub); text-align:left;}
.yc-total{margin-top:16px; padding-top:14px; border-top:1px dashed #eaeff3;
  display:flex; align-items:baseline; justify-content:center; gap:6px;}
.yc-total span{font-size:12.5px; font-weight:700; color:#b1bcc6;}
.yc-total b{font-size:30px; font-weight:800; color:var(--accent2); letter-spacing:-1px;}
.yc-total small{font-size:12.5px; font-weight:700; color:#b1bcc6;}

/* 그 해가 놓인 대운 — 세운 한 줄만 보면 어느 판 위에서 굴러가는 해인지 모른다 */
.yc-daeun{margin:11px 2px 0; font-size:13.5px; line-height:1.75; color:#7b8894;
  text-align:left; word-break:keep-all;}
.yc-daeun b{color:var(--accent2); font-weight:700;}
.sjc{margin-top:12px; border-radius:14px; padding:14px 15px; text-align:left;}
.sjc b{display:block; font-size:15px; font-weight:800; letter-spacing:-.3px;}
.sjc p{margin:7px 0 0; font-size:14px; line-height:1.8;}
.sjc.on{background:#fff8f0; border:1.5px solid #f2ddc4;}
.sjc.on b{color:#a5761a;} .sjc.on p{color:#7d6a4e;}
.sjc.off{background:#f7fdf9; border:1.5px solid #cfeadb;}
.sjc.off b{color:#2f8f52;} .sjc.off p{color:#5c7a68;}
.sj-tip{border-top:1px dashed #ecdcc4; padding-top:8px; margin-top:9px !important;}

.radar-wrap{display:flex; justify-content:center; margin-top:10px;}
#radar{width:100%; max-width:300px; height:auto;}
.fbars{margin-top:6px;}
.fb{display:flex; align-items:center; gap:9px; padding:7px 0;}
.fb-t{flex:0 0 96px; font-size:13px; font-weight:700; color:var(--ink); letter-spacing:-.3px;}
.fb-track{flex:1; height:9px; border-radius:999px; background:#f0f4f7; overflow:hidden;}
.fb-track i{display:block; height:100%; border-radius:999px; background:var(--accent2);}
.fb-n{flex:0 0 auto; font-size:12.5px; font-weight:800; color:var(--accent2); min-width:24px; text-align:right;}

/* ── 열두 달 지도 ──
   예전엔 6칸 × 2줄에 파란 농도 다섯 단계였다. 짙기만 다른 열두 칸이라
   어디가 좋은 달인지 눈으로 세야 했고, 9.5px 라벨은 읽히지도 않았다.
   결론(가장 좋은 달·조심할 달)을 맨 위로 올리고, 표는 3칸 × 4줄로 넓혀
   좋음·보통·조심 세 갈래로만 나눈다 */
.mm-top{display:flex; gap:10px; margin-top:14px;}
.mm-card{flex:1; min-width:0; border-radius:16px; padding:15px 12px 14px; text-align:center;}
.mm-card.good{background:var(--tint);} .mm-card.bad{background:#f8f1ec;}
.mm-k{font-size:12px; font-weight:700; letter-spacing:-.2px;}
.mm-card.good .mm-k{color:#7794c4;} .mm-card.bad .mm-k{color:#b49076;}
.mm-v{margin-top:5px; font-size:27px; font-weight:800; letter-spacing:-1px; line-height:1.1;}
.mm-card.good .mm-v{color:var(--accent);} .mm-card.bad .mm-v{color:#c2703a;}
.mm-d{margin-top:5px; font-size:12.5px; font-weight:600; color:#8b95a1; word-break:keep-all;}

.mm-note{margin:12px 0 0; background:#f6f8fa; border-radius:12px; padding:12px 14px;
  font-size:12.5px; line-height:1.7; color:#7b8894; word-break:keep-all;}
.mm-note b{color:#5c6874; font-weight:700;}

.mmap{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px;}
.mmc{border:0; border-radius:13px; padding:11px 6px 12px; font:inherit; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px; transition:.12s;
  background:#f4f6f8; color:#7c8894;}
.mmc:active{transform:scale(.96);}
.mmc .mmc-n{font-size:11px; font-weight:700; letter-spacing:-.2px; opacity:.9;}
.mmc .mmc-t{font-size:15px; font-weight:800; letter-spacing:-.5px; line-height:1.2;}
/* 좋음은 파랑, 조심은 흙빛. 가운데(보통)는 색을 빼서 양끝이 도드라지게 둔다 */
.mmc.up{background:#e7f0ff; color:#3a6fd8;}
.mmc.down{background:#f6ece4; color:#b0723f;}
.mmc.on{box-shadow:0 0 0 2.5px var(--accent2);}
.mmap-legend{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:10px;
  font-size:11.5px; font-weight:700; color:#a7b1bc;}
.mmap-legend span{display:inline-flex; align-items:center; gap:5px;}
.mmap-legend i{width:11px; height:11px; border-radius:3.5px; display:inline-block;}
.mmap-legend .l-up{background:#a9c6f6;} .mmap-legend .l-mid{background:#e2e7ec;}
.mmap-legend .l-down{background:#e2b992;}

/* 표를 다 읽고 나면 "그래서 뭘 하라고?"가 남는다 — 한 문단으로 닫아준다 */
.mm-sum{margin-top:14px; background:#f2f7ff; border-radius:14px; padding:15px 16px;
  font-size:14.5px; line-height:1.8; color:#465468; text-align:justify; word-break:normal;}
.mm-sum b{color:var(--accent); font-weight:800;}

/* 분기 넷 — 열두 칸을 계획으로 바꿔주는 자리 */
.qtr{display:flex; flex-direction:column; gap:8px; margin-top:12px;}
.qrow{display:flex; align-items:flex-start; gap:12px; background:#fff; border-radius:14px;
  padding:13px 14px; box-shadow:0 1px 6px rgba(30,60,100,.06); text-align:left;}
.qrow .q-k{flex:0 0 62px;}
.qrow .q-n{font-size:14.5px; font-weight:800; color:var(--ink); letter-spacing:-.3px;}
.qrow .q-m{display:block; margin-top:2px; font-size:11px; font-weight:600; color:#aab4bf;}
.qrow .q-b{flex:1; min-width:0; font-size:13.5px; line-height:1.7; color:#5b6673; word-break:keep-all;}
.qrow .q-s{flex:0 0 auto; font-size:12.5px; font-weight:800; color:var(--accent2);}

.mbox:empty{display:none;}
.mo{margin-top:14px; border:1.5px solid #eef2f6; border-radius:14px; padding:14px; background:#fff; text-align:left;}
.mo-head{display:flex; align-items:center; gap:10px;}
.mo-n{flex:0 0 auto; font-size:15px; font-weight:800; color:var(--accent2);}
.mo-b{flex:1; min-width:0;}
.mo-b b{display:block; font-size:16px; font-weight:800; color:var(--ink); letter-spacing:-.4px;}
.mo-b small{display:block; margin-top:2px; font-size:11.5px; font-weight:600; color:#b1bcc6;}
.mo-s{flex:0 0 auto; font-size:13px; font-weight:800; padding:6px 11px; border-radius:999px;
  background:#f4f6f8; color:#7c8894;}
/* 지도 칸과 같은 세 갈래로 칠한다 — 점수 하나에 색이 두 벌이면 기준이 둘로 보인다 */
.mo-s.lv-up{background:#e7f0ff; color:#3a6fd8;}
.mo-s.lv-down{background:#f6ece4; color:#b0723f;}
.mo-body{margin:11px 0 0; font-size:15px; line-height:1.85; color:var(--ink);}
.mo-lock{margin:11px 0 0; font-size:13px; font-weight:700; color:var(--accent2); text-align:center;}
.fh-n{font-size:12px; font-weight:800; color:var(--accent2); margin-left:4px;}

/* 무료 구간 끝에 걸어두는 한 줄 — 계산은 끝났는데 아직 안 보여준 것을 정확히 짚어준다 */
.cliff{margin:14px 0 0; padding:13px 14px; border-radius:12px; text-align:left;
  background:#f9fcff; border:1.5px dashed #d5ebff;
  font-size:14px; line-height:1.75; color:var(--sub);}
.cliff b{color:var(--accent2); font-weight:800;}
.cliff:empty{display:none;}


/* ===== 계산 중 화면 =====
   짙은 남색 한 판. 흰 카드에 게이지만 있던 시절엔 '잠깐 멈춘 화면'이었는데,
   화면을 통째로 바꿔 두면 그 자체가 하나의 장면이 된다.
   내용은 그 사람 사주에서 방금 나온 것들이라 기다림이 곧 맛보기다. */
/* 기다리는 동안은 이 화면 하나만 보인다. 상단바·탭바·알림 띠가 같이 보이면
   '잠깐 멈춘 페이지'가 되고, 다 덮으면 하나의 장면이 된다 */
body.ld-on .topbar-fixed, body.ld-on .tabbar{display:none;}
body.ld-on{padding-top:0 !important; overflow:hidden;}
/* 계산 중 화면 — 밤하늘 남색이었는데, 결과 화면이 흰 바탕이라 여기서 한 번 어두워졌다
   밝아지는 게 눈에 걸렸다. 같은 흰 바탕으로 이어 붙인다 */
.ld{position:fixed; top:0; bottom:0; left:50%; width:100%; max-width:440px; z-index:300;
  transform:translateX(calc(-50% + var(--app-shift)));
  background:#fff; color:var(--ink); overflow:auto;
  padding:calc(env(safe-area-inset-top, 0px) + 54px) 22px calc(env(safe-area-inset-bottom, 0px) + 30px);
  display:flex; flex-direction:column; justify-content:center; text-align:center;}
.ld-who{font-size:14px; font-weight:700; color:var(--accent); letter-spacing:-.3px;}
.ld-h{margin-top:12px; font-size:28px; font-weight:700; line-height:1.42;
  letter-spacing:-1px; word-break:keep-all; color:var(--ink);}
/* 맛보기 — 결론은 안 말하고 무엇이 보였는지만 흘린다. 문장이 바뀔 때
   높이가 튀지 않게 최소 높이를 잡아둔다 */
.ld-card{margin:48px 0 0; background:#f6f7f9; border-radius:16px;
  padding:18px 18px 20px; text-align:left;}
.ld-card-h{font-size:12.5px; font-weight:700; color:var(--sub); letter-spacing:-.2px;}
.ld-card-t{margin-top:8px; min-height:52px; font-size:16.5px; font-weight:600;
  line-height:1.6; letter-spacing:-.4px; color:#3f4652; word-break:keep-all;
  transition:opacity .18s;}
.ld-card-t b{font-weight:800; color:var(--ink);}
.ld-foot{margin-top:40px;}
.ld-row{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.ld-step{font-size:13px; font-weight:600; color:var(--sub); letter-spacing:-.3px;
  min-height:19px; text-align:left;}
.ld-pct{font-size:19px; font-weight:800; color:var(--ink); letter-spacing:-.6px; font-variant-numeric:tabular-nums;}
.ld-bar{height:7px; border-radius:999px; background:#eceef1; overflow:hidden; margin-top:9px;}
.ld-bar i{display:block; height:100%; width:0; border-radius:999px;
  background:var(--accent); transition:width .18s linear;}
/* 다 차면 스스로 넘어가지 않고 버튼을 띄운다 — 여는 건 본인이 하게 */
.ld.done .ld-foot{display:none;}
.ld-go{margin-top:26px; opacity:0;}
@keyframes ldPop{
  0%{opacity:0; transform:translateY(16px) scale(.92);}
  60%{opacity:1; transform:translateY(0) scale(1.045);}
  100%{opacity:1; transform:none;}
}
.ld-go.in{opacity:1; animation:ldPop .46s cubic-bezier(.2,.9,.3,1.2) both;}
.ld-go.hidden{display:none;}
.ld-bub{display:table; margin:0 auto 10px; position:relative;
  background:var(--tint); color:var(--accent2); font-size:13px; font-weight:800;
  padding:8px 14px; border-radius:999px; letter-spacing:-.3px;}
.ld-bub::after{content:""; position:absolute; left:50%; bottom:-5px; width:10px; height:10px;
  margin-left:-5px; background:var(--tint); transform:rotate(45deg);}
.ld-btn{margin-top:0;}
@media (prefers-reduced-motion: reduce){ .ld-go, .ld-go.in{opacity:1; animation:none; transform:none;} }

/* 괘 제목 — 한자 원문 + 독음 */
.gwe-title{text-align:center; margin:16px 0 4px;}
.gwe-title b{display:block; font-family:var(--hanja); font-size:22px; font-weight:700;
  letter-spacing:1.5px; color:var(--ink); line-height:1.25;}
.gwe-title span{display:block; margin-top:1px; font-size:13px; font-weight:600;
  color:var(--sub); letter-spacing:.2px; line-height:1.25;}

/* 궁합 — 두 사람 만세력을 나란히 */
/* 두 사람의 만세력 — 예전엔 여백만 있어서 어디까지가 누구 것인지,
   아래 설명이 누구 얘긴지 경계가 흐렸다. 사람마다 카드로 묶는다. */
.gh-manse{margin-top:16px; padding:14px 13px 15px; border-radius:16px;
  background:#f9fbfd; border:1.5px solid #ecf2f7;}
.gh-manse + .gh-manse{margin-top:12px;}
.gh-manse + .gh-manse{margin-top:16px;}
.gh-who{font-size:14.5px; font-weight:800; color:var(--ink); letter-spacing:-.3px; margin-bottom:8px; text-align:left;}
.gh-who small{font-weight:600; color:var(--sub); margin-left:5px; letter-spacing:0;}

/* 짧은 글(제목·라벨·안내)은 어절을 안 쪼갠다.
   두세 줄짜리에서 낱말이 잘리면("…탑에 새 / 겨지니") 어색하고, 짧아서 줄 끝도 많이 안 빈다. */
.hanja .ht, .hanja .ht p, .subtitle, .saju-note, .sec-note, .grid-help, .lc-help,
.lm-d, .lm-tease, .sjc p, .toc-t{ word-break:keep-all; }

/* ── 긴 본문은 책처럼 양쪽을 맞춘다 ──
   예전엔 본문에도 keep-all을 걸었는데, 어절을 통째로 넘기다 보니 줄 끝이 최대 75px
   (본문 폭의 22%) 비어서 아무 데나 엔터를 친 것처럼 보였다.
   한글은 음절에서 끊어도 읽히므로 normal로 두면 줄이 꽉 차고(줄 수 106→101),
   양쪽 정렬을 걸어도 공백이 거의 안 늘어난다(공백 늘어남 평균 0.2px, 최대 1.6px).
   keep-all인 채로 양쪽 정렬만 걸면 공백이 최대 11.3px씩 벌어져 오히려 더 나쁘다. */
/* 문단에만 건다. .saju-body에 걸면 꼭지 제목(summary)까지 상속돼 제목이 늘어난다 */
.saju-body p, .saju-body .sec-b p,
.hstory, .cliff, .dc-b, .dc-adv, .mo-body, .yc-line, .dayc .dc-b{
  text-align:justify;
  word-break:normal;
  overflow-wrap:anywhere;        /* 긴 영문·URL이 상자를 뚫고 나가지 않게 */
}
/* 제목은 짧으니 어절을 지킨다 */
.saju-body .saju-h{ word-break:keep-all; }

/* 다른 장을 보다가 지금으로 돌아오는 길 */
.btn-back-now{display:block; margin:14px auto 0; padding:10px 16px; border-radius:999px;
  border:1.5px solid #dcefff; background:#f9fcff; font:inherit; font-size:13px; font-weight:700;
  color:var(--accent2); cursor:pointer;}
.btn-back-now:active{transform:scale(.97);}
/* .hidden보다 뒤에 오는 규칙이라, 숨김을 여기서 다시 지정해야 먹는다 */
.btn-back-now.hidden{display:none;}

/* ===== 복을 쓰기 전 확인 창 ===== */
.spend-back{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(20,16,32,.42); backdrop-filter:blur(3px);}
.spend{width:100%; max-width:330px; background:#fff; border-radius:20px; padding:26px 20px 20px;
  text-align:center; box-shadow:0 18px 50px rgba(0,0,0,.22);}
/* 자물쇠는 연한 원 안에 담는다 — 이모지만 크게 두면 장식처럼 뜬다 */
.sp-ic{width:52px; height:52px; margin:0 auto; border-radius:50%; background:#eef5ff;
  display:flex; align-items:center; justify-content:center; font-size:24px; line-height:1;}
.sp-t{margin-top:14px; font-size:19px; font-weight:800; color:var(--ink);
  letter-spacing:-.5px; line-height:1.45; word-break:keep-all;}
.sp-d{margin-top:9px; font-size:14px; line-height:1.6; color:var(--sub); word-break:keep-all;}
.sp-d b{color:var(--accent); font-weight:800;}
/* 버튼은 하나만 크게. 누를 것이 둘이면 어느 쪽도 안 눌린다 */
.spend .btn{margin-top:18px; padding:15px 0; font-size:16px; text-decoration:none;
  display:flex; align-items:center; justify-content:center; box-sizing:border-box;
  line-height:1.25;}   /* a 와 button 의 기본 행간이 달라 높이가 어긋난다 */
.sp-note{margin-top:10px; font-size:12.5px; color:#a3adb8;}
/* 물러나는 길은 있되 크지 않게 — 버튼으로 두면 거절이 절반의 무게를 갖는다 */
.sp-later{display:block; width:100%; margin-top:6px; padding:10px 0; border:0;
  background:none; font-size:14.5px; font-weight:600; color:var(--sub); cursor:pointer;}
.sp-later:active{color:var(--ink);}

/* ===== 아무것도 없을 때 (보관함·복 내역 등) =====
   처음엔 이름을 .empty로 뒀는데, 택일 달력의 빈 칸(.cal-cell.empty)까지 잡아서
   위아래 50px 여백이 붙었다. 그 높이를 aspect-ratio가 폭으로 역산하는 바람에
   한 칸이 89px이 되고 달력이 화면 밖으로 잘려 나갔다.
   흔한 이름은 이렇게 부딪히므로 -state를 붙여 구분한다. */
.empty-state{text-align:center; color:var(--sub); padding:50px 0;}
.empty-state .e-emoji{font-size:52px; line-height:1;}
.empty-state p{margin-top:10px; line-height:1.8;}
.empty-state a{color:var(--accent); font-weight:700;}

/* 섹션 하나에 한 번만 두는 조언 (목적별로 문장이 하나뿐이라 카드마다 붙이면 반복돼 보인다) */
.sec-tip{margin:-2px 0 14px; padding:12px 14px; border-radius:12px;
  background:#f4fbf6; border:1px solid #dcefe3; color:#3f6b52;
  font-size:13.5px; line-height:1.75; word-break:keep-all;}
.sec-tip.warn{background:#fff7f4; border-color:#f4ddd4; color:#8a5142;}

/* 날짜를 눌렀을 때 잠겨 있어도 보여주는 한 줄 (무슨 날인지는 알고 넘어가게) */
.dc-one{margin:10px 0 2px; text-align:center; font-size:15px; color:var(--accent2);}

/* 결과 화면의 목적 바꾸기 줄 — 결과의 일부가 아니라 조작이라는 걸 알린다 */
.switch-label{margin:14px 0 8px; text-align:center; font-size:12.5px; font-weight:700; color:#9babbd;}
.chip .chip-open{margin-left:5px; padding:1px 5px; border-radius:5px; font-size:10px;
  font-weight:800; background:#e8f6ec; color:#2f8f52; vertical-align:1px;}
.chip.on .chip-open{background:rgba(255,255,255,.28); color:#fff;}

/* 달력에서 이미 지나간 날 — 택일 대상이 아니라 누를 수 없다.
   등급 색은 옅게 남겨 그 달의 흐름은 그대로 읽히게 한다 */
.cal-cell.past{opacity:.38; cursor:default; filter:saturate(.5);}
.cal-cell.past:active{transform:none;}

/* '석 달'이 언제부터인지 밝히는 줄 */
.range-note{margin:-6px 0 12px; text-align:center; font-size:13px; line-height:1.65;
  color:var(--sub); word-break:keep-all;}

/* 주말 표시 — 결혼·이사·개업은 요일이 결정적이라 한눈에 보이게 */
.dc-wk{display:inline-block; margin-left:6px; padding:2px 7px; border-radius:6px;
  background:#fff3e0; color:#b26a12; font-size:11px; font-weight:800; vertical-align:2px;}

/* 섹션 사이를 눈으로 끊어준다 — 제목만 키우면 여전히 한 덩어리로 읽힌다 */
.saju-body .saju-h.big::before{content:""; display:block; height:1px; margin:0 0 24px;
  background:linear-gradient(90deg, transparent, #e4ebf2 20%, #e4ebf2 80%, transparent);}
.saju-body .saju-h.big:first-child::before{display:none;}

/* 날짜 카드 — '자리를 정하는 날'이 제목이고 날짜는 그 아래.
   택일에서는 '며칠'보다 '어떤 날인지'가 먼저 읽혀야 한다. */
.dc-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.dc-headL{min-width:0;}
.dayc .dc-one{margin:0 0 4px; font-size:17px; font-weight:800; color:var(--accent2);
  letter-spacing:-.4px; text-align:left; line-height:1.35;}
/* 점수는 제목 옆에 크게 — 같은 대길끼리 뭐가 다른지 보여주는 유일한 근거다 */
.dc-score{margin-left:6px; font-size:16px; font-weight:800; color:var(--sub);
  letter-spacing:-.3px; white-space:nowrap;}
/* 목록에도 점수 — 같은 대길끼리 뭐가 다른지 보여주는 유일한 근거 */
.lm-row.yr .lm-score{flex:0 0 auto; align-self:center; font-size:13px; font-weight:800;
  color:var(--accent2);}

/* 입력 화면 — 마지막 칸과 버튼 사이, 버튼과 안내문 사이를 벌린다 */
.field:last-of-type{margin-bottom:28px;}
#s-input .btn{margin-top:4px;}
#s-input .mini{margin-top:14px;}

/* 좋은 날 목록과 '피할 날' 사이를 띄운다 (소제목을 없앤 자리) */
.lm-row.lm-gap{margin-top:20px;}

/* '되도록 피할 날' — 좋은 날 목록과 같은 회색이면 같은 성격으로 읽힌다.
   붉은 계열로 두어 성격이 반대라는 걸 색으로 먼저 알린다 */
.lm-row.lm-gap{background:#fff8f6; border-color:#f4ddd4;}
.lm-row.lm-gap:active{background:#ffefe9;}
.lm-row.lm-gap .lm-t{color:#8a5142;}
.lm-row.lm-gap .lm-tease{color:#c09184;}

/* 궁합 점수의 근거 — 숫자만 던지면 어디서 나온 값인지 알 수 없다 */
.gh-basis{display:flex; justify-content:center; flex-wrap:wrap; gap:7px; margin:38px 0 0;}
.gh-basis span{padding:5px 10px; border-radius:8px; background:#f5faff;
  font-size:12px; font-weight:600; color:var(--sub);}
.gh-basis b{color:var(--accent2); font-weight:800;}

/* 사주 원리 — 왜 그런 결론이 나왔는지. 용어를 풀고 실제로 센 값을 댄다.
   지어낸 말이 아니라는 걸 그 자리에서 보여주는 게 이 서비스의 핵심이다. */
/* 12.5px일 땐 글자수로 33%를 차지하면서 화면에선 29%밖에 안 잡혀서,
   공들여 쓴 근거가 곁다리처럼 보였다. 14px이면 글자수 비중과 높이 비중이 맞는다.
   본문(16px)보다는 작게 둬서 '딸린 설명'이라는 위계는 지킨다. */
/* 말풍선처럼 통통하게 — 모서리를 크게 굴리고 안쪽 여백을 넉넉히 준다 */
.saju-why{position:relative; margin:20px 0 0; padding:44px 21px 42px; border-radius:24px;
  background:linear-gradient(180deg,#f3f9fe,#edf4fc); font-size:16px; line-height:1.85; color:#586672;}
/* 큰 따옴표를 왼쪽 위·오른쪽 아래로 나눠 따온 말을 감싼다.
   왼쪽 세로선과 같이 쓰면 인용 표시가 둘이라 겹말이 되므로 선은 뺐다 */
.saju-why::before, .saju-why::after{content:"\201C"; position:absolute;
  font-family:Georgia,"Times New Roman",serif; font-size:44px; line-height:1; color:#b7d5f1;}
.saju-why::before{top:15px; left:21px;}
/* 닫는 쪽은 여는 글리프를 그대로 180도 돌려 쓴다.
   여는 따옴표(“)와 닫는 따옴표(”)를 따로 쓰면 글자마다 속 여백이 달라
   위아래·좌우 간격이 어긋난다 — 같은 글자를 뒤집으면 정확히 대칭이 된다 */
.saju-why::after{bottom:15px; right:21px; transform:rotate(180deg);}
.saju-why .wy-h{display:block; margin-bottom:9px; font-size:14.5px; font-weight:800;
  color:var(--accent2); letter-spacing:-.2px; text-align:left;}
.saju-list{margin:4px 0 0; font-size:14px; color:var(--sub);}

/* 다른 풀이로 건너가는 안내 — 여기서 다 못 보여준 걸 어디서 볼 수 있는지.
   앱 전체가 보라라서 보라로 두면 그냥 또 하나의 카드로 묻힌다.
   '여길 누르면 딴 데로 간다'는 건 파랑이 관습이라 그쪽으로 뺐다. */
.saju-more{display:flex; align-items:center; gap:10px; margin:12px 0 0;
  padding:13px 15px; border-radius:12px; text-decoration:none;
  background:#eff4fb; border:1.5px solid #d7e4f5;}
.saju-more span{flex:1; font-size:13.5px; line-height:1.6; color:#4c5a70; word-break:keep-all;}
.saju-more b{flex:0 0 auto; font-size:12.5px; font-weight:800; color:#3b6bb5; white-space:nowrap;}
.saju-more:active{background:#e3ecf8;}

/* ===== 꼭지 접기 =====
   사주 풀이가 13꼭지라 다 펼치면 스크롤만 길어진다.
   제목만 훑고 궁금한 것만 펴 보게 한다. */
.saju-body .sec{border:1.5px solid #eef2f6; border-radius:14px; background:#fff;
  margin:11px 0; overflow:hidden;}
.saju-body .sec summary{list-style:none; cursor:pointer; padding:13px 38px 13px 14px;
  position:relative; font-size:15.5px; font-weight:700; color:var(--ink);
  line-height:1.5; letter-spacing:-.3px; word-break:keep-all;}
.saju-body .sec summary::-webkit-details-marker{display:none;}
.saju-body .sec summary::after{content:""; position:absolute; right:17px; top:50%;
  width:8px; height:8px; margin-top:-6px; border-right:2px solid #c1ceda;
  border-bottom:2px solid #c1ceda; transform:rotate(45deg); transition:.18s;}
.saju-body .sec[open] summary::after{transform:rotate(-135deg); margin-top:-2px;}
.saju-body .sec[open] summary{color:var(--accent2); border-bottom:1px solid #f2f5f8;}
.saju-body .sec summary:active{background:#f9fcff;}
.saju-body .sec-b{padding:12px 14px 14px;}
.saju-body .sec-b p{margin:0 0 10px;} .saju-body .sec-b p:last-child{margin-bottom:0;}

/* 잠긴 꼭지 목록 — 무엇이 들어있는지 제목을 다 보여준다.
   본문을 잘라 흐리게 두면 두 꼭지밖에 안 보여서 뭘 사는지 알 수가 없다. */
/* .sec에 margin이 있어서 flex gap 위에 얹혀 간격이 두 배가 됐다. 목록 안에서는 margin을 뺀다 */
.lockmenu-body{display:flex; flex-direction:column; gap:11px;}
.lockmenu-body .sec{margin:0;}
/* 목차식에서는 CTA를 끌어올리지 않는다.
   -70px은 본문이 흐려지며 사라지는 블러식에 맞춘 값이라,
   카드가 또렷하게 늘어선 목차식에서는 마지막 줄을 덮어버렸다. */
/* 18px이면 마지막 줄에 붙어 목록의 19번째 칸처럼 보였다.
   값을 묻는 자리는 떨어져 있어야 '다 봤고, 이제 결정'으로 읽힌다 */
.lockmenu-body + .lock-cta,
.lockmenu + .lock-cta{margin-top:56px; padding-top:0; background:none;}
/* 목록을 다 지나온 자리라 "방금 그 N가지"로 되짚어준다.
   한때 숨겨뒀는데, 그러면 값이 버튼 아래 작은 글씨에만 남아 눈에 안 걸렸다 */
.lockmenu-body + .lock-cta .lk-d,
.lockmenu + .lock-cta .lk-d{margin:6px 4px 16px;}
/* 잠긴 줄 — 읽을 수는 있게 두되 '아직 내 것이 아니다'가 보여야 한다.
   예전엔 열린 꼭지와 생김새가 똑같아서, 눌러도 안 펴지는 이유를 알 수가 없었다.
   글자를 흐리면 무엇을 사는지 못 읽으니 테두리·바탕으로 상태를 말하고 글자는 살려둔다. */
.saju-body .sec.locked-row{display:flex; align-items:center; gap:10px; width:100%;
  text-align:left; padding:12px 15px; position:relative;
  border:1.5px dashed #dee7ef; border-radius:14px; background:#f5f8fb;
  font:inherit; font-size:15px; font-weight:700; color:#868f99;   /* 대비 3.2 — 흐리되 읽힌다 */
  line-height:1.5; letter-spacing:-.3px; cursor:pointer; word-break:keep-all;}
.saju-body .sec.locked-row:active{background:#e9f1fa; transform:scale(.995);}
/* 이모지 대신 번호. 셀 수 있어야 "18가지"가 말이 아니라 사실로 읽힌다 */
.saju-body .sec.locked-row .lr-n{flex:none; width:22px; text-align:center;
  font-style:normal; font-size:12.5px; font-weight:800; color:#a8b3bf;
  font-variant-numeric:tabular-nums;}

/* 복을 쓴 직후 — 목록이 실제 글로 바뀌는 순간이 눈에 보여야 990원이 안 아깝다 */
@keyframes secReveal{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }
.saju-body .sec.just-opened{ animation:secReveal .42s cubic-bezier(.22,.9,.3,1) both; }
@media (prefers-reduced-motion:reduce){ .saju-body .sec.just-opened{ animation:none; } }

/* 무료와 유료가 갈리는 경계 — 자물쇠는 여기 한 번만 둔다 */
/* 꼭지 여닫기 손잡이 — 18꼭지를 하나씩 누르게 두면 끝까지 안 읽는다.
   .hidden 이 뒤에 오지 않으므로 조합 선택자로 눌러둔다 (예전에 버튼이 안 숨던 적 있음) */
.fold-bar{display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin:0 0 8px;}
.fold-bar.hidden{display:none;}
.fold-bar .fb-n{font-size:12.5px; font-weight:700; color:var(--sub); letter-spacing:-.2px;}
.fold-bar .fb-btn{flex:0 0 auto; padding:7px 13px; border-radius:999px;
  border:1.5px solid #e0e3e8; background:#fff; color:var(--ink);
  font-size:12.5px; font-weight:800; letter-spacing:-.2px; cursor:pointer;
  font-family:inherit; transition:background .15s;}
.fold-bar .fb-btn:active{background:#f1f6fb;}

/* 가로줄 사이에 끼운 12.5px 한 줄은 구분선처럼 읽혀 그냥 지나쳤다.
   여기가 무료와 유료가 갈리는 자리라, 멈춰 세울 만큼은 커야 한다 */
/* 잠긴 목록은 flex(gap 11px)라 아래 여백은 gap과 다음 제목 margin이 만든다 */
/* 무료 꼭지 바로 밑에 붙어 있으면 목록의 다음 줄처럼 읽힌다.
   무료와 유료가 갈리는 자리라 위에 숨 쉴 자리가 있어야 한다 (여백 36 → 56) */
.lock-line{margin:66px 0 16px; text-align:center;}
.lock-line .ll-t{font-size:19px; font-weight:700; color:var(--ink);
  letter-spacing:-.5px; line-height:1.4;}
.lock-line .ll-t b{display:inline-block; font-size:23px; font-weight:800;
  color:var(--accent); letter-spacing:-.7px;}
.lock-line .ll-d{margin-top:8px; font-size:13.5px; color:var(--sub); word-break:keep-all;}
.lock-line .ll-d b{color:var(--ink); font-weight:800;}

/* ── 궁합 오각형 ──
   예전엔 "기준 71점에서 +12, -4" 식으로 보여줬는데, 71이 왜 71인지 알 수 없고
   가감 폭도 우리가 정한 값이라 계산식을 그대로 노출하는 꼴이었다.
   모양으로 보여주면 어디가 강하고 어디가 약한지 한눈에 들어온다. */
.rd-wrap{display:flex; justify-content:center; margin:2px 0 6px;}
.rd-svg{width:100%; max-width:300px; height:auto;}
.rd-grid{fill:none; stroke:#e5ecf3; stroke-width:1;}
.rd-spoke{stroke:#e8eff5; stroke-width:1;}
.rd-area{fill:rgba(78,175,255,.18); stroke:var(--accent); stroke-width:2; stroke-linejoin:round;}
.rd-dot{fill:#fff; stroke:var(--accent); stroke-width:2;}
.rd-lb{font-size:13px; font-weight:800; fill:var(--ink); font-family:inherit; letter-spacing:-.3px;}

.rd-legend{display:flex; flex-direction:column; gap:18px; margin:10px 0 14px;}
.rd-row{display:grid; grid-template-columns:52px 1fr 30px; align-items:center; column-gap:9px; row-gap:4px;}
.rd-row b{font-size:13.5px; font-weight:700; color:var(--ink); letter-spacing:-.3px;}
.rd-bar{height:10px; border-radius:999px; background:#eef0f4; overflow:hidden;}
.rd-bar i{display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,#a9d7ff,var(--accent));}
/* 다섯 줄이 다 같은 보라면 82와 18이 길이로만 갈린다. 색으로도 갈라 한눈에 읽히게 한다.
   높은 쪽은 연표의 "가까워지는 해"와, 낮은 쪽은 "흔들리는 해"와 같은 색을 쓴다 */
.rd-row.lv-hi .rd-bar i{background:linear-gradient(90deg,#86c8ff,var(--accent));}
.rd-row.lv-mid .rd-bar i{background:linear-gradient(90deg,#8fb4e0,#5f8fc7);}
.rd-row.lv-lo .rd-bar i{background:linear-gradient(90deg,#f0a596,#e0574e);}
.rd-row em{font-size:14px; font-weight:800; font-style:normal; color:var(--accent); text-align:right;}
.rd-row.lv-mid em{color:#4f80ba;}
.rd-row.lv-lo em{color:#d0453a;}
/* 2열부터 걸면 왼쪽 라벨(마음·생활…) 폭만큼 오른쪽으로 밀린 자리가 가운데가 된다.
   위 오각형은 줄 전체 기준으로 가운데라 둘이 어긋나 보였다 */
.rd-row small{grid-column:1 / 4; font-size:12px; color:var(--sub); line-height:1.45;
  word-break:keep-all; text-align:center;}

/* 관계 배지 — 이 풀이 전체의 전제라 작은 요약 칩에 섞이면 안 된다.
   "연인·부부 기준"이 다른 칩과 같은 크기로 묻혀 있었다. */
.gh-kind{display:inline-flex; align-items:center; gap:7px; margin:12px auto 0;
  padding:8px 16px 8px 12px; border-radius:999px;
  background:linear-gradient(135deg,var(--tint),#e3f2ff); border:1.5px solid #d3eaff;}
.gh-kind .ghk-e{font-size:17px; line-height:1;}
.gh-kind .ghk-t{font-size:15.5px; font-weight:800; color:var(--accent); letter-spacing:-.4px;}
.gh-kind .ghk-s{font-size:12.5px; font-weight:600; color:#8195a8; letter-spacing:-.2px;}

/* ── 두 사람 오행 비교 ── 서로 채워준다는 말의 근거를 눈에 보이게 */
.oh2{display:flex; flex-direction:column; gap:9px; margin:2px 0 6px;}
/* 줄마다 각각 grid라 auto 칸을 쓰면 태그가 있는 줄만 트랙이 좁아진다.
   실제로 "채워줌"이 붙은 줄만 27px 짧아져서 막대가 어긋났다. 폭을 고정해 자리를 늘 비워둔다 */
.oh2-row{display:grid; grid-template-columns:1fr 34px 1fr; align-items:center; gap:7px;}
.oh2-a,.oh2-b{position:relative; height:20px; border-radius:6px; background:#f2f3f6; display:flex; align-items:center;}
.oh2-a{flex-direction:row-reverse;}
.oh2-a i,.oh2-b i{position:absolute; top:0; bottom:0; border-radius:6px; min-width:3px;}
/* 0이면 막대를 아예 그리지 않는다. 3px 조각이 남으면 눈금처럼 보인다 */
.oh2-a.zero-side i,.oh2-b.zero-side i{display:none;}
.oh2-a i{right:0;} .oh2-b i{left:0;}
.oh2-a em,.oh2-b em{position:relative; font-style:normal; font-size:11.5px; font-weight:800;
  color:#5b6270; padding:0 6px;}
.oh2-k{text-align:center; font-size:13px; font-weight:800; letter-spacing:-.3px;}
/* 태그는 0인 칸(채워지는 쪽) 안에. 줄 아래 캡션으로 두니 어느 줄 얘긴지 모호했다.
   숫자는 늘 가운데(오행 글자) 쪽 끝에 붙으므로 태그는 바깥쪽 끝에 둔다 —
   왼쪽 칸은 row-reverse라 숫자가 오른쪽에 와서, 태그도 right로 두면 정면으로 겹쳤다 */
.oh2-tag{position:absolute; top:50%; transform:translateY(-50%);
  font-size:10px; font-weight:800; font-style:normal; text-decoration:none;
  color:var(--accent); letter-spacing:-.2px; white-space:nowrap;}
.oh2-a .oh2-tag{left:8px;}
.oh2-b .oh2-tag{right:8px;}
.oh2-row.fill .oh2-a,.oh2-row.fill .oh2-b{background:var(--tint);}
/* 발밑 이름도 위 트랙과 같은 격자에 올린다 */
.oh2-foot{display:grid; grid-template-columns:1fr 34px 1fr; gap:7px; margin-top:3px;}
.oh2-foot b:first-child{text-align:left;}
.oh2-foot b:last-child{grid-column:3; text-align:right;}
.oh2-foot b{font-size:11.5px; font-weight:700; color:var(--sub);}
/* 0인 쪽은 막대가 없어 빈칸으로 보인다. 빗금으로 "없음"을 드러낸다.
   .oh2-row.fill 과 우선순위가 같아서 반드시 뒤에 와야 이긴다 */
.oh2-row .zero-side, .oh2-row.fill .zero-side{background:repeating-linear-gradient(45deg,#eceef2,#eceef2 4px,#e2e5eb 4px,#e2e5eb 8px);}

/* ── 엮인 글자 ── "합과 충으로 냈어요"라고만 하면 못 믿는다. 짝을 그대로 보여준다 */
.lk-list{display:flex; flex-direction:column; gap:8px; margin:2px 0 6px;}
.lk-row{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px;
  padding:9px 11px; border-radius:12px; border:1.5px solid #e9eff6; background:#fafdff;}
.lk-row.bad{border-color:#f6e3e0; background:#fdf7f6;}
.lk-c{display:flex; flex-direction:column; align-items:center; gap:1px;}
.lk-c b{font-family:var(--hanja); font-size:21px; font-weight:600; color:var(--ink); line-height:1.1;}
/* 한자만 두면 못 읽는 사람이 많다 — 독음을 바로 밑에 */
.lk-c i{font-size:12px; font-style:normal; font-weight:700; color:var(--ink); line-height:1.2;}
.lk-c small{font-size:11.5px; color:var(--sub); white-space:nowrap;}
/* 충·육합이 무슨 뜻인지 줄마다 적는다. 근거를 보여주는 자리인데 암호면 소용이 없다 */
.lk-note{grid-column:1 / 4; margin:8px 2px 0; padding-top:8px; border-top:1px solid rgba(0,0,0,.06);
  font-size:12.5px; line-height:1.55; color:var(--sub); text-align:center; word-break:keep-all;}
/* 원진·충·육합·삼합은 이 줄에서 가장 중요한 글자다. 11.5px이라 한자보다 작아 묻혔다 */
.lk-rel{font-size:14.5px; font-weight:800; padding:5px 14px; border-radius:999px;
  background:#dbebfa; color:var(--accent); white-space:nowrap; letter-spacing:-.3px;}
.lk-row.bad .lk-rel{background:#f8d9d4; color:#c03a2f;}

/* ── 100쌍 중 몇 번째 ── 무작위 5만 쌍 실측 분포 위에 내 자리를 찍는다 */
.pct-wrap{margin:4px 0 6px;}
/* 오른쪽으로 갈수록 잘 맞는 쪽. 잘 맞을수록 막대가 길게 차오른다 —
   90번째면 왼쪽에 조금만 찬다. 예전엔 띠 전체가 늘 같은 색이라 차오르는 게 없었다 */
.pct-bar{position:relative; height:14px; border-radius:999px; margin:16px 0 8px;
  background:#eceef3;}
.pct-bar i{display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,#d6eafb,#94c9f6 60%,var(--accent));}
.pct-pin{position:absolute; top:50%; transform:translate(-50%,-50%);
  width:30px; height:30px; border-radius:999px; background:#fff;
  border:2.5px solid var(--accent); display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(78,175,255,.28);}
.pct-pin b{font-size:12px; font-weight:800; color:var(--accent); letter-spacing:-.5px;}
.pct-scale{display:flex; justify-content:space-between; font-size:10.5px; color:var(--sub);}

/* ── 앞으로 5년 ── 그 해 지지가 두 사람의 일지를 건드리는지.
   막대 높낮이는 축을 읽어야 뜻이 통해서 늘 범례가 따라다녔다. 위에서 아래로
   내려가는 연표로 두면 한 줄이 곧 한 해라 설명 없이 읽힌다 */
.yt{margin:8px 0 6px;}
.yt-row{display:grid; grid-template-columns:52px 16px 1fr; gap:0; align-items:stretch;}
.yt-when{padding:2px 6px 0 0; text-align:right;}
.yt-when b{display:block; font-size:14px; font-weight:800; color:var(--ink); letter-spacing:-.4px;}
.yt-when span{display:block; font-size:10.5px; color:var(--sub); margin-top:1px;}
/* 세로 척추 — 해와 해가 이어져 흐른다는 게 보여야 연표가 된다 */
.yt-line{position:relative; display:flex; justify-content:center;}
.yt-line::before{content:""; position:absolute; top:0; bottom:0; width:2px; background:#e5e7ee;}
.yt-row:first-child .yt-line::before{top:9px;}
.yt-row:last-child .yt-line::before{bottom:auto; height:9px;}
.yt-line i{position:absolute; top:4px; width:11px; height:11px; border-radius:50%;
  background:#c9ccd6; box-shadow:0 0 0 3px #fff;}
/* 해와 해가 붙어 있으면 어디까지가 한 해인지 눈이 못 끊는다 */
.yt-body{padding:0 0 26px 10px; min-width:0;}
.yt-h{font-size:13.5px; font-weight:800; color:var(--ink); letter-spacing:-.3px;}
.yt-h em{display:inline-block; margin-left:5px; padding:1px 6px; border-radius:20px;
  background:var(--accent); color:#fff; font-size:9.5px; font-weight:800; font-style:normal;
  vertical-align:1px;}
.yt-why{margin:3px 0 5px; font-size:12.5px; line-height:1.6; color:var(--sub);
  word-break:keep-all;}
.yt-who{display:flex; flex-wrap:wrap; gap:5px;}
.yt-who span{font-size:12.5px; color:var(--sub); background:#f4f5f8; border-radius:20px;
  padding:3px 10px; font-weight:600;}
.yt-r{font-weight:800; margin-left:3px; font-size:13.5px;}
.yt-r.r-육합,.yt-r.r-삼합{color:var(--accent);}
.yt-r.r-충,.yt-r.r-원진{color:#d0453a;}
.yt-r.r-같음{color:#2f8f6b;}
.yt-r.r-무관{color:#8d93a3;}
/* 좋은 해는 점이 진하고 크게, 흔들리는 해는 붉게 — 색이 곧 뜻 */
.yt-row.up2 .yt-line i{background:var(--accent); width:14px; height:14px; top:3px;}
.yt-row.up1 .yt-line i{background:#97caf5;}
.yt-row.dn1 .yt-line i{background:#efa294;}
.yt-row.dn2 .yt-line i{background:#e0574e; width:14px; height:14px; top:3px;}
.yt-row.best .yt-body{background:#f3f9ff; border-radius:10px; padding:9px 11px 11px;
  margin:-5px 0 22px 8px; box-shadow:inset 0 0 0 1.5px #d2e7fb;}
.yt-row.best .yt-h{color:var(--accent);}

/* ── 서로를 보는 눈 ── 비대칭이라 화살표가 각각 다른 이름을 단다 */
.sipd{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; margin:6px 0 2px;}
.sipd-p{flex:0 0 auto; padding:11px 8px; min-width:62px; text-align:center;
  border-radius:14px; background:#f1f7fd; border:1.5px solid #e0ecf7;}
.sipd-p b{font-size:14px; font-weight:800; color:var(--ink); letter-spacing:-.3px;}
.sipd-mid{display:flex; flex-direction:column; gap:9px;}
.sipd-arw{position:relative; height:26px; display:flex; align-items:center; justify-content:center;}
.sipd-arw::before{content:""; position:absolute; left:0; right:0; top:50%; height:2px;
  background:linear-gradient(90deg,#d6e7f6,#b3d3f0);}
.sipd-arw.r::after{content:"▶"; position:absolute; right:-2px; top:50%; transform:translateY(-50%);
  font-size:9px; color:#a2c9ec;}
.sipd-arw.l::after{content:"◀"; position:absolute; left:-2px; top:50%; transform:translateY(-50%);
  font-size:9px; color:#a2c9ec;}
.sipd-arw span{position:relative; background:#fff; padding:2px 10px; border-radius:999px;
  font-size:12px; font-weight:800; color:var(--accent); border:1.5px solid #e0ecf7;}

/* 오행 그래프 해석 — 그래프만 던져놓으면 "그래서 뭐?"가 된다 */
.oh2-read{margin:12px 0 4px; padding:13px 14px; border-radius:12px;
  background:#f6f9fb; border-left:3px solid #d6e5f3;}
.oh2-read p{margin:0 0 8px; font-size:14px; line-height:1.8; color:#586672;
  text-align:justify; word-break:normal;}
.oh2-read p:last-child{margin-bottom:0;}
/* 배경이 깔린 박스는 그 자체로 경계라, 뒤에 제목 여백까지 다 주면 한 칸이 비어 보인다.
   그림·표 뒤에 바로 오는 제목은 조금 당긴다 */
.oh2-read + .w-sec-t, .oh2 + .w-sec-t{margin-top:48px;}

/* 5년 그래프 범례 — 위아래로 솟은 게 뭔지 알려주는 말이 없었다 */

/* 결과 머리말 — 정보 덩어리마다 숨 쉴 자리를 준다 */
#gung-body{margin-top:34px;}
#gung-body p{margin:0 0 16px;}
.lock-cta .lk-t{margin-top:6px;}
.lock-cta .lk-sub{margin-top:8px;}
.lock-cta .lk-d{margin-top:20px;}

.lk-menu{margin-top:18px;}

/* 용어와 세는 법을 풀어주는 안내 상자 — 사주 쪽 "이 말이 나온 자리"와 같은 결.
   표와 목록만 던져놓으면 한자 여덟 자가 뭔지 알 수가 없다 */
.gh-note{margin:0 0 16px; padding:14px 15px; border-radius:12px;
  background:#f4faff; border:1px solid #e0edf8;}
.gh-note .gn-h{display:block; margin-bottom:8px; font-size:13.5px; font-weight:800;
  color:var(--accent); letter-spacing:-.3px;}
.gh-note p{margin:0 0 8px; font-size:13.5px; line-height:1.75; color:#586672;
  word-break:keep-all;}
.gh-note p:last-child{margin-bottom:0;}
.gh-note b{color:var(--ink); font-weight:800;}
/* 자리 이름 한 줄은 표처럼 읽히게 살짝 떼어 둔다 */
.gh-note .gn-t{margin-top:10px; padding-top:9px; border-top:1px solid #e0edf8;
  font-size:12.5px; color:#728290; text-align:center;}

/* ── 신살 다섯 판 ── 오행 비교와 같은 격자를 쓴다. 같은 모양이면 읽는 법을 또 배울 필요가 없다 */
.dl{margin:8px 0 4px;}
.dl-row{display:grid; grid-template-columns:1fr 96px 1fr; align-items:center; gap:7px;
  margin-bottom:9px; padding-bottom:9px; border-bottom:1px solid #eef3f7;}
.dl-row:last-of-type{border-bottom:0; margin-bottom:4px;}
.dl-a,.dl-b{position:relative; height:20px; border-radius:6px; background:#f2f3f6;
  display:flex; align-items:center;}
.dl-a{flex-direction:row-reverse;}
.dl-a i,.dl-b i{position:absolute; top:0; bottom:0; border-radius:6px; background:#d3dde6;}
.dl-a i{right:0;} .dl-b i{left:0;}
.dl-a.won i,.dl-b.won i{background:linear-gradient(90deg,#94c9f6,var(--accent));}
.dl-a em,.dl-b em{position:relative; font-style:normal; font-size:11.5px; font-weight:800;
  color:#5b6270; padding:0 7px;}
.dl-a.won em,.dl-b.won em{color:#fff;}
/* 이긴 쪽에만 표시 — 트로피는 칸 바깥쪽에 둔다 (숫자는 늘 가운데 쪽 끝) */
.dl-crown{position:absolute; top:50%; transform:translateY(-50%); font-size:12px; text-decoration:none;}
.dl-a .dl-crown{left:6px;} .dl-b .dl-crown{right:6px;}
.dl-k{text-align:center; line-height:1.15;}
.dl-k b{display:block; font-size:16px;}
.dl-k i{display:block; font-style:normal; font-size:11px; font-weight:700; color:var(--ink);
  letter-spacing:-.3px; word-break:keep-all; margin-top:2px;}
.dl-sub{grid-column:1 / 4; text-align:center; font-size:12px; color:#728290; margin-top:4px; font-weight:600;}
.dl-row.tie .dl-a i,.dl-row.tie .dl-b i{background:#cfd3dc;}
.dl-foot{display:grid; grid-template-columns:1fr 96px 1fr; gap:7px; margin-top:2px;}
.dl-foot b:first-child{text-align:left;} .dl-foot b:last-child{grid-column:3; text-align:right;}
.dl-foot b{font-size:11.5px; font-weight:700; color:var(--sub);}

/* ── 약이 되는가 ── 필요한 기운과 상대가 가진 양을 나란히 */
.rm{margin:10px 0 14px;}
.rm-row{padding:12px 13px; border-radius:12px; background:#f7fafc; margin-bottom:9px;}
.rm-row:last-child{margin-bottom:0;}
.rm-t{font-size:13px; color:var(--sub); margin-bottom:8px;}
.rm-t b{color:var(--ink); font-weight:800;}
.rm-oh{display:inline-block; margin-left:7px; padding:2px 9px; border-radius:20px;
  background:#fff; box-shadow:inset 0 0 0 1.5px #d6e5f3; color:var(--accent);
  font-size:13px; font-weight:800;}
.rm-bar{position:relative; height:26px; border-radius:8px; background:#ebeff3; overflow:hidden;
  display:flex; align-items:center;}
.rm-bar i{position:absolute; left:0; top:0; bottom:0; border-radius:8px;}
.rm-bar.ok i{background:linear-gradient(90deg,#94c9f6,var(--accent));}
.rm-bar.mid i{background:linear-gradient(90deg,#bcd0e8,#7fa3cc);}
.rm-bar.no i{background:linear-gradient(90deg,#f2c4bb,#e08b7f);}
.rm-bar em{position:relative; font-style:normal; font-size:12px; font-weight:700;
  color:var(--ink); padding:0 10px; letter-spacing:-.2px;}
.rm-bar.ok em, .rm-bar.no em{color:#fff;}
.rm-bar.none{background:repeating-linear-gradient(45deg,#eceef2,#eceef2 4px,#e2e5eb 4px,#e2e5eb 8px);}
.rm-bar.none em{color:var(--sub); font-weight:600;}
.rm-tag{margin-top:7px; font-size:12.5px; font-weight:800; text-align:right;}
.rm-tag.ok{color:var(--accent);} .rm-tag.mid{color:#4f80ba;} .rm-tag.no{color:#d0453a;}



/* ── 상단 알림 띠 ── 오늘의 운세는 매일 무료다. 파는 말보다 주는 말이 먼저다.
   클래스는 .nbar — .topbar 는 예전 상단바용으로 이미 잡혀 있다.
   고정 헤더 안에 들어가는 요소라 스스로 fixed 를 걸지 않는다 */
.nbar{position:relative; background:#fff6e3; border-bottom:1px solid #f2e2bd;}
/* 헤더(.topbar-inner)와 같은 폭·같은 오프셋 — 앱은 가운데 컬럼이다.
   버튼을 따로 두면 두 줄 높이가 되니 띠 전체를 누를 수 있게 한다 */
.nbar-in{display:flex; align-items:center; gap:9px; text-decoration:none;
  max-width:440px; margin:0 auto; padding:14px 36px 14px 15px;
  transform:translateX(var(--app-shift));}
.nbar .nb-ic{font-size:20px; line-height:1; flex:0 0 auto;}
.nbar .nb-t{flex:1 1 auto; font-size:15.5px; font-weight:600; color:#444b53;
  letter-spacing:-.4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.nbar .nb-t b{font-weight:800; color:#b8791a;}
.nbar .nb-arr{flex:0 0 auto; font-size:18px; font-weight:700; color:#b8791a; line-height:1;}
/* 닫기는 띠 오른쪽 끝에 겹쳐 올린다 — 흐름에 두면 누를 자리를 잘라먹는다 */
.nbar .nb-x{position:absolute; top:50%; transform:translateY(-50%); right:8px; z-index:2;
  background:none; border:0; padding:6px; font-size:14px; color:#a89aa0;
  cursor:pointer; line-height:1;}
/* 상태마다 색을 갈라 무슨 말인지 색으로 먼저 읽히게 한다 */
.nbar.nb-empty{background:#ffeef0; border-bottom-color:#f6d5d9;}
.nbar.nb-empty .nb-t b,.nbar.nb-empty .nb-arr{color:#d93a4a;}
.nbar.nb-free{background:var(--tint); border-bottom-color:#cfe3fb;}
.nbar.nb-free .nb-t b,.nbar.nb-free .nb-arr{color:var(--accent2);}
@media (max-width:360px){ .nbar .nb-t{font-size:14px;} .nbar-in{gap:7px; padding-left:12px;} }
/* 앱이 가운데 정렬되는 폭부터는 배경도 앱 컬럼 안으로 — 안 그러면 세로선이 어긋난다.
   상태별 규칙(.nbar.nb-free 등)이 클래스 2개라 더 세므로 같은 세기로 덮는다 */
@media (min-width:470px){
  .nbar, .nbar.nb-empty, .nbar.nb-low, .nbar.nb-free{background:transparent; border-bottom:0;}
  .nbar-in{background:#fff6e3; border-bottom:1px solid #f2e2bd;
    border-left:1px solid var(--line); border-right:1px solid var(--line);}
  .nbar.nb-empty .nbar-in{background:#ffeef0; border-bottom-color:#f6d5d9;}
  .nbar.nb-free .nbar-in{background:var(--tint); border-bottom-color:#cfe3fb;}
  /* 닫기는 .nbar(화면 전체 폭) 기준으로 붙어 있어서 넓은 화면에서는
     띠를 떠나 화면 오른쪽 끝에 홀로 떠 있었다. 컬럼 오른쪽 끝으로 데려온다 */
  .nbar .nb-x{right:calc(50% - 220px - var(--app-shift) + 8px);}
}

/* ══ 오늘의 문장 뽑기 ══════════════════════════════════════
   계산이 없는 기능이라 게이지를 돌릴 게 없다. 대신 컵에서 쪽지가 떠오르는
   장면을 보여주고, 다 되면 스스로 넘어가지 않고 버튼을 띄운다.
   사주 계산 화면(.ld)과 같은 규칙 — 화면을 통째로 덮어야 한 장면이 된다 */
body.mj-on .topbar-fixed, body.mj-on .tabbar{display:none;}
body.mj-on{padding-top:0 !important; overflow:hidden;}
.mj-draw{position:fixed; top:0; bottom:0; left:50%; width:100%; max-width:440px; z-index:300;
  transform:translateX(calc(-50% + var(--app-shift)));
  background:linear-gradient(180deg,#0b1746,#141a3d); color:#fff; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; text-align:center;
  padding:calc(env(safe-area-inset-top, 0px) + 54px) 22px calc(env(safe-area-inset-bottom, 0px) + 30px);}
.mj-stage{position:relative; z-index:1;}
.mj-who{font-size:14px; font-weight:700; color:#9aa8d4; letter-spacing:-.3px;}
.mj-h{margin-top:12px; font-size:28px; font-weight:700; line-height:1.42;
  letter-spacing:-1px; word-break:keep-all;}

/* 떠다니는 쪽지·포춘쿠키. 배경 층이라 눌리지 않게 둔다 */
.mj-sky{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.mj-bit{position:absolute; bottom:-60px; display:block; opacity:0;
  animation-name:mjFloat; animation-timing-function:linear; animation-iteration-count:infinite;}
.mj-bit svg{width:100%; display:block; fill:rgba(255,255,255,.10); stroke:rgba(190,208,255,.42);
  stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round;}
.mj-bit svg .fold{fill:none; stroke:rgba(190,208,255,.38);}
.mj-bit.cookie svg{fill:rgba(255,214,150,.13); stroke:rgba(255,209,140,.46);}
@keyframes mjFloat{
  0%  {opacity:0; transform:translateY(0) rotate(-14deg);}
  12% {opacity:1;}
  85% {opacity:1;}
  100%{opacity:0; transform:translateY(-108vh) rotate(16deg);}
}

/* 쪽지가 꽂힌 컵 — 사진 속 그 컵이다. 무엇을 뽑는 중인지 그림 하나로 말한다.
   유리는 속이 비쳐야 컵으로 읽힌다. 반투명 상자를 쪽지 위에 덮었더니
   어두운 바탕과 겹쳐 검은 통이 됐다 — SVG로 그려 순서를 잡는다 */
.mj-cup{width:150px; margin:30px auto 0;}
.mj-cup svg{width:100%; display:block; overflow:visible;}
.mj-cup .sl{fill:#f7faff; transform-box:fill-box; transform-origin:50% 100%;
  animation:mjBob 2.6s ease-in-out infinite;}
.mj-cup .s2{fill:#e4ecff; animation-delay:.35s;}
.mj-cup .s3{fill:#f6f9ff; animation-delay:.7s;}
.mj-cup .s4{fill:#d6e3ff; animation-delay:1.05s;}
/* 유리 — 채우기를 아주 옅게 둬야 안쪽 쪽지가 비친다 */
.mj-glass{fill:rgba(255,255,255,.10); stroke:rgba(214,228,255,.85); stroke-width:2;
  stroke-linejoin:round;}
.mj-rim{fill:rgba(255,255,255,.14); stroke:rgba(222,234,255,.9); stroke-width:2;}
@keyframes mjBob{ 0%,100%{translate:0 0;} 50%{translate:0 -5px;} }

.mj-go{margin-top:30px; opacity:0;}
.mj-go.in{opacity:1; animation:ldPop .46s cubic-bezier(.2,.9,.3,1.2) both;}
.mj-go.hidden{display:none;}
.mj-bub{display:table; margin:0 auto 10px; position:relative;
  background:#fff2d8; color:#a06a17; font-size:13px; font-weight:800;
  padding:8px 14px; border-radius:999px; letter-spacing:-.3px;}
.mj-bub::after{content:""; position:absolute; left:50%; bottom:-5px; width:10px; height:10px;
  margin-left:-5px; background:#fff2d8; transform:rotate(45deg);}
.mj-btn{margin-top:0;}
/* 다 뽑았으면 컵은 할 일이 끝났다. 버튼에 눈이 가게 조금 물러선다 */
.mj-draw.done .mj-cup{opacity:.45; transition:opacity .4s;}
@media (prefers-reduced-motion: reduce){
  .mj-bit, .mj-cup .sl{animation:none;}
  .mj-bit{opacity:.5;}
  .mj-go, .mj-go.in{opacity:1; animation:none; transform:none;}
}

/* ── 뽑은 결과 ── */
.mj-date{font-size:12.5px; font-weight:700; color:var(--sub); letter-spacing:-.2px;}
.mj-head{margin-top:4px; font-size:23px; font-weight:800; letter-spacing:-.8px; color:var(--ink);}
/* 뽑아 든 종이 한 장. 흰 카드 위에 흰 상자를 얹으면 그냥 칸으로 보여서,
   종이색(미색)으로 깔고 살짝 기울여 그림자를 준다 — 얹혀 있는 물건이 된다 */
/* 이 화면에는 문장 하나뿐이다. 종이가 작으면 그 하나가 곁다리로 보인다 —
   짧은 문장이 나와도 종이 크기는 그대로이게 최소 높이를 잡고 가운데에 앉힌다 */
.mj-paper{position:relative; margin-top:20px; padding:46px 24px 50px; border-radius:12px;
  min-height:min(46vh, 330px); display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  background:#fffdf5; box-shadow:0 12px 26px rgba(40,62,110,.15);
  transform:rotate(-.7deg);}
.mj-paper.bone{background:#fff6ef; box-shadow:0 12px 26px rgba(150,86,40,.15);}
/* 종이 윗변에 접힌 자국 한 줄 — 반으로 접어 컵에 꽂아뒀던 종이다 */
.mj-paper::before{content:""; position:absolute; left:16px; right:16px; top:13px; height:1px;
  background:rgba(60,70,90,.10);}
.mj-tone{display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:-.2px;
  padding:5px 11px; border-radius:999px; background:#dfeaff; color:#4a76c4;}
.mj-tone.bone{background:#ffe1cf; color:#b0642c;}
/* 이 화면의 주인공은 문장 하나다. 다른 화면 본문(16px)보다 크게 둔다 */
.mj-line{margin:20px 0 0; font-size:24px; font-weight:700; line-height:1.6;
  letter-spacing:-.9px; color:#2c3542; word-break:keep-all; text-wrap:balance;}
/* 다시 뽑기와 공유하기는 한 묶음이다. 사주 결과의 .share-row(위 92px)를 쓰면
   이 짧은 화면에서 버튼 두 개가 남남처럼 떨어진다 */
.mj-acts{margin-top:30px;}
.mj-acts .btn + .btn{margin-top:10px;}
/* 뽑은 김에 이어서 볼 곳 — 여기는 생일을 안 받으니 한 줄로만 잇는다 */
.mj-next{display:flex; align-items:center; gap:12px;
  margin-top:44px; padding:15px 16px; border-radius:14px; background:#f6f8fb;
  text-decoration:none; color:var(--ink);}
.mj-next .mj-nb{flex:1; min-width:0; text-align:left;}
.mj-next .mj-nt{display:block; font-size:14.5px; font-weight:700; letter-spacing:-.3px;}
.mj-next .mj-nd{display:block; margin-top:2px; font-size:12.5px; font-weight:600; color:var(--sub);}
.mj-next .mj-na{flex:0 0 auto; font-size:18px; font-weight:700; color:#c6d1dd;}