/* ============================================================
   mytest-theme — 라이트 기본
   토큰과 컴포넌트는 승인된 docs/design-preview.html 에서 이식했다.
   ============================================================ */

:root {
  /* 표면 — 액센트와 같은 계열로 아주 옅게 물들인다.
     본문은 흰 바탕 그대로 두어 썸네일이 계속 주인공이 되게 한다.
     되돌리려면 아래 두 값을 #F6F7F9 / #EFF1F4 로 바꾸면 된다. */
  --mt-bg:        #FFFFFF;
  --mt-surface:   #FBF6F8;
  --mt-surface-2: #F5EBEF;
  --mt-card:      #FFFFFF;

  /* 텍스트 — 순수 회색이 아니라 붉은 기를 섞는다.
     푸른 회색(#6B7280 계열)은 분홍 표면 위에서 색이 어긋나 보인다. */
  --mt-fg:        #1A1315;   /* 18.3:1 on white — AAA */
  --mt-fg-2:      #4E4247;   /*  9.6:1 */
  --mt-muted:     #756169;   /*  5.7:1 on white · 5.4:1 on --mt-surface — AA */

  /* 경계 */
  --mt-line:      #EFE3E7;
  --mt-line-2:    #DFCCD4;

  /* 액센트 — 채움용과 텍스트용을 분리한다 */
  --mt-accent:      #E11D48;  /* 4.70:1 — 채움 + 흰 글자 */
  --mt-accent-text: #BE123C;  /* 6.4:1  — 밝은 배경 위 강조 텍스트 */
  --mt-accent-weak: #FFF1F2;


  /* 타이포 */
  --mt-font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
             system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

  /* 간격 — 4/8 리듬 */
  --mt-1: 4px;  --mt-2: 8px;  --mt-3: 12px; --mt-4: 16px;
  --mt-5: 24px; --mt-6: 32px; --mt-7: 48px; --mt-8: 64px;

  --mt-radius:   10px;
  --mt-radius-s: 6px;
  --mt-shadow:   0 1px 2px rgba(60,32,42,.06), 0 4px 12px rgba(60,32,42,.06);

  /* 모션 */
  --mt-dur:  200ms;
  --mt-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* 그리드 열 수 — 시안 변경 시 여기만 바꾸면 된다 */
  --mt-cols-work:  4;
  --mt-cols-actor: 7;
}
@media (max-width: 1024px) { :root { --mt-cols-work: 3; } }
@media (max-width: 640px)  { :root { --mt-cols-work: 2; } }

*, *::before, *::after { box-sizing: border-box; }

/* [hidden]을 작성자 스타일보다 우선시킨다.
 * .mt-more 처럼 display를 명시한 요소는 UA 스타일의 [hidden]{display:none}을
 * 덮어버려, hidden 속성이 붙어도 화면에 보였다(I-1).
 * 개별 컴포넌트마다 대응하면 같은 사고가 반복되므로 전역으로 잡는다. */
[hidden] { display: none !important; }

body {
  margin: 0; background: var(--mt-bg); color: var(--mt-fg);
  font-family: var(--mt-font);
  font-size: 16px; line-height: 1.65;         /* 한글은 라틴보다 넉넉히 */
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.35; margin: 0; font-weight: 700; letter-spacing: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/* 숫자·품번은 자릿수가 흔들리지 않게 */
.tnum,
.mt-detail__code,
.mt-spec dd { font-variant-numeric: tabular-nums; }

.mt-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--mt-4); }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.mt-skip:focus {
  position: fixed !important; top: 8px; left: 8px; z-index: 999;
  width: auto; height: auto; clip: auto;
  background: var(--mt-fg); color: #fff; padding: 10px 16px; border-radius: var(--mt-radius-s);
}
:focus-visible { outline: 2px solid var(--mt-accent); outline-offset: 2px; }

/* ===== 아이콘 ===== */
.mt-i { width: 20px; height: 20px; flex: none; }
.mt-fav .mt-i { width: 18px; height: 18px; stroke: var(--mt-fg-2); }
.mt-fav.is-on .mt-i { fill: var(--mt-accent); stroke: var(--mt-accent); }
.mt-btn .mt-i, .mt-share .mt-i { width: 18px; height: 18px; }
.mt-favlink .mt-i { width: 22px; height: 22px; }
.mt-month__nav .mt-i { width: 18px; height: 18px; }
.mt-search__submit .mt-i { width: 17px; height: 17px; stroke: var(--mt-muted); }

/* ===== GNB =====
   기획안 와이어프레임: 연회색 배경 띠 / 로고 자리 박스 / 탭(활성=빨강+밑줄)
   우측에 흰 검색창(둥근 사각)과 테두리 박스 안의 하트. */
.mt-gnb {
  border-bottom: 1px solid var(--mt-line); background: var(--mt-surface);
  position: sticky; top: 0; z-index: 50;
}
/* 찜 툴팁이 이 박스를 기준으로 붙는다 */
.mt-gnb__inner { position: relative; display: flex; align-items: center; gap: var(--mt-5); height: 72px; }

/* 글자 로고 — 사이트 제목을 그대로 쓴다.
   이미지 로고를 올리면(사용자 지정하기 › 사이트 아이덴티티) .mt-logo--img 로 바뀐다. */
.mt-logo {
  flex: none; display: inline-flex; align-items: center;
  font-weight: 800; font-size: 21px; letter-spacing: -0.015em;
  color: var(--mt-accent); white-space: nowrap;
  /* 제목이 길어져도 GNB 한 줄이 깨지지 않게 잘라낸다 */
  overflow: hidden; text-overflow: ellipsis; max-width: 40vw;
  transition: opacity var(--mt-dur) var(--mt-ease);
}
.mt-logo:hover { opacity: .82; }
.mt-logo--img img {
  display: block; height: 34px; width: auto; max-width: 200px; object-fit: contain;
}

.mt-tabs { display: flex; gap: var(--mt-5); align-items: center; }
.mt-tab {
  position: relative; padding: 6px 2px;
  font-size: 19px; font-weight: 600; letter-spacing: 0;
  color: var(--mt-muted);
}
.mt-tab:hover { color: var(--mt-fg-2); }
.mt-tab.is-active { color: var(--mt-accent); }
.mt-tab.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--mt-accent);
}

.mt-search { position: relative; flex: 1; max-width: 300px; margin-left: auto; }
.mt-search__form { position: relative; display: flex; }
.mt-search__input {
  width: 100%; height: 42px; padding: 0 42px 0 14px;
  font-family: inherit; font-size: 14px; color: var(--mt-fg);
  border: 1px solid var(--mt-line-2); border-radius: var(--mt-radius-s); background: #fff;
}
.mt-search__input::placeholder { color: var(--mt-muted); }
.mt-search__submit {
  position: absolute; right: 0; top: 0; height: 42px; width: 42px;
  border: 0; background: none; cursor: pointer; padding: 0;
  display: grid; place-items: center;
}
.mt-suggest {
  position: absolute; inset-inline: 0; top: calc(100% + 6px);
  background: #fff; border: 1px solid var(--mt-line); border-radius: var(--mt-radius);
  box-shadow: 0 8px 24px rgba(60,32,42,.12); list-style: none; margin: 0; padding: 6px;
  max-height: 320px; overflow: auto; z-index: 60;
}
.mt-suggest__head { font-size: 12px; color: var(--mt-muted); padding: 6px 10px 2px; }
.mt-suggest__item { padding: 8px 10px; border-radius: var(--mt-radius-s); cursor: pointer; font-size: 14px; }
.mt-suggest__item[aria-selected="true"], .mt-suggest__item:hover { background: var(--mt-surface-2); }

/* 하트도 검색창과 같은 높이의 테두리 박스에 담는다 (와이어프레임) */
.mt-favlink {
  position: relative; flex: none; display: grid; place-items: center;
  width: 46px; height: 42px;
  border: 1px solid var(--mt-line-2); border-radius: var(--mt-radius-s); background: #fff;
}
/* 찜 목록에 있을 때 — 아이콘만 있어 현재 위치를 알기 어렵다 */
.mt-favlink.is-active {
  border-color: var(--mt-accent); background: var(--mt-accent-weak);
}
.mt-favlink.is-active .mt-i { fill: var(--mt-accent); stroke: var(--mt-accent); }

.mt-favlink__dot {
  position: absolute; top: 6px; right: 6px; width: 7px; height: 7px;
  background: var(--mt-accent); border-radius: 50%; border: 1.5px solid #fff;
}

/* ===== 섹션 ===== */
/* 배경 장식이 여기에 붙는다(front-page.php).
   isolation으로 쌓임 맥락을 만들어 z-index:-1이 본문 뒤·main 배경 위에 놓이게 한다.
   overflow:hidden은 장식이 넘쳐 가로 스크롤이 생기는 것을 막는다. */
.mt-main { position: relative; isolation: isolate; overflow: hidden; padding: 0 0 var(--mt-8); }
.mt-section { margin-top: var(--mt-7); }
.mt-section__head { display: flex; align-items: baseline; gap: var(--mt-3); flex-wrap: wrap; }
.mt-section__title { font-size: 21px; display: flex; align-items: baseline; gap: var(--mt-2); }
/* 개수는 액센트로 — 와이어프레임의 '2명' / '4편' 표기 */
.mt-count { font-size: 13px; font-weight: 600; color: var(--mt-accent-text); }
.mt-updated { font-size: 13px; color: var(--mt-muted); margin-left: auto; }
.mt-guide { color: var(--mt-muted); font-size: 13px; margin: var(--mt-1) 0 var(--mt-4); }
.mt-page-title { font-size: 22px; margin: var(--mt-5) 0 var(--mt-1); }
.mt-section__foot { display: grid; place-items: center; margin-top: var(--mt-5); }

/* ===== 배너 =====
   와이어프레임은 GNB 바로 아래 전체 폭 블록이다. 컨테이너 여백 없이 붙는다.
   문구는 이미지 안에 포함된다 — 텍스트 오버레이 레이어를 두지 않는다.

   2장 이상이면 슬라이더가 된다. 스크롤 스냅으로 만들어 모바일 스와이프가
   브라우저 기본 동작으로 처리되고, JS가 없어도 좌우로 넘길 수 있다. */
.mt-banner { position: relative; background: var(--mt-surface-2); }
@media (max-width: 500px) {
  /* 컨테이너 여백을 상쇄해 화면 끝까지 채운다 */
  .mt-banner { margin-inline: calc(var(--mt-5) * -1); }
}
.mt-banner__track { display: flex; }
.mt-banner__slide { flex: 0 0 100%; min-width: 0; }
.mt-banner__link { position: relative; display: block; overflow: hidden; }
.mt-banner__img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1200 / 340; object-fit: cover;
}
a.mt-banner__link { transition: opacity var(--mt-dur) var(--mt-ease); }
a.mt-banner__link:hover { opacity: .92; }

.mt-banner--slider .mt-banner__track {
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.mt-banner--slider .mt-banner__track::-webkit-scrollbar { display: none; }
.mt-banner--slider .mt-banner__slide { scroll-snap-align: start; }

.mt-banner__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.9); color: var(--mt-fg);
  box-shadow: 0 1px 4px rgba(60,32,42,.22);
  opacity: 0; transition: opacity var(--mt-dur) var(--mt-ease);
}
.mt-banner__nav--prev { left: var(--mt-4); }
.mt-banner__nav--next { right: var(--mt-4); }
.mt-banner__nav .mt-i { width: 20px; height: 20px; }
/* 화살표는 평소 숨기고 조작하려 할 때 드러낸다. 이미지가 주인공이다. */
.mt-banner:hover .mt-banner__nav,
.mt-banner__nav:focus-visible { opacity: 1; }
/* 터치 기기는 hover가 없으므로 항상 보인다 */
@media (hover: none) {
  .mt-banner__nav { opacity: 1; }
}

.mt-banner__dots {
  position: absolute; left: 0; right: 0; bottom: var(--mt-3); z-index: 2;
  display: flex; justify-content: center; gap: var(--mt-2);
}
.mt-banner__dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.55); cursor: pointer;
  box-shadow: 0 0 0 1px rgba(60,32,42,.16);
  transition: background var(--mt-dur) var(--mt-ease), width var(--mt-dur) var(--mt-ease);
}
.mt-banner__dot[aria-current="true"] { background: #fff; width: 20px; border-radius: 999px; }

/* 배너 미등록 안내 — 운영자에게만 보인다.
   방문자에게 빈 회색 덩어리를 보이지 않으면서 자리를 확인할 수 있게 한다. */
.mt-banner__empty {
  aspect-ratio: 1200 / 340; display: flex; align-items: center;
  padding: 0 var(--mt-5); color: var(--mt-muted); font-size: 14px;
}

@media (max-width: 640px) {
  /* 모바일 전용 이미지를 올린 배너만 16:9로 쓴다.
     PC 이미지(약 3.5:1)를 16:9에 cover로 넣으면 좌우가 잘려 문구가 사라진다. */
  .mt-banner__slide--mo .mt-banner__img { aspect-ratio: 16 / 9; }
  .mt-banner__empty { aspect-ratio: 16 / 9; }
}

/* ===== 컨트롤 ===== */
.mt-controls { display: flex; align-items: center; gap: var(--mt-4); flex-wrap: wrap; margin: var(--mt-3) 0 var(--mt-5); }
.mt-sort, .mt-filter { border: 0; padding: 0; margin: 0; display: flex; gap: var(--mt-1); }
.mt-filter { margin-bottom: var(--mt-5); }
.mt-chip { cursor: pointer; }
.mt-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.mt-chip span {
  display: inline-block; padding: 7px 15px; border: 1px solid var(--mt-line);
  border-radius: 999px; font-size: 14px; color: var(--mt-muted);
  transition: all 150ms var(--mt-ease);
}
.mt-chip input:checked + span { background: var(--mt-fg); color: #fff; border-color: var(--mt-fg); }
.mt-chip input:focus-visible + span { outline: 2px solid var(--mt-accent); outline-offset: 2px; }

/* 와이어프레임: 원형 회색 화살표 + 둥근 테두리 박스 [달력 2026년 8월 ▾] */
.mt-month { display: flex; align-items: center; gap: var(--mt-3); }
.mt-month__nav {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; background: var(--mt-surface); color: var(--mt-fg-2);
  transition: background var(--mt-dur) var(--mt-ease);
}
.mt-month__nav:hover { background: var(--mt-surface-2); }
.mt-month__nav.is-disabled { opacity: .35; }
.mt-month__current {
  display: inline-flex; align-items: center; gap: var(--mt-2);
  height: 44px; padding: 0 var(--mt-4);
  border: 1px solid var(--mt-line-2); border-radius: var(--mt-radius);
  background: #fff;
}
.mt-month__current .mt-i { width: 18px; height: 18px; color: var(--mt-fg-2); }
.mt-month__current select {
  border: 0; padding: 0; background: none; color: var(--mt-fg);
  font-size: 16px; font-weight: 600; font-family: inherit; cursor: pointer;
}

/* ===== 그리드 ===== */
.mt-grid { display: grid; gap: var(--mt-4); }
.mt-grid--work, .mt-grid--mixed, .mt-grid--fav {
  grid-template-columns: repeat(var(--mt-cols-work), minmax(0, 1fr));
}
.mt-grid--actor { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.mt-actor-strip { grid-template-columns: repeat(var(--mt-cols-actor), minmax(0, 1fr)); }
@media (max-width: 900px) {
  .mt-actor-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ===== 품번 카드 =====
   기획안에 두 형태가 나온다.
     list  메인 — 정사각 썸네일(좌) + 품번·배우명·레이블(우) + 하트(끝). 2열 가로형.
     tile  상세 — 썸네일 없는 연회색 텍스트 박스. 4열. */

.mt-wlist {
  display: grid; gap: var(--mt-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* 넓은 화면에서 2열은 카드 오른쪽에 빈 공간이 크게 남는다 */
@media (min-width: 1360px) {
  .mt-wlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 경계 없이 늘어놓으면 목록이 떠 있는 느낌이 든다.
   흰 표면과 얇은 테두리로 한 건씩 묶어준다. */
.mt-wcard--list {
  position: relative; display: flex; align-items: center; gap: var(--mt-1);
  padding: var(--mt-3);
  background: var(--mt-card);
  border: 1px solid var(--mt-line); border-radius: var(--mt-radius);
  transition: border-color var(--mt-dur) var(--mt-ease),
              box-shadow var(--mt-dur) var(--mt-ease),
              transform var(--mt-dur) var(--mt-ease);
}
.mt-wcard--list:hover {
  border-color: var(--mt-line-2); box-shadow: var(--mt-shadow);
  transform: translateY(-1px);
}
.mt-wcard__link {
  display: flex; align-items: center; gap: var(--mt-4);
  flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none;
}
.mt-wcard__thumb { flex: none; display: block; width: clamp(88px, 13vw, 152px); }
.mt-wcard__thumb img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--mt-radius); background: var(--mt-surface-2);
  transition: box-shadow var(--mt-dur) var(--mt-ease);
}
.mt-wcard__link:hover img { box-shadow: var(--mt-shadow); }
/* 대체 이미지는 SVG 아이콘이라 cover로 늘리지 않고 여백을 둔다 */
.mt-wcard__thumb img.mt-thumb--placeholder { object-fit: contain; padding: 24%; }

/* ===== 이미지 없음 대체 — 색 배경 + 이니셜 =====
   회색 아이콘 하나로 통일하면 이미지 없는 항목끼리 구분되지 않고 화면이 비어 보인다.
   색은 이름에서 정하므로 같은 대상은 어느 화면에서나 같은 색이다(inc/markup.php). */
.mt-ph {
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 1 / 1;
  border-radius: var(--mt-radius);
  background: linear-gradient(150deg, var(--mt-ph), color-mix(in srgb, var(--mt-ph) 62%, #000));
  color: #fff; font-weight: 800; line-height: 1;
  font-size: clamp(20px, 42cqw, 64px);
  container-type: inline-size;
  user-select: none;
}
/* color-mix 미지원 브라우저 폴백 — 단색으로만 칠한다 */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .mt-ph { background: var(--mt-ph); }
}
.mt-wcard__thumb .mt-ph { font-size: 40px; }
.mt-hero__media .mt-ph { font-size: 72px; }
/* 원형으로 쓰는 자리 */
.mt-arow__avatar .mt-ph,
.mt-rank__avatar .mt-ph { border-radius: 50%; font-size: 20px; }

.mt-wcard__body { min-width: 0; display: block; }
.mt-wcard--list .mt-wcard__code { font-size: 17px; }
.mt-wcard--list .mt-wcard__actor { font-size: 15px; margin-top: var(--mt-1); }
.mt-wcard--list .mt-wcard__label { font-size: 14px; margin-top: 2px; }

.mt-tiles {
  display: grid; gap: var(--mt-3);
  grid-template-columns: repeat(var(--mt-cols-work), minmax(0, 1fr));
}
.mt-wcard--tile {
  display: block; padding: var(--mt-4) var(--mt-4) var(--mt-5);
  background: var(--mt-surface); border-radius: var(--mt-radius-s);
  color: inherit; text-decoration: none;
  transition: background var(--mt-dur) var(--mt-ease);
}
.mt-wcard--tile:hover { background: var(--mt-surface-2); }
.mt-wcard--tile .mt-wcard__code { font-size: 16px; }
.mt-wcard--tile .mt-wcard__actor { font-size: 14px; margin-top: var(--mt-2); }
.mt-wcard--tile .mt-wcard__meta { margin-top: var(--mt-4); }
.mt-wcard--tile .mt-wcard__date { margin-top: var(--mt-1); }

/* grid 변형 — 찜 목록·검색. 배우 카드와 같은 세로 3:4로 맞춘다.
   가로형(list)을 4열에 넣으면 폭이 모자라 텍스트가 잘리고 높이도 어긋난다. */
.mt-wcard--grid { position: relative; }
.mt-wcard--grid .mt-wcard__link { display: block; color: inherit; text-decoration: none; }
.mt-wcard--grid .mt-wcard__thumb {
  position: relative; display: block; width: 100%; border-radius: var(--mt-radius);
}
.mt-wcard--grid .mt-wcard__thumb img,
.mt-wcard--grid .mt-wcard__thumb .mt-ph {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--mt-radius); border: 1px solid var(--mt-line);
  background: var(--mt-surface-2);
  transition: border-color var(--mt-dur) var(--mt-ease), box-shadow var(--mt-dur) var(--mt-ease);
}
.mt-wcard--grid .mt-wcard__link:hover .mt-wcard__thumb img,
.mt-wcard--grid .mt-wcard__link:hover .mt-wcard__thumb .mt-ph {
  border-color: var(--mt-line-2); box-shadow: var(--mt-shadow);
}
.mt-wcard--grid .mt-wcard__code  { font-size: 15px; margin-top: var(--mt-3); }
.mt-wcard--grid .mt-wcard__actor { font-size: 13.5px; margin-top: 2px; }
.mt-wcard--grid .mt-wcard__label { margin-top: 1px; }

/* 종류 뱃지 — 찜 목록·검색에서 품번과 배우가 한 그리드에 섞인다.
   형태를 맞춰놨기 때문에 무엇을 찜했는지 구분할 단서가 필요하다.
   폐기한 구분 라벨(.mt-badge)과 헷갈리지 않게 이름을 나눈다. */
.mt-tag {
  position: absolute; top: var(--mt-2); left: var(--mt-2); z-index: 2;
  padding: 3px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; line-height: 1.4;
  backdrop-filter: blur(2px);
}
.mt-tag--work  { background: rgba(26,19,21,.78); color: #fff; }
.mt-tag--actor { background: rgba(225,29,72,.90); color: #fff; }

/* 공통 텍스트 — 줄바꿈 대신 말줄임. 2열·4열 모두 폭이 좁다 */
.mt-wcard__code,
.mt-wcard__actor,
.mt-wcard__label,
.mt-wcard__meta,
.mt-wcard__date {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mt-wcard__code  { font-weight: 700; letter-spacing: 0; }
.mt-wcard__actor { color: var(--mt-fg-2); }
.mt-wcard__label,
.mt-wcard__meta,
.mt-wcard__date  { font-size: 13.5px; line-height: 1.5; color: var(--mt-muted); }

@media (max-width: 640px) {
  .mt-wlist { grid-template-columns: 1fr; }
}

/* ===== 배우 카드 =====
   신규 등록 배우 스트립·찜 목록·검색 결과 공통.

   세로형 인물 카드다. 랭킹 미리보기가 바로 아래에서 '원형 아바타 가로 나열'을
   쓰므로, 여기까지 원형으로 두면 같은 섹션이 두 번 나온 것처럼 보인다.
   세로 3:4 + 라운드 사각으로 형태를 갈라 놓는다. */
.mt-acard { position: relative; }
.mt-acard__link {
  display: block; color: inherit; text-decoration: none;
  transition: transform var(--mt-dur) var(--mt-ease);
}
.mt-acard__link:hover { transform: translateY(-2px); }
.mt-acard__thumb { position: relative; display: block; border-radius: var(--mt-radius); }
.mt-acard__thumb img,
.mt-acard__thumb .mt-ph {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--mt-radius); background: var(--mt-surface-2);
  border: 1px solid var(--mt-line);
  transition: border-color var(--mt-dur) var(--mt-ease), box-shadow var(--mt-dur) var(--mt-ease);
}
.mt-acard__link:hover .mt-acard__thumb img,
.mt-acard__link:hover .mt-acard__thumb .mt-ph {
  border-color: var(--mt-line-2); box-shadow: var(--mt-shadow);
}
.mt-acard__thumb img.mt-thumb--placeholder {
  box-sizing: border-box; object-fit: contain; padding: 22%;
}
.mt-acard__name {
  display: block; font-weight: 700; font-size: 14.5px; margin-top: var(--mt-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mt-acard__sub {
  display: block; font-size: 12px; color: var(--mt-muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ===== 배우랭킹 미리보기 (메인) =====
   순위 뱃지를 아바타 위에 얹는다. 가로로 훑어보는 자리라 텍스트는 최소로 둔다. */
.mt-rstrip {
  list-style: none; margin: var(--mt-4) 0 0; padding: 0;
  display: grid; gap: var(--mt-4);
  grid-template-columns: repeat(10, minmax(0, 1fr));
}
@media (max-width: 1100px) { .mt-rstrip { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 500px)  { .mt-rstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.mt-rstrip__item a { display: block; color: inherit; text-decoration: none; text-align: center; }
.mt-rstrip__media { position: relative; display: block; }
.mt-rstrip__media img,
.mt-rstrip__media .mt-ph {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 50%; border: 1px solid var(--mt-line); background: var(--mt-surface-2);
  transition: border-color var(--mt-dur) var(--mt-ease);
}
.mt-rstrip__item a:hover .mt-rstrip__media img,
.mt-rstrip__item a:hover .mt-rstrip__media .mt-ph { border-color: var(--mt-accent); }
.mt-rstrip__media img.mt-thumb--placeholder { box-sizing: border-box; object-fit: contain; padding: 18%; }

.mt-rstrip__no {
  position: absolute; left: 0; bottom: 0;
  min-width: 24px; height: 24px; padding: 0 6px;
  display: grid; place-items: center;
  border-radius: 999px; font-size: 13px; font-weight: 700;
  background: var(--mt-fg); color: #fff; border: 2px solid var(--mt-bg);
}
.mt-rstrip__item.is-top .mt-rstrip__no { background: var(--mt-accent); }

.mt-rstrip__name {
  display: block; font-weight: 700; font-size: 13.5px; margin-top: var(--mt-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mt-rstrip__sub {
  display: block; font-size: 11.5px; color: var(--mt-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 섹션 우측 '전체 보기' */
.mt-more-link {
  margin-left: auto; display: inline-flex; align-items: center; gap: 2px;
  font-size: 13.5px; color: var(--mt-muted);
}
.mt-more-link:hover { color: var(--mt-accent-text); }
.mt-more-link .mt-i { width: 16px; height: 16px; }

/* ===== 배우 행 카드 (품번 상세 출연배우) =====
   와이어프레임: 테두리 박스에 원형 아바타 + 이름 + 데뷔·편수, 우측 셰브론. */
.mt-arows { display: flex; flex-wrap: wrap; gap: var(--mt-3); }
.mt-arow {
  display: flex; align-items: center; gap: var(--mt-3);
  min-width: 260px; padding: var(--mt-3) var(--mt-4);
  border: 1px solid var(--mt-line); border-radius: var(--mt-radius);
  background: #fff; color: inherit; text-decoration: none;
  transition: border-color var(--mt-dur) var(--mt-ease);
}
.mt-arow:hover { border-color: var(--mt-line-2); box-shadow: var(--mt-shadow); }
.mt-arow__avatar { flex: none; width: 46px; }
.mt-arow__avatar img {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  background: var(--mt-surface-2);
}
.mt-arow__avatar img.mt-thumb--placeholder { object-fit: contain; padding: 8px; }
.mt-arow__body { min-width: 0; }
.mt-arow__name { display: block; font-weight: 700; font-size: 15px; letter-spacing: 0; }
.mt-arow__sub  { display: block; font-size: 13px; color: var(--mt-muted); margin-top: 1px; }
.mt-arow__go { flex: none; margin-left: auto; display: grid; place-items: center; color: var(--mt-muted); }
.mt-arow__go .mt-i { width: 18px; height: 18px; }

/* ===== 하트 ===== */
.mt-fav {
  position: absolute; top: var(--mt-2); right: var(--mt-2); z-index: 2;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.94); box-shadow: 0 1px 3px rgba(60,32,42,.20);
  cursor: pointer; display: grid; place-items: center;
  transition: transform 150ms var(--mt-ease);
}
.mt-fav:hover { transform: scale(1.08); }

/* 찜을 눌렀을 때 — 눌렸다는 반응이 없으면 먹었는지 알기 어렵다.
   움직이는 것은 하트 아이콘 하나뿐이다.

   버튼에 링(::after)을 씌우지 않는다. 찜 버튼은 세 가지 모양으로 쓰인다.
     원형 겹침(.mt-fav)  · 줄 끝 정적 배치(.mt-fav--inline) · 상세의 직사각 버튼(.mt-fav--btn)
   링을 버튼 기준으로 깔면 직사각에서는 찌그러지고, static인 변형에서는
   버튼이 아니라 카드 전체를 기준으로 잡혀 화면을 덮는다.
   아이콘만 움직이면 어느 모양에서도 똑같이 동작한다. */
.mt-fav.is-pop .mt-i {
  animation: mt-pop 380ms var(--mt-ease);
  transform-origin: center;
}
@keyframes mt-pop {
  0%   { transform: scale(1); }
  25%  { transform: scale(.82); }   /* 살짝 눌렸다가 */
  55%  { transform: scale(1.32); }  /* 튀어오르고 */
  75%  { transform: scale(.94); }
  100% { transform: scale(1); }
}

/* 컨페티 — JS가 body에 띄운다(assets/js/main.js).
   화면 좌표(fixed)라 버튼 모양·위치 지정 방식과 무관하고, 레이아웃도 밀지 않는다. */
.mt-confetti {
  position: fixed; z-index: 200; width: 0; height: 0; pointer-events: none;
}
.mt-confetti i {
  position: absolute; left: 0; top: 0;
  /* 크기는 입자마다 조금씩 다르다 (JS가 --size로 준다) */
  width: var(--size, 4px); height: var(--size, 4px);
  margin: calc(var(--size, 4px) / -2) 0 0 calc(var(--size, 4px) / -2);
  border-radius: 1px; opacity: 0;
  animation: mt-confetti 620ms var(--mt-ease) var(--delay, 0ms) forwards;
}
@keyframes mt-confetti {
  0%   { opacity: 1; transform: translate(0, 0) scale(.4) rotate(0deg); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--rot)); }
}
.no-js .mt-fav { display: none; }

/* 랭킹처럼 가로 한 줄인 곳은 겹치지 않고 줄 끝에 놓는다 */
.mt-fav--inline {
  position: static; flex: none; margin-left: auto;
  width: 32px; height: 32px; background: transparent; box-shadow: none;
}

/* ===== 버튼 ===== */
.mt-btn, .mt-share, .mt-more {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--mt-2);
  min-height: 44px; padding: 0 20px; border-radius: var(--mt-radius-s);
  font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit;
  border: 1px solid var(--mt-line); background: #fff; color: var(--mt-fg);
  transition: all 150ms var(--mt-ease);
}
.mt-btn:hover, .mt-share:hover, .mt-more:hover { border-color: var(--mt-line-2); background: var(--mt-surface); }
.mt-more { border-radius: 999px; padding: 0 26px; font-size: 14px; }

/* 상세 상단의 작은 찜·공유 버튼 (와이어프레임) */
.mt-btn--s { min-height: 34px; padding: 0 12px; font-size: 13.5px; gap: var(--mt-1); }
.mt-btn--s .mt-i { width: 15px; height: 15px; }

/* 버튼형 찜 — 카드 위 겹침 스타일을 무효화한다 */
.mt-fav--btn {
  position: static; width: auto; height: auto; border-radius: var(--mt-radius-s);
  box-shadow: none; background: #fff; border: 1px solid var(--mt-line);
}
.mt-fav--btn:hover { transform: none; }
.mt-fav--btn.is-on {
  background: var(--mt-accent-weak); border-color: #FECDD3; color: var(--mt-accent-text);
}

/* ===== 상세 상단 블록 =====
   와이어프레임: GNB 바로 아래부터 소개 문단까지가 연회색 한 덩어리다.
   빵크럼과 '품번정보'/'배우정보' 머리글도 이 안에 들어간다. */
/* 단색 회색만 깔면 넓은 화면에서 상단이 비어 보인다.
   대표 이미지를 크게 흐려 깔고 흰 스크림을 덮어 색감만 남긴다.
   이미 내려받은 이미지를 재사용하므로 요청이 늘지 않는다.
   이미지가 없으면 has-bg가 붙지 않아 기존 회색으로 되돌아간다. */
.mt-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--mt-surface); padding-bottom: var(--mt-6);
}
.mt-hero.has-bg::before {
  content: ""; position: absolute; inset: -80px; z-index: -2;
  background-image: var(--mt-hero-img);
  background-size: cover; background-position: center 22%;
  /* 블러는 가장자리를 흐리게 잘라먹으므로 inset을 음수로 넉넉히 준다 */
  filter: blur(48px) saturate(1.4);
  transform: scale(1.08);
}
.mt-hero.has-bg::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* 본문이 검은 글씨이므로 흰 스크림을 충분히 덮어 대비를 지킨다 */
  background: linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.95) 100%);
}
.mt-crumb { color: var(--mt-muted); font-size: 13px; padding: var(--mt-4) 0 0; margin: 0; }
.mt-hero__kicker { font-size: 20px; margin: var(--mt-3) 0 var(--mt-5); }

.mt-hero__grid { display: grid; grid-template-columns: minmax(0, 200px) 1fr; gap: var(--mt-6); }
@media (max-width: 760px) { .mt-hero__grid { grid-template-columns: 1fr; } }

.mt-hero__media img {
  width: 100%; border-radius: var(--mt-radius); border: 1px solid var(--mt-line);
  aspect-ratio: 1 / 1; object-fit: cover; background: var(--mt-surface-2);
}
.mt-hero__media img.mt-thumb--placeholder { object-fit: contain; padding: 24%; }

/* 제목·부제와 찜·공유 버튼을 같은 줄 양끝에 놓는다 */
.mt-hero__head { display: flex; align-items: flex-start; gap: var(--mt-4); flex-wrap: wrap; }
/* flex 자식의 기본 min-width:auto는 내용이 길면 폭을 밀어낸다.
   긴 배우명·품번이 들어와도 컨테이너를 넘지 않게 0으로 눌러둔다. */
.mt-hero__head > * { min-width: 0; }
.mt-hero__head > .mt-actions { margin-left: auto; }
.mt-hero__title { font-size: 29px; margin: 0; letter-spacing: -0.015em; }
.mt-hero__sub { font-size: 19px; line-height: 1.45; margin: var(--mt-2) 0 0; color: var(--mt-fg-2); }
.mt-hero__sub a { text-decoration: none; font-weight: 700; color: var(--mt-fg); }
.mt-hero__sub a:hover { text-decoration: underline; }
/* '출연 │ 이름 · 이름' — 라벨과 값을 세로바로 나눈다 */
.mt-hero__sublabel { color: var(--mt-muted); font-weight: 400; }
.mt-hero__sublabel::after { content: " │"; }

/* 소개 문단 — 구분선 아래 전체 폭 */
.mt-hero__bio {
  margin-top: var(--mt-5); padding-top: var(--mt-5);
  border-top: 1px solid var(--mt-line-2);
  font-size: 15px; color: var(--mt-fg-2); max-width: 900px;
}
.mt-hero__bio p { margin: 0 0 var(--mt-2); }
.mt-hero__bio p:last-child { margin-bottom: 0; }

/* 배우 기본정보 — 라벨 : 값 형태의 불릿 목록 */
.mt-actor__meta {
  list-style: none; padding: 0; margin: var(--mt-4) 0 0; font-size: 15px; color: var(--mt-fg-2);
}
.mt-actor__meta li { position: relative; padding-left: var(--mt-3); margin-bottom: var(--mt-1); }
.mt-actor__meta li::before {
  content: "·"; position: absolute; left: 0; color: var(--mt-muted); font-weight: 700;
}

/* 스펙 — 연회색 블록 위에 얹힌 흰 박스. 3열이 세로 구분선으로 나뉜다. */
.mt-spec {
  margin: var(--mt-5) 0 0; max-width: 600px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: #fff; border-radius: var(--mt-radius);
  padding: var(--mt-4) 0;
}
.mt-spec__cell { padding: 0 var(--mt-5); border-left: 1px solid var(--mt-line); }
.mt-spec__cell:first-child { border-left: 0; }
.mt-spec dt { color: var(--mt-muted); font-size: 13px; margin: 0 0 var(--mt-3); }
.mt-spec dd {
  margin: 0; font-size: 16px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 500px) {
  .mt-spec { grid-template-columns: 1fr; gap: var(--mt-4); }
  .mt-spec__cell { border-left: 0; }
}
.mt-spec dd.is-empty { color: var(--mt-muted); }
.mt-spec__count { color: var(--mt-muted); margin-left: var(--mt-2); font-size: 13px; }

.mt-actions { display: flex; gap: var(--mt-2); flex-wrap: wrap; }
.mt-prose { margin: var(--mt-6) 0; font-size: 15px; color: var(--mt-fg-2); max-width: 760px; }

/* 기획안: 배우 사진 목록은 클릭 불가 영역. 와이어프레임은 정사각 3열. */
.mt-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mt-3); }
.mt-photos__item {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--mt-radius-s);
  pointer-events: none; user-select: none; background: var(--mt-surface-2);
}
@media (max-width: 500px) {
  .mt-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== 찜 목록 ===== */
.mt-favpage__title { font-size: 22px; margin: var(--mt-5) 0 var(--mt-1); }
.mt-favpage__sub { color: var(--mt-muted); margin: 0 0 var(--mt-5); }
.mt-favpage__foot { display: grid; place-items: center; margin-top: var(--mt-5); }
.mt-favpage__notice {
  margin-top: var(--mt-7); padding: 14px var(--mt-4); background: var(--mt-surface);
  border-radius: var(--mt-radius-s); color: var(--mt-muted); font-size: 13px;
}

/* ===== 상태 ===== */
.mt-empty { text-align: center; padding: var(--mt-8) var(--mt-4); background: var(--mt-surface); border-radius: var(--mt-radius); grid-column: 1 / -1; }
.mt-empty__msg { font-size: 17px; font-weight: 700; margin: 0 0 var(--mt-2); }
.mt-empty__sub { color: var(--mt-muted); font-size: 14px; margin: 0; }
.mt-error { color: var(--mt-accent-text); font-size: 14px; grid-column: 1 / -1; }
.mt-empty--404 { margin-top: var(--mt-6); }
.mt-empty__actions {
  display: flex; gap: var(--mt-2); justify-content: center;
  flex-wrap: wrap; margin-top: var(--mt-5);
}
.is-loading { opacity: .55; transition: opacity .15s; }

/* ===== 배우랭킹 =====
   기획안: 2열 10행 그리드. 목록 카드가 아니라 가로 한 줄이다.
   빈 순위는 서버에서 아예 렌더하지 않으므로 번호가 1부터 연속된다. */
.mt-rank {
  list-style: none; margin: var(--mt-5) 0 0; padding: 0;
  display: grid; gap: var(--mt-2) var(--mt-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mt-rank__row {
  position: relative; display: flex; align-items: center; gap: var(--mt-3);
  padding: var(--mt-2) var(--mt-3);
  border: 1px solid var(--mt-line); border-radius: var(--mt-radius);
  background: var(--mt-card);
  transition: border-color var(--mt-dur) var(--mt-ease);
}
.mt-rank__row:hover { border-color: var(--mt-line-2); }

.mt-rank__no {
  flex: none; min-width: 30px; text-align: center;
  font-size: 17px; font-weight: 700; color: var(--mt-muted);
}
.mt-rank__item.is-top .mt-rank__no { color: var(--mt-accent); font-size: 19px; }

.mt-rank__link {
  display: flex; align-items: center; gap: var(--mt-3);
  flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none;
}
.mt-rank__avatar { flex: none; display: block; width: 52px; }
.mt-rank__avatar img {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--mt-line); background: var(--mt-surface-2);
}
.mt-rank__item.is-top .mt-rank__avatar img { border-color: var(--mt-accent); }
.mt-rank__avatar img.mt-thumb--placeholder {
  box-sizing: border-box; object-fit: contain; padding: 9px;
}

/* 이름이 길어도 줄을 깨지 않고 말줄임 — 2열 폭이 좁다 */
.mt-rank__text { min-width: 0; }
.mt-rank__name,
.mt-rank__sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-rank__name { font-weight: 700; font-size: 14.5px; letter-spacing: 0; }
.mt-rank__sub { font-size: 12px; color: var(--mt-muted); margin-top: 1px; }

@media (max-width: 640px) {
  .mt-rank { grid-template-columns: 1fr; }
}

/* ===== 찜하기 툴팁 (최초 진입 1회) ===== */
/* GNB 찜 아이콘 아래에 붙는 어두운 말풍선 (와이어프레임) */
.mt-tip {
  position: absolute; top: calc(100% - 12px); right: 0; z-index: 60;
  max-width: 320px; padding: 10px 14px; white-space: nowrap;
  background: #2E2126; color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.4;
  border-radius: var(--mt-radius-s); box-shadow: 0 6px 18px rgba(60,32,42,.20);
  opacity: 1; transition: opacity .2s var(--mt-ease);
}
.mt-tip.is-out { opacity: 0; }
.mt-tip::before {
  content: ""; position: absolute; top: -4px; right: 18px;
  width: 10px; height: 10px; background: inherit; transform: rotate(45deg);
}
@media (max-width: 500px) {
  .mt-tip { white-space: normal; max-width: 200px; }
}

/* ===== 페이지네이션 (검색 결과) ===== */
.pagination { margin-top: var(--mt-6); display: flex; justify-content: center; }
.pagination .nav-links { display: flex; gap: var(--mt-1); flex-wrap: wrap; }
.pagination .page-numbers {
  display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px;
  border: 1px solid var(--mt-line); border-radius: var(--mt-radius-s); font-size: 14px;
}
.pagination .page-numbers.current { background: var(--mt-fg); color: #fff; border-color: var(--mt-fg); }

/* ===== 푸터 ===== */
/* 바깥 여백(margin-top) 대신 안쪽 여백을 쓴다.
   margin이면 경계선이 여백 아래에 그려져 본문과 선 사이가 비어 보이고,
   그 빈 구간은 푸터도 본문도 아닌 죽은 자리가 된다.
   padding으로 옮기면 선이 본문 바로 아래에 붙고 여백은 선 안쪽으로 들어간다.
   배경 장식(.mt-deco)이 main 바닥에 붙어 있어 선까지 이어져 보인다. */
.mt-footer {
  border-top: 1px solid var(--mt-line);
  padding: calc(var(--mt-8) + var(--mt-6)) 0 var(--mt-7);
}
.mt-footer__legal { color: var(--mt-muted); font-size: 12px; margin: var(--mt-3) 0 0; }

/* 배경 장식 — 본문 우측 끝 아래에 깔린다.
   z-index:-1로 글자 뒤에 놓아 배경처럼 보이게 한다. */
.mt-deco {
  position: absolute; right: 0; bottom: 0; z-index: -1;
  line-height: 0; pointer-events: none; user-select: none;
}
.mt-deco img {
  display: block; width: clamp(300px, 40vw, 620px); height: auto;
  opacity: .13;
}
@media (max-width: 700px) {
  /* 화면이 좁으면 글자와 겹치는 면적이 커진다 — 더 흐리게 */
  .mt-deco img { width: 60vw; opacity: .07; }
}


/* ============================================================
   모바일 — 500px 이하
   PC는 고정 폭 구도를 유지하고, 여기서부터 세로 구성으로 바꾼다.
   기준 하한은 340px. 그보다 좁은 기기는 대상으로 두지 않는다.
   ============================================================ */
@media (max-width: 500px) {
  :root { --mt-cols-work: 2; }

  /* 본문 좌우 여백 16 → 24px.
     헤더만 넓히면 본문이 상대적으로 더 좁아 보인다. 함께 올려 균형을 맞춘다. */
  .mt-container { padding: 0 var(--mt-5); }

  /* GNB — 한 줄에 로고·탭·검색·하트를 다 넣을 수 없다.
     두 줄로 나눈다. 로고·탭·하트가 윗줄, 검색이 아랫줄 전체 폭.

     탭을 아랫줄로 내리면 세 줄이 되어 sticky 헤더가 화면을 너무 먹는다.
     340px에서 로고(약 40) + 탭(약 169) + 하트(46) + 여백 = 279 로 한 줄에 들어간다. */
  .mt-gnb__inner {
    /* 컨테이너 여백(24px) 위에 8px을 더해 좌우 32px.
       본문보다 살짝 더 들여 헤더가 눌려 보이지 않게 한다.
       400px 기준: 가용 336 / 필요 약 254 → 여유 82px */
    height: auto; padding: var(--mt-3) var(--mt-2);
    flex-wrap: wrap; gap: var(--mt-2) var(--mt-3);
  }
  .mt-logo { font-size: 17px; order: 1; }
  .mt-logo--img img { height: 28px; }
  .mt-tabs { order: 2; gap: var(--mt-3); }
  .mt-tab { font-size: 16px; }
  .mt-favlink { order: 3; margin-left: auto; width: 38px; height: 36px; }
  .mt-favlink .mt-i { width: 19px; height: 19px; }
  .mt-search {
    order: 4; flex: 1 1 100%; max-width: none; margin-left: 0; min-width: 0;
  }
  .mt-search__input { height: 38px; }
  .mt-search__submit { height: 38px; width: 38px; }

  /* 제목 — 좁은 폭에서 두 줄로 접히지 않게 한 단계 줄인다 */
  .mt-section__title { font-size: 18px; }
  .mt-page-title,
  .mt-favpage__title { font-size: 20px; }
  .mt-hero__kicker { font-size: 17px; margin-bottom: var(--mt-4); }
  .mt-hero__title { font-size: 23px; }
  .mt-hero__sub { font-size: 16px; }

  /* 상세 상단 — 이미지가 화면을 다 먹지 않게 폭을 제한한다 */
  .mt-hero { padding-bottom: var(--mt-5); }
  .mt-hero__grid { gap: var(--mt-4); }
  .mt-hero__media { max-width: 180px; }
  .mt-hero__head { gap: var(--mt-3); }
  .mt-hero__head > .mt-actions { margin-left: 0; }

  /* 출연배우 행 카드 — min-width 260px가 340px 화면에서 넘친다 */
  .mt-arow { min-width: 0; width: 100%; }

  /* 배우 스트립 — 4열이면 카드가 80px도 안 된다 */
  .mt-actor-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* 품번 타일 — 2열에서 '레이블 | 127분'이 잘린다 */
  .mt-tiles { grid-template-columns: 1fr; }

  /* 목록 카드 — 썸네일을 줄여 글자 자리를 남긴다 */
  .mt-wcard__thumb { width: 84px; }
  .mt-wcard--list { padding: var(--mt-2); gap: 0; }
  .mt-wcard--list .mt-wcard__code { font-size: 15.5px; }
  .mt-wcard--list .mt-wcard__actor { font-size: 14px; }

  /* 월 선택 — 화살표와 박스가 한 줄에 들어가게 */
  .mt-month { gap: var(--mt-2); }
  .mt-month__current { height: 40px; padding: 0 var(--mt-3); }
  .mt-month__current select { font-size: 15px; }
  .mt-month__nav { width: 34px; height: 34px; }

  /* 배너 좌우 화살표 — 터치 기기라 항상 떠 있고, 폭이 좁아 배너를 가린다.
     스와이프로 넘길 수 있고 점 표시도 남아 있어 넘길 방법이 없어지지는 않는다.
     (hover:none 규칙이 opacity로 띄우므로 display로 눌러야 이긴다) */
  .mt-banner__nav { display: none; }

  /* 섹션 간격도 함께 줄인다 */
  .mt-section { margin-top: var(--mt-6); }
  .mt-footer { padding: var(--mt-7) 0 var(--mt-6); }
}

/* 아주 좁은 기기 — 360px 미만 */
@media (max-width: 360px) {
  /* 여기서는 여백보다 내용 폭이 우선이다 */
  .mt-container { padding: 0 var(--mt-4); }
  .mt-banner { margin-inline: calc(var(--mt-4) * -1); }
  .mt-gnb__inner { padding-inline: var(--mt-2); }
  .mt-logo { font-size: 16px; }
  .mt-tab { font-size: 15px; }
  .mt-tabs { gap: var(--mt-2); }
  .mt-actor-strip,
  .mt-rstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mt-wcard__thumb { width: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}