/* 세종 놀이터 · 사주 페이지 틀 (머리말 · 입력 화면)
 * 결과·공유 화면 디자인은 saju-result.css (sj-, sjc-) 가 담당. 여기서는 그 클래스를 덮어쓰지 않는다.
 * 머리말 규칙은 playground.php 와 같은 값을 그대로 옮겨 왔다. */

:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; color: #16233a; background: #F3F5F9; }
button, input, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* 공통 머리말 (playground.php 와 동일) */
.global-header { position: sticky; z-index: 20; top: 0; display: flex; width: 100%; height: 68px; align-items: center; justify-content: space-between; padding: 0 max(24px, calc((100% - 1160px) / 2)); border-bottom: 1px solid #e4eaf2; background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); }
.global-brand { display: inline-flex; align-items: center; text-decoration: none; }
.global-brand img { display: block; width: 154px; height: auto; }
.global-links { display: flex; align-items: center; gap: 5px; }
.global-links a { padding: 9px 10px; border-radius: 8px; color: #5d6c84; font-size: 13px; font-weight: 800; text-decoration: none; }
.global-links a:hover, .global-links a.active { background: #eaf1ff; color: #185adb; }
.mobile-topbar { display: none; }
.site-footer { width: min(100% - 48px, 1160px); margin: 26px auto 0; }
@media (max-width: 820px) {
  .global-header { height: 58px; padding: 0 16px; }
  .global-brand img { width: 141px; }
  .global-links { display: none; }
  .mobile-topbar { display: inline-flex; align-items: center; gap: 7px; color: #50617a; font-size: 13px; font-weight: 800; }
}

/* 화면 틀 */
.sjp-shell { width: 100%; margin: 0 auto; padding: 0 0 12px; }
.sjp-view { display: none; }
.sjp-view.is-active { display: block; animation: sjp-reveal .25s ease both; }
@keyframes sjp-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sjp-view.is-active { animation: none; } }

.sjp-alert { width: min(100% - 32px, 620px); margin: 16px auto 0; padding: 12px 14px; border-radius: 12px; background: #FDECEA; color: #8F2A1F; font-size: 13px; font-weight: 700; line-height: 1.55; }
.sjp-alert--soft { width: 100%; margin: 0 0 14px; background: #FFF6DD; color: #7A5400; }

/* 입력 화면 */
#sj-view-input { width: min(100% - 32px, 620px); margin: 0 auto; padding: 28px 0 8px; font-family: 'IBM Plex Sans KR', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
#sj-view-input .sj-root { background: transparent; }
#sj-view-input .sj-root .sj-friend-banner { margin: 0 0 14px; }
.sjp-back { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; margin: 0 0 10px; color: #63728a; font-size: 14px; font-weight: 800; text-decoration: none; }
.sjp-back::before { content: "←"; font-size: 17px; }
.sjp-back:hover { color: #1a5ec8; }

.sjf-panel { padding: 31px; border: 1px solid #dfe6f0; border-radius: 24px; background: #fff; box-shadow: 0 15px 35px rgba(31, 52, 86, .07); }
.sjf-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 9px; color: #315380; font-size: 13px; font-weight: 800; }
.sjf-eyebrow::before { width: 8px; height: 8px; border-radius: 50%; background: #f1bd4d; content: ""; }
.sjf-panel h1 { margin: 0 0 9px; color: #142744; font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -.04em; }
.sjf-lead { margin: 0 0 24px; color: #687791; font-size: 14px; line-height: 1.65; }
.sjf-section { padding: 20px 0; border-top: 1px solid #edf1f5; }
.sjf-section:first-of-type { padding-top: 0; border-top: 0; }
.sjf-section h2 { margin: 0 0 13px; color: #263a59; font-size: 15px; font-weight: 700; }
.sjf-optional { font-weight: 600; color: #8490a3; }
.sjf-choice { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.sjf-choice label { position: relative; display: block; }
.sjf-choice input { position: absolute; opacity: 0; pointer-events: none; }
.sjf-choice span { display: block; padding: 13px 12px; border: 1px solid #dbe4ef; border-radius: 11px; color: #718097; font-size: 14px; font-weight: 700; text-align: center; transition: .15s; }
.sjf-choice input:checked + span { border-color: #1d64d2; background: #edf4ff; color: #195bc0; box-shadow: inset 0 0 0 1px #1d64d2; }
.sjf-choice input:focus-visible + span { outline: 3px solid rgba(52, 121, 222, .35); outline-offset: 2px; }
.sjf-grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 10px; }
.sjf-field { display: grid; gap: 8px; }
.sjf-field label { color: #52627b; font-size: 12px; font-weight: 700; }
.sjf-field input, .sjf-field select { width: 100%; min-height: 49px; padding: 0 13px; border: 1px solid #dbe4ef; border-radius: 11px; outline: 0; background: #fff; color: #21344f; font-size: 16px; }
.sjf-field input:focus, .sjf-field select:focus { border-color: #3479de; box-shadow: 0 0 0 3px rgba(52, 121, 222, .12); }
.sjf-help { margin: 0; color: #7a879b; font-size: 12px; line-height: 1.5; }
.sjf-check { display: flex; align-items: center; gap: 9px; margin-top: 11px; color: #687791; font-size: 13px; }
.sjf-check input { width: 18px; height: 18px; accent-color: #286bd5; }
.sjf-privacy { display: flex; gap: 10px; margin: 2px 0 20px; padding: 13px 14px; border-radius: 12px; background: #f5f8fc; color: #65758d; font-size: 12px; line-height: 1.6; }
.sjf-privacy b { color: #405878; }
.sjf-lock { color: #2467ca; font-size: 16px; }
.sjf-submit { width: 100%; min-height: 57px; border: 0; border-radius: 14px; background: #bc382d; color: #fff; font-size: 16px; font-weight: 700; box-shadow: 0 8px 17px rgba(179, 51, 42, .20); }
.sjf-submit:hover { background: #a92f27; }
.sjf-submit:disabled { cursor: not-allowed; opacity: .56; box-shadow: none; }
.sjf-error { min-height: 18px; margin: 12px 0 0; color: #c0392b; font-size: 13px; font-weight: 700; }

@media (max-width: 540px) {
  #sj-view-input { width: min(100% - 22px, 520px); padding-top: 18px; }
  .sjf-panel { padding: 22px 18px; border-radius: 20px; }
  .sjf-grid { grid-template-columns: 1fr 1fr; }
  .sjf-grid .sjf-field:first-child { grid-column: 1 / -1; }
}

/* 광고 (결과 중간 · 맨 아래). '광고' 표시, 버튼과 떨어지게 위아래 여백, 채워지지 않으면 숨김 */
.play-ad { margin: 10px 0; padding: 14px 0; border-top: 1px solid #e2e8f1; border-bottom: 1px solid #e2e8f1; text-align: center; min-width: 0; }
.play-ad-label { display: block; margin: 0 0 8px; color: #98a4b5; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.play-ad .adsbygoogle { width: 100%; }
.play-ad:has(ins[data-ad-status="unfilled"]) { display: none; }
.play-bottom-ad { width: min(100% - 32px, 760px); margin: 8px auto 0; }
.play-bottom-ad .detail-bottom-ad { margin-top: 18px; }