.app-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: calc(var(--header-height) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--page-gutter) 0;
  background: var(--color-header);
}
.header-inner { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; max-width: var(--page-max); margin-inline: auto; }
.header-inner .brand { margin-right: auto; }
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex-shrink: 0;
  padding: 0;
  background: none;
  color: white;
  font-size: 31px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -.06em;
}
.brand svg { width: 28px; height: 28px; margin-right: 3px; color: #ff347a; }
.brand img { width: 28px; height: 31px; margin-right: 5px; object-fit: contain; }
.brand span, .brand-mark { color: #ff347a; }
.header-actions { display: flex; align-items: center; gap: 10px; min-width: 0; }
.header-actions .icon-btn { background: #291222; color: #ff2a8d; border-radius: 20px; width: 48px; }
.contact-btn { min-height: 44px; padding: 8px 13px; border: 1px solid var(--color-border); border-radius: 24px; background: #291222; font-size: 12px; font-weight: 600; white-space: nowrap; }
.page { max-width: var(--page-max); margin: 0 auto; padding: 48px var(--page-gutter) 0; min-width: 0; }
.page > section + section { margin-top: 48px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; min-width: 0; }
.section-heading h1, .section-heading h2 { min-width: 0; overflow-wrap: anywhere; }
.section-heading h2.accent, .accent-text { background: var(--brand-gradient); background-clip: text; -webkit-background-clip: text; color: transparent; }
.section-description { color: var(--color-muted); margin: -12px 0 22px; line-height: 20px; }
.drama-rail {
  display: flex;
  gap: 12px;
  margin: -6px calc(-1 * var(--page-gutter)) 0;
  padding: 6px var(--page-gutter) 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--page-gutter);
  scrollbar-width: thin;
  scrollbar-color: #672345 transparent;
}
.drama-card {
  display: block;
  flex: 0 0 var(--rail-card-width);
  min-width: 0;
  width: var(--rail-card-width);
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, #210b19, #1e0715);
  text-align: left;
  scroll-snap-align: start;
}
.poster-wrap { display: block; position: relative; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--radius-card); background: #2c1122; isolation: isolate; }
.poster-wrap img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 2 / 3; }
.poster-wrap::after { content: ""; position: absolute; inset: auto 0 0; height: 32%; background: linear-gradient(transparent, rgb(12 2 9 / 30%)); pointer-events: none; }
.access-badge {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 12px);
  padding: 3px 8px;
  border-radius: 6px;
  background: rgb(23 5 17 / 87%);
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.access-badge.is-member { color: #fff; background: linear-gradient(110deg, #ff125a, #a1094b); }
.drama-card h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 36px; margin: 10px 6px 6px; overflow-wrap: anywhere; }
.drama-card > p, .drama-card .card-meta { color: var(--color-muted); font-size: 12px; line-height: 18px; margin: 3px 6px 8px; }
.catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
.catalog-grid .drama-card { width: 100%; }
.detail-page { padding-top: 28px; }
.detail-summary { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 28px; }
.detail-poster { flex: 0 0 104px; width: 104px; height: auto; aspect-ratio: 2 / 3; border-radius: 12px; object-fit: cover; background: var(--color-surface); }
.detail-copy { min-width: 0; padding-top: 4px; }
.detail-copy h1 { margin-bottom: 10px; overflow-wrap: anywhere; }
.detail-copy p { color: var(--color-muted); margin-top: 8px; }
.detail-label { display: block; margin-bottom: 8px; color: #d0acbf; font-size: 11px; line-height: 16px; }
.genre-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; color: #d7c4ce; }
.genre-tags span { padding: 3px 7px; border-radius: 5px; background: rgb(255 255 255 / 7%); font-size: 11px; line-height: 16px; overflow-wrap: anywhere; }
.detail-copy .access-badge { display: inline-flex; position: static; transform: none; max-width: 100%; margin-top: 10px; white-space: normal; }
.detail-actions { display: flex; gap: 12px; margin-bottom: 32px; }
.detail-actions .primary-btn { flex: 1; }
.detail-actions .secondary-btn { flex: 0 1 auto; }
.detail-actions .secondary-btn[aria-pressed="true"] { border-color: #f073ac; background: #5b2141; }
.synopsis { margin: 0 0 24px; color: var(--color-muted); }
.synopsis h2 { margin-bottom: 12px; color: var(--color-text); }
.synopsis p { font-size: 14px; line-height: 21px; overflow-wrap: anywhere; }
.synopsis .is-collapsed { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.synopsis .text-btn { color: #ff85af; padding-left: 0; }
.detail-page > .primary-btn, .watch-action .primary-btn { width: 100%; }
.detail-page > .section-heading { margin-top: 32px; }
.episode-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.episode-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 54px; min-width: 0; padding: 6px 2px; border: 1px solid var(--color-border); border-radius: 9px; background: #39272e; font-weight: 650; font-size: 14px; line-height: 18px; }
.episode-cell svg { width: 12px; height: 12px; }
.episode-cell small, .episode-cell .lock-label { display: flex; align-items: center; gap: 2px; font-size: 10px; line-height: 14px; font-weight: 500; }
.episode-cell.is-current, .episode-cell[aria-current="true"] { border-color: #f547a5; background: #652345; box-shadow: inset 0 0 0 1px #f547a5; color: #fff; }
.episode-cell.is-locked { color: #ead5c5; }
.episode-cell.is-locked small { color: #e6ba8b; }
.overlay { position: fixed; z-index: 100; inset: 0; display: flex; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: rgb(0 0 0 / 75%); backdrop-filter: blur(5px); }
.dialog { display: flex; flex-direction: column; position: relative; min-width: 0; width: 100%; max-width: 520px; max-height: 92vh; max-height: 92dvh; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-panel); box-shadow: var(--shadow-panel); overflow: hidden; }
.dialog-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 12px; min-height: 68px; padding: 12px 16px 12px 24px; border-bottom: 1px solid var(--color-border); }
.dialog-header h2 { font-size: 18px; line-height: 24px; overflow-wrap: anywhere; }
.dialog-header .icon-btn { background: transparent; }
.dialog-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px; scrollbar-width: thin; scrollbar-color: #785161 transparent; }
.dialog-body > * + * { margin-top: 20px; }
.membership-dialog { background: linear-gradient(160deg, #3b2228 0, #291b1d 55%); }
.membership-dialog .dialog-header { border: 0; padding-bottom: 0; }
.membership-dialog .dialog-header h2 { font-size: 14px; font-weight: 600; color: var(--color-muted); }
.membership-dialog .dialog-body { padding: 0 24px 28px; }
.membership-lock { display: flex; align-items: center; justify-content: center; height: 72px; margin-bottom: 12px; }
.membership-lock svg { width: 56px; height: 56px; stroke-width: 1.8; }
.membership-title { max-width: 16ch; margin: 0 auto 16px; font-size: 28px; font-weight: 800; line-height: 34px; text-align: center; letter-spacing: -.02em; }
.membership-dialog .membership-description { color: var(--color-muted); text-align: center; line-height: 21px; }
.membership-intro { color: var(--color-muted); text-align: center; line-height: 21px; }
.membership-card { display: grid; grid-template-columns: minmax(min-content, 1fr) minmax(0, 1fr); align-items: center; gap: 20px; min-height: 160px; margin-top: 28px; padding: 22px 20px; border: 2px solid var(--color-orange); border-radius: 20px; background: linear-gradient(145deg, #5b281c, #1b1010 85%); }
.quote-slot { font-size: 24px; font-weight: 800; line-height: 30px; color: #fff5ea; overflow-wrap: normal; word-break: normal; hyphens: none; }
.membership-card .membership-description { color: #ffdebf; text-align: left; font-size: 14px; line-height: 21px; overflow-wrap: anywhere; }
.membership-description strong { display: block; color: #ffaf58; font-size: 17px; line-height: 24px; }
.membership-description span { display: block; margin-top: 8px; }
.membership-card small { display: block; font-size: 12px; line-height: 18px; font-weight: 400; color: #d9b89e; margin-top: 8px; }
.membership-dialog .primary-btn, .membership-dialog .secondary-btn { width: 100%; }
.membership-dialog .fine-print { line-height: 19px; }
.membership-dialog .restore-action { display: flex; width: 100%; color: #e9b2cc; }
.overlay:has(.episode-sheet) { align-items: flex-end; padding: 0; }
.episode-sheet { max-width: 600px; max-height: 70vh; max-height: 70dvh; border-bottom: 0; border-radius: 20px 20px 0 0; }
.episode-sheet .dialog-body { padding: 20px 16px calc(24px + env(safe-area-inset-bottom)); }
.episode-sheet .episode-status { color: var(--color-muted); font-size: 12px; }
.panel-subtitle { color: var(--color-muted); font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
.overlay:has(.account-drawer) { justify-content: flex-end; padding: 0; }
.account-drawer { width: min(88vw, 360px); max-width: 360px; height: 100vh; height: 100dvh; max-height: none; border-radius: 20px 0 0 20px; border-right: 0; background: linear-gradient(165deg, #301624, #1c0e17 75%); }
.account-drawer .dialog-header { padding-top: calc(12px + env(safe-area-inset-top)); }
.account-drawer .dialog-body { padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); }
.account-identity { display: flex; align-items: center; gap: 14px; }
.account-avatar, .account-identity .avatar { display: flex; justify-content: center; align-items: center; flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(140deg, #7b2e57, #401b49); color: #ffd3e5; }
.account-avatar svg, .account-identity .avatar svg { width: 28px; height: 28px; }
.account-identity h3, .account-identity h2 { font-size: 18px; line-height: 24px; }
.account-identity p { font-size: 12px; line-height: 18px; color: var(--color-muted); margin-top: 5px; }
.account-menu { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; }
.menu-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 12px 8px; border-radius: 10px; background: transparent; text-align: left; font-size: 14px; line-height: 20px; }
.menu-item > svg:last-child:not(:first-child) { margin-left: auto; width: 18px; height: 18px; color: var(--color-muted); }
.menu-item span { min-width: 0; overflow-wrap: anywhere; }
.menu-item > span { display: flex; align-items: center; gap: 12px; }
.account-membership { display: flex; align-items: center; gap: 12px; width: 100%; padding: 18px; border: 1px solid #9d5a36; border-radius: 14px; background: linear-gradient(120deg, #54272a, #29121d); text-align: left; }
.account-membership > span { min-width: 0; flex: 1; }
.account-membership > svg { color: #ffd4a9; }
.account-membership > svg:last-child { width: 18px; height: 18px; }
.account-membership strong { color: #ffd4a9; }
.account-membership p { color: #d6b1a7; font-size: 12px; }
.account-membership small { display: block; margin-top: 6px; color: #d6b1a7; font-size: 12px; line-height: 18px; }
.language-dialog { max-width: 420px; }
.language-option { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 12px; background: transparent; text-align: left; }
.language-option + .language-option { margin-top: 12px; }
.language-option.is-selected { border-color: #e34f9c; background: #512338; }
.language-option.is-selected svg { color: #ff8fbe; }
.list-dialog .catalog-grid { gap: 20px 12px; }
.list-dialog .drama-card h3 { font-size: 13px; }
.footer { max-width: var(--page-max); margin: 60px auto 0; padding: 24px var(--page-gutter) calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border); color: var(--color-subtle); font-size: 12px; line-height: 20px; }
.footer p + p { margin-top: 6px; }
.fixture-panel { max-width: var(--page-max); margin: 24px auto 0; padding: 0 var(--page-gutter) 24px; font-size: 12px; color: var(--color-muted); }
.fixture-panel details { border-top: 1px solid var(--color-border); padding-top: 16px; }
.fixture-panel summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; }
.fixture-panel label { display: block; margin: 12px 0; line-height: 20px; }
.fixture-panel select { max-width: 100%; min-height: 44px; padding: 8px 12px; margin-left: 8px; border: 1px solid #765265; border-radius: 8px; background: #28111f; color: white; }
.fixture-panel .secondary-btn { min-height: 44px; margin-top: 8px; font-size: 12px; }
.footer .fixture-panel { margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid var(--color-border); }
.drama-rail > .skeleton { flex: 0 0 var(--rail-card-width); width: var(--rail-card-width); aspect-ratio: 2 / 3; }
@media (max-width: 599px) {
  .header-inner:has(> .icon-btn) .contact-btn { display: none; }
  .quote-slot { font-size: 20px; line-height: 26px; }
  .detail-actions { flex-direction: column; }
}
@media (max-width: 360px) {
  .membership-card { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
}
@media (min-width: 600px) {
  .page { padding-top: 64px; }
  .app-header { padding-inline: max(var(--page-gutter), calc((100vw - var(--page-max)) / 2 + var(--page-gutter))); }
  .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; }
  .membership-dialog { width: min(66vw, 520px); }
  .detail-poster { flex-basis: 156px; width: 156px; }
  .detail-summary { gap: 28px; }
  .detail-actions { max-width: 520px; }
  .detail-copy h1 { font-size: 30px; line-height: 38px; }
  .detail-page .episode-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .episode-sheet .episode-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .detail-page > .primary-btn, .watch-action .primary-btn { max-width: 360px; }
}
@media (min-width: 1024px) {
  .catalog-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 20px; }
  .section-heading h1, .section-heading h2 { font-size: 26px; line-height: 32px; }
  .page > section + section { margin-top: 56px; }
  .drama-rail { gap: 20px; }
}
@media (max-width: 359px) {
  .contact-btn { font-size: 11px; }
  .header-actions { gap: 6px; }
  .detail-summary { gap: 12px; }
  .detail-poster { flex-basis: 88px; width: 88px; }
  .detail-copy h1 { font-size: 20px; line-height: 25px; }
  .membership-card { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
  .membership-title { font-size: 24px; line-height: 30px; }
  .dialog-body, .membership-dialog .dialog-body { padding-inline: 16px; }
  .episode-grid { gap: 6px; }
  .episode-cell { font-size: 13px; }
  .detail-actions { flex-direction: column; }
}