/* main / Sec_6 — KOWON Shorts 레일 + KOWON Youtube 플레이어
   시안: 1954 폭 풀블리드(좌 -17), 배경은 surface-muted, 섹션 높이 1957. */

.main-sec_6{
  /* 시안 상·하 여백 140, 두 블록 사이도 140 (--sp-section 120 + 20) */
  --sec6-space:calc(var(--sp-section) + 20px);
  padding-block:var(--sec6-space);
  overflow:hidden;               /* 레일이 화면 밖 17px 까지 나가므로 */
}
.main-sec_6__block + .main-sec_6__block{margin-top:var(--sec6-space)}

/* ── 제목 줄: 아이콘 + H2 (시안 66px 행, 아이콘 간격 10) ───────── */
.main-sec_6__title{
  margin-top:0;
  display:flex;align-items:center;justify-content:center;
  gap:10px;min-height:66px;
}
.main-sec_6__icon{flex:none}
.main-sec_6__icon--shorts{width:50px;height:50px}
.main-sec_6__icon--tube{width:58px;height:40px}

/* 시안 리드 박스 32px — 행간 27px 를 그 안에서 가운데 정렬 */
.main-sec_6__lead{
  width:100%;min-height:32px;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
}

/* ── 쇼츠 가로 레일 ────────────────────────────────────────── */
.main-sec_6__rail{
  gap:20px;                      /* 시안 카드 피치 282 = 262 + 20 */
  margin-inline:-17px;           /* 시안 풀블리드 1954 = 1920 + 17*2 */
  /* 1920 초과 화면에서 카드가 왼쪽에 몰리지 않게. 넘칠 때는 start 로 떨어진다 */
  justify-content:safe center;
}
.main-sec_6__short{
  position:relative;
  width:262px;
  aspect-ratio:262/465;
  border-radius:var(--radius-card);
  overflow:hidden;
  background:var(--surface-dark);
}
.main-sec_6__short img{width:100%;height:100%;object-fit:cover}

/* 카드 전체가 쇼츠 링크 — 썸네일 위에 영문 제목을 얹는다 (한국 원본과 동일) */
.main-sec_6__shortlink{position:absolute;inset:0;display:block}
/* 캡션 가독용 하단 스크림 */
.main-sec_6__shortlink::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0) 45%,rgba(0,0,0,.78))}
.main-sec_6__shortcap{
  position:absolute;z-index:1;inset-inline:16px;bottom:16px;
  font-weight:500;font-size:var(--fs-14);line-height:1.45;
  letter-spacing:var(--ls-tight);color:var(--text-inverse);
  word-break:break-word;
}
.main-sec_6__shortlink:hover .main-sec_6__shortcap{color:var(--brand-tint-3)}

/* 진행 막대 — 시안은 6px 두께, 컨테이너(1280) 폭 */
.main-sec_6__bar{
  width:min(var(--container),100% - var(--gutter) * 2);
  height:6px;border-radius:3px;
  margin:50px auto 0;            /* 카드 바닥 ~ 막대 54 (.rail 하단 4 포함) */
}

/* ── 유튜브 플레이어 + 플레이리스트 ─────────────────────────── */
.main-sec_6__tv{
  display:grid;
  grid-template-columns:685fr 565fr;   /* 시안 685 + 30 + 565 = 1280 */
  gap:var(--sp-gap);
  align-items:start;
}

.main-sec_6__stage{
  aspect-ratio:16/9;             /* 유튜브 원본 비율 — 썸네일·재생 화면이 잘리거나 띠가 생기지 않는다 */
  border-radius:var(--radius-card);
  background:var(--surface-dark);
}
.main-sec_6__stage img{width:100%;height:100%;object-fit:cover}
.main-sec_6__stage iframe{border:0}

.main-sec_6__list{
  margin-top:-1px;               /* 시안 첫 선이 미디어 상단보다 1px 위 */
  border-top:1px solid var(--text-primary);  /* 시안 Line 1 은 진한 선 */
}
.main-sec_6__link{
  display:flex;align-items:center;gap:20px;
  padding-block:12px;            /* 12 + 썸네일 84 + 12 = 행 108 */
  box-shadow:inset 0 -1px 0 var(--icon-muted);
}
.main-sec_6__thumb{
  flex:none;width:150px;height:84px;
  object-fit:cover;
  border-radius:var(--radius-sm);
}
.main-sec_6__vtitle{
  font-weight:500;
  font-size:var(--fs-18);
  line-height:1.5;
  letter-spacing:normal;         /* 시안 이 텍스트만 자간 0 */
  color:var(--text-primary);
  word-break:break-word;
}
.main-sec_6__link:hover .main-sec_6__vtitle{color:var(--brand)}

/* 1200 이상: 목록 4행이 영상 박스(16:9) 높이를 나눠 가져 위·아래 선이 박스와 맞는다.
   height:0 + min-height 로 목록은 행 높이를 키우지 않고 박스 높이만 따른다(+1 은 박스보다 1px 위에 있는 첫 선). */
@media (min-width:1200px){
  .main-sec_6__list{height:0;min-height:calc(100% + 1px);display:grid;grid-template-rows:repeat(4,minmax(0,1fr))}   /* 내용(썸네일 원본 크기)이 행을 키우지 못하게 */
  .main-sec_6__link{height:100%;padding-block:0}
  .main-sec_6__thumb{width:auto;height:calc(100% - 12px);aspect-ratio:16/9}   /* 행 − 위아래 6 — 1440 에서 시안 84 */
  .main-sec_6__vtitle{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
}
/* 1200 미만: 한 줄에 두면 행이 썸네일(84)보다 낮아진다 — 영상 위 · 목록 아래로 쌓는다 */
@media (max-width:1199px){
  .main-sec_6__tv{grid-template-columns:1fr}
}

/* ── 반응형: 구조만 바꾼다 ─────────────────────────────────── */
@media (max-width:1279px){
  /* 좁은 화면에서는 블리드 대신 컨테이너 여백에 맞춘다 */
  .main-sec_6__rail{
    margin-inline:0;
    padding-inline:var(--gutter);
    scroll-padding-inline:var(--gutter);   /* 스냅이 좌측 여백을 먹지 않도록 */
  }
}
@media (max-width:1023px){
  .main-sec_6__bar{margin-top:var(--sp-stack)}
}
@media (max-width:767px){
  .main-sec_6__title{gap:8px;min-height:0}
  .main-sec_6__icon--shorts{width:34px;height:34px}
  .main-sec_6__icon--tube{width:40px;height:28px}
  .main-sec_6__link{gap:var(--sp-tight)}
  .main-sec_6__thumb{width:120px;height:67px}
}