/* dressclinic.kr 보완 스타일 (2026-09-16)
   공용 템플릿 styles.css 를 그대로 쓰되, 드레스 전용으로 추가한 클래스만 여기서 정의한다.
   ⛔ styles.css 는 수정하지 않는다(디자인 시스템 공유 원본). */

:root {
  --d-ink: #3A1D38;
  --d-sub: #6F5C72;
  --d-line: rgba(58, 29, 56, .14);
  --d-accent: #A63DB8;
  --d-soft: #FBF7FC;
}

/* ── 서브 페이지 공통 ───────────────────────────── */
.sub { padding: 56px 0 90px; background: #fff; }
.sub-in { max-width: 920px; }
.sub h1 { margin: 10px 0 18px; font-size: 38px; font-weight: 800; line-height: 1.32; letter-spacing: -0.03em; color: var(--d-ink); }
.sub-lead { margin: 0 0 40px; font-size: 17px; line-height: 1.85; color: var(--d-sub); }

.crumb { font-size: 13px; color: var(--d-sub); margin-bottom: 14px; }
.crumb a { color: var(--d-sub); }
.crumb a:hover { color: var(--d-accent); }

.blk { margin: 0 0 48px; }
.blk h2 { margin: 0 0 12px; font-size: 25px; font-weight: 800; letter-spacing: -0.02em; color: var(--d-ink); }
.blk-sub { margin: 0 0 18px; font-size: 15px; color: var(--d-sub); }
.blk p { font-size: 16px; line-height: 1.85; color: #4A3A4C; }
.blk .big { font-size: 19px; font-weight: 700; color: var(--d-ink); }

.chk { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 13px; }
.chk li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.8; color: #4A3A4C; }
.chk li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--d-accent); }
.chk li strong { color: var(--d-ink); }

/* ── 사진 그리드 ───────────────────────────────── */
.ph3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ph3 figure { margin: 0; }
.ph3 img { width: 100%; height: 100%; border-radius: 12px; display: block; object-fit: cover; aspect-ratio: 4 / 3; }
.ph3 figcaption { margin-top: 8px; font-size: 13px; color: var(--d-sub); text-align: center; }

.eq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.eq figure { margin: 0; background: var(--d-soft); border: 1px solid var(--d-line); border-radius: 12px; padding: 14px; }
.eq img { width: 100%; height: auto; display: block; }
.eq figcaption { margin-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--d-ink); text-align: center; }

.docgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 44px; }
.docgrid figure { margin: 0; background: var(--d-soft); border: 1px solid var(--d-line); border-radius: 12px; overflow: hidden; }
.docgrid img { width: 100%; height: auto; display: block; }

/* ── 저널 ──────────────────────────────────────── */
.jsec { padding: 84px 0 10px; background: #fff; }
.jgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.jcard { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--d-line);
         border-radius: 14px; padding: 24px 22px; color: var(--d-ink); }
.jcard:hover { border-color: var(--d-accent); color: var(--d-ink); box-shadow: 0 10px 26px rgba(58, 29, 56, .10); }
.jcat { font-size: 12px; font-weight: 800; color: var(--d-accent); letter-spacing: .02em; }
.jt { font-size: 18px; font-weight: 800; line-height: 1.5; letter-spacing: -0.02em; }
.jd { font-size: 14px; line-height: 1.75; color: var(--d-sub); }

/* ── 아티클 ────────────────────────────────────── */
.art { padding: 52px 0 90px; background: #fff; }
.art-in { max-width: 820px; }
.art-cat { display: inline-block; font-size: 12.5px; font-weight: 800; color: var(--d-accent); margin-bottom: 10px; }
.art-h1 { margin: 0 0 16px; font-size: 36px; font-weight: 800; line-height: 1.34; letter-spacing: -0.03em; color: var(--d-ink); }
.art-lead { margin: 0 0 14px; font-size: 17px; line-height: 1.85; color: var(--d-sub); }
.art-meta { font-size: 13px; color: #9B8A9D; padding-bottom: 22px; border-bottom: 1px solid var(--d-line); margin-bottom: 30px; }

.art-body { font-size: 17px; line-height: 1.92; color: #3D2F40; }
.art-body h2 { margin: 44px 0 14px; font-size: 25px; font-weight: 800; letter-spacing: -0.02em; color: var(--d-ink); }
.art-body p { margin: 0 0 18px; }
.art-body strong { color: var(--d-ink); font-weight: 700; }
.art-body ul { margin: 0 0 20px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.art-body ul li { position: relative; padding-left: 24px; }
.art-body ul li::before { content: ""; position: absolute; left: 4px; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--d-accent); }
.art-body a { color: var(--d-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ── CTA 박스 ──────────────────────────────────── */
.art-cta { margin: 48px 0 0; background: var(--d-soft); border: 1px solid var(--d-line); border-radius: 16px; padding: 30px 28px; text-align: center; }
.art-cta .cta-t { font-size: 19px; font-weight: 800; color: var(--d-ink); margin-bottom: 10px; }
.art-cta p { margin: 0 0 18px; font-size: 15px; line-height: 1.8; color: var(--d-sub); }
.art-cta .btn-solid { display: inline-block; }

/* ── 관련 글 ───────────────────────────────────── */
.rel-wrap { margin-top: 56px; padding-top: 34px; border-top: 1px solid var(--d-line); }
.rel-h { font-size: 17px; font-weight: 800; color: var(--d-ink); margin-bottom: 16px; }
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rel-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--d-line); border-radius: 12px; padding: 18px 16px; color: var(--d-ink); }
.rel-card:hover { border-color: var(--d-accent); color: var(--d-ink); }
.rel-cat { font-size: 11.5px; font-weight: 800; color: var(--d-accent); }
.rel-t { font-size: 15px; font-weight: 700; line-height: 1.5; }

/* ── 홈 하단 오시는 길 ─────────────────────────── */
.visit-cta { margin-top: 84px; padding: 72px 0 78px; background: var(--d-soft); border-top: 1px solid var(--d-line); text-align: center; }
.visit-cta h2 { margin: 0 0 16px; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--d-ink); }
.visit-cta p { margin: 0 0 10px; font-size: 16px; line-height: 1.8; color: var(--d-sub); }
.visit-cta .btn-solid { display: inline-block; margin-top: 18px; }

/* ── 푸터 ──────────────────────────────────────── */
.sitefoot { background: #3A1D38; color: #E8DCEA; padding: 62px 0 34px; margin-top: 0; }
.foot-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; padding-bottom: 34px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.foot-brand .lg-en { font-size: 22px; font-weight: 900; letter-spacing: .06em; color: #fff; }
.foot-brand .lg-ko { font-size: 14px; font-weight: 700; color: #D9C3DD; margin-top: 4px; }
.foot-addr { margin: 16px 0 0; font-size: 14px; line-height: 1.8; color: #C6B0CA; }
.foot-col .foot-h { font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.foot-col p { margin: 0; font-size: 14px; line-height: 1.85; color: #C6B0CA; }
.foot-col a { color: #E8DCEA; }
.foot-col a:hover { color: #fff; }
.foot-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 22px; font-size: 12.5px; color: #A991AE; }
.foot-note { margin-top: 12px; font-size: 12px; line-height: 1.75; color: #9A81A0; }

/* ── 반응형 ────────────────────────────────────── */
@media (max-width: 980px) {
  .ph3, .eq, .rel-grid { grid-template-columns: repeat(2, 1fr); }
  .docgrid { grid-template-columns: repeat(3, 1fr); }
  .jgrid { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 640px) {
  .sub h1 { font-size: 29px; }
  .art-h1 { font-size: 27px; }
  .art-body { font-size: 16px; }
  .art-body h2 { font-size: 21px; }
  .ph3, .eq, .rel-grid { grid-template-columns: 1fr; }
  .docgrid { grid-template-columns: repeat(2, 1fr); }
  .visit-cta { padding: 54px 0 58px; }
}

/* ── 로고(SVG 엠블럼 + 워드마크) ───────────────────── */
.logo.tlogo img { display: block; height: 42px; width: auto; }
@media (max-width: 760px) { .logo.tlogo img { height: 34px; } }


/* ── 히어로 딥핑크 전환 (2026-09-16) ─────────────────
   리디아스킨과 같은 퍼플이라 브랜드가 겹쳤다 → 짙은 분홍 계열로 교체.
   ⛔ styles.css 는 손대지 않고 여기서만 덮어쓴다. */
.hero { background: #7A1142 url('/assets/hero-bg.webp') center bottom/cover no-repeat; }
.hero-glow { background: radial-gradient(closest-side, rgba(236,120,170,.34), rgba(236,120,170,0) 72%); }
.hero-badge { background: #fff; color: #7A1142; }
.hero .btn-solid { background: #C2185B; }
.hero .btn-solid:hover { background: #A81050; }
.creds { background: #5E0D33; }

/* ── 의료진 사진 (2026-09-16) ─────────────────────────
   원본 .cv-fig 는 height:480px + object-fit:cover 라 세로 인물 사진의 얼굴이 잘린다.
   드레스 의료진 사진은 흰 배경 전신컷이라 contain 으로 전체를 보여 준다. */
.cv-fig { height: 560px; background: #F8F4F9; border-radius: 10px;
  display: flex; align-items: flex-end; justify-content: center; }
.cv-fig img { width: auto; max-width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
@media (max-width: 860px) { .cv-fig { height: 420px; position: static; } }