/* ============================================================
   이용약관·개인정보처리방침 (snspang terms)
   ------------------------------------------------------------
   snspang 의 <style> 블록을 «순서 그대로» 이어 붙인 것이다.
   ⚠ 규칙 단위로 쪼개서 옮기면 안 된다. @media 안에 있던 규칙이
     밖으로 튀어나와 모바일 규칙이 데스크톱에도 걸린다 — 실제로 그렇게 깨졌다.
   ⚠ 화면마다 «한 파일»만 싣는다(x-layout 의 css 속성). 그래서 이 파일도
     머리줄·꼬리말 같은 공통 규칙을 스스로 갖고 있다. 합치지 말 것 —
     .trust 처럼 같은 이름이 화면마다 다른 뜻인 것이 있다.
   ============================================================ */


/* 웹폰트는 shell.css 한 벌로 옮겼다 (2026-09-16) — 일곱 벌 복사돼 있던 것이다 */


  /* 기본값·리셋(:root·*·body·a·img·.wrap·머리띠)은 shell.css 한 벌로 옮겼다 (2026-09-16) */
  /* 머리줄(로고줄·메뉴줄·검색) 규칙은 shell.css 한 벌로 옮겼다 (2026-09-16) */
  /* 메가 드롭다운(패널·카드·프로모) 규칙은 shell.css 한 벌로 옮겼다 (2026-09-16) */

  /* ===== 고객센터 ===== */
  .cshero{background:linear-gradient(120deg,#fff,#eef4ff);border-bottom:1px solid var(--line);padding:30px 0;cursor:default;}
  .cshero h1{font-size:26px;font-weight:900;letter-spacing:-.04em;color:#191c20;}
  .cshero p{font-size:14px;color:#667085;margin-top:5px;font-weight:600;}
  /* 이동 경로(.crumb) 규칙은 shell.css 한 벌로 옮겼다 (2026-09-16) */
  .cslayout{display:grid;grid-template-columns:232px 1fr;gap:36px;padding:28px 0 64px;}
  .csnav{border:1px solid var(--line);border-radius:14px;overflow:hidden;align-self:start;}
  .csnav .hd{background:var(--accent-d);color:#fff;font-weight:800;font-size:16px;padding:16px 20px;}
  .csnav a{display:block;padding:13px 20px;font-size:14px;font-weight:600;color:#555;border-top:1px solid var(--line);transition:.12s;}
  .csnav a.on{color:var(--accent-d);font-weight:800;background:var(--soft);box-shadow:inset 3px 0 0 var(--accent-d);}
  .csnav a:hover{background:#f5f8ff;color:var(--accent-d);}
  .cscontact{margin-top:20px;padding:0 4px;font-size:13px;color:#8a9099;line-height:1.85;}
  .cscontact b{display:block;color:#333;font-weight:800;font-size:14px;margin-bottom:6px;}
  .cscontact .tel{font-size:20px;font-weight:900;color:#191c20;letter-spacing:-.02em;margin:2px 0 10px;}
  .csmain h2{font-size:20px;font-weight:800;letter-spacing:-.03em;color:#191c20;margin-bottom:4px;}
  .csmain .sub{font-size:13.5px;color:#8a9099;font-weight:600;margin-bottom:18px;}
  .board .brow{display:flex;align-items:center;gap:18px;padding:17px 6px;border-top:1px solid var(--line);cursor:pointer;}
  .board .brow:first-child{border-top:2px solid #333;}
  .board .no{width:30px;text-align:center;color:#c2c2c2;font-weight:700;font-size:13px;flex:none;}
  .board .ti{flex:1;font-size:15px;font-weight:600;color:#333;letter-spacing:-.01em;}
  .board .ti .tag{color:var(--accent-d);font-weight:800;margin-right:7px;}
  .board .brow:hover .ti{color:var(--accent-d);}
  .board .dt{color:#aaa;font-size:13px;font-weight:600;flex:none;}
  /* FAQ 아코디언 */
  .faqsearch{margin-bottom:16px;} .faqsearch input{width:100%;border:1px solid #e5e7eb;border-radius:11px;padding:12px 15px;font-size:14px;outline:0;transition:.14s;} .faqsearch input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.12);}
  .faqitem{border-bottom:1px solid var(--line);}
  .faqq{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 4px;cursor:pointer;font-size:15px;font-weight:600;color:#333;letter-spacing:-.01em;}
  .faqq:hover{color:var(--accent-d);} .faqq .qi{color:#c2c2c2;flex:none;transition:transform .2s,color .2s;}
  .faqitem.open .faqq{color:var(--accent-d);} .faqitem.open .faqq .qi{transform:rotate(90deg);color:var(--accent-d);}
  .faqa{display:none;padding:2px 4px 20px;font-size:14px;color:#53658a;line-height:1.8;white-space:pre-line;} .faqitem.open .faqa{display:block;}
  .faqnone{padding:30px 4px;color:#aaa;font-size:14px;}
  /* 링크입력가이드 */
  .guideplat{margin-bottom:28px;}
  .guideplat h3{font-size:15px;font-weight:800;color:#191c20;margin-bottom:13px;padding-bottom:9px;border-bottom:2px solid #eaeef5;}
  .guidegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
  .gcard{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.04);}
  .gcard.important{border-color:#fecdd3;}
  .gcard .gimg{background:#f7f8fa;border-bottom:1px solid var(--line);} .gcard .gimg img{width:100%;display:block;}
  .gcard .gbd{padding:12px 14px;} .gcard .gbd b{font-size:14px;font-weight:700;color:#222;display:block;line-height:1.4;}
  .gcard .gbd .note{font-size:12.5px;color:#e11d48;margin-top:7px;line-height:1.6;}
  .inqbox{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--soft);font-size:14px;color:#556;line-height:2;}
  /* 이용 유의사항 */
  .caugrp{margin-bottom:24px;}
  .caugrp h3{font-size:15px;font-weight:800;color:#191c20;margin-bottom:12px;}
  .cauitem{display:flex;gap:13px;border:1px solid var(--line);border-radius:12px;padding:15px 17px;margin-bottom:10px;background:#fff;}
  .cauitem .e{font-size:19px;flex:none;line-height:1.4;}
  .cauitem b{display:block;color:#1b241a;font-size:14.5px;letter-spacing:-.01em;}
  .cauitem span{font-size:13.5px;color:var(--gray);line-height:1.6;}
  .cauitem.red{background:#fff6f6;border-color:#ffdcdc;} .cauitem.amber{background:#fff9ec;border-color:#ffe6b0;} .cauitem.info{background:#f2f8fd;border-color:#d5e8f7;}
  @media(max-width:640px){.guidegrid{grid-template-columns:1fr;}}

  .pager{display:flex;justify-content:center;gap:6px;padding:26px 0 0;}
  .pager a{min-width:38px;height:38px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;font-size:14px;font-weight:700;color:#555;cursor:pointer;}
  .pager a.on{background:#111;color:#fff;border-color:#111;} .pager a:hover{border-color:#999;}

  /* 푸터 규칙은 shell.css 한 벌로 옮겼다 (2026-09-16) — 일곱 벌 복사돼 있던 것이다 */

  @media(max-width:900px){.gnb{display:none;}.cslayout{grid-template-columns:1fr;}.board .dt{display:none;}}

  /* ===== 법적 문서(약관/개인정보/환불) ===== */
  .legalwrap{display:grid;grid-template-columns:224px 1fr;gap:44px;padding:28px 0 66px;}
  .legaltoc{align-self:start;position:sticky;top:72px;}
  .legaltoc .hd{font-size:13px;font-weight:800;color:#191c20;margin-bottom:11px;}
  .legaltoc nav{display:flex;flex-direction:column;gap:1px;border-left:2px solid var(--line);}
  .legaltoc a{font-size:12.5px;color:#8a9099;font-weight:600;padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;transition:.12s;line-height:1.4;}
  .legaltoc a:hover{color:var(--accent-d);border-left-color:var(--accent);}
  .legalmeta{margin-top:18px;font-size:11.5px;color:#aab2bd;line-height:1.75;padding-left:14px;}
  .legalbody{max-width:840px;}
  .legalintro{font-size:14px;color:#4a5a4a;line-height:1.85;background:linear-gradient(120deg,#f4f8ff,#e8f0ff);border:1px solid #cfe0ff;border-radius:14px;padding:18px 22px;margin-bottom:26px;}
  /* 🔴 조항으로 뛰는 링크가 있다(약관 15 · 환불 9 · 개인정보 11).
     고정된 머리줄이 57px 이라 «조항 제목이 통째로 그 뒤에» 숨었다 (2026-09-11). */
.lsec{scroll-margin-top:70px}
.lsec{padding:4px 0 20px;border-top:1px solid var(--line);margin-top:14px;}
  .lsec:first-of-type{border-top:0;margin-top:0;}
  .lsec h2{font-size:16.5px;font-weight:800;color:#191c20;letter-spacing:-.02em;margin-bottom:11px;scroll-margin-top:70px;}
  .lsec p{font-size:14px;color:#3f454c;line-height:1.85;margin:0 0 9px;}
  .lsec ul,.lsec ol{margin:2px 0 12px 20px;} .lsec li{font-size:14px;color:#3f454c;line-height:1.8;margin:5px 0;}
  .lsec b{color:#1b241a;}
  .lbox{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:8px 0 12px;font-size:13.5px;color:#556;line-height:1.8;}
  .lbox.warn{background:#fff9ec;border-color:#ffe6b0;color:#7a5b1e;}
  .ltable{width:100%;border-collapse:collapse;font-size:13.5px;margin:6px 0 14px;border:1px solid var(--line);border-radius:10px;overflow:hidden;}
  .ltable th,.ltable td{padding:11px 14px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);text-align:left;vertical-align:top;color:#3f454c;line-height:1.7;}
  .ltable th{background:#f5f8ff;font-weight:800;color:#53658a;font-size:12.5px;white-space:nowrap;}
  .ltable th:last-child,.ltable td:last-child{border-right:0;} .ltable tbody tr:last-child td{border-bottom:0;}
  @media(max-width:900px){.legalwrap{grid-template-columns:1fr;}.legaltoc{display:none;}}




/* ── 모바일 머리줄(검색·링크) 규칙은 «site.css» 한 곳에 있다 (2026-09-16) ──
   전에는 이 블록이 화면 CSS 일곱 벌에 그대로 복사돼 있었다. 한 벌만 고치면 그 화면만
   바뀌고 나머지 여섯은 옛 모양으로 남는다 — 실제로 그렇게 어긋났다. site.css 는 모든
   화면에 «화면 CSS 뒤에» 실리므로 거기 한 벌이면 족하다. */


/* ── 모바일 머리줄이 «붙어 있다» (2026-09-12) — home.css 와 같은 규칙 ──
   🔴 로그인하면 한 줄에 다섯이 들어가 서로 닿아 보였다(로고·잔액·마이페이지·로그아웃·⚙관리자).
   ⚠ 잔액 칸과 ⚙관리자는 숨기지 않는다. 「마이페이지」 글자만 뺀다 — 잔액 칸이 같은 곳으로 간다. */
/* ── 아코디언이 «툭» 튄다 (2026-09-12) ──────────────────────────
   🔴 <details> 는 브라우저가 즉시 열고 닫는다. 답이 길면 화면이 한 번 덜컹하고,
     닫을 때도 갑자기 사라져 어디가 접혔는지 눈이 못 따라간다.
   ★ 여는 «모양»만 부드럽게 한다 — 여닫는 «동작»은 브라우저에 그대로 둔다.
     JS 로 높이를 재서 여는 방식은 JS 가 막히면 답이 아예 안 열린다(snspang 이 그랬다).
   ⚠ display:none → block 은 전환이 안 먹는다. grid-template-rows 0fr→1fr 로 연다 —
     높이를 «몰라도» 전환되는 유일한 방법이다.
   ⚠ 움직임 줄이기를 켠 사람에게는 전환을 끈다(prefers-reduced-motion). */
details.faqitem > .faqa,
details.hfq > .a{
  display:grid;grid-template-rows:0fr;overflow:hidden;
  padding-top:0;padding-bottom:0;opacity:0;
  transition:grid-template-rows .22s ease, opacity .18s ease,
             padding-top .22s ease, padding-bottom .22s ease;
}
details.faqitem > .faqa > *,
details.hfq > .a > *{min-height:0}
details.faqitem[open] > .faqa{grid-template-rows:1fr;opacity:1;padding-bottom:18px}
details.hfq[open] > .a{grid-template-rows:1fr;opacity:1;padding-bottom:17px}
/* 화살표도 같은 속도로 돈다 — 따로 놀면 더 어색하다 */
.faqq .qi,.hfq .i{transition:transform .22s ease,color .18s ease}
@media(prefers-reduced-motion:reduce){
  details.faqitem > .faqa,details.hfq > .a,.faqq .qi,.hfq .i{transition:none}
}


/* ⚠ 안쪽 감싼 것(.faqa-i)이 «반드시» 있어야 한다.
     grid-template-rows:0fr 는 «자식 요소»를 눌러 접는 방식이라,
     글자가 div 에 그대로 들어 있으면 접히지 않는다. */
.faqa-i{min-height:0;overflow:hidden}