.nl{
  /* 3단 타이포 — 이 밖의 크기를 쓰지 않는다 */
  --nl-fs-title: clamp(1.45rem, 1.05rem + 1.5vw, 2.05rem);
  --nl-fs-body : 1rem;
  --nl-fs-cap  : .82rem;
  /* 색 — 상위 토큰 재사용 + fallback */
  --nl-ink   : var(--dn-accent-ink, var(--dn-ink,#0a0a0a));  /* 밝은 배경 위 글자 8.00:1 */
  --nl-body  : var(--dn-dark,       var(--dn-ink,#0a0a0a));
  --nl-sub   : var(--dn-sub,        var(--dn-sub,#6b6b6b));  /* 5.20:1 */
  --nl-mint  : var(--dn-accent,     #74d5ca);  /* «면» 전용 */
  --nl-bg    : var(--brand-bg,      var(--dn-cream,#f5f5f5));
  --nl-bg2   : var(--dn-cream2,     #e8eeed);
  --nl-line  : var(--dn-border,     var(--dn-border,#e4e4e4));
  /* 간격 — 컴포넌트 단위 변수. 지면마다 다른 값을 박지 않는다 */
  --nl-gap   : clamp(28px, 4vw, 64px);
  --nl-pad-y : clamp(48px, 7vw, 104px);
  --nl-max   : 1200px;
  font-size: var(--nl-fs-body);
  color: var(--nl-body);
}

/* ── 섹션 하나 : 좌우 2단(이미지 / 글) ───────────────────────────────── */
.nl-sec{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--nl-gap);
  align-items: center;
  max-width: var(--nl-max);
  margin: 0 auto;
  padding: var(--nl-pad-y) 24px;
}
.nl-sec + .nl-sec{ padding-top: 0 }

.nl-sec--tint{
  background: var(--nl-bg);
  box-shadow: -100vmax 0 0 var(--nl-bg), 100vmax 0 0 var(--nl-bg);  /* 배경만 좌우로 넓힌다 */
  clip-path: inset(0 -100vmax);
}

/* imageSide 로 좌우를 뒤집는다 — 마크업 순서는 그대로 두고 배치만 바꾼다 */
.nl-sec__media{ grid-column: 1; grid-row: 1 }
.nl-sec__text { grid-column: 2; grid-row: 1 }
.nl-sec[data-side="right"] .nl-sec__media{ grid-column: 2 }
.nl-sec[data-side="right"] .nl-sec__text { grid-column: 1 }

/* ── 이미지 : 구 사이트 그대로 — 둥근 모서리 없음 ────────────────────── */
.nl-sec__img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;      
  border: 0;
  background: var(--nl-bg2);
}
.nl-sec__media figure{ margin: 0 }
.nl-sec__cap{
  margin-top: 10px;
  font-size: var(--nl-fs-cap);
  color: var(--nl-sub);
}

/* ── 글 영역 ──────────────────────────────────────────────────────────── */
.nl-sec__num{
  display: block;
  font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--nl-ink);
  opacity: .18;                 /* 장식 숫자 — 본문 대비 규칙 밖(비정보) */
  margin-bottom: 6px;
}
.nl-sec__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--nl-fs-cap);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nl-ink);          /* 8.00:1 */
  margin-bottom: 14px;
}
.nl-sec__eyebrow::before{        /* 왼쪽 세로 바 — 민트는 «면»으로만 */
  content: "";
  width: 3px;
  height: 1em;
  background: var(--nl-mint);
  flex: none;
}
.nl-sec__title{
  font-size: var(--nl-fs-title);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.02em;
  color: var(--nl-ink);
  margin: 0 0 18px;
  word-break: keep-all;
}
.nl-sec__body{
  font-size: var(--nl-fs-body);
  line-height: 1.9;
  color: var(--nl-body);
  margin: 0;
  word-break: keep-all;
}
.nl-sec__body p{ margin: 0 0 .85em }
.nl-sec__body p:last-child{ margin-bottom: 0 }
.nl-sec__bigcopy{
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--nl-line);
  font-size: var(--nl-fs-title);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--nl-ink);
  word-break: keep-all;
}
.nl-sec__bigcopy p{ margin: 0 0 .3em }
.nl-sec__bigcopy p:last-child{ margin-bottom: 0 }

/* 이미지가 없는 섹션 — 한 단으로 펴고 가운데 정렬 */
.nl-sec--solo{ grid-template-columns: minmax(0,1fr) }
.nl-sec--solo .nl-sec__text{ grid-column: 1 }
.nl-sec--solo .nl-sec__num,
.nl-sec--solo .nl-sec__eyebrow,
.nl-sec--solo .nl-sec__title,
.nl-sec--solo .nl-sec__bigcopy{ text-align: center }
.nl-sec--solo .nl-sec__eyebrow{ justify-content: center }
.nl-sec--solo .nl-sec__body{ text-align: center; max-width: 76ch; margin-inline: auto }

/* ── 번호 항목 (01 / 제목 / 설명 · 가로 구분선) ───────────────────────── */
.nl-bullets{
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid var(--nl-line);
}
.nl-bullets__item{
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 4px 16px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--nl-line);
}
.nl-bullets__no{
  grid-row: 1 / span 2;
  font-size: var(--nl-fs-cap);
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--nl-ink);
  padding-top: .32em;
}
.nl-bullets__t{
  font-size: var(--nl-fs-body);
  font-weight: 700;
  line-height: 1.6;
  color: var(--nl-ink);
  word-break: keep-all;
}
.nl-bullets__d{
  font-size: var(--nl-fs-cap);
  line-height: 1.8;
  color: var(--nl-sub);
  word-break: keep-all;
}
.nl-bullets__d:empty{ display: none }

/* ── 이미지 묶음 그리드 ───────────────────────────────────────────────── */
.nl-gallery{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  max-width: var(--nl-max);
  margin: 0 auto;
  padding: 0 24px var(--nl-pad-y);
}
.nl-gallery img,
.nl-gallery video{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  background: var(--nl-bg2);
}

/* ── 고지 문구 2줄 ────────────────────────────────────────────────────── */
.nl-notice{
  max-width: var(--nl-max);
  margin: 0 auto;
  padding: 0 24px 28px;
  font-size: var(--nl-fs-cap);
  line-height: 1.7;
  color: var(--nl-sub);          /* 5.20:1 */
}
.nl-notice p{ margin: 0 }

/* ── 모바일 375px ─────────────────────────────────────────────────────── */
@media (max-width: 860px){
  .nl-sec{
    grid-template-columns: minmax(0,1fr);
    gap: 22px;
    padding: 40px 18px;
  }
  .nl-sec__media,
  .nl-sec__text,
  .nl-sec[data-side="right"] .nl-sec__media,
  .nl-sec[data-side="right"] .nl-sec__text{ grid-column: 1 }
  .nl-sec__media{ grid-row: 1 }
  .nl-sec__text { grid-row: 2 }
  .nl-sec--tint{ padding-left: 18px; padding-right: 18px }
  .nl-gallery{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; padding: 0 18px 40px }
  .nl-notice{ padding: 0 18px 24px }
  .nl-sec__body{ line-height: 1.8 }
}