/* ============================================================
   운며들다 — 공용 스타일 (style.css)
   색은 :root 변수로만 관리 — 다크모드는 변수 세트만 교체.
   헤딩: 명조(세리프) / 본문: 고딕(산세리프)
   ============================================================ */

:root{
  /* 브랜드 팔레트 ------------------------------------------- */
  --ink:    #23252c;   /* 본문 글자 — 짙은 먹색 */
  --accent: #1d3148;   /* 강조 — 깊은 남청(먹빛 도는 네이비) */
  --accent-ink: #1d3148; /* 강조 '글자' 전용 — 밤에는 밝게 반전 */
  --gold-deep: #7d621c;  /* 소형 금색 글자 전용 — 대비 확보용 깊은 금 */
  --gold:   #b3954e;   /* 포인트 — 빛나는 황동빛 금 */
  --line:   #e4dccc;   /* 테두리 — 한지 결 */
  --bg:     #f4eee1;   /* 배경 — 따뜻한 한지 미색 */
  --paper:  #fbf8f1;   /* 카드 배경 — 더 밝은 한지 */

  /* 오방색 보조 강조 — 동양 포인트(추가, 기존 미사용) */
  --pine:   #4a5d43;   /* 솔잎 녹 */
  --terra:  #c2674a;   /* 주사빛 테라코타 */
  --pine-soft:  rgba(74,93,67,.13);
  --terra-soft: rgba(194,103,74,.13);
  --hanja: rgba(179,149,78,.13);  /* 간지 한자 장식 */

  /* 파생/의미 색 ------------------------------------------- */
  --ink-soft:  #5a5f6b;          /* 보조 텍스트 */
  --ink-faint: #656a76;          /* 더 옅은 텍스트(대비 4.5+) */
  --btn-fg:    #f8f4ea;          /* 강조 버튼 위 글자 */
  --gold-soft: rgba(179,149,78,.16);
  --bloom-a:   rgba(29,49,72,.13);   /* 먹번짐 — 남청 */
  --bloom-b:   rgba(35,37,44,.08);   /* 먹번짐 — 먹색 */
  --shadow:    0 2px 24px -12px rgba(32,36,46,.22);
  --shadow-lift: 0 14px 40px -18px rgba(29,49,72,.30);
  --hair: rgba(228,220,204,.9);

  /* 형태 ------------------------------------------------- */
  --max: 880px;
  --r:   18px;
  --r-sm: 12px;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* 타이포 ------------------------------------------------ */
  --serif: "Noto Serif KR", "Nanum Myeongjo", serif;
  --sans:  "Pretendard", "Noto Sans KR", system-ui, sans-serif;
}

/* 다크 모드 — JS 미동작 시 폴백(시간대 클래스가 붙으면 그쪽이 우선) */
@media (prefers-color-scheme: dark){
  :root:not(.force-light):not(.t-day):not(.t-dusk):not(.t-night){
    --ink:    #e9e3d6;
    --accent: #2d3c5e;
    --accent-ink: #a9c2ef;
    --gold-deep:  #d3b671;
    --gold:   #cbab63;
    --line:   #33373f;
    --bg:     #15171c;
    --paper:  #1d2027;
    --pine:   #8aa67e;
    --terra:  #d98a6a;
    --pine-soft:  rgba(138,166,126,.15);
    --terra-soft: rgba(217,138,106,.15);
    --hanja: rgba(203,171,99,.15);
    --ink-soft:  #a7aab4;
    --ink-faint: #767a85;
    --btn-fg:    #eef1f7;
    --gold-soft: rgba(203,171,99,.16);
    --bloom-a:   rgba(120,140,190,.16);
    --bloom-b:   rgba(150,160,180,.08);
    --shadow:    0 2px 24px -12px rgba(0,0,0,.6);
    --shadow-lift: 0 16px 44px -18px rgba(0,0,0,.7);
    --hair: rgba(51,55,63,.9);
  }
}
/* ── 시간대 테마: 밤(night) — 수동 body.dark와 통합, 누락 토큰 복구 ── */
html.t-night, body.dark{
  --ink:    #e9e3d6;
  --accent: #2d3c5e;
  --accent-ink: #a9c2ef;
  --gold-deep:  #d3b671;
  --gold:   #cbab63;
  --line:   #33373f;
  --bg:     #14161b;
  --paper:  #1d2027;
  --pine:   #8aa67e;
  --terra:  #d98a6a;
  --pine-soft:  rgba(138,166,126,.15);
  --terra-soft: rgba(217,138,106,.15);
  --hanja: rgba(203,171,99,.15);
  --ink-soft:  #a7aab4;
  --ink-faint: #8f93a0;
  --btn-fg:    #eef1f7;
  --gold-soft: rgba(203,171,99,.16);
  --bloom-a:   rgba(120,140,190,.18);   /* 달빛 — 푸른 기운 */
  --bloom-b:   rgba(150,160,180,.09);
  --shadow:    0 2px 24px -12px rgba(0,0,0,.6);
  --shadow-lift: 0 16px 44px -18px rgba(0,0,0,.7);
  --hair: rgba(51,55,63,.9);
  --glow: rgba(203,171,99,.10);          /* 등불 글로우 */
  --overlay: rgba(20,22,27,.94);
}

/* ── 시간대 테마: 노을(dusk) — 따뜻한 주황 기운 ── */
html.t-dusk{
  --ink:    #2a2520;
  --accent: #2a3550;
  --accent-ink: #2a3550;
  --gold-deep:  #7d5c1a;
  --gold:   #c08a3e;
  --line:   #e6d3bc;
  --bg:     #f6e9d8;          /* 노을빛 한지 */
  --paper:  #fdf4e8;
  --pine:   #5a6b4e;
  --terra:  #c2674a;
  --pine-soft:  rgba(90,107,78,.14);
  --terra-soft: rgba(194,103,74,.16);
  --hanja: rgba(192,138,62,.14);
  --ink-soft:  #6a5d4f;
  --ink-faint: #6d6453;
  --btn-fg:    #fdf4e8;
  --gold-soft: rgba(192,138,62,.16);
  --bloom-a:   rgba(201,106,78,.14);     /* 노을 — 붉은 기운 */
  --bloom-b:   rgba(192,138,62,.10);
  --shadow:    0 2px 24px -12px rgba(120,70,40,.24);
  --shadow-lift: 0 14px 40px -18px rgba(150,90,50,.30);
  --hair: rgba(230,211,188,.9);
  --glow: rgba(201,106,78,.12);
  --overlay: rgba(246,233,216,.94);
}

/* 낮(day)은 :root 기본 라이트 토큰 그대로 — 별도 오버라이드 없음 */
:root{ --glow: rgba(179,149,78,.08); --overlay: rgba(244,238,225,.94); }


/* ============================================================
   리셋 & 기본
   ============================================================ */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.72;
  font-size:16px;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* 한지 결: 아주 미세한 결 + 은은한 먹번짐 두 점 */
  background-image:
    radial-gradient(60% 50% at 88% -8%,  var(--bloom-a) 0%, transparent 60%),
    radial-gradient(45% 40% at 4% 14%,   var(--bloom-b) 0%, transparent 55%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  min-height:100vh;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.01em;
  line-height:1.32;
  margin:0;
  word-break:keep-all;
  text-wrap:pretty;
}

.wrap{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px;
}

/* 섹션 라벨 (작은 명조 캡션) */
.eyebrow{
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:.32em;
  color:var(--gold-deep);
  text-transform:none;
  margin:0 0 14px;
  display:flex;
  align-items:center;
  gap:12px;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--gold);
  opacity:.7;
}

/* ============================================================
   헤더
   ============================================================ */
.top{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--hair);
}
.top__in{
  max-width:var(--max); margin:0 auto;
  padding:14px 24px;
  display:flex; align-items:center; gap:20px;
}
.brand{
  font-family:var(--serif);
  font-size:21px; font-weight:600;
  letter-spacing:.04em;
  display:flex; align-items:center; gap:9px;
}
.brand .seal{
  width:26px; height:26px; flex:none;
  display:grid; place-items:center;
  border-radius:7px;
  background:var(--accent);
  color:var(--btn-fg);
  font-size:13px; font-family:var(--serif);
  box-shadow:var(--shadow);
}
.nav{
  display:flex; gap:26px; margin-left:14px;
  font-size:14.5px; color:var(--ink-soft);
}
.nav a{ transition:color .2s var(--ease); }
.nav a:hover{ color:var(--ink); }
.top__right{ margin-left:auto; display:flex; align-items:center; gap:14px; }

/* 🍀 클로버 잔액 */
.clover{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  font-size:13.5px; color:var(--ink-soft);
  white-space:nowrap;
}
.clover b{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }

.icon-btn{
  width:38px; height:38px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--line); border-radius:999px;
  background:var(--paper); color:var(--ink-soft);
  font-size:15px; transition:.2s var(--ease);
}
.icon-btn:hover{ color:var(--ink); border-color:var(--gold); }

.btn-ghost{
  font-size:14.5px; color:var(--ink-soft);
  padding:7px 4px; transition:color .2s var(--ease);
}
.btn-ghost:hover{ color:var(--ink); }

/* ============================================================
   버튼
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px;
  border-radius:999px;
  font-size:15.5px; font-weight:500;
  border:1px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
  white-space:nowrap;
}
.btn--primary{
  background:var(--accent); color:var(--btn-fg);
  box-shadow:var(--shadow);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.btn--ghost{
  background:transparent; color:var(--ink);
  border-color:var(--line);
}
.btn--ghost:hover{ border-color:var(--gold); transform:translateY(-2px); }
.btn .arrow{ transition:transform .25s var(--ease); }
.btn:hover .arrow{ transform:translateX(3px); }

/* 배지 */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:600; letter-spacing:.04em;
  padding:4px 10px; border-radius:999px;
  background:var(--gold-soft); color:#846314;
  border:1px solid color-mix(in srgb, var(--gold) 30%, transparent);
}
html.t-night .badge, body.dark .badge, html.t-dusk .badge{ color:var(--gold); }

/* ============================================================
   메인 영역
   ============================================================ */
main{ display:block; }
.section{ padding:30px 0; }
.section--lg{ padding:48px 0; }

/* 광고 배너 자리 */
.adslot{
  max-width:var(--max); margin:22px auto 0;
  padding:0 24px;
}
.adslot__box{
  border:1px dashed var(--line);
  border-radius:var(--r-sm);
  min-height:84px;
  display:grid; place-items:center;
  color:var(--ink-faint);
  font-size:12.5px; letter-spacing:.14em;
  font-family:var(--sans);
  background:
    repeating-linear-gradient(45deg,
      transparent, transparent 11px,
      color-mix(in srgb, var(--line) 40%, transparent) 11px,
      color-mix(in srgb, var(--line) 40%, transparent) 12px);
}

/* ---- 히어로 ---- */
.hero{
  position:relative;
  text-align:center;
  padding:78px 0 56px;
  overflow:hidden;
}
/* 먹번짐 점 — 히어로 뒤 은은한 얼룩 */
.hero__bloom{
  position:absolute; inset:0; z-index:0; pointer-events:none;
}
.hero__bloom::before,
.hero__bloom::after{
  content:""; position:absolute; border-radius:50%;
  filter:blur(46px);
}
.hero__bloom::before{
  width:340px; height:300px; left:50%; top:-40px;
  transform:translateX(-58%);
  background:radial-gradient(circle, var(--bloom-a) 0%, transparent 70%);
}
.hero__bloom::after{
  width:260px; height:240px; right:8%; bottom:-30px;
  background:radial-gradient(circle, var(--bloom-b) 0%, transparent 70%);
}
.hero__in{ position:relative; z-index:1; }
.hero h1{
  font-size:clamp(30px, 6.4vw, 50px);
  line-height:1.38;
  margin:18px auto 0;
  max-width:16em;
}
.hero h1 .glow{
  color:var(--accent-ink);
  position:relative;
}
.hero p.lede{
  margin:22px auto 0;
  max-width:30em;
  font-size:clamp(15px,2.6vw,17.5px);
  color:var(--ink-soft);
  line-height:1.95;
}
.hero__cta{
  margin-top:34px;
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
}
.hero__note{
  margin-top:18px; font-size:12.5px; color:var(--ink-faint);
  letter-spacing:.02em;
}

/* ---- 오늘의 운세 와이드 카드 ---- */
.daily{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:30px 32px;
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex; align-items:center; gap:26px;
}
.daily__bloom{
  position:absolute; right:-40px; top:-60px;
  width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, var(--bloom-a) 0%, transparent 68%);
  filter:blur(28px); pointer-events:none;
}
.daily__body{ position:relative; z-index:1; flex:1; min-width:0; }
.daily__date{
  font-size:13px; color:var(--gold-deep); letter-spacing:.16em;
  font-family:var(--serif); margin-bottom:8px;
}
.daily h3{ font-size:clamp(19px,3.4vw,24px); margin-bottom:8px; }
.daily p{ color:var(--ink-soft); font-size:14.5px; margin:0; max-width:42em; }
.daily__go{
  position:relative; z-index:1; flex:none;
  width:54px; height:54px; border-radius:50%;
  border:1px solid var(--line); background:var(--bg);
  display:grid; place-items:center; color:var(--accent-ink);
  font-size:19px; transition:.25s var(--ease);
}
.daily:hover .daily__go{ background:var(--accent); color:var(--btn-fg); transform:translateX(3px); }

/* ---- 띠별 운세 스트립 ---- */
.zodiac__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  margin-bottom:18px;
}
.zodiac__head h2{ font-size:clamp(20px,3.6vw,26px); }
.zodiac__grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:12px;
}
.zo{
  text-align:center;
  padding:16px 6px 13px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--paper);
  transition:.22s var(--ease);
}
.zo:hover{ transform:translateY(-3px); border-color:var(--gold); box-shadow:var(--shadow); }
.zo__char{
  width:46px; height:46px; margin:0 auto 9px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--gold-soft);
  font-family:var(--serif); font-size:22px; color:var(--accent-ink);
}
.zo__name{ font-size:13px; color:var(--ink-soft); }

/* ---- 카테고리 타일 ---- */
.cats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.cat-tile{
  position:relative;
  padding:26px 24px 24px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--paper);
  box-shadow:var(--shadow);
  transition:.25s var(--ease);
  overflow:hidden;
}
.cat-tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.cat-tile__mark{
  font-family:var(--serif); font-size:24px;
  color:var(--accent-ink);
  width:48px; height:48px; border-radius:13px;
  display:grid; place-items:center;
  background:var(--gold-soft);
  margin-bottom:18px;
}
.cat-tile h3{ font-size:19px; margin-bottom:6px; }
.cat-tile p{ font-size:13.5px; color:var(--ink-soft); margin:0; }
.cat-tile__arrow{
  margin-top:18px; color:var(--gold); font-size:14px;
  display:flex; align-items:center; gap:7px;
}

/* ---- 상품 카드 ---- */
.prod-head{
  display:flex; align-items:baseline; gap:14px; margin-bottom:18px;
}
.prod-head h2{ font-size:clamp(20px,3.6vw,26px); }
.prod-head .more{ margin-left:auto; font-size:13.5px; color:var(--gold); }
.prods{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.card{
  display:flex; flex-direction:column;
  padding:24px 22px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--paper);
  box-shadow:var(--shadow);
  transition:.25s var(--ease);
  min-height:188px;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:color-mix(in srgb,var(--gold) 40%, var(--line)); }
.card__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.card__glyph{
  font-family:var(--serif); font-size:20px; color:var(--accent-ink);
  width:42px; height:42px; border-radius:11px;
  display:grid; place-items:center;
  background:var(--gold-soft);
}
.card h3{ font-size:17.5px; margin-bottom:7px; }
.card p{ font-size:13.5px; color:var(--ink-soft); margin:0 0 16px; flex:1; }
.card__foot{
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px; color:var(--ink-faint);
  border-top:1px solid var(--hair); padding-top:13px;
}
.card__price{ color:var(--ink); font-weight:600; }
.card__price .clo{ color:var(--gold); }
.card__price.free{ color:var(--gold); }

/* ── 상품 가로 레일 (자동 흐름 + 손대면 멈춤; JS가 스크롤 구동) ── */
.prod-rail{ margin-top:16px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%); }
.prod-rail::-webkit-scrollbar{ display:none; }
.prod-rail__track{ display:flex; gap:16px; width:max-content; padding:6px 2px; }
.card--rail{ flex:0 0 250px; width:250px; }
@media (max-width:560px){ .card--rail{ flex:0 0 78vw; width:78vw; max-width:300px; } }

/* ---- 마무리 유도 ---- */
.closing{
  text-align:center;
  padding:60px 30px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--paper);
  box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.closing__bloom{
  position:absolute; left:50%; bottom:-90px; transform:translateX(-50%);
  width:380px; height:240px; border-radius:50%;
  background:radial-gradient(circle, var(--bloom-a) 0%, transparent 68%);
  filter:blur(40px); pointer-events:none;
}
.closing h2{ position:relative; font-size:clamp(22px,4vw,30px); margin-bottom:14px; }
.closing p{ position:relative; color:var(--ink-soft); margin:0 auto 26px; max-width:26em; }

/* ============================================================
   푸터
   ============================================================ */
.foot{
  margin-top:40px;
  border-top:1px solid var(--line);
  background:color-mix(in srgb, var(--paper) 60%, var(--bg));
}
.foot__in{
  max-width:var(--max); margin:0 auto; padding:42px 24px 56px;
}
.foot__links{
  display:flex; flex-wrap:wrap; gap:8px 22px;
  font-size:13.5px; margin-bottom:22px;
}
.foot__links a{ color:var(--ink-soft); transition:color .2s; }
.foot__links a:hover{ color:var(--ink); }
.foot__links a.strong{ color:var(--ink); font-weight:600; }
.foot__biz{
  font-size:12.5px; color:var(--ink-faint); line-height:1.95;
  border-top:1px solid var(--hair); padding-top:20px;
}
.foot__biz b{ color:var(--ink-soft); font-weight:600; }
.foot__bottom{
  margin-top:18px; display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  font-size:12px; color:var(--ink-faint);
}

/* ============================================================
   스크롤 등장 애니메이션 (절제) — opacity 는 항상 1 (절대 숨기지 않음).
   살짝 떠오르는 'transform' 만 연출. 트랜지션이 합성되지 않는 환경에서도
   콘텐츠는 항상 보임(최악의 경우 14px 오프셋만 남고 가독성엔 영향 없음).
   ============================================================ */
.reveal{ transition:transform .7s var(--ease); }
html.js-anim .reveal:not(.in){ transform:translateY(14px); }
@media (prefers-reduced-motion:reduce){
  .reveal{ transition:none; }
  html.js-anim .reveal:not(.in){ transform:none; }
  .btn,.card,.cat-tile,.zo{ transition:none; }
}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width:760px){
  .nav{ display:none; }
  .cats{ grid-template-columns:1fr; }
  .prods{ grid-template-columns:1fr 1fr; }
  .zodiac__grid{ grid-template-columns:repeat(4,1fr); }
  .daily{ flex-direction:column; align-items:flex-start; gap:18px; }
  .daily__go{ align-self:flex-end; }
  .hero{ padding:54px 0 40px; }
}
@media (max-width:460px){
  .wrap{ padding:0 18px; }
  .top__in{ padding:12px 16px; gap:12px; }
  .clover{ padding:6px 10px; font-size:12.5px; }
  .prods{ grid-template-columns:1fr; }
  .zodiac__grid{ grid-template-columns:repeat(3,1fr); }
  .brand{ font-size:19px; }
}

/* ============================================================
   입력 폼 (form_single 등) — 출생정보 입력
   ============================================================ */
.form-page{ padding:46px 0 30px; }
.form-head{ text-align:center; margin-bottom:34px; }
.form-head h1{ font-size:clamp(26px,5vw,38px); margin:14px 0 12px; }
.form-head p{ color:var(--ink-soft); font-size:15px; margin:0 auto; max-width:26em; }

.form-card{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:40px 40px 34px;
  overflow:hidden;
}
.form-card__bloom{
  position:absolute; right:-60px; top:-80px;
  width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle, var(--bloom-a) 0%, transparent 68%);
  filter:blur(34px); pointer-events:none;
}
.form-card > *:not(.form-card__bloom){ position:relative; z-index:1; }

.field{ margin-bottom:26px; }
.field:last-child{ margin-bottom:0; }
.field__label{
  display:flex; align-items:baseline; gap:8px;
  font-family:var(--serif); font-size:15.5px; font-weight:500;
  color:var(--ink); margin-bottom:12px;
}
.field__label .opt{ font-family:var(--sans); font-size:12px; color:var(--ink-faint); font-weight:400; }
.field__label .req{ color:var(--gold-deep); font-size:13px; }
.field__hint{ font-size:12.5px; color:var(--ink-faint); margin-top:9px; line-height:1.6; }

/* 입력/셀렉트 공통 */
.inp, .sel{
  width:100%;
  font-family:var(--sans); font-size:15px; color:var(--ink);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:13px 15px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s;
  appearance:none; -webkit-appearance:none;
}
.inp::placeholder{ color:var(--ink-faint); }
.inp:focus, .sel:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px var(--gold-soft);
  background:var(--paper);
}
.inp:disabled, .sel:disabled{ opacity:.45; cursor:not-allowed; }
.sel{
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position:calc(100% - 18px) calc(50% - 2px), calc(100% - 13px) calc(50% - 2px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:38px;
}
/* select→숫자 input 변환분: 화살표 제거 + 숫자 가운데 정렬 */
.sel--num{ background-image:none !important; padding-right:14px !important; text-align:center; }

/* 연/월/일 · 시/분 가로 배치 */
.row{ display:grid; gap:10px; }
.row--3{ grid-template-columns:1.3fr 1fr 1fr; }
.row--2{ grid-template-columns:1fr 1fr; }
.row__unit{ position:relative; }
.row__unit small{
  position:absolute; right:34px; top:50%; transform:translateY(-50%);
  font-size:12px; color:var(--ink-faint); pointer-events:none;
}

/* 세그먼트 컨트롤 (양/음력 · 성별) */
.seg{
  display:inline-flex; padding:4px; gap:4px;
  background:var(--bg); border:1px solid var(--line);
  border-radius:999px; width:100%;
}
.seg label{
  flex:1; position:relative; cursor:pointer;
  text-align:center; font-size:14.5px; color:var(--ink-soft);
  padding:10px 8px; border-radius:999px;
  transition:.2s var(--ease);
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.seg input{ position:absolute; opacity:0; pointer-events:none; }
.seg input:checked + label{
  background:var(--accent); color:var(--btn-fg);
  box-shadow:var(--shadow);
}
.seg label:hover{ color:var(--ink); }
.seg input:checked + label:hover{ color:var(--btn-fg); }

/* 체크 행 (시간 모름 · 윤달) */
.check{
  display:inline-flex; align-items:center; gap:10px;
  cursor:pointer; font-size:14px; color:var(--ink-soft);
  user-select:none;
}
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check__box{
  width:22px; height:22px; flex:none;
  border:1px solid var(--line); border-radius:7px;
  background:var(--bg);
  display:grid; place-items:center;
  color:transparent; font-size:13px;
  transition:.18s var(--ease);
}
.check input:checked + .check__box{
  background:var(--accent); border-color:var(--accent); color:var(--btn-fg);
}
.check input:focus-visible + .check__box{ box-shadow:0 0 0 3px var(--gold-soft); }
.check:hover .check__box{ border-color:var(--gold); }

.field-divider{ height:1px; background:var(--hair); margin:30px 0; border:0; }

.form-submit{ margin-top:32px; text-align:center; }
.form-submit .btn{ width:100%; padding:17px; font-size:16.5px; }
.form-submit .privacy{ margin-top:14px; font-size:12px; color:var(--ink-faint); }

/* 진행 단계 표시 (작게) */
.steps{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:12.5px; color:var(--ink-faint); letter-spacing:.08em;
}
.steps b{ color:var(--gold); font-weight:600; }
.steps .dot{ width:4px; height:4px; border-radius:50%; background:var(--line); }

/* ============================================================
   "명식을 분석 중입니다…" 로딩 오버레이
   ============================================================ */
.loading{
  position:fixed; inset:0; z-index:200;
  display:none; place-items:center;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  text-align:center;
}
.loading.on{ display:grid; animation:fadeIn .5s var(--ease); }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.loading__in{ position:relative; padding:30px; }
.loading__ring{
  width:96px; height:96px; margin:0 auto 30px; position:relative;
}
.loading__ring::before, .loading__ring::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1.5px solid var(--line);
}
.loading__ring::after{
  border-color:var(--gold) transparent var(--accent) transparent;
  animation:spin 2.6s linear infinite;
}
.loading__seal{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--serif); font-size:30px; color:var(--accent-ink);
  animation:breathe 2.8s var(--ease) infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes breathe{ 0%,100%{ opacity:.5; transform:scale(.96); } 50%{ opacity:1; transform:scale(1.04); } }
.loading h2{ font-size:clamp(20px,4vw,26px); margin-bottom:12px; }
.loading p{ color:var(--ink-soft); font-size:14.5px; margin:0; }
.loading__dots::after{
  content:"…"; animation:dots 1.6s steps(4,end) infinite; }
@keyframes dots{ 0%{ content:""; } 25%{ content:"·"; } 50%{ content:"··"; } 75%{ content:"···"; } }

@media (max-width:520px){
  .form-card{ padding:28px 22px 26px; }
  .row--3{ grid-template-columns:1.2fr 1fr 1fr; gap:8px; }
}

/* ============================================================
   결과 페이지 (result 등) — 해석 보기
   ============================================================ */
.result-page{ padding:40px 0 20px; }
.result-head{ text-align:center; margin-bottom:30px; }
.result-head .eyebrow{ justify-content:center; }
.result-head h1{ font-size:clamp(24px,4.6vw,34px); margin:12px 0 16px; }
.keywords{ display:flex; gap:9px; justify-content:center; flex-wrap:wrap; }
.kw{
  font-family:var(--serif); font-size:13.5px;
  padding:6px 15px; border-radius:999px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink-soft);
}
.kw.accent{ color:var(--accent-ink); border-color:color-mix(in srgb,var(--gold) 36%, var(--line)); }

/* ---- 만세력 명식표 (_manse) ---- */
.manse{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow);
  padding:26px 26px 22px; overflow:hidden; position:relative;
}
.manse__bloom{
  position:absolute; left:-50px; bottom:-70px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, var(--bloom-a) 0%, transparent 68%); filter:blur(30px); pointer-events:none;
}
.manse__grid{ position:relative; display:grid; grid-template-columns:auto repeat(4,1fr); gap:8px; }
.manse__rowlabel, .manse__collabel{ font-size:11.5px; color:var(--ink-faint); letter-spacing:.06em; }
.manse__collabel{ text-align:center; font-family:var(--serif); padding-bottom:6px; }
.manse__rowlabel{ display:grid; place-items:center; padding-right:6px; }
.gan{
  text-align:center; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--bg);
  padding:14px 6px 10px;
}
.gan__char{ font-family:var(--serif); font-size:clamp(24px,5vw,32px); line-height:1.1; color:var(--ink); }
.gan__sub{ font-size:11px; color:var(--ink-faint); margin-top:5px; }
/* 오행 색조 (절제된 톤) */
.el-wood  .gan__char{ color:#4d6b53; }
.el-fire  .gan__char{ color:#9a5a4e; }
.el-earth .gan__char{ color:var(--gold); }
.el-metal .gan__char{ color:var(--accent-ink); }
.el-water .gan__char{ color:#3a4a63; }
body.dark .el-wood .gan__char{ color:#86b08e; }
body.dark .el-fire .gan__char{ color:#cf9182; }
body.dark .el-water .gan__char{ color:#9fb2d4; }
.manse__note{ margin-top:16px; font-size:12.5px; color:var(--ink-faint); text-align:center; }

/* ---- 해석 섹션 카드 ---- */
.reading{ display:flex; flex-direction:column; gap:18px; }
.rcard{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow);
  padding:30px 32px; position:relative; overflow:hidden;
}
.rcard__head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.rcard__glyph{
  font-family:var(--serif); font-size:18px; color:var(--accent-ink);
  width:40px; height:40px; flex:none; border-radius:11px;
  display:grid; place-items:center; background:var(--gold-soft);
}
.rcard__head h3{ font-size:28px; }
.rcard__body{ color:var(--ink); font-size:27px; line-height:1.8; }
.rcard__body p{ margin:0 0 14px; }
.rcard__body p:last-child{ margin-bottom:0; }

/* ---- 모자이크 잠금 영역 ---- */
.rcard.locked .rcard__body{ position:relative; }
.rcard.locked{ overflow:visible; }
.lockwrap{ position:relative; min-height:230px; }
.lockwrap__blur{
  position:absolute; inset:0;
  filter:blur(7px); opacity:.5; user-select:none; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, #000 25%, transparent 92%);
          mask-image:linear-gradient(180deg, #000 25%, transparent 92%);
  overflow:hidden;
}
.lockover{
  position:relative; z-index:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:13px;
  padding:32px 20px;
}
.lockover__icon{
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; font-size:20px;
  background:var(--paper); border:1px solid var(--line); color:var(--gold);
  box-shadow:var(--shadow);
}
.lockover h4{ font-family:var(--serif); font-size:17px; }
.lockover p{ font-size:13px; color:var(--ink-soft); margin:0; max-width:24em; }
.unlock-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 24px; border-radius:999px;
  background:var(--accent); color:var(--btn-fg); font-size:15px; font-weight:500;
  border:1px solid transparent; box-shadow:var(--shadow);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.unlock-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.unlock-btn .price{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:999px;
  background:color-mix(in srgb,#fff 16%, transparent); font-size:13px;
}

/* ---- 쿠팡 게이트 ---- */
.coupang-gate{
  margin-top:14px; padding:18px 20px;
  border:1px dashed color-mix(in srgb,var(--gold) 50%, var(--line));
  border-radius:var(--r-sm); background:var(--gold-soft);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.coupang-gate__txt{ flex:1; min-width:180px; }
.coupang-gate__txt b{ font-family:var(--serif); font-size:15px; display:block; margin-bottom:3px; }
.coupang-gate__txt span{ font-size:12.5px; color:var(--ink-soft); }
.btn-coupang{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 20px; border-radius:999px; white-space:nowrap;
  background:var(--paper); color:var(--ink); border:1px solid var(--gold);
  font-size:14px; font-weight:500; transition:.22s var(--ease);
}
.btn-coupang:hover{ background:var(--accent); color:var(--btn-fg); border-color:var(--accent); }

/* ---- 행운의 아이템/음식 추천 (_reco) — 항상 노출 ---- */
.reco-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:16px; }
.reco-head h2{ font-size:clamp(19px,3.4vw,24px); }
.reco-head .badge{ }
.reco{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.reco-card{
  display:flex; gap:14px; align-items:center;
  padding:16px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--paper); box-shadow:var(--shadow); transition:.22s var(--ease);
}
.reco-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:var(--gold); }
.reco-card__thumb{
  width:58px; height:58px; flex:none; border-radius:10px;
  background:
    repeating-linear-gradient(45deg, var(--bg), var(--bg) 6px,
      color-mix(in srgb,var(--line) 60%, transparent) 6px,
      color-mix(in srgb,var(--line) 60%, transparent) 7px);
  display:grid; place-items:center; font-family:var(--serif); font-size:20px; color:var(--gold);
  border:1px solid var(--line);
}
.reco-card__body{ min-width:0; }
.reco-card__kind{ font-size:11.5px; color:var(--gold-deep); letter-spacing:.06em; }
.reco-card__body h4{ font-size:15px; font-family:var(--serif); margin:2px 0 4px; }
.reco-card__body p{ font-size:12.5px; color:var(--ink-soft); margin:0; }
.reco-card__go{ margin-left:auto; flex:none; color:var(--ink-faint); font-size:18px; }
.reco-note{ margin-top:12px; font-size:11.5px; color:var(--ink-faint); text-align:center; }

/* ---- 결과 하단 액션 (공유 / PDF) ---- */
.result-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:6px; }
.result-actions .btn{ flex:1; min-width:160px; max-width:260px; }
.btn--quiet{ background:var(--paper); color:var(--ink); border:1px solid var(--line); }
.btn--quiet:hover{ border-color:var(--gold); transform:translateY(-2px); }

@media (max-width:560px){
  .rcard{ padding:24px 22px; }
  .reco{ grid-template-columns:1fr; }
  .gan__sub{ display:none; }
}

/* ============================================================
   충전 페이지 (charge) — 네잎클로버 패키지
   ============================================================ */
.charge-balance{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:18px 24px; margin-bottom:30px;
  background:var(--paper); border:1px solid var(--line); border-radius:999px;
  box-shadow:var(--shadow); width:fit-content; margin-left:auto; margin-right:auto;
}
.charge-balance .lbl{ font-size:13.5px; color:var(--ink-soft); }
.charge-balance .amt{ font-family:var(--serif); font-size:22px; color:var(--ink); }
.charge-balance .amt b{ color:var(--gold); }

.pkg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.pkg{
  position:relative; cursor:pointer; display:block;
}
.pkg input{ position:absolute; opacity:0; pointer-events:none; }
.pkg__card{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper); box-shadow:var(--shadow);
  padding:24px 20px 20px; text-align:center;
  transition:.22s var(--ease); height:100%;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.pkg:hover .pkg__card{ transform:translateY(-3px); border-color:var(--gold); }
.pkg input:checked + .pkg__card{
  border-color:var(--accent); box-shadow:var(--shadow-lift);
  background:color-mix(in srgb,var(--gold-soft) 60%, var(--paper));
}
.pkg input:checked + .pkg__card::after{
  content:"✓"; position:absolute; top:12px; right:14px;
  width:22px; height:22px; border-radius:50%;
  background:var(--accent); color:var(--btn-fg); font-size:12px;
  display:grid; place-items:center;
}
.pkg__clover{ font-size:30px; line-height:1; }
.pkg__amt{ font-family:var(--serif); font-size:22px; color:var(--ink); }
.pkg__amt span{ font-size:14px; color:var(--gold); }
.pkg__bonus{ font-size:12px; color:var(--gold); }
.pkg__price{ margin-top:6px; font-size:14.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.pkg__tag{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  font-size:11px; font-weight:600; letter-spacing:.04em;
  padding:3px 12px; border-radius:999px;
  background:var(--accent); color:var(--btn-fg); white-space:nowrap;
  box-shadow:var(--shadow);
}

/* 쿠폰 입력 */
.coupon{
  display:flex; gap:10px; margin-top:24px;
}
.coupon .inp{ flex:1; }
.coupon .btn{ flex:none; padding:13px 22px; }

/* 결제 수단 */
.paymethods{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.paymethods label{
  flex:1; min-width:90px; text-align:center; cursor:pointer;
  padding:13px 10px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--paper); font-size:13.5px; color:var(--ink-soft);
  transition:.2s var(--ease);
}
.paymethods input{ position:absolute; opacity:0; pointer-events:none; }
.paymethods input:checked + span{ color:var(--ink); font-weight:600; }
.paymethods label:has(input:checked){ border-color:var(--accent); background:var(--gold-soft); }

.charge-summary{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:28px; padding-top:20px; border-top:1px solid var(--hair);
  font-size:15px;
}
.charge-summary .total{ font-family:var(--serif); font-size:22px; color:var(--ink); }
.charge-summary .total b{ color:var(--accent-ink); }

@media (max-width:560px){
  .pkg-grid{ grid-template-columns:1fr 1fr; }
}

/* ============================================================
   궁합 입력 (form_pair) — 두 사람 나란히
   ============================================================ */
.pair-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.person{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--bg); padding:22px 20px;
}
.person__head{
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
  padding-bottom:14px; border-bottom:1px solid var(--hair);
}
.person__badge{
  width:34px; height:34px; flex:none; border-radius:9px;
  display:grid; place-items:center; font-family:var(--serif); font-size:16px;
  background:var(--gold-soft); color:var(--accent-ink);
}
.person__head h3{ font-size:17px; }
.person .field{ margin-bottom:18px; }
.person .field__label{ font-size:14px; margin-bottom:9px; }
.person .row--3{ grid-template-columns:1.3fr 1fr 1fr; gap:7px; }
.person .sel, .person .inp{ padding:11px 12px; font-size:14px; }
.person .sel{ padding-right:32px; }
.person .seg label{ padding:8px 6px; font-size:13.5px; }

/* 가운데 연결 표식 */
.pair-link{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:22px 0; color:var(--ink-faint);
}
.pair-link::before, .pair-link::after{ content:""; height:1px; flex:1; background:var(--hair); }
.pair-link span{ font-family:var(--serif); font-size:18px; color:var(--gold); }

@media (max-width:600px){
  .pair-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   계정 (login / register) — 좁은 중앙 카드
   ============================================================ */
.auth-page{ padding:54px 0 40px; }
.auth-card{
  max-width:420px; margin:0 auto;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow);
  padding:40px 36px 32px; position:relative; overflow:hidden;
}
.auth-card__bloom{
  position:absolute; left:50%; top:-90px; transform:translateX(-50%);
  width:280px; height:200px; border-radius:50%;
  background:radial-gradient(circle, var(--bloom-a) 0%, transparent 68%);
  filter:blur(34px); pointer-events:none;
}
.auth-card > *:not(.auth-card__bloom){ position:relative; z-index:1; }
.auth-head{ text-align:center; margin-bottom:28px; }
.auth-head .seal{
  width:46px; height:46px; margin:0 auto 16px;
  display:grid; place-items:center; border-radius:12px;
  background:var(--accent); color:var(--btn-fg);
  font-family:var(--serif); font-size:22px; box-shadow:var(--shadow);
}
.auth-head h1{ font-size:24px; margin-bottom:8px; }
.auth-head p{ font-size:13.5px; color:var(--ink-soft); margin:0; }

.auth-alt{
  margin-top:22px; text-align:center; font-size:13.5px; color:var(--ink-soft);
}
.auth-alt a{ color:var(--accent-ink); font-weight:500; }
.auth-divider{
  display:flex; align-items:center; gap:14px;
  margin:24px 0; color:var(--ink-faint); font-size:12px;
}
.auth-divider::before, .auth-divider::after{ content:""; height:1px; flex:1; background:var(--hair); }
.social{ display:flex; flex-direction:column; gap:10px; }
.social a{
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:13px; border-radius:var(--r-sm); font-size:14px; font-weight:500;
  border:1px solid var(--line); background:var(--bg); color:var(--ink);
  transition:.2s var(--ease);
}
.social a:hover{ border-color:var(--gold); }
.auth-meta{ margin-top:18px; text-align:center; font-size:11.5px; color:var(--ink-faint); line-height:1.7; }
.auth-meta a{ color:var(--ink-soft); text-decoration:underline; }

/* ============================================================
   마이페이지 (me) — 저장한 사주 목록
   ============================================================ */
.me-hero{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow);
  padding:28px 30px; margin-bottom:26px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.me-hero__bloom{
  position:absolute; right:-50px; top:-70px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, var(--bloom-a) 0%, transparent 68%); filter:blur(30px); pointer-events:none;
}
.me-hero__av{
  width:60px; height:60px; flex:none; border-radius:50%;
  display:grid; place-items:center; font-family:var(--serif); font-size:24px;
  background:var(--gold-soft); color:var(--accent-ink); border:1px solid var(--line);
  position:relative; z-index:1;
}
.me-hero__info{ position:relative; z-index:1; flex:1; min-width:0; }
.me-hero__info h1{ font-size:21px; margin-bottom:4px; }
.me-hero__info p{ font-size:13.5px; color:var(--ink-soft); margin:0; }
.me-hero__clover{
  position:relative; z-index:1; text-align:right;
}
.me-hero__clover .amt{ font-family:var(--serif); font-size:24px; color:var(--ink); display:block; }
.me-hero__clover .amt b{ color:var(--gold); }
.me-hero__clover a{ font-size:12.5px; color:var(--accent-ink); }

.me-tabs{ display:flex; gap:24px; border-bottom:1px solid var(--line); margin-bottom:22px; }
.me-tabs a{
  padding:0 2px 14px; font-size:15px; color:var(--ink-soft);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.me-tabs a.active{ color:var(--ink); border-color:var(--accent); font-weight:500; }

.saved-list{ display:flex; flex-direction:column; gap:12px; }
.saved-row{
  display:flex; align-items:center; gap:16px;
  padding:18px 20px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--paper); box-shadow:var(--shadow); transition:.22s var(--ease);
}
.saved-row:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lift); border-color:var(--gold); }
.saved-row__glyph{
  width:46px; height:46px; flex:none; border-radius:11px;
  display:grid; place-items:center; font-family:var(--serif); font-size:19px;
  background:var(--gold-soft); color:var(--accent-ink);
}
.saved-row__body{ flex:1; min-width:0; }
.saved-row__body h3{ font-size:16px; margin-bottom:3px; }
.saved-row__meta{ font-size:12.5px; color:var(--ink-faint); display:flex; gap:10px; flex-wrap:wrap; }
.saved-row__meta .tag{ color:var(--gold); }
.saved-row__go{ flex:none; font-size:14px; color:var(--ink-soft); display:flex; align-items:center; gap:6px; }

.me-empty{ text-align:center; padding:50px 20px; color:var(--ink-soft); }
.me-empty p{ margin:0 0 18px; font-size:14.5px; }

@media (max-width:560px){
  .me-hero{ padding:22px; }
  .me-hero__clover{ text-align:left; width:100%; border-top:1px solid var(--hair); padding-top:14px; }
  .auth-card{ padding:32px 24px 26px; }
}

/* ============================================================
   결제창 (pay) — 주문 확인 영수증
   ============================================================ */
.receipt{ margin:6px 0 4px; }
.receipt__row{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 0; border-bottom:1px solid var(--hair);
  font-size:14.5px; color:var(--ink-soft);
}
.receipt__row .v{ color:var(--ink); font-weight:500; }
.receipt__row.product{ padding-top:4px; }
.receipt__row.product .v{
  display:flex; align-items:center; gap:9px; font-family:var(--serif); font-size:16px;
}
.receipt__row.product .glyph{
  width:34px; height:34px; border-radius:9px; flex:none;
  display:grid; place-items:center; background:var(--gold-soft); color:var(--accent-ink); font-size:15px;
}
.receipt__total{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:18px; padding-top:18px; border-top:1.5px solid var(--line);
}
.receipt__total .lbl{ font-size:15px; color:var(--ink); }
.receipt__total .amt{ font-family:var(--serif); font-size:26px; color:var(--accent-ink); }
.pay-secure{
  display:flex; align-items:center; gap:8px; justify-content:center;
  margin-top:22px; font-size:12px; color:var(--ink-faint);
}

/* ============================================================
   문서 페이지 (about / terms / privacy / refund) — 본문 읽기
   ============================================================ */
.doc-page{ padding:46px 0 30px; }
.doc-head{ text-align:center; margin-bottom:36px; }
.doc-head h1{ font-size:clamp(26px,5vw,36px); margin:12px 0 10px; }
.doc-head .updated{ font-size:12.5px; color:var(--ink-faint); letter-spacing:.04em; }

.doc{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow);
  padding:44px 48px;
}
.doc__toc{
  margin:0 0 30px; padding:20px 24px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm);
}
.doc__toc b{ font-family:var(--serif); font-size:13px; color:var(--gold); letter-spacing:.1em; display:block; margin-bottom:10px; }
.doc__toc ol{ margin:0; padding-left:0; list-style:none; columns:2; column-gap:30px; }
.doc__toc li{ font-size:13.5px; color:var(--ink-soft); margin-bottom:6px; }
.doc__toc a:hover{ color:var(--ink); }

.doc h2{
  font-size:19px; margin:34px 0 12px; padding-top:8px;
  display:flex; align-items:baseline; gap:10px;
}
.doc h2:first-of-type{ margin-top:0; }
.doc h2 .num{ font-family:var(--serif); font-size:14px; color:var(--gold); }
.doc h3{ font-size:15.5px; margin:18px 0 8px; color:var(--ink); }
.doc p, .doc li{ font-size:14.5px; line-height:1.92; color:var(--ink); }
.doc p{ margin:0 0 12px; }
.doc ul, .doc ol.body{ margin:0 0 14px; padding-left:20px; }
.doc li{ margin-bottom:6px; }
.doc .muted{ color:var(--ink-soft); }
.doc hr{ border:0; border-top:1px solid var(--hair); margin:26px 0; }
.doc__placeholder{
  border:1px dashed var(--line); border-radius:var(--r-sm);
  padding:16px 18px; color:var(--ink-faint); font-size:13px;
  background:var(--bg); margin:0 0 14px;
}
.doc__table{ width:100%; border-collapse:collapse; margin:8px 0 16px; font-size:13.5px; }
.doc__table th, .doc__table td{ border:1px solid var(--line); padding:10px 12px; text-align:left; }
.doc__table th{ background:var(--bg); font-weight:600; color:var(--ink-soft); font-family:var(--serif); }

/* 회사소개 인트로 */
.about-intro{ text-align:center; max-width:30em; margin:0 auto 8px; }
.about-intro p{ font-size:16px; line-height:2; color:var(--ink-soft); }
.about-values{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:30px; }
.about-value{ text-align:center; padding:24px 18px; border:1px solid var(--line); border-radius:var(--r); background:var(--paper); box-shadow:var(--shadow); }
.about-value .mark{ font-family:var(--serif); font-size:26px; color:var(--accent-ink); margin-bottom:12px; }
.about-value h3{ font-size:16px; margin-bottom:6px; }
.about-value p{ font-size:13px; color:var(--ink-soft); margin:0; }

@media (max-width:560px){
  .doc{ padding:30px 24px; }
  .doc__toc ol{ columns:1; }
  .about-values{ grid-template-columns:1fr; }
}

/* ============================================================
   카테고리 (category) — 상품 모아보기
   ============================================================ */
.cat-hero{
  text-align:center; padding:48px 0 30px; position:relative; overflow:hidden;
}
.cat-hero h1{ font-size:clamp(28px,5.4vw,40px); margin:12px 0 12px; }
.cat-hero p{ font-size:15px; color:var(--ink-soft); max-width:30em; margin:0 auto; }
.cat-filter{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  margin:0 0 28px;
}
.chip{
  cursor:pointer; padding:9px 18px; border-radius:999px;
  border:1px solid var(--line); background:var(--paper);
  font-size:14px; color:var(--ink-soft); transition:.2s var(--ease);
}
.chip:hover{ border-color:var(--gold); color:var(--ink); }
.chip.active{ background:var(--accent); color:var(--btn-fg); border-color:var(--accent); }
.prods--4{ grid-template-columns:repeat(4,1fr); }
.card.is-hidden{ display:none; }

@media (max-width:760px){ .prods--4{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .prods--4{ grid-template-columns:1fr; } }

/* ============================================================
   공유 페이지 (share_result / share_match) — 링크로 들어온 화면
   ============================================================ */
.share-wrap{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:40px 22px; position:relative; overflow:hidden; text-align:center;
}
.share-wrap::before, .share-wrap::after{
  content:""; position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; z-index:0;
}
.share-wrap::before{ width:380px; height:340px; top:-60px; left:50%; transform:translateX(-60%); background:radial-gradient(circle, var(--bloom-a) 0%, transparent 70%); }
.share-wrap::after{ width:300px; height:280px; bottom:-40px; right:6%; background:radial-gradient(circle, var(--bloom-b) 0%, transparent 70%); }
.share-brand{
  position:relative; z-index:1; font-family:var(--serif); font-size:18px; letter-spacing:.06em;
  display:flex; align-items:center; gap:8px; color:var(--ink-soft); margin-bottom:26px;
}
.share-brand .seal{ width:24px; height:24px; border-radius:6px; background:var(--accent); color:var(--btn-fg); display:grid; place-items:center; font-size:12px; }
.share-card{
  position:relative; z-index:1; width:100%; max-width:440px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lift); padding:40px 34px 32px;
}
.share-card .eyebrow{ justify-content:center; }
.share-card h1{ font-size:clamp(24px,5.4vw,30px); margin:10px 0 18px; line-height:1.4; }
.share-keywords{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:22px; }
.share-card .teaser{
  font-size:15px; line-height:1.95; color:var(--ink-soft); margin:0 0 8px;
  position:relative;
}
.share-card .teaser .fade{
  display:block; filter:blur(4px); opacity:.5; margin-top:4px; user-select:none;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent); mask-image:linear-gradient(180deg,#000,transparent);
}
.share-divider{ height:1px; background:var(--hair); margin:24px 0; }
.share-card .btn{ width:100%; padding:15px; }
.share-actions{ display:flex; gap:10px; justify-content:center; margin-top:16px; }
.share-actions button{
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 16px; border-radius:999px; font-size:13px; color:var(--ink-soft);
  background:var(--bg); border:1px solid var(--line); transition:.2s var(--ease);
}
.share-actions button:hover{ border-color:var(--gold); color:var(--ink); }
.share-foot{ position:relative; z-index:1; margin-top:30px; font-size:12px; color:var(--ink-faint); }
.share-foot a{ color:var(--ink-soft); text-decoration:underline; }

/* 궁합 점수(매치) */
.match-faces{ display:flex; align-items:center; justify-content:center; gap:18px; margin:6px 0 18px; }
.match-face{
  width:64px; height:64px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-family:var(--serif); font-size:24px;
  background:var(--gold-soft); color:var(--accent-ink); border:1px solid var(--line);
}
.match-link{ font-family:var(--serif); font-size:22px; color:var(--gold); }
.match-score{ font-family:var(--serif); font-size:clamp(40px,11vw,56px); color:var(--accent-ink); line-height:1; margin:4px 0 6px; }
.match-score small{ font-size:22px; color:var(--ink-soft); }
.match-label{ font-size:14px; color:var(--ink-soft); margin-bottom:4px; }

/* ============================================================
   결과 변형들 — 점수 막대 / 12개월 / 이름 후보 / 택일 날짜
   ============================================================ */
/* 점수 막대 (오늘의 운세 등) */
.scorebars{ display:flex; flex-direction:column; gap:16px; }
.scorebar{ display:grid; grid-template-columns:64px 1fr 36px; align-items:center; gap:14px; }
.scorebar .lbl{ font-family:var(--serif); font-size:14.5px; color:var(--ink); }
.scorebar .track{ display:block; height:8px; border-radius:999px; background:var(--bg); border:1px solid var(--line); overflow:hidden; }
.scorebar .fill{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--gold), var(--accent)); min-width:6px; transition:width .6s var(--ease); }
.scorebar .pct{ font-size:13px; color:var(--ink-soft); text-align:right; font-variant-numeric:tabular-nums; }

/* 큰 총운 헤더 */
.fortune-top{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.fortune-grade{
  width:96px; height:96px; flex:none; border-radius:50%;
  display:grid; place-items:center; font-family:var(--serif); font-size:40px;
  color:var(--accent-ink); background:var(--gold-soft); border:1px solid var(--line);
}
.fortune-top .body{ flex:1; min-width:200px; }
.fortune-top .body h3{ font-size:20px; margin-bottom:6px; }
.fortune-top .body p{ font-size:14.5px; color:var(--ink-soft); margin:0; }

/* 12개월 흐름 스트립 */
.month-strip{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.month{
  text-align:center; padding:14px 6px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--paper); transition:.2s var(--ease);
}
.month:hover{ border-color:var(--gold); transform:translateY(-2px); }
.month .m{ font-family:var(--serif); font-size:15px; color:var(--ink); }
.month .dot{ width:10px; height:10px; border-radius:50%; margin:8px auto 0; }
.month .t{ font-size:11px; color:var(--ink-faint); margin-top:6px; }
.lvl-good{ background:#4d6b53; } .lvl-mid{ background:var(--gold); } .lvl-low{ background:#9a5a4e; }

/* 이름 후보 (작명) */
.name-cands{ display:flex; flex-direction:column; gap:12px; }
.name-cand{
  display:flex; align-items:center; gap:18px; padding:20px 22px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper); box-shadow:var(--shadow);
  transition:.2s var(--ease);
}
.name-cand:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lift); border-color:var(--gold); }
.name-cand__han{
  font-family:var(--serif); font-size:30px; color:var(--accent-ink); flex:none;
  display:flex; flex-direction:column; align-items:center; line-height:1.15;
}
.name-cand__han .ko{ font-size:13px; color:var(--ink-soft); margin-top:4px; }
.name-cand__body{ flex:1; min-width:0; }
.name-cand__body h4{ font-size:16px; font-family:var(--serif); margin-bottom:4px; }
.name-cand__body p{ font-size:13px; color:var(--ink-soft); margin:0; }
.name-cand__score{ flex:none; text-align:center; }
.name-cand__score b{ font-family:var(--serif); font-size:22px; color:var(--gold); }
.name-cand__score span{ display:block; font-size:11px; color:var(--ink-faint); }

/* 택일 날짜 카드 */
.date-list{ display:flex; flex-direction:column; gap:12px; }
.date-card{
  display:flex; align-items:center; gap:18px; padding:18px 22px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper); box-shadow:var(--shadow);
}
.date-card.best{ border-color:color-mix(in srgb,var(--gold) 50%, var(--line)); background:var(--gold-soft); }
.date-card__day{
  flex:none; text-align:center; min-width:64px;
  border-right:1px solid var(--hair); padding-right:18px;
}
.date-card__day .d{ font-family:var(--serif); font-size:26px; color:var(--accent-ink); line-height:1; }
.date-card__day .mo{ font-size:12px; color:var(--ink-soft); margin-top:4px; }
.date-card__body{ flex:1; min-width:0; }
.date-card__body h4{ font-size:15.5px; margin-bottom:4px; display:flex; align-items:center; gap:8px; }
.date-card__body p{ font-size:13px; color:var(--ink-soft); margin:0; }

@media (max-width:560px){
  .month-strip{ grid-template-columns:repeat(4,1fr); }
  .name-cand, .date-card{ padding:16px; gap:14px; }
}

/* 결제 진행 오버레이 (로딩 재사용 + 텍스트만 다름) */

/* ===== 만세력 상세(지장간·운성·신살·오행·대운) — 새 디자인 보강 ===== */
.manse__warn{font-size:13px;color:var(--ink-soft);background:var(--gold-soft);border-radius:10px;padding:10px 12px;margin:0 0 14px}
.manse-detail{position:relative;margin-top:18px}
.manse-tbl{width:100%;border-collapse:collapse;font-size:14px}
.manse-tbl th{text-align:left;color:var(--ink-faint);font-weight:500;padding:8px 10px;width:78px;white-space:nowrap}
.manse-tbl td{text-align:center;padding:8px 6px;color:var(--ink);border-top:1px solid var(--line)}
.manse-detail.is-locked .manse-tbl{filter:blur(6px);opacity:.55;user-select:none;pointer-events:none}
.daewoon.is-locked .daewoon__strip{filter:blur(6px);opacity:.55;user-select:none;pointer-events:none}
.manse-detail__lock{font-size:13px;color:var(--gold);font-weight:600;text-align:center;margin:10px 0}
.ohaeng{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.ohaeng__title,.daewoon__title{font-family:"Noto Serif KR",serif;font-size:15px;color:var(--ink);margin-bottom:12px}
.ohaeng__bars{display:flex;flex-direction:column;gap:8px}
.ohbar{display:flex;align-items:center;gap:10px}
.ohbar__l{width:22px;font-size:13px;color:var(--ink-soft);text-align:center}
.ohbar__t{flex:1;height:9px;border-radius:6px;background:var(--gold-soft);overflow:hidden}
.ohbar__t i{display:block;height:100%;border-radius:6px}
.ohbar__v{width:42px;text-align:right;font-size:13px;color:var(--ink-soft)}
.ohaeng__strength{margin-top:14px;font-size:14px;color:var(--ink-soft)}
.ohaeng__strength b{color:var(--ink);font-size:16px;margin:0 4px}
.ohaeng__strength .sl{display:inline-block;margin-left:6px;padding:2px 10px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px}
.daewoon{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);position:relative}
.daewoon__strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.dw{flex:0 0 auto;min-width:56px;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:8px 6px}
.dw b{display:block;font-size:13px;color:var(--gold-deep);margin-bottom:2px}
.dw span{font-size:14px;color:var(--ink)}

/* ===== 신살 풀이 ===== */
.sinsal__h{font-family:"Noto Serif KR",serif;font-size:20px;color:var(--ink);margin-bottom:18px}
.sinsal__group{margin-bottom:22px}
.sinsal__label{font-size:14px;font-weight:600;margin-bottom:12px;padding-left:10px;border-left:3px solid var(--gold)}
.sinsal__label.gil{color:var(--accent-ink)}
.sinsal__label.hyung{color:#b06a4a}
.sinsal-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:10px}
.sinsal-card.gil{border-left:3px solid #5b8c5a}
.sinsal-card.hyung{border-left:3px solid #c25a4a}
.sinsal-card__top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.sinsal-card__top b{font-size:16px;color:var(--ink)}
.sinsal-card__top .hanja{color:var(--ink-faint);font-size:14px}
.sinsal-card__top .where{margin-left:auto;font-size:12px;color:var(--ink-faint);background:var(--gold-soft);padding:2px 10px;border-radius:999px}
.sinsal-card p{color:var(--ink-soft);font-size:14px;line-height:1.7;margin:4px 0 0}
.sinsal-fix{color:var(--ink) !important;background:var(--gold-soft);border-radius:10px;padding:8px 12px;margin-top:10px !important}

/* ===== 공유 카드 ===== */
.sharewrap{margin:28px 0;text-align:center}
.sharecard{position:relative;overflow:hidden;isolation:isolate;max-width:340px;margin:0 auto 16px;background:#1c1a16;border:1px solid rgba(180,150,90,.42);border-radius:20px;padding:0;box-shadow:0 14px 40px rgba(40,30,10,.3)}
.sc-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;background-color:#1c1a16;transform:scale(1.02)}
.sc-veil{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 86% 60% at 50% 50%, rgba(14,11,7,.42), rgba(14,11,7,0) 78%),linear-gradient(180deg, rgba(18,14,9,.5) 0%, rgba(18,14,9,.18) 38%, rgba(18,14,9,.68) 100%)}
.sc-content{position:relative;z-index:2;padding:28px 22px;text-align:center}
.sc-word{font-family:"Noto Serif KR",serif;color:#f0d79a;letter-spacing:.2em;font-size:13px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.sc-char{width:92px;height:92px;object-fit:contain;margin:14px auto 8px;display:block;filter:drop-shadow(0 4px 12px rgba(0,0,0,.55))}
.sc-eyebrow{font-size:12px;color:#fbf2dd;letter-spacing:.05em;text-shadow:0 1px 5px rgba(0,0,0,.7)}
.sc-line{font-family:"Noto Serif KR",serif;font-size:18px;color:#fff;line-height:1.6;margin:10px 0 18px;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.82),0 0 2px rgba(0,0,0,.55);word-break:keep-all}
.sc-cta{display:flex;justify-content:space-between;font-size:12px;color:#fbf2dd;border-top:1px solid rgba(240,215,154,.28);padding-top:12px;text-shadow:0 1px 5px rgba(0,0,0,.65)}
.sharebtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.sharebtns button{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:10px 20px;color:var(--ink);cursor:pointer;font-size:14px}
.sharebtns button:hover{border-color:var(--gold)}
.sharelink{max-width:420px;margin:14px auto 0;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px}
.sharelink-lbl{font-size:13px;color:var(--ink-soft);margin:0 0 8px}
.sharelink-row{display:flex;gap:8px}
.sharelink-url{flex:1;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;background:var(--bg);color:var(--ink)}
.sharelink-row button{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:8px 16px;cursor:pointer;font-size:13px}
.sharelink-row button.copied{background:#5b8c5a}
.sharelink-preview{display:inline-block;margin-top:10px;font-size:13px;color:var(--gold)}
.sharehint{font-size:12px;color:var(--ink-faint);max-width:440px;margin:14px auto 0;line-height:1.6}
.consult-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin:24px 0}
.consult-cta small{display:block;color:var(--ink-soft);font-size:13px;margin-top:4px}

/* 충전 안내 메시지 */
.charge-msg{text-align:center;border-radius:12px;padding:12px 16px;margin:0 auto 16px;max-width:560px;font-size:14px}
.charge-msg.ok{background:var(--gold-soft);color:var(--accent-ink)}
.charge-msg.warn{background:rgba(176,90,74,.12);color:#b05a4a}

/* ===== 약관·정책 문서(.legal) — 새 디자인 톤 ===== */
.legal{max-width:760px;margin:0 auto;padding:8px 0 40px}
.legal h2{font-family:"Noto Serif KR",serif;font-size:28px;color:var(--ink);text-align:center;margin:8px 0 6px}
.legal .ldate{text-align:center;color:var(--ink-faint);font-size:13px;margin-bottom:30px}
.legal h3{font-family:"Noto Serif KR",serif;font-size:17px;color:var(--accent-ink);margin:26px 0 8px;padding-top:18px;border-top:1px solid var(--line)}
.legal h3:first-of-type{border-top:none;padding-top:0}
.legal p{color:var(--ink-soft);font-size:14.5px;line-height:1.85;margin:0 0 8px}
.legal p b{color:var(--ink)}
.legal a{color:var(--gold)}
.legal .hint{font-size:13px;color:var(--ink-faint);margin-top:8px}

/* ===== 천생연분 초상 ===== */
.soulmate-portrait{text-align:center;margin:0 auto 24px;max-width:420px}
.soulmate-portrait>img{width:220px;height:220px;object-fit:cover;border-radius:20px;border:1px solid var(--line);display:block;margin-left:auto;margin-right:auto}
.portrait-ph{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:28px 22px}
.portrait-ph img{width:90px;height:90px;opacity:.9}
.portrait-ph p{color:var(--ink-soft);font-size:14px;margin:10px 0 0;line-height:1.7}
.portrait-ph.locked p b{color:var(--gold)}
.soulmate-oneline{font-family:"Noto Serif KR",serif;font-size:18px;color:var(--ink);margin-top:16px;line-height:1.6}

/* ===== 올해운세 월별 상세 ===== */
.month-detail{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:18px}
.md{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.md.fav{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold-soft)}
.md__top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.md__top b{font-size:15px;color:var(--ink)}
.md__top span{font-size:12px;color:var(--ink-faint)}
.md p{font-size:13px;color:var(--ink-soft);line-height:1.6;margin:0}
.locked-strip{filter:blur(2px);opacity:.6}
.yp-bal{font-size:13px;color:var(--ink-soft);margin-top:10px}
.yp-bal a{color:var(--gold)}

/* ===== 개운법 카드 ===== */
.gaeun__reason{text-align:center;color:var(--ink-soft);font-size:14.5px;line-height:1.7;max-width:640px;margin:0 auto 20px}
.gaeun-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.gaeun-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center}
.gaeun-card__elem{font-family:"Noto Serif KR",serif;font-size:26px;color:var(--accent-ink);margin-bottom:10px}
.gaeun-card__row{font-size:13px;color:var(--ink-soft);padding:3px 0}
.gaeun-card__row span{display:inline-block;width:36px;color:var(--ink-faint)}

/* ===== 반려동물 점수 ===== */
.petscore{font-size:15px;color:var(--ink-soft)}
.petscore b{font-size:32px;color:var(--accent-ink);margin:0 4px}
.petbadge{display:inline-block;margin-top:8px;padding:4px 16px;border-radius:999px;background:var(--accent);color:#fff;font-size:13px}
/* ===== 작명 수리 ===== */
.suri{margin-top:14px;text-align:left}
.suri__row{border-top:1px solid var(--line);padding:10px 0}
.suri__name{font-family:"Noto Serif KR",serif;font-size:16px;color:var(--ink)}
.suri__name small{color:var(--ink-faint);font-size:12px;font-family:var(--sans,inherit)}
.suri__gyeok{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.suri__gyeok .g{font-size:12px;padding:2px 8px;border-radius:6px;background:var(--gold-soft);color:var(--ink-soft)}
.suri__gyeok .g.대길,.suri__gyeok .g.길,.suri__gyeok .g.all{background:#e7efe5;color:#4d6b53}
.suri__gyeok .g.흉,.suri__gyeok .g.대흉{background:#f3e2dd;color:#9a5a4e}
.suri__def{font-size:13px;color:var(--ink-soft)}
/* ===== 택일 ===== */
.gua8{display:flex;flex-wrap:wrap;gap:6px}
.gua-cell{font-size:13px;padding:5px 12px;border-radius:8px;background:var(--gold-soft);color:var(--ink-soft)}
.gua-cell.g{background:#e7efe5;color:#4d6b53}.gua-cell.b{background:#f3e2dd;color:#9a5a4e}
.daylist{display:flex;flex-direction:column;gap:8px}
.dayrow{display:grid;grid-template-columns:84px 1fr;gap:6px 12px;padding:12px 14px;border-radius:12px;background:var(--paper);border:1px solid var(--line)}
.dayrow.good{border-left:3px solid #5b8c5a}.dayrow.bad{border-left:3px solid #c25a4a}
.dayrow__l b{font-size:16px;color:var(--ink)}.dayrow__l .wd{font-size:12px;color:var(--ink-faint)}
.dayrow__m{font-size:14px;color:var(--ink)}.dayrow__m small{color:var(--ink-faint);font-size:12px}
.dayrow__r{grid-column:1/-1;font-size:13px;color:var(--ink-soft)}

/* ===== 오늘의 운세 ===== */
.fortune-top{display:flex;gap:16px;align-items:flex-start}
.fortune-grade{flex:0 0 auto;width:56px;height:56px;border-radius:14px;background:var(--accent);color:#fff;font-family:"Noto Serif KR",serif;font-size:26px;display:flex;align-items:center;justify-content:center}
.fortune-top .body h3{font-family:"Noto Serif KR",serif;font-size:17px;color:var(--ink);margin:0 0 6px}
.fortune-top .body p{color:var(--ink-soft);font-size:14.5px;line-height:1.8;margin:0}
.luck-table{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.luck-cell{text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 6px}
.luck-cell__k{display:block;font-size:12px;color:var(--ink-faint);margin-bottom:4px}
.luck-cell b{font-size:16px;color:var(--ink)}
.luck-cell__g{display:block;font-size:12px;color:var(--gold-deep);margin-top:2px}
.lucky-row{display:flex;gap:10px;flex-wrap:wrap}
.lucky-chip{flex:1;min-width:90px;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px}
.lucky-chip span{display:block;font-size:12px;color:var(--ink-faint);margin-bottom:4px}
.lucky-chip b{font-size:15px;color:var(--ink)}

/* ===== 선택 칩 ===== */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0}
.chip span{display:inline-block;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);font-size:14px;transition:.15s}
.chip input:checked+span{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ===== 상담 Q&A ===== */
.qa{margin-bottom:16px}
.qa__q,.qa__a{display:flex;gap:10px;margin-bottom:8px}
.qa__who{flex:0 0 auto;width:42px;font-size:12px;color:var(--ink-faint);padding-top:10px}
.qa__q p{flex:1;background:var(--accent);color:#fff;border-radius:14px 14px 14px 4px;padding:12px 16px;margin:0;line-height:1.7}
.qa__a>div{flex:1;background:var(--paper);border:1px solid var(--line);border-radius:14px 14px 4px 14px;padding:12px 16px}
.qa__a p{margin:0 0 8px;color:var(--ink-soft);line-height:1.8}
.qa__a p:last-child{margin-bottom:0}
.back-link{color:var(--gold)}

/* ===== 띠별 초상 ===== */
.zodiac-portrait{text-align:center;margin:0 auto 22px}
.zodiac-portrait img{width:150px;height:150px;object-fit:contain}

/* ===== 심리테스트(JS 렌더) ===== */
.quizroot{max-width:600px;margin:0 auto;transition:opacity .16s;min-height:50vh}
.qbg-calm,.qbg-warm,.qbg-cool,.qbg-deep{border-radius:20px;padding:8px}
.qintro,.qcard,.qresult{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:28px 24px;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.05)}
.qeyebrow,.qr-eyebrow{font-family:"Noto Serif KR",serif;color:var(--gold);letter-spacing:.1em;font-size:13px;margin-bottom:10px}
.qintro-text,.qr-desc{color:var(--ink-soft);line-height:1.8;font-size:15px;margin:14px 0}
.qprog{font-size:13px;color:var(--ink-faint);margin-bottom:14px}
.qtext,.qr-title{font-family:"Noto Serif KR",serif;font-size:20px;color:var(--ink);line-height:1.6;margin:8px 0 20px}
.qopts{display:flex;flex-direction:column;gap:10px}
.qopt{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px 18px;color:var(--ink);font-size:15px;cursor:pointer;transition:.15s;text-align:left}
.qopt:hover{border-color:var(--gold);background:var(--gold-soft)}
.qscene-img{max-width:100%;border-radius:14px;margin-bottom:16px}.qscene-img.sm{max-width:200px}
.qr-sub{color:var(--ink-soft);font-size:14px}
.qr-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.qr-actions a,.qmore{display:inline-block;padding:12px 22px;border-radius:999px;border:1px solid var(--line);color:var(--ink);background:var(--paper);cursor:pointer;text-decoration:none;font-size:14px}
.qr-actions a:hover{border-color:var(--gold)}
.qtags{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:12px 0}
.qtag{font-size:12px;padding:3px 10px;border-radius:999px;background:var(--gold-soft);color:var(--ink-soft)}
.qcoupang{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:14px;display:flex;gap:12px;align-items:center}
.qcoupang-i{font-size:28px}.qfriend,.qhint,.qdisc{font-size:13px;color:var(--ink-faint);margin-top:12px}
.qdeep{margin-top:16px}

/* ===== 잠금: 모자이크 위 자물쇠 → 팝업 모달 (전역) ===== */
.lockwrap{ position:relative; min-height:200px; }
.lockover{ display:none; }                 /* 내용은 숨기고 모달에서 보여줌 */
.lock-trigger{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:2; width:66px; height:66px; border-radius:50%;
  background:var(--paper); border:1px solid var(--line);
  box-shadow:var(--shadow-lift); font-size:25px; cursor:pointer;
  display:grid; place-items:center; color:var(--gold);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.lock-trigger:hover{ transform:translate(-50%,-50%) scale(1.07); box-shadow:var(--shadow-lift); }
.lock-trigger::after{
  content:"눌러서 열기"; position:absolute; top:calc(100% + 8px); left:50%;
  transform:translateX(-50%); white-space:nowrap;
  font-size:12px; color:var(--ink-faint); letter-spacing:.02em;
}
.lock-modal{ position:fixed; inset:0; z-index:1000; display:none; }
.lock-modal.on{ display:block; }
.lock-modal__back{ position:absolute; inset:0; background:rgba(18,21,26,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.lock-modal__panel{
  position:relative; z-index:1; width:min(420px, calc(100vw - 36px));
  margin:16vh auto 0; background:var(--paper); border:1px solid var(--line);
  border-radius:22px; padding:34px 28px 30px; text-align:center;
  box-shadow:var(--shadow-lift); animation:lockpop .26s var(--ease);
}
@keyframes lockpop{ from{ transform:translateY(14px); opacity:0 } to{ transform:none; opacity:1 } }
.lock-modal__close{
  position:absolute; top:12px; right:14px; width:32px; height:32px; border-radius:50%;
  border:none; background:transparent; color:var(--ink-faint); font-size:20px; cursor:pointer;
}
.lock-modal__close:hover{ color:var(--ink); }
.lock-modal__body{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.lock-modal__body .lockover__icon{
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  font-size:24px; background:var(--gold-soft); border:1px solid var(--line); color:var(--gold);
}
.lock-modal__body h4{ font-family:var(--serif); font-size:20px; }
.lock-modal__body p{ font-size:14px; color:var(--ink-soft); margin:0; line-height:1.7; max-width:30em; }
.lock-modal__body form{ width:100%; margin-top:4px; }
.lock-modal__body .unlock-btn{ width:100%; justify-content:center; }
.lock-modal__body .yp-bal{ font-size:13px; color:var(--ink-soft); margin-top:2px; }

/* ===== 해금 완료 토스트(열린 자물쇠) ===== */
.unlock-toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(16px);
  z-index:1100; background:var(--ink); color:var(--paper);
  padding:13px 22px; border-radius:999px; font-size:14px; box-shadow:var(--shadow-lift);
  display:flex; align-items:center; gap:8px; opacity:0; transition:opacity .35s, transform .35s var(--ease);
  pointer-events:none; max-width:calc(100vw - 32px);
}
.unlock-toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }
.unlock-toast span{ font-size:17px; }

/* ============================================================
   동양 모티프 — 달 위상 · 간지 흩뿌림 · 찢긴 한지 · 띠 캐릭터
   (이미지 5 카드형 + 이미지 7 간지 무드에서 추출)
   ============================================================ */

/* 달 위상 ( ◐ ● ◑ ) — 브랜드 심볼 */
.moons{display:flex;gap:9px;justify-content:center;align-items:center;margin:0 0 16px}
.moons i{display:block;width:14px;height:14px;border-radius:50%;border:2px solid var(--gold);position:relative;background:transparent}
.moons i.full{background:var(--gold)}
.moons i.left::after,.moons i.right::after{content:"";position:absolute;top:-2px;width:14px;height:14px;border-radius:50%;background:var(--bg)}
.moons i.left::after{left:5px}
.moons i.right::after{right:5px}

/* 간지 한자 흩뿌림 배경 레이어 (이미지 7) */
.hanja-scatter{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;
  font-family:var(--serif);color:var(--hanja);font-size:30px;line-height:1;user-select:none}
.hanja-scatter span{position:absolute;display:block}

/* 찢긴 한지 가장자리 */
.deckle-top{position:relative}
.deckle-top::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;
  background:repeating-linear-gradient(90deg,transparent 0 5px,var(--paper) 5px 11px);opacity:.8;z-index:1}

/* 명조 구분선 — 가운데 한 글자 점 */
.ink-divider{display:flex;align-items:center;gap:14px;margin:30px auto;max-width:var(--max)}
.ink-divider .ln{flex:1;height:1px;background:var(--line)}
.ink-divider .dot{font-family:var(--serif);color:var(--gold);font-size:14px;opacity:.8}

/* 홈 띠 그리드 — 카드형 + 캐릭터 (이미지 5 무드) */
.zo{position:relative;overflow:hidden}
.zo__img{width:46px;height:46px;object-fit:contain;margin:0 auto 4px;display:block;
  filter:drop-shadow(0 3px 8px rgba(29,49,72,.14))}
@media (prefers-color-scheme: dark){ .zo__img{filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))} }

/* ── 시간대 천체: 노을 해 / 밤 보름달 (홈 히어로, 이미지 외부 0) ── */
.hero__sky{position:absolute;top:20px;right:6%;width:62px;height:62px;pointer-events:none;z-index:0}
.hero__sky span{position:absolute;inset:0;border-radius:50%;opacity:0;transition:opacity .8s var(--ease)}
.hero__sky .sun{background:radial-gradient(circle at 50% 45%, var(--terra), var(--gold));
  box-shadow:0 0 46px 12px var(--terra-soft)}
.hero__sky .moon{background:radial-gradient(circle at 38% 36%, #f5f0e3, #cdbf9e);
  box-shadow:0 0 40px 10px rgba(203,171,99,.28)}
html.t-dusk .hero__sky .sun{opacity:.9}
html.t-night .hero__sky .moon{opacity:.92}
/* 밤엔 히어로 먹번짐을 등불 글로우로 한 겹 더 */
html.t-night .hero::after{content:"";position:absolute;right:8%;bottom:14%;width:120px;height:120px;
  border-radius:50%;background:var(--glow,transparent);filter:blur(30px);pointer-events:none;z-index:0}

/* ============================================================
   편안한 동양 소품·분위기 (mask-image로 테마색 자동 추종, 외부이미지 0)
   ============================================================ */
.m-mask{ -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain; pointer-events:none }

/* 수묵 산수 실루엣 — 푸터 상단(전 페이지) */
.foot{position:relative}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:46px;transform:translateY(-100%);
  -webkit-mask:url(/static/motif/mountains.svg) no-repeat center bottom/100% 100%;
          mask:url(/static/motif/mountains.svg) no-repeat center bottom/100% 100%;
  background:var(--ink-faint);opacity:.16;pointer-events:none}

/* 향연(香煙) — 명조 구분선 가운데서 피어오름 */
.ink-divider .dot{position:relative}
.ink-divider .dot::after{content:"";position:absolute;left:50%;bottom:100%;width:18px;height:46px;
  transform:translateX(-50%);
  -webkit-mask:url(/static/motif/smoke.svg) no-repeat center/contain;
          mask:url(/static/motif/smoke.svg) no-repeat center/contain;
  background:var(--gold);opacity:.30}

/* 한지등 글로우 — 페이지에 아주 옅은 따뜻한 광원 한 점 */
body::after{content:"";position:fixed;right:-60px;top:24%;width:280px;height:280px;border-radius:50%;
  background:var(--glow,rgba(179,149,78,.08));filter:blur(60px);pointer-events:none;z-index:0}

/* 폼·결과 헤더 — 소품 박지 않음(분위기는 색/여백으로만) */
.form-head,.result-head{position:relative}

/* 소품 인라인 유틸 — 청자·향로·거북·두루마리(필요 곳에 포인트로) */
.prop{display:inline-block;vertical-align:middle;background:currentColor;color:var(--gold);opacity:.5}
.prop-jar{-webkit-mask:url(/static/motif/jar.svg) no-repeat center/contain;mask:url(/static/motif/jar.svg) no-repeat center/contain;width:30px;height:38px}
.prop-censer{-webkit-mask:url(/static/motif/censer.svg) no-repeat center/contain;mask:url(/static/motif/censer.svg) no-repeat center/contain;width:38px;height:38px}
.prop-turtle{-webkit-mask:url(/static/motif/turtle.svg) no-repeat center/contain;mask:url(/static/motif/turtle.svg) no-repeat center/contain;width:44px;height:30px}

/* 로딩 향연 */
.load-smoke{width:20px;height:50px;margin:0 auto 6px;background:var(--gold);opacity:.22;
  -webkit-mask:url(/static/motif/smoke.svg) no-repeat center/contain;mask:url(/static/motif/smoke.svg) no-repeat center/contain}

/* ============================================================
   로딩 오버레이 — 평소 숨김, 제출 시에만 (차분하게: 문구+향연)
   ============================================================ */
.loadwrap{position:fixed;inset:0;z-index:9999;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:var(--overlay,rgba(244,238,225,.94));backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  text-align:center;padding:24px}
.loadwrap.on{display:flex;animation:fadein .4s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.load-title{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--accent-ink);margin:0}
.load-sub{color:var(--ink-soft);font-size:13.5px;margin:6px 0 0}
.loadwrap .load-smoke{order:-1;margin:0 0 14px}

/* 로딩 캐릭터 — 1마리 페이드 교체 */
.load-one{width:108px;height:108px;object-fit:contain;margin:0 auto 2px;display:block;opacity:1;
  transition:opacity .36s ease;filter:drop-shadow(0 8px 18px rgba(29,49,72,.18))}
.loadwrap .load-smoke{order:0;margin:0 auto 12px}
.loadwrap{gap:0}

/* ============================================================
   구조 디자인 — 한지 패널 · 현판(懸板) 제목 · 족자(두루마리) 헤더
   ============================================================ */

/* 한지 질감 — 카드/종이 표면에 아주 옅은 섬유결 */
.rcard, .pkg, .form-card{ position:relative; }
.rcard::before, .form-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background-image:url(/static/motif/hanji.svg);
  background-size:180px 180px; opacity:.04; mix-blend-mode:multiply;
}
.rcard > *, .form-card > *:not(.form-card__bloom){ position:relative; z-index:1; }

/* 현판(懸板) 섹션 제목 — 인장(印章) 글리프 + 황동 밑줄 */
.rcard__head{ padding-bottom:13px; border-bottom:1px solid var(--line); position:relative; }
.rcard__head::after{
  content:""; position:absolute; left:0; bottom:-1px; width:46px; height:2px;
  background:var(--gold); border-radius:2px;
}
.rcard__glyph{
  background:var(--accent); color:var(--paper);
  border:1.5px solid var(--gold); border-radius:9px;
  box-shadow:0 2px 8px -3px rgba(29,49,72,.5);
}

/* 족자(두루마리) — 결과 헤더 상단에 가로 봉(棒), 양끝은 어두운 마개 */
.result-head{ padding-top:30px; }
.result-head::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(460px,84%); height:8px; border-radius:5px;
  background:linear-gradient(90deg,#8a6f37 0 16px, var(--gold) 16px calc(100% - 16px), #8a6f37 calc(100% - 16px));
  box-shadow:0 1px 3px rgba(0,0,0,.22);
}

/* ============================================================
   Design 시안 이식 — 나경(羅盤) 휠 · 한자 필드 · 족자 봉
   ============================================================ */
.hero{ position:relative; overflow:hidden; }
.hero__luopan{
  position:absolute; z-index:0; pointer-events:none;
  left:50%; top:54%; transform:translate(-50%,-50%);
  width:min(480px, 86vw); aspect-ratio:1; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--gold) 42%, transparent);
  opacity:.16;
}
.hero__luopan::before{
  content:""; position:absolute; inset:13%; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--gold) 50%, transparent);
}
.hero__luopan::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:repeating-conic-gradient(from 0deg,
      color-mix(in srgb, var(--gold) 38%, transparent) 0deg 0.4deg,
      transparent 0.4deg 45deg);
  -webkit-mask:radial-gradient(circle, transparent 12%, #000 12.5% 49.5%, transparent 50%);
          mask:radial-gradient(circle, transparent 12%, #000 12.5% 49.5%, transparent 50%);
}
.hanja-field{ position:absolute; inset:0; z-index:0; pointer-events:none;
  font-family:var(--serif); color:var(--gold); opacity:.15; overflow:hidden; }
.hanja-field span{ position:absolute; line-height:1; user-select:none; }
.hanja-field span:nth-child(1){ left:9%;  top:24%; font-size:30px; }
.hanja-field span:nth-child(2){ left:16%; top:58%; font-size:22px; opacity:.8; }
.hanja-field span:nth-child(3){ left:6%;  top:78%; font-size:26px; opacity:.7; }
.hanja-field span:nth-child(4){ right:10%; top:20%; font-size:28px; }
.hanja-field span:nth-child(5){ right:7%;  top:50%; font-size:24px; opacity:.85; }
.hanja-field span:nth-child(6){ right:15%; top:80%; font-size:20px; opacity:.7; }
@media(max-width:560px){
  .hanja-field span:nth-child(2),.hanja-field span:nth-child(5){ display:none; }
  .hanja-field span{ font-size:20px !important; }
  .hero__luopan{ opacity:.12; }
}
.scroll-rod{
  width:min(340px, 72%); height:8px; margin:0 auto 22px; position:relative; border-radius:999px;
  background:linear-gradient(180deg, #e7cb86 0%, #b3954e 52%, #856b2c 100%);
  box-shadow:0 3px 11px -5px rgba(0,0,0,.45);
}
.scroll-rod::before,.scroll-rod::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:15px; height:15px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #f1ddaa 0%, #b3954e 58%, #7a6228 100%);
  box-shadow:0 2px 8px -3px rgba(0,0,0,.5);
}
.scroll-rod::before{ left:-10px; } .scroll-rod::after{ right:-10px; }

/* ===== 디자인 결합: 히어로/상품 배경 수묵화 (hero-art.js 연동) ===== */
.hero{ overflow:hidden; isolation:isolate; }
.hero__art{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("hero-day.jpg") center 28% / cover no-repeat;
  opacity:.5;
}
.hero__art::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 58% 54% at 50% 47%, color-mix(in srgb, var(--bg) 82%, transparent), transparent 72%),
    linear-gradient(to bottom, var(--bg), transparent 16%, transparent 76%, var(--bg));
}
body.dark .hero__art{ background-image:url("hero-night.jpg"); opacity:.58; }
body.dark .hero__art::after{
  background:
    radial-gradient(ellipse 66% 62% at 50% 46%, color-mix(in srgb, var(--bg) 72%, transparent), transparent 78%),
    linear-gradient(to bottom, color-mix(in srgb,var(--bg) 82%, transparent), transparent 22%, transparent 62%, var(--bg));
}
/* 밤모드: 히어로 제목(흰 글자·금색 강조)을 밝은 배경 위에서 또렷하게 */
body.dark .hero h1{ text-shadow: 0 2px 20px rgba(8,10,20,.62), 0 0 3px rgba(8,10,20,.5); }
body.dark .hero h1 .glow{ color:var(--gold); text-shadow: 0 2px 16px rgba(8,10,20,.7), 0 0 4px rgba(8,10,20,.55); }
@media (max-width:680px){ .hero__art{ background-position:center 24%; opacity:.42; } }

/* 상품 페이지 은은한 배경 그림 (JS가 .page-art를 본문 맨 앞에 삽입) */
.page-art{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-position:center 30%; background-size:cover; background-repeat:no-repeat;
  opacity:.2;
}
.page-art::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 75% 65% at 50% 36%, color-mix(in srgb,var(--bg) 12%, transparent), transparent 78%),
    linear-gradient(to bottom, color-mix(in srgb,var(--bg) 30%, transparent), transparent 26%, transparent 68%, var(--bg));
}
body.dark .page-art{ opacity:.3; }
@media (max-width:680px){ .page-art{ opacity:.12; } }

/* ── 야간모드 가독성 보정: 어두운 --accent(#2d3c5e)/--paper(#1d2027)로 묻히던 글자·아이콘을 밝게 ── */
body.dark .kw.accent,
body.dark .charge-summary .total b,
body.dark .card__glyph,
body.dark .el-metal .gan__char,
body.dark .zo__char,
body.dark .person__badge,
body.dark .daily__go{ color:var(--gold); }
body.dark .rcard__glyph,
body.dark .loading__seal{ color:var(--btn-fg); }
/* 運 로고 박스가 어두운 헤더에 묻히지 않게 금색 테두리 */
body.dark .brand .seal{ border:1px solid color-mix(in srgb,var(--gold) 55%, transparent); }
/* 야간모드: 진행 단계(steps) 비활성 글자가 너무 흐리지 않게 */
body.dark .steps{ color:var(--ink-soft); }

/* PC에서 홈 히어로 배경을 화면 가득(좌우까지) — 폼·결과 페이지처럼. 내부 wrap이 콘텐츠를 중앙 정렬하므로 글자는 그대로 가운데. 모바일(화면<880)은 변화 없음. */
html, body{ overflow-x:hidden; }
.hero{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }

/* 전공 추천 태그(칩) — 어울리는 학과를 직관적으로 */
.major-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.major-tag{ font-family:var(--serif); font-size:14px; padding:7px 14px; border-radius:999px;
  background:var(--gold-soft); color:var(--accent-ink); border:1px solid color-mix(in srgb,var(--gold) 32%, var(--line)); }
body.dark .major-tag{ color:var(--ink); }

/* 평생 수입 — 액수 큰 강조 */
.money-amount{ font-family:var(--serif); font-size:40px; font-weight:700; color:var(--gold);
  text-align:center; padding:20px 0 8px; letter-spacing:.02em; }

/* 평생 재물 임팩트 후킹 (재물운·평생수입 본문 마지막) */
.hook-callout{ margin:22px 0 6px; padding:26px 22px; text-align:center;
  border:1px solid var(--gold); border-radius:var(--radius,16px);
  background:linear-gradient(180deg, var(--gold-soft), transparent 70%); }
.hook-callout__eyebrow{ font-size:12px; letter-spacing:.18em; color:var(--gold);
  margin:0 0 10px; font-weight:600; }
.hook-callout__big{ font-family:var(--serif); font-weight:700; line-height:1.32;
  font-size:clamp(24px, 6vw, 34px); color:var(--ink); margin:0 0 10px; word-break:keep-all; }
.hook-callout__sub{ font-size:15px; color:var(--accent-ink); margin:0 0 8px; font-weight:500; }
.hook-callout__note{ font-size:12px; color:var(--ink-faint); margin:0; }

/* 홈 방문자 표시 (hero와 오늘의 운세 사이) */
.visit-stat{ display:flex; align-items:center; justify-content:center; gap:9px;
  margin:18px auto 4px; font-size:13.5px; color:var(--ink-soft); letter-spacing:.01em; }
.visit-stat b{ color:var(--gold); font-weight:600; font-variant-numeric:tabular-nums; }
.visit-stat__seal{ font-family:var(--serif); font-size:12px; color:var(--gold);
  width:22px; height:22px; display:grid; place-items:center; border-radius:6px;
  background:var(--gold-soft); border:1px solid color-mix(in srgb,var(--gold) 28%, transparent); }
.visit-stat__dot{ color:var(--ink-faint); }
@media (max-width:520px){ .visit-stat{ font-size:12px; gap:6px; flex-wrap:wrap; } }

/* 로딩 타이틀 — 야간모드 가독성(홈 hero와 동일한 금색) */
body.dark .load-title{ color:var(--gold); }
body.dark .load-sub{ color:var(--ink-soft); }

/* 궁합 점수 배지 (couple 결과) */
.compat-score{ display:flex; align-items:center; gap:16px; justify-content:center;
  margin:22px auto 8px; padding:18px 26px; border-radius:18px; max-width:380px;
  background:var(--gold-soft); border:1px solid color-mix(in srgb,var(--gold) 32%, transparent); }
.compat-score__seal{ font-family:var(--serif); font-size:22px; color:var(--gold);
  width:46px; height:46px; display:grid; place-items:center; border-radius:12px;
  background:var(--paper); border:1px solid color-mix(in srgb,var(--gold) 40%, transparent); }
.compat-score__num{ font-family:var(--serif); line-height:1; }
.compat-score__num b{ font-size:42px; font-weight:700; color:var(--gold); }
.compat-score__num span{ font-size:15px; color:var(--ink-soft); margin-left:4px; }
.compat-score__grade{ margin-top:6px; font-size:15px; font-weight:600; color:var(--accent-ink); }
body.dark .compat-score__grade{ color:var(--gold); }

/* ── 결과지 상단 후킹 카드 (전환 유도) ── */
.hook{ max-width:680px; margin:0 auto 26px; padding:22px 24px; border:1px solid var(--line);
  border-radius:16px; background:var(--paper); box-shadow:0 2px 26px -16px rgba(40,30,10,.34); }
.hook__eyebrow{ font-size:12px; letter-spacing:.12em; color:var(--gold); margin:0 0 10px; }
.hook__line{ font-family:var(--serif,"Noto Serif KR",serif); font-size:19px; line-height:1.55;
  font-weight:600; color:var(--ink); margin:0 0 14px; }
.hook__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.hook__chip{ font-size:13px; padding:5px 11px; border-radius:9px; background:var(--gold-soft,rgba(179,149,78,.1));
  color:var(--ink-soft); border:1px solid var(--line); }
.hook__chip.accent{ background:var(--terra-soft); color:var(--terra); border-color:transparent; font-weight:600; }
.hook__locked{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.hook__locked-lead{ font-size:14px; color:var(--ink-soft); margin:0 0 12px; }
.hook__locked-lead b{ color:var(--ink); }
.hook__teasers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px; }
.hook__teaser{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ink-soft);
  padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:var(--paper); }
.hook__teaser-lock{ opacity:.55; font-size:13px; }
.hook__cta{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:18px; flex-wrap:wrap; }
.hook__cta .btn{ margin:0; }
.hook__meta{ font-size:13px; color:var(--ink-faint); }

/* ── 결과지 후기 작성 ── */
.review-write{max-width:680px; margin:22px auto 0; padding:18px 20px; border:1px solid var(--line);
  border-radius:14px; background:var(--paper)}
.review-write__t{font-family:var(--serif,"Noto Serif KR",serif); font-size:15px; margin:0 0 12px; color:var(--ink)}
.review-write__form{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.review-write__form select{padding:8px 10px; border:1px solid var(--line); border-radius:8px;
  background:var(--paper); color:var(--gold)}
.review-write__form input{flex:1; min-width:200px; padding:9px 12px; border:1px solid var(--line);
  border-radius:8px; background:var(--paper); color:var(--ink)}
.review-write__form .btn{margin:0}
.review-write__done{margin:0; color:var(--ink-soft); font-size:14px}
.review-write__warn{margin:0 0 8px; color:var(--terra); font-size:13px}

/* ── 사주 로또번호 공 ── */
.lotto-balls{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 2px}
.lotto-ball{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:50%;color:#fff;font-weight:800;font-size:16px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);text-shadow:0 1px 1px rgba(0,0,0,.2)}
@media (max-width:560px){ .lotto-ball{width:38px;height:38px;font-size:15px} }

/* ── 로또 방식 안내 배너 ── */
.lotto-method{background:rgba(176,216,64,.10);border:1px solid rgba(176,216,64,.35);
  border-radius:14px;padding:13px 16px;margin:0 0 18px;font-size:14px;line-height:1.7;color:var(--ink,#2b2b33)}
.lotto-method b{font-weight:700}

/* ── 관리자 상품 일괄 선택 ── */
.bulkbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#f4f1ea;
  border:1px solid #e3ddcf;border-radius:12px;padding:10px 14px;margin:0 0 8px}
.bulkbar .bulk-all{font-weight:700;display:flex;align-items:center;gap:6px;cursor:pointer}
.bulkbar .bulk-count{font-size:13px;color:#8a7f66;min-width:60px}
.bulkbar .bulk-sep{font-size:13px;color:#b0a589;margin-left:auto}
.bulk-btn{border:1px solid #d8cfb8;background:#fff;border-radius:999px;padding:7px 14px;
  font-size:13px;font-weight:700;cursor:pointer;transition:.15s}
.bulk-btn:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.12)}
.bulk-btn.bm-free{color:#2e7d32;border-color:#bcdcb8}
.bulk-btn.bm-pay{color:#7c6328;border-color:#e3d39a}
.bulk-btn.bm-coupang{color:#1f6f9c;border-color:#add7ee}
.bulk-msg{background:rgba(176,216,64,.12);border:1px solid rgba(176,216,64,.4);
  border-radius:10px;padding:9px 13px;margin:0 0 12px;font-size:13px;color:#4a4a3a}
.prodchk{width:18px;height:18px;cursor:pointer;flex:0 0 auto}

/* ── 초대 특별가 배지 ── */
.invite-badge{display:inline-block;background:#7c6328;color:#fff;font-size:11px;
  font-weight:700;border-radius:999px;padding:2px 8px;margin-left:4px;vertical-align:middle}

/* ── 브랜드 로고(단일 이미지 · 다크는 CSS로 교체) + 태그라인 ── */
.brand{ display:inline-flex; align-items:center; text-decoration:none; }
.brandstack{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:4px; line-height:1; }
.brand-logo{ height:40px; width:auto; display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,.16)); }
/* 다크모드: 같은 자리에서 밝은 로고로 교체(이미지 한 장만 존재 → 절대 두 줄 안 됨) */
body.dark .brand-logo, html.t-night .brand-logo{ content:url('/static/brand/logo-dark.png'); }

/* 태그라인 — 로고 아래, 양옆 점선, 또렷하게(양쪽 테마) */
.brand-tag{
  font-size:11px; letter-spacing:.06em; font-weight:600; color:#7a5e1c;
  white-space:nowrap; display:inline-flex; align-items:center; gap:6px; padding-left:1px;
}
.brand-tag::before, .brand-tag::after{
  content:""; width:13px; height:1px; background:currentColor; opacity:.6;
}
body.dark .brand-tag, html.t-night .brand-tag{ color:#e7c87e; }

@media (max-width:560px){
  .brand-logo{ height:34px; }
  .brand-tag{ font-size:10px; }
  .brand-tag::before, .brand-tag::after{ width:9px; }
}

/* ── 신살: 12운성 + 양쪽 궁합 ── */
.sinsal__label.uns{color:#6b6f5a;border-color:#cfd3bf}
.sinsal__label.inter{color:#7c6328}
.sinsal-card.uns{background:rgba(120,124,90,.06);border-color:rgba(120,124,90,.25)}
.sinsal-pair__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.sinsal-pair__col{min-width:0}
.sinsal-pair__name{font-weight:800;font-size:15px;color:var(--ink);margin:2px 0 8px;
  padding-bottom:6px;border-bottom:2px solid var(--wood,#b3954e)}
.sinsal-pair .sinsal__label{margin-top:10px}
.sinsal-inter{margin-top:18px}
.sinsal-card.inter{background:rgba(124,99,40,.06);border-color:rgba(124,99,40,.28)}
.sinsal-card.inter.gil{background:rgba(120,150,90,.08);border-color:rgba(120,150,90,.3)}
.sinsal-card.inter.hyung{background:rgba(176,90,90,.06);border-color:rgba(176,90,90,.28)}
@media (max-width:560px){
  .sinsal-pair__grid{grid-template-columns:1fr;gap:8px}
}

/* ── 프리미엄 종합 점수 ── */
.premium-score{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px 18px 14px;margin:14px 0 20px}
.premium-score__top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.premium-score__seal{font-family:"Noto Serif KR",serif;font-size:26px;width:52px;height:52px;flex:0 0 52px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  color:#fff;background:radial-gradient(circle at 30% 30%, #c8a45a, #9c7b34);border:1px solid rgba(0,0,0,.08)}
.premium-score__num b{font-size:34px;color:var(--ink);font-family:"Noto Serif KR",serif;line-height:1}
.premium-score__num span{font-size:13px;color:var(--ink-soft);margin-left:6px}
.premium-score__label{font-size:13px;color:var(--ink-soft);margin-top:3px}
.premium-score__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.premium-score__cell{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 8px;font-size:13.5px}
.psc-k{color:var(--ink);white-space:nowrap}
.psc-v{color:var(--gold,#9c7b34);font-weight:800;text-align:right}
.psc-bar{grid-column:1/3;height:6px;border-radius:4px;background:rgba(0,0,0,.07);overflow:hidden}
.psc-bar>i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#c8a45a,#9c7b34)}
.premium-score__note{font-size:11.5px;color:var(--ink-soft);margin:12px 0 0;line-height:1.5}
.rcard__score{margin-left:auto;font-size:13px;font-weight:800;color:var(--gold,#9c7b34);
  background:rgba(156,123,52,.1);border-radius:999px;padding:2px 10px;align-self:center}
@media (max-width:560px){.premium-score__grid{grid-template-columns:1fr}}

/* ── 홈 카테고리 구분 + 광고 슬롯 ── */
.cat-block{ margin:26px 0; }
.cat-block__head{ display:flex; align-items:baseline; gap:10px; margin:0 0 14px;
  padding-bottom:8px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.cat-block__emoji{ font-size:20px; }
.cat-block__head h3{ margin:0; font-size:19px; font-family:"Noto Serif KR",serif; color:var(--ink); }
.cat-block__desc{ font-size:12.5px; color:var(--ink-soft); }
.ad-slot{ margin:16px auto; position:relative; text-align:center; max-width:1080px; }
.ad-slot a{ display:block; }
.ad-slot img{
  width:100%; max-width:1080px; display:block; margin:0 auto;
  aspect-ratio:5/1;            /* 어떤 이미지든 가로로 긴 띠 형태로 통일 */
  object-fit:cover; object-position:center;
  border-radius:16px;
  border:1px solid rgba(180,150,90,.32);
  box-shadow:0 8px 24px rgba(40,30,10,.14);
}
body.dark .ad-slot img, html.t-night .ad-slot img{
  border-color:rgba(231,200,126,.28); box-shadow:0 8px 26px rgba(0,0,0,.4);
}
@media (max-width:560px){ .ad-slot img{ aspect-ratio:3/1; border-radius:13px; } }
.ad-slot__tag{ position:absolute; top:6px; right:10px; font-size:10px; color:#fff;
  background:rgba(0,0,0,.35); padding:1px 6px; border-radius:6px; }

/* ── 택일 길흉 달력 ── */
.tcal{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.tcal__wd{ text-align:center; font-size:12px; font-weight:700; color:var(--ink-soft); padding:4px 0; }
.tcal__wd--sun{ color:#c0584f; } .tcal__wd--sat{ color:#3f6fb0; }
.tcal__cell{ position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:9px; background:var(--paper); font-size:14px; color:var(--ink); }
.tcal__cell--empty{ border:none; background:transparent; }
.tcal__cell.good{ background:rgba(120,150,90,.16); border-color:rgba(120,150,90,.5); font-weight:700; }
.tcal__cell.bad{ background:rgba(192,88,79,.12); border-color:rgba(192,88,79,.4); color:#a8463d; }
.tcal__d{ line-height:1; }
.tcal__mk{ position:absolute; bottom:3px; right:4px; font-size:9px; padding:0 3px; border-radius:4px;
  color:#fff; }
.tcal__cell.good .tcal__mk{ background:#7a8c4e; }
.tcal__cell.bad .tcal__mk{ background:#b0584f; }
.tcal__legend{ display:flex; gap:14px; margin-top:12px; font-size:12px; color:var(--ink-soft); flex-wrap:wrap; }
.tcal__legend .lg::before{ content:""; display:inline-block; width:11px; height:11px; border-radius:3px;
  margin-right:5px; vertical-align:-1px; border:1px solid var(--line); background:var(--paper); }
.tcal__legend .lg.good::before{ background:rgba(120,150,90,.4); border-color:rgba(120,150,90,.6); }
.tcal__legend .lg.bad::before{ background:rgba(192,88,79,.35); border-color:rgba(192,88,79,.5); }

/* ── 공유카드(배경 + 運 도장 + 구름 + 금선) ── */
.sc2{ position:relative; width:100%; max-width:380px; margin:0 auto; aspect-ratio:4/5;
  border-radius:20px; overflow:hidden; box-shadow:0 14px 40px rgba(40,30,10,.28);
  border:1px solid rgba(180,150,90,.4); isolation:isolate; }
.sc2__bg{ position:absolute; inset:0; background-size:cover; background-position:center;
  background-color:#1c1a16; transform:scale(1.02); }
.sc2__veil{ position:absolute; inset:0;
  background:
    radial-gradient(ellipse 85% 62% at 50% 52%, rgba(14,11,7,.5), rgba(14,11,7,0) 78%),
    linear-gradient(180deg, rgba(18,14,9,.42) 0%, rgba(18,14,9,.16) 40%, rgba(18,14,9,.6) 100%); }
.sc2__inner{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:30px 26px; color:#fff; }
.sc2__seal{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:"Noto Serif KR",serif; font-size:24px; color:#1c1407; margin-bottom:14px;
  background:radial-gradient(circle at 32% 30%, #f0d79a, #c8a45a 60%, #a07f34);
  border:1.5px solid rgba(255,255,255,.55); box-shadow:0 2px 12px rgba(0,0,0,.45); }
.sc2__eyebrow{ font-size:12.5px; letter-spacing:.14em; color:#fbf2dd; margin:0 0 4px;
  text-shadow:0 1px 5px rgba(0,0,0,.7); }
.sc2__rule{ width:54px; height:1px; margin:12px auto;
  background:linear-gradient(90deg,transparent,#f0d79a,transparent); box-shadow:0 0 6px rgba(0,0,0,.4); }
.sc2__quote{ font-family:"Noto Serif KR",serif; font-size:23px; line-height:1.5; font-weight:700;
  margin:0; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6); word-break:keep-all; }
.sc2__brand{ display:flex; flex-direction:column; gap:2px; margin:14px 0 0;
  font-family:"Noto Serif KR",serif; font-size:15px; letter-spacing:.05em; color:#fbf2dd;
  text-shadow:0 1px 6px rgba(0,0,0,.75); }
.sc2__brand span{ font-family:inherit; font-size:10.5px; letter-spacing:.18em; opacity:.92; font-weight:400; }
.sc2__cloud{ position:absolute; z-index:2; width:70px; height:28px; color:rgba(240,215,154,.6);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.sc2__cloud--tl{ top:14px; left:12px; }
.sc2__cloud--br{ right:12px; bottom:14px; transform:rotate(180deg); }

/* ── 관리자 배경 이미지 그리드 ── */
.bg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-top:8px; }
.bg-item{ border:1px solid var(--line,#e3dccb); border-radius:10px; overflow:hidden; background:#faf6ec; }
.bg-item img{ width:100%; height:100px; object-fit:cover; display:block; }
.bg-item__foot{ display:flex; align-items:center; justify-content:space-between; padding:6px 9px; }
.bg-item__theme{ font-size:12px; color:#7a6f55; }
.bg-item__del{ background:none; border:none; color:#b0584f; font-size:12px; cursor:pointer; padding:2px 4px; }

/* ── 홈 해연(海淵) 소개 ── */
.hae-intro{ margin-top:10px; }
.hae-card{ display:flex; gap:22px; align-items:center; flex-wrap:wrap;
  background:linear-gradient(135deg, rgba(40,60,80,.06), rgba(180,150,90,.06));
  border:1px solid var(--line,#e3dccb); border-radius:20px; padding:26px 24px; }
.hae-card__seal{ flex:0 0 96px; width:96px; height:96px; border-radius:18px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:radial-gradient(circle at 32% 28%, #2a4258, #16242f); color:#e7c87e;
  border:1px solid rgba(231,200,126,.45); box-shadow:0 6px 18px rgba(20,30,40,.25); }
.hae-card__seal b{ font-family:"Noto Serif KR",serif; font-size:26px; line-height:1; letter-spacing:2px; }
.hae-card__seal span{ font-size:11px; letter-spacing:.3em; opacity:.85; }
.hae-card__body{ flex:1; min-width:260px; }
.hae-card__body h2{ margin:4px 0 10px; font-family:"Noto Serif KR",serif; font-size:21px; color:var(--ink); }
.hae-card__body p{ color:var(--ink-soft); line-height:1.8; margin:0 0 10px; }
@media (max-width:560px){ .hae-card{ padding:20px 16px; gap:16px; } .hae-card__seal{ flex-basis:72px; width:72px; height:72px; } }

/* ── 해연 프로필 사진·자격증 ── */
.hae-card__photo{ flex:0 0 96px; width:96px; height:96px; border-radius:50%; overflow:hidden;
  border:2px solid rgba(231,200,126,.6); box-shadow:0 6px 18px rgba(20,30,40,.22); }
.hae-card__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.hae-card__meta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:6px; }
.hae-card__cert{ display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  color:var(--ink-soft); font-size:12px; line-height:1.4; }
.hae-card__cert img{ height:42px; width:auto; border-radius:6px; border:1px solid rgba(180,150,90,.35); }
@media (max-width:560px){ .hae-card__photo{ flex-basis:72px; width:72px; height:72px; } }

/* ── 신뢰 멘트(홈) + 과금 상품 신뢰 배너 ── */
.home-trust{ display:flex; align-items:center; gap:14px; margin:8px auto 4px;
  background:linear-gradient(135deg, rgba(40,60,80,.05), rgba(180,150,90,.06));
  border:1px solid var(--line,#e3dccb); border-left:3px solid var(--gold,#b3954e);
  border-radius:14px; padding:14px 18px; }
.home-trust__seal{ flex:0 0 auto; font-family:"Noto Serif KR",serif; font-size:15px; letter-spacing:2px;
  color:#16242f; background:radial-gradient(circle at 32% 28%, #e7c87e, #c8a45a); border-radius:9px;
  padding:8px 9px; line-height:1; }
.home-trust p{ margin:0; font-size:13.5px; line-height:1.7; color:var(--ink); }

.trust-strip{ display:flex; align-items:flex-start; gap:14px; margin:0 0 18px;
  background:linear-gradient(135deg, rgba(40,60,80,.06), rgba(180,150,90,.07));
  border:1px solid rgba(180,150,90,.4); border-radius:16px; padding:16px 18px; }
.trust-strip__seal{ flex:0 0 auto; font-family:"Noto Serif KR",serif; font-size:15px; letter-spacing:2px;
  color:#e7c87e; background:radial-gradient(circle at 32% 28%, #2a4258, #16242f); border-radius:10px;
  padding:10px 9px; line-height:1; border:1px solid rgba(231,200,126,.4); }
.trust-strip__t{ margin:2px 0 4px; font-weight:800; font-size:14.5px; color:var(--ink);
  font-family:"Noto Serif KR",serif; }
.trust-strip__d{ margin:0; font-size:13px; line-height:1.7; color:var(--ink-soft); }
@media (max-width:560px){ .home-trust__seal{ display:none; } }

/* ── 홈 카테고리 탭 + 흐르는 슬라이더 ── */
.cat-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 16px; }
.cat-tab{ border:1px solid var(--line,#e3dccb); background:var(--paper,#fff); color:var(--ink-soft);
  padding:8px 16px; border-radius:999px; font-size:13.5px; font-weight:600; cursor:pointer;
  transition:all .18s ease; white-space:nowrap; }
.cat-tab:hover{ border-color:var(--gold,#b3954e); color:var(--ink); }
.cat-tab.on{ background:var(--ink,#2a2118); color:var(--paper,#fff); border-color:var(--ink,#2a2118); }
.cat-pane{ display:none; }
.cat-pane.on{ display:block; animation:fadeIn .3s ease; }
/* 전체 탭: 우→좌로 흐르는 자동 슬라이더 */
.prod-rail--auto{ overflow:hidden; }
.prod-rail--auto .prod-rail__track{ animation:railFlow 48s linear infinite; }
.prod-rail--auto:hover .prod-rail__track{ animation-play-state:paused; }
@keyframes railFlow{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (max-width:560px){
  .prod-rail--auto .prod-rail__track{ animation-duration:32s; }
}
@media (prefers-reduced-motion:reduce){
  .prod-rail--auto .prod-rail__track{ animation:none; }
  .prod-rail--auto{ overflow-x:auto; }
}

/* ── 관리자 탭(.atabs) 선택 구분 ── */
.atabs{ display:flex; flex-wrap:wrap; gap:6px; padding:10px 0; margin-bottom:14px;
  border-bottom:1px solid var(--hair,#e3dccb); }
.atabs a{ padding:7px 13px; border-radius:9px; font-size:13.5px; font-weight:600;
  color:var(--ink-soft,#7a6f55); text-decoration:none; border:1px solid transparent;
  transition:all .15s ease; white-space:nowrap; }
.atabs a:hover{ background:rgba(179,149,78,.1); color:var(--ink,#2a2118); }
.atabs a.on{ background:var(--ink,#2a2118); color:#fff; border-color:var(--ink,#2a2118); }

/* ── 광고 권장 크기 안내 ── */
.ad-size-tip{ margin:8px 0 14px; padding:10px 14px; border-radius:10px; font-size:13px; line-height:1.7;
  background:rgba(70,110,140,.08); border:1px solid rgba(70,110,140,.25); border-left:3px solid #4a7da0; color:#2f5068; }


/* ── 푸터 사업자정보 가운데 정렬 ── */
.foot__biz, .foot__note{ text-align:center; }
.foot__bottom{ justify-content:center; text-align:center; }

/* ── 상담 폼 안내 모달 ── */
.cmodal{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  background:rgba(20,16,10,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); padding:20px; }
.cmodal.on{ display:flex; animation:fadeIn .18s ease; }
.cmodal__box{ background:var(--paper,#fff); border:1px solid var(--hair,#e3dccb); border-radius:18px;
  max-width:380px; width:100%; padding:28px 24px; text-align:center; box-shadow:0 22px 60px rgba(0,0,0,.32); }
.cmodal__icon{ font-size:2.2em; margin-bottom:10px; }
.cmodal__msg{ font-size:15.5px; line-height:1.8; color:var(--ink,#2a2118); margin:0 0 22px; }
.cmodal__btns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.cmodal__btns .btn{ min-width:104px; }

/* ── 회원가입 동의 박스 ── */
.agree-box{ border:1px solid var(--hair,#e3dccb); border-radius:14px; padding:14px 16px;
  background:rgba(179,149,78,.05); display:flex; flex-direction:column; gap:9px; }
.agree-box .check{ margin:0; }
.agree-line{ height:1px; background:var(--hair,#e3dccb); margin:3px 0; }

/* ── 친구초대 박스 ── */
.invite-box{ margin-top:24px; padding:22px 22px; border-radius:18px;
  background:linear-gradient(135deg, rgba(179,149,78,.12), rgba(179,149,78,.04));
  border:1px solid rgba(179,149,78,.32); }
.invite-box__head h2{ margin:0 0 4px; font-size:18px; }
.invite-box__head p{ margin:0 0 14px; font-size:13.5px; color:var(--ink-soft,#7a6f55); }
.invite-row{ display:flex; gap:8px; }
.invite-row .inp{ flex:1; font-size:13px; }
.invite-row .btn{ flex:none; white-space:nowrap; }
.invite-stats{ display:flex; gap:14px; margin-top:16px; }
.invite-stats > div{ flex:1; text-align:center; padding:12px; border-radius:12px;
  background:var(--paper,#fff); border:1px solid var(--hair,#e3dccb); }
.invite-stats__n{ display:block; font-size:22px; font-weight:800; color:var(--accent,#b3954e); font-family:var(--serif,serif); }
.invite-stats__l{ display:block; font-size:12px; color:var(--ink-soft,#7a6f55); margin-top:2px; }
body.dark .invite-stats > div, html.t-night .invite-stats > div{ background:rgba(255,255,255,.04); }

/* ── 섹션 핵심 요약 박스 ── */
.rcard__sum{ display:flex; align-items:flex-start; gap:9px; margin:0 0 14px;
  padding:13px 16px; border-radius:12px; line-height:1.55; font-size:21px; font-weight:600;
  color:var(--ink,#2a2118);
  background:linear-gradient(135deg, rgba(179,149,78,.14), rgba(179,149,78,.05));
  border:1px solid rgba(179,149,78,.3); border-left:3px solid var(--accent,#b3954e); }
.rcard__sum-tag{ flex:none; font-size:11px; font-weight:800; letter-spacing:.04em;
  color:#fff; background:var(--accent,#b3954e); border-radius:6px; padding:2px 8px; margin-top:1px; }
body.dark .rcard__sum, html.t-night .rcard__sum{ color:#f0e7d4;
  background:linear-gradient(135deg, rgba(231,200,126,.14), rgba(231,200,126,.04));
  border-color:rgba(231,200,126,.3); border-left-color:#e7c87e; }
body.dark .rcard__sum-tag, html.t-night .rcard__sum-tag{ background:#bfa15a; color:#1c1407; }

/* ── 회원 클로버 지급 바 ── */
.grant-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:12px;
  padding:11px 14px; border-radius:12px; font-size:13.5px;
  background:rgba(179,149,78,.08); border:1px solid rgba(179,149,78,.28); }
.grant-bar input[type=number]{ padding:5px 8px; border-radius:7px; border:1px solid var(--hair,#ccc); }

/* 오전/오후 토글(시각 입력) — 시·분 줄 위의 독립 한 줄(그리드 풀폭) */
.ampm{display:flex;gap:10px;grid-column:1/-1;flex-basis:100%;width:100%;min-width:0}
.ampm__b{flex:1;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink-faint);font-size:14px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.ampm__b.on{border-color:var(--gold);color:var(--gold-deep,#8a6d1f);background:color-mix(in srgb, var(--gold) 12%, var(--paper));box-shadow:inset 0 0 0 1px var(--gold)}



























/* 쿠팡 파트너스 필수 고지 */
.cp-note{font-size:13px; color:var(--ink-soft); line-height:1.55; margin:8px 0 0}
.cp-badge{display:inline-flex; align-items:center; gap:5px; margin:8px 0 2px; padding:5px 12px;
  border:1px solid var(--line); border-radius:999px; font-size:12.5px; color:var(--gold-deep,#7d621c);
  background:rgba(179,149,78,.10)}



.admin-onbadge{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--gold);color:var(--gold-deep,#7d621c);background:rgba(179,149,78,.12);margin-right:6px;white-space:nowrap}