/* ============================================================
   채널쓴 카테고리 페이지 (/channel_ssn/)
   · Figma fileKey xzue00gaKlYtXNG7Rg6fe3
     PC 3457:6424 / Mobile 3457:6515 / 가이드(개발 전달) 3457:6607
   · 정본: 디자이너 전달 HTML(채널쓴_카테고리페이지.html)의 <style>을 수치 그대로 옮겼다
   · 원본 대비 변경: 상단메뉴·푸터 자리(.ph/.ph-top/.ph-footer) 제거 → 공통 푸터(ss-footer) 사용
   ============================================================ */
/* ============================================================
   스타일셀러 홈페이지 — 채널쓴 카테고리 페이지 (개발 전달용)
   · 피그마: SS홈페이지-통합 › 3분기_통합본 › 07 채널쓴 (웹버전 · 앱버전 · 개발 전달)
     https://www.figma.com/design/GX0m7cJXNms8eLTgRQbBLA/?node-id=3052-9747
   · 파운데이션(STEP 2) 기준 · 서체 Pretendard, 굵기 600/500/400만 (Bold 미사용)
   · PC 1440: 좌우 72 / 콘텐츠 1296 / 12칸 거터 48
   · 태블릿 1024: 좌우 40   · Mobile 375: 좌우 16
   · 섹션 위아래 160 (Mobile 120), 섹션 제목 = H1 + H4 리드, 가운데 정렬
   · 상단메뉴 · 푸터는 홈페이지 공통 부품을 끼울 자리만 비워 뒀어요 (.ph-top / .ph-footer)
   · 유튜브 영상은 스크립트 맨 위 CONFIG 한 곳에서 연결해요
   ============================================================ */
:root{
  /* 브랜드 원색 */
  --primary-200:#F9FFC9; --primary-300:#F4FFA3; --primary-500:#EFFF75; --primary-800:#646B31;
  --secondary-50:#DDE3FF; --secondary-500:#375CFF; --secondary-600:#2B49CA;
  --static-white:#FFFFFF; --static-50:#F7F7F7; --static-100:#EFEFEF; --static-200:#E4E4E4; --static-300:#D4D4D4;
  --static-400:#BDBDBD; --static-600:#888888; --static-700:#6E6E6E; --static-800:#545454; --static-900:#393939;
  --static-950:#202020; --static-black:#000000;
  --logo-blue:#345CFB;                 /* 쓴 로고 아트워크 색 */

  /* 웹 화면 색 배정 (2. 컬러 시스템) */
  --bg:var(--static-white); --bg-sub:var(--static-50); --bg-card:var(--static-100); --bg-inverse:var(--static-black);
  --line-faint:var(--static-100); --line-soft:var(--static-200); --line:var(--static-400); --line-strong:var(--static-600);
  --text-title:var(--static-black); --text-subtitle:var(--static-950); --text-body:var(--static-900);
  --text-sub:var(--static-800); --text-weak:var(--static-700);
  --text-inv:var(--static-white); --text-inv-sub:var(--static-300);
  --accent-bg:var(--primary-500); --link:var(--secondary-500);
  --hover:rgba(0,0,0,.1); --press:rgba(0,0,0,.2);

  /* 간격 역할 */
  --sp-inline:8px; --sp-tight:12px; --sp-el:16px; --sp-group:24px; --sp-card:40px; --sp-chunk:64px; --sp-section:120px;
  --section-pad:160px;
  /* 라운드 역할 */
  --r-input:8px; --r-card:20px; --r-panel:30px; --r-pill:999px;
  /* 그리드 */
  --margin:72px; --content:1296px; --gutter:48px;
  --nav-h:90px;
  --f:"Pretendard Variable","Pretendard",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
@media (max-width:1279px){:root{--margin:40px;--gutter:40px}}
@media (max-width:767px){:root{--margin:16px;--gutter:16px;--section-pad:120px;--sp-chunk:40px;--sp-card:24px;--nav-h:99px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;background:var(--bg);color:var(--text-body);font-family:var(--f);font-weight:400;word-break:keep-all;overflow-wrap:break-word}
a{color:inherit}
img{max-width:100%;display:block}
[hidden]{display:none!important}
.container{width:100%;max-width:calc(var(--content) + var(--margin)*2);margin:0 auto;padding-inline:var(--margin)}

/* 1. 글자 단계 (PC / Mobile) */
.t-display{font-size:64px;font-weight:600;letter-spacing:-.03em;line-height:1.16}
.t-h1{font-size:48px;font-weight:600;letter-spacing:-.03em;line-height:1.24}
.t-h3{font-size:28px;font-weight:500;letter-spacing:-.02em;line-height:1.24}
.t-h4{font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1.36}
.t-bodyl{font-size:20px;font-weight:400;letter-spacing:-.01em;line-height:1.52}
.t-body{font-size:18px;font-weight:400;letter-spacing:-.01em;line-height:1.52}
.t-bodys{font-size:16px;font-weight:400;letter-spacing:-.01em;line-height:1.52}
.t-small{font-size:14px;font-weight:400;letter-spacing:0;line-height:1.52}
.strong{font-weight:500}
@media (max-width:767px){
  .t-display{font-size:40px}.t-h1{font-size:32px}.t-h3{font-size:22px}.t-h4{font-size:20px}
  .t-bodyl{font-size:18px}.t-body{font-size:16px}.t-bodys{font-size:15px}
}

/* 버튼 (라운드-알약, 라벨은 Body 강조) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-inline);min-height:51px;padding:var(--sp-tight) 28px;border-radius:var(--r-pill);
  font:500 18px/1.52 var(--f);letter-spacing:-.01em;text-decoration:none;border:0;cursor:pointer;position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;background:transparent;transition:background .15s;z-index:-1}
.btn:hover::after{background:var(--hover)} .btn:active::after{background:var(--press)}
.btn-lime{background:var(--accent-bg);color:var(--static-black)}
.btn-black{background:var(--static-black);color:var(--static-white)}
.btn-blue{background:var(--secondary-500);color:var(--static-white)}
.btn svg{width:18px;height:18px}
a:focus-visible,.btn:focus-visible,button:focus-visible{outline:2px solid var(--secondary-500);outline-offset:3px}
@media (max-width:767px){.btn{font-size:16px;min-height:48px}}

/* 섹션 껍데기 + 섹션 제목 */
.section{padding-block:var(--section-pad)}
.sec-title{display:grid;justify-items:center;gap:20px;text-align:center;margin-bottom:var(--sp-chunk)}
.sec-title h2{margin:0;color:var(--text-title)}
.sec-title p{margin:0;color:var(--text-sub)}
.sec-title a.lead-link{color:var(--link);text-decoration:none}
.sec-title a.lead-link:hover{text-decoration:underline}

/* ---------- 공통 부품 자리 (상단메뉴 · 푸터) ----------
   [없는 요소] 원본의 .ph / .ph-top / .ph-footer 회색 안내 박스 — ss-web 이식 시 제거
   · 푸터: 공통 ss-footer(res/css/ss-footer.css)를 붙였다
   · 상단메뉴: 아직 없음. 원본 기준 높이 PC 90 (파트너 카테고리면 96) · Mobile 99 (--nav-h)
     공통 상단메뉴가 화면 위에 고정되는 방식이면 .stick 의 top 을 그 높이만큼 내려 주세요. */

/* ---------- HERO (스크롤 연동 sticky) ---------- */
.hero{position:relative;height:260vh;height:260svh;background:var(--primary-500)}
.stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--primary-500)}
.mark{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.mark svg{display:block;width:100%;height:auto;overflow:visible}
.ink{fill:var(--logo-ink,var(--static-black))} .blue{fill:var(--logo-blue)}
.hero-copy{position:absolute;left:0;right:0;bottom:max(9svh,48px);display:grid;justify-items:center;gap:var(--sp-group);text-align:center;padding-inline:var(--margin);opacity:0}
.hero-copy h1{margin:0;color:var(--text-title);text-wrap:balance}
.scroll-hint{display:flex;align-items:center;gap:var(--sp-inline);color:var(--primary-800)}
.scroll-hint i{display:block;width:1px;height:24px;background:currentColor;transform-origin:top;animation:hint 1.6s ease-in-out infinite}
@keyframes hint{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.slot{position:absolute;left:0;top:0;overflow:hidden;line-height:1.2;height:1.2em;opacity:0;text-align:right;color:var(--text-title);
  font-family:var(--f-lockup,var(--f));font-weight:600;letter-spacing:-.03em}
.slot ul{list-style:none;margin:0;padding:0;transition:transform .6s cubic-bezier(.75,0,.2,1)}
.slot li{height:1.2em;white-space:nowrap}
.lock-sub{position:absolute;left:0;right:0;display:grid;justify-items:center;gap:var(--sp-group);text-align:center;padding-inline:var(--margin);opacity:0}
.lock-sub p{margin:0;max-width:36em;color:var(--text-body)}
.lock-sub strong{color:var(--text-title)}

/* ---------- 프로그램 ---------- */
.programs-head{padding-top:var(--section-pad);padding-bottom:var(--sp-chunk)}
.programs-head .sec-title{margin-bottom:0}
.prog{padding-block:var(--section-pad)}
.prog .container{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--sp-group);align-items:center}
.prog .info{display:grid;gap:var(--sp-group);justify-items:start;min-width:0}
.prog .plogo{height:auto}
.prog .oneliner{margin:0}
.prog .desc{margin:0;max-width:30em}
.prog .meta{display:grid;grid-template-columns:auto 1fr;gap:4px var(--sp-el);margin:0}
.prog .meta dt{font-weight:500} .prog .meta dd{margin:0}
.prog .media{display:grid;gap:var(--sp-group);min-width:0}
.prog .thumb{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;text-decoration:none}
.prog .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.prog .thumb:hover img{transform:scale(1.03)}
.prog .thumb .play{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,0,0,.6);color:#fff;opacity:0;transition:opacity .2s}
.prog .thumb:hover .play,.prog .thumb:focus-visible .play{opacity:1}
.prog .thumb .play svg{width:26px;height:26px;margin-left:4px}

.prog-hitman{background:var(--bg-inverse);color:var(--text-inv)}
.prog-hitman .plogo{width:330px}
.prog-hitman .oneliner{color:var(--text-inv)}
.prog-hitman .desc,.prog-hitman .meta dd{color:var(--text-inv)}
.prog-hitman .meta dt{color:var(--text-inv-sub)}
.prog-hitman .thumb{border-radius:18px}
.prog-hitman .media .btn{justify-self:end}

.prog-review{background:var(--bg-sub)}
.prog-review .media{order:-1}
.prog-review .plogo{width:min(478px,100%)}
.prog-review .oneliner{color:var(--text-title)}
.prog-review .desc{color:var(--text-body)}
.prog-review .meta dt{color:var(--text-weak)} .prog-review .meta dd{color:var(--text-body)}
.prog-review .thumb{border-radius:var(--r-panel)}
.prog-review .media .btn{justify-self:start}

.reveal{opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

@media (max-width:1023px){
  .prog .container{grid-template-columns:minmax(0,1fr)}
  .prog-review .media{order:0}
  .prog-hitman .media .btn,.prog-review .media .btn{justify-self:stretch}
  .prog-hitman .plogo{width:240px}
}

/* ---------- 최신 영상 ---------- */
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.vcard{display:grid;gap:var(--sp-el);text-decoration:none;color:var(--text-title)}
.vcard .img{position:relative;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;background:var(--bg-card);border:1px solid var(--line-faint);
  display:grid;place-items:center;color:var(--text-weak)}
.vcard .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.vcard:hover .img img{transform:scale(1.03)}
.vcard .chip{position:absolute;left:12px;top:12px;z-index:1;padding:4px 12px;border-radius:var(--r-pill);font:500 14px/1.52 var(--f)}
.chip-lime{background:var(--accent-bg);color:var(--static-black)}
.chip-black{background:var(--static-black);color:var(--static-white)}
.vcard .dur{position:absolute;right:12px;bottom:12px;z-index:1;padding:2px 8px;border-radius:6px;background:rgba(0,0,0,.6);color:#fff;font:500 14px/1.52 var(--f);font-variant-numeric:tabular-nums}
.vcard h3{margin:0;color:var(--text-title);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}   /* 제목은 두 줄까지, 넘치면 … */
.vcard p{margin:0;color:var(--text-weak)}
@media (max-width:1023px){.vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.vgrid{grid-template-columns:minmax(0,1fr);gap:var(--sp-group)}}
/* 불러오는 동안 보이는 회색 카드 */
.vcard.skel{pointer-events:none}
.vcard.skel .img,.vcard.skel .bar{background:linear-gradient(90deg,var(--static-100) 30%,var(--static-50) 50%,var(--static-100) 70%);background-size:300% 100%;animation:skel 1.4s ease-in-out infinite}
.vcard.skel .bar{display:block;height:26px;border-radius:8px}
.vcard.skel .bar.short{width:36%;height:18px}
@keyframes skel{0%{background-position:100% 0}100%{background-position:0 0}}
.videos-note{margin:var(--sp-group) 0 0;text-align:center;color:var(--text-weak)}

/* ---------- 문의 (채널쓴 전용 푸터에 있던 연락처를 섹션으로 옮겼어요) ---------- */
.contact-body{display:grid;justify-items:center;gap:var(--sp-group)}
.contact-cards{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter)}
.ccard{display:grid;align-content:start;justify-items:start;gap:var(--sp-tight);padding:30px 40px;border-radius:40px;background:var(--static-50)}
.ccard p{margin:0}
.ccard .k{color:var(--text-weak)}
.ccard .v{color:var(--text-title);overflow-wrap:anywhere}
.ccard a{color:var(--link);font-weight:500;text-decoration:none}
.ccard a:hover{text-decoration:underline}
.pills{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-tight)}
.pill{display:inline-flex;align-items:center;padding:10px 20px;border:1px solid var(--static-300);border-radius:var(--r-pill);background:var(--static-white);color:var(--text-title);font-weight:500;text-decoration:none}
.pill:hover{box-shadow:inset 0 0 0 100px var(--hover)} .pill:active{box-shadow:inset 0 0 0 100px var(--press)}
@media (max-width:767px){.contact-cards{grid-template-columns:minmax(0,1fr)}.ccard{padding:24px;border-radius:var(--r-panel)}}

/* 모바일 하단 고정 버튼 */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:12px var(--margin) calc(12px + env(safe-area-inset-bottom,0px));display:none;
  transform:translateY(110%);transition:transform .3s ease}
.mcta.show{transform:none}
.mcta .btn{width:100%}
@media (max-width:767px){.mcta{display:block}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- ss-web 이식 추가: 공통 푸터 보정 ----------
   ss-footer.css 는 reset.css 의 p margin 0 을 전제로 쓰였다(.ss-footer__company 가 <p>).
   reset.css 를 통째로 로드하면 div·li·dt·dd 등에 line-height:150% 를 직접 걸어
   원본 페이지(.slot 롤링·.meta 등)의 상속 line-height 를 깨므로, 필요한 한 줄만 푸터 범위로 둔다. */
.ss-footer p{margin:0}