@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@300;400;700&family=Noto+Serif+KR:wght@300;400;600&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Noto Serif KR', serif;
  background: #1a0e2e;
  color: #f0e6d3;
  min-height: 100vh;
  overflow-x: hidden;
}

.stars {
  position: fixed;
  width: 100%; height: 100%;
  top: 0; left: 0;
  z-index: 0;
  pointer-events: none;
}

.star {
  position: absolute;
  border-radius: 50%;
  background: #f0e6d3;
  animation: twinkle var(--d, 3s) ease-in-out infinite;
  opacity: 0;
}

@keyframes twinkle {
  0%, 100% { opacity: 0; }
  50% { opacity: var(--op, 0.7); }
}

nav {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 3rem;
  border-bottom: 0.5px solid rgba(240,230,211,0.15);
}

.logo {
  font-family: 'Gaegu', cursive;
  font-size: 1.5rem;
  letter-spacing: 0.3em;
  color: #d4a96a;
}

.nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}

.nav-links a {
  letter-spacing: 0.15em;
  color: rgba(240,230,211,0.65);
  text-decoration: none;
  font-family: 'Gaegu', cursive;
  transition: color 0.3s;
}

.nav-links a:hover { color: #d4a96a; }

.hero {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 6rem 2rem 4rem;
}

.hero-eyebrow {
  letter-spacing: 0.4em;
  color: #d4a96a;
  font-family: 'Gaegu', cursive;
  margin-bottom: 1.5rem;
  animation: fadeUp 1s ease 0.3s both;
}

.hero-title {
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  animation: fadeUp 1s ease 0.6s both;
}

.hero-title em { font-style: italic; color: #d4a96a; }

.hero-sub {
  font-weight: 300;
  font-style: italic;
  color: rgba(240,230,211,0.65);
  max-width: 480px;
  margin: 0 auto 2.5rem;
  line-height: 1.8;
  animation: fadeUp 1s ease 0.9s both;
}

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

.cta-group {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeUp 1s ease 1.2s both;
}

.btn-primary {
  font-family: 'Gaegu', cursive;
  letter-spacing: 0.2em;
  padding: 1rem 2.2rem;
  background: #d4a96a;
  color: #1a0e2e;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-primary:hover { background: #e8c08a; transform: translateY(-2px); }

.btn-secondary {
  font-family: 'Gaegu', cursive;
  letter-spacing: 0.2em;
  padding: 1rem 2.2rem;
  background: transparent;
  color: #f0e6d3;
  border: 0.5px solid rgba(240,230,211,0.4);
  cursor: pointer;
  transition: all 0.3s;
}

.btn-secondary:hover { border-color: #d4a96a; color: #d4a96a; transform: translateY(-2px); }

.today-section {
  position: relative;
  z-index: 5;
  padding: 3rem 3rem;
  max-width: 900px;
  margin: 0 auto;
}

.today-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.today-card {
  border: 0.5px solid rgba(212,169,106,0.25);
  padding: 2rem 1.5rem;
  text-align: center;
  background: rgba(255,255,255,0.03);
  transition: all 0.3s;
}

.today-card:hover { border-color: rgba(212,169,106,0.5); transform: translateY(-3px); }

.today-icon { font-size: 1.8rem; display: block; margin-bottom: 0.75rem; }

.today-label {
  font-family: 'Gaegu', cursive;
  letter-spacing: 0.2em;
  color: rgba(212,169,106,0.7);
  margin-bottom: 0.5rem;
}

.today-value {
  font-style: italic;
  color: #f0e6d3;
}

.color-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin: 0.75rem auto 0;
}

.menu-section {
  position: relative;
  z-index: 5;
  padding: 3rem 3rem;
  max-width: 1000px;
  margin: 0 auto;
}

.section-label {
  text-align: center;
  font-family: 'Gaegu', cursive;
  letter-spacing: 0.4em;
  color: rgba(212,169,106,0.7);
  margin-bottom: 2.5rem;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.menu-card {
  border: 0.5px solid rgba(212,169,106,0.2);
  padding: 2rem 1.5rem;
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: all 0.3s;
}

.menu-card:hover { border-color: rgba(212,169,106,0.5); transform: translateY(-4px); background: rgba(212,169,106,0.05); }

.menu-icon { font-size: 2rem; margin-bottom: 1rem; }

.menu-name {
  font-family: 'Gaegu', cursive;
  letter-spacing: 0.15em;
  color: #d4a96a;
  margin-bottom: 0.75rem;
}

.menu-desc {
  font-style: italic;
  color: rgba(240,230,211,0.6);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.menu-meta {
  font-family: 'Gaegu', cursive;
  letter-spacing: 0.2em;
  color: rgba(212,169,106,0.5);
}

.star-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.star-card {
  border: 0.5px solid rgba(212,169,106,0.2);
  padding: 1.4rem;
  text-align: center;
  font-family: 'Gaegu', cursive;
  letter-spacing: 0.1em;
  color: rgba(240,230,211,0.8);
  cursor: pointer;
  transition: all 0.3s;
  background: rgba(255,255,255,0.02);
}

.star-card:hover { border-color: #d4a96a; color: #d4a96a; transform: translateY(-2px); }

footer {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 3rem 2rem;
  border-top: 0.5px solid rgba(240,230,211,0.08);
  margin-top: 3rem;
}

footer p {
  font-style: italic;
  color: rgba(240,230,211,0.4);
  margin-top: 0.5rem;
}
/* ===== 휴대폰 화면 개선 ===== */
/* 한국어 단어가 중간에 끊기지 않게 */
body { word-break: keep-all; overflow-wrap: break-word; }

@media (max-width: 640px) {

  /* 상단 메뉴: 로고 아래 한 줄로 */
  nav { flex-direction: column; gap: 0.75rem; padding: 1rem 1rem; }
  .logo { font-size: 1.3rem; letter-spacing: 0.2em; }
  .nav-links { gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
  .nav-links a { letter-spacing: 0.05em; white-space: nowrap; }

  /* 첫 화면 */
  .hero { padding: 3rem 1.25rem 2.5rem; }
  .hero-eyebrow { letter-spacing: 0.15em; }
  .btn-primary, .btn-secondary { letter-spacing: 0.1em; padding: 0.9rem 1.6rem; }

  /* 오늘의 운세 3칸 → 세로로 */
  .today-section, .menu-section { padding: 2rem 1.25rem; }
  .today-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .today-card { padding: 1.25rem 1rem; }
  .today-label, .menu-meta, .section-label { letter-spacing: 0.1em; }

  /* 타로 메뉴 2칸 → 1칸 */
  .menu-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .menu-card { padding: 1.25rem; }
  .menu-name { letter-spacing: 0.05em; }

  /* 별자리 4칸 → 3칸 */
  .star-grid { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .star-card { padding: 0.9rem 0.25rem; letter-spacing: 0; }

  /* 별자리 운세 페이지 */
  body .signs-grid { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  body .sign-btn { padding: 0.8rem 0.25rem; }
  body .category-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  body .category-name { letter-spacing: 0.1em; }

  /* 버튼 글자 간격 줄이기 */
  body .mode-btn, body .draw-btn, body .ai-btn, body .save-btn,
  body .ai-horoscope-btn, body .submit-btn, body .retry-btn { letter-spacing: 0.08em; }

  body .celtic-grid { grid-template-columns: repeat(3, 1fr); }
  body .concern-container { padding: 1.25rem; }
  body .concern-box { padding: 1.5rem 1.25rem; }
}

/* ===== 휴대폰 2차 개선: 한 줄 유지 + 글자 힘 조절 ===== */
@media (max-width: 640px) {
  /* 짧은 이름표는 절대 두 줄로 안 쪼개지게 */
  .nav-links a, .today-label, .menu-name, .menu-meta, .section-label,
  .hero-eyebrow, .star-card, .btn-primary, .btn-secondary,
  body .sign-btn, body .mode-btn, body .draw-btn, body .ai-btn, body .save-btn,
  body .ai-horoscope-btn, body .submit-btn, body .retry-btn, body .cat-btn,
  body .category-name, body .lucky-label, body .position-label,
  body .card-name, body .mini-card .name, body .interp-card-name { white-space: nowrap; }

  /* 손글씨체(Gaegu)는 얇아서 굵게 + 글자 사이 좁게 */
  .logo, .nav-links a, .hero-eyebrow, .today-label, .section-label, .menu-name, .menu-meta,
  .star-card, .btn-primary, .btn-secondary,
  body .sign-btn, body .mode-btn, body .draw-btn, body .ai-btn, body .save-btn,
  body .ai-horoscope-btn, body .submit-btn, body .retry-btn, body .cat-btn,
  body .category-name, body .lucky-label, body .sign-period, body .position-label,
  body .card-name, body .mini-card .name, body .interp-title, body .interp-card-name,
  body .result-title, body .loading { font-weight: 700; letter-spacing: 0.03em; }

  .logo { letter-spacing: 0.15em; }

  /* 작아서 흐린 글자는 키우고 진하게 */
  .nav-links a { color: rgba(240,230,211,0.85); }
  .hero-sub { color: rgba(240,230,211,0.9); font-weight: 400; }
  .today-label { color: #d4a96a; }
  .section-label { color: #d4a96a; }
  .menu-desc { color: rgba(240,230,211,0.8); }
  .menu-meta { color: rgba(212,169,106,0.85); }
  .star-card { color: #f0e6d3; }
  footer p { color: rgba(240,230,211,0.65); }

  body .sign-btn { color: #f0e6d3; }
  body .sign-period { color: #d4a96a; }
  body .category-name { color: #d4a96a; }
  body .category-text, body .interp-card-text { color: rgba(240,230,211,0.9); }
  body .lucky-label { color: #d4a96a; }
  body .position-label { color: #d4a96a; }
  body .mode-btn, body .cat-btn { color: #f0e6d3; }
  body .mini-card .rev, body .card-reversed-badge { color: rgba(212,169,106,0.85); }
}

/* 언어 전환 버튼 */
.nav-links a.lang-switch {
  border: 0.5px solid rgba(212,169,106,0.6);
  color: #d4a96a;
  padding: 0.15rem 0.7rem;
  border-radius: 99px;
  letter-spacing: 0.05em;
}
.nav-links a.lang-switch:hover { background: rgba(212,169,106,0.12); }
@media (max-width: 640px) {
  .star-grid, body .signs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .star-card, body .sign-btn { padding-left: 0.1rem; padding-right: 0.1rem; }
}

/* ===== 전체 화면 공통: 글자 힘 조절 (컴퓨터·폰 모두) ===== */
.logo, .nav-links a, .hero-eyebrow, .today-label, .section-label, .menu-name, .menu-meta,
.star-card, .btn-primary, .btn-secondary,
body .sign-btn, body .mode-btn, body .draw-btn, body .ai-btn, body .save-btn,
body .ai-horoscope-btn, body .submit-btn, body .retry-btn, body .cat-btn,
body .category-name, body .lucky-label, body .sign-period, body .position-label,
body .card-name, body .mini-card .name, body .interp-title, body .interp-card-name,
body .result-title, body .loading { font-weight: 700; letter-spacing: 0.04em; }
.logo { letter-spacing: 0.2em; }
.nav-links a { color: rgba(240,230,211,0.85); }
.hero-sub, .menu-desc, footer p { color: rgba(240,230,211,0.85); font-weight: 400; }
.today-label, .section-label, .menu-meta, body .category-name, body .lucky-label,
body .sign-period, body .position-label { color: #d4a96a; }
.star-card, body .sign-btn, body .mode-btn, body .cat-btn { color: #f0e6d3; }
body .category-text, body .interp-card-text, body .overall-text { color: rgba(240,230,211,0.92); }

/* ===== 컴퓨터 화면: 글자 크기 키우기 ===== */
@media (min-width: 641px) {
  .logo { font-size: 1.7rem; }
  .hero-sub { max-width: 560px; }

  body .card-reversed-badge { color: rgba(212,169,106,0.9); }
}
@media (max-width: 360px) {
}
@media (max-width: 640px) {
  body .ai-btn, body .save-btn, body .ai-horoscope-btn, body .retry-btn { white-space: normal; max-width: 100%; padding-left: 1rem; padding-right: 1rem; }
}

/* ===== 오늘 날짜 ===== */
.today-date, body .today-date {
  text-align: center;
  font-family: 'Noto Serif KR', serif;
  color: rgba(240,230,211,0.85);
  margin: 0 0 1.25rem;
}
body #horo-date { margin: 0.6rem 0 0; }

/* ===== 스프레드 설명 상자 ===== */
.mode-info {
  max-width: 640px;
  margin: -1.5rem auto 2.5rem;
  padding: 1.25rem 1.5rem;
  border: 0.5px solid rgba(212,169,106,0.35);
  border-radius: 10px;
  background: rgba(212,169,106,0.06);
  font-family: 'Noto Serif KR', serif;
  line-height: 1.8;
  color: rgba(240,230,211,0.92);
  position: relative;
  z-index: 5;
}
.mode-info strong {
  display: block;
  font-family: 'Gaegu', cursive;
  font-weight: 700;
  color: #d4a96a;
  margin-bottom: 0.35rem;
}
.mode-steps { margin: 0.9rem 0 0; padding-left: 1.4rem; display: grid; gap: 0.25rem; }
.mode-steps b { color: #d4a96a; font-weight: 600; margin-right: 0.4rem; }
@media (max-width: 640px) {
  .mode-info { margin: -1.5rem 0 2rem; padding: 1rem 1.1rem; }
}

@media (min-width: 641px) {
}

/* ===== 첫 화면 위쪽: 기울임 없이 정자로 ===== */
.hero-title em, .hero-sub, .today-value { font-style: normal; }

/* ===== 기울임 없애기: 타로 메뉴 설명(.menu-desc)만 기울임 유지 ===== */
body *:not(.menu-desc) { font-style: normal !important; }
body *::placeholder { font-style: normal !important; }
.menu-desc { font-style: italic !important; }

@media (min-width: 641px) {
}


/* ===== 로고 = 홈 링크 ===== */
a.logo { text-decoration: none; cursor: pointer; transition: opacity 0.2s; }
a.logo:hover { opacity: 0.8; }
a.logo:focus-visible { outline: 2px solid #d4a96a; outline-offset: 4px; }

/* ===== 메뉴: 지금 있는 페이지 표시 ===== */
.nav-links a.active { color: #d4a96a; }
.nav-links a.active::after { content: ''; display: block; height: 1px; background: #d4a96a; margin-top: 3px; }
/* 맨 위 문구는 길이가 매일 달라서, 좁은 화면에선 두 줄로 자연스럽게 */
.hero-eyebrow { white-space: normal !important; text-wrap: balance; }

/* ===== 면책 문구 ===== */
.disclaimer { max-width: 560px; margin: 1rem auto 0; line-height: 1.7; color: rgba(240,230,211,0.6); text-align: center; }
.page-footer { position: relative; z-index: 5; padding: 2rem 1.25rem 2.5rem; border-top: 0.5px solid rgba(240,230,211,0.08); margin-top: 3rem; }

/* ===== 풀이 4단계 ===== */
.steps { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.steps li { font-family: 'Noto Serif KR', serif; line-height: 1.8; color: rgba(240,230,211,0.92); }
.step-label { display: block; font-family: 'Gaegu', cursive; font-weight: 700; color: #d4a96a; letter-spacing: 0.03em; margin-bottom: 0.1rem; }
.steps li.step-q { padding: 0.75rem 1rem; border-left: 2px solid #d4a96a; background: rgba(212,169,106,0.07); border-radius: 0; }
.disclaimer, .footer-note { color: rgba(240,230,211,0.6); line-height: 1.7; margin-top: 1.5rem; text-align: center; }
.footer-note { max-width: 560px; margin: 1rem auto 0; position: relative; z-index: 5; }
/* 카드 이름이 긴 마이너 카드: 해석 제목은 줄바꿈 허용 */
body .interp-card-name, body .card-name { white-space: normal !important; }

/* ===== 카드 설명 페이지 ===== */
.cp { position: relative; z-index: 5; max-width: 760px; margin: 0 auto; padding: 2rem 1.25rem 1rem; display: grid; gap: 1.25rem; }
.cp-head { text-align: center; display: grid; gap: 0.4rem; justify-items: center; margin-bottom: 0.5rem; }
.cp-eyebrow { font-family: 'Gaegu', cursive; font-weight: 700; color: #d4a96a; letter-spacing: 0.1em; }
.cp-symbol { font-size: 3.5rem; line-height: 1.2; }
.cp-head h1 { font-family: 'Noto Serif KR', serif; font-weight: 400; }
.cp-sub { color: rgba(240,230,211,0.7); }
.cp-kw { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 0.4rem; padding: 0; }
.cp-kw li { border: 0.5px solid rgba(212,169,106,0.5); color: #d4a96a; border-radius: 99px; padding: 0.2rem 0.85rem; }
.cp-box { background: rgba(255,255,255,0.03); border: 0.5px solid rgba(212,169,106,0.22); border-radius: 12px; padding: 1.4rem 1.5rem; }
.cp-box h2 { font-family: 'Gaegu', cursive; font-weight: 700; color: #d4a96a; margin-bottom: 0.6rem; letter-spacing: 0.03em; }
.cp-box h3 { font-family: 'Gaegu', cursive; font-weight: 700; color: #d4a96a; margin: 0.2rem 0 0.4rem; }
.cp-box p { line-height: 1.85; color: rgba(240,230,211,0.92); }
.cp-box p + p { margin-top: 0.5rem; }
.cp-adv { margin-top: 1.1rem !important; }
.cp-areas { display: grid; gap: 1.1rem; }
.cp-area p b { color: #d4a96a; font-weight: 600; margin-right: 0.3rem; }
.cp-faq { border-top: 0.5px solid rgba(212,169,106,0.18); padding: 0.75rem 0; }
.cp-faq:first-of-type { border-top: none; }
.cp-faq summary { cursor: pointer; font-weight: 600; color: #f0e6d3; line-height: 1.6; }
.cp-faq p { margin-top: 0.5rem; }
.cp-related { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cp-related a, .cp-related span { display: inline-block; border: 0.5px solid rgba(212,169,106,0.4); border-radius: 8px; padding: 0.5rem 0.9rem; color: #f0e6d3; text-decoration: none; }
.cp-related a:hover { border-color: #d4a96a; color: #d4a96a; }
.cp-cta { text-align: center; margin: 0.5rem 0 1rem; }
.cp-cta .btn-primary { display: inline-block; text-decoration: none; white-space: normal; }
.card-more { display: inline-block; margin-top: 0.9rem; color: #d4a96a; text-decoration: none; border-bottom: 0.5px solid rgba(212,169,106,0.6); }
.card-more:hover { color: #e8c08a; }
.card-index { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.card-index .star-card { text-decoration: none; padding: 0.8rem 1.1rem; }

/* ===== 디자인팀: ARCANA 카드 그림·금테·뒷면 ===== */
.arc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
.arc-frame { position: relative; border-radius: 8px; padding: 4px; background: linear-gradient(145deg, #f3d9a4, #b8874a 40%, #f0d29a 60%, #9c6d36); box-shadow: 0 6px 18px rgba(0,0,0,0.45), 0 0 14px rgba(212,169,106,0.18); }
.arc-frame .arc-inner { position: relative; width: 100%; height: 100%; border-radius: 6px; overflow: hidden; background: #1a0e2e; display: flex; align-items: center; justify-content: center; }
.arc-frame .arc-inner::after { content: ''; position: absolute; inset: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(26,14,46,0.6), inset 0 0 12px rgba(26,14,46,0.35); pointer-events: none; }
.arc-fallback { font-size: 2.2rem; }
/* 카드 뒷면 */
.arc-back { background: radial-gradient(circle at 50% 50%, #3a2463 0%, #24143f 55%, #160a29 100%) !important; border: none !important; padding: 0 !important; overflow: hidden; }
.arc-back::before { content: ''; position: absolute; inset: 6px; border: 1.5px solid rgba(212,169,106,0.75); border-radius: 5px; }
.arc-back::after { content: ''; position: absolute; inset: 10px; border: 0.5px solid rgba(212,169,106,0.4); border-radius: 3px;
  background: repeating-linear-gradient(45deg, rgba(212,169,106,0.06) 0 1px, transparent 1px 12px), repeating-linear-gradient(-45deg, rgba(212,169,106,0.06) 0 1px, transparent 1px 12px); }
.arc-back .arc-sigil { position: relative; z-index: 2; width: 62%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(212,169,106,0.7); display: flex; align-items: center; justify-content: center; flex-direction: column; background: radial-gradient(circle, rgba(212,169,106,0.18), transparent 70%); }
.arc-back .arc-sigil b { font-size: 1.9rem; color: #f0d29a; line-height: 1; text-shadow: 0 0 10px rgba(240,210,154,0.6); }
.arc-back .arc-sigil small { font-family: 'Noto Serif KR', serif; font-size: 0.55rem; letter-spacing: 0.3em; color: #d4a96a; margin-top: 0.35rem; padding-left: 0.3em; }
.arc-back .arc-moon { position: absolute; z-index: 2; font-size: 0.8rem; color: rgba(212,169,106,0.8); }
.arc-back .arc-moon.t { top: 14px; } .arc-back .arc-moon.b { bottom: 14px; }
/* 카드 뽑기 화면 */
.tarot-card-item { width: 130px !important; height: 225px !important; border: none !important; }
.card-face.arc-face { padding: 4px !important; background: linear-gradient(145deg, #f3d9a4, #b8874a 40%, #f0d29a 60%, #9c6d36) !important; border: none !important; box-shadow: 0 6px 18px rgba(0,0,0,0.45); }
.card-face.arc-face .arc-inner { position: relative; width: 100%; height: 100%; border-radius: 6px; overflow: hidden; background: #1a0e2e; display: flex; align-items: center; justify-content: center; }
.card-caption { margin-top: 0.6rem; font-family: 'Gaegu', cursive; color: #d4a96a; line-height: 1.3; opacity: 0; transition: opacity 0.4s 0.3s; }
.card-caption small { display: block; color: rgba(212,169,106,0.7); }
.card-slot.done .card-caption { opacity: 1; }
/* 고민상담 작은 카드 */
.mini-card.arc-frame { width: 92px; height: 160px; padding: 3px; display: block; border: none; }
.mini-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.mini-wrap .name { font-family: 'Gaegu', cursive; color: #d4a96a; text-align: center; max-width: 100px; }
.mini-wrap .rev { color: rgba(212,169,106,0.6); }
.is-rev .arc-img { transform: rotate(180deg); }
/* 카드 설명 페이지 */
.cp-card { width: 180px; height: 312px; margin: 0.4rem auto; }
/* 첫 화면 카드 목록 */
.card-index .star-card { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.card-index .ci-thumb { width: 70px; height: 121px; padding: 2px; }
/* 카드 목록 페이지 */
.ci-more { text-align: center; margin-top: 1.2rem; }
.ci-sub { color: rgba(240,230,211,0.7); margin: -0.3rem 0 1rem; }
.card-index .star-card { width: 104px; padding: 0.7rem 0.3rem; line-height: 1.3; text-align: center; word-break: keep-all; }
@media (max-width: 400px) { .card-index .star-card { width: 92px; } .card-index .ci-thumb { width: 62px; height: 107px; } }
.cp-cta p { margin-top: 1rem; }

/* ===== 고민상담 풀이 · 카드 일기 ===== */
.cr-error { color: #f0c27a; min-height: 1.2em; margin: 0.4rem 0 0; }
.cr-result { font-family: 'Noto Serif KR', serif; color: rgba(240,230,211,0.9); line-height: 1.85; }
.cr-result p { margin: 0.3rem 0 0; }
.cr-worry { background: rgba(212,169,106,0.07); border-left: 2px solid #d4a96a; border-radius: 4px; padding: 1rem 1.2rem; margin-bottom: 1.4rem; }
.cr-worry p:first-of-type { font-style: normal; word-break: keep-all; overflow-wrap: anywhere; }
.cr-how { color: rgba(240,230,211,0.7); }
.cr-card { padding: 1rem 0; border-bottom: 0.5px solid rgba(212,169,106,0.15); }
.cr-sum { margin: 1.2rem 0 0.6rem; }
.cr-care { margin-top: 1rem; color: rgba(240,230,211,0.75); }
.jr-box { margin-top: 1.6rem; display: grid; gap: 0.6rem; justify-items: center; text-align: center; }
.jr-note { width: 100%; background: rgba(255,255,255,0.05); border: 0.5px solid rgba(212,169,106,0.35); color: #f0e6d3; font-family: 'Noto Serif KR', serif; padding: 0.8rem 1rem; border-radius: 8px; line-height: 1.7; resize: vertical; box-sizing: border-box; }
.jr-note:focus { outline: none; border-color: #d4a96a; }
.jr-save { font-family: 'Gaegu', cursive; letter-spacing: 0.08em; padding: 0.8rem 1.6rem; background: #d4a96a; color: #1a0e2e; border: none; border-radius: 6px; cursor: pointer; max-width: 100%; white-space: normal; }
.jr-save:disabled { background: rgba(212,169,106,0.35); cursor: default; }
.jr-msg { min-height: 1.2em; margin: 0; color: #d4a96a; }
.draw-note { text-align: center; min-height: 1.4em; color: rgba(240,230,211,0.8); margin: -1.5rem auto 1.5rem; max-width: 560px; padding: 0 1rem; word-break: keep-all; }
.jr-stats { text-align: center; }
.jr-streak { color: #f0d29a; }
.jr-top { display: flex; gap: 0.9rem; align-items: center; justify-content: center; margin-top: 0.8rem; text-align: left; }
.jr-dim { color: rgba(240,230,211,0.65); }
.jr-privacy { text-align: center; margin-top: 1.5rem; }
.jr-thumb { width: 52px; height: 90px; padding: 2px; flex: none; display: block; }
.jr-meta { color: #d4a96a; margin-bottom: 0.6rem; }
.jr-cards { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 0.8rem; }
.jr-c { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; width: 68px; text-align: center; line-height: 1.25; word-break: keep-all; }
.jr-c small { display: block; color: rgba(212,169,106,0.75); }
.jr-line { margin: 0.5rem 0; }
.jr-entry .step-label { display: block; }
.jr-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-top: 0.5rem; }
.jr-mini { font-family: 'Gaegu', cursive; padding: 0.45rem 1rem; background: transparent; color: #d4a96a; border: 0.5px solid rgba(212,169,106,0.6); border-radius: 4px; cursor: pointer; min-height: 40px; }
.jr-mini:hover { background: rgba(212,169,106,0.1); }
/* 하단 안내 링크 */
.footer-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; justify-content: center; margin: 0 0 0.8rem; padding: 0; list-style: none; }
.footer-links a { color: rgba(240,230,211,0.7); text-decoration: none; padding: 0.3rem 0; display: inline-block; }
.footer-links a:hover { color: #d4a96a; }
#journal .btn-primary, .cp-cta .btn-primary { white-space: normal; display: inline-block; max-width: 100%; box-sizing: border-box; text-align: center; }
.jr-entry, .jr-stats + .cp-box { margin-top: 1rem; }

/* ===== 카드 뽑는 의식 ===== */
.ritual { max-width: 640px; margin: 0 auto 1.5rem; padding: 0 0.5rem; }
.rt-stack { position: relative; width: 110px; height: 190px; margin: 1rem auto 2rem; }
.rt-back { position: absolute; inset: 0; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.45); animation: rtShuffle 1.2s ease-in-out; }
.rt-stack .rt-back:nth-child(odd) { animation-name: rtShuffleL; }
.rt-stack .rt-back:nth-child(2) { animation-delay: .05s } .rt-stack .rt-back:nth-child(3) { animation-delay: .1s }
.rt-stack .rt-back:nth-child(4) { animation-delay: .15s } .rt-stack .rt-back:nth-child(5) { animation-delay: .2s } .rt-stack .rt-back:nth-child(6) { animation-delay: .25s }
@keyframes rtShuffle { 0%,100% { transform: translateX(0) rotate(0) } 30% { transform: translateX(70px) rotate(8deg) } 60% { transform: translateX(-10px) rotate(-2deg) } }
@keyframes rtShuffleL { 0%,100% { transform: translateX(0) rotate(0) } 30% { transform: translateX(-70px) rotate(-8deg) } 60% { transform: translateX(10px) rotate(2deg) } }
.rt-spread { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.55rem; justify-items: center; }
.rt-card { position: relative; width: 100%; max-width: 74px; aspect-ratio: 300 / 520; border-radius: 6px; cursor: pointer; padding: 0; transform: rotate(var(--tilt)); box-shadow: 0 3px 10px rgba(0,0,0,0.4); transition: transform .3s, box-shadow .3s, opacity .5s; animation: rtDeal .45s ease-out both; animation-delay: calc(var(--i) * 25ms); }
.rt-card .arc-sigil b { font-size: 1rem; } .rt-card .arc-sigil small { display: none; } .rt-card .arc-moon { display: none; }
.rt-card:hover, .rt-card:focus-visible { transform: translateY(-6px) rotate(0); box-shadow: 0 0 16px rgba(240,210,154,0.55); outline: none; }
.rt-card.chosen { transform: translateY(-12px) scale(1.08) rotate(0); box-shadow: 0 0 0 2px #f0d29a, 0 0 22px rgba(240,210,154,0.8); z-index: 2; }
.rt-card.fade { opacity: 0.12; pointer-events: none; }
@keyframes rtDeal { from { opacity: 0; transform: translateY(-30px) rotate(0) scale(.8); } to { opacity: 1; } }
@media (max-width: 400px) { .rt-spread { grid-template-columns: repeat(6, 1fr); gap: 0.4rem; } }
@media (prefers-reduced-motion: reduce) { .rt-back, .rt-card { animation: none !important; } .card-inner { transition: none !important; } }

/* ===== 켈틱 크로스: 십자 + 세로줄 ===== */
.cards-area.celtic-layout { display: grid; grid-template-columns: repeat(4, auto); grid-template-areas: ". c5 . c10" "c4 c1 c6 c9" ". c3 . c8" ". . . c7"; gap: 0.8rem 0.9rem; justify-content: center; align-items: start; }
.celtic-layout .card-slot { width: 96px; }
.celtic-layout .tarot-card-item { width: 96px !important; height: 166px !important; }
.celtic-layout .position-label { font-size: 0.72rem; min-height: 2.2em; line-height: 1.25; }
.celtic-layout .position-label b { color: #f0d29a; }
.celtic-layout .card-caption { font-size: 0.75rem; }
.celtic-layout .pos-1 { grid-area: c1; } .celtic-layout .pos-3 { grid-area: c3; } .celtic-layout .pos-4 { grid-area: c4; }
.celtic-layout .pos-5 { grid-area: c5; } .celtic-layout .pos-6 { grid-area: c6; } .celtic-layout .pos-7 { grid-area: c7; }
.celtic-layout .pos-8 { grid-area: c8; } .celtic-layout .pos-9 { grid-area: c9; } .celtic-layout .pos-10 { grid-area: c10; }
.celtic-layout .pos-2 { grid-area: c1; z-index: 3; transform: rotate(90deg) translate(42%, 0); pointer-events: none; }
.celtic-layout .pos-2 .tarot-card-item { pointer-events: auto; }
.celtic-layout .pos-2 .position-label, .celtic-layout .pos-2 .card-caption { visibility: hidden; }
@media (max-width: 480px) {
  .cards-area.celtic-layout { gap: 0.5rem 0.4rem; }
  .celtic-layout .card-slot { width: 66px; }
  .celtic-layout .tarot-card-item { width: 66px !important; height: 114px !important; }
  .celtic-layout .position-label { font-size: 0.62rem; letter-spacing: 0; }
  .celtic-layout .card-caption { font-size: 0.66rem; }
  .celtic-layout .arc-sigil b { font-size: 1rem; } .celtic-layout .arc-sigil small, .celtic-layout .arc-moon { display: none; }
}
/* 풀이 */
.interp-frame { color: #f0d29a; margin: 0.2rem 0 0.4rem; line-height: 1.7; font-family: 'Noto Serif KR', serif; }
.interp-summary { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 0.5px solid rgba(212,169,106,0.3); font-family: 'Noto Serif KR', serif; line-height: 1.8; }
.interp-summary p { margin: 0.35rem 0; color: rgba(240,230,211,0.9); }
.share-btn { display: block; margin: 1.6rem auto 0.3rem; font-family: 'Gaegu', cursive; letter-spacing: 0.06em; padding: 0.85rem 1.6rem; background: linear-gradient(135deg, #f0d29a, #c9964f); color: #1a0e2e; border: none; border-radius: 8px; cursor: pointer; max-width: 100%; white-space: normal; box-shadow: 0 4px 16px rgba(212,169,106,0.35); }
.share-msg { text-align: center; }
.celtic-layout .position-label { white-space: normal !important; word-break: keep-all; overflow-wrap: anywhere; }
.celtic-layout .pos-2 { transform: translateY(46%) rotate(90deg); }
@media (max-width: 360px) {
  .celtic-layout .card-slot { width: 58px; }
  .celtic-layout .tarot-card-item { width: 58px !important; height: 100px !important; }
  .cards-area.celtic-layout { gap: 0.4rem 0.3rem; }
}

/* ===== 예/아니오 타로 ===== */
.yn-ask { max-width: 520px; margin: 0 auto 1.6rem; display: grid; gap: 0.5rem; }
.yn-ask label { color: rgba(240,230,211,0.8); text-align: center; }
.yn-input { width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.05); border: 0.5px solid rgba(212,169,106,0.4); color: #f0e6d3; font-family: 'Noto Serif KR', serif; padding: 0.9rem 1rem; border-radius: 8px; }
.yn-input:focus { outline: none; border-color: #d4a96a; }
.yn-result { text-align: center; font-family: 'Noto Serif KR', serif; line-height: 1.8; }
.yn-q { text-align: left; background: rgba(212,169,106,0.07); border-left: 2px solid #d4a96a; border-radius: 4px; padding: 0.8rem 1rem; margin-bottom: 1.2rem; overflow-wrap: anywhere; }
.yn-q .step-label { display: block; }
.yn-head { font-family: 'Gaegu', cursive; color: rgba(212,169,106,0.85); letter-spacing: 0.15em; margin: 0; }
.yn-answer { font-weight: 600; margin: 0.1rem 0 0.4rem; color: #f0d29a; text-shadow: 0 0 22px rgba(240,210,154,0.45); line-height: 1.2; word-break: keep-all; }
.yn-no .yn-answer { color: #d9b3c9; text-shadow: 0 0 22px rgba(217,179,201,0.35); }
.yn-maybe .yn-answer { color: #b9c4ea; text-shadow: 0 0 22px rgba(185,196,234,0.35); }
.yn-card { color: #d4a96a; margin: 0 0 0.8rem; }
.yn-body, .yn-rev { text-align: left; color: rgba(240,230,211,0.92); }
.yn-rev { color: rgba(240,230,211,0.75); }
.yn-result .steps { text-align: left; }
.yn-note { color: rgba(240,230,211,0.65); margin-top: 1rem; }
.yn-main { padding-top: 0; }
.yn-tips { padding-left: 1.2rem; line-height: 1.8; }
.yn-tips li { margin-bottom: 0.5rem; }
.yn-guide h3 { color: #d4a96a; margin-top: 1.2rem; }
/* ===== 속마음 타로 ===== */
.h-status { border: none; margin: 0 auto 1.6rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; max-width: 560px; }
.h-status legend { width: 100%; text-align: center; color: rgba(240,230,211,0.8); margin-bottom: 0.6rem; }
.h-chip { cursor: pointer; }
.h-chip input { position: absolute; opacity: 0; pointer-events: none; }
.h-chip span { display: inline-block; font-family: 'Gaegu', cursive; padding: 0.55rem 1.1rem; border: 0.5px solid rgba(212,169,106,0.4); border-radius: 20px; color: rgba(240,230,211,0.8); transition: all .2s; }
.h-chip input:checked + span { background: rgba(212,169,106,0.18); border-color: #d4a96a; color: #f0d29a; }
.h-chip input:focus-visible + span { outline: 2px solid #f0d29a; outline-offset: 2px; }
.h-chip { position: relative; } .h-chip input { left: 0; top: 0; width: 1px; height: 1px; margin: 0; }
.h-status { min-width: 0; max-width: 100%; box-sizing: border-box; } .h-status legend { padding: 0; }
/* ===== 2027 신년 카드 ===== */
.cards-area.year-layout { display: grid; grid-template-columns: repeat(4, auto); gap: 0.9rem 0.8rem; justify-content: center; }
.year-layout .card-slot { width: 92px; }
.year-layout .tarot-card-item { width: 92px !important; height: 159px !important; }
.year-layout .arc-sigil small, .year-layout .arc-moon { display: none; }
.year-layout .card-slot.is-now .tarot-card-item { box-shadow: 0 0 0 2px #f0d29a, 0 0 22px rgba(240,210,154,0.7); border-radius: 8px; }
.flip-all { display: block; margin: -1.5rem auto 2.5rem; font-family: 'Gaegu', cursive; padding: 0.7rem 1.4rem; background: transparent; color: #f0d29a; border: 0.5px solid #d4a96a; border-radius: 6px; cursor: pointer; }
.yr-kw { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.3rem 0 0.8rem; }
.yr-kw span { border: 0.5px solid #d4a96a; color: #f0d29a; border-radius: 20px; padding: 0.3rem 0.9rem; }
.yr-top { margin-top: 0; border-top: none; padding-top: 0; margin-bottom: 1rem; }
.yr-now { color: #f0d29a; }
.yr-act { margin: 0.5rem 0 0; }
.yr-act .step-label { display: block; }
.interp-card.is-now { background: rgba(240,210,154,0.06); border-radius: 8px; padding: 0.8rem; }
@media (max-width: 480px) {
  .cards-area.year-layout { grid-template-columns: repeat(3, auto); gap: 0.7rem 0.6rem; }
  .year-layout .card-slot { width: 84px; }
  .year-layout .tarot-card-item { width: 84px !important; height: 145px !important; }
}
@media (max-width: 340px) {
  .year-layout .card-slot { width: 76px; }
  .year-layout .tarot-card-item { width: 76px !important; height: 131px !important; }
}
/* ===== MBTI × 타로 ===== */
.mb-picker { display: grid; gap: 0.9rem; max-width: 560px; margin: 0 auto 1.5rem; }
.mb-gname { text-align: center; color: rgba(212,169,106,0.85); margin: 0 0 0.4rem; letter-spacing: 0.1em; }
.mb-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.mb-btn { font-family: 'Noto Serif KR', serif; letter-spacing: 0.06em; padding: 0.75rem 0; background: rgba(255,255,255,0.03); color: #f0e6d3; border: 0.5px solid rgba(212,169,106,0.35); border-radius: 8px; cursor: pointer; min-height: 44px; }
.mb-btn:hover, .mb-btn.active { background: rgba(212,169,106,0.18); border-color: #f0d29a; color: #f0d29a; }
.mb-main { text-align: center; }
.mb-card { display: block; margin: 0.8rem auto 0.6rem; }
.mb-nick { font-family: 'Noto Serif KR', serif; font-weight: 400; color: #f0d29a; margin: 0.4rem 0 0.2rem; word-break: keep-all; }
.mb-cardname { color: #d4a96a; margin: 0 0 0.6rem; }
.mb-sec { text-align: left; margin-top: 1rem; }
.mb-sec h3 { color: #d4a96a; margin: 0 0 0.3rem; }
.mb-sec p { margin: 0; line-height: 1.8; }
.mb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4rem; }
@media (max-width: 600px) { .mb-two { grid-template-columns: 1fr; } }
.mb-tip { background: rgba(212,169,106,0.07); border-left: 2px solid #d4a96a; padding: 0.8rem 1rem; border-radius: 4px; }
.mb-today { margin-top: 1rem; }
.mb-today h2 { color: #f0d29a; }
.mb-today-row { display: flex; gap: 1rem; align-items: flex-start; }
.mb-today-row .mb-card { margin: 0; flex: none; }
.mb-friend { text-align: center; }

/* ===== 영어판 글꼴 (한글판은 그대로) ===== */
html[lang="en"] body, html[lang="en"] body * { font-family: 'Lora', Georgia, 'Times New Roman', serif !important; }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] .hero-title, html[lang="en"] .logo, html[lang="en"] .section-label,
html[lang="en"] .cp-eyebrow, html[lang="en"] .menu-name, html[lang="en"] .interp-title, html[lang="en"] .result-title,
html[lang="en"] .yn-answer, html[lang="en"] .mb-nick, html[lang="en"] .hero-eyebrow, html[lang="en"] .tarot-container > div:first-child p:first-child,
html[lang="en"] .concern-container > div:first-child p:first-child, html[lang="en"] .horoscope-container > div:first-child p:first-child,
html[lang="en"] .jr-streak, html[lang="en"] .card-name, html[lang="en"] .card-caption {
  font-family: 'Cormorant Garamond', 'Lora', Georgia, serif !important; }
html[lang="en"] .hero-title, html[lang="en"] h1 { font-weight: 600; letter-spacing: 0.01em; }
html[lang="en"] .menu-name, html[lang="en"] .section-label, html[lang="en"] .cp-eyebrow { font-weight: 600; font-size: 1.1em; }
html[lang="en"] .card-caption { font-size: 1.05rem; font-weight: 600; }
@font-face { font-family: 'Lora'; src: url('../fonts/lora.woff') format('woff'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('../fonts/lora-italic.woff') format('woff'); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant.woff') format('woff'); font-weight: 300 700; font-style: normal; font-display: swap; }
@media (max-width: 480px) { html[lang="en"] .nav-links { gap: 0.9rem; } html[lang="en"] .nav-links a { font-size: 0.9rem; letter-spacing: 0; } }
/* ===== 안전 안내 ===== */
.safety-box { max-width: 600px; margin: 0 auto 1.5rem; background: rgba(240,210,154,0.08); border: 1px solid #d4a96a; border-radius: 12px; padding: 1.3rem 1.4rem; text-align: left; line-height: 1.8; color: #f0e6d3; }
.safety-title { color: #f0d29a; margin: 0 0 0.5rem; }
.safety-box ul { padding-left: 1.2rem; margin: 0.6rem 0; }
.safety-box li { margin-bottom: 0.35rem; }
.email-pending { color: rgba(240,230,211,0.75); font-style: normal; }
/* ===== 2차 검수 반영 ===== */
a.menu-card, a.star-card { display: block; text-decoration: none; color: inherit; }
a.menu-card:focus-visible, a.star-card:focus-visible, .tarot-card-item:focus-visible { outline: 2px solid #f0d29a; outline-offset: 3px; }
.card-index .star-card { white-space: normal !important; overflow-wrap: break-word; }
@media (max-width: 600px) { .nav-links a { display: inline-block; padding: 0.55rem 0.15rem; min-height: 24px; } }
.celtic-layout .card-caption { display: none; }
.celtic-layout .pos-2 { transform: translateY(26%) rotate(90deg); }
.celtic-layout .position-label { overflow-wrap: normal !important; word-break: normal !important; hyphens: auto; }
@media (max-width: 360px) { html[lang="en"] .celtic-layout .position-label { font-size: 0.56rem; } }
html[lang="ko"] .celtic-layout .position-label { word-break: keep-all !important; }

/* ===== 글자 크기 6단계 (사이트 공통 기준) ===== */
:root {
  --fs-display: 2.25rem;  /* 페이지 이름: 카드 이름 등 */
  --fs-title: 1.625rem;   /* 핵심 한마디 */
  --fs-h: 1.375rem;       /* 소제목 (손글씨) */
  --fs-lead: 1.125rem;    /* 위로 문장, 강조 본문 */
  --fs-body: 1rem;        /* 본문 */
  --fs-small: 0.875rem;   /* 작은 안내 */
  --c-night: #1a0e2e; --c-night-2: #24163d; --c-panel: #2a1c45; --c-line: rgba(212,169,106,.28);
  --c-cream: #f0e6d3; --c-muted: #bfb2c9; --c-gold: #d4a96a; --c-gold-soft: rgba(212,169,106,.14);
  --c-lav: #b9a6ff; --c-lav-soft: rgba(185,166,255,.14); --c-ink: #2c1d45;
  --rose: #f2a7b8; --lav: #b9a6ff; --sun: #f3d27a; --mint: #9fdcc0;
  --ff-hand: 'Gaegu', 'Nanum Pen Script', cursive; --ff-body: 'Noto Serif KR', 'Nanum Myeongjo', serif;
}

/* ===== 새 카드 설명 페이지 (위로 한마디 중심) ===== */
.cv2 { position: relative; z-index: 5; max-width: 640px; margin: 0 auto; padding: 1.25rem 16px 1rem; display: grid; gap: 26px;
  font-family: var(--ff-body); font-size: var(--fs-body); line-height: 1.75; color: var(--c-cream); word-break: keep-all; overflow-wrap: anywhere; }
.cv2 p { margin: 0; }
.cv2 h1, .cv2 h3 { font-family: var(--ff-hand); font-weight: 700; margin: 0; line-height: 1.25; text-wrap: balance; }
.cv2 h3 { font-size: var(--fs-h); color: var(--c-gold); }
.cv2 h3 small { font-family: var(--ff-body); font-weight: 400; font-size: var(--fs-small); color: var(--c-muted); }
.cv2 h4 { font-family: var(--ff-body); font-size: var(--fs-body); font-weight: 600; color: var(--c-gold); margin: 0 0 2px; }
.cv2-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--c-night-2); flex: none; }
.cv2-ic.round { border-radius: 50%; border: 1.5px solid var(--c-line); }
.cv2-ic svg { width: 22px; height: 22px; }

.cv2-hero { display: grid; justify-items: center; gap: 10px; text-align: center; }
.cv2-eyebrow { color: var(--c-gold); letter-spacing: .12em; font-size: var(--fs-small); }
.cv2-card { position: relative; width: min(170px, 46vw); aspect-ratio: 300 / 515; border-radius: 14px; overflow: hidden; border: 2px solid var(--c-gold);
  box-shadow: 0 0 0 6px var(--c-gold-soft), 0 0 48px rgba(185,166,255,.35); transition: transform .7s cubic-bezier(.5,1.6,.4,1); animation: cv2float 5s ease-in-out infinite; max-width: 100%; display: grid; place-items: center; background: var(--c-panel); }
.cv2-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cv2-card .arc-fallback { font-size: 3rem; }
.cv2-card.is-rev { transform: rotate(180deg); }
@keyframes cv2float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.cv2-hero h1 { font-size: var(--fs-display); color: var(--c-cream); }
.cv2-sub { color: var(--c-muted); font-size: var(--fs-small); letter-spacing: .06em; margin-top: -6px !important; }
.cv2-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 2px 0 0; padding: 0; }
.cv2-chips li { display: flex; align-items: center; gap: 6px; padding: 4px 14px 4px 6px; border-radius: 999px; background: var(--c-lav-soft); border: 1px solid rgba(185,166,255,.35); font-family: var(--ff-hand); font-size: var(--fs-lead); }
.cv2-chips li span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--c-night-2); }
.cv2-chips svg { width: 16px; height: 16px; }

.cv2-switch { justify-self: center; display: flex; background: var(--c-night-2); border: 1px solid var(--c-line); border-radius: 999px; padding: 4px; gap: 4px; }
.cv2-switch button { font-family: var(--ff-hand); font-size: var(--fs-lead); color: var(--c-muted); background: none; border: 0; border-radius: 999px; padding: 4px 20px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.cv2-switch button[aria-selected="true"] { background: var(--c-gold); color: var(--c-night); }
.cv2-switch button i { display: inline-block; width: 12px; height: 18px; border: 2px solid currentColor; border-radius: 3px; position: relative; }
.cv2-switch button i::after { content: ""; position: absolute; left: 50%; top: 2px; translate: -50% 0; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.cv2-switch button.rv i { rotate: 180deg; }

.cv2-comfort { position: relative; background: var(--c-cream); color: var(--c-ink); border-radius: 26px; padding: 24px 22px 22px; text-align: center; display: grid; gap: 10px; animation: cv2fade .45s ease; }
.cv2-comfort::before { content: ""; position: absolute; top: -12px; left: 50%; translate: -50% 0; border: 12px solid transparent; border-top: 0; border-bottom-color: var(--c-cream); }
.cv2-comfort[hidden] { display: none; }
.cv2-emp { font-family: var(--ff-hand); font-weight: 700; font-size: var(--fs-title); line-height: 1.3; color: #5b3fa6; }
.cv2-say { font-size: var(--fs-lead); line-height: 1.75; }
.cv2-from { font-size: var(--fs-small); color: #7b6a92; letter-spacing: .06em; }
@keyframes cv2fade { from { opacity: .2; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }

.cv2-ask { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; }
.cv2-ask .cv2-ic { width: 44px; height: 44px; }
.cv2-ask h4 { color: var(--c-lav); }
.cv2-bubble { background: var(--c-lav-soft); border: 1px dashed rgba(185,166,255,.5); border-radius: 14px 14px 14px 4px; padding: 10px 14px; line-height: 1.7; }

.cv2-glance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cv2-tile { background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 16px; padding: 12px 6px; text-align: center; display: grid; gap: 4px; justify-items: center; align-content: start; min-width: 0; }
.cv2-tile .lab { font-size: var(--fs-small); color: var(--c-muted); }
.cv2-tile .val { font-family: var(--ff-hand); font-weight: 700; font-size: var(--fs-h); line-height: 1.2; }
.cv2-tile svg { width: 42px; height: 42px; }
.cv2-light { display: flex; gap: 5px; background: #120a20; padding: 6px 8px; border-radius: 999px; margin-block: 9px; }
.cv2-light i { width: 12px; height: 12px; border-radius: 50%; background: #3a2c4f; }
.cv2-light i.on.no { background: #f08a8a; box-shadow: 0 0 10px #f08a8a; }
.cv2-light i.on.hold { background: var(--sun); box-shadow: 0 0 10px var(--sun); }
.cv2-light i.on.yes { background: #8fe0a6; box-shadow: 0 0 10px #8fe0a6; }

.cv2-fold { background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 20px; overflow: hidden; }
.cv2-fold > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 40px 1fr 24px; gap: 12px; align-items: center; padding: 14px 16px; }
.cv2-fold > summary::-webkit-details-marker { display: none; }
.cv2-fold > summary b { font-family: var(--ff-hand); font-size: var(--fs-h); font-weight: 700; color: var(--c-gold); display: block; line-height: 1.2; }
.cv2-fold > summary small { color: var(--c-muted); font-size: var(--fs-small); }
.cv2-fold > summary .pm { font-size: 1.4rem; color: var(--c-gold); text-align: center; transition: rotate .25s; }
.cv2-fold[open] > summary .pm { rotate: 45deg; }
.cv2-in { padding: 14px 16px 18px; display: grid; gap: 14px; border-top: 1px dashed var(--c-line); }
.cv2-todo { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.cv2-areas { display: grid; gap: 8px; }
.cv2-area { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--c-night-2); border-left: 4px solid var(--c); }
.cv2-area .cv2-ic { width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--c) 22%, transparent); }
.cv2-area .cv2-ic svg { width: 20px; height: 20px; }
.cv2-area > div, .cv2-todo > div, .cv2-ask > div { min-width: 0; }
.cv2-area p, .cv2-todo p { line-height: 1.7; }

.cv2-story { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.cv2-pic { position: relative; width: min(170px, 40vw); aspect-ratio: 300 / 515; border-radius: 12px; overflow: hidden; border: 1px solid var(--c-line); max-width: 100%; }
.cv2-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv2-dot { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2px solid var(--c-night); background: var(--sun); color: var(--c-night);
  font: 700 13px/22px var(--ff-body); text-align: center; cursor: pointer; padding: 0; animation: cv2ping 2.4s infinite; }
.cv2-dot[aria-pressed="true"] { background: var(--lav); animation: none; box-shadow: 0 0 0 5px rgba(185,166,255,.4); }
@keyframes cv2ping { 0% { box-shadow: 0 0 0 0 rgba(243,210,122,.6); } 70% { box-shadow: 0 0 0 12px rgba(243,210,122,0); } 100% { box-shadow: 0 0 0 0 rgba(243,210,122,0); } }
.cv2-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.cv2-notes li { display: grid; grid-template-columns: 24px 1fr; gap: 8px; padding: 6px 8px; border-radius: 12px; line-height: 1.7; cursor: pointer; }
.cv2-notes li.on { background: var(--c-lav-soft); }
.cv2-notes .n { width: 22px; height: 22px; margin-top: 3px; border-radius: 50%; background: var(--sun); color: var(--c-night); font: 700 12px/22px var(--ff-body); text-align: center; }
.cv2-notes li.on .n { background: var(--lav); }
.cv2-qa { display: grid; gap: 10px; }
.cv2-qa div { display: grid; grid-template-columns: 26px 1fr; gap: 10px; line-height: 1.7; }
.cv2-qa .q { width: 26px; height: 26px; border-radius: 50%; background: var(--c-gold); color: var(--c-night); display: grid; place-items: center; font-family: var(--ff-hand); font-weight: 700; }
.cv2-qa b { display: block; font-weight: 600; }

.cv2-rel-h { text-align: center; }
.cv2-fan { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; }
.cv2-fan a { display: grid; justify-items: center; gap: 6px; text-decoration: none; color: var(--c-cream); font-family: var(--ff-hand); font-weight: 700; font-size: var(--fs-lead); }
.cv2-mini { width: 84px; aspect-ratio: 300 / 515; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--c-gold); transition: transform .3s; max-width: 100%; }
.cv2-fan a:nth-child(odd) .cv2-mini { rotate: -6deg; } .cv2-fan a:nth-child(even) .cv2-mini { rotate: 6deg; }
.cv2-fan a:hover .cv2-mini, .cv2-fan a:focus-visible .cv2-mini { transform: translateY(-6px) scale(1.04); }
.cv2-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv2-cta { text-align: center; display: grid; gap: 14px; justify-items: center; }
.cv2-btn { font-family: var(--ff-hand); font-weight: 700; font-size: var(--fs-h); background: linear-gradient(180deg, var(--sun), var(--c-gold)); color: var(--c-night); border-radius: 999px; padding: 10px 24px; text-decoration: none; box-shadow: 0 6px 24px rgba(212,169,106,.35); max-width: 100%; }
.cv2 .card-more { font-size: var(--fs-body); }
.cv2 button:focus-visible, .cv2 summary:focus-visible, .cv2 a:focus-visible, .cv2 li:focus-visible { outline: 2px solid var(--lav); outline-offset: 3px; }
@media (max-width: 480px) { .cv2-story { grid-template-columns: 1fr; justify-items: center; } .cv2-pic { width: min(200px, 60vw); } }
@media (max-width: 360px) { .cv2-tile .val { font-size: var(--fs-lead); } .cv2-fan { gap: 14px; } .cv2-mini { width: 72px; } }
@media (prefers-reduced-motion: reduce) { .cv2 *, .cv2-card { animation: none !important; transition: none !important; } }

/* ===== 타로 결과 화면 (위로 한마디 먼저, 카드별 풀이는 눌러서 펼치기) ===== */
.cv2.cv2-res { max-width: 640px; padding: 0; gap: 18px; text-align: left; }
.cv2-res .cv2-comfort::before { display: none; }
.cv2-res .yn-result { margin: 0; }
.cv2-res .yn-note, .cv2-res > .card-more { text-align: center; }
.cv2-glance.two { grid-template-columns: repeat(2, 1fr); }
.cv2-rows-h { font-family: var(--ff-hand); font-weight: 700; font-size: var(--fs-h); color: var(--c-gold); margin: 6px 0 0; line-height: 1.25; }
.cv2-rows-h small { font-family: var(--ff-body); font-weight: 400; font-size: var(--fs-small); color: var(--c-muted); }
.cv2-rows { display: grid; gap: 8px; }
.cv2-row { background: var(--c-night-2); border: 1px solid var(--c-line); border-left: 4px solid var(--c-gold); border-radius: 14px; overflow: hidden; }
.cv2-row.is-now { border-left-color: var(--sun); box-shadow: 0 0 0 2px rgba(243,210,122,.25); }
.cv2-row > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr 20px; gap: 10px; align-items: center; padding: 10px 12px; }
.cv2-row > summary::-webkit-details-marker { display: none; }
.cv2-row-pos { font-size: var(--fs-small); color: var(--c-gold); font-weight: 600; background: var(--c-gold-soft); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.cv2-row-main { display: grid; min-width: 0; line-height: 1.5; }
.cv2-row-main b { font-weight: 600; }
.cv2-row-main span { font-size: var(--fs-small); color: var(--c-muted); }
.cv2-row > summary .pm { color: var(--c-gold); font-size: 1.3rem; text-align: center; transition: rotate .25s; }
.cv2-row[open] > summary .pm { rotate: 45deg; }
.cv2-row-in { padding: 4px 14px 14px; border-top: 1px dashed var(--c-line); display: grid; gap: 8px; }
.cv2-row-in p { padding-top: 8px; line-height: 1.75; }
@media (max-width: 640px) { body .tarot-container, body .concern-container { padding-left: 14px; padding-right: 14px; } body .interpretation { padding: 1.25rem 14px; } .cv2-res .cv2-fold > summary { gap: 10px; padding: 12px 12px; } }
@media (max-width: 400px) { .cv2-row > summary { grid-template-columns: 1fr 20px; } .cv2-row-pos { justify-self: start; grid-column: 1 / -1; } }
/* 영어판: 손글씨 대신 영어 글꼴 */
html[lang="en"] .cv2-emp, html[lang="en"] .cv2 h3, html[lang="en"] .cv2-rows-h, html[lang="en"] .cv2-fold > summary b, html[lang="en"] .cv2-tile .val,
html[lang="en"] .cv2-hero h1, html[lang="en"] .cv2-switch button, html[lang="en"] .cv2-chips li, html[lang="en"] .cv2-fan a, html[lang="en"] .cv2-btn, html[lang="en"] .cv2-qa .q {
  font-family: 'Cormorant Garamond', 'Lora', Georgia, serif !important; font-weight: 600; }
html[lang="en"] .cv2-emp { font-size: 1.75rem; }

/* ===== 글자 크기 6단계 적용 (역할별로 여기서만 크기를 정해요) ===== */
body .hero-title, body .cp-head h1, body .yn-answer { font-size: var(--fs-display); }
body .result-title, body .interp-title, body .mb-nick, body .safety-title { font-size: var(--fs-title); }
body .section-label, body .menu-name, body .cp-box h2, body .mode-info strong, body .mb-today h2, body .yn-guide h3 { font-size: var(--fs-h); }
body .hero-eyebrow, body .hero-sub, body .btn-primary, body .btn-secondary, body .nav-links a, body .overall-text, body .interp-card-name, body .draw-btn, body .submit-btn, body .cp-box h3, body .mb-sec h3, body .share-btn, body .jr-save, body .flip-all, body .jr-streak, body .today-value, body .lucky-value, body .category-name, body .cp-eyebrow { font-size: var(--fs-lead); }
body, body .menu-desc, body .category-text, body .interp-card-text, body .ai-result, body .ai-answer, body .concern-textarea, body .concern-input, body .yn-input, body .steps li, body .step-label, body .cp-box p, body .cr-result, body .jr-note, body .mode-info, body .mode-steps, body .mb-btn, body .h-status legend, body .yn-ask label, body .cr-error, body .ai-btn, body .save-btn, body .ai-horoscope-btn, body .retry-btn, body .card-more, body .cp-kw li, body .ci-sub, body .mode-btn, body .cat-btn, body .sign-btn, body .star-card, body .card-name, body .h-chip span, body .today-date, body #horo-date, body .cr-how, body .cr-error { font-size: var(--fs-body); }
body .today-label, body .menu-meta, body .sign-period, body .position-label, body .lucky-label, body .card-reversed-badge, body .mini-card .name, body .mini-card .rev, body .mini-wrap .name, body .mini-wrap .rev, body .card-caption, body .card-caption small, body .cp-sub, body .yn-rev, body .yn-note, body .cr-care, body .jr-msg, body .draw-note, body .jr-dim, body .jr-mini, body .jr-c, body .jr-c small, body .footer-links, body .disclaimer, body .footer-note, body footer p, body .mb-gname, body .yr-kw span, body .card-index .star-card, body .year-layout .card-caption { font-size: var(--fs-small); }
@media (max-width: 360px) { body .star-card, body .sign-btn { font-size: var(--fs-small); } body .draw-btn, body .submit-btn { white-space: normal; max-width: 100%; } } /* 아주 좁은 폰 */
body .celtic-layout .position-label, body .celtic-layout .card-caption { font-size: 0.75rem; } /* 켈틱 크로스: 10장이 좁게 붙어 있어 예외 */

/* ===== 카톡·인스타 등 앱 안에서 저장을 눌렀을 때: '다른 브라우저로 열기' 안내창 ===== */
.arc-sheet { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10,5,20,0.75); }
.arc-sheet-box { width: 100%; max-width: 360px; background: #241338; border: 0.5px solid rgba(212,169,106,0.5); border-radius: 16px; padding: 1.6rem 1.3rem 1rem; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,0.55); }
.arc-sheet .arc-sheet-icon { font-size: 2rem; line-height: 1; margin: 0 0 0.6rem; }
.arc-sheet h3 { font-family: 'Gaegu', cursive; font-size: var(--fs-h); font-weight: 700; line-height: 1.35; color: #f0d29a; margin: 0 0 0.6rem; }
.arc-sheet p { font-size: var(--fs-body); line-height: 1.7; color: #f0e6d3; margin: 0 0 1.1rem; }
.arc-sheet .arc-sheet-go { display: block; width: 100%; font-family: 'Gaegu', cursive; font-size: var(--fs-lead); letter-spacing: 0.04em; padding: 0.9rem 1rem; background: linear-gradient(135deg, #f0d29a, #c9964f); color: #1a0e2e; border: none; border-radius: 10px; cursor: pointer; box-shadow: 0 4px 16px rgba(212,169,106,0.35); }
.arc-sheet .arc-sheet-hint { font-size: var(--fs-small); line-height: 1.6; color: rgba(240,230,211,0.7); margin: 0.9rem 0 0.3rem; }
.arc-sheet .arc-sheet-close { background: none; border: none; color: rgba(240,230,211,0.75); font-size: var(--fs-small); text-decoration: underline; text-underline-offset: 3px; padding: 0.6rem 1rem; cursor: pointer; }
/* 바깥 브라우저로 넘어온 뒤: 결과 위 '이미지 저장하기' 상자 */
.keep-banner { max-width: 520px; margin: 0 auto 1.6rem; padding: 1.2rem 1.2rem 0.6rem; text-align: center; background: rgba(212,169,106,0.08); border: 0.5px solid rgba(212,169,106,0.5); border-radius: 14px; }
.keep-banner .keep-t { font-family: 'Gaegu', cursive; font-size: var(--fs-h); color: #f0d29a; margin: 0 0 0.3rem; }
.keep-banner .keep-s { font-size: var(--fs-body); line-height: 1.6; margin: 0; }
.keep-banner .share-btn { margin-top: 1rem; }
html[lang="en"] .arc-sheet h3, html[lang="en"] .keep-banner .keep-t { font-family: 'Cormorant Garamond', 'Lora', Georgia, serif !important; font-weight: 600; }