/* MCNOW — Minecraft News & Culture
 *
 * MINECAP 의 style.css 를 쓰지 않는다. 같은 회사의 다른 브랜드로 보여야 해서다 —
 * 거의 검정인 차콜, 흰색, 작은 라임 포인트. 마크 픽셀 글꼴이나 잔디 블록 장식은 쓰지 않는다.
 * 본문은 읽는 곳이라 크게(17~18px) 잡는다.
 */

:root {
  --mn-ink: #111315;
  --mn-ink-2: #3a4046;
  --mn-ink-3: #7b828a;
  --mn-line: #e7e9ec;
  --mn-bg: #ffffff;
  --mn-soft: #f4f5f7;
  --mn-lime: #b6ff3b;
  --mn-lime-ink: #3d7800;
  --mn-dark-2: #1a1d20;
  --mn-radius: 14px;
  --mn-gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.mn {
  margin: 0;
  background: var(--mn-bg);
  color: var(--mn-ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
/* :where — 링크 기본값의 우선순위를 0 으로 둔다. 안 그러면 .mn-lead·.mn-btn 처럼 제 색을 가진 링크가 전부 덮인다. */
:where(.mn) a { color: inherit; text-decoration: none; }
.mn img { display: block; max-width: 100%; }
.mn button { font: inherit; }
.mn h1, .mn h2, .mn h3 { margin: 0; }

.mn-wrap {
  width: 100%;
  max-width: 1248px;
  margin: 0 auto;
  padding-left: max(var(--mn-gutter), env(safe-area-inset-left));
  padding-right: max(var(--mn-gutter), env(safe-area-inset-right));
}

.mn-skip { position: absolute; left: -9999px; }
.mn-skip:focus { left: 16px; top: 16px; z-index: 50; background: var(--mn-lime); color: var(--mn-ink); padding: 8px 14px; border-radius: 8px; }
.mn :focus-visible { outline: 3px solid var(--mn-lime); outline-offset: 2px; border-radius: 6px; }

/* ── 머리 ───────────────────────────────────────── */
.mn-top { background: var(--mn-ink); color: #fff; position: sticky; top: 0; z-index: 20; }
.mn-top__bar { display: flex; align-items: center; gap: 18px; height: 64px; }
.mn-logo { display: inline-flex; align-items: baseline; font-weight: 900; font-size: 27px; letter-spacing: -0.05em; line-height: 1; }
.mn-logo__mc { color: #fff; }
.mn-logo__now { color: var(--mn-lime); }
.mn-top__tag { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8f969d; padding-left: 18px; border-left: 1px solid #2c3135; }
.mn-top__right { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 14px; font-weight: 700; }
.mn-lang { display: inline-flex; border: 1px solid #343a3f; border-radius: 999px; padding: 2px; }
.mn-lang a { padding: 4px 10px; border-radius: 999px; color: #8f969d; font-size: 12px; letter-spacing: .06em; }
.mn-lang a.is-on { background: #2a2f33; color: #fff; }
.mn-top__minecap { display: inline-flex; align-items: center; gap: 3px; color: #d6dade; letter-spacing: .04em; }
.mn-top__minecap svg { width: 14px; height: 14px; }
.mn-top__minecap:hover { color: var(--mn-lime); }
.mn-top__join { background: var(--mn-lime); color: var(--mn-ink); padding: 8px 16px; border-radius: 999px; font-weight: 800; }
.mn-top__join:hover { filter: brightness(1.06); }
.mn-top__me { color: #fff; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mn-nav { border-top: 1px solid #23272b; }
.mn-nav__row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.mn-nav__row::-webkit-scrollbar { display: none; }
.mn-nav a {
  flex: none; padding: 13px 12px 12px; font-size: 14px; font-weight: 800; letter-spacing: .08em;
  color: #aab0b6; border-bottom: 3px solid transparent;
}
.mn-nav a:first-child { margin-left: -12px; }
.mn-nav a:hover { color: #fff; }
.mn-nav a.is-on { color: #fff; border-bottom-color: var(--mn-lime); }
.mn-nav__series { margin-left: auto; color: var(--mn-lime) !important; }

/* ── 공통 조각 ─────────────────────────────────────── */
.mn-kicker {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0;
  font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--mn-lime-ink);
}
.mn-kicker i { font-style: normal; margin: 0 6px; opacity: .55; }
.mn-kicker--lime { color: var(--mn-lime); }
.mn-meta { font-size: 13px; color: var(--mn-ink-3); }
.mn-meta i { font-style: normal; margin: 0 6px; }
.mn-pill {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  background: var(--mn-lime); color: var(--mn-ink); font-size: 12px; font-weight: 800; font-style: normal;
  letter-spacing: 0; white-space: nowrap; vertical-align: middle;
}
.mn-pill--dark { background: var(--mn-ink); color: #fff; }
.mn-code { font-weight: 900; letter-spacing: .02em; }
.mn-more { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: var(--mn-ink-2); }
.mn-more svg { width: 14px; height: 14px; }
.mn-more:hover { color: var(--mn-ink); }
.mn-empty { padding: 64px 0; text-align: center; color: var(--mn-ink-3); }
.mn-note { font-size: 14px; color: var(--mn-ink-3); background: var(--mn-soft); padding: 10px 14px; border-radius: 10px; }

.mn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 14px 24px; border-radius: 999px; font-size: 16px; font-weight: 800; line-height: 1.2;
  transition: transform .15s ease, filter .15s ease;
}
.mn-btn:hover { transform: translateY(-1px); }
.mn-btn--lime { background: var(--mn-lime); color: var(--mn-ink); }
.mn-btn--ghost { border: 1.5px solid rgba(255,255,255,.32); color: #fff; }
.mn-btn--ghost:hover { border-color: #fff; }
.mn-btn--ink { background: var(--mn-ink); color: #fff; }

.mn-live { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--mn-lime); box-shadow: 0 0 0 0 rgba(182,255,59,.7); animation: mn-pulse 1.8s infinite; margin-right: 8px; vertical-align: middle; position: relative; top: -2px; }
@keyframes mn-pulse { 70% { box-shadow: 0 0 0 9px rgba(182,255,59,0); } 100% { box-shadow: 0 0 0 0 rgba(182,255,59,0); } }
@media (prefers-reduced-motion: reduce) { .mn-live { animation: none; } .mn * { transition: none !important; } }

/* 그림 없는 기사 자리 */
.is-empty { background: linear-gradient(135deg, #1b1f22, #2b3137); display: grid; place-items: center; }
.mn-card__ph { color: #fff; font-weight: 900; font-size: 22px; letter-spacing: -.04em; opacity: .9; }
.mn-card__ph b { color: var(--mn-lime); }

/* ── 섹션 머리 ─────────────────────────────────────── */
.mn-sec { margin-top: 72px; }
.mn-sec--flush { margin-top: 32px; }
.mn-sec__h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border-top: 2px solid var(--mn-ink); padding-top: 14px; margin-bottom: 22px; }
.mn-sec__h h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.mn-sec__h small { font-size: 15px; font-weight: 500; color: var(--mn-ink-3); letter-spacing: 0; }

/* ── 오늘 ──────────────────────────────────────────── */
.mn-day { padding-top: 32px; }
.mn-day__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.mn-day__date { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.mn-day__label { font-size: 15px; font-weight: 600; color: var(--mn-ink-3); }

.mn-lead-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.mn-lead { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: var(--mn-ink); color: #fff; isolation: isolate; }
.mn-lead__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; z-index: -2; }
.mn-lead::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,12,14,0) 30%, rgba(10,12,14,.55) 58%, rgba(10,12,14,.92) 100%); }
.mn-lead:hover .mn-lead__img { transform: scale(1.03); }
.mn-lead__txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 36px; display: flex; flex-direction: column; gap: 10px; }
.mn-lead__title { font-size: 34px; line-height: 1.28; font-weight: 800; letter-spacing: -.025em; text-wrap: balance; }
.mn-lead__deck { font-size: 16px; color: #d5d9dd; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 680px; }

.mn-now { border-top: 3px solid var(--mn-ink); padding-top: 14px; display: flex; flex-direction: column; }
.mn-now__h { font-size: 22px; font-weight: 900; letter-spacing: .02em; display: flex; align-items: center; }
.mn-now__h small { font-size: 14px; font-weight: 600; color: var(--mn-ink-3); letter-spacing: 0; margin-left: 10px; }
.mn-now__list { list-style: none; margin: 8px 0 0; padding: 0; }
.mn-now__list li { border-bottom: 1px solid var(--mn-line); }
.mn-now__list li:last-child { border-bottom: 0; }
/* PC 에서는 머리기사 높이에 맞춰 네 개까지만 — 다섯째부터는 머리기사 아래로 삐져나온다. */
@media (min-width: 1101px) {
  .mn-now__list li:nth-child(n+5) { display: none; }
  .mn-now__list li:nth-child(4) { border-bottom: 0; }
}
.mn-now__list a { display: grid; gap: 4px; padding: 13px 0; }
.mn-now__t { font-size: 16px; font-weight: 700; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mn-now__list a:hover .mn-now__t { text-decoration: underline; text-underline-offset: 3px; }

/* ── 카드 격자 ─────────────────────────────────────── */
.mn-grid { display: grid; gap: 32px 24px; }
.mn-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; }
.mn-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mn-grid--page { margin-top: 40px; }
.mn-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mn-card__img { display: block; aspect-ratio: 16 / 10; border-radius: var(--mn-radius); overflow: hidden; background: var(--mn-soft); margin-bottom: 6px; }
.mn-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.mn-card:hover .mn-card__img img { transform: scale(1.04); }
.mn-card__title { font-size: 19px; line-height: 1.42; font-weight: 800; letter-spacing: -.015em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mn-card:hover .mn-card__title { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.mn-card__deck { font-size: 15px; color: var(--mn-ink-2); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mn-grid--4 .mn-card__title { font-size: 17px; }

/* ── Coming Soon ──────────────────────────────────── */
.mn-soon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.mn-soon__card { position: relative; display: flex; align-items: center; gap: 20px; min-height: 200px; padding: 28px 30px; border-radius: 18px; background: var(--accent, #eef3e6); overflow: hidden; }
/* 예고 카드가 홀수면 마지막 한 장이 한 줄을 다 쓴다 — 오른쪽 칸이 비어 보이지 않게. */
.mn-soon__card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.mn-soon__txt { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; z-index: 1; }
.mn-soon__title { font-size: 24px; font-weight: 800; line-height: 1.35; letter-spacing: -.02em; }
.mn-soon__title .mn-pill { margin-left: 8px; position: relative; top: -2px; }
.mn-soon__desc { font-size: 16px; color: var(--mn-ink-2); }
.mn-soon__art { width: 170px; height: 170px; object-fit: contain; flex: none; transition: transform .3s ease; }
.mn-soon__card:hover .mn-soon__art { transform: rotate(-4deg) scale(1.05); }
.mn-soon .mn-kicker { color: var(--mn-ink); opacity: .7; }

/* ── TOP 10 가로 띠 ───────────────────────────────── */
.mn-rail-nav { display: inline-flex; gap: 8px; }
.mn-rail-nav button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--mn-line); background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--mn-ink); }
.mn-rail-nav button:hover { border-color: var(--mn-ink); }
.mn-rail-nav svg { width: 18px; height: 18px; }
.mn-rail { list-style: none; margin: 0; padding: 0 0 6px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 72px) / 4); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mn-rail::-webkit-scrollbar { display: none; }
.mn-rail > li { scroll-snap-align: start; min-width: 0; }
.mn-rank { display: flex; flex-direction: column; gap: 8px; }
.mn-rank__img { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--mn-radius); overflow: hidden; background: var(--mn-soft); }
.mn-rank__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.mn-rank__img::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55)); }
.mn-rank:hover .mn-rank__img img { transform: scale(1.04); }
.mn-rank__no { position: absolute; left: 14px; bottom: 2px; z-index: 1; color: #fff; font-size: 64px; font-weight: 900; line-height: 1; letter-spacing: -.05em; }
.mn-rank > li:first-child .mn-rank__no, .mn-rail > li:first-child .mn-rank__no { color: var(--mn-lime); }
.mn-rank__title { font-size: 17px; line-height: 1.42; font-weight: 800; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mn-rank:hover .mn-rank__title { text-decoration: underline; text-underline-offset: 3px; }

/* ── 연재 시리즈 선반 ─────────────────────────────── */
.mn-shelf { background: var(--mn-soft); margin-top: 80px; padding: 60px 0; }
.mn-shelf__grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
.mn-shelf__h h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.mn-shelf__h p { margin: 8px 0 18px; color: var(--mn-ink-3); font-size: 15px; }
.mn-shelf__rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 20px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 8px; }

.mn-posters { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 32px 20px; }
.mn-poster { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mn-poster__art { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 18px; background: var(--accent, #eef3e6); overflow: hidden; margin-bottom: 8px; }
.mn-poster__art img { width: 72%; height: 72%; object-fit: contain; transition: transform .35s ease; }
.mn-poster:hover .mn-poster__art img { transform: translateY(-6px) scale(1.04); }
.mn-poster__badge { position: absolute; left: 14px; top: 14px; background: var(--mn-ink); color: #fff; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.mn-poster.is-soon .mn-poster__badge { background: var(--mn-lime); color: var(--mn-ink); }
.mn-poster__kind { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--mn-ink-3); }
.mn-poster__title { font-size: 19px; font-weight: 800; line-height: 1.35; letter-spacing: -.02em; }
.mn-poster__tag { font-size: 15px; color: var(--mn-ink-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mn-poster__eps { font-size: 13px; font-weight: 700; color: var(--mn-lime-ink); }

/* ── MINECAP 으로 건너가는 띠 ─────────────────────── */
.mn-band { background: var(--mn-ink); color: #fff; margin-top: 88px; padding: 72px 0; }
.mn-band__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.mn-band__eyebrow { color: var(--mn-lime); font-size: 15px; font-weight: 800; }
.mn-band__title { font-size: 38px; line-height: 1.3; font-weight: 800; letter-spacing: -.03em; margin: 12px 0 16px; white-space: pre-line; }
.mn-band__body { color: #c3c8cd; font-size: 17px; max-width: 520px; margin: 0 0 28px; }
.mn-band__btns { display: flex; gap: 12px; flex-wrap: wrap; }
.mn-band__picks { background: var(--mn-dark-2); border-radius: 18px; padding: 24px 26px; }
.mn-band__ph { font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.mn-band__picks ol { list-style: none; margin: 0; padding: 0; counter-reset: pick; }
.mn-band__picks li { border-bottom: 1px solid #2a2f33; counter-increment: pick; }
.mn-band__picks li:last-child { border-bottom: 0; }
.mn-band__picks a { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "n b c" "n t c"; column-gap: 8px; padding: 12px 0; }
.mn-band__picks a::before { content: counter(pick); grid-area: n; color: var(--mn-lime); font-weight: 900; font-size: 18px; line-height: 1.3; }
.mn-band__pb { grid-area: b; font-size: 12px; color: #8f969d; font-weight: 700; }
.mn-band__pt { grid-area: t; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-band__pc { grid-area: c; align-self: center; font-size: 13px; color: #8f969d; }
.mn-band__picks a:hover .mn-band__pt { text-decoration: underline; text-underline-offset: 3px; }

/* ── 섹션·목록 화면 ─────────────────────────────── */
.mn-page-h { padding: 44px 0 28px; border-bottom: 1px solid var(--mn-line); }
.mn-page-h__code { font-size: 60px; line-height: 1; font-weight: 900; letter-spacing: -.045em; }
.mn-page-h__sub { margin: 14px 0 6px; font-size: 18px; color: var(--mn-ink-2); }
.mn-page-h__sub b { color: var(--mn-ink); }

.mn-feature { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 36px; align-items: center; margin-top: 36px; }
.mn-feature__img { display: block; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: var(--mn-soft); }
.mn-feature__img img { width: 100%; height: 100%; object-fit: cover; }
.mn-feature__txt { display: flex; flex-direction: column; gap: 12px; }
.mn-feature__title { font-size: 31px; line-height: 1.3; font-weight: 800; letter-spacing: -.025em; }
.mn-feature__deck { font-size: 17px; color: var(--mn-ink-2); }
.mn-feature:hover .mn-feature__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }

.mn-list { list-style: none; margin: 0; padding: 0; }
.mn-list li { border-bottom: 1px solid var(--mn-line); }
.mn-list a { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.mn-list__t { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mn-pager { display: flex; justify-content: center; align-items: center; gap: 24px; margin: 56px 0 0; font-weight: 700; }
.mn-pager span { color: var(--mn-ink-3); }
.mn-pager a { padding: 10px 18px; border: 1px solid var(--mn-line); border-radius: 999px; }
.mn-pager a:hover { border-color: var(--mn-ink); }

/* ── 시리즈 화면 ─────────────────────────────────── */
.mn-shero { background: var(--accent, #eef3e6); }
.mn-shero__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-top: 56px; padding-bottom: 56px; }
.mn-shero__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.mn-shero .mn-kicker { color: var(--mn-ink); opacity: .7; }
.mn-shero__title { font-size: 46px; line-height: 1.2; font-weight: 900; letter-spacing: -.035em; }
.mn-shero__tag { margin: 0; font-size: 20px; font-weight: 700; color: var(--mn-ink-2); }
.mn-shero__desc { margin: 0; font-size: 17px; color: var(--mn-ink-2); max-width: 560px; }
.mn-shero__meta { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; color: var(--mn-ink-2); }
.mn-shero__art { width: 100%; max-width: 380px; justify-self: center; filter: drop-shadow(0 24px 40px rgba(0,0,0,.12)); }

.mn-eps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mn-ep { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--mn-line); }
.mn-ep__img { display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; }
.mn-ep__img img { width: 100%; height: 100%; object-fit: cover; }
.mn-ep__txt { display: flex; flex-direction: column; gap: 6px; }
.mn-ep__title { font-size: 21px; font-weight: 800; line-height: 1.4; letter-spacing: -.02em; }
.mn-ep__deck { color: var(--mn-ink-2); font-size: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mn-ep:hover .mn-ep__title { text-decoration: underline; text-underline-offset: 3px; }

/* ── 기사 ─────────────────────────────────────────── */
.mn-art__h { max-width: 1248px; padding-top: 48px; }
.mn-art__h > * { max-width: 860px; }
.mn-art__kick { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.mn-art__title { font-size: 42px; line-height: 1.28; font-weight: 800; letter-spacing: -.03em; text-wrap: balance; }
.mn-art__deck { margin: 18px 0 0; font-size: 20px; line-height: 1.6; color: var(--mn-ink-2); font-weight: 500; }
.mn-art__by { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin-top: 26px; padding: 14px 0; border-top: 1px solid var(--mn-line); border-bottom: 1px solid var(--mn-line); font-size: 14px; color: var(--mn-ink-3); }
.mn-art__by i { font-style: normal; margin: 0 8px; }
.mn-art__src { color: var(--mn-ink); font-weight: 800; letter-spacing: .02em; }
.mn-art__talk { margin-left: auto; font-weight: 700; color: var(--mn-ink-2); }
.mn-art__talk:hover { color: var(--mn-ink); }

.mn-art__cols { display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 300px); justify-content: space-between; gap: 56px; margin-top: 36px; }
.mn-art__main { min-width: 0; }

.mn-prose { font-size: 18px; line-height: 1.85; color: #1d2125; }
.mn-prose > :first-child { margin-top: 0; }
.mn-prose p { margin: 0 0 1.15em; }
.mn-prose h2 { font-size: 27px; line-height: 1.4; font-weight: 800; letter-spacing: -.02em; margin: 2.1em 0 .75em; }
.mn-prose h3 { font-size: 21px; line-height: 1.45; font-weight: 800; margin: 1.8em 0 .6em; }
.mn-prose strong { font-weight: 800; color: var(--mn-ink); }
.mn-prose a { color: var(--mn-lime-ink); text-decoration: underline; text-underline-offset: 3px; }
.mn-prose figure { margin: 32px 0; }
.mn-prose figure img { width: 100%; height: auto; border-radius: 14px; }
.mn-prose figcaption { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--mn-ink-3); text-align: center; }
.mn-prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 14px; }
.mn-prose blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--mn-lime); font-size: 19px; font-weight: 600; color: var(--mn-ink); }
.mn-prose ul, .mn-prose ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.mn-prose li { margin: .35em 0; }
.mn-prose hr { border: 0; border-top: 1px solid var(--mn-line); margin: 40px 0 24px; }
.mn-prose table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; line-height: 1.6; }
.mn-prose th, .mn-prose td { border-bottom: 1px solid var(--mn-line); padding: 10px 12px; text-align: left; vertical-align: top; }
.mn-prose th { background: var(--mn-soft); font-weight: 800; white-space: nowrap; }
.mn-prose code { background: var(--mn-soft); padding: 2px 6px; border-radius: 6px; font-size: .9em; }
.mn-prose .mn-box { background: var(--mn-soft); border-radius: 14px; padding: 20px 24px; margin: 28px 0; }
.mn-prose .mn-box > :last-child { margin-bottom: 0; }

.mn-epnav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 48px 0 0; }
.mn-epnav a { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 1px solid var(--mn-line); border-radius: 14px; }
.mn-epnav a:hover { border-color: var(--mn-ink); }
.mn-epnav small { font-size: 13px; font-weight: 700; color: var(--mn-ink-3); }
.mn-epnav b { font-size: 16px; line-height: 1.45; }
.mn-epnav__prev { grid-column: 1; }
.mn-epnav__next { grid-column: 2; text-align: right; }
/* 회차가 없는 칸 — 시리즈로 돌아가는 카드. 회차 카드와 구분되게 바탕을 깐다. */
.mn-epnav--series { background: var(--mn-soft); border-color: transparent; }
.mn-epnav--series span { font-size: 13px; font-weight: 700; color: var(--mn-lime-ink); margin-top: 2px; }

.mn-talk { margin-top: 48px; border: 2px solid var(--mn-ink); border-radius: 20px; padding: 28px 30px; }
.mn-talk__title { font-size: 23px; font-weight: 800; letter-spacing: -.02em; }
.mn-talk__body { margin: 6px 0 0; color: var(--mn-ink-2); }
.mn-talk__voices { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.mn-talk__voices li { background: var(--mn-soft); border-radius: 4px 16px 16px 16px; padding: 12px 16px; display: grid; gap: 2px; font-size: 15px; }
.mn-talk__voices b { font-size: 13px; color: var(--mn-ink-3); }
.mn-talk__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 22px; }

.mn-toc { position: sticky; top: 132px; align-self: start; }
.mn-toc__series { display: grid; grid-template-columns: 72px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; background: var(--accent, #eef3e6); border-radius: 16px; padding: 14px 16px; }
.mn-toc__series img { grid-row: 1 / 3; width: 72px; height: 72px; object-fit: contain; }
.mn-toc__series .mn-kicker { color: var(--mn-ink); opacity: .65; font-size: 10px; }
.mn-toc__series strong { font-size: 17px; line-height: 1.35; font-weight: 800; }
.mn-toc__h { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mn-ink-3); margin: 22px 0 6px; }
.mn-toc ol { list-style: none; margin: 0; padding: 0; }
.mn-toc li a { display: grid; grid-template-columns: 26px 1fr; gap: 6px; padding: 9px 0; font-size: 15px; line-height: 1.45; color: var(--mn-ink-2); border-bottom: 1px solid var(--mn-line); }
.mn-toc li a span { font-weight: 800; color: var(--mn-ink-3); }
.mn-toc li a:hover { color: var(--mn-ink); }
.mn-toc li.is-on a { color: var(--mn-ink); font-weight: 800; }
.mn-toc li.is-on a span { color: var(--mn-lime-ink); }

/* ── 꼬리 ─────────────────────────────────────────── */
.mn-foot { background: #0b0c0d; color: #9aa1a8; padding: 56px 0 40px; font-size: 14px; }
.mn-band + .mn-foot { border-top: 1px solid #1f2326; }
.mn-foot__top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 40px; align-items: start; }
.mn-logo--foot { font-size: 30px; }
.mn-foot__motto { color: #fff; font-weight: 700; font-size: 16px; margin: 12px 0 6px; }
.mn-foot__about { margin: 0; max-width: 380px; line-height: 1.6; }
.mn-foot__links { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 32px; font-weight: 800; letter-spacing: .08em; font-size: 13px; color: #d0d4d8; }
.mn-foot__links a:hover { color: var(--mn-lime); }
.mn-foot__family { display: flex; flex-direction: column; gap: 6px; border: 1px solid #2a2f33; border-radius: 14px; padding: 16px 20px; }
.mn-foot__family:hover { border-color: var(--mn-lime); }
.mn-foot__family-k { font-size: 12px; letter-spacing: .06em; }
.mn-foot__family-v { display: inline-flex; align-items: center; gap: 4px; color: #fff; font-weight: 900; font-size: 18px; letter-spacing: .02em; }
.mn-foot__family-v svg { width: 16px; height: 16px; }
.mn-foot__bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid #1f2326; font-size: 12px; line-height: 1.7; }
.mn-foot__bottom p { margin: 0 0 4px; }
.mn-foot__bottom a:hover { color: #fff; }

/* ── 좁은 화면 ─────────────────────────────────────── */
@media (max-width: 1100px) {
  .mn-lead-grid { grid-template-columns: minmax(0, 1fr); }
  .mn-lead { aspect-ratio: 16 / 10; }
  .mn-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mn-rail { grid-auto-columns: calc((100% - 24px) / 2.3); }
  .mn-art__cols { grid-template-columns: minmax(0, 1fr); }
  .mn-toc { position: static; order: -1; display: none; }
  .mn-shelf__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .mn-band__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .mn-foot__top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

@media (max-width: 720px) {
  :root { --mn-gutter: 16px; }
  body.mn { font-size: 16px; }
  .mn-top__bar { height: 56px; gap: 12px; }
  .mn-logo { font-size: 23px; }
  .mn-top__tag, .mn-top__minecap { display: none; }
  .mn-top__right { gap: 10px; }
  .mn-top__join { padding: 7px 13px; font-size: 13px; }
  .mn-nav a { padding: 11px 10px 10px; font-size: 13px; }
  .mn-nav a:first-child { margin-left: -10px; }

  .mn-day { padding-top: 22px; }
  .mn-day__date { font-size: 24px; }
  .mn-lead { aspect-ratio: auto; min-height: 380px; margin: 0 calc(var(--mn-gutter) * -1); border-radius: 0; }
  .mn-lead__txt { padding: 22px 20px; }
  .mn-lead__title { font-size: 24px; }
  .mn-lead__deck { font-size: 15px; }
  .mn-grid--3 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .mn-grid--4 { gap: 24px 14px; }
  .mn-grid--4 .mn-card__title { font-size: 16px; }
  .mn-grid--4 .mn-card__deck { display: none; }
  .mn-card__title { font-size: 18px; }

  .mn-sec { margin-top: 52px; }
  .mn-sec__h h2 { font-size: 21px; }
  .mn-sec__h small { font-size: 14px; }
  .mn-soon { grid-template-columns: minmax(0, 1fr); }
  .mn-soon__card { padding: 22px; min-height: 0; }
  .mn-soon__title { font-size: 20px; }
  .mn-soon__art { width: 110px; height: 110px; }
  .mn-rail { grid-auto-columns: 72%; gap: 14px; }
  .mn-rank__no { font-size: 52px; }

  .mn-shelf { padding: 44px 0; margin-top: 56px; }
  .mn-shelf__rail { grid-auto-columns: 62%; gap: 14px; }
  .mn-posters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .mn-poster__title { font-size: 16px; }
  .mn-poster__tag { font-size: 14px; }

  .mn-band { padding: 52px 0; margin-top: 64px; }
  .mn-band__title { font-size: 28px; }
  .mn-band__body { font-size: 16px; }
  .mn-band__btns .mn-btn { flex: 1 1 100%; }

  .mn-page-h { padding: 30px 0 20px; }
  .mn-page-h__code { font-size: 42px; }
  .mn-page-h__sub { font-size: 16px; }
  .mn-feature { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .mn-feature__title { font-size: 23px; }

  .mn-shero__grid { grid-template-columns: minmax(0, 1fr); padding-top: 32px; padding-bottom: 36px; gap: 8px; }
  .mn-shero__art { max-width: 200px; order: -1; }
  .mn-shero__title { font-size: 32px; }
  .mn-shero__tag { font-size: 17px; }
  .mn-ep { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; }
  .mn-ep__title { font-size: 16px; }
  .mn-ep__deck { display: none; }

  .mn-art__h { padding-top: 28px; }
  .mn-art__title { font-size: 28px; }
  .mn-art__deck { font-size: 17px; }
  .mn-art__talk { margin-left: 0; width: 100%; margin-top: 4px; }
  .mn-prose { font-size: 17px; line-height: 1.8; }
  .mn-prose h2 { font-size: 22px; }
  .mn-prose h3 { font-size: 19px; }
  .mn-prose figure { margin: 24px calc(var(--mn-gutter) * -1); }
  .mn-prose figure img { border-radius: 0; }
  .mn-prose figcaption { padding: 0 var(--mn-gutter); }
  .mn-prose table { display: block; overflow-x: auto; }
  .mn-epnav { grid-template-columns: minmax(0, 1fr); }
  .mn-epnav__prev, .mn-epnav__next { grid-column: auto; }
  .mn-talk { padding: 22px 20px; }
  .mn-talk__foot .mn-btn { flex: 1 1 100%; }

  .mn-foot__links { grid-template-columns: repeat(3, max-content); gap: 10px 22px; }
}