/* ══════════════════════════════════════════════════════════════════
   OSTEN — 인터랙션 (호버 · 고정 헤더 · 하단 CTA)

   스크롤 등장 애니메이션은 넣지 않습니다.
   lge.co.kr 계측 : 보이는 요소 3,213개 중 transition 2개 · opacity:0 요소 2개.
   시간 값은 쿠쿠·코오롱몰 실측 0.3s ease, 삼성 0.2s ease 를 따릅니다.

   숨겼다 보여 주는 규칙이 하나도 없으므로 크롤러와 사람이 같은 화면을 봅니다. [3강 p.7]
   ══════════════════════════════════════════════════════════════════ */

:root{
  --ease:cubic-bezier(.35,0,.36,1);   /* 삼성 실측 곡선 */
  --d-hover:.3s;                       /* 쿠쿠·코오롱몰 실측 */
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;}
}

/* ── 1. 헤더 ─────────────────────────────────────────────────── */
.rn-header-wrap.fixed{transition:transform .4s var(--ease), box-shadow .3s linear;
  will-change:transform;}
.rn-header-wrap.fixed.slid{transform:translate3d(0,-100%,0);}
.rn-header-wrap.fixed .scroll-prog{opacity:1;}
.scroll-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;
  opacity:0;transition:opacity .3s linear;pointer-events:none;z-index:3;}
.scroll-prog i{display:block;height:100%;background:var(--red);
  transform:scaleX(0);transform-origin:0 50%;}

/* ── 2. 호버 ─────────────────────────────────────────────────── */
.prd-thumb img{transition:transform .4s ease;}
.prd-item:hover .prd-thumb img{transform:scale(1.04);}
.prd-item:hover .prd-name{text-decoration:underline;text-underline-offset:3px;}

.ind-item img{transition:transform .45s ease!important;}
.ind-item a:hover img{transform:scale(1.05)!important;}
.ind-item .ind-cta svg{transition:transform var(--d-hover) ease;}
.ind-item a:hover .ind-cta svg{transform:translateX(4px);}

.case-list li a .thumb img,.yt-thumb img{transition:transform .4s ease!important;}
.case-list li a:hover .thumb img,.yt-list a:hover .yt-thumb img{transform:scale(1.04)!important;}

.quick-icon-list a .q-ico{transition:background-color .2s ease;}

.vbtn,.more-btn,.chip-row a{transition:background-color .2s ease,color .2s ease,border-color .2s ease;}
.more-btn svg{transition:transform var(--d-hover) ease;}
.more-btn:hover svg{transform:translateX(3px);}

.visual-media img{transition:transform .5s ease;}

.tit-sub .cnt{font-weight:700;font-variant-numeric:tabular-nums;}

/* ── 3. 상세 하단 고정 견적 바 (삼성 floating-sticky 자리) ───── */
.sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;
  border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(17,17,17,.08);
  transform:translate3d(0,110%,0);transition:transform .4s var(--ease);}
.sticky-buy.on{transform:none;}
.sticky-buy .inner{max-width:var(--w-mall);margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;}
.sticky-buy .sb-l{display:flex;align-items:baseline;gap:14px;min-width:0;}
.sticky-buy .sb-l b{font-size:16px;font-weight:500;line-height:22px;letter-spacing:-.2px;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sticky-buy .sb-l span{font-size:19px;font-weight:700;line-height:26px;letter-spacing:-.4px;
  color:var(--red);}
.sticky-buy .sb-l span .won{font-size:16px;font-weight:400;margin-left:1px;}
.sticky-buy .sb-r{display:flex;gap:8px;flex:none;}
.sticky-buy .sb-r .vbtn{min-width:124px;height:44px;padding:0 20px;font-size:14px;}
@media (max-width:768px){
  .sticky-buy .inner{padding:10px 16px;gap:12px;}
  .sticky-buy .sb-l{flex-direction:column;gap:0;}
  .sticky-buy .sb-l b{font-size:13px;}
  .sticky-buy .sb-l span{font-size:17px;line-height:24px;}
  .sticky-buy .sb-r .vbtn{min-width:0;height:40px;padding:0 14px;font-size:13px;}
  .sticky-buy .sb-r .vbtn.line{display:none;}
}

/* ── 4. 목차 ─────────────────────────────────────────────────── */
.toc a{transition:color .2s ease;}
.toc a.on{color:var(--red);font-weight:700;}

/* ── 5. 가로 레일 ────────────────────────────────────────────── */
.rail-wrap{position:relative;}
[data-rail]{overflow-x:auto;flex-wrap:nowrap;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;}
[data-rail]::-webkit-scrollbar{display:none;}
[data-rail] > *{scroll-snap-align:start;flex:0 0 auto;}
.rail-btn{position:absolute;top:50%;margin-top:-22px;width:44px;height:44px;border-radius:50%;
  background:#fff;border:1px solid var(--line);box-shadow:0 2px 12px rgba(17,17,17,.1);
  cursor:pointer;display:none;z-index:2;transition:opacity .2s ease,transform .25s ease;}
.rail-live .rail-btn{display:block;}
.rail-btn:disabled{opacity:.25;cursor:default;}
.rail-btn:not(:disabled):hover{transform:scale(1.06);}
.rail-btn.prev{left:-22px;}
.rail-btn.next{right:-22px;}
.rail-btn::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;
  border-top:2px solid var(--ink);border-right:2px solid var(--ink);}
.rail-btn.prev::before{transform:translate(-40%,-50%) rotate(-135deg);}
.rail-btn.next::before{transform:translate(-60%,-50%) rotate(45deg);}
@media (max-width:1439px){.rail-btn{display:none!important;}}

/* ── 6. 표 · 아코디언 · 포커스 ───────────────────────────────── */
.cmp tbody tr{transition:background-color .2s ease;}
.cmp tbody tr:hover{background:var(--bg-1);}
.faq details{transition:box-shadow .25s ease;}
.faq summary{transition:color .2s ease;}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--red);outline-offset:2px;border-radius:2px;}