/* NOXAI catalog shell — measured responsive proportions from current character-chat products. */
:root {
  --nox-shell: #141413;
  --nox-sidebar: #2e2d2b;
  --nox-surface: #1d1d1c;
  --nox-line: rgba(255,255,255,.1);
  --nox-accent: #f0443d;
  --nox-content: 856px;
  --nox-thumb-ratio: 2 / 3;
  --nox-thumb-master-width: 768;
  --nox-thumb-master-height: 1152;
}

html, body { background: #0f0f0f !important; }
body { overflow-x: hidden; }
button, input { font-family: var(--c-sans); }
.cosmic-bg { background: #0f0f0f !important; }
.app-download-banner, .mobile-search-panel, .mobile-search-btn, .desktop-login-panel,
.primary-nav, .catalog-search, .story-mobile-actions { display: none; }
.app-download-banner[hidden] { display: none !important; }

.rail-block[hidden], .catalog-empty[hidden], .story-play-menu[hidden] { display: none !important; }
/* Thumbnail spec v1: 768x1152 WebP, 2:3, exactly two related frames, face-safe top 18%, hard cut. */
.nox-poster-card .poster {
  position: relative; display: block; height: auto !important; aspect-ratio: var(--nox-thumb-ratio) !important;
  overflow: hidden; isolation: isolate; container-type: inline-size;
}

.nox-poster-card .poster > img {
  position: absolute !important; inset: 0; width: 100% !important; height: 100% !important;
  display: block; object-fit: cover; object-position: center 18%;
}

/* Two-frame character thumbnails: the second scene is loaded only when a card is viewed or explored. */
.thumb-rotator-base, .thumb-rotator-alt {
  position: absolute !important; inset: 0; width: 100% !important; height: 100% !important;
  display: block; object-fit: cover; object-position: center 18%;
  transition: none !important;
  will-change: opacity;
}
.thumb-rotator-base { z-index: 0; opacity: 1; transform: none; }
.thumb-rotator-alt { z-index: 1; opacity: 0; pointer-events: none; transform: none; }
.is-showing-alt .thumb-rotator-base { opacity: 0; transform: none; }
.is-showing-alt .thumb-rotator-alt { opacity: 1; transform: none; }
.is-thumb-playing .thumb-rotator-base, .is-thumb-playing .thumb-rotator-alt { filter: saturate(1.08) contrast(1.015); }

.nox-poster-card .poster::after { z-index: 2 !important; }
.poster-badge, .nox-release-badge, .nox-release-genre,
.character-grid-new, .character-grid-metric, .nox-poster-copy { z-index: 4 !important; }
.thumb-frame-count {
  position: absolute; z-index: 7; right: 7px; bottom: 7px; min-width: 36px; height: 21px;
  display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 0 6px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(8,8,9,.7);
  color: #fff; font: 780 8px/1 var(--c-sans); letter-spacing: -.01em;
  box-shadow: 0 3px 12px rgba(0,0,0,.25); backdrop-filter: blur(7px); pointer-events: none;
}
.thumb-frame-count > i { font-size: 8px; }

.has-story-preview > .nox-release-genre,
.has-story-preview > .character-grid-metric,
.has-story-preview > .nox-poster-copy { opacity: 0; pointer-events: none; }
.thumb-story-overlay {
  position: absolute; z-index: 6; inset: 0; display: block; overflow: hidden;
  color: #fff; pointer-events: none;
  background: linear-gradient(180deg,rgba(5,5,7,.35) 0%,transparent 25%,transparent 45%,rgba(4,4,6,.18) 56%,rgba(4,4,6,.92) 100%);
}
.thumb-story-overlay::after {
  content: ''; position: absolute; inset: -35% -100% auto; height: 70%; opacity: 0;
  background: linear-gradient(105deg,transparent 38%,rgba(255,255,255,.14) 50%,transparent 62%);
  transform: translateX(-35%) rotate(8deg); pointer-events: none;
}
.is-thumb-playing .thumb-story-overlay::after { animation: thumb-story-sweep .7s ease-out; }
.thumb-story-progress {
  position: absolute; z-index: 1; top: 7px; left: 7px; right: 7px; display: flex; gap: 3px;
}
.thumb-story-progress > i { flex: 1; height: 2px; border-radius: 99px; background: rgba(255,255,255,.25); box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: background .25s ease,box-shadow .25s ease; }
.thumb-story-progress > i.is-past { background: rgba(255,255,255,.72); }
.thumb-story-progress > i.is-active { background: var(--thumb-accent); box-shadow: 0 0 9px color-mix(in srgb,var(--thumb-accent) 72%,transparent); }
.thumb-story-live {
  position: absolute; top: 14px; right: 7px; display: inline-flex; align-items: center; gap: 3px;
  min-height: 18px; padding: 0 6px; border: 1px solid rgba(255,255,255,.22); border-radius: 4px;
  color: #fff; background: rgba(7,7,9,.62); box-shadow: 0 4px 14px rgba(0,0,0,.24);
  font: 850 6.5px/1 var(--c-sans); letter-spacing: .08em; backdrop-filter: blur(7px);
}
.thumb-story-live > i { color: var(--thumb-accent); font-size: 7px; }
/* 캡션은 프레임 전체 폭을 쓴다. 카운터 배지가 사라져 오른쪽 예약 여백은 더 이상 필요 없다. */
.thumb-story-copy {
  position: absolute; left: 8px; right: 8px; bottom: 10px; display: flex; flex-direction: column; align-items: flex-start;
  text-align: left; text-shadow: 0 2px 10px rgba(0,0,0,.95),0 1px 2px rgba(0,0,0,.95);
}
.thumb-story-kicker {
  margin-bottom: 4px; color: var(--thumb-accent); font: 900 7px/1 var(--c-sans); letter-spacing: .08em;
}
.thumb-story-title {
  display: -webkit-box; overflow: hidden; color: #fff; font: 900 clamp(14px,1.15vw,17px)/1.3 var(--c-sans);
  letter-spacing: -.035em; word-break: keep-all; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.thumb-story-meta {
  display: block; max-width: 100%; margin-top: 6px; overflow: hidden; color: rgba(255,255,255,.7);
  font: 720 7px/1 var(--c-sans); letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap;
}
.thumb-story-overlay.is-copy-changing .thumb-story-kicker { animation: thumb-copy-in .42s cubic-bezier(.2,.75,.25,1) both; }
.thumb-story-overlay.is-copy-changing .thumb-story-title { animation: thumb-copy-in .46s .035s cubic-bezier(.2,.75,.25,1) both; }
.thumb-story-overlay.is-copy-changing .thumb-story-meta { animation: thumb-copy-in .46s .075s cubic-bezier(.2,.75,.25,1) both; }
@keyframes thumb-copy-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes thumb-story-sweep { 0% { opacity: 0; transform: translateX(-35%) rotate(8deg); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(35%) rotate(8deg); } }

@container (max-width: 118px) {
  .thumb-story-live > span { display: none; }
  .thumb-story-live { min-width: 18px; padding: 0 5px; }
  .thumb-story-copy { left: 8px; right: 8px; bottom: 8px; }
  .thumb-story-title { font-size: 14px; line-height: 1.3; letter-spacing: -.03em; }
  /* 좁은 썸네일에서는 킥커·메타가 제목 줄을 잡아먹으므로 제목만 남긴다. */
  .thumb-story-kicker,.thumb-story-meta { display: none; }
}

/* Shared catalog controls */
.catalog-empty {
  min-height: 220px; display: grid; place-items: center; align-content: center; gap: 8px;
  margin: 0 20px; border: 1px dashed rgba(255,255,255,.12); border-radius: 12px;
  color: rgba(255,255,255,.46); text-align: center;
}
.catalog-empty i { font-size: 27px; color: rgba(255,255,255,.34); }
.catalog-empty strong { color: rgba(255,255,255,.82); font-size: 15px; }
.catalog-empty span { font-size: 12px; }
.sb-main-nav { display: grid; gap: 4px; padding: 10px 14px 14px; border-bottom: 1px solid var(--nox-line); }
.sb-main-nav a, .sb-main-nav button {
  min-height: 43px; display: flex; align-items: center; gap: 12px; padding: 0 11px;
  border: 0; border-radius: 9px; background: transparent; color: rgba(255,255,255,.82);
  font: 700 13px/1 var(--c-sans); text-decoration: none; text-align: left; cursor: pointer;
}
.sb-main-nav a:hover, .sb-main-nav button:hover { background: rgba(255,255,255,.055); color: #fff; }
.sb-main-nav i { width: 20px; color: rgba(255,255,255,.54); font-size: 18px; text-align: center; }

/* Story detail content shared by mobile and desktop */
.story-preview-sheet { display: grid; }
.story-preview-topbar {
  z-index: 12; min-height: 56px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; border-bottom: 1px solid var(--nox-line); background: rgba(20,20,19,.96);
}
.story-preview-topbar > strong { font: 760 14px/1 var(--c-sans); letter-spacing: -.025em; }
.story-preview-close {
  position: static !important; width: 36px !important; height: 36px !important; border: 0 !important;
  background: rgba(255,255,255,.06) !important; font-size: 18px !important;
}
.story-preview-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.story-preview-summary { display: grid; }
.story-title-line { display: flex; align-items: flex-start; gap: 12px; }
.story-title-line h2 { flex: 1; margin: 0; color: #f6f6f5; font: 800 26px/1.28 var(--c-sans); letter-spacing: -.045em; word-break: keep-all; }
.story-title-line > button {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--nox-line);
  border-radius: 9px; background: rgba(255,255,255,.035); color: rgba(255,255,255,.7); font-size: 18px; cursor: pointer;
}
.story-creator-line { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 10px; margin-top: 14px; }
.story-creator-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #29201f; color: #ffb2ad; font: 850 12px/1 var(--c-sans); }
.story-creator-line > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.story-creator-line strong { overflow: hidden; color: rgba(255,255,255,.92); font: 700 11.5px/1.2 var(--c-sans); white-space: nowrap; text-overflow: ellipsis; }
.story-creator-line small { overflow: hidden; color: rgba(255,255,255,.4); font: 550 9.5px/1.2 var(--c-sans); white-space: nowrap; text-overflow: ellipsis; }
.story-creator-line button { height: 31px; padding: 0 12px; border: 1px solid rgba(240,68,61,.42); border-radius: 7px; background: rgba(240,68,61,.1); color: #ff8e88; font: 750 10px/1 var(--c-sans); cursor: pointer; }
.story-preview-content { padding: 0 !important; }
.story-preview-content .story-preview-kicker { margin-bottom: 7px; color: #ff675f; }
.story-preview-content .story-preview-tags { margin-top: 16px; }
.story-preview-content .story-preview-tags :is(span, a) { border-color: rgba(255,255,255,.16); border-radius: 999px; background: transparent; padding: 6px 9px; }
.story-preview-content .story-preview-hook { margin-top: 15px; color: rgba(255,255,255,.76); font-size: 13px; line-height: 1.7; }
.story-preview-content .story-preview-byline { margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.08); }
.story-preview-content .story-preview-byline span { display: inline-flex; align-items: center; gap: 4px; padding-left: 0; }
.story-preview-content .story-preview-byline span::before { display: none; }
.story-preview-content .story-preview-byline i { color: rgba(255,255,255,.5); }
.story-preview-detail { padding: 0 24px 34px; }
.story-preview-detail > section { margin-top: 34px; }
.story-feature-section { margin-top: 0; }
.story-section-head > span { color: #fa625a; }
.story-feature-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.story-feature-grid > div { min-width: 0; grid-template-columns: 34px minmax(0,1fr); padding: 11px; }
.story-setting-select {
  width: 100%; min-height: 61px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 14px; padding: 9px 13px; border: 1px solid var(--nox-line); border-radius: 10px;
  background: rgba(255,255,255,.025); color: #fff; text-align: left; cursor: pointer;
}
.story-setting-select > span { display: grid; grid-template-columns: 34px auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; }
.story-setting-select > span > i { grid-row: 1 / 3; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: rgba(240,68,61,.12); color: #fa655e; }
.story-setting-select b { color: rgba(255,255,255,.9); font: 730 12px/1.3 var(--c-sans); }
.story-setting-select small { color: rgba(255,255,255,.42); font: 520 10px/1.35 var(--c-sans); }
.story-setting-select > i { color: rgba(255,255,255,.44); }
.story-scene-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 13px; color: rgba(255,255,255,.38); font: 650 9px/1.3 var(--c-sans); }
.story-scene-meta span + span { position: relative; padding-left: 12px; }
.story-scene-meta span + span::before { content: ''; position: absolute; left: 0; top: 50%; width: 2px; height: 2px; border-radius: 50%; background: rgba(255,255,255,.3); }
.story-prologue blockquote { margin-top: 10px; }
.story-state-card { display: grid; gap: 12px; margin-top: 14px; padding: 16px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: #10100f; }
.story-state-card > div { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 10px; color: rgba(255,255,255,.5); font: 650 10px/1 var(--c-sans); }
.story-state-card > div strong { grid-column: 3; color: rgba(255,255,255,.83); font-size: 10.5px; }
.story-state-card > div i { grid-column: 2; grid-row: 1; height: 3px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.story-state-card > div i::after { content: ''; display: block; width: var(--progress); height: 100%; border-radius: inherit; background: #f04b43; }
.story-state-card p { margin: 2px 0 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.07); color: rgba(255,255,255,.4); font: 520 10.5px/1.55 var(--c-sans); }
.story-update-row { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 13px; margin-top: 14px; }
.story-update-row time { color: #f26b64; font: 750 10px/1.4 var(--c-sans); }
.story-update-row span { display: grid; gap: 4px; }
.story-update-row strong { color: rgba(255,255,255,.83); font: 700 11px/1.4 var(--c-sans); }
.story-update-row small { color: rgba(255,255,255,.4); font: 520 10px/1.45 var(--c-sans); }
.story-comment { display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: start; gap: 11px; margin-top: 14px; }
.story-comment p { margin: 0; color: rgba(255,255,255,.62); font: 520 11px/1.65 var(--c-sans); }
.story-comment p strong { display: block; margin-bottom: 2px; color: rgba(255,255,255,.86); font-size: 10.5px; }
.story-comment p em { margin-left: 5px; color: #f2bd58; font-style: normal; }
.story-comments-more { width: 100%; height: 38px; display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 13px; border: 1px solid var(--nox-line); border-radius: 8px; background: rgba(255,255,255,.025); color: rgba(255,255,255,.58); font: 650 10.5px/1 var(--c-sans); cursor: pointer; }
.story-preview-detail .story-preview-notice { margin: 28px 0 0; padding: 12px; border-radius: 8px; background: rgba(255,255,255,.025); }
.story-play-composite, .story-mobile-play-wrap { position: relative; min-width: 0; display: grid; grid-template-columns: 94px minmax(0,1fr); }
.story-preview-personalize, .story-mobile-personalize { width: 50px; height: 50px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(240,80,92,.22); border-radius: 10px; background: rgba(216,31,42,.09); color: #ff7b84; font-size: 18px; cursor: pointer; transition: border-color .16s ease,background .16s ease,color .16s ease; }
.story-preview-personalize:hover, .story-mobile-personalize:hover { border-color: rgba(255,111,120,.5); background: rgba(216,31,42,.17); color: #ffd7da; }
.story-preview-personalize:focus-visible, .story-mobile-personalize:focus-visible { outline: 2px solid #ff6973; outline-offset: 2px; }
.story-play-mode, .story-mobile-mode { height: 50px; display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #ef4b44; border-right: 0; border-radius: 10px 0 0 10px; background: #b92d28; color: #fff; font: 720 11px/1 var(--c-sans); cursor: pointer; }
.story-play-composite .story-preview-play, .story-mobile-play-wrap .story-preview-play { border-radius: 0 10px 10px 0; }
.story-play-menu { position: absolute; z-index: 30; left: 0; right: 0; bottom: calc(100% + 9px); padding: 7px; border: 1px solid rgba(255,255,255,.13); border-radius: 11px; background: #242422; box-shadow: 0 18px 48px rgba(0,0,0,.6); }
.story-play-menu button { width: 100%; min-height: 52px; display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 9px; padding: 7px 9px; border: 0; border-radius: 8px; background: transparent; color: #fff; text-align: left; cursor: pointer; }
.story-play-menu button:hover { background: rgba(255,255,255,.07); }
.story-play-menu button > i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: rgba(240,68,61,.12); color: #f86a63; }
.story-play-menu button span { display: grid; gap: 3px; }
.story-play-menu strong { font: 720 11px/1.2 var(--c-sans); }
.story-play-menu small { color: rgba(255,255,255,.44); font: 520 9px/1.3 var(--c-sans); }

/* Desktop shell */
@media (min-width: 768px) {
  body { padding-top: 56px; }
  .app-download-banner { display: none !important; }
  .container {
    width: calc(100% - 260px) !important; max-width: none !important; min-height: calc(100vh - 56px);
    margin: 0 0 0 260px !important; padding: 0 0 1px !important; background: #0f0f0f !important;
  }
  .header {
    top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important;
    height: 56px !important; margin: 0 !important; padding: 0 20px !important; pointer-events: auto !important;
    justify-content: flex-start !important; gap: 4px; border-bottom: 1px solid rgba(255,255,255,.06);
    background: var(--nox-shell) !important; box-shadow: none !important; backdrop-filter: none !important;
  }
  .header .logo { flex: none; margin: 0 14px 0 0 !important; }
  .header .nox-logo-img { width: 25px !important; height: 27px !important; }
  .header .logo-text { font-size: 19px; }
  .primary-nav { display: flex; align-items: center; height: 100%; }
  .primary-nav a, .primary-nav button {
    height: 40px; display: inline-flex; align-items: center; padding: 0 15px; border: 0; border-radius: 8px;
    background: transparent; color: rgba(255,255,255,.68); font: 680 13px/1 var(--c-sans); text-decoration: none; cursor: pointer;
  }
  .primary-nav a:hover, .primary-nav button:hover { background: rgba(255,255,255,.055); color: #fff; }
  .primary-nav a.active { color: #fff; }
  .primary-nav a.active::after { content: ''; align-self: flex-end; width: 18px; height: 2px; margin: 0 0 -8px -18px; border-radius: 999px; background: var(--nox-accent); }
  .catalog-search { width: 335px; height: 40px; display: flex; align-items: center; margin-left: auto; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 9px; background: #252523; }
  .catalog-search:focus-within { border-color: rgba(240,68,61,.6); box-shadow: 0 0 0 3px rgba(240,68,61,.08); }
  .catalog-search input { min-width: 0; flex: 1; height: 100%; padding: 0 4px 0 14px; border: 0; outline: 0; background: transparent; color: #fff; font-size: 12px; }
  .catalog-search input::placeholder { color: rgba(255,255,255,.32); }
  .catalog-search button { width: 42px; height: 100%; border: 0; background: transparent; color: rgba(255,255,255,.52); cursor: pointer; }
  .header-account { margin-left: 10px; gap: 7px; }
  .header-pass { height: 34px; }
  .header-login { height: 36px; background: transparent; }
  .header .menu-btn, .mobile-search-btn { display: none !important; }

  .desktop-login-panel {
    position: fixed; z-index: 90; left: 0; top: 56px; bottom: 0; width: 260px;
    display: flex; flex-direction: column; justify-content: flex-end; padding: 12px;
    border-right: 1px solid rgba(255,255,255,.055); background: var(--nox-sidebar); color: #fff;
  }
  .desktop-login-panel::before { content: '새로운 관계를 발견하고\A나만의 이야기를 이어가세요'; white-space: pre; margin: 0 auto auto; padding-top: 25px; color: rgba(255,255,255,.36); font: 570 11px/1.6 var(--c-sans); text-align: center; }
  .desktop-login-panel > strong { padding: 18px 16px 9px; border-radius: 16px 16px 0 0; background: #3a3937; font: 710 14px/1.55 var(--c-sans); text-align: center; }
  .desktop-login-label { padding-top: 2px; background: #3a3937; color: rgba(255,255,255,.48); font: 650 10px/1.3 var(--c-sans); text-align: center; }
  .desktop-login-providers { display: flex; justify-content: center; gap: 8px; padding: 10px 0 12px; background: #3a3937; }
  .desktop-login-providers button { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #222; font: 850 14px/1 var(--c-sans); cursor: pointer; transition: transform .15s ease, filter .18s ease; }
  .desktop-login-providers button:hover { filter: brightness(1.06); transform: translateY(-1px); }
  .desktop-login-providers .is-kakao { background: #fee500; color: #17120a; }
  .desktop-login-providers .is-google { border: 1px solid rgba(0,0,0,.1); background: #fff; color: #4285f4; }
  .desktop-login-providers .is-naver { background: #03c75a; color: #fff; }
  .desktop-login-providers .is-apple { background: #fff; color: #050505; font-size: 17px; }
  .desktop-login-more { height: 38px; border: 0; border-radius: 0 0 16px 16px; background: #3a3937; color: rgba(255,255,255,.62); font: 650 11px/1 var(--c-sans); cursor: pointer; }

  .hero2, .section-best, .footer { width: min(var(--nox-content), calc(100% - 40px)) !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; }
  .hero2 { height: 352px; padding: 0 !important; overflow: hidden; }
  .hero2-track { height: 100%; align-items: flex-start; gap: 8px; padding: 0 78px 12px !important; scroll-padding-inline: 78px; }
  .hero2-card { width: 700px !important; height: 336px !important; aspect-ratio: auto !important; border-radius: 12px !important; box-shadow: none; }
  .hero2-img { object-position: center top !important; }
  .hero2-body { left: 30px; right: 35%; bottom: 26px; text-align: left; }
  .hero2-title { font-size: 28px !important; }
  .hero2-sub { margin-top: 7px; font-family: var(--c-sans); font-size: 11px; letter-spacing: 0 !important; }
  .hero2-counter { top: 12px; right: 12px; font-size: 10px; }
  body.character-page .hero2 { height: 440px; }
  body.character-page .hero2-track { padding-left: 4px !important; padding-right: 4px !important; }
  body.character-page .hero2-card { width: 424px !important; height: 424px !important; }

  .section-best { margin-top: 0; }
  .shrine-head { padding: 26px 0 20px; }
  .shrine-title { font-size: 22px; }
  .rail-block { margin: 0 0 38px !important; }
  .rail-eyebrow, .rail-label { padding-left: 0 !important; padding-right: 0 !important; }
  .rail-label { margin-bottom: 14px; font-size: 19px; }
  .rank-heading-row { padding-right: 0; }
  .rank-tabs { padding: 12px 0 10px; }
  .rank-tab { min-height: 32px; }










  .rail { gap: 8px !important; padding: 2px 0 6px !important; }














  .poster { width: 148px !important; height: 222px !important; border-radius: 10px; box-shadow: none; }
  .rail-reviews { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px !important; overflow: visible; }
  .review-card { width: auto !important; min-width: 0; }
  .deep-card { width: 100%; margin: 0; }
  .footer { padding-bottom: 44px !important; }
  .bottom-nav { display: none !important; }
  .nox-toast { bottom: 28px; }

  /* Desktop detail: 768×768 centered modal with fixed title and action rows. */
  .story-preview { align-items: center !important; }
  .story-preview-sheet {
    width: 768px !important; height: min(90dvh,768px) !important; max-width: calc(100vw - 32px);
    grid-template-rows: 66px minmax(0,1fr) 80px; overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.11) !important; border-radius: 12px !important; background: #141413 !important;
    transform: translateY(12px) scale(.985);
  }
  .story-preview.open .story-preview-sheet { transform: translateY(0) scale(1); }
  .story-preview-topbar { min-height: 66px; padding: 0 20px; }
  .story-preview-summary { grid-template-columns: 220px minmax(0,1fr); gap: 24px; padding: 24px; }
  .story-preview-visual { width: 220px; height: 330px !important; border: 0; border-radius: 8px; }
  .story-preview-blur { display: none; }
  .story-preview-cover { width: 220px !important; height: 330px; aspect-ratio: auto; border: 0; border-radius: 8px; box-shadow: none; }
  .story-preview-online { left: 10px; bottom: 10px; }
  .story-preview-content { min-width: 0; padding-top: 3px !important; }
  .story-title-line h2 { font-size: 25px; }
  .story-preview-detail { padding: 2px 24px 40px; }
  .story-preview-actions { position: relative !important; margin: 0 !important; padding: 15px 18px !important; grid-template-columns: 50px 50px minmax(0,1fr); background: #141413; }
  .story-play-composite { grid-template-columns: 105px minmax(0,1fr); }
}

/* Mobile shell: reserve promotion space only while the banner is present. */
@media (max-width: 767px) {
  :root { --nox-card-thumb: calc((100vw - 48px) / 2); }
  body { --nox-promotion-height: 0px; }
  body:not(.app-banner-closed):has(.app-download-banner:not([hidden])) { --nox-promotion-height: 64px; }
  .app-download-banner[hidden] { display: none !important; }
  .app-download-banner {
    position: fixed; z-index: 6100; left: 0; right: 0; top: 0; height: 64px;
    display: grid; grid-template-columns: 40px minmax(0,1fr) auto 30px; align-items: center; gap: 9px;
    padding: 8px 8px 8px 12px; border-bottom: 1px solid rgba(255,255,255,.08); background: #262624; color: #fff;
  }
  .app-download-banner img { width: 40px; height: 40px; object-fit: contain; }
  .app-download-banner > span { min-width: 0; display: grid; gap: 3px; }
  .app-download-banner strong { overflow: hidden; font: 720 11.5px/1.2 var(--c-sans); white-space: nowrap; text-overflow: ellipsis; }
  .app-download-banner small { overflow: hidden; color: rgba(255,255,255,.48); font: 540 9.5px/1.2 var(--c-sans); white-space: nowrap; text-overflow: ellipsis; }
  .app-download-cta { height: 33px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--nox-accent); color: #fff; font: 750 10px/1 var(--c-sans); }
  .app-download-close { width: 30px; height: 34px; border: 0; background: transparent; color: rgba(255,255,255,.45); }

  .container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: calc(56px + var(--nox-promotion-height)) 0 0 !important; }
  .header {
    top: var(--nox-promotion-height) !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important;
    height: 56px !important; margin: 0 !important; padding: 0 12px !important; pointer-events: auto !important;
    border-bottom: 1px solid rgba(255,255,255,.07); background: var(--nox-shell) !important; box-shadow: none !important;
  }
  .header .logo { position: absolute; left: 50%; margin: 0 !important; transform: translateX(-50%); }
  .header .nox-logo-img { width: 24px !important; height: 26px !important; }
  .header .logo-text { font-size: 18px; }
  .primary-nav, .catalog-search, .header-account { display: none !important; }
  .header .menu-btn { position: absolute; left: 12px; display: grid !important; place-items: center; width: 40px !important; height: 40px !important; margin: 0 !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; }
  .mobile-search-btn { position: absolute; right: 12px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: #fff; font-size: 20px; }
  .mobile-search-panel {
    position: fixed; z-index: 6050; left: 12px; right: 12px; top: calc(62px + var(--nox-promotion-height)); height: 44px;
    align-items: center; gap: 8px; padding: 0 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: #252523; box-shadow: 0 14px 40px rgba(0,0,0,.5);
  }
  .mobile-search-panel.open { display: flex; }
  .mobile-search-panel > i { color: rgba(255,255,255,.45); }
  .mobile-search-panel input { min-width: 0; flex: 1; height: 100%; border: 0; outline: 0; background: transparent; color: #fff; font-size: 12px; }
  .mobile-search-panel button { width: 30px; height: 30px; border: 0; background: transparent; color: rgba(255,255,255,.55); }

  .hero2 { width: 100vw; height: auto; margin-left: calc((100% - 100vw)/2); padding: 0 0 12px; overflow: visible hidden; }
  .hero2-track { gap: 8px; padding: 0 16px 6px !important; scroll-padding-inline: 16px; }
  .hero2-card { width: calc(100vw - 32px) !important; height: min(calc(100vw - 20px),430px) !important; max-height: none; aspect-ratio: auto !important; border-radius: 0 !important; box-shadow: none; }
  .hero2-img { object-position: center top !important; }
  .hero2-body { left: 18px; right: 18px; bottom: 24px; text-align: left; }
  .hero2-title { font-size: 27px !important; }
  .hero2-sub { margin-top: 7px; font-family: var(--c-sans); font-size: 10.5px; letter-spacing: 0 !important; }
  .hero2-counter { top: 12px; right: 12px; font-size: 9.5px; }
  body.character-page .hero2-track { padding-left: 5px !important; padding-right: 5px !important; }
  body.character-page .hero2-card { width: calc(100vw - 10px) !important; height: calc(100vw - 10px) !important; }

  .section-best { width: 100%; }
  .shrine-head { padding: 18px 20px 16px; }
  .shrine-title { font-size: 21px; }
  .rail-block { margin: 0 0 34px !important; }
  .rail-label { margin-bottom: 13px; font-size: 18px; }
  .rank-heading-row { padding: 0 20px; }
  .rank-heading-row .rail-eyebrow, .rank-heading-row .rail-label { padding: 0; }
  .rank-tabs { padding: 11px 20px 10px; }









  .rail { gap: 8px !important; padding: 2px 20px 6px !important; }











  .poster { width: var(--nox-card-thumb) !important; height: auto !important; border-radius: 9px; box-shadow: none; }
  .nox-poster-copy { left: 7px; right: 7px; bottom: 8px; gap: 2px; }
  .nox-poster-copy span { font-size: 6px; }
  .nox-poster-copy strong { font-size: 10px; }
  .nox-poster-copy em { display: none; }
  .review-card { flex-basis: calc(100vw - 54px) !important; }
  .deep-card { width: calc(100% - 40px); }
  .footer { padding: 28px 20px 105px !important; }

  /* Mobile detail behaves as a full content route below app/header chrome. */
  .story-preview { inset: calc(56px + var(--nox-promotion-height)) 0 0 !important; z-index: 6000; align-items: stretch !important; background: #141413; }
  .story-preview-backdrop { display: none; }
  .story-preview-sheet { width: 100% !important; height: calc(100dvh - 56px - var(--nox-promotion-height)) !important; display: block; overflow-y: auto !important; border: 0 !important; border-radius: 0 !important; background: #141413 !important; transform: translateX(24px); }
  .story-preview.open .story-preview-sheet { transform: translateX(0); }
  .story-preview-topbar { position: sticky; top: 0; min-height: 56px; }
  .story-preview-scroll { overflow: visible; }
  .story-preview-summary { display: block; padding: 0; }
  .story-preview-visual { width: 100%; height: 318px !important; border: 0; }
  .story-preview-blur { display: block; inset: -18px; filter: blur(10px) saturate(.65); opacity: .5; }
  .story-preview-visual::after { z-index: -1; background: linear-gradient(180deg,rgba(255,255,255,.09),rgba(20,20,19,.08) 55%,#141413 100%); }
  .story-preview-cover { width: 180px !important; height: 274px; aspect-ratio: auto; border-radius: 8px; box-shadow: 0 14px 42px rgba(0,0,0,.48); }
  .story-preview-online { left: 14px; bottom: 12px; }
  .story-preview-content { padding: 20px !important; }
  .story-title-line h2 { font-size: 24px; }
  .story-preview-detail { padding: 0 20px 42px; }
  .story-feature-grid { grid-template-columns: 1fr; }
  .story-mobile-actions { position: relative; display: grid; grid-template-columns: 48px 48px minmax(0,1fr); gap: 8px; padding: 0 20px 6px; }
  .story-mobile-play-wrap { grid-template-columns: 96px minmax(0,1fr); }
  .story-mobile-actions .story-preview-like { height: 50px; }
  .story-mobile-personalize { width: 48px; }
  .story-mobile-play-menu { top: calc(100% + 8px); bottom: auto; }
  .story-preview-actions { display: none !important; }
  .nox-toast { z-index: 7000; }
}

@media (max-width: 370px) {

  .app-download-banner { grid-template-columns: 36px minmax(0,1fr) auto 28px; gap: 7px; padding-left: 9px; }
  .app-download-banner img { width: 36px; height: 36px; }
  .app-download-cta { padding: 0 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .story-preview-sheet, .hero2-card, .thumb-rotator-base, .thumb-rotator-alt { transition: none !important; }
}

/* Character-card detail variant: compact 444px desktop modal and long profile body. */
.story-preview-like-count, .story-title-more, .character-attribute-row, .character-creator-line,
.character-hashtags, .character-description-section, .character-ranking-section,
.character-related-section, .character-webtoon-section, .character-intro-preview, .story-preview-party { display: none; }
.story-creator-award { margin-left: 4px; color: #f6bd61; font-style: normal; font-size: 8px; font-weight: 800; }
.character-description-copy { position: relative; max-height: 118px; overflow: hidden; margin-top: 14px; color: rgba(255,255,255,.67); font: 520 11.5px/1.75 var(--c-sans); word-break: keep-all; }
.character-description-copy::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 54px; background: linear-gradient(transparent,#141413); pointer-events: none; }
.character-description-copy.expanded { max-height: none; }
.character-description-copy.expanded::after { display: none; }
.character-description-copy p { margin: 0 0 10px; }
.character-expand-button { width: 100%; height: 38px; display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 8px; border: 0; border-radius: 7px; background: rgba(255,255,255,.045); color: rgba(255,255,255,.6); font: 650 10.5px/1 var(--c-sans); cursor: pointer; }
.character-expand-button i { transition: transform .18s ease; }
.character-expand-button[aria-expanded="true"] i { transform: rotate(180deg); }
.story-ranking-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.story-ranking-head > div > span { display: block; margin-bottom: 5px; color: #e5525d; font: 850 8px/1 var(--c-sans); letter-spacing: .13em; }
.story-ranking-head button { border: 0; background: transparent; color: rgba(255,255,255,.45); font: 650 10px/1 var(--c-sans); cursor: pointer; }
.character-ranking-tabs { display: flex; gap: 4px; margin-top: 14px; padding: 3px; border-radius: 8px; background: rgba(255,255,255,.04); }
.character-ranking-tabs button { flex: 1; height: 30px; border: 0; border-radius: 6px; background: transparent; color: rgba(255,255,255,.4); font: 650 10px/1 var(--c-sans); }
.character-ranking-tabs button.active { background: #323230; color: #fff; }
.character-ranking-list { display: grid; gap: 2px; margin: 10px 0 0; padding: 0; list-style: none; }
.character-ranking-list li { min-height: 51px; display: grid; grid-template-columns: 22px 32px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 7px 9px; border-bottom: 1px solid rgba(255,255,255,.065); }
.character-ranking-list li > b { color: rgba(255,255,255,.68); font: 800 12px/1 var(--c-sans); text-align: center; }
.rank-user-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #322322; color: #ffafa9; font: 800 10px/1 var(--c-sans); }
.character-ranking-list li > span:nth-child(3) { display: grid; gap: 3px; }
.character-ranking-list strong { color: rgba(255,255,255,.84); font: 680 10.5px/1.2 var(--c-sans); }
.character-ranking-list small { color: rgba(255,255,255,.34); font: 520 8.5px/1.2 var(--c-sans); }
.character-ranking-list em { color: rgba(255,255,255,.54); font: 700 9.5px/1 var(--c-sans); font-style: normal; }
.character-related-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.character-related-grid button { min-width: 0; display: grid; gap: 4px; padding: 0; border: 0; background: transparent; color: #fff; text-align: left; cursor: pointer; }
.character-related-grid img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; object-position: center 18%; border-radius: 8px; }
.character-related-grid strong { overflow: hidden; font: 700 10.5px/1.25 var(--c-sans); white-space: nowrap; text-overflow: ellipsis; }
.character-related-grid small { overflow: hidden; color: rgba(255,255,255,.38); font: 520 8.5px/1.3 var(--c-sans); white-space: nowrap; text-overflow: ellipsis; }

.character-webtoon-section { min-width: 0; }
.character-webtoon-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.character-webtoon-head > span { flex: none; }
.character-webtoon-head h3 { text-align: right; }
.character-webtoon-lead { margin: 9px 0 0; color: rgba(255,255,255,.42); font: 540 10.5px/1.55 var(--c-sans); word-break: keep-all; }
.character-webtoon-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 15px; }
.character-webtoon-panel { min-width: 0; }
.character-webtoon-panel:first-child { grid-column: 1 / -1; }
.character-webtoon-panel-button { position: relative; width: 100%; aspect-ratio: .82; display: block; overflow: hidden; padding: 0; border: 1px solid rgba(255,255,255,.075); border-radius: 10px; background: #090909; color: #fff; text-align: left; cursor: zoom-in; isolation: isolate; }
.character-webtoon-panel:first-child .character-webtoon-panel-button { aspect-ratio: 1.48; }
.character-webtoon-panel-button::after { content: ''; position: absolute; z-index: 1; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); pointer-events: none; }
.character-webtoon-panel-button > img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 18%; transition: transform .4s cubic-bezier(.22,.75,.25,1),filter .28s ease; }
.character-webtoon-panel:first-child .character-webtoon-panel-button > img { object-position: center 21%; }
.character-webtoon-panel-shade { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 46px 12px 12px; background: linear-gradient(180deg,transparent 33%,rgba(4,4,5,.2) 52%,rgba(4,4,5,.93) 100%); }
.character-webtoon-panel:first-child .character-webtoon-panel-shade { padding: 58px 16px 15px; background: linear-gradient(180deg,transparent 34%,rgba(4,4,5,.16) 53%,rgba(4,4,5,.94) 100%); }
.character-webtoon-panel-sequence { position: absolute; top: 10px; left: 10px; min-width: 27px; height: 23px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(12,12,13,.7); color: rgba(255,255,255,.7); font: 750 8.5px/1 var(--c-sans); letter-spacing: .06em; backdrop-filter: blur(7px); }
.character-webtoon-panel-kicker { margin-bottom: 5px; color: #ff7871; font: 820 7.5px/1 var(--c-sans); letter-spacing: .12em; }
.character-webtoon-panel-shade strong { color: #fff; font: 760 13px/1.3 var(--c-sans); letter-spacing: -.025em; word-break: keep-all; }
.character-webtoon-panel:first-child .character-webtoon-panel-shade strong { font-size: 17px; }
.character-webtoon-panel-copy { display: -webkit-box; overflow: hidden; margin-top: 5px; color: rgba(255,255,255,.62); font: 520 9.5px/1.48 var(--c-sans); word-break: keep-all; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.character-webtoon-panel:first-child .character-webtoon-panel-copy { max-width: 315px; font-size: 10.5px; -webkit-line-clamp: 2; }
.character-webtoon-panel-button > i { position: absolute; z-index: 3; top: 10px; right: 10px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: rgba(12,12,13,.7); color: rgba(255,255,255,.68); font-size: 12px; opacity: 0; transform: scale(.84); transition: opacity .18s ease,transform .18s ease; backdrop-filter: blur(7px); }
.character-webtoon-panel-button:hover > img { transform: scale(1.035); filter: brightness(1.04); }
.character-webtoon-panel-button:hover > i, .character-webtoon-panel-button:focus-visible > i { opacity: 1; transform: scale(1); }
.character-webtoon-panel-button:focus-visible { outline: 2px solid #fa625a; outline-offset: 3px; }

.character-webtoon-lightbox[hidden] { display: none !important; }
.character-webtoon-lightbox { position: fixed; z-index: 6900; inset: 0; display: grid; place-items: center; padding: 18px; opacity: 0; visibility: hidden; transition: opacity .18s ease,visibility .18s ease; }
.character-webtoon-lightbox.is-open { opacity: 1; visibility: visible; }
.character-webtoon-lightbox-backdrop { position: absolute; inset: 0; border: 0; background: rgba(0,0,0,.9); cursor: zoom-out; backdrop-filter: blur(12px); }
.character-webtoon-lightbox-card { position: relative; width: min(92vw,620px); height: min(calc(100dvh - 36px),820px); max-height: calc(100dvh - 36px); display: grid; grid-template-rows: 50px minmax(0,1fr) auto; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: #121212; color: #fff; box-shadow: 0 30px 110px rgba(0,0,0,.8); transform: translateY(10px) scale(.985); transition: transform .2s cubic-bezier(.22,.75,.25,1); }
.character-webtoon-lightbox.is-open .character-webtoon-lightbox-card { transform: translateY(0) scale(1); }
.character-webtoon-lightbox-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 18px; border-bottom: 1px solid rgba(255,255,255,.075); background: #151515; }
.character-webtoon-lightbox-bar > span { color: rgba(255,255,255,.48); font: 750 10px/1 var(--c-sans); letter-spacing: .08em; }
.character-webtoon-lightbox-close { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: rgba(255,255,255,.7); font-size: 18px; cursor: pointer; }
.character-webtoon-lightbox-close:hover { background: rgba(255,255,255,.07); color: #fff; }
.character-webtoon-lightbox-close:focus-visible, .character-webtoon-lightbox-nav button:focus-visible { outline: 2px solid #fa625a; outline-offset: 2px; }
.character-webtoon-lightbox-media { min-height: 240px; display: grid; place-items: center; overflow: hidden; background: #060606; }
.character-webtoon-lightbox-media img { width: 100%; height: 100%; max-height: calc(100dvh - 260px); display: block; object-fit: contain; }
.character-webtoon-lightbox-copy { padding: 16px 18px 18px; border-top: 1px solid rgba(255,255,255,.075); background: #151515; }
.character-webtoon-lightbox-copy > span { color: #ff7770; font: 820 8px/1 var(--c-sans); letter-spacing: .13em; }
.character-webtoon-lightbox-copy h2 { margin: 6px 0 0; color: #fff; font: 760 18px/1.35 var(--c-sans); letter-spacing: -.03em; }
.character-webtoon-lightbox-copy > p { margin: 7px 0 0; color: rgba(255,255,255,.58); font: 520 11px/1.6 var(--c-sans); word-break: keep-all; }
.character-webtoon-lightbox-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.character-webtoon-lightbox-nav button { height: 40px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.045); color: rgba(255,255,255,.7); font: 680 10px/1 var(--c-sans); cursor: pointer; }
.character-webtoon-lightbox-nav button:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; }

.story-preview.character-detail-mode .character-attribute-row,
.story-preview.character-detail-mode .character-creator-line,
.story-preview.character-detail-mode .character-hashtags,
.story-preview.character-detail-mode .character-description-section,
.story-preview.character-detail-mode .character-webtoon-section,
.story-preview.character-detail-mode .character-ranking-section,
.story-preview.character-detail-mode .character-related-section { display: flex; }
.story-preview.character-detail-mode .character-description-section,
.story-preview.character-detail-mode .character-webtoon-section,
.story-preview.character-detail-mode .character-ranking-section,
.story-preview.character-detail-mode .character-related-section { flex-direction: column; }
.story-preview.character-detail-mode .story-title-like { display: none; }
.story-preview.character-detail-mode .story-title-more { display: grid; }
.story-preview.character-detail-mode .story-creator-line { display: none; }
.story-preview.character-detail-mode .character-creator-line { align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; }
.story-preview.character-detail-mode .character-creator-line > span { min-width: 0; display: grid; gap: 5px; }
.story-preview.character-detail-mode .character-creator-line strong { color: rgba(255,255,255,.88); font: 700 12.5px/1 var(--c-sans); }
.story-preview.character-detail-mode .character-creator-line small { display: flex; align-items: center; gap: 5px; color: rgba(255,255,255,.42); font: 560 10.5px/1 var(--c-sans); }
.story-preview.character-detail-mode .character-creator-line small em { color: #f0b85a; font-style: normal; font-weight: 800; }
.story-preview.character-detail-mode .character-creator-line button { height: 31px; padding: 0 13px; border: 0; border-radius: 7px; background: #fafafa; color: #171717; font: 750 10px/1 var(--c-sans); cursor: pointer; }
.story-preview.character-detail-mode .character-attribute-row { flex-wrap: wrap; gap: 6px; margin-top: 17px; }
.story-preview.character-detail-mode .character-attribute-row span { min-height: 24px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border: 0; border-radius: 4px; background: #0a0a0a; color: #a3a3a3; font: 560 12px/1 var(--c-sans); }
.story-preview.character-detail-mode .character-hashtags { flex-wrap: wrap; gap: 5px 9px; margin-top: 13px; color: rgba(255,255,255,.49); font: 570 12px/1.45 var(--c-sans); }

@media (min-width: 768px) {
  .story-preview.character-detail-mode .story-preview-backdrop { background: rgba(0,0,0,.8); backdrop-filter: none; }
  .story-preview.character-detail-mode .story-preview-sheet { width: 444px !important; height: min(90dvh,648px) !important; grid-template-rows: 66px minmax(0,1fr) 77px; border: 0 !important; border-radius: 12px !important; background: #141413 !important; box-shadow: none !important; }
  .story-preview.character-detail-mode .story-preview-topbar { min-height: 66px; padding: 0 24px; border-bottom: 0; background: #141413; }
  .story-preview.character-detail-mode .story-preview-topbar > strong { color: #f0efeb; font-size: 20px; font-weight: 600; }
  .story-preview.character-detail-mode .story-preview-close { width: 28px !important; height: 28px !important; border-radius: 0; outline: 0; background: transparent !important; color: #737373; }
  .story-preview.character-detail-mode .story-preview-close:focus-visible { outline: 0; background: rgba(255,255,255,.055) !important; }
  .story-preview.character-detail-mode .story-preview-scroll { scrollbar-width: none; }
  .story-preview.character-detail-mode .story-preview-scroll::-webkit-scrollbar { display: none; }
  .story-preview.character-detail-mode .story-preview-summary { display: block; padding: 0; }
  .story-preview.character-detail-mode .story-preview-visual { width: 444px; height: 444px !important; border-radius: 0; }
  .story-preview.character-detail-mode .story-preview-cover { width: 444px !important; height: 444px; border-radius: 0; object-fit: cover; object-position: center 18%; }
  .story-preview.character-detail-mode .story-preview-blur,
  .story-preview.character-detail-mode .story-preview-online { display: none; }
  .story-preview.character-detail-mode .story-preview-like-count { position: absolute; z-index: 4; right: 15px; bottom: 14px; min-width: 66px; height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(28,28,27,.88); color: rgba(255,255,255,.78); font: 700 11px/1 var(--c-sans); backdrop-filter: blur(9px); }
  .story-preview.character-detail-mode .story-preview-content { padding: 0 20px 30px !important; }
  .story-preview.character-detail-mode .story-preview-kicker { display: none; }
  .story-preview.character-detail-mode .story-title-line { min-height: 61px; align-items: center; }
  .story-preview.character-detail-mode .story-title-line h2 { font-size: 18px; line-height: 1.35; }
  .story-preview.character-detail-mode .story-title-line > button { width: 34px; height: 34px; border: 0; background: transparent; }
  .story-preview.character-detail-mode .story-preview-tags { display: none; }
  .story-preview.character-detail-mode .story-preview-hook { margin-top: 16px; color: rgba(255,255,255,.88); font-size: 16px; font-weight: 700; line-height: 1.55; letter-spacing: -.025em; }
  .story-preview.character-detail-mode .story-preview-byline { margin-bottom: 3px; font-size: 12px; }
  .story-preview.character-detail-mode .story-preview-detail { display: flex; flex-direction: column; padding: 0 20px 40px; }
  .story-preview.character-detail-mode .character-description-section { order: 1; }
  .story-preview.character-detail-mode .character-webtoon-section { order: 2; }
  .story-preview.character-detail-mode .story-feature-section { order: 3; }
  .story-preview.character-detail-mode .story-prologue { order: 4; }
  .story-preview.character-detail-mode .story-setting-section,
  .story-preview.character-detail-mode .story-state-section,
  .story-preview.character-detail-mode .story-preview-notice { display: none; }
  .story-preview.character-detail-mode .story-update-section { order: 5; }
  .story-preview.character-detail-mode .character-ranking-section { order: 6; }
  .story-preview.character-detail-mode .story-comment-section { order: 7; }
  .story-preview.character-detail-mode .character-related-section { order: 8; }
  .story-preview.character-detail-mode .story-feature-grid { grid-template-columns: 1fr; }
  .story-preview.character-detail-mode .story-scene-meta,
  .story-preview.character-detail-mode .story-prologue > blockquote { display: none; }
  .story-preview.character-detail-mode .character-intro-preview { display: grid; gap: 12px; margin-top: 14px; }
  .story-preview.character-detail-mode .character-intro-message { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: start; gap: 9px; }
  .story-preview.character-detail-mode .character-intro-message > img { width: 34px; height: 34px; object-fit: cover; object-position: center 18%; border-radius: 50%; }
  .story-preview.character-detail-mode .character-intro-message p { display: grid; gap: 6px; margin: 0; }
  .story-preview.character-detail-mode .character-intro-message strong { color: rgba(255,255,255,.78); font: 700 10px/1 var(--c-sans); }
  .story-preview.character-detail-mode .character-intro-message span { padding: 10px 12px; border-radius: 2px 10px 10px 10px; background: #292927; color: rgba(255,255,255,.72); font: 540 10.5px/1.65 var(--c-sans); }
  .story-preview.character-detail-mode .character-intro-image { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 18%; border-radius: 8px; }
  .story-preview.character-detail-mode .story-preview-actions { height: 77px; grid-template-columns: 48px minmax(0,1fr); padding: 16px 20px !important; }
  .story-preview.character-detail-mode .story-preview-personalize { display: grid; width: 44px; height: 44px; border-color: rgba(240,80,92,.2); background: rgba(216,31,42,.1); color: #ff7b84; }
  .story-preview.character-detail-mode .story-preview-like { display: none; }
  .story-preview.character-detail-mode .story-play-composite { display: block; }
  .story-preview.character-detail-mode .story-play-mode,
  .story-preview.character-detail-mode .story-play-menu { display: none !important; }
  .story-preview.character-detail-mode .story-preview-play { height: 44px; border: 0; border-radius: 8px; background: #fafafa; color: #171717; box-shadow: none; font-size: 12px; }
  .story-preview.character-detail-mode .story-preview-play i { display: none; }
}

@media (max-width: 767px) {
  .story-preview.character-detail-mode .story-preview-visual { width: 100%; height: min(100vw,444px) !important; min-height: 0; }
  .story-preview.character-detail-mode .story-preview-blur,
  .story-preview.character-detail-mode .story-preview-online { display: none; }
  .story-preview.character-detail-mode .story-preview-cover { width: 100% !important; height: 100%; object-fit: cover; object-position: center 18%; border: 0; border-radius: 0; box-shadow: none; }
  .story-preview.character-detail-mode .story-preview-like-count { position: absolute; z-index: 4; right: 14px; bottom: 14px; min-width: 63px; height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 11px; border-radius: 999px; background: rgba(23,23,23,.92); color: rgba(255,255,255,.78); font: 700 11px/1 var(--c-sans); }
  .story-preview.character-detail-mode .story-preview-kicker,
  .story-preview.character-detail-mode .story-preview-tags { display: none; }
  .story-preview.character-detail-mode .story-preview-hook { color: rgba(255,255,255,.88); font-size: 15px; font-weight: 700; line-height: 1.55; }
  .story-preview.character-detail-mode .story-title-line { align-items: center; }
  .story-preview.character-detail-mode .story-title-more { width: 38px; height: 38px; }
  .story-preview.character-detail-mode .character-description-section { margin-top: 26px; }
  .story-preview.character-detail-mode .story-setting-section,
  .story-preview.character-detail-mode .story-state-section,
  .story-preview.character-detail-mode .story-preview-notice { display: none; }
  .story-preview.character-detail-mode .story-scene-meta,
  .story-preview.character-detail-mode .story-prologue > blockquote { display: none; }
  .story-preview.character-detail-mode .character-intro-preview { display: grid; gap: 12px; margin-top: 14px; }
  .story-preview.character-detail-mode .character-intro-message { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: start; gap: 9px; }
  .story-preview.character-detail-mode .character-intro-message > img { width: 34px; height: 34px; object-fit: cover; object-position: center 18%; border-radius: 50%; }
  .story-preview.character-detail-mode .character-intro-message p { display: grid; gap: 6px; margin: 0; }
  .story-preview.character-detail-mode .character-intro-message strong { color: rgba(255,255,255,.78); font: 700 10px/1 var(--c-sans); }
  .story-preview.character-detail-mode .character-intro-message span { padding: 10px 12px; border-radius: 2px 10px 10px 10px; background: #292927; color: rgba(255,255,255,.72); font: 540 10.5px/1.65 var(--c-sans); }
  .story-preview.character-detail-mode .character-intro-image { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 18%; border-radius: 8px; }
  .story-preview.character-detail-mode .story-preview-detail { padding-bottom: calc(112px + env(safe-area-inset-bottom,0px)); }
  .story-preview.character-detail-mode .story-mobile-actions { position: fixed; z-index: 6100; left: 0; right: 0; bottom: 0; grid-template-columns: 50px minmax(0,1fr); padding: 10px 20px calc(10px + env(safe-area-inset-bottom,0px)); border-top: 1px solid rgba(255,255,255,.09); background: linear-gradient(180deg,rgba(20,20,19,.86),#141413 34%); backdrop-filter: blur(15px); }
  .story-preview.character-detail-mode .story-mobile-actions > .story-preview-like { display: none; }
  .story-preview.character-detail-mode .story-mobile-personalize { display: grid; width: 50px; height: 50px; border-color: rgba(255,255,255,.12); background: #222221; }
  .story-preview.character-detail-mode .story-mobile-mode,
  .story-preview.character-detail-mode .story-mobile-play-menu { display: none !important; }
  .story-preview.character-detail-mode .story-mobile-play-wrap { display: block; }
  .story-preview.character-detail-mode .story-mobile-play-wrap .story-preview-play { height: 50px; border: 0; border-radius: 10px; background: #fafafa; color: #171717; box-shadow: none; }
  .story-preview.character-detail-mode .story-mobile-play-wrap .story-preview-play i { display: none; }

  .character-webtoon-lightbox { padding: 0; }
  .character-webtoon-lightbox-card { width: 100%; height: 100dvh; max-height: none; grid-template-rows: 56px minmax(0,1fr) auto; border: 0; border-radius: 0; }
  .character-webtoon-lightbox-media img { max-height: none; }
  .character-webtoon-lightbox-copy { padding: 15px 18px calc(18px + env(safe-area-inset-bottom,0px)); }
}

@media (max-width: 370px) {
  .character-webtoon-panel-copy { -webkit-line-clamp: 2; }
  .character-webtoon-panel-shade { padding-right: 10px; padding-left: 10px; }
  .character-webtoon-panel-shade strong { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .character-webtoon-panel-button > img, .character-webtoon-panel-button > i,
  .character-webtoon-lightbox, .character-webtoon-lightbox-card { transition: none !important; }
  /* 제목 레이어는 읽기 위한 정보라 그대로 두고, 등장/스윕 모션만 끈다. */
  .thumb-story-overlay.is-copy-changing .thumb-story-kicker,
  .thumb-story-overlay.is-copy-changing .thumb-story-title,
  .thumb-story-overlay.is-copy-changing .thumb-story-meta,
  .is-thumb-playing .thumb-story-overlay::after {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}
/* Luminous artwork pass: keep the dark product shell while letting every cover read clearly. */
.hero2-img,
.nox-poster-card .poster > img,
.character-webtoon-panel-button > img,
.character-related-grid img {
  filter: saturate(1.05) contrast(1.01);
}
.hero2-grad {
  background:
    linear-gradient(90deg,rgba(5,6,8,.84) 0%,rgba(5,6,8,.64) 34%,rgba(5,6,8,.16) 66%,transparent 86%),
    linear-gradient(180deg,rgba(5,6,8,.12) 0%,transparent 40%,rgba(5,6,8,.14) 64%,rgba(5,6,8,.72) 100%);
}
.hero2-body {
  padding: 0 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hero2-body .nox-live {
  width: max-content;
  max-width: 100%;
  margin-bottom: 9px;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  background: rgba(5,6,8,.52);
  color: rgba(255,255,255,.92);
  box-shadow: 0 5px 16px rgba(0,0,0,.18);
  text-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero2-body .hero2-title { color: #fff; text-shadow: 0 3px 20px rgba(0,0,0,.92),0 1px 3px rgba(0,0,0,.9); }
.hero2-body .hero2-sub { color: rgba(255,255,255,.78); text-shadow: 0 2px 12px rgba(0,0,0,.95); }
.hero2-counter { padding: 6px 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; background: rgba(5,6,8,.58); box-shadow: 0 5px 16px rgba(0,0,0,.16); }
.nox-poster-card .poster::after { inset: 40% 0 0; background: linear-gradient(180deg,transparent,rgba(0,0,0,.76)); }


.character-webtoon-panel-shade { background: linear-gradient(180deg,transparent 43%,rgba(4,4,5,.08) 60%,rgba(4,4,5,.76) 100%); }
.character-webtoon-panel:first-child .character-webtoon-panel-shade { background: linear-gradient(180deg,transparent 44%,rgba(4,4,5,.06) 61%,rgba(4,4,5,.76) 100%); }

/* Flagship campaigns — dark editorial cards with readable countdown typography. */
.hero2-campaign .hero2-img { object-position: center 18% !important; }
.villains-hero-card .hero2-img { object-position: center 12% !important; }
.zero-campaign-feature {
  position: relative; isolation: isolate; display: grid; grid-template-columns: 218px minmax(0,1fr);
  min-height: 306px; margin: 0 0 38px; overflow: hidden; border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px; background:
    radial-gradient(circle at 86% 10%,rgba(77,174,176,.18),transparent 33%),
    radial-gradient(circle at 56% 112%,rgba(173,65,84,.13),transparent 42%),
    linear-gradient(132deg,#111719 0%,#101315 54%,#16131a 100%);
  box-shadow: 0 22px 60px rgba(0,0,0,.3); color: #f3f4f4; text-decoration: none;
}
.zero-campaign-feature::before {
  content: ''; position: absolute; z-index: -1; inset: 0; opacity: .62; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size: 34px 34px; mask-image: linear-gradient(90deg,transparent 18%,#000 58%,#000);
}
.zero-campaign-feature::after {
  content: '72:00:00'; position: absolute; right: 24px; top: 18px; color: rgba(179,224,225,.16);
  font: 820 45px/1 var(--c-sans); letter-spacing: -.06em; pointer-events: none;
}
.zero-campaign-art { position: relative; display: block; overflow: hidden; border-right: 1px solid rgba(255,255,255,.08); background: #111719; }
.zero-campaign-art::after { content: ''; position: absolute; inset: 58% 0 0; background: linear-gradient(180deg,transparent,rgba(9,20,29,.38)); }
.zero-campaign-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform .45s ease; }
.zero-campaign-pulse { position: absolute; z-index: 2; right: 13px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: #ff6158; box-shadow: 0 0 0 6px rgba(255,97,88,.16); }
.zero-campaign-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; padding: 34px 42px 30px; }
.zero-campaign-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 15px; color: #90b9bb; font: 790 10px/1 var(--c-sans); letter-spacing: .12em; }
.zero-campaign-kicker i { width: 7px; height: 7px; border-radius: 50%; background: #ff5c57; box-shadow: 0 0 0 4px rgba(255,92,87,.14); }
.zero-campaign-copy > strong { max-width: 620px; font: 830 clamp(23px,3vw,35px)/1.13 var(--c-sans); letter-spacing: -.045em; text-wrap: balance; }
.zero-campaign-copy > em { margin-top: 12px; color: rgba(239,242,242,.68); font: 610 13px/1.68 var(--c-sans); font-style: normal; letter-spacing: -.01em; }
.zero-campaign-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.zero-campaign-tags b { padding: 7px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.045); color: #b4c5c6; font: 720 9.5px/1 var(--c-sans); }
.zero-campaign-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 19px; padding: 11px 16px; border-radius: 9px; background: #f04a52; color: #fff; font: 750 11px/1 var(--c-sans); }
.zero-campaign-feature:hover .zero-campaign-art img { transform: scale(1.025); }
.zero-campaign-feature:hover .zero-campaign-cta { background: #f15c56; }
.zero-campaign-feature:focus-visible { outline: 3px solid rgba(255,98,91,.65); outline-offset: 3px; }
.villains-campaign-feature {
  background:
    radial-gradient(circle at 88% 8%,rgba(207,65,112,.2),transparent 34%),
    radial-gradient(circle at 56% 110%,rgba(155,40,54,.16),transparent 42%),
    linear-gradient(132deg,#171013 0%,#121012 52%,#17131b 100%);
}
.villains-campaign-feature::after { content: 'D-30'; color: rgba(244,136,173,.2); }
.villains-campaign-feature .zero-campaign-art { background: #171013; }
.villains-campaign-feature .zero-campaign-kicker { color: #d18ca5; }
.villains-campaign-feature .zero-campaign-kicker i,
.villains-campaign-feature .zero-campaign-pulse { background: #df4d7b; box-shadow: 0 0 0 5px rgba(223,77,123,.14); }
.villains-campaign-feature .zero-campaign-tags b { border-color: rgba(239,114,156,.16); color: #cba4b3; }
.villains-campaign-feature .zero-campaign-cta { background: #c93e69; }
.villains-campaign-feature:hover .zero-campaign-cta { background: #bd416d; }

@media (max-width: 700px) {
  .zero-campaign-feature { grid-template-columns: 118px minmax(0,1fr); min-height: 214px; margin: 0 20px 34px; border-radius: 13px; }
  .zero-campaign-feature::after { right: 12px; top: 11px; font-size: 25px; }
  .zero-campaign-copy { padding: 23px 14px 18px 16px; }
  .zero-campaign-kicker { max-width: calc(100% - 38px); margin-bottom: 10px; font-size: 8px; letter-spacing: .08em; }
  .zero-campaign-copy > strong { font-size: 17px; line-height: 1.2; }
  .zero-campaign-copy > em { margin-top: 8px; font-size: 10px; line-height: 1.55; }
  .zero-campaign-tags { gap: 4px; margin-top: 11px; }
  .zero-campaign-tags b { padding: 5px 7px; font-size: 7.8px; }
  .zero-campaign-tags b:nth-child(n+3) { display: none; }
  .zero-campaign-cta { margin-top: 12px; padding: 8px 10px; font-size: 9px; }
}

@media (max-width: 767px) {
  .hero2-grad {
    background:
      linear-gradient(90deg,rgba(5,6,8,.52) 0%,rgba(5,6,8,.18) 70%,transparent 100%),
      linear-gradient(180deg,rgba(5,6,8,.05) 0%,transparent 34%,rgba(5,6,8,.32) 62%,rgba(5,6,8,.92) 100%);
  }
  .hero2-body { padding: 0 2px 2px; border: 0; border-radius: 0; background: transparent; }
  .hero2-body .nox-live { margin-bottom: 8px; padding: 6px 9px; }
}
/* 썸네일 제목은 카드마다 정확히 하나만 보여준다.
   제목이 구워진 자산(캐릭터 스토리 썸네일 · 신작 커버 · 구운 포스터/애니메이션 썸네일)에서는
   HTML 제목 레이어를 숨겨 중복 표기를 막고, 제목이 없는 자산(프로필 원본 · 캠페인 커버)에서는
   HTML 제목을 덮어 모든 썸네일이 읽을 수 있는 제목을 갖게 한다.
   나머지 배지는 썸네일 위에 올리지 않는다. */
.thumb-story-progress,
.thumb-story-live,
.thumb-frame-count,
.poster-badge,
.nox-release-badge,
.nox-release-genre,
.character-grid-new,
.character-grid-metric,
.nox-poster-copy {
  display: none !important;
}
/* 현재 프레임에 제목이 구워져 있으면 스크림까지 통째로 걷어 구운 제목의 대비를 지킨다. */
.has-baked-title > .thumb-story-overlay { display: none !important; }
.thumb-story-kicker[hidden],
.thumb-story-meta[hidden] { display: none; }


/* 썸네일 아래 한 줄 통계(댓글 · 소개 이미지). 이미지 안이 아니라 카드 흐름에 놓는다.
   catalog.css의 .card-stats는 이미지 위 절대 배치라 여기서는 쓰지 않는다. */
.thumb-stat-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: #97979f;
}
.thumb-stat-row .card-stat {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #97979f;
  font: 650 10px/1.35 var(--c-sans);
  letter-spacing: -.01em;
  white-space: nowrap;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.thumb-stat-row .card-stat i { color: #aa737a; font-size: 10px; line-height: 1; opacity: 1; }
.thumb-stat-row .card-stat b { overflow: hidden; color: #b9b9c1; font-weight: 700; text-overflow: ellipsis; }

.nox-poster-card .poster::after {
  display: none !important;
}

/* Tablet navigation shell is shared by every landscape and desktop viewport. */
.desktop-header-copy { display: none; }

@media (min-width: 768px) {
  body { padding-top: 0; }
  .desktop-login-panel { display: none !important; }
  .container {
    width: min(100%,960px) !important; max-width: 960px !important; margin: 0 auto !important; padding-top: 56px !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.035),0 0 70px rgba(0,0,0,.42);
  }
  .header {
    left: 50% !important; right: auto !important; width: min(100%,960px) !important; max-width: 960px !important;
    margin: 0 !important; transform: translateX(-50%) !important;
  }
  .hero2, .section-best, .footer { width: min(900px,calc(100% - 40px)) !important; }
}

/* The tablet shell stays compact on narrow tablets without folding nav labels. */
@media (min-width: 768px) and (max-width: 899px) {
  .header { padding-inline: 14px !important; gap: 2px; }
  .header .logo { margin-right: 6px !important; }
  .primary-nav { flex: none; }
  .primary-nav a,
  .primary-nav button { flex: none; padding-inline: 9px; white-space: nowrap; }
  .catalog-search { flex: 1 1 170px; width: auto; min-width: 150px; max-width: 210px; }
  .catalog-search input { padding-left: 10px; font-size: 11px; }
  .header-account { flex: none; margin-left: 6px; gap: 5px; }
  .header-pass { padding-inline: 9px; }
  .header-login { padding-inline: 11px; }
}

/* On desktop, the centered tablet canvas needs a visible physical edge. */
@media (min-width: 1024px) {
  html, body { background: #09090a !important; }
  .container {
    box-sizing: border-box;
    border-left: 1px solid rgba(255,255,255,.14);
    border-right: 1px solid rgba(255,255,255,.14);
    box-shadow: -14px 0 46px rgba(0,0,0,.28),14px 0 46px rgba(0,0,0,.28),inset 1px 0 rgba(216,31,42,.045),inset -1px 0 rgba(216,31,42,.045);
  }
  .header {
    box-sizing: border-box;
    border-left: 1px solid rgba(255,255,255,.14);
    border-right: 1px solid rgba(255,255,255,.14);
  }
}

/* Retained only as historical reference; the desktop-specific shell is retired. */
@media (min-width: 99999px) {
  :root { --nox-content: 1180px; --nox-sidebar-width: 232px; }
  body { padding-top: 0; }
  .container {
    width: calc(100% - var(--nox-sidebar-width)) !important;
    min-height: calc(100vh - 72px);
    margin: 0 0 0 var(--nox-sidebar-width) !important;
  }
  .header {
    left: var(--nox-sidebar-width) !important; right: 0 !important;
    width: calc(100% - var(--nox-sidebar-width)) !important; height: 72px !important;
    padding: 0 32px !important; gap: 16px;
    border-bottom-color: rgba(255,255,255,.075);
    background: rgba(15,15,16,.94) !important;
    backdrop-filter: blur(18px) !important;
  }
  .header .logo, .header .primary-nav { display: none !important; }
  .desktop-header-copy { min-width: 0; display: flex; align-items: baseline; gap: 12px; }
  .desktop-header-copy strong { color: #f4f4f2; font: 790 16px/1 var(--c-sans); letter-spacing: -.025em; }
  .desktop-header-copy span { color: rgba(255,255,255,.37); font: 570 11px/1 var(--c-sans); letter-spacing: -.01em; }
  .catalog-search { width: clamp(300px,30vw,430px); margin-left: auto; background: #1b1b1c; }
  .header-account { margin-left: 0; }

  .desktop-login-panel.desktop-app-sidebar {
    top: 0; bottom: 0; width: var(--nox-sidebar-width); display: flex !important;
    justify-content: flex-start; gap: 0; padding: 0 14px 16px; overflow-y: auto;
    border-right: 1px solid rgba(255,255,255,.075);
    background:
      radial-gradient(circle at 10% 18%,rgba(239,69,64,.09),transparent 27%),
      linear-gradient(180deg,#171718 0%,#121213 100%);
    color: #fff; scrollbar-width: none;
  }
  .desktop-login-panel.desktop-app-sidebar::-webkit-scrollbar { display: none; }
  .desktop-login-panel.desktop-app-sidebar::before { display: none; content: none; }
  .desktop-side-brand {
    min-height: 72px; display: flex; align-items: center; gap: 11px; padding: 0 9px;
    border-bottom: 1px solid rgba(255,255,255,.07); color: #fff; text-decoration: none;
  }
  .desktop-side-mark { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; background: rgba(255,255,255,.045); }
  .desktop-side-mark img { width: 20px; height: 23px; }
  .desktop-side-brand > span:last-child { display: grid; gap: 3px; }
  .desktop-side-brand strong { font: 820 17px/1 var(--c-sans); letter-spacing: -.04em; }
  .desktop-side-brand strong span { margin-left: 2px; color: #ff5a55; font-size: 11px; vertical-align: top; }
  .desktop-side-brand small { color: rgba(255,255,255,.34); font: 560 9px/1 var(--c-sans); }
  .desktop-side-section { padding-top: 21px; }
  .desktop-side-label { display: block; padding: 0 9px 9px; color: rgba(255,255,255,.27); font: 760 8px/1 var(--c-sans); letter-spacing: .14em; }
  .desktop-side-nav { display: grid; gap: 4px; }
  .desktop-side-nav > a, .desktop-side-nav > button {
    width: 100%; min-height: 54px; display: grid; grid-template-columns: 34px minmax(0,1fr) 14px;
    align-items: center; gap: 10px; padding: 6px 9px; border: 1px solid transparent; border-radius: 12px;
    background: transparent; color: rgba(255,255,255,.68); text-decoration: none; text-align: left; cursor: pointer;
    transition: color .16s ease,background .16s ease,border-color .16s ease,transform .16s ease;
  }
  .desktop-side-nav > a:hover, .desktop-side-nav > button:hover { background: rgba(255,255,255,.045); color: #fff; transform: translateX(2px); }
  .desktop-side-nav > a.active {
    border-color: rgba(255,97,90,.22); background: linear-gradient(90deg,rgba(240,68,61,.16),rgba(240,68,61,.055)); color: #fff;
  }
  .desktop-side-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.05); color: rgba(255,255,255,.58); font-size: 16px; }
  .desktop-side-nav > a.active .desktop-side-icon { background: #ed4b45; color: #fff; box-shadow: 0 7px 18px rgba(237,75,69,.22); }
  .desktop-side-nav > a > span:nth-child(2), .desktop-side-nav > button > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
  .desktop-side-nav strong { font: 710 12px/1 var(--c-sans); }
  .desktop-side-nav small { overflow: hidden; color: rgba(255,255,255,.3); font: 540 9px/1 var(--c-sans); text-overflow: ellipsis; white-space: nowrap; }
  .desktop-side-nav > a > i, .desktop-side-nav > button > i { color: rgba(255,255,255,.22); font-size: 13px; }
  .desktop-side-discovery {
    position: relative; overflow: hidden; margin: 23px 3px 0; padding: 17px 16px 16px;
    border: 1px solid rgba(255,255,255,.075); border-radius: 14px;
    background:
      radial-gradient(circle at 96% 0,rgba(204,55,66,.22),transparent 42%),
      linear-gradient(145deg,#25191c,#19191b 70%);
  }
  .desktop-side-discovery::after { content: ''; position: absolute; right: -15px; bottom: -22px; width: 76px; height: 76px; border: 1px solid rgba(255,255,255,.06); border-radius: 50%; }
  .desktop-side-discovery > span { display: flex; align-items: center; gap: 7px; color: #e38b91; font: 720 8px/1 var(--c-sans); letter-spacing: .06em; }
  .desktop-side-discovery > span i { width: 5px; height: 5px; border-radius: 50%; background: #ff615a; box-shadow: 0 0 0 4px rgba(255,97,90,.11); }
  .desktop-side-discovery strong { display: block; margin-top: 11px; color: rgba(255,255,255,.89); font: 760 13px/1.5 var(--c-sans); letter-spacing: -.025em; }
  .desktop-side-discovery a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; color: rgba(255,255,255,.46); font: 640 9px/1 var(--c-sans); text-decoration: none; }
  .desktop-side-discovery a:hover { color: #fff; }
  .desktop-side-bottom { display: grid; gap: 9px; margin-top: auto; padding: 20px 3px 0; }
  .desktop-side-credit {
    min-height: 58px; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 10px;
    padding: 8px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: rgba(255,255,255,.035); color: #fff; text-align: left; cursor: pointer;
  }
  .desktop-side-credit > span:first-child { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: rgba(242,193,92,.12); color: #f2c66f; font-size: 16px; }
  .desktop-side-credit > span:nth-child(2) { display: grid; gap: 4px; }
  .desktop-side-credit small { color: rgba(255,255,255,.32); font: 560 8.5px/1 var(--c-sans); }
  .desktop-side-credit strong { font: 790 15px/1 var(--c-sans); }
  .desktop-side-credit em { padding: 7px 9px; border-radius: 7px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.7); font: 700 9px/1 var(--c-sans); font-style: normal; }
  .desktop-side-auth { display: grid; gap: 8px; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: rgba(255,255,255,.03); }
  .desktop-side-auth-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .desktop-side-auth-heading > span { color: rgba(255,255,255,.5); font: 690 9px/1 var(--c-sans); }
  .desktop-side-auth-heading > button { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; color: rgba(255,255,255,.28); font: 620 8px/1 var(--c-sans); cursor: pointer; }
  .desktop-side-auth-heading > button:hover { color: rgba(255,255,255,.7); }
  .desktop-side-auth-heading > button i { font-size: 9px; }
  .desktop-social-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  .desktop-social-login {
    height: 36px; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 0 7px; border: 1px solid transparent; border-radius: 9px; color: #171717;
    font: 730 9.5px/1 var(--c-sans); letter-spacing: -.02em; cursor: pointer;
    transition: filter .16s ease,transform .14s ease,box-shadow .16s ease;
  }
  .desktop-social-login:hover { filter: brightness(.95); box-shadow: 0 7px 16px rgba(0,0,0,.18); transform: translateY(-1px); }
  .desktop-social-login:active { transform: scale(.97); }
  .desktop-social-login img { width: 20px; height: 20px; flex: none; display: block; object-fit: contain; }
  .desktop-social-login.is-kakao { border-color: #fee500; background: #fee500; }
  .desktop-social-login.is-kakao img { width: 18px; height: 18px; }
  .desktop-social-login.is-google { border-color: #747775; background: #fff; color: #1f1f1f; }
  .desktop-social-login.is-naver { border-color: #03a94d; background: #03a94d; color: #fff; }
  .desktop-social-login.is-apple { border-color: #fff; background: #fff; color: #000; }
  .desktop-side-bottom > p { margin: 3px 0 0; color: rgba(255,255,255,.22); font: 520 8px/1.4 var(--c-sans); text-align: center; }

  .hero2, .section-best, .footer { width: min(var(--nox-content),calc(100% - 64px)) !important; }
  .hero2 { height: 420px; padding-top: 0 !important; }
  .hero2-track { padding: 0 48px 10px !important; scroll-padding-inline: 48px; }
  .hero2-card { width: calc(100% - 96px) !important; height: 400px !important; }
  .hero2-body { left: 38px; right: 42%; bottom: 34px; }
  .hero2-title { font-size: 32px !important; }
  .section-best { margin-top: 8px; }
  .zero-campaign-feature { grid-template-columns: 260px minmax(0,1fr); min-height: 340px; }
  .zero-campaign-copy { padding-right: 54px; padding-left: 48px; }
  .zero-campaign-copy > strong { font-size: clamp(28px,2.5vw,38px); }

  .rail-reviews { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .footer { padding-right: 0 !important; padding-left: 0 !important; }
}

/* First-charge CTA: one responsive component, above the mobile navigation. */
.home-sale-float {
  --credit-float-size: 6.5rem;
  position: fixed;
  z-index: 900;
  right: max(20px, calc((100vw - 960px) / 2 + 20px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  box-sizing: border-box;
  width: var(--credit-float-size);
  height: var(--credit-float-size);
  padding: 14px;
  border: 1px solid #ff7185;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 15%, #f4425e, #dc203d 60%, #b90f2b);
  color: #fff;
  font-family: var(--nox-font-sans);
  text-align: center;
  box-shadow: 0 10px 28px rgba(0,0,0,.4), 0 4px 18px rgba(221,32,61,.24), inset 0 1px 0 rgba(255,255,255,.14);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease, visibility .18s;
}
.home-sale-float.is-open { opacity: 1; visibility: visible; transform: none; }
.home-sale-float.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.home-sale-float-icon {
  display: grid; place-items: center; width: 24px; height: 24px;
  color: #fff; font-size: 22px;
}
.home-sale-float-copy { min-width: 0; display: grid; gap: 2px; }
.home-sale-float-han { color: #fff; font-size: .75rem; font-weight: 600; line-height: 1.25; letter-spacing: -.025em; white-space: nowrap; }
.home-sale-float-offer { display: block; color: #fff; font-size: 1rem; font-weight: 800; line-height: 1.2; letter-spacing: -.035em; white-space: nowrap; }
@media (hover: hover) {
  .home-sale-float.is-open:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.45), 0 6px 22px rgba(221,32,61,.32); }
}
.home-sale-float.is-open:active { transform: translateY(1px); }
.home-sale-float:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@media (max-width: 767px) {
  .home-sale-float {
    --credit-float-size: 5.875rem;
    right: calc(12px + env(safe-area-inset-right, 0px));
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    padding: 12px; gap: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-sale-float { transition: none; }
  .home-sale-float.is-open:hover, .home-sale-float.is-open:active { transform: none; }
}

/* Credit purchase sheet — quiet, premium and native to the NOX product shell. */
.home-sale-popup { z-index: 7200; padding: 24px; }
.home-sale-backdrop { background: rgba(0,0,0,.84); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.home-sale-sheet {
  width: min(100%,560px); max-height: calc(100dvh - 32px); padding: 32px 30px 24px;
  border: 1px solid rgba(255,91,101,.2); border-radius: 22px;
  background:
    radial-gradient(circle at 88% 0,rgba(216,31,42,.17),transparent 32%),
    linear-gradient(180deg,#19191d 0%,#121214 100%);
  color: #f5f4f7; box-shadow: 0 34px 100px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.035);
}
.home-sale-sheet::before { left: 28px; right: 28px; height: 1px; background: linear-gradient(90deg,transparent,rgba(255,104,114,.5),transparent); }
.home-sale-close {
  top: 16px; right: 16px; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; background: rgba(255,255,255,.035); color: rgba(255,255,255,.48); font-size: 17px;
}
.home-sale-close:hover { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.07); color: #fff; }
.home-sale-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 48px 15px 0; }
.home-sale-eyebrow-icon {
  width: 34px; height: 34px; display: grid; place-items: center; flex: none; padding: 0; border: 1px solid rgba(255,104,114,.2);
  border-radius: 10px; background: rgba(216,31,42,.14); color: #ff9299; font-size: 15px; letter-spacing: 0;
}
.home-sale-eyebrow-copy { min-width: 0; display: grid; gap: 5px; padding: 0; border: 0; background: none; }
.home-sale-eyebrow-copy b { color: #ff8c94; font: 820 10px/1 var(--c-sans); letter-spacing: .14em; }
.home-sale-eyebrow-copy em { color: rgba(255,255,255,.68); font: 690 12px/1 var(--c-sans); font-style: normal; letter-spacing: -.01em; }
.home-sale-sheet h2 { margin: 0; color: rgba(255,255,255,.96); font: 800 31px/1.32 var(--c-sans); letter-spacing: -.045em; }
.home-sale-sheet h2 em { color: #fff; font-style: normal; text-shadow: none; white-space: normal; }
.home-sale-copy { margin: 13px 0 18px; color: rgba(255,255,255,.58); font: 550 13.5px/1.65 var(--c-sans); letter-spacing: -.01em; }
.home-sale-copy b { color: rgba(255,255,255,.76); font-weight: 720; }
.home-sale-usage { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-bottom: 22px; }
.home-sale-usage > span { min-width: 0; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 10px; padding: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.03); }
.home-sale-usage > span > i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.045); color: rgba(255,255,255,.57); font-size: 13px; }
.home-sale-usage > span > span { min-width: 0; display: grid; gap: 4px; }
.home-sale-usage small { overflow: hidden; color: rgba(255,255,255,.45); font: 590 10px/1 var(--c-sans); white-space: nowrap; text-overflow: ellipsis; }
.home-sale-usage strong { color: rgba(255,255,255,.9); font: 760 13px/1 var(--c-sans); }
.home-sale-plan-heading { margin: 0 2px 9px; font-family: var(--c-sans); }
.home-sale-plan-heading strong { color: rgba(255,255,255,.9); font-size: 14px; font-weight: 760; }
.home-sale-plan-heading > span { color: rgba(255,255,255,.44); font-size: 11px; font-weight: 600; letter-spacing: 0; }
.home-sale-plan-heading > span b { color: #ff8d95; font-weight: 780; }
.home-sale-plans { gap: 8px; margin-bottom: 12px; font-family: var(--c-sans); }
.home-sale-plan {
  min-height: 102px; grid-template-columns: 24px minmax(0,1fr) auto; gap: 13px; padding: 15px 17px;
  overflow: visible; border-color: rgba(255,255,255,.085); border-radius: 14px; background: #1a1a1e;
  font-family: var(--c-sans); box-shadow: none;
}
.home-sale-plan::before { display: none; }
.home-sale-plan:hover { border-color: rgba(255,255,255,.18); background: #1e1e22; }
.home-sale-radio { width: 20px; height: 20px; border-color: rgba(255,255,255,.18); background: rgba(0,0,0,.2); font-size: 10px !important; }
.home-sale-plan-info { gap: 4px; }
.home-sale-plan-name-row { min-height: 16px; gap: 6px; }
.home-sale-plan .home-sale-plan-name { color: rgba(255,255,255,.62); font-size: 12px; font-weight: 700; line-height: 1; }
.home-sale-plan-ribbon { position: static; padding: 3px 5px; border-radius: 5px; background: rgba(240,78,84,.15); color: #ff9ca3; font-size: 7.5px; font-weight: 820; line-height: 1; letter-spacing: .06em; }
.home-sale-plan.is-featured .home-sale-plan-ribbon { background: rgba(240,78,84,.15); color: #ff9ca3; }
.home-sale-plan-off { padding: 4px 6px; border-radius: 5px; background: #d72d39; color: #fff; font-size: 9px; font-weight: 820; box-shadow: 0 5px 14px rgba(215,45,57,.2); }
.home-sale-plan .home-sale-credit-amount { color: rgba(255,255,255,.96); font: 810 22px/1.15 var(--c-sans); letter-spacing: -.035em; }
.home-sale-plan em { color: rgba(255,255,255,.43); font-size: 11px; font-weight: 590; }
.home-sale-plan em span { color: #ff969e; font-weight: 690; }
.home-sale-plan-price { align-self: center; display: grid; justify-items: end; gap: 4px; }
.home-sale-plan-price small { color: #ff8d95; font: 720 9px/1 var(--c-sans); }
.home-sale-plan-price s { color: rgba(255,255,255,.34); font: 590 11.5px/1 var(--c-sans); }
.home-sale-plan-price strong { color: rgba(255,255,255,.94); font: 800 18px/1 var(--c-sans); letter-spacing: -.025em; }
.home-sale-selected { display: none !important; }
.home-sale-plan.is-selected { border-color: rgba(240,74,84,.72); background: linear-gradient(100deg,rgba(216,31,42,.19),rgba(255,255,255,.035)); box-shadow: inset 0 0 0 1px rgba(255,104,114,.08),0 12px 28px rgba(0,0,0,.22); }
.home-sale-plan.is-selected .home-sale-radio { border-color: #f0525c; background: #d72d39; color: #fff; box-shadow: 0 0 0 4px rgba(216,31,42,.14); }
.home-sale-plan.is-selected .home-sale-credit-amount { color: #fff; }
.home-sale-plan.is-selected .home-sale-plan-price strong { color: #fff; }
.home-sale-limit { min-height: 38px; display: flex; align-items: center; gap: 8px; margin: 0 0 13px; padding: 0 11px; border-radius: 9px; background: rgba(255,255,255,.03); color: rgba(255,255,255,.45); font: 570 11px/1.4 var(--c-sans); }
.home-sale-limit > i { color: rgba(255,255,255,.38); font-size: 12px; }
.home-sale-limit > span { display: none; }
.home-sale-cta { min-height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 19px; border: 1px solid rgba(255,111,120,.4); border-radius: 12px; background: linear-gradient(135deg,#ee4450,#a91624); color: #fff; font: 780 14.5px/1 var(--c-sans); box-shadow: 0 14px 32px rgba(148,18,31,.34),inset 0 1px 0 rgba(255,255,255,.18); }
.home-sale-cta:hover { filter: brightness(1.06); }
.home-sale-cta > i { font-size: 14px; }
.home-sale-later { margin-top: 10px; color: rgba(255,255,255,.32); font: 590 10.5px/1.3 var(--c-sans); }
.home-sale-later:hover { color: rgba(255,255,255,.66); }

@media (max-width: 600px) {
  .home-sale-popup { place-items: end center; padding: 0; }
  .home-sale-sheet { width: 100%; max-height: 92dvh; padding: 25px 18px calc(16px + env(safe-area-inset-bottom)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 22px 22px 0 0; }
  .home-sale-sheet::before { left: 34%; right: 34%; top: 8px; height: 3px; border-radius: 999px; background: rgba(255,255,255,.15); }
  .home-sale-close { top: 18px; right: 16px; }
  .home-sale-eyebrow { margin-bottom: 12px; }
  .home-sale-sheet h2 { font-size: 26px; }
  .home-sale-copy { margin: 10px 0 14px; font-size: 12.5px; }
  .home-sale-usage { gap: 6px; margin-bottom: 18px; }
  .home-sale-usage > span { grid-template-columns: 26px minmax(0,1fr); gap: 7px; padding: 8px; }
  .home-sale-usage > span > i { width: 26px; height: 26px; border-radius: 8px; font-size: 11px; }
  .home-sale-plan { min-height: 92px; grid-template-columns: 20px minmax(0,1fr) auto; gap: 9px; padding: 12px; }
  .home-sale-plan .home-sale-credit-amount { font-size: 19px; }
  .home-sale-plan-price strong { font-size: 15.5px; }
  .home-sale-limit { padding: 7px 9px; }
}

/* AI image feature — a compact red editorial card, separate from the credit advert. */
.deep-block { margin-top: 38px; }
.deep-card {
  position: relative;
  width: 100%;
  min-height: 148px;
  display: grid;
  grid-template-columns: 92px minmax(0,1fr) 38px;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,91,101,.58);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0 0,rgba(216,31,42,.2),transparent 42%),
    linear-gradient(135deg,#211316 0%,#171315 56%,#111113 100%);
  color: #fff;
  text-align: left;
  box-shadow: 0 18px 42px rgba(0,0,0,.35),inset 0 0 0 1px rgba(121,17,29,.38),inset 0 1px rgba(255,255,255,.055);
  isolation: isolate;
  cursor: pointer;
  transition: border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.deep-card::before {
  content: '';
  position: absolute;
  z-index: -1;
  right: -46px;
  top: -74px;
  width: 188px;
  height: 188px;
  border: 1px solid rgba(255,255,255,.045);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(255,255,255,.018),0 0 0 60px rgba(216,31,42,.018);
}
.deep-card::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 18px;
  right: 18px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(255,104,114,.65),transparent);
}
.deep-card:hover { border-color: rgba(255,118,126,.82); transform: translateY(-2px); box-shadow: 0 22px 52px rgba(0,0,0,.43),0 0 34px rgba(171,25,38,.12),inset 0 0 0 1px rgba(139,21,34,.5); }
.deep-card:focus-visible { outline: 2px solid #ff6973; outline-offset: 3px; }
.deep-visual {
  position: relative;
  width: 92px;
  height: 112px;
  display: block;
  flex: none;
  border-radius: 14px;
}
.deep-visual-frame {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,126,134,.52);
  border-radius: 14px;
  background:
    radial-gradient(circle at 62% 30%,rgba(255,111,121,.36),transparent 25%),
    linear-gradient(150deg,#6c202b 0%,#2f151a 48%,#151116 100%);
  color: rgba(255,255,255,.8);
  box-shadow: inset 0 1px rgba(255,255,255,.08),0 10px 25px rgba(0,0,0,.3);
}
.deep-visual-frame::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 11px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 42% 58% 10px 10px;
  background: linear-gradient(150deg,rgba(255,255,255,.13),rgba(255,255,255,.025));
  transform: rotate(-4deg);
}
.deep-visual-frame::after {
  content: '';
  position: absolute;
  left: 14px;
  top: 13px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(10,8,10,.34);
  box-shadow: 29px 30px 0 -13px rgba(255,255,255,.2);
}
.deep-visual-frame > i { position: relative; z-index: 2; margin-top: 62px; color: rgba(255,255,255,.76); font-size: 19px; }
.deep-visual-spark {
  position: absolute;
  right: -7px;
  top: -7px;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,139,147,.28);
  border-radius: 10px;
  background: #3a161c;
  color: #ff8c94;
  box-shadow: 0 7px 18px rgba(0,0,0,.34);
}
.deep-visual-spark i { font-size: 13px; }
.deep-text { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.deep-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 9px; }
.deep-badge { display: inline-flex; align-items: center; min-height: 21px; padding: 0 8px; border: 1px solid rgba(255,120,129,.27); border-radius: 6px; background: rgba(216,31,42,.16); color: #ff8c94; font: 810 8px/1 var(--c-sans); letter-spacing: .12em; }
.deep-kicker > em { color: rgba(255,255,255,.33); font: 620 8.5px/1 var(--c-sans); font-style: normal; letter-spacing: .01em; }
.deep-title { color: rgba(255,255,255,.96); font: 780 18px/1.3 var(--c-sans); letter-spacing: -.04em; }
.deep-desc { max-width: 560px; margin-top: 7px; color: rgba(255,255,255,.5); font: 520 11px/1.55 var(--c-sans); letter-spacing: -.012em; }
.deep-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.deep-meta > span { display: inline-flex; align-items: center; gap: 5px; min-height: 23px; padding: 0 8px; border: 1px solid rgba(255,255,255,.065); border-radius: 7px; background: rgba(255,255,255,.035); color: rgba(255,255,255,.48); font: 600 8px/1 var(--c-sans); }
.deep-meta i { color: #e8626b; font-size: 10px; }
.deep-action { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,109,118,.22); border-radius: 12px; background: rgba(216,31,42,.14); color: #ff8c94; transition: background .18s ease,color .18s ease,transform .18s ease; }
.deep-action i { font-size: 15px; }
.deep-card:hover .deep-action { background: #d72d39; color: #fff; transform: translate(1px,-1px); }

@media (max-width: 600px) {
  .deep-block { margin-top: 32px; }
  .deep-card { width: 100%; min-height: 137px; grid-template-columns: 76px minmax(0,1fr) 32px; gap: 12px; margin-inline: 0; padding: 14px; border-radius: 16px; }
  .deep-visual { width: 76px; height: 96px; }
  .deep-visual-frame { border-radius: 12px; }
  .deep-visual-frame::before { left: 8px; right: 8px; bottom: 9px; height: 36px; }
  .deep-visual-frame::after { left: 11px; top: 11px; width: 31px; height: 31px; box-shadow: 24px 25px 0 -11px rgba(255,255,255,.2); }
  .deep-visual-frame > i { margin-top: 50px; font-size: 16px; }
  .deep-visual-spark { right: -5px; top: -5px; width: 25px; height: 25px; border-radius: 8px; }
  .deep-visual-spark i { font-size: 11px; }
  .deep-kicker { gap: 6px; margin-bottom: 7px; }
  .deep-badge { min-height: 19px; padding-inline: 6px; font-size: 7px; }
  .deep-kicker > em { font-size: 7.5px; }
  .deep-title { font-size: 15px; }
  .deep-desc { max-width: 330px; margin-top: 5px; font-size: 9.5px; line-height: 1.48; }
  .deep-meta { gap: 4px; margin-top: 8px; }
  .deep-meta > span { min-height: 20px; padding-inline: 6px; font-size: 7.2px; }
  .deep-meta i { font-size: 9px; }
  .deep-action { width: 32px; height: 32px; border-radius: 10px; }
  .deep-action i { font-size: 13px; }
}

@media (max-width: 390px) {
  .deep-card { grid-template-columns: 70px minmax(0,1fr); }
  .deep-visual { width: 70px; height: 94px; }
  .deep-action { display: none; }
  .deep-desc { font-size: 9px; }
}

/* Main story carousel: stable snapping, responsive media formats and a protected top focal area. */
.hero2-track {
  scroll-behavior: smooth;
  scroll-snap-stop: always;
  touch-action: pan-x pan-y;
}
.hero2-card { transform: translateZ(0); }
.hero2-card[aria-current="true"] { border-color: rgba(255,255,255,.12); }
.hero2-img,
.hero2-campaign .hero2-img,
.villains-hero-card .hero2-img {
  object-position: center top !important;
  transform: translateZ(0);
}

@media (min-width: 768px) {
  .hero2 { height: auto !important; overflow: visible hidden; }
  .hero2-track { align-items: flex-start; padding-top: 10px !important; padding-bottom: 16px !important; }
  .hero2-card {
    width: min(700px,calc(100% - 28px)) !important;
    height: auto !important;
    aspect-ratio: 16 / 8.15 !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 767px) {
  .hero2 { padding-top: 8px !important; }
  .hero2-track { align-items: flex-start; padding-top: 0 !important; padding-bottom: 8px !important; }
  .hero2-card {
    height: auto !important;
    aspect-ratio: 4 / 4.55 !important;
    border-radius: 14px !important;
  }
  .hero2-body { bottom: 22px; }
}
/* Varied cover identities: each leading story gets its own editorial frame language. */










/* Responsive repair: tablet hero preserves the complete artwork instead of cropping portrait sources. */
.hero2-backdrop { display: none; }
@media (min-width: 768px) {
  .hero2 { height: auto !important; overflow: hidden !important; }
  .hero2-track {
    --tablet-hero-width: min(680px,calc(100vw - 96px));
    align-items: flex-start;
    gap: 10px;
    padding: 10px calc((100% - var(--tablet-hero-width)) / 2) 18px !important;
    scroll-padding-inline: calc((100% - var(--tablet-hero-width)) / 2) !important;
  }
  .hero2-card {
    width: var(--tablet-hero-width) !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 14px !important;
    background: #0b0c0e;
  }
  .hero2-backdrop {
    position: absolute;
    z-index: 0;
    inset: -18px;
    width: calc(100% + 36px);
    height: calc(100% + 36px);
    display: block;
    object-fit: cover;
    object-position: center;
    filter: blur(20px) brightness(.38) saturate(.82);
    transform: scale(1.06);
    opacity: .9;
    pointer-events: none;
  }
  .hero2-img {
    z-index: 1;
    object-fit: contain !important;
    object-position: center !important;
  }
  .hero2-card:not(.hero2-campaign) .hero2-img { object-position: right center !important; }
  .hero2-grad { z-index: 2; }
  .hero2-body { z-index: 3; }
  .hero2-counter { z-index: 4; }
}

/* Mobile ranking repair: grid tracks own the card width, preventing horizontal collisions. */
@media (max-width: 767px) {






}
@media (max-width: 359px) {

}

/* Tablet hero fix: one complete 3:2 frame, deterministic navigation and no clipped neighbours. */
@media (min-width: 768px) {
  .hero2 {
    isolation: isolate;
    overflow: hidden !important;
  }
  .hero2-track {
    --tablet-hero-width: min(780px,100%);
    gap: 12px;
    padding: 10px calc((100% - var(--tablet-hero-width)) / 2) 18px !important;
    scroll-padding-inline: calc((100% - var(--tablet-hero-width)) / 2) !important;
    overscroll-behavior-x: contain;
  }
  .hero2-card {
    width: var(--tablet-hero-width) !important;
    aspect-ratio: 3 / 2 !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .hero2-img,
  .hero2-campaign .hero2-img,
  .villains-hero-card .hero2-img {
    object-fit: contain !important;
    object-position: center !important;
  }
  .hero2-card:not(.hero2-campaign) .hero2-img { object-position: right center !important; }
  .hero2-nav {
    top: 50%;
    bottom: auto;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(7,7,9,.7);
    box-shadow: 0 8px 22px rgba(0,0,0,.32);
    transform: translateY(-50%);
  }
  .hero2-nav.prev { left: 14px; }
  .hero2-nav.next { right: 14px; }
  .hero2-nav:active { transform: translateY(-50%) scale(.94); }
  .hero2-nav i { font-size: 18px; }
}

@media (max-width: 767px) {
  .hero2-nav { display: none !important; }
}

/* Horizontal legal footer: wide information rail with minimal vertical weight. */
.footer-inner {
  width: 100% !important;
  max-width: none !important;
}
.footer-topline {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 20px;
}
.footer-topline .footer-brand-row {
  justify-content: flex-start;
  gap: 10px;
  white-space: nowrap;
}
.footer-topline .footer-business {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px 16px;
  margin: 0;
  padding: 9px 12px 9px 18px;
  border: 0;
  border-left: 1px solid rgba(255,255,255,.08);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.footer-topline .footer-business-head {
  min-height: 0;
  flex: none;
  padding: 0;
  border: 0;
}
.footer-topline .footer-business-head strong {
  color: rgba(255,255,255,.42);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.footer-topline .footer-business-grid,
.footer-topline .footer-support {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.footer-topline .footer-business-grid { flex: 1 1 380px; }
.footer-topline .footer-business-grid div,
.footer-topline .footer-business-grid div:last-child,
.footer-topline .footer-support > span {
  min-height: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 0;
  border: 0;
  white-space: nowrap;
}
.footer-topline .footer-business-grid dt,
.footer-topline .footer-support small {
  color: rgba(255,255,255,.4);
  font-size: 9.5px;
  font-weight: 470;
}
.footer-topline .footer-business-grid dd,
.footer-topline .footer-support a,
.footer-topline .footer-support b {
  color: rgba(255,255,255,.43);
  font-size: 11px;
  font-weight: 520;
}
.footer-bottomline {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center;
  gap: 10px 18px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.055);
}
.footer-bottomline .footer-notice,
.footer-bottomline .footer-copyright { margin: 0 !important; }
.footer-bottomline .footer-notice {
  overflow: hidden;
  font-size: 7.5px !important;
  line-height: 1.4 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.footer-bottomline .footer-links {
  flex-wrap: nowrap;
  margin: 0 !important;
  white-space: nowrap;
}
.footer-bottomline .footer-links a { font-size: 7.5px !important; }
.footer-bottomline .footer-copyright {
  font-size: 6px !important;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .footer { padding-top: 18px !important; padding-bottom: 34px !important; }
}

@media (max-width: 767px) {
  .footer-topline { grid-template-columns: 1fr; gap: 9px; }
  .footer-topline .footer-business { padding: 12px 0 2px; border-top: 1px solid rgba(255,255,255,.055); border-left: 0; }
  .footer-bottomline { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-top: 10px; padding-top: 9px; }
  .footer-bottomline .footer-notice { flex-basis: 100%; white-space: normal; }
  .footer-bottomline .footer-copyright { margin-left: auto !important; }
}

/* Main carousel v2: a single full-width 16:9 story frame with explicit pagination. */
.hero2-pagination { display: none; }
@media (min-width: 768px) {
  .hero2 { overflow: hidden !important; }
  .hero2-track {
    --tablet-hero-width: 100%;
    gap: 0 !important;
    padding: 0 0 24px !important;
    scroll-padding-inline: 0 !important;
  }
  .hero2-card {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 14px !important;
    scroll-snap-align: start;
  }
  .hero2-body {
    left: 30px;
    right: 42%;
    bottom: 28px;
  }
  .hero2-title { font-size: clamp(25px,3.4vw,31px) !important; }
  .hero2-nav {
    top: calc(50% - 12px);
    width: 40px;
    height: 40px;
  }
  .hero2-nav.prev { left: 14px; }
  .hero2-nav.next { right: 14px; }
  .hero2-pagination {
    position: absolute;
    z-index: 8;
    left: 50%;
    bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transform: translateX(-50%);
  }
  .hero2-pagination button {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.25);
    cursor: pointer;
    transition: width .18s ease,background .18s ease;
  }
  .hero2-pagination button.is-active {
    width: 20px;
    background: #f04b45;
  }
}

@media (max-width: 767px) {
  .hero2-pagination { display: none !important; }
}
/* New-release rail: restore real horizontal sliding on tablet and desktop. */








@media (min-width: 768px) {



}

/* Compact story-linked reviews: centered in the middle of the home feed. */
.compact-review-block {
  width: min(820px,100%);
  margin: 18px auto 42px !important;
}
.compact-review-heading { text-align: center; }
.compact-review-heading .rail-eyebrow,
.compact-review-heading .rail-label { padding-right: 0 !important; padding-left: 0 !important; }
.compact-review-heading .rail-label { margin-bottom: 16px; font-size: 17px; }
.compact-review-heading .rail-eyebrow { font-size: 10.5px; }
.compact-review-heading .review-score { font-size: 11px; vertical-align: 1px; }
.compact-review-block .rail-reviews {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 12px !important;
  overflow: visible !important;
  padding: 0 !important;
}
.compact-review-block .review-card {
  width: 100% !important;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 102px minmax(0,1fr);
  align-items: stretch;
  gap: 15px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 13px;
  background: #171716;
  color: inherit;
  text-align: left;
  box-shadow: none;
  cursor: pointer;
}
.compact-review-block .review-card::before { display: none; }
.compact-review-block .review-card:hover {
  border-color: rgba(240,75,69,.28);
  background: #1c1b1b;
}
.compact-review-block .review-thumb {
  position: relative;
  width: 102px;
  aspect-ratio: 2/3;
  align-self: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  background: #0e0e0e;
}
.compact-review-block .review-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.compact-review-block .review-thumb em {
  position: absolute;
  right: 3px;
  bottom: 3px;
  left: 3px;
  overflow: hidden;
  padding: 3px 2px;
  border-radius: 4px;
  background: rgba(7,7,7,.76);
  color: rgba(255,255,255,.88);
  font: 700 8.5px/1 var(--c-sans);
  font-style: normal;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  backdrop-filter: blur(4px);
}
.compact-review-block .review-body { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 3px 0; }
.compact-review-block .review-title { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.compact-review-block .review-title strong {
  overflow: hidden;
  color: rgba(255,255,255,.9);
  font: 740 13px/1.25 var(--c-sans);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.compact-review-block .review-title > span { flex: none; color: #ffb43a; font: 750 10.5px/1 var(--c-sans); }
.compact-review-block .review-text {
  min-height: 0;
  margin: 0;
  color: rgba(255,255,255,.64);
  font: 550 11.5px/1.6 var(--c-sans);
  letter-spacing: -.02em;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}
.compact-review-block .review-body small { margin-top: auto; color: rgba(255,255,255,.38); font: 600 9.25px/1 var(--c-sans); }

@media (min-width: 768px) and (max-width: 899px) {
  .compact-review-block { width: min(690px,100%); }
  .compact-review-block .rail-reviews { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width: 767px) {
  .compact-review-block { width: auto; margin: 10px 0 36px !important; }
  .compact-review-heading { padding: 0 20px; }
  .compact-review-block .rail-reviews {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 20px 4px !important;
    scroll-padding-inline: 20px;
    scroll-snap-type: x proximity;
  }
  .compact-review-block .review-card {
    width: 310px !important;
    flex: 0 0 310px !important;
    grid-template-columns: 84px minmax(0,1fr);
    scroll-snap-align: start;
  }
  .compact-review-block .review-thumb { width: 84px; }
}

/* Footer legal copy: readable without making the horizontal footer bulky. */
.footer-bottomline .footer-notice {
  color: rgba(255,255,255,.46) !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -.01em;
}
.footer-bottomline .footer-links a {
  color: rgba(255,255,255,.58) !important;
  font-size: 9px !important;
  font-weight: 620 !important;
}
.footer-bottomline .footer-copyright {
  color: rgba(255,255,255,.3) !important;
  font-size: 7.25px !important;
  font-weight: 560 !important;
}

@media (max-width: 767px) {
  .footer-bottomline .footer-notice { font-size: 10px !important; line-height: 1.55 !important; }
  .footer-bottomline .footer-links a { font-size: 9.5px !important; }
  .footer-bottomline .footer-copyright { font-size: 7.75px !important; }
}

/* Type comfort pass: enlarge the small-copy layer without changing layout scale. */
body { font-size: 15px; }
.rail-eyebrow { font-size: 13px; }
.rail-label { font-size: 20.5px; }
.hero2-sub { font-size: 11.75px !important; line-height: 1.5; }
.rank-tab { font-size: 11.75px; }



.nox-release-genre { font-size: 9.75px; }







.nox-poster-copy span { font-size: 8.5px; }
.nox-poster-copy strong { font-size: 15.5px; }
.nox-poster-copy em { font-size: 9.75px; }
.compact-review-heading .rail-eyebrow { font-size: 11.25px; }
.compact-review-heading .rail-label { font-size: 19px; }
.compact-review-heading .review-score { font-size: 12.5px; }
.compact-review-block .review-title strong { font-size: 13px; }
.compact-review-block .review-title > span { font-size: 10.5px; }
.compact-review-block .review-text { font-size: 11.5px; line-height: 1.6; }
.compact-review-block .review-body small { font-size: 9.25px; }
.footer-topline .footer-business-head strong { font-size: 11.5px; }
.footer-topline .footer-business-grid dt,
.footer-topline .footer-support small { font-size: 10px; }
.footer-topline .footer-business-grid dd,
.footer-topline .footer-support a,
.footer-topline .footer-support b { font-size: 11.5px; }

@media (max-width: 767px) {
  .rail-eyebrow { font-size: 12px; }
  .rail-label { font-size: 19px; }
  .hero2-sub { font-size: 11.5px !important; }
  .rank-tab { font-size: 11.5px; }


  .nox-release-genre { font-size: 9.25px; }







  .nox-poster-copy span { font-size: 7px; }
  .nox-poster-copy strong { font-size: 11px; }
  .compact-review-heading .rail-eyebrow { font-size: 11px; }
  .compact-review-heading .rail-label { font-size: 18.5px; }
  .compact-review-block .review-title strong { font-size: 12.25px; }
  .compact-review-block .review-title > span { font-size: 10px; }
  .compact-review-block .review-text { font-size: 10.75px; line-height: 1.58; }
  .compact-review-block .review-body small { font-size: 9px; }
  .bottom-nav-label { font-size: 10px !important; }
}

@media (max-width: 767px) {






}

/* Home-only micro type lift: improve readability without changing the card scale. */
body:not(.character-page) { font-size: 15.5px; }
body:not(.character-page) .catalog-search input { font-size: 12px; }
body:not(.character-page) .header-pass,
body:not(.character-page) .header-login { font-size: 11.5px; }
body:not(.character-page) .rail-eyebrow { font-size: 13.5px; }
body:not(.character-page) .rail-label { font-size: 21px; }
body:not(.character-page) .rank-tab { font-size: 12.25px; }
body:not(.character-page) .rank-live { font-size: 9.5px; }







body:not(.character-page) .footer-topline .footer-business-head strong { font-size: 12px; }
body:not(.character-page) .footer-topline .footer-business-grid dt,
body:not(.character-page) .footer-topline .footer-support small { font-size: 10.5px; }
body:not(.character-page) .footer-topline .footer-business-grid dd,
body:not(.character-page) .footer-topline .footer-support a,
body:not(.character-page) .footer-topline .footer-support b { font-size: 12px; }

@media (max-width: 767px) {
  body:not(.character-page) .rail-eyebrow { font-size: 12.5px; }
  body:not(.character-page) .rail-label { font-size: 19.5px; }
  body:not(.character-page) .rank-tab { font-size: 12px; }







}

/* Home closer: story-first unread messages instead of another repeated poster rail. */
.night-inbox {
  margin: 10px 0 28px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0,rgba(216,31,42,.09),transparent 38%),
    rgba(255,255,255,.018);
}
.night-inbox-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.night-inbox-heading .rail-eyebrow,
.night-inbox-heading .rail-label { margin-right: 0; margin-left: 0; padding: 0 !important; }
.night-inbox-heading .rail-label { margin-bottom: 0; }
.night-inbox-unread {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  color: rgba(255,255,255,.45);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  white-space: nowrap;
}
.night-inbox-unread i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f0323f;
  box-shadow: 0 0 0 4px rgba(240,50,63,.1),0 0 12px rgba(240,50,63,.65);
}
.night-message-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.night-message-card {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr);
  grid-template-rows: auto 1fr auto;
  gap: 0 11px;
  min-width: 0;
  min-height: 160px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  color: #fff;
  background: rgba(13,13,15,.86);
  text-decoration: none !important;
  transition: transform .2s ease,border-color .2s ease,background .2s ease;
}
.night-message-card::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -44px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(216,31,42,.1);
  filter: blur(28px);
  pointer-events: none;
}
.night-message-card:hover {
  border-color: rgba(240,50,63,.38);
  background: rgba(24,17,19,.94);
  transform: translateY(-3px);
}
.night-message-profile { position: relative; grid-row: 1; width: 44px; height: 44px; }
.night-message-profile img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }
.night-message-profile i { position: absolute; right: 0; bottom: 1px; width: 10px; height: 10px; border: 2px solid #111; border-radius: 50%; background: #35d17a; }
.night-message-meta { display: grid; align-content: center; gap: 3px; min-width: 0; }
.night-message-meta strong { overflow: hidden; font-size: 13.5px; font-weight: 760; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.night-message-meta small { overflow: hidden; color: rgba(255,255,255,.38); font-size: 9.5px; font-weight: 540; text-overflow: ellipsis; white-space: nowrap; }
.night-message-copy { grid-column: 1 / -1; align-self: center; margin-top: 13px; color: rgba(255,255,255,.78); font-size: 12.5px; font-weight: 570; line-height: 1.55; letter-spacing: -.02em; word-break: keep-all; }
.night-message-open { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; color: #f06a74; font-size: 10.5px; font-weight: 760; }
.night-message-open i { font-size: 12px; transition: transform .2s ease; }
.night-message-card:hover .night-message-open i { transform: translate(2px,-2px); }
.night-message-card.is-urgent { border-color: rgba(240,50,63,.2); }
.night-message-card.is-urgent .night-message-profile i { background: #f0323f; box-shadow: 0 0 9px rgba(240,50,63,.7); }

@media (max-width: 767px) {
  .night-inbox { margin: 5px 20px 24px; padding: 16px 0 16px 16px; border-radius: 16px; }
  .night-inbox-heading { padding-right: 16px; }
  .night-inbox-heading .rail-label { font-size: 19.5px; }
  .night-message-grid { display: flex; gap: 9px; overflow-x: auto; padding-right: 16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .night-message-grid::-webkit-scrollbar { display: none; }
  .night-message-card { flex: 0 0 84%; min-height: 154px; scroll-snap-align: start; }
  .night-message-copy { font-size: 12.25px; }
}

/* Home thumbnail scale: a modest lift without changing the 2:3 asset specification. */
@media (min-width: 768px) {



  body:not(.character-page) .nox-poster-card .poster {
    width: 160px !important;
    height: 240px !important;
  }
}

@media (max-width: 767px) {
  body:not(.character-page) { --nox-card-thumb: calc((100vw - 48px) / 2); }


}
/* First-charge CTA: compact pill instead of the large circle so it stays out of the content's way. */
.home-sale-float {
  --credit-float-size: auto;
  width: auto; height: 44px; padding: 0 16px 0 12px;
  display: inline-flex; align-items: center; gap: 8px; border-radius: 999px;
}
.home-sale-float-icon { width: 20px; height: 20px; font-size: 18px; }
.home-sale-float-copy { display: inline-flex; align-items: baseline; gap: 4px; }
.home-sale-float-han { font-size: .8rem; }
.home-sale-float-offer { font-size: .85rem; }
@media (max-width: 767px) {
  .home-sale-float { height: 40px; padding: 0 14px 0 11px; gap: 6px; }
  .home-sale-float-han { font-size: .75rem; }
  .home-sale-float-offer { font-size: .8rem; }
}

/* First-charge pill: a slow light sweep so it reads as an offer, not a static chip. */
.home-sale-float { position: fixed; overflow: hidden; isolation: isolate; }
.home-sale-float::after {
  content: ''; position: absolute; inset: -40% auto -40% -60%; width: 45%; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.05) 35%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.05) 65%, transparent 100%);
  transform: translateX(0) skewX(-18deg);
  animation: homeSaleShine 3.4s cubic-bezier(.4,0,.2,1) infinite;
}
.home-sale-float > * { position: relative; z-index: 2; }
@keyframes homeSaleShine {
  0%, 55% { transform: translateX(0) skewX(-18deg); }
  100% { transform: translateX(400%) skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) { .home-sale-float::after { animation: none; display: none; } }

/* 알 수 없는 주소: 홈 대신 404 상태를 보여준다. */
.nox-not-found { max-width: 560px; margin: 12vh auto; padding: 0 24px; text-align: center; }
.nox-not-found-code { margin: 0; font-size: 64px; font-weight: 900; letter-spacing: -.04em; color: #ff5774; }
.nox-not-found h1 { margin: 6px 0 10px; font-size: 22px; letter-spacing: -.03em; }
.nox-not-found p { margin: 0; color: #a3a3ae; }
.nox-not-found-home { display: inline-flex; align-items: center; margin-top: 22px; padding: 12px 22px; border-radius: 999px; background: #ef3a58; color: #fff; font-weight: 700; text-decoration: none; }
body.not-found .container > :not(header):not(#notFound), body.not-found .home-sale-float, body.not-found .bottom-nav, body.not-found .app-download-banner { display: none !important; }