/*
 * 로그인 전 랜딩(ko.html·en.html, scripts/build-landing.mjs 가 만든다)의 모양.
 *
 * 색은 docs/design_tokens.json 의 어두운 보라·금색 톤을 그대로 쓴다(ink·ivory·gold·violet).
 * 랜딩 CSP 가 style-src 'self' 라 인라인 style 은 쓸 수 없다 -- 모양은 모두 여기에 둔다.
 * 스크립트가 없으므로 상호작용은 <details>·<video controls>·<audio controls>·링크뿐이다.
 * 글꼴은 시스템 글꼴만 쓴다(CSP font-src 'none', 내려받는 글꼴 없음).
 */
:root {
  --ink-950: #0a0910;
  --ink-900: #14111c;
  --ink-850: #1d1828;
  --ink-700: #40364d;
  --ink-500: #756487;
  --ivory-100: #f4eddd;
  --ivory-300: #d8cfdb;
  --ivory-500: #b9b0c4;
  --gold-400: #e4c179;
  --gold-900: #17110a;
  --violet-300: #b7a6ff;
  --violet-700: #62528c;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--ink-950);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ivory-100);
  background:
    radial-gradient(ellipse at 50% 0, rgb(98 82 140 / 0.28), transparent 38rem),
    linear-gradient(180deg, #0a0910, #060509 80%);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", Roboto, system-ui, sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}

/* 한국어는 낱말 중간에서 줄을 바꾸지 않는다. */
:lang(ko) {
  word-break: keep-all;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

p,
h1,
h2,
h3,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  font-family: "Noto Serif KR", "Iowan Old Style", Georgia, "Apple SD Gothic Neo", serif;
  font-weight: 600;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

h1 {
  font-size: clamp(1.85rem, 7.4vw, 3rem);
  line-height: 1.2;
  margin-bottom: 14px;
}

h2 {
  font-size: clamp(1.4rem, 5.4vw, 1.9rem);
  line-height: 1.3;
  text-align: center;
  margin-bottom: 14px;
}

h3 {
  font-size: 1.08rem;
  line-height: 1.35;
}

:focus-visible {
  outline: 3px solid var(--violet-300);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  display: block;
  padding: 10px 16px;
  background: var(--ink-850);
}

.fine {
  font-size: 0.8rem;
  color: var(--ivory-500);
}

.lead {
  max-width: 34rem;
  margin: 0 auto;
  text-align: center;
  color: var(--ivory-300);
}

.center {
  text-align: center;
}

.link {
  color: var(--violet-300);
  font-size: 0.92rem;
}

/* 머리글 */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gold-400);
}

.top nav {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lang {
  font-size: 0.85rem;
  color: var(--ivory-500);
}

/* 단추 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--ink-500);
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ivory-100);
  background: transparent;
}

.btn.small {
  min-height: 38px;
  padding: 0 16px;
  font-size: 0.88rem;
  font-weight: 500;
}

.btn.primary {
  color: var(--gold-900);
  background: var(--gold-400);
  border-color: var(--gold-400);
}

.btn.ghost:hover,
.btn.small:hover {
  border-color: var(--violet-300);
}

.play {
  width: 13px;
  height: 14px;
  background: linear-gradient(135deg, var(--violet-300), var(--gold-400));
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.actions.center {
  justify-content: center;
  margin-top: 20px;
}

main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 첫 화면 */
.hero {
  display: grid;
  gap: 24px;
  padding: 16px 0 36px;
}

.hero-text {
  min-width: 0;
}

.sub {
  color: var(--ivory-300);
  font-size: 1.02rem;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 18px;
}

.badges li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid rgb(228 193 121 / 0.6);
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--gold-400);
}

.badges li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-400);
}

.hero-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.hero-media video {
  width: min(100%, 360px);
  aspect-ratio: 1;
  border: 1px solid var(--ink-500);
  border-radius: 22px;
  background: var(--ink-900);
  object-fit: cover;
}

.hero-media figcaption {
  font-size: 0.86rem;
  color: var(--ivory-500);
}

.picks {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.pick img {
  width: 56px;
  height: 56px;
  border: 2px solid var(--ink-700);
  border-radius: 50%;
  object-fit: cover;
  background: var(--ink-850);
}

.pick:hover img {
  border-color: var(--gold-400);
}

/* 섹션 공통: 그림 하나 + 제목 한 줄 + 한두 줄 */
.sec {
  padding: 40px 0;
  border-top: 1px solid var(--ink-700);
}

/* 오늘의 카드 */
.fan {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 6px 0 22px;
}

.fan img {
  width: 92px;
  height: auto;
  margin: 0 -12px;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgb(0 0 0 / 0.5);
}

.fan .c1 {
  transform: rotate(-10deg) translateY(8px);
}

.fan .c2 {
  position: relative;
  z-index: 1;
  transform: translateY(-6px);
}

.fan .c3 {
  transform: rotate(10deg) translateY(8px);
}

/* 진행 */
.steps {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.steps li {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 18px 16px;
  text-align: center;
  border: 1px solid var(--ink-700);
  border-radius: 18px;
  background: var(--ink-900);
}

.steps h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.steps i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border: 1px solid var(--ink-500);
  border-radius: 50%;
  font-size: 0.72rem;
  font-style: normal;
}

.steps p {
  font-size: 0.9rem;
  color: var(--ivory-500);
}

.step-faces {
  display: flex;
}

.step-faces img {
  width: 56px;
  height: 56px;
  border: 2px solid var(--ink-900);
  border-radius: 50%;
  object-fit: cover;
}

.step-faces img + img {
  margin-left: -12px;
}

.step-card {
  width: 54px;
  height: auto;
  border-radius: 6px;
}

.step-orb {
  width: 76px;
  height: 76px;
}

/* <details> 공통 */
details > summary {
  cursor: pointer;
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

.sounds {
  margin-top: 16px;
  text-align: center;
}

.sounds summary,
.more summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 0.9rem;
  color: var(--violet-300);
}

.sounds summary::after,
.more summary::after {
  content: "▾";
  font-size: 0.8em;
}

.sounds[open] summary::after,
.more[open] summary::after {
  content: "▴";
}

.sounds ul {
  display: grid;
  gap: 10px;
  max-width: 420px;
  margin: 6px auto 0;
}

.sounds li {
  display: grid;
  gap: 4px;
  font-size: 0.86rem;
  color: var(--ivory-300);
}

audio {
  display: block;
  width: 100%;
  height: 40px;
}

/* 타로리더 */
.readers {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.reader {
  min-width: 0;
  padding: 12px 12px 6px;
  text-align: center;
  border: 1px solid var(--ink-700);
  border-radius: 20px;
  background: var(--ink-900);
}

.reader video {
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 10px;
  border-radius: 14px;
  background: var(--ink-850);
  object-fit: cover;
}

.reader .role {
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--ivory-500);
}

.reader h3 {
  font-size: 1.3rem;
  color: var(--gold-400);
}

.reader .tagline {
  margin-top: 2px;
  font-weight: 600;
}

.reader .line {
  margin-top: 4px;
  font-size: 0.9rem;
  color: var(--ivory-300);
}

.more p,
.more + p {
  font-size: 0.88rem;
  color: var(--ivory-300);
}

.reader .more {
  margin-top: 4px;
}

.reader .more p {
  padding: 0 4px 12px;
  text-align: left;
}

.center-details {
  margin-top: 14px;
  text-align: center;
}

.center-details p {
  max-width: 34rem;
  margin: 4px auto 6px;
  text-align: left;
}

.readers + .fine {
  margin-top: 16px;
}

/* 안심 */
.trust {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.trust li {
  padding: 16px 14px;
  text-align: center;
  border: 1px solid var(--ink-700);
  border-radius: 18px;
  background: var(--ink-900);
}

.trust h3 {
  font-size: 1rem;
}

.trust p {
  margin-top: 4px;
  font-size: 0.86rem;
  color: var(--ivory-500);
}

.ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  margin-bottom: 8px;
  padding: 0 6px;
  border: 1px solid var(--ink-500);
  border-radius: 999px;
  font-size: 0.86rem;
  font-style: normal;
  font-weight: 700;
  color: #8fd0ad;
}

/* 상담권 */
.prices {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.prices li {
  display: grid;
  gap: 2px;
  padding: 16px 14px;
  text-align: center;
  border: 1px solid var(--ink-700);
  border-radius: 18px;
  background: var(--ink-900);
}

.prices b {
  font-size: 0.92rem;
  color: var(--ivory-300);
}

.prices strong {
  font-size: 1.5rem;
  color: var(--gold-400);
}

.prices span {
  font-size: 0.84rem;
  color: var(--ivory-500);
}

.prices + .fine {
  margin-top: 14px;
}

/* 언어 */
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.chips li {
  padding: 6px 14px;
  border: 1px solid var(--ink-700);
  border-radius: 999px;
  font-size: 0.88rem;
}

/* 자주 묻는 질문 */
.faq {
  max-width: 760px;
  margin: 18px auto 0;
}

.faq details {
  padding: 4px 0;
  border-bottom: 1px solid var(--ink-700);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  font-weight: 600;
}

.faq summary::after {
  content: "▾";
  flex: none;
  color: var(--ivory-500);
}

.faq details[open] summary::after {
  content: "▴";
}

.faq p {
  padding: 0 0 14px;
  font-size: 0.93rem;
  color: var(--ivory-300);
}

.end {
  border-top: 0;
  text-align: center;
}

/* 바닥글 */
.site-footer {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 16px 44px;
  text-align: center;
  border-top: 1px solid var(--ink-700);
  color: var(--ivory-500);
}

.notices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  font-size: 0.84rem;
  color: var(--ivory-300);
}

.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  margin-top: 12px;
  font-size: 0.88rem;
}

.links a,
.biz a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.biz {
  display: grid;
  gap: 2px;
  max-width: 760px;
  margin: 14px auto 0;
  font-size: 0.76rem;
  font-style: normal;
  line-height: 1.7;
}

.site-footer small {
  display: block;
  margin-top: 10px;
  font-size: 0.74rem;
}

/*
 * 움직임 줄이기: 부드러운 스크롤만 끈다. 영상은 손님이 재생을 누를 때만 움직이고(자동 재생 없음)
 * 소리 있는 인사 영상이 이 페이지의 핵심이라 숨기지 않는다.
 */
/* 앱으로 받기: QR(흰 바탕이라야 카메라가 잘 읽는다) + 스토어 단추. */
.get-app-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 40px;
  margin-top: 24px;
}

.qr {
  margin: 0;
  text-align: center;
}

.qr img {
  display: block;
  width: 180px;
  height: 180px;
  padding: 0;
  border-radius: 14px;
  background: #ffffff;
  image-rendering: pixelated;
}

.qr figcaption {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--ivory-500);
}

.stores {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  max-width: 100%;
}

.btn.store {
  min-width: 240px;
}

.btn.soon {
  color: var(--ivory-500);
  border-style: dashed;
  border-color: var(--ink-700);
  cursor: default;
}

.store-url {
  margin: 4px 0 0;
  max-width: 320px;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media (min-width: 560px) {
  .readers,
  .trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .prices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fan img {
    width: 120px;
  }
}

@media (min-width: 960px) {
  .top {
    padding: 16px 24px;
  }

  main {
    padding: 0 24px;
  }

  .hero {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 48px;
    padding: 40px 0 56px;
  }

  .hero-media video {
    width: min(100%, 420px);
  }

  .sec {
    padding: 56px 0;
  }

  .readers {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  .trust {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .prices {
    max-width: 820px;
    margin-right: auto;
    margin-left: auto;
  }

  .fan img {
    width: 150px;
  }
}