/*
 * MANHAW 공개 화면 스타일 (메인·전체 작품·작품 상세·검색·투고·약관·404)
 * 순서: 변수 → 리셋 → 레이아웃 → 컴포넌트 → 섹션 → 반응형(1279 / 1023 / 767 / 479)
 * 토큰은 tokens.css 만 쓴다(색 직접 값 없음). 파랑(--primary 계열·--brand-*)은 계획서 Q9 허용 목록에만:
 *   버튼·링크·현재 메뉴·포커스·UP/신작/주목 배지·최신 회차·투고 번호 원·체크 아이콘·검색 결과 수·장식 모티프.
 * 전환 속성은 transform·opacity·color·background-color 만. transition: all 없음.
 */

/* ------------------------------------------------------------------ 폰트 */
@font-face {
  font-family: 'Pretendard Variable';
  font-style: normal;
  font-weight: 45 920;
  font-display: swap;
  src: url('../fonts/PretendardVariable.subset.woff2') format('woff2-variations'), url('../fonts/PretendardVariable.subset.woff2') format('woff2');
}

/* 폰트 로딩 전 임시 글꼴: 시스템 한글 글꼴을 Pretendard 폭에 맞춰(size-adjust) 글꼴이 바뀔 때 줄바꿈·높이가 흔들리지 않게 한다. 해당 글꼴이 없으면 건너뛴다. */
@font-face {
  font-family: 'Pretendard Fallback';
  font-style: normal;
  font-weight: 45 599;
  src: local('Malgun Gothic'), local('MalgunGothic'), local('Apple SD Gothic Neo'), local('AppleSDGothicNeo-Regular'), local('Noto Sans CJK KR'), local('NotoSansCJKkr-Regular'), local('Noto Sans KR');
  size-adjust: 87%;
}
@font-face {
  font-family: 'Pretendard Fallback';
  font-style: normal;
  font-weight: 600 920;
  src: local('Malgun Gothic Bold'), local('MalgunGothic-Bold'), local('Apple SD Gothic Neo Bold'), local('AppleSDGothicNeo-Bold'), local('Noto Sans CJK KR Bold'), local('NotoSansCJKkr-Bold'), local('Noto Sans KR Bold');
  size-adjust: 87%;
}

/* ------------------------------------------------------------------ 1. 변수(이 파일 전용 치수) */
:root {
  --main-w: 880px;     /* ≥1280 본문 폭 (레일 160 + 24 + 880 + 24 + 160 = 1248) */
  --header-sticky: 0px;
}
@media (min-width: 1440px) {
  :root { --main-w: 960px; } /* 레일 200 + 24 + 960 + 24 + 200 = 1408 */
}

/* ------------------------------------------------------------------ 2. 리셋·기본 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--space-4)); }
body {
  margin: 0;
  min-width: 320px;
  background: var(--surface-0);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, picture, video { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--primary-tint); color: var(--ink); }
.mh-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mh-skip { position: absolute; left: var(--space-2); top: -80px; z-index: 100; padding: var(--space-3) var(--space-4); border-radius: var(--r-md); background: var(--ink); color: var(--surface-0); font-weight: 600; }
.mh-skip:focus { top: var(--space-2); }
.mh-icon { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mh-num, .mh-card__meta, .mh-toolbar__count strong, .mh-eps__count, .mh-ep__no, .mh-ep__date, .mh-ep__views, .mh-ep__sub, .mh-work__stats, .mh-pager__btn, .mh-pagehead__count, .mh-field__count { font-variant-numeric: tabular-nums; }
main:focus { outline: none; }

/* 이미지 불러오기: 자리(--surface-1)를 먼저 잡고 로드되면 opacity 0→1 */
html.js .mh-img { opacity: 0; transition: opacity var(--dur-2) ease; }
html.js .mh-img.is-loaded { opacity: 1; }
.mh-img.is-error { display: none; }

/* ------------------------------------------------------------------ 3. 레이아웃 */
.mh-shell { width: min(100% - 2 * var(--gutter), var(--content-max)); margin-inline: auto; }
.mh-main { min-width: 0; padding-block: var(--space-5) var(--section-gap); }
.mh-rail { display: none; }

@media (min-width: 1280px) {
  .mh-shell { display: grid; grid-template-columns: var(--rail-w) var(--main-w) var(--rail-w); column-gap: var(--space-5); justify-content: center; width: auto; }
  .mh-rail { display: block; min-width: 0; padding-top: var(--space-5); }
  .mh-mbanner { display: none; }
}

/* 헤더 */
.mh-header { position: sticky; top: 0; z-index: 40; background: var(--surface-0); border-bottom: 1px solid var(--line); }
.mh-header__inner { position: relative; display: flex; align-items: center; gap: var(--space-5); height: var(--header-h); width: min(100% - 2 * var(--gutter), var(--content-max)); margin-inline: auto; }
.mh-logo { display: flex; align-items: center; flex: none; height: var(--hit); border-radius: var(--r-sm); }
.mh-logo img { width: 169px; height: 24px; }
.mh-nav { align-self: stretch; }
.mh-nav__list { display: flex; height: 100%; }
.mh-nav__link { position: relative; display: flex; align-items: center; height: 100%; padding: 0 var(--space-4); font-size: var(--fs-body); font-weight: 600; color: var(--ink-2); transition: color var(--dur-2) ease; }
.mh-nav__link:hover { color: var(--ink); }
.mh-nav__link[aria-current='page'] { color: var(--ink); }
.mh-nav__link[aria-current='page']::after { content: ''; position: absolute; left: var(--space-4); right: var(--space-4); bottom: -1px; height: 2px; background: var(--primary); }

/* 검색창: 보이는 높이 40, 누르는 영역 44 */
.mh-search { position: relative; display: flex; align-items: center; flex: 0 1 360px; margin-left: auto; }
.mh-search__box { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; height: var(--hit); cursor: text; }
.mh-search__box::before { content: ''; position: absolute; inset: 2px 0; border-radius: var(--r-pill); background: var(--surface-1); transition: background-color var(--dur-2) ease; }
.mh-search__box:focus-within::before { background: var(--surface-0); box-shadow: inset 0 0 0 2px var(--primary); }
.mh-search__input { position: relative; z-index: 1; width: 100%; height: var(--hit); padding: 0 var(--space-7) 0 var(--space-4); border: 0; background: transparent; font-size: var(--fs-body-s); font-weight: 500; color: var(--ink); outline: none; appearance: none; -webkit-appearance: none; }
.mh-search__input::placeholder { color: var(--ink-3); opacity: 1; }
.mh-search__input::-webkit-search-cancel-button { display: none; }
.mh-search__submit { position: absolute; z-index: 2; right: 0; top: 0; display: grid; place-items: center; width: var(--hit); height: var(--hit); border-radius: var(--r-pill); color: var(--ink-2); transition: color var(--dur-2) ease; }
.mh-search__submit:hover { color: var(--ink); }
.mh-search__cancel, .mh-header__search { display: none; }

/* 모바일 상단 탭 */
.mh-tabs { display: none; }

/* 푸터 */
.mh-footer { background: var(--surface-1); padding: var(--space-7) 0; }
.mh-footer__inner { width: min(100% - 2 * var(--gutter), var(--content-max)); margin-inline: auto; }
.mh-footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-5); }
.mh-footer__logo { display: inline-flex; align-items: center; min-height: var(--hit); }
.mh-footer__logo img { width: 101px; height: 14px; }
.mh-footer__nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.mh-footer__nav a { display: inline-flex; align-items: center; min-height: var(--hit); font-size: var(--fs-body-s); font-weight: 500; color: var(--ink-2); transition: color var(--dur-2) ease; }
.mh-footer__nav a strong { font-weight: 700; color: var(--ink); }
.mh-footer__nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.mh-footer__biz { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin-top: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: var(--fs-body-s); line-height: var(--lh-body-s); color: var(--ink-2); }
.mh-footer__biz-item { display: inline-flex; gap: var(--space-2); min-width: 0; }
.mh-footer__biz dt { color: var(--ink-3); font-weight: 600; white-space: nowrap; }
.mh-footer__biz dd { min-width: 0; overflow-wrap: anywhere; }
.mh-footer__biz a { text-decoration: underline; text-underline-offset: 2px; }
.mh-footer__note, .mh-footer__copy { margin-top: var(--space-3); font-size: var(--fs-caption); line-height: 1.6; font-weight: 500; color: var(--ink-3); }

/* 광고: 좌우 레일(≥1280)·모바일 가로 배너 */
.mh-rail__sticky { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
.mh-rail__sticky.is-flow { position: static; }
.mh-rail__link, .mh-mbanner__link { position: relative; display: block; overflow: hidden; background: var(--surface-1); isolation: isolate; }
.mh-rail__link { border-radius: var(--r-lg); }
.mh-rail__link img, .mh-mbanner__link img { width: 100%; height: auto; }
.mh-mbanner__link img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.mh-mbanner__link.is-error img { display: none; }
/* 파일이 없는 광고: 레일은 자리째 숨기고(본문 폭은 빈 열이 지킨다), 모바일 가로 배너는 4:1 자리를 그대로 두되 "광고" 표기만 뺀다(본문이 밀리지 않게) */
.mh-rail__sticky:has(.is-error) { display: none; }
.mh-rail__link.is-error, .mh-rail__link.is-error + .mh-ad-tag, .mh-mbanner__link.is-error + .mh-ad-tag { display: none; }
.mh-rail__link::after, .mh-mbanner__link::after, .mh-cover::after, .mh-ep__thumb::after, .mh-stack::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--hairline); pointer-events: none; }
.mh-ad-tag { position: absolute; top: var(--space-2); right: var(--space-2); z-index: 2; padding: 2px var(--space-2); border-radius: var(--r-sm); background: var(--surface-0); background: color-mix(in srgb, var(--surface-0) 85%, transparent); color: var(--ink-2); font-size: var(--fs-caption); line-height: 1.4; font-weight: 600; pointer-events: none; }
.mh-mbanner { position: relative; margin-top: var(--space-5); }
.mh-mbanner__link { border-radius: var(--r-md); }

/* 섹션 */
.mh-section { margin-top: var(--section-gap); }
.mh-section--tight { margin-top: var(--space-7); }
.mh-section--paper { padding: var(--space-7) var(--space-6); border-radius: var(--r-lg); background: var(--surface-paper); }
.mh-more { display: flex; justify-content: center; margin-top: var(--space-6); }

/* 카드 그리드 */
.mh-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
.mh-grid > li { min-width: 0; }
.mh-grid--feature { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mh-grid--feature > li:nth-child(n + 11) { display: none; }
.mh-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ------------------------------------------------------------------ 4. 컴포넌트 */
/* 버튼 */
.mh-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--hit); padding: 0 var(--space-5); border: 0; border-radius: var(--r-md); background: var(--surface-0); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: var(--fs-body); font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; transition: background-color var(--dur-2) ease, color var(--dur-2) ease, transform var(--dur-1) ease; }
.mh-btn:hover { background: var(--surface-1); }
.mh-btn:active { transform: scale(0.98); }
.mh-btn--primary { background: var(--primary); box-shadow: none; color: var(--surface-0); }
.mh-btn--primary:hover { background: var(--primary-strong); }
.mh-btn--lg { min-height: 48px; }
.mh-btn--wide { min-width: 240px; }
.mh-btn--block { width: 100%; }
.mh-btn[disabled], .mh-btn[aria-disabled='true'] { opacity: 0.5; pointer-events: none; }

/* 배지(높이 20) */
.mh-badges { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 2; display: flex; gap: var(--space-1); }
.mh-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--space-2); border-radius: var(--r-sm); font-size: var(--fs-caption); font-weight: 600; line-height: 1; white-space: nowrap; }
.mh-badge--up, .mh-badge--featured { background: var(--primary); color: var(--surface-0); }
.mh-badge--new { background: var(--surface-0); box-shadow: inset 0 0 0 1px var(--hairline); color: var(--primary); }
.mh-badge--ongoing { background: var(--surface-0); box-shadow: inset 0 0 0 1px var(--hairline); color: var(--success); }
.mh-badge--completed { background: var(--ink); color: var(--surface-0); }

/* 칩·태그 */
.mh-chips__list { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); }
.mh-chips__list > li { display: flex; align-items: center; height: var(--hit); }
.mh-chip { position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 var(--space-4); border-radius: var(--r-pill); background: var(--surface-0); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: var(--fs-body-s); font-weight: 600; white-space: nowrap; transition: background-color var(--dur-2) ease, color var(--dur-2) ease; }
.mh-chip::before { content: ''; position: absolute; inset: -4px 0; }
.mh-chip:hover { background: var(--surface-1); }
.mh-chip[aria-current='true'] { background: var(--ink); box-shadow: none; color: var(--surface-0); }
.mh-tag { position: relative; display: inline-flex; align-items: center; gap: var(--space-1); height: 28px; padding: 0 var(--space-3); border-radius: var(--r-pill); background: var(--surface-0); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: var(--fs-caption); font-weight: 500; line-height: 1; white-space: nowrap; transition: background-color var(--dur-2) ease; }
a.mh-tag::before { content: ''; position: absolute; inset: -8px 0; }
a.mh-tag:hover { background: var(--surface-1); }
.mh-taglist { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* 섹션 헤더 */
.mh-sechead { display: flex; align-items: baseline; gap: 0; margin-bottom: var(--space-5); }
.mh-sechead__mark { align-self: center; flex: none; margin-right: var(--space-2); color: var(--brand-blue); fill: currentColor; }
.mh-sechead__title { font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.mh-sechead__sub { margin-left: var(--space-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-body-s); font-weight: 500; line-height: var(--lh-body-s); color: var(--ink-3); }
.mh-sechead__more { align-self: center; display: inline-flex; align-items: center; gap: 2px; min-height: var(--hit); margin-left: auto; padding-left: var(--space-3); font-size: var(--fs-body-s); font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: color var(--dur-2) ease; }
.mh-sechead__more:hover { color: var(--primary); }
.mh-section--paper .mh-sechead__sub { color: var(--ink-2); }

/* 표지 틀(5:7) */
.mh-cover { position: relative; display: block; aspect-ratio: 5 / 7; overflow: hidden; border-radius: var(--r-sm); background: var(--surface-1); isolation: isolate; }
.mh-cover__fallback, .mh-stack__fb { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--surface-paper); }
.mh-cover__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.js .mh-cover__img { transition: opacity var(--dur-2) ease, transform var(--dur-4) var(--ease-hover); }
.mh-cover.is-error .mh-cover__img { display: none; }

/* 카드 */
.mh-card__link { display: block; border-radius: var(--r-sm); }
.mh-card__link:focus-visible { outline: none; }
.mh-card__link:focus-visible .mh-cover { outline: 2px solid var(--primary); outline-offset: 2px; }
.mh-card__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: calc(2 * var(--lh-card) * 1em); margin-top: var(--space-2); font-size: var(--fs-card); font-weight: var(--fw-card); line-height: var(--lh-card); overflow-wrap: anywhere; word-break: keep-all; transition: color var(--dur-2) ease; }
.mh-card__author { display: block; overflow: hidden; margin-top: var(--space-1); text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-body-s); font-weight: 400; line-height: var(--lh-body-s); color: var(--ink-2); }
.mh-card__meta { display: flex; align-items: center; gap: var(--space-1); overflow: hidden; margin-top: 2px; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-caption); font-weight: 500; line-height: var(--lh-caption); color: var(--ink-3); }
.mh-card__meta-icon { width: 12px; height: 12px; }
.mh-card--feature .mh-cover { border-radius: var(--r-md); }
.mh-card--feature .mh-card__title { margin-top: var(--space-3); font-size: var(--fs-card); }
.mh-card__summary { display: block; overflow: hidden; margin-top: 2px; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-body-s); font-weight: 500; line-height: var(--lh-body-s); color: var(--ink-2); }
.mh-card--feature .mh-card__meta { margin-top: var(--space-1); }
@media (hover: hover) {
  .mh-card__link:hover .mh-cover__img { transform: scale(1.04); }
  .mh-card__link:hover .mh-card__title { color: var(--primary); }
}

/* 정렬·툴바·탭 */
.mh-sort { display: inline-flex; align-items: center; }
.mh-sort__link { display: inline-flex; align-items: center; min-height: var(--hit); padding: 0 var(--space-2); font-size: var(--fs-body-s); font-weight: 500; color: var(--ink-3); white-space: nowrap; transition: color var(--dur-2) ease; }
.mh-sort__link:hover { color: var(--ink); }
.mh-sort__link[aria-current='true'] { font-weight: 600; color: var(--ink); }
.mh-sort__sep { width: 1px; height: 12px; background: var(--line); }
.mh-tabs-bar__list { display: flex; border-bottom: 1px solid var(--line); }
.mh-tabs-bar__link { position: relative; display: flex; align-items: center; height: 48px; padding: 0 var(--space-4); font-size: var(--fs-body); font-weight: 600; color: var(--ink-3); transition: color var(--dur-2) ease; }
.mh-tabs-bar__link:hover { color: var(--ink); }
.mh-tabs-bar__link[aria-current='page'] { color: var(--ink); }
.mh-tabs-bar__link[aria-current='page']::after { content: ''; position: absolute; left: var(--space-4); right: var(--space-4); bottom: -1px; height: 2px; background: var(--ink); }
.mh-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-2) 0 var(--space-4); }
.mh-toolbar__count { font-size: var(--fs-body-s); font-weight: 500; color: var(--ink-2); }
.mh-toolbar__count strong { font-weight: 700; color: var(--ink); }

/* 쪽 이동 */
.mh-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-7); }
.mh-pager__btn { display: inline-grid; place-items: center; min-width: var(--hit); height: var(--hit); padding: 0 var(--space-2); border-radius: var(--r-md); font-size: var(--fs-body-s); font-weight: 600; color: var(--ink-2); transition: background-color var(--dur-2) ease, color var(--dur-2) ease; }
.mh-pager__btn:hover { background: var(--surface-1); color: var(--ink); }
.mh-pager__btn[aria-current='page'] { background: var(--ink); color: var(--surface-0); }
.mh-pager__gap { display: inline-grid; place-items: center; min-width: var(--space-5); height: var(--hit); color: var(--ink-3); }

/* 빈 상태 */
.mh-empty { display: flex; flex-direction: column; align-items: center; padding: var(--space-8) var(--space-4); text-align: center; }
.mh-empty--paper { border-radius: var(--r-lg); background: var(--surface-paper); }
.mh-empty__motif { flex: none; margin-bottom: var(--space-5); }
.mh-empty__title { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); }
.mh-empty--paper .mh-empty__title { font-size: var(--fs-h1); font-weight: var(--fw-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
.mh-empty__desc { max-width: 40ch; margin-top: var(--space-2); font-size: var(--fs-body-s); font-weight: 500; line-height: var(--lh-body-s); color: var(--ink-2); }
.mh-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-5); }
.mh-404-search { display: flex; gap: var(--space-2); width: min(100%, 480px); margin-top: var(--space-5); }
.mh-404-search__box { position: relative; display: flex; flex: 1; min-width: 0; height: var(--hit); }
.mh-404-search__box::before { content: ''; position: absolute; inset: 2px 0; border-radius: var(--r-pill); background: var(--surface-0); box-shadow: inset 0 0 0 1px var(--line); }
.mh-404-search__box:focus-within::before { box-shadow: inset 0 0 0 2px var(--primary); }
.mh-404-search__input { position: relative; width: 100%; padding: 0 var(--space-4); border: 0; background: transparent; color: var(--ink); font-size: var(--fs-body-s); font-weight: 500; outline: none; appearance: none; -webkit-appearance: none; }
.mh-404-search__input::-webkit-search-cancel-button { display: none; }
.mh-404-search__input::placeholder { color: var(--ink-3); opacity: 1; }
.mh-404-search .mh-btn { border-radius: var(--r-pill); }

/* 스켈레톤(AJAX 로 늦게 오는 회차 줄에서만) */
.mh-skel { display: block; border-radius: var(--r-sm); background: var(--surface-1); animation: mh-pulse 1.2s ease-in-out infinite; }
.mh-skel--line { height: 12px; }
.mh-skel--short { width: 40%; margin-top: var(--space-2); }
@keyframes mh-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* 하단 고정 바(768 미만만) */
.mh-sticky { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: var(--space-1) var(--gutter) calc(var(--space-1) + env(safe-area-inset-bottom)); background: var(--surface-0); border-top: 1px solid var(--line); box-shadow: var(--shadow-sheet); transform: translateY(100%); transition: transform var(--dur-3) var(--ease-out); }
.mh-sticky.is-on { transform: none; }

/* 알림·안내 */
.mh-alert { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--r-md); background: var(--danger-bg); color: var(--danger); font-size: var(--fs-body-s); font-weight: 600; line-height: var(--lh-body-s); }
.mh-alert .mh-icon { margin-top: 2px; }
.mh-notice { margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--r-md); background: var(--surface-1); color: var(--ink-2); font-size: var(--fs-body-s); font-weight: 500; }

/* 폼 */
.mh-form__lead { margin-bottom: var(--space-5); color: var(--ink-2); }
.mh-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); margin-top: var(--space-5); }
.mh-form .mh-alert + .mh-form__grid, .mh-form .mh-alert { margin-top: var(--space-4); }
.mh-field { min-width: 0; }
.mh-field--wide { grid-column: 1 / -1; }
.mh-field__label { display: block; margin-bottom: var(--space-2); font-size: var(--fs-body-s); font-weight: 600; line-height: var(--lh-body-s); color: var(--ink); }
.mh-field__req { margin-left: 2px; color: var(--primary); }
.mh-input { display: block; width: 100%; height: 48px; padding: 0 var(--space-4); border: 1px solid var(--ink-3); border-radius: var(--r-md); background: var(--surface-0); color: var(--ink); font-size: var(--fs-body); font-weight: 400; line-height: 1.4; appearance: none; -webkit-appearance: none; transition: background-color var(--dur-2) ease; }
.mh-input::placeholder { color: var(--ink-3); opacity: 1; }
.mh-input:hover { background: var(--surface-1); }
.mh-input:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: transparent; background: var(--surface-0); }
.mh-input[aria-invalid='true'] { border-color: var(--danger); }
.mh-input--area { height: auto; min-height: 160px; padding: var(--space-3) var(--space-4); line-height: 1.6; resize: vertical; }
.mh-select { position: relative; display: block; }
.mh-select .mh-input { padding-right: var(--space-7); text-overflow: ellipsis; }
.mh-select__chev { position: absolute; right: var(--space-3); top: 50%; margin-top: -10px; color: var(--ink-2); pointer-events: none; }
.mh-field__count { margin-top: var(--space-1); text-align: right; font-size: var(--fs-caption); font-weight: 500; color: var(--ink-3); }
.mh-field__hint { margin-top: var(--space-2); font-size: var(--fs-caption); line-height: 1.5; font-weight: 500; color: var(--ink-3); }
.mh-field__error { display: flex; align-items: flex-start; gap: var(--space-1); margin-top: var(--space-2); font-size: var(--fs-body-s); font-weight: 600; line-height: 1.4; color: var(--danger); }
.mh-field__error .mh-icon { margin-top: 1px; }
.mh-fieldset { border: 0; padding: 0; margin: 0; }
.mh-fieldset legend { padding: 0; }
.mh-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.mh-seg__opt { position: relative; display: block; }
.mh-seg__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mh-seg__opt span { display: flex; align-items: center; justify-content: center; height: 48px; border: 1px solid var(--ink-3); border-radius: var(--r-md); color: var(--ink-2); font-weight: 600; transition: background-color var(--dur-2) ease, color var(--dur-2) ease; }
.mh-seg__opt:hover span { background: var(--surface-1); }
.mh-seg__opt input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--surface-0); }
.mh-seg__opt input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.mh-consent { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.mh-check { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--hit); cursor: pointer; }
.mh-check input { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: pointer; }
.mh-check__box { display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin-top: var(--space-2); margin-top: calc((var(--hit) - 24px) / 2); border: 1px solid var(--ink-3); border-radius: var(--r-sm); background: var(--surface-0); color: var(--surface-0); }
.mh-check__box .mh-icon { stroke-width: 3; opacity: 0; transition: opacity var(--dur-1) ease; }
.mh-check input:checked + .mh-check__box { background: var(--primary); border-color: var(--primary); }
.mh-check input:checked + .mh-check__box .mh-icon { opacity: 1; }
.mh-check input:focus-visible + .mh-check__box { outline: 2px solid var(--primary); outline-offset: 2px; }
.mh-check__text { display: block; padding-top: calc((var(--hit) - 1.6em) / 2); font-weight: 600; line-height: 1.6; }
.mh-consent__more { margin: 0 0 0 36px; }
.mh-consent__more summary { display: inline-flex; align-items: center; min-height: var(--hit); font-size: var(--fs-body-s); font-weight: 600; color: var(--ink-2); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.mh-consent__more summary::-webkit-details-marker { display: none; }
.mh-consent__list { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--r-md); background: var(--surface-1); font-size: var(--fs-body-s); line-height: var(--lh-body-s); }
.mh-consent__list dt { font-weight: 700; color: var(--ink); }
.mh-consent__list dd { color: var(--ink-2); }
.mh-consent__link { margin-top: var(--space-2); font-size: var(--fs-body-s); }
.mh-consent__link a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.mh-form__actions { margin-top: var(--space-6); }
.mh-form__actions .mh-btn { min-width: 200px; }

/* ------------------------------------------------------------------ 5. 섹션 */
.mh-pagehead { margin-bottom: var(--space-4); }
.mh-pagehead__title { font-size: var(--fs-h1); font-weight: var(--fw-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
.mh-pagehead__term { font-weight: 700; }
.mh-pagehead__count { color: var(--primary); }

/* 메인: 투고 안내 배너 */
.mh-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: center; gap: var(--space-6); min-height: 320px; padding: var(--space-6); overflow: hidden; border-radius: var(--r-lg); background: var(--surface-paper); isolation: isolate; }
.mh-hero__art { position: absolute; inset: 0; z-index: -1; }
.mh-hero__svg { position: absolute; top: 0; right: 0; width: auto; height: 100%; aspect-ratio: 2 / 1; max-width: none; }
.mh-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mh-hero__copy { max-width: 480px; }
.mh-hero--image .mh-hero__copy { padding: var(--space-5); border-radius: var(--r-md); background: var(--surface-paper); }
.mh-hero__title { margin-bottom: var(--space-3); font-size: var(--fs-display); font-weight: var(--fw-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.mh-hero__lead { margin-bottom: var(--space-5); font-size: var(--fs-body); font-weight: 500; line-height: 1.6; color: var(--ink-2); }
.mh-hero__steps { display: grid; gap: var(--space-4); padding: var(--space-5); border-radius: var(--r-lg); background: var(--surface-0); box-shadow: var(--shadow-1); }
.mh-hero__step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.mh-hero__step:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 32px; bottom: -12px; width: 2px; background: var(--line); }
.mh-hero__num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-pill); background: var(--primary); color: var(--surface-0); font-size: var(--fs-body-s); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.mh-hero__step-body { display: block; min-width: 0; padding-top: var(--space-1); }
.mh-hero__step-title { display: block; font-size: var(--fs-body-s); font-weight: 600; line-height: 1.4; color: var(--ink); }
.mh-hero__step-note { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 2px; font-size: var(--fs-caption); font-weight: 500; line-height: var(--lh-caption); color: var(--ink-2); }

/* 작품 상세 */
.mh-work { display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-areas: 'cover head' 'cover body'; grid-template-rows: auto 1fr; column-gap: var(--space-6); padding: var(--space-6); border-radius: var(--r-lg); background: var(--surface-paper); }
@supports (color: color-mix(in srgb, red 14%, white)) {
  /* 표지 톤 14% + 흰 92~86%: 최악(검정 톤)에도 --ink-2 글자 대비 5.1 이상. tokens.css 의 --tone-panel 은 :root 에서 계산돼 작품별 톤을 못 받으므로 여기서 다시 섞는다 */
  .mh-work { background: color-mix(in srgb, var(--tone) 14%, var(--surface-0)); }
}
.mh-work__cover { grid-area: cover; align-self: start; width: 240px; }
.mh-work__cover .mh-cover { border-radius: var(--r-md); box-shadow: var(--shadow-cover); }
.mh-work__head { grid-area: head; min-width: 0; }
.mh-work__body { grid-area: body; min-width: 0; margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.mh-work__flags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-3); }
.mh-work__flags:empty { display: none; }
.mh-work__flags .mh-badges { position: static; }
.mh-work__title { font-size: var(--fs-h1); font-weight: var(--fw-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); overflow-wrap: anywhere; }
.mh-work__author { margin-top: var(--space-1); font-size: var(--fs-body); font-weight: 500; color: var(--ink-2); overflow-wrap: anywhere; }
.mh-work__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.mh-work__summary { font-size: 18px; font-weight: 600; line-height: 1.55; color: var(--ink); }
.mh-work__intro { margin-top: var(--space-3); }
.mh-work__summary:empty + .mh-work__intro { margin-top: 0; }
.mh-work__intro-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }
html:not(.js) .mh-work__intro-text, .mh-work__intro.is-open .mh-work__intro-text { display: block; -webkit-line-clamp: unset; }
.mh-work__intro-toggle { display: inline-flex; align-items: center; min-height: var(--hit); min-width: var(--hit); font-size: var(--fs-body-s); font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.mh-work__stats { margin-top: var(--space-4); font-size: var(--fs-body-s); font-weight: 500; line-height: var(--lh-body-s); color: var(--ink-2); }
.mh-work__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.mh-work__actions .mh-btn { min-width: 160px; }

/* 회차 목록 */
.mh-eps { margin-top: var(--space-7); }
.mh-eps__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.mh-eps__title { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); }
.mh-eps__count { margin-left: var(--space-1); color: var(--ink-3); font-weight: 500; }
.mh-eps__list { border-top: 1px solid var(--ink); }
.mh-ep { border-bottom: 1px solid var(--line); }
.mh-ep__link { display: grid; grid-template-columns: 96px 56px minmax(0, 1fr) 96px 96px; align-items: center; column-gap: var(--space-4); min-height: 80px; padding: var(--space-2); color: var(--ink); transition: background-color var(--dur-2) ease; }
.mh-ep__link:hover { background: var(--surface-1); }
.mh-ep--latest .mh-ep__link { background: var(--primary-tint); }
.mh-ep--latest .mh-ep__link:hover { background: var(--primary-tint); }
.mh-ep__thumb { position: relative; display: grid; place-items: center; width: 96px; height: 64px; overflow: hidden; border-radius: var(--r-sm); background: var(--surface-1); color: var(--ink-3); isolation: isolate; }
.mh-ep__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mh-ep__thumb-fb { color: var(--ink-3); opacity: .45; }
.mh-ep__thumb.is-error .mh-ep__thumb-fb { display: block; }
.mh-ep__no { font-size: var(--fs-body-s); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.mh-ep--latest .mh-ep__no { color: var(--primary); }
.mh-ep__body { display: block; min-width: 0; }
.mh-ep__title { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.mh-ep__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-body); font-weight: 500; line-height: 1.4; }
.mh-ep__title .mh-badge { flex: none; }
.mh-ep__link:visited .mh-ep__name { color: var(--ink-3); }
.mh-ep__sub { display: none; margin-top: 2px; font-size: var(--fs-caption); font-weight: 500; color: var(--ink-3); }
.mh-ep__date, .mh-ep__views { font-size: var(--fs-body-s); font-weight: 500; color: var(--ink-3); text-align: right; white-space: nowrap; }
.mh-ep--latest .mh-ep__date, .mh-ep--latest .mh-ep__views, .mh-ep--latest .mh-ep__sub { color: var(--ink-2); }
.mh-ep--skeleton .mh-ep__link { pointer-events: none; }
.mh-ep--skeleton .mh-ep__link:hover { background: none; }
.mh-eps__more { display: flex; justify-content: center; margin-top: var(--space-6); }
.mh-eps .mh-empty { padding-block: var(--space-7); }

/* 투고 안내 */
.mh-page--submit .mh-subsec { margin-top: var(--section-gap); }
.mh-page--submit .mh-subhead + .mh-subsec { margin-top: var(--section-gap); }
.mh-subhead { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: center; gap: var(--space-6); min-height: 400px; padding: var(--space-7); overflow: hidden; border-radius: var(--r-lg); background: var(--surface-paper); }
.mh-status { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); font-size: var(--fs-body-s); font-weight: 600; color: var(--ink); }
.mh-status__dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--success); }
.mh-subhead__title { margin-bottom: var(--space-3); font-size: var(--fs-display); font-weight: var(--fw-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.mh-subhead__lead { max-width: 44ch; margin-bottom: var(--space-5); font-weight: 500; color: var(--ink-2); }
.mh-subhead__art { position: relative; width: 360px; height: 300px; }
.mh-stack { position: absolute; width: 160px; aspect-ratio: 5 / 7; overflow: hidden; border-radius: var(--r-md); background: var(--surface-1); box-shadow: var(--shadow-cover); isolation: isolate; }
.mh-stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mh-stack--1 { left: 0; top: 56px; transform: rotate(-6deg); }
.mh-stack--2 { left: 100px; top: 0; z-index: 2; }
.mh-stack--3 { left: 200px; top: 56px; transform: rotate(6deg); }
.mh-subsec__title { margin-bottom: var(--space-5); font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.mh-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.mh-timeline__item { position: relative; padding-top: 56px; }
.mh-timeline__num { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--primary); background: var(--surface-0); color: var(--primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.mh-timeline__item:not(:last-child)::before { content: ''; position: absolute; top: 19px; left: 48px; width: calc(100% - 32px); height: 2px; background: var(--line); }
.mh-timeline__title { font-size: var(--fs-body); font-weight: 600; line-height: 1.4; }
.mh-timeline__note { margin-top: var(--space-1); font-size: var(--fs-body-s); font-weight: 500; line-height: var(--lh-body-s); color: var(--ink-2); }
.mh-defs { border-top: 1px solid var(--ink); }
.mh-defs__row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-4); align-items: center; min-height: 56px; padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--line); }
.mh-defs dt { font-weight: 600; color: var(--ink); }
.mh-defs dd { color: var(--ink-2); line-height: 1.6; }
.mh-spec { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-7); align-items: start; }
.mh-spec__fig { width: 100%; max-width: 360px; padding: var(--space-4); border-radius: var(--r-lg); background: var(--surface-1); }
.mh-spec__svg { display: block; width: 100%; height: auto; }
.mh-spec__label { font-size: 14px; font-weight: 600; font-family: var(--font-sans); }
.mh-spec__label--sub { font-size: 12px; font-weight: 500; }
.mh-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-6); }
.mh-checks__item { display: flex; align-items: flex-start; gap: var(--space-3); min-height: 32px; font-weight: 500; }
.mh-checks__icon { margin-top: 2px; color: var(--primary); stroke-width: 2.5; }
.mh-subsec--pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
.mh-subsec--pair .mh-subsec__title { font-size: var(--fs-h3); margin-bottom: var(--space-3); }
.mh-prose-p { color: var(--ink-2); line-height: var(--lh-body); }
.mh-faq { border-top: 1px solid var(--ink); }
.mh-faq__item { border-bottom: 1px solid var(--line); }
.mh-faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 64px; padding: var(--space-2); font-weight: 600; cursor: pointer; list-style: none; }
.mh-faq__q::-webkit-details-marker { display: none; }
.mh-faq__q:hover { color: var(--primary); }
.mh-faq__chev { color: var(--ink-3); transition: transform var(--dur-2) var(--ease-out); }
.mh-faq__item[open] .mh-faq__chev { transform: rotate(180deg); }
.mh-faq__a { padding: 0 var(--space-2) var(--space-5); }
.mh-faq__a p { max-width: 64ch; color: var(--ink-2); }
.mh-subsec--form { padding: var(--space-7); border-radius: var(--r-lg); background: var(--surface-paper); }
.mh-subsec--form .mh-form, .mh-subsec--form .mh-done { max-width: 720px; }
.mh-subsec--form .mh-subsec__title { margin-bottom: var(--space-3); }
.mh-subsec--form .mh-input:not(:focus):not([aria-invalid='true']) { background: var(--surface-0); }
.mh-subsec--form .mh-input:hover:not(:focus) { background: var(--surface-1); }
.mh-done { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-6) 0; }
.mh-done:focus { outline: none; }
.mh-done__mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-pill); background: var(--success-bg); color: var(--success); }
.mh-done__mark .mh-icon { stroke-width: 2.5; }
.mh-done__text { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); }
.mh-done__body { display: grid; gap: var(--space-2); }
.mh-done__sub { font-size: var(--fs-body); line-height: 1.7; color: var(--ink-2); }
.mh-done__sub[hidden] { display: none; }

/* 약관·방침 */
.mh-doc { margin: 0 auto; }
.mh-doc__head { max-width: 720px; margin-bottom: var(--space-6); }
.mh-doc__title { font-size: var(--fs-h1); font-weight: var(--fw-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
.mh-doc__date { margin-top: var(--space-2); font-size: var(--fs-body-s); font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mh-doc__draft { margin-left: var(--space-2); color: var(--ink-2); font-weight: 600; }
.mh-doc__layout { display: grid; grid-template-columns: 200px minmax(0, 720px); gap: var(--space-7); align-items: start; }
.mh-doc__layout > .mh-doc__body:only-child { grid-column: 2; }
.mh-toc { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
.mh-toc__label { margin-bottom: var(--space-2); font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.04em; color: var(--ink-3); }
.mh-toc__link { display: flex; align-items: center; min-height: var(--hit); padding: var(--space-2) 0 var(--space-2) var(--space-3); border-left: 2px solid var(--line); font-size: var(--fs-body-s); font-weight: 500; line-height: 1.5; color: var(--ink-2); transition: color var(--dur-2) ease; }
.mh-toc__link:hover { color: var(--ink); }
.mh-toc__link.is-current { border-left-color: var(--primary); color: var(--primary); font-weight: 600; }
.mh-prose { font-size: var(--fs-body); line-height: 1.8; color: var(--ink); }
.mh-prose h2 { margin: var(--space-7) 0 var(--space-3); font-size: 20px; font-weight: 700; line-height: 1.4; scroll-margin-top: calc(var(--header-h) + var(--space-5)); }
.mh-prose h2:first-child { margin-top: 0; }
.mh-prose p { margin-top: var(--space-3); color: var(--ink); }
.mh-prose ul { margin: var(--space-3) 0 0; padding-left: var(--space-5); list-style: disc; }
.mh-prose ol { margin: var(--space-3) 0 0; padding-left: var(--space-5); list-style: decimal; }
.mh-prose li { margin-top: var(--space-1); }
.mh-prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.mh-prose table { width: 100%; margin-top: var(--space-4); border-collapse: collapse; font-size: var(--fs-body-s); line-height: 1.6; }
.mh-prose th, .mh-prose td { padding: var(--space-3) var(--space-4); border: 1px solid var(--line); text-align: left; vertical-align: top; }
.mh-prose thead th { background: var(--surface-1); font-weight: 600; }
.mh-prose tbody th { width: 28%; background: var(--surface-1); font-weight: 600; }
.mh-prose strong { font-weight: 700; }

/* 404 */
.mh-404 { margin-top: var(--space-2); }
.mh-404 .mh-empty { padding-block: var(--space-9); }

/* 화면 전환: 카드 표지 → 상세 표지만 이어지고 페이지 전체 크로스페이드는 없다 */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation: none; }
::view-transition-group(*) { animation-duration: var(--dur-4); animation-timing-function: var(--ease-out); }
::view-transition-group(root) { animation-duration: 0s; }

/* ------------------------------------------------------------------ 6. 반응형 */
@media (min-width: 1280px) {
  .mh-header__inner { width: var(--main-w); }
  .mh-footer__inner { width: var(--main-w); }
}

@media (max-width: 1279px) {
  .mh-grid--feature { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .mh-search { display: none; flex: 1; margin-left: 0; }
  .mh-header__search { display: grid; place-items: center; width: var(--hit); height: var(--hit); margin-left: auto; margin-right: calc(-1 * var(--space-2)); border-radius: var(--r-pill); color: var(--ink); }
  .mh-header.is-searching .mh-logo, .mh-header.is-searching .mh-nav, .mh-header.is-searching .mh-header__search { display: none; }
  .mh-header.is-searching .mh-search { display: flex; }
  .mh-header.is-searching .mh-search__submit { right: 60px; }
  .mh-header.is-searching .mh-search__input { padding-right: 104px; }
  .mh-header.is-searching .mh-search__cancel { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: var(--hit); height: var(--hit); margin-left: var(--space-2); font-size: var(--fs-body-s); font-weight: 600; color: var(--ink-2); }
  html:not(.js) .mh-search { display: flex; }
  html:not(.js) .mh-header__search { display: none; }
  .mh-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
  .mh-grid--feature { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mh-grid--feature > li:nth-child(n + 9) { display: none; }
  .mh-hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .mh-hero__svg { height: min(100%, 360px); }
  .mh-hero__copy { max-width: 56%; }
  .mh-hero--image .mh-hero__copy { max-width: 56%; }
  .mh-hero__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-5); }
  .mh-hero__step:not(:last-child)::before { display: none; }
  .mh-spec { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .mh-doc__layout { grid-template-columns: minmax(0, 720px); }
  .mh-toc { display: none; }
  .mh-doc__layout > .mh-doc__body:only-child { grid-column: 1; }
  .mh-subhead { grid-template-columns: minmax(0, 1fr) 280px; padding: var(--space-6); }
  .mh-subhead__art { width: 280px; height: 240px; transform-origin: top left; }
  .mh-stack { width: 124px; }
  .mh-stack--1 { top: 48px; }
  .mh-stack--2 { left: 78px; }
  .mh-stack--3 { left: 156px; top: 48px; }
}

@media (max-width: 767px) {
  .mh-main { padding-block: var(--space-4) var(--section-gap); }
  .mh-header { position: static; }
  .mh-header__inner { padding: 0; }
  .mh-logo img { width: 148px; height: 21px; }
  .mh-nav { display: none; }
  .mh-tabs { position: sticky; top: 0; z-index: 39; display: block; background: var(--surface-0); border-bottom: 1px solid var(--line); }
  .mh-tabs__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mh-tabs__link { position: relative; display: flex; align-items: center; justify-content: center; height: var(--tabs-h); font-size: var(--fs-body-s); font-weight: 600; color: var(--ink-2); }
  .mh-tabs__link[aria-current='page'] { color: var(--primary); }
  .mh-tabs__link[aria-current='page']::after { content: ''; position: absolute; left: var(--space-4); right: var(--space-4); bottom: -1px; height: 2px; background: var(--primary); }
  html:not(.js) .mh-header__inner { flex-wrap: wrap; height: auto; padding-block: var(--space-2); }
  html:not(.js) .mh-search { flex: 1 1 100%; }
  .mh-footer { padding: var(--space-6) 0; }
  .mh-section--paper { margin-inline: calc(-1 * var(--gutter)); padding: var(--space-7) var(--gutter); border-radius: 0; }
  .mh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) var(--space-2); }
  .mh-grid--feature { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-3); }
  .mh-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-2); }
  .mh-badges { top: var(--space-1); left: var(--space-1); }
  .mh-badge { padding: 0 6px; }
  .mh-card__author { font-size: var(--fs-caption); font-weight: 500; }
  .mh-sechead__sub { display: none; }
  .mh-btn { min-height: 48px; }
  .mh-btn--wide { min-width: 0; width: 100%; }

  /* 가로 칩 줄: 페이지는 가로로 안 밀리고 칩 줄만 스크롤 */
  .mh-chips { margin-inline: calc(-1 * var(--gutter)); }
  .mh-chips__list { flex-wrap: nowrap; overflow-x: auto; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .mh-chips__list::-webkit-scrollbar { display: none; }
  .mh-chips__list > li { flex: none; }
  .mh-tabs-bar__list { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .mh-tabs-bar__link { flex: 0 0 auto; }
  .mh-tabs-bar__link[aria-current='page']::after { left: var(--space-4); right: var(--space-4); }
  .mh-pager { margin-top: var(--space-6); gap: var(--space-1); }

  /* 하단 고정 바 */
  .mh-sticky { display: block; }
  .mh-sticky[hidden] { display: none; }
  .mh-has-sticky .mh-footer { padding-bottom: calc(var(--space-6) + var(--bar-h) + env(safe-area-inset-bottom)); }

  /* 메인 배너: 이미지 영역을 위로 분리 */
  .mh-hero { display: block; min-height: 0; padding: 0; border-radius: var(--r-lg); }
  .mh-hero__art { position: relative; inset: auto; z-index: auto; aspect-ratio: 16 / 9; background: var(--surface-paper); }
  .mh-hero__svg { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .mh-hero__copy, .mh-hero--image .mh-hero__copy { max-width: none; padding: var(--space-5) var(--space-4) var(--space-4); border-radius: 0; background: var(--surface-paper); }
  .mh-hero__title { font-size: var(--fs-display); }
  .mh-hero__lead { font-size: var(--fs-body-s); margin-bottom: var(--space-4); }
  .mh-hero__copy .mh-btn { width: 100%; }
  .mh-hero__steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5) var(--space-4); border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: none; background: var(--surface-paper); }
  .mh-hero__steps { background: var(--surface-0); box-shadow: inset 0 0 0 1px var(--line); }
  .mh-hero__step:not(:last-child)::before { display: block; }

  /* 상세 */
  .mh-page--work { margin-top: calc(-1 * var(--space-4)); }
  .mh-work { grid-template-columns: 40% minmax(0, 1fr); grid-template-areas: 'cover head' 'body body'; grid-template-rows: auto; column-gap: var(--space-4); margin-inline: calc(-1 * var(--gutter)); padding: var(--space-4) var(--gutter) var(--space-5); border-radius: 0; }
  .mh-work__cover { width: 100%; }
  .mh-work__title { font-size: var(--fs-h1); }
  .mh-work__author { font-size: var(--fs-body-s); }
  .mh-work__chips { margin-top: var(--space-3); }
  .mh-work__body { margin-top: var(--space-4); padding-top: var(--space-4); }
  .mh-work__summary { font-size: var(--fs-body); }
  .mh-work__intro-text { -webkit-line-clamp: 3; }
  .mh-work__actions { flex-wrap: nowrap; }
  .mh-work__actions .mh-btn { flex: 1; min-width: 0; padding: 0 var(--space-3); }
  .mh-notice { margin-top: var(--space-4); }
  .mh-eps { margin-top: var(--space-6); }
  .mh-ep__link { grid-template-columns: 72px 40px minmax(0, 1fr); column-gap: var(--space-3); min-height: 64px; padding: var(--space-2) 0; }
  .mh-ep__thumb { width: 72px; height: 48px; }
  .mh-ep__no { font-size: var(--fs-caption); }
  .mh-ep__name { font-size: var(--fs-body-s); font-weight: 600; }
  .mh-ep__sub { display: block; }
  .mh-ep__date, .mh-ep__views { display: none; }

  /* 투고 */
  .mh-subhead { display: block; min-height: 0; margin-inline: calc(-1 * var(--gutter)); padding: var(--space-6) var(--gutter) var(--space-5); border-radius: 0; }
  .mh-subhead__copy .mh-btn { width: 100%; }
  .mh-subhead__art { width: 100%; height: 200px; margin-top: var(--space-6); }
  .mh-stack { width: 104px; }
  .mh-stack--1 { left: calc(50% - 142px); top: 32px; }
  .mh-stack--2 { left: calc(50% - 52px); top: 0; }
  .mh-stack--3 { left: calc(50% + 38px); top: 32px; }
  .mh-timeline { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .mh-timeline__item { padding: 0 0 0 56px; min-height: 40px; }
  .mh-timeline__item:not(:last-child)::before { top: 48px; left: 19px; width: 2px; height: calc(100% - 48px + var(--space-5) - 8px); }
  .mh-defs__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .mh-checks { grid-template-columns: minmax(0, 1fr); }
  .mh-subsec--pair { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .mh-subsec--form { margin-inline: calc(-1 * var(--gutter)); padding: var(--space-7) var(--gutter); border-radius: 0; }
  .mh-form__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .mh-form__actions .mh-btn { width: 100%; }
  .mh-consent__more { margin-left: 0; }
  .mh-prose table { display: block; overflow-x: auto; }
  .mh-404 .mh-empty { padding-block: var(--space-8); }
  .mh-404-search { flex-direction: column; }
  .mh-404-search__box { flex: none; }
  .mh-404-search .mh-btn { width: 100%; }
}

@media (max-width: 479px) {
  .mh-hero__title, .mh-subhead__title { font-size: var(--fs-display); }
  .mh-pagehead__title { font-size: var(--fs-h1); }
  .mh-pager__btn { min-width: var(--hit); }
  .mh-footer__nav { gap: 0 var(--space-4); }
}

/* 움직임 줄이기 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; }
  @view-transition { navigation: none; }
}