/* LH Media - minimal embedded stylesheet, no framework. */

:root {
  --bg: #f7f7f8;
  --surface: #ffffff;
  --border: #e3e3e7;
  --text: #1c1c20;
  --muted: #6c6c78;
  --accent: #2f5bd7;
  --accent-soft: #eef2fd;
  --ongoing: #0f7a52;
  --ongoing-bg: #e5f5ee;
  --completed: #5a5a68;
  --completed-bg: #eeeef1;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(20, 20, 30, .06), 0 4px 12px rgba(20, 20, 30, .04);
  --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic",
    "Noto Sans KR", "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  background: #ececf0;
  border-radius: 4px;
  padding: .1em .35em;
  font-size: .9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- header ---------- */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
  margin-bottom: 26px;
}

.site-header .wrap {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
}
.brand:hover { text-decoration: none; }

.brand-mark {
  background: var(--accent);
  color: #fff;
  border-radius: 7px;
  padding: 2px 8px;
  font-size: 15px;
  letter-spacing: .02em;
}

/* ---------- sync bar ---------- */

.sync-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.sync-text { color: var(--muted); font-size: 12.5px; }
.sync-in-progress { color: var(--accent); font-weight: 600; }

/* ---------- filters ---------- */

.filters {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}

.search { display: flex; gap: 8px; margin-bottom: 16px; }

.search input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  background: #fcfcfd;
}
.search input:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}

.search button {
  padding: 9px 18px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.search button:hover { background: #2549b4; }

.filter-group {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.filter-group + .filter-group { margin-top: 10px; }

.filter-label {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  min-width: 42px;
}

.chips { display: flex; gap: 7px; flex-wrap: wrap; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fcfcfd;
  color: var(--text);
  font-size: 13px;
}
.chip:hover { border-color: var(--accent); text-decoration: none; }

.chip-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.chip-count { opacity: .7; font-size: 11.5px; }

/* ---------- result bar ---------- */

.result-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 2px 14px;
}

.result-count { margin: 0; color: var(--muted); font-size: 13.5px; }
.reset { font-size: 13px; }

/* ---------- pager ---------- */

.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 22px 2px 4px;
}

.pager-link {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 13.5px;
  text-decoration: none;
}

.pager-link:hover { border-color: var(--accent); color: var(--accent); }

.pager-link.is-disabled {
  color: var(--muted);
  opacity: .5;
  pointer-events: none;
}

.pager-status { color: var(--muted); font-size: 13px; }

/* ---------- grid ---------- */

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .12s ease, border-color .12s ease;
}
.card:hover { transform: translateY(-2px); border-color: #cfd6ea; }

/* .card-hit is the whole-card click target ("stretched link"), stacked above
   the card's static content but below .card-search-btn, so that button gets
   its own independent click without either element nesting inside the
   other (nested <a>s are invalid and behave inconsistently across browsers). */
.card-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 11px;
  height: 100%;
  padding: 16px;
  color: inherit;
}

.card-search-btn {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.card-search-btn:hover { background: #2549b4; text-decoration: none; }

/* The star sits in the card's top-right corner, above .card-hit for the same
   reason .card-search-btn is: it needs its own click, and the whole-card link
   would otherwise swallow it. It is a <form>, not a nested <a>.

   Every rule below is written as ".fav-form .fav-btn" rather than ".fav-btn"
   to outrank the accent-filled button[type="submit"] style further down the
   file, which would otherwise render the star as a solid blue pill — the same
   collision button.link-button and button.admin-icon-btn document. They break
   the tie by source order; a two-class selector wins outright, which lets
   these rules stay next to the card styles they belong with. */
.fav-form { position: absolute; top: 8px; right: 8px; z-index: 2; margin: 0; }

.fav-form .fav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  color: var(--muted);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition: color .12s ease, background .12s ease, border-color .12s ease, transform .12s ease;
}
.fav-form .fav-btn:hover { color: #d9a300; border-color: var(--border); background: #fff; }
.fav-form .fav-btn:active { transform: scale(.92); }
.fav-form .fav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fav-form .fav-btn.fav-on { color: #e8ac00; }

.fav-star { font-size: 18px; line-height: 1; }

/* The detail page's star is a real button in the header row rather than a
   corner overlay, so it carries a border of its own. */
.fav-form-detail { position: static; margin-left: auto; flex-shrink: 0; }

.fav-form .fav-btn-lg {
  width: 42px;
  height: 42px;
  border-color: var(--border);
  background: var(--surface);
}
.fav-form .fav-btn-lg .fav-star { font-size: 23px; }

/* A card unstarred on the 즐겨찾기 grid: still there to undo, visibly no
   longer part of the list. */
.card-dropped { opacity: .45; }
.card-dropped:hover { opacity: .75; }

/* Failure notice from the star's fetch, which has nowhere else to report on
   a grid of cards. */
.fav-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(8px);
  z-index: 20;
  margin: 0;
  max-width: min(92vw, 460px);
  padding: 10px 16px;
  border-radius: 999px;
  background: #24242c;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 6px 20px rgba(20, 20, 30, .25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.fav-toast-on { opacity: 1; transform: translateX(-50%) translateY(0); }

.card-title {
  margin: 0;
  /* Room for the corner star, so a long title never runs under it. */
  padding-right: 34px;
  font-size: 16.5px;
  line-height: 1.35;
  font-weight: 700;
}

.card-subtitle {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

/* ---------- torrent search list ---------- */

.table-scroll {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.torrent-list {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  white-space: nowrap;
}

.torrent-list th, .torrent-list td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.torrent-list thead th {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.torrent-list tbody tr:last-child td { border-bottom: none; }
.torrent-list tbody tr:hover { background: var(--bg); }

.torrent-list .torrent-name {
  white-space: normal;
  min-width: 260px;
  font-weight: 600;
}

.torrent-list .torrent-muted { color: var(--muted); }

.torrent-col-check { width: 1%; }
.torrent-col-actions { width: 1%; text-align: right; }

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  font-size: 15px;
  line-height: 1;
  background: var(--accent-soft);
}
.icon-button:hover { background: #dfe6fb; text-decoration: none; }
.icon-button + .icon-button { margin-left: 4px; }

.card-genres {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}

/* ---------- badges ---------- */

.badges { display: flex; gap: 6px; flex-wrap: wrap; }

.badge {
  display: inline-block;
  padding: 2.5px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.55;
  white-space: nowrap;
}

.badge-platform { background: var(--accent-soft); color: #24408f; }
.badge-disney_plus   { background: #e8effc; color: #10358f; }
.badge-prime_video   { background: #e2f3fb; color: #0a5b76; }
.badge-apple_tv_plus { background: #ededf0; color: #2a2a30; }
.badge-tving         { background: #fdeaf3; color: #a01259; }
.badge-coupang_play  { background: #ffeee6; color: #a3400f; }
.badge-netflix       { background: #fdeaea; color: #a31010; }

.badge-status.badge-ongoing   { background: var(--ongoing-bg); color: var(--ongoing); }
.badge-status.badge-completed { background: var(--completed-bg); color: var(--completed); }
.badge-status.badge-unknown   { background: #f4f4f6; color: var(--muted); }

.badge-age { background: #fff4dc; color: #8a5a00; }

/* ---------- card meta ---------- */

.meta {
  display: flex;
  gap: 18px;
  margin: 0;
  flex-wrap: wrap;
}
.meta > div { display: flex; flex-direction: column; gap: 1px; }
.meta dt { color: var(--muted); font-size: 11.5px; }
.meta dd { margin: 0; font-size: 13.5px; font-weight: 600; }

/* 출연 is a full-width row: a cast list never fits beside the short fields. */
.meta-wide { flex-basis: 100%; min-width: 0; }
.meta-wide dd { font-weight: 500; line-height: 1.45; }

/* Unknown values stay legible but visibly secondary, so an empty field does
   not read as real data. */
.meta-empty { color: var(--muted); font-weight: 400; }

.synopsis {
  margin: 0;
  color: #3c3c46;
  font-size: 13.5px;
  line-height: 1.62;
  flex: 1;
}
.synopsis-empty { color: var(--muted); font-style: italic; }

/* ---------- opinion ---------- */

.opinion {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: auto;
}

.opinion-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.opinion-main { display: flex; align-items: baseline; gap: 8px; }

.score {
  font-size: 19px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -.01em;
}

.opinion-label { font-size: 13.5px; font-weight: 700; }

.opinion-caption {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

/* ---------- empty state ---------- */

.empty {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 52px 24px;
  text-align: center;
}
.empty h2 { margin: 0 0 8px; font-size: 19px; }
.empty p { margin: 6px 0; color: var(--muted); }
.empty-hint {
  max-width: 620px;
  margin: 14px auto 0;
  font-size: 13.5px;
  line-height: 1.7;
}

/* ---------- detail page ---------- */

.breadcrumb { margin-bottom: 14px; font-size: 13.5px; }

.detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
}

.detail > section + section {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.detail-head-row { display: flex; align-items: flex-start; gap: 14px; }
.detail-head-title { min-width: 0; }
.detail-head h1 { margin: 0; font-size: 25px; line-height: 1.3; }
.detail-subtitle { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.detail-head .badges { margin-top: 13px; }

.detail h2 {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .02em;
}

.detail-opinion {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.opinion-big { display: flex; align-items: center; gap: 16px; }

.score-big {
  font-size: 40px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -.02em;
}

.opinion-label-big { margin: 0; font-size: 17px; font-weight: 700; }

.disclaimer {
  margin: 14px 0 0;
  padding: 11px 13px;
  background: #fafafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.65;
}

.facts {
  display: grid;
  gap: 14px 22px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: 0;
}
.facts > div { display: flex; flex-direction: column; gap: 2px; }
.facts dt { color: var(--muted); font-size: 12px; }
.facts dd { margin: 0; font-size: 15px; font-weight: 600; }

.detail-synopsis p { margin: 0; line-height: 1.8; }

.platform-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.platform-list li { display: flex; align-items: center; gap: 10px; }
.platform-url { font-size: 12.5px; }

.detail-source p { margin: 0; color: #3c3c46; font-size: 13.5px; line-height: 1.75; }
.timestamps { margin-top: 9px !important; color: var(--muted); font-size: 12px; }

/* ---------- nav / buttons ---------- */

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 13.5px; flex-wrap: wrap; }
.site-nav a { color: var(--muted); font-weight: 600; }
.site-nav a:hover { color: var(--accent); text-decoration: none; }
.site-nav a.nav-active { color: var(--accent); }
.logout-form { display: inline; }
.logout-form .link-button { font-weight: 600; }

/* ---------- login page ---------- */

.login-wrap { max-width: 380px; margin: 64px auto; }
.login-wrap .form-card h1 { text-align: center; }
.login-wrap .form-actions { justify-content: center; }
.login-wrap button[type="submit"] { width: 100%; justify-content: center; }

.button, .button-secondary, button[type="submit"] {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.button:hover, button[type="submit"]:hover { background: #2549b4; text-decoration: none; }

.button-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.button-secondary:hover { border-color: var(--accent); text-decoration: none; }

/* button.link-button (not just .link-button) matches button[type="submit"]'s
   specificity so this override actually wins instead of the accent-filled
   submit-button style, which otherwise renders these as oversized pills that
   throw off the row's alignment next to plain text links. */
button.link-button {
  display: inline;
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
button.link-button:hover { text-decoration: underline; }

.muted { color: var(--muted); }

/* ---------- admin: crawl sites ---------- */

.admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.admin-head h1 { margin: 0; font-size: 21px; }

.admin-hint {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.admin-table th, .admin-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  vertical-align: middle;
}
.admin-table th { color: var(--muted); font-weight: 600; font-size: 12px; }
.admin-table tr:last-child td { border-bottom: 0; }

/* .admin-actions wraps a <td>'s content in a <div> rather than living on the
   <td> itself — display:flex directly on a table-cell breaks some browsers'
   row layout (the cell's content detaches from the row grid), which is what
   caused buttons to drop onto their own line instead of sitting inline. */
.admin-actions { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.admin-actions form { display: inline-flex; }

/* Named admin-icon-btn rather than reusing the existing .icon-button (used
   by the torrent search page's magnet/link icons, styled quite differently)
   to avoid a class-name collision between the two. a.admin-icon-btn,
   button.admin-icon-btn (not just .admin-icon-btn) so the button variant's
   specificity ties button[type="submit"] above and wins by source order —
   see the button.link-button comment above for why this matters. */
a.admin-icon-btn, button.admin-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  padding: 0;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
}
a.admin-icon-btn:hover, button.admin-icon-btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.admin-icon-btn-on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
button.admin-icon-btn-danger:hover, a.admin-icon-btn-danger:hover { border-color: #c0392b; color: #c0392b; }

.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
  max-width: 560px;
}
.form-card h1 { margin: 0 0 18px; font-size: 20px; }

.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.field input[type="text"],
.field input[type="password"] {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  background: #fcfcfd;
}
.field input[type="text"]:focus,
.field input[type="password"]:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}
.field-checkbox label { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.field-error { margin: 6px 0 0; color: #b3261e; font-size: 12.5px; }

.form-actions { display: flex; gap: 10px; margin-top: 22px; }

/* ---------- detail: site search ---------- */

.detail-search h2 { margin-bottom: 14px; }
/* Flex, not grid: a single-column grid stretches each item to the column's
   full width, which turned these into page-wide bars. The buttons are
   inline-flex, so a flex row leaves each one exactly as wide as its label and
   wraps to the next line when the row fills. */
.search-site-list { display: flex; flex-wrap: wrap; gap: 10px; }
.search-site-row { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.search-site-row:last-child { border-bottom: 0; padding-bottom: 0; }
.search-status { margin-left: 10px; color: var(--muted); font-size: 13px; }
.search-results-single { margin-top: 10px; }
.search-result-list { margin: 0; padding-left: 20px; }
.search-result-list li { margin-bottom: 4px; font-size: 13.5px; }
.search-error { margin: 0; color: #b3261e; font-size: 13px; }
.search-empty { margin: 10px 0 0; color: var(--muted); font-size: 13px; }

/* ---------- detail: download station ---------- */

.detail-download h2 { margin-bottom: 8px; }
.download-hint { margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.download-form { display: flex; gap: 10px; }
.download-form input[type="text"] {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  background: #fcfcfd;
}
.download-form input[type="text"]:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}
.download-status { margin: 10px 0 0; font-size: 13px; min-height: 1em; }
.download-status.download-ok { color: var(--ongoing); }
.download-status.download-error { color: #b3261e; }

/* ---------- footer ---------- */

.site-footer {
  margin-top: 42px;
  padding: 22px 0 34px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.site-footer p {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.7;
}

/* ---------- narrow screens ---------- */

@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .grid { grid-template-columns: 1fr; }
  .detail { padding: 20px 17px; }
  .detail-head h1 { font-size: 21px; }
  .score-big { font-size: 33px; }
  .filter-label { min-width: 0; }
}

/* ---------- 나무위키 주소로 가져오기 (한국 예능) ---------- */

.import-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.import-title { margin: 0 0 12px; font-size: 15px; }

.import-form { display: flex; flex-wrap: wrap; gap: 8px; }
.import-form input[type="text"] {
  flex: 1;
  min-width: 220px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  background: #fcfcfd;
}
.import-form input[type="text"]:focus,
.import-form select:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}
.import-form select {
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  background: #fcfcfd;
}
.import-form button {
  padding: 9px 18px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.import-form button:hover { background: #2549b4; }

.import-hint { margin: 10px 0 0; color: var(--muted); font-size: 12.5px; }

.import-notice {
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
}
.import-ok { background: var(--ongoing-bg); color: var(--ongoing); }
.import-error { background: #fdecea; color: #b3261e; }

/* ---------- 평점 필터 ---------- */

.chip-toggle { margin-left: 10px; }
.chip-toggle::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--border);
  vertical-align: middle;
}
.chip-toggle.chip-on::before { background: currentColor; }

.filter-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}