/* ============================================================================
   onae-support.css — 고객지원(도움말·FAQ·문의) 위젯 스타일 v1.0.0
   ----------------------------------------------------------------------------
   위치(정본) : 0.core-info/22.book-module/14.design-mo/onae-support.css
   작성       : 2026-07-31 (관제센터 세션 · 회장님 지시)
   짝 파일    : onae-support.js (자기주입 IIFE) / onae-faq.<사이트키>.js (FAQ 데이터)

   ■ 적용 (사이트에서 딱 두 줄, FAQ 데이터까지 세 줄)
       <link rel="stylesheet" href="/assets/onae-support.css">
       <script src="/assets/onae-faq.<사이트키>.js" defer></script>   <!-- 선택 -->
       <script src="/assets/onae-support.js" defer data-site-key="<사이트키>"></script>

   ■ 안전장치 (onae-responsive.css / onae-theme.css 와 완전히 동일한 원칙)
     - 모든 규칙이 `html.onae-sup` 아래에만 있다. <link> 만 걸면 아무 것도 안 바뀐다.
       onae-support.js 가 로드되면서 html 에 .onae-sup 를 붙일 때 비로소 적용된다.
       = <script> 한 줄이 켜고 끄는 스위치. 지우면 즉시 원상복구.
     - 클래스 접두사는 전부 `onae-sup-`. 기존 사이트 CSS 와 이름이 겹칠 수 없다.
     - 사이트 요소를 하나도 건드리지 않는다. 이 파일이 칠하는 것은
       이 모듈이 직접 만든 DOM(.onae-sup-root 안쪽)뿐이다.
     - !important 는 print 숨김 1곳에만 쓴다(인쇄 시 위젯이 종이에 찍히는 것 방지).

   ■ 자리
     우하단. 좌하단은 onae-theme.js 의 전환 위젯(.onae-switcher) 자리다.
     z-index 2147482900 — 전환 위젯(2147483000)보다 한 단계 아래로 둬서
     둘이 동시에 열려도 전환 위젯이 항상 위로 온다.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. 컨테이너 — 화면 오른쪽 아래 고정
--------------------------------------------------------------------------- */
html.onae-sup .onae-sup-root{
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 2147482900;
  font-family: var(--font-sans, -apple-system, "Malgun Gothic", system-ui, sans-serif);
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
html.onae-sup .onae-sup-root *{ box-sizing: border-box; }

/* ---------------------------------------------------------------------------
   1. 도움말 버튼 (FAB) — 최소 44px 이상(모바일 터치 기준)
--------------------------------------------------------------------------- */
html.onae-sup .onae-sup-fab{
  min-width: 48px; min-height: 48px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.14);
  background: #143A6B; color: #FFFFFF;
  font-size: 14px; font-weight: 700; line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15,23,42,.20);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: transform .18s ease, background-color .15s ease;
}
html.onae-sup .onae-sup-fab:hover{ transform: scale(1.05); background: #1A4A85; }
html.onae-sup .onae-sup-fab:focus-visible{ outline: 3px solid #2E5FD0; outline-offset: 2px; }
html.onae-sup .onae-sup-fab-icon{ font-size: 17px; line-height: 1; }

/* ---------------------------------------------------------------------------
   2. 패널
--------------------------------------------------------------------------- */
html.onae-sup .onae-sup-panel{
  display: none;
  width: 344px; max-width: calc(100vw - 24px);
  max-height: min(72vh, 560px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.12);
  background: #FFFFFF; color: #334155;
  box-shadow: 0 12px 34px rgba(15,23,42,.22);
  text-align: left;
}
html.onae-sup .onae-sup-root.is-open .onae-sup-panel{ display: block; }

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

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

/* ---------------------------------------------------------------------------
   3. FAQ 검색
--------------------------------------------------------------------------- */
html.onae-sup .onae-sup-search{
  width: 100%; min-height: 44px;
  padding: 0 12px; margin: 0 0 10px;
  border-radius: 12px; border: 1.5px solid #E2E5EB;
  background: #F7F8FA; color: #0F172A;
  font-size: 14px; font-family: inherit;
}
html.onae-sup .onae-sup-search::placeholder{ color: #94A3B8; }
html.onae-sup .onae-sup-search:focus-visible{
  outline: 3px solid #2E5FD0; outline-offset: 1px; background: #FFFFFF;
}

html.onae-sup .onae-sup-count{
  margin: 0 0 8px; font-size: 11.5px; color: #94A3B8; line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   4. FAQ 아코디언
--------------------------------------------------------------------------- */
html.onae-sup .onae-sup-list{
  list-style: none; margin: 0 0 12px; padding: 0;
  border-top: 1px solid #EEF1F5;
}
html.onae-sup .onae-sup-item{ border-bottom: 1px solid #EEF1F5; }
html.onae-sup .onae-sup-item[hidden]{ display: none; }

html.onae-sup .onae-sup-q{
  width: 100%; min-height: 44px;
  padding: 10px 26px 10px 2px;
  border: 0; background: transparent; color: #1E293B;
  font-size: 13.5px; font-weight: 700; font-family: inherit; line-height: 1.5;
  text-align: left; cursor: pointer; position: relative;
}
html.onae-sup .onae-sup-q:hover{ color: #143A6B; }
html.onae-sup .onae-sup-q:focus-visible{ outline: 3px solid #2E5FD0; outline-offset: -2px; }
html.onae-sup .onae-sup-q::after{
  content: "+";
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 15px; font-weight: 700; color: #94A3B8;
}
html.onae-sup .onae-sup-q[aria-expanded="true"]::after{ content: "\2212"; color: #143A6B; }

html.onae-sup .onae-sup-a{
  padding: 0 2px 12px;
  font-size: 13px; line-height: 1.68; color: #475569;
}
html.onae-sup .onae-sup-a[hidden]{ display: none; }
html.onae-sup .onae-sup-a p{ margin: 0 0 6px; }
html.onae-sup .onae-sup-a p:last-child{ margin-bottom: 0; }
html.onae-sup .onae-sup-a a{ color: #1A4A85; text-decoration: underline; }

html.onae-sup .onae-sup-empty{
  margin: 0 0 12px; padding: 14px 2px;
  font-size: 13px; color: #94A3B8; line-height: 1.6;
}
html.onae-sup .onae-sup-empty[hidden]{ display: none; }

/* ---------------------------------------------------------------------------
   5. 문의 폼
--------------------------------------------------------------------------- */
html.onae-sup .onae-sup-formwrap{
  border-top: 1px solid #EEF1F5;
  padding-top: 12px;
}
html.onae-sup .onae-sup-formwrap.is-only{ border-top: 0; padding-top: 0; }

html.onae-sup .onae-sup-subtitle{
  margin: 0 0 4px; font-size: 13px; font-weight: 800; color: #0F172A; line-height: 1.4;
}
html.onae-sup .onae-sup-sla{
  margin: 0 0 10px;
  padding: 7px 10px;
  border-radius: 10px;
  background: #EAF0FA; color: #0E2A50;
  font-size: 12px; font-weight: 700; line-height: 1.5;
}
html.onae-sup .onae-sup-field{ margin: 0 0 8px; }
html.onae-sup .onae-sup-label{
  display: block; margin: 0 0 4px;
  font-size: 11.5px; font-weight: 700; color: #64748B; line-height: 1.4;
}
html.onae-sup .onae-sup-req{ color: #C0392B; }

html.onae-sup .onae-sup-input,
html.onae-sup .onae-sup-select,
html.onae-sup .onae-sup-textarea{
  width: 100%; min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px; border: 1.5px solid #E2E5EB;
  background: #FFFFFF; color: #0F172A;
  font-size: 14px; font-family: inherit; line-height: 1.5;
}
html.onae-sup .onae-sup-textarea{ min-height: 92px; resize: vertical; }
html.onae-sup .onae-sup-input:focus-visible,
html.onae-sup .onae-sup-select:focus-visible,
html.onae-sup .onae-sup-textarea:focus-visible{
  outline: 3px solid #2E5FD0; outline-offset: 1px;
}
html.onae-sup .onae-sup-hp{
  position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;
}

html.onae-sup .onae-sup-consent{
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 8px;
  font-size: 11.5px; line-height: 1.6; color: #64748B;
}
html.onae-sup .onae-sup-consent input{
  width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto;
}
html.onae-sup .onae-sup-privacy{
  margin: 0 0 10px; font-size: 11px; line-height: 1.6; color: #94A3B8;
}
html.onae-sup .onae-sup-privacy a{ color: #1A4A85; text-decoration: underline; }

html.onae-sup .onae-sup-submit{
  width: 100%; min-height: 46px;
  border-radius: 12px; border: 0;
  background: #143A6B; color: #FFFFFF;
  font-size: 14px; font-weight: 800; font-family: inherit; line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease;
}
html.onae-sup .onae-sup-submit:hover{ background: #1A4A85; }
html.onae-sup .onae-sup-submit:focus-visible{ outline: 3px solid #2E5FD0; outline-offset: 2px; }
html.onae-sup .onae-sup-submit[disabled]{ background: #94A3B8; cursor: default; }

html.onae-sup .onae-sup-msg{
  margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: #64748B;
}
html.onae-sup .onae-sup-msg.is-ok{ color: #15803D; font-weight: 700; }
html.onae-sup .onae-sup-msg.is-err{ color: #C0392B; font-weight: 700; }
html.onae-sup .onae-sup-msg a{ color: #1A4A85; text-decoration: underline; }

html.onae-sup .onae-sup-foot{
  margin: 10px 0 0; font-size: 11px; line-height: 1.6; color: #94A3B8;
}
html.onae-sup .onae-sup-foot a{ color: #1A4A85; text-decoration: underline; }

/* ---------------------------------------------------------------------------
   6. 테마 3종 대응 — 선택자는 onae-theme.css 와 동일 규격
--------------------------------------------------------------------------- */
html.onae-sup[data-onae-theme="contrast"] .onae-sup-fab{
  background: #3FD9C0; color: #06231E; border-color: #2B3A52;
}
html.onae-sup[data-onae-theme="contrast"] .onae-sup-fab:hover{ background: #57E6D0; }
html.onae-sup[data-onae-theme="contrast"] .onae-sup-panel{
  background: #151F30; color: #DCE5F0; border-color: #2B3A52;
}
html.onae-sup[data-onae-theme="contrast"] .onae-sup-title,
html.onae-sup[data-onae-theme="contrast"] .onae-sup-subtitle,
html.onae-sup[data-onae-theme="contrast"] .onae-sup-q{ color: #F1F6FB; }
html.onae-sup[data-onae-theme="contrast"] .onae-sup-a,
html.onae-sup[data-onae-theme="contrast"] .onae-sup-consent{ color: #C3D2E4; }
html.onae-sup[data-onae-theme="contrast"] .onae-sup-list,
html.onae-sup[data-onae-theme="contrast"] .onae-sup-item,
html.onae-sup[data-onae-theme="contrast"] .onae-sup-formwrap{ border-color: #2B3A52; }
html.onae-sup[data-onae-theme="contrast"] .onae-sup-search,
html.onae-sup[data-onae-theme="contrast"] .onae-sup-input,
html.onae-sup[data-onae-theme="contrast"] .onae-sup-select,
html.onae-sup[data-onae-theme="contrast"] .onae-sup-textarea{
  background: #1D2A3F; color: #F1F6FB; border-color: #2B3A52;
}
html.onae-sup[data-onae-theme="contrast"] .onae-sup-sla{
  background: #12312C; color: #7BE9D6;
}
html.onae-sup[data-onae-theme="contrast"] .onae-sup-submit{
  background: #3FD9C0; color: #06231E;
}
html.onae-sup[data-onae-theme="contrast"] .onae-sup-close:hover{
  background: #1D2A3F; color: #F1F6FB;
}
html.onae-sup[data-onae-theme="contrast"] .onae-sup-a a,
html.onae-sup[data-onae-theme="contrast"] .onae-sup-privacy a,
html.onae-sup[data-onae-theme="contrast"] .onae-sup-foot a,
html.onae-sup[data-onae-theme="contrast"] .onae-sup-msg a{ color: #7BE9D6; }
html.onae-sup[data-onae-theme="contrast"] .onae-sup-msg.is-ok{ color: #7BE9D6; }

html.onae-sup[data-onae-theme="cute"] .onae-sup-fab{
  background: #E8548E; color: #FFFFFF; border-color: #F6DCE8;
}
html.onae-sup[data-onae-theme="cute"] .onae-sup-fab:hover{ background: #F0699F; }
html.onae-sup[data-onae-theme="cute"] .onae-sup-panel{
  background: #FFFFFF; color: #5B4A57; border-color: #F6DCE8; border-radius: 22px;
}
html.onae-sup[data-onae-theme="cute"] .onae-sup-title,
html.onae-sup[data-onae-theme="cute"] .onae-sup-subtitle,
html.onae-sup[data-onae-theme="cute"] .onae-sup-q{ color: #4A3A45; }
html.onae-sup[data-onae-theme="cute"] .onae-sup-list,
html.onae-sup[data-onae-theme="cute"] .onae-sup-item,
html.onae-sup[data-onae-theme="cute"] .onae-sup-formwrap{ border-color: #F6DCE8; }
html.onae-sup[data-onae-theme="cute"] .onae-sup-search,
html.onae-sup[data-onae-theme="cute"] .onae-sup-input,
html.onae-sup[data-onae-theme="cute"] .onae-sup-select,
html.onae-sup[data-onae-theme="cute"] .onae-sup-textarea{
  border-color: #F6DCE8; border-radius: 16px;
}
html.onae-sup[data-onae-theme="cute"] .onae-sup-sla{
  background: #FDE7F0; color: #CE3F77;
}
html.onae-sup[data-onae-theme="cute"] .onae-sup-submit{
  background: #E8548E; border-radius: 16px;
}
html.onae-sup[data-onae-theme="cute"] .onae-sup-submit:hover{ background: #F0699F; }
html.onae-sup[data-onae-theme="cute"] .onae-sup-q[aria-expanded="true"]::after{ color: #E8548E; }
html.onae-sup[data-onae-theme="cute"] .onae-sup-a a,
html.onae-sup[data-onae-theme="cute"] .onae-sup-privacy a,
html.onae-sup[data-onae-theme="cute"] .onae-sup-foot a,
html.onae-sup[data-onae-theme="cute"] .onae-sup-msg a{ color: #CE3F77; }

/* ---------------------------------------------------------------------------
   7. 모바일 — 패널 전체 폭, 터치 영역 44px 이상
--------------------------------------------------------------------------- */
@media (max-width: 480px){
  html.onae-sup .onae-sup-root{
    left: max(12px, env(safe-area-inset-left));
    align-items: stretch;
  }
  html.onae-sup .onae-sup-panel{
    width: 100%; max-width: none;
    max-height: min(76vh, 620px);
    border-radius: 18px;
  }
  html.onae-sup .onae-sup-fab{
    align-self: flex-end;
    min-height: 52px; min-width: 52px;
  }
  html.onae-sup .onae-sup-q{ min-height: 48px; font-size: 14px; }
  html.onae-sup .onae-sup-search,
  html.onae-sup .onae-sup-input,
  html.onae-sup .onae-sup-select,
  html.onae-sup .onae-sup-textarea{
    font-size: 16px;   /* iOS 사파리 자동 확대 방지 임계값 */
    min-height: 48px;
  }
  html.onae-sup .onae-sup-textarea{ min-height: 96px; }
  html.onae-sup .onae-sup-submit{ min-height: 50px; }
}

/* 좁고 낮은 화면(가로 모드 폰)에서 패널이 화면을 넘지 않게 */
@media (max-height: 520px){
  html.onae-sup .onae-sup-panel{ max-height: 78vh; }
}

/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce){
  html.onae-sup .onae-sup-fab{ transition: none; }
  html.onae-sup .onae-sup-fab:hover{ transform: none; }
}

/* 인쇄물에는 위젯이 찍히지 않게 */
@media print{
  html.onae-sup .onae-sup-root{ display: none !important; }
}