/* =========================================================
   메인 홈 전용 화이트 미니멀 테마 ("현대카드 앱" 스타일에서
   미니멀리즘 · 타이포그래피 · 여백 활용의 "디자인 언어"만 참고하여
   신통방통만의 방식으로 재해석한 것으로, 특정 브랜드의 로고/아이콘/
   이미지·그래픽 등의 디자인 자산은 전혀 사용하지 않습니다.)

   ⚠️ 아주 중요: 이 파일의 모든 규칙은 반드시 `body.home-modern` 아래에만
   적용되도록 스코프되어 있습니다. index.html에만 이 클래스를 부여하므로
   다른 페이지(css/style.css 공용 다크 테마)에는 어떤 영향도 주지 않습니다.
   ========================================================= */

body.home-modern{
  --hm-bg:#ffffff;
  --hm-surface:#f7f7fb;
  --hm-surface-2:#f1f0f8;
  --hm-line:#ececf2;
  --hm-ink:#161421;
  --hm-ink-soft:#5b5770;
  --hm-ink-faint:#9a96ab;
  --hm-accent:#6c4fd6;        /* 라이트 테마 전역 단일 액센트(--lt-accent)와 동일하게 통일 */
  --hm-accent-2:#c99a3f;      /* 신통방통 골드를 화이트 배경에 맞게 재해석(아주 드물게 사용) */
  --hm-accent-soft:#efeafe;
  background:var(--hm-bg) !important;
  color:var(--hm-ink);
  font-family:'Pretendard Variable','Pretendard','Noto Sans KR',sans-serif;
}
body.home-modern h1,
body.home-modern h2,
body.home-modern h3,
body.home-modern h4{
  font-family:'Pretendard Variable','Pretendard','Noto Sans KR',sans-serif;
  font-weight:700; /* 제목 = Bold */
  color:var(--hm-ink);
  letter-spacing:-0.01em;
}
body.home-modern p{ font-weight:400; } /* 설명 = Regular */

/* 다크 테마 전용 배경 효과(별빛 캔버스/오브/접속자뱃지)는 화이트 미니멀 톤과
   충돌하므로 이 페이지에서만 시각적으로 숨김. core.js의 공용 로직 자체는
   그대로 실행되므로(하트비트 등) 다른 페이지 동작에는 영향 없음. */
body.home-modern #star-canvas,
body.home-modern .orb-layer,
body.home-modern .online-badge{
  display:none !important;
}

/* --- 앱 쉘: 모바일 우선 + PC 반응형 확장 --- */
body.home-modern .hm-shell{
  max-width:480px;margin:0 auto;position:relative;z-index:1;
  min-height:100vh;display:flex;flex-direction:column;
  padding-bottom:104px;
}
@media (min-width:900px){
  body.home-modern .hm-shell{ max-width:720px; }
}

/* --- 헤더 --- */
body.home-modern .hm-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 22px 8px;
  background:var(--hm-bg);
  position:sticky;top:0;z-index:20;
}
body.home-modern .hm-brand{
  font-size:1.15rem;font-weight:700;color:var(--hm-ink);
  letter-spacing:-0.02em;display:flex;align-items:center;gap:6px;
}
body.home-modern .hm-brand i{color:var(--hm-accent);}
body.home-modern .hm-header-actions{display:flex;align-items:center;gap:8px;}
body.home-modern .hm-icon-btn{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--hm-surface);border:1px solid var(--hm-line);
  color:var(--hm-ink);font-size:1rem;position:relative;
}
body.home-modern .hm-icon-btn .dot{
  position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;
  background:#ff5c72;border:1.5px solid var(--hm-bg);display:none;
}

body.home-modern .hm-main{ flex:1;padding:4px 22px 20px; }

/* --- 인사 문구 --- */
body.home-modern .hm-greeting{ margin:18px 0 22px; }
body.home-modern .hm-greeting-eyebrow{
  display:inline-block;font-size:0.74rem;font-weight:500;color:var(--hm-ink-faint);
  letter-spacing:0.03em;margin:0 0 10px;
}
body.home-modern .hm-greeting-title{
  font-size:1.56rem;line-height:1.42;margin:0;font-weight:700;
}
body.home-modern .hm-accent{ color:var(--hm-accent); }

/* --- 오늘의 우주 이야기 카드 (기존 initCosmicMessageRotation() 로직 그대로 사용, 시각만 재구성) --- */
body.home-modern .hm-cosmic-card{
  position:relative;overflow:hidden;
  background:var(--hm-surface);
  border:1px solid var(--hm-line);
  border-radius:28px;
  padding:26px 24px 24px;
  margin-bottom:26px;
}
body.home-modern .hm-cosmic-visual{
  position:absolute;top:18px;right:20px;width:76px;height:76px;pointer-events:none;
}
body.home-modern .hm-moon{
  position:absolute;top:0;right:0;width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,#fff,#eee4ff);
  box-shadow:0 0 0 1px var(--hm-line), inset -6px -4px 0 rgba(91,61,240,0.10);
  display:flex;align-items:center;justify-content:center;color:var(--hm-accent);font-size:1rem;
}
body.home-modern .hm-star{
  position:absolute;color:var(--hm-accent-2);font-size:0.62rem;opacity:0.85;
  animation:hmTwinkle 2.6s ease-in-out infinite;
}
body.home-modern .hm-star.s1{top:2px;left:6px;animation-delay:0s;}
body.home-modern .hm-star.s2{top:44px;left:0;font-size:0.5rem;animation-delay:.6s;}
body.home-modern .hm-star.s3{top:58px;right:52px;font-size:0.46rem;animation-delay:1.2s;}
@keyframes hmTwinkle{0%,100%{opacity:0.25;transform:scale(0.85);}50%{opacity:1;transform:scale(1);}}
body.home-modern .hm-cosmic-eyebrow{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;
  font-size:0.72rem;font-weight:600;color:var(--hm-accent);letter-spacing:0.02em;
}
body.home-modern .hm-cosmic-text{
  position:relative;z-index:1;font-size:0.95rem;font-weight:500;line-height:1.7;
  color:var(--hm-ink-soft);margin:12px 0 18px;max-width:82%;
  min-height:2.4em;transition:opacity .4s ease;
}
body.home-modern .hm-btn-primary{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--hm-ink);color:#fff;font-weight:600; /* 버튼 = SemiBold */
  padding:12px 22px;border-radius:999px;font-size:0.86rem;border:none;
  transition:transform .15s ease,opacity .15s ease;
}
body.home-modern .hm-btn-primary:active{ transform:scale(0.96); }

/* --- 섹션 타이틀 --- */
body.home-modern .hm-section-title{
  display:flex;align-items:center;justify-content:space-between;margin:32px 0 14px;
}
body.home-modern .hm-section-title h2{ font-size:1.06rem;margin:0; }
body.home-modern .hm-more-link{
  font-size:0.76rem;font-weight:500;color:var(--hm-ink-faint);
  display:inline-flex;align-items:center;gap:3px;
}
body.home-modern .hm-badge{
  font-size:0.66rem;font-weight:600;color:var(--hm-accent);
  background:var(--hm-accent-soft);border-radius:999px;padding:4px 11px;
}

/* =========================================================
   ✨ 부적 & 소원게시판 섹션 (구 "AI 추천 운세" 자리를 대체)
   ========================================================= */
body.home-modern .hm-tc-desc{
  font-size:0.8rem;font-weight:400;color:var(--hm-ink-faint);
  line-height:1.6;margin:0 0 16px;
}
body.home-modern .hm-tc-grid{
  display:grid;grid-template-columns:1fr;gap:14px;
}
@media (min-width:900px){
  body.home-modern .hm-tc-grid{ grid-template-columns:1fr 1fr; }
}
body.home-modern .hm-tc-card{
  background:var(--hm-surface);border:1px solid var(--hm-line);
  border-radius:24px;padding:20px 18px 18px;
  display:flex;flex-direction:column;gap:12px;
  animation:hmCardIn .5s ease both;
}
@keyframes hmCardIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
body.home-modern .hm-tc-card-head h3{
  font-size:0.98rem;margin:0;display:flex;align-items:center;gap:8px;
}
body.home-modern .hm-tc-card-head h3 i{ color:var(--hm-accent); }

/* --- 왼쪽: 부적 만들기 카드 (AI 맞춤 디지털 부적 제작 안내 CTA, 카드 외곽 디자인은 기존 .hm-tc-card 유지) --- */
body.home-modern .hm-tc-craft-cta{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
  background:linear-gradient(135deg,var(--hm-accent-soft),#fff);
  border:1px solid var(--hm-line);border-radius:18px;padding:26px 18px;
  flex:1;justify-content:center;
}
body.home-modern .hm-tc-craft-icon{
  width:56px;height:56px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:var(--hm-accent);color:#fff;font-size:1.5rem;
  box-shadow:0 8px 18px -8px rgba(91,61,240,0.55);
}
body.home-modern .hm-tc-craft-desc{
  font-size:0.8rem;color:var(--hm-ink-soft);line-height:1.6;margin:0;max-width:280px;
}

body.home-modern .hm-tc-more-btn,
body.home-modern .hm-tc-secondary-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 16px;border-radius:999px;font-size:0.82rem;font-weight:600;
  text-decoration:none;transition:transform .15s ease;
}
body.home-modern .hm-tc-more-btn{ background:var(--hm-ink);color:#fff; }
body.home-modern .hm-tc-secondary-btn{ background:var(--hm-bg);color:var(--hm-ink);border:1px solid var(--hm-line); }
body.home-modern .hm-tc-more-btn:active,
body.home-modern .hm-tc-secondary-btn:active{ transform:scale(0.97); }
body.home-modern .hm-tc-btn-row{ display:flex;gap:8px; }
body.home-modern .hm-tc-btn-row a{ flex:1; }

/* --- 오른쪽: 소원게시판 카드 --- */
body.home-modern .hm-wish-stats{ display:flex;gap:10px; }
body.home-modern .hm-wish-stat{
  flex:1;display:flex;flex-direction:column;gap:2px;
  background:var(--hm-bg);border:1px solid var(--hm-line);border-radius:14px;
  padding:12px 14px;
}
body.home-modern .hm-wish-stat-num{ font-size:1.3rem;font-weight:700;color:var(--hm-accent); }
body.home-modern .hm-wish-stat-label{ font-size:0.68rem;color:var(--hm-ink-faint); }

body.home-modern .hm-wish-top5{ display:flex;flex-direction:column;gap:8px; }
body.home-modern .hm-wish-top-item{
  display:flex;align-items:center;gap:10px;
  background:var(--hm-bg);border:1px solid var(--hm-line);border-radius:14px;
  padding:10px 12px;
}
body.home-modern .hm-wish-rank{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  background:var(--hm-accent-soft);color:var(--hm-accent);
  font-size:0.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;
}
body.home-modern .hm-wish-top-body{ flex:1;min-width:0; }
body.home-modern .hm-wish-top-text{
  font-size:0.78rem;font-weight:500;color:var(--hm-ink);margin:0 0 2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
body.home-modern .hm-wish-top-meta{ font-size:0.64rem;color:var(--hm-ink-faint);margin:0; }
body.home-modern .hm-wish-top-actions{ display:flex;gap:4px; }
body.home-modern .hm-wish-mini-btn{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--hm-line);
  background:var(--hm-surface);color:var(--hm-ink-soft);font-size:0.78rem;
  display:flex;align-items:center;justify-content:center;transition:transform .15s ease;
}
body.home-modern .hm-wish-mini-btn:active{ transform:scale(0.9); }

/* --- 홈 화면 전용 경량 모달(복주머니 보내기 / 댓글) --- */
body.home-modern .hm-modal-overlay{
  position:fixed;inset:0;background:rgba(22,20,33,0.45);
  display:flex;align-items:flex-end;justify-content:center;z-index:200;
}
@media (min-width:900px){
  body.home-modern .hm-modal-overlay{ align-items:center; }
}
body.home-modern .hm-modal-box{
  position:relative;background:#fff;border-radius:24px 24px 0 0;
  width:100%;max-width:480px;padding:24px 20px calc(24px + env(safe-area-inset-bottom));
  max-height:80vh;overflow-y:auto;
}
@media (min-width:900px){
  body.home-modern .hm-modal-box{ border-radius:24px;max-width:420px; }
}
body.home-modern .hm-modal-box h3{ font-size:1rem;margin:0 0 8px;display:flex;align-items:center;gap:8px; }
body.home-modern .hm-modal-desc{ font-size:0.78rem;color:var(--hm-ink-faint);margin:0 0 14px;line-height:1.5; }
body.home-modern .hm-modal-close{
  position:absolute;top:16px;right:16px;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--hm-line);background:var(--hm-surface);color:var(--hm-ink);
}
body.home-modern .hm-pouch-amount-grid{ display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px; }
body.home-modern .hm-pouch-amount-btn{
  padding:9px 16px;border-radius:999px;border:1px solid var(--hm-line);
  background:var(--hm-surface);color:var(--hm-ink);font-size:0.82rem;font-weight:600;
}
body.home-modern .hm-pouch-amount-btn.active{ background:var(--hm-accent);border-color:var(--hm-accent);color:#fff; }
body.home-modern .hm-modal-btn-block{ width:100%;justify-content:center; }
body.home-modern .hm-comment-list{ max-height:220px;overflow-y:auto;margin-bottom:12px; }
body.home-modern .hm-comment-item{ padding:8px 0;border-bottom:1px solid var(--hm-line); }
body.home-modern .hm-comment-nick{ font-size:0.66rem;color:var(--hm-accent);margin:0 0 2px; }
body.home-modern .hm-comment-text{ font-size:0.82rem;color:var(--hm-ink);margin:0; }
body.home-modern .hm-comment-textarea{
  width:100%;min-height:64px;border-radius:14px;border:1px solid var(--hm-line);
  padding:10px 12px;font-size:0.84rem;font-family:inherit;resize:vertical;margin-bottom:10px;
  background:var(--hm-surface);color:var(--hm-ink);
}

/* --- 🏮 소원방(Wish Room) 진입 배너 --- */
body.home-modern .hm-wishroom-banner{
  display:flex;align-items:center;gap:14px;margin:22px 0 4px;
  padding:16px 18px;border-radius:22px;text-decoration:none;
  background:linear-gradient(135deg,#2c1b10,#4a2c14);
  box-shadow:0 10px 26px rgba(224,121,58,0.22);
  transition:transform .15s ease;
}
body.home-modern .hm-wishroom-banner:active{ transform:scale(0.98); }
body.home-modern .hm-wishroom-banner-icon{
  width:46px;height:46px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,210,122,0.15);color:#ffd27a;font-size:1.3rem;
  filter:drop-shadow(0 0 6px rgba(255,200,110,0.6));
}
body.home-modern .hm-wishroom-banner-text{ flex:1;min-width:0; }
body.home-modern .hm-wishroom-banner-text b{
  display:block;color:#ffe9c7;font-size:0.9rem;font-weight:800;margin-bottom:3px;
}
body.home-modern .hm-wishroom-banner-text small{
  display:block;color:#e0c7a8;font-size:0.7rem;line-height:1.4;
}
body.home-modern .hm-wishroom-banner > i.fa-chevron-right{ color:#ffd27a;font-size:0.85rem;flex-shrink:0; }

/* --- 운세 메뉴 카드 그리드 --- */
body.home-modern .hm-menu-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
}
@media (min-width:900px){
  body.home-modern .hm-menu-grid{ grid-template-columns:repeat(4,1fr); }
}
body.home-modern .hm-menu-card{
  position:relative;
  display:flex;flex-direction:column;gap:10px;
  padding:18px 16px;border-radius:20px;
  background:var(--hm-surface);border:1px solid var(--hm-line);
  text-decoration:none;min-height:118px;
  transition:transform .18s ease, background .18s ease;
}
body.home-modern .hm-menu-card:active{ transform:scale(0.97); }
body.home-modern .hm-menu-card:hover{ background:var(--hm-surface-2); }
body.home-modern .hm-menu-card .hm-menu-icon{
  width:38px;height:38px;border-radius:12px;
  background:#fff;border:1px solid var(--hm-line);
  display:flex;align-items:center;justify-content:center;
  font-size:1.02rem;color:var(--hm-accent);
}
body.home-modern .hm-menu-card h4{ font-size:0.9rem;margin:0; font-weight:700; }
body.home-modern .hm-menu-card p{
  font-size:0.7rem;font-weight:400;color:var(--hm-ink-faint);margin:0;
  line-height:1.45;
}
body.home-modern .hm-menu-popular{
  position:absolute;top:14px;right:14px;
  font-size:0.58rem;font-weight:600;color:var(--hm-accent-2);
  background:#fbf3e3;border-radius:999px;padding:2px 8px;
}

/* --- 공용 6탭 하단 네비게이션(js/core.js renderBottomNav)을 홈(화이트 미니멀) 테마에 맞게 재도색 ---
   전체 사이트가 동일한 홈/운세/커뮤니티/소원/복주머니/마이 6탭 구조를 쓰도록 통일하며,
   홈 화면에서만 화이트 톤으로 보이도록 색만 덮어씁니다(다른 페이지의 다크 .bottom-nav에는 영향 없음). */
body.home-modern .bottom-nav{
  max-width:480px;margin:0 auto;
  padding:10px 6px calc(14px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--hm-line);
}
@media (min-width:900px){
  body.home-modern .bottom-nav{ max-width:720px; }
}
body.home-modern .bottom-nav a{ color:var(--hm-ink-faint); }
body.home-modern .bottom-nav a.active{ color:var(--hm-accent); font-weight:600; }

/* --- 홈 재배치(IA 재정리)로 추가된 요소들 --- */
body.home-modern .hm-quick-links{
  display:flex;gap:8px;margin:10px 0 22px;overflow-x:auto;
}
body.home-modern .hm-quick-links a{
  flex-shrink:0;display:flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;background:var(--hm-surface);
  border:1px solid var(--hm-line);color:var(--hm-ink-soft);
  font-size:0.78rem;font-weight:600;
}
body.home-modern .hm-tc-desc{ font-size:0.82rem;color:var(--hm-ink-soft);margin:-4px 0 14px;line-height:1.5; }
body.home-modern .hm-community-card{
  display:flex;flex-direction:column;gap:14px;
  padding:18px;border-radius:20px;background:var(--hm-surface);
  border:1px solid var(--hm-line);margin-bottom:26px;text-decoration:none;
}
body.home-modern .hm-community-card-top{ display:flex;align-items:center;gap:12px; }
body.home-modern .hm-community-icon{
  width:44px;height:44px;border-radius:50%;background:var(--hm-accent-soft);
  display:flex;align-items:center;justify-content:center;color:var(--hm-accent);font-size:1.1rem;flex-shrink:0;
}
body.home-modern .hm-community-card-top b{ display:block;font-size:0.92rem;color:var(--hm-ink); }
body.home-modern .hm-community-card-top small{ display:block;font-size:0.76rem;color:var(--hm-ink-faint);margin-top:2px; }
body.home-modern .hm-pouch-home-card{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:18px;border-radius:20px;background:linear-gradient(135deg,#fff8ec,#fffdf7);
  border:1px solid #f0e0bd;margin-bottom:26px;
}
body.home-modern .hm-pouch-home-balance{ display:flex;align-items:center;gap:10px; }
body.home-modern .hm-pouch-home-emoji{ font-size:1.8rem; }
body.home-modern .hm-pouch-home-balance b{ display:block;font-size:1.15rem;color:var(--hm-accent-2); }
body.home-modern .hm-pouch-home-balance small{ display:block;font-size:0.72rem;color:var(--hm-ink-faint); }
body.home-modern .hm-pouch-home-actions{ display:flex;gap:8px;flex-wrap:wrap; }

body.home-modern .hm-empty{
  text-align:center;padding:36px 16px;color:var(--hm-ink-faint);
  font-size:0.82rem;grid-column:1/-1;
}

/* --- ⭐ MVP 재배치: 소원 카드를 홈 화면 2순위 단독 섹션으로 재사용(.hm-tc-card 스타일 그대로 상속) --- */
body.home-modern .hm-wish-standalone{
  background:var(--hm-surface);border:1px solid var(--hm-line);
  border-radius:24px;padding:20px 18px 18px;
  display:flex;flex-direction:column;gap:12px;
  animation:hmCardIn .5s ease both;margin-bottom:26px;
}

/* --- 🔮 홈 하단 부적/확장 기능 푸터형 링크 --- */
body.home-modern .hm-footer-links{
  display:flex;flex-direction:column;gap:8px;margin:8px 0 30px;
}
body.home-modern .hm-footer-link{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:16px;background:var(--hm-surface);
  border:1px solid var(--hm-line);text-decoration:none;color:var(--hm-ink);
  transition:transform .15s ease;
}
body.home-modern .hm-footer-link:active{ transform:scale(0.98); }
body.home-modern .hm-footer-link > i:first-child{
  width:36px;height:36px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--hm-accent-soft);color:var(--hm-accent);font-size:0.95rem;
}
body.home-modern .hm-footer-link span{
  flex:1;display:flex;flex-direction:column;gap:2px;
  font-size:0.86rem;font-weight:600;
}
body.home-modern .hm-footer-link span small{
  font-size:0.68rem;font-weight:400;color:var(--hm-ink-faint);
}
body.home-modern .hm-footer-link > i.fa-chevron-right{
  color:var(--hm-ink-faint);font-size:0.75rem;flex-shrink:0;
}