html,
body {
  -webkit-text-size-adjust: 100%;
}

.chart-frame svg {
  display: block;
  width: 100%;
  height: auto;
}

.chart-frame text {
  font-family: "Noto Sans KR", system-ui, sans-serif;
}

/* 하단 고정 버튼: 홈 인디케이터 영역 확보 */
.dock {
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
}

/* 두들 카드 -----------------------------------------------------
   일러스트가 굵은 외곽선 + 단순한 면 채색이라, 카드도 같은 규칙을 따른다.
   얇은 테두리 하나와 아래로 살짝 떨어지는 단색 그림자. */

.doodle-card {
  background: #ffffff;
  border: 1px solid #e6ddc9;
  border-radius: 18px;
  box-shadow: 0 2px 0 #ece2cd;
}

/* 결론 한 줄. 형광펜으로 슥 그은 듯한 밑줄이라 줄이 바뀌어도 자연스럽게 이어진다. */
.mark-line {
  color: #2a3454;
  font-weight: 500;
  background-image: linear-gradient(180deg, rgba(240, 169, 59, 0.55), rgba(240, 169, 59, 0.55));
  background-repeat: no-repeat;
  background-size: 100% 0.28em;
  background-position: 0 100%;
  border-radius: 0.16em;
  padding: 0 0.1em 0.06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* 눌리는 느낌을 주는 버튼 */
.btn-pop {
  box-shadow: 0 3px 0 #cf8a1f;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.btn-pop:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 #cf8a1f;
}

/* 첫 화면 배경: 옅은 점무늬와 색 얼룩 */
.hero-dots {
  background-color: #fdf5e7;
  background-image: radial-gradient(#e7dcc4 1.4px, transparent 1.4px);
  background-size: 18px 18px;
}

/* 첫 화면과 본문 사이를 가르는 물결선 (일러스트의 구름 곡선에서 따왔다) */
.wave-divider {
  height: 14px;
  background-color: #fdf5e7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cpath d='M0 9c6 0 6-5 12-5s6 5 12 5 6-5 12-5 6 5 12 5' fill='none' stroke='%23e0d5bd' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
}

.doodle-blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(26px);
  pointer-events: none;
}

.doodle-blob--sun {
  top: -70px;
  left: -60px;
  width: 190px;
  height: 190px;
  background: rgba(240, 169, 59, 0.22);
}

.doodle-blob--sky {
  right: -70px;
  top: -50px;
  width: 190px;
  height: 190px;
  background: rgba(143, 163, 232, 0.22);
}

/* 행성·별자리 일러스트 -------------------------------------------- */

.planet-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--px, 56px);
  height: var(--px, 56px);
  border-radius: 9999px;
  background: var(--tint, #f3ece0);
  overflow: hidden;
}

.planet-badge img {
  display: block;
  width: 88%;
  height: 88%;
  object-fit: contain;
}

.planet-plain {
  width: var(--px, 120px);
  height: auto;
}

/* 첫 화면 상단에 늘어놓는 열 개의 별.
   좁은 화면에서는 --px 를 넘지 않는 선에서 같이 줄어든다. */
.hero-planet {
  width: 100%;
  max-width: var(--px, 40px);
  height: auto;
  filter: drop-shadow(0 3px 5px rgba(42, 52, 84, 0.18));
}

/* reCAPTCHA v3 배지를 화면에서 치운다.
   구글 정책상 감추려면 대신 고지 문구를 노출해야 해서 푸터에 넣어 두었다. */
.grecaptcha-badge {
  visibility: hidden;
}

/* iOS 사파리는 글자가 16px 보다 작은 입력칸을 누르면 화면을 확대해 버린다.
   확대를 막는 설정은 사파리가 무시하므로, 좁은 화면에서 글자를 16px 로 올린다. */
@media (max-width: 640px) {
  input[type="text"],
  input[type="number"],
  input[type="tel"],
  input[type="email"],
  input[type="search"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px;
  }
}

/* hidden 속성이 항상 이기게 한다.
   Tailwind 의 display 유틸리티(.flex 등)가 나중에 선언돼서
   [hidden] 을 덮어쓰는 바람에 감춘 요소가 그대로 보이는 일이 있다. */
[hidden] {
  display: none !important;
}

/* 방송 캡처 배너.
   원본 색이 탁하고 차가워서, 사이트의 크림·금색을 얇게 덮고
   아래쪽은 카드 흰색으로 흘려 보내 경계를 지운다. */
.tv-shot {
  position: relative;
  isolation: isolate;
}

.tv-shot img {
  display: block;
  filter: saturate(1.08) contrast(1.04) brightness(1.03);
}

.tv-shot__veil,
.tv-shot__fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tv-shot__veil {
  background: linear-gradient(120deg, rgba(240, 169, 59, 0.3) 0%, rgba(143, 163, 232, 0.28) 100%);
  mix-blend-mode: soft-light;
}

.tv-shot__fade {
  background:
    linear-gradient(180deg, rgba(253, 245, 231, 0.4) 0%, rgba(253, 245, 231, 0) 22%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0.75) 88%, #fff 100%);
}

/* 탄누셋 카드 오른쪽 아래에 걸치는 큰 그림 */
.tanuset-card {
  isolation: isolate;
}

.tanuset-art {
  position: absolute;
  right: -14px;
  bottom: -22px;
  z-index: 0;
  opacity: 0.95;
  filter: drop-shadow(0 6px 14px rgba(15, 22, 45, 0.35));
  pointer-events: none;
}

.spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid #ece4d4;
  border-top-color: #f0a93b;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.spinner-sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
  border-color: rgba(42, 52, 84, 0.2);
  border-top-color: #2a3454;
  vertical-align: -3px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}