/* Product covers: original artwork, accessible live type, one composition per topic. */
.store-home .service-grid,
.store-home .service-compact-grid,
.store-home .service-rail.illustrated-collection,
.catalog-collections .topic-grid {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px 20px; align-items:start;
}
.store-home .work-collection .service-compact-grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:560px; }
.store-home .service-card.topic-cover,
.catalog-collections .service-card.topic-cover {
  display:block; padding:0; min-height:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible;
}
.store-home .service-card.topic-cover:hover,
.catalog-collections .service-card.topic-cover:hover { box-shadow:none; transform:none; }
.topic-cover .topic-picture.webtoon-cover,
.spotlight-webtoon .webtoon-cover {
  position:relative; isolation:isolate; display:block; width:100%; aspect-ratio:3/4; overflow:hidden;
  border-radius:17px; background:#e8d6ca; box-shadow:0 3px 12px #52342812;
}
.webtoon-cover::after {
  content:''; position:absolute; z-index:1; inset:35% 0 0; pointer-events:none;
  background:linear-gradient(180deg,transparent 12%,#26142814 35%,#261428a6 78%,#201221db);
}
.webtoon-cover .webtoon-cover-art { display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.topic-cover:hover .webtoon-cover-art,.spotlight-webtoon:hover .webtoon-cover-art { transform:scale(1.035); }
.webtoon-cover-title { position:absolute; z-index:2; left:12px; right:12px; bottom:20px; text-align:center; color:#fff9ea; }
.webtoon-cover-title .service-series { margin:0 0 7px; color:#fff3dc; font-size:12px; font-weight:650; text-shadow:0 1px 4px #311721; }
.topic-card .webtoon-cover-title h3,.spotlight-webtoon .webtoon-cover-title h3 {
  margin:0; color:#fff7e5; font-family:var(--sans); font-size:clamp(23px,2.8vw,34px); font-weight:900; line-height:1.2;
  letter-spacing:-.06em; word-break:keep-all; overflow-wrap:normal; text-wrap:balance; text-shadow:0 2px 5px #31172177;
}
.webtoon-cover[data-title-length=long] .webtoon-cover-title h3 { font-size:clamp(21px,2.45vw,29px); }
.store-home .topic-cover .service-card-copy,
.catalog-collections .topic-cover .service-card-copy { padding:11px 2px 0; }
.store-home .topic-cover .service-card-copy p,
.catalog-collections .topic-cover .service-card-copy p { margin:0; color:#705e54; font-size:13px; line-height:1.6; word-break:keep-all; overflow-wrap:anywhere; }
.topic-cover .service-offer { margin-top:7px; }
.spotlight-section .spotlight-track { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; overflow:visible; }
.spotlight.spotlight-webtoon { display:block; padding:0; min-width:0; min-height:0; border:0; border-radius:0; background:none; box-shadow:none; overflow:visible; }
.spotlight-webtoon .spotlight-copy { padding:12px 2px 0; }
.spotlight-webtoon .spotlight-copy p { margin:0; color:#705e54; font-size:13px; line-height:1.6; }
.spotlight-webtoon .spotlight-open { margin-top:9px; color:#855b48; }
.overall-banner { min-height:210px; }
.service-detail-webtoon .service-detail-image { object-position:center 25%; }
.service-detail-webtoon::after { background:linear-gradient(0deg,#2f1928c9,transparent 55%); }
.service-detail-webtoon .service-detail-cover-copy { color:#fffaf4; text-shadow:0 2px 8px #38223780; }
.overall-cover-art { position:absolute; top:0; right:0; width:45%; height:100%; object-fit:cover; object-position:center 30%; mask-image:linear-gradient(90deg,transparent,#000 30%); }
.topic-cover:focus-visible,.spotlight-webtoon:focus-visible { outline:3px solid #a95673; outline-offset:5px; border-radius:17px; }
@media (max-width:960px) {
  .store-home .service-grid,.store-home .service-compact-grid,
  .store-home .service-rail.illustrated-collection,.catalog-collections .topic-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .store-home .service-grid,.store-home .service-compact-grid,
  .store-home .service-rail.illustrated-collection,.catalog-collections .topic-grid { gap:24px 13px; }
  .topic-cover .topic-picture.webtoon-cover,.spotlight-webtoon .webtoon-cover { border-radius:14px; }
  .webtoon-cover-title { left:8px; right:8px; bottom:15px; }
  .webtoon-cover-title .service-series { font-size:10px; margin-bottom:6px; }
  .topic-card .webtoon-cover-title h3,.spotlight-webtoon .webtoon-cover-title h3 { font-size:25px; }
  .webtoon-cover[data-title-length=long] .webtoon-cover-title h3 { font-size:22px; }
  .store-home .topic-cover .service-card-copy p,.catalog-collections .topic-cover .service-card-copy p { font-size:12px; }
  .spotlight-section .spotlight-track { display:flex; gap:14px; overflow-x:auto; margin:0 -18px; padding:0 18px 8px; scroll-snap-type:x mandatory; scroll-padding-inline:18px; }
  .spotlight.spotlight-webtoon { flex:0 0 62%; scroll-snap-align:start; scroll-snap-stop:always; }
  /* Leave room for the final cover to reach the same start edge as the first. */
  .spotlight-section .spotlight-track::after { content:''; flex:0 0 calc(38% - 14px); }
  .spotlight-webtoon .webtoon-cover-title h3 { font-size:32px; }
  .spotlight-webtoon .webtoon-cover-title .service-series { font-size:12px; }
  .spotlight-webtoon .webtoon-cover[data-title-length=long] h3 { font-size:28px; }
  .overall-banner { min-height:180px; }
  .overall-banner > div { max-width:67%; }
  .overall-cover-art { width:48%; }
}
@media (max-width:360px) {
  .topic-card .webtoon-cover-title h3 { font-size:22px; }
  .topic-card .webtoon-cover[data-title-length=long] h3 { font-size:19px; }
  .webtoon-cover-title .service-series { font-size:9px; }
}
@media (prefers-reduced-motion:reduce) {
  .webtoon-cover .webtoon-cover-art { transition:none; }
  .topic-cover:hover .webtoon-cover-art,.spotlight-webtoon:hover .webtoon-cover-art { transform:none; }
}

/* The single overall reading occupies a full catalog row. */
.catalog-collections .collection-overall .topic-grid { grid-template-columns:minmax(0,1fr); }
.overall-collection-heading h2 { margin:0 0 15px; font-size:25px; line-height:1.3; letter-spacing:-.04em; font-weight:780; }
.catalog-collections .catalog-overall-card {
  position:relative; isolation:isolate; display:flex; flex-direction:row; justify-content:flex-start; align-items:center; min-height:290px;
  padding:38px 44px; overflow:hidden; border:0; border-radius:24px;
  background:#f4e7d6; color:#473225; box-shadow:0 5px 20px #6843230c;
}
.catalog-overall-card .catalog-overall-art {
  position:absolute; z-index:-1; top:0; right:0; width:54%; height:100%;
  object-fit:cover; object-position:center 12%;
  mask-image:linear-gradient(90deg,transparent,#000 26%);
}
.catalog-overall-copy { width:52%; }
.catalog-overall-copy h3 { margin:0; font-size:clamp(30px,3.5vw,44px); line-height:1.2; font-weight:850; letter-spacing:-.055em; word-break:keep-all; }
.catalog-overall-copy p { max-width:27ch; margin:16px 0 25px; color:#785b42; font-size:15px; line-height:1.7; word-break:keep-all; }
.catalog-overall-action { display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-size:14px; font-weight:750; color:#705035; }
.catalog-overall-action .service-offer { margin:0; }
.catalog-overall-card:focus-visible { outline:3px solid #a95673; outline-offset:5px; }
@media (max-width:360px) {
  .store-catalog .store-filters.category-tabs { margin-left:-14px; margin-right:-14px; padding-left:14px; padding-right:14px; }
  .store-home .spotlight-track { margin-left:-14px; margin-right:-14px; padding-left:14px; padding-right:14px; scroll-padding-inline:14px; }
}
@media (max-width:700px) {
  .overall-collection-heading h2 { font-size:23px; margin-bottom:13px; }
  .catalog-collections .catalog-overall-card { min-height:224px; padding:25px 22px; border-radius:20px; }
  .catalog-overall-copy { width:55%; }
  .catalog-overall-copy h3 { max-width:6ch; font-size:29px; line-height:1.22; }
  .catalog-overall-copy p { margin:12px 0 18px; font-size:12px; line-height:1.6; }
  .catalog-overall-action { gap:8px; font-size:12px; }
  .catalog-overall-card .catalog-overall-art { width:53%; object-position:54% 20%; mask-image:linear-gradient(90deg,transparent,#000 22%); }
}