/* #/youtube page (youtube.js): thin-line layout with the orange accent used by the section bars and quick menu. */
.yt-page{--yt-line:#c6c6c2;--yt-pad:clamp(24px,5vw,96px);max-width:1440px;margin:0 auto;padding:0 var(--yt-pad) clamp(80px,9vw,150px);color:#111;font-family:'Noto Sans KR',Arial,sans-serif}
@media(min-width:1101px){.yt-page{padding-right:calc(var(--yt-pad) + 96px)}}
.yt-hero{padding:clamp(56px,7vw,112px) 0 clamp(40px,4.5vw,64px)}
.yt-eyebrow{margin:0 0 20px;font:700 13px/1 Arial,sans-serif;letter-spacing:.24em;color:#ff5a1f}
.yt-hero h1{margin:0 0 22px;font-size:clamp(40px,5.2vw,80px);font-weight:700;line-height:1.1;letter-spacing:-.06em}
.yt-lead{margin:0 0 32px;max-width:640px;font-size:17px;line-height:1.85;color:#55554f}
.yt-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.yt-subscribe{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;background:#f00;color:#fff;font-size:16px;font-weight:700;text-decoration:none;transition:background .2s,transform .2s}
.yt-subscribe:hover{background:#c00;transform:translateY(-2px)}
.yt-subscribe svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.yt-channel{padding-bottom:5px;border-bottom:1px solid #111;color:#111;font-size:15px;text-decoration:none}
.yt-updated{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-size:14px;color:#62625e}
.yt-updated i{width:8px;height:8px;border-radius:50%;background:#2fb344;box-shadow:0 0 0 0 #2fb34466;animation:yt-live 2s ease-out infinite}
@keyframes yt-live{to{box-shadow:0 0 0 9px #2fb34400}}

.yt-tabs{display:flex;border-top:1px solid var(--yt-line);border-bottom:1px solid var(--yt-line);margin-bottom:clamp(36px,4vw,60px)}
.yt-tabs a{position:relative;display:flex;align-items:center;gap:10px;padding:22px 34px;color:#62625e;font-size:18px;font-weight:600;text-decoration:none;border-right:1px solid var(--yt-line);transition:color .2s}
.yt-tabs a b{font:700 14px/1 Arial,sans-serif;padding:5px 9px;border-radius:999px;background:#efeeea;color:#111}
.yt-tabs a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:#ff5a1f;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.3,.6,.2,1)}
.yt-tabs a:hover{color:#111}
.yt-tabs a[aria-current]{color:#111}
.yt-tabs a[aria-current]::after{transform:scaleX(1)}
.yt-tabs a[aria-current] b{background:#ff5a1f}

.yt-page button{font:inherit;color:inherit;background:none;border:0;padding:0;text-align:left;cursor:pointer}
.yt-thumb{position:relative;display:block;overflow:hidden;background:#111}
.yt-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .3s}
.yt-thumb em{position:absolute;right:10px;bottom:10px;padding:3px 7px;background:#111d;color:#fff;font:700 13px/1.3 Arial,sans-serif;font-style:normal}
.yt-play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:#ff5a1f;opacity:0;transform:scale(.8);transition:opacity .25s,transform .35s cubic-bezier(.3,.6,.2,1)}
.yt-play svg{width:26px;height:26px;fill:#111;margin-left:3px}
[data-play]:hover .yt-thumb img,[data-play]:focus-visible .yt-thumb img{transform:scale(1.05)}
[data-play]:hover .yt-play,[data-play]:focus-visible .yt-play{opacity:1;transform:scale(1)}

.yt-feature{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;padding-bottom:clamp(40px,4.5vw,64px);margin-bottom:clamp(40px,4.5vw,64px);border-bottom:1px solid var(--yt-line)}
.yt-feature .yt-card{display:block;width:100%}
.yt-feature .yt-thumb{aspect-ratio:16/9}
.yt-feature .yt-play{width:84px;height:84px;margin:-42px 0 0 -42px;opacity:1;transform:none}
.yt-feature .yt-play svg{width:34px;height:34px}
.yt-new{display:inline-block;margin:0 0 18px;padding:5px 10px;background:#ff5a1f;font:700 13px/1 Arial,sans-serif;letter-spacing:.16em}
.yt-feature h2{margin:0 0 16px;font-size:clamp(22px,2.1vw,32px);font-weight:700;line-height:1.45;letter-spacing:-.045em}
.yt-feature p:not(.yt-new){margin:0 0 28px;font-size:15px;color:#62625e}
.yt-watch{display:inline-flex!important;align-items:center;gap:12px;padding:14px 22px!important;border:1px solid #111!important;font-size:16px!important;font-weight:600;transition:background .2s,color .2s}
.yt-watch:hover{background:#111!important;color:#fff!important}

.yt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,3.5vw,56px) clamp(20px,2.4vw,36px);margin:0;padding:0;list-style:none}
.yt-card{display:flex;flex-direction:column;gap:16px;width:100%}
.yt-grid .yt-thumb{aspect-ratio:16/9}
.yt-card-copy strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:17px;font-weight:600;line-height:1.55;letter-spacing:-.03em}
.yt-card-copy small{display:block;margin-top:8px;font-size:14px;color:#62625e}

.yt-shorts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(14px,1.6vw,24px);margin:0;padding:0;list-style:none}
.yt-short{display:flex;flex-direction:column;gap:12px;width:100%}
.yt-short .yt-thumb{aspect-ratio:9/16;border-radius:12px}
.yt-short strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;font-weight:600;line-height:1.5;letter-spacing:-.03em}
.yt-short small{font-size:14px;color:#62625e}

.yt-more{display:flex!important;align-items:center;gap:10px;margin:clamp(44px,5vw,72px) auto 0;padding:16px 34px!important;border:1px solid #111!important;font-size:16px!important;font-weight:600;transition:background .2s,color .2s}
.yt-more span{font:700 13px/1 Arial,sans-serif;padding:4px 8px;border-radius:999px;background:#ff5a1f;color:#111}
.yt-more:hover{background:#111!important;color:#fff!important}
.yt-empty{padding:60px 0;font-size:17px;color:#62625e}
.yt-empty a{color:#111}

.yt-player{width:min(1100px,92vw);max-width:none;padding:0;border:0;background:#000;overflow:visible}
.yt-player.is-short{width:min(420px,90vw)}
.yt-player::backdrop{background:#000c}
.yt-frame{aspect-ratio:16/9}
.yt-player.is-short .yt-frame{aspect-ratio:9/16;max-height:86vh}
.yt-frame iframe{display:block;width:100%;height:100%;border:0}
.yt-close{position:absolute;right:0;top:-48px;width:40px;height:40px;border:0;background:none;color:#fff;font-size:34px;line-height:1;cursor:pointer}

@media(max-width:1100px){.yt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.yt-shorts{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:800px){.yt-feature{grid-template-columns:minmax(0,1fr)}.yt-shorts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){
 .yt-page{padding:0 20px 80px}
 .yt-lead{font-size:16px}.yt-lead br{display:none}
 .yt-tabs a{flex:1;justify-content:center;padding:18px 10px;font-size:17px}
 .yt-tabs a+a{border-right:0}
 .yt-grid{grid-template-columns:minmax(0,1fr)}
 .yt-shorts{grid-template-columns:repeat(2,minmax(0,1fr))}
 .yt-play{opacity:1;transform:none;width:48px;height:48px;margin:-24px 0 0 -24px}
}
@media(prefers-reduced-motion:reduce){.yt-updated i{animation:none}.yt-thumb img,.yt-play,.yt-tabs a::after{transition:none}}
