/* 재회 사주 입력 화면. 사주(/saju) 설명서 페이지처럼 위쪽 메뉴와 같은 폭에 맞추고,
   짧은 소개 한 줄 → 바로 입력 카드(왼쪽) + 받게 될 리포트(오른쪽) 순서로 둔다. 색은 리포트와 같은 밤하늘·장미빛. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500;700;900&display=swap');

main.container:has(> #input-section.is-landing) {
  --rl-bg: #100c15; --rl-panel: #1a141f; --rl-panel-2: #241b2b; --rl-line: rgba(255, 233, 244, 0.10);
  --rl-ink: #f8eff3; --rl-muted: #cbb9c4; --rl-rose: #f08fb4; --rl-coral: #f4a07c; --rl-gold: #e9c98d;
  --rl-cta: linear-gradient(135deg, #f08fb4 0%, #f4a07c 100%); --rl-cta-ink: #2a1019; --rl-glow: 0 14px 34px rgba(240, 143, 180, 0.30);
  --rl-serif: 'Noto Serif KR', Batang, Georgia, serif;
}
html.theme-light main.container:has(> #input-section.is-landing) {
  --rl-bg: #fbf6f4; --rl-panel: #ffffff; --rl-panel-2: #f8eef1; --rl-line: rgba(70, 30, 50, 0.11);
  --rl-ink: #2a1d24; --rl-muted: #7a6670; --rl-rose: #c94f7c; --rl-coral: #d9744e; --rl-gold: #9a6f27;
  --rl-cta: linear-gradient(135deg, #d4578a 0%, #e0805a 100%); --rl-cta-ink: #ffffff; --rl-glow: 0 14px 30px rgba(201, 79, 124, 0.22);
}
/* 입력 화면일 때 본문 폭을 위쪽 메뉴(1120px, 좌우 40px)와 같게. 결과 화면 폭은 그대로. */
main.container:has(> #input-section.is-landing:not([hidden])) { max-width: 1120px; padding-left: 40px; padding-right: 40px; }
main.container:has(> #input-section.is-landing[hidden]) .rl-intro { display: none !important; }
body:has(#input-section.is-landing[hidden]) .rl-sticky { display: none !important; }
/* 리포트가 화면에 있으면 아래 '내 재회 흐름 보기' 버튼은 늘 숨긴다. */
body:has(#result-section .rs-report) .rl-sticky { display: none !important; }

/* ── 짧은 소개 ── */
.rl-intro { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; align-items: center; padding: 34px 24px 6px; }
.rl-kicker { margin: 0 0 18px !important; color: var(--rl-gold) !important; font-size: 11.5px; font-weight: 700; letter-spacing: 0.2em; text-align: left !important; }
.rl-intro h1 { margin: 0 !important; font-family: var(--rl-serif) !important; font-size: 50px !important; font-weight: 700 !important; line-height: 1.34 !important; letter-spacing: -0.03em; color: var(--rl-ink) !important; text-align: left !important; }
.rl-lead { margin: 20px 0 0 !important; max-width: 560px; color: var(--rl-muted) !important; font-size: 16px; line-height: 1.8; text-align: left !important; }
.rl-asks { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
/* 소개 글 밑 특징 세 가지 */
.rl-badges { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 14px 0 0; padding: 0; list-style: none; }
.rl-badges li { position: relative; padding-left: 20px; font-size: 13.5px; font-weight: 700; color: var(--rl-ink) !important; }
.rl-badges li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 900; color: var(--rl-rose); }
.rl-asks button { appearance: none; cursor: pointer; width: auto !important; flex: 0 0 auto; min-height: 0 !important; margin: 0 !important; padding: 9px 15px; border: 1px solid var(--rl-line); border-radius: 999px; background: var(--rl-panel); color: var(--rl-ink); font: 600 14px/1.3 inherit; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.rl-asks button:hover, .rl-asks button.is-picked { border-color: var(--rl-rose); color: var(--rl-rose); transform: translateY(-1px); }
/* 그림: 사주 페이지의 아치형 칸과 같은 모양 한 장 */
.rl-intro-art span { display: block; width: 100%; aspect-ratio: 7 / 9; border: 1px solid var(--rl-line); border-radius: 999px 999px 22px 22px; background: var(--rl-art) center 30% / cover no-repeat; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 0 0 6px rgba(240, 143, 180, 0.06); }
.rl-intro[data-rl-art="bottle"] { --rl-art: url('/images/reunion/se-message-bottle-1024.webp'); }
.rl-intro[data-rl-art="stars"] { --rl-art: url('/images/reunion/sk-constellation-keeper-1024.webp'); }
.rl-intro[data-rl-art="wish"] { --rl-art: url('/images/reunion/sk-star-wisher-1024.webp'); }
.rl-intro[data-rl-art="bottle"] .rl-intro-art span { background-position: 36% 28%; }
.rl-intro[data-rl-art="stars"] .rl-intro-art span { background-position: 50% 16%; }
.rl-intro[data-rl-art="wish"] .rl-intro-art span { background-position: 32% 24%; }

/* ── 입력 카드(왼쪽) + 받게 될 리포트(오른쪽) ── */
html body #input-section.goblin-input.reunion-input-shell.is-landing {
  --input-surface: var(--rl-panel); --input-panel: var(--rl-panel); --input-fill: var(--rl-bg); --input-line: var(--rl-line);
  --input-ink: var(--rl-ink); --input-muted: var(--rl-muted); --input-accent: var(--rl-rose); --input-ring: rgba(240, 143, 180, 0.32);
  display: grid !important; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 56px; align-items: start;
  width: auto !important; max-width: none; margin: 34px 24px 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; color: var(--rl-ink); scroll-margin-top: 24px;
}
html body #input-section.goblin-input.reunion-input-shell.is-landing .ri-form { padding: 32px 32px 28px; border: 1px solid var(--rl-line); border-radius: 22px; background: var(--rl-panel); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); }
html body #input-section.goblin-input.reunion-input-shell.is-landing .ri-form-kicker { margin: 0 0 8px !important; color: var(--rl-gold) !important; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; }
html body #input-section.goblin-input.reunion-input-shell.is-landing .ri-form-title { margin: 0 0 22px !important; font-family: var(--rl-serif) !important; font-size: 24px !important; font-weight: 700 !important; line-height: 1.45 !important; color: var(--rl-ink) !important; text-align: left !important; }
html body #input-section.goblin-input.reunion-input-shell.is-landing .input-page.card,
html body #input-section.goblin-input.reunion-input-shell.is-landing .input-page.card[hidden] { display: block !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
html body #input-section.goblin-input.reunion-input-shell.is-landing .input-page + .input-page { margin-top: 28px !important; padding-top: 26px !important; border-top: 1px solid var(--rl-line) !important; }
html body #input-section.goblin-input.reunion-input-shell.is-landing :is(.input-indicator, .input-counter, #input-prev) { display: none !important; }
html body #input-section.goblin-input.reunion-input-shell.is-landing .ri-eyebrow { margin: 0 0 6px !important; color: var(--rl-rose) !important; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; }
html body #input-section.goblin-input.reunion-input-shell.is-landing .input-page-title { margin: 0 0 4px !important; font-family: var(--rl-serif) !important; font-size: 19px !important; font-weight: 700 !important; line-height: 1.5 !important; color: var(--rl-ink) !important; }
html body #input-section.goblin-input.reunion-input-shell.is-landing .input-page-title::before { content: none !important; }
html body #input-section.goblin-input.reunion-input-shell.is-landing .input-page > label:not(.cal-toggle-option) { display: block; margin: 16px 0 8px !important; color: var(--rl-muted) !important; font-size: 13px !important; font-weight: 700 !important; }
html body #input-section.goblin-input.reunion-input-shell.is-landing :is(input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=hidden]):not([type=file]), select, textarea) {
  min-height: 48px; padding: 11px 14px; border: 1px solid var(--rl-line) !important; border-radius: 12px !important; background: var(--rl-bg) !important;
  color: var(--rl-ink) !important; -webkit-text-fill-color: var(--rl-ink); font-size: 16px; box-shadow: none !important;
}
html body #input-section.goblin-input.reunion-input-shell.is-landing :is(input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=hidden]):not([type=file]), select, textarea):focus { border-color: var(--rl-rose) !important; outline: none; box-shadow: 0 0 0 4px var(--input-ring) !important; }
html body #input-section.goblin-input.reunion-input-shell.is-landing :is(input, textarea)::placeholder { color: var(--rl-muted) !important; -webkit-text-fill-color: var(--rl-muted); opacity: 0.7; }
html body #input-section.goblin-input.reunion-input-shell.is-landing .dp-unit { color: var(--rl-muted) !important; font-size: 13px !important; }
html body #input-section.goblin-input.reunion-input-shell.is-landing .cal-toggle { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px !important; margin: 12px 0 0 !important; padding: 4px; border-radius: 14px; background: var(--rl-bg); border: 1px solid var(--rl-line); }
html body #input-section.goblin-input.reunion-input-shell.is-landing .cal-toggle-option { position: relative; display: flex !important; align-items: center; justify-content: center; min-height: 40px !important; margin: 0 !important; padding: 8px 10px !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; box-shadow: none !important; color: var(--rl-muted) !important; font-size: 14.5px !important; font-weight: 700 !important; cursor: pointer; }
html body #input-section.goblin-input.reunion-input-shell.is-landing .cal-toggle-option input { position: absolute; opacity: 0; width: 1px !important; height: 1px !important; pointer-events: none; }
html body #input-section.goblin-input.reunion-input-shell.is-landing .cal-toggle-option:has(input:checked) { background: var(--rl-panel-2) !important; color: var(--rl-rose) !important; box-shadow: inset 0 0 0 1.5px var(--rl-rose) !important; }
html body #input-section.goblin-input.reunion-input-shell.is-landing .cal-toggle-option:has(input:focus-visible) { outline: 3px solid var(--input-ring); }
html body #input-section.goblin-input.reunion-input-shell.is-landing .cal-toggle:has(input[value=solar]:checked) .cal-toggle-option:has(input[type=checkbox]) { display: none !important; }
html body #input-section.goblin-input.reunion-input-shell.is-landing .input-page > label:has(> input[type=checkbox]) { display: inline-flex !important; align-items: center; gap: 8px; margin: 14px 0 0 !important; padding: 0 !important; background: none !important; border: 0 !important; color: var(--rl-muted) !important; font-weight: 600 !important; }
html body #input-section.goblin-input.reunion-input-shell.is-landing input[type=checkbox] { width: 17px !important; height: 17px !important; accent-color: var(--rl-rose); }
html body #input-section.goblin-input.reunion-input-shell.is-landing .hour-picker { margin-top: 10px; }
html body #input-section.goblin-input.reunion-input-shell.is-landing .note { margin: 16px 0 0 !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: var(--rl-muted) !important; font-size: 12px !important; line-height: 1.8; }
/* 한글은 낱말 단위로 줄을 바꾼다(휴대폰에서 '있 / 을까'처럼 끊기지 않게). */
.rl-intro, .rl-aside, html body #input-section.goblin-input.reunion-input-shell.is-landing { word-break: keep-all; overflow-wrap: break-word; }
html body #input-section.goblin-input.reunion-input-shell.is-landing .error { margin: 14px 0 0; color: #f19a8c; font-size: 14px; }
html body #input-section.goblin-input.reunion-input-shell.is-landing .input-nav { display: block !important; margin: 26px 0 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
html body #input-section.goblin-input.reunion-input-shell.is-landing #input-next {
  width: 100%; min-height: 56px !important; padding: 14px 22px !important; border: 0 !important; border-radius: 999px !important;
  background: var(--rl-cta) !important; color: var(--rl-cta-ink) !important; -webkit-text-fill-color: var(--rl-cta-ink); font-size: 17px !important; font-weight: 800 !important; box-shadow: var(--rl-glow) !important;
}
html body #input-section.goblin-input.reunion-input-shell.is-landing #input-next::after { content: "  ↗"; }
html body #input-section.goblin-input.reunion-input-shell.is-landing #input-next:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }
html body #input-section.goblin-input.reunion-input-shell.is-landing .ri-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 14px 0 0 !important; color: var(--rl-muted) !important; font-size: 12.5px; }
html body #input-section.goblin-input.reunion-input-shell.is-landing .ri-trust [data-reunion-price] { color: var(--rl-gold); font-weight: 800; }
html body #input-section.goblin-input.reunion-input-shell.is-landing .ri-trust span + span::before { content: "·"; margin-right: 14px; opacity: 0.6; }

/* 오른쪽: 받게 될 리포트 */
.rl-aside { position: sticky; top: 20px; padding-top: 6px; }
.rl-eyebrow { margin: 0 0 10px !important; color: var(--rl-gold) !important; font-size: 11.5px; font-weight: 700; letter-spacing: 0.2em; text-align: left !important; }
.rl-aside h2 { margin: 0 0 14px !important; font-family: var(--rl-serif) !important; font-size: 26px !important; font-weight: 700 !important; line-height: 1.45 !important; color: var(--rl-ink) !important; text-align: left !important; }
.rl-points { margin: 0; padding: 0; list-style: none; counter-reset: rl-point; }
.rl-points li { counter-increment: rl-point; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--rl-line); }
.rl-points li::before { content: counter(rl-point, decimal-leading-zero); grid-row: 1 / span 2; color: var(--rl-rose); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.9; }
.rl-points b { color: var(--rl-ink); font-size: 15px; font-weight: 700; }
.rl-points span { margin-top: 2px; color: var(--rl-muted); font-size: 13px; line-height: 1.7; }
.rl-aside-shot { position: relative; margin: 22px 0 0; height: 300px; overflow: hidden; border: 1px solid var(--rl-line); border-radius: 20px; background: var(--rl-panel); }
.rl-aside-shot img { display: block; width: 100%; height: auto; }
.rl-aside-shot::after { content: ""; position: absolute; inset: auto 0 0 0; height: 90px; background: linear-gradient(180deg, transparent, var(--rl-panel)); }
.rl-aside-shot figcaption { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 4px 10px; border-radius: 999px; background: rgba(16, 12, 21, 0.72); color: #fff4f8; font-size: 11px; font-weight: 700; }

/* 휴대폰 아래 고정 단추 */
.rl-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, rgba(16, 12, 21, 0.92) 40%); }
html body .rl-sticky a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; border-radius: 999px; background: linear-gradient(135deg, #f08fb4, #f4a07c); color: #2a1019 !important; -webkit-text-fill-color: #2a1019; font-size: 16.5px; font-weight: 800; text-decoration: none !important; box-shadow: 0 12px 28px rgba(240, 143, 180, 0.34); }

@media (max-width: 1000px) {
  .rl-intro { padding: 26px 0 0; }
  html body #input-section.goblin-input.reunion-input-shell.is-landing { margin: 28px 0 0 !important; gap: 40px; }
}
@media (max-width: 860px) {
  html body #input-section.goblin-input.reunion-input-shell.is-landing { grid-template-columns: minmax(0, 1fr); }
  .rl-aside { position: static; }
}
@media (max-width: 760px) {
  main.container:has(> #input-section.is-landing:not([hidden])) { padding-left: 16px; padding-right: 16px; }
  /* 소개는 작게: 글 옆에 작은 아치 그림, 질문 단추는 한 줄로 밀어 보기 */
  .rl-intro { grid-template-columns: minmax(0, 1fr) 92px; gap: 14px; align-items: start; padding: 16px 0 0; }
  .rl-intro-copy { display: contents; }
  .rl-kicker { grid-column: 1 / -1; margin-bottom: 10px !important; font-size: 10.5px; }
  .rl-intro h1 { grid-column: 1; font-size: 27px !important; line-height: 1.36 !important; }
  .rl-intro-art { grid-column: 2; grid-row: 2; }
  .rl-lead { grid-column: 1 / -1; margin-top: 12px !important; font-size: 14.5px; line-height: 1.7; }
  .rl-br { display: none; }
  /* 질문 단추는 옆으로 밀어 보지 않고 두 줄로 감싼다(오른쪽이 잘려 보이지 않게). */
  .rl-asks { grid-column: 1 / -1; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; padding: 0; overflow: visible; }
  .rl-asks button { font-size: 13px; padding: 8px 12px; white-space: nowrap; }
  .rl-badges { grid-column: 1 / -1; gap: 4px 12px; margin-top: 10px; }
  .rl-badges li { font-size: 12.5px; padding-left: 18px; }
  /* 결제 안내: 금액은 첫 줄, 나머지 둘은 둘째 줄 */
  html body #input-section.goblin-input.reunion-input-shell.is-landing .ri-trust [data-reunion-price] { flex-basis: 100%; text-align: center; }
  html body #input-section.goblin-input.reunion-input-shell.is-landing .ri-trust [data-reunion-price] + span::before { content: none; }
  .rl-intro-art span { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3); }
  html body #input-section.goblin-input.reunion-input-shell.is-landing { margin: 20px 0 0 !important; gap: 34px; }
  html body #input-section.goblin-input.reunion-input-shell.is-landing .ri-form { padding: 22px 18px 20px; border-radius: 20px; }
  html body #input-section.goblin-input.reunion-input-shell.is-landing .ri-form-title { font-size: 21px !important; margin-bottom: 16px !important; }
  html body #input-section.goblin-input.reunion-input-shell.is-landing .input-page-title { font-size: 18px !important; }
  html body #input-section.goblin-input.reunion-input-shell.is-landing .cal-toggle-option { font-size: 14px !important; }
  html body #input-section.goblin-input.reunion-input-shell.is-landing .date-picker select { padding: 10px 6px !important; }
  .rl-aside h2 { font-size: 22px !important; }
  .rl-aside-shot { width: min(280px, 86%); height: 360px; margin: 22px auto 0; }
  .rl-sticky:not([hidden]) { display: block; }
}
@media print { .rl-intro, .rl-aside, .rl-sticky { display: none !important; } }

/* 공통 머리 바탕을 재회 페이지 바탕과 같게(따로 떨어진 상자로 보이지 않게). 금색 강조는 그대로. */
html body.site-ui:has(#input-section.is-landing) #site-header.site-header { --header-paper: transparent; --header-panel: rgba(255, 233, 244, 0.06); --header-line: rgba(255, 233, 244, 0.10); }
html.theme-light body.site-ui:has(#input-section.is-landing) #site-header.site-header { --header-paper: transparent; --header-panel: rgba(70, 30, 50, 0.05); --header-line: rgba(70, 30, 50, 0.11); }

/* 결과·결제 화면으로 넘어가면 입력 카드는 반드시 숨긴다(위의 display 지정이 hidden을 덮지 않게). */
html body #input-section.goblin-input.reunion-input-shell.is-landing[hidden],
html body #input-section.goblin-input.reunion-input-shell[hidden] { display: none !important; }

/* 영어판(/en/reunion): 날짜 칸에 단위 글자가 없어 세 칸으로만 나누고, 옆 상자 끝에 '영어로 써 드려요' 한 줄. */
html body #input-section.goblin-input .date-picker[data-placeholders] { grid-template-columns: minmax(84px, 1.4fr) minmax(72px, 1fr) minmax(64px, 1fr); }
.rl-aside-lang { margin: 18px 0 0; font-size: 13px; line-height: 1.6; color: var(--rl-muted, inherit); }