@charset "utf-8";
/* ══ 먼저 읽어 주십시오 ═══════════════════════════════════════════════
   규칙 : https://idc.kr/_claude/CODE_RULES.txt

   장비 코너 — 모양. 임자는 B(theme/runin/**)입니다. 2026-09-06 시작 · 이 머리글 2026-09-28.
   선택자 744개 가운데 676개가 .rgx- 로 시작하고, .rgx 자신·자손이 53개입니다(합쳐 729개).
   나머지 15개는 — SVG 투시도의 .k- 12개 · #ri-main 2개(956·957) · .ri-cform__alt 1개(1825행)입니다.
   🚨 파일 4~16행 머리 주석의 「이 파일은 /gear/ 지면에서만 실린다」·「선택자는 전부 .rgx- 로 시작한다」
      두 문장은 «지금 코드와 맞지 않습니다». 아래를 보십시오.

   실리는 곳은 «세 지면» 입니다(inc/gear.php 408~413행) : is_page('gear') · is_page('gear-inquiry')
   · is_page('contact'). 이 셋이 아니면 return 합니다.
   🚨 /contact/ 는 C 님 구역입니다. page-contact.php 가 .rgx-form · .rgx-f · .rgx-agree · .rgx-grid2
      · .rgx-kn · .rgx-msg 를 씁니다. 이것들을 고치면 그 지면이 같이 바뀝니다.
   🚨 /contact/ 에는 gear.js 를 싣지 않습니다(inc/gear.php 420행 `if ($ri_ct) { return; }`).
      gear.js 가 붙이는 `.rgx-js`(gear.js 48·189행)가 없으니, 그 관문 뒤의 숨김
      (1189 .rgx-pops · 1437 .rgx-tab__p)은 그 지면에서 켜지지 않습니다.

   왜 이 꼴인가 — 칸 나눔을 @media 가 아니라 @container 로 합니다. 창은 넓고 «칸» 만 좁은 자리에서
   머리띠가 깨졌기 때문입니다(739~740행 주석). @media 는 셋뿐이고(734·901·1104) 전부
   prefers-reduced-motion 입니다.

   🚨 함정
    1. 956·957(#ri-main …)은 2026-09-24 라이브에서 「제휴」 글자가 사라졌던 자리의 고침입니다(951~955
       주석). 남이 넣은 `#ri-main em:not([class]){color:inherit}` 이 아이디(1,1,1)라 이 파일의 (0,3,1)을
       이겨 흰 바탕에 흰 글자가 됐습니다. 두 줄을 지우면 다시 사라집니다.
    2. 880~886행 주석 ④ 「모서리를 둥글리고 그늘을 넣어 지면 위에 «얹힌» 느낌을 준다」 는 «지금 코드와
       반대» 입니다. 바로 아래 889~891행 .rgx-sl__win 은 border-radius:0 · box-shadow:none 입니다.
       주석을 근거로 되살리지 마십시오.
    3. 맨 끝 1855~1871 의 자간 묶음(선택자 17개 · letter-spacing:-.03em)은 «파일 맨 끝이라서» 이깁니다.
       32행 `.rgx h1,.rgx h2,.rgx h3{letter-spacing:normal}` 과 «겹치는 열한 곳» 은 특이도가 같습니다
       (0,1,1) — 순서로만 갈립니다. 위로 옮기면 그 열한 곳이 풀립니다.
       (묶음 17개 중 넷은 (0,1,0)이라 32행과 다투지 않습니다 : 1861 .rgx-cat__i · 1863 .rgx-chead__i
        · 1868 .rgx-sl__h · 1870 .rgx-rk__h. 1856 .rgx-nav__home b · 1859 .rgx-hero__st b 는 b 라
        32행이 잡지 않습니다.)
    4. 같은 중괄호를 나눠 쓰는 자리 — 한쪽을 고치면 다른 쪽이 부서집니다.
       .rgx-facts(회사 정보표) ↔ .rgx-spec(제품 규격표) 5곳 : 639·640·646·650·757
       .rgx-rk__t(판매 순위표) ↔ .rgx-rc__t(세계기록표) 3곳 : 1483·1487·1492
       .rgx-call--l/--r(투시도 이름표) ↔ .rgx-tag--l/--r 2곳 : 300·301 — .rgx-tag 는 46행의 «배지» 입니다.
    5. 두 번 선언된 자리 — .rgx-sl__bar 가 1030(z-index:2)·1094(z-index:5) 둘이고 뒤가 이깁니다.
       .rgx 도 20행·768행으로 쪼개져 있습니다. 768행의 container-name:rgx 를 지우면
       `@container rgx` 여섯 곳(744·775·777·864·929·932)이 «조용히» 죽습니다.
    6. 이름없는 @container 23곳은 가장 가까운 container-type 조상(선언 12곳)을 잽니다. 새 덩이에
       container-type:inline-size 를 안 주면 그 조상이 .rgx 가 되어 칸이 어긋납니다.
       (이름 붙은 것은 rgx 6곳 · rgxfig 2곳[255·402] — 합쳐 @container 31곳입니다.)
    7. .rgx-pop__lead 는 1259(.rgx-pops 안)·1408(.rgx-bub 안) «양쪽» 에서 display:none 됩니다.
       한 곳만 지워도 안 보입니다.

   실측(직접 셈) — 1,871줄 · 94,232바이트 · CSS 블록 725개(주석 안의 중괄호 3쌍[369·911·951]은 제외) ·
   선택자 묶음 688 · 선택자 744 · at-rule 35개(@container 31 · @media 3 · @keyframes 1) · 구역 29개
   (0~27 과 17-b) · !important 1곳(1794 .rgx-about__one 의 margin) · 아이디 선택자 2곳(956·957) ·
   var(--ri-fs-*) 233회.
   신문 톤이라 색 리터럴(#xxxxxx) 0곳 · border-radius 46곳이 «전부» 0 · box-shadow 8곳이 «전부» none 입니다.
   font-size 에 px 를 쓴 곳 11곳 : 11·16·18·18·20·24·30·30·38 은 눈금 위이고, 96px(675 .rgx-item__noph)·
   110px(996 .rgx-sl__ic)는 빈 사진 자리 아이콘이라 눈금 예외입니다.
   🔵 붙박이는 .rgx-rail 하나뿐입니다(780행 position:sticky · top:117px — 779행 주석이 테마 머리글
   105px 을 듭니다). position:fixed 는 한 곳도 없습니다. 머리띠 .rgx-nav 는 붙박이를 «뗐습니다»
   (89행 주석) — 테마 머리글과 겹쳐 반쯤 가려졌습니다.
   🔵 「사장님」 이 든 주석 줄은 17곳이고, 그중 날짜가 붙은 11곳이 모두 2026-09-06 입니다
   (239·761·771·881·1052·1161·1627·1698·1790·1805·1818).

   🔴 956·957 을 지우지 마십시오 — 「제휴」 배지가 흰 바탕에 흰 글자가 됩니다.
   🔴 1855~1871 묶음의 «자리» 를 옮기지 마십시오 — 1846~1847행 주석대로 A 님 01:55 안 · B 동의(02:45)
      · C 님 제기(23:07)로 2026-09-25 셋이 합의한 규칙입니다.
   🔴 `.rgx-js` 관문 밖으로 display:none 을 내지 마십시오 — 1413행 주석대로, 자바스크립트가 죽으면
      그 덩이가 통째로 사라집니다.
   ══════════════════════════════════════════════════════════════ */

/* ============================================================================
   장비 코너 — 모양
   런닝인사이드 · 2026-09-06

   ★규칙 (tokens.css 계약을 그대로 따른다)
     ① 색 리터럴(#xxxxxx)을 «한 곳도» 쓰지 않는다. 전부 var(--ri-*) 이다.
     ② 모서리는 0 이다. 둥근 것은 pill 뿐이다(칩·배지).
     ③ 그림자로 띄우지 않는다. «면과 선» 으로 나눈다.
     ④ 숫자가 뜻인 자리에만 --ri-font-num 을 쓴다(값·개수·할인율).
     ⑤ 칸 나눔은 @media 가 아니라 @container 다.
        좁은 것은 «화면» 이 아니라 «칸» 이다. 사이드바 안에서도 제대로 접힌다.

   ★이 파일은 /gear/ 지면에서만 실린다(inc/gear.php 의 enqueue).
     다른 화면의 모양을 건드리지 않는다. 선택자는 전부 .rgx- 로 시작한다.
   ============================================================================ */

/* ══ 0. 바탕 ══════════════════════════════════════════════════════════════ */

.rgx {
  max-width: var(--ri-container);
  margin: 0 auto;
  padding: 0 var(--ri-space-4) var(--ri-space-9);
  color: var(--ri-text);
  word-break: keep-all;          /* ★anywhere 는 한글을 글자마다 끊는다 */
  overflow-wrap: break-word;
}
.rgx :focus-visible {
  outline: var(--ri-focus-w) solid var(--ri-accent);
  outline-offset: var(--ri-focus-o);
}
.rgx h1, .rgx h2, .rgx h3 { letter-spacing: normal; text-wrap: balance; }
.rgx a { color: inherit; text-decoration: none; }

/* 되풀이되는 작은 그림 */
.rgx .gi { width: 1em; height: 1em; display: block; }

/* 배지 — 「제휴」 */
.rgx-badge {
  display: inline-block; vertical-align: middle;
  font-size: var(--ri-fs-xs); font-weight: 700; font-style: normal;
  line-height: 1.05; padding: 4px 8px; margin-left: 8px;
  background: var(--ri-accent); color: var(--ri-accent-ink);
  border-radius: 0;
}
.rgx-tag {
  font-family: var(--ri-font-num); font-style: normal; font-weight: 700;
  font-size: var(--ri-fs-xs); line-height: 1.05;
  padding: 3px 8px; margin-left: 8px;
  background: var(--ri-accent); color: var(--ri-accent-ink);
  border-radius: 0;
}
.rgx-tag--g { background: var(--ri-surface-2); color: var(--ri-text-sub); }

/* 단추 */
.rgx .rgx-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--ri-tap); padding: 0 var(--ri-space-5);
  font-size: var(--ri-fs-base); font-weight: 700;
  border: 1px solid var(--ri-brand);
  background: var(--ri-brand); color: var(--ri-brand-ink);
  transition: background .15s ease;
}
.rgx .rgx-btn:hover { background: var(--ri-brand-hover); border-color: var(--ri-brand-hover); }
.rgx .rgx-btn--out { background: var(--ri-accent); border-color: var(--ri-accent); color: var(--ri-accent-ink); }
.rgx .rgx-btn--out:hover { background: var(--ri-brand); border-color: var(--ri-brand); }
.rgx .rgx-btn--gh { background: transparent; color: var(--ri-text); border-color: var(--ri-line-strong); }
.rgx .rgx-btn--gh:hover { background: var(--ri-surface-2); border-color: var(--ri-text); }

/* 구역 머리 */
.rgx-sec__h {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--ri-space-2) var(--ri-space-4);
  padding-bottom: var(--ri-space-3);
  border-bottom: 2px solid var(--ri-text);
  margin: var(--ri-space-8) 0 var(--ri-space-5);
}
.rgx-sec__h h2 { font-size: var(--ri-fs-xl); font-weight: 700; margin: 0; }
.rgx-sec__h h2 em {
  font-style: normal; font-family: var(--ri-font-num);
  color: var(--ri-accent); margin-left: 8px;
}
.rgx-sec__h p { flex: 1 1 16em; margin: 0; font-size: var(--ri-fs-sm); color: var(--ri-text-sub); }
.rgx .rgx-sec__go { margin-left: auto; font-size: var(--ri-fs-sm); font-weight: 700; color: var(--ri-accent); }
.rgx .rgx-sec__go:hover { text-decoration: underline; }

/* ══ 1. 머리띠 — 전체 카테고리 · 검색 ═════════════════════════════════════ */

/* ★붙박이(sticky)를 뗐다. 테마 머리글도 붙박이라 둘이 겹쳐 반쯤 가려졌다. */
.rgx-nav {
  position: relative; z-index: 40;
  margin: 0 calc(var(--ri-space-4) * -1) var(--ri-space-4);
  background: var(--ri-surface);
  border-bottom: 1px solid var(--ri-line);
}
.rgx-nav__in {
  display: flex; align-items: center; gap: var(--ri-space-2);
  max-width: var(--ri-container); margin: 0 auto;
  padding: var(--ri-space-2) var(--ri-space-4);
}
.rgx-nav__home { display: flex; align-items: baseline; gap: 8px; flex: none; }
.rgx-nav__home b { font-size: var(--ri-fs-xl); font-weight: 700; letter-spacing: normal; }
.rgx-nav__home span {
  font-family: var(--ri-font-num); font-size: var(--ri-fs-xs);
  font-weight: 700; color: var(--ri-text-sub); letter-spacing: .14em;
}

/* 전체 카테고리 — <details> 라서 자바스크립트 없이도 열린다 */
.rgx-mega { position: relative; flex: none; }
.rgx-mega > summary {
  display: flex; align-items: center; gap: 8px;
  min-height: var(--ri-tap); padding: 0 var(--ri-space-4);
  font-size: var(--ri-fs-sm); font-weight: 700;
  background: var(--ri-brand); color: var(--ri-brand-ink);
  cursor: pointer; list-style: none;
}
.rgx-mega > summary::-webkit-details-marker { display: none; }
.rgx-mega__bars { display: grid; gap: 3px; }
.rgx-mega__bars i { display: block; width: 14px; height: 2px; background: currentColor; }
.rgx-mega[open] > summary { background: var(--ri-accent); }

.rgx-mega__p {
  position: absolute; left: 0; top: calc(100% + 1px); z-index: 50;
  width: min(92vw, 1000px);
  background: var(--ri-surface);
  border: 1px solid var(--ri-text);
  padding: var(--ri-space-5);
  max-height: min(72vh, 620px); overflow-y: auto;
}
.rgx-mega__grid { display: grid; gap: var(--ri-space-6); grid-template-columns: repeat(4, 1fr); }
.rgx-mega__g > h3 {
  font-size: var(--ri-fs-sm); font-weight: 700; margin: 0 0 var(--ri-space-3);
  padding-bottom: 8px; border-bottom: 2px solid var(--ri-text);
}
.rgx-mega__c { margin-bottom: var(--ri-space-4); }
.rgx-mega__ct { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--ri-fs-base); }
.rgx-mega__ct:hover b { text-decoration: underline; }
.rgx-mega__i { font-size: 18px; color: var(--ri-accent); flex: none; }
.rgx-mega__c ul { list-style: none; margin: 8px 0 0; padding: 0 0 0 24px; }
.rgx-mega__c ul a {
  display: block; padding: 3px 0;
  font-size: var(--ri-fs-sm); color: var(--ri-text-sub);
}
.rgx-mega__c ul a:hover { color: var(--ri-accent); text-decoration: underline; }
.rgx-mega__c ul a i {
  font-family: var(--ri-font-num); font-style: normal; font-size: var(--ri-fs-xs);
  color: var(--ri-accent); margin-left: 4px;
}
.rgx-mega__f {
  margin: var(--ri-space-4) 0 0; padding-top: var(--ri-space-3);
  border-top: 1px solid var(--ri-line);
  font-size: var(--ri-fs-xs); color: var(--ri-text-sub); line-height: var(--ri-lh-base);
}

/* 검색 */
.rgx-search { position: relative; flex: 1 1 12em; min-width: 0; display: flex; }
.rgx-search input {
  flex: 1 1 auto; min-width: 0;
  height: var(--ri-tap); padding: 0 var(--ri-space-3);
  font: inherit; font-size: var(--ri-fs-sm);
  border: 1px solid var(--ri-line-strong); border-right: 0;
  background: var(--ri-surface); color: var(--ri-text);
  border-radius: 0; -webkit-appearance: none; appearance: none;
}
.rgx-search input::placeholder { color: var(--ri-text-sub); opacity: 1; }
.rgx-search button {
  flex: none; width: var(--ri-tap); height: var(--ri-tap);
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--ri-brand); background: var(--ri-brand); color: var(--ri-brand-ink);
}
.rgx-search button svg { width: 18px; height: 18px; }
.rgx-search button:hover { background: var(--ri-brand-hover); }

.rgx-sugg {
  position: absolute; left: 0; right: 0; top: calc(100% + 1px); z-index: 45;
  background: var(--ri-surface); border: 1px solid var(--ri-text);
  max-height: 60vh; overflow-y: auto;
}
.rgx-sugg a {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px var(--ri-space-3); font-size: var(--ri-fs-sm);
  border-bottom: 1px solid var(--ri-line);
}
.rgx-sugg a:last-child { border-bottom: 0; }
.rgx-sugg a:hover, .rgx-sugg a.is-on { background: var(--ri-surface-2); }
.rgx-sugg a span { color: var(--ri-text-sub); font-size: var(--ri-fs-xs); margin-left: auto; flex: none; }
.rgx-sugg mark { background: transparent; color: var(--ri-accent); font-weight: 700; }

.rgx-nav__q { display: flex; gap: var(--ri-space-3); list-style: none; margin: 0; padding: 0; flex: none; }
.rgx-nav__q a {
  display: inline-flex; align-items: center; min-height: var(--ri-tap);
  font-size: var(--ri-fs-sm); font-weight: 700;
}
.rgx-nav__q a:hover { color: var(--ri-accent); }
.rgx-nav__q a[aria-current="page"] { color: var(--ri-accent); box-shadow: none; }

/* ══ 2. 현재 위치 ═════════════════════════════════════════════════════════ */

.rgx-bc {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: var(--ri-fs-xs); color: var(--ri-text-sub);
  padding: var(--ri-space-3) 0;
}
.rgx-bc a:hover { color: var(--ri-accent); text-decoration: underline; }
.rgx-bc b { color: var(--ri-text); font-weight: 700; }

/* ══ 3. 첫머리 ═══════════════════════════════════════════════════════════ */

.rgx-hero { padding: var(--ri-space-6) 0 var(--ri-space-7); border-bottom: 1px solid var(--ri-line); }
.rgx-hero__k {
  margin: 0 0 var(--ri-space-2); font-size: var(--ri-fs-xs); font-weight: 700;
  letter-spacing: .1em; color: var(--ri-accent); text-transform: uppercase;
}
.rgx-hero h1 { margin: 0 0 var(--ri-space-3); font-size: var(--ri-fs-3xl); font-weight: 700; }
.rgx-hero__l {
  margin: 0; max-width: 46em;
  font-size: var(--ri-fs-lg); line-height: var(--ri-lh-base); color: var(--ri-text);
}
.rgx-hero__l b { font-family: var(--ri-font-num); color: var(--ri-accent); }
.rgx-hero__n {
  margin: var(--ri-space-4) 0 0; max-width: 46em;
  font-size: var(--ri-fs-sm); color: var(--ri-text-sub); line-height: var(--ri-lh-base);
}
.rgx-hero--sm { padding-bottom: var(--ri-space-5); }
.rgx-hero--sm h1 { font-size: var(--ri-fs-2xl); }

.rgx-hero__st {
  display: flex; flex-wrap: wrap; gap: var(--ri-space-6);
  list-style: none; margin: var(--ri-space-5) 0 0; padding: 0;
}
.rgx-hero__st li { display: flex; align-items: baseline; gap: 8px; }
.rgx-hero__st b {
  font-family: var(--ri-font-num); font-size: var(--ri-fs-2xl); font-weight: 700;
  color: var(--ri-accent); font-variant-numeric: tabular-nums;
}
.rgx-hero__st span { font-size: var(--ri-fs-sm); color: var(--ri-text-sub); font-weight: 700; }

/* ══ 4. 장비 착용 투시도 ═══════════════════════════════════════════════════
   사장님 지시(2026-09-06) :
     「관절이나 머리목 부분에 선없이 … 장비를 다 착용한 캐릭터 … 화살표 나오게 …
       마우스 온하면 별도로 팝업이 띄게」
   ───────────────────────────────────────────────────────────────────────── */

.rgx-fig { margin: var(--ri-space-7) 0; container-type: inline-size; container-name: rgxfig; }
.rgx-fig__head { margin-bottom: var(--ri-space-4); }
.rgx-fig__head h2 { margin: 0 0 8px; font-size: var(--ri-fs-xl); font-weight: 700; }
.rgx-fig__head p { margin: 0; max-width: 46em; font-size: var(--ri-fs-sm); color: var(--ri-text-sub); line-height: var(--ri-lh-base); }
.rgx-fig__head p b { color: var(--ri-text); }

.rgx-fig__in {
  display: grid; gap: var(--ri-space-5);
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--ri-line); padding: var(--ri-space-5);
}
@container rgxfig (min-width: 760px) {
  .rgx-fig__in { grid-template-columns: minmax(0, 1fr) minmax(0, 240px); gap: var(--ri-space-6); }
}

.rgx-stage { min-width: 0; position: relative; }
/* 말풍선이 캔버스 밖으로 나갈 수 있어야 «머리 위» 에 뜬다 */
.rgx-fig__in, .rgx-canvas { overflow: visible; }
.rgx-canvas {
  position: relative; aspect-ratio: 1 / 1;
  max-width: 620px; margin: 0 auto;
  background: var(--ri-brand-weak); border: 1px solid var(--ri-line);
}
.rgx-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ── 그림 : 엔바토 러너 캐릭터 ────────────────────────────────────────
   ★옛 그림은 «선» 이었습니다(먹선·흰선 두 벌로 관절을 지우던 방식).
     지금은 면으로 채운 캐릭터라 그 규칙이 다 필요 없어졌습니다.
     대신 짚은 자리에 «테» 를 둘러 어디를 보고 있는지 알립니다.
   ★화폭이 754칸입니다(예전 100칸). 선 굵기를 그만큼 키워야 보입니다. */

/* 그려 얹은 장비 — 시계·이어폰·벨트 */
.k-part { transition: opacity .14s ease; }

/* 짚은 자리를 둘러싸는 테 */
.k-ring {
  fill: none; stroke: var(--ri-accent);
  stroke-width: 0; opacity: 0;
  transition: opacity .14s ease, stroke-width .14s ease;
}
.k-ring.is-on { stroke-width: 7; opacity: 1; }

/* ── 화살표(지시선) ──────────────────────────────────────────────────── */
.k-ld {
  fill: none; stroke: var(--ri-line-strong); stroke-width: 4.5;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .12s ease, stroke-width .12s ease;
}
.k-ld.is-on { stroke: var(--ri-accent); stroke-width: 7.5; }
.k-arw { fill: var(--ri-line-strong); }

/* ── 이름표 ──────────────────────────────────────────────────────────── */
.rgx-call {
  position: absolute; top: var(--ly); transform: translateY(-50%);
  display: block; max-width: 42%;
}
.rgx-call--l, .rgx-tag--l { left: 0; text-align: right; }
.rgx-call--r, .rgx-tag--r { right: 0; text-align: left; }
.rgx-call__n {
  display: inline-block; padding: 4px 8px;
  font-size: var(--ri-fs-xs); font-weight: 700; line-height: 1.25;
  background: var(--ri-surface); border: 1px solid var(--ri-text);
  white-space: nowrap;
}
.rgx-call__n i {
  font-style: normal; font-family: var(--ri-font-num);
  color: var(--ri-accent); margin-left: 4px;
}
.rgx-call:hover .rgx-call__n,
.rgx-call:focus-visible .rgx-call__n {
  background: var(--ri-accent); border-color: var(--ri-accent); color: var(--ri-accent-ink);
}
.rgx-call:hover .rgx-call__n i,
.rgx-call:focus-visible .rgx-call__n i { color: var(--ri-accent-ink); }
.rgx-call.is-soon .rgx-call__n { border-color: var(--ri-line-strong); color: var(--ri-text-sub); }

/* ── 팝업 — 「왜 필요한가」 ───────────────────────────────────────────
   ★그림 «아래» 에 뜬다. 이름표 옆에 띄웠더니 설명하려는 그 부위를 팝업이 덮었다.
     폰에서도 떠다니는 말풍선보다 아래 카드가 낫다(손가락엔 hover 가 없다). */
.rgx-pops {
  margin-top: var(--ri-space-3);
  border: 2px solid var(--ri-text); background: var(--ri-surface);
  min-height: 96px; display: grid;
}
.rgx-pop { display: none; padding: var(--ri-space-4) var(--ri-space-5); }
.rgx-pop--idle { display: block; }
/* ★부위 슬러그를 CSS 에 박지 않는다. 어느 것이 켜졌는지는 JS 가 is-on 으로 알려 준다.
   부위가 늘어도(모자·선글라스를 나눈 것처럼) 여기를 고칠 일이 없다. */
.rgx-stage[data-hover] .rgx-pop--idle { display: none; }
.rgx-pop.is-on { display: block; }

.rgx-pop__k {
  margin: 0 0 4px; font-size: var(--ri-fs-xs); font-weight: 700;
  letter-spacing: normal; color: var(--ri-accent);
}
.rgx-pop__l {
  list-style: none; margin: var(--ri-space-2) 0 0; padding: 0;
  display: grid; gap: 8px; max-width: 54em;
}
.rgx-pop__l li {
  position: relative; padding-left: 16px;
  font-size: var(--ri-fs-sm); color: var(--ri-text-sub); line-height: var(--ri-lh-base);
}
.rgx-pop__l li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; background: var(--ri-accent);
}

.rgx-pop__h {
  display: block; margin-bottom: 8px;
  font-size: var(--ri-fs-lg); font-weight: 700; line-height: var(--ri-lh-tight);
}
.rgx-pop__w {
  display: block; max-width: 52em;
  font-size: var(--ri-fs-sm); color: var(--ri-text-sub); line-height: var(--ri-lh-base);
}
.rgx-pop__t {
  display: block; margin-top: var(--ri-space-3); padding-top: var(--ri-space-2);
  border-top: 1px solid var(--ri-line); max-width: 52em;
  font-size: var(--ri-fs-sm); font-weight: 700;
}
.rgx-pop__t em {
  font-style: normal; font-weight: 700; color: var(--ri-accent);
  letter-spacing: normal; margin-right: 8px;
}
/* 이것은 <a> 다 — .rgx 를 붙여 `.rgx a { color: inherit }` 을 이겨야 남색이 나온다 */
.rgx .rgx-pop__go {
  display: inline-block; margin-top: var(--ri-space-3);
  font-size: var(--ri-fs-sm); font-weight: 700; color: var(--ri-accent);
}
.rgx-pop__go:hover { text-decoration: underline; }

.rgx-note {
  margin: var(--ri-space-4) 0 0;
  font-size: var(--ri-fs-xs); color: var(--ri-text-sub); line-height: var(--ri-lh-base);
}
.rgx-note span { display: block; }

/* ── 오른쪽 : 갈래 바로 가기 ─────────────────────────────────────────── */
.rgx-side { min-width: 0; }
.rgx-side__h { margin-bottom: var(--ri-space-3); padding-bottom: 8px; border-bottom: 2px solid var(--ri-text); }
.rgx-side__h h3 { margin: 0 0 3px; font-size: var(--ri-fs-base); font-weight: 700; }
.rgx-side__h p { margin: 0; font-size: var(--ri-fs-xs); color: var(--ri-text-sub); }
.rgx-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--ri-line); }
.rgx-parts a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--ri-surface);
  font-size: var(--ri-fs-sm); font-weight: 700;
}
.rgx-parts a:hover, .rgx-parts a.is-on { background: var(--ri-brand-weak); }
.rgx-parts__i { font-size: 18px; color: var(--ri-accent); flex: none; }
.rgx-parts__n { min-width: 0; }
.rgx-parts a i {
  margin-left: auto; font-style: normal; font-family: var(--ri-font-num);
  font-size: var(--ri-fs-xs); color: var(--ri-accent);
}

/* 좁은 칸 — 이름표를 그림 밖 아래로 내린다 */
@container rgxfig (max-width: 620px) {
  .rgx-call__n { padding: 4px 8px; }
}

/* ══ 5. 갈래 격자 ════════════════════════════════════════════════════════ */

.rgx-cats { container-type: inline-size; }
.rgx-catg { margin-top: var(--ri-space-6); }
.rgx-catg__h {
  margin: 0 0 var(--ri-space-3); font-size: var(--ri-fs-sm); font-weight: 700;
  letter-spacing: .06em; color: var(--ri-text-sub);
  padding-bottom: 8px; border-bottom: 1px solid var(--ri-line);
}
/* ★«1px 틈 + 뒷색» 수법을 걷었다.
   마지막 줄이 덜 차면 빈 칸이 회색 덩이로 남는다. 진짜 테두리가 낫다. */
.rgx-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ri-space-3); }
@container (min-width: 560px)  { .rgx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 900px)  { .rgx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 1180px) { .rgx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.rgx-cat { background: var(--ri-surface); border: 1px solid var(--ri-line);
           padding: var(--ri-space-4); display: flex; flex-direction: column; }
.rgx-cat__t { display: flex; align-items: center; gap: var(--ri-space-2); }
.rgx-cat__i { font-size: 24px; color: var(--ri-accent); flex: none; }
.rgx-cat__n { font-size: var(--ri-fs-lg); font-weight: 700; }
.rgx-cat__t:hover .rgx-cat__n { text-decoration: underline; }
.rgx-cat__c {
  margin-left: auto; flex: none;
  font-size: var(--ri-fs-xs); font-weight: 700; color: var(--ri-text-sub);
  font-family: var(--ri-font-num);
}
.rgx-cat.is-soon .rgx-cat__i { color: var(--ri-text-sub); }
.rgx-cat__l {
  margin: var(--ri-space-2) 0 var(--ri-space-3);
  font-size: var(--ri-fs-sm); color: var(--ri-text-sub); line-height: var(--ri-lh-base);
}
.rgx-cat__s {
  list-style: none; margin: auto 0 0; padding: var(--ri-space-3) 0 0;
  border-top: 1px solid var(--ri-line);
  display: flex; flex-wrap: wrap; gap: 8px;
}
.rgx-cat__s a {
  display: inline-block; padding: 4px 8px;
  font-size: var(--ri-fs-xs); font-weight: 700;
  background: var(--ri-surface-2); color: var(--ri-text);
}
.rgx-cat__s a:hover { background: var(--ri-accent); color: var(--ri-accent-ink); }
.rgx-cat__s a i {
  font-style: normal; font-family: var(--ri-font-num);
  color: var(--ri-accent); margin-left: 4px;
}
.rgx-cat__s a:hover i { color: var(--ri-accent-ink); }

/* ══ 6. 갈래 머리 · 소갈래 줄 · 기준 ═════════════════════════════════════ */

.rgx-chead { display: flex; gap: var(--ri-space-4); align-items: flex-start; padding: var(--ri-space-5) 0; }
.rgx-chead__i { font-size: 38px; color: var(--ri-accent); flex: none; }
.rgx-chead__b { min-width: 0; }
.rgx-chead__k {
  margin: 0 0 4px; font-size: var(--ri-fs-xs); font-weight: 700;
  letter-spacing: .08em; color: var(--ri-text-sub);
}
.rgx-chead h1 { margin: 0 0 var(--ri-space-2); font-size: var(--ri-fs-3xl); font-weight: 700; }
.rgx-chead__l { margin: 0; max-width: 46em; font-size: var(--ri-fs-lg); line-height: var(--ri-lh-base); }

.rgx-subs { border-block: 1px solid var(--ri-line); padding: var(--ri-space-2) 0; }
.rgx-subs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rgx-subs a {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--ri-space-3);
  font-size: var(--ri-fs-sm); font-weight: 700;
  border: 1px solid var(--ri-line);
}
.rgx-subs a:hover { border-color: var(--ri-text); }
.rgx-subs a.is-on { background: var(--ri-brand); border-color: var(--ri-brand); color: var(--ri-brand-ink); }
.rgx-subs a i {
  font-style: normal; font-family: var(--ri-font-num);
  font-size: var(--ri-fs-xs); color: var(--ri-accent); margin-left: 4px;
}
.rgx-subs a.is-on i { color: var(--ri-brand-ink); }
.rgx-subs--wide { margin-bottom: var(--ri-space-4); }

.rgx-guide {
  margin: var(--ri-space-6) 0; padding: var(--ri-space-5);
  border: 1px solid var(--ri-text); background: var(--ri-brand-weak);
}
.rgx-guide h2 { margin: 0 0 var(--ri-space-3); font-size: var(--ri-fs-lg); font-weight: 700; }
.rgx-guide ol { margin: 0; padding-left: 1.35em; display: grid; gap: 8px; }
.rgx-guide li { font-size: var(--ri-fs-base); line-height: var(--ri-lh-base); }
.rgx-guide li::marker { font-family: var(--ri-font-num); font-weight: 700; color: var(--ri-accent); }
.rgx-guide__n { margin: var(--ri-space-4) 0 0; font-size: var(--ri-fs-xs); color: var(--ri-text-sub); }
.rgx-guide--sm { background: var(--ri-surface); border-color: var(--ri-line); }
.rgx .rgx-guide__go { display: inline-block; margin-top: var(--ri-space-3); font-size: var(--ri-fs-sm); font-weight: 700; color: var(--ri-accent); }
.rgx .rgx-guide__go:hover { text-decoration: underline; }

/* ══ 7. 줄 세우기 막대 ═══════════════════════════════════════════════════ */

.rgx-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ri-space-3);
  padding-bottom: var(--ri-space-3); margin-bottom: var(--ri-space-4);
  border-bottom: 1px solid var(--ri-line);
}
.rgx-bar__n { margin: 0; font-size: var(--ri-fs-sm); color: var(--ri-text-sub); }
.rgx-bar__n b { font-family: var(--ri-font-num); color: var(--ri-text); font-size: var(--ri-fs-base); }
.rgx-bar__f, .rgx-bar__s { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.rgx-bar__s { margin-left: auto; }
.rgx-bar a {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px;
  font-size: var(--ri-fs-xs); font-weight: 700; color: var(--ri-text-sub);
}
.rgx-bar a:hover { color: var(--ri-text); }
.rgx-bar a.is-on { color: var(--ri-accent); box-shadow: none; }

/* ══ 8. 제품 칸 ══════════════════════════════════════════════════════════ */

.rgx-clist { container-type: inline-size; }
.rgx-plist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ri-space-3); }
@container (min-width: 480px)  { .rgx-plist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 780px)  { .rgx-plist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 1060px) { .rgx-plist { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.rgx-p { display: flex; flex-direction: column; height: 100%;
         background: var(--ri-surface); border: 1px solid var(--ri-line); }
.rgx-p:hover { background: var(--ri-brand-weak); }
.rgx-p__ph {
  position: relative; display: block; aspect-ratio: 1 / 1;
  background: var(--ri-brand-weak) center/contain no-repeat;
  border-bottom: 1px solid var(--ri-line);
}
.rgx-p__off {
  position: absolute; left: 0; top: 0;
  font-style: normal; font-family: var(--ri-font-num); font-weight: 700;
  font-size: var(--ri-fs-xs); line-height: 1.05; padding: 4px 8px;
  background: var(--ri-accent); color: var(--ri-accent-ink);
}
.rgx-p__b { display: grid; gap: 4px; padding: var(--ri-space-3); align-content: start; flex: 1 1 auto; }
.rgx-p__br { font-size: var(--ri-fs-xs); font-weight: 700; color: var(--ri-text-sub); }
.rgx-p__nm { font-size: var(--ri-fs-lg); font-weight: 700; line-height: var(--ri-lh-tight); }
.rgx-p__tg { font-size: var(--ri-fs-sm); color: var(--ri-text-sub); line-height: var(--ri-lh-base); }
.rgx-p__pr { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.rgx-p__pr s { font-size: var(--ri-fs-xs); color: var(--ri-text-sub); font-family: var(--ri-font-num); }
.rgx-p__pr b {
  font-family: var(--ri-font-num); font-size: var(--ri-fs-xl); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rgx-p__go {
  margin-top: auto; padding-top: var(--ri-space-2);
  font-size: var(--ri-fs-xs); font-weight: 700; color: var(--ri-accent);
}

/* ══ 9. 브랜드 칸 ════════════════════════════════════════════════════════ */

.rgx-brlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ri-space-3); }
@container (min-width: 480px)  { .rgx-brlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 820px)  { .rgx-brlist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 1100px) { .rgx-brlist--all { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.rgx-br { display: grid; gap: 8px; align-content: start; height: 100%;
          padding: var(--ri-space-4); background: var(--ri-surface); border: 1px solid var(--ri-line); }
.rgx-br:hover { background: var(--ri-brand-weak); }
.rgx-br.is-partner { border-left: 3px solid var(--ri-accent); }
.rgx-br__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.rgx-br__n { font-size: var(--ri-fs-lg); font-weight: 700; }
.rgx-br__e { font-family: var(--ri-font-num); font-size: var(--ri-fs-xs); color: var(--ri-text-sub); letter-spacing: .14em; }
.rgx-br__t { font-size: var(--ri-fs-sm); color: var(--ri-text-sub); line-height: var(--ri-lh-base); }
.rgx-br__m { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rgx-br__m i {
  font-style: normal; font-size: var(--ri-fs-xs); font-weight: 700;
  padding: 3px 8px; background: var(--ri-surface-2); color: var(--ri-text-sub);
}
.rgx-br__cnt { background: var(--ri-accent); color: var(--ri-accent-ink); font-family: var(--ri-font-num); }

/* ══ 10. 비었을 때 · 칩 ══════════════════════════════════════════════════ */

.rgx-empty {
  display: grid; gap: var(--ri-space-3); justify-items: start;
  border: 1px dashed var(--ri-line-strong); padding: var(--ri-space-6);
}
.rgx-empty strong { font-size: var(--ri-fs-lg); }
.rgx-empty p { margin: 0; max-width: 44em; font-size: var(--ri-fs-sm); color: var(--ri-text-sub); line-height: var(--ri-lh-base); }
.rgx-empty--brand { margin-top: var(--ri-space-6); }

.rgx-near { margin-top: var(--ri-space-8); padding-top: var(--ri-space-5); border-top: 1px solid var(--ri-line); }
.rgx-near h2 { margin: 0 0 var(--ri-space-3); font-size: var(--ri-fs-base); font-weight: 700; color: var(--ri-text-sub); }
.rgx-near h2 em { font-style: normal; font-family: var(--ri-font-num); color: var(--ri-accent); }
.rgx-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rgx-chips a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--ri-space-3);
  font-size: var(--ri-fs-sm); font-weight: 700;
  background: var(--ri-surface-2);
}
.rgx-chips a:hover { background: var(--ri-accent); color: var(--ri-accent-ink); }
.rgx-near__n { margin: var(--ri-space-4) 0 0; font-size: var(--ri-fs-sm); font-weight: 700; }
.rgx-near__n a { color: var(--ri-accent); }

/* ══ 11. 브랜드 지면 ═════════════════════════════════════════════════════ */

.rgx-bhead { padding: var(--ri-space-6) 0; border-bottom: 2px solid var(--ri-text); }
.rgx-bhead__k { margin: 0 0 var(--ri-space-2); font-size: var(--ri-fs-xs); font-weight: 700; letter-spacing: .08em; color: var(--ri-text-sub); }
.rgx-bhead__k span { font-weight: 700; }
.rgx-bhead h1 { margin: 0 0 var(--ri-space-2); font-size: var(--ri-fs-3xl); font-weight: 700; }
.rgx-bhead h1 em {
  font-style: normal; font-family: var(--ri-font-num);
  font-size: var(--ri-fs-lg); color: var(--ri-text-sub); margin-left: 8px; letter-spacing: .04em;
}
.rgx-bhead__t { margin: 0; font-size: var(--ri-fs-lg); color: var(--ri-text-sub); }
.rgx-bhead__a { display: flex; flex-wrap: wrap; gap: var(--ri-space-2); margin-top: var(--ri-space-4); }
.rgx-bhead.is-partner { border-left: 4px solid var(--ri-accent); padding-left: var(--ri-space-4); }

/* 회사 소개 — 「정돈된 회사 소개」 로 보이게 판 안에 넣고 안쪽 여백을 넉넉히 준다 */
.rgx-about {
  margin: var(--ri-space-6) 0;
  padding: var(--ri-space-6);
  border: 1px solid var(--ri-line); border-radius: 0;
  background: var(--ri-surface);
}
/* 제목과 회사 로고를 한 줄에 — 회사소개서의 CI 자리 */
.rgx-about__h {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ri-space-4); flex-wrap: wrap;
  margin: 0 0 var(--ri-space-4); padding-bottom: var(--ri-space-3);
  border-bottom: 2px solid var(--ri-line);
}
.rgx-about h2 { margin: 0; font-size: var(--ri-fs-xl); font-weight: 700; }
.rgx-about__ci {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px; min-height: 44px;
  border: 1px solid var(--ri-line); border-radius: 0;
  background: var(--ri-surface);
}
.rgx-about__ci img { display: block; max-height: 30px; max-width: 190px; width: auto; height: auto; }
.rgx-about > p {
  margin: 0 0 var(--ri-space-4); max-width: 46em;
  font-size: var(--ri-fs-base); line-height: 1.6;
}

.rgx-facts { margin: var(--ri-space-5) 0; border: 1px solid var(--ri-line); padding: var(--ri-space-4); }
.rgx-facts h3 { margin: 0 0 var(--ri-space-3); font-size: var(--ri-fs-sm); font-weight: 700; color: var(--ri-text-sub); }
.rgx-facts dl, .rgx-spec dl { display: grid; gap: 1px; margin: 0; background: var(--ri-line); }
.rgx-facts dl > div, .rgx-spec dl > div { display: grid; grid-template-columns: 10.5em minmax(0, 1fr); gap: 1px; background: var(--ri-line); }
.rgx-fi { width: 16px; height: 16px; flex: 0 0 16px; color: var(--ri-accent); }
.rgx-facts dt { display: flex; align-items: center; gap: 8px; }
.rgx-facts dt span { min-width: 0; }
.rgx .rgx-facts dd a { color: var(--ri-accent); text-decoration: none; font-weight: 700; }
.rgx .rgx-facts dd a:hover { text-decoration: underline; }
.rgx-facts dt, .rgx-spec dt {
  margin: 0; padding: 8px var(--ri-space-3);
  background: var(--ri-surface-2); font-size: var(--ri-fs-sm); font-weight: 700;
}
.rgx-facts dd, .rgx-spec dd {
  margin: 0; padding: 8px var(--ri-space-3);
  background: var(--ri-surface); font-size: var(--ri-fs-sm); line-height: var(--ri-lh-base);
}
.rgx-src { margin: var(--ri-space-3) 0 0; font-size: var(--ri-fs-xs); color: var(--ri-text-sub); }

.rgx-take {
  margin: var(--ri-space-5) 0; padding: var(--ri-space-4) var(--ri-space-5);
  border-left: 4px solid var(--ri-accent); background: var(--ri-brand-weak);
}
.rgx-take b { display: block; margin-bottom: 8px; font-size: var(--ri-fs-xs); font-weight: 700; letter-spacing: .06em; color: var(--ri-accent); }
.rgx-take p { margin: 0; max-width: 44em; font-size: var(--ri-fs-base); line-height: var(--ri-lh-base); }

/* ══ 12. 제품 지면 ═══════════════════════════════════════════════════════ */

.rgx-item { container-type: inline-size; }
.rgx-item__top { display: grid; gap: var(--ri-space-5); padding: var(--ri-space-5) 0; }
@container (min-width: 780px) { .rgx-item__top { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--ri-space-7); } }

.rgx-item__ph {
  position: relative; margin: 0; aspect-ratio: 1 / 1;
  background: var(--ri-brand-weak); border: 1px solid var(--ri-line);
  display: grid; place-items: center;
}
.rgx-item__ph img { width: 100%; height: 100%; object-fit: contain; }
.rgx-item__noph { font-size: 96px; color: var(--ri-line-strong); }
.rgx-item__off {
  position: absolute; left: 0; top: 0;
  font-family: var(--ri-font-num); font-weight: 700; font-size: var(--ri-fs-sm);
  padding: 8px 12px; background: var(--ri-accent); color: var(--ri-accent-ink);
}

.rgx-item__buy { min-width: 0; }
.rgx .rgx-item__brand { display: inline-flex; align-items: baseline; gap: 8px; font-size: var(--ri-fs-sm); font-weight: 700; color: var(--ri-text-sub); }
.rgx .rgx-item__brand:hover { color: var(--ri-accent); text-decoration: underline; }
.rgx-item__brand em { font-style: normal; font-family: var(--ri-font-num); font-size: var(--ri-fs-xs); }
.rgx-item__brand i { font-style: normal; }
.rgx-item__buy h1 { margin: var(--ri-space-2) 0 var(--ri-space-2); font-size: var(--ri-fs-3xl); font-weight: 700; }
.rgx-item__buy h1 small { display: block; margin-top: 4px; font-family: var(--ri-font-num); font-size: var(--ri-fs-sm); font-weight: 700; color: var(--ri-text-sub); letter-spacing: .04em; }
.rgx-item__tg { margin: 0 0 var(--ri-space-4); font-size: var(--ri-fs-lg); color: var(--ri-text-sub); line-height: var(--ri-lh-base); }
.rgx-item__pr { display: flex; align-items: baseline; gap: var(--ri-space-2); margin: 0 0 var(--ri-space-4); }
.rgx-item__pr s { font-family: var(--ri-font-num); font-size: var(--ri-fs-base); color: var(--ri-text-sub); }
.rgx-item__pr b { font-family: var(--ri-font-num); font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }

.rgx .rgx-buy {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 56px; padding: var(--ri-space-3) var(--ri-space-5);
  background: var(--ri-accent); color: var(--ri-accent-ink);
  border: 1px solid var(--ri-accent);
  transition: background .15s ease;
}
.rgx .rgx-buy:hover { background: var(--ri-brand); border-color: var(--ri-brand); color: var(--ri-brand-ink); }
.rgx-buy span { font-size: var(--ri-fs-lg); font-weight: 700; }
.rgx-buy em { font-style: normal; font-size: var(--ri-fs-xs); opacity: 1; }
.rgx-buy__again { margin: var(--ri-space-7) 0; }
.rgx-buy__again .rgx-buy { max-width: 30em; margin: 0 auto; }

.rgx-item__note { margin: var(--ri-space-3) 0 0; font-size: var(--ri-fs-xs); color: var(--ri-text-sub); line-height: var(--ri-lh-base); }
.rgx-item__meta { list-style: none; margin: var(--ri-space-4) 0 0; padding: var(--ri-space-3) 0 0; border-top: 1px solid var(--ri-line); display: grid; gap: 8px; }
.rgx-item__meta li { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--ri-fs-sm); }
.rgx-item__meta span { flex: none; width: 5em; font-weight: 700; color: var(--ri-text-sub); }
.rgx-item__meta a { color: var(--ri-accent); font-weight: 700; }
.rgx-item__meta a:hover { text-decoration: underline; }

.rgx-spec, .rgx-good { margin: var(--ri-space-6) 0; }
.rgx-spec h2, .rgx-good h2 { margin: 0 0 var(--ri-space-3); font-size: var(--ri-fs-lg); font-weight: 700; }
.rgx-good ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.rgx-good li { font-size: var(--ri-fs-base); line-height: var(--ri-lh-base); }
.rgx-good li::marker { color: var(--ri-accent); }

/* ══ 13. 바닥 — 제휴 안내 · 밝힘 ════════════════════════════════════════ */

.rgx-foot { margin-top: var(--ri-space-9); border-top: 2px solid var(--ri-text); container-type: inline-size; }
.rgx-foot__in { display: grid; gap: var(--ri-space-6); padding-top: var(--ri-space-6); }
@container (min-width: 760px) { .rgx-foot__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--ri-space-8); } }
.rgx-foot h2 { margin: 0 0 var(--ri-space-3); font-size: var(--ri-fs-xl); font-weight: 700; }
.rgx-foot__a p { margin: 0 0 var(--ri-space-3); font-size: var(--ri-fs-sm); line-height: var(--ri-lh-base); }
.rgx-foot__b h3 { margin: 0 0 var(--ri-space-3); font-size: var(--ri-fs-sm); font-weight: 700; color: var(--ri-text-sub); }
.rgx-foot__b ul { margin: 0; padding-left: 1.15em; display: grid; gap: 8px; }
.rgx-foot__b li { font-size: var(--ri-fs-xs); color: var(--ri-text-sub); line-height: var(--ri-lh-base); }
.rgx-foot__b li b { color: var(--ri-text); }

/* ══ 14. 움직임을 꺼 달라고 한 분 ═══════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .rgx-call, .rgx-pop, .k-ld, .k-part { transition: none; }
}

/* ══ 15. 아주 좁은 «칸» ══════════════════════════════════════════════════
   ★@media 가 아니라 @container 다.
     처음엔 @media (max-width:600px) 로 뒀는데, 창은 넓고 «칸» 만 좁은 경우
     (좌측 메뉴가 붙은 지면 · 사이드바 안) 규칙이 안 걸려 머리띠가 깨졌다.
     좁은 것은 화면이 아니라 칸이다.                                        */

@container rgx (max-width: 640px) {
  .rgx-nav__in { flex-wrap: wrap; row-gap: var(--ri-space-2); }
  .rgx-nav__home { order: 1; }
  .rgx-mega { order: 2; }
  .rgx-nav__q { order: 3; margin-left: auto; }
  .rgx-search { order: 4; flex-basis: 100%; }
  .rgx-mega__grid { grid-template-columns: 1fr; }
  .rgx-mega__p { width: min(92vw, 520px); }
  .rgx-chead__i { font-size: 30px; }
  .rgx-hero__st { gap: var(--ri-space-4); }
  .rgx-sl__t { padding: var(--ri-space-5) var(--ri-space-5) var(--ri-space-5) 48px; }
  .rgx-sl__s h2 { font-size: var(--ri-fs-xl); }
  .rgx-item__buy h1 { font-size: var(--ri-fs-2xl); }
  .rgx-facts dl > div, .rgx-spec dl > div { grid-template-columns: 8.5em minmax(0, 1fr); }
}

/* ══ 16. 좌측 붙박이 카테고리 · 메인 슬라이더 ═══════════════════════════════
   사장님 지시(2026-09-06) :
     「길게 메뉴명들을 나열하면 고객 입장에서는 계속 내려야 하잖아.
       쿠팡처럼 좌측에 메뉴 고정해서 박고, 메인 슬라이더 만들고」
   ─────────────────────────────────────────────────────────────────────────── */

/* .rgx 를 «칸 기준점» 으로 삼는다. 아래 @container rgx 가 이것을 잰다.
   화면이 아니라 «칸» 을 재야 사이드바 안에서도 제대로 접힌다. */
.rgx { container-type: inline-size; container-name: rgx; }

.rgx-shell { display: grid; gap: var(--ri-space-5); grid-template-columns: minmax(0, 1fr); }
/* ★사장님 2026-09-06 : 「너무 좌측에 딱 붙어 있잖아. 여백이 좀 있어야 정돈된 것 같지」
   재 보니 본문 칸의 좌우 여백이 «0» 이라 열여섯 덩어리가 모두 칸 끝에 붙어 있었습니다.
   덩어리마다 손보지 않고 «칸» 에 숨을 줍니다. 좁은 화면에서는 숨을 줄입니다. */
.rgx-body  { min-width: 0; padding: 0 var(--ri-space-4); }
@container rgx (min-width: 720px) { .rgx-body { padding: 0 var(--ri-space-6); } }

@container rgx (min-width: 900px) {
  .rgx-shell { grid-template-columns: 236px minmax(0, 1fr); gap: var(--ri-space-6); }
  /* ★붙박이는 CSS 가 한다. 테마 머리글이 105px 붙박이라 그 아래에 세운다. */
  .rgx-rail { position: sticky; top: 117px; align-self: start; z-index: 20; }
}

.rgx-rail__in { border: 1px solid var(--ri-line); background: var(--ri-surface); }
.rgx-rail__h {
  display: flex; align-items: baseline; gap: 8px; margin: 0;
  padding: var(--ri-space-3) var(--ri-space-4);
  font-size: var(--ri-fs-base); font-weight: 700;
  background: var(--ri-brand); color: var(--ri-brand-ink);
}
.rgx-rail__h a { color: inherit; }
.rgx-rail__h span {
  margin-left: auto; font-family: var(--ri-font-num);
  font-size: var(--ri-fs-xs); font-weight: 700; opacity: 1;
}

.rgx-rail__l { list-style: none; margin: 0; padding: 0; }
.rgx-rail__i { position: relative; border-bottom: 1px solid var(--ri-line); }
.rgx-rail__i:last-child { border-bottom: 0; }
.rgx-rail__a {
  display: flex; align-items: center; gap: var(--ri-space-2);
  min-height: 42px; padding: 0 var(--ri-space-3);
  font-size: var(--ri-fs-sm); font-weight: 700;
}
.rgx-rail__ic { font-size: 20px; color: var(--ri-accent); flex: none; }
.rgx-rail__nm { min-width: 0; }
.rgx-rail__n {
  margin-left: auto; font-family: var(--ri-font-num);
  font-size: var(--ri-fs-xs); font-weight: 700; color: var(--ri-accent);
}
.rgx-rail__ar { flex: none; color: var(--ri-text-sub); font-size: 16px; }
.rgx-rail__i:hover > .rgx-rail__a,
.rgx-rail__i:focus-within > .rgx-rail__a,
.rgx-rail__i.is-cur > .rgx-rail__a { background: var(--ri-brand-weak); }
.rgx-rail__i.is-cur > .rgx-rail__a { box-shadow: none; }

/* 얹으면 소분류가 «옆으로» 펼쳐진다 — 지면이 길어지지 않는다 */
.rgx-fly {
  position: absolute; left: 100%; top: -1px; z-index: 30;
  width: 320px; padding: var(--ri-space-4);
  background: var(--ri-surface); border: 1px solid var(--ri-text);
  opacity: 0; visibility: hidden; transform: translateX(-6px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
}
.rgx-rail__i:hover > .rgx-fly,
.rgx-rail__i:focus-within > .rgx-fly { opacity: 1; visibility: visible; transform: none; }
.rgx-fly__h {
  display: flex; align-items: baseline; gap: var(--ri-space-3);
  padding-bottom: 8px; margin-bottom: var(--ri-space-3);
  border-bottom: 2px solid var(--ri-text);
}
.rgx-fly__h b { font-size: var(--ri-fs-lg); font-weight: 700; }
.rgx-fly__h a { margin-left: auto; font-size: var(--ri-fs-xs); font-weight: 700; color: var(--ri-accent); }
.rgx-fly__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rgx-fly__l a { display: grid; gap: 1px; padding: 8px 8px; }
.rgx-fly__l a:hover { background: var(--ri-brand-weak); }
.rgx-fly__l b { font-size: var(--ri-fs-sm); font-weight: 700; }
.rgx-fly__l b i {
  font-style: normal; font-family: var(--ri-font-num);
  font-size: var(--ri-fs-xs); color: var(--ri-accent); margin-left: 4px;
}
.rgx-fly__l em { font-style: normal; font-size: var(--ri-fs-xs); color: var(--ri-text-sub); }
.rgx-fly__f {
  margin: var(--ri-space-3) 0 0; padding-top: var(--ri-space-2);
  border-top: 1px solid var(--ri-line);
  font-size: var(--ri-fs-xs); color: var(--ri-text-sub);
}
.rgx-fly__f b { font-family: var(--ri-font-num); color: var(--ri-accent); }

.rgx-rail__q { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ri-text); }
.rgx-rail__q li { border-bottom: 1px solid var(--ri-line); }
.rgx-rail__q li:last-child { border-bottom: 0; }
.rgx-rail__q a {
  display: flex; align-items: center; min-height: 40px; padding: 0 var(--ri-space-3);
  font-size: var(--ri-fs-sm); font-weight: 700;
}
.rgx-rail__q a span {
  margin-left: auto; font-family: var(--ri-font-num);
  font-size: var(--ri-fs-xs); color: var(--ri-accent);
}
.rgx-rail__q a:hover { background: var(--ri-brand-weak); }
.rgx-rail__q a[aria-current] { background: var(--ri-brand-weak); box-shadow: none; }

/* 좁은 칸 — 왼쪽 기둥이 «가로로 미는 줄» 이 된다. 여전히 안 내려도 된다. */
@container rgx (max-width: 899px) {
  .rgx-rail__in { border: 0; }
  .rgx-rail__h { background: transparent; color: var(--ri-text); padding: 0 0 var(--ri-space-2); }
  .rgx-rail__h span { color: var(--ri-text-sub); }
  .rgx-rail__l {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: var(--ri-space-2);
    scrollbar-width: thin;
  }
  .rgx-rail__i { border: 1px solid var(--ri-line); flex: none; }
  .rgx-rail__a { min-height: 38px; white-space: nowrap; }
  .rgx-rail__ar, .rgx-fly { display: none; }
  .rgx-rail__q { display: flex; gap: 8px; border-top: 0; margin-top: var(--ri-space-2); flex-wrap: wrap; }
  .rgx-rail__q li { border: 1px solid var(--ri-line); }
  .rgx-rail__q a { min-height: 36px; }
}

/* ── 메인 슬라이더 — 국내 쇼핑몰 배너 얼개 ────────────────────────────────
   사장님 2026-09-06 : 「쇼핑몰처럼 디자인을. 현재는 너무 디자인이 없는 것 같어」
   ★고친 자리 넷
     ① 로고만 큰 흰 상자에 놓여 «상자 두 개» 로 보이던 것 → 사진이 판을 꽉 채운다
     ② 혜택(할인·무료배송)을 칩 줄로 세운다 — 살 까닭이 배너에 보여야 한다
     ③ 값은 「5,000원부터」 로 적는다
     ④ 모서리를 둥글리고 그늘을 넣어 지면 위에 «얹힌» 느낌을 준다 */
.rgx-sl { position: relative; margin: var(--ri-space-4) 0 var(--ri-space-7); }

.rgx-sl__win {
  position: relative; overflow: hidden;
  border-radius: 0; box-shadow: none;
}

/* ★스크롤 통이 아니라 «transform 으로 미는» 방식이다.
   scroll-snap: mandatory 가 프로그램이 옮긴 자리를 되돌려 놓아 배너가 안 넘어갔다. */
.rgx-sl__track {
  display: flex; width: 100%; margin: 0; padding: 0; list-style: none;
  transform: translate3d(calc(var(--rgx-i, 0) * -100%), 0, 0);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
@media (prefers-reduced-motion: reduce) { .rgx-sl__track { transition: none; } }

.rgx-sl__s { flex: 0 0 100%; min-width: 0; }

.rgx-sl__a {
  display: grid; grid-template-columns: 1fr; min-height: 260px;
  text-decoration: none; color: var(--ri-text); background: var(--ri-surface);
}
.rgx-sl__a--grey { background: var(--ri-surface-2); }

/* 짙은 판 — 밋밋한 한 색이 아니라 «기울기» 로. 쇼핑몰 배너가 이렇게 한다.
   ★.rgx 를 앞에 붙여 (0,2,0) 으로 올린다 — .rgx a{color:inherit} 이 (0,1,1) 이라 더 세다. */
.rgx .rgx-sl__a--dark {
  background: var(--ri-brand);
  color: var(--ri-accent-ink);
}
.rgx-sl__a--dark .rgx-sl__k { color: var(--ri-accent-ink); }
.rgx-sl__a--dark .rgx-sl__k em { background: var(--ri-accent-ink); color: var(--ri-accent); }
.rgx-sl__a--dark .rgx-sl__l { color: var(--ri-accent-ink); }
.rgx-sl__a--dark .rgx-sl__sub { color: var(--ri-accent-ink); opacity: 1; }
.rgx-sl__a--dark .rgx-sl__p b { color: var(--ri-accent-ink); }
.rgx-sl__a--dark .rgx-sl__p u { color: var(--ri-accent-ink); opacity: 1; }
.rgx-sl__a--dark .rgx-sl__chips i {
  background: transparent; border-color: var(--ri-accent-ink); color: var(--ri-accent-ink);
}
.rgx-sl__a--dark .rgx-sl__cta { background: var(--ri-accent-ink); color: var(--ri-accent); border: 1px solid var(--ri-line); }
.rgx-sl__a--dark:hover .rgx-sl__cta { background: var(--ri-brand); color: var(--ri-brand-ink); }

@container rgx (min-width: 640px) {
  .rgx-sl__a { grid-template-columns: 1fr 1fr; min-height: 300px; }
}
@container rgx (min-width: 980px) {
  .rgx-sl__a { grid-template-columns: 1.06fr .94fr; min-height: 340px; }
}

/* ── 글 칸 ── */
.rgx-sl__t {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: var(--ri-space-6) var(--ri-space-6) var(--ri-space-6) var(--ri-space-7);
  justify-content: center; min-width: 0;
}
.rgx-sl__lg { height: 30px; width: auto; margin-bottom: 2px; }
.rgx-sl__k {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--ri-fs-xs); font-weight: 700; letter-spacing: normal; color: var(--ri-text-sub);
}
.rgx-sl__k em {
  font-style: normal; padding: 2px 8px; border-radius: 0;
  background: var(--ri-accent); color: var(--ri-accent-ink); font-size: var(--ri-fs-xs);
}
/* 🚨2026-09-24 «라이브에서 글자가 사라졌던 자리».
   다른 분이 넣으신 되돌리기 규칙 `#ri-main em:not([class]) { color: inherit }` 이
   아이디(1,1,1) 라 내 (0,3,1) 을 이긴다. 그래서 「제휴」가 «흰 바탕에 흰 글자» 가 됐다.
   !important 로 우기지 않고 같은 아이디를 붙여 (1,2,1)·(1,3,1) 로 이긴다.
   ★뿌리 고침은 그 되돌리기 규칙을 본문 안으로 좁히는 것이다 — 소통판에 적어 두었다. */
#ri-main .rgx-sl__k em { color: var(--ri-accent-ink); }
#ri-main .rgx-sl__a--dark .rgx-sl__k em { color: var(--ri-accent); }
.rgx-sl__h {
  margin: 0; font-size: var(--ri-fs-3xl); line-height: 1.05; font-weight: 700;
  letter-spacing: normal; text-wrap: balance;
}
.rgx-sl__l { max-width: 30em; font-size: var(--ri-fs-base); line-height: 1.6; color: var(--ri-text); }
.rgx-sl__sub { max-width: 30em; font-size: var(--ri-fs-sm); color: var(--ri-text-sub); line-height: 1.6; }

/* 혜택 칩 — 살 까닭 */
.rgx-sl__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rgx-sl__chips i {
  font-style: normal; padding: 3px 12px;
  border: 1px solid var(--ri-line); border-radius: 0;
  background: var(--ri-surface); font-size: var(--ri-fs-xs); font-weight: 700; color: var(--ri-text);
}

.rgx-sl__p { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.rgx-sl__p s { font-family: var(--ri-font-num); font-size: var(--ri-fs-sm); color: var(--ri-text-sub); }
.rgx-sl__p b {
  font-family: var(--ri-font-num); font-size: var(--ri-fs-2xl); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: normal;
}
.rgx-sl__p u { text-decoration: none; font-size: var(--ri-fs-sm); color: var(--ri-text-sub); }

.rgx-sl__cta {
  margin-top: 8px; padding: 12px 24px; border-radius: 0;
  background: var(--ri-accent); color: var(--ri-accent-ink);
  font-size: var(--ri-fs-sm); font-weight: 700; white-space: nowrap;
}
.rgx-sl__a:hover .rgx-sl__cta { background: var(--ri-brand); color: var(--ri-brand-ink); }

/* ── 그림 칸 — 사진이 판을 «꽉» 채운다 ── */
.rgx-sl__v { position: relative; overflow: hidden; min-height: 170px; background: var(--ri-surface); }
.rgx-sl__v img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.rgx-sl__ic {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 110px; color: var(--ri-line-strong);
}
/* ── 좌우 화살표 — 동그랗게, 그늘을 넣어 배너 위에 뜨게 ── */
.rgx-sl__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 0; cursor: pointer;
  background: var(--ri-surface); color: var(--ri-text);
  box-shadow: none;
  opacity: .55; transition: opacity .15s ease, background .15s ease;
}
.rgx-sl__nav svg { width: 20px; height: 20px; }
.rgx-sl__nav--prev { left: 12px; }
.rgx-sl__nav--next { right: 12px; }
.rgx-sl__win:hover .rgx-sl__nav { opacity: 1; }
.rgx-sl__nav:hover { background: var(--ri-accent); color: var(--ri-accent-ink); }
.rgx-sl__nav:focus-visible { opacity: 1; }

/* ── 몇 번째인지 ── */
.rgx-sl__count {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; border-radius: 0;
  background: var(--ri-text); color: var(--ri-surface);
  font-family: var(--ri-font-num); font-size: var(--ri-fs-xs); font-variant-numeric: tabular-nums;
}
.rgx-sl__count b { font-weight: 700; }
.rgx-sl__count span { opacity: 1; }
.rgx-sl__pause {
  border: 0; background: none; color: inherit; cursor: pointer;
  font-size: var(--ri-fs-xs); line-height: 1.05; padding: 0 0 0 2px;
}

/* ── 남은 시간 막대 ── */
.rgx-sl__bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: 3px; background: var(--ri-line);
}
.rgx-sl__bar i {
  display: block; height: 100%; width: 0; background: var(--ri-accent);
  transition: width .2s linear;
}

/* ── 아래 번호 ── */
.rgx-sl__dots {
  display: flex; justify-content: center; gap: 8px;
  margin: var(--ri-space-3) 0 0; padding: 0; list-style: none;
}
.rgx-sl__dots a {
  display: block; width: 22px; height: 4px; border-radius: 0;
  background: var(--ri-line); transition: background .15s ease, width .15s ease;
}
.rgx-sl__dots a:hover { background: var(--ri-line-strong); }
.rgx-sl__dots .is-on a { width: 34px; background: var(--ri-accent); }

/* ══ 17. 브랜드 지면 보강 — 로고 · 내건 말 · 구매 단추 ═══════════════════
   사장님 지시(2026-09-06) :
     「회사소개와 제품 소개를 페이지에 나오게 하고 회사로고도 사용해.
       현재 국가대표들이 사용하는 양말이라고 광고하는게 그 내용 그대로 나오게.
       원하는 사람은 제품구매 하기 버튼 클릭하기 해당 쇼핑몰로 가게」
   ───────────────────────────────────────────────────────────────────────── */

.rgx-bhead__logo { margin: 0 0 var(--ri-space-4); }
.rgx-bhead__logo img {
  display: block; max-width: 200px; max-height: 56px; width: auto; height: auto;
}

/* 「회사가 내건 말」 — 남의 회사 문구를 그대로 옮기는 자리다.
   그래서 «우리 말이 아니다» 라는 것이 눈에 보여야 한다. 따옴표와 출처를 붙인다. */
.rgx-claim {
  margin: var(--ri-space-5) 0;
  border: 1px solid var(--ri-line); border-left: 4px solid var(--ri-accent);
  padding: var(--ri-space-4) var(--ri-space-5);
}
.rgx-claim h3 { margin: 0 0 8px; font-size: var(--ri-fs-sm); font-weight: 700; color: var(--ri-accent); }
.rgx-claim__n { margin: 0 0 var(--ri-space-3); font-size: var(--ri-fs-xs); color: var(--ri-text-sub); line-height: var(--ri-lh-base); }
.rgx-claim__n b { color: var(--ri-text); }
.rgx-claim blockquote { margin: 0 0 var(--ri-space-3); }
.rgx-claim blockquote:last-child { margin-bottom: 0; }
.rgx-claim blockquote p {
  margin: 0; max-width: 44em;
  font-size: var(--ri-fs-lg); font-weight: 700; line-height: var(--ri-lh-base);
}
.rgx-claim cite { display: block; margin-top: 4px; font-style: normal; font-size: var(--ri-fs-xs); }
.rgx-claim cite a { color: var(--ri-text-sub); }
.rgx-claim cite a:hover { color: var(--ri-accent); text-decoration: underline; }

/* 구매 단추 줄 */
.rgx-buyrow {
  margin-top: var(--ri-space-6); padding: var(--ri-space-5);
  border: 2px solid var(--ri-text); background: var(--ri-brand-weak);
}
.rgx-buyrow__t { margin: 0 0 var(--ri-space-3); font-size: var(--ri-fs-base); }
.rgx-buyrow__t b { font-weight: 700; }
.rgx-buyrow__l { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ri-space-2); }
.rgx-buyrow__n { margin: var(--ri-space-3) 0 0; font-size: var(--ri-fs-xs); color: var(--ri-text-sub); line-height: var(--ri-lh-base); }

/* ── 다음 장까지 남은 시간 — 국내 쇼핑몰 배너에서 흔한 장치 ── */
.rgx-sl__bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  height: 3px; background: var(--ri-line);
}
.rgx-sl__bar i {
  display: block; height: 100%; width: 0;
  background: var(--ri-accent);
}
.rgx-sl.is-running .rgx-sl__bar i { animation: rgxbar 5s linear infinite; }
@keyframes rgxbar { from { width: 0 } to { width: 100% } }
@media (prefers-reduced-motion: reduce) {
  .rgx-sl.is-running .rgx-sl__bar i { animation: none; width: 0; }
}

.rgx-good h2 em {
  font-style: normal; font-size: var(--ri-fs-xs); font-weight: 700;
  color: var(--ri-text-sub); margin-left: 8px;
}

/* ── 갈래 지면의 「왜 필요한가」 ─────────────────────────────────────────
   그림의 부위 점은 아홉 곳뿐이라 영양·회복·야간안전·트레일은 닿지 않았다.
   갈래 지면에 올려 열세 갈래가 모두 제 글을 갖게 한다. */
.rgx-whybox {
  margin: var(--ri-space-6) 0;
  border-left: 4px solid var(--ri-accent);
  padding: var(--ri-space-4) var(--ri-space-5);
  background: var(--ri-surface);
  border-top: 1px solid var(--ri-line);
  border-right: 1px solid var(--ri-line);
  border-bottom: 1px solid var(--ri-line);
}
.rgx-whybox__k {
  margin: 0 0 4px; font-size: var(--ri-fs-xs); font-weight: 700;
  letter-spacing: .08em; color: var(--ri-accent);
}
.rgx-whybox h2 { margin: 0 0 var(--ri-space-3); font-size: var(--ri-fs-xl); font-weight: 700; }
.rgx-whybox__w { margin: 0; max-width: 52em; font-size: var(--ri-fs-base); line-height: var(--ri-lh-base); }
.rgx-whybox__t {
  margin: var(--ri-space-3) 0 0; padding-top: var(--ri-space-2);
  border-top: 1px solid var(--ri-line); max-width: 52em;
  font-size: var(--ri-fs-sm); font-weight: 700;
}
.rgx-whybox__t em {
  font-style: normal; font-weight: 700; color: var(--ri-accent);
  letter-spacing: .04em; margin-right: 8px;
}
.rgx-whybox__n { margin: var(--ri-space-3) 0 0; font-size: var(--ri-fs-xs); color: var(--ri-text-sub); line-height: var(--ri-lh-base); }

/* ── 보이지 않는 손잡이 ────────────────────────────────────────────────
   장비를 «선» 으로만 그려 두면 획이 가늘어 마우스가 좀처럼 안 걸린다.
   장비마다 넓은 판을 덮어 둔다. 눈에는 안 보이지만 손은 걸린다. */
.k-hit rect { fill: transparent; }
.k-hit { cursor: pointer; }
.k-hit:focus { outline: none; }
.k-hit:focus-visible rect {
  fill: var(--ri-accent); fill-opacity: .12;
  stroke: var(--ri-accent); stroke-width: 6;
}

/* ── 말풍선 ──────────────────────────────────────────────────────────────
   사장님 : 「밑으로 내용이 나와. 머리 위에 말풍선처럼 나오게」
   자리는 gear.js 가 잡는다 — 장비 바로 위, 위가 좁으면 아래로 뒤집는다. */
.rgx-bub {
  position: absolute; z-index: 60;
  width: min(340px, 86vw);
  padding: var(--ri-space-4) var(--ri-space-5);
  background: var(--ri-surface);
  /* 사장님 2026-09-06 : 「선 테두리가 너무 두꺼워. 선도 얕게, 선색도 연한 검정으로」 */
  border: 1px solid var(--ri-text-sub);
  box-shadow: none;
  transform: translate(-50%, -100%);
  pointer-events: none;
}
.rgx-bub.is-below { transform: translate(-50%, 0); }
/* 안의 브랜드 칩을 누를 수 있어야 한다 — 「브랜드를 병행해 제안」 */
.rgx-bub, .rgx-bub a { pointer-events: auto; }
.rgx-bub__tail {
  position: absolute; bottom: -8px; width: 15px; height: 15px;
  background: var(--ri-surface);
  border-right: 1px solid var(--ri-text-sub);
  border-bottom: 1px solid var(--ri-text-sub);
  transform: translateX(-50%) rotate(45deg);
}
.rgx-bub.is-below .rgx-bub__tail {
  bottom: auto; top: -8px;
  border: 0; border-left: 1px solid var(--ri-text-sub); border-top: 1px solid var(--ri-text-sub);
}
.rgx-bub .rgx-pop__k { margin-bottom: 3px; }
.rgx-bub .rgx-pop__h { font-size: var(--ri-fs-base); }
.rgx-bub .rgx-pop__l { gap: 8px; }
.rgx-bub .rgx-pop__l li { font-size: var(--ri-fs-xs); }
.rgx-bub .rgx-pop__t { font-size: var(--ri-fs-xs); }
.rgx-bub .rgx-pop__go { font-size: var(--ri-fs-xs); }

/* 자바스크립트가 살아 있으면 아래 카드는 숨긴다 — 말풍선이 그 일을 한다 */
.rgx-js .rgx-pops { display: none; }

/* 말풍선 안의 브랜드 제안 */
.rgx-pop__br {
  display: block; margin-top: var(--ri-space-3); padding-top: var(--ri-space-2);
  border-top: 1px solid var(--ri-line);
}
.rgx-pop__br em {
  display: block; margin-bottom: 4px; font-style: normal;
  font-size: var(--ri-fs-xs); font-weight: 700; letter-spacing: normal; color: var(--ri-accent);
}
.rgx-pop__brl { display: flex; flex-wrap: wrap; gap: 4px; }
.rgx .rgx-pop__brl a {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; font-size: var(--ri-fs-xs); font-weight: 700;
  background: var(--ri-surface-2); color: var(--ri-text);
}
.rgx .rgx-pop__brl a:hover { background: var(--ri-accent); color: var(--ri-accent-ink); }
.rgx .rgx-pop__brl a.is-partner { background: var(--ri-brand-weak); box-shadow: none; }
.rgx-pop__brl a i {
  font-style: normal; font-size: 11px; font-weight: 700; line-height: 1.05;
  padding: 2px 4px; border-radius: 0;
  background: var(--ri-accent); color: var(--ri-accent-ink);
}
.rgx .rgx-pop__brl a.more { background: transparent; color: var(--ri-text-sub); text-decoration: underline; }

/* ── 17-b. 갈래 지면의 「이 장비가 하는 일」 ─────────────────────────
   말풍선이 첫 토막만 보여 주는 대신, 여기서 근거까지 다 편다. */
.rgx-fact { margin: 0 0 var(--ri-space-7); }
.rgx-fact__b {
  padding: var(--ri-space-5) 0;
  border-top: 1px solid var(--ri-line);
}
.rgx-fact__b:first-of-type { border-top: 0; padding-top: var(--ri-space-3); }
.rgx-fact__k {
  margin: 0 0 2px; font-size: var(--ri-fs-xs); font-weight: 700;
  letter-spacing: .02em; color: var(--ri-accent);
}
.rgx-fact__b h3 {
  margin: 0 0 var(--ri-space-3); font-size: var(--ri-fs-lg); line-height: 1.4;
  font-weight: 700; color: var(--ri-text); text-wrap: balance;
}
.rgx-fact__l { margin: 0; padding: 0 0 0 1.05em; display: grid; gap: var(--ri-space-2); }
.rgx-fact__l li { font-size: var(--ri-fs-sm); line-height: 1.6; color: var(--ri-text-sub); }
.rgx-fact__l li::marker { color: var(--ri-line); }
.rgx-fact__t {
  margin: var(--ri-space-3) 0 0; padding: var(--ri-space-3) var(--ri-space-4);
  background: var(--ri-brand-weak); border-radius: 0;
  font-size: var(--ri-fs-sm); line-height: 1.6; color: var(--ri-text);
}
.rgx-fact__t em {
  display: block; font-style: normal; font-size: var(--ri-fs-xs); font-weight: 700;
  letter-spacing: .04em; color: var(--ri-accent); margin-bottom: 2px;
}
.rgx-fact__e { margin: var(--ri-space-3) 0 0; font-size: var(--ri-fs-xs); color: var(--ri-text-sub); }
.rgx-fact__e em {
  font-style: normal; font-weight: 700; color: var(--ri-text-sub); margin-right: 8px;
}
.rgx .rgx-fact__e a {
  display: inline-block; margin: 0 4px 4px 0; padding: 2px 8px;
  border: 1px solid var(--ri-line); border-radius: 0;
  color: var(--ri-text-sub); text-decoration: none;
}
.rgx .rgx-fact__e a:hover { border-color: var(--ri-accent); color: var(--ri-accent); }

/* 말풍선 안에서는 둘째 토막부터 접는다 */
/* 말풍선은 «한 줄» 만. 본문 세 토막과 고를 때는 갈래 지면에 그대로 있다.
   셋을 다 넣으면 말풍선이 372px 이 되어 캐릭터를 통째로 덮는다. */
.rgx-bub .rgx-pop__l,
.rgx-bub .rgx-pop__t { display: none; }
.rgx-pops .rgx-pop__lead { display: none; }
.rgx-pop__lead {
  display: block; margin: var(--ri-space-2) 0 0;
  font-size: var(--ri-fs-sm); line-height: 1.6; color: var(--ri-text-sub);
}
.rgx-pop__x2 {
  display: block; margin-top: var(--ri-space-2);
  font-size: var(--ri-fs-xs); color: var(--ri-text-sub);
}
.rgx-pop__x2 em { font-style: normal; font-weight: 700; color: var(--ri-text-sub); }
.rgx-pops .rgx-pop__x2 { display: none; }

/* ── 18. 러닝 장비 백과사전 ────────────────────────────────────────
   사장님 : 「신발 없이 런닝 할 수 없잖아. 그런 내용이 왜 없어」
   그래서 「없이 달리면 어떻게 되나」 가 이 지면에서 가장 큰 덩어리다. */
.rgx-ency { margin: 0 0 var(--ri-space-7); container-type: inline-size; }
.rgx-ency__def {
  margin: 0 0 var(--ri-space-5);
  font-size: var(--ri-fs-lg); line-height: 1.6; font-weight: 700;
  color: var(--ri-text); text-wrap: pretty;
}

/* ★심장 — 「이것 없이 달리면 어떻게 되나」 */
.rgx-ency__no {
  margin: 0 0 var(--ri-space-6);
  padding: var(--ri-space-5) var(--ri-space-5) var(--ri-space-5) var(--ri-space-6);
  background: var(--ri-brand-weak);
  border-left: 4px solid var(--ri-accent);
  border-radius: 0;
}
.rgx-ency__nq {
  margin: 0 0 var(--ri-space-3);
  font-size: var(--ri-fs-xl); line-height: 1.4; font-weight: 700;
  color: var(--ri-accent); text-wrap: balance;
}
.rgx-ency__na {
  margin: 0; font-size: var(--ri-fs-base); line-height: 1.6; color: var(--ri-text);
}

.rgx-ency__blk { margin: 0 0 var(--ri-space-5); }
.rgx-ency__blk h3 {
  margin: 0 0 var(--ri-space-3); padding-bottom: var(--ri-space-2);
  border-bottom: 1px solid var(--ri-line);
  font-size: var(--ri-fs-sm); font-weight: 700; letter-spacing: .04em;
  color: var(--ri-accent);
}
.rgx-ency__blk > p {
  margin: 0; font-size: var(--ri-fs-base); line-height: 1.6; color: var(--ri-text-sub);
}

/* 숫자로 보면 */
/* ★칸을 1px 틈 + 배경으로 나누면 «빈 칸» 에 배경색이 그대로 비친다.
   숫자가 다섯이고 줄이 셋이면 여섯째 자리가 회색 상자로 남는다. 진짜 테두리로 긋는다. */
.rgx-ency__nums { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--ri-space-3); }
.rgx-ency__nums li {
  padding: var(--ri-space-4);
  border: 1px solid var(--ri-line); border-radius: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.rgx-ency__nums b {
  font-family: var(--ri-font-num); font-size: var(--ri-fs-xl); font-weight: 700;
  line-height: 1.25; color: var(--ri-accent); font-variant-numeric: tabular-nums;
}
.rgx-ency__nums em {
  font-style: normal; font-size: var(--ri-fs-sm); font-weight: 700; color: var(--ri-text);
}
.rgx-ency__nums span { font-size: var(--ri-fs-xs); line-height: 1.6; color: var(--ri-text-sub); }
@container (min-width: 520px) { .rgx-ency__nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 820px) { .rgx-ency__nums { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 어떤 것들이 있나 */
.rgx-ency__kinds { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--ri-space-3); }
.rgx-ency__kinds li {
  padding: var(--ri-space-4); border: 1px solid var(--ri-line); border-radius: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.rgx-ency__kinds b { font-size: var(--ri-fs-base); font-weight: 700; color: var(--ri-text); }
.rgx-ency__kinds span { font-size: var(--ri-fs-sm); line-height: 1.6; color: var(--ri-text-sub); }
@container (min-width: 560px) { .rgx-ency__kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 900px) { .rgx-ency__kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 흔한 오해 */
.rgx-ency__myth { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--ri-space-4); }
.rgx-ency__myth li { border: 1px solid var(--ri-line); border-radius: 0; overflow: hidden; }
.rgx-ency__mc, .rgx-ency__mt { margin: 0; padding: var(--ri-space-3) var(--ri-space-4);
  font-size: var(--ri-fs-sm); line-height: 1.6; }
.rgx-ency__mc { background: var(--ri-surface-2); color: var(--ri-text-sub); }
.rgx-ency__mt { color: var(--ri-text); border-top: 1px solid var(--ri-line); }
.rgx-ency__mc em, .rgx-ency__mt em {
  display: block; font-style: normal; font-size: var(--ri-fs-xs); font-weight: 700;
  letter-spacing: .04em; margin-bottom: 3px;
}
.rgx-ency__mc em { color: var(--ri-text-sub); }
.rgx-ency__mt em { color: var(--ri-accent); }

/* ── 19. /gear/guide/ 백과사전 목차 ─────────────────────────────── */
.rgx-gd { container-type: inline-size; }
.rgx-gd__l { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--ri-space-4); }
.rgx-gd__i {
  padding: var(--ri-space-5);
  border: 1px solid var(--ri-line); border-radius: 0;
  display: flex; flex-direction: column; gap: var(--ri-space-2);
}
.rgx-gd__k {
  margin: 0; display: flex; align-items: center; gap: 8px;
  font-size: var(--ri-fs-xs); font-weight: 700; letter-spacing: .04em; color: var(--ri-text-sub);
}
.rgx-gd__ic { display: inline-flex; width: 16px; height: 16px; color: var(--ri-accent); }
.rgx-gd__ic svg { width: 100%; height: 100%; }
.rgx-gd__q {
  margin: 0; font-size: var(--ri-fs-lg); line-height: 1.4; font-weight: 700;
  color: var(--ri-accent); text-wrap: balance;
}
.rgx-gd__a { margin: 0; font-size: var(--ri-fs-sm); line-height: 1.6; color: var(--ri-text); }
.rgx-gd__d {
  margin: 0; padding-top: var(--ri-space-3); border-top: 1px solid var(--ri-line);
  font-size: var(--ri-fs-xs); line-height: 1.6; color: var(--ri-text-sub);
}
.rgx-gd__go {
  margin: auto 0 0; padding-top: var(--ri-space-2);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--ri-space-3);
  font-size: var(--ri-fs-xs);
}
.rgx .rgx-gd__go a { font-weight: 700; color: var(--ri-accent); text-decoration: none; }
.rgx .rgx-gd__go a:hover { text-decoration: underline; }
.rgx-gd__go span { color: var(--ri-text-sub); font-variant-numeric: tabular-nums; }
@container (min-width: 620px)  { .rgx-gd__l { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1000px) { .rgx-gd__l { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.rgx .rgx-fig__go {
  display: inline-block; margin-top: var(--ri-space-3);
  padding: 8px 16px; border: 1px solid var(--ri-accent); border-radius: 0;
  font-size: var(--ri-fs-xs); font-weight: 700; color: var(--ri-accent); text-decoration: none;
}
.rgx .rgx-fig__go:hover { background: var(--ri-accent); color: var(--ri-accent-ink); }

/* 말풍선의 「이것 없이 달리면?」 — 사장님이 든 예가 바로 이것이다 */
.rgx-pop__wq {
  display: block; margin: var(--ri-space-3) 0 4px;
  font-size: var(--ri-fs-sm); font-weight: 700; line-height: 1.4; color: var(--ri-accent);
}
.rgx-pop__wa {
  display: block; font-size: var(--ri-fs-xs); line-height: 1.6; color: var(--ri-text);
}
/* 말풍선 안에서는 답을 석 줄까지만 — 넘치면 캐릭터를 덮는다 */
.rgx-bub .rgx-pop__wa {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.rgx-bub .rgx-pop__lead { display: none; }
.rgx-pops .rgx-pop__wq, .rgx-pops .rgx-pop__wa { display: none; }

/* ── 20. 탭 ────────────────────────────────────────────────────────
   사장님 : 「길게 하지 말고 탭 형식으로 한 페이지에서 탭만 클릭하면 나오게」
   ★자바스크립트가 죽으면 «전부 펼쳐진 채» 로 읽힌다. 숨기는 것은 .rgx-js 가 켜졌을 때뿐이다. */
.rgx-tab { margin: 0 0 var(--ri-space-6); }
.rgx-tab__b {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 0 0 var(--ri-space-4);
  border-bottom: 2px solid var(--ri-line);
}
.rgx .rgx-tab__l {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: 8px 16px; margin-bottom: -2px;
  border-bottom: 2px solid transparent;
  font-family: inherit; font-size: var(--ri-fs-sm); font-weight: 700;
  color: var(--ri-text-sub); line-height: 1.4;
}
.rgx .rgx-tab__l:hover { color: var(--ri-text); }
.rgx .rgx-tab__l.is-on {
  color: var(--ri-accent); border-bottom-color: var(--ri-accent);
}
.rgx-tab__l i {
  font-style: normal; margin-left: 4px; padding: 1px 8px;
  border: 1px solid var(--ri-line); border-radius: 0;
  font-size: var(--ri-fs-xs); font-weight: 700; color: var(--ri-text-sub);
}
.rgx-tab__p { margin-bottom: var(--ri-space-6); }
.rgx-js .rgx-tab__p { display: none; margin-bottom: 0; }
.rgx-js .rgx-tab__p.is-on { display: block; }

/* ── 21. 브랜드 판매 순위 ──────────────────────────────────────────── */
.rgx-rk__c { margin: 0 0 var(--ri-space-8); }
.rgx-rk__h {
  margin: 0 0 var(--ri-space-3); padding-bottom: var(--ri-space-2);
  font-size: var(--ri-fs-xl); font-weight: 700; color: var(--ri-text);
}
/* ★자료 한 벌 = 표 한 개. 표 머리에 «어디를 참조했는지» 를 박는다.
   사장님 : 「어디 어디 참조했다고 출처 기재해서 인용해서 만들어」 */
.rgx-rk__box {
  margin: 0 0 var(--ri-space-6); padding: var(--ri-space-5);
  border: 1px solid var(--ri-line); border-radius: 0;
}
.rgx-rk__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--ri-space-2) var(--ri-space-4); margin-bottom: var(--ri-space-2);
}
.rgx-rk__head h3 {
  margin: 0; font-size: var(--ri-fs-lg); font-weight: 700; color: var(--ri-text);
}
.rgx-rk__src {
  margin: 0; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--ri-space-2); font-size: var(--ri-fs-xs);
}
.rgx-rk__src em {
  font-style: normal; font-weight: 700; color: var(--ri-accent-ink);
  background: var(--ri-accent); padding: 2px 8px; border-radius: 0;
}
.rgx-rk__src b { font-weight: 700; color: var(--ri-text); }
.rgx-rk__src span { color: var(--ri-text-sub); }
.rgx-rk__basis {
  margin: 0 0 var(--ri-space-4);
  font-size: var(--ri-fs-xs); line-height: 1.6; color: var(--ri-text-sub);
}
.rgx-rk__extra {
  margin: 0 0 var(--ri-space-3); padding: var(--ri-space-3) var(--ri-space-4);
  background: var(--ri-surface-2); border-radius: 0;
  font-size: var(--ri-fs-xs); line-height: 1.6; color: var(--ri-text-sub);
}
.rgx-rk__extra em {
  display: block; font-style: normal; font-weight: 700; color: var(--ri-text); margin-bottom: 3px;
}

.rgx-rk__wrap { overflow-x: auto; margin: 0 0 var(--ri-space-4); }
.rgx-rk__t, .rgx-rc__t {
  width: 100%; min-width: 560px; border-collapse: collapse;
  font-size: var(--ri-fs-sm);
}
.rgx-rk__t th, .rgx-rc__t th {
  padding: 8px 12px; text-align: left; white-space: nowrap;
  border-bottom: 2px solid var(--ri-line-strong);
  font-size: var(--ri-fs-xs); font-weight: 700; color: var(--ri-text-sub);
}
.rgx-rk__t td, .rgx-rc__t td {
  padding: 12px; border-bottom: 1px solid var(--ri-line);
  vertical-align: top; line-height: 1.6;
}
.rgx-rk__n {
  width: 44px; font-family: var(--ri-font-num); font-size: var(--ri-fs-lg);
  font-weight: 700; color: var(--ri-accent); font-variant-numeric: tabular-nums;
}
.rgx-rk__b { white-space: nowrap; font-weight: 700; color: var(--ri-text); }
.rgx-rk__b i {
  display: block; font-style: normal; font-size: var(--ri-fs-xs);
  font-weight: 400; color: var(--ri-text-sub);
}
.rgx-rk__s {
  white-space: nowrap; font-family: var(--ri-font-num); font-weight: 700;
  color: var(--ri-text); font-variant-numeric: tabular-nums;
}
.rgx-rk__w { color: var(--ri-text-sub); }
.rgx-rk__hit {
  display: block; margin-top: 4px; font-size: var(--ri-fs-xs); color: var(--ri-accent);
  font-weight: 700;
}
.rgx-rk__none {
  margin: 0 0 var(--ri-space-4); padding: var(--ri-space-5);
  border: 1px dashed var(--ri-line-strong); border-radius: 0;
  font-size: var(--ri-fs-sm); line-height: 1.6; color: var(--ri-text-sub);
}
.rgx-rk__cav {
  margin: 0 0 var(--ri-space-3); padding: var(--ri-space-3) var(--ri-space-4);
  background: var(--ri-surface-2); border-radius: 0;
  font-size: var(--ri-fs-xs); line-height: 1.6; color: var(--ri-text-sub);
}
.rgx-rk__cav em {
  display: block; font-style: normal; font-weight: 700; color: var(--ri-text);
  margin-bottom: 3px;
}

/* ── 22. 세계기록과 그날의 신발 ───────────────────────────────────── */
.rgx-rc__t { min-width: 720px; }
.rgx-rc__p b { display: block; font-weight: 700; color: var(--ri-text); white-space: nowrap; }
.rgx-rc__p i {
  font-style: normal; font-size: var(--ri-fs-xs); color: var(--ri-text-sub);
}
.rgx-rc__tm {
  white-space: nowrap; font-family: var(--ri-font-num); font-weight: 700;
  color: var(--ri-text); font-variant-numeric: tabular-nums;
}
.rgx-rc__rc { color: var(--ri-text-sub); }
.rgx-rc__rc span {
  display: block; font-size: var(--ri-fs-xs); font-variant-numeric: tabular-nums;
}
.rgx-rc__sh b { display: block; font-weight: 700; color: var(--ri-accent); }
.rgx-rc__sh > span { display: block; color: var(--ri-text); }
.rgx-rc__sh em {
  display: block; font-style: normal; font-size: var(--ri-fs-xs);
  color: var(--ri-text-sub); line-height: 1.6;
}
.rgx-rc__q {
  display: inline-block; margin-top: 4px; padding: 1px 8px; text-decoration: none;
  border: 1px solid var(--ri-line); border-radius: 0;
  font-size: var(--ri-fs-xs); color: var(--ri-text-sub);
}
.rgx-rc__un { color: var(--ri-text-sub); }

/* ── 23. 소갈래는 왜 갈라져 있나 ───────────────────────────────────
   사장님 : 「왜 장비가 있어야 하고 장비의 목적이 뭔지 고객들은 알아야 한다」 */
.rgx-sb { margin: 0 0 var(--ri-space-7); container-type: inline-size; }
.rgx-sb__l { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--ri-space-4); }
.rgx-sb__i {
  padding: var(--ri-space-5);
  border: 1px solid var(--ri-line); border-radius: 0;
  display: flex; flex-direction: column; gap: var(--ri-space-2);
}
.rgx-sb__i h3 { margin: 0; font-size: var(--ri-fs-lg); font-weight: 700; }
.rgx .rgx-sb__i h3 a { color: var(--ri-accent); text-decoration: none; }
.rgx .rgx-sb__i h3 a:hover { text-decoration: underline; }
.rgx-sb__w { margin: 0; font-size: var(--ri-fs-sm); line-height: 1.6; color: var(--ri-text); }
.rgx-sb__o {
  margin: 0; padding-top: var(--ri-space-2); border-top: 1px solid var(--ri-line);
  font-size: var(--ri-fs-xs); line-height: 1.6; color: var(--ri-text-sub);
}
.rgx-sb__o em {
  display: block; font-style: normal; font-weight: 700; color: var(--ri-text); margin-bottom: 2px;
}
.rgx-sb__n {
  margin: auto 0 0; font-size: var(--ri-fs-xs); font-weight: 700; color: var(--ri-accent);
  line-height: 1.6;
}
@container (min-width: 620px)  { .rgx-sb__l { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1000px) { .rgx-sb__l { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 소갈래 지면 — 하나만 크게 */
.rgx-sb__what {
  margin: 0 0 var(--ri-space-5);
  font-size: var(--ri-fs-lg); line-height: 1.6; font-weight: 700; color: var(--ri-text);
}
.rgx-sb__why {
  margin: 0 0 var(--ri-space-5);
  padding: var(--ri-space-5) var(--ri-space-5) var(--ri-space-5) var(--ri-space-6);
  background: var(--ri-brand-weak);
  border-left: 4px solid var(--ri-accent);
  border-radius: 0;
}
.rgx-sb__why p:last-child {
  margin: 0; font-size: var(--ri-fs-base); line-height: 1.6; color: var(--ri-text);
}
.rgx-sb__k {
  margin: 0 0 var(--ri-space-2);
  font-size: var(--ri-fs-xs); font-weight: 700; letter-spacing: .04em; color: var(--ri-accent);
}
.rgx-sb__row { display: grid; gap: var(--ri-space-4); margin: 0 0 var(--ri-space-4); }
.rgx-sb__cell {
  padding: var(--ri-space-4);
  border: 1px solid var(--ri-line); border-radius: 0;
}
.rgx-sb__cell p:last-child {
  margin: 0; font-size: var(--ri-fs-sm); line-height: 1.6; color: var(--ri-text-sub);
}
@container (min-width: 620px) { .rgx-sb__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rgx-sb__num {
  margin: 0 0 var(--ri-space-3); padding: var(--ri-space-3) var(--ri-space-4);
  background: var(--ri-surface-2); border-radius: 0;
  font-size: var(--ri-fs-sm); font-weight: 700; line-height: 1.6; color: var(--ri-text);
}
.rgx-sb__num em {
  display: block; font-style: normal; font-size: var(--ri-fs-xs); font-weight: 700;
  letter-spacing: .04em; color: var(--ri-accent); margin-bottom: 3px;
}

/* 확신도가 «못 밝힘» 이면 브랜드가 적혀 있어도 사실처럼 보이지 않게 눌러 둔다 */
.rgx-rc__sh.is-no b, .rgx-rc__sh.is-no b a { color: var(--ri-text-sub); font-weight: 700; }
.rgx-rc__sh.is-no > span { color: var(--ri-text-sub); }
.rgx .rgx-rc__q--no { border-style: dashed; }

/* ── 24. 후원 밝힘 · 값대로 고르기 · 이벤트 ────────────────────────
   사장님 2026-09-06 : 「난 C2스포츠에서 후원받고 있고 … 배너하고 제품 설명 더 넣어 줘.
   가격대로 저렴한 거, 중간, 비싼 거 3종류로 소개도 하고」 「이벤트하면 이벤트까지 전부」 */

.rgx-spon {
  margin: 0 0 var(--ri-space-5); padding: var(--ri-space-4) var(--ri-space-5);
  border: 1px solid var(--ri-accent); border-radius: 0;
  background: var(--ri-brand-weak);
  font-size: var(--ri-fs-sm); line-height: 1.6; color: var(--ri-text);
}
.rgx-spon em {
  display: inline-block; margin-right: 8px; padding: 2px 8px;
  font-style: normal; font-weight: 700; font-size: var(--ri-fs-xs);
  background: var(--ri-accent); color: var(--ri-accent-ink);
  border-radius: 0;
}

.rgx-tier { margin: var(--ri-space-6) 0 0; container-type: inline-size; }
.rgx-tier h3, .rgx-evt h3 {
  margin: 0 0 var(--ri-space-3); padding-bottom: var(--ri-space-2);
  border-bottom: 1px solid var(--ri-line);
  font-size: var(--ri-fs-sm); font-weight: 700; letter-spacing: .04em; color: var(--ri-accent);
}
.rgx-tier__l { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--ri-space-4); }
.rgx-tier__i {
  padding: var(--ri-space-5); border: 1px solid var(--ri-line); border-radius: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.rgx-tier__k {
  margin: 0; align-self: flex-start; padding: 2px 12px;
  background: var(--ri-surface-2); border-radius: 0;
  font-size: var(--ri-fs-xs); font-weight: 700; color: var(--ri-text-sub);
}
.rgx-tier__n { margin: 0; font-size: var(--ri-fs-lg); font-weight: 700; color: var(--ri-text); }
.rgx-tier__n i { font-style: normal; font-size: var(--ri-fs-xs); font-weight: 400; color: var(--ri-text-sub); }
.rgx-tier__p {
  margin: 0; font-family: var(--ri-font-num); font-size: var(--ri-fs-xl);
  font-weight: 700; color: var(--ri-accent); font-variant-numeric: tabular-nums;
}
.rgx-tier__w { margin: 0; font-size: var(--ri-fs-sm); line-height: 1.6; color: var(--ri-text-sub); }
.rgx .rgx-tier__go {
  margin-top: auto; padding-top: var(--ri-space-2);
  font-size: var(--ri-fs-xs); font-weight: 700; color: var(--ri-accent); text-decoration: none;
}
.rgx .rgx-tier__go:hover { text-decoration: underline; }
.rgx-tier__n2 {
  margin: var(--ri-space-3) 0 0; font-size: var(--ri-fs-xs); line-height: 1.6; color: var(--ri-text-sub);
}
@container (min-width: 620px) { .rgx-tier__l { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.rgx-evt { margin: var(--ri-space-6) 0 0; }
.rgx-evt__l { margin: 0 0 var(--ri-space-4); padding: 0; list-style: none; display: grid; gap: var(--ri-space-2); }
.rgx-evt__i { border: 1px solid var(--ri-line); border-radius: 0; }
.rgx .rgx-evt__i a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--ri-space-3);
  padding: var(--ri-space-3) var(--ri-space-4); text-decoration: none;
}
.rgx .rgx-evt__i a:hover { background: var(--ri-brand-weak); }
.rgx-evt__i b { font-size: var(--ri-fs-sm); font-weight: 700; color: var(--ri-accent); }
.rgx-evt__i span { font-size: var(--ri-fs-xs); color: var(--ri-text-sub); }
.rgx-evt__k {
  margin: 0 0 8px; font-size: var(--ri-fs-xs); font-weight: 700; color: var(--ri-text-sub);
}
.rgx-evt__n { margin: 0 0 var(--ri-space-3); padding-left: 1.05em; }
.rgx-evt__n li { font-size: var(--ri-fs-xs); line-height: 1.6; color: var(--ri-text-sub); }
.rgx-evt__note {
  margin: 0; padding: var(--ri-space-3) var(--ri-space-4);
  background: var(--ri-surface-2); border-radius: 0;
  font-size: var(--ri-fs-xs); line-height: 1.6; color: var(--ri-text-sub);
}

/* ── 25. 제휴 · 등재 문의 폼 ───────────────────────────────────────
   사장님 2026-09-06 : 「입력폼 만들어서 sales@idc.kr 로 메일 오게」
                      「개인정보취급방침 이용안내 정보동의 체크 하게 만들고」 */
.rgx-ginq { margin: 0 0 var(--ri-space-7); container-type: inline-size; }

.rgx-msg {
  margin: 0 0 var(--ri-space-5); padding: var(--ri-space-4) var(--ri-space-5);
  border-radius: 0; font-size: var(--ri-fs-sm); line-height: 1.6;
}
.rgx-msg b { display: block; margin-bottom: 2px; }
.rgx-msg--ok { background: var(--ri-brand-weak); border: 1px solid var(--ri-accent); color: var(--ri-text); }
.rgx-msg--no { background: var(--ri-surface-2); border: 1px solid var(--ri-line-strong); color: var(--ri-text); }

.rgx-form {
  padding: var(--ri-space-6);
  border: 1px solid var(--ri-line); border-radius: 0;
  background: var(--ri-surface);
}
.rgx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rgx-fs { margin: 0 0 var(--ri-space-6); padding: 0; border: 0; }
.rgx-fs legend {
  padding: 0 0 var(--ri-space-3); margin-bottom: var(--ri-space-4); width: 100%;
  border-bottom: 2px solid var(--ri-line);
  font-size: var(--ri-fs-sm); font-weight: 700; letter-spacing: normal; color: var(--ri-accent);
}
.rgx-grid2 { display: grid; gap: var(--ri-space-4); }
@container (min-width: 620px) { .rgx-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rgx-f { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.rgx-f--wide { grid-column: 1 / -1; }
.rgx-f label {
  font-size: var(--ri-fs-sm); font-weight: 700; color: var(--ri-text);
  display: flex; align-items: center; gap: 8px;
}
.rgx-f label em {
  font-style: normal; padding: 1px 8px; border-radius: 0;
  background: var(--ri-accent); color: var(--ri-accent-ink);
  font-size: var(--ri-fs-xs); font-weight: 700;
}
.rgx-f input, .rgx-f select, .rgx-f textarea {
  width: 100%; padding: 12px 12px; font: inherit; font-size: var(--ri-fs-sm);
  color: var(--ri-text); background: var(--ri-surface);
  border: 1px solid var(--ri-line-strong); border-radius: 0;
}
.rgx-f textarea { resize: vertical; line-height: 1.6; }
.rgx-f input:focus, .rgx-f select:focus, .rgx-f textarea:focus {
  outline: var(--ri-focus-w) solid var(--ri-focus); outline-offset: var(--ri-focus-o);
  border-color: var(--ri-accent);
}
.rgx-f input::placeholder, .rgx-f textarea::placeholder { color: var(--ri-text-sub); }

.rgx-agree {
  margin: 0 0 var(--ri-space-5); padding: var(--ri-space-5);
  background: var(--ri-surface-2); border-radius: 0;
}
.rgx-agree h2 {
  margin: 0 0 var(--ri-space-3); font-size: var(--ri-fs-sm); font-weight: 700; color: var(--ri-text);
}
.rgx-agree__d { margin: 0 0 var(--ri-space-3); display: grid; gap: 1px; background: var(--ri-line); }
.rgx-agree__d > div {
  display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 1px; background: var(--ri-line);
}
.rgx-agree__d dt, .rgx-agree__d dd {
  margin: 0; padding: 8px 12px; background: var(--ri-surface);
  font-size: var(--ri-fs-xs); line-height: 1.6;
}
.rgx-agree__d dt { font-weight: 700; color: var(--ri-text-sub); }
.rgx-agree__d dd { color: var(--ri-text); }
.rgx-agree__n { margin: 0 0 var(--ri-space-3); font-size: var(--ri-fs-xs); line-height: 1.6; color: var(--ri-text-sub); }
.rgx .rgx-agree__n a { color: var(--ri-accent); font-weight: 700; text-decoration: none; }
.rgx .rgx-agree__n a:hover { text-decoration: underline; }
.rgx-agree__c { margin: 0; }
.rgx-agree__c label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.rgx-agree__c input { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 20px; accent-color: var(--ri-accent); }
.rgx-agree__c span { font-size: var(--ri-fs-sm); line-height: 1.6; color: var(--ri-text); }
.rgx-agree__c em {
  font-style: normal; margin-left: 4px; padding: 1px 8px; border-radius: 0;
  background: var(--ri-accent); color: var(--ri-accent-ink); font-size: var(--ri-fs-xs); font-weight: 700;
}

.rgx-form__go {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ri-space-3) var(--ri-space-4);
}
.rgx-form__go span { font-size: var(--ri-fs-xs); line-height: 1.6; color: var(--ri-text-sub); }
.rgx .rgx-form__go button {
  border: 0; cursor: pointer; font: inherit;
  padding: 12px 32px; border-radius: 0;
  background: var(--ri-accent); color: var(--ri-accent-ink);
  font-size: var(--ri-fs-sm); font-weight: 700;
}
.rgx .rgx-form__go button:hover { background: var(--ri-brand); color: var(--ri-brand-ink); }

/* ── 26. 회사소개서 한 장 ──────────────────────────────────────────
   사장님 2026-09-06 : 「협업 소개 할 때는 전부 회사 로고와 회사소개서 전부 기재해.
                      1페이지 이내로 해서」
   ★넓은 화면에서 소개 글과 회사 정보를 두 단으로 놓아 «한 장» 에 들어오게 합니다. */
.rgx-about__one {
  margin: 0 0 var(--ri-space-5) !important;
  font-size: var(--ri-fs-lg); line-height: 1.6; font-weight: 700;
  color: var(--ri-text); text-wrap: pretty;
}
.rgx-about__cols { display: grid; gap: var(--ri-space-5); align-items: start; }
.rgx-about__txt > p:last-child { margin-bottom: 0; }
.rgx-about__cols .rgx-facts { margin: 0; }
@container (min-width: 860px) {
  .rgx-about__cols { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: var(--ri-space-6); }
}

/* 접힌 고르는 칸 안에 무엇이 들었는지 — 사장님 2026-09-06 : 「광고 문의도 있으니까」 */
.rgx-f__hint {
  display: block; margin-top: 1px;
  font-size: var(--ri-fs-xs); line-height: 1.6; color: var(--ri-text-sub);
}
.rgx-f__hint b { color: var(--ri-accent); font-weight: 700; }
.rgx-f__hint em {
  font-style: normal; margin-left: 8px; padding: 1px 8px;
  border: 1px solid var(--ri-line); border-radius: 0;
  font-weight: 700; white-space: nowrap;
}

/* ── 27. 문의 지면(/contact/) ──────────────────────────────────────
   사장님 2026-09-06 : 「런닝인사이드 문의 란도 입력폼 적용해서 만들어」
   ★이 지면은 .ri-wrap 안에 들어갑니다. .rgx 의 바깥 여백을 한 번 더 주면
     안쪽으로 두 번 밀립니다. 그래서 여기서만 여백을 거둡니다. */
.rgx.ri-cform {
  max-width: none; padding: 0; margin: 0 0 var(--ri-space-7);
  container-type: inline-size;
}
.ri-cform__alt { margin-top: var(--ri-space-8); }

/* 고른 갈래에 딸린 안내 한 줄 */
.rgx-kn {
  margin: var(--ri-space-3) 0 0; padding: var(--ri-space-3) var(--ri-space-4);
  background: var(--ri-surface-2); border-left: 3px solid var(--ri-accent);
  font-size: var(--ri-fs-sm); line-height: var(--ri-lh-base); color: var(--ri-text);
}
.rgx .rgx-kn--go a { color: var(--ri-accent); font-weight: 700; text-decoration: none; }
.rgx .rgx-kn--go a:hover { text-decoration: underline; }

/* 제품 자료의 출처 — 값·무게는 바뀌므로 «언제 본 것인지» 를 밝힌다 */
.rgx-item__src {
  margin: var(--ri-space-5) 0 0;
  padding: var(--ri-space-3) var(--ri-space-4);
  background: var(--ri-surface-2);
  border-left: 3px solid var(--ri-line-strong);
  font-size: var(--ri-fs-xs); line-height: var(--ri-lh-base); color: var(--ri-text-sub);
}
.rgx-item__src b { display: block; margin-bottom: 2px; color: var(--ri-text); font-weight: 700; }

/* ★══ 2026-09-25 «한글 큰 제목 자간» — 셋이 같이 가기로 한 규칙 ══
   A 님 01:55 안 + B 동의(02:45) + C 님 제기(23:07) — 셋이 합의한 것 :
     «대문자 영문 라벨»   +.12 ~ +.16em  벌린다
     «한글 큰 제목»      -.03em         좁힌다
     그 밖(본문·작은 글자)  0 (normal)
   까닭 : 아디다스가 벌리는 것은 «ALL CAPS 영문» 이다.
          한글에 +자간을 주면 낱말이 흩어져 오히려 읽기 나쁘다.
   ★자간을 «좁히는» 것은 글자를 사라지게 할 수 없다 — 넓이만 줄어든다. 안전한 방향이다.
   ★숫자·기록·전화번호는 «넣지 않았다» — 숫자는 좁히면 자리가 어긋난다. */
.rgx-sec__h h2,
.rgx-nav__home b,
.rgx-hero h1,
.rgx-hero--sm h1,
.rgx-hero__st b,
.rgx-fig__head h2,
.rgx-cat__i,
.rgx-chead h1,
.rgx-chead__i,
.rgx-bhead h1,
.rgx-about h2,
.rgx-foot h2,
.rgx-sl__s h2,
.rgx-sl__h,
.rgx-whybox h2,
.rgx-rk__h,
.rgx-item__buy h1 { letter-spacing: -.03em; }