/* ===================================================
       에브리쉐어 FAQ — 네오 브루탈리즘 인라인 CSS
       =================================================== */

    /* --- 디자인 토큰 (EVERYSHARE 공통) --- */
    :root {
      --nb-cream: #F0FFF4;
      --nb-black: #191F28;
      --nb-orange: #0D9488;
      --nb-lime: #99F6E4;
      --nb-lime-bg: #CCFBF1;
      --nb-lavender: #C4B5FD;
      --nb-yellow: #FDE68A;
      --nb-pink: #FECDD3;
      --nb-sky: #DDD6FE;
      --nb-peach: #FDE68A;
      --nb-text: #191F28;
      --nb-text-sub: #555;
      --nb-text-muted: #888;
      --nb-border: 1.5px solid #D1D5DB;
      --nb-border-thick: 2px solid #191F28;
      --nb-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
      --nb-shadow: 0 2px 8px rgba(0,0,0,0.1);
      --nb-shadow-hover: 0 4px 16px rgba(0,0,0,0.12);
      --nb-radius: 8px;
      --nb-font: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
    }

    /* --- 리셋 & 기본 --- */
    *, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: var(--nb-font);
      background: var(--nb-cream);
      color: var(--nb-text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      min-height: 100vh;
      /* 하단 안전 영역 고려 */
      padding-bottom: env(safe-area-inset-bottom, 0);
    }

    /* --- 상단 헤더 (56px sticky) --- */
    .faq-header {
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      height: 56px;
      padding: 0 16px;
      background: var(--nb-cream);
      border-bottom: var(--nb-border);
    }

    /* 뒤로가기 버튼 */
    .faq-header-back {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border: var(--nb-border);
      border-radius: var(--nb-radius);
      background: #fff;
      box-shadow: var(--nb-shadow-sm);
      cursor: pointer;
      text-decoration: none;
      color: var(--nb-text);
      font-size: 18px;
      flex-shrink: 0;
      transition: transform 0.15s, box-shadow 0.15s;
    }

    .faq-header-back:hover {
      transform: translate(-1px, -1px);
      box-shadow: var(--nb-shadow);
    }

    .faq-header-back:active {
      transform: translate(1px, 1px);
      box-shadow: none;
    }

    /* 헤더 타이틀 */
    .faq-header-title {
      flex: 1;
      text-align: center;
      font-size: 16px;
      font-weight: 700;
      /* 뒤로가기 버튼 너비만큼 오른쪽 패딩으로 센터링 보정 */
      padding-right: 36px;
    }

    /* --- 메인 콘텐츠 영역 --- */
    .faq-main {
      max-width: 640px;
      margin: 0 auto;
      padding: 20px 16px 40px;
    }

    /* --- 검색바 --- */
    .faq-search-wrap {
      position: relative;
      margin-bottom: 16px;
    }

    /* 돋보기 아이콘 (SVG 인라인) */
    .faq-search-icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      color: var(--nb-text-muted);
      pointer-events: none;
    }

    .faq-search-input {
      width: 100%;
      height: 48px;
      padding: 0 16px 0 42px;
      font-family: var(--nb-font);
      font-size: 15px;
      color: var(--nb-text);
      background: #fff;
      border: var(--nb-border);
      border-radius: var(--nb-radius);
      box-shadow: var(--nb-shadow-sm);
      outline: none;
      transition: border-color 0.15s, box-shadow 0.15s;
    }

    .faq-search-input::placeholder {
      color: var(--nb-text-muted);
    }

    .faq-search-input:focus {
      border-color: var(--nb-orange);
      box-shadow: 2px 2px 0px var(--nb-orange);
    }

    /* focus-visible: 키보드 탐색 시만 아웃라인 표시 */
    .faq-search-input:focus-visible {
      outline: 2px solid var(--nb-orange);
      outline-offset: 2px;
    }

    /* --- 카테고리 탭 --- */
    .faq-tabs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 4px;
      margin-bottom: 20px;
      /* 스크롤바 숨김 (시각적) */
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    .faq-tabs::-webkit-scrollbar {
      display: none;
    }

    .faq-tab {
      flex-shrink: 0;
      padding: 8px 18px;
      font-family: var(--nb-font);
      font-size: 14px;
      font-weight: 600;
      color: var(--nb-text);
      background: #fff;
      border: var(--nb-border);
      border-radius: 999px; /* pill 형태 */
      box-shadow: none;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
    }

    .faq-tab:hover {
      background: var(--nb-yellow);
      box-shadow: var(--nb-shadow-sm);
    }

    /* 활성 탭 */
    .faq-tab.active {
      background: var(--nb-yellow);
      box-shadow: var(--nb-shadow-sm);
      font-weight: 700;
    }

    /* focus-visible */
    .faq-tab:focus-visible {
      outline: 2px solid var(--nb-orange);
      outline-offset: 2px;
    }

    /* --- 검색 결과 없음 메시지 --- */
    .faq-empty {
      display: none;
      text-align: center;
      padding: 48px 16px;
      color: var(--nb-text-muted);
      font-size: 15px;
      line-height: 1.7;
    }

    .faq-empty.visible {
      display: block;
    }

    .faq-empty-icon {
      font-size: 40px;
      margin-bottom: 12px;
    }

    /* --- FAQ 아코디언 리스트 --- */
    .faq-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* 개별 FAQ 아이템 */
    .faq-item {
      background: #fff;
      border: var(--nb-border);
      border-radius: var(--nb-radius);
      box-shadow: var(--nb-shadow-sm);
      overflow: hidden;
      transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    }

    /* 펼쳐진 상태 */
    .faq-item.open {
      background: var(--nb-yellow);
      box-shadow: var(--nb-shadow);
      transform: translate(-2px, -2px);
    }

    /* 질문 버튼 */
    .faq-question {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 16px;
      font-family: var(--nb-font);
      font-size: 15px;
      font-weight: 700;
      color: var(--nb-text);
      background: transparent;
      border: none;
      cursor: pointer;
      text-align: left;
      gap: 10px;
      line-height: 1.5;
    }

    .faq-question:focus-visible {
      outline: 2px solid var(--nb-orange);
      outline-offset: -2px;
    }

    /* 카테고리 뱃지 */
    .faq-badge {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2px 10px;
      font-size: 11px;
      font-weight: 700;
      border: 1.5px solid var(--nb-black);
      border-radius: 999px;
      white-space: nowrap;
    }

    /* 카테고리별 뱃지 색상 */
    .faq-badge[data-cat="signup"]  { background: var(--nb-sky); }
    .faq-badge[data-cat="payment"] { background: var(--nb-peach); }
    .faq-badge[data-cat="usage"]   { background: var(--nb-lime-bg); }
    .faq-badge[data-cat="cancel"]  { background: var(--nb-pink); }

    /* 질문 텍스트 */
    .faq-question-text {
      flex: 1;
    }

    /* 화살표 (chevron) */
    .faq-chevron {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      transition: transform 0.25s;
    }

    .faq-item.open .faq-chevron {
      transform: rotate(180deg);
    }

    /* 답변 영역 */
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    .faq-answer-inner {
      padding: 0 16px 20px 16px;
      font-size: 14px;
      line-height: 1.75;
      color: var(--nb-text-sub);
      /* 답변 상단 구분선 */
      border-top: 1.5px dashed var(--nb-black);
      margin-top: 0;
      padding-top: 16px;
      margin-left: 16px;
      margin-right: 16px;
      padding-left: 0;
      padding-right: 0;
    }

    /* 숨김 처리 (필터링) */
    .faq-item.hidden {
      display: none;
    }

    /* --- 하단 CTA 카드 --- */
    .faq-cta {
      margin-top: 32px;
      padding: 28px 24px;
      background: var(--nb-lavender);
      border: var(--nb-border);
      border-radius: var(--nb-radius);
      box-shadow: var(--nb-shadow);
      text-align: center;
    }

    .faq-cta-title {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 6px;
      color: var(--nb-text);
    }

    .faq-cta-desc {
      font-size: 14px;
      color: var(--nb-text-sub);
      margin-bottom: 16px;
      line-height: 1.6;
    }

    .faq-cta-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 12px 28px;
      font-family: var(--nb-font);
      font-size: 15px;
      font-weight: 700;
      color: #fff;
      background: var(--nb-black);
      border: var(--nb-border);
      border-radius: var(--nb-radius);
      box-shadow: var(--nb-shadow-sm);
      text-decoration: none;
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s;
    }

    .faq-cta-link:hover {
      transform: translate(-2px, -2px);
      box-shadow: var(--nb-shadow);
    }

    .faq-cta-link:active {
      transform: translate(1px, 1px);
      box-shadow: none;
    }

    .faq-cta-link:focus-visible {
      outline: 2px solid var(--nb-orange);
      outline-offset: 2px;
    }

    /* --- 반응형 --- */

    /* 480px 이상: 패딩 확대 */
    @media (min-width: 480px) {
      .faq-main {
        padding: 24px 24px 48px;
      }

      .faq-question {
        padding: 18px 20px;
        font-size: 16px;
      }

      .faq-answer-inner {
        font-size: 15px;
        margin-left: 20px;
        margin-right: 20px;
        padding-bottom: 24px;
      }
    }

    /* 768px 이상: 데스크탑 레이아웃 */
    @media (min-width: 768px) {
      .faq-main {
        padding: 32px 24px 56px;
      }

      .faq-header-title {
        font-size: 17px;
      }

      .faq-search-input {
        height: 52px;
        font-size: 16px;
      }

      .faq-tab {
        padding: 9px 22px;
        font-size: 15px;
      }

      .faq-cta {
        padding: 36px 32px;
      }
    }

    /* --- prefers-reduced-motion 대응 --- */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
      }

      .faq-answer {
        transition: none;
      }
    }