/* 흑월문 그림자사주 연애운 — 랜딩(detail_love.html) 스타일. 입력은 공용 입력란(/shadowsaju/love/flow.html)이 그린다. */
:root{
  --bg: #070200;
  --face: #1E1430;
  --ink: #ECE6F5;
  --sub: #C9BEDC;
  --accent: #B9A3E3;
  --line: rgba(236, 230, 245, .1);
  --sans: 'Noto Sans KR', 'Pretendard', system-ui, sans-serif;
}
*{ box-sizing: border-box; }
[hidden]{ display: none !important; }
html, body{ margin: 0; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
html:root{ background: #1c1c1c; }
body{ background: var(--bg); }
body{ max-width: 450px; margin: 0 auto; overflow-x: hidden; }
img{ display: block; max-width: 100%; }
a{ color: inherit; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* 261020_ 랜딩 섹션 이미지 */
.landing img{ display: block; width: 100%; height: auto; }
.landing h1{ margin: 0; font-size: 0; line-height: 0; }

/* CTA */
.cta{ display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; border: 0; border-radius: 14px; background: var(--accent); color: #1A1027; font: 700 16px/1 var(--sans); text-decoration: none; cursor: pointer; transition: transform .15s ease, filter .15s ease; }
.cta:hover{ filter: brightness(1.06); }
.cta:active{ transform: scale(.98); }
.cta[disabled]{ opacity: .45; cursor: default; }

/* 입력 */
.field > span{ display: block; margin-bottom: 8px; font: 500 13px/1.4 var(--sans); color: var(--sub); }
.field input, .field select{ width: 100%; height: 50px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--face); color: var(--ink); font: 400 16px/1 var(--sans); color-scheme: dark; }
.field input:focus, .field select:focus{ border-color: var(--accent); outline: none; }

/* 261020_ 하단 고정 CTA */
@font-face { font-family: 'MapoAgape'; src: url('/static/fonts/MapoAgape.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }