/* viewringer 공통 상단 메뉴 (2026-11-12) — 모든 페이지 동일. 기존 페이지 헤더는 숨기고 이 메뉴 하나로 통일 */
.vr-gnav{--g-bg:#0C0B0A;--g-line:#2B2722;--g-ink:#EFEAE2;--g-muted:#A39B90;--g-gold:#C9A86A;--g-gold-ink:#16120B;
  position:sticky;top:env(safe-area-inset-top,0px);z-index:1000;background:rgba(12,11,10,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--g-line);
  font-family:"Pretendard","IBM Plex Sans KR",system-ui,-apple-system,"Malgun Gothic",sans-serif;color:var(--g-ink);line-height:1.4}
.vr-gnav *{box-sizing:border-box}
.vr-gnav-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:22px;height:62px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.vr-logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--g-ink);text-decoration:none;white-space:nowrap}
.vr-logo i{width:8px;height:8px;border-radius:50%;background:var(--g-gold);box-shadow:0 0 0 4px rgba(201,168,106,.18)}
.vr-links{display:flex;gap:4px;flex:1;min-width:0}
.vr-links a{position:relative;padding:8px 12px;border-radius:8px;font-size:15px;font-weight:500;color:var(--g-muted);text-decoration:none;white-space:nowrap}
.vr-links a:hover{color:var(--g-ink);background:rgba(255,255,255,.04)}
.vr-links a[aria-current="page"]{color:var(--g-ink);font-weight:700}
.vr-links a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:2px;background:var(--g-gold)}
.vr-links a .vr-new{display:inline-block;margin-left:5px;padding:1px 5px;border-radius:4px;background:var(--g-gold);color:var(--g-gold-ink);font-size:10px;font-weight:800;vertical-align:2px}
.vr-act{display:flex;gap:8px;align-items:center}
.vr-act a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}
.vr-kakao{border:1px solid var(--g-line);color:var(--g-ink)}
.vr-kakao:hover{border-color:var(--g-gold)}
.vr-cta{background:var(--g-gold);color:var(--g-gold-ink)}
.vr-gnav a:focus-visible{outline:2px solid var(--g-gold);outline-offset:2px}
@media (max-width:960px){
  .vr-gnav-in{flex-wrap:wrap;height:auto;padding-top:10px;gap:8px 12px}
  .vr-logo{flex:1}
  .vr-kakao{display:none!important}
  .vr-links{order:3;flex:0 0 100%;overflow-x:auto;scrollbar-width:none;margin:0 -8px;padding-bottom:6px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .vr-links::-webkit-scrollbar{display:none}
  .vr-links a{font-size:14px;padding:7px 10px}
}
/* 이벤트 띠 */
.vr-promo{display:block;background:#C9A86A;color:#16120B;text-decoration:none;font-family:"Pretendard","IBM Plex Sans KR",system-ui,"Malgun Gothic",sans-serif;font-size:14px;line-height:1.4}
.vr-promo-in{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;padding:9px max(20px,env(safe-area-inset-right,0px)) 9px max(20px,env(safe-area-inset-left,0px));text-align:center}
.vr-promo b{font-weight:800}
.vr-promo .bar{display:inline-block;width:90px;height:6px;border-radius:6px;background:rgba(22,18,11,.2);overflow:hidden;vertical-align:middle}
.vr-promo .bar i{display:block;height:100%;background:#16120B;border-radius:6px}
.vr-promo .go{font-weight:800;text-decoration:underline;text-underline-offset:3px}
/* 기존 페이지별 헤더는 숨김 (스크립트가 참조할 수 있어 지우지 않고 감춤) */
body.vr-has-gnav > header.nav,
body.vr-has-gnav > header.masthead,
body.vr-has-gnav header.vrs-header{display:none!important}
/* 페이지 안 이동 칩 (포트폴리오·스킬팩 등) */
.vr-sub{background:#141210;border-bottom:1px solid #2B2722;font-family:"Pretendard","IBM Plex Sans KR",system-ui,"Malgun Gothic",sans-serif}
.vr-sub-in{max-width:1180px;margin:0 auto;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:10px max(20px,env(safe-area-inset-right,0px)) 10px max(20px,env(safe-area-inset-left,0px))}
.vr-sub-in::-webkit-scrollbar{display:none}
.vr-sub span{color:#776F65;font-size:13px;white-space:nowrap;align-self:center;margin-right:4px}
.vr-sub a{white-space:nowrap;font-size:13.5px;color:#D9D2C7;text-decoration:none;border:1px solid #2B2722;border-radius:999px;padding:5px 12px}
.vr-sub a:hover{border-color:#C9A86A;color:#fff}
/* 메인 '어디로 가시겠어요?' 안내 카드 */
.vr-route{padding-block:clamp(56px,8vw,96px);border-top:1px solid #2B2722}
.vr-route-grid{margin-top:36px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.vr-rc{position:relative;display:grid;gap:8px;align-content:start;padding:24px 22px 22px;border:1px solid #2B2722;border-radius:14px;background:#141210;text-decoration:none;color:#EFEAE2;transition:border-color .2s,transform .2s}
.vr-rc:hover{border-color:#C9A86A;transform:translateY(-2px)}
.vr-rc .who{font-size:13px;color:#A39B90}
.vr-rc .what{font-size:19px;font-weight:700;line-height:1.35}
.vr-rc .go{margin-top:6px;font-size:14px;font-weight:700;color:#C9A86A}
.vr-rc .tag{position:absolute;top:14px;right:14px;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;background:#C9A86A;color:#16120B}
.vr-rc.hot{border-color:#C9A86A;background:linear-gradient(160deg,rgba(201,168,106,.12),#141210 60%)}
@media (max-width:900px){.vr-route-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.vr-route-grid{grid-template-columns:1fr}}