/* rb2026 — 레퍼런스 흡수 1차 (2026-10-02, 사용자 「새로 배운 것들 메인 페이지랑 거상에 반영해」)
   원칙·근거: ko/rb2026/_design/INSPIRATION.md. 미리보기 ?dvinsp=1(쿠키 유지, ?dvinsp=0 해제) · 전환 touch ko/rb2026/INSP · 롤백 rm.
   모든 CSS 뒤(ui.css 다음)에 싣고 :root 접두로 명시도 +1. 색은 기존 토큰만 씀(팔레트 생성기 재실행 불필요).
   일부러 그대로 둔 것(사용자가 직접 정한 것): Signature 자동 넘김·고른 이름 커짐, Shorts 옆 카드 톤다운(hover 원색), sub3_3 시술 카드 hover -22px. */

/* 0. 움직임 토큰 — hover·색 150ms / 상태 교체 240ms / 1회 등장 곡선 */
:root{--dv-d1:150ms;--dv-d2:240ms;--dv-ease-out:cubic-bezier(.23,1,.32,1);--dv-ease-enter:cubic-bezier(.19,1,.22,1)}

/* 1. 스크롤 등장 — 원칙 5 「섹션마다 등장 금지」: 내용 블록(그리드·목록·사진·지도)은 처음부터 보이고, 섹션 머리글만 1회 은은하게(16px · .7s).
      Signature 머리글(.dv-sig2-head)은 히어로 덮임 전환과 맞물려 있어 기존 그대로. */
:root .dv-reveal:not(.dv-sec-head):not(.dv-sig2-head),:root .dv-stagger>*{opacity:1;transform:none;transition:none}
:root .dv-sec-head.dv-reveal{transform:translate3d(0,16px,0);transition:opacity .7s var(--dv-ease-enter),transform .7s var(--dv-ease-enter)}
:root .dv-sec-head.dv-reveal.is-in,:root.dv-no-js .dv-sec-head.dv-reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  :root .dv-sec-head.dv-reveal{opacity:1;transform:none;transition:none}
}

/* 2. hover — 원칙 4 「이미지는 행동 대상이 아니다」: 이미지 확대·카드 들림·그림자 없음. 피드백은 글자(밑줄·색)와 화살표로 */
:root .dv-sigx-card:hover .dv-sig2-img img,
:root .dv-sig2-card:hover .dv-sig2-img img,:root .dv-sig2-card:focus-within .dv-sig2-img img,
:root a.dv-events2-link:hover .dv-events2-img img,
:root .dv-insight-btn:hover .dv-insight-th img,
:root .dv-lite:hover>img,:root .dv-lite:hover .dv-lite-img,
:root a.dv-mega-visual:hover img,
:root .dv-relb .dv-relb-main:hover .dv-relb-img,
:root .dv-rcard:hover .dv-rcard-thumb img,
:root .dv-journal-link:hover .dv-journal-thumb img{transform:none}
:root .dv-short-card:not(.is-playing):hover,
:root .dv-events-card:hover,:root .dv-rpost:hover,:root .dv-pb-card:hover{transform:none;box-shadow:none}
:root .dv-media-card:hover{box-shadow:none}
@media (hover:hover) and (pointer:fine){   /* 대신 글자로 — 터치 기기엔 hover 가 남지 않게 마우스 기기만 */
  :root .dv-sigx-card:hover .dv-sigx-nm{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
  :root .dv-insight-btn:hover .dv-insight-t{color:#FCFAF7}
}

/* 3. 포커스 링 대비 — 올리브 #A6B55D 는 밝은 면 위 2.0~2.1:1 → 올리브다크(크림 3.4:1 · 아이보리 3.2:1). 어두운 면은 올리브(차콜 위 6.3:1) */
:root :is(.dv-root,.dv-header,.dv-drawer,.dv-quick,.dv-mbar,.dv-top,.dv-footer,.dv-cta-band,.dv-modal,.dv-skip) :focus-visible{outline-color:var(--dv-olive-dp)}
:root :is(.dv-sec--dark,.dv-on-dark,.dv-footer,.dv-insight,.dv-principle,.dv-cta-band,.dv-modal,.dv-pb-sec--dark) :focus-visible{outline-color:var(--dv-olive)}

/* 4. 머리글 줄바꿈 고르게(외톨이 한 단어 방지) */
:root .dv-disp,:root .dv-pb-h{text-wrap:balance}

/* 5. Insight 주제 탭 — 탭마다 밑줄 대신 표시 막대 하나가 미끄러짐(insp.js 가 .dv-tabind 를 넣고 .has-ind). transform 만 움직인다 */
:root .dv-insight .dv-insight-filters{position:relative}
:root .dv-insight .dv-insight-filters.has-ind .dv-chip.is-active::after{background:transparent}
:root .dv-insight .dv-insight-filters .dv-chip{transition:color var(--dv-d1) ease}
.dv-tabind{position:absolute;left:0;bottom:0;width:100px;height:2px;background:var(--dv-olive-lt);transform-origin:0 0;pointer-events:none;transition:transform .3s var(--dv-ease-out)}
@media (prefers-reduced-motion:reduce){ .dv-tabind{transition:none} }