@import url("./byeolyugak-home-refresh-base.css?v=20260817-3");

/* 별유각 확정 캐릭터 IP 레이어.
   이미지는 sprite/Base64가 아니라 <img src>로 직접 넣는다. 이전에 4명을 한 장에 합쳐
   background-position으로 잘라 쓰다가, 스프라이트가 480x225밖에 안 돼 카드 크기로 늘리면
   뭉개지는 문제가 있었다. 파일을 따로 두면 각 캐릭터가 원래 해상도(카드 492x600,
   히어로 900x540)로 뜨고, 캐릭터별 크롭도 개별 조정할 수 있다. */

/* DOM 순서 — JS가 필터를 래퍼로 감싸므로 래퍼도 같이 정렬한다.
   무료인 오늘의 운세는 유료 상품 카테고리를 모두 지난 뒤에 온다. */
.view[data-view="home"].is-active { display:flex; flex-direction:column; }
.view[data-view="home"] > .scroll-hint-wrap.is-filters,
.view[data-view="home"] > .topic-filters { order:10; }
.view[data-view="home"] > .hero-carousel { order:20; }
.view[data-view="home"] > .continue-section { order:30; }
.view[data-view="home"] > .topic-catalog { order:40; }
/* 오늘의 운세는 무료라 유료 카테고리를 모두 지난 뒤에 온다 — 위로 올리면 유료 상품보다 강한 CTA가 된다. */
.view[data-view="home"] > .daily-highlight { order:50; margin-top:18px; margin-bottom:26px; }
.view[data-view="home"] > .trust-banner { order:60; }
.view[data-view="home"] > .home-story { order:70; }

/* ── 메인 히어로 ─────────────────────────────────────────────
   모바일 대표 비주얼이라 상품 카드보다 확실히 커야 한다. */
.hero-carousel { padding:16px 0 10px; }
.hero-track { gap:12px; padding-inline:14px; }
.hero-slide {
  width:calc(100% - 28px);
  min-height:340px;
  aspect-ratio:auto;
  border:1px solid color-mix(in srgb,var(--gold) 34%,transparent);
  border-radius:20px;
  overflow:hidden;
  background-color:var(--paper);
  box-shadow:0 18px 38px color-mix(in srgb,var(--paper) 72%,transparent);
}

/* 캐릭터는 오른쪽에, 카피는 왼쪽에. object-position을 오른쪽으로 밀어
   인물이 카피 영역에 겹치지 않게 한다. */
.hero-slide-img {
  object-fit:cover;
  object-position:78% 22%;
}

/* 왼쪽만 진하게 깔아 글자를 읽히게 하고, 오른쪽 얼굴 위는 덮지 않는다. */
.hero-slide-scrim {
  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--paper) 94%,transparent) 0%,
      color-mix(in srgb,var(--paper) 82%,transparent) 34%,
      color-mix(in srgb,var(--paper) 30%,transparent) 62%,
      transparent 84%),
    linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--paper) 70%,transparent) 100%);
}
/* 우측 34%는 캐릭터 몫으로 비워둔다. 이보다 좁히면 제목이 서너 줄로 쪼개진다. */
.hero-slide-body { inset:auto 34% 0 0; padding:24px 18px 26px; gap:7px; }
.hero-slide-title { font-size:clamp(23px,6.2vw,28px); line-height:1.3; letter-spacing:-.05em; }
.hero-slide-sub { font-size:11.5px; line-height:1.55; }
.hero-slide-badge { font-size:10px; }

/* 캐릭터별 얼굴 위치가 조금씩 달라 크롭을 개별 보정한다. */
.hero-slide[data-hero-id="wealth-halmae"] .hero-slide-img { object-position:76% 20%; }
.hero-slide[data-hero-id="love-youngman"] .hero-slide-img { object-position:80% 18%; }
.hero-slide[data-hero-id="career-noona"] .hero-slide-img { object-position:78% 20%; }
.hero-slide[data-hero-id="health-grandpa"] .hero-slide-img { object-position:76% 22%; }

/* ── 상품 카드 ───────────────────────────────────────────────
   카드가 검게 비지 않도록 캐릭터를 위쪽에 크게 두고, 글자 영역만 아래에서 어둡게 깐다. */
.topic-card {
  border-color:color-mix(in srgb,var(--topic-accent,var(--gold)) 30%,transparent);
  box-shadow:
    0 16px 34px color-mix(in srgb,var(--paper) 72%,transparent),
    inset 0 0 0 1px color-mix(in srgb,var(--topic-accent,var(--gold)) 10%,transparent);
}
.topic-card-img {
  object-fit:cover;
  object-position:50% 16%;
  filter:saturate(.96) contrast(1.05) brightness(.9);
}
.topic-card-scrim {
  background:
    linear-gradient(180deg,
      transparent 28%,
      color-mix(in srgb,var(--paper) 16%,transparent) 48%,
      color-mix(in srgb,var(--paper) 95%,transparent) 100%),
    radial-gradient(circle at 20% 88%, color-mix(in srgb,var(--topic-accent,var(--gold)) 20%,transparent), transparent 46%);
}
.topic-card-badge { display:none!important; }

/* 텍스트 위계: eyebrow < 태그 < 가격 < 상품명 */
.topic-card-eyebrow { color:var(--topic-accent,var(--gold)); font-size:9.5px; }
.topic-card-title { font-size:18px; line-height:1.28; text-shadow:0 2px 10px color-mix(in srgb,var(--paper) 88%,transparent); }
.topic-card-price { font-size:14px; }
.topic-card-tags span {
  border-color:color-mix(in srgb,var(--topic-accent,var(--gold)) 28%,transparent);
  background:color-mix(in srgb,var(--paper) 72%,transparent);
}
.topic-card-price,
.topic-card-price strong { color:var(--topic-accent,var(--gold)); }
.topic-group-title::after {
  background:linear-gradient(90deg,color-mix(in srgb,var(--topic-accent,var(--gold)) 34%,transparent),transparent);
}

.topic-group[data-topic-group="wealth"],
.topic-card[data-view-target="wealth-halmae"] { --topic-accent:var(--gold); }
.topic-group[data-topic-group="health"],
.topic-card[data-topic-open="health-grandpa"],
.topic-card[data-view-target="calendar"] { --topic-accent:#b991ff; }
.topic-group[data-topic-group="love"],
.topic-card[data-product-id="compatibility"],
.topic-card[data-topic-open="love-youngman"] { --topic-accent:#ff7b7b; }
.topic-group[data-topic-group="career"],
.topic-card[data-topic-open="career-noona"],
.topic-card[data-topic-open="aptitude-noona"],
.topic-card[data-topic-open="quit-noona"] { --topic-accent:#79aaff; }

/* 캐릭터별 얼굴이 하단 텍스트에 가리지 않게 세로 크롭을 미세조정한다. */
.topic-card[data-view-target="wealth-halmae"] .topic-card-img { object-position:50% 22%; }
.topic-card[data-topic-open="health-grandpa"] .topic-card-img,
.topic-card[data-view-target="calendar"] .topic-card-img { object-position:50% 14%; }
.topic-card[data-product-id="compatibility"] .topic-card-img,
.topic-card[data-topic-open="love-youngman"] .topic-card-img { object-position:50% 13%; }
.topic-card[data-topic-open="career-noona"] .topic-card-img,
.topic-card[data-topic-open="aptitude-noona"] .topic-card-img,
.topic-card[data-topic-open="quit-noona"] .topic-card-img { object-position:50% 14%; }

/* 카드가 하나뿐인 그룹은 늘어나 흐릿해지지 않게 폭을 제한한다. */
.topic-row > .topic-card:only-child { flex-basis:min(78%,320px); aspect-ratio:.82 / 1; }
.topic-row > .topic-card:only-child .topic-card-body { width:100%; padding:15px 14px 16px; }
.topic-row > .topic-card:only-child .topic-card-title { font-size:19px; }

.daily-highlight { border-color:color-mix(in srgb,var(--jade) 24%,transparent); }

@media (max-width:390px) {
  .hero-slide { min-height:312px; }
  .hero-slide-body { inset:auto 31% 0 0; padding:21px 15px 23px; }
  .hero-slide-title { font-size:23px; }
  .topic-card-title { font-size:17px; }
}

/* ── 하단 내비 — 시장 1위(타이트) 짜임 ───────────────────────────────
   2026-09-01 카라반: 「하단 유아이 잘 안 보임. 가독성 높이고 중앙에 튀어나온
   무료운세 탭은 삭제.」 튀어나온 원은 없앴고(HTML), 화면 바닥에 붙은 흰 띠 대신
   가장자리에서 떨어져 떠 있는 검은 알약으로 바꾼다. 고른 곳은 알약 안 칩으로 표시. */
.bottom-nav {
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  width: min(calc(100% - 28px), 402px);
  height: auto;
  min-height: 0;
  padding: 7px 8px;
  align-items: center;
  gap: 2px;
  border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #0c0e15 88%, transparent);
  backdrop-filter: blur(20px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.bottom-nav > button {
  min-height: 0;
  padding: 8px 2px 7px;
  gap: 3px;
  border-radius: 999px;
  color: color-mix(in srgb, #e8e2d6 62%, transparent);
  font-size: 10.5px;
  font-weight: 700;
  transition: background 0.18s ease, color 0.18s ease;
}

.bottom-nav > button img {
  width: 22px;
  height: 22px;
  /* 검은 알약 위라 아이콘도 밝게 뒤집는다 — 안 그러면 안 보인다. */
  filter: brightness(0) invert(1);
  opacity: 0.62;
}

.bottom-nav > button.is-active {
  color: #14121a;
  background: var(--gold);
  font-weight: 800;
}

.bottom-nav > button.is-active img {
  filter: none;
  opacity: 1;
}

/* 떠 있는 알약이라 본문이 그 밑으로 지나가면 안 된다. */
.view.is-active { padding-bottom: 96px; }

/* 고른 곳 표시는 둥근 네모 칩 — 타이트와 같은 모양. */
.bottom-nav > button { border-radius: 16px; }

/* ── 주제 탭 — 타이트 짜임 ──────────────────────────────────────────
   2026-09-01: 알약 일곱 개가 나란히 서면 어느 것이 켜져 있는지 눈에 안 들어온다.
   타이트는 고른 것만 밝은 알약이고 나머지는 글자만 둔다. 글자도 키운다. */
.topic-filters {
  gap: 4px;
  padding: 10px 12px 12px;
}

.topic-filters button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid transparent;
  background: transparent;
  color: color-mix(in srgb, #e8e2d6 58%, transparent);
}

/* 한자 메달은 고른 탭에만 남긴다 — 일곱 개가 다 붙으면 글자가 안 읽힌다. */
.topic-filters button::before { display: none; }
.topic-filters button.is-active::before {
  display: inline-grid;
  border-color: color-mix(in srgb, #14121a 30%, transparent);
  color: #14121a;
}

.topic-filters button::after {
  font-size: 15.5px;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.topic-filters button.is-active {
  border-color: transparent;
  background: var(--gold);
  color: #14121a;
}

/* ── 상품 카드 — 타이트 짜임 ────────────────────────────────────────
   2026-09-01 사장님: 「상품 진열 방식, 상품 아이콘 프레임 스타일과 크기 모두 따라하기.」
   타이트 카드는 세로로 더 길고, 제목이 크고, 카드 위에는 제목과 한 줄뿐이다.
   태그·따옴표 대사는 상품 페이지 안에 그대로 있으므로 카드에서만 뺀다. */
.topic-card {
  aspect-ratio: .72 / 1;
  border-color: color-mix(in srgb, var(--gold) 13%, transparent);
}

.topic-card-title {
  font-size: 23px;
  line-height: 1.24;
  letter-spacing: -0.05em;
}

.topic-card-eyebrow { font-size: 11px; margin-bottom: 6px; }

/* 카드 위에서는 뺀다 — 포스터 한 장에 글이 넷이면 아무것도 안 읽힌다. */
.topic-card-tags,
.topic-card-quote { display: none; }

.topic-card-price { order: 3; margin-top: 8px; }
.topic-card-price strong { font-size: 15.5px; }

/* 혼자 있는 카드도 같은 세로 비율로 — 재물이 유독 납작해 보이면 값이 싸 보인다. */
.topic-row > .topic-card:only-child { aspect-ratio: .86 / 1; }
.topic-row > .topic-card:only-child .topic-card-title { font-size: 27px; }

/* ── 홈을 타이트 짜임 그대로 ────────────────────────────────────────
   2026-09-01 사장님: 「그냥 카피한다 생각하고 싹 다 똑같이. 상품에 라인으로
   프레임도 타이트는 없잖아.」 실측(캡처 990px 기준, 화면 430px 환산):
   카드 가로 54% · 세로비 2:3 · 테두리 없음 · 섹션 머리는 분야명 + 큰 질문. */

/* 카드 — 테두리를 없애고 세로로 더 길게. 그림 한 장이 곧 포스터다. */
.topic-card {
  /* 타이트 실측: 카드 가로가 화면의 54.8%. 좌우 여백 16px 을 뺀 값 기준이라 60%. */
  flex: 0 0 60%;
  aspect-ratio: 2 / 3;
  border: 0;
  border-radius: 16px;
  box-shadow: none;
}
.topic-row > .topic-card:only-child {
  flex: 0 0 60%;
  aspect-ratio: 2 / 3;
}
.topic-row > .topic-card:only-child .topic-card-title { font-size: 23px; }

/* 그림을 덜 어둡게 — 타이트 카드는 그림이 그대로 보인다. */
.topic-card-img { filter: saturate(0.95) contrast(1.03) brightness(0.94); }

.topic-row { gap: 10px; padding-inline: 16px; }

/* 섹션 머리 — 작은 분야명 위, 손님이 속으로 하는 질문 아래. */
.topic-group { margin-top: 26px; }
.topic-group-eyebrow {
  margin: 0 16px 6px;
  color: color-mix(in srgb, #e8e2d6 46%, transparent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}
.topic-group-title {
  margin: 0 16px 13px;
  padding: 0;
  border: 0;
  background: none;
  color: #f6f1e6;
  font-family: inherit;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -0.03em;
}
.topic-group-title::before,
.topic-group-title::after { display: none; }

/* 주제 탭은 콘텐츠 위에 떠 있다 — 타이트는 탭 바에 배경이 없다. */
.topic-filters {
  position: sticky;
  top: 0;
  z-index: 12;
  background: transparent;
  border: 0;
}
.topic-filters button.is-active {
  background: color-mix(in srgb, #55585f 92%, transparent);
  color: #fff;
}
.topic-filters button.is-active::before {
  border-color: color-mix(in srgb, #fff 34%, transparent);
  color: #fff;
}

/* 히어로 — 타이트는 테두리도 그림자도 없다. 그림 한 장이 화면을 채우고
   옆 카드가 살짝 보인다. */
.hero-slide {
  aspect-ratio: 1.34 / 1;
  border: 0;
  border-radius: 16px;
  box-shadow: none;
}
.hero-carousel { padding: 8px 0 6px; }
.hero-track { padding: 0 16px; gap: 10px; }

/* 가로 스크롤 화살표 — 타이트에는 없다. 손가락으로 미는 화면이라 화살표는 군더더기다. */
.scroll-arrow { display: none !important; }

/* ── 타이트 실측값 (sajutight.me, 화면 375px 에서 직접 잼 · 2026-09-01) ──
   히어로 323×429(가로 86.1%, 3:4) · 카드 240×360(가로 64%, 2:3) · 카드 사이 12px
   좌우 여백 16px · 탭 63×39, 글자 15px/600, 둥글기 24px, 사이 4px, 바탕 없음
   섹션 분야명 12px/400 #71717A · 섹션 질문 18px/600 #FAFAFA, 둘 사이 20px
   하단 알약 가로 calc(100% - 32px), 높이 56, 둥글기 40, 바닥에서 25px
   칸 하나 65×56, 글자 10px/600, 고른 칸 바탕 흰색 20%
   앞서 눈대중으로 넣은 값을 전부 이 실측값으로 덮는다. */

/* 히어로 */
.hero-slide {
  /* 323/343(좌우 16px 여백을 뺀 안쪽 폭) = 94.2%. 화면 대비로는 86.1%. */
  width: 94.2%;
  aspect-ratio: 323 / 429;
  border-radius: 16px;
}
.hero-track { padding-inline: 16px; gap: 12px; }
.hero-carousel { padding: 10px 0 4px; }

/* 상품 카드 */
.topic-card,
.topic-row > .topic-card:only-child {
  /* 실측으로 맞춘 값 — 375 화면에서 카드 가로가 240px 이 되는 지점(화면의 64%). */
  flex: 0 0 76%;
  aspect-ratio: 240 / 360;
  border-radius: 16px;
}
.topic-row { gap: 12px; padding-inline: 16px; }
.topic-row > .topic-card:only-child .topic-card-title { font-size: 23px; }

/* 섹션 머리 */
.topic-group { margin-top: 30px; }
.topic-group-eyebrow {
  margin: 0 16px 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: #71717a;
}
.topic-group-title {
  margin: 0 16px 14px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.28;
  color: #fafafa;
}

/* 주제 탭 */
.topic-filters { gap: 4px; padding: 10px 16px 12px; }
.topic-filters button {
  min-height: 39px;
  padding: 0 17px; /* 타이트 탭 한 칸 63px 에 맞춘 값 */
  border-radius: 24px;
}
.topic-filters button::after { font-size: 15px; font-weight: 600; }
.topic-filters button.is-active {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.topic-filters button.is-active::before { display: none; }

/* 하단 내비 */
.bottom-nav {
  width: calc(min(100%, 430px) - 32px);
  height: 56px;
  min-height: 56px;
  padding: 0 9px;
  bottom: max(25px, env(safe-area-inset-bottom));
  border-radius: 40px;
}
.bottom-nav > button {
  height: 56px;
  padding: 0;
  gap: 3px;
  border-radius: 40px;
  font-size: 10px;
  font-weight: 600;
}
.bottom-nav > button img { width: 21px; height: 21px; }
.view.is-active { padding-bottom: 97px; }

/* ── 홈 UI — 로고만 보라, 나머지는 무채색 (2026-09-01 사장님 지시) ─────
   타이트는 로고(TIGHT)만 브랜드 색이고 탭·아이콘·카드 글자는 전부 흰색·회색이다.
   색이 로고 하나뿐이라 그림이 산다. 금색이든 보라든 UI 전체를 물들이면 촌스러워진다.
   그래서 홈 영역의 --gold 를 무채색으로 갈아 끼우고, 보라는 로고에만 남긴다. */
.topbar,
.bottom-nav,
.view[data-view="home"] {
  --gold: #f2f2f4; /* 금색이 있던 자리를 전부 흰빛으로 */
}

/* 로고 — 여기만 보라. 케데헌 바이올렛. */
.brand-mark {
  border-color: rgba(160, 107, 255, 0.5);
  background: color-mix(in srgb, var(--paper) 84%, #7a4be8);
  color: #c4a2ff;
}
.brand-text { color: #b98cff; }

/* 고른 주제 탭 — 타이트 실측값 그대로.
   흰 알약이 아니라 아래 가운데에서 올라오는 방사형 흰빛이고, 글자는 흰색을 유지한다.
   (sajutight.me 에서 잰 값: radial-gradient(100% 125% at 50% 120%, ...42% → 0),
    테두리 rgba(172,172,178,.71), 둥글기 24px, 뒷배경 흐림 3px) */
.topic-filters button.is-active {
  background: radial-gradient(100% 125% at 50% 120%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 92%);
  border: 1px solid rgba(172, 172, 178, 0.71);
  backdrop-filter: blur(3px);
  color: #fff;
}
.topic-filters button.is-active::before { display: none; }
/* 안 고른 탭은 글자만 — 타이트도 테두리도 바탕도 없다. */
.topic-filters button:not(.is-active) {
  color: rgba(255, 255, 255, 0.92);
}

/* 하단 내비 — 고른 칸은 흰빛이 살짝 도는 칩, 글자와 아이콘은 흰색 */
.bottom-nav > button.is-active {
  background: rgba(255, 255, 255, 0.17);
  color: #fff;
}
.bottom-nav > button.is-active img { filter: brightness(0) invert(1); opacity: 1; }
.bottom-nav { border-color: rgba(255, 255, 255, 0.12); }

/* 로그인 칩 — 채우지 않고 흰 테두리만 */
.auth-chip {
  border-color: rgba(255, 255, 255, 0.34);
  background: transparent;
  color: #f2f2f4;
}

/* 히어로 넘김 점 */
.hero-dots button.is-active,
.hero-dots i.is-active { background: #fff; }

/* 「아직 안 여신 술사」 칸 — 색이 코드에 직접 박혀 있어 토큰 교체를 안 탄다. */
.unfinished-section {
  border-color: rgba(255, 255, 255, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
}

/* ── 로고 — 「별유각」 글자 자체가 로고다 (2026-09-01) ────────────────
   타이트 로고를 재 보니 68×16px 이고 그림자도 테두리도 없다. 우리 것은 31px 높이에
   테두리·굽·번짐까지 얹어서 두 배로 크고 투박했다. 전부 걷고 납작한 글자만 남긴다.
   서체는 이미 싣고 있는 Noto Sans KR 900 — 로고 하나 때문에 서체를 더 부르지 않는다.
   그림이 아니라 글자라 어느 크기로 키워도 안 깨지고 생성 비용이 0원이다. */
.brand-mark { display: none; }
.brand-wordmark { gap: 0; }

.brand-text {
  font-family: "Noto Sans KR", sans-serif;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em; /* 자간을 좁혀야 글줄이 아니라 한 덩어리로 읽힌다 */
  color: #b98cff;
  padding: 0;
}

/* ── 결제 화면 — 「미완성처럼 보이지 않게」 (2026-09-01 카라반) ────────
   상품 이름이 든 칸이 옛 밝은 테마의 흰 바탕(#faf7ef)으로 남아 있어서,
   어두운 화면에서 흰 박스에 연한 글자가 되어 상품명이 아예 안 읽혔다.
   39,800원을 내는 화면인데 무엇을 사는지가 안 보였다. */
.checkout-panel {
  border-color: rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: #151824;
}
.checkout-panel h2 {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
}
.checkout-box {
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.05);
}
.checkout-box b { font-size: 17px; font-weight: 700; color: #f4f2ee; }
.checkout-box span,
.amount-panel strong { color: #fff; }
.amount-panel { border-color: rgba(160, 107, 255, 0.28); background: rgba(122, 75, 232, 0.1); }
.amount-panel > span { font-size: 15px; font-weight: 700; }

/* 결제 버튼 — 홈과 같은 보라. 금색은 이 화면에만 남아 따로 놀았다. */
.checkout-actions .primary-action,
[data-pay-confirm] {
  background: linear-gradient(135deg, #7a4be8, #b44be8);
  color: #fff;
  border: 0;
}

/* 결제 직전 신뢰 세 줄 */
.pay-assure {
  margin: 14px 16px 0;
  padding: 14px 16px;
  list-style: none;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}
.pay-assure li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 9px;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(240, 238, 232, 0.72);
  word-break: keep-all;
}
.pay-assure li:last-child { margin-bottom: 0; }
.pay-assure li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #b98cff;
  font-weight: 700;
}
.pay-assure b { color: #f2f0ea; font-weight: 700; }
.pay-assure-link {
  padding: 0;
  border: 0;
  background: none;
  color: #b98cff;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.pay-privacy {
  margin: 12px 16px 0;
  text-align: center;
  font-size: 12px;
  color: rgba(240, 238, 232, 0.42);
}

/* ── 결과지 채우는 중 표시 (2026-09-01) ────────────────────────────
   카라반: 「각 섹션 로딩이 너무 길다. 결제를 했어도 이탈한다. 심각한 이슈」.
   생성 속도 자체는 줄일 수 없다. 대신 몇 장이 남았는지 보여 준다 —
   안 보이면 손님은 멈춘 줄 알고 나간다. 다 채워지면 저절로 사라진다. */
.fill-strip {
  position: sticky;
  top: 0;
  z-index: 14;
  padding: 9px 16px 10px;
  background: rgba(10, 12, 20, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.fill-bar {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.fill-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #7a4be8, #b44be8);
  transition: width 0.45s ease;
}
.fill-text {
  margin: 7px 0 0;
  font-size: 12.5px;
  color: rgba(240, 238, 232, 0.66);
  letter-spacing: -0.01em;
}

/* 아직 안 온 장 — 점 세 개 대신 글줄 뼈대를 보여 준다.
   「곧 글이 온다」가 읽혀야 손님이 기다린다. */
.section-loading {
  display: grid;
  gap: 11px;
  padding: 4px 0 6px;
}
.section-loading span {
  display: block;
  width: 100%;
  height: 13px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.11) 45%, rgba(255,255,255,.05) 65%);
  background-size: 280% 100%;
  animation: skeleton-sweep 1.5s ease-in-out infinite;
}
.section-loading span:nth-child(2) { width: 92%; animation-delay: .18s; }
.section-loading span:nth-child(3) { width: 74%; animation-delay: .36s; }
@keyframes skeleton-sweep {
  0% { background-position: 140% 0; }
  100% { background-position: -40% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .section-loading span { animation: none; }
  .fill-bar i { transition: none; }
}

/* ── 장 삽화를 웹툰 컷으로 (2026-09-01) ──────────────────────────────
   카라반 「진짜 웹툰식으로 타이트처럼. 흑도령 결과지 보면 시각자료 엄청 많음」.
   흑도령 컷은 화면에 꽉 찬 띠가 아니라 살짝 기울여 붙여 놓은 사진이고,
   컷 사이에 검은 여백이 넓다 — 그 여백이 세로 스크롤 웹툰의 호흡을 만든다.
   말풍선 꼬리는 건드리지 않는다(「꼬리 없음」은 확정값, 8/25).
   ※ 새 그림 없이 배치만 바꾼다 — 크레딧 0원. */
.wr-chapter { overflow: hidden; } /* 기울인 컷이 옆으로 삐져나가 가로 스크롤이 생기는 것을 막는다 */

.wr-insert.wr-theme {
  height: 330px;
  margin: 30px 14px 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  transform: rotate(-1.1deg);
  /* 띠처럼 위아래로 흐려지던 것을 끊는다 — 웹툰 컷은 테두리가 분명하다 */
  -webkit-mask-image: none;
  mask-image: none;
}
/* 컷마다 기울기를 달리해야 「붙여 놓은 사진」으로 읽힌다. 다 같으면 실수처럼 보인다. */
.wr-chapter:nth-of-type(even) .wr-insert.wr-theme { transform: rotate(1.3deg); }
.wr-chapter:nth-of-type(3n) .wr-insert.wr-theme { transform: rotate(-0.7deg); }

/* 숨 고르는 인서트(주제 그림이 없는 장)는 원래대로 띠로 둔다 — 여긴 컷이 아니라 여백이다. */
.wr-insert:not(.wr-theme) { margin-block: 26px 38px; }

@media (prefers-reduced-motion: reduce) {
  .wr-insert.wr-theme { transform: none; }
}

/* ── 전환 흐름(인트로 → 질문 → 명식 → 결제)도 홈과 같은 결로 ─────────
   2026-09-01: 홈을 무채색 + 로고만 보라로 바꿨는데 상품 화면은 금색이 남아 있었다.
   손님이 홈에서 카드를 누르면 갑자기 다른 사이트처럼 보인다.
   결과지(명식표·개념 카드·장 표지)의 금색은 그대로 둔다 — 거긴 앱이 아니라 책이다. */
.view[data-view="topic"] .primary-action,
.view[data-view="topic"] [data-topic-start],
.view[data-view="topic"] [data-topic-submit],
.view[data-view="topic"] [data-topic-pay],
.view[data-view="topic"] [data-topic-sticky-pay] {
  background: linear-gradient(135deg, #7a4be8, #b44be8);
  color: #fff;
  border: 0;
}

/* 걸음 표시(질문 → 명식 → 결과) */
.halmae-progress-step.is-active {
  border-color: rgba(160, 107, 255, 0.5);
  background: rgba(122, 75, 232, 0.18);
  color: #cbaaff;
}
.halmae-progress-step.is-active i { background: #7a4be8; color: #fff; }

/* ── 질문 고르는 화면 — 「더 크고 잘 보이게」 (카라반) ────────────────
   손님이 처음 손대는 곳이다. 칩이 작으면 안 눌리고, 안 눌리면 전환이 안 된다. */
.halmae-step-title {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -0.02em;
}
.halmae-question-chips { gap: 9px; }
.halmae-question-chips button {
  width: 100%;
  padding: 15px 17px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(240, 238, 232, 0.9);
  font-size: 15.5px;
  line-height: 1.5;
  text-align: left;
  word-break: keep-all;
}
.halmae-question-chips button.is-active,
.halmae-question-chips button[aria-pressed="true"] {
  border-color: rgba(160, 107, 255, 0.6);
  background: rgba(122, 75, 232, 0.16);
  color: #fff;
}

/* ── 전환 흐름에 남은 노란색 걷기 + 잘림·가림 고치기 (2026-09-01) ────── */

/* 1) 걸음 표시의 번호 원과 진행 점이 아직 노란색이었다 */
.halmae-progress-step i {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.halmae-progress-step {
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(240, 238, 232, 0.66);
}
.scene-dots i { background: rgba(255, 255, 255, 0.18); }
.scene-dots i.is-on,
.scene-dots i.is-done { background: rgba(255, 255, 255, 0.9); }
.mq-dots i.is-on { background: rgba(255, 255, 255, 0.92); }

/* 2) select 안 글자가 세로로 잘렸다 — 높이를 글자가 앉을 만큼 준다 */
.mq-input,
.mq-select,
.mq-field select,
.mq-field input {
  min-height: 52px;
  line-height: 1.45;
  /* 기본 화살표가 글자를 밀어 마지막 글자가 잘리던 것을 막는다 */
  padding-right: 40px;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(240,238,232,.55) 50%),
                    linear-gradient(135deg, rgba(240,238,232,.55) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.mq-input[type="text"],
.mq-field input[type="text"] { background-image: none; padding-right: 16px; }

/* 3) 하단 탭바가 제출 버튼을 가렸다 — 걸음마다 내용 길이가 달라서
   고정 여백으로는 안 맞는다. 폼 아래에 탭바 높이만큼 자리를 비워 둔다. */
.mq-form { padding-bottom: 8px; }
.mq-foot { padding-bottom: 118px; } /* 하단 띠(56) + 바닥 여백(25) + 숨 */
/* 여기서 overflow-y:auto 를 주면 안 된다 — 안쪽에 스크롤이 생겨서 페이지를 끝까지
   내려도 버튼이 하단 띠 뒤에 남는다(실측). 그냥 자라게 두면 페이지가 늘어나 닿는다. */

.mq-why {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(240, 238, 232, 0.5);
  word-break: keep-all;
}

/* 지나온 걸음의 번호 원도 금색이었다 — .is-done 을 빠뜨렸다 */
.halmae-progress-step.is-done i {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.halmae-progress-step.is-done { color: rgba(240, 238, 232, 0.72); }

/* 긴 걸음(요즘 어떻게 지내)에서 제출 버튼이 하단 띠에 가렸다.
   폼이 아래 정렬이라 내용이 넘치면 위가 잘리고 버튼이 화면 밖으로 밀렸다.
   위 정렬로 두고 짧은 걸음만 아래로 밀어 준다 — 두 경우가 다 맞는다. */
.mq-form { justify-content: flex-start; }
.mq-step { margin-top: auto; }
.mq-foot { margin-top: 0; }

/* ── 상품 안에서는 하단 띠를 내린다 (2026-09-01) ─────────────────────
   사장님: 「타이트는 상품 선택해서 들어가면 하단 탭이 아예 안 나와서 가리는 게 없어.
   명식이랑 인트로, 구매전환, 결과지 모두 안 나옴.」
   띠가 사라지면 버튼을 가릴 일 자체가 없어지고, 화면도 그만큼 넓어진다. */
body.is-immersive .bottom-nav { display: none; }
body.is-immersive .view.is-active { padding-bottom: 16px; }
body.is-immersive .mq-foot { padding-bottom: 24px; }

/* ── 인트로·명식을 타이트 실측값으로 (sajutight.me/mzmudang, 375px 에서 잼) ──
   2026-09-01. 눈대중이 아니라 브라우저로 걸어 들어가 잰 값이다.
     질문 28px/600 · 선택지 16px/500 · 선택지 간격 50px
     「다음으로」 16px/600, 높이 48, 가로 343(좌우 16), 바닥에서 50
     인트로 버튼 18px, 높이 58, 흰빛 16% 바탕 + 흰 테두리 60%, 둥글기 16
   ★가장 큰 차이는 배경 블러였다 — 타이트는 캐릭터 그림을 흐려서 깐다.
     그래서 글자가 그림에 묻히지 않는다. 우리는 선명한 그림 위에 글자를 얹어
     읽기 어려웠다(사장님이 말한 「가독성」의 실체). */

/* 배경을 흐린다 — 그림은 분위기로만 남기고 글자를 살린다 */
.mq::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center 22%;
  filter: blur(9px) saturate(0.92);
  transform: scale(1.08); /* 흐리면 가장자리가 비므로 살짝 키운다 */
  z-index: 0;
}
.mq-veil { z-index: 1; }
.mq-top,
.mq-form { position: relative; z-index: 2; }

/* 질문 — 타이트와 같은 28px/600 */
.mq-ask {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.mq-lead { font-size: 15px; margin-bottom: 6px; }

/* 고르는 줄 — 박스를 걷고 동그라미 + 글자만. 타이트는 테두리를 안 쓴다 */
.mq-choice { gap: 0; }
.mq-opt {
  padding: 17px 0;
  gap: 14px;
  border: 0;
  background: none;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}
.mq-opt i {
  width: 22px;
  height: 22px;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.55);
}
.mq-opt.is-on { background: none; color: #fff; }
.mq-opt.is-on i {
  border-color: #fff;
  background: #fff;
  box-shadow: inset 0 0 0 4px rgba(20, 18, 26, 0.92);
}

/* 다음으로 — 16px/600, 높이 48 */
.mq-next {
  padding: 0;
  height: 48px;
  font-size: 16px;
  font-weight: 600;
}

/* 인트로 버튼 — 보라 채움이 아니라 반투명 흰 테두리 알약 */
.view[data-view="topic"] .scene-next {
  height: 58px;
  padding: 0 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 18px;
  font-weight: 400;
}
.scene-skip { font-size: 15px; font-weight: 400; }

/* 「눌러서 다음」은 대사 박스 위로. 아래에 있으면 대사를 다 읽고 나서야 보인다 —
   위에 있어야 「눌러라」가 먼저 눈에 들어온다(2026-09-01 사장님).
   앞의 동그라미는 뜻이 없어서 뺀다. 삼각형 하나로 충분하다. */
.scene-hint {
  order: -1;
  margin: 0 0 4px;
}
.scene-hint::before { content: none; }

/* ── 질문 고르는 화면도 배경을 흐린다 (2026-09-01) ────────────────────
   사장님 「선택지 뒤에 이미지가 너무 밝고 선명해서 가독성 떨어짐」.
   명식 화면(.mq)에는 블러를 넣었는데 질문 화면은 짜임이 달라 안 걸렸다.
   여기도 그림은 분위기로만 남기고 글자를 살린다. */
.halmae-view .has-scene-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  filter: blur(9px) saturate(0.9);
  transform: scale(1.08); /* 흐리면 가장자리가 비므로 살짝 키운다 */
  z-index: 0;
  pointer-events: none;
}
/* 어둡게 덮는 층을 블러 위로 올리고, 아래쪽을 더 진하게 — 거기 글이 앉는다 */
.halmae-view .has-scene-art::before {
  z-index: 1;
  /* 위쪽도 어둡게 — 흐린 등불빛이 모서리에서 새어 나와 밝게 떴다(2026-09-01). */
  background: linear-gradient(180deg, rgba(6, 7, 13, 0.86) 0%, rgba(6, 7, 13, 0.8) 22%, rgba(6, 7, 13, 0.88) 55%, rgba(6, 7, 13, 0.96) 100%);
}
.halmae-view .has-scene-art > * { position: relative; z-index: 2; }

/* 명식 단계 배경 영상 — 그림 대신 영상이 깔린다. 위에 흐린 막(::after)과
   어두운 막(::before)이 덮이므로 그림과 똑같이 흐려진다(2026-09-02). */
/* 선택자를 .has-scene-art > * 보다 구체적으로 잡아야 한다 — 그 규칙이
   position:relative 를 걸어서 영상이 흐름에 자리를 차지하고 폼을 밀어냈다. */
.halmae-view .has-scene-art > .step-bg-video,
.step-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  filter: blur(9px) saturate(0.9);
  transform: scale(1.08);
}
.halmae-view .has-scene-art > .step-bg-video { z-index: 0; }