/* 노원 JUMP — 소개 페이지 (시안 B) 스타일시트
   ../style.css(canonical 헤더/푸터·토큰) 이후에 로드되어, B-variant 전용 hero/history/safety/quote 스타일만 덮어씁니다. */
/* ===================================================================
   njump-base
   =================================================================== */
/* =========================================================
   노원 JUMP · 공통 토큰 (메인 시안에서 추출)
   ========================================================= */
:root{
  --pre: 'Pretendard','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --disp: 'Archivo Black', 'Pretendard', system-ui, sans-serif;

  --nj-pink: #e92285;
  --nj-blue: #037ab8;
  --nj-yellow: #f7b924;
  --nj-ink: #0b0b0e;
  --nj-ink-2: #1c1c22;
  --nj-mute: #71717a;
  --nj-line: rgba(20,20,30,.08);
  --nj-line-strong: rgba(20,20,30,.16);
  --nj-bg: #ffffff;
  --nj-bg-soft: #f7f7f6;

  --nj-w: min(100vw, 1920px);
  --u: calc(var(--nj-w) / 1920);

  /* type scale (px @ 1920) */
  --t-eyebrow: calc(13 * var(--u));
  --t-body: calc(16 * var(--u));
  --t-h4: calc(20 * var(--u));
  --t-h3: calc(28 * var(--u));
  --t-h2: calc(48 * var(--u));
  --t-h1: calc(72 * var(--u));
  --t-display: calc(120 * var(--u));
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--pre);
  font-size:var(--t-body);
  color:var(--nj-ink);
  background:var(--nj-bg);
  line-height:1.55;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
button{ font-family:inherit; }
a{ color:inherit; text-decoration:none; }



/* =========================================================
   공통: section helpers, placeholders, mono labels
   ========================================================= */
.nj-section{ position:relative; padding:calc(140 * var(--u)) 0; }
.nj-section--soft{ background:var(--nj-bg-soft); }
.nj-container{ max-width:800px; margin:0 auto; padding:0 24px; }
.nj-container--wide{ max-width:1320px; margin:0 auto; padding:0 calc(60 * var(--u)); }

.nj-mono{
  font-family:var(--mono); font-size:calc(12 * var(--u));
  letter-spacing:.18em; text-transform:uppercase; color:var(--nj-mute);
}
.nj-mono--white{ color:rgba(255,255,255,.7); }

.nj-eyebrow{
  display:inline-flex; align-items:center; gap:calc(12 * var(--u));
  font-family:var(--mono); font-size:calc(12 * var(--u));
  letter-spacing:.22em; text-transform:uppercase; color:var(--nj-mute);
}
.nj-eyebrow::before{
  content:""; width:calc(28 * var(--u)); height:1px; background:currentColor; opacity:.5;
}
.nj-eyebrow--white{ color:rgba(255,255,255,.85); }

.nj-h1{
  font-family:var(--pre); font-weight:800;
  font-size:clamp(34px, var(--t-h1), 80px);
  line-height:1.1; letter-spacing:-.03em;
}
.nj-h2{
  font-family:var(--pre); font-weight:800;
  font-size:clamp(28px, var(--t-h2), 56px);
  line-height:1.15; letter-spacing:-.025em;
}
.nj-h2 em{ color:var(--nj-pink); font-style:normal; }
.nj-h2 .b{ color:var(--nj-blue); }
.nj-h2 .y{ color:var(--nj-yellow); }
.nj-h2 .disp{ font-family:var(--disp); font-weight:400; }

.nj-lead{
  font-family:var(--pre); font-size:clamp(15px, calc(18 * var(--u)), 19px);
  line-height:1.75; color:var(--nj-mute);
}

.nj-ph{
  background:
    repeating-linear-gradient(135deg,
      rgba(20,20,30,.04) 0 12px,
      rgba(20,20,30,.07) 12px 13px);
  border:1px dashed rgba(20,20,30,.18);
  border-radius:calc(18 * var(--u));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:calc(12 * var(--u));
  color:var(--nj-mute); letter-spacing:.04em; text-align:center;
  padding:24px;
}
.nj-ph--dark{
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.06) 0 12px,
      rgba(255,255,255,.10) 12px 13px);
  border:1px dashed rgba(255,255,255,.28);
  color:rgba(255,255,255,.7);
}


/* ===================================================================
   page-styles (시안 B)
   =================================================================== */
/* ========================================================
     시안 B — Extreme Park
     메인의 "히어로" DNA(가는 그리드 + 대각선 + 디스플레이 타이포)를
     라이트 배경으로 변환. 핑크/옐로우 액센트와 Archivo Black 디스플레이
     타이포로 익스트림 파크의 다이내믹한 에너지.
     ======================================================== */
  body[data-screen-label]{ background:#fafaf6; color:var(--nj-ink); }

  /* 섹션 뱃지 바 앵커 이동 시 헤더+고정 바에 가리지 않도록 여백 보정 */
  #brand, #history, #safety{ scroll-margin-top:180px; }
  @media (max-width:900px){ #brand, #history, #safety{ scroll-margin-top:50px; } }  /* 모바일 네비 보정 — 액티비티 기준 통일 */

  /* 브랜드 소개 — 이미지(좌·크게) / 텍스트(우) 2단 레이아웃 */
  .brand-split{ display:grid; grid-template-columns:1.15fr 1fr; gap:60px; align-items:center; }
  .brand-split__text.gp-sec__head{ margin-bottom:0; }
  .brand-split__media .b-hero__lockup{
    max-width:none; width:100%; min-height:380px;
    display:flex; flex-direction:column; justify-content:center; gap:calc(8 * var(--u));
  }
  .brand-split__media .seal{ width:calc(124 * var(--u)); height:calc(124 * var(--u)); min-width:96px; min-height:96px; }
  .brand-split__media .x{ font-size:calc(48 * var(--u)); }
  /* GOVERNMENT × EXPERT 디자인 태그 */
  .brand-tag{
    display:inline-flex; align-items:center; gap:max(6px, calc(9 * var(--u)));
    padding:max(7px, calc(9 * var(--u))) max(12px, calc(16 * var(--u))); border-radius:999px;
    background:var(--nj-ink); color:#fff;
    font-family:var(--pre); font-size:max(12px, calc(12 * var(--u))); font-weight:600;
    letter-spacing:.04em; white-space:nowrap;
    margin-bottom:max(16px, calc(22 * var(--u)));
  }
  .brand-tag__dot{ width:7px; height:7px; border-radius:50%; background:var(--nj-pink); flex:none; }
  .brand-tag__x{ color:var(--nj-pink); font-family:var(--disp); font-size:1.15em; margin:0 1px; }

  /* "노원구청이 ~" 제목 — 크기 축소 + 한글 굵게(Pretendard) */
  .brand-title{ font-family:var(--pre); font-weight:800; font-size:clamp(20px, calc(30 * var(--u)), 32px); line-height:1.3; }
  @media (max-width:860px){
    .brand-split{ grid-template-columns:1fr; gap:28px; }
    .brand-split__media .b-hero__lockup{ min-height:300px; }
  }

  /* 히어로가 남색(다크)이므로 헤더는 기본 동작(스크롤 전 흰색 글자 + 그림자,
     스크롤 후 다크 글자)을 그대로 사용 — 별도 override 없음 */

  /* ============ HERO ============ */
  .b-hero{
    position:relative; overflow:hidden;
    min-height:100vh;
    background:#fafaf6;
    padding-top:calc(160 * var(--u));
  }
  /* 가는 그리드 라인 (메인 히어로에서 차용) */
  .b-hero__grid{ position:absolute; inset:0; pointer-events:none; }
  .b-hero__grid .col{
    position:absolute; top:0; bottom:0; width:1px; background:rgba(20,20,30,.07);
  }
  .b-hero__grid .col.l{ left:5.21%; }
  .b-hero__grid .col.c{ left:50%; }
  .b-hero__grid .col.r{ left:94.79%; }
  .b-hero__grid .row{
    position:absolute; left:0; right:0; height:1px; background:rgba(20,20,30,.07);
  }
  .b-hero__grid .row.top{ top:14%; }
  .b-hero__grid .row.bot{ top:82%; }
  .b-hero__diag{
    position:absolute; left:50%; top:50%;
    width:200%; height:1px; background:rgba(20,20,30,.05);
  }
  .b-hero__diag.a{ transform:translate(-50%,-50%) rotate(28deg); }
  .b-hero__diag.b{ transform:translate(-50%,-50%) rotate(-28deg); }

  .b-hero__corner{
    position:absolute; font-family:var(--mono); font-size:calc(11 * var(--u));
    letter-spacing:.22em; text-transform:uppercase; color:var(--nj-mute);
    display:flex; align-items:center; gap:calc(8 * var(--u));
  }
  .b-hero__corner.tl{ top:calc(130 * var(--u)); left:calc(60 * var(--u)); }
  .b-hero__corner.tr{ top:calc(130 * var(--u)); right:calc(60 * var(--u)); }
  .b-hero__corner.bl{ bottom:calc(60 * var(--u)); left:calc(60 * var(--u)); }
  .b-hero__corner.br{ bottom:calc(60 * var(--u)); right:calc(60 * var(--u)); }
  .b-hero__corner .dot{
    width:calc(6 * var(--u)); height:calc(6 * var(--u)); border-radius:50%;
    background:var(--nj-pink);
  }

  .b-hero__inner{
    position:relative; z-index:2;
    max-width:1480px; margin:0 auto;
    padding:calc(40 * var(--u)) calc(60 * var(--u));
    display:grid; grid-template-columns:1.3fr 1fr;
    gap:calc(80 * var(--u));
    align-items:end;
    min-height:calc(85vh);
  }

  .b-hero__display{
    font-family:var(--disp); font-weight:400;
    font-size:clamp(64px, calc(220 * var(--u)), 260px);
    line-height:.88; letter-spacing:-.04em;
    color:var(--nj-ink);
  }
  .b-hero__display .pk{
    color:var(--nj-pink);
    display:inline-block;
    transform:rotate(-3deg);
    transform-origin:left bottom;
  }
  .b-hero__display .ex{
    display:inline-block; margin-left:.05em;
    color:var(--nj-pink);
    font-family:var(--disp);
  }

  .b-hero__korean{
    margin-top:calc(28 * var(--u));
    display:flex; flex-direction:column; gap:calc(8 * var(--u));
  }
  .b-hero__korean .k1{
    font-family:var(--pre); font-weight:800;
    font-size:clamp(22px, calc(36 * var(--u)), 42px);
    line-height:1.2; letter-spacing:-.025em; color:var(--nj-ink);
  }
  .b-hero__korean .k1 .hl{
    background:linear-gradient(180deg, transparent 60%, rgba(247,185,36,.55) 60%);
    padding:0 .1em;
  }
  .b-hero__korean .k2{
    font-family:var(--pre); font-weight:800;
    font-size:clamp(22px, calc(36 * var(--u)), 42px);
    line-height:1.2; letter-spacing:-.025em; color:var(--nj-ink);
  }
  .b-hero__korean .k2 em{ color:var(--nj-pink); font-style:normal; }

  .b-hero__copy{
    margin-top:calc(36 * var(--u));
    max-width:520px;
    font-size:clamp(15px, calc(17 * var(--u)), 18px);
    line-height:1.85; color:#3a3a40;
  }
  .b-hero__copy .strong{ color:var(--nj-ink); font-weight:600; }

  .b-hero__side{
    position:relative;
    display:flex; flex-direction:column; gap:calc(20 * var(--u));
    align-items:stretch;
    padding-bottom:calc(40 * var(--u));
  }
  .b-hero__tag{
    align-self:flex-start;
    display:inline-flex; align-items:center; gap:calc(10 * var(--u));
    padding:calc(10 * var(--u)) calc(18 * var(--u));
    border-radius:999px;
    background:var(--nj-ink); color:#fff;
    font-family:var(--mono); font-size:calc(11 * var(--u));
    letter-spacing:.22em; text-transform:uppercase;
  }
  .b-hero__tag .dot{ width:8px; height:8px; border-radius:50%; background:var(--nj-pink); animation:bpulse 1.6s infinite ease-in-out; }
  @keyframes bpulse{ 50%{ transform:scale(1.4); opacity:.6; } }

  .b-hero__lockup{
    background:#fff;
    border:1px solid rgba(20,20,30,.10);
    border-radius:calc(24 * var(--u));
    padding:calc(36 * var(--u));
    box-shadow:0 24px 50px rgba(20,20,30,.08);
    position:relative; overflow:hidden;
    transform:rotate(2deg);
  }
  .b-hero__lockup::before{
    content:""; position:absolute; top:-40px; right:-40px;
    width:140px; height:140px; border-radius:50%;
    background:radial-gradient(circle, rgba(233,34,133,.18), transparent 70%);
  }
  .b-hero__lockup .lk-mono{
    font-family:var(--mono); font-size:calc(11 * var(--u));
    letter-spacing:.18em; text-transform:uppercase; color:var(--nj-mute);
  }
  .b-hero__lockup .lk-row{
    margin-top:calc(20 * var(--u));
    display:flex; align-items:center; justify-content:space-around;
    gap:calc(20 * var(--u));
  }
  .b-hero__lockup .seal{
    width:calc(96 * var(--u)); height:calc(96 * var(--u));
    min-width:72px; min-height:72px;
    border-radius:50%;
    border:1px dashed rgba(20,20,30,.22);
    display:inline-flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-size:calc(11 * var(--u)); color:var(--nj-mute);
    text-align:center; line-height:1.2;
  }
  .b-hero__lockup .x{
    font-family:var(--disp); font-size:calc(36 * var(--u)); color:#c4c4c8;
  }
  .b-hero__lockup .lk-cap{
    margin-top:calc(20 * var(--u));
    font-family:var(--mono); font-size:calc(11 * var(--u)); color:var(--nj-mute);
    letter-spacing:.04em; text-align:center;
  }

  .b-hero__chips{
    transform:rotate(-1deg);
    display:flex; flex-wrap:wrap; gap:calc(8 * var(--u));
  }
  .b-hero__chips span{
    padding:calc(8 * var(--u)) calc(14 * var(--u));
    border-radius:999px;
    background:#fff; border:1px solid rgba(20,20,30,.10);
    font-family:var(--pre); font-weight:600; font-size:calc(13 * var(--u));
    letter-spacing:-.01em;
  }
  .b-hero__chips span.pk{ background:var(--nj-pink); color:#fff; border-color:transparent; box-shadow:0 6px 14px rgba(233,34,133,.32); }
  .b-hero__chips span.bl{ background:var(--nj-blue); color:#fff; border-color:transparent; box-shadow:0 6px 14px rgba(3,122,184,.32); }
  .b-hero__chips span.yl{ background:var(--nj-yellow); color:#3a2a00; border-color:transparent; }

  /* Marquee strip just below hero */
  .b-marq{
    background:var(--nj-ink); color:#fff;
    overflow:hidden;
    position:relative;
    padding:calc(22 * var(--u)) 0;
    border-top:1px solid rgba(20,20,30,.10);
    border-bottom:1px solid rgba(20,20,30,.10);
  }
  .b-marq__track{
    display:flex; gap:calc(60 * var(--u));
    font-family:var(--disp);
    font-size:clamp(20px, calc(34 * var(--u)), 38px);
    letter-spacing:-.01em;
    white-space:nowrap;
    animation:marq 28s linear infinite;
    width:max-content;
  }
  .b-marq__track span{ display:inline-flex; align-items:center; gap:calc(28 * var(--u)); }
  .b-marq__track span::after{
    content:""; width:calc(14 * var(--u)); height:calc(14 * var(--u));
    border-radius:50%; background:var(--nj-pink);
  }
  .b-marq__track .y::after{ background:var(--nj-yellow); }
  .b-marq__track .b::after{ background:var(--nj-blue); }
  @keyframes marq{ to{ transform:translateX(-50%); } }

  /* ============ HISTORY ============ */
  .b-hist{
    position:relative; background:#fafaf6;
    padding:calc(180 * var(--u)) 0 calc(180 * var(--u));
    overflow:hidden;
  }
  .b-hist::before{
    content:""; position:absolute; left:5.21%; top:0; bottom:0; width:1px;
    background:rgba(20,20,30,.07);
  }
  .b-hist::after{
    content:""; position:absolute; right:5.21%; top:0; bottom:0; width:1px;
    background:rgba(20,20,30,.07);
  }
  .b-hist__head{
    max-width:1080px; margin:0 auto calc(80 * var(--u));
    padding:0 calc(60 * var(--u));
  }
  .b-hist__head .mono{
    display:flex; justify-content:space-between; align-items:center;
    font-family:var(--mono); font-size:calc(11 * var(--u));
    letter-spacing:.22em; text-transform:uppercase; color:var(--nj-mute);
  }
  .b-hist__head h2{
    margin-top:calc(20 * var(--u));
    font-family:var(--disp); font-weight:400;
    font-size:clamp(48px, calc(140 * var(--u)), 180px);
    line-height:.92; letter-spacing:-.04em;
    color:var(--nj-ink);
  }
  .b-hist__head h2 .pk{ color:var(--nj-pink); }
  .b-hist__head .sub{
    margin-top:calc(20 * var(--u));
    font-family:var(--pre); font-weight:500;
    font-size:clamp(15px, calc(18 * var(--u)), 20px);
    color:#3a3a40; max-width:580px; line-height:1.7;
  }

  .b-hist__list{
    max-width:1080px; margin:0 auto;
    padding:0 calc(60 * var(--u));
    display:flex; flex-direction:column;
  }
  .b-hist__row{
    position:relative;
    display:grid; grid-template-columns: 1.2fr 1fr;
    align-items:center;
    padding:calc(48 * var(--u)) 0;
    border-bottom:1px solid rgba(20,20,30,.10);
  }
  .b-hist__row:first-child{ border-top:1px solid rgba(20,20,30,.10); }
  .b-hist__year{
    font-family:var(--disp); font-weight:400;
    font-size:clamp(64px, calc(180 * var(--u)), 220px);
    line-height:.85; letter-spacing:-.04em; color:var(--nj-ink);
    position:relative;
  }
  .b-hist__year .mon{
    font-family:var(--disp);
    font-size:.36em;
    color:var(--nj-pink);
    margin-left:.1em; vertical-align:.4em;
    letter-spacing:-.02em;
  }
  .b-hist__row:nth-of-type(2) .b-hist__year .mon{ color:var(--nj-yellow); }
  .b-hist__row:nth-of-type(3) .b-hist__year .mon{ color:var(--nj-blue); }
  .b-hist__row:nth-of-type(4) .b-hist__year .mon{ color:var(--nj-pink); }
  .b-hist__row:nth-of-type(4) .b-hist__year{ position:relative; }
  .b-hist__row:nth-of-type(4) .b-hist__year::after{
    content:"NOW"; position:absolute; top:-8%; right:-8%;
    font-family:var(--mono); font-size:calc(14 * var(--u)); letter-spacing:.22em;
    color:#fff; background:var(--nj-pink);
    padding:calc(6 * var(--u)) calc(12 * var(--u)); border-radius:6px;
    transform:rotate(-6deg);
  }
  .b-hist__detail{
    padding-left:calc(40 * var(--u));
    border-left:1px solid rgba(20,20,30,.10);
  }
  .b-hist__detail .tag{
    display:inline-flex; align-items:center; gap:calc(8 * var(--u));
    padding:calc(6 * var(--u)) calc(12 * var(--u));
    border-radius:6px;
    background:rgba(20,20,30,.06);
    font-family:var(--mono); font-size:calc(11 * var(--u));
    letter-spacing:.18em; text-transform:uppercase; color:var(--nj-mute);
  }
  .b-hist__row.is-future .b-hist__detail .tag{ background:rgba(233,34,133,.12); color:var(--nj-pink); }
  .b-hist__detail h3{
    margin-top:calc(16 * var(--u));
    font-family:var(--pre); font-weight:800;
    font-size:clamp(20px, calc(26 * var(--u)), 30px);
    line-height:1.3; letter-spacing:-.02em;
  }
  .b-hist__detail p{
    margin-top:calc(10 * var(--u));
    font-family:var(--pre); font-size:calc(15 * var(--u)); line-height:1.7;
    color:var(--nj-mute);
  }

  /* ============ SAFETY ============ */
  .b-safe{
    position:relative;
    background:var(--nj-ink); color:#fff;
    padding:calc(160 * var(--u)) 0 calc(180 * var(--u));
    overflow:hidden;
  }
  .b-safe::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(60% 80% at 80% 20%, rgba(233,34,133,.18), transparent 60%),
      radial-gradient(50% 70% at 10% 80%, rgba(3,122,184,.16), transparent 60%);
    pointer-events:none;
  }
  /* gridlines in dark — 흰 가로줄 제거 */
  .b-safe::after{ display:none; }
  .b-safe__head{
    max-width:1080px; margin:0 auto calc(80 * var(--u));
    padding:0 calc(60 * var(--u));
    position:relative;
  }
  .b-safe__head .mono{
    display:flex; justify-content:space-between; align-items:center;
    font-family:var(--mono); font-size:calc(11 * var(--u));
    letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.7);
  }
  .b-safe__head h2{
    margin-top:calc(20 * var(--u));
    font-family:var(--disp); font-weight:400;
    font-size:clamp(48px, calc(140 * var(--u)), 180px);
    line-height:.92; letter-spacing:-.04em;
  }
  .b-safe__head h2 .pk{ color:var(--nj-pink); }
  .b-safe__head .sub{
    margin-top:calc(20 * var(--u));
    font-family:var(--pre); font-weight:500;
    font-size:clamp(15px, calc(18 * var(--u)), 20px);
    color:rgba(255,255,255,.78); max-width:580px; line-height:1.7;
  }

  .b-safe__grid{
    position:relative;
    max-width:1080px; margin:0 auto;
    padding:0 calc(60 * var(--u));
    display:grid; grid-template-columns:repeat(3, 1fr);
    gap:calc(20 * var(--u));
  }
  .b-safe__card{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.12);
    border-radius:calc(20 * var(--u));
    padding:calc(36 * var(--u)) calc(32 * var(--u)) calc(32 * var(--u));
    position:relative;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    transition:transform .25s, border-color .25s, background .25s;
    display:flex; flex-direction:column;
  }
  .b-safe__card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,255,255,.32);
    background:rgba(255,255,255,.06);
  }
  .b-safe__card .num{
    font-family:var(--disp); font-weight:400;
    font-size:calc(72 * var(--u));
    line-height:.9; letter-spacing:-.03em;
    color:rgba(255,255,255,.12);
  }
  .b-safe__card:nth-child(1) .num{ color:rgba(3,122,184,.5); }
  .b-safe__card:nth-child(2) .num{ color:rgba(233,34,133,.5); }
  .b-safe__card:nth-child(3) .num{ color:rgba(247,185,36,.5); }
  .b-safe__card .stripe{
    margin-top:calc(20 * var(--u));
    width:calc(48 * var(--u)); height:4px;
    background:var(--nj-pink); border-radius:4px;
  }
  .b-safe__card:nth-child(1) .stripe{ background:var(--nj-blue); }
  .b-safe__card:nth-child(2) .stripe{ background:var(--nj-pink); }
  .b-safe__card:nth-child(3) .stripe{ background:var(--nj-yellow); }
  .b-safe__card h3{
    margin-top:calc(20 * var(--u));
    font-family:var(--pre); font-weight:800;
    font-size:clamp(22px, calc(28 * var(--u)), 30px);
    line-height:1.25; letter-spacing:-.02em;
  }
  .b-safe__card p{
    margin-top:max(12px, calc(14 * var(--u)));
    font-family:var(--pre); font-size:max(15px, calc(15 * var(--u))); line-height:1.7;
    color:rgba(255,255,255,.78);
  }
  .b-safe__card .meta{
    margin-top:auto; padding-top:calc(28 * var(--u));
    display:flex; justify-content:space-between; align-items:center;
    border-top:1px dashed rgba(255,255,255,.16);
    font-family:var(--mono); font-size:calc(11 * var(--u));
    letter-spacing:.18em; text-transform:uppercase;
    color:rgba(255,255,255,.7);
  }

  /* call-to-attention quote */
  .b-quote{
    position:relative; z-index:2;
    max-width:1080px; margin:calc(100 * var(--u)) auto 0;
    padding:0 calc(60 * var(--u));
  }
  .b-quote__inner{
    background:linear-gradient(120deg, var(--nj-pink) 0%, #c0186f 100%);
    border-radius:calc(22 * var(--u));
    padding:calc(48 * var(--u)) calc(48 * var(--u));
    color:#fff;
    display:grid; grid-template-columns: 1fr auto;
    gap:32px; align-items:center;
    position:relative; overflow:hidden;
  }
  .b-quote__inner::before{
    content:""; position:absolute; right:-60px; bottom:-60px;
    width:280px; height:280px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.16), transparent 70%);
  }
  .b-quote__inner h3{
    font-family:var(--pre); font-weight:800;
    font-size:clamp(24px, calc(36 * var(--u)), 42px);
    line-height:1.25; letter-spacing:-.025em;
  }
  .b-quote__inner h3 .disp{
    font-family:var(--disp); font-weight:400; font-size:1.1em;
    letter-spacing:-.02em;
  }
  .b-quote__inner p{
    margin-top:calc(12 * var(--u));
    color:rgba(255,255,255,.85);
    font-size:calc(15 * var(--u));
  }
  .b-quote__inner a{
    display:inline-flex; align-items:center; gap:calc(10 * var(--u));
    padding:calc(14 * var(--u)) calc(28 * var(--u));
    border-radius:999px;
    background:#fff; color:var(--nj-pink);
    font-weight:800; font-size:calc(15 * var(--u));
    z-index:1; white-space:nowrap;
  }

  /* footer color override for variant B */
  .b-page .njft{ background:#0a0a0d; }

  /* ---------- responsive ---------- */
  @media (max-width:980px){
    .b-hero__inner{ grid-template-columns:1fr; gap:32px; align-items:start; padding:32px 24px 64px; min-height:auto; }
    .b-hero__display{ font-size:64px; }
    .b-hero__corner{ display:none; }
    .b-hist__list, .b-hist__head, .b-safe__head, .b-safe__grid, .b-quote{ padding-left:24px; padding-right:24px; }
    .b-hist__row{ grid-template-columns:1fr; gap:16px; padding:32px 0; }
    .b-hist__year{ font-size:88px; }
    .b-hist__detail{ padding-left:0; border-left:0; }
    .b-safe__grid{ grid-template-columns:1fr; }
    .b-quote__inner{ grid-template-columns:1fr; padding:32px; }
  }


/* ============================================================
   인터랙션 — 스크롤 reveal (시안 B 전용 섹션)
   interactions.js와 짝. style.css의 @keyframes nj-reveal-up 재사용.
   ============================================================ */
.b-hist__row:not(.is-in),
.b-safe__card:not(.is-in),
.b-hero__lockup:not(.is-in),
.b-quote:not(.is-in) {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}
.b-hist__row.is-in,
.b-safe__card.is-in,
.b-hero__lockup.is-in,
.b-quote.is-in {
  animation: nj-reveal-up .75s cubic-bezier(.22,.61,.36,1) both;
}

/* timeline rows stagger */
.b-hist__row:nth-of-type(2).is-in { animation-delay: .10s; }
.b-hist__row:nth-of-type(3).is-in { animation-delay: .20s; }
.b-hist__row:nth-of-type(4).is-in { animation-delay: .30s; }

/* safety cards stagger */
.b-safe__card:nth-of-type(2).is-in { animation-delay: .10s; }
.b-safe__card:nth-of-type(3).is-in { animation-delay: .20s; }

/* lockup은 살짝 회전 더하기 */
.b-hero__lockup:not(.is-in) {
  transform: translateY(28px) rotate(0deg);
}
.b-hero__lockup.is-in {
  animation: b-lockup-in .8s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes b-lockup-in {
  from { opacity: 0; transform: translateY(28px) rotate(0deg); }
  to   { opacity: 1; transform: translateY(0) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .b-hist__row, .b-safe__card, .b-hero__lockup, .b-quote,
  .b-hist__row:not(.is-in), .b-safe__card:not(.is-in),
  .b-hero__lockup:not(.is-in), .b-quote:not(.is-in) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .b-hero__lockup { transform: rotate(2deg) !important; }
}

/* ============================================================
   FRAME.PNG 타겟 매칭
   - 히어로: sky.png 풀블리드 + 흰 카피
   - 자간: 더 타이트하게
   - HISTORY: 순백 + 중앙 정렬 제목 + 통일된 핑크 .mon
   - SAFETY: 인디고 그라데이션 + 중앙 정렬
   (앞 섹션 룰들을 덮어쓰는 override 레이어. 편집 시 여기서 미세 조정)
   ============================================================ */

/* ===== HERO ===== */
.b-hero{
  min-height:clamp(520px, 72vh, 720px);
  /* [DUMMY] 히어로 대표 사진 자리 — 다른 페이지 .gp-hero 남색과 동일하게 매칭
     (#2a2640 슬롯색 + rgba(15,12,28) 어두운 오버레이). 실제 이미지 확정 시 background 교체 */
  background:
    linear-gradient(180deg, rgba(15,12,28,.35) 0%, rgba(15,12,28,.78) 100%),
    #2a2640;
  color:#fff;
}
/* 이미지 슬롯 느낌의 대각선 교차선만 노출(그리드 col/row 라인은 숨김) */
.b-hero__grid{ display:block; }
.b-hero__grid .col, .b-hero__grid .row{ display:none; }
.b-hero__diag{ display:block; background:rgba(255,255,255,.10); }

/* [DUMMY] 플레이스홀더 라벨 (.slot.on-dark span 컨벤션과 동일 톤) */
.b-hero__dummy{
  position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--mono); font-size:calc(12 * var(--u)); letter-spacing:.22em;
  color:rgba(255,255,255,.62); background:rgba(42,38,64,.55); padding:6px 14px; white-space:nowrap;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}

.b-hero::before{ display:none; }
/* 아래 섹션 fade 없음 — 남색 히어로 → 다음 섹션은 깔끔한 경계로 전환 */
.b-hero::after{ display:none; }

/* 코너 라벨 — 남색 위라 전부 밝은 톤 */
.b-hero__corner{ z-index:2; }
.b-hero__corner.bl,
.b-hero__corner.br{ color:rgba(255,255,255,.55); text-shadow:none; }
.b-hero__corner.bl .dot,
.b-hero__corner.br .dot{ background:var(--nj-pink); }
.b-hero__inner{
  position:relative; z-index:2;
  min-height:clamp(420px, 56vh, 580px);
}

/* 코너 라벨 — 남색 플레이스홀더 위 가독성 위해 밝은 톤 통일 */
.b-hero__corner{ color:rgba(255,255,255,.6); }

.b-hero__korean{ margin-top:calc(20 * var(--u)); }
.b-hero__korean .k1,
.b-hero__korean .k2{
  color:#fff;
  letter-spacing:-.035em;
  font-size:clamp(20px, calc(32 * var(--u)), 38px);
  text-shadow:none;
}
.b-hero__korean .k1 .hl{
  background:linear-gradient(180deg, transparent 62%, rgba(247,185,36,.85) 62%);
}
.b-hero__copy{
  color:rgba(255,255,255,.82);
  text-shadow:none;
  font-weight:500;
}
.b-hero__copy .strong{ color:#fff; font-weight:700; }

.b-hero__lockup{
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.b-hero__tag{
  background:rgba(255,255,255,.15);
  color:#fff;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.b-hero__chips span{
  background:rgba(255,255,255,.92);
  color:var(--nj-ink);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.b-hero__chips span.yl{
  color:var(--nj-ink);
}

/* ===== 자간 (타이포 전반 좀 더 타이트) ===== */
.b-hist__head h2,
.b-safe__head h2{ letter-spacing:-.045em; }
.b-hist__year{ letter-spacing:-.045em; }
.b-hist__detail h3,
.b-safe__card h3{ letter-spacing:-.03em; }
.b-quote__inner h3{ letter-spacing:-.035em; }

/* ===== HISTORY ===== */
.b-hist{ background:#ffffff; }
.b-hist__head{ text-align:center; }
.b-hist__head .mono{ justify-content:center; }
.b-hist__head .sub{ margin-left:auto; margin-right:auto; }

/* 행별 .mon 컬러를 핑크로 통일 (Frame.png 일치) */
.b-hist__row:nth-of-type(2) .b-hist__year .mon,
.b-hist__row:nth-of-type(3) .b-hist__year .mon,
.b-hist__row:nth-of-type(4) .b-hist__year .mon{
  color:var(--nj-pink);
}
.b-hist__row{ border-bottom-color:rgba(20,20,30,.06); }
.b-hist__row:first-child{ border-top-color:rgba(20,20,30,.06); }

/* ===== SAFETY ===== */
.b-safe{
  background:linear-gradient(180deg, #1a1736 0%, #221b4a 50%, #1a1736 100%);
}
.b-safe::before{
  background:
    radial-gradient(60% 80% at 80% 20%, rgba(233,34,133,.20), transparent 60%),
    radial-gradient(50% 70% at 10% 80%, rgba(3,122,184,.22), transparent 60%);
}
.b-safe::after{ background:rgba(255,255,255,.10); }
.b-safe__head{ text-align:center; }
.b-safe__head .mono{ justify-content:center; }
.b-safe__head .sub{ margin-left:auto; margin-right:auto; }
.b-safe__card .num{ opacity:.55; }
.b-safe__card .meta{ border-top-color:rgba(255,255,255,.12); }

/* ===== 모바일 ===== */
@media (max-width:980px){
  .b-hero{
    background-position:center 55%;
    min-height:clamp(440px, 60vh, 560px);
  }
  .b-hero__inner{ align-items:start; padding:24px 24px 56px; }
}

/* ============================================================
   연도 숫자 — Archivo Black + 자릿수 일정한 tabular-nums.
   font-family는 var(--disp) ('Archivo Black', 'Pretendard', system-ui)
   기존에 잘 잡혀 있음. 여기서는 자릿폭 일정화 + 자간 미세조정만.
   ============================================================ */
.b-hist__year,
.b-hist__year .mon{
  font-feature-settings:'tnum' 1, 'lnum' 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.b-hist__year{
  letter-spacing:-.04em;
}
.b-hist__year .mon{
  letter-spacing:-.01em;
  font-weight: 400;
}

/* ============================================================
   브랜드 소개 — 항공뷰 사진(카드 안에 여백 두고) + 그 아래 협력 로고(노원구 × JUMP)
   ============================================================ */
.b-hero__lockup{ padding:calc(22 * var(--u)); }   /* 이미지 카드 패딩 축소 */
.b-hero__lockup .lk-photo{
  display:block; width:100%; height:auto;
  margin-top:12px; border-radius:14px; object-fit:cover;
}
.b-hero__lockup .lk-logos{
  margin-top:22px; display:flex; align-items:center; justify-content:center;
  gap:20px; flex-wrap:wrap;
}
.b-hero__lockup .lk-logos img{ height:34px; width:auto; display:block; }
.b-hero__lockup .lk-logos img:first-child{ height:64px; }   /* 노원구 로고만 크게 */