/* ============================================================================
   히어로 선언 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-ledger,
.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%);
}

/* ── 세부 내용 속 강조 (서버가 [[…]] → <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줄 = 장부 ─────────────────────────────────────────────────────────
   번호는 마크업에 적지 않는다. CSS counter 가 01~05 를 그린다.
   줄이 늘거나 줄어도 번호가 저절로 맞고, 31개 언어 번역 파일에도 숫자가 섞이지 않는다. */
.hx-ledger {
  position: relative;
  list-style: none;
  counter-reset: hx;
  margin: 0 0 22px;
  padding: 0;
  max-width: 640px;
  border-top: 1px solid var(--hx-rule-2);
}
/* 번호칸과 본문칸을 가르는 세로 괘선 — 장부의 그 선이다 */
.hx-ledger::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  inset-inline-start: 63px;
  width: 1px;
  background: var(--hx-rule);
  pointer-events: none;
}
.hx-ledger .hx-row {
  counter-increment: hx;
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: baseline;
  gap: 0 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hx-rule);
}
.hx-ledger .hx-row:last-child { border-bottom-color: var(--hx-rule-2); }

/* 숫자는 크게, 색은 낮게 — 계측기 눈금처럼 읽히되 문장을 이기지 않는다.
   물리적으로는 숫자가 크지만 대비가 낮아, 눈은 문장을 먼저 읽고 숫자를 나중에 인식한다. */
.hx-ledger .hx-row::before {
  content: counter(hx, decimal-leading-zero);
  font-family: var(--hx-mono);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--hx-num);
  text-align: end;
  direction: ltr;            /* RTL 언어에서도 숫자는 01 그대로 */
  unicode-bidi: isolate;
}

/* ★.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(16.5px, .55vw + 13px, 21px);
  line-height: 1.44;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--hx-line);
  max-width: 40ch;
  word-break: keep-all;          /* 한국어 어절이 중간에서 끊기지 않게 */
  overflow-wrap: break-word;
  text-wrap: balance;            /* 다국어 1.3배 대비 — 마지막 줄에 한 단어만 남는 꼴 방지 */
}

/* ── 자세히 보기 = 무지개 레이저 테두리 ──────────────────────────────────────
   원리: 알약 모양 상자를 overflow:hidden 으로 잘라내고, 그 안에서 정사각형
   conic-gradient 를 돌린다. 알약을 직접 돌리면 모서리가 삐져나오지만
   정사각형을 돌려서 알약으로 잘라내면 테두리만 무지개로 흐른다.
   ★정사각형은 aspect-ratio 가 아니라 width/padding-bottom 같은 % 로 만든다 —
     둘 다 컨테이너 '가로'를 기준으로 계산돼 어떤 브라우저에서도 반드시 정사각이 된다.
   ★굵기는 부모 padding 1.6px 하나가 결정한다. 굵으면 광고가 되고, 가늘어야 계측기가 된다.
   ★흰색 정점(96%)이 링을 앞서 달리는 '레이저 머리'다. 4.8초에 한 바퀴 —
     눈에 띄되 재촉하지 않는 속도. 움직이는 건 transform 뿐이라 리플로우가 없다. */
.hx-detail { margin: 22px auto 0; max-width: 1560px; }

.hx-detail > .hx-laser {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 1.6px;
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 6px 20px rgba(37, 99, 235, .22);
}
.hx-detail > .hx-laser::-webkit-details-marker { display: none; }
.hx-detail > .hx-laser::marker { content: ""; }
.hx-detail > .hx-laser:hover { box-shadow: 0 8px 26px rgba(96, 165, 250, .34); }
.hx-detail > .hx-laser:focus:not(:focus-visible) { outline: none; }
.hx-detail > .hx-laser:focus-visible { outline: 2px solid var(--hx-hi); outline-offset: 3px; }

.hx-laser .hx-beam {
  position: absolute;
  left: 50%; top: 50%;
  width: 220%; height: 0; padding-bottom: 220%;
  transform: translate(-50%, -50%) rotate(0deg);
  background: conic-gradient(from 0deg,
      #FF4D4D 0%, #FF9F43 14%, #FFE45C 27%, #5CE08A 42%,
      #38BDF8 57%, #6D8BFF 71%, #C77DFF 86%, #FFFFFF 96%, #FF4D4D 100%);
  animation: hxBeamSpin 4.8s linear infinite;
  will-change: transform;
  pointer-events: none;
}
@keyframes hxBeamSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* 안쪽 판 — 불투명해야 레이저가 테두리에만 남는다 */
.hx-laser .hx-face {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 44px;                /* 손가락 터치 표적 */
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--hx-face);
  color: #EAF2FF;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -.1px;
  white-space: nowrap;
  transition: background .15s;
}
.hx-detail > .hx-laser:hover .hx-face { background: #101E36; }
.hx-laser .hx-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }  /* 다국어 1.3배 대응 */

/* 꺾쇠 — 글꼴에 없는 문자를 쓰지 않으려고 테두리로 그린다 */
.hx-laser .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-laser .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-laser .hx-beam { animation: none; }
  .hx-panel { animation: none; }
  .hx-laser .hx-chev,
  .hx-laser .hx-face { transition: none; }
}

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

/* ── 좁은 화면 (모바일 공용) ────────────────────────────────────────────────*/
@media (max-width: 720px) {
  .hx-ledger { max-width: none; margin-bottom: 18px; }
  .hx-ledger::before { inset-inline-start: 39px; }
  .hx-ledger .hx-row { grid-template-columns: 32px 1fr; gap: 0 14px; padding: 10px 0; }
  .hx-ledger .hx-row::before { font-size: 20px; letter-spacing: -.5px; }
  .hx-ledger .hx-line { max-width: none; line-height: 1.5; }

  .hx-detail { margin-top: 18px; }
  .hx-detail > .hx-laser { display: flex; width: 100%; }
  .hx-laser .hx-face { flex: 1; justify-content: center; min-height: 48px; 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; }
}

/* ── 오른쪽→왼쪽 언어 ───────────────────────────────────────────────────────
   번호칸·괘선·눈금자는 논리 속성(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-laser .hx-chev { transform: translateY(-2px) rotate(-45deg); }
[dir="rtl"] .hx-detail[open] .hx-laser .hx-chev { transform: translateY(2px) rotate(135deg); }