/* 피부미용(s0501~s0504) 보조 스타일
   본문 구조는 다른 서브페이지와 같은 공용 컴포넌트(md_text3 · md_bg · md_list4 · md_thumb3 · md_add_text)를 쓰고,
   공용 세트에 없는 표 · 체크 목록 · FAQ 만 여기서 사이트 색(--main-color*)으로 정의한다. */

/* 상단 비주얼 — 다른 페이지 비주얼은 어두운 사진이지만 피부미용 사진은 밝아서
   흰 제목이 읽히도록 어두운 반투명 막을 한 겹 깐다 */
.s_visual.s0501{background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),url('../img/sub/s0501_visual.jpg') no-repeat center /cover}
.s_visual.s0502{background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),url('../img/sub/s0502_visual.jpg') no-repeat center 30% /cover}
.s_visual.s0503{background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),url('../img/sub/s0503_visual.jpg') no-repeat center 30% /cover}
.s_visual.s0504{background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),url('../img/sub/s0504_visual.jpg') no-repeat center 30% /cover}

/* 본문 이미지 */
.md_skin_img{max-width:900px;margin:50px auto 0}
.md_skin_img img{display:block;width:100%;height:auto}
.md_skin_img.narrow{max-width:560px}

/* 표 */
.md_table{max-width:1100px;margin:50px auto 0}
.md_table table{width:100%;border-collapse:collapse;border-top:3px solid var(--main-color-dark);font-size:18px;line-height:1.7;text-align:left}
.md_table th,.md_table td{padding:20px 24px;border-bottom:1px solid #ddd;vertical-align:top;word-break:keep-all}
.md_table thead th{background:#f5efe8;color:var(--main-color-dark);font-weight:700;text-align:center}
.md_table tbody th{width:18%;color:var(--main-color-dark);font-weight:700;text-align:center;background:#faf8f5}
.md_bg.dark .md_table table{background:#fff;color:#333}

/* 체크 목록 */
.md_check{max-width:1000px;margin:50px auto 0;padding:0;list-style:none;text-align:left}
.md_check li{position:relative;padding:18px 0 18px 44px;border-bottom:1px solid #e5e5e5;font-size:19px;line-height:1.7;word-break:keep-all}
.md_check li:before{content:'';position:absolute;left:6px;top:28px;width:16px;height:9px;border-left:3px solid var(--main-color-dark);border-bottom:3px solid var(--main-color-dark);transform:rotate(-45deg)}
.md_bg.dark .md_check li{color:#fff;border-color:rgba(255,255,255,.2)}
.md_bg.dark .md_check li:before{border-color:var(--main-color)}

/* 부위별 설명 (md_list4 아래 붙는 상담 포인트) */
.md_list4 .list li .point{margin-top:10px;font-size:16px;line-height:1.7;color:var(--main-color);text-align:center;word-break:keep-all}
.md_list4 .list li .point b{display:block;margin-bottom:4px}
.md_list4.desc_wide .list li{flex:1;max-width:340px}

/* 단계 (md_thumb3 small 에 이미지 없이 쓸 때) */
.md_thumb3.steps .list > li{text-align:center}
.md_thumb3.steps .list .desc{font-weight:400;word-break:keep-all}

/* FAQ */
.md_faq{max-width:1000px;margin:50px auto 0;text-align:left}
.md_faq dl{margin:0;padding:24px 0;border-bottom:1px solid #ddd}
.md_faq dt{position:relative;padding-left:40px;font-size:20px;font-weight:700;color:#222}
.md_faq dd{position:relative;margin:12px 0 0;padding-left:40px;font-size:18px;line-height:1.8;color:#555;word-break:keep-all}
.md_faq dt:before,.md_faq dd:before{position:absolute;left:0;top:0;font-weight:800}
.md_faq dt:before{content:'Q';color:var(--main-color-dark)}
.md_faq dd:before{content:'A';color:var(--main-color)}

/* 하단 안내문 폭 */
.md_add_text.skin{max-width:1000px;margin:60px auto 80px;padding:0 20px;font-size:16px;line-height:1.8;color:#777;word-break:keep-all}

@media all and (max-width:1024px){
  .md_table table{font-size:15px}
  .md_table th,.md_table td{padding:14px 12px}
  .md_check li{font-size:16px;padding-left:38px}
  .md_check li:before{top:25px}
  .md_faq dt{font-size:17px;padding-left:32px}
  .md_faq dd{font-size:15px;padding-left:32px}
  .md_list4.desc_wide .list li{max-width:none}
}
@media all and (max-width:768px){
  /* 표 → 행 단위 블록 */
  .md_table thead{display:none}
  .md_table table,.md_table tbody,.md_table tr,.md_table th,.md_table td{display:block;width:100%}
  .md_table tr{border-bottom:2px solid var(--main-color-dark)}
  .md_table tbody th{text-align:left;background:#f5efe8}
  .md_table td{border-bottom:1px dashed #e5e5e5}
  .md_table td[data-label]:before{content:attr(data-label);display:block;font-size:13px;font-weight:700;color:var(--main-color-dark)}
}

/* md_list4.small 의 li 고정 높이(250px)는 설명이 길면 섹션 밖으로 넘친다 — 이 페이지들에서만 자동 높이 */
.md_list4.small .list li{height:auto}