/* ===================================================================
   노원 JUMP — 고객센터 페이지 전용 (1안 Wide 위에 추가)
   group.css 뒤에 로드. .sp-* 컴포넌트.
   =================================================================== */

/* 섹션 바로가기(네비) 앵커 이동 시 헤더+고정 바 보정 (액티비티 기준 통일) */
#contact, #board, #events, #lost, #access{ scroll-margin-top:180px; }
@media (max-width:900px){ #contact, #board, #events, #lost, #access{ scroll-margin-top:50px; } }

/* 세그먼트 탭 (보드·이벤트 공용) */
.sp-seg{ display:inline-flex; flex-wrap:wrap; gap:8px; margin-bottom:38px; }
.sp-seg button{ padding:10px 20px; border-radius:999px; border:1px solid var(--line-2);
  background:#fff; font-weight:600; font-size:14.5px; color:var(--mute); cursor:pointer; transition:.15s; }
.sp-seg button.is-active{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* 01 고객센터 메인 — 연락 카드 + 다운로드 */
.sp-contact{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.sp-ccard{ border:1px solid var(--line); border-radius:20px; padding:34px 32px; background:#fff; }
.sp-ccard .ic{ width:52px; height:52px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(233,34,133,.1); color:var(--pink); margin-bottom:20px; }
.sp-ccard:nth-child(2) .ic{ background:rgba(3,122,184,.1); color:var(--blue); }
.sp-ccard:nth-child(3) .ic{ background:rgba(247,185,36,.16); color:#b07d00; }
.sp-ccard .ic svg{ width:25px; height:25px; }
.sp-ccard .lab{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
.sp-ccard .val{ margin-top:8px; font-size:26px; font-weight:800; letter-spacing:-.02em; }
.sp-ccard .sub{ margin-top:6px; font-size:14px; color:var(--mute); }
.sp-downloads{ margin-top:24px; display:flex; gap:14px; flex-wrap:wrap; }
.sp-dl{ display:inline-flex; align-items:center; gap:12px; padding:16px 22px; border-radius:14px;
  border:1px solid var(--line-2); background:#fff; transition:.15s; }
.sp-dl:hover{ border-color:var(--pink); transform:translateY(-2px); box-shadow:0 14px 30px rgba(233,34,133,.1); }
.sp-dl .ic{ width:40px; height:40px; border-radius:11px; background:rgba(233,34,133,.1); color:var(--pink);
  display:inline-flex; align-items:center; justify-content:center; }
.sp-dl .ic svg{ width:20px; height:20px; }
.sp-dl b{ font-size:15.5px; font-weight:700; display:block; }
.sp-dl small{ font-size:12.5px; color:var(--mute); }

/* 02 주차/위치 */
.sp-access{ display:grid; grid-template-columns:1.4fr 1fr; gap:32px; align-items:stretch; }
.sp-map{ min-height:360px; height:100%; border-radius:20px; }
.sp-info{ display:flex; flex-direction:column; gap:14px; }
.sp-irow{ display:flex; gap:16px; align-items:flex-start; border:1px solid var(--line); border-radius:14px; padding:20px 22px; background:#fff; }
.sp-irow .ic{ width:44px; height:44px; border-radius:12px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; background:rgba(3,122,184,.1); color:var(--blue); }
.sp-irow .ic svg{ width:22px; height:22px; }
.sp-irow b{ font-size:16px; font-weight:800; letter-spacing:-.02em; display:block; }
.sp-irow p{ margin-top:5px; font-size:14px; color:var(--mute); line-height:1.6; }

/* 03 보드 (소식/공지/FAQ) */
.sp-list{ border-top:2px solid var(--ink); }
.sp-row{ display:grid; grid-template-columns:96px 1fr auto auto; gap:22px; align-items:center;
  padding:20px 6px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .15s; }
.sp-row:hover{ background:rgba(20,20,30,.02); }
.sp-rtag{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; font-weight:600; padding:5px 10px; border-radius:999px;
  background:rgba(233,34,133,.1); color:var(--pink); text-align:center; }
.sp-rtag.notice{ background:rgba(3,122,184,.1); color:var(--blue); }
.sp-rtag.news{ background:rgba(247,185,36,.18); color:#b07d00; }
.sp-rtitle{ font-size:16.5px; font-weight:600; letter-spacing:-.02em; }
.sp-rauthor{ font-size:13.5px; color:var(--mute); }
.sp-rdate{ font-family:var(--mono); font-size:12.5px; color:var(--mute); letter-spacing:.04em; }

/* FAQ 아코디언 */
.sp-faq{ border-top:2px solid var(--ink); }
.sp-faq__item{ border-bottom:1px solid var(--line); }
.sp-faq__q{ display:flex; align-items:center; gap:16px; width:100%; text-align:left;
  padding:22px 6px; background:none; border:0; cursor:pointer; font:inherit; }
.sp-faq__q .q{ font-family:var(--disp); font-size:18px; color:var(--pink); flex-shrink:0; }
.sp-faq__q .t{ flex:1; font-size:16.5px; font-weight:700; letter-spacing:-.02em; }
.sp-faq__q .chev{ transition:transform .25s; color:var(--mute); flex-shrink:0; }
.sp-faq__item.open .sp-faq__q .chev{ transform:rotate(180deg); }
.sp-faq__a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.sp-faq__a .inner{ padding:0 6px 24px 50px; color:#3a3a40; font-size:15px; line-height:1.75; }
.sp-faq__a .inner a{ color:var(--pink); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.sp-faq__cat{ margin:30px 0 6px; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--pink); font-weight:700; }
.sp-faq__cat:first-child{ margin-top:0; }
/* FAQ 더보기 — 아이콘만 (텍스트 없음) */
.sp-faq-more{ display:flex; align-items:center; justify-content:center; width:100%;
  margin-top:14px; padding:9px; border:1px solid var(--line); border-radius:12px; background:#fff;
  color:var(--mute); cursor:pointer; transition:.15s; }
.sp-faq-more:hover{ border-color:var(--ink); color:var(--ink); }
.sp-faq-more svg{ width:22px; height:22px; }

/* 04 이벤트 갤러리 */
.sp-events{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.sp-ecard{ border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#fff; transition:.2s; cursor:pointer; }
.sp-ecard:hover{ transform:translateY(-3px); box-shadow:0 20px 44px rgba(20,20,30,.08); }
.sp-ecard .slot{ height:190px; border-radius:0; position:relative; }
.sp-ecard .cat{ position:absolute; top:14px; left:14px; z-index:2; font-family:var(--mono); font-size:10px;
  letter-spacing:.1em; padding:5px 10px; border-radius:999px; background:var(--pink); color:#fff; }
.sp-ecard .cat.partner{ background:var(--blue); }
.sp-ecard .cat.promo{ background:var(--yellow); color:#3a2a00; }
.sp-ecard__body{ padding:22px 24px; }
.sp-ecard__body h4{ font-size:17.5px; font-weight:800; letter-spacing:-.02em; line-height:1.35; }
.sp-ecard__body .period{ margin-top:10px; font-family:var(--mono); font-size:12px; color:var(--mute); letter-spacing:.04em; }

/* 05 분실물 프로세스 */
.sp-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; position:relative; }
.sp-step{ border:1px solid var(--line); border-radius:18px; padding:32px 28px; background:#fff; position:relative; }
.sp-step .no{ font-family:var(--disp); font-size:40px; line-height:1; color:var(--pink); letter-spacing:-.03em; }
.sp-step:nth-child(2) .no{ color:var(--blue); }
.sp-step:nth-child(3) .no{ color:#b07d00; }
.sp-step h4{ margin-top:16px; font-size:19px; font-weight:800; letter-spacing:-.02em; }
.sp-step p{ margin-top:9px; font-size:14.5px; line-height:1.7; color:var(--mute); }
.sp-lost-cta{ margin-top:30px; display:inline-flex; align-items:center; gap:10px; padding:16px 26px;
  border-radius:12px; background:var(--ink); color:#fff; font-weight:700; font-size:15px; transition:.15s; }
.sp-lost-cta:hover{ opacity:.9; transform:translateY(-1px); }
.sp-lost-cta svg{ width:18px; height:18px; }

@media (max-width:900px){
  .sp-contact,.sp-access,.sp-events,.sp-steps{ grid-template-columns:1fr; }
  /* 탭 3개를 한 줄에 (동등폭 세그먼트형) */
  .sp-seg{ display:flex; flex-wrap:nowrap; width:100%; gap:6px; }
  .sp-seg button{ flex:1 1 0; min-width:0; padding:9px 6px; font-size:12.5px; white-space:nowrap; text-align:center; }
  /* 목록 행: 태그 위 → 타이틀이 풀폭 → 작성자·날짜 */
  .sp-row{ grid-template-columns:1fr auto; gap:6px 12px; }
  .sp-rtag{ grid-column:1; grid-row:1; justify-self:start; }
  .sp-rtitle{ grid-column:1 / -1; grid-row:2; }
  .sp-rauthor{ grid-column:1; grid-row:3; }
  .sp-rdate{ grid-column:2; grid-row:3; align-self:center; }
  /* 고객센터 카드: 아이콘 좌 + 텍스트 우 가로배치로 콤팩트하게 (세로 빈 공간 축소) */
  .sp-contact{ gap:10px; }
  .sp-ccard{ display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:center;
    padding:16px 18px; border-radius:14px; }
  .sp-ccard .ic{ grid-column:1; grid-row:1 / 4; align-self:center; margin-bottom:0; width:44px; height:44px; }
  .sp-ccard .ic svg{ width:22px; height:22px; }
  .sp-ccard .lab{ grid-column:2; grid-row:1; }
  .sp-ccard .val{ grid-column:2; grid-row:2; margin-top:1px; font-size:20px; }
  .sp-ccard .sub{ grid-column:2; grid-row:3; margin-top:1px; font-size:12.5px; }
}