/* 무료 양식 — PPT 스타일 미러 (2026-11-06) */
/* 2026-10-08 pptside (그록 봇): 무료 PPT 목록(/ppt, /ppt/c/…) 넓은 화면 양쪽 여백 채우기. templates_ppt/ppt_list.html · cd_ppt._side_rank
   - 왼쪽: '많이 받은 템플릿' 카드 (cd_sidecards.css 의 cd-sc 모양 재사용, 실제 downloads, 최대 5개)
   - 오른쪽: 세로 광고 레일 _cd_adrail.html (kind=ppt, 160x600, cd_adrail.js 가 ≥1280px 일 때만 요청)
   - ≥1528px: 가운데 목록 폭 1080px 그대로 + 왼쪽 200px 칸 + 오른쪽 160px 칸 / 1280~1527px: 가운데만 조금 좁아짐 (1399px 이하는 카드 3칸)
   - <1280px: 광고 레일 없음, 왼쪽 카드는 목록 아래 가로 스크롤 줄. 목록에 이미 다 보이는 템플릿뿐이면(ppt-lrail--dup) 숨김
   - 2026-10-08 pptside3: 같은 칸에 캐쉬 노트 → 뷰티 UP '많이 읽은 글' 카드(cd_sidecards). 칸 전체 sticky, 화면보다 길면 아래쪽 기준으로 붙고 본문 영역 안에서만 움직임(푸터와 안 겹침)
   - :has() 미지원 브라우저: 레일 없음(광고 요청 없음), 카드는 목록 아래 일반 블록 */
.cd-sc--ppt{--a:#0d9488;--b:#f97316;--soft:#ecfdf5;--soft2:#fff7ed;--ink:#0f766e;--ring:rgba(13,148,136,.18)}
.ppt-lrail{margin:28px 0 8px;font-family:'Pretendard','Noto Sans KR',sans-serif}
.ppt-lrail--dup{display:none}
.ppt-lrail .cd-sidecards{position:static}
.ppt-lrail .cd-sc__lbl svg,.ppt-lrail .cd-sc__vw svg{width:12px;height:12px;flex:0 0 auto;vertical-align:-2px;margin-right:3px}
.ppt-lrail .cd-sc__th{flex:0 0 64px;width:64px;height:36px}
.ppt-lrail .cd-sc__it--top .cd-sc__th{flex:none;width:100%;height:auto;aspect-ratio:16 / 9}
.ppt-lrail__ph{display:grid;place-items:center;width:100%;height:100%;font-size:.7rem;font-weight:900;letter-spacing:.04em;color:#fff;background:linear-gradient(135deg,var(--a),var(--b))}
@media (max-width:1279.98px){
  /* 2026-10-08 pptside3: 좁은 화면 = V-log 와 같은 카드 가로 스크롤 줄 (카드 안 목록은 다른 게시판과 같은 세로 순위). 목록에 다 보이는 PPT 카드만 숨김 */
  .ppt-lrail--dup{display:block}
  .ppt-lrail--dup .cd-sc--ppt{display:none}
  .ppt-lrail .cd-sidecards{display:flex;flex-direction:row;flex-wrap:nowrap;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 -16px;padding:4px 16px 12px;border-top:0;align-items:stretch}
  .ppt-lrail .cd-sidecards::-webkit-scrollbar{display:none}
  .ppt-lrail .cd-sidecards__eyebrow{display:none}
  .ppt-lrail .cd-sc{flex:0 0 min(82%,320px);scroll-snap-align:start}
  .ppt-lrail .cd-sc__it--top .cd-sc__th{aspect-ratio:16 / 9}
}
@media (min-width:1280px){
  .ppt-lrail{max-width:360px}
}
@supports selector(:has(*)) {
  @media (min-width:1280px){
    .sec--ppt .blog-area:has(.ppt-lrail),.sec--ppt .blog-area:has(> .cd-adrail--ppt){position:relative}
    .sec--ppt .blog-area:has(.ppt-lrail){padding-left:244px;max-width:1344px}
    .sec--ppt .blog-area:has(> .cd-adrail--ppt){padding-right:204px;max-width:1304px}
    .sec--ppt .blog-area:has(.ppt-lrail):has(> .cd-adrail--ppt){max-width:1528px}
    .sec--ppt .blog-area > .cd-adrail--ppt{display:block;position:absolute;top:16px;bottom:64px;right:20px;width:160px}
    .sec--ppt .ppt-lrail,.sec--ppt .ppt-lrail--dup{display:block;position:absolute;top:16px;bottom:64px;left:20px;width:200px;max-width:none;margin:0}
    .sec--ppt .ppt-lrail .cd-sidecards{position:-webkit-sticky;position:sticky;top:calc(var(--cd-hdr-h,65px) + 16px);gap:12px}   /* top 은 ppt_list.html 스크립트가 칸 키에 맞춰 조정 (pptside3) */
  }
  @media (min-width:1280px) and (max-width:1399.98px){
    .sec--ppt .blog-area:has(.ppt-lrail):has(> .cd-adrail--ppt) .ppt-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .sec--ppt .blog-area:has(.ppt-lrail):has(> .cd-adrail--ppt) .ppt-hero{grid-template-columns:1.5fr .5fr}
    .sec--ppt .blog-area:has(.ppt-lrail):has(> .cd-adrail--ppt) .ppt-deck{transform:scale(.72)}
  }
}
@media print{.ppt-lrail{display:none!important}}
/* 2026-10-09 vlogstack (그록 봇): V-log 와 같은 카드 줄 → 모바일(≤767px)은 세로로 한 장씩. 768px 이상 그대로 */
@media (max-width:767.98px){
  .ppt-lrail .cd-sidecards{flex-direction:column;flex-wrap:nowrap;overflow:visible;scroll-snap-type:none;gap:12px;margin:0;padding:4px 0 12px}
  .ppt-lrail .cd-sc{flex:0 0 auto;width:100%;max-width:none;scroll-snap-align:none}
}