/* ============================================================
   Right Portal — Design Tokens & Base Styles  (entry / index)
   Rose Charcoal palette · Pretendard · weight 300/500/700

   세션 29 (2026-04-30) — 단일 2,523 줄 → 3 분기:
     · right_portal-style.css      (~952 줄, base + 토큰 + dashboard)  ← 이 파일
     · right_portal-pkg-detail.css (~1207 줄, package detail / fishbone / detail panel / topic explorer / tag / wiki link)
     · right_portal-spotlight.css  (~364 줄, spotlight 모드 + 자료 카드)

   HTML 측은 그대로 right_portal-style.css 만 link → 아래 @import 가 나머지 자동 로드.
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css');
@import url('right_portal-pkg-detail.css');
@import url('right_portal-spotlight.css');


:root {
  /* ── Surface ───────────────────────────────────────────── */
  --rp-bg:           #FAF7F5;
  --rp-bg-2:         #FFFFFF;
  --rp-bg-cool:      #F2EDEA;
  --rp-shell:        #E2D5CD;
  --rp-shell-2:      #D8C9C0;

  /* ── Lines / Ice ──────────────────────────────────────── */
  --rp-ice-1:        #E8E0DC;
  --rp-ice-2:        #D6CCC6;
  --rp-ice-3:        #A89B94;

  /* ── Ink (Text) ───────────────────────────────────────── */
  --rp-ink:          #1A1316;
  --rp-ink-2:        #5A4A50;
  --rp-ink-3:        #8A7A80;

  /* ── Accent (Burgundy) ─────────────────────────────────── */
  --rp-accent:       #7A1233;
  --rp-accent-soft:  #A03950;
  --rp-accent-bg:    #F5E6EA;
  --rp-accent-line:  #D4A8B5;

  /* ── Verdict ───────────────────────────────────────────── */
  --rp-fact:         #0F5E4A;
  --rp-fact-bg:      #E0EFEA;
  --rp-false:        #7A1A1A;
  --rp-false-bg:     #F2DCDC;
  --rp-partial:      #8A5410;
  --rp-partial-bg:   #F2E5D0;
  --rp-mismatch:     #8A5410;
  --rp-win:          #16A34A;   /* 당선·검증완료 밝은 그린(verdict fact와 구분) */
  --rp-win-bg:       #D1FAE5;   /* 당선·검증 배경 틴트 */

  /* ── Faction labels (좌=cool blue 스케일 / 우=버건디) ─────────────────── */
  --rp-left:         #2D4576;
  --rp-left-deep:    #1E40AF;   /* 좌 진한 텍스트 */
  --rp-left-bg:      #DBEAFE;   /* 좌 배경 틴트 */
  --rp-left-line:    #C7D8F0;   /* 좌 보더 */
  --rp-right:        #7A1233;

  /* ── Urgent (시국·부정선거 긴급 빨강 정체성 토큰, DESIGN_GUIDE §1) ───────── */
  --rp-urgent:       #DC2626;   /* poliwatch 긴급 빨강 */
  --rp-urgent-deep:  #B81C1C;   /* election 진한 변형(≈#B91C1C 동일 취급) */
  --rp-urgent-bg:    #FFF5F5;   /* 긴급 배경 틴트(연) */
  --rp-urgent-bg-2:  #FFF8F8;   /* 긴급 배경 틴트(더 연) */
  --rp-urgent-bg-3:  #FEE2E2;   /* 긴급 배경 틴트(진) */
  --rp-urgent-line:  #FCA5A5;   /* 긴급 연빨강 보더 */

  /* ── Shadow ───────────────────────────────────────────── */
  --rp-shadow-soft:  0 2px 8px rgba(26, 19, 22, 0.06);
  --rp-shadow-md:    0 6px 16px rgba(26, 19, 22, 0.10);
  --rp-shadow-lg:    0 30px 80px rgba(26, 19, 22, 0.20);

  /* ── Spacing ──────────────────────────────────────────── */
  --rp-s-1:          4px;
  --rp-s-2:          8px;
  --rp-s-3:          16px;
  --rp-s-4:          24px;
  --rp-s-5:          32px;
  --rp-s-6:          48px;

  /* ── Radius ───────────────────────────────────────────── */
  --rp-r-sm:         6px;
  --rp-r-md:         10px;
  --rp-r-lg:         14px;
  --rp-r-xl:         16px;

  /* ── Typography ───────────────────────────────────────── */
  --rp-font:         'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --rp-fw-body:      300;
  --rp-fw-meta:      500;
  --rp-fw-emph:      500;
  --rp-fw-title:     700;

  /* ── Font Size Tokens — 3-tier scale ──────────────────── */
  /* :root default = "보통" (어르신 가독성 1단계 ↑ 반영). body[data-rp-text="large|xlarge"] 로 override. */
  --rp-fs-display:        52px;
  --rp-fs-display-sm:     31px;
  --rp-fs-title-1:        28.5px;
  --rp-fs-title-2:        22px;
  --rp-fs-title-3:        17.5px;
  --rp-fs-body:           14.5px;
  --rp-fs-meta:           12.5px;
  --rp-fs-eyebrow:        11.5px;
  --rp-fs-eyebrow-strong: 10.5px;
  --rp-fs-button:         14.5px;
  --rp-fs-input:          14.5px;
  --rp-fs-chip:           13.5px;
  --rp-fs-tooltip:        12.5px;
  --rp-fs-verdict:        10.5px;
  --rp-fs-help:           10.5px;

  /* line-height — 보통 등급 가독성 */
  --rp-lh-body:           1.6;
  --rp-lh-tight:          1.35;

  /* ── Structural / Skeleton (조각 공통 골격, DESIGN_GUIDE §4.5) ───────── */
  /* 🔑 **안전영역을 헤더가 먹는다.** `viewport-fit=cover` + `black-translucent` 이면
     웹뷰가 상태바 아래까지 덮으므로, 그 59px 을 **헤더 높이에 더해** 헤더 배경이 그 자리를
     칠하게 한다(cm 112절 · trak `.tk-header` / singon `.fan-hd` 와 같은 방식).
     🔑 이 변수 하나가 세 곳을 먹인다 — `#content` 패딩 · 헤더 height · 프로필 메뉴 top.
        그래서 여기만 고치면 나머지가 따라온다. 데스크톱은 env()=0 이라 그대로 56px. */
  --rp-safe-top:          env(safe-area-inset-top, 0px);
  --rp-topbar-h:          calc(56px + var(--rp-safe-top));   /* 모바일 상단 헤더 실효 높이(안전영역 포함) */
  --rp-gnb-h:             56px;   /* 모바일 하단 GNB 높이(+ safe-area) */
  --rp-scene-pad-x:       14px;   /* 씬 좌우 패딩 표준 */
  --rp-scene-pad-top:     14px;   /* 헤더 있는 씬 상단 패딩 */
  --rp-scene-pad-top-tab: 12px;   /* 헤더 없는 씬(탭/칩/프로필) 상단 패딩 */
  --rp-scene-clear-fab:   88px;   /* FAB 있는 씬 하단 클리어런스(+safe) */
  --rp-scene-clear:       20px;   /* FAB 없는 씬 하단 클리어런스(+safe) */
  --rp-list-gap:          10px;   /* 나열 카드 리스트 아이템 갭 표준 */
}

/* ── 크게 (+1 등급) ──────────────────────────────────────── */
body[data-rp-text="large"] {
  --rp-fs-display:        56px;
  --rp-fs-display-sm:     34px;
  --rp-fs-title-1:        31px;
  --rp-fs-title-2:        24px;
  --rp-fs-title-3:        19px;
  --rp-fs-body:           16px;
  --rp-fs-meta:           13.5px;
  --rp-fs-eyebrow:        12.5px;
  --rp-fs-eyebrow-strong: 11.5px;
  --rp-fs-button:         15.5px;
  --rp-fs-input:          15.5px;
  --rp-fs-chip:           14.5px;
  --rp-fs-tooltip:        13.5px;
  --rp-fs-verdict:        11.5px;
  --rp-fs-help:           11.5px;
}

/* ── 더 크게 (+2 등급) — 어르신 / 시각 보조 ───────────────── */
body[data-rp-text="xlarge"] {
  --rp-fs-display:        60px;
  --rp-fs-display-sm:     37px;
  --rp-fs-title-1:        34px;
  --rp-fs-title-2:        26px;
  --rp-fs-title-3:        20.5px;
  --rp-fs-body:           17.5px;
  --rp-fs-meta:           14.5px;
  --rp-fs-eyebrow:        13.5px;
  --rp-fs-eyebrow-strong: 12.5px;
  --rp-fs-button:         16.5px;
  --rp-fs-input:          16.5px;
  --rp-fs-chip:           15.5px;
  --rp-fs-tooltip:        14.5px;
  --rp-fs-verdict:        12.5px;
  --rp-fs-help:           12.5px;
}

/* ── Base reset ─────────────────────────────────────────── */
html, body {
  font-family: var(--rp-font);
  font-weight: var(--rp-fw-body);
  color: var(--rp-ink);
  background: var(--rp-shell);
  font-feature-settings: 'ss01', 'ss02', 'cv01', 'cv02';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 🔑 **아이폰 설치앱의 노치·상태바 색 = 앱이 뜨는 순간 화면에 칠해진 색**(cm 112절).
   실행 뒤에 바꾸는 건 반영되지 않으므로, 그 순간 화면을 덮는 면을 **탑바색**으로 맞춰야 한다.
   ⚠️ `html, body` 배경만으로는 **부족했다**(실측 2026-09-14: 흰색으로 맞췄는데 노치는
      #F9F7F5 그대로). 싱온에서 통한 건 `position:fixed; inset:0` 로 **실제로 화면을 덮는 요소**였다
      — 그래서 여기도 같은 형태를 깐다.
   ⚠️ 조건은 **폭이 아니라 모드**다. `max-width` 로 가르면 기기 폭(430·440…)마다 다시 어긋난다. */
@media all and (display-mode: standalone) {
  html, body { background: var(--rp-bg-2); }

  /* ⚠️ `.page-m-main` 은 여기서 못 고친다 — m-main.html 의 `<style>` 이 **나중에 로드**돼 이긴다.
     그 규칙은 m-main.html 안에 있다(cm 112절). */
}

button, input, textarea, select {
  font-family: var(--rp-font);
  font-weight: var(--rp-fw-body);
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--rp-accent); }

* { box-sizing: border-box; }

/* ── Eyebrow / Small caps label ─────────────────────────── */
.rp-eyebrow {
  font-size: var(--rp-fs-eyebrow);
  font-weight: var(--rp-fw-meta);
  letter-spacing: 1.2px;
  color: var(--rp-ink-3);
  text-transform: uppercase;
}

.rp-eyebrow-strong {
  font-size: var(--rp-fs-eyebrow-strong);
  font-weight: var(--rp-fw-meta);
  letter-spacing: 1.3px;
  color: var(--rp-ink-3);
  text-transform: uppercase;
}

/* ── Title scale ───────────────────────────────────────── */
.rp-title-1 { font-size: var(--rp-fs-title-1); font-weight: var(--rp-fw-title); letter-spacing: -0.5px; line-height: 1.2; }
.rp-title-2 { font-size: var(--rp-fs-title-2); font-weight: var(--rp-fw-title); letter-spacing: -0.3px; line-height: 1.25; }
.rp-title-3 { font-size: var(--rp-fs-title-3); font-weight: var(--rp-fw-title); letter-spacing: -0.2px; line-height: 1.3; }

.rp-display    { font-size: var(--rp-fs-display);    font-weight: var(--rp-fw-title); letter-spacing: -1.5px; line-height: 1; }
.rp-display-sm { font-size: var(--rp-fs-display-sm); font-weight: var(--rp-fw-title); letter-spacing: -0.5px; line-height: 1.1; }

.rp-body { font-size: var(--rp-fs-body); font-weight: var(--rp-fw-body); line-height: var(--rp-lh-body); }
.rp-meta { font-size: var(--rp-fs-meta); font-weight: var(--rp-fw-body); color: var(--rp-ink-2); }
.rp-meta-strong { font-size: var(--rp-fs-meta); font-weight: var(--rp-fw-meta); color: var(--rp-ink-2); }

/* ── Card ──────────────────────────────────────────────── */
.rp-card {
  background: var(--rp-bg-2);
  border: 1px solid var(--rp-shell-2);
  border-radius: var(--rp-r-lg);
  box-shadow: var(--rp-shadow-soft);
}

.rp-card-flat {
  background: var(--rp-bg);
  border: 1px solid var(--rp-shell-2);
  border-radius: var(--rp-r-md);
}

.rp-card-key {
  background: var(--rp-accent-bg);
  border: 1.5px solid var(--rp-accent);
  border-radius: var(--rp-r-md);
  box-shadow: var(--rp-shadow-md);
}

/* ── Scene shell (씬 공통 골격, 2026-09-14) ──────────────────────────
   왜 필요한가: 씬마다 셸을 하드코딩해 좌우 패딩·폭이 어긋나 있었다.
     · aweb      max-width:1080 + padding 직접 → 혼자 깔끔
     · poliwatch padding 직접, 폭 제한 없음
     · trial     패딩 자체가 없어 좌우가 화면에 붙음
   표준 토큰(--rp-scene-pad-*)은 이미 있었는데 이 셋만 안 썼다. 골격을 여기 한 곳에 둔다.

   쓰는 법:
     <section class="rp-scene rp-scene--{name}">
       <div class="rp-scene-wrap"> … </div>
     </section>
   탭 줄이 맨 위에 오는 씬은 `rp-scene-wrap--tab` 을 더해 상단 패딩을 줄인다.

   ⚠️ 씬은 #scene-area(position:fixed) 안에서 자체 스크롤한다 — height:100% + overflow-y
      가 빠지면 스크롤이 부모로 새어 하단 GNB 뒤로 콘텐츠가 잠긴다(cm 30절 계열). */
.rp-scene {
  height: 100%;
  overflow-y: auto;
  background: var(--rp-shell, var(--rp-bg-cool));
  -webkit-overflow-scrolling: touch;
}

.rp-scene-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--rp-scene-pad-top) var(--rp-scene-pad-x) var(--rp-scene-clear);
}

.rp-scene-wrap--tab { padding-top: var(--rp-scene-pad-top-tab); }
.rp-scene-wrap--fab { padding-bottom: var(--rp-scene-clear-fab); }

/* PC 는 여백을 넓게 — 1080 폭이 살아야 카드가 늘어지지 않는다.
   경계는 모바일 크롬과 **같은 1024**. 768 로 두면 768~1023 에서 크롬은 모바일인데
   씬 여백만 PC 가 되고, 자체 셸을 쓰는 시국 모바일 변형(승급 없음)과도 어긋난다. */
body:not(.rp-mode-mobile) .rp-scene-wrap { padding-left: 28px; padding-right: 28px; padding-top: 24px; }
body:not(.rp-mode-mobile) .rp-scene-wrap--tab { padding-top: 18px; }

/* 섹션 — 🔴 **제목은 박스 밖, 카드만 박스**(1겹).
   시국이 섹션 자체에 배경+보더를 줘 그 안의 카드와 이중 박스가 됐다(박스인박스).
   aweb 이 이 방식이라 깔끔했다. 섹션은 간격만 갖는다. */
.rp-scene-sec { margin-top: 26px; }
.rp-scene-sec:first-child { margin-top: 0; }
.rp-scene-sec > .rp-eyebrow { margin-bottom: 2px; }
.rp-scene-sec > .rp-title-1,
.rp-scene-sec > .rp-title-2,
.rp-scene-sec > .rp-title-3 { margin: 2px 0 14px; }

/* 섹션 안의 나열 — 갭은 표준 토큰으로. */
.rp-scene-list { display: flex; flex-direction: column; gap: var(--rp-list-gap); }

/* ── PC 화면으로 보기 (모드 전환) ────────────────────
   정본 = byeol. 규칙:
   · PC 셸에는 전환 버튼이 없다 — 뷰포트가 1024 미만으로 내려가면 **자동으로 모바일로 강등**.
   · 모바일 셸은 1024 이상에서만 이 버튼을 띄운다. 넓혀도 **자동 승격은 하지 않는다**
     — PC 로는 이 버튼(수동 클릭)으로만 간다.
   · 우하단은 비어 있다 — 실측 2026-09-14 @1200px: .rp-gnb-mobile 은 display:none 이고
     .rp-fab 은 position:static 으로 풀려 문서 흐름 안으로 들어간다(고정 요소가 아니다).
     ⚠️ 처음엔 "둘 다 렌더되지 않는다"고 적었는데 틀렸다 — FAB 은 보인다. 고정이 아닐 뿐이다.
        추측하지 말고 실뷰포트(iframe)에서 재고 적는다. */
#rp-mode-switch {
    position: fixed; right: 20px; bottom: 20px; z-index: 60;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 11px 17px; border: 0; border-radius: 999px;
    background: var(--rp-accent); color: var(--rp-bg-2);
    font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,.24);
}
#rp-mode-switch iconify-icon { font-size: 16px; }
#rp-mode-switch:hover { filter: brightness(1.08); }

/* ── Pill / Chip ──────────────────────────────────────── */
.rp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px;
  border-radius: 18px;
  background: var(--rp-bg-2);
  border: 1px solid var(--rp-shell-2);
  font-size: var(--rp-fs-chip);
  font-weight: var(--rp-fw-body);
  color: var(--rp-ink-2);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.rp-chip:hover { border-color: var(--rp-ice-3); }
.rp-chip.is-active {
  background: var(--rp-ink);
  color: var(--rp-bg-2);
  border-color: var(--rp-ink);
  font-weight: var(--rp-fw-meta);
}

/* ── Button ──────────────────────────────────────────── */
.rp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: var(--rp-r-md);
  font-size: var(--rp-fs-button);
  font-weight: var(--rp-fw-meta);
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter .12s;
}
.rp-btn:hover { filter: brightness(.96); }

.rp-btn-primary { background: var(--rp-accent); color: var(--rp-bg-2); }
.rp-btn-ghost { background: var(--rp-bg-2); color: var(--rp-ink); border-color: var(--rp-shell-2); }
.rp-btn-ink { background: var(--rp-ink); color: var(--rp-bg-2); }

/* ── Verdict badge ───────────────────────────────────── */
.rp-verdict {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 4px;
  font-size: var(--rp-fs-verdict);
  font-weight: var(--rp-fw-meta);
  letter-spacing: 0.5px;
  color: var(--rp-bg-2);
}
.rp-verdict-fact     { background: var(--rp-fact); }
.rp-verdict-partial  { background: var(--rp-partial); }
.rp-verdict-false    { background: var(--rp-false); }
.rp-verdict-mismatch { background: var(--rp-mismatch); }
.rp-verdict-key      { background: var(--rp-accent); }

/* ── Vote chip group ─────────────────────────────────── */
.rp-vote { display: inline-flex; align-items: center; gap: 6px; }
.rp-vote-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: 6px;
  font-size: var(--rp-fs-meta);
  font-weight: var(--rp-fw-meta);
  border: 1px solid transparent;
  cursor: pointer;
}
.rp-vote-chip[data-v="fact"]    { background: var(--rp-fact); color: var(--rp-bg-2); }
.rp-vote-chip[data-v="partial"] { color: var(--rp-partial); border-color: var(--rp-partial); }
.rp-vote-chip[data-v="false"]   { color: var(--rp-false); border-color: var(--rp-false); }
.rp-vote-chip:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.rp-vote-chip.is-voted {
  outline: 2px solid var(--rp-accent);
  outline-offset: 1px;
  cursor: default;
  font-weight: var(--rp-fw-title);
}
.rp-vote-chip.is-voted:hover { transform: none; box-shadow: none; }

/* ── kind 뱃지 (콘텐츠 타입 라벨, part-rp-card/-list-row 공통) — 라벨은 JS(kindLabel)가 한글로, 색은 data-kind 시맨틱 ── */
.rp-kind-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: var(--rp-r-sm);
  font-size: var(--rp-fs-verdict);
  font-weight: var(--rp-fw-meta);
  letter-spacing: 0.4px;
  white-space: nowrap;
  background: var(--rp-bg-cool);
  color: var(--rp-ink-3);
}
.rp-kind-badge[data-kind="youtube_live"],
.rp-kind-badge[data-kind="live_event"],
.rp-kind-badge[data-kind="poll_swing"],
.rp-kind-badge[data-kind="incident"],
.rp-kind-badge[data-kind="withdraw"]   { background: var(--rp-urgent-bg-3); color: var(--rp-urgent-deep); }
.rp-kind-badge[data-kind="youtube_video"],
.rp-kind-badge[data-kind="youtube_shorts"],
.rp-kind-badge[data-kind="video"]      { background: var(--rp-accent-bg); color: var(--rp-accent); }
.rp-kind-badge[data-kind="news"],
.rp-kind-badge[data-kind="article"],
.rp-kind-badge[data-kind="poll_new"]   { background: var(--rp-left-bg); color: var(--rp-left-deep); }

/* ── 공통 DIALOG head/foot (다이얼로그별 *-head/-foot 승격, DESIGN_GUIDE §4.5 F8) ──
   컨테이너 골격만 표준화(row·space-between·패딩·보더). 높이는 content-sized(탭/서브 있는 head 안전).
   각 다이얼로그는 이 클래스 참조 + 내부 요소/국소 스타일만 자기 <style>에. */
.rp-dlg-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rp-shell-2);
  flex-shrink: 0;
}
.rp-dlg-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--rp-shell-2);
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .rp-dlg-head { padding: 12px 16px; }
  .rp-dlg-foot { padding: 10px 16px; }
}

/* ── Layout primitives ──────────────────────────────── */
.rp-app, .page-main {
  background: var(--rp-shell);
  height: 100%;
  position: relative;
  padding-top: 64px;     /* TopBar 자리 확보 (fixed 가 자리 안 차지) */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.rp-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  z-index: 99999;         /* NSKit 레이어 (만 단위) 위에 항상 노출 */
  background: var(--rp-bg-2);
  border-bottom: 1px solid var(--rp-shell-2);
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 32px;
}

/* PAGE / PANEL 영역도 TopBar 아래에서 시작 */
#sub-page-area, #sub-page-area-super {
  top: 64px !important;
  height: calc(100% - 64px) !important;
}
/* NSKit 의 PAGE wrapper(.sub-page-container > .sub-page-content) 의 height 강제
   ──────────────────────────────────────────────────────────────────────
   sub-page-content 는 NSKit 기본이 overflow-y: auto — 우리는 height 100% 만 강제.
   세션 45 (2026-05-16): 이전엔 `overflow: hidden` 박혀있어 sub-page 내부 스크롤
   불가능해서 page-package-detail / page-debate-card-detail 등 detail 페이지 스크롤
   안 됨. NSKit 기본 overflow-y:auto 살림. 페이지가 자체 overflow:hidden 박고
   내부 별 scroll layer 만들고 싶을 땐 page CSS 에서 따로 처리. */
#sub-page-area > div, #sub-page-area-super > div {
  height: 100% !important;
  max-height: 100% !important;
}
#sub-page-area .sub-page-content,
#sub-page-area-super .sub-page-content {
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* factuality dot — 이모지 (🟢🟡🟠🔴⚪) 대신 CSS circle. 글로벌. */
.rp-fact-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 2px;
    vertical-align: middle;
}
.rp-fact-dot.is-confirmed  { background: #16a34a; }
.rp-fact-dot.is-reported   { background: #ca8a04; }
.rp-fact-dot.is-claimed    { background: #ea580c; }
.rp-fact-dot.is-hearsay    { background: #dc2626; }
.rp-fact-dot.is-superseded { background: #64748b; }

/* ── NSKit PAGE container flex 보존 + 슬라이드 트랜지션 복원 (세션 45, 2026-05-16) ──
   nskit-base.css 의 universal `.show { display: block !important }` 가
   `.sub-page-container.show` 도 매칭해서 NSKit 원본 `display: flex` 를 깨뜨림 →
   명시적으로 flex 복원. (id 셀렉터로 specificity 0,2,1 — universal .show 보다 우위) */
#sub-page-area .sub-page-container,
#sub-page-area-super .sub-page-container,
#sub-page-area .sub-page-container.show,
#sub-page-area-super .sub-page-container.show {
  display: flex !important;
  flex-direction: column !important;
}

.rp-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--rp-fs-title-2);
  font-weight: var(--rp-fw-title);
  letter-spacing: -0.3px;
}
.rp-brand-mark {
  width: 32px; height: 32px;
  background: var(--rp-accent);
  border-radius: 7px;
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rp-brand-mark-img img {
  width: 26px; height: 26px;
  display: block;
  filter: brightness(0) invert(1);
}

.rp-spacer { flex: 1; }

/* ── GNB (inside topbar) ─────────────────────────────── */
.rp-gnb { display: flex; align-items: center; gap: 28px; margin-left: 32px; }
.rp-gnb-item {
  position: relative;
  font-size: var(--rp-fs-body);
  font-weight: var(--rp-fw-body);
  color: var(--rp-ink-2);
  cursor: pointer;
  padding: 22px 0;
}
.rp-gnb-item:hover { color: var(--rp-ink); }
.rp-gnb-item.is-active {
  color: var(--rp-ink);
  font-weight: var(--rp-fw-meta);
}
.rp-gnb-item.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--rp-accent);
}

/* ── Search box (inside topbar) ──────────────────────── */
.rp-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 320px;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--rp-r-md);
  background: var(--rp-bg);
  border: 1px solid var(--rp-shell-2);
  cursor: pointer;
}
.rp-search:hover { border-color: var(--rp-ice-3); }
.rp-search-icon { color: var(--rp-ink-3); font-size: var(--rp-fs-body); }
.rp-search-placeholder {
  flex: 1;
  font-size: var(--rp-fs-meta);
  color: var(--rp-ink-3);
}
.rp-search-kbd {
  font-family: var(--rp-font);
  font-size: var(--rp-fs-eyebrow-strong);
  font-weight: var(--rp-fw-meta);
  color: var(--rp-ink-3);
  background: var(--rp-bg-cool);
  padding: 2px 5px;
  border-radius: 3px;
}

/* ── Icon button / Profile ───────────────────────────── */
.rp-icon-btn {
  width: 38px; height: 38px;
  background: var(--rp-bg-2);
  border: 1px solid var(--rp-shell-2);
  border-radius: var(--rp-r-md);
  font-size: var(--rp-fs-body);
  color: var(--rp-ink-2);
  cursor: pointer;
}
.rp-icon-btn:hover { color: var(--rp-ink); border-color: var(--rp-ice-3); }
.rp-profile {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--rp-ink);
  cursor: pointer;
}

/* ── Dashboard layout ────────────────────────────────── */
.scene-container {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--rp-shell);
  position: relative;
}
.scene-container > [include-scene],
.scene-container > section {
  height: 100%;
}

.rp-dashboard {
  display: flex;
  height: 100%;
  background: var(--rp-shell);
}

/* ── Sidebar ─────────────────────────────────────────── */
.rp-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--rp-bg-2);
  border-right: 1px solid var(--rp-shell-2);
  padding: 24px 16px;
  overflow-y: auto;
}
.rp-dashboard.is-sidebar-collapsed .rp-sidebar { width: 60px; }
.rp-dashboard.is-sidebar-collapsed .rp-sidebar-label,
.rp-dashboard.is-sidebar-collapsed .rp-sidebar-count,
.rp-dashboard.is-sidebar-collapsed .rp-eyebrow,
.rp-dashboard.is-sidebar-collapsed .rp-sidebar-divider { display: none; }

.rp-sidebar-section {
  display: flex;
  align-items: center;
  padding: 0 8px 12px 8px;
}
.rp-sidebar-section .rp-eyebrow { flex: 1; }
.rp-sidebar-toggle {
  background: transparent;
  border: none;
  font-size: var(--rp-fs-body);
  color: var(--rp-ink-3);
  cursor: pointer;
  padding: 0;
}
.rp-sidebar-toggle:hover { color: var(--rp-ink); }

.rp-sidebar-nav {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rp-sidebar-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--rp-r-sm);
  font-size: var(--rp-fs-body);
  font-weight: var(--rp-fw-body);
  color: var(--rp-ink);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
/* 좌측 accent bar — pseudo, hover/active 시 등장 */
.rp-sidebar-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--rp-accent);
  border-radius: 0 2px 2px 0;
  transition: height 0.15s;
}
.rp-sidebar-item:hover {
  background: var(--rp-bg);
  color: var(--rp-ink);
}
.rp-sidebar-item:hover::before { height: 12px; opacity: 0.5; }

.rp-sidebar-item.is-active {
  background: var(--rp-accent-bg);
  color: var(--rp-accent);
  font-weight: var(--rp-fw-meta);
}
.rp-sidebar-item.is-active::before {
  height: 22px;
  opacity: 1;
}
/* 기존 .rp-sidebar-bar span 호환 — pseudo 와 중복 방지 */
.rp-sidebar-bar { display: none !important; }
.rp-sidebar-label { flex: 1; }
.rp-sidebar-count {
  font-size: var(--rp-fs-meta);
  font-weight: var(--rp-fw-body);
  color: var(--rp-ink-3);
}
.rp-sidebar-item.is-active .rp-sidebar-count {
  color: var(--rp-accent);
  font-weight: var(--rp-fw-meta);
}
.rp-sidebar-count-new {
  background: var(--rp-accent);
  color: var(--rp-bg-2) !important;
  font-size: var(--rp-fs-eyebrow-strong);
  font-weight: var(--rp-fw-meta);
  padding: 2px 6px;
  border-radius: 9px;
}
.rp-sidebar-count-accent { color: var(--rp-accent) !important; font-weight: var(--rp-fw-meta); }
.rp-sidebar-divider {
  height: 1px;
  background: var(--rp-ice-1);
  margin: 16px 0;
}
.rp-sidebar-h2 { padding: 0 8px 8px 8px; }

/* ── Dashboard right region ─────────────────────────── */
/* 5/9 리뉴얼: overflow:hidden → overflow-y:auto. strip 들이 늘어나면서 외부 스크롤 허용.
   기존 내부 .rp-pkg-panel 단독 스크롤 패턴 → 자연 페이지 스크롤. */
.rp-dashboard-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--rp-shell);
  overflow-y: auto;
}

/* ── Hero ─────────────────────────────────────────── */
.rp-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 28px;
  background: var(--rp-bg-2);
  border-bottom: 1px solid var(--rp-shell-2);
  flex-shrink: 0;
}
.rp-hero-left { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.rp-hero-num { display: flex; align-items: flex-end; gap: 10px; }
.rp-hero-num-sub {
  font-size: var(--rp-fs-body); font-weight: var(--rp-fw-body);
  color: var(--rp-ink-2);
  padding-bottom: 6px;
}
.rp-hero-divider { width: 1px; height: 56px; background: var(--rp-ice-1); }
.rp-hero-stat { display: flex; gap: 28px; }
.rp-hero-stat-item { display: flex; flex-direction: column; gap: 4px; }
.rp-text-accent { color: var(--rp-accent); }
.rp-text-fact { color: var(--rp-fact); }
.rp-text-ink-3 { color: var(--rp-ink-3); }
.rp-hero-cta { height: 44px; padding: 0 22px; }

/* ── Content Section (shell wrap + floating card) ──── */
/* 5/9 리뉴얼: flex:1 + overflow:hidden 제거 → 자연 height + 외부 스크롤 위임.
   기존엔 .rp-pkg-panel 단독 스크롤 → strip 다수 시 viewport 잘림 사용자 진단. */
.rp-content-section {
  display: flex;
  flex-direction: column;
  background: var(--rp-shell);
  padding: 20px 20px 0 20px;
}

/* History Chip Bar */
.rp-history-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 4px;
  flex-shrink: 0;
}
.rp-history-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  /* native scrollbar hide — caret 으로 대체 */
  scrollbar-width: none;             /* Firefox */
  -ms-overflow-style: none;          /* IE/Edge */
}
.rp-history-chips::-webkit-scrollbar { display: none; }  /* WebKit */

/* Caret 좌/우 navigation */
.rp-history-caret {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--rp-ink-3);
  cursor: pointer;
  transition: opacity .15s, border-color .15s, color .15s;
  visibility: hidden;
}
.rp-history-caret.is-visible { visibility: visible; }
.rp-history-caret.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.rp-history-caret:hover {
  border-color: var(--rp-shell-2);
  color: var(--rp-ink);
}
.rp-history-empty {
  font-size: var(--rp-fs-meta);
  font-weight: var(--rp-fw-body);
  color: var(--rp-ink-3);
  font-style: italic;
}
.rp-history-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px 0 12px;
  border-radius: 18px;
  background: var(--rp-bg-2);
  border: 1px solid var(--rp-shell-2);
  font-size: var(--rp-fs-meta);
  font-weight: var(--rp-fw-body);
  color: var(--rp-ink-2);
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.rp-history-chip.is-active { background: var(--rp-ink); color: var(--rp-bg-2); border-color: var(--rp-ink); }
.rp-history-chip-type { font-size: var(--rp-fs-eyebrow-strong); letter-spacing: 0.6px; opacity: 0.7; font-weight: var(--rp-fw-meta); }
.rp-history-chip-title { font-weight: var(--rp-fw-meta); }
.rp-history-chip-x { font-size: var(--rp-fs-meta); opacity: 0.6; padding: 0 2px; }
.rp-history-chip-x:hover { opacity: 1; }
.rp-history-clear {
  background: transparent;
  border: none;
  font-family: var(--rp-font);
  font-size: var(--rp-fs-meta);
  font-weight: var(--rp-fw-body);
  color: var(--rp-ink-3);
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  flex-shrink: 0;
}
.rp-history-clear:hover { color: var(--rp-ink-2); }

/* Content Card — Pkg | Stat */
/* 5/9: flex:1 + overflow:hidden 제거 — 자연 height + 외부 스크롤 위임 */
.rp-content-card {
  display: flex;
  background: var(--rp-bg-2);
  border: 1px solid var(--rp-shell-2);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
}

/* ── Pkg Panel (Dominant) ─────────────────────────── */
/* 5/9: flex:1 + overflow-y:auto 제거 — 자연 height */
.rp-pkg-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px 28px;
  gap: 16px;
  min-width: 0;
}
.rp-pkg-head {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}
.rp-pkg-head-left { display: flex; flex-direction: column; gap: 4px; }
.rp-pkg-filters { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.rp-chip-naked {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--rp-ink-3) !important;
  font-weight: var(--rp-fw-body) !important;
}

/* Featured */
.rp-pkg-featured {
  display: flex;
  height: 200px;
  background: var(--rp-bg-2);
  border: 1px solid var(--rp-shell-2);
  border-radius: 14px;
  box-shadow: var(--rp-shadow-soft);
  cursor: pointer;
  overflow: hidden;
}
.rp-pkg-featured:hover { box-shadow: var(--rp-shadow-md); }
.rp-pkg-featured-thumb {
  position: relative;
  width: 320px;
  flex-shrink: 0;
  background: var(--rp-ink);
  margin: 16px 0 16px 16px;
  border-radius: 10px;
}
.rp-pkg-thumb-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 6px 12px;
  font-size: var(--rp-fs-meta);
  font-weight: var(--rp-fw-meta);
  color: var(--rp-bg-2);
  background: rgba(26,19,22,0.5);
  border-radius: 0 0 10px 10px;
}
.rp-pkg-live-dot {
  position: absolute; top: 12px; left: 12px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rp-accent-soft);
}
.rp-pkg-live-label {
  position: absolute; top: 9px; left: 24px;
  font-size: var(--rp-fs-eyebrow); letter-spacing: 1.2px;
  font-weight: var(--rp-fw-title);
  color: var(--rp-bg-2);
}
.rp-pkg-featured-body {
  flex: 1;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.rp-pkg-featured-type { display: flex; align-items: center; gap: 8px; }
.rp-pkg-fresh { font-size: var(--rp-fs-eyebrow); letter-spacing: 0.5px; color: var(--rp-ink-3); font-weight: var(--rp-fw-meta); }
.rp-chip-tiny {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 8px;
  border-radius: 4px;
  font-size: var(--rp-fs-eyebrow); letter-spacing: 0.6px;
  font-weight: var(--rp-fw-meta);
}
.rp-chip-tiny-accent { background: var(--rp-accent-bg); color: var(--rp-accent); }
.rp-pkg-meta { font-size: var(--rp-fs-meta); font-weight: var(--rp-fw-body); color: var(--rp-ink-2); }
.rp-pkg-featured-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.rp-pkg-score-big { display: flex; align-items: flex-end; gap: 4px; }
.rp-pkg-score-suffix { font-size: var(--rp-fs-meta); font-weight: var(--rp-fw-meta); color: var(--rp-ink-3); padding-bottom: 4px; }

/* Pkg list */
.rp-pkg-list {
  display: flex;
  flex-direction: column;
  background: var(--rp-shell-2);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--rp-shell-2);
  gap: 1px;
}
.rp-pkg-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--rp-bg-2);
  cursor: pointer;
  transition: background .12s;
}
.rp-pkg-item:hover { background: var(--rp-bg); }
.rp-pkg-item.is-read { background: var(--rp-bg); opacity: 0.7; }
.rp-pkg-idx {
  font-size: var(--rp-fs-meta);
  letter-spacing: 1px;
  font-weight: var(--rp-fw-meta);
  color: var(--rp-ink-3);
  min-width: 18px;
}
.rp-pkg-thumb-sm {
  position: relative;
  width: 100px; height: 64px;
  background: var(--rp-shell) center/cover no-repeat;
  border-radius: 6px;
  flex-shrink: 0;
  overflow: hidden;
}
.rp-pkg-thumb-sm::after {
  content: attr(data-type);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--rp-ink-3);
  font-size: var(--rp-fs-eyebrow);
  font-weight: var(--rp-fw-meta);
  letter-spacing: 1px;
  text-transform: uppercase;
  pointer-events: none;
}
.rp-pkg-thumb-sm[data-type="youtube_video"]::after,
.rp-pkg-thumb-sm[data-type="youtube_live"]::after { content: 'YT'; }
.rp-pkg-thumb-sm[data-type="news"]::after { content: 'NEWS'; }
/* 실제 이미지가 있으면 placeholder 텍스트 숨김 */
.rp-pkg-thumb-sm[style*="background-image"]::after { display: none; }
.rp-pkg-item.is-read .rp-pkg-thumb-sm { background: var(--rp-ice-2); }
.rp-pkg-body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rp-pkg-type { font-size: var(--rp-fs-eyebrow-strong); letter-spacing: 0.8px; font-weight: var(--rp-fw-meta); color: var(--rp-ink-3); }
.rp-pkg-title {
  font-size: var(--rp-fs-body);
  font-weight: var(--rp-fw-meta);
  color: var(--rp-ink);
  letter-spacing: -0.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rp-pkg-item.is-read .rp-pkg-title { font-weight: var(--rp-fw-body); color: var(--rp-ink-2); }
.rp-pkg-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.rp-pkg-score-mid {
  font-size: var(--rp-fs-title-3);
  font-weight: var(--rp-fw-title);
  letter-spacing: -0.2px;
}
.rp-pkg-status { font-size: var(--rp-fs-eyebrow); letter-spacing: 0.4px; font-weight: var(--rp-fw-meta); }
.rp-empty-state {
  padding: 40px;
  text-align: center;
  font-size: var(--rp-fs-meta);
  color: var(--rp-ink-3);
  background: var(--rp-bg-2);
}

.rp-pkg-foot { display: flex; padding: 4px; align-items: center; }
.rp-pkg-more {
  font-size: var(--rp-fs-meta);
  font-weight: var(--rp-fw-body);
  color: var(--rp-ink-2);
  cursor: pointer;
}
.rp-pkg-more:hover { color: var(--rp-accent); }

/* ── Stat Panel (Sub) ──────────────────────────── */
.rp-stat-panel {
  width: 460px;
  flex-shrink: 0;
  background: var(--rp-bg);
  border-left: 1px solid var(--rp-shell-2);
  padding: 24px 24px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}
.rp-stat-head { display: flex; flex-direction: column; gap: 4px; }
.rp-stat-sub { font-size: var(--rp-fs-meta); color: var(--rp-ink-3); font-weight: var(--rp-fw-body); }

/* Workers */
.rp-workers {
  background: var(--rp-bg-2);
  border: 1px solid var(--rp-shell-2);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rp-workers-label { padding: 0 4px; }
.rp-w-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 12px;
  border-radius: 6px;
  background: var(--rp-bg);
}
.rp-w-row.is-active { background: var(--rp-accent-bg); }
.rp-w-tag {
  font-size: var(--rp-fs-eyebrow);
  letter-spacing: 0.6px;
  font-weight: var(--rp-fw-title);
}
.rp-w-fact { color: var(--rp-fact); }
.rp-w-accent { color: var(--rp-accent); }
.rp-w-partial { color: var(--rp-partial); }
.rp-w-ice { color: var(--rp-ink-3); }
.rp-w-bar { width: 1px; height: 14px; background: var(--rp-shell-2); }
.rp-w-date { font-size: var(--rp-fs-meta); font-weight: var(--rp-fw-meta); color: var(--rp-ink); }
.rp-w-pct {
  font-size: var(--rp-fs-meta);
  font-weight: var(--rp-fw-meta);
  color: var(--rp-ink-2);
}

/* Chart */
.rp-chart {
  background: var(--rp-bg-2);
  border: 1px solid var(--rp-shell-2);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rp-chart-head { display: flex; align-items: center; gap: 8px; }
.rp-chart-head-left { display: flex; flex-direction: column; gap: 2px; }
.rp-chart-title { font-size: var(--rp-fs-body); font-weight: var(--rp-fw-meta); color: var(--rp-ink); }
.rp-chart-total { display: flex; align-items: flex-end; gap: 4px; }
.rp-chart-total strong {
  font-size: var(--rp-fs-title-2);
  font-weight: var(--rp-fw-title);
  letter-spacing: -0.3px;
  color: var(--rp-ink);
}
.rp-chart-total span { font-size: var(--rp-fs-eyebrow-strong); font-weight: var(--rp-fw-meta); color: var(--rp-ink-3); }
.rp-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 80px;
}
.rp-bar, .rp-bar-key, .rp-bar-today, .rp-chart-bar {
  flex: 1;
  border-radius: 1px;
  min-height: 4px;
}
.rp-bar { background: var(--rp-shell-2); }
.rp-bar-key { background: var(--rp-accent-soft); }
.rp-bar-today { background: var(--rp-ice-1); }
.rp-chart-bar {
  background: var(--rp-accent-soft);
  cursor: help;
  transition: background .12s;
}
.rp-chart-bar:hover { background: var(--rp-accent); }
.rp-chart-empty {
  width: 100%;
  text-align: center;
  font-size: var(--rp-fs-meta);
  color: var(--rp-ink-3);
  padding: 24px 0;
}
.rp-chart-axis {
  display: flex;
  align-items: center;
  font-size: var(--rp-fs-eyebrow-strong);
  font-weight: var(--rp-fw-body);
  color: var(--rp-ink-3);
}

/* MISMATCH alert */
.rp-mm-alert {
  background: var(--rp-accent-bg);
  border: 1px solid var(--rp-accent);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rp-mm-alert-head { display: flex; align-items: center; gap: 6px; }
.rp-mm-alert-ic { font-size: var(--rp-fs-body); color: var(--rp-accent); }
.rp-mm-alert-title {
  font-size: var(--rp-fs-meta);
  font-weight: var(--rp-fw-title);
  letter-spacing: 0.2px;
  color: var(--rp-accent);
}
.rp-mm-alert-all { font-size: var(--rp-fs-meta); font-weight: var(--rp-fw-meta); color: var(--rp-accent); cursor: pointer; }
.rp-mm-alert-body {
  font-size: var(--rp-fs-meta);
  font-weight: var(--rp-fw-body);
  color: var(--rp-ink);
  line-height: 1.55;
}

/* ── Responsive: 좁은 viewport 에서 topbar/sidebar 깨짐 방지 ─────────
   세션 35 hot-fix (2026-05-06):
   기존 layout 은 1280+ 데스크탑 단일. 1024~1279 에서 logo/menu 글자
   단위 wrap 발생 → flex-shrink 0 + nowrap + 단계별 압축 @media.
   < 768 (모바일) 은 별도 햄버거 layout 차후 작업.
   ───────────────────────────────────────────────────────────────── */

.rp-topbar { flex-wrap: nowrap; min-width: 0; }
.rp-brand { white-space: nowrap; flex-shrink: 0; }
.rp-gnb { flex-shrink: 1; min-width: 0; flex-wrap: nowrap; }
.rp-gnb-item { white-space: nowrap; flex-shrink: 0; }
.rp-gnb-sub { white-space: nowrap; }
.rp-search { flex-shrink: 1; min-width: 80px; }
.rp-search-placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-profile-cluster { flex-shrink: 0; }
.rp-profile-info { white-space: nowrap; }

/* ── ≤1280px : 1단계 압축 (gap/padding/검색placeholder 축소) ─────── */
@media (max-width: 1279px) {
  .rp-topbar { gap: 18px; padding: 0 20px; }
  .rp-gnb { gap: 18px; margin-left: 16px; }
  .rp-gnb-item { padding: 22px 0; font-size: 13.5px; }
  .rp-gnb-sub { display: none; }
  .rp-search { width: auto; max-width: 220px; }
  .rp-search-kbd { display: none; }
  /* main FEED + ACTIVITY: stat panel 폭 축소 */
  .rp-stat-panel { width: 360px; }
  .rp-pkg-panel { padding: 20px 22px; }
  .rp-pkg-head { flex-wrap: wrap; row-gap: 8px; }
  .rp-pkg-head-left { min-width: 0; }
  .rp-pkg-head .rp-title-1 { font-size: 22px; }
  /* hero-split: 텍스트만 약간 축소 — column stack 은 다음 단계 */
  .rp-hero-split { gap: 12px; padding: 16px 20px; }
}

/* ── ≤1080px : 2단계 압축 (검색 텍스트 → 아이콘만, 프로필 텍스트 hide) */
@media (max-width: 1079px) {
  .rp-topbar { gap: 14px; padding: 0 16px; }
  .rp-gnb { gap: 14px; margin-left: 8px; }
  .rp-gnb-item { font-size: 13px; }
  .rp-search { width: 38px; padding: 0; justify-content: center; }
  .rp-search-placeholder { display: none; }
  .rp-profile-info { display: none; }
  .rp-celeb-btn-label { display: none; }
  /* main: FEED 위 / ACTIVITY 아래 stack — 가로폭 부족 해소 */
  .rp-content-card { flex-direction: column; }
  .rp-stat-panel { width: 100%; border-left: none; border-top: 1px solid var(--rp-shell-2); padding: 20px 22px; }
  .rp-stat-panel .rp-activity-grid { grid-template-columns: repeat(4, 1fr); }
  /* hero-split: 1.4fr 1fr → 1col stack */
  .rp-hero-split { grid-template-columns: 1fr; }
}

/* ── ≤900px : 3단계 (로고 텍스트 hide, 메뉴 아이템 더 줄임) ───────── */
@media (max-width: 899px) {
  .rp-brand > span:not(.rp-brand-mark) { display: none; }
  .rp-gnb { gap: 10px; margin-left: 6px; }
  .rp-gnb-item { font-size: 12.5px; padding: 22px 0; }
  .rp-sidebar { width: 200px; padding: 16px 12px; }
  .rp-sidebar-section .rp-eyebrow { font-size: 10.5px; }
}

/* ── ≤768px : 4단계 (사이드바 collapse + GNB 추가 압축) ──────────── */
@media (max-width: 767px) {
  .rp-topbar { padding: 0 12px; gap: 10px; }
  .rp-gnb { gap: 8px; }
  .rp-gnb-item { font-size: 12px; }
  .rp-icon-btn { width: 34px; height: 34px; }
  .rp-search { width: 34px; height: 34px; }
  .rp-dashboard .rp-sidebar { width: 60px; padding: 16px 6px; }
  .rp-dashboard .rp-sidebar-label,
  .rp-dashboard .rp-sidebar-count,
  .rp-dashboard .rp-sidebar .rp-eyebrow,
  .rp-dashboard .rp-sidebar-divider { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE LAYOUT (≤ 767px) — 세션 45 (2026-05-13)
   ───────────────────────────────────────────────────────────────────────────
   설계 결정 (CURRENT_WORK.md):
   · GNB 5탭 폐기 → 하단 4탭 (홈/유튜브/자료/제보) + 상단 마이 아바타
   · GNB 메뉴 hide → 햄버거 → panel-menu (뉴스/토론/법안/소개/정책/로그아웃)
   · scene-dashboard / archive / tips / debate / package-detail 은 별도
     mobile 마크업 (templates/{type}/mobile/{file})
   · scene-news / legislation / mypage / youtube 는 column stack @media
   · DIALOG 전체 → 바텀시트 slide-up
   · 탭 시스템: super 영역 PAGE 누적 → 헤더 탭 버튼 + panel-tabs

   safe-area-inset 활용: 노치/홈인디케이터 회피
   ═══════════════════════════════════════════════════════════════════════════ */

/* 🔑 모바일 셸의 크롬(헤더·하단 GNB·본문 클리어런스)은 여기 들어 있다.
   경계가 **1023 인 이유**: 모드 판정이 "모바일 = 1024 미만"(detectMode + 전환 스크립트)인데
   CSS 만 767 이어서 **같은 개념에 숫자가 둘**이었다. 그 틈(768~1023)에서 모바일 셸이
   헤더도 GNB 도 잃고 탐색 자체가 불가능했다(실측 2026-09-14 @900px: 둘 다 display:none).
   PC 셸은 1024 미만으로 내려오면 자동 강등되므로 이 범위에 존재하지 않는다 — 영향 없다.
   ⚠️ 이 숫자를 바꾸려면 base-layout 의 BP(1024)도 같이 바꿔야 한다. 둘은 한 쌍이다. */
/* ── 모바일 크롬 · 모바일 레이아웃 ─────────────────────────────────────────
   🔑 조건이 **폭이 아니라 모드**다. mode=mobile 이면 해상도가 아무리 커도 모바일로 보인다.
      (1024 이상에선 "PC 화면으로 보기" 버튼만 더 붙는다 — base-layout 의 installModeSwitch)
   왜 미디어쿼리를 버렸나: max-width 로 두면 그 경계 위에서 모바일 셸이 헤더도 GNB 도 잃는다.
      실측 2026-09-14 @1200px — 탐색 수단이 통째로 사라졌다. 폭은 모드를 대신하지 못한다.
   PC 셸은 mode=pc 라 여기에 걸리지 않고, 1024 미만으로 좁아지면 모바일로 자동 강등되므로
      "좁은 PC 셸" 상태 자체가 존재하지 않는다.
   ⚠️ 셀렉터 앞의 body.rp-mode-mobile 을 지우지 마라 — 지우면 PC 에 모바일 크롬이 덮인다. */

/* ── 1. 본문 영역 — 상단 topbar 52px + 하단 GNB 56px 회피 ─────────────── */
body.rp-mode-mobile.service-page { overflow: hidden; }

body.rp-mode-mobile #content {
  padding-top: var(--rp-topbar-h);
  padding-bottom: calc(var(--rp-gnb-h) + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

/* 🔴 고정 topbar 클리어런스는 위 #content 가 **혼자** 소유한다(cm 89절).
   .rp-app/.page-main 의 padding-top:64px 은 데스크톱 topbar(64px) 용인데
   모바일에서 해제되지 않아 56+64=120px 을 비우고 있었다 — 헤더 아래
   64px 죽은 띠. 실측 2026-09-14: 씬 상단이 120px 에서 시작했다.
   각자 피하면 여백이 쌓인다. 여기서 0 으로 되돌린다. */
body.rp-mode-mobile .rp-app, body.rp-mode-mobile .page-main { padding-top: 0; }

/* (2026-07-14 DEAD 규칙 제거 — V3) 이전의 .rp-dashboard/.rp-arch/.rp-tips/... 클리어런스 규칙은
   실제 씬 루트 클래스(.m-scene-*)와 하나도 매칭 안 되는 dead code 였음. 클리어런스는 위 #content 가 담당. */

/* ── 2. 상단 topbar 모바일 — 햄버거 + 로고 + 검색 + 마이 아바타 ─────── */
body.rp-mode-mobile .rp-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--rp-topbar-h);
  z-index: 1000;
  padding: 0 12px;
  gap: 8px;
  background: var(--rp-bg-2);
  border-bottom: 1px solid var(--rp-shell-2);
}

/* PC 전용 요소 hide */
body.rp-mode-mobile .rp-topbar .rp-gnb, body.rp-mode-mobile .rp-topbar .rp-search-placeholder, body.rp-mode-mobile .rp-topbar .rp-search-kbd, body.rp-mode-mobile .rp-topbar .rp-profile-info, body.rp-mode-mobile .rp-topbar .rp-celeb-btn-label { display: none !important; }
body.rp-mode-mobile .rp-topbar [data-action="bell"] { display: none !important; }
body.rp-mode-mobile .rp-topbar .rp-celeb-btn { display: none !important; }

/* 햄버거 버튼 (header 가 mode=mobile 일 때 렌더) */
body.rp-mode-mobile .rp-topbar .rp-hamburger {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: transparent;
  border: none;
  border-radius: var(--rp-r-md);
  color: var(--rp-ink);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
body.rp-mode-mobile .rp-topbar .rp-hamburger:hover { background: var(--rp-bg); }

body.rp-mode-mobile .rp-topbar .rp-brand {
  flex: 1; justify-content: center;
  gap: 6px;
}
body.rp-mode-mobile .rp-topbar .rp-brand > span:not(.rp-brand-mark) {
  display: inline-block;
  font-size: 16px; font-weight: 700;
}
body.rp-mode-mobile .rp-topbar .rp-search {
  width: 38px; height: 38px;
  padding: 0; justify-content: center;
  flex-shrink: 0;
  border: none; background: transparent;
}
body.rp-mode-mobile .rp-topbar .rp-spacer { display: none; }
body.rp-mode-mobile .rp-topbar .rp-profile-cluster {
  height: 38px;
  padding: 0;
  gap: 0;
}
body.rp-mode-mobile .rp-topbar .rp-profile {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--rp-accent-bg);
  border: 1.5px solid var(--rp-accent);
}

body.rp-mode-mobile .rp-profile-menu {
  /* PC dropdown → 모바일 sheet */
  top: var(--rp-topbar-h) !important;
  right: 8px !important;
  left: 8px !important;
  width: auto !important;
}

/* ── 3. 하단 4탭 GNB — fixed bottom ─────────────────────────────────── */
body.rp-mode-mobile .rp-gnb-mobile {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--rp-gnb-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--rp-bg-2);
  border-top: 1px solid var(--rp-shell-2);
  display: flex;
  align-items: stretch;
  z-index: 1000;
  box-shadow: 0 -2px 8px rgba(26, 19, 22, 0.04);
}
body.rp-mode-mobile .rp-gnb-mobile-item {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  color: var(--rp-ink-3);
  font-size: 11px;
  font-weight: var(--rp-fw-body);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  transition: color 0.12s;
}
body.rp-mode-mobile .rp-gnb-mobile-item iconify-icon { font-size: 20px; }
body.rp-mode-mobile .rp-gnb-mobile-item.is-active {
  color: var(--rp-accent);
  font-weight: var(--rp-fw-meta);
}
body.rp-mode-mobile .rp-gnb-mobile-item.is-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 30%; right: 30%;
  height: 3px;
  background: var(--rp-accent);
  border-radius: 0 0 2px 2px;
}
body.rp-mode-mobile .rp-gnb-mobile-item:hover { color: var(--rp-ink); }
body.rp-mode-mobile .rp-gnb-mobile-item.is-active:hover { color: var(--rp-accent); }

/* ── 공통 FAB (씬 FAB 승격, DESIGN_GUIDE §4.5 F6) — 씬별 md/mt/mpw-fab 통일 ─── */
body.rp-mode-mobile .rp-fab {
  position: fixed;
  right: 16px;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 18px;
  border: none; border-radius: 999px;
  background: var(--rp-accent);
  color: #FFFFFF;
  font-family: var(--rp-font);
  font-size: var(--rp-fs-chip); font-weight: var(--rp-fw-title);
  box-shadow: 0 6px 18px rgba(122, 18, 51, 0.35);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 40;
}
body.rp-mode-mobile .rp-fab:active { transform: translateY(1px); }
body.rp-mode-mobile .rp-fab iconify-icon { font-size: 15px; }

/* PC 모드에서는 hide */

/* ── 4. 햄버거 panel-menu (mobile) ───────────────────────────────── */
body.rp-mode-mobile .rp-panel-menu {
  height: 100vh;
  max-height: 100vh;
  background: var(--rp-bg-2);
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
}
body.rp-mode-mobile .rp-panel-menu-head {
  display: flex; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rp-ice-1);
  gap: 12px;
}
body.rp-mode-mobile .rp-panel-menu-head h2 {
  flex: 1; margin: 0;
  font-size: 17px; font-weight: 700;
  color: var(--rp-ink);
}
body.rp-mode-mobile .rp-panel-menu-close {
  width: 34px; height: 34px;
  background: transparent;
  border: none;
  border-radius: var(--rp-r-md);
  color: var(--rp-ink-2);
  cursor: pointer;
  font-size: 22px;
}
body.rp-mode-mobile .rp-panel-menu-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
body.rp-mode-mobile .rp-panel-menu-item {
  display: flex; align-items: center;
  justify-content: flex-start;     /* nskit-base 의 button { justify-content: center } body.rp-mode-mobile 무력화 */ gap: 14px; padding: 14px 20px; font-size: 15px; font-weight: var(--rp-fw-body); color: var(--rp-ink); cursor: pointer; border: none; background: transparent; width: 100%; text-align: left; text-decoration: none; } .rp-panel-menu-item:hover { background: var(--rp-bg); }
body.rp-mode-mobile .rp-panel-menu-item iconify-icon { font-size: 18px; color: var(--rp-ink-2); }
body.rp-mode-mobile .rp-panel-menu-divider {
  height: 1px;
  background: var(--rp-ice-1);
  margin: 8px 16px;
}
body.rp-mode-mobile .rp-panel-menu-item.is-warn { color: var(--rp-false); }
body.rp-mode-mobile .rp-panel-menu-item.is-warn iconify-icon { color: var(--rp-false); }

/* ── 5. 단순 column scene (news/legislation/mypage/youtube) ────────── */

/* scene-news: 카드 list 자연 1col */
body.rp-mode-mobile .rp-news .rp-news-list, body.rp-mode-mobile .rp-news .rp-news-list-pane { width: 100% !important; max-width: 100% !important; }
body.rp-mode-mobile .rp-news .rp-news-detail { display: none; }
body.rp-mode-mobile .rp-news-card { width: 100%; }

/* scene-legislation: card grid → 1col */
body.rp-mode-mobile .rp-legis-grid {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
body.rp-mode-mobile .rp-legis-cat-row { flex-wrap: wrap; gap: 6px; }
body.rp-mode-mobile .rp-legis-card { width: 100%; }

/* scene-mypage: cell grid 압축 */
body.rp-mode-mobile .rp-mypage-canvas { padding: 12px !important; }
body.rp-mode-mobile .rp-mypage .rp-mypage-cell-grid, body.rp-mode-mobile .rp-mypage [class*="cell-grid"] {
  grid-template-columns: 1fr !important;
}

/* scene-youtube: sidebar 폐기, pkg list 1col */
body.rp-mode-mobile .rp-yt .rp-sidebar { display: none !important; }
body.rp-mode-mobile .rp-yt .rp-pkg-filters {
  flex-wrap: wrap;
  gap: 6px;
}

/* ── 6. DIALOG → 바텀시트 ────────────────────────────────────────── */
body.rp-mode-mobile #dialog-area, body.rp-mode-mobile #dialog-area-super {
  /* fix container 가 모바일에서 슬라이드업 영역으로 동작 */
}
/* 모바일 dialog 글로벌 — 풀스크린 (form 류 dialog 대부분이 풀 영역 필요).
   세션 45 (2026-05-16): 기존 바텀시트 (height:auto + max-height:90vh) 는 콘텐츠
   적은 dialog (debate-claim-add 등) 가 작게 줄어드는 부작용. 풀스크린으로 통일. */
body.rp-mode-mobile .dialog-container, body.rp-mode-mobile [class*="dialog-container"] {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;        /* iOS 주소창 대응 — dynamic viewport (vh 폴백 위) */
  max-height: 100vh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* iOS 100vh 버그 수정 (2026-06-19): 위 풀스크린 규칙의 top:0/transform:none 이
   프로젝트 공통 센터링 규칙(#dialog-area > .dialog-container, !important, specificity 1,1,0)에
   밀려 컨테이너가 layout-viewport(100vh) 기준 translate 센터링됨 → iOS 주소창 영역만큼
   다이얼로그 헤더가 화면 위로 밀리고 하단이 헤더 높이만큼 비는 문제.
   더 높은 specificity(id+2class = 1,2,0)로 top:0 + bottom:auto + dvh + transform:none 강제.
   bottom:auto 필수 — top:0+bottom:0 동시 지정 시 height 무시하고 layout-viewport 로 늘어남. */
body.rp-mode-mobile #dialog-area.layer-area > .dialog-container, body.rp-mode-mobile #dialog-area-super.layer-area > .dialog-container {
  top: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  transform: none !important;   /* translate 센터링 제거 — 단 left/right/top 을 직접 0 으로 고정해야 가로/세로 모두 정상 */
}
/* 모바일 PAGE — NSKit sub-page-content 기본 padding 12px 제거 (세션 46, 2026-05-16):
   문제 = 외곽 12 + 각 section padding 14 + 카드 padding 8-12 = 삼중 padding 답답한 인상.
   fix = 모바일 detail PAGE root (.mp-page/.mb-page/.mc-page/.mtd-page) 가 든 sub-page-content 만 padding:0.
   :has() selector 로 격리 — 다른 PAGE 영향 0. */
body.rp-mode-mobile .sub-page-content:has(> .mp-page), body.rp-mode-mobile .sub-page-content:has(> .mb-page), body.rp-mode-mobile .sub-page-content:has(> .mc-page), body.rp-mode-mobile .sub-page-content:has(> .mtd-page), body.rp-mode-mobile .sub-page-content:has(> .mact-page) {   /* F9 2026-07-14 — 자체 패딩 보유, 이중 인셋 해소 */
  padding: 0 !important;
}

/* 모바일 dialog 단일 스크롤 정책 (세션 46, 2026-05-16):
   기존 정책 = dialog-content overflow:hidden + 자식 body wrapper 가 flex:1 + overflow-y:auto = 한 번 더 감싸지는 inner-scroll.
   변경 = dialog-content 가 단일 스크롤 컨테이너. 자식 body wrapper 의 inner-scroll 일괄 해제. head sticky 로 PC 의 fixed head UX 보존.
   적용 대상 = 각 dialog 의 body/results/list wrapper. PC 영향 0 (모바일 미디어 쿼리 안). */
body.rp-mode-mobile .dialog-container > .dialog-content {
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
/* dialog 1계층 wrapper — flex column 해제 (자연 흐름). 실측 class 명 기반. */
body.rp-mode-mobile .dialog-container > .dialog-content > .rp-topic-dlg, body.rp-mode-mobile .dialog-container > .dialog-content > .rp-dca-dlg, body.rp-mode-mobile .dialog-container > .dialog-content > .rp-dea-dlg, body.rp-mode-mobile .dialog-container > .dialog-content > .rp-dpk-dlg, body.rp-mode-mobile .dialog-container > .dialog-content > .rp-ev-dlg, body.rp-mode-mobile .dialog-container > .dialog-content > .rp-dmc-dlg, body.rp-mode-mobile .dialog-container > .dialog-content > .rp-search-dlg, body.rp-mode-mobile .dialog-container > .dialog-content > .rp-vote-dlg, body.rp-mode-mobile .dialog-container > .dialog-content > .rp-doc-dialog, body.rp-mode-mobile .dialog-container > .dialog-content > .rp-dex-dlg, body.rp-mode-mobile .dialog-container > .dialog-content > .rp-legis-dlg, body.rp-mode-mobile .dialog-container > .dialog-content > .rp-news-dlg, body.rp-mode-mobile .dialog-container > .dialog-content > .rp-quote-dlg {
  display: block !important;
  height: auto !important;
  min-height: 100%;
}
/* body / results / list wrapper — 자체 inner-scroll 해제 (flex 해제 + overflow visible). 실측 class 명. */
body.rp-mode-mobile .rp-topic-content, body.rp-mode-mobile .rp-dca-body, body.rp-mode-mobile .rp-dea-body, body.rp-mode-mobile .rp-dpk-results, body.rp-mode-mobile .rp-ev-dlg-body, body.rp-mode-mobile .rp-dmc-body, body.rp-mode-mobile .rp-search-dlg-results, body.rp-mode-mobile .rp-vote-dlg-list, body.rp-mode-mobile .rp-vote-dlg-body, body.rp-mode-mobile .rp-doc-body, body.rp-mode-mobile .rp-dex-list, body.rp-mode-mobile .rp-dex-detail, body.rp-mode-mobile .rp-dex-body, body.rp-mode-mobile .rp-dex-detail-body, body.rp-mode-mobile .rp-legis-dlg-body, body.rp-mode-mobile .rp-topic-body {
  flex: initial !important;
  overflow: visible !important;
  overflow-y: visible !important;
  min-height: auto !important;
  height: auto !important;
}
/* head — sticky top (dialog-content 가 스크롤되므로 PC fixed head UX 모바일 재현). 실측 class 명. */
body.rp-mode-mobile .rp-topic-dlg-head, body.rp-mode-mobile .rp-dca-head, body.rp-mode-mobile .rp-dea-head, body.rp-mode-mobile .rp-dpk-head, body.rp-mode-mobile .rp-ev-dlg-head, body.rp-mode-mobile .rp-dmc-head, body.rp-mode-mobile .rp-search-dlg-head, body.rp-mode-mobile .rp-vote-dlg-head, body.rp-mode-mobile .rp-doc-head, body.rp-mode-mobile .rp-dex-head, body.rp-mode-mobile .rp-dex-detail-head, body.rp-mode-mobile .rp-tip-form-head, body.rp-mode-mobile .rp-legis-dlg-head {
  position: sticky !important;
  top: 0;
  z-index: 5;
  background: var(--rp-card, #FFF);
}
/* footer (submit 버튼 영역) — sticky bottom 으로 PC 의 always-visible UX 재현. 실측 class 명. */
body.rp-mode-mobile .rp-dca-foot, body.rp-mode-mobile .rp-dea-foot, body.rp-mode-mobile .rp-dpk-foot, body.rp-mode-mobile .rp-ev-foot, body.rp-mode-mobile .rp-dmc-foot, body.rp-mode-mobile .rp-tip-form-foot, body.rp-mode-mobile .rp-legis-dlg-foot {
  position: sticky !important;
  bottom: 0;
  z-index: 4;
  background: var(--rp-card, #FFF);
}
body.rp-mode-mobile .dialog-container::before {
  /* drag handle — absolute 로 (out of flow). 이전 sticky 는 dialog-content 가
     시작점 16px 밀려 foot 잘리는 원인. visual 위치 동일. */
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 4px;
  background: var(--rp-ice-2);
  border-radius: 2px;
  z-index: 2;
  pointer-events: none;
}

/* NSKit sub-page-header 의 page-title — 모바일에서 긴 제목 2줄 ellipsis (세션 45) */
body.rp-mode-mobile .sub-page-header .page-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
  max-height: 2.5em;
  white-space: normal;
  word-break: keep-all;
}

/* ── 7. PAGE 영역 — 모바일 풀스크린 ────────────────────────────────── */
/* 버그수정 (2026-06-03): line 326 #sub-page-area{top:64px} 는 PC TopBar(64px) 기준.
   신규 모바일 트랙(.page-m-main)은 m-header 56px + detail PAGE 가 자체
   sub-page-header(back) 를 가짐 → PAGE 오버레이는 viewport top:0 풀스크린이어야 함.
   64px 가 그대로 새던 탓에: (a) 상단 8px(64-56) 마진 띠 + 씬이 비쳐 보임,
   (b) detail 레이어가 잘못된 세로 위치에서 시작. top/height 를 모바일에서 0/100% 로 재정의. */
body.rp-mode-mobile #sub-page-area, body.rp-mode-mobile #sub-page-area-super {
  top: 0 !important;
  height: 100% !important;
}
body.rp-mode-mobile #sub-page-area .sub-page-container, body.rp-mode-mobile #sub-page-area-super .sub-page-container, body.rp-mode-mobile [class*="sub-page-container"] {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  margin: 0 !important;
  left: 0 !important;
  top: 0 !important;
}
/* 슬라이드 인/아웃 — NSKit core 의 _show/_hideAnimation 이 jQuery animate 로 left + opacity 박는데
   opacity 페이드가 모바일에선 디졸브로 보임. jQuery 의 inline style 을 !important 로 무력화하고
   CSS transform 으로 깔끔한 좌우 슬라이드 만들기.
   동작 흐름: .show 없음 → transform translateX(100%), .show → translateX(0). jQuery 의 left/opacity 가
   inline style 박아도 우리 CSS 가 이김 (rule !important > inline non-important). */
body.rp-mode-mobile #sub-page-area > .sub-page-container, body.rp-mode-mobile #sub-page-area-super > .sub-page-container {
  opacity: 1 !important;
  left: 0 !important;
  transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1) !important;
  transform: translateX(100%) !important;
}
body.rp-mode-mobile #sub-page-area > .sub-page-container.show, body.rp-mode-mobile #sub-page-area-super > .sub-page-container.show {
  transform: translateX(0) !important;
}

/* ── 8. PANEL 영역 — 80vw slide-in 표준 ──────────────────────────────── */
body.rp-mode-mobile #side-panel-area .panel-container, body.rp-mode-mobile [class*="panel-container"] {
  width: 80vw !important;
  max-width: 360px !important;
  height: 100vh !important;
}

/* ── 9. panel-tabs.html 전용 스타일 ─────────────────────────────────── */
body.rp-mode-mobile .rp-panel-tabs {
  height: 100vh;
  background: var(--rp-bg-2);
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
}
body.rp-mode-mobile .rp-panel-tabs-head {
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--rp-ice-1);
}
body.rp-mode-mobile .rp-panel-tabs-eyebrow {
  font-size: var(--rp-fs-eyebrow-strong);
  font-weight: var(--rp-fw-meta);
  letter-spacing: 0.6px;
  color: var(--rp-ink-3);
  text-transform: uppercase;
}
body.rp-mode-mobile .rp-panel-tabs-title {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: var(--rp-fw-meta);
  color: var(--rp-ink);
  line-height: 1.3;
}
body.rp-mode-mobile .rp-panel-tabs-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column-reverse;
  padding: 12px 0;
}
body.rp-mode-mobile .rp-panel-tabs-row {
  display: flex; align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
body.rp-mode-mobile .rp-panel-tabs-row:hover { background: var(--rp-bg); }
body.rp-mode-mobile .rp-panel-tabs-row.is-active {
  background: var(--rp-accent-bg);
  border-left-color: var(--rp-accent);
}
body.rp-mode-mobile .rp-panel-tabs-row-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  gap: 2px;
}
body.rp-mode-mobile .rp-panel-tabs-row-title {
  font-size: 14px; font-weight: var(--rp-fw-meta);
  color: var(--rp-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.rp-mode-mobile .rp-panel-tabs-row-meta {
  font-size: 12px;
  color: var(--rp-ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.rp-mode-mobile .rp-panel-tabs-row-close {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--rp-ink-3);
  cursor: pointer;
  font-size: 18px;
}
body.rp-mode-mobile .rp-panel-tabs-row-close:hover {
  background: var(--rp-bg-cool);
  color: var(--rp-ink);
}
body.rp-mode-mobile .rp-panel-tabs-foot {
  border-top: 1px solid var(--rp-ice-1);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
}
body.rp-mode-mobile .rp-panel-tabs-close-all {
  width: 100%;
  padding: 12px;
  background: var(--rp-bg);
  border: 1px solid var(--rp-shell-2);
  border-radius: var(--rp-r-md);
  color: var(--rp-ink);
  font-size: 14px;
  font-weight: var(--rp-fw-meta);
  cursor: pointer;
}
body.rp-mode-mobile .rp-panel-tabs-close-all:hover {
  background: var(--rp-accent-bg);
  color: var(--rp-accent);
  border-color: var(--rp-accent);
}
body.rp-mode-mobile .rp-panel-tabs-empty {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  color: var(--rp-ink-3);
  font-size: 14px;
}

/* ── 10. PAGE 헤더 — 모바일 탭 버튼 (super 영역 PAGE 만 노출) ────── */
body.rp-mode-mobile .rp-page-head-mobile {
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 0 8px 0 4px;
  height: 48px;
  background: var(--rp-bg-2);
  border-bottom: 1px solid var(--rp-ice-1);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}
body.rp-mode-mobile .rp-page-head-back {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--rp-ink); cursor: pointer;
  font-size: 22px; padding: 0;
  flex-shrink: 0;
}
body.rp-mode-mobile .rp-page-head-title {
  flex: 1;
  font-size: 15px; font-weight: var(--rp-fw-meta);
  color: var(--rp-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
body.rp-mode-mobile .rp-page-head-tabs {
  position: relative;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--rp-ink); cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
body.rp-mode-mobile .rp-page-head-tabs:hover { background: var(--rp-bg); border-radius: var(--rp-r-md); }
body.rp-mode-mobile .rp-page-head-tabs.is-empty { display: none !important; }
body.rp-mode-mobile .rp-page-head-tabs-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: var(--rp-accent);
  color: var(--rp-bg-2);
  border-radius: 8px;
  font-size: 10px; font-weight: var(--rp-fw-meta);
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}


/* ── 11. scene-dashboard 모바일 reflow ───────────────────────────────── */
body.rp-mode-mobile .rp-dashboard {
  display: flex;
  flex-direction: column !important;
  height: auto;
  min-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* sidebar 의 "내 관심 (팔로우)" 만 본문 상단 가로 strip 으로 변환.
   "수집 흐름" (유튜브/매체기사/사용자제보) 은 하단 GNB 와 중복 → hide.
   세션 45 5/14 fix: 사용자 팔로우 2명이 hide 됐던 문제. */
body.rp-mode-mobile .rp-dashboard .rp-sidebar {
  width: 100% !important;
  height: auto !important;
  flex-shrink: 0;
  border-right: none !important;
  border-bottom: 1px solid var(--rp-shell-2);
  padding: 8px 12px !important;
  overflow-y: hidden !important;
  overflow-x: auto;
  background: var(--rp-bg-2);
  order: 0;
}
body.rp-mode-mobile .rp-dashboard .rp-sidebar-section { display: none !important; }
body.rp-mode-mobile .rp-dashboard .rp-sidebar-divider { display: none !important; }
body.rp-mode-mobile .rp-dashboard .rp-sidebar-h2 { display: none !important; }
/* 첫 번째 nav (= rp-side-follows, 팔로우) 만 가로 row, 두 번째 nav (수집 흐름) 은 hide */
body.rp-mode-mobile .rp-dashboard .rp-sidebar-nav { display: none; }
body.rp-mode-mobile .rp-dashboard #rp-side-follows {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0; padding: 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body.rp-mode-mobile .rp-dashboard #rp-side-follows::-webkit-scrollbar { display: none; }
body.rp-mode-mobile .rp-dashboard #rp-side-follows .rp-side-follow-row, body.rp-mode-mobile .rp-dashboard #rp-side-follows li {
  flex: 0 0 auto;
  height: auto !important;
  padding: 6px 12px !important;
  border-radius: 16px;
  background: var(--rp-bg-cool);
  font-size: 13px;
  white-space: nowrap;
}
body.rp-mode-mobile .rp-dashboard #rp-side-follows .rp-side-empty {
  color: var(--rp-ink-3);
  background: transparent;
  font-size: 12px;
}
body.rp-mode-mobile .rp-dashboard-right {
  width: 100% !important;
  padding: 12px !important;
  gap: 14px;
}
body.rp-mode-mobile .rp-dashboard .rp-hero-carousel {
  height: auto !important;
  min-height: 220px;
}
body.rp-mode-mobile .rp-dashboard .rp-hero-split {
  grid-template-columns: 1fr !important;
  padding: 14px;
}
body.rp-mode-mobile .rp-dashboard .rp-debate-strip, body.rp-mode-mobile .rp-dashboard .rp-main-strip, body.rp-mode-mobile .rp-dashboard .rp-legis-strip, body.rp-mode-mobile .rp-dashboard .rp-secondary-digest {
  padding: 14px !important;
}
body.rp-mode-mobile .rp-dashboard .rp-main-strip-grid {
  grid-template-columns: 1fr !important;
  gap: 10px;
}
body.rp-mode-mobile .rp-dashboard .rp-legis-strip-list, body.rp-mode-mobile .rp-dashboard .rp-sec-list {
  flex-direction: column !important;
  gap: 8px;
}
body.rp-mode-mobile .rp-dashboard .rp-content-section {
  padding: 0 !important;
}
body.rp-mode-mobile .rp-dashboard .rp-history-bar {
  padding: 8px 12px !important;
  gap: 8px;
  overflow-x: auto;
  flex-wrap: nowrap;
}
body.rp-mode-mobile .rp-dashboard .rp-history-bar .rp-history-clear, body.rp-mode-mobile .rp-dashboard .rp-history-bar .rp-history-caret { display: none; }
body.rp-mode-mobile .rp-dashboard .rp-content-card {
  flex-direction: column !important;
  border-radius: 0 !important;
}
body.rp-mode-mobile .rp-dashboard .rp-pkg-panel {
  padding: 12px !important;
}
body.rp-mode-mobile .rp-dashboard .rp-pkg-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  row-gap: 8px;
}
body.rp-mode-mobile .rp-dashboard .rp-pkg-filters {
  flex-wrap: wrap;
  gap: 6px;
}
body.rp-mode-mobile .rp-dashboard .rp-stat-panel {
  display: none !important;
  /* "내 활동" 은 마이페이지로 진입 — 모바일에선 dashboard 에서 hide */
}

/* ── 12. scene-archive 모바일 reflow + drill-down 풀스크린 ──────────── */
body.rp-mode-mobile .rp-arch {
  display: flex;
  flex-direction: column !important;
  height: auto;
  min-height: 100vh;
}
body.rp-mode-mobile .rp-arch-explorer {
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  border-right: none !important;
  border-bottom: 1px solid var(--rp-shell-2);
}
body.rp-mode-mobile .rp-arch-wiki-region {
  width: 100% !important;
  flex: 1;
}
body.rp-mode-mobile .rp-arch-wiki {
  padding: 14px !important;
}
/* wiki-side detail panel 을 풀스크린 overlay 로 (모바일 풀스크린 drill) */
body.rp-mode-mobile .rp-wiki-side {
  position: fixed !important;
  top: 52px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  z-index: 900;
  background: var(--rp-bg-2);
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
  border-top: 1px solid var(--rp-shell-2) !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.rp-mode-mobile .rp-wiki-side[aria-hidden="true"] { display: none !important; }
body.rp-mode-mobile .rp-wiki-side[aria-hidden="false"] { display: flex !important; }
body.rp-mode-mobile .rp-wiki-side-head {
  position: sticky;
  top: 0;
  background: var(--rp-bg-2);
  z-index: 10;
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--rp-ice-1);
}
body.rp-mode-mobile .rp-wiki-side-close {
  width: 38px; height: 38px;
}
body.rp-mode-mobile .rp-arch-search-row { flex-direction: column; gap: 8px; }
body.rp-mode-mobile .rp-arch-filter-chips { flex-wrap: wrap; }

/* ── 13. scene-tips 모바일 reflow + drill-down ─────────────────────── */
body.rp-mode-mobile .rp-tips {
  flex-direction: column !important;
  height: auto;
  min-height: 100vh;
}
body.rp-mode-mobile .rp-tips-list-pane {
  flex: 1 1 auto !important;
  max-width: 100% !important;
  width: 100%;
  border-right: none !important;
  border-bottom: 1px solid var(--rp-shell-2);
}
body.rp-mode-mobile .rp-tips-detail {
  /* PC 우측 60% 패널 → 모바일 풀스크린 overlay */
  position: fixed !important;
  top: 52px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  width: 100% !important;
  z-index: 900;
  background: var(--rp-bg-2);
  border-left: none !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* detail 이 empty 인 상태에서는 hide (사용자가 list 만 보게) */
body.rp-mode-mobile .rp-tips-detail:has(.rp-tips-detail-empty) { display: none !important; }
body.rp-mode-mobile .rp-tips-list-head { padding: 12px 14px !important; }
body.rp-mode-mobile .rp-tips-chips { gap: 4px; }

/* ── 14. scene-debate 모바일 reflow ─────────────────────────────────── */
body.rp-mode-mobile .rp-arena {
  flex-direction: column !important;
  height: auto;
  min-height: 100vh;
  padding: 14px !important;
}
body.rp-mode-mobile .rp-arena-block { width: 100% !important; }
body.rp-mode-mobile .rp-arena-headerrow, body.rp-mode-mobile .rp-arena-row {
  flex-direction: column !important;
  gap: 8px;
}
body.rp-mode-mobile .rp-arena-cell {
  width: 100% !important;
}
body.rp-mode-mobile .rp-arena-sidehead { display: none; }
body.rp-mode-mobile .rp-balance-bars { flex-direction: column; gap: 6px; }

/* ── 15. page-package-detail 피쉬본 세로 reflow ──────────────────────── */
/* 모바일 모드의 package detail PAGE: 우측 380px detail panel → hide */
body.rp-mode-mobile .rp-pkg-hero { flex-direction: column !important; gap: 8px; padding: 12px !important; }
body.rp-mode-mobile .rp-pkg-thumb { width: 100% !important; height: auto !important; max-height: 200px; }
body.rp-mode-mobile .rp-pkg-body { flex-direction: row !important; flex: 1; min-width: 0; }
body.rp-mode-mobile .rp-pkg-stage-area {
  flex-direction: column !important;
  width: 100% !important;
  overflow-x: hidden;
}
/* fishbone main + side detail panel 가로 → 세로 */
body.rp-mode-mobile .rp-pkg-main { flex-direction: column !important; width: 100% !important; }
body.rp-mode-mobile .rp-pkg-detail-panel, body.rp-mode-mobile .rp-detail-panel {
  display: none !important;
  /* 모바일에선 사용자가 명시한대로 좌측 타임라인 + 우측 카드 세로 reflow */
  /* detail 은 super PAGE 로 push */
}
body.rp-mode-mobile .rp-tl-list { padding: 0 14px; }
body.rp-mode-mobile .rp-pkg-head { flex-direction: column; gap: 8px; padding: 12px 14px; }
body.rp-mode-mobile .rp-pkg-head .rp-pkg-controls { width: 100%; }

/* fishbone "포인트 카드" — 좌측 timeline (시각 marker) + 우측 카드/링크 */
body.rp-mode-mobile .rp-fishbone-point, body.rp-mode-mobile .rp-tl-item {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
}
body.rp-mode-mobile .rp-fishbone-time, body.rp-mode-mobile .rp-tl-time {
  flex-shrink: 0;
  width: 56px;
  text-align: right;
  font-size: 11px;
  color: var(--rp-ink-3);
  padding-top: 2px;
}
body.rp-mode-mobile .rp-fishbone-card, body.rp-mode-mobile .rp-tl-card {
  flex: 1;
  min-width: 0;
  background: var(--rp-bg-2);
  border: 1px solid var(--rp-ice-1);
  border-radius: var(--rp-r-md);
  padding: 12px;
}
body.rp-mode-mobile .rp-fishbone-subs, body.rp-mode-mobile .rp-tl-subs {
  margin-top: 8px;
  display: flex; flex-direction: column;
  gap: 6px;
}

/* ── 16. 햄버거 + 마이 메뉴 PC dropdown → 모바일 sheet 처리 ─────────── */
/* (이미 위 #2 에서 처리 — 명세 보강만) */

/* ── 17. include-part="header" 의 sticky 고정 보장 ──────────────────── */
body.rp-mode-mobile [include-part="header"], body.rp-mode-mobile #rp-header-container, body.rp-mode-mobile .rp-topbar {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1000;
}

/* ── 18. scene-news / yt / legislation 의 sidebar 강제 hide + 본문 풀폭 ─── */
/* 인라인 CSS specificity 회피를 위해 보강. 세션 45 5/14 Playwright 검사 fix */
body.rp-mode-mobile .rp-news, body.rp-mode-mobile .rp-yt, body.rp-mode-mobile .rp-legis {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 100vh;
}
body.rp-mode-mobile .rp-news > .rp-sidebar, body.rp-mode-mobile .rp-yt > .rp-sidebar, body.rp-mode-mobile .rp-legis > .rp-sidebar { display: none !important; }
body.rp-mode-mobile .rp-news .rp-news-right, body.rp-mode-mobile .rp-yt .rp-yt-right, body.rp-mode-mobile .rp-legis .rp-legis-right, body.rp-mode-mobile .rp-yt > div:not(.rp-sidebar), body.rp-mode-mobile .rp-legis > div:not(.rp-sidebar) {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 auto;
  padding: 12px !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.rp-mode-mobile .rp-news-cat-row, body.rp-mode-mobile .rp-news-medium-row, body.rp-mode-mobile .rp-legis-cat-row {
  flex-wrap: wrap;
  gap: 6px;
}
body.rp-mode-mobile .rp-news-grid {
  grid-template-columns: 1fr !important;
  gap: 10px;
}

/* ── 19. scene-debate (rp-debate-v26) reflow ───────────────────────────── */
body.rp-mode-mobile .rp-debate-v26 {
  display: flex !important;
  flex-direction: column !important;
  height: auto;
  min-height: 100vh;
  padding: 12px !important;
}
body.rp-mode-mobile .rp-debate-v26 .rp-debate-listpane, body.rp-mode-mobile .rp-debate-v26 .rp-debate-listhead, body.rp-mode-mobile .rp-debate-v26 [class*="debate-list"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* ── 20. scene-mypage cell grid 압축 + profile row 깨짐 fix ───────────── */
body.rp-mode-mobile .rp-mypage {
  height: auto;
  min-height: 100vh;
}
body.rp-mode-mobile .rp-mypage .rp-mypage-canvas {
  padding: 12px !important;
  gap: 10px !important;
}
body.rp-mode-mobile .rp-mypage [class*="cell-grid"], body.rp-mode-mobile .rp-mypage [style*="grid-template"] {
  grid-template-columns: 1fr !important;
}
/* profile row 모바일 - PC 의 flex row (avatar + info + 로그아웃) 가 좁은 폭에서 글자 단위 wrap */
body.rp-mode-mobile .rp-mypage .rp-mypage-profile {
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 18px !important;
  gap: 12px !important;
}
body.rp-mode-mobile .rp-mypage .rp-mypage-profile > * {
  min-width: 0;
}
body.rp-mode-mobile .rp-mypage .rp-mypage-profile > *:not(.rp-mypage-avatar) {
  width: 100%;
}
body.rp-mode-mobile .rp-mypage .rp-mypage-avatar {
  width: 72px !important;
  height: 72px !important;
  align-self: flex-start;
  flex-shrink: 0;
}
body.rp-mode-mobile .rp-mypage .rp-mypage-info {
  flex: 1 1 auto;
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
body.rp-mode-mobile .rp-mypage .rp-mypage-info > * {
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
  writing-mode: horizontal-tb !important;
}
body.rp-mode-mobile .rp-mypage .rp-title-1, body.rp-mode-mobile .rp-mypage .rp-title-2, body.rp-mode-mobile .rp-mypage .rp-title-3 {
  writing-mode: horizontal-tb !important;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ── 21. scene-tips detail panel 모바일 — list 풀스크린, detail hide ──── */
/* PC 우측 60% panel 이 모바일에서 살짝 노출되던 문제 → 단순 hide
   (drill-down PAGE push 패턴은 다음 세션 작업) */
body.rp-mode-mobile .rp-tips .rp-tips-detail { display: none !important; }
body.rp-mode-mobile .rp-tips .rp-tips-list-pane {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}


/* ── 모바일 430 프레임 (NSKit 표준 콘텐츠 폭 · cm 23절) ──────────────────────
   모바일 콘텐츠 영역의 상한은 **430px**. 431 이상에서 가운데 세우고, 430 이하는 100% 핏.
   폭이 아니라 모드가 조건이므로 mode=mobile 이면 1400px 화면에서도 430 프레임이다.

   🔴 **transform 으로 센터링하지 않는다**(cm 23절) — transform 이 걸린 조상은 fixed
      자손의 containing block 이 되어 헤더·GNB·다이얼로그·패널이 통째로 어긋나고,
      100vw 는 transform 과 무관하게 뷰포트 폭이라 오른쪽으로 넘친다.
      left / width 로만 묶는다.

   ⚠️ **fixed 는 프레임 안에 있어도 뷰포트 기준이다** — 하나하나 다시 묶어야 한다.
      아래 목록은 실측으로 뽑았다(2026-09-14 @1400px, position:fixed 전수).
      fixed 요소를 새로 추가하면 **여기에도 넣어야** 한다. 안 넣으면 그것만 화면 끝에 붙는다. */
@media (min-width: 431px) {
  /* ⚠️ 레이어 영역은 **ID 로 적어야 한다** — 엔진(nskit-layout.css)이
     `#dialog-area { position:fixed; inset:0 }` 처럼 **ID 셀렉터**로 잡는다.
     `.layer-area`(0,2,0)로는 ID(1,0,0)를 못 이겨 폭만 430 이 되고 위치는 0 에 남는다
     (실측 2026-09-14: 폭 430 · 좌 0). 게다가 `inset` 단축이라 `left` 로 grep 해도 안 걸린다. */
  body.rp-mode-mobile #app-stage,
  body.rp-mode-mobile #m-header-area,
  body.rp-mode-mobile #sub-page-area,
  body.rp-mode-mobile #sub-page-area-super,
  body.rp-mode-mobile #side-panel-area,
  body.rp-mode-mobile #dialog-area,
  body.rp-mode-mobile #dialog-area-super,
  body.rp-mode-mobile .rp-gnb-mobile {
    width: 430px;
    left: calc(50% - 215px);
    right: auto;
  }

  /* 레이어 안의 **fixed 자손**(다이얼로그·서브페이지·패널 컨테이너)은 뷰포트 기준이라
     프레임을 탈출한다(실측: .dialog-container 가 0~1400). 컨테이너를 하나씩 쫓지 말고
     **영역 자신을 containing block 으로** 만들어 한 번에 가둔다 — 앞으로 생길 것까지 덮는다.
     🔴 transform 을 쓰지 않는다(cm 23절): transform 은 containing block 은 만들지만
        100vw 해석과 top 기준까지 틀어버린다. `contain: layout` 은 그 부작용이 없다.
     실측 2026-09-14 @1400px: 컨테이너·딤 모두 485~915 로 들어옴. */
  body.rp-mode-mobile #sub-page-area,
  body.rp-mode-mobile #sub-page-area-super,
  body.rp-mode-mobile #side-panel-area,
  body.rp-mode-mobile #dialog-area,
  body.rp-mode-mobile #dialog-area-super {
    contain: layout;
  }

  /* 프레임 경계를 보이게 — 넓은 화면에서 '깨진 레이아웃' 이 아니라 기기처럼 읽히도록 */
  body.rp-mode-mobile #app-stage {
    box-shadow: 0 0 0 1px var(--rp-shell-2), 0 0 44px rgba(0, 0, 0, .10);
  }

  /* 우하단 고정 버튼은 **뷰포트 오른쪽이 아니라 프레임 오른쪽**에 붙는다.
     (원래 오프셋 .rp-fab=16 / #rp-mode-switch=20 을 프레임 기준으로 옮긴 값) */
  body.rp-mode-mobile .rp-fab { right: calc(50% - 199px); }
  body.rp-mode-mobile #rp-mode-switch { right: calc(50% - 195px); }
}

/* PC 에서 하단 GNB / 햄버거 / 헤더 모바일 요소 hide — 위 블록과 짝이다.
   조건은 폭이 아니라 **모드**다. 폭으로 숨기면 넓은 화면의 모바일 모드에서
   탐색 수단이 통째로 사라진다(실측 2026-09-14 @1200px). */
body:not(.rp-mode-mobile) .rp-gnb-mobile { display: none !important; }
body:not(.rp-mode-mobile) .rp-topbar .rp-hamburger { display: none !important; }
body:not(.rp-mode-mobile) .rp-page-head-mobile { display: none !important; }


/* ── 관점 페르소나 (2026-09-06) ─────────────────────────────────────────
   토론 주장 대부분은 사람이 아니라 관점 축이 쓴다. 숨기지 않고 캐릭터로 세운다.
   ⚠️ 축을 **색으로** 구분하지 않는다 — 6색을 새로 만들면 진영색(--rp-left/right)이나
      verdict 축(--rp-fact/false/partial)과 의미가 충돌한다. 구분은 이름으로 한다.
      (right/DESIGN_GUIDE.md — 두 축을 절대 안 섞는다) */
.rp-pa-dot { width:7px; height:7px; border-radius:50%; background:var(--rp-accent);
             display:inline-block; flex:0 0 auto; }

.rp-pa-badge { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--rp-accent-line);
               background:var(--rp-accent-bg); color:var(--rp-accent); border-radius:999px;
               padding:2px 9px; font-size:12px; font-weight:600; cursor:pointer; line-height:1.6; }
.rp-pa-badge:hover { background:var(--rp-bg-2); }

.rp-pa-roster { border:1px solid var(--rp-ice-1); background:var(--rp-bg-2);
                border-radius:12px; padding:12px 14px; margin-bottom:14px; }
.rp-pa-roster-lead { font-size:13px; color:var(--rp-ink-2); line-height:1.6; margin-bottom:10px; }
.rp-pa-roster-lead b { color:var(--rp-ink); }
.rp-pa-roster-row { display:flex; flex-wrap:wrap; gap:6px; }
.rp-pa-chip { display:inline-flex; align-items:center; gap:6px; cursor:pointer;
              border:1px solid var(--rp-ice-1); background:var(--rp-bg); color:var(--rp-ink-2);
              border-radius:999px; padding:5px 11px; font-size:12.5px; }
.rp-pa-chip:hover { border-color:var(--rp-accent-line); color:var(--rp-accent); }
.rp-pa-chip-nm { font-weight:600; }

.rp-pa-sheet-head { display:flex; align-items:center; gap:8px; font-size:15px;
                    color:var(--rp-ink); margin-bottom:12px; }
.rp-pa-dl { margin:0; }
.rp-pa-dl dt { font-size:11.5px; color:var(--rp-ink-3); letter-spacing:.02em; margin-top:10px; }
.rp-pa-dl dd { margin:3px 0 0; font-size:13.5px; color:var(--rp-ink); line-height:1.65; }
.rp-pa-note { margin:14px 0 0; padding-top:12px; border-top:1px solid var(--rp-ice-1);
              font-size:12.5px; color:var(--rp-ink-2); line-height:1.6; }

/* 동의 표시 — 숫자로 합치지 않는다. 누가 눌렀는지 보이는 게 정보다.
   '법조 축과 데이터 축이 같은 결론'은 독자에게 실제 신호이고,
   기계 표를 사람 표에 더하면 그건 사회적 증거의 위조가 된다. */
.rp-pa-agree { display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap; }
.rp-pa-agree-sep { color:var(--rp-ice-3); }

/* 프로필 시트 — 프레임워크 DIALOG.alert 은 본문을 이스케이프해 태그가 그대로 보인다.
   DOM 으로 직접 만들고 여기서 입힌다(실측 2026-09-06). */
.rp-pa-overlay { position:fixed; inset:0; z-index:9000; display:flex;
                 align-items:center; justify-content:center; padding:20px;
                 background:rgba(26,19,22,.42); }
.rp-pa-overlay .rp-pa-sheet { background:var(--rp-bg-2); border:1px solid var(--rp-ice-1);
                 border-radius:14px; padding:20px 22px; max-width:520px; width:100%;
                 max-height:80vh; overflow-y:auto; }
.rp-pa-close { margin-top:16px; width:100%; cursor:pointer;
               border:1px solid var(--rp-ice-1); background:var(--rp-bg);
               color:var(--rp-ink-2); border-radius:10px; padding:9px 0; font-size:13.5px; }
.rp-pa-close:hover { border-color:var(--rp-accent-line); color:var(--rp-accent); }

/* ── 토론 한눈에 보기 (2026-09-06) ─────────────────────────────────────
   유리/불리는 계산으로만 말한다. 논점 개수로 방향을 말하면 분량을 승패로 둔갑시키는 것이다. */
.rp-ds { border:1px solid var(--rp-ice-1); background:var(--rp-bg-2);
         border-radius:12px; padding:14px 16px; margin-bottom:14px; }
.rp-ds-head { font-size:11.5px; color:var(--rp-ink-3); letter-spacing:.04em; margin-bottom:8px; }
.rp-ds-verdict { font-size:14.5px; color:var(--rp-ink); line-height:1.6; }
.rp-ds-verdict b { color:var(--rp-accent); }
.rp-ds-why { display:block; margin-top:3px; font-size:12px; color:var(--rp-ink-3); }
.rp-ds-grid { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.rp-ds-cell { flex:1 1 130px; border:1px solid var(--rp-ice-1); border-radius:9px;
              padding:8px 10px; background:var(--rp-bg); }
.rp-ds-cell span { display:block; font-size:11px; color:var(--rp-ink-3); }
.rp-ds-cell b { font-size:13.5px; color:var(--rp-ink); font-weight:600; }
.rp-ds-moves { margin:12px 0 0; padding-left:18px; }
.rp-ds-moves li { font-size:12.5px; color:var(--rp-ink-2); line-height:1.7; }
.rp-ds-moves b { color:var(--rp-ink); }
.rp-ds-cta { margin-top:12px; padding-top:10px; border-top:1px solid var(--rp-ice-1);
             font-size:12.5px; color:var(--rp-ink-2); }
.rp-ds-cta b { color:var(--rp-accent); }
.rp-ds-cond { color:var(--rp-ink-3); }
.rp-ds-revive b { color:var(--rp-ink); }
.rp-ds-reopen { display:block; margin-top:10px; width:100%; cursor:pointer;
                border:1px solid var(--rp-accent-line); background:var(--rp-accent-bg);
                color:var(--rp-accent); border-radius:10px; padding:9px 0; font-size:13px; font-weight:600; }
.rp-ds-reopen:hover { background:var(--rp-bg-2); }

/* 커뮤니티 출처 — 보도가 아니다. 버리지 않되(사용자 결정 2026-09-10) 눈에 띄게 구분한다.
   ⚠️ verdict 색(사실/허위/부분)을 쓰지 않는다 — 증거 강도 축과 섞이면 둘 다 못 읽는다. */
.rp-src-community { color:var(--rp-ink-2); background:var(--rp-bg-cool);
                    border:1px dashed var(--rp-ice-2); border-radius:6px;
                    padding:1px 7px; font-size:11.5px; }