/* 모인 정보 한눈에 보기(public/demo/insight/, /redevelopment/demo/insight/).
   그림 넷은 서비스가 받은 응답에서 만들어지는 화면이라 함께 보기 무대의 관리 창과 같은 창(남색 머리·흰 화면)에 담고,
   창 머리에 받은 곳, 창 아래 상태 줄에 범위·기준·자료를 싣는다. 맨 위 '자료가 만들어지는 길'이 응답 → 정리 → 그림을 잇는다
   (2026-10-13 사용자 지적 "pdf 자료 같다, 시스템과 연계되어 만들어지는 자료처럼"에 따라 모눈 용지·도곽·표제란을 걷었다).
   머리는 밤 면 한 줄. 색은 lm-tokens.css 변수만 쓴다(hex 없음). 묶음 여섯 색은 토큰과 그 섞음으로만 만들고, 빨강은 쓰지 않는다.
   글자는 base.css의 --rd- 단계를 따라 글자 크기 단추(보통·크게·아주 크게)에 함께 커진다. */

.in {
  --in-ink: var(--lm-draft-ink);
  /* 점·선·원 같은 표식은 먹색 대신 밤 남색으로 그린다(2026-10-13 "점과 선이 촌스럽다, 유려하게") */
  --in-mark: color-mix(in srgb, var(--lm-night) 78%, var(--lm-draft-blue));
  --in-paper: var(--lm-bg-surface);
  --in-muted: var(--lm-text-muted);
  --in-line: color-mix(in srgb, var(--lm-draft-ink) 22%, transparent);
  --in-blue: var(--lm-draft-blue);
  --in-blue-wash: color-mix(in srgb, var(--lm-draft-blue) 10%, var(--lm-bg-surface));
  --in-frame: var(--lm-rail-bg);
  --in-status: color-mix(in srgb, var(--lm-bg-page) 55%, var(--lm-bg-surface));
  --in-up: var(--lm-draft-blue);
  --in-down: var(--lm-signal-ink);
  /* 예/아니오 나눔 막대의 두 색. 어느 쪽도 앞세우지 않게 밝기를 맞춘 파랑과 구릿빛(흰 바탕 대비 4:1 남짓) */
  --in-yes: color-mix(in srgb, var(--lm-draft-blue) 80%, var(--lm-bg-surface));
  --in-no: color-mix(in srgb, var(--lm-window-deep) 80%, var(--lm-draft-ink));
  --in-hidden: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--lm-draft-ink) 10%, transparent) 5px 6px);
  --in-mono: "JetBrains Mono", var(--lm-font-ui);
  /* 넓은 화면의 그림 글자. 글자 크기 단추에 함께 커진다 */
  --in-fs-chart: calc(var(--rd-fs-small) - 3px);
  --in-fs-ui: calc(var(--rd-fs-small) - 1px);
  --in-tap: 44px;
  background-color: var(--lm-bg-page);
  color: var(--in-ink);
}

/* 묶음 여섯 색. 용지 위 점·선이 3:1을 넘게 짙은 쪽으로 섞었다 */
.in .t-amber { --tone: color-mix(in srgb, var(--lm-window-deep) 78%, var(--lm-draft-ink)); }
.in .t-blue { --tone: var(--lm-draft-blue); }
.in .t-green { --tone: var(--lm-success-text); }
.in .t-orange { --tone: var(--lm-signal-ink); }
.in .t-navy { --tone: var(--lm-trust); }
.in .t-plum { --tone: color-mix(in srgb, var(--lm-draft-blue) 52%, var(--lm-draft-red)); }

.in ::selection { background: var(--in-blue); color: var(--lm-on-primary); }
.in :focus-visible { outline: var(--lm-focus-ring); outline-offset: 3px; }

.in-wrap { width: min(100% - 32px, 1440px); margin-inline: auto; }

.in-skip { position: absolute; top: -100px; left: 16px; z-index: 50; padding: 12px 16px; border-radius: var(--lm-radius); background: var(--lm-bg-surface); color: var(--in-ink); font-weight: 700; }
.in-skip:focus { top: 12px; }

/* ── 머리: 밤 면 한 줄 ── */
.in-bar { background: var(--lm-night); color: var(--lm-night-ink); }
.in-bar__inner { display: flex; align-items: center; gap: 24px; min-height: 56px; }
.in-brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.in-logo { display: block; width: auto; height: 17px; }
.in-brand__sub { padding-left: 12px; border-left: 1px solid var(--lm-night-line); color: var(--lm-night-ink-muted); font-size: 14px; white-space: nowrap; }
.in-bar__title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-weight: 700; }
.in-tag { padding: 2px 9px; border: 1px solid var(--lm-window); border-radius: var(--lm-radius-pill); color: var(--lm-window); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.in-font { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.in-font__label { margin-right: 6px; color: var(--lm-night-ink-muted); font-size: 13px; white-space: nowrap; }
.in-font__btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--lm-night-line); border-radius: var(--lm-radius-inner); background: transparent; color: var(--lm-night-ink); font-weight: 700; cursor: pointer; transition: background-color var(--lm-duration-fast) var(--lm-ease-out), border-color var(--lm-duration-fast) var(--lm-ease-out); }
.in-font__btn.is-m { font-size: 14px; }
.in-font__btn.is-l { font-size: 17px; }
.in-font__btn.is-xl { font-size: 20px; }
.in-font__btn:hover { border-color: var(--lm-night-ink-muted); }
.in-font__btn[aria-pressed="true"] { border-color: var(--lm-window); background: var(--lm-window); color: var(--lm-night); }
.in-bar :focus-visible { outline: var(--lm-focus-ring-dark); }

/* ── 첫 줄: 제목·설명 | 응답한 사람의 구성 ── */
.in-sheet { padding: 16px 0 48px; }
.in-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 32px; align-items: start; }
.in-head h1 { color: var(--in-ink); font-size: calc(var(--rd-fs-h1) + 2px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.25; }
.in-lead { max-width: 62ch; margin-top: 8px; font-size: var(--in-fs-ui); line-height: 1.6; color: var(--lm-text); }
.in-notice { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 8px 12px; border: 1px solid var(--lm-warning-accent); border-radius: var(--lm-radius-inner); background: var(--lm-warning-surface); color: var(--lm-warning-text); font-size: calc(var(--rd-fs-small) - 2px); line-height: 1.5; }
.in-notice .icon { margin-top: 1px; color: var(--lm-warning-text); }

.in-people { display: grid; gap: 8px; }
.in-people__row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center; }
.in-people__axis { display: grid; margin: 0; line-height: 1.3; }
.in-people__axis strong { font-size: var(--in-fs-ui); }
.in-people__axis span { color: var(--in-muted); font-size: calc(var(--rd-fs-small) - 4px); }
.in-people__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.in-who { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 8px; width: 100%; min-height: var(--in-tap); padding: 6px 10px 7px; border: 1px solid var(--in-ink); border-radius: var(--lm-radius-inner); background: var(--in-paper); color: var(--in-ink); text-align: left; cursor: pointer; transition: background-color var(--lm-duration-fast) var(--lm-ease-out), color var(--lm-duration-fast) var(--lm-ease-out); }
.in-who:hover { background: var(--in-blue-wash); }
.in-who__label { font-size: calc(var(--rd-fs-small) - 2px); font-weight: 700; line-height: 1.3; }
.in-who__n { font-size: var(--in-fs-ui); font-weight: 800; white-space: nowrap; }
.in-who__n small { margin-left: 1px; font-size: 0.72em; font-weight: 600; }
.in-share { grid-column: 1 / -1; display: block; width: 100%; height: 4px; }
.in-share__bg { fill: var(--in-line); }
.in-share__fg { fill: var(--in-ink); }
.in-who[aria-pressed="true"] { border-color: var(--in-blue); background: var(--in-blue); color: var(--lm-on-primary); }
.in-who[aria-pressed="true"] .in-share__bg { fill: color-mix(in srgb, var(--lm-on-primary) 30%, transparent); }
.in-who[aria-pressed="true"] .in-share__fg { fill: var(--lm-on-primary); }

/* 고른 것 줄 */
.in-picked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 36px; margin: 6px 0 0; padding: 0 2px; }
.in-picked__hint, .in-picked__label { margin: 0; color: var(--in-muted); font-size: calc(var(--rd-fs-small) - 2px); }
.in-picked__label { font-weight: 700; color: var(--in-ink); }
.in-picked__list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.in-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px 0 12px; border: 1px solid var(--in-blue); border-radius: var(--lm-radius-pill); background: var(--in-blue-wash); color: var(--in-blue); font-size: calc(var(--rd-fs-small) - 2px); font-weight: 700; cursor: pointer; }
.in-chip__kind { color: var(--in-muted); font-weight: 600; }
.in-chip .icon { width: 16px; height: 16px; }
.in-picked__clear { min-height: 36px; padding: 0 4px; border: 0; background: none; color: var(--in-ink); font-size: calc(var(--rd-fs-small) - 2px); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.in-load { margin: 24px 0; color: var(--in-muted); }
.in-load.is-error { color: var(--lm-danger); }
.in-noscript { margin: 24px 0; }

/* ── 자료가 만들어지는 길(flow.js): 받은 곳 → 정리 → 같은 그림. 창 머리와 같은 남색 면, 단계 사이는 금색 실 ── */
.in-flow { margin-top: 16px; }
.in-flow__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; margin: 0; padding: 18px 22px 20px; border-radius: 14px; background: var(--in-frame); color: var(--lm-rail-ink); list-style: none; }
.in-flow__step { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-content: start; }
.in-flow__step > :not(.in-flow__icon) { grid-column: 2; }
.in-flow__step + .in-flow__step::before { content: ""; position: absolute; top: 19px; left: -42px; width: 30px; height: 2px; background: var(--lm-rail-accent); }
.in-flow__step + .in-flow__step::after { content: ""; position: absolute; top: 15px; left: -14px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid var(--lm-rail-accent); }
.in-flow__icon { grid-column: 1; grid-row: 1 / span 3; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--lm-rail-line); border-radius: 10px; color: var(--lm-rail-accent); }
.in-flow__name { margin: 0; color: var(--lm-rail-ink-strong); font-size: 15px; font-weight: 800; line-height: 1.35; }
.in-flow__stat { margin: 2px 0 0; color: var(--lm-rail-ink-strong); font-size: 14px; line-height: 1.3; }
.in-flow__stat b { margin-right: 2px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.in-flow__note { margin: 2px 0 0; color: var(--lm-rail-muted); font-size: 12.5px; line-height: 1.45; }
.in-flow__items { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.in-flow__items li { padding: 3px 10px; border: 1px solid var(--lm-rail-line); border-radius: var(--lm-radius-pill); color: var(--lm-rail-ink); font-size: 12.5px; line-height: 1.5; }

/* ── 그림 네 칸: 함께 보기 관리 창과 같은 창. 남색 머리(그림 이름 탭·받은 곳), 흰 화면, 아래 상태 줄 ── */
.in-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; overflow-anchor: none; }
/* overflow-anchor: [자세히 보기]로 펼친 칸이 넓게 다시 그려지며 키가 바뀔 때 브라우저가 스크롤을 옮기지 않게(펼친 칸의 머리에 머문다) */
.in-panel { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--in-frame); border-radius: 14px; background: var(--in-paper); box-shadow: 0 14px 36px color-mix(in srgb, var(--in-frame) 16%, transparent); }
.in-panel.is-wide { grid-column: 1 / -1; order: -1; }
.in-panel__head { display: flex; align-items: flex-end; gap: 12px; min-height: 50px; padding: 8px 10px 0; background: var(--in-frame); }
.in-panel__head :focus-visible { outline: var(--lm-focus-ring-dark); }
/* 그림 이름: 아래 흰 화면과 이어지는 탭 */
.in-panel__head h2, .in-tabname { flex: 0 1 auto; min-width: 0; margin: 0; padding: 10px 16px 9px; border-radius: 10px 10px 0 0; background: var(--in-paper); color: var(--lm-text-strong); font-size: calc(var(--rd-fs-small) + 1px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; }
/* 받은 곳: 이 그림이 어느 응답에서 만들어졌는지 */
.in-src { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; margin: 0 0 8px; padding: 6px 12px; border-radius: 10px; background: var(--lm-rail-hover); color: var(--lm-rail-ink); font-size: 13px; line-height: 1.4; }
.in-src::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lm-rail-accent); }
.in-more { flex: 0 0 auto; min-height: 40px; padding: 0 14px; border: 1px solid var(--in-ink); border-radius: var(--lm-radius-inner); background: var(--in-paper); color: var(--in-ink); font-size: calc(var(--rd-fs-small) - 2px); font-weight: 700; cursor: pointer; transition: background-color var(--lm-duration-fast) var(--lm-ease-out); }
.in-more:hover { background: var(--in-blue-wash); }
.in-panel__head .in-more { margin: 0 0 6px; border-color: var(--lm-rail-line); background: transparent; color: var(--lm-rail-ink-strong); }
.in-panel__head .in-more:hover { background: var(--lm-rail-hover); }
.in-panel__head .in-more[aria-expanded="true"] { border-color: var(--in-paper); background: var(--in-paper); color: var(--lm-text-strong); }
.in-how { margin: 12px 20px 6px; color: var(--in-muted); font-size: calc(var(--rd-fs-small) - 3px); line-height: 1.55; }
.in-fig { flex: 1 1 auto; min-width: 0; padding: 0 20px; }
.in-fig svg text { font-family: var(--lm-font-ui); }
.in-panel__head + .in-fig { padding-top: 14px; }

/* 상태 줄: 창 아래 범위·기준·자료 */
.in-block { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 14px 0 0; border-top: 1px solid var(--lm-hairline); background: var(--in-status); }
.in-block div { display: flex; gap: 8px; align-items: baseline; padding: 7px 16px 8px; min-width: 0; }
.in-block div + div { border-left: 1px solid var(--lm-hairline); }
.in-block dt { flex: 0 0 auto; color: var(--in-muted); font-size: 12px; font-weight: 700; }
.in-block dd { margin: 0; font-size: 12.5px; line-height: 1.4; }

/* 자세히 보기 */
.in-detail { margin: 12px 20px 0; padding-top: 14px; border-top: 1px dashed var(--in-ink); }
.in-detail h3 { margin: 14px 0 6px; color: var(--in-ink); font-size: var(--in-fs-ui); font-weight: 800; }
.in-detail h3:first-child { margin-top: 0; }
.in-detail__lead { margin: 10px 0; font-size: calc(var(--rd-fs-small) - 2px); }

/* 고르는 줄(집단·관심사·묶음·응답자) */
.in-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.in-tab { min-height: 36px; padding: 0 12px; border: 1px solid var(--in-line); border-radius: var(--lm-radius-pill); background: var(--in-paper); color: var(--in-ink); font-size: calc(var(--rd-fs-small) - 2.5px); font-weight: 600; white-space: nowrap; cursor: pointer; transition: border-color var(--lm-duration-fast) var(--lm-ease-out), background-color var(--lm-duration-fast) var(--lm-ease-out); }
.in-tab:hover { border-color: var(--in-ink); }
.in-tab[aria-pressed="true"] { border-color: var(--in-blue); background: var(--in-blue); color: var(--lm-on-primary); }
.in-tab.t-amber[aria-pressed="true"], .in-tab.t-blue[aria-pressed="true"], .in-tab.t-green[aria-pressed="true"], .in-tab.t-orange[aria-pressed="true"], .in-tab.t-navy[aria-pressed="true"], .in-tab.t-plum[aria-pressed="true"] { border-color: var(--tone); background: var(--tone); }

/* 표로 보기 */
.in-table { margin: 12px 0 4px; }
.in-table summary { display: inline-flex; align-items: center; min-height: 40px; color: var(--in-ink); font-size: calc(var(--rd-fs-small) - 2px); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.in-table__scroll { overflow-x: auto; margin-top: 6px; border-top: 1.5px solid var(--in-ink); }
.in-table table { width: 100%; border-collapse: collapse; font-size: calc(var(--rd-fs-small) - 3px); }
.in-table th, .in-table td { padding: 6px 8px; border-bottom: 1px solid var(--in-line); text-align: left; white-space: nowrap; }
.in-table thead th { color: var(--in-muted); font-weight: 700; }
.in-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }

/* 범례(선 모양) */
.in-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 0; padding: 0; list-style: none; color: var(--in-muted); font-size: calc(var(--rd-fs-small) - 4px); }
.in-legend li { display: inline-flex; align-items: center; gap: 6px; }
.in-legend svg { width: 28px; height: 8px; overflow: visible; }
.in-legend line { stroke: var(--in-ink); stroke-width: 2; }
.in-legend .is-draft line { stroke-dasharray: 6 4; }
.in-legend .is-none line { stroke-dasharray: 1.5 3.5; stroke-linecap: round; }
.in-legend--ties line { stroke-linecap: round; }
.in-legend--ties .is-up line { stroke: var(--in-up); stroke-width: 2.4; }
.in-legend--ties .is-down line { stroke: var(--in-down); stroke-width: 2.4; }
.in-legend--ties .is-new line { stroke: var(--in-up); stroke-width: 2.8; stroke-dasharray: 0.1 6; }
.in-legend--ties .is-same line { stroke: color-mix(in srgb, var(--in-mark) 32%, transparent); stroke-width: 2.4; }

/* ── 집단별 관심사 판 ── */
.in-board { width: 100%; border-collapse: collapse; table-layout: fixed; }
.in-board th, .in-board td { padding: 0; }
.in-board thead th { height: 34px; vertical-align: bottom; border-bottom: 1.5px solid var(--in-ink); }
.in-board__corner { width: 126px; }
.in-board__col { display: block; width: 100%; min-height: 38px; padding: 2px 1px 4px; border: 0; border-radius: var(--lm-radius-inner) var(--lm-radius-inner) 0 0; background: none; color: var(--in-ink); font-size: var(--in-fs-chart); font-weight: 700; line-height: 1.2; text-align: center; overflow-wrap: anywhere; word-break: keep-all; cursor: pointer; }
.in-board__col:hover { background: var(--in-blue-wash); }
.in-board thead th.is-on .in-board__col { background: var(--in-blue); color: var(--lm-on-primary); }
.in-board tbody tr { border-bottom: 1px solid var(--in-line); }
.in-board tbody.is-split tr:first-child { border-top: 1.5px solid var(--in-ink); }
.in-board tbody th { text-align: left; }
.in-board__row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; width: 100%; min-height: 22px; padding: 1px 8px 1px 4px; border: 0; border-radius: var(--lm-radius-inner) 0 0 var(--lm-radius-inner); background: none; color: var(--in-ink); font-size: var(--in-fs-chart); font-weight: 700; text-align: left; cursor: pointer; }
.in-board__row.is-static { cursor: default; }
.in-board__row:hover:not(.is-static) { background: var(--in-blue-wash); }
.in-board__n { color: var(--in-muted); font-size: calc(var(--in-fs-chart) - 1px); font-weight: 600; }
.in-board tr.is-on .in-board__row { background: var(--in-blue); color: var(--lm-on-primary); }
.in-board tr.is-on .in-board__n { color: inherit; }
.in-board td { text-align: center; }
.in-board td.is-on { background: var(--in-blue-wash); }
.in-cell { position: relative; display: block; width: 23px; height: 23px; margin: 0 auto; }
.in-dot { display: block; width: 23px; height: 23px; overflow: visible; }
.in-cell__v { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; }
.in-cell__v.is-in { color: var(--lm-on-primary); }
.in-cell__v.is-out { top: 50%; left: calc(50% + 7px); transform: translate(0, -50%); padding: 1px 2px; border-radius: 3px; background: var(--in-paper); color: var(--in-blue); }
.in-dot circle { fill: var(--in-mark); }
.in-board.has-row tr:not(.is-on):not(.is-cluster) .in-dot circle,
.in-board.has-col td:not(.is-on) .in-dot circle { fill: color-mix(in srgb, var(--in-ink) 32%, transparent); }
.in-board tr.is-on .in-dot circle, .in-board td.is-on .in-dot circle { fill: var(--in-blue); }
.in-board.has-row.has-col tr:not(.is-on) td:not(.is-on) .in-dot circle { fill: color-mix(in srgb, var(--in-ink) 18%, transparent); }
.in-board tr.is-cluster { border-top: 1.5px solid var(--in-ink); }
.in-board tr.is-cluster .in-dot circle { fill: var(--tone); }
.in-board tr.is-cluster .in-board__row { color: var(--tone); }

/* 좁은 칸: 같은 판(관심사 이름 세로쓰기, 원 안 숫자 없음) 아래 고른 집단의 관심사 막대 */
.in-board.is-compact .in-board__corner { width: calc(var(--in-fs-chart) * 6); }
.in-board.is-compact thead th { height: auto; padding-bottom: 4px; }
.in-board.is-compact .in-board__col { display: flex; align-items: center; justify-content: flex-end; height: calc(var(--in-fs-chart) * 6.6 + 12px); min-height: 0; padding: 6px 0; border-radius: var(--lm-radius-inner); writing-mode: vertical-rl; line-height: 1; white-space: nowrap; }
.in-board.is-compact tbody th { vertical-align: middle; }
.in-board.is-compact .in-board__row { display: grid; align-content: center; gap: 1px; min-height: 44px; padding: 4px 6px 4px 2px; line-height: 1.2; word-break: keep-all; }
.in-board.is-compact .in-board__n { font-size: calc(var(--in-fs-chart) - 2px); }
.in-board-narrow .in-board { margin-bottom: 18px; }
.in-bars__hint { margin: -4px 0 8px; color: var(--in-muted); font-size: calc(var(--rd-fs-small) - 2px); }
.in-bars__title { margin: 4px 0 8px; font-size: var(--in-fs-ui); }
.in-bars { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.in-bars li { display: grid; grid-template-columns: 7.2em minmax(0, 1fr) 3.2em; align-items: center; gap: 8px; }
.in-bars__name { min-height: 44px; padding: 0 6px; border: 0; border-radius: var(--lm-radius-inner); background: none; color: var(--in-ink); font-size: var(--in-fs-ui); font-weight: 700; text-align: left; cursor: pointer; }
.in-bars li.is-on .in-bars__name { background: var(--in-blue); color: var(--lm-on-primary); }
.in-bars__bar { display: block; width: 100%; height: 14px; }
.in-bars__bg { fill: var(--in-line); }
.in-bars__fg { fill: var(--in-ink); }
.in-bars li.is-on .in-bars__fg { fill: var(--in-blue); }
.in-bars__v { font-size: var(--in-fs-ui); font-weight: 800; text-align: right; }

/* 사실 연결 */
.in-onto-wrap { margin: 8px 0 4px; }
.in-onto { display: block; overflow: visible; }
.in-onto__edge { fill: none; stroke: var(--in-ink); stroke-width: 1.5; }
.in-onto__edge.is-draft { stroke-dasharray: 6 4; }
.in-onto__edge.is-none { stroke-dasharray: 1.5 4; stroke-linecap: round; }
.in-onto__node rect { fill: var(--in-paper); stroke: var(--in-ink); stroke-width: 1.5; }
.in-onto__node text { fill: var(--in-ink); font-size: 15px; font-weight: 700; }
.in-onto__node text.is-sub { fill: var(--in-muted); font-size: 13px; font-weight: 500; }
.in-onto__node.is-concern rect { fill: var(--in-blue); stroke: var(--in-blue); }
.in-onto__node.is-concern text { fill: var(--lm-on-primary); font-size: 16px; }
.in-onto__node.is-draft rect { stroke-dasharray: 6 4; }
.in-onto__node.is-none rect { stroke-dasharray: 1.5 4; stroke-linecap: round; }
.in-onto__node.is-role rect { fill: var(--in-ink); stroke: var(--in-ink); }
.in-onto__node.is-role text { fill: var(--in-paper); }
.in-facts { display: grid; gap: 8px; margin: 8px 0; padding: 0; list-style: none; }
.in-facts li { padding: 10px 12px; border: 1.5px solid var(--in-ink); border-radius: var(--lm-radius-inner); }
.in-facts li.is-draft { border-style: dashed; }
.in-facts li.is-none { border-style: dotted; }
.in-facts p { margin: 0; }
.in-facts__label { font-size: var(--in-fs-ui); font-weight: 700; }
.in-facts__concern { margin-right: 8px; color: var(--in-blue); }
.in-facts__meta, .in-facts__by { color: var(--in-muted); font-size: calc(var(--rd-fs-small) - 3px); }

/* ── 생각이 가까운 사람들 ── */
.in-scatter-wrap.is-side { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 12px; align-items: start; }
.in-scatter { display: block; overflow: visible; }
.in-hull { stroke: none; }
.in-hull.is-dim { opacity: 0.3; }
.in-glow-in { stop-color: var(--tone); stop-opacity: 0.2; }
.in-glow-mid { stop-color: var(--tone); stop-opacity: 0.08; }
.in-glow-out { stop-color: var(--tone); stop-opacity: 0; }
.in-pt { fill: var(--tone); fill-opacity: 0.78; stroke: var(--in-paper); stroke-width: 0.6; }
.in-pt.is-off { fill-opacity: 0.08; stroke: none; }
.in-cl-label { cursor: pointer; }
.in-cl-label text { fill: var(--tone); font-size: var(--in-fs-chart); font-weight: 700; letter-spacing: -0.01em; paint-order: stroke; stroke: var(--in-paper); stroke-width: 4px; stroke-linejoin: round; }
.in-cl-label circle { fill: var(--in-paper); stroke: var(--tone); stroke-width: 1.5; }
.in-cl-label.is-dim { opacity: 0.35; }
.in-cl-label.is-on text { text-decoration: underline; }
.in-me circle { fill: none; stroke: var(--in-ink); stroke-width: 2; }
.in-me text { fill: var(--in-ink); font-size: var(--in-fs-chart); font-weight: 800; paint-order: stroke; stroke: var(--in-paper); stroke-width: 5px; stroke-linejoin: round; }
.in-count { margin: 6px 0 0; font-size: calc(var(--rd-fs-small) - 3px); color: var(--in-muted); }
.in-count strong { color: var(--in-blue); }
.in-cl-legend { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.in-scatter-wrap:not(.is-side) .in-cl-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; }
.in-cl-btn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 4px 8px; border: 1px solid transparent; border-radius: var(--lm-radius-inner); background: none; color: var(--in-ink); font-size: var(--in-fs-chart); font-weight: 700; line-height: 1.3; text-align: left; cursor: pointer; }
.in-cl-btn:hover { border-color: var(--in-line); }
.in-cl-btn__key { display: grid; place-items: center; min-width: 12px; height: 12px; border-radius: 50%; background: var(--tone); color: var(--lm-on-primary); font-size: 11px; }
.in-cl-btn__n { color: var(--in-muted); font-weight: 600; }
.in-cl-btn[aria-pressed="true"] { border-color: var(--tone); background: color-mix(in srgb, var(--tone) 10%, var(--in-paper)); color: var(--tone); }

.in-clcard { margin-top: 4px; padding: 14px 16px; border: 1.5px solid var(--tone); border-radius: var(--lm-radius-inner); }
.in-clcard p { margin: 0; }
.in-clcard__title { font-size: var(--in-fs-ui); color: var(--tone); }
.in-voice { margin: 10px 0; padding: 0 0 0 12px; border-left: 1px solid var(--in-ink); }
.in-voice p { font-size: var(--in-fs-ui); font-weight: 600; }
.in-voice footer { margin-top: 2px; color: var(--in-muted); font-size: calc(var(--rd-fs-small) - 4px); }
.in-gist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.in-gist div { padding: 8px 10px; border: 1px solid var(--in-line); border-radius: var(--lm-radius-inner); }
.in-gist dt { display: flex; align-items: baseline; gap: 6px; font-size: calc(var(--rd-fs-small) - 3px); font-weight: 800; }
.in-gist dt small { color: var(--in-muted); font-weight: 600; }
.in-gist dd { margin: 2px 0 0; font-size: calc(var(--rd-fs-small) - 2px); font-weight: 600; }
.in-clcard__comp > p { color: var(--in-muted); font-size: calc(var(--rd-fs-small) - 3px); font-weight: 700; }
.in-comp { display: block; width: 100%; height: 14px; margin: 4px 0 6px; }
.in-comp__seg.is-own { fill: var(--in-ink); }
.in-comp__seg.is-landlord { fill: color-mix(in srgb, var(--in-ink) 55%, var(--in-paper)); }
.in-comp__seg.is-tenant { fill: var(--in-blue); }
.in-comp__seg.is-shop { fill: color-mix(in srgb, var(--in-blue) 45%, var(--in-paper)); }
.in-comp__seg.is-masked { fill: var(--in-line); }
.in-comp__keys { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: calc(var(--rd-fs-small) - 3px); }
.in-comp__keys li::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; }
.in-comp__keys .is-own::before { background: var(--in-ink); }
.in-comp__keys .is-landlord::before { background: color-mix(in srgb, var(--in-ink) 55%, var(--in-paper)); }
.in-comp__keys .is-tenant::before { background: var(--in-blue); }
.in-comp__keys .is-shop::before { background: color-mix(in srgb, var(--in-blue) 45%, var(--in-paper)); }
.in-clcard .in-clcard__top { margin-top: 10px; font-size: calc(var(--rd-fs-small) - 2px); }

/* ── 한 사람의 요구·욕구·욕망 ── */
.in-tabs--people { margin-bottom: 8px; }
.in-tiers-wrap { position: relative; }
.in-links { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: visible; }
.in-links path { fill: none; stroke: color-mix(in srgb, var(--in-ink) 28%, transparent); stroke-width: 1.5; }
.in-links path.is-on { stroke: var(--in-blue); stroke-width: 2.5; }
.in-tiers { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.in-tier ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.in-tier__name { display: flex; align-items: baseline; gap: 6px; margin: 0 0 6px; padding-bottom: 4px; border-bottom: 1.5px solid var(--in-ink); }
.in-tier__name strong { font-size: var(--in-fs-ui); }
.in-tier__name span { color: var(--in-muted); font-size: calc(var(--rd-fs-small) - 4px); }
.in-node { width: 100%; min-height: 34px; padding: 5px 10px; border: 1.5px solid var(--in-ink); border-radius: var(--lm-radius-inner); background: var(--in-paper); color: var(--in-ink); font-size: var(--in-fs-chart); font-weight: 700; line-height: 1.35; text-align: left; cursor: pointer; transition: background-color var(--lm-duration-fast) var(--lm-ease-out), border-color var(--lm-duration-fast) var(--lm-ease-out), color var(--lm-duration-fast) var(--lm-ease-out); }
.in-tier.is-need .in-node { border-radius: 18px; }
.in-tier.is-desire .in-node { border-width: 2.5px; }
.in-node:not(.is-on) { border-color: color-mix(in srgb, var(--in-ink) 35%, transparent); color: color-mix(in srgb, var(--in-ink) 62%, var(--in-paper)); }
.in-node.is-on { border-color: var(--in-blue); }
.in-node.is-focus { background: var(--in-blue); color: var(--lm-on-primary); }
.in-node.is-linked { box-shadow: 0 0 0 3px var(--in-blue-wash), 0 0 0 4px var(--in-blue); }
.in-node__dot { display: none; }
.in-quote { margin-top: 8px; padding: 6px 4px 0; border-top: 1px solid var(--in-line); }
.in-quote__label { margin: 0; color: var(--in-muted); font-size: calc(var(--rd-fs-small) - 4px); font-weight: 700; }
.in-said { display: grid; gap: 2px; margin: 4px 0 0; padding: 0; list-style: none; color: var(--in-muted); font-size: calc(var(--rd-fs-small) - 2.5px); line-height: 1.55; }
.in-said li.is-on { color: var(--in-ink); }
.in-said mark { padding: 0 1px; background: var(--lm-trust-soft); box-shadow: inset 0 -2px 0 var(--in-blue); color: inherit; }

/* ── 사건마다 달라진 관계 ── */
.in-steps-mini { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0 0 8px; padding: 0; list-style: none; }
.in-steps-mini::before { content: ""; position: absolute; top: 12px; right: calc(100% / 14); left: calc(100% / 14); height: 1px; background: color-mix(in srgb, var(--in-ink) 28%, transparent); }
.in-ev { position: relative; display: grid; justify-items: center; gap: 2px; width: 100%; min-height: 40px; padding: 4px 0; border: 0; background: none; color: var(--in-ink); cursor: pointer; }
.in-ev__node { width: 11px; height: 11px; margin-top: 2.5px; border: 1.5px solid color-mix(in srgb, var(--in-mark) 55%, transparent); border-radius: 50%; background: var(--in-paper); transition: background-color var(--lm-duration-fast) var(--lm-ease-out), box-shadow var(--lm-duration-fast) var(--lm-ease-out); }
.in-ev.is-past .in-ev__node { border-color: color-mix(in srgb, var(--in-mark) 70%, transparent); background: color-mix(in srgb, var(--in-mark) 70%, transparent); }
.in-ev.is-on .in-ev__node { width: 14px; height: 14px; margin-top: 1px; border-color: var(--in-blue); background: var(--in-blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--in-blue) 16%, transparent); }
.in-ev__date { font-family: var(--in-mono); font-size: calc(var(--in-fs-chart) - 1px); }
.in-ev.is-on .in-ev__date { color: var(--in-blue); font-weight: 800; }
.in-ev:hover .in-ev__node { border-color: var(--in-blue); }
.in-ev-title { margin: 0 0 4px; font-size: calc(var(--rd-fs-small) - 2px); }
.in-ev-title span { color: var(--in-muted); }
.in-ties { display: block; overflow: visible; }
.in-tie { fill: none; stroke: color-mix(in srgb, var(--in-mark) 24%, transparent); stroke-linecap: round; }
.in-tie.is-talk { stroke: color-mix(in srgb, var(--in-mark) 30%, transparent); }
.in-tie.is-up { stroke: color-mix(in srgb, var(--in-up) 82%, transparent); }
.in-tie.is-down { stroke: color-mix(in srgb, var(--in-down) 82%, transparent); }
/* 처음 생긴 관계는 둥근 점이 이어지는 선 */
.in-tie.is-new { stroke: var(--in-up); stroke-dasharray: 0.1 7; }
.in-tie.is-dim { opacity: 0.15; }
.in-port { fill: var(--in-paper); stroke: color-mix(in srgb, var(--in-mark) 55%, transparent); stroke-width: 1.2; }
.in-actor rect { fill: var(--in-paper); stroke: color-mix(in srgb, var(--in-mark) 30%, transparent); stroke-width: 1; }
.in-actor text { fill: var(--in-ink); font-size: var(--in-fs-chart); font-weight: 700; }
.in-actor.is-body rect { fill: var(--in-mark); stroke: none; }
.in-actor.is-body text { fill: var(--in-paper); }
.in-actor.is-on rect { fill: var(--in-blue); stroke: var(--in-blue); }
.in-actor.is-on text { fill: var(--lm-on-primary); }
.in-actor.is-answer rect { stroke: var(--in-blue); stroke-width: 3; }
.in-actor text.in-actor__tag { fill: var(--in-blue); font-size: calc(var(--in-fs-chart) - 1px); font-weight: 700; }
.in-res { margin-top: 6px; padding: 8px 0 0; border-top: 1px solid var(--in-line); }
.in-res__title { margin: 0 0 2px; color: var(--in-muted); font-size: calc(var(--rd-fs-small) - 4px); font-weight: 700; }
.in-res ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: calc(var(--rd-fs-small) - 2px); }
.in-res__who { font-weight: 800; }
.in-res__delta { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; font-weight: 800; }
.in-res .is-up .in-res__delta, .in-res .is-new strong { color: var(--in-up); }
.in-res .is-down .in-res__delta { color: var(--in-down); }
.in-tri { width: 10px; height: 10px; }
.in-tri path { fill: currentColor; }
.in-res .is-base, .in-res .is-more { color: var(--in-muted); }
.in-minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.in-mini { margin: 0; }
.in-mini figcaption { margin-bottom: 4px; font-size: calc(var(--rd-fs-small) - 2px); font-weight: 800; }
.in-mini svg { display: block; overflow: visible; }
.in-mini__grid line { stroke: var(--in-line); }
.in-mini__grid text, .in-mini__x { fill: var(--in-muted); font-size: 12px; font-family: var(--in-mono); }
.in-mini__now { stroke: var(--in-blue); stroke-width: 1.5; stroke-dasharray: 3 3; }
.in-mini__line polyline { fill: none; stroke: color-mix(in srgb, var(--in-ink) 55%, transparent); stroke-width: 2; }
.in-mini__line circle { fill: color-mix(in srgb, var(--in-ink) 70%, var(--in-paper)); }
.in-mini__line text { fill: var(--in-ink); font-size: 13px; font-weight: 700; }
.in-mini__line.is-on polyline { stroke: var(--in-blue); stroke-width: 3; }
.in-mini__line.is-on circle, .in-mini__line.is-on text { fill: var(--in-blue); }

/* ── 이 정보가 이어지는 곳 ── */
.in-next { margin-top: 28px; padding-top: 18px; border-top: 2px solid var(--in-ink); }
.in-next h2 { color: var(--in-ink); font-size: var(--rd-fs-h2); font-weight: 800; }
.in-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 12px 0 0; padding: 0; list-style: none; }
.in-steps li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding: 12px 18px 12px 0; }
.in-steps li + li { padding-left: 18px; border-left: 1px solid var(--in-ink); }
.in-steps__no { grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border: 1.5px solid var(--in-ink); border-radius: 50%; font-family: var(--in-mono); font-size: 14px; }
.in-steps li.is-now .in-steps__no { border-color: var(--in-blue); background: var(--in-blue); color: var(--lm-on-primary); }
.in-steps__label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--in-fs-ui); font-weight: 800; }
.in-steps__now { padding: 1px 8px; border-radius: var(--lm-radius-pill); background: var(--in-blue); color: var(--lm-on-primary); font-size: 12px; }
.in-steps__note { margin: 0; color: var(--in-muted); font-size: calc(var(--rd-fs-small) - 3px); }

/* ── 바닥 ── */
.in-foot { padding: 20px 0 32px; background: var(--lm-night); color: var(--lm-night-ink-muted); font-size: 14px; }
.in-foot__inner { display: grid; gap: 4px; }
.in-foot p { margin: 0; }
.in-foot a { color: var(--lm-night-ink); text-underline-offset: 4px; }

/* ── 좁은 화면 ── */
@media (max-width: 1100px) {
  .in-head { grid-template-columns: minmax(0, 1fr); }
  .in-grid { grid-template-columns: minmax(0, 1fr); }
  .in-panel.is-wide { order: 0; }
}

@media (max-width: 720px) {
  .in { --in-fs-chart: calc(var(--rd-fs-small) - 2px); --in-fs-ui: var(--rd-fs-small); --in-tap: var(--rd-tap); }
  .in-wrap { width: min(100% - 32px, 1440px); }
  .in-brand__sub, .in-font__label { display: none; }
  .in-bar__inner { gap: 12px; }
  .in-bar__title { display: none; }
  .in-font__btn { width: 38px; height: 38px; }
  .in-head h1 { font-size: var(--rd-fs-h1); }
  .in-lead { font-size: var(--rd-fs-small); }
  .in-notice { font-size: calc(var(--rd-fs-small) - 1px); }
  .in-people__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .in-people__axis { display: flex; gap: 8px; align-items: baseline; }
  .in-people__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .in-who { min-height: var(--rd-tap); }
  .in-who__label { font-size: calc(var(--rd-fs-small) - 1px); }
  .in-panel__head { flex-wrap: wrap; padding: 8px 8px 0; }
  .in-panel__head .in-src { order: -1; flex-basis: 100%; }
  .in-panel__head .in-more { margin-left: auto; }
  .in-how { margin: 10px 14px 6px; }
  .in-fig { padding: 0 14px; }
  .in-detail { margin: 12px 14px 0; }
  .in-panel__head h2, .in-tabname { font-size: var(--rd-fs-small); }
  .in-more, .in-tab, .in-chip, .in-picked__clear, .in-cl-btn, .in-table summary { min-height: var(--rd-tap); }
  .in-how { font-size: calc(var(--rd-fs-small) - 1px); }
  .in-block { grid-template-columns: minmax(0, 1fr); margin: 12px 0 0; }
  .in-block div + div { border-left: 0; border-top: 1px solid var(--lm-hairline); }
  .in-block dt, .in-block dd { font-size: 14px; }
  /* 한 사람의 요구·욕구·욕망: 깊이가 다른 세 띠에 점을 놓고, 위 층 글 아래에서 아래 층 점으로 잇는다 */
  .in-tiers { grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; border: 1px solid var(--lm-hairline); border-radius: var(--lm-radius-control); }
  .in-tier { display: grid; grid-template-columns: 3.1em minmax(0, 1fr); gap: 4px; padding: 14px 8px 20px 10px; font-size: var(--in-fs-ui); }
  .in-tier + .in-tier { border-top: 1px solid var(--in-line); }
  .in-tier.is-demand { background: var(--in-paper); }
  .in-tier.is-need { background: color-mix(in srgb, var(--in-blue) 6%, var(--in-paper)); }
  .in-tier.is-desire { background: color-mix(in srgb, var(--in-blue) 12%, var(--in-paper)); }
  .in-tier__name { display: grid; align-content: start; gap: 2px; margin: 0; padding: 2px 0 0; border-bottom: 0; word-break: keep-all; }
  .in-tier__name span { font-size: calc(var(--rd-fs-small) - 3px); line-height: 1.3; }
  .in-tier__name span span { display: block; }
  .in-tier ul { position: relative; z-index: 2; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
  .in-node { display: grid; justify-items: center; align-content: start; gap: 6px; min-height: var(--rd-tap); padding: 2px 2px 4px; border: 0; background: none; font-size: calc(var(--rd-fs-small) - 1px); line-height: 1.3; text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
  .in-node.is-focus { background: none; color: var(--in-blue); }
  .in-node.is-linked { box-shadow: none; }
  .in-node__dot { display: block; width: 16px; height: 16px; border: 2px solid color-mix(in srgb, var(--in-ink) 35%, transparent); border-radius: 50%; background: var(--in-paper); transition: background-color var(--lm-duration-fast) var(--lm-ease-out), border-color var(--lm-duration-fast) var(--lm-ease-out), box-shadow var(--lm-duration-fast) var(--lm-ease-out); }
  .in-tier.is-need .in-node__dot { width: 20px; height: 20px; }
  .in-tier.is-desire .in-node__dot { width: 26px; height: 26px; border-width: 3px; }
  .in-node.is-on .in-node__dot { border-color: var(--in-blue); background: var(--in-blue-wash); }
  .in-node.is-focus .in-node__dot { background: var(--in-blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--in-blue) 20%, transparent); }
  .in-node.is-linked .in-node__dot { box-shadow: 0 0 0 3px var(--in-paper), 0 0 0 5px var(--in-blue); }
  .in-gist { grid-template-columns: minmax(0, 1fr); }
  .in-minis { grid-template-columns: minmax(0, 1fr); }
  .in-ev__date { font-size: 13px; }
  .in-res ul { gap: 6px; }
  .in-steps { grid-template-columns: minmax(0, 1fr); }
  .in-steps li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--in-ink); }
  .in-said { font-size: calc(var(--rd-fs-small) - 1px); }
}

@media (prefers-reduced-motion: reduce) {
  .in *, .in *::before, .in *::after { transition: none !important; }
}

.in-head__side { display: grid; align-content: start; }

/* 자료가 만들어지는 길: 좁으면 세로로 쌓고 실도 세로로 */
@media (max-width: 900px) {
  .in-flow__list { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 16px; }
  .in-flow__step + .in-flow__step::before { top: -22px; left: 19px; width: 2px; height: 16px; }
  .in-flow__step + .in-flow__step::after { top: -8px; left: 15px; border-top: 7px solid var(--lm-rail-accent); border-right: 5px solid transparent; border-bottom: 0; border-left: 5px solid transparent; }
}

/* ── 다른 화면에 들어간 그림(2026-10-13): 집행부 관리 화면(board/insight.html)의 판과 조합원 앱(m/insight.html·m/story.html)의 절 ──
   그 화면의 면·제목·여백을 그대로 쓰고, 그림과 받은 곳·상태 줄만 이 파일에서 가져온다 */
.in.in-embed { background-color: transparent; }
.in-embed .in-fig { padding: 0; }
.in-embed .in-src { flex: 0 1 auto; margin: 0; background: var(--lm-bg-subtle); color: var(--lm-text); }
.panel.in-embed { overflow: hidden; background-color: var(--lm-bg-surface); }
.panel.in-embed .panel-note { margin: 0 0 12px; }
.panel.in-embed .in-block { margin: 0; }
.m-main .in-embed .in-src { justify-self: start; }
.m-main .in-embed .in-block { margin: 0; overflow: hidden; border: 1px solid var(--lm-hairline); border-radius: var(--lm-radius-control); }
.m-main .in-embed .in-block div:first-child { border-top: 0; }
.in-flow--stack { margin-top: 0; }
.in-flow--stack .in-flow__list { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 16px; }
.in-flow--stack .in-flow__step + .in-flow__step::before { top: -22px; left: 19px; width: 2px; height: 16px; }
.in-flow--stack .in-flow__step + .in-flow__step::after { top: -8px; left: 15px; border-top: 7px solid var(--lm-rail-accent); border-right: 5px solid transparent; border-bottom: 0; border-left: 5px solid transparent; }

/* ── 나눠 보기(js/axes.js): 사는 방식·가구 형태·동·집 크기·나이대 가운데 하나 ── */
.in-axes { margin: 0 20px 12px; }
.in-axis__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.in-axis__label { color: var(--in-ink); font-size: calc(var(--rd-fs-small) - 2px); font-weight: 800; white-space: nowrap; }
.in-axis__list { display: flex; flex-wrap: wrap; gap: 6px; }
.in-axis__btn { min-height: 38px; padding: 0 14px; border: 1px solid var(--in-line); border-radius: var(--lm-radius-pill); background: var(--in-paper); color: var(--in-ink); font-size: calc(var(--rd-fs-small) - 2px); font-weight: 700; white-space: nowrap; cursor: pointer; transition: border-color var(--lm-duration-fast) var(--lm-ease-out), background-color var(--lm-duration-fast) var(--lm-ease-out), color var(--lm-duration-fast) var(--lm-ease-out); }
.in-axis__btn:hover { border-color: var(--in-ink); }
.in-axis__btn[aria-pressed="true"] { border-color: var(--in-blue); background: var(--in-blue); color: var(--lm-on-primary); }
.in-axis__hint { margin: 6px 0 0; color: var(--in-muted); font-size: calc(var(--rd-fs-small) - 3px); line-height: 1.5; }
.in-embed .in-axes { margin: 0 0 12px; }

/* 점 그림을 나누지 못하는 기준일 때 그림 대신 두는 줄 */
.in-off { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 4px 0; padding: 14px 16px; border: 1px dashed color-mix(in srgb, var(--in-ink) 35%, transparent); border-radius: var(--lm-radius-inner); background: var(--in-hidden); }
.in-off__text { flex: 1 1 240px; margin: 0; font-size: calc(var(--rd-fs-small) - 2px); line-height: 1.55; }

/* ── 예/아니오로 모은 생각(js/opinions.js) ── */
.in-panel.is-full { grid-column: 1 / -1; }
.in-ops { display: grid; gap: 10px; }
.in-ops__legal { margin: 0; padding: 8px 12px; border: 1px solid var(--lm-hairline); border-radius: var(--lm-radius-inner); background: var(--in-status); color: var(--in-ink); font-size: calc(var(--rd-fs-small) - 2px); font-weight: 700; line-height: 1.5; }
.in-ops__legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; color: var(--in-muted); font-size: calc(var(--rd-fs-small) - 3px); }
.in-ops__legend li { display: inline-flex; align-items: center; gap: 6px; }
.in-ops__swatch { display: inline-block; width: 16px; height: 10px; border-radius: 2px; }
.in-ops__legend .is-yes .in-ops__swatch { background: var(--in-yes); }
.in-ops__legend .is-no .in-ops__swatch { background: var(--in-no); }
.in-ops__legend .is-masked .in-ops__swatch { border: 1px dashed var(--in-muted); background: var(--in-hidden); }
.in-ops__off { margin: 0; color: var(--in-ink); font-size: calc(var(--rd-fs-small) - 2px); line-height: 1.55; }
.in-ops__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px 36px; margin: 4px 0 0; padding: 0; list-style: none; }
.in-op { min-width: 0; padding-top: 10px; border-top: 1.5px solid var(--in-ink); }
.in-op__q { display: flex; align-items: baseline; gap: 8px; margin: 0; color: var(--in-ink); font-size: var(--in-fs-ui); font-weight: 700; line-height: 1.45; }
.in-op__kind { flex: none; padding: 1px 8px; border: 1px solid var(--in-line); border-radius: var(--lm-radius-pill); color: var(--in-muted); font-size: calc(var(--rd-fs-small) - 4px); font-weight: 700; line-height: 1.5; }
.in-op__kind.is-stance { border-color: var(--in-ink); color: var(--in-ink); }
.in-op__body { min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.in-op__count { margin: 2px 0 6px; color: var(--in-muted); font-size: calc(var(--rd-fs-small) - 3px); }
.in-op__rows { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.in-op__row { display: grid; grid-template-columns: 9.6em 2.9em minmax(0, 1fr) 2.9em; align-items: center; column-gap: 8px; min-height: 28px; padding: 2px 4px; border-radius: var(--lm-radius-inner); font-size: var(--in-fs-chart); }
.in-op__row.is-all { margin-bottom: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--in-line); border-radius: 0; }
.in-op__row.is-on { background: var(--in-blue-wash); }
.in-op__name { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; min-width: 0; }
.in-op__label { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.in-op__row.is-all .in-op__label { font-weight: 800; }
.in-op__n { flex: none; color: var(--in-muted); font-size: calc(var(--in-fs-chart) - 1px); white-space: nowrap; }
.in-op__v { font-weight: 800; text-align: right; white-space: nowrap; }
.in-op__v.is-no { text-align: left; }
.in-op__bar { display: block; width: 100%; height: 14px; overflow: hidden; border-radius: 2px; }
.in-op__yes { fill: var(--in-yes); }
.in-op__no { fill: var(--in-no); }
.in-op__cut { stroke: var(--in-paper); stroke-width: 2; vector-effect: non-scaling-stroke; }
.in-op__gap { grid-column: 2 / -1; display: flex; align-items: center; min-height: 22px; padding: 0 10px; border: 1px dashed var(--in-muted); border-radius: 4px; background: var(--in-hidden); color: var(--in-muted); font-size: calc(var(--in-fs-chart) - 1px); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-op__row.is-unsplit .in-op__gap { border-style: solid; border-color: var(--in-line); background: none; }
.in-op__row.is-on .in-op__label { color: var(--in-blue); }

/* 좁은 칸(휴대전화): 같은 막대를 줄이고, 참여 수는 이름 아래로 */
.in-ops.is-compact .in-op__row { grid-template-columns: 5.4em 2.7em minmax(0, 1fr) 2.7em; column-gap: 6px; min-height: 40px; padding: 3px 2px; }
.in-ops.is-compact .in-op__name { display: grid; gap: 0; line-height: 1.25; }
.in-ops.is-compact .in-op__gap { white-space: normal; line-height: 1.3; }
@media (max-width: 720px) {
  .in-axes { margin: 0 14px 12px; }
  .in-axis__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .in-axis__btn { min-height: var(--rd-tap); padding: 0 8px; font-size: var(--rd-fs-small); }
  .in-axis__hint, .in-ops__legend, .in-op__count { font-size: calc(var(--rd-fs-small) - 1px); }
}