/* =============================================================================
   위험성평가 쪽 (a안 바탕) · 2026-10-22 1판 → r1 → r2 → r3(검토 반영) · 실제 UI 부품 + 스크롤 문지르기 장면
   r2: 넓은 화면 쪽 칸을 머리 줄(로고)과 같은 1120 칸에 맞춤 · 무대는 오른쪽 여백으로 나감 · 진행 칩 두 칸 · 좁은 화면 칩 줄 꼬리
   r3: 넓은 모니터 무대 상한 · 판 왼쪽 붙임 · 노트북 높이 위 여백 · 엔진 꺼짐 때 캔버스 숨김 · 휴대폰 첫 화면 표지 키움 · 낮은 휴대폰 글 칸 조임 ·
       좁은 화면 전용 부품(표준 길 카드 · 평가표 = 좁은 폭으로 다시 찍은 -m 그림 · 글자 약 11 · 9px)
   토대: cm-toss.css · min.css · v-a.css. 여기는 이 쪽에만 있는 것.
     1. 첫 화면 짜임(넓은 화면 = 글 왼쪽 · 무대 오른쪽 · 휴대폰 = 제목 · 단추 · 무대 · 칩)
     2. 장면 짜임(.rk-scene · .rk-pin · 글 칸 · 진행 칩 · 무대)
     3. 무대(.rk-stage = 은은한 빛) · 논리 판(.rk-board = 부품 좌표계). r1: 흰 판(테두리 · 그림자 · 반경 28)을 걷음(카드 안 카드 없앰)
     4. 부품 틀(.rk-card · .rk-pg · .rk-phone · .rk-photo · .rk-band) · 주석(.rk-ring · .rk-tag · .rk-lines)
     5. 쪽 더미 · 세팅 카드 · 창
     6. 휴대폰 · 좁은 화면(1023px 아래 · 판 350×420)
     7. 설정 존중(감속 모드 휴대폰 = 위에서 아래로 쌓기)
   html 표시(머리 조각이 첫 그림 전에 붙인다): rk-js = 핀 + 문지르기(엔진 risk.js) · rk-ready = 엔진이 첫 장면을 맞춤 ·
     rk-late = 1.2초 안에 엔진이 안 붙음(첫 화면은 끝 장면을 먼저 보임) · rk-still = 감속 모드
   마크업 그대로(스크립트 없음 · 감속 모드)가 끝 장면이다. 지나가는 부품(.rk-tr)은 기본으로 숨겨 둔다.
   좌표: 부품은 논리 판 단위(--x · --y · --w · --h, 넓은 화면 판 --bw × --bh)와 휴대폰 단위(--mx · --my · --mw · --mh, 판 --mbw × --mbh).
   ============================================================================= */

:root {
  --rk-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rk-dock: 84px;            /* 핀 아래에 비워 두는 높이(따라오는 상담 독이 무대를 덮지 않게) */
  --rk-pad: 0px;              /* 무대 판 안쪽 여백(r1: 판을 걷어 0. padding 대신 이 값을 써야 판 폭 식이 맞는다) */
  --rk-ring: #6929ff;
}

/* ---- 1. 첫 화면 ------------------------------------------------------------------ */
.rk-hero { padding-bottom: clamp(32px, 4vw, 56px); }
.rk-hero__grid { display: grid; gap: 28px; }
.rk-hero__stage .rk-board { max-width: 760px; }
@media (min-width: 1024px) {
  .rk-hero { text-align: left; }
  .rk-hero__grid {
    max-width: calc(1360px + var(--cm-gutter) * 2);
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); column-gap: clamp(32px, 4vw, 64px); align-items: center;
  }
  .rk-hero .min-h1 { font-size: clamp(34px, 3.6vw, 52px); }
  .rk-hero .min-chips { justify-content: flex-start; margin-top: 24px; }
  .rk-hero__actions { justify-content: flex-start; }
}
/* r2: 첫 화면 · 장면 칸 = 머리 줄(로고)과 같은 1120 칸(svc · tbm · ai 와 같은 왼끝). 무대만 오른쪽 여백으로 나가 커진다
   r3(D1): 나가는 길이에 상한 240px(1648 폭 아래는 그대로). 넓은 모니터(1920 · 2560 · 3440)에서 무대가 화면 오른끝까지 늘어 한쪽으로 쏠리던 것 막음 */
@media (min-width: 1024px) {
  .rk-hero__grid { max-width: calc(1120px + var(--cm-gutter) * 2); }
  .rk-stage, .rk-hero__stage { margin-right: calc(-1 * min(240px, max(0px, (100vw - 1120px) / 2 - 24px))); }
  .rk-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rk-hero .min-h1 { font-size: clamp(34px, 3.3vw, 48px); }
}
@media (min-width: 1600px) {
  .rk-hero__stage .rk-board { max-width: 860px; }
}
@media (max-width: 1023px) {
  .rk-hero .min-h1 { font-size: clamp(25px, 7.4vw, 40px); }
}
/* 휴대폰: 제목 · 단추 · 무대 · 칩 차례(무대가 첫 화면 안으로 올라온다) */
@media (max-width: 767px) {
  .rk-hero__copy { display: contents; }   /* 글 칸을 풀어 제목 · 칩 · 단추가 무대와 같은 줄 세움에 들어온다 */
  .rk-hero__copy > .min-h1 { order: 1; }
  .rk-hero__copy > .rk-hero__actions { order: 2; margin-top: 0; }
  .rk-hero__grid > .rk-hero__stage { order: 3; }
  .rk-hero__copy > .rk-hero__chips { order: 4; margin-top: 0; }
  .rk-hero__grid { row-gap: 24px; }
}
/* 10-22 검증 R4: h1 이 세 줄(이름 첫 표기)이 되며 무대가 약 35px 내려감 → 높이 700 이하 휴대폰(375×667 · 360×640 · 툴바 보이는 390×664)은
   위 여백 36 → 20 · 제목 ↔ 단추 ↔ 무대 사이 24 → 16 으로 줄여 무대 아래 끝이 첫 화면 안에 들어오게(칩 넷은 접힘 아래 · 글자 크기는 그대로) */
@media (max-width: 767px) and (max-height: 700px) {
  .rk-hero { padding-top: calc(var(--min-hd-h) + var(--min-safe-t) + 20px); }
  .rk-hero__grid { row-gap: 16px; }
}

/* ---- 2. 장면 짜임 ------------------------------------------------------------------ */
.rk-scene { position: relative; }
.rk-pin { padding-block: clamp(48px, 6vw, 88px); }                       /* 핀 없을 때(스크립트 없음 · 감속 모드) */
.rk-pin > .cm-wrap { max-width: calc(1120px + var(--cm-gutter) * 2); }   /* r2: 머리 줄(로고)과 같은 칸 */
.rk-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
.rk-grid > * { min-width: 0; }   /* 옆으로 미는 칩 줄이 칸 폭을 밀어 늘리지 않게 */
.rk-copy .min-h2 { text-align: left; }
.rk-copy__act { margin-top: 28px; }
.rk-copy__act .cm-btn { min-height: 56px; padding: 0 22px; font-size: 16px; }

/* 진행 칩: 켜짐 = 보라 틴트. 기본(끝 장면)은 모두 켜짐, 엔진이 돌면 아직 안 온 칩만 회색 */
.rk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.rk-chip {
  display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 16px 0 13px; border-radius: var(--cm-r-chip);
  background: var(--cm-brand-tint); color: var(--cm-brand); font-size: 15px; font-weight: 500; line-height: 1.2; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: background-color 240ms var(--rk-ease), color 240ms var(--rk-ease);
}
.rk-chip > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.9; }
.rk-js .rk-chip:not(.on) { background: var(--cm-fill); color: var(--cm-ink-4); }

@media (min-width: 1024px) {
  /* 글 칸(r2): 1120 칸 안에서 29vw · 가장 긴 줄은 1024 = 303/310 · 1440 = 411/418 */
  .rk-grid { grid-template-columns: clamp(310px, 29vw, 420px) minmax(0, 1fr); column-gap: clamp(28px, 3vw, 48px); }
  /* 진행 칩 두 칸(2 + 2 · 마지막 칩이 둘째 줄에 외톨이로 남지 않게) */
  .rk-chips { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px; }
  .rk-copy .min-h2 { font-size: clamp(28px, 2.65vw, 38px); line-height: 1.3; }   /* 상한 38 = TBM · svc · ai 와 같음 */
}

/* 핀: html.rk-js 일 때만. 장면 길이는 엔진이 정한 --rk-vh(가로 폭이 바뀔 때만 다시 잼)로 → 주소줄 · 창 높이가 조금 바뀌어도 보던 자리가 안 튄다 */
.rk-js .rk-scene { height: calc(var(--len) * var(--rk-vh, 1svh)); }
/* 10-26 대표 '모바일에서 스크롤이 너무 빨리 내려감' → 휴대폰 · 태블릿 폭은 장면 길이 1.6배(한 번 튕겨도 장면 하나가 통째로 지나가지 않게)
   + 장면 끝 그림 자리 멈춤(risk.js placeSnaps · 가까움 끌림이라 그 근처에서만 선다 · 넓은 화면은 끌림 없음) */
.rk-snap { display: none; }
@media (max-width: 1023px) {
  .rk-js .rk-scene { height: calc(var(--len) * var(--rk-m, 1.6) * var(--rk-vh, 1svh)); }
  html.rk-js { scroll-snap-type: y proximity; scroll-padding-top: calc(var(--min-hd-h) + var(--min-safe-t)); }
  .rk-js .rk-snap { display: block; position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; scroll-snap-align: start; }
}
.rk-js .rk-pin {
  position: sticky; top: calc(var(--min-hd-h) + var(--min-safe-t));
  height: calc(100svh - var(--min-hd-h) - var(--min-safe-t));
  padding: clamp(10px, 2.2vh, 26px) 0 calc(var(--rk-dock) + var(--min-safe-b));
}
/* r3(D5): 노트북 창 높이(1440×790 · 1366×768 · 1280×720)에서 맨 위 부품이 머리 줄에 5~9px 로 붙던 것 → 넓은 화면만 위 여백을 늘림(떠오름 drift 몫까지) */
@media (min-width: 1024px) {
  .rk-js .rk-pin { padding-top: clamp(32px, 4.4vh, 44px); }
}
.rk-js .rk-pin > .rk-grid { height: 100%; }
.rk-js .rk-stage { align-self: stretch; height: 100%; min-height: 0; }

/* ---- 3. 무대 · 논리 판 ------------------------------------------------------------ */
/* r1: 흰 판을 걷고 무대 칸에 은은한 빛만(TBM · svc 새 판처럼 부품과 실사가 배경 빛 위에 바로 놓인다) */
.rk-stage { background: radial-gradient(ellipse 62% 55% at 58% 38%, rgba(49, 130, 246, 0.08), rgba(49, 130, 246, 0) 72%); }
.rk-plate { position: relative; isolation: isolate; container-type: inline-size; padding: var(--rk-pad); border: 0; border-radius: 0; background: none; box-shadow: none; }
.rk-board {
  position: relative; display: block; margin: 0 auto; width: 100%; max-width: 900px;
  aspect-ratio: var(--bw) / var(--bh); container-type: inline-size;
}
/* 핀 안: 무대 칸(남은 폭 × 핀 높이)에 판을 맞춰 넣는다 */
.rk-js .rk-scene .rk-stage { container-type: size; display: grid; place-items: center; }
/* r3(D1): 넓은 화면은 판을 글 칸 쪽(왼쪽)에 붙인다(넓은 무대 가운데에 판이 떠서 글과 사이가 벌어지지 않게) */
@media (min-width: 1024px) {
  .rk-js .rk-scene .rk-stage { align-items: center; justify-items: start; }
}
.rk-js .rk-scene .rk-plate {
  --rk-bw: var(--bw); --rk-bh: var(--bh);
  width: min(100cqw, calc((100cqh - var(--rk-pad) * 2) * var(--rk-bw) / var(--rk-bh) + var(--rk-pad) * 2), calc(900px + var(--rk-pad) * 2));
}
@media (min-width: 1600px) {
  .rk-board { max-width: 1040px; }
  .rk-js .rk-scene .rk-plate { width: min(100cqw, calc((100cqh - var(--rk-pad) * 2) * var(--rk-bw) / var(--rk-bh) + var(--rk-pad) * 2), calc(1040px + var(--rk-pad) * 2)); }
}
/* 엔진이 첫 장면을 맞추기 전에는 장면 무대를 숨긴다. 첫 화면 무대는 1.2초가 지나면(rk-late) 끝 장면을 먼저 보인다 */
.rk-js:not(.rk-ready) .rk-scene .rk-board,
.rk-js:not(.rk-ready):not(.rk-late) .rk-hero .rk-board { visibility: hidden; }

.rk-part {
  position: absolute; margin: 0; box-sizing: border-box;
  left: calc(var(--x) * 100% / var(--bw)); top: calc(var(--y) * 100% / var(--bh)); width: calc(var(--w) * 100% / var(--bw));
}
.rk-js .rk-scene .rk-part, .rk-js .rk-hero .rk-part { will-change: transform, opacity; }
.rk-tr { opacity: 0; }                                   /* 지나가는 부품: 끝 장면에는 없다 */

/* ---- 4. 부품 틀 · 주석 ---------------------------------------------------------------- */
.rk-card {
  overflow: hidden; background: #fff; border: 1px solid var(--cm-line-2); border-radius: 18px;
  box-shadow: 0 2px 6px rgba(23, 40, 90, 0.05), var(--cm-shadow-3);
}
.rk-card > img, .rk-pg > img, .rk-phone > img, .rk-photo > img, .rk-swap > img, .rk-rnd__acts > img, .rk-win__in > img { display: block; width: 100%; height: auto; }
/* r3(P1): 좁은 화면 전용 그림(-m)을 고르는 picture 는 틀 없이(안의 img 가 카드 칸을 그대로 채움) */
.rk-part picture { display: contents; }
.rk-part picture > img { display: block; width: 100%; height: auto; }
.rk-card--pill { border-radius: 16px; }
.rk-over { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
.rk-swap { position: relative; }
/* 회차 단계 그림: 위험성평가 중(st1) → 완료(st2) → 검수 완료(head) 차례로 위층이 덮는다(끝 장면 = head 가 맨 위) */
.rk-swap > [data-k="head"] { position: relative; z-index: 2; }
.rk-swap > .rk-ring { z-index: 3; }
.rk-chipimg { display: block; height: auto; mix-blend-mode: multiply; }   /* 파일 칩 그림의 흰 바탕이 올리기 칸 테두리를 가리지 않게 */
.rk-pg { overflow: hidden; background: #fff; border: 1px solid var(--cm-line-2); border-radius: 6px; box-shadow: 0 2px 8px rgba(23, 40, 90, 0.06), 0 16px 40px rgba(23, 92, 211, 0.1); }
.rk-phone {
  overflow: hidden; background: #fff; border: 1px solid var(--cm-line-2); border-radius: 28px;
  box-shadow: 0 2px 8px rgba(23, 40, 90, 0.07), 0 22px 54px rgba(23, 92, 211, 0.14);
}
.rk-phone--sm { border-radius: 20px; }
.rk-cv { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; }
/* r3(M7 · P6): 엔진이 꺼지면(휴대폰 가로 · 오류 · 늦게 안 붙음) 녹화 캔버스에 남은 중간 프레임을 숨겨 밑의 끝 그림(44번 · 6점)이 보이게 */
html:not(.rk-js) .rk-cv { display: none; }
/* 프레임이 아직 안 읽혔을 때 빈 카드 대신 1번 프레임(엔진이 붙었을 때만 · 스크립트 없음 · 감속 모드의 끝 그림은 그대로) */
.rk-ready .rk-cv[data-seq="rk"] { background: #fff url(/images/risk-1022/seq-rk/0001.webp) 50% 0 / 100% auto no-repeat; }
.rk-ready .rk-cv[data-seq="nfc"] { background: #fff url(/images/risk-1022/seq-nfc/0001.webp) 50% 0 / 100% auto no-repeat; }
/* 채점 캔버스: 장면이 1.5화면 안으로 오면(rk-near · 첫 화면 무게에 안 들어감) 바탕을 불투명하게(프레임이 늦어도 밑에 깔린 끝 그림 '6점'이 먼저 비치지 않게 · 엔진이 중간에 꺼지면 끝 그림은 그대로) */
.rk-ready .rk-near .rk-cv[data-seq="rate"] { background: #fff url(/images/risk-1022/seq-rate/0001.webp) 50% 100% / 100% auto no-repeat; }
.rk-rnd { padding-bottom: 2%; }
.rk-rnd__acts { position: relative; width: 72.2%; }
/* 현장 실사: 부품 카드와 같은 반경 · 그림자 */
.rk-photo {
  overflow: hidden; border-radius: 20px; background: #fff;
  box-shadow: 0 2px 8px rgba(23, 40, 90, 0.07), 0 22px 54px rgba(23, 92, 211, 0.14);
}
/* 미션 완료 띠: ph-done 실캡처에서 체크 · '미션 완료!' · '5개 중 5개…' 부분만 보이게 자름(덧칠 없음) */
.rk-band { aspect-ratio: 350 / 132; }
.rk-card.rk-band > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 34.8%; }

/* 보라 테두리 상자: 부품 상자에 대한 % (--rx · --ry · --rw · --rh) */
.rk-ring {
  position: absolute; display: block; pointer-events: none; box-sizing: border-box;
  left: calc(var(--rx) * 1%); top: calc(var(--ry) * 1%); width: calc(var(--rw) * 1%); height: calc(var(--rh) * 1%);
  border: 2px solid var(--rk-ring); border-radius: 10px; background: rgba(105, 41, 255, 0.06);
}
.rk-ring--dot { border-radius: 999px; }

/* 꼬리표: 흰 알약 + 보라 점. 글자 크기는 판 폭을 따른다 */
.rk-tag {
  position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 0.55em;
  left: calc(var(--x) * 100% / var(--bw)); top: calc(var(--y) * 100% / var(--bh));
  height: 2.5em; padding: 0 1.05em 0 0.9em; border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 1px rgba(105, 41, 255, 0.14), 0 10px 26px rgba(23, 60, 140, 0.16);
  color: var(--cm-ink); font: 700 max(11px, 1.42cqw) / 1 var(--min-font-body); letter-spacing: -0.01em; white-space: nowrap;
}
.rk-tag::before { content: ""; flex: none; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--cm-brand); }
.rk-tag--l { transform: translateX(-100%); }
.rk-tag--in { left: calc(var(--tx) * 1%); top: calc(var(--ty) * 1%); }

/* 미션 완료 띠에서 보고서로 가는 선 하나(화살촉 없음 · 굵기는 화면 픽셀 2) */
.rk-lines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 6; }
.rk-lines path { fill: none; stroke: rgba(105, 41, 255, 0.6); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }

/* ---- 5. 쪽 더미 · 세팅 카드 · 창 ---------------------------------------------------------- */
/* 더미: 같은 자리에 쪽 넷. 앞에 나온 쪽 = 왼쪽 아래로 한 발(표지가 끝 장면). 나머지는 뒤로 비켜 기울어 있다 */
.rk-pile { aspect-ratio: 1184 / 1678; isolation: isolate; }
.rk-pile > .rk-pg { position: absolute; left: 0; top: 0; width: 100%; transform-origin: 50% 100%; }
.rk-pile > .rk-pg--wide { width: 112%; }
.rk-pile > [data-i="0"] { z-index: 4; translate: -3% 2.4%; }
.rk-pile > [data-i="1"] { z-index: 3; translate: 5% -3.4%; rotate: 1.6deg; scale: 0.96; }
.rk-pile > [data-i="2"] { z-index: 2; translate: 10% -6.8%; rotate: 3.2deg; scale: 0.96; }
.rk-pile > [data-i="3"] { z-index: 1; translate: 15% -10.2%; rotate: 4.8deg; scale: 0.96; }

/* 세팅 카드: 줄이 늘면 카드가 아래로 자라고(clip-path), 넘치면 안쪽이 실제 스크롤처럼 올라간다. 그림자는 잘린 모양을 따라간다 */
.rk-set { height: calc(var(--h) * 100% / var(--bh)); }
.rk-set, .rk-grow { filter: drop-shadow(0 0 0.6px rgba(23, 40, 90, 0.28)) drop-shadow(0 14px 28px rgba(23, 92, 211, 0.12)); }
.rk-set__frame, .rk-grow__frame { position: relative; overflow: hidden; border-radius: 18px; background: #fff; }
.rk-set__frame { display: flex; flex-direction: column; height: 100%; }
.rk-set__head { display: block; flex: none; width: 100%; height: auto; }   /* 머리는 고정, 줄만 안에서 스크롤 */
.rk-set__rows { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.rk-set__in > img { display: block; width: 100%; height: auto; }
.rk-set__foot { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; box-shadow: 0 -1px 0 var(--cm-line-2); }
.rk-set__foot > img { display: block; width: 100%; height: auto; }
.rk-set__in { translate: 0 -32.8%; }

/* 이행 미션 창: 긴 창의 위쪽(머리 + 켜진 줄 넷)만 보인다. r1: 안쪽 스크롤 없음(첫 줄이 머리 밑으로 숨지 않게) */
.rk-win { height: calc(var(--h) * 100% / var(--bh)); }
.rk-win__in { position: relative; }
.rk-win__head { position: absolute; left: 0; right: 0; top: 0; z-index: 2; overflow: hidden; aspect-ratio: 956 / 185; background: #fff; box-shadow: 0 1px 0 var(--cm-line-2); }
.rk-win__head > img { display: block; width: 100%; height: auto; }

/* 장면별 끝 자세 */
[data-scene="hero"] [data-k="pgC"] { rotate: -1.5deg; aspect-ratio: 1184 / 880; }   /* 표지 쪽 위쪽(결재란 · 제목 · 사업장 개요 표)만 · 표 끝 아래 빈 자리에서 자름 */
[data-scene="hero"] [data-k="pgT"] { rotate: 4deg; }
[data-scene="s4"] [data-k="rphoto"], [data-scene="s4"] [data-k="cover"] { rotate: -2deg; }
[data-scene="s4"] [data-k="repA"] { opacity: 0; }
[data-k="row"] { z-index: 4; }   /* 평가표 줄은 휴대폰 위로 날아가 내려앉는다 */
@media (min-width: 1024px) {
  /* 평가표: 혼자 나올 때(엔진) 크게 → 끝 자리에서 600 단위로 줄임(큰 그림을 줄이는 쪽이라 흐려지지 않음) */
  [data-scene="s3"] [data-k="tbl"] { transform-origin: 0 0; scale: 0.893; overflow: visible; }
  [data-scene="s3"] [data-k="tbl"] img { border-radius: 17px; }   /* 꼬리표 '사진 자리'가 카드 밖으로 보이게 · 그림 모서리만 둥글게 */
  /* 근로자 휴대폰: 실사 옆에서 크게(엔진) → 끝 자리 280 단위(큰 판을 줄임) */
  [data-scene="s4"] [data-k="wphone"] { transform-origin: 0 0; scale: 0.8333; }
}

/* ---- 6. 휴대폰 · 좁은 화면(판 350×420) ---------------------------------------------------- */
@media (max-width: 1023px) {
  .rk-board { aspect-ratio: var(--mbw) / var(--mbh); max-width: 380px; }
  .rk-part, .rk-tag:not(.rk-tag--in) {
    left: calc(var(--mx) * 100% / var(--mbw)); top: calc(var(--my) * 100% / var(--mbh)); width: calc(var(--mw) * 100% / var(--mbw));
  }
  .rk-board [data-m="0"] { display: none !important; }
  .rk-board [data-mend="0"] { opacity: 0; }                /* 휴대폰 끝 장면에서는 빠지는 부품 */
  .rk-crop { height: calc(var(--mh) * 100% / var(--mbh)); } /* 판 높이에 맞춰 위(또는 엔진이 정한 쪽)만 보이는 창 */
  [data-scene="hero"] [data-k="pgC"] { aspect-ratio: auto; rotate: -1deg; }
  .rk-set { height: calc(var(--mh) * 100% / var(--mbh)); }
  .rk-set__in { translate: 0 -86%; }
  .rk-win { height: calc(var(--mh) * 100% / var(--mbh)); }
  /* 쪽 더미 = 위쪽 창 하나. 쪽은 같은 자리에서 갈아 끼운다(겹쳐 쌓지 않는다). --mo = 쪽 안에서 보이는 자리(쪽 높이의 %) */
  .rk-pile {
    aspect-ratio: auto; height: calc(var(--mh) * 100% / var(--mbh)); overflow: hidden;
    background: #fff; border: 1px solid var(--cm-line-2); border-radius: 14px; box-shadow: 0 2px 6px rgba(23, 40, 90, 0.05), var(--cm-shadow-3);
  }
  .rk-pile > .rk-pg, .rk-pile > .rk-pg--wide { width: 100%; translate: none; rotate: none; scale: none; border: 0; border-radius: 0; box-shadow: none; transform: translateY(calc(var(--mo, 0) * 1%)); }
  .rk-pile > .rk-pg:not([data-i="0"]) { opacity: 0; }
  .rk-tbl { height: calc(var(--mh) * 100% / var(--mbh)); }
  .rk-card, .rk-set__frame, .rk-grow__frame { border-radius: 14px; }
  .rk-phone { border-radius: 24px; }
  .rk-phone--sm { border-radius: 18px; }
  .rk-photo { border-radius: 16px; }
  .rk-ring { border-radius: 8px; }
  .rk-ring--dot { border-radius: 999px; }
  .rk-band { aspect-ratio: 350 / 120; }   /* r2: 둘째 줄 '5개 중 5개…'가 아래 테두리에 붙지 않게(위아래 약 5px) */
  .rk-card.rk-band > img { object-position: 50% 34.85%; }
  [data-scene="s3"] [data-k="tagCam"] { left: 84.4%; top: 30.55%; transform: translateX(-100%); }   /* 카드 안 카메라 왼쪽(잘리지 않게) */
  /* r3(P1): 좁은 화면 전용 그림(p-tbl-m 518×536 · p-std-choice-m 400×230)의 주석 자리(box.json). 마크업 인라인 값을 이기려고 !important */
  [data-scene="s3"] [data-k="rC1"] { --rx: 86.1 !important; --ry: 31.7 !important; --rw: 6.18 !important; --rh: 5.97 !important; }
  [data-scene="s3"] [data-k="rC2"] { --rx: 86.1 !important; --ry: 54.5 !important; --rw: 6.18 !important; --rh: 5.97 !important; }
  [data-scene="s2"] [data-k="rChoice"] { --rx: 49.75 !important; --ry: 23.35 !important; --rw: 47.5 !important; --rh: 71.3 !important; }
  [data-scene="s4"] [data-k="rApp"] { top: 11.86%; height: 24.9%; }                                /* 표지 창(위쪽 205 단위)에 맞춘 결재란 자리 */
  [data-scene="s4"] [data-k="cover"] { rotate: none; }
  [data-scene="s2"] [data-k="choice"] { z-index: 2; }   /* r3(P4): 공정 카드를 밑에 깔고 표준 길 카드만 걷어 냄 */

  /* 장면: 위에 제목 · 칩 줄(옆으로 미는 줄), 아래 무대 */
  .rk-copy .min-h2 { font-size: clamp(21px, 6.2vw, 30px); }
  .rk-chips {
    flex-wrap: nowrap; gap: 8px; margin: 12px calc(-1 * var(--cm-gutter)) 0; padding: 0 var(--cm-gutter) 2px;
    overflow-x: auto; scrollbar-width: none; scroll-padding-inline: var(--cm-gutter); position: relative;
    /* 켜진 칩으로 줄을 밀 때 앞 칩 꼬리가 왼쪽 끝에 조각으로 남지 않게(움직이지 않는 가장자리 가림) */
    -webkit-mask-image: linear-gradient(90deg, transparent 0 12px, #000 var(--cm-gutter) calc(100% - var(--cm-gutter)), transparent calc(100% - 12px));
    mask-image: linear-gradient(90deg, transparent 0 12px, #000 var(--cm-gutter) calc(100% - var(--cm-gutter)), transparent calc(100% - 12px));
  }
  .rk-chips::-webkit-scrollbar { display: none; }
  /* 줄 끝 빈 꼬리(엔진이 마지막 칩을 거터에 맞출 만큼만 늘림 · 사이 간격 8px 은 상쇄) */
  .rk-js .rk-chips::after { content: ""; flex: none; width: var(--rk-tail, 0px); margin-left: -8px; }
  .rk-chip { flex: none; min-height: 36px; padding: 0 14px 0 12px; font-size: 14px; gap: 8px; }
  .rk-chip > i { width: 7px; height: 7px; }
  .rk-copy__act { margin-top: 16px; }
  .rk-js .rk-copy__act { display: none; }                   /* 핀 안에서는 무대 높이를 지킨다(같은 링크가 첫 화면 · 상담 띠에 있다) */
  .rk-js .rk-pin { --rk-dock: 76px; }
  .rk-js .rk-pin > .rk-grid { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .rk-js .rk-stage { flex: 1 1 auto; height: auto; }
  .rk-js .rk-scene .rk-plate {
    --rk-bw: var(--mbw); --rk-bh: var(--mbh);
    width: min(100cqw, calc(100cqh * var(--rk-bw) / var(--rk-bh)), 380px);
  }
  .rk-hero__stage { max-width: 420px; width: 100%; margin-inline: auto; }
}
/* 태블릿 세로: 좁은 판을 더 크게(양옆 빈자리 줄임) */
@media (min-width: 640px) and (max-width: 1023px) {
  .rk-board { max-width: 560px; }
  .rk-js .rk-scene .rk-plate { width: min(100cqw, calc(100cqh * var(--rk-bw) / var(--rk-bh)), 560px); }
}
/* r2: 태블릿 첫 화면 무대도 장면 판과 같은 560(표지 글자 약 10px · 768×1024 에서 무대가 접힘 위) */
@media (min-width: 768px) and (max-width: 1023px) {
  .rk-hero__stage { max-width: 560px; }
}
/* 아이폰 SE 처럼 아주 낮은 화면: 핀 동안 독을 숨기고(엔진이 html[data-dock-off]) 그 자리를 무대에 */
@media (max-width: 1023px) and (max-height: 600px) {
  .rk-js .rk-pin { --rk-dock: 16px; }
}
/* r3(P7): 아이폰 SE 사파리(375×553) · 360×600 처럼 낮은 휴대폰 화면 = 글 칸을 조이고 판에 높이를 줌(판 폭 282 → 300 넘게) */
@media (max-width: 767px) and (max-height: 600px) {
  .rk-js .rk-pin { padding-top: 6px; }
  .rk-js .rk-pin > .rk-grid { gap: 6px; }
  .rk-copy .min-h2 { font-size: 20px; line-height: 1.25; }
  .rk-chips { margin-top: 8px; }
  .rk-chip { min-height: 32px; }
}
/* r3(P2): 휴대폰 첫 화면 끝 장면 표지 쪽을 판 폭으로 넓히고 쪽 안을 1.17 배(양옆 흰 여백만 잘림 · 결재란 · 제목 · 사업장 개요는 그대로) */
@media (max-width: 767px) {
  [data-scene="hero"] [data-k="pgC"] { --mx: 0 !important; --mw: 350 !important; }
  [data-scene="hero"] [data-k="pgC"] > img { transform-origin: 50% 0; scale: 1.17; }
}
@media (max-width: 480px) {
  .rk-hero__actions .cm-btn { min-height: 56px; }
}

/* ---- 7. 설정 존중 ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .rk-chip { transition: none; }
}
/* 감속 모드 휴대폰: 핀 없이 끝 장면 부품을 위에서 아래로 쌓는다(휴대폰 끝 장면에서 빠지는 부품도 보임 = 이야기가 이어지게) */
@media (max-width: 1023px) {
  .rk-still .rk-scene .rk-board { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .rk-still .rk-scene .rk-board > .rk-part:not(.rk-tr) { position: relative; left: auto; top: auto; width: 100%; }
  .rk-still .rk-scene .rk-board [data-mend="0"] { opacity: 1; }
  .rk-still .rk-scene .rk-pile { height: auto; aspect-ratio: 350 / 270; }
  .rk-still .rk-scene .rk-pile > .rk-pg { transform: none; }
  .rk-still .rk-scene .rk-crop, .rk-still .rk-scene .rk-tbl { height: auto; }
  .rk-still .rk-scene .rk-win { height: auto; aspect-ratio: 350 / 432; }   /* r2: 켜진 줄 넷이 다 보이게(핀 모드 좁은 창과 같은 비율) */
  .rk-still .rk-scene .rk-board > .rk-phone:not(.rk-tr), .rk-still .rk-scene .rk-board > .rk-pg:not(.rk-tr) { width: 75%; }
}
@media (prefers-contrast: more) {
  .rk-card, .rk-pg, .rk-phone { border-color: var(--cm-grey-500); box-shadow: none; }
  .rk-tag { box-shadow: 0 0 0 1px var(--cm-ink); }
}

/* ==== 데모(11-02 5판 · 위험성평가 · #rk-demo) ====
   방문자에게 누르라고 하지 않음(5판 대표 '저 버튼 유도하는 게 문제') — 실제 근로자 앱 녹화가 저절로 돌고 되풀이 · 화면 밖이면 멈춤.
   틀 = 장면 4와 같은 .rk-phone · .rk-card · .rk-ring. 직원이 누르는 자리 = 손가락 물결(.rkd-tap) · 화면 넘어감 = 앱처럼 밀려 들어옴
   · 왼쪽 그림은 겹쳐 바뀜(.is-off) · 끝 장면 보라 테 = 가리키는 주석(누를 곳 아님) · 움직임 줄임 설정이면 끝 장면 한 장. */
.rkd { --rkd-ease: cubic-bezier(.22, .72, .18, 1); }
.rkd .rk-ring { --rk-ring: var(--cm-violet-600, #4c00ff); }
.rkd__h { text-align: center; margin-bottom: clamp(28px, 4vw, 48px); }
.rkd__stage { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 4vw, 56px); align-items: center; max-width: 920px; margin: 0 auto; }

/* 처음 보일 때 한 번 떠오름(데모 스크립트가 붙었을 때만 · 안 붙으면 그냥 보임) */
.rkd-side, .rkd-phone { transition: opacity .7s var(--rkd-ease), transform .8s var(--rkd-ease); }
.rkd__stage.rkd-js:not(.is-in) .rkd-side, .rkd__stage.rkd-js:not(.is-in) .rkd-phone { opacity: 0; transform: translateY(14px); }
.rkd__stage.is-in .rkd-phone { transition-delay: .12s; }

/* 왼쪽: 우리 스티커 실사 ↔ 관리자 보고서 관리 = 같은 칸에 겹쳐 바뀜 */
.rkd-side { display: grid; min-width: 0; }
.rkd-side > figure { grid-area: 1 / 1; align-self: center; position: relative; margin: 0; transition: opacity .6s var(--rkd-ease), transform .7s var(--rkd-ease); }
.rkd-side > figure img { display: block; width: 100%; height: auto; }
.rkd-side > .is-off { opacity: 0; transform: translateY(10px) scale(.985); pointer-events: none; }
.rkd-field { overflow: hidden; }
.rkd-field img { transform-origin: 47.5% 35%; transition: transform 1.6s var(--rkd-ease); }   /* 다가가는 곳 = 우리 스티커(tag-ours 실측) */
.rkd__stage[data-step="tag"] .rkd-field img { transform: scale(1.07); }
.rkd-ring-tag, .rkd-ring-adm, .rkd-ring-rep { opacity: 0; transition: opacity .5s ease; }
.rkd__stage[data-step="tag"] .rkd-ring-tag { opacity: 1; transition-delay: .35s; }
.rkd__stage[data-step="report"] .rkd-ring-adm, .rkd__stage[data-step="report"] .rkd-ring-rep { opacity: 1; transition-delay: .5s; }

/* 휴대폰: 녹화 프레임(포스터 그림 위에 캔버스 두 장) · 넓은 화면은 화면 높이에 맞춰(900 높이 ≈ 276px) */
.rkd-phone { position: relative; width: clamp(260px, calc((100svh - 300px) * 0.46), 300px); justify-self: center; -webkit-user-select: none; user-select: none; }
.rkd-poster { display: block; width: 100%; height: auto; aspect-ratio: 392 / 852; }
.rkd-cv { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: transform .46s var(--rkd-ease), filter .46s var(--rkd-ease), opacity .4s ease; will-change: transform; }
.rkd-phone.is-ready .rkd-cv { opacity: 1; }
.rkd-cv.is-fade { opacity: 0 !important; }
.rkd-ring-rep { z-index: 3; }

/* 직원이 누르는 자리 손가락 물결 */
.rkd-tap { position: absolute; z-index: 5; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(25, 31, 40, 0.18); pointer-events: none; animation: rkd-tap .6s ease-out forwards; }
@keyframes rkd-tap { from { transform: scale(.25); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }

@media (max-width: 1023px) {
  .rkd__stage { grid-template-columns: minmax(0, 1fr); max-width: 520px; gap: 24px; }
  .rkd-side { order: 2; }
  .rkd-field { display: none; }                       /* 휴대폰 폭 = 휴대폰 녹화만 · 보고서가 나오면 관리자 보고서 관리가 아래에 */
  .rkd-side > .rkd-admin.is-off { display: none; }
}
@media (max-width: 767px) {
  .rkd-phone { width: min(300px, 82vw); }
}
@media (prefers-reduced-motion: reduce) {
  .rkd-side, .rkd-phone, .rkd-side > figure, .rkd-cv, .rkd-field img { transition: none; }
  .rkd-tap { display: none; }
}