* { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: var(--font-sans);
    background: var(--c-bg);
    color: var(--c-fg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background .25s ease, color .25s ease;
  }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; }
  img { display: block; max-width: 100%; }
  ::selection { background: var(--c-yellow); color: #000; }

  @media (max-width: 880px) {
    /* hide wordmark in compact header */
    header .logo-wordmark { display: none; }
  }

  /* utility */
  .container-fluid { width: 100%; }
  .container-narrow {
    width: 100%;
    max-width: var(--w-content);
    margin: 0 auto;
    padding: 0 24px;
  }

  .eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-fg-3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .eyebrow::before {
    content: "";
    width: 22px; height: 1px;
    background: currentColor;
    display: inline-block;
  }
  .section-title {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: clamp(28px, 4vw, 44px);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 12px 0 0;
    color: var(--c-fg);
  }
  .section-sub {
    font-size: 15px;
    color: var(--c-fg-2);
    margin-top: 12px;
    line-height: 1.6;
  }

  .section {
    padding: 96px 0;
  }
  .section--narrow > .container-narrow { }
  @media (max-width: 720px) {
    .section { padding: 64px 0; }
    .logo-wordmark { display: none !important; }
  }

  /* keep page from horizontal scroll bleed */
  body { overflow-x: hidden; }

:where(#activity).az { --maxw: 1240px; --mono: ui-monospace, 'SFMono-Regular', Menlo, monospace; --pre: 'Pretendard','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR', system-ui, sans-serif; }
/* ===== 액티비티 소개 (존 블록 세로 스택 + 존별 어트랙션 가로 슬라이드) ===== */
.az{ position:relative; padding:96px 0 104px; background:#fff; }

.az__bg{ display:none; }

.az::before{ display:none; }

.az__wrap{ max-width:var(--maxw); margin:0 auto; padding:0 40px; }

.az__eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:#6b6b63; }

.az__title{ margin-top:12px; font-family:var(--pre); font-weight:800; font-size:clamp(28px,4vw,46px); letter-spacing:-.035em; line-height:1.08; }

.zb{ margin-top:54px; }

.zb__head{ margin-bottom:18px; }

.zb__tag{ display:inline-block; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:#14161b; background:var(--zc); border-radius:999px; padding:5px 12px; }

.zb__name{ margin-top:11px; font-family:var(--pre); font-weight:800; font-size:clamp(22px,2.6vw,30px); letter-spacing:-.03em; }

.zb__desc{ margin-top:5px; font-size:14.5px; color:#55554e; }

.rail{ display:flex; gap:0; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-left:20px; scroll-behavior:smooth; padding:28px 40px 70px 20px; margin-bottom:-22px; scrollbar-width:none; touch-action:pan-x pan-y; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; cursor:grab; }
.rail:active{ cursor:grabbing; }

.rail::-webkit-scrollbar{ display:none; }

.az__hint{ margin-top:8px; font-family:var(--pre); font-size:13px; font-weight:600; color:#7b7b72; }

.atr{ position:relative; flex:0 0 calc(100% / 2.5); aspect-ratio:4/3; border-radius:16px; overflow:hidden; scroll-snap-align:start; background:linear-gradient(160deg, var(--zc), color-mix(in srgb, var(--zc) 45%, #0b0b14)); box-shadow:0 18px 32px -12px rgba(3,40,80,.28), 0 6px 14px -8px rgba(3,40,80,.18); transition:transform .3s var(--ease), box-shadow .3s ease; }

.atr:hover{ transform:translateY(-5px); box-shadow:0 24px 38px -14px rgba(3,40,80,.36), 0 10px 18px -8px rgba(3,40,80,.22); }

.atr__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }

.atr::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,.05) 0%, transparent 30%, transparent 55%, rgba(0,0,0,.62)); }

.atr__tag{ position:absolute; z-index:2; top:14px; left:14px; font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.06em; color:#14161b; background:var(--zc); border-radius:999px; padding:4px 10px; }

.atr__req{ position:absolute; z-index:2; top:13px; right:13px; display:flex; flex-direction:column; gap:6px; align-items:flex-end; }

.atr__req span{ font-family:var(--pre); font-weight:700; font-size:12px; color:#1a1c22; border-radius:999px; padding:4px 11px; box-shadow:0 2px 6px rgba(0,0,0,.18); }

.atr__age{ background:#ffd84d; }

.atr__ht{ background:#8fe3ff; }

.atr__bar{ position:absolute; z-index:2; left:18px; bottom:60px; width:46px; height:5px; border-radius:3px; background:var(--zc); }

.atr__name{ position:absolute; z-index:2; left:18px; bottom:20px; right:18px; font-family:var(--pre); font-weight:800; font-size:22px; letter-spacing:-.02em; color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.5); }

.atr--empty{ background:#edece7; border:2px dashed #cdcbc3; box-shadow:none; display:flex; align-items:center; justify-content:center; }

.atr--empty::after{ display:none; }

.atr--empty:hover{ transform:none; box-shadow:none; }

.atr--empty .ph{ font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:#a9a69d; }

@media (max-width:860px){
  .az{ padding:60px 0 64px; }
  .atr{ flex-basis:80%; }
}

.mock__fore .ph{ width:46px; height:40px; border-radius:8px; background:linear-gradient(135deg,#8fae6a,#3c5a2a); flex:0 0 auto; }

/* === 가운데 정렬 추가 === */
.az__eyebrow, .az__title { text-align: center; }
.az__title { margin-left: auto; margin-right: auto; }
.zb__head { text-align: center; }
.zb__head .zb__tag { display: inline-block; }
.zb__head .zb__name, .zb__head .zb__desc { display: block; }
.az__hint { text-align: center; }
.rail { justify-content: flex-start; }  /* 모든 존 카드 시작점 통일(왼쪽). center는 오버플로 스크롤서 좌측 잘림 버그 */

/* ============================================================
   Figma redesign — Header (njhdr), Hero (njh), Events (nje)
   Reference frame: 1920 × (header 100 + hero 1421 + events 830)
   ALL VALUES EXTRACTED FROM FIGMA via get_design_context
   ============================================================ */

/* 토큰은 assets/css/tokens.css 로 통합 (--pre, --mono, --nj 계열, --nj-w, --u 포함) */

/* ---------- Header (Figma 22:7, 1920 × 100) ---------- */
.njhdr{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:calc(100 * var(--u)); min-height:64px;
  background:transparent;
  font-family:var(--pre); color:#ffffff;
  transition:background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.njhdr.is-scrolled{
  background:rgba(255,255,255,.65);
  -webkit-backdrop-filter:saturate(160%) blur(18px); backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid rgba(20,20,30,.05);
  color:#14161b;
}
.njhdr__row{
  height:100%; width:100%; max-width:1920px; margin:0 auto;
  display:flex; align-items:center;
  padding:0 calc(140 * var(--u));
  gap:calc(36 * var(--u));
}
.njhdr__brand{ flex:none; display:flex; align-items:center; }
.njhdr__brand img{ height:calc(55 * var(--u)); min-height:34px; width:auto; display:block; transition:filter .3s ease; }
.njhdr:not(.is-scrolled) .njhdr__brand img{ filter:drop-shadow(0 2px 10px rgba(0,0,0,.45)); }
.njhdr__nav{ display:flex; align-items:center; gap:calc(28 * var(--u)); margin-left:calc(40 * var(--u)); }
.njhdr__nav button,
.njhdr__nav .njhdr__nav-link{
  font-family:var(--pre); font-size:calc(16 * var(--u)); font-weight:500; color:inherit;
  background:none; border:0; padding:6px 4px; cursor:pointer; letter-spacing:-.01em; transition:color .2s;
  text-decoration:none;
}
.njhdr:not(.is-scrolled) .njhdr__nav button,
.njhdr:not(.is-scrolled) .njhdr__nav .njhdr__nav-link{ text-shadow:0 1px 6px rgba(0,0,0,.45); }
.njhdr__nav button:hover,
.njhdr__nav .njhdr__nav-link:hover{ color:var(--nj-pink); }
.njhdr__util{ margin-left:auto; display:flex; align-items:center; gap:calc(18 * var(--u)); }
.njhdr__icon{ width:calc(40 * var(--u)); height:calc(40 * var(--u)); border-radius:50%; border:0; background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; color:inherit; transition:background-color .2s; }
.njhdr__icon:hover{ background:rgba(20,20,30,.06); }
.njhdr:not(.is-scrolled) .njhdr__icon:hover{ background:rgba(255,255,255,.14); }
.njhdr__icon svg{ width:calc(20 * var(--u)); height:calc(20 * var(--u)); }
.njhdr__link{ font-family:var(--pre); font-size:calc(14 * var(--u)); font-weight:500; color:inherit; letter-spacing:-.01em;
  text-decoration:none; padding:6px 4px; transition:color .2s; white-space:nowrap; }
.njhdr:not(.is-scrolled) .njhdr__link{ text-shadow:0 1px 6px rgba(0,0,0,.45); }
.njhdr__link:hover{ color:var(--nj-pink); }
.njhdr__cta{ margin-left:calc(6 * var(--u)); display:inline-flex; align-items:center; gap:calc(10 * var(--u));
  padding:calc(11 * var(--u)) calc(22 * var(--u)); border-radius:999px;
  background:linear-gradient(135deg,#f7b924 0%,#e92285 100%); color:#fff;
  font-family:var(--pre); font-weight:700; font-size:calc(15 * var(--u)); letter-spacing:-.01em;
  text-decoration:none; transition:filter .2s, transform .15s; box-shadow:0 8px 20px rgba(233,34,133,.32); white-space:nowrap; }
.njhdr__cta svg{ width:calc(18 * var(--u)); height:calc(18 * var(--u)); }
.njhdr__cta:hover{ filter:brightness(1.05); }
.njhdr__cta:active{ transform:translateY(1px); }
/* navbar 검색 입력창 (흰색) */
.njhdr__search{
  display:flex; align-items:center; gap:calc(8 * var(--u));
  height:calc(42 * var(--u)); min-height:38px;
  width:calc(260 * var(--u)); max-width:30vw;
  padding:0 calc(16 * var(--u)); border-radius:999px;
  background:#fff; border:1px solid var(--c-line);
  box-shadow:0 6px 18px -10px rgba(0,0,0,.28);
}
.njhdr__search-ic{ width:calc(18 * var(--u)); height:calc(18 * var(--u)); color:var(--c-fg-3); flex:none; }
.njhdr__search-in{
  flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent;
  font-family:var(--pre); font-size:calc(14 * var(--u)); color:var(--c-fg); letter-spacing:-.01em;
}
.njhdr__search-in::placeholder{ color:var(--c-fg-3); }
@media (max-width:980px){ .njhdr__search{ display:none; } }
@media (max-width:980px){
  .njhdr__nav{ display:none; }
  .njhdr__link{ display:none; }
}

/* ---------- Hero (Figma 21:48, 1920 × 1421) ---------- */
.njh{ position:relative; width:100%; overflow:hidden; font-family:var(--pre); color:#fff; }
.njh__media{ position:relative; width:100%; aspect-ratio:1920/1180; min-height:600px; overflow:hidden;
  background:radial-gradient(60% 80% at 50% 50%, #0b0e16, #05060a); }
.njh__slide{ position:absolute; inset:0; opacity:0; transition:opacity .8s cubic-bezier(.22,1,.36,1); }
.njh__slide.is-active{ opacity:1; }
.njh__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.njh__media::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.05) 30%, rgba(0,0,0,.05) 70%, rgba(0,0,0,.20) 100%); }
.njh__hline{ display:none; }
.njh__hline--top{ top:7.04%; }
/* Figma Line group 2 (21:80): square 1921.2×1921.2 at top=301.8/1421 = 21.24%,
   containing two diagonals (length 2716.989 = √2 × 1921.2, rotated 45° and 135°). */
.njh__diag{
  display:none;
  position:absolute; left:50%; transform:translateX(-50%);
  top:21.24%;
  width:calc(1921.2 * var(--u)); height:calc(1921.2 * var(--u));
  pointer-events:none; z-index:2;
  overflow:visible;
}
.njh__diag-line{
  position:absolute; left:50%; top:50%;
  width:calc(2716.989 * var(--u)); height:1px;
  background:rgba(255,255,255,.10);
}
.njh__diag-line--a{ transform:translate(-50%, -50%) rotate(45deg); }
.njh__diag-line--b{ transform:translate(-50%, -50%) rotate(135deg); }
/* GOVERNMENT + EXPERT vector image (Frame 17.png — 1391×350)
   Anchored to hero bottom: image bottom = hero bottom (no overflow into event section) */
.njh__decoImg{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:calc(1391 * var(--u));
  height:calc(350 * var(--u));
  pointer-events:none; z-index:3;
  user-select:none;
  display:block;
}
.njh__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:calc(48 * var(--u)); height:calc(48 * var(--u)); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.32);
  backdrop-filter:blur(6px); cursor:pointer; transition:background-color .25s, transform .15s; }
.njh__nav:hover{ background:rgba(255,255,255,.24); }
.njh__nav:active{ transform:translateY(-50%) scale(.94); }
.njh__nav svg{ width:calc(22 * var(--u)); height:calc(22 * var(--u)); }
.njh__nav--prev{ left:calc(24 * var(--u)); }
.njh__nav--next{ right:calc(24 * var(--u)); }
.njh__ind{ position:absolute; left:0; right:0; top:70.5%; z-index:6; display:flex; gap:calc(8 * var(--u)); justify-content:center; align-items:center; }
.njh__seg{ height:calc(4 * var(--u)); width:calc(16 * var(--u)); padding:0; border:0; border-radius:999px;
  background:rgba(255,255,255,.42); cursor:pointer; transition:width .5s cubic-bezier(.22,1,.36,1), background-color .5s; }
.njh__seg.is-on{ width:calc(46 * var(--u)); background:rgba(255,255,255,.95); }
/* JUMP 띠 배너 (Figma 21:83) — EXACT spec from get_design_context */
.njh__band{
  position:absolute; left:0; right:0; z-index:5;
  top:83.11%; height:10.56%;
  min-height:104px;
  background:rgba(255,255,255,0.3);
  -webkit-backdrop-filter:blur(25px); backdrop-filter:blur(25px);
  box-shadow:0 24px 54px rgba(20,20,45,0.15);
  color:#ffffff;
}
.njh__band-row{
  position:relative; width:100%; max-width:1920px; margin:0 auto; height:100%;
}
/* Emblem (Figma 21:84) — absolute left=140, top=39, 78×72 */
.njh__band-left{
  position:absolute;
  left:calc(140 * var(--u)); top:calc(39 * var(--u));
  width:calc(78 * var(--u)); height:calc(72 * var(--u));
}
.njh__emblem{
  width:100%; height:100%; object-fit:contain; object-position:bottom; display:block;
  /* Figma effect: pure white silhouette */
  filter:brightness(0) invert(1);
  opacity:1;
}
/* JUMP (Figma 21:85) — absolute left=1681, top=46, 99×58 */
.njh__band-right{
  position:absolute;
  left:auto; right:calc(140 * var(--u)); top:calc(46 * var(--u));
  width:calc(99 * var(--u)); height:calc(58 * var(--u));
}
.njh__jump{
  width:100%; height:100%; object-fit:contain; display:block;
  /* Figma effect: slight brightness boost / lighter wash */
  filter:brightness(1.25) saturate(0.85);
  opacity:0.95;
}
/* Text (Figma 21:86) — center-anchored, Pretendard Bold 32px, tracking -0.27, shadow */
.njh__stmt{
  position:absolute;
  left:50%; top:calc(75 * var(--u)); transform:translate(-50%, -50%);
  margin:0;
  font-family:var(--pre); font-weight:700;
  font-size:calc(32 * var(--u));
  color:#ffffff; letter-spacing:-0.27px;
  line-height:27px; line-height:calc(27 * var(--u));
  white-space:nowrap;
  text-shadow:0 4px 4px rgba(0,0,0,0.15);
}
.njh__stmt b{ font-weight:700; }
.njh__sep{ display:inline-block; margin:0 .35em; opacity:.85; }
.njh__cols{ display:none; position:absolute; inset:0; z-index:2; pointer-events:none; }
.njh__col{ position:absolute; top:0; bottom:0; width:1px; background:rgba(255,255,255,.10); }
.njh__col--l{ left:5.21%; }
.njh__col--c{ left:50%; }
.njh__col--r{ left:94.79%; }

/* ============================================================
   Events (Figma 21:90 — 1920 × 830)
   EXACT Figma values from get_design_context
   ============================================================ */
.nje{
  --nje-acc: var(--nj-blue);
  position:relative; overflow:hidden;
  font-family:var(--pre); color:#0b0b0b;
  /* FIGMA: bg-gradient-to-b from-[#037ab8] to-white */
  background:linear-gradient(180deg, #037ab8 0%, #ffffff 100%);
  aspect-ratio:1920/830; min-height:560px;
}
/* Remove the 1px border-top on the next section (originally .section { border-top:1px solid }) */
.nje + section.section,
.nje + .section{ border-top:0 !important; }

/* Horizontal lines (Figma) — only keep the half-width line under heading; remove cards-top and cards-bot */
.nje__hline{ position:absolute; left:0; height:1px; pointer-events:none; z-index:1; }
.nje__hline--head{ top:12.05%; width:50%; background:rgba(255,255,255,.40); }
.nje__hline--cards-top{ display:none; }
.nje__hline--cards-bot{ display:none; }

.nje__wrap{ position:relative; max-width:1920px; margin:0 auto; height:100%; z-index:2; }

/* Heading panel (Figma 21:91 at x=383, y=100, 577×188) — bg rgba(0,0,0,0.2), rounded 22, padding 30 */
.nje__head{
  position:absolute;
  left:19.95%;                          /* 383/1920 */
  top:12.05%;                            /* 100/830 */
  width:30.05%;                          /* 577/1920 */
  height:22.65%;                         /* 188/830 */
  background:rgba(0,0,0,0.2);
  border-radius:calc(22 * var(--u));
  padding:calc(30 * var(--u));
  display:flex; flex-direction:column; align-items:flex-end; justify-content:center;
}
.nje__head-text{ display:flex; flex-direction:column; gap:calc(8 * var(--u)); align-items:flex-end; justify-content:center; width:100%; }
/* "Event" — Pretendard ExtraBold 40px white tracking -2px uppercase */
.nje__eyebrow{
  font-family:var(--pre); font-weight:800;
  font-size:calc(40 * var(--u));
  color:#fff; letter-spacing:-2px; text-transform:uppercase;
  line-height:1; white-space:nowrap;
}
/* Line under (Figma 21:94 full width) */
.nje__head-line{ display:block; width:100%; height:1px; background:#ffffff; }
/* "지금 JUMP에서 열리는 이벤트" — Pretendard Regular 24px white tracking -1px */
.nje__title{
  margin:0; font-family:var(--pre); font-weight:400;
  font-size:calc(24 * var(--u));
  color:#fff; letter-spacing:-1px; line-height:1; white-space:nowrap;
}

/* Prev/next arrows (Figma 21:96 at x=1433, y=102) — bg rgba(255,255,255,0.3), rounded 23 */
.nje__arrows{
  position:absolute;
  left:74.64%;                          /* 1433/1920 */
  top:12.29%;                            /* 102/830 */
  display:flex; gap:calc(10 * var(--u));
}
.nje__arrow{
  width:calc(46 * var(--u)); height:calc(46 * var(--u));
  border-radius:999px;
  border:0; background:rgba(255,255,255,0.3);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  color:#fff;
  transition:background .2s, transform .15s;
}
.nje__arrow:hover{ background:rgba(255,255,255,.55); }
.nje__arrow:active{ transform:scale(.94); }
.nje__arrow svg{ width:calc(20 * var(--u)); height:calc(20 * var(--u)); }

/* Cards viewport — Figma left card at x=383, right at x=960, both top=288
   Together 1151 wide (383 to 1534), so viewport: left 19.95%, width 59.95%, top 34.70%, height 53.13% (288→729) */
.nje__viewport{
  position:absolute;
  left:19.95%; top:34.70%;
  width:59.95%; height:53.13%;
  overflow:hidden;
}
.nje__track{ display:flex; transition:transform .6s cubic-bezier(.22,.61,.36,1); height:100%; }
.nje__slide{ min-width:100%; height:100%; display:grid; grid-template-columns:577fr 574fr; gap:0; align-items:stretch; }

/* Left media card (Figma 21:103 — 577×440, rounded 22px) */
.nje__media{
  position:relative; overflow:hidden;
  height:100%;
  background:linear-gradient(140deg, rgb(10,111,176) 0%, rgb(55,167,224) 60%, rgb(159,214,243) 100%);
  border-radius:calc(22 * var(--u));
}
.nje__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:0; }
.nje__media::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 74%, rgba(0,0,0,.16) 100%); }
.nje__m1, .nje__m2, .nje__m3{ background:none; }

/* Zone pill (Figma 21:110 at left=24, top=24 in 577×440 card)
   bg: rgba(255,255,255,0.5), backdrop-blur 3px, rounded 11px, padding 9px 14px, shadow */
.nje__zone{
  position:absolute; z-index:2;
  left:calc(24 / 577 * 100%); top:calc(24 / 440 * 100%);
  display:inline-flex; align-items:center; gap:calc(9 * var(--u));
  padding:calc(9 * var(--u)) calc(14 * var(--u));
  border-radius:calc(11 * var(--u));
  background:rgba(255,255,255,0.5);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  box-shadow:0 8px 22px rgba(0,0,0,0.14);
}
/* 라이드존 — Pretendard Bold 13px color #1a1c22 */
.nje__zt{ font-family:var(--pre); font-weight:700; font-size:calc(13 * var(--u)); color:#1a1c22; line-height:1.5; }
/* ∙ RIDE — Pretendard Regular 10px white tracking .4px */
.nje__zh{ font-family:var(--pre); font-weight:400; font-size:calc(10 * var(--u)); color:#ffffff; letter-spacing:.4px; line-height:1.5; }

/* "01" counter — anchored to bottom-right with 28px margin, smaller size */
.nje__num{
  position:absolute; z-index:2;
  right:calc(28 / 577 * 100%);
  bottom:calc(28 / 440 * 100%);
  font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  font-weight:900;
  font-style:normal;
  font-size:calc(130 * var(--u));
  line-height:1;
  letter-spacing:-0.05em;
  color:rgba(255,255,255,0.55);
  user-select:none;
  pointer-events:none;
  white-space:nowrap;
  /* Clean italic via skew transform */
  transform:skewX(-7deg);
  transform-origin:right bottom;
}

/* Right info card (Figma 21:115 — 574×441, bg white, rounded 22px) */
.nje__info{
  position:relative;
  background:#ffffff;
  border-radius:calc(22 * var(--u));
  padding:0;          /* children positioned absolutely per Figma pixel coords */
  height:100%;
  min-height:0;
}
/* Pill (Figma 21:116 at top=64, left=70) — bg rgba(3,122,184,0.6), rounded 999, px 13 py 6.5 */
.nje__tag{
  position:absolute;
  left:calc(70 / 574 * 100%); top:calc(64 / 441 * 100%);
  display:inline-flex; align-items:center;
  padding:calc(6.5 * var(--u)) calc(13 * var(--u));
  border-radius:999px;
  background:rgba(3,122,184,0.6);
  font-family:var(--pre); font-weight:700; font-size:calc(12 * var(--u));
  color:#0b0b0b; letter-spacing:-1px; text-transform:uppercase; white-space:nowrap;
  border:0;
}
/* Title (Figma 21:118 at center y=144, left=70) — Pretendard Bold 30px black tracking -1px */
.nje__name{
  position:absolute;
  left:calc(70 / 574 * 100%);
  top:calc(108 / 441 * 100%);  /* center y=144, height ≈ 72; top ≈ 108 */
  margin:0;
  font-family:var(--pre); font-weight:700;
  font-size:calc(30 * var(--u)); color:#000000; letter-spacing:-1px; line-height:1.2;
  white-space:nowrap;
}
.nje__name strong{ font-family:var(--pre); font-weight:900; }
/* Divider (Figma 21:130 at top=197, left=70, w=427) */
.nje__divider{
  position:absolute;
  left:calc(70 / 574 * 100%); top:calc(197 / 441 * 100%);
  width:calc(427 / 574 * 100%); height:1px;
  background:rgba(0,0,0,0.18);
}
/* Description (Figma 21:124 at center y=225, left=70) — Pretendard Regular 15px rgba(0,0,0,0.8) tracking -0.45px */
.nje__desc{
  position:absolute;
  left:calc(70 / 574 * 100%);
  top:calc(210 / 441 * 100%);  /* center y=225, 2 lines */
  margin:0;
  font-family:var(--pre); font-weight:400;
  font-size:calc(15 * var(--u)); color:rgba(0,0,0,0.8); letter-spacing:-0.45px; line-height:1.45;
  white-space:nowrap;
}
/* Period (Figma 21:119 at top=253, left=70) — Pretendard Light 14px rgba(0,0,0,0.8), with cal icon 16x16 */
.nje__period{
  position:absolute;
  left:calc(70 / 574 * 100%); top:calc(253 / 441 * 100%);
  margin:0;
  display:flex; align-items:center; gap:calc(6 * var(--u));
  font-family:var(--pre); font-weight:300;
  font-size:calc(14 * var(--u)); color:rgba(0,0,0,0.8);
  white-space:nowrap;
}
.nje__cal{ width:calc(16 * var(--u)); height:calc(16 * var(--u)); flex:none; color:rgba(0,0,0,0.7); }
/* Button (Figma 21:125 at top=349, left=70) — Pretendard SemiBold 24px black + arrow 24x24 */
.nje__btn{
  position:absolute;
  left:calc(70 / 574 * 100%); top:calc(349 / 441 * 100%);
  display:inline-flex; align-items:center; gap:calc(10 * var(--u));
  background:transparent; color:#000000;
  font-family:var(--pre); font-weight:600; font-size:calc(24 * var(--u));
  text-decoration:none;
  transition:opacity .2s;
}
.nje__btn:hover{ opacity:.7; }
.nje__btn svg{ width:calc(24 * var(--u)); height:calc(24 * var(--u)); }

/* Tablist (Figma 21:142 at y=775, between left=380 right=380) */
.nje__dots{
  position:absolute; left:0; right:0; top:93.37%;
  display:flex; gap:calc(8 * var(--u)); justify-content:center; align-items:center;
}
.nje__seg{
  height:calc(4 * var(--u)); width:calc(18 * var(--u)); padding:0; border:0; border-radius:999px;
  background:rgba(3,122,184,0.3); cursor:pointer;
  transition:width .5s cubic-bezier(.22,.61,.36,1), background-color .4s;
}
.nje__seg.is-on{ width:calc(46 * var(--u)); background:#037ab8; }

.nje__cols{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.nje__col{ position:absolute; top:0; bottom:0; width:1px; background:rgba(255,255,255,.08); }
.nje__col--l{ left:5.21%; }
.nje__col--c{ left:50%; }
.nje__col--r{ left:94.79%; }

@media (max-width:980px){
  .nje{ aspect-ratio:auto; min-height:auto; padding:50px 24px; }
  .nje__hline--head, .nje__hline--cards-top, .nje__hline--cards-bot{ display:none; }
  .nje__wrap{ height:auto; }
  .nje__head{ position:relative; left:0; top:0; width:100%; height:auto; padding:24px; align-items:flex-end; }
  .nje__eyebrow{ font-size:32px; }
  .nje__title{ font-size:18px; white-space:normal; }
  .nje__arrows{ position:relative; left:0; top:0; margin:14px 0; justify-content:flex-end; }
  .nje__arrow{ width:42px; height:42px; }
  .nje__arrow svg{ width:18px; height:18px; }
  .nje__viewport{ position:relative; left:0; top:0; width:100%; height:auto; margin-top:18px; }
  .nje__slide{ grid-template-columns:1fr; gap:18px; }
  .nje__media{ aspect-ratio:16/10; min-height:0; border-radius:14px; }
  .nje__info{ height:auto; min-height:380px; padding:30px 22px 36px; border-radius:14px; }
  .nje__zone{ left:14px; top:14px; padding:7px 10px; }
  .nje__zt{ font-size:13px; } .nje__zh{ font-size:10px; }
  .nje__num{ font-size:120px; left:auto; right:18px; top:auto; bottom:10px; width:auto; }
  .nje__tag, .nje__name, .nje__divider, .nje__desc, .nje__period, .nje__btn{ position:relative; left:0; top:0; }
  .nje__name{ margin:18px 0 0; font-size:22px; white-space:normal; }
  .nje__divider{ margin:18px 0 0; }
  .nje__desc{ margin:18px 0 0; font-size:15px; white-space:normal; }
  .nje__period{ margin:14px 0 0; font-size:13px; }
  .nje__btn{ margin:24px 0 0; font-size:18px; }
  .nje__dots{ position:relative; top:auto; margin-top:30px; }
}

/* ===== Group package (hero + strip 결합 카드) ===== */
.gpkg {
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--c-bg);
  box-shadow: 0 30px 60px -20px rgba(3,40,80,.35), 0 8px 18px -10px rgba(3,40,80,.25);
  --accent: var(--c-blue);
}
.gpkg__hero {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  color: var(--accent);
  transition: color .3s ease;
}
.gpkg__bg,
.gpkg__pattern {
  position: absolute; inset: 0;
}
.gpkg__bg {
  background: color-mix(in srgb, var(--accent) 18%, var(--c-bg));
  transition: background .35s ease;
}
.gpkg__pattern {
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 0%, transparent) 0 14px,
    color-mix(in srgb, var(--accent) 22%, transparent) 14px 28px
  );
  transition: background .35s ease;
}
.gpkg__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  text-align: center;
}
.gpkg__mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 80%, #000);
  opacity: 0.9;
  transition: color .3s ease;
}
.gpkg__overlay {
  position: absolute;
  left: 0; bottom: 0; right: 0;
  padding: 28px 32px;
  background: linear-gradient(0deg, rgba(0,0,0,.78) 30%, rgba(0,0,0,0) 100%);
  color: #fff;
  transition: opacity .25s ease;
}
.gpkg__chip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  padding: 4px 10px;
  border-radius: 2px;
  background: var(--accent);
  color: #fff;
  white-space: nowrap;
  transition: background .3s ease;
}
.gpkg__title {
  margin: 12px 0 6px;
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.gpkg__desc {
  margin: 0;
  opacity: 0.85;
  font-size: 14px;
  max-width: 540px;
  line-height: 1.55;
}
.gpkg__tags {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.gpkg__tags span {
  font-size: 11.5px;
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 3px;
  color: #fff;
  font-family: var(--font-mono);
  letter-spacing: .05em;
}
/* 페이드 인 키프레임 (탭 전환 시 살짝 페이드) */
.gpkg.is-switching .gpkg__overlay,
.gpkg.is-switching .gpkg__center { opacity: 0; }

/* ===== Group program strip ===== */
.grp-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--c-line);
}
.grp-cell {
  position: relative;
  background: var(--c-bg);
  color: var(--c-fg);
  border: none;
  padding: 22px 18px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; text-align: left;
  transition: background .25s;
  font-family: inherit;
  isolation: isolate;
}
.grp-cell:hover { background: var(--c-bg-2); }
.grp-cell.is-active {
  background: color-mix(in srgb, var(--accent) 10%, var(--c-bg));
  box-shadow: inset 0 3px 0 var(--accent);
}
.grp-cell::after {
  content: "";
  position: absolute;
  left: 18px; top: 50%;
  width: 40px; height: 40px;
  border-radius: 4px;
  background: var(--accent);
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity .35s;
  z-index: 0;
}
.grp-cell:hover::after { opacity: .12; }
.grp-cell.is-active::after { opacity: 0; }
.grp-icon-wrap {
  position: relative;
  width: 40px; height: 40px;
  flex: 0 0 auto;
  z-index: 1;
}
.grp-icon {
  position: absolute; inset: 0;
  border-radius: 4px;
  display: grid; place-items: center;
  transition: transform .35s ease;
}
.grp-cell:hover .grp-icon { transform: translate(-1px, -2px) rotate(-4deg) scale(1.04); }
.grp-cell.is-active .grp-icon { transform: translate(-2px, -4px) rotate(-8deg) scale(1.1); }
.grp-label {
  display: block;
  font-weight: 800; font-size: 15px;
  letter-spacing: -0.02em; white-space: nowrap;
}
.grp-sub {
  display: block; font-size: 11.5px;
  font-family: var(--font-mono); letter-spacing: .1em;
  opacity: .65; margin-top: 2px;
}

/* ===== Responsive grids ===== */
@media (max-width: 720px) {
  .visit-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 880px){
  .footer-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
}

/* ============================================================
   Navbar: scrolled 상태 shadow 보강 + menu-open 강제 솔리드
   ============================================================ */
.njhdr.is-scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,.10);
}
/* 모바일 메뉴 열렸을 때 항상 흰 배경 */
.njhdr.is-menu-open {
  background: var(--c-bg) !important;
  color: var(--c-fg) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.njhdr.is-menu-open .njhdr__brand img { filter: none !important; }

/* ============================================================
   Header 모바일 간격 보정 (calc(var(--u)) 값이 너무 작아짐)
   ============================================================ */
@media (max-width: 980px) {
  .njhdr__row  { padding: 0 16px; gap: 8px; }
  .njhdr__util { gap: 4px; margin-left: auto; }
  /* 아이콘 / 로고 — calc(var(--u)) 값이 모바일에서 거의 0이 되는 문제 강제 보정 */
  .njhdr__icon {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0;
  }
  .njhdr__icon svg {
    width: 22px !important;
    height: 22px !important;
  }
  .njhdr__brand img {
    height: 40px !important;
    min-height: 40px !important;
  }
}
@media (max-width: 480px) {
  .njhdr__row  { padding: 0 12px; }
  .njhdr__util { gap: 2px; }
  .njhdr__brand img { height: 34px !important; min-height: 34px !important; }
}

/* ============================================================
   Hamburger 버튼
   ============================================================ */
.njhdr__hamburger {
  display: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  color: inherit;
  flex-shrink: 0;
  transition: background-color .2s;
}
.njhdr__hamburger:hover { background: rgba(20,20,30,.08); }
.njhdr:not(.is-scrolled):not(.is-menu-open) .njhdr__hamburger:hover { background: rgba(255,255,255,.16); }
.njhdr__ham-bar {
  display: block;
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  pointer-events: none;
  transition: transform .28s ease, opacity .2s ease;
}
/* X 애니메이션 */
.njhdr.is-menu-open .njhdr__ham-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.njhdr.is-menu-open .njhdr__ham-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.njhdr.is-menu-open .njhdr__ham-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
  .njhdr__hamburger { display: flex; }
}

/* ============================================================
   Mobile Drawer
   ============================================================ */
.njhdr__drawer {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--c-bg);
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1);
  z-index: 99;
}
@media (max-width: 980px) {
  .njhdr__drawer { display: block; }
}
.njhdr__drawer.is-open { max-height: 520px; border-top: 1px solid var(--c-line); }

.njhdr__drawer-nav {
  padding: 8px 24px 4px;
  display: flex;
  flex-direction: column;
}
.njhdr__drawer-nav button {
  font-family: var(--pre);
  font-size: 16px;
  font-weight: 600;
  color: var(--c-fg);
  background: none;
  border: none;
  border-bottom: 1px solid var(--c-line);
  padding: 15px 0;
  cursor: pointer;
  text-align: left;
  letter-spacing: -.01em;
  transition: color .18s;
}
.njhdr__drawer-nav button:last-child { border-bottom: 0; }
.njhdr__drawer-nav button:hover { color: var(--nj-pink); }
.njhdr__drawer-util {
  padding: 14px 24px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--c-line);
  flex-wrap: wrap;
}
.njhdr__drawer-link {
  font-size: 14px;
  color: var(--c-fg-2);
  text-decoration: none;
  font-weight: 500;
}
.njhdr__drawer-cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--nj-pink);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(233,34,133,.28);
}

/* ============================================================
   Hero 반응형 — calc(X * var(--u)) 값이 모바일에서 너무 작음
   ============================================================ */
@media (max-width: 980px) {
  /* prev/next 버튼 */
  .njh__nav {
    width: 40px; height: 40px;
  }
  .njh__nav svg { width: 18px; height: 18px; }
  .njh__nav--prev { left: 10px; }
  .njh__nav--next { right: 10px; }
  /* 슬라이드 인디케이터 */
  .njh__ind  { gap: 8px; top: auto; bottom: 118px; }
  .njh__seg  { height: 4px; width: 16px; }
  .njh__seg.is-on { width: 40px; }
  /* 데코 이미지 — PC와 동일한 자연 비율, 뷰포트 안에 완전히 들어오도록 */
  .njh__decoImg {
    width: 100%;
    height: auto;
    max-width: none;
  }
  /* 띠 배너 — 이미지 세로 중앙(GOVERNMENT/EXPERT 갭 부근)에 PC처럼 살짝 겹쳐서 위치
     이미지 높이 = 100vw/3.974 ≈ 25.16vw, 중심선 = 12.58vw (media bottom 기준) */
  .njh__band {
    top: auto;
    bottom: 12.58vw;
    transform: translateY(50%);
    height: auto;
    min-height: 44px;
    padding: 9px 12px 5px;
  }
  .njh__band-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: auto;
  }
  .njh__band-left {
    position: relative;
    left: auto; top: auto;
    width: 28px; height: 28px;
    flex-shrink: 0;
  }
  .njh__band-right {
    position: relative;
    left: auto; right: auto; top: auto;
    width: 38px; height: 22px;
    flex-shrink: 0;
  }
  .njh__stmt {
    position: relative;
    left: auto; top: auto;
    transform: none;
    font-size: 10px;
    white-space: normal;
    line-height: 1.3;
    flex: 1;
    text-align: center;
    letter-spacing: -.015em;
  }
  .njh__sep { display: none; }
}

/* 세로 화면 모바일: 히어로 높이 확보 */
@media (max-width: 640px) {
  .njh__media { min-height: 520px; }
  .njh__ind   { bottom: 88px; }
}

/* ============================================================
   모바일 헤더 아이콘 조정
   — 모바일: 돋보기 + MY + 햄버거 / CTA 숨김
   — 데스크탑: 돋보기 + MY(숨김) + 로그인링크 + CTA + 햄버거(숨김)
   ============================================================ */
.njhdr__my-icon,
.njhdr__ticket-icon { display: none; }
@media (max-width: 980px) {
  /* 마이페이지 아이콘 모바일 숨김 (복구: 아래 줄 주석 해제) */
  /* .njhdr__my-icon     { display: inline-flex; } */
  .njhdr__ticket-icon { display: inline-flex; }
  .njhdr__cta         { display: none; }
}
/* 티켓 아이콘 — 핑크색 강조 */
.njhdr__ticket-icon {
  background: var(--nj-pink) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(233,34,133,.32);
}
.njhdr__ticket-icon:hover {
  background: #d11e76 !important;
}
.njhdr.is-menu-open .njhdr__ticket-icon,
.njhdr.is-scrolled  .njhdr__ticket-icon {
  background: var(--nj-pink) !important;
  color: #fff !important;
}

/* ============================================================
   Notice / FAQ Tabs  (.ntab__)
   ============================================================ */
.ntab__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.ntab__tabs {
  display: inline-flex;
  gap: 0;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--c-line);
}
.ntab__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--c-fg-3);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: color .15s;
  margin-bottom: -1px;
  font-family: var(--font-sans);
}
.ntab__btn.is-active { color: var(--c-fg); }
.ntab__btn:hover     { color: var(--c-fg); }
/* 뱃지 — 비활성 시 흐리게 */
.ntab__badge {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  opacity: .5;
  transition: opacity .2s;
}
.ntab__btn.is-active .ntab__badge { opacity: 1; }
/* 탭 하단 컬러 언더라인 */
.ntab__ul {
  position: absolute;
  left: 12px; right: 12px;
  bottom: 0; height: 3px;
  background: transparent;
  transition: background .2s;
}
.ntab__btn[data-tab="nowon"].is-active .ntab__ul { background: var(--c-blue); }
.ntab__btn[data-tab="jump"].is-active  .ntab__ul { background: var(--c-pink); }
.ntab__btn[data-tab="faq"].is-active   .ntab__ul { background: var(--c-yellow); }
/* 더 보기 버튼 */
.ntab__more {
  background: none;
  border: none;
  padding: 4px 0;
  font: inherit;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--c-fg);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  letter-spacing: -.01em;
  border-bottom: 1.5px solid var(--c-fg);
  transition: opacity .2s;
}
.ntab__more:hover { opacity: .6; }
/* 패널 컨테이너 */
.ntab__panels {
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--c-bg);
  box-shadow: 0 30px 60px -20px rgba(3,40,80,.35), 0 8px 18px -10px rgba(3,40,80,.25);
}

/* VISIT 카드 — 인라인 border 제거 + 그림자 통일 (map / address / transport / hours) */
section#visit div[style*="border:1px solid var(--c-line)"]{
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 30px 60px -20px rgba(3,40,80,.35), 0 8px 18px -10px rgba(3,40,80,.25);
  position: relative;
  z-index: 1;
}

/* 카드 사이 세로 간격 — 그림자 크기 대비 너무 넓어 보이면 여기 조정 */
section#visit .visit-grid{ margin-top: 20px !important; }
section#visit .container-narrow > div[style*="margin-top:14px"]{ margin-top: 20px !important; }
/* 리스트 아이템 */
.ntab__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--c-line);
  align-items: center;
  transition: background .15s;
  text-decoration: none;
  color: inherit;
}
.ntab__item:hover        { background: var(--c-bg-2); }
.ntab__item--last        { border-bottom: 0; }
.ntab__item-l {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ntab__pin {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  padding: 3px 6px;
  border-radius: 2px;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}
.ntab__title {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ntab__date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-fg-3);
  letter-spacing: .08em;
  white-space: nowrap;
}
/* 모바일: 탭 버튼 폰트 조정 */
@media (max-width: 480px) {
  .ntab__btn { padding: 12px 10px; font-size: 12px; }
  .ntab__badge { width: 20px; height: 20px; }
}

/* ============================================================
   그룹 섹션 — grp-strip 모바일
   ============================================================ */
@media (max-width: 600px) {
  .grp-strip { grid-template-columns: 1fr !important; }
  .grp-cell  { border-right: none !important; border-bottom: 1px solid var(--c-line); }
  .grp-cell:last-child { border-bottom: 0; }
}

/* ============================================================
   푸터 모바일 — 하단 저작권 줄 wrap
   ============================================================ */
@media (max-width: 640px) {
  footer > div > div:last-child { flex-direction: column; gap: 6px; }
}

/* ============================================================
   Nav Depth — embed.js가 주입하는 canonical 헤더의 드롭다운/드로어
   (지금까지 index 4본의 인라인 <style>에 중복 포함되어 있던 블록을
   여기로 일원화. 인라인 사본은 그대로 둬도 무해함.)
   ============================================================ */
.njhdr__nav-item{ position:relative; display:inline-flex; }
.njhdr__nav-item > button,
.njhdr__nav-item > .njhdr__nav-link{ position:relative; transition:color .25s ease; }
.njhdr__nav-item:hover > button,
.njhdr__nav-item:hover > .njhdr__nav-link,
.njhdr__nav-item:focus-within > button,
.njhdr__nav-item:focus-within > .njhdr__nav-link{ color:var(--c-pink); }
.njhdr__nav .njhdr__nav-link.is-active{ color:var(--c-pink); }

.njhdr__sub{
  position:absolute; top:calc(100% + 14px); left:0;
  transform:translateY(10px); min-width:220px;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
  border:0; border-radius:14px;
  box-shadow:0 24px 50px -22px rgba(20,20,40,.22), 0 8px 18px -12px rgba(20,20,40,.10), inset 0 0 0 1px rgba(255,255,255,.55);
  padding:10px 10px 10px 0;
  display:flex; flex-direction:column; gap:1px;
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, transform .32s cubic-bezier(.22,.61,.36,1), visibility .25s;
  z-index:200;
}
.njhdr__sub::before{ content:""; position:absolute; top:-18px; left:0; right:0; height:18px; }
.njhdr__nav-item:hover .njhdr__sub,
.njhdr__nav-item:focus-within .njhdr__sub{ opacity:1; visibility:visible; transform:translateY(0); }
.njhdr__sub a{
  position:relative; display:flex; align-items:center;
  padding:11px 16px; border-radius:9px;
  color:var(--c-fg); font-family:var(--font-sans);
  font-size:13.5px; font-weight:600; letter-spacing:-.01em;
  text-decoration:none; white-space:nowrap;
  opacity:0; transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease, background .2s ease, color .2s ease, padding .25s cubic-bezier(.22,.61,.36,1);
}
.njhdr__sub a::after{
  content:""; position:absolute; left:8px; top:50%;
  width:6px; height:6px; border-radius:50%;
  background:var(--c-pink);
  transform:translateY(-50%) scale(0);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.njhdr__sub a:hover{
  background:color-mix(in srgb, var(--c-pink) 8%, #fff);
  color:var(--c-pink); padding-left:24px;
}
.njhdr__sub a:hover::after{ transform:translateY(-50%) scale(1); }
.njhdr__nav-item:hover .njhdr__sub a,
.njhdr__nav-item:focus-within .njhdr__sub a{ opacity:1; transform:translateY(0); }
.njhdr__sub a:nth-child(1){ transition-delay:.04s; }
.njhdr__sub a:nth-child(2){ transition-delay:.08s; }
.njhdr__sub a:nth-child(3){ transition-delay:.12s; }
.njhdr__sub a:nth-child(4){ transition-delay:.16s; }
.njhdr__sub a:nth-child(5){ transition-delay:.20s; }

.njhdr:not(.is-scrolled) .njhdr__sub{
  background:rgba(18,20,26,.68);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 24px 50px -22px rgba(0,0,0,.55), 0 8px 18px -12px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.14);
}
.njhdr:not(.is-scrolled) .njhdr__sub a{ color:#fff; }
.njhdr:not(.is-scrolled) .njhdr__sub a:hover{
  background:color-mix(in srgb, var(--c-pink) 30%, transparent);
  color:#fff;
}
.njhdr:not(.is-scrolled) .njhdr__sub a::after{ background:#fff; }

.njhdr__drawer-group{ border-bottom:1px solid var(--c-line); }
.njhdr__drawer-group > summary{
  list-style:none; cursor:pointer;
  padding:14px 4px;
  font-family:var(--font-sans); font-weight:700; font-size:15px;
  letter-spacing:-.01em; color:var(--c-fg);
  display:flex; justify-content:space-between; align-items:center;
  -webkit-tap-highlight-color:transparent;
}
.njhdr__drawer-group > summary::-webkit-details-marker{ display:none; }
.njhdr__drawer-group > summary::after{
  content:""; width:8px; height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg); opacity:.55;
  transition:transform .25s ease; margin-right:6px;
}
.njhdr__drawer-group[open] > summary::after{ transform:rotate(225deg); }
.njhdr__drawer-group > a{
  display:block; padding:10px 16px; font-size:13.5px;
  color:var(--c-fg-3); text-decoration:none; font-weight:500;
  border-radius:6px; transition:background .15s, color .15s;
}
.njhdr__drawer-group > a:hover{ background:var(--c-bg-2); color:var(--c-pink); }
.njhdr__drawer-group > a:last-of-type{ margin-bottom:6px; }

/* 상단 유틸 ul: 로그인 | 회원가입 | 고객센터 (헤더 오버레이 색 적응) */
.njhdr__util-links{
  display:flex; align-items:center; gap:calc(12 * var(--u));
  list-style:none; margin:0; padding:0;
}
.njhdr__util-links li{ position:relative; display:flex; align-items:center; }
.njhdr__util-links li + li{ padding-left:calc(12 * var(--u)); }
.njhdr__util-links li + li::before{
  content:""; position:absolute; left:0; top:50%;
  width:1px; height:calc(11 * var(--u)); min-height:10px;
  transform:translateY(-50%); background:currentColor; opacity:.35;
}
.njhdr__util-links a{
  font-family:var(--pre); font-size:calc(13 * var(--u)); font-weight:500;
  color:inherit; letter-spacing:-.01em; text-decoration:none;
  white-space:nowrap; transition:color .2s ease;
}
.njhdr:not(.is-scrolled) .njhdr__util-links{ text-shadow:0 1px 6px rgba(0,0,0,.45); }
.njhdr__util-links a:hover{ color:var(--nj-pink); }
@media (max-width:980px){ .njhdr__util-links{ display:none; } }

/* 드로어: 예약하기 (서브 없는 단일 링크) */
.njhdr__drawer-flat{
  display:flex; align-items:center;
  padding:14px 4px;
  font-family:var(--font-sans); font-weight:700; font-size:15px;
  letter-spacing:-.01em; color:var(--c-fg);
  text-decoration:none;
}
.njhdr__drawer-flat:hover{ color:var(--c-pink); }
.njhdr__drawer-nav > .njhdr__drawer-flat{ border-bottom:1px solid var(--c-line); }
.njhdr__drawer-nav > .njhdr__drawer-flat:last-child{ border-bottom:0; }
.njhdr__drawer-nav > .njhdr__drawer-flat.is-active{ color:var(--c-pink); }

/* 드로어 하단 계정 링크: 로그인 / 회원가입 / 고객센터 */
.njhdr__drawer-acct{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.njhdr__drawer-acct a{
  position:relative;
  font-size:14px; color:var(--c-fg-2); text-decoration:none; font-weight:500;
}
.njhdr__drawer-acct a + a{ padding-left:14px; }
.njhdr__drawer-acct a + a::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:11px; background:var(--c-line);
}
.njhdr__drawer-acct a:hover{ color:var(--c-pink); }


/* ============================================================
   Placeholder page — 사이트맵 하위 페이지 미구현 단계의 셸
   ============================================================ */
.ph-page{
  padding:calc(160 * var(--u)) 24px calc(120 * var(--u));
  min-height:60vh;
  display:flex; align-items:center; justify-content:center;
}
.ph-page__inner{ width:100%; max-width:720px; margin:0 auto; text-align:center; }
.ph-page__eyebrow{
  font-family:var(--font-mono); font-size:12px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--c-fg-3); display:inline-block; margin-bottom:14px;
}
.ph-page__title{
  font-family:var(--font-sans); font-weight:800;
  font-size:clamp(32px, 5vw, 56px);
  letter-spacing:-.025em; line-height:1.15;
  margin:0 0 20px; color:var(--c-fg);
}
.ph-page__lead{
  font-size:17px; color:var(--c-fg-2); line-height:1.7;
  max-width:560px; margin:0 auto 32px;
}
.ph-page__badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 18px; border-radius:999px;
  background:color-mix(in srgb, var(--c-yellow) 22%, transparent);
  color:#7a4f00; font-weight:700; font-size:13px;
  font-family:var(--font-sans);
}
.ph-page__badge::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--c-yellow);
}
.ph-page__back{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:40px; padding:12px 24px; border-radius:999px;
  background:var(--c-fg); color:var(--c-bg);
  font-weight:600; font-size:14px;
  text-decoration:none; transition:opacity .2s;
}
.ph-page__back:hover{ opacity:.85; }
.ph-page__sections{
  margin-top:48px; padding-top:32px;
  border-top:1px dashed var(--c-line);
  text-align:left;
}
.ph-page__sections h3{
  font-family:var(--font-mono); font-size:12px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--c-fg-3); margin:0 0 12px; font-weight:600;
}
.ph-page__sections ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:8px;
}
.ph-page__sections li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:14px; color:var(--c-fg-2); line-height:1.5;
}
.ph-page__sections li::before{
  content:""; flex:none; width:6px; height:6px;
  border-radius:50%; background:var(--c-fg-3);
  margin-top:9px;
}

/* ============================================================
   인터랙션 — 스크롤 reveal + 카드 hover lift
   interactions.js와 짝. JS 미실행/IO 미지원/reduced-motion 시
   .is-in이 즉시 부여되어 시각적 변화 없이 표시.
   ============================================================ */

/* 앵커 클릭 시 부드럽게 + 고정 헤더 보정 */
html { scroll-behavior: smooth; scroll-padding-top: 100px; }

/* Reveal — fade + slide-up (one-shot animation) */
@keyframes nj-reveal-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 전 페이지 공통 reveal 대상 — interactions.js의 SELECTORS와 동일 목록 유지 */
.eyebrow:not(.is-in), .section-title:not(.is-in), .section-sub:not(.is-in),
.gp-sec__head:not(.is-in), .b-hist__head:not(.is-in), .b-safe__head:not(.is-in),
.zb:not(.is-in), .ntab__item:not(.is-in), .gpkg:not(.is-in),
.visit-grid > div:not(.is-in), .footer-grid > div:not(.is-in),
.b-hero__lockup:not(.is-in), .b-hist__row:not(.is-in), .b-safe__card:not(.is-in), .b-quote:not(.is-in),
.ac-zone:not(.is-in), .gp-hgroup:not(.is-in),
.gp-card:not(.is-in), .gp-prog__item:not(.is-in), .gp-proc__step:not(.is-in), .gp-dl__panel:not(.is-in),
.ug-subcard:not(.is-in), .ug-dcard:not(.is-in), .ug-rule:not(.is-in), .ug-floor:not(.is-in),
.fc-floor:not(.is-in), .fc-amenity:not(.is-in), .fc-fcard:not(.is-in),
.sp-ccard:not(.is-in), .sp-row:not(.is-in), .sp-faq__item:not(.is-in), .sp-ecard:not(.is-in), .sp-step:not(.is-in),
.card-box:not(.is-in), .hist__item:not(.is-in), .kid:not(.is-in), .resv:not(.is-in),
.passb:not(.is-in),
.acc__panel:not(.is-in), .mb-card:not(.is-in), .lt__btn:not(.is-in) {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}
.eyebrow.is-in, .section-title.is-in, .section-sub.is-in,
.gp-sec__head.is-in, .b-hist__head.is-in, .b-safe__head.is-in,
.zb.is-in, .ntab__item.is-in, .gpkg.is-in,
.visit-grid > div.is-in, .footer-grid > div.is-in,
.b-hero__lockup.is-in, .b-hist__row.is-in, .b-safe__card.is-in, .b-quote.is-in,
.ac-zone.is-in, .gp-hgroup.is-in,
.gp-card.is-in, .gp-prog__item.is-in, .gp-proc__step.is-in, .gp-dl__panel.is-in,
.ug-subcard.is-in, .ug-dcard.is-in, .ug-rule.is-in, .ug-floor.is-in,
.fc-floor.is-in, .fc-amenity.is-in, .fc-fcard.is-in,
.sp-ccard.is-in, .sp-row.is-in, .sp-faq__item.is-in, .sp-ecard.is-in, .sp-step.is-in,
.card-box.is-in, .hist__item.is-in, .kid.is-in, .resv.is-in,
.passb.is-in,
.acc__panel.is-in, .mb-card.is-in, .lt__btn.is-in {
  animation: nj-reveal-up .7s cubic-bezier(.22,.61,.36,1) both;
}

/* 카드 hover lift — 자연스러운 깊이감 */
.nje__slide,
.evt__slide {
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}
.nje__slide:hover,
.evt__slide:hover {
  transform: translateY(-4px);
}

.atr {
  transition: transform .25s ease, box-shadow .25s ease;
}
.atr:hover {
  transform: translateY(-3px);
}

.zb {
  transition: transform .25s ease;
}
.zb:hover {
  transform: translateY(-2px);
}

/* VISIT 카드 — 이미 큰 그림자가 있어 hover 시 살짝 더 띄움 */
section#visit .visit-grid > div,
section#visit .container-narrow > div[style*="margin-top:14px"] {
  transition: transform .25s ease, box-shadow .25s ease;
}
section#visit .visit-grid > div:hover,
section#visit .container-narrow > div[style*="margin-top:14px"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 40px 80px -22px rgba(3,40,80,.45), 0 12px 22px -10px rgba(3,40,80,.30) !important;
}

/* prefers-reduced-motion — 애니메이션·smooth scroll 모두 끔 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .eyebrow, .section-title, .section-sub,
  .gp-sec__head, .b-hist__head, .b-safe__head,
  .zb, .ntab__item, .gpkg,
  .visit-grid > div, .footer-grid > div,
  .b-hero__lockup, .b-hist__row, .b-safe__card, .b-quote,
  .ac-zone, .gp-hgroup,
  .gp-card, .gp-prog__item, .gp-proc__step, .gp-dl__panel,
  .ug-subcard, .ug-dcard, .ug-rule, .ug-floor,
  .fc-floor, .fc-amenity, .fc-fcard,
  .sp-ccard, .sp-row, .sp-faq__item, .sp-ecard, .sp-step,
  .card-box, .hist__item, .kid, .resv,
  .passb,
  .acc__panel, .mb-card, .lt__btn {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .nje__slide, .evt__slide, .atr, .zb,
  section#visit .visit-grid > div,
  section#visit .container-narrow > div[style*="margin-top:14px"] {
    transition: none !important;
  }
  .nje__slide:hover, .evt__slide:hover, .atr:hover, .zb:hover,
  section#visit .visit-grid > div:hover,
  section#visit .container-narrow > div[style*="margin-top:14px"]:hover {
    transform: none !important;
  }
}