/* ══════════════════════════════════════════════════════════
   박수칠때퇴근 리뉴얼 — 글로벌 내비게이션 (위닝피피티 구조 이식)
   구성: 바 · 메가드롭다운 · 미디어드롭다운 3변형 · 오버레이 메뉴
        · 회사소개서 승인제 모달 · 햄버거 호버 모션 6종
   ══════════════════════════════════════════════════════════ */

/* ── 1. 바 본체 ───────────────────────────────────────── */
.gnb{
  position:fixed; top:0; left:0; right:0; z-index:90; height:76px;
  display:flex; align-items:center;
  background:rgba(255,255,255,.88); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .5s var(--ease), border-color .5s, height .4s var(--ease);
}
.gnb-in{
  width:100%; max-width:1520px; margin:0 auto; padding:0 32px;
  display:flex; align-items:center; gap:28px;
}

/* 로고 = 홈 — ★2026-08-12 실제 브랜드 로고(마크 + 워드마크)로 교체
   .m(박 배지)·글자 로고는 폐기. 옛 규칙은 hero-a~d 시안이 안 쓰므로 지웠다. */
.gnb-logo{ display:flex; align-items:center; gap:9px; flex-shrink:0; line-height:0; }
.gnb-logo-mark{ width:30px; height:30px; display:block; transition:transform .5s var(--ease); }
.gnb-logo:hover .gnb-logo-mark{ transform:rotate(-6deg) scale(1.04); }
/* 워드마크는 500×109(비율 4.587) — 높이만 잡고 폭은 auto 로 둔다 */
.gnb-logo-type{ height:22px; width:auto; display:block; transition:filter .45s var(--ease); }
@media(max-width:520px){
  .gnb-logo{ gap:7px; }
  .gnb-logo-mark{ width:26px; height:26px; }
  .gnb-logo-type{ height:19px; }
}

/* 메뉴 */
.gnb-menu{ margin-left:auto; display:flex; align-items:center; gap:34px; }
.gnb-item{ position:relative; }
/* ★2026-08-12 — 사장님 참고 이미지(공여사들) 기준으로 위계를 올렸다.
   구값 15.5px/500(본문과 구분이 안 될 만큼 가벼웠다) → 16px/600 + 자간 -.02em.
   ⛔700 이상은 쓰지 않는다(상시 방침: Paperlogy 700~900 지양).
     Paperlogy 서브셋에 700 자체가 없어 지정해도 600 으로 폴백된다 — 값을 실제와 맞춰 둔다. */
.gnb-link{
  position:relative; display:flex; align-items:center; gap:5px;
  font-family:inherit; font-size:16px; font-weight:600; letter-spacing:-.02em; color:var(--ink);
  background:none; border:0; padding:26px 0; cursor:pointer;
  transition:color .25s;
}
.gnb-link:hover, .gnb-item.open > .gnb-link{ color:var(--blue); }
.gnb-link .chev{ width:14px; height:14px; transition:transform .3s var(--ease); }
.gnb-item.open .chev{ transform:rotate(180deg); }
/* 밑줄 인디케이터 */
.gnb-link::after{
  content:''; position:absolute; left:0; right:0; bottom:22px; height:2px;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.gnb-link:hover::after, .gnb-item.open > .gnb-link::after{ transform:scaleX(1); }

/* HOT / NEW 뱃지 — ★2026-08-12 위닝피피티(.hbadge-pill) 방식으로 교체.
   위닝 실측 = 폭·높이 0 짜리 래퍼를 글자 끝에 흘려보내고, 그 안의 알약을
   `left:-0.5em` 만큼 되당겨 **마지막 글자 위로 겹치게** 한다(-5deg 기울임·9px·bold).
   ⛔종전처럼 글자 바깥(right:-19px)에 띄우면 메뉴 간격만 벌어지고 겹침이 안 산다.
   `<i class="bdg">` 는 인라인이라 그대로 두면 폭을 차지한다 → width/height 0 으로 죽인다. */
.bdg{
  /* 실측 기준값 — 알약 왼쪽이 마지막 글자를 **8px** 물고(위닝 `left:-0.5em` 과 동일),
     알약 아래끝이 글자 윗변보다 10px 아래로 내려와 오른쪽 위 모서리에 걸친다. */
  position:absolute; right:-26px; top:20px;
  font-size:9px; font-weight:600; font-style:normal; letter-spacing:.03em; line-height:1; color:#fff;
  padding:2.5px 6px; border-radius:999px; white-space:nowrap;
  transform:rotate(-5deg);
  pointer-events:none;                        /* 글자 위에 겹치므로 클릭을 가로채지 않는다 */
}
.bdg.new{ background:var(--blue); }
.bdg.hot{ background:#E8503A; }

/* 우측 버튼 2종 + 햄버거 */
.gnb-right{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.gnb-ghost{
  font-family:inherit; font-size:14.5px; font-weight:600; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:11px 18px; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  transition:border-color .3s, color .3s, background .3s;
}
.gnb-ghost:hover{ border-color:var(--tint-b); color:var(--blue); background:var(--tint); }
.gnb-ghost .lock{ width:13px; height:13px; opacity:.55; }
.gnb-cta{
  font-size:14.5px; font-weight:600; color:#fff; background:var(--ink);
  border-radius:10px; padding:12px 21px; display:inline-flex; align-items:center;
  transition:background .3s, transform .45s var(--ease);
}
.gnb-cta:hover{ background:var(--blue); transform:translateY(-1px); }

/* ── 2. 햄버거 버튼 (모션 6종) ───────────────────────── */
.burger{
  position:relative; width:52px; height:52px; margin-left:2px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:transparent; border:0; border-radius:50%; cursor:pointer;
}
.burger .ln{ display:block; width:26px; height:2px; border-radius:2px; background:var(--ink); position:relative; z-index:2; }
.burger .ring{ position:absolute; inset:0; border-radius:50%; pointer-events:none; }
.burger .ring svg{ width:100%; height:100%; display:block; }
.burger .ring circle{ fill:none; stroke:none; }
.burger:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

/* ① Splay — 위아래로 벌어지고 가운데가 짧아짐 */
.bg-1 .ln{ transition:transform .45s var(--ease), width .45s var(--ease), background .3s; }
.bg-1:hover .ln:nth-child(1){ transform:translateY(-3px); }
.bg-1:hover .ln:nth-child(2){ width:14px; background:var(--blue); }
.bg-1:hover .ln:nth-child(3){ transform:translateY(3px); }

/* ② Stagger Redraw — 좌→우로 순차 재드로잉 */
.bg-2 .ln{ transform-origin:left; transition:transform .5s var(--ease), background .35s; }
.bg-2:hover .ln{ background:var(--blue); }
.bg-2:hover .ln:nth-child(1){ animation:redraw .55s var(--ease) 0s both; }
.bg-2:hover .ln:nth-child(2){ animation:redraw .55s var(--ease) .07s both; }
.bg-2:hover .ln:nth-child(3){ animation:redraw .55s var(--ease) .14s both; }
@keyframes redraw{ 0%{ transform:scaleX(1); } 40%{ transform:scaleX(0); } 100%{ transform:scaleX(1); } }

/* ③ Dots → Lines — 평소 점 3개, 호버 시 선으로 신장 */
.bg-3 .ln{ width:6px; transition:width .5s var(--ease), background .35s; }
.bg-3:hover .ln{ width:26px; background:var(--blue); }
.bg-3:hover .ln:nth-child(2){ transition-delay:.06s; }
.bg-3:hover .ln:nth-child(3){ transition-delay:.12s; }

/* ④ Skew Fan — 부채꼴로 기울며 잉크가 번짐 */
.bg-4 .ln{ transition:transform .5s var(--ease), background .4s; }
.bg-4 .ring{ background:var(--tint); transform:scale(.4); opacity:0; transition:transform .55s var(--ease), opacity .4s; }
.bg-4:hover .ring{ transform:scale(1); opacity:1; }
.bg-4:hover .ln{ background:var(--blue-d); }
.bg-4:hover .ln:nth-child(1){ transform:rotate(-7deg) translateX(-2px); }
.bg-4:hover .ln:nth-child(3){ transform:rotate(7deg) translateX(-2px); }

/* ⑤ Ink Wipe — 왼쪽부터 파란 잉크가 각 줄을 채움 */
.bg-5 .ln{ background:linear-gradient(90deg,var(--blue) 0 50%, var(--ink) 50% 100%); background-size:200% 100%; background-position:100% 0; transition:background-position .55s var(--ease); }
.bg-5:hover .ln{ background-position:0 0; }
.bg-5:hover .ln:nth-child(2){ transition-delay:.08s; }
.bg-5:hover .ln:nth-child(3){ transition-delay:.16s; }

/* ⑥ Ring Draw — 원형 테두리가 그려지고 줄은 안으로 수축 */
.bg-6 .ln{ transition:width .5s var(--ease), background .35s; }
.bg-6 .ring svg{ width:100%; height:100%; display:block; }
.bg-6 .ring circle{ fill:none; stroke:var(--blue); stroke-width:1.4; stroke-dasharray:151; stroke-dashoffset:151; transition:stroke-dashoffset .7s var(--ease); }
.bg-6:hover .ring circle{ stroke-dashoffset:0; }
.bg-6:hover .ln{ width:18px; background:var(--blue); }
.bg-6:hover .ln:nth-child(2){ width:24px; }

/* ★확정 — ⑤ 잉크 번짐 + ④ 코발트 틴트 배경 (bg-ink)
   줄은 왼쪽부터 시차를 두고 파랗게 채워지고, 뒤에서 옅은 코발트 원이 번져 올라옴 */
.bg-ink .ring{ background:var(--tint); transform:scale(.4); opacity:0; transition:transform .55s var(--ease), opacity .4s; }
.bg-ink:hover .ring, .bg-ink:focus-visible .ring{ transform:scale(1); opacity:1; }
.bg-ink .ln{ background:linear-gradient(90deg,var(--blue-d) 0 50%, var(--ink) 50% 100%); background-size:200% 100%; background-position:100% 0; transition:background-position .55s var(--ease); }
.bg-ink:hover .ln, .bg-ink:focus-visible .ln{ background-position:0 0; }
.bg-ink:hover .ln:nth-child(2){ transition-delay:.08s; }
.bg-ink:hover .ln:nth-child(3){ transition-delay:.16s; }

@media(prefers-reduced-motion:reduce){
  .burger .ln, .burger .ring, .burger .ring circle{ transition:none !important; animation:none !important; }
}

/* ── 3. 드롭다운 공통 ────────────────────────────────── */
.dd{
  position:absolute; top:calc(100% - 8px); left:50%;
  background:#fff; border:1px solid var(--line); border-radius:18px;
  box-shadow:0 24px 60px -18px rgba(10,28,62,.24), 0 2px 8px rgba(10,28,62,.06);
  padding:26px; opacity:0; visibility:hidden;
  transform:translate(-50%,10px); pointer-events:none;
  transition:opacity .35s var(--ease), transform .45s var(--ease), visibility .35s;
}
.gnb-item.open .dd{ opacity:1; visibility:visible; transform:translate(-50%,0); pointer-events:auto; }
/* 바 오른쪽 끝 메뉴 — 화면 밖으로 밀리지 않게 우측 정렬 */
.gnb-item.at-right .dd{ left:auto; right:-24px; transform:translate(0,10px); }
.gnb-item.at-right.open .dd{ transform:translate(0,0); }
.dd-cols{ display:flex; gap:8px; }
.dd-col{ min-width:186px; padding:0 14px; }
.dd-col + .dd-col{ border-left:1px solid var(--line); }
.dd-gtitle{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; letter-spacing:.06em; color:var(--g500); padding:0 10px 12px; }
.dd-gtitle .dot{ width:6px; height:6px; border-radius:50%; background:var(--blue); }
.dd-gtitle.c2 .dot{ background:var(--blue-l); }
.dd-gtitle.c3 .dot{ background:#4FBF9F; }
.dd-a{
  display:block; font-size:15px; font-weight:500; color:var(--ink);
  padding:10px 12px; border-radius:9px; line-height:1.4;
  transition:background .25s, color .25s, transform .35s var(--ease);
}
.dd-a:hover{ background:var(--tint); color:var(--blue-d); transform:translateX(3px); }
.dd-a .sub{ display:block; margin-top:3px; font-size:12.5px; color:var(--g500); font-weight:400; }
.dd-a:hover .sub{ color:var(--blue); }

/* 프리뷰 카드 */
.dd-prev{ width:262px; margin-left:10px; padding:16px; background:var(--bg2); border-radius:14px; align-self:stretch; }
.dd-prev .thumb{ height:118px; border-radius:10px; background:linear-gradient(135deg,#10315F,#2E6FF2 60%,#4DA2FF); position:relative; overflow:hidden; }
.dd-prev .thumb span{ position:absolute; left:14px; bottom:12px; font-size:13px; font-weight:600; color:#fff; letter-spacing:-.01em; }
.dd-prev .lab{ margin-top:13px; font-size:11.5px; font-weight:600; letter-spacing:.08em; color:var(--blue); }
.dd-prev .tt{ margin-top:5px; font-size:15px; font-weight:600; color:var(--ink); }
.dd-prev .ds{ margin-top:7px; font-size:12.8px; line-height:1.62; color:var(--g700); }

/* 드롭다운 하단 바 */
.dd-foot{ margin-top:18px; padding-top:15px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.dd-foot .txt{ font-size:13px; color:var(--g500); }
.dd-foot .go{ font-size:13.5px; font-weight:600; color:var(--blue); display:inline-flex; align-items:center; gap:5px; }
.dd-foot .go:hover{ color:var(--blue-d); }
/* ★2026-08-10 — 최근 글 제목에 밑줄 모션. 들어올 때 왼→오, 나갈 때 오→왼으로 걷힌다.
   화살표(.ar)까지 밑줄이 번지지 않게 제목만 .tt 로 감쌌다. */
.dd-foot .go .tt{ position:relative; }
.dd-foot .go .tt::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1.5px;
  background:currentColor; border-radius:1px;
  transform:scaleX(0); transform-origin:right center;
  transition:transform .42s var(--ease, cubic-bezier(.22,1,.36,1));
}
.dd-foot .go:hover .tt::after,
.dd-foot .go:focus-visible .tt::after{ transform:scaleX(1); transform-origin:left center; }
.dd-foot .go .ar{ transition:transform .42s var(--ease, cubic-bezier(.22,1,.36,1)); }
.dd-foot .go:hover .ar{ transform:translateX(3px); }
@media(prefers-reduced-motion:reduce){
  .dd-foot .go .tt::after, .dd-foot .go .ar{ transition:none; }
}

/* 분야 칩 */
.dd-chips{ display:flex; flex-wrap:wrap; gap:7px; max-width:292px; padding:0 12px; }
.dd-chip{ font-size:13px; font-weight:500; color:var(--g700); background:var(--bg2); border:1px solid var(--line); border-radius:999px; padding:7px 13px; transition:background .25s, color .25s, border-color .25s; }
.dd-chip:hover{ background:var(--tint); border-color:var(--tint-b); color:var(--blue-d); }

/* ── 4. 오버레이 메뉴 ────────────────────────────────── */
.ovl{
  position:fixed; inset:0; z-index:120; display:flex; flex-direction:column;
  background:linear-gradient(135deg,#0A1930 0%,#10315F 42%,#1F55C8 100%);
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s;
  overflow-y:auto;
}
body.ovl-on .ovl{ opacity:1; visibility:visible; }
body.ovl-on{ overflow:hidden; }
.ovl-in{ width:100%; max-width:1180px; margin:0 auto; padding:92px 32px 52px; flex:1; display:flex; flex-direction:column; }
.ovl-close{
  position:absolute; top:18px; right:28px; width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(255,255,255,.28); background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition:border-color .3s, transform .5s var(--ease), background .3s;
}
.ovl-close:hover{ border-color:#fff; background:rgba(255,255,255,.1); transform:rotate(90deg); }

.ovl-nav{ display:flex; flex-direction:column; gap:2px; }
.ovl-row{
  display:flex; align-items:baseline; gap:26px; padding:9px 0;
  opacity:0; transform:translateY(18px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
body.ovl-on .ovl-row{ opacity:1; transform:none; }
body.ovl-on .ovl-row:nth-child(1){ transition-delay:.10s; }
body.ovl-on .ovl-row:nth-child(2){ transition-delay:.16s; }
body.ovl-on .ovl-row:nth-child(3){ transition-delay:.22s; }
body.ovl-on .ovl-row:nth-child(4){ transition-delay:.28s; }
body.ovl-on .ovl-row:nth-child(5){ transition-delay:.34s; }
body.ovl-on .ovl-row:nth-child(6){ transition-delay:.40s; }
.ovl-num{ font-size:17px; font-weight:400; color:rgba(180,205,255,.55); width:34px; flex-shrink:0; }
.ovl-t{ position:relative; display:inline-flex; align-items:center; gap:12px; font-size:clamp(30px,4.4vw,54px); font-weight:600; letter-spacing:-.03em; color:#fff; line-height:1.18; transition:color .3s; }
.ovl-t .arw{ font-size:.5em; color:rgba(180,205,255,.6); transition:transform .4s var(--ease), color .3s; }
.ovl-row:hover .ovl-t{ color:var(--blue-l); }
.ovl-row:hover .ovl-t .arw{ transform:translateX(6px); color:var(--blue-l); }
.ovl-bdg{ font-size:11px; font-weight:600; color:#fff; padding:3px 8px; border-radius:999px; letter-spacing:.04em; transform:translateY(-.55em) rotate(-4deg); }
.ovl-bdg.new{ background:var(--blue); }
.ovl-bdg.hot{ background:#E8503A; }
/* 서브 목록(오버레이 안 펼침) */
.ovl-subs{ display:flex; flex-wrap:wrap; gap:9px 18px; padding:0 0 0 60px; max-height:0; opacity:0; overflow:hidden; transition:max-height .5s var(--ease), opacity .35s, padding .4s var(--ease); }
.ovl-item.exp .ovl-subs{ max-height:160px; opacity:1; padding:4px 0 16px 60px; }
.ovl-subs a{ font-size:14.5px; color:rgba(214,229,255,.72); transition:color .25s; }
.ovl-subs a:hover{ color:#fff; }

/* 컨택 카드 */
.ovl-contact{ margin-top:auto; padding-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.ovl-cc{
  display:flex; align-items:center; gap:14px; padding:16px 18px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13); border-radius:14px;
  transition:background .3s, border-color .3s, transform .5s var(--ease);
}
.ovl-cc:hover{ background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.3); transform:translateY(-3px); }
.ovl-cc .ic{ width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.ovl-cc .k{ display:block; font-size:11.5px; letter-spacing:.07em; color:rgba(180,205,255,.72); }
.ovl-cc .v{ display:block; margin-top:3px; font-size:15px; font-weight:600; color:#fff; }
.ovl-info{ margin-top:26px; font-size:12.5px; line-height:1.85; color:rgba(200,218,245,.5); }
.ovl-info .nm{ display:block; font-size:14px; font-weight:600; color:rgba(255,255,255,.82); margin-bottom:5px; letter-spacing:.02em; }
@media(max-width:760px){ .ovl-contact{ grid-template-columns:1fr; } }

/* ── 5. 회사소개서 승인제 모달 ───────────────────────── */
.mdl-bd{ position:fixed; inset:0; z-index:130; background:rgba(10,25,48,.55); backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s; }
body.mdl-on .mdl-bd{ opacity:1; visibility:visible; }
/* ★★2026-08-04 — 2차 요청서 §1 시안 5종 중 **3안(중앙 집중형)** 확정 반영.
   원형 문서 아이콘을 축으로 좌우 대칭. 폭 480 → 520, 카드 안은 중앙 정렬이고
   입력·안내문만 좌측 정렬로 되돌린다(읽고 채우는 영역이라).
   ⛔문구·입력 항목·버튼·완료/오류 처리는 무변경 — 요청서 '공통 유지 요소'. */
.mdl{
  position:fixed; z-index:131; top:50%; left:50%; width:min(520px,calc(100vw - 40px));
  transform:translate(-50%,-46%) scale(.97); opacity:0; visibility:hidden;
  background:#fff; border-radius:20px; padding:38px 34px 32px; text-align:center;
  box-shadow:0 40px 90px -24px rgba(10,28,62,.4);
  transition:opacity .4s var(--ease), transform .5s var(--ease), visibility .4s;
}
body.mdl-on .mdl{ opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); }
/* 원형 문서 아이콘 = 3안의 축 */
.mdl .crest{
  width:66px; height:66px; margin:0 auto; padding:17px;
  border-radius:50%; color:var(--blue);
  background:var(--tint); border:1px solid var(--tint-b,#CFE0FA);
}
.mdl .crest svg{ width:100%; height:100%; }
.mdl .kick{ margin-top:18px; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--blue); background:var(--tint); border-radius:999px; padding:6px 13px; }
.mdl h3{ margin-top:12px; font-size:24px; font-weight:600; letter-spacing:-.025em; color:var(--ink); }
.mdl p.lead{ margin-top:11px; font-size:14px; line-height:1.7; color:var(--g700); max-width:400px; margin-left:auto; margin-right:auto; }
.mdl .fields{ margin-top:24px; display:grid; gap:10px; text-align:left; }
.mdl .row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mdl input, .mdl select{
  width:100%; font-family:inherit; font-size:14.5px; color:var(--ink);
  border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:#fff;
  transition:border-color .25s, box-shadow .25s;
}
.mdl input:focus, .mdl select:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--tint); }
.mdl .note{ margin-top:14px; display:flex; gap:8px; text-align:left; font-size:12.5px; line-height:1.65; color:var(--g500); background:var(--bg2); border-radius:10px; padding:12px 14px; }
.mdl .acts{ margin-top:18px; display:flex; gap:9px; }
/* 대칭을 지키려고 두 버튼을 같은 폭으로 */
.mdl .acts button{ flex:1 1 0; font-family:inherit; font-size:15px; font-weight:600; border-radius:11px; padding:14px; cursor:pointer; transition:background .3s, border-color .3s, color .3s; }
.mdl .b-sub{ background:var(--blue); color:#fff; border:0; }
.mdl .b-sub:hover{ background:var(--blue-d); }
.mdl .b-cancel{ background:#fff; color:var(--g700); border:1px solid var(--line); }
.mdl .b-cancel:hover{ border-color:var(--g500); }
.mdl .done{ display:none; text-align:center; padding:14px 0 6px; }
/* ★완료 화면에는 체크 아이콘이 따로 있으므로 상단 원형 아이콘은 접는다(축이 둘이 되지 않게) */
.mdl.sent .fields, .mdl.sent .note, .mdl.sent .acts, .mdl.sent .lead, .mdl.sent .crest{ display:none; }
.mdl.sent .done{ display:block; }
/* 좁은 화면 — 3안 카드 여백(co-3 과 동일 값) */
@media(max-width:560px){
  .mdl{ padding:30px 22px 26px; }
  .mdl .crest{ width:58px; height:58px; padding:15px; }
  .mdl h3{ font-size:21px; }
}
.mdl .done .ok{ width:54px; height:54px; margin:0 auto; border-radius:50%; background:var(--tint); color:var(--blue); display:flex; align-items:center; justify-content:center; }
.mdl .done .msg{ margin-top:16px; font-size:15px; line-height:1.7; color:var(--g700); }
.mdl .done .msg b{ color:var(--ink); font-weight:600; }
.mdl .done button{ margin-top:20px; font-family:inherit; font-size:14.5px; font-weight:600; color:var(--g700); background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 26px; cursor:pointer; }

/* ── 6. 현재 페이지 표시 ─────────────────────────────── */
.gnb-link.on{ color:var(--blue); font-weight:600; }
.gnb-link.on::after{ transform:scaleX(1); }
.gnb-cta.on{ background:var(--blue); }

/* ── 7. 다크 히어로 대응 (main.html body.mode-a) ──────────
   히어로 A(다크) 위에서는 바가 투명·흰 글씨,
   스크롤(body.scrolled)하거나 드롭다운이 열리면(body.dd-open) 라이트로 되돌아옴 */
.gnb-cta{ transition:background .3s, color .3s, transform .45s var(--ease); }
.burger .ln{ transition:background-position .55s var(--ease), background-image .45s var(--ease); }

body.mode-a:not(.scrolled):not(.dd-open) .gnb{
  background:transparent; backdrop-filter:none; border-bottom-color:transparent;
}
/* ★워드마크는 남색 단색이라 다크 히어로 위에서 안 보인다.
   brightness(0) invert(1) = 전부 흰색 → 공식 흰색 로고(f_logo 의 워드마크부)와 같은 결과.
   마크(아이콘)는 파란 그라데이션이라 그대로 둬야 브랜드 색이 남는다. */
body.mode-a:not(.scrolled):not(.dd-open) .gnb-logo-type{ filter:brightness(0) invert(1); }
/* 포트폴리오 상세도 헤더가 다크다(pd5-page.css 의 body.pd-dark).
   ⛔pd5-page.css 는 생성기 산출물이라 손대면 다음 추출에서 날아간다 → 규칙은 여기에 둔다. */
body.pd-dark .gnb-logo-type{ filter:brightness(0) invert(1); }
body.mode-a:not(.scrolled):not(.dd-open) .gnb-link{ color:rgba(255,255,255,.82); }
body.mode-a:not(.scrolled):not(.dd-open) .gnb-link:hover,
body.mode-a:not(.scrolled):not(.dd-open) .gnb-link.on{ color:#fff; }
body.mode-a:not(.scrolled):not(.dd-open) .gnb-link::after{ background:#fff; }
body.mode-a:not(.scrolled):not(.dd-open) .gnb-ghost{
  background:transparent; border-color:rgba(255,255,255,.34); color:#fff;
}
body.mode-a:not(.scrolled):not(.dd-open) .gnb-ghost:hover{
  background:rgba(255,255,255,.13); border-color:#fff; color:#fff;
}
body.mode-a:not(.scrolled):not(.dd-open) .gnb-ghost .lock{ opacity:.8; }
body.mode-a:not(.scrolled):not(.dd-open) .gnb-cta{ background:#fff; color:var(--navy); }
body.mode-a:not(.scrolled):not(.dd-open) .gnb-cta:hover{ background:var(--blue-l); color:var(--navy); }
/* 햄버거 — 잉크(어두운 줄) 대신 흰 줄, 번짐 원은 반투명 화이트로 */
body.mode-a:not(.scrolled):not(.dd-open) .burger .ln{
  background-image:linear-gradient(90deg,var(--blue-l) 0 50%, #fff 50% 100%);
}
body.mode-a:not(.scrolled):not(.dd-open) .bg-ink .ring{ background:rgba(255,255,255,.18); }

/* ── 8. 반응형 ───────────────────────────────────────── */
@media(max-width:1180px){ .gnb-menu{ gap:24px; } .gnb-ghost{ display:none; } }
@media(max-width:900px){
  .gnb-menu{ display:none; }
  /* ★메뉴가 사라지면 `.gnb-right` 를 오른쪽으로 미는 요소가 없어져 햄버거가
     기준선(컨테이너 우 -45px)보다 6.5px 안쪽에 떨어진다(390 실측 338.5 / 기준 345).
     ⛔데스크톱에도 `margin-left:auto` 를 주면 `.gnb-menu` 의 auto 와 여백을 나눠 가져
       메뉴 위치가 밀린다 → 메뉴가 숨는 이 구간에서만 준다. */
  .gnb-right{ margin-left:auto; }
}

/* ══════════════════════════════════════════════════════════════════════
   9. 전체 메뉴 오버레이 — 확정본 PN2 (2026-08-03 병합)

   원본 = hb-pn2.html + hb-common.css(오버레이 파트만).
   ⛔hb-common.css 는 시안 5안(hb-1~5·hb-r*·hb-pn*)이 공유하므로 손대지 않고
     필요한 규칙만 여기로 복사해 왔다. 두 파일이 같이 로드되는 페이지는
     시안 페이지뿐이고, 값이 동일해서 충돌하지 않는다.

   좌우 기준선(★근거 = 메모리 clapleave-ux-common-grid-motion)
     좌 = 로고 좌측 시작점   = 컨테이너 좌 + 32px (--ux-padL)
     우 = 햄버거 3선 우측 끝 = 컨테이너 우 - 45px (--ux-padR)
   비대칭이 정상이다. `--ux-*` 는 ux-common.css 가 정의하고, 그 파일이 없는
   페이지를 위해 여기서는 var(--ux-max, 1520px) 식 폴백을 함께 쓴다.

   열린 X 를 45px 선에 맞추기
     .burger 52px 정사각 · 3선 26px → 박스 안 좌우 13px 여백
     닫힘: 3선 우측 끝 = 박스우측 + 13 = 컨테이너우 -45px  ← --ux-padR
     열림: 26px 선이 45° 회전 → 획 끝이 박스우측에서 16.1px 안쪽
           (회전 후 반폭 = (26·cos45 + 2·sin45)/2 = 9.9 → 26 - 9.9 = 16.1)
     그대로면 48.1px 라 3.1px 어긋나므로 열렸을 때만 3.1px 우로 민다.
   ══════════════════════════════════════════════════════════════════════ */

/* ── ① 햄버거 3선 → X ────────────────────────────────
   ★함정: .burger 안에는 .ln 3개 앞에 .ring span 이 하나 더 있다.
   :nth-of-type 은 태그 순번이라 .ln:nth-of-type(1) 이 .ring 을 가리켜
   아무것도 안 걸린다 → 뒤에서 세는 :nth-last-of-type 을 쓴다.
   이동량 8px = .burger gap 6px + 선 두께 2px */
body.ovl-on .burger .ln:nth-last-of-type(3){ transform:translateY(8px) rotate(45deg); }
body.ovl-on .burger .ln:nth-last-of-type(2){ opacity:0; }
body.ovl-on .burger .ln:nth-last-of-type(1){ transform:translateY(-8px) rotate(-45deg); }
body.ovl-on .burger .ln{
  background:#fff !important; background-image:none !important;
  transition:transform .3s ease, opacity .3s ease, background-color .3s ease;
}
body.ovl-on .burger .ring{ opacity:0 !important; }
.burger{ z-index:140; }             /* 오버레이(z 120) 위로 — 닫기 버튼 역할 겸함 */
.burger .ln{ transform-origin:center; }

/* ── ② 열림 시 로고·GNB·CTA 숨김 ─────────────────────
   ★.gnb 는 z-index:90 이라 오버레이(120) 아래에 깔린다. .burger 에 z-index 를
   줘도 .gnb 스택 컨텍스트 안이라 소용없으므로 열린 동안 바 자체를 올린다. */
body.ovl-on .gnb{
  z-index:140 !important;
  background:transparent !important; border-color:transparent !important;
  box-shadow:none !important; backdrop-filter:none !important;
}
body.ovl-on .gnb-logo,
body.ovl-on .gnb-menu,
body.ovl-on .gnb-ghost,
body.ovl-on .gnb-cta{ opacity:0; pointer-events:none; visibility:hidden; transition:opacity .25s ease; }

@media(min-width:1081px){
  .burger{ transition:transform .5s var(--ease); }
  body.ovl-on .burger{ transform:translateX(3.1px); }
}

/* ── ③ 원형 clip-path 확산 (진원지 = 햄버거 좌표, navbar.js 가 --x/--y 주입) ── */
.hb-ovl{
  position:fixed; inset:0; z-index:120; overflow:hidden;
  --x:100%; --y:0%;
  clip-path:circle(0px at var(--x) var(--y));
  pointer-events:none;
  transition:clip-path .8s cubic-bezier(.16,1,.3,1);
}
body.ovl-on .hb-ovl{ clip-path:circle(150% at var(--x) var(--y)); pointer-events:all; }
body.ovl-on{ overflow:hidden; }

/* ── ④ 항목 stagger · 지연 페이드 ───────────────────── */
.hb-item{ opacity:0; transition:opacity .45s ease; }
body.ovl-on .hb-item{ opacity:1; }
body.ovl-on .hb-item:nth-child(1){ transition-delay:.10s; }
body.ovl-on .hb-item:nth-child(2){ transition-delay:.20s; }
body.ovl-on .hb-item:nth-child(3){ transition-delay:.30s; }
body.ovl-on .hb-item:nth-child(4){ transition-delay:.40s; }
body.ovl-on .hb-item:nth-child(5){ transition-delay:.50s; }
body.ovl-on .hb-item:nth-child(6){ transition-delay:.60s; }
.hb-fade{ opacity:0; transition:opacity .6s ease .5s; }
body.ovl-on .hb-fade{ opacity:1; }

/* ── ⑤ hover-dot + 텍스트 슬라이드 ──────────────────── */
.hb-dot{
  width:10px; height:10px; border-radius:50%; background:#38bdf8;
  opacity:0; transform:translateX(-10px) scale(0); flex-shrink:0;
  transition:all .3s cubic-bezier(.175,.885,.32,1.275);
}
.hb-tx{ transition:transform .3s ease, color .3s ease; display:inline-block; }
@media (hover:hover){
  .hb-link:hover .hb-dot{ opacity:1; transform:translateX(0) scale(1); }
  .hb-link:hover .hb-tx{ transform:translateX(12px); color:#bae6fd; }
}

/* ── ⑥ 하위 아코디언 ────────────────────────────────── */
.hb-sub{
  overflow:hidden; max-height:0; opacity:0;
  transition:max-height .35s cubic-bezier(.16,1,.3,1), opacity .3s ease, padding .35s cubic-bezier(.16,1,.3,1);
}
.hb-exp > .hb-sub{ max-height:260px; opacity:1; }

/* ── ⑦ PN2 레이아웃 ─────────────────────────────────── */
.r1-ovl{
  --o-bg:linear-gradient(118deg,#08152B 0%,#0C2247 46%,#123064 100%);
  --o-tx:#FFFFFF;
  --o-tx2:rgba(196,214,244,.62);
  --o-tx3:rgba(178,200,236,.34);
  --o-line:rgba(255,255,255,.10);
  --o-card:rgba(255,255,255,.045);
  --o-cardb:rgba(255,255,255,.11);
  --o-acc:#4DA2FF;
  /* ★★2026-08-07 6차 — 견적계산기·상담문의·셀프진단과 같은 좌 패널 기준선으로 통일.
     구값 = 416 / 72 / 20 (이 화면만 쓰던 자체 토큰) → ux-common.css 의 --panel-* 을 그대로 본다.
     ⛔fallback 을 지우지 말 것 — ux-common.css 를 직접 링크하지 않는 페이지가 절반이라
       (hx-boot.js 가 뒤늦게 주입한다) 토큰이 비는 순간이 있다. 값은 :root 기본값과 같다.
     환산: 텍스트 시작 = --panel-pad-l · 글자폭 416 고정 · 좌우 여백은 pad-l/pad-r 이 정한다.
       1520 이하 = 16/416/44(패널 476) · .ux-wide 1760 이상 = 120/416/120(패널 656) */
  --pn2-side:calc(var(--ux-panel-text-w, 416px) + var(--panel-pad-l, 16px) + var(--panel-pad-r, 44px));
  --pn2-gap:var(--panel-gap, 80px);   /* 좌 패널 배경 우측 끝 ↔ 우 콘텐츠 첫 글자 */
  --pn2-padL:var(--panel-pad-l, 16px);/* 좌 패널 텍스트 시작선 = 네 화면 공통 */
  background:var(--o-bg); color:var(--o-tx);
}
/* ★ .gnb-in 과 같은 1520px 트랙. 이게 좌우 기준선의 뿌리다. */
.r1-in{ width:100%; max-width:var(--ux-max,1520px); margin-inline:auto; height:100%; display:grid; grid-template-columns:var(--pn2-side) minmax(0,1fr); box-sizing:border-box; overflow:hidden; }
/* ⛔padding 단축 지정 금지 — 좌우가 지워지면 기준선이 무너진다 */
.r1-side{
  display:flex; flex-direction:column;
  padding-top:100px; padding-bottom:32px;
  padding-left:var(--pn2-padL);
  padding-right:var(--panel-pad-r, 44px);  /* ★좌우 대칭 규칙(구 40px 고정) */
  border-right:1px solid var(--o-line); overflow-y:auto; box-sizing:border-box; word-break:keep-all;
}
.r1-lb{ font-size:12px; font-weight:600; letter-spacing:.22em; color:var(--o-tx3); }
.r1-nav{ display:flex; flex-direction:column; margin-top:24px; }
.r1-link{ display:flex; align-items:center; gap:14px; padding:10px 0; width:100%; text-align:left; background:none; border:0; cursor:pointer; font-family:inherit; color:inherit; }
.r1-num{ font-size:13.5px; font-weight:400; letter-spacing:.06em; color:var(--o-tx3); width:24px; flex-shrink:0; }
/* ★2026-08-10 폰트 확대 26 → 33px. 최장 항목 "서비스 소개"(6자)가
   좌 패널 텍스트 폭(416px) 안에 여유롭게 들어간다. */
.r1-tx{ font-size:33px; font-weight:600; letter-spacing:-.02em; color:var(--o-tx); line-height:1.24; }
.r1-link.on .r1-tx{ color:var(--o-acc); }
.r1-tag{ display:inline-block; margin-left:9px; font-size:10.5px; font-weight:700; color:#fff; padding:2px 8px; border-radius:999px; letter-spacing:.04em; vertical-align:3px; }
.r1-tag.new{ background:var(--blue); } .r1-tag.hot{ background:#E8503A; }
.r1-ch{ font-size:.62em; color:var(--o-tx3); margin-left:8px; display:inline-block; transition:transform .4s var(--ease); }
.hb-exp .r1-ch{ transform:rotate(90deg); }
.r1-subs{ display:flex; flex-direction:column; gap:7px; padding-left:38px; }
.hb-exp > .r1-subs{ padding:2px 0 12px 38px; }
.r1-subs a{ font-size:15.5px; color:var(--o-tx2); transition:color .25s; }
.r1-subs a:hover{ color:var(--o-tx); }

/* 좌 CTA(연락처) 3종 — 유리 샤인은 .ux-shine 한 곳만 쓴다(::before 다툼 방지) */
.r1-ccs{ margin-top:auto; padding-top:30px; display:flex; flex-direction:column; gap:9px; }
.r1-cc{
  display:flex; align-items:center; gap:13px;
  padding:12px 17px 13px; border-radius:12px;
  background:var(--o-card); border:1px solid var(--o-cardb);
  transition:border-color .3s, background-color .3s;
}
.r1-cc:hover{ border-color:var(--o-acc); background:rgba(77,162,255,.09); }
.r1-cc .ic{
  width:38px; height:38px; flex-shrink:0; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(77,162,255,.14); border:1px solid rgba(77,162,255,.26);
  color:#8CC8FF; transition:color .3s, background-color .3s, border-color .3s;
}
.r1-cc:hover .ic{ color:#CFE6FF; background:rgba(77,162,255,.24); border-color:rgba(77,162,255,.5); }
.r1-cc .ic svg{ width:19px; height:19px; display:block; }
.r1-cc .tt{ display:flex; flex-direction:column; min-width:0; }
.r1-cc .kk{ display:block; font-size:11px; font-weight:600; letter-spacing:.16em; color:var(--o-tx3); }
.r1-cc .vv{ display:block; margin-top:3px; font-size:17px; font-weight:600; color:var(--o-tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.r1-foot{ margin-top:22px; font-size:13px; line-height:1.9; color:var(--o-tx3); }

/* 세로가 짧은 화면(1280×800·1440×900 등)에서 좌 패널이 넘치지 않게 여백만 압축.
   ★폰트를 33px 로 키운 뒤 실측한 값이므로 임의로 되돌리지 말 것 */
@media(min-width:1081px) and (max-height:940px){
  .r1-side{ padding-top:94px; padding-bottom:26px; }
  .r1-nav{ margin-top:16px; }
  .r1-link{ padding:7px 0; }
  .r1-tx{ font-size:31px; }
  .r1-ccs{ padding-top:20px; gap:7px; }
  .r1-cc{ padding:9px 15px 10px; gap:11px; }
  .r1-cc .ic{ width:34px; height:34px; border-radius:10px; }
  .r1-cc .ic svg{ width:17px; height:17px; }
  .r1-cc .vv{ font-size:16px; }
  .r1-foot{ margin-top:16px; font-size:12.5px; line-height:1.75; }
}
@media(min-width:1081px) and (max-height:820px){
  .r1-side{ padding-top:86px; }
  .r1-link{ padding:5.5px 0; }
  .r1-tx{ font-size:29px; }
  .r1-subs{ gap:5px; }
  .hb-exp > .r1-subs{ padding-bottom:8px; }
  .r1-ccs{ padding-top:14px; }
  .r1-foot{ margin-top:12px; line-height:1.7; }
}
@media(max-width:1240px) and (min-width:1081px){
  .r1-ovl{ --pn2-side:392px; --pn2-gap:52px; }
  .r1-side{ padding-right:28px; }
}
@media(max-width:1080px){
  .r1-in{ max-width:none; grid-template-columns:1fr; grid-template-rows:auto auto; overflow-y:auto; }
  .r1-side{
    border-right:0; border-bottom:1px solid var(--o-line); overflow:visible;
    padding-top:96px; padding-bottom:26px;
    padding-left:var(--ux-padL,32px); padding-right:var(--ux-padR,45px);
  }
  .r1-tx{ font-size:29px; }
  .r1-ccs{ margin-top:28px; padding-top:0; }
}

/* ── ⑧ 우측 스포트라이트 ────────────────────────────── */
.p2-main{
  display:flex; flex-direction:column;
  padding-top:100px; padding-bottom:46px;
  padding-left:var(--pn2-gap);
  padding-right:var(--ux-padR,45px);     /* = 햄버거 우측 끝점 */
  overflow:hidden; box-sizing:border-box; word-break:keep-all;
}
.p2-top{ display:flex; align-items:baseline; gap:20px; }
.p2-top .lb{ font-size:12px; font-weight:600; letter-spacing:.22em; color:var(--o-tx3); }
.p2-stage{ margin-top:26px; flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:36px; align-items:center; }
.p2-vis{ position:relative; border-radius:20px; overflow:hidden; aspect-ratio:4/3; max-height:100%; box-shadow:0 30px 60px -30px rgba(0,0,0,.6); }
.p2-vis .no{ position:absolute; left:26px; bottom:16px; font-size:72px; font-weight:600; letter-spacing:-.05em; color:rgba(255,255,255,.26); line-height:1; }
.p2-vis .yr{ position:absolute; right:22px; top:20px; font-size:11px; letter-spacing:.16em; color:rgba(255,255,255,.55); }
.p2-tx .ct{ display:inline-block; padding:5px 13px; border-radius:999px; background:rgba(77,162,255,.16); border:1px solid rgba(77,162,255,.35); color:var(--o-acc); font-size:13px; font-weight:600; }
.p2-tx h3{ margin-top:16px; font-size:30px; font-weight:600; line-height:1.42; letter-spacing:-.028em; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.p2-tx .sm{ margin-top:15px; font-size:15px; line-height:1.82; color:var(--o-tx2); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.p2-meta{ margin-top:18px; display:flex; gap:8px; flex-wrap:wrap; }
.p2-meta span{ font-size:13px; padding:5px 12px; border-radius:8px; background:var(--o-card); border:1px solid var(--o-cardb); color:var(--o-tx2); }
/* 밑줄은 좌→우로(.ux-ul), 화살표는 1~2회만(.ux-ar) — ux-common 규약 */
.p2-go{ margin-top:24px; display:inline-flex; align-items:center; gap:9px; font-size:16px; font-weight:600; color:var(--o-acc); }
.p2-go .ux-ar svg{ width:17px; height:17px; display:block; }
.p2-fade{ animation:p2in .55s var(--ease) both; }
@keyframes p2in{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
.p2-bar{ margin-top:26px; display:flex; align-items:center; gap:20px; }
.p2-dots{ display:flex; gap:7px; }
.p2-dots b{ width:7px; height:7px; border-radius:999px; background:rgba(255,255,255,.22); cursor:pointer; transition:width .4s var(--ease), background .3s; }
.p2-dots b.on{ width:26px; background:var(--o-acc); }
.p2-prog{ flex:1; height:1px; background:var(--o-line); position:relative; overflow:hidden; }
.p2-prog i{ position:absolute; left:0; top:0; bottom:0; background:var(--o-acc); width:0; }
.p2-prog i.run{ animation:p2p 5s linear forwards; }
@keyframes p2p{ from{width:0} to{width:100%} }
.p2-ar{ display:flex; gap:8px; }
.p2-ar button{ width:34px; height:34px; border-radius:999px; border:1px solid var(--o-cardb); background:var(--o-card); color:var(--o-tx2); cursor:pointer; font-size:14px; font-family:inherit; transition:border-color .3s, color .3s; }
.p2-ar button:hover{ border-color:var(--o-acc); color:var(--o-acc); }
@media(max-width:1080px){
  .p2-main{ padding-top:26px; padding-bottom:34px; padding-left:var(--ux-padL,32px); padding-right:var(--ux-padR,45px); }
  .p2-stage{ grid-template-columns:1fr; gap:20px; margin-top:18px; }
  .p2-vis{ aspect-ratio:16/9; } .p2-vis .no{ font-size:48px; }
  .p2-tx h3{ font-size:20px; } .p2-tx .sm{ -webkit-line-clamp:2; }
}

@media (prefers-reduced-motion:reduce){
  .hb-ovl, .hb-item, .hb-fade, .hb-dot, .hb-tx, .hb-sub, .burger .ln{
    transition:none !important; animation:none !important;
  }
  .p2-fade{ animation:none !important; }
  .p2-prog i.run{ animation:none !important; width:100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   §10. 메뉴 호버 — 코드가 조합되어 워딩이 되는 모션 (2026-08-07 확정)

   사장님 지시 = "메뉴에 마우스를 올리면 강조색+밑줄 모션은 좋은데, 거기에
   **여러 코드가 조합되어 해당 워딩으로 변환되는** 느낌도 냈으면 좋겠다."
   시안 5안(nvh-1~5) 중 **NVH-2 · 터미널 타이핑** 확정.

   ⛔`nvh-core.css` 는 시안 5안이 공유하는 파일이라 손대지 않았다.
     여기에는 확정안(터미널)에 필요한 규칙만 복사해 뒀다.
   ★기존 호버(색 전환 + 밑줄 scaleX)는 위 §1 그대로 살아 있다. 글자만 얹은 것.
   ══════════════════════════════════════════════════════════════════════ */

/* ★.gnb-link 는 flex + gap:5px 다. 글자를 이 래퍼로 묶어 **아이템 1개**로 유지한다
   (안 묶으면 글자마다 gap 이 붙어 "서 비 스 소 개"처럼 자간이 터진다). */
.nvh-w{ display:inline-block; white-space:pre; }

/* 글자 한 칸 — 폭은 navbar.js 가 실측해서 인라인으로 박는다(레이아웃 불변).
   한글(전각)과 16진수(반각)는 폭이 달라, 안 고정하면 메뉴가 좌우로 출렁인다. */
.nvh-c{
  display:inline-block;
  font-style:normal;
  text-align:center;
  vertical-align:baseline;
  white-space:pre;
}

/* 지금 찍히는 칸 — 등폭 글꼴 + 아래 커서 깜빡임 */
.nvh-c.nvh-cur{
  position:relative;
  color:var(--blue-l);
  font-family:'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
}
.nvh-c.nvh-cur::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--blue-l);
  animation:nvhBlink .18s steps(2,end) infinite;
}
@keyframes nvhBlink{ 50%{ opacity:.2; } }

@media(prefers-reduced-motion:reduce){
  .nvh-c.nvh-cur::after{ animation:none; }
}