/* ==========================================================================
   화면정의서 (/result)

   ⚠ 이 페이지에는 폰도 단계 칩도 없다(전폭). 인쇄가 깨지지 않으려면 그래야 한다.
   ⚠ 탭 전환을 `hidden` 으로 한다. `hidden` 은 인쇄에도 먹으므로 '현재 탭 인쇄' 가
     화면 그대로 나온다. `display:none` 을 인쇄에서 되살리는 트릭은 쓰지 않는다.
   ========================================================================== */

.gate__in { padding: 80px 0; text-align: center; }
.gate__in p { margin: 12px 0 22px; color: var(--text-2); }

/* ⚠ `.rs { padding-bottom: 80px }` 이었다. 진행요청 줄을 아래로 밀어 붙이자
     그 80px 이 **줄 아래 빈 자리**로 남았다(실측 2026-09-13: 1440x1600 에서
     줄 바닥이 1520, 창은 1600). 여백이 필요한 것은 본문이지 줄이 아니다.
     본문 쪽으로 옮긴다 — 줄은 제 패딩을 갖고 있다. */
.rs-body { padding-bottom: 56px; }

/* ---------- 머리 ---------- */
/* ⚠ 전폭 회색 띠(background: var(--bg-2))를 걷어냈다(2026-09-13).
     배너 구역(투명) → 머리(회색 전폭) → 탭(반투명 흰 전폭) → 본문(투명) 으로
     층이 네 번 갈렸는데 내용은 이어진다. 게다가 배너는 흰 바탕 위 회색 카드라
     **같은 회색이 한 번은 카드, 한 번은 배경**이었다. 바탕은 하나로 두고
     구분은 선 하나로만 한다. */
.rs-head { border-bottom: 1px solid var(--line); background: var(--bg); }
/* 이 화면의 기본 바탕. 띠를 없앤 만큼 문서가 한 장으로 읽힌다.
   ⚠ 짧은 탭(01 브랜드 등)에서는 내용이 화면보다 짧다. 그때 진행요청 줄이
     문서 흐름대로 중간에 서고 **그 아래가 통째로 비어 보였다**(사용자 지적
     2026-09-13). 세로 플렉스로 두고 그 줄을 아래로 밀어, 내용이 짧으면
     화면 바닥에 붙게 한다. 길면 지금처럼 sticky 로 따라온다. */
.rs {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--nav-h));
}
.rs > .rs-go { margin-top: auto; }
/* 인쇄 단추 중 기본인 것. 채우지 않고 테두리만 세운다. */
.rs-head .btn.is-main { border-color: var(--text); color: var(--text); }
.rs-head__in {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  /* ⚠ `padding: 28px 0 24px` 이었다. 단축 속성이라 `.wrap` 의
       padding-inline: 40px 을 **0 으로 덮어썼다.** 실측(2026-09-13): 그래서
       제목·탭만 x=80 에서 시작하고 배너·표·받아가기는 x=120 이라 문서 한가운데서
       왼쪽 기준선이 40px 꺾였다. 세로 여백은 padding-block 으로만 준다. */
  padding-block: 28px 24px;
  flex-wrap: wrap;
}
.rs-head__t { flex: 1 1 320px; min-width: 0; }
.rs-head__h {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -.03em;
}
.rs-head__d { margin: 7px 0 0; font-size: var(--fs-sm); color: var(--text-2); }
/* ⚠ `flex: none` + 감싸지 않음이었다. 2026-09-13 에 [개발 현황 대시보드 보기 →]가
     붙으면서 단추가 둘이 되자 320px 에서 이 묶음이 357px 로 벌어져 **문서가
     373px 로 넘쳤다**(실측). 줄바꿈을 허용하고 좁으면 각자 한 줄을 쓰게 한다. */
.rs-head__b { flex: 0 1 auto; display: flex; gap: 8px; flex-wrap: wrap; }
/* ⚠ `flex: 1 1 100%` 였다. 두 단추가 **각자 한 줄**을 차지해 [전체 인쇄]가
     358px 짜리 큰 덩어리가 됐다(실측 390px). 인쇄는 주 행동이 아닌데 화면에서
     제일 컸다. 한 줄에 둘을 나눠 세운다. */
@media (max-width: 560px) {
  .rs-head__b { width: 100%; flex-wrap: nowrap; }
  .rs-head__b > * { flex: 1 1 0; min-width: 0; }
  .rs-head__b .btn { width: 100%; justify-content: center; padding-inline: 10px; }
}

/* ---------- 탭 ---------- */
.rs-tabs {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(140%) blur(8px);
}
.rs-tabs__in {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  /* ⚠ `padding: 8px 0` 이 `.wrap` 의 좌우 패딩을 지웠다(rs-head__in 과 같은 사고). */
  padding-block: 8px;
}
.rs-tabs__in::-webkit-scrollbar { height: 0; }
/* ⚠ 실측 390px: 탭줄 안쪽이 596px 이라 절반이 화면 밖이다. 스크롤은 되지만
   **더 있다는 것을 알 수 없다** — 오른쪽 끝을 흐려 그 사실을 보인다. */
@media (max-width: 720px) {
  .rs-tabs { position: relative; }
  .rs-tabs::after {
    content: ''; position: absolute; right: 0; top: 0; bottom: 1px;
    width: 34px; pointer-events: none;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .96));
  }
  /* ⚠ 알약이던 시절의 패딩(9px 13px)이 남아 있었다. 지금은 밑줄 탭이라
     좌우 패딩이 들어가면 밑줄이 글자보다 넓어지고, `margin-right: 20px` 까지
     더해져 **탭 간격이 제각각**으로 보인다. 한 규격으로 맞춘다.
     ⚠ 이 줄은 `overflow-x: auto` 라 옆으로 민다. 꺾이지 않는다(`flex: none`). */
  .rs-tab { padding: 9px 2px; margin-right: 16px; font-size: var(--fs-xs); }
  .rs-tab:last-child { margin-right: 0; }
}
/* ⚠ 탭은 **행동이 아니라 지금 어디인가**를 알리는 표시다. 보라 알약으로 채우면
     단추로 읽혀, 한 화면에서 [내 앱 현황 보기]·[전체 인쇄] 와 같은 무게가 된다
     (실측 2026-09-13: 한 화면에 보라 채움이 셋이었다). 밑줄로 바꾼다.
   ⚠ 알약(radius 99px)도 걷어낸다. 이 화면의 반경은 카드 14 · 컨트롤 9 두 가지다. */
.rs-tab {
  flex: none;
  padding: 10px 2px;
  margin-right: 20px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-3);
  cursor: pointer;
  white-space: nowrap;
}
.rs-tab:hover { color: var(--text); }
.rs-tab.is-on {
  color: var(--text);
  font-weight: 800;
  border-bottom-color: var(--text);
}

/* ---------- 본문 ----------
   ⚠ 여백에 강약을 준다(2026-09-13). 전에는 간격이 14 · 16 · 18 · 22 · 30 · 42 로
     전부 비슷해서, 무엇이 한 묶음인지를 여백이 말해 주지 못했다.
     구역 사이는 크게 벌리고(64px) 묶음 안쪽은 바짝 붙인다(10px). */
.rs-body { padding-top: 48px; }

.rs-sec { margin-bottom: 64px; }
.rs-sec:last-child { margin-bottom: 0; }
/* ⚠ 제목과 본문의 대비를 키운다. 21px vs 14px 은 차이가 작아 위계가 안 서고,
     그 부족분을 색(보라)으로 메우게 된다. 활자만으로 층을 만든다. */
.rs-sec__h {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 10px;
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -.035em;
}
/* 번호는 소제목의 일부다. 눈에 먼저 들어오면 안 된다.
   ⚠ 지우지 말 것. 전체 보기에서는 묶음 여섯을 가르는 **유일한 구분자**이고,
     인쇄에서는 탭이 빠지므로 여기가 없으면 결재 문서에 제목이 사라진다.
     화면에서만 눌러 두고 인쇄는 아래 @media print 가 다시 진하게 만든다.
   ⚠ 칩(테두리 + 채움 + 반경 6px)을 걷어냈다. 반경을 한 가지 더 만들면서
     번호를 상자에 가두면 제목이 둘로 쪼개져 읽힌다. 맨 글자로 두고
     색과 굵기로만 물린다. */
.rs-sec__no {
  flex: none;
  color: var(--text-3);
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -.02em;
}
.rs-sec__d {
  margin: 0 0 14px;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
}
.rs-sub {
  margin: 26px 0 10px;
  font-size: var(--fs-body);
  font-weight: 800;
}

/* ---------- 접는 상자 (옵션 표) ----------
   ⚠ 옵션 표는 줄이 서른 개를 넘어 '05 상품' 탭 길이의 대부분이었다.
     기본은 접고, 몇 줄인지 제목에 적는다(모르면 펼칠지 말지를 못 정한다). */
.rs-fold {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}
.rs-fold__h {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 16px;
  font-size: var(--fs-body); font-weight: 800;
  cursor: pointer; list-style: none;
  border-radius: 12px;
}
.rs-fold__h::-webkit-details-marker { display: none; }
.rs-fold__h:hover { background: var(--bg-2); }
.rs-fold[open] .rs-fold__h { border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; }
.rs-fold__n {
  padding: 2px 9px; border-radius: 999px;
  background: var(--bg-2); color: var(--text-3);
  font-size: var(--fs-xs); font-weight: 700;
}
.rs-fold__cv {
  margin-left: auto; flex: none;
  width: 8px; height: 8px;
  border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.rs-fold[open] .rs-fold__cv {
  transform: rotate(-135deg) translate(-2px, -2px);
  border-color: var(--brand);
}
.rs-fold > .rs-sub__d { margin: 14px 16px 0; }
.rs-fold > .rs-scroll { margin: 12px 16px 16px; }

/* ---------- 표 ----------
   ⚠ 좁은 화면에서는 표만 옆으로 민다. 문서 전체가 가로로 스크롤되면 안 된다. */
.rs-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  table-layout: fixed;
}
.rs-tbl th, .rs-tbl td {
  /* ⚠ 11px 은 결재 문서치고 빡빡했다. 14px 로 벌린다. */
  padding: 14px 16px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.rs-tbl th {
  background: var(--bg-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-2);
  white-space: nowrap;
}
/* 칸 폭. ⚠ 눈으로 정하지 않았다 — table-layout 을 풀어 **내용이 요구하는 폭**을
   쟀다(2026-09-12): 항목 칸 최대 242px · 값 칸 최대 418px.
   1,200px 표에서 242px 이 곧 20% 라 항목 20% 가 맞다.
   ⚠ 항목을 더 줄이면 '첫 화면에 띄울 메뉴' 같은 긴 이름이 두 줄이 된다. */
/* ⚠ 항목 칸을 18% 로 줄이지 않았다. 실측(table-layout 을 풀어 잰 값)으로
   **항목 칸이 최대 242px 을 요구**하는데 1,200px 표에서 18% 는 216px 이라
   '첫 화면에 띄울 메뉴' 같은 긴 이름이 두 줄이 된다. 20% 를 지킨다.
   값 칸을 26 -> 32% 로 넓힌 몫은 설명 칸에서 뺀다. */
.rs-tbl__k { width: 20%; }
.rs-tbl__v { width: 32%; }
.rs-tbl__d { width: 48%; color: var(--text-2); }
/* ⚠ `.rs-tbl td` 가 `text-align: left` 를 갖고 있어(명시도 0,1,1) `.rs-num`(0,1,0)
     혼자서는 못 이긴다. 실측: 금액·중요도 칸이 전부 왼쪽이었다(한 번도 안 먹었다).
     선택자를 한 칸 늘려 이기게 한다. */
.rs-tbl .rs-num { text-align: right; white-space: nowrap; }
/* 칩이 들어가는 칸은 오른쪽보다 가운데가 읽힌다 */
.rs-tbl .rs-mid { text-align: center; white-space: nowrap; }

.rs-tbl--item { table-layout: auto; }
.rs-tbl--item td { font-size: var(--fs-xs); }
/* 소제목 밑 한 줄 설명 (옵션 표가 무엇에 쓰이는지) */
.rs-sub__d {
  margin: -4px 0 10px;
  font-size: var(--fs-xs);
  color: var(--text-2);
}

/* 표만 옆으로 미는 통.
   ⚠ 여섯 칸 표(옵션 표)는 390px 에서 450px 다. 억지로 줄이면 글자가 한 자씩
     끊겨 못 읽는다. 문서가 가로로 스크롤되는 것만 막고 표는 밀게 둔다.
   ⚠ `@media (max-width: 720px)` 의 `.rs-tbl { table-layout: auto }` 가
     `.rs-tbl--opt { table-layout: fixed }` 와 **명시도가 같고 뒤에 있어** 이긴다.
     그래서 좁은 화면에서는 칸 폭 지정이 풀린다. 통으로 감싸는 편이 안전하다. */
.rs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rs-scroll > .rs-tbl { min-width: 460px; }

/* 옵션 표. 줄이 서른 개를 넘으므로 글자를 줄이고 칸 폭을 못 박는다.
   ⚠ 같은 상품·세트가 이어지는 줄은 앞 칸을 비운다(renderer). 그래서
     칸 폭을 auto 로 두면 줄마다 폭이 흔들려 읽기 어렵다. */
.rs-tbl--opt { table-layout: fixed; }
.rs-tbl--opt td { font-size: var(--fs-xs); padding: 7px 10px; }
.rs-tbl--opt th { padding: 8px 10px; }
.rs-tbl--opt col.o1 { width: 17%; }
.rs-tbl--opt col.o2 { width: 17%; }
.rs-tbl--opt col.o3 { width: 26%; }
.rs-tbl--opt col.o4 { width: 14%; }
.rs-tbl--opt col.o5 { width: 10%; }
.rs-tbl--opt col.o6 { width: 16%; }
/* ⚠ `td:empty { border-top-color: transparent }` 였다. 빈 칸으로 이어 붙이던
     시절의 규칙인데, 경계를 **흐려 감추는** 방식이라 어디까지가 한 묶음인지
     눈으로 못 따라갔다. 2026-09-13 에 rowspan 병합으로 바꾸면서 지웠다.

   병합한 칸은 가운데에 세운다. 위에 붙어 있으면 여러 줄을 덮는 칸이
   무엇을 덮는지 안 보인다. */
/* ⚠ `.rs-tbl th, .rs-tbl td { vertical-align: top }` 이 명시도 0,1,1 이라
     `.rs-tbl--opt__i`(0,1,0)로는 진다. td 를 붙여 0,2,1 로 올려야 먹는다.
     실측으로 잡았다 — 안 그러면 조용히 top 인 채로 남는다. */
.rs-tbl--opt td.rs-tbl--opt__i,
.rs-tbl--opt td.rs-tbl--opt__s,
.rs-tbl--opt td.rs-mid { vertical-align: middle; }
/* 상품명은 묶음의 이름이다. 한 단 진하게 두고 줄바꿈을 막는다. */
.rs-tbl--opt td.rs-tbl--opt__i { color: var(--text); white-space: nowrap; }
.rs-tbl--opt td.rs-tbl--opt__s { color: var(--text-2); }
/* 상품이 바뀌는 줄에 굵은 선. 38줄짜리 표에서 묶음의 시작을 이것으로 찾는다. */
.rs-tbl--opt tr.is-new > td { border-top: 1px solid var(--line); }
.rs-tbl--opt tr.is-new:first-child > td { border-top: 0; }
/* 병합한 칸 사이의 세로 경계. 가로선만으로는 어느 칸이 덮고 있는지 안 보인다. */
.rs-tbl--opt__i, .rs-tbl--opt__s { border-right: 1px solid var(--line-2); }

/* ⚠ 지금은 쓰이지 않는다. 상품 표에서 옵션 칸을 빼고 옵션 표를 따로 만들었다.
     지우기 전에 물어볼 것. */


.rs-tbl--prio { table-layout: auto; }
.rs-p {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: var(--fs-xs);
  font-weight: 700;
}
.rs-p--high { background: var(--brand); color: #fff; }
.rs-p--mid { background: var(--bg-2); color: var(--text); }
.rs-p--low { background: var(--bg-2); color: var(--text-3); }
.rs-todo { color: var(--text-3); font-size: var(--fs-xs); }

/* ---------- 푸터 카드 ----------
   ⚠ 전달 안내 · 현황 코드 · 내려받기가 따로 떠 있어 **본문 표의 연장**처럼
     보였다. 하나로 묶어 '위는 읽는 것, 아래는 가져가는 것' 으로 가른다. */



/* ⚠ `.rs-dl` 정의가 여기와 아래 '받아 가기' 두 곳에 있었다(2026-09-13 에 합쳤다).
     뒤엣것이 이겨서 padding · margin · background · flex 를 덮어쓰고 앞엣것의
     테두리만 살아남아, 고칠 때 어느 쪽이 먹는지 헷갈렸다. 정의는 아래 한 곳이다. */
.rs-dl__b { display: flex; gap: 8px; flex-wrap: wrap; }
.rs-dl__n {
  margin: 14px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--text-3);
}

@media (max-width: 720px) {
  .rs-tbl { table-layout: auto; }
  .rs-tbl__k, .rs-tbl__v { width: auto; }
  .rs-tbl th, .rs-tbl td { padding: 9px 8px; font-size: var(--fs-xs); }
}

/* ⚠ 폰에서 세 칸은 못 읽는다. 실측(390px): 78 / 108 / 172px 로 갈려 값 하나가
     대여섯 줄로 접히고 칸끼리 높이가 안 맞아 **줄맞춤이 통째로 무너졌다**
     (사용자 지적 2026-09-13).
   ⚠ 칸을 지우지 않는다. 해설은 이 문서의 값이다. 대신 **세로로 쌓는다** —
     한 줄이 [항목] / [값] / [해설] 세 층이 된다. 폭 경쟁이 사라지므로
     글자는 그대로 두고도 읽힌다.
   ⚠ 머리줄은 감춘다. 쌓으면 어느 칸인지는 자리로 알 수 있고, 머리만 남으면
     세 낱말이 세로로 떠 있게 된다.
   ⚠ 상품 표 · 옵션 표는 **그대로 둔다.** 그쪽은 옆으로 미는 통(.rs-scroll)이
     따로 있고, 칸이 여섯이라 쌓으면 오히려 못 읽는다. */
@media (max-width: 560px) {
  /* ⚠ **중요도 표(.rs-tbl--prio)도 함께 쌓는다.** 처음에 이것만 빼 놨더니
       다섯 칸(구분·기능·중요도·공수·설명)이 390px 안에서 통째로 뭉개져
       글자가 한 자씩 끊겨 내렸다(사용자 지적 2026-09-13).
     ⚠ 상품 표 · 옵션 표는 여전히 뺀다. 옆으로 미는 통이 따로 있고 칸이
       여섯이라 쌓으면 오히려 못 읽는다. */
  .rs-tbl.rs-stack { display: block; }
  .rs-tbl.rs-stack thead { display: none; }
  .rs-tbl.rs-stack tbody { display: block; }
  /* 줄 하나가 카드 하나다. 흰 바탕 · 얇은 테두리 · 같은 안쪽 여백. */
  .rs-tbl.rs-stack tr {
    display: block;
    margin-bottom: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg);
  }
  .rs-tbl.rs-stack tr:last-child { margin-bottom: 0; }
  /* ⚠ 모든 글자의 **왼쪽 시작선이 같아야 한다.** 칸마다 패딩을 따로 주면
     1~2px 씩 어긋나 '줄맞춤이 안 맞는' 느낌이 여기서 온다. 패딩은 카드에만. */
  .rs-tbl.rs-stack td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    text-align: left;
  }
  /* ① 라벨 — 작게 · 흐리게 */
  .rs-tbl.rs-stack .rs-tbl__k,
  .rs-tbl.rs-stack .rs-tbl__g {
    font-size: var(--fs-xs); font-weight: 600;
    color: var(--text-3); letter-spacing: -.01em;
  }
  .rs-tbl.rs-stack .rs-tbl__g:empty { display: none; }
  /* ② 값 — 이 카드의 주인공 */
  .rs-tbl.rs-stack .rs-tbl__v,
  .rs-tbl.rs-stack .rs-tbl__f {
    margin-top: 3px;
    font-size: var(--fs-body); font-weight: 700; color: var(--text);
    line-height: 1.35;
  }
  .rs-tbl.rs-stack .rs-tbl__f b { font-weight: 700; }
  /* ③ 설명 — 옅은 상자에 넣어 값과 갈라 놓는다 */
  .rs-tbl.rs-stack .rs-tbl__d {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    font-size: var(--fs-xs); line-height: 1.75; color: var(--text-2);
  }
  /* ④ 중요도 · 공수는 한 줄에 나란히 */
  .rs-tbl.rs-stack .rs-tbl__p,
  .rs-tbl.rs-stack .rs-tbl__e {
    display: inline-block; vertical-align: middle;
    margin-top: 8px; text-align: left;
  }
  .rs-tbl.rs-stack .rs-tbl__e { margin-left: 10px; font-size: var(--fs-xs); }
  /* 값 칩은 쌓인 카드에서 줄바꿈이 자연스러워야 한다 */
  .rs-tbl.rs-stack .rs-v { margin-right: 8px; }
}

/* ---------------- 개발 진행 요청 ----------------
   ⚠ 받아 가기 **아래**, 문서의 맨 끝에 둔다. 여기가 12장 동선의 끝(확정 → 개발)이다.
     2026-09-13 에 받아 가기와 위아래를 맞바꿨다. 그전에는 '내보내기 위에 둔다' 고
     적혀 있었는데, 같은 주석이 '동선의 끝' 이라고도 해서 앞뒤가 어긋나 있었다.
     담당자는 파일을 받아 사내 결재를 거친 뒤에 요청한다. 그 순서대로 세운다.
   ⚠ 인쇄에는 안 나간다(`rs-hide`). 결재 문서에 버튼이 찍히면 곤란하다. */
/* 표 바로 아래는 이제 받아 가기다. 진행 요청은 그 아래에 한 칸 띄워 선다. */
/* ⚠ **화면 아래에 붙는다**(사용자 지시 2026-09-13). 탭을 01~06 어느 것으로 바꾸든,
     위아래로 얼마나 굴리든 이 줄이 늘 보여야 한다. 전에는 문서 맨 끝이라
     바닥까지 내려가야 나왔다.
   ⚠ `fixed` 가 아니라 `sticky` 다. fixed 로 하면 문서 끝에서도 본문 위에 얹혀
     마지막 줄을 덮는다. sticky 는 제자리에 닿으면 멈춘다.
   ⚠ 위쪽 탭 줄이 z-index 20 이다. 그보다 낮게 둔다 — 굴릴 때 탭이 위를
     지나가야지 이 줄이 탭을 덮으면 안 된다.
   ⚠ 인쇄에는 안 나간다(`rs-hide`). 결재 문서에 단추가 찍히면 곤란하다. */
.rs-go {
  position: sticky;
  bottom: 0;
  z-index: 15;
  margin-top: 18px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(140%) blur(8px);
}
/* ⚠ 브랜드색 채움(1.5px solid --brand + --brand-tint)을 걷어냈다. 이 페이지에서
     가장 강한 색이라 크기와 색 둘로 시선을 뺏었다. 문서 끝의 **확인 영역**이므로
     윗선 하나로 본문과 가르고 바탕은 눌러 둔다. 주 행동 신호는 단추가 맡는다.
   ⚠ 상자를 없애지 말 것. rsdoc 이 '전달 전 진행요청 상자가 있다'(goH > 100)를
     본다. 전달한 뒤에는 통째로 사라지고 맨 위 한 줄 배너가 대신한다. */
.rs-go__box {
  /* ⚠ 14px 라운드에 사방 테두리였다. 다른 블록이 전부 평평해진 마당에 여기만
     둥근 상자면 그것만 떠 보인다. 반경 0 · 윗선 하나로 맞춘다.
     (이 화면의 반경은 블록 0 · 컨트롤 9 · 상태 배지 999 셋뿐이다.) */
  padding: 0;
  border: 0;
  border-top: 2px solid var(--text);
  border-radius: 0;
  background: none;
}

/* 늘 보이는 한 줄. 접었을 때 남는 것이 이것이다.
   ⚠ `justify-content: space-between` 이었다. 그러면 화살표가 **오른쪽 끝**으로
     밀려 제목에서 1,000px 넘게 떨어진다. 여는 손잡이가 제목과 딴 곳에 있으면
     무엇을 여는 것인지 안 이어진다(사용자 지적 2026-09-13).
   ⚠ `1fr auto 1fr` 로 세 칸을 만든다. 가운데 칸이 화면 **가로 가운데**에
     고정되므로 제목 길이가 바뀌어도 화살표는 안 움직인다.
     flex + margin auto 로는 제목 길이에 따라 가운데가 흔들린다. */
.rs-go__hd {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rs-go__h {
  font-size: var(--fs-lead);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
}
.rs-go__hd:hover .rs-go__h { color: var(--brand); }
/* 화살표. 옵션 표의 `.rs-fold__cv` 와 같은 모양이다 — 이 문서에서 접는 것은
   전부 같은 표시를 쓴다. */
/* 가운데 칸에 놓이는 손잡이. ⚠ 45도 돌린 사각형은 바깥 상자가 대각선만큼
   넓어진다(9px → 약 12.7px). 오른쪽 끝에 뒀을 때 줄이 2px 넘쳤던 이유다.
   가운데로 옮겨 그 문제도 같이 사라졌지만, 눌리는 자리는 넓게 둔다. */
.rs-go__cv {
  justify-self: center;
  display: block;
  width: 10px; height: 10px;
  border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s ease, border-color .22s ease;
}
.rs-go__hd:hover .rs-go__cv { border-color: var(--brand); }
.rs-go__hd[aria-expanded="true"] .rs-go__cv {
  transform: rotate(-135deg) translate(-2px, -2px);
  border-color: var(--brand);
}
.rs-go__hd:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ⚠ `max-height` 를 쓰지 않는다. 내용 높이를 어림한 숫자를 박아야 하고,
     글이 한 줄만 늘어도 잘린다. `grid-template-rows: 0fr → 1fr` 은 **실제 내용
     높이**로 열리므로 숫자가 필요 없다.
   ⚠ 안쪽에 `overflow: hidden` 이 없으면 0fr 이어도 내용이 삐져나온다. */
.rs-go__wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s var(--ease);
}
.rs-go__wrap.is-open { grid-template-rows: 1fr; }
/* ⚠ `overflow: hidden` 만으로는 **잘려 보이지 않을 뿐** 안의 단추가 살아 있다.
     키보드로 탭을 누르면 안 보이는 [개발 진행 요청] 에 초점이 들어간다.
     `visibility: hidden` 이라야 탭 순서에서도 빠진다. 펼침이 끝난 뒤에
     보이도록 닫힐 때만 지연을 준다(열 때는 바로 보여야 내용이 따라 나온다). */
.rs-go__in {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear .28s;
}
.rs-go__wrap.is-open .rs-go__in {
  visibility: visible;
  transition-delay: 0s;
  padding-bottom: 16px;
}

.rs-go__d {
  margin: 0 0 14px;
  font-size: var(--fs-sm); line-height: 1.7; color: var(--text-2);
  max-width: 620px;
}

/* 덧붙이는 말. ⚠ 지우지 말 것 — 확정이 막혔을 때 **이유가 뜨는 자리**다. */
.rs-go__n {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs); line-height: 1.7; color: var(--text-3);
}

/* ⚠ 화면 아래에 붙는 줄이라 **높이가 곧 빼앗는 화면**이다. 실측(2026-09-13):
     1440px 에서 158px(화면의 17%)은 견딜 만한데 390px 에서 266px, 곧 **화면의
     34%** 를 먹었다. 폰에서 문서의 3분의 1을 단추 줄이 가리면 안 된다.
   ⚠ 줄이는 것은 **긴 설명**이다. 제목과 단추는 무엇을 누르는지이고,
     덧붙이는 말(`.rs-go__n`)은 확정이 막혔을 때 **이유가 뜨는 자리**라
     지우면 안 된다(build 의 goNote 가 여기에 쓴다). */
@media (max-width: 720px) {
  .rs-go__hd { padding: 13px 0; }
  .rs-go__h { font-size: var(--fs-body); }
  .rs-go__box .btn { width: 100%; justify-content: center; }
  .rs-go__n { padding-top: 10px; line-height: 1.6; }
}
/* 현황 코드는 옮겨 적는 값이다. 붙여 쓰기 쉽게 크고 넓게 둔다. */


/* ==========================================================================
   인쇄 · PDF로 저장
   ⚠ 결재용이다. 버튼·탭·상단바는 빼고 표만 나가야 한다.
   ⚠ 표가 페이지 중간에서 잘리면 읽을 수 없다. 줄 단위로 끊는다.
   ========================================================================== */
@media print {
  @page { size: A4; margin: 14mm 12mm; }

  /* ⚠ 브라우저 인쇄는 기본이 '배경 그래픽 끄기' 다. 그대로 두면 배경칠이
     안 그려져 **흰 글자가 흰 바탕에 얹힌다**.
     섹션 번호 배지와 중요도 '높음' 칩이 통째로 안 보인다.
     실측(PDF 콘텐츠 스트림을 풀어 칠 연산자를 색별로 셌다, 대조군과 대조):
     표머리·보통칩 #eee 13개 → 0개 · 배지·높음칩 #333 6개 → 1개(머리글 밑줄만).
     색을 예쁘게 살리려는 게 아니라 **글자를 보이게 하려는** 설정이다. */
  html {
    -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
  }

  .rs-hide { display: none !important; }
  body { background: #fff; }
  .rs { padding: 0; }
  .wrap { max-width: none; padding: 0; }

  .rs-head { border: 0; background: none; }
  .rs-head__in { padding: 0 0 14px; border-bottom: 2px solid #333; }
  .rs-head__h { font-size: 20pt; }
  .rs-head__d { font-size: 9pt; color: #444; }

  .rs-body { padding-top: 16px; }
  .rs-sec { margin-bottom: 20px; break-inside: auto; }
  .rs-sec__h { font-size: 13pt; break-after: avoid; }
  .rs-sec__no { background: #333; color: #fff; font-size: 9pt; }
  .rs-sub { font-size: 11pt; break-after: avoid; }

  .rs-tbl { font-size: 8.5pt; }
  .rs-tbl th, .rs-tbl td { padding: 5px 6px; border-color: #999; }
  .rs-tbl th { background: #eee; color: #000; }

  /* ⚠ 줄이 페이지를 넘어 잘리면 못 읽는다 */
  .rs-tbl tr { break-inside: avoid; }
  .rs-tbl thead { display: table-header-group; }

  .rs-p--high { background: #333; color: #fff; }
  .rs-p--mid, .rs-p--low { background: #eee; color: #000; }
  .rs-todo { color: #666; }

  /* ⚠ 인쇄에서 통을 그대로 두면 넘친 칸이 잘려 나간다 */
  .rs-scroll { overflow: visible; }
  .rs-scroll > .rs-tbl { min-width: 0; }

  /* ⚠ 접은 옵션 표는 **CSS 로 못 편다.** 닫힌 <details> 의 내용은 크롬에서
     content-visibility 로 감춰져 display 로 되돌려지지 않는다.
     result.js 의 beforeprint 가 open 을 켜 준다 — 여기서는 모양만 지운다. */
  .rs-fold { border: 0; background: none; margin-top: 14px; }
  .rs-fold__h { padding: 0; border: 0 !important; font-size: 11pt; }
  .rs-fold__n, .rs-fold__cv { display: none; }
  .rs-fold > .rs-sub__d, .rs-fold > .rs-scroll { margin-inline: 0; }

  a[href]::after { content: none; }
}

/* ---------- 값 칩 ----------
   ⚠ 통짜 하나로 두면 '픽업 · 매장 · 배달' 이 한 덩이로 읽혀 **몇 개를 골랐는지**
     한눈에 안 들어온다. ' · ' 로 쪼개 칩으로 만든다(result.js valChips).
   ⚠ 칸 배경을 칩으로 옮긴다 — 둘 다 칠하면 칩 경계가 안 보인다. */
.rs-tbl__v { background: transparent; }
/* ⚠ 반경 7px 이었다. 번호 칩 6px 과 사람 눈으로 구분이 안 되면서 서로 달랐다
     (실측 2026-09-13: 한 화면에 반경이 0·6·7·9·14·99 여섯 가지였다).
     이 화면의 반경은 **카드 14 · 컨트롤 9 두 가지**다. 칩도 9 로 맞춘다.
   ⚠ 상자 채움을 걷어냈다. 값마다 회색 상자를 두르면 표가 스프레드시트로 읽힌다.
     값은 이 표의 주인공이라 굵기와 색만으로 세운다. */
.rs-v {
  display: inline-block;
  margin: 2px 10px 2px 0;
  font-size: var(--fs-sm); font-weight: 700; color: var(--text);
  line-height: 1.6;
}
/* 값이 둘 이상일 때만 가른다. 가운뎃점은 result.js 가 아니라 여기서 그린다. */
.rs-v + .rs-v { margin-left: 0; }
.rs-v + .rs-v::before {
  content: '·';
  margin-right: 10px;
  color: var(--line);
  font-weight: 400;
}
.rs-none { font-size: var(--fs-xs); color: var(--text-3); }

/* ⚠ 옛 배너·받아가기 규칙은 지웠다. 아래 "한 문법으로" 블록이 유일하다 —
   두 벌이 겹쳐 display:flex 와 패딩 40px 이 새 카드 규칙을 덮고 있었다. */

/* ==========================================================================
   한 문법으로 (2026-09-12)
   ⚠ 블록마다 모양이 달랐다 — 머리는 전폭 띠, 배너도 전폭 띠에 경고는 카드 밖
     맨몸 <p>(배경 투명·테두리 0·폭 1280), 표는 맨몸, 받아가기는 윗줄 하나.
     그래서 "하나의 폼으로 안 읽힌다". 전부 같은 카드로 맞춘다.
   ========================================================================== */

/* ---------- 공통 문법 (2026-09-13 에 카드에서 선으로 바꿨다) ----------
   ⚠ 전에는 `1px 테두리 + 14px 라운드 + 회색 채움` 카드였다. 배너도 카드,
     표도 카드, 받아 가기도 카드. 같은 상자가 세 번 반복되니 층이 없어 화면이
     평평해지고, 결재 문서가 아니라 대시보드로 읽혔다.
   ⚠ 이건 **고객사가 받아 사내에 올리는 문서**다. 참고해야 할 것은 대시보드가
     아니라 보고서다. 보고서는 색이 거의 없고 선이 얇고 여백이 크다.
     그래서 테두리를 걷고 **가로선 하나**로만 가른다.
   ⚠ 배너는 2026-09-13 에 **없얰다**(사용자 결정). 이제 둘이다 — 표와 받아 가기.
     둘은 여전히 같은 폭 · 같은 왼쪽 · 같은 반경(0)이어야 한다. */
.rs-card, .rs-dl {
  border: 0;
  border-radius: 0;
  background: none;
}

/* ---------- 표 ----------
   ⚠ 카드 채움(background:#fff + overflow:hidden)을 걷어냈다. 모서리로 표를
     자를 일이 없어졌다. 표는 위아래 가로선 사이에 그냥 놓인다. */
.rs-card {
  background: none;
  overflow: visible;
}
/* ⚠ 격자(모든 셀 테두리)를 가로선만 남긴다. 바깥은 카드가 맡는다.
   세로줄까지 그으면 칸이 좁아 보이고 보고서보다 스프레드시트로 읽힌다. */
/* ⚠ 줄 사이는 --line-2(#f0f1f4), 머리 밑만 --line(#e5e7eb). 선을 한 단 누르면
     같은 표에서 **글자가 앞으로** 나온다. 머리 밑은 남겨야 층이 안 무너진다.
   ⚠ 인쇄는 아래 @media print 가 #999 로 다시 진하게 잡는다. 종이에서 연한 선은
     그대로 사라진다. */
.rs-tbl th, .rs-tbl td { border: 0; border-bottom: 1px solid var(--line-2); }
/* 머리 위아래로 굵기를 달리한 두 선. 보고서 표의 기본 문법이다. */
.rs-tbl thead th {
  border-top: 1px solid var(--text);
  border-bottom: 1px solid var(--line);
  background: none;
  /* 칸 이름일 뿐이다. 값보다 한 단 뒤로 물리고 자간을 벌려 라벨로 읽히게 한다. */
  color: var(--text-3);
  font-weight: 700;
  letter-spacing: .04em;
  padding-block: 11px;
}
.rs-tbl tbody tr:last-child td { border-bottom: 1px solid var(--line); }
.rs-tbl__k { color: var(--label); font-weight: 600; }

/* ---------- 받아 가기 ----------
   ⚠ 이제 **표 바로 아래**다(2026-09-13 에 진행 요청과 위아래를 맞바꿨다).
   ⚠ 이 margin-top 은 **실제 간격을 정하지 않는다.** 위에 있는 `.rs-sec` 의
     margin-bottom: 42px 와 맞붙어 큰 쪽으로 상쇄되어, 실측 간격은 42px 이다.
     여기를 고쳐도 안 움직인다. 간격을 바꾸려면 `.rs-sec` 를 봐야 한다.
     (42px 이 표 묶음 사이 간격과 같아서 지금은 이대로 둔다.) */
.rs-dl {
  margin-top: 22px;
  /* ⚠ 회색 채움과 테두리를 걷었다. 표 아래에 얇은 선으로만 이어 붙인다. */
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  /* ⚠ 옛 규칙을 지우면서 flex 도 같이 날아갔다. 라벨과 단추가 한 줄에 서야 한다. */
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
/* '받아 가기' 는 낱말이 아니라 **구역 이름**이다. 한 단 작게 · 흐리게 · 자간을
   벌려 단추와 층을 가른다. 맨몸 글자로 두면 단추와 같은 무게로 읽혀 떠 보인다. */
.rs-dl__t {
  flex: none;
  align-self: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: .06em;
}

/* ⚠ 넷을 늘려 줄을 채운다. 실측(2026-09-13): 1440px 에서 안쪽 1164px 중
     **588px(51%)이 비어** 있었다. 카드 폭은 줄일 수 없다 — 배너·표와 같은 폭이어야
     한다(rsdoc '세 카드가 같은 폭'). 그러니 안을 채운다.
   ⚠ 높이를 키우지 말 것. rsdoc 이 '받아가기가 140px 이하'(전 213px 에서 줄인
     값이다) 와 '네 개 한 줄' 을 본다. */
.rs-dl__b { flex: 1 1 auto; min-width: 0; }
.rs-dl .btn {
  flex: 1 1 0;
  min-width: 0;
  justify-content: flex-start;
  gap: 6px;
}
/* 받는다는 신호. 글자가 아니라 기호라 낭독기에서는 뺀다(aria-hidden). */
.rs-dl__i { flex: none; font-style: normal; font-weight: 700; color: var(--text-3); }
/* 확장자는 고르는 기준이지 이름이 아니다. 뒤로 물려 이름이 먼저 읽히게 한다. */
.rs-dl__x { flex: none; font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); }
.rs-dl__f { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* .md 가 화면정의서 본문이다. 넷이 다 같은 회색이면 무엇을 받아야 하는지
   신호가 없다. 하나만 세워 두면 고르는 데 생각이 필요 없다. */
.rs-dl .btn.is-main {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-tint);
}
.rs-dl .btn.is-main .rs-dl__i,
.rs-dl .btn.is-main .rs-dl__x { color: var(--brand); opacity: .7; }

/* 부연은 단추 줄과 끊어 놓는다. 전폭 한 줄로 내려간다.
   ⚠ 여백을 12/12 로 뒀더니 카드가 138px 이 되어 한계선(140)에 2px 까지 붙었다.
     글자 하나만 늘어도 넘는다. 10/10 으로 줄여 여유를 둔다. */
.rs-dl__n { flex: 1 1 100%; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }

/* ⚠ 좁은 화면에서 넷을 한 줄에 밀어 넣지 않는다. 실측(390px): 단추가 74px 로
     눌려 이름이 말줄임으로 잘렸다. 둘씩 두 줄로 내린다.
     (rsdoc 의 '네 개 한 줄' 은 1440px 에서 본다.) */
@media (max-width: 720px) {
  .rs-dl .btn { flex: 1 1 calc(50% - 4px); }
}
/* ⚠ 320px 에서는 둘씩도 안 된다. 실측: 단추가 121px 이 되어 넷 다 이름이
     잘렸다(잘림 4). 하나씩 세운다. 세로로 길어지는 편이 못 읽는 것보다 낫다. */
@media (max-width: 380px) {
  .rs-dl .btn { flex: 1 1 100%; }
}

/* ---------- 인쇄 ----------
   ⚠ 종이에서는 카드가 의미가 없다. 격자를 되살려 결재 문서처럼 찍는다. */
@media print {
  .rs-card { border: 0; border-radius: 0; overflow: visible; }
  .rs-tbl th, .rs-tbl td { border: 1px solid #999; }
  .rs-tbl tbody tr:last-child td { border-bottom: 1px solid #999; }
}

/* ==========================================================================
   담당자 · 연락처를 전달 직전에 받는 자리 (2026-09-14)
   ⚠ /v2 는 관문이 없어 이 둘이 비어 있을 수 있다. 비운 채로 전달하면
     간편 조회(브랜드 + 담당자 + 연락처 뒤 네 자리)로 영영 못 찾는다.
   ========================================================================== */
.rs-who {
  margin: 0 0 14px;
  padding: 14px 16px;
  background: var(--bg-2);
  border-left: 4px solid var(--brand);
  border-radius: 0 10px 10px 0;
}
.rs-who__h { margin: 0 0 4px; font-size: var(--fs-sm); font-weight: 700; }
.rs-who__d { margin: 0 0 10px; font-size: var(--fs-xs); line-height: 1.6; color: var(--text-2); }
/* ⚠ 좁은 칸에서 두 칸이 문서를 밀지 않도록 min-width 를 푼다.
   ⚠ **늘리지 않는다**(`flex-grow: 0`). 예전에는 `1 1 160px` 이라 화면정의서
     폭(1,200px)을 둘이 나눠 먹어 **한 칸이 578px** 이었다(실측 2026-09-14).
     담당자 성함은 스무 자, 연락처는 열세 자가 상한이다 — 그만큼만 준다. */
.rs-who__row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.rs-who__f {
  display: flex; flex-direction: column; gap: 6px;
  flex: 0 1 240px; min-width: 0;
}
.rs-who__f > span {
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-2);
}

/* ==========================================================================
   최종 개발 의뢰 (2026-09-15 · 사용자 지시)
   ⚠ 전에는 글자가 `개발 진행 요청 →` 이라, 고객사가 **문서만 만들어진 것인지**
     **접수까지 된 것인지** 갈리지 않았다. 지금은 의뢰라고 적고, 누르면
     확정 모달이 서고, 끝나면 그 자리에 접수 완료가 남는다.
   ========================================================================== */

/* 주 단추. ⚠ 이 화면에서 보라 채움은 **하나**다. 접수 전에는 이것이 그 하나고,
   접수 뒤에는 대시보드 입구가 그 하나가 된다. */
.rs-cta { font-weight: 800; letter-spacing: -.01em; }
/* 단추 아래 한 줄. ⚠ 무엇을 누르는 것인지 글자만으로는 안 갈린다. */
.rs-go__sub {
  margin: 9px 0 0;
  font-size: var(--fs-xs); line-height: 1.6; color: var(--text-2);
}

/* 머리의 접수 완료 표시. ⚠ 단추가 아니라 **글**이다 — 누를 것이 아니다. */
.rs-done {
  display: inline-flex; align-items: center;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid #a5d8c0; background: #eefaf4; color: #0b7a55;
  font-size: var(--fs-xs); font-weight: 800; white-space: nowrap;
}

/* ---------------------------------------------------------------- 접수 완료
   ⚠ 접수한 뒤에도 **이 자리를 비우지 않는다**(사용자 지시). 전에는 통째로
     비워서, 방금 누른 사람이 빈 자리를 보고 "된 건가" 를 다시 물었다.
   ⚠ 눌린 단추를 **지우지 말고 잠가 둔다.** 같은 자리에 같은 모양으로
     남아 있어야 방금 누른 것과 이어진다. */
.rs-ok {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 18px 20px;
  border: 1px solid #a5d8c0; border-radius: var(--radius);
  background: linear-gradient(180deg, #f2fbf7, #ffffff);
}
.rs-ok__i { flex: none; font-size: 26px; line-height: 1; }
.rs-ok__x { flex: 1 1 260px; min-width: 0; }
.rs-ok__x b { display: block; font-size: var(--fs-h3); font-weight: 800; color: #0b7a55; }
.rs-ok__x em {
  display: block; margin-top: 5px;
  font-style: normal; font-size: var(--fs-sm); line-height: 1.65; color: var(--text-2);
}
/* ⚠ 잠긴 단추는 **회색으로 죽이지 않는다.** 실패한 것처럼 보인다.
   초록으로 두고 커서만 기본으로 돌린다 — 끝난 일이지 못 하는 일이 아니다. */
.rs-ok__b {
  flex: none;
  background: #12b886; border-color: #12b886; color: #fff;
  opacity: 1; cursor: default; font-weight: 800;
}
.rs-ok__b[disabled] { opacity: 1; }
.rs-ok__g { flex: none; }
@media (max-width: 560px) {
  .rs-ok { gap: 10px; padding: 16px; }
  .rs-ok__b, .rs-ok__g { flex: 1 1 100%; justify-content: center; }
}

/* ---------------------------------------------------------------- 확정 모달
   ⚠ `confirm()` 을 쓰지 않는다. 브라우저 기본 상자는 **무엇이 되돌릴 수
     없는지 적을 자리가 없고**, 단추 글자도 확인/취소로 고정이라 "확정" 의
     무게가 안 실린다.
   ⚠ 기본 초점은 [취소] 다(JS). 엔터를 눌러 버릇한 사람이 확정까지 가면 안 된다. */
.rs-ov {
  position: fixed; inset: 0; z-index: 9400;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, .46);
}
.rs-md {
  width: 100%; max-width: 420px;
  padding: 22px 22px 18px;
  border-radius: 16px; background: #fff;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .3);
}
.rs-md__t { display: block; font-size: 17px; font-weight: 800; color: var(--text); }
/* ⚠ 되돌릴 수 없다는 말이 여기 있다. 줄여 쓰지 말 것. */
.rs-md__d {
  margin: 10px 0 18px;
  font-size: var(--fs-sm); line-height: 1.7; color: var(--text-2);
}
.rs-md__r { display: flex; gap: 8px; justify-content: flex-end; }
.rs-md__r .btn { flex: 0 1 auto; }
@media (max-width: 420px) {
  .rs-md__r { flex-direction: column-reverse; }
  .rs-md__r .btn { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------- 팡파르
   ⚠ **바깥 라이브러리를 쓰지 않는다.** 이 저장소는 빌드 단계가 없고,
     종이조각 서른 장은 여기 한 벌이면 난다.
   ⚠ `pointer-events: none` 이라 뿌리는 동안에도 화면을 누를 수 있다.
   ⚠ `prefers-reduced-motion` 이면 JS 가 아예 안 뿌린다 — 접수됐다는
     것은 토스트와 단추 상태가 이미 말하고 있다. */
.rs-cf {
  position: fixed; inset: 0; z-index: 9500;
  overflow: hidden; pointer-events: none;
}
.rs-cf i {
  position: absolute; top: -14px;
  width: 8px; height: 13px; border-radius: 2px;
  animation-name: rs-fall; animation-timing-function: cubic-bezier(.3, .6, .5, 1);
  animation-fill-mode: both;
}
@keyframes rs-fall {
  0%   { transform: translate3d(0, -20px, 0) rotate(0); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate3d(var(--x, 0), 105vh, 0) rotate(var(--r, 360deg)); opacity: 0; }
}

/* ---------------------------------------------------------------- 성공 알림
   ⚠ 팡파르만으로는 **무엇이 됐는지** 안 적힌다. 조각은 3초면 사라진다. */
.rs-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 9600; max-width: min(460px, calc(100vw - 32px));
  padding: 14px 20px; border-radius: 14px;
  background: #123d30; color: #fff;
  box-shadow: 0 14px 38px rgba(15, 23, 42, .34);
  text-align: center;
}
.rs-toast b { display: block; font-size: var(--fs-sm); font-weight: 800; }
.rs-toast em {
  display: block; margin-top: 4px;
  font-style: normal; font-size: var(--fs-xs); color: rgba(255, 255, 255, .72);
}

/* ⚠ 인쇄에는 아무것도 안 나간다. 결재 문서에 종이조각이 찍히면 안 된다. */
@media print {
  .rs-cf, .rs-toast, .rs-ov { display: none !important; }
}

/* ==========================================================================
   기능마다 남긴 말 (2026-09-28 · 사용자 지시)
   ⚠ **여기는 읽기만 한다.** 적는 자리는 6단계 기능별 중요도다(build.css 의
     `.bd-cmtb` · `.bd-cmt`). 문서는 결과물이지 입력칸이 아니다.
   ⚠ 적힌 말이 없으면 표시도 줄도 안 그린다.
   ========================================================================== */

/* 느낌표. ⚠ 단추가 아니라 **표시**다. 누를 수 있게 보이면 눌러 보고 아무
   일도 안 나서 고장으로 읽힌다. 그래서 테두리도 손 모양도 없다. */
.rs-cmt__m {
  display: inline-flex; align-items: center;
  margin-left: 8px; padding: 1px 8px 1px 5px;
  border-radius: 999px;
  background: var(--brand-tint, #f5f0ff); color: var(--brand);
  font-size: var(--rf-xs, 12px); font-weight: 700; white-space: nowrap;
  vertical-align: middle;
}
.rs-cmt__m i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-right: 4px;
  border-radius: 999px; background: var(--brand); color: #fff;
  font-style: normal; font-size: 10px; font-weight: 700; line-height: 1;
}

/* 적힌 말. ⚠ 표의 칸 다섯을 통째로 쓴다. 한 칸에 넣으면 좁은 화면에서
   90px 로 눌려 서너 글자만 보인다. */
.rs-cmt > td {
  padding: 9px 12px 12px;
  background: var(--brand-tint, #f5f0ff);
  border-bottom: 1px solid var(--line, #e5e5ea);
}
.rs-cmt__l {
  display: block; margin-bottom: 3px;
  font-size: var(--rf-xs, 12px); font-weight: 700; color: var(--brand);
}
.rs-cmt__p {
  margin: 0;
  font-size: var(--rf-sm, 13px); line-height: 1.65; color: var(--text, #111);
  white-space: pre-wrap;
}

@media print {
  /* 종이에서는 칠하지 않는다. 왼쪽 선 하나로 " 남이 한 말" 을 표시한다. */
  .rs-cmt > td {
    background: none; border-bottom: 1px solid #ddd;
    padding: 5px 8px 7px; border-left: 3px solid #666;
  }
  .rs-cmt__l { font-size: 9pt; color: #555; }
  .rs-cmt__p { font-size: 10pt; color: #111; }
  .rs-cmt__m { background: none; color: #111; padding: 0; }
  .rs-cmt__m i { background: #111; }
}