/* 외부 영상 데모 전용 반응형 레이아웃과 접근 가능한 재생 조작부 스타일. */
:root { color-scheme: light; --n4cbt-ui-font-family: "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif; --n4cbt-ui-font-size: 16px; font: 16px/1.55 var(--n4cbt-ui-font-family); color: #18304c; background: #f3f6fb; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 300px; overflow-y: scroll; }
button, input, textarea, select { font: inherit; }
a { color: #185bc2; }
button, .button { min-height: 44px; border: 1px solid #b6c7df; padding: .55rem .85rem; border-radius: 8px; background: white; color: #18304c; cursor: pointer; }
button:hover:not(:disabled), .button:hover { background: #eaf1fd; }
button:disabled { opacity: .55; cursor: not-allowed; }
button.primary { color: white; background: #2264db; border-color: #2264db; }
:focus-visible { outline: 3px solid #1c63df; outline-offset: 3px; }
input, textarea { width: 100%; min-width: 0; min-height: 44px; padding: .6rem .7rem; border: 1px solid #b6c7df; border-radius: 7px; background: #fff; color: inherit; }
input[type="checkbox"] { width: 20px; min-height: 20px; }
label { display: block; margin-bottom: .4rem; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
.header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem; padding: .8rem max(1rem, calc((100vw - 1440px) / 2)); background: white; border-bottom: 1px solid #d5dfeb; }
.brand { text-decoration: none; font-weight: 800; color: #143c75; }
.brand span { font-weight: 400; margin-left: .6rem; }
nav { display: flex; gap: 1rem; }
main { max-width: 1440px; margin: auto; padding: 1rem; }
footer { max-width: 1440px; margin: auto; padding: 1rem; color: #536a84; border-top: 1px solid #d5dfeb; }
#global-status:empty { display: none; }
.error { color: #a52a2a; background: #fff0f0; padding: .7rem; border-radius: 6px; overflow-wrap: anywhere; }
.muted { color: #526780; }
.skip { position: absolute; top: -100px; }
.skip:focus { top: 0; z-index: 100; background: white; padding: 1rem; }
.menus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem auto; max-width: 960px; }
.menu-card { display: flex; flex-direction: column; padding: 1.2rem; text-decoration: none; color: inherit; border: 1px solid #ccd9ea; border-radius: 14px; background: white; }
.menu-card:hover { border-color: #2264db; box-shadow: 0 4px 18px #193e7314; }
.menu-picture { display: grid; place-items: center; min-height: 160px; font-size: 4rem; background: linear-gradient(135deg, #dbeafe, #e8f6fa); border-radius: 10px; margin-bottom: 1rem; }
.menu-card strong { font-size: 1.2rem; margin-bottom: .5rem; }
.search-form { display: flex; gap: .6rem; margin: 1rem 0; }
.search-form input { flex: 1; }
.search-grid { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(0, 1.7fr); gap: 1rem; align-items: start; }
.panel { background: white; border: 1px solid #d3dfed; border-radius: 12px; padding: 1rem; min-width: 0; overflow: auto; }
.results { padding: 0; margin: 0; list-style: none; max-height: 70vh; overflow: auto; }
.result { width: 100%; text-align: left; display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: .8rem; margin-bottom: .7rem; padding: .8rem; }
.result[aria-current="true"] { border-color: #2264db; background: #eaf2ff; }
.result-icon { display: grid; place-items: center; background: #dceafa; min-height: 54px; border-radius: 5px; font-size: 1.6rem; }
.result-text { display: block; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: .3rem; }
.result-time { display: block; color: #506b8c; font-variant-numeric: tabular-nums; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .7rem 0; }
.caption-current { white-space: pre-wrap; padding: .8rem; background: #eef5ff; min-height: 4rem; border-radius: 7px; overflow-wrap: anywhere; }
.n4m-player { min-width: 0; }
.n4m-player-title { font-size: 1rem; margin-bottom: .5rem; overflow-wrap: anywhere; }
.n4m-video { width: 100%; max-height: 65vh; aspect-ratio: 16 / 9; object-fit: contain; background: #0c1522; }
.n4m-player-surface { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.n4m-player-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.n4m-player-controls button { padding: .35rem; min-width: 44px; }
.n4m-player-progress { flex: 1; width: 100px; min-width: 90px; padding: 0; accent-color: #2264db; }
.n4m-player-volume { width: 80px; padding: 0; accent-color: #2264db; }
.n4m-player-time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.n4m-player-note { color: #795117; margin: 0; }
.n4m-timeline-filmstrip { display: none; }
.n4m-player-surface:fullscreen, .n4m-player-surface:-webkit-full-screen, .n4m-player-fill { background: #0c1522; padding: 1rem; width: 100%; height: 100%; overflow: auto; color: white; }
.n4m-player-fill { position: fixed; inset: 0; z-index: 10000; }
.n4m-player-surface:is(:fullscreen, :-webkit-full-screen, .n4m-player-fill) .n4m-video-stage { flex: 1; min-height: 0; display: flex; align-items: center; }
.n4m-player-surface:is(:fullscreen, :-webkit-full-screen, .n4m-player-fill) .n4m-video { max-height: calc(100dvh - 150px); height: 100%; }
.operator-grid { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 1.5fr); gap: 1rem; align-items: start; }
.asset-list { list-style: none; padding: 0; max-height: 65vh; overflow: auto; }
.asset-list button { width: 100%; text-align: left; margin-bottom: .5rem; overflow-wrap: anywhere; }
.asset-list button[aria-current="true"] { background: #eaf2ff; border-color: #2264db; }
.status-detail { white-space: pre-wrap; overflow-wrap: anywhere; }
.cue-list { max-height: 45vh; overflow: auto; padding-left: 1.5rem; }
.cue-list li { white-space: pre-wrap; margin-bottom: .7rem; overflow-wrap: anywhere; }
.login-panel { max-width: 540px; margin: 1rem auto; }
progress { width: 100%; }
.upload-note { margin-top: .5rem; }
[hidden] { display: none !important; }
@media (max-width: 720px) {
  .menus, .search-grid, .operator-grid { grid-template-columns: minmax(0, 1fr); }
  .header { align-items: start; padding: .8rem; }
  main { padding: .75rem; }
  .brand span { display: block; margin-left: 0; }
  nav { gap: .7rem; }
  .menu-picture { min-height: 120px; }
  .results { max-height: 48vh; }
  .n4m-player-volume { display: none; }
  .n4m-player-time { width: 100%; text-align: center; }
  .n4m-video-caption { max-height: 50%; overflow: hidden; }
}