/* 운영정책·안내 페이지(이용약관·개인정보처리방침·취소환불·사업자정보·법적고지·운영지원센터) 새 디자인.
   styles.css 의 공용 !important 규칙(문의·결제·샘플 페이지와 공유)을 이 페이지에서만 덮어쓴다.
   메인/컨설팅 홈/도구/구독 페이지와 같은 톤: 흰 바탕 · 알약 라벨 · 연한 회색 패널 · 초록 포인트. */

html:has(body.legal-page) { background: #fff; }
body.legal-page { background: #fff !important; color: #111 !important; }
body.legal-page .legal-shell { width: min(860px, calc(100% - 48px)) !important; padding: 0 0 96px !important; } /* 구독 페이지 카드 영역과 같은 860px */
@media (max-width: 920px) { body.legal-page .legal-shell { width: min(860px, calc(100% - 40px)) !important; padding-bottom: 72px !important; } }

/* ═════════ 문서형 페이지 (약관 · 개인정보 · 환불 · 사업자정보 · 법적고지) ═════════ */

/* ── 상단 소개 ── */
.lg-hero { display: flex; flex-direction: column; align-items: center; padding: 64px 0 40px; text-align: center; }
.lg-badge { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: #f5f5f3; color: #222; font-size: 13px; font-weight: 700; }
.lg-hero h1 { margin: 20px 0 0; color: #111; font-size: clamp(32px, 4.6vw, 48px); font-weight: 800; line-height: 1.2; letter-spacing: -.04em; word-break: keep-all; }
body.legal-page .lg-hero .lg-desc { max-width: 640px; margin: 18px 0 0; color: #777 !important; font-size: 16px; font-weight: 400; line-height: 1.75; word-break: keep-all; text-wrap: balance; }
.lg-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.lg-points span { display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 999px; background: transparent; border: 1px solid #e5e5e2; color: #8a8a86; font-size: 12.5px; font-weight: 500; }
.lg-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.lg-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border: 1px solid #d9d9d5; border-radius: 12px; background: #fff; color: #111; font-size: 14px; font-weight: 700; text-decoration: none; transition: border-color .16s ease, background-color .16s ease; }
.lg-btn:hover { border-color: #111; }
.lg-btn.is-primary { border-color: #1db954; background: #1db954; color: #fff; }
.lg-btn.is-primary:hover { border-color: #17a449; background: #17a449; }
.lg-btn:focus-visible { outline: 3px solid rgba(17, 17, 17, .3); outline-offset: 3px; }

/* ── 본문: 왼쪽 목차 + 오른쪽 문서 ── */
.lg-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 8px; }
.lg-layout.lg-no-toc { display: block; }
.lg-toc { position: sticky; top: 88px; max-height: calc(100vh - 120px); overflow-y: auto; padding: 20px 14px 14px; border-radius: 20px; background: #f9f9f9; scrollbar-width: thin; }
.lg-toc strong { display: block; margin: 0 8px 10px; color: #111; font-size: 14px; font-weight: 700; }
.lg-toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.lg-toc a { display: block; padding: 7px 10px; border-radius: 10px; color: #666; font-size: 13.5px; font-weight: 500; line-height: 1.45; text-decoration: none; word-break: keep-all; transition: background-color .16s ease, color .16s ease; }
.lg-toc a:hover, .lg-toc a:focus-visible { background: #fff; color: #111; }
.lg-toc-m { display: none; }

.lg-doc { min-width: 0; }
.lg-sec { padding: 40px 0; border-top: 1px solid #ececea; scroll-margin-top: 88px; }
.lg-sec:first-child { padding-top: 0; border-top: 0; }
.lg-sec h2 { margin: 0 0 16px; color: #111 !important; font-size: 21px; font-weight: 700; line-height: 1.45; letter-spacing: -.03em; word-break: keep-all; }
body.legal-page .lg-sec p, body.legal-page .lg-sec li { color: #444 !important; font-size: 15px; font-weight: 400; line-height: 1.85; letter-spacing: -.01em; word-break: keep-all; overflow-wrap: break-word; }
.lg-sec p { margin: 0 0 12px; }
.lg-sec p:last-child { margin-bottom: 0; }
.lg-list { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.lg-list li { position: relative; padding: 12px 16px 12px 36px; border-radius: 12px; background: #f9f9f9; }
.lg-list li::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 16px; width: 6px;
    height: 6px; border-radius: 50%; background: #1db954; }

/* 문서 하단 핵심 답변(FAQ) 블록과의 간격 */
.lg-layout + .hfaq-sec { margin-top: 24px; }

/* ── 모바일: 목차는 접이식으로 ── */
@media (max-width: 920px) {
  .lg-hero { padding: 44px 0 28px; }
  .lg-layout { display: block; }
  .lg-toc { display: none; }
  .lg-toc-m { display: block; margin: 0 0 24px; border-radius: 16px; background: #f5f5f3; }
  .lg-toc-m summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; color: #111; font-size: 14px; font-weight: 700; list-style: none; cursor: pointer; }
  .lg-toc-m summary::-webkit-details-marker { display: none; }
  .lg-toc-m summary::after { content: ""; width: 8px; height: 8px; border: solid #777; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s ease; }
  .lg-toc-m[open] summary::after { transform: rotate(-135deg); }
  .lg-toc-m ol { display: grid; gap: 2px; margin: 0; padding: 0 10px 12px; list-style: none; }
  .lg-toc-m a { display: block; padding: 9px 10px; border-radius: 10px; color: #555; font-size: 13.5px; line-height: 1.45; text-decoration: none; }
  .lg-toc-m a:hover { background: #fff; color: #111; }
  .lg-sec { padding: 30px 0; }
}
@media (max-width: 760px) {
  .lg-hero { padding: 36px 0 24px; }
  .lg-badge { height: 28px; padding: 0 12px; font-size: 12px; }
  .lg-hero h1 { margin-top: 16px; font-size: 26px; }
  body.legal-page .lg-hero .lg-desc { margin-top: 14px; font-size: 14px; }
  .lg-points { margin-top: 20px; gap: 6px; }
  .lg-points span { height: 28px; padding: 0 11px; font-size: 12px; }
  .lg-actions { margin-top: 22px; }
  .lg-btn { height: 42px; padding: 0 18px; font-size: 13.5px; }
  .lg-sec h2 { font-size: 17.5px; margin-bottom: 12px; }
  body.legal-page .lg-sec p, body.legal-page .lg-sec li { font-size: 14px; line-height: 1.8; }
  .lg-list li { padding: 10px 14px 10px 32px; }
  .lg-list li::before { left: 14px; }
}

/* ═════════ 운영지원센터 (support) ═════════ */
body.support-page .legal-grid-support { display: block; margin-top: 0 !important; }

/* 소개 영역 */
body.support-page .support-page-hero { display: flex; flex-direction: column; align-items: center; padding: 64px 0 40px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; text-align: center; }
body.support-page .support-page-hero-copy { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 720px !important; }
body.support-page .support-page-hero .eyebrow { display: inline-flex; align-items: center; height: 32px; margin: 0; padding: 0 14px; border-radius: 999px; background: #f5f5f3; color: #222 !important; font-size: 13px; font-weight: 700; letter-spacing: 0 !important; text-transform: none !important; }
body.support-page .support-page-hero h1 { max-width: none !important; width: auto !important; margin: 20px 0 0; word-break: keep-all; text-wrap: balance; color: #111 !important; font-size: clamp(32px, 4.6vw, 48px) !important; line-height: 1.2; letter-spacing: -.04em !important; }
body.support-page .support-page-hero-copy > p:not(.eyebrow) { margin: 18px 0 0; color: #777 !important; font-size: 16px; line-height: 1.75; word-break: keep-all; }
body.support-page .support-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
body.support-page .legal-action-link { min-height: 0 !important; height: 44px; padding: 0 22px !important; border: 1px solid #d9d9d5 !important; border-radius: 12px !important; background: #fff !important; box-shadow: none !important; color: #111 !important; font-size: 14px; font-weight: 700 !important; }
body.support-page .legal-action-link:hover { border-color: #111 !important; background: #fff !important; }
body.support-page .support-hero-actions .legal-action-link:first-child { border-color: #1db954 !important; background: #1db954 !important; color: #fff !important; }
body.support-page .support-hero-actions .legal-action-link:first-child:hover { border-color: #17a449 !important; background: #17a449 !important; }

/* 섹션 공통 */
body.support-page .support-section { margin: 0 !important; padding: 56px 0 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
body.support-page .support-section-head { display: grid; justify-items: center; gap: 0; width: 100%; max-width: none !important; margin: 0 0 28px !important; padding: 0 !important; border: 0 !important; text-align: center; }
body.support-page .support-section-head .eyebrow { display: inline-flex; align-items: center; height: 28px; margin: 0; padding: 0 12px; border-radius: 999px; background: #f5f5f3; color: #555 !important; font-size: 12px; font-weight: 700; letter-spacing: 0 !important; text-transform: none !important; }
body.support-page .support-section-head h2 { margin: 14px 0 0; color: #111 !important; font-size: clamp(22px, 2.8vw, 32px) !important; font-weight: 700; line-height: 1.3; letter-spacing: -.035em !important; }
body.support-page .support-section-head > p:not(.eyebrow) { margin: 10px 0 0; color: #777 !important; font-size: 15px; line-height: 1.7; }

/* 빠른 안내 / 지원 도구 / 추가 안내 카드 */
body.support-page .support-action-grid,
body.support-page .support-tool-grid,
body.support-page .support-topic-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
/* 빠른 안내 카드는 한 줄에 2개 */
body.support-page .support-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.support-page .support-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

body.support-page .support-action-card,
body.support-page .support-tool-card,
body.support-page .support-topic-card { display: flex; flex-direction: column; gap: 0; padding: 28px !important; border: 0 !important; border-radius: 24px !important; background: #f9f9f9 !important; box-shadow: none !important; }
body.support-page .support-tool-card { background: #fff !important; border: 1px solid #e7e7e4 !important; }

body.support-page .support-action-badge,
body.support-page .support-tool-card > span { border: none !important; align-self: flex-start; display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px;     background: var(--point-soft, #e8f8ee) !important;color: #17a449 !important; font-size: 12px; font-weight: 700; letter-spacing: 0 !important; text-transform: none !important; }
body.support-page .support-tool-card > span { background: #f5f5f3; color: #555 !important; }
body.support-page .support-action-card strong,
body.support-page .support-tool-card strong { margin: 16px 0 0; color: #111; font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: -.03em; }
body.support-page .support-action-card p,
body.support-page .support-tool-card p { margin: 8px 0 0; color: #666 !important; font-size: 14px; line-height: 1.7; word-break: keep-all; }
body.support-page .support-action-card .legal-action-link { align-self: flex-start; margin-top: 20px; height: 40px; padding: 0 18px !important; font-size: 13.5px; }
body.support-page .support-tool-card > a { align-self: flex-start; margin-top: 20px; display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border: 1px solid #d9d9d5; border-radius: 12px; background: #fff; color: #111; font-size: 13.5px; font-weight: 700; text-decoration: none; }
body.support-page .support-tool-card > a:hover { border-color: #111; }

body.support-page .support-topic-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; }
body.support-page .support-topic-head .legal-card-index { min-width: 0; min-height: 0; width: 28px; height: 28px; padding: 0; border: 0 !important; border-radius: 50%; background: #1db954 !important; color: #fff !important; font-size: 12px; font-weight: 800; letter-spacing: 0 !important; }
body.support-page .support-topic-head h2 { margin: 0; color: #111 !important; font-size: 17px !important; font-weight: 700; line-height: 1.4; letter-spacing: -.03em !important; }
body.support-page .support-topic-card p { margin: 0 0 10px; color: #555 !important; font-size: 14px; line-height: 1.75; word-break: keep-all; }
body.support-page .support-topic-card p:last-child { margin-bottom: 0; }
body.support-page .lg-layout + .hfaq-sec, body.support-page .hfaq-sec { margin-top: 56px; }

@media (max-width: 920px) {
  body.support-page .support-topic-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body.support-page .support-page-hero { padding: 36px 0 24px !important; }
  body.support-page .support-page-hero .eyebrow { height: 28px; padding: 0 12px; font-size: 12px; }
  body.support-page .support-page-hero h1 { margin-top: 16px; font-size: 26px !important; }
  body.support-page .support-page-hero-copy > p:not(.eyebrow) { margin-top: 14px; font-size: 14px; }
  body.support-page .support-hero-actions { margin-top: 22px; }
  body.support-page .support-section { padding-top: 40px !important; }
  body.support-page .support-section-head { margin-bottom: 20px !important; }
  body.support-page .support-section-head h2 { font-size: 21px !important; }
  body.support-page .support-section-head > p:not(.eyebrow) { font-size: 13.5px; }
  body.support-page .support-action-grid,
  body.support-page .support-tool-grid { grid-template-columns: 1fr; gap: 12px; }
  body.support-page .support-action-card,
  body.support-page .support-tool-card,
  body.support-page .support-topic-card { padding: 22px 20px !important; border-radius: 20px !important; }
  body.support-page .support-action-card strong,
  body.support-page .support-tool-card strong { font-size: 16.5px; }
  body.support-page .support-action-card p,
  body.support-page .support-tool-card p,
  body.support-page .support-topic-card p { font-size: 13.5px; }
}
body.support-page .support-section-head > * { max-width: 640px; }
body.support-page .support-section-head > div, body.support-page .support-section-head h2 { max-width: none; }
/* 모바일에서 버튼이 가로로 꽉 차게 늘어나던 공용 규칙 해제 */
body.support-page .legal-action-link { width: auto !important; flex: 0 0 auto; }

/* ───── 지원 방법 카드: 아이콘 + 제목/값 + 화살표 한 줄 카드 ───── */
body.support-page .support-tool-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
body.support-page .support-tool-grid .support-tool-card { position: relative; display: grid !important; grid-template-columns: 48px minmax(0, 1fr) 20px; grid-template-areas: "ic lb ar" "ic vl ar" "cp cp cp"; align-items: center; column-gap: 16px; row-gap: 2px; padding: 20px 22px !important; border: 0 !important; border-radius: 24px !important; background: #f9f9f9 !important; transition: background-color .16s ease; }
body.support-page .support-tool-grid .support-tool-card:hover { background: #f3f3f1 !important; }
/* 아이콘: 연한 초록 바탕 + 사이트 포인트 초록 */
body.support-page .support-tool-grid .support-tool-card::before { content: ""; grid-area: ic; width: 48px; height: 48px; border-radius: 16px; background: #e8f8ee url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231db954' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / 24px 24px no-repeat; }
body.support-page .support-tool-grid .support-tool-card:has(a[href^="mailto:"])::before, body.support-page .support-tool-grid a.support-tool-card[href^="mailto:"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231db954' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
body.support-page .support-tool-grid .support-tool-card:has(a[href^="tel:"])::before, body.support-page .support-tool-grid a.support-tool-card[href^="tel:"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231db954' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
/* 제목(대표 이메일 등)과 값 */
body.support-page .support-tool-grid .support-tool-card > span { grid-area: lb; align-self: end; display: block; height: auto; padding: 0; border-radius: 0; background: none !important; color: #111 !important; font-size: 15px; font-weight: 700; line-height: 1.4; letter-spacing: -.02em !important; }
body.support-page .support-tool-grid .support-tool-card > strong { grid-area: vl; align-self: start; margin: 0; color: #666 !important; font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: 0; word-break: break-all; }
body.support-page .support-tool-grid .support-tool-card > p { grid-area: cp; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid #e6e6e2; color: #777 !important; font-size: 13.5px; line-height: 1.7; }
/* 링크: 카드 전체를 클릭 영역으로, 글자는 화면 낭독기용으로만 남기고 오른쪽에 ↗ 화살표 */
@media (max-width: 760px) {
  body.support-page .support-tool-grid { grid-template-columns: 1fr; }
  body.support-page .support-tool-grid .support-tool-card { padding: 18px 18px !important; border-radius: 20px !important; column-gap: 14px; }
}

/* ───── 운영 안내: 지원 카드 아래에 따로 분리된 안내 패널 ───── */
body.support-page .support-info { margin-top: 12px; padding: 30px; border: 1px solid #e7e7e4; border-radius: 24px; background: #fff; }
body.support-page .support-info h3 { margin: 0 0 18px; color: #111; font-size: 18px; font-weight: 700; letter-spacing: -.03em; }
body.support-page .support-info ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
body.support-page .support-info li { position: relative; padding-left: 32px; color: #444 !important; font-size: 14.5px; line-height: 1.65; word-break: keep-all; }
body.support-page .support-info li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; background: center / 18px 18px no-repeat; }
body.support-page .support-info li.is-clock::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
body.support-page .support-info li.is-mail::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
body.support-page .support-info li.is-chat::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 8.6 8.6 0 0 1-3.5-.8L3 21l1.9-5.3A8.4 8.4 0 1 1 21 11.5z'/%3E%3C/svg%3E"); }
body.support-page .support-info li a { color: #111; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
body.support-page .support-info li a:hover { color: #17a449; }
@media (max-width: 760px) {
  body.support-page .support-info { padding: 22px 20px; border-radius: 20px; }
  body.support-page .support-info h3 { margin-bottom: 14px; font-size: 16.5px; }
  body.support-page .support-info li { font-size: 13.5px; }
}
@media (max-width: 760px) { body.support-page .support-action-grid { grid-template-columns: 1fr; } }

/* 카드 전체가 하나의 링크(a): 오른쪽 ↗ 화살표, 호버는 아주 살짝 어둡게 */
body.support-page .support-tool-grid a.support-tool-card { color: inherit !important; text-decoration: none; cursor: pointer; }
body.support-page .support-tool-grid a.support-tool-card::after { content: ""; grid-area: ar; justify-self: end; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / 18px 18px no-repeat; transition: transform .16s ease; }
body.support-page .support-tool-grid a.support-tool-card:hover::after { transform: translate(2px, -2px); }
body.support-page .support-tool-grid a.support-tool-card:focus-visible { outline: 3px solid rgba(29, 185, 84, .45); outline-offset: 2px; }

/* 빠른 안내 카드: 같은 줄 카드 높이를 맞추고 버튼을 항상 카드 맨 아래에 정렬 + 한글 줄바꿈 정리 */
body.support-page .support-action-grid { align-items: stretch; }
body.support-page .support-action-card { height: 100%; }
body.support-page .support-action-card strong { word-break: keep-all; text-wrap: balance; }
body.support-page .support-action-card p { margin: 8px 0 22px; word-break: keep-all; text-wrap: balance; }
body.support-page .support-action-card .legal-action-link { margin-top: auto !important; }

/* 다른 안내 문구도 단어 중간에서 끊기거나 한 글자만 다음 줄로 떨어지지 않게 */
body.support-page .support-topic-card p,
body.support-page .support-tool-card p,
body.support-page .support-section-head > p,
body.support-page .support-page-hero-copy > p { word-break: keep-all; text-wrap: balance; }
body.support-page .support-topic-head h2 { word-break: keep-all; text-wrap: balance; }

/* ───────── 운영지원센터 하단 "자주 묻는 질문"(2026-10-28) ─────────
   항목 디자인은 메인 FAQ와 같은 faq_block.css(.hfaq-item 등)를 쓰고, 여기서는 높이를 줄이는 배치만 정한다:
   카테고리 탭(컨설팅 홈 분야 탭과 같은 "회색 알약 안에서 검정 알약이 옆으로 미끄러지는" 방식)으로 한 묶음씩 보여 주고
   (JS 없으면 전부 표시), 항목 여백·간격을 메인보다 촘촘하게 한다. */
body.support-page .support-faq-body { box-sizing: border-box; display: grid; gap: 24px; width: 100%; margin: 0 auto; }
body.support-page .support-faq-group { min-width: 0; }
body.support-page .support-faq-cat { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: #111; font-size: 16px; font-weight: 700; letter-spacing: -.03em; line-height: 1.4; }
body.support-page .support-faq-cat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #1db954; }
body.support-page .support-faq .hfaq-list { gap: 8px; }
body.support-page .support-faq .hfaq-item { border-radius: 16px; background: #fff; border-color: #e1e7e3; }
body.support-page .support-faq .hfaq-item[open] { border-color: #cfd8d3; }
body.support-page .support-faq .hfaq-ico { width: 24px; height: 24px; }
body.support-page .support-faq .hfaq-ico::before, body.support-page .support-faq .hfaq-ico::after { width: 10px; }
/* 카테고리 탭(JS가 켜졌을 때만 보임): 회색 알약 트랙 + 검정 알약 표시가 옆으로 흘러 이동 */
body.support-page .support-faq-tabs { position: relative; display: none; max-width: 100%; margin: 0 auto 20px; padding: 5px; border-radius: 999px; background: #f5f5f3; }
body.support-page .support-faq.is-tabs .support-faq-tabs { display: flex; width: fit-content; }
body.support-page .support-faq.is-tabs .support-faq-cat { display: none; }
body.support-page .support-faq-tabs::before { content: ""; position: absolute; top: 5px; bottom: 5px; left: 0; width: var(--faq-w, 0); border-radius: 999px; background: #111; transform: translateX(var(--faq-x, 0)); transition: transform .45s cubic-bezier(.4, 0, .2, 1), width .45s cubic-bezier(.4, 0, .2, 1); }
body.support-page .support-faq-tabs.no-anim::before { transition: none; }
body.support-page .support-faq-tab { position: relative; z-index: 1; display: inline-flex; flex: none; align-items: center; justify-content: center; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: #666; font-size: 14px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; cursor: pointer; transition: color .3s ease; }
body.support-page .support-faq-tab:hover:not(.is-active) { color: #111; }
body.support-page .support-faq-tab.is-active { color: #fff; }
body.support-page .support-faq-tab:focus-visible { outline: 2px solid #1db954; outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { body.support-page .support-faq-tabs::before { transition: none; } }
@media (max-width: 720px) {
  body.support-page .support-faq.is-tabs .support-faq-tabs { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  body.support-page .support-faq-tabs::-webkit-scrollbar { display: none; }
  body.support-page .support-faq-tab { height: 36px; padding: 0 14px; font-size: 13.5px; }
  body.support-page .support-faq .hfaq-item summary { padding: 14px 16px; font-size: 14.5px; }
  body.support-page .support-faq .hfaq-a { padding: 0 16px 16px; }
}

/* 고객센터: 이메일 아래 문의 시 안내 문구 */
body.support-page .support-notice { margin-top: 16px; padding: 22px 26px; border-radius: 20px; background: #f9f9f9; color: #555; font-size: 14px; line-height: 1.75; word-break: keep-all; }
body.support-page .support-notice p { margin: 0 0 8px; color: #555 !important; }
body.support-page .support-notice p + p { margin-top: 14px; }
body.support-page .support-notice ul { margin: 0; padding-left: 18px; list-style: disc; }
body.support-page .support-notice li { margin: 2px 0; color: #444; font-weight: 600; }
@media (max-width: 720px) {
  body.support-page .support-notice { padding: 18px 18px; font-size: 13.5px; }
}

/* 고객센터: 이메일 카드 + 안내 문구를 하나의 회색 박스로 묶고, 이메일 카드는 흰 바탕 */
body.support-page .support-contact-box { padding: 20px; border-radius: 24px; background: #f9f9f9; }
body.support-page .support-contact-box .support-tool-card { padding: 20px 24px !important; border: 0 !important; border-radius: 18px !important; background: #fff !important; }
body.support-page .support-contact-box .support-notice { margin-top: 0; padding: 22px 8px 6px; border-radius: 0; background: transparent; }
@media (max-width: 720px) {
  body.support-page .support-contact-box { padding: 14px; border-radius: 20px; }
  body.support-page .support-contact-box .support-tool-card { padding: 16px 18px !important; }
  body.support-page .support-contact-box .support-notice { padding: 18px 6px 4px; }
}

/* 안내 문구 강조: 두 문장은 진하고 굵게(글자는 한 단계 작게), 아래 목록은 가볍게 */
body.support-page .support-contact-box .support-notice p { margin: 0 0 6px; color: #333 !important; font-size: 15px !important; font-weight: 600; line-height: 1.7; letter-spacing: -.02em; }
body.support-page .support-contact-box .support-notice p + p { margin-top: 16px; }
body.support-page .support-contact-box .support-notice ul { margin-top: 4px; }
body.support-page .support-contact-box .support-notice li { margin: 2px 0; color: #555; font-size: 14px; font-weight: 400; }
@media (max-width: 720px) {
  body.support-page .support-contact-box .support-notice p { font-size: 14.5px !important; }
  body.support-page .support-contact-box .support-notice li { font-size: 13.5px; }
}