/* ============================================================
   2026-10-11 놀이나무 PC 디자인 시안 — 공용 컴포넌트 · 카테고리 메인 · 하위 화면 공통
   (Figma pC6BLmmlibrMSgxIV4pWDD 「컴포넌트 시트」·「서브_01수용자_01언론수용자 조사」)
   맨 뒤에 실려 이전 규칙(site.css · chart.css)을 덮는다. 색·간격은 --wd-* 토큰만.
   ============================================================ */

body { letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline-color: var(--wd-blue-strong); }

/* ---------- 제목 · 섹션 ---------- */
.nd-h2 { margin-bottom: 52px; font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--wd-navy); }
.nd-sec { padding-top: 120px; }
.nd-sec--play { padding: 80px 0 120px; }
.nd-sec--soft { padding-bottom: 120px; background: var(--wd-bg-soft); }
.nrm-survey > .nd-sec--soft:first-child { margin-top: 80px; }
.nrm-survey > .nd-sec--play + .nd-sec--soft { margin-top: 0; }

/* ---------- 버튼 (시안 컴포넌트 시트) ---------- */
.nd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; padding: 0 16px; border-radius: var(--wd-r-8);
  font: inherit; font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; white-space: nowrap;
  transition: background var(--wd-dur-fast) var(--wd-ease), color var(--wd-dur-fast) var(--wd-ease), box-shadow var(--wd-dur-fast) var(--wd-ease);
}
.nd-btn svg { flex: 0 0 auto; }
.nd-btn--blue { background: var(--wd-blue-strong); color: #fff; }
.nd-btn--blue:hover { background: var(--wd-blue-ink); }
.nd-btn--gray { background: #eaecee; color: var(--wd-gray); }
.nd-btn--gray:hover { background: var(--wd-line); color: var(--wd-navy); }
.nd-btn--line { background: #fff; color: var(--wd-blue-strong); box-shadow: inset 0 0 0 1px var(--wd-blue-strong); }
.nd-btn--line:hover { background: var(--wd-blue-soft); }
.nd-btn--ghost { background: #fff; color: var(--wd-body); box-shadow: inset 0 0 0 1px var(--wd-body); }
.nd-btn--ghost:hover { background: var(--wd-bg-soft); }
.nd-btn--sm { height: 38px; padding: 0 12px; font-size: 14px; }

/* 예전 버튼도 시안 모양으로 */
.wd-btn { height: 44px; min-width: 0; padding-inline: 16px; border-radius: var(--wd-r-8); font-size: 16px; font-weight: 500; }
.wd-btn--primary { background: var(--wd-blue-strong); }
.wd-btn--primary:hover { background: var(--wd-blue-ink); transform: none; }
.wd-btn--ghost { color: var(--wd-blue-strong); box-shadow: inset 0 0 0 1px var(--wd-blue-strong); }
.wd-btn--ghost:hover { background: var(--wd-blue-soft); color: var(--wd-blue-strong); }
.wd-btn--sm { height: 38px; padding-inline: 12px; font-size: 14px; }

/* ---------- 배지 (분야 · 자료 유형) ---------- */
.nd-badge {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  padding: 5px 8px; border-radius: 500px;
  font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: #fff; white-space: nowrap;
}
.nd-badge--blue { background: var(--wd-blue-strong); }
.nd-badge--green { background: var(--wd-green-strong); }
.nd-badge--orange { background: var(--wd-orange-strong); }
.nd-badge--navy { background: var(--wd-ink); }

/* 증감 칩 */
.nd-delta {
  display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px 0 9px; border-radius: var(--wd-r-8);
  font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; white-space: nowrap;
}
.nd-delta.is-up { background: var(--wd-green-soft); color: var(--wd-green-strong); }
.nd-delta.is-down { background: var(--wd-red-soft); color: var(--wd-red); }

/* 회색 출처 알약 */
.nd-pill {
  display: inline-block; padding: 6px 8px; border-radius: 6px; background: #eef2f6;
  font-size: 14px; line-height: 1.2; letter-spacing: -0.02em; color: #5f6672; text-align: center;
}

/* more view ↗ */
.nd-more { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.nd-more i {
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  -webkit-mask: none; mask: none; position: relative;
}
.nd-more i::after {
  content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.75 7.75h4.5v4.5m0-4.5-4.5 4.5' fill='none' stroke='%230A1A3A' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.nd-more--dark { color: #313136; }
.nd-more--dark i { background: var(--wd-navy); }
.nd-more--dark i::after { filter: invert(1); }
.nd-more:hover { text-decoration: underline; text-underline-offset: 4px; }

/* 롤링 지시자 — 점 + 재생/정지 */
.nd-indicator { display: flex; justify-content: center; align-items: center; gap: 24px; }
.nd-indicator__dots { display: flex; align-items: center; gap: 12px; }
.nd-indicator__dots button { width: 8px; height: 8px; padding: 0; border-radius: 500px; background: var(--wd-line); transition: width var(--wd-dur-fast) var(--wd-ease), background var(--wd-dur-fast) var(--wd-ease); }
.nd-indicator__dots button[aria-current="true"] { width: 24px; background: var(--wd-navy); }
.nd-indicator__dots button:hover { background: var(--wd-ink); }
.nd-indicator__play, .nd-indicator__pause { width: 16px; height: 16px; display: grid; place-items: center; color: var(--wd-navy); opacity: .45; }
.nd-indicator__pause { margin-left: -16px; }
.nd-indicator__play[aria-pressed="true"], .nd-indicator__pause[aria-pressed="true"] { opacity: 1; }

/* ---------- 좌우 분할 캐러셀 (새로 나온 자료 · 연도별 변화) ---------- */
.nd-feature { display: grid; grid-template-columns: minmax(0, 1fr) 888px; gap: 40px; align-items: center; }
.nd-feature__side .nd-h2 { margin-bottom: 0; }
.nd-feature__text { margin-top: 52px; }
.nd-feature__title { margin-top: 22px; font-size: 28px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: var(--wd-ink); }
.nd-feature__title a:hover { text-decoration: underline; text-underline-offset: 5px; }
.nd-feature__desc {
  max-width: 400px; margin-top: 14px; font-size: 16px; line-height: 1.6; letter-spacing: -0.02em; color: var(--wd-body);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nd-feature__source { margin-top: 30px; font-size: 14px; color: var(--wd-text-muted); }
.nd-feature__panel {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 590px; padding: 104px 114px; border-radius: var(--wd-r-30); background: var(--wd-panel);
}
.nd-feature__card {
  display: block; width: 100%; min-height: 382px; padding: 34px 40px 36px;
  border-radius: var(--wd-r-24); background: #fff;
}
.nd-feature__card[hidden], .nd-feature__text[hidden] { display: none; }
a.nd-feature__card:hover .nd-feature__card-title { color: var(--wd-blue-strong); }
.nd-feature__card-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.nd-feature__card-title { min-width: 0; font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--wd-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-feature__card-date { flex: 0 0 auto; font-size: 15px; color: var(--wd-gray); }
.nd-feature__thumb {
  display: flex; align-items: center; justify-content: center; height: 246px; margin-top: 28px; padding: 20px;
  border-radius: var(--wd-r-12); background: #f4f5f6; overflow: hidden;
}
.nd-feature__thumb .hm-latest__cover { height: 100%; width: auto; border-radius: 4px; box-shadow: 0 8px 20px rgba(10, 26, 58, .12); }
.nd-feature__thumb .hm-latest__chart { display: block; width: 100%; }
.nd-feature__thumb .hm-latest__thumb-empty { color: var(--wd-border-strong); }
.nd-feature__arrow {
  position: absolute; top: 50%; width: 36px; height: 36px; margin-top: -18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M26.25 1.5 9.75 18l16.5 16.5' fill='none' stroke='%231E1E20' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 36px no-repeat;
  border-radius: 6px;
}
.nd-feature__arrow:hover { background-color: rgba(255, 255, 255, .6); }
.nd-feature__arrow--prev { left: 37px; }
.nd-feature__arrow--next { right: 43px; transform: scaleX(-1); }
.nd-feature__main .nd-indicator { margin-top: 36px; }

/* 연도별 변화 카드 — 시안 「연도별 변화」 흰 카드 */
.nd-feature__card--chart { padding: 30px; }
.nd-feature__card--chart .dv-card__head { padding: 0; }
.nd-feature__card--chart .dv-card__body { padding: 20px 0 0; }
.nd-feature__card--chart .dv-raw { padding: 16px 0 0; }
.nd-feature__card--chart .dv-card__source { padding: 16px 0 0; }
.nrm-history .nd-feature__panel { padding: 56px 104px; }

/* ---------- 전폭 배너 ---------- */
.nd-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin: 120px 0; }
.nd-banners--survey { margin-top: 120px; }
.nd-banner {
  --pl: max(var(--wd-pad), calc((100vw - 1400px) / 2));
  position: relative; display: flex; align-items: center; height: 220px; overflow: hidden; color: var(--wd-navy);
}
.nd-banner--left { padding-left: var(--pl); border-radius: 0 var(--wd-r-24) var(--wd-r-24) 0; }
.nd-banner--right { padding-left: 40px; border-radius: var(--wd-r-24) 0 0 var(--wd-r-24); }
.nd-banner--light { background: linear-gradient(163deg, #ccdcec 0.7%, #dae6f6 49.6%, #e2e9fb 99.8%); }
.nd-banner--sky { background: linear-gradient(101deg, #a1c9eb 0%, #c1def6 68%, #c8e6ff 100%); }
.nd-banner--navy { background: linear-gradient(101deg, #2e4c7e 0%, #33558d 50%, #3c5e97 100%); color: #fff; }
.nd-banner__text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 12px; }
.nd-banner__title { font-size: 28px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.nd-banner__img { position: absolute; z-index: 1; top: -12px; left: calc(var(--pl) + 369px); width: 320px; height: 239px; transition: transform .5s var(--wd-ease); }
.nd-banner--right .nd-banner__img { left: 389px; top: 3px; width: 297px; height: 222px; }
.nd-banner__img::before {
  content: ""; position: absolute; left: 54px; top: 33px; width: 200px; height: 200px; border-radius: 50%;
  background: rgba(168, 209, 248, 0.7); filter: blur(50px);
}
.nd-banner__img img { position: relative; width: 100%; height: 100%; object-fit: contain; }
.nd-banner:hover .nd-banner__img { transform: translateY(-6px); }
.nd-banner:hover .nd-banner__title { text-decoration: underline; text-underline-offset: 5px; }
.nd-banners--survey .nd-banner--left .nd-banner__img { left: calc(var(--pl) + 295px); top: -23px; width: 355px; height: 265px; }
.nd-banners--survey .nd-banner--right .nd-banner__img { left: 442px; top: -12px; width: 320px; height: 239px; }

/* ---------- 그래프 (chart.js renderND) · 말풍선 ---------- */
.nd-chart { position: relative; outline-offset: 4px; }
.nd-chart:focus-visible { outline: 2px solid var(--wd-blue-strong); border-radius: 8px; }
.nd-chart__wrap.is-scroll { overflow-x: auto; overflow-y: hidden; }
.nd-chart__inner { position: relative; }
.nd-chart svg { display: block; width: 100%; height: auto; font-family: var(--wd-font-primary); }
.nd-tip {
  position: absolute; z-index: 3; pointer-events: none; opacity: 0;
  padding: 14px; min-width: 90px; border: 1px solid var(--wd-line); border-radius: var(--wd-r-12);
  background: #fff; box-shadow: var(--wd-shadow-tip); color: #1e1e20;
  transform: translateX(20px);
  transition: opacity var(--wd-dur-fast) var(--wd-ease), left .15s ease, top .15s ease, transform .15s ease;
}
.nd-tip.is-flip { transform: translateX(calc(-100% - 20px)); }
.nd-tip.is-on { opacity: 1; }
.nd-tip__x { display: block; font-size: 12px; line-height: 1; color: var(--wd-gray); }
.nd-tip__row { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.nd-tip__v { display: inline-flex; align-items: baseline; gap: 2px; white-space: nowrap; }
.nd-tip__v b { font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.nd-tip__v small { font-size: 14px; font-weight: 800; }
.hm-card--big .nd-tip { border-color: var(--wd-line); }

/* ---------- 지표 보기 카드 ---------- */
.nrm-indicators > .nd-ind--lg, .nrm-indicators > .nd-ind:only-child, .nrm-indicators > .nrm-indicators__block:only-child { grid-column: 1 / -1; }
/* 통계표 상세 「원자료 표」 카드 */
section.dv-card { padding: 30px; }
section.dv-card .dv-raw { padding: 20px 0 0; }
.nrm-indicators + section.dv-card { margin-top: 60px; }
.nrm-indicators { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 0; }
.nrm-indicators__block { min-width: 0; }
.nd-ind { display: flex; flex-direction: column; height: 100%; }
.dv-card {
  border: 0; border-radius: var(--wd-r-24); background: #fff; box-shadow: var(--wd-shadow-card2); overflow: visible;
}
.nd-ind__card { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 480px; padding: 30px 30px 24px; }
.dv-card__head { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 0; }
.dv-card__title { font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--wd-ink); }
.dv-card__q { margin-top: 14px; font-size: 16px; line-height: 1.6; letter-spacing: -0.02em; color: var(--wd-body); }
.nd-ind__card .dv-card__head .dv-toggle { margin-top: -15px; }
.nd-ind__card .dv-card__body { flex: 1 1 auto; padding: 24px 0 0; }
.nd-ind__card .dv-raw { flex: 1 1 auto; padding: 24px 0 0; }
.dv-card__source {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 0 0; border: 0; background: transparent; font-size: 13px; color: var(--wd-gray);
}
.dv-card__table-link { font-size: 13px; color: var(--wd-gray); text-decoration: underline; text-underline-offset: 3px; }
.dv-card__table-link:hover { color: var(--wd-blue-strong); }
.nd-ind__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 40px; }

/* 그래프 / 표 토글 (시안 「Togle」) */
.dv-toggle { flex: 0 0 auto; display: inline-flex; gap: 0; padding: 10px; border: 1px solid var(--wd-line); border-radius: var(--wd-r-16); background: #fff; }
.dv-toggle button {
  min-width: 60px; height: 38px; padding: 0 12px; border-radius: var(--wd-r-8);
  font-size: 14px; font-weight: 500; letter-spacing: -0.02em; color: var(--wd-navy);
}
.dv-toggle button[aria-pressed="true"] { background: var(--wd-navy); color: #fff; }
.dv-toggle button:not([aria-pressed="true"]):hover { background: var(--wd-bg-soft); }

/* 비교 기준 탭 */
.dv-tabs { gap: 8px; padding: 18px 0 0; }
.dv-tabs button { height: 42px; padding: 0 16px; border: 1px solid var(--wd-line); border-radius: 500px; font-size: 14px; font-weight: 500; color: var(--wd-body); }
.dv-tabs button:hover { border-color: var(--wd-blue-strong); color: var(--wd-blue-strong); }
.dv-tabs button[aria-selected="true"] { background: var(--wd-blue-strong); border-color: var(--wd-blue-strong); color: #fff; }

/* ---------- 원자료 표 (시안 「통계표 상세 원자료 표」) ---------- */
.dv-raw__unit { margin-bottom: 14px; font-size: 14px; color: var(--wd-gray); text-align: right; }
.dv-raw table { min-width: 560px; font-size: 16px; border-top: 1px solid var(--wd-gray); }
.dv-raw th, .dv-raw td { height: 60px; padding: 0 30px; border-bottom: 1px solid var(--wd-line); border-right: 1px solid var(--wd-line); letter-spacing: -0.02em; }
.dv-raw tr > :last-child { border-right: 0; }
.dv-raw thead th { background: var(--wd-panel); font-weight: 500; color: var(--wd-navy); text-align: right; }
.dv-raw thead th:first-child { text-align: left; }
.dv-raw td { color: var(--wd-body); }
.dv-raw tbody th { font-weight: 400; color: var(--wd-body); text-align: left; background: #fff; }
.dv-raw__foot { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; font-size: 14px; color: var(--wd-gray); }
.dv-raw__foot a { color: var(--wd-blue-strong); text-decoration: underline; text-underline-offset: 3px; }

/* 메타 표 (시안 「표 정보(메타) 표」) */
.wd-spec { font-size: 16px; border-top: 1px solid var(--wd-gray); }
.wd-spec th, .wd-spec td { height: 66px; padding: 0 30px; border-bottom: 1px solid var(--wd-line); }
.wd-spec th { width: 30.7%; background: var(--wd-panel); font-weight: 500; color: var(--wd-navy); }
.wd-spec td { color: var(--wd-body); }

/* ---------- 직접 해보기 (시안 3단) ---------- */
.nrm-play { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 36px; align-items: start; }
.nrm-play__tabs { display: flex; flex-direction: column; gap: 18px; }
.nrm-play__tab {
  /* button 은 내용을 세로 가운데로 놓는다 — 시안처럼 알약을 위에 붙이려고 flex 로 위에서부터 쌓는다 */
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  width: 100%; min-height: 100px; padding: 20px 56px 20px 20px; text-align: left;
  border: 1px solid var(--wd-line); border-radius: var(--wd-r-24); background: #fff;
  box-shadow: 0 20px 28px rgba(206, 216, 226, 0.2);
  transition: background var(--wd-dur) var(--wd-ease), border-color var(--wd-dur) var(--wd-ease);
}
.nrm-play__tab:hover { border-color: var(--wd-ink); }
.nrm-play__kind {
  display: inline-flex; padding: 8px 10px; border-radius: 500px; background: var(--wd-panel);
  font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: var(--wd-ink);
}
.nrm-play__tab > svg { position: absolute; right: 20px; top: 26px; color: var(--wd-navy); }
.nrm-play__tab-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nrm-play__how { display: none; margin-top: 18px; font-size: 14px; font-weight: 500; line-height: 1.55; letter-spacing: -0.02em; color: #fff; }
.nrm-play__tab[aria-selected="true"] { min-height: 180px; border-color: var(--wd-ink); background: var(--wd-ink); box-shadow: none; }
.nrm-play__tab[aria-selected="true"] .nrm-play__kind { background: #fff; }
.nrm-play__tab[aria-selected="true"] > svg { color: #fff; }
.nrm-play__tab[aria-selected="true"] .nrm-play__how { display: block; }
.nrm-play__panel { min-width: 0; }
.nrm-play__card { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 36px; align-items: stretch; }
.nrm-play__stage, .nrm-play__info { min-height: 534px; border: 1px solid #e1e6eb; border-radius: var(--wd-r-24); box-shadow: var(--wd-shadow-soft); }
.nrm-play__stage { min-width: 0; padding: 40px; background: #fff; }
.nrm-play__stage .dv-card__body { padding: 0; }
.nrm-play__stage .dv-raw { padding: 0; }
.nrm-play__info { display: flex; flex-direction: column; padding: 30px; background: #f7f8f9; }
.nrm-play__info .dv-card__title { font-size: 28px; font-weight: 600; line-height: 1.4; color: var(--wd-navy); }
.nrm-play__q { margin-top: 16px; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--wd-ink); }
.nrm-play__text { margin-top: 16px; font-size: 16px; line-height: 1.5; color: var(--wd-body); }
.nrm-play__src { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--wd-gray); }
.nrm-play__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; padding-top: 24px; }

/* 체험형 엔진 안 조작부 — 시안 버튼 · 입력칸 모양 */
.nrm-interaction .mini {
  height: 40px; padding: 0 14px; border: 0; border-radius: var(--wd-r-8); background: #fff;
  box-shadow: inset 0 0 0 1px var(--wd-line); font-size: 15px; font-weight: 500; color: var(--wd-body);
}
.nrm-interaction .mini:hover { box-shadow: inset 0 0 0 1px var(--wd-blue-strong); color: var(--wd-blue-strong); }
.nrm-interaction .mini[aria-pressed="true"] { background: var(--wd-blue-strong); box-shadow: none; color: #fff; }
.nrm-interaction .kbd { gap: 8px; margin-top: 16px; font-size: 15px; }
.nrm-interaction .kbd input[type=number], .nrm-interaction .kbd select, .nrm-interaction .xp__bar select {
  height: 40px; padding: 0 10px; border: 1px solid var(--wd-line); border-radius: var(--wd-r-8); background: #fff; font-size: 15px;
}
.nrm-interaction :focus-visible { outline-color: var(--wd-blue-strong); }

/* ---------- 자료 목록 (시안 「폼_자료실 표」) ---------- */
.nrm-acc__caption {
  height: 66px; display: flex; align-items: center; justify-content: center;
  border-top: 1px solid var(--wd-gray); border-bottom: 1px solid var(--wd-line); background: var(--wd-panel);
  font-size: 16px; font-weight: 500; color: var(--wd-navy);
}
.nrm-acc { border-top: 0; }
.nrm-acc__caption + .nrm-acc { border-top: 0; }
.nrm-acc:not(.nrm-acc__caption + .nrm-acc) { border-top: 1px solid var(--wd-gray); }
.nrm-acc__more .nrm-acc { border-top: 0; }
.nrm-acc__item { border-bottom: 1px solid var(--wd-line); }
.nrm-acc__item > summary { align-items: center; gap: 20px; padding: 24px 30px; }
.nrm-acc__item > summary:hover { background: var(--wd-bg-soft); }
.nrm-acc__item > summary::after {
  content: ""; width: 10px; height: 6px; margin-left: auto; flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231E1E20' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--wd-dur-fast) var(--wd-ease);
}
.nrm-acc__item[open] > summary::after { content: ""; transform: rotate(180deg); }
.nrm-acc__head { display: flex; flex-direction: column; gap: 14px; min-width: 0; flex: 1 1 auto; }
.nrm-acc__title { font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: var(--wd-ink); }
.nrm-acc__meta, .nrm-acc__sum { font-size: 15px; line-height: 1.4; color: var(--wd-body); }
.nrm-acc__sum { margin-top: -14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nrm-acc__body { padding: 0 30px 24px; }
.nrm-acc__source { margin-top: 0; font-size: 14px; color: var(--wd-gray); }
.nrm-acc__links { gap: 10px; margin-top: 14px; }
.nrm-acc__more > summary {
  height: 44px; margin-top: 24px; padding: 0 16px; border: 0; border-radius: var(--wd-r-8);
  background: #fff; box-shadow: inset 0 0 0 1px var(--wd-body); font-size: 16px; font-weight: 500; color: var(--wd-body);
}
.nrm-acc__more > summary:hover { background: var(--wd-bg-soft); color: var(--wd-navy); }
.nrm-acc__note { font-size: 14px; color: var(--wd-gray); }

/* ---------- 하위 화면 공통 (목록 · 상세 · 검색) ---------- */
.nd-tabs-wrap--inline { padding: 0 0 40px; }
.nrm-sub-title { margin: 80px 0 28px; padding: 0; border: 0; font-size: 32px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--wd-navy); }
.nrm-sub-head { margin: 80px 0 28px; padding: 0; border: 0; align-items: center; }
.nrm-more { font-size: 16px; font-weight: 500; color: var(--wd-body); }
.wd-eyebrow { color: var(--wd-blue-strong); }
.wd-sec-title { color: var(--wd-navy); }

.nrm-filters { gap: 10px; padding: 20px; margin-bottom: 32px; border-radius: var(--wd-r-16); background: var(--wd-panel); }
.nrm-filters select {
  height: 44px; padding: 0 34px 0 12px; min-width: 170px; border: 1px solid var(--wd-line); border-radius: var(--wd-r-8);
  font-size: 14px; color: var(--wd-navy); -webkit-appearance: none; appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231E1E20' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") right 12px center / 10px 6px no-repeat;
}
.nrm-filters__reset { font-size: 14px; color: var(--wd-body); }

.nrm-list { border-top: 1px solid var(--wd-gray); }
.nrm-list__item { border-bottom: 1px solid var(--wd-line); }
.nrm-list__item > a { grid-template-columns: 128px minmax(0, 1fr) auto; gap: 8px 20px; padding: 24px 30px; }
.nrm-list__item--graph > a { grid-template-columns: 128px minmax(0, 1fr) auto 150px; }
.nrm-list__item > a:hover { background: var(--wd-bg-soft); }
.nrm-list__type { justify-self: start; white-space: nowrap; padding: 5px 8px; border-radius: 500px; background: var(--wd-blue-soft); color: var(--wd-blue-ink); font-size: 14px; font-weight: 500; line-height: 1; }
.nrm-list__title { font-size: 16px; font-weight: 500; color: var(--wd-ink); }
.nrm-list__meta { font-size: 15px; color: var(--wd-body); }
.nrm-list__excerpt { font-size: 15px; color: var(--wd-body); }

.nrm-pagination { gap: 5px; margin-top: 48px; }
.nrm-pagination .page-numbers {
  min-width: 36px; height: 36px; padding: 0 6px; border: 0; border-radius: 500px;
  font-size: 14px; font-weight: 500; color: var(--wd-body);
}
.nrm-pagination .page-numbers.current { background: var(--wd-blue-strong); color: #fff; font-weight: 600; }
.nrm-pagination a.page-numbers:hover { background: var(--wd-bg-soft); color: var(--wd-navy); }

/* 분류 칩 (시안 「전체 · 수용자 · 언론인 …」) */
.nrm-shelf-switch a {
  height: 42px; display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid var(--wd-line); border-radius: 500px;
  font-size: 14px; font-weight: 500; color: var(--wd-body);
}
.nrm-shelf-switch a:hover { border-color: var(--wd-blue-strong); color: var(--wd-blue-strong); }
.nrm-shelf-switch a.is-on { background: var(--wd-blue-strong); border-color: var(--wd-blue-strong); color: #fff; }

.nrm-searchbar { padding: 0; border: 0; gap: 10px; }
.nrm-searchbar input { height: 44px; padding: 0 12px; border: 1px solid var(--wd-line); border-radius: var(--wd-r-8); font-size: 14px; }
.nrm-searchbar input:focus { border-color: var(--wd-blue-strong); }
.nrm-searchbar .wd-btn { height: 44px; min-width: 82px; background: var(--wd-navy); }
.nrm-searchbar .wd-btn:hover { background: var(--wd-ink); }
.nrm-noresult, .nrm-empty { border-radius: var(--wd-r-16); background: var(--wd-bg-soft); }

/* 관련 자료 행 (nrm_asset_row) */
.hm-latest__list { border-top: 1px solid var(--wd-gray); }
.hm-latest__list li { border-bottom: 1px solid var(--wd-line); }
.hm-latest__list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 22px 30px; }
.hm-latest__list a:hover { background: var(--wd-bg-soft); }
.hm-latest__cat { padding: 5px 8px; border-radius: 500px; font-size: 14px; font-weight: 500; line-height: 1; background: var(--wd-blue-soft); color: var(--wd-blue-ink); }
.hm-latest__cat.is-mint { background: var(--wd-blue-soft); color: var(--wd-blue-ink); }
.hm-latest__cat.is-blue { background: var(--wd-green-soft); color: var(--wd-green-strong); }
.hm-latest__cat.is-amber { background: var(--wd-orange-soft); color: var(--wd-orange-strong); }
.hm-latest__cat.is-violet { background: var(--wd-chip); color: var(--wd-ink); }
.hm-latest__list .hm-latest__title { font-size: 16px; font-weight: 500; color: var(--wd-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-latest__type, .hm-latest__date { font-size: 15px; color: var(--wd-body); white-space: nowrap; }
.hm-latest__go { display: none; }

/* 도서관 표지 · 자료 카드 모서리 */
.nrm-shelf__cover, .nrm-report__cover { border-radius: var(--wd-r-12); border-color: var(--wd-line); }
.nrm-shelf__title { font-size: 16px; font-weight: 500; color: var(--wd-ink); }

/* ============================================================
   공용 컴포넌트 (inc/components.php) — 시안 「컴포넌트 시트」
   ============================================================ */
.nd-btn--navy { background: var(--wd-navy); color: #fff; }
.nd-btn--navy:hover { background: var(--wd-ink); }

/* 유형 배지 — 통계표 · 보고서 · 인포그래픽 · 공지 · 준비중 */
.nd-chip {
  display: inline-flex; align-items: center; flex: 0 0 auto; padding: 5px 8px; border-radius: 500px;
  font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; white-space: nowrap;
}
.nd-chip--blue { background: var(--wd-blue-soft); color: var(--wd-blue-ink); }
.nd-chip--orange { background: var(--wd-orange-soft); color: var(--wd-orange-strong); }
.nd-chip--green { background: var(--wd-green-soft); color: var(--wd-green-strong); }
.nd-chip--gray { background: var(--wd-chip); color: var(--wd-ink); }
.nd-chip--red { background: #fce9e9; color: var(--wd-red); }

/* 분류 칩 줄 (시안 「전체 · 수용자 · 언론인 …」) */
.nd-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.nd-chips a {
  height: 42px; display: inline-flex; align-items: center; padding: 0 16px;
  border: 1px solid var(--wd-line); border-radius: 500px; font-size: 14px; font-weight: 500; color: var(--wd-body);
  transition: border-color var(--wd-dur-fast) var(--wd-ease), color var(--wd-dur-fast) var(--wd-ease);
}
.nd-chips a:hover { border-color: var(--wd-blue-strong); color: var(--wd-blue-strong); }
.nd-chips a[aria-current="true"] { border-color: var(--wd-blue-strong); background: var(--wd-blue-strong); color: #fff; }

/* 필터 패널 (시안 회색 판 + 셀렉박스) */
.nrm-filters { align-items: center; padding: 24px; border-radius: var(--wd-r-30); }
.nrm-filters .nt-select { flex: 1 1 200px; max-width: 320px; }
.nrm-filters .nt-select select { color: var(--wd-navy); }
.nrm-filters .nd-btn { min-width: 82px; }

/* 페이지 번호 « ‹ 1 2 3 › » */
.nd-page { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 48px; }
.nd-page .page-numbers, .nd-page__arrow {
  min-width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0 6px; border-radius: 500px;
  font-size: 14px; font-weight: 500; color: var(--wd-body);
}
.nd-page__arrow { color: #787878; }
.nd-page__arrow.is-off { opacity: .35; }
.nd-page a:hover { background: var(--wd-bg-soft); color: var(--wd-navy); }
.nd-page .page-numbers.current { background: var(--wd-blue-strong); color: #fff; font-weight: 600; }
.nd-page .dots { min-width: 20px; }

/* 검색창 (시안 search box 입력부) */
.nd-searchbox { display: flex; gap: 10px; width: 100%; max-width: 520px; }
.nd-searchbox__field {
  flex: 1 1 auto; min-width: 0; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px;
  border: 1px solid var(--wd-line); border-radius: var(--wd-r-8); background: #fff; color: var(--wd-navy);
}
.nd-searchbox__field:focus-within { border-color: var(--wd-blue-strong); }
.nd-searchbox__field input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--wd-navy); }
.nd-searchbox__field input::placeholder { color: var(--wd-gray); }
.nd-searchbox .nd-btn { min-width: 82px; }
.nrm-archive-search, .nrm-tabs-wrap + .nd-searchbox, .wd-container > .nd-searchbox:first-child { margin: 0 0 24px; }
section .nd-tabs-wrap--inline + .nd-searchbox { margin: 0 auto 28px; }
.nrm-system .nd-searchbox { margin: 28px auto 0; }
.nrm-system__links a { height: 42px; display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid var(--wd-line); border-radius: 500px; font-size: 14px; font-weight: 500; color: var(--wd-body); }
.nrm-system__links a:hover { border-color: var(--wd-blue-strong); color: var(--wd-blue-strong); }

/* 자료 목록 행 (시안 「폼_통계자료실 목록」) */
.nd-rows { border-top: 1px solid var(--wd-gray); }
.nd-row { display: flex; align-items: center; gap: 24px; padding: 24px 30px; border-bottom: 1px solid var(--wd-line); }
.nd-row:hover { background: var(--wd-bg-soft); }
.nd-row__text { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 14px 12px; }
.nd-row__text > :not(.nd-chip) { grid-column: 2; }
.nd-row__text > .nd-chip { grid-row: 1; justify-self: start; }
.nd-row__text:not(:has(.nd-chip)) { grid-template-columns: minmax(0, 1fr); }
.nd-row__text:not(:has(.nd-chip)) > * { grid-column: 1; }
.nd-row__title { font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; color: var(--wd-ink); }
a.nd-row__title:hover { color: var(--wd-blue-strong); text-decoration: underline; text-underline-offset: 3px; }
.nd-row__meta { font-size: 15px; line-height: 1; color: var(--wd-body); }
.nd-row__actions { flex: 0 0 auto; display: flex; gap: 10px; }

/* 게시판 카드형 (시안 「폼_게시판_카드형」) */
.nd-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; }
.nd-card a { display: block; }
.nd-card__img { display: block; aspect-ratio: 440 / 250; overflow: hidden; border-radius: 20px; background: var(--wd-panel); }
.nd-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--wd-ease); }
.nd-card a:hover .nd-card__img img { transform: scale(1.04); }
.nd-card__body { display: block; padding: 24px 6px 0; }
.nd-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; }
.nd-card__title { min-width: 0; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: var(--wd-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nd-card a:hover .nd-card__title { color: var(--wd-blue-strong); }
.nd-card__date { flex: 0 0 auto; font-size: 14px; color: var(--wd-gray); }
.nd-card__meta { display: block; margin-top: 10px; font-size: 16px; color: var(--wd-body); }

/* 상세 내려받기 버튼 줄 */
.nd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* 도서관 — 묶음 토글 · 서가 */
.dv-toggle a {
  min-width: 60px; height: 38px; display: inline-grid; place-items: center; padding: 0 14px; border-radius: var(--wd-r-8);
  font-size: 14px; font-weight: 500; color: var(--wd-navy);
}
.dv-toggle a[aria-current="true"] { background: var(--wd-navy); color: #fff; }
.dv-toggle a:not([aria-current="true"]):hover { background: var(--wd-bg-soft); }
.nrm-shelf-bar .nd-searchbox { max-width: 420px; }
.nrm-shelf__head { padding-bottom: 16px; margin-bottom: 28px; border-bottom: 1px solid var(--wd-gray); font-size: 24px; font-weight: 700; color: var(--wd-navy); }
.nrm-shelf__head span { font-size: 15px; color: var(--wd-gray); }
.nrm-shelf__grid { gap: 40px 24px; }
.nrm-shelf__grid .nd-chip { margin-top: 16px; }
.nrm-shelf__title { margin-top: 10px; font-size: 17px; font-weight: 700; line-height: 1.4; }
.nrm-shelf__meta { font-size: 14px; color: var(--wd-gray); }

/* 새소식 목록 페이지 */
.hm-news__list--page { margin-top: 0; }

/* ---------- 반응형 ---------- */
@media (max-width: 1280px) {
  .nd-feature { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .nd-feature__panel { min-height: 0; padding: 56px 72px; }
  .nrm-play { grid-template-columns: minmax(0, 1fr); }
  .nrm-play__tabs { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .nrm-play__tab, .nrm-play__tab[aria-selected="true"] { width: auto; min-height: 0; padding: 14px 52px 14px 14px; }
  .nrm-play__tab > svg { top: 22px; right: 16px; }
  .nrm-play__how { display: none !important; }
  .nrm-play__card { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .nrm-play__stage, .nrm-play__info { min-height: 0; }
  .nd-banner__img { left: auto !important; right: 24px; }
}
@media (max-width: 900px) {
  .nd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
  .nrm-indicators { grid-template-columns: minmax(0, 1fr); }
  .nd-banners { grid-template-columns: 1fr; gap: 16px; }
  .nd-banner--left, .nd-banner--right { margin: 0 16px; padding-left: 28px; border-radius: var(--wd-r-24); }
}
@media (max-width: 640px) {
  .nd-cards { grid-template-columns: minmax(0, 1fr); }
  .nd-row { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 12px; }
  .nd-row__meta { line-height: 1.4; }
  .nd-searchbox { max-width: none; }
  .nrm-filters .nt-select { max-width: none; flex-basis: 100%; }
  .nd-h2 { margin-bottom: 28px; font-size: 30px; }
  .nd-sec { padding-top: 72px; }
  .nd-sec--play { padding: 48px 0 72px; }
  .nd-sec--soft { padding-bottom: 72px; }
  .nrm-survey > .nd-sec--soft:first-child { margin-top: 40px; }
  .nd-feature__text { margin-top: 28px; }
  .nd-feature__title, .nd-feature__card-title, .dv-card__title { font-size: 21px; }
  .nd-feature__panel, .nrm-history .nd-feature__panel { padding: 20px; border-radius: var(--wd-r-24); }
  .nd-feature__card { padding: 22px 20px; min-height: 0; }
  .nd-feature__arrow { display: none; }
  .nd-ind__card { min-height: 0; padding: 22px 18px; }
  .dv-card__head { flex-direction: column; }
  .nd-ind__card .dv-card__head .dv-toggle { margin-top: 0; }
  .nrm-play__stage { padding: 20px; }
  .nrm-play__info { padding: 22px; }
  .nrm-play__info .dv-card__title { font-size: 21px; }
  .nd-banners { margin: 72px 0; }
  .nd-banner { height: 160px; }
  .nd-banner__title { font-size: 22px; }
  .nd-banner__img, .nd-banners--survey .nd-banner .nd-banner__img { width: 180px; height: 140px; top: 10px; right: 0; }
  .nrm-acc__item > summary { padding: 18px 12px; }
  .nrm-acc__body { padding: 0 12px 18px; }
  .dv-raw th, .dv-raw td { padding: 0 14px; height: 48px; font-size: 14px; }
  .wd-spec th, .wd-spec td { padding: 12px 14px; height: auto; }
  .hm-latest__list a { grid-template-columns: auto minmax(0, 1fr); padding: 16px 12px; }
  .hm-latest__type, .hm-latest__date { grid-column: 2; }
  .nrm-list__item > a { padding: 18px 12px; }
}

/* 상세 머리 메타 줄 — 유형 배지 + 날짜 · 조회 (nrm_detail_meta) */
.nd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 15px; color: var(--wd-gray); }
.nd-meta a { color: var(--wd-body); text-decoration: underline; text-underline-offset: 3px; }
.nd-meta a:hover { color: var(--wd-blue-strong); }
.nrm-detail__head .wd-sec-title, .nrm-report__body .wd-sec-title { font-size: 36px; }

/* 체험형 그래프 공통 — 시안 「그래프 그리기」 (interaction.js) */
.nrm-interaction .gl { stroke: var(--wd-line); }
.nrm-interaction .gl--dot { stroke-dasharray: 2 4; }
.nrm-interaction .ax { font-family: var(--wd-font-primary); font-size: 14px; fill: var(--wd-gray); }
.nrm-interaction .apath { stroke: var(--wd-blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.nrm-interaction .adot { fill: var(--wd-blue); }
.nrm-interaction .upath { stroke: var(--wd-orange); stroke-width: 2.5; }
.nrm-interaction .vlab { font-family: var(--wd-font-primary); font-size: 16px; font-weight: 600; fill: var(--wd-blue-strong); }
.nrm-interaction .val { font-family: var(--wd-font-primary); font-size: 14px; font-weight: 600; fill: var(--wd-ink); }
.nrm-interaction .dhint { font-family: var(--wd-font-primary); font-size: 20px; font-weight: 500; fill: var(--wd-navy); letter-spacing: -0.02em; }
.nrm-interaction .dacts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.nrm-interaction .dbtn { min-width: 130px; height: 44px; padding: 0 16px; border-radius: var(--wd-r-8); font-size: 16px; font-weight: 500; }
.nrm-interaction .dbtn--line { background: #fff; color: var(--wd-gray); box-shadow: inset 0 0 0 1px var(--wd-line); }
.nrm-interaction .dbtn--line:hover { color: var(--wd-navy); box-shadow: inset 0 0 0 1px var(--wd-body); }
.nrm-interaction .dbtn--blue { background: var(--wd-blue-strong); color: #fff; }
.nrm-interaction .dbtn--blue:hover { background: var(--wd-blue-ink); }
.nrm-interaction .dbtn:disabled { opacity: .45; cursor: default; }
.nrm-interaction .kbd-wrap { margin-top: 12px; }
.nrm-interaction .kbd-wrap > summary { display: inline-block; cursor: pointer; font-size: 14px; color: var(--wd-gray); text-decoration: underline; text-underline-offset: 3px; }
.nrm-interaction .kbd-wrap .kbd { margin-top: 10px; }
.nrm-interaction .res { margin-top: 16px; padding: 14px 16px; border: 0; border-radius: var(--wd-r-12); background: var(--wd-bg-soft); font-size: 15px; line-height: 1.6; color: var(--wd-body); }
.nrm-interaction .res .big { color: var(--wd-blue-strong); font-family: var(--wd-font-primary); }

/* 체험형 — 슬라이더 좌우로 움직이기 (guessSlider) */
.nrm-interaction .gs {
  position: relative; padding: 100px 0 0 24px; min-height: 420px;
  border-left: 1px solid var(--wd-line); border-bottom: 1px solid var(--wd-line);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 50px, transparent 50px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='51'%3E%3Cpath d='M50.5 0v51M0 50.5h51' stroke='%23DFE1E6' stroke-dasharray='2 4'/%3E%3C/svg%3E");
}
.nrm-interaction .gs__row { position: relative; margin: 0 24px 0 0; }
.nrm-interaction .gs__num {
  position: absolute; right: 0; top: -88px; padding: 12px 16px; border: 1px solid var(--wd-line); border-radius: var(--wd-r-12);
  background: #fff; box-shadow: var(--wd-shadow-tip);
  font-family: var(--wd-font-primary); font-size: 30px; font-weight: 700; line-height: 1; color: var(--wd-navy); text-align: left;
}
.nrm-interaction .gs__num small { font-size: 14px; font-weight: 700; margin-left: 2px; }
.nrm-interaction .gs__in { height: 34px; }
.nrm-interaction .gs__in::-webkit-slider-runnable-track { height: 16px; border-radius: 500px; background: linear-gradient(90deg, var(--wd-blue) 0 var(--fill, 0px), #e5eaf0 var(--fill, 0px) 100%); }
.nrm-interaction .gs__in::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: -7px; border-radius: 50%; background: #fff; border: 6px solid var(--wd-blue); box-shadow: none; }
.nrm-interaction .gs__in::-moz-range-track { height: 16px; border-radius: 500px; background: #e5eaf0; }
.nrm-interaction .gs__in::-moz-range-progress { height: 16px; border-radius: 500px; background: var(--wd-blue); }
.nrm-interaction .gs__in::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 6px solid var(--wd-blue); }
.nrm-interaction .gs__in:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(29, 139, 238, .25); }
.nrm-interaction .gs__scale { height: 110px; margin: 50px 24px 0 0; }
.nrm-interaction .gs__track { top: 32px; left: 0; right: 0; height: 16px; border: 0; border-radius: 500px; background: #e5eaf0; }
.nrm-interaction .gs__gap { top: 32px; height: 16px; border-radius: 500px; background: var(--wd-green); opacity: .3; }
.nrm-interaction .gs__mk { top: 15px; width: 8px; height: 50px; margin-left: -4px; border-radius: 500px; }
.nrm-interaction .gs__mk--mine { background: var(--wd-green); }
.nrm-interaction .gs__mk--real { background: var(--wd-navy); }
.nrm-interaction .gs__mk span { top: auto; bottom: -26px; font-family: var(--wd-font-primary); font-size: 14px; font-weight: 600; }
.nrm-interaction .gs__mk--mine span { color: var(--wd-green-strong); }
.nrm-interaction .gs__mk--real span { top: -22px; bottom: auto; color: var(--wd-navy); }
.nrm-interaction .gs__ends { position: absolute; left: -6px; right: 0; bottom: -30px; padding: 0; font-family: var(--wd-font-primary); font-size: 14px; color: var(--wd-gray); }
.nrm-interaction .gs + .dacts { margin-top: 48px; }

/* 체험형 — 막대 끌어 맞히기 (dragBars) */
.nrm-interaction .rbar--muted { fill: #dee1e5; }
.nrm-interaction .hbar { opacity: 1; cursor: ns-resize; }

/* 좁은 화면 — 탭·칩 줄은 줄바꿈하지 않고 한 줄 가로 스크롤 (손가락으로 끌어 넘긴다) */
@media (max-width: 1280px) {
  .nrm-play__tabs {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    margin: 0 calc(var(--wd-pad) * -1); padding: 4px var(--wd-pad) 12px; scroll-padding-inline: var(--wd-pad); scrollbar-width: none;
  }
  .nrm-play__tabs::-webkit-scrollbar { display: none; }
  .nrm-play__tab { flex: 0 0 auto; scroll-snap-align: start; box-shadow: none; }
}
@media (max-width: 640px) {
  .nd-tabs-wrap { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .nd-tabs-wrap::-webkit-scrollbar, .nd-chips::-webkit-scrollbar { display: none; }
  .nd-tabs { flex-wrap: nowrap; }
  .nd-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--wd-pad) * -1) 16px; padding: 0 var(--wd-pad); }
  .nd-chips a { flex: 0 0 auto; }
}

/* 체험형 추가 9종 (2026-10-11) — 같은 문법: 블루 = 앞 값 · 오렌지 = 뒤 값, 판색 카드, 14~16px */
.nrm-interaction .lp__dot { background: var(--wd-blue); }
.nrm-interaction .lp__dot[data-k="2"] { background: var(--wd-orange); }
.nrm-interaction .lp__link { position: absolute; top: 25px; height: 2px; background: #c7ccd6; }
.nrm-interaction .lp__v { font-family: var(--wd-font-primary); font-size: 14px; color: var(--wd-ink); }
.nrm-interaction .lp__v--b { color: var(--wd-orange-strong); }
.nrm-interaction .lp__lb { font-size: 15px; color: var(--wd-body); }
.nrm-interaction .sb__leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; font-size: 14px; color: var(--wd-body); }
.nrm-interaction .sb__leg i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.nrm-interaction .sb__leg .lg-a { background: var(--wd-blue); border-radius: 50%; }
.nrm-interaction .sb__leg .lg-b { background: var(--wd-orange); border-radius: 50%; }
.nrm-interaction .figcap { margin-top: 12px; font-size: 14px; color: var(--wd-gray); text-align: center; }
.nrm-interaction .pr__row { display: grid; grid-template-columns: 28px minmax(100px, 36%) 1fr; gap: 10px; align-items: center; margin-bottom: 6px; }
.nrm-interaction .pr__rk { font-size: 15px; font-weight: 700; color: var(--wd-blue-strong); text-align: right; }
.nrm-interaction .cb { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.nrm-interaction .cb__card { padding: 20px; border-radius: var(--wd-r-16); background: var(--wd-bg-soft); }
.nrm-interaction .cb__card.is-hi { background: var(--wd-blue-soft); }
.nrm-interaction .cb__lb { min-height: 40px; font-size: 15px; line-height: 1.4; color: var(--wd-body); }
.nrm-interaction .cb__v { margin-top: 10px; font-size: 36px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--wd-navy); }
.nrm-interaction .cb__card.is-hi .cb__v { color: var(--wd-blue-strong); }
.nrm-interaction .cb__v small { margin-left: 2px; font-size: 15px; font-weight: 700; }
.nrm-interaction .xp__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.nrm-interaction .xp__bar select, .nrm-interaction .st__q { height: 40px; padding: 0 12px; border: 1px solid var(--wd-line); border-radius: var(--wd-r-8); background: #fff; font-size: 15px; }
.nrm-interaction .xp__views { display: inline-flex; padding: 4px; border: 1px solid var(--wd-line); border-radius: var(--wd-r-12); }
.nrm-interaction .xp__views button { height: 32px; padding: 0 12px; border: 0; border-radius: var(--wd-r-8); background: transparent; font-size: 14px; color: var(--wd-navy); }
.nrm-interaction .xp__views button[aria-pressed="true"] { background: var(--wd-navy); color: #fff; font-weight: 500; }
.nrm-interaction .tl__yr { font-family: var(--wd-font-primary); font-size: 22px; font-weight: 700; color: var(--wd-navy); }
.nrm-interaction .tl__ctl input[type=range] { accent-color: var(--wd-blue); }
.nrm-interaction .tm button { border-radius: var(--wd-r-8); border-color: #fff; }
.nrm-interaction .tm .nm { font-family: var(--wd-font-primary); font-size: 14px; }
.nrm-interaction .tm .vv { font-family: var(--wd-font-primary); font-size: 13px; }
/* 체험형 범주색 — 시안 블루 · 오렌지 · 그린 · 네이비 순 (dcol) · 표 */
.nrm-interaction { --d1: #1d8bee; --d2: #f97a4b; --d3: #1bdb88; --d4: #22355b; --d5: #8f5fb5; --d6: #b56f12; }
.nrm-interaction table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--wd-gray); font-size: 15px; }
.nrm-interaction table th, .nrm-interaction table td { height: 48px; padding: 0 16px; border-bottom: 1px solid var(--wd-line); text-align: right; white-space: nowrap; color: var(--wd-body); }
.nrm-interaction table th { background: var(--wd-panel); font-weight: 500; color: var(--wd-navy); }
.nrm-interaction table th:first-child, .nrm-interaction table td:first-child { text-align: left; }
.nrm-interaction table th[tabindex] { cursor: pointer; }