/* 놀이나무 인터랙션 스타일
   원본: themes/norinamoo/static/interactions.html <style> 128-337 (공통 차트 요소 ~ oxQuiz)
   전 선택자에 .nrm-interaction 을 붙였다 — 원본의 `svg{...}` 가 전역이면 테마 아이콘까지 깨진다.
   색·서체·라운드는 카탈로그 :root 대신 테마 tokens.css 의 --wd-* 를 참조한다. */

.nrm-interaction {
  --card: var(--wd-surface-white);
  --card2: var(--wd-surface-light);
  --fg: var(--wd-text-primary);
  --body: var(--wd-text-secondary);
  --mut: var(--wd-text-tertiary);
  --dim: var(--wd-text-tertiary);
  --line: var(--wd-border-default);
  --line2: var(--wd-border-light);
  --ink: var(--wd-primary);
  --ink2: var(--wd-primary-hover);
  --ink-soft: var(--wd-primary-50);
  --ink-tx: var(--wd-primary);
  --pop: var(--wd-pop);
  --pop-soft: var(--wd-pop-soft);
  --pop-line: var(--wd-pop-line);
  /* #ff5a3c 는 흰 바탕에서 명도 대비 2.7:1 이라 글자로 쓸 수 없다 */
  --pop-tx: #c93a24;
  --mint: var(--wd-secondary);
  --d1: var(--wd-dv-1); --d2: var(--wd-dv-2); --d3: var(--wd-dv-3);
  --d4: var(--wd-dv-4); --d5: var(--wd-dv-5); --d6: var(--wd-dv-6);
  --grid: var(--wd-dv-grid);
  --axis: var(--wd-dv-axis);
  --muted-s: var(--wd-dv-muted);
  --hl: var(--wd-dv-highlight);
  --r: var(--wd-radius-sm);
  --rc: var(--wd-radius-md);
  --num: var(--wd-font-num);
  color: var(--body);
}

.nrm-interaction button { font-family: inherit; cursor: pointer; }
.nrm-interaction input,
.nrm-interaction select,
.nrm-interaction option,
.nrm-interaction textarea { font-family: inherit; font-size: 16px; }
.nrm-interaction :focus-visible { outline: 2px solid var(--pop); outline-offset: 2px; }

/* 카탈로그 카드 CSS 중 엔진이 실제로 쓰는 것만 (원본 109-113) */
.nrm-interaction .mini { font-size: 15.5px; padding: 4px 9px; border: 1px solid var(--line); background: var(--card2); color: var(--body); border-radius: var(--r); }
.nrm-interaction .mini:hover { border-color: var(--ink); color: var(--ink-tx); }
.nrm-interaction .mini[aria-pressed="true"] { background: var(--ink-tx); border-color: var(--ink-tx); color: #fff; }
.nrm-interaction .warn { margin: 9px 0 0; font-size: 15.5px; line-height: 1.6; background: var(--pop-soft); border: 1px solid var(--pop-line); color: #9c2f18; border-radius: var(--r); padding: 7px 10px; }

/* 원자료 표 (원본 119-126) — 자리는 PHP 가 그리고 내용은 JS 가 채운다 */
.nrm-interaction__raw { display: none; margin-top: 12px; overflow-x: auto; }
.nrm-interaction__raw.on { display: block; }
.nrm-interaction__raw table.raw { width: 100%; border-collapse: collapse; font-size: 15.5px; font-family: var(--wd-font-num); }
.nrm-interaction__raw table.raw th,
.nrm-interaction__raw table.raw td { border: 1px solid var(--wd-border-light); padding: 5px 7px; text-align: right; white-space: nowrap; }
.nrm-interaction__raw table.raw th { background: var(--wd-surface-light); color: var(--wd-text-primary); font-weight: 600; text-align: center; }
.nrm-interaction__raw table.raw td:first-child,
.nrm-interaction__raw table.raw th:first-child { text-align: left; font-family: var(--wd-font-primary); }

/* ---------- 공통 차트 요소 ---------- */
.nrm-interaction svg{display:block;width:100%;max-width:980px;margin:0 auto;height:auto;overflow:visible}
.nrm-interaction .ax{font-size:15.5px;fill:var(--axis);font-family:var(--num)}
.nrm-interaction .axl{font-size:16px;fill:var(--mut)}
.nrm-interaction .gl{stroke:var(--grid);stroke-width:1}
.nrm-interaction .val{font-size:16px;font-family:var(--num);font-weight:700;fill:var(--fg)}
.nrm-interaction .figcap{font-size:15.5px;color:var(--mut);margin:8px 0 0;text-align:center}

/* stackBar (E0) */
.nrm-interaction .sb{margin:0 0 12px}
.nrm-interaction .sb__q{font-size:16px;color:var(--fg);font-weight:600;margin:0 0 5px;display:flex;justify-content:space-between;gap:10px}
.nrm-interaction .sb__q em{font-style:normal;font-size:15.5px;color:var(--pop-tx);font-weight:700}
.nrm-interaction .sb__bar{display:flex;height:32px;border-radius:var(--r);overflow:hidden;background:var(--card2)}
.nrm-interaction .sb__seg{display:flex;align-items:center;justify-content:center;font-family:var(--num);font-size:15px;font-weight:600;color:#fff;
  transition:width .35s cubic-bezier(.25,.8,.3,1);overflow:hidden;white-space:nowrap;position:relative}
.nrm-interaction .sb__seg[data-mine="1"]{box-shadow:inset 0 0 0 2px var(--fg);z-index:2}
.nrm-interaction .sb__leg{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font-size:15px;color:var(--mut)}
.nrm-interaction .sb__leg span{display:inline-flex;align-items:center;gap:4px}
.nrm-interaction .sb__leg i{width:9px;height:9px;border-radius:2px;display:inline-block}
.nrm-interaction .sb__leg b.mine{color:var(--fg);font-weight:700}

/* guessSlider (E1) */
/* 슬라이더 손잡이와 아래 눈금 마커를 같은 좌표계에 둔다.
   ① 숫자를 옆에 두면 input 너비가 눈금 너비보다 좁아져 위치가 어긋난다 → 위로 뺀다.
   ② 네이티브 손잡이는 트랙 양끝에서 손잡이 절반만큼 들어가 멈춘다 →
      손잡이 크기를 18px 로 직접 지정하고 calc(9px + r*(100% - 18px)) 로 맞춘다. */
.nrm-interaction .gs__row{margin:2px 0 10px}
.nrm-interaction .gs__num{font-family:var(--num);font-size:25px;font-weight:800;color:var(--pop-tx);text-align:right;line-height:1.2;margin-bottom:2px}
.nrm-interaction .gs__num small{font-size:16px;font-weight:600;margin-left:1px}
.nrm-interaction .gs__in{-webkit-appearance:none;appearance:none;display:block;width:100%;height:24px;margin:0;background:transparent}
.nrm-interaction .gs__in:focus{outline:none}
.nrm-interaction .gs__in::-webkit-slider-runnable-track{height:8px;border-radius:4px;
  background:linear-gradient(90deg,var(--pop) 0 var(--fill,0px),var(--surface-subtle,#e3e9f2) var(--fill,0px) 100%)}
.nrm-interaction .gs__in::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--pop);border:3px solid #fff;box-shadow:0 0 0 1.5px var(--pop);margin-top:-5px;cursor:grab}
.nrm-interaction .gs__in:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--pop-line)}
.nrm-interaction .gs__in::-moz-range-track{height:8px;border-radius:4px;background:#e3e9f2}
.nrm-interaction .gs__in::-moz-range-progress{height:8px;border-radius:4px;background:var(--pop)}
.nrm-interaction .gs__in::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--pop);border:3px solid #fff}
.nrm-interaction .gs__in:disabled::-webkit-slider-thumb{cursor:default}
.nrm-interaction .gs__scale{height:60px;position:relative;margin:16px 0 6px}
.nrm-interaction .gs__track{position:absolute;left:9px;right:9px;top:28px;height:6px;background:var(--card2);border:1px solid var(--line2);border-radius:3px}
.nrm-interaction .gs__gap{position:absolute;top:28px;height:6px;background:var(--pop);opacity:.35;transition:all .5s}
.nrm-interaction .gs__mk{position:absolute;top:14px;width:2px;height:34px;margin-left:-1px;background:var(--fg);transition:left .5s cubic-bezier(.25,.8,.3,1)}
.nrm-interaction .gs__mk--mine{background:var(--pop)}
.nrm-interaction .gs__mk span{position:absolute;top:-15px;left:50%;transform:translateX(-50%);font-size:15px;font-family:var(--num);font-weight:700;white-space:nowrap}
.nrm-interaction .gs__mk--mine span{color:var(--pop-tx)}
.nrm-interaction .gs__mk--real span{color:var(--fg)}
.nrm-interaction .gs__ends{display:flex;justify-content:space-between;font-size:15px;color:var(--dim);font-family:var(--num);padding:0 4px}

/* 결과 문구 */
.nrm-interaction .res{margin-top:10px;font-size:16.5px;line-height:1.75;background:var(--card2);border:1px solid var(--line2);border-radius:var(--r);padding:10px 12px;display:none}
.nrm-interaction .res.on{display:block}
.nrm-interaction .res b{color:var(--fg)}
.nrm-interaction .res .big{font-family:var(--num);font-size:21px;font-weight:800;color:var(--pop-tx)}

/* drawIt (E2) */
.nrm-interaction .draw{position:relative;touch-action:none;cursor:crosshair}
.nrm-interaction .draw svg{touch-action:none}
.nrm-interaction .upath{fill:none;stroke:var(--pop);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.nrm-interaction .apath{fill:none;stroke:var(--ink);stroke-width:2.5}
.nrm-interaction .adot{fill:var(--ink)}
.nrm-interaction .ghost{fill:none;stroke:var(--muted-s);stroke-width:1.5;stroke-dasharray:3 4}

/* dragDot (E3) / dragBars (E4) */
.nrm-interaction .handle{fill:var(--pop);cursor:grab}
.nrm-interaction .handle:active{cursor:grabbing}
.nrm-interaction .hbar{fill:var(--pop);opacity:.85;cursor:ns-resize}
.nrm-interaction .rbar{fill:var(--ink)}
.nrm-interaction .kbd{display:flex;gap:6px;align-items:center;font-size:15.5px;color:var(--mut);margin-top:8px;flex-wrap:wrap}
.nrm-interaction .kbd input[type=number]{width:76px;font-family:var(--num);font-size:16px;padding:3px 6px;border:1px solid var(--line);border-radius:var(--r)}

/* bandPicker (E5) */
.nrm-interaction .bands{display:flex;gap:4px;align-items:flex-end;height:160px}
.nrm-interaction .band{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;cursor:pointer;background:none;border:0;padding:0}
.nrm-interaction .band i{display:block;width:100%;background:var(--muted-s);border-radius:var(--r) var(--r) 0 0;transition:background .2s,transform .2s}
.nrm-interaction .band:hover i{background:var(--ink)}
.nrm-interaction .band[aria-pressed="true"] i{background:var(--pop)}
.nrm-interaction .band span{font-size:15px;color:var(--mut);line-height:1.25;text-align:center;word-break:keep-all}
.nrm-interaction .band b{font-size:15px;font-family:var(--num);color:var(--fg)}

/* rankSort (E6) */
.nrm-interaction .rank{list-style:none;margin:0;padding:0}
.nrm-interaction .rank li{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--line);border-radius:var(--r);margin-bottom:5px;background:var(--card2);font-size:16px}
.nrm-interaction .rank li.ok{border-color:var(--mint);background:rgba(47,185,154,.09)}
.nrm-interaction .rank li.no{border-color:var(--pop-line);background:var(--pop-soft)}
.nrm-interaction .rank .no-num{font-family:var(--num);font-weight:800;color:var(--pop-tx);width:16px}
.nrm-interaction .rank .lbl{flex:1;word-break:keep-all}
.nrm-interaction .rank .mv{display:flex;gap:2px}
.nrm-interaction .rank .mv button{width:22px;height:22px;line-height:1;border:1px solid var(--line);background:#fff;border-radius:var(--r);font-size:15px;color:var(--mut)}
.nrm-interaction .rank .mv button:hover{border-color:var(--ink);color:var(--ink)}
.nrm-interaction .rank .ans{font-family:var(--num);font-size:15.5px;color:var(--mut);display:none}
.nrm-interaction .rank.done .ans{display:inline}

/* waffle (E7) */
.nrm-interaction .waf{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;max-width:290px}
.nrm-interaction .waf i{aspect-ratio:1;background:var(--card2);border:1px solid var(--line2);border-radius:1px;transition:background .25s,border-color .25s}
.nrm-interaction .waf i.on{background:var(--pop);border-color:var(--pop)}
.nrm-interaction .waf i.gs{background:transparent;border:1.5px solid var(--ink)}
.nrm-interaction .waf-row{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}

/* choicePoll (E8) */
.nrm-interaction .opts{display:flex;flex-direction:column;gap:5px}
.nrm-interaction .opt{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--line);background:var(--card2);border-radius:var(--r);font-size:16px;text-align:left;color:var(--body);position:relative;overflow:hidden}
.nrm-interaction .opt:hover{border-color:var(--ink)}
.nrm-interaction .opt[aria-pressed="true"]{border-color:var(--pop);border-width:2px}
.nrm-interaction .opt .fill{position:absolute;inset:0 auto 0 0;background:var(--ink-soft);width:0;transition:width .5s cubic-bezier(.25,.8,.3,1);z-index:0}
.nrm-interaction .opt[aria-pressed="true"] .fill{background:var(--pop-soft)}
.nrm-interaction .opt .lb,
.nrm-interaction .opt .pc{position:relative;z-index:1}
.nrm-interaction .opt .lb{flex:1;word-break:keep-all}
.nrm-interaction .opt .pc{font-family:var(--num);font-weight:700;font-size:16px;color:var(--fg);opacity:0;transition:opacity .3s}
.nrm-interaction .opts.done .pc{opacity:1}

/* crosstabExplorer (E9) */
.nrm-interaction .xp__bar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.nrm-interaction .xp__bar select{font-family:inherit;font-size:16px;padding:4px 7px;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--fg);max-width:100%}
.nrm-interaction .xp__views{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.nrm-interaction .xp__views button{font-size:15.5px;padding:4px 10px;border:0;background:#fff;color:var(--mut)}
.nrm-interaction .xp__views button[aria-pressed="true"]{background:var(--ink-tx);color:#fff;font-weight:700}
.nrm-interaction .xp__rows{margin-top:4px}
.nrm-interaction .xp__row{margin-bottom:9px}
.nrm-interaction .xp__row .nm{display:flex;justify-content:space-between;font-size:15.5px;color:var(--body);margin-bottom:3px;gap:8px}
.nrm-interaction .xp__row .nm b{color:var(--fg)}
.nrm-interaction .xp__row .nm em{font-style:normal;font-family:var(--num);color:var(--dim);font-size:15px}
.nrm-interaction .small-n{color:var(--pop-tx);font-weight:700}

/* slopeArrow (E10) / lollipop (E14) */
.nrm-interaction .lp__row{display:grid;grid-template-columns:minmax(110px,36%) 1fr;gap:12px;align-items:center;margin-bottom:8px}
.nrm-interaction .lp__lb{font-size:15.5px;color:var(--body);word-break:keep-all;line-height:1.35}
.nrm-interaction .lp__tr{position:relative;height:34px}
.nrm-interaction .lp__tr--two{height:56px}
.nrm-interaction .lp__ax{position:absolute;left:0;right:0;top:22px;height:1px;background:var(--line)}
.nrm-interaction .lp__tr--two .lp__ax{top:26px}
.nrm-interaction .lp__dot{position:absolute;top:16px;width:13px;height:13px;border-radius:50%;background:var(--ink);transform:translateX(-6.5px);transition:left .5s cubic-bezier(.25,.8,.3,1)}
.nrm-interaction .lp__tr--two .lp__dot{top:20px}
.nrm-interaction .lp__dot[data-k="2"]{background:var(--pop)}
.nrm-interaction .lp__v{position:absolute;top:1px;font-family:var(--num);font-size:15px;line-height:1.1;font-weight:700;color:var(--fg);transform:translateX(-50%);white-space:nowrap}

/* stackTimeline (E11) */
.nrm-interaction .tl__ctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.nrm-interaction .tl__ctl input[type=range]{flex:1;min-width:120px;accent-color:var(--ink)}
.nrm-interaction .tl__yr{font-family:var(--num);font-weight:800;font-size:19px;color:var(--ink-tx);min-width:46px}

/* tileMap (E12) */
.nrm-interaction .tm{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;max-width:440px;margin:0 auto}
.nrm-interaction .tm button{aspect-ratio:1;min-height:76px;border:1px solid var(--line);border-radius:var(--r);background:var(--card2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:2px;transition:background .35s}
.nrm-interaction .tm button:hover,
.nrm-interaction .tm button[aria-pressed="true"]{outline:2px solid var(--fg);outline-offset:-2px}
.nrm-interaction .tm .nm{font-size:15px;font-weight:700;line-height:1}
.nrm-interaction .tm .vv{font-size:15px;font-family:var(--num);opacity:.85;line-height:1}
.nrm-interaction .tm-legend{display:flex;align-items:center;gap:6px;justify-content:center;margin-top:9px;font-size:15px;color:var(--mut);font-family:var(--num)}
.nrm-interaction .tm-legend .ramp{height:8px;width:120px;border-radius:2px}

/* likert (E13) */
.nrm-interaction .lk__row{margin-bottom:9px}
.nrm-interaction .lk__lb{font-size:15.5px;color:var(--body);margin-bottom:3px;display:flex;justify-content:space-between;gap:8px}
.nrm-interaction .lk__lb b{font-family:var(--num);color:var(--fg)}
.nrm-interaction .lk__tr{position:relative;height:26px;background:var(--card2);border-radius:var(--r);overflow:hidden}
.nrm-interaction .lk__mid{position:absolute;top:0;bottom:0;width:1px;background:var(--fg);opacity:.35;z-index:3}
.nrm-interaction .lk__seg{position:absolute;top:0;bottom:0;transition:all .4s cubic-bezier(.25,.8,.3,1)}

/* seqQuiz (E25) — 순차 문항 퀴즈 */
.nrm-interaction .qz__top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.nrm-interaction .qz__lv{display:flex;align-items:center;gap:7px;background:var(--ink-tx);color:#fff;border-radius:var(--rc);padding:5px 12px;font-size:15.5px;white-space:nowrap}
.nrm-interaction .qz__lv b{background:#fff;color:var(--ink-tx);border-radius:999px;padding:1px 8px;font-weight:700}
.nrm-interaction .qz__pg{flex:1;height:32px;background:#fff;border:1px solid var(--line);border-radius:999px;overflow:hidden;position:relative}
.nrm-interaction .qz__pgf{height:100%;background:var(--hl);width:0;transition:width .45s cubic-bezier(.25,.8,.3,1)}
.nrm-interaction .qz__pgt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:15.5px;font-family:var(--num);font-weight:700;color:var(--fg)}
.nrm-interaction .qz__q{background:var(--ink-soft);border-radius:var(--rc);padding:12px 15px;font-size:17px;color:var(--fg);margin-bottom:10px;line-height:1.6}
.nrm-interaction .qz__q b{color:var(--ink-tx);margin-right:6px}
.nrm-interaction .qz__opt{display:block;width:100%;text-align:left;padding:11px 14px;margin-bottom:7px;border:1px solid var(--line);
  background:var(--card2);border-radius:var(--rc);font-size:16.5px;color:var(--body);transition:background .18s,color .18s}
.nrm-interaction .qz__opt:hover{border-color:var(--ink)}
.nrm-interaction .qz__opt[aria-pressed="true"]{background:var(--ink-tx);border-color:var(--ink-tx);color:#fff;font-weight:600}
.nrm-interaction .qz__opt .n{font-family:var(--num);margin-right:8px;opacity:.85}
.nrm-interaction .qz__opt.ok{background:rgba(47,185,154,.14);border-color:var(--mint);color:var(--fg)}
.nrm-interaction .qz__opt.no{background:var(--pop-soft);border-color:var(--pop-line);color:var(--fg)}
.nrm-interaction .qz__nav{display:flex;justify-content:center;margin-top:12px}
.nrm-interaction .qz__nav button{background:var(--ink-tx);color:#fff;border:0;border-radius:999px;padding:10px 34px;font-size:17px;font-weight:600}
.nrm-interaction .qz__nav button:disabled{opacity:.4}
.nrm-interaction .qz__res{text-align:center;padding:18px 10px;background:var(--ink-soft);border-radius:var(--rc)}
.nrm-interaction .qz__res .big{font-family:var(--num);font-size:42px;font-weight:800;color:var(--ink-tx);line-height:1.2}
.nrm-interaction .qz__badge{display:flex;gap:16px;align-items:center;background:var(--card2);border-radius:var(--rc);padding:16px;margin-top:10px}
.nrm-interaction .qz__badge .ico{font-size:46px;line-height:1}
.nrm-interaction .qz__badge h4{font-size:21px;margin-bottom:4px}
.nrm-interaction .qz__badge .k{font-size:16px;color:var(--pop-tx);font-weight:700;margin-bottom:2px}
.nrm-interaction .qz__badge p{font-size:16px;margin:0;color:var(--mut);line-height:1.6}
.nrm-interaction .qz__why{margin-top:10px}
.nrm-interaction .qz__why li{list-style:none;padding:10px 12px;border:1px solid var(--line2);border-radius:var(--rc);margin-bottom:6px;font-size:16px;line-height:1.65}
.nrm-interaction .qz__why li b{color:var(--fg)}
.nrm-interaction .qz__why .mk{font-family:var(--num);font-weight:700;margin-right:6px}
.nrm-interaction .qz__why .mk.o{color:var(--mint)} .qz__why .mk.x{color:var(--pop-tx)}

/* oxQuiz (E26) — O/X 판정 퀴즈 */
.nrm-interaction .ox__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nrm-interaction .ox__btn{background:var(--card2);border:1px solid var(--line);border-radius:var(--rc);
  padding:22px 10px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;transition:background .2s,border-color .2s,transform .12s}
.nrm-interaction .ox__btn:hover{border-color:var(--ink);transform:translateY(-2px)}
.nrm-interaction .ox__btn svg{width:96px;height:96px}
.nrm-interaction .ox__btn .lb{font-size:17px;font-weight:700;color:var(--body)}
.nrm-interaction .ox__btn .oc{stroke:var(--ink-tx)} .ox__btn .xc{stroke:var(--pop-tx)}
.nrm-interaction .ox__btn[aria-pressed="true"]{border-width:2px}
.nrm-interaction .ox__btn.ok{background:rgba(47,185,154,.14);border-color:var(--mint)}
.nrm-interaction .ox__btn.no{background:var(--pop-soft);border-color:var(--pop-line)}
.nrm-interaction .ox__btn.dim{opacity:.4}
.nrm-interaction .ox__fb{margin-top:10px;padding:11px 13px;border-radius:var(--rc);font-size:16px;line-height:1.7;display:none}
.nrm-interaction .ox__fb.on{display:block}
.nrm-interaction .ox__fb.o{background:rgba(47,185,154,.12);border:1px solid var(--mint)}
.nrm-interaction .ox__fb.x{background:var(--pop-soft);border:1px solid var(--pop-line)}
.nrm-interaction .ox__fb b{color:var(--fg)}


/* ============================================================
   조사 상세 「직접 해보기」 섹션 — 지표 카드(dv-card) 껍데기를 그대로 쓴다
   ============================================================ */
.nrm-interactions { margin-top: 48px; }
.nrm-interactions__lead { margin: -4px 0 20px; color: var(--wd-text-secondary); }
.nrm-interaction-card__kind {
  display: inline-block; margin: 0 0 6px;
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
  color: var(--wd-pop); background: var(--wd-pop-soft);
  border: 1px solid var(--wd-pop-line); border-radius: var(--wd-radius-sm);
  padding: 2px 8px;
}
.nrm-interaction-card .dv-card__hint { margin: 6px 0 0; font-size: 14px; color: var(--wd-text-tertiary); }
.nrm-interaction-card .dv-card__body { min-height: 0; }