.feature-art {
  background: linear-gradient(0deg, rgba(7, 18, 35, .76), rgba(7, 18, 35, .04) 70%), url("assets/illustration-home-feature.png") center / cover no-repeat;
}

.feature-art .feature-number,
.feature-art .feature-title {
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .48);
}

.feature-shape,
.guide-orbit { display: none; }

.new-inner {
  background: linear-gradient(90deg, rgba(10, 22, 48, .92) 0%, rgba(10, 22, 48, .55) 46%, rgba(10, 22, 48, .12) 100%), url("assets/illustration-new-serials.png") center / cover no-repeat;
}

.cover {
  color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.cover::before { display: none; }

.cover::after {
  display: block;
  z-index: 1;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: linear-gradient(0deg, rgba(7, 18, 35, .66), rgba(7, 18, 35, .08) 72%);
  transform: none;
}

.cover-orange,
.cover-purple { background-image: url("assets/genre-romance.png"); }
.cover-blue,
.cover-red { background-image: url("assets/genre-action.png"); }
.cover-green,
.cover-yellow,
.cover-pink { background-image: url("assets/genre-daily.png"); }
.cover-ink { background-image: url("assets/genre-thriller.png"); }
.cover-sky { background-image: url("assets/genre-fantasy.png"); }

.guide-index-hero {
  background: linear-gradient(90deg, rgba(250, 251, 247, .96) 0%, rgba(250, 251, 247, .72) 44%, rgba(250, 251, 247, .08) 100%), url("assets/illustration-genre-guide.png") center / cover no-repeat;
}

.webtoon-guide-hero {
  background: linear-gradient(90deg, rgba(255, 248, 237, .96) 0%, rgba(255, 248, 237, .72) 45%, rgba(255, 248, 237, .08) 100%), url("assets/illustration-webtoon-guide.png") center / cover no-repeat;
}

.guide-index-card {
  color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.guide-index-card::before {
  display: block;
  z-index: 0;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: linear-gradient(0deg, rgba(7, 18, 35, .78), rgba(7, 18, 35, .08) 78%);
  transform: none;
}

.guide-index-card::after { display: none; }
.guide-index-card > * { position: relative; z-index: 1; }

.guide-index-card.action { background-image: url("assets/genre-action.png"); }
.guide-index-card.fantasy { background-image: url("assets/genre-fantasy.png"); }
.guide-index-card.romance { background-image: url("assets/genre-romance.png"); }
.guide-index-card.daily { background-image: url("assets/genre-daily.png"); }
.guide-index-card.thriller { background-image: url("assets/genre-thriller.png"); }
.guide-index-card.history { background-image: url("assets/genre-history.png"); }

.guide-detail-hero {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.guide-detail-hero::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 18, 35, .9) 0%, rgba(7, 18, 35, .58) 48%, rgba(7, 18, 35, .18) 100%);
  content: "";
}

body[data-guide-genre="action"] .guide-detail-hero { background-image: url("assets/genre-action.png"); }
body[data-guide-genre="fantasy"] .guide-detail-hero { background-image: url("assets/genre-fantasy.png"); }
body[data-guide-genre="romance"] .guide-detail-hero { background-image: url("assets/genre-romance.png"); }
body[data-guide-genre="daily"] .guide-detail-hero { background-image: url("assets/genre-daily.png"); }
body[data-guide-genre="thriller"] .guide-detail-hero { background-image: url("assets/genre-thriller.png"); }
body[data-guide-genre="history"] .guide-detail-hero { background-image: url("assets/genre-history.png"); }

.post-art {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.post-art::before { display: none; }

.post-art::after {
  display: block;
  z-index: 1;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: linear-gradient(0deg, rgba(7, 18, 35, .68), rgba(7, 18, 35, .08) 76%);
  transform: none;
}

.post-art-a { background-image: url("assets/genre-daily.png"); }
.post-art-b { background-image: url("assets/genre-fantasy.png"); }
.post-art-c { background-image: url("assets/genre-history.png"); }
.post-art-d { background-image: url("assets/genre-romance.png"); }
.post-art-e { background-image: url("assets/genre-action.png"); }
.post-art-f { background-image: url("assets/genre-thriller.png"); }

.post-banner {
  background: linear-gradient(0deg, rgba(7, 18, 35, .64), rgba(7, 18, 35, .05) 78%), url("assets/illustration-guide-post.png") center / cover no-repeat;
}

.post-banner::before { display: none; }

.post-banner::after {
  display: block;
  z-index: 0;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: linear-gradient(90deg, rgba(7, 18, 35, .4), transparent 66%);
  transform: none;
}

@media (max-width: 850px) {
  .guide-index-hero,
  .webtoon-guide-hero { background-position: 62% center; }

  .guide-detail-hero { background-position: center; }
  .new-inner { background-position: 65% center; }
}


.new-section {
  position: relative;
  overflow: hidden;
  background: #0a1630 url("assets/illustration-new-serials.png") center / cover no-repeat;
}

.new-section::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 18, 35, .94) 0%, rgba(7, 18, 35, .79) 38%, rgba(7, 18, 35, .28) 72%, rgba(7, 18, 35, .43) 100%);
  content: "";
}

.new-inner {
  position: relative;
  z-index: 1;
  background: transparent;
}

.new-inner h2,
.new-inner > div > p,
.new-copy > span {
  text-shadow: 0 2px 18px rgba(0, 0, 0, .62);
}

.new-copy > span { color: rgba(255, 255, 255, .9); }


.quick-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.quick-grid a { min-height: 73px; padding: 12px 18px 10px 53px; }
.quick-icon { left: 16px; top: 14px; width:27px; height:27px; }
.quick-icon.pick { background: #e0e9ff; color: #456edc; }
.quick-icon.notice { background: #eee9ff; color: #725fd1; font-weight: 800; }

.work-card-link { cursor: pointer; }
.work-card-link:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 3px;
}
.feature-card.work-card-link:hover { box-shadow: 0 12px 26px rgba(25, 36, 64, .13); }
.toon-card.work-card-link:hover h3,
.rank-card.work-card-link:hover h3 { text-decoration: underline; }
.feature-cta {
  display: inline-block;
  margin-top: 25px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}
.feature-cta b { margin-left: 7px; }


.toon-detail-hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 78px;
  color: #fff;
  background: #182742 center / cover no-repeat;
}
.toon-detail-hero::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 18, 35, .94) 0%, rgba(7, 18, 35, .76) 46%, rgba(7, 18, 35, .28) 100%);
  content: "";
}
.toon-detail-hero .container { position: relative; z-index: 1; }
.toon-detail-hero .breadcrumb { color: rgba(255, 255, 255, .68); }
.toon-detail-hero .breadcrumb span { color: rgba(255, 255, 255, .34); }
.toon-detail-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 38px; align-items: end; }
.work-poster { width: 220px; aspect-ratio: 2 / 3; margin: 0; overflow: hidden; background: #0f1b2b; box-shadow: 0 16px 35px rgba(0, 0, 0, .34); }
.work-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work-detail-label { margin: 0 0 12px; color: #aee7e1; font: 500 10px var(--mono); letter-spacing: .12em; }
.work-detail-copy h1 { margin: 0; font: 400 clamp(42px, 5vw, 66px) / 1.14 var(--display); letter-spacing: -.1em; }
.work-detail-copy > p:not(.work-detail-label) { max-width:590px; margin: 18px 0 0; color: rgba(255, 255, 255, .88); font-size: 15px; line-height: 1.9; }
.work-detail-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 23px; }
.work-detail-facts span,
.work-tags li { padding: 5px 10px; border: 1px solid rgba(255, 255, 255, .36); border-radius: 999px; font: 500 10px var(--mono); letter-spacing: .02em; }
.work-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.work-detail-section { padding-top: 86px; }
.work-reference-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; align-items: start; }
.work-reference-grid > div > p:first-child { margin: 0; color: #535b69; font-size: 16px; line-height: 2; }
.work-disclaimer { margin: 24px 0 0; color: #9298a3; font-size: 11px; line-height: 1.8; }
.work-reference-box { padding: 24px; background: #eef1f7; }
.work-reference-box p { margin: 0 0 14px; color: var(--blue); font: 500 10px var(--mono); letter-spacing: .1em; }
.work-reference-box ul { margin: 0; padding: 0; list-style: none; }
.work-reference-box li { padding: 11px 0; border-top: 1px solid #d5dae3; color: #5e6675; font-size: 12px; }
.work-detail-section .primary-button { margin-top: 42px; }
body[data-work-genre="action"] .toon-detail-hero { background-image: url("assets/genre-action.png"); }
body[data-work-genre="fantasy"] .toon-detail-hero { background-image: url("assets/genre-fantasy.png"); }
body[data-work-genre="romance"] .toon-detail-hero { background-image: url("assets/genre-romance.png"); }
body[data-work-genre="daily"] .toon-detail-hero { background-image: url("assets/genre-daily.png"); }
body[data-work-genre="thriller"] .toon-detail-hero { background-image: url("assets/genre-thriller.png"); }

@media (max-width: 850px) {
  .quick-menu { margin:0; padding-top:16px; background:var(--paper); }
  .quick-grid { box-shadow:0 8px 18px rgba(25, 36, 64, .08); }
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-grid a { min-height: 62px; padding: 11px 15px 8px 46px; }
  .quick-grid a:nth-child(even) { border-right: 0; }
  .quick-grid small { display:none; }
  .quick-grid strong { font-size:12px; line-height:1.25; }
  .quick-grid b { right:11px; bottom:7px; }
  .quick-icon { left:13px; top:13px; width:25px; height:25px; }
  .toon-detail-layout,
  .work-reference-grid { grid-template-columns: 1fr; gap: 28px; }
  .work-poster { width: 180px; }
}

@media (max-width: 520px) {
  .toon-detail-hero { padding: 55px 0 62px; }
  .work-poster { width: 150px; }
  .work-detail-copy h1 { font-size: 42px; }
}


@media (max-width: 850px) {
  .hero-inner {
    display: block;
    min-height: 0;
    padding: 108px 0 34px;
  }
  .hero-copy {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    padding: 0;
  }
  .hero h1 {
    width: calc(100% - 138px);
    max-width: none;
    font-size: clamp(28px, 7.7vw, 30px);
    line-height: 1.3;
  }
  .hero h1 br { display: none; }
  .hero h1 .hero-line { display: block; margin: 0; white-space: nowrap; }
  .hero-copy > p:not(.hero-label) {
    max-width: 342px;
    margin: 22px 0 24px;
    line-height: 1.75;
  }
  .hero-visual {
    position: absolute;
    z-index: 1;
    top: 118px;
    right: 0;
    width: min(31vw, 122px);
    height: min(31vw, 122px);
    margin: 0;
  }
  .hero-brand-logo {
    top: 0;
    right: 0;
    width: 100%;
  }
}

@media (max-width: 360px) {
  .hero-inner { padding-top: 98px; }
  .hero h1 { width: calc(100% - 128px); }
  .hero-visual { top: 108px; width: min(31vw, 112px); height: min(31vw, 112px); }
}