/* ==========================================================================
   Surfit 고객센터 시안 v5 — 토스 고객센터 벤치마크 강화
   ========================================================================== */
/* 폰트 = Pretendard Variable(폼 관리 공개폼/완료화면과 동일 — 2026-07-05 사용자 확정, 고객센터·폼
   전부 통일). 실제 로드는 jsDelivr CDN(<link>, help/layout.blade.php) — 로컬 @font-face(LL Circular)
   는 더 이상 안 써서 제거(사용하던 곳이 --font 변수 하나뿐이라 안전하게 삭제). */

:root {
    --help-content-width: 1096px;
    --help-content-gutter: 28px;
    --sf-main: #327df5;                       /* 서핏 브랜드블루 SSOT(#327df5) — 상태·오류 페이지(_status_styles --pri)와 통일 */
    --sf-main-tint: rgba(50, 125, 245, 0.08);
    --text-1: #191f28;
    --text-2: #333d4b;
    --text-3: #4e5968;
    --text-4: #8b95a1;
    --text-5: #b0b8c1;
    --fill-1: #f2f4f6;
    --fill-2: #f9fafb;
    --divider: #e5e8eb;   /* 보더 캐논 — 상태/오류(_status_styles --bd)·폼(PublicForm)과 통일(Toss 계열 SSOT) */
    --contact-primary: #191f28;
    --contact-primary-hover: #333d4b;
    --font: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--text-1); background: #fff; font-size: 16px; line-height: 1.6; letter-spacing: -0.01em; word-break: keep-all; }
a { color: inherit; text-decoration: none; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: rgba(50,125,245,0.14); }
button { font-family: var(--font); cursor: pointer; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: #191f28; color: #fff; font-size: 14px; font-weight: 700; transform: translateY(-150%); transition: transform 0.14s var(--ease-out); }
.skip-link:focus-visible { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; }

.wide, .mid { max-width: var(--help-content-width); margin: 0 auto; padding: 0 var(--help-content-gutter); }

/* --- 헤더: 로고 + 메뉴 --- */
.gnb { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,0.92); backdrop-filter: saturate(1.8) blur(16px); }
.gnb-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
/* 로고 = 심볼(마크) + 브랜드명 텍스트 — 폼 관리(.pf-brand/.pf-mark/.pf-wm)와 동일 구성으로 통일(2026-07-04) */
.gnb-logo { display: flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; }
.gnb-mark { display: flex; align-items: center; }
.gnb-mark img { height: 23px; width: auto; display: block; }
.gnb-wm { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-1); }
.gnb-menu { display: flex; align-items: center; gap: 2px; }
.gnb-menu a { font-size: 15px; font-weight: 600; color: var(--text-3); padding: 9px 13px; border-radius: 10px; transition: background 0.12s, color 0.12s; letter-spacing: -0.01em; }
.gnb-menu a:hover { background: var(--fill-1); color: var(--text-1); }
.gnb-menu a.accent { color: var(--sf-main); background: var(--sf-main-tint); font-weight: 700; }
.gnb-menu a.accent:hover { background: var(--sf-main-tint); color: var(--sf-main); }

/* 홈·서브 페이지는 같은 히어로 위로 네비게이션을 올린다. */
.help-home .gnb, .help-subpage .gnb { position: absolute; left: 0; right: 0; background: transparent; backdrop-filter: none; }
.help-home .gnb-wm, .help-home .gnb-menu a, .help-home .gnb-menu a.accent,
.help-subpage .gnb-wm, .help-subpage .gnb-menu a, .help-subpage .gnb-menu a.accent { color: rgba(255,255,255,0.94); }
.help-home .gnb-menu a:hover, .help-home .gnb-menu a.accent:hover,
.help-subpage .gnb-menu a:hover, .help-subpage .gnb-menu a.accent:hover { color: #fff; background: rgba(255,255,255,0.13); }
.help-header-tone-white .gnb-menu a.accent { color: #fff; background: rgba(255,255,255,0.14); }
.help-header-tone-white .gnb-menu a.accent:hover { color: #fff; background: rgba(255,255,255,0.20); }
.help-home .gnb-mark--default img, .help-subpage .gnb-mark--default img { filter: brightness(0) invert(1); }

/* --- 일반(서브) 헤더는 기존 검색 헤더 리듬을 유지한다. 홈에만 아래 배경 히어로를 적용한다. --- */
.hero { padding: 36px 0 8px; }
.hero h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.023em; color: var(--text-2); line-height: 1.35; }
.search { position: relative; margin-top: 0; }
.hero--home, .hero--subpage { height: 300px; min-height: 300px; padding: 0; color: #fff; background-color: var(--help-hero-color, #edf4ff); background-image: linear-gradient(rgba(7,22,59,var(--hero-overlay-dark,0.04)), rgba(7,22,59,var(--hero-overlay-dark,0.04))), var(--help-hero-image, none); background-size: cover; background-position: center; }
.help-hero-background-default .hero--home, .help-hero-background-default .hero--subpage { background-color: #edf4ff; background-image: radial-gradient(circle at 82% 18%, rgba(50,125,245,0.20), transparent 30%), radial-gradient(circle at 18% 84%, rgba(117,160,255,0.17), transparent 34%), linear-gradient(135deg, #f5f8ff 0%, #e9f1ff 52%, #f4f7fb 100%); }
.help-hero-background-color .hero--home, .help-hero-background-color .hero--subpage { background-color: var(--help-hero-color, #edf4ff); background-image: radial-gradient(circle at 82% 18%, rgba(255,255,255,0.18), transparent 32%), linear-gradient(110deg, rgba(255,255,255,0.06), rgba(7,22,59,0.04)); }
.help-hero-background-image.help-header-tone-black .hero--home,
.help-hero-background-image.help-header-tone-black .hero--subpage { background-image: linear-gradient(rgba(255,255,255,var(--hero-overlay-light,0)), rgba(255,255,255,var(--hero-overlay-light,0))), var(--help-hero-image, none); }
.hero--home .mid, .hero--subpage .mid { position: relative; height: 100%; }
.hero--home .hero-title, .hero--subpage .hero-title { position: absolute; left: var(--help-content-gutter); bottom: 130px; margin: 0; color: #fff; font-size: 28px; font-weight: 700; letter-spacing: -0.034em; line-height: 1.3; }
.hero--home .search, .hero--subpage .search { --help-search-muted: rgba(255,255,255,0.80); position: absolute; right: var(--help-content-gutter); bottom: 48px; left: var(--help-content-gutter); margin: 0; }
.hero--home .search input, .hero--subpage .search input { height: 56px; border-color: transparent; background: rgba(255,255,255,0.17); color: #fff; box-shadow: none; }
.hero--home .search input::placeholder, .hero--home .search .ico, .hero--subpage .search input::placeholder, .hero--subpage .search .ico { color: var(--help-search-muted); }
.hero--home .search:focus-within, .hero--subpage .search:focus-within { --help-search-muted: rgba(51,61,75,0.72); }
.hero--home .search input:focus, .hero--subpage .search input:focus { color: #191f28; }
.help-header-tone-black .gnb-wm,
.help-header-tone-black .gnb-menu a,
.help-header-tone-black .gnb-menu a.accent { color: rgba(25,31,40,0.94); }
.help-header-tone-black .gnb-menu a.accent { color: var(--sf-main); background: var(--sf-main-tint); }
.help-header-tone-black .gnb-menu a:hover,
.help-header-tone-black .gnb-menu a.accent:hover { color: #191f28; background: rgba(25,31,40,0.07); }
.help-header-tone-black .gnb-menu a.accent:hover { color: var(--sf-main); background: rgba(50,125,245,0.14); }
.help-header-tone-black .gnb-mark--default img { filter: none; }
.help-header-tone-black .hero-title { color: #191f28; }
.help-header-tone-black .hero--home .search,
.help-header-tone-black .hero--subpage .search { --help-search-muted: rgba(51,61,75,0.72); }
.help-header-tone-black .hero--home .search input,
.help-header-tone-black .hero--subpage .search input { background: rgba(255,255,255,0.74); color: #191f28; }
.search input { display: block; width: 100%; background: var(--fill-1); border: 2px solid transparent; border-radius: 12px; padding: 0 20px 0 54px; height: 62px; font-size: 18px; font-weight: 500; font-family: var(--font); color: var(--text-1); outline: none; box-shadow: none; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; letter-spacing: -0.01em; }
.search input::placeholder { color: var(--help-search-muted, var(--text-4)); opacity: 1; }
.search input:hover:not(:focus):not(:focus-visible) { border-color: rgba(50,125,245,0.45); box-shadow: none; }
.search input:focus, .search input:focus-visible { border-color: var(--sf-main); background: #fff; box-shadow: 0 0 0 3px rgba(50,125,245,0.16); outline: none; }
.search .ico { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--text-4); display: flex; }
.search .ico svg { width: 22px; height: 22px; }
.article-search { margin: 6px 0 36px; }

/* --- 본문 레이아웃: 좌측 카테고리 + 우측 콘텐츠 --- */
.faq { padding: 42px 0 0; }
/* 네비 폭 200px 고정(사용자 재지시 2026-07-04 — 직전의 2:3 비율은 오히려 너무 넓었음).
   align-items:stretch 로 네비 그리드 셀 높이를 콘텐츠 리스트 높이만큼 늘려, sticky 네비가
   리스트보다 일찍 스크롤아웃되지 않고 리스트 끝까지 붙어있게 한다(네비가 리스트보다 짧아 보이던 피드백). */
.faq-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(40px, 8vw, 80px); align-items: stretch; }

/* 좌측 카테고리 내비 — 시인성/구분감 강화(활성 브랜드 틴트 필 + 카운트) */
.cat-nav { position: sticky; top: 88px; }
.cat-nav .nav-title { font-size: 13px; font-weight: 700; color: var(--text-4); letter-spacing: 0.01em; padding: 0 12px 12px; }
.cat-nav ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.cat-nav button, .cat-nav a.item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; text-align: left; padding: 9px 12px; border: none; background: none; border-radius: 12px; font-size: 15.5px; font-weight: 650; color: var(--text-3); letter-spacing: -0.012em; line-height: 1.45; }
.cat-nav button:hover, .cat-nav a.item:hover { background: var(--fill-2); color: var(--text-1); }
.cat-nav a.item.on, .cat-nav button.on { background: none; color: var(--sf-main); font-weight: 700; }
.cat-nav .cat-label { flex: 1 1 auto; min-width: 0; }
.cat-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--fill-1); color: var(--text-4); }
.cat-icon svg { display: block; width: 17px; height: 17px; overflow: visible; }
.cat-icon--blue { --cat-icon-bg: #eaf2ff; --cat-icon-color: #327df5; }
.cat-nav a.item.on .cat-icon, .cat-nav button.on .cat-icon { background: var(--cat-icon-bg); color: var(--cat-icon-color); }
.cat-nav a.item:focus-visible, .cat-nav button:focus-visible { outline: 2px solid var(--sf-main); outline-offset: 2px; }
.cat-nav .cnt { font-size: 13px; font-weight: 600; color: var(--text-5); }
.cat-nav .on .cnt { color: var(--sf-main); }

/* 모바일 카테고리 칩 (데스크톱 숨김) */
.chips { display: none; gap: 8px; margin: 8px 0 4px; overflow-x: auto; padding-bottom: 4px; -ms-overflow-style: none; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 38px; padding: 0 16px; border: none; border-radius: 999px; background: var(--fill-1); color: var(--text-3); font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; transition: background 0.14s, color 0.14s; }
.chip.on { background: var(--text-1); color: #fff; }

/* 우측 콘텐츠 */
.faq-list { list-style: none; }
.faq-list li a { display: flex; align-items: center; gap: 15px; padding: 24px 14px; margin: 0 -14px; border-radius: 14px; font-size: 18px; font-weight: 500; color: var(--text-1); letter-spacing: -0.016em; line-height: 1.5; transition: background 0.12s; }
.faq-list li a:hover { background: var(--fill-2); }
.faq-list li { border-bottom: none; }
.faq-list li:last-child { border-bottom: none; }
.faq-list .q { flex: none; color: var(--text-4); font-weight: 600; font-size: 18px; line-height: 1; }
.faq-list .article-title-line { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 8px; }
.faq-list .txt { min-width: 0; }
.article-chip { display: inline-flex; flex: none; align-items: center; justify-content: center; min-height: 24px; padding: 0 9px; border-radius: 999px; background: var(--sf-main-tint); color: var(--sf-main); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: -0.01em; }
.article-chip--detail { display: flex; width: max-content; margin: 0 0 14px; }
.search-match { font-weight: 700; color: #327df5; }
.faq-list .arr { flex: none; color: var(--text-5); display: flex; }
.faq-empty { padding: 60px 0; text-align: center; color: var(--text-4); font-size: 15px; }
.help-empty-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 24px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--fill-1); color: var(--text-2); font-size: 14px; font-weight: 700; transition: background 0.14s, color 0.14s; }
.help-empty-link:hover { background: #e9edf1; color: var(--text-1); }
.list-end { padding: 28px 0 8px; text-align: center; font-size: 13.5px; color: var(--text-5); }
.list-loading { display: flex; justify-content: center; padding: 22px 0; }
.list-loading[hidden] { display: none; }   /* ★ [hidden] 무력화(display:flex) 방지 — 무한 스피너 버그 픽스 */
.spinner { width: 22px; height: 22px; border: 2.5px solid var(--fill-1); border-top-color: var(--text-5); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- 문의 배너: Intercom 레퍼런스처럼 이미지 + 오버레이 + 텍스트·CTA 조합. --- */
.contact { margin-top: 20vh; padding: 0 0 96px; }
.contact-card { position: relative; isolation: isolate; min-height: 312px; overflow: hidden; display: grid; place-items: center; padding: 48px 32px; border-radius: 20px; color: #fff; background-color: #123f9d; background-image: linear-gradient(rgba(7, 22, 59, var(--contact-overlay-dark, 0.42)), rgba(7, 22, 59, var(--contact-overlay-dark, 0.42))), var(--contact-background-image); background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); }
.contact-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 76% 18%, rgba(255,255,255,0.12), transparent 31%); pointer-events: none; }
.contact-card__content { width: min(100%, 620px); text-align: center; }
.contact-card h2 { color: #fff; font-size: 30px; font-weight: 600; letter-spacing: -0.038em; line-height: 1.3; text-wrap: balance; }
.contact-card__description { margin: 14px auto 0; max-width: 480px; color: rgba(255,255,255,0.84); font-size: 15px; font-weight: 500; line-height: 1.65; letter-spacing: -0.016em; }
.contact-card__actions { display: flex; justify-content: center; margin-top: 26px; }
.contact-card__button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 11px; background: #0d0f14; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -0.012em; box-shadow: 0 2px 6px rgba(0,0,0,0.18); transition: background-color 0.12s; }
.contact-card__button:hover { background: #191f28; color: #fff; }
.contact-card__button:active { background: #333d4b; }
.help-contact-tone-black .contact-card { color: #191f28; background-color: #f2f4f6; background-image: linear-gradient(rgba(255,255,255,var(--contact-overlay-light, 0.60)), rgba(255,255,255,var(--contact-overlay-light, 0.60))), var(--contact-background-image); box-shadow: inset 0 0 0 1px rgba(25,31,40,0.10); }
.help-contact-tone-black .contact-card::before { background: radial-gradient(circle at 76% 18%, rgba(255,255,255,0.45), transparent 31%); }
.help-contact-tone-black .contact-card h2 { color: #191f28; }
.help-contact-tone-black .contact-card__description { color: rgba(51,61,75,0.82); }

/* 키보드 사용자는 마우스 hover와 동일한 위치 정보를 명확한 포커스 링으로 확인한다. */
.gnb-logo:focus-visible, .gnb-menu a:focus-visible, .chip:focus-visible,
.faq-list li a:focus-visible, .help-empty-link:focus-visible, .contact-card__button:focus-visible,
.back-top:focus-visible, .article-body a:focus-visible {
    outline: 2px solid var(--sf-main);
    outline-offset: 3px;
}
.footer-comp a:focus-visible, .article-body summary:focus-visible { outline: 2px solid var(--sf-main); outline-offset: 3px; border-radius: 4px; }
.help-header-tone-white .gnb-logo:focus-visible, .help-header-tone-white .gnb-menu a:focus-visible,
.help-contact-tone-white .contact-card__button:focus-visible { outline-color: #fff; }

/* --- 푸터는 resources/sass/shared/service-footer.scss를 서비스 SPA와 공유한다. --- */

/* ==========================================================================
   아티클(답변) 페이지 — 좌측 카테고리 유지
   ========================================================================== */
.article-wrap { padding: 40px 0 0; }
/* LNB를 제외한 컨테이너 폭을 전부 사용한다. 큰 이미지·표와 긴 제목이 불필요하게 좁아지지 않는다. */
.article-main { min-width: 0; max-width: none; }
.back-top { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text-4); margin-bottom: 26px; transition: color 0.12s; }
.back-top:hover { color: var(--text-1); }
.back-top svg { display: block; }
.article-main h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.037em; line-height: 1.25; color: var(--text-1); text-wrap: balance; }
.article-body { margin-top: 36px; font-size: 16px; line-height: 1.7; color: var(--text-2); letter-spacing: -0.01em; overflow-wrap: break-word; }
.article-body > *:first-child { margin-top: 0; }
.article-body > *:last-child { margin-bottom: 0; }
.article-body > p:first-child { color: var(--text-3); letter-spacing: -0.018em; }
.article-body > p { font-size: inherit; line-height: inherit; }
.article-body p { margin-bottom: 16px; }
.article-body strong { font-weight: 700; color: inherit; }
.article-body em { color: var(--text-3); }
.article-body h2 { font-size: 26px; font-weight: 700; color: var(--text-1); margin: 64px 0 18px; letter-spacing: -0.03em; line-height: 1.38; scroll-margin-top: 96px; text-wrap: balance; }
.article-body h3 { font-size: 20px; font-weight: 700; color: var(--text-1); margin: 44px 0 14px; letter-spacing: -0.022em; line-height: 1.48; scroll-margin-top: 96px; }
.article-body h4 { font-size: 17px; font-weight: 700; color: var(--text-1); margin: 32px 0 10px; letter-spacing: -0.014em; line-height: 1.52; scroll-margin-top: 96px; }
.article-body a { color: var(--sf-main); font-weight: 600; text-decoration: underline; text-decoration-color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.article-body a:hover { text-decoration-color: currentColor; }
.article-body ul { margin: 0 0 28px 2px; padding-left: 25px; list-style: disc; }
.article-body ul li::marker { color: #8db7fb; }
/* 순서 목록: 1단계 "1." / 2단계(중첩) "1)" — CSS 카운터(중첩이 상위 번호를 건드리지 않게 레벨별 카운터). */
.article-body ol { margin: 0 0 28px 2px; padding-left: 27px; list-style: none; counter-reset: sf-l1; }
.article-body ol > li { counter-increment: sf-l1; position: relative; }
.article-body ol > li::before { content: counter(sf-l1) "."; position: absolute; left: -25px; color: var(--sf-main); font-weight: 600; font-variant-numeric: tabular-nums; }
.article-body ol ol { counter-reset: sf-l2; margin: 8px 0 0; }
.article-body ol ol > li { counter-increment: sf-l2; }
.article-body ol ol > li::before { content: counter(sf-l2) ")"; }
.article-body li { margin-bottom: 9px; line-height: 1.78; }
.article-body li > ul, .article-body li > ol { margin-top: 14px; margin-bottom: 0; }
.article-body figure { margin: 38px 0 30px; }
.article-body figure img, .article-body img { max-width: 100%; height: auto; border: 1px solid var(--divider); border-radius: 14px; display: block; box-shadow: 0 1px 2px rgba(25, 31, 40, 0.025); }
.article-body figcaption { margin-top: 10px; padding: 0 8px; font-size: 13px; line-height: 1.65; color: var(--text-4); text-align: center; }
.article-body blockquote { margin: 0 0 28px; padding: 17px 18px; border: 1px solid #d7e5ff; border-radius: 14px; background: #f6f9ff; color: var(--text-3); font-size: 16px; line-height: 1.75; }
.article-body blockquote > :last-child { margin-bottom: 0; }
.article-body code { padding: 2px 6px; border: 1px solid #e9edf1; border-radius: 5px; background: #f7f8fa; color: #3d4a5a; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 0.84em; font-weight: 500; word-break: break-word; }
.article-body kbd { display: inline-block; min-width: 1.5em; padding: 1px 5px; border: 1px solid #d7dce2; border-bottom-width: 2px; border-radius: 5px; background: #fff; color: var(--text-3); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.78em; font-weight: 600; line-height: 1.55; text-align: center; vertical-align: 0.04em; }
.article-body mark { padding: 1px 3px; border-radius: 3px; background: #fff2ad; color: inherit; }
.article-body hr { border: none; border-top: 1px solid var(--divider); margin: 52px 0; }
.article-body .callout { display: flex; gap: 14px; padding: 17px 18px; border: 1px solid var(--divider); border-radius: 14px; background: #f8fafc; margin-bottom: 28px; font-size: 15.5px; line-height: 1.75; color: var(--text-3); }
.article-body .callout > span:first-child { flex: none; font-size: 18px; line-height: 1.5; }
/* 콜아웃 배경색 변형 — 어드민 에디터 프리셋(callout-{color})과 짝 */
.article-body .callout.callout-blue { background: #f3f8ff; border-color: #cfe0ff; }
.article-body .callout.callout-yellow { background: #fff9e9; border-color: #f7e7b1; }
.article-body .callout.callout-red { background: #fff5f5; border-color: #ffd7d7; }
.article-body .callout.callout-green { background: #effbf6; border-color: #ccefe0; }
.article-body table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 10px 0 28px; font-size: 14.5px; border: 1px solid var(--divider); border-radius: 14px; overflow: hidden; }
.article-body th { text-align: left; font-weight: 700; background: #f8fafc; color: var(--text-2); }
.article-body th, .article-body td { padding: 14px 16px; border-bottom: 1px solid var(--divider); line-height: 1.65; vertical-align: top; }
.article-body tr:last-child td { border-bottom: none; }
/* 비공개 미리보기 배너(어드민 전용 노출) */
.preview-banner { position: sticky; top: 64px; z-index: 15; text-align: center; padding: 11px 16px; font-size: 14px; font-weight: 600; color: #92400e; background: #fef3c7; border-bottom: 1px solid #fde68a; }

/* 어드민 에디터 산출물 보강 — 에디터는 li·콜아웃 내용을 <p>로 감싸므로 내부 p 마진 상쇄 */
.article-body li p { margin: 0; }
.article-body .callout p { margin: 0 0 10px; }
.article-body .callout p:last-child { margin: 0; }
/* 어드민 에디터 산출물 보강 — 빈 캡션 숨김 · 토글(details) · 코드블록 */
.article-body figcaption:empty { display: none; }
.article-body details { margin: 0 0 28px; padding: 17px 18px; border: 1px solid var(--divider); border-radius: 14px; background: #fff; }
.article-body details summary { cursor: pointer; font-size: 16px; font-weight: 650; color: var(--text-2); }
.article-body details[open] summary { margin-bottom: 12px; }
.article-body pre { margin: 12px 0 28px; padding: 20px; overflow-x: auto; border: 1px solid var(--divider); border-radius: 14px; background: #f8fafc; color: #344052; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 14px; line-height: 1.75; white-space: pre; word-break: normal; }
.article-body pre code { padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font-size: inherit; font-weight: inherit; word-break: normal; }
.article-body iframe, .article-body video { display: block; width: 100%; max-width: 100%; margin: 40px 0 30px; border: 1px solid var(--divider); border-radius: 14px; }

/* ==========================================================================
   인터랙션 캐논 (DESIGN-POLISH 부록 B) — 레퍼런스 = 웹프로필 LNB(t-button)
   요소 유형별 차등: LNB=배경 펴짐 채움 / 헤더·문의버튼=press / FAQ 콘텐츠=옅은 배경+화살표.
   ========================================================================== */
:root { --ease-out: cubic-bezier(.23, 1, .32, 1); }

/* --- LNB(좌측 카테고리 네비) = 배경 레이어가 납작→펴지며 채워짐 + 글자 3px (요소는 안 움직임) --- */
.cat-nav button, .cat-nav a.item { position: relative; z-index: 0; isolation: isolate; transition: color 0.1s ease; }
.cat-nav button > *, .cat-nav a.item > * { position: relative; z-index: 1; transition: transform 0.13s var(--ease-out); }
.cat-nav button::before, .cat-nav a.item::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  background: rgba(204, 209, 223, 0.22); -webkit-backdrop-filter: saturate(1.2); backdrop-filter: saturate(1.2);
  opacity: 0; transform: scale3d(.9, 1, .55);
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.cat-nav button:hover::before, .cat-nav a.item:hover::before { opacity: 1; transform: none; }
.cat-nav button:active::before, .cat-nav a.item:active::before { opacity: 1; transform: none; background: rgba(204, 209, 223, 0.4); }
.cat-nav button:hover, .cat-nav a.item:hover { background: transparent; }
.cat-nav button:hover > *, .cat-nav a.item:hover > *,
.cat-nav button:active > *, .cat-nav a.item:active > * { transform: translateX(3px); }
/* 현재선택(.on) = 파란 볼드(기존 help.css 유지). hover ::before 는 그 위에 얹혀 살짝 밝아짐 */

/* --- FAQ 콘텐츠 리스트 = 절제: 옅은 배경 단순 페이드 + 화살표만(펴짐·글자이동 없음) --- */
.faq-list li a { position: relative; z-index: 0; isolation: isolate; }
.faq-list li a > * { position: relative; z-index: 1; }
.faq-list li a::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  background: rgba(150, 160, 175, 0.10); opacity: 0; transition: opacity 0.16s ease, background 0.16s ease;
}
.faq-list li a:hover::before { opacity: 1; }
.faq-list li a:active::before { opacity: 1; background: rgba(150, 160, 175, 0.17); }
.faq-list li a:hover { background: transparent; }  /* 기존 즉시배경 무력화 */
.faq-list .arr { transition: transform 0.15s var(--ease-out), color 0.12s ease; }
@media (hover: hover) and (pointer: fine) { .faq-list li a:hover .arr { transform: translateX(3px); color: var(--text-3); } }

/* --- 버튼류 = 눌리는 맛(press scale). 크기별 차등 --- */
.gnb-menu a { transition: background 0.12s var(--ease-out), color 0.12s var(--ease-out), transform 0.1s var(--ease-out); }
.gnb-menu a:active { transform: translateY(0.5px); }
.help-empty-link, .chip { transition: background 0.14s var(--ease-out), color 0.14s var(--ease-out), transform 0.1s var(--ease-out); }
.help-empty-link:active, .chip:active { transform: scale(0.98); }

/* --- 뒤로가기(상세) = 화살표 미세 이동 --- */
.back-top svg { transition: transform 0.15s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .back-top:hover svg { transform: translateX(-3px); } }

/* --- 검색 인터랙션 = 어드민 폼 SSOT와 같은 150ms 배경·테두리 전환 --- */
.search input { transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; }

/* --- 등장 = 콘텐츠 영역만 은은한 페이드업(검색창·헤더·네비 고정) --- */
.faq-main, .article-main { animation: helpRise 0.45s var(--ease-out) both; }
@keyframes helpRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .faq-main, .article-main { animation: none; }
  .cat-nav button::before, .cat-nav a.item::before, .faq-list li a::before { transition: opacity 0.12s ease !important; transform: none !important; }
  .contact-card__button, .help-empty-link, .chip, .gnb-menu a { transition: none !important; }
  .skip-link { transition: none !important; }
  .contact-card__button:hover, .contact-card__button:active, .help-empty-link:active, .chip:active, .gnb-menu a:active { transform: none !important; }
  .spinner { animation: none; }
  html { scroll-behavior: auto; }
}

/* --- 반응형 --- */
@media (max-width: 800px) {
    .hero { padding: 22px 0 4px; }
    .hero h1 { font-size: 23px; }
    .help-home .gnb, .help-subpage .gnb { position: absolute; }
    .help-home .gnb-inner, .help-subpage .gnb-inner { height: 58px; }
    .help-home .gnb-menu a, .help-subpage .gnb-menu a { padding: 8px 8px; font-size: 14px; }
    .hero--home, .hero--subpage { height: 300px; min-height: 300px; padding: 0; background-position: center; }
    .hero--home .hero-title, .hero--subpage .hero-title { bottom: 128px; font-size: 28px; }
    .hero--home .search, .hero--subpage .search { bottom: 48px; margin: 0; }
    .hero.hero--home .search, .hero.hero--subpage .search { margin: 0; }
    .search input { font-size: 16px; height: 54px; padding: 0 16px 0 46px; }
    .search .ico svg { width: 22px; height: 22px; }
    .search .ico { left: 16px; }
    .gnb-menu .only-pc { display: none; }
    .gnb-mark img { height: 20px; }
    .gnb-wm { font-size: 15px; }
    .faq { padding: 26px 0 0; }
    .faq-layout { display: block; }
    .cat-nav { display: none; }
    .chips { display: flex; }
    .faq-list li a { font-size: 16.5px; padding: 20px 10px; margin: 0 -10px; }
    .contact { margin-top: 20vh; padding-bottom: 68px; }
    .contact-card { min-height: 292px; padding: 38px 22px; border-radius: 16px; }
    .contact-card h2 { font-size: 25px; }
    .contact-card__description { margin-top: 12px; font-size: 15px; }
    .contact-card__actions { margin-top: 23px; }
    .contact-card__button { width: 100%; max-width: 260px; }
    .article-main { max-width: none; }
    .back-top { margin-bottom: 20px; }
    .article-main h1 { font-size: 28px; }
    .article-body { margin-top: 28px; font-size: 16px; }
    .article-body p { margin-bottom: 16px; }
    .article-body h2 { font-size: 21px; margin: 44px 0 14px; }
    .article-body h3 { font-size: 18px; margin: 32px 0 11px; }
    .article-body h4 { font-size: 16px; margin: 26px 0 9px; }
    .article-body ul, .article-body ol { margin-bottom: 26px; }
    .article-body figure { margin: 32px 0 26px; }
    .article-body blockquote { margin-bottom: 26px; padding: 14px 16px; }
    .article-body .callout { margin-bottom: 26px; padding: 16px; font-size: 15px; }
    .article-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 14px; white-space: nowrap; }
    .article-body th, .article-body td { min-width: 112px; padding: 12px 14px; white-space: normal; }
    .article-body details { margin-bottom: 26px; padding: 14px 16px; }
    .article-body pre { margin-bottom: 26px; padding: 16px; font-size: 13px; }
}