/* ==========================================================================
   rb2026 메인 — 2026-09 디자이너 시안(디바성형외과_메인+서브) 섹션 구성·배치
   색·폰트는 건드리지 않는다: 색은 --dv-* 토큰(팔레트가 재정의)만, 폰트는 기존 클래스(font.css)를 그대로 쓴다.
   스위치: inc/palette.php 의 dv_layout() — 미리보기 ?dvlayout=1 · 전환 touch ko/rb2026/LAYOUT · 롤백 rm
   섹션 순서·교체 파일: home.php · sections/v2/*.php   동작: js/home-layout.js
   ========================================================================== */

/* ---- 공통: 시안은 섹션 제목 위 작은 키커를 쓰지 않는다(원칙 배너만 유지) ---- */
.dv-sec-head .dv-kicker,
.dv-doctor-body .dv-kicker,
.dv-contact-info .dv-kicker{display:none}

/* ==========================================================================
   헤더 — 2026-09-28 css/header-layout.css 로 옮김(메인·서브 같은 헤더). 이 파일은 메인 본문 섹션만 다룬다.
   ========================================================================== */

/* ==========================================================================
   01 히어로 — 왼쪽 정렬, 작은 키커 + 큰 제목
   ========================================================================== */
.dv-hero--v2 .dv-hero-in{align-items:flex-start;text-align:left}
.dv-hero--v2 .dv-hero-cap{align-items:flex-start;max-width:min(100%,960px);margin:auto 0}
.dv-hero--v2 .dv-hero-kicker{font-style:normal;font-size:clamp(20px,1.7vw,32px);letter-spacing:0;color:var(--dv-olive-lt)}
.dv-hero-title{
  margin-top:clamp(8px,.9vw,16px);
  font-family:var(--dv-serif);font-weight:500;font-size:clamp(40px,4.2vw,80px);line-height:1.12;letter-spacing:-.01em;
  color:var(--dv-white);text-shadow:0 2px 30px rgba(47,43,40,.35);
}
.dv-hero--v2 .dv-hero-head{margin-top:clamp(20px,2.4vw,40px);font-size:clamp(18px,1.25vw,24px)}
.dv-hero--v2 .dv-hero-lead{font-size:clamp(15px,.9vw,17px)}
.dv-hero--v2 .dv-hero-focus{justify-content:flex-start;gap:0 14px;margin-top:clamp(14px,1.4vw,22px)}
.dv-hero--v2 .dv-hero-focus span::before{content:"#"}
.dv-hero--v2 .dv-hero-focus i{opacity:.45}
.dv-hero--v2 .dv-hero-actions{justify-content:flex-start}
.dv-hero--v2 .dv-hero-scroll{align-self:center}
/* 왼쪽 정렬 글자 뒤 대비: 왼쪽에서 오른쪽으로 옅어지는 층을 기존 스크림 위에 더한다 */
.dv-hero--v2 .dv-hero-scrim{
  background:
    linear-gradient(90deg,rgba(47,43,40,.55) 0%,rgba(47,43,40,.28) 45%,rgba(47,43,40,0) 75%),
    linear-gradient(180deg,rgba(47,43,40,.6) 0,rgba(47,43,40,.3) 100px,rgba(47,43,40,0) 240px),
    linear-gradient(180deg,rgba(47,43,40,0) 0%,rgba(47,43,40,.16) 30%,rgba(47,43,40,.45) 70%,rgba(47,43,40,.6) 100%);
}

/* ==========================================================================
   02 DIVA Signature — 고민형 카드 트랙(한 줄에 3장 + 다음 카드 일부)
   마크업 sections/v2/signature.php · 동작 js/home-layout.js(data-dv-sig2)
   카드 폭은 "보이는 칸 = 카드 --dv-sig-cols 장 + 다음 카드 --dv-sig-peek 만큼 + 사이 간격" 을 그대로 푼 값이다.
   살짝 보이는 정도만 바꾸려면 --dv-sig-peek 하나만 건드린다.
   자동 재생은 없다 — 넘기는 방법은 화살표·스와이프·가로 스크롤뿐이고, 위치는 트랙 아래 진행 바가 비춘다.
   화살표와 진행 바는 .dv-sig2.is-ready(=JS 가 붙인다) 일 때만 나온다. 스크립트가 없으면 트랙만 남아 그대로 스크롤된다.
   ========================================================================== */
.dv-sig2{
  --dv-sig-gap:clamp(18px,1.8vw,32px);   /* 카드 사이 간격 */
  --dv-sig-cols:3;                       /* 한 번에 다 보이는 카드 수 */
  --dv-sig-peek:.38;                     /* 다음 카드가 보이는 비율(카드 폭 기준) */
  padding-block:clamp(52px,6.7vw,96px);
  background:var(--dv-cream);overflow-x:clip;
}
/* ---- 머리: 큰 세리프 제목(DIVA Signature) → 한 줄 소개. 둘 다 가운데(2026-09-28 사용자 요청). 화살표는 여기가 아니라 아래 진행 바 줄에 있다 ---- */
.dv-sig2-head{margin-bottom:clamp(28px,2.6vw,42px);text-align:center}
.dv-sig2-head .dv-sub{font-size:clamp(18px,1.4vw,20px)}   /* '가장 자신 있는 시술을 모았습니다.' — 기본 .dv-sub 보다 크게 */

/* ---- 화살표: 카드 한 칸씩. 끝에 닿으면 흐려지고 눌리지 않는다 ---- */
.dv-sig2-arws{display:none;gap:10px;flex:0 0 auto}
@media (min-width:1024px){.dv-sig2.is-ready .dv-sig2-arws{display:flex}}
.dv-sig2-arw{
  display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--dv-line);border-radius:50%;
  background:transparent;color:var(--dv-ink-2);transition:border-color .3s,color .3s,opacity .3s;
}
.dv-sig2-arw svg{width:15px;height:15px;stroke-width:1.5}
.dv-sig2-arw[data-dir="-1"] svg{transform:rotate(180deg)}
.dv-sig2-arw:not(:disabled){border-color:rgba(69,56,50,.42);color:var(--dv-ink)}   /* 눌리는 화살표만 선명하게(테두리 Espresso 42%·아이콘 굵게, 2026-09-26). 비활성은 그대로 */
.dv-sig2-arw:not(:disabled) svg{stroke-width:1.9}
.dv-sig2-arw:hover:not(:disabled){border-color:var(--dv-olive-dp);color:var(--dv-olive-dp)}
.dv-sig2-arw:disabled{opacity:.3;cursor:default}

/* ---- 트랙: 가로 스냅 스크롤. 스크롤바는 감추고 위치는 진행 바가 대신 보여준다 ---- */
.dv-sig2-car{position:relative}
.dv-sig2-track{
  display:flex;gap:var(--dv-sig-gap);margin:0;padding:0;list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
}
.dv-sig2-track::-webkit-scrollbar{display:none}
/* 드래그 중: 스냅을 꺼야 scrollLeft 가 손에 붙고, 놓으면 다시 켜지며 가장 가까운 카드로 정렬된다.
   쇼츠 트랙(home-2.css)과 같되, 카드에 글이 있어 user-select 를 함께 끈다 */
.dv-sig2-track.is-drag{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing;-webkit-user-select:none;user-select:none}
.dv-sig2-card{
  position:relative;scroll-snap-align:start;
  flex:0 0 calc((100% - var(--dv-sig-gap) * var(--dv-sig-cols)) / (var(--dv-sig-cols) + var(--dv-sig-peek)));
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);   /* 1행 사진(+캡션 겹침) / 2행 고민 문구. 트랙의 stretch 로 카드 높이가 같아진다 */
}

/* ---- 카드 속(2026-09-26): 사진 위 하단에 시술명·더 알아보기(어두운 그라디에이션 위 흰 글자) → 사진 아래 고민 문구.
   캡션은 사진과 같은 그리드 칸(1/1)에 놓고 아래 정렬 — absolute 가 아니라서 a.dv-sig2-more::after(카드 전체 클릭 면)의 기준이 카드로 남는다 ---- */
.dv-sig2-img{grid-area:1/1;margin:0;aspect-ratio:3/4;overflow:hidden;background:var(--dv-cream-2)}   /* 1:1 → 3:4(2026-09-27, 사용자 「정사각형은 고급진 느낌이 없다」). 원본은 가로(1.34~1.79)라 세로 크롭이 큼 — object-position 은 signature.php 카드별 값 */
.dv-sig2-img img{display:block;width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:no-preference){
  .dv-sig2-img img{transition:transform .6s var(--dv-ease)}
  .dv-sig2-card:hover .dv-sig2-img img,.dv-sig2-card:focus-within .dv-sig2-img img{transform:scale(1.04)}
}
.dv-sig2-cap{
  grid-area:1/1;align-self:end;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  padding:clamp(64px,6vw,88px) clamp(16px,1.4vw,20px) clamp(16px,1.4vw,20px);color:#FCFAF7;
  background:linear-gradient(180deg,rgba(47,43,40,0) 0,rgba(47,43,40,.42) 45%,rgba(47,43,40,.78) 100%);   /* 원칙 밴드 오버레이(.78)와 같은 차콜 */
}
.dv-sig2-nm{margin:0;font-size:clamp(21px,1.6vw,24px);font-weight:700;line-height:1.3;letter-spacing:-.01em;color:#FCFAF7;text-shadow:0 1px 8px rgba(47,43,40,.35);text-wrap:balance}   /* 17 → 21~24px(2026-09-26 「더 키워줘」). 가장 긴 「리투오 스킨부스터」가 360 카드(226px)에서도 한 줄 */
a.dv-sig2-more{   /* a. 로 올려야 .dv-root a(0,1,1) 의 글자색을 이긴다 */
  display:inline-flex;align-items:center;gap:9px;padding-bottom:5px;
  border-bottom:1px solid rgba(252,250,247,.45);
  font-size:14px;font-weight:600;letter-spacing:-.01em;color:rgba(252,250,247,.92);   /* 시술명보다 작게 — 카드에서 가장 낮은 단계 */
  transition:color .25s,border-color .25s;
}
a.dv-sig2-more::after{content:"";position:absolute;inset:0}   /* 카드 전체가 이 링크의 클릭 면 */
a.dv-sig2-more svg{width:22px;height:8px;overflow:visible;stroke-width:1.4;transition:transform .35s var(--dv-ease)}
.dv-sig2-card:hover a.dv-sig2-more,a.dv-sig2-more:focus-visible{color:var(--dv-olive-lt);border-color:var(--dv-olive-lt)}   /* 어두운 면 위 강조 → Olive(차콜 위 6.2:1) */
.dv-sig2-card:hover a.dv-sig2-more svg{transform:translateX(6px)}
@media (max-width:1023px){
  a.dv-sig2-more{padding-top:14px;margin-top:-14px}   /* 터치 면적 44px — 위쪽 여백으로만 늘려 밑줄 위치는 그대로(2026-09-27) */
}
.dv-sig2-worry{   /* 사진 아래 시술 설명 한 줄(2026-09-26). 클래스명은 고민 문구 시절 그대로 — js/home-layout.js fitWorry 가 이 클래스를 본다 */
  grid-area:2/1;margin:clamp(12px,1.1vw,16px) 0 0;word-break:keep-all;text-wrap:pretty;
  font-size:clamp(14.5px,1.05vw,15.5px);line-height:1.6;letter-spacing:-.02em;color:var(--dv-ink-2);
  min-height:1.6em;   /* 기본은 한 줄. 현재 폭에서 두 줄로 꺾인 카드가 하나라도 있으면 js 가 .has-2line 을 붙여 두 줄을 확보한다 → 카드 높이 통일 */
}
.dv-sig2.has-2line .dv-sig2-worry{min-height:3.2em}

/* ---- 아래 줄: 진행 바(왼쪽, 남는 폭 전부) + 화살표(오른쪽 끝, ≥1024 — 2026-09-28 머리글에서 옮김). 바의 폭=보이는 비율, 위치=스크롤 위치(둘 다 JS 가 넣는다).
        .is-ready 전에는 줄 자체를 감춘다 — 스크립트 없이는 바도 화살표도 의미가 없다 ---- */
.dv-sig2-foot{display:none;align-items:center;gap:var(--dv-sig-gap);margin-top:clamp(26px,2.6vw,40px)}
.dv-sig2.is-ready .dv-sig2-foot{display:flex}
.dv-sig2-bar{position:relative;flex:1 1 auto;height:2px;background:var(--dv-line)}
.dv-sig2-bar span{display:block;height:100%;width:38%;background:var(--dv-olive-dp)}   /* 스크롤마다 다시 그리므로 transition 을 주지 않는다 */

@media (min-width:768px) and (max-width:1023px){
  .dv-sig2{--dv-sig-cols:2}
}
@media (max-width:767px){
  /* 카드 1장 + 다음 카드는 오른쪽 여백만큼 보인다 — 트랙을 여백 밖으로 빼고 안쪽 패딩으로 머리글과 왼쪽을 맞춘다 */
  .dv-sig2{--dv-sig-cols:1;--dv-sig-peek:0}
  .dv-sig2-track{margin-inline:calc(var(--dv-gut) * -1);padding-inline:var(--dv-gut);scroll-padding-inline:var(--dv-gut)}
}

/* ==========================================================================
   05 DIVA Shorts — 가운데 카드 강조, 화살표는 가운데 카드와 옆 카드 사이 빈 칸(시안 pc_main, 2026-09-28), 버튼은 가운데
   ========================================================================== */
.dv-shorts2{--dv-short-w:clamp(200px,15vw,290px);--dv-short-pad:clamp(24px,3vw,44px);--dv-short-gap:clamp(18px,2.2vw,40px);--dv-short-spread:92px}   /* spread = 가운데 카드 양옆을 추가로 벌리는 폭(≥768). 화살표 72 + 여유 ≈ 104 가 되게 */
.dv-shorts2 .dv-shorts-wrap{position:relative}
.dv-shorts2 .dv-shorts-track{
  position:relative;gap:var(--dv-short-gap);
  padding:var(--dv-short-pad) calc(50% - var(--dv-short-w) / 2);
  scroll-padding-inline:calc(50% - var(--dv-short-w) / 2);scroll-snap-type:x mandatory;
}
.dv-shorts2 .dv-short{flex:0 0 var(--dv-short-w);scroll-snap-align:center}
@media (prefers-reduced-motion:no-preference){.dv-shorts2 .dv-short{transition:transform .45s var(--dv-ease)}}
.dv-shorts2 .dv-short.is-center{transform:scale(1.17);position:relative;z-index:1}
/* 가운데 카드 양옆을 벌린다 — 시안(pc_main)처럼 화살표가 카드에 겹치지 않고 가운데 카드와 옆 카드 사이 빈 칸 한가운데에 선다(2026-09-28).
   transform 이라 레이아웃·스냅·offsetLeft 는 그대로(가운데 판정·scrollTo 를 하는 JS 무영향). 폰(<768)은 옆 카드가 가장자리만 보이므로 벌리지 않는다 */
@media (min-width:768px){
  .dv-shorts2 .dv-short:has(~ .is-center){transform:translateX(calc(var(--dv-short-spread) * -1))}
  .dv-shorts2 .dv-short.is-center ~ .dv-short{transform:translateX(var(--dv-short-spread))}
}
/* 옆 카드는 톤 다운(채도↓·어둡게), 가운데 카드만 원색 — 24장 원색 썸네일이 나란히 서면 시선이 가운데로 모이지 않는다(2026-09-27). 마우스를 올린 카드는 원색.
   2026-09-28 사용자 요청으로 한 단계 더: saturate .5→.35, brightness .86→.68 */
.dv-shorts2 .dv-short .dv-short-card>img{filter:saturate(.35) brightness(.68);transition:filter .45s var(--dv-ease),transform .8s var(--dv-ease),opacity .3s}
.dv-shorts2 .dv-short.is-center .dv-short-card>img,.dv-shorts2 .dv-short:hover .dv-short-card>img{filter:none}
.dv-shorts2 .dv-short:not(.is-center) .dv-short-tt{opacity:.8}
/* 재생 버튼은 가운데 카드에만 — 옆 카드는 누르면 가운데로 온다(home-2.js). 흰 재생 원과 올리브 화살표 원이 한 줄에 나란히 서서 헷갈렸다(2026-09-27) */
.dv-shorts2 .dv-short:not(.is-center) .dv-lite-play{visibility:hidden;opacity:0}
.dv-shorts2 .dv-short .dv-lite-play{transition:opacity .3s,visibility .3s,transform .2s,background-color .2s}
.dv-shorts2 .dv-short:not(.is-center):hover .dv-short-tt{opacity:1}
.dv-shorts2-arw{
  position:absolute;z-index:3;top:calc(var(--dv-short-pad) + var(--dv-short-w) * 16 / 9 / 2);transform:translateY(-50%);
  display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--dv-olive);color:var(--dv-ink);   /* 50 → 72: 가운데 카드의 재생 버튼(54×1.17≈63)보다 크게(2026-09-27) */
  box-shadow:0 6px 18px rgba(47,43,40,.18);
}
.dv-shorts2-arw svg{width:28px;height:28px;stroke-width:2}
.dv-shorts2-arw--prev svg{transform:rotate(180deg)}
/* 화살표 중심 = 가운데 카드(×1.17) 가장자리와 벌어진 옆 카드 가장자리의 한가운데. .5425 = (1.17 + 1) / 4, 36 = 지름 72 의 절반 (2026-09-28) */
.dv-shorts2-arw--prev{left:calc(50% - var(--dv-short-w) * .5425 - (var(--dv-short-gap) + var(--dv-short-spread)) / 2 - 36px)}
.dv-shorts2-arw--next{left:calc(50% + var(--dv-short-w) * .5425 + (var(--dv-short-gap) + var(--dv-short-spread)) / 2 - 36px)}
.dv-shorts2 .dv-shorts-foot{justify-content:center;margin-top:clamp(20px,2.4vw,36px)}
@media (max-width:767px){
  .dv-shorts2{--dv-short-w:58vw}
  .dv-shorts2-arw{width:56px;height:56px}   /* 40 → 56 */
  .dv-shorts2-arw svg{width:22px;height:22px}
  .dv-shorts2-arw--prev{left:calc(50% - var(--dv-short-w) * .585 - 30px)}   /* 중심점 유지(−8px 보정) */
  .dv-shorts2-arw--next{left:calc(50% + var(--dv-short-w) * .585 - 26px)}
}

/* ==========================================================================
   05 Doctor's Insight — 요소 정리(2026-09-27, 색·배경은 그대로)
   머리글(가운데) + 작은 채널 링크 → 전체 너비 텍스트 탭(선택은 짧은 올리브 밑줄, 영상 수 숨김) → 62/38 본문(열 44px)
   목록: 30개 스크롤 상자(PC 상자 = 영상 칼럼, 폰 420px, 아래 페이드), 항목 간격 22, 축약 제목, 조회수·시점·「재생 중」 숨김, 선택 = 올리브 세로선 + 은은한 배경
   외부 링크는 테두리 없는 텍스트. 마크업 sections/insight.php, 동작 js/home.js 03.
   ========================================================================== */
.dv-insight .dv-sec-head{margin-bottom:0}
.dv-insight .dv-sec-head .dv-sub{max-width:none}
a.dv-insight-chan{display:inline-flex;align-items:center;margin-top:14px;font-size:14px;font-weight:600;color:rgba(252,250,247,.7);white-space:nowrap;transition:color .2s}
a.dv-insight-chan:hover,a.dv-insight-chan:focus-visible{color:#FCFAF7}
.dv-insight .dv-insight-filters{display:flex;flex-wrap:nowrap;justify-content:center;gap:0 28px;margin:clamp(28px,3vw,40px) 0;padding:0;border-bottom:1px solid rgba(252,250,247,.12);overflow-x:auto;scrollbar-width:none}
.dv-insight .dv-insight-filters::-webkit-scrollbar{display:none}
.dv-insight .dv-insight-filters .dv-chip{position:relative;height:auto;padding:0 0 14px;border:0;border-radius:0;background:transparent;color:rgba(252,250,247,.6);font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.dv-insight .dv-insight-filters .dv-chip::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent}
.dv-insight .dv-insight-filters .dv-chip:hover,.dv-insight .dv-insight-filters .dv-chip.is-active{background:transparent;border-color:transparent;color:#FCFAF7}
.dv-insight .dv-insight-filters .dv-chip.is-active::after{background:var(--dv-olive-lt)}
.dv-insight .dv-insight-cnt,.dv-insight .dv-insight-np,.dv-insight .dv-insight-m,.dv-insight [data-dv-insight-views],.dv-insight [data-dv-insight-ago]{display:none!important}
.dv-insight .dv-insight-grid{grid-template-columns:minmax(0,62fr) minmax(0,38fr);gap:44px;align-items:stretch}
.dv-insight .dv-insight-now{margin-top:16px;align-items:center}
.dv-insight .dv-insight-now-t{font-size:clamp(16px,1.25vw,19px)}
.dv-insight a.dv-insight-yt{height:auto;padding:0;border:0;border-radius:0;font-size:13.5px;color:rgba(252,250,247,.6)}
.dv-insight a.dv-insight-yt:hover,.dv-insight a.dv-insight-yt:focus-visible{background:transparent;color:#FCFAF7}
.dv-insight .dv-insight-side{min-height:0}
.dv-insight .dv-insight-listwrap{margin-top:0;flex:1 1 0;min-height:0}
.dv-insight .dv-insight-listwrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(180deg,rgba(69,56,50,0),var(--dv-navy-dp));pointer-events:none;opacity:0;transition:opacity .2s}   /* 아래에 더 있다는 힌트 — js 가 넘칠 때만 .has-more */
.dv-insight .dv-insight-listwrap.has-more::after{opacity:1}
.dv-insight .dv-insight-list{padding:0 10px 0 0;display:flex;flex-direction:column;gap:22px;scrollbar-width:thin;scrollbar-color:rgba(252,250,247,.22) transparent}
.dv-insight .dv-insight-list::-webkit-scrollbar{width:4px}
.dv-insight .dv-insight-list::-webkit-scrollbar-thumb{background:rgba(252,250,247,.22);border-radius:2px}
.dv-insight .dv-insight-item+.dv-insight-item{border-top:0}
.dv-insight .dv-insight-btn{grid-template-columns:132px minmax(0,1fr);padding:0 0 0 14px;border-left:2px solid transparent;border-radius:0;background:transparent;gap:14px;align-items:center;transition:border-color .2s,background-color .2s}
.dv-insight .dv-insight-btn:hover{background:transparent}
.dv-insight .dv-insight-item.is-active .dv-insight-btn{border-left-color:var(--dv-olive-lt);background:linear-gradient(90deg,rgba(252,250,247,.06),rgba(252,250,247,0))}
.dv-insight .dv-insight-t{font-size:15px;font-weight:600;line-height:1.45}
.dv-insight .dv-insight-item.is-active .dv-insight-t{color:#FCFAF7}
@media (max-width:1024px){
  .dv-insight .dv-insight-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .dv-insight .dv-insight-filters{justify-content:flex-start;gap:0 22px;margin:24px 0}   /* 폰: 탭이 넘치면 왼쪽부터 가로 스크롤 */
  .dv-insight .dv-insight-filters .dv-chip{height:auto;padding:0 0 12px}
  .dv-insight .dv-insight-listwrap{flex:none;height:420px}   /* 4.5개쯤 보이고 안에서 스크롤 */
  .dv-insight .dv-insight-list{gap:18px;padding-right:8px}
  .dv-insight .dv-insight-btn{grid-template-columns:112px minmax(0,1fr);gap:12px}
  /* 2026-09-27 모바일 UX: 탭이 더 있다는 신호(오른쪽 끝 페이드) · 링크 두 개의 터치 면적 44px(글자 크기는 그대로) */
  .dv-insight .dv-insight-filters{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);padding-right:40px}
  .dv-insight a.dv-insight-chan{min-height:44px;padding:0 14px;margin-top:4px}
  .dv-insight a.dv-insight-yt{min-height:44px;padding:0 14px;margin:-6px -14px}
}   /* .dv-insight-now 는 폰(≤768)에서 home.css 의 세로 배치(제목 전체 폭 → 칩 → 링크)를 그대로 쓴다 */

/* ==========================================================================
   06 Dr. Kim Story — 인터뷰 영상이 사진 오른쪽 아래에 겹친다
   ========================================================================== */
.dv-doctor .dv-doctor-grid{grid-template-columns:minmax(0,640fr) minmax(0,680fr);gap:clamp(40px,6vw,120px);align-items:start}
.dv-doctor-media{position:relative;padding-bottom:clamp(110px,10vw,180px)}
.dv-doctor-media .dv-doctor-photo{aspect-ratio:640/460;border-radius:0}
.dv-doctor-media .dv-doctor-clip{position:absolute;left:56%;bottom:0;width:min(50%,360px)}
.dv-doctor-media .dv-doctor-clip .dv-lite{border-radius:0}
.dv-doctor-body .dv-doctor-career{margin-top:clamp(24px,2.4vw,36px);padding-top:clamp(24px,2.4vw,36px);border-top:1px solid var(--dv-line)}
a.dv-doctor-more{margin-top:clamp(28px,2.8vw,40px)}
@media (max-width:1023px){
  .dv-doctor .dv-doctor-grid{grid-template-columns:minmax(0,1fr)}
  .dv-doctor-media{display:contents}
  .dv-doctor-media .dv-doctor-photo{order:1}
  .dv-doctor-body{order:2}
  .dv-doctor-media .dv-doctor-clip{order:3;position:static;width:min(100%,420px)}
}

/* 08 원칙 배너: 제목 한 줄은 sections/v2/principle.php 가 <br> 없이 출력한다 */

/* ==========================================================================
   07 Media in DIVA — 컴팩트(2026-09-27, 사용자 「중요도가 낮아 사이즈를 줄이고 싶다」, A안)
   상하 여백 112→64 · 카드 274→200px(폰 150) · 배경 베이지 · 버튼 없음(2026-09-27 게시판 삭제). 제목 크기는 다른 섹션과 같게 둔다. 문구·마키 동작은 그대로.
   ========================================================================== */
.dv-media{padding:clamp(40px,4.6vw,64px) 0}   /* 배경 베이지는 마크업의 .dv-sec--beige(기존 클래스): 앞 Shorts 는 아이보리로 끝나고 뒤 Q&A 는 크림 — 둘 다와 나뉜다 */
.dv-media .dv-sec-head{margin-bottom:clamp(20px,2.2vw,28px)}
/* 제목은 다른 섹션과 같은 .dv-disp 기본 크기 — 텍스트 위계 유지(2026-09-27, 44px 축소안은 되돌림) */
.dv-media .dv-sub{font-size:14.5px;margin-top:8px}
.dv-media .dv-media-card{width:clamp(170px,14vw,200px);border-radius:8px}
.dv-media .dv-media-cap{padding:8px 12px 9px}
.dv-media .dv-media-cap b{font-size:12.5px}
.dv-media .dv-media-cap i{font-size:10px}
.dv-media .dv-media-foot{margin-top:clamp(16px,1.8vw,22px)}
.dv-media .dv-media-foot .dv-btn{height:auto;min-height:44px;padding:6px 8px;border:0;border-radius:0;background:none;font-size:14px;font-weight:600;color:var(--dv-ink-2);text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(198,178,156,.9);transition:color .2s}
.dv-media .dv-media-foot .dv-btn:hover,.dv-media .dv-media-foot .dv-btn:focus-visible{background:none;color:var(--dv-ink)}
.dv-media .dv-media-foot .dv-btn svg{display:none}
@media (max-width:767px){
  .dv-media .dv-media-card{width:150px}
}

/* ==========================================================================
   09 Notice & Event — 가운데 제목, 대표 이미지 카드 3장, 가운데 버튼 (Olive Light 면)
   ========================================================================== */
.dv-events2{background:var(--dv-olive-soft)}
.dv-events2-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.6vw,24px)}
a.dv-events2-link{display:flex;flex-direction:column;align-items:flex-start;color:inherit}
.dv-events2-img{display:block;width:100%;aspect-ratio:464/272;overflow:hidden;background:var(--dv-white)}
.dv-events2-img img{display:block;width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:no-preference){
  .dv-events2-img img{transition:transform .6s var(--dv-ease)}
  a.dv-events2-link:hover .dv-events2-img img{transform:scale(1.04)}
}
.dv-events2 .dv-events-tag{margin-top:20px;background:rgba(166,181,93,.24)}
.dv-events2-tt{margin:12px 0 0;font-size:clamp(15px,1vw,17px);font-weight:700;line-height:1.5;letter-spacing:-.02em;color:var(--dv-ink)}
a.dv-events2-link:hover .dv-events2-tt{text-decoration:underline;text-underline-offset:3px}
.dv-events2-date{margin-top:6px;font-size:13px;color:var(--dv-muted);font-variant-numeric:tabular-nums}
.dv-events2-foot{display:flex;justify-content:center;margin-top:clamp(32px,3.2vw,48px)}
@media (max-width:767px){
  .dv-events2-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--dv-gut) * -1);padding-inline:var(--dv-gut);scroll-padding-inline:var(--dv-gut);scrollbar-width:none}
  .dv-events2-grid::-webkit-scrollbar{display:none}
  .dv-events2-card{scroll-snap-align:start}
}