@charset "utf-8";

/* ==========================================================================
   공통 UI — 이미지 팝업(/_inc/ui/popup.php) · Q&A 펼침 목록(/_inc/ui/qna.php)
   사용: sub227 소아교정 · sub415 화이티니
   ========================================================================== */

/* ---------- 이미지 팝업 (본문 왼쪽 위에 겹쳐 띄움) ---------- */
.wd-pop {position:absolute;top:50px;left:50px;z-index:999;width:440px;max-width:calc(100% - 32px);box-shadow:0 10px 30px rgba(0,0,0,.18);}
@media screen and (min-width:1521px) { .wd-pop {top:122px;} } /* PC 헤더가 본문 위에 겹쳐 뜨는 만큼 */
.wd-pop img {display:block;width:100% !important;height:auto;}
/* 이미지 속 '닫기' 글자(440×580 기준 x 367~427, y 27~62)를 % 로 잡아 크기가 바뀌어도 따라간다 */
.wd-pop__close {position:absolute;top:4.3%;right:2.7%;width:14.5%;height:6.9%;padding:0;border:0;background:transparent;cursor:pointer;font-size:0;color:transparent;}
.wd-pop__close:focus-visible {outline:2px solid #52c3ed;outline-offset:2px;}
@media screen and (max-width:860px) {
	.wd-pop {top:20px;left:50%;width:min(440px,calc(100% - 32px));transform:translateX(-50%);}
}

/* ---------- Q&A 펼침 목록 ---------- */
.wd-qna {--wq-fs:clamp(15px,1.35vw,26px);margin:0;padding:0;list-style:none;border-top:1px solid #ddd;font-family:"Noto Sans KR",sans-serif;text-align:left;}
.wd-qna li {margin:0;border-bottom:1px solid #ddd;}
.wd-qna__q {display:flex;align-items:center;gap:.6em;width:100%;padding:1.05em .5em 1.05em .6em;background:none;border:0;cursor:pointer;font:inherit;font-size:var(--wq-fs);font-weight:700;color:#111;text-align:left;letter-spacing:-.02em;word-break:keep-all;}
.wd-qna__q b {font-size:1.25em;}
.wd-qna__q span {flex:1;}
.wd-qna__q i {position:relative;flex:none;width:.9em;height:.9em;}
.wd-qna__q i::before, .wd-qna__q i::after {content:"";position:absolute;left:0;top:50%;width:100%;height:2px;margin-top:-1px;background:#111;transition:transform .25s;}
.wd-qna__q i::after {transform:rotate(90deg);}
.wd-qna__q[aria-expanded="true"] i::after {transform:rotate(0deg);}
.wd-qna__a {padding:0 .6em 1.3em 2.4em;font-size:calc(var(--wq-fs) * .82);font-weight:300;line-height:1.7;color:#333;word-break:keep-all;}
.wd-qna__a p {margin:0;}
.wd-qna__a b {font-weight:700;color:#111;}
@media screen and (max-width:860px) {
	.wd-qna {--wq-fs:clamp(14.5px,3.9vw,17px);}
	.wd-qna__q {padding:1em .2em 1em .3em;}
	.wd-qna__a {padding:0 .3em 1.2em 2.1em;}
	.wd-qna__a br {display:none;} /* 좁은 화면에서는 강제 줄바꿈 대신 자연스럽게 */
}