/*
 * READMADE 히어로 모션: 띠(canvas)·계기판·박동 공통 스타일. 페이지 CSS 뒤에 로드한다.
 * 색은 사이트 토큰만 쓴다. 서브페이지 레이아웃은 .has-motion 히어로에만 적용한다.
 */

/* ───────── 띠 ───────── */
.rm-motion-band {
  --motion-gutter: 52px;
  /* 계기판 값·세로선 색: 띠 배경 대비 4.5:1 이상이 되도록 잉크와 섞는다(비율은 페이지·테마별) */
  --motion-tone: color-mix(in srgb, var(--motion-accent, var(--rm-purple)) var(--motion-mix, 70%), var(--rm-ink));
  position: relative;
  z-index: 1;
  width: 100%;
  height: var(--motion-band-h, 88px);
  overflow: hidden;
  border-top: 1px solid var(--rm-line);
  border-bottom: 1px solid var(--rm-line);
  background: color-mix(in srgb, var(--rm-paper) 55%, transparent);
  pointer-events: none;
}

.rm-motion-band canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ───────── 계기판 ───────── */
.rm-motion-readout {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: calc((100% - min(1320px, 100% - var(--motion-gutter))) / 2);
  display: grid;
  gap: 3px;
  max-width: min(260px, 32%);
  padding: 5px 0 5px 12px;
  border-left: 2px solid var(--motion-tone);
  background: color-mix(in srgb, var(--rm-paper) 78%, transparent);
  text-align: left;
  transform: translateY(-50%);
  pointer-events: none;
}

.rm-motion-readout [data-motion-readout-label] {
  overflow: hidden;
  color: var(--rm-ink-soft);
  font-family: var(--font-ui);
  font-size: round(nearest, max(var(--rm-ui-type-min, 0px), calc((12px) * var(--rm-ui-type-scale, 1.2))), 1px);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rm-motion-readout [data-motion-readout-value] {
  overflow: hidden;
  color: var(--motion-tone);
  font-family: var(--font-ui);
  font-size: round(nearest, max(var(--rm-ui-type-min, 0px), calc((clamp(17px, 1.5vw, 21px)) * var(--rm-ui-type-scale, 1.2))), 1px);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 값이 예시일 때만 data-caption="예시 화면"을 단다 */
.rm-motion-readout[data-caption]::after {
  color: var(--rm-ink-soft);
  content: attr(data-caption);
  font-family: var(--font-ui);
  font-size: round(nearest, max(var(--rm-ui-type-min, 0px), calc((11px) * var(--rm-ui-type-scale, 1.2))), 1px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

/* 미연결 같은 사실 상태는 과장하지 않는다 */
.rm-motion-readout[data-tone="muted"] [data-motion-readout-value] {
  color: var(--rm-ink-soft);
}

/* 노랑(매거진)·아쿠아(커뮤니티)는 라이트 배경에서 진하게 섞고, 다크에서는 밝은 그대로 둔다 */
.rm-magazine-page {
  --motion-mix: 45%;
}

.rm-community-page {
  --motion-mix: 55%;
}

[data-theme="dark"] .rm-magazine-page {
  --motion-mix: 100%;
}

[data-theme="dark"] .rm-community-page {
  --motion-mix: 70%;
}

/* ───────── 박동 ───────── */
[data-hero-beat] {
  display: inline-block;
  text-decoration-color: transparent;
  text-decoration-line: underline;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 0.2em;
  text-underline-offset: 0.05em;
  transform-origin: 50% 70%;
}

.rm-hero-mobile-break {
  display: none;
}

[data-hero-beat].is-beat {
  animation: rm-motion-beat 543ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes rm-motion-beat {
  0% {
    text-decoration-color: transparent;
    transform: translateY(0) scale(1);
  }

  40% {
    text-decoration-color: color-mix(in srgb, var(--rm-yellow) 85%, transparent);
    transform: translateY(-2px) scale(1.03);
  }

  100% {
    text-decoration-color: transparent;
    transform: translateY(0) scale(1);
  }
}

/* ───────── 서브페이지 공통 레이아웃(.has-motion 히어로만) ───────── */
body.rm-service-page .rm-service-hero.has-motion {
  --motion-band-h: 88px;
  --motion-accent: var(--service-accent, var(--rm-purple));
  height: auto;
  min-height: 0;
  padding: 0;
}

body.rm-service-page .rm-service-hero.has-motion .shell {
  height: auto;
  padding-block: clamp(28px, 4vw, 44px) 20px;
}

/* 일러스트는 카피 영역에 그대로 두고, 띠는 그 아래 깨끗한 종이 위에 놓는다 */
body.rm-service-page .rm-service-hero.has-motion .rm-service-hero-art {
  bottom: var(--motion-band-h);
}

/* 히어로 자체의 아래 헤어라인과 겹치지 않게 */
body.rm-service-page .rm-service-hero.has-motion .rm-motion-band {
  border-bottom: 0;
}

/* ───────── 홈 인트로: 히어로 → 띠 → READMADE IN NUMBERS ───────── */
.rm-home .rm-hero.has-motion {
  --motion-band-h: 132px;
  --motion-accent: var(--rm-pink);
  min-height: 0;
}

.rm-home .rm-hero.has-motion .rm-hero-art {
  bottom: var(--motion-band-h);
}

.rm-home .rm-hero.has-motion::before {
  bottom: calc(var(--motion-band-h) + 80px);
}

.rm-home .rm-hero.has-motion .rm-motion-band {
  z-index: 2;
}

/* 보드는 띠 아래에서 시작한다(더는 히어로 위로 올라오지 않는다) */
.rm-home .rm-hero.has-motion + .rm-home-proof-board {
  margin-top: 18px;
}

/* ───────── 카운터 박동: 띠의 산출물이 보드로 들어온다 ───────── */
.rm-home .rm-proof-counter[data-hero-beat-target] {
  position: relative;
}

.rm-home .rm-proof-counter[data-hero-beat-target]::before {
  position: absolute;
  top: -1px;
  left: 50%;
  width: 12px;
  height: 7px;
  margin-left: -6px;
  background: var(--proof-accent);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: "";
  opacity: 0;
  pointer-events: none;
}

.rm-home .rm-proof-counter[data-hero-beat-target].is-beat {
  animation: rm-counter-beat 543ms ease-out;
}

.rm-home .rm-proof-counter[data-hero-beat-target].is-beat::before {
  animation: rm-counter-mark 543ms ease-out;
}

.rm-home .rm-proof-counter[data-hero-beat-target].is-beat dd {
  animation: rm-counter-pop 543ms cubic-bezier(0.2, 0.8, 0.3, 1);
  transform-origin: left center;
}

@keyframes rm-counter-beat {
  0%,
  100% {
    border-color: color-mix(in srgb, var(--proof-accent) 18%, var(--rm-line));
  }

  35% {
    border-color: var(--proof-accent);
  }
}

@keyframes rm-counter-mark {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }

  35% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes rm-counter-pop {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  35% {
    transform: translateY(-2px) scale(1.06);
  }
}

/* ───────── 데스크톱·태블릿 홈 히어로 높이 ───────── */
@media (min-width: 701px) {
  .rm-home .rm-hero.has-motion .rm-hero-shell {
    min-height: 520px;
    padding-bottom: 44px;
  }
}

@media (min-width: 701px) and (max-width: 1040px) {
  .rm-home .rm-hero.has-motion .rm-hero-shell {
    min-height: 576px;
  }
}

/* ───────── 좁은 화면 ───────── */
@media (max-width: 900px) {
  body.rm-service-page .rm-motion-band {
    --motion-gutter: 30px;
  }
}

@media (max-width: 700px) {
  .rm-home .rm-hero-mobile-break {
    display: initial;
  }
  /* 띠 = 계기판 한 줄(24px) + 캔버스. 서브 92px(24+68), 홈 116px(24+92) */
  body.rm-service-page .rm-service-hero.has-motion {
    --motion-band-h: 92px;
  }

  .rm-home .rm-hero.has-motion {
    --motion-band-h: 116px;
  }

  .rm-motion-band {
    --motion-readout-h: 24px;
  }

  .rm-home .rm-motion-band {
    --motion-gutter: 30px;
  }

  /* 캔버스는 계기판 줄 아래 영역만 차지한다(코어가 캔버스 CSS 박스로 크기를 잰다) */
  .rm-motion-band canvas {
    top: var(--motion-readout-h);
    height: calc(100% - var(--motion-readout-h));
  }

  /* 띠와 보드가 맞닿는다(보드 상단 테두리가 구분선) */
  .rm-home .rm-hero.has-motion .rm-motion-band {
    border-bottom: 0;
  }

  .rm-home .rm-hero.has-motion + .rm-home-proof-board {
    margin-top: 0;
  }

  /* 계기판: 띠 맨 위 별도 한 줄, 라벨과 값이 가로로 나란히 왼쪽 정렬 */
  .rm-motion-readout {
    top: 4px;
    right: auto;
    left: calc((100% - min(1320px, 100% - var(--motion-gutter))) / 2);
    display: flex;
    gap: 8px;
    align-items: center;
    max-width: calc(100% - var(--motion-gutter));
    height: 16px;
    padding: 0 0 0 8px;
    background: none;
    transform: none;
  }

  .rm-motion-readout [data-motion-readout-label] {
    flex: 0 1 auto;
    min-width: 0;
    font-size: round(nearest, max(var(--rm-ui-type-min, 0px), calc((12px) * var(--rm-ui-type-scale, 1.2))), 1px);
    line-height: 16px;
  }

  .rm-motion-readout [data-motion-readout-value] {
    flex: 0 1 auto;
    min-width: 0;
    font-size: round(nearest, max(var(--rm-ui-type-min, 0px), calc((14px) * var(--rm-ui-type-scale, 1.2))), 1px);
    line-height: 16px;
  }

  .rm-motion-readout[data-caption]::after {
    display: none;
  }

  /* 서브 히어로 kicker는 한 줄로. 알약 배경이 있어 일러스트 모서리에 살짝 겹쳐도 된다.
   * 흐름에서 빼서(절대 배치) heading 폭·h1 줄바꿈에 영향을 주지 않고, h1이 그 자리만큼 내려간다. */
  body.rm-service-page .rm-service-hero.has-motion .rm-service-heading .rm-service-kicker {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: max-content;
    max-width: none;
    white-space: nowrap;
  }

  body.rm-service-page .rm-service-hero.has-motion .rm-service-heading .rm-service-kicker + h1 {
    margin-top: 37px;
  }

  /* 카운터가 한 줄씩 쌓이므로 표식은 숨기고 테두리·숫자만 반응 */
  .rm-home .rm-proof-counter[data-hero-beat-target]::before {
    display: none;
  }

  .rm-home .rm-proof-counter[data-hero-beat-target].is-beat dd {
    transform-origin: right center;
  }
}

/* 아주 좁은 화면: 한 줄 kicker가 잘리지 않게 자간만 줄인다 */
@media (max-width: 360px) {
  body.rm-service-page .rm-service-hero.has-motion .rm-service-heading .rm-service-kicker {
    letter-spacing: 0.02em;
  }
}

/* ───────── 움직임 줄이기 ───────── */
@media (prefers-reduced-motion: reduce) {
  [data-hero-beat].is-beat,
  .rm-home .rm-proof-counter[data-hero-beat-target].is-beat,
  .rm-home .rm-proof-counter[data-hero-beat-target].is-beat::before,
  .rm-home .rm-proof-counter[data-hero-beat-target].is-beat dd {
    animation: none;
  }
}