/* ============================================================================
   히어로 선언 5줄 + 8단계 상세  (2026-08-01 신설)
   방향 = "장부·계측기" — 숫자를 크게, 선을 얇게. 광고가 아니라 기록처럼.

   마스터 요구
     ① 숫자로 시작하는 강조 메인 문구 + 뒤따르는 (세부 내용) 8단계
     ② 메인 문구 = 테마에 어울리면서 눈에 띄는 색 + Bold
     ③ 세부 내용 = 가장 편안한 기본색
     ④ 세부 내용의 강조 = 시선을 확 끌어당기는 강조색
     ⑤ 화려·과장 금지. 단호하고 군더더기 없이.
     ⑥ '자세히 보기' = 무지개 레이저가 둥글게 도는 위젯

   왜 여기(product.css)인가
     tokens.css 는 데스크톱·모바일·관리자 공용이라 값 하나만 건드려도 전 화면이 흔들린다.
     그래서 새 색은 이 블록 안에서만 사는 지역 변수(--hx-*)로 두고,
     반경·그림자·폰트는 tokens.css 변수를 그대로 가져다 쓴다. 토큰은 하나도 바꾸지 않는다.

   ★특이도 주의 (실측)
     _DesktopLayout.cshtml / _MobileLayout.cshtml 은 product.css 를 layout.css 보다 '먼저' 건다.
     즉 같은 특이도면 .d-hero h1 / .d-hero p (0-1-1) 가 이긴다.
     그래서 모든 규칙을 클래스 2개(.hx-ledger .hx-line = 0-2-0)로 못 박았다. !important 는 0개다.

   쓰는 곳 (데스크톱·모바일 공용 — 둘 다 어두운 남색 히어로다)
     Views/Desktop/Home/Index.cshtml  .d-hero > .d-hero-left  /  .d-hero 직속
     Views/Mobile/Home/Index.cshtml   .m-hero

   ★간격 토큰이 없어 기존 화면 리듬(22/18/14/12/8px)을 그대로 따른다.
   ============================================================================ */

/* ── 팔레트 (이 블록 안에서만 산다) ───────────────────────────────────────────
   대비는 히어로에서 가장 어두운 곳(--shell #0B1220)과 가장 밝은 곳(--shell-3 #16233F)
   둘 다에서 계산했다. 뒤 숫자가 #16233F 기준이다.
     --hx-line  #93C5FD  10.4 / 8.6:1  메인 문구   (AA 본문 통과)
     --hx-body  #C7D6EE  12.8 /10.6:1  세부 내용   (AA 본문 통과)
     --hx-hi    #FBBF24  11.3 / 9.3:1  강조        (AA 본문 통과)
     --hx-num   58% 알파  ≈3.4:1        큰 인덱스 숫자 (AA 큰글자 통과 · 22px 이상 Bold)
   ★--hx-line·--hx-body 는 새로 만든 색이 아니다. 이미 이 파일이 쓰던 값이다
     (.pd-stat.is-lang .n = #93C5FD, .pd-tagline = #C7D6EE). 사이트에 없던 색을 늘리지 않는다.
   ★--primary #2563EB 를 본문에 안 쓴 이유: #0B1220 위에서 3.6:1 이라 본문 AA(4.5:1)를 못 넘는다.
   ★파랑·회색만 있는 판에서 따뜻한 색은 앰버 하나뿐이라, 강조가 어디 있는지 눈이 즉시 찾는다.
   ─────────────────────────────────────────────────────────────────────────── */
.hx-brand,
.hx-ledger,
.hx-outro,
.hx-detail {
  --hx-line: #93C5FD;
  --hx-body: #C7D6EE;
  --hx-hi: #FBBF24;
  --hx-hi-u: rgba(251, 191, 36, .38);
  --hx-num: rgba(147, 197, 253, .58);
  --hx-rule: rgba(255, 255, 255, .12);
  --hx-rule-2: rgba(255, 255, 255, .26);
  --hx-face: #0C1729;
  --hx-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Consolas, "Noto Sans Mono", monospace;
}

/* 화면에서만 감추고 스크린리더·검색엔진에는 남긴다 (h1 유지용) */
.hx-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; white-space: nowrap; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* ── 사이트 워드마크 SJMKSYSTEM.COM (2026-08-01 마스터 지시) ─────────────────
   "SJMK SYSTEM.COM 이거 크게 보였었는데 그게 있어야지. 글자 너무 커."
   → 히어로에서 제일 큰 글자는 선언 5줄이 아니라 사이트 이름이어야 한다.
   ★.d-hero h1 (0-1-1) 이 layout.css 에서 36px 을 걸고 나중에 로드된다.
     그래서 크기는 h1 이 아니라 안쪽 span(.hx-brand .hx-brand-mark = 0-2-0)이 갖는다.
   ★배경 그림 위에 얹히므로 글자에 그림자를 준다 — 그림이 밝은 쪽에 와도 읽힌다.
   ★.COM 의 점 하나만 앰버로 — 강조색이 사이트 전체에서 하나로 유지된다. */
.hx-brand {
  margin: 0 0 14px;
  line-height: 1;
  font-weight: 900;
}
/* ★2026-08-01 2차 — 그라데이션 오려내기(background-clip:text)를 **버렸다**.
   마스터 실측: "SJMKSYST 까지 거의 어두워서 안 보여."
   원인 = 그 방식은 글자를 투명(-webkit-text-fill-color:transparent)으로 만들고 그 구멍에
   배경 그라데이션을 비추는 것이라, 브라우저·GPU·확대배율 어느 하나라도 어긋나 배경이 안 칠해지면
   글자가 **그대로 투명**해져 뒤의 검은 배경이 비친다. 어두운 히어로 위에서는 곧바로 "글자가 사라졌다"가 된다.
   → 단색 밝은 글자로 간다. 어떤 환경에서도 반드시 보인다. 빛나는 느낌은 글자 그림자로 낸다.
   ★그림자를 2겹으로 준 이유 = 안쪽은 배경과 글자를 떼어 놓고(가독성), 바깥쪽은 푸른 발광(분위기). */
.hx-brand .hx-brand-mark {
  display: block;
  font-size: clamp(30px, 3.15vw, 56px);
  letter-spacing: -1.6px;
  line-height: 1.02;
  word-break: break-word;         /* 아주 좁은 화면에서 넘치지 않게 */
  color: #F2F8FF;
  text-shadow:
    0 2px 10px rgba(3, 8, 20, .95),
    0 0 34px rgba(56, 189, 248, .55);
}
.hx-brand .hx-brand-dot { color: var(--hx-hi, #FBBF24); }

/* ── 세부 내용 속 강조 (서버가 [[…]] → <em class="hx-hi">…</em> 로 치환) ────
   기울임은 지운다. 장부에 기울어진 글씨는 없고, CJK 에서 특히 지저분해진다.
   형광펜 배경 대신 2px 밑선 하나만 — 배경을 칠하는 순간 광고가 된다.
   box-decoration-break:clone 이라 줄바꿈돼도 밑선이 끊기지 않는다. */
.hx-hi {
  font-style: normal;
  font-weight: 800;
  color: var(--hx-hi, #FBBF24);
  padding-bottom: 1px;
  box-shadow: inset 0 -2px 0 var(--hx-hi-u, rgba(251, 191, 36, .38));
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
/* 밝은 배경(상품 본문 등)에 재사용할 때만 어두운 앰버로 (흰 바탕 대비 5.6:1) */
.hx-light .hx-hi,
.pd-body .hx-hi,
.panel-card .hx-hi { color: #B45309; box-shadow: inset 0 -2px 0 rgba(180, 83, 9, .30); }

/* ── 메인 5줄 (2026-08-01 마스터 지시로 크기·표식 전면 교체) ─────────────────
   ① "글자 내가 넣으란 거 너무 크게 넣은 것 같다. 지금 크기의 50%로 줄이고"
      → 21px → 11.3px 근처(약 54%). 정확히 50%(10.5px)면 다국어에서 읽기가 어려워
        하한을 11px 로 두었다. 사이트 이름(.hx-brand)이 대신 커졌다.
   ② "1.2.3.4 말고 단락 표시 같은 거 예쁜 걸로 바꾸고"
      → 숫자 카운터를 지우고 마름모 표식 하나를 CSS 로 그린다. 글꼴에 없는 문자를
        쓰지 않으므로 어떤 언어·어떤 기기에서도 같은 모양이 나온다(◆ 문자는 글꼴을 탄다).
   ③ 배경 그림 위에 글자가 얹히므로 그림자를 준다 — 그림 밝은 부분에서도 읽힌다. */
.hx-ledger {
  position: relative;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  max-width: 560px;
  border-top: 1px solid var(--hx-rule-2);
}
/* 표식칸과 본문칸을 가르는 세로 괘선 */
.hx-ledger::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  inset-inline-start: 24px;
  width: 1px;
  background: var(--hx-rule);
  pointer-events: none;
}
.hx-ledger .hx-row {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: center;
  gap: 0 17px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hx-rule);
}
.hx-ledger .hx-row:last-child { border-bottom-color: var(--hx-rule-2); }

/* 단락 표식 — 45도 돌린 작은 사각형(마름모)에 빛을 얹었다.
   숫자가 사라져도 줄의 시작점이 눈에 딱 보이고, 5줄이 하나의 목록으로 묶여 보인다. */
.hx-ledger .hx-row::before {
  content: "";
  justify-self: end;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #93C5FD 0%, #38BDF8 100%);
  box-shadow: 0 0 10px rgba(56, 189, 248, .55);
}

/* ★.d-hero h1 / .d-hero p (0-1-1) 를 이기려고 클래스 2개(0-2-0)로 잡는다 */
.hx-ledger .hx-line {
  display: block;
  margin: 0;
  padding: 0;
  font-size: clamp(11px, .2vw + 7.5px, 11.5px);
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: -.1px;
  color: var(--hx-line);
  text-shadow: 0 1px 6px rgba(3, 8, 20, .8);
  max-width: 48ch;
  word-break: keep-all;          /* 한국어 어절이 중간에서 끊기지 않게 */
  overflow-wrap: break-word;
  text-wrap: balance;            /* 다국어 1.3배 대비 — 마지막 줄에 한 단어만 남는 꼴 방지 */
}

/* ── 접이식 선언 5줄 (모바일 전용, 2026-08-01 마스터 지시) ───────────────────
   "모바일은 문구 때문에 (이미지가) 안 보이니까 '저희만의 장점' 뭐 이런 걸로 한 줄만 해 놓고
    펼치기 기능 넣어놔."
   ★<details> 라 JS 가 0줄이다. 스크립트가 꺼져 있어도 펼쳐진다.
   ★접혀 있어도 5줄은 DOM 에 그대로 있다 — 검색·스크린리더가 내용을 잃지 않는다. */
.hx-fold { margin: 0 0 14px; }
.hx-fold > .hx-fold-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 46px; padding: 12px 16px;
  border: 1px solid rgba(147, 197, 253, .38); border-radius: 12px;
  background: linear-gradient(135deg, rgba(37, 99, 235, .26), rgba(12, 23, 41, .88));
  color: #EAF2FF; font-size: 14.5px; font-weight: 800; letter-spacing: -.1px;
  cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
}
.hx-fold > .hx-fold-btn::-webkit-details-marker { display: none; }
.hx-fold > .hx-fold-btn::marker { content: ""; }
.hx-fold > .hx-fold-btn:focus-visible { outline: 2px solid var(--hx-hi, #FBBF24); outline-offset: 2px; }
.hx-fold .hx-fold-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-fold .hx-chev {
  width: 7px; height: 7px; flex: 0 0 auto;
  border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .85; transition: transform .2s ease;
}
.hx-fold[open] .hx-chev { transform: translateY(2px) rotate(-135deg); }
/* 펼쳤을 때 5줄이 버튼 바로 아래에 붙게 — 위 여백이 두 번 생기지 않도록 */
.hx-fold[open] .hx-ledger { margin-top: 10px; }

/* ── Google Play 배지 줄 (히어로 안) ─────────────────────────────────────────
   2026-08-01: 히어로가 "그림 깔린 어두운 판"이 되면서 이 상자만 밝은 배경 전제로 남아
   혼자 흐릿하게 떠 있었다. 어두운 유리판으로 바꿔 히어로에 얹는다.
   ★Play 배지 이미지 자체는 손대지 않는다(브랜드 가이드라인 — 변형·재제작 금지). */
.play-badge-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 16px; padding: 10px 14px; max-width: 640px;
  border: 1px solid rgba(147, 197, 253, .28);
  border-radius: 12px;
  background: rgba(9, 16, 30, .62);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.play-badge-row .pb-badge { flex: 0 0 auto; line-height: 0; }
.play-badge-row .pb-badge img { height: 44px; width: auto; display: block; }
.play-badge-row .pb-note {
  flex: 1 1 260px; min-width: 200px;
  font-size: 13px; line-height: 1.65; color: #DCE7F8;
}
.play-badge-row .pb-sub { color: #A9BBD6; }

/* ── 페이지 맨 아래 띠 (2026-08-01 마스터 지시) ──────────────────────────────
   "자세히 보기가 글자 메인에 있는 거 맨 아래 부분에 타원형 좀 더 길게 해 놓고"
   → 히어로에서 빼서 본문 맨 아래에 둔다. 그런데 본문은 밝은 배경이고 8단계 패널은
     어두운 배경을 전제로 만들어졌다. 그래서 이 띠 자체를 히어로와 같은 남색으로 깔아
     기존 색 규칙을 하나도 고치지 않고 그대로 쓴다(색을 두 벌로 나누면 반드시 어긋난다). */
.hx-outro {
  background: linear-gradient(180deg, var(--shell-3, #16233F) 0%, var(--shell, #0B1220) 100%);
  border-top: 1px solid var(--shell-border, rgba(255, 255, 255, .1));
  padding: 30px 48px 38px;
}

/* ── 자세히 보기 = 길게 늘어난 알약 ──────────────────────────────────────────
   ★무지개 레이저(.hx-beam)는 지웠다 — 마스터 지시로 언어 선택기 버튼으로 옮겼다
     (정본 = wwwroot/css/common/langpicker.css 의 .lp-beam).
   ★"타원형 좀 더 길게" = 화면 폭을 따라 늘어나되 760px 에서 멈춘다. 가운데 정렬. */
.hx-detail { margin: 0 auto; max-width: 1560px; }

.hx-detail > .hx-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  min-height: 54px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(147, 197, 253, .40);
  background: linear-gradient(135deg, rgba(37, 99, 235, .28) 0%, rgba(12, 23, 41, .92) 62%, rgba(124, 58, 237, .26) 100%);
  cursor: pointer;
  list-style: none;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 10px 28px rgba(2, 6, 23, .45);
  transition: border-color .16s, box-shadow .16s;
}
.hx-detail > .hx-pill::-webkit-details-marker { display: none; }
.hx-detail > .hx-pill::marker { content: ""; }
.hx-detail > .hx-pill:hover { border-color: rgba(147, 197, 253, .85); box-shadow: 0 12px 34px rgba(37, 99, 235, .34); }
.hx-detail > .hx-pill:focus:not(:focus-visible) { outline: none; }
.hx-detail > .hx-pill:focus-visible { outline: 2px solid var(--hx-hi); outline-offset: 3px; }

.hx-pill .hx-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
  min-height: 52px;                /* 손가락 터치 표적 */
  padding: 12px 26px;
  color: #EAF2FF;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
}
.hx-pill .hx-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }  /* 다국어 1.3배 대응 */

/* 꺾쇠 — 글꼴에 없는 문자를 쓰지 않으려고 테두리로 그린다 */
.hx-pill .hx-chev {
  width: 7px; height: 7px; flex: 0 0 auto;
  border-inline-end: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .8;
  transition: transform .2s ease;
}
.hx-detail[open] .hx-pill .hx-chev { transform: translateY(2px) rotate(-135deg); }

/* 열림/닫힘 문구 교체 — JS 없이 [open] 만으로.
   ★opacity 가 아니라 display 로 지운다. 숨긴 라벨이 접근성 트리에 남으면
     스크린리더가 '자세히 보기 접기' 두 개를 다 읽는다. */
.hx-detail .hx-t-close { display: none; }
.hx-detail[open] .hx-t-open { display: none; }
.hx-detail[open] .hx-t-close { display: inline; }

/* ── 8단계 상세 패널 ────────────────────────────────────────────────────────
   같은 화면에서 펼친다(새 페이지 없음). <details>/<summary> 라 JS 가 0줄이다. */
.hx-panel {
  position: relative;
  overflow: hidden;
  margin-top: 14px;
  padding: 18px 20px;
  border: 1px solid var(--hx-rule);
  border-top-color: var(--hx-rule-2);
  border-radius: var(--radius-sm, 10px);
  background: rgba(255, 255, 255, .035);
  animation: hxReveal .26s ease-out both;
}
/* 장부지 모눈 — 이미지가 아니라 그라데이션 2줄이라 무게가 0이다(.pd-hero::before 와 같은 기법) */
.hx-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .6;
  background-image:
    linear-gradient(rgba(147, 197, 253, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(147, 197, 253, .055) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(130% 95% at 50% 0%, #000 12%, transparent 82%);
          mask-image: radial-gradient(130% 95% at 50% 0%, #000 12%, transparent 82%);
}
@keyframes hxReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.hx-panel-head {
  position: relative;              /* 모눈 위로 올린다 */
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}
.hx-panel .hx-panel-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  color: #E6EEFC;
  word-break: keep-all;
}
.hx-panel-range {
  margin-inline-start: auto;
  font-family: var(--hx-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  letter-spacing: 1.6px;
  color: rgba(199, 214, 238, .72);
  direction: ltr;
  unicode-bidi: isolate;
}
/* 눈금자 — 8칸. 이 화면이 '단계 계측'이라는 걸 글자 없이 말한다 */
.hx-scale {
  position: relative;
  height: 8px;
  margin: 0 0 4px;
  opacity: .55;
  background: repeating-linear-gradient(90deg, var(--hx-rule-2) 0 1px, transparent 1px 12.5%);
  border-bottom: 1px solid var(--hx-rule);
}

/* 8단계 — 폭이 넓으면 2~3열, 좁으면 1열로 저절로 접힌다.
   히어로 전폭에 두든 .d-hero-left(46%) 안에 두든 그대로 맞는다. 넣는 자리를 나중에 바꿔도
   CSS 를 고칠 일이 없다. */
.hx-steps {
  position: relative;
  list-style: none;
  counter-reset: hxs;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  column-gap: 26px;
  border-bottom: 1px solid var(--hx-rule);
}
.hx-steps .hx-step {
  counter-increment: hxs;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: baseline;
  gap: 0 14px;
  padding: 13px 0;
  border-top: 1px solid var(--hx-rule);
}
.hx-steps .hx-step::before {
  content: counter(hxs, decimal-leading-zero);
  font-family: var(--hx-mono);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.5px;
  color: var(--hx-num);
  text-align: end;
  direction: ltr;
  unicode-bidi: isolate;
}
.hx-steps .hx-step-t {
  display: block;
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -.2px;
  color: var(--hx-line);
  word-break: keep-all;
}
.hx-steps .hx-step-b {
  display: block;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--hx-body);
  max-width: 46ch;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ── 동작 줄이기 (WCAG 2.3.3) ───────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  .hx-panel { animation: none; }
  .hx-pill,
  .hx-pill .hx-chev { transition: none; }
}

/* ── 고대비(강제 색) 모드 ───────────────────────────────────────────────────
   그라데이션이 전부 무시되는 모드라, 시스템 테두리로 버튼 형태를 지킨다. */
@media (forced-colors: active) {
  .hx-detail > .hx-pill { border: 1px solid CanvasText; }
  .hx-hi { box-shadow: none; text-decoration: underline; }
  .hx-panel { border-color: CanvasText; }
}

/* ── 좁은 화면 (모바일 공용) ────────────────────────────────────────────────*/
@media (max-width: 720px) {
  /* ★모바일 워드마크는 더 크게 (2026-08-01 마스터: "SJMK SYSTEM 그것도 크게 보여야 되고").
     화면 폭의 10.5% 까지 키우되 46px 에서 멈춘다 — 더 키우면 긴 화면에서 두 줄로 접힌다. */
  .hx-brand .hx-brand-mark { font-size: clamp(30px, 10.5vw, 46px); letter-spacing: -1.4px; }
  .hx-brand { margin-bottom: 12px; }

  .hx-ledger { max-width: none; margin-bottom: 14px; }
  .hx-ledger::before { inset-inline-start: 20px; }
  .hx-ledger .hx-row { grid-template-columns: 14px 1fr; gap: 0 13px; padding: 7px 0; }
  .hx-ledger .hx-row::before { width: 7px; height: 7px; }
  .hx-ledger .hx-line { max-width: none; line-height: 1.62; }

  .hx-outro { padding: 22px 14px 28px; }
  .hx-detail > .hx-pill { max-width: none; min-height: 52px; }
  .hx-pill .hx-face { min-height: 50px; padding: 12px 18px; font-size: 14px; }

  .hx-panel { padding: 14px; margin-top: 12px; border-radius: 12px; }
  .hx-panel .hx-panel-title { font-size: 14px; }
  .hx-steps { grid-template-columns: 1fr; column-gap: 0; }
  .hx-steps .hx-step { grid-template-columns: 32px 1fr; gap: 0 12px; padding: 12px 0; }
  .hx-steps .hx-step::before { font-size: 18px; }
  .hx-steps .hx-step-b { max-width: none; font-size: 13px; }
}

/* ══ React 아일랜드 "자세히 보기 8단계" (2026-08-01 신설) ════════════════════
   마크업은 ClientApp/src/islands/HeroDetail.tsx 가 만든다. 서버 HTML(.hx-steps)을 읽어
   같은 내용을 단계 화면으로 다시 그린다 — 스크립트가 없으면 서버 HTML 그대로다.
   ★색은 위 --hx-* 를 그대로 쓴다. 아일랜드용 색을 새로 만들지 않는다(두 벌이 되면 어긋난다). */
.rx-detail { position: relative; }

.rx-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; }
.rx-title { margin: 0; font-size: 15px; font-weight: 800; color: #E6EEFC; word-break: keep-all; }
.rx-count {
  margin-inline-start: auto;
  font-family: var(--hx-mono); font-variant-numeric: tabular-nums;
  font-size: 12px; letter-spacing: 1.4px; color: rgba(199, 214, 238, .72);
  direction: ltr; unicode-bidi: isolate;
}
.rx-count i { font-style: normal; opacity: .5; }

/* 진행 막대 — 지금 몇 번째인지 글자 없이 말한다 */
.rx-bar { height: 2px; background: var(--hx-rule); border-radius: 2px; overflow: hidden; margin: 0 0 14px; }
.rx-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #93C5FD, #38BDF8);
  transition: width .28s ease;
}

/* 넓으면 왼쪽 목록 + 오른쪽 본문, 좁으면 위아래 */
.rx-body { display: grid; grid-template-columns: minmax(210px, 300px) 1fr; gap: 18px; align-items: start; }

.rx-rail { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow-y: auto; }
.rx-chip {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: var(--hx-body); cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700; text-align: start;
  transition: background .14s, border-color .14s, color .14s;
}
.rx-chip:hover { background: rgba(147, 197, 253, .10); }
.rx-chip.is-on {
  background: linear-gradient(135deg, rgba(37, 99, 235, .30), rgba(56, 189, 248, .14));
  border-color: rgba(147, 197, 253, .45); color: #EAF2FF;
}
.rx-chip:focus-visible { outline: 2px solid var(--hx-hi); outline-offset: 2px; }
.rx-chip .rx-n {
  flex: 0 0 auto; font-family: var(--hx-mono); font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 700; color: var(--hx-num);
  direction: ltr; unicode-bidi: isolate;
}
.rx-chip.is-on .rx-n { color: #7DD3FC; }
.rx-chip .rx-ct { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rx-panels { min-width: 0; }
.rx-panel { animation: rxIn .24s ease-out both; }
.rx-panel[hidden] { display: none; }
@keyframes rxIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rx-pt {
  margin: 0 0 8px; font-size: 16px; font-weight: 800; line-height: 1.4;
  color: var(--hx-line); word-break: keep-all;
}
.rx-pb {
  margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--hx-body);
  max-width: 62ch; word-break: keep-all; overflow-wrap: break-word;
}

@media (prefers-reduced-motion: reduce) {
  .rx-panel { animation: none; }
  .rx-bar span { transition: none; }
}
@media (max-width: 860px) {
  /* 좁으면 레일을 가로 칩 줄로 접는다 — 세로로 두면 본문이 밀려 내려간다 */
  .rx-body { grid-template-columns: 1fr; gap: 12px; }
  .rx-rail { flex-direction: row; overflow-x: auto; max-height: none; padding-bottom: 4px; }
  .rx-chip { width: auto; flex: 0 0 auto; }
  .rx-chip .rx-ct { max-width: 42vw; }
  .rx-pt { font-size: 15px; }
}

/* ── 오른쪽→왼쪽 언어 ───────────────────────────────────────────────────────
   번호칸·괘선·눈금자는 논리 속성(inset-inline-start · text-align:end · margin-inline-start)
   으로 이미 뒤집힌다. 숫자만 LTR 로 고정해 두었다(위 direction:ltr).
   물리 좌표가 남은 두 가지만 여기서 손으로 뒤집는다. */
[dir="rtl"] .hx-panel::before {
  -webkit-mask-image: radial-gradient(130% 95% at 50% 0%, #000 12%, transparent 82%);
          mask-image: radial-gradient(130% 95% at 50% 0%, #000 12%, transparent 82%);
}
[dir="rtl"] .hx-pill .hx-chev { transform: translateY(-2px) rotate(-45deg); }
[dir="rtl"] .hx-detail[open] .hx-pill .hx-chev { transform: translateY(2px) rotate(135deg); }