/* ============================================================================
   배때지 V2 · 자주 묻는 질문 (/bbs/faq.php)

   home-v2.css 의 --hm-* 토큰만 사용한다. FAQ 전용 색상 체계를 만들지 않는다.
   그누보드 기본 FAQ 스킨(skin/faq/basic/style.css)은 아예 로드하지 않는다.
   ========================================================================== */

.v2fq-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------- 페이지 타이틀 ---------------- */
.v2fq-head { padding: 22px 0 4px; }
.v2fq-head h1 {
    margin: 0 0 6px; font-size: 22px; font-weight: 800;
    letter-spacing: -.5px; color: var(--hm-ink); line-height: 1.3;
}
.v2fq-head p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--hm-sub); }

/* ---------------- 검색 ---------------- */
.v2fq-search {
    position: relative; display: flex; align-items: center;
    margin-top: 16px; padding: 0 12px 0 40px;
    background: var(--hm-card); border: 1px solid var(--hm-line);
    border-radius: 12px; min-height: 48px;
}
.v2fq-search:focus-within { border-color: var(--hm-ink); }
.v2fq-search-ico {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    display: inline-flex; color: var(--hm-sub); pointer-events: none;
}
.v2fq-search input {
    flex: 1 1 auto; min-width: 0; width: 100%;
    border: 0; background: transparent; outline: none;
    font-size: 15px;                 /* 16px 미만이면 iOS 가 확대한다 → 15px + max-width 대응은 아래 미디어쿼리 */
    color: var(--hm-ink); padding: 12px 0; line-height: 1.4;
    -webkit-appearance: none; appearance: none;
}
.v2fq-search input::placeholder { color: #a3a3ab; }
/* 검색 타입 기본 X 버튼 제거 — 자체 초기화 버튼을 쓴다 */
.v2fq-search input::-webkit-search-decoration,
.v2fq-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

@media (max-width: 767px) {
    /* iOS 확대(auto-zoom) 방지: 모바일에서만 16px */
    .v2fq-search input { font-size: 16px; }
}

.v2fq-clear {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; margin-left: 6px;
    border: 0; border-radius: 99px; background: var(--hm-bg);
    color: var(--hm-sub); cursor: pointer;
}
.v2fq-clear:hover { color: var(--hm-ink); }
.v2fq-clear:focus-visible { outline: 2px solid var(--hm-ac); outline-offset: 2px; }

/* ---------------- 대분류 탭 ---------------- */
.v2fq-tabs {
    display: flex; gap: 8px; margin-top: 14px;
    overflow-x: auto; overflow-y: hidden;
    /* 화면 끝까지 스크롤되도록 좌우 여백을 넘긴다 */
    margin-left: calc(var(--hm-pad) * -1); margin-right: calc(var(--hm-pad) * -1);
    padding: 2px var(--hm-pad);
    scrollbar-width: none;                       /* 스크롤바 과다 노출 방지 */
    -webkit-overflow-scrolling: touch;
}
.v2fq-tabs::-webkit-scrollbar { display: none; }

.v2fq-tab {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    /* 터치 타깃 44px 확보 (모바일 기준). PC 에서는 아래 미디어쿼리에서 낮춘다. */
    min-height: 44px; padding: 0 14px;
    border: 1px solid var(--hm-line); border-radius: 99px;
    background: var(--hm-card); color: var(--hm-ink-soft);
    font-size: 13.5px; font-weight: 600; letter-spacing: -.2px;
    cursor: pointer; white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.v2fq-tab i { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--hm-sub); }
.v2fq-tab.is-on {
    background: var(--hm-ink); border-color: var(--hm-ink); color: #fff;
}
.v2fq-tab.is-on i { color: rgba(255, 255, 255, .7); }
.v2fq-tab:focus-visible { outline: 2px solid var(--hm-ac); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .v2fq-tab:not(.is-on):hover { border-color: var(--hm-ink); color: var(--hm-ink); }
}

/* ---------------- 결과 건수 ---------------- */
.v2fq-count {
    margin: 16px 0 10px; font-size: 12.5px; color: var(--hm-sub);
    /* 건수가 1자리↔3자리로 바뀌어도 아래 목록이 흔들리지 않게 높이를 고정한다 */
    min-height: 18px; line-height: 18px;
}
.v2fq-count b { color: var(--hm-ink); font-weight: 700; }

/* ---------------- 아코디언 ---------------- */
.v2fq-list { display: flex; flex-direction: column; gap: 10px; }

.v2fq-item {
    background: var(--hm-card); border: 1px solid var(--hm-line);
    border-radius: var(--hm-radius); overflow: hidden;
}
.v2fq-item.is-open { border-color: #d6d6da; }
.v2fq-item[hidden] { display: none; }

.v2fq-qh { margin: 0; font-size: inherit; font-weight: inherit; }

.v2fq-q {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "cat  chev" "txt  chev";
    align-items: center;
    gap: 4px 12px;
    width: 100%;
    min-height: 56px;                 /* 터치 타깃 44px 이상 확보 */
    padding: 14px 16px;
    border: 0; background: transparent; cursor: pointer; text-align: left;
    font-family: inherit; color: var(--hm-ink);
}
.v2fq-q:focus-visible { outline: 2px solid var(--hm-ac); outline-offset: -2px; }

.v2fq-cat {
    grid-area: cat; justify-self: start;
    font-size: 11px; font-weight: 700; letter-spacing: -.1px;
    color: var(--hm-sub); background: var(--hm-bg);
    padding: 3px 8px; border-radius: 6px;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v2fq-qt {
    grid-area: txt; min-width: 0;
    font-size: 14.5px; font-weight: 600; line-height: 1.5; letter-spacing: -.2px;
    word-break: break-word;           /* 긴 제목이 아이콘과 겹치지 않는다 */
}
.v2fq-chev {
    grid-area: chev; display: inline-flex; align-items: center;
    color: var(--hm-sub); transition: transform .2s ease;
}
.v2fq-item.is-open .v2fq-chev { transform: rotate(180deg); color: var(--hm-ink); }

/* 답변 */
.v2fq-a { border-top: 1px solid var(--hm-line); }
.v2fq-a[hidden] { display: none; }
.v2fq-a-in {
    padding: 16px; font-size: 14px; line-height: 1.75; color: var(--hm-ink-soft);
    word-break: break-word;
}

/* 관리자가 저장한 HTML 의 반응형 처리 ------------------------------------- */
.v2fq-a-in > :first-child { margin-top: 0; }
.v2fq-a-in > :last-child  { margin-bottom: 0; }
.v2fq-a-in p { margin: 0 0 12px; }
.v2fq-a-in h2 { margin: 20px 0 8px; font-size: 16px; font-weight: 800; color: var(--hm-ink); }
.v2fq-a-in h3 { margin: 18px 0 8px; font-size: 14.5px; font-weight: 700; color: var(--hm-ink); }
.v2fq-a-in h4 { margin: 16px 0 6px; font-size: 13.5px; font-weight: 700; color: var(--hm-ink); }
.v2fq-a-in ul, .v2fq-a-in ol { margin: 0 0 12px; padding-left: 20px; }
.v2fq-a-in li { margin: 0 0 6px; }
.v2fq-a-in a { color: var(--hm-ac); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.v2fq-a-in strong, .v2fq-a-in b { font-weight: 700; color: var(--hm-ink); }
.v2fq-a-in blockquote {
    margin: 12px 0; padding: 10px 14px;
    border-left: 3px solid var(--hm-line); background: var(--hm-bg);
    border-radius: 0 8px 8px 0; color: var(--hm-sub);
}
.v2fq-a-in img { max-width: 100%; height: auto; border-radius: 10px; display: block; margin: 12px 0; }
.v2fq-a-in hr { border: 0; border-top: 1px solid var(--hm-line); margin: 16px 0; }
.v2fq-a-in code {
    background: var(--hm-bg); border-radius: 4px; padding: 1px 5px;
    font-size: 13px; word-break: break-all;
}
.v2fq-a-in pre { overflow-x: auto; background: var(--hm-bg); padding: 12px; border-radius: 8px; }

/* 표는 자체 영역에서만 가로 스크롤 — 페이지 본문은 절대 가로로 밀리지 않는다 */
.v2fq-a-in table {
    display: block; width: 100%; max-width: 100%;
    overflow-x: auto; border-collapse: collapse; margin: 12px 0;
    -webkit-overflow-scrolling: touch; white-space: nowrap;
}
.v2fq-a-in th, .v2fq-a-in td {
    border: 1px solid var(--hm-line); padding: 8px 12px; font-size: 13px; text-align: left;
}
.v2fq-a-in th { background: var(--hm-bg); font-weight: 700; }

/* ---------------- 검색 결과 없음 / 상담 ---------------- */
.v2fq-empty {
    margin-top: 12px; padding: 40px 20px; text-align: center;
    background: var(--hm-card); border: 1px solid var(--hm-line); border-radius: var(--hm-radius);
}
.v2fq-empty[hidden] { display: none; }
.v2fq-empty-t { margin: 0 0 8px; font-size: 15.5px; font-weight: 700; color: var(--hm-ink); }
.v2fq-empty-d { margin: 0 0 18px; font-size: 13.5px; line-height: 1.65; color: var(--hm-sub); }

.v2fq-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 46px; padding: 0 24px; border-radius: 99px;
    background: var(--hm-ink); color: #fff;
    font-size: 14px; font-weight: 700; letter-spacing: -.2px;
    border: 1px solid var(--hm-ink);
}
.v2fq-btn.is-ghost { background: var(--hm-card); color: var(--hm-ink); border-color: var(--hm-line); }
@media (hover: hover) and (pointer: fine) {
    .v2fq-btn:hover { opacity: .88; }
    .v2fq-btn.is-ghost:hover { opacity: 1; border-color: var(--hm-ink); }
}

.v2fq-cs {
    margin-top: 28px; padding: 28px 20px; text-align: center;
    background: var(--hm-bg); border: 1px solid var(--hm-line); border-radius: var(--hm-radius);
}
.v2fq-cs h2 { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: var(--hm-ink); letter-spacing: -.3px; }
.v2fq-cs p  { margin: 0 0 18px; font-size: 13.5px; color: var(--hm-sub); }
.v2fq-cs-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* ---------------- 태블릿 이상 ---------------- */
@media (min-width: 768px) {
    .v2fq-head { padding-top: 30px; }
    .v2fq-head h1 { font-size: 26px; }
    .v2fq-head p  { font-size: 14.5px; }

    /* 탭이 좌우 여백을 넘어 흐르지 않게 되돌린다 (PC 는 스크롤이 필요 없다) */
    .v2fq-tabs { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; }
    .v2fq-tab { min-height: 40px; }   /* 포인터 입력에서는 조금 낮춰도 충분하다 */

    .v2fq-q  { padding: 16px 20px; min-height: 62px; }
    .v2fq-qt { font-size: 15.5px; }
    .v2fq-a-in { padding: 18px 20px 20px; font-size: 14.5px; }
}

@media (min-width: 1024px) {
    /* 본문 가독성 — 질문/답변이 화면 끝까지 늘어나지 않게 폭을 제한한다.
       .v2-home-wrap(max 1280) 안에서 중앙 정렬한다. */
    .v2fq-head, .v2fq-search, .v2fq-tabs, .v2fq-count,
    .v2fq-list, .v2fq-empty, .v2fq-cs {
        max-width: 900px; margin-left: auto; margin-right: auto;
    }
    .v2fq-head h1 { font-size: 28px; }
}

/* 하단 고정 네비에 마지막 콘텐츠가 가리지 않도록 */
.v2fq-cs { margin-bottom: 8px; }

@media (prefers-reduced-motion: reduce) {
    .v2fq-tab, .v2fq-chev { transition: none; }
}