/* ─────────────────────────────────────────────────────────────
   문성전자 — 메인 영상(미니 플레이어 + 재생 목록, ms-yt) · 인스타그램(정사각 피드 타일, ms-ig)
   시안: docs/design/media-cards-draft.html (2026-09-08 확정) · 마크업 extend/ms.media.php
   글자 크기는 삼성 가이드 타입 스케일: 본문 14/12px, 제목 22/18px, 32px 이하 행간 1.33
   ───────────────────────────────────────────────────────────── */
.ms-yt,.ms-ig{--mm-navy:#0f1c6e;--mm-ink:#1b2440;--mm-mute:#5d6680;--mm-line:#e6e9f2;--mm-blue:#1a6ad0;--mm-soft:#eaf3ff;--mm-g50:#f6f8fc;--mm-en:'Samsung Sharp Sans','Samsung One Korean',sans-serif;font-family:'Samsung One Korean','Malgun Gothic','맑은 고딕',sans-serif;line-height:1.33;text-align:left}
.ms-yt *,.ms-ig *{box-sizing:border-box}
.ms-yt a,.ms-ig a{text-decoration:none !important}

/* ── 영상 ── */
.ms-yt{display:grid;grid-template-columns:1fr 400px;gap:24px;align-items:stretch}
.ms-yt-stage{position:relative;width:100%;min-width:0;border-radius:22px;overflow:hidden;background:#0b1236;aspect-ratio:16/9;cursor:pointer;box-shadow:0 20px 50px rgba(15,28,110,.16);outline:none}
.ms-yt-stage img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ms-yt-stage:hover img{transform:scale(1.03)}
.ms-yt-stage:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,18,54,0) 40%,rgba(11,18,54,.78) 100%);pointer-events:none}
.ms-yt-stage .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.3);transition:transform .2s,background .2s;z-index:2}
.ms-yt-stage .play:before{content:'';border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent var(--mm-navy);margin-left:5px}
.ms-yt-stage:hover .play{transform:translate(-50%,-50%) scale(1.08);background:#fff}
.ms-yt-stage .cap{position:absolute;left:26px;right:26px;bottom:22px;color:#fff;z-index:2}
.ms-yt-stage .cap .ch{display:inline-flex;align-items:center;gap:7px;font-family:var(--mm-en);font-size:12px;letter-spacing:.12em;opacity:.85;margin-bottom:8px}
.ms-yt-stage .cap .ch:empty{display:none}
.ms-yt-stage .cap .ch:before{content:'';width:6px;height:6px;border-radius:50%;background:#ff3b3b}
.ms-yt-stage .cap h4{font-size:22px;font-weight:700;line-height:1.33;letter-spacing:-.01em;color:#fff;margin:0;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.ms-yt-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.ms-yt-stage.playing .play,.ms-yt-stage.playing .cap,.ms-yt-stage.playing:after{display:none}
.ms-yt-list{display:flex;flex-direction:column;border-radius:22px;border:1px solid var(--mm-line);background:#fff;overflow:hidden;min-height:100%;height:0}   /* height:0 — 행 높이에 기여하지 않고 무대(16:9)에 맞춰 늘어남, 목록은 안에서 스크롤 */
.ms-yt-list .hd{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--mm-line);font-size:12px;color:var(--mm-mute)}
.ms-yt-list .hd b{font-family:var(--mm-en);font-size:12px;letter-spacing:.12em;color:var(--mm-navy)}
.ms-yt-list .rows{flex:1;overflow:auto;padding:6px 8px;min-height:0}
.ms-yt-list .row{display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:center;padding:8px;border-radius:14px;cursor:pointer;transition:background .15s;position:relative;outline:none}
.ms-yt-list .row + .row:before{content:'';position:absolute;left:124px;right:8px;top:-1px;border-top:1px dotted #dfe4ee}
.ms-yt-list .row:hover,.ms-yt-list .row:focus-visible{background:var(--mm-g50)}
.ms-yt-list .row.on{background:var(--mm-soft)}
.ms-yt-list .row .th{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#e9ecf3;display:block}
.ms-yt-list .row .th img{width:100%;height:100%;object-fit:cover;display:block}
.ms-yt-list .row .th i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;opacity:0;transition:opacity .15s}
.ms-yt-list .row .th i:before{content:'';border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--mm-navy);margin-left:2px}
.ms-yt-list .row:hover .th i,.ms-yt-list .row.on .th i{opacity:1}
.ms-yt-list .row.on .th:after{content:'';position:absolute;inset:0;border:2px solid var(--mm-blue);border-radius:10px}
.ms-yt-list .row .tx{min-width:0}
.ms-yt-list .row .tx b{display:-webkit-box;font-size:14px;font-weight:700;line-height:1.33;color:var(--mm-ink);-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ms-yt-list .row.on .tx b{color:var(--mm-navy)}
.ms-yt-list .row .tx small{display:block;margin-top:4px;font-size:12px;color:var(--mm-mute)}
.ms-yt-list .row.on .tx small:before{content:'재생 중 · ';color:var(--mm-blue);font-weight:700}

/* ── 인스타그램 ── */
.ms-ig{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.ms-ig .tile{position:relative;aspect-ratio:1/1;border-radius:18px;overflow:hidden;background:#e9ecf3;display:block}
.ms-ig .tile.big{grid-column:span 2;grid-row:span 2}
.ms-ig .tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ms-ig .tile:hover img{transform:scale(1.05)}
.ms-ig .tile .reel{position:absolute;right:12px;top:12px;width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.88);display:grid;place-items:center;z-index:2}
.ms-ig .tile .reel svg{width:14px;height:14px;stroke:var(--mm-navy);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ms-ig .tile .cap{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 14px;background:linear-gradient(180deg,rgba(11,18,54,0),rgba(11,18,54,.75));color:#fff;font-size:14px;font-weight:700;line-height:1.33;transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ms-ig .tile:hover .cap,.ms-ig .tile:focus-visible .cap{transform:none}
.ms-ig .tile.big .cap{transform:none;padding:70px 22px 20px;font-size:18px}
.ms-ig .tile.big .cap small{display:block;font-family:var(--mm-en);font-size:12px;letter-spacing:.12em;font-weight:400;opacity:.85;margin-bottom:6px}
.ms-ig .follow{border-radius:18px;background:linear-gradient(135deg,#fff5f9,#f3ecff 60%,#eaf3ff);border:1px solid var(--mm-line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:16px;aspect-ratio:1/1;transition:border-color .2s,transform .2s;color:var(--mm-ink)}
.ms-ig .follow:hover{border-color:#e2b3ff;transform:translateY(-2px)}
.ms-ig .follow .ic{width:44px;height:44px;border-radius:14px;background:linear-gradient(45deg,#f9ce34,#ee2a7b 55%,#6228d7);display:grid;place-items:center;box-shadow:0 10px 24px rgba(238,42,123,.25)}
.ms-ig .follow .ic svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ms-ig .follow b{font-family:var(--mm-en);font-size:14px;color:var(--mm-navy);letter-spacing:.02em}
.ms-ig .follow span{font-size:12px;color:var(--mm-mute);line-height:1.33}
.ms-ig .follow em{font-style:normal;height:28px;padding:0 12px;border-radius:9999px;background:var(--mm-navy);color:#fff;font-size:12px;font-weight:700;display:inline-flex;align-items:center}

/* ── 모바일 ── */
.ms-yt.m{grid-template-columns:1fr;gap:12px;padding:0 16px}
.ms-yt.m .ms-yt-stage{border-radius:16px}
.ms-yt.m .ms-yt-stage .play{width:56px;height:56px}
.ms-yt.m .ms-yt-stage .play:before{border-width:9px 0 9px 15px}
.ms-yt.m .ms-yt-stage .cap{left:16px;right:16px;bottom:14px}
.ms-yt.m .ms-yt-stage .cap h4{font-size:16px}
.ms-yt.m .ms-yt-list{border-radius:16px;height:auto;min-height:0}
.ms-yt.m .ms-yt-list .rows{max-height:290px}
.ms-yt.m .ms-yt-list .row{grid-template-columns:88px 1fr}
.ms-yt.m .ms-yt-list .row + .row:before{left:104px}
.ms-ig.m{grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px}
.ms-ig.m .tile{border-radius:12px}
.ms-ig.m .tile .cap{display:none}
.ms-ig.m .tile.big .cap{display:-webkit-box;padding:40px 12px 10px;font-size:14px}
.ms-ig.m .tile.big .cap small{display:none}
.ms-ig.m .follow{grid-column:1/-1;aspect-ratio:auto;flex-direction:row;justify-content:center;border-radius:12px;padding:12px;gap:12px}   /* 모바일은 마지막 줄 전체 폭 가로 배너 (빈 칸 없이) */
.ms-ig.m .follow .ic{width:30px;height:30px;border-radius:9px}
.ms-ig.m .follow .ic svg{width:15px;height:15px}
.ms-ig.m .follow b{font-size:14px}
.ms-ig.m .follow span{display:none}
.ms-ig.m .follow em{height:22px;font-size:12px;padding:0 9px}
/* 2026-09-29 폰 폭 검수 — 위 .ms-yt.m 규칙은 반응형(PC 스킨)에서 안 붙어, 390px 무대(358×201)에서 22px 두 줄 제목 캡션(위 94px~)이
   74px 재생 버튼(64~138px)을 덮었다. 767 이하에서 .m 과 같은 크기로 줄이고 버튼을 조금 올린다. 제목은 두 줄까지(넘치면 …),
   480 이하는 채널명 줄을 빼서 320px 폰(무대 162px)에서도 버튼과 캡션 사이가 남게 한다 */
@media (max-width:767px){
  .ms-yt-stage{border-radius:16px}
  .ms-yt-stage .play{width:56px;height:56px;top:42%}
  .ms-yt-stage .play:before{border-width:9px 0 9px 15px}
  .ms-yt-stage .cap{left:16px;right:16px;bottom:14px}
  .ms-yt-stage .cap h4{font-size:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
@media (max-width:480px){
  .ms-yt-stage .cap .ch{display:none}
}
@media (prefers-reduced-motion:reduce){.ms-yt-stage img,.ms-ig .tile img,.ms-ig .tile .cap{transition:none}}