/* GlowX Studio workspace. Colours, type and spacing are those of the approved mockups (워크스페이스_시안/*.html).
   Hand-written, no build step, nothing loaded from outside. No dark mode. */

@font-face {
  font-family: 'Pretendard Variable';
  font-style: normal;
  font-weight: 45 920;
  font-display: swap;
  src: url("fonts/PretendardVariable.woff2") format("woff2-variations"), url("fonts/PretendardVariable.woff2") format("woff2");
}

:root {
  --bg:#F7F7F8; --surface:#fff; --line:#E7E7EA; --line-soft:#F0F0F2;
  --ink:#18181B; --ink2:#52525B; --ink3:#9A9AA3;
  --primary:#4F46E5; --primary-soft:#EEF0FF; --primary-text:#4338CA;
  --amber:#B45309; --amber-bg:#FFF8EB; --amber-line:#F6D9A6;
  --green:#15803D; --green-bg:#ECFDF3; --red:#DC2626; --red-bg:#FEF2F2; --blue:#0369A1; --blue-bg:#EFF8FF;
  --top-height:64px; --nav-width:256px;
  --shadow-pop:0 12px 32px rgba(24,24,27,.12);
}

/* --- base ------------------------------------------------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Pretendard Variable', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
/* Chinese pages use the device's own Chinese font (PingFang SC on Apple, Microsoft YaHei on Windows); none is sent. */
html[lang|="zh"] body {
  font-family: 'PingFang SC', 'Microsoft YaHei', 'Pretendard Variable', system-ui, sans-serif;
  letter-spacing: 0;
}
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: var(--primary-text); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- the view-as band (above the top bar) ---------------------------------------------------------------------------- */

.viewas {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 20px; background: var(--amber-bg); border-bottom: 1px solid var(--amber-line);
  color: var(--amber); font-weight: 600;
}
.viewas::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; }
.viewas form { margin: 0 0 0 auto; }
.viewas button {
  border: 1px solid var(--amber-line); background: var(--surface); color: var(--amber);
  border-radius: 8px; padding: 5px 12px; font-weight: 700; cursor: pointer;
}
.viewas button:hover { background: #FFF1D6; }

/* --- the top bar ----------------------------------------------------------------------------------------------------- */

.top {
  height: var(--top-height); background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; padding: 0 20px; gap: 16px;
}
.logo {
  display: flex; align-items: center; gap: 10px; flex: none;
  font-weight: 800; font-size: 19px; width: 236px; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.logo i {
  width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, #6366F1, #4F46E5);
  display: grid; place-items: center; color: #fff; font-style: normal; font-size: 15px;
}
.logo span { font-weight: 500; color: var(--ink3); }
.logo .logo-name { font-weight: 800; color: var(--ink); }
/* The brand and each language's own name keep their font on every page. */
.logo, .lang :lang(ko), .lang :lang(en) { font-family: 'Pretendard Variable', system-ui, sans-serif; }
.lang :lang(zh) { font-family: 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif; }
.right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* The bell, between the language buttons and the account (as in the mockup): a round button with the unread number in red. */
.bell {
  position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-size: 16px; line-height: 1;
}
.bell:hover { background: var(--bg); }
.bell em {
  position: absolute; top: -4px; right: -6px; background: var(--red); color: #fff; font-style: normal; font-size: 10px; font-weight: 700;
  border-radius: 9px; padding: 1px 5px; line-height: 1.4;
}

/* Search, between the logo and the right side (as in the mockup); app.js puts the cursor in it on ⌘K or Ctrl+K. */
.search {
  flex: 0 1 440px; min-width: 0; height: 40px; margin: 0 0 0 8px; padding: 0 10px 0 12px;
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink3);
}
.search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.search-icon { font-size: 16px; line-height: 1; }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: none; outline: none; color: var(--ink); font-size: 14px; }
.search input::placeholder { color: var(--ink3); }
.search kbd { flex: none; font-family: inherit; font-size: 11px; color: var(--ink3); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }
/* On phones the box gives way to a button that opens the search page. */
.search-link {
  display: none; place-items: center; flex: none; width: 36px; height: 36px;
  border: 1px solid var(--line); border-radius: 9px; color: var(--ink2); text-decoration: none; font-size: 17px; line-height: 1;
}

.menu-toggle {
  display: none; place-items: center; flex: none; width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink2);
  font-size: 17px; line-height: 1; cursor: pointer;
}
.menu-toggle:hover { background: var(--bg); }

/* Language: three buttons in one row, the current one dark (as in the mockup). */
.lang { display: flex; margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; font-size: 12px; background: var(--surface); }
.lang button, .lang a, .lang-current {
  display: inline-flex; align-items: center; line-height: 16px;
  border: 0; background: none; padding: 5px 9px; color: var(--ink2); font-size: 12px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.lang button:hover, .lang a:hover { background: var(--line-soft); }
.lang button:focus-visible, .lang a:focus-visible { outline-offset: -2px; }
.lang .on, .lang .on:hover { background: var(--ink); color: #fff; }
.lang-current, .lang-current:hover { background: var(--ink); color: #fff; border: 1px solid var(--ink); cursor: default; }

/* The account menu behind the round initial. */
.account { position: relative; }
.account summary {
  list-style: none; width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #fff;
  display: grid; place-items: center; font-weight: 700; cursor: pointer; user-select: none;
}
.account summary::-webkit-details-marker { display: none; }
/* The round initial takes the colour of the person's role, as the people mockup's avatars do (the owner keeps the indigo). */
.account summary.avatar-approver { background: #F59E0B; }
.account summary.avatar-editor { background: #A855F7; }
.account summary.avatar-shooter { background: #0EA5E9; }
.account summary.avatar-viewer { background: #71717A; }
.account[open] summary { box-shadow: 0 0 0 3px var(--primary-soft); }
.account-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 220px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 14px;
}
.account-panel b { display: block; font-size: 15px; margin-bottom: 6px; overflow-wrap: anywhere; }
.account-panel form { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.account-panel .btn { width: 100%; }

/* --- the frame: left menu and the page ------------------------------------------------------------------------------- */

.wrap { display: flex; min-height: calc(100vh - var(--top-height)); }
.side { width: var(--nav-width); flex: none; background: var(--surface); border-right: 1px solid var(--line); padding: 16px 12px; }
.side .nav-title { margin: 18px 10px 6px; font-size: 12px; color: var(--ink3); font-weight: 600; letter-spacing: 0; }
.side .nav-title:first-child { margin-top: 4px; }
.side a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px;
  color: var(--ink2); text-decoration: none; font-size: 15px;
}
.side a:hover { background: var(--bg); }
.side a.on { background: var(--primary-soft); color: var(--primary-text); font-weight: 700; }
.side a .ic { width: 18px; text-align: center; opacity: .8; }
.nav-backdrop { display: none; }
main { flex: 1; padding: 22px 28px; min-width: 0; }

/* What a click answered with (django messages), above the page's own content. */
.msgs { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.msg { padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.msg-success { background: var(--green-bg); border-color: #B7E4C7; color: var(--green); }
.msg-info { background: var(--blue-bg); border-color: #BAE0F5; color: var(--blue); }
.msg-warning { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber); }
.msg-error { background: var(--red-bg); border-color: #F5C2C2; color: var(--red); }

h1 { font-size: 22px; margin: 0 0 4px; }
.sub { color: var(--ink3); margin: 0 0 18px; }

/* --- pieces of the mockups that pages share -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 8px 13px;
  font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--bg); }
.btn.pri { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.pri:hover { background: var(--primary-text); border-color: var(--primary-text); }
/* A primary button that cannot be pressed yet is the mockup's pale indigo, not a faded one. */
.btn.pri[disabled], .btn.pri[disabled]:hover { background: #C7C9F5; border-color: #C7C9F5; color: #fff; opacity: 1; }

.banner {
  background: var(--amber-bg); border: 1px solid var(--amber-line); color: var(--amber); border-radius: 12px;
  padding: 12px 16px; display: flex; gap: 10px; align-items: center; margin-bottom: 18px;
}
.banner a { color: var(--amber); font-weight: 700; margin-left: 6px; }
/* The home's to-do band: one line of items, each a count with a name, wrapping on a narrow screen. */
.banner.todo { flex-wrap: wrap; gap: 6px 14px; }
.banner.todo a, .banner.todo span[data-todo-item] { margin: 0; color: var(--amber); font-weight: 600; white-space: nowrap; }
/* Each item that leads somewhere reads like the mockup's 「확인하러 가기」: bold amber, underlined only under the pointer. */
.banner.todo a { font-weight: 700; text-decoration: none; }
.banner.todo a::after { content: " ›"; content: " ›" / ""; }
.banner.todo a:hover { text-decoration: underline; text-underline-offset: 3px; }
.banner.todo b { font-weight: 800; }
.alert { background: var(--red-bg); border: 1px solid #FECACA; color: var(--red); border-radius: 10px; padding: 10px 12px; margin: 0 0 16px; font-size: 13px; line-height: 1.5; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.panel > header { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.panel > header h2, .panel > header h3 { margin: 0; font-size: 16px; }
.panel > header .tabs { margin-left: auto; display: flex; gap: 6px; }
/* A wide table keeps its columns readable and scrolls sideways inside the panel instead of squeezing words apart. */
.panel-scroll { position: relative; overflow-x: auto; }
.panel-scroll table { min-width: 860px; }
.panel-scroll th, .panel-scroll td { white-space: nowrap; }
.pill { border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--ink2); background: #fff; text-decoration: none; }
.pill.on { border-color: var(--primary); color: var(--primary-text); background: var(--primary-soft); font-weight: 700; }

.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 20px; }
/* Four cards (everyone but the owner, who also has the cost): the row is filled, not left with an empty slot. */
.kpis-4 { grid-template-columns: repeat(4, 1fr); }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.kpi small { color: var(--ink3); font-size: 13px; }
.kpi b { display: block; font-size: 26px; margin: 6px 0 2px; letter-spacing: -0.02em; }
.kpi span { font-size: 12px; color: var(--ink2); }
.kpi.hot { border-color: #C7C9FF; background: linear-gradient(180deg, #F5F6FF, #fff); }
.grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; }
.grid > * { min-width: 0; }
/* Too narrow to keep five readable columns next to the feed: the feed goes below the board. */
@media (max-width: 1360px) { .grid { grid-template-columns: 1fr; } }

.board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 14px; }
.col { min-width: 0; }
.col h2, .col h3, .col h4 { margin: 0 0 8px; font-size: 13px; color: var(--ink2); display: flex; gap: 6px; align-items: center; }
.col h2 em, .col h3 em, .col h4 em { font-style: normal; color: var(--ink3); font-weight: 500; }
.col-empty { margin: 0; padding: 10px 2px; font-size: 12px; color: var(--ink3); }
.col-total { margin: 2px 2px 0; font-size: 12px; color: var(--ink2); }
.card { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-bottom: 8px; background: #fff; overflow-wrap: anywhere; }
/* A card that leads somewhere is clickable as a whole: its name's link covers it. */
.card b a { color: inherit; text-decoration: none; }
.card b a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card:has(b a):hover { border-color: var(--primary); }
.card .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.card .tags .tag { margin-top: 0; }
.card.sel { outline: 2px solid var(--primary); outline-offset: -1px; }
.card b { display: block; font-size: 13px; line-height: 1.35; }
.card p { margin: 4px 0 0; font-size: 12px; color: var(--ink3); }
.card p time { white-space: nowrap; }
.thumb { height: 74px; border-radius: 8px; background: linear-gradient(135deg, #FDE68A, #F97316); margin-bottom: 8px; position: relative; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Without a picture the tile's colour tells the kind: long-form orange, short green, footage with no video yet violet. */
.thumb-short { background: linear-gradient(135deg, #A7F3D0, #047857); }
.thumb-footage { background: linear-gradient(135deg, #C4B5FD, #6D28D9); }
.thumb .k, .thumb .t { position: absolute; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; border-radius: 6px; padding: 2px 6px; }
.thumb .k { left: 6px; top: 6px; }
.thumb .t { right: 6px; bottom: 6px; }
.tag { display: inline-block; font-size: 11px; border-radius: 6px; padding: 2px 6px; margin-top: 6px; font-weight: 600; }
.tag.ok { background: var(--green-bg); color: var(--green); }
.tag.wait { background: var(--primary-soft); color: var(--primary-text); }
.tag.err { background: var(--red-bg); color: var(--red); }
.tag.run { background: var(--blue-bg); color: var(--blue); }
.bar { height: 5px; border-radius: 3px; background: var(--line-soft); margin-top: 8px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--blue); }

.feed { padding: 6px 16px; }
.feed > div { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; line-height: 1.45; }
.feed > div:last-child { border: none; }
.feed .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--ink3); }
.feed time { display: block; color: var(--ink3); font-size: 12px; }
.feed a { color: inherit; text-decoration: none; }
.feed a:hover { text-decoration: underline; }
.feed .col-empty { padding: 12px 0; }
/* What each piece of news is: footage blue, a finished render violet, a public post green, an alert red, activity grey. */
.feed .dot-footage { background: var(--blue); }
.feed .dot-render { background: var(--primary); }
.feed .dot-public { background: var(--green); }
.feed .dot-alert { background: var(--red); }

/* The notices page: one row to an alert, an unread one marked with a dot and a tag, what can be done to it on the right. */
.notice-list > header form { margin: 0; }
.notice-more { margin: 0; padding: 10px 16px; font-size: 13px; color: var(--ink2); background: var(--bg); border-bottom: 1px solid var(--line-soft); }
.notices { list-style: none; margin: 0; padding: 0 16px; }
.notice { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.notice:last-child { border-bottom: 0; }
.notice-dot { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: transparent; }
.notice.unread .notice-dot { background: var(--red); }
.notice-body { flex: 1; min-width: 0; font-size: 14px; line-height: 1.5; }
.notice-body .tag { margin: 0 0 0 8px; }
.notice.unread .notice-body b { font-weight: 800; }
.notice-text { margin: 4px 0 0; color: var(--ink2); font-size: 13px; white-space: pre-line; overflow-wrap: anywhere; }
.notice-body time { display: block; margin-top: 2px; color: var(--ink3); font-size: 12px; }
.notice-actions { flex: none; display: flex; align-items: center; gap: 8px; }
.notice-actions form { margin: 0; }

table { width: 100%; border-collapse: collapse; }
th { font-size: 12px; color: var(--ink3); text-align: left; font-weight: 600; padding: 9px 14px; border-bottom: 1px solid var(--line-soft); }
/* A Korean column title breaks between words, never inside one (「공개된 플랫폼」, not 「공개된 플랫 / 폼」). */
html[lang|="ko"] th { word-break: keep-all; }
td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); font-size: 14px; vertical-align: middle; }
td small { display: block; color: var(--ink3); font-size: 12px; }
.st { display: inline-block; font-size: 12px; border-radius: 7px; padding: 3px 8px; font-weight: 700; }
.st.run { background: var(--blue-bg); color: var(--blue); }
.st.ok { background: var(--green-bg); color: var(--green); }
.st.err { background: var(--red-bg); color: var(--red); }
.st.wait { background: var(--line-soft); color: var(--ink2); }
.st.p { background: var(--primary-soft); color: var(--primary-text); }
.tabbar { display: flex; gap: 4px; padding: 6px 16px 0; border-bottom: 1px solid var(--line-soft); }
.tabbar a { padding: 10px 12px; color: var(--ink2); font-weight: 600; border-bottom: 2px solid transparent; text-decoration: none; }
.tabbar a.on { color: var(--primary-text); border-color: var(--primary); }
.tabbar em { font-style: normal; color: var(--ink3); font-weight: 500; margin-left: 4px; }
.person { display: flex; align-items: center; gap: 10px; }
.pa { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; flex: none; background: #4F46E5; }
.pa-approver { background: #F59E0B; }
.pa-editor { background: #A855F7; }
.pa-shooter { background: #0EA5E9; }
.pa-viewer { background: #71717A; }

/* Role badges, one colour per role (the people mockup). */
.role { display: inline-block; border-radius: 7px; padding: 3px 8px; font-size: 12px; font-weight: 700; }
.role-owner { background: #18181B; color: #fff; }
.role-approver { background: var(--primary-soft); color: var(--primary-text); }
.role-editor { background: #F3E8FF; color: #7E22CE; }
.role-shooter { background: var(--blue-bg); color: var(--blue); }
.role-viewer { background: var(--line-soft); color: var(--ink2); }

/* --- the long-form and short lists: filters, the table, the detail panel ----------------------------------------------- */

.filters { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.filter-name { flex: none; min-width: 52px; font-size: 12px; font-weight: 600; color: var(--ink3); }
.filter .pill:hover { border-color: var(--primary); color: var(--primary-text); }

/* The 「자막·번역」 page: one table of the videos before release. */
.translations-table td:first-child { min-width: 12em; }
.translations-table td a { color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.translations-table td a:hover { color: var(--primary-text); text-decoration: underline; }
.translations-table td .tag { margin-top: 0; }
.translations-table tbody tr:last-child td { border-bottom: 0; }

/* The 「승인 대기」 page is a table of the lists' look; the 「게시 현황」 page a table of the video screen's posts, with the uploads
   waiting for a person above it. */
.review-table td .chip { white-space: nowrap; }
.posts-table td:first-child { min-width: 12em; }
.posts-table td:first-child a { color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.posts-table td:first-child a:hover { color: var(--primary-text); text-decoration: underline; }
.manual-list { margin: 0 0 16px; }
.manual-list .manual-video { font-weight: 600; }
.manual-list .manual-video a { color: var(--ink); text-decoration: none; }
.manual-list .manual-video a:hover { color: var(--primary-text); text-decoration: underline; }

/* The table, and the selected video's panel on its right; below 1200px the panel goes above the table. */
.videos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.videos.has-detail { grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "list detail"; }
.videos.has-detail .videos-list { grid-area: list; }
.videos.has-detail .detail { grid-area: detail; position: sticky; top: 16px; }
@media (max-width: 1200px) {
  .videos.has-detail { grid-template-columns: minmax(0, 1fr); grid-template-areas: "detail" "list"; }
  .videos.has-detail .detail { position: static; }
}
.videos-list { min-width: 0; }
.videos-table th, .videos-table td { padding-left: 12px; padding-right: 12px; }
.videos-table .vt-thumb { width: 104px; padding-right: 0; }
.videos-table .vt-thumb img, .videos-table .vt-thumb .thumb { display: block; width: 80px; height: 45px; margin: 0; border-radius: 6px; object-fit: cover; }
/* The title and the shop keep a few characters to a line when the panel is open (Chinese breaks between any two). */
.videos-table td:nth-child(2) { min-width: 9em; }
.videos-table td:nth-child(3) { min-width: 6em; }
.videos-table td a { color: var(--ink); font-weight: 600; text-decoration: none; }
.videos-table td a:hover { color: var(--primary-text); text-decoration: underline; }
.videos-table td time, .videos-table td[data-label]:nth-last-child(2), .videos-table .chips > * { white-space: nowrap; }
.videos-table tr.sel td { background: #FAFAFF; }
.videos-table tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.videos-table tbody tr:last-child td { border-bottom: 0; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.chips .tag { margin-top: 0; }
.chip { font-size: 12px; border-radius: 7px; padding: 3px 8px; background: var(--line-soft); color: var(--ink2); font-weight: 600; }
.empty { margin: 0; padding: 32px 16px; text-align: center; color: var(--ink3); }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--ink2); }
.pager a { border: 1px solid var(--line); border-radius: 8px; padding: 5px 12px; color: var(--ink2); text-decoration: none; font-weight: 600; }
.pager a:hover { border-color: var(--primary); color: var(--primary-text); }

.detail > header { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.detail > header h2 { margin: 0; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.detail .close {
  margin-left: auto; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px;
  color: var(--ink3); text-decoration: none; font-size: 20px; line-height: 1;
}
.detail .close:hover { background: var(--bg); color: var(--ink); }
.detail-thumb { padding: 14px 16px 0; }
.detail-thumb img, .detail-thumb .thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0; border-radius: 10px; object-fit: cover; background: var(--line-soft); }
.detail > .chips { padding: 12px 16px; }
.detail > section { padding: 12px 16px; border-top: 1px solid var(--line-soft); }
.detail h3 { margin: 0 0 8px; font-size: 14px; }
.detail p { margin: 0; }
.detail .muted { color: var(--ink3); font-size: 13px; }
.detail table th, .detail table td { padding: 7px 8px; font-size: 13px; vertical-align: top; }
.detail table th:first-child, .detail table td:first-child { padding-left: 0; }
.detail table th:last-child, .detail table td:last-child { padding-right: 0; }
.detail table tbody tr:last-child td { border-bottom: 0; }
.detail .posts td:last-child { text-align: right; white-space: nowrap; }
.detail > footer { padding: 12px 16px 16px; border-top: 1px solid var(--line-soft); }
.kv { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 6px 10px; margin: 0; font-size: 13px; }
.kv dt { color: var(--ink3); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
/* A price or an address: 「모름」 is an answer (grey), 「미입력」 is still to be done (amber). */
.na { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 6px; padding: 1px 6px; }
.na-unknown { background: var(--line-soft); color: var(--ink2); }
.na-missing { background: var(--amber-bg); color: var(--amber); }

/* --- the video screen (시안 2): the player, its section strip and the tabs in the middle, the checklist on the right ------- */

.crumb { color: var(--ink3); font-size: 13px; margin: 0 0 8px; overflow-wrap: anywhere; }
.crumb a { color: var(--ink3); text-decoration: none; }
.crumb a:hover { color: var(--primary-text); text-decoration: underline; }
.crumb b { color: var(--ink2); font-weight: 600; }
.video-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.video-title { min-width: 0; }
.video-head h1 { margin: 0 0 8px; overflow-wrap: anywhere; }
.video-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.video-actions:empty { display: none; }
.approve-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin: 0; }
.approve-left { color: var(--amber); font-size: 13px; font-weight: 600; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.chip.p { background: var(--primary-soft); color: var(--primary-text); }
.chip.w { background: var(--amber-bg); color: var(--amber); }
.chip.ok { background: var(--green-bg); color: var(--green); }
.chip.run { background: var(--blue-bg); color: var(--blue); }
.video-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.video-grid > * { min-width: 0; }
/* Too narrow for the player and the right column side by side: the right column goes below. */
@media (max-width: 1360px) { .video-grid { grid-template-columns: minmax(0, 1fr); } }

.player { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 430px; border-radius: 14px 14px 0 0; overflow: hidden; background: #000; }
.player video { display: block; width: 100%; height: 100%; object-fit: contain; }
.player .ttl { position: absolute; left: 14px; top: 12px; color: #fff; background: rgba(0,0,0,.35); font-size: 12px; border-radius: 6px; padding: 3px 8px; pointer-events: none; }
.player-empty {
  display: grid; place-items: center; height: 100%; margin: 0; padding: 16px; text-align: center; color: #fff; font-weight: 600;
  background: linear-gradient(135deg, #7C3AED 0%, #C026D3 45%, #F97316 100%);
}
/* The section strip: one piece per shop, walk and the ends, as wide as it is long; a piece moves the player there. */
.strip { padding: 12px 14px 4px; }
.strip-track { position: relative; }
.strip-row { display: flex; gap: 2px; height: 26px; border-radius: 7px; overflow: hidden; }
.seg {
  display: block; flex: 1 1 0; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; color: #fff;
  font-size: 11px; line-height: 26px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.seg:focus-visible { outline-offset: -2px; outline-color: #fff; }
.seg:hover, .seg.playing { box-shadow: inset 0 -3px 0 rgba(255,255,255,.85); }
.seg-montage { background: #6366F1; }
.seg-body { background: #0EA5E9; }
.seg-body.alt { background: #0284C7; }
.seg-walk { background: #A1A1AA; }
.seg-ending { background: #18181B; }
.strip-now { position: absolute; top: -4px; bottom: -4px; left: 0; width: 2px; margin-left: -1px; background: var(--red); pointer-events: none; }
.strip-lab { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; color: var(--ink3); font-size: 12px; }
.video-tabs { padding: 8px 14px 0; overflow-x: auto; }
.video-tabs a { white-space: nowrap; }
.video-tab { padding-bottom: 8px; }
.tab-head { margin: 16px 14px 8px; font-size: 14px; }
.tab-head em { font-style: normal; color: var(--ink3); font-weight: 500; margin-left: 6px; }
.tab-note { margin: 0 14px 10px; color: var(--ink3); font-size: 12px; line-height: 1.5; }
.video-table td { font-size: 13px; vertical-align: top; }
.video-table td img { display: block; width: 72px; height: 40px; border-radius: 6px; object-fit: cover; background: var(--line-soft); }
.video-table .st { white-space: nowrap; }
.video-table tbody tr:last-child td { border-bottom: 0; }
.seg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 1px; }
.time-link { border: 0; background: none; padding: 0; color: var(--primary-text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; }
.time-link:hover { text-decoration: underline; }
.muted { color: var(--ink3); font-size: 13px; }
p.muted { margin: 0; }
.warn { background: var(--amber-bg); border: 1px solid var(--amber-line); color: #92400E; border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.5; margin-bottom: 8px; overflow-wrap: anywhere; }
.warn small { display: block; margin-top: 4px; color: var(--amber); font-size: 12px; }
.video-tab > .warn { margin: 14px 14px 0; }

/* The title and description tab: the 23 languages, then the chosen one's title, chapters and body. */
.subbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.subbar .pill { font-size: 12px; padding: 4px 10px; }
.subbar .pill:hover { border-color: var(--primary); color: var(--primary-text); }
.subbar .pill.missing { border-style: dashed; color: var(--ink3); }
.subbar .mark { font-style: normal; margin-left: 4px; color: var(--primary-text); }
.subbar .mark-problem { color: var(--red); font-weight: 800; }
.subbar .r { margin-left: auto; color: var(--ink3); font-size: 12px; }
.meta-info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px 0; color: var(--ink2); font-size: 13px; }
.meta-info .tag { margin-top: 0; }
.meta-problems, .meta-errors { margin: 10px 14px 0; padding: 10px 12px 10px 28px; background: var(--red-bg); color: var(--red); border-radius: 10px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.meta-field { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.meta-field:last-of-type { border-bottom: 0; }
.meta-field.human { box-shadow: inset 3px 0 0 var(--primary); }
.meta-field h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12px; color: var(--ink3); font-weight: 600; }
.meta-field h4 small { font-weight: 500; }
.meta-field h4 .tag { margin-top: 0; }
.meta-text { margin: 0; font: inherit; font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
p.meta-text { font-size: 15px; font-weight: 600; }

/* The form that changes one language's title and body: the fields fill the tab; the English form says up front that saving can take about a minute. */
.meta-form { margin: 0; }
.meta-form > .tab-note { margin-top: 12px; }
.meta-form input[type="text"], .meta-form textarea { display: block; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; font-size: 14px; line-height: 1.6; }
.meta-form textarea { min-height: 14em; resize: vertical; }
.meta-form label { cursor: pointer; }
.meta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px 4px; }
.meta-wait { color: var(--amber); font-size: 13px; line-height: 1.5; }
.meta-form > .meta-youtube-off { color: var(--amber); }
/* What is saved now, beside a refused text; the text that was typed where the form is gone. */
.meta-saved, .meta-typed { margin: 10px 14px 0; padding: 10px 12px; border: 1px solid var(--amber-line); background: var(--amber-bg); border-radius: 12px; }
.meta-saved h4, .meta-typed h4 { margin: 0 0 6px; font-size: 12px; color: var(--amber); font-weight: 700; }
.meta-saved .meta-text + .meta-text, .meta-typed .meta-text + .meta-text { margin-top: 6px; }
.meta-blocked { margin-top: 12px; }

/* The thumbnail tab: the current picture marked, the others offered beside it. */
.thumb-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; padding: 14px; }
.thumb-option { margin: 0; }
.thumb-option img { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; object-fit: cover; background: var(--line-soft); }
.thumb-option.current img { outline: 3px solid var(--primary); outline-offset: 2px; }
.thumb-option figcaption { margin-top: 8px; font-size: 12px; color: var(--ink2); }

/* The posts tab: an upload waiting for a person first, then every post. */
.manual-upload { margin: 14px; padding: 12px 14px; border: 1px solid var(--amber-line); background: var(--amber-bg); border-radius: 12px; }
.manual-upload h4 { margin: 0 0 6px; font-size: 14px; }
.manual-upload p { margin: 0 0 8px; font-size: 13px; color: var(--ink2); }
.caption { margin: 0; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.post-line { margin: 0; font-size: 13px; }
.post-line .tag { margin-top: 0; }
.post-error { margin: 4px 0 0; color: var(--red); font-size: 12px; overflow-wrap: anywhere; }
.address-form { margin-top: 10px; }
.address-form label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; }
.address-row { display: flex; flex-wrap: wrap; gap: 8px; }
.address-row input { flex: 1 1 240px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.post-act { margin: 6px 0 0; }
.post-abandon { margin-top: 6px; font-size: 13px; }
.post-abandon summary { color: var(--ink2); cursor: pointer; }
.post-abandon form { display: grid; gap: 6px; margin-top: 6px; }
.post-abandon label { font-weight: 600; font-size: 12px; }
.post-abandon label.check-box { display: flex; align-items: flex-start; gap: 6px; font-weight: 500; font-size: 13px; }
.post-abandon textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; resize: vertical; }
.post-abandon .btn { justify-self: start; }
.post-history summary { margin-top: 4px; color: var(--ink2); font-size: 12px; cursor: pointer; }
.post-history ul { margin: 6px 0 0; padding-left: 16px; color: var(--ink2); font-size: 12px; line-height: 1.5; }

/* The touch-ups: a button on a clip or a stretch, the form that types one, another thumbnail, making the video again, a card's retry. */
.video-table .row-act { text-align: right; white-space: nowrap; }
.scene-act, .thumb-act, .name-act, .card-act, .rebuild-form { margin: 0; }
.scene-act .btn, .thumb-act .btn, .name-act .btn, .card-act .btn { padding: 4px 10px; font-size: 12px; }
.thumb-act { margin-top: 6px; }
.scene-form { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: center; margin: 0 14px 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.scene-form label { font-size: 13px; font-weight: 600; }
.scene-form input, .scene-form select { min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; font-size: 14px; }
.scene-form .btn { grid-column: 1 / -1; justify-self: start; }
.rebuild-state { align-self: center; color: var(--blue); font-size: 13px; font-weight: 600; }
.rebuild-last { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 360px; }
.rebuild-last .tag { margin-top: 0; }
.rebuild-last small { color: var(--ink3); font-size: 12px; overflow-wrap: anywhere; }
.name-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.name-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
.name-list .name { overflow-wrap: anywhere; }
.name-list .tag { margin-top: 0; }
.card-act { margin-top: 8px; }

/* The history tab's records. */
.activity-list { list-style: none; margin: 0; padding: 0 14px 6px; }
.activity-list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; line-height: 1.45; }
.activity-list li:last-child { border-bottom: 0; }
.activity-list time { flex: none; color: var(--ink3); font-size: 12px; }

/* The right column. */
.video-side > section { padding: 16px; border-bottom: 1px solid var(--line-soft); }
.video-side > section:last-child { border-bottom: 0; }
.video-side h3 { margin: 0 0 10px; font-size: 15px; }
.check { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font-size: 14px; line-height: 1.4; }
.check .b { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; }
.check .b.ok { background: var(--green); color: #fff; }
.check .b.ok::before { content: "✓"; }
.check .b.no { border: 2px solid var(--amber); background: #fff; }
.check-body { min-width: 0; overflow-wrap: anywhere; }
.check small { display: block; color: var(--ink3); font-size: 12px; }
.check a { color: var(--primary-text); font-weight: 600; font-size: 12px; }
.end-screen-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; }
.end-screen-form label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.end-screen-form .btn { padding: 4px 10px; font-size: 12px; }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 420px; }
.thumbs figure { position: relative; margin: 0; aspect-ratio: 16 / 9; }
.thumbs img { display: block; width: 100%; height: 100%; border-radius: 8px; object-fit: cover; background: var(--line-soft); }
.thumbs .sel img { outline: 3px solid var(--primary); outline-offset: 2px; }
.thumbs span { position: absolute; right: 4px; bottom: 4px; background: rgba(0,0,0,.55); color: #fff; font-size: 10px; border-radius: 5px; padding: 1px 5px; }
.video-side .kv { margin-top: 4px; }
.pub { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; }
.pub > span:last-child:not(.st) { color: var(--ink3); text-align: right; }

/* --- search ------------------------------------------------------------------------------------------------------------ */

.search-page { display: flex; gap: 8px; max-width: 560px; margin: 10px 0 12px; }
.search-page .input { flex: 1; min-width: 0; }
.search-page .btn { height: 44px; padding: 0 18px; }
.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; align-items: start; }
.results > header h2 em { font-style: normal; color: var(--ink3); font-weight: 500; margin-left: 4px; }
.result-list { list-style: none; margin: 0; padding: 2px 16px; }
.result-list li { padding: 10px 0; border-bottom: 1px solid var(--line-soft); overflow-wrap: anywhere; }
.result-list li:last-child { border-bottom: 0; }
.result-list a, .result-list b { color: var(--ink); font-weight: 600; text-decoration: none; }
.result-list a:hover { color: var(--primary-text); text-decoration: underline; }
.result-list small { display: block; margin-top: 2px; color: var(--ink3); font-size: 12px; }
.results .more { margin: 0; padding: 8px 16px 12px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--ink3); }

/* A short message in the middle of the page (the 403 page). Its own name: .notice is a row of the notices page. */
.page-note {
  max-width: 520px; margin: 48px auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 32px 28px; text-align: center;
}
.page-note-mark {
  width: 44px; height: 44px; border-radius: 50%; background: var(--red-bg); color: var(--red);
  display: grid; place-items: center; margin: 0 auto 14px; font-weight: 800; font-size: 18px;
}
.page-note h1 { font-size: 18px; line-height: 1.45; margin: 0; overflow-wrap: anywhere; }
.page-note form { margin: 20px 0 0; }

/* --- the login page: a card in the middle, no menu ------------------------------------------------------------------- */

.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login-card {
  width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 28px; box-shadow: 0 1px 2px rgba(24,24,27,.04), 0 16px 40px rgba(24,24,27,.06);
}
.login-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
.login-head .logo { width: auto; }
.login-card h1 { margin-bottom: 18px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--ink2); font-weight: 600; margin-bottom: 6px; }
.input {
  width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px;
  background: #fff; font-size: 15px;
}
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.login-card .btn { width: 100%; height: 44px; margin-top: 6px; font-size: 15px; }
/* The pages a link opens (an invite, a reset): the login card with a line under a box, and the card of a link that does not open. */
.login-card .sub { margin: -8px 0 18px; overflow-wrap: anywhere; }
.login-card .field small { display: block; margin-top: 5px; color: var(--ink3); font-size: 12px; line-height: 1.5; }
.login-card.link-unusable h1 { font-size: 18px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }

/* --- the people and permissions screen: the table with its role table, one person, the invite form, the link shown once ------ */

.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.page-head > div { min-width: 0; }
.page-head h1 { margin: 0 0 4px; overflow-wrap: anywhere; }
.page-head .sub { margin: 0; }
.page-head > .btn, .page-head > form { margin-left: auto; flex: none; }
.page-head > form { margin-top: 0; margin-bottom: 0; }
.back { margin: 0 0 12px; font-size: 13px; }
.back a { text-decoration: none; }
.back a:hover { text-decoration: underline; }

.people-grid { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 16px; align-items: start; }
.people-grid > * { min-width: 0; }
/* The list needs about 960px for its seven columns without a sideways scroll (measured with every kind of row on show), and the
   role table 470px beside it: that is a window about 1760px wide once the 256px menu and the page's sides are taken away. At 1440px
   the list would get 640px and lose its status and 「관리」 columns off the edge, so the role table goes below it up to 1780px
   (20px more than the measure, for a scroll bar) and, as ever, on every narrower screen. */
@media (max-width: 1780px) { .people-grid { grid-template-columns: 1fr; } }
.people-list .tabbar { flex-wrap: wrap; }
.people-table .person { min-width: 190px; }
.people-table .person small, .facts small { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.person-name { font-weight: 600; overflow-wrap: anywhere; }
.pa-invite { background: #D4D4D8; color: var(--ink2); }
.people-table td small { margin-top: 2px; }
.row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.row-actions form { margin: 0; }
.row-actions .btn { padding: 5px 10px; font-size: 13px; }
.btn.danger { color: var(--red); border-color: #F5C2C2; }
.btn.danger:hover { background: var(--red-bg); }

/* The role table (the mockup's 「역할별로 할 수 있는 것」): ● for everything, 자기 것 for one's own, — for nothing. */
.matrix th, .matrix td { text-align: center; padding: 8px 6px; font-size: 13px; }
.matrix tbody th { text-align: left; padding-left: 14px; font-size: 13px; font-weight: 400; color: var(--ink); }
.cap-all { color: var(--green); font-weight: 800; }
.cap-own { color: var(--ink2); font-size: 12px; }
.cap-none { color: #D4D4D8; }
.invite-help { padding: 16px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--ink2); line-height: 1.5; }
.invite-help h3 { margin: 0 0 8px; font-size: 15px; color: var(--ink); }
.invite-help p { margin: 0; }

/* One person, and the invite form. */
.people-detail { display: grid; gap: 16px; max-width: 760px; }
.people-detail > .back, .people-detail > .page-head, .people-detail > .banner { margin: 0; }
.facts { margin: 0; padding: 14px 16px 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 24px; }
.facts > div { min-width: 0; }
.facts dt { font-size: 12px; font-weight: 600; color: var(--ink3); margin-bottom: 3px; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.form-panel { padding: 18px; max-width: 560px; }
.form-body { padding: 16px; }
.form-panel .field small, .form-body .field small { display: block; margin-top: 5px; color: var(--ink3); font-size: 12px; line-height: 1.5; }
select.input { padding-right: 8px; }
fieldset.field { border: 0; padding: 0; min-width: 0; }
fieldset.field legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.field .radios { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.field .radios label, .check { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; font-weight: 500; color: var(--ink); }
.action-block { padding: 16px; }
.action-block + .action-block { border-top: 1px solid var(--line-soft); }
.action-block form { margin: 0; }
.action-block p { margin: 0 0 10px; color: var(--ink2); font-size: 13px; line-height: 1.5; }
.action-block .check { margin-bottom: 12px; }
.alert p { margin: 0; }
.alert p + p { margin-top: 4px; }

/* The page that shows a link once: the link in a box that selects (a box, so it can be copied by hand without the button). */
.link-panel { padding: 20px; max-width: 720px; margin-bottom: 16px; }
.link-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink2); }
.link-row { display: flex; gap: 8px; align-items: center; margin: 8px 0 12px; }
.link-box { flex: 1; min-width: 0; font-size: 14px; background: var(--bg); }
.link-panel .expires { margin: 0 0 14px; font-size: 13px; color: var(--ink2); }
.link-panel .banner { margin-bottom: 0; }
/* A button the page's script reveals (the copy button): .btn sets its display, which would show it before. */
.btn[hidden] { display: none; }

/* The 「참고 채널」 page: one table of the channels in the look of the lists; its forms are the people screen's. */
/* The owner's table (with the buttons) is wider than its panel between about 640 and 1100 pixels: it scrolls sideways inside the panel. */
.ref-scroll { position: relative; overflow-x: auto; }
.ref-table td:first-child { min-width: 12em; }
.ref-name { font-weight: 600; overflow-wrap: anywhere; }
.ref-note { min-width: 14em; color: var(--ink2); overflow-wrap: anywhere; }
.ref-table td small { margin-top: 2px; }
.ref-open { font-weight: 600; white-space: nowrap; }
.ref-table tbody tr:last-child td { border-bottom: 0; }
.ref-table th, .ref-table td.ref-country, .ref-table td.ref-subs, .ref-table td.ref-actions { white-space: nowrap; }
.ref-table .row-actions { flex-wrap: nowrap; }
.ref-table .row-actions .btn { white-space: nowrap; }
main > h1 + .alert, main > h1 + .form-panel, main > h1 + .banner { margin-top: 14px; }
.ref-delete-name { margin: 0 0 12px; overflow-wrap: anywhere; }
.ref-delete-name small { display: block; margin-top: 2px; color: var(--ink3); font-size: 12px; }
.ref-delete-note { margin: 0 0 14px; color: var(--ink2); line-height: 1.5; }
textarea.input { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.field label.check { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 14px; font-weight: 500; color: var(--ink); }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- narrower screens ------------------------------------------------------------------------------------------------ */

/* Tablets and phones: the menu folds behind the ☰ button (app.js puts .nav-open on <body>). */
@media (max-width: 900px) {
  .menu-toggle { display: grid; }
  .top { padding: 0 16px; gap: 12px; }
  .logo { width: auto; }
  .side {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; width: var(--nav-width); max-width: 85vw; overflow-y: auto;
    transform: translateX(-100%); transition: transform .2s ease; visibility: hidden;
  }
  .nav-open .side { transform: none; visibility: visible; box-shadow: 0 0 40px rgba(24,24,27,.18); }
  .nav-open .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(24,24,27,.32); }
  main { padding: 20px; }
  .search { flex-basis: 280px; }
  .search kbd { display: none; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .grid { grid-template-columns: 1fr; }
  .board { grid-template-columns: repeat(5, minmax(200px, 1fr)); overflow-x: auto; }
}

/* Phones: tables marked .table-cards become one card per row, each cell led by its data-label. */
@media (max-width: 640px) {
  .top { padding: 0 12px; gap: 8px; }
  .right { gap: 8px; }
  .lang button, .lang a, .lang-current { padding: 5px 7px; }
  .viewas { padding: 8px 12px; }
  main { padding: 16px 14px; }
  h1 { font-size: 20px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
  .table-cards tr { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin: 0 0 10px; padding: 6px 0; }
  .table-cards td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border: 0; padding: 7px 14px; text-align: right; }
  .table-cards td::before { content: attr(data-label); flex: none; color: var(--ink3); font-size: 12px; font-weight: 600; text-align: left; }
  .table-cards td:empty { display: none; }
  .panel-scroll { background: none; border: 0; overflow: visible; }
  .panel-scroll table { min-width: 0; }
  .panel-scroll td { white-space: normal; }
  .search { display: none; }
  .search-link { display: grid; margin-left: auto; }
  .search-link + .right { margin-left: 0; }
  /* The lists whose rows become framed cards stand without their own frame, so a row is not framed twice. */
  .videos-list, .review-list, .translations-list, .posts-list, .ref-list { background: none; border: 0; }
  .ref-scroll { position: static; overflow: visible; }
  .videos-table td.vt-thumb { width: 100%; justify-content: flex-start; padding-top: 10px; }
  .videos-table td.vt-thumb img, .videos-table td.vt-thumb .thumb { width: 128px; height: 72px; }
  .videos-table td:nth-child(2), .videos-table td:nth-child(3) { min-width: 0; }
  .videos-table tr.sel { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
  .videos-table tr.sel td { background: none; }
  .videos-table tr.sel td:first-child { box-shadow: none; }
  .videos-table tbody tr:last-child td { border-bottom: 0; }
  .videos-list .pager, .translations-list .pager, .posts-list .pager { border-top: 0; }
  .filter-name { min-width: 100%; }
  .video-head { flex-direction: column; gap: 10px; }
  .strip-lab span:nth-child(2) { display: none; }
  .video-actions { margin-left: 0; }
  .video-tab .table-cards { padding: 0 10px; }
  /* A cell of several pieces (a colour dot and a name, a name over a smaller line) stays one block beside its label. */
  .video-table td { display: block; }
  .video-table td::before { float: left; margin-right: 12px; }
  .video-table td::after { content: ""; display: block; clear: both; }
  .video-table td img { width: 96px; height: 54px; margin-left: auto; }
  .video-table .post-history ul { text-align: left; }
  /* The cut's tables as one compact row each, not a label and a value for every cell (a long cut is thirteen clips or more).
     A clip: the scene picture on the left with its button under it; on the right the number, the part and the food, the time in
     the video and the length, then the original and the stretch of it. */
  .clip-table tr {
    display: grid; grid-template-columns: 96px auto auto minmax(0, 1fr); gap: 0 8px; align-items: center; padding: 10px 12px;
    grid-template-areas: "pic num part food" "pic when when len" "pic src src src" "act src src src";
  }
  .clip-table td, .exclusion-table td, .correction-table td { display: block; min-width: 0; padding: 0; text-align: left; line-height: 1.5; }
  .clip-table td::before, .clip-table td::after, .exclusion-table td::before, .exclusion-table td::after,
  .correction-table td::before, .correction-table td::after { display: none; }
  .clip-table .c-pic { grid-area: pic; margin-right: 4px; }
  .clip-table .c-pic img { width: 96px; height: 54px; margin: 0; }
  .clip-table .c-act { grid-area: act; margin: 6px 4px 0 0; white-space: normal; }
  .clip-table .c-act .btn { width: 100%; padding: 4px 6px; line-height: 1.25; }
  .clip-table .c-num { grid-area: num; align-self: start; color: var(--ink3); font-weight: 700; }
  .clip-table .c-part { grid-area: part; align-self: start; font-weight: 600; white-space: nowrap; }
  .clip-table .c-food { grid-area: food; align-self: start; color: var(--ink2); overflow-wrap: anywhere; }
  .clip-table .c-when { grid-area: when; }
  .clip-table .c-len { grid-area: len; color: var(--ink2); }
  .clip-table .c-src { grid-area: src; align-self: start; color: var(--ink2); font-size: 12px; overflow-wrap: anywhere; }
  .clip-table .c-src small { display: inline; margin-left: 6px; }
  .clip-table .c-len::before, .clip-table .c-src::before { display: inline; float: none; margin: 0 4px 0 0; color: var(--ink3); font-size: 12px; font-weight: 500; }
  /* An AI-excluded stretch: the original and its time on one line, the reason under it, the button on the right. */
  .exclusion-table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 10px; align-items: center; padding: 10px 12px;
    grid-template-areas: "src when act" "why why act";
  }
  .exclusion-table .x-src { grid-area: src; font-weight: 600; overflow-wrap: anywhere; }
  .exclusion-table .x-when { grid-area: when; color: var(--ink2); white-space: nowrap; }
  .exclusion-table .x-why { grid-area: why; color: var(--ink2); font-size: 12px; }
  .exclusion-table .x-act { grid-area: act; white-space: normal; }
  .exclusion-table .x-why::before { display: inline; float: none; margin: 0 4px 0 0; color: var(--ink3); font-weight: 500; }
  /* A person's correction: who and when with what they did, the stretch under it, the note last. */
  .correction-table tr {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 10px 12px;
    grid-template-areas: "who at what" "src src src" "note note note";
  }
  .correction-table .k-who { grid-area: who; font-weight: 600; overflow-wrap: anywhere; }
  .correction-table .k-at { grid-area: at; color: var(--ink3); font-size: 12px; white-space: nowrap; }
  .correction-table .k-what { grid-area: what; }
  .correction-table .k-src { grid-area: src; color: var(--ink2); overflow-wrap: anywhere; }
  .correction-table .k-src small { display: inline; margin-left: 6px; }
  .correction-table .k-note { grid-area: note; color: var(--ink2); font-size: 12px; overflow-wrap: anywhere; }
  .subbar .r { margin-left: 0; width: 100%; }
  .activity-list li { flex-direction: column; gap: 2px; }
  .notice { flex-wrap: wrap; }
  .notice-actions { margin-left: 20px; }
  .login-card { padding: 24px 20px; }
  .page-head { flex-wrap: wrap; }
  .people-table td .person { min-width: 0; }
  .row-actions { justify-content: flex-end; }
}

/* Phones: the menu button, logo, search, language, bell and account all have to fit in one row. With the wordmark that takes about
   470px, so up to 480px (the widest phones) the wordmark gives way to the round G (the link keeps its name for a screen reader);
   up to 420px the gaps and the language buttons get tighter; on the narrowest the G goes too (the home is in the menu). */
@media (max-width: 480px) {
  .top .logo-name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 420px) {
  .top, .right { gap: 6px; }
  .lang button, .lang a, .lang-current { padding: 5px 6px; }
}
/* The login card has room for the whole wordmark down to 360px. */
@media (max-width: 360px) {
  .login-head .logo span { display: none; }
}
@media (max-width: 340px) {
  .top .logo { display: none; }
}