/* dermatology.html — FAQ 섹션 (2026-09-06)
   기존 dermatology.css 의 dm- 체계에 맞춘 추가 스타일.
   dermatology.css 로 합칠 경우 이 파일 내용을 그대로 끝에 붙이고 html 의 <link> 한 줄을 지우면 됨. */

.dm-faq .dm-h2-sub{font-size:.55em;font-weight:400;opacity:.65;margin-left:.5em}
.dm-faq-list{margin-top:32px;border-top:1px solid rgba(0,0,0,.12)}
.dm-faq-item{border-bottom:1px solid rgba(0,0,0,.12)}
.dm-faq-item summary{
  list-style:none;cursor:pointer;position:relative;
  padding:22px 48px 22px 0;font-size:17px;font-weight:600;line-height:1.5;
  word-break:keep-all;
}
.dm-faq-item summary::-webkit-details-marker{display:none}
.dm-faq-item summary::before{content:"Q";margin-right:14px;font-weight:700;opacity:.45}
.dm-faq-item summary::after{
  content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg);transition:transform .25s;opacity:.6;
}
.dm-faq-item[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.dm-faq-a{padding:0 0 24px 30px;font-size:15.5px;line-height:1.8;opacity:.85;word-break:keep-all}
.dm-faq-a p{margin:0}
.dm-faq-a a{text-decoration:underline;text-underline-offset:3px}

/* 사실 정보 블록에 실제 사진을 넣을 때 (html 주석 해제 시) */
.dm-facts-img{display:block;width:100%;height:auto;margin-top:24px;border-radius:12px}

@media (max-width:768px){
  .dm-faq-item summary{padding:18px 36px 18px 0;font-size:15.5px}
  .dm-faq-a{padding-left:0;font-size:14.5px}
  .dm-faq .dm-h2-sub{display:block;margin:6px 0 0}
}