/* =========================================================
   소원운세 운세 플랫폼 - 공용 디자인 시스템
   컨셉: 신비롭고 고급스러운 밤하늘 (검정 · 남색 · 보라 · 금색)
   ========================================================= */

:root{
  /* --- 컬러 팔레트 --- */
  --bg-deep:#05040f;
  --bg-navy:#0d0b26;
  --bg-navy-2:#161335;
  --surface:#1a1740;
  --surface-2:#221d4d;
  --purple:#7b4fd1;
  --purple-light:#a97cf0;
  --purple-deep:#4a2a8c;
  --gold:#e0b356;
  --gold-light:#f5d992;
  --gold-deep:#a9772f;
  --text-main:#f4f1ff;
  --text-muted:#b7aede;
  --text-faint:#7a71a3;
  --danger:#ff6b8b;
  --success:#5fe3b3;

  --gradient-main:linear-gradient(160deg,var(--bg-deep) 0%,var(--bg-navy) 45%,var(--purple-deep) 100%);
  --gradient-gold:linear-gradient(120deg,var(--gold-deep),var(--gold) 45%,var(--gold-light) 100%);
  --gradient-purple:linear-gradient(120deg,var(--purple-deep),var(--purple) 50%,var(--purple-light) 100%);
  --gradient-card:linear-gradient(155deg,rgba(255,255,255,0.06),rgba(255,255,255,0.01));

  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:10px;
  --shadow-glow:0 0 30px rgba(123,79,209,0.35);
  --shadow-gold-glow:0 0 24px rgba(224,179,86,0.4);
  --shadow-card:0 8px 30px rgba(0,0,0,0.45);

  --font-heading:'Black Han Sans','Noto Sans KR',sans-serif;
  --font-display:'Black Han Sans','Noto Sans KR',sans-serif;
  --font-body:'Pretendard Variable','Pretendard','Noto Sans KR',sans-serif;

  --font-scale:1; /* 글자크기 설정에서 조정 */
}

/* 라이트 모드(선택) - 기본은 다크(신비로운 컨셉 유지) */
[data-theme="light"]{
  --bg-deep:#f4f1ff;
  --bg-navy:#eae3ff;
  --bg-navy-2:#ded3fb;
  --surface:#ffffff;
  --surface-2:#f3edff;
  --text-main:#1c1638;
  --text-muted:#544a7d;
  --text-faint:#8a7fb8;
  --gradient-main:linear-gradient(160deg,#f4f1ff 0%,#eae3ff 45%,#d9c8ff 100%);
  --shadow-card:0 8px 24px rgba(90,60,160,0.12);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:var(--gradient-main);
  color:var(--text-main);
  min-height:100vh;
  font-size:calc(16px * var(--font-scale));
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
h1,h2,h3,h4{font-family:var(--font-heading);letter-spacing:0.02em;margin:0;}
a{color:inherit;text-decoration:none;}
button{font-family:var(--font-body);cursor:pointer;}
ul{list-style:none;margin:0;padding:0;}
img{max-width:100%;display:block;}

/* --- 스크롤바 --- */
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-thumb{background:var(--purple);border-radius:6px;}

/* =========================================================
   별빛 배경 캔버스
   ========================================================= */
#star-canvas{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}

/* =========================================================
   앱 쉘 레이아웃 (모바일 우선, 최대너비 제한)
   ========================================================= */
.app-shell{
  position:relative;
  z-index:1;
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding-bottom:88px; /* 하단 네비 공간 */
}

/* --- 상단 헤더 --- */
.app-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px 10px;
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(5,4,15,0.85),rgba(5,4,15,0));
}
.app-header .brand{
  display:flex;align-items:center;gap:7px;
  font-family:var(--font-heading);
  font-size:1.25rem;
  font-weight:400;
  background:var(--gradient-gold);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-0.01em;
}
.app-header .brand i{color:var(--gold-light);-webkit-text-fill-color:var(--gold-light);}
.header-stats-pill{
  display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:999px;
  padding:5px 12px 5px 7px;
  margin-left:auto;
}
.header-stats-pill .luck-header-widget,
.header-stats-pill .pouch-header-widget{
  background:none;border:none;padding:0;box-shadow:none;
}
.header-stats-divider{width:1px;height:16px;background:rgba(255,255,255,0.15);flex-shrink:0;}

/* 운명의 동행 - 홈 프로모션 섹션 */
.destiny-promo-section{
  position:relative;overflow:hidden;
  background:linear-gradient(155deg,rgba(123,79,209,0.22),rgba(224,179,86,0.10) 60%,rgba(10,8,30,0.4));
  border:1px solid rgba(224,179,86,0.25);
  border-radius:var(--radius-lg);
  padding:22px 20px 20px;text-align:center;margin-bottom:16px;
  box-shadow:var(--shadow-glow);
}
.destiny-promo-glow{
  position:absolute;inset:-40% -20% auto -20%;height:140%;
  background:radial-gradient(circle at 50% 0%,rgba(224,179,86,0.35),transparent 60%);
  pointer-events:none;animation:destinyGlowPulse 4s ease-in-out infinite;
}
@keyframes destinyGlowPulse{0%,100%{opacity:0.6;}50%{opacity:1;}}
.destiny-promo-badge{
  display:inline-flex;align-items:center;gap:6px;font-size:0.68rem;letter-spacing:0.08em;
  color:var(--gold-light);border:1px solid rgba(224,179,86,0.4);border-radius:999px;
  padding:3px 12px;margin-bottom:10px;position:relative;z-index:1;
}
.destiny-promo-section h3{position:relative;z-index:1;font-size:1.25rem;margin-bottom:6px;}
.destiny-promo-desc{position:relative;z-index:1;font-size:0.82rem;color:var(--text-muted);margin:0 0 14px;}
.destiny-promo-stats{position:relative;z-index:1;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.destiny-stat-chip{
  display:flex;align-items:center;gap:6px;font-size:0.76rem;color:var(--text-main);
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);
  border-radius:999px;padding:6px 12px;
}
.destiny-stat-chip i{color:var(--gold-light);}
.destiny-score-chip i{color:var(--danger);}
.destiny-promo-cta{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;}
.destiny-promo-notice{
  position:relative;z-index:1;margin-top:12px;font-size:0.68rem;color:var(--text-faint);
  display:flex;align-items:center;justify-content:center;gap:6px;
}

/* 운명의 동행 - 프로필/매칭 카드 (destiny.html) */
.destiny-match-card{
  background:var(--gradient-card);border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-md);padding:16px;margin-bottom:12px;
  display:flex;gap:14px;align-items:center;position:relative;
}
.destiny-match-avatar{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;
  background:var(--gradient-purple);display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;box-shadow:0 0 14px rgba(123,79,209,0.5);
}
.destiny-match-body{flex:1;min-width:0;}
.destiny-match-body h4{font-size:0.95rem;margin:0 0 4px;display:flex;align-items:center;gap:6px;}
.destiny-match-common{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 0;}
.destiny-chip{
  font-size:0.68rem;color:var(--gold-light);background:rgba(224,179,86,0.12);
  border:1px solid rgba(224,179,86,0.3);border-radius:999px;padding:2px 9px;
}
.destiny-score-ring{
  width:54px;height:54px;border-radius:50%;flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:conic-gradient(var(--gold) calc(var(--score,90)*1%), rgba(255,255,255,0.08) 0);
  position:relative;
}
.destiny-score-ring::before{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--bg-navy);}
.destiny-score-ring span{position:relative;z-index:1;font-size:0.72rem;font-weight:700;color:var(--gold-light);}
.destiny-cheer-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
.destiny-cheer-btn{
  font-size:0.78rem;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);
  border-radius:999px;padding:5px 11px;color:var(--text-main);transition:transform .15s ease;
}
.destiny-cheer-btn:hover{transform:translateY(-2px);background:rgba(224,179,86,0.15);}
.destiny-cheer-btn.done{opacity:0.4;pointer-events:none;}
.header-icon-btn{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--text-main);
  font-size:1.05rem;
  position:relative;
}
.header-icon-btn .dot{
  position:absolute;top:6px;right:7px;
  width:8px;height:8px;border-radius:50%;
  background:var(--danger);
  border:1.5px solid var(--bg-deep);
  display:none;
}

.page-title-bar{
  display:flex;align-items:center;gap:12px;
  padding:14px 20px 6px;
  position:sticky;top:0;z-index:20;
  backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(5,4,15,0.9),rgba(5,4,15,0.2));
}
.page-title-bar .back-btn{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  flex-shrink:0;
}
.page-title-bar h1{font-size:1.15rem;color:var(--text-main);}
.page-title-bar p{margin:0;font-size:0.78rem;color:var(--text-muted);}

/* --- 메인 콘텐츠 --- */
.app-main{flex:1;padding:6px 20px 20px;}

/* =========================================================
   공용 컴포넌트
   ========================================================= */

/* 섹션 타이틀 */
.section-title{
  display:flex;align-items:center;justify-content:space-between;
  margin:30px 0 14px;
}
.section-title h2{
  font-size:1.08rem;color:var(--text-main);
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-weight:700;letter-spacing:-0.01em;
}
.section-title h2 i{
  color:var(--gold-light);font-size:0.8rem;
  width:26px;height:26px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(224,179,86,0.12);
}
.section-title .more-link{
  font-size:0.76rem;color:var(--text-faint);
  display:inline-flex;align-items:center;gap:3px;
}

/* 글래스 카드 */
.glass-card{
  background:var(--gradient-card);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  backdrop-filter:blur(6px);
}

/* 오늘의 운세 히어로 카드 (레거시, 하위 페이지 호환용 유지) */
.today-hero{
  position:relative;
  border-radius:var(--radius-lg);
  padding:26px 22px;
  overflow:hidden;
  background:linear-gradient(150deg,var(--purple-deep) 0%,var(--surface) 60%,var(--bg-navy) 100%);
  box-shadow:var(--shadow-glow);
  border:1px solid rgba(224,179,86,0.25);
}
.today-hero::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 85% 0%,rgba(224,179,86,0.25),transparent 55%);
  pointer-events:none;
}
.today-hero .hero-date{font-size:0.78rem;color:var(--gold-light);letter-spacing:0.05em;}
.today-hero h3{font-size:1.35rem;margin:8px 0 10px;color:var(--text-main);}
.today-hero p{font-size:0.88rem;color:var(--text-muted);margin:0 0 16px;}
.today-hero .btn-gold{display:inline-flex;}

/* =========================================================
   메인 홈 - 모던 에디토리얼 히어로 (트렌디 리디자인)
   ========================================================= */
.hero-modern{
  position:relative;overflow:hidden;
  border-radius:28px;
  padding:36px 24px 30px;
  margin-bottom:18px;
  background:
    radial-gradient(circle at 12% 8%, rgba(224,179,86,0.28), transparent 45%),
    radial-gradient(circle at 92% 92%, rgba(123,79,209,0.4), transparent 50%),
    linear-gradient(165deg, #120f2e 0%, #1c1740 45%, #2a1f52 100%);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 20px 50px -10px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}
.hero-modern-orbit{position:absolute;inset:0;pointer-events:none;z-index:0;}
.orbit-dot{
  position:absolute;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);
  color:var(--gold-light);font-size:0.85rem;backdrop-filter:blur(4px);
}
.orbit-dot.d1{top:10%;right:14%;animation:orbitFloat 6s ease-in-out infinite;}
.orbit-dot.d2{top:58%;right:5%;font-size:0.7rem;width:26px;height:26px;color:var(--purple-light);animation:orbitFloat 7s ease-in-out infinite 1s;}
.orbit-dot.d3{top:20%;right:32%;font-size:0.6rem;width:22px;height:22px;animation:orbitFloat 5s ease-in-out infinite 0.5s;}
@keyframes orbitFloat{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-12px) rotate(8deg);}}
.hero-modern-eyebrow{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;
  font-size:0.72rem;letter-spacing:0.08em;color:var(--gold-light);
  font-weight:600;text-transform:uppercase;
}
.hero-modern-title{
  position:relative;z-index:1;
  font-family:var(--font-display);
  font-weight:400;
  font-size:1.75rem;line-height:1.34;letter-spacing:-0.01em;
  color:var(--text-main);margin:14px 0 12px;max-width:280px;
}
.hero-modern-title .accent-text{
  background:var(--gradient-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-modern-sub{position:relative;z-index:1;font-size:0.88rem;color:var(--text-muted);margin:0 0 22px;max-width:300px;}
.hero-modern-actions{position:relative;z-index:1;display:flex;gap:10px;flex-wrap:wrap;}
.btn-ghost{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.16);
  color:var(--text-main);font-weight:600;font-size:0.85rem;
  padding:11px 20px;border-radius:999px;backdrop-filter:blur(6px);
  transition:transform .15s ease,background .2s ease;
}
.btn-ghost:hover{background:rgba(255,255,255,0.12);}
.btn-ghost:active{transform:scale(0.96);}

/* --- 벤토 그리드 (운명의 동행 대형 카드 + 4개 서비스 소형 타일) --- */
.bento-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:8px;
}
.bento-card{
  position:relative;overflow:hidden;border-radius:20px;
  border:1px solid rgba(255,255,255,0.08);
  text-decoration:none;transition:transform .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.bento-card:active{transform:scale(0.98);}
.bento-card--wide{grid-column:1 / -1;padding:20px 20px 18px;min-height:150px;}
.bento-card--sm{padding:16px 14px;min-height:118px;display:flex;flex-direction:column;justify-content:space-between;}

.bento-destiny{
  background:
    radial-gradient(circle at 8% 0%, rgba(224,179,86,0.3), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(123,79,209,0.45), transparent 55%),
    linear-gradient(150deg,#1c1740,#2a1f52 60%,#160f34);
  box-shadow:0 12px 30px -8px rgba(123,79,209,0.4);
}
.bento-destiny-glow{
  position:absolute;inset:-30% -10% auto -10%;height:120%;
  background:radial-gradient(circle at 50% 0%,rgba(224,179,86,0.3),transparent 60%);
  pointer-events:none;animation:destinyGlowPulse 4s ease-in-out infinite;
}
.bento-eyebrow{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:5px;
  font-size:0.65rem;letter-spacing:0.08em;color:var(--gold-light);font-weight:700;
  border:1px solid rgba(224,179,86,0.4);border-radius:999px;padding:3px 10px;margin-bottom:10px;
}
.bento-destiny h3{position:relative;z-index:1;font-size:1.2rem;color:var(--text-main);margin:0 0 6px;font-family:var(--font-display);font-weight:400;}
.bento-destiny p{position:relative;z-index:1;font-size:0.78rem;color:var(--text-muted);margin:0 0 12px;line-height:1.5;max-width:88%;}
.bento-destiny-stats{position:relative;z-index:1;display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.bento-cta{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;
  font-size:0.8rem;font-weight:700;color:var(--gold-light);
}

.bento-icon{
  width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;margin-bottom:8px;
}
.bento-tag{font-size:0.58rem;letter-spacing:0.08em;font-weight:700;opacity:0.85;margin-bottom:2px;display:block;}
.bento-card--sm h4{font-size:0.92rem;color:var(--text-main);margin:0;font-weight:700;font-family:var(--font-body);}

.bento-tarot{background:linear-gradient(160deg,#2a1f52,#3d2a6b);}
.bento-tarot .bento-icon{background:var(--gradient-gold);color:#241606;}
.bento-tarot .bento-tag{color:var(--gold-light);}

.bento-wish{background:linear-gradient(160deg,#12352f,#1c4a3d);}
.bento-wish .bento-icon{background:linear-gradient(135deg,#5fe3b3,#7b4fd1);color:#0c1620;}
.bento-wish .bento-tag{color:#8be9d0;}

.bento-talisman{background:linear-gradient(160deg,#3a2410,#4a2f14);}
.bento-talisman .bento-icon{background:linear-gradient(135deg,#e0b356,#8a2a1f);color:#2a1608;}
.bento-talisman .bento-tag{color:#f0c78a;}

.bento-pouch{background:linear-gradient(160deg,#2a1f10,#4a2a8c22);}
.bento-pouch .bento-icon{background:var(--gradient-gold);color:#241606;}
.bento-pouch .bento-tag{color:var(--gold-light);}

@media (max-width:360px){
  .hero-modern{padding:28px 18px 24px;}
  .hero-modern-title{font-size:1.55rem;max-width:100%;}
  .bento-card--wide{padding:16px 16px 14px;}
}

/* 버튼 */
.btn-gold{
  background:var(--gradient-gold);
  color:#241606;
  font-weight:700;
  padding:11px 22px;
  border-radius:999px;
  border:none;
  font-size:0.88rem;
  box-shadow:var(--shadow-gold-glow);
  display:inline-flex;align-items:center;gap:6px;
  transition:transform .15s ease;
}
.btn-gold:active{transform:scale(0.96);}
.btn-purple{
  background:var(--gradient-purple);
  color:#fff;font-weight:600;
  padding:11px 22px;border-radius:999px;border:none;
  font-size:0.88rem;box-shadow:var(--shadow-glow);
  display:inline-flex;align-items:center;gap:6px;
}
.btn-outline{
  background:transparent;
  border:1.5px solid var(--purple-light);
  color:var(--text-main);
  padding:10px 20px;border-radius:999px;font-size:0.85rem;
  display:inline-flex;align-items:center;gap:6px;
}
.btn-block{width:100%;justify-content:center;}

/* 카테고리 그리드 */
.category-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px 10px;
}
.category-item{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  text-align:center;
}
.category-item .icon-wrap{
  width:56px;height:56px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  background:var(--gradient-card);
  border:1px solid rgba(255,255,255,0.08);
  font-size:1.3rem;color:var(--gold-light);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), background .2s ease;
}
.category-item:active .icon-wrap{transform:scale(0.9);}
.category-item:hover .icon-wrap{transform:translateY(-3px);background:linear-gradient(155deg,rgba(224,179,86,0.15),rgba(255,255,255,0.02));}
.category-item span{font-size:0.7rem;color:var(--text-muted);font-weight:500;}

/* 가로 스크롤 카드 리스트 */
.hscroll{
  display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;
  scrollbar-width:none;
}
.hscroll::-webkit-scrollbar{display:none;}
.mini-card{
  flex:0 0 auto;width:150px;
  border-radius:var(--radius-md);
  padding:16px 14px;
  background:var(--gradient-card);
  border:1px solid rgba(255,255,255,0.08);
}
.mini-card .rank{color:var(--gold);font-family:var(--font-heading);font-size:0.95rem;}
.mini-card i{font-size:1.3rem;color:var(--purple-light);margin:8px 0;}
.mini-card h4{font-size:0.88rem;color:var(--text-main);}
.mini-card p{font-size:0.72rem;color:var(--text-muted);margin:4px 0 0;}

/* 리스트 카드(즐겨찾기/최근본) */
.list-card{
  display:flex;align-items:center;gap:14px;
  padding:14px;border-radius:var(--radius-md);
  background:var(--gradient-card);
  border:1px solid rgba(255,255,255,0.07);
  margin-bottom:10px;
}
.list-card .thumb{
  width:46px;height:46px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--gradient-purple);color:#fff;font-size:1.1rem;
}
.list-card .content{flex:1;min-width:0;}
.list-card .content h4{font-size:0.9rem;color:var(--text-main);margin:0 0 3px;}
.list-card .content p{font-size:0.74rem;color:var(--text-faint);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.list-card .fav-btn{color:var(--gold);font-size:1.05rem;flex-shrink:0;background:none;border:none;}

/* 빈 상태 */
.empty-state{
  text-align:center;padding:60px 20px;color:var(--text-faint);
}
.empty-state i{font-size:2.4rem;color:var(--purple-light);margin-bottom:14px;display:block;}
.empty-state p{font-size:0.88rem;margin:0;}

/* =========================================================
   하단 네비게이션
   ========================================================= */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;
  max-width:480px;margin:0 auto;
  display:flex;justify-content:space-between;
  padding:10px 10px 22px;
  background:rgba(10,8,28,0.92);
  backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,0.08);
  z-index:50;
}
.bottom-nav a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:0.68rem;color:var(--text-faint);padding:4px 0;
}
.bottom-nav a i{font-size:1.15rem;}
.bottom-nav a.active{color:var(--gold-light);}

/* =========================================================
   광고 슬롯 (관리자 ON/OFF로 노출 제어)
   ========================================================= */
.ad-slot{
  border-radius:var(--radius-md);
  border:1px dashed rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.03);
  color:var(--text-faint);
  font-size:0.75rem;
  text-align:center;
  padding:14px;
  margin:18px 0;
}
.ad-slot.banner{min-height:60px;display:flex;align-items:center;justify-content:center;}
.ad-slot .ad-label{
  display:inline-block;font-size:0.62rem;letter-spacing:0.08em;
  color:var(--text-faint);border:1px solid rgba(255,255,255,0.15);
  border-radius:6px;padding:1px 6px;margin-bottom:6px;
}

/* =========================================================
   공지 배너 / 팝업
   ========================================================= */
.notice-bar{
  display:flex;align-items:center;gap:8px;
  background:rgba(224,179,86,0.1);
  border:1px solid rgba(224,179,86,0.25);
  border-radius:var(--radius-sm);
  padding:10px 14px;margin-bottom:16px;
  font-size:0.78rem;color:var(--gold-light);
}
.notice-bar i{color:var(--gold);}

.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.7);
  display:flex;align-items:center;justify-content:center;
  z-index:200;padding:24px;
  backdrop-filter:blur(4px);
}
.modal-box{
  background:var(--surface);
  border:1px solid rgba(224,179,86,0.25);
  border-radius:var(--radius-lg);
  max-width:360px;width:100%;
  padding:22px;position:relative;
  box-shadow:var(--shadow-glow);
}
.modal-box .close-btn{
  position:absolute;top:14px;right:14px;
  color:var(--text-faint);font-size:1.1rem;background:none;border:none;
}
.modal-box img{border-radius:var(--radius-md);margin-bottom:14px;}
.modal-box h3{color:var(--gold-light);margin-bottom:8px;font-size:1.05rem;}
.modal-box p{font-size:0.85rem;color:var(--text-muted);}

/* =========================================================
   폼 요소
   ========================================================= */
.form-group{margin-bottom:16px;}
.form-group label{
  display:block;font-size:0.82rem;color:var(--text-muted);margin-bottom:6px;
}
.form-control{
  width:100%;padding:12px 14px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  color:var(--text-main);font-size:0.9rem;
  font-family:var(--font-body);
}
.form-control:focus{outline:none;border-color:var(--purple-light);}
select.form-control{appearance:none;}
.radio-group{display:flex;gap:10px;}
.radio-chip{
  flex:1;text-align:center;padding:10px 8px;
  border-radius:999px;border:1px solid rgba(255,255,255,0.12);
  font-size:0.82rem;color:var(--text-muted);
  cursor:pointer;transition:.15s ease;
}
.radio-chip input{display:none;}
.radio-chip.active{
  background:var(--gradient-purple);color:#fff;border-color:transparent;
  box-shadow:var(--shadow-glow);
}

/* =========================================================
   탭
   ========================================================= */
.tab-bar{display:flex;gap:8px;overflow-x:auto;margin-bottom:16px;scrollbar-width:none;}
.tab-bar::-webkit-scrollbar{display:none;}
.tab-item{
  flex:0 0 auto;padding:9px 18px;border-radius:999px;
  font-size:0.82rem;color:var(--text-muted);
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);
}
.tab-item.active{
  background:var(--gradient-gold);color:#241606;font-weight:700;border-color:transparent;
}

/* --- 타로 관심 주제 선택 그리드(20종) --- */
.topic-select-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  margin-bottom:4px;
}
.topic-select-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 6px 10px;border-radius:16px;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);
  color:var(--text-muted);text-align:center;
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.topic-select-item i{
  font-size:1.05rem;color:var(--gold-light);
  width:34px;height:34px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(224,179,86,0.1);
}
.topic-select-item span{font-size:0.68rem;font-weight:600;color:var(--text-main);line-height:1.25;}
.topic-select-item:hover{transform:translateY(-2px);background:rgba(224,179,86,0.12);border-color:rgba(224,179,86,0.3);}
.topic-select-item:active{transform:scale(0.95);}
@media (max-width:360px){
  .topic-select-grid{grid-template-columns:repeat(3,1fr);}
}

/* =========================================================
   결과 텍스트 카드
   ========================================================= */
.result-card{
  border-radius:var(--radius-lg);
  padding:22px 20px;
  background:var(--gradient-card);
  border:1px solid rgba(224,179,86,0.2);
  margin-bottom:16px;
}
.result-card h3{
  color:var(--gold-light);font-size:1rem;margin-bottom:10px;
  display:flex;align-items:center;gap:8px;
}
.result-card p{font-size:0.9rem;color:var(--text-main);line-height:1.85;white-space:pre-line;}
.result-card .tag{
  display:inline-block;font-size:0.7rem;color:var(--purple-light);
  border:1px solid var(--purple-light);border-radius:6px;padding:2px 8px;margin-bottom:10px;
}

.loading-spinner{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:60px 20px;color:var(--text-muted);font-size:0.85rem;
}
.spinner-ring{
  width:46px;height:46px;border-radius:50%;
  border:3px solid rgba(255,255,255,0.1);
  border-top-color:var(--gold);
  animation:spin 0.9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.fade-up{animation:fadeUp .45s ease both;}
@keyframes twinkle{0%,100%{opacity:0.3;}50%{opacity:1;}}
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}

/* 토스트 */
.toast{
  position:fixed;bottom:100px;left:50%;transform:translateX(-50%);
  background:rgba(20,16,45,0.95);color:var(--text-main);
  padding:11px 20px;border-radius:999px;font-size:0.82rem;
  border:1px solid rgba(224,179,86,0.3);
  z-index:300;box-shadow:var(--shadow-card);
  opacity:0;transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px);}

/* 카드뒤집기(타로) */
.tarot-card{
  width:100%;aspect-ratio:2/3;border-radius:14px;position:relative;
  perspective:1000px;cursor:pointer;
}
.tarot-card .card-inner{
  width:100%;height:100%;position:relative;transition:transform .6s cubic-bezier(.4,.2,.2,1);
  transform-style:preserve-3d;
}
.tarot-card.flipped .card-inner{transform:rotateY(180deg);}
.tarot-card .card-face{
  position:absolute;inset:0;border-radius:14px;
  backface-visibility:hidden;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.tarot-card .card-back{
  background:linear-gradient(160deg,var(--purple-deep),var(--surface));
  border:1.5px solid var(--gold);
  color:var(--gold-light);font-size:1.8rem;
}
.tarot-card .card-front{
  background:linear-gradient(170deg,#fff8ea,#f0dfb0);
  transform:rotateY(180deg);
  color:#2a1e05;flex-direction:column;padding:10px;text-align:center;
  border:1.5px solid var(--gold-deep);
}
.tarot-card .card-front i{font-size:1.6rem;margin-bottom:6px;color:var(--purple-deep);}
.tarot-card .card-front span{font-size:0.72rem;font-weight:700;}
.tarot-card.reversed .card-front{transform:rotateY(180deg) rotate(180deg);}

/* 업로드 박스(손금/관상) */
.upload-box{
  border:1.5px dashed rgba(255,255,255,0.2);
  border-radius:var(--radius-lg);
  padding:36px 20px;text-align:center;
  color:var(--text-muted);
  background:rgba(255,255,255,0.02);
}
.upload-box i{font-size:2.2rem;color:var(--purple-light);margin-bottom:10px;display:block;}
.upload-box input[type=file]{display:none;}
.preview-img{width:100%;border-radius:var(--radius-md);margin-bottom:14px;max-height:340px;object-fit:cover;}

/* 반응형 */
@media (min-width:520px){
  .app-shell{max-width:480px;box-shadow:0 0 60px rgba(0,0,0,0.5);}
}

/* =========================================================
   신비로운 부가 애니메이션 (떠다니는 오브 / 마법진 로더 / 버스트)
   ========================================================= */

/* --- 떠다니는 오브(광구) 배경 장식 --- */
.orb-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.mystic-orb{
  position:absolute;width:120px;height:120px;border-radius:50%;
  filter:blur(30px);opacity:0.35;
  animation:orbFloat 18s ease-in-out infinite;
}
.mystic-orb.gold{background:radial-gradient(circle,var(--gold-light),transparent 70%);}
.mystic-orb.purple{background:radial-gradient(circle,var(--purple-light),transparent 70%);}
.mystic-orb.purple2{background:radial-gradient(circle,var(--purple-deep),transparent 70%);width:160px;height:160px;}
@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1);}
  25%{transform:translate(18px,-24px) scale(1.08);}
  50%{transform:translate(-10px,14px) scale(0.95);}
  75%{transform:translate(-20px,-10px) scale(1.05);}
}

/* --- 헤더 브랜드 반짝임 --- */
.brand{position:relative;}
.brand i{animation:gemPulse 2.6s ease-in-out infinite;}
@keyframes gemPulse{
  0%,100%{text-shadow:0 0 6px rgba(224,179,86,0.5);}
  50%{text-shadow:0 0 18px rgba(224,179,86,0.95);}
}

/* --- 카테고리 아이콘 은은한 부유 효과 --- */
.category-item .icon-wrap{animation:iconFloat 4s ease-in-out infinite;}
.category-item:nth-child(2n) .icon-wrap{animation-delay:0.6s;}
.category-item:nth-child(3n) .icon-wrap{animation-delay:1.1s;}
@keyframes iconFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}

/* --- 마법진 로더 --- */
.mystic-loader{
  display:flex;flex-direction:column;align-items:center;gap:22px;
  padding:70px 20px;
}
.mystic-circle{
  position:relative;width:130px;height:130px;
  display:flex;align-items:center;justify-content:center;
}
.mystic-circle .ring{
  position:absolute;border-radius:50%;
  border:1.5px solid transparent;
}
.mystic-circle .ring-1{
  inset:0;
  border-top-color:var(--gold);
  border-right-color:rgba(224,179,86,0.25);
  animation:spin 2.2s linear infinite;
}
.mystic-circle .ring-2{
  inset:16px;
  border-bottom-color:var(--purple-light);
  border-left-color:rgba(169,124,240,0.25);
  animation:spin 1.6s linear infinite reverse;
}
.mystic-circle .ring-3{
  inset:32px;
  border:1px dashed rgba(224,179,86,0.4);
  animation:spin 4s linear infinite;
}
.mystic-circle .core-gem{
  font-size:1.6rem;color:var(--gold-light);
  animation:corePulse 1.4s ease-in-out infinite;
  filter:drop-shadow(0 0 10px rgba(224,179,86,0.7));
}
@keyframes corePulse{0%,100%{transform:scale(0.9);opacity:0.85;}50%{transform:scale(1.15);opacity:1;}}
.orbit-star{
  position:absolute;color:var(--purple-light);font-size:0.7rem;
  animation:orbitMove 3s linear infinite;
}
.orbit-star.s1{animation-duration:3s;}
.orbit-star.s2{animation-duration:4.2s;animation-direction:reverse;color:var(--gold-light);}
.orbit-star.s3{animation-duration:5s;}
@keyframes orbitMove{
  from{transform:rotate(0deg) translateX(62px) rotate(0deg);}
  to{transform:rotate(360deg) translateX(62px) rotate(-360deg);}
}
.mystic-msg{
  font-size:0.85rem;color:var(--text-muted);text-align:center;
  transition:opacity .22s ease;min-height:1.4em;
}

/* --- 버스트 파티클(결과 공개 시 "펑!") --- */
.burst-layer{position:fixed;inset:0;z-index:400;pointer-events:none;}
.burst-particle{
  position:fixed;transform:translate(-50%,-50%);
  animation:burstFly var(--dur,0.8s) cubic-bezier(.2,.7,.3,1) forwards;
  opacity:1;
}
@keyframes burstFly{
  0%{transform:translate(-50%,-50%) scale(0.4);opacity:1;}
  70%{opacity:1;}
  100%{transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.1);opacity:0;}
}
.burst-flash{
  position:fixed;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,0.95),rgba(224,179,86,0.6),transparent 70%);
  transform:translate(-50%,-50%) scale(0);
  animation:flashPop 0.6s ease-out forwards;
}
@keyframes flashPop{
  0%{transform:translate(-50%,-50%) scale(0);opacity:1;}
  40%{transform:translate(-50%,-50%) scale(9);opacity:0.9;}
  100%{transform:translate(-50%,-50%) scale(15);opacity:0;}
}

/* --- 결과 컨테이너 팝인(등장) --- */
.pop-in > *{animation:popInResult .55s cubic-bezier(.2,.8,.25,1.1) both;}
@keyframes popInResult{
  0%{opacity:0;transform:scale(0.85) translateY(14px);filter:blur(4px);}
  60%{opacity:1;transform:scale(1.03) translateY(-2px);filter:blur(0);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}

/* --- result-card 등장 시 금빛 테두리 반짝임 --- */
.result-card.glow-once{animation:glowOnce 1.4s ease-out;}
@keyframes glowOnce{
  0%{box-shadow:0 0 0 rgba(224,179,86,0);}
  30%{box-shadow:0 0 34px rgba(224,179,86,0.55);}
  100%{box-shadow:0 0 0 rgba(224,179,86,0);}
}

/* --- 별빛 캔버스에 은은한 회전 그라데이션 오버레이(전체 배경 신비로움 강화) --- */
.app-shell::before{
  content:'';position:fixed;inset:-20% -20% -20% -20%;z-index:-1;
  background:conic-gradient(from 0deg, rgba(123,79,209,0.08), rgba(224,179,86,0.05), rgba(123,79,209,0.08));
  animation:bgRotate 40s linear infinite;
  pointer-events:none;
}
@keyframes bgRotate{to{transform:rotate(360deg);}}

/* =========================================================
   타로 프로모션 배너 (메인 홈, 광고 자리 대체)
   ========================================================= */
.tarot-promo-banner{
  position:relative;
  display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-webkit-align-items:center;align-items:center;
  -webkit-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row;
  -webkit-flex-wrap:nowrap;flex-wrap:nowrap;
  box-sizing:border-box;
  min-height:64px;
  margin:26px 0;
  padding:10px 16px;border-radius:var(--radius-lg);overflow:hidden;
  background:
    radial-gradient(circle at 12% 15%, rgba(224,179,86,0.2), transparent 55%),
    radial-gradient(circle at 90% 85%, rgba(123,79,209,0.35), transparent 55%),
    linear-gradient(150deg, var(--purple-deep) 0%, var(--surface) 55%, var(--bg-navy) 100%);
  border:1.5px solid rgba(224,179,86,0.4);
  box-shadow:0 0 28px rgba(123,79,209,0.3), inset 0 0 30px rgba(224,179,86,0.06);
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.tarot-promo-banner:active{opacity:0.92;}
.tarot-promo-stars{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;overflow:hidden;border-radius:inherit;}
.tarot-promo-stars i{
  position:absolute;color:var(--gold-light);opacity:0.75;
  animation:tarotStarTwinkle 2.6s ease-in-out infinite;
}
.tarot-promo-stars .s1{top:14%;left:20%;font-size:0.6rem;animation-delay:0s;}
.tarot-promo-stars .s2{top:72%;left:12%;font-size:0.5rem;animation-delay:0.6s;}
.tarot-promo-stars .s3{top:18%;left:80%;font-size:0.55rem;animation-delay:1.1s;}
.tarot-promo-stars .s4{top:68%;left:88%;font-size:0.65rem;animation-delay:1.7s;}
@keyframes tarotStarTwinkle{0%,100%{opacity:0.25;transform:scale(0.8);}50%{opacity:1;transform:scale(1.2);}}
.tarot-promo-icon{
  position:relative;
  -webkit-box-flex:0;-webkit-flex:0 0 44px;-ms-flex:0 0 44px;flex:0 0 44px;
  width:44px;height:44px;min-width:44px;max-width:44px;border-radius:14px;
  margin-right:12px;
  display:-webkit-box;display:-webkit-flex;display:flex;
  -webkit-box-align:center;-webkit-align-items:center;align-items:center;
  -webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;
  font-size:1.2rem;line-height:1;
  background:var(--gradient-gold);color:#241606;
  box-shadow:var(--shadow-gold-glow);
  animation:tarotIconFloat 3.2s ease-in-out infinite;
}
@keyframes tarotIconFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
.tarot-promo-text{
  position:relative;
  -webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;
  min-width:0;width:0; /* 텍스트 컬럼이 남는 공간만 차지하도록 강제 */
  padding-right:10px;
}
.tarot-promo-tag{
  display:block;font-size:0.62rem;letter-spacing:0.12em;color:var(--gold-light);font-weight:700;
  line-height:1.2;margin:0 0 4px;
}
.tarot-promo-text h3{
  font-size:1rem;color:var(--text-main);margin:0 0 3px;line-height:1.3;
  font-family:var(--font-body);font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tarot-promo-text p{
  font-size:0.74rem;color:var(--text-muted);margin:0;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tarot-promo-arrow{
  position:relative;
  -webkit-box-flex:0;-webkit-flex:0 0 28px;-ms-flex:0 0 28px;flex:0 0 28px;
  width:28px;height:28px;min-width:28px;border-radius:50%;
  margin-left:auto;
  display:-webkit-box;display:-webkit-flex;display:flex;
  -webkit-box-align:center;-webkit-align-items:center;align-items:center;
  -webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;
  background:rgba(255,255,255,0.08);
  color:var(--gold-light);font-size:0.8rem;
  animation:tarotArrowNudge 1.6s ease-in-out infinite;
}
@keyframes tarotArrowNudge{0%,100%{transform:translateX(0);}50%{transform:translateX(3px);}}

/* 초소형 화면(구형 안드로이드/카카오톡 인앱 브라우저 등) 대응 */
@media (max-width:360px){
  .tarot-promo-banner{padding:8px 12px;min-height:56px;}
  .tarot-promo-icon{flex-basis:38px;width:38px;height:38px;min-width:38px;max-width:38px;font-size:1.05rem;margin-right:10px;}
  .tarot-promo-text h3{font-size:0.88rem;}
  .tarot-promo-text p{font-size:0.68rem;}
  .tarot-promo-arrow{flex-basis:22px;width:22px;height:22px;min-width:22px;font-size:0.68rem;}
}

/* =========================================================
   타로 인트로 "타로성"(Tarot Castle) 화면
   ========================================================= */
.tarot-intro-stage{
  position:relative;min-height:calc(100vh - 40px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:30px 20px;
  overflow:hidden;border-radius:var(--radius-lg);
  background:
    radial-gradient(circle at 50% 15%, rgba(224,179,86,0.16), transparent 50%),
    radial-gradient(circle at 20% 85%, rgba(123,79,209,0.35), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(123,79,209,0.3), transparent 55%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--purple-deep) 55%, var(--bg-navy) 100%);
}
.tarot-intro-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.tarot-intro-stars i{
  position:absolute;color:var(--gold-light);
  animation:tarotStarTwinkle 3s ease-in-out infinite;
}
.tarot-intro-castle{
  position:relative;font-size:4.6rem;color:var(--gold-light);margin-bottom:6px;
  filter:drop-shadow(0 0 26px rgba(224,179,86,0.65));
  animation:castleGlow 3.6s ease-in-out infinite;
}
@keyframes castleGlow{
  0%,100%{filter:drop-shadow(0 0 20px rgba(224,179,86,0.5));transform:translateY(0);}
  50%{filter:drop-shadow(0 0 38px rgba(224,179,86,0.85));transform:translateY(-6px);}
}
.tarot-intro-ring{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:230px;height:230px;border-radius:50%;
  border:1px solid rgba(224,179,86,0.35);
  animation:tarotRingSpin 14s linear infinite;
}
.tarot-intro-ring::before, .tarot-intro-ring::after{
  content:'';position:absolute;border-radius:50%;border:1px solid rgba(123,79,209,0.35);
}
.tarot-intro-ring::before{inset:22px;animation:tarotRingSpinRev 10s linear infinite;}
.tarot-intro-ring::after{inset:44px;border-color:rgba(224,179,86,0.25);}
@keyframes tarotRingSpin{to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes tarotRingSpinRev{to{transform:rotate(-360deg);}}
.tarot-intro-title{
  position:relative;font-family:var(--font-heading);font-size:1.9rem;color:var(--gold-light);
  margin:18px 0 6px;letter-spacing:0.04em;text-shadow:0 0 20px rgba(224,179,86,0.5);
}
.tarot-intro-sub{position:relative;font-size:0.85rem;color:var(--text-muted);margin:0 0 26px;max-width:280px;}
.tarot-intro-cards{position:relative;display:flex;margin-bottom:28px;}
.tarot-intro-cards .mini-tarot-card{
  width:52px;height:80px;border-radius:8px;margin-left:-14px;
  background:linear-gradient(160deg,var(--purple-deep),var(--surface));
  border:1.5px solid var(--gold);box-shadow:0 6px 16px rgba(0,0,0,0.5);
  display:flex;align-items:center;justify-content:center;color:var(--gold-light);
  font-size:1.2rem;animation:introCardFloat 3s ease-in-out infinite;
}
.tarot-intro-cards .mini-tarot-card:first-child{margin-left:0;}
.tarot-intro-cards .mini-tarot-card:nth-child(1){transform:rotate(-14deg);animation-delay:0s;}
.tarot-intro-cards .mini-tarot-card:nth-child(2){transform:rotate(-4deg) translateY(-8px);animation-delay:0.3s;z-index:2;}
.tarot-intro-cards .mini-tarot-card:nth-child(3){transform:rotate(8deg);animation-delay:0.6s;}
@keyframes introCardFloat{0%,100%{translate:0 0;}50%{translate:0 -6px;}}
.tarot-intro-enter-btn{position:relative;}

/* =========================================================
   🌙 소원운세(Wish) 전용 디자인
   ========================================================= */

/* --- 홈 배너: 소원운세 프로모션 (타로 배너와 동일한 flexbox + 벤더 프리픽스 구조 사용) --- */
.wish-promo-banner{
  position:relative;
  display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-webkit-align-items:center;align-items:center;
  -webkit-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row;
  -webkit-flex-wrap:nowrap;flex-wrap:nowrap;
  box-sizing:border-box;
  min-height:64px;
  margin:26px 0;
  padding:14px 16px;border-radius:var(--radius-lg);overflow:hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(95,227,179,0.16), transparent 55%),
    radial-gradient(circle at 88% 82%, rgba(123,79,209,0.32), transparent 55%),
    linear-gradient(150deg, var(--surface) 0%, var(--bg-navy-2) 55%, var(--purple-deep) 100%);
  border:1.5px solid rgba(95,227,179,0.35);
  box-shadow:0 0 26px rgba(95,227,179,0.18), inset 0 0 30px rgba(224,179,86,0.05);
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.wish-promo-banner:active{opacity:0.92;}
.wish-promo-icon{
  position:relative;
  -webkit-box-flex:0;-webkit-flex:0 0 44px;-ms-flex:0 0 44px;flex:0 0 44px;
  width:44px;height:44px;min-width:44px;max-width:44px;border-radius:14px;
  margin-right:12px;
  display:-webkit-box;display:-webkit-flex;display:flex;
  -webkit-box-align:center;-webkit-align-items:center;align-items:center;
  -webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;
  font-size:1.25rem;line-height:1;
  background:linear-gradient(135deg,#5fe3b3,#7b4fd1);color:#0c1620;
  box-shadow:0 0 18px rgba(95,227,179,0.5);
  animation:wishIconTwinkle 2.8s ease-in-out infinite;
}
@keyframes wishIconTwinkle{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-4px) scale(1.06);}}
.wish-promo-text{
  position:relative;
  -webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;
  min-width:0;width:0;
  padding-right:8px;
}
.wish-promo-tag{display:block;font-size:0.6rem;letter-spacing:0.1em;color:#8be9d0;font-weight:700;line-height:1.2;margin:0 0 3px;}
.wish-promo-text h3{
  font-size:0.98rem;color:var(--text-main);margin:0 0 2px;line-height:1.3;
  font-weight:700;font-family:var(--font-body);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wish-promo-text p{
  font-size:0.72rem;color:var(--text-muted);margin:0;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wish-promo-arrow{
  position:relative;
  -webkit-box-flex:0;-webkit-flex:0 0 28px;-ms-flex:0 0 28px;flex:0 0 28px;
  width:28px;height:28px;min-width:28px;border-radius:50%;
  margin-left:auto;
  display:-webkit-box;display:-webkit-flex;display:flex;
  -webkit-box-align:center;-webkit-align-items:center;align-items:center;
  -webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;
  background:rgba(255,255,255,0.08);color:#8be9d0;font-size:0.78rem;
}

/* 초소형 화면(구형 기기/카카오톡 인앱 브라우저 등) 대응 */
@media (max-width:360px){
  .wish-promo-banner{padding:8px 12px;min-height:56px;}
  .wish-promo-icon{flex-basis:38px;width:38px;height:38px;min-width:38px;max-width:38px;font-size:1.05rem;margin-right:10px;}
  .wish-promo-text h3{font-size:0.86rem;}
  .wish-promo-text p{font-size:0.66rem;}
  .wish-promo-arrow{flex-basis:22px;width:22px;height:22px;min-width:22px;font-size:0.68rem;}
}

/* --- 소원운세 페이지 히어로 --- */
.wish-hero{
  position:relative;border-radius:var(--radius-lg);padding:28px 20px;overflow:hidden;text-align:center;
  background:
    radial-gradient(circle at 20% 15%, rgba(95,227,179,0.18), transparent 50%),
    radial-gradient(circle at 85% 80%, rgba(123,79,209,0.35), transparent 55%),
    linear-gradient(160deg, var(--bg-deep) 0%, var(--purple-deep) 60%, var(--bg-navy) 100%);
  border:1px solid rgba(95,227,179,0.3);
  box-shadow:0 0 30px rgba(95,227,179,0.15);
}
.wish-hero .wish-hero-icon{font-size:2.4rem;margin-bottom:8px;display:block;animation:wishIconTwinkle 3s ease-in-out infinite;}
.wish-hero h1{font-size:1.3rem;color:var(--gold-light);margin:0 0 6px;text-shadow:0 0 16px rgba(224,179,86,0.4);}
.wish-hero .wish-slogan{
  font-size:0.82rem;color:#a9e8d4;margin:0 0 4px;min-height:1.3em;transition:opacity .3s ease;
}
.wish-hero p.wish-sub{font-size:0.78rem;color:var(--text-muted);margin:6px 0 0;}

/* --- 소원 작성 카드 --- */
.wish-compose-card{padding:20px;}
.wish-category-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px;}
.wish-cat-chip{
  display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);
  font-size:0.68rem;color:var(--text-muted);cursor:pointer;transition:.15s ease;
}
.wish-cat-chip i{font-size:1rem;color:var(--purple-light);}
.wish-cat-chip.active{background:linear-gradient(135deg,rgba(95,227,179,0.22),rgba(123,79,209,0.35));border-color:#5fe3b3;color:var(--text-main);}
.wish-cat-chip.active i{color:#5fe3b3;}
.wish-textarea{
  width:100%;min-height:96px;padding:14px;border-radius:var(--radius-sm);resize:vertical;
  border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);
  color:var(--text-main);font-size:0.9rem;font-family:var(--font-body);line-height:1.6;
}
.wish-textarea:focus{outline:none;border-color:#5fe3b3;}
.wish-compose-options{display:flex;align-items:center;justify-content:space-between;margin:12px 0 16px;flex-wrap:wrap;gap:8px;}
.wish-anon-toggle{display:flex;align-items:center;gap:8px;font-size:0.8rem;color:var(--text-muted);cursor:pointer;}
.wish-anon-toggle input{width:16px;height:16px;accent-color:#5fe3b3;}
.wish-nickname-input{
  flex:1;min-width:120px;padding:8px 12px;border-radius:999px;font-size:0.8rem;
  border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);color:var(--text-main);
}

/* --- 행운 메시지 결과 카드 --- */
.wish-luck-card{padding:22px 20px;}
.wish-luck-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0 4px;}
.wish-luck-item{
  text-align:center;padding:12px 6px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);
}
.wish-luck-item .wl-icon{font-size:1.2rem;color:#5fe3b3;margin-bottom:4px;display:block;}
.wish-luck-item .wl-label{font-size:0.62rem;color:var(--text-faint);display:block;margin-bottom:2px;}
.wish-luck-item .wl-value{font-size:0.82rem;color:var(--text-main);font-weight:700;}
.wish-luck-score-wrap{text-align:center;margin-bottom:6px;}
.wish-luck-score{
  font-family:var(--font-heading);font-size:2.6rem;color:var(--gold-light);
  text-shadow:0 0 22px rgba(224,179,86,0.6);line-height:1;
}
.wish-luck-score-label{font-size:0.72rem;color:var(--text-muted);letter-spacing:0.08em;}
.wish-cheer-box{
  margin-top:14px;padding:14px 16px;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,rgba(95,227,179,0.08),rgba(123,79,209,0.12));
  border:1px solid rgba(95,227,179,0.25);font-size:0.84rem;color:var(--text-main);line-height:1.7;
}

/* --- 소원 카드(피드) --- */
.wish-card{
  padding:18px 18px;margin-bottom:12px;position:relative;
  background:var(--gradient-card);border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-md);
}
.wish-card-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.wish-card-cat{
  font-size:0.66rem;font-weight:700;padding:3px 9px;border-radius:999px;
  background:rgba(95,227,179,0.15);color:#8be9d0;border:1px solid rgba(95,227,179,0.3);
  display:inline-flex;align-items:center;gap:4px;
}
.wish-card-nick{font-size:0.72rem;color:var(--text-faint);}
.wish-card-time{font-size:0.66rem;color:var(--text-faint);margin-left:auto;flex-shrink:0;}
.wish-card-content{font-size:0.9rem;color:var(--text-main);line-height:1.7;margin:0 0 12px;white-space:pre-line;}
.wish-gauge-track{
  height:6px;border-radius:6px;background:rgba(255,255,255,0.08);overflow:hidden;margin-bottom:10px;
}
.wish-gauge-fill{
  height:100%;border-radius:6px;background:linear-gradient(90deg,#5fe3b3,var(--gold-light));
  transition:width .5s cubic-bezier(.3,.8,.3,1);
}
.wish-gauge-full{animation:wishGaugeFullPulse 1.4s ease-out;}
@keyframes wishGaugeFullPulse{0%{box-shadow:0 0 0 rgba(224,179,86,0);}30%{box-shadow:0 0 22px rgba(224,179,86,0.7);}100%{box-shadow:0 0 0 rgba(224,179,86,0);}}
.wish-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.wish-support-btn{
  display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;border:none;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);
  color:var(--text-muted);font-size:0.8rem;cursor:pointer;transition:.15s ease;
}
.wish-support-btn.supported{background:linear-gradient(135deg,#5fe3b3,#7b4fd1);color:#0c1620;border-color:transparent;font-weight:700;}
.wish-support-btn i{color:inherit;}
.wish-support-count{font-size:0.72rem;color:var(--text-faint);}
.wish-rank-badge{
  position:absolute;top:-8px;left:14px;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:0.78rem;font-weight:700;
  background:var(--gradient-gold);color:#241606;box-shadow:var(--shadow-gold-glow);
}

/* --- 성취 후기 배지 --- */
.wish-review-badge{
  display:inline-flex;align-items:center;gap:4px;font-size:0.66rem;font-weight:700;
  color:#241606;background:var(--gradient-gold);padding:3px 9px;border-radius:999px;margin-left:6px;
}

/* --- 탭 (소원/후기/랭킹) --- */
.wish-tab-bar{display:flex;gap:8px;margin:18px 0 14px;}
.wish-tab-bar .tab-item{flex:1;text-align:center;justify-content:center;}

/* --- 행운 룰렷 --- */
.wish-roulette-wrap{text-align:center;padding:26px 20px;}
.wish-roulette-dial{
  position:relative;width:190px;height:190px;margin:0 auto 20px;border-radius:50%;
  background:conic-gradient(from 0deg,#5fe3b3,#e0b356,#7b4fd1,#5fe3b3);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 34px rgba(95,227,179,0.35);
  transition:transform 2.4s cubic-bezier(.2,.85,.15,1);
}
.wish-roulette-dial::before{
  content:'';position:absolute;inset:14px;border-radius:50%;
  background:var(--bg-navy);
}
.wish-roulette-dial i{position:relative;font-size:2rem;color:var(--gold-light);}
.wish-roulette-pointer{
  position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;
  border-bottom:16px solid var(--gold-light);z-index:2;filter:drop-shadow(0 0 6px rgba(224,179,86,0.7));
}

/* --- 소원 캡슐 --- */
.wish-capsule-card{
  text-align:center;padding:24px 20px;
  background:linear-gradient(160deg,rgba(123,79,209,0.18),rgba(95,227,179,0.1));
  border:1px solid rgba(95,227,179,0.25);
}
.wish-capsule-icon{font-size:2.4rem;color:#8be9d0;margin-bottom:8px;filter:drop-shadow(0 0 14px rgba(95,227,179,0.5));animation:wishIconTwinkle 3.2s ease-in-out infinite;}

/* --- 힐링 이펙트 (일시 버스트) --- */
.healing-burst-layer{position:fixed;inset:0;z-index:410;pointer-events:none;overflow:hidden;}
.healing-particle{
  position:fixed;top:-30px;opacity:0;
  animation:healingFall var(--fall-dur,3s) ease-in forwards;
}
@keyframes healingFall{
  0%{opacity:0;transform:translate(0,0) rotate(0deg);}
  10%{opacity:1;}
  100%{opacity:0;transform:translate(var(--drift,0px), 100vh) rotate(200deg);}
}
/* --- 힐링 이펙트 (배경 은은한 상시 부유) --- */
.healing-ambient-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.healing-ambient-particle{
  position:absolute;top:-10%;opacity:0;
  animation:healingAmbientFall var(--fall-dur,12s) linear infinite;
}
@keyframes healingAmbientFall{
  0%{opacity:0;transform:translate(0,0);}
  8%{opacity:0.6;}
  92%{opacity:0.5;}
  100%{opacity:0;transform:translate(var(--drift,0px), 130vh);}
}

/* --- 별자리 응원 배지 --- */
.wish-zodiac-tag{
  display:inline-flex;align-items:center;gap:4px;font-size:0.68rem;color:var(--purple-light);
  border:1px solid var(--purple-light);border-radius:6px;padding:2px 8px;
}

/* 반응형: 초소형 화면 */
@media (max-width:360px){
  .wish-luck-grid{grid-template-columns:repeat(2,1fr);}
  .wish-category-picker{grid-template-columns:repeat(4,1fr);gap:6px;}
}

/* =========================================================
   🧿 전자부적(Talisman) 전용 디자인
   컨셉: 한지(hanji) 질감의 황색 부적 + 금빛 신령 기운
   ========================================================= */

/* --- 홈 배너: 전자부적 프로모션 --- */
.talisman-promo-banner{
  position:relative;
  display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-webkit-align-items:center;align-items:center;
  -webkit-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row;
  -webkit-flex-wrap:nowrap;flex-wrap:nowrap;
  box-sizing:border-box;
  min-height:64px;
  margin:26px 0;
  padding:14px 16px;border-radius:var(--radius-lg);overflow:hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(224,179,86,0.22), transparent 55%),
    radial-gradient(circle at 90% 85%, rgba(255,111,97,0.18), transparent 55%),
    linear-gradient(150deg, #2a1608 0%, var(--surface) 55%, var(--bg-navy) 100%);
  border:1.5px solid rgba(224,179,86,0.4);
  box-shadow:0 0 26px rgba(224,179,86,0.22), inset 0 0 30px rgba(224,179,86,0.06);
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.talisman-promo-banner:active{opacity:0.92;}
.talisman-promo-icon{
  position:relative;
  -webkit-box-flex:0;-webkit-flex:0 0 44px;-ms-flex:0 0 44px;flex:0 0 44px;
  width:44px;height:44px;min-width:44px;max-width:44px;border-radius:14px;
  margin-right:12px;
  display:-webkit-box;display:-webkit-flex;display:flex;
  -webkit-box-align:center;-webkit-align-items:center;align-items:center;
  -webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;
  font-size:1.2rem;line-height:1;
  background:linear-gradient(135deg,#e0b356,#8a2a1f);color:#2a1608;
  box-shadow:0 0 18px rgba(224,179,86,0.5);
  animation:talismanIconGlow 2.6s ease-in-out infinite;
}
@keyframes talismanIconGlow{0%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 4px rgba(224,179,86,0.4));}50%{transform:translateY(-4px) scale(1.06);filter:drop-shadow(0 0 12px rgba(224,179,86,0.8));}}
.talisman-promo-text{position:relative;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;width:0;padding-right:8px;}
.talisman-promo-tag{display:block;font-size:0.6rem;letter-spacing:0.1em;color:#f0c78a;font-weight:700;line-height:1.2;margin:0 0 3px;}
.talisman-promo-text h3{font-size:0.98rem;color:var(--text-main);margin:0 0 2px;line-height:1.3;font-weight:700;font-family:var(--font-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.talisman-promo-text p{font-size:0.72rem;color:var(--text-muted);margin:0;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.talisman-promo-arrow{
  position:relative;-webkit-box-flex:0;-webkit-flex:0 0 28px;-ms-flex:0 0 28px;flex:0 0 28px;
  width:28px;height:28px;min-width:28px;border-radius:50%;margin-left:auto;
  display:-webkit-box;display:-webkit-flex;display:flex;
  -webkit-box-align:center;-webkit-align-items:center;align-items:center;
  -webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;
  background:rgba(255,255,255,0.08);color:#f0c78a;font-size:0.78rem;
}
@media (max-width:360px){
  .talisman-promo-banner{padding:8px 12px;min-height:56px;}
  .talisman-promo-icon{flex-basis:38px;width:38px;height:38px;min-width:38px;max-width:38px;font-size:1.05rem;margin-right:10px;}
  .talisman-promo-text h3{font-size:0.86rem;}
  .talisman-promo-text p{font-size:0.66rem;}
  .talisman-promo-arrow{flex-basis:22px;width:22px;height:22px;min-width:22px;font-size:0.68rem;}
}

/* --- 페이지 히어로 --- */
.talisman-hero{
  position:relative;border-radius:var(--radius-lg);padding:28px 20px;overflow:hidden;text-align:center;
  background:
    radial-gradient(circle at 20% 15%, rgba(224,179,86,0.22), transparent 50%),
    radial-gradient(circle at 85% 80%, rgba(138,42,31,0.35), transparent 55%),
    linear-gradient(160deg, #1c0f06 0%, var(--purple-deep) 60%, var(--bg-navy) 100%);
  border:1px solid rgba(224,179,86,0.35);
  box-shadow:0 0 30px rgba(224,179,86,0.18);
}
.talisman-hero .talisman-hero-icon{font-size:2.4rem;margin-bottom:8px;display:block;color:var(--gold-light);animation:talismanIconGlow 3s ease-in-out infinite;}
.talisman-hero h1{font-size:1.3rem;color:var(--gold-light);margin:0 0 6px;text-shadow:0 0 16px rgba(224,179,86,0.4);}
.talisman-hero p.talisman-sub{font-size:0.8rem;color:var(--text-muted);margin:4px 0 0;}
.talisman-hero .talisman-quote{font-size:0.78rem;color:#f0c78a;margin:10px 0 0;font-style:italic;}

/* --- 부적 용도 선택 그리드 --- */
.talisman-purpose-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.talisman-purpose-btn{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);
  font-size:0.72rem;color:var(--text-muted);cursor:pointer;transition:.15s ease;font-family:inherit;
}
.talisman-purpose-btn i{font-size:1.05rem;color:var(--text-faint);transition:.15s ease;}
.talisman-purpose-btn:active{opacity:0.85;}
.talisman-purpose-btn.active{
  background:linear-gradient(135deg,rgba(224,179,86,0.22),rgba(138,42,31,0.22));
  border-color:rgba(224,179,86,0.6);color:var(--gold-light);
  box-shadow:0 0 14px rgba(224,179,86,0.25);
}
.talisman-purpose-btn.active i{color:var(--gold-light);}
@media (max-width:360px){
  .talisman-purpose-grid{grid-template-columns:repeat(3,1fr);gap:6px;}
  .talisman-purpose-btn{padding:9px 3px;font-size:0.66rem;}
}

/* --- 부적 카드(핵심 시각물) --- */
.talisman-card-wrap{display:flex;justify-content:center;padding:10px 0 4px;}
.talisman-card{
  position:relative;width:220px;aspect-ratio:2/3;border-radius:10px;
  background:
    radial-gradient(circle at 25% 20%, rgba(224,179,86,0.25), transparent 45%),
    linear-gradient(170deg, #f3dfa0 0%, #e8ce85 45%, #d9b96a 100%);
  border:3px solid #7a2a1a;
  box-shadow:0 10px 34px rgba(0,0,0,0.55), inset 0 0 26px rgba(122,42,26,0.18);
  padding:18px 14px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  overflow:hidden;
}
.talisman-card::before{
  content:'';position:absolute;inset:8px;border:1.5px solid rgba(122,42,26,0.5);border-radius:6px;pointer-events:none;
}
.talisman-card-grade{
  position:absolute;top:10px;right:10px;font-family:var(--font-heading);font-weight:700;
  font-size:0.85rem;padding:3px 9px;border-radius:999px;color:#2a1608;
  background:var(--gradient-gold);box-shadow:0 0 10px rgba(224,179,86,0.6);
}
.talisman-card-glyph{
  position:relative;font-size:2.6rem;color:#7a2a1a;margin-top:10px;
  text-shadow:0 1px 0 rgba(255,255,255,0.4);
}
.talisman-card-guardian{position:relative;font-size:0.72rem;color:#5a2a10;font-weight:700;letter-spacing:0.04em;margin-top:6px;}
.talisman-card-name{position:relative;font-size:0.98rem;color:#3d1c08;font-weight:700;margin-top:4px;font-family:var(--font-heading);}
.talisman-card-script{position:relative;font-size:0.72rem;color:#7a4a1c;margin-top:4px;letter-spacing:0.08em;word-break:break-all;text-align:center;}
.talisman-card-hidden{position:absolute;bottom:10px;left:10px;font-size:0.62rem;color:rgba(122,42,26,0.55);}
.talisman-card-sparkle{position:absolute;color:rgba(224,179,86,0.85);animation:tarotStarTwinkle 2.4s ease-in-out infinite;}
.talisman-card-sparkle.t1{top:14%;left:14%;font-size:0.6rem;}
.talisman-card-sparkle.t2{top:20%;right:16%;font-size:0.5rem;animation-delay:0.5s;}
.talisman-card-sparkle.t3{bottom:24%;left:20%;font-size:0.55rem;animation-delay:1s;}

/* --- 등급/희귀도 배지 --- */
.talisman-rarity-badge{
  display:inline-flex;align-items:center;gap:4px;font-size:0.7rem;font-weight:700;
  padding:4px 12px;border-radius:999px;margin-top:12px;color:#2a1608;
  background:var(--gradient-gold);box-shadow:var(--shadow-gold-glow);
}

/* --- 정보 카드/그리드 --- */
.talisman-info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px;}
.talisman-info-item{
  padding:12px 10px;border-radius:var(--radius-sm);text-align:center;
  background:rgba(255,255,255,0.04);border:1px solid rgba(224,179,86,0.18);
}
.talisman-info-item .ti-icon{font-size:1.1rem;color:var(--gold-light);margin-bottom:4px;display:block;}
.talisman-info-item .ti-label{font-size:0.62rem;color:var(--text-faint);display:block;margin-bottom:2px;}
.talisman-info-item .ti-value{font-size:0.82rem;color:var(--text-main);font-weight:700;}

/* --- 오늘의 예언 박스 (밤에만 공개) --- */
.talisman-prophecy-box{
  margin-top:14px;padding:16px;border-radius:var(--radius-sm);text-align:center;
  background:linear-gradient(135deg,rgba(224,179,86,0.08),rgba(122,42,26,0.15));
  border:1px solid rgba(224,179,86,0.25);
}
.talisman-prophecy-box.locked{color:var(--text-faint);font-size:0.82rem;}
.talisman-prophecy-box .tp-text{font-size:0.86rem;color:var(--text-main);line-height:1.7;font-style:italic;}

/* --- 진화 단계 표시줄 --- */
.talisman-evolve-track{display:flex;justify-content:space-between;gap:4px;margin-top:14px;}
.talisman-evolve-step{
  flex:1;text-align:center;padding:8px 2px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);
  font-size:0.6rem;color:var(--text-faint);
}
.talisman-evolve-step i{display:block;font-size:0.9rem;margin-bottom:3px;color:var(--text-faint);}
.talisman-evolve-step.reached{background:linear-gradient(135deg,rgba(224,179,86,0.18),rgba(122,42,26,0.15));border-color:var(--gold);color:var(--gold-light);}
.talisman-evolve-step.reached i{color:var(--gold-light);}

/* --- 오늘의 에너지 게이지 --- */
.talisman-energy-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.talisman-energy-row .te-label{flex:0 0 52px;font-size:0.74rem;color:var(--text-muted);}
.talisman-energy-track{flex:1;height:8px;border-radius:6px;background:rgba(255,255,255,0.08);overflow:hidden;}
.talisman-energy-fill{height:100%;border-radius:6px;transition:width .6s ease;}
.talisman-energy-row .te-pct{flex:0 0 34px;text-align:right;font-size:0.72rem;color:var(--text-faint);}

/* --- 행운숫자 찾기 게임 슬롯 --- */
.talisman-number-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px;}
.talisman-number-slot{
  aspect-ratio:1/1;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--purple-deep),var(--surface));border:1.5px solid rgba(224,179,86,0.3);
  font-size:1.1rem;font-weight:700;color:var(--gold-light);cursor:pointer;transition:.2s ease;
}
.talisman-number-slot.correct{background:var(--gradient-gold);color:#2a1608;border-color:transparent;box-shadow:var(--shadow-gold-glow);}
.talisman-number-slot.wrong{opacity:0.35;}

/* --- 부적함(정원) 그리드 --- */
.talisman-garden-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px;}
.talisman-garden-item{
  aspect-ratio:1/1;border-radius:var(--radius-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:linear-gradient(160deg,#3a2410,#211407);border:1px solid rgba(224,179,86,0.25);
  font-size:0.6rem;color:var(--text-muted);position:relative;
}
.talisman-garden-item i{font-size:1.1rem;color:var(--gold-light);}
.talisman-garden-item .tg-check{position:absolute;top:3px;right:3px;width:14px;height:14px;border-radius:50%;background:var(--success);display:flex;align-items:center;justify-content:center;font-size:0.5rem;color:#0c1620;}

/* --- 합성 슬롯 --- */
.talisman-combo-wrap{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0;flex-wrap:wrap;}
.talisman-combo-slot{
  width:58px;height:58px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.04);border:1.5px dashed rgba(224,179,86,0.35);color:var(--text-faint);font-size:1.1rem;
}
.talisman-combo-slot.filled{background:linear-gradient(160deg,var(--purple-deep),var(--surface));border-style:solid;border-color:var(--gold);color:var(--gold-light);}
.talisman-combo-arrow{color:var(--text-faint);font-size:0.9rem;}

/* --- 부적함 탭 --- */
.talisman-tab-bar{display:flex;gap:8px;margin:18px 0 14px;}
.talisman-tab-bar .tab-item{flex:1;text-align:center;justify-content:center;}

/* --- 이름 부적문자 카드 --- */
.talisman-script-card{padding:20px;text-align:center;}
.talisman-script-display{
  font-size:1.3rem;letter-spacing:0.15em;color:var(--gold-light);margin:10px 0;
  word-break:break-all;text-shadow:0 0 12px rgba(224,179,86,0.4);
}

@media (max-width:360px){
  .talisman-info-grid{grid-template-columns:repeat(2,1fr);}
  .talisman-number-grid{gap:6px;}
  .talisman-garden-grid{grid-template-columns:repeat(3,1fr);}
}

/* =========================================================
   🍀 행운 커뮤니티 공용 컴포넌트 (luck-engine.js 연동)
   ========================================================= */

/* --- 헤더 행운지수 위젯 --- */
.luck-header-widget{display:flex;align-items:center;gap:8px;cursor:default;}
.luck-ring{
  position:relative;width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(var(--gold) calc(var(--luck-progress,10)*1%), rgba(255,255,255,0.1) 0);
  display:flex;align-items:center;justify-content:center;
}
.luck-ring::before{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--bg-deep,#05040f);}
.luck-ring span{position:relative;font-size:0.56rem;font-weight:700;color:var(--gold-light);}
.luck-header-text{display:flex;flex-direction:column;line-height:1.2;}
.luck-header-text b{font-size:0.85rem;color:var(--gold-light);}
.luck-header-text small{font-size:0.6rem;color:var(--text-faint);}

/* --- 출석 스탬프 캘린더 --- */
.attendance-strip{display:flex;align-items:center;gap:10px;padding:12px 14px;}
.attendance-strip .att-label{font-size:0.78rem;color:var(--text-muted);flex-shrink:0;}
.attendance-dots{display:flex;gap:5px;flex:1;}
.attendance-dot{
  flex:1;aspect-ratio:1/1;max-width:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);font-size:0.6rem;color:var(--text-faint);
}
.attendance-dot.checked{background:var(--gradient-gold);color:#2a1608;border-color:transparent;box-shadow:0 0 8px rgba(224,179,86,0.4);}
.attendance-streak-badge{flex-shrink:0;font-size:0.7rem;color:var(--gold-light);white-space:nowrap;}

/* --- 오늘의 행운 카드 --- */
.daily-luck-card{padding:16px 18px;}
.daily-luck-card .dlc-title{display:flex;align-items:center;gap:6px;font-size:0.85rem;color:var(--gold-light);margin:0 0 12px;font-weight:600;}
.daily-luck-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.daily-luck-item{
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);
}
.daily-luck-item i{color:var(--gold-light);font-size:0.95rem;}
.daily-luck-item .dl-label{font-size:0.62rem;color:var(--text-faint);}
.daily-luck-item .dl-value{font-size:0.82rem;color:var(--text-main);font-weight:600;}
.daily-luck-quote{margin:12px 0 0;font-size:0.78rem;color:var(--text-muted);font-style:italic;text-align:center;}

/* --- 행운 보내기 리액션 바 --- */
.reaction-bar{display:flex;gap:6px;margin-top:10px;}
.reaction-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);color:var(--text-muted);
  font-size:0.6rem;cursor:pointer;transition:.15s ease;font-family:inherit;
}
.reaction-btn .rb-emoji{font-size:0.95rem;}
.reaction-btn .rb-count{font-size:0.62rem;color:var(--text-faint);}
.reaction-btn.active{background:linear-gradient(135deg,rgba(224,179,86,0.2),rgba(122,42,26,0.18));border-color:rgba(224,179,86,0.5);color:var(--gold-light);}
.reaction-btn.active .rb-count{color:var(--gold-light);}
.reaction-btn:active{transform:scale(0.95);}

/* --- 신고 버튼 & 모달 --- */
.report-inline-btn{background:none;border:none;color:var(--text-faint);font-size:0.68rem;cursor:pointer;display:inline-flex;align-items:center;gap:3px;padding:2px 4px;}
.report-inline-btn:hover{color:var(--danger);}
.report-reason-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:6px;}
.report-reason-btn{
  padding:10px 6px;border-radius:var(--radius-sm);background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);color:var(--text-main);font-size:0.8rem;cursor:pointer;font-family:inherit;
}
.report-reason-btn:hover{border-color:var(--danger);color:var(--danger);}

/* --- 인기 소원 랭킹 스트립 --- */
.hot-wish-strip{display:flex;gap:10px;overflow-x:auto;padding:4px 0 8px;scrollbar-width:none;}
.hot-wish-strip::-webkit-scrollbar{display:none;}
.hot-wish-card{
  flex:0 0 auto;min-width:170px;padding:12px 14px;border-radius:var(--radius-sm);
  background:linear-gradient(160deg,rgba(224,179,86,0.1),rgba(122,42,26,0.12));border:1px solid rgba(224,179,86,0.3);
}
.hot-wish-card .hw-rank{font-size:0.6rem;color:var(--gold-light);margin-bottom:4px;}
.hot-wish-card .hw-content{font-size:0.76rem;color:var(--text-main);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.hot-wish-card .hw-meta{font-size:0.62rem;color:var(--text-faint);margin-top:6px;}

/* --- 같은 목표 매칭 배지/카드 --- */
.goal-tag-picker{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.goal-tag-chip{
  display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:var(--text-muted);
  font-size:0.72rem;cursor:pointer;font-family:inherit;
}
.goal-tag-chip.active{background:var(--gradient-gold);color:#2a1608;border-color:transparent;}
.goal-match-badge{display:inline-flex;align-items:center;gap:4px;font-size:0.65rem;color:#8be9d0;background:rgba(95,227,179,0.1);border:1px solid rgba(95,227,179,0.3);border-radius:999px;padding:3px 9px;margin-top:6px;}

/* --- 배지 도감 --- */
.badge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.badge-item{
  aspect-ratio:1/1;border-radius:var(--radius-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);font-size:0.58rem;color:var(--text-faint);text-align:center;padding:4px;
}
.badge-item .bi-icon{font-size:1.4rem;filter:grayscale(1);opacity:0.35;}
.badge-item.earned{background:linear-gradient(160deg,rgba(224,179,86,0.15),rgba(122,42,26,0.12));border-color:rgba(224,179,86,0.4);color:var(--gold-light);}
.badge-item.earned .bi-icon{filter:none;opacity:1;}

@media (max-width:360px){
  .daily-luck-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .badge-grid{grid-template-columns:repeat(3,1fr);}
}

/* =========================================================
   🍀 복주머니 리워드 시스템 공용 컴포넌트 (pouch-engine.js 연동)
   ========================================================= */

/* --- 헤더 복주머니 위젯 --- */
.pouch-header-widget{
  display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;
  background:linear-gradient(135deg,rgba(224,179,86,0.16),rgba(122,42,26,0.14));
  border:1px solid rgba(224,179,86,0.35);color:var(--gold-light);text-decoration:none;
  font-size:0.82rem;font-weight:700;white-space:nowrap;
}
.pouch-header-widget .pouch-emoji{font-size:0.95rem;}

/* --- 복주머니 요약 카드(허브 상단) --- */
.pouch-balance-card{
  padding:22px 20px;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(224,179,86,0.14),rgba(74,42,140,0.16));
  border:1px solid rgba(224,179,86,0.35);
}
.pouch-balance-emoji{font-size:2rem;filter:drop-shadow(0 0 10px rgba(224,179,86,0.5));}
.pouch-balance-num{font-size:2.2rem;font-weight:800;color:var(--gold-light);margin:6px 0 2px;font-family:var(--font-heading);}
.pouch-balance-label{font-size:0.78rem;color:var(--text-muted);}
.pouch-balance-stats{display:flex;justify-content:center;gap:22px;margin-top:14px;}
.pouch-balance-stats div{display:flex;flex-direction:column;align-items:center;gap:2px;}
.pouch-balance-stats b{font-size:1rem;color:var(--text-main);}
.pouch-balance-stats span{font-size:0.62rem;color:var(--text-faint);}
.pouch-title-badge{
  display:inline-flex;align-items:center;gap:5px;margin-top:12px;padding:5px 14px;border-radius:999px;
  background:rgba(255,255,255,0.06);border:1px solid rgba(224,179,86,0.3);font-size:0.76rem;color:var(--gold-light);
}

/* --- 복주머니 사용처 그리드(허브 메뉴) --- */
.pouch-menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0;}
.pouch-menu-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;border-radius:var(--radius-md);
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);color:var(--text-main);
  text-decoration:none;text-align:center;cursor:pointer;font-family:inherit;
}
.pouch-menu-item i{font-size:1.35rem;color:var(--gold-light);}
.pouch-menu-item span{font-size:0.78rem;font-weight:600;}
.pouch-menu-item small{font-size:0.62rem;color:var(--text-faint);}
.pouch-menu-item:active{transform:scale(0.97);}

/* --- 소원 응원(복주머니 보내기) 금액 선택 --- */
.pouch-amount-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:12px 0;}
.pouch-amount-btn{
  padding:10px 2px;border-radius:var(--radius-sm);background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);color:var(--text-main);font-size:0.8rem;font-weight:700;
  cursor:pointer;font-family:inherit;text-align:center;
}
.pouch-amount-btn.active{background:var(--gradient-gold);color:#2a1608;border-color:transparent;box-shadow:var(--shadow-gold-glow);}
.pouch-amount-btn small{display:block;font-size:0.55rem;font-weight:400;color:inherit;opacity:0.75;margin-top:1px;}

/* --- 복주머니 보내기 버튼(소원 카드 내) --- */
.pouch-send-btn{
  display:flex;align-items:center;justify-content:center;gap:5px;width:100%;margin-top:8px;padding:9px 0;
  border-radius:var(--radius-sm);background:linear-gradient(135deg,rgba(224,179,86,0.18),rgba(74,42,140,0.16));
  border:1px solid rgba(224,179,86,0.4);color:var(--gold-light);font-size:0.78rem;font-weight:600;cursor:pointer;font-family:inherit;
}
.pouch-send-btn:active{transform:scale(0.98);}

/* --- 소원나무 성장 --- */
.wish-tree-box{display:flex;align-items:center;gap:12px;padding:10px 4px;}
.wish-tree-icon{font-size:1.6rem;color:var(--success);flex-shrink:0;}
.wish-tree-track{flex:1;height:8px;border-radius:999px;background:rgba(255,255,255,0.08);overflow:hidden;}
.wish-tree-fill{height:100%;background:linear-gradient(90deg,#5fe3b3,#e0b356);border-radius:999px;transition:width .4s ease;}
.wish-tree-label{font-size:0.66rem;color:var(--text-faint);white-space:nowrap;}

/* --- 행운상자 열기 --- */
.lucky-box-stage{
  position:relative;height:180px;display:flex;align-items:center;justify-content:center;margin:16px 0;
  border-radius:var(--radius-lg);background:radial-gradient(ellipse at center, rgba(224,179,86,0.18), transparent 70%);
  cursor:pointer;user-select:none;
}
.lucky-box-icon{font-size:4rem;filter:drop-shadow(0 0 16px rgba(224,179,86,0.5));transition:transform .25s ease;}
.lucky-box-stage:active .lucky-box-icon{transform:scale(0.9) rotate(-4deg);}
.lucky-box-reward-card{padding:22px;text-align:center;}
.lucky-box-reward-icon{font-size:2.4rem;margin-bottom:8px;display:block;}

/* --- 오늘의 행운 버프 선택 --- */
.buff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0;}
.buff-item{
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);color:var(--text-main);font-size:0.72rem;
  cursor:pointer;font-family:inherit;
}
.buff-item.owned{background:linear-gradient(160deg,rgba(95,227,179,0.15),rgba(95,227,179,0.05));border-color:rgba(95,227,179,0.4);color:var(--success);}
.buff-item i, .buff-item .buff-emoji{font-size:1.2rem;}
.buff-fun-note{font-size:0.68rem;color:var(--text-faint);text-align:center;margin:6px 0 0;font-style:italic;}

/* --- 행운편지 --- */
.letter-envelope{
  padding:16px 18px;border-radius:var(--radius-md);background:linear-gradient(160deg,rgba(123,79,209,0.14),rgba(224,179,86,0.08));
  border:1px solid rgba(224,179,86,0.3);margin-bottom:10px;cursor:pointer;
}
.letter-envelope .le-from{font-size:0.66rem;color:var(--gold-light);margin:0 0 4px;}
.letter-envelope .le-msg{font-size:0.85rem;color:var(--text-main);margin:0;}
.letter-envelope.closed{text-align:center;color:var(--text-faint);}
.letter-envelope.closed i{font-size:1.4rem;margin-bottom:4px;display:block;color:var(--gold-light);}

/* --- 랭킹 리스트 (나눔 우선 강조) --- */
.pouch-rank-section{margin-bottom:18px;}
.pouch-rank-section h4{display:flex;align-items:center;gap:6px;font-size:0.85rem;color:var(--gold-light);margin:0 0 8px;}
.pouch-rank-list{display:flex;flex-direction:column;gap:6px;}
.pouch-rank-row{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);
}
.pouch-rank-row .pr-no{width:20px;text-align:center;font-size:0.78rem;font-weight:700;color:var(--gold-light);flex-shrink:0;}
.pouch-rank-row .pr-nick{flex:1;font-size:0.8rem;color:var(--text-main);}
.pouch-rank-row .pr-val{font-size:0.78rem;color:var(--success);font-weight:700;}
.pouch-rank-empty{font-size:0.78rem;color:var(--text-faint);text-align:center;padding:14px 0;}

/* --- 특별부적 제작(재료 등급) --- */
.craft-tier-grid{display:flex;flex-direction:column;gap:10px;margin:14px 0;}
.craft-tier-card{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--radius-md);
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);
}
.craft-tier-card.locked{opacity:0.55;}
.craft-tier-icon{font-size:1.6rem;color:var(--gold-light);flex-shrink:0;width:34px;text-align:center;}
.craft-tier-info{flex:1;}
.craft-tier-info b{font-size:0.85rem;color:var(--text-main);display:block;}
.craft-tier-info small{font-size:0.68rem;color:var(--text-faint);}
.craft-tier-btn{
  flex-shrink:0;padding:8px 14px;border-radius:999px;font-size:0.72rem;font-weight:700;cursor:pointer;
  background:var(--gradient-gold);color:#2a1608;border:none;font-family:inherit;
}
.craft-tier-btn:disabled{background:rgba(255,255,255,0.08);color:var(--text-faint);cursor:not-allowed;}

/* --- 오늘의 나눔 추천 --- */
.sharing-rec-card{
  display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,rgba(123,79,209,0.14),rgba(224,179,86,0.08));border:1px solid rgba(224,179,86,0.25);
  margin-bottom:8px;
}
.sharing-rec-card .src-icon{font-size:1.1rem;flex-shrink:0;}
.sharing-rec-card .src-title{font-size:0.8rem;color:var(--text-main);margin:0 0 2px;font-weight:600;}
.sharing-rec-card .src-desc{font-size:0.72rem;color:var(--text-muted);margin:0;}

@media (max-width:360px){
  .pouch-menu-grid{grid-template-columns:repeat(2,1fr);}
  .pouch-amount-grid{grid-template-columns:repeat(5,1fr);gap:4px;}
  .buff-grid{grid-template-columns:repeat(3,1fr);gap:6px;}
  .pouch-balance-stats{gap:14px;}
}