/* 기기 시연 + 기능 안내 한 흐름(대표 11/12). 기능별 장: 왼쪽 제목(따라 붙음) + 오른쪽 기기 카드.
   카드 높이·버튼 줄을 맞추고, 위쪽 순서 막대가 지금 장을 표시한다. transform·opacity만. */
.dl .dl-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:12px}
.dl .dl-bar .live-tag{margin:0}
.dl-rail{position:sticky;top:8px;z-index:5;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:8px;margin:0 -8px 8px;background:color-mix(in srgb,var(--white) 92%,transparent);backdrop-filter:blur(6px);border-radius:14px}
.dl-rail a{flex:none;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);text-decoration:none;color:var(--muted);font-size:14px;font-weight:700;background:var(--white);transition:background-color .2s,color .2s,border-color .2s}
.dl-rail a i{font-style:normal;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:var(--line);color:var(--ink)}
.dl-rail a.on{color:var(--ink);border-color:var(--ink)}
.dl-rail a.on i{background:var(--mint);color:#06231F}
.ch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:28px;padding:40px 0;border-top:1px solid var(--line);scroll-margin-top:80px}
.ch:first-of-type{border-top:0}
.ch-h{position:sticky;top:84px;align-self:start;display:grid;gap:8px;justify-items:start}
.ch-n{font-size:44px;font-weight:900;line-height:1;color:var(--mint);letter-spacing:-.02em}
.ch-h h2{margin:0;font-size:clamp(22px,2.4vw,28px)}
.ch-h p{margin:0;color:var(--muted);font-size:15px;line-height:1.65}
.ch-more{font-weight:700;font-size:14px;color:var(--ink)}
.ch .devs{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:0;align-items:stretch}
.ch .dev{height:100%}
.ch .dev .dev-n{flex:1}
.ch .dev-acts{margin-top:12px}
.ch .dev-acts .dev-btn{flex:1 1 auto}
#ch-watch .devs{grid-template-columns:1fr}
/* 홀수면 마지막 카드는 한 줄 전체(혼자 남는 칸이 생기지 않게) */
.ch .devs>.dev:last-child:nth-child(odd){grid-column:1/-1}
#ch-watch .live-player{margin-bottom:12px}
a.dev-link{text-decoration:none;color:inherit;position:relative;transition:border-color .2s,transform .2s}
a.dev-link:hover{border-color:var(--ink);transform:translateY(-2px)}
.dev-go{position:absolute;right:16px;top:14px;font-weight:900;color:var(--muted)}
.dl.js .ch .dev{opacity:0;transform:translateY(12px)}
.dl.js .ch.in .dev{opacity:1;transform:none;transition:opacity .45s,transform .45s cubic-bezier(.2,.8,.2,1)}
.dl.js .ch.in .dev:nth-child(2){transition-delay:.06s}.dl.js .ch.in .dev:nth-child(3){transition-delay:.12s}.dl.js .ch.in .dev:nth-child(4){transition-delay:.18s}.dl.js .ch.in .dev:nth-child(5){transition-delay:.24s}.dl.js .ch.in .dev:nth-child(6){transition-delay:.3s}
@media (max-width:760px){
  .dl-rail{top:4px}
  .ch{grid-template-columns:1fr;gap:16px;padding:28px 0;scroll-margin-top:110px}
  .ch-h{position:static}
  .ch-n{font-size:34px}
  .ch .devs{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.dl.js .ch .dev{opacity:1;transform:none}.dl-rail a,a.dev-link{transition:none}}