/* 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: 8px; background:#e8d6ca; box-shadow: none;
}
.webtoon-cover::after {
  content:''; position:absolute; z-index:1; inset:35% 0 0; pointer-events:none;
  background:linear-gradient(180deg,transparent 10%,#2e211526 35%,#2e2115c9 78%,#251a13ed);
}
.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 { display:block; margin:0 0 7px; color:#fff3dc; font-size: 13px; font-weight:650; text-shadow: none; }
.store-home .topic-cover .webtoon-cover-title h3,
.catalog-collections .topic-cover .webtoon-cover-title h3,
.spotlight-webtoon .webtoon-cover-title h3 {
  margin:0; color:#fff7e5; font-family:var(--sans); font-size:clamp(28px,2.8vw,34px); font-weight:900; line-height:1.14;
  letter-spacing:-.045em; word-break:keep-all; overflow-wrap:normal; text-shadow: none;
}
.webtoon-cover-title .cover-title-line { display:inline; font:inherit; color:inherit; letter-spacing:inherit; overflow-wrap:normal; }
.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: none; }
.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: 8px; }
@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: 8px; }
  .webtoon-cover-title { left:8px; right:8px; bottom:15px; }
  .webtoon-cover-title .service-series { font-size: 13px; margin-bottom:6px; }
  .store-home .topic-cover .webtoon-cover-title h3,
  .catalog-collections .topic-cover .webtoon-cover-title h3 { font-size:26px; }
  .store-home .topic-cover .service-card-copy p,.catalog-collections .topic-cover .service-card-copy p { font-size: 13px; }
  .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: 13px; }
  .overall-banner { min-height:180px; }
  .overall-banner > div { max-width:58%; }
  .overall-banner h2 { font-size:21px; line-height:1.35; word-break:keep-all; }
  .overall-banner p { word-break:keep-all; }
  .overall-cover-art { width:46%; }
}
@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; }
}

/* Lifetime and yearly banners sit together as one pair on the home page. */
.overall-banner + .yearly-banner { margin-top:14px; }
/* Each 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: 8px;
  background:#f4e7d6; color:#473225; box-shadow: none;
}
.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: 8px; }
  .catalog-overall-copy { width:50%; }
  .catalog-overall-copy h3 { max-width:6ch; font-size:29px; line-height:1.22; }
  .catalog-overall-copy p { margin:12px 0 18px; font-size: 13px; line-height:1.6; }
  .catalog-overall-action { gap:8px; font-size: 13px; }
  .catalog-overall-card .catalog-overall-art { width:50%; object-position:54% 20%; mask-image:linear-gradient(90deg,transparent,#000 22%); }
}

/* Home: featured covers on a swipeable 3D shelf (scroll-snap + per-cover tilt). */
.featured-shelf { overflow: hidden; }
.cc-shelf { --cc-w: min(62vw, 260px); position: relative; margin: 0 -16px; }
.cc-track { position: relative; display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 18px calc(50% - var(--cc-w) / 2) 8px; perspective: 900px; outline: none; }
.cc-track::-webkit-scrollbar { display: none; }
.cc-track:focus-visible { outline: 3px solid #a45d3f; outline-offset: -3px; border-radius: 8px; }
.cc-slot { flex: 0 0 var(--cc-w); scroll-snap-align: center; scroll-snap-stop: always; position: relative;
  transform: translateX(calc(var(--cc-offset, 0) * -22%)) rotateY(calc(var(--cc-offset, 0) * -38deg)) scale(calc(1 - var(--cc-depth, 0) * .16));
  transform-style: preserve-3d; will-change: transform; backface-visibility: hidden; }
.cc-cover { display: block; color: inherit; text-decoration: none; }
.cc-cover .webtoon-cover { position: relative; isolation: isolate; border-radius: 8px; overflow: hidden; box-shadow: none;
  }
.cc-slot::after { content: ''; position: absolute; inset: 0 0 auto; aspect-ratio: 3 / 4; border-radius: 8px; pointer-events: none; background: #2b1a10; opacity: calc(var(--cc-depth, 0) * .22); }
.cc-caption { margin: 12px 6px 0; min-height: 3.2em; text-align: center; font-size: 14px; line-height: 1.6; color: #7c6250; word-break: keep-all;
  opacity: 0; transition: opacity .2s; }
.cc-slot.is-centre .cc-caption { opacity: 1; }
.cc-dots { display: flex; justify-content: center; gap: 6px; margin: 4px 0 0; }
.cc-dots span { width: 6px; height: 6px; border-radius: 50%; background: #e2d0bb; transition: width .2s, background .2s; }
.cc-dots span.is-on { width: 18px; border-radius: 6px; background: #b0683c; }
.overall-pair { display: grid; gap: 14px; }
@media (min-width: 900px) { .cc-shelf { --cc-w: 280px; } .overall-pair { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .cc-slot { transform: none; transition: none; } .cc-caption { opacity: 1; } }

/* Computer: arrows and mouse drag (2026-10-29). Touch screens keep swiping. */
.cc-track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.cc-track.is-gliding { scroll-snap-type: none; }
.cc-arrow { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cc-track { cursor: grab; }
  .cc-arrow { display: grid; place-items: center; position: absolute; top: calc(var(--cc-w, 280px) * 2 / 3 - 22px); z-index: 20; width: 44px; height: 44px; border: 1px solid #ead9c4; border-radius: 50%;
    background: rgb(255 250 243 / 92%); color: #7a4a2c; font-size: 28px; line-height: 1; box-shadow: none; cursor: pointer; transition: background .15s, transform .15s; }
  .cc-arrow span { margin-top: -3px; }
  .cc-arrow:hover { background: var(--surface); transform: scale(1.06); }
  .cc-arrow:focus-visible { outline: 3px solid #a45d3f; outline-offset: 2px; }
  .cc-arrow-prev { left: max(16px, calc(50% - var(--cc-w, 280px) / 2 - 64px)); }
  .cc-arrow-next { right: max(16px, calc(50% - var(--cc-w, 280px) / 2 - 64px)); }
}
/* 신년보감: each 2027 topic on its own (2026-10-29). */
.yearly-topics { margin: 28px 0 8px; }
.yearly-topics h2 { margin: 0 0 6px; font-size: 19px; }
.yearly-topics-note { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: #8c6a50; word-break: keep-all; text-wrap: pretty; }
.yearly-topic-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.yearly-topic-link { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border: 1px solid #efe0cb; border-radius: 8px; background: #fffaf2; color: inherit; text-decoration: none; }
.yearly-topic-link:hover { background: #fff4e6; }
.yearly-topic-art { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; }
.yearly-topic-copy { display: grid; gap: 3px; min-width: 0; }
.yearly-topic-copy strong { font-size: 16px; color: #3f2a1d; }
.yearly-topic-copy span { font-size: 13px; line-height: 1.5; color: #8c6a50; word-break: keep-all; text-wrap: pretty; }
.yearly-topic-go { font-size: 24px; color: #b0683c; }

/* 정미년 page: 서겸 in the red sheep hat. Taller on phones so the hat and the sheep both show. */
.service-detail-cover.service-detail-jeongmi .service-detail-image { object-position: center top; }
.service-detail-cover.service-detail-jeongmi .service-detail-cover-copy { left: 16px; right: auto; bottom: 14px; text-align: left; }
.service-detail-cover.service-detail-jeongmi .service-detail-cover-copy strong { margin-top: 2px; font-size: 20px; }
.service-detail-cover.service-detail-jeongmi::after { background: linear-gradient(0deg, #1d1a17cc, transparent 26%); }
@media (max-width: 700px) { .service-detail-cover.service-detail-jeongmi { height: 430px; } }