/* Extracted from index.html inline <style> blocks. Keep order for cascade fidelity. */

/* --- block 1 --- */
/* ─── 전역 버튼 터치 반응성 ─── */
button, [role="button"], input[type="button"], input[type="submit"], label[for] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* 닫기 버튼 최소 터치 영역 44px 보장 */
button[onclick*="close"], button[aria-label*="닫"] {
  min-width: 44px; min-height: 44px;
}

/* ─── 변수 & 리셋 ─── */
:root{
  /* 공통 레이아웃 수치 */
  --radius-lg: 20px;
  --spacing-md: 16px;
  --card-shadow: 0 8px 30px rgba(0,0,0,0.05);

  --pink:#FF8BA7;--pink-l:#FFB7B2;--peach:#FFDAC1;
  --wood-bg:#E8F5E9;--wood-tx:#2E7D32;
  --fire-bg:#FFEBEE;--fire-tx:#C62828;
  --earth-bg:#FFF8E1;--earth-tx:#E65100;
  --metal-bg:#F5F5F5;--metal-tx:#546E7A;
  --water-bg:#E3F2FD;--water-tx:#1565C0;
  --radius:16px;--shadow:0 4px 20px rgba(255,139,167,.13);
}

.theme-pig {
  --bg-color: #FFF9F9;
  --card-bg: #FFFFFF;
  --card-glass: rgba(255,255,255,0.86);
  --text-main: #4A4A4A;
  --point-color: #FF85A2;
  --border-color: #FFE0E6;
}

.theme-neo {
  --bg-color: #1A1A1B;
  --card-bg: #2D2D30;
  --card-glass: rgba(45,45,48,0.82);
  --text-main: #E1E1E1;
  --point-color: #FFD700;
  --border-color: #3F3F42;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:'Gowun Dodum',sans-serif}
/* overflow-x:hidden을 html에 설정하면 html+body 이중 스크롤 컨테이너 → iOS 수직 스크롤 차단
   body의 overflow-x:hidden이 visible인 html을 통해 뷰포트로 전파되므로 html에는 설정 불필요 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body{background-color:#FFF5F8;background:var(--bg-color, linear-gradient(135deg,#FFF5F8 0%,#FFF9F5 50%,#F5F8FF 100%));
  min-height:100dvh;color:var(--text-main, #3D3D3D);padding:0;overflow-x:hidden; transition: background 0.4s ease, color 0.4s ease;position:relative;
  overscroll-behavior-y:none;
  -webkit-overflow-scrolling:touch;
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,139,167,.14), transparent 35%),
    radial-gradient(circle at 85% 78%, rgba(124,58,237,.14), transparent 38%),
    radial-gradient(circle at 50% 12%, rgba(255,215,0,.09), transparent 32%);
}
body::after{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.18;
  background-image:radial-gradient(rgba(255,255,255,.5) .6px, transparent .6px);
  background-size:3px 3px;
}
@media (max-width: 480px) {
  html { font-size: 14px; }
}
.wrap{
  width:100%;
  max-width:700px;
  margin:0 auto;
  position: relative;
  overflow-x: hidden;
  padding:0 10px calc(22px + env(safe-area-inset-bottom));
  padding-bottom:max(22px, calc(22px + env(safe-area-inset-bottom)));
  display:flex;
  flex-direction:column;
  z-index:1;
  isolation:isolate;
}



/* ─── 로딩 오버레이 ─── */
#lib-overlay{position:fixed;inset:0;background:var(--bg-color, linear-gradient(135deg,#FFF5F8,#FFF0FA));
  z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
#lib-overlay.done{display:none}
.pig-float{font-size:4rem;animation:float 1.8s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.dots{display:flex;gap:7px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--point-color, var(--pink-l));animation:pulse 1.2s ease-in-out infinite}
.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}
@keyframes pulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
#lib-msg{font-size:1rem;font-weight:700;color:var(--point-color, var(--pink))}
#lib-sub{font-size:.8rem;color:#bbb}

/* ─── 공통 카드 ─── */
.card{background:var(--card-glass, var(--card-bg, #fff));border-radius:var(--radius-lg, 20px);padding:22px;
  box-shadow:var(--card-shadow, 0 2px 24px rgba(255,139,167,.1));border:1px solid var(--border-color, rgba(255,183,178,.15));margin-bottom:var(--spacing-md, 16px); transition: background 0.4s ease, border-color 0.4s ease;backdrop-filter:blur(6px) saturate(110%);-webkit-backdrop-filter:blur(6px) saturate(110%);}
/* 마우스 기기에서만 풀 블러 적용 (터치 기기 GPU 절약) */
@media (pointer: fine) { .card { backdrop-filter:blur(10px) saturate(120%); -webkit-backdrop-filter:blur(10px) saturate(120%); } }
@media (min-width: 768px){
  .card{padding:18px}
}
@media (max-width: 480px){
  .card{padding:16px}
}
.sec-title{color:var(--point-color, var(--pink));font-weight:700;font-size:1.05rem;
  margin-bottom:14px;display:flex;align-items:center;gap:8px}
.sec-title::before{content:'';display:block;width:4px;height:18px;
  background:var(--point-color, linear-gradient(var(--pink),var(--pink-l)));border-radius:2px}

/* Force content to respect container width */
img, canvas, svg, video {
  max-width: 100%;
  height: auto;
}

/* Global image fallback baseline */
img {
  background-color: #e5e5e5;
}

img.img-fallback-broken {
  background-color: #e5e5e5 !important;
  color: transparent;
}
.manse-grid {
  /* Ensure grid fits */
  width: 100%;
  overflow-x: auto; /* Allow horizontal scroll if needed on tiny screens */
}
/* Ensure result page does not break layout */
#resultPage {
  width: 100%;
  max-width: 700px;
  box-sizing: border-box;
  overflow-x: hidden;
  margin: 0 auto;
  /* Keep first content clear of fixed fsn top bar on mobile. */
  padding-top: calc(72px + env(safe-area-inset-top, 0px));
}
#resultPage > * {
  width: 100%;
  max-width: 100%;
}
#inputPage,
#resultPage,
.wrap > footer {
  width: 100%;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
#resultPage .card,
#resultPage .ia-item,
#resultPage .ia-body,
#resultPage #iaAcc {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}


.theme-switch-wrapper {
  position: fixed !important;
  left: auto;
  right: max(12px, env(safe-area-inset-right, 0px));
  top: auto;
  bottom: max(10px, env(safe-area-inset-bottom, 0px));
  transform: none;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(300px, calc(100vw - 20px));
  pointer-events: auto;
  isolation: isolate;
  background: color-mix(in srgb, var(--card-bg, #fff) 90%, transparent);
  padding: 6px 10px;
  border-radius: 30px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(8px);
  margin-bottom: 0;
  transition: transform 0.25s ease, background 0.4s ease, border-color 0.4s ease, box-shadow 0.3s ease;
  border: 1px solid var(--border-color, rgba(255,183,178,.3));
}

.theme-switch-wrapper > * {
  pointer-events: auto;
}

.theme-switch-wrapper:hover,
.theme-switch-wrapper:focus-within {
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.22);
}

.theme-toggle-label {
  font-weight: 700;
  font-size: 0.8rem;
  color: #FF8BA7;
  transition: color 0.4s ease, opacity 0.2s ease;
  white-space: nowrap;
  opacity: 0.35;
  user-select: none;
}

.theme-switch-wrapper:hover .theme-toggle-label,
.theme-switch-wrapper:focus-within .theme-toggle-label {
  opacity: 1;
}

.theme-switch-wrapper.theme-toggle-hidden {
  display: none !important;
}

body.neo-mode .theme-switch-wrapper {
  background: rgba(18, 18, 24, 0.82);
  border-color: rgba(255, 215, 0, 0.26);
}

body.neo-mode .theme-toggle-label {
  color: #FFD700;
}

.theme-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  flex-shrink: 0;
}
.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #FFE0E6;
  transition: .4s ease-in-out;
  border-radius: 34px;
  overflow: hidden;
}
.slider::before {
  content: "";
  position: absolute;
  height: 26px;
  width: 36px;
  left: 4px;
  bottom: 4px;
  background-color: #FFB6C1;
  transition: .4s ease-in-out;
  border-radius: 13px;
  z-index: 2;
}
.nose-hole {
  position: absolute;
  width: 6px;
  height: 10px;
  background-color: #FF85A2;
  border-radius: 50%;
  top: 12px;
  transition: .4s ease-in-out;
  z-index: 3;
}
.hole-left { left: 14px; }
.hole-right { left: 24px; }

.paw-pad {
  position: absolute;
  background-color: var(--point-color, #FFD700);
  border-radius: 50%;
  opacity: 0;
  transition: .4s ease-in-out;
  z-index: 3;
  transform: scale(0);
}
.pad-1 { width: 5px; height: 6px; top: 8px; left: 30px; transform-origin: bottom center; }
.pad-2 { width: 6px; height: 7px; top: 5px; left: 36px; transform-origin: bottom center; }
.pad-3 { width: 6px; height: 7px; top: 5px; left: 43px; transform-origin: bottom center; }
.pad-4 { width: 5px; height: 6px; top: 8px; left: 49px; transform-origin: bottom center; }

input:checked + .slider {
  background-color: #3F3F42;
}
input:checked + .slider::before {
  transform: translateX(26px);
  width: 22px;
  height: 16px;
  bottom: 4px;
  border-radius: 10px 10px 15px 15px;
  background-color: var(--point-color, #FFD700);
}
input:checked + .slider .nose-hole {
  opacity: 0;
  transform: translateX(26px) scale(0);
}
input:checked + .slider .paw-pad {
  opacity: 1;
  transform: scale(1);
}

/* ─── Divine Focus Mode (Tarot) ─── */
.tarot-focus-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 20, 0.6);
  backdrop-filter: blur(15px) brightness(0.3);
  -webkit-backdrop-filter: blur(15px) brightness(0.3);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.tarot-focus-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.tarot-card-container {
  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 10;
  position: relative;
  transform-origin: center center;
}
.tarot-card-container.divine-focus, .oracle-card-m.divine-focus {
  position: fixed;
  top: 50%;
  left: 50%;
  /* Important: maintain flipped state if needed, but transform is complex here due to preserved-3d */
  /* If flipped uses rotateY(180deg), we need to include it or wrapper it. */
  /* For oracle-card-m, it uses transform for flip. */
  /* We should probably wrap the card in a focus container or handle transform carefully. */
  /* Simplified for now: just scale and recenter, hoping flip stays. */
  /* Actually, if we use fixed positioning, the context changes. */
  /* Let's try high z-index and transform only. */
  transform: translate(-50%, -50%) scale(1.3) rotateY(180deg) !important; 
  z-index: 9999;
  /* Reset transition for focus movement */
  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 480px) {
  .tarot-card-container.divine-focus, .oracle-card-m.divine-focus {
    transform: translate(-50%, -50%) scale(1.1) rotateY(180deg) !important;
  }
}
/* Ensure the card keeps its 3D depth */
.oracle-card-m.divine-focus {
  transform-style: preserve-3d;
}
.tarot-card-container.divine-focus .tarot-card {
  box-shadow: 0 0 50px rgba(255, 215, 0, 0.3);
}

/* ─── 개인정보 동의 모달 ─── */
#privacy-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(5px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
#privacy-modal-overlay.show {
  opacity: 1;
  visibility: visible;
}
.privacy-modal-card {
  background: var(--card-bg, #ffffff);
  width: 100%;
  max-width: 420px;
  border-radius: 24px;
  padding: 32px 24px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  transform: translateY(20px) scale(0.95);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid var(--border-color, rgba(255,183,178,.15));
}
#privacy-modal-overlay.show .privacy-modal-card {
  transform: translateY(0) scale(1);
}
.privacy-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--point-color, #FF8BA7);
  margin-bottom: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.privacy-title span {
  font-size: 2.2rem;
}
.privacy-content {
  font-size: 0.92rem;
  color: var(--text-main, #4A4A4A);
  line-height: 1.6;
  background: var(--bg-color, #f9fafb);
  padding: 18px;
  border-radius: 12px;
  margin-bottom: 24px;
  word-break: keep-all;
}
.privacy-content p {
  margin-bottom: 12px;
}
.privacy-content p:last-child {
  margin-bottom: 0;
}
.privacy-content strong {
  color: var(--point-color, #FF8BA7);
  font-weight: 700;
}
.privacy-btns {
  display: flex;
  gap: 12px;
}
.btn-cancel {
  flex: 1;
  padding: 14px;
  background: transparent;
  color: var(--text-main, #6b7280);
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.btn-cancel:hover {
  background: var(--bg-color, #f3f4f6);
}
.btn-agree {
  flex: 2;
  padding: 14px;
  background: linear-gradient(135deg, var(--point-color, #FF8BA7), var(--point-color, #FFB7B2));
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255,139,167,.3);
  transition: all 0.2s;
  font-family: inherit;
}
.btn-agree:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255,139,167,.4);
}

/* ─── 입력 ─── */
.logo-area{text-align:center;padding:20px 0 28px}
.pig-big{font-size:3.8rem;display:block;animation:float 2.5s ease-in-out infinite}
.pig-svg-wrap{animation:float 2.5s ease-in-out infinite;margin-bottom:6px;display:flex;justify-content:center;}
.logo-area h1{font-family:'Noto Serif KR',serif;color:var(--pink);font-size:1.9rem;font-weight:700;margin-top:8px}
.logo-area p{color:#bbb;font-size:.85rem;margin-top:4px}
.form-group{margin-bottom:18px}
.form-label{display:block;font-weight:700;font-size:.9rem;color:#555;margin-bottom:8px}
.inp{width:100%;padding:13px 15px;border:2px solid #F0EEF0;border-radius:12px;
  font-size:1rem;font-size:max(1rem, 16px);background:#FAFAFA;transition:all .25s;font-family:inherit;
  -webkit-appearance:none;appearance:none;min-height:48px;}
.inp:focus{outline:none;border-color:var(--pink-l);background:#fff;box-shadow:0 0 0 4px rgba(255,183,178,.15)}
/* iOS 줌 방지: 모든 input/select/textarea 16px 이상 유지 */
@media (max-width:768px){
  input,select,textarea{font-size:max(1rem,16px)!important;}
}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row2-mt8{margin-top:8px}

.form-radio-row{display:flex;gap:10px;margin-top:8px;font-size:.9rem}
.form-lunar-preview{font-size:.85rem;color:var(--point-color, #FF8BA7);margin-top:4px;display:none}

.form-group-surface{
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:10px;
  padding:15px;
  margin-top:15px;
}
.form-group-mt15{margin-top:15px}
.form-group-mb10{margin-bottom:10px}

.form-label-dark{color:#0f172a}
.form-label-compact{margin-bottom:6px}
.form-label-hint{font-size:.75rem;color:#64748b;font-weight:normal}

.form-country-select{margin-bottom:10px;background:#fff}
.time-correction-info{font-size:.85rem;color:#475569;line-height:1.4;display:none}

.birth-time-tip{
  background:#FFF5F8;
  border-radius:10px;
  padding:10px 13px;
  font-size:.8rem;
  color:#FF8BA7;
  font-weight:600;
  margin-bottom:16px;
  text-align:center;
}

.fortune-point-notice{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(99,102,241,.10), rgba(168,85,247,.10));
  border:1px solid rgba(139,92,246,.22);
  font-size:.82rem;
  color:#4c1d95;
}
.fortune-point-notice-meta{display:flex;flex-direction:column;gap:2px}
.fortune-point-current{font-size:.75rem;color:#6d28d9}
.fortune-point-charge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  border-radius:8px;
  background:linear-gradient(135deg, #7c3aed, #a855f7);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  white-space:nowrap;
}

.form-helper-desc{font-size:.85rem;color:#666;margin-top:-2px}
.btn-sub-mt4{margin-top:4px}
.compat-result-wrap{margin-top:14px}
.compat-test-results{margin-top:12px;font-size:.9rem;color:#333}

.modal-overlay-shell{display:none;width:100%}
.modal-overlay-juyuk{background:#080401}
.modal-overlay-sukuyo{background:#0a0c19}
.modal-overlay-astro{background:#0a0a14}
.modal-overlay-ziwei{position:fixed;inset:0;z-index:99998;background:#090515;overflow-y:auto}

.modal-top-nav{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  height:54px;
}
.modal-top-nav-juyuk{background:rgba(8,4,1,0.97);border-bottom:1px solid rgba(180,130,30,0.3)}
.modal-top-nav-sukuyo{background:rgba(10,12,25,0.97);border-bottom:1px solid rgba(167,139,250,0.3)}
.modal-top-nav-astro{background:rgba(10,10,20,0.97);border-bottom:1px solid rgba(125,42,232,0.3)}
.modal-top-nav-ziwei{background:rgba(9,5,21,0.97);border-bottom:1px solid rgba(232,121,249,0.3)}

.modal-nav-home{
  display:flex;
  align-items:center;
  gap:5px;
  background:transparent;
  border:none;
  font-family:'Gowun Dodum',serif;
  font-size:.88rem;
  font-weight:700;
  cursor:pointer;
  padding:10px 4px;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  letter-spacing:.5px;
}
.modal-nav-home-juyuk{color:rgba(220,185,80,0.9)}
.modal-nav-home-sukuyo{color:rgba(180,150,255,0.9)}
.modal-nav-home-astro{color:rgba(160,130,255,0.9)}
.modal-nav-home-ziwei{color:rgba(232,121,249,0.9)}

.modal-nav-title{
  font-family:'Gowun Dodum',serif;
  font-size:.82rem;
  letter-spacing:2.5px;
  pointer-events:none;
}
.modal-nav-title-juyuk{color:rgba(255,200,70,0.65)}
.modal-nav-title-sukuyo{color:rgba(167,139,250,0.65)}
.modal-nav-title-astro{color:rgba(125,42,232,0.65)}
.modal-nav-title-ziwei{color:rgba(232,121,249,0.65)}

.modal-nav-close{
  background:transparent;
  font-family:'Gowun Dodum',serif;
  font-size:.75rem;
  font-weight:700;
  cursor:pointer;
  padding:6px 9px;
  border-radius:10px;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.modal-nav-close-juyuk{border:1px solid rgba(220,185,80,0.45);color:rgba(220,185,80,0.9)}
.modal-nav-close-sukuyo{border:1px solid rgba(180,150,255,0.4);color:rgba(180,150,255,0.9)}
.modal-nav-close-astro{border:1px solid rgba(160,130,255,0.4);color:rgba(160,130,255,0.9)}
.modal-nav-close-ziwei{border:1px solid rgba(232,121,249,0.45);color:rgba(232,121,249,0.9)}

.modal-sheet-base{width:100%;box-sizing:border-box;word-break:keep-all;overflow-wrap:break-word}
.modal-content-inner-700{width:100%;max-width:700px;margin:0 auto;box-sizing:border-box}
.modal-content-enter-juyuk{animation:tcPageIn .35s cubic-bezier(0.22,1,0.36,1);padding-bottom:env(safe-area-inset-bottom,0px)}
.modal-content-pad-juyuk{padding:20px 16px calc(120px + env(safe-area-inset-bottom));box-sizing:border-box}
.modal-content-inner-wide{width:1200px;max-width:95%;margin:0 auto;padding:20px 16px calc(120px + env(safe-area-inset-bottom));box-sizing:border-box}
.modal-content-pad-astro{padding:20px 16px calc(120px + env(safe-area-inset-bottom));box-sizing:border-box}
.modal-content-pad-ziwei{padding:20px 14px calc(120px + env(safe-area-inset-bottom));box-sizing:border-box}

.tc-header-note{font-size:.72rem;color:rgba(180,140,60,.5)}
.tc-shell-emoji{font-size:1.6rem;margin-bottom:2px;opacity:.7}

.report-dashboard-head{margin-bottom:14px}
.report-dashboard-title{margin-bottom:0}

.toggle-wrap{display:flex;background:#F4F2F4;padding:5px;border-radius:13px;gap:5px}
.tog-btn{flex:1;border:none;padding:12px;border-radius:10px;background:transparent;
  cursor:pointer;color:#999;font-weight:700;font-size:.93rem;transition:all .25s;font-family:inherit}
.tog-btn.on{background:#fff;color:var(--pink);box-shadow:0 2px 8px rgba(255,183,178,.25)}
.tog-btn:active{transform:scale(.96);opacity:.8}
.btn-main{width:100%;padding:17px;background:linear-gradient(135deg,var(--pink-l),var(--pink));
  color:#fff;border:none;border-radius:14px;font-size:clamp(1rem,4vw,1.08rem);font-weight:700;
  cursor:pointer;box-shadow:0 5px 18px rgba(255,139,167,.35);transition:transform .15s,box-shadow .15s;font-family:inherit;
  min-height:52px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.btn-main:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(255,139,167,.45)}
.btn-main:active{transform:scale(.96);box-shadow:0 2px 10px rgba(255,139,167,.3);opacity:.9}
.btn-main:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-sub{width:100%;padding:15px;background:#fff;color:var(--pink);border:2px solid var(--pink-l);
  border-radius:14px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .25s;font-family:inherit;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.btn-sub:hover{background:#FFF5F8}
.btn-sub:active{transform:scale(.97);background:#FFE8EF;box-shadow:0 1px 4px rgba(255,139,167,.2)}

/* 유명인 카테고리 탭 */
.celeb-tab-wrap{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px;}
.celeb-tab-btn{
  padding:8px 14px;border-radius:20px;
  border:1.5px solid #f0c4a0;
  background:#fff8f4;color:#c0632a;
  font-size:12.5px;font-weight:600;cursor:pointer;
  font-family:inherit;white-space:nowrap;
  transition:background .18s,color .18s,border-color .18s,box-shadow .18s,transform .12s;
  box-shadow:0 1px 4px rgba(232,168,124,.10);
  min-height:40px;/* 터치 타겟 확보 */
  user-select:none;
}
.celeb-tab-btn:hover{
  background:#fde8d8;border-color:#e8a87c;
  transform:translateY(-1px);box-shadow:0 3px 8px rgba(232,168,124,.22);
}
.celeb-tab-btn:active{
  background:#f5d0b8;border-color:#d4935a;
  transform:scale(.96);box-shadow:0 1px 4px rgba(232,168,124,.18);
}
.celeb-tab-btn.active{
  background:linear-gradient(135deg,#e8a87c,#f0b896);
  color:#fff;border-color:#e8a87c;
  box-shadow:0 3px 10px rgba(232,168,124,.40);
  transform:translateY(-1px);
}
/* 유명인 이름 버튼 */
.celeb-name-area{
  display:flex;flex-wrap:wrap;gap:6px;
  max-height:260px;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:6px 2px;
  transition:opacity 0.15s ease;
  scrollbar-width:thin;scrollbar-color:#f0c4a0 transparent;
}
.celeb-name-area.fading{pointer-events:none;}/* 전환 중 클릭 차단 */
.celeb-name-area::-webkit-scrollbar{width:4px}
.celeb-name-area::-webkit-scrollbar-track{background:transparent}
.celeb-name-area::-webkit-scrollbar-thumb{background:#f0c4a0;border-radius:4px}
.celeb-btn{
  padding:9px 14px;
  background:#fff8f2;color:#c0632a;
  border:1.5px solid #f5d5b8;
  border-radius:14px;font-size:13px;font-weight:600;
  cursor:pointer;white-space:nowrap;
  font-family:inherit;
  min-height:38px;/* 터치 타겟 확보 */
  user-select:none;
  transition:background .18s,color .18s,border-color .18s,box-shadow .18s,transform .12s;
}
.celeb-btn:hover{
  background:#fde8d8;border-color:#e8a87c;
  transform:translateY(-1px);box-shadow:0 2px 7px rgba(232,168,124,.25);
}
.celeb-btn:active{
  background:#f0c4a0;color:#fff;border-color:#d4935a;
  transform:scale(.95);box-shadow:0 1px 3px rgba(232,168,124,.15);
}
.celeb-btn.active{
  background:linear-gradient(135deg,var(--pink),var(--pink-l));
  color:#fff!important;border-color:var(--pink)!important;
  box-shadow:0 3px 10px rgba(255,139,167,.35);
  transform:translateY(-1px);
}
.top-hero{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  padding:30px 24px 20px;
  color:#fff;
  text-align:center;
  margin-bottom:28px;
  border:1px solid rgba(255,255,255,.34);
  background:
    radial-gradient(circle at 14% 12%, rgba(255,255,255,.34), transparent 35%),
    radial-gradient(circle at 82% 0%, rgba(255,226,202,.32), transparent 36%),
    radial-gradient(circle at 70% 80%, rgba(255,193,193,.2), transparent 45%),
    linear-gradient(146deg, rgba(255,196,186,.66) 0%, rgba(255,211,195,.6) 40%, rgba(253,198,206,.62) 100%);
  box-shadow:0 16px 36px rgba(224,142,132,.26), inset 0 1px 0 rgba(255,255,255,.48);
  backdrop-filter:blur(14px) saturate(125%);
  -webkit-backdrop-filter:blur(14px) saturate(125%);
}
.top-hero::before,
.top-hero::after{
  content:'';
  position:absolute;
  inset:-20% -10%;
  pointer-events:none;
}
.top-hero::before{
  background:
    radial-gradient(circle, rgba(255,255,255,.6) 0 1px, transparent 1.4px) 0 0/88px 88px,
    radial-gradient(circle, rgba(255,240,226,.66) 0 1px, transparent 1.8px) 40px 20px/120px 120px;
  opacity:.28;
  filter:blur(.2px);
  animation:heroDustFloat 14s linear infinite;
}
.top-hero::after{
  background:radial-gradient(50% 40% at 50% 10%, rgba(255,255,255,.4), transparent 80%);
}
.top-hero h2{
  font-family:'Noto Serif KR', serif;
  font-size:2.15rem;
  font-weight:700;
  letter-spacing:.07em;
  margin:0 0 10px;
  color:#fff9f6;
  text-shadow:0 2px 12px rgba(165,88,88,.22);
  animation:heroRise .9s cubic-bezier(.2,.7,.2,1) both;
}
.hero-animal{
  position:relative;
  width:78px;
  height:78px;
  margin:0 auto 14px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:2.2rem;
  background:radial-gradient(circle at 30% 28%, rgba(255,255,255,.8), rgba(255,215,199,.45) 42%, rgba(244,167,167,.4) 100%);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 10px 20px rgba(192,119,110,.26), inset 0 0 0 1px rgba(255,239,230,.45);
  animation:heroRise .7s cubic-bezier(.2,.7,.2,1) both;
}
.hero-animal::before{
  content:'';
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:0.5px solid rgba(212,171,98,.55);
  opacity:.9;
}
.hero-sub{
  font-size:.92rem;
  line-height:1.9;
  color:rgba(255,248,245,.96);
  margin-top:4px;
  letter-spacing:.03em;
  animation:heroRise 1.05s cubic-bezier(.2,.7,.2,1) both;
}
.hero-sub-grid{display:grid;gap:10px;max-width:620px;margin:0 auto}
.hero-divider{height:1px;background:linear-gradient(90deg, transparent, rgba(255,242,236,.88), transparent);opacity:.85}
.hero-meta-row{font-family:'Noto Sans KR', sans-serif;font-weight:400;letter-spacing:.05em}
.hero-meta-row--birth{font-family:'Noto Serif KR', serif;font-size:1.02rem;letter-spacing:.04em}
.hero-meta-row--identity{font-size:.95rem;opacity:.95}
.hero-meta-place{opacity:.9}
.hero-lunar-wrap{display:grid;gap:6px}
.hero-lunar-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;align-items:center}
.hero-lunar-label{
  font-family:'Noto Sans KR', sans-serif;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:1px 8px;
  border-radius:20px;
  background:rgba(255,255,255,.2);
  border:1px solid rgba(255,249,244,.38);
}
.hero-lunar-value{font-family:'Noto Serif KR', serif;letter-spacing:.04em}

.hero-correction-card{
  margin-top:16px;
  text-align:left;
  border-radius:10px;
  padding:12px 14px;
  font-family:'Noto Sans KR', sans-serif;
  font-size:.8rem;
  line-height:1.7;
  color:#5f5c5d;
  background:
    linear-gradient(135deg, rgba(255,255,255,.66), rgba(255,252,249,.58)),
    radial-gradient(circle at 10% 10%, rgba(205,175,124,.08), transparent 45%);
  border:0.5px solid rgba(203,170,105,.65);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.46);
  position:relative;
}
.hero-correction-card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:10px;
  pointer-events:none;
  opacity:.16;
  background-image:radial-gradient(rgba(140,122,90,.45) .6px, transparent .8px);
  background-size:3px 3px;
}
.hero-correction-title{
  margin:0 0 6px;
  display:flex;
  align-items:center;
  gap:6px;
  color:#4c4339;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.05em;
}
.hero-correction-list{margin:0;padding:0;list-style:none;display:grid;gap:2px;position:relative;z-index:1}
.hero-correction-list li{position:relative;padding-left:13px}
.hero-correction-list li::before{
  content:'✦';
  position:absolute;
  left:0;
  top:.1em;
  font-size:.62rem;
  color:#c89a54;
  text-shadow:0 0 8px rgba(200,154,84,.45);
}
.hero-correction-label{font-weight:700;color:#4b3f34}

@keyframes heroRise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes heroDustFloat{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-22px,18px,0)}
}
@media (max-width: 640px){
  .top-hero{padding:24px 16px 16px;border-radius:20px;margin-bottom:22px}
  .top-hero h2{font-size:1.76rem;letter-spacing:.06em}
  .hero-animal{width:64px;height:64px;font-size:1.82rem;margin-bottom:12px}
  .hero-sub{font-size:.86rem;line-height:1.78}
  .hero-meta-row--birth{font-size:.95rem}
  .hero-correction-card{font-size:.76rem;padding:11px 12px}
}

/* ─── 사주 명식 ─── */
.manse-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pillar{display:flex;flex-direction:column;align-items:center;gap:4px}
.pillar-head{font-size:.72rem;color:#AAA;font-weight:700}
.ten-god-badge{font-size:.62rem;background:linear-gradient(135deg,var(--pink),var(--pink-l));
  color:#fff;padding:2px 6px;border-radius:7px;width:100%;text-align:center;font-weight:700}
.ten-god-badge.day{background:linear-gradient(135deg,#FF5F8A,var(--pink))}
.char-box{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;font-weight:700;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.07);
  cursor:pointer;transition:transform 0.2s ease-out;}
.char-box:active{transform:scale(1.15);}
.yang-yin{font-size:.65rem;color:#999;font-weight:600;text-align:center}
.bg-wood{background:var(--wood-bg);color:var(--wood-tx)}
.bg-fire{background:var(--fire-bg);color:var(--fire-tx)}
.bg-earth{background:var(--earth-bg);color:var(--earth-tx)}
.bg-metal{background:var(--metal-bg);color:var(--metal-tx)}
.bg-water{background:var(--water-bg);color:var(--water-tx)}

/* ─── 핵심 십성 ─── */
.ts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.ts-card{background:linear-gradient(135deg,#FFFBF8,#FFF8F5);border:2px solid #FFE8E0;
  border-radius:14px;padding:16px;cursor:pointer;transition:all .25s;position:relative;overflow:hidden;}
.ts-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(to bottom, var(--pink), var(--pink-l));opacity:0;transition:opacity 0.3s;}
.ts-card:hover::before{opacity:1;}
.ts-card:hover{transform:translateY(-4px);box-shadow:0 10px 25px rgba(255,139,167,.25);border-color:var(--pink-l);background:#fff;}
.ts-emoji{font-size:2.2rem;margin-bottom:8px; filter:drop-shadow(0 4px 6px rgba(0,0,0,0.1));}
.ts-name{font-weight:800;color:var(--pink);font-size:1.15rem;margin-bottom:4px;letter-spacing:-0.3px;}
.ts-desc{font-size:.8rem;color:#777; font-weight:600;}
.ts-hint{font-size:.75rem;color:#FF8BA7;margin-top:10px; font-weight:700; background:rgba(255,139,167,0.1); display:inline-block; padding:3px 10px; border-radius:20px;}

/* ─── 조후 미터 ─── */
.johu-box{background:linear-gradient(135deg,#EBF5FB,#EAF6EB);border:2px solid #AED6F1;
  border-radius:16px;padding:20px;margin-bottom:16px}
.johu-meter{height:28px;background:linear-gradient(to right,#1565C0,#90CAF9,#FFEBEE,#C62828);
  border-radius:14px;position:relative;margin:16px 0}
.johu-needle{position:absolute;top:-6px;width:4px;height:40px;background:var(--pink);
  border-radius:2px;box-shadow:0 2px 8px rgba(255,139,167,.5);transform:translateX(-50%);transition:left .5s}
.johu-labels{display:flex;justify-content:space-between;font-size:.75rem;color:#666}
.johu-badge{display:inline-block;padding:5px 14px;border-radius:99px;font-weight:700;font-size:.85rem;margin-bottom:10px}
.johu-info-btn{width:100%;border:none;border-radius:14px;min-height:52px;padding:12px 16px;display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;cursor:pointer;font-family:'Gowun Dodum',serif;font-size:.96rem;font-weight:800;color:#fff;letter-spacing:.1px;background:linear-gradient(135deg,#4b6cb7 0%,#355c7d 52%,#3f4c6b 100%);box-shadow:0 6px 16px rgba(53,92,125,.28);transition:transform .18s ease,box-shadow .2s ease,filter .2s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.johu-info-btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(53,92,125,.34);filter:brightness(1.03)}
.johu-info-btn:active{transform:scale(.98)}
.johu-info-btn__label{display:block;line-height:1.35}
.johu-info-btn__icon{display:inline-block;font-size:.82rem;transition:transform .3s ease;opacity:.92}
.jb-hot{background:#FFEBEE;color:#C62828}.jb-warm{background:#FFF3E0;color:#E65100}
.jb-neutral{background:#F5F5F5;color:#546E7A}.jb-cool{background:#E3F2FD;color:#1565C0}
.jb-cold{background:#E1F5FE;color:#0277BD}

/* ─── 억부/종격 배너 ─── */
.ukbu-box{border-radius:14px;padding:16px;margin-bottom:12px}
.ukbu-strong{background:linear-gradient(135deg,#FFF3E0,#FFF8E1);border:2px solid #FFCC80}
.ukbu-weak{background:linear-gradient(135deg,#E3F2FD,#E8F4FD);border:2px solid #90CAF9}
.jong-box{background:linear-gradient(135deg,#F3E5F5,#EDE7F6);border:2px solid #CE93D8;border-radius:14px;padding:16px;margin-bottom:12px}
.power-badge{display:inline-block;padding:5px 14px;border-radius:99px;font-weight:700;font-size:.85rem;margin-right:8px;margin-bottom:8px}
.pb-strong{background:#FFE0B2;color:#BF360C}.pb-weak{background:#BBDEFB;color:#0D47A1}
.pb-jong{background:#E1BEE7;color:#6A1B9A}
.yn-row{background:rgba(255,255,255,.7);border-radius:10px;padding:10px 12px;font-size:.83rem;margin-top:10px;line-height:1.7}

/* ─── 자미두수 궁 ─── */
.palace-block{border-radius:13px;padding:14px 16px;margin-bottom:10px;border:1.5px solid}
.palace-tag{display:inline-block;font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:8px;margin-bottom:7px}
.palace-star{font-weight:700;font-size:.88rem;margin-bottom:5px}
.palace-title{font-weight:700;font-size:.95rem;margin-bottom:6px}
.palace-desc{font-size:.82rem;color:#555;line-height:1.78}
.palace-note{font-size:.72rem;margin-top:7px;font-style:italic}

/* ─── 프리미엄 분석 박스 ─── */
.prem-box{background:#FAFAFA;border:1px solid #EEE;border-radius:12px;padding:16px;margin-top:12px}
.prem-title{display:block;font-weight:700;color:#333;font-size:.88rem;
  border-left:3px solid var(--pink);padding-left:9px;margin-bottom:10px}
.prem-text{font-size:.88rem;color:#555;line-height:1.78}
.hl{background:rgba(255,183,178,.2);padding:0 4px;font-weight:700;color:#D84315;border-radius:3px}
.tip-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.tip-chip{background:#fff;border:1px solid #FFE0D6;border-radius:10px;padding:13px;font-size:.82rem;line-height:1.65;color:#555}
.tip-chip strong{color:#FF6B35;display:block;margin-bottom:5px}

/* ─── 여행 개운 ─── */
.travel-box{background:linear-gradient(135deg,#F5F0FF,#FFF5F8);border-radius:16px;padding:16px;border:1px solid rgba(197,202,233,.6);margin-top:8px}
.travel-header{font-size:.85rem;color:#666;margin-bottom:10px;line-height:1.7}
.travel-badge{display:inline-block;padding:4px 10px;border-radius:99px;font-size:.78rem;font-weight:700;margin-right:6px;margin-bottom:4px}
.tb-strong{background:#FFE0B2;color:#E65100}
.tb-balance{background:#E3F2FD;color:#1565C0}
.travel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}
.travel-chip{background:#fff;border-radius:12px;padding:12px 11px;border:1px solid rgba(197,202,233,.6);font-size:.8rem;color:#555;line-height:1.6}
.travel-chip-title{font-weight:700;color:#5C6BC0;margin-bottom:4px;font-size:.86rem}
.travel-chip ul{margin-top:4px;padding-left:16px;margin-bottom:4px}
.travel-chip li{margin-bottom:2px}

/* ─── 대운 ─── */
.dw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px;margin-bottom:12px}
.dw-item{border:2px solid #FFE0D6;border-radius:13px;padding:12px 8px;text-align:center;
  cursor:pointer;transition:all .25s;position:relative;background:linear-gradient(135deg,#FFFBF8,#FFF8F5)}
.dw-item:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(255,139,167,.22)}
.dw-item.excellent{border-color:#4CAF50;background:linear-gradient(135deg,#E8F5E9,#F1F8E9)}
.dw-item.good{border-color:#2196F3;background:linear-gradient(135deg,#E3F2FD,#E8F4FD)}
.dw-item.neutral{border-color:#FFC107;background:linear-gradient(135deg,#FFF8E1,#FFFBF8)}
.dw-item.caution{border-color:#FF9800;background:linear-gradient(135deg,#FFF3E0,#FFEBEE)}
.dw-item.bad{border-color:#F44336;background:linear-gradient(135deg,#FFEBEE,#FCE4EC)}
.dw-age{font-weight:700;color:var(--pink);font-size:.85rem;display:block;margin-bottom:5px}
.dw-gz{font-weight:700;font-size:.95rem;color:#444}
.dw-sub{font-size:.65rem;color:#999;margin-top:3px}
.dw-tag{position:absolute;top:4px;right:4px;font-size:.6rem;padding:2px 5px;border-radius:6px;font-weight:700}
.tag-best{background:#E8F5E9;color:#2E7D32}.tag-good{background:#E3F2FD;color:#1565C0}
.tag-ok{background:#FFF8E1;color:#F57F17}.tag-caut{background:#FFF3E0;color:#E65100}
.tag-bad{background:#FFEBEE;color:#C62828}
/* ── 종격 사주 카드: 색상은 점수 기준(excellent/good/neutral/caution/bad)과 동일 적용 ── */
.dw-jong-badge{font-size:.55rem;padding:2px 6px;border-radius:5px;font-weight:800;display:inline-block;margin-top:5px}
.dw-jong-badge.str{background:#E1BEE7;color:#4A148C}
.dw-jong-badge.wkn{background:#FFEBEE;color:#C62828}
.dw-jong-badge.ntl{background:#F5F5F5;color:#757575}
.dw-jong-badge.ga-str{background:#EDE7F6;color:#6A1B9A;border:1px dashed #9C27B0}
/* ── 모바일/웹 클릭·터치 전역 최적화 ── */
button,.dw-item,.year-row,.fortune-tab,.mystic-tab-btn,.lang-btn,.tog-btn,.oracle-cat-btn-m,.oracle-card-m,.iching-btn,.celeb-tab-btn,.celeb-btn,.feature-card,.tarot-cat-btn,.btn-kakao,.btn-insta{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button,.tog-btn,.btn-main,.btn-sub,.feature-card{min-height:44px;}
/* 모든 인터랙티브 요소 active 피드백 */
button:active,.tog-btn:active,.feature-card:active{opacity:.82;transform:scale(.97)!important;}
@media(hover:none){button:hover,.feature-card:hover{transform:none!important;}}
.dw-item,.year-row,.fortune-tab,.mystic-tab-btn,.oracle-cat-btn-m{user-select:none}
/* ── 대운 카드 요약 라벨 ── */
.dw-eval-label{font-size:.58rem;color:#888;margin-top:3px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* ─ 퀀텀 합화 배지 (대운 카드) ─ */
.dw-qm-badge{font-size:.56rem;font-weight:800;padding:2px 5px;border-radius:5px;text-align:center;margin-top:4px;letter-spacing:.01em;line-height:1.3;display:block}
.dw-qm-badge.bonus{background:linear-gradient(135deg,#E8F5E9,#F1F8E9);color:#1B5E20;border:1px solid #A5D6A7}
.dw-qm-badge.snare{background:linear-gradient(135deg,#FFEBEE,#FCE4EC);color:#B71C1C;border:1px solid #FFCDD2}
.dw-qm-badge.hap{background:#F5F5F5;color:#757575;border:1px solid #E0E0E0}

/* ─── RPG 인생 스킬 트리 ─── */
.skill-wrap{background:linear-gradient(145deg,#0d0d1a,#111827,#0f1923);border-radius:20px;padding:20px;position:relative;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.45)}
.skill-wrap::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(99,102,241,.08) 0%,transparent 60%),radial-gradient(circle at 80% 70%,rgba(251,191,36,.06) 0%,transparent 60%);pointer-events:none}
.sk-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:10px}
.sk-game-badge{display:inline-block;font-size:.6rem;font-weight:800;letter-spacing:.18em;color:#FFD700;background:rgba(255,215,0,.12);border:1px solid rgba(255,215,0,.3);padding:3px 9px;border-radius:4px;margin-bottom:5px}
.sk-main-title{font-size:1.15rem;font-weight:800;color:#fff;letter-spacing:.05em;line-height:1.2}
.sk-sub-title{font-size:.62rem;color:rgba(255,255,255,.35);letter-spacing:.18em;margin-top:3px;text-transform:uppercase}
.sk-hero-wrap{flex-shrink:0;position:relative;width:90px;height:112px}
.sk-hero-glow{position:absolute;top:10%;left:10%;width:80%;height:80%;border-radius:50%;z-index:0;opacity:.35;filter:blur(18px)}
.sk-hero-svg{position:relative;z-index:1;display:block;width:100%;height:100%}
@keyframes skHeroBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.sk-hero-svg{animation:skHeroBob 3s ease-in-out infinite}
.sk-sheet{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:rgba(255,255,255,.04);border-radius:14px;padding:16px;border:1px solid rgba(255,255,255,.08);margin-bottom:14px}
@media(max-width:768px){.sk-sheet{grid-template-columns:1fr}}
.sk-class-label{font-size:.6rem;letter-spacing:.2em;color:rgba(255,215,0,.7);font-weight:700;margin-bottom:4px;text-transform:uppercase}
.sk-class-name{font-size:.9rem;font-weight:800;color:#fff;margin-bottom:10px;line-height:1.4}
.sk-level-wrap{margin-bottom:8px}
.sk-lv-badge{font-size:.75rem;font-weight:800;color:#FFD700;letter-spacing:.1em;margin-bottom:4px}
.sk-lv-badge span{font-size:1.1rem}
.sk-exp-wrap{height:7px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden;margin-bottom:4px}
.sk-exp-bar{height:100%;background:linear-gradient(90deg,#FFD700,#FFA500);border-radius:99px;transition:width .8s ease}
.sk-exp-label{font-size:.62rem;color:rgba(255,255,255,.4);letter-spacing:.05em}
.sk-day-badge{font-size:.7rem;background:rgba(255,255,255,.07);border-radius:6px;padding:5px 8px;color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.1);line-height:1.5}
.sk-stat-title{font-size:.65rem;letter-spacing:.15em;color:rgba(255,255,255,.5);font-weight:700;text-transform:uppercase;margin-bottom:10px}
.sk-stat-row{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.sk-stat-label{font-size:.7rem;color:rgba(255,255,255,.65);width:56px;flex-shrink:0}
.sk-stat-bar-wrap{flex:1;height:8px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden}
.sk-stat-bar-fill{height:100%;border-radius:99px;transition:width .9s .2s ease;box-shadow:0 0 6px currentColor}
.sk-stat-val{font-size:.68rem;font-weight:700;color:rgba(255,255,255,.6);width:30px;text-align:right}
.sk-tree-wrap{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:14px}
@media(max-width:768px){.sk-tree-wrap{grid-template-columns:1fr}}
.sk-tree-section{background:rgba(255,255,255,.04);border-radius:12px;padding:13px;border:1px solid rgba(255,255,255,.07)}
.sk-tree-label{font-size:.6rem;letter-spacing:.18em;font-weight:800;color:rgba(255,255,255,.45);text-transform:uppercase;margin-bottom:10px;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.07)}
.sk-item{display:flex;gap:10px;align-items:flex-start;padding:9px;border-radius:10px;margin-bottom:8px;border:1px solid transparent}
.sk-item:last-child{margin-bottom:0}
.sk-item.sk-master{background:linear-gradient(135deg,rgba(255,215,0,.12),rgba(255,165,0,.07));border-color:rgba(255,215,0,.35);box-shadow:0 0 16px rgba(255,215,0,.08)}
.sk-item.sk-owned{background:rgba(99,102,241,.1);border-color:rgba(99,102,241,.3)}
.sk-item.sk-locked{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.07);opacity:.65}
.sk-icon{font-size:1.3rem;flex-shrink:0;line-height:1;margin-top:2px}
.sk-name{font-size:.78rem;font-weight:700;color:#fff;margin-bottom:3px;letter-spacing:.02em}
.sk-desc{font-size:.7rem;color:rgba(255,255,255,.5);line-height:1.55}
.sk-type-badge{font-size:.55rem;font-weight:700;padding:1px 6px;border-radius:3px;background:rgba(255,215,0,.2);color:#FFD700;letter-spacing:.1em;vertical-align:middle;margin-left:4px}
.sk-levelup{background:linear-gradient(135deg,rgba(99,102,241,.18),rgba(139,92,246,.1));border-radius:14px;padding:16px;border:1px solid rgba(139,92,246,.35)}
.sk-levelup-title{font-size:.72rem;font-weight:800;color:#A78BFA;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.sk-levelup-text{font-size:.82rem;color:rgba(255,255,255,.8);line-height:1.7}
.sk-hl{background:rgba(251,191,36,.2);color:#FDE68A;padding:1px 6px;border-radius:4px;font-weight:700}

/* ─── 일주 고유능력 (INNATE ABILITY) ─── */
.sk-innate-section{background:linear-gradient(135deg,rgba(236,72,153,.12),rgba(168,85,247,.10));border-radius:14px;padding:15px;border:1px solid rgba(236,72,153,.30);position:relative;overflow:hidden;margin-bottom:14px}
.sk-innate-section::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 50%,rgba(236,72,153,.08),transparent 70%);pointer-events:none}
.sk-innate-label{font-size:.6rem;letter-spacing:.18em;font-weight:800;color:rgba(236,72,153,.85);text-transform:uppercase;margin-bottom:10px;padding-bottom:7px;border-bottom:1px solid rgba(236,72,153,.18);position:relative;z-index:1}
.sk-innate-item{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:12px;background:linear-gradient(135deg,rgba(236,72,153,.08),rgba(168,85,247,.06));border:1px solid rgba(236,72,153,.25);box-shadow:0 0 20px rgba(236,72,153,.06);position:relative;z-index:1}
.sk-innate-icon{font-size:1.6rem;flex-shrink:0;line-height:1;margin-top:1px;filter:drop-shadow(0 0 6px rgba(236,72,153,.4))}
.sk-innate-name{font-size:.82rem;font-weight:800;color:#F9A8D4;margin-bottom:3px;letter-spacing:.03em;text-shadow:0 0 8px rgba(236,72,153,.3)}
.sk-innate-sub{font-size:.62rem;color:rgba(168,85,247,.8);font-weight:600;letter-spacing:.08em;margin-bottom:4px}
.sk-innate-desc{font-size:.72rem;color:rgba(255,255,255,.65);line-height:1.6}
.sk-innate-type{display:inline-block;font-size:.5rem;font-weight:700;padding:1px 6px;border-radius:3px;background:rgba(236,72,153,.25);color:#F9A8D4;letter-spacing:.1em;vertical-align:middle;margin-left:5px}

/* ─── 대운 상세 ─── */
.dw-detail{margin-top:12px;padding:20px;background:#FFFBF8;border-radius:15px;
  border:2px solid #FFE0D6;display:none}
.dw-detail.show{display:block;animation:slideDown .3s ease-out}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.gaeun-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
@media(max-width:768px){
  .gaeun-grid{grid-template-columns:1fr}
  .travel-grid{grid-template-columns:1fr}
}
.gaeun-box{background:#fff;border:1px solid #FFE0D6;border-radius:12px;padding:14px;transition:all .25s}
.gaeun-box:hover{box-shadow:0 4px 12px rgba(255,183,178,.2)}
.gaeun-icon{font-size:1.6rem;margin-bottom:6px}
.gaeun-title{font-weight:700;color:var(--pink);font-size:.88rem;margin-bottom:5px}
.gaeun-content{font-size:.82rem;color:#666;line-height:1.65}
.luck-badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.75rem;font-weight:700;margin:6px 0}
.lb-best{background:#E8F5E9;color:#2E7D32;border:1px solid #C8E6C9}
.lb-good{background:#E3F2FD;color:#1565C0;border:1px solid #BBDEFB}
.lb-ok{background:#FFF8E1;color:#F57F17;border:1px solid #FFE082}
.lb-bad{background:#FFEBEE;color:#C62828;border:1px solid #FFCDD2}

/* ─── 세운 ─── */
.year-list{display:flex;flex-direction:column;gap:8px}
.year-row{background:#fff;border:2px solid #FFE0D6;border-radius:12px;padding:14px;cursor:pointer;transition:all .25s}
.year-row:hover{box-shadow:0 3px 10px rgba(255,183,178,.18)}
.year-top{display:flex;justify-content:space-between;align-items:center}
.year-title{font-weight:700;color:var(--pink);font-size:.92rem}
.year-sub{max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(0.4,0,0.2,1)}
.yr-section{margin-top:10px;padding-top:10px;border-top:1px dashed #FFE0D6}
.yr-label{font-weight:700;color:var(--pink);font-size:.82rem;margin-bottom:5px}
.yr-content{font-size:.8rem;color:#666;line-height:1.68}

/* ─── 편지 ─── */
.letter-box{background:linear-gradient(140deg,#FFFCFC,#FFF5F8);border:2px solid rgba(255,183,178,.25);
  border-radius:20px;padding:24px;box-shadow:0 4px 20px rgba(255,139,167,.08)}
.letter-box h3{font-family:'Noto Serif KR',serif;color:var(--pink);text-align:center;margin-bottom:16px;font-size:1.1rem}
.letter-para{font-size:.88rem;line-height:1.9;color:#555;margin-bottom:12px}

/* ─── 블로그 ─── */
.blog-item{display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px;
  background:rgba(255,255,255,.8);border:1.5px solid #FFE8E0;text-decoration:none;color:inherit;
  transition:all .2s;margin-bottom:10px}
.blog-item:hover{border-color:var(--pink-l);transform:translateY(-1px)}
.blog-thumb{width:52px;height:52px;object-fit:cover;border-radius:9px;flex-shrink:0}
.blog-title{font-weight:800;font-size:.85rem;margin-bottom:4px}
.blog-summary{font-size:.78rem;color:#666;line-height:1.7;margin-top:2px;white-space:normal;overflow:hidden}

/* ─── 모달 ─── */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;
  align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.modal.show{display:flex}
.modal-box{background:#fff;border-radius:20px;padding:28px;max-width:520px;width:100%;
  max-height:88vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.25);position:relative}
.modal-close{position:absolute;top:16px;right:18px;font-size:1.4rem;cursor:pointer;
  color:#CCC;background:none;border:none;transition:color .2s;font-family:inherit}
.modal-close:hover{color:var(--pink)}
/* ══════════════════════════════════════
   🎴 오늘의 운명 카드 (Universal Oracle)
══════════════════════════════════════ */
.destiny-section{margin-bottom:16px}
.destiny-wrap{
  background:linear-gradient(160deg,#1a0a2e 0%,#16213e 40%,#0f3460 100%);
  border-radius:24px;padding:28px 20px 24px;
  box-shadow:0 8px 40px rgba(10,5,30,.55),inset 0 0 60px rgba(120,80,200,.08);
  border:1px solid rgba(255,220,100,.18);
  position:relative;overflow:hidden;
}
.destiny-wrap::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(180,120,255,.12) 0%,transparent 65%);
  pointer-events:none;
}
.destiny-title{
  text-align:center;font-family:'Cinzel Decorative',serif;
  font-size:.82rem;letter-spacing:.22em;color:rgba(255,220,120,.75);
  text-transform:uppercase;margin-bottom:18px;
}

/* 타로 카테고리 선택 */
.tarot-cats{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:24px;position:relative;z-index:2}
.tarot-cat-btn{
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.15);
  color:#ccc;padding:8px 14px;border-radius:20px;font-size:0.75rem;cursor:pointer;
  transition:all 0.3s ease;backdrop-filter:blur(4px);
}
.tarot-cat-btn:hover{background:rgba(255,255,255,0.15);color:#fff;transform:translateY(-2px)}
.tarot-cat-btn:active{transform:scale(.95);opacity:.85}
.tarot-cat-btn.active{
  background:linear-gradient(135deg, #FFD700 0%, #B8860B 100%);
  color:#1a0a2e;font-weight:700;border-color:transparent;
  box-shadow:0 0 15px rgba(255,215,0,0.4);
}

/* 타로 리추얼 텍스트 (스트리밍) */
.tarot-ritual-msg{
  min-height:30px;text-align:center;font-size:0.8rem;color:#bda0e3;
  font-style:italic;margin-bottom:20px;opacity:0.9;
  font-family:'KoPub Batang', serif;
  text-shadow:0 0 10px rgba(189,160,227,0.3);
}

.destiny-card-scene{
  perspective:800px;width:100%;display:flex;justify-content:center;margin-bottom:20px;
}
.destiny-card{
  width:200px;height:340px;position:relative;
  transform-style:preserve-3d;
  transition:transform 1s;
  cursor:pointer;
}
/* 카드 뒷면 */
.destiny-card-back{
  position:absolute;inset:0;backface-visibility:hidden;
  background-image:url('https://www.sacred-texts.com/tarot/xr/pents01.jpg'); /* 임시 텍스처 */
  background-size:cover;border-radius:14px;
  border:2px solid #5c4d80;
  display:flex;align-items:center;justify-content:center;
}
.destiny-card-back::after{
  content:'';position:absolute;inset:0;background:rgba(20,10,40,0.85);
  background-image:repeating-linear-gradient(45deg, rgba(255,215,0,0.05) 0px, rgba(255,215,0,0.05) 1px, transparent 1px, transparent 10px);
}
.destiny-card-back span{z-index:1;font-size:2rem;opacity:0.5;filter:grayscale(1)}

/* 카드 앞면 */
.destiny-card-front{
  position:absolute;inset:0;backface-visibility:hidden;
  transform:rotateY(180deg);
  border-radius:14px;overflow:hidden;
  background-size:cover;background-position:center;
  box-shadow:0 0 20px rgba(0,0,0,0.5);
}

/* ══════════════════════════════════════════════
  드림 타로
══════════════════════════════════════════════ */
.dream-ledger-shell .max-w-3xl { max-width: 48rem; }
.dream-ledger-shell .max-w-4xl { max-width: 56rem; }
.dream-ledger-shell .mx-auto { margin-left: auto; margin-right: auto; }
.dream-ledger-shell .w-full { width: 100%; }
.dream-ledger-shell .text-lg { font-size: 1.125rem; }
.dream-ledger-shell .leading-loose { line-height: 2; }
.dream-ledger-shell .tracking-wide { letter-spacing: 0.02em; }
.dream-ledger-shell .drop-shadow-2xl {
  filter: drop-shadow(0 28px 42px rgba(6, 10, 24, 0.48));
}
.dream-ledger-shell .perspective-deep {
  perspective: 1700px;
  perspective-origin: 50% 44%;
}

.feature-card--dream .feature-card__img-wrap {
  background:
    radial-gradient(circle at 22% 20%, rgba(255, 206, 124, 0.36), transparent 40%),
    radial-gradient(circle at 84% 70%, rgba(134, 201, 255, 0.25), transparent 42%),
    linear-gradient(145deg, #131321, #22273f 55%, #2f2541);
}

.dream-ledger-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  z-index: 100001;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: auto;
  background:
    radial-gradient(circle at 12% 14%, rgba(248, 193, 113, 0.25), transparent 35%),
    radial-gradient(circle at 82% 75%, rgba(126, 177, 255, 0.22), transparent 42%),
    linear-gradient(165deg, rgba(12, 16, 30, 0.96), rgba(22, 24, 41, 0.98));
  opacity: 0;
  transition: opacity 0.32s ease;
}

.dream-ledger-overlay--show {
  opacity: 1;
}

.dream-ledger-shell {
  --dream-energy: 0.55;
  width: 100%;
  max-width: 1200px;
  min-height: 100%;
  margin: 0 auto;
  padding: 24px 20px calc(40px + env(safe-area-inset-bottom));
  border-radius: 0;
  border-left: 1px solid rgba(255, 214, 148, 0.24);
  border-right: 1px solid rgba(155, 201, 255, 0.19);
  background:
    radial-gradient(circle at 52% -16%, rgba(255, 207, 122, 0.18), transparent 48%),
    linear-gradient(160deg, rgba(25, 24, 42, 0.95), rgba(17, 20, 34, 0.97));
  box-shadow: 0 18px 46px rgba(8, 9, 18, 0.55);
  position: relative;
  overflow: visible;
}

.dream-ledger-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 228, 176, 0.25) 0.75px, transparent 0.75px);
  background-size: 4px 4px;
  opacity: 0.25;
}

.dream-ledger-ambience {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dream-ledger-stars,
.dream-ledger-bookshelf {
  position: absolute;
  inset: 0;
}

.dream-ledger-stars {
  background-image: radial-gradient(rgba(255, 241, 217, 0.9) 0.8px, transparent 0.8px);
  background-size: 22px 22px;
  opacity: 0.24;
}

.dream-ledger-bookshelf {
  opacity: 0.2;
  background:
    linear-gradient(transparent 74%, rgba(50, 38, 30, 0.95) 74% 77%, transparent 77%),
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(96, 74, 56, 0.5) 16px 21px, transparent 21px 31px);
  background-position: 0 68%, 0 66%;
}

.dream-ledger-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 220, 162, 0.44);
  background: rgba(39, 31, 47, 0.8);
  color: #ffe9c5;
  cursor: pointer;
  z-index: 2;
}

.dream-ledger-hero {
  text-align: center;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.dream-ledger-kicker {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.2em;
  font-size: 0.7rem;
  color: rgba(255, 214, 149, 0.86);
  margin-bottom: 6px;
}

.dream-ledger-hero h2 {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.7rem;
  color: #fff2d8;
  margin-bottom: 6px;
}

.dream-ledger-sub {
  color: rgba(196, 220, 255, 0.9);
  font-size: 0.9rem;
}

.dream-ledger-wizard {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  padding: 10px;
  border-radius: 15px;
  border: 1px solid rgba(255, 216, 153, 0.22);
  background: linear-gradient(140deg, rgba(55, 43, 66, 0.72), rgba(31, 36, 58, 0.62));
  position: relative;
  z-index: 1;
}

.dream-wizard-avatar {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 218, 160, 0.16), rgba(118, 152, 255, 0.18));
  border: 1px solid rgba(255, 224, 175, 0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  animation: dreamWizardFloat 2.8s ease-in-out infinite;
}

.dream-wizard-hat {
  color: #ffe4a8;
  font-size: 1.05rem;
}

.dream-wizard-face {
  color: #ffeccf;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.dream-wizard-wand {
  position: absolute;
  right: -5px;
  bottom: 5px;
  font-size: 1rem;
  animation: dreamWandSwing 1.8s ease-in-out infinite;
}

.dream-wizard-dialogue p {
  margin: 0;
  line-height: 1.5;
  color: rgba(247, 237, 219, 0.95);
  font-size: 0.86rem;
}

#dreamWizardLine {
  font-weight: 700;
  color: #ffdca3;
  margin-bottom: 4px;
}

.dream-ledger-controls,
.dream-ledger-result {
  position: relative;
  z-index: 1;
}

.dream-ledger-label {
  display: block;
  color: rgba(255, 217, 153, 0.92);
  margin-bottom: 8px;
  font-size: 0.85rem;
}

.dream-ledger-input {
  width: 100%;
  min-height: 156px;
  resize: vertical;
  border-radius: 12px;
  border: 1px solid rgba(252, 220, 164, 0.38);
  background: linear-gradient(155deg, rgba(252, 232, 198, 0.95), rgba(240, 222, 190, 0.9));
  color: #3d2f1f;
  padding: 12px 14px;
  line-height: 1.65;
  font-family: 'MaruBuri', 'Gowun Batang', serif;
}

.dream-ledger-input:focus {
  outline: none;
  border-color: rgba(255, 197, 110, 0.92);
  box-shadow: 0 0 0 4px rgba(255, 194, 110, 0.2);
}

.dream-ledger-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.dream-story-speed-control {
  margin-top: 10px;
  padding: 11px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 219, 161, 0.28);
  background: rgba(21, 27, 46, 0.66);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.dream-tone-control {
  margin-top: 8px;
  padding: 11px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 220, 163, 0.24);
  background:
    radial-gradient(circle at 18% 15%, rgba(255, 225, 165, 0.1), transparent 42%),
    rgba(18, 24, 42, 0.72);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.dream-story-speed-label {
  color: rgba(255, 224, 171, 0.92);
  font-size: 0.78rem;
  font-weight: 700;
  margin-right: 2px;
  min-width: 92px;
  text-align: center;
}

.dream-tone-label {
  color: rgba(255, 231, 184, 0.94);
  font-size: 0.78rem;
  font-weight: 700;
  margin-right: 2px;
  min-width: 108px;
  text-align: center;
}

.dream-speed-btn {
  min-width: 62px;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 219, 161, 0.34);
  background: linear-gradient(145deg, rgba(47, 55, 82, 0.88), rgba(30, 36, 58, 0.92));
  color: rgba(241, 233, 217, 0.92);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.dream-tone-btn {
  min-width: 78px;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 218, 160, 0.34);
  background: linear-gradient(145deg, rgba(56, 45, 28, 0.88), rgba(41, 32, 22, 0.92));
  color: rgba(255, 238, 204, 0.92);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.dream-speed-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(8, 12, 24, 0.32);
}

.dream-tone-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(24, 16, 8, 0.34);
}

.dream-speed-btn.is-active {
  border-color: rgba(255, 211, 126, 0.84);
  background: linear-gradient(135deg, rgba(240, 163, 61, 0.42), rgba(124, 174, 255, 0.34));
  color: #fff1d6;
  box-shadow: 0 0 0 2px rgba(255, 206, 122, 0.2), 0 10px 18px rgba(22, 20, 34, 0.28);
}

.dream-tone-btn.is-active {
  border-color: rgba(255, 211, 129, 0.86);
  background: linear-gradient(135deg, rgba(255, 185, 90, 0.42), rgba(204, 141, 55, 0.38));
  color: #fff6de;
  box-shadow: 0 0 0 2px rgba(255, 206, 122, 0.22), 0 10px 18px rgba(30, 20, 8, 0.3);
}

.dream-library-panel {
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 219, 166, 0.26);
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 228, 175, 0.12), transparent 42%),
    linear-gradient(160deg, rgba(20, 28, 48, 0.82), rgba(26, 21, 41, 0.84));
}

.dream-library-head h4 {
  margin: 0;
  color: #ffe9bc;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}

.dream-library-head p {
  margin: 4px 0 0;
  color: rgba(229, 239, 255, 0.82);
  font-size: 0.74rem;
  line-height: 1.5;
}

.dream-library-search-row {
  margin-top: 9px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 6px;
}

.dream-library-input {
  min-height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 220, 161, 0.28);
  background: rgba(14, 20, 36, 0.68);
  color: #f5ebd8;
  padding: 0 10px;
  font-size: 0.78rem;
}

.dream-library-input:focus {
  outline: none;
  border-color: rgba(255, 209, 126, 0.86);
  box-shadow: 0 0 0 3px rgba(255, 204, 120, 0.16);
}

.dream-library-btn {
  min-height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 220, 161, 0.36);
  background: linear-gradient(140deg, rgba(239, 172, 75, 0.9), rgba(246, 210, 136, 0.94));
  color: #3d2811;
  padding: 0 12px;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
}

.dream-library-btn--ghost {
  background: rgba(27, 35, 57, 0.82);
  color: #f5deb0;
  border-color: rgba(255, 216, 150, 0.24);
}

.dream-library-btn--context {
  background: linear-gradient(140deg, rgba(108, 161, 255, 0.4), rgba(92, 122, 210, 0.44));
  color: #eaf2ff;
  border-color: rgba(167, 202, 255, 0.4);
}

.dream-library-suggest {
  margin-top: 6px;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(255, 219, 164, 0.22);
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(17, 23, 40, 0.94), rgba(24, 20, 37, 0.94));
  padding: 6px;
}

.dream-library-suggest-item {
  min-height: 34px;
  width: 100%;
  border: 1px solid rgba(255, 220, 162, 0.12);
  border-radius: 8px;
  background: rgba(34, 43, 69, 0.66);
  color: #f2f6ff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 9px;
  text-align: left;
}

.dream-library-suggest-item:hover,
.dream-library-suggest-item.is-active {
  border-color: rgba(255, 212, 126, 0.45);
  background: linear-gradient(135deg, rgba(255, 188, 90, 0.24), rgba(106, 156, 246, 0.24));
}

.dream-library-suggest-main {
  font-size: 0.73rem;
  color: #f5eddc;
  line-height: 1.35;
}

.dream-library-suggest-kind {
  font-size: 0.66rem;
  color: rgba(197, 218, 255, 0.86);
  white-space: nowrap;
}

.dream-library-chips {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dream-library-chip {
  min-height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255, 220, 164, 0.28);
  background: rgba(22, 30, 50, 0.7);
  color: rgba(238, 228, 209, 0.92);
  padding: 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.dream-library-chip.is-active {
  border-color: rgba(255, 212, 129, 0.86);
  background: linear-gradient(135deg, rgba(250, 185, 92, 0.34), rgba(111, 164, 255, 0.3));
  color: #fff2d7;
  box-shadow: 0 0 0 2px rgba(255, 206, 122, 0.14);
}

.dream-library-meta {
  margin: 9px 0 8px;
  color: rgba(221, 233, 255, 0.78);
  font-size: 0.72rem;
}

.dream-library-list {
  display: grid;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 2px;
}

.dream-library-item {
  border: 1px solid rgba(255, 219, 165, 0.2);
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(19, 27, 47, 0.9), rgba(26, 21, 42, 0.9));
  padding: 10px;
}

.dream-library-item--empty {
  text-align: center;
  color: rgba(225, 236, 255, 0.82);
}

.dream-library-item--empty h5 {
  margin: 0;
  color: #ffe2af;
  font-size: 0.84rem;
}

.dream-library-item--empty p {
  margin: 5px 0 0;
  font-size: 0.72rem;
}

.dream-library-item-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}

.dream-library-item-head h5 {
  margin: 0;
  color: #fff0ce;
  font-size: 0.8rem;
}

.dream-library-badge {
  display: inline-block;
  border-radius: 999px;
  border: 1px solid rgba(255, 218, 157, 0.3);
  background: rgba(255, 194, 94, 0.14);
  color: #ffdca1;
  font-size: 0.66rem;
  padding: 2px 7px;
  white-space: nowrap;
}

.dream-library-meaning,
.dream-library-fortune,
.dream-library-tip {
  margin: 0;
  color: rgba(238, 245, 255, 0.9);
  font-size: 0.74rem;
  line-height: 1.58;
}

.dream-library-fortune,
.dream-library-tip {
  margin-top: 4px;
}

.dream-library-fortune strong,
.dream-library-tip strong {
  color: #ffdca5;
  font-weight: 800;
  margin-right: 4px;
}

.dream-library-item mark {
  background: rgba(255, 212, 126, 0.34);
  color: #fff4de;
  border-radius: 4px;
  padding: 0 2px;
}

.dream-library-more {
  margin-top: 9px;
  width: 100%;
  min-height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 220, 160, 0.34);
  background: linear-gradient(140deg, rgba(53, 63, 95, 0.88), rgba(31, 39, 64, 0.9));
  color: #ffe6bc;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}

.dream-ledger-actions--result {
  margin-top: 12px;
  flex-wrap: wrap;
}

.dream-ledger-btn {
  flex: 1;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 224, 171, 0.38);
  background: rgba(44, 39, 55, 0.82);
  color: #ffe6c0;
  font-weight: 700;
  cursor: pointer;
}

.dream-ledger-btn--primary {
  background: linear-gradient(135deg, #f0a43d, #f0cf86);
  border-color: rgba(255, 210, 131, 0.82);
  color: #372915;
}

.dream-ledger-loader {
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(170, 211, 255, 0.24);
  background: linear-gradient(145deg, rgba(31, 38, 62, 0.8), rgba(45, 34, 58, 0.72));
  text-align: center;
  color: #fff2dc;
}

.dream-crystal {
  width: 40px;
  height: 40px;
  margin: 0 auto 10px;
  clip-path: polygon(50% 0%, 85% 26%, 72% 100%, 28% 100%, 15% 26%);
  background: linear-gradient(180deg, rgba(176, 247, 255, 0.9), rgba(115, 186, 255, 0.5));
  box-shadow: 0 0 calc(18px * var(--dream-energy)) rgba(120, 208, 255, 0.45);
  animation: dreamCrystalPulse 1.15s ease-in-out infinite;
}

@keyframes dreamCrystalPulse {
  0%, 100% { transform: scale(0.95); opacity: 0.78; }
  50% { transform: scale(1.06); opacity: 1; }
}

.dream-ledger-card {
  border-radius: 18px;
  border: 1px solid rgba(255, 216, 153, 0.25);
  padding: clamp(18px, 2.2vw, 28px);
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 201, 116, 0.2), transparent 45%),
    linear-gradient(160deg, #1a2238, #23243f 64%, #28203a);
  box-shadow:
    0 24px 52px rgba(5, 9, 22, 0.42),
    inset 0 0 0 1px rgba(255, 228, 187, 0.1);
}

.dream-ledger-card-head h3 {
  font-family: 'Cinzel', serif;
  color: #ffe8bf;
  letter-spacing: 0.06em;
  font-size: 1rem;
  margin-bottom: 6px;
}

.dream-ledger-card-head p {
  color: rgba(229, 238, 255, 0.88);
  font-size: clamp(0.94rem, 1.1vw, 1.04rem);
  line-height: 1.9;
}

.dream-keyword-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.dream-keyword-chip {
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 219, 158, 0.32);
  background: rgba(255, 196, 106, 0.12);
  color: #ffe3b3;
  font-size: 0.72rem;
}

.dream-card-ritual-head {
  margin-top: 12px;
  padding: 10px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 219, 161, 0.32);
  background: rgba(21, 27, 46, 0.65);
}

.dream-card-ritual-head p {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(230, 238, 255, 0.88);
}

.dream-card-carousel {
  margin-top: 14px;
  position: relative;
  overflow: visible;
  padding: 16px 0 22px;
}

.dream-stage-nav {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.dream-stage-tab {
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 216, 151, 0.25);
  background: rgba(28, 34, 57, 0.72);
  color: rgba(229, 237, 255, 0.78);
  font-size: 0.72rem;
  font-weight: 700;
}

.dream-stage-tab.is-active {
  border-color: rgba(255, 210, 130, 0.72);
  background: linear-gradient(135deg, rgba(240, 163, 61, 0.24), rgba(124, 174, 255, 0.22));
  color: #fff2d4;
}

.dream-stage-tab--gold {
  border-color: rgba(255, 214, 132, 0.62);
  background: linear-gradient(135deg, rgba(193, 132, 31, 0.26), rgba(255, 205, 98, 0.18));
  color: #ffe8b6;
}

.dream-ritual-card {
  display: none;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  height: clamp(500px, 76vh, 680px);
  border: 0;
  background: transparent;
  padding: 0;
  position: relative;
  cursor: pointer;
  perspective: 1300px;
  animation: dreamCardFloat 3.2s ease-in-out infinite;
}

.dream-ritual-card:disabled {
  cursor: default;
}

.dream-ritual-card.is-active-card {
  display: block;
}

.dream-ritual-card.is-flipping {
  animation: none;
}

.dream-ritual-card-inner {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.82s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 20px;
  will-change: transform;
}

.dream-ritual-card.is-open .dream-ritual-card-inner {
  transform: rotateY(180deg);
}

.dream-ritual-card-back,
.dream-ritual-card-front {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  overflow: hidden;
}

.dream-ritual-card-back {
  position: relative;
  border: 1px solid rgba(246, 214, 154, 0.68);
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 211, 131, 0.35), transparent 44%),
    repeating-linear-gradient(45deg, rgba(255, 226, 173, 0.045) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, rgba(58, 47, 75, 0.96), rgba(30, 28, 51, 0.98));
  color: #ffedcd;
  font-family: 'Cinzel Decorative', serif;
  letter-spacing: 0.12em;
  font-size: 1.08rem;
  text-transform: uppercase;
  box-shadow:
    inset 0 0 0 2px rgba(255, 220, 154, 0.22),
    inset 0 0 36px rgba(13, 9, 26, 0.52),
    0 18px 34px rgba(8, 10, 20, 0.45);
}

.dream-ritual-card-back::before {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 225, 170, 0.35);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 222, 157, 0.22), transparent 58%),
    conic-gradient(from 0deg, rgba(255, 220, 152, 0.16), transparent 22%, rgba(147, 201, 255, 0.2) 44%, transparent 66%, rgba(255, 220, 152, 0.16));
  filter: drop-shadow(0 0 16px rgba(157, 203, 255, 0.2));
  animation: dreamRuneSpin 6.5s linear infinite;
}

.dream-ritual-card-back::after {
  content: '✶';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  color: rgba(255, 232, 190, 0.72);
  text-shadow: 0 0 14px rgba(255, 210, 132, 0.38);
  animation: dreamRunePulse 1.8s ease-in-out infinite;
}

.dream-ritual-card-front {
  transform: rotateY(180deg);
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  padding: 16px 14px 14px;
  border: 1px solid rgba(245, 218, 168, 0.72);
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 234, 188, 0.24), transparent 40%),
    linear-gradient(170deg, rgba(246, 234, 209, 0.97), rgba(228, 213, 184, 0.95));
  box-shadow:
    inset 0 0 0 2px rgba(121, 90, 43, 0.16),
    inset 0 0 28px rgba(255, 255, 255, 0.45),
    0 18px 34px rgba(8, 10, 20, 0.42);
}

.dream-ritual-card-front::before,
.dream-ritual-card-front::after {
  content: '✧';
  position: absolute;
  color: rgba(117, 88, 45, 0.6);
  font-size: 0.88rem;
  font-weight: 700;
}

.dream-ritual-card-front::before {
  left: 12px;
  top: 10px;
}

.dream-ritual-card-front::after {
  right: 12px;
  bottom: 10px;
}

.dream-card-illustration {
  width: 100%;
  max-width: 100%;
  min-height: 220px;
  max-height: 70%;
  aspect-ratio: 3 / 4;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(121, 88, 44, 0.38);
  background:
    radial-gradient(circle at 22% 22%, rgba(255, 243, 223, 0.45), transparent 43%),
    linear-gradient(145deg, rgba(72, 64, 90, 0.95), rgba(52, 67, 103, 0.9));
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 0 18px rgba(21, 15, 32, 0.28),
    0 10px 20px rgba(8, 14, 30, 0.22);
  opacity: 0;
  transform: scale(0.92) translateY(6px);
}

.dream-ritual-card.is-open .dream-card-illustration {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: blur(0) saturate(1.05);
}

.dream-ritual-card.is-open.is-revealing .dream-card-illustration {
  animation: dreamArtReveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.dream-ritual-card.is-summoned {
  animation:
    dreamCardSummon 620ms cubic-bezier(0.16, 0.8, 0.22, 1) both,
    dreamCardAura 2.8s ease-in-out 620ms infinite;
}

.dream-ritual-card.is-open.is-revealing .dream-ritual-card-front {
  animation: dreamFrontImpact 420ms cubic-bezier(0.16, 0.8, 0.22, 1);
}

.dream-card-impact::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 24px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 220, 142, 0.4), rgba(122, 179, 255, 0.08) 58%, transparent 76%);
  filter: blur(0.5px);
}

.dream-card-impact.is-open.is-revealing .dream-ritual-card-inner {
  animation: dreamFlipShake 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dream-card-impact.is-open.is-impact::after {
  animation: dreamImpactGlow 680ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dream-ritual-card--gold .dream-ritual-card-back {
  border-color: rgba(255, 225, 154, 0.84);
  color: #fff4d2;
  background:
    radial-gradient(circle at 46% 24%, rgba(255, 231, 174, 0.48), transparent 42%),
    radial-gradient(circle at 72% 70%, rgba(255, 195, 78, 0.24), transparent 46%),
    linear-gradient(165deg, #7a4e11, #b87a1f 56%, #7a4e11);
  box-shadow:
    inset 0 0 0 2px rgba(255, 235, 186, 0.34),
    inset 0 0 42px rgba(58, 35, 8, 0.45),
    0 24px 46px rgba(13, 10, 19, 0.55);
}

.dream-ritual-card--gold .dream-ritual-card-back::before {
  border-color: rgba(255, 237, 193, 0.42);
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 234, 180, 0.24), transparent 58%),
    conic-gradient(from 0deg, rgba(255, 227, 167, 0.3), transparent 22%, rgba(255, 188, 87, 0.2) 44%, transparent 66%, rgba(255, 227, 167, 0.28));
}

.dream-ritual-card--gold .dream-ritual-card-back::after {
  content: '✷';
  color: rgba(255, 245, 219, 0.88);
  text-shadow: 0 0 18px rgba(255, 225, 146, 0.5);
}

.dream-ritual-card--gold .dream-ritual-card-front {
  border-color: rgba(255, 226, 157, 0.92);
  background:
    radial-gradient(circle at 48% 10%, rgba(255, 247, 217, 0.62), transparent 38%),
    linear-gradient(170deg, rgba(252, 236, 196, 0.99), rgba(244, 211, 142, 0.98));
  box-shadow:
    inset 0 0 0 2px rgba(164, 104, 26, 0.18),
    inset 0 0 28px rgba(255, 255, 255, 0.56),
    0 24px 52px rgba(8, 10, 20, 0.5);
}

.dream-card-illustration--gold {
  background:
    radial-gradient(circle at 24% 20%, rgba(255, 255, 240, 0.58), transparent 36%),
    radial-gradient(circle at 82% 80%, rgba(255, 205, 116, 0.32), transparent 44%),
    linear-gradient(145deg, #7c4d0d, #d79b35 54%, #8d5b16);
  border-color: rgba(150, 98, 29, 0.4);
  box-shadow:
    inset 0 0 0 1px rgba(255, 248, 224, 0.28),
    inset 0 0 22px rgba(105, 67, 15, 0.3),
    0 14px 28px rgba(70, 41, 8, 0.28);
  opacity: 1;
  transform: none;
  position: relative;
}

.dream-card-illustration--gold::before,
.dream-card-illustration--gold::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
}

.dream-card-illustration--gold::before {
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 247, 212, 0.75) 1.2px, transparent 1.4px),
    radial-gradient(circle at 72% 36%, rgba(255, 242, 196, 0.65) 1px, transparent 1.2px),
    radial-gradient(circle at 48% 74%, rgba(255, 234, 177, 0.7) 1.1px, transparent 1.3px);
  background-size: 48px 48px, 58px 58px, 42px 42px;
  animation: dreamGoldenParticles 3.1s linear infinite;
}

.dream-card-illustration--gold::after {
  background: linear-gradient(125deg, transparent 18%, rgba(255, 255, 255, 0.34) 46%, transparent 74%);
  transform: translateX(-110%);
  animation: dreamGoldenShine 2.3s ease-in-out infinite;
}

.dream-card-name {
  color: #5c3f1f;
  font-family: 'MaruBuri', 'Gowun Batang', serif;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.4;
}

.dream-card-symbol {
  font-size: 2.15rem;
  color: #6f4f24;
  filter: drop-shadow(0 0 10px rgba(255, 210, 127, 0.35));
}

.dream-card-step {
  color: rgba(102, 78, 43, 0.88);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dream-stage-panel {
  margin-top: 12px;
  border: 1px solid rgba(255, 219, 163, 0.25);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(20, 28, 48, 0.86), rgba(30, 24, 46, 0.82));
  padding: clamp(16px, 2vw, 24px);
}

.dream-story-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.dream-story-mode {
  margin: 0;
  color: rgba(201, 224, 255, 0.88);
  font-size: 0.76rem;
}

.dream-story-scroll {
  margin-top: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 219, 163, 0.24);
  background:
    linear-gradient(168deg, rgba(15, 22, 40, 0.92), rgba(28, 24, 43, 0.9));
  box-shadow: inset 0 0 0 1px rgba(255, 226, 180, 0.08);
  max-height: clamp(320px, 54vh, 680px);
  min-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  padding: clamp(16px, 2vw, 24px);
}

.dream-story-bubble {
  border-radius: 14px;
  border: 1px solid rgba(255, 219, 163, 0.26);
  background: linear-gradient(160deg, rgba(34, 44, 72, 0.88), rgba(27, 36, 60, 0.86));
  padding: clamp(14px, 1.6vw, 20px);
  box-shadow: inset 0 0 0 1px rgba(255, 222, 177, 0.08);
}

.dream-story-bubble--book {
  position: relative;
}

.dream-story-bubble--book::before {
  content: '📚 꿈의 마법책';
  display: inline-block;
  margin-bottom: 8px;
  color: rgba(255, 221, 166, 0.95);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.dream-story-bubble--spell {
  margin-top: 10px;
  border-color: rgba(255, 207, 119, 0.4);
  background: linear-gradient(140deg, rgba(64, 47, 27, 0.72), rgba(37, 31, 53, 0.8));
}

.dream-story-bubble--gold {
  margin-top: 12px;
  border-color: rgba(255, 224, 156, 0.72);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 237, 189, 0.34), transparent 42%),
    radial-gradient(circle at 84% 84%, rgba(255, 193, 88, 0.2), transparent 40%),
    linear-gradient(140deg, rgba(88, 56, 18, 0.9), rgba(50, 38, 20, 0.9));
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 157, 0.22),
    inset 0 0 38px rgba(255, 232, 172, 0.08),
    0 12px 28px rgba(28, 20, 7, 0.36);
}

.dream-story-bubble--gold::before {
  content: '✶ 황금 카드의 축복';
  display: inline-block;
  margin-bottom: 10px;
  color: rgba(255, 242, 208, 0.95);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.dream-story-bubble--gold::after {
  content: '';
  position: absolute;
  top: -40%;
  left: -20%;
  width: 32%;
  height: 180%;
  transform: rotate(18deg);
  background: linear-gradient(180deg, transparent, rgba(255, 250, 228, 0.35), transparent);
  animation: dreamGoldenMessageShine 3.2s ease-in-out infinite;
  pointer-events: none;
}

.dream-stage-next {
  display: block;
  width: min(320px, 100%);
  margin: 14px auto 0;
  border-color: rgba(255, 220, 151, 0.72);
  background: linear-gradient(135deg, rgba(255, 188, 82, 0.92), rgba(252, 221, 146, 0.96));
  color: #452b10;
  box-shadow: 0 14px 24px rgba(30, 24, 10, 0.28), inset 0 1px 0 rgba(255, 250, 236, 0.78);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}

.dream-stage-next:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 30px rgba(30, 24, 10, 0.34), inset 0 1px 0 rgba(255, 250, 236, 0.86);
}

.dream-stage-next:active {
  transform: translateY(0) scale(0.985);
}

.dream-stage-panel h4 {
  margin: 0 0 6px;
  color: #ffe0ab;
  font-size: 0.92rem;
}

.dream-block-text {
  margin: 0;
  color: #f4f8ff;
  font-size: clamp(1.03rem, 1.2vw, 1.14rem);
  line-height: 2;
  letter-spacing: 0.015em;
  white-space: pre-wrap;
  word-break: keep-all;
  text-wrap: pretty;
  min-height: 260px;
  text-shadow: 0 1px 0 rgba(9, 13, 24, 0.35);
}

.dream-final-spell {
  margin: 0;
  color: #ffd18b;
  font-size: 0.92rem;
  line-height: 1.72;
  white-space: pre-wrap;
  font-style: italic;
}

.dream-golden-advice {
  margin: 0;
  color: #fff3d8;
  font-size: clamp(1.02rem, 1.15vw, 1.16rem);
  line-height: 2.02;
  letter-spacing: 0.018em;
  white-space: pre-wrap;
  text-wrap: pretty;
  text-shadow: 0 1px 0 rgba(20, 13, 6, 0.42);
}

.dream-ledger-shell.dream-ui-locked .dream-ledger-controls,
.dream-ledger-shell.dream-ui-locked .dream-stage-panel,
.dream-ledger-shell.dream-ui-locked .dream-card-carousel {
  opacity: 0.86;
}

.dream-ledger-shell.dream-ui-locked .dream-ritual-card,
.dream-ledger-shell.dream-ui-locked #dreamNextStageBtn,
.dream-ledger-shell.dream-ui-locked .dream-speed-btn,
.dream-ledger-shell.dream-ui-locked .dream-tone-btn,
.dream-ledger-shell.dream-ui-locked .dream-library-btn,
.dream-ledger-shell.dream-ui-locked .dream-library-chip,
.dream-ledger-shell.dream-ui-locked .dream-library-suggest-item,
.dream-ledger-shell.dream-ui-locked .dream-library-more,
.dream-ledger-shell.dream-ui-locked [data-action="startDreamReading"] {
  pointer-events: none;
}

@keyframes dreamWizardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes dreamWandSwing {
  0%, 100% { transform: rotate(-16deg); }
  50% { transform: rotate(16deg); }
}

@keyframes dreamCardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes dreamRuneSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes dreamRunePulse {
  0%, 100% { opacity: 0.5; transform: scale(0.95); }
  50% { opacity: 0.92; transform: scale(1.05); }
}

@keyframes dreamArtReveal {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(6px);
    filter: blur(1.5px) saturate(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0) saturate(1.05);
  }
}

@keyframes dreamCardSummon {
  0% {
    opacity: 0;
    transform: translateY(26px) scale(0.88) rotateX(12deg);
    filter: blur(2px) saturate(0.75);
  }
  55% {
    opacity: 1;
    transform: translateY(-6px) scale(1.035) rotateX(-2deg);
    filter: blur(0) saturate(1.1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0);
    filter: blur(0) saturate(1);
  }
}

@keyframes dreamCardAura {
  0%, 100% {
    filter: drop-shadow(0 16px 26px rgba(16, 21, 40, 0.42)) drop-shadow(0 0 0 rgba(255, 210, 129, 0));
  }
  50% {
    filter: drop-shadow(0 22px 34px rgba(16, 21, 40, 0.46)) drop-shadow(0 0 16px rgba(255, 210, 129, 0.2));
  }
}

@keyframes dreamGoldenParticles {
  0% { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 0 -66px, 0 -78px, 0 -58px; }
}

@keyframes dreamGoldenShine {
  0%, 18% { transform: translateX(-110%); opacity: 0; }
  38% { transform: translateX(-14%); opacity: 0.84; }
  56% { transform: translateX(20%); opacity: 0.48; }
  78%, 100% { transform: translateX(110%); opacity: 0; }
}

@keyframes dreamGoldenMessageShine {
  0%, 12% { transform: translateX(-220%) rotate(18deg); opacity: 0; }
  34% { transform: translateX(30%) rotate(18deg); opacity: 0.85; }
  52% { transform: translateX(72%) rotate(18deg); opacity: 0.28; }
  78%, 100% { transform: translateX(240%) rotate(18deg); opacity: 0; }
}

@keyframes dreamImpactGlow {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }
  38% {
    opacity: 1;
    transform: scale(1.03);
  }
  100% {
    opacity: 0;
    transform: scale(1.09);
  }
}

@keyframes dreamFlipShake {
  0% { transform: translateX(0) rotateZ(0deg); }
  26% { transform: translateX(-3px) rotateZ(-0.35deg); }
  52% { transform: translateX(3px) rotateZ(0.35deg); }
  78% { transform: translateX(-2px) rotateZ(-0.2deg); }
  100% { transform: translateX(0) rotateZ(0deg); }
}

@keyframes dreamFrontImpact {
  0% { box-shadow: inset 0 0 0 2px rgba(121, 90, 43, 0.16), inset 0 0 28px rgba(255, 255, 255, 0.45), 0 18px 34px rgba(8, 10, 20, 0.42); }
  45% { box-shadow: inset 0 0 0 2px rgba(205, 149, 62, 0.32), inset 0 0 36px rgba(255, 255, 255, 0.62), 0 26px 50px rgba(8, 10, 20, 0.52); }
  100% { box-shadow: inset 0 0 0 2px rgba(121, 90, 43, 0.16), inset 0 0 28px rgba(255, 255, 255, 0.45), 0 18px 34px rgba(8, 10, 20, 0.42); }
}

.dream-archive-panel {
  margin-top: 12px;
  border: 1px solid rgba(255, 218, 163, 0.28);
  border-radius: 12px;
  background: rgba(21, 27, 45, 0.72);
  padding: 10px;
}

.dream-archive-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dream-archive-head h4 {
  margin: 0;
  color: #ffe0ab;
  font-size: 0.86rem;
}

.dream-archive-note {
  margin: 6px 0 8px;
  color: rgba(232, 240, 255, 0.84);
  font-size: 0.76rem;
}

.dream-archive-list {
  display: grid;
  gap: 8px;
}

.dream-archive-item {
  border: 1px solid rgba(255, 218, 168, 0.24);
  border-radius: 10px;
  background: rgba(24, 33, 57, 0.76);
  padding: 8px;
}

.dream-archive-title {
  color: #ffe7bf;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 3px;
}

.dream-archive-meta {
  color: rgba(208, 223, 255, 0.78);
  font-size: 0.7rem;
  margin-bottom: 6px;
}

.dream-archive-actions {
  display: flex;
  gap: 6px;
}

.dream-ledger-btn--mini {
  min-height: 34px;
  padding: 0 10px;
  flex: 0 0 auto;
  font-size: 0.74rem;
}

@media (max-width: 768px) {
  .dream-ledger-shell {
    padding: 16px 12px calc(24px + env(safe-area-inset-bottom));
    border-left: 0;
    border-right: 0;
  }

  .dream-ledger-wizard {
    grid-template-columns: 70px 1fr;
  }

  .dream-wizard-avatar {
    width: 64px;
    height: 64px;
  }

  .dream-ritual-card {
    max-width: none;
    height: clamp(430px, 74vh, 600px);
  }

  .dream-card-illustration {
    min-height: 190px;
  }

  .dream-story-scroll {
    min-height: 220px;
    max-height: 58vh;
    padding: 14px;
  }

  .dream-block-text {
    font-size: 1rem;
    min-height: 180px;
  }

  .dream-ledger-actions {
    flex-direction: column;
  }

  .dream-story-speed-control {
    padding: 9px;
  }

  .dream-tone-control {
    padding: 9px;
  }

  .dream-library-search-row {
    grid-template-columns: 1fr 1fr;
  }

  .dream-library-input {
    grid-column: 1 / -1;
  }

  .dream-library-btn,
  .dream-library-more {
    min-height: 34px;
  }

  .dream-library-list {
    max-height: 260px;
  }

  .dream-ledger-hero h2 {
    font-size: 1.38rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dream-ritual-card,
  .dream-ritual-card-inner,
  .dream-card-impact::after,
  .dream-ritual-card-back::before,
  .dream-ritual-card-back::after,
  .dream-wizard-avatar,
  .dream-wizard-wand,
  .dream-crystal {
    animation: none !important;
    transition: none !important;
  }
}
.destiny-card.flipped { transform: rotateY(180deg); }

/* 영적 처방전 */
.tarot-oracle{
  margin-top:20px;padding:15px;background:rgba(0,0,0,0.3);
  border-left:3px solid #FFD700;border-radius:4px;
  color:#e0e0e0;font-size:0.85rem;line-height:1.6;
  opacity:0;transform:translateY(10px);transition:all 1s ease;
}
.tarot-oracle.show{opacity:1;transform:translateY(0)}

/* 골드 더스트 효과 */
.gold-dust{
  position:absolute;width:4px;height:4px;background:#FFD700;
  border-radius:50%;pointer-events:none;animation:dustFloat 2s linear forwards;
}
@keyframes dustFloat{0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(-50px) scale(0);opacity:0}}

/* ── 오행 카드 뒷면 스타일 ── */
.q-back-element-emoji{
  font-size:3.1rem;
  margin-bottom:10px;
  filter:drop-shadow(0 0 14px rgba(214,232,255,0.46));
  animation:qBackPulse 3.2s ease-in-out infinite;
}
@keyframes qBackPulse{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-3px) scale(1.08);}
}
.q-back-element-name{
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:2px;
  margin-bottom:10px;
  color:#eef5ff;
  text-transform:uppercase;
}
.q-back-gan-ji{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:120px;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid rgba(205,223,255,0.42);
  background:linear-gradient(130deg, rgba(10,20,49,0.66), rgba(32,51,105,0.44));
  font-size:1.16rem;
  font-weight:800;
  margin-bottom:12px;
  color:#f7fbff;
  text-shadow:0 0 12px rgba(180,208,255,0.34);
  letter-spacing:2.6px;
}
.q-back-desc{
  font-size:0.79rem;
  color:#dbe7ff;
  line-height:1.58;
  padding:10px 10px 8px;
  border-radius:12px;
  border:1px solid rgba(180,205,255,0.2);
  background:rgba(9,17,42,0.34);
  white-space:pre-line;
}
.quantum-card-back.el-wood{
  background:
    radial-gradient(circle at 18% 18%, rgba(108,255,207,0.25), transparent 42%),
    linear-gradient(145deg,#0a2e2b,#12453c 58%,#1b6a58)!important;
  border-color:rgba(110,235,183,0.58)!important;
}
.quantum-card-back.el-fire{
  background:
    radial-gradient(circle at 16% 18%, rgba(255,176,137,0.24), transparent 42%),
    linear-gradient(145deg,#401421,#6f2137 58%,#b43e55)!important;
  border-color:rgba(255,159,154,0.56)!important;
}
.quantum-card-back.el-earth{
  background:
    radial-gradient(circle at 18% 18%, rgba(255,226,152,0.24), transparent 42%),
    linear-gradient(145deg,#3f2b14,#694521 58%,#9d7334)!important;
  border-color:rgba(247,212,128,0.58)!important;
}
.quantum-card-back.el-metal{
  background:
    radial-gradient(circle at 22% 20%, rgba(233,246,255,0.22), transparent 44%),
    linear-gradient(145deg,#1d2a41,#304460 58%,#536f92)!important;
  border-color:rgba(204,227,255,0.56)!important;
}
.quantum-card-back.el-water{
  background:
    radial-gradient(circle at 18% 20%, rgba(167,202,255,0.25), transparent 44%),
    linear-gradient(145deg,#112649,#1a3b73 58%,#2f62b4)!important;
  border-color:rgba(143,185,255,0.58)!important;
}

.destiny-stats{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:18px;
}
.destiny-stat{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,215,0,.15);
  border-radius:14px;padding:12px 8px;text-align:center;
  backdrop-filter:blur(4px);
}
.destiny-stat-icon{font-size:1.4rem;display:block;margin-bottom:4px}
.destiny-stat-label{font-size:.62rem;color:rgba(255,215,0,.65);letter-spacing:.1em;display:block;margin-bottom:3px;text-transform:uppercase}
.destiny-stat-val{font-size:.85rem;color:#fff;font-weight:700;letter-spacing:.05em}
.destiny-fortune{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,215,0,.12);
  border-radius:16px;padding:16px;backdrop-filter:blur(4px);
}
.destiny-fortune-title{
  font-size:.72rem;letter-spacing:.2em;color:rgba(255,210,80,.6);
  text-transform:uppercase;margin-bottom:10px;text-align:center;
}
.destiny-fortune-rows{display:flex;flex-direction:column;gap:8px}
.destiny-fortune-row{display:flex;align-items:flex-start;gap:10px}
.dfr-icon{font-size:1.1rem;flex-shrink:0;margin-top:1px}
.dfr-cat{font-size:.68rem;color:rgba(255,210,80,.7);font-weight:700;letter-spacing:.1em;display:block;margin-bottom:2px}
.dfr-text{font-size:.78rem;color:rgba(255,255,255,.8);line-height:1.58}

/* ══════════════════════════════════════
   📈 인생 그래프 (Life Fortune Graph)
══════════════════════════════════════ */
.life-graph-section{margin-top:20px;margin-bottom:4px}
.life-graph-title{
  font-size:.78rem;color:#888;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;
  display:flex;align-items:center;gap:8px;
}
.life-graph-title::before{content:'📈';font-size:1rem}
.life-graph-wrap{
  background:linear-gradient(180deg,#fafafa 0%,#fff6f9 100%);
  border-radius:16px;border:1px solid #FFE0D6;
  padding:14px 10px 10px;overflow:hidden;
  position:relative;
}
#lifeGraphCanvas{width:100%;height:180px;display:block;cursor:pointer}
.life-graph-legend{
  display:flex;justify-content:center;gap:16px;
  margin-top:8px;font-size:.7rem;color:#aaa;
}
.lgl-item{display:flex;align-items:center;gap:4px}
.lgl-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.graph-tooltip{
  position:absolute;background:rgba(40,10,60,.9);
  color:#fff;padding:8px 12px;border-radius:10px;
  font-size:.75rem;pointer-events:none;display:none;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
  z-index:10;min-width:120px;line-height:1.5;
  border:1px solid rgba(255,215,0,.3);
}

/* ─── 공유하기 ─── */
.share-section{background:#fff;border-radius:20px;padding:20px;
  box-shadow:0 2px 24px rgba(255,139,167,.1);border:1px solid rgba(255,183,178,.15);margin-bottom:16px}
.share-title{color:var(--pink);font-weight:700;font-size:1rem;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.share-title::before{content:'';display:block;width:4px;height:18px;background:linear-gradient(var(--pink),var(--pink-l));border-radius:2px}
.share-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quick-action-stack{display:flex;flex-direction:column;align-items:center;gap:12px}
.quick-action-stack .btn-install,.quick-action-stack .btn-favorite{width:min(92vw,460px)}
/* Result page: keep install CTA comfortably clear and not visually clipped */
#resultPage #shareSection{scroll-margin-top:calc(76px + env(safe-area-inset-top, 0px))}
#resultPage .share-section{overflow:visible}
#resultPage .share-btns{overflow:visible}
#resultPage .share-btns .btn-install{margin-top:30px;margin-bottom:8px;position:relative;z-index:1}
#resultPage .share-btns .btn-favorite{margin-top:6px;margin-bottom:8px;position:relative;z-index:1}
#resultPage #btnPwaInstall{margin-top:30px}
#resultPage #btnPwaInstallHome{margin-top:30px}
.btn-kakao{padding:14px;background:#FEE500;color:#3B1E08;border:none;border-radius:13px;
  font-size:.92rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;transition:all .25s}
.btn-kakao:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(254,229,0,.45)}
.btn-kakao:active{transform:scale(.96);box-shadow:0 2px 8px rgba(254,229,0,.3)}
.modal-result-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.modal-result-actions .btn-kakao{padding:12px 18px;border-radius:12px;font-size:.9rem;min-height:44px}
.btn-modal-return{
  --btn-return-bg:linear-gradient(135deg,#1e003b,#300063);
  --btn-return-border:rgba(125,42,232,0.5);
  --btn-return-text:#d1c4e9;
  background:var(--btn-return-bg);
  border:1px solid var(--btn-return-border);
  color:var(--btn-return-text);
  padding:12px 24px;
  border-radius:12px;
  font-family:'Gowun Dodum',serif;
  font-size:.9rem;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  min-height:44px;
}
.btn-modal-return--sukuyo{
  --btn-return-bg:linear-gradient(135deg,#1a0e3b,#2d1b6b);
  --btn-return-border:rgba(167,139,250,0.5);
  --btn-return-text:#c4b5fd;
}
.btn-modal-return--astro{
  --btn-return-bg:linear-gradient(135deg,#1e003b,#300063);
  --btn-return-border:rgba(125,42,232,0.5);
  --btn-return-text:#d1c4e9;
}
.btn-modal-return--ziwei{
  --btn-return-bg:linear-gradient(135deg,#2b0545,#4a0a7a);
  --btn-return-border:rgba(232,121,249,0.5);
  --btn-return-text:#e879f9;
}
.btn-insta{padding:14px;background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045);color:#fff;border:none;border-radius:13px;
  font-size:.92rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;transition:all .25s}
.btn-insta:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(131,58,180,.4)}
.btn-insta:active{transform:scale(.96);box-shadow:0 2px 8px rgba(131,58,180,.25)}
/* ── PWA 설치 버튼 (홈 화면 부적 설치) ── */
.btn-install{
  padding:14px;
  background:linear-gradient(135deg,#1A1A1B 0%,#2D2A1E 50%,#1A1A1B 100%);
  color:#FFD700;
  border:2px solid #FFD70066;
  border-radius:13px;
  font-size:.92rem;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:inherit;
  transition:all .3s;
  grid-column:span 2;
  position:relative;
  overflow:hidden;
  animation:pwa-pulse 2.4s ease-in-out infinite;
}
.btn-install::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center,rgba(255,215,0,.18) 0%,transparent 70%);
  opacity:0;
  transition:opacity .3s;
}
.btn-install:hover::before{opacity:1}
.btn-install:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(255,215,0,.45);
  border-color:#FFD700;
  color:#fff;
}
.btn-install:active{transform:translateY(0)}
/* 맥박 애니메이션 */
@keyframes pwa-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,215,0,.35)}
  50%{box-shadow:0 0 0 8px rgba(255,215,0,0)}
}

/* ── 즐겨찾기 버튼 (모드별 꽃/별 컨셉) ── */
.btn-favorite{
  padding:14px;
  border:2px solid rgba(255,201,186,.55);
  border-radius:13px;
  font-size:.92rem;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:inherit;
  transition:all .3s;
  grid-column:span 2;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(135deg,#ffe3ed 0%,#fff4dc 48%,#f5deff 100%);
  color:#633a5f;
  box-shadow:0 8px 22px rgba(255,139,167,.18);
}
.btn-favorite::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:0;
  background:radial-gradient(circle at 15% 20%,rgba(255,255,255,.65),transparent 42%),radial-gradient(circle at 82% 78%,rgba(255,255,255,.38),transparent 48%);
  transition:opacity .3s;
}
.btn-favorite:hover::before{opacity:1}
.btn-favorite:hover{transform:translateY(-2px)}
.btn-favorite:active{transform:translateY(0)}

.btn-favorite-icon{
  font-size:1.12rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.2em;
}

body.theme-pig .btn-favorite{
  border-color:rgba(255,174,197,.9);
  background:linear-gradient(135deg,#ffd9ea 0%,#fff2d7 46%,#edd9ff 100%);
  color:#5f3758;
  box-shadow:0 8px 24px rgba(255,139,167,.22);
}
body.theme-pig .btn-favorite .btn-favorite-icon{animation:favoriteBloom 1.8s ease-in-out infinite}

body.theme-neo .btn-favorite{
  border-color:rgba(255,223,144,.65);
  background:linear-gradient(135deg,#191c33 0%,#22345b 55%,#2d2347 100%);
  color:#ffe9b8;
  box-shadow:0 10px 26px rgba(8,11,20,.5),0 0 20px rgba(255,215,0,.16);
}
body.theme-neo .btn-favorite .btn-favorite-icon{animation:favoriteStarTwinkle 1.6s ease-in-out infinite}

@keyframes favoriteBloom{
  0%,100%{transform:scale(1) rotate(0deg);filter:drop-shadow(0 0 0 rgba(255,120,188,0))}
  50%{transform:scale(1.12) rotate(-5deg);filter:drop-shadow(0 0 6px rgba(255,120,188,.45))}
}

@keyframes favoriteStarTwinkle{
  0%,100%{transform:scale(1) rotate(0deg);filter:drop-shadow(0 0 0 rgba(255,215,0,0))}
  50%{transform:scale(1.16) rotate(10deg);filter:drop-shadow(0 0 7px rgba(255,215,0,.6))}
}

.btn-favorite.saved{
  pointer-events:none;
  opacity:.88;
}
/* 이미 설치된 경우 버튼 숨기기 */
.btn-install.installed{
  opacity:0.45;
  animation:none;
  cursor:default;
  pointer-events:none;
}
/* iOS 안내 모달 */
#ios-install-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
  align-items:flex-end;
  justify-content:center;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(4px);
}
#ios-install-modal.open{display:flex;animation:modal-up .35s ease}
@keyframes modal-up{
  from{opacity:0;transform:translateY(40px)}
  to{opacity:1;transform:translateY(0)}
}
.ios-modal-box{
  background:linear-gradient(160deg,#1E1C14,#2A2510);
  border:1px solid #FFD70055;
  border-radius:24px 24px 0 0;
  padding:28px 24px 36px;
  width:100%;
  max-width:520px;
  color:#F5E6A0;
  font-size:.92rem;
  line-height:1.8;
}
.ios-modal-title{
  font-size:1.08rem;
  font-weight:700;
  color:#FFD700;
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:8px;
}
.ios-modal-step{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:8px;
  font-size:.88rem;
}
.ios-step-num{
  min-width:22px;
  height:22px;
  background:#FFD700;
  color:#1A1A1B;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:.78rem;
  margin-top:1px;
}
.ios-modal-close{
  margin-top:20px;
  width:100%;
  padding:12px;
  background:#FFD700;
  color:#1A1A1B;
  border:none;
  border-radius:12px;
  font-weight:700;
  font-size:.95rem;
  cursor:pointer;
  font-family:inherit;
}
.share-toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);
  background:rgba(50,50,50,.9);color:#fff;padding:10px 22px;border-radius:99px;
  font-size:.85rem;font-weight:700;z-index:9999;opacity:0;transition:opacity .3s;pointer-events:none}
.share-toast.show{opacity:1}

/* ─── 매력 분석 전용 카드 ─── */
.charm-master-card{background:linear-gradient(180deg,#FFFDFE 0%,#FFF8FB 100%);border:2px solid #FFD1DC}
.charm-intro{background:#fff;border:1px solid #FFE3EA;border-radius:12px;padding:13px 14px;font-size:.84rem;line-height:1.78;color:#555}
.charm-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}
.charm-pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.72rem;font-weight:700;margin-right:5px;margin-bottom:5px}
.charm-box{border-radius:12px;padding:13px 14px;border:1px solid}
.charm-box h4{font-size:.92rem;margin-bottom:6px}
.charm-box p{font-size:.82rem;color:#555;line-height:1.72}
.charm-box ul{margin-top:7px;padding-left:16px}
.charm-box li{font-size:.8rem;color:#666;line-height:1.65;margin-bottom:3px}
.eg-wood{background:#F6FFF7;border-color:#CDEFD1}
.eg-fire{background:#FFF6F6;border-color:#FFD8D8}
.eg-earth{background:#FFFCF2;border-color:#FFE9B8}
.eg-metal{background:#F8F9FB;border-color:#E4E8EF}
.eg-water{background:#F3FAFF;border-color:#CCE8FF}
.hg-box{background:#FFF6FB;border:1px solid #F3D5EA;border-radius:12px;padding:14px 15px;position:relative}
.hg-box h4{font-size:.92rem;color:#AD2B84;margin-bottom:6px}
.hg-box p{font-size:.82rem;color:#5B4A57;line-height:1.74}
.hg-box ul{margin-top:7px;padding-left:16px}
.hg-box li{font-size:.8rem;color:#6B4F66;line-height:1.65;margin-bottom:3px}
.hg-summary{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 4px}
/* ─── 리포트 대시보드 v2 ─── */
.rpt-v2-grid{display:flex;flex-direction:column;gap:40px}
.rpt-v2-block{border-radius:22px;overflow:hidden;background:rgba(10,8,28,.92);
  border:1px solid rgba(255,255,255,.08);box-shadow:0 6px 36px rgba(0,0,0,.55)}
.rpt-v2-img-row{display:flex;width:100%;align-items:stretch}
.rpt-v2-img-wrap{flex:1;background:rgba(0,0,0,.15);display:flex;
  align-items:center;justify-content:center;overflow:hidden;min-height:120px;max-height:280px}
.rpt-v2-img{width:100%;height:100%;display:block;object-fit:contain;max-height:280px;background:rgba(255,255,255,.02)}
.rpt-v2-head{padding:14px 16px 12px;display:flex;flex-direction:column;gap:8px}
.rpt-v2-title{margin:0;font-size:1.02rem;line-height:1.35;font-weight:900;color:#f8fafc;word-break:keep-all}
.rpt-v2-preview{margin:0;font-size:.83rem;line-height:1.6;color:#a9b4c8;word-break:keep-all}
.rpt-v2-note{margin:0;font-size:.78rem;line-height:1.55;color:#7f8ea6;word-break:keep-all}
.rpt-v2-toggle-btn{width:100%;min-height:44px;border:none;border-radius:12px;background:linear-gradient(135deg,#7c3aed,#c026d3);color:#fff;font-size:.84rem;font-weight:800;padding:10px 14px;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.rpt-v2-toggle-label{flex:1 1 auto;text-align:center;word-break:keep-all}
.rpt-v2-toggle-arrow{flex-shrink:0;transition:transform .25s ease}
.rpt-v2-block.open .rpt-v2-toggle-arrow{transform:rotate(180deg)}
.rpt-v2-detail{max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(0.4,0,0.2,1)}
.rpt-v2-block.open .rpt-v2-detail{max-height:var(--rpt-open-height, 0px)}
.rpt-v2-detail-inner{overflow:hidden;min-height:0}
.rpt-v2-body{padding:0}
@media (max-width: 768px) {
  .rpt-v2-grid{gap:26px}
  .rpt-v2-img-wrap{min-height:92px;max-height:180px}
  .rpt-v2-img{max-height:180px}
}
/* 일반 카드: 투명 처리 (내부 콘텐츠 스타일 그대로) */
.rpt-v2-body>.card:not(.t-test-card):not(.hv-card){
  background:transparent!important;border:none!important;
  box-shadow:none!important;border-radius:0!important;
  margin:0!important;padding:12px 18px 20px!important}
/* 특수 카드: 하단 모서리만 조정 */
.rpt-v2-body>.t-test-card,.rpt-v2-body>.hv-card{
  margin:0!important;border-radius:0 0 22px 22px!important}
.hg-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;font-size:.74rem;font-weight:700}
.hg-none{background:#F5F5F5;color:#999}
.hg-normal{background:#FCE4EC;color:#C2185B}
.hg-strong{background:linear-gradient(135deg,#FCE4EC,#E8EAF6);color:#6A1B9A;border:1px solid #CE93D8}
.hg-strong-banner{background:linear-gradient(135deg,#F3E5F5,#EDE7F6);border:1.5px solid #CE93D8;border-radius:12px;padding:11px 13px;margin-top:6px;margin-bottom:4px}
.hg-strong-banner h5{font-size:.84rem;color:#6A1B9A;margin-bottom:4px}
.hg-strong-banner p{font-size:.8rem;color:#6B4F66;line-height:1.7}
.hg-gongmang-tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.7rem;font-weight:700;background:#E8F5E9;color:#2E7D32;margin-left:6px;border:1px solid #C8E6C9}
.hg-gongmang-box{background:#E8F5E9;border:1px solid #C8E6C9;border-radius:10px;padding:9px 12px;margin-top:8px}
.hg-gongmang-box p{font-size:.8rem;color:#2E7D32;line-height:1.7}

/* ─── 타로 스탯 매력 카드 ─── */
.cscard{background:linear-gradient(145deg,#1a0533 0%,#2d0b4e 40%,#1a1a3e 100%);border-radius:20px;padding:20px 18px;color:#fff;position:relative;overflow:hidden;margin-bottom:14px;box-shadow:0 8px 32px rgba(130,0,220,.35)}
.cscard::before{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;background:radial-gradient(circle,rgba(255,100,200,.15),transparent);pointer-events:none}
.cscard::after{content:'';position:absolute;bottom:-80px;left:-40px;width:220px;height:220px;background:radial-gradient(circle,rgba(50,100,255,.1),transparent);pointer-events:none}
.cs-class-wrap{text-align:center;padding:14px 0 16px;position:relative;z-index:1}
.cs-class-icon{font-size:3.5rem;display:block;margin-bottom:6px;filter:drop-shadow(0 0 12px rgba(255,150,255,.6));animation:csFloat 3s ease-in-out infinite}
@keyframes csFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.cs-class-label{font-size:.68rem;color:#b8a0d4;letter-spacing:3px;font-weight:700;text-transform:uppercase;margin-bottom:6px}
.cs-class-name{font-size:1.35rem;font-weight:900;background:linear-gradient(90deg,#ff9de2,#c471f5,#fa71cd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-0.5px}
.cs-class-sub{font-size:.78rem;color:#c8a8e8;margin-top:7px;line-height:1.68;max-width:280px;margin-left:auto;margin-right:auto}
.cs-stat-section{position:relative;z-index:1}
.cs-stat-title{font-size:.68rem;color:#b8a0d4;letter-spacing:3px;font-weight:700;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.cs-stat-row{margin-bottom:10px}
.cs-stat-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}
.cs-stat-name{font-size:.83rem;font-weight:700;color:#f0d8ff}
.cs-stat-pct{font-size:.9rem;font-weight:900;color:#ff9de2}
.cs-stat-keyword{font-size:.69rem;color:#a090c0;margin-bottom:5px;line-height:1.4}
.cs-bar-bg{background:rgba(255,255,255,.09);border-radius:99px;height:9px;overflow:hidden;position:relative}
.cs-bar-fill{height:100%;border-radius:99px;position:relative;overflow:hidden}
.cs-bar-fill::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent 20%,rgba(255,255,255,.35) 55%,transparent 90%);animation:csBarShine 2.2s infinite}
@keyframes csBarShine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.cs-bar-taohua{background:linear-gradient(90deg,#ff4e7e,#ff9de2)}
.cs-bar-yemma{background:linear-gradient(90deg,#f7971e,#ffd200)}
.cs-bar-hwagae{background:linear-gradient(90deg,#7f00ff,#c471f5)}
.cs-divider{height:1px;background:rgba(255,255,255,.08);margin:16px 0;position:relative;z-index:1}
.cs-mag-title{font-size:.68rem;color:#b8a0d4;letter-spacing:3px;font-weight:700;margin-bottom:10px;text-transform:uppercase;position:relative;z-index:1}
.cs-mag-row{display:flex;flex-direction:column;gap:7px;position:relative;z-index:1}
.cs-mag-item{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:11px;padding:10px 13px;transition:all .2s}
.cs-mag-item.cs-active{background:rgba(198,100,255,.12);border-color:rgba(198,100,255,.35)}
.cs-mag-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.cs-mag-name{font-size:.82rem;font-weight:700;color:#f0d8ff}
.cs-mag-level{font-size:.69rem;font-weight:700;padding:2px 8px;border-radius:99px;background:rgba(255,255,255,.1);color:#d8c0f0}
.cs-mag-item.cs-active .cs-mag-level{background:linear-gradient(90deg,rgba(198,100,255,.45),rgba(255,100,150,.45));color:#fff}
.cs-mag-desc{font-size:.77rem;color:#bba8d8;line-height:1.68}
.cs-factbomb{background:rgba(255,80,100,.07);border:1px solid rgba(255,80,100,.28);border-radius:12px;padding:13px 15px;margin-top:4px;position:relative;z-index:1}
.cs-factbomb-title{font-size:.72rem;color:#ff8ba7;font-weight:800;margin-bottom:9px;letter-spacing:2px;text-transform:uppercase}
.cs-factbomb-item{font-size:.8rem;color:#f0c0cc;line-height:1.72;margin-bottom:6px;padding-left:14px;position:relative}
.cs-factbomb-item::before{content:'▸';position:absolute;left:0;color:#ff6b9d;font-weight:900}
.cs-strategy{background:rgba(100,255,180,.05);border:1px solid rgba(100,255,180,.18);border-radius:12px;padding:13px 15px;margin-top:10px;position:relative;z-index:1}
.cs-strategy-title{font-size:.72rem;color:#7effc8;font-weight:800;margin-bottom:9px;letter-spacing:2px;text-transform:uppercase}
.cs-strategy-item{font-size:.8rem;color:#c0f0e0;line-height:1.72;margin-bottom:6px;padding-left:16px;position:relative}
.cs-strategy-item::before{content:'→';position:absolute;left:0;color:#7effc8;font-weight:700}

/* ── 에너지 원정 리포트 카드 ── */
.ec-card{background:linear-gradient(145deg,#0a1628,#0d2137,#0a1628);border-radius:20px;padding:22px 18px;color:#e8f4ff;border:1px solid rgba(100,180,255,.18);box-shadow:0 8px 32px rgba(0,120,255,.12)}
.ec-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.ec-icon{font-size:2rem;animation:csFloat 3.5s ease-in-out infinite}
.ec-title-wrap h3{font-size:1.05rem;font-weight:800;color:#7dd3fc;margin:0}
.ec-title-wrap p{font-size:.78rem;color:#94a3b8;margin:4px 0 0}
.ec-direction{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.3);border-radius:12px;padding:9px 14px;margin-bottom:14px}
.ec-dir-label{font-size:.72rem;color:#94a3b8}
.ec-dir-value{font-size:.92rem;font-weight:800;color:#38bdf8}
.ec-section-title{font-size:.8rem;font-weight:700;color:#94a3b8;letter-spacing:.05em;margin:14px 0 8px;display:flex;align-items:center;gap:6px}
.ec-loc-grid{display:grid;grid-template-columns:1fr;gap:8px}
.ec-loc-item{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px 14px;transition:transform .2s,background .2s}
.ec-loc-item:hover{transform:translateX(4px);background:rgba(59,130,246,.08)}
.ec-loc-top{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.ec-loc-icon{font-size:1.4rem}
.ec-loc-name{font-size:.92rem;font-weight:700;color:#e2e8f0}
.ec-loc-coord{font-size:.7rem;color:#64748b;font-family:monospace;margin-top:2px}
.ec-loc-desc{font-size:.78rem;color:#94a3b8;line-height:1.72}
.ec-loc-tag{display:inline-block;font-size:.68rem;padding:2px 8px;border-radius:20px;font-weight:700;margin-top:6px}
.ec-tag-domestic{background:rgba(34,197,94,.12);color:#4ade80;border:1px solid rgba(34,197,94,.28)}
.ec-tag-global{background:rgba(139,92,246,.12);color:#a78bfa;border:1px solid rgba(139,92,246,.28)}
.ec-element-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:20px;font-size:.8rem;font-weight:700;margin-bottom:14px}
.ec-badge-wood{background:rgba(34,197,94,.12);color:#4ade80;border:1px solid rgba(34,197,94,.3)}
.ec-badge-fire{background:rgba(239,68,68,.12);color:#f87171;border:1px solid rgba(239,68,68,.3)}
.ec-badge-earth{background:rgba(234,179,8,.12);color:#fbbf24;border:1px solid rgba(234,179,8,.3)}
.ec-badge-metal{background:rgba(148,163,184,.15);color:#cbd5e1;border:1px solid rgba(148,163,184,.3)}
.ec-badge-water{background:rgba(59,130,246,.12);color:#60a5fa;border:1px solid rgba(59,130,246,.3)}

/* ── 퀀텀 로또 카드 ── */
.lc-wrap{background:linear-gradient(145deg,#1a1200,#2a1f00,#1a1a00);border-radius:20px;padding:22px 18px;color:#f5e6b0;border:1px solid rgba(255,210,0,.18);box-shadow:0 8px 32px rgba(200,160,0,.1)}
.lc-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.lc-icon{font-size:2rem;animation:csFloat 3.8s ease-in-out infinite}
.lc-title-wrap h3{font-size:1.05rem;font-weight:800;color:#ffd200;margin:0}
.lc-title-wrap p{font-size:.78rem;color:#a08040;margin:4px 0 0}
.lc-wave-box{background:rgba(255,210,0,.07);border:1px solid rgba(255,210,0,.22);border-radius:12px;padding:10px 14px;margin-bottom:14px;font-size:.82rem;line-height:1.8}
.lc-wave-label{font-size:.7rem;color:#a08040;font-weight:700;letter-spacing:.1em;margin-bottom:5px}
.lc-resonance{font-size:.95rem;font-weight:800;color:#ffd200}
.lc-games{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:14px}
.lc-game{background:rgba(255,255,255,.03);border:1px solid rgba(255,210,0,.12);border-radius:14px;padding:12px 14px}
.lc-game-top{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.lc-game-num{font-size:.72rem;font-weight:800;color:#a08040;letter-spacing:.08em}
.lc-game-tag{font-size:.7rem;color:#ffd200;background:rgba(255,210,0,.1);border:1px solid rgba(255,210,0,.25);border-radius:20px;padding:2px 9px;font-weight:700}
.lc-balls{display:flex;flex-wrap:wrap;gap:7px}
.lc-ball{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;position:relative;box-shadow:0 2px 8px rgba(0,0,0,.4),inset 0 2px 4px rgba(255,255,255,.25)}
.lb-y{background:radial-gradient(circle at 35% 35%,#ffe066,#f5a800);color:#4a2800}
.lb-b{background:radial-gradient(circle at 35% 35%,#5ab4ff,#1565c0);color:#fff}
.lb-r{background:radial-gradient(circle at 35% 35%,#ff7070,#c62828);color:#fff}
.lb-g{background:radial-gradient(circle at 35% 35%,#aaa,#555);color:#fff}
.lb-k{background:radial-gradient(circle at 35% 35%,#7aed7a,#1b5e20);color:#fff}
.lc-reason{background:rgba(255,210,0,.04);border:1px solid rgba(255,210,0,.14);border-radius:12px;padding:12px 14px}
.lc-reason-title{font-size:.72rem;color:#ffd200;font-weight:800;letter-spacing:.1em;margin-bottom:8px}
.lc-reason-item{font-size:.79rem;color:#c8a84a;line-height:1.75;padding-left:14px;position:relative;margin-bottom:4px}
.lc-reason-item::before{content:'◆';position:absolute;left:0;font-size:.55rem;top:3px;color:#ffd200}
.lc-disclaimer{font-size:.7rem;color:#665530;text-align:center;margin-top:12px;line-height:1.7}

/* ── 다시 뽑기 버튼 ── */
.lotto-redraw-btn {
  display:block;width:100%;padding:14px;margin:18px 0 8px;
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  color:#fff;font-size:1.05rem;font-weight:800;border:none;border-radius:12px;
  cursor:pointer;box-shadow:0 4px 18px rgba(118,75,162,.4);
  transition:transform .2s,box-shadow .2s;
  position:relative;overflow:hidden;
}
.lotto-redraw-btn::before {
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  transition:left .5s;
}
.lotto-redraw-btn:hover {
  transform:translateY(-2px);box-shadow:0 6px 24px rgba(118,75,162,.55);
}
.lotto-redraw-btn:hover::before { left:100%; }
.lotto-redraw-btn:active { transform:translateY(0); }
.lotto-history-count {
  text-align:center;font-size:.72rem;color:#8a7a4a;margin:6px 0 4px;
  letter-spacing:.03em;
}
.lotto-history-count span {
  background:rgba(255,210,0,.08);border:1px solid rgba(255,210,0,.18);
  border-radius:20px;padding:4px 14px;display:inline-block;
}

/* ── 퀀텀 명리 전략 리포트 ── */
.qm-wrap{background:linear-gradient(145deg,#030912,#040f1f,#03091a);border-radius:20px;
  padding:22px 18px;color:#b8d4f0;border:1px solid rgba(0,200,130,.15);
  box-shadow:0 8px 40px rgba(0,0,0,.8),0 0 30px rgba(0,255,130,.04)}
.qm-header{display:flex;align-items:center;gap:10px;margin-bottom:16px;border-bottom:1px solid rgba(0,200,130,.15);padding-bottom:13px}
.qm-icon{font-size:2rem;animation:csFloat 4s ease-in-out infinite}
.qm-title-wrap h3{font-size:1rem;font-weight:800;color:#00ff88;margin:0;text-shadow:0 0 12px rgba(0,255,136,.3)}
.qm-title-wrap p{font-size:.74rem;color:#3a6a5a;margin:3px 0 0;font-family:monospace}
.qm-section{margin-bottom:14px}
.qm-sec-head{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.qm-sec-icon{font-size:1.1rem}
.qm-sec-title{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.qm-sec-title.s1{color:#FFD700}
.qm-sec-title.s2{color:#00ff88}
.qm-sec-title.s3{color:#ff4d6d}
.qm-sec-title.s4{color:#60a5fa}
.qm-panel{background:rgba(255,255,255,.03);border-radius:12px;padding:13px 14px;border:1px solid rgba(255,255,255,.06)}
/* 명식 구조 */
.qm-struct-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:.82rem}
.qm-struct-label{color:#4a7a6a;font-size:.7rem;min-width:52px;font-weight:700}
.qm-struct-val{color:#d0e8d0;font-weight:700}
.qm-tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:.68rem;font-weight:800}
.qm-tag-jong{background:rgba(139,92,246,.18);color:#c084fc;border:1px solid rgba(139,92,246,.35)}
.qm-tag-strong{background:rgba(239,68,68,.13);color:#f87171;border:1px solid rgba(239,68,68,.3)}
.qm-tag-weak{background:rgba(59,130,246,.13);color:#60a5fa;border:1px solid rgba(59,130,246,.3)}
.qm-yong-list{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.qm-el-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:.73rem;font-weight:700}
.qm-chip-good{background:rgba(34,197,94,.12);color:#4ade80;border:1px solid rgba(34,197,94,.25)}
.qm-chip-bad{background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.2)}
.qm-chip-neutral{background:rgba(148,163,184,.1);color:#94a3b8;border:1px solid rgba(148,163,184,.2)}
/* 합화 변환 카드 */
.qm-hap-card{background:rgba(0,255,136,.04);border:1px solid rgba(0,255,136,.15);border-radius:12px;padding:11px 13px;margin-bottom:8px}
.qm-hap-card.hap-bad{background:rgba(255,77,109,.04);border-color:rgba(255,77,109,.18)}
.qm-hap-card.hap-neutral{background:rgba(148,163,184,.04);border-color:rgba(148,163,184,.12)}
.qm-hap-top{display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.qm-hap-badge{font-size:.68rem;font-weight:800;padding:2px 8px;border-radius:20px}
.qm-hap-good{background:rgba(0,255,136,.15);color:#00ff88;border:1px solid rgba(0,255,136,.3)}
.qm-hap-warn{background:rgba(255,215,0,.12);color:#FFD700;border:1px solid rgba(255,215,0,.3)}
.qm-hap-danger{background:rgba(255,77,109,.15);color:#ff4d6d;border:1px solid rgba(255,77,109,.3)}
.qm-hap-plain{background:rgba(148,163,184,.12);color:#94a3b8;border:1px solid rgba(148,163,184,.3)}
.qm-transform{display:flex;align-items:center;gap:6px;font-size:.82rem}
.qm-from{background:rgba(255,255,255,.07);padding:3px 10px;border-radius:8px;font-weight:700;color:#d0e8ff;font-family:monospace}
.qm-arrow{color:#00ff88;font-weight:900;font-size:.9rem}
.qm-arrow.arr-bad{color:#ff4d6d}
.qm-to{padding:3px 10px;border-radius:8px;font-weight:800;font-family:monospace}
.qm-to-good{background:rgba(0,255,136,.15);color:#00ff88}
.qm-to-bad{background:rgba(255,77,109,.15);color:#ff4d6d}
.qm-to-neutral{background:rgba(148,163,184,.1);color:#94a3b8}
.qm-hap-desc{font-size:.77rem;color:#5a8a7a;line-height:1.72;margin-top:5px}
.qm-hap-desc b{color:#d0e8d0}
.qm-no-hap{font-size:.78rem;color:#3a5a4a;text-align:center;padding:12px;letter-spacing:.05em}
/* 팩트 폭행 */
.qm-fact-item{display:flex;gap:9px;margin-bottom:9px;align-items:flex-start}
.qm-fact-bullet{font-size:.85rem;line-height:1}
.qm-fact-text{font-size:.8rem;color:#f0a0b0;line-height:1.75}
.qm-fact-text b{color:#ff4d6d}
/* 전략 액션 */
.qm-action-item{display:flex;gap:9px;margin-bottom:9px;align-items:flex-start;
  background:rgba(96,165,250,.05);border-radius:9px;padding:8px 11px;border:1px solid rgba(96,165,250,.1)}
.qm-action-num{width:20px;height:20px;background:rgba(96,165,250,.2);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.65rem;
  font-weight:800;color:#60a5fa;flex-shrink:0;margin-top:1px}
.qm-action-text{font-size:.8rem;color:#9ec8f0;line-height:1.72}
.qm-action-text b{color:#60a5fa}
/* NEO mode override */
body.neo-mode .qm-wrap{border-color:rgba(255,215,0,.18)!important;box-shadow:0 8px 40px rgba(0,0,0,.9),0 0 30px rgba(255,215,0,.04)!important}

/* ─── 일운/월운 섹션 ─── */
.fortune-tab-wrap{display:flex;gap:0;background:linear-gradient(135deg,#F3E5F5 0%,#FCE4EC 100%);border-radius:14px;padding:4px;margin-bottom:16px;box-shadow:0 4px 16px rgba(233,30,99,.1),inset 0 1px 0 rgba(255,255,255,.6)}
.fortune-tab{flex:1;border:none;padding:10px 6px;border-radius:11px;background:transparent;font-size:.85rem;font-weight:700;color:#BBA0B7;cursor:pointer;font-family:inherit;transition:all .3s;position:relative}
.fortune-tab.active{background:linear-gradient(135deg,#FFF,#FFF5F8);color:var(--pink);box-shadow:0 4px 12px rgba(255,139,167,.25),inset 0 1px 2px rgba(255,255,255,.8);font-weight:800}
.fortune-tab:active{transform:scale(.95);opacity:.85}
.fortune-panel{display:none}.fortune-panel.active{display:block;animation:fadeInUp .4s ease-out}
@keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.fr-summary{display:flex;align-items:flex-start;gap:14px;background:linear-gradient(135deg,#FFF5FB,#FFF9F5);border:2px solid #FFD6E8;position:relative;border-radius:16px;padding:16px 18px;margin-bottom:14px;box-shadow:0 8px 24px rgba(255,139,167,.15),inset 0 1px 0 rgba(255,255,255,.7);overflow:hidden}
.fr-summary::before{content:'';position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,200,200,.1),transparent);animation:shimmer 8s infinite;pointer-events:none}
@keyframes shimmer{0%{transform:translate(0,0)}50%{transform:translate(50px,50px)}100%{transform:translate(0,0)}}
.fr-summary-icon{font-size:3rem;flex-shrink:0;filter:drop-shadow(0 2px 8px rgba(255,139,167,.3));animation:float 3s ease-in-out infinite;z-index:2}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.fr-summary-content{flex:1;z-index:2}
.fr-summary-grade{font-size:1.16rem;font-weight:900;color:var(--pink);margin-bottom:4px;letter-spacing:.5px}
.fr-summary-desc{font-size:.82rem;color:#666;line-height:1.6;margin-bottom:10px}
.fr-battery-gauge{height:8px;background:rgba(0,0,0,.08);border-radius:99px;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.1)}
.fr-battery-fill{height:100%;background:linear-gradient(90deg,#FF6B9D,#FF8BA7);border-radius:99px;transition:width .6s cubic-bezier(.34,.1,.68,.55);box-shadow:0 0 12px rgba(255,107,157,.5),inset 0 1px 0 rgba(255,255,255,.3);position:relative}
.fr-battery-fill::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:batteryShine 2s infinite}
@keyframes batteryShine{0%,100%{opacity:0}50%{opacity:1}}
.fr-battery-label{font-size:.7rem;color:#999;margin-top:3px;font-weight:600}
.fr-row{background:#fff;border:1.5px solid #F2E4EC;border-radius:13px;padding:13px 14px;margin-bottom:10px;box-shadow:0 2px 8px rgba(200,150,200,.08),0 1px 3px rgba(0,0,0,.04);transition:all .3s;position:relative;overflow:hidden}
.fr-row::before{content:'';position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,139,167,.3),transparent);opacity:0;transition:opacity .3s}
.fr-row:hover{box-shadow:0 4px 16px rgba(200,150,200,.15),0 1px 3px rgba(0,0,0,.06);border-color:#FFD6E8;transform:translateY(-1px)}
.fr-row-title{font-weight:700;font-size:.85rem;color:#555;margin-bottom:6px;display:flex;align-items:center;gap:6px;letter-spacing:.3px}
.fr-row-body{font-size:.8rem;color:#666;line-height:1.75}
.fr-warn{background:linear-gradient(135deg,#FFF3E0,#FFF8E1);border-color:#FFD54F;box-shadow:0 2px 8px rgba(230,81,0,.08),0 1px 3px rgba(0,0,0,.04)}
.fr-warn .fr-row-title{color:#E65100;text-shadow:0 1px 2px rgba(230,81,0,.1)}
.fr-good{background:linear-gradient(135deg,#E8F5E9,#F1F8E9);border-color:#A5D6A7;box-shadow:0 2px 8px rgba(46,125,50,.08),0 1px 3px rgba(0,0,0,.04)}
.fr-good .fr-row-title{color:#2E7D32;text-shadow:0 1px 2px rgba(46,125,50,.1)}
.lucky-brand-box{background:linear-gradient(135deg,#F3E5F5,#EDE7F6);border:1.5px solid #CE93D8;border-radius:14px;padding:14px 15px;margin-top:6px;box-shadow:0 4px 12px rgba(206,147,216,.15);transition:all .3s}
.lucky-brand-box:hover{box-shadow:0 6px 16px rgba(206,147,216,.25)}
.lucky-brand-title{font-weight:700;font-size:.88rem;color:#6A1B9A;margin-bottom:10px;display:flex;align-items:center;gap:6px;letter-spacing:.4px}
.lucky-brand-items{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.lucky-brand-item{background:#fff;border-radius:11px;padding:11px 12px;border:1.5px solid rgba(206,147,216,.4);font-size:.78rem;color:#555;line-height:1.65;box-shadow:0 2px 6px rgba(206,147,216,.08);transition:all .2s}
.lucky-brand-item:hover{border-color:rgba(206,147,216,.7);box-shadow:0 3px 10px rgba(206,147,216,.15)}
.lucky-brand-item strong{color:#6A1B9A;display:block;margin-bottom:3px;font-weight:800}
.fr-gz-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;margin-top:6px}
.fr-gz-chip{display:inline-flex;flex-direction:column;align-items:center;background:linear-gradient(135deg,#fff,#FFF5F8);border:1.5px solid #FFD6E8;border-radius:11px;padding:9px 13px;font-size:.88rem;font-weight:800;color:#444;min-width:56px;box-shadow:0 2px 8px rgba(255,139,167,.12),inset 0 1px 0 rgba(255,255,255,.6);transition:all .2s}
.fr-gz-chip:hover{box-shadow:0 4px 12px rgba(255,107,157,.25),inset 0 1px 0 rgba(255,255,255,.8);transform:translateY(-2px)}
.fr-gz-chip span{font-size:.64rem;font-weight:600;color:#999;margin-top:3px;letter-spacing:.2px}

/* ═══ 영혼의 쌍둥이 연예인 ═══ */
.sim-celeb-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.sim-celeb-item { display: flex; justify-content: space-between; align-items: center; background: #fff8f2; border: 1px solid #ffe0d6; border-radius: 12px; padding: 12px 16px; transition: transform 0.2s; }
.sim-celeb-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.sim-celeb-info { flex: 1; }
.sim-celeb-name { font-size: 1.05rem; font-weight: 700; color: #333; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.sim-rank { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 0.75rem; font-weight: 800; color: #fff; background: #ccc; }
.sim-rank-1 { background: #FFD700; color: #856404; }
.sim-rank-2 { background: #C0C0C0; color: #333; }
.sim-rank-3 { background: #CD7F32; color: #fff; }
.sim-celeb-cat { font-size: 0.7rem; background: #e8a87c; color: #fff; padding: 2px 6px; border-radius: 8px; font-weight: 500; }
.sim-celeb-matches { font-size: 0.8rem; color: #666; }
.sim-celeb-score { width: 70px; text-align: right; }
.sim-score-val { font-size: 1.1rem; font-weight: 800; color: #c0632a; margin-bottom: 4px; }
.sim-score-bar-bg { width: 100%; height: 6px; background: #ffe0d6; border-radius: 3px; overflow: hidden; }
.sim-score-bar-fill { height: 100%; background: linear-gradient(90deg, #ffb347, #ff7b54); border-radius: 3px; }

/* 쌈바 모드 대응 */
.neo-mode .sim-celeb-item { background: #1e293b; border-color: #334155; }
.neo-mode .sim-celeb-name { color: #e2e8f0; }
.neo-mode .sim-celeb-matches { color: #94a3b8; }
.neo-mode .sim-celeb-cat { background: #334155; color: #94a3b8; }
.neo-mode .sim-score-val { color: #d4af37; }
.neo-mode .sim-score-bar-bg { background: #334155; }
.neo-mode .sim-score-bar-fill { background: linear-gradient(90deg, #d4af37, #fcd34d); }

/* ═══ 궁합 결과 새 디자인 ═══ */
.compat-wrap{font-size:.84rem}
.compat-grade-area{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#FFF5FB,#F3EBF9);border:1.5px solid #F0C8E8;border-radius:16px;padding:16px 18px;margin-bottom:12px}
.compat-grade-icon{font-size:2.8rem;flex-shrink:0}
.compat-grade-badge{display:inline-block;padding:4px 14px;border-radius:999px;font-size:1.05rem;font-weight:900;letter-spacing:.05em;margin-bottom:4px}
.grade-s{background:linear-gradient(135deg,#FFD700,#FFA500);color:#fff;box-shadow:0 2px 10px rgba(255,165,0,.4)}
.grade-a{background:linear-gradient(135deg,#FF8BA7,#FF6B9D);color:#fff;box-shadow:0 2px 10px rgba(255,107,157,.3)}
.grade-b{background:linear-gradient(135deg,#7C9EE5,#5B7FD4);color:#fff;box-shadow:0 2px 10px rgba(91,127,212,.3)}
.grade-c{background:linear-gradient(135deg,#69C782,#45B363);color:#fff}
.grade-d{background:linear-gradient(135deg,#FFB848,#FF8C00);color:#fff}
.grade-f{background:linear-gradient(135deg,#9E9E9E,#757575);color:#fff}
.compat-grade-label{font-size:.96rem;font-weight:700;color:#444;margin-bottom:3px}
.compat-grade-desc{font-size:.78rem;color:#777;line-height:1.55}
.compat-section{background:#fff;border:1px solid #F2E0EC;border-radius:13px;padding:13px 15px;margin-bottom:10px}
.compat-section-title{font-size:.84rem;font-weight:800;color:#555;margin-bottom:9px;display:flex;align-items:center;gap:6px}
.compat-check-item{display:flex;align-items:flex-start;gap:8px;padding:6px 0;border-bottom:1px solid #FAF0F5;font-size:.8rem;color:#555;line-height:1.6}
.compat-check-item:last-child{border-bottom:none;padding-bottom:0}
.compat-check-icon{font-size:.95rem;flex-shrink:0;margin-top:1px}
.compat-fact-box{background:linear-gradient(135deg,#FFF8E1,#FFF3CD);border:1.5px solid #FFD54F;border-radius:13px;padding:13px 15px;margin-bottom:10px}
.compat-fact-title{font-size:.84rem;font-weight:800;color:#E65100;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.compat-fact-body{font-size:.8rem;color:#5D4037;line-height:1.75}
.compat-advice-box{background:linear-gradient(135deg,#E8F5E9,#F1F8E9);border:1.5px solid #A5D6A7;border-radius:13px;padding:13px 15px;margin-bottom:10px}
.compat-advice-title{font-size:.84rem;font-weight:800;color:#2E7D32;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.compat-advice-body{font-size:.8rem;color:#33691E;line-height:1.75}
/* ═══ 전생 인연 카드 ═══ */
.pastlife-card{background:linear-gradient(160deg,#1A0533,#2D0B5E,#1A0A3B);border:1.5px solid rgba(186,104,200,.35);border-radius:18px;padding:20px 18px;margin-top:10px;position:relative;overflow:hidden}
.pastlife-card::before{content:'';position:absolute;top:-30px;right:-20px;width:180px;height:180px;background:radial-gradient(circle,rgba(186,104,200,.2),transparent 70%);pointer-events:none}
.pastlife-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.pastlife-title-text{font-size:.96rem;font-weight:900;color:#E0B0FF;letter-spacing:.04em}
.pastlife-subtitle{font-size:.72rem;color:rgba(224,176,255,.55);letter-spacing:.08em}
.pastlife-karma-badge{display:inline-block;padding:3px 12px;border-radius:999px;font-size:.74rem;font-weight:700;background:linear-gradient(135deg,rgba(186,104,200,.4),rgba(103,58,183,.3));color:#CE93D8;border:1px solid rgba(186,104,200,.35);margin-bottom:12px}
.pastlife-cross-row{background:rgba(255,255,255,.06);border:1px solid rgba(186,104,200,.2);border-radius:11px;padding:10px 13px;margin-bottom:8px}
.pastlife-cross-title{font-size:.72rem;color:rgba(224,176,255,.6);font-weight:700;letter-spacing:.08em;margin-bottom:6px}
.pastlife-cross-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.pastlife-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:.72rem;font-weight:700}
.pc-he{background:rgba(255,200,80,.2);color:#FFCA28;border:1px solid rgba(255,200,80,.25)}
.pc-chong{background:rgba(255,82,82,.2);color:#FF6E6E;border:1px solid rgba(255,82,82,.25)}
.pc-same{background:rgba(100,200,255,.2);color:#81D4FA;border:1px solid rgba(100,200,255,.25)}
.pc-none{background:rgba(255,255,255,.06);color:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.1)}
.pastlife-cross-result{font-size:.78rem;color:rgba(255,255,255,.7);line-height:1.65}
.pastlife-story-box{background:rgba(186,104,200,.1);border:1px solid rgba(186,104,200,.2);border-radius:11px;padding:14px 15px;margin:12px 0}
.pastlife-story-icon{font-size:2rem;text-align:center;margin-bottom:8px}
.pastlife-story-text{font-size:.82rem;color:rgba(255,255,255,.85);line-height:1.8;text-align:center}
.pastlife-prescription{background:rgba(255,255,255,.05);border-top:1px solid rgba(186,104,200,.2);padding-top:12px;margin-top:4px}
.pastlife-prescription-title{font-size:.76rem;font-weight:700;color:rgba(224,176,255,.65);letter-spacing:.1em;margin-bottom:7px}
.pastlife-prescription-body{font-size:.78rem;color:rgba(255,255,255,.65);line-height:1.7}
.pastlife-disclaimer{font-size:.68rem;color:rgba(255,255,255,.25);text-align:center;margin-top:12px}

@media(max-width:768px){
  .ts-grid{grid-template-columns:1fr}
  .manse-grid{gap:5px}
  .char-box{font-size:1.2rem}
  .tip-grid{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .share-btns{grid-template-columns:1fr}
  .lucky-brand-items{grid-template-columns:1fr}
  .dw-grid{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:6px}
}

/* ═══════════ NEO MODE — 백사자 쌈바 다크 모드 ═══════════ */

/* ── 언어 선택 드롭다운 (컴팩트) ── */
.lang-toggle-wrap {
  position: fixed;
  top: 56px;
  right: 14px;
  z-index: 9998;
}
.lang-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 139, 167, 0.5);
  border-radius: 22px;
  padding: 7px 14px 7px 10px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(255, 139, 167, 0.25);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  font-size: 0.8rem;
  font-weight: 700;
  color: #FF8BA7;
  user-select: none;
}
.lang-trigger:hover {
  box-shadow: 0 6px 20px rgba(255, 139, 167, 0.4);
  transform: translateY(-1px);
}
.lang-trigger .lang-icon { font-size: 1rem; }
.lang-trigger .lang-arrow {
  font-size: 0.6rem;
  transition: transform 0.3s ease;
  margin-left: 2px;
}
.lang-toggle-wrap.open .lang-trigger .lang-arrow {
  transform: rotate(180deg);
}
.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 139, 167, 0.35);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 8px 32px rgba(255, 139, 167, 0.25);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.95);
  transition: all 0.25s cubic-bezier(0.34, 0.1, 0.68, 0.55);
  min-width: 140px;
}
.lang-toggle-wrap.open .lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.lang-btn {
  background: transparent;
  border: none;
  font-size: 0.75rem;
  font-weight: 700;
  color: #888;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 10px;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.lang-btn .lang-flag { font-size: 1rem; }
.lang-btn.active {
  background: #FF8BA7;
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 139, 167, 0.4);
}
.lang-btn:hover:not(.active) {
  background: rgba(255, 139, 167, 0.1);
  color: #FF8BA7;
}
.lang-btn:active {
  transform: scale(0.93);
  opacity: 0.8;
}

/* ── 네오 모드 ── */
body.neo-mode .lang-trigger {
  background: rgba(26, 24, 48, 0.85);
  border-color: rgba(197, 160, 89, 0.4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  color: #C5A059;
}
body.neo-mode .lang-trigger:hover {
  box-shadow: 0 6px 24px rgba(197, 160, 89, 0.35);
}
body.neo-mode .lang-dropdown {
  background: rgba(26, 24, 48, 0.95);
  border-color: rgba(197, 160, 89, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}
body.neo-mode .lang-btn {
  color: #999;
}
body.neo-mode .lang-btn.active {
  background: #C5A059;
  color: #1a1830;
  box-shadow: 0 2px 10px rgba(197, 160, 89, 0.4);
}
body.neo-mode .lang-btn:hover:not(.active) {
  background: rgba(197, 160, 89, 0.15);
  color: #C5A059;
}

/* ── 자동 숨김 (3초 후 축소) ── */
.lang-toggle-wrap.collapsed .lang-trigger {
  padding: 7px 10px;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  justify-content: center;
}
.lang-toggle-wrap.collapsed .lang-trigger .lang-label,
.lang-toggle-wrap.collapsed .lang-trigger .lang-arrow {
  display: none;
}
.lang-toggle-wrap.collapsed .lang-trigger .lang-icon {
  margin: 0;
}

/* ── 구글 번역기 기본 위젯 및 상단 배너 숨김 ── */
.VIpgJd-ZVi9od-ORHb-OEVmcd { display: none !important; }
.goog-te-banner-frame.skiptranslate, .goog-te-gadget-icon, .goog-te-gadget-simple { display: none !important; }
#google_translate_element { display: none !important; }
body { top: 0px !important; }

/* ── 글리치 전환 오버레이 ── */
.neo-glitch-wrap{
  position:fixed;inset:0;z-index:9996;pointer-events:none;
  display:none;
}
.neo-glitch-wrap.run{display:block;animation:glitchFade .55s forwards}
.neo-glitch-layer{
  position:absolute;inset:0;
  background:rgba(255,255,255,.07);
}
.neo-glitch-layer:nth-child(2){
  background:rgba(197,160,89,.06);
  animation:glShift1 .55s steps(1) forwards;
}
.neo-glitch-layer:nth-child(3){
  background:rgba(100,200,255,.04);
  animation:glShift2 .55s steps(1) forwards;
}
@keyframes glitchFade{
  0%{opacity:1} 40%{opacity:.5} 70%{opacity:.2} 100%{opacity:0;display:none}
}
@keyframes glShift1{
  0%{clip-path:inset(20% 0 60% 0);transform:translateX(-4px)}
  25%{clip-path:inset(75% 0 5% 0);transform:translateX(3px)}
  50%{clip-path:inset(40% 0 30% 0);transform:translateX(-2px)}
  100%{clip-path:inset(100% 0 0 0)}
}
@keyframes glShift2{
  0%{clip-path:inset(10% 0 80% 0);transform:translateX(3px)}
  30%{clip-path:inset(60% 0 10% 0);transform:translateX(-3px)}
  60%{clip-path:inset(30% 0 50% 0);transform:translateX(2px)}
  100%{clip-path:inset(100% 0 0 0)}
}

/* 글리치 애니메이션 */
@keyframes neoGlitch{
  0%{filter:brightness(1) hue-rotate(0deg) saturate(1)}
  8%{filter:brightness(2.5) hue-rotate(90deg) saturate(3) contrast(2);transform:translateX(-3px)}
  16%{filter:brightness(.5) hue-rotate(180deg) saturate(5);transform:translateX(3px)}
  24%{filter:brightness(2) hue-rotate(270deg) saturate(2);transform:translateX(-2px)}
  32%{filter:brightness(1.5) hue-rotate(45deg) saturate(4);transform:translateX(1px)}
  50%,100%{filter:none;transform:translateX(0)}}
.neo-glitch-active{animation:neoGlitch .5s ease forwards!important}
.neo-glitch-active .neo-glitch-layer{animation:neoGlitch .5s ease forwards!important}

/* 모바일/저사양 전환 경량 플래시 */
body.neo-glitch-lite::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9995;
  background:linear-gradient(120deg,rgba(255,255,255,.08),rgba(196,160,89,.07),rgba(100,200,255,.06));
  animation:neoLiteFlash .24s ease-out forwards;
}
@keyframes neoLiteFlash{
  0%{opacity:.85}
  100%{opacity:0}
}

/* 자동 경량 모드: FPS 저하/long task 감지 시 진입 */
body.neo-auto-lite .neo-glitch-wrap{display:none!important}
body.neo-auto-lite .neo-glitch-layer{animation:none!important}
body.neo-auto-lite.neo-mode .card{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:0 2px 12px rgba(0,0,0,.45)!important;
}
body.neo-auto-lite.neo-mode .top-hero,
body.neo-auto-lite.neo-mode .qm-wrap,
body.neo-auto-lite.neo-mode .modal-card{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:0 4px 16px rgba(0,0,0,.45)!important;
}
/* NEO MODE 기본 */
body.neo-mode{background:#0a0b10!important;color:#c8c8c8!important;transition:background .4s,color .4s}
body.neo-mode .card{
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:0 4px 28px rgba(0,0,0,.7)!important;
  backdrop-filter:blur(6px)!important;
  -webkit-backdrop-filter:blur(6px)!important;color:#c8c8c8!important}
body.neo-mode .sec-title{color:#FFD700!important;text-shadow:0 0 8px rgba(255,215,0,.3)}
body.neo-mode .sec-title::before{background:linear-gradient(#FFD700,#FFA500)!important}
body.neo-mode .top-hero{
  background:linear-gradient(135deg,#0f0c29,#302b63,#24243e)!important;
  border:1.5px solid rgba(255,215,0,.25)!important;
  box-shadow:0 8px 40px rgba(0,0,0,.8),0 0 30px rgba(255,215,0,.08)!important}
body.neo-mode .top-hero h2{color:#ffe082!important}
body.neo-mode .hero-sub{color:rgba(255,224,130,.85)!important}
body.neo-mode .hero-correction-card{background:rgba(19,18,28,.58)!important;color:#cfc7bb!important;border-color:rgba(212,171,98,.45)!important}
body.neo-mode .hero-correction-title{color:#f3d9a0!important}
body.neo-mode .hero-correction-list li::before{color:#f6ce75!important;text-shadow:0 0 9px rgba(246,206,117,.4)!important}
body.neo-mode .inp{
  background:rgba(255,255,255,.06)!important;
  border:1.5px solid rgba(255,255,255,.1)!important;color:#e0e0e0!important}
body.neo-mode .inp::placeholder{color:#555!important}
body.neo-mode .inp:focus{border-color:#FFD700!important;box-shadow:0 0 0 3px rgba(255,215,0,.12)!important}
body.neo-mode .form-label{color:#888!important}
body.neo-mode select option{background:#1a1a2e;color:#e0e0e0}
body.neo-mode .btn-main{
  background:linear-gradient(135deg,#FFD700,#FF8C00)!important;
  color:#0a0b10!important;box-shadow:0 6px 20px rgba(255,160,0,.35)!important}
body.neo-mode .btn-main:hover{box-shadow:0 8px 28px rgba(255,160,0,.5)!important}
body.neo-mode .btn-sub{background:transparent!important;color:#FFD700!important;border:1.5px solid rgba(255,215,0,.35)!important}
body.neo-mode .btn-sub:hover{background:rgba(255,215,0,.07)!important}

@media (max-width: 768px), (prefers-reduced-motion: reduce){
  .neo-glitch-wrap,
  .neo-glitch-layer{
    animation:none !important;
  }
  body.neo-mode .card{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    box-shadow:0 2px 14px rgba(0,0,0,.5)!important;
  }
}
body.neo-mode .toggle-wrap{background:rgba(255,255,255,.06)!important}
body.neo-mode .tog-btn{color:#555!important}
body.neo-mode .tog-btn.on{background:rgba(255,215,0,.12)!important;color:#FFD700!important;box-shadow:none!important}
body.neo-mode .ts-card{background:rgba(255,255,255,.04)!important;border-color:rgba(255,255,255,.08)!important}
body.neo-mode .ts-card:hover{border-color:rgba(255,215,0,.4)!important;box-shadow:0 8px 24px rgba(255,215,0,.12)!important}
body.neo-mode .ts-name{color:#FFD700!important}
body.neo-mode .ts-desc{color:#666!important}
body.neo-mode .ts-hint{color:rgba(255,215,0,.6)!important}
body.neo-mode .johu-box{background:rgba(255,255,255,.04)!important;border-color:rgba(100,150,255,.2)!important}
body.neo-mode .fortune-tab-wrap{background:rgba(255,255,255,.06)!important}
body.neo-mode .fortune-tab{color:#444!important}
body.neo-mode .fortune-tab.active{background:rgba(255,215,0,.1)!important;color:#FFD700!important;box-shadow:none!important}
body.neo-mode .prem-box{background:rgba(255,255,255,.04)!important;border-color:rgba(255,255,255,.1)!important}
body.neo-mode .prem-title{color:#FFD700!important}
body.neo-mode .prem-text{color:#999!important}
body.neo-mode .travel-box,.neo-mode .travel-chip{background:rgba(255,255,255,.04)!important;border-color:rgba(255,255,255,.1)!important}
body.neo-mode .travel-chip-title{color:#FFD700!important}
body.neo-mode .travel-badge{background:rgba(255,215,0,.1)!important;color:#FFD700!important;border:1px solid rgba(255,215,0,.2)!important}
body.neo-mode .travel-chip li{color:#888!important}
body.neo-mode .celeb-tab-btn{background:rgba(255,215,0,.06)!important;color:#FFD700!important;border-color:rgba(255,215,0,.22)!important}
body.neo-mode .celeb-tab-btn:hover{background:rgba(255,215,0,.14)!important;border-color:rgba(255,215,0,.5)!important}
body.neo-mode .celeb-tab-btn.active{background:linear-gradient(135deg,rgba(255,215,0,.45),rgba(255,215,0,.3))!important;color:#1A1A1B!important;border-color:rgba(255,215,0,.85)!important;box-shadow:0 3px 10px rgba(255,215,0,.25)!important}
body.neo-mode .celeb-name-area{scrollbar-color:rgba(255,215,0,.3) transparent}
body.neo-mode .celeb-name-area::-webkit-scrollbar-thumb{background:rgba(255,215,0,.3)}
body.neo-mode .celeb-btn{background:rgba(255,215,0,.06)!important;color:#FFD700!important;border-color:rgba(255,215,0,.2)!important}
body.neo-mode .celeb-btn:hover{background:rgba(255,215,0,.14)!important;border-color:rgba(255,215,0,.5)!important}
body.neo-mode .celeb-btn.active{background:linear-gradient(135deg,rgba(255,215,0,.45),rgba(255,215,0,.3))!important;color:#1A1A1B!important;border-color:rgba(255,215,0,.85)!important;box-shadow:0 3px 10px rgba(255,215,0,.25)!important}
body.neo-mode .dw-item{background:rgba(255,255,255,.04)!important;border-color:rgba(255,255,255,.07)!important}
body.neo-mode .dw-item.good{border-color:rgba(34,197,94,.3)!important}
body.neo-mode .dw-item.bad{border-color:rgba(239,68,68,.3)!important}
body.neo-mode .modal-overlay{background:rgba(0,0,0,.95)!important}
body.neo-mode .modal-card{background:#0d0e1a!important;border:1px solid rgba(255,215,0,.18)!important;color:#c8c8c8!important}
body.neo-mode #lib-overlay{background:#0a0b10!important}
body.neo-mode #lib-msg{color:#FFD700!important}
body.neo-mode .dot{background:#FFD700!important}
body.neo-mode .logo-area h1{color:#FFD700!important;text-shadow:0 0 16px rgba(255,215,0,.4)}
body.neo-mode .logo-area p{color:#444!important}
/* 쌈바 로고 전환 */
body.neo-mode .normal-logo{display:none!important}
body.neo-mode .neo-logo{display:flex!important}

.neo-logo{display:none;flex-direction:column;align-items:center;padding:20px 0 28px}
.normal-logo{display:flex;flex-direction:column;align-items:center}
/* CSS 기하학적 사자 로고 */
.neo-lion{position:relative;width:72px;height:72px;margin:0 auto 6px}
.neo-lion-mane{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:72px;height:72px;border-radius:50%;
  background:conic-gradient(#b8860b 0deg,#FFD700 25deg,#a0740a 55deg,#FFE066 80deg,#b8860b 110deg,#FFD700 135deg,#a0740a 165deg,#FFE066 190deg,#b8860b 220deg,#FFD700 245deg,#a0740a 275deg,#FFE066 300deg,#b8860b 330deg,#FFD700 360deg);
  box-shadow:0 0 28px rgba(255,215,0,.5),0 0 60px rgba(255,165,0,.2)}
.neo-lion-body{
  width:46px;height:46px;background:linear-gradient(135deg,#FFE566,#FFC200);
  border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.neo-lion-face{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-48%);
  width:36px;height:32px;background:linear-gradient(180deg,#FFE566,#FFB800);
  border-radius:50% 50% 42% 42%}
.neo-lion-eye-l,.neo-lion-eye-r{position:absolute;top:9px;width:6px;height:7px;
  background:#1a1200;border-radius:50%;box-shadow:inset 0 1px 2px rgba(255,215,0,.5)}
.neo-lion-eye-l{left:7px}.neo-lion-eye-r{right:7px}
.neo-lion-eye-l::after,.neo-lion-eye-r::after{content:'';position:absolute;top:1px;left:1px;
  width:2px;height:2px;background:rgba(255,255,255,.7);border-radius:50%}
.neo-lion-nose{position:absolute;top:17px;left:50%;transform:translateX(-50%);
  width:7px;height:5px;background:#c0392b;border-radius:50% 50% 40% 40%}
.neo-lion-whisker-l,.neo-lion-whisker-r{position:absolute;top:19px;width:10px;height:1px;background:rgba(80,50,0,.45)}
.neo-lion-whisker-l{right:calc(50% + 2px);transform:rotate(-10deg)}
.neo-lion-whisker-r{left:calc(50% + 2px);transform:rotate(10deg)}
.neo-logo h1{font-family:'Noto Serif KR',serif;color:#FFD700;font-size:1.9rem;font-weight:700;
  text-shadow:0 0 20px rgba(255,215,0,.5);margin-top:6px}
.neo-logo p{color:#555;font-size:.85rem;margin-top:4px}
/* 쌈바 프로모션 박스 */
.neo-promo-box {
  background: #0f172a;
  border-radius: 12px;
  padding: 28px 20px;
  margin-top: 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  border: 1px solid rgba(212, 175, 55, 0.2);
}
.neo-promo-box::before, .neo-promo-box::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(212, 175, 55, 0.2);
}
.neo-promo-box::before {
  top: -60px;
  left: -60px;
  transform: rotate(45deg);
}
.neo-promo-box::after {
  bottom: -60px;
  right: -60px;
  transform: rotate(45deg);
}
.neo-promo-logo {
  font-family: 'Times New Roman', serif;
  font-size: 2.4rem;
  font-weight: 800;
  color: #d4af37;
  letter-spacing: 0.3em;
  margin-bottom: 4px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  margin-left: 0.3em; /* letter-spacing 보정 */
}
.neo-promo-subtitle {
  font-size: 0.75rem;
  color: #d4af37;
  letter-spacing: 0.2em;
  margin-bottom: 16px;
  opacity: 0.9;
}
.neo-promo-divider {
  width: 60px;
  height: 1px;
  background: rgba(212, 175, 55, 0.5);
  margin: 0 auto 20px;
  position: relative;
}
.neo-promo-divider::before {
  content: '✦';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #d4af37;
  font-size: 0.6rem;
  background: #0f172a;
  padding: 0 6px;
}
.neo-promo-text {
  font-size: 0.85rem;
  color: #e2e8f0;
  line-height: 1.7;
  margin-bottom: 24px;
  word-break: keep-all;
  position: relative;
  z-index: 1;
}
.neo-promo-text b {
  color: #d4af37;
  font-weight: 700;
}
.neo-promo-contact {
  font-size: 0.85rem;
  color: #d4af37;
  letter-spacing: 0.05em;
  font-weight: 600;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

  /* PDF 온라인 명리 전략 상담 박스 */
  .pdf-consult-box {
    background: #0f1525; /* 좀 더 어두운 네이비 배경 */
    border: 1px solid #c5a059; /* 골드 테두리 */
    box-sizing: border-box;
    padding: 30px 20px;
    margin-top: 20px;
    text-align: center;
    color: #eedc9a;
    font-family: 'Noto Sans KR', sans-serif;
    position: relative;
    overflow: hidden;
  }
  .pdf-consult-box::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 1px dashed rgba(197, 160, 89, 0.5); /* 점선 테두리 */
    pointer-events: none;
  }
  .pdf-consult-subtitle {
     font-size: 0.8rem;
     color: #c5a059;
     margin-bottom: 5px;
     letter-spacing: 0.1em;
  }
  .pdf-consult-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: #c5a059;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  }
  .pdf-consult-price-box {
    background: rgba(197, 160, 89, 0.1);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 25px;
  }
  .pdf-consult-old-price {
    font-size: 0.9rem;
    color: #a0aec0;
    text-decoration: line-through;
    margin-bottom: 5px;
  }
  .pdf-consult-discount {
    background-color: #c5a059;
    color: #0f1525;
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.8rem;
    margin-bottom: 8px;
    margin-right: 5px;
  }
  .pdf-consult-new-price {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    font-family: 'Arial', sans-serif;
  }
  .pdf-consult-method {
    font-size: 0.85rem;
    color: #c5a059;
    margin-top: 5px;
  }
  .pdf-consult-features {
    display: flex;
    justify-content: space-around;
    gap: 10px;
    margin-bottom: 25px;
  }
  .pdf-consult-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.75rem;
    color: #eedc9a;
    width: 30%;
    line-height: 1.3;
  }
  .pdf-consult-feature-icon {
    font-size: 1.4rem;
    margin-bottom: 8px;
    border: 1px solid rgba(197, 160, 89, 0.5);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 21, 37, 0.5);
  }
  .pdf-consult-footer {
    border-top: 1px dashed rgba(197, 160, 89, 0.5);
    padding-top: 15px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.05em;
  }
  .pdf-consult-footer-icon {
    font-size: 1.2rem;
    margin-right: 5px;
    vertical-align: middle;
  }
  
  /* 요주의 빌런 블랙리스트 UI */
  .villain-container {
    background: radial-gradient(circle at top left, #261414 0%, #111 45%, #0a0a0a 100%);
    border: 1px solid #4a2525;
    border-radius: 18px;
    padding: 22px;
    color: #f5f5f5;
    font-family: 'Noto Sans KR', sans-serif;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 120, 120, 0.08);
  }
  .villain-container--a-grade {
    position: relative;
    overflow: visible;
  }
  .villain-container--a-grade::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(140deg, rgba(255, 68, 68, 0.08), transparent 40%, rgba(255, 204, 153, 0.06));
    z-index: 0;
  }
  .villain-container--a-grade > * {
    position: relative;
    z-index: 1;
  }
  .villain-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(255, 150, 150, 0.2);
    padding-bottom: 16px;
  }
  .villain-shadow-box {
    width: 92px;
    height: 92px;
    background: #170d0d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid #7a3939;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
  }
  .villain-silhouette-stage {
    position: relative;
  }
  .villain-aura {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 88, 88, 0.28) 0%, rgba(255, 88, 88, 0.1) 40%, transparent 72%);
    animation: villainPulse 2.4s ease-in-out infinite;
  }
.villain-shadow {
  width: 60px;
  height: 60px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="30" r="20" fill="black"/><path d="M20,100 Q20,60 50,60 Q80,60 80,100 Z" fill="black"/><path d="M35,25 L45,28 L40,30 Z" fill="white"/><path d="M65,25 L55,28 L60,30 Z" fill="white"/><path d="M40,40 Q50,45 60,40 Q50,42 40,40 Z" fill="white"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
    filter: drop-shadow(0 0 6px rgba(255, 70, 70, 0.9));
    z-index: 2;
  }
  .villain-silhouette-core {
    position: absolute;
    width: 52%;
    height: 52%;
    border-radius: 50%;
    border: 1px dashed rgba(255, 120, 120, 0.4);
    z-index: 1;
}
.villain-title-area {
  flex: 1;
}
.villain-grade {
    font-size: 0.78rem;
    color: #ff8d8d;
  font-weight: bold;
  letter-spacing: 1px;
    margin-bottom: 6px;
  text-transform: uppercase;
}
.villain-name {
    font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
    margin: 0 0 6px;
    line-height: 1.35;
  }
  .villain-subcopy {
    margin: 0;
    font-size: 0.88rem;
    color: #d1d5db;
    line-height: 1.5;
}
.villain-section {
    margin-bottom: 12px;
    background: linear-gradient(180deg, rgba(24, 24, 24, 0.95), rgba(17, 17, 17, 0.95));
  padding: 15px;
    border-radius: 10px;
    border-left: 4px solid #5a5a5a;
}
.villain-section.red-flag {
    border-left-color: #ff4d4d;
}
.villain-section.defense {
    border-left-color: #7cda73;
}
.villain-section-title {
    font-size: 0.96rem;
  font-weight: bold;
    margin-bottom: 9px;
  display: flex;
  align-items: center;
    gap: 6px;
}
.villain-section-title i {
  font-size: 1.1rem;
}
.villain-text {
    font-size: 0.92rem;
    line-height: 1.62;
    color: #d4d4d8;
  margin: 0;
}
.villain-fact-bomb {
    background: linear-gradient(135deg, #2f0505, #1a0404);
    border: 1px solid #ef4444;
  padding: 15px;
  border-radius: 8px;
    margin-top: 16px;
  position: relative;
}
.villain-fact-bomb::before {
  content: 'Neo의 팩폭';
  position: absolute;
  top: -10px;
  left: 15px;
  background: #ff0000;
  color: #fff;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 4px;
}
.villain-fact-bomb p {
  margin: 0;
  color: #ffb0b0;
  font-size: 0.95rem;
  line-height: 1.5;
  font-weight: 500;
}
.villain-checklist-wrap {
  margin-top: 16px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 120, 120, 0.22);
  overflow: visible;
}
.villain-checklist {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}
.villain-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: #f3f4f6;
  padding: 9px 10px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  touch-action: manipulation;
}
.villain-check-input {
  margin-top: 3px;
  accent-color: #f87171;
  transform: scale(1.1);
}
.villain-check-text {
  line-height: 1.45;
  word-break: keep-all;
}
.villain-submit-btn {
  width: 100%;
  margin-top: 12px;
  border: 1px solid #f87171;
  border-radius: 10px;
  background: linear-gradient(135deg, #f87171, #ef4444);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 12px 14px;
  cursor: pointer;
  transition: transform 0.16s ease, filter 0.16s ease;
  touch-action: manipulation;
}
.villain-submit-btn:active {
  transform: scale(0.985);
  filter: brightness(0.95);
}
.villain-feedback {
  margin-top: 10px;
  padding: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  border-radius: 9px;
  font-size: 0.9rem;
  line-height: 1.5;
  transform: translateY(6px);
  transition: all 0.26s ease;
}
.villain-feedback.is-show {
  padding: 10px 12px;
  max-height: 420px;
  opacity: 1;
  transform: translateY(0);
  overflow: visible;
}
.villain-feedback.is-good {
  background: rgba(34, 197, 94, 0.18);
  border: 1px solid rgba(74, 222, 128, 0.35);
  color: #d1fae5;
}
.villain-feedback.is-mid {
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: #fef3c7;
}
.villain-feedback.is-danger {
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: #fee2e2;
}
.villain-quotes {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.villain-quote {
  font-size: 0.9rem;
  padding: 10px 15px;
  border-radius: 20px;
  max-width: 85%;
  line-height: 1.4;
}
.villain-quote strong {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 0.84rem;
  letter-spacing: 0.01em;
}
.villain-quote.yeoni {
  background: #f0f8ff;
  color: #333;
  align-self: flex-start;
  border-bottom-left-radius: 5px;
}
.villain-quote.neo {
  background: #333;
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 5px;
  border: 1px solid #555;
}

@keyframes villainPulse {
  0%,
  100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.08); opacity: 0.35; }
}

@media (max-width: 640px) {
  .villain-container {
    padding: 16px;
    border-radius: 14px;
  }
  .villain-header {
    align-items: flex-start;
  }
  .villain-shadow-box {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
  }
  .villain-shadow {
    width: 50px;
    height: 50px;
  }
  .villain-name {
    font-size: 1.05rem;
  }
  .villain-subcopy {
    font-size: 0.83rem;
  }
  .villain-check-item {
    padding: 9px;
    gap: 8px;
  }
  .villain-submit-btn {
    padding: 11px 12px;
    font-size: 0.9rem;
  }
}

/* ─── 데일리 운세 & 월간 흐름 ─── */
.fortune-card {
  background: linear-gradient(135deg, #fffafa, #ffe4e8);
  border: 1px solid rgba(255,139,167,0.4);
  box-shadow: 0 4px 15px rgba(255,139,167,0.1);
  padding: 24px 20px;
}
body.neo-mode .fortune-card {
  background: linear-gradient(135deg, #0f172a, #1a2336);
  border: 1px solid #334155;
  box-shadow: 0 4px 20px rgba(255,215,0,0.05);
}
.fortune-header {
  text-align: center;
  margin-bottom: 20px;
}
.fortune-date {
  font-size: 0.85rem;
  color: #777;
  margin-bottom: 4px;
}
body.neo-mode .fortune-date { color: #94a3b8; }
.fortune-score {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--pink);
  text-shadow: 1px 1px 0 rgba(255,139,167,0.2);
  margin-bottom: 6px;
}
body.neo-mode .fortune-score {
  color: #FFD700;
  text-shadow: 0 0 10px rgba(255,215,0,0.3);
}
.fortune-oneliner {
  font-size: 1.05rem;
  font-weight: 700;
  color: #444;
  word-break: keep-all;
}
body.neo-mode .fortune-oneliner { color: #f1f5f9; }

.fortune-section {
  background: rgba(255,255,255,0.6);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #333;
}
body.neo-mode .fortune-section {
  background: rgba(255,255,255,0.05);
  color: #cbd5e1;
}
.fortune-sec-title {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: var(--pink);
  display: flex;
  align-items: center;
  gap: 5px;
}
body.neo-mode .fortune-sec-title { color: #FFD700; }

.fortune-lucky-grid {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.lucky-item {
  flex: 1;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
body.neo-mode .lucky-item {
  background: #1e293b;
  border: 1px solid #334155;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.lucky-label {
  font-size: 0.75rem;
  color: #888;
  margin-bottom: 4px;
}
body.neo-mode .lucky-label { color: #94a3b8; }
.lucky-val {
  font-weight: 700;
  font-size: 0.95rem;
  color: #111;
}
body.neo-mode .lucky-val { color: #f8fafc; }

.monthly-chart-wrap {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px dashed rgba(0,0,0,0.1);
}
body.neo-mode .monthly-chart-wrap { border-top-color: rgba(255,255,255,0.1); }

.monthly-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 70px;
  gap: 4px;
  margin-top: 15px;
  padding-bottom: 0px;
}
.monthly-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}
.monthly-bar {
  width: 100%;
  background: var(--pink-l);
  border-radius: 4px 4px 0 0;
  transition: height 0.5s ease;
  min-height: 5px;
  max-width: 16px;
}
body.neo-mode .monthly-bar { background: #856a1d; }
.monthly-bar.is-today {
  background: var(--pink);
}
body.neo-mode .monthly-bar.is-today { background: #FFD700; box-shadow: 0 -2px 8px rgba(255,215,0,0.4); }
.monthly-label {
  font-size: 0.65rem;
  color: #666;
  margin-top: 6px;
}
body.neo-mode .monthly-label { color: #64748b; }

  /* ─── 알림 구독 서비스 & 알림 센터 ─── */
  .subscription-wrap {
    margin: 24px auto 10px;
    max-width: 600px;
    background: linear-gradient(135deg, #FFF5F8, #FFE4ED);
    border-radius: 16px;
    padding: 24px 20px;
    box-shadow: 0 8px 24px rgba(255, 139, 167, 0.15);
    font-family: 'Noto Sans KR', sans-serif;
    border: 1px solid #FFD6E8;
    transition: all 0.4s ease;
  }
  body.neo-mode .subscription-wrap {
    background: linear-gradient(135deg, #0b1021, #0f1525);
    border: 1px solid rgba(197, 160, 89, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  }
  .sub-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }
  .sub-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--pink);
  }
  body.neo-mode .sub-title {
    color: #c5a059;
    letter-spacing: 0.05em;
  }
  .btn-notif-history {
    background: rgba(255, 139, 167, 0.1);
    border: 1px solid rgba(255, 139, 167, 0.3);
    color: var(--pink);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
  }
  body.neo-mode .btn-notif-history {
    background: rgba(197, 160, 89, 0.1);
    border: 1px solid rgba(197, 160, 89, 0.3);
    color: #eedc9a;
  }
  .sub-desc {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
    margin-bottom: 16px;
    word-break: keep-all;
  }
  body.neo-mode .sub-desc {
    color: #a0aec0;
  }
  .sub-form {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
  }
  .sub-input {
    flex: 1;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 0.9rem;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
  }
  body.neo-mode .sub-input {
    background: #111827;
    border: 1px solid #2a3441;
    color: #eee;
  }
  .sub-input::placeholder { color: #aaa; }
  body.neo-mode .sub-input::placeholder { color: #64748b; }

  .btn-subscribe {
    background: var(--pink);
    color: #fff;
    border: none;
    padding: 0 16px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
  }
  body.neo-mode .btn-subscribe {
    background: #c5a059;
    color: #0b1021;
  }
  .btn-subscribe:hover { opacity: 0.9; }
  .sub-webpush {
    font-size: 0.8rem;
    color: #888;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  body.neo-mode .sub-webpush { color: #64748b; }
  
  /* 알림 센터 모달 UI */
  .notif-item {
    padding: 14px 4px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  body.neo-mode .notif-item { border-bottom: 1px solid #222; }
  .notif-item:last-child { border-bottom: none; }
  .notif-date { font-size: 0.75rem; color: #aaa; display:flex; align-items:center; gap:6px; }
  body.neo-mode .notif-date { color: #64748b; }
  .notif-content { font-size: 0.9rem; color: #333; line-height: 1.5; word-break:keep-all; }
  body.neo-mode .notif-content { color: #e2e8f0; }
  .notif-badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 0.7rem; font-weight: 700;}
  .badge-pig { background: #FFE4ED; color: var(--pink); }
  .badge-neo { background: rgba(197, 160, 89, 0.2); color: #c5a059; }
  .streak-reward {
    background: linear-gradient(90deg, #FFF0F5, #FFF);
    border: 1px dashed var(--pink);
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 10px;
    font-size: 0.85rem;
    text-align: center;
  }
  body.neo-mode .streak-reward {
    background: rgba(197,160,89,0.05);
    border: 1px dashed rgba(197,160,89,0.5);
    color: #eedc9a;
  }

  /* 쌈바/꽃돼지 모드 분기 (기본값 설정) */
  .pig-only { display: block; }
  span.pig-only { display: inline; }
  .neo-only { display: none; }
  
  /* 강제 오버라이딩 */
  body.neo-mode .pig-only { display: none !important; }
  body.neo-mode .neo-only { display: block !important; }
  body.neo-mode span.neo-only { display: inline !important; }

  /* ══════════════════════════════════════════
     fate-scroll-section │ 스크롤 등장 시스템
     네임스페이스 충돌 방지 · 글로벌 태그 직접 스타일링 금지
  ══════════════════════════════════════════ */
  .fate-scroll-section-hidden {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .fate-scroll-section-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  /* 다음 섹션 인디케이터 컨테이너 */
  .fate-scroll-next-indicator {
    position: fixed;
    bottom: 86px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 490;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  .fate-scroll-next-indicator.fate-scroll-next-visible {
    opacity: 1;
    pointer-events: auto;
  }
  .fate-scroll-top-indicator {
    bottom: 86px;
  }
  /* 화살표 버튼 */
  .fate-scroll-next-arrow {
    width: 38px;
    height: 38px;
    background: var(--point-color, #FF8BA7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    box-shadow: 0 4px 16px rgba(255, 139, 167, 0.45);
    cursor: pointer;
    pointer-events: auto;
    border: none;
    outline: none;
    animation: fate-scroll-bounce 1.5s ease-in-out infinite;
  }
  /* 라벨 */
  .fate-scroll-next-label {
    font-size: 0.68rem;
    color: var(--point-color, #FF8BA7);
    font-weight: 700;
    background: var(--card-bg, rgba(255, 255, 255, 0.92));
    padding: 3px 10px;
    border-radius: 99px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    max-width: 165px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }
  /* 바운스 키프레임 */
  @keyframes fate-scroll-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(7px); }
  }
  @keyframes fate-scroll-bounce-up {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-7px); }
  }
  .fate-scroll-top-indicator .fate-scroll-next-arrow {
    animation: fate-scroll-bounce-up 1.5s ease-in-out infinite;
  }
  /* 쌈바 모드 색상 오버라이드 */
  body.neo-mode .fate-scroll-next-arrow {
    box-shadow: 0 4px 16px rgba(255, 215, 0, 0.35);
  }
  body.neo-mode .fate-scroll-next-label {
    color: var(--point-color, #FFD700);
  }

  /* ══════════════════════════════════════════
     fsn-navbar │ 섹션 네비게이션 바
     pig mode: 꽃 장식 | neo mode: 발바닥 장식
  ══════════════════════════════════════════ */
  .fsn-navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 480;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 52px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transform: translateY(-100%);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.4s ease, border-color 0.4s ease;
    pointer-events: none;
    overflow: hidden;
  }
  .fsn-navbar.fsn-visible {
    transform: translateY(0);
    pointer-events: auto;
  }
  /* 꽃돼지 모드 */
  .fsn-navbar.fsn-pig {
    background: rgba(255, 245, 248, 0.9);
    border-bottom: 1.5px solid rgba(255, 183, 178, 0.45);
    box-shadow: 0 3px 16px rgba(255, 139, 167, 0.18);
  }
  /* 쌈바 모드 */
  .fsn-navbar.fsn-neo {
    background: rgba(14, 14, 20, 0.92);
    border-bottom: 1.5px solid rgba(255, 215, 0, 0.28);
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.5), 0 0 24px rgba(255, 215, 0, 0.07);
  }
  /* 장식 아이콘 */
  .fsn-deco {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    display: inline-block;
  }
  .fsn-pig .fsn-deco {
    animation: fsn-flower-rock 3.5s ease-in-out infinite;
  }
  .fsn-neo .fsn-deco {
    animation: fsn-paw-pulse 1.9s ease-in-out infinite;
  }
  @keyframes fsn-flower-rock {
    0%, 100% { transform: rotate(-12deg) scale(1); }
    50%       { transform: rotate(12deg) scale(1.18); }
  }
  @keyframes fsn-paw-pulse {
    0%, 100% { opacity: 0.65; transform: scale(0.9); }
    50%       { opacity: 1;    transform: scale(1.15); }
  }
  /* 섹션 제목 텍스트 */
  .fsn-title {
    font-size: 0.77rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 58vw;
    transition: color 0.3s ease;
  }
  .fsn-pig .fsn-title  { color: var(--pink, #FF8BA7); }
  .fsn-neo .fsn-title  { color: #FFD700; text-shadow: 0 0 8px rgba(255,215,0,.3); }
  /* 구분 점 */
  .fsn-sep {
    font-size: 0.6rem;
    flex-shrink: 0;
    opacity: 0.5;
  }
  .fsn-pig .fsn-sep { color: var(--pink, #FF8BA7); }
  .fsn-neo .fsn-sep { color: #FFD700; }
  /* 케이스 하단 스크롤 진행 바 */
  .fsn-progress {
    position: absolute;
    bottom: 0; left: 0;
    height: 2px;
    width: 0%;
    border-radius: 0 2px 2px 0;
    transition: width 0.08s linear;
  }
  .fsn-pig .fsn-progress {
    background: linear-gradient(90deg, var(--pink-l,#FFB7B2), var(--pink,#FF8BA7));
  }
  .fsn-neo .fsn-progress {
    background: linear-gradient(90deg, #FFA500, #FFD700);
  }

  /* ══════════════════════════════════════════
     신비로운 사주 리셋 버튼 (Mystic Summon Button)
  ══════════════════════════════════════════ */
  @keyframes mystic-breathe {
    0%   { transform: scale(1);   box-shadow: 0 0 15px rgba(212, 175, 55, 0.4), inset 0 0 10px rgba(212, 175, 55, 0.2); }
    50%  { transform: scale(1.03);box-shadow: 0 0 30px rgba(212, 175, 55, 0.8), inset 0 0 20px rgba(212, 175, 55, 0.4); }
    100% { transform: scale(1);   box-shadow: 0 0 15px rgba(212, 175, 55, 0.4), inset 0 0 10px rgba(212, 175, 55, 0.2); }
  }
  .mystic-summon-btn {
    display: block;
    margin: 40px auto;
    padding: 1.2rem 3rem;
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    text-align: center;
    background: linear-gradient(135deg, #2c3e50, #000000, #1a1a2e);
    background-size: 200% 200%;
    border: 1px solid rgba(212, 175, 55, 0.6);
    border-radius: 12px;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    animation: mystic-breathe 3.5s ease-in-out infinite;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
    width: 85%;
    max-width: 400px;
    position: relative;
    overflow: hidden;
  }
  .mystic-summon-btn::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }
  .mystic-summon-btn:hover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.9), inset 0 0 25px rgba(212, 175, 55, 0.5);
    border-color: #d4af37;
    animation-play-state: paused;
    color: #FFDF00;
    text-shadow: 0 0 15px rgba(255, 223, 0, 0.9);
  }
  .mystic-summon-btn:hover::before {
    opacity: 1;
  }
  @media (max-width: 480px) {
    .mystic-summon-btn { 
      padding: 1.1rem 2rem; 
      font-size: 1.15rem; 
      margin: 30px auto;
    }
  }

/* 퀀텀 명리 엔진 업그레이드 스타일 (Cosmic Constellation UX) */
.quantum-mode {
  --q-ink: #f4f8ff;
  --q-muted: #aebcdd;
  --q-border: rgba(166, 190, 255, 0.26);
  --q-nebula: #90b6ff;
  --q-magenta: #ff8fce;
  position: relative;
  isolation: isolate;
  padding: 38px 24px 30px;
  background:
    radial-gradient(circle at 16% 18%, rgba(133, 162, 255, 0.34), transparent 42%),
    radial-gradient(circle at 84% 12%, rgba(255, 157, 210, 0.26), transparent 46%),
    radial-gradient(circle at 50% 110%, rgba(46, 88, 170, 0.38), transparent 57%),
    linear-gradient(155deg, #050814 6%, #0a1230 52%, #101a3f 100%);
  border-radius: 30px;
  border: 1px solid var(--q-border);
  box-shadow: 0 26px 54px rgba(2, 8, 24, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -20px 50px rgba(66, 98, 189, 0.14);
  color: var(--q-ink);
  margin-bottom: 36px;
  text-align: center;
  overflow: hidden;
  font-family: 'Noto Serif KR', 'Gowun Dodum', serif;
}
.quantum-mode::before {
  content: '';
  position: absolute;
  inset: -30% -10%;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255, 255, 255, 0.95), transparent 50%),
    radial-gradient(1.4px 1.4px at 42% 26%, rgba(198, 225, 255, 0.9), transparent 52%),
    radial-gradient(1px 1px at 74% 36%, rgba(255, 218, 245, 0.86), transparent 55%),
    radial-gradient(1.6px 1.6px at 83% 65%, rgba(255, 255, 255, 0.85), transparent 55%),
    radial-gradient(1px 1px at 25% 78%, rgba(189, 212, 255, 0.82), transparent 55%);
  background-size: 260px 260px, 320px 320px, 290px 290px, 360px 360px, 300px 300px;
  opacity: 0.45;
  animation: q-star-drift 28s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.quantum-mode::after {
  content: '';
  position: absolute;
  inset: -42% 16% auto 16%;
  height: 58%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(141, 173, 255, 0.34) 0%, rgba(141, 173, 255, 0) 68%);
  filter: blur(26px);
  animation: q-nebula-breathe 6.8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
.quantum-mode .quantum-wrap {
  position: relative;
  z-index: 1;
}
@keyframes q-star-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-70px, 56px, 0) scale(1.08); }
}
@keyframes q-nebula-breathe {
  0% { opacity: 0.55; transform: translateY(0); }
  100% { opacity: 0.9; transform: translateY(12px); }
}

.quantum-title {
  font-size: clamp(1.38rem, 4.4vw, 1.9rem);
  font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
  font-weight: 700;
  letter-spacing: 3.6px;
  color: #eaf3ff;
  text-transform: uppercase;
  margin-bottom: 10px;
  text-shadow: 0 0 18px rgba(145, 183, 255, 0.36);
}
.quantum-title::after {
  content: '';
  display: block;
  width: 116px;
  height: 1px;
  margin: 10px auto 0;
  background: linear-gradient(90deg, transparent, rgba(211, 226, 255, 0.9), transparent);
}
.quantum-subtitle {
  font-size: 0.94rem;
  color: #c9d6f3;
  font-weight: 500;
  margin-bottom: 30px;
  letter-spacing: 0.3px;
  line-height: 1.55;
}

/* 3D Card */
.quantum-card-scene {
  width: 196px;
  height: 292px;
  margin: 0 auto;
  perspective: 1300px;
  z-index: 2;
  position: relative;
}
.quantum-card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.82s cubic-bezier(0.2, 0.74, 0.23, 1.15);
  transform-style: preserve-3d;
  cursor: pointer;
  filter: drop-shadow(0 14px 30px rgba(5, 11, 34, 0.55));
}
.quantum-card.flip-it {
  transform: rotateY(180deg) scale(1.04);
  animation: q-glow 2.8s infinite alternate;
}
@keyframes q-glow {
  0% { filter: drop-shadow(0 0 20px rgba(129, 160, 255, 0.45)) drop-shadow(0 0 36px rgba(129, 160, 255, 0.22)); }
  100% { filter: drop-shadow(0 0 24px rgba(255, 142, 203, 0.48)) drop-shadow(0 0 42px rgba(255, 142, 203, 0.25)); }
}
.quantum-card-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
}
.quantum-card-front,
.quantum-card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.quantum-card-front {
  background:
    linear-gradient(160deg, rgba(5, 9, 28, 0.96), rgba(15, 26, 67, 0.95) 58%, rgba(29, 36, 83, 0.95));
  border: 1px solid rgba(174, 203, 255, 0.33);
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.36), inset 0 0 22px rgba(111, 147, 246, 0.2);
}
.quantum-card-front::before {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 18px;
  border: 1px solid rgba(183, 208, 255, 0.22);
  pointer-events: none;
}
.quantum-card-front::after {
  content: '';
  position: absolute;
  width: 190px;
  height: 190px;
  top: -75px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(161, 189, 255, 0.32), rgba(161, 189, 255, 0));
  filter: blur(10px);
  pointer-events: none;
}
.quantum-card-back {
  background: linear-gradient(160deg, rgba(8, 13, 35, 0.96), rgba(16, 27, 64, 0.96), rgba(24, 34, 77, 0.96));
  border: 1px solid rgba(165, 196, 255, 0.35);
  transform: rotateY(180deg);
  padding: 22px;
  text-align: center;
  backdrop-filter: blur(12px);
}
.q-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.9) 0 1.2px, transparent 1.4px),
    radial-gradient(circle at 70% 28%, rgba(198, 220, 255, 0.88) 0 1px, transparent 1.2px),
    radial-gradient(circle at 36% 72%, rgba(255, 218, 241, 0.82) 0 1.1px, transparent 1.4px),
    radial-gradient(circle at 80% 82%, rgba(255, 255, 255, 0.78) 0 0.9px, transparent 1.2px),
    linear-gradient(180deg, rgba(20, 42, 108, 0.2) 0%, rgba(8, 13, 33, 0.3) 100%);
  background-size: 170px 170px, 190px 190px, 160px 160px, 200px 200px, 100% 100%;
  opacity: 0.84;
  animation: q-star-twinkle 4.2s ease-in-out infinite alternate;
}
@keyframes q-star-twinkle {
  0% { opacity: 0.62; }
  100% { opacity: 0.95; }
}
.q-logo {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 1px solid rgba(205, 226, 255, 0.34);
  background: radial-gradient(circle, rgba(152, 184, 255, 0.32) 0%, rgba(95, 116, 198, 0.12) 58%, rgba(95, 116, 198, 0) 100%);
  box-shadow: 0 0 28px rgba(138, 170, 255, 0.42), inset 0 0 20px rgba(214, 229, 255, 0.24);
  z-index: 1;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f7fbff;
  font-size: 42px;
  line-height: 1;
}
.q-logo:empty::before {
  content: '✦';
}
.q-tap-text {
  z-index: 1;
  font-size: 0.78rem;
  color: #f2f7ff;
  letter-spacing: 1.8px;
  font-weight: 600;
  text-transform: uppercase;
  border: 1px solid rgba(205, 223, 255, 0.34);
  background: linear-gradient(130deg, rgba(19, 31, 74, 0.82), rgba(30, 44, 102, 0.72));
  padding: 7px 14px;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(3, 10, 28, 0.35);
}

/* Expanded Dashboard */
.q-dashboard {
  margin-top: -18px;
  padding-top: 36px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  display: none;
}
.q-dashboard.show {
  opacity: 1;
  transform: translateY(0);
}

/* Daily Pillars */
.q-pillars-wrap {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.q-pillar {
  background: linear-gradient(170deg, rgba(13, 24, 58, 0.72), rgba(18, 32, 73, 0.46));
  border: 1px solid rgba(170, 198, 255, 0.2);
  border-radius: 14px;
  padding: 15px 14px;
  width: 106px;
  backdrop-filter: blur(4px);
  transition: transform 0.28s ease, border-color 0.28s ease;
}
.q-pillar:hover {
  transform: translateY(-3px);
  border-color: rgba(205, 223, 255, 0.45);
}
.q-p-label {
  font-size: 0.67rem;
  color: var(--q-muted);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.q-p-char {
  font-size: 2.05rem;
  font-weight: 700;
  color: #f7faff;
  text-shadow: 0 0 16px rgba(173, 202, 255, 0.28);
}
.q-p-desc {
  font-size: 0.74rem;
  color: #d6e0f5;
  margin-top: 5px;
}

/* Explanation Core */
.q-explanation {
  font-size: 0.93rem;
  line-height: 1.72;
  color: #e6eeff;
  font-weight: 400;
  margin: 0 auto 26px auto;
  max-width: 92%;
  background: linear-gradient(145deg, rgba(8, 16, 44, 0.64), rgba(13, 23, 60, 0.52));
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(176, 204, 255, 0.2);
  text-align: left;
}
.q-explanation strong {
  color: #ffffff;
  font-weight: 700;
}

/* Elemental Balance Chips */
.q-elements-title {
  font-size: 0.8rem;
  color: #b4c4e6;
  letter-spacing: 2px;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.q-elements-row {
  display: flex;
  justify-content: center;
  gap: 11px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.q-chip {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.08rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: transform 0.24s ease, box-shadow 0.24s ease;
  border: 1px solid rgba(255, 255, 255, 0.24);
}
.q-chip:hover {
  transform: scale(1.12) translateY(-2px);
  z-index: 10;
}
.q-chip.wood { background: linear-gradient(135deg, #1fbb95, #0c7a63); box-shadow: 0 0 14px rgba(31, 187, 149, 0.38); }
.q-chip.fire { background: linear-gradient(135deg, #ff5977, #d62d5d); box-shadow: 0 0 14px rgba(255, 89, 119, 0.36); }
.q-chip.earth { background: linear-gradient(135deg, #ffca4d, #bd8421); box-shadow: 0 0 14px rgba(255, 202, 77, 0.34); }
.q-chip.metal { background: linear-gradient(135deg, #c7d4e8, #7f95b6); box-shadow: 0 0 14px rgba(199, 212, 232, 0.32); }
.q-chip.water { background: linear-gradient(135deg, #60a5ff, #2f6fdc); box-shadow: 0 0 14px rgba(96, 165, 255, 0.36); }
.q-chip.active {
  border: 2px solid #f8fbff;
  box-shadow: 0 0 24px currentColor;
}

/* Tooltip */
.q-chip .q-tooltip {
  visibility: hidden;
  width: 142px;
  background: rgba(8, 18, 47, 0.96);
  color: #f8fbff;
  text-align: center;
  border-radius: 10px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  transition: opacity 0.28s, transform 0.28s;
  border: 1px solid rgba(185, 212, 255, 0.28);
  font-size: 0.74rem;
  line-height: 1.45;
  pointer-events: none;
}
.q-chip .q-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: rgba(8, 18, 47, 0.96) transparent transparent transparent;
}
.q-chip:hover .q-tooltip {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Gaeun Prescript */
.gaeun-prescript {
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(10, 19, 50, 0.72), rgba(13, 24, 61, 0.46));
  border: 1px solid rgba(179, 207, 255, 0.2);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.22);
}
.gaeun-title {
  font-size: 0.95rem;
  color: #d2e1ff;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}

@media (max-width: 640px) {
  .quantum-mode {
    padding: 30px 16px 22px;
    border-radius: 24px;
  }
  .quantum-title {
    letter-spacing: 2.2px;
  }
  .quantum-subtitle {
    font-size: 0.88rem;
    margin-bottom: 24px;
  }
  .quantum-card-scene {
    width: 176px;
    height: 264px;
  }
  .q-logo {
    width: 66px;
    height: 66px;
    font-size: 36px;
  }
  .q-tap-text {
    font-size: 0.72rem;
    letter-spacing: 1.4px;
  }
  .q-pillar {
    width: calc(50% - 10px);
    max-width: 140px;
  }
  .q-explanation {
    max-width: 96%;
    font-size: 0.89rem;
    padding: 16px;
  }
}

/* ═══ Feature Card Grid (부가 기능 카드) ═══ */
.feature-card-grid {
  display: flex;
  flex-direction: column;
  gap: 150px;
  margin-top: 120px;
  margin-bottom: 120px;
  position: relative;
}
.feature-card-grid::before {
  content: '';
  position: absolute;
  inset: -34px -10px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 197, 228, 0.35), transparent 42%),
    radial-gradient(circle at 88% 16%, rgba(186, 245, 255, 0.34), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(255, 231, 205, 0.30), transparent 45%);
  pointer-events: none;
  z-index: 0;
}
.feature-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: linear-gradient(160deg, #ffffff 0%, #fff9fe 54%, #f8fdff 100%);
  box-shadow: 0 10px 30px rgba(255, 122, 174, 0.14), 0 4px 16px rgba(23, 120, 156, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.82);
  display: flex;
  flex-direction: column;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  margin-bottom: 0;
  z-index: 1;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(255, 108, 166, 0.19), 0 8px 24px rgba(30, 123, 165, 0.16); }
.feature-card:active { transform: scale(0.98); }

.feature-card__img-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(145deg, #fff9fd, #f1fbff);
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-card__img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.4s ease;
}
.feature-card:hover .feature-card__img { transform: scale(1.03); }

.feature-card__badge {
  position: absolute;
  top: 8px; left: 8px;
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.92), rgba(236, 72, 153, 0.9));
  color: #fff;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  z-index: 2;
}

.feature-card__body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}
.feature-card__title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #172554;
  margin: 0 0 6px;
  line-height: 1.3;
}
.feature-card__desc {
  font-size: 0.8rem;
  color: #475569;
  margin: 0 0 12px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feature-card__cta {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  letter-spacing: 0.3px;
  transition: opacity 0.2s;
  align-self: flex-start;
}
.feature-card:hover .feature-card__cta { opacity: 0.85; }

/* Card accent colors */
.feature-card--face .feature-card__cta { background: linear-gradient(135deg, #10b981, #059669); }
.feature-card--face { border-bottom: 3px solid #10b981; }
.feature-card--animal .feature-card__cta { background: linear-gradient(135deg, #eab308, #d97706); }
.feature-card--animal { border-bottom: 3px solid #eab308; }
.feature-card--tarot .feature-card__cta { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.feature-card--tarot { border-bottom: 3px solid #8b5cf6; }
.feature-card--tazza .feature-card__cta { background: linear-gradient(135deg, #16a34a, #15803d); }
.feature-card--tazza { border-bottom: 3px solid #16a34a; }
.feature-card--egypt { border-bottom: 3px solid #d4af37; }
.feature-card--egypt .feature-card__cta { background: linear-gradient(135deg, #d4af37, #b8860b); }
.feature-card--juyuk { border-bottom: 3px solid #b8860b; }
.feature-card--juyuk .feature-card__cta { background: linear-gradient(135deg, #24243e, #b8860b); }
.feature-card--juyuk .feature-card__img-wrap { background: linear-gradient(145deg, #120c00, #2a1a00); }
.feature-card--juyuk .feature-card__img {
  filter: drop-shadow(0 0 0px rgba(212,175,55,0));
  transition: transform 0.4s ease, filter 0.4s ease;
}
.feature-card--juyuk:hover .feature-card__img {
  transform: scale(1.06);
  filter: drop-shadow(0 0 14px rgba(212,175,55,0.75)) brightness(1.1);
}
body.neo-mode .feature-card--juyuk .feature-card__img-wrap { background: linear-gradient(135deg, #1a1000, #0d0800); }
.feature-card--sukuyo { border-bottom: 3px solid #9333ea; }
.feature-card--sukuyo .feature-card__cta { background: linear-gradient(135deg, #3b1f7a, #9333ea); }
.feature-card--sukuyo .feature-card__img-wrap { background: linear-gradient(145deg, #0a0c19, #1a0e3b); }
.feature-card--astro-fc { border-bottom: 3px solid #7d2ae8; }
.feature-card--astro-fc .feature-card__cta { background: linear-gradient(135deg, #1e003b, #7d2ae8); }
.feature-card--astro-fc .feature-card__img-wrap { background: linear-gradient(145deg, #0a0a14, #12103a); }
.feature-card--ziwei { border-bottom: 3px solid #e879f9; }
.feature-card--ziwei .feature-card__cta { background: linear-gradient(135deg, #2b0545, #c026d3); }
.feature-card--ziwei .feature-card__img-wrap { background: linear-gradient(145deg, #0f0a2a, #1e0a45); }
.feature-card--ziwei .feature-card__img {
  filter: drop-shadow(0 0 0px rgba(232,121,249,0));
  transition: transform 0.4s ease, filter 0.4s ease;
}
.feature-card--ziwei:hover .feature-card__img {
  transform: scale(1.04);
  filter: drop-shadow(0 0 14px rgba(232,121,249,0.7)) brightness(1.1);
}
@media (max-width: 480px) {
  .juyuk-modal-inner { padding: 0 12px !important; }
  .juyuk-modal-card { padding: 20px 16px !important; }
}


/* NEO (사자) mode overrides */
body.neo-mode .feature-card {
  background: rgba(20, 18, 40, 0.9);
  border-color: rgba(197, 160, 89, 0.25);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
body.neo-mode .feature-card:hover { box-shadow: 0 8px 30px rgba(197, 160, 89, 0.3); }
body.neo-mode .feature-card__title { color: #f1f5f9; }
body.neo-mode .feature-card__desc { color: #94a3b8; }
body.neo-mode .feature-card__img-wrap { background: linear-gradient(135deg, #1e1b3a, #0f172a); }

/* ─── Feature Card Accordion (토글 방식 상세 콘텐츠) ─── */
.feature-card { cursor: default; }
/* CTA: span → button 전면 재정의 (full-width, 44px+) */
.feature-card__cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  border: none;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  padding: 10px 16px;
  align-self: stretch !important;
  transition: opacity 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  line-height: 1.3;
  color: #fff;
}
.feature-card__cta:hover { opacity: 0.88; }
.feature-card__cta:active { transform: scale(0.97); }
.feature-card__cta-label { flex: 1 1 auto; white-space: normal; word-break: keep-all; text-align: center; }
.feature-card__cta-arrow {
  display: inline-block;
  flex-shrink: 0;
  transition: transform 0.25s ease;
  font-style: normal;
  line-height: 1;
}
.feature-card--open .feature-card__cta-arrow { transform: rotate(180deg); }
/* Accordion detail section */
.feature-card__detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  contain: layout paint;
}
.feature-card--open .feature-card__detail { max-height: var(--fc-open-height, 0px); }
.feature-card__detail-inner { overflow: hidden; min-height: 0; }
.feature-card__detail-content {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(0,0,0,0.07);
}

.post-saju-services-intro {
  margin-top: 20px;
  margin-bottom: 120px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,183,178,.35);
  background: linear-gradient(135deg, rgba(255,245,248,.92), rgba(255,250,241,.94));
  box-shadow: 0 4px 14px rgba(255,139,167,.14);
}
.post-saju-services-intro strong {
  display: block;
  margin-bottom: 6px;
  font-size: .9rem;
  color: #b23a63;
}
.post-saju-services-intro span {
  display: block;
  font-size: .8rem;
  line-height: 1.65;
  color: #6b7280;
}
.feature-card__detail-text {
  font-size: 0.82rem;
  line-height: 1.65;
  color: #64748b;
  margin: 0;
  word-break: keep-all;
}
/* Launch button */
.feature-card__launch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  border: none;
  border-radius: 14px;
  font-size: 0.875rem;
  font-weight: 800;
  cursor: pointer;
  padding: 12px 16px;
  color: #fff;
  letter-spacing: 0.3px;
  transition: transform 0.2s, opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  position: relative;
  z-index: 2;
}

.feature-card__cta {
  position: relative;
  z-index: 2;
}

@media (max-width: 900px) {
  .feature-card {
    transform: none !important;
    transition: box-shadow 0.2s ease, opacity 0.2s ease;
  }
  .feature-card:hover {
    transform: none;
    box-shadow: 0 8px 22px rgba(0,0,0,0.12);
  }
  .feature-card:active {
    transform: scale(0.995);
  }
  .feature-card__cta,
  .feature-card__launch {
    min-height: 48px;
  }
}
.feature-card__launch:active { transform: scale(0.97); opacity: 0.85; }
.feature-card--face .feature-card__launch    { background: linear-gradient(135deg, #10b981, #059669); }
.feature-card--animal .feature-card__launch  { background: linear-gradient(135deg, #eab308, #d97706); }
.feature-card--tarot .feature-card__launch   { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.feature-card--tazza .feature-card__launch   { background: linear-gradient(135deg, #16a34a, #15803d); }
.feature-card--egypt .feature-card__launch   { background: linear-gradient(135deg, #d4af37, #b8860b); }
.feature-card--juyuk .feature-card__launch   { background: linear-gradient(135deg, #7c5c10, #b8860b); }
.feature-card--sukuyo .feature-card__launch  { background: linear-gradient(135deg, #3b1f7a, #9333ea); }
.feature-card--astro-fc .feature-card__launch{ background: linear-gradient(135deg, #1e003b, #7d2ae8); }
.feature-card--ziwei .feature-card__launch   { background: linear-gradient(135deg, #2b0545, #c026d3); }
.feature-card--dream .feature-card__cta,
.feature-card--dream .feature-card__launch {
  background: linear-gradient(135deg, #27346f, #4f2f86 54%, #1f4c74);
  color: #f8f5ff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.feature-card--destiny-flower {
  border-bottom: 3px solid #f472b6;
  --df-primary: #f472b6;
  --df-secondary: #22d3ee;
  --df-env-gradient: linear-gradient(140deg, #fff5fb 0%, #f2fbff 50%, #fdf8ff 100%);
  --df-season-tint: rgba(255, 255, 255, 0.2);
}
.feature-card--destiny-flower .feature-card__img-wrap {
  min-height: 232px;
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 210, 236, 1), transparent 42%),
    radial-gradient(circle at 82% 12%, rgba(173, 247, 255, 0.75), transparent 40%),
    var(--df-env-gradient);
  isolation: isolate;
}
.feature-card--destiny-flower .feature-card__img {
  transform-origin: center 72%;
  filter: drop-shadow(0 12px 30px rgba(236, 72, 153, 0.24));
  transition: transform 0.55s ease, filter 0.55s ease;
}
.feature-card--destiny-flower:hover .feature-card__img {
  transform: scale(1.08) rotate(-1deg);
  filter: drop-shadow(0 16px 34px rgba(14, 116, 144, 0.35));
}
.feature-card--destiny-flower .feature-card__cta,
.feature-card--destiny-flower .feature-card__launch {
  background: linear-gradient(135deg, #ec4899, #0ea5e9 58%, #6366f1);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
}

.destiny-flower-glow {
  position: absolute;
  inset: 14% 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0));
  mix-blend-mode: soft-light;
  opacity: 0.8;
  pointer-events: none;
  animation: destinyFlowerBreath 3.4s ease-in-out infinite;
}

.destiny-flower-sticker {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  z-index: 4;
  display: inline-grid;
  gap: 1px;
  min-height: 34px;
  min-width: 72px;
  padding: 6px 12px 6px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: linear-gradient(135deg, rgba(255, 252, 236, 0.92), rgba(255, 237, 255, 0.88));
  color: #0f172a;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 24px rgba(72, 43, 116, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transform: rotate(6deg);
  backdrop-filter: blur(8px) saturate(1.14);
  -webkit-backdrop-filter: blur(8px) saturate(1.14);
}
.destiny-flower-sticker b {
  font-size: 0.65rem;
  font-weight: 900;
  line-height: 1;
}
.destiny-flower-sticker em {
  font-style: normal;
  font-size: 0.56rem;
  font-weight: 800;
  line-height: 1;
  opacity: 0.9;
}

.df-source-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.df-source-tab {
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(248, 252, 255, 0.8));
  color: #334155;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.24s ease, box-shadow 0.24s ease, filter 0.24s ease, background 0.24s ease;
}
.df-source-tab:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}
.df-source-tab.is-active {
  border-color: rgba(15, 23, 42, 0.22);
  color: #0f172a;
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.16);
  filter: saturate(1.12);
}
.df-source-tab[data-df-source-tab='saju'].is-active {
  background: linear-gradient(140deg, rgba(255, 215, 0, 0.5), rgba(255, 242, 189, 0.92));
}
.df-source-tab[data-df-source-tab='astrology'].is-active {
  background: linear-gradient(140deg, rgba(106, 90, 205, 0.42), rgba(208, 201, 255, 0.92));
}
.df-source-tab[data-df-source-tab='jamidusu'].is-active {
  background: linear-gradient(140deg, rgba(139, 0, 139, 0.38), rgba(245, 202, 255, 0.92));
}
.df-source-tab[data-df-source-tab='sukuyo'].is-active {
  background: linear-gradient(140deg, rgba(32, 178, 170, 0.42), rgba(204, 247, 245, 0.92));
}

.destiny-flower-stage {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.66);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.7), var(--df-season-tint), rgba(255, 255, 255, 0.36));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 14px 14px 12px;
  display: grid;
  gap: 10px;
  transition: border-color 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}
.destiny-flower-stage[data-source='saju'] {
  border-color: rgba(255, 215, 0, 0.48);
}
.destiny-flower-stage[data-source='astrology'] {
  border-color: rgba(106, 90, 205, 0.44);
  background: linear-gradient(135deg, rgba(238, 235, 255, 0.74), rgba(230, 244, 255, 0.42));
}
.destiny-flower-stage[data-source='jamidusu'] {
  border-color: rgba(139, 0, 139, 0.42);
  background: linear-gradient(135deg, rgba(252, 238, 255, 0.74), rgba(255, 237, 250, 0.44));
}
.destiny-flower-stage[data-source='sukuyo'] {
  border-color: rgba(32, 178, 170, 0.46);
  background: linear-gradient(135deg, rgba(232, 253, 251, 0.74), rgba(236, 247, 255, 0.44));
}
.destiny-flower-backdrop {
  position: absolute;
  inset: -20% -15% auto;
  height: 72%;
  background: radial-gradient(circle at 22% 50%, rgba(244, 114, 182, 0.5), transparent 56%),
              radial-gradient(circle at 72% 34%, rgba(34, 211, 238, 0.42), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.destiny-flower-mask {
  position: relative;
  z-index: 1;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.16));
  -webkit-mask-image: radial-gradient(145% 100% at 50% 0%, #000 72%, transparent 100%);
  mask-image: radial-gradient(145% 100% at 50% 0%, #000 72%, transparent 100%);
}
.df-stage-source-sticker {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  display: inline-grid;
  gap: 1px;
  min-height: 34px;
  min-width: 72px;
  padding: 6px 12px 6px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: linear-gradient(135deg, rgba(255, 252, 236, 0.9), rgba(240, 246, 255, 0.88));
  color: #4b2b76;
  box-shadow: 0 10px 24px rgba(72, 43, 116, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transform: rotate(5deg);
  backdrop-filter: blur(8px) saturate(1.14);
  -webkit-backdrop-filter: blur(8px) saturate(1.14);
}
.df-stage-source-sticker b {
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
}
.df-stage-source-sticker em {
  font-style: normal;
  font-size: 0.55rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.92;
}

.destiny-flower-sticker::before,
.df-stage-source-sticker::before,
.astrology-flower-sticker::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translateY(-50%);
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(255, 246, 132, 0.95) 0 25%, rgba(255, 246, 132, 0) 26%),
    radial-gradient(circle at 2px 2px, rgba(255, 189, 226, 0.88) 0 58%, rgba(255, 189, 226, 0) 59%),
    radial-gradient(circle at 7px 2px, rgba(255, 211, 146, 0.9) 0 58%, rgba(255, 211, 146, 0) 59%),
    radial-gradient(circle at 2px 7px, rgba(200, 224, 255, 0.9) 0 58%, rgba(200, 224, 255, 0) 59%),
    radial-gradient(circle at 7px 7px, rgba(255, 228, 172, 0.9) 0 58%, rgba(255, 228, 172, 0) 59%);
  filter: drop-shadow(0 1px 1px rgba(85, 40, 128, 0.25));
}
.destiny-flower-sticker.df-source-badge--saju,
.df-stage-source-sticker.df-stage-source-sticker--saju {
  background: linear-gradient(140deg, rgba(255, 215, 0, 0.74), rgba(255, 243, 188, 0.9));
  color: #3f2f00;
}
.destiny-flower-sticker.df-source-badge--astrology,
.df-stage-source-sticker.df-stage-source-sticker--astrology {
  background: linear-gradient(140deg, rgba(106, 90, 205, 0.74), rgba(214, 209, 255, 0.9));
  color: #1f1752;
}
.destiny-flower-sticker.df-source-badge--jamidusu,
.df-stage-source-sticker.df-stage-source-sticker--jamidusu {
  background: linear-gradient(140deg, rgba(139, 0, 139, 0.72), rgba(246, 203, 255, 0.9));
  color: #36003c;
}
.destiny-flower-sticker.df-source-badge--sukuyo,
.df-stage-source-sticker.df-stage-source-sticker--sukuyo {
  background: linear-gradient(140deg, rgba(32, 178, 170, 0.74), rgba(202, 247, 243, 0.92));
  color: #043a36;
}
.destiny-flower-stage__image {
  width: 100%;
  height: auto;
  display: block;
  transform-origin: center 72%;
  filter: saturate(1.1) contrast(1.04);
  mix-blend-mode: multiply;
  transition: opacity 0.2s ease, transform 0.22s ease, filter 0.22s ease;
}
.destiny-flower-stage__meta {
  position: relative;
  z-index: 2;
  transition: opacity 0.2s ease, transform 0.22s ease;
}
.destiny-flower-stage.is-switching .destiny-flower-stage__image,
.destiny-flower-stage.is-switching .destiny-flower-stage__meta {
  opacity: 0.12;
  transform: scale(0.97);
}
.destiny-flower-stage__name {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 800;
  color: #0f172a;
}
.destiny-flower-stage__symbolism {
  margin: 4px 0 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: #334155;
}
.destiny-flower-stage__keywords {
  margin: 8px 0 0;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #475569;
}
.destiny-flower-stage__badges {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.destiny-flower-stage__badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.72);
  color: #1e293b;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.destiny-flower-stage__detail {
  margin: 6px 0 0;
  font-size: 0.72rem;
  line-height: 1.56;
  color: #1f2937;
}

.destiny-flower-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.destiny-flower-petal {
  position: absolute;
  width: 9px;
  height: 14px;
  border-radius: 60% 40% 65% 35% / 50% 50% 50% 50%;
  opacity: 0;
  background: linear-gradient(180deg, var(--petal-start, rgba(255,255,255,0.95)), var(--petal-end, rgba(244,114,182,0.65)));
  box-shadow: 0 0 10px rgba(255,255,255,0.38);
  transform: translate3d(var(--x, 0), var(--y, 0), 0) rotate(var(--rot, 0deg));
}
.destiny-flower-stage.is-bloomed .destiny-flower-stage__image {
  animation: destinyFlowerPetalTremble 2.2s cubic-bezier(0.35, 0, 0.2, 1) infinite;
}
.destiny-flower-stage.is-bloomed .destiny-flower-petal {
  opacity: 1;
  animation: destinyPetalFloat var(--dur, 3.6s) ease-in-out infinite,
             destinyPetalTremble 1.2s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.destiny-flower-stage.is-motion-wood.is-bloomed .destiny-flower-stage__image {
  animation: destinyWoodGrow 2.1s cubic-bezier(0.22, 0.72, 0.18, 1) infinite;
}
.destiny-flower-stage.is-motion-water.is-bloomed .destiny-flower-stage__image {
  animation: destinyWaterFloat 2.8s ease-in-out infinite;
}
.destiny-flower-stage.is-motion-fire.is-bloomed .destiny-flower-stage__image {
  animation: destinyFireBloom 1.9s cubic-bezier(0.2, 0.8, 0.25, 1) infinite;
}
.destiny-flower-stage.is-motion-water.is-bloomed .destiny-flower-petal {
  animation-duration: calc(var(--dur, 3.6s) + 0.8s), 1.7s;
}
.destiny-flower-stage.is-motion-fire.is-bloomed .destiny-flower-petal {
  animation-duration: calc(var(--dur, 3.6s) - 0.4s), 0.9s;
}

body.destiny-flower-focus .feature-card-grid {
  position: relative;
}
body.destiny-flower-focus .feature-card-grid::before {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 26px;
  background: linear-gradient(150deg, rgba(255, 244, 251, 0.64), rgba(238, 250, 255, 0.58));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 4;
  pointer-events: none;
  animation: destinyFocusFade 0.32s ease-out;
}

.feature-card--astrology-flower,
.feature-card--jamidusu-flower,
.feature-card--sukuyo-flower {
  display: none;
}
body.destiny-flower-focus .feature-card-grid .feature-card:not(.feature-card--destiny-flower) {
  filter: blur(2px) saturate(0.9) brightness(1.03);
  opacity: 0.76;
  transform: scale(0.985);
  transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}
body.destiny-flower-focus .feature-card--destiny-flower {
  position: relative;
  z-index: 6;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.27), 0 0 26px rgba(244, 114, 182, 0.25);
}

@keyframes destinyFlowerBreath {
  0%, 100% { opacity: 0.72; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes destinyFlowerPetalTremble {
  0%, 100% { transform: translateY(0) rotate(-0.4deg) scale(1); }
  30% { transform: translateY(-1px) rotate(0.8deg) scale(1.015); }
  60% { transform: translateY(1px) rotate(-0.8deg) scale(0.99); }
}
@keyframes destinyWoodGrow {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-3px) scale(1.03); }
  70% { transform: translateY(-1px) scale(1.015); }
}
@keyframes destinyWaterFloat {
  0%, 100% { transform: translateY(0) rotate(-0.5deg); }
  50% { transform: translateY(-3px) rotate(0.5deg); }
}
@keyframes destinyFireBloom {
  0%, 100% { transform: scale(1) rotate(-0.6deg); filter: saturate(1.05) contrast(1.02); }
  45% { transform: scale(1.04) rotate(0.8deg); filter: saturate(1.18) contrast(1.08); }
}

.df-studio-daymaster {
  margin: 8px 0 0;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.72);
  color: #111827;
  font-size: 0.72rem;
  font-weight: 800;
}
@keyframes destinyPetalFloat {
  0% { transform: translate3d(var(--x, 0), calc(var(--y, 0) + 6px), 0) rotate(var(--rot, 0deg)); }
  45% { transform: translate3d(calc(var(--x, 0) + 8px), calc(var(--y, 0) - 8px), 0) rotate(calc(var(--rot, 0deg) + 8deg)); }
  100% { transform: translate3d(calc(var(--x, 0) - 5px), calc(var(--y, 0) - 18px), 0) rotate(calc(var(--rot, 0deg) - 6deg)); }
}
@keyframes destinyPetalTremble {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}
@keyframes destinyFocusFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===== The Blooming Destiny Redesign ===== */
.feature-card--destiny-flower {
  --df-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --df-glass-bg: linear-gradient(145deg, rgba(255, 245, 247, 0.76), rgba(240, 244, 255, 0.68));
  --df-primary-a: #ffb7c5;
  --df-primary-b: #d4a5ff;
  --df-accent: #ffd700;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-bottom: 3px solid rgba(255, 215, 0, 0.52);
  background: var(--df-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  filter: drop-shadow(0 16px 28px rgba(160, 136, 196, 0.2));
  transform-style: preserve-3d;
  transition: transform 0.48s var(--df-ease), filter 0.48s var(--df-ease), border-color 0.48s var(--df-ease);
}
.feature-card--destiny-flower::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.18) 5%, rgba(255, 255, 255, 0) 35%, rgba(255, 219, 247, 0.2) 50%, rgba(196, 227, 255, 0.22) 72%, rgba(255, 255, 255, 0.12) 96%);
  mix-blend-mode: screen;
  opacity: 0.62;
}
.feature-card--destiny-flower:hover {
  transform: perspective(980px) rotateX(var(--df-tilt-x, 0deg)) rotateY(var(--df-tilt-y, 0deg)) translateY(-4px) scale(1.01);
  filter: drop-shadow(0 20px 34px rgba(152, 128, 196, 0.24));
}
.feature-card--destiny-flower .feature-card__title {
  font-family: 'Nanum Myeongjo', 'Noto Serif KR', 'Times New Roman', serif;
  letter-spacing: 0.1em;
  font-weight: 800;
  color: #45384f;
}
.feature-card--destiny-flower .feature-card__desc,
.feature-card--destiny-flower .feature-card__detail-text,
.feature-card--destiny-flower .destiny-flower-stage__symbolism,
.feature-card--destiny-flower .destiny-flower-stage__detail {
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
}
.feature-card--destiny-flower .feature-card__img-wrap {
  background:
    radial-gradient(circle at 20% 22%, rgba(255, 183, 197, 0.72), transparent 44%),
    radial-gradient(circle at 80% 10%, rgba(212, 165, 255, 0.5), transparent 42%),
    linear-gradient(150deg, #fff5f7 4%, #f8f3ff 50%, #f0f4ff 100%);
  border: 1px solid rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.feature-card--destiny-flower .feature-card__img {
  filter: saturate(1.08) drop-shadow(0 12px 18px rgba(191, 133, 196, 0.28));
}

.df-bud-icon {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 4;
  font-size: 1.4rem;
  color: rgba(255, 215, 0, 0.85);
  text-shadow: 0 2px 6px rgba(255, 255, 255, 0.62);
  opacity: 0;
  transform: scale(0.4) rotate(-18deg);
}
.feature-card--destiny-flower.is-intro-bloom .df-bud-icon {
  animation: dfBudBloom 1.26s var(--df-ease) 0.08s forwards;
}

.destiny-flower-glow {
  background: radial-gradient(circle, rgba(255, 215, 0, 0.18), rgba(255, 255, 255, 0));
  animation: destinyFlowerBreath 3.6s var(--df-ease) infinite;
}

.destiny-flower-sticker,
.df-stage-source-sticker {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(8px) saturate(1.14);
  -webkit-backdrop-filter: blur(8px) saturate(1.14);
  filter: drop-shadow(0 8px 18px rgba(79, 62, 106, 0.26));
}
.destiny-flower-sticker::after,
.df-stage-source-sticker::after {
  content: none;
}

.df-source-tabs {
  gap: 8px;
}
.df-source-tab {
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.4s var(--df-ease), filter 0.4s var(--df-ease), background 0.4s var(--df-ease), opacity 0.3s var(--df-ease);
}

.destiny-flower-stage {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background:
    linear-gradient(145deg, rgba(255, 245, 247, 0.66), rgba(240, 244, 255, 0.52));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  filter: drop-shadow(0 10px 18px rgba(150, 121, 188, 0.18));
  transition: border-color 0.45s var(--df-ease), background 0.45s var(--df-ease), filter 0.45s var(--df-ease);
}
.destiny-flower-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(130deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0), rgba(232, 221, 255, 0.16));
  mix-blend-mode: screen;
}
.destiny-flower-mask {
  border-radius: 28% 72% 62% 38% / 41% 34% 66% 59%;
  clip-path: polygon(7% 4%, 94% 2%, 100% 33%, 95% 86%, 53% 100%, 8% 90%, 0 41%);
  border: 1px solid rgba(255, 255, 255, 0.34);
}

.df-garden-petal-field {
  position: absolute;
  inset: -8% 0 -12%;
  pointer-events: none;
  z-index: 1;
}
.df-garden-petal-field span {
  position: absolute;
  top: -14%;
  width: 9px;
  height: 14px;
  border-radius: 65% 35% 58% 42% / 48% 52% 48% 52%;
  background: linear-gradient(180deg, rgba(255, 215, 225, 0.94), rgba(212, 165, 255, 0.58));
  opacity: 0;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.42));
  animation: dfPetalFall linear infinite;
}
.df-garden-petal-field span:nth-child(1) { left: 8%; animation-duration: 5.1s; animation-delay: 0.2s; }
.df-garden-petal-field span:nth-child(2) { left: 18%; animation-duration: 6.3s; animation-delay: 1.1s; }
.df-garden-petal-field span:nth-child(3) { left: 32%; animation-duration: 4.9s; animation-delay: 0.8s; }
.df-garden-petal-field span:nth-child(4) { left: 46%; animation-duration: 6.8s; animation-delay: 1.8s; }
.df-garden-petal-field span:nth-child(5) { left: 58%; animation-duration: 5.4s; animation-delay: 0.4s; }
.df-garden-petal-field span:nth-child(6) { left: 70%; animation-duration: 6.1s; animation-delay: 1.3s; }
.df-garden-petal-field span:nth-child(7) { left: 82%; animation-duration: 5.7s; animation-delay: 2.1s; }
.df-garden-petal-field span:nth-child(8) { left: 91%; animation-duration: 6.6s; animation-delay: 0.9s; }

.df-bloom-btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--df-ease), filter 0.35s var(--df-ease), opacity 0.35s var(--df-ease);
}
.df-bloom-btn::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.62), rgba(212, 165, 255, 0.34), rgba(255, 255, 255, 0));
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform 0.5s var(--df-ease), opacity 0.5s var(--df-ease);
  pointer-events: none;
}
.df-bloom-btn:hover::before,
.df-bloom-btn:focus-visible::before {
  transform: translate(-50%, -50%) scale(9.2);
  opacity: 1;
}
.df-bloom-btn:active {
  transform: scale(0.97);
}

.df-click-petal {
  position: absolute;
  width: 8px;
  height: 12px;
  border-radius: 65% 35% 58% 42% / 48% 52% 48% 52%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 226, 236, 0.95), rgba(212, 165, 255, 0.7));
  animation: dfBurstPetal 0.9s var(--df-ease) forwards;
}

.destiny-flower-stage__name {
  font-family: 'Nanum Myeongjo', 'Noto Serif KR', 'Times New Roman', serif;
  letter-spacing: 0.08em;
}

.destiny-flower-stage.is-switching-out .destiny-flower-stage__meta,
.destiny-flower-stage.is-switching-out .destiny-flower-stage__image {
  animation: dfSwitchOut 0.24s var(--df-ease) forwards;
}
.destiny-flower-stage.is-switching-in .destiny-flower-stage__meta,
.destiny-flower-stage.is-switching-in .destiny-flower-stage__image {
  animation: dfSwitchIn 0.38s var(--df-ease) forwards;
}

@keyframes dfBudBloom {
  0% { opacity: 0; transform: scale(0.42) rotate(-18deg); }
  56% { opacity: 1; transform: scale(1.08) rotate(7deg); }
  100% { opacity: 0.86; transform: scale(1) rotate(0deg); }
}
@keyframes dfPetalFall {
  0% { opacity: 0; transform: translate3d(0, -16px, 0) rotate(0deg); }
  15% { opacity: 0.74; }
  85% { opacity: 0.52; }
  100% { opacity: 0; transform: translate3d(-12px, 130%, 0) rotate(210deg); }
}
@keyframes dfBurstPetal {
  0% { opacity: 0.9; transform: translate3d(0, 0, 0) scale(0.82) rotate(0deg); }
  100% { opacity: 0; transform: translate3d(var(--dx, 0), var(--dy, -24px), 0) scale(1.1) rotate(var(--dr, 26deg)); }
}
@keyframes dfSwitchOut {
  0% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translateY(14px) scale(0.96) rotate(-1.2deg); }
}
@keyframes dfSwitchIn {
  0% { opacity: 0; transform: translateY(14px) scale(0.96) rotate(1.4deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

@media (max-width: 768px) {
  .feature-card--destiny-flower .feature-card__img-wrap {
    min-height: 252px;
  }
  .df-source-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .df-bud-icon {
    font-size: 1.2rem;
    right: 10px;
    bottom: 8px;
  }
  .destiny-flower-stage {
    padding: 12px;
  }
  .destiny-flower-stage__name {
    font-size: 0.92rem;
  }
  .destiny-flower-stage__symbolism {
    font-size: 0.76rem;
  }
  body.destiny-flower-focus .feature-card-grid::before {
    inset: -10px;
    border-radius: 20px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
}

.feature-card--astrology-flower {
  border-bottom: 3px solid #7c3aed;
  --af-primary: #8D99FF;
  --af-secondary: #C77DFF;
  --af-glow-inner: #a0c4ff;
  --af-glow-outer: #c77dff;
  --af-pointer-x: 50%;
  --af-pointer-y: 42%;
}
.feature-card--astrology-flower .feature-card__img-wrap {
  min-height: 232px;
  background:
    radial-gradient(circle at 18% 18%, rgba(93, 73, 255, 0.55), transparent 45%),
    radial-gradient(circle at 82% 12%, rgba(0, 245, 255, 0.34), transparent 42%),
    linear-gradient(145deg, #090d26 0%, #1f1844 48%, #111b3a 100%);
  isolation: isolate;
}
.feature-card--astrology-flower .feature-card__img {
  transform-origin: center 68%;
  filter: saturate(1.14) brightness(1.06) drop-shadow(0 14px 26px rgba(124, 58, 237, 0.32));
  transition: transform 0.55s ease, filter 0.55s ease;
}
.feature-card--astrology-flower:hover .feature-card__img {
  transform: scale(1.08) rotate(-1.6deg);
  filter: saturate(1.2) brightness(1.1) drop-shadow(0 18px 36px rgba(72, 191, 227, 0.42));
}
.feature-card--astrology-flower .feature-card__cta,
.feature-card--astrology-flower .feature-card__launch {
  background: linear-gradient(135deg, #4c1d95, #2563eb 56%, #06b6d4);
  color: #f8faff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.astrology-flower-sticker {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 34px;
  min-width: 92px;
  padding: 6px 12px 6px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  background: linear-gradient(128deg, rgba(255, 251, 234, 0.9), rgba(236, 243, 255, 0.9));
  color: #4b2b76;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: none;
  box-shadow: 0 10px 24px rgba(72, 43, 116, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.52);
  transform: rotate(5deg);
}

.astrology-card-glow {
  position: absolute;
  inset: 12% 14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 90, 240, 0.38), rgba(88, 28, 135, 0));
  mix-blend-mode: screen;
  pointer-events: none;
  animation: astrologyCardBreath 4.2s ease-in-out infinite;
}

.astrology-flower-stage {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  background:
    radial-gradient(circle at var(--af-pointer-x) var(--af-pointer-y), rgba(255, 255, 255, 0.2), transparent 34%),
    linear-gradient(145deg, rgba(10, 16, 44, 0.84), rgba(37, 23, 84, 0.72));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.25) inset, 0 18px 34px rgba(12, 20, 44, 0.42);
  padding: 14px;
  display: grid;
  gap: 10px;
}

.astrology-zodiac-trace {
  position: absolute;
  inset: 6px 10px auto;
  width: calc(100% - 20px);
  height: 118px;
  pointer-events: none;
  z-index: 0;
}
.astrology-zodiac-trace path {
  fill: none;
  stroke: rgba(156, 163, 255, 0.56);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
}

.astrology-flower-stage.is-bloomed .astrology-zodiac-trace path {
  animation: astrologyTraceDraw 1.9s ease-out forwards;
}

.astrology-flower-nebula {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.astrology-flower-mask {
  position: relative;
  z-index: 1;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.22), rgba(59, 130, 246, 0.08));
}

.astrology-flower-stage__image {
  width: 100%;
  height: auto;
  display: block;
  transform-origin: center 70%;
  filter: saturate(1.12) contrast(1.05);
}

.astrology-stardust-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.astrology-stardust {
  position: absolute;
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 50%;
  background: radial-gradient(circle, var(--star-b, rgba(199,125,255,0.95)), var(--star-a, rgba(141,153,255,0.85)));
  box-shadow: 0 0 12px rgba(196, 181, 253, 0.66);
  transform: translate3d(var(--x, 0), var(--y, 0), 0);
  opacity: 0;
}

.astrology-flower-stage.is-bloomed .astrology-stardust {
  opacity: 1;
  animation: astrologyDustFloat var(--dur, 3.4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.astrology-flower-stage.is-bloomed .astrology-flower-stage__image {
  animation: astrologyPetalOrbit 5.4s ease-in-out infinite;
}

.astrology-flower-meta {
  position: relative;
  z-index: 3;
  color: #e2e8f0;
}
.astrology-flower-meta__name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: #f8faff;
}
.astrology-flower-meta__symbolism {
  margin: 4px 0 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: #dbe4ff;
}
.astrology-flower-meta__keywords {
  margin: 8px 0 0;
  font-size: 0.69rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #bfdbfe;
}
.astrology-flower-meta__badges {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.astrology-flower-meta__badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(196, 181, 253, 0.42);
  background: rgba(15, 23, 42, 0.45);
  color: #ede9fe;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.astrology-flower-meta__detail {
  margin: 6px 0 0;
  font-size: 0.72rem;
  line-height: 1.56;
  color: #cbd5e1;
}

body.astrology-flower-focus .feature-card-grid {
  position: relative;
}
body.astrology-flower-focus .feature-card-grid::before {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(16, 24, 58, 0.5), rgba(29, 78, 216, 0.22));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 4;
  pointer-events: none;
}
body.astrology-flower-focus .feature-card-grid .feature-card:not(.feature-card--astrology-flower) {
  filter: blur(2px) saturate(0.84) brightness(0.96);
  opacity: 0.76;
  transform: scale(0.985);
  transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}
body.astrology-flower-focus .feature-card--astrology-flower {
  position: relative;
  z-index: 6;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.36), 0 0 30px rgba(129, 140, 248, 0.35);
}

@keyframes astrologyCardBreath {
  0%, 100% { opacity: 0.72; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes astrologyTraceDraw {
  from { stroke-dashoffset: 280; opacity: 0.45; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes astrologyDustFloat {
  0% { transform: translate3d(var(--x, 0), calc(var(--y, 0) + 6px), 0) scale(0.9); }
  50% { transform: translate3d(calc(var(--x, 0) + 7px), calc(var(--y, 0) - 10px), 0) scale(1.12); }
  100% { transform: translate3d(calc(var(--x, 0) - 5px), calc(var(--y, 0) - 18px), 0) scale(0.95); }
}
@keyframes astrologyPetalOrbit {
  0%, 100% { transform: translateY(-2px) rotate(-1deg); }
  50% { transform: translateY(4px) rotate(1deg); }
}

.feature-card--jamidusu-flower {
  border-bottom: 3px solid #c026d3;
  --jf-primary: #d946ef;
  --jf-secondary: #f9a8d4;
  --jf-glow-strength: 0.7;
  --jf-mist-opacity: 0.2;
}
.feature-card--jamidusu-flower .feature-card__img-wrap {
  min-height: 232px;
  background:
    radial-gradient(circle at 20% 20%, rgba(217, 70, 239, 0.45), transparent 44%),
    radial-gradient(circle at 82% 14%, rgba(249, 168, 212, 0.32), transparent 42%),
    linear-gradient(145deg, #1a0b2f 0%, #33134d 55%, #56187a 100%);
  isolation: isolate;
}
.feature-card--jamidusu-flower .feature-card__img {
  transform-origin: center 70%;
  filter: saturate(1.16) brightness(1.05) drop-shadow(0 14px 28px rgba(185, 28, 196, 0.34));
  transition: transform 0.55s ease, filter 0.55s ease;
}
.feature-card--jamidusu-flower:hover .feature-card__img {
  transform: scale(1.08) rotate(-1.4deg);
  filter: saturate(1.24) brightness(1.1) drop-shadow(0 18px 38px rgba(232, 121, 249, 0.4));
}
.feature-card--jamidusu-flower .feature-card__cta,
.feature-card--jamidusu-flower .feature-card__launch {
  background: linear-gradient(135deg, #86198f, #be185d 56%, #db2777);
  color: #fff5fb;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
}

.jamidusu-flower-sticker {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px dashed rgba(252, 231, 243, 0.82);
  background: linear-gradient(135deg, rgba(80, 14, 93, 0.92), rgba(157, 23, 77, 0.9));
  color: #ffe4f5;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow: 0 10px 22px rgba(77, 14, 97, 0.42);
  transform: rotate(-8deg);
}

.jamidusu-card-glow {
  position: absolute;
  inset: 12% 14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 72, 153, calc(0.32 + var(--jf-glow-strength) * 0.28)), rgba(107, 33, 168, 0));
  mix-blend-mode: screen;
  pointer-events: none;
  animation: jamidusuCardBreath 4s ease-in-out infinite;
}

.jamidusu-flower-stage {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(249, 168, 212, 0.42);
  background: linear-gradient(145deg, rgba(35, 12, 55, 0.86), rgba(88, 28, 76, 0.72));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 0 0 1px rgba(236, 72, 153, 0.25) inset, 0 18px 34px rgba(38, 9, 46, 0.42);
  padding: 14px;
  display: grid;
  gap: 10px;
}

.jamidusu-mist {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--jf-mist-opacity, 0.2);
}

.jamidusu-flower-mask {
  position: relative;
  z-index: 1;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.16), rgba(168, 85, 247, 0.08));
}

.jamidusu-flower-stage__image {
  width: 100%;
  height: auto;
  display: block;
  transform-origin: center 70%;
  filter: saturate(calc(0.9 + var(--jf-saturation, 0.8) * 0.35)) contrast(1.05);
}

.jamidusu-petal-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.jamidusu-petal {
  position: absolute;
  width: var(--size, 10px);
  height: calc(var(--size, 10px) * 1.45);
  border-radius: 58% 42% 62% 38% / 50% 50% 50% 50%;
  background: linear-gradient(180deg, var(--petal-a, rgba(249,168,212,0.82)), var(--petal-b, rgba(217,70,239,0.9)));
  box-shadow: 0 0 12px rgba(251, 207, 232, 0.44);
  transform: translate3d(var(--x, 0), var(--y, 0), 0) rotate(-8deg);
  opacity: 0;
}
.jamidusu-flower-stage.is-bloomed .jamidusu-petal {
  opacity: 1;
  animation: jamidusuPetalFloat var(--dur, 3.4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.jamidusu-flower-stage.is-bloomed .jamidusu-petal.is-fall {
  animation-name: jamidusuPetalFall;
}
.jamidusu-flower-stage.is-bloomed .jamidusu-flower-stage__image {
  animation: jamidusuBloomDrift 4.8s ease-in-out infinite;
}

.jamidusu-keyword-popup {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 5;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(251, 207, 232, 0.52);
  background: rgba(136, 19, 55, 0.84);
  color: #ffe4f5;
  font-size: 0.66rem;
  font-weight: 700;
  opacity: 0;
  transform: translateY(-6px) scale(0.94);
  transition: opacity 0.24s ease, transform 0.24s ease;
  pointer-events: none;
}
.jamidusu-keyword-popup.is-show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.jamidusu-flower-meta {
  position: relative;
  z-index: 3;
  color: #ffe4f5;
}
.jamidusu-flower-meta__name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff1fb;
}
.jamidusu-flower-meta__symbolism {
  margin: 4px 0 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: #ffd7f3;
}
.jamidusu-flower-meta__keywords {
  margin: 8px 0 0;
  font-size: 0.69rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fbcfe8;
}
.jamidusu-flower-meta__badges {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.jamidusu-flower-meta__badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(251, 207, 232, 0.45);
  background: rgba(76, 5, 25, 0.44);
  color: #ffe4f5;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.jamidusu-flower-meta__detail {
  margin: 6px 0 0;
  font-size: 0.72rem;
  line-height: 1.56;
  color: #fbcfe8;
}

body.jamidusu-flower-focus .feature-card-grid {
  position: relative;
}
body.jamidusu-flower-focus .feature-card-grid::before {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(79, 15, 95, 0.48), rgba(190, 24, 93, 0.2));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 4;
  pointer-events: none;
}
body.jamidusu-flower-focus .feature-card-grid .feature-card:not(.feature-card--jamidusu-flower) {
  filter: blur(2px) saturate(0.84) brightness(0.96);
  opacity: 0.76;
  transform: scale(0.985);
  transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}
body.jamidusu-flower-focus .feature-card--jamidusu-flower {
  position: relative;
  z-index: 6;
  box-shadow: 0 18px 42px rgba(49, 10, 59, 0.38), 0 0 30px rgba(217, 70, 239, 0.35);
}

@keyframes jamidusuCardBreath {
  0%, 100% { opacity: 0.7; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes jamidusuBloomDrift {
  0%, 100% { transform: translateY(-2px) rotate(-1deg); }
  50% { transform: translateY(4px) rotate(1deg); }
}
@keyframes jamidusuPetalFloat {
  0% { transform: translate3d(var(--x, 0), calc(var(--y, 0) + 6px), 0) rotate(-8deg); }
  50% { transform: translate3d(calc(var(--x, 0) + 7px), calc(var(--y, 0) - 8px), 0) rotate(4deg); }
  100% { transform: translate3d(calc(var(--x, 0) - 5px), calc(var(--y, 0) - 16px), 0) rotate(-6deg); }
}
@keyframes jamidusuPetalFall {
  0% { transform: translate3d(var(--x, 0), calc(var(--y, 0) - 8px), 0) rotate(-4deg); }
  60% { transform: translate3d(calc(var(--x, 0) + 10px), calc(var(--y, 0) + 14px), 0) rotate(12deg); }
  100% { transform: translate3d(calc(var(--x, 0) - 8px), calc(var(--y, 0) + 28px), 0) rotate(22deg); }
}

.feature-card--sukuyo-flower {
  border-bottom: 3px solid #38bdf8;
  --sf-primary: #e2e8f0;
  --sf-secondary: #93c5fd;
  --sf-glow: 0.72;
  --sf-halo: 0.56;
}
.feature-card--sukuyo-flower .feature-card__img-wrap {
  min-height: 232px;
  background:
    radial-gradient(circle at 18% 18%, rgba(148, 163, 184, 0.38), transparent 44%),
    radial-gradient(circle at 82% 14%, rgba(59, 130, 246, 0.28), transparent 42%),
    linear-gradient(145deg, #020617 0%, #0f172a 56%, #1e3a8a 100%);
  isolation: isolate;
}
.feature-card--sukuyo-flower .feature-card__img {
  transform-origin: center 70%;
  filter: saturate(1.14) brightness(1.06) drop-shadow(0 14px 28px rgba(59, 130, 246, 0.34));
  transition: transform 0.55s ease, filter 0.55s ease;
}
.feature-card--sukuyo-flower:hover .feature-card__img {
  transform: scale(1.08) rotate(-1.2deg);
  filter: saturate(1.22) brightness(1.1) drop-shadow(0 18px 36px rgba(96, 165, 250, 0.4));
}
.feature-card--sukuyo-flower .feature-card__cta,
.feature-card--sukuyo-flower .feature-card__launch {
  background: linear-gradient(135deg, #0f172a, #1d4ed8 56%, #0ea5e9);
  color: #eff6ff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.sukuyo-flower-sticker {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px dashed rgba(186, 230, 253, 0.82);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(30, 64, 175, 0.86));
  color: #e0f2fe;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.42);
  transform: rotate(-8deg);
}

.sukuyo-card-glow {
  position: absolute;
  inset: 12% 14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(191, 219, 254, calc(0.24 + var(--sf-glow) * 0.3)), rgba(37, 99, 235, 0));
  mix-blend-mode: screen;
  pointer-events: none;
  animation: sukuyoMoonBreath 4.6s ease-in-out infinite;
}

.sukuyo-flower-stage {
  --sf-lunar-bg: radial-gradient(circle at 50% 18%, rgba(191,219,254,0.35), rgba(37,99,235,0.16) 42%, rgba(9,14,34,0.9) 78%);
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(191, 219, 254, 0.42);
  background: var(--sf-lunar-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25) inset, 0 18px 34px rgba(2, 6, 23, 0.44);
  padding: 14px;
  display: grid;
  gap: 10px;
}
.sukuyo-flower-stage.is-eclipse {
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.25) inset, 0 18px 34px rgba(2, 6, 23, 0.5);
}
.sukuyo-flower-stage.is-full-glow {
  box-shadow: 0 0 0 1px rgba(224, 242, 254, 0.25) inset, 0 18px 34px rgba(30, 64, 175, 0.45), 0 0 26px rgba(224, 242, 254, 0.32);
}

.sukuyo-constellation {
  position: absolute;
  inset: 8px 10px auto;
  width: calc(100% - 20px);
  height: 118px;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}
.sukuyo-constellation path {
  fill: none;
  stroke: rgba(186, 230, 253, 0.54);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
}
.sukuyo-flower-stage.is-bloomed .sukuyo-constellation path {
  animation: sukuyoConstellationDraw 1.9s ease-out forwards;
}

.sukuyo-flower-mask {
  position: relative;
  z-index: 2;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.18), rgba(59, 130, 246, 0.08));
}
.sukuyo-flower-stage__image {
  width: 100%;
  height: auto;
  display: block;
  transform-origin: center 70%;
  filter: saturate(1.1) contrast(1.05);
  transition: transform 0.32s ease;
}
.sukuyo-flower-stage.is-eclipse .sukuyo-flower-stage__image {
  filter: grayscale(0.28) contrast(1.18) brightness(0.86);
}

.sukuyo-starfall-field,
.sukuyo-orbit-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sukuyo-starfall-field { z-index: 3; }
.sukuyo-orbit-field { z-index: 4; }

.sukuyo-starfall {
  position: absolute;
  width: 2px;
  height: var(--len, 14px);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--star-a, rgba(191,219,254,0.75)), var(--star-b, rgba(147,197,253,0.95)));
  box-shadow: 0 0 12px rgba(186, 230, 253, 0.56);
  transform: translate3d(var(--x, 0), var(--y, 0), 0) rotate(24deg);
  opacity: 0;
}
.sukuyo-flower-stage.is-bloomed .sukuyo-starfall {
  opacity: 1;
  animation: sukuyoStarfall var(--dur, 2.4s) ease-in infinite;
  animation-delay: var(--delay, 0s);
}

.sukuyo-orbit-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--orbit-color-b, rgba(147,197,253,0.88)), var(--orbit-color-a, rgba(226,232,240,0.76)));
  box-shadow: 0 0 10px rgba(186, 230, 253, 0.54);
  opacity: 0;
  transform: rotate(calc(var(--i) * 13.333deg)) translateX(42px) scale(0.8);
}
.sukuyo-flower-stage.is-bloomed .sukuyo-orbit-dot {
  opacity: 0.92;
  animation: sukuyoLunarOrbit calc(9s + var(--i) * 0.06s) linear infinite;
}

.sukuyo-flower-meta {
  position: relative;
  z-index: 5;
  color: #dbeafe;
}
.sukuyo-flower-meta__name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: #eff6ff;
}
.sukuyo-flower-meta__symbolism {
  margin: 4px 0 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: #dbeafe;
}
.sukuyo-flower-meta__keywords {
  margin: 8px 0 0;
  font-size: 0.69rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #bfdbfe;
}
.sukuyo-flower-meta__badges {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sukuyo-flower-meta__badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(186, 230, 253, 0.44);
  background: rgba(15, 23, 42, 0.48);
  color: #e0f2fe;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.sukuyo-flower-meta__detail {
  margin: 6px 0 0;
  font-size: 0.72rem;
  line-height: 1.56;
  color: #bfdbfe;
}

body.sukuyo-flower-focus .feature-card-grid {
  position: relative;
}
body.sukuyo-flower-focus .feature-card-grid::before {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(2, 6, 23, 0.56), rgba(37, 99, 235, 0.22));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 4;
  pointer-events: none;
}
body.sukuyo-flower-focus .feature-card-grid .feature-card:not(.feature-card--sukuyo-flower) {
  filter: blur(2px) saturate(0.84) brightness(0.96);
  opacity: 0.76;
  transform: scale(0.985);
  transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}
body.sukuyo-flower-focus .feature-card--sukuyo-flower {
  position: relative;
  z-index: 6;
  box-shadow: 0 18px 42px rgba(2, 6, 23, 0.4), 0 0 30px rgba(125, 211, 252, 0.32);
}

@keyframes sukuyoMoonBreath {
  0%, 100% { opacity: 0.7; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes sukuyoConstellationDraw {
  from { stroke-dashoffset: 300; opacity: 0.45; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes sukuyoStarfall {
  0% { transform: translate3d(var(--x, 0), calc(var(--y, 0) - 8px), 0) rotate(24deg); }
  100% { transform: translate3d(calc(var(--x, 0) + 16px), calc(var(--y, 0) + 34px), 0) rotate(24deg); }
}
@keyframes sukuyoLunarOrbit {
  0% { transform: rotate(calc(var(--i) * 13.333deg)) translateX(40px) scale(0.82); }
  100% { transform: rotate(calc(var(--i) * 13.333deg + 360deg)) translateX(40px) scale(1); }
}

.df-studio-overlay {
  position: fixed;
  inset: 0;
  z-index: 2900;
  padding:
    max(10px, env(safe-area-inset-top, 0px))
    max(10px, env(safe-area-inset-right, 0px))
    max(10px, env(safe-area-inset-bottom, 0px))
    max(10px, env(safe-area-inset-left, 0px));
  background:
    radial-gradient(circle at 14% 18%, rgba(244, 114, 182, 0.4), transparent 42%),
    radial-gradient(circle at 84% 10%, rgba(56, 189, 248, 0.34), transparent 40%),
    radial-gradient(circle at 52% 94%, rgba(255, 198, 112, 0.22), transparent 42%),
    rgba(241, 248, 255, 0.66);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-gutter: stable both-edges;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
  opacity: 0;
  transition: opacity 0.24s ease;
  animation: dfStudioAuroraShift 12s ease-in-out infinite;
}
.df-studio-overlay.is-show {
  opacity: 1;
}
.df-studio-sheet {
  position: relative;
  isolation: isolate;
  width: min(920px, 100%);
  margin: 0 auto;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.82), rgba(250, 253, 255, 0.58));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 54px rgba(255, 113, 182, 0.22), 0 10px 30px rgba(42, 118, 156, 0.18);
  padding: 24px;
  max-height: calc(100vh - 20px);
  max-height: calc(100dvh - 20px);
  max-height: calc(100svh - 20px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  animation: dfStudioRise 0.34s ease-out;
}
.df-studio-sheet::before,
.df-studio-sheet::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.df-studio-sheet::before {
  inset: -20% -12% auto;
  height: 54%;
  background:
    radial-gradient(ellipse at 18% 30%, rgba(255, 188, 214, 0.34), transparent 56%),
    radial-gradient(ellipse at 82% 26%, rgba(156, 209, 255, 0.28), transparent 58%),
    radial-gradient(ellipse at 50% 82%, rgba(255, 226, 166, 0.2), transparent 60%);
  filter: blur(12px);
  animation: dfStudioBloomPulse 7.2s ease-in-out infinite;
}
.df-studio-sheet::after {
  inset: auto -8% -24%;
  height: 46%;
  background: radial-gradient(ellipse at 50% 20%, rgba(255, 231, 193, 0.34), transparent 62%);
}
.df-studio-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
  color: #334155;
  font-size: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.df-studio-close:hover,
.df-studio-close:focus-visible {
  transform: translateY(-1px) scale(1.03);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 18px rgba(244, 114, 182, 0.24);
}
.df-studio-hero {
  position: relative;
  margin-bottom: 16px;
  padding-right: 44px;
  padding-bottom: 12px;
}
.df-studio-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 159, 190, 0.5), rgba(156, 209, 255, 0.48), rgba(255, 222, 161, 0.5));
}
.df-studio-kicker {
  margin: 0;
  font-size: 0.73rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(79, 51, 123, 0.72);
  font-weight: 700;
}
.df-studio-hero h2 {
  margin: 6px 0 4px;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.25;
  color: #4a2f79;
  background: linear-gradient(115deg, #d94f9c 4%, #7f60f5 40%, #48a9ef 72%, #f09d56 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 6px 18px rgba(173, 120, 236, 0.18);
}
.df-studio-source-tabs {
  margin: 10px 0 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.df-studio-source-tabs .df-source-tab {
  min-height: 40px;
  font-size: 0.76rem;
  letter-spacing: 0;
  border: 1px solid rgba(181, 142, 223, 0.38);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(245, 238, 255, 0.8));
  box-shadow: 0 8px 16px rgba(127, 91, 181, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.df-studio-source-tabs .df-source-tab:hover,
.df-studio-source-tabs .df-source-tab:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(218, 112, 183, 0.5);
  box-shadow: 0 10px 18px rgba(152, 99, 201, 0.18);
}
.df-studio-source-tabs .df-source-tab.is-active {
  border-color: rgba(218, 112, 183, 0.6);
  background: linear-gradient(135deg, rgba(255, 240, 250, 0.96), rgba(233, 245, 255, 0.9));
  box-shadow: 0 12px 22px rgba(184, 104, 191, 0.22);
}
.df-studio-badges {
  margin: 10px 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.df-saju-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.82);
  color: #1e293b;
  padding: 5px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 5px 12px rgba(124, 90, 173, 0.12);
  animation: dfStudioBadgeFloat 5.4s ease-in-out infinite;
}
.df-studio-badges .df-saju-badge:nth-child(2) { animation-delay: 0.8s; }
.df-studio-badges .df-saju-badge:nth-child(3) { animation-delay: 1.6s; }
.df-saju-badge b {
  font-weight: 800;
  color: #334155;
}
.df-saju-badge em {
  font-style: normal;
  font-weight: 700;
  color: #0f172a;
}
.df-saju-badge.is-strength {
  border-color: rgba(236, 72, 153, 0.38);
  background: linear-gradient(135deg, rgba(252, 231, 243, 0.92), rgba(255, 255, 255, 0.9));
}
.df-saju-badge.is-yongshin {
  border-color: rgba(14, 165, 233, 0.34);
  background: linear-gradient(135deg, rgba(224, 242, 254, 0.9), rgba(255, 255, 255, 0.9));
}
.df-saju-badge.is-johu {
  border-color: rgba(245, 158, 11, 0.34);
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.9), rgba(255, 255, 255, 0.9));
}
.df-studio-narrative {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.72;
  color: #4d4a65;
}

.df-studio-main {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.58);
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 202, 225, 0.35), transparent 40%),
    radial-gradient(circle at 86% 14%, rgba(186, 222, 255, 0.32), transparent 42%),
    linear-gradient(138deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.24));
  box-shadow: 0 14px 34px rgba(111, 73, 157, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.56);
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 16px;
}
.df-studio-main::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 140deg, rgba(255, 165, 203, 0.62), rgba(148, 197, 255, 0.58), rgba(255, 214, 154, 0.56), rgba(213, 149, 255, 0.56), rgba(255, 165, 203, 0.62));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  pointer-events: none;
  opacity: 0.86;
  animation: dfStudioRingSpin 16s linear infinite;
}
.df-studio-aura {
  position: absolute;
  inset: -12% -8% auto;
  height: 70%;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 50%, rgba(244, 114, 182, 0.4), transparent 58%),
    radial-gradient(circle at 74% 34%, rgba(34, 211, 238, 0.34), transparent 60%);
}
.df-studio-visual {
  position: relative;
  z-index: 1;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.68);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.26));
  box-shadow: 0 10px 24px rgba(96, 65, 145, 0.14);
  -webkit-mask-image: radial-gradient(140% 100% at 50% 0%, #000 74%, transparent 100%);
  mask-image: radial-gradient(140% 100% at 50% 0%, #000 74%, transparent 100%);
}
.df-studio-visual::after {
  content: "";
  position: absolute;
  inset: auto -24px -38px auto;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 205, 223, 0.44), transparent 68%);
  pointer-events: none;
}
.df-studio-visual img {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
  filter: saturate(1.08) contrast(1.03);
  transform-origin: center 70%;
  animation: destinyFlowerPetalTremble 3.2s ease-in-out infinite;
}
.df-studio-insight {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 4px 2px;
}
.df-studio-insight h3 {
  margin: 0;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  color: #4b2f79;
  text-shadow: 0 4px 12px rgba(195, 143, 255, 0.2);
}
.df-studio-latin {
  margin: 0;
  color: #675b86;
  font-style: italic;
  font-size: 0.84rem;
}
.df-studio-symbolism {
  margin: 0;
  color: #3f3958;
  font-size: 0.86rem;
  line-height: 1.72;
}
.df-studio-keywords {
  margin: 2px 0 0;
  color: #59507a;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.df-studio-panels {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}
.df-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(249, 244, 255, 0.68));
  box-shadow: 0 10px 24px rgba(97, 66, 147, 0.12);
  padding: 12px;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.df-panel::after {
  content: "";
  position: absolute;
  inset: auto -20px -28px auto;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 208, 228, 0.34), transparent 70%);
  pointer-events: none;
}
.df-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(112deg, transparent 0%, rgba(255, 255, 255, 0.46) 42%, transparent 66%);
  transform: translateX(-120%);
  opacity: 0.8;
  pointer-events: none;
  animation: dfStudioPanelSheen 7.6s ease-in-out infinite;
  z-index: -1;
}
.df-panel:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(97, 66, 147, 0.2);
}
.df-panel h4 {
  margin: 0 0 9px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.79rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #48306f;
}
.df-panel h4::before {
  content: "❀";
  font-size: 0.76rem;
  color: #cf77ac;
}
.df-panel p {
  margin: 0;
  font-size: 0.81rem;
  line-height: 1.7;
  color: #4b4a64;
}
.df-panel--wide {
  grid-column: 1 / -1;
}
.df-panel--gardener {
  border-color: rgba(143, 183, 255, 0.52);
  background:
    radial-gradient(circle at 8% 16%, rgba(196, 230, 255, 0.36), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(240, 249, 255, 0.76));
}
.df-panel-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.df-panel-list li {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.62;
  color: #474467;
}

/* Remove guidance-one-liner card and reflow cards to avoid large empty tracks. */
.df-panel:has(#dfStudioGuidance),
.df-studio-panels > .df-panel:nth-child(3) {
  display: none;
}

/* Promote dense narrative cards to full-width botanical sheets. */
.df-panel:has(#dfStudioDataSummary),
.df-panel:has(#dfStudioSynergy),
.df-studio-panels > .df-panel:nth-child(4),
.df-studio-panels > .df-panel:nth-child(8) {
  grid-column: 1 / -1;
}

.df-panel:has(#dfStudioDataSummary),
.df-studio-panels > .df-panel:nth-child(4) {
  border-color: rgba(142, 197, 147, 0.52);
  background:
    radial-gradient(circle at 10% 18%, rgba(178, 228, 181, 0.34), transparent 40%),
    radial-gradient(circle at 88% 90%, rgba(243, 208, 163, 0.24), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.93), rgba(244, 252, 245, 0.78));
}

.df-panel:has(#dfStudioJournal),
.df-studio-panels > .df-panel:nth-child(5) {
  border-color: rgba(156, 202, 244, 0.5);
  background:
    radial-gradient(circle at 14% 20%, rgba(201, 226, 255, 0.34), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(245, 249, 255, 0.8));
}

.df-panel:has(#dfStudioRecipe),
.df-panel:has(#dfStudioFlowerLanguage),
.df-panel:has(#dfStudioSynergy),
.df-studio-panels > .df-panel:nth-child(6),
.df-studio-panels > .df-panel:nth-child(7),
.df-studio-panels > .df-panel:nth-child(8) {
  border-color: rgba(200, 172, 234, 0.56);
  background:
    radial-gradient(circle at 92% 10%, rgba(249, 214, 241, 0.3), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.93), rgba(249, 244, 255, 0.78));
}
.df-panel--prompt {
  grid-column: 1 / -1;
  border-color: rgba(229, 174, 221, 0.66);
  background:
    radial-gradient(circle at 94% 8%, rgba(255, 216, 237, 0.42), transparent 36%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.92), rgba(249, 246, 255, 0.78));
}
.df-studio-prompt-guide {
  margin: 0 0 10px;
  font-size: 0.79rem;
  line-height: 1.62;
  color: #4d4868;
}
.df-studio-prompt-label {
  display: block;
  margin: 10px 0 6px;
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 800;
  color: #5f4d80;
}
.df-studio-promptbox {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(176, 126, 214, 0.5);
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.96)),
    repeating-linear-gradient(0deg, rgba(238, 225, 255, 0.36), rgba(238, 225, 255, 0.36) 1px, transparent 1px, transparent 27px);
  color: #352f4c;
  font-size: 0.78rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
  padding: 11px;
  resize: vertical;
  min-height: 128px;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 16px rgba(117, 90, 163, 0.1);
  caret-color: #be5dac;
}
.df-studio-promptbox.is-negative {
  min-height: 96px;
  background:
    linear-gradient(0deg, rgba(250, 248, 255, 0.96), rgba(250, 248, 255, 0.96)),
    repeating-linear-gradient(0deg, rgba(226, 219, 244, 0.28), rgba(226, 219, 244, 0.28) 1px, transparent 1px, transparent 25px);
}
.df-studio-promptbox:focus {
  outline: none;
  border-color: rgba(202, 109, 186, 0.68);
  box-shadow: 0 0 0 3px rgba(229, 153, 232, 0.3), 0 10px 20px rgba(150, 95, 183, 0.14);
}
.df-studio-promptbox::-webkit-scrollbar {
  width: 10px;
}
.df-studio-promptbox::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(227, 214, 246, 0.45);
}
.df-studio-promptbox::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(215, 145, 204, 0.9), rgba(152, 183, 232, 0.86));
}
.df-studio-prompt-tools {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.df-palette-row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.df-palette-row + .df-palette-row {
  margin-top: 7px;
}
.df-palette-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid rgba(76, 53, 118, 0.25);
  background: #f472b6;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.8), 0 0 14px rgba(201, 123, 188, 0.3);
  animation: dfStudioDotPulse 3.8s ease-in-out infinite;
}
.df-palette-row + .df-palette-row .df-palette-dot {
  animation-delay: 1.2s;
}

.df-studio-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.df-studio-history {
  margin-top: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background:
    radial-gradient(circle at 90% 12%, rgba(255, 214, 197, 0.32), transparent 34%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.84), rgba(246, 243, 255, 0.72));
  box-shadow: 0 10px 26px rgba(95, 66, 138, 0.12);
  padding: 13px;
}
.df-studio-history-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.df-studio-history-head h4 {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1e293b;
}
.df-studio-history-tools {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.df-studio-chip {
  min-height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(147, 116, 194, 0.3);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(250, 244, 255, 0.94));
  color: #4a376d;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.df-studio-chip:hover,
.df-studio-chip:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(195, 122, 192, 0.55);
  box-shadow: 0 6px 14px rgba(165, 114, 210, 0.18);
}
.df-studio-chip:active {
  transform: scale(0.97);
}
.df-studio-chip--danger {
  border-color: rgba(185, 28, 28, 0.34);
  background: linear-gradient(135deg, rgba(254, 226, 226, 0.96), rgba(254, 242, 242, 0.94));
  color: #991b1b;
}
.df-studio-status {
  margin: 11px 0 9px;
  font-size: 0.77rem;
  color: #4c4a64;
  line-height: 1.65;
}
.df-studio-history-list {
  display: grid;
  gap: 9px;
}
.df-history-item {
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(250, 246, 255, 0.82));
  box-shadow: 0 8px 18px rgba(88, 61, 131, 0.11);
  padding: 11px;
}
.df-history-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.df-history-item-name {
  margin: 0;
  font-size: 0.83rem;
  color: #3f3061;
  font-weight: 700;
}
.df-history-item-time {
  font-size: 0.69rem;
  color: #6b5f89;
}
.df-history-item-keywords {
  margin: 6px 0 8px;
  font-size: 0.7rem;
  color: #4f4b67;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.df-history-item-actions {
  display: flex;
  gap: 6px;
}
.df-history-btn {
  min-height: 30px;
  border: none;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.df-history-btn:hover,
.df-history-btn:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.df-history-btn--restore {
  background: linear-gradient(135deg, #ee54a8, #6f8fff 48%, #2cb8ea);
  color: #fff;
}
.df-history-btn--share {
  background: rgba(15, 23, 42, 0.14);
  color: #1e293b;
}
.df-history-btn--delete {
  background: rgba(153, 27, 27, 0.12);
  color: #991b1b;
}

.df-studio-btn {
  min-height: 42px;
  border-radius: 12px;
  border: none;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 10px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.df-studio-btn::before {
  content: "";
  position: absolute;
  inset: -42% auto -42% -24%;
  width: 42%;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.06));
  transform: translateX(-160%) rotate(8deg);
  transition: transform 0.58s ease;
  pointer-events: none;
  z-index: -1;
}
.df-studio-btn--secondary {
  background: linear-gradient(135deg, rgba(225, 215, 246, 0.7), rgba(244, 239, 255, 0.8));
  color: #453466;
}
.df-studio-btn--primary {
  background: linear-gradient(135deg, #e864b8, #63b7f5 58%, #8f76ff);
  color: #fff;
  box-shadow: 0 12px 24px rgba(182, 95, 199, 0.34);
  animation: dfStudioPrimaryBreath 4.2s ease-in-out infinite;
}
.df-studio-btn:hover,
.df-studio-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(121, 83, 173, 0.26);
  filter: saturate(1.04);
}
.df-studio-btn:hover::before,
.df-studio-btn:focus-visible::before {
  transform: translateX(330%) rotate(8deg);
}

@keyframes dfStudioRise {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dfStudioBloomPulse {
  0%,
  100% {
    opacity: 0.66;
    transform: translateY(0) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateY(-4px) scale(1.03);
  }
}

@keyframes dfStudioAuroraShift {
  0%,
  100% {
    filter: hue-rotate(0deg) saturate(1);
  }
  50% {
    filter: hue-rotate(12deg) saturate(1.06);
  }
}

@keyframes dfStudioBadgeFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

@keyframes dfStudioRingSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes dfStudioPanelSheen {
  0%,
  78%,
  100% {
    transform: translateX(-120%);
  }
  86% {
    transform: translateX(110%);
  }
}

@keyframes dfStudioDotPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.8), 0 0 14px rgba(201, 123, 188, 0.3);
  }
  50% {
    transform: scale(1.12);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.88), 0 0 18px rgba(201, 123, 188, 0.42);
  }
}

@keyframes dfStudioPrimaryBreath {
  0%,
  100% {
    box-shadow: 0 12px 24px rgba(182, 95, 199, 0.3);
  }
  50% {
    box-shadow: 0 16px 28px rgba(112, 143, 241, 0.34);
  }
}

@media (max-width: 860px) {
  .df-studio-overlay {
    padding:
      max(8px, env(safe-area-inset-top, 0px))
      max(8px, env(safe-area-inset-right, 0px))
      max(8px, env(safe-area-inset-bottom, 0px))
      max(8px, env(safe-area-inset-left, 0px));
  }
  .df-studio-sheet {
    border-radius: 20px;
    padding: 16px;
    max-height: calc(100vh - 10px);
    max-height: calc(100dvh - 10px);
    max-height: calc(100svh - 10px);
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .df-studio-main {
    grid-template-columns: 1fr;
  }
  .df-studio-panels {
    grid-template-columns: 1fr;
  }
  .df-studio-history-head {
    flex-direction: column;
    align-items: stretch;
  }
  .df-studio-actions {
    flex-direction: column;
  }
  .df-studio-btn {
    width: 100%;
  }
  .df-studio-source-tabs {
    grid-template-columns: 1fr;
  }
}

.ios-tap-target,
.ios-tap-target * {
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
}

.ios-tap-target {
  touch-action: manipulation;
}
body.neo-mode .feature-card__detail-content { border-top-color: rgba(255,255,255,0.07); }
body.neo-mode .feature-card__detail-text { color: #94a3b8; }

/* --- block 2 --- */
    #acc-astro-body .astro-body.cosmic-theme {
      background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
      color: #e2e8f0;
      border: 1px solid rgba(139, 92, 246, 0.4);
      box-shadow: 0 0 40px rgba(139, 92, 246, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.8);
      border-radius: 20px;
      padding: 25px;
      position: relative;
      overflow: hidden;
      font-family: 'Pretendard', sans-serif;
    }
    #acc-astro-body .astro-body.cosmic-theme::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background-image: 
        radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 50px 160px, #ddd, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0,0,0,0));
      background-repeat: repeat;
      background-size: 200px 200px;
      opacity: 0.4;
      pointer-events: none;
      animation: twinkle 5s linear infinite;
    }
    @keyframes twinkle {
      0% { opacity: 0.3; }
      50% { opacity: 0.6; }
      100% { opacity: 0.3; }
    }
    #acc-astro-body .astro-section {
      background: rgba(255, 255, 255, 0.04);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 24px;
      position: relative;
      z-index: 1;
      transition: transform 0.3s ease;
    }
    #acc-astro-body .astro-section:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
      border-color: rgba(167, 139, 250, 0.4);
    }
    #acc-astro-body .astro-subhead {
      color: #d8b4fe;
      font-size: 1.2rem;
      font-weight: 700;
      border-bottom: 1px solid rgba(216, 180, 254, 0.3);
      padding-bottom: 8px;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      gap: 8px;
      text-shadow: 0 0 10px rgba(167, 139, 250, 0.5);
    }
    #acc-astro-body .astro-tags .astro-tag {
      background: rgba(139, 92, 246, 0.2);
      border: 1px solid rgba(139, 92, 246, 0.4);
      color: #e9d5ff;
    }
    #acc-astro-body .astro-desc {
      color: #cbd5e1;
      line-height: 1.6;
    }
    #acc-astro-body .astro-desc b {
      color: #fca5a5;
    }
    #acc-astro-body .table-wrapper {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    #acc-astro-body .astro-table {
      width: 100%;
      max-width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
    }
    #acc-astro-body .astro-table col {
      width: 25%;
    }
    #acc-astro-body .astro-table th,
    #acc-astro-body .astro-table td {
      padding: 7px 8px;
      word-break: break-word;
      overflow-wrap: anywhere;
      white-space: normal;
      vertical-align: top;
    }
    #acc-astro-body .astro-table .astro-col-longitude {
      overflow-wrap: anywhere;
    }
    #acc-astro-body #astroBodyWrap table {
      max-width: 100%;
    }
    #acc-astro-body .precision-insight-card {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      overflow-x: hidden;
      white-space: normal;
    }
    #acc-astro-body .precision-insight-card .astro-subhead {
      display: block;
      line-height: 1.4;
      white-space: normal;
      overflow-wrap: break-word;
      word-break: break-word;
      max-width: 100%;
      box-sizing: border-box;
    }
    #acc-astro-body .precision-insight-card .astro-desc,
    #acc-astro-body .precision-insight-card .astro-desc p {
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
      max-width: 100%;
      box-sizing: border-box;
    }
    #acc-astro-body .precision-insight-card .precision-headline {
      white-space: normal;
      overflow-wrap: break-word;
      word-break: break-word;
      display: inline;
      max-width: 100%;
      box-sizing: border-box;
    }
    #acc-astro-body .precision-insight-card,
    #acc-astro-body .precision-insight-card * {
      max-width: 100%;
      box-sizing: border-box;
    }

    @media (max-width: 480px) {
      #acc-astro-body .precision-insight-card .astro-desc {
        line-height: 1.65;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-all;
      }
    }

/* --- block 3 --- */
  /* 모달 시트 — 브라우저 네이티브 스크롤바 사용, 레이아웃 점프 방지 */
  #ziweiModalSheet, #sukuyoModalSheet, #astroModalSheet, #juyukModalSheet {
    scrollbar-gutter: stable;
  }
  /* 결과 화면이 잘리지 않도록 하단 여백 */
  #ziweiModalSheet > div,
  #sukuyoModalSheet > div,
  #astroModalSheet > div,
  #juyukModalSheet > div > div {
    padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important;
  }

/* --- block 4 --- */
.code-splash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 30% 60%, #0d1225 0%, #060810 60%, #000 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.7s ease, visibility 0.7s ease;
  overflow: hidden;
}

.code-splash-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.45;
  pointer-events: none;
}

.meteor-1 { top: 4%; left: 15%; --delay: 0s; --dur: 2s; }
.meteor-2 { top: 10%; left: 48%; --delay: 0.7s; --dur: 1.8s; }
.meteor-3 { top: 2%; left: 72%; --delay: 1.5s; --dur: 2.3s; }
.meteor-4 { top: 20%; left: 6%; --delay: 0.3s; --dur: 2.6s; }
.meteor-5 { top: 1%; left: 36%; --delay: 2.1s; --dur: 1.7s; }

.code-splash-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.code-splash-title {
  text-align: center;
}

.code-splash-brand {
  font-size: 1.05rem;
  color: #818cf8;
  letter-spacing: 3px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.code-splash-heading {
  font-size: 1.55rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
  line-height: 1.3;
}

.code-splash-subtitle {
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 5px;
  letter-spacing: 0.5px;
}

.code-splash-message {
  font-size: 0.88rem;
  color: #a5b4fc;
  text-align: center;
  min-height: 1.4em;
  letter-spacing: 0.5px;
  text-shadow: 0 0 12px rgba(165, 180, 252, 0.5);
}

.code-splash-progress-track {
  width: 220px;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  overflow: hidden;
}

.code-splash-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #6c63ff, #f472b6, #fbbf24);
  border-radius: 99px;
  transition: width 0.4s ease;
  box-shadow: 0 0 8px rgba(108, 99, 255, 0.8);
}

/* 코스믹 오브 — 정적 글로우 (애니메이션 없음) */
.splash-orb {
  width:150px; height:150px;
  border-radius:50%;
  background:radial-gradient(circle at 42% 42%,
    rgba(200,210,255,0.16) 0%,
    rgba(120,80,255,0.09) 45%,
    transparent 72%
  );
  box-shadow:
    0 0 55px rgba(165,180,252,0.22),
    0 0 110px rgba(108,99,255,0.10);
}
/* 별똥별 CSS 애니메이션 */
.meteor {
  position:absolute;
  width:2px;
  height:80px;
  background:linear-gradient(to bottom,
    transparent 0%,
    rgba(200,220,255,0.9) 45%,
    rgba(255,255,255,0.55) 65%,
    transparent 100%
  );
  border-radius:999px;
  transform-origin:top center;
  transform:rotate(-42deg) translateY(-200px);
  opacity:0;
  animation:meteorFall var(--dur,2s) linear var(--delay,0s) infinite;
  pointer-events:none;
  will-change:transform,opacity;
}

.privacy-content-note {
  font-size: 0.85rem;
  color: #888;
  margin-top: 16px;
}

.theme-switch-inline {
  margin: 0;
  cursor: pointer;
}

@keyframes meteorFall {
  0%   { transform:rotate(-42deg) translateY(-200px); opacity:0; }
  6%   { opacity:0.95; }
  70%  { opacity:0.65; }
  100% { transform:rotate(-42deg) translateY(110vh);  opacity:0; }
}
/* ────────────────────────────────────────────────────
   모바일 성능 최적화 (pointer:coarse = 터치 스크린)
   ─ 목적: 스플래시 프리징 및 전체 렌더 지연 방지
   ─ 원칙: transform/opacity 전용 애니메이션은 유지,
           compositor layer를 과도하게 생성하거나
           pseudo-element/filter를 사용하는 것만 제거
──────────────────────────────────────────────────── */
@media (pointer: coarse) {
  /* 0. position:fixed 장식 배경 제거 → iOS Safari 스크롤 시 GPU 재페인트로 인한 흰화면 방지 */
  body::before, body::after { display: none !important; }

  /* 0-1. wrap CSS containment → repaint 범위 제한 */
  .wrap { contain: layout; }

  /* 1. 별똥별 5개 will-change compositor layer 완전 제거 (모바일 렌더링 보호) */
  .meteor { display: none !important; }

  /* 2. 진행바 shimmer 스캔 제거 (translateX pseudo-element) */
  .cs-bar-fill::after,
  .fr-battery-fill::after { animation: none !important; opacity: 0 !important; }

  /* 3. 카드 배경 shimmer 제거 (radial-gradient transform) */
  .fr-summary::before { animation: none !important; }

  /* 4. 스크롤 리빌 will-change 제거
        — .card 수십 개에 compositor layer 예약하면 GPU 메모리 과부하 */
  .fate-scroll-section-hidden { will-change: auto !important; }

  /* 5. drop-shadow filter + infinite animation 조합 완화
        — filter: drop-shadow는 모바일에서 GPU 비용이 큼 */
  .cs-class-icon,
  .ec-icon,
  .lc-icon,
  .qm-icon { filter: none !important; }
}

/* --- block 5 --- */
  #sajuLoaderOverlay {
    position: fixed; inset: 0; background: radial-gradient(circle at center, #1b1725 0%, #050505 100%);
    z-index: 9999999; display: none; align-items: center; justify-content: center; flex-direction: column;
    color: #e5c07b; font-family: 'Noto Serif KR', serif; overflow: hidden;
  }
  #sajuLoaderOverlay.show { display: flex !important; }

  /* 중앙 책(만세력) 3D 컨테이너 */
  .saju-book-wrapper {
    position: relative; width: 220px; height: 150px; perspective: 1500px;
    margin-bottom: 60px;
  }
  .saju-book {
    width: 100%; height: 100%; transform-style: preserve-3d;
    transform: rotateX(60deg) scale(0.5); opacity: 0;
    animation: bookScaleUp 2.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  }
  @keyframes bookScaleUp {
    0%   { transform: rotateX(60deg) scale(0.3); opacity: 0; filter: blur(10px); }
    20%  { transform: rotateX(35deg) scale(1.1); opacity: 1; filter: blur(0px); }
    100% { transform: rotateX(20deg) scale(1); opacity: 1; }
  }

  /* 책 커버와 종이 질감 */
  .book-base {
    position: absolute; top: 0; width: 50%; height: 100%;
    background: linear-gradient(135deg, #1f1a14 0%, #3e3020 100%);
    border: 2px solid #b8860b; box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
    border-radius: 4px; display:flex; align-items:center; justify-content:center;
  }
  .book-base.left { right: 50%; transform-origin: right; transform: rotateY(10deg); border-right: none; border-radius: 6px 0 0 6px; box-shadow: -10px 10px 20px rgba(0,0,0,0.5), inset 15px 0 30px rgba(0,0,0,0.6); }
  .book-base.right { left: 50%; transform-origin: left; transform: rotateY(-10deg); border-left: none; border-radius: 0 6px 6px 0; box-shadow: 10px 10px 20px rgba(0,0,0,0.5), inset -15px 0 30px rgba(0,0,0,0.6); }
  .book-cover-title { color: rgba(212,175,55,0.4); font-size: 2rem; transform: rotateY(-10deg) translateZ(1px); font-family: 'Cinzel', serif; letter-spacing: 5px; }

  /* 넘겨지는 페이지들 */
  .book-page {
    position: absolute; top: 2%; right: 50%; width: 48%; height: 96%;
    background: #f4ecd8; border: 1px solid rgba(184,134,11,0.3);
    transform-origin: right; transform: rotateY(0deg);
    border-radius: 3px 0 0 3px;
    box-shadow: inset 0 0 15px rgba(212,175,55,0.1);
    background-image: repeating-linear-gradient(rgba(0,0,0,0.02) 0px, transparent 1px, transparent 15px);
  }
  .page1 { animation: turnPage 2.2s ease-in-out forwards 0.3s; }
  .page2 { animation: turnPage 2.2s ease-in-out forwards 0.6s; }
  .page3 { animation: turnPage 2.2s ease-in-out forwards 0.9s; }
  .page-right { right: 2%; transform-origin: left; transform: rotateY(0deg); border-radius: 0 3px 3px 0; background: #e8dcc4; }
  @keyframes turnPage {
    0%   { transform: rotateY(0deg); }
    100% { transform: rotateY(175deg); }
  }

  /* 오행 소용돌이 (Five Elements Vortex) */
  .saju-vortex {
    position: absolute; top: -50px; left: 50%; transform: translateX(-50%);
    width: 200px; height: 200px; border-radius: 50%;
    filter: blur(8px); mix-blend-mode: screen; opacity: 0;
    animation: vortexAppear 2.5s ease-out forwards 0.5s;
    pointer-events: none;
  }
  /* 개기일식 느낌: 중심 흑원 + 코로라 후광 */
  .saju-vortex::before {
    content: '';
    position: absolute;
    inset: 24%;
    border-radius: 50%;
    background:
      radial-gradient(circle at 35% 32%, rgba(52,56,66,0.95) 0 20%, rgba(12,12,16,0.98) 70%, rgba(0,0,0,1) 100%);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.14),
      0 0 20px rgba(0,0,0,0.75),
      inset 0 -8px 14px rgba(0,0,0,0.75);
    z-index: 2;
  }
  .saju-vortex::after {
    content: '';
    position: absolute;
    inset: 11%;
    border-radius: 50%;
    background:
      radial-gradient(circle,
        rgba(0,0,0,0) 46%,
        rgba(255,255,255,0.88) 58%,
        rgba(255,255,255,0.45) 67%,
        rgba(214,229,255,0.26) 78%,
        rgba(0,0,0,0) 100%);
    filter: blur(1.5px);
    animation: eclipseCoronaPulse 2.1s ease-in-out infinite;
    z-index: 1;
  }
  @keyframes vortexAppear {
    0%   { opacity: 0; transform: translateX(-50%) scale(0.5) rotate(0deg); }
    50%  { opacity: 0.8; transform: translateX(-50%) scale(1.1) rotate(180deg); }
    100% { opacity: 0; transform: translateX(-50%) scale(1.5) rotate(360deg); }
  }
  @keyframes eclipseCoronaPulse {
    0%,100% { transform: scale(0.97); opacity: 0.84; }
    50% { transform: scale(1.07); opacity: 1; }
  }
  .orb { position: absolute; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 20px currentColor; }
  .orb.w { color: #5c8a6f; background: #5c8a6f; top: 10%; left: 50%; transform: translate(-50%, 0); }
  .orb.f { color: #c95c5c; background: #c95c5c; top: 35%; right: 10%; }
  .orb.e { color: #d6b060; background: #d6b060; bottom: 15%; right: 25%; }
  .orb.m { color: #b8b8b8; background: #b8b8b8; bottom: 15%; left: 25%; }
  .orb.wa{ color: #406c8a; background: #406c8a; top: 35%; left: 10%; }

  /* 허공에 흩어지는 사주 명식(한자) 파티클 */
  .hanja-particle-container { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
  .hanja-char {
    position: absolute; color: #ffd700; font-family: serif; opacity: 0;
    text-shadow: 0 0 15px rgba(212,175,55,0.8), 0 0 30px rgba(212,175,55,0.4);
  }
  @keyframes hanjaFloat {
    0%   { opacity: 0; transform: translateY(20px) scale(0.5) rotate(0deg); filter: blur(3px); }
    20%  { opacity: 1; transform: translateY(0) scale(1.2) rotate(10deg); filter: blur(0px); }
    80%  { opacity: 0.8; transform: translateY(-40px) scale(1) rotate(-5deg); filter: blur(0px); }
    100% { opacity: 0; transform: translateY(-80px) scale(1.5) rotate(0deg); filter: blur(5px); }
  }

  /* 타이핑 텍스트 영역 */
  .saju-txt-wrap {
    position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center;
  }
  .saju-typing-txt {
    font-size: 1.3rem; letter-spacing: 2px; color: #e5c07b; font-weight: 300;
    overflow: hidden; white-space: nowrap; border-right: 2px solid #e5c07b;
    text-shadow: 0 0 10px rgba(212,175,55,0.5);
  }
  @keyframes sajuTyping { from { width: 0 } to { width: 100% } }
  @keyframes sajuBlink { from, to { border-color: transparent } 50% { border-color: #e5c07b; } }

/* --- block 6 --- */
      /* ── 전역 토큰 ── */
      :root {
        --dp-gold: #FFD700;
        --dp-gold-dim: rgba(255,215,0,0.55);
        --dp-gold-glow: rgba(255,215,0,0.25);
        --dp-space: #0B0E14;
        --dp-glass: rgba(255,255,255,0.05);
        --dp-glass-border: rgba(255,215,0,0.18);
        --dp-purple: rgba(120,80,220,0.35);
      }

      /* ══════════════════════════════════════════
         Master Destiny Card — Cosmic Blossom
      ══════════════════════════════════════════ */
      .dp-master-card {
        position: relative;
        border-radius: 20px;
        overflow: hidden;
        margin: 0 0 18px;
        cursor: default;
        border: 1px solid rgba(255,215,0,0.14);
        background: linear-gradient(135deg, #060C1A 0%, #0D1535 55%, #120B2C 100%);
        box-shadow: 0 6px 40px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,215,0,0.06), inset 0 1px 0 rgba(255,255,255,0.04);
        transition: box-shadow 0.4s, border-color 0.4s;
      }
      /* 상단 셀레스티얼 골드 광선 */
      .dp-master-card::before {
        content: '';
        position: absolute; top: 0; left: 0; right: 0; height: 2px;
        background: linear-gradient(90deg, transparent 0%, rgba(255,215,0,0.7) 35%, rgba(180,130,255,0.55) 70%, transparent 100%);
        pointer-events: none; z-index: 3;
      }
      .dp-master-card--active {
        border-color: rgba(255,215,0,0.28);
        box-shadow: 0 8px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,215,0,0.24),
                    0 0 55px rgba(255,215,0,0.1), inset 0 1px 0 rgba(255,255,255,0.06);
      }
      /* 꽃 개화 오라 */
      @keyframes dpAuraPulse {
        0%,100% { opacity: 0.42; transform: scale(1); }
        50%     { opacity: 0.82; transform: scale(1.014); }
      }
      .dp-master-card--active::after {
        content: '';
        position: absolute; inset: -2px; border-radius: 22px;
        border: 1px solid rgba(255,215,0,0.62);
        opacity: 0.38;
        animation: dpAuraPulse 3s ease-in-out infinite;
        pointer-events: none; z-index: 4;
      }
      /* Cosmic Glow */
      .dp-mc-glow {
        position: absolute; inset: 0;
        background: radial-gradient(ellipse at 18% 0%, rgba(255,215,0,0.1) 0%, transparent 55%),
                    radial-gradient(ellipse at 85% 100%, rgba(140,80,255,0.11) 0%, transparent 50%);
        pointer-events: none; z-index: 0;
      }
      /* Stars sprite */
      .dp-mc-stars {
        position: absolute; inset: 0;
        background-image:
          radial-gradient(circle, rgba(255,255,255,0.85) 0.5px, transparent 0.5px),
          radial-gradient(circle, rgba(255,215,0,0.6) 0.5px, transparent 0.5px),
          radial-gradient(circle, rgba(200,170,255,0.55) 0.5px, transparent 0.5px),
          radial-gradient(circle, rgba(255,255,255,0.3) 0.5px, transparent 0.5px);
        background-size: 130px 90px, 85px 110px, 110px 65px, 60px 70px;
        background-position: 8% 18%, 55% 75%, 80% 28%, 35% 55%;
        pointer-events: none; z-index: 0; opacity: 0.65;
      }
      /* 12궁 기하학 꽃 워터마크 */
      .dp-mc-flower {
        position: absolute; right: -15px; bottom: -15px;
        width: 150px; height: 150px;
        color: rgba(255,215,0,1);
        opacity: 0.055;
        pointer-events: none; z-index: 0;
        transition: opacity 0.5s;
        transform-origin: center center;
      }
      @keyframes dpBloomSpin {
        0%   { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      .dp-master-card--active .dp-mc-flower {
        opacity: 0.12;
        animation: dpBloomSpin 40s linear infinite;
      }
      /* Empty 카드 bloom icon */
      .dp-mc-empty-bloom {
        width: 44px; height: 44px; margin: 0 auto 10px;
        opacity: 0.4;
        animation: dpBloomSpin 10s linear infinite;
      }
      .dp-mc-inner { position: relative; z-index: 1; padding: 16px 16px 14px; }
      /* ── 헤더 ── */
      .dp-mc-header { display: flex; align-items: flex-start; gap: 12px; position: relative; z-index: 6; }
      .dp-mc-avatar {
        width: 50px; height: 50px; border-radius: 50%;
        background: linear-gradient(135deg, rgba(255,215,0,0.13) 0%, rgba(140,80,255,0.13) 100%);
        border: 1.5px solid rgba(255,215,0,0.3);
        display: flex; align-items: center; justify-content: center;
        font-size: 1.75rem; flex-shrink: 0;
        box-shadow: 0 0 22px rgba(255,215,0,0.2), inset 0 0 12px rgba(0,0,0,0.3);
      }
      .dp-mc-identity { flex: 1; min-width: 0; padding-top: 2px; }
      .dp-mc-label {
        font-size: 0.6rem; font-weight: 700;
        color: rgba(190,160,255,0.65); letter-spacing: 2.5px;
        text-transform: uppercase; margin-bottom: 3px;
      }
      .dp-mc-name {
        font-family: 'Gowun Dodum', serif;
        font-size: 1.2rem; font-weight: 700;
        color: #FFE566;
        letter-spacing: 0.5px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        text-shadow: 0 0 18px rgba(255,215,0,0.35);
      }
      .dp-mc-birth {
        font-size: 0.78rem; color: rgba(220,210,185,0.72);
        margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .dp-mc-list-btn {
        background: rgba(255,215,0,0.07); border: 1px solid rgba(255,215,0,0.18);
        color: rgba(255,215,0,0.55); width: 44px; height: 44px; border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; flex-shrink: 0;
        position: relative; z-index: 7;
        touch-action: manipulation; -webkit-tap-highlight-color: transparent;
        transition: background 0.2s, color 0.2s, border-color 0.2s;
      }
      .dp-mc-list-btn:active { background: rgba(255,215,0,0.18); color: #FFD700; border-color: rgba(255,215,0,0.4); }
      .dp-mc-divider {
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255,215,0,0.22), rgba(160,120,255,0.15), transparent);
        margin: 12px 0 10px;
      }
      /* ── 정보 2열 그리드 ── */
      .dp-mc-info {
        display: grid; grid-template-columns: 1fr 1fr;
        gap: 7px; margin-bottom: 12px;
      }
      .dp-mc-info-item {
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,215,0,0.1);
        border-radius: 10px; padding: 9px 11px;
        backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      }
      .dp-mc-info-item--wide { grid-column: 1 / -1; }
      .dp-mc-info-label {
        display: flex; align-items: center; gap: 4px;
        font-size: 0.63rem; color: rgba(180,160,220,0.65);
        letter-spacing: 0.8px; margin-bottom: 4px; text-transform: uppercase;
      }
      .dp-mc-info-val {
        display: block; font-size: 0.85rem;
        color: rgba(255,245,210,0.92); font-weight: 600;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .dp-mc-solar { color: #FFE566 !important; }
      .dp-mc-correction { font-size: 0.66rem; color: rgba(255,215,0,0.55); font-weight: 400; margin-left: 3px; }
      /* Load 버튼 */
      .dp-mc-load-btn {
        display: block; width: 100%; padding: 11px 16px;
        background: linear-gradient(135deg, rgba(255,215,0,0.09) 0%, rgba(140,80,255,0.09) 100%);
        border: 1px solid rgba(255,215,0,0.33); border-radius: 10px;
        color: #FFD700; font-family: 'Gowun Dodum', serif;
        font-size: 0.88rem; font-weight: 700; letter-spacing: 0.8px;
        cursor: pointer; text-align: center;
        touch-action: manipulation; -webkit-tap-highlight-color: transparent;
        transition: background 0.25s, box-shadow 0.25s, border-color 0.25s;
        position: relative; overflow: hidden;
      }
      .dp-mc-load-btn::before {
        content: '';
        position: absolute; top: -50%; left: -60%; width: 25%; height: 200%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
        transform: skewX(-20deg);
        animation: dpShimmer 4s 1.5s infinite;
      }
      .dp-mc-load-btn:active {
        background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(140,80,255,0.18));
        box-shadow: 0 0 22px rgba(255,215,0,0.28); border-color: rgba(255,215,0,0.55);
      }
      /* Empty 카드 */
      .dp-master-card--empty {
        border-style: dashed; border-color: rgba(255,215,0,0.18);
        background: linear-gradient(135deg, rgba(6,11,25,0.95), rgba(13,20,51,0.9));
        box-shadow: none; cursor: pointer;
      }
      .dp-mc-empty-inner {
        padding: 24px 16px 22px; text-align: center;
        touch-action: manipulation; -webkit-tap-highlight-color: transparent;
      }
      .dp-mc-empty-title {
        font-family: 'Gowun Dodum', serif;
        font-size: 0.98rem; font-weight: 700;
        color: rgba(255,215,0,0.5); margin-bottom: 5px; letter-spacing: 1px;
      }
      .dp-mc-empty-desc { font-size: 0.78rem; color: rgba(200,185,155,0.55); line-height: 1.65; }
      .dp-mc-empty-hint {
        margin-top: 10px; font-size: 0.72rem;
        color: rgba(255,215,0,0.35); letter-spacing: 1.5px;
        animation: dpAuraPulse 2s ease-in-out infinite;
      }

      /* ══════════════════════════════════════════
         저장 버튼 — Cosmic Blossom Bloom
      ══════════════════════════════════════════ */
      .dp-save-btn {
        display: block; width: 100%;
        padding: 15px 16px;
        background: linear-gradient(135deg, #0A081C 0%, #12103A 50%, #0A081C 100%);
        border: 1px solid rgba(255,215,0,0.42);
        border-radius: 14px;
        color: #FFE566;
        font-family: 'Gowun Dodum', serif;
        font-size: 0.96rem; font-weight: 700; letter-spacing: 1.8px;
        cursor: pointer; margin-top: 14px;
        touch-action: manipulation; -webkit-tap-highlight-color: transparent;
        transition: box-shadow 0.3s, border-color 0.3s, transform 0.15s;
        position: relative; overflow: hidden;
        box-shadow: 0 4px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,215,0,0.14);
        text-shadow: 0 0 18px rgba(255,215,0,0.5);
      }
      .dp-save-btn:active {
        transform: scale(0.985);
        box-shadow: 0 0 35px rgba(255,215,0,0.38), inset 0 0 20px rgba(255,215,0,0.08);
        border-color: rgba(255,215,0,0.8);
      }
      /* 광택 효과 */
      .dp-save-btn::before {
        content: '';
        position: absolute; top: -50%; left: -60%;
        width: 22%; height: 200%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
        transform: skewX(-20deg);
        animation: dpShimmer 3.5s infinite;
      }
      /* 중심 오라 (꽃잎 맥동) */
      .dp-save-btn::after {
        content: '';
        position: absolute; top: 50%; left: 50%;
        width: 120%; height: 320%;
        background: radial-gradient(ellipse at 50% 50%, rgba(255,215,0,0.08) 0%, transparent 65%);
        transform: translate(-50%, -50%);
        pointer-events: none;
        animation: dpSavePulse 3s ease-in-out infinite;
      }
      @keyframes dpSavePulse {
        0%,100% { opacity: 0.5; transform: translate(-50%,-50%) scale(0.88); }
        50%     { opacity: 1;   transform: translate(-50%,-50%) scale(1.12); }
      }
      @keyframes dpShimmer {
        0%   { left: -60%; opacity: 0; }
        30%  { opacity: 1; }
        70%  { left: 130%; opacity: 1; }
        100% { left: 130%; opacity: 0; }
      }

      /* ── Bottom Sheet — Profile Constellation List ── */
      .dp-sheet-overlay {
        position: fixed; inset: 0; z-index: 2000000;
        background: rgba(0,0,0,0.65);
        display: none;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
      }
      .dp-sheet {
        position: fixed; left: 0; right: 0; bottom: 0;
        z-index: 2000001;
        background: linear-gradient(180deg, #0d1420 0%, #0a0d17 100%);
        border-radius: 20px 20px 0 0;
        border-top: 1px solid rgba(255,215,0,0.2);
        min-height: 220px;
        max-height: 75dvh; max-height: 75vh;
        display: flex; flex-direction: column;
        transform: translateY(100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.36s cubic-bezier(0.22,1,0.36,1);
        will-change: transform;
        box-shadow: 0 -8px 40px rgba(0,0,0,0.7);
      }
      .dp-sheet-overlay.dp-sheet--open,
      .dp-sheet.dp-sheet--open { display: flex; }
      .dp-sheet.dp-sheet--open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }
      .dp-sheet-overlay { display: block; }
      .dp-sheet-overlay:not(.dp-sheet--open) { display: none; }

      .dp-sheet-handle-wrap {
        padding: 12px 0 6px; text-align: center; flex-shrink: 0;
      }
      .dp-sheet-handle {
        width: 36px; height: 4px; border-radius: 2px;
        background: rgba(255,215,0,0.25);
        display: inline-block;
      }
      .dp-sheet-head {
        display: flex; align-items: center; justify-content: space-between;
        padding: 0 18px 12px; flex-shrink: 0;
        border-bottom: 1px solid rgba(255,215,0,0.1);
      }
      .dp-sheet-title {
        font-family: 'Gowun Dodum', serif;
        font-size: 1rem; font-weight: 700;
        color: var(--dp-gold); letter-spacing: 1px;
      }
      .dp-sheet-close {
        background: rgba(255,215,0,0.08);
        border: 1px solid rgba(255,215,0,0.2);
        color: var(--dp-gold-dim);
        width: 32px; height: 32px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; font-size: 1rem;
        touch-action: manipulation; -webkit-tap-highlight-color: transparent;
      }
      .dp-sheet-close:active { background: rgba(255,215,0,0.2); }

      /* 목록 스크롤 영역 */
      .dp-list-scroll {
        flex: 1; overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        padding: 12px 14px 30px;
      }
      @media (max-width: 768px) {
        .dp-sheet {
          left: 10px;
          right: 10px;
          top: max(10px, env(safe-area-inset-top));
          bottom: auto;
          border-radius: 16px;
          min-height: 38dvh;
          max-height: min(78dvh, calc(100dvh - 20px - env(safe-area-inset-top)));
          transform: translateY(-115%);
        }
        .dp-sheet.dp-sheet--open {
          transform: translateY(0);
        }
        .dp-list-scroll { padding-bottom: 16px; }
      }
      .dp-list-empty {
        text-align: center; padding: 30px 20px;
        color: rgba(180,160,100,0.6); font-size: 0.88rem; line-height: 1.7;
      }
      /* 목록 아이템 — Celestial Transition */
      @keyframes dpStarAppear {
        from { opacity: 0; transform: scale(0.88) translateY(8px); }
        to   { opacity: 1; transform: scale(1)    translateY(0); }
      }
      .dp-list-item {
        display: flex; align-items: center; justify-content: space-between;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,215,0,0.1);
        border-radius: 12px; padding: 12px 12px;
        margin-bottom: 10px; cursor: pointer;
        backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
        animation: dpStarAppear 0.35s both;
        touch-action: manipulation; -webkit-tap-highlight-color: transparent;
        transition: background 0.2s, border-color 0.2s;
      }
      .dp-list-item:active { background: rgba(255,215,0,0.08); }
      .dp-list-item--active {
        border-color: rgba(255,215,0,0.45);
        background: rgba(255,215,0,0.06);
        box-shadow: 0 0 16px rgba(255,215,0,0.12);
      }
      .dp-li-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
      .dp-li-avatar {
        width: 38px; height: 38px; border-radius: 50%;
        background: rgba(255,215,0,0.07);
        border: 1px solid rgba(255,215,0,0.2);
        display: flex; align-items: center; justify-content: center;
        font-size: 1.3rem; flex-shrink: 0;
      }
      .dp-li-body { flex: 1; min-width: 0; }
      .dp-li-name {
        font-weight: 700; font-size: 0.92rem;
        color: rgba(255,235,180,0.95);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .dp-li-current-badge {
        display: inline-block;
        background: rgba(255,215,0,0.18);
        border: 1px solid rgba(255,215,0,0.35);
        color: var(--dp-gold); font-size: 0.6rem;
        padding: 1px 5px; border-radius: 4px;
        margin-left: 5px; vertical-align: middle;
      }
      .dp-li-meta {
        font-size: 0.75rem; color: rgba(200,185,140,0.65);
        margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .dp-li-loc { font-size: 0.72rem; color: rgba(160,150,120,0.55); margin-top: 1px; }
      .dp-li-del {
        background: transparent; border: none;
        color: rgba(255,100,100,0.5); font-size: 0.85rem;
        padding: 6px 8px; cursor: pointer; flex-shrink: 0;
        touch-action: manipulation; -webkit-tap-highlight-color: transparent;
        transition: color 0.2s;
      }
      .dp-li-del:active { color: rgba(255,80,80,0.9); }

      /* ── Stardust 파티클 ── */
      .dp-stardust {
        position: fixed;
        width: 5px; height: 5px;
        border-radius: 50%;
        background: var(--dp-gold);
        pointer-events: none;
        z-index: 999999;
        transform: translate(-50%, -50%);
        animation: dpStardustFly 0.85s ease-out forwards;
      }
      @keyframes dpStardustFly {
        0%   { opacity: 1; transform: translate(-50%,-50%) translate(0,0) scale(1); }
        100% { opacity: 0; transform: translate(-50%,-50%) translate(var(--tx),var(--ty)) scale(0.2); }
      }

      /* ── Toast ── */
      .dp-toast {
        position: fixed; bottom: 80px; left: 50%;
        transform: translateX(-50%) translateY(20px);
        background: rgba(11,14,20,0.97);
        border: 1px solid rgba(255,215,0,0.3);
        color: var(--dp-gold);
        font-family: 'Gowun Dodum', serif;
        font-size: 0.88rem; font-weight: 700; letter-spacing: 0.5px;
        padding: 10px 20px; border-radius: 99px;
        opacity: 0; transition: opacity 0.3s, transform 0.3s;
        z-index: 1000000; white-space: nowrap;
        box-shadow: 0 4px 20px rgba(0,0,0,0.5);
        pointer-events: none;
      }
      .dp-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
      .dp-toast--info    { border-color: rgba(100,160,255,0.35); color: #90C0FF; }
      .dp-toast--success { border-color: rgba(255,215,0,0.50); color: #FFD700; }
      .dp-toast--warn    { border-color: rgba(251,146,60,0.50); color: #FB923C; }
      .dp-toast--error   { border-color: rgba(248,113,113,0.50); color: #F87171; }
      .dp-toast--privacy {
        white-space: normal;
        max-width: min(92vw, 560px);
        border-radius: 18px;
        padding: 13px 18px;
        text-align: center;
        line-height: 1.55;
        letter-spacing: 0.1px;
        color: #F7E7A1;
        border-color: rgba(255,215,110,0.55);
        background:
          radial-gradient(circle at 18% 15%, rgba(255,255,210,0.14) 0 1.4px, transparent 1.5px),
          radial-gradient(circle at 83% 20%, rgba(255,245,190,0.13) 0 1.5px, transparent 1.6px),
          radial-gradient(circle at 72% 72%, rgba(255,235,160,0.11) 0 1.2px, transparent 1.3px),
          linear-gradient(145deg, rgba(22,18,35,0.98), rgba(9,10,20,0.96));
        box-shadow: 0 8px 28px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.03);
      }
      .dp-toast--privacy::before,
      .dp-toast--privacy::after {
        content: '✦';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.72rem;
        color: rgba(255,220,120,0.9);
        text-shadow: 0 0 10px rgba(255,215,0,0.35);
        animation: dpSealPulse 1.9s ease-in-out infinite;
      }
      .dp-toast--privacy::before { left: 10px; }
      .dp-toast--privacy::after  { right: 10px; }

      /* ── 운명 데이터 저장 확인 오버레이 ── */
      @keyframes dpSaveRipple {
        0%   { transform:translate(-50%,-50%) scale(0.6); opacity:0; }
        60%  { opacity:1; }
        100% { transform:translate(-50%,-50%) scale(1); opacity:1; }
      }
      @keyframes dpSaveFadeOut {
        to { opacity:0; transform:translateX(-50%) translateY(4px) scale(0.98); }
      }
      @keyframes dpParticle {
        0%   { transform:translate(0,0) scale(1); opacity:1; }
        100% { transform:translate(var(--px),var(--py)) scale(0); opacity:0; }
      }
      @keyframes dpSealPulse {
        0%,100% { opacity:0.5; letter-spacing:4px; }
        50%     { opacity:1;   letter-spacing:8px; }
      }
      /* ── 운세 선택 모달 (dp-fsel) ── */
      .dp-fsel-overlay {
        position:fixed; inset:0; z-index:2050000;
        background:rgba(0,0,0,0);
        display:flex; align-items:flex-end; justify-content:center;
        transition:background 0.32s ease;
        pointer-events:none;
      }
      .dp-fsel-overlay--in {
        background:rgba(4,6,18,0.93);
        pointer-events:auto;
      }
      .dp-fsel-modal {
        position:relative;
        background:linear-gradient(160deg,rgba(10,8,30,0.99),rgba(20,10,55,0.99));
        border:1px solid rgba(255,215,0,0.28);
        border-radius:24px 24px 0 0;
        padding:36px 24px 40px;
        width:100%; max-width:480px;
        max-height:80dvh; overflow-y:auto;
        box-shadow:0 -8px 60px rgba(130,60,255,0.28);
        transform:translateY(100%);
        transition:transform 0.38s cubic-bezier(0.22,1,0.36,1);
      }
      .dp-fsel-overlay--in .dp-fsel-modal {
        transform:translateY(0);
      }
      .dp-fsel-close-btn {
        position:absolute; top:16px; right:18px;
        width:30px; height:30px; border-radius:50%;
        background:rgba(255,255,255,0.07);
        color:rgba(255,255,255,0.4); font-size:0.85rem;
        display:flex; align-items:center; justify-content:center;
        cursor:pointer; touch-action:manipulation;
        -webkit-tap-highlight-color:transparent;
      }
      .dp-fsel-close-btn:active { background:rgba(255,255,255,0.14); }
      .dp-fsel-profile {
        text-align:center; margin-bottom:20px;
      }
      .dp-fsel-zodiac {
        display:block; font-size:2.6rem; margin-bottom:8px;
        filter:drop-shadow(0 0 12px rgba(255,215,0,0.5));
      }
      .dp-fsel-pname {
        font-family:'Gowun Dodum',serif;
        font-size:1.15rem; font-weight:900; color:#fff;
        margin-bottom:5px;
      }
      .dp-fsel-pdate {
        font-size:0.78rem; color:rgba(200,185,255,0.65); margin-bottom:3px;
      }
      .dp-fsel-ploc {
        font-size:0.72rem; color:rgba(180,180,220,0.45);
      }
      .dp-fsel-divider {
        height:1px; background:rgba(255,215,0,0.15); margin:18px 0;
      }
      .dp-fsel-ask {
        font-family:'Gowun Dodum',serif;
        font-size:0.88rem; color:rgba(220,200,255,0.7);
        text-align:center; letter-spacing:1px; margin-bottom:20px;
      }
      .dp-fsel-btns {
        display:grid; grid-template-columns:1fr 1fr;
        gap:10px;
      }
      .dp-fsel-btn {
        display:flex; align-items:center; gap:10px;
        padding:14px 16px;
        background:rgba(255,255,255,0.04);
        border:1px solid rgba(255,255,255,0.12);
        border-radius:14px; cursor:pointer;
        touch-action:manipulation; -webkit-tap-highlight-color:transparent;
        transition:background 0.18s, border-color 0.18s, transform 0.12s;
      }
      .dp-fsel-btn:active { transform:scale(0.96); }
      .dp-fsel-btn-icon  { font-size:1.6rem; flex-shrink:0; }
      .dp-fsel-btn-label {
        font-family:'Gowun Dodum',serif;
        font-size:0.88rem; font-weight:700;
        color:rgba(255,255,255,0.8); white-space:nowrap;
      }
      .dp-fsel-btn--saju   { border-color:rgba(255,200,50,0.3);  }
      .dp-fsel-btn--saju:hover   { background:rgba(255,200,50,0.1);  border-color:rgba(255,200,50,0.5);  }
      .dp-fsel-btn--sukuyo { border-color:rgba(167,139,250,0.3); }
      .dp-fsel-btn--sukuyo:hover { background:rgba(167,139,250,0.1); border-color:rgba(167,139,250,0.5); }
      .dp-fsel-btn--ziwei  { border-color:rgba(232,121,249,0.3); }
      .dp-fsel-btn--ziwei:hover  { background:rgba(232,121,249,0.1); border-color:rgba(232,121,249,0.5); }
      .dp-fsel-btn--astro  { border-color:rgba(167,209,255,0.3); }
      .dp-fsel-btn--astro:hover  { background:rgba(167,209,255,0.1); border-color:rgba(167,209,255,0.5); }
      .dp-fsel-btn--flower { border-color:rgba(244,114,182,0.32); }
      .dp-fsel-btn--flower:hover { background:rgba(244,114,182,0.11); border-color:rgba(244,114,182,0.55); }
      .dp-fsel-btn--flower { grid-column:1 / -1; justify-content:center; }

      .dp-save-overlay {
        position:fixed; inset:0; z-index:2000000;
        background:rgba(0,0,0,0);
        display:flex; align-items:center; justify-content:center;
        transition:background 0.35s ease;
        pointer-events:none;
      }
      .dp-save-overlay--in {
        background:rgba(4,6,18,0.82);
        pointer-events:auto;
        backdrop-filter:blur(8px);
        -webkit-backdrop-filter:blur(8px);
      }
      .dp-save-modal {
        position:relative;
        background:linear-gradient(145deg,rgba(12,14,32,0.98),rgba(22,18,55,0.98));
        border:1px solid rgba(255,215,0,0.38);
        border-radius:22px;
        padding:40px 32px 32px;
        text-align:center;
        max-width:320px; width:90%;
        box-shadow:0 0 60px rgba(180,130,255,0.18), 0 0 0 1px rgba(255,215,0,0.08) inset;
        opacity:0; transform:translateX(-50%) translateY(8px) scale(0.96);
        transition:opacity 0.35s ease, transform 0.35s ease;
        /* 오버레이 내부에서는 translate offset없이 아이템으로 위치 */
        position:static; transform:translateY(12px) scale(0.96);
      }
      .dp-save-overlay--in .dp-save-modal {
        opacity:1; transform:translateY(0) scale(1);
      }
      .dp-save-particles {
        position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:22px;
      }
      .dp-save-particles span {
        position:absolute; width:5px; height:5px; border-radius:50%;
        background:radial-gradient(circle,#FFD700,#c084fc);
        animation:dpParticle 1.4s ease-out both;
        opacity:0;
      }
      .dp-save-particles span:nth-child(1){ top:50%;left:50%; --px:-55px; --py:-65px; animation-delay:0.05s; }
      .dp-save-particles span:nth-child(2){ top:50%;left:50%; --px:60px;  --py:-70px; animation-delay:0.12s; width:4px;height:4px; }
      .dp-save-particles span:nth-child(3){ top:50%;left:50%; --px:-70px; --py:30px;  animation-delay:0.08s; }
      .dp-save-particles span:nth-child(4){ top:50%;left:50%; --px:65px;  --py:35px;  animation-delay:0.15s; }
      .dp-save-particles span:nth-child(5){ top:50%;left:50%; --px:-30px; --py:70px;  animation-delay:0.1s;  width:3px;height:3px; }
      .dp-save-particles span:nth-child(6){ top:50%;left:50%; --px:35px;  --py:65px;  animation-delay:0.18s; }
      .dp-save-particles span:nth-child(7){ top:50%;left:50%; --px:-80px; --py:-15px; animation-delay:0.06s; width:3px;height:3px; }
      .dp-save-particles span:nth-child(8){ top:50%;left:50%; --px:80px;  --py:-20px; animation-delay:0.14s; width:4px;height:4px; }
      .dp-save-icon {
        font-size:3.6rem; margin-bottom:14px; display:block;
        filter:drop-shadow(0 0 14px rgba(255,215,0,0.55));
        animation:dpSealPulse 2.2s 0.4s infinite;
      }
      .dp-save-title {
        font-family:'Gowun Dodum',serif;
        font-size:1.05rem; font-weight:700;
        color:#FFD700; letter-spacing:1px;
        margin-bottom:12px;
        text-shadow:0 0 12px rgba(255,215,0,0.4);
      }
      .dp-save-name {
        font-family:'Gowun Dodum',serif;
        font-size:1.25rem; font-weight:900; color:#fff;
        margin-bottom:8px; letter-spacing:0.5px;
      }
      .dp-save-detail {
        font-size:0.8rem; color:rgba(200,185,255,0.7);
        margin-bottom:4px; letter-spacing:0.3px;
      }
      .dp-save-loc {
        font-size:0.76rem; color:rgba(180,180,220,0.55);
        margin-bottom:22px;
      }
      .dp-save-seal {
        font-size:1rem; color:rgba(255,215,0,0.6);
        letter-spacing:4px; margin-bottom:22px;
        animation:dpSealPulse 2.4s infinite;
      }
      .dp-save-close {
        display:inline-block;
        background:linear-gradient(135deg,rgba(255,215,0,0.12),rgba(140,80,255,0.12));
        border:1px solid rgba(255,215,0,0.38); border-radius:10px;
        color:#FFD700; font-family:'Gowun Dodum',serif;
        font-size:0.9rem; font-weight:700; letter-spacing:0.8px;
        padding:10px 36px; cursor:pointer;
        touch-action:manipulation; -webkit-tap-highlight-color:transparent;
        transition:background 0.2s, box-shadow 0.2s;
      }
      .dp-save-close:active {
        background:linear-gradient(135deg,rgba(255,215,0,0.22),rgba(140,80,255,0.2));
        box-shadow:0 0 18px rgba(255,215,0,0.3);
      }

      /* ── 프로필 전환 확인 다이얼로그 ── */
      .dp-switch-overlay {
        position:fixed; inset:0; z-index:2100000;
        background:rgba(0,0,0,0);
        display:flex; align-items:center; justify-content:center;
        transition:background 0.3s ease;
        pointer-events:none;
      }
      .dp-switch-overlay--in {
        background:rgba(4,6,18,0.88);
        pointer-events:auto;
        backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);
      }
      .dp-switch-modal {
        background:linear-gradient(145deg,rgba(14,8,40,0.98),rgba(26,10,68,0.98));
        border:1px solid rgba(160,100,255,0.42);
        border-radius:22px;
        padding:36px 28px 32px;
        text-align:center;
        max-width:310px; width:90%;
        box-shadow:0 0 60px rgba(130,70,255,0.22),0 0 0 1px rgba(170,100,255,0.07) inset;
        transform:translateY(14px) scale(0.95);
        opacity:0;
        transition:opacity 0.3s ease, transform 0.3s ease;
      }
      .dp-switch-overlay--in .dp-switch-modal {
        opacity:1; transform:translateY(0) scale(1);
      }
      .dp-switch-icon {
        font-size:2.8rem; margin-bottom:10px; display:block;
        filter:drop-shadow(0 0 10px rgba(160,100,255,0.5));
      }

      /* Ziwei hidden ability and career coaching block */
      .zw-hidden-power {
        position: relative;
        overflow: hidden;
        margin-bottom: 20px;
        border-radius: 14px;
        border: 1px solid rgba(125, 211, 252, 0.34);
        background: linear-gradient(150deg, rgba(13, 24, 52, 0.97), rgba(22, 44, 78, 0.95) 48%, rgba(8, 20, 42, 0.97));
        box-shadow: inset 0 0 0 1px rgba(186, 230, 253, 0.12), 0 12px 28px rgba(0, 0, 0, 0.36);
      }
      .zw-hidden-power__starfield {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image:
          radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.28) 0 1.1px, transparent 1.2px),
          radial-gradient(circle at 72% 30%, rgba(255, 255, 255, 0.22) 0 1.2px, transparent 1.3px),
          radial-gradient(circle at 34% 76%, rgba(255, 255, 255, 0.24) 0 1.1px, transparent 1.2px),
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.22)' stroke-width='0.7'%3E%3Cpath d='M26 25l2.2 5.6 5.9.6-4.5 3.8 1.4 5.8-5-3.1-5 3.1 1.4-5.8-4.5-3.8 5.9-.6z'/%3E%3Cpath d='M138 48l1.6 4.1 4.4.5-3.4 2.9 1 4.3-3.6-2.2-3.6 2.2 1-4.3-3.3-2.9 4.3-.5z'/%3E%3Cpath d='M86 122l1.9 4.8 5 .5-3.8 3.2 1.2 5-4.3-2.6-4.3 2.6 1.2-5-3.8-3.2 5-.5z'/%3E%3C/g%3E%3C/svg%3E");
        background-repeat: no-repeat, no-repeat, no-repeat, repeat;
        opacity: 0.9;
      }
      .zw-hidden-power__inner {
        position: relative;
        z-index: 1;
        padding: 18px;
      }
      .zw-hidden-power__title {
        margin: 0 0 8px;
        color: #dbeafe;
        font-size: 1.12rem;
        font-weight: 900;
        letter-spacing: 0.01em;
      }
      .zw-hidden-power__lead {
        margin: 0 0 10px;
        color: #e0f2fe;
        font-size: 0.88rem;
        line-height: 1.7;
      }
      .zw-hidden-power__chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 10px;
      }
      .zw-hidden-power__chip {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        border: 1px solid rgba(125, 211, 252, 0.42);
        background: rgba(15, 23, 42, 0.46);
        color: #bae6fd;
        font-size: 0.74rem;
        font-weight: 700;
        padding: 3px 8px;
      }
      .zw-hidden-power__grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 9px;
      }
      .zw-hidden-power__card {
        border-radius: 10px;
        border: 1px solid rgba(148, 163, 184, 0.3);
        background: rgba(15, 23, 42, 0.45);
        padding: 10px 11px;
      }
      .zw-hidden-power__card h3 {
        margin: 0 0 6px;
        color: #bfdbfe;
        font-size: 0.94rem;
      }
      .zw-hidden-power__card p {
        margin: 0 0 6px;
        color: #e2e8f0;
        font-size: 0.85rem;
        line-height: 1.72;
      }
      .zw-hidden-power__card p:last-child {
        margin-bottom: 0;
      }
      .zw-hidden-power__guide {
        margin-top: 10px;
        border-radius: 10px;
        border: 1px solid rgba(110, 231, 183, 0.35);
        background: linear-gradient(120deg, rgba(16, 185, 129, 0.14), rgba(34, 197, 94, 0.09));
        padding: 10px 11px;
      }
      .zw-hidden-power__guide h3 {
        margin: 0 0 6px;
        color: #bbf7d0;
        font-size: 0.95rem;
      }
      .zw-hidden-power__guide p {
        margin: 0 0 6px;
        color: #ecfeff;
        font-size: 0.84rem;
        line-height: 1.7;
      }
      .zw-hidden-power__guide p:last-child {
        margin-bottom: 0;
      }
      @media (max-width: 767px) {
        .zw-hidden-power__inner {
          padding: 14px;
        }
        .zw-hidden-power__title {
          font-size: 1.02rem;
        }
      }
      .dp-switch-q {
        font-family:'Gowun Dodum',serif;
        font-size:0.95rem; font-weight:700;
        color:#c4b5fd; letter-spacing:0.8px;
        margin-bottom:16px; line-height:1.6;
        text-shadow:0 0 10px rgba(196,181,253,0.3);
      }
      .dp-switch-name {
        font-family:'Gowun Dodum',serif;
        font-size:1.2rem; font-weight:900; color:#fff;
        margin-bottom:5px;
      }
      .dp-switch-detail {
        font-size:0.77rem; color:rgba(200,183,255,0.65);
        margin-bottom:3px;
      }
      .dp-switch-loc {
        font-size:0.71rem; color:rgba(200,183,255,0.38);
        margin-bottom:24px; min-height:1em;
      }
      .dp-switch-btns {
        display:flex; gap:10px; justify-content:center;
      }
      .dp-switch-no {
        flex:1; padding:11px 0;
        background:rgba(255,255,255,0.06);
        border:1px solid rgba(255,255,255,0.14);
        border-radius:12px; color:rgba(255,255,255,0.5);
        font-family:'Gowun Dodum',serif; font-size:0.9rem;
        cursor:pointer; transition:background 0.2s;
        touch-action:manipulation; -webkit-tap-highlight-color:transparent;
      }
      .dp-switch-no:hover { background:rgba(255,255,255,0.11); }
      .dp-switch-yes {
        flex:1; padding:11px 0;
        background:linear-gradient(135deg,#6d28d9,#a855f7);
        border:1px solid rgba(168,85,247,0.5);
        border-radius:12px; color:#fff;
        font-family:'Gowun Dodum',serif; font-size:0.9rem;
        cursor:pointer; font-weight:700;
        box-shadow:0 4px 16px rgba(168,85,247,0.35);
        transition:box-shadow 0.2s, transform 0.1s;
        touch-action:manipulation; -webkit-tap-highlight-color:transparent;
      }
      .dp-switch-yes:hover { box-shadow:0 4px 22px rgba(168,85,247,0.5); }
      .dp-switch-yes:active { transform:scale(0.97); }

/* --- block 7 --- */
            .glass-oracle-modal {
              position: relative;
              background: linear-gradient(135deg, #1a0b2e 0%, #2d1b4e 100%);
              border-radius: 20px;
              padding: 24px;
              box-shadow: 0 10px 40px rgba(0,0,0,0.6), inset 0 0 30px rgba(139, 92, 246, 0.15);
              border: 1px solid rgba(139, 92, 246, 0.3);
              overflow: hidden;
            }
            .glass-oracle-modal::before {
              content: '';
              position: absolute;
              top: -50%; left: -50%;
              width: 200%; height: 200%;
              background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 60%);
              animation: rotateBgModal 25s linear infinite;
              pointer-events: none;
            }
            @keyframes rotateBgModal { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
            
            .oracle-header-m { text-align: center; margin-bottom: 24px; position: relative; z-index: 2; }
            .oracle-title-m {
              font-family: 'Cinzel', serif; font-size: 1.5rem;
              background: linear-gradient(to right, #e2e8f0, #fff, #e2e8f0);
              background-clip: text;
              -webkit-background-clip: text; -webkit-text-fill-color: transparent;
              letter-spacing: 2px; margin-bottom: 6px; text-shadow: 0 0 15px rgba(255,255,255,0.3);
            }
            .oracle-subtitle-m { font-family: 'Gowun Batang', serif; font-size: 0.9rem; color: #a78bfa; letter-spacing: 0.5px; }

            .oracle-cats-m { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 30px; position: relative; z-index: 2; }
            .oracle-cat-btn-m {
              background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
              color: #d8b4fe; padding: 8px 14px; border-radius: 99px; font-size: 0.82rem;
              cursor: pointer; transition: all 0.3s ease; font-family: 'Gowun Batang', serif;
            }
            .oracle-cat-btn-m:hover, .oracle-cat-btn-m.active {
              background: rgba(139, 92, 246, 0.25); border-color: #a78bfa; color: #fff;
              box-shadow: 0 0 15px rgba(167, 139, 250, 0.4); transform: translateY(-2px);
            }
            .oracle-cat-btn-m:active {
              transform: scale(0.95); opacity: 0.85;
            }

            .oracle-scene-m {
              height: 340px; perspective: 1000px; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2; margin-bottom: 20px;
            }
            .oracle-card-m {
              width: 200px; height: 310px; position: relative; transform-style: preserve-3d;
              transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer;
            }
            .oracle-card-m.flipped { transform: rotateY(180deg); }
            .oracle-face-m {
              position: absolute; width: 100%; height: 100%; backface-visibility: hidden;
              border-radius: 14px; box-shadow: 0 15px 35px rgba(0,0,0,0.6);
            }
            .oracle-back-m {
              background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
              border: 2px solid #6366f1; display: flex; justify-content: center; align-items: center;
              font-size: 3.5rem;
              background-image: radial-gradient(#6366f1 1px, transparent 1px), radial-gradient(#6366f1 1px, transparent 1px);
              background-size: 20px 20px; background-position: 0 0, 10px 10px;
            }
            .oracle-back-m::after { content: '⚛'; color: rgba(255,255,255,0.25); animation: pulse 2.5s infinite; }
            .oracle-front-m {
              transform: rotateY(180deg); background-size: cover; background-position: center;
              border: 2px solid #ffd700; box-shadow: 0 0 25px rgba(255, 215, 0, 0.4);
            }

            .oracle-result-box-m {
              margin-top: 20px; padding: 22px; background: rgba(0, 0, 0, 0.5);
              border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08);
              position: relative; z-index: 2; display: none; animation: fadeIn 0.8s ease;
            }
            .oracle-text-m {
              font-family: 'Gowun Batang', serif; color: #e2e8f0; font-size: 1.05rem;
              line-height: 1.85; text-align: justify; word-break: keep-all; text-shadow: 0 1px 2px rgba(0,0,0,0.8);
            }
            .ritual-text-m { text-align: center; color: #cbd5e1; font-size: 0.95rem; min-height: 28px; margin-top: 15px; font-family: 'Gowun Batang', serif; }

/* --- block 8 --- */
        #tarotModalOverlay:-webkit-full-screen #tarotInnerContainer { max-width: 640px !important; }
        #tarotModalOverlay:fullscreen #tarotInnerContainer { max-width: 640px !important; }

/* --- block 9 --- */
      .kemet-oracle-container {
        margin: 40px auto 20px; width: 100%; max-width: 900px;
        background: radial-gradient(circle at center, #1b1725 0%, #0a0b10 100%);
        border: 2px solid #b8860b;
        border-radius: 20px; position: relative; overflow: hidden;
        box-shadow: 0 20px 50px rgba(0,0,0,0.8), inset 0 0 80px rgba(184,134,11,0.1);
        font-family: 'Noto Serif KR', serif; color: #f2e2c5;
      }
      
      /* 신비로운 모래 먼지(파티클) 효과 */
      .kemet-oracle-container::before {
        content: ''; position: absolute; inset: 0;
        background-image: radial-gradient(rgba(212,175,55,0.15) 1px, transparent 1px);
        background-size: 20px 20px; opacity: 0.3; pointer-events: none;
        animation: kemetSandDrift 30s linear infinite;
      }
      @keyframes kemetSandDrift { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-100px) rotate(5deg); } }

      .kemet-hero {
        position: relative; padding: 60px 20px 40px; text-align: center;
        background: linear-gradient(180deg, rgba(10,11,16,0.8) 0%, rgba(27,23,37,0.4) 100%);
        border-bottom: 2px solid rgba(184,134,11,0.3);
        z-index: 1;
      }
      
      /* 전시안 (Eye of Horus) 스캔 렌즈 효과 */
      .kemet-eye-of-horus {
        position: relative; width: 140px; height: 140px; margin: 0 auto 25px;
        display: flex; align-items: center; justify-content: center;
      }
      .kemet-eye-icon {
        font-size: 100px; color: #d4af37; line-height: 1;
        text-shadow: 0 0 30px rgba(212,175,55,0.8), 0 0 60px rgba(212,175,55,0.4);
        position: relative; z-index: 2;
        animation: kemetEyePulse 3s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
      }
      .kemet-eye-rings {
        position: absolute; inset: -20%; border: 2px dashed rgba(212,175,55,0.4);
        border-radius: 50%; z-index: 1;
        animation: kemetRingSpin 20s linear infinite;
      }
      .kemet-eye-rings::before {
        content: ''; position: absolute; inset: 15%; border: 1px solid rgba(212,175,55,0.2);
        border-radius: 50%; animation: kemetRingSpin 15s linear infinite reverse;
      }
      @keyframes kemetEyePulse { 0% { transform: scale(0.95); opacity: 0.8; filter: drop-shadow(0 0 10px #d4af37); } 100% { transform: scale(1.05); opacity: 1; filter: drop-shadow(0 0 40px #d4af37) brightness(1.2); } }
      @keyframes kemetRingSpin { 100% { transform: rotate(360deg); } }

      .kemet-title { font-family: 'Cinzel', serif; font-size: 2.5rem; color: #e5c07b; margin: 0 0 15px; letter-spacing: 8px; text-shadow: 0 5px 15px rgba(0,0,0,0.8), 0 0 25px rgba(229,192,123,0.5); font-weight:900; }
      .kemet-subtitle { font-size: 1.05rem; color: #bcaaa4; letter-spacing: 2px; }

      .kemet-search-area { padding: 40px 30px; background: rgba(0,0,0,0.4); position: relative; z-index: 1; }
      .kemet-select { width: 100%; padding: 16px; background: rgba(10,11,16,0.9); border: 1px solid rgba(184,134,11,0.5); color: #e5c07b; border-radius: 8px; margin-bottom: 25px; font-size: 1rem; outline: none; transition:all 0.3s; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); }
      .kemet-select:focus { border-color: #ffd700; box-shadow: 0 0 20px rgba(212,175,55,0.3), inset 0 0 10px rgba(0,0,0,0.8); }
      .kemet-input-group { display: flex; gap: 12px; flex-wrap:wrap; }
      .kemet-input { flex: 1; min-width:200px; padding: 18px; background: rgba(10,11,16,0.9); border: 1px solid rgba(184,134,11,0.4); color: #fff; border-radius: 8px; font-size: 1.05rem; transition: all 0.3s; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); }
      .kemet-input::placeholder { color: rgba(242,226,197,0.4); }
      .kemet-input:focus { border-color: #ffd700; box-shadow: 0 0 20px rgba(212,175,55,0.3); outline: none; }
      .kemet-btn { background: linear-gradient(135deg, #8b6508, #d4af37, #8b6508); background-size: 200% auto; color: #000; font-weight: 900; font-size: 1.15rem; padding: 18px 35px; border: 1px solid #ffd700; border-radius: 8px; cursor: pointer; transition: all 0.4s; letter-spacing: 2px; flex-shrink:0; text-shadow: 0 1px 2px rgba(255,255,255,0.5); }
      .kemet-btn:hover { background-position: right center; box-shadow: 0 0 30px rgba(212,175,55,0.8); transform: translateY(-3px) scale(1.02); }

      .kemet-loading { padding: 60px 20px; text-align: center; display: none; position: relative; z-index: 1; }
      .kemet-hiero-loader { font-size: 3.5rem; color: #d4af37; margin-bottom: 30px; display:flex; justify-content:center; gap:20px; }
      .kemet-hiero-loader span { animation: kemetGlow 1.5s infinite alternate; text-shadow: 0 0 20px rgba(212,175,55,0.6); }
      .kemet-hiero-loader span:nth-child(2) { animation-delay: 0.3s; }
      .kemet-hiero-loader span:nth-child(3) { animation-delay: 0.6s; }
      .kemet-hiero-loader span:nth-child(4) { animation-delay: 0.9s; }
      .kemet-hiero-loader span:nth-child(5) { animation-delay: 1.2s; }
      @keyframes kemetGlow { 0% { opacity:0.2; filter:blur(3px); transform:scale(0.85) translateY(10px); } 100% { opacity:1; filter:blur(0px); transform:scale(1.1) translateY(0); text-shadow:0 0 25px #ffd700; } }
      .kemet-loading-text { font-size: 1.1rem; color: #e5c07b; margin-bottom: 25px; letter-spacing: 2px; font-weight:bold; }
      .kemet-progress-bar { width: 80%; max-width:450px; height: 4px; background: rgba(184,134,11,0.2); margin: 0 auto; border-radius: 4px; position:relative; overflow:hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,0.8); }
      .kemet-progress-fill { position:absolute; left:0; top:0; height:100%; width:0%; background: linear-gradient(90deg, transparent, #ffd700); box-shadow: 0 0 20px #ffd700; transition: width 0.4s ease; }

      .kemet-result-area { padding: 40px 30px; display: none; animation: kemetFadeIn 1s forwards; border-top: 1px solid rgba(184,134,11,0.3); position: relative; z-index: 1; }
      @keyframes kemetFadeIn { from{ opacity:0; transform:translateY(30px) scale(0.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
      .kemet-god { text-align: center; margin-bottom: 40px; position:relative; padding-bottom: 30px; border-bottom: 1px dashed rgba(212,175,55,0.4); }
      .kemet-god-icon { font-size: 5.5rem; color: #ffd700; margin-bottom: 15px; display:inline-block; filter: drop-shadow(0 0 30px rgba(255,215,0,0.6)); animation: floatGod 5s ease-in-out infinite; }
      @keyframes floatGod { 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-15px) scale(1.05); } }
      .kemet-god-name { font-size: 2.5rem; font-weight: 900; background: linear-gradient(to bottom, #ffffff, #d4af37); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; font-family:'Cinzel', serif; letter-spacing:4px; text-shadow: 0 5px 15px rgba(0,0,0,0.5); }
      .kemet-god-role { font-size: 1.15rem; color: #c5a059; font-weight: 300; letter-spacing: 1px; }

      .kemet-res-card { 
        background: linear-gradient(135deg, rgba(18,20,30,0.8), rgba(25,20,30,0.9)); 
        border: 1px solid rgba(212,175,55,0.3); 
        border-radius: 12px; padding: 30px; margin-bottom: 25px; 
        position: relative; overflow: hidden; backdrop-filter: blur(10px); text-align:left;
        box-shadow: 0 10px 20px rgba(0,0,0,0.5), inset 0 0 20px rgba(212,175,55,0.05);
        transition: transform 0.3s, box-shadow 0.3s;
      }
      .kemet-res-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.7), inset 0 0 30px rgba(212,175,55,0.15); border-color: rgba(212,175,55,0.6); }
      .kemet-res-card::before { content:''; position:absolute; top:0; left:0; width:4px; height:100%; background: #d4af37; }
      .kemet-res-card::after { content:'𓃀'; position:absolute; right:-10px; top:-10px; font-size:9rem; opacity:0.03; color:#ffd700; font-family:serif; pointer-events:none; filter:blur(1px); transition:all 1s;}
      .kemet-res-card:hover::after { opacity: 0.08; transform: scale(1.1) rotate(-5deg); }
      
      .kemet-r-label { display: flex; align-items: center; color: #e5c07b; font-weight: 900; font-size: 1.3rem; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid rgba(212,175,55,0.2); letter-spacing: 1px; }
      .kemet-r-label span { font-size: 1.5rem; margin-right: 10px; filter: drop-shadow(0 0 5px rgba(212,175,55,0.4)); }
      .kemet-r-text { font-size: 1.05rem; line-height: 1.8; color: #e2e8f0; word-break: keep-all; font-weight: 300; }

      .kemet-retry { width:100%; background:rgba(0,0,0,0.5); border:1px solid #d4af37; color:#d4af37; padding:20px; font-size:1.2rem; font-weight:900; border-radius:8px; cursor:pointer; margin-top:30px; transition:all 0.4s; letter-spacing: 2px; }
      .kemet-retry:hover { background:rgba(212,175,55,0.15); box-shadow:0 0 25px rgba(212,175,55,0.4); text-shadow: 0 0 10px #d4af37; }
      
      @media (max-width: 600px) {
        .kemet-input-group { flex-direction: column; }
        .kemet-btn { width: 100%; }
        .kemet-title { font-size: 2rem; }
        .kemet-eye-icon { font-size: 80px; }
      }

/* --- block 10 --- */
          .kcg-wrap {
            position:relative; width:100%; min-height:520px;
            display:flex; flex-direction:column; align-items:center;
          }
          .kcg-title-row {
            text-align:center; margin-bottom:18px;
          }
          .kcg-title-row h3 {
            color:#e5c07b; font-size:1.3rem; letter-spacing:3px; font-weight:900; margin-bottom:4px;
          }
          .kcg-title-row p { color:#9e8260; font-size:.85rem; letter-spacing:1px; }

          .kcg-action-btns {
            display:flex; gap:12px; justify-content:center; margin-bottom:24px; flex-wrap:wrap;
          }
          .kcg-btn {
            padding:11px 26px; border-radius:30px; font-weight:800;
            font-size:.95rem; cursor:pointer; letter-spacing:1px; border:none;
            transition:all .3s; position:relative; overflow:hidden;
          }
          .kcg-btn-shuffle {
            background:linear-gradient(135deg,#6b4c11,#d4af37,#6b4c11);
            background-size:200% auto; color:#000;
            box-shadow:0 4px 20px rgba(212,175,55,.4);
            border:1px solid #ffd700;
          }
          .kcg-btn-shuffle:hover { background-position:right center; box-shadow:0 6px 30px rgba(212,175,55,.7); transform:translateY(-2px); }
          .kcg-btn-reset {
            background:transparent; color:#9e8260;
            border:1px solid rgba(158,130,96,.4);
          }
          .kcg-btn-reset:hover { border-color:#d4af37; color:#d4af37; }

          /* 카드 아레나 */
          .kcg-arena {
            position:relative; width:340px; height:370px;
            margin:0 auto;
          }
          .kcg-card {
            position:absolute; width:70px; height:100px;
            border-radius:10px; cursor:pointer;
            transform-style:preserve-3d;
            will-change:transform,opacity;
            transition:box-shadow .25s;
          }
          .kcg-card-inner {
            position:relative; width:100%; height:100%;
            transform-style:preserve-3d;
            border-radius:10px;
          }
          .kcg-card-back {
            position:absolute; inset:0;
            background: linear-gradient(145deg,#1a1200, #2d2000, #1a1200);
            border:1px solid rgba(212,175,55,.5);
            border-radius:10px;
            display:flex; flex-direction:column; align-items:center; justify-content:center;
            backface-visibility:hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,.6), inset 0 0 20px rgba(212,175,55,.08);
            overflow:hidden;
          }
          .kcg-card-back::before {
            content:'';
            position:absolute; inset:4px;
            border:1px solid rgba(212,175,55,.2);
            border-radius:7px;
            background-image:
              radial-gradient(rgba(212,175,55,.12) 1px, transparent 1px);
            background-size:8px 8px;
          }
          .kcg-card-symbol {
            font-size:1.8rem; color:#d4af37; position:relative; z-index:1;
            text-shadow: 0 0 12px rgba(212,175,55,.8);
          }
          .kcg-card-num {
            font-size:.55rem; color:rgba(212,175,55,.5); position:relative; z-index:1; margin-top:2px; letter-spacing:1px;
          }
          /* 선택된 카드 강조 */
          .kcg-card.selected .kcg-card-back {
            border-color:#ffd700;
            box-shadow:0 0 25px rgba(255,215,0,.7), 0 0 50px rgba(255,215,0,.3), 0 4px 15px rgba(0,0,0,.6);
            background: linear-gradient(145deg,#2a1e00, #3d2d00, #2a1e00);
          }
          .kcg-card.selected .kcg-card-symbol {
            text-shadow: 0 0 20px #ffd700, 0 0 40px rgba(255,215,0,.6);
            animation: kcgOra 1.5s ease-in-out infinite alternate;
          }
          @keyframes kcgOra {
            from { filter:brightness(1); }
            to { filter:brightness(1.6) drop-shadow(0 0 8px #ffd700); }
          }
          /* hover ring */
          .kcg-card:not(.selected):not(.dissolving):hover .kcg-card-back {
            border-color:rgba(255,215,0,.6);
            box-shadow:0 0 18px rgba(255,215,0,.4), 0 4px 15px rgba(0,0,0,.6);
          }
          /* 뽑힌 선택 레이블 */
          .kcg-card .kcg-sel-badge { display:none; }
          .kcg-card.selected .kcg-sel-badge { display:none; }

          /* 선택 카운터 */
          .kcg-counter {
            text-align:center; color:#9e8260; font-size:.9rem;
            margin-bottom:14px; letter-spacing:1px; min-height:22px;
            transition:color .3s;
          }
          .kcg-counter.ready { color:#ffd700; font-weight:900; animation:kcgPulse .6s ease; }
          @keyframes kcgPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }

          /* shake */
          @keyframes kcgShake {
            0%,100%{transform:translateX(0) rotate(0)} 20%{transform:translateX(-6px) rotate(-2deg)} 60%{transform:translateX(6px) rotate(2deg)}
          }
          .kcg-card.shaking {
            animation: kcgShake .35s ease !important;
          }

          /* dissolve */
          @keyframes kcgDissolve {
            0% { opacity:1; transform:scale(1); filter:blur(0); }
            60% { opacity:.3; transform:scale(.85) translateY(15px); filter:blur(3px); }
            100% { opacity:0; transform:scale(.7) translateY(30px); filter:blur(8px); }
          }
          .kcg-card.dissolving {
            pointer-events:none;
            animation: kcgDissolve .9s forwards !important;
          }

          /* 지시 텍스트 */
          .kcg-hint {
            text-align:center; color:#9e8260; font-size:.82rem;
            letter-spacing:.5px; margin-top:14px; min-height:18px;
            transition:all .3s;
          }

/* --- block 11 --- */
      /* --- ILJU Dashboard v2 --- */
      .ilju-v2 {
        --ilju-accent: #2e7d32;
        --ilju-soft: #e8f5e9;
      }
      .ilju-v2-hero {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 14px;
        align-items: center;
        padding: 14px;
        border-radius: 14px;
        background: linear-gradient(160deg, #ffffff, #f8fafc);
        border: 1px solid #e2e8f0;
        margin-bottom: 12px;
      }
      .ilju-v2-kicker {
        margin: 0 0 4px 0;
        font-size: .74rem;
        font-weight: 700;
        color: #64748b;
        letter-spacing: .03em;
      }
      .ilju-v2-name {
        margin: 0;
        font-size: 1.5rem;
        line-height: 1.2;
        color: #0f172a;
        font-weight: 900;
      }
      .ilju-v2-hanja {
        font-size: .9rem;
        color: #475569;
        font-weight: 600;
        margin-left: 6px;
      }
      .ilju-v2-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 8px;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: .75rem;
        font-weight: 800;
        color: var(--ilju-accent);
        background: var(--ilju-soft);
        border: 1px solid #d7e2ea;
      }
      .ilju-v2-animal {
        width: 68px;
        height: 68px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        background: color-mix(in srgb, var(--ilju-soft) 80%, #ffffff);
        border: 1px solid #dbe5ef;
      }
      .ilju-v2-animal-label {
        margin-top: 5px;
        font-size: .72rem;
        color: #64748b;
        text-align: center;
      }
      .ilju-v2-keywords {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-bottom: 12px;
      }
      .ilju-v2-chip {
        display: inline-flex;
        align-items: center;
        padding: 5px 10px;
        border-radius: 999px;
        font-size: .77rem;
        font-weight: 700;
        color: #334155;
        background: #f1f5f9;
        border: 1px solid #e2e8f0;
      }
      .ilju-v2-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 12px;
      }
      .ilju-v2-block {
        padding: 12px;
        border-radius: 12px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
      }
      .ilju-v2-block-title {
        margin: 0 0 10px 0;
        font-size: .86rem;
        font-weight: 800;
        color: #334155;
      }
      .ilju-v2-bar-row {
        margin-bottom: 8px;
      }
      .ilju-v2-bar-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: .75rem;
        color: #64748b;
        margin-bottom: 3px;
      }
      .ilju-v2-bar-track {
        height: 7px;
        border-radius: 999px;
        background: #e2e8f0;
        overflow: hidden;
      }
      .ilju-v2-bar-fill {
        height: 100%;
        border-radius: 999px;
        width: 0;
        transition: width .45s ease;
      }
      .ilju-v2-bar-fill.wood { background: #2e7d32; }
      .ilju-v2-bar-fill.fire { background: #c62828; }
      .ilju-v2-bar-fill.earth { background: #8d6e63; }
      .ilju-v2-bar-fill.metal { background: #90a4ae; }
      .ilju-v2-bar-fill.water { background: #1565c0; }
      .ilju-v2-summary-list,
      .ilju-v2-detail-list,
      .ilju-v2-advice-list {
        margin: 0;
        padding-left: 18px;
        font-size: .84rem;
        line-height: 1.65;
        color: #334155;
      }
      .ilju-v2-toggle {
        width: 100%;
        min-height: 44px;
        border: none;
        border-radius: 12px;
        background: linear-gradient(135deg, #334155, #0f172a);
        color: #f8fafc;
        font-size: .82rem;
        font-weight: 800;
        cursor: pointer;
        margin: 2px 0 8px;
      }
      .ilju-v2-detail-wrap {
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.4s ease-out;
      }
      .ilju-v2-details-info {
        margin-top: 8px;
        font-size: .74rem;
        color: #64748b;
      }
      @media (max-width: 768px) {
        .ilju-v2-grid { grid-template-columns: 1fr; }
        .ilju-v2-name { font-size: 1.32rem; }
      }

      body.neo-mode .ilju-v2 .ilju-v2-hero,
      body.neo-mode .ilju-v2 .ilju-v2-block {
        background: rgba(15, 23, 42, 0.72);
        border-color: rgba(148, 163, 184, 0.28);
      }
      body.neo-mode .ilju-v2 .ilju-v2-name,
      body.neo-mode .ilju-v2 .ilju-v2-block-title {
        color: #f8fafc;
      }
      body.neo-mode .ilju-v2 .ilju-v2-kicker,
      body.neo-mode .ilju-v2 .ilju-v2-hanja,
      body.neo-mode .ilju-v2 .ilju-v2-bar-head,
      body.neo-mode .ilju-v2 .ilju-v2-animal-label,
      body.neo-mode .ilju-v2 .ilju-v2-details-info {
        color: #94a3b8;
      }
      body.neo-mode .ilju-v2 .ilju-v2-summary-list,
      body.neo-mode .ilju-v2 .ilju-v2-detail-list,
      body.neo-mode .ilju-v2 .ilju-v2-advice-list {
        color: #e2e8f0;
      }
      body.neo-mode .ilju-v2 .ilju-v2-chip {
        background: rgba(51, 65, 85, 0.5);
        border-color: rgba(148, 163, 184, 0.25);
        color: #e2e8f0;
      }
      body.neo-mode .ilju-v2 .ilju-v2-bar-track {
        background: rgba(51, 65, 85, 0.7);
      }

      /* --- SACRED MIRROR & TAROT NOIR THEME (NEO MODE) --- */
      body.neo-mode .sacred-mirror-card {
        background: radial-gradient(circle at 50% 0%, #1a1a2e 0%, #05050f 100%) !important;
        border: 1px solid rgba(212, 175, 55, 0.4) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(212, 175, 55, 0.05) !important;
        position: relative;
        overflow: hidden;
        color: #e2e8f0 !important;
        transform-style: preserve-3d;
        perspective: 1000px;
        transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.5s ease !important;
      }

      body.neo-mode .sacred-mirror-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="1" fill="rgba(212, 175, 55, 0.3)"/><circle cx="50" cy="50" r="1" fill="rgba(212, 175, 55, 0.2)"/></svg>');
        opacity: 0.5;
        pointer-events: none;
        z-index: 0;
      }
      
      body.neo-mode .sacred-mirror-card::after {
        content: '';
        position: absolute;
        top: -50%; left: -50%; right: -50%; bottom: -50%;
        background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 60%);
        opacity: 0;
        transition: opacity 0.5s ease;
        pointer-events: none;
        z-index: 0;
      }

      body.neo-mode .sacred-mirror-card:hover {
        transform: translateY(-5px) scale(1.02) !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9), 0 0 20px rgba(212, 175, 55, 0.2), inset 0 0 30px rgba(212, 175, 55, 0.1) !important;
      }

      /* 모바일 환경에서는 호버 시 스케일, 트랜스폼 효과를 줄이거나 제거하여 화면 깨짐/가로 스크롤 방지 */
      @media (max-width: 768px) {
        body.neo-mode .sacred-mirror-card:hover {
          transform: none !important;
        }
      }

      body.neo-mode .sacred-mirror-card:hover::after {
        opacity: 1;
        animation: pulseSacredGlow 3s infinite alternate;
      }

      @keyframes pulseSacredGlow {
        0% { transform: scale(0.8); opacity: 0.5; }
        100% { transform: scale(1.2); opacity: 0.8; }
      }

      body.neo-mode .sacred-mirror-card .ilju-sec-title {
        color: #dfc888 !important;
        border-bottom: 1px dashed rgba(212, 175, 55, 0.5) !important;
        text-shadow: 0 0 10px rgba(212, 175, 55, 0.4) !important;
        position: relative;
        z-index: 1;
      }
      body.neo-mode .sacred-mirror-card .ilju-name {
        color: #dfc888 !important;
        text-shadow: 0 0 8px rgba(212, 175, 55, 0.3) !important;
        letter-spacing: 1px;
      }
      body.neo-mode .sacred-mirror-card .ilju-toggle-btn { color: #a0aec0 !important; }
      body.neo-mode .sacred-mirror-card .ilju-symbol { color: #8b9bb4 !important; }
      body.neo-mode .sacred-mirror-card .ilju-summary { color: #f1f5f9 !important; }
      
      body.neo-mode .sacred-mirror-card .ilju-detail-inner {
        border-top-color: rgba(212, 175, 55, 0.3) !important;
        position: relative;
        z-index: 1;
      }
      body.neo-mode .sacred-mirror-card .ilju-detail-title { color: #cdb980 !important; }
      body.neo-mode .sacred-mirror-card .ilju-detail-text { color: #cbd5e1 !important; }
      
      body.neo-mode .sacred-mirror-card .ilju-advice-box {
        background: rgba(15, 23, 42, 0.6) !important;
        border-color: rgba(212, 175, 55, 0.3) !important;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5) !important;
      }
      body.neo-mode .sacred-mirror-card .ilju-advice-title { color: #dfc888 !important; }
      body.neo-mode .sacred-mirror-card .ilju-advice-text { color: #e2e8f0 !important; }
      body.neo-mode .sacred-mirror-card .ilju-details-info { color: #64748b !important; }

      /* Animation for detail reveal */
      @keyframes mistyReveal {
        0% { opacity: 0; filter: blur(4px); transform: translateY(10px); }
        100% { opacity: 1; filter: blur(0px); transform: translateY(0); }
      }
      body.neo-mode .sacred-mirror-card.open-detail .ilju-detail-inner {
        animation: mistyReveal 0.6s ease-out forwards;
      }
      
      /* Make sure content stays above glow effects */
      body.neo-mode .sacred-mirror-card * {
        position: relative;
        z-index: 1;
      }

/* --- block 12 --- */
      /* Mystic Tab System */
      .mystic-tab-nav {
        position: sticky;
        top: 0;
        z-index: 100;
        background: rgba(18, 18, 26, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(255, 215, 0, 0.4);
        display: flex;
        justify-content: center;
        gap: 10px;
        padding: 14px 20px;
        margin-bottom: 25px;
        overflow-x: auto;
        scrollbar-width: none;
        border-radius: 12px 12px 0 0;
      }
      .mystic-tab-nav::-webkit-scrollbar { display: none; }

      .mystic-tab-btn {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(215, 215, 215, 0.2);
        color: #a0aabf;
        padding: 12px 28px;
        border-radius: 30px;
        font-family: 'Gowun Batang', 'Pretendard', serif;
        font-size: 1.1rem;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
        transition: all 0.3s ease;
      }
      .mystic-tab-btn:hover {
        background: rgba(255, 215, 0, 0.1);
        color: #f1f5f9;
        border-color: rgba(255, 215, 0, 0.4);
      }
      .mystic-tab-btn.active {
        background: linear-gradient(135deg, rgba(255,215,0,0.25), rgba(255,215,0,0.05));
        border-color: rgba(255, 215, 0, 0.8);
        color: #FFD700;
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
      }
      .mystic-tab-btn:active {
        transform: scale(0.95);
        opacity: 0.85;
      }
      
      .mystic-tab-content {
        display: none;
        animation: fadeSlideIn 0.5s ease-out forwards;
      }
      .mystic-tab-content.active {
        display: block;
      }

      @keyframes fadeSlideIn {
        from { opacity: 0; transform: translateY(15px); }
        to { opacity: 1; transform: translateY(0); }
      }

      @media (max-width: 600px) {
        .mystic-tab-nav {
          justify-content: flex-start;
          padding: 12px 15px;
        }
        .mystic-tab-btn {
          padding: 10px 18px;
          font-size: 0.95rem;
        }
      }

/* --- block 13 --- */
        /* ══════════════════════════════════════
           거북점 — 수묵화 네오오리엔탈리즘 UI
        ══════════════════════════════════════ */
        @keyframes floatHex {
          0%, 100% { transform: translateY(0) scale(1); }
          50% { transform: translateY(-8px) scale(1.02); }
        }
        @keyframes pulseFade {
          0%, 100% { opacity: 0.4; }
          50% { opacity: 1; }
        }
        @keyframes spin {
          100% { transform: rotate(360deg); }
        }
        @keyframes candleFlicker {
          0%,100%{opacity:.85;transform:scaleY(1) scaleX(1);}
          25%{opacity:1;transform:scaleY(1.06) scaleX(.97);}
          50%{opacity:.78;transform:scaleY(.95) scaleX(1.03);}
          75%{opacity:.95;transform:scaleY(1.04) scaleX(.96);}
        }
        @keyframes inkBloom {
          0%{opacity:0;filter:blur(18px);transform:scale(.7);}
          60%{opacity:1;filter:blur(2px);transform:scale(1.04);}
          100%{opacity:1;filter:blur(0);transform:scale(1);}
        }
        @keyframes inkDrip {
          0%{clip-path:inset(0 0 100% 0);}
          100%{clip-path:inset(0 0 0% 0);}
        }
        @keyframes shellVibrate {
          0%,100%{transform:translate(0,0) rotate(0deg);}
          20%{transform:translate(-3px,1px) rotate(-1.5deg);}
          40%{transform:translate(3px,-2px) rotate(1deg);}
          60%{transform:translate(-2px,2px) rotate(-0.5deg);}
          80%{transform:translate(2px,-1px) rotate(1.5deg);}
        }
        @keyframes heatPulse {
          0%,100%{box-shadow:0 0 30px rgba(255,100,0,.3),0 0 60px rgba(255,50,0,.1);}
          50%{box-shadow:0 0 55px rgba(255,160,0,.55),0 0 100px rgba(255,80,0,.25);}
        }
        @keyframes crackGlow {
          0%,100%{filter:drop-shadow(0 0 3px rgba(255,200,0,.7));}
          50%{filter:drop-shadow(0 0 10px rgba(255,220,80,1));}
        }
        @keyframes resultFadeIn {
          from{opacity:0;transform:translateY(24px);}
          to{opacity:1;transform:translateY(0);}
        }
        @keyframes longPressRing {
          from{transform:translate(-50%,-50%) scale(.45);opacity:1;}
          to{transform:translate(-50%,-50%) scale(1.15);opacity:0;}
        }
        /* 외부 컨테이너 */
        /* bottom-sheet 애니메이션 */
        @keyframes tcPageIn {
          from { opacity: 0; transform: translateY(18px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        .tc-wrap {
          position: relative;
          background: radial-gradient(ellipse at 50% 30%, #1a0e06 0%, #0c0704 55%, #050200 100%);
          border-radius: 14px;
          overflow: visible;
          touch-action: pan-y;
          padding: 28px 20px 32px;
          font-family: 'Gowun Dodum', serif;
          color: #e8d9c0;
          min-height: auto;
          border: 1px solid rgba(180,120,30,.3);
          box-shadow: 0 0 60px rgba(180,100,20,.12), 0 4px 32px rgba(0,0,0,.6);
        }
        /* 목재 질감 오버레이 */
        .tc-wrap::before {
          content: '';
          position: absolute;
          inset: 0;
          background-image:
            repeating-linear-gradient(92deg, transparent 0, rgba(120,70,20,.04) 1px, transparent 2px),
            repeating-linear-gradient(180deg, transparent 0, rgba(80,40,10,.04) 2px, transparent 4px);
          pointer-events: none;
          z-index: 0;
        }
        /* 촛불 광원 */
        .tc-candle {
          position: absolute;
          border-radius: 50%;
          pointer-events: none;
          z-index: 1;
          animation: candleFlicker 3s ease-in-out infinite;
        }
        .tc-candle-l {
          width: 180px; height: 180px;
          top: -40px; left: -40px;
          background: radial-gradient(circle, rgba(255,180,60,.18) 0%, transparent 70%);
        }
        .tc-candle-r {
          width: 180px; height: 180px;
          top: -40px; right: -40px;
          background: radial-gradient(circle, rgba(255,150,40,.14) 0%, transparent 70%);
          animation-delay: .7s;
        }
        .tc-candle-bot {
          width: 240px; height: 200px;
          bottom: -60px; left: 50%;
          transform: translateX(-50%);
          background: radial-gradient(circle, rgba(255,120,20,.1) 0%, transparent 65%);
          animation-delay: 1.3s;
        }
        /* 헤더 */
        .tc-header {
          position: relative;
          z-index: 2;
          text-align: center;
          margin-bottom: 22px;
        }
        .tc-header-badge {
          display: inline-block;
          font-size: .72rem;
          letter-spacing: 3px;
          color: rgba(255,200,80,.6);
          text-transform: uppercase;
          margin-bottom: 6px;
        }
        .tc-header h2 {
          margin: 0 0 4px;
          font-size: 1.55rem;
          font-weight: 900;
          letter-spacing: 2px;
          color: #f5d98a;
          text-shadow: 0 0 18px rgba(255,200,60,.45), 0 2px 4px rgba(0,0,0,.8);
        }
        .tc-header p {
          margin: 0;
          font-size: .8rem;
          color: rgba(210,185,130,.65);
          line-height: 1.6;
        }
        /* 질문 입력 */
        .tc-question-row {
          position: relative;
          z-index: 2;
          display: flex;
          flex-direction: column;
          gap: 10px;
          margin-bottom: 22px;
        }
        .tc-question-label {
          font-size: .78rem;
          color: rgba(210,175,90,.7);
          letter-spacing: 1.5px;
        }
        .tc-question-inp {
          background: rgba(10,6,2,.65) !important;
          border: 1px solid rgba(180,130,40,.4) !important;
          color: #f0e0b0 !important;
          padding: 14px 16px !important;
          border-radius: 8px !important;
          font-size: .92rem !important;
          font-family: 'Gowun Dodum', serif !important;
          width: 100%;
          box-sizing: border-box;
          transition: border-color .3s, box-shadow .3s;
          outline: none;
        }
        .tc-question-inp:focus {
          border-color: rgba(255,200,60,.7) !important;
          box-shadow: 0 0 14px rgba(255,180,40,.15) !important;
        }
        .tc-question-inp::placeholder { color: rgba(180,145,70,.45) !important; }
        /* 거북 껍질 영역 */
        .tc-shell-area {
          position: relative;
          z-index: 2;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 20px;
        }
        .tc-shell-btn {
          position: relative;
          width: 180px;
          height: 180px;
          border-radius: 50%;
          background:
            radial-gradient(ellipse at 35% 30%, rgba(100,65,20,.9) 0%, rgba(50,30,8,.95) 55%, rgba(20,10,2,1) 100%);
          border: 2px solid rgba(160,110,30,.5);
          cursor: pointer;
          outline: none;
          -webkit-tap-highlight-color: transparent;
          touch-action: pan-y; /* 수직 스크롤 허용 — touchstart/touchend는 정상 발화 */
          transition: transform .2s, border-color .3s;
          box-shadow:
            inset 0 0 25px rgba(0,0,0,.6),
            inset 0 0 6px rgba(160,110,30,.2),
            0 6px 30px rgba(0,0,0,.7);
          overflow: hidden;
          user-select: none;
        }
        /* 결과 표시 중: 셸 버튼 비활성화 */
        .tc-wrap--answered .tc-shell-btn {
          pointer-events: none !important;
        }
        /* 결과 확인 중: 질문 입력·열기바·상태·버튼 영역 완전 숨김
           → touch-action:none 요소가 DOM에서 사라져 스크롤 100% 허용 */
        .tc-wrap--answered .tc-question-row,
        .tc-wrap--answered .tc-heat-bar-wrap,
        .tc-wrap--answered .tc-status-msg,
        .tc-wrap--answered .tc-shell-area {
          display: none !important;
        }
        .tc-shell-btn.heating {
          animation: shellVibrate .18s linear infinite, heatPulse 1.5s ease-in-out infinite;
          border-color: rgba(255,120,20,.7);
        }
        /* 껍질 위의 육각형 패턴 SVG */
        .tc-shell-pattern {
          position: absolute;
          inset: 0;
          opacity: .18;
          pointer-events: none;
        }
        .tc-shell-canvas {
          position: absolute;
          inset: 0;
          border-radius: 50%;
          pointer-events: none;
        }
        .tc-shell-label {
          position: relative;
          z-index: 2;
          font-size: .72rem;
          color: rgba(230,190,90,.7);
          letter-spacing: 2px;
          text-align: center;
          line-height: 1.6;
          pointer-events: none;
          transition: opacity .3s;
        }
        .tc-shell-btn.heating .tc-shell-label,
        .tc-shell-btn.cracked .tc-shell-label { opacity: 0; }
        /* 롱프레스 링 */
        .tc-press-ring {
          position: absolute;
          top: 50%; left: 50%;
          width: 160px; height: 160px;
          border-radius: 50%;
          border: 2px solid rgba(255,180,50,.55);
          transform: translate(-50%,-50%) scale(.45);
          pointer-events: none;
          opacity: 0;
        }
        .tc-press-ring.animate {
          animation: longPressRing 1s ease-out forwards;
        }
        /* 열기 프로그레스 바 */
        .tc-heat-bar-wrap {
          position: relative;
          z-index: 2;
          height: 6px;
          background: rgba(60,30,5,.5);
          border-radius: 3px;
          overflow: hidden;
          margin-bottom: 18px;
          display: none;
        }
        .tc-heat-bar {
          height: 100%;
          width: 0%;
          border-radius: 3px;
          background: linear-gradient(90deg, #b84000, #ff8c00, #ffe066);
          transition: width .1s linear;
          box-shadow: 0 0 8px rgba(255,140,0,.5);
        }
        /* 상태 메시지 */
        .tc-status-msg {
          position: relative;
          z-index: 2;
          text-align: center;
          font-size: .83rem;
          color: rgba(220,180,80,.75);
          letter-spacing: 1px;
          min-height: 20px;
          margin-bottom: 14px;
          transition: opacity .4s;
        }
        /* 결과 패널 */
        .tc-result {
          position: relative;
          z-index: 2;
          display: none;
          animation: resultFadeIn .7s ease-out;
          padding-bottom: 1.5rem;
          word-break: keep-all;
          overflow-wrap: break-word;
          overflow-x: hidden;
          /* 스크롤은 #juyukModalSheet 컨테이너가 전담 — 이중 스크롤 제거 */
        }
        .tc-result.show { display: block; }
        /* 맨 위로 버튼 */
        .tc-scroll-top-btn {
          display: block;
          margin: 20px auto 12px;
          background: rgba(20,10,2,.75);
          border: 1px solid rgba(200,150,40,.35);
          color: rgba(220,180,80,.75);
          font-family: 'Gowun Dodum', serif;
          font-size: .8rem;
          padding: 8px 22px;
          border-radius: 20px;
          cursor: pointer;
          touch-action: manipulation;
          -webkit-tap-highlight-color: transparent;
          letter-spacing: 1.5px;
          transition: background .2s, border-color .2s, color .2s;
        }
        .tc-scroll-top-btn:hover, .tc-scroll-top-btn:active {
          background: rgba(50,25,5,.95);
          border-color: rgba(255,200,60,.55);
          color: rgba(255,210,100,.9);
        }
        /* 먹물 번짐 헥사그램 */
        .tc-ink-hex {
          text-align: center;
          font-size: 5.8rem;
          color: #f5d060;
          line-height: 1;
          margin: 0 0 6px;
          animation: inkBloom .9s cubic-bezier(.2,.8,.3,1) both, floatHex 5s ease-in-out 1s infinite;
          text-shadow:
            0 0 30px rgba(255,220,60,.7),
            0 0 70px rgba(255,160,20,.3);
          filter: drop-shadow(0 0 12px rgba(255,200,40,.6));
          font-family: monospace;
        }
        .tc-ink-name {
          text-align: center;
          font-size: 1.45rem;
          font-weight: 900;
          color: #f5d98a;
          letter-spacing: 4px;
          margin-bottom: 4px;
          animation: inkBloom 1s .15s both;
          text-shadow: 0 0 20px rgba(255,200,60,.4);
        }
        /* 먹물 번짐 효과 컨테이너 */
        .tc-ink-bloom-wrap {
          position: relative;
          background: radial-gradient(ellipse at 50% 50%, rgba(255,200,50,.06) 0%, transparent 65%);
          border-radius: 14px;
          padding: 22px 16px 18px;
          margin-bottom: 16px;
          overflow: hidden;
        }
        .tc-ink-bloom-wrap::before {
          content: '';
          position: absolute;
          inset: 0;
          background:
            radial-gradient(ellipse at 20% 80%, rgba(80,40,0,.25) 0%, transparent 55%),
            radial-gradient(ellipse at 80% 20%, rgba(80,40,0,.2) 0%, transparent 50%);
          pointer-events: none;
        }
        /* SVG 먹물 번짐 필터 */
        .tc-ink-filter { position: absolute; width: 0; height: 0; }
        /* 상괘/하괘 행 */
        .tc-trigram-row {
          display: flex;
          justify-content: center;
          gap: 28px;
          margin-bottom: 20px;
          animation: resultFadeIn .8s .2s both;
        }
        .tc-trigram-box {
          text-align: center;
          padding: 10px 16px;
          background: rgba(0,0,0,.35);
          border-radius: 10px;
          border: 1px solid rgba(180,140,40,.25);
          min-width: 100px;
          transition: background .3s;
        }
        .tc-trigram-box:hover { background: rgba(0,0,0,.5); }
        .tc-trigram-label { font-size: .72rem; color: rgba(200,165,70,.6); margin-bottom: 4px; }
        .tc-trigram-name { color: #f0a030; font-weight: 700; font-size: .95rem; }
        .tc-sep { width: 1px; background: rgba(200,160,50,.2); align-self: stretch; }
        /* 섹션 블록 */
        .tc-section {
          background: rgba(8,4,0,.45);
          border: 1px solid rgba(150,100,20,.2);
          border-radius: 10px;
          padding: 14px 16px;
          margin-bottom: 14px;
          line-height: 1.78;
          font-size: .9rem;
          color: #d4c4a0;
          animation: inkDrip .6s ease-out both;
        }
        .tc-section-title {
          color: #e0a840;
          font-weight: 700;
          font-size: .92rem;
          display: flex;
          align-items: center;
          gap: 6px;
          margin-bottom: 8px;
          padding-bottom: 6px;
          border-bottom: 1px dashed rgba(200,150,40,.25);
        }
        .tc-oracle-quote {
          background: rgba(255,200,50,.04);
          border-left: 3px solid rgba(255,180,40,.5);
          padding: 10px 14px;
          margin: 10px 0;
          font-style: italic;
          color: #e8d5a0;
          font-size: .9rem;
        }
        /* 카테고리 그리드 */
        .tc-cat-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 10px;
          margin-top: 14px;
          animation: resultFadeIn .8s .4s both;
        }
        @media(max-width:480px){.tc-cat-grid{grid-template-columns:1fr;}}
        .tc-cat-item {
          background: rgba(12,6,1,.5);
          border: 1px solid rgba(160,110,25,.2);
          border-radius: 9px;
          padding: 12px 13px;
          transition: border-color .3s, background .3s;
        }
        .tc-cat-item:hover {
          border-color: rgba(220,170,40,.4);
          background: rgba(20,10,2,.65);
        }
        .tc-cat-badge {
          font-size: .75rem;
          color: #e8b840;
          font-weight: 700;
          letter-spacing: .5px;
          margin-bottom: 7px;
        }
        .tc-cat-desc {
          font-size: .83rem;
          color: #c4b090;
          line-height: 1.65;
        }
        .tc-divider {
          height: 1px;
          background: linear-gradient(90deg, transparent, rgba(200,160,50,.35), transparent);
          margin: 16px 0;
        }
        /* 다시점치기 버튼 */
        .tc-redo-btn {
          display: block;
          width: 100%;
          margin-top: 18px;
          padding: 13px;
          background: linear-gradient(135deg, rgba(80,45,5,.8), rgba(40,20,2,.9));
          border: 1px solid rgba(200,150,30,.45);
          border-radius: 9px;
          color: #f0d070;
          font-size: .92rem;
          font-family: 'Gowun Dodum', serif;
          font-weight: 700;
          letter-spacing: 1.5px;
          cursor: pointer;
          transition: background .3s, box-shadow .3s;
          animation: resultFadeIn .8s .6s both;
          position: relative;
          z-index: 2;
          touch-action: manipulation;
          -webkit-tap-highlight-color: transparent;
        }
        .tc-redo-btn:hover {
          box-shadow: 0 0 20px rgba(255,180,30,.2);
          background: linear-gradient(135deg, rgba(100,55,8,.85), rgba(55,28,4,.95));
        }
        /* 홈으로 버튼 */
        .tc-home-btn {
          display: block;
          width: 100%;
          margin-top: 10px;
          padding: 13px;
          background: transparent;
          border: 1px solid rgba(180,130,30,.3);
          border-radius: 9px;
          color: rgba(220,185,80,0.7);
          font-size: .88rem;
          font-family: 'Gowun Dodum', serif;
          font-weight: 700;
          letter-spacing: 1.5px;
          cursor: pointer;
          transition: background .3s, border-color .3s, color .3s;
          animation: resultFadeIn .8s .75s both;
          position: relative;
          z-index: 2;
          touch-action: manipulation;
          -webkit-tap-highlight-color: transparent;
        }
        .tc-home-btn:hover, .tc-home-btn:active {
          background: rgba(40,22,2,0.6);
          border-color: rgba(220,175,50,.5);
          color: rgba(255,210,100,0.9);
        }
        /* 신탁 공유하기 버튼 */
        .tc-share-btn {
          display: block;
          width: 100%;
          margin-top: 12px;
          padding: 12px;
          background: linear-gradient(135deg, rgba(30,20,50,.88), rgba(15,8,32,.95));
          border: 1px solid rgba(180,120,220,.45);
          border-radius: 9px;
          color: #d4a8f0;
          font-size: .88rem;
          font-family: 'Gowun Dodum', serif;
          font-weight: 700;
          letter-spacing: 1.5px;
          cursor: pointer;
          transition: background .3s, box-shadow .3s;
          animation: resultFadeIn .8s .55s both;
          position: relative;
          z-index: 2;
          touch-action: manipulation;
          -webkit-tap-highlight-color: transparent;
        }
        .tc-share-btn:hover {
          box-shadow: 0 0 18px rgba(180,80,220,.25);
          background: linear-gradient(135deg, rgba(45,28,70,.92), rgba(25,12,48,.98));
        }
        /* 질문 답변 블록 */
        .tc-answer-block {
          background: linear-gradient(135deg, rgba(60,35,5,.55), rgba(20,10,1,.7));
          border: 1px solid rgba(220,170,50,.3);
          border-radius: 10px;
          padding: 16px;
          margin-top: 14px;
          animation: inkBloom .9s .3s both;
        }
        .tc-answer-title {
          font-size: .8rem;
          color: rgba(255,200,80,.7);
          letter-spacing: 2px;
          margin-bottom: 10px;
          text-transform: uppercase;
        }
        .tc-answer-text {
          font-size: .92rem;
          color: #e0d0a8;
          line-height: 1.82;
        }
        .tc-answer-text strong { color: #f5d060; }

        /* 입력부 폼 (iching-inp 하위호환) */
        .iching-input-wrap input.iching-inp {
          background: rgba(0,0,0,0.4) !important;
          border: 1px solid rgba(255,215,0,.3) !important;
          color: #fff !important;
          padding: 16px !important;
          border-radius: 10px !important;
          font-size: .95rem !important;
          transition: all .3s;
          width: 100%;
          box-sizing: border-box;
        }
        .iching-input-wrap input.iching-inp:focus {
            border-color: #FFD700 !important;
            box-shadow: 0 0 10px rgba(255, 215, 0, 0.2) !important;
            outline: none;
            background: rgba(0, 0, 0, 0.6) !important;
          }
        /* (iching-btn / iching-result-box 하위호환 — 신규 UI는 tc-* 클래스 사용) */
        .iching-btn { display: none; }
        .iching-result-box { display: none; }

/* --- block 14 --- */
        .astro-card {
          margin-bottom: 25px;
          border-radius: 20px;
          background: linear-gradient(135deg, #12121a 0%, #1e1e2f 100%);
          border: 1px solid rgba(125, 42, 232, 0.4);
          padding: 0;
          color: #e0e0e0;
          box-shadow: 0 10px 40px rgba(0,0,0,0.8), inset 0 0 20px rgba(125,42,232,0.1);
          font-family: 'Gowun Dodum', 'Pretendard', sans-serif;
          position: relative;
          overflow: hidden;
        }
        .astro-header { 
          background: linear-gradient(135deg, #1e003b, #300063);
          padding: 18px 24px; font-weight: 800; color: #d1c4e9; font-size: 1.3rem; 
          display: flex; align-items: center; justify-content: center; letter-spacing: 1px;
          border-bottom: 1px dashed rgba(125,42,232,0.6);
        }
        .astro-body { padding: 24px; display: grid; gap: 24px; }
        .astro-section { 
          background: rgba(0,0,0,0.35); padding: 20px; border-radius: 16px; 
          border-left: 5px solid #7d2ae8; display: flex; flex-direction: column; gap: 12px;
          box-shadow: 0 4px 15px rgba(0,0,0,0.4);
        }
        .astro-subhead { 
          display: flex; align-items: center; font-weight: bold; color: #ea80fc; 
          font-size: 1.2rem; border-bottom: 1px dashed rgba(234,128,252,0.3); 
          padding-bottom: 8px; margin-bottom: 5px;
        }
        .astro-planet { color: #f48fb1; font-weight: 800; display: inline-flex; align-items: center; }
        .astro-sign { color: #90caf9; font-weight: 800; }
        .astro-house { color: #a5d6a7; font-weight: 800; }
        .astro-desc { 
          font-size: 0.98rem; line-height: 1.7; color: #cfd8dc; text-align: left; 
          letter-spacing: 0.2px; word-break: keep-all; 
        }
        .astro-tags { display: flex; gap: 10px; margin-top: 5px; flex-wrap: wrap; align-items: center; }
        .astro-tag { background: rgba(125,42,232,0.25); color: #e1bee7; padding: 6px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: bold; border:1px solid rgba(125,42,232,0.4); display: flex; align-items: center; }
        .astro-core { 
          background: linear-gradient(90deg, rgba(125,42,232,0.15), rgba(0,0,0,0)); 
          padding: 15px; border-radius: 12px; font-style: italic; color:#ce93d8; margin-top: 10px;
          border-left: 3px solid #ce93d8; line-height: 1.6;
        }
        .astro-expert {
          margin-top: 10px; padding: 20px; border-radius: 16px; background: rgba(255,255,255,0.03);
          border: 1px solid rgba(255,255,255,0.1);
        }
        .expert-title { font-size: 1.15rem; color: #ffeb3b; font-weight: bold; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; border-bottom: 2px solid rgba(255,235,59,0.3); padding-bottom: 8px;}
        .expert-msg { display: flex; flex-direction: column; gap: 18px; }
        .neo-bubble { background: rgba(33, 150, 243, 0.1); padding: 16px; border-radius: 0 16px 16px 16px; border-left: 4px solid #2196f3; color: #e3f2fd; line-height: 1.6; font-size: 0.95rem; }
        .yeon-bubble { background: rgba(233, 30, 99, 0.1); padding: 16px; border-radius: 16px 16px 0 16px; border-right: 4px solid #e91e63; color: #fce4ec; line-height: 1.6; font-size: 0.95rem; text-align: right; margin-left: 30px;}
        .aspect-hl { color: #ffab40; font-weight: 800; font-style: normal; }

/* --- block 15 --- */
/* -----------------------------------------------------------
   ASTRAL DESIGN SYSTEM
   ----------------------------------------------------------- */
:root {
    --gold: #D4AF37;
    --gold-dim: rgba(212, 175, 55, 0.3);
    --deep-space: #0f172a;
    --starlight: rgba(255, 255, 255, 0.8);
}

.astral-modal-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background: radial-gradient(circle at center, #1a1a2e 0%, #000000 100%);
    backdrop-filter: blur(10px);
    overflow-y: auto;
  overscroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
    font-family: 'Noto Sans KR', sans-serif;
}

.astral-container {
    width: 100%; max-width: 480px;
  min-height: 100dvh; /* Dynamic Viewport Height — iOS Safari 하단 UI 바 대응 */
  min-height: 100vh;  /* 폴백 */
    margin: 0 auto; position: relative;
    background: linear-gradient(180deg, rgba(15,23,42,0.95) 0%, rgba(10,10,15,1) 100%);
    border-left: 1px solid rgba(255,255,255,0.05);
    border-right: 1px solid rgba(255,255,255,0.05);
  box-sizing: border-box;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

/* Animations */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes shine { 0% { background-position: -200%; } 100% { background-position: 200%; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.astral-close-btn {
    position: absolute; top: 20px; right: 20px;
    background: none; border: 1px solid rgba(255,255,255,0.2);
    color: var(--starlight); width: 40px; height: 40px; border-radius: 50%;
    font-size: 1.2rem; cursor: pointer; z-index: 100;
}

.astral-header {
    text-align: center; padding: 60px 20px 30px;
}

.astral-title {
    font-family: 'Cinzel', serif; font-size: clamp(2rem, 5vw, 2.5rem);
    color: var(--gold); margin: 0;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
    letter-spacing: 4px;
}

.astral-subtitle {
    font-family: 'Noto Sans KR', sans-serif; font-size: 0.9rem;
    color: rgba(255,255,255,0.5); margin-top: 10px; letter-spacing: 1px;
}

/* Grid System */
.astral-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  padding: 0 20px 16px;
}

/* New Card Design */
.totem-card {
    position: relative; aspect-ratio: 0.8; 
  background:
    radial-gradient(120% 120% at 14% 8%, rgba(212,175,55,0.16) 0%, rgba(212,175,55,0.02) 36%, rgba(255,255,255,0.01) 60%),
    linear-gradient(160deg, rgba(16,22,42,0.92) 0%, rgba(12,20,36,0.96) 48%, rgba(9,14,30,0.98) 100%);
  border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px; overflow: hidden;
  cursor: pointer;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  padding: 10px 8px 8px;
  touch-action: pan-y;
}

.totem-card::before {
  content: '';
  position: absolute;
  inset: -40% -25% auto auto;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(212,175,55,0.2) 0%, rgba(212,175,55,0.04) 42%, transparent 72%);
  transform: rotate(12deg);
  pointer-events: none;
}

.totem-card:hover {
  transform: translateY(-5px) scale(1.025);
  border-color: rgba(212, 175, 55, 0.52);
  box-shadow: 0 14px 26px rgba(0,0,0,0.45), 0 0 0 1px rgba(212,175,55,0.18) inset;
}

.totem-card.selected {
  border: 1px solid rgba(212,175,55,0.95);
  background:
    radial-gradient(130% 130% at 20% 8%, rgba(212,175,55,0.26) 0%, rgba(212,175,55,0.06) 42%, rgba(255,255,255,0.02) 66%),
    linear-gradient(160deg, rgba(19,24,40,0.98) 0%, rgba(13,20,34,0.98) 100%);
  box-shadow: 0 0 22px rgba(212, 175, 55, 0.28), inset 0 0 0 1px rgba(212,175,55,0.22);
}

/* Card Content Layout */
.totem-card .totem-icon { 
  font-size: 2.25rem;
  margin-bottom: 7px;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.35));
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 2;
}
.totem-card:hover .totem-icon { transform: scale(1.15) rotate(5deg); }

.totem-card .totem-icon::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%) rotate(0deg);
  border-radius: 50%;
  border: 1px solid rgba(255,225,160,0.22);
  box-shadow: inset 0 0 10px rgba(255,225,160,0.12), 0 0 12px rgba(212,175,55,0.08);
  opacity: 0;
  pointer-events: none;
}

.totem-card.selected .totem-icon::before {
  opacity: 1;
  animation: totemOrbit 4.8s linear infinite;
}

.totem-card--nf.selected .totem-icon::before {
  border-color: rgba(165, 214, 167, 0.55);
  box-shadow: inset 0 0 10px rgba(165,214,167,0.22), 0 0 14px rgba(165,214,167,0.32);
}
.totem-card--nt.selected .totem-icon::before {
  border-color: rgba(144, 202, 249, 0.58);
  box-shadow: inset 0 0 10px rgba(144,202,249,0.22), 0 0 14px rgba(144,202,249,0.34);
}
.totem-card--sj.selected .totem-icon::before {
  border-color: rgba(176, 190, 197, 0.6);
  box-shadow: inset 0 0 10px rgba(176,190,197,0.24), 0 0 14px rgba(176,190,197,0.34);
}
.totem-card--sp.selected .totem-icon::before {
  border-color: rgba(255, 204, 128, 0.6);
  box-shadow: inset 0 0 10px rgba(255,204,128,0.24), 0 0 14px rgba(255,204,128,0.35);
}

@keyframes totemOrbit {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .totem-card.selected .totem-icon::before {
  animation: none;
  }
}

.totem-card .totem-code {
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.9);
  margin-bottom: 4px;
  text-shadow: 0 1px 8px rgba(255,255,255,0.12);
}

.totem-card .totem-title {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 0.64rem;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255,255,255,0.62);
  text-align: center;
  padding: 0 6px;
}
.totem-card.selected .totem-title { color: rgba(255,255,255,0.95); }

/* Checkmark Badge for Selected State */
.totem-card::after {
    content: '✓';
    position: absolute; top: 8px; right: 8px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--gold); color: #000;
    font-size: 0.8rem; font-weight: bold;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: scale(0); transition: all 0.3s ease;
}
.totem-card.selected::after { opacity: 1; transform: scale(1); }

/* Info Button on Card */
.totem-info-btn {
    position: absolute; bottom: 7px; right: 7px;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.3) 0%, rgba(212,175,55,0.18) 32%, rgba(80,56,20,0.5) 100%);
  border: 1px solid rgba(212,175,55,0.45);
  color: rgba(255,230,165,0.95);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.72rem;
  cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease;
  z-index: 5; padding: 0;
    line-height: 1;
  box-shadow: 0 0 0 1px rgba(255,214,120,0.15) inset, 0 4px 10px rgba(0,0,0,0.35);
}

.totem-info-btn::before {
  content: '';
  position: absolute;
  inset: -8px;
}

.totem-info-btn:hover {
  border-color: rgba(255,224,140,0.95);
  color: #fff6d6;
  transform: scale(1.14);
  box-shadow: 0 0 14px rgba(212,175,55,0.42), 0 0 0 1px rgba(255,214,120,0.28) inset;
}

.totem-info-btn .totem-info-glyph {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  transform: translateY(-0.4px);
}

/* Ritual Bar - Refined */
.astral-ritual-bar {
  position: relative;
  bottom: auto;
  margin: 0 20px 18px;
    transform: translateY(14px);
  width: calc(100% - 40px);
    min-width: 0;
    background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 50px;
    padding: 8px 12px 8px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 15px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.5); z-index: 1000;
    opacity: 0; pointer-events: none;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.astral-ritual-bar.active {
    opacity: 1; transform: translateY(0); pointer-events: auto;
}

@media (max-width: 640px) {
  .astral-container { max-width: 100%; border-left: 0; border-right: 0; }
  .astral-header { padding: 56px 16px 20px; }
  .astral-grid { gap: 16px; padding: 0 14px 16px; }
  .astral-ritual-bar {
    margin: 0 14px 16px;
    width: calc(100% - 28px);
    border-radius: 18px;
    padding: 8px 10px;
    gap: 10px;
  }
  .ritual-btn { padding: 10px 14px; font-size: 0.84rem; min-height: 44px; }
}

.selected-tokens { display: flex; align-items: center; gap: 8px; }
.mini-token { 
    width: 36px; height: 36px; border-radius: 50%; 
    background: rgba(255,255,255,0.05); 
    border: 1px solid rgba(255,255,255,0.1); 
    display: flex; align-items: center; justify-content: center; 
    font-size: 1.1rem; color: rgba(255,255,255,0.3);
    transition: all 0.3s ease;
}
.mini-token.filled {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--gold);
    color: #fff;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

.ritual-btn {
    background: #fff; color: #000; border: none; 
    padding: 10px 24px; font-family: 'Noto Sans KR', sans-serif; font-weight: 800; font-size: 0.9rem;
  min-height: 44px;
    border-radius: 40px; cursor: pointer;
    box-shadow: 0 4px 15px rgba(255,255,255,0.15);
    transition: all 0.2s ease;
}
.ritual-btn:disabled {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.3);
    box-shadow: none; cursor: not-allowed;
}
.ritual-btn:not(:disabled):hover { 
    transform: scale(1.05); 
    box-shadow: 0 6px 20px rgba(255,255,255,0.25);
}

/* Result Modal */
.astral-result-layer {
    position: absolute; inset: 0; 
    background: #0f172a; overflow-y: auto; z-index: 2000;
    padding: 20px; animation: fadeIn 0.5s ease-out;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.result-content { max-width: 100%; margin: 0 auto; color: #fff; padding-bottom: 50px; }
.back-btn {
    background: none; border: none; color: rgba(255,255,255,0.6);
    font-size: 0.9rem; margin-bottom: 20px; cursor: pointer;
    display: flex; align-items: center; gap: 5px;
}
.back-btn:hover { color: var(--gold); }

/* Typography for Content */
.res-header { text-align: center; margin-bottom: 40px; padding-top: 20px; }
.res-icon { font-size: 4rem; display: block; margin-bottom: 10px; animation: float 3s ease-in-out infinite; }
.res-title { font-family: 'Cinzel', serif; font-size: 2rem; color: var(--gold); margin-bottom: 5px; }
.res-mbti { font-size: 1rem; color: rgba(255,255,255,0.4); letter-spacing: 2px; }
.res-header--compact { margin-bottom: 20px; }
.res-title--bright { font-size: 1.8rem; letter-spacing: 3px; color: #fff; text-shadow: 0 2px 10px rgba(255,215,0,0.5); }
.res-mbti--badge { font-size: 0.85rem; margin-top: 8px; opacity: 0.8; letter-spacing: 1px; background: rgba(0,0,0,0.3); display: inline-block; padding: 5px 15px; border-radius: 20px; }
.res-and { opacity: .5; }

.res-token-row { display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 15px; }
.res-token-col { text-align: center; }
.res-token-animal { font-size: 2.8rem; margin-bottom: 5px; text-shadow: 0 0 15px rgba(255,255,255,0.4); }
.res-token-code { font-size: 0.8rem; font-weight: 700; color: var(--gold); border: 1px solid var(--gold); padding: 2px 8px; border-radius: 12px; }
.res-token-vs { font-size: 1.5rem; opacity: 0.5; padding-bottom: 15px; color: #FFD700; }

.res-section { margin-bottom: 35px; position: relative; padding-left: 20px; border-left: 1px solid var(--gold-dim); }
.res-label { font-size: 0.85rem; color: var(--gold); font-weight: 700; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; }
.res-text { font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,0.9); text-align: justify; }
.res-label--center { text-align: center; color: rgba(255,215,0,0.8); font-size: 0.8rem; letter-spacing: 2px; margin-bottom: 12px; font-weight: 700; }
.res-text--keyword { text-align: center; font-weight: 900; font-family: 'Cinzel', serif; font-size: 1.5rem; color: #fff; line-height: 1.4; text-shadow: 0 0 10px rgba(255,255,255,0.3); }

.synergy-box { 
    background: linear-gradient(135deg, rgba(212,175,55,0.1), transparent);
    border: 1px solid var(--gold-dim); border-radius: 12px; padding: 25px; margin-top: 40px;
}
.synergy-box--premium {
    background: linear-gradient(145deg, rgba(255,215,0,0.1), rgba(0,0,0,0.3));
    border: 1px solid rgba(255,215,0,0.3);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    margin-bottom: 25px;
    margin-top: 0;
    border-radius: 15px;
}

.res-grid-stack { display: grid; gap: 20px; text-align: left; }
.res-section-card {
  border: 1px solid rgba(255,255,255,0.1);
  padding: 20px;
  border-radius: 12px;
  margin: 0;
  position: relative;
  overflow: hidden;
}
.res-section-head {
  font-weight: 900;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.res-section-icon { font-size: 1.2rem; }
.res-section-body { font-size: 0.95rem; opacity: 0.95; line-height: 1.7; }

.res-section-card--stats { background: rgba(0,0,0,0.2); }
.res-section-card--stats .res-section-head { color: #a0f0ff; }

.res-section-card--light {
  border-color: rgba(129,199,132,0.3);
  background: linear-gradient(135deg, rgba(30,50,30,0.5), rgba(0,0,0,0.4));
  box-shadow: inset 0 0 20px rgba(129,199,132,0.05);
}
.res-section-card--light .res-section-head { color: #81C784; }
.res-section-card--light .res-section-body { color: #e8f5e9; }

.res-section-card--shadow {
  border-color: rgba(229,115,115,0.3);
  background: linear-gradient(135deg, rgba(60,30,30,0.5), rgba(0,0,0,0.4));
  box-shadow: inset 0 0 20px rgba(229,115,115,0.05);
}
.res-section-card--shadow .res-section-head { color: #E57373; }
.res-section-card--shadow .res-section-body { color: #ffebee; }

.res-section-card--key {
  border-color: rgba(255,215,0,0.3);
  background: linear-gradient(135deg, rgba(50,40,10,0.5), rgba(0,0,0,0.4));
}
.res-section-card--key .res-section-head,
.res-section-card--key .res-section-body { color: #fff8e1; position: relative; z-index: 1; }
.res-watermark {
  position: absolute;
  right: -20px;
  top: -20px;
  font-size: 5rem;
  opacity: 0.05;
  pointer-events: none;
}

.synergy-stat-row { display: flex; justify-content: space-between; margin-bottom: 8px; }
.synergy-stat-row:last-child { margin-bottom: 0; }
.synergy-stat-label { color: #b0c4de; font-size: 0.85rem; }
.synergy-stat-value { color: #FFD700; font-size: 0.9rem; }
.synergy-stat-value--match { color: #00ff41; font-weight: 700; font-family: monospace; }

.ritual-btn--reset {
  width: 100%;
  margin-top: 40px;
  background: linear-gradient(45deg, #111, #222);
  border: 1px solid #FFD700;
  color: #FFD700;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 15px;
  border-radius: 8px;
  text-transform: uppercase;
  transition: all 0.3s;
}
.ritual-btn--reset:hover {
  background: #FFD700;
  color: #000;
}

.res-spacer {
    height: 40px;
}

/* ── Ritual Animation (Enhanced) ── */
.astral-ritual-stage {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #000;
    z-index: 1500;
    overflow: hidden;
}

.ritual-bg-glow {
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 40%, rgba(80,0,120,0.5) 0%, transparent 65%);
    opacity: 0; transition: opacity 1s;
}
.ritual-bg-glow.active { opacity: 1; }

.ritual-flash {
    position: absolute; inset: 0;
    background: #fff;
    opacity: 0; pointer-events: none;
    z-index: 10;
}

.ritual-particles {
    position: absolute; inset: 0;
    pointer-events: none;
}

.ritual-particle {
    position: absolute; border-radius: 50%;
    animation: particleFly 1.2s ease-out forwards;
}

@keyframes particleFly {
    0%   { transform: translate(0,0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

.soul-mirror {
    width: 180px; height: 180px; border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #1a1435, #000);
    border: 2px solid var(--gold);
    box-shadow: 0 0 40px rgba(212,175,55,0.4), inset 0 0 25px rgba(212,175,55,0.15);
    position: relative; overflow: hidden;
    margin-bottom: 40px; flex-shrink: 0;
    transition: box-shadow 0.5s, transform 0.5s;
}

.soul-mirror.explode {
    transform: scale(1.4);
    box-shadow: 0 0 120px rgba(212,175,55,1), 0 0 200px rgba(180,80,255,0.7), inset 0 0 60px rgba(255,255,255,0.4);
}

.mirror-surface {
    position: absolute; inset: 0;
    background: linear-gradient(45deg, transparent 35%, rgba(255,255,255,0.25) 50%, transparent 65%);
    background-size: 250% 250%;
    animation: shine 2.5s infinite linear;
}

.mirror-inner-ani {
    position: absolute; inset: 8px; border-radius: 50%;
    background: conic-gradient(rgba(212,175,55,0.3), transparent, rgba(180,80,255,0.3), transparent, rgba(212,175,55,0.3));
    opacity: 0; transition: opacity 0.6s;
    animation: spinConic 3s linear infinite;
}
.mirror-inner-ani.active { opacity: 1; }

@keyframes spinConic { to { transform: rotate(360deg); } }

.ritual-token {
    font-size: 4.5rem;
    position: absolute;
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.5));
    transition: all 0s;
    will-change: transform, left, top, opacity;
}

  .ritual-token--left,
  .ritual-token--right {
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.6));
  }

.ritual-message {
    font-family: 'Cinzel', serif; color: var(--gold);
    font-size: 1.1rem; opacity: 0; margin-top: 10px;
    transition: opacity 0.5s;
    text-align: center; letter-spacing: 1px;
    text-shadow: 0 0 15px rgba(212,175,55,0.7);
}

.ritual-sub-msg {
    font-family: 'Noto Sans KR', sans-serif; 
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem; margin-top: 8px; opacity: 0;
    transition: opacity 0.5s; text-align: center;
}

/* ── Individual MBTI Detail Sheet ── */
.mbti-detail-sheet {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, #0a0a1a 0%, #100825 100%);
    z-index: 2100; overflow-y: auto;
    padding: 0 0 40px;
    animation: slideUpSheet 0.4s cubic-bezier(0.22,1,0.36,1);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: auto;
}

@keyframes slideUpSheet {
    from { transform: translateY(30px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.mbti-sheet-hero {
    position: relative; padding: 60px 24px 30px;
    text-align: center; overflow: hidden;
}

.mbti-sheet-hero--aurora {
  background: linear-gradient(135deg, rgba(10,10,30,0.95) 0%, rgba(20,10,35,0.95) 100%);
}

.mbti-sheet-hero-bg {
    position: absolute; inset: 0;
    opacity: 0.12;
    background-size: cover; background-position: center;
}

.mbti-sheet-close {
    position: absolute; top: 20px; left: 20px;
    background: rgba(255,255,255,0.08); border: none; 
    color: #fff; width: 44px; height: 44px; border-radius: 50%;
    font-size: 1.1rem; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
}

.mbti-sheet-icon { font-size: 5rem; line-height: 1; margin-bottom: 12px; display: block;
    filter: drop-shadow(0 0 20px rgba(255,255,255,0.3));
}

.mbti-sheet-code {
    display: inline-block; background: rgba(212,175,55,0.15);
    border: 1px solid rgba(212,175,55,0.4); color: var(--gold);
    font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 700;
    letter-spacing: 3px; padding: 4px 14px; border-radius: 20px;
    margin-bottom: 10px;
}

.mbti-sheet-title {
    font-size: 1.5rem; font-weight: 800; color: #fff; margin-bottom: 6px;
}

.mbti-sheet-desc {
    font-size: 0.85rem; color: rgba(255,255,255,0.5);
}

.mbti-sheet-tabs {
    display: flex; border-bottom: 1px solid rgba(255,255,255,0.07);
    padding: 0 24px; gap: 0;
}

.mbti-sheet-tab {
  flex: 1; min-height: 44px; padding: 10px 0; text-align: center;
    font-size: 0.8rem; color: rgba(255,255,255,0.4); cursor: pointer;
    border-bottom: 2px solid transparent; transition: all 0.2s;
    font-weight: 600; letter-spacing: 0.5px;
  display: flex; align-items: center; justify-content: center;
  touch-action: pan-y;
}

.mbti-sheet-tab.active {
    color: var(--gold); border-bottom-color: var(--gold);
}

.mbti-sheet-panel {
    display: none; padding: 24px;
    font-size: 0.95rem; line-height: 1.8; color: rgba(255,255,255,0.85);
    word-break: keep-all; letter-spacing: -0.2px;
}

.mbti-sheet-panel.active { display: block; animation: fadeIn 0.3s; }

.mbti-select-btn {
    display: block; margin: 20px 24px 0;
    background: linear-gradient(90deg, #D4AF37, #FDB931);
    color: #000; border: none; padding: 14px; font-weight: 800;
    font-size: 1rem; border-radius: 14px; cursor: pointer;
  min-height: 44px;
    width: calc(100% - 48px); box-shadow: 0 4px 20px rgba(212,175,55,0.3);
    transition: transform 0.2s;
}
.mbti-select-btn:hover { transform: scale(1.02); }
.mbti-select-btn.already {
    background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.4);
    box-shadow: none; cursor: default;
}

@keyframes pulseMirror { 0% { box-shadow: 0 0 30px rgba(212,175,55,0.3); } 100% { box-shadow: 0 0 60px rgba(212,175,55,0.8); } }

/* ══════════════════════════════════════════
   호르몬 관상 — 테토 vs 에겐
══════════════════════════════════════════ */
@keyframes hv-flame { 0%,100%{transform:scaleY(1) rotate(-2deg)} 50%{transform:scaleY(1.18) rotate(2deg)} }
@keyframes hv-sparkle { 0%,100%{opacity:0;transform:scale(0) rotate(0deg)} 50%{opacity:1;transform:scale(1.4) rotate(180deg)} }
@keyframes hv-shake  { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }
@keyframes hv-float  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes hv-fadein { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes hv-neon-red { 0%,100%{box-shadow:0 0 8px #ff2d2d,0 0 20px #ff2d2d,0 0 40px #ff5e00} 50%{box-shadow:0 0 18px #ff2d2d,0 0 40px #ff2d2d,0 0 70px #ff5e00} }
@keyframes hv-neon-pink { 0%,100%{box-shadow:0 0 8px #ff79c8,0 0 20px #d980fa,0 0 40px #c2b9ff} 50%{box-shadow:0 0 18px #ff79c8,0 0 40px #d980fa,0 0 70px #c2b9ff} }
@keyframes hv-drift { 0%{transform:translateX(-5%) translateY(0)} 50%{transform:translateX(5%) translateY(-4%)} 100%{transform:translateX(-5%) translateY(0)} }

.hv-card { animation: hv-fadein .7s ease both; }

/* 테토 카드 */
.hv-teto-wrap {
  background: linear-gradient(135deg,#1a0a00 0%,#2d0d00 50%,#1a0800 100%);
  border-radius: 18px; padding: 0; overflow: hidden; position: relative;
  animation: hv-neon-red 2.6s ease-in-out infinite;
  border: 2.5px solid #ff3d00;
}
.hv-teto-bg {
  position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;
  background: radial-gradient(ellipse at 50% 120%, rgba(255,60,0,.35) 0%, transparent 65%);
}
.hv-teto-flame {
  position:absolute;font-size:3.2rem;animation:hv-flame 1.1s ease-in-out infinite;
  opacity:.18;user-select:none;
}
.hv-teto-content { position:relative;z-index:1;padding:28px 22px 24px; }
.hv-teto-badge {
  display:inline-block;background:linear-gradient(90deg,#ff3d00,#ff7320);
  color:#fff;font-weight:900;font-size:.78rem;letter-spacing:.12em;
  padding:4px 14px;border-radius:50px;text-transform:uppercase;
  margin-bottom:14px;
}
.hv-teto-title {
  font-size:2.1rem;font-weight:900;color:#fff;line-height:1.1;
  text-shadow:0 0 18px #ff5500,0 2px 4px rgba(0,0,0,.8);
  font-family:'Impact',sans-serif;letter-spacing:.03em;
  animation:hv-shake 4s infinite;
  margin-bottom:10px;
}
.hv-teto-copy {
  font-size:.97rem;color:#ffcbaa;font-weight:700;
  text-shadow:0 1px 6px rgba(0,0,0,.6);margin-bottom:18px;
}
.hv-bar-wrap { background:rgba(255,255,255,.08);border-radius:12px;overflow:hidden;height:12px;margin-bottom:6px; }
.hv-bar-teto { height:100%;background:linear-gradient(90deg,#ff3d00,#ff9500);border-radius:12px;transition:width 1.5s cubic-bezier(.22,1,.36,1); }
.hv-bar-egen { height:100%;background:linear-gradient(90deg,#e040fb,#ff79c8);border-radius:12px;transition:width 1.5s cubic-bezier(.22,1,.36,1); }
.hv-score-row { display:flex;justify-content:space-between;font-size:.77rem;color:rgba(255,255,255,.55);margin-bottom:14px; }
.hv-reason-list { display:flex;flex-direction:column;gap:7px; }
.hv-reason-item { display:flex;align-items:center;gap:8px;font-size:.83rem;color:#ffcbaa;background:rgba(255,255,255,.06);padding:7px 12px;border-radius:8px;border-left:3px solid #ff5500; }

/* 에겐 카드 */
.hv-egen-wrap {
  background: linear-gradient(135deg,#1a0025 0%,#2a0838 50%,#180020 100%);
  border-radius: 18px; padding: 0; overflow: hidden; position: relative;
  animation: hv-neon-pink 2.8s ease-in-out infinite;
  border: 2.5px solid #d980fa;
}
.hv-egen-bg {
  position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;
  background: radial-gradient(ellipse at 50% 120%, rgba(217,128,250,.3) 0%, transparent 65%);
}
.hv-egen-sparkle {
  position:absolute;font-size:2rem;animation:hv-sparkle 2s ease-in-out infinite;
  opacity:.22;user-select:none;
}
.hv-egen-content { position:relative;z-index:1;padding:28px 22px 24px; }
.hv-egen-badge {
  display:inline-block;background:linear-gradient(90deg,#d980fa,#ff79c8);
  color:#fff;font-weight:900;font-size:.78rem;letter-spacing:.12em;
  padding:4px 14px;border-radius:50px;text-transform:uppercase;margin-bottom:14px;
}
.hv-egen-title {
  font-size:2.1rem;font-weight:900;color:#fff;line-height:1.1;
  text-shadow:0 0 18px #d980fa,0 2px 4px rgba(0,0,0,.8);
  letter-spacing:.02em;animation:hv-float 3s ease-in-out infinite;
  margin-bottom:10px;
}
.hv-egen-copy { font-size:.97rem;color:#f3c4ff;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.6);margin-bottom:18px; }
.hv-reason-item.egen-item { color:#f3c4ff;border-left-color:#d980fa; }

/* 중립 카드 */
.hv-neutral-wrap {
  background:linear-gradient(135deg,#0d1a2e 0%,#1a2a40 100%);
  border-radius:18px;padding:0;overflow:hidden;position:relative;
  border:2.5px solid #4ecdc4;
  box-shadow:0 0 22px rgba(78,205,196,.3);
}
.hv-neutral-content { padding:28px 22px 24px; }
.hv-neutral-title { font-size:1.6rem;font-weight:900;color:#fff;margin-bottom:10px; }
.hv-neutral-copy { font-size:.95rem;color:#a8e6df;font-weight:600; }

/* 공통 스탯 그리드 */
.hv-stats-grid {
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px;
}
.hv-stat-box {
  background:rgba(255,255,255,.07);border-radius:10px;padding:10px 12px;
  text-align:center;
}
.hv-stat-num { font-size:1.5rem;font-weight:900;color:#fff; }
.hv-stat-label { font-size:.72rem;color:rgba(255,255,255,.5);margin-top:2px; }

/* ── T발놈 테스트 (Frozen Logic Theme) ── */
.t-test-card {
  background: #050505;
  border: 1px solid #333;
  box-shadow: 0 0 15px rgba(0, 255, 65, 0.1), inset 0 0 20px rgba(0, 255, 65, 0.05);
  color: #00ff41;
  font-family: 'Courier New', Courier, monospace;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  border-radius: 4px;
}
.t-test-card::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}
.t-test-card #tTestTitle {
  color: #00ff41; 
  letter-spacing: 2px; 
  font-weight: bold; 
  text-transform: uppercase;
  border-bottom: 1px dashed #00ff41;
  padding-bottom: 10px; margin-bottom: 20px;
  text-align: left;
  font-size: 1.1rem;
}
.t-test-wrapper {
  text-align: left; padding: 10px; z-index: 3; position: relative;
}
.t-test-score {
  font-size: 3.5rem; font-weight: bold; color: #00ff41; margin-bottom: 10px;
  text-shadow: 0 0 5px #00ff41;
  display: flex; justify-content: flex-start; align-items: baseline;
}
.t-test-val { color: #00ff41; }
.t-test-pct { font-size: 1.5rem; color: #00ff41; margin-left: 5px; opacity: 0.8; }
.t-test-tier {
  font-size: 1.1rem; font-weight: bold; color: #fff; margin-bottom: 15px; 
  background: #00ff41; color: #000; display: inline-block; padding: 2px 8px;
  text-transform: uppercase;
  animation: blinkWait 2s infinite;
}
@keyframes blinkWait { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }
.t-test-desc {
  font-size: 0.9rem; color: #00ff41; line-height: 1.6; margin-bottom: 25px;
  background: rgba(0, 255, 65, 0.05); padding: 15px; 
  border: 1px dashed #00ff41;
  text-align: left;
  white-space: pre-wrap;
}
.t-test-desc::before {
  content: "> ";
  animation: blinkCursor 1s infinite;
}
@keyframes blinkCursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.t-test-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.t-test-item {
  background: transparent; border: 1px solid #333;
  padding: 10px; font-size: 0.8rem; color: #00ff41;
  text-align: left; display: flex; flex-direction: column; justify-content: space-between;
}
.t-test-card:hover .t-test-item {
  border-color: #00ff41; background: rgba(0, 255, 65, 0.1);
}
.t-test-item .t-val {
  font-size: 1.1rem; font-weight: bold; color: #fff; margin-top: 5px;
}

/* ── Lotto Draw Animation ── */
.lotto-draw-btn {
  display: block; width: 100%; padding: 15px; margin: 20px 0;
  background: linear-gradient(135deg, #FF9A9E 0%, #FECFEF 100%);
  color: #fff; font-size: 1.2rem; font-weight: 800; border: none; border-radius: 12px;
  cursor: pointer; box-shadow: 0 4px 15px rgba(255,154,158,0.4); transition: transform 0.2s, box-shadow 0.2s;
}
.lotto-draw-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,154,158,0.6); }
.lotto-draw-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.lotto-machine-container {
  display: none; text-align: center; margin: 20px 0; padding: 20px;
  background: rgba(255,255,255,0.05); border-radius: 15px; box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
  overflow: visible;
}
.lotto-machine-container.active { display: block; }
.lotto-machine-title {
  font-size: 1.1rem; color: #333; font-weight: 700; margin-bottom: 15px;
}
.lotto-draw-balls {
  display: flex; justify-content: center; gap: 10px; min-height: 118px; align-items: center; flex-wrap: wrap;
  padding: 54px 8px 18px;
  overflow: visible;
}
.lotto-draw-ball {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 900; color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); font-size: 1.1rem;
  opacity: 0; transform: scale(0) translateY(-50px);
  animation: popInBall 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  box-shadow: inset -5px -5px 10px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.2);
}
@keyframes popInBall {
  0% { opacity: 0; transform: scale(0.5) translateY(-50px); }
  50% { opacity: 1; transform: scale(1.1) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.lotto-result-area { display: none; }
.lotto-result-area.show { display: block; animation: fadeInResult 0.8s ease forwards; }
@keyframes fadeInResult { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --- block 16 --- */
/* ═══ 모바일 마스터 최적화 추가 CSS ═══ */

/* 1. 가로 모드(Landscape) 대응 */
@media (orientation: landscape) and (max-height: 500px) {
  .wrap { padding-top: 8px; }
  .card { padding: 12px 14px; margin-bottom: 10px; }
  .saju-book-wrapper { margin-bottom: 20px; transform: scale(0.7); transform-origin: top center; }
  #sajuLoaderOverlay .saju-txt-wrap { margin-top: -20px; }
}

/* 2. 다크모드 시스템 연동 (theme-pig 수동 모드 없을 때) */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-pig) {
    color-scheme: dark;
  }
}

/* date/time 입력 — 모바일에서 텍스트 가시성 보장 */
input[type="date"][style*="background: rgba(20,25,35"],
input[type="time"][style*="background: rgba(20,25,35"] {
  color-scheme: dark;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value {
  color: inherit;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.7;
  cursor: pointer;
}

/* 3. 저사양 기기 — 모션 최소화 (사주 로더는 제외: 로딩 체감에 필수) */
@media (prefers-reduced-motion: reduce) {
  *:not(#sajuLoaderOverlay):not(#sajuLoaderOverlay *),
  *:not(#sajuLoaderOverlay)::before,
  *:not(#sajuLoaderOverlay)::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 4. 스켈레톤 UI */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}
body.neo-mode .skeleton {
  background: linear-gradient(90deg, #2a2a2d 25%, #3a3a3d 50%, #2a2a2d 75%);
  background-size: 200% 100%;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-card {
  height: 72px; border-radius: 14px; margin-bottom: 12px;
}

/* 5. Safe-area 강화 — 하단 고정 요소 */
.fixed-bottom-safe {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* 6. 터치 영역 최소 44px 강제 */
.form-label { min-height: 24px; }
.tog-btn { min-height: 48px; }
select.inp { min-height: 48px; cursor: pointer; }

/* 7. feature-card 가로모드/소형기기 */
@media (max-width: 380px) {
  .theme-switch-wrapper {
    top: calc(48px + env(safe-area-inset-top, 0px));
    right: max(8px, env(safe-area-inset-right, 0px));
    transform: translateX(calc(100% - 56px));
    padding: 5px 8px;
    gap: 6px;
  }

  .theme-toggle-label {
    font-size: 0.74rem;
  }

  .feature-card-grid { gap: 150px; }
  .feature-card__title { font-size: 0.9rem; }
  .feature-card__desc { font-size: 0.75rem; }
}

@media (max-width: 768px) {
  .feature-card-grid {
    gap: 150px;
    margin-top: 120px;
    margin-bottom: 120px;
  }
  .feature-card {
    margin-bottom: 0;
  }
  .post-saju-services-intro {
    margin-top: 20px;
    margin-bottom: 120px;
    padding: 16px;
  }
}

/* 7.5 점성술(코즈믹 차트) 모바일 최적화 */
@media (max-width: 768px) {
  #acc-astro-body .astro-body.cosmic-theme {
    padding: 14px;
    border-radius: 14px;
  }

  #acc-astro-body .astro-section {
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 14px;
  }

  #acc-astro-body .astro-subhead {
    font-size: 0.98rem;
    line-height: 1.35;
    margin-bottom: 10px;
    padding-bottom: 6px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: keep-all;
  }

  #acc-astro-body .astro-tags {
    gap: 6px;
  }

  #acc-astro-body .astro-tag {
    padding: 4px 9px;
    font-size: 0.72rem;
    max-width: 100%;
  }

  #acc-astro-body .astro-planet,
  #acc-astro-body .astro-house,
  #acc-astro-body .astro-desc,
  #acc-astro-body .astro-desc p,
  #acc-astro-body .astro-desc li,
  #acc-astro-body .astro-core,
  #acc-astro-body .expert-msg,
  #acc-astro-body .neo-bubble,
  #acc-astro-body .yeon-bubble {
    font-size: 0.86rem;
    line-height: 1.62;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  #acc-astro-body #astroBodyWrap,
  #acc-astro-body #astroBodyWrap * {
    max-width: 100%;
    box-sizing: border-box;
  }

  #acc-astro-body #astroBodyWrap {
    overflow-x: hidden;
  }

  #acc-astro-body #astroBodyWrap table {
    font-size: 0.76rem;
    max-width: 100%;
  }

  #acc-astro-body #astroBodyWrap th,
  #acc-astro-body #astroBodyWrap td {
    padding: 5px 6px !important;
    white-space: nowrap;
  }

  #acc-astro-body .astro-table {
    font-size: 0.81rem;
  }

  #acc-astro-body .astro-table th,
  #acc-astro-body .astro-table td {
    padding: 6px !important;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  #acc-astro-body #astroBodyWrap input,
  #acc-astro-body #astroBodyWrap select,
  #acc-astro-body #astroBodyWrap button,
  #acc-astro-body #astroBodyWrap textarea {
    width: 100% !important;
    min-height: 42px;
    font-size: 16px !important;
  }

  #acc-astro-body #astroBodyWrap [id^="asDirect_"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  #acc-astro-body #astroBodyWrap #astroCtryTabs,
  #acc-astro-body #astroBodyWrap #astroCatTabs,
  #acc-astro-body #astroBodyWrap #astroSyCelebs,
  #acc-astro-body #astroBodyWrap #astroCosmicTwins {
    gap: 6px;
  }

  #acc-astro-body #astroBodyWrap .celeb-tab-btn,
  #acc-astro-body #astroBodyWrap .celeb-btn,
  #acc-astro-body #astroBodyWrap .sz-country-tab,
  #acc-astro-body #astroBodyWrap .ctg-btn,
  #acc-astro-body #astroBodyWrap .lang-btn {
    min-height: 40px;
    padding: 7px 10px;
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  #acc-astro-body .astro-body.cosmic-theme {
    padding: 10px;
    border-radius: 12px;
  }

  #acc-astro-body .astro-section {
    padding: 10px;
  }

  #acc-astro-body .astro-subhead {
    font-size: 0.92rem;
  }

  #acc-astro-body .astro-tag {
    font-size: 0.68rem;
    padding: 3px 8px;
  }

  #acc-astro-body .astro-desc,
  #acc-astro-body .astro-desc p,
  #acc-astro-body .astro-core {
    font-size: 0.82rem;
    line-height: 1.6;
  }

  #acc-astro-body #astroBodyWrap ul,
  #acc-astro-body #astroBodyWrap ol {
    padding-left: 16px;
  }

  #acc-astro-body #astroBodyWrap [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  #acc-astro-body #astroBodyWrap [style*="min-width:120px"],
  #acc-astro-body #astroBodyWrap [style*="min-width:130px"],
  #acc-astro-body #astroBodyWrap [style*="width:120px"],
  #acc-astro-body #astroBodyWrap [style*="width:110px"] {
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 100% !important;
  }
}

/* 8. 라디오 버튼 터치 영역 확장 */
.form-group label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.form-group label:active { background: rgba(255,139,167,.1); }

/* 9. 포커스 가시성 (키보드 사용자 접근성) */
:focus-visible {
  outline: 3px solid var(--pink, #FF8BA7);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════
   Touch Performance Layer v2
   ═══════════════════════════════════════════ */

/* 10. iOS 롱프레스 팝업 차단 + 전역 터치 최적화 */
a,button,[role="button"],select,label,
.ts-card,.dw-item,.feature-card,.tarot-card,.oracle-card-m,
.palace-block,.fortune-tab,.mystic-tab-btn,.lang-btn,.ctg-btn,
.sz-country-tab,.sy-card,.celeb-tab-btn,.celeb-btn,[onclick] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* 11. 비텍스트 인터랙티브 요소 텍스트 선택 방지 */
button,.tog-btn,.btn-main,.btn-sub,.dw-item,.feature-card,
.fortune-tab,.mystic-tab-btn,.tarot-cat-btn,.celeb-tab-btn,
.celeb-btn,.ctg-btn,.lang-btn,.oracle-cat-btn-m,.iching-btn,
.sz-country-tab,.ts-card,[role="button"] {
  user-select: none;
  -webkit-user-select: none;
}

/* 12. 소형 버튼 터치 타겟 44px 확장 (::after 가상 요소) */
.celeb-tab-btn,.celeb-btn,.ctg-btn,.lang-btn,.oracle-cat-btn-m {
  position: relative;
}
.celeb-tab-btn::after,.celeb-btn::after,.ctg-btn::after,
.lang-btn::after,.oracle-cat-btn-m::after {
  content: '';
  position: absolute;
  inset: -6px;
  min-width: 44px;
  min-height: 44px;
}

/* 13. GPU 가속 — 애니메이션 레이어 (모바일 화이트스크린 방지를 위해 will-change 남용 제거) */
.saju-book,.saju-vortex,.orb,
.feature-card,.dw-item,.ts-card,
.sy-gauge-fill,.sy-talent-fill,
.tarot-card,.oracle-card-m {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* 14. CSS Containment — 카드 컴포넌트 리플로우 격리 */
.feature-card,.ts-card,.prem-box,.palace-block {
  contain: layout style;
}

/* 15. is-touching — JS touchstart 즉각 시각 피드백 */
.is-touching {
  opacity: .82 !important;
  transform: scale(.96) !important;
  transition: transform .08s, opacity .08s !important;
}
.dw-item.is-touching,.ts-card.is-touching,.feature-card.is-touching {
  transform: scale(.97) translateY(1px) !important;
}

/* 16. .ts-card / .sy-card / .palace-block active 피드백 */
.ts-card:active { transform: scale(.97) translateY(-1px) !important; }
.palace-block:active { opacity: .85; transform: scale(.98) !important; }
.sy-card:active { opacity: .9; }

/* 17. 스크롤 컨테이너 성능 */
.celeb-name-area,#szCelebBtns,.dw-grid {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}