/* 캠퍼스브릿지 — 유튜브 섹션 */
#youtube{position:relative;padding:150px 0;background:var(--navy);color:#fff;overflow:hidden}
#youtube:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 15% 0%,rgba(184,149,90,.14),transparent 50%);pointer-events:none}
#youtube .wrap{position:relative}
.yt-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:56px}
.yt-head .sec-head{margin-bottom:0}
.yt-ch{display:flex;align-items:center;gap:18px;padding:14px 14px 14px 14px;border:1px solid var(--line-w)}
.yt-ch img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:1px solid rgba(216,189,138,.5)}
.yt-ch div{display:flex;flex-direction:column;line-height:1.4;min-width:0}
.yt-ch b{font-family:var(--serif);font-weight:600;font-size:18px}
.yt-ch small{font-size:13px;color:rgba(255,255,255,.6);white-space:nowrap}
.yt-ch .btn{height:52px;padding:0 26px;margin-left:10px}

.yt-body{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:40px;align-items:start}
.yt-tabs{display:flex;gap:28px;margin-bottom:18px;border-bottom:1px solid var(--line-w)}
.yt-tabs button{position:relative;padding:0 0 14px;font-size:15px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.5);transition:color .4s var(--ease);display:inline-flex;align-items:center;gap:8px}
.yt-tabs button:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold-l);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.yt-tabs button.on{color:#fff}
.yt-tabs button.on:after{transform:scaleX(1)}
.yt-tabs button:hover{color:#fff}
.yt-tabs .live{width:6px;height:6px;border-radius:50%;background:#e5484d;box-shadow:0 0 0 0 rgba(229,72,77,.6);animation:ytPulse 2s infinite}
@keyframes ytPulse{70%{box-shadow:0 0 0 7px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}}

.yt-stage{position:relative;aspect-ratio:16/9;background:#050c16;overflow:hidden}
.yt-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-stage .poster{position:absolute;inset:0;width:100%;display:block;text-align:left}
.yt-stage .poster img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.2s var(--ease)}
.yt-stage .poster:after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(5,12,22,.92),rgba(5,12,22,.15) 55%,rgba(5,12,22,.25))}
.yt-stage .poster:hover img{transform:scale(1.06)}
.yt-stage .play{position:absolute;left:50%;top:46%;z-index:1;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;background:rgba(184,149,90,.92);display:grid;place-items:center;transition:transform .5s var(--ease),background .4s}
.yt-stage .play:before{content:'';position:absolute;inset:-12px;border-radius:50%;border:1px solid rgba(216,189,138,.5);transition:inset .5s var(--ease)}
.yt-stage .play i{width:0;height:0;margin-left:6px;border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent #fff}
.yt-stage .poster:hover .play{transform:scale(1.08);background:var(--gold)}
.yt-stage .poster:hover .play:before{inset:-18px}
.yt-stage .meta{position:absolute;left:36px;right:36px;bottom:30px;z-index:1;display:flex;flex-direction:column;gap:8px}
.yt-stage .meta small{font-family:var(--serif-en);font-style:italic;font-size:18px;color:var(--gold-l)}
.yt-stage .meta b{font-family:var(--serif);font-weight:600;font-size:clamp(20px,2vw,28px);line-height:1.4;letter-spacing:-.02em;text-wrap:pretty}

.yt-side{display:flex;flex-direction:column;min-width:0}
.yt-cap{font-family:var(--serif-en);font-style:italic;font-size:18px;color:var(--gold-l);padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--line-w)}
#ytList li{border-bottom:1px solid var(--line-w)}
#ytList button{display:grid;grid-template-columns:132px 1fr;gap:16px;align-items:center;width:100%;padding:12px 0;text-align:left;transition:opacity .4s}
#ytList .th{position:relative;aspect-ratio:16/9;overflow:hidden;background:#050c16}
#ytList .th img{width:100%;height:100%;object-fit:cover;opacity:.7;transition:opacity .4s,transform .8s var(--ease)}
#ytList .th em{position:absolute;right:5px;bottom:5px;padding:1px 6px;font-style:normal;font-size:11px;font-weight:600;background:rgba(5,12,22,.85);color:#fff;letter-spacing:.02em}
#ytList .tx{display:flex;flex-direction:column;gap:4px;min-width:0}
#ytList .tx small{font-size:11.5px;font-weight:600;letter-spacing:.12em;color:rgba(255,255,255,.45)}
#ytList .tx b{font-size:14.5px;font-weight:500;line-height:1.5;color:rgba(255,255,255,.78);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#ytList button:hover .th img{opacity:1;transform:scale(1.05)}
#ytList button:hover .tx b{color:#fff}
#ytList button.on .th{outline:2px solid var(--gold-l);outline-offset:-2px}
#ytList button.on .th img{opacity:1}
#ytList button.on .tx small{color:var(--gold-l)}
#ytList button.on .tx b{color:#fff}
#youtube.latest #ytList button.on .th{outline:0}
#youtube.latest #ytList button.on .th img{opacity:.7}
#youtube.latest #ytList button.on .tx small{color:rgba(255,255,255,.45)}
.yt-all{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding:16px 0;font-size:14.5px;font-weight:600;letter-spacing:.03em;color:var(--gold-l);border-bottom:1px solid rgba(216,189,138,.4);transition:color .4s}
.yt-all i{font-style:normal;transition:transform .5s var(--ease)}
.yt-all:hover{color:#fff}
.yt-all:hover i{transform:translate(3px,-3px)}

@media (max-width:1180px){
  .yt-head{flex-direction:column;align-items:flex-start;gap:32px}
  .yt-body{grid-template-columns:1fr}
  #ytList{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
}
@media (max-width:820px){
  #youtube{padding:100px 0}
  .yt-head{margin-bottom:40px}
  .yt-ch{width:100%;flex-wrap:wrap}
  .yt-ch div{flex:1}
  .yt-ch .btn{width:100%;margin:4px 0 0}
  .yt-stage .play{width:68px;height:68px;margin:-34px 0 0 -34px}
  .yt-stage .play i{border-width:10px 0 10px 16px;margin-left:4px}
  .yt-stage .meta{left:18px;right:18px;bottom:16px}
  .yt-stage .meta small{font-size:15px}
  .yt-stage .meta b{font-size:16px}
  .yt-stage .meta b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #ytList{display:block}
  #ytList button{grid-template-columns:112px 1fr;gap:14px}
}