/* =========================================================
   🧧 부적성(Talisman Castle) 전용 화이트 미니멀 · 한지 테마
   ⚠️ 이 파일의 모든 규칙은 `body.talisman-modern` 아래에만 적용되도록
   스코프되어 있습니다(wish-modern.css와 동일한 패턴). 다른 페이지의
   공용 다크 테마(css/style.css)에는 영향이 없습니다.
   원칙: 심플 · 고급 · 차분함 · 신비로움 · 여백 · 미니멀
   (절대 게임처럼 보이지 않도록 뱃지/게이지/그리드형 UI를 배제합니다)
   ========================================================= */

body.talisman-modern{
  --tm-bg:#fbf9f4;
  --tm-surface:#ffffff;
  --tm-line:#ece4d3;
  --tm-ink:#2b2620;
  --tm-ink-soft:#6b6357;
  --tm-ink-faint:#a89f8c;
  --tm-red:#8a2a1a;
  --tm-red-2:#a4281c;
  --tm-gold:#c99a3f;
  --tm-gold-2:#e0b356;
  background:var(--tm-bg) !important;
  color:var(--tm-ink);
}
body.talisman-modern #star-canvas,
body.talisman-modern .orb-layer,
body.talisman-modern .online-badge{ display:none !important; }
body.talisman-modern .app-main{ position:relative;z-index:1;padding-bottom:40px; }

/* --- 왜 부적을 만드는지 안내문 --- */
.tc-why-desc{
  font-size:0.8rem;color:var(--tm-ink-soft);line-height:1.6;
  margin:0 0 14px;text-align:center;padding:0 6px;
}
.tc-why-desc b{ color:var(--tm-gold); font-weight:700; }

/* --- 부적의 4가지 역할(감정/상징/사용처/자산) 요약 — 미니멀 톤 유지 --- */
.tc-why-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 18px;
}
.tc-why-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding:10px 4px;border-radius:16px;background:var(--tm-surface);border:1px solid var(--tm-line);
}
.tc-why-item i{ font-size:1rem;color:var(--tm-gold); }
.tc-why-item span{ font-size:0.62rem;color:var(--tm-ink-soft);line-height:1.35; }

/* --- 오늘의 축복 --- */
.tc-today-blessing{
  background:var(--tm-surface);border:1px solid var(--tm-line);border-radius:22px;
  padding:22px 20px;text-align:center;box-shadow:0 8px 24px rgba(60,50,30,0.05);
}
.tc-blessing-kicker{ font-size:0.74rem;color:var(--tm-gold);letter-spacing:0.1em;margin:0 0 8px;font-weight:700; }
.tc-blessing-msg{ font-size:0.96rem;color:var(--tm-ink);margin:0;line-height:1.6; }

/* --- 현재 소지 중인 부적(대표) --- */
.tc-current-card{
  background:var(--tm-surface);border:1px solid var(--tm-line);border-radius:22px;
  padding:22px 20px;margin-top:14px;text-align:center;box-shadow:0 8px 24px rgba(60,50,30,0.05);
}
.tc-current-label{ font-size:0.74rem;color:var(--tm-ink-faint);margin:0 0 12px; }
.tc-current-empty{ font-size:0.86rem;color:var(--tm-ink-soft);padding:10px 0; }
.tc-current-body{ display:flex;align-items:center;gap:14px; }
.tc-current-seal{
  flex-shrink:0;width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#f6efd9,#ddc98f);border:1.5px solid var(--tm-red);
  font-family:var(--font-heading,serif);font-size:1.5rem;color:var(--tm-red);font-weight:700;
}
.tc-current-info{ flex:1;text-align:left; }
.tc-current-name{ font-size:1.02rem;font-weight:700;color:var(--tm-ink);margin:0 0 4px; }
.tc-current-dday{ font-size:0.78rem;color:var(--tm-gold);margin:0; }
.tc-current-change-btn{
  flex-shrink:0;background:none;border:1px solid var(--tm-line);color:var(--tm-ink-soft);
  font-size:0.72rem;padding:8px 12px;border-radius:999px;cursor:pointer;font-family:inherit;
}

/* --- 첫 부적 만들기 CTA (빈 상태일 때만 노출) --- */
.tc-first-craft-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;
  background:#6c4fd6;color:#fff;border:none;
  border-radius:14px;padding:12px 0;font-size:0.86rem;font-weight:700;cursor:pointer;font-family:inherit;
  box-shadow:0 8px 18px -6px rgba(108,79,214,0.45);
}

/* --- 제작 흐름 힌트 한 줄 --- */
.tc-flow-hint{
  font-size:0.74rem;color:var(--tm-ink-faint);text-align:center;margin:10px 6px 0;line-height:1.5;
}
.tc-flow-hint i{ color:var(--tm-gold); margin-right:2px; }

/* --- 메인 버튼 2개 --- */
.tc-main-actions{ display:flex;flex-direction:column;gap:10px;margin-top:18px; }
body.talisman-modern .tc-main-actions .btn-gold{
  background:#6c4fd6 !important;color:#fff !important;
  box-shadow:0 8px 18px -6px rgba(108,79,214,0.45) !important;border-radius:16px;padding:15px 0;
}
body.talisman-modern .tc-main-actions .btn-outline{
  border:1px solid var(--tm-line);color:var(--tm-ink-soft);border-radius:16px;padding:15px 0;background:var(--tm-surface);
}

/* --- 뷰 전환 (제작/부적함) --- */
.tc-view{ margin-top:6px; }
.tc-view-back{
  display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--tm-ink-soft);
  font-size:0.8rem;cursor:pointer;font-family:inherit;padding:10px 0;margin-bottom:6px;
}
.tc-view-title{ font-size:1.1rem;color:var(--tm-ink);margin:0 0 4px;font-weight:700; }
.tc-view-sub{ font-size:0.8rem;color:var(--tm-ink-faint);margin:0 0 18px; }

/* --- 🎯 이달의 추천 부적 배너 (내 사주함 연동) --- */
.tc-recommend-banner{
  background:linear-gradient(135deg,rgba(201,154,63,0.14),rgba(164,40,28,0.08));
  border:1px solid rgba(201,154,63,0.35);border-radius:16px;padding:14px 16px;margin-bottom:12px;
}
.tc-recommend-kicker{ font-size:0.7rem;color:var(--tm-red-2);font-weight:700;letter-spacing:.02em;margin:0 0 6px;display:flex;align-items:center;gap:6px; }
.tc-recommend-text{ font-size:0.88rem;color:var(--tm-ink);margin:0;line-height:1.5; }
.tc-recommend-text b{ color:var(--tm-red-2); }

/* --- 카테고리 선택(제작) --- */
.tc-category-list{ display:flex;flex-direction:column;gap:10px; }
.tc-category-item{
  display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;
  background:var(--tm-surface);border:1px solid var(--tm-line);cursor:pointer;transition:.15s ease;text-align:left;font-family:inherit;width:100%;
}
.tc-category-item.active{ border-color:var(--tm-gold);box-shadow:0 0 0 3px rgba(201,154,63,0.12); }
.tc-category-item.is-recommended{ border-color:rgba(201,154,63,0.55); }
.tc-category-icon{ font-size:1.5rem;flex-shrink:0; }
.tc-category-body{ flex:1;min-width:0; }
.tc-category-name{ font-size:0.92rem;color:var(--tm-ink);font-weight:600;margin:0 0 2px; }
.tc-category-recommend-tag{
  font-size:0.6rem;color:#6c4fd6;background:#efeafe;
  padding:1px 7px;border-radius:999px;font-weight:700;vertical-align:middle;margin-left:4px;
}
.tc-category-cost{ font-size:0.76rem;color:var(--tm-gold);margin:0; }
.tc-category-special{
  font-size:0.62rem;color:#6c4fd6;background:#efeafe;
  padding:2px 8px;border-radius:999px;flex-shrink:0;
}

.tc-craft-footer{ margin-top:20px; }
.tc-craft-balance{ font-size:0.8rem;color:var(--tm-ink-soft);text-align:center;margin:0 0 12px; }
.tc-craft-balance b{ color:var(--tm-gold); }
body.talisman-modern #tc-craft-btn{
  background:#6c4fd6 !important;color:#fff !important;
  border-radius:16px;padding:15px 0;box-shadow:0 8px 18px -6px rgba(108,79,214,0.45) !important;
}
body.talisman-modern #tc-craft-btn:disabled{ opacity:0.45;box-shadow:none !important; }

/* --- 내 부적함 --- */
.tc-vault-list{ display:flex;flex-direction:column;gap:10px; }
.tc-vault-item{
  display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;
  background:var(--tm-surface);border:1px solid var(--tm-line);cursor:pointer;width:100%;text-align:left;font-family:inherit;
}
.tc-vault-seal{
  flex-shrink:0;width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#f6efd9,#ddc98f);border:1.5px solid var(--tm-red);
  font-family:var(--font-heading,serif);font-size:1.15rem;color:var(--tm-red);font-weight:700;
}
.tc-vault-info{ flex:1;min-width:0; }
.tc-vault-name{ font-size:0.9rem;color:var(--tm-ink);font-weight:600;margin:0 0 2px; }
.tc-vault-status{ font-size:0.74rem;margin:0; }
.tc-vault-status.active{ color:var(--tm-gold); }
.tc-vault-status.stored{ color:var(--tm-ink-faint); }
/* 만료 상태는 팔레트 밖의 별도 색(#b95a4a) 대신, 부적성 고유 레드 톤을 옅게 써서
   "경고"보다는 "정보"에 가까운 절제된 표시로 통일했습니다. */
.tc-vault-status.expired{ color:var(--tm-red); opacity:0.7; }
.tc-vault-chevron{ color:var(--tm-ink-faint);flex-shrink:0; }
.tc-vault-empty{
  text-align:center;padding:40px 20px;color:var(--tm-ink-faint);font-size:0.86rem;
  background:var(--tm-surface);border:1px solid var(--tm-line);border-radius:20px;
}

/* --- 부적 펼치기(unfold) 오버레이 --- */
.tc-unfold-overlay{
  position:fixed;inset:0;z-index:2500;display:flex;align-items:center;justify-content:center;
  background:rgba(20,12,8,0.72);backdrop-filter:blur(3px);padding:20px;
  animation:tcUnfoldFadeIn .3s ease both;
}
@keyframes tcUnfoldFadeIn{ from{opacity:0;} to{opacity:1;} }
.tc-unfold-overlay.tc-unfold-leaving{ animation:tcUnfoldFadeOut .3s ease both; }
@keyframes tcUnfoldFadeOut{ from{opacity:1;} to{opacity:0;} }
.tc-unfold-box{ text-align:center;max-width:320px;width:100%; }
.tc-unfold-halo{
  position:relative;width:120px;height:120px;margin:0 auto 8px;
  background:radial-gradient(circle, rgba(255,224,150,0.85), transparent 70%);
  border-radius:50%;opacity:0;
  animation:tcUnfoldHaloIn 1.1s ease forwards;
}
@keyframes tcUnfoldHaloIn{ 0%{opacity:0;transform:scale(0.3);} 60%{opacity:1;} 100%{opacity:0.75;transform:scale(2.2);} }
.tc-unfold-card-wrap{ margin-top:-70px;opacity:0;transform:scale(0.85);animation:tcUnfoldCardIn .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:.45s; }
@keyframes tcUnfoldCardIn{ to{ opacity:1;transform:scale(1); } }
.tc-unfold-blessing{
  margin-top:18px;opacity:0;animation:tcUnfoldTextIn .7s ease forwards;animation-delay:1.3s;
}
@keyframes tcUnfoldTextIn{ from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }
.tc-unfold-blessing p{ color:#f5ead0;font-size:0.94rem;line-height:1.7;font-style:italic;margin:0; }
.tc-unfold-close{
  margin-top:22px;background:rgba(255,255,255,0.1);border:1px solid rgba(224,179,86,0.35);color:#f0dcb0;
  font-size:0.8rem;padding:10px 24px;border-radius:999px;cursor:pointer;font-family:inherit;
  opacity:0;animation:tcUnfoldTextIn .6s ease forwards;animation-delay:1.6s;
}

@media (max-width:360px){
  .tc-current-body{ flex-direction:column;text-align:center; }
  .tc-current-info{ text-align:center; }
}