/* =========================================================
   입고관리 서비스 안내 (PILLDOC-2451)
   Views/ReceivingManagement/About.cshtml · js/pd/page-receiving-about.js

   톤은 복약안내 서비스 안내를 따릅니다 — 밝은 바탕 위에 실물을 띄우고,
   제목은 크게, 칸은 테두리로 나눕니다. 짜임(히어로 → 사용 흐름 장면 →
   알아 둘 것 → 시작하기 → 질문 → 문의)은 PhAI 소개 페이지 지침을 따랐습니다.

   클래스 이름에 pd- 를 쓰지 않습니다. pd- 는 시스템 것입니다(page-receiving-plan.css 와 같은 규칙).
   rma-app 아래는 필독 에이전트2 화면(react-app/src/Theme/pd-app.css)을 옮겨 그린 것이라
   값도 그쪽을 따릅니다. 앱 화면이 바뀌면 여기도 맞춰야 합니다.
   ========================================================= */

.page-rma {
  /* 장면 화면의 높이. 패널이 바뀔 때 틀이 출렁이지 않게 못박습니다. */
  --rma-screen-h: 410px;
  /* 에이전트 화면 글자 크기. 앱(pd-app.css)의 본문·작은 글자와 같습니다. */
  --rma-fs: 13px;
  --rma-fs-sm: 12px;
  /* 장면 움직임 곡선 — 튀어 오르는 것(말풍선·토스트)과 빨리 멈추는 것(포인터) */
  --rma-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --rma-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--pd-text);
}

/* style.css 의 `section { padding: 80px 0 }` 이 화면 안까지 닿습니다.
   여백은 섹션마다 아래에서 다시 정합니다. :where 로 감싸 이 초기화가 섹션별
   여백(.rma-hero 등)을 이기지 않게 합니다. */
:where(.page-rma) section { padding: 0; }
:where(.page-rma) p { margin: 0; }
:where(.page-rma) ul,
:where(.page-rma) ol { margin: 0; padding: 0; list-style: none; }

/* ---------------------------------------------------------
   공통 머리
   --------------------------------------------------------- */
.rma-head {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-3);
  max-width: 760px;
  margin-bottom: var(--pd-space-12);
}
.rma-head__title {
  margin: 0;
  font-size: 36px;
  font-weight: var(--pd-weight-bold);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--pd-text);
  word-break: keep-all;
  text-wrap: balance;
}
.rma-head__desc {
  font-size: 17px;
  line-height: 1.7;
  color: var(--pd-text-secondary);
  word-break: keep-all;
}
.rma-head__note {
  font-size: 13px;
  color: var(--pd-text-muted);
}

/* ---------------------------------------------------------
   히어로
   --------------------------------------------------------- */
.rma-hero {
  /* 헤더 바로 밑이 답답하지 않게 위를 넉넉히 둡니다 */
  padding-block: 88px 120px;
  overflow-x: clip;
}
.rma-hero__stage {
  position: relative;
  /* 아래 여백은 창 밖으로 걸쳐 나간 카드의 자리입니다 */
  padding-bottom: 50px;
}
/* 창 위에 가지런히 놓인 약 — 지금은 마크업에서 감춰 두었습니다(다시 쓸 때를 위해 남김).
   흰 바탕 사진이라 곱하기로 섞어 페이지 바탕(ink-50)에 녹입니다. */
.rma-hero__deco {
  display: block;
  width: 960px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 40px;
  mix-blend-mode: multiply;
  /* 사진 가장자리가 사각형으로 비치지 않게 네 변을 흐립니다 */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 3%, #000 80%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 3%, #000 80%, transparent);
  mask-composite: intersect;
  pointer-events: none;
}
/* 에이전트 창과 같은 크기의 판. 화면 가운데에 놓이고, 카드와 장식은 이 판의
   모서리에서 잰 거리로 둡니다 — 창이 기준이라 창이 늘 정확히 가운데입니다. */
.rma-hero__rig {
  position: relative;
  width: 860px;
  max-width: 100%;
  height: 420px;
  margin-inline: auto;
}
.rma-win {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  border: 1px solid var(--pd-border);
  border-radius: 12px;
  background: var(--pd-white);
  box-shadow: 0 30px 60px rgba(19, 28, 45, 0.12), 0 8px 18px rgba(19, 28, 45, 0.06);
  overflow: hidden;
}
.rma-win__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* 왼쪽 레일 — SideBar.cs: 80px, 레일 ink-50, 활성 항목 흰 바탕 + 민트 3px 표시선 */
.rma-rail {
  display: flex;
  flex-direction: column;
  padding-top: var(--pd-space-3);
  background: var(--pd-ink-50);
  border-right: 1px solid var(--pd-border);
}
.rma-rail__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-block: 12px;
  font-size: 11.5px;
  font-weight: var(--pd-weight-bold);
  color: var(--pd-ink-500);
}
.rma-rail__item .pd-icon {
  width: 22px;
  height: 22px;
  stroke-width: 1.75;
}
.rma-rail__item.is-active {
  background: var(--pd-white);
  color: var(--pd-mint-600);
}
.rma-rail__item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--pd-mint-400);
}

/* 떠 있는 카드 셋 — 복약안내 안내문 세 장처럼 창 둘레에 겹쳐 놓습니다 */
.rma-float {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--pd-border);
  border-radius: 10px;
  background: var(--pd-white);
  box-shadow: 0 18px 40px rgba(19, 28, 45, 0.14), 0 4px 10px rgba(19, 28, 45, 0.06);
}
.rma-float__label {
  font-size: 11.5px;
  font-weight: var(--pd-weight-semibold);
  color: var(--pd-text-muted);
}
.rma-float__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: var(--pd-weight-bold);
  color: var(--pd-text);
  white-space: nowrap;
}
.rma-float__row {
  display: flex;
  justify-content: space-between;
  gap: var(--pd-space-4);
  font-size: var(--rma-fs-sm);
  color: var(--pd-text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rma-float__row b { color: var(--pd-text); }
.rma-float__row--danger {
  color: var(--pd-danger);
  font-weight: var(--pd-weight-semibold);
}
.rma-float__status {
  display: flex;
  justify-content: space-between;
  gap: var(--pd-space-5);
  font-size: var(--rma-fs-sm);
  color: var(--pd-text-secondary);
  white-space: nowrap;
}
/* 창 모서리 기준 — 약가(오른쪽 위)·청구(왼쪽 아래)·회수(오른쪽 아래)가 창 귀에
   걸칩니다. 위쪽 사진과는 겹치지 않습니다. 창 안에서는 표 내용이 없는 자리(탭 줄 오른쪽, 레일, 표 아래 빈칸)에만 겹칩니다. */
.rma-float--price  { top: -46px; right: -150px; width: 250px; }
.rma-float--recall { top: 304px; right: -150px; }
.rma-float--claim  { top: 262px; left: -150px; width: 230px; }

/* 들어올 때 — 글이 먼저 올라오고, 창이 떠오른 뒤 카드가 양옆에서 차례로 붙습니다
   (복약안내 서비스 안내의 fade-left/right 와 같은 1초 곡선).
   첫 화면이라 스크립트 없이 CSS 만으로 돕니다. transform 대신 translate 를 써서
   다른 변형과 부딪히지 않게 합니다. */
@media (prefers-reduced-motion: no-preference) {
  .rma-hero__copy > * { animation: rma-in-up 900ms var(--rma-ease-out) both; }
  .rma-hero__copy > :nth-child(1) { animation-delay: 0ms; }
  .rma-hero__copy > :nth-child(2) { animation-delay: 100ms; }
  .rma-hero__copy > :nth-child(3) { animation-delay: 200ms; }
  .rma-hero__copy > :nth-child(4) { animation-delay: 300ms; }
  .rma-hero__deco     { animation: rma-in-down 1000ms var(--rma-ease-out) 400ms both; }
  .rma-win            { animation: rma-in-up 1000ms var(--rma-ease-out) 400ms both; }
  .rma-float--price   { animation: rma-in-left 1000ms var(--rma-ease-out) 750ms both; }
  .rma-float--recall  { animation: rma-in-left 1000ms var(--rma-ease-out) 950ms both; }
  .rma-float--claim   { animation: rma-in-right 1000ms var(--rma-ease-out) 850ms both; }
}
@keyframes rma-in-up    { from { opacity: 0; translate: 0 40px; } }
@keyframes rma-in-down  { from { opacity: 0; translate: 0 -24px; } }
@keyframes rma-in-left  { from { opacity: 0; translate: 60px 0; } }
@keyframes rma-in-right { from { opacity: 0; translate: -60px 0; } }

/* 스크롤 등장 — 뿌리에 rma-reveal-on 이 붙을 때만(스크립트가 돌고 움직임 줄이기가 아닐 때) 감춥니다 */
.rma-reveal-on [data-rma-reveal] {
  opacity: 0;
  translate: 0 40px;
  transition: opacity 1000ms var(--rma-ease-out), translate 1000ms var(--rma-ease-out);
  transition-delay: var(--rma-delay, 0ms);
}
.rma-reveal-on [data-rma-reveal="left"]  { translate: -60px 0; }
.rma-reveal-on [data-rma-reveal="right"] { translate: 60px 0; }
.rma-reveal-on [data-rma-reveal].is-revealed { opacity: 1; translate: none; }

.rma-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pd-space-4);
  /* 오른쪽 위 약가 카드가 창 위로 46px 걸쳐 나오므로 그보다 넉넉히 띄웁니다 */
  margin-bottom: 96px;
  text-align: center;
}
.rma-hero__eyebrow {
  font-size: 15px;
  font-weight: var(--pd-weight-semibold);
  color: var(--pd-mint-600);
}
.rma-hero__title {
  margin: 0;
  font-size: 46px;
  font-weight: var(--pd-weight-bold);
  line-height: 1.28;
  letter-spacing: -0.03em;
  color: var(--pd-text);
  word-break: keep-all;
}
.rma-hero__desc {
  max-width: 620px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--pd-text-secondary);
  word-break: keep-all;
}
.rma-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pd-space-2);
  margin-top: var(--pd-space-3);
}
.rma-hero__note {
  font-size: 13px;
  color: var(--pd-text-muted);
}

/* ---------------------------------------------------------
   사용 흐름
   --------------------------------------------------------- */
.rma-flow {
  padding-block: 120px;
  background: var(--pd-white);
  /* 장면 뒤의 빛이 화면 밖으로 번집니다. 좁은 화면에서 가로 스크롤이 생기지 않게 자릅니다. */
  overflow-x: clip;
  /* 히어로의 [쓰는 모습 보기]로 왔을 때 제목이 헤더 밑에 숨지 않게 */
  scroll-margin-top: var(--pd-gnb-h, 72px);
}
.rma-flow .rma-head { margin-bottom: 88px; }

.rma-step {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: 72px;
  align-items: center;
}
.rma-step + .rma-step { margin-top: 140px; }
.rma-step--rev { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
.rma-step--rev .rma-step__text { order: 2; }
.rma-step--rev .rma-step__visual { order: 1; }

.rma-step__text {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-4);
  min-width: 0;
}
.rma-step__num {
  font-size: 15px;
  font-weight: var(--pd-weight-bold);
  color: var(--pd-mint-600);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.rma-step__title {
  margin: 0;
  font-size: 28px;
  font-weight: var(--pd-weight-bold);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--pd-text);
  word-break: keep-all;
}
.rma-step__desc {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--pd-text-secondary);
  word-break: keep-all;
}

.rma-checks {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-3);
  margin-top: var(--pd-space-2);
  padding-top: var(--pd-space-5);
  border-top: 1px solid var(--pd-border);
}
.rma-checks li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--pd-text-secondary);
  word-break: keep-all;
}
/* 체크 표시. 글자색이 아니라 모양으로도 목록임을 알립니다. */
.rma-checks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--pd-mint-500);
  border-bottom: 2px solid var(--pd-mint-500);
  transform: rotate(-45deg);
}
.rma-checks b {
  margin-right: 6px;
  color: var(--pd-text);
  font-weight: var(--pd-weight-semibold);
}

.rma-step__visual {
  position: relative;
  min-width: 0;
}
/* 상자 대신 뒤에서 번지는 빛으로 깊이를 줍니다(PhAI 지침). 밝은 바탕이라 민트와 연한 청색 두 겹. */
.rma-step__visual::before {
  content: "";
  position: absolute;
  inset: -12% -8%;
  z-index: 0;
  background:
    radial-gradient(42% 48% at 30% 38%, rgba(57, 191, 196, 0.30), transparent 70%),
    radial-gradient(40% 46% at 72% 66%, rgba(108, 160, 230, 0.22), transparent 70%);
  filter: blur(24px);
  pointer-events: none;
}

/* ---------------------------------------------------------
   장면
   --------------------------------------------------------- */
.rma-scene {
  position: relative;
  z-index: 1;
}
.rma-scene__frame {
  position: relative;
  width: 100%;
  border: 1px solid var(--pd-border);
  border-radius: 12px;
  background: var(--pd-white);
  box-shadow: 0 24px 56px rgba(19, 28, 45, 0.12), 0 6px 14px rgba(19, 28, 45, 0.05);
  overflow: hidden;
  transition: opacity 450ms ease, transform 450ms ease, filter 300ms ease;
}
.rma-scene__frame:focus { outline: none; }
/* 다시 볼 때 마지막 화면을 잠깐 걷었다가 처음부터 — 되감기가 툭 끊겨 보이지 않게 */
.rma-scene.is-resetting .rma-scene__frame {
  opacity: 0;
  transform: translateY(6px);
}
/* 장면마다 행 수가 달라 높이를 따로 둡니다. 가져오기는 완료 안내가 마지막 줄을 가리지 않을 만큼. */
.rma-scene[data-rma-scene="list"]  { --rma-screen-h: 376px; }
.rma-scene[data-rma-scene="watch"] { --rma-screen-h: 300px; }
.rma-scene[data-rma-scene="claim"] { --rma-screen-h: 316px; }
.rma-screen {
  height: var(--rma-screen-h);
  display: flex;
  flex-direction: column;
}

/* 다시 보기 — 끝난 장면 전체를 덮는 단추. 마우스가 있으면 올렸을 때 장면이 어두워지고
   가운데 알약이 뜹니다. 터치 화면은 전체를 막고 오른쪽 위 작은 단추만 받습니다. */
.rma-replay {
  position: absolute;
  inset: 0;
  z-index: 20;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.rma-replay[hidden] { display: none; }
.rma-replay:focus-visible { outline: none; }
.rma-replay__pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--pd-radius-pill);
  background: var(--pd-white);
  box-shadow: var(--pd-shadow-lg);
  font-weight: var(--pd-weight-semibold);
  color: var(--pd-ink-900);
  white-space: nowrap;
  pointer-events: none;
}
.rma-replay__pill .pd-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rma-replay__pill--center {
  left: 50%;
  top: 50%;
  padding: 12px 20px;
  font-size: 14px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.95);
  transition: opacity 300ms ease, transform 300ms ease;
}
/* 터치용 — 장면 아래쪽엔 완료 안내가 뜨므로, 비어 있는 탭 줄 오른쪽 위에 둡니다 */
.rma-replay__pill--corner {
  top: 6px;
  right: 8px;
  height: 32px;
  padding-inline: 14px;
  font-size: 12.5px;
  display: none;
  animation: rma-fade-up 400ms ease-out both;
}
.rma-replay__pill--corner .pd-icon { width: 14px; height: 14px; }
.rma-replay:focus-visible .rma-replay__pill--center {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  box-shadow: var(--pd-focus-ring), var(--pd-shadow-lg);
}
.rma-scene:has(.rma-replay:focus-visible) .rma-scene__frame { filter: brightness(0.55); }
@media (hover: hover) {
  .rma-scene.is-done:hover .rma-scene__frame { filter: brightness(0.55); }
  .rma-scene.is-done:hover .rma-replay__pill--center { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (hover: none) {
  .rma-replay { pointer-events: none; }
  .rma-replay__pill--center { display: none; }
  .rma-replay__pill--corner { display: inline-flex; pointer-events: auto; }
}

/* 포인터 — 움직이는 동안만 보입니다. 이동 단계와 누르는 단계를 나눠, 무엇을 눌렀는지 보이게 합니다. */
.rma-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 22px;
  height: 22px;
  display: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2.5l15 9.2-6.6 1.5 3.9 7.3-2.6 1.4-3.9-7.3L5.2 19z' fill='%23fff' stroke='%231F2328' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  filter: drop-shadow(0 2px 3px rgba(19, 28, 45, 0.25));
  transform: translate(var(--cx, 90%), var(--cy, 110%));
  transition: transform 800ms var(--rma-ease-out);
  pointer-events: none;
}
.rma-scene.is-live .rma-cursor { display: block; }
/* 끝나면 포인터를 거둬 마지막 화면을 깨끗하게 둡니다 */
.rma-scene.is-done .rma-cursor { opacity: 0; transition: transform 800ms var(--rma-ease-out), opacity 300ms ease; }
.rma-cursor::after {
  content: "";
  position: absolute;
  left: -9px;
  top: -9px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(57, 191, 196, 0.45);
  opacity: 0;
  transform: scale(0.3);
}
.rma-cursor.is-press::after { animation: rma-ripple 520ms ease-out; }
@keyframes rma-ripple {
  0%   { opacity: 0.9; transform: scale(0.3); }
  100% { opacity: 0;   transform: scale(1.8); }
}
.rma-app .is-pressed { animation: rma-press 260ms ease-out; }
@keyframes rma-press {
  50% { transform: scale(0.95); }
}

/* ---------------------------------------------------------
   에이전트 화면 (pd-app.css 를 옮겨 그림)
   --------------------------------------------------------- */
.rma-app {
  font-size: var(--rma-fs);
  line-height: 1.4;
  color: var(--pd-ink-800);
  text-align: left;
  user-select: none;
}
.rma-app .pd-icon { width: 14px; height: 14px; }

.rma-tabs {
  flex: 0 0 44px;
  height: 44px;
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding-inline: 12px;
  border-bottom: 1px solid var(--pd-border);
  background: var(--pd-white);
  overflow: hidden;
}
.rma-tabs__tab {
  display: inline-flex;
  align-items: center;
  padding-inline: 12px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-weight: var(--pd-weight-medium);
  color: var(--pd-ink-600);
  white-space: nowrap;
}
/* 탭을 옮기는 장면(rma-tab-a → rma-tab-b)은 마지막 장면 기준으로 b 가 켜져 있고,
   옮기기 전 단계 동안만 a 를 켭니다. 단계 번호는 장면마다 달라 아래 "장면 단계"에 둡니다. */
.rma-tabs__tab.is-active,
.rma-tab-b,
.rma-tabs__tab.is-tab-on {
  color: var(--pd-mint-600);
  border-bottom-color: var(--pd-mint-400);
  font-weight: var(--pd-weight-bold);
}
.rma-tabs__tab.is-tab-off {
  color: var(--pd-ink-600);
  border-bottom-color: transparent;
  font-weight: var(--pd-weight-medium);
}

.rma-pane {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
}
.rma-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  white-space: nowrap;
}
.rma-toolbar__spacer { flex: 1 1 auto; }
.rma-crumb {
  font-size: var(--rma-fs-sm);
  font-weight: var(--pd-weight-semibold);
  color: var(--pd-ink-600);
}

.rma-toggle {
  display: inline-flex;
  height: 30px;
  border: 1px solid var(--pd-ink-300);
  border-radius: var(--pd-radius-md);
  overflow: hidden;
}
.rma-toggle__item {
  display: inline-flex;
  align-items: center;
  padding-inline: 10px;
  font-size: 12.5px;
  color: var(--pd-ink-600);
  background: var(--pd-white);
}
.rma-toggle__item + .rma-toggle__item { border-left: 1px solid var(--pd-ink-300); }
.rma-toggle__item.is-active {
  background: var(--pd-ink-900);
  color: var(--pd-white);
  font-weight: var(--pd-weight-bold);
}

.rma-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding-inline: 10px;
  border: 1px solid var(--pd-ink-300);
  border-radius: var(--pd-radius-md);
  background: var(--pd-white);
  font-size: 12.5px;
  font-weight: var(--pd-weight-semibold);
  color: var(--pd-ink-800);
}

.rma-input {
  display: inline-flex;
  align-items: center;
  min-width: 180px;
  height: 30px;
  padding-inline: 10px;
  border: 1px solid var(--pd-ink-300);
  border-radius: var(--pd-radius-md);
  background: var(--pd-white);
  font-size: 12.5px;
  color: var(--pd-ink-500);
}
.rma-input--sm { min-width: 0; }
.rma-input__val { color: var(--pd-ink-900); }
.rma-input__ph { display: none; }
.rma-caret {
  display: none;
  width: 1px;
  height: 14px;
  margin-left: 1px;
  background: var(--pd-ink-900);
  animation: rma-blink 1s steps(1) infinite;
}
@keyframes rma-blink { 50% { opacity: 0; } }

.rma-note {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding-inline: 9px;
  border-radius: var(--pd-radius-pill);
  font-size: var(--rma-fs-sm);
  font-weight: var(--pd-weight-semibold);
  white-space: nowrap;
}
.rma-note--mint    { background: var(--pd-mint-50);  color: var(--pd-mint-700); }
.rma-note--warning { background: var(--pd-gold-50);  color: #8A5A08; }
.rma-note--danger  { background: var(--pd-red-50);   color: var(--pd-danger); }
.rma-note--gray    { background: var(--pd-ink-100);  color: var(--pd-ink-600); }

.rma-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding-inline: 7px;
  border-radius: var(--pd-radius-pill);
  font-size: 11.5px;
  font-weight: var(--pd-weight-bold);
  white-space: nowrap;
  vertical-align: middle;
}
.rma-badge--gold    { background: var(--pd-gold-50); color: var(--pd-gold-700); }
.rma-badge--danger  { background: var(--pd-red-50);  color: var(--pd-red-700); }
.rma-badge--mint    { background: var(--pd-mint-50); color: var(--pd-mint-700); }
.rma-badge--gray    { background: var(--pd-ink-100); color: var(--pd-ink-600); }
.rma-badge--outline { border: 1px solid var(--pd-ink-300); color: var(--pd-ink-600); }

/* 청구 처리상태 — ClaimProgressTab: 반송 빨강, 처리중 호박, 처리완료 파랑 */
.st { font-weight: var(--pd-weight-bold); }
.st--done { color: #3B6FD4; }
.st--wait { color: #A86A00; }
.st--back { color: var(--pd-danger); }

/* 열 폭은 내용이 정합니다(auto). 넘치는 열은 틀(overflow: hidden)이 자르고,
   휴대폰 폭에서는 덜 중요한 열(rma-opt)을 아예 뺍니다. */
.rma-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--rma-fs);
}
.rma-table th {
  padding: 7px 10px;
  border-bottom: 1px solid var(--pd-border);
  background: var(--pd-ink-50);
  font-size: var(--rma-fs-sm);
  font-weight: var(--pd-weight-semibold);
  color: var(--pd-ink-600);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rma-table td {
  height: 36px;
  padding: 0 10px;
  border-bottom: 1px solid var(--pd-ink-100);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color var(--pd-dur) var(--pd-ease), opacity var(--pd-dur) var(--pd-ease);
}
.rma-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.rma-table .muted { color: var(--pd-ink-600); font-size: var(--rma-fs-sm); }
.rma-table .strong { color: var(--pd-ink-900); font-weight: var(--pd-weight-bold); }
.rma-table .lot { color: var(--pd-mint-600); font-size: var(--rma-fs-sm); }
.rma-table .pro { color: #3B6FD4; }
.rma-table .danger { color: var(--pd-danger); font-weight: var(--pd-weight-bold); }
.rma-table tr.is-picked td { background: var(--pd-mint-100); }
.rma-table tr.is-picked td:first-child { box-shadow: inset 3px 0 0 var(--pd-mint-500); }
.rma-table tr.is-alert td { background: var(--pd-red-50); }
.rma-table tr.is-alert-soft td { background: var(--pd-gold-50); }
.rma-table tr.is-done td { color: var(--pd-ink-500); }

.rma-split {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.rma-split__side { min-width: 0; }
.rma-split__main { min-width: 0; }
.rma-listfoot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 0;
  font-size: var(--rma-fs-sm);
  color: var(--pd-ink-600);
}
.rma-listfoot .rma-when-picked { display: inline-flex; align-items: center; gap: 8px; }
.rma-when-all { display: none; }

.rma-chips { display: inline-flex; gap: 6px; }
.rma-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding-inline: 11px;
  border: 1px solid var(--pd-ink-300);
  border-radius: var(--pd-radius-md);
  background: var(--pd-white);
  font-size: 12.5px;
  color: var(--pd-ink-700);
}
.rma-chip b { font-weight: var(--pd-weight-bold); color: var(--pd-ink-900); }

.rma-toast {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 5;
  padding: 9px 14px;
  border: 1px solid #BFE4D4;
  border-radius: var(--pd-radius-md);
  background: var(--pd-green-50);
  box-shadow: var(--pd-shadow-md);
  font-size: var(--rma-fs);
  color: #1B7A5A;
  white-space: nowrap;
  transform: translateX(-50%);
}

.rma-anchor { position: relative; display: inline-flex; }
.rma-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 6;
  width: 230px;
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--pd-border);
  border-radius: 8px;
  background: var(--pd-white);
  box-shadow: var(--pd-shadow-lg);
  white-space: normal;
}
.rma-pop__title { font-weight: var(--pd-weight-bold); color: var(--pd-ink-900); }
.rma-pop__row { display: flex; align-items: center; gap: 8px; color: var(--pd-ink-800); }
.rma-pop__hint {
  padding-top: 6px;
  border-top: 1px solid var(--pd-ink-100);
  font-size: var(--rma-fs-sm);
  color: var(--pd-ink-600);
  word-break: keep-all;
}
.rma-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pd-success);
}

.rma-tip {
  position: absolute;
  left: 18px;
  top: 128px;
  z-index: 5;
  padding: 8px 11px;
  border-radius: var(--pd-radius-md);
  background: var(--pd-ink-900);
  font-size: var(--rma-fs-sm);
  color: var(--pd-white);
  white-space: nowrap;
  box-shadow: var(--pd-shadow-md);
}
.rma-tip::before {
  content: "";
  position: absolute;
  left: 22px;
  top: -5px;
  width: 10px;
  height: 10px;
  background: var(--pd-ink-900);
  transform: rotate(45deg);
}

/* ---------------------------------------------------------
   장면 단계
   기본값이 **마지막 장면**입니다. 스크립트가 없거나 움직임 줄이기 설정이면 그대로 멈춰 보입니다.
   스크립트가 돌 때만 is-live 가 붙고, 단계가 지날 때마다 s1, s2 … 가 쌓입니다.
   그래서 ":not(.sN)" 은 "N단계 전까지"라는 뜻입니다.
   --------------------------------------------------------- */

/* 01 가져오기: s2 일정 열림 → s3 닫힘 → s4 가져오는 중 → s5 완료 */
.rma-when-busy { display: none; }
.rma-scene[data-rma-scene="collect"].is-live.s4:not(.s5) .rma-when-busy { display: inline; }
.rma-scene[data-rma-scene="collect"].is-live.s4:not(.s5) .rma-when-idle { display: none; }
.rma-scene[data-rma-scene="collect"].is-live.s4:not(.s5) [data-t="collect"] { color: var(--pd-ink-500); }
.rma-scene[data-rma-scene="collect"].is-live.s2:not(.s3) .rma-pop { display: flex; animation: rma-pop-in 260ms var(--rma-ease-spring); }
.rma-scene[data-rma-scene="collect"].is-live:not(.s5) .rma-new { display: none; }
.rma-scene[data-rma-scene="collect"].is-live.s5 .rma-new td {
  animation: rma-row-in 900ms var(--rma-ease-out) both;
  animation-delay: calc(var(--i) * 140ms);
}
.rma-scene[data-rma-scene="collect"].is-live:not(.s5) .rma-toast { display: none; }
.rma-scene[data-rma-scene="collect"].is-live.s5 .rma-toast { animation: rma-toast-in 320ms var(--rma-ease-spring) both; }
@keyframes rma-pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
}
@keyframes rma-row-in {
  0%   { background-color: var(--pd-mint-100); opacity: 0; }
  30%  { background-color: var(--pd-mint-100); opacity: 1; }
  100% { background-color: transparent; opacity: 1; }
}
@keyframes rma-toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
}

/* 02 입고내역: s2 업체 고름 → s4 검색어 입력 → s5 LOT 강조 */
.rma-pick td { background: var(--pd-mint-100); }
.rma-pick td:first-child { box-shadow: inset 3px 0 0 var(--pd-mint-500); }
.rma-other { display: none; }
.rma-scene[data-rma-scene="list"].is-live:not(.s2) .rma-pick td { background: transparent; box-shadow: none; }
.rma-scene[data-rma-scene="list"].is-live:not(.s2) .rma-other { display: table-row; }
.rma-scene[data-rma-scene="list"].is-live:not(.s2) .rma-when-picked { display: none; }
.rma-scene[data-rma-scene="list"].is-live:not(.s2) .rma-when-all { display: inline; }
.rma-scene[data-rma-scene="list"].is-live:not(.s4) .rma-input__ph { display: inline; }
.rma-scene[data-rma-scene="list"].is-live:not(.s4) .rma-input__val { display: none; }
.rma-scene[data-rma-scene="list"].is-live.s4 .rma-caret { display: inline-block; }
.rma-mine:not(.rma-hit) td { opacity: 0.4; }
.rma-hit td { background: var(--pd-mint-100); }
.rma-hit td.lot { font-weight: var(--pd-weight-bold); }
.rma-scene[data-rma-scene="list"].is-live:not(.s5) .rma-mine td { opacity: 1; }
.rma-scene[data-rma-scene="list"].is-live:not(.s5) .rma-hit td { background: transparent; }

/* 03 챙길 약: s1 적용전 입고 강조 → s3 회수 및 폐기 탭 → s4 격리 안내 */
.rma-panel-a { display: none; }
.rma-scene[data-rma-scene="watch"].is-live:not(.s3) .rma-panel-a { display: flex; }
.rma-scene[data-rma-scene="watch"].is-live:not(.s3) .rma-panel-b { display: none; }
.rma-scene[data-rma-scene="watch"].is-live:not(.s3) .rma-tab-a {
  color: var(--pd-mint-600);
  border-bottom-color: var(--pd-mint-400);
  font-weight: var(--pd-weight-bold);
}
.rma-scene[data-rma-scene="watch"].is-live:not(.s3) .rma-tab-b {
  color: var(--pd-ink-600);
  border-bottom-color: transparent;
  font-weight: var(--pd-weight-medium);
}
.rma-scene[data-rma-scene="watch"].is-live.s1:not(.s3) .rma-col-hl {
  background: var(--pd-mint-50);
  color: var(--pd-mint-800);
  box-shadow: inset 1px 0 0 var(--pd-mint-300), inset -1px 0 0 var(--pd-mint-300);
}
.rma-scene[data-rma-scene="watch"].is-live.s3 .rma-panel-b .rma-table td { animation: rma-fade-up 420ms var(--rma-ease-out) both; }
.rma-scene[data-rma-scene="watch"].is-live:not(.s4) .rma-tip { display: none; }
.rma-scene[data-rma-scene="watch"].is-live.s4 .rma-tip { animation: rma-pop-in 260ms var(--rma-ease-spring); }
@keyframes rma-fade-up {
  from { opacity: 0; transform: translateY(4px); }
}

/* 04 청구: s2 반송 줄 → s4 미청구·반송·불능 탭(반송건) → s6 미청구 안내 */
.rma-chip-b {
  border-color: var(--pd-ink-900);
  background: var(--pd-ink-900);
  color: var(--pd-white);
  font-weight: var(--pd-weight-bold);
}
.rma-chip-b b { color: var(--pd-white); }
.rma-sub-a { display: none; }
.rma-scene[data-rma-scene="claim"].is-live:not(.s4) .rma-panel-a { display: flex; }
.rma-scene[data-rma-scene="claim"].is-live:not(.s4) .rma-panel-b { display: none; }
.rma-scene[data-rma-scene="claim"].is-live:not(.s4) .rma-tab-a {
  color: var(--pd-mint-600);
  border-bottom-color: var(--pd-mint-400);
  font-weight: var(--pd-weight-bold);
}
.rma-scene[data-rma-scene="claim"].is-live:not(.s4) .rma-tab-b {
  color: var(--pd-ink-600);
  border-bottom-color: transparent;
  font-weight: var(--pd-weight-medium);
}
.rma-scene[data-rma-scene="claim"].is-live.s2:not(.s4) .rma-row-back td { background: var(--pd-red-50); }
.rma-scene[data-rma-scene="claim"].is-live:not(.s6) .rma-chip-a {
  border-color: var(--pd-ink-900);
  background: var(--pd-ink-900);
  color: var(--pd-white);
  font-weight: var(--pd-weight-bold);
}
.rma-scene[data-rma-scene="claim"].is-live:not(.s6) .rma-chip-a b { color: var(--pd-white); }
.rma-scene[data-rma-scene="claim"].is-live:not(.s6) .rma-chip-b {
  border-color: var(--pd-ink-300);
  background: var(--pd-white);
  color: var(--pd-ink-700);
  font-weight: var(--pd-weight-regular);
}
.rma-scene[data-rma-scene="claim"].is-live:not(.s6) .rma-chip-b b { color: var(--pd-ink-900); }
.rma-scene[data-rma-scene="claim"].is-live:not(.s6) .rma-sub-a { display: table; }
.rma-scene[data-rma-scene="claim"].is-live:not(.s6) .rma-sub-b { display: none; }
.rma-scene[data-rma-scene="claim"].is-live.s6 .rma-sub-b td { animation: rma-fade-up 420ms var(--rma-ease-out) both; }

/* ---------------------------------------------------------
   알아 두실 것
   --------------------------------------------------------- */
.rma-facts { padding-block: 120px; }
.rma-facts__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--pd-border);
  background: var(--pd-border);
}
.rma-fact {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-3);
  padding: 36px 32px;
  background: var(--pd-white);
}
.rma-fact__icon {
  width: 30px;
  height: 30px;
  margin-bottom: var(--pd-space-2);
  color: var(--pd-mint-500);
  stroke-width: 1.6;
}
.rma-fact__title {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 19px;
  font-weight: var(--pd-weight-bold);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--pd-text);
  word-break: keep-all;
}
.rma-fact__desc {
  font-size: 15px;
  line-height: 1.7;
  color: var(--pd-text-secondary);
  word-break: keep-all;
}

/* ---------------------------------------------------------
   시작하기
   --------------------------------------------------------- */
.rma-start {
  padding-block: 120px;
  background: var(--pd-white);
}
.rma-start__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pd-space-8);
  counter-reset: none;
}
.rma-start__step {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-3);
}
/* 단계 그림 — 흰 바탕 사진을 그대로 흰 판에 앉히고 가는 테두리로만 칸을 나눕니다.
   색 판에 곱하기로 섞으면 사진이 물에 잠긴 듯 탁해져서 쓰지 않습니다. */
.rma-start__media {
  aspect-ratio: 3 / 2;
  margin-bottom: var(--pd-space-3);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-xl);
  background: var(--pd-white);
  overflow: hidden;
}
.rma-start__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 600ms var(--rma-ease-out);
}
.rma-start__step:hover .rma-start__media img { scale: 1.03; }
.rma-start__title {
  margin: 0;
  font-size: 22px;
  font-weight: var(--pd-weight-bold);
  letter-spacing: -0.02em;
  color: var(--pd-text);
}
.rma-start__desc {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--pd-text-secondary);
  word-break: keep-all;
}
.rma-start__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--pd-space-1);
  font-size: 15px;
  font-weight: var(--pd-weight-semibold);
  color: var(--pd-mint-600);
}
.rma-start__link .pd-icon { width: 16px; height: 16px; }

/* ---------------------------------------------------------
   자주 묻는 질문
   --------------------------------------------------------- */
.rma-faq { padding-block: 120px 80px; }
/* 3단 칸 — 첫 칸은 머리, 나머지 다섯은 질문. 두 줄로 컨테이너 폭을 꼭 채웁니다. */
.rma-faq__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 56px;
  row-gap: 56px;
}
.rma-faq__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pd-space-3);
}
.rma-qa {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-3);
  padding-top: var(--pd-space-6);
  border-top: 1px solid var(--pd-border-strong);
}
.rma-qa__q {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 18px;
  font-weight: var(--pd-weight-bold);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--pd-text);
  word-break: keep-all;
}
.rma-qa__mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--pd-mint-50);
  font-size: 13px;
  font-weight: var(--pd-weight-bold);
  color: var(--pd-mint-700);
}
.rma-qa__a {
  padding-left: 34px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--pd-text-secondary);
  word-break: keep-all;
}

/* ---------------------------------------------------------
   문의
   --------------------------------------------------------- */
.rma-cta { padding-block: 40px 120px; }
/* 문의 — 깊은 남색 판의 오른쪽에 말풍선과 헤드셋 그림을 깔고, 왼쪽은 남색을 덧칠해 글을 읽게 합니다.
   번호를 가장 크게 둬 "전화하면 된다"가 먼저 읽히게 합니다(문의 박스 시안 B안). */
.rma-cta__box {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 340px;
  padding: 56px 60px;
  border-radius: 24px;
  background: #112A46 url("../../images/intro/receiving_cta.jpg") no-repeat right center / cover;
  color: var(--pd-white);
  overflow: hidden;
}
.rma-cta__box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #112A46 0%, rgba(17, 42, 70, 0.85) 40%, rgba(17, 42, 70, 0) 62%);
}
.rma-cta__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 560px;
}
.rma-cta__eyebrow {
  font-size: 14px;
  font-weight: var(--pd-weight-bold);
  color: var(--pd-mint-300);
}
.rma-cta__title {
  margin: 0;
  font-size: 30px;
  font-weight: var(--pd-weight-bold);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--pd-white);
  word-break: keep-all;
  text-wrap: balance;
}
.rma-cta__tel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 4px;
}
.rma-cta__num {
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--pd-white);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rma-cta__num:hover { color: var(--pd-mint-200); }
.rma-cta__hours {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
}
.rma-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pd-space-2);
  margin-top: var(--pd-space-2);
}
.rma-cta__actions .pd-btn--outline {
  border-color: rgba(255, 255, 255, 0.4);
  background: transparent;
  color: var(--pd-white);
}
.rma-cta__actions .pd-btn--outline:hover {
  border-color: var(--pd-white);
  background: rgba(255, 255, 255, 0.08);
  color: var(--pd-white);
}

/* ---------------------------------------------------------
   반응형
   --------------------------------------------------------- */

/* 떠 있는 카드가 창 바깥으로 나갈 자리가 없어지면 거둡니다 */
@media (max-width: 1239px) {
  .rma-float { display: none; }
}

@media (max-width: 1100px) {
  .rma-step,
  .rma-step--rev { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .rma-step--rev .rma-step__text { order: 1; }
  .rma-step--rev .rma-step__visual { order: 2; }
  .rma-step + .rma-step { margin-top: 100px; }
  .rma-step__text { max-width: 640px; }
  .rma-facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rma-faq__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}

@media (max-width: 960px) {
  .rma-hero { padding-block: 56px var(--pd-space-16); }
  .rma-hero__stage { padding-bottom: 0; }
  .rma-hero__copy { margin-bottom: 48px; }
  .rma-hero__deco { margin-bottom: 32px; }
  .rma-hero__rig { height: 340px; }
  .rma-hero__title { font-size: 34px; }
  .rma-hero__desc { font-size: 16px; }
  .rma-head__title { font-size: 28px; }
  .rma-flow,
  .rma-facts,
  .rma-start { padding-block: 80px; }
  .rma-faq { padding-block: 80px 48px; }
  .rma-cta { padding-block: 24px 80px; }
  .rma-start__steps { grid-template-columns: minmax(0, 1fr); gap: var(--pd-space-12); }
  .rma-start__media { max-width: 520px; }
  /* 좁으면 그림을 아래로 내리고 글을 위에 둡니다 */
  .rma-cta__box {
    align-items: flex-start;
    padding: 40px 28px 220px;
    background-size: auto 200px;
    background-position: right bottom;
  }
  .rma-cta__box::before { background: linear-gradient(180deg, #112A46 55%, rgba(17, 42, 70, 0) 80%); }
}

/* 휴대폰 폭 — 에이전트 화면에서 덜 중요한 열과 꾸밈(rma-opt)을 덜어 냅니다 */
@media (max-width: 640px) {
  .page-rma { --rma-fs: 12.5px; --rma-fs-sm: 11.5px; }
  .rma-opt { display: none !important; }
  .rma-hero__rig { height: 300px; }
  .rma-win { grid-template-columns: minmax(0, 1fr); }
  .rma-rail { display: none; }
  .rma-hero__deco { margin-bottom: 20px; }
  .rma-hero__title { font-size: 28px; }
  .rma-head { margin-bottom: var(--pd-space-8); }
  .rma-flow .rma-head { margin-bottom: 56px; }
  .rma-head__title { font-size: 24px; }
  .rma-head__desc { font-size: 15.5px; }
  .rma-step__title { font-size: 22px; }
  .rma-step__desc { font-size: 15.5px; }
  .rma-tabs { padding-inline: 4px; }
  .rma-tabs__tab { padding-inline: 9px; }
  .rma-pane { padding: 10px; }
  .rma-input { min-width: 0; flex: 1 1 auto; }
  .rma-table th,
  .rma-table td { padding-inline: 7px; }
  .rma-split { grid-template-columns: minmax(0, 1fr); }
  .rma-scene[data-rma-scene="list"] { --rma-screen-h: 500px; }
  .rma-toast { white-space: normal; width: calc(100% - 32px); text-align: center; }
  .rma-tip { white-space: normal; right: 18px; }
  .rma-facts__grid { grid-template-columns: minmax(0, 1fr); }
  .rma-fact { padding: 28px 22px; }
  .rma-faq__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .rma-qa__q { font-size: 16.5px; }
  /* 세 단계 — 그림은 장식이라 좁은 화면에서는 감추고 글만 남깁니다 */
  .rma-start__steps { gap: var(--pd-space-8); }
  .rma-start__media { display: none; }
  .rma-start__title { font-size: 18px; }
  .rma-start__desc { font-size: 15px; }
  .rma-cta__title { font-size: 24px; }
  .rma-cta__num { font-size: 36px; }
}

/* 움직임 줄이기 — 스크립트가 장면을 돌리지 않습니다(마지막 장면이 그대로 보임).
   남은 등장 효과도 끕니다. */
@media (prefers-reduced-motion: reduce) {
  .rma-scene__frame,
  .rma-cursor,
  .rma-table td { transition: none; }
  .rma-caret { animation: none; }
  .rma-start__media img { transition: none; }
}