/* ==========================================================================
   GLOW99 SUPPORT (공지사항 · FAQ · 게시판) 공통 디자인 시스템 — 2026-09-12
   deep green #1c3527 · off-white #f4f9f6 · Pretendard · 1px border · 최소 shadow.
   모든 선택자 sp- 접두사. 외부 프레임워크(Bootstrap/jQuery/FontAwesome) 없음.
   ========================================================================== */
.sp{
  --g-900:#12261c; --g-800:#1c3527; --g-700:#244331; --g-600:#305d43; --g-500:#3a7355;
  --g-400:#6ea885; --g-300:#a7d3bd; --g-100:#e3eee7; --g-50:#f4f9f6;
  --ink:#15211b; --ink-2:#2c3830; --muted:#56625a; --muted-2:#6c786f;
  --paper:#fff; --bg:#f4f9f6; --line:#d9e4dd; --line-2:#c6d5cc;
  --radius:12px; --radius-sm:8px; --shadow-sm:0 1px 2px rgba(15,35,25,.05); --shadow:0 8px 24px rgba(15,35,25,.09);
  --wrap:1120px;
  --font-sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
.sp, .sp *, .sp *::before, .sp *::after{ box-sizing:border-box; }
body.sp{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-sans); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; word-break:keep-all; overflow-wrap:anywhere; }
.sp :where(h1,h2,h3,h4,p,ul,ol,li,figure){ margin:0; }
.sp :where(ul,ol){ padding:0; list-style:none; }
.sp :where(a){ color:inherit; text-decoration:none; }
.sp :where(button){ font:inherit; color:inherit; cursor:pointer; background:none; border:0; }
.sp [hidden]{ display:none !important; }
.sp :focus-visible{ outline:2px solid var(--g-600); outline-offset:2px; border-radius:4px; }
.sp-skip{ position:absolute; left:12px; top:-48px; z-index:200; padding:8px 14px; background:var(--g-800); color:#fff; border-radius:var(--radius-sm); }
.sp-skip:focus{ top:10px; }
.sp-wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:clamp(16px,4vw,32px); }
.sp-sr{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- Header / SUPPORT subnav ---------- */
.sp-header{ position:sticky; top:0; z-index:100; background:rgba(244,249,246,.94); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
.sp-header-inner{ display:flex; align-items:center; gap:16px; height:56px; }
.sp-logo{ display:inline-flex; align-items:center; gap:9px; flex:0 0 auto; }
.sp-logo-mark{ width:24px; height:24px; border-radius:6px; background:linear-gradient(145deg,var(--g-400),var(--g-600)); position:relative; }
.sp-logo-mark::after{ content:""; position:absolute; inset:7px; border-radius:50%; background:var(--g-50); }
.sp-logo-txt{ display:flex; flex-direction:column; line-height:1.05; }
.sp-logo-eyebrow{ font-family:var(--font-mono); font-size:9px; letter-spacing:.16em; color:var(--g-600); }
.sp-logo-name{ font-size:13.5px; font-weight:800; color:var(--g-800); letter-spacing:-.01em; }
.sp-subnav{ display:flex; align-items:center; gap:4px; margin-left:6px; }
.sp-subnav a{ padding:8px 14px; border-radius:999px; font-size:14px; font-weight:700; color:var(--muted); }
.sp-subnav a:hover{ color:var(--g-800); background:var(--g-100); }
.sp-subnav a[aria-current="page"]{ color:#fff; background:var(--g-800); }
.sp-header-right{ margin-left:auto; display:flex; gap:14px; }
.sp-header-right a{ font-size:13.5px; font-weight:600; color:var(--muted); white-space:nowrap; }
.sp-header-right a:hover{ color:var(--g-800); }

/* ---------- Hero ---------- */
.sp-main{ padding-bottom:72px; }
.sp-hero{ padding:40px 0 8px; }
.sp-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--g-600); }
.sp-eyebrow::before{ content:""; width:22px; height:1.5px; background:currentColor; opacity:.7; }
.sp-title{ margin-top:12px; font-size:clamp(26px,3.4vw,36px); font-weight:800; letter-spacing:-.03em; color:var(--g-900); }
.sp-lede{ margin-top:10px; font-size:16px; color:var(--muted); max-width:52ch; }

/* ---------- Search ---------- */
.sp-search{ margin-top:22px; display:flex; gap:8px; max-width:560px; }
.sp-search.sp-search--wide{ max-width:none; }
.sp-search-field{ position:relative; flex:1 1 auto; min-width:0; }
.sp-search-ico{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.5; pointer-events:none; }
.sp-search input{ width:100%; height:48px; padding:0 14px 0 40px; border:1px solid var(--line-2); border-radius:var(--radius); background:var(--paper); font-size:15px; color:var(--ink); }
.sp-search input::placeholder{ color:var(--muted-2); }
.sp-search input:focus{ border-color:var(--g-600); outline:none; box-shadow:0 0 0 3px rgba(48,93,67,.14); }
.sp-search button{ flex:0 0 auto; height:48px; padding:0 20px; border-radius:var(--radius); background:var(--g-800); color:#fff; font-size:14px; font-weight:700; }
.sp-search button:hover{ background:var(--g-700); }
.sp-resultline{ margin-top:14px; font-size:13.5px; color:var(--muted); }
.sp-resultline b{ color:var(--g-700); font-weight:800; }
.sp-resultline .sp-clear{ margin-left:10px; color:var(--g-600); font-weight:700; text-decoration:underline; text-underline-offset:3px; }

/* ---------- Editorial list (notice/board) ---------- */
.sp-list{ margin-top:22px; border-top:1px solid var(--line); }
.sp-item{ display:block; padding:20px 4px; border-bottom:1px solid var(--line); transition:background .12s; }
.sp-item:hover{ background:var(--paper); }
.sp-item-top{ display:flex; align-items:center; gap:8px; margin-bottom:7px; flex-wrap:wrap; }
.sp-badge{ font-size:11px; font-weight:800; letter-spacing:.02em; padding:2px 9px; border-radius:999px; background:var(--g-100); color:var(--g-700); }
.sp-badge--notice{ background:var(--g-800); color:#fff; }
.sp-item-title{ font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--g-900); line-height:1.35; }
.sp-item:hover .sp-item-title{ color:var(--g-700); }
.sp-item-excerpt{ margin-top:6px; font-size:14px; color:var(--muted); line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sp-item-meta{ margin-top:9px; display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted-2); flex-wrap:wrap; }
.sp-dot{ width:2.5px; height:2.5px; border-radius:50%; background:var(--line-2); }
.sp-thumb{ float:right; width:96px; height:66px; margin-left:16px; border-radius:var(--radius-sm); object-fit:cover; border:1px solid var(--line); }

/* ---------- FAQ accordion ---------- */
.sp-faq{ margin-top:22px; border-top:1px solid var(--line); }
.sp-faq-item{ border-bottom:1px solid var(--line); }
.sp-faq-q{ width:100%; display:flex; align-items:flex-start; gap:14px; padding:20px 4px; text-align:left; }
.sp-faq-q:hover{ background:var(--paper); }
.sp-faq-qmark{ flex:0 0 auto; font-family:var(--font-mono); font-weight:800; color:var(--g-500); font-size:15px; line-height:1.5; }
.sp-faq-qtext{ flex:1 1 auto; min-width:0; font-size:16px; font-weight:700; color:var(--g-900); letter-spacing:-.01em; line-height:1.5; }
.sp-faq-ico{ flex:0 0 auto; width:20px; height:20px; position:relative; margin-top:2px; }
.sp-faq-ico::before,.sp-faq-ico::after{ content:""; position:absolute; background:var(--g-600); border-radius:2px; transition:transform .18s ease,opacity .18s ease; }
.sp-faq-ico::before{ left:9px; top:2px; width:2px; height:16px; }
.sp-faq-ico::after{ left:2px; top:9px; width:16px; height:2px; }
.sp-faq-q[aria-expanded="true"] .sp-faq-ico::before{ transform:scaleY(0); opacity:0; }
.sp-faq-a{ max-height:0; overflow:hidden; transition:max-height .24s ease; }
.sp-faq-item[data-open="1"] .sp-faq-a{ max-height:4000px; }
.sp-faq-a-inner{ padding:0 4px 22px 40px; }
@media (prefers-reduced-motion:reduce){ .sp-faq-a{ transition:none; } }

/* ---------- Prose (본문/답변) ---------- */
.sp-prose{ font-size:15.5px; line-height:1.85; color:var(--ink-2); max-width:74ch; }
.sp-prose > *:first-child{ margin-top:0; }
.sp-prose p{ margin:0 0 1.05em; }
.sp-prose h2,.sp-prose h3,.sp-prose h4{ font-weight:800; color:var(--g-900); line-height:1.35; margin:1.7em 0 .6em; letter-spacing:-.01em; }
.sp-prose h2{ font-size:1.25em; } .sp-prose h3{ font-size:1.12em; } .sp-prose h4{ font-size:1.02em; }
.sp-prose ul,.sp-prose ol{ padding-left:1.3em; margin:.6em 0 1.2em; } .sp-prose ul{ list-style:disc; } .sp-prose ol{ list-style:decimal; }
.sp-prose li{ margin:.3em 0; }
.sp-prose a{ color:var(--g-600); text-decoration:underline; text-underline-offset:3px; } .sp-prose a:hover{ color:var(--g-700); }
.sp-prose blockquote{ margin:1.2em 0; padding:.8em 1.1em; border-left:3px solid var(--g-400); background:var(--g-50); border-radius:8px; color:var(--ink-2); }
.sp-prose img{ display:block; max-width:100%; height:auto; border-radius:var(--radius-sm); margin:1.2em 0; border:1px solid var(--line); }
.sp-prose hr{ border:0; height:1px; background:var(--line); margin:1.8em 0; }
.sp-prose code{ font-family:var(--font-mono); font-size:.9em; background:var(--g-50); padding:.1em .4em; border-radius:5px; }
.sp-prose table{ width:100%; border-collapse:collapse; margin:1.2em 0; font-size:.95em; }
.sp-prose th,.sp-prose td{ border:1px solid var(--line); padding:8px 10px; text-align:left; }
.sp-prose th{ background:var(--g-50); font-weight:700; }

/* ---------- Detail ---------- */
.sp-detail{ margin-top:8px; }
.sp-crumb{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); margin-bottom:14px; }
.sp-detail-head{ padding-bottom:20px; border-bottom:1px solid var(--line); }
.sp-detail-title{ margin-top:10px; font-size:clamp(22px,3vw,30px); font-weight:800; letter-spacing:-.03em; color:var(--g-900); line-height:1.3; }
.sp-detail-meta{ margin-top:12px; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted-2); flex-wrap:wrap; }
.sp-detail-body{ padding:26px 0 8px; }
.sp-detail-foot{ margin-top:26px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:center; }

/* ---------- Buttons ---------- */
.sp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 20px; border-radius:var(--radius-sm); font-size:14px; font-weight:700; border:1px solid var(--line-2); background:var(--paper); color:var(--g-800); }
.sp-btn:hover{ background:var(--g-50); border-color:var(--g-600); }
.sp-btn--primary{ background:var(--g-800); color:#fff; border-color:var(--g-800); }
.sp-btn--primary:hover{ background:var(--g-700); border-color:var(--g-700); }

/* ---------- Pagination ---------- */
.sp-pager{ margin-top:28px; display:flex; align-items:center; justify-content:center; gap:6px; }
.sp-pager a,.sp-pager span{ min-width:38px; height:38px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); font-size:14px; font-weight:700; border:1px solid var(--line); color:var(--ink-2); background:var(--paper); }
.sp-pager a:hover{ border-color:var(--g-600); color:var(--g-700); }
.sp-pager .is-current{ background:var(--g-800); color:#fff; border-color:var(--g-800); }
.sp-pager .is-disabled{ opacity:.4; pointer-events:none; }
.sp-pager .sp-pager-gap{ border:0; background:none; color:var(--muted-2); min-width:20px; }
.sp-pager-mobile{ display:none; align-items:center; justify-content:center; gap:14px; margin-top:28px; font-size:14px; font-weight:700; color:var(--ink-2); }

/* ---------- Empty / Error ---------- */
.sp-state{ margin-top:22px; padding:56px 24px; text-align:center; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); }
.sp-state-title{ font-size:16px; font-weight:800; color:var(--g-800); }
.sp-state-desc{ margin-top:8px; font-size:14px; color:var(--muted); }
.sp-state .sp-btn{ margin-top:18px; }
.sp-state--error{ border-color:rgba(176,120,20,.3); background:rgba(176,120,20,.06); }

/* ---------- Support CTA (FAQ 하단 등) ---------- */
.sp-cta{ margin-top:40px; padding:30px 32px; border:1px solid var(--line); border-top:3px solid var(--g-800); border-radius:var(--radius); background:var(--paper); }
.sp-cta h2{ font-size:19px; font-weight:800; color:var(--g-900); letter-spacing:-.02em; }
.sp-cta p{ margin-top:8px; font-size:14.5px; color:var(--muted); }
.sp-cta-info{ margin-top:18px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.sp-cta-info dt{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); font-weight:700; }
.sp-cta-info dd{ margin:5px 0 0; font-size:15px; font-weight:700; color:var(--g-800); }
.sp-cta-info dd small{ display:block; font-size:12px; font-weight:500; color:var(--muted); margin-top:2px; }

/* ---------- Footer ---------- */
.sp-foot{ margin-top:56px; padding:24px 0; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted-2); }

/* highlight (검색어 강조 — DOM 안전 생성) */
.sp-hl{ background:var(--g-300); color:var(--g-900); border-radius:3px; padding:0 1px; }

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .sp-cta-info{ grid-template-columns:minmax(0,1fr); gap:10px; }
}
@media (max-width:640px){
  .sp-header-inner{ height:auto; flex-wrap:wrap; padding-block:8px; gap:8px 12px; }
  .sp-header-right{ display:none; }
  .sp-subnav{ order:3; width:100%; margin-left:0; overflow-x:auto; }
  .sp-subnav a{ padding:7px 12px; font-size:13.5px; white-space:nowrap; }
  .sp-hero{ padding-top:26px; }
  .sp-search{ flex-direction:column; }
  .sp-search button{ width:100%; }
  .sp-thumb{ width:72px; height:52px; margin-left:10px; }
  .sp-pager{ display:none; }
  .sp-pager-mobile{ display:flex; }
  .sp-faq-a-inner{ padding-left:4px; }
}