/* ══════════════════════════════════════════════════════════════
   미디어 상세 시안 D1~D5 공통 셸
   = M4d(3단) 골격을 넓힌 것. 목록은 M2(mx-2.html).
   폭: 1440 / 목차 212 · 본문 1fr(≈760) · 우측 296 · gap 52
   변형 파일은 이 파일을 재정의하지 말고 자기 접두(v1-~v5-)만 쓸 것.
   ══════════════════════════════════════════════════════════════ */

.md-wrap{ max-width:1440px; margin:0 auto; padding:0 36px; }

/* ── 상단 헤더 ─────────────────────────────────────── */
.md-head{ padding-top:126px; }
.md-back{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; color:var(--g500);
  transition:color .3s var(--ease), gap .3s var(--ease);
}
.md-back:hover{ color:var(--blue-d); gap:11px; }
.md-meta{ margin-top:26px; display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:13px; color:var(--g500); }
.md-meta .fd{ font-weight:500; color:var(--g700); }
.md-meta .dot{ width:2px; height:2px; border-radius:50%; background:#C7CFDD; }
.md-head h1{
  margin-top:20px; max-width:1020px;
  font-size:clamp(31px,3.2vw,46px); font-weight:700; line-height:1.3;
  letter-spacing:-.03em; color:var(--ink);
}
.md-lead{ margin-top:20px; max-width:880px; font-size:17.5px; line-height:1.76; color:var(--g700); }
.md-hbar{
  margin-top:30px; padding:18px 0 22px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.md-au{ display:flex; align-items:center; gap:12px; }
.md-au .av{
  width:40px; height:40px; border-radius:50%; background:var(--tint);
  display:flex; align-items:center; justify-content:center;
  font-size:13.5px; font-weight:600; color:var(--blue-d);
}
.md-au .nm{ font-size:14.5px; font-weight:600; color:var(--ink); }
.md-au .rl{ margin-top:3px; font-size:12.5px; color:var(--g500); }

/* ── 3단 그리드 ────────────────────────────────────── */
.md-grid{
  display:grid; grid-template-columns:212px minmax(0,1fr) 296px; gap:52px;
  padding-top:48px; align-items:start;
}
body.no-side .md-grid{ grid-template-columns:212px minmax(0,1fr); }

/* ── 좌: 자동 목차 ─────────────────────────────────── */
.md-toc{ position:sticky; top:112px; }
.md-pct{ display:flex; align-items:baseline; gap:7px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.md-pct .n{ font-size:27px; font-weight:700; letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; }
.md-pct .u{ font-size:13px; font-weight:500; color:var(--g500); }
.md-toc-k{ margin-top:20px; font-size:11.5px; font-weight:600; letter-spacing:.16em; color:var(--g500); }
.md-toc ul{ margin-top:14px; list-style:none; padding:0; }
.md-toc li + li{ margin-top:2px; }
.md-toc a{
  display:block; position:relative; padding:9px 0 9px 15px;
  font-size:13.5px; font-weight:500; line-height:1.55; color:var(--g500);
  transition:color .3s var(--ease);
}
.md-toc a::before{
  content:''; position:absolute; left:0; top:12px; width:2px; height:calc(100% - 24px);
  min-height:9px; background:var(--line); transition:background .3s var(--ease);
}
.md-toc a:hover{ color:var(--g700); }
.md-toc a.on{ color:var(--blue-d); font-weight:600; }
.md-toc a.on::before{ background:var(--blue); }

/* ── 중앙 본문 ─────────────────────────────────────── */
.md-main{ min-width:0; }
.md-hero{ border-radius:16px; overflow:hidden; }
.md-hero .mx-ph{ aspect-ratio:16/9; }
.md-hero-cap{ margin-top:11px; font-size:13px; color:var(--g500); }
.md-rb{ margin-top:28px; }
.md-rb:empty{ margin-top:0; }

/* ── 우: 상담 카드 + 데이터 표 ─────────────────────── */
.md-side{ position:sticky; top:112px; }
.md-card{ border:1px solid var(--line); border-radius:16px; background:#fff; padding:24px 22px; }
.md-card .k{ font-size:11.5px; font-weight:600; letter-spacing:.16em; color:var(--blue); }
.md-card h4{ margin-top:12px; font-size:18px; font-weight:600; line-height:1.5; letter-spacing:-.02em; color:var(--ink); }
.md-card p{ margin-top:11px; font-size:13.5px; line-height:1.7; color:var(--g500); }
.md-card .go{
  margin-top:18px; display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:14.5px; font-weight:600; color:#fff; background:var(--blue);
  border-radius:10px; padding:13px 16px;
  transition:background .3s var(--ease), transform .45s var(--ease);
}
.md-card .go:hover{ background:var(--blue-d); transform:translateY(-2px); }
.md-card .go2{
  margin-top:8px; display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:14px; font-weight:600; color:var(--g700); background:#fff;
  border:1px solid var(--line); border-radius:10px; padding:12px 16px;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.md-card .go2:hover{ border-color:var(--blue); color:var(--blue-d); }

.md-tbl{ margin-top:20px; }
.md-tbl-k{ font-size:11.5px; font-weight:600; letter-spacing:.16em; color:var(--g500); }
.md-tbl dl{ margin-top:12px; border-top:1px solid var(--line); }
.md-tbl .r{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:13px 2px; border-bottom:1px solid var(--line);
}
.md-tbl dt{ font-size:13px; font-weight:500; color:var(--g500); flex-shrink:0; }
.md-tbl dd{ margin:0; font-size:13.5px; font-weight:600; color:var(--ink); text-align:right; line-height:1.5; }
.md-tbl dd.acc{ color:var(--blue-d); }

/* ── 관련 콘텐츠 · CTA ─────────────────────────────── */
.md-rel-zone{ padding-top:88px; }
.md-sec-t{ font-size:22px; font-weight:600; letter-spacing:-.022em; color:var(--ink); }
.md-rel-zone .mx-rel{ margin-top:26px; }
.md-cta-zone{ padding-top:80px; padding-bottom:120px; }

/* ── 시안 전환 칩 (검토 전용 · 좌하단) ───────────────── */
.md-sw{
  position:fixed; left:18px; bottom:18px; z-index:80;
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.94); border:1px solid var(--line);
  border-radius:999px; padding:6px 8px 6px 13px; backdrop-filter:blur(8px);
}
.md-sw .lb{ font-size:11.5px; font-weight:600; letter-spacing:.02em; color:var(--g500); margin-right:3px; }
.md-sw a{
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; color:var(--g500);
  transition:background .25s, color .25s;
}
.md-sw a:hover{ background:var(--tint); color:var(--blue-d); }
.md-sw a.on{ background:var(--blue); color:#fff; }

/* ── 반응형 ────────────────────────────────────────── */
@media(max-width:1320px){
  .md-grid, body.no-side .md-grid{ grid-template-columns:200px minmax(0,1fr); gap:44px; }
  .md-main{ max-width:900px; }
  .md-side{ position:static; grid-column:2; display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; margin-top:12px; }
  .md-tbl{ margin-top:0; }
}
@media(max-width:1000px){
  .md-grid, body.no-side .md-grid{ grid-template-columns:1fr; gap:32px; }
  .md-toc{ display:none; }
  .md-side{ grid-column:1; }
}
@media(max-width:820px){
  .md-wrap{ padding:0 20px; }
  .md-head{ padding-top:112px; }
  .md-hbar{ flex-direction:column; align-items:flex-start; gap:18px; }
  .md-side{ grid-template-columns:1fr; }
  .md-rel-zone{ padding-top:64px; }
  .md-sw{ left:12px; bottom:12px; }
}
@media(max-width:560px){
  .md-lead{ font-size:16px; }
  .md-cta-zone{ padding-top:56px; padding-bottom:96px; }
}