/* theme-dark.css - night mode overrides for 11toon.
 * Every rule is scoped to html[data-theme="dark"]; the CDN stylesheets are untouched.
 * Variables live on :root so both modes can read them; only the dark scope uses them. */
:root {
  --night-bg: #121212;
  --night-surface: #1e1e1e;
  --night-surface-2: #262626;
  --night-text: #e6e6e6;
  --night-muted: #a0a0a0;
  --night-border: #2c2c2c;
  --night-link: #8ab4f8;
  --night-accent: #e50020;           /* brand red stays */
  --night-image-brightness: .85;
}

/* ---- toggle button (visible in both modes) ---- */
/* A filled two-tone chip: dark disc with a white moon by day, light disc with a dark sun by night. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: 8px;
  padding: 0;
  border: 1px solid #1c1c1c;
  border-radius: 50%;
  background: linear-gradient(160deg, #3a3a3a, #161616);
  color: #fff;
  cursor: pointer;
  vertical-align: middle;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: transform .15s, box-shadow .15s, background-color .15s;
}
.theme-toggle:hover { transform: translateY(-1px) scale(1.04); box-shadow: 0 4px 10px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12); }
.theme-toggle:active { transform: scale(.96); }
.theme-toggle__icon::before { content: "\263E"; font-size: 17px; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }   /* crescent */
html[data-theme="dark"] .theme-toggle__icon::before { content: "\2600"; text-shadow: none; }                                   /* sun */
html[data-theme="dark"] .theme-toggle {
  background: linear-gradient(160deg, #ffffff, #d8d8d8);
  color: #111;
  border-color: #f4f4f4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.viewer-header__control-item .theme-toggle { width: 36px; height: 36px; margin: 2px 0 0; }
/* Header placement. Two toggles are mounted: one as the last item of the PC menu row (ul.nav-main__list),
 * one inside the search section for phones (section.search lays its children out absolutely, and its
 * search box grows leftwards to 240px on hover, so nothing may sit left of it on PC). */
.theme-toggle-item { padding: 0 12px; vertical-align: top; line-height: 60px; }
.theme-toggle-item .theme-toggle { margin: 0; }
.search .theme-toggle { position: absolute; top: 8px; right: 94px; margin: 0; }
@media (min-width: 768px) {
  .search .theme-toggle { display: none; }
}
@media (max-width: 767px) {
  .theme-toggle-item { display: none; }
}

/* ---- base layer ---- */
html[data-theme="dark"] { color-scheme: dark; background: var(--night-bg); }
html[data-theme="dark"] body { background: var(--night-bg); color: var(--night-text); }
html[data-theme="dark"] a { color: inherit; }
html[data-theme="dark"] hr { border-color: var(--night-border); }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] button:not(.theme-toggle) {
  background-color: var(--night-surface-2);
  color: var(--night-text);
  border-color: var(--night-border);
}
html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td { background-color: var(--night-surface); border-color: var(--night-border); color: var(--night-text); }
html[data-theme="dark"] ::placeholder { color: var(--night-muted); }

/* ---- header and navigation (head.php) ---- */
/* the menu button draws its round face with ::before (light grey-blue by the CDN) */
html[data-theme="dark"] #main-menu-toggle::before { background: var(--night-surface-2) !important; box-shadow: inset 0 0 0 1px var(--night-border); }
html[data-theme="dark"] #main-menu-toggle:hover::before { background: #333 !important; }
html[data-theme="dark"] header,
html[data-theme="dark"] #main-menu-side,
html[data-theme="dark"] .sidenav,
html[data-theme="dark"] .tt-menu { background: var(--night-surface); color: var(--night-text); border-color: var(--night-border); }
html[data-theme="dark"] .tt-input { background: var(--night-surface-2); color: var(--night-text); }
/* search typeahead dropdown (.tt-dataset is painted white by the CDN) */
html[data-theme="dark"] .tt-dataset { background: var(--night-surface) !important; color: var(--night-text); }
html[data-theme="dark"] .tt-suggestion:hover,
html[data-theme="dark"] .tt-cursor { background: var(--night-surface-2) !important; }
html[data-theme="dark"] .comic-artist,
html[data-theme="dark"] .artist-link { color: var(--night-muted) !important; }
/* side menu (drawer behind #main-menu-toggle): the member list block is painted white by the CDN, and the
 * password / nickname / profile-image layers (#divv, #nickupddiv, #divvv, class div1) open inside it */
html[data-theme="dark"] .sidenav-bottom,
html[data-theme="dark"] .sidenav-top,
html[data-theme="dark"] .sidenav .wrap { background: var(--night-surface) !important; color: var(--night-text); }
html[data-theme="dark"] .sidenav-bottom a { color: var(--night-text) !important; border-color: var(--night-border) !important; background: transparent !important; }
html[data-theme="dark"] .sidenav-bottom a:hover { background: var(--night-surface-2) !important; }
html[data-theme="dark"] .sidenav-top,
html[data-theme="dark"] .sidenav-bottom,
html[data-theme="dark"] .sidenav-logintab { border-color: var(--night-border) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, .55); }
html[data-theme="dark"] .div1,
html[data-theme="dark"] .nonediv1,
html[data-theme="dark"] #divv,
html[data-theme="dark"] #nickupddiv,
html[data-theme="dark"] #divvv { background: var(--night-surface-2) !important; color: var(--night-text) !important; border-color: var(--night-border) !important; }
html[data-theme="dark"] .div1 td,
html[data-theme="dark"] .div1 th,
html[data-theme="dark"] .div1 label,
html[data-theme="dark"] .div1 p,
html[data-theme="dark"] .div1 span { background: transparent !important; color: var(--night-text) !important; }
html[data-theme="dark"] .div1 input,
html[data-theme="dark"] .div1 button { background: var(--night-surface) !important; color: var(--night-text) !important; border: 1px solid var(--night-border) !important; }
/* raised, rounded dialog look for the three member layers */
html[data-theme="dark"] #divv,
html[data-theme="dark"] #nickupddiv,
html[data-theme="dark"] #divvv {
  border-radius: 12px;
  border: 1px solid #3a3a3a !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .75), 0 2px 6px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
  background: linear-gradient(180deg, #2c2c2c 0%, var(--night-surface-2) 100%) !important;
  overflow: hidden;
}
html[data-theme="dark"] .div1 input[type="text"],
html[data-theme="dark"] .div1 input[type="password"],
html[data-theme="dark"] .div1 input[type="file"] { border-radius: 6px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5) !important; }
html[data-theme="dark"] .div1 button {
  border-radius: 6px;
  background: linear-gradient(180deg, #3a3a3a, #2a2a2a) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}
html[data-theme="dark"] .div1 button:hover { background: linear-gradient(180deg, #454545, #333) !important; }
html[data-theme="dark"] .div1 button:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0, 0, 0, .5) !important; }
/* side menu login panel */
html[data-theme="dark"] .sidenav-logintab,
html[data-theme="dark"] .login-info { background: var(--night-surface) !important; color: var(--night-text); border-color: var(--night-border); }
html[data-theme="dark"] .login-label { color: var(--night-muted) !important; }
/* Gnuboard login and register forms */
html[data-theme="dark"] #mb_login,
html[data-theme="dark"] #login_fs,
html[data-theme="dark"] .login_if_auto,
html[data-theme="dark"] #register_form,
html[data-theme="dark"] #fregisterform,
html[data-theme="dark"] .register_form_inner,
html[data-theme="dark"] #fregister_private,
html[data-theme="dark"] #fregister_stipulation { background: var(--night-surface) !important; color: var(--night-text) !important; border-color: var(--night-border) !important; }
html[data-theme="dark"] #login_info { background: var(--night-surface-2) !important; color: var(--night-text) !important; }

/* ---- home sections: one rounded card per section, cover frames removed, controls readable ---- */
html[data-theme="dark"] .curationHot__heading { border-bottom-color: transparent !important; border-radius: 10px 10px 0 0; }
html[data-theme="dark"] .curationHot__list { border-top-color: transparent !important; border-radius: 0 0 10px 10px; }
html[data-theme="dark"] .curationHot__img { border-color: transparent !important; border-radius: 6px; overflow: hidden; }
html[data-theme="dark"] .top5__col { border-radius: 10px; overflow: hidden; }
html[data-theme="dark"] .seeAll:hover,
html[data-theme="dark"] .seeAll:focus { background: var(--night-surface-2) !important; color: var(--night-text) !important; border-color: #3a3a3a !important; }
html[data-theme="dark"] .paging-nav button,
html[data-theme="dark"] .prev-page,
html[data-theme="dark"] .next-page { background: var(--night-surface-2) !important; border-color: var(--night-border) !important; }
html[data-theme="dark"] .prev-page::before,
html[data-theme="dark"] .next-page::before { border-color: var(--night-text) !important; }
html[data-theme="dark"] .prev-page:disabled::before,
html[data-theme="dark"] .next-page:disabled::before,
html[data-theme="dark"] .prev-page.is-disabled::before,
html[data-theme="dark"] .next-page.is-disabled::before { border-color: #555 !important; }
html[data-theme="dark"] .prev-page:hover,
html[data-theme="dark"] .next-page:hover { background: #333 !important; }

/* ---- home, lists, work page (home.css and comic.css hardcode white) ---- */
html[data-theme="dark"] body.home { background: var(--night-bg); }
html[data-theme="dark"] .main,
html[data-theme="dark"] main,
html[data-theme="dark"] .section,
html[data-theme="dark"] .card,
html[data-theme="dark"] .box,
html[data-theme="dark"] .list-wrap,
html[data-theme="dark"] .comic-list,
html[data-theme="dark"] .episode-list { background: var(--night-surface); color: var(--night-text); border-color: var(--night-border); }

/* Page-layer rules found by the Chrome surface and contrast scans on 2026-10-24 (home, list, work page).
 * CDN rules such as `.a .b .c` outrank a two-class selector, so surfaces and text here use !important. */
html[data-theme="dark"] input#search-main { background: var(--night-surface-2); color: var(--night-text); border-color: var(--night-border) !important; }
html[data-theme="dark"] .curationHot__heading,
html[data-theme="dark"] .curationHot__list,
html[data-theme="dark"] .top5__colHeading,
html[data-theme="dark"] .cover-info-wrap { background: var(--night-surface) !important; color: var(--night-text); border-color: var(--night-border); }
html[data-theme="dark"] .btn-subscription { background: var(--night-surface-2) !important; color: var(--night-text) !important; }
/* headings and primary text the CDN paints #000 or #333 */
html[data-theme="dark"] .curationHot__headingText,
html[data-theme="dark"] .top5__ranking,
html[data-theme="dark"] .collection-copy,
html[data-theme="dark"] .homelist-title,
html[data-theme="dark"] .homelist-title span,
html[data-theme="dark"] .cover-info-wrap h2.title,
html[data-theme="dark"] #schedule,
html[data-theme="dark"] .free-date { color: var(--night-text) !important; }
/* secondary text the CDN paints #666 */
html[data-theme="dark"] .curationHot__headingDesc,
html[data-theme="dark"] .top5__title,
html[data-theme="dark"] .genre-subtitle,
html[data-theme="dark"] .genre-link,
html[data-theme="dark"] .episode-title { color: var(--night-muted) !important; }
/* Gnuboard pagination */
html[data-theme="dark"] .pg_wrap,
html[data-theme="dark"] .pg_page,
html[data-theme="dark"] .pg_current { background: var(--night-surface-2) !important; color: var(--night-text) !important; border-color: var(--night-border) !important; }

/* ---- ranking lists (인기만화, 완결만화: ul.homelist.is-rank, cards are white <a> inside li.is-card) ---- */
html[data-theme="dark"] .homelist .is-card > a,
html[data-theme="dark"] .homelist.is-rank li > a { background: var(--night-surface) !important; color: var(--night-text) !important; border-color: var(--night-border) !important; }
/* the card frame is drawn by a::before with a 1px light border */
html[data-theme="dark"] .homelist .is-card > a::before,
html[data-theme="dark"] .homelist.is-rank li > a::before { border-color: var(--night-border) !important; }
html[data-theme="dark"] .homelist-title,
html[data-theme="dark"] .homelist-title span { color: var(--night-text) !important; }
html[data-theme="dark"] .homelist-genre { color: var(--night-muted) !important; }
/* .homelist-thumb carries its cover as an inline background shorthand: override only the colour, never the image */
html[data-theme="dark"] .homelist-thumb { background-color: var(--night-surface-2) !important; }
html[data-theme="dark"] .homelist-ranking { border-color: var(--night-surface) !important; }
html[data-theme="dark"] .buttonover { background: var(--night-surface-2) !important; color: var(--night-text) !important; border-color: var(--night-border) !important; }
/* genre tabs: PC rows and the phone side column share .tabs; the selected tab (.is-on) becomes a red chevron */
html[data-theme="dark"] .tabs,
html[data-theme="dark"] .homelist-category { border-color: var(--night-border) !important; }
html[data-theme="dark"] .tabs .tab,
html[data-theme="dark"] .tabs__row .tab { background: var(--night-surface-2) !important; color: var(--night-text) !important; border-color: var(--night-border) !important; transition: background-color .15s, color .15s; }
html[data-theme="dark"] .tabs .tab:hover { background: #333 !important; }
html[data-theme="dark"] .tabs .tab.is-on {
  background: linear-gradient(135deg, #ff2a47 0%, #c20019 100%) !important; color: #fff !important; font-weight: 700 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 4px 12px rgba(229, 0, 32, .35);
}
html[data-theme="dark"] .homelist.is-rank { background: var(--night-bg) !important; }
html[data-theme="dark"] .homelist.is-rank li { border-color: var(--night-border) !important; }
html[data-theme="dark"] .homelist-ranking { color: rgba(255, 255, 255, .88) !important; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
@media (max-width: 767px) {
  /* the phone column: sharp 2px divider, selected tab cut as an arrow pointing into the list, red rank for #1 */
  html[data-theme="dark"] .homelist-category.tabs { border-right: 2px solid #2c2c2c !important; }
  /* five-syllable genre names (러브코미디) are 76px wide at 15px in a 72px column, so the selected tab drops to 14px */
  html[data-theme="dark"] .tabs .tab.is-on { position: relative; overflow: visible; box-shadow: none; font-weight: 500 !important; font-size: 14px !important; letter-spacing: -.03em; padding-left: 2px !important; padding-right: 2px !important; }
  /* the column scrolls (overflow:auto), so the arrow must stay inside the tab box: a notch on its right edge */
  html[data-theme="dark"] .tabs .tab.is-on::after {
    content: ""; position: absolute; right: 0; top: 50%; margin-top: -7px; z-index: 2;
    border-right: 7px solid var(--night-bg); border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  }
  html[data-theme="dark"] .tabs .tab.is-on::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #fff; opacity: .9;
  }
  html[data-theme="dark"] .homelist.is-rank li:first-child .homelist-ranking { color: #ff3b57 !important; font-weight: 400 !important; }
}

/* ---- member library (bbs/library.php, bbs/library_new.php): the tab bar is painted white by the CDN ---- */
html[data-theme="dark"] #library-tabs,
html[data-theme="dark"] .library-tabs__wrap { background: var(--night-surface) !important; border-color: var(--night-border) !important; }
html[data-theme="dark"] .library-tabs__tab { color: var(--night-muted) !important; background: transparent !important; }
html[data-theme="dark"] .library-tabs__tab.is-on { color: var(--night-text) !important; background: var(--night-surface-2) !important; border-color: var(--night-border) !important; }

/* ---- work page episode list (#comic-episode-list): each episode becomes a raised card with a red hover bar ---- */
html[data-theme="dark"] .episode-list { border-color: transparent !important; background: transparent !important; }
html[data-theme="dark"] .episode-list > li { margin-bottom: 10px; border: 0 !important; }
html[data-theme="dark"] .episode-list .episode {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #282828 0%, #1f1f1f 100%) !important;
  border: 1px solid #303030 !important; border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
html[data-theme="dark"] .episode-list .episode::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--night-accent); opacity: 0; transition: opacity .15s;
}
html[data-theme="dark"] .episode-list .episode:hover { transform: translateY(-2px); border-color: #444 !important; box-shadow: 0 10px 24px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06); }
html[data-theme="dark"] .episode-list .episode:hover::before { opacity: 1; }
html[data-theme="dark"] .episode-banner { border: 0 !important; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, .55); }
html[data-theme="dark"] .episode-list .episode-title { color: var(--night-text) !important; font-weight: 600; letter-spacing: .01em; }
html[data-theme="dark"] .episode-list .free-date { color: var(--night-muted) !important; }
html[data-theme="dark"] .episode-list .free-date font { color: #ff5c6e !important; }
/* round 17: .list_hit (hit count) draws the CDN coin icon as a left background image on a 15px strip. At night it becomes
 * a padded, hairline-bordered pill with its own eye glyph for "views"; the pill grows the absolutely placed
 * .episode-price by a few pixels, which the card has room for */
html[data-theme="dark"] .episode-list .list_hit {
  display: inline-block !important; box-sizing: border-box; height: auto !important; line-height: 14px !important; font-size: 12px !important;
  padding: 4px 10px 4px 27px !important; border-radius: 999px; white-space: nowrap; letter-spacing: .01em;
  color: #b8b8b8 !important; background-color: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(255, 255, 255, .08);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a8a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important; background-size: 13px 13px !important; background-position: 9px 50% !important; background-repeat: no-repeat !important;
}
@media (max-width: 767px) {
  html[data-theme="dark"] .episode-list .episode { border-radius: 10px !important; }
  html[data-theme="dark"] .episode-banner { border-radius: 10px 10px 0 0; box-shadow: none; }
}

/* ---- home comic cards (.curationHot__item): covers get a glossy overlay, depth shadow and a 3D lift on hover;
 * top-5 panels (.top5__col) get a gradient scrim, zooming covers and gradient rank numerals ---- */
html[data-theme="dark"] .curationHot__link { display: block; position: relative; border-radius: 12px; }
html[data-theme="dark"] .curationHot__img {
  position: relative; border-radius: 10px !important; overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease;
  will-change: transform;
}
html[data-theme="dark"] .curationHot__img::after {
  content: ""; position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .45) 100%);
}
html[data-theme="dark"] .curationHot__link:hover .curationHot__img,
html[data-theme="dark"] .curationHot__link:focus .curationHot__img {
  transform: perspective(900px) rotateX(3deg) translateY(-8px) scale(1.025);
  box-shadow: 0 22px 40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(229, 0, 32, .45), 0 0 24px rgba(229, 0, 32, .18);
}
html[data-theme="dark"] .curationHot__title { transition: color .2s; }
html[data-theme="dark"] .curationHot__link:hover .curationHot__title { color: #fff !important; }
html[data-theme="dark"] .top5__col {
  border: 1px solid #2e2e2e !important; border-radius: 12px; overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .04);
  background: linear-gradient(180deg, #242424, #1a1a1a) !important;
}
html[data-theme="dark"] .top5__item { overflow: hidden; border-color: #2a2a2a !important; }
html[data-theme="dark"] .top5__img { transition: transform .35s ease, filter .35s ease; will-change: transform; }
html[data-theme="dark"] .top5__img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .78) 100%);
}
html[data-theme="dark"] .top5__item:hover .top5__img { transform: scale(1.06); filter: brightness(1.08); }
html[data-theme="dark"] .top5__ranking {
  font-weight: 800 !important; font-size: 34px !important; letter-spacing: -.02em; line-height: 1;
  /* background-image, never the shorthand: the shorthand would reset background-clip and paint a solid block */
  background-color: transparent !important; background-image: linear-gradient(180deg, #ffffff 0%, #9a9a9a 100%) !important;
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent; border-color: transparent !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .7));
}
html[data-theme="dark"] .top5__item:first-child .top5__ranking { background-image: linear-gradient(180deg, #ff6b7d 0%, #d0001b 100%) !important; }
html[data-theme="dark"] .top5__title { color: #fff !important; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
html[data-theme="dark"] .top5__genre,
html[data-theme="dark"] .top5__author,
html[data-theme="dark"] .top5 .genre-link,
html[data-theme="dark"] .top5 .artist-link { color: rgba(255, 255, 255, .72) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
@media (max-width: 767px) {
  html[data-theme="dark"] .curationHot__img { box-shadow: 0 6px 14px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .04); border-radius: 8px !important; }
  html[data-theme="dark"] .curationHot__img::after { border-radius: 8px; }
  html[data-theme="dark"] .top5__img { border-radius: 8px; overflow: hidden; box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
  html[data-theme="dark"] .top5__img::after { display: none; }
  html[data-theme="dark"] .top5__title { text-shadow: none; }
}

/* ---- light 1px borders the CDN draws around thumbnails and grid cells (looked like white frames at night) ---- */
html[data-theme="dark"] img,
html[data-theme="dark"] .curationHot__img,
html[data-theme="dark"] .top5__col,
html[data-theme="dark"] .top5__item,
html[data-theme="dark"] .top5__link,
html[data-theme="dark"] .top5__img,
html[data-theme="dark"] .top5__ranking,
html[data-theme="dark"] .seeAll,
html[data-theme="dark"] .shortcut,
html[data-theme="dark"] .homelist-thumb,
html[data-theme="dark"] .episode-list li,
html[data-theme="dark"] .episode-main li { border-color: var(--night-border) !important; }

/* ---- mobile templates (theme/basic/mobile, found by tests/e2e/theme-scan.mjs --ua=mobile on 2026-10-24) ---- */
html[data-theme="dark"] #nav-main,
html[data-theme="dark"] .comicSection,
html[data-theme="dark"] .info,
html[data-theme="dark"] #episode-side,
html[data-theme="dark"] .episode-main,
html[data-theme="dark"] #main-footer { background: var(--night-surface) !important; color: var(--night-text); border-color: var(--night-border); }
html[data-theme="dark"] .nav-main__link { color: var(--night-text) !important; }
html[data-theme="dark"] .comicSection__heading,
html[data-theme="dark"] .seeAll { color: var(--night-text) !important; }
html[data-theme="dark"] .list_hit,
html[data-theme="dark"] #main-footer a,
html[data-theme="dark"] #main-footer p { color: var(--night-muted) !important; }

/* ---- Gnuboard board skins: community list, view, write, search (found on bo_table=comm) ---- */
html[data-theme="dark"] #bo_list_total,
html[data-theme="dark"] #bo_cate,
html[data-theme="dark"] #bo_cate ul,
html[data-theme="dark"] #bo_cate_ul,
html[data-theme="dark"] #bo_sch,
html[data-theme="dark"] #bo_sch fieldset,
html[data-theme="dark"] .bo_fx,
html[data-theme="dark"] .tbl_head01,
html[data-theme="dark"] .tbl_wrap,
html[data-theme="dark"] #bo_v,
html[data-theme="dark"] #bo_v_atc,
html[data-theme="dark"] #bo_v_con,
html[data-theme="dark"] #bo_v_info,
html[data-theme="dark"] #bo_v_top,
html[data-theme="dark"] #bo_v_bot,
html[data-theme="dark"] #bo_vc,
html[data-theme="dark"] #bo_vc article,
html[data-theme="dark"] #bo_vc_w,
html[data-theme="dark"] #bo_w,
html[data-theme="dark"] .write_div,
html[data-theme="dark"] .frm_input,
html[data-theme="dark"] .media-user { background: var(--night-surface) !important; color: var(--night-text) !important; border-color: var(--night-border) !important; }
html[data-theme="dark"] .tbl_head01 th,
html[data-theme="dark"] .tbl_head01 td,
html[data-theme="dark"] .tbl_head01 .bo_notice td,
html[data-theme="dark"] .td_subject,
html[data-theme="dark"] .td_num,
html[data-theme="dark"] .td_num2,
html[data-theme="dark"] .td_name,
html[data-theme="dark"] .td_datetime { background: var(--night-surface) !important; color: var(--night-text) !important; border-color: var(--night-border) !important; }
html[data-theme="dark"] .tbl_head01 tr:hover td { background: var(--night-surface-2) !important; }
html[data-theme="dark"] #bo_cate_ul a,
html[data-theme="dark"] .bo_cate_link,
html[data-theme="dark"] .td_subject a,
html[data-theme="dark"] .tbl_head01 th a { color: var(--night-text) !important; }
html[data-theme="dark"] #bo_cate_ul .bo_cate_on,
html[data-theme="dark"] #bo_cate_on { background: var(--night-accent) !important; color: #fff !important; }
/* category pills: the CDN paints a light grey hover face */
html[data-theme="dark"] #bo_cate_ul a { transition: background-color .15s, border-color .15s; }
html[data-theme="dark"] #bo_cate_ul a:hover,
html[data-theme="dark"] #bo_cate_ul a:focus { background: var(--night-surface-2) !important; color: var(--night-text) !important; border-color: #3a3a3a !important; }
html[data-theme="dark"] #bo_cate_ul #bo_cate_on:hover { background: #ff1a3a !important; }

/* ---- viewer (viewer.css) ---- */
html[data-theme="dark"] body.is-comic { background: var(--night-bg); }
html[data-theme="dark"] .viewer-header,
html[data-theme="dark"] #viewer-header-wrapper,
html[data-theme="dark"] #episode-nav,
html[data-theme="dark"] .viewer-footer { background: var(--night-surface); color: var(--night-text); border-color: var(--night-border); }
html[data-theme="dark"] .viewer-header__title { color: var(--night-text); }
html[data-theme="dark"] #contents-wrapper,
html[data-theme="dark"] .mm { background: var(--night-bg); color: var(--night-text); }
/* ---- viewer comments (#bo_vc list, #bo_vc_w form): comment bubbles as soft cards, red submit ---- */
html[data-theme="dark"] #bo_vc article { padding: 12px 0 16px; border-bottom: 1px solid var(--night-border); }
html[data-theme="dark"] #bo_vc article:last-child { border-bottom: 0; }
html[data-theme="dark"] .cmt_contents {
  background: var(--night-surface-2) !important; color: var(--night-text) !important;
  border: 1px solid #343434 !important; border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 2px 8px rgba(0, 0, 0, .35);
}
html[data-theme="dark"] #bo_vc .member { color: var(--night-text) !important; font-weight: 600; }
html[data-theme="dark"] #bo_vc .bo_vc_hdinfo,
html[data-theme="dark"] #bo_vc time { color: var(--night-muted) !important; }
html[data-theme="dark"] #bo_vc_w { background: var(--night-surface) !important; border-top: 1px solid var(--night-border); }
html[data-theme="dark"] #wr_content {
  background: var(--night-surface-2) !important; color: var(--night-text) !important;
  border: 1px solid #343434 !important; border-radius: 12px !important; padding: 12px !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45); transition: border-color .15s;
}
html[data-theme="dark"] #wr_content:focus { border-color: var(--night-accent) !important; outline: none; }
html[data-theme="dark"] #btn_submit {
  background: var(--night-accent) !important; color: #fff !important; border: 0 !important; border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(229, 0, 32, .35); transition: background-color .15s, transform .1s;
}
html[data-theme="dark"] #btn_submit:hover { background: #ff1a3a !important; transform: translateY(-1px); }

/* Phone layout fix for BOTH modes (user request 2026-10-25): the comment block sits in an inline-styled
 * wrapper (width:80%; margin:0 auto), which leaves 39px of dead space on each side of a 390px screen. */
@media (max-width: 767px) {
  #contents-wrapper > div:has(> #bo_vc) { width: calc(100% - 24px) !important; }
}

/* ---- viewer episode picker: #sList is a Bootstrap modal opened by the 회차선택 button ---- */
html[data-theme="dark"] .modal-content {
  background: linear-gradient(180deg, #272727 0%, #1a1a1a 100%) !important; color: var(--night-text) !important;
  border: 1px solid #3a3a3a !important; border-radius: 14px !important; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}
html[data-theme="dark"] .modal-header { border-bottom: 1px solid #333 !important; background: rgba(255, 255, 255, .03); }
html[data-theme="dark"] .modal-title { color: var(--night-text) !important; letter-spacing: .02em; }
html[data-theme="dark"] .modal-header .close { color: #fff !important; opacity: .6; text-shadow: none; }
html[data-theme="dark"] .modal-header .close:hover { opacity: 1; }
html[data-theme="dark"] .modal-footer { border-top: 1px solid #333 !important; }
html[data-theme="dark"] .modal .btn {
  background: #2e2e2e !important; color: var(--night-text) !important; border: 1px solid #3f3f3f !important;
  border-radius: 8px !important; box-shadow: 0 2px 4px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: background-color .15s, border-color .15s, transform .1s;
}
html[data-theme="dark"] .modal .btn:hover,
html[data-theme="dark"] .modal .btn:focus { background: var(--night-accent) !important; border-color: var(--night-accent) !important; color: #fff !important; transform: translateY(-1px); }
html[data-theme="dark"] .modal .btn.active,
html[data-theme="dark"] .modal .btn.on,
html[data-theme="dark"] .toonslist li.on .btn { background: var(--night-accent) !important; border-color: var(--night-accent) !important; color: #fff !important; }
html[data-theme="dark"] .modal-backdrop.in { opacity: .7 !important; }

/* ---- viewer header icons: the episode-list glyph left of the title and the fullscreen button are both
 * dark sprites from viewer-header.png; drop them and draw light glyphs that turn brand red on hover ---- */
html[data-theme="dark"] .viewer-header__episode-link { background-image: none !important; position: relative; }
html[data-theme="dark"] .viewer-header__episode-link::before {
  content: ""; position: absolute; left: 20px; top: 50%; width: 22px; height: 2px; margin-top: -1px;
  background: var(--night-text); border-radius: 2px;
  box-shadow: 0 -7px 0 var(--night-text), 0 7px 0 var(--night-text);
  transition: background-color .15s, box-shadow .15s;
}
html[data-theme="dark"] .viewer-header__episode-link:hover::before { background: var(--night-accent); box-shadow: 0 -7px 0 var(--night-accent), 0 7px 0 var(--night-accent); }
html[data-theme="dark"] #fullscreenBtn { background-image: none !important; background-color: transparent !important; position: relative; }
html[data-theme="dark"] #fullscreenBtn::before,
html[data-theme="dark"] #fullscreenBtn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; transition: border-color .15s; }
html[data-theme="dark"] #fullscreenBtn::before { margin: -10px 0 0 -10px; border-top: 2px solid var(--night-text); border-left: 2px solid var(--night-text); }
html[data-theme="dark"] #fullscreenBtn::after { margin: 0; border-bottom: 2px solid var(--night-text); border-right: 2px solid var(--night-text); }
html[data-theme="dark"] #fullscreenBtn:hover { background-color: #2a2a2a !important; }
html[data-theme="dark"] #fullscreenBtn:hover::before,
html[data-theme="dark"] #fullscreenBtn:hover::after { border-color: var(--night-accent); }
/* phone viewer header: the title starts only 40px into the link, so the three-bar glyph shrinks to fit that gap
 * (this block must stay below the base rules above: same specificity, later wins) */
@media (max-width: 767px) {
  html[data-theme="dark"] .viewer-header__episode-link::before { left: 11px; width: 16px; box-shadow: 0 -6px 0 var(--night-text), 0 6px 0 var(--night-text); }
  html[data-theme="dark"] .viewer-header__episode-link:hover::before { box-shadow: 0 -6px 0 var(--night-accent), 0 6px 0 var(--night-accent); }
}

/* Viewer footer: the prev/next buttons carry a dark icon sprite (viewer-footer-desktop.png) that vanishes on a
 * dark face, so the sprite is dropped and a light circled chevron is drawn with ::before/::after instead. */
html[data-theme="dark"] #episode-nav .left-episode,
html[data-theme="dark"] #episode-nav .right-episode { background-image: none !important; background-color: transparent !important; position: relative; }
html[data-theme="dark"] #episode-nav .left-episode::before,
html[data-theme="dark"] #episode-nav .right-episode::before {
  content: ""; position: absolute; top: 50%; width: 30px; height: 30px; margin-top: -15px; box-sizing: border-box;
  border-radius: 50%; border: 1px solid #5a5a5a; background: var(--night-surface-2);
}
html[data-theme="dark"] #episode-nav .left-episode::after,
html[data-theme="dark"] #episode-nav .right-episode::after {
  content: ""; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border-left: 2px solid var(--night-text); border-bottom: 2px solid var(--night-text);
}
html[data-theme="dark"] #episode-nav .left-episode::before { left: 15px; }
html[data-theme="dark"] #episode-nav .left-episode::after { left: 28px; transform: rotate(45deg); }
html[data-theme="dark"] #episode-nav .right-episode::before { right: 15px; }
html[data-theme="dark"] #episode-nav .right-episode::after { right: 28px; transform: rotate(-135deg); }
html[data-theme="dark"] #episode-nav button:hover::before { background: #3a3a3a; border-color: #777; }
html[data-theme="dark"] #episode-nav button:disabled { color: #666 !important; }
html[data-theme="dark"] #episode-nav button:disabled::after { border-color: #555; }
html[data-theme="dark"] #episode-nav button:disabled::before { border-color: #3a3a3a; background: var(--night-surface); }
/* the episode-list icon between them is a dark PNG served by this site; invert only that one image */
html[data-theme="dark"] #episode-nav img { filter: invert(1) brightness(.9); }

/* Comic pages are dimmed a little. The member viewer draws pages as <canvas> (94 per episode on 2026-10-24),
 * the guest viewer may use <img>; ads (AdSlot grid, top banner, side #adsbig3) are excluded. */
html[data-theme="dark"] #scroll-list canvas,
html[data-theme="dark"] #scroll-list img { filter: brightness(var(--night-image-brightness)); }
html[data-theme="dark"] #scroll-list .adslot img,
html[data-theme="dark"] #scroll-list .mobile-m img,
html[data-theme="dark"] #scroll-list .ad400__100 img,
html[data-theme="dark"] #adsbig3 img,
html[data-theme="dark"] .adslot img { filter: none; }

/* ---- round 13 (2026-10-25): member library (bbs/library_new.php) reading progress and card surface.
 * The template paints the total episode count #000 (invisible at night); scripts/library_progress.py wraps the numbers in
 * .lib-progress with --lib-p. Here the watched count leads, the total is muted, the bar is brand red, cards get the
 * home-page depth treatment and the pager marks the current page. ---- */
html[data-theme="dark"] .library-bookshelf .lib-progress { --lib-fill: #ff3b57; --lib-track: #353535; }
html[data-theme="dark"] .library-bookshelf .lib-progress .lib-read { color: var(--night-text) !important; }
html[data-theme="dark"] .library-bookshelf .lib-progress .lib-sep { color: #5c5c5c !important; }
html[data-theme="dark"] .library-bookshelf .lib-progress .lib-total { color: var(--night-muted) !important; }
html[data-theme="dark"] .library-bookshelf .lib-progress.is-complete .lib-total { color: var(--night-text) !important; }
/* other tabs (구독함) still print the plain spans: never black on dark */
html[data-theme="dark"] .library-bookshelf .color_text { color: var(--night-muted) !important; }
html[data-theme="dark"] .library-bookshelf .homelist-thumb {
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease;
  will-change: transform;
}
html[data-theme="dark"] .library-bookshelf li.product:hover .homelist-thumb {
  transform: perspective(900px) rotateX(3deg) translateY(-6px) scale(1.02);
  box-shadow: 0 22px 40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(229, 0, 32, .45), 0 0 24px rgba(229, 0, 32, .18);
}
html[data-theme="dark"] .library-bookshelf .homelist-title { font-weight: 500; }
html[data-theme="dark"] .library-bookshelf li.product:hover .homelist-title span { color: #fff !important; }
html[data-theme="dark"] .library-bookshelf .pg_current { background: var(--night-accent) !important; border-color: var(--night-accent) !important; color: #fff !important; }
html[data-theme="dark"] .library-editbtns button { border-radius: 6px !important; }
@media (max-width: 767px) {
  html[data-theme="dark"] .library-bookshelf .homelist-thumb { border-radius: 8px; box-shadow: 0 6px 14px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .04); }
  html[data-theme="dark"] .library-bookshelf li.product:hover .homelist-thumb { transform: none; }
}

/* ---- round 14 (2026-10-25): 최신만화 update list. The comment count next to the date is <font color="red">(N)</font>;
 * pure red 13px on dark is hard to read and shouts like an alarm. At night it becomes a soft rose pill with a small
 * speech-bubble glyph, so it reads as "comments" at a glance (same markup on the phone template). ---- */
html[data-theme="dark"] .homelist-genre font[color="red"] {
  display: inline-block; vertical-align: 1px; margin-left: 5px; padding: 0 6px 0 5px;
  border-radius: 9px; font-size: 11px; line-height: 16px;
  color: #ffa1ad !important; background: rgba(255, 59, 87, .12); border: 1px solid rgba(255, 59, 87, .22);
}
html[data-theme="dark"] .homelist-genre font[color="red"]::before {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 3px; vertical-align: -1px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 3.5A1.5 1.5 0 0 1 3.5 2h9A1.5 1.5 0 0 1 14 3.5v6A1.5 1.5 0 0 1 12.5 11H7l-3.4 2.6c-.4.3-1 0-1-.5V11H3.5A1.5 1.5 0 0 1 2 9.5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 3.5A1.5 1.5 0 0 1 3.5 2h9A1.5 1.5 0 0 1 14 3.5v6A1.5 1.5 0 0 1 12.5 11H7l-3.4 2.6c-.4.3-1 0-1-.5V11H3.5A1.5 1.5 0 0 1 2 9.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* long genre lists are ellipsised by the CDN (nowrap + overflow hidden) and used to clip the pill to a fragment: on lines
 * that carry a count, reserve a slot and pin the whole pill to the right end; browsers without :has keep the inline pill */
html[data-theme="dark"] .homelist-genre:has(> span > font[color="red"]) { position: relative; padding-right: 52px !important; }
html[data-theme="dark"] .homelist-genre:has(> span > font[color="red"]) font[color="red"] { position: absolute; right: 0; top: 3px; margin-left: 0; }
/* phone list lines are 17px tall with no padding (PC: 28px with 3px/7px padding): a 16px pill seated at the top fits
 * without being clipped by the line's overflow:hidden */
@media (max-width: 767px) {
  html[data-theme="dark"] .homelist-genre:has(> span > font[color="red"]) font[color="red"] { top: 0; line-height: 14px; }
}

/* ---- round 15 (2026-10-25): genre filter chips on 최신만화 (.genre-tab__btn, multi-select, each click reloads with ?sca=).
 * By day the skin paints the selected chip red (.genre-tab__btn--on); at night the generic button rule above outranked
 * it and every chip looked the same, so clicking seemed to do nothing. Selected = red chip, white text, check glyph. ---- */
html[data-theme="dark"] .genre-tab__btn {
  background-color: var(--night-surface-2) !important; color: var(--night-text) !important; border-color: #3a3a3a !important;
  border-radius: 6px !important; transition: background-color .15s, color .15s, border-color .15s, transform .12s, box-shadow .15s;
}
html[data-theme="dark"] .genre-tab__btn:hover { background-color: #333333 !important; border-color: #4a4a4a !important; color: #ffffff !important; }
html[data-theme="dark"] .genre-tab__btn:active { transform: translateY(1px); }
html[data-theme="dark"] .genre-tab__btn--on,
html[data-theme="dark"] .genre-tab__btn--on:hover {
  background-color: var(--night-accent) !important; border-color: var(--night-accent) !important; color: #ffffff !important;
  font-weight: 600 !important; box-shadow: 0 4px 14px rgba(229, 0, 32, .35);
}
html[data-theme="dark"] .genre-tab__btn--on::before {
  content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 5px; vertical-align: -1px;
  background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- round 16 (2026-10-25): list pages get the home-page depth treatment.
 * Cover lists (최신만화: ul.homelist.is-cover, bare 180x240 covers): rounded cover with depth shadow, a top highlight and
 * bottom vignette drawn as inset shadows (no pseudo-elements: the CDN uses them for badges), 3D lift with a red halo on
 * hover, title to white. The member library has its own block above and is excluded here.
 * Ranking cards (인기/완결/매일 추천: ul.homelist.is-rank li.is-card > a): the flat surface becomes a rounded gradient
 * card with depth, the cover zooms inside it, the rank badge glows. Phones: softer, no hover motion. ---- */
html[data-theme="dark"] .homelist.is-cover:not(.is-library) .homelist-thumb {
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04),
              inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 -46px 46px -36px rgba(0, 0, 0, .6);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease;
}
html[data-theme="dark"] .homelist.is-cover:not(.is-library) li:hover .homelist-thumb,
html[data-theme="dark"] .homelist.is-cover:not(.is-library) li:focus-within .homelist-thumb {
  transform: perspective(900px) rotateX(3deg) translateY(-7px) scale(1.025);
  box-shadow: 0 22px 40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(229, 0, 32, .45), 0 0 24px rgba(229, 0, 32, .18),
              inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -46px 46px -36px rgba(0, 0, 0, .5);
}
html[data-theme="dark"] .homelist.is-cover:not(.is-library) .homelist-title span { transition: color .2s; }
html[data-theme="dark"] .homelist.is-cover:not(.is-library) li:hover .homelist-title span { color: #ffffff !important; }

html[data-theme="dark"] .homelist.is-rank li > a {
  background: linear-gradient(180deg, #252525 0%, #1a1a1a 100%) !important;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}
html[data-theme="dark"] .homelist.is-rank li > a::before { border-radius: 12px; border-color: rgba(255, 255, 255, .06) !important; }
html[data-theme="dark"] .homelist.is-rank li > a:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .65), 0 0 0 1px rgba(229, 0, 32, .4), 0 0 22px rgba(229, 0, 32, .16), inset 0 1px 0 rgba(255, 255, 255, .06);
}
html[data-theme="dark"] .homelist.is-rank .homelist-thumb {
  overflow: hidden;
  box-shadow: inset 0 -52px 52px -40px rgba(0, 0, 0, .6);
  transition: transform .35s ease, filter .35s ease;
}
html[data-theme="dark"] .homelist.is-rank li > a:hover .homelist-thumb { transform: scale(1.04); filter: brightness(1.06); }
html[data-theme="dark"] .homelist.is-rank li > a:hover .homelist-title span { color: #ffffff !important; }
html[data-theme="dark"] .homelist.is-rank .homelist-ranking { box-shadow: 0 4px 12px rgba(229, 0, 32, .45), inset 0 1px 0 rgba(255, 255, 255, .18); }
@media (max-width: 767px) {
  html[data-theme="dark"] .homelist.is-cover:not(.is-library) .homelist-thumb { border-radius: 8px; box-shadow: 0 6px 14px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .04), inset 0 -36px 36px -30px rgba(0, 0, 0, .55); }
  html[data-theme="dark"] .homelist.is-cover:not(.is-library) li:hover .homelist-thumb { transform: none; }
  html[data-theme="dark"] .homelist.is-rank li > a { border-radius: 10px; box-shadow: 0 6px 14px rgba(0, 0, 0, .45); }
  html[data-theme="dark"] .homelist.is-rank li > a::before { border-radius: 10px; }
  html[data-theme="dark"] .homelist.is-rank li > a:hover { transform: none; }
  html[data-theme="dark"] .homelist.is-rank li > a:hover .homelist-thumb { transform: none; filter: none; }
}