/* ============================================================
   kt초이스 — 고객센터 공용 스타일 (공지사항/자주묻는질문 공용, cs-shared)
   common.css + header.css + footer.css 뒤에 로드하세요.
   ============================================================ */
.cs-main { padding:40px 0 100px; min-height:calc(100vh - 420px); }
.cs-head { max-width:760px; margin:0 auto 28px; text-align:left; }
.cs-title { font-size:var(--fs-title2); font-weight:var(--fw-bold); color:var(--gray-900); letter-spacing:var(--ls-title); }
.cs-sub { font-size:var(--fs-body2); color:var(--gray-500); margin-top:10px; line-height:1.6; }

.cs-subnav-wrap { position:relative; max-width:760px; margin:0 auto 36px; }
.cs-subnav { display:flex; justify-content:center; gap:66px; border-bottom:1px solid var(--gray-200); }
.cs-subnav a { padding:14px 18px; font-size:var(--fs-body2); font-weight:var(--fw-semibold); color:var(--gray-500); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; }
.cs-subnav a:hover { color:var(--gray-800); }
.cs-subnav a.on { color:var(--blue-600); border-bottom-color:var(--blue-600); font-weight:var(--fw-bold); }
.cs-subnav a.disabled { color:var(--gray-300); cursor:default; pointer-events:none; }

.cs-body { max-width:760px; margin:0 auto; }

.cs-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.cs-toolbar--search { justify-content:flex-end; }
.cs-cat-row { display:flex; gap:8px; flex-wrap:wrap; }
.cs-cat { font-size:var(--fs-label1); font-weight:var(--fw-semibold); color:var(--gray-600); background:var(--gray-50); border:1px solid transparent; padding:9px 16px; border-radius:var(--r-full); transition:background .15s,color .15s; }
.cs-cat:hover { background:var(--gray-100); }
.cs-cat.on { background:var(--blue-600); color:#fff; }

.cs-search { position:relative; flex:0 0 auto; width:240px; max-width:100%; }
.cs-search svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--gray-400); pointer-events:none; }
.cs-search input { width:100%; height:42px; padding:0 14px 0 38px; border:1px solid var(--gray-200); border-radius:var(--r-full); font-size:var(--fs-label1); color:var(--gray-900); background:var(--gray-50); }
.cs-search input::placeholder { color:var(--gray-400); }
.cs-search input:focus { outline:none; border-color:var(--blue-600); background:#fff; }

.cs-count { font-size:13.5px; color:var(--gray-400); margin:2px 2px 14px; }

.cs-empty { display:none; text-align:center; padding:80px 20px; color:var(--gray-400); font-size:14.5px; }
.cs-empty .ic { display:block; width:44px; height:44px; margin:0 auto 16px; color:var(--gray-300); }

/* 접이식(collapse) — footer 아코디언과 동일한 grid-rows 트릭 */
.cs-collapse { display:grid; grid-template-rows:0fr; transition:grid-template-rows .25s ease; }
.cs-collapse.open { grid-template-rows:1fr; }
.cs-collapse > div { overflow:hidden; }

.cs-pager { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:32px; }
.cs-pg-btn { min-width:36px; height:36px; padding:0 10px; border-radius:var(--r-8); font-size:var(--fs-label1); font-weight:var(--fw-semibold); color:var(--gray-500); }
.cs-pg-btn:hover { background:var(--gray-50); color:var(--gray-800); }
.cs-pg-btn.on { background:var(--blue-600); color:#fff; }
.cs-pg-nav[disabled] { opacity:.35; pointer-events:none; }

.cs-help { margin-top:44px; padding:28px 26px; border-radius:var(--r-16); background:var(--gray-50); text-align:center; }
.cs-help p { font-size:14.5px; color:var(--gray-600); margin-bottom:14px; }
.cs-help a { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-label1); font-weight:var(--fw-bold); color:var(--blue-600); background:#fff; border:1px solid var(--gray-200); padding:10px 18px; border-radius:var(--r-full); }
.cs-help a:hover { border-color:var(--blue-600); }

@media (max-width:768px) {
  .cs-main { padding:28px 0 72px; }
  .cs-title { font-size:var(--fs-title3); }
  .cs-subnav { gap:2px; overflow-x:auto; scrollbar-width:none; justify-content:flex-start; }
  .cs-subnav::-webkit-scrollbar { display:none; }
  .cs-subnav a { padding:12px 14px; font-size:var(--fs-label1); flex:0 0 auto; }
  /* 서브탭이 화면 폭을 넘어갈 때 더 볼 내용이 있음을 알려주는 우측 페이드 힌트 —
     끝까지 스크롤하면 JS가 .at-end 클래스를 붙여 자연스럽게 사라짐 */
  .cs-subnav-wrap::after { content:''; position:absolute; top:0; right:0; bottom:1px; width:36px; background:linear-gradient(to right, rgba(255,255,255,0), #fff 70%); pointer-events:none; transition:opacity .2s ease; }
  .cs-subnav-wrap.at-end::after { opacity:0; }
  .cs-toolbar { flex-direction:column; align-items:stretch; }
  .cs-search { width:100%; }
}