/* 살 테스트 배너: 달빛 연못·후기와 같은 카드 표면. 그림은 위에 크게, 주 행동은 다른 카드의 버튼 어휘를 따른다. */
.sal-test-banner { display: grid; gap: 18px; margin: 24px 0; padding: 24px; border: 1px solid var(--ui-line); border-radius: 22px; background: var(--ui-surface); color: var(--ui-ink); text-decoration: none; }
.sal-test-banner img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-soft); object-fit: cover; object-position: center 30%; }
.sal-test-banner span { display: grid; gap: 6px; min-width: 0; }
.sal-test-banner small { color: var(--ui-gold); font: 500 11px/1.5 var(--sans); letter-spacing: .1em; }
.sal-test-banner strong { margin-bottom: 4px; font: 700 22px/1.5 var(--serif); letter-spacing: -.035em; word-break: keep-all; }
.sal-test-banner em { color: var(--ui-muted); font: normal 400 14px/1.75 var(--sans); }
.sal-test-banner b { display: flex; align-items: center; justify-content: center; min-height: 46px; margin-top: 12px; padding: 10px 14px; border: 1px solid var(--ui-action); border-radius: var(--ui-control-radius); background: var(--ui-action); color: var(--ui-surface); font: 600 14px/1.5 var(--sans); }
.sal-test-banner:hover b { border-color: var(--ui-action-hover); background: var(--ui-action-hover); }
.sal-test-banner:focus-visible { outline: 2px solid var(--ui-action); outline-offset: 3px; }

/* 첫 화면(생년월일 입력)을 유료 풀이와 같은 결로 맞춘다.
   report.css 의 토큰(--report-ink, --report-surface, --report-radius …)을 그대로 쓴다.
   기존 style.css 의 크림·세리프 테마를 이 화면에서만 덮는다. */

html:has(#input-screen.active),
body:has(#input-screen.active),
html:has(#home-screen.active),
/* 랜딩도 영상 주위 여백에 한지가 비치게 둔다. */
body:has(#home-screen.active) { background: transparent; }
body:has(#input-screen.active) .shell,
body:has(#home-screen.active) .shell { width: min(calc(100% - (var(--app-gutter) * 2)), calc(var(--app-max-width) - (var(--app-gutter) * 2))); padding-top: 20px; }
#input-screen { color: var(--report-ink); }


/* ─── 메인 화면 ────────────────────────────────────────────────
   화면 한 장을 거의 다 쓰는 사진 카드. 아래쪽에 어둠을 깔고 그 위에
   문구와 버튼을 얹는다. 사진은 인물이 왼쪽 위에 있어서 잘릴 때
   얼굴이 남도록 object-position 을 왼쪽으로 당겨 둔다. */
#home-screen { color: var(--report-ink); }
#chart-screen .free-promo-flow,
#free-promo-flow-report { display: none !important; }
/* 하단 상시 바가 푸터를 덮지 않게 그만큼 비워 둔다. partnav 의 has-part-nav 와 같은 방식. */
body:has(#home-screen.active) .shell { padding-bottom: calc(28px + 80px + env(safe-area-inset-bottom, 0px)); }

/* ─── 랜딩 하단 상시 바 ────────────────────────────────────────
   풀이 화면에는 partnav 의 떠 있는 바가 따로 있어서, 이 바는 첫 화면에서만 보인다.
   둘을 같이 띄우면 바닥에 바가 두 개 겹친다. */
.home-tabbar { display: none; }
body:has(#home-screen.active) .home-tabbar,
body:has(#zodiac-today-screen.active) .home-tabbar,
body:has(#archive-screen.active) .home-tabbar,
body:has(#chat-list-screen.active) .home-tabbar,
body:has(#wishes-screen.active) .home-tabbar {
  position: fixed; z-index: 74;
  /* 청월당 하단 메뉴처럼 화면 바닥에 붙이고, 넓은 화면에서는 448px로 제한한다. */
  left: 0; right: 0; bottom: 0; width: 100%; max-width: var(--app-max-width); margin: 0 auto; box-sizing: border-box;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  /* 홈 인디케이터를 피하는 여백은 바 안쪽에서 준다. 바닥에 붙어 있어야 하므로. */
  padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  border-radius: 20px 20px 0 0; overflow: hidden; border: 0;
  background: rgba(255,253,248,.97);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 -4px 24px #493d2e0a; border-top: 1px solid var(--ui-line);
}
body:has(#chat-list-screen.active),
body:has(#archive-screen.active),
body:has(#zodiac-today-screen.active) { padding-bottom: 0; }

/* Shared app-tab layout reserves the bottom bar once. */
body:has(:is(#chat-list-screen, #archive-screen, #zodiac-today-screen, #wishes-screen).active) { padding-bottom: 0; }
body:has(:is(#chat-list-screen, #archive-screen, #zodiac-today-screen, #wishes-screen).active) .shell { padding-top: 0; padding-bottom: calc(var(--ui-nav-height) + 24px); }
body:has(:is(#chat-list-screen, #archive-screen, #zodiac-today-screen, #wishes-screen).active) .site-footer { display: none; }
.page-lead { margin: 0 0 20px; color: var(--ui-muted); font: 400 15px/1.75 var(--sans); }

/* 12띠 오늘 운세 — 하단 탭에서 바로 여는 가벼운 독립 화면 */
body:has(#archive-screen.active) .shell,
body:has(#zodiac-today-screen.active) .shell { padding-top: 0; padding-bottom: calc(var(--ui-nav-height) + 24px); }
body:has(#archive-screen.active) .site-footer,
body:has(#zodiac-today-screen.active) .site-footer { display: none; }
.zodiac-today-screen { max-width: 720px; margin: 0 auto; color: var(--report-ink); }
.zodiac-today-heading { position: relative; padding: 18px 0 14px; border-bottom: 1px solid #ece7df; }
.zodiac-today-heading p { margin: 0 0 5px; color: #9a7650; font: 700 11px/1.4 var(--sans); letter-spacing: .08em; }
.zodiac-today-heading h2 { margin: 0; font: 700 27px/1.35 var(--serif); letter-spacing: -.04em; }
.zodiac-today-heading time { display: block; margin-top: 7px; color: #918b82; font-size: 12px; }
.zodiac-today-lead { margin: 18px 0; color: #77716a; font-size: 13px; line-height: 1.7; }
.zodiac-fortune-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.zodiac-fortune-card { min-width: 0; padding: 20px 16px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: 0 3px 12px rgba(55,45,34,.035); }
.zodiac-fortune-card header { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.zodiac-fortune-card header span { font-size: 24px; line-height: 1; }
.zodiac-fortune-card h3 { margin: 0; font: 700 16px/1.3 var(--sans); }
.zodiac-fortune-card p { margin: 0; color: #65615b; font: 400 13px/1.65 var(--sans); word-break: keep-all; }
.zodiac-fortune-card small { display: block; margin-top: 10px; color: #9a7650; font-size: 11px; }
.zodiac-today-note { margin: 18px 2px 0; color: #a09a91; font-size: 11px; text-align: center; }
@media (max-width: 360px) { .zodiac-fortune-list { grid-template-columns: 1fr; } }
/* 메뉴·알림판이 덮고 있을 때는 물러난다. 그 위로 뚫고 올라오면 닫을 곳을 가린다. */
body.site-menu-locked .home-tabbar,
body.notice-open .home-tabbar { display: none; }

.home-tab {
  min-width: 0;
  display: flex; height: 52px; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  color: var(--ui-muted); font: 500 11px/1.2 var(--sans); letter-spacing: -.025em;
}
.home-tab svg { width: 24px; height: 24px; }
.home-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 14px; }
/* 지금 보고 있는 칸. 아이콘이 채워지고 글씨가 진해진다. */
.home-tab.is-current { color: var(--ui-action); font-weight: 700; }
.home-tab.is-current svg { background: var(--ui-soft); border-radius: 8px; box-shadow: 0 0 0 6px var(--ui-soft); }
/* 갈 곳이 아예 없는 칸. 눌리지 않는다는 것을 색으로도 알린다. */
.home-tab.is-locked { color: color-mix(in srgb, var(--muted) 62%, transparent); cursor: default; }

/* 잠긴 칸을 눌렀을 때 이유를 잠깐 띄운다. 아무 반응이 없으면 고장으로 읽힌다. */
.home-tabbar-tip[hidden] { display: none !important; }
.home-tabbar-tip {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  margin: 0; padding: 7px 12px; border-radius: 999px; white-space: nowrap;
  background: rgba(37,34,30,.92); color: #fdf8f1; font: 600 12px/1.4 var(--sans);
}

/* 영상을 걷어낸 뒤의 첫 화면. 제 높이만 쓰고, 아래로 계속 읽어 내려가게 둔다.
   전에는 100dvh 를 먹어서 그 아래 섹션까지 스크롤이 닿지 않았다. */
.home-hero { position: relative; padding: 4px 2px 0; }
.home-hero-copy { position: relative; width: 100%; }

/* 낭독기에만 남기는 글. 이 파일이 이미 쓰던 숨김 방식(clip + clip-path)을 그대로 따른다. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

/* 히어로는 그림 한 장이다. 제목·소개·버튼이 모두 그려져 있어 글을 덧대지 않는다.
   그림 속 버튼은 눌리지 않으므로 그림 전체가 진짜 버튼이 된다.
   높이를 묶는 이유: 9:16 을 그대로 펴면 첫 화면이 뷰포트를 다 먹어
   아래 오늘 패널까지 스크롤이 닿지 않는다. 영상을 걷어낸 것과 같은 이유다. */
.home-hero-art {
  display: block; width: 100%; margin: 0; padding: 0; border: 0;
  border-radius: 18px; overflow: hidden; background: var(--accent-soft);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 6px 22px rgba(28,24,20,.12);
}
/* 높이를 묶지 않는다. 그림이 첫 화면 밖으로 넘치게 두면
   "아래에 더 있다"는 신호가 되어 오히려 스크롤을 유도한다. */
.home-hero-art img,
.home-hero-art video { display: block; width: 100%; height: auto; }
.home-hero-art:active { transform: translateY(1px); }
.home-hero-art:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) {
  .home-hero-art:hover { box-shadow: 0 10px 28px rgba(28,24,20,.18); }
}

.home-cta-group { margin-top: 14px; text-align: center; }
/* 오늘 본 사람 수. 흐린 한 줄로 두면 아무도 읽지 않는다 — 알약 안에 넣고 숫자만 굵게 띄운다. */
.home-social-proof[hidden] { display: none !important; }
.home-social-proof {
  display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 8px 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  font: 500 13px/1.4 var(--sans); letter-spacing: -.02em;
}
.home-social-proof b { color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; }
.home-social-dot { position: relative; width: 7px; height: 7px; flex: none; border-radius: 50%; background: #d9534f; }
.home-social-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: social-pulse 1.8s ease-out infinite; }
@keyframes social-pulse { from { transform: scale(1); opacity: .6 } to { transform: scale(2.8); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .home-social-dot::after { animation: none } }
@media (max-width: 400px) {
  .home-hero-art { border-radius: 14px; }
}
@media (min-width: 721px) {
  /* 넓은 화면에서 세로 포스터를 폭에 맞춰 늘리면 우스꽝스럽게 커진다. 가운데로 모은다. */
  .home-hero-art { max-width: 460px; margin: 0 auto; }
}


/* 히어로 */
.landing-hero { margin-bottom: 28px; }
.landing-hero .section-kicker { color: #64758d; font-size: 11px; letter-spacing: .1em; }
.landing-hero h2 { margin: 6px 0 20px; color: var(--report-ink); font: 700 34px/1.3 var(--sans); letter-spacing: -.045em; }
.landing-hero-image { display: block; width: 100%; height: auto; margin: 0 0 20px; border-radius: var(--report-radius); }
.landing-lead { margin: 0; color: var(--report-muted); font: 16px/1.8 var(--sans); }

/* 폼 — 회색 카드 한 장 */
#input-screen .form-card { display: grid; gap: 12px; padding: 18px var(--report-padding) calc(18px + 78px + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: var(--report-radius); background: var(--report-surface); box-shadow: none; }
#input-screen .input-step { display: grid; gap: 12px; }
#input-screen .input-step > label,
#input-screen .form-row > label { display: grid; gap: 5px; color: var(--report-ink); font: 600 14px/1.5 var(--sans); letter-spacing: -.01em; }
#input-screen .field-heading { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
#input-screen .optional { color: var(--report-meta); font: 400 12px/1.5 var(--sans); }
#input-screen .field-help { color: var(--report-meta); font: 400 12px/1.5 var(--sans); }

#input-screen input[type="text"],
#input-screen input[type="number"],
#input-screen select { width: 100%; padding: 13px 14px; border: 1px solid #e1e5ea; border-radius: 11px; color: var(--report-ink); background: #fff; font: 400 16px/1.4 var(--sans); appearance: none; }
#input-screen input::placeholder { color: #aab2bd; }
#input-screen input:focus, #input-screen select:focus { border-color: #7c93b3; outline: 2px solid rgba(69,90,118,.14); outline-offset: 1px; }
#input-screen select { background-image: linear-gradient(45deg, transparent 50%, #8a95a4 50%), linear-gradient(135deg, #8a95a4 50%, transparent 50%); background-position: calc(100% - 19px) 55%, calc(100% - 14px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
#input-screen select:disabled { color: var(--report-meta); background-color: #f0f2f5; }

/* 달력·윤달 — 한 줄에 나란히 놓는 세그먼트 알약.
   기본 라디오는 세로로 쌓이고 색도 옛 갈색 테마를 따라가서 직접 그린다. */
#input-screen fieldset { display: block; margin: 0; padding: 0; border: 0; }
#input-screen legend { display: block; float: left; width: 100%; margin-bottom: 8px; padding: 0; color: var(--report-ink); font: 600 14px/1.5 var(--sans); }
#input-screen .calendar-choice,
#input-screen .leap-month-choice { overflow: hidden; }
#input-screen .calendar-choice > label,
#input-screen .leap-month-choice > label {
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  min-width: 86px; margin: 0 8px 0 0; padding: 11px 18px;
  border: 1px solid #e1e5ea; border-radius: 999px; background: #fff;
  color: var(--report-muted); font: 500 15px/1 var(--sans); cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* 라디오 자체는 감추고 라벨을 눌리게 한다. */
#input-screen .calendar-choice input[type="radio"],
#input-screen .leap-month-choice input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#input-screen .calendar-choice > label:has(input:checked),
#input-screen .leap-month-choice > label:has(input:checked) { border-color: #455a76; background: #455a76; color: #fff; font-weight: 600; }
#input-screen .calendar-choice > label:has(input:focus-visible),
#input-screen .leap-month-choice > label:has(input:focus-visible) { outline: 2px solid rgba(69,90,118,.3); outline-offset: 2px; }
#input-screen input[type="checkbox"] { accent-color: #B8365A; }

/* 생년월일 세 칸 */
#input-screen .date-input-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto; align-items: center; gap: 6px; }
#input-screen .date-input-row > span { color: var(--report-meta); font: 400 13px/1 var(--sans); }
#input-screen .date-part { text-align: center; font-variant-numeric: tabular-nums; }

#input-screen .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#input-screen .form-row:has(> label:only-child) { grid-template-columns: minmax(0, 1fr); }

/* 버튼 */
#input-screen .submit-copy { margin-top: 4px; text-align: center; }
#input-screen .submit-copy p { margin: 0; color: var(--report-ink); font: 600 14px/1.5 var(--sans); letter-spacing: -.01em; }
#input-screen .submit-copy p + p { margin-top: 3px; color: var(--report-meta); font: 400 12px/1.5 var(--sans); }
#input-screen .primary-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 4px; padding: 17px; border: 0; border-radius: 14px; background: #455a76; color: #fff; font: 700 17px/1.4 var(--sans); letter-spacing: -.02em; box-shadow: none; cursor: pointer; }
#input-screen .primary-button:hover:not(:disabled) { background: #3a4c65; }
#input-screen .primary-button:disabled { background: #9aa8bb; cursor: default; }
#input-screen .dev-shortcut { margin-top: 2px; border: 1px dashed #d7dce3; border-radius: 11px; color: var(--report-meta); font: 400 13px/1 var(--sans); text-decoration: none; }
#input-screen .dev-shortcut:hover:not(:disabled) { border-color: #7c93b3; color: #526881; }
#input-screen .form-error { min-height: 18px; margin: 0; color: #b4553f; font: 13px/1.5 var(--sans); }

#input-screen .privacy-note { margin: 22px 0 0; color: var(--report-meta); font: 12px/1.7 var(--sans); }

@media (max-width: 400px) {
  .landing-hero h2 { font-size: 28px; }
  #input-screen .form-row { grid-template-columns: minmax(0, 1fr); }
}

/* 드래그 선택 색도 풀이 톤으로. */
#input-screen ::selection { background: rgba(69,90,118,.18); color: var(--report-ink); }

#input-screen .landing-hero { margin-bottom:18px; }
#input-screen .landing-hero h2 { margin-bottom:12px; }
#input-screen .landing-lead { font-size:14px;line-height:1.6; }
#input-screen .location-row { grid-template-columns:minmax(0,1fr); }
#input-screen [hidden] { display:none!important; }
#input-screen .calendar-gender-row { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px;align-items:start; }
#input-screen .calendar-gender-row .calendar-choice { display:grid;grid-template-columns:1fr 1fr;gap:5px;min-width:0;overflow:visible; }
#input-screen .calendar-gender-row legend { float:none;margin-bottom:5px; }
#input-screen .calendar-gender-row .calendar-choice > label { min-width:0;height:45px;margin:0;padding:0 8px;font-size:14px;border-radius:11px; }
#input-screen .input-step-nav {
  position: fixed; z-index: 70; right: 0; bottom: 0; left: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px;
  width: min(100%, var(--app-max-width)); margin: 0 auto;
  padding: 10px var(--app-gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #e5e9ee; background: rgba(255,255,255,.97);
}
#input-screen .input-step-nav button { min-height: 44px; border: 1px solid #d9dfe6; border-radius: 10px; color: #526174; background: #fff; font: 600 14px/1 var(--sans); }
#input-screen .input-step-nav #input-prev { justify-self: start; min-width: 76px; }
#input-screen .input-step-nav #input-prev:disabled { color: #b7bec8; background: #f5f6f8; cursor: default; }
#input-screen .input-step-nav #input-step-status { display: flex; align-items: center; gap: 6px; }
#input-screen .input-step-progress > span { display: block; width: 22px; height: 3px; border-radius: 999px; background: #d9dfe6; }
#input-screen .input-step-progress > span.is-active { background: #455a76; }
#input-screen .input-step-nav #input-next { justify-self: end; width: auto; min-width: 132px; margin: 0; padding: 0 18px; border: 0; border-radius: 10px; background: #455a76; color: #fff; font: 700 15px/1 var(--sans); }
#input-screen .input-step-nav #input-next:hover { background: #3a4c65; transform: none; }

/* 입력 화면은 폼에서 끝낸다. 하단 기본 여백과 공용 푸터를 붙이지 않는다. */
body:has(#input-screen.active) .shell { padding-bottom: 0; }
body:has(#input-screen.active) .site-footer { display: none; }
body:has(#input-screen.active) .shell {
  min-height: calc(100dvh - var(--site-header-height) - 20px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
#input-screen.active { display: flex; flex: 1; flex-direction: column; animation: none; }
#input-screen .form-card { margin-top: 12px; }

/* 입력 화면 — 한지 위에 회색 판을 얹지 않는다. 칸만 남기고 판은 비운다. */
#input-screen .form-card { background: transparent; }
#input-screen input,
#input-screen select,
#input-screen textarea {
  background: #fffdf9a6;
  border-color: #d8cfc0;
}
#input-screen input:focus,
#input-screen select:focus,
#input-screen textarea:focus { background: #fffdf9; }
/* 라디오·체크가 들어간 줄도 같은 결로 */
#input-screen .segmented, #input-screen fieldset { background: transparent; }

/* 단계 이동 바 — 남색을 걷어내고 한지·먹색으로. 두 버튼을 같은 크기로 세운다 */
#input-screen .input-step-nav {
  border-top: 1px solid #e4dccd;
  background: #fdfbf6f2;
  backdrop-filter: blur(6px);
  gap: 10px;
}
#input-screen .input-step-nav button {
  min-height: 50px; min-width: 108px; padding: 0 20px;
  border-radius: 999px; font: 600 15px/1 var(--sans); letter-spacing: -.01em;
}
#input-screen .input-step-nav #input-prev {
  min-width: 108px;
  border: 1px solid #ddd4c6; background: #fffdf8a6; color: #7a7159;
}
#input-screen .input-step-nav #input-prev:disabled {
  border-color: #eae4d8; background: transparent; color: #c3bcae;
}
#input-screen .input-step-nav #input-next {
  min-width: 108px; width: auto; margin: 0;
  border: 1px solid #2f3947; background: #2f3947; color: #f6f2e8;
  font-weight: 700;
}
#input-screen .input-step-nav #input-next:hover { background: #242c38; border-color: #242c38; }
/* 진행 점도 먹색으로 */
#input-screen .input-step-progress > span { width: 18px; height: 3px; background: #e0d8c9; }
#input-screen .input-step-progress > span.is-active { background: #8a7c5e; }

/* 단계 이동 바 — 바탕을 비우고 버튼만 남긴다 */
#input-screen .input-step-nav { background: transparent; backdrop-filter: none; border-top: 0; }

/* 양력·음력, 평달·윤달 — 남색을 걷어내고 먹색으로 */
#input-screen .calendar-choice > label,
#input-screen .leap-month-choice > label { border-color: #ddd4c6; background: #fffdf8a6; color: #7a7159; }
#input-screen .calendar-choice > label:has(input:checked),
#input-screen .leap-month-choice > label:has(input:checked) { border-color: #2f3947; background: #2f3947; color: #f6f2e8; }
#input-screen .calendar-choice > label:has(input:focus-visible),
#input-screen .leap-month-choice > label:has(input:focus-visible) { outline: 2px solid #b9985a; outline-offset: 2px; }
#input-screen input[type="checkbox"] { accent-color: #B8365A; }

/* 남은 남색 둘 — 기본 버튼과 토글 스위치 */
#input-screen .primary-button { background: #2f3947; }
#input-screen .toggle-line input:checked + .toggle { background: #2f3947; }
/* 1단계의 이전 버튼 — 그리드 칸은 지키고 모습만 감춘다 */
#input-screen .input-step-nav #input-prev:disabled { visibility: hidden; }

/* ══ 입력 화면 — 시선을 잡고, 여백을 줄이고, 먹선으로 마감한다 ══ */

/* 1. 시각적 앵커. 상단을 그림이 먼저 채운다 */
#input-screen .input-hero { margin-bottom: 12px; text-align: center; }
.input-hero-art { margin: 0 calc(var(--report-padding) * -1) 20px; }
.input-hero-art img { display: block; width: 100%; height: auto;
  aspect-ratio: 1200 / 560; object-fit: cover; object-position: center 34%;
  -webkit-mask-image: linear-gradient(#000 62%, transparent);
  mask-image: linear-gradient(#000 62%, transparent); }
@media (min-width: 560px) {
  .input-hero-art { margin-inline: 0; }
  .input-hero-art img { border-radius: 16px; }
}

/* 2. 여백과 밀도 — 제목·설명·폼이 한 덩어리로 붙는다 */
#input-screen #input-title { margin: 0 0 10px; font-family: var(--serif); font-weight: 700;
  font-size: 26px; line-height: 1.38; letter-spacing: -.04em; color: #1f242c; }
#input-screen .landing-lead { margin: 0; font-size: 14.5px; line-height: 1.75; color: #857c6c; }
#input-screen .form-card { padding-top: 22px; gap: 16px; }

/* 3. 먹선 마감 — 입력칸이 한지에 스민다 */
/* 앞쪽 규칙이 input[type="text"] 처럼 속성 선택자를 써서 특이도가 더 높다.
   같은 무게로 맞춰야 이름·생년월일 칸까지 바뀐다. */
#input-screen input[type="text"],
#input-screen input[type="number"],
#input-screen input[type="tel"],
#input-screen input:not([type]),
#input-screen select,
#input-screen textarea {
  /* background 단축을 쓰면 select 의 화살표(background-image)가 지워진다. 색만 바꾼다. */
  background-color: #fbf7efcc;
  border: 1.5px solid #b9ac91;
  /* 붓으로 그은 네모. 네 모서리를 서로 다르게 줘서 자를 댄 선이 아니게 만든다. */
  border-radius: var(--ui-control-radius);
  color: #2b2519;
  box-shadow: 0 1px 0 #00000008;
}
#input-screen input[type="text"]::placeholder,
#input-screen input[type="number"]::placeholder,
#input-screen textarea::placeholder { color: #857a6c; }
#input-screen input[type="text"]:focus,
#input-screen input[type="number"]:focus,
#input-screen input[type="tel"]:focus,
#input-screen input:not([type]):focus,
#input-screen select:focus,
#input-screen textarea:focus {
  background-color: #fffdf8;
  border-color: #6d5c3c;
  /* 먹이 한 번 번진 느낌. 링이 아니라 스밈이다. */
  box-shadow: 0 0 0 3px #b9985a1f, 0 0 7px #6d5c3c1a;
}
/* 양력·음력도 같은 붓결로. 알약이 아니라 먹으로 두른 칸이다. */
#input-screen .calendar-choice > label,
#input-screen .leap-month-choice > label {
  border: 1.5px solid #b9ac91; background-color: #fbf7efcc; color: #6e6450;
  border-radius: var(--ui-control-radius);
}
#input-screen .calendar-choice > label:has(input:checked),
#input-screen .leap-month-choice > label:has(input:checked) {
  border-color: #2f3947; background-color: #2f3947; color: #f6f2e8;
}
/* 단계 이동 버튼도 같은 결로 맞춘다 */
#input-screen .input-step-nav button {
  border-radius: var(--ui-control-radius);
  border-width: 1.5px;
}

/* 마지막 단계(내 사주 확인하기)는 별도 색 없이 앞 단계 다음 버튼과 같은 브라운을 쓴다. */

/* ══ 세련된 입력 컨트롤 — 먹색 active + 한지·황토 focus ══ */
#input-screen .gender-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  overflow: visible;
}
#input-screen .gender-choice legend { grid-column: 1 / -1; float: none; width: auto; margin-bottom: 1px; }
#input-screen .gender-choice > label,
#input-screen .calendar-choice > label,
#input-screen .leap-month-choice > label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 45px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid #c9bda7;
  border-radius: 11px;
  color: #655d50;
  background: rgba(255,253,248,.68);
  font: 600 14px/1 var(--sans);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
#input-screen .gender-choice input[type="radio"],
#input-screen .calendar-choice input[type="radio"],
#input-screen .leap-month-choice input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}
#input-screen .gender-choice > label:has(input:checked),
#input-screen .calendar-choice > label:has(input:checked),
#input-screen .leap-month-choice > label:has(input:checked) {
  border-color: #2f3947;
  color: #f8f4ea;
  background: #2f3947;
  box-shadow: 0 5px 12px rgba(47,57,71,.14);
}
#input-screen .gender-choice > label:has(input:focus-visible),
#input-screen .calendar-choice > label:has(input:focus-visible),
#input-screen .leap-month-choice > label:has(input:focus-visible) {
  outline: 2px solid rgba(185,152,90,.55);
  outline-offset: 2px;
}
#input-screen input[type="text"]:focus,
#input-screen input[type="number"]:focus,
#input-screen input[type="tel"]:focus,
#input-screen input:not([type]):focus,
#input-screen select:focus,
#input-screen textarea:focus {
  outline: none;
  border-color: #8f784c;
  box-shadow: 0 0 0 3px rgba(185,152,90,.2), 0 0 0 1px rgba(143,120,76,.12), 0 3px 10px rgba(91,72,39,.08);
}
#input-screen .gender-choice > label:hover,
#input-screen .calendar-choice > label:hover,
#input-screen .leap-month-choice > label:hover { border-color: #8f784c; }
#input-screen .gender-choice > label:has(input:checked):hover,
#input-screen .calendar-choice > label:has(input:checked):hover,
#input-screen .leap-month-choice > label:has(input:checked):hover { border-color: #2f3947; }

/* 입력 첫 화면에서 하단 버튼을 기다리지 않게 수직 밀도를 낮춘다. */
#input-screen .input-hero { margin-bottom: 10px; }
#input-screen .input-hero-art { margin-bottom: 10px; }
#input-screen .input-hero-art img { max-height: 220px; }
#input-screen #input-title { margin-bottom: 6px; line-height: 1.3; }
#input-screen .landing-lead { line-height: 1.55; }
#input-screen .form-card { gap: 10px; padding-top: 14px; padding-bottom: 16px; }
#input-screen .input-step { gap: 10px; }
#input-screen .form-error { min-height: 0; }

/* 모바일 컴팩트 레이아웃 — 첫 단계에서 토글을 한 행으로 묶는다. */
#input-screen .calendar-gender-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 8px;
}
#input-screen .calendar-gender-row .gender-choice,
#input-screen .calendar-options .calendar-choice,
#input-screen .calendar-options .leap-month-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  min-width: 0;
  overflow: visible;
}
#input-screen .calendar-gender-row .gender-choice legend,
#input-screen .calendar-options .calendar-choice legend,
#input-screen .calendar-options .leap-month-choice legend {
  grid-column: 1 / -1;
  float: none;
  width: auto;
  height: 21px;
  margin: 0;
  line-height: 21px;
}
#input-screen .calendar-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  align-content: start;
  min-width: 0;
}
#input-screen .calendar-options::before {
  content: "양력·음력 여부";
  grid-column: 1 / -1;
  height: 21px;
  color: var(--report-ink);
  font: 600 14px/21px var(--sans);
  letter-spacing: -.01em;
}
#input-screen .calendar-options:has(#leap-month-choice:not([hidden])) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#input-screen .calendar-options .calendar-choice,
#input-screen .calendar-options .leap-month-choice { display: contents; }
#input-screen .calendar-options .calendar-choice legend,
#input-screen .calendar-options .leap-month-choice legend {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}
#input-screen .calendar-gender-row .gender-choice > label,
#input-screen .calendar-options .calendar-choice > label,
#input-screen .calendar-options .leap-month-choice > label {
  min-width: 0;
  width: 100%;
  height: 45px;
  min-height: 45px;
  box-sizing: border-box;
  padding: 0 6px;
  white-space: nowrap;
}
#input-screen .calendar-options .leap-month-choice { margin-top: 0; }

/* 지금 상태(선택): 고민 아래 칩 한 줄. 좁은 화면에서는 줄바꿈으로 안에 머문다. */
#input-screen .relationship-choice { min-width: 0; margin: 0; padding: 0; border: 0; }
#input-screen .relationship-choice legend { float: none; width: auto; padding: 0; margin-bottom: 9px; color: var(--report-ink); font: 600 14px/1.5 var(--sans); letter-spacing: -0.01em; }
/* 앞 단계의 성별·양력/음력 칩과 같은 알약·같은 브라운(#B8365A). 네 칩이 한 줄을 4등분한다. */
#input-screen .relationship-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#input-screen .relationship-options > label { position: relative; display: block; min-width: 0; margin: 0; }
#input-screen .relationship-options input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
#input-screen .relationship-options span { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 4px; border: 1px solid var(--ui-line); border-radius: var(--ui-control-radius); background: var(--ui-surface); color: var(--ui-muted); font: 600 14px/1.25 var(--sans); text-align: center; word-break: keep-all; }
#input-screen .relationship-options label:has(input:checked) span { border-color: #fff9ef; background: #B8365A; color: #fff9ef; }
#input-screen .relationship-options label:has(input:focus-visible) span { outline: 2px solid rgba(85,49,45,.4); outline-offset: 2px; }
@media (max-width: 360px) { #input-screen .relationship-options span { padding: 8px 2px; font-size: 13px; } }

/* 시각 모름 체크: 시각 칸 아래 한 줄. 좁은 화면에서도 줄바꿈으로 안에 머문다. */
#input-screen .input-step > label.unknown-time-choice { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 2px; color: var(--report-ink); font-size: 14px; font-weight: 500; cursor: pointer; }
/* 기본 체크박스는 크롬이 어둡게 다시 칠해 검정으로 보이므로, 브라운(#B8365A)을 그대로 쓰도록 직접 그린다. */
#input-screen .unknown-time-choice input { appearance: none; -webkit-appearance: none; display: grid; place-content: center; flex: 0 0 auto; width: 22px; height: 22px; margin: 0; padding: 0; border: 1.5px solid #6d6355; border-radius: 6px; background: rgba(255,253,249,.7); cursor: pointer; }
#input-screen .unknown-time-choice input::after { content: ''; width: 11px; height: 6px; border-left: 2.5px solid #fff9ef; border-bottom: 2.5px solid #fff9ef; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
#input-screen .unknown-time-choice input:checked { border-color: #B8365A; background: #B8365A; }
#input-screen .unknown-time-choice input:checked::after { opacity: 1; }
#input-screen .unknown-time-choice input:focus-visible { outline: 2px solid rgba(85,49,45,.4); outline-offset: 2px; }
#input-screen .time-input-row.is-unknown .time-part { background: #f1efeb; }

/* 입력값은 44~48px 안에서 통일해 짧은 화면에서도 눌림 없이 읽힌다. */
#input-screen .date-input-row,
#input-screen .date-part,
#input-screen .time-input-row,
#input-screen .time-part,
#input-screen #city-select,
#input-screen #user-name { min-height: 45px; height: 45px; }
#input-screen .date-part,
#input-screen .time-part,
#input-screen #city-select,
#input-screen #user-name { padding-block: 0; }

/* 고정 내비게이션은 원래 위치를 유지하되, 입력 폼이 그 아래까지 여유를 갖는다. */
#input-screen .form-card { padding-bottom: calc(16px + 64px + env(safe-area-inset-bottom, 0px)); }

/* 첫 입력 화면도 작은 휴대폰에서는 내용 높이만큼 자연스럽게 스크롤되어야 한다. */
@media (max-width: 720px) {
  body:has(#input-screen.active [data-input-step="1"]:not([hidden])) .shell {
    min-height: calc(100dvh - var(--site-header-height));
    padding-top: 12px;
    padding-bottom: 0;
  }
  body:has(#input-screen.active [data-input-step="1"]:not([hidden])) #input-screen.active {
    min-height: 100%;
  }
}

@media (max-width: 600px) and (max-height: 700px) {
  #input-screen .input-hero-art img {
    height: 88px;
    max-height: none;
    object-fit: cover;
  }
  #input-screen .input-hero-art { margin-bottom: 7px; }
  #input-screen .input-hero { margin-bottom: 7px; }
}

@media (max-width: 380px) {
  #input-screen .calendar-gender-row { gap: 6px; }
  #input-screen .calendar-gender-row .gender-choice > label,
  #input-screen .calendar-options .calendar-choice > label,
  #input-screen .calendar-options .leap-month-choice > label { font-size: 12px; padding-inline: 3px; }
}

@media (max-width: 400px) {
  #input-screen .gender-choice > label,
  #input-screen .calendar-choice > label,
  #input-screen .leap-month-choice > label { padding-inline: 9px; }
}

/* 마지막 입력 단계의 국외 이전 동의와 상세 안내 */
#input-screen .transfer-consent { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 24px; padding: 12px 10px; border: 1px solid #dfe5ed; border-radius: 12px; background: #f3f6fa; }
#input-screen .transfer-consent-label { display: flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; color: #455a76; font: 500 13px/1.7 var(--sans); cursor: pointer; }
#input-screen .transfer-consent-label input { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; padding: 0; accent-color: #667a96; }
#input-screen #transfer-details-open { flex: 0 0 auto; display: block; white-space: nowrap; margin: 0; padding: 4px 0; color: #4f627d; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
#input-screen #input-next[hidden], #input-screen #goto-premium[hidden] { display: none; }

/* ══ 사주단자 입력 화면 ════════════════════════════════════════ */
/* 그림의 끝이 한지 바탕으로 오래 스며들게 한다. */
#input-screen .input-hero-art { position: relative; margin-bottom: 4px; overflow: hidden; }
#input-screen .input-hero-art::after {
  content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 52%; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, #f7f0e4 88%, transparent) 78%, #f7f0e4 100%);
}
#input-screen .input-hero-art img {
  -webkit-mask-image: linear-gradient(#000 42%, rgba(0,0,0,.92) 62%, transparent 100%);
  mask-image: linear-gradient(#000 42%, rgba(0,0,0,.92) 62%, transparent 100%);
}
#input-screen .landing-lead { margin-bottom: 12px; }

/* 진행 단계는 폼 머리에 이름과 함께 명확히 둔다. */
#input-screen .input-step-heading { display: grid; gap: 9px; margin: 0 0 12px; }
#input-screen .input-step-heading p { display: flex; align-items: baseline; gap: 8px; margin: 0; }
#input-screen .input-step-heading p span { color: #8b342b; font: 700 11px/1.4 var(--sans); letter-spacing: .06em; }
#input-screen .input-step-heading p b { color: #494034; font: 600 13px/1.4 var(--sans); }
#input-screen .input-step-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; width: 100%; }
#input-screen .input-step-progress > span { width: auto; height: 4px; border-radius: 4px; background: var(--ui-line); }
#input-screen .input-step-progress > span.is-active { background: #7d4b3e; }

/* 선택 그룹은 이름을 드러내고 같은 크기의 컨트롤로 구분한다. */
#input-screen .gender-choice,
#input-screen .calendar-options {
  gap: 6px; padding: 0; border: 0; border-radius: 0; background: transparent;
}
#input-screen .calendar-gender-row .gender-choice legend,
#input-screen .calendar-options::before {
  position: static; width: auto; height: auto; margin: 0 0 8px; overflow: visible;
  clip: auto; clip-path: none; white-space: normal;
  color: var(--ui-muted); font: 600 12px/1.5 var(--sans);
}
#input-screen .calendar-gender-row .gender-choice > label,
#input-screen .calendar-options .calendar-choice > label,
#input-screen .calendar-options .leap-month-choice > label {
  height: 46px; min-height: 46px; border: 1px solid var(--ui-line);
  border-radius: var(--ui-control-radius); color: var(--ui-muted);
  background: var(--ui-surface); box-shadow: none;
}
#input-screen .gender-choice > label:has(input:checked),
#input-screen .calendar-choice > label:has(input:checked),
#input-screen .leap-month-choice > label:has(input:checked) {
  border-color: var(--ui-action); color: var(--ui-surface); background: var(--ui-action);
  box-shadow: none; transform: none;
}

/* 숫자는 고딕과 고정 폭 숫자로 읽기 쉽게, 경계는 다른 입력칸과 통일한다. */
#input-screen .date-input-row { gap: 6px; padding: 0; height: 52px; }
#input-screen input.date-part[type="text"],
#input-screen input.time-part[type="text"] {
  height: 52px; min-height: 52px; padding: 4px;
  border: 1px solid var(--ui-line); border-radius: var(--ui-control-radius);
  color: var(--ui-ink); background: var(--ui-surface); box-shadow: none;
  font: 500 20px/1.2 var(--sans); font-variant-numeric: lining-nums tabular-nums;
}
#input-screen input.date-part[type="text"]:focus,
#input-screen input.time-part[type="text"]:focus {
  border-color: var(--ui-action); background: var(--ui-surface);
  outline: none; box-shadow: 0 0 0 3px #B8365A14;
}
#input-screen .date-input-row > span { align-self: center; padding: 0; color: var(--ui-muted); font: 500 12px/1 var(--sans); }

/* 2·3단계도 같은 사주단자 서식으로 이어진다. */
#input-screen [data-input-step="2"],
#input-screen [data-input-step="2"] { gap: 22px; }
#input-screen [data-input-step="2"] > label,
#input-screen [data-input-step="2"] .form-row > label,
#input-screen [data-input-step="2"] > label { gap: 9px; }
#input-screen [data-input-step="2"] .field-heading,
#input-screen [data-input-step="2"] .field-heading {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 8px;
}
#input-screen [data-input-step="2"] .field-heading > span,
#input-screen [data-input-step="2"] .field-heading > span {
  color: #3d3429; font: 600 14px/1.5 var(--sans); letter-spacing: -.02em;
}
#input-screen [data-input-step="2"] .field-help,
#input-screen [data-input-step="2"] .field-help { color: var(--ui-muted); font-size: 12px; line-height: 1.6; }

#input-screen [data-input-step="2"] select,
#input-screen [data-input-step="2"] input[type="text"],
#input-screen [data-input-step="2"] textarea {
  min-height: 52px; padding: 13px 12px 10px;
  border: 1px solid var(--ui-line); border-radius: var(--ui-control-radius);
  color: var(--ui-ink); background-color: var(--ui-surface); box-shadow: none;
  font: 400 16px/1.5 var(--sans);
}
#input-screen [data-input-step="2"] select {
  height: 54px; min-height: 54px; padding: 0 42px 0 15px;
  border: 1px solid var(--ui-line); border-radius: var(--ui-control-radius);
  color: #2c2623; background-color: rgba(255,253,248,.76);
  background-image: linear-gradient(45deg, transparent 50%, #807565 50%), linear-gradient(135deg, #807565 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  box-shadow: 0 1px 0 rgba(69,54,37,.04); color-scheme: light;
  font: 400 16px/1.5 var(--sans);
}
#input-screen [data-input-step="2"] select option { color: #2c2623; background: #fffdf8; }
#input-screen [data-input-step="2"] textarea { min-height: 112px; resize: vertical; line-height: 1.75; }
#input-screen #user-concern { min-height: 160px; }
#input-screen [data-input-step="2"] select:focus,
#input-screen [data-input-step="2"] input[type="text"]:focus,
#input-screen [data-input-step="2"] textarea:focus {
  border-color: var(--ui-action); background-color: var(--ui-surface);
  outline: none; box-shadow: 0 0 0 3px #B8365A14;
}
#input-screen [data-input-step="2"] select:focus {
  border-color: #9c8970; background-color: #fffdf8;
  box-shadow: 0 0 0 3px rgba(125,75,62,.09);
}
#input-screen [data-input-step="2"] select:disabled { color: #a39a8c; background-color: rgba(239,233,222,.72); }

/* 동의문도 푸른 시스템 알림 대신 한지 쪽지처럼 보이게 한다. */
#input-screen [data-input-step="2"] .transfer-consent {
  align-items: flex-start; margin-top: 2px; padding: 14px 13px;
  border: 1px solid #d8cbb7; border-radius: 8px; background: rgba(244,237,225,.76);
}
#input-screen [data-input-step="2"] .transfer-consent-label {
  align-items: flex-start; white-space: normal; color: #5f5445; font: 500 12px/1.65 var(--sans);
}
#input-screen [data-input-step="2"] .transfer-consent-label input { margin-top: 1px; accent-color: #7d4b3e; }
#input-screen [data-input-step="2"] #transfer-details-open { color: #7d4b3e; }
#input-screen [data-input-step="2"] .dev-shortcut { border-color: #d8cbb7; color: #847967; }

/* 하단 행동은 화면 폭을 안정적으로 채우고, 이전은 보조 동작으로 둔다. */
#input-screen .input-step-nav {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr); gap: 10px;
  padding-top: 10px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(247,240,228,0), rgba(247,240,228,.96) 24%);
}
#input-screen .input-step-nav #input-prev {
  justify-self: stretch; width: 100%; min-width: 0; min-height: 54px;
  border: 1px solid #d3c8b8; border-radius: 10px; color: #716758; background: rgba(255,253,248,.76);
}
#input-screen .input-step-nav #input-prev:disabled { display: none; }
#input-screen .input-step-nav:has(#input-prev:disabled) { grid-template-columns: minmax(0, 1fr); }
#input-screen .input-step-nav #input-next {
  justify-self: stretch; width: 100%; min-width: 0; min-height: 54px;
  border: 1px solid #B8365A; border-radius: 11px; background: #B8365A; color: #fff9ef;
  font: 600 16px/1.5 var(--sans); box-shadow: none;
}
#input-screen .input-step-nav #input-next:hover { border-color: #9E2C4D; background: #9E2C4D; }

#input-screen .input-step { gap: 20px; }
#input-screen .input-step-heading { padding-bottom: 8px; }
#input-screen .calendar-gender-row { gap: 12px; }
#input-screen .calendar-options { row-gap: 0; }
#input-screen .time-input-row { height: 52px; }
#input-screen .input-step-nav :is(button):focus-visible,
#input-screen .time-knowledge button:focus-visible,
#input-screen .concern-chips button:focus-visible {
  outline: 2px solid var(--ui-action); outline-offset: 3px;
}
#input-screen .form-error:not(:empty) {
  padding: 12px 14px; border: 1px solid var(--accent);
  border-radius: 8px; background: var(--accent-soft); line-height: 1.6;
}

/* 모든 입력 단계가 고정 내비게이션 뒤에서 잘리지 않고 끝까지 움직인다. */
body:has(#input-screen.active) { overflow-y: auto; }
#input-screen.active { overflow: visible; }
#input-screen .form-card { padding-bottom: calc(28px + 76px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 420px) {
  #input-screen [data-input-step="2"] .field-heading,
  #input-screen [data-input-step="2"] .field-heading { grid-template-columns: 1fr; gap: 2px; }
  #input-screen [data-input-step="2"] .transfer-consent { display: grid; }
  #input-screen [data-input-step="2"] #transfer-details-open { justify-self: start; }
}
.transfer-dialog { box-sizing: border-box; width: min(calc(100% - 32px), calc(var(--app-max-width) - 32px)); max-height: 85dvh; padding: 24px; border: 1px solid var(--ui-line); border-radius: 20px; background: var(--ui-surface); color: var(--ui-ink); overflow-y: auto; box-shadow: 0 20px 70px #302b2630; font: 14px/1.8 var(--sans); }
.transfer-dialog::backdrop { background: #302b2673; }
.transfer-dialog header { display: flex; align-items: flex-start; gap: 12px; }
.transfer-dialog h2 { flex: 1; margin: 0; font-size: 19px; line-height: 1.5; }
.transfer-dialog header button { flex: 0 0 44px; height: 44px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-soft); color: var(--ui-action); font-size: 24px; cursor: pointer; }
.transfer-dialog dt { margin-top: 20px; color: var(--ui-action); font-weight: 700; }
.transfer-dialog dd { margin: 5px 0 0; overflow-wrap: anywhere; }
.transfer-dialog a { color: var(--ui-action); text-decoration: underline; }

#input-screen .input-step-nav #input-next:disabled { background: var(--ui-soft); border-color: var(--ui-line); color: var(--ui-muted); cursor: not-allowed; box-shadow: none; transform: none; }


/* display 를 지정한 요소는 [hidden] 을 무시한다(작성자 스타일이 UA 스타일을 이긴다).
   이 문서에는 전역 [hidden] 규칙이 없으므로 여기서 못 박는다. */
.figure-section[hidden] { display: none !important; }


/* ─── 인물 카드 ────────────────────────────────────────────────
   히어로 아래, 한지 바탕으로 돌아온 자리. 시주 칸은 비워 둔 채로 보여 준다 —
   기록에 없는 값을 채워 넣지 않는다는 것이 이 서비스의 약속이라 화면에서도 지킨다. */
.figure-section { margin: 46px 0 8px; }
.figure-section .section-kicker { margin: 0; color: var(--muted); font: 600 11px/1.5 var(--sans); letter-spacing: .1em; }
.figure-section h3 { margin: 7px 0 0; color: var(--ink); font: 700 26px/1.35 var(--serif); letter-spacing: -.035em; }
.figure-lead { max-width: 32em; margin: 10px 0 0; color: var(--muted); font: 400 14px/1.75 var(--sans); letter-spacing: -.02em; }

.figure-list { display: grid; gap: 12px; margin-top: 20px; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
.figure-card {
  display: flex; flex-direction: column; gap: 11px;
  padding: 17px 16px 15px; border: 1px solid var(--line); border-radius: 15px; background: var(--card);
}
.figure-head { display: flex; flex-direction: column; gap: 3px; }
.figure-head strong { color: var(--ink); font: 700 17px/1.3 var(--serif); letter-spacing: -.03em; }
.figure-head small { color: var(--muted); font: 400 11px/1.5 var(--sans); letter-spacing: -.01em; }

.figure-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.figure-pillar {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 9px 2px 7px; border-radius: 9px; background: var(--accent-soft);
}
.figure-pillar b { color: var(--accent); font: 700 17px/1 var(--serif); letter-spacing: .02em; }
.figure-pillar small { color: color-mix(in srgb, var(--muted) 88%, transparent); font: 500 9px/1.4 var(--sans); letter-spacing: .02em; }
/* 시주. 기록이 없으므로 물음표 하나로 비워 둔다. */
.figure-pillar.is-empty { background: transparent; border: 1px dashed var(--line); }
.figure-pillar.is-empty b { color: color-mix(in srgb, var(--muted) 52%, transparent); font-weight: 400; }

.figure-hook { margin: 0; color: color-mix(in srgb, var(--ink) 78%, transparent); font: 400 13px/1.7 var(--sans); letter-spacing: -.02em; }
.figure-note { margin: 0; padding-top: 9px; border-top: 1px solid color-mix(in srgb, var(--line) 62%, transparent); color: color-mix(in srgb, var(--muted) 82%, transparent); font: 400 10px/1.55 var(--sans); letter-spacing: -.01em; }

@media (max-width: 400px) {
  .figure-section h3 { font-size: 22px; }
  .figure-list { grid-template-columns: 1fr; }
}
@media (min-width: 721px) {
  /* 두 섹션은 순서가 바뀌어도 같은 간격으로 떨어져야 한다.
     한쪽에만 걸어 두면 위아래를 맞바꿀 때 첫 섹션만 좁게 붙는다. */
  .review-section,
  .figure-section { margin-top: 56px; }
}


/* ─── 이벤트 팝업 ──────────────────────────────────────────────
   아래에서 올라온다. 들어오자마자 덮지 않고 1.6초 뒤에 오른다.
   그림이 카드를 이끌고 글은 아래 띠로 받친다. 닫는 길은 바닥에 두 개 —
   「닫기」는 이번만이고, 영구히 끄는 것은 「다시 보지 않기」뿐이다. */
.event-pop[hidden] { display: none !important; }
.event-pop {
  position: fixed; left: 50%; z-index: 75;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  width: min(calc(100% - 24px), 420px);
  /* 화면을 다 먹지 않는다. 아래쪽 절반쯤만 쓰고 나머지는 페이지가 보이게 둔다.
     전에는 1:1 포스터 때문에 카드가 뷰포트를 뚫고 올라갔다. */
  max-height: 62dvh;
  display: flex;
  transform: translate(-50%, calc(100% + 32px));
  opacity: 0;
  transition: transform .34s cubic-bezier(.2,.8,.3,1), opacity .26s ease;
}
.event-pop.is-up { transform: translate(-50%, 0); opacity: 1; }
/* 랜딩에는 하단 상시 바가 있다. 팝업이 그 위에 앉도록 바 높이만큼 올린다. */
body:has(#home-screen.active) .event-pop { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: reduce) { .event-pop { transition: opacity .2s ease } }

.event-pop-inner {
  display: flex; flex-direction: column; min-height: 0; width: 100%;
  overflow: hidden; border-radius: 20px; background: var(--card);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  box-shadow: 0 16px 48px #302b2626;
}

/* 가로로 자른 배너. 비율을 박아 두면 그림이 뜨기 전에도 카드가 안 흔들리고,
   자리가 모자라면 그림부터 줄여 글과 닫기 바를 끝까지 지킨다. */
.event-pop-art { display: block; position: relative; flex: 0 1 auto; min-height: 0; aspect-ratio: 900 / 468; background: var(--accent-soft); }
.event-pop-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.event-pop-body { padding: 20px; overflow-y: auto; }
.event-pop-lead { margin: 0; }
.event-pop-lead strong { color: var(--ink); font: 700 16px/1.45 var(--sans); letter-spacing: -.035em; }

.event-pop-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 9px 0 0; }
.event-pop-price del { color: color-mix(in srgb, var(--muted) 86%, transparent); font: 400 13px/1.4 var(--sans); }
.event-pop-price b { color: var(--accent); font: 700 24px/1.2 var(--sans); letter-spacing: -.045em; }
.event-pop-left {
  margin-left: auto; padding: 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
  font: 700 11px/1.5 var(--sans); white-space: nowrap;
}

.event-pop-cta {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 16px; min-height: 48px; padding: 14px; border-radius: var(--ui-control-radius);
  background: var(--ui-action); color: #fdf8f1; text-decoration: none;
  font: 700 15px/1.4 var(--sans); letter-spacing: -.025em;
  transition: background .15s ease;
}
.event-pop-cta:hover { background: color-mix(in srgb, var(--ink) 84%, var(--accent)); }
.event-pop-cta span { transition: transform .15s ease; }
.event-pop-cta:hover span { transform: translateX(3px); }

/* 닫는 줄. 본문과 실선으로 끊어 둔다 — 광고와 그만 보는 선택을 섞지 않는다. */
.event-pop-bar {
  flex-shrink: 0; min-height: 48px; display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.event-pop-bar button {
  padding: 14px 10px; border: 0; background: transparent; cursor: pointer;
  font: 500 13px/1.4 var(--sans); letter-spacing: -.02em;
}
.event-pop-bar button:hover { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.event-pop-never { color: var(--muted); }
.event-pop-close { color: var(--ink); font-weight: 700 !important; border-left: 1px solid color-mix(in srgb, var(--line) 72%, transparent) !important; }

/* ─── 상품 ─────────────────────────────────────────────────── */
.product-section { margin: 20px 0 8px; }
.product-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.product-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; text-align: center; }
.product-link { display: flex; flex-direction: column; gap: inherit; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.product-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 14px; }
.product-link:hover img { filter: brightness(1.03); }
.product-card img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: var(--accent-soft); }
.product-card strong { margin-top: 4px; color: var(--ink); font: 700 16px/1.3 var(--serif); letter-spacing: -.03em; }
.product-card p { margin: 0; color: var(--muted); font: 400 12px/1.55 var(--sans); letter-spacing: -.02em; word-break: keep-all; }
/* 모바일에서는 세 칸이 좁아 설명이 여러 줄로 늘어진다. 설명을 두 줄로 묶어 카드가 늘어지지 않게 한다. */
@media (max-width: 720px) {
  .product-card { gap: 4px; }
  .product-card img { border-radius: 12px; }
  .product-card strong { margin-top: 2px; }
  .product-card p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.45; }
}
@media (max-width: 400px) {
  .product-list { gap: 7px; }
  .product-card strong { font-size: 14px; }
  .product-card p { font-size: 11px; }
}

/* ─── 후기 ─────────────────────────────────────────────────── */
.review-section[hidden] { display: none !important; }
.review-section { margin: 46px 0 8px; }
.review-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.review-section .section-kicker { margin: 0; color: var(--muted); font: 600 11px/1.5 var(--sans); letter-spacing: .1em; }
.review-section h3 { margin: 7px 0 0; color: var(--ink); font: 700 26px/1.35 var(--serif); letter-spacing: -.035em; }
.review-summary { display: flex; align-items: baseline; gap: 7px; margin: 0; }
.review-summary b { color: var(--accent); font: 700 22px/1.2 var(--sans); letter-spacing: -.04em; }
.review-summary small { color: var(--muted); font: 400 11px/1.5 var(--sans); }
.review-stars { color: #c9a227; font-size: 12px; letter-spacing: .06em; }

.review-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: var(--card); }
.review-head { display: flex; align-items: center; justify-content: space-between; }
.review-head time { color: var(--ui-muted); font: 500 11px/1.5 var(--sans); font-variant-numeric: tabular-nums; }
.review-body { margin: 0; color: color-mix(in srgb, var(--ink) 82%, transparent); font: 400 14px/1.75 var(--sans); letter-spacing: -.02em; }
.review-foot { display: flex; align-items: center; gap: 6px; color: var(--muted); font: 500 11px/1.5 var(--sans); }

/* ─── 월화엔진 신뢰 카드 ───────────────────────────────────── */
.engine-proof {
  margin: 48px 0 14px; overflow: hidden;
  border: 1px solid var(--ui-line); border-radius: 20px;
  background: #f8f2e8; color: #29231d;
  box-shadow: var(--ui-shadow);
}
.engine-proof-visual { position: relative; min-height: 340px; overflow: hidden; isolation: isolate; }
.engine-proof-visual::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(248,242,232,.98) 0%, rgba(248,242,232,.91) 37%, rgba(248,242,232,.12) 70%);
}
.engine-proof-visual > img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.engine-proof-intro { position: relative; width: min(54%, 380px); padding: 46px 0 42px 42px; }
.engine-proof-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; color: #B8365A; font: 700 12px/1 var(--sans); letter-spacing: .12em; }
.engine-proof-kicker span { padding: 7px 9px 6px; border: 1px solid currentColor; border-radius: 3px; }
.engine-proof-intro h3 { margin: 0; color: #211b16; font: 700 36px/1.22 var(--serif); letter-spacing: -.055em; word-break: keep-all; }
.engine-proof-intro > p:last-child { margin: 18px 0 0; color: #685b4d; font: 500 14px/1.75 var(--sans); letter-spacing: -.02em; word-break: keep-all; }
.engine-proof-seal {
  position: absolute; right: 24px; top: 24px; display: grid; place-items: center;
  width: 68px; height: 68px; border: 1px solid rgba(125,39,31,.48); border-radius: 50%;
  background: rgba(250,244,234,.82); color: #B8365A; box-shadow: inset 0 0 0 4px rgba(125,39,31,.06);
}
.engine-proof-seal b { font: 700 17px/1 var(--serif); letter-spacing: .08em; }
.engine-proof-seal span { margin-top: -12px; font: 700 7px/1 var(--sans); letter-spacing: .09em; }

.engine-proof-body { padding: 0 32px 32px; }
.engine-proof-stats {
  position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr);
  margin: -18px 0 30px; border: 1px solid rgba(124,99,64,.24); border-radius: 15px;
  background: rgba(255,253,248,.94); box-shadow: 0 9px 24px rgba(62,45,27,.1);
}
.engine-proof-stats p { display: grid; gap: 5px; margin: 0; padding: 18px 12px; text-align: center; }
.engine-proof-stats p + p { border-left: 1px solid rgba(124,99,64,.18); }
.engine-proof-stats strong { color: #B8365A; font: 750 21px/1.1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.engine-proof-stats span { color: #50473e; font: 700 11px/1.3 var(--sans); letter-spacing: -.02em; }

.engine-proof-list { margin: 0; padding: 0; list-style: none; }
.engine-proof-list li { display: grid; grid-template-columns: 34px 1fr; gap: 13px; padding: 20px 0; border-top: 1px solid rgba(116,92,61,.2); }
.engine-proof-list li:first-child { border-top: 0; padding-top: 0; }
.engine-proof-index { color: #a98a58; font: 700 11px/1.55 var(--sans); letter-spacing: .08em; }
.engine-proof-list strong { display: block; color: #2b241d; font: 700 17px/1.45 var(--serif); letter-spacing: -.025em; }
.engine-proof-list p { margin: 6px 0 0; color: #6c5e50; font: 400 13px/1.72 var(--sans); letter-spacing: -.018em; word-break: keep-all; }
.engine-proof-list p b { color: #3b2c20; font-weight: 750; }

.engine-proof-specs { margin-top: 14px; padding: 20px; border-radius: 15px; background: #27231f; }
.engine-proof-specs > p { margin: 0 0 13px; color: #d5b77d; font: 700 12px/1.4 var(--sans); letter-spacing: .08em; }
.engine-proof-specs ul { display: flex; flex-wrap: wrap; gap: 9px 8px; margin: 0; padding: 0; list-style: none; }
.engine-proof-specs li { padding: 7px 10px; border: 1px solid rgba(230,215,187,.2); border-radius: 999px; color: #eee5d7; background: rgba(255,255,255,.04); font: 500 11px/1.2 var(--sans); white-space: nowrap; }
.engine-proof-specs .engine-spec-key { border-color: rgba(222,186,116,.72); color: #f3d99f; background: rgba(213,183,125,.1); font-weight: 700; }

/* 긴 소개를 읽는 흐름이 끊기지 않도록 카드 사이에서 바로 사주 입력으로 잇는다. */
.promo-cta { display: flex; justify-content: center; margin: 22px 0; padding: 0 14px; }
.promo-cta-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: min(100%, 360px); min-height: 54px; padding: 14px 24px;
  border: 1px solid var(--ui-action); border-radius: var(--ui-control-radius);
  color: var(--ui-surface); background: var(--ui-action);
  box-shadow: none;
  font: 600 15px/1.5 var(--sans); letter-spacing: -.025em;
  text-decoration: none; cursor: pointer; transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.promo-cta-button span { font: 500 18px/1 var(--sans); transition: transform .18s ease; }
.promo-cta-button:hover { background: var(--ui-action-hover); box-shadow: var(--ui-shadow); transform: translateY(-1px); }
.promo-cta-button:hover span { transform: translateX(3px); }
.promo-cta-button:focus-visible { outline: 3px solid rgba(166,123,70,.35); outline-offset: 3px; }
.promo-cta-button:active { transform: translateY(0); }

@media (max-width: 520px) {
  .engine-proof { margin-top: 40px; border-radius: 18px; }
  .engine-proof-visual { min-height: 470px; }
  .engine-proof-visual::after { background: linear-gradient(180deg, rgba(248,242,232,.97) 0%, rgba(248,242,232,.94) 50%, rgba(248,242,232,.3) 70%, rgba(248,242,232,0) 88%); }
  .engine-proof-visual > img { object-position: 62% center; }
  .engine-proof-intro { width: auto; padding: 34px 28px; }
  .engine-proof-intro h3 { font-size: 32px; }
  .engine-proof-intro > p:last-child { width: 72%; }
  .engine-proof-seal { top: auto; right: 20px; bottom: 18px; width: 62px; height: 62px; }
  .engine-proof-body { padding: 0 20px 22px; }
  .engine-proof-stats { margin-top: -14px; }
  .engine-proof-stats p { padding: 15px 5px; }
  .engine-proof-stats strong { font-size: 18px; }
  .engine-proof-list li { grid-template-columns: 28px 1fr; gap: 9px; padding: 18px 0; }
  .engine-proof-list strong { font-size: 16px; }
  .engine-proof-specs { padding: 17px; }
  .promo-cta { margin: 18px 0; padding: 0 10px; }
  .promo-cta-button { min-height: 52px; font-size: 14px; }
}

/* ─── 월화담이 풀이할 때 지키는 원칙 ───────────────────────── */
.reading-principles { margin: 25px 0 18px; padding: 34px 32px 30px; border-top: 1px solid #cfc3b0; border-bottom: 1px solid #cfc3b0; color: var(--ink); }
.reading-principles-kicker { margin: 0 0 9px; color: #8c3028; font: 700 11px/1.4 var(--sans); letter-spacing: .08em; }
.reading-principles h3 { margin: 0; color: var(--ink); font: 700 28px/1.38 var(--serif); letter-spacing: -.045em; }
.reading-principles-lead { margin: 15px 0 0; color: var(--muted); font: 400 14px/1.7 var(--sans); letter-spacing: -.02em; }
.reading-principles-list { margin: 29px 0 0; padding: 0; list-style: none; counter-reset: principles; }
.reading-principles-list li { position: relative; padding: 21px 0 21px 34px; border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent); counter-increment: principles; }
.reading-principles-list li::before { content: counter(principles); position: absolute; left: 0; top: 23px; color: #a68d68; font: 700 11px/1.5 var(--sans); }
.reading-principles-list strong { display: block; color: var(--ink); font: 700 17px/1.45 var(--serif); letter-spacing: -.025em; }
.reading-principles-list p { margin: 7px 0 0; color: color-mix(in srgb, var(--ink) 72%, transparent); font: 400 14px/1.75 var(--sans); letter-spacing: -.02em; word-break: keep-all; }
.reading-principles-close { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin: 8px 0 0; padding-top: 22px; border-top: 1px solid #a99779; }
.reading-principles-close b { color: #B8365A; font: 700 17px/1.45 var(--serif); }
.reading-principles-close span { color: var(--muted); font: 400 13px/1.5 var(--sans); }

@media (max-width: 520px) {
  .reading-principles { padding: 29px 21px 25px; }
  .reading-principles h3 { font-size: 25px; }
  .reading-principles-list { margin-top: 24px; }
  .reading-principles-list li { padding-left: 27px; }
  .reading-principles-list p { font-size: 13px; }
}

/* ─── 연산 엔진을 만든 과정 ─────────────────────────────────── */
.engine-story {
  position: relative; margin: 24px 0 18px; padding: 40px 38px 36px; overflow: hidden;
  border: 1px solid #d5c8b3; border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,253,247,.96), rgba(241,232,215,.94));
  color: var(--ink); box-shadow: 0 10px 28px rgba(61,45,27,.08);
}
.engine-story::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 16px; width: 1px;
  background: rgba(139,47,37,.28);
}
.engine-story-head { padding-bottom: 25px; border-bottom: 1px solid rgba(119,94,60,.22); }
.engine-story-head > p { margin: 0 0 10px; color: #8b342b; font: 650 12px/1.5 var(--sans); letter-spacing: -.01em; }
.engine-story-head h3 { margin: 0; color: #292119; font: 700 30px/1.35 var(--serif); letter-spacing: -.05em; }
.engine-story-intro { display: grid; gap: 8px; margin: 25px 0 0; }
.engine-story-intro p { margin: 0; color: #5f5549; font: 400 14px/1.78 var(--sans); letter-spacing: -.02em; word-break: keep-all; }
.engine-story-intro p:first-child { color: #342d26; font-weight: 650; }
.engine-story-intro p:last-child { margin-top: 3px; color: #B8365A; font-weight: 650; }

.engine-story-list { margin: 30px 0 0; padding: 0; list-style: none; }
.engine-story-list li { position: relative; padding: 22px 0 22px 28px; border-top: 1px solid rgba(119,94,60,.19); }
.engine-story-list li::before { content: ""; position: absolute; top: 29px; left: 3px; width: 8px; height: 8px; border: 1px solid #9b7350; transform: rotate(45deg); }
.engine-story-list strong { color: #352c23; font: 700 17px/1.5 var(--serif); letter-spacing: -.025em; }
.engine-story-list p { margin: 8px 0 0; color: #6a5d50; font: 400 13px/1.78 var(--sans); letter-spacing: -.015em; word-break: keep-all; }
.engine-story-quote { margin: 17px 0 0; padding: 23px 0 0 20px; border: 0; border-top: 1px solid #a88d67; color: #5c4534; }
.engine-story-quote p { margin: 0; font: 500 14px/1.82 var(--serif); letter-spacing: -.015em; word-break: keep-all; }

@media (max-width: 520px) {
  .engine-story { padding: 33px 24px 29px 29px; border-radius: 16px; }
  .engine-story::before { left: 12px; }
  .engine-story-head h3 { font-size: 26px; }
  .engine-story-intro p { font-size: 13px; }
  .engine-story-list { margin-top: 25px; }
  .engine-story-list li { padding-left: 23px; }
  .engine-story-list strong { font-size: 16px; }
  .engine-story-quote { padding-left: 14px; }
  .engine-story-quote p { font-size: 13px; }
}

/* ─── 풀이 이후 실시간 문답 ──────────────────────────────── */
.chat-care { margin: 24px 0 18px; overflow: hidden; border: 1px solid #d7cabb; border-radius: 18px; background: #fffaf1; color: var(--ink); box-shadow: 0 10px 28px rgba(61,45,27,.08); }
.chat-care-opening { position: relative; min-height: 230px; overflow: hidden; background: #eee2d1; }
.chat-care-opening::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(32,26,21,.04) 30%, rgba(32,26,21,.42)); pointer-events: none; }
.chat-care-opening img { display: block; width: 100%; height: 230px; object-fit: cover; object-position: 54% 45%; }
.chat-care-opening p {
  position: absolute; z-index: 1; right: 22px; bottom: 22px; max-width: 210px;
  margin: 0; padding: 13px 16px; border-radius: 16px 16px 3px 16px;
  background: rgba(255,252,246,.94); color: #44372d;
  font: 600 13px/1.65 var(--sans); letter-spacing: -.025em; box-shadow: 0 5px 18px rgba(26,20,16,.16);
}
.chat-care-body { padding: 30px 32px 34px; }
.chat-care-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.chat-care-tags span { padding: 6px 10px; border: 1px solid #ceb89b; border-radius: 999px; color: #76563f; background: #f8efe1; font: 650 10px/1.2 var(--sans); }
.chat-care h3 { margin: 0; color: #2e251e; font: 700 28px/1.4 var(--serif); letter-spacing: -.045em; }
.chat-care-intro { display: grid; gap: 8px; margin-top: 18px; }
.chat-care-intro p { margin: 0; color: #6b5d50; font: 400 14px/1.78 var(--sans); letter-spacing: -.02em; word-break: keep-all; }
.chat-care-intro p:last-child { color: #B8365A; font-weight: 650; }
.chat-care-list { display: grid; gap: 0; margin: 28px 0 0; padding: 0; list-style: none; }
.chat-care-list li { padding: 22px 0; border-top: 1px solid rgba(117,91,60,.2); }
.chat-care-list strong { display: block; color: #392f27; font: 700 17px/1.5 var(--serif); letter-spacing: -.025em; }
.chat-care-list p { margin: 8px 0 0; color: #6c5f53; font: 400 13px/1.78 var(--sans); letter-spacing: -.015em; word-break: keep-all; }
.chat-care-quote { margin: 10px 0 0; padding: 22px 20px; border: 0; border-radius: 12px; background: #f1e7d8; color: #624b39; }
.chat-care-quote p { margin: 0; font: 500 14px/1.8 var(--serif); letter-spacing: -.02em; word-break: keep-all; }

@media (max-width: 520px) {
  .chat-care { border-radius: 16px; }
  .chat-care-opening, .chat-care-opening img { min-height: 210px; height: 210px; }
  .chat-care-opening img { object-position: 52% 45%; }
  .chat-care-opening p { right: 16px; bottom: 16px; max-width: 190px; font-size: 12px; }
  .chat-care-body { padding: 26px 22px 27px; }
  .chat-care h3 { font-size: 25px; }
  .chat-care-intro p { font-size: 13px; }
  .chat-care-list strong { font-size: 16px; }
  .chat-care-quote { padding: 18px 16px; }
  .chat-care-quote p { font-size: 13px; }
}

/* ─── 인물 초상 ────────────────────────────────────────────────
   public/images/figures/<id>.webp 가 있으면 그림이, 없으면 메달리온이 남는다. */
.figure-card { flex-direction: row; gap: 13px; align-items: flex-start; }
.figure-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; }
.figure-portrait {
  flex: 0 0 62px; width: 62px; height: 62px; margin: 0;
  display: grid; place-items: center; overflow: hidden;
  border-radius: 14px; background: var(--accent-soft);
}
/* 메달리온과 그림을 같은 칸에 겹쳐 둔다. 따로 두면 그리드가 두 줄로 벌어진다.
   그림이 없으면 img 가 스스로 빠지고 메달리온만 남는다. */
.figure-portrait > * { grid-area: 1 / 1; }
.figure-portrait img { width: 100%; height: 100%; object-fit: cover; }
.figure-medallion { color: color-mix(in srgb, var(--accent) 62%, transparent); font: 700 26px/1 var(--serif); }

/* 후기는 가로로 흘린다. 세로로 쌓으면 몇 장 없는 게 그대로 드러나고,
   가로로 두면 더 있다는 신호가 되면서 첫 화면 세로 길이도 먹지 않는다. */
/* 저절로 흐르는 띠. 같은 묶음을 두 번 이어 붙이고 정확히 절반만큼 밀어
   끊기는 지점이 안 보이게 한다. 손을 얹으면 멈춘다 — 읽으려는 사람을 흘려보내지 않는다. */
.review-list {
  margin-top: 20px; padding: 4px 0 14px;
  overflow: hidden;
  /* 양끝을 흐려서 잘린 카드가 잘린 것처럼 안 보이게 한다. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.review-track {
  display: flex; gap: 12px; width: max-content;
  animation: review-marquee 54s linear infinite;
}
.review-list:hover .review-track,
.review-list:focus-within .review-track { animation-play-state: paused; }
@keyframes review-marquee { from { transform: translateX(0) } to { transform: translateX(calc(-50% - 6px)) } }

.review-card {
  flex: 0 0 min(284px, 78vw);
  box-shadow: 0 2px 10px rgba(28,24,20,.05);
}

/* 움직임을 줄여 달라고 한 사람에게는 흐르지 않고 손으로 넘기는 띠로 준다. */
@media (prefers-reduced-motion: reduce) {
  .review-track { animation: none; }
  .review-list { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  .review-list::-webkit-scrollbar { display: none; }
}

/* ─── 오늘 띠 ──────────────────────────────────────────────────
   배너 위, 헤더에 딱 붙는 가로 줄. 네모 상자로 두면 카드가 하나 더 생겨 그림을 밀어낸다.
   윗줄은 오늘을 짚는 값, 아랫줄은 그래서 어떤 날인지 한 문장.
   --today-accent 는 그날 천간의 오행 색이고 home-live.js 가 심는다. */
.today-panel[hidden] { display: none !important; }
.today-panel {
  /* shell 은 모바일에서 좌우 여백만큼 좁다. 헤더와 같은 앱 프레임 폭으로
     가운데 확장하고, 글자 시작선은 둘 다 app-gutter로 맞춘다. */
  width: min(100vw, var(--app-max-width));
  margin: -20px 0 0 50%;
  transform: translateX(-50%);
  padding: 10px var(--app-gutter) 11px;
  border: 0; border-radius: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background: color-mix(in srgb, var(--today-accent, var(--accent)) 8%, var(--card));
}

.today-meta { margin: 0; color: var(--muted); font: 500 11px/1.6 var(--sans); letter-spacing: -.01em; }
.today-say { margin: 3px 0 0; color: var(--ink); font: 600 13px/1.6 var(--sans); letter-spacing: -.03em; }

@media (max-width: 400px) {
  .today-meta { font-size: 10px; }
  .today-say { font-size: 12px; }
}

/* ─── 인물 상세 ────────────────────────────────────────────────
   카드는 고르는 자리, 여기는 읽는 자리. 값은 전부 엔진이 계산한 것이다. */
.figure-card { cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.figure-card[aria-selected="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 46%, var(--card)); }
.figure-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.figure-detail:empty { display: none; }
.figure-detail {
  margin-top: 14px; padding: 20px 18px;
  border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 34%, var(--card)), var(--card));
}
.fd-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 4px; }
.fd-head strong { color: var(--ink); font: 700 19px/1.3 var(--serif); letter-spacing: -.035em; }
.fd-head small { color: var(--muted); font: 400 12px/1.5 var(--sans); }
.fd-lead { margin: 0 0 16px; color: color-mix(in srgb, var(--ink) 76%, transparent); font: 400 13px/1.7 var(--sans); letter-spacing: -.02em; }

.fd-block { margin-top: 16px; }
.fd-label { margin: 0 0 7px; color: var(--muted); font: 600 10px/1.5 var(--sans); letter-spacing: .1em; }

/* 오행 분포 — 막대 하나로 비율을 보여 준다. 숫자만 적으면 안 읽힌다. */
.fd-elements { display: grid; gap: 6px; margin: 0; }
.fd-el { display: grid; grid-template-columns: 22px minmax(0, 1fr) 20px; align-items: center; gap: 8px; }
.fd-el-name { color: var(--ink); font: 600 12px/1.5 var(--sans); }
.fd-el-bar { height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--line) 58%, transparent); overflow: hidden; }
.fd-el-bar i { display: block; height: 100%; border-radius: 4px; background: var(--fd-el-color, var(--accent)); }
.fd-el-count { color: var(--muted); font: 600 11px/1.5 var(--sans); font-variant-numeric: tabular-nums; text-align: right; }
.fd-el[data-el="목"] { --fd-el-color: var(--wood); }
.fd-el[data-el="화"] { --fd-el-color: var(--fire); }
.fd-el[data-el="토"] { --fd-el-color: var(--earth); }
.fd-el[data-el="금"] { --fd-el-color: var(--metal); }
.fd-el[data-el="수"] { --fd-el-color: var(--water); }

.fd-reasons { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fd-reasons li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 9px; }
.fd-flag { padding: 3px 7px; border-radius: 5px; font: 700 10px/1.5 var(--sans); white-space: nowrap; }
.fd-flag[data-on="true"] { background: var(--accent-soft); color: var(--accent); }
.fd-flag[data-on="false"] { background: color-mix(in srgb, var(--line) 46%, transparent); color: var(--muted); }
.fd-reasons p { margin: 0; color: color-mix(in srgb, var(--ink) 76%, transparent); font: 400 13px/1.65 var(--sans); letter-spacing: -.02em; }

.fd-pairs { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
.fd-pair { display: flex; align-items: baseline; gap: 5px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); }
.fd-pair small { color: var(--muted); font: 500 10px/1.5 var(--sans); }
.fd-pair b { color: var(--ink); font: 600 12px/1.5 var(--sans); }
.fd-foot { margin: 16px 0 0; padding-top: 11px; border-top: 1px solid color-mix(in srgb, var(--line) 62%, transparent); color: color-mix(in srgb, var(--muted) 86%, transparent); font: 400 10px/1.6 var(--sans); }

@media (max-width: 400px) {
  .review-section h3 { font-size: 22px; }
  .figure-portrait { flex-basis: 52px; width: 52px; height: 52px; }
  .figure-list { grid-template-columns: 1fr; }
  .figure-detail { padding: 17px 15px; }
}

/* 보관함 — 계정에 담긴 명식 목록. 오늘의 운세 화면과 같은 머리를 쓴다. */
.archive-screen { max-width: 720px; margin: 0 auto; color: var(--report-ink); }
.archive-body { margin-top: 18px; }
.archive-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.archive-card { padding: 16px 16px 12px; border: 1px solid #e6dccb; border-radius: 14px; background: #fffdf8; }
.archive-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.archive-card-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.archive-card-title strong { overflow: hidden; font: 700 18px/1.35 var(--serif); letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.archive-label { flex: none; padding: 3px 8px; border: 1px solid #c9a79a; border-radius: 99px; color: #B8365A; font: 700 11.5px/1.2 var(--sans); }
.archive-pillar { flex: none; padding: 5px 9px; border-radius: 8px; color: #fbf3e4; background: #B8365A; font: 700 15px/1 var(--serif); letter-spacing: .04em; }
.archive-birth { margin: 6px 0 12px; color: #7a7062; font: 500 13px/1.5 var(--sans); }
.archive-links { display: flex; flex-wrap: wrap; gap: 6px; }
.archive-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 14px; border: 1px solid #d9ccb5; border-radius: 10px; color: #4a3a2c; background: #faf6ed; font: 700 13px/1.2 var(--sans); text-decoration: none; }
.archive-share { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e0d4bf; }
.archive-share-note { margin: 0; color: #8b7d6c; font: 500 12px/1.5 var(--sans); }
.archive-share-note:empty { display: none; }
.archive-share-list { display: grid; gap: 8px; }
.archive-share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.archive-share-row.is-off .archive-share-url { color: #a09484; text-decoration: line-through; }
.archive-share-url { flex: 1 1 180px; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid #d9ccb5; border-radius: 9px; background: #fff; color: #4a3a2c; font: 500 12px/1 var(--sans); }
.archive-share-meta { flex: 0 0 auto; color: #6b5f52; font: 700 12px/1 var(--sans); }
.archive-link.is-primary { border-color: transparent; color: #fbf4e6; background: #B8365A; }
.archive-tools { display: flex; justify-content: flex-end; gap: 4px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed #ebe2d2; }
.archive-tools button { min-height: 44px; padding: 10px 8px; border: 0; color: #91887b; background: none; font: 600 12px/1.2 var(--sans); cursor: pointer; }
.archive-empty { display: grid; justify-items: center; gap: 6px; padding: 36px 16px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface); text-align: center; }
.archive-empty strong { font: 700 18px/1.4 var(--serif); }
.archive-empty p { margin: 0; color: #7a7062; font: 500 13.5px/1.6 var(--sans); word-break: keep-all; }
.archive-kakao { margin-top: 10px; padding: 12px 20px; border: 0; border-radius: 10px; color: #191600; background: #fee500; font: 700 14px/1 var(--sans); text-decoration: none; cursor: pointer; }
.archive-account { display: flex; justify-content: center; gap: 18px; margin: 28px 0 8px; }
.archive-account button { min-height: 44px; padding: 10px 4px; border: 0; color: #a39a8d; background: none; font: 500 12.5px/1.2 var(--sans); text-decoration: underline; cursor: pointer; }

/* 정보 입력 첫 그림: 좌우 끝까지 꽉 차던 그림을 본문 폭 안에 둔다(모바일에서 그림만 화면 가장자리로 삐져나와 어색했다).
   아래 끝을 한지색 단색으로 덮던 덧칠은 종이 질감과 어긋나 네모로 보여서 빼고, 그림 자체가 바탕으로 스며드는 마스크만 남긴다.
   원본 비율(1200×624)대로 보여 고양이 얼굴이 잘리지 않는다. */
#input-screen .input-hero-art { margin-inline: 0; }
#input-screen .input-hero-art::after { display: none; }
#input-screen .input-hero-art img { height: 112px; max-height: 112px; aspect-ratio: 1200 / 624; object-position: center; border-radius: 16px; }

/* 결과지 아래 복제본은 결과지의 칸과 같은 결로 — 모서리 18px, 그림자 없이, 검은 스펙 상자는 한지 위 가는 선으로 */
#free-promo-flow-report .engine-proof { border-color: #e2d4b9; border-radius: 18px; box-shadow: none; }
#free-promo-flow-report .engine-proof-stats { border-radius: 6px; box-shadow: none; }
#free-promo-flow-report .engine-proof-specs { border-radius: 0; padding: 18px 0 0; border-top: 1px solid rgba(116,92,61,.28); background: transparent; }
#free-promo-flow-report .engine-proof-specs > p { color: #8a6d3e; }
#free-promo-flow-report .engine-proof-specs li { border-color: #e2d6c0; border-radius: 3px; color: #5d5245; background: transparent; }
#free-promo-flow-report .engine-proof-specs .engine-spec-key { border-color: #cdb58a; color: #2b2620; background: #f4ead6; }

#input-screen .occupation-choice #user-occupation { width: 100%; margin-top: 8px; box-sizing: border-box; }
#input-screen .occupation-choice .relationship-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 전체 그림을 그대로 보여 주는 여섯 장의 사주 카드. */
body:has(#home-screen.active) .shell { padding-top: 8px; }
#home-screen .landing-carousel { margin: 0 calc(-1 * var(--app-gutter)); }
#home-screen .landing-deck { position: relative; width: 100%; aspect-ratio: 1 / 1.22; overflow: hidden; touch-action: pan-y; }
#home-screen .landing-main-card { position: absolute; top: 0; left: 4.5%; width: 91%; margin: 0; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #fff; aspect-ratio: 2 / 3; transform: translateX(calc(var(--card-offset, 0) * 94%)) scale(var(--card-scale, 1)); transform-origin: center; transition: transform 450ms ease, opacity 450ms ease; box-shadow: 0 4px 14px rgb(0 0 0 / .04); cursor: pointer; }
#home-screen .landing-main-card img { display: block; width: 100%; height: auto; object-fit: contain; }
#home-screen .landing-main-card:focus-visible, #home-screen .landing-card-grid button:focus-visible { outline: 3px solid #9a7650; outline-offset: -3px; }
#home-screen .landing-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 0 16px; }
#home-screen .landing-card-prev, #home-screen .landing-card-next { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ui-line); border-radius: 50%; background: var(--ui-surface); color: var(--ui-action); font: 24px/1 var(--sans); cursor: pointer; }
#home-screen .landing-card-dots { display: flex; align-items: center; gap: 0; }
#home-screen .landing-card-dots button { position: relative; width: 28px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
#home-screen .landing-card-dots button::after { content: ""; position: absolute; top: 19px; left: 11px; width: 6px; height: 6px; border-radius: 8px; background: var(--ui-line); transition: width .18s ease, left .18s ease; }
#home-screen .landing-card-dots button[aria-pressed="true"]::after { left: 6px; width: 16px; background: var(--ui-action); }
#home-screen .landing-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 10px 0 24px; }
#home-screen .landing-card-grid button { min-width: 0; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #fff; cursor: pointer; }
#home-screen .landing-card-grid img { display: block; width: 100%; height: auto; }
#home-screen .landing-card-grid button[aria-pressed="true"] { box-shadow: 0 0 0 2px #a68b65; }
@media (prefers-reduced-motion: reduce) { #home-screen .landing-main-card { transition: none; } }
#home-screen #today-panel { display: none; }
#home-screen .landing-carousel { margin-top: 20px; }
/* 앞뒤 카드와 작은 카드 모두 같은 틀에서 그림 모서리를 자른다. */
#home-screen .landing-main-card { top: 0; height: 100%; aspect-ratio: auto; border-radius: 14px; transform: translateX(calc(var(--card-offset, 0) * 14px)) scale(var(--card-scale, 1)); }
#home-screen .landing-main-card.is-neighbor { top: 14px; left: 4.5%; width: 91%; height: calc(100% - 28px); }
#home-screen .landing-main-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; border-radius: inherit; }
#home-screen .landing-main-card.is-current { animation: landing-card-enter 320ms ease-out; }
@keyframes landing-card-enter { from { opacity: .7; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
#home-screen .landing-card-grid button { overflow: visible; border-radius: 0; background: transparent; }
#home-screen .landing-grid-art { display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 14px; }
#home-screen .landing-grid-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; border-radius: inherit; }
#home-screen .landing-grid-desc { display: block; margin: 3px 0 0; color: #7a756d; font: 400 11px/1.45 var(--sans); text-align: center; word-break: keep-all; }
#home-screen .landing-grid-name { display: block; margin: 9px 0 0; color: #242424; font: 600 12px/1.4 var(--sans); text-align: center; }
#home-screen .landing-card-grid button[aria-pressed="true"] { box-shadow: none; }
#home-screen .landing-card-grid .landing-grid-art { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { #home-screen .landing-main-card.is-current { animation: none; } }

/* 큰 카드의 오른쪽 위, 청월당처럼 끝이 뾰족한 순위 리본. */
#home-screen .landing-card-rank { position: absolute; top: 0; right: 12px; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; width: 34px; padding: 7px 0 12px; background: #B8365A; color: #fff; clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%); pointer-events: none; font-family: var(--sans); }
#home-screen .landing-card-rank small { font-size: 9px; font-weight: 800; line-height: 1.2; }
#home-screen .landing-card-rank b { font-size: 22px; font-weight: 800; line-height: 1.15; }
#home-screen .landing-grid-art { position: relative; }
#home-screen .landing-card-grid .landing-card-rank { right: 6px; width: 24px; padding: 4px 0 8px; }
#home-screen .landing-card-grid .landing-card-rank small { font-size: 7px; }
#home-screen .landing-card-grid .landing-card-rank b { font-size: 14px; }
#home-screen .landing-main-card { container-type: inline-size; }
#home-screen .landing-card-story { position: absolute; left: var(--sx); top: var(--sy); z-index: 1; display: flex; flex-direction: column; align-items: center; width: max-content; transform: translateX(-50%); color: #2b1d14; text-align: center; text-shadow: 0 0 10px rgb(255 249 238 / .95), 0 0 3px rgb(255 249 238 / .9); pointer-events: none; word-break: keep-all; }
#home-screen .landing-card-story em { color: #B8365A; font: 900 12cqw/1.15 'Noto Serif KR', serif; font-style: normal; letter-spacing: .02em; }
#home-screen .landing-card-story i { display: block; width: 44cqw; height: 1px; margin: 3cqw 0 3cqw; background: #B8365A; opacity: .7; }
#home-screen .landing-card-story small { font: 600 4.2cqw/1.55 var(--sans); letter-spacing: -.02em; }
#home-screen .landing-main-card img, #home-screen .landing-grid-art img { object-position: 50% 50%; }
/* 하단 카드는 손가락으로 밀어 넘기는 가로 띠. 끝 카드가 반쯤 보여 더 있다는 걸 알린다. */
#home-screen .landing-card-grid { display: flex; gap: 12px; margin: 10px calc(-1 * var(--app-gutter)) 24px; padding: 0 var(--app-gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--app-gutter); overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
#home-screen .landing-card-grid::-webkit-scrollbar { display: none; }
#home-screen .landing-card-grid button { flex: 0 0 38%; scroll-snap-align: start; }
@media (min-width: 768px) { #home-screen .landing-card-grid button { flex-basis: 28%; } }
#home-screen .landing-grid-art { container-type: inline-size; }
#home-screen .landing-card-grid button { flex-basis: 46%; }
@media (min-width: 768px) { #home-screen .landing-card-grid button { flex-basis: 30%; } }
#home-screen .landing-card-grid button { position: relative; }
#home-screen .landing-grid-name { font-size: 14px; text-align: left; }
#home-screen .landing-grid-desc { margin-top: 2px; font-size: 12.5px; text-align: left; }
/* 상단 사주 카드는 같은 프레임 안에서 영상과 포스터를 표시한다. */
#home-screen .landing-main-card:has(.landing-card-video){background:#ede2cc var(--landing-poster) center/cover no-repeat}
#home-screen .landing-card-video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .2s ease}
#home-screen .landing-card-video.is-playing{opacity:1}
#home-screen .landing-card-video.has-error{visibility:hidden}

.landing-grid-scroll{position:relative}.landing-grid-arrow{display:none}@media(min-width:768px){.landing-grid-scroll>.landing-grid-arrow{display:grid;place-items:center;position:absolute;top:38%;z-index:5;width:36px;height:36px;padding:0;border:1px solid #e2dacd;border-radius:50%;background:rgba(255,253,248,.96);color:#675642;font:24px/1 serif;box-shadow:0 2px 8px #40301c16;cursor:pointer}.landing-grid-arrow.is-prev{left:-12px}.landing-grid-arrow.is-next{right:-12px}.landing-grid-scroll>.landing-grid-arrow:disabled{opacity:.3;cursor:default}.landing-grid-arrow:focus-visible{outline:2px solid #a58b66;outline-offset:3px}}

.landing-grid-arrow svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* 출생 정보와 고민, 두 단계 입력. */
#input-screen .input-step-progress { grid-template-columns: repeat(2, 1fr); }
#input-screen .time-knowledge { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 4px; border: 1px solid #d8cbb7; border-radius: 12px; background: #f3ede2; }
#input-screen .time-knowledge button { min-height: 44px; border: 0; border-radius: 8px; background: transparent; color: #766956; font: 600 13px/1.4 var(--sans); cursor: pointer; }
#input-screen .time-knowledge button[aria-pressed="true"] { background: #fffdf8; color: #6a3028; box-shadow: 0 2px 6px #40302012; }
#input-screen .input-reassurance { margin: 0; color: #756858; font: 400 13px/1.7 var(--sans); }
#input-screen .concern-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#input-screen .concern-chips button { min-height: 44px; padding: 9px 13px; border: 1px solid #d8cbb7; border-radius: 22px; background: #fffdf8; color: #6a3028; font: 500 12px/1.5 var(--sans); cursor: pointer; }
#input-screen .concern-chips button:hover { background: #f0e5d7; }
#input-screen .input-review { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 12px; margin: 0; padding: 18px; border: 1px solid #dfd3c1; border-radius: 12px; background: #fffdf8; font: 400 13px/1.7 var(--sans); }
#input-screen .input-review dt { color: #8b342b; }
#input-screen .input-review dd { margin: 0; color: #494034; white-space: pre-wrap; overflow-wrap: anywhere; }
#input-screen .input-privacy { margin: 14px 0 0; text-align: center; color: #8b806f; font: 400 11px/1.7 var(--sans); }
/* ─── 입력 화면 주월이 말풍선 ───────────────────────────────────── */
#input-screen .input-juwol-bubble {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto 14px;
  padding: 10px 14px;
  border: 1px solid #e2d2bf;
  border-radius: 16px;
  background: #fbf7ee;
  box-shadow: 0 2px 10px rgba(58, 48, 38, 0.05);
}
#input-screen .input-juwol-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: #ede3d1;
  border: 1px solid #d4c2aa;
}
#input-screen .input-juwol-message {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
#input-screen .input-juwol-name {
  color: #8b342b;
  font: 700 11px/1.3 var(--sans);
  letter-spacing: -.01em;
}
#input-screen .input-juwol-message p {
  margin: 0;
  color: #2d261e;
  font: 500 13px/1.45 var(--sans);
  letter-spacing: -.02em;
}
#input-screen .input-hero-art { overflow: hidden; }
#input-screen .input-hero-art img { object-fit: cover; object-position: 50% 38%; transition: transform .5s ease; }
#input-screen[data-step="2"] .input-hero-art img { transform: scale(1.035); }
#input-screen[data-step="3"] .input-hero-art img { transform: scale(1.065); }
#input-screen[data-step="4"] .input-hero-art img { transform: scale(1.09); }
#input-screen .pillar-preview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 420px; margin: 0 auto 16px; font: 400 12px/1.6 var(--sans); color: #756858; }
#input-screen .pillar-preview-card { display: grid; gap: 3px; padding: 8px; text-align: center; border: 1px solid #dfd3c1; border-radius: 8px; background: #fffdf8; }
#input-screen .pillar-preview-card small { color: #8b806f; }
#input-screen .pillar-preview-card b { color: #6a3028; font: 600 24px/1.5 var(--serif); }
#input-screen .pillar-preview-card.is-filled { animation: input-pillar-reveal .45s ease both; }
#input-screen .pillar-preview-card:nth-child(2) { animation-delay: .06s; }
#input-screen .pillar-preview-card:nth-child(3) { animation-delay: .12s; }
#input-screen .pillar-preview-card:nth-child(4) { animation-delay: .18s; }
@keyframes input-pillar-reveal { from { opacity: 0; transform: rotateY(-75deg); } to { opacity: 1; transform: rotateY(0); } }
@media (prefers-reduced-motion: reduce) { #input-screen .input-hero-art img { transition: none; transform: none !important; } #input-screen .pillar-preview-card.is-filled { animation: none; } }

/* 한지 숫자 입력판: 생일과 시각만 다루고, 입력 화면은 계속 볼 수 있다. */
.birth-keypad { position: fixed; z-index: 120; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; width: min(100%, var(--app-max-width)); height: calc(min(300px, 35dvh) + 16px); box-sizing: border-box; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border: 1px solid #d8c8ad; border-bottom: 0; border-radius: 20px 20px 0 0; background: #faf3e5; box-shadow: 0 -5px 28px #4b302522; }
.birth-keypad[hidden], .birth-keypad [hidden] { display: none; }
.birth-keypad header { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.birth-keypad header strong { color: #6b3028; font: 600 13px/1.4 var(--sans); }
.birth-keypad header span { display: flex; gap: 5px; }
.birth-keypad button { touch-action: manipulation; cursor: pointer; font-family: var(--sans); }
.birth-keypad header button { padding: 3px 5px; border: 0; background: transparent; color: #82715b; font-size: 13px; line-height: 1.4; }
.birth-keypad .keypad-numbers { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 5px; }
.birth-keypad .keypad-numbers button { min-height: 0; padding: 0; border: 1px solid #e3d4bd; border-radius: 8px; color: #503529; background: #fffdf7; font: 500 20px/1 var(--serif); }
.birth-keypad .keypad-numbers button:active { background: #ead9bd; }
.birth-keypad .keypad-numbers [data-pad-action="next"] { border-color: #6a3028; color: #fff8e9; background: #6a3028; font: 600 13px/1 var(--sans); }
.birth-keypad button:focus-visible { outline: 2px solid #8b342b; outline-offset: 2px; }
#input-screen.keypad-open { padding-bottom: calc(min(300px, 35dvh) + 40px); }
#input-screen .keypad-active-field { outline: 2px solid #8b342b; outline-offset: 3px; }
@media (max-width: 600px) { #input-screen.keypad-open .input-hero-art img { height: clamp(76px, 12dvh, 102px); max-height: 102px; } #input-screen.keypad-open .input-hero-art { margin-bottom: 3px; } #input-screen.keypad-open .landing-lead { margin-bottom: 7px; } #input-screen.keypad-open .pillar-preview { margin-bottom: 9px; } }

@media (max-height: 650px) { .birth-keypad { gap: 5px; padding-top: 7px; } .birth-keypad .keypad-numbers { gap: 3px; } .birth-keypad .keypad-numbers button { font-size: 18px; } }

@media (max-width: 600px) {
  #input-screen.keypad-open .input-hero-art img { object-position: 50% 61%; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  #input-screen.keypad-open .input-hero { margin-bottom: 4px; }
  #input-screen.keypad-open .form-card { margin-top: 0; padding-top: 5px; gap: 6px; }
}
@media (max-width: 600px) and (max-height: 650px) {
  #input-screen.keypad-open .input-hero-art img { height: 40px; max-height: 40px; }
  #input-screen.keypad-open .input-hero h2 { margin: 0; font-size: 20px; line-height: 1.25; }
  #input-screen.keypad-open .landing-lead { margin: 2px 0 3px; font-size: 10px; line-height: 1.4; }
  #input-screen.keypad-open .pillar-preview { gap: 6px; margin-bottom: 3px; }
  #input-screen.keypad-open .pillar-preview-card { padding: 3px 6px; gap: 0; }
  #input-screen.keypad-open .pillar-preview-card b { font-size: 20px; line-height: 1.2; }
  #input-screen.keypad-open .pillar-preview-card small { font-size: 9px; }
  #input-screen.keypad-open .input-step-heading { gap: 4px; margin-bottom: 4px; }
  #input-screen.keypad-open .input-step { gap: 4px; }
  #input-screen.keypad-open .form-card { padding-top: 0; gap: 4px; }
  #input-screen.keypad-open .calendar-gender-row .gender-choice > label,
  #input-screen.keypad-open .calendar-options .calendar-choice > label,
  #input-screen.keypad-open .calendar-options .leap-month-choice > label { height: 36px; min-height: 36px; }
  #input-screen.keypad-open input.date-part[type="text"] { height: 40px; min-height: 40px; }
  #input-screen.keypad-open .date-input-row { padding-top: 0; }
}
@media (max-width: 600px) and (max-height: 650px) {
  .birth-keypad { height: max(35dvh, 240px); }
  #input-screen.keypad-open { padding-bottom: calc(max(35dvh, 240px) + 24px); }
  .birth-keypad header button { min-height: 28px; padding: 4px 6px; }
}
@media (max-width: 600px) and (max-height: 650px) {
  .birth-keypad .keypad-numbers button { min-height: 40px; }
}
@media (max-width: 600px) and (max-height: 650px) {
  #input-screen.keypad-open #input-title { margin: 0; font-size: 20px; line-height: 1.25; }
  #input-screen.keypad-open .landing-lead,
  #input-screen.keypad-open .input-step-heading,
  #input-screen.keypad-open [data-input-step="1"] .calendar-gender-row { display: none; }
}
.birth-keypad:not([hidden]) { animation: birth-keypad-enter .18s ease-out; }
@keyframes birth-keypad-enter { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .birth-keypad:not([hidden]) { animation: none; } }
.birth-keypad .keypad-numbers button[data-pad-pressed] { background: #ead9bd; }
.birth-keypad .keypad-numbers [data-pad-action="next"][data-pad-pressed] { background: #50231e; }

/* Love keeps the existing editor and walks through two people in order. */
.compatibility-progress{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 10px;color:#743b4a}.compatibility-progress[hidden]{display:none}.compatibility-progress-label{margin:0;font-size:14px;font-weight:600}.compatibility-edit-first{border:0;background:none;color:#743b4a;text-decoration:underline;text-underline-offset:3px;font:inherit;font-size:12px;cursor:pointer;padding:4px 0}.compatibility-edit-first[hidden]{display:none}

/* Landing widgets share the reading surface, spacing and action vocabulary. */
#home-screen .landing-card-grid button[aria-pressed="true"] .landing-grid-art {
  box-shadow: inset 0 0 0 2px var(--ui-action), 0 0 0 2px var(--ui-action);
}
#home-screen .landing-card-grid button[aria-pressed="true"] .landing-grid-name { color: var(--ui-action); }
#home-screen .landing-grid-desc { color: var(--ui-muted); line-height: 1.65; }
.engine-proof-specs { border: 1px solid var(--ui-line); background: var(--ui-soft); }
.engine-proof-specs > p { color: var(--ui-action); }
.engine-proof-specs li { border-color: var(--ui-line); background: var(--ui-surface); color: var(--ui-muted); line-height: 1.5; white-space: normal; }
.engine-proof-specs .engine-spec-key { border-color: #bfa78b; background: #eee3d3; color: var(--ui-action); }
.review-summary small, .review-foot { color: var(--ui-muted); font-size: 12px; }
@media (prefers-reduced-motion: reduce) {
  .promo-cta-button, .promo-cta-button span, #home-screen .landing-card-dots button::after { transition: none; }
}

.reading-principles { border-color: var(--ui-line); }
.reading-principles-lead, .reading-principles-close span { color: var(--ui-muted); }
.engine-story, .chat-care { border-color: var(--ui-line); background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.chat-care-tags span { border-color: var(--ui-line); background: var(--ui-soft); color: var(--ui-muted); font-size: 12px; line-height: 1.4; }
.chat-care-quote { background: var(--ui-soft); }
@media (max-width: 520px) {
  .reading-principles-list p, .engine-story-intro p, .engine-story-list p,
  .chat-care-intro p, .chat-care-list p { font-size: 14px; line-height: 1.85; }
}

#input-screen [data-input-step="1"] select, #input-screen [data-input-step="1"] #user-name { min-height: 44px; width: 100%; box-sizing: border-box; }
#input-screen .pillar-preview[hidden] { display: none; }
#input-screen .relationship-choice[hidden] { display: none; }

#input-screen .occupation-details { border: 1px solid #d8cbb7; border-radius: 10px; padding: 10px 12px; background: #fffdf8; }
#input-screen .occupation-details summary { cursor: pointer; color: #6a3028; font: 600 13px/1.5 var(--sans); }
#input-screen .occupation-details[open] .relationship-options { margin-top: 12px; }

/* 낮은 화면에서는 너비와 관계없이 출생 정보 폼을 한 화면에 맞춘다.
   남는 높이는 위쪽 그림이 차지한다. */
@media (max-width: 720px), (max-height: 900px) {
  #input-screen[data-step].active { min-height: calc(100dvh - var(--site-header-height) - 20px); }
  #input-screen[data-step] .input-hero { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; margin-bottom: 6px; }
  #input-screen[data-step] .input-hero-art { position: relative; flex: 1 1 0; min-height: 56px; margin-bottom: 8px; }
  #input-screen[data-step] .input-hero-art img { position: absolute; inset: 0; height: 100%; max-height: none; aspect-ratio: auto; }
  #input-screen[data-step] #input-title { margin: 0 0 3px; font-size: 21px; line-height: 1.3; }
  #input-screen[data-step] #input-title br { display: none; }
  #input-screen[data-step] .landing-lead { font-size: 13px; line-height: 1.5; }
  @media (max-height: 620px) { #input-screen[data-step] .landing-lead { display: none; } }
  #input-screen[data-step] .form-card { margin-top: 0; padding-top: 0; gap: 8px; padding-bottom: calc(10px + 64px + env(safe-area-inset-bottom, 0px)); }
  #input-screen[data-step="1"] [data-input-step="1"] { gap: 6px; }
  #input-screen[data-step="2"] [data-input-step="2"] { gap: 8px; }

  /* 단계 표시는 한 줄로 */
  #input-screen[data-step] .input-step-heading { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 0; }
  #input-screen[data-step] .input-step-progress { flex: 0 0 64px; width: 64px; }
  #input-screen[data-step] .input-step-heading p { white-space: nowrap; }
  #input-screen[data-step="1"] .date-input-row { grid-template-columns: minmax(0,1.5fr) auto minmax(0,1fr) auto minmax(0,1fr) auto; }

  /* 라벨 줄에 보조 선택을 얹는다 */
  #input-screen[data-step="1"] .birth-date-section,
  #input-screen[data-step="1"] .birth-time-section { position: relative; display: block; }
  #input-screen[data-step="1"] .birth-date-section > label,
  #input-screen[data-step="1"] .birth-time-section > label,
  #input-screen[data-step="1"] [data-input-step="1"] > label { gap: 4px; font-size: 13px; line-height: 1.3; }
  #input-screen[data-step="1"] .birth-date-section > label,
  #input-screen[data-step="1"] .birth-time-section > label { gap: 8px; padding-top: 0; }
  #input-screen[data-step="1"] .field-help { display: none; }
  #input-screen[data-step="1"] .calendar-options,
  #input-screen[data-step="1"] .time-knowledge { position: absolute; top: -4px; right: 0; display: flex; gap: 6px; margin: 0; padding: 2px; border: 1px solid #d8cbb7; border-radius: 9px; background: #f3ede2; }
  #input-screen[data-step="1"] .calendar-options::before,
  #input-screen[data-step="1"] .calendar-options legend { display: none; }
  #input-screen[data-step="1"] .calendar-options { flex-direction: row; flex-wrap: nowrap; align-items: center; width: auto; height: auto; }
  #input-screen[data-step="1"] .calendar-options .calendar-choice,
  #input-screen[data-step="1"] .calendar-options .leap-month-choice { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 2px; width: auto; overflow: visible; }
  #input-screen[data-step="1"] .calendar-options label,
  #input-screen[data-step="1"] .time-knowledge button { min-width: 0; min-height: 22px; height: 22px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: #766956; font: 600 12px/22px var(--sans); }
  #input-screen[data-step="1"] .calendar-options label:has(input:checked),
  #input-screen[data-step="1"] .time-knowledge button[aria-pressed="true"] { background: #B8365A; color: #fff8e9; box-shadow: none; }
  #input-screen[data-step="1"] .time-knowledge { display: flex; grid-template-columns: none; }
  #input-screen[data-step="1"] #time-unknown-note { display: none !important; }

  /* 입력칸 높이 */
  #input-screen[data-step="1"] #user-name,
  #input-screen[data-step="1"] input.date-part[type="text"],
  #input-screen[data-step="1"] input.time-part[type="text"] { min-height: 40px; height: 40px; padding-block: 0; font-size: 16px; }
  #input-screen[data-step="1"] .date-input-row,
  #input-screen[data-step="1"] .time-input-row { height: 40px; min-height: 40px; }
  #input-screen[data-step="1"] .time-input-row { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto; align-items: center; gap: 6px; }
  #input-screen[data-step="1"] .time-input-row .time-part { width: auto; }

  /* 성별: 다른 항목처럼 라벨 줄 아래에 선택 */
  #input-screen[data-step="1"] .gender-choice { display: block; overflow: hidden; }
  #input-screen[data-step="1"] .gender-choice legend { float: none; width: auto; height: auto; margin: 0 0 8px; padding-top: 0; font-size: 13px; line-height: 1.3; }
  #input-screen[data-step="1"] .gender-choice > label { float: left; box-sizing: border-box; width: calc((100% - 8px) / 2); height: 40px; min-height: 0; padding: 0; }
  #input-screen[data-step="1"] .gender-choice > label + label { margin-left: 8px; }
  #input-screen[data-step="1"] .input-privacy { display: none; }

  /* 2단계: 명식 미리보기·출생지·주제·고민·하는 일을 한 화면에 */
  #input-screen[data-step="2"] .pillar-preview { gap: 6px; margin: 0 auto 4px; max-width: 360px; }
  #input-screen[data-step="2"] .pillar-preview-card { gap: 0; padding: 3px 6px; }
  #input-screen[data-step="2"] .pillar-preview-card b { font-size: 19px; line-height: 1.25; }
  #input-screen[data-step="2"] .pillar-preview-card small { font-size: 9px; line-height: 1.3; }
  #input-screen .birth-location-details summary { padding: 0; font: 600 13px/1.4 var(--sans); color: #6a3028; cursor: pointer; }
  #input-screen .birth-location-details { margin-top: 2px; }
  @media (max-height: 600px) { #input-screen[data-step="1"] [data-input-step="1"] { gap: 3px; } #input-screen[data-step="1"] .birth-location-details summary { line-height: 1.1; } }
  #input-screen .birth-location-details .location-row { margin-top: 8px; }
  #input-screen[data-step="2"] .concern-chips { gap: 6px; }
  #input-screen[data-step="2"] .concern-chips button { min-height: 34px; padding: 5px 11px; font-size: 12px; line-height: 1.3; }
  #input-screen[data-step="2"] [data-input-step="2"] > label { gap: 6px; font-size: 13px; line-height: 1.3; }
  #input-screen[data-step="2"] #user-concern { min-height: 160px; height: 160px; padding: 9px 12px; font-size: 15px; line-height: 1.4; resize: none; }
  #input-screen[data-step="2"] .relationship-choice > legend,
  #input-screen[data-step="2"] .occupation-choice > legend { margin: 0 0 6px; font-size: 13px; line-height: 1.3; }
  #input-screen[data-step="2"] .field-help { display: none; }
  #input-screen[data-step="2"] .relationship-options { display: flex; flex-wrap: wrap; gap: 6px; }
  #input-screen[data-step="2"] .relationship-options label span { display: block; padding: 6px 11px; font-size: 12px; line-height: 1.3; }
  #input-screen[data-step="2"] .relationship-choice:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  #input-screen[data-step="2"] .relationship-choice > legend { float: none; display: contents; }
  #input-screen[data-step="2"] .relationship-choice .field-heading { flex: 0 0 auto; width: auto; margin: 0 4px 0 0; font: 600 13px/1.3 var(--sans); }
  #input-screen[data-step="2"] .relationship-choice .relationship-options { display: contents; }
  #input-screen[data-step="2"] .relationship-choice .relationship-options label { display: block; min-height: 0; height: auto; padding: 0; }
  #input-screen[data-step="2"] .relationship-choice .relationship-options label span { box-sizing: border-box; min-height: 0; height: 32px; padding: 0 10px; font-size: 12px; line-height: 30px; }
  /* 하는 일: 제목은 위, 칩은 아래 한 줄 */
  #input-screen[data-step="2"] .occupation-choice:not([hidden]) { display: block; }
  #input-screen[data-step="2"] .occupation-choice > legend { display: block; margin: 0 0 6px; }
  #input-screen[data-step="2"] .occupation-choice .field-heading { display: block; margin: 0; }
  #input-screen[data-step="2"] .occupation-choice .relationship-options { display: flex; flex-wrap: wrap; gap: 3px; }
  #input-screen[data-step="2"] .occupation-choice .relationship-options label span { padding: 0 6px; }
  @media (max-height: 620px) { #input-screen[data-step="2"] .pillar-preview { display: none; } }
}

@media (min-width: 721px) and (max-height: 580px) {
  body:has(#input-screen.active) .shell { padding-top: 12px; }
}

@media (max-height: 565px) {
  #input-screen[data-step] .input-hero-art { display: none; }
  #input-screen[data-step] .input-hero { flex: 0 0 auto; margin-bottom: 0; }
  #input-screen[data-step] .form-card { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* 몰라요 하나만 남은 토글: 넓은 화면에서도 작은 칩으로 오른쪽에 둔다. */
#input-screen .time-knowledge { display: flex; grid-template-columns: none; width: fit-content; margin-left: auto; padding: 2px; gap: 0; }
#input-screen .time-knowledge button { min-height: 32px; padding: 0 14px; }
#input-screen .time-knowledge button[aria-pressed="true"] { background: #B8365A; color: #fff8e9; box-shadow: none; }

/* 연인궁합: 두 사람 진행 줄과 긴 버튼 문구도 한 화면에 */
@media (max-width: 720px) {
  #input-screen .compatibility-progress { margin: 2px 0 0; gap: 8px; }
  #input-screen .compatibility-progress-label { font-size: 12px; }
  #input-screen .input-step-nav #input-next { font-size: 14px; line-height: 1.25; }
}

/* 입력 화면 색 정리: 먹색(#2b231e)과 갈색(#B8365A) 두 가지만 쓴다. */
#input-screen #input-title { color: #2b231e; }
#input-screen .landing-lead { color: #7a6e5f; }
#input-screen .input-step-heading p span { color: #B8365A; }
#input-screen .input-step-heading p b,
#input-screen .field-heading,
#input-screen legend,
#input-screen .birth-date-section > label,
#input-screen .birth-time-section > label,
#input-screen [data-input-step] > label { color: #2b231e; }
#input-screen .input-step-progress > span.is-active { background: #B8365A; }
#input-screen .concern-chips button,
#input-screen .birth-location-details summary { color: #B8365A; }
#input-screen .concern-chips button[aria-pressed="true"] { border-color: #B8365A; background: #f0e5d7; }

/* 계산 건수: 알약을 걷고, 한지 위에 숫자를 가운데로 띄운다. 숫자는 명조, 나머지는 작고 조용하게. */
.home-social-proof { display: block; width: 100%; padding: 6px 0 2px; border: 0; border-radius: 0; background: transparent; text-align: center; }
.home-social-proof .home-social-dot { display: none; }
.home-social-proof > span { display: grid; justify-items: center; gap: 2px; }
.home-social-proof small { color: #8a7d6a; font: 500 12px/1.4 var(--sans); letter-spacing: .08em; }
.home-social-proof b { color: #B8365A; font: 700 34px/1.15 var(--serif); letter-spacing: -.01em; }
.home-social-proof em { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; color: #6f6455; font: normal 500 13px/1.5 var(--sans); letter-spacing: -.02em; }
.home-social-proof em::before, .home-social-proof em::after { content: ""; flex: 0 1 34px; height: 1px; background: #b9a88f; opacity: .7; }

/* 준비중 카드: 눌리지 않고 흐리게 보이며 '준비중' 태그가 붙는다. */
#home-screen .landing-soon-tag { display: inline-flex; align-items: center; align-self: flex-start; padding: 2px 8px; border: 1px solid #d9c7ab; border-radius: 999px; background: #fff8ea; color: #7a6350; font: 700 11px/1.5 var(--sans); letter-spacing: -.01em; }
#home-screen .landing-main-card .landing-soon-tag { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 4px 11px; background: #fff8eae6; font-size: 12px; }
#home-screen .landing-main-card.is-soon { cursor: default; }
/* 포스터는 카드 배경이므로 영상 필터와 별도로 디밍한다. */
#home-screen .landing-main-card.is-soon::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgb(0 0 0 / .16); pointer-events: none; }
#home-screen .landing-main-card.is-soon .landing-card-story { z-index: 2; }
#home-screen .landing-main-card.is-soon .landing-card-video, #home-screen .landing-main-card.is-soon::before { filter: grayscale(.55) brightness(.85); }
#home-screen .landing-card-grid button.is-soon { cursor: default; }
#home-screen .landing-card-grid button.is-soon .landing-grid-art img { filter: grayscale(.55) brightness(.88); }
#home-screen .landing-card-grid .landing-grid-art .landing-soon-tag { position: absolute; left: 50%; bottom: 8px; z-index: 2; transform: translateX(-50%); align-self: auto; white-space: nowrap; background: #fff8eae6; }

/* 양력·음력과 몰라요 칩은 라벨 줄에 얹혀 있어 윗칸에 붙어 보인다. 구역 위에 숨 쉴 간격을 두고, 출생지 보정 줄도 시각 입력에서 띄운다. */
#input-screen[data-step="1"] .birth-date-section,
#input-screen[data-step="1"] .birth-time-section { margin-top: 14px; }
#input-screen[data-step="1"] .calendar-options,
#input-screen[data-step="1"] .time-knowledge { top: -2px; }
#input-screen .birth-location-details { margin-top: 12px; }
#input-screen[data-step="1"] .birth-date-section > label,
#input-screen[data-step="1"] .birth-time-section > label { gap: 16px; }

/* 2단계 칩: 전체 폭을 같은 칸으로 나눠 쓰고, 모양은 알약 대신 모서리가 작은 네모로 통일한다. */
#input-screen[data-step="2"] .concern-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#input-screen[data-step="2"] .concern-chips button { box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 4px; border-radius: 10px; font-size: 13px; line-height: 1.3; text-align: center; word-break: keep-all; }
#input-screen[data-step="2"] .relationship-choice:not([hidden]) { display: block; }
#input-screen[data-step="2"] .relationship-choice > legend { display: block; margin: 0 0 8px; }
#input-screen[data-step="2"] .relationship-choice .field-heading { display: block; margin: 0; }
#input-screen[data-step="2"] .relationship-choice .relationship-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#input-screen[data-step="2"] .relationship-choice .relationship-options label { display: block; min-width: 0; }
#input-screen[data-step="2"] .relationship-choice .relationship-options label span { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; padding: 0 4px; border-radius: 10px; font-size: 13px; line-height: 1.3; text-align: center; }
#input-screen[data-step="2"] .occupation-choice .relationship-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* 주제 상품 무료 결과 */
.topic-preview{background:#fffaf0;border:1px solid #dac9a8;border-radius:16px;padding:clamp(24px,5vw,46px);margin:24px 0;color:#382f25;box-shadow:0 7px 25px #4c34100d}.topic-preview h2{font-size:clamp(1.5rem,4vw,2rem);margin:0 0 12px}.topic-preview p{line-height:1.7}.topic-preview ol{padding-left:1.5em;line-height:2.2;margin:22px 0}.topic-preview .ov-cta{display:inline-block;border:0;cursor:pointer;font:inherit;text-align:center}.compatibility-preview-dialog{border:0;border-radius:18px;padding:0;max-width:min(680px,calc(100vw - 24px));max-height:90vh;background:#fffdf8;color:#302a23;box-shadow:0 24px 60px #0005}.compatibility-preview-dialog::backdrop{background:#1d1816a8}.compatibility-preview-sheet{padding:clamp(24px,5vw,48px);overflow:auto;max-height:90vh}.compatibility-preview-sheet h2{font-size:2rem}.compatibility-preview-sheet p{line-height:1.7}.compatibility-preview-sheet ol{line-height:1.9}.compatibility-preview-sheet button{display:block;width:100%;margin:12px 0;padding:14px;border:1px solid #a88c64;border-radius:8px;background:#382d23;color:white;font:inherit;cursor:pointer}.compatibility-preview-sheet button+button{background:transparent;color:#382d23}
.romance-free-preview > :not(#topic-preview){display:none!important}
.romance-free-preview #topic-preview{background:linear-gradient(145deg,#fff8f4,#fffdf9);border-color:#e4c7c5}
.romance-free-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:20px 0}
.romance-free-card{padding:15px;border:1px solid #eddad4;border-radius:12px;background:#fffdfb}
.romance-free-card strong{display:block;color:#a46069;font-size:13px}
.romance-free-card p{margin:8px 0;font-size:15px;font-weight:650}
.romance-free-card small{display:block;color:#796c68;font-size:12px;line-height:1.5}
@media(max-width:700px){.romance-free-grid{grid-template-columns:1fr}}
/* 연인궁합 무료 결과는 입력을 마친 뒤 한 화면으로 이어진다. */
.compatibility-preview-dialog{width:100vw;max-width:none;height:100dvh;max-height:none;border-radius:0}.compatibility-preview-sheet{width:min(760px,100%);max-height:none;margin:auto;min-height:100dvh;padding:clamp(28px,6vw,72px)}.compatibility-preview-scores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:28px 0}.compatibility-preview-scores article{padding:18px;border:1px solid #e4d9c6;border-radius:12px;background:#fbf7ee}.compatibility-preview-scores h3{font-size:1rem;margin:0 0 8px}.compatibility-preview-scores strong{font-size:1.4rem}.compatibility-preview-scores p{font-size:.9rem;margin:8px 0 0}@media(max-width:560px){.compatibility-preview-scores{grid-template-columns:1fr}}
.compatibility-preview-sheet .compatibility-intimacy-choice{display:flex;align-items:flex-start;gap:10px;margin:16px 0;color:#4a3f33;font-size:14px;line-height:1.5}.compatibility-intimacy-choice input{flex:0 0 auto;margin-top:3px;accent-color:#743b4a}

/* 맞추는 동안에는 움직임을 끈다. */
/* 첫 배치(1번 가운데, 3위 왼쪽, 2위 오른쪽)는 index.html 에 미리 적혀 있어 스크립트가 돌기 전에도 세 장이 제자리에 보인다. */
#home-screen .landing-deck:not(.is-ready) .landing-main-card { transition: none; }
#home-screen .landing-deck.is-resetting .landing-main-card { transition: none !important; animation: none !important; }
#home-screen .landing-main-card.is-current.skip-enter { animation: none; }

/* 재회사주·이직사주가 따로 받는 시기 칸. 한 줄에 한 묶음씩 세로로 쌓는다. */
#input-screen[data-step="2"] .topic-details:not([hidden]) { display: grid; gap: 10px; align-items: stretch; }
#input-screen .topic-details .date-input-row { grid-template-columns: 1fr auto 1fr auto 1fr auto; }
#input-screen .topic-details .date-input-row:has(> :nth-child(4):last-child) { grid-template-columns: 1.4fr auto 1fr auto; }
#input-screen .topic-details .date-input-row:has(> :nth-child(4):last-child) > span:last-child { white-space: nowrap; }
#input-screen .topic-details .topic-sub { margin-top: 10px; }
#input-screen .topic-details .relationship-options { display: flex; flex-wrap: wrap; gap: 6px; }
#input-screen[data-step="2"] .topic-details .field-help { display: block; margin-top: 2px; }
#input-screen[data-step="2"] .topic-details > legend { display: block; }
#input-screen[data-step="2"] .topic-details .field-heading { display: grid; gap: 2px; margin: 0; }
#input-screen .career-context-row { display: grid; grid-template-columns: minmax(112px, .8fr) minmax(0, 1.2fr); gap: 8px; }
#input-screen .career-context-row > select,
#input-screen .career-context-row > input { min-width: 0; width: 100%; }

/* 입력 1단계 소개: 상품이 무엇을 해 주는지, 무료로 바로 볼 수 있다는 것을 폼 위에 먼저 말한다.
   이 구간이 켜져 있으면 화면은 한 화면에 맞추지 않고 위에서 아래로 스크롤해 읽는다. */
#input-pitch[hidden] { display: none; }
#input-screen[data-pitch="on"] .input-hero { display: none; }
#input-screen[data-pitch="on"].active { min-height: 0; }
#input-pitch { margin: 0 0 22px; text-align: center; }
#input-pitch .input-pitch-art { position: relative; margin: 0 0 16px; overflow: hidden; border-radius: 16px; aspect-ratio: 4 / 3; background: var(--accent-soft, #efe5d3); box-shadow: 0 6px 22px rgba(28,24,20,.12); }
#input-pitch .input-pitch-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
#input-pitch .input-pitch-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 5px 13px 5px 6px; border: 1px solid color-mix(in srgb, var(--accent, #B8365A) 24%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--accent, #B8365A) 7%, var(--card, #fff)); font: 500 13px/1.4 var(--sans); letter-spacing: -.02em; }
#input-pitch .input-pitch-badge b { padding: 2px 9px; border-radius: 999px; background: var(--accent, #B8365A); color: #fff; font-weight: 800; font-size: 12px; }
#input-pitch .input-pitch-title { margin: 0 0 10px; font: 800 24px/1.35 var(--sans); letter-spacing: -.035em; word-break: keep-all; }
#input-pitch .input-pitch-lead { margin: 0 0 16px; color: var(--report-meta, #6f6558); font: 400 15px/1.65 var(--sans); word-break: keep-all; }
#input-pitch .input-pitch-list { margin: 0 0 18px; padding: 14px 16px; list-style: none; display: grid; gap: 9px; border: 1px solid var(--ui-line, #e3dccf); border-radius: 14px; background: var(--ui-surface, #fff); text-align: left; }
#input-pitch .input-pitch-list li { position: relative; padding-left: 22px; font: 600 14px/1.5 var(--sans); letter-spacing: -.02em; word-break: keep-all; }
#input-pitch .input-pitch-list li::before { content: ""; position: absolute; left: 3px; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent, #B8365A); }
#input-pitch .input-pitch-cta { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 14px; background: var(--accent, #B8365A); color: #fff; font: 800 16px/1 var(--sans); text-decoration: none; }
#input-screen[data-pitch="on"] #birth-form { scroll-margin-top: calc(var(--site-header-height, 56px) + 8px); }

/* 재회비책 마지막 쪽(그 사람 차례의 2단계)은 이별 정보와 고민 글만 받는다. */
#input-screen[data-pair="reunion-b"] [data-input-step="2"] > :not(#topic-details-reunion):not(#form-error):not(.concern-text-field) { display: none !important; }
#input-screen .input-step-progress { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; }
#input-screen[data-step] .input-step-progress:has(> :nth-child(4)) { flex-basis: 96px; width: 96px; }

/* "1단계 사주 필수 정보" 같은 단계 안내 글은 두지 않고 진행 점만 남긴다. */
#input-screen .input-step-heading > p { display: none; }
#input-screen .input-step-heading { justify-content: center; }
#input-screen[data-step] .input-step-heading { justify-content: center; }

/* 생년월일·태어난 시각은 숫자만 이어 쓰는 한 칸이다(점과 콜론은 자동). 연·월·일, 시·분 칸은 계산용으로 숨겨 둔다. */
#input-screen .birth-split[hidden] { display: none !important; }
#input-screen input.birth-single[type="text"] { width: 100%; min-height: 48px; height: 48px; padding-block: 0; box-sizing: border-box; font-size: 17px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
#input-screen input.birth-single[type="text"]::placeholder { letter-spacing: 0; font-size: 15px; }
#input-screen input.birth-single.is-unknown { background: #f1efeb; }

/* 입력·무료 결과 화면 맨 위 띠. 사이트 헤더 대신 이전으로 가는 화살표(와 결과에는 로고)만 둔다. */
.screen-topbar { position: sticky; top: 0; z-index: 6; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; min-height: 52px; margin: 0 calc(var(--report-padding, 0px) * -1) 6px; padding: env(safe-area-inset-top, 0px) 4px 0; background: color-mix(in srgb, var(--paper, #f4efe7) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#input-screen > .screen-topbar { grid-template-columns: 44px 1fr; }
#input-screen[data-conv="on"] > .screen-topbar { display: none; }
.screen-back { width: 44px; height: 44px; border: 0; background: transparent; color: var(--report-ink, #2b251f); font-size: 34px; line-height: 1; cursor: pointer; }
.screen-logo { justify-self: center; display: inline-flex; line-height: 0; padding: 2px; border-radius: 8px; }
.screen-logo img { display: block; width: auto; height: 42px; }
#input-screen[data-pitch="on"][data-form="out"] .input-step-nav { display: none; }
#input-screen > .screen-topbar { margin-top: -34px; background: transparent; }
#chart-screen > .screen-topbar.is-logo-only { grid-template-columns: 1fr; padding-left: 14px; }
#chart-screen > .screen-topbar.is-logo-only .screen-logo { justify-self: start; padding: 0; }
#chart-screen > .screen-topbar.is-logo-only .screen-logo img { height: 46px; }
/* 무료 결과의 로고는 헤더처럼 따라오지 않는다. 맨 위에서만 보이고 스크롤하면 올라간다. */
#chart-screen > .screen-topbar.is-logo-only { position: static; min-height: 0; margin-bottom: 8px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
#chart-screen > .screen-topbar.is-logo-only { margin-top: -14px; margin-bottom: 0; padding-top: env(safe-area-inset-top, 0px); }
#chart-screen > .screen-topbar.is-logo-only .screen-logo img { height: 40px; }
@media (max-width: 430px) { #chart-screen > .screen-topbar.is-logo-only { margin-top: -8px; } #input-screen > .screen-topbar { margin-top: -24px; } }
/* 탭할 때 파랗게 깔리는 기본 강조를 걷는다. 키보드로 이동할 때의 포커스 링은 남긴다. */
.screen-logo, .screen-back, .conv-back { -webkit-tap-highlight-color: transparent; }
.screen-logo:focus:not(:focus-visible), .screen-back:focus:not(:focus-visible), .conv-back:focus:not(:focus-visible) { outline: none; }
.screen-logo:focus-visible, .screen-back:focus-visible { outline: 2px solid rgba(138,42,36,.45); outline-offset: 2px; }

/* 무료 결과 로고: 사이트 헤더 로고와 같은 크기(52px)와 같은 자리(위 5.5px, 왼쪽 18px)에 놓는다. */
#chart-screen > .screen-topbar.is-logo-only { margin: -32px 0 0 -4px; padding: 0; min-height: 0; }
#chart-screen > .screen-topbar.is-logo-only .screen-logo { padding: 2px; }
#chart-screen > .screen-topbar.is-logo-only .screen-logo img { height: 52px; }
/* 무료 결과 로고: 실제 흐름에서 잰 값으로 사이트 헤더 로고와 같은 자리(위 6px, 왼쪽 18px 기준)에 맞춘다.
   결과지의 위 여백에는 기대지 않고, 로고 자리(38px)만 남겨 본문이 가리지 않게 한다. */
#chart-screen > .screen-topbar.is-logo-only { position: static; height: 38px; min-height: 0; margin: 0; padding: 0; }
#chart-screen > .screen-topbar.is-logo-only .screen-logo { position: absolute; top: -24px; left: -4px; z-index: 5; padding: 2px; }
/* 입력 화면 위 띠: 블러와 띠 배경을 없애고 화살표 단추만 화면 위에 고정해 둔다. */
#input-screen > .screen-topbar { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; }
#input-screen > .screen-topbar .screen-back { pointer-events: auto; margin-left: 4px; border-radius: 50%; background: rgba(246,240,228,.92); box-shadow: 0 1px 6px rgba(58,51,42,.15); font-size: 30px; }
/* 입력 화면 맨 위 백 단추: 따라오지 않고, 그림 위에 얹지 않는다. 헤더가 있던 만큼의 자리를 비워 그 안에 둔다. */
#input-screen > .screen-topbar { position: static; display: flex; align-items: center; height: 56px; min-height: 56px; margin: -20px 0 4px; padding: 0; background: none; pointer-events: auto; }
#input-screen > .screen-topbar .screen-back { margin: 0 0 0 -6px; border-radius: 0; background: none; box-shadow: none; font-size: 34px; }
@media (max-width: 430px) { #input-screen > .screen-topbar { margin-top: -12px; } }

/* 상품 카드 아래 한 줄 설명은 줄 수가 달라도 같은 높이를 차지하게 해서, 카드마다 아래쪽이 들쭉날쭉하지 않게 한다. */
#home-screen .landing-grid-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: calc(1.65em * 2); }
@media (min-width: 521px) { #home-screen .landing-grid-desc { min-height: calc(1.65em * 3); } }

/* 1단계 소개가 보이는 동안에는 주월 소개 카드를 접는다(소개와 같은 말을 반복하지 않는다). 폼을 위로 올린다. */
#input-screen[data-pitch="on"] .input-juwol-bubble { display: none; }
/* 하단 고정 단추는 조금 낮게, 마지막 입력칸이 가려지지 않도록 폼 아래 여백을 넉넉히 둔다. */
#input-screen .input-step-nav { padding-top: 8px; }
#input-screen .input-step-nav #input-next, #input-screen .input-step-nav #input-prev { min-height: 46px; font-size: 15px; }
#input-screen .form-card { padding-bottom: calc(28px + 84px + env(safe-area-inset-bottom, 0px)); }

#input-juwol-bubble[hidden] { display: none; }

/* 입력 화면 그림을 더 크게 보이게: 소개 그림은 세로를 늘리고, 고민 선택 화면의 그림은 덜 가리고 덜 흐리게 한다. */
#input-pitch .input-pitch-art { aspect-ratio: 1 / 1; }
#input-pitch .input-pitch-art img { object-position: 50% 24%; }
#input-screen .input-hero-art img { max-height: 340px; object-fit: cover; object-position: 50% 28%; }
#input-screen .input-hero-art::after { height: 26%; }
#input-screen .input-hero-art img { -webkit-mask-image: linear-gradient(#000 70%, transparent 100%); mask-image: linear-gradient(#000 70%, transparent 100%); }
@media (max-width: 600px) and (max-height: 700px) { #input-screen .input-hero-art img { height: 150px; max-height: none; } }
/* 오류 문구는 고정 단추 바로 위에 붙어 항상 보인다(폼 맨 아래에 숨지 않게). */
#input-screen .form-error:not(:empty) { position: sticky; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 69; margin-top: 10px; box-shadow: 0 6px 18px rgba(78,62,43,.18); font-weight: 600; text-align: center; }

/* 고민 칩을 고르면 성별·양력/음력 선택과 같은 채운 단추 모양으로 바뀐다. */
#input-screen .concern-chips button[aria-pressed="true"] { border-color: #B8365A; background: #B8365A; color: #fff8e9; font-weight: 700; box-shadow: none; transition: background .15s, color .15s; }
#input-screen .concern-chips button[aria-pressed="true"]:hover { background: #9E2C4D; }

/* 재회비책 마지막 쪽(이별과 고민): 이별 정보를 먼저, 고민 글을 마지막에 받는다. 칸 제목과 연·월 줄은 단추처럼 테를 두르지 않는다. */
#input-screen[data-pair="reunion-b"] #topic-details-reunion { display: grid; gap: 12px; }
#input-screen[data-pair="reunion-b"] #topic-details-reunion .reunion-by-title { margin: 4px 0 -4px; }
#input-screen:has(#input-pitch) .form-card #topic-details-reunion.topic-details label > :is(.field-heading, .date-input-row) { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
#input-screen #topic-details-reunion > label { display: grid; gap: 6px; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }