@charset "utf-8";

/* ==========================================================================
   faq.css — 치과 FAQ 페이지 전용 스타일
   --------------------------------------------------------------------------
   - 시안(★m_FAQ.jpg) 그린 테마 / 탭 전환형 아코디언
   - 색상 팔레트: #1c4103 진한그린 / #2c4f15 메인그린 / #8b9e70 세이지
     / #5c7f3a accent / #f4f3ee·#f7f7f4 베이지
   ========================================================================== */

.faq_wrap { background:#fff; color:#222; word-break:keep-all; max-width:850px;margin:0 auto;}
.faq_wrap * { box-sizing:border-box; }
.faq_wrap img { max-width:100%; display:block; }


/* ===== 1. 히어로 ===== */
.faq_hero { padding:64px 24px 70px; background:#1c4103; text-align:center; }
.faq_hero_label { margin:0 0 18px; font-size:13px; font-weight:600; letter-spacing:1.5px; color:#8ba36a; }
.faq_hero_tit { margin:0 0 20px; font-size:32px; font-weight:800; line-height:1.4; letter-spacing:-1px; color:#fff; }
.faq_hero_tit span { color:#cfe0a8; }
.faq_hero_sub { margin:0; font-size:15px; line-height:1.7; color:#b6c79a; }


/* ===== 2. 카테고리 탭 (sticky) ===== */
.faq_tabs { position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid #e6e6df; }
.faq_tabs_inner { max-width:850px; margin:0 auto; display:flex; gap:6px; overflow-x:auto;
	padding:0 16px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.faq_tabs_inner::-webkit-scrollbar { display:none; }
.faq_tab { flex:0 0 auto; padding:18px 14px; border:0; background:transparent; cursor:pointer;
	font-size:16px; font-weight:600; color:#999; white-space:nowrap; position:relative; transition:color .15s; }
.faq_tab:hover { color:#5c7f3a; }
.faq_tab.active { color:#1c4103; font-weight:800; }
.faq_tab.active::after { content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:3px;
	background:#2c4f15; border-radius:2px; }


/* ===== 3. 카테고리별 Q&A ===== */
.faq_body { background:#f7f7f4; }
.faq_sec { display:none; max-width:850px; margin:0 auto; padding:48px 24px 60px; }
.faq_sec.active { display:block; }
.faq_sec_tit { margin:0 0 12px; font-size:28px; font-weight:800; letter-spacing:-1px; color:#1c4103; }
.faq_sec_sub { margin:0 0 28px; font-size:15px; line-height:1.7; color:#777; }

/* 아코디언 아이템 */
.faq_item { background:#fff; border-radius:14px; margin-bottom:12px; overflow:hidden;
	box-shadow:0 3px 12px rgba(0,0,0,.03); }
.faq_q { display:flex; align-items:flex-start; gap:12px; width:100%; padding:24px 22px; border:0;
	background:transparent; cursor:pointer; text-align:left; font-size:17px; font-weight:700;
	line-height:1.45; color:#888; transition:color .15s; }
.faq_item.open .faq_q { color:#1c4103; }
.faq_qmark { flex:0 0 24px; display:flex; align-items:center; justify-content:center; width:24px; height:24px;
	margin-top:1px; border-radius:6px; background:#e7ede0; color:#5c7f3a; font-size:14px; font-weight:800; }
.faq_item.open .faq_qmark { background:#2c4f15; color:#fff; }
.faq_qtext { flex:1 1 auto; }
.faq_chev { flex:0 0 auto; margin-top:3px; font-size:18px; color:#b3b3a8; transition:transform .25s; }
.faq_item.open .faq_chev { transform:rotate(180deg); color:#5c7f3a; }

/* 답변 (max-height 트랜지션) */
.faq_a { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq_item.open .faq_a { max-height:1600px; }
.faq_a_inner { padding:0 22px 26px 58px; }
.faq_a_inner p { margin:0 0 12px; font-size:15px; line-height:1.75; color:#555; }
.faq_a_inner p:last-child { margin-bottom:0; }
.faq_a_inner p b { color:#2c4f15; font-weight:700; }

.faq_list { margin:0 0 12px; padding:0; list-style:none; }
.faq_list li { position:relative; padding-left:16px; margin-bottom:8px; font-size:15px; line-height:1.7; color:#555; }
.faq_list li:last-child { margin-bottom:0; }
.faq_list li::before { content:""; position:absolute; left:2px; top:11px; width:5px; height:5px;
	border-radius:50%; background:#8b9e70; }

/* 강조 박스 */
.faq_tip { margin-top:14px; padding:16px 18px; border-left:4px solid #5c7f3a; border-radius:0 10px 10px 0;
	background:#eef2e6; font-size:14px; line-height:1.7; color:#3c5320; }
.faq_warn { margin-top:14px; padding:16px 18px; border-left:4px solid #d8b34a; border-radius:0 10px 10px 0;
	background:#fbf6e6; font-size:14px; line-height:1.7; color:#7a6326; }


/* ===== 4. 참고 출처 ===== */
.faq_ref { padding:56px 24px 64px; background:#1c4103; }
.faq_ref_inner { max-width:850px; margin:0 auto; }
.faq_ref_badge { display:inline-block; margin-bottom:18px; padding:8px 18px; border-radius:20px;
	background:#e3cf85; color:#5a4710; font-size:14px; font-weight:700; }
.faq_ref_desc { margin:0 0 28px; font-size:15px; line-height:1.7; color:#cdd6bc; }

.faq_ref_grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:12px; }
.faq_ref_card { display:flex; align-items:flex-start; gap:14px; padding:18px 18px; border-radius:12px;
	background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.faq_ref_card > i { flex:0 0 38px; display:flex; align-items:center; justify-content:center;
	width:38px; height:38px; border-radius:9px; background:#2c4f15; color:#cfe0a8; font-size:17px; }
.faq_ref_card_txt b { display:block; margin-bottom:3px; font-size:15px; font-weight:700; color:#fff; line-height:1.4; }
.faq_ref_card_txt span { font-size:13px; color:#a8b78d; line-height:1.4; }

.faq_ref_disclaimer { margin-top:30px; padding-top:24px; border-top:1px dashed rgba(255,255,255,.22); }
.faq_ref_disclaimer p { margin:0 0 12px; font-size:13px; line-height:1.8; color:#9fb083; }
.faq_ref_disclaimer p:last-child { margin-bottom:0; }
.faq_ref_last { margin-top:18px !important; font-size:14px !important; color:#cdd6bc !important; }
.faq_ref_last b { color:#fff; font-weight:700; }


/* ===== 반응형 ===== */
@media (max-width:600px){
	.faq_hero { padding:48px 20px 54px; }
	.faq_hero_tit { font-size:25px; }
	.faq_tab { padding:15px 11px; font-size:15px; }
	.faq_sec { padding:36px 18px 48px; }
	.faq_sec_tit { font-size:23px; }
	.faq_q { padding:20px 18px; font-size:16px; }
	.faq_a_inner { padding:0 18px 22px 18px; }
	.faq_ref { padding:48px 20px 56px; }
	.faq_ref_grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:400px){
	.faq_ref_grid { grid-template-columns:1fr; }
}