/* 천운록 editorial layer — ink on paper, rules instead of boxes, one display face.
   Loaded last; overrides tokens and the storefront structure without touching content. */
:root {
  --paper: #faf8f4;
  --surface: #ffffff;
  --ink: #1d1a17;
  --ink-soft: #3a3430;
  --muted: #6c655e;
  --line: #ddd6cc;
  --rule: #1d1a17;
  --brand: #b3412e;
  --brand-dark: #8f3222;
  --blush: #f5eeea;
  --ivory: #f0ebe3;
  --fox-shadow: none;
  --radius: 3px;
  --display: "Nanum Myeongjo", "AppleMyungjo", "Batang", serif;
  --serif: var(--display);
}
body { background: var(--paper); color: var(--ink); }

/* Header and navigation: plain type, an underline marks the current page. */
.site-header { height: 68px; background: var(--paper); border-bottom: 1px solid var(--line); backdrop-filter: none; }
.desktop-nav { gap: 30px; }
.desktop-nav a { padding: 8px 1px; border-radius: 0; color: var(--muted); font-weight: 500; background: transparent; }
.desktop-nav a:hover { color: var(--ink); background: transparent; }
.desktop-nav a[aria-current=page] { color: var(--ink); font-weight: 700; background: transparent; }
.desktop-nav a[aria-current=page]::after { display: block; bottom: 4px; left: 0; width: 100%; height: 2px; background: var(--brand); transform: none; }
.account-link { border-radius: var(--radius); background: transparent; border: 1px solid var(--line); padding: 7px 13px; }
.account-link:hover { background: var(--ivory); }
.qimen-about-link { border-radius: var(--radius); }
.icon-button { border-radius: var(--radius); }

/* Buttons: ink fill, square corners, no glow. */
.primary-button, .secondary-button, .hero-secondary, .kakao-login-button { border-radius: var(--radius); box-shadow: none; }
.primary-button { background: var(--ink); border-color: var(--ink); color: #fff; }
.primary-button:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.secondary-button, .hero-secondary { background: transparent; border-color: var(--ink); color: var(--ink); }

/* Type scale: display face for titles, restrained sans body. */
.page-title, .store-page > .page-title { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; line-height: 1.3; }
.store-page > .page-title { font-size: clamp(28px, 3.4vw, 40px); margin: 6px 0 20px; }
h1, h2 { text-wrap: balance; }

/* Calmer shared surfaces (structure unchanged). */
:is(.settings-card, .library-item, .library-job, .reading-chapter, .reading-toc, .home-faq details, .profile-form fieldset,
  .empty-state, .catalog-empty, .feature-empty, .account-shortcuts a, .service-input-subject, .concern-partner-choice,
  .fox-note, .reading-reference-details, .concern-summary, .service-input-page .feature-profile-picker) {
  border-radius: var(--radius); box-shadow: none;
}
.store-search { border-radius: var(--radius); box-shadow: none; background: var(--surface); }
.store-search button { border-radius: var(--radius); }
.service-card, .service-card.concern-link, .service-card:hover { box-shadow: none; }

/* ---------- Home ---------- */
.page.store-page { max-width: 1160px; }
.store-home .welcome-scene {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 48px; align-items: end;
  margin: 8px 0 0; border-radius: 0; background: transparent; overflow: visible;
}
.store-home .welcome-entrance > img { aspect-ratio: 3 / 2; height: auto; border-radius: var(--radius); object-fit: cover; }
.store-home .welcome-copy { padding: 0 0 6px; justify-content: flex-end; }
.store-home .welcome-greeter { width: 96px; height: 96px; margin: 0 0 18px -6px; }
.store-home .welcome-copy h1 {
  margin: 0 0 16px; font-family: var(--display); font-size: clamp(34px, 4.3vw, 54px); font-weight: 800;
  line-height: 1.22; letter-spacing: -.035em; color: var(--ink);
}
.store-home .welcome-copy > p { margin: 0 0 28px; font-size: 15px; color: var(--muted); }
.store-home .welcome-copy .primary-button { min-height: 50px; padding: 12px 24px; border-radius: var(--radius); font-size: 15px; }

/* Keyword index: line icons between hairlines. */
.store-home .service-shortcuts {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; margin: 32px 0 0; padding: 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--line);
}
.store-home .shortcut {
  gap: 8px; min-height: 84px; padding: 16px 4px 12px; justify-content: center;
  color: var(--ink); font-size: 14px; font-weight: 600; letter-spacing: -.01em;
}
.store-home .shortcut + .shortcut { border-left: 1px solid var(--line); }
.store-home .shortcut .shortcut-icon {
  width: 32px; height: 32px; border-radius: 0; background: none; box-shadow: none; color: var(--ink); transition: color .15s ease;
}
.store-home .shortcut:hover .shortcut-icon { transform: none; box-shadow: none; color: var(--brand); }
.store-home .shortcut:hover { background: var(--surface); }
.line-icon { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.store-home .store-offer-line {
  min-height: 46px; margin: 0; padding: 0; border-radius: 0; background: transparent;
  border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px;
}
.store-home .offer-dot { width: 6px; height: 6px; border-radius: 0; background: var(--brand); }


/* ==========================================================================
   Product-family colour fields — the ONE place to change the palette.
   --fam-accent : section rule / heading accent (also usable as text on paper; ≥4.5:1)
   --fam-tint   : light field behind the cover tile
   --fam-frame  : thin tile frame
   --fam-scrim  : dark tint for the bottom scrim under the white keyword (white on it ≥7:1)
   Proposal only; the owner will choose. Mirrored in outputs/qa/design-refresh-20261028/palette.txt
   ========================================================================== */
[data-family] { --fam-accent: #1d1a17; --fam-tint: #efebe4; --fam-frame: #ddd6cc; --fam-scrim: #1d1a17; --fam-glow: #f1e4cf; --fam-seal: #b03a2e; }
[data-family=love]    { --fam-accent: #a3445a; --fam-tint: #f7e6ea; --fam-frame: #ebc9d1; --fam-scrim: #4b1a28;  --fam-glow: #ffd3dd; --fam-seal: #c0485f;} /* 연애·결혼 — soft rose */
[data-family=reunion] { --fam-accent: #3e3f8c; --fam-tint: #e5e5f2; --fam-frame: #c7c8e3; --fam-scrim: #191a45;  --fam-glow: #d8d9ff; --fam-seal: #4b4aa6;} /* 재회 — night indigo */
[data-family=match]   { --fam-accent: #a3322a; --fam-tint: #f5e8d6; --fam-frame: #dfc08f; --fam-scrim: #4f1612;  --fam-glow: #f6d58f; --fam-seal: #b0302a;} /* 궁합 — crimson + gold frame */
[data-family=work]    { --fam-accent: #3c5a78; --fam-tint: #e4eaf0; --fam-frame: #c6d2de; --fam-scrim: #1b2a3a;  --fam-glow: #cfe0f2; --fam-seal: #3e5f82;} /* 취업·이직 — slate blue */
[data-family=study]   { --fam-accent: #2b6359; --fam-tint: #e1eeea; --fam-frame: #bcd6cf; --fam-scrim: #11302b;  --fam-glow: #c8eee3; --fam-seal: #2e7266;} /* 수능·진로·공부 — ink teal */
[data-family=wealth]  { --fam-accent: #7c6327; --fam-tint: #ece6d8; --fam-frame: #cdb98a; --fam-scrim: #14120d;  --fam-glow: #f3d892; --fam-seal: #8d6a1e;} /* 재물·생활 — black + muted gold */
[data-family=kin]     { --fam-accent: #8a5718; --fam-tint: #f4e8d6; --fam-frame: #e0c49c; --fam-scrim: #3f2a0e;  --fam-glow: #f7d9ae; --fam-seal: #a4591c;} /* 가족·대인관계 — warm ochre */
:root { --banner-life: #1d1a17; --banner-life-accent: #e58a6f; --banner-year: #9c3424; --banner-year-accent: #f2d9a8; } /* 평생보감 ink+red / 신년비책 red+paper */

/* Section rhythm: family-coloured heavy rule + display heading; tighter, app-like spacing. */
.store-home .store-section { margin-top: 40px; }
.store-section-heading { align-items: baseline; margin-bottom: 14px; padding-top: 10px; border-top: 2px solid var(--fam-accent, var(--rule)); }
.store-section-heading h2 {
  font-family: var(--display); font-size: clamp(22px, 2.3vw, 27px); font-weight: 800; letter-spacing: -.03em; line-height: 1.3;
}
.store-more { color: var(--muted); }

/* ---------- Cover tiles ---------- */
.store-home :is(.spotlight-track, .service-grid, .service-compact-grid, .service-rail),
.store-home .spotlight-section .spotlight-track,
.store-home .service-rail.illustrated-collection,
.store-home .work-collection .service-compact-grid,
.store-catalog .catalog-collection:not(.collection-overall) .topic-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 14px; align-items: start;
  max-width: none; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none;
}
.store-home .spotlight-section .spotlight-track::after { content: none; }
.store-home .spotlight-track > .spotlight:first-child { grid-column: span 2; }

.store-home :is(.service-card.topic-cover, .spotlight.spotlight-webtoon),
.store-catalog .catalog-collections .service-card.topic-cover {
  display: block; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
  box-shadow: none; overflow: visible; color: var(--ink); flex: none;
}
.store-home :is(.service-card.topic-cover, .spotlight.spotlight-webtoon):hover,
.store-catalog .catalog-collections .service-card.topic-cover:hover { transform: none; box-shadow: none; }

.topic-cover .topic-picture.webtoon-cover, .spotlight-webtoon .webtoon-cover {
  position: relative; isolation: isolate; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden;
  border: 1px solid var(--fam-frame); border-radius: 9px; background: var(--fam-tint); box-shadow: none;
}
.store-home .spotlight-track > .spotlight:first-child .webtoon-cover { aspect-ratio: 8 / 5; }
.topic-cover .webtoon-cover .webtoon-cover-art, .spotlight-webtoon .webtoon-cover .webtoon-cover-art {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%;
  transform: scale(var(--z, 1.2)); transform-origin: var(--fx, 50%) var(--fy, 15%); transition: none;
}
.topic-cover:hover .webtoon-cover-art, .spotlight-webtoon:hover .webtoon-cover-art { transform: scale(var(--z, 1.2)); }
.topic-cover .webtoon-cover::after, .spotlight-webtoon .webtoon-cover::after, .cc-cover .webtoon-cover::after {
  content: ''; position: absolute; z-index: 1; inset: 58% 0 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--fam-scrim) 70%, transparent) 45%, color-mix(in srgb, var(--fam-scrim) 94%, transparent) 100%);
}
/* Product name lettered onto the cover as one word (owner, 2026-10-30). Centred over the lower scrim:
   the guide's name small on top, then the whole title in large display type filled from white into the
   family tone with a family-coloured glow. Colours come from the family block above. */
a .webtoon-cover .cover-title {
  position: absolute; z-index: 2; left: 6px; right: 6px; bottom: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
}
a .webtoon-cover .cover-title-guide {
  font-family: var(--display); font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--fam-glow);
  text-shadow: 0 1px 3px color-mix(in srgb, var(--fam-scrim) 90%, transparent);
}
a .webtoon-cover .cover-title-name {
  margin: 0; max-width: 100%; padding: 0 2px 2px;
  font-family: var(--display); font-size: clamp(30px, 3vw, 40px); font-weight: 800; line-height: 1.08; letter-spacing: -.05em;
  word-break: keep-all; overflow-wrap: anywhere;
  background: linear-gradient(180deg, #fff 0%, #fff 38%, var(--fam-glow) 78%, color-mix(in srgb, var(--fam-glow) 70%, var(--fam-seal)) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--fam-scrim) 85%, transparent))
          drop-shadow(0 0 7px color-mix(in srgb, var(--fam-seal) 70%, transparent))
          drop-shadow(0 3px 10px color-mix(in srgb, var(--fam-scrim) 80%, transparent));
}
a .webtoon-cover .cover-title-long .cover-title-name { font-size: clamp(26px, 2.5vw, 33px); }
a .webtoon-cover .cover-title-xlong .cover-title-name { font-size: clamp(22px, 2.1vw, 28px); }
.store-home .spotlight-track > .spotlight:first-child .webtoon-cover .cover-title { bottom: 18px; }
.store-home .spotlight-track > .spotlight:first-child .webtoon-cover .cover-title-name { font-size: clamp(48px, 5vw, 64px); }
.store-home .spotlight-track > .spotlight:first-child .webtoon-cover .cover-title-guide { font-size: 15px; }

.topic-cover .service-card-copy, .spotlight-webtoon .spotlight-copy,
.store-home .topic-cover .service-card-copy, .store-catalog .topic-cover .service-card-copy {
  position: static; padding: 9px 1px 0; min-width: 0;
}
.topic-cover .service-card-copy h3, .spotlight-webtoon .spotlight-copy h3 {
  margin: 0 0 3px; color: var(--ink); font-family: var(--sans); font-size: 16px; font-weight: 700; line-height: 1.35; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topic-cover .service-card-copy p, .spotlight-webtoon .spotlight-copy p,
.store-home .topic-cover .service-card-copy p, .store-catalog .topic-cover .service-card-copy p {
  margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; word-break: keep-all; overflow-wrap: anywhere;
}
.topic-cover .service-offer { margin-top: 5px; color: var(--brand-dark); font-size: 12px; font-weight: 650; }
.topic-cover:hover h3, .spotlight-webtoon:hover h3 { color: var(--fam-accent); }
.topic-cover:focus-visible, .spotlight-webtoon:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; border-radius: 9px; }

/* ---------- Lifetime / yearly banners: two strong, distinct panels ---------- */
.store-home .overall-banner {
  display: inline-flex; vertical-align: top; width: calc(50% - 7px); min-height: 200px; margin-top: 40px;
  padding: 24px 24px; border: 0; border-radius: 9px; background: var(--banner-life); color: #fff; overflow: hidden;
}
.store-home .overall-banner.yearly-banner { margin-left: 14px; background: var(--banner-year); }
.store-home .overall-banner > div { max-width: 58%; }
/* The banners now sit in the shared .overall-pair grid; each fills its own cell. */
.store-home .overall-pair .overall-banner, .store-home .overall-pair .overall-banner.yearly-banner { display: flex; width: auto; margin: 0; }
.store-home .overall-pair { margin-top: 40px; }
.store-home .overall-banner > div > span { color: var(--banner-life-accent); font-size: 12px; font-weight: 700; }
.store-home .yearly-banner > div > span { color: var(--banner-year-accent); }
.store-home .overall-banner h2 { color: #fff; font-family: var(--display); font-size: clamp(23px, 2.3vw, 30px); font-weight: 800; letter-spacing: -.03em; line-height: 1.25; }
.store-home .overall-banner p { color: #f1e9df; font-size: 13px; }
.store-home .overall-cover-art { width: 50%; mask-image: linear-gradient(90deg, transparent, #000 35%); }

/* Cast: names only, no thumbnails. */
.store-home .cast-shortcuts { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; }
.store-home .cast-shortcuts a { display: flex; align-items: center; justify-content: flex-start; min-height: 44px; padding: 4px 0; gap: 0; border-bottom: 1px solid var(--line); }
.store-home .cast-shortcuts span { font-family: var(--display); font-size: 16px; font-weight: 700; text-align: left; }
.store-home .cast-shortcuts a:hover span { color: var(--brand-dark); }

.store-home .fox-guide-link {
  margin-top: 36px; padding: 4px 4px 4px 0; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  border-radius: 0; background: transparent;
}
.store-home .fox-guide-link .fox-note { padding-left: 0; }
.store-home .fox-guide-link .fox-mascot { width: 64px; height: 64px; }

/* ---------- Catalog ---------- */
.store-catalog .store-filters.category-tabs {
  gap: 24px; margin: 4px 0 0; padding: 0; border-bottom: 1px solid var(--line); background: var(--paper);
}
.store-catalog .category-tabs .filter {
  min-height: 46px; padding: 10px 1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent; color: var(--muted); font-size: 14px; font-weight: 500;
}
.store-catalog .category-tabs .filter:hover { background: transparent; color: var(--ink); }
.store-catalog .category-tabs .filter.selected { border-bottom-color: var(--ink); background: transparent; color: var(--ink); font-weight: 700; }
.store-catalog .catalog-count { margin: 10px 0 16px; color: var(--muted); }
.store-catalog .catalog-collections { gap: 40px; }
.store-catalog .collection-heading, .store-catalog .overall-collection-heading {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; min-height: 0; margin-bottom: 14px; padding: 10px 0 0;
  border-top: 2px solid var(--fam-accent, var(--rule)); border-radius: 0; background: transparent;
}
.store-catalog .collection-heading h2, .store-catalog .overall-collection-heading h2 {
  margin: 0 0 3px; font-family: var(--display); font-size: clamp(22px, 2.3vw, 27px); font-weight: 800; letter-spacing: -.03em;
}
.store-catalog .collection-heading p { color: var(--muted); font-size: 13px; }
.store-catalog .collection-heading .collection-art { width: 28px; height: 28px; color: var(--fam-accent); }
.store-catalog .collection-overall .topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.store-catalog .catalog-collections .catalog-overall-card {
  min-height: 240px; padding: 28px 28px; border: 0; border-radius: 9px; box-shadow: none; background: var(--banner-life); color: #fff;
}
.store-catalog .catalog-collections .overall-yearly-fortune { background: var(--banner-year); }
.store-catalog .catalog-overall-copy { width: 58%; }
.store-catalog .catalog-overall-copy h3 { color: #fff; font-family: var(--display); font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.035em; }
.store-catalog .catalog-overall-copy p { color: #f1e9df; }
.store-catalog .catalog-overall-action { color: #fff; }
.store-catalog .overall-overall-chart .catalog-overall-action > span:first-child { color: var(--banner-life-accent); }
.store-catalog .overall-yearly-fortune .catalog-overall-action > span:first-child { color: var(--banner-year-accent); }
.store-catalog .catalog-overall-card .catalog-overall-art { width: 52%; mask-image: linear-gradient(90deg, transparent, #000 35%); }
/* ---------- Product detail ---------- */
.service-detail-cover, .service-detail-webtoon { border-radius: var(--radius); }
.service-detail-cover-copy strong { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.service-detail-info h1 { font-family: var(--display); font-size: clamp(30px, 3.2vw, 40px); font-weight: 800; letter-spacing: -.035em; line-height: 1.25; }
.service-detail-category { color: var(--brand-dark); font-weight: 600; }
.service-detail-caption { color: var(--ink-soft); }
.service-detail-benefits { padding: 14px 0; border-radius: 0; background: transparent; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--line); gap: 10px 22px; }
.service-detail-benefits span { color: var(--ink-soft); font-size: 13px; }
.service-contents h2 { font-family: var(--display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.service-contents li span { width: auto; height: auto; min-width: 0; padding: 0; border-radius: 0; background: none; font-family: var(--display); font-size: 13px; font-weight: 800; color: var(--brand); }
.service-before-start { padding: 2px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--muted); }
.service-start-dock { border-top: 0; }
.service-start-dock .service-start { background: var(--ink); border-color: var(--ink); border-radius: var(--radius); }
.service-start-dock .service-start:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.service-input-page .form-actions .primary-button { background: var(--ink); border-color: var(--ink); }
.service-input-title { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; }

/* ---------- Footer & mobile nav ---------- */
.site-footer { border-top: 1px solid var(--rule); }
.mobile-nav svg.nav-art path { fill: none; stroke: currentColor; }
.mobile-nav svg.nav-art path[stroke=none] { fill: currentColor; stroke: none; }

@media (max-width: 960px) {
  .store-home .welcome-scene { gap: 0 32px; }
  .store-home .shortcut { font-size: 13px; }
  .store-home :is(.spotlight-track, .service-grid, .service-compact-grid, .service-rail),
  .store-home .spotlight-section .spotlight-track,
  .store-home .service-rail.illustrated-collection,
  .store-catalog .catalog-collection:not(.collection-overall) .topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .store-home .spotlight-track > .spotlight:first-child { grid-column: span 3; }
  .store-home .spotlight-track > .spotlight:first-child .webtoon-cover { aspect-ratio: 16 / 9; }
  .store-home .cast-shortcuts { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; }
}

@media (max-width: 700px) {
  .site-header { height: 59px; }
  .store-home .welcome-scene { display: block; margin: 0 -18px; }
  .store-home .welcome-entrance > img { border-radius: 0; aspect-ratio: 3 / 2; }
  .store-home .welcome-copy { position: relative; padding: 18px 18px 0; }
  .store-home .welcome-greeter { position: absolute; left: auto; right: 10px; top: -86px; width: 96px; height: 96px; margin: 0; }
  .store-home .welcome-copy h1 { font-size: 29px; max-width: none; margin-bottom: 8px; }
  .store-home .welcome-copy > p { font-size: 14px; margin-bottom: 16px; }
  .store-home .welcome-copy .primary-button { width: 100%; justify-content: center; }

  .store-home .service-shortcuts { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 24px; }
  .store-home .shortcut { min-height: 78px; padding: 14px 2px 10px; gap: 7px; font-size: 13px; }
  .store-home .shortcut:nth-child(4n+1) { border-left: 0; }
  .store-home .shortcut:nth-child(n+5) { border-top: 1px solid var(--line); }
  .line-icon { width: 27px; height: 27px; }
  .store-home .store-offer-line { font-size: 12px; min-height: 42px; }

  .store-home .store-section { margin-top: 30px; }
  .store-section-heading { margin-bottom: 12px; }
  .store-section-heading h2 { font-size: 21px; }

  .store-home :is(.spotlight-track, .service-grid, .service-compact-grid, .service-rail),
  .store-home .spotlight-section .spotlight-track,
  .store-home .service-rail.illustrated-collection,
  .store-catalog .catalog-collection:not(.collection-overall) .topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px;
  }
  .store-home .spotlight-track > .spotlight:first-child { grid-column: span 2; }
  .store-home .spotlight-track > .spotlight:first-child .webtoon-cover { aspect-ratio: 4 / 3; }
  .store-home .spotlight-track > .spotlight:first-child .webtoon-cover .cover-title-name { font-size: 46px; }
  .topic-cover .topic-picture.webtoon-cover, .spotlight-webtoon .webtoon-cover { border-radius: 8px; }
  a .webtoon-cover .cover-title { left: 6px; right: 6px; bottom: 10px; }
  a .webtoon-cover .cover-title-guide { font-size: 11px; }
  a .webtoon-cover .cover-title-name { font-size: 29px; }
  a .webtoon-cover .cover-title-long .cover-title-name { font-size: 24px; }
  a .webtoon-cover .cover-title-xlong .cover-title-name { font-size: 20px; }
  .topic-cover .service-card-copy h3, .spotlight-webtoon .spotlight-copy h3 { font-size: 15px; }
  .topic-cover .service-card-copy p, .spotlight-webtoon .spotlight-copy p,
  .store-home .topic-cover .service-card-copy p, .store-catalog .topic-cover .service-card-copy p { font-size: 12px; }

  .store-home .overall-banner { display: flex; width: auto; min-height: 160px; margin-top: 30px; padding: 20px 18px; }
  .store-home .overall-banner.yearly-banner { margin: 10px 0 0; }
  .store-home .overall-banner > div { max-width: 62%; }
  .store-home .overall-banner h2 { font-size: 23px; }
  .store-home .overall-banner p { font-size: 12px; }

  .store-home .cast-shortcuts { column-gap: 12px; }
  .store-home .cast-shortcuts span { font-size: 15px; }
  .store-home .fox-guide-link { margin-top: 30px; }
  .store-home .fox-guide-link .fox-mascot { width: 56px; height: 56px; }

  .store-catalog .store-filters.category-tabs { gap: 20px; margin: 4px -18px 0; padding: 0 18px; }
  .store-catalog .category-tabs .filter { font-size: 13px; padding: 10px 1px; }
  .store-catalog .catalog-collections { gap: 30px; }
  .store-catalog .collection-overall .topic-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .store-catalog .catalog-collections .catalog-overall-card { min-height: 190px; padding: 22px 18px; }
  .store-catalog .catalog-overall-copy h3 { max-width: none; font-size: 25px; line-height: 1.25; word-break: keep-all; }

  .service-detail-cover { border-radius: var(--radius); }
  .service-detail-cover-copy strong { font-size: 34px; }
  .service-detail-info h1 { font-size: 28px; }

  .mobile-nav { background: var(--paper); backdrop-filter: none; box-shadow: none; border-top: 1px solid var(--line); }
  .mobile-nav a { border-radius: 0; color: var(--muted); }
  .mobile-nav a[aria-current=page] { color: var(--ink); background: transparent; box-shadow: inset 0 2px 0 var(--brand); }
}

@media (max-width: 360px) {
  .store-home .welcome-scene { margin: 0 -14px; }
  .store-home .welcome-copy { padding-left: 14px; padding-right: 14px; }
  .store-catalog .store-filters.category-tabs { margin-left: -14px; margin-right: -14px; padding: 0 14px; }
  .store-home .welcome-copy h1 { font-size: 26px; }
  .store-home .shortcut { font-size: 12px; }
  .store-home .cast-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  a .webtoon-cover .cover-title-name { font-size: 25px; }
  a .webtoon-cover .cover-title-long .cover-title-name { font-size: 21px; }
  a .webtoon-cover .cover-title-xlong .cover-title-name { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .store-home .shortcut .shortcut-icon { transition: none; }
}

/* Wide feature tile: show the whole pair rather than zooming into one face. */
.store-home .spotlight-track > .spotlight:first-child .webtoon-cover .webtoon-cover-art { transform: none; object-position: 50% 24%; }

/* Remaining titles that kept the body face after the first pass (v131 review). */
#qimen-about-title, .daily-headline, .ro-cover-title { font-family: var(--display); letter-spacing: -.02em; }