/* ============================================================
   BTY-MAG-056 · 핀셋 저널 · MIN 미니멀·클린
   네일/속눈썹 스튜디오가 격주로 내는 온라인 매거진.
   장치: 헤어라인 그리드 / sticky 목차 / 비대칭 2단 / 큰 인덱스 숫자 /
        풀블리드 위 겹침 카드 / 가로 티커
   ============================================================ */

:root {
  --brand:       #cc2e79;
  --brand-ink:   #ffffff;
  --accent:      #1a1418;
  --accent-ink:  #fdfbfc;
  --surface:     #fdfbfc;
  --surface-alt: #f6f0f3;
  --font-display: var(--font-sans);
  --r: var(--r-sm);

  /* --brand 는 --surface 위에서 4.81:1 이지만 교차 배경(--surface-alt) 위에서
     4.41:1 로 떨어진다(실측). 글자로 쓸 때는 한 단계 눌러 5.5:1 이상을 확보한다.
     (SPEC 4절 v1.3 — 색상환 H 값은 331.7° 로 동일하게 유지) */
  --brand-text:  #b32568;
}

/* ★대비 실측 결과 — tokens.css 의 --ink-3(#6e747c)는 순백(#fff) 기준 4.5:1 이다.
   이 작품의 지면은 살짝 틴트가 들어가 있어(--surface / --surface-alt) 같은 색이
   4.07~4.46:1 까지 떨어진다. 캡션·레이블에도 본문 기준을 적용해야 하므로
   한 단계 진한 --ink-2(7.1:1 이상)를 쓴다. --ink-3 는 이 작품에서 쓰지 않는다. */
body { background: var(--surface); }

/* ★SPEC 7절 v1.4 — 그리드 트랙의 기본 min-width 는 auto 라 자식의 내재 폭을 존중한다.
   표·가로 스크롤 영역을 그리드 아이템으로 두면 페이지 전체가 밀리므로
   모든 그리드 컨테이너의 트랙을 minmax(0,1fr) 로 못박고 자식에 min-width:0 을 준다. */
.feed, .art, .posts, .grid3, .sec__head, .feed__head, .art__toc, .card { grid-template-columns: minmax(0, 1fr); }
.feed > *, .art > *, .grid3 > *, .card > *, .posts > * > * { min-width: 0; }

/* 컨테이너 좌측 여백과 같은 값 — 풀블리드 구간 정렬용 */
.u-edge { padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); }

/* ── 공통 타입 ─────────────────────────────────────────────── */

.kicker, .label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--brand-text);
}
.label { color: var(--ink-2); }

.h2 { font-size: var(--fs-3xl); line-height: 1.06; letter-spacing: var(--ls-tighter); }
.h3 { font-size: var(--fs-lg); letter-spacing: var(--ls-tight); }
.body-lg { font-size: var(--fs-md); color: var(--ink-2); max-width: 46ch; }
.body-sm { font-size: var(--fs-sm); color: var(--ink-2); }

.rule { border: 0; border-top: 1px solid var(--line); }

.link-u {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--ink);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.link-u:hover { color: var(--brand-text); border-color: var(--brand-text); gap: var(--sp-3); }

/* ── 버튼 ──────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  border-radius: var(--r);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--sm { padding: var(--sp-3) var(--sp-5); font-size: var(--fs-xs); }
.btn--solid { background: var(--accent); color: var(--accent-ink); }
.btn--solid:hover { background: var(--brand); }
.btn--line { border: 1px solid var(--line-strong); color: var(--ink); }
.btn--line:hover { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }

/* ── 헤더 ─ 2줄 접힘 + 메뉴 가로 스크롤 (JS 없이 전 메뉴 노출) ─ */

.nav {
  position: sticky; top: 0;
  z-index: var(--z-header);
  background: color-mix(in oklab, var(--surface) 90%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  padding-block: var(--sp-3);
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));
}
.nav__logo {
  display: inline-flex; align-items: baseline; gap: var(--sp-2);
  margin-right: auto;
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
}
.nav__logo i {
  font-style: normal; font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest); color: var(--brand-text);
}
.nav__menu {
  display: flex; order: 3; width: 100%;
  gap: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nav__menu::-webkit-scrollbar { display: none; }
.nav__menu a {
  white-space: nowrap;
  font-size: var(--fs-sm); color: var(--ink-2);
  transition: color var(--dur) var(--ease);
}
.nav__menu a:hover { color: var(--brand-text); }
.nav__menu a[aria-current="page"] { color: var(--ink); font-weight: var(--fw-semibold); }

@media (min-width: 1024px) {
  .nav__inner { flex-wrap: nowrap; padding-block: var(--sp-4); }
  .nav__menu {
    order: 0; width: auto; padding-top: 0; border-top: 0;
    overflow: visible; gap: var(--sp-6); margin-right: var(--sp-6);
  }
}

/* ── 히어로 ─ 커버 스토리 ─────────────────────────────────────
   모바일: 사진 행을 위에 깔고(38svh) 텍스트는 그 아래 solid 면에.
           SPEC 8절 해법 B — 본문이 사진 위에 얹히지 않아 대비가 구조적으로 보장된다.
   1024+: 이미지가 왼쪽 절반을 뷰포트 끝까지 먹는 비대칭 2단.           */

/* --header-h 는 1024+ 에서 sticky 헤더가 1줄로 접혔을 때의 높이다.
   히어로의 100svh 계산에서 이 값을 먼저 빼야 CTA 가 첫 화면 밖으로 밀리지 않는다. */
.hero { --header-h: 72px; position: relative; }

/* 375px: 사진 행을 위에 깔고 텍스트는 아래 solid 면에 (SPEC 8절 해법 B).
   본문이 사진 위에 얹히지 않으므로 대비 문제가 구조적으로 발생하지 않는다.
   높이를 32svh 로 묶어 헤드라인 3줄 + 리드 + CTA 가 812px 안에 전부 들어온다. */
.hero__media { position: relative; height: clamp(200px, 32svh, 340px); }
.hero__media .img-slot { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.hero__issue {
  position: absolute; z-index: 4; left: 0; bottom: 0;
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface);
  font-size: var(--fs-xs); letter-spacing: var(--ls-widest); text-transform: uppercase;
}
.hero__issue b { font-size: var(--fs-sm); color: var(--brand-text); }

.hero__text {
  display: grid; gap: var(--sp-4);
  padding-inline: var(--gutter);
  padding-block: var(--sp-6) var(--sp-7);
  align-content: center;
}
.hero__title {
  font-size: var(--fs-4xl);
  line-height: 1.0;
  letter-spacing: var(--ls-tighter);
}
.hero__title em { font-style: normal; color: var(--brand); }
.hero__lead { font-size: var(--fs-md); color: var(--ink-2); max-width: 36ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--ink-2);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
}

@media (min-width: 1024px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 48%) minmax(0, 1fr);
    min-height: calc(100svh - var(--header-h));
  }
  .hero__media { height: auto; }
  .hero__text {
    padding-block: var(--sp-9);
    padding-left: var(--sp-8);
    padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2));
  }
  .hero__title { font-size: var(--fs-4xl); }
}

/* ── 티커 ──────────────────────────────────────────────────── */

.ticker {
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--surface-alt);
  padding-block: var(--sp-3);
}
.ticker__track { display: flex; align-items: center; gap: var(--sp-6); width: max-content; animation: tick 44s linear infinite; }
.ticker__track span {
  font-size: var(--fs-xs); letter-spacing: var(--ls-widest); text-transform: uppercase;
  color: var(--ink-2); white-space: nowrap;
}
.ticker__track i { width: 4px; height: 4px; border-radius: var(--r-full); background: var(--brand); flex: none; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ── 섹션 헤드 ─────────────────────────────────────────────── */

.sec__head { display: grid; gap: var(--sp-4); align-content: start; margin-bottom: var(--sp-7); }
.sec__head .body-lg { max-width: 40ch; }

/* ── 아티클 목록 ─ 헤어라인 그리드 ─────────────────────────── */

.feed { display: grid; gap: var(--sp-8); }
.feed__head { display: grid; gap: var(--sp-4); align-content: start; }

.posts { display: grid; border-top: 1px solid var(--line); }

.post {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.post__idx {
  font-family: var(--font-mono);
  font-size: var(--fs-xs); color: var(--ink-2);
  letter-spacing: var(--ls-wide);
}
.post__cat {
  display: inline-block;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--brand-text);
}
.post__title {
  font-size: var(--fs-lg); letter-spacing: var(--ls-tight); line-height: 1.2;
  margin-top: var(--sp-2);
  transition: color var(--dur) var(--ease);
}
.post a:hover .post__title { color: var(--brand-text); }
.post__excerpt { font-size: var(--fs-sm); color: var(--ink-2); margin-top: var(--sp-3); max-width: 56ch; }
.post__meta { font-size: var(--fs-xs); color: var(--ink-2); margin-top: var(--sp-3); }
.post__media { border-radius: var(--r); }

@media (min-width: 768px) {
  .post {
    grid-template-columns: minmax(0, 88px) minmax(0, 1fr) minmax(0, 220px);
    gap: var(--sp-6);
    align-items: start;
    padding-block: var(--sp-6);
  }
}
@media (min-width: 1024px) {
  .feed { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--sp-9); }
  .feed__head { position: sticky; top: calc(var(--sp-9) + var(--sp-2)); }
}

/* ── 카테고리 타일 ─ 헤어라인만으로 나눈 그리드 ────────────── */

.cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cat {
  display: grid; gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}
.cat:hover { background: var(--surface-alt); }
.cat b { font-size: var(--fs-md); letter-spacing: var(--ls-tight); }
.cat span { font-size: var(--fs-xs); color: var(--ink-2); }
.cat em {
  font-style: normal; font-family: var(--font-mono);
  font-size: var(--fs-2xl); font-weight: var(--fw-bold);
  line-height: 1; color: var(--brand-text);
  letter-spacing: var(--ls-tighter);
}
@media (min-width: 768px) { .cats { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ── 지표 ──────────────────────────────────────────────────── */

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat { padding-block: var(--sp-6); padding-right: var(--sp-5); border-bottom: 1px solid var(--line); }
.stat:nth-child(odd) { border-right: 1px solid var(--line); }
.stat dt { font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--sp-3); }
.stat dd { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-tighter); line-height: 1; }
.stat dd span { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-2); margin-left: 3px; }
@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat { border-bottom: 0; border-right: 1px solid var(--line); padding-inline: var(--sp-5); }
  .stat:first-child { padding-left: 0; }
  .stat:last-child { border-right: 0; }
}

/* ── 스튜디오 (풀블리드 + 겹침 카드) ───────────────────────── */

.spread { position: relative; padding-bottom: var(--section-y); }
.spread__media { border-radius: 0; aspect-ratio: 4 / 5; }
.spread__card {
  position: relative;
  margin-top: calc(var(--sp-8) * -1);
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid; gap: var(--sp-4);
}
.spread__list { display: grid; gap: var(--sp-3); margin-top: var(--sp-2); }
.spread__list li {
  display: flex; gap: var(--sp-4);
  padding-top: var(--sp-3); border-top: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--ink-2);
}
.spread__list b { color: var(--ink); min-width: 5.5em; }

@media (min-width: 768px) {
  .spread__media { aspect-ratio: 21 / 9; }
  .spread__card { margin-top: calc(var(--sp-10) * -1); margin-right: auto; max-width: 620px; padding: var(--sp-8); }
}

/* ── 인용 ──────────────────────────────────────────────────── */

.pull { background: var(--surface-alt); }
.pull blockquote { display: grid; gap: var(--sp-5); }
.pull p { font-size: var(--fs-xl); font-weight: var(--fw-medium); line-height: 1.45; letter-spacing: var(--ls-tight); }
.pull footer { font-size: var(--fs-sm); color: var(--ink-2); }
.pull footer b { color: var(--ink); }

/* ── 아티클 본문 ───────────────────────────────────────────── */

.art { display: grid; gap: var(--sp-7); }
.art__toc { display: grid; gap: var(--sp-3); align-content: start; }
.art__toc p { font-size: var(--fs-xs); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--ink-2); }
.art__toc a {
  font-size: var(--fs-sm); color: var(--ink-2);
  padding-block: var(--sp-2); border-top: 1px solid var(--line);
  transition: color var(--dur) var(--ease);
}
.art__toc a:hover { color: var(--brand-text); }

.prose { max-width: 66ch; }
.prose h2 { font-size: var(--fs-xl); letter-spacing: var(--ls-tight); margin-top: var(--sp-7); margin-bottom: var(--sp-4); }
.prose h3 { font-size: var(--fs-lg); margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
.prose p { font-size: var(--fs-md); color: var(--ink-2); margin-bottom: var(--sp-4); }
.prose p b, .prose strong { color: var(--ink); font-weight: var(--fw-semibold); }
.prose ul { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.prose ul li {
  display: flex; gap: var(--sp-3);
  font-size: var(--fs-sm); color: var(--ink-2);
}
.prose ul li::before { content: ""; flex: none; width: 6px; height: 1px; margin-top: 0.85em; background: var(--brand); }
.prose figure { margin-block: var(--sp-6); }
.prose figcaption:not(.img-slot__hint) { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-2); }
.prose .callout {
  padding: var(--sp-5); margin-block: var(--sp-6);
  border-left: 2px solid var(--brand); background: var(--surface-alt);
}
.prose .callout p { margin: 0; font-size: var(--fs-sm); }

@media (min-width: 1024px) {
  .art { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: var(--sp-9); }
  .art__toc { position: sticky; top: calc(var(--sp-9) + var(--sp-2)); }
}

.art__head { display: grid; gap: var(--sp-4); max-width: 24ch; }
.art__title { font-size: var(--fs-3xl); line-height: 1.06; letter-spacing: var(--ls-tighter); max-width: 18ch; }
.art__byline {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  padding-top: var(--sp-4); border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--ink-2);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
}

/* ── 필터 칩 (아카이브) ────────────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  color: var(--ink-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chip:hover { border-color: var(--accent); }
.chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.pager { display: flex; gap: var(--sp-2); margin-top: var(--sp-7); }
.pager a, .pager span {
  min-width: 40px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r);
  text-align: center; font-size: var(--fs-sm); color: var(--ink-2);
}
.pager .is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: var(--fw-semibold); }

/* ── 갤러리 그리드 ─────────────────────────────────────────── */

.grid3 { display: grid; gap: var(--sp-5); }
@media (min-width: 768px) { .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card { display: grid; gap: var(--sp-3); }
.card__media { border-radius: var(--r); }
.card b { font-size: var(--fs-md); letter-spacing: var(--ls-tight); }
.card span { font-size: var(--fs-sm); color: var(--ink-2); }

/* ── 방문 안내 표 ──────────────────────────────────────────── */

.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tbl th, .tbl td { text-align: left; padding: var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--line); }
.tbl th { width: 34%; color: var(--ink-2); font-weight: var(--fw-medium); }
.tbl td { color: var(--ink-2); }
.tbl tr:first-child th, .tbl tr:first-child td { border-top: 1px solid var(--line); }

/* ── 뉴스레터 CTA ──────────────────────────────────────────── */

.cta { background: var(--accent); color: var(--accent-ink); padding-block: var(--section-y); }
.cta .label { color: color-mix(in oklab, var(--accent-ink) 58%, transparent); }
.cta__title { font-size: var(--fs-3xl); line-height: 1.06; letter-spacing: var(--ls-tighter); margin-block: var(--sp-4); }
.cta__lead { font-size: var(--fs-md); color: color-mix(in oklab, var(--accent-ink) 74%, transparent); max-width: 44ch; }
.cta__form { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); max-width: 520px; }
.cta__form input {
  flex: 1 1 240px; padding: var(--sp-4) var(--sp-5);
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--accent-ink) 30%, transparent);
  border-radius: var(--r); color: var(--accent-ink); font-size: var(--fs-sm);
}
.cta__form input::placeholder { color: color-mix(in oklab, var(--accent-ink) 52%, transparent); }
.cta__form input:focus-visible { outline-color: var(--brand); border-color: var(--brand); }
.cta__form .btn--solid { background: var(--brand); color: var(--brand-ink); }
.cta__form .btn--solid:hover { background: var(--accent-ink); color: var(--accent); }
.cta__note { margin-top: var(--sp-4); font-size: var(--fs-xs); color: color-mix(in oklab, var(--accent-ink) 56%, transparent); }
.cta :focus-visible { outline-color: var(--accent-ink); }
@media (min-width: 768px) { .cta__title { font-size: var(--fs-4xl); } }

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

.foot { padding-block: var(--sp-8) var(--sp-6); border-top: 1px solid var(--line); }
.foot__inner { display: grid; gap: var(--sp-5); }
.foot__brand { display: inline-flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.foot__brand i { font-style: normal; font-size: var(--fs-xs); color: var(--brand-text); letter-spacing: var(--ls-widest); }
.foot__addr { font-style: normal; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.9; }
.foot__nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.foot__nav a { font-size: var(--fs-sm); color: var(--ink-2); }
.foot__nav a:hover { color: var(--brand-text); }
.foot__copy { grid-column: 1 / -1; padding-top: var(--sp-5); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-2); }
@media (min-width: 768px) { .foot__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-7); } }

/* ============================================================
   인터랙션 보강 — 브랜드 마크 · 아이콘 · 반응 (SPEC 4-C)
   ============================================================ */

/* ── 아이콘 ─────────────────────────────────────────────────── */
.ico { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }
.btn__arrow { font-size: 1.25em; transition: transform var(--dur) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.link-u .ico { font-size: 1.25em; }

/* ── 브랜드 마크 — 핀셋 두 팔과 그 끝에 집힌 스톤 한 알.
      브랜드명 그대로다. 글자색은 --brand-text(5.5:1)를 그대로 쓴다. */
.nav__mark { flex: none; align-self: center; color: var(--brand-text); }
.nav__mark .mark__arm {
  transform-box: view-box; transform-origin: 16px 6px;
  transition: transform var(--dur-slow) var(--ease-out);
}
.nav__mark .mark__gem {
  transform-box: view-box; transform-origin: 16px 27.6px;
  transition: transform var(--dur-slow) var(--ease-out);
}
/* 로고에 올리면 핀셋이 오므라들고 스톤이 끌려 올라온다 */
.nav__logo:hover .mark__arm--l, .foot__brand:hover .mark__arm--l { transform: rotate(2.4deg); }
.nav__logo:hover .mark__arm--r, .foot__brand:hover .mark__arm--r { transform: rotate(-2.4deg); }
.nav__logo:hover .mark__gem, .foot__brand:hover .mark__gem { transform: translateY(-2.4px) scale(.92); }
.nav__logo:active .mark__gem { animation: gemPop 480ms var(--ease-out); }
@keyframes gemPop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.28); } }

.foot__brand .nav__mark { color: var(--brand-text); }

/* ── 내비: 밑줄이 한쪽에서 그어진다 ─────────────────────────── */
.nav__menu a { position: relative; padding-block: 2px; }
.nav__menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px;
  background: var(--brand-text); transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}
.nav__menu a:hover::after,
.nav__menu a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

/* ── 티커: 올리면 멈춘다 (읽을 수 있게) ─────────────────────── */
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__track span { transition: color var(--dur) var(--ease); }
.ticker:hover .ticker__track span { color: var(--ink); }
.ticker__track i { transition: transform var(--dur) var(--ease-out); }
.ticker:hover .ticker__track i { transform: scale(1.6); }

/* ── 지표: 숫자가 올라온다 ──────────────────────────────────── */
.stat { transition: background var(--dur) var(--ease); }
.stat:hover { background: var(--surface-alt); }
.stat dd { transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease); }
.stat:hover dd { transform: translateY(-2px); color: var(--brand-text); }

/* ── 기사 목록: 사진이 당겨지고 인덱스가 밀린다 ─────────────── */
.post { position: relative; transition: background var(--dur) var(--ease); }
.post::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: var(--brand-text); transition: width var(--dur-slow) var(--ease-out);
}
.post:hover { background: color-mix(in oklab, var(--brand) 5%, transparent); }
.post:hover::after { width: 100%; }
.post__media img { transition: transform var(--dur-slow) var(--ease-out); }
.post:hover .post__media img { transform: scale(1.06); }
.post__idx { transition: color var(--dur) var(--ease), transform var(--dur) var(--ease-out); }
.post:hover .post__idx { color: var(--brand-text); transform: translateX(3px); }
.post__cat { display: inline-flex; align-items: center; gap: var(--sp-2); }
.post__cat .ico { font-size: var(--fs-sm); transition: transform var(--dur) var(--ease-out); }
.post:hover .post__cat .ico { transform: rotate(-12deg); }

/* ── 카테고리 타일: 큰 숫자가 커지고 지면이 바뀐다 ──────────── */
.cat { position: relative; overflow: hidden; }
.cat em { transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease); }
.cat:hover em { transform: translateY(-3px); color: var(--accent); }
.cat b { display: inline-flex; align-items: center; gap: var(--sp-2); transition: color var(--dur) var(--ease); }
.cat b .ico { color: var(--brand-text); font-size: var(--fs-md); }
.cat:hover b { color: var(--brand-text); }
.cat::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--brand-text); transition: width var(--dur-slow) var(--ease-out);
}
.cat:hover::after { width: 100%; }

/* ── 필터 칩 ────────────────────────────────────────────────── */
.chip { transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
                    color var(--dur) var(--ease), transform var(--dur-fast) var(--ease-out); }
.chip:hover { transform: translateY(-2px); }

/* ── 스튜디오 겹침 카드 ─────────────────────────────────────── */
.spread__media img { transition: transform 1.1s var(--ease-out); }
.spread:hover .spread__media img { transform: scale(1.04); }
.spread__list li { transition: color var(--dur) var(--ease), transform var(--dur) var(--ease-out); }
.spread__list li:hover { transform: translateX(5px); color: var(--ink); }

/* ── 메뉴 카드 ──────────────────────────────────────────────── */
.card { transition: transform var(--dur) var(--ease-out); }
.card:hover { transform: translateY(-4px); }
.card__media img { transition: transform var(--dur-slow) var(--ease-out); }
.card:hover .card__media img { transform: scale(1.05); }
.card b { display: inline-flex; align-items: center; gap: var(--sp-3); transition: color var(--dur) var(--ease); }
.card b .ico { color: var(--brand-text); font-size: var(--fs-md); }
.card:hover b { color: var(--brand-text); }

/* ── 방문 안내 표 ───────────────────────────────────────────── */
.tbl th { white-space: nowrap; }
.tbl th .ico { color: var(--brand-text); font-size: var(--fs-sm); margin-right: var(--sp-2); }
.tbl tr { transition: background var(--dur) var(--ease); }
.tbl tbody tr:hover { background: color-mix(in oklab, var(--brand) 6%, transparent); }

/* ── 히어로 메타 ────────────────────────────────────────────── */
.hero__meta span:first-child { display: inline-flex; align-items: center; gap: var(--sp-2); }
.hero__meta .ico { color: var(--brand-text); }
.hero__issue { transition: color var(--dur) var(--ease); }
.hero__media:hover .hero__issue { color: var(--brand-text); }

/* ── 구독 폼 ────────────────────────────────────────────────── */
.cta__form input { transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.cta__form input:hover { border-color: var(--brand-text); }

/* ── 인용 ───────────────────────────────────────────────────── */
.pull blockquote p { transition: color var(--dur) var(--ease); }

/* ── 푸터 ───────────────────────────────────────────────────── */
.foot__addr { display: grid; gap: var(--sp-3); line-height: 1.5; }
.foot__addr span { display: flex; align-items: center; gap: var(--sp-3); transition: color var(--dur) var(--ease); }
.foot__addr .ico { color: var(--brand-text); font-size: var(--fs-md); }
.foot__addr span:hover { color: var(--ink); }
.foot__nav a { position: relative; transition: color var(--dur) var(--ease); }
.foot__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}
.foot__nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ── 형제 요소 계단식 지연 ──────────────────────────────────── */
html.js .stats .reveal:nth-child(2)  { transition-delay: 60ms; }
html.js .stats .reveal:nth-child(3)  { transition-delay: 120ms; }
html.js .stats .reveal:nth-child(4)  { transition-delay: 180ms; }
html.js .posts .reveal:nth-child(2)  { transition-delay: 80ms; }
html.js .posts .reveal:nth-child(3)  { transition-delay: 160ms; }
html.js .posts .reveal:nth-child(4)  { transition-delay: 240ms; }
html.js .posts .reveal:nth-child(5)  { transition-delay: 320ms; }
html.js .grid3 .reveal:nth-child(2)  { transition-delay: 90ms; }
html.js .grid3 .reveal:nth-child(3)  { transition-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { transition-delay: 0s !important; }
  .nav__logo:hover .mark__arm--l, .nav__logo:hover .mark__arm--r, .nav__logo:hover .mark__gem,
  .foot__brand:hover .mark__arm--l, .foot__brand:hover .mark__arm--r, .foot__brand:hover .mark__gem,
  .stat:hover dd, .post:hover .post__media img, .post:hover .post__idx, .post:hover .post__cat .ico,
  .cat:hover em, .chip:hover, .spread:hover .spread__media img, .spread__list li:hover,
  .card:hover, .card:hover .card__media img, .ticker:hover .ticker__track i,
  .btn:hover .btn__arrow { transform: none; }
}

/* ── 발행호 배지가 흘러들어온다 ─────────────────────────────── */
.hero__issue { animation: issueIn var(--dur-slow) var(--ease-out) both; }
@keyframes issueIn { from { transform: translateY(9px); } to { transform: none; } }

/* ── 활성 필터 칩에 밑줄이 그어진다 ─────────────────────────── */
.chip.is-on { position: relative; }
.chip.is-on::after {
  content: ""; position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: 6px; height: 1px;
  background: currentColor; transform-origin: left;
  animation: chipRule 640ms var(--ease-out) both;
}
@keyframes chipRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .hero__issue { animation: none; }
}


/* ===== 획일성 제거 — MIN 무드 어휘 =====================================
   160작품이 레퍼런스의 밑줄 draw·카드 리프트·대문자 킥커를 그대로 복사해
   같은 사이트 리스킨으로 보였다. 반응 방식을 무드에 맞게 갈아끼운다.
   ==================================================================== */
/* 세로 카덴스를 작품마다 다르게 — 전부 같은 --section-y 를 쓰는 게 구조적 tell 이었다 */
:root { --section-y: clamp(3.44rem, 2.1366rem + 5.5737vw, 6.87rem); }

/* 미니멀 — 밑줄을 없앤다. 여백과 색만으로 반응한다. */
.nav__menu a::after, .foot__nav a::after { display: none !important; }
.foot__nav a, .nav__menu a:hover { color: var(--ink); }
.foot__nav a, .nav__menu a { position: relative; }
.foot__nav a::before, .nav__menu a::before {
  content: ""; position: absolute; left: -10px; top: 50%;
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: 0;
  transform: translateY(-50%);
  transition: opacity var(--dur) var(--ease);
}
.foot__nav a:hover::before, .nav__menu a:hover::before { opacity: 1; }
.stat:hover dd, .cat:hover em, .chip:hover, .card:hover { transform: none; }
.stat:hover dd, .cat:hover em, .chip:hover, .card:hover { box-shadow: none; }
.kicker, .label { text-transform: none; letter-spacing: var(--ls-snug); font-weight: var(--fw-medium); }

/* ===== 티커 걷어내기 — MIN 무드에 마퀴는 어울리지 않는다 ==========
   내용(실적·목록·인증)은 실제 정보라 유지하고 장치만 바꾼다.
   ================================================================ */
/* 티커 → 얇은 구분선으로 나눈 한 줄. 흐르지 않는다. */
.ticker { overflow: visible; }
.ticker__track { animation: none !important; width: auto; flex-wrap: wrap; gap: 0; }
.ticker__track > span { padding-inline: var(--sp-5); border-left: 1px solid var(--line); }
.ticker__track > span:first-child { padding-left: 0; border-left: 0; }
.ticker__track > i { display: none; }

/* webit-touch */
@media (max-width: 767px) {
  .nav__inner { flex-wrap: wrap; overflow: visible; }
  .hero__actions, .hero__acts { flex-wrap: wrap; }
}
html.tier-premium .hero__title em, html.tier-premium h1 em { font-style: italic; }
html.tier-premium .btn--solid { letter-spacing: .06em; }