/* BASIC css start */
/* ================================================================
   스위티스푼 | 모바일 FAQ (고객센터) CSS
   · SECTION 1 히어로 / SECTION 2 FAQ 게시글(아코디언) / SECTION 3 상담 채널
================================================================ */

.right_fixed { display: none; }


/* ── SECTION 1  히어로 (풀이미지 + 중앙 오버레이). ss-hero → 공통 header.js가 투명헤더 ── */
.faq-hero { position: relative; width: 100%; overflow: hidden; background: #000; }
.faq-hero-img { display: block; width: 100%; height: 87vh; min-height: 460px; max-height: 760px; object-fit: cover; }
.faq-hero-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;   /* 문구 하단 정렬 */
  text-align: center; color: #fff; padding: 24px 24px 56px;
  background: linear-gradient(to bottom, rgba(0,0,0,.3) 0%, rgba(0,0,0,.12) 35%, rgba(0,0,0,.5) 100%);
}
.faq-hero-eyebrow {
  font-family: 'Josefin Sans', 'Noto Sans KR', sans-serif;
  text-transform: uppercase; letter-spacing: -0.01em; font-size: 20px; font-weight: 400;
  margin: 0 0 15px;
}
.faq-hero-desc {
  font-family: 'Lato', 'Noto Sans KR', sans-serif;
  font-size: 13px; line-height: 1.9; letter-spacing: 0.01em; word-break: keep-all; margin: 0; opacity: .96;
}
@media (max-width: 480px) {
  .faq-hero-eyebrow { font-size: 17px; }
  .faq-hero-desc { font-size: 12.5px; }
}


/* ── SECTION 2  FAQ 게시글 ── */
#faqWrap { max-width: 720px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }
#faqWrap * { box-sizing: border-box; }

/* 카테고리 탭 (상품분류 분류탭메뉴와 동일: 가로 스크롤 + 선택 밑줄) */
.faq-menu {
  display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  justify-content: space-between; margin: 0 -18px; padding: 0 6px;   /* #faqWrap 좌우패딩(18) 상쇄 → 풀폭 */
  border-top: 12px solid #f7f7f8; border-bottom: 1px solid #f0f0f0; scrollbar-width: none;
}
.faq-menu::-webkit-scrollbar { display: none; }
.faq-menu a {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  padding: 15px 14px; border: none; border-bottom: 2px solid transparent; border-radius: 0;
  font-family: 'Lato', 'Noto Sans KR', sans-serif; font-size: 13px; color: #8a8a8a;
  text-decoration: none; white-space: nowrap; letter-spacing: 0.01em;
}
.faq-menu a.on { color: #1b1b1b; font-weight: 600; border-bottom-color: #1b1b1b; }

/* FAQ 테이블 (아코디언) */
#faqTable { width: 100%; border-collapse: collapse; margin-top: 20px; }
#faqTable tr.faq-q td {
  position: relative; padding: 20px 34px 20px 4px; border-bottom: 1px solid #eee;
  font-family: 'Lato', 'Noto Sans KR', sans-serif; font-size: 13px; color: #222; line-height: 1.5; cursor: pointer;
}
#faqTable tr.faq-q .faq-cate { font-size: 11px; letter-spacing: 0.01em; margin-right: 3px; }
#faqTable tr.faq-q .faq-subject { color: #222; }
#faqTable tr.faq-q .faq-toggle {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  font-size: 20px; color: #aaa; transition: transform .25s ease, color .25s ease;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}
#faqTable tr.faq-q.is-open td { color: #1b1b1b; }
#faqTable tr.faq-q.is-open .faq-toggle { transform: translateY(-50%) rotate(180deg); color: #1b1b1b; }

/* 답변 (기본 숨김 → .slide-open 시 노출) */
#faqTable tr.slide-hide { display: none; }
#faqTable tr.slide-hide.slide-open { display: table-row; }
#faqTable tr.slide-hide td { padding: 18px 14px 20px; background: none !important; border-bottom: 1px solid #eee; }
.faq_answer_text { font-family: 'Lato', 'Noto Sans KR', sans-serif; font-size: 12px; color: #555; line-height: 1.85; word-break: keep-all; }
.faq_answer_text img { max-width: 100%; height: auto; }

/* 검색영역 */
.search-wrap { margin: 30px 0 10px; }
.item-search { display: flex; align-items: stretch; gap: 6px; }
.item-search-cate select { height: 42px; padding: 0 26px 0 12px; border: 1px solid #ddd; border-radius: 0; background: #fff; font-size: 12px; color: #444; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='%23888' d='M5 7l5 5 5-5z'/></svg>"); background-repeat: no-repeat; background-position: right 8px center; background-size: 14px; }
.item-search-input { flex: 1; }
.item-search-input input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #ddd; border-radius: 0; font-size: 13px; color: #222; outline: none; }
.faq-search-btn { flex-shrink: 0; height: 42px; line-height: 42px; padding: 0 20px; background: #f4f0ea; color: #3b3b3b; font-family: 'Josefin Sans', 'Noto Sans KR', sans-serif; font-size: 12px; letter-spacing: 0.05em; text-decoration: none; text-align: center; }

.keywords { margin-top: 18px; text-align: center; }
.keywords h5 { font-family: 'Josefin Sans', 'Noto Sans KR', sans-serif; font-size: 12px; color: #888; font-weight: 500; margin: 0 0 10px; letter-spacing: 0.05em; }
.keywords ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0; margin: 0; list-style: none; }
.keywords ul li a { display: inline-block; padding: 6px 12px; border: 1px solid #eee; border-radius: 20px; font-size: 11px; color: #666; text-decoration: none; }
.keywords ul li a:hover { border-color: #b98a5a; color: #b98a5a; }

/* 페이징 */
.paging { display: flex; justify-content: center; align-items: center; gap: 5px; padding: 34px 0 10px; }
.paging a { min-width: 32px; height: 32px; line-height: 32px; text-align: center; font-family: 'Lato', sans-serif; font-size: 12px; color: #666; text-decoration: none; background: #f4f2ef; border: none; }
.paging a.now { background: #f4f0ea; color: #3b3b3b; font-weight: 400; border: none !important; }
.paging a.prev, .paging a.next { color: #888; display: inline-flex; align-items: center; justify-content: center; }
.paging a.prev .material-symbols-outlined, .paging a.next .material-symbols-outlined { font-size: 18px; }


/* ── SECTION 3  1:1 상담 및 문의 채널 (상품분류 하단과 동일) ── */
.what_title_warp { margin: 0px 0px 60px 0px; }
.what_title { font-family: 'Noto Serif KR', serif !important; font-size: 1.6rem; text-align: center; font-weight: 600; line-height: 1.3; padding: 50px 0px 0px 0px; border-top: 1px solid #c7c7c7; margin-top: 70px; }
.what_detail { font-size: 0.85rem; text-align: center; line-height: 1.6; letter-spacing: initial; padding: 20px 10px 35px 10px; word-break: keep-all; }
.visit_btn_wrap, .kakao_btn_wrap { text-align: center; }
.visit_btn { min-width: 160px; width: 100%; max-width: 185px; text-align: center; padding: 15px 20px; display: inline-block; font-size: 13px; border: 1px solid #111111; position: relative; overflow: hidden; background-color: #111111; color: #ffffff; z-index: 1; transition: color 0.4s ease, border-color 0.4s ease; cursor: pointer; text-decoration: none; box-sizing: border-box; font-weight: 500; }
.kakao_info { letter-spacing: 0.02em; font-size: 0.85rem; text-align: center; line-height: 1.5; padding: 50px 0px 20px 0px; border-top: 1px solid #c7c7c7; margin-top: 50px; }
.kakao_btn { position: relative; display: inline-block; text-align: center; padding-bottom: 4px; color: #111; letter-spacing: 0.02em; font-size: 0.85rem; }
.kakao_btn::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #c7a97b; transform: scaleX(1); transform-origin: left; transition: transform 0.35s ease; }
.kakao-link:hover .kakao_btn::after { transform: scaleX(0); }

/* BASIC css end */