/* ============================================================================
   onae-comingsoon.css — 준비 중 + 문의처 + 출시 알림 신청 모듈 스타일 v1.1.0
   ----------------------------------------------------------------------------
   위치(정본) : 0.core-info/22.book-module/14.design-mo/onae-comingsoon.css
   작성       : 2026-07-31 (관제센터 세션 · 회장님 지시)
   짝 파일    : onae-comingsoon.js (자기주입 IIFE)

   ■ 왜 만들었나 (사실만)
     2026-07-31 PG사 심사에서 "사이트 준비가 덜 됐다"는 사유로 리젝됐다.
     그래서 전 사이트의 결제 진입을 닫고 "준비 중"으로 통일한다.
     결제 코드는 지우지 않는다 — 앞단에 게이트만 세운다. 나중에 그대로 다시 연다.

   ■ 적용 (사이트에서 세 줄)
       <link rel="stylesheet" href="/assets/onae-comingsoon.css">
       <script>window.ONAE_CS_CONFIG={site:"<사이트키>",contact:"...",privacy:"/privacy.html"};</script>
       <script src="/assets/onae-comingsoon.js" defer></script>

   ■ 안전장치 (onae-theme.css / onae-support.css 와 완전히 동일한 원칙)
     - 모든 규칙이 `html.onae-cs` 아래에만 있다. <link> 만 걸면 화면이 안 바뀐다.
       onae-comingsoon.js 가 로드되면서 html 에 .onae-cs 를 붙일 때 비로소 켜진다.
       = <script> 한 줄이 켜고 끄는 스위치. 지우면 즉시 100% 원상복구.
     - 클래스 접두사는 전부 `onae-cs-`. 기존 사이트 CSS 와 이름이 겹칠 수 없다.
     - 사이트 요소를 하나도 칠하지 않는다. 이 파일이 칠하는 것은
       이 모듈이 직접 만든 DOM(.onae-cs-root / .onae-cs-banner)뿐이다.
       ★ 차단된 결제 버튼의 겉모습은 건드리지 않는다(사이트 디자인 훼손 방지).
     - !important 는 print 숨김 1곳에만 쓴다.

   ■ 자리 (겹침 방지 — 이게 중요하다)
       좌하단  .onae-switcher   (onae-theme.js 테마·언어 위젯)  z-index 2147483000
       우하단  .onae-sup-root   (onae-support.js 고객지원 버튼) z-index 2147482900
       ↓ 이 모듈은 둘 중 어느 자리도 쓰지 않는다.
       화면 중앙 모달 .onae-cs-root                              z-index 2147483400
       상단 얇은 띠  .onae-cs-banner                             z-index 2147482800
     모달은 두 위젯보다 위(2147483400)에 둔다 — 결제 차단 안내는 무조건 보여야 한다.
     배너는 두 위젯보다 아래(2147482800)에 둔다 — 항상 떠 있는 띠가 위젯을 가리면 안 된다.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. 모달 바깥막 — 화면 중앙. 좌하단·우하단 위젯과 자리가 겹치지 않는다.
--------------------------------------------------------------------------- */
html.onae-cs .onae-cs-root{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483400;
  background: rgba(15, 23, 42, .55);
  padding: 16px;
  font-family: var(--font-sans, -apple-system, "Malgun Gothic", system-ui, sans-serif);
  word-break: keep-all;
  overflow-wrap: anywhere;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
html.onae-cs .onae-cs-root.is-open{
  display: flex;
  align-items: center;
  justify-content: center;
}
html.onae-cs .onae-cs-root *{ box-sizing: border-box; }

/* 모달이 열려 있는 동안 뒷 배경 스크롤 잠금 */
html.onae-cs-lock, html.onae-cs-lock body{ overflow: hidden; }

/* ---------------------------------------------------------------------------
   1. 패널 본체
--------------------------------------------------------------------------- */
html.onae-cs .onae-cs-panel{
  width: 420px;
  max-width: 100%;
  max-height: min(88vh, 720px);
  overflow-y: auto;
  padding: 20px;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, .12);
  background: #FFFFFF;
  color: #334155;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .28);
  text-align: left;
  animation: onae-cs-pop .18s ease-out;
}
@keyframes onae-cs-pop{
  from{ opacity: 0; transform: translateY(8px) scale(.98); }
  to  { opacity: 1; transform: none; }
}

html.onae-cs .onae-cs-head{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin: 0 0 12px;
}
html.onae-cs .onae-cs-title{
  margin: 0; font-size: 18px; font-weight: 800; line-height: 1.35; color: #0F172A;
}
html.onae-cs .onae-cs-close{
  flex: 0 0 auto;
  min-width: 44px; min-height: 44px;
  margin: -8px -8px 0 0;
  border: 0; background: transparent; color: #64748B;
  font-size: 20px; line-height: 1; cursor: pointer; border-radius: 12px;
}
html.onae-cs .onae-cs-close:hover{ background: #F1F5F9; color: #0F172A; }
html.onae-cs .onae-cs-close:focus-visible{ outline: 3px solid #2E5FD0; outline-offset: 2px; }

/* 스크린리더 전용 */
html.onae-cs .onae-cs-sr{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------
   2. 본문 안내
--------------------------------------------------------------------------- */
html.onae-cs .onae-cs-body{
  margin: 0 0 14px; font-size: 14px; line-height: 1.72; color: #475569;
}
html.onae-cs .onae-cs-body + .onae-cs-body{ margin-top: -6px; }

html.onae-cs .onae-cs-contact{
  margin: 0 0 14px; padding: 11px 13px;
  border-radius: 12px; background: #F1F5F9;
  font-size: 13.5px; line-height: 1.6; color: #334155;
}
html.onae-cs .onae-cs-contact a{ color: #143A6B; font-weight: 700; }

/* ---------------------------------------------------------------------------
   3. 출시 알림 신청 폼
--------------------------------------------------------------------------- */
html.onae-cs .onae-cs-formwrap{
  margin: 0; padding: 14px 0 0; border-top: 1px solid #EEF1F5;
}
html.onae-cs .onae-cs-subtitle{
  margin: 0 0 8px; font-size: 14.5px; font-weight: 800; color: #0F172A; line-height: 1.4;
}
html.onae-cs .onae-cs-form{ margin: 0; }

html.onae-cs .onae-cs-label{
  display: block; margin: 0 0 5px; font-size: 12.5px; font-weight: 700; color: #475569;
}
html.onae-cs .onae-cs-input{
  width: 100%; min-height: 46px;
  padding: 0 12px; margin: 0 0 10px;
  border-radius: 12px; border: 1.5px solid #E2E5EB;
  background: #F7F8FA; color: #0F172A;
  font-size: 15px; font-family: inherit;
}
html.onae-cs .onae-cs-input::placeholder{ color: #94A3B8; }
html.onae-cs .onae-cs-input:focus-visible{
  outline: 3px solid #2E5FD0; outline-offset: 1px; background: #FFFFFF;
}

/* 봇 함정 — 사람 눈에는 안 보이지만 display:none 은 쓰지 않는다(봇이 알아챈다) */
html.onae-cs .onae-cs-hp{
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

html.onae-cs .onae-cs-consent{
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 10px; font-size: 12.5px; line-height: 1.62; color: #475569; cursor: pointer;
}
html.onae-cs .onae-cs-consent input{
  flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: #143A6B;
}

html.onae-cs .onae-cs-privacy{
  margin: 0 0 12px; padding: 10px 12px;
  border-radius: 10px; background: #F7F8FA;
  font-size: 11.5px; line-height: 1.68; color: #64748B;
}
html.onae-cs .onae-cs-privacy a{ color: #143A6B; }

html.onae-cs .onae-cs-submit{
  width: 100%; min-height: 48px;
  border: 0; border-radius: 12px;
  background: #143A6B; color: #FFFFFF;
  font-size: 15px; font-weight: 800; font-family: inherit; cursor: pointer;
  transition: background-color .15s ease;
}
html.onae-cs .onae-cs-submit:hover{ background: #1A4A85; }
html.onae-cs .onae-cs-submit:focus-visible{ outline: 3px solid #2E5FD0; outline-offset: 2px; }
html.onae-cs .onae-cs-submit[disabled]{ opacity: .6; cursor: progress; }
/* 전송 중 — 두 번 눌러도 두 번 안 가게 js 가 disabled + aria-busy 를 건다 */
html.onae-cs .onae-cs-submit[aria-busy="true"]{ opacity: .6; cursor: progress; }

html.onae-cs .onae-cs-msg{
  margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: #64748B; min-height: 1em;
}
html.onae-cs .onae-cs-msg.is-ok{ color: #0F766E; font-weight: 700; }
html.onae-cs .onae-cs-msg.is-err{ color: #B91C1C; font-weight: 700; }
html.onae-cs .onae-cs-msg a{ color: #143A6B; }

html.onae-cs .onae-cs-foot{
  margin: 10px 0 0; font-size: 11.5px; line-height: 1.6; color: #94A3B8;
}
html.onae-cs .onae-cs-foot a{ color: #64748B; }

/* ---------------------------------------------------------------------------
   4. 상시 배너 (banner:true 일 때만 만들어진다)
--------------------------------------------------------------------------- */
html.onae-cs .onae-cs-banner{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 2147482800;
  min-height: 34px;
  padding: 7px 44px 7px 14px;
  background: #143A6B; color: #FFFFFF;
  font-family: var(--font-sans, -apple-system, "Malgun Gothic", system-ui, sans-serif);
  font-size: 12.5px; line-height: 1.5; font-weight: 600;
  text-align: center;
  word-break: keep-all;
  box-shadow: 0 1px 6px rgba(15, 23, 42, .18);
}
html.onae-cs .onae-cs-banner a{ color: #FFFFFF; text-decoration: underline; }
html.onae-cs .onae-cs-banner-x{
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  min-width: 40px; min-height: 34px;
  border: 0; background: transparent; color: #FFFFFF;
  font-size: 16px; line-height: 1; cursor: pointer; border-radius: 8px; opacity: .82;
}
html.onae-cs .onae-cs-banner-x:hover{ opacity: 1; background: rgba(255, 255, 255, .16); }
html.onae-cs .onae-cs-banner-x:focus-visible{ outline: 3px solid #FFFFFF; outline-offset: -3px; }

/* 배너가 켜졌을 때만 본문을 아래로 민다(js 가 html 에 클래스를 붙인다) */
html.onae-cs-hasbanner body{ padding-top: 34px; }

/* ---------------------------------------------------------------------------
   5. 테마 3종 — 기본 / contrast / cute
--------------------------------------------------------------------------- */
html.onae-cs[data-onae-theme="contrast"] .onae-cs-root{ background: rgba(2, 8, 20, .72); }
html.onae-cs[data-onae-theme="contrast"] .onae-cs-panel{
  background: #151F30; color: #DCE5F0; border-color: #2B3A52;
}
html.onae-cs[data-onae-theme="contrast"] .onae-cs-title{ color: #F1F6FB; }
html.onae-cs[data-onae-theme="contrast"] .onae-cs-subtitle{ color: #F1F6FB; }
html.onae-cs[data-onae-theme="contrast"] .onae-cs-body,
html.onae-cs[data-onae-theme="contrast"] .onae-cs-consent{ color: #C3D2E4; }
html.onae-cs[data-onae-theme="contrast"] .onae-cs-contact,
html.onae-cs[data-onae-theme="contrast"] .onae-cs-privacy{
  background: #1D2A3F; color: #C3D2E4;
}
html.onae-cs[data-onae-theme="contrast"] .onae-cs-formwrap{ border-color: #2B3A52; }
html.onae-cs[data-onae-theme="contrast"] .onae-cs-input{
  background: #1D2A3F; color: #F1F6FB; border-color: #2B3A52;
}
html.onae-cs[data-onae-theme="contrast"] .onae-cs-submit{ background: #3FD9C0; color: #06231E; }
html.onae-cs[data-onae-theme="contrast"] .onae-cs-submit:hover{ background: #57E6D0; }
html.onae-cs[data-onae-theme="contrast"] .onae-cs-close:hover{ background: #1D2A3F; color: #F1F6FB; }
html.onae-cs[data-onae-theme="contrast"] .onae-cs-contact a,
html.onae-cs[data-onae-theme="contrast"] .onae-cs-privacy a,
html.onae-cs[data-onae-theme="contrast"] .onae-cs-msg a,
html.onae-cs[data-onae-theme="contrast"] .onae-cs-foot a{ color: #7BE9D6; }
html.onae-cs[data-onae-theme="contrast"] .onae-cs-msg.is-ok{ color: #7BE9D6; }
html.onae-cs[data-onae-theme="contrast"] .onae-cs-msg.is-err{ color: #FFB4B4; }
html.onae-cs[data-onae-theme="contrast"] .onae-cs-banner{ background: #3FD9C0; color: #06231E; }
html.onae-cs[data-onae-theme="contrast"] .onae-cs-banner a{ color: #06231E; }
html.onae-cs[data-onae-theme="contrast"] .onae-cs-banner-x{ color: #06231E; }

html.onae-cs[data-onae-theme="cute"] .onae-cs-root{ background: rgba(74, 58, 69, .48); }
html.onae-cs[data-onae-theme="cute"] .onae-cs-panel{
  background: #FFFFFF; color: #5B4A57; border-color: #F6DCE8; border-radius: 24px;
}
html.onae-cs[data-onae-theme="cute"] .onae-cs-title,
html.onae-cs[data-onae-theme="cute"] .onae-cs-subtitle{ color: #4A3A45; }
html.onae-cs[data-onae-theme="cute"] .onae-cs-contact,
html.onae-cs[data-onae-theme="cute"] .onae-cs-privacy{ background: #FDE7F0; color: #7A5C6B; }
html.onae-cs[data-onae-theme="cute"] .onae-cs-formwrap{ border-color: #F6DCE8; }
html.onae-cs[data-onae-theme="cute"] .onae-cs-input{ border-color: #F6DCE8; border-radius: 16px; }
html.onae-cs[data-onae-theme="cute"] .onae-cs-submit{ background: #E8548E; border-radius: 16px; }
html.onae-cs[data-onae-theme="cute"] .onae-cs-submit:hover{ background: #F0699F; }
html.onae-cs[data-onae-theme="cute"] .onae-cs-consent input{ accent-color: #E8548E; }
html.onae-cs[data-onae-theme="cute"] .onae-cs-contact a,
html.onae-cs[data-onae-theme="cute"] .onae-cs-privacy a,
html.onae-cs[data-onae-theme="cute"] .onae-cs-msg a,
html.onae-cs[data-onae-theme="cute"] .onae-cs-foot a{ color: #CE3F77; }
html.onae-cs[data-onae-theme="cute"] .onae-cs-banner{ background: #E8548E; }

/* ---------------------------------------------------------------------------
   6. 모바일 — 패널 전체 폭, 터치 영역 44px 이상
--------------------------------------------------------------------------- */
@media (max-width: 480px){
  html.onae-cs .onae-cs-root{
    padding: 0;
    align-items: flex-end;
  }
  html.onae-cs .onae-cs-root.is-open{ align-items: flex-end; }
  html.onae-cs .onae-cs-panel{
    width: 100%; max-width: none;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  }
  html.onae-cs .onae-cs-title{ font-size: 17px; }
  html.onae-cs .onae-cs-input,
  html.onae-cs .onae-cs-submit{ min-height: 48px; font-size: 16px; }
  html.onae-cs .onae-cs-banner{ font-size: 12px; padding: 8px 44px 8px 12px; }
}

/* ---------------------------------------------------------------------------
   7. 접근성·인쇄
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html.onae-cs .onae-cs-panel{ animation: none; }
  html.onae-cs .onae-cs-submit{ transition: none; }
}
@media print{
  html.onae-cs .onae-cs-root,
  html.onae-cs .onae-cs-banner{ display: none !important; }
  html.onae-cs-hasbanner body{ padding-top: 0; }
}