/* 모비닥 공개 사이트 — 레이 시안(healthfeed) 적용본
 *
 * 2026-10-15. 사장님 「몸을 읽는 시간을 레이 디자인 형식으로 바꿔라」.
 * 바탕이 된 파일은 media/healthfeed-site/healthfeed/{index,article}.html 두 장이다.
 * 거기서 토큰·타이포·컴포넌트 규격을 그대로 옮겼다.
 *
 * 2026-10-07의 「몸을 읽는 시간」 시안(종이 #f7f6f1 + 명조 + 세이지 #2d6b66)은
 * 이 판에서 물러난다. 지면이 종이에서 흰 화면으로, 제목이 명조에서 Pretendard
 * 800으로, 강조색이 세이지에서 파랑 #3182F6으로 간다. 선택자 이름은 하나도
 * 바꾸지 않았다 — 마크업은 site.js가 만들고 있어서, 이름을 건드리면 다섯 장이
 * 한꺼번에 깨진다. 그래서 「무엇을 그리는가」는 그대로 두고 「어떻게 보이는가」만
 * 갈아 끼웠다. 되돌릴 자리는 /tmp 가 아니라 깃에 있다(직전 커밋의 이 파일).
 *
 * --serif 는 이름만 남았다. 값은 Pretendard다. 변수를 지우지 않은 이유는 이
 * 변수를 쓰는 규칙이 서른 군데가 넘어서인데, 지면에 명조는 한 자도 없다.
 *
 * 레이 시안에 없던 자리(검색창, 연재 목차, 공유 단추, 사업자 정보 등)는
 * 「시안 밖」으로 적어 둔다. 그 자리는 시안의 토큰으로 맞춰 새로 그렸다.
 */

:root {
  /* 레이 시안의 중립색 — 토스 계열 그레이 스케일 */
  --paper: #fff;
  --ink: #191f28;
  --sub: #4e5968;          /* 본문 보조 — 카드 설명, 리드 */
  --muted: #4e5968;        /* 기존 이름 유지. 값은 --sub 와 같다 */
  --dim: #8b95a1;          /* 날짜·분량 같은 메타 */
  --faint: #b0b8c1;
  --line: #e5e8eb;
  --gray-bg: #f9fafb;
  --chip: #f2f4f6;
  /* 강조색. 시안은 링크·수치에 파랑, 라벨에 보라를 쓴다. */
  --green: #3182f6;        /* 기존 이름 유지. 값은 시안의 파랑이다 */
  --blue-bg: #eaf2fe;
  --violet: #5b3fd6;
  --violet-bg: #f0edfe;
  --mint-bg: #d9f5ec;      /* 본문 strong 밑줄 형광 */
  --brand: #3182f6;
  --serif: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --sans: var(--serif);
}

* { box-sizing: border-box }
/* 본문 그림이 좁은 화면에서 좌우 여백 밖까지 나가므로(모바일 풀블리드)
 * 가로 스크롤이 생기지 않게 잘라 둔다. clip은 hidden과 달리 sticky를 깨지 않는다. */
html { scroll-behavior: smooth; scroll-padding-top: 80px; overflow-x: clip }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.7 var(--sans);
  letter-spacing: -.01em;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none }
button, input { font: inherit }
button { color: inherit; cursor: pointer; background: none; border: 0 }
button, a, input { touch-action: manipulation }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
  border-radius: 6px;
}
a:hover { color: var(--green) }

/* 시안의 지면 폭은 1300px, 좌우 24px이다. */
.wrap { width: min(1300px, calc(100% - 48px)); margin-inline: auto }

.skip { position: absolute; top: -100px }
.skip:focus { top: 10px; left: 10px; background: #fff; z-index: 100; padding: 10px; border-radius: 10px }

/* ── 헤더 ───────────────────────────────────────────── */

/* 시안 GNB — 64px, 화면에 붙고, 뒤가 비친다. 밑줄 한 줄로 지면과 나눈다. */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 28px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  /* sticky 는 .wrap 의 가운데 정렬과 같이 쓰므로 폭 계산을 그대로 둔다 */
}
.logo { display: flex; align-items: center; gap: 7px; line-height: 0 }
.logo-feed { font: 700 17px/1 var(--sans); letter-spacing: -.04em; color: var(--ink) }
.logo img { height: 30px; width: auto; display: block }
/* 시안 GNB에는 브랜드 설명 줄이 없다. 64px 안에 두 줄이 안 들어간다. */
.brand-caption { display: none }
.header nav {
  display: flex;
  gap: 26px;
  margin-left: auto;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--sub);
}
.header nav a:hover { color: var(--ink) }
.search-toggle {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid var(--line);
  color: var(--sub);
  display: grid;
  place-items: center;
  padding: 0;
}
.search-toggle:hover { color: var(--ink) }

/* 시안 밖 — 현재 페이지 표시. 시안은 단일 파일이라 필요가 없었다. */
.header nav a[aria-current=page] { color: var(--ink) }

/* 햄버거는 폰에서만 선다. 데스크탑은 다섯 칸이 한 줄에 다 들어간다. */
.nav-toggle { display: none }
.nav-panel { display: none }

/* ── 공통 ───────────────────────────────────────────── */

/* 시안의 라벨은 대문자 자간이 아니라 알약이다. 다만 이 지면의 .eyebrow 는
   분류 이름(수면·혈압)으로도 쓰여서, 알약은 히어로와 글 머리에만 건다. */
.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dim);
}
h1, h2, h3, p { margin-top: 0 }
.small-meta { font-size: 14px; color: var(--dim) }
/* 시안의 섹션 간격은 152px이다. 이 지면은 섹션이 더 잦아 108px에서 멈춘다. */
.section { padding-block: 108px 0 }
.section:last-of-type { padding-bottom: 40px }
.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 26px;
  gap: 20px;
}
.section-title .eyebrow { color: var(--dim); margin-bottom: 10px }
.section-title h2 { font: 800 28.8px/1.35 var(--serif); letter-spacing: -.035em; margin-bottom: 0 }
.section-note { color: var(--dim); font-size: 15px; margin: 18px 0 0 }
.source-note { font-size: 14px; color: var(--dim); margin: 16px 0 0 }

/* 시안의 「전체 보기 →」는 밑줄 없는 파란 글자다. */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--green);
  white-space: nowrap;
}
.text-link:hover { color: #1b64da }

.illustration { display: block; width: 100%; height: 100%; object-fit: cover }
/* 머리그림은 자르지 않고 통째로 넣는다. 남는 자리는 svg 의 inline background 가
 * 같은 색으로 메운다 — art() 의 fit 참고. */
.illustration.fit { object-fit: contain }

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

.hero { text-align: left; padding: 64px 0 0; overflow: hidden }
.hero .eyebrow {
  display: inline-flex;
  font-size: 15.6px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  padding: 6px 11px;
  border-radius: 8px;
  background: var(--violet-bg);
  color: var(--violet);
}
.hero h1 {
  font: 800 clamp(32px, 4.2vw, 43.2px)/1.34 var(--serif);
  letter-spacing: -.045em;
  margin: 16px 0 14px;
}
.hero-copy { font-size: 16.8px; line-height: 1.62; color: var(--sub); margin-bottom: 0 }

/* 표지 세 권 — 지금 쓰지 않는다. 되돌릴 자리를 위해 규격만 남긴다. */
.books-stage {
  height: 458px;
  position: relative;
  margin: 33px auto 0;
  max-width: 990px;
  display: flex;
  justify-content: center;
  align-items: end;
  isolation: isolate;
}
.book {
  position: absolute;
  width: 265px;
  height: 342px;
  text-align: left;
  padding: 22px 23px;
  border-radius: 16px;
  box-shadow: 9px 18px 28px #24291d24;
  transition: transform .3s;
  overflow: hidden;
}
.book-left { background: #d6ab79; left: 15%; bottom: 18px; transform: rotate(-12deg); z-index: 1 }
.book-right { background: #c4d0d5; right: 14%; bottom: 13px; transform: rotate(11deg); z-index: 1 }
.book-center { background: #abc2a5; bottom: 7px; width: 300px; height: 403px; z-index: 2; padding: 25px 28px }
.book:hover { transform: translateY(-9px) rotate(0) }
.book-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #263c3555;
  padding-bottom: 10px;
  font-size: 9px;
  letter-spacing: 1px;
}
.book-top b { font-size: 23px; letter-spacing: -1px }
.book-logo { display: block; width: 79px; height: auto }
.book-center .book-logo { width: 89px }
.book h2 { font: 800 31px/1.32 var(--serif); letter-spacing: -.04em; margin: 15px 0 0 }
.book-center h2 { font: 800 43px/1.35 var(--serif); margin-top: 19px }
.book-art { position: absolute; left: 0; right: 0; bottom: 33px; height: 140px }
.book-center .book-art { height: 160px }
.book-bottom {
  position: absolute;
  bottom: 17px;
  left: 24px;
  right: 24px;
  font-size: 8px;
  letter-spacing: 1.1px;
  border-top: 1px solid #263c3544;
  padding-top: 8px;
  display: flex;
  justify-content: space-between;
}
.hero-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 20px 0;
  font-size: 15px;
  color: var(--dim);
}
.hero-foot a { font-size: 15px; font-weight: 600; color: var(--sub) }
.hero-foot a span { margin-left: 8px }

/* 첫 화면 — 큰 글 한 편. 2026-10-15 사장님 지시로 아카이브 격자(최근 여섯 편을
   가는 선으로 나눈 칸)를 걷어냈다. 제목 여섯 개가 같은 무게로 서 있어서 어디부터
   읽을지가 안 보였다. 지금은 레이 시안의 첫 화면과 같은 구성이다.
   잡지 이름은 큰 글 위에 가는 줄로만 남는다 — 여기서 제일 큰 글자는 기사 제목이다. */
.hero-archive { text-align: left; padding-bottom: 0 }
.hero-archive .eyebrow { margin-bottom: 14px }
.archive-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}
.hero-archive h1 { font-size: 21px; letter-spacing: -.035em; margin: 0 }

/* 첫 화면의 큰 글. 표지가 왼쪽, 글이 오른쪽이다 — 사장님이 「이런 스타일」로
   가리키신 「오늘의 한 편」 칸의 배치 그대로다(2026-10-15). */
.hero-lead { margin: 44px 0 40px; align-items: center }
.hero-lead .feature-art { border-radius: 24px }
.hero-lead .feature-copy h3 { font-size: clamp(30px, 3.4vw, 43.2px); line-height: 1.34 }
.hero-lead .feature-copy p { font-size: 17.4px; max-width: 480px }
.archive-count {
  font: 700 15px/1 var(--sans);
  letter-spacing: 0;
  color: var(--dim);
  white-space: nowrap;
}
.hero-archive .hero-foot { border-top: 0 }

/* ── 오늘의 한 편 ───────────────────────────────────── */

/* 시안 히어로와 같은 모양 — 왼쪽에 글, 오른쪽에 둥근 표지. */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center }
/* display:block 을 빠뜨리면 안 된다 — 이 자리는 <a> 라서, 격자가 풀리는
   폰 화면에서 inline 으로 돌아가 높이 0으로 접힌다(표지가 통째로 사라졌다). */
.feature-art { display: block; height: 0; padding-bottom: 62.5%; background: var(--gray-bg); overflow: hidden; border-radius: 24px; position: relative }
.feature-art > * { position: absolute; inset: 0 }
.feature-copy .eyebrow {
  display: inline-flex;
  font-size: 15.6px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  padding: 6px 11px;
  border-radius: 8px;
  background: var(--violet-bg);
  color: var(--violet);
  margin-bottom: 16px;
}
.feature-copy h3 { font: 800 36px/1.34 var(--serif); letter-spacing: -.045em; margin-bottom: 14px }
.feature-copy p { max-width: 440px; color: var(--sub); font-size: 16.8px; line-height: 1.62; margin-bottom: 22px }
.feature-copy .small-meta { margin-top: 20px; font-size: 16.8px }

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

/* 시안 카드 — 썸네일 16/10 둥근 모서리, 제목 21px/700, 설명 17.4px, 행간 84px. */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; row-gap: 72px }
.card-art {
  height: 0;
  padding-bottom: 62.5%;
  overflow: hidden;
  display: block;
  position: relative;
  border-radius: 16px;
  background: var(--gray-bg);
}
.card-art > * { position: absolute; inset: 0 }
.card-art svg { transition: transform .4s }
.card:hover .card-art svg { transform: scale(1.035) }

/* 사진 표지 — 종이 지면일 때는 따뜻한 막을 덮어 톤을 맞췄다. 지면이 흰색이 되어
   그 막은 필요 없다. 사진은 받은 그대로 둔다(2026-10-15). */
.illustration.photo { transition: transform .4s }
.card:hover .illustration.photo { transform: scale(1.035) }
.card-art, .feature-art, .reading-image, .next-art, .rec-art { position: relative }

/* 카드는 어디를 눌러도 글로 간다(2026-10-17 사장님). 그 전에는 사진·제목·화살표
   세 조각만 링크였고 관심사·요약·여백은 죽은 자리였다 — 「이어서 읽을 글」 카드는
   이미 통째로 눌리고 있어서 같은 화면에서 두 방식이 섞여 있었다. 제목 링크를
   카드 전면으로 늘려 덮는 방식이라 링크 수가 늘지 않는다(안쪽 사진·화살표는
   같은 글로 가므로 그대로 둔다). 첫 화면의 큰 글도 같다. */
.card, .feature.hero-lead { position: relative }
.card h3 a::after,
.hero-lead .feature-copy h3 a::after { content: ''; position: absolute; inset: 0 }

.card .eyebrow { margin: 24px 0 8px; color: var(--green); font-size: 13px; letter-spacing: .04em }
.card h3 { font-size: 21px; line-height: 1.45; letter-spacing: -.03em; font-weight: 700; margin-bottom: 8px }
.card .description { font-size: 17.4px; color: var(--sub); line-height: 1.6 }
.card .small-meta {
  margin-top: 10px;
  padding-top: 0;
  font-size: 16.2px;
  display: flex;
  gap: 8px;
  align-items: center;
}
/* 시안은 메타 항목 사이를 점으로 띄운다. 선을 긋던 자리를 점으로 바꾼다. */
.card .small-meta > :not(:first-child)::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--faint);
  margin-right: 8px;
  vertical-align: middle;
}
.latest { padding-top: 0 }

/* ── 선언 띠 ────────────────────────────────────────── */

/* 시안의 뉴스레터 상자 — 회색 바탕에 24px 둥근 모서리, 가운데 정렬. */
.manifesto {
  background: var(--gray-bg);
  border-radius: 24px;
  margin-top: 76px;
  padding: 78px 44px;
}
.manifesto .wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; width: auto }
.manifesto h2 { font: 800 31.2px/1.45 var(--serif); letter-spacing: -.04em; margin: 13px 0 0 }
.manifesto p { font-size: 15.8px; color: var(--sub); line-height: 1.65; margin-bottom: 0; max-width: 450px }

/* ── 관심사 ─────────────────────────────────────────── */

.topic-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--line) }
.topic {
  padding: 22px 17px 22px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-right: 25px;
  font-size: 17.4px;
  font-weight: 600;
}
.topic:hover { color: var(--green) }
.topic small { color: var(--dim); font-size: 15px; font-weight: 500 }

/* 시안 밖 — 아직 글이 없는 관심사. */
.topic-empty { color: var(--faint) }
.topic-empty:hover { color: var(--faint) }

/* ── 푸터 ───────────────────────────────────────────── */

/* 본문이 자바스크립트로 채워지는 동안 푸터가 화면 한가운데 먼저 떴다가 본문이
 * 도착하면 아래로 쿵 내려갔다. 자리를 미리 잡아 둔다(2026-10-09 사장님). */
#main { min-height: 78vh }
.footer { border-top: 1px solid var(--line); margin-top: 76px; padding: 44px 0 72px }
.footer-top { display: flex; align-items: start; gap: 65px }
.footer-top .logo img { height: 28px }
.footer-biz { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line) }
.footer-biz p { margin: 0; font-size: 14px; line-height: 1.85; color: var(--dim) }
.footer-biz b { font-weight: 700; color: var(--sub) }
.footer-biz p > :not(:first-child)::before { content: "·"; margin: 0 8px; opacity: .45 }
.footer-biz a { color: var(--dim); text-decoration: underline; text-underline-offset: 2px }
.footer-biz + .footer-bottom { margin-top: 26px }
.footer-top .logo-feed { font-size: 16px }
.footer-top p { font-size: 16.2px; color: var(--dim); line-height: 1.8 }
.footer-top p a { color: var(--green); font-weight: 600 }
.footer-top .text-link { margin-left: auto }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  margin-top: 36px;
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  color: var(--faint);
}

/* ── 칼럼 목록 ──────────────────────────────────────── */

.page-head { padding: 56px 0 30px }
.page-head h1 { font: 800 43.2px/1.34 var(--serif); letter-spacing: -.045em; margin: 15px 0 12px }
.page-head p { color: var(--sub); font-size: 16.8px; line-height: 1.62 }

/* 시안의 칩 — 알약, 켜진 칩은 먹색 바탕에 흰 글자. */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 30px }
.filter {
  border: 0;
  background: var(--chip);
  color: var(--sub);
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 17.4px;
  font-weight: 600;
}
.filter:hover { color: var(--ink) }
.filter[aria-current=page] { background: var(--ink); color: #fff }

.catalog-grid { grid-template-columns: repeat(3, 1fr); padding-bottom: 70px; row-gap: 72px }
.catalog-grid .card-art { padding-bottom: 62.5% }

.empty { padding: 70px 0 100px; text-align: center; border-top: 1px solid var(--line) }
.empty h2 { font: 800 24px var(--serif); letter-spacing: -.035em }
.empty p { color: var(--dim); font-size: 16px }

/* 시안 밖 — 101편을 한 번에 깔지 않고 나눠 싣는다. */
.more-wrap { text-align: center; padding-bottom: 80px }
.more-btn {
  background: var(--ink);
  color: #fff;
  border: 0;
  padding: 15px 34px;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
}
.more-btn:hover { background: #000; color: #fff }
.list-count { font-size: 16.2px; color: var(--dim); margin: 0 0 24px }

/* ── 본문 읽기 ──────────────────────────────────────── */

/* 시안 아티클은 글 폭이 680px이고 머리글이 왼쪽 정렬이다. 가운데 정렬을 버린다. */
.back-link { font-size: 15px; font-weight: 600; color: var(--dim); display: inline-block; padding-top: 24px }
.reading-header { max-width: 680px; margin: 48px auto 0; padding: 0 24px; text-align: left }
.reading-header h1 { font: 800 38px/1.32 var(--serif); letter-spacing: -.045em; margin: 18px 0 14px }
.reading-header .eyebrow {
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  padding: 6px 11px;
  border-radius: 8px;
  background: var(--violet-bg);
  color: var(--violet);
}
.reading-header .small-meta { margin-top: 20px; font-size: 14px }
/* 여기서는 padding-bottom 비율을 쓰지 않는다 — 비율의 기준이 자기 폭(680)이
   아니라 부모 폭(화면 전체)이라, 넓은 화면에서 표지가 세로로 늘어난다.
   표지 원본이 16:10 이므로 aspect-ratio 로 못 박는다. */
.reading-image {
  max-width: 680px;
  aspect-ratio: 16 / 10;
  margin: 36px auto 8px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--gray-bg);
}
.reading-image > * { position: absolute; inset: 0 }
/* 본문 글자 크기는 --rb 하나로 모인다. 소제목·캡션은 px 가 아니라 em 으로 적어
 * 이 값의 배수로 따라 움직인다 — 「글자 크게」가 본문만 당겨 올려 소제목과
 * 같아지던 결함을 구조적으로 막는다. 버튼은 --rb-scale 만 건드린다.
 *
 * font 한 줄 축약에 var() 를 넣지 않는다 — 축약은 파싱 시점에 값을 못 정해
 * 브라우저마다 어긋나는 자리다. font-size 만 따로 적는다. */
.reading-body { --rb-scale: 1; --rb: calc(17.5px * var(--rb-scale));
  max-width: 680px; margin: 36px auto 75px; padding: 0 24px;
  font: 400 17.5px/1.78 var(--sans); font-size: var(--rb);
  color: #20262e;
  letter-spacing: -.01em;
  /* 본문만 어절 단위 끊기(body 의 keep-all)를 푼다(2026-10-16 사장님). 포털 기사
   * 본문처럼 오른쪽 끝이 가지런히 차도록 글자 단위로 끊는다 — 「스테이지28」이
   * 「스 / 테이지28」로 갈리는 대신 줄 끝의 빈자리가 사라진다. 적용 범위는
   * .reading-body 안쪽뿐이다. 제목·카드·목록은 그대로 keep-all 을 쓴다.
   * text-wrap 도 pretty 를 뺀다 — pretty 는 끝줄 외톨이를 막으려고 앞 줄을
   * 일부러 덜 채워서, 끝을 채우려는 이 변경과 반대로 당긴다. */
  word-break: normal; text-wrap: wrap }
.reading-body p { margin: 0 0 22px }
/* 원고가 전부 h3 만 쓰고 h2 는 한 번도 안 쓴다. 그래서 실제 소제목인 h3 를
 * 올리고 h2 를 그 위로 밀었다. 시안의 소제목은 24px/800이다. */
.reading-body h2 { font: 800 1.37em/1.4 var(--serif); letter-spacing: -.035em; margin: 52px 0 18px }
.reading-body .excerpt-note {
  font: .8em/1.7 var(--sans);
  color: var(--dim);
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.reading-nav {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-top: 40px;
  font: 600 15px var(--sans);
  color: var(--sub);
}
/* 시안 밖 — 글 끝의 다음 글 안내. */
.reading-next {
  max-width: 680px;
  margin: 56px auto 0;
  padding: 0 24px;
  border-top: 1px solid var(--line);
  padding-top: 40px;
}
.reading-next > .eyebrow {
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  color: var(--dim);
}
.series-pos { color: var(--faint); letter-spacing: 0 }
.series-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.series-row .text-link { margin-top: 0 }
.series-prev {
  font-size: 15px;
  color: var(--dim);
  max-width: 54%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.series-prev b { font-weight: 700; color: var(--sub) }
.series-prev:hover b { color: var(--green) }
.next-card { display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: center }
.next-art { display: block; height: 112px; overflow: hidden; border-radius: 14px; background: var(--gray-bg) }
.next-art svg { display: block; width: 100%; height: 100% }
.next-copy b { display: block; font: 700 20.4px/1.45 var(--serif); letter-spacing: -.03em }
.next-copy small {
  display: block;
  margin-top: 8px;
  font-size: 16.2px;
  line-height: 1.6;
  color: var(--dim);
}
.reading-next .text-link { margin-top: 28px }

/* 묶음 목차와 추천 글. 목차는 묶음 안을 다 보여주고, 추천은 묶음 밖으로 나간다.
 * 둘의 역할을 섞지 않는다(2026-10-10). */
.toc-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--dim);
  margin-bottom: 12px;
}
.series-toc-wrap { margin-top: 32px }
.series-toc { list-style: none; margin: 0; padding: 0; counter-reset: toc }
.series-toc li {
  counter-increment: toc;
  display: flex;
  gap: 12px;
  padding: 10px 0;
  font-size: 16.5px;
  line-height: 1.6;
  border-top: 1px solid var(--line);
}
.series-toc li:first-child { border-top: 0 }
.series-toc li::before {
  content: counter(toc);
  flex: 0 0 20px;
  color: var(--faint);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.75;
}
.series-toc a { color: var(--ink) }
.series-toc a:hover { color: var(--green) }
.series-toc li.now { color: var(--dim) }
.series-toc li.now::before { color: var(--green) }
.series-toc li.now span { border-bottom: 1px solid var(--line) }

.reading-recs { margin-top: 32px }
.reading-recs ul { list-style: none; margin: 0; padding: 0 }
.reading-recs li + li { margin-top: 16px }
.reading-recs a {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  align-items: center;
}
.rec-art { display: block; height: 55px; overflow: hidden; border-radius: 10px; background: var(--gray-bg) }
.rec-art svg { display: block; width: 100%; height: 100% }
.rec-copy b { display: block; font: 700 16.5px/1.5 var(--serif); letter-spacing: -.03em }
.rec-copy small { display: block; margin-top: 5px; font-size: 14px; color: var(--dim) }
.reading-recs a:hover .rec-copy b { color: var(--green) }

.reading-tools { display: flex; justify-content: flex-start; gap: 8px; margin-top: 20px; max-width: 680px; margin-inline: auto; padding: 0 24px }
.reading-tools button {
  font-size: 14px;
  font-weight: 600;
  color: var(--sub);
  background: var(--chip);
  border-radius: 999px;
  padding: 7px 14px;
}
.reading-tools button:hover { color: var(--ink) }

/* 본문 끝 공유. */
.reading-share {
  max-width: 680px;
  margin: -34px auto 0;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.share-label { font-size: 14px; font-weight: 700; color: var(--dim) }
.share-btns { display: flex; gap: 8px }
.share-btn {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 11px 16px;
  color: var(--sub);
  background: var(--chip);
  border: 0;
  border-radius: 999px;
  transition: background .15s, color .15s;
}
.share-btn:hover { background: var(--blue-bg); color: var(--green) }
.share-btn.copied { background: var(--blue-bg); color: var(--green) }

/* 시안 밖 — 시안 본문은 p 와 h2 뿐이었다. 실제 원고에는 소제목 3단,
 * 목록 350줄, 도판 20장, 부제 22줄이 들어 있어 자리를 만들어 준다. */
.reading-body h3 {
  font: 800 1.2em/1.45 var(--serif);
  letter-spacing: -.035em;
  margin: 44px 0 16px;
}
.reading-body ul, .reading-body ol { margin: 0 0 22px; padding-left: 20px }
.reading-body li { margin-bottom: 10px; line-height: 1.7 }
.reading-body li::marker { color: var(--faint) }
.reading-body ul ul, .reading-body ol ol { margin: 10px 0 0 }
/* 시안의 강조는 굵게가 아니라 밑에 깔린 형광이다. 한 문단에 한 번만 쓴다. */
.reading-body strong {
  font-weight: 700;
  background: linear-gradient(transparent 62%, var(--mint-bg) 62%);
}
.reading-body em { font-style: normal; color: var(--dim) }
.reading-body a { color: var(--green); font-weight: 600; text-decoration: none }
/* 환자가 진료실에서 한 말을 옮긴 줄. 전에는 왼쪽에 연한 선 하나만 그어서
 * 본문과 거의 구별이 안 됐다 — 「인용구 같은 것들은 더 인용구같이」(2026-10-16
 * 사장님). 바탕을 깔고 글자를 한 단계 키워 한 덩어리로 떼어 놓는다. 기울임은
 * 쓰지 않는다(한글 기울임은 읽기 나쁘다). */
.reading-body blockquote {
  margin: 26px 0 28px;
  padding: 20px 22px;
  background: var(--gray-bg);
  border: 0;
  border-left: 4px solid var(--brand);
  border-radius: 4px 12px 12px 4px;
  color: var(--ink);
  font-size: 1.06em;
  line-height: 1.75;
  font-weight: 500;
}
.reading-body blockquote p { margin: 0 }
.reading-body blockquote p + p { margin-top: 10px }
@media (max-width: 520px) {
  .reading-body blockquote { padding: 16px 18px; font-size: 1.02em }
}
.reading-body hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0 }
/* 표 — marked가 GFM 표를 실제 <table>로 만드는데 규칙이 하나도 없어서 테두리
 * 없이 글자만 붙어 나왔다(2026-10-13, FD-04). 세로줄 없이 머리 아래·행 사이만
 * 긋는다. 숫자 칸은 오른쪽 정렬. */
.reading-body table {
  width: 100%;
  max-width: 560px;
  margin: 12px auto 16px;
  border-collapse: collapse;
  font: 400 16px/1.7 var(--sans);
}
.reading-body thead th {
  text-align: left;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink);
  padding: 9px 10px;
  white-space: nowrap;
}
.reading-body tbody td {
  border-bottom: 1px solid var(--line);
  padding: 10px;
}
.reading-body thead th:not(:first-child),
.reading-body tbody td:not(:first-child) { text-align: right }
/* 도판 캔버스는 700px — 폰 본문 폭에 맞춰 잡은 값이다(2026-10-08). 시안 아티클의
 * 그림은 글 폭을 꽉 채우고 모서리가 둥글다. 글 폭이 640에서 680(안쪽 632)으로
 * 늘어 상한도 같이 올린다. */
/* 세로로 긴 엑스레이·MRI가 지면을 한 화면 넘게 밀어내던 자리. 너비 대신 높이에
 * 상한을 두어 어떤 그림이든 한 화면 안에 선다. 원본은 자르지 않고 줄이기만 한다
 * (2026-10-16 사장님). */
.reading-body img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 520px;
  height: auto;
  margin: 28px auto 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}
.reading-body img + em,
.reading-body figcaption {
  display: block;
  font-size: .77em;
  line-height: 1.55;
  color: var(--dim);
  margin-bottom: 36px;
}
/* 그림 설명 줄과 출처 줄. 원고에서 빈 줄로 갈라져 들어와 본문과 같은 크기의
 * 문단이 되던 자리다 — 설명이 본문처럼 읽히고 출처는 그보다도 커 보였다
 * (2026-10-16 사장님). 설명은 본문보다 한 단계, 출처는 두 단계 작게 간다. */
.reading-body p.fig { margin: 0 }
/* 영상은 그림과 같은 폭으로 눕힌다 — 본문 가로를 넘지 않게. */
.reading-body p.fig-video video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  background: #faf7ef;
}
.reading-body p.fig-cap {
  font-size: .78em;
  line-height: 1.6;
  color: var(--dim);
  margin: 0 0 6px;
}
.reading-body p.fig-credit {
  font-size: .7em;
  line-height: 1.5;
  color: var(--faint);
  margin: 0 0 36px;
}
.reading-body p.fig-credit em { color: inherit }
.reading-deck {
  font: 400 18px/1.6 var(--sans);
  color: var(--sub);
  max-width: 680px;
  margin: 0 auto;
}
.reading-loading { color: var(--dim); font-size: 16px; text-align: center; padding: 60px 0 }

/* 전문의 칼럼의 필자 줄. 부제 아래에 이름 한 줄만 선다. 전문과목과 소개는
 * 글 끝 프로필 상자가 받는다 — 같은 것을 위아래로 두 번 쓰지 않는다
 * (2026-10-16 사장님). */
.reading-byline {
  max-width: 680px;
  margin: 14px auto 0;
}
.reading-byline b { display: block; font: 700 17px/1.45 var(--sans); color: var(--ink) }

/* 글 끝 필자 상자. 사진 · 이름 · 전문과목 · 소개 한 줄. */
.author-box {
  max-width: 680px;
  margin: 40px auto 0;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.author-face {
  flex: 0 0 76px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--gray-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.author-face img { width: 100%; height: 100%; object-fit: cover; display: block }
/* 얼굴 사진이 아니라 마크가 들어오는 자리(편집부 명의). 꽉 채워 자르면 마크가
 * 잘려서, 안쪽 여백을 두고 전체가 보이게 둔다. */
.author-face.is-mark { background: #fff; border: 1px solid var(--line) }
.author-face.is-mark img {
  object-fit: contain;
  padding: 15px;
  box-sizing: border-box;
}
.author-face span { font: 700 30px/1 var(--serif); color: var(--faint) }
.author-copy { min-width: 0 }
.author-box .author-name { font: 700 19px/1.4 var(--sans); color: var(--ink); margin: 0 }
.author-box .author-title {
  font: 400 15.5px/1.5 var(--sans);
  color: var(--dim);
  margin: 4px 0 0;
}
.author-box .author-bio {
  font: 400 15.5px/1.65 var(--sans);
  color: var(--sub);
  margin: 10px 0 0;
}
/* 「작게 구석에 써줘」(2026-10-22 사장님). 상자를 세우지 않는 명의의 자리다.
 * 본문 끝 오른쪽에 이름 한 줄만 흐리게 남긴다. */
.author-quiet {
  max-width: 680px;
  margin: 26px auto 0;
  text-align: right;
  font: 400 13.5px/1.5 var(--sans);
  color: var(--faint);
}

/* 공유 줄은 본문 끝을 당겨 붙이려고 음수 여백을 쓴다. 그 사이에 필자 상자가
 * 들어오면 상자 위로 올라타 글자가 겹친다(2026-10-16 사장님). */
.author-box + .reading-share { margin-top: 34px }
.author-quiet + .reading-share { margin-top: 30px }

/* 서버가 그려 보내는 스냅숏의 목록·링크 자리(2026-10-22). 사람이 보는 화면은
 * site.js 가 <main>을 다시 그리므로 이 모양은 자바스크립트가 돌기 전과
 * 돌지 않는 쪽에만 보인다. 깨져 보이지 않을 만큼만 입힌다. */
.snapshot-list {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 0 0 18px;
  font: 400 16px/1.8 var(--sans);
  color: var(--sub);
}
.snapshot-list a { color: var(--ink) }
.snapshot-nav {
  max-width: 680px;
  margin: 34px auto 0;
  font: 400 15.5px/1.8 var(--sans);
}
.snapshot-nav h2 { font: 700 17px/1.4 var(--sans); color: var(--ink); margin: 0 0 8px }
.snapshot-nav ul { margin: 0; padding: 0 0 0 18px }
.snapshot-nav p { margin: 10px 0 0 }

/* ── 모비닥 이야기 ──────────────────────────────────── */

.about-page { padding: 56px 0 100px }
.about-page h1 { font: 800 43.2px/1.34 var(--serif); letter-spacing: -.045em; margin: 18px 0 32px }
.about-copy { max-width: 680px; font-size: 17.5px; line-height: 1.78; color: #20262e }
.about-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  border-top: 1px solid var(--line);
  margin-top: 60px;
  padding-top: 35px;
}
.about-values h2 { font: 800 21px var(--serif); letter-spacing: -.03em }
.about-values p { font-size: 17.4px; color: var(--sub); line-height: 1.6 }

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

/* 시안 밖 — 시안에 검색이 없다. 시안의 상자 규격(흰 바탕, 둥근 모서리, 얇은 선)으로 맞춘다. */
dialog {
  background: #fff;
  border: 0;
  border-radius: 24px;
  box-shadow: 0 18px 60px rgba(12, 16, 22, .18);
  width: min(620px, calc(100% - 32px));
  padding: 30px;
  color: var(--ink);
  max-height: 85vh;
}
dialog::backdrop { background: rgba(12, 16, 22, .42); backdrop-filter: blur(5px) }
.search-top { display: flex; justify-content: space-between; font-size: 15px; font-weight: 600; color: var(--dim); margin-bottom: 24px }
dialog label { font: 800 21px var(--serif); letter-spacing: -.03em }
dialog input {
  display: block;
  width: 100%;
  margin: 20px 0 10px;
  border: 1px solid var(--line);
  background: var(--gray-bg);
  padding: 15px 18px;
  font-size: 17px;
  border-radius: 14px;
  outline: none;
}
dialog input:focus { border-color: var(--green); background: #fff }
.search-result {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  font-weight: 600;
}
.search-result small { display: block; color: var(--dim); font-size: 15px; font-weight: 400 }
#searchResults > p { font-size: 15px; color: var(--dim); padding-top: 15px }

/* ── 반응형 ─────────────────────────────────────────── */

@media (max-width: 900px) {
  .wrap { width: calc(100% - 44px) }
  .header nav { gap: 20px; font-size: 14px }
  .feature { gap: 28px }
  .feature-copy h3 { font-size: 29px }
  .article-grid, .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; row-gap: 52px }
  .card h3 { font-size: 20px }
  .topic-grid { grid-template-columns: repeat(3, 1fr) }
  .manifesto { padding: 56px 32px }
  .manifesto .wrap { gap: 30px }
  .footer-top { gap: 30px }
}

@media (max-width: 860px) {
  .hero-in, .feature { grid-template-columns: 1fr }
}

@media (max-width: 600px) {
  .wrap { width: calc(100% - 40px) }
  .header { gap: 0 }
  .logo img { height: 26px }
  .logo-feed { font-size: 15px }
  .header nav { gap: 10px; font-size: 14px }
  /* 폰에서는 칸 이름을 전부 접고 햄버거 한 칸으로 간다. 숨기면 그 지면으로 가는
   * 길이 없어지는데, 칸이 다섯이 되면서 두 칸밖에 못 남겼다(2026-10-16 사장님). */
  .header nav a { display: none }
  .nav-toggle {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--sub);
    background: none;
  }
  .nav-panel {
    display: block;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    z-index: 49;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(17, 24, 39, .07);
    padding: 4px 20px 10px;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }
  .nav-panel.open { transform: none; opacity: 1; visibility: visible }
  .nav-panel a {
    display: block;
    padding: 15px 2px;
    font: 600 16px/1.4 var(--sans);
    color: var(--sub);
    border-bottom: 1px solid var(--line);
  }
  .nav-panel a:last-child { border-bottom: 0 }
  .nav-panel a[aria-current=page] { color: var(--ink) }
  .hero { padding-top: 44px }
  .hero .eyebrow, .feature-copy .eyebrow, .reading-header .eyebrow { font-size: 13.8px; padding: 5px 10px }
  .hero h1 { font-size: 32.4px; margin: 14px 0 12px }
  .hero-copy { font-size: 17px; line-height: 1.6 }
  .hero-archive h1 { font-size: 18px; margin: 0 }
  .archive-top { padding-bottom: 14px }
  .hero-lead { margin: 30px 0 32px }
  .archive-count { font-size: 13px }
  .hero-foot { padding: 16px 0; font-size: 14px }
  .hero-foot a { font-size: 14px }
  .section { padding-block: 64px 0 }
  .section-title { margin-bottom: 22px }
  .section-title h2 { font-size: 24px }
  .text-link { font-size: 16px }
  .feature { display: block }
  .feature-art { padding-bottom: 62.5% }
  .feature-copy { padding-top: 24px }
  .feature-copy h3 { font-size: 27px; line-height: 1.38 }
  .feature-copy p { font-size: 16.5px }
  .latest { padding-top: 0 }
  /* 폰에서는 목록을 한 칸으로 접고, 썸네일을 왼쪽에 작게 붙인다. */
  .article-grid, .catalog-grid { grid-template-columns: 1fr; gap: 24px; row-gap: 24px }
  /* 썸네일은 글 덩어리 높이의 한가운데에 둔다(2026-10-16 사장님). 전에는
   * align-items: start 라 76px 짜리 그림이 제목 줄에 딱 붙고, 그 아래 요약과
   * 작은 글씨가 110~135px 까지 내려가 그림만 위쪽에 떠 보였다. 글 길이가
   * 카드마다 달라서 그림이 멈추는 자리도 카드마다 달랐다 — 목록을 훑을 때
   * 줄이 안 맞아 보이던 것이 이것이다. 가운데로 두면 글이 길든 짧든 그림의
   * 중심이 글 덩어리의 중심과 같은 자리에 온다. */
  .card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center }
  .card-art { padding-bottom: 0; height: 84px; border-radius: 12px }
  .card .eyebrow { margin: 0 0 6px; font-size: 12px }
  .card h3 { font-size: 17.6px; line-height: 1.42; margin-bottom: 6px }
  .card .description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15.5px; line-height: 1.55; margin-bottom: 4px }
  .card .small-meta { margin-top: 6px; font-size: 14px }
  .manifesto { padding: 40px 22px; border-radius: 20px; margin-top: 48px }
  .manifesto .wrap { display: block }
  .manifesto h2 { font-size: 25px; margin-bottom: 20px }
  .manifesto p { font-size: 15.5px }
  .topic-grid { grid-template-columns: repeat(2, 1fr) }
  .topic { margin-right: 15px; padding-block: 18px; font-size: 16px }
  .topic small { font-size: 14px }
  .footer { margin-top: 56px; padding-top: 35px }
  .footer-top { flex-wrap: wrap; gap: 20px }
  .footer-top p { margin-left: auto; font-size: 15px }
  .footer-top .text-link { margin-left: 0 }
  .footer-biz { margin-top: 26px; padding-top: 18px }
  .footer-biz p { font-size: 13.5px; line-height: 1.8 }
  .footer-biz p > :not(:first-child)::before { margin: 0 6px }
  .footer-bottom { display: block; line-height: 2.5; margin-top: 25px }
  .footer-bottom span { display: block; font-size: 13.5px }
  .source-note { font-size: 14px; line-height: 1.75 }
  /* 본문 그림은 글 폭을 꽉 채운다. 안쪽 24px 을 폰에서 없앴으므로(아래) 그림은
   * 더 밀어낼 것이 없다 — 표지·카드와 같은 선에 선다. 둥근 모서리는 2026-10-08에
   * 지웠던 그대로 둔다. */
  .reading-body img {
    width: auto;
    max-width: 100%;
    max-height: 480px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    border-radius: 14px;
  }
  .reading-body img + em, .reading-body figcaption { font-size: .78em }
  .reading-next { margin-top: 44px }
  .next-card { grid-template-columns: 124px 1fr; gap: 16px }
  .next-art { height: 78px }
  .next-copy b { font-size: 18px; line-height: 1.45 }
  .next-copy small { margin-top: 7px; font-size: 15px }
  .series-toc-wrap { margin-top: 26px }
  .series-toc li { font-size: 16px }
  .reading-recs { margin-top: 28px }
  .reading-recs a { grid-template-columns: 72px 1fr; gap: 13px }
  .rec-art { height: 45px }
  .rec-copy b { font-size: 15.5px }
  .page-head { padding: 40px 0 22px }
  .page-head h1 { font-size: 32.4px }
  .page-head p { font-size: 16.5px }
  .filters { gap: 6px }
  .filter { font-size: 15.5px; padding: 8px 13px }
  .catalog-grid { padding-bottom: 45px }
  /* 폰에서는 안쪽 24px 을 없앤다. 바깥 .wrap 이 이미 20px 을 비워 두는데 그 위에
   * 24px 이 겹쳐 좌우 44px 이 되고, 본문만 표지 그림보다 한 뼘 안으로 들어가 있었다
   * (2026-10-16 사장님). 글·제목·그림이 같은 선에서 시작한다. */
  .reading-header { margin: 32px auto 0; padding: 0 }
  .reading-header h1 { font-size: 28px; line-height: 1.36; margin: 14px 0 12px }
  .reading-image { border-radius: 18px; margin-top: 28px }
  /* 폰은 본문 기준값만 내린다. 소제목은 em 이라 따라 내려온다 — 여기서 px 로
   * 다시 적으면 「글자 크게」가 소제목을 두고 가는 자리가 되살아난다. */
  .reading-body { --rb: calc(16.5px * var(--rb-scale)); margin: 30px auto 55px; padding: 0; line-height: 1.8 }
  .reading-body p { margin-bottom: 20px }
  .reading-body h2 { margin: 44px 0 16px }
  .reading-body h3 { margin-top: 36px }
  /* 글 아래 블록도 같은 선을 쓴다. 한 자리만 남겨 두면 그 블록만 들여쓰기가 된다. */
  .reading-tools { margin-top: 16px; padding: 0 }
  .reading-next { padding-left: 0; padding-right: 0 }
  .author-box { padding: 20px 18px; gap: 16px }
  .author-face { flex-basis: 62px; width: 62px; height: 62px }
  .author-face span { font-size: 25px }
  .reading-share { margin-top: -24px; gap: 11px; flex-wrap: wrap; padding: 0 }
  .author-box + .reading-share { margin-top: 28px }
  .series-row { margin-top: 22px; gap: 14px }
  .series-prev { max-width: 100% }
  .about-page { padding: 40px 0 60px }
  .about-page h1 { font-size: 32.4px }
  .about-copy { font-size: 16.5px }
  .about-values { grid-template-columns: 1fr; gap: 20px; margin-top: 35px }
  .about-values h2 { font-size: 20px }
  dialog { padding: 24px; border-radius: 20px }
  .more-wrap { padding-bottom: 50px }
  .more-btn { padding: 14px 28px; font-size: 16px }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  * { transition: none !important }
}