/* Byeolyugak visual layer — reference-led dark oriental direction.
   Important: uses the actual dark tokens from styles.css. No extra :root override.
   Structure/data-* behavior stays untouched. */

body {
  background:
    radial-gradient(circle at 50% -8%, color-mix(in srgb, var(--jade) 8%, transparent), transparent 28rem),
    var(--paper);
  color: var(--ink);
}

.app-shell {
  overflow-x: clip;
  background: var(--paper);
}

/* ── typography system ─────────────────────────────────────────── */
.brand-text,
.hero-slide-title,
.topic-catalog-title,
.topic-card-title,
.trust-banner-title,
.home-story h2,
.analysis-hero h1 {
  font-family: "MaruBuri", "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", "Batang", serif;
  font-synthesis: none;
}

body,
button,
input,
select,
textarea,
.hero-slide-badge,
.hero-slide-sub,
.topic-card-eyebrow,
.topic-card-tags,
.topic-card-price {
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

/* ── header ────────────────────────────────────────────────────── */
.topbar {
  height: 66px;
  padding: 0 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 18%, transparent);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(18px);
}

.brand-wordmark {
  gap: 10px;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--paper) 88%, var(--gold));
  color: var(--gold);
  font-family: "Noto Serif KR", "Batang", serif;
  font-size: 17px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 72%, transparent);
}

.brand-text {
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.top-tools {
  gap: 8px;
}

.site-switch-link {
  display: inline-flex;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
  color: color-mix(in srgb, var(--ink) 82%, transparent);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  font-size: 11px;
  font-weight: 650;
}

.auth-chip {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--gold) 54%, transparent);
  background: linear-gradient(135deg, var(--gold), color-mix(in srgb, var(--gold) 72%, var(--paper)));
  color: var(--paper);
  font-size: 11px;
  font-weight: 850;
}

.icon-button.menu {
  width: 34px;
  height: 34px;
}

/* ── sticky category filters ───────────────────────────────────── */
.scroll-hint-wrap.is-filters {
  top: 66px;
  background: color-mix(in srgb, var(--paper) 95%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 16%, transparent);
  backdrop-filter: blur(18px);
}

.topic-filters {
  gap: 8px;
  padding: 10px 14px 11px;
}

.topic-filters button {
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid color-mix(in srgb, var(--gold) 18%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--white) 72%, var(--paper));
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  font-size: 0;
  font-weight: 750;
}

.topic-filters button::before {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 7px;
  border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  border-radius: 50%;
  color: var(--gold);
  font-family: "Noto Serif KR", "Batang", serif;
  font-size: 10px;
  line-height: 1;
  vertical-align: middle;
}

.topic-filters button::after {
  font-size: 12.5px;
  letter-spacing: -0.02em;
  vertical-align: middle;
}

.topic-filters [data-topic-filter="all"]::before { content: "全"; }
.topic-filters [data-topic-filter="orthodox"]::before { content: "命"; }
.topic-filters [data-topic-filter="wealth"]::before { content: "財"; }
.topic-filters [data-topic-filter="health"]::before { content: "生"; }
.topic-filters [data-topic-filter="family"]::before { content: "家"; }
.topic-filters [data-topic-filter="love"]::before { content: "緣"; }
.topic-filters [data-topic-filter="career"]::before { content: "業"; }
.topic-filters [data-topic-filter="all"]::after { content: "전체"; }
.topic-filters [data-topic-filter="orthodox"]::after { content: "정통 · 명리"; }
.topic-filters [data-topic-filter="wealth"]::after { content: "재물"; }
.topic-filters [data-topic-filter="health"]::after { content: "건강"; }
.topic-filters [data-topic-filter="family"]::after { content: "임신 · 가족"; }
.topic-filters [data-topic-filter="love"]::after { content: "연애 · 궁합"; }
.topic-filters [data-topic-filter="career"]::after { content: "취업 · 진로"; }

.topic-filters button.is-active {
  border-color: var(--gold);
  background: linear-gradient(135deg, var(--gold), color-mix(in srgb, var(--gold) 76%, var(--paper)));
  color: var(--paper);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent);
}

.topic-filters button.is-active::before {
  border-color: color-mix(in srgb, var(--paper) 35%, transparent);
  color: var(--paper);
}

/* ── main hero carousel ────────────────────────────────────────── */
.hero-carousel {
  padding: 14px 0 8px;
  background: var(--paper);
  border: 0;
}

.hero-track {
  gap: 12px;
  padding: 0 14px;
}

.hero-slide {
  width: calc(100% - 68px);
  aspect-ratio: 1.5 / 1;
  border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
  border-radius: 19px;
  background-color: var(--white);

  background-size: cover;
  box-shadow:
    0 18px 38px color-mix(in srgb, var(--paper) 72%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--ink) 3%, transparent);
}

.hero-slide-img {
  filter: saturate(.86) contrast(1.04) brightness(.84);
}

/* Replace low-fidelity/legacy hero art visually with the active mature-dark raster set. */







.hero-slide-scrim {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--paper) 88%, transparent) 0%, color-mix(in srgb, var(--paper) 54%, transparent) 48%, transparent 76%),
    linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--paper) 78%, transparent) 100%);
}

.hero-slide-body {
  inset: auto 40% 0 0;
  gap: 7px;
  padding: 20px 18px 21px;
}

.hero-slide-badge {
  justify-self: start;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  color: var(--gold);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .02em;
}

.hero-slide-title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(22px, 5.5vw, 27px);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -0.045em;
  text-shadow: 0 2px 10px color-mix(in srgb, var(--paper) 82%, transparent);
  word-break: keep-all;
}

.hero-slide-sub {
  max-width: 95%;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.55;
  word-break: keep-all;
}

.hero-dots {
  gap: 6px;
  margin-top: 10px;
}

.hero-dots button {
  width: 7px;
  height: 7px;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
}

.hero-dots button.is-active {
  width: 24px;
  background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 68%, var(--paper)));
}

/* ── daily fortune banner ──────────────────────────────────────── */
.daily-highlight {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  align-items: center;
  gap: 13px;
  margin: 8px 14px 0;
  padding: 15px 16px;
  border: 1px solid color-mix(in srgb, var(--gold) 24%, transparent);
  border-radius: 17px;
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--jade) 9%, transparent), transparent 55%),
    color-mix(in srgb, var(--white) 58%, var(--paper));
}

.daily-highlight-icon {
  width: 66px;
  height: 66px;
  border: 0;
  border-radius: 50%;
  background-image: url("./assets/generated/thumbnails/date-daily-dark.png");
  background-position: 54% 42%;
  background-size: 185%;
  color: transparent;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold) 32%, transparent),
    0 10px 24px color-mix(in srgb, var(--paper) 66%, transparent);
}

.daily-highlight-icon::after { content: none; }

.daily-highlight-kicker {
  margin: 0 0 4px;
  color: var(--jade);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .03em;
}

.daily-highlight-title {
  margin: 0 0 4px;
  color: var(--ink);
  font-family: "MaruBuri", "Noto Serif KR", "Nanum Myeongjo", "Batang", serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.daily-highlight-sub {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.45;
}

.daily-highlight-cta {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--jade) 38%, transparent);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--jade), color-mix(in srgb, var(--jade) 70%, var(--paper)));
  color: var(--paper);
  font-size: 10.5px;
  font-weight: 800;
}

/* ── continue ─────────────────────────────────────────────────── */
.continue-section {
  margin: 22px 14px 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.continue-title {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 0;
}

.continue-title::before {
  content: "↻";
  margin-right: 8px;
  color: var(--gold);
  font-size: 18px;
  font-weight: 500;
}

.continue-title::after {
  content: "보던 운세 이어보기";
  font-family: "MaruBuri", "Noto Serif KR", "Nanum Myeongjo", "Batang", serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.continue-list > * {
  border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--white) 70%, var(--paper)) !important;
}

/* ── catalog hierarchy ─────────────────────────────────────────── */
.topic-catalog {
  margin-top: 18px;
  padding: 28px 14px 40px;
  border-top: 1px solid color-mix(in srgb, var(--gold) 12%, transparent);
  background: var(--paper);
}

.topic-catalog-title {
  margin: 0 0 23px;
  color: var(--ink);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.05em;
}

.topic-catalog-title::before {
  content: "✦";
  display: inline-block;
  margin-right: 8px;
  color: var(--gold);
  font-size: .8em;
  vertical-align: .06em;
}

.topic-catalog-title::after {
  content: none;
}

.topic-group {
  margin-top: 28px;
}

.topic-group:first-of-type { margin-top: 0; }

.topic-group-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 0;
  font-weight: 800;
}

.topic-group-title::before {
  color: color-mix(in srgb, var(--ink) 90%, transparent);
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -0.025em;
}

.topic-group[data-topic-group="orthodox"] .topic-group-title::before { content: "✦  정통 · 명리"; }
.topic-group[data-topic-group="wealth"] .topic-group-title::before { content: "財  재물"; }
.topic-group[data-topic-group="health"] .topic-group-title::before { content: "生  건강"; }
.topic-group[data-topic-group="family"] .topic-group-title::before { content: "家  임신 · 가족"; }
.topic-group[data-topic-group="love"] .topic-group-title::before { content: "緣  연애 · 궁합"; }
.topic-group[data-topic-group="career"] .topic-group-title::before { content: "業  취업 · 진로"; }

.topic-group-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 22%, transparent), transparent);
}

/* Keep Claude's horizontal scroll + arrows structure. Two cards are visible, extras scroll. */
.topic-row {
  display: flex;
  gap: 11px;
  overflow-x: auto;
  padding: 0 0 3px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.topic-row::-webkit-scrollbar { display: none; }

.topic-card {
  position: relative;
  flex: 0 0 calc((100% - 11px) / 2);
  min-width: 0;
  aspect-ratio: .83 / 1;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid color-mix(in srgb, var(--gold) 24%, transparent);
  border-radius: 16px;
  background-color: var(--white);
  background-position: center;
  background-size: cover;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--paper) 68%, transparent);
}

.topic-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.88) contrast(1.04) brightness(.86);
  transform: scale(1.015);
}

.topic-card-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 34%, color-mix(in srgb, var(--paper) 10%, transparent) 52%, color-mix(in srgb, var(--paper) 94%, transparent) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--paper) 12%, transparent), transparent 58%);
}

.topic-card-body {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 13px 15px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.topic-card-eyebrow {
  order: 1;
  margin: 0 0 5px;
  color: var(--gold);
  font-size: 9.5px;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: .01em;
}

.topic-card-title {
  order: 2;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: -0.045em;
  text-shadow: 0 2px 8px color-mix(in srgb, var(--paper) 82%, transparent);
  word-break: keep-all;
}

.topic-card-tags {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.topic-card-tags span {
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--gold) 18%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 66%, transparent);
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  font-size: 8.5px;
  font-weight: 600;
  line-height: 1.2;
  backdrop-filter: blur(5px);
}

.topic-card-price {
  order: 4;
  margin-top: 9px;
  color: var(--gold);
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.topic-card-price strong {
  color: var(--gold);
  font-size: inherit;
}

.topic-card-quote {
  order: 4;
  display: -webkit-box;
  margin-top: 8px;
  overflow: hidden;
  color: color-mix(in srgb, var(--ink) 65%, transparent);
  font-size: 9px;
  font-style: normal;
  line-height: 1.5;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.topic-card-badge { display: none !important; }

/* High-fidelity art replacements for persona placeholder SVGs. */









/* A single product fills the row and behaves like a feature tile. */
.topic-row > .topic-card:only-child {
  flex-basis: 100%;
  aspect-ratio: 1.72 / 1;
}

.topic-row > .topic-card:only-child .topic-card-body {
  width: 66%;
  padding: 18px;
}

.topic-row > .topic-card:only-child .topic-card-title {
  font-size: 21px;
}

/* ── trust / story ─────────────────────────────────────────────── */
.trust-banner,
.home-story {
  margin: 0;
  padding: 30px 15px;
  border-top: 1px solid color-mix(in srgb, var(--gold) 13%, transparent);
  background: color-mix(in srgb, var(--white) 54%, var(--paper));
}

.trust-banner-title,
.home-story h2 {
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.trust-card {
  border-color: color-mix(in srgb, var(--gold) 12%, transparent);
}

/* ── bottom navigation ─────────────────────────────────────────── */
.bottom-nav {
  min-height: 70px;
  height: 70px;
  border-top: 1px solid color-mix(in srgb, var(--gold) 18%, transparent);
  background: color-mix(in srgb, var(--paper) 95%, transparent);
  backdrop-filter: blur(18px);
}

.bottom-nav > button {
  color: color-mix(in srgb, var(--ink) 54%, transparent);
  font-size: 10px;
  font-weight: 650;
}

.bottom-nav > button.is-active {
  color: var(--gold);
}

.fortune-fab span {
  width: 52px !important;
  height: 52px !important;
  border: 4px solid var(--paper) !important;
  background: linear-gradient(135deg, var(--gold), color-mix(in srgb, var(--gold) 70%, var(--paper))) !important;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--paper) 72%, transparent) !important;
  transform: translateY(-8px) !important;
}

.fortune-fab em {
  color: var(--gold) !important;
  font-size: 9.5px !important;
  font-weight: 750 !important;
}

/* ── analysis loading stays in the same visual system ─────────── */
.analysis-view:has(.analysis-loading:not([hidden])) {
  min-height: calc(100vh - 70px);
  background:
    radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--gold) 8%, transparent), transparent 15rem),
    var(--paper);
}

.analysis-view:has(.analysis-loading:not([hidden])) .analysis-hero,
.analysis-view .analysis-loading {
  background: var(--paper);
  color: var(--ink);
  border-color: color-mix(in srgb, var(--gold) 13%, transparent);
}

.analysis-view:has(.analysis-loading:not([hidden])) .analysis-section {
  background: transparent;
  border-color: color-mix(in srgb, var(--gold) 13%, transparent);
}

.analysis-view:has(.analysis-loading:not([hidden])) .analysis-section > h2 {
  margin: 0 16px;
  padding: 13px 0 11px;
  border-top: 1px solid color-mix(in srgb, var(--gold) 14%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 14%, transparent);
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-family: "MaruBuri", "Noto Serif KR", "Nanum Myeongjo", "Batang", serif;
  font-size: 16px;
  font-weight: 700;
}

.analysis-view .analysis-loading {
  position: relative;
  margin: 0;
  padding: 44px 24px 50px;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 13%, transparent);
  text-align: center;
}

.analysis-view .loading-visual {
  margin: 0 0 26px;
}

.analysis-view .loading-orb {
  width: 112px;
  height: 112px;
  border: 1px solid color-mix(in srgb, var(--gold) 68%, transparent);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--gold) 11%, transparent), transparent 60%),
    var(--white);
  box-shadow:
    0 0 0 9px color-mix(in srgb, var(--gold) 4%, transparent),
    inset 0 0 28px color-mix(in srgb, var(--gold) 6%, transparent);
}

.analysis-view .loading-orb span {
  color: var(--gold);
  font-family: "Noto Serif KR", "Batang", serif;
  font-size: 44px;
  font-weight: 700;
}

.analysis-view .analysis-loading p {
  color: var(--ink);
  font-size: 16px;
  font-weight: 750;
  line-height: 1.55;
  letter-spacing: -0.03em;
}

.analysis-view .progress-track {
  height: 9px;
  margin: 27px 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
}

.analysis-view .progress-track span {
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 64%, var(--paper)), var(--gold));
  box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 18%, transparent);
}

.analysis-view .progress-track b {
  color: var(--gold);
}

.analysis-view .analysis-loading small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}

@media (max-width: 390px) {
  .site-switch-link {
    max-width: 118px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hero-slide {
    width: calc(100% - 58px);
  }
  .hero-slide-body {
    inset-right: 32%;
  }
  .daily-highlight {
    grid-template-columns: 58px 1fr;
  }
  .daily-highlight-icon {
    width: 54px;
    height: 54px;
  }
  .daily-highlight-cta {
    grid-column: 1 / -1;
    width: 100%;
  }
  .topic-card-title {
    font-size: 16.5px;
  }
}