@charset "utf-8";
/* 서브 상품 페이지 공통 (2026-10-01) */

/* 상단 : 상품 소개 + 상담접수 */
.pd__top { padding: 40px 0 10px; }
.pd__top .inner { display: flex; gap: 30px; align-items: stretch; }

.pd__intro { flex: 1; background: var(--green-bg); border-radius: 14px; padding: 40px 42px; }
.pd__intro .cat { font-size: 16px; color: var(--gray); margin-bottom: 10px; }
.pd__intro h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; color: #19A38F; }
.pd__intro .type { display: block; font-size: 17px; font-weight: 700; margin-top: 4px; color: #19A38F; }
.pd__intro .desc { font-size: 18px; font-weight: 500; color: #444; line-height: 1.75; margin-top: 20px; }
.pd__point { margin-top: 32px; }
.pd__point li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; }
.pd__point li img { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.pd__point li h2 { font-size: 18px; font-weight: 500; color: #333; line-height: 1.5; }

.pd__cs { width: 380px; flex: none; border: 1px solid var(--mint); border-radius: 14px; padding: 28px 26px; background: #fff; }
.pd__cs .cs__tit { font-size: 18px; font-weight: 700; text-align: center; margin-bottom: 20px; }
.pd__cs .cs__gender { margin-bottom: 10px; }
.pd__cs .row { margin-bottom: 10px; }
.pd__cs input[type="text"], .pd__cs input[type="tel"] { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; }
.pd__cs input::placeholder { color: #aaa; }
.pd__cs .cs__agree { justify-content: center; margin: 14px 0 12px; }

/* 탭 */
.pd__tab { border-bottom: 1px solid var(--line); margin-top: 46px; }
.pd__tab .inner { display: flex; }
.pd__tab button { flex: 1; height: 54px; font-size: 16px; font-weight: 600; color: #999; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pd__tab button.on { color: var(--green); border-bottom-color: var(--green); }

.pd__panel { display: none; padding: 46px 0 60px; }
.pd__panel.on { display: block; }

/* 상품특징 */
.pd__item { padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid #eee; }
.pd__item:last-child { border-bottom: 0; }
.pd__item > h3 { font-size: 26px; font-weight: 700; margin-bottom: 18px; line-height: 1.5; }
.pd__item > h3 .no { color: var(--green); margin-right: 8px; }
.pd__item > h3 em { color: var(--green); font-style: normal; }
.pd__item .dash { font-size: 20px; color: #515151; line-height: 1.8; padding-left: 19px; text-indent: -19px; margin-bottom: 6px; }
.pd__item .dash.star { font-size: 20px; color: #a8a8a8; }
/* [3차 E-07] care 3번 헬스케어 안내만 2px 작게. .star 와 특이도가 같아 반드시 뒤에 와야 적용된다 */
.pd__item .dash.star.sm { font-size: 18px; }

/* 표 */
.pd__table { width: 100%; border-top: 1px solid #ddd; margin-top: 14px; font-size: 13.5px; }
.pd__table th, .pd__table td { border-bottom: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; padding: 14px 12px; text-align: center; line-height: 1.6; vertical-align: middle; }
.pd__table th { background: var(--mint-bg); font-weight: 700; color: #333; }
.pd__table th:last-child, .pd__table td:last-child { border-right: 0; }
.pd__table td.lft { text-align: left; }

/* 하단 안내 박스 */
.pd__note { background: var(--mint-bg); border-radius: 10px; padding: 22px 26px; }
.pd__note p { font-size: 13px; color: #4a6b68; line-height: 1.9; }

@media screen and (max-width: 1024px) {
    .pd__top .inner { flex-direction: column; }
    .pd__cs { width: 100%; }
    .pd__intro { padding: 32px 28px; }
}

@media screen and (max-width: 767px) {
    .pd__top { padding: 24px 0 6px; }
    .pd__intro h2 { font-size: 23px; }
    .pd__intro .type { font-size: 15px; }
    .pd__intro .desc { font-size: 15px; }   /* PC 만 18px, 모바일은 기존 유지 */
    .pd__point li h2 { font-size: 14px; }   /* [3차 E-02] 모바일만 14px, PC 는 18px 유지 */
    .pd__item > h3 { font-size: 18px; }     /* [3차 E-03] 모바일만 18px, PC 는 26px 유지 */
    /* [3차 E-04] 모바일만 14px, PC 는 20px 유지. 색상은 건드리지 않음
       .dash.star 는 기본 블록에서 크기를 명시하고 있어(특이도가 더 높다) 여기서도 같이 적어야 적용된다
       들여쓰기 19px 는 20px 글자에 맞춘 값 -> 14px 에 맞춰 13px 로 보정 */
    .pd__item .dash { font-size: 14px; padding-left: 13px; text-indent: -13px; }
    .pd__item .dash.star { font-size: 14px; }
    .pd__item .dash.star.sm { font-size: 12px; }   /* [3차 E-07] 모바일도 2px 작게 */
    .pd__tab button { font-size: 15px; height: 48px; }
    .pd__panel { padding: 32px 0 44px; }
    .pd__table { font-size: 12.5px; }
    .pd__table th, .pd__table td { padding: 10px 7px; }
    .pd__table.scroll__x { display: block; overflow-x: auto; white-space: nowrap; }
}