body.story-detail-page {
  background-color: var(--Base-bg-base);
  color: var(--Text-Neutral-primary);
  font-family: var(--Body-font-family, var(--twl-font-body));
}

body.story-detail-page :is(.main-content, .container-inner, .modal-content, .story-read-bar, .story-related-tunlist) {
  color: var(--Text-Neutral-primary);
}

body.story-detail-page :is(.f-MNPaethai, .f-MNPaethai-Med) {
  font-family: var(--Body-font-family, var(--twl-font-body)) !important;
}

body.story-detail-page :is(.f-normal-65, .f-bold-65, .f-bold-75, .font-med65) {
  font-family: var(--Action-font-family, var(--twl-font-heading)) !important;
}

body.story-detail-page .text-black {
  color: var(--Text-Neutral-primary) !important;
}

body.story-detail-page .text-gray {
  color: var(--Text-Neutral-secondary) !important;
}

body.story-detail-page :is(.text-primary, .text-cherry) {
  color: var(--Text-Brand-default) !important;
}

body.story-detail-page .text-success {
  color: var(--Text-Success-default) !important;
}

body.story-detail-page .story-tag .pill-tag {
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

body.story-detail-page .story-tag .pill-tag:hover,
body.story-detail-page .story-tag .pill-tag:focus-visible {
  background-color: var(--Background-Brand-subtle);
  border-color: var(--Border-Brand-default);
  color: var(--Text-Brand-hover);
  text-decoration: none;
}

body.story-detail-page .story-tag .pill-tag:hover i,
body.story-detail-page .story-tag .pill-tag:focus-visible i {
  color: var(--Icon-Brand-default) !important;
}

body.story-detail-page .story-tag .pill-tag:focus-visible {
  outline: 2px solid var(--Border-Brand-focus);
  outline-offset: 2px;
}

body.story-detail-page :is(.story-title, .chapter-header, .modal-info-title, .tunlist-header) {
  color: var(--Text-Neutral-primary);
  font-family: var(--Title-Page-font-family, var(--twl-font-heading));
  font-weight: 700;
  line-height: 1;
}

body.story-detail-page .story-title {
  font-size: var(--Title-Page-font-size-xlg, 48px);
}

body.story-detail-page :is(.chapter-header, .modal-info-title, .tunlist-header) {
  font-size: var(--Title-Page-font-size-lg, 32px);
}

body.story-detail-page :is(.story-title i, .story-stat-icon i, .collapse-story i) {
  color: var(--Icon-Brand-default);
}

body.story-detail-page :is(.sm-story-title, .rectangle-header-right) > .font-24.f-normal-65,
body.story-detail-page :is(.sm-story-title, .rectangle-header-right) .delete-account {
  color: var(--Text-Neutral-secondary);
  font-family: var(--Body-font-family, var(--twl-font-body)) !important;
  font-size: var(--Body-font-size-md, 14px) !important;
  font-weight: 500;
  line-height: var(--Body-font-line-height-md, 21px);
}

.v3-story-detail .v3-story-detail-writer-link {
  color: var(--Text-Neutral-primary);
  font-weight: 500;
  text-decoration: none;
}

.v3-story-detail .v3-story-detail-writer-link:is(:hover, :focus-visible) {
  color: var(--Text-Brand-hover);
  text-decoration: underline;
}

.v3-story-detail .bd-24-black > .twl-category-links--list {
  color: inherit;
  font: inherit;
}

.v3-story-detail :is(.v3-story-detail-writer-link, .twl-category-links__item):focus-visible {
  outline: 2px solid var(--Border-Brand-focus) !important;
  outline-offset: 2px;
}

.v3-story-detail .story-detail-v3-reader-categories {
  margin-block-start: 8px !important;
}

.v3-story-detail .story-detail-v3-reader-categories + .nav {
  margin-block-start: 8px;
}

body.story-detail-page :is(.med-24-grey, .purchase-chapter-writer, .content-sub-text) {
  color: var(--Text-Neutral-tertiary);
  font-family: var(--Body-font-family, var(--twl-font-body));
}

body.story-detail-page :is(.bd-24-black, .med-16-black, .purchase-chapter-name, .content-main-text) {
  color: var(--Text-Neutral-primary);
  font-family: var(--Body-font-family, var(--twl-font-body));
}

body.story-detail-page :is(.bd-24-black, .content-main-text) {
  font-weight: 700;
}

body.story-detail-page :is(.story-tab .nav-link, .story-read-bar-text .nav-link, .dropdown-menu-text, .collapse-story, .story-detail-primary-action) {
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: var(--Action-font-size-lg, 20px);
  font-weight: 500;
  line-height: 1;
}

body.story-detail-page .story-tab .nav-link,
body.story-detail-page .story-read-bar-text .nav-link {
  color: var(--Text-Neutral-tertiary) !important;
}

body.story-detail-page .story-tab .nav-link.active,
body.story-detail-page .story-read-bar-text .nav-link.active {
  border-color: var(--Border-Brand-default) !important;
  color: var(--Text-Neutral-primary) !important;
  font-weight: 700 !important;
}

body.story-detail-page :is(.btn, button, .dropdown-menu-text, .review-reply-button, .reply-load-more, .section-see-all-link a) {
  font-family: var(--Action-font-family, var(--twl-font-heading));
}

body.story-detail-page .btnUnBookmarkStory {
  background-color: var(--Background-Brand-default) !important;
  border-color: var(--Border-Brand-default) !important;
  color: var(--Text-Static-white) !important;
}

body.story-detail-page .btnUnBookmarkStory i {
  color: var(--Icon-Static-white, var(--Text-Static-white)) !important;
}

body.story-detail-page :is(.story-tab-detail, .story-segment) {
  color: var(--Text-Neutral-secondary);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-lg, 16px);
  font-weight: 500;
  line-height: var(--Body-font-line-height-lg, 24px);
}

body.story-detail-page :is(.story-tab-detail, .story-segment) :where(div, p, span, li, blockquote, h1, h2, h3, h4, h5, h6, table, th, td) {
  color: inherit !important;
  font-family: var(--Body-font-family, var(--twl-font-body)) !important;
}

body.story-detail-page :is(.story-tab-detail, .story-segment) :where(a) {
  color: var(--Text-Brand-default) !important;
  font-family: var(--Body-font-family, var(--twl-font-body)) !important;
}

body.story-detail-page :is(.story-tab-detail, .story-segment) :where(b, strong) {
  font-weight: 700;
}

body.story-detail-page .warning-word {
  background-color: var(--Background-Danger-subtle);
  border-color: var(--Border-Danger-subtle);
  color: var(--Text-Neutral-secondary);
}

body.story-detail-page .warning-word .f-bold-75 {
  color: var(--Text-Neutral-primary);
  font-family: var(--Heading-font-family, var(--twl-font-heading)) !important;
  font-size: var(--Heading-font-size-md, 24px);
  font-weight: 500;
}

body.story-detail-page .warning-word .icon-tunwalai-filled-exclamation {
  color: var(--Icon-Danger-default);
}

body.story-detail-page :is(.sale-title, .text-title) {
  color: var(--Text-Brand-default) !important;
  font-family: var(--Heading-font-family, var(--twl-font-heading)) !important;
  font-size: var(--Heading-font-size-md, 24px);
  font-weight: 500;
}

body.story-detail-page :is(.sale-description, .promotion-chapter p, .package-purchase-desc, .package-save) {
  color: var(--Text-Neutral-secondary);
  font-family: var(--Body-font-family, var(--twl-font-body)) !important;
  font-size: var(--Body-font-size-sm, 12px);
  font-weight: 500;
  line-height: var(--Body-font-line-height-sm, 18px);
}

body.story-detail-page .promotion-chapter {
  background-color: var(--Background-Brand-subtle);
  border-color: var(--Border-Danger-subtle);
}

body.story-detail-page .package-purchase {
  background-color: var(--Background-Brand-subtle);
  border-color: var(--Border-Neutral-subtle);
}

body.story-detail-page .package-purchase-title {
  color: var(--Text-Brand-default);
  font-family: var(--Title-Page-font-family, var(--twl-font-heading));
  font-size: var(--Title-Page-font-size-lg, 32px);
  font-weight: 700;
  line-height: 1;
}

body.story-detail-page .package-purchase-coin {
  color: var(--Text-Danger-default);
  font-family: var(--Title-Page-font-family, var(--twl-font-heading));
  font-size: var(--Title-Page-font-size-lg, 32px);
  font-weight: 700;
  line-height: 1;
}

body.story-detail-page :is(.story-status, .discount-percent, .tag-cherry, .writer-comment-badge) {
  font-family: var(--Action-font-family, var(--twl-font-heading));
}

body.story-detail-page .story-status-publish {
  background-color: var(--Background-Success-default);
}

body.story-detail-page .story-status-hide {
  background-color: var(--Background-Neutral-secondary);
}

body.story-detail-page .story-status-ban {
  background-color: var(--Background-Danger-default);
}

body.story-detail-page :is(.story-stat, .story-stat-text) {
  color: var(--Text-Neutral-secondary);
  font-family: var(--Body-font-family, var(--twl-font-body));
}

body.story-detail-page :is(.content-main-text, .content-sub-text) a {
  color: inherit;
  font-family: inherit;
}

body.story-detail-page :is(.swiper-button-next, .swiper-button-prev) {
  background-color: var(--Base-bg-raised);
  color: var(--Icon-Neutral-primary) !important;
}

body.story-detail-page :is(#pinto-ebook-swiper, #writer-pinto-ebook-swiper) .swiper-ebook-description {
  color: var(--Text-Neutral-secondary);
  font-family: var(--Body-font-family, var(--twl-font-body));
  min-width: 0;
}

body.story-detail-page :is(#pinto-ebook-swiper, #writer-pinto-ebook-swiper) .swiper-ebook-description > :is(a, .pinto-ebook-title) {
  color: var(--Text-Neutral-primary) !important;
  font-family: var(--Body-font-family, var(--twl-font-body)) !important;
  font-size: var(--Body-font-size-md, 14px) !important;
  font-weight: 700;
  line-height: var(--Body-font-line-height-md, 21px);
}

body.story-detail-page :is(#pinto-ebook-swiper, #writer-pinto-ebook-swiper) .swiper-ebook-description > :is(span, .pinto-ebook-author) {
  color: var(--Text-Brand-default) !important;
  font-family: var(--Body-font-family, var(--twl-font-body)) !important;
  font-size: var(--Body-font-size-sm, 12px) !important;
  font-weight: 500;
  line-height: var(--Body-font-line-height-sm, 18px);
}

body.story-detail-page :is(#pinto-ebook-swiper, #writer-pinto-ebook-swiper) .swiper-ebook-description > :is(p.three-line-text, .pinto-ebook-desc) {
  color: var(--Text-Neutral-secondary) !important;
  font-family: var(--Body-font-family, var(--twl-font-body)) !important;
  font-size: var(--Body-font-size-sm, 12px) !important;
  font-weight: 500;
  line-height: var(--Body-font-line-height-sm, 18px);
  overflow-wrap: anywhere;
  word-break: normal;
}

body.story-detail-page :is(#pinto-ebook-swiper, #writer-pinto-ebook-swiper) .swiper-ebook-description > :is(p:last-child, .pinto-ebook-price-sale) {
  color: var(--Text-Danger-default, #c72126) !important;
  font-family: var(--Body-font-family, var(--twl-font-body)) !important;
  font-size: var(--Body-font-size-md, 14px) !important;
  font-weight: 700;
  line-height: var(--Body-font-line-height-md, 21px);
}

body.story-detail-page :is(#pinto-ebook-swiper, #writer-pinto-ebook-swiper) .swiper-ebook-description .pinto-ebook-price-original {
  color: var(--Text-Neutral-tertiary) !important;
  font-family: var(--Body-font-family, var(--twl-font-body)) !important;
  font-size: var(--Body-font-size-sm, 12px) !important;
  font-weight: 500;
}

body.story-detail-page :is(#listPintoModal, #infoPintoModal, #addPintoModal, #deletePintoEbookModal, #closePintoEbookModal, #writerPintoEbookErrorModal) .modal-info-message,
body.story-detail-page :is(#listPintoModal, #infoPintoModal, #addPintoModal, #deletePintoEbookModal, #closePintoEbookModal, #writerPintoEbookErrorModal) .modal-info-message :is(p, label, .col-form-label, .form-control) {
  color: var(--Text-Neutral-secondary);
  font-family: var(--Body-font-family, var(--twl-font-body)) !important;
  font-size: var(--Body-font-size-md, 14px) !important;
  font-weight: 500;
  line-height: var(--Body-font-line-height-md, 21px);
  overflow-wrap: anywhere;
  word-break: normal;
}

body.story-detail-page #listPintoModal #writer-pinto-ebook-list-modal h3 {
  color: var(--Text-Neutral-primary) !important;
  font-family: var(--Body-font-family, var(--twl-font-body)) !important;
  font-size: var(--Body-font-size-md, 14px) !important;
  font-weight: 700;
  line-height: var(--Body-font-line-height-md, 21px);
}

body.story-detail-page #listPintoModal #writer-pinto-ebook-list-modal p {
  color: var(--Text-Neutral-secondary) !important;
  font-family: var(--Body-font-family, var(--twl-font-body)) !important;
  font-size: var(--Body-font-size-sm, 12px) !important;
  font-weight: 500;
  line-height: var(--Body-font-line-height-sm, 18px);
}

body.story-detail-page #listPintoModal #writer-pinto-ebook-list-modal :is(.content-fullprice-text, .content-saleprice-text) {
  color: var(--Text-Danger-default, #c72126) !important;
  font-family: var(--Body-font-family, var(--twl-font-body)) !important;
  font-size: var(--Body-font-size-md, 14px) !important;
  font-weight: 700;
  line-height: var(--Body-font-line-height-md, 21px);
}

body.story-detail-page #listPintoModal #writer-pinto-ebook-list-modal .content-discount-text {
  color: var(--Text-Neutral-tertiary) !important;
  font-family: var(--Body-font-family, var(--twl-font-body)) !important;
  font-size: var(--Body-font-size-sm, 12px) !important;
  font-weight: 500;
}

body.story-detail-page :is(.writer-info-box, .dreamchat-card, .floating-chat-bubble, .card.card-lg, .card-spoil, .story-review-modal .modal-content) {
  background-color: var(--Base-bg-raised);
  border-color: var(--Border-Neutral-subtle);
}

body.story-detail-page :is(.writer-info-name, .dreamchat-header, .story-review-section .chapter-header) {
  color: var(--Text-Neutral-primary);
  font-family: var(--Title-Page-font-family, var(--twl-font-heading));
  font-weight: 700;
}

body.story-detail-page :is(.writer-support-message, .dreamchat-name, .dreamchat-message, .floating-chat-message) {
  font-family: var(--Body-font-family, var(--twl-font-body)) !important;
}

body.story-detail-page :is(.writer-support-message, .dreamchat-message, .floating-chat-message) {
  color: var(--Text-Neutral-secondary) !important;
}

body.story-detail-page :is(.dreamchat-name, .floating-chat-message) {
  font-size: var(--Body-font-size-md, 14px);
  line-height: var(--Body-font-line-height-md, 21px);
}

body.story-detail-page :is(.dreamchat-see-all, .dreamchat-btn, .floating-chat-btn) {
  font-family: var(--Action-font-family, var(--twl-font-heading)) !important;
  font-size: var(--Action-font-size-lg, 20px);
  font-weight: 500;
}

body.story-detail-page .dreamchat-see-all:is(:link, :visited, :hover, :focus, :active),
body.story-detail-page .dreamchat-see-all:is(:link, :visited, :hover, :focus, :active) i {
  color: var(--Text-Brand-default) !important;
  text-decoration: none !important;
}

/* Floating CTA = dream-chat blue (match icon). Never brand red. */
body.story-detail-page .floating-chat-btn:is(:link, :visited, :hover, :focus, :active) {
  color: var(--story-dream-chat-action, #1e8cff) !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

body.story-detail-page .dreamchat-btn:is(:link, :visited, :hover, :focus, :active) {
  color: var(--Text-Static-white, #ffffff) !important;
  text-decoration: none !important;
  filter: none !important;
  background: var(--story-dream-chat-gradient, linear-gradient(90deg, #79f2f1 0%, #1e8cff 50%, #b371fd 100%)) !important;
}

body.story-detail-page .dreamchat-name-link:is(:link, :visited, :hover, :focus, :active),
body.story-detail-page .dreamchat-name-link:is(:link, :visited, :hover, :focus, :active) .dreamchat-name {
  color: var(--Text-Neutral-primary) !important;
  text-decoration: none !important;
}

body.story-detail-page .dreamchat-avatar-link:is(:link, :visited, :hover, :focus, :active),
body.story-detail-page .floating-chat-avatar-link:is(:link, :visited, :hover, :focus, :active) {
  color: inherit !important;
  text-decoration: none !important;
}

body.story-detail-page .floating-chat-divider {
  background-color: var(--Border-Neutral-subtle);
}

body.story-detail-page .story-review-section {
  color: var(--Text-Neutral-primary);
  font-family: var(--Body-font-family, var(--twl-font-body));
}

body.story-detail-page .story-review-section :is(.rating-total, #reviewRating, .rating-list, .heart-rating, [class*="heart-rating-"]) {
  color: var(--Text-Brand-default) !important;
  font-family: var(--Title-Page-font-family, var(--twl-font-heading)) !important;
  font-weight: 700;
}

body.story-detail-page .story-review-section .rating-total,
body.story-detail-page .story-review-section #reviewRating {
  font-size: var(--Title-Page-font-size-lg, 32px);
  line-height: 1;
}

body.story-detail-page .story-review-section :is(.card-review-item, .score-percent, .review-title, .empty-review p) {
  color: var(--Text-Neutral-secondary);
  font-family: var(--Body-font-family, var(--twl-font-body)) !important;
  font-size: var(--Body-font-size-md, 14px);
  line-height: var(--Body-font-line-height-md, 21px);
}

body.story-detail-page .story-review-section .empty-review {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.story-detail-page .story-review-section .empty-review p {
  margin-block: 0 !important;
}

body.story-detail-page :is(.story-review-row, .story-review-reply-item) .comment-commenter {
  color: var(--Text-Neutral-primary);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-md, 14px);
  font-weight: 700;
  line-height: var(--Body-font-line-height-md, 21px);
}

body.story-detail-page :is(.story-review-row, .story-review-reply-item) .comment-message {
  color: var(--Text-Neutral-secondary);
  font-family: var(--Body-font-family, var(--twl-font-body)) !important;
  font-size: var(--Body-font-size-md, 14px) !important;
  line-height: var(--Body-font-line-height-md, 21px) !important;
}

body.story-detail-page :is(.story-review-row, .story-review-reply-item) .comment-chapter {
  color: var(--Text-Neutral-tertiary);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-sm, 12px);
  line-height: var(--Body-font-line-height-sm, 18px);
}

body.story-detail-page :is(.review-reply-button, .reply-load-more) {
  color: var(--Text-Brand-default);
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: var(--Action-font-size-lg, 20px);
  font-weight: 500;
}

body.story-detail-page :is(.edit-review, .del-review, .review-nav button) {
  color: var(--Text-Neutral-primary);
  font-family: var(--Action-font-family, var(--twl-font-heading)) !important;
  font-size: var(--Action-font-size-lg, 20px);
  font-weight: 500;
}

body.story-detail-page :is(.form-review, .form-reply, .story-review-modal .form-select, .story-review-modal .select2-selection) {
  background-color: var(--Base-bg-base);
  border-color: var(--Border-Neutral-default);
  color: var(--Text-Neutral-secondary);
  font-family: var(--Body-font-family, var(--twl-font-body));
}

body.story-detail-page .story-review-section .progress {
  background-color: var(--Background-Brand-subtle);
}

body.story-detail-page .story-review-section .progress-bar.bg-danger {
  background-color: var(--Background-Danger-default);
}

body.story-detail-page .story-review-section .card-spoil {
  color: var(--Text-Neutral-secondary);
}

body.story-detail-page .story-review-section .card-spoil .card-header {
  background-color: var(--Base-bg-raised) !important;
}

body.story-detail-page .story-review-section .card-spoil .card-header .f-bold-75 {
  color: var(--Text-Neutral-primary) !important;
  font-family: var(--Action-font-family, var(--twl-font-heading)) !important;
  font-size: var(--Action-font-size-lg, 20px);
  font-weight: 500;
}

body.story-detail-page .story-related-tunlist {
  color: var(--Text-Neutral-secondary);
  font-family: var(--Body-font-family, var(--twl-font-body));
}

body.story-detail-page .story-related-tunlist h3 {
  color: var(--Text-Neutral-primary);
  font-family: var(--Body-font-family, var(--twl-font-body)) !important;
  font-size: var(--Body-font-size-md, 14px) !important;
  font-weight: 700;
  line-height: var(--Body-font-line-height-md, 21px);
}

body.story-detail-page .story-related-tunlist p {
  color: var(--Text-Neutral-tertiary);
  font-family: var(--Body-font-family, var(--twl-font-body)) !important;
  font-size: var(--Body-font-size-sm, 12px) !important;
  line-height: var(--Body-font-line-height-sm, 18px);
}

body.story-detail-page #tbChapter .story-chapter-row {
  color: var(--Text-Neutral-secondary);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-md, 14px);
  line-height: var(--Body-font-line-height-md, 21px);
}

body.story-detail-page #tbChapter .story-chapter-row .chapter-title {
  color: var(--Text-Neutral-primary);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-weight: 700;
}

body.story-detail-page #tbChapter .story-chapter-row .chapter-title a {
  color: inherit;
  font-family: inherit;
}

body.story-detail-page #tbChapter .story-chapter-row :is(.chapterlist-number, .chapter-stat, .chapterlist-date-reader) {
  color: var(--Text-Neutral-tertiary);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-sm, 12px);
  line-height: var(--Body-font-line-height-sm, 18px);
}

body.story-detail-page #tbChapter .story-chapter-schedule {
  color: var(--Text-Warning-default);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-sm, 12px);
  line-height: var(--Body-font-line-height-sm, 18px);
}

body.story-detail-page #tbChapter .story-chapter-schedule i {
  color: var(--Icon-Warning-default);
}

body.story-detail-page #tbChapter .story-chapter-schedule-badge,
body.story-detail-page #tbChapter .story-chapter-status {
  border-radius: 5px;
  color: var(--Text-Neutral-primary);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-sm, 12px);
  line-height: var(--Body-font-line-height-sm, 18px);
  padding: 0 8px;
  width: fit-content;
}

body.story-detail-page #tbChapter .story-chapter-schedule-badge--premiere {
  background-color: var(--twl-ref-warning-100, var(--Background-Warning-subtle));
}

body.story-detail-page #tbChapter .story-chapter-schedule-badge--private {
  background-color: var(--Background-Warning-subtle);
}

body.story-detail-page #tbChapter .story-chapter-status--hidden {
  background-color: var(--Background-Neutral-tertiary);
}

body.story-detail-page #tbChapter .story-chapter-status--unlocked {
  color: var(--Text-Success-default);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-sm, 12px);
  line-height: var(--Body-font-line-height-lg, 24px);
}

body.story-detail-page #tbChapter .story-chapter-promotion-pending {
  color: var(--Text-Neutral-tertiary);
}

body.story-detail-page #tbChapter .story-chapter-promotion-ending {
  color: var(--Text-Danger-default);
}

body.story-detail-page #tbChapter .story-chapter-original-price {
  color: var(--Text-Neutral-disabled);
  text-decoration: line-through;
}

body.story-detail-page #tbChapter .story-chapter-edit-action {
  color: var(--Text-Brand-default);
  display: flex;
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: var(--Action-font-size-lg, 20px);
  font-weight: 500;
  width: 60px;
}

body.story-detail-page #tbChapter .story-chapter-edit-action i {
  color: var(--Icon-Brand-default);
}

body.story-detail-page :is(.modal-content, .dropdown-menu, .writer-info-box, #commentEditor, .ql-toolbar.ql-snow, .comment-row) {
  border-color: var(--Border-Neutral-subtle);
}

body.story-detail-page :is(.modal-info-message, .comment-message, .writer-support-message) {
  color: var(--Text-Neutral-secondary);
}

@media (max-width: 767px) {
  body.story-detail-page .story-title {
    font-size: var(--Title-Page-font-size-lg, 32px);
  }

  body.story-detail-page :is(.chapter-header, .modal-info-title, .tunlist-header) {
    font-size: var(--Title-Page-font-size-md, 28px);
  }
}

/* V3 story-detail layout parity. Keep legacy IDs/classes for existing jQuery flows. */
body.story-detail-page {
  --story-detail-v3-content-width: 956px;
  --story-detail-v3-section-gap: 32px;
  --story-detail-v3-shell-width: 1180px;

  overflow-x: hidden;
  position: relative;
}

body.story-detail-page .story-detail-v3-background {
  display: block;
  height: 220px;
  inset-inline: 0;
  overflow: hidden;
  pointer-events: none;
  top: var(--site-header-height, 96px);
  z-index: 0;
}

body.story-detail-page .story-detail-v3-background::before,
body.story-detail-page .story-detail-v3-background::after {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

body.story-detail-page .story-detail-v3-background::before {
  backdrop-filter: blur(5px);
  background: var(--Static-Opacity-White-60, rgba(255, 255, 255, 0.6));
}

body.story-detail-page .story-detail-v3-background::after {
  background: linear-gradient(
    0deg,
    var(--Base-bg-base) 0%,
    color-mix(in srgb, var(--Base-bg-base) 70%, transparent) 50%,
    transparent 100%
  );
}

body.story-detail-page .story-detail-v3-background img {
  filter: blur(12px);
  height: 100%;
  min-height: 0;
  min-width: 0;
  object-fit: cover;
  opacity: 1;
  transform: scale(1.08);
  width: 100%;
}

body.story-detail-page .story-detail-v3-background.ai-cover-hidden-background img {
  filter: blur(28px);
  transform: scale(1.08);
}

body.story-detail-page .story-image-wrapper {
  display: none;
}

body.story-detail-page .story-detail-v3-shell {
  max-width: var(--story-detail-v3-shell-width);
  padding-inline: 24px;
  position: relative;
  z-index: 1;
}

body.story-detail-page .story-detail-v3-main {
  margin-block: 0 !important;
  padding-block: var(--story-detail-v3-section-gap) 0 !important;
}

body.story-detail-page .story-detail-v3-lead {
  display: grid !important;
  gap: 32px;
  grid-template-columns: 368px minmax(0, 556px);
  justify-content: center !important;
  margin-inline: auto;
  max-width: var(--story-detail-v3-content-width);
}

body.story-detail-page .story-detail-v3-cover {
  background: var(--Base-bg-raised);
  border: 1px solid var(--Base-border-raised, var(--Border-Neutral-subtle));
  border-radius: var(--Radius-lg, 16px);
  box-shadow: 0 4px 10px var(--Static-Opacity-Black-10, rgba(0, 0, 0, 0.1));
  box-sizing: border-box;
  max-width: 368px;
  padding: 24px;
  width: 100%;
}

body.story-detail-page .story-detail-v3-cover .story-cover-img,
body.story-detail-page .story-detail-v3-cover .story-image {
  aspect-ratio: 1;
  height: auto;
  width: 100%;
}

body.story-detail-page .story-detail-v3-cover .story-image {
  min-width: 0;
  object-fit: cover;
  position: relative;
  z-index: auto;
}

body.story-detail-page .story-detail-v3-cover .btn {
  align-items: center;
  box-sizing: border-box;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  line-height: 1;
  min-height: 44px;
  padding-block: 0;
  text-align: center;
}

body.story-detail-page .story-detail-v3-cover .btn > :is(span, div) {
  align-items: center;
  justify-content: center;
  line-height: 1;
}

body.story-detail-page .story-detail-v3-meta {
  min-width: 0;
  padding: 0 !important;
}

body.story-detail-page .story-detail-v3-meta .sm-story-title {
  min-width: 0;
}

body.story-detail-page .story-detail-v3-meta .story-title {
  max-width: 524px;
  overflow-wrap: anywhere;
}

body.story-detail-page .story-detail-v3-meta .story-stat-area {
  align-items: center;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-height: 84px;
  width: 100%;
}

body.story-detail-page .story-detail-v3-meta .story-stat-border {
  align-items: center;
  border: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center;
  min-height: 72px;
  padding: 0 8px;
  position: relative;
  row-gap: 0;
  width: auto !important;
}

body.story-detail-page .story-detail-v3-meta .story-stat-border:not(:last-child)::after {
  background: var(--Border-Neutral-subtle);
  content: "";
  height: 84px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
}

body.story-detail-page .story-detail-v3-meta .story-stat-icon,
body.story-detail-page .story-detail-v3-meta .story-stat,
body.story-detail-page .story-detail-v3-meta .story-stat-text {
  padding: 0 !important;
  text-align: center !important;
  width: auto !important;
}

body.story-detail-page .story-detail-v3-meta .story-stat-icon {
  margin-bottom: 4px;
}

body.story-detail-page .story-detail-v3-meta .story-stat {
  font-size: var(--Body-font-size-md, 14px) !important;
  line-height: var(--Body-font-line-height-md, 21px);
}

body.story-detail-page .story-detail-v3-meta .story-stat-text {
  white-space: nowrap;
}

body.story-detail-page .story-detail-v3-mobile-tabs,
body.story-detail-page .story-detail-v3-latest-update {
  display: none;
}

body.story-detail-page .story-detail-v3-main > :not(.story-detail-v3-lead),
body.story-detail-page .story-detail-v3-section,
body.story-detail-page .story-detail-v3-section.container-inner {
  margin-inline: auto;
  max-width: calc(var(--story-detail-v3-content-width) + 48px);
}

body.story-detail-page :is(.container-slider, .container-tunlist-slider, .story-related-tunlist) {
  max-width: calc(var(--story-detail-v3-content-width) + 48px);
}

body.story-detail-page .story-detail-v3-main > #storyTabContent,
body.story-detail-page .story-detail-v3-main > #story-detail-review,
body.story-detail-page .story-detail-v3-main > .story-detail-v3-latest-update {
  max-width: var(--story-detail-v3-content-width);
}

body.story-detail-page .story-detail-v3-main > #storyTabContent,
body.story-detail-page .story-detail-v3-main > #story-detail-review,
body.story-detail-page .story-detail-v3-main > .w-100,
body.story-detail-page .story-detail-v3-main > .col-12,
body.story-detail-page .story-detail-v3-section,
body.story-detail-page :is(.story-detail-v3-writer-stories, .story-detail-v3-related-stories, .story-related-tunlist).container-inner {
  margin-top: var(--story-detail-v3-section-gap);
}

/* Slider body follows its title with no extra top gap */
body.story-detail-page :is(.story-detail-v3-writer-stories, .story-detail-v3-related-stories, .story-related-tunlist).container-slider,
body.story-detail-page :is(.story-detail-v3-writer-stories, .story-detail-v3-related-stories, .story-related-tunlist).container-tunlist-slider {
  margin-top: 0;
}

body.story-detail-page .container-tunlist-slider .swiper {
  padding-left: 0 !important;
}

body.story-detail-page .container-tunlist-slider .swiper::before {
  display: none !important;
}

body.story-detail-page .story-detail-v3-section .row-section,
body.story-detail-page .story-detail-v3-section .section-main-title {
  margin-top: 0;
}

body.story-detail-page .story-detail-v3-section .section-main-title {
  align-items: center;
  min-height: 38px;
  padding-bottom: 16px;
}

body.story-detail-page .story-detail-v3-section .section-see-all-link a {
  color: var(--Text-Brand-default);
}

body.story-detail-page :is(#storyTabContent, #story-detail-review, #ebookSection, #totalChapter, #totalComment) {
  scroll-margin-top: 162px;
}

body.story-detail-page .story-package-paywall {
  --story-package-paywall-bg: var(--Background-Danger-subtle);
  --story-package-paywall-button-bg: var(--Background-Danger-default);
  --story-package-paywall-button-text: var(--Base-on-color);
  --story-package-paywall-price: var(--Text-Danger-default);
  --story-package-paywall-text: var(--Text-Neutral-primary);
  --story-package-paywall-text-secondary: var(--Text-Neutral-secondary);

  align-items: center;
  background: var(--story-package-paywall-bg);
  border: 0;
  border-radius: var(--Radius-sm, 8px);
  box-sizing: border-box;
  color: var(--story-package-paywall-text);
  column-gap: 16px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto 142px;
  margin-inline: auto;
  max-width: var(--story-detail-v3-content-width) !important;
  min-height: 120px;
  min-width: 0;
  overflow: hidden;
  padding: 12px 24px 12px 8px;
  width: min(100%, var(--story-detail-v3-content-width)) !important;
}

body.story-detail-page .story-package-paywall__mascot {
  height: 96px;
  object-fit: contain;
  width: 96px;
}

body.story-detail-page .story-package-paywall__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.story-detail-page .story-package-paywall__heading {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

body.story-detail-page .story-package-paywall__title {
  color: var(--story-package-paywall-text);
  font-family: var(--Title-Page-font-family, var(--twl-font-heading));
  font-size: var(--Title-Page-font-size-lg, 32px);
  font-weight: 700;
  line-height: 1;
  margin: 0;
  overflow-wrap: anywhere;
}

body.story-detail-page .story-package-paywall__badge {
  align-items: center;
  background: var(--Background-Brand-default);
  border-radius: var(--Radius-xs, 4px);
  color: var(--Base-on-color);
  display: inline-flex;
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: var(--Action-font-size-sm, 14px);
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  min-height: 20px;
  min-width: 42px;
  padding-inline: 8px;
  white-space: nowrap;
}

body.story-detail-page :is(.story-package-paywall__description, .story-package-paywall__saving) {
  color: var(--story-package-paywall-text-secondary);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-sm, 12px);
  font-weight: 500;
  line-height: var(--Body-font-line-height-sm, 18px);
  margin: 0;
}

body.story-detail-page .story-package-paywall__description {
  overflow-wrap: anywhere;
}

body.story-detail-page .story-package-paywall__price {
  align-items: center;
  display: grid;
  justify-items: center;
  min-width: 135px;
}

body.story-detail-page .story-package-paywall__coin-amount {
  align-items: center;
  display: inline-flex;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
}

body.story-detail-page .story-package-paywall__price-value {
  color: var(--story-package-paywall-price);
  font-family: var(--Title-Page-font-family, var(--twl-font-heading));
  font-size: var(--Title-Page-font-size-lg, 32px);
  font-weight: 700;
  line-height: 1;
}

body.story-detail-page .story-package-paywall__coin-icon {
  flex: 0 0 auto;
}

body.story-detail-page .story-package-paywall__button {
  align-items: center;
  background: var(--story-package-paywall-button-bg);
  border: 0;
  border-radius: var(--Radius-full, 999px);
  color: var(--story-package-paywall-button-text);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: var(--Action-font-size-lg, 20px);
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  min-height: 44px;
  padding-inline: 24px;
  white-space: nowrap;
  width: 142px;
}

body.story-detail-page .story-package-paywall__button:disabled {
  background: var(--Background-Brand-disabled);
  color: var(--Text-Static-white);
  cursor: not-allowed;
}

body.story-detail-page .story-package-paywall__button:focus-visible {
  outline: 2px solid var(--Border-Brand-focus);
  outline-offset: 2px;
}

body.story-detail-page #storyNavbar {
  border: 0;
  border-bottom: 1px solid var(--Base-border-default, var(--Border-Neutral-subtle));
  box-shadow: var(--story-read-bar-shadow, 0 8px 18px rgba(7, 7, 8, 0.1));
  height: auto;
  min-height: 50px;
  top: var(--site-header-height, 96px);
}

body.story-detail-page #storyNavbar > .container-slider {
  align-items: center;
  gap: 18px;
  margin-inline: auto;
  max-width: var(--story-detail-v3-shell-width);
  min-height: 50px;
  padding: 6px 16px;
  width: 100%;
}

body.story-detail-page #storyNavbar .story-read-bar-text {
  gap: 12px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

body.story-detail-page #storyNavbar .story-read-bar-text::-webkit-scrollbar {
  display: none;
}

body.story-detail-page #storyNavbar .story-read-bar-text .nav-link {
  padding-inline: 8px;
  white-space: nowrap;
}

body.story-detail-page #storyNavbar .nav-story-action {
  align-items: center;
  gap: 10px;
  padding-top: 0;
}

body.story-detail-page #storyNavbar .story-read-bar-button {
  margin-left: 0;
}

@media (min-width: 768px) and (max-width: 1023px) {
  body.story-detail-page .story-detail-v3-lead {
    gap: 24px;
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
    max-width: 100%;
  }

  body.story-detail-page .story-detail-v3-cover {
    max-width: 320px;
  }

  body.story-detail-page .story-detail-v3-meta .story-stat-border {
    padding-inline: 4px;
  }
}

@media (max-width: 767px) {
  body.story-detail-page {
    --story-detail-v3-section-gap: 12px;
  }

  body.story-detail-page .story-detail-v3-background {
    height: 586px;
    top: var(--site-header-height, 96px);
    z-index: 0;
  }

  body.story-detail-page #storyNavbar {
    display: none !important;
  }

  body.story-detail-page .story-detail-v3-background::before {
    backdrop-filter: none;
    background: linear-gradient(180deg, var(--story-mobile-hero-bg-80) 0%, transparent 112px);
  }

  body.story-detail-page .story-detail-v3-background::after {
    background: linear-gradient(
      180deg,
      transparent 0%,
      var(--story-mobile-hero-bg) 72%,
      var(--story-mobile-hero-bg) 100%
    );
  }

  body.story-detail-page .story-detail-v3-background img,
  body.story-detail-page .story-detail-v3-background.ai-cover-hidden-background img {
    filter: none;
    object-fit: cover;
    transform: none;
  }

  body.story-detail-page .story-detail-v3-background.ai-cover-hidden-background img {
    filter: blur(20px);
    transform: scale(1.08);
  }

  body.story-detail-page .story-detail-v3-shell {
    max-width: none;
    padding-inline: 0;
  }

  body.story-detail-page .story-detail-v3-main {
    margin: 0 !important;
    padding: 0 !important;
  }

  body.story-detail-page .story-detail-v3-lead {
    background: linear-gradient(
      180deg,
      transparent 0,
      transparent 260px,
      var(--story-mobile-hero-bg) 356px,
      var(--story-mobile-hero-bg) 100%
    );
    color: var(--story-mobile-hero-text-primary);
    display: flex !important;
    gap: 0;
    margin-inline: 0;
    max-width: none;
    padding: 356px 16px 0;
    position: relative;
  }

  body.story-detail-page .story-detail-v3-mobile-header {
    background: var(--Static-Opacity-Black-20, rgba(0, 0, 0, 0.2));
    border: 1px solid var(--Static-Opacity-White-10, rgba(255, 255, 255, 0.1));
    border-radius: var(--Radius-lg, 16px);
    order: 1;
    padding: 16px 16px 8px;
  }

  body.story-detail-page .story-detail-v3-cover:not(.writer) {
    display: none;
  }

  body.story-detail-page .story-detail-v3-cover.writer {
    display: block;
    margin-top: 12px;
    max-width: none;
    order: 2;
  }

  body.story-detail-page .story-detail-v3-cover.writer + .story-detail-v3-meta {
    order: 3;
  }

  body.story-detail-page .story-detail-v3-meta {
    order: 2;
  }

  body.story-detail-page .story-detail-v3-mobile-header .sm-story-title {
    padding-left: 0;
  }

  body.story-detail-page .story-detail-v3-mobile-header .story-title {
    color: var(--story-mobile-hero-text-primary);
    font-size: var(--Title-Page-font-size-md, 28px) !important;
    line-height: 1;
  }

  body.story-detail-page .story-detail-v3-mobile-header .story-title > i {
    display: none;
  }

  body.story-detail-page .story-detail-v3-mobile-header :is(.font-24.f-normal-65, .delete-account) {
    color: var(--story-mobile-hero-text-secondary) !important;
  }

  body.story-detail-page .story-detail-v3-mobile-header .v3-story-detail-writer-link {
    color: var(--story-mobile-hero-text-primary);
  }

  body.story-detail-page .story-detail-v3-mobile-header .detail-mobile-hero-categories {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block: 8px;
    max-width: 100%;
  }

  body:is(.comic-detail-page, .ebook-detail-page) .detail-mobile-hero-categories {
    margin-block: 8px;
  }

  body.story-detail-page .story-detail-v3-mobile-header .detail-mobile-hero-category {
    align-items: center;
    border: 1px solid var(--story-mobile-hero-category-border);
    border-radius: var(--Radius-lg, 16px);
    box-sizing: border-box;
    color: var(--story-mobile-hero-text-primary) !important;
    display: inline-flex;
    font-family: var(--Body-font-family, var(--twl-font-body)) !important;
    font-size: var(--Body-font-size-sm, 12px) !important;
    font-weight: 500;
    gap: 4px;
    height: 28px;
    line-height: var(--Body-font-line-height-sm, 18px);
    max-width: 100%;
    min-height: 28px;
    padding: 4px 12px;
    text-decoration: none;
    white-space: nowrap;
  }

  body.story-detail-page .story-detail-v3-mobile-header #ddlHeadMenu > i {
    color: var(--story-mobile-hero-text-primary);
  }

  body.story-detail-page .story-detail-v3-meta .story-stat-area {
    background: var(--Static-Opacity-Black-20, rgba(0, 0, 0, 0.2));
    border: 1px solid var(--Static-Opacity-White-10, rgba(255, 255, 255, 0.1));
    border-radius: var(--Radius-lg, 16px);
    column-gap: 32px;
    display: grid !important;
    grid-auto-flow: column;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, 20px);
    margin-top: 12px !important;
    min-height: 78px;
    overflow: hidden;
    padding: 0 16px 16px;
    row-gap: 9px;
  }

  body.story-detail-page .story-detail-v3-meta .story-stat-border {
    display: grid !important;
    grid-template-columns: 20px auto minmax(0, 1fr) !important;
    justify-items: start;
    min-height: 20px;
    padding: 0;
    text-align: left;
  }

  body.story-detail-page .story-detail-v3-meta .story-stat-border:not(:last-child)::after {
    display: none;
  }

  body.story-detail-page .story-detail-v3-meta .story-stat-icon {
    margin: 0;
  }

  body.story-detail-page .story-detail-v3-meta .story-stat-icon i {
    color: var(--story-mobile-hero-brand-text) !important;
    font-size: 20px !important;
  }

  body.story-detail-page .story-detail-v3-meta :is(.story-stat, .story-stat-text) {
    color: var(--story-mobile-hero-text-primary);
    font-size: var(--Body-font-size-sm, 12px) !important;
    line-height: var(--Body-font-line-height-sm, 18px);
    padding: 0 !important;
    text-align: left !important;
    white-space: nowrap;
    width: auto !important;
  }

  body.story-detail-page .story-detail-v3-mobile-tabs {
    background: var(--Base-bg-base);
    border-bottom: 1px solid var(--Border-Neutral-subtle);
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    margin: 18px -16px 0;
    padding: 12px 16px 0;
    scrollbar-width: none;
  }

  body.story-detail-page .story-detail-v3-mobile-tabs::-webkit-scrollbar {
    display: none;
  }

  body.story-detail-page .story-detail-v3-mobile-tabs a {
    align-items: center;
    color: var(--Text-Neutral-secondary);
    display: inline-flex;
    font-family: var(--Action-font-family, var(--twl-font-heading));
    font-size: var(--Action-font-size-sm, 14px);
    font-weight: 500;
    justify-content: center;
    min-width: 0;
    min-height: 32px;
    padding-inline: 4px;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
    width: 100%;
  }

  body.story-detail-page .story-detail-v3-mobile-tabs a.active,
  body.story-detail-page .story-detail-v3-mobile-tabs a[aria-current="page"] {
    color: var(--Text-Brand-default);
    font-weight: 700;
  }

  body.story-detail-page .story-detail-v3-mobile-tabs a.active::after,
  body.story-detail-page .story-detail-v3-mobile-tabs a[aria-current="page"]::after {
    background: var(--Border-Brand-default);
    bottom: -1px;
    content: "";
    height: 2px;
    inset-inline: 0;
    position: absolute;
  }

  body.story-detail-page .story-detail-v3-meta .story-tag,
  body.story-detail-page .story-detail-v3-meta .warning-word {
    background: var(--Base-bg-base);
    color: var(--Text-Neutral-primary);
    margin: 0 -16px !important;
    padding: 12px 16px 0 !important;
  }

  body.story-detail-page .story-detail-v3-meta .warning-word {
    border: 0;
    border-bottom: 1px solid var(--Border-Neutral-subtle);
    border-radius: 0;
    padding-bottom: 12px !important;
  }

  body.story-detail-page .story-detail-v3-mobile-section-title {
    color: var(--Text-Neutral-primary);
    font-family: var(--Heading-font-family, var(--twl-font-heading));
    font-size: var(--Heading-font-size-sm, 20px);
    font-weight: 500;
    line-height: 1;
    margin: 0 0 8px;
  }

  body.story-detail-page .story-detail-v3-meta .story-tag .collapse {
    max-height: 64px;
  }

  body.story-detail-page .story-detail-v3-meta .story-tag .collapse.show {
    max-height: none;
  }

  body.story-detail-page .story-detail-v3-main > :not(.story-detail-v3-lead),
  body.story-detail-page .story-detail-v3-section,
  body.story-detail-page .story-detail-v3-section.container-inner,
  body.story-detail-page :is(.container-slider, .container-tunlist-slider, .story-related-tunlist) {
    max-width: none;
  }

  body.story-detail-page .story-detail-v3-main > #storyTabContent {
    margin-top: 12px;
    padding-inline: 16px;
  }

  body.story-detail-page .story-detail-v3-main > .story-package-paywall {
    --story-package-paywall-bg: var(--Background-Brand-subtle);
    --story-package-paywall-price: var(--Text-Neutral-primary);

    align-items: start;
    border: 1px solid var(--Border-Brand-default);
    column-gap: 8px;
    grid-template-areas:
      "mascot copy"
      "mascot action";
    grid-template-columns: 84px minmax(0, 1fr);
    margin: 12px 16px 0;
    max-width: none !important;
    min-height: 135px;
    padding: 12px 16px;
    width: auto !important;
  }

  body.story-detail-page .story-package-paywall__mascot {
    grid-area: mascot;
    height: 84px;
    width: 84px;
  }

  body.story-detail-page .story-package-paywall__copy {
    gap: 4px;
    grid-area: copy;
  }

  body.story-detail-page .story-package-paywall__title {
    font-family: var(--Heading-font-family, var(--twl-font-heading));
    font-size: var(--Heading-font-size-sm, 20px);
    font-weight: 500;
  }

  body.story-detail-page .story-package-paywall__description {
    max-width: 258px;
  }

  body.story-detail-page .story-package-paywall__price {
    align-self: end;
    display: flex;
    grid-area: action;
    justify-self: start;
    min-width: 0;
  }

  body.story-detail-page .story-package-paywall__price-value {
    font-family: var(--Action-font-family, var(--twl-font-heading));
    font-size: var(--Action-font-size-lg, 20px);
  }

  body.story-detail-page .story-package-paywall__coin-icon {
    height: 16px;
    width: 16px;
  }

  body.story-detail-page .story-package-paywall__saving {
    display: none;
  }

  body.story-detail-page .story-package-paywall__button {
    align-self: end;
    font-size: var(--Action-font-size-lg, 20px);
    grid-area: action;
    justify-self: end;
    min-height: 28px;
    padding-inline: 14px;
    width: 70px;
  }

  body.story-detail-page .story-detail-v3-latest-update {
    align-items: center;
    border-block: 1px solid var(--Border-Neutral-subtle);
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    min-height: 49px;
    padding-inline: 16px;
  }

  body.story-detail-page .story-detail-v3-latest-update :is(h2, p) {
    color: var(--Text-Neutral-primary);
    margin: 0;
  }

  body.story-detail-page .story-detail-v3-latest-update h2 {
    font-family: var(--Heading-font-family, var(--twl-font-heading));
    font-size: var(--Heading-font-size-sm, 20px);
    font-weight: 500;
  }

  body.story-detail-page .story-detail-v3-latest-update p {
    font-family: var(--Body-font-family, var(--twl-font-body));
    font-size: var(--Body-font-size-md, 14px);
    line-height: var(--Body-font-line-height-md, 21px);
    text-align: right;
  }

  body.story-detail-page .story-detail-v3-main > #story-detail-review,
  body.story-detail-page .story-detail-v3-section {
    border-bottom: 1px solid var(--Border-Neutral-subtle);
    box-sizing: border-box;
    margin-top: 12px;
    padding: 12px 16px 0;
    width: 100%;
  }

  body.story-detail-page :is(.story-detail-v3-writer-stories, .story-detail-v3-related-stories) {
    border-bottom: 0;
    padding-bottom: 0;
  }

  body.story-detail-page :is(.story-detail-v3-writer-stories, .story-detail-v3-related-stories) + .container-slider {
    border-bottom: 1px solid var(--Border-Neutral-subtle);
    padding-bottom: 12px;
  }

  body.story-detail-page .story-detail-v3-chapters,
  body.story-detail-page .story-detail-v3-comments {
    padding-bottom: 12px;
  }

  body.story-detail-page :is(#storyTabContent, #story-detail-review, #ebookSection, #totalChapter, #totalComment) {
    scroll-margin-top: var(--site-header-height, 96px);
  }

  body.story-detail-page .nav-story-action-bottom {
    background: var(--Base-bg-base);
    border: 0;
    height: auto;
    min-height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}