html body:has(.magazine) {
  height: auto;
  min-height: 100%;
  background: var(--warm-50);
}

.magazine {
  max-width: var(--page-width-wide);
  margin: 0 auto;
  padding: 0 var(--page-gutter) var(--space-12);
  color: var(--ink);
}

/* ── 상단 ─────────────────────────────────────────────────── */

.magazine .mag-top {
  padding: var(--space-6) 0 var(--space-7);
}

.magazine .mag-top__row {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
}

.magazine .mag-brand {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--display-weight-strong);
  letter-spacing: var(--tracking-display);
  text-decoration: none;
}

.magazine .mag-top__eyebrow {
  margin: var(--space-7) 0 0;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-label);
  letter-spacing: 0.2em;
}

.magazine .mag-top__title {
  margin: var(--space-3) 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 68px);
  font-weight: var(--display-weight-strong);
  letter-spacing: -0.05em;
  line-height: 1.08;
}

.magazine .mag-top__lead {
  max-width: 46ch;
  margin: var(--space-4) 0 0;
  color: var(--muted);
  font-size: var(--text-md);
  line-height: 1.8;
  word-break: keep-all;
}

/* ── 섹션 머리 — 라벨 + 헤어라인 + 우측 더보기 ─────────────── */

.magazine .mag-section {
  padding-top: var(--space-9);
}

.magazine .mag-head {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: auto minmax(20px, 1fr) auto;
  align-items: center;
  margin-bottom: var(--space-6);
}

.magazine .mag-head__label {
  margin: 0;
  color: var(--accent);
  font-size: var(--text-2xs);
  font-weight: var(--weight-label);
  letter-spacing: 0.18em;
}

.magazine .mag-head__rule {
  display: block;
  height: 1px;
  background: var(--line);
}

.magazine .mag-head__more {
  /* 터치 대상 24x24 확보 (WCAG 2.5.8) */
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-base) var(--ease-out);
}

.magazine .mag-head__more:hover {
  color: var(--rose-500);
}

/* ── (a) 히어로 캐러셀 — scroll-snap, 자바스크립트 없음 ────── */

.magazine .hero {
  margin-top: var(--space-2);
}

.magazine .hero__track {
  display: grid;
  grid-auto-columns: 100%;
  grid-auto-flow: column;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.magazine .hero__track::-webkit-scrollbar {
  display: none;
}

.magazine .hero__slide {
  display: grid;
  overflow: hidden;
  border-radius: var(--subpage-radius);
  background: var(--surface);
  box-shadow: var(--panel-shadow);
  scroll-snap-align: center;
}

.magazine .hero__media {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--rose-50);
}

.magazine .hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.magazine .hero__body {
  padding: var(--space-6) var(--space-6) var(--space-6);
}

.magazine .hero__count {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.16em;
}

.magazine .hero__count strong {
  color: var(--ink);
}

.magazine .hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.12em;
}

.magazine .hero__title {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: var(--weight-regular);
  line-height: 1.45;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.magazine .hero__title a {
  color: var(--ink);
  text-decoration: none;
}

.magazine .hero__title a:hover {
  color: var(--rose-500);
}

.magazine .hero__place {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-4) 0 0;
  color: var(--muted);
  font-size: var(--text-xs);
}

.magazine .hero__place-link {
  /* 터치 대상 24x24 확보 (WCAG 2.5.8) */
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  color: var(--rose-600);
  text-decoration: none;
  text-underline-offset: 3px;
}

.magazine .hero__place-link:hover {
  color: var(--rose-500);
  text-decoration: underline;
}

.magazine .hero__nav {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.magazine .hero__arrow {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  font-size: var(--text-sm);
  text-decoration: none;
  background: var(--surface);
  transition: border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}

.magazine .hero__arrow:hover {
  border-color: var(--rose-500);
  color: var(--rose-500);
}

/* ── (b) 랭킹 ─────────────────────────────────────────────── */

.magazine .ranks {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.magazine .rank {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 26px 64px minmax(0, 1fr);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  background: var(--surface);
  box-shadow: var(--control-shadow);
  transition: transform var(--duration-slow) var(--ease-out);
}

.magazine .rank:hover {
  transform: translateY(-2px);
}

.magazine .rank__index {
  color: var(--muted);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
}

.magazine .rank__media {
  display: grid;
  overflow: hidden;
  aspect-ratio: 1;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--rose-500);
  font-family: var(--font-display);
  background: var(--rose-50);
}

.magazine .rank__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.magazine .rank__body strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
}

.magazine .rank__body em {
  display: block;
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--text-xs);
  font-style: normal;
}

/* ── (c) 마이크로 트렌드 전광판 ────────────────────────────── */

.magazine .board {
  margin: 0;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--control-shadow);
  list-style: none;
}

.magazine .board__row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 62px minmax(0, 1fr) auto auto;
  align-items: baseline;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--hairline-soft);
}

.magazine .board__row:last-child {
  border-bottom: 0;
}

.magazine .board__date {
  color: var(--muted);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.magazine .board__name {
  overflow: hidden;
  font-family: var(--font-display);
  font-size: var(--text-base);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.magazine .board__name a {
  color: var(--ink);
  text-decoration: none;
}

.magazine .board__name a:hover {
  color: var(--rose-500);
}

.magazine .board__hot {
  margin-left: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  color: var(--rose-600);
  font-size: var(--text-2xs);
  font-style: normal;
  font-weight: var(--weight-label);
  letter-spacing: 0.1em;
  background: var(--rose-50);
}

.magazine .board__channel {
  color: var(--muted);
  font-size: var(--text-2xs);
  white-space: nowrap;
}

.magazine .board__likes {
  color: var(--rose-600);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

/* ── (d) 칼럼 그리드 ──────────────────────────────────────── */

.magazine .columns {
  display: grid;
  gap: var(--space-7) var(--space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.magazine .column__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  background: var(--rose-50);
}

.magazine .column__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--duration-slow) var(--ease-out);
}

.magazine .column__media:hover img {
  opacity: 0.84;
}

.magazine .column__title {
  margin: var(--space-4) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  word-break: keep-all;
}

.magazine .column__title a {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.magazine .column__title a:hover {
  color: var(--rose-500);
}

.magazine .column__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: var(--space-2) 0 0;
  color: var(--muted);
  font-size: var(--text-xs);
}

.magazine .column__place {
  /* 터치 대상 24x24 확보 (WCAG 2.5.8) */
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  color: var(--rose-600);
  text-decoration: none;
}

.magazine .column__place:hover {
  color: var(--rose-500);
}

.magazine .column__foot {
  display: flex;
  justify-content: space-between;
  margin: var(--space-2) 0 0;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* ── (e)(f)(g) 3열 미니 섹션 ──────────────────────────────── */

.magazine .mag-trio {
  display: grid;
  gap: var(--space-2) var(--space-6);
}

.magazine .mag-section--compact {
  padding-top: var(--space-8);
}

.magazine .mini {
  margin: 0;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--control-shadow);
  list-style: none;
}

.magazine .mini__row {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--hairline-soft);
}

.magazine .mini__row--stack {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
}

.magazine .mini__row:last-child {
  border-bottom: 0;
}

.magazine .mini__date {
  color: var(--rose-600);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.magazine .mini__body strong,
.magazine .mini__term {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  word-break: keep-all;
}

.magazine .mini__body em,
.magazine .mini__desc {
  display: block;
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--text-xs);
  font-style: normal;
  line-height: 1.65;
  word-break: keep-all;
}

/* ── (h) 상황별 진입 카드 ─────────────────────────────────── */

.magazine .entries {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.magazine .entry {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: var(--space-6) var(--space-6);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  background: var(--surface);
  box-shadow: var(--control-shadow);
  transition: transform var(--duration-slow) var(--ease-out);
}

.magazine .entry:hover {
  transform: translateY(-2px);
}

.magazine .entry__q {
  grid-column: 1;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.06em;
}

.magazine .entry__a {
  grid-column: 1;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
}

.magazine .entry__go {
  grid-row: 1 / 3;
  grid-column: 2;
  color: var(--rose-500);
  font-size: var(--text-base);
}

/* ── 넓은 화면 ────────────────────────────────────────────── */

@media (min-width: 760px) {
  .magazine {
    padding: 0 var(--page-gutter) 120px;
  }

  .magazine .hero__slide {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: stretch;
  }

  /* 사진 칸에 확실한 높이를 줘야 원본(세로 4:5)이 그대로 늘어나지 않습니다. */
  .magazine .hero__media {
    aspect-ratio: 4 / 3;
    height: auto;
  }

  .magazine .hero__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-7) var(--space-8);
  }

  .magazine .columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .magazine .mag-trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .magazine .entries {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .magazine .ranks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .magazine .hero__track {
    scroll-behavior: auto;
  }

  .magazine .rank,
  .magazine .entry,
  .magazine .column__media img {
    transition: none;
  }

  .magazine .rank:hover,
  .magazine .entry:hover {
    transform: none;
  }
}

.mag-header,
.mag-bar {
  background: var(--cream);
}

.mag-util {
  background: var(--cream-strong);
}

.mag-search__field {
  background: rgb(255 255 255 / 72%);
}

.magazine {
  padding-bottom: 0;
}

.magazine .mag-block {
  position: relative;
  isolation: isolate;
}

.magazine .mag-block::before {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  content: "";
  background: var(--mag-block-color);
  transform: translateX(-50%);
}

.magazine .mag-block--hero {
  --mag-block-color: var(--cream);

  padding-bottom: var(--space-10);
}

.magazine .mag-block--ranking {
  --mag-block-color: var(--coral);

  padding-bottom: var(--space-10);
}

.magazine .mag-block--ranking .mag-head__label,
.magazine .mag-block--ranking .mag-head__more {
  color: var(--coral-ink);
}

.magazine .mag-block--ranking .mag-head__rule {
  background: rgb(36 32 28 / 25%);
}

.magazine .mag-block--ranking .rank {
  background: var(--cream);
}

.magazine .mag-block--ranking .rank__media {
  background: var(--cream-strong);
}

.magazine .mag-block--micro {
  --mag-block-color: var(--cream-strong);

  padding-bottom: var(--space-10);
}

.magazine .mag-block--latest {
  --mag-block-color: #fff;

  padding-bottom: var(--space-10);
}

.magazine .mag-block--trio {
  --mag-block-color: var(--cream);

  padding-bottom: var(--space-10);
}

.magazine .mag-block--entries {
  --mag-block-color: var(--cobalt);

  padding-bottom: var(--space-11);
}

.magazine .mag-block--entries .mag-head__label,
.magazine .mag-block--entries .mag-head__more,
.magazine .mag-block--entries .entry,
.magazine .mag-block--entries .entry__q,
.magazine .mag-block--entries .entry__go {
  color: var(--gray-0);
}

.magazine .mag-block--entries .mag-head__rule {
  background: rgb(255 255 255 / 38%);
}

.magazine .mag-block--entries .entry {
  border: 1px solid rgb(255 255 255 / 48%);
  background: rgb(255 255 255 / 8%);
  box-shadow: none;
}

.magazine .mag-block--entries .entry:hover {
  color: var(--ink);
  background: var(--cream);
}

.magazine .mag-block--entries .entry:hover :is(.entry__q, .entry__go) {
  color: var(--ink);
}

.magazine :is(
  .mag-head__more,
  .hero__title a,
  .hero__place-link,
  .board__name a,
  .column__title a,
  .column__place
):hover {
  color: var(--coral);
}

.magazine .tag--accent,
.magazine .board__hot {
  color: var(--coral-strong);
  background: var(--coral-tint);
}

@media (max-width: 759px) {
  .magazine .mag-block--hero,
  .magazine .mag-block--ranking,
  .magazine .mag-block--micro,
  .magazine .mag-block--trio {
    padding-bottom: var(--space-8);
  }

  .magazine .mag-block--latest {
    padding-bottom: var(--space-9);
  }

  .magazine .mag-block--entries {
    padding-bottom: var(--space-9);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   매거진 2단 헤더 — 위는 유틸리티 바, 아래는 sticky 메인 바.
   스크롤하면 유틸리티 바가 접히고 메인 바만 남습니다.
   (헤더는 .magazine 바깥에 있어 .mag- 접두어로만 스코프합니다.)
   ═══════════════════════════════════════════════════════════════════ */

.mag-header {
  position: sticky;
  z-index: 1500;
  top: 0;
  background: var(--surface);
}

.mag-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── 유틸리티 바 ──────────────────────────────────────────── */

.mag-util {
  display: flex;
  overflow: hidden;
  max-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) max(var(--space-5), calc((100% - var(--container-wide)) / 2 + var(--space-5)));
  border-bottom: 1px solid var(--hairline-soft);
  background: var(--rose-50);
  transition: max-height 320ms var(--sheet-ease), padding 320ms var(--sheet-ease),
    opacity 240ms var(--ease-out);
}

/* 스크롤하면 조용히 접힙니다. */
.mag-header.is-scrolled .mag-util {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

.mag-util__links {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scrollbar-width: none;
}

.mag-util__links::-webkit-scrollbar {
  display: none;
}

.mag-util__links a {
  display: inline-flex;
  /* '소개', '사전' 같은 두 글자 링크라 폭도 함께 잡아야 24x24 를 넘깁니다. */
  min-width: 32px;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-base) var(--ease-out);
}

.mag-util__links a:hover {
  color: var(--ink);
}

.mag-util .mode-toggle {
  flex: 0 0 auto;
  box-shadow: none;
}

/* ── 메인 바 ─────────────────────────────────────────────── */

.mag-bar {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--space-3) max(var(--space-5), calc((100% - var(--container-wide)) / 2 + var(--space-5)));
  border-bottom: 1px solid var(--line);
}

.mag-bar__left {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.mag-bar__link {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  letter-spacing: 0.04em;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}

.mag-bar__link:hover,
.mag-menu-wrap:hover .mag-bar__link--menu {
  color: var(--rose-600);
  background: var(--rose-50);
}

.mag-bar__caret {
  font-size: var(--text-2xs);
  transition: transform var(--duration-base) var(--ease-out);
}

.mag-bar__link--menu[aria-expanded="true"] .mag-bar__caret {
  transform: rotate(180deg);
}

.mag-bar__logo {
  /* 터치 대상 24x24 확보 (WCAG 2.5.8) */
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  color: var(--ink);
  font-family: var(--font-logo);
  font-size: var(--text-2xl);
  font-style: italic;
  font-weight: var(--weight-strong);
  letter-spacing: -0.045em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.mag-bar__right {
  display: flex;
  justify-content: flex-end;
}

/* ── 드롭다운 ────────────────────────────────────────────── */

.mag-menu-wrap {
  position: relative;
}

.mag-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  width: 280px;
  padding: var(--space-2);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--panel-shadow);
}

.mag-menu[hidden] {
  display: none;
}

.mag-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mag-menu__list a {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out);
}

.mag-menu__list a:hover,
.mag-menu__list a:focus-visible {
  background: var(--rose-50);
}

.mag-menu__list strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
}

.mag-menu__list em {
  color: var(--muted);
  font-size: var(--text-2xs);
  font-style: normal;
}

/* ── 검색 ────────────────────────────────────────────────── */

.mag-search {
  position: relative;
  display: block;
  width: min(280px, 100%);
}

.mag-search__field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--warm-50);
  transition: border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
}

.mag-search__field:focus-within {
  border-color: var(--rose-500);
  background: var(--surface);
}

.mag-search__icon svg {
  display: block;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--muted);
  stroke-linecap: round;
  stroke-width: 1.5;
}

.mag-search input {
  width: 100%;
  height: 36px;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-size: var(--text-sm);
  background: transparent;
}

.mag-search input:focus {
  outline: none;
}

.mag-search input::placeholder {
  color: var(--muted);
}

.mag-results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  width: min(360px, 92vw);
  max-height: min(60vh, 460px);
  overflow-y: auto;
  padding: var(--space-2);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--panel-shadow);
}

.mag-results[hidden] {
  display: none;
}

.mag-results__group + .mag-results__group {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--hairline-soft);
}

.mag-results__label {
  margin: 0;
  padding: var(--space-2) var(--space-3) var(--space-1);
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-label);
  letter-spacing: 0.16em;
}

.mag-results ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mag-results a {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out);
}

.mag-results a:hover,
.mag-results a:focus-visible {
  background: var(--rose-50);
}

.mag-results strong {
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mag-results em {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mag-results__empty {
  margin: 0;
  padding: var(--space-5) var(--space-3);
  color: var(--muted);
  font-size: var(--text-sm);
  text-align: center;
}

/* 헤더가 생겼으니 페이지 상단 여백을 줄입니다. */
.magazine .mag-top {
  padding-top: var(--space-7);
}

/* ── 모바일 — 로고 + 검색 + 토글로 압축 ──────────────────── */

@media (max-width: 760px) {
  .mag-util {
    padding: var(--space-2) var(--space-4);
  }

  .mag-util__links {
    gap: var(--space-4);
  }

  .mag-bar {
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
  }

  /* 좁은 화면에서는 하단 탭바가 같은 길을 제공하므로 메뉴 줄을 접습니다. */
  .mag-bar__left {
    display: none;
  }

  .mag-bar__logo {
    font-size: var(--text-lg);
  }

  .mag-search {
    width: 100%;
  }

  .mag-results {
    width: min(360px, calc(100vw - 32px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .mag-util,
  .mag-bar__caret,
  .mag-menu__list a,
  .mag-results a {
    transition: none;
  }
}

/* ── 카테고리 태그 ────────────────────────────────────────── */

.magazine .tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-body);
  background: rgb(15 15 15 / 5%);
}

.magazine .tag--accent {
  color: var(--accent);
  background: var(--accent-tint);
}

/* ── 상단 ─────────────────────────────────────────────────── */

.magazine .mag-top__eyebrow {
  color: var(--accent);
  letter-spacing: 0.18em;
}

.magazine .mag-top__title {
  letter-spacing: -0.05em;
  line-height: 1.08;
}

.magazine .mag-top__lead {
  font-size: var(--text-base);
  letter-spacing: -0.024em;
  line-height: 1.72;
}

/* ── 섹션 머리 ────────────────────────────────────────────── */

.magazine .mag-head__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
}

.magazine .mag-head__more {
  color: var(--accent);
  letter-spacing: var(--tracking-body);
}

.magazine .mag-head__more:hover {
  color: var(--accent-strong);
}

/* ── 히어로 ───────────────────────────────────────────────── */

.magazine .hero__count {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.magazine .hero__flag {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-1);
  color: var(--gray-0);
  font-size: var(--text-2xs);
  font-weight: var(--weight-display);
  letter-spacing: 0.1em;
  background: var(--spark);
}

.magazine .hero__meta {
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-5);
  letter-spacing: var(--tracking-body);
}

.magazine .hero__channel,
.magazine .hero__likes {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 500;
}

.magazine .hero__likes {
  color: var(--spark-strong);
  font-weight: var(--weight-display);
}

.magazine .hero__title {
  margin-top: var(--space-4);
  font-family: var(--font-ui);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: var(--weight-display);
  letter-spacing: -0.032em;
  line-height: 1.32;
}

.magazine .hero__place {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  letter-spacing: -0.02em;
}

.magazine .hero__place-link {
  color: var(--ink);
  font-weight: var(--weight-label);
}

.magazine .hero__place-link:hover {
  color: var(--accent);
}

.magazine .hero__arrow:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.magazine .hero__media img {
  transition: transform var(--duration-slower) var(--sheet-ease);
}

.magazine .hero__slide:hover .hero__media img {
  transform: scale(1.02);
}

/* ── 랭킹 ─────────────────────────────────────────────────── */

.magazine .rank__index {
  color: var(--spark);
  font-size: var(--text-2xs);
  font-weight: var(--weight-display);
}

.magazine .rank__body strong {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-display);
  letter-spacing: -0.028em;
}

.magazine .rank__body em {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
}

.magazine .rank:hover .rank__body strong {
  color: var(--accent);
}

.magazine .rank__media img {
  transition: transform var(--duration-slower) var(--sheet-ease);
}

.magazine .rank:hover .rank__media img {
  transform: scale(1.05);
}

/* ── 전광판 ───────────────────────────────────────────────── */

.magazine .board__name {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: var(--weight-label);
  letter-spacing: -0.026em;
}

.magazine .board__name a:hover {
  color: var(--accent);
}

.magazine .board__hot {
  color: var(--spark-strong);
  background: var(--spark-tint);
}

.magazine .board__likes {
  color: var(--spark-strong);
  font-weight: var(--weight-label);
}

/* ── 칼럼 카드 ────────────────────────────────────────────── */

.magazine .column__media {
  position: relative;
}

.magazine .column__media img {
  transition: transform var(--duration-slower) var(--sheet-ease);
}

.magazine .column:hover .column__media img {
  transform: scale(1.04);
}

.magazine .column__title {
  margin-top: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-heading);
  line-height: 1.42;
}

.magazine .column:hover .column__title a {
  color: var(--accent);
}

.magazine .column__meta {
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-3);
}

.magazine .column__place {
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: var(--weight-label);
  letter-spacing: -0.02em;
}

.magazine .column__place:hover {
  color: var(--accent);
}

.magazine .column__foot {
  gap: var(--space-2);
  justify-content: flex-start;
  margin-top: var(--space-2);
  color: var(--muted-soft);
  font-size: var(--text-2xs);
}

.magazine .column__foot time {
  margin-left: auto;
}

/* ── 미니 섹션 ────────────────────────────────────────────── */

.magazine .mini__date {
  color: var(--accent);
  font-weight: var(--weight-label);
}

.magazine .mini__body strong,
.magazine .mini__term {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: var(--weight-label);
  letter-spacing: -0.026em;
}

.magazine .mini__desc,
.magazine .mini__body em {
  letter-spacing: -0.018em;
}

/* ── 진입 카드 ────────────────────────────────────────────── */

.magazine .entry__q {
  color: var(--muted);
  letter-spacing: -0.015em;
}

.magazine .entry__a {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-heading);
}

.magazine .entry__go {
  color: var(--accent);
  transition: transform var(--duration-slow) var(--ease-out);
}

.magazine .entry:hover .entry__go {
  transform: translateX(3px);
}

.magazine .entry:hover .entry__a {
  color: var(--accent);
}

/* ── 그리드 리듬 — 단조로움을 깨는 배치 ──────────────────── */

@media (min-width: 760px) {
  /* 랭킹 1위는 두 칸을 써서 무게를 줍니다. */
  .magazine .ranks > li:first-child {
    grid-column: span 2;
  }

  .magazine .ranks > li:first-child .rank {
    grid-template-columns: 34px 96px minmax(0, 1fr);
    padding: var(--space-4) var(--space-5);
  }

  .magazine .ranks > li:first-child .rank__body strong {
    font-size: var(--text-lg);
  }

  /* 최신 기록은 첫 두 장을 크게 — 잡지 1면 리듬. */
  .magazine .columns > li:nth-child(-n+2) {
    grid-column: span 2;
  }

  .magazine .columns > li:nth-child(-n+2) .column__media {
    aspect-ratio: 16 / 11;
  }

  .magazine .columns > li:nth-child(-n+2) .column__title {
    font-size: var(--text-lg);
  }
}

/* ── 검색·헤더 액센트 ─────────────────────────────────────── */

.mag-search__field:focus-within {
  border-color: var(--accent);
}

.mag-bar__link:hover,
.mag-menu-wrap:hover .mag-bar__link--menu {
  color: var(--accent);
  background: var(--accent-tint);
}

.mag-menu__list a:hover strong,
.mag-results a:hover strong {
  color: var(--accent);
}

.mag-menu__list a:hover,
.mag-menu__list a:focus-visible,
.mag-results a:hover,
.mag-results a:focus-visible {
  background: var(--accent-tint);
}

.mag-util__links a:hover {
  color: var(--accent);
}

.mag-bar__logo {
  font-weight: var(--weight-strong);
  letter-spacing: -0.045em;
}

.mag-header,
.mag-bar {
  background: var(--cream);
}

.mag-util {
  background: var(--cream-strong);
}

.mag-search__field {
  background: rgb(255 255 255 / 76%);
}

.magazine .hero__flag {
  color: var(--coral-ink);
}

.mag-bar__link:hover,
.mag-menu-wrap:hover .mag-bar__link--menu,
.mag-util__links a:hover,
.mag-menu__list a:hover strong,
.mag-results a:hover strong,
.magazine .hero__place-link:hover,
.magazine .board__name a:hover,
.magazine .column__place:hover,
.magazine .column:hover .column__title a,
.magazine .rank:hover .rank__body strong {
  color: var(--coral);
}

.mag-menu__list a:hover,
.mag-menu__list a:focus-visible,
.mag-results a:hover,
.mag-results a:focus-visible,
.mag-bar__link:hover,
.mag-menu-wrap:hover .mag-bar__link--menu {
  background: var(--coral-tint);
}

.magazine .mag-block--ranking .mag-head__label,
.magazine .mag-block--ranking .mag-head__more {
  color: var(--coral-ink);
}

.magazine .mag-block--entries .mag-head__label,
.magazine .mag-block--entries .mag-head__more,
.magazine .mag-block--entries .entry,
.magazine .mag-block--entries .entry__q,
.magazine .mag-block--entries .entry__go,
.magazine .mag-block--entries .entry__a {
  color: var(--gray-0);
}

.magazine .mag-block--entries .entry:hover,
.magazine .mag-block--entries .entry:hover :is(.entry__q, .entry__go, .entry__a) {
  color: var(--ink);
}

.mag-header--home {
  color: var(--ink);
  background: var(--cream);
}

.mag-header--home.is-scrolled .mag-util {
  max-height: 46px;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  opacity: 1;
}

.magazine .mag-block--hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0;
}

.magazine .mag-block--hero::before {
  display: none;
}

.magazine .hero {
  margin: 0;
}

.magazine .hero__track {
  gap: 0;
}

.magazine .hero__slide {
  position: relative;
  min-height: min(920px, calc(100svh - 94px));
  overflow: hidden;
  border-radius: 0;
  color: var(--gray-0);
  background: var(--ink);
  box-shadow: none;
  scroll-snap-align: start;
}

.magazine .hero__slide::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgb(8 10 14 / 28%) 0%, rgb(8 10 14 / 4%) 34%, rgb(8 10 14 / 76%) 100%);
  pointer-events: none;
}

.magazine .hero__media {
  position: absolute;
  inset: 0;
  margin: 0;
  aspect-ratio: auto;
  background: var(--ink);
}

.magazine .hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.magazine .hero__body {
  position: absolute;
  z-index: 2;
  right: max(var(--space-6), calc((100vw - var(--container-wide)) / 2 + var(--space-7)));
  bottom: clamp(112px, 15vh, 156px);
  left: max(var(--space-6), calc((100vw - var(--container-wide)) / 2 + var(--space-7)));
  max-width: 760px;
  padding: 0;
}

.magazine .hero__meta {
  margin: 0;
  color: var(--gray-0);
  font-size: var(--text-2xs);
  font-weight: var(--weight-display);
  letter-spacing: 0.18em;
}

.magazine .hero__title {
  max-width: 780px;
  margin: var(--space-4) 0 0;
  color: var(--gray-0);
  font-size: clamp(42px, 7vw, 82px);
  font-weight: var(--weight-display-strong);
  letter-spacing: -0.055em;
  line-height: 1.04;
  text-wrap: balance;
}

.magazine .hero__description {
  max-width: 58ch;
  margin: var(--space-5) 0 0;
  color: rgb(255 255 255 / 86%);
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: var(--leading-body);
  text-wrap: pretty;
  word-break: keep-all;
}

.magazine .hero__place-link {
  display: inline-block;
  margin-top: var(--space-6);
  color: var(--gray-0);
  font-size: var(--text-xs);
  font-weight: var(--weight-display);
  letter-spacing: 0.12em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.magazine .hero__place-link:hover {
  color: var(--cream-strong);
}

.magazine .hero__nav {
  display: flex;
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.magazine .hero__nav a {
  /* 히어로 페이지네이션. 32x12 라 손가락으로 누르기 어려웠습니다. */
  display: inline-flex;
  min-width: 32px;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  color: rgb(255 255 255 / 72%);
  font-size: var(--text-2xs);
  font-weight: var(--weight-display);
  letter-spacing: 0.16em;
  text-decoration: none;
}

.magazine .hero__nav a:hover {
  color: var(--gray-0);
}

.magazine .hero__folio {
  position: absolute;
  z-index: 2;
  right: max(var(--space-6), calc((100vw - var(--container-wide)) / 2 + var(--space-7)));
  bottom: var(--space-6);
  left: max(var(--space-6), calc((100vw - var(--container-wide)) / 2 + var(--space-7)));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  margin: 0;
  color: var(--gray-0);
  font-variant-numeric: tabular-nums;
}

.magazine .hero__folio strong {
  font-size: clamp(30px, 4.5vw, 52px);
  font-weight: var(--weight-display-strong);
  letter-spacing: -0.05em;
  line-height: 1;
}

.magazine .hero__folio strong:last-child {
  justify-self: end;
}

.magazine .hero__folio span {
  color: rgb(255 255 255 / 62%);
  font-size: var(--text-md);
}

.magazine .mag-block--ranking,
.magazine .mag-block--micro,
.magazine .mag-block--latest,
.magazine .mag-block--trio,
.magazine .mag-block--entries {
  padding-right: var(--space-6);
  padding-left: var(--space-6);
  border-top: 1px solid var(--editorial-frame);
  border-right: 1px solid var(--editorial-frame);
  border-left: 1px solid var(--editorial-frame);
}

.magazine .mag-block--entries {
  border-bottom: 1px solid var(--editorial-frame);
}

.magazine .mag-head {
  grid-template-columns: auto auto minmax(20px, 1fr) auto;
}

.magazine .mag-head__index {
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-display);
  letter-spacing: 0.1em;
}

.magazine .mag-block--ranking .mag-head__index {
  color: var(--coral-ink);
}

.magazine .mag-block--entries .mag-head__index {
  color: var(--gray-0);
}

.magazine .ranks,
.magazine .board,
.magazine .mini {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--editorial-frame-soft);
  border-radius: 0;
  box-shadow: none;
}

.magazine .ranks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.magazine .ranks > li {
  border-right: 1px solid var(--editorial-frame-soft);
  border-bottom: 1px solid var(--editorial-frame-soft);
}

.magazine .ranks > li:nth-child(2n),
.magazine .ranks > li:last-child {
  border-right: 0;
}

.magazine .rank {
  height: 100%;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.magazine .board {
  padding: 0 var(--space-5);
}

.magazine .column {
  position: relative;
}

.magazine .column__media {
  border-radius: var(--radius-1);
}

.magazine .column__index {
  display: block;
  margin-top: var(--space-3);
  color: var(--coral);
  font-size: var(--text-2xs);
  font-weight: var(--weight-display);
  letter-spacing: 0.12em;
}

.magazine .mag-trio {
  gap: 0;
}

.magazine .mag-trio > .mag-section {
  padding-right: var(--space-6);
  padding-left: var(--space-6);
}

.magazine .mag-trio > .mag-section + .mag-section {
  border-left: 1px solid var(--editorial-frame);
}

.magazine .mini {
  padding: var(--space-1) var(--space-4);
}

.magazine .mag-block--ranking::after,
.magazine .mag-block--micro::after,
.magazine .mag-block--entries::after {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  content: "";
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: soft-light;
  transform: translateX(-50%);
  pointer-events: none;
}

@media (min-width: 760px) {
  .magazine .hero__slide {
    display: block;
  }

  .magazine .hero__media {
    height: 100%;
    aspect-ratio: auto;
  }

  .magazine .hero__body {
    display: block;
  }

  .magazine .ranks > li:first-child {
    grid-column: span 2;
    border-right: 0;
  }
}

@media (max-width: 759px) {
  .magazine .hero__slide {
    min-height: calc(100svh - 96px);
  }

  .magazine .hero__body {
    right: var(--space-5);
    bottom: var(--space-12);
    left: var(--space-5);
  }

  .magazine .hero__title {
    font-size: clamp(38px, 12vw, 52px);
    line-height: 1.06;
  }

  .magazine .hero__description {
    display: -webkit-box;
    overflow: hidden;
    margin-top: var(--space-4);
    font-size: var(--text-md);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .magazine .hero__place-link {
    margin-top: var(--space-5);
  }

  .magazine .hero__nav {
    display: none;
  }

  .magazine .hero__folio {
    right: var(--space-5);
    bottom: var(--space-5);
    left: var(--space-5);
  }

  .magazine .mag-block--ranking,
  .magazine .mag-block--micro,
  .magazine .mag-block--latest,
  .magazine .mag-block--trio,
  .magazine .mag-block--entries {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }

  .magazine .mag-head {
    gap: var(--space-3);
    grid-template-columns: auto auto minmax(14px, 1fr) auto;
  }

  .magazine .ranks {
    grid-template-columns: 1fr;
  }

  .magazine .ranks > li,
  .magazine .ranks > li:nth-child(2n),
  .magazine .ranks > li:last-child {
    border-right: 0;
  }

  .magazine .mag-trio > .mag-section {
    padding-right: 0;
    padding-left: 0;
  }

  .magazine .mag-trio > .mag-section + .mag-section {
    border-top: 1px solid var(--editorial-frame);
    border-left: 0;
  }
}

.magazine .mag-head__label,
.magazine .mag-head__more {
  color: var(--pink-strong);
}

.magazine .mag-block--ranking .rank {
  color: var(--ink);
  background: var(--lime);
}

.magazine .mag-block--ranking .rank__index,
.magazine .mag-block--ranking .rank__body em {
  color: var(--ink);
}

.magazine .mag-block--entries .mag-head__index,
.magazine .mag-block--entries .mag-head__label,
.magazine .mag-block--entries .mag-head__more,
.magazine .mag-block--entries .entry,
.magazine .mag-block--entries .entry__q,
.magazine .mag-block--entries .entry__go,
.magazine .mag-block--entries .entry__a {
  color: var(--ink);
}

.magazine .mag-block--entries .mag-head__rule {
  background: rgb(0 0 0 / 32%);
}

.magazine .mag-block--entries .entry {
  position: relative;
  border-color: var(--line);
  border-radius: var(--radius-2);
  color: var(--ink);
  background: var(--gray-0);
}

.magazine .mag-block--entries .entry::after {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  color: var(--ink);
  font-size: var(--text-base);
  content: "↗";
}

.magazine .mag-block--entries .entry__go {
  display: none;
}

.magazine .mag-block--entries .entry:hover {
  color: var(--ink);
  background: var(--pink);
}

.magazine .column {
  height: 100%;
  padding: 0 var(--space-4) var(--space-4);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: var(--gray-0);
}

.magazine .column::after {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-3);
  color: var(--ink);
  font-size: var(--text-base);
  content: "↗";
}

.magazine .column__media {
  width: calc(100% + 28px);
  margin-left: -14px;
  border-radius: 0;
}

.magazine .column__index {
  color: var(--pink-strong);
}

.magazine .column__foot {
  padding-right: var(--space-7);
}

.magazine .mag-block--ranking::after,
.magazine .mag-block--micro::after,
.magazine .mag-block--entries::after {
  opacity: 0.32;
  background-image:
    radial-gradient(circle, rgb(17 17 17 / 22%) 0 1px, transparent 1.25px),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.48'/%3E%3C/svg%3E");
  background-size: 13px 13px, 160px 160px;
  mix-blend-mode: multiply;
}