/* Shorts hall — on top of base.css */
body.modal-open{overflow:hidden}
.intro{padding:64px var(--gut) 24px}
.intro .display{max-width:12ch}
html:lang(ko) .intro .display{max-width:none}

.tags{display:flex; gap:0; overflow-x:auto; margin:0 calc(-1 * var(--gut)); padding:0 var(--gut); scrollbar-width:none; border-bottom:1px solid var(--rule)}
.tags::-webkit-scrollbar{display:none}
.tag{flex:none; display:inline-flex; align-items:baseline; gap:6px; padding:12px 14px 11px 0; margin-right:14px; background:none; border:0; border-bottom:2px solid transparent;
  color:var(--mute); font:400 15px var(--sans); cursor:pointer}
.tag[aria-pressed="true"]{color:var(--ink); border-bottom-color:var(--accent)}
.tag-n{font:400 11px var(--mono); color:var(--mute)}
.count{font:400 12px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin:18px 0}
html:lang(ko) .count{letter-spacing:.02em}

.grid{list-style:none; margin:0 0 72px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:28px 16px}
.card{min-width:0}
.thumb{position:relative; display:block; width:100%; aspect-ratio:9/16; padding:0; border:0; overflow:hidden; cursor:pointer; background:#0b1520}
.thumb img{width:100%; height:100%; object-fit:cover; transition:transform .6s}
.thumb:hover img{transform:scale(1.03)}
.thumb:disabled{cursor:default}
.thumb:disabled img{filter:grayscale(.5) brightness(.55)}
.play{position:absolute; left:12px; bottom:12px; width:40px; height:40px; border:1px solid rgba(255,255,255,.8); border-radius:50%; background:rgba(6,11,18,.35)}
.play::before{content:""; position:absolute; left:15px; top:12px; border-left:12px solid #fff; border-top:8px solid transparent; border-bottom:8px solid transparent}
.badge{position:absolute; top:0; left:0; font:500 10.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; padding:5px 8px; background:var(--ink); color:var(--bg)}
.badge-coming{background:var(--accent)}
.badge-reel{background:#fff}
.dur{position:absolute; right:10px; bottom:12px; font:400 11px var(--mono); color:#fff; text-shadow:0 1px 4px #000}
.card-body{padding-top:12px}
.card-tags{margin:0 0 4px; font:400 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
html:lang(ko) .card-tags{letter-spacing:.02em}
.card-title{font-family:var(--serif); font-weight:500; font-size:19px; line-height:1.25; margin:0 0 6px}
html:lang(ko) .card-title{letter-spacing:-.03em; font-size:17.5px}
.card-fact{margin:0 0 8px; font-size:14px; line-height:1.55; color:var(--ink2); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
.card-src,.card-ai{margin:0 0 4px; font-size:12px; color:var(--mute)}
.card-src a{color:var(--ink2)}
.thumb.noimg{background:linear-gradient(160deg,#13263a,#060b12)}
.noimg-t{position:absolute; left:12px; right:12px; top:40%; font-family:var(--serif); font-size:20px; line-height:1.25; color:var(--ink); text-align:left}
.empty{padding:28px 0; color:var(--mute); border-top:1px solid var(--rule)}

.facts{list-style:none; margin:0 0 56px; padding:0; display:grid; border-top:1px solid var(--rule2)}
.facts li{padding:24px 0; border-bottom:1px solid var(--rule)}
.facts li > p:not(.label){color:var(--ink2); margin:0 0 10px}
.fact-big{font-family:var(--serif); font-size:clamp(28px,7vw,38px) !important; line-height:1.1; letter-spacing:-.02em; color:var(--ink) !important}
html:lang(ko) .fact-big{font-weight:500; letter-spacing:-.04em; line-height:1.3}
.fact-big em{font-style:italic; color:var(--accent)}
html:lang(ko) .fact-big em{font-style:normal}
.src{font-size:12.5px; color:var(--mute) !important}
.src a{color:var(--ink2)}
.principle{border-top:1px solid var(--rule2); padding-top:28px}
.principle dl{margin:0 0 18px; display:grid}
.principle dl div{display:grid; grid-template-columns:110px 1fr; gap:12px; padding:12px 0; border-bottom:1px solid var(--rule)}
.principle dt{font:500 12px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); padding-top:3px}
html:lang(ko) .principle dt{letter-spacing:.02em; font-size:13px}
.principle dd{margin:0; color:var(--ink2)}

.split{display:grid; gap:48px}
.upload .rows{margin:0 0 22px}
.upload .rows li{font-size:15px; color:var(--ink2); padding:14px 0}

/* player */
.player{padding:0; border:0; background:transparent; color:var(--ink); max-width:none; max-height:none; width:100%; height:100%; margin:0}
.player::backdrop{background:rgba(3,6,10,.92)}
.player[open]{display:flex; align-items:center; justify-content:center}
.player-in{position:relative; width:100%; max-width:420px; max-height:100%; overflow-y:auto; padding:56px 16px 22px}
.close{position:absolute; top:10px; right:12px; width:40px; height:40px; border:1px solid var(--rule2); background:none; color:#fff; font-size:24px; line-height:1; cursor:pointer}
.p-video{background:#000; aspect-ratio:9/16; max-height:72vh; margin:0 auto}
.p-video video,.p-video iframe{width:100%; height:100%; display:block; object-fit:contain; background:#000; border:0}
.p-info{padding-top:16px}
.p-tags{margin:0 0 6px; font:400 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.p-fact{margin:0 0 8px; color:var(--ink2)}
.p-caution,.p-ai{margin:0 0 6px; font-size:13px; color:var(--mute)}
.p-src{margin:0 0 6px; font-size:13px}
.p-src a{color:var(--ink2)}
.p-link{display:inline-block; margin-top:6px; font-size:13.5px; color:var(--accent)}

@media (min-width:760px){
  .intro{padding:110px var(--gut) 40px}
  .tags{margin:0; padding:0}
  .grid{grid-template-columns:repeat(3,1fr); gap:40px 28px}
  .facts{grid-template-columns:repeat(3,1fr); gap:0 40px; border-top:0}
  .facts li{border-top:1px solid var(--rule2); border-bottom:0}
  .split{grid-template-columns:1fr 1fr; gap:80px}
}
@media (min-width:1040px){
  .grid{grid-template-columns:repeat(4,1fr)}
  .player-in{max-width:900px; display:grid; grid-template-columns:minmax(0,400px) 1fr; gap:32px; align-items:center; padding:28px}
  .p-video{max-height:86vh; width:100%}
  .p-info{padding:0}
}
@media (prefers-reduced-motion: reduce){ .thumb img{transition:none} }