/* 본문에 인용한 기획서 부분의 스타일. 원본 차트의 밝은 화면 값과 크기를 옮기고, 각 부분의 루트 클래스 아래로만 적용한다. */

/* 레시피 관계 — 레시피_차트.html */
.fx-recipe { --bg: #f6f5f1; --panel: #ffffff; --ink: #1d1d1b; --muted: #75736c; --line: #cfccc2;
  --hi: #e0702a; --face: #f3c43a; --lane: #ecebe4; --dim: .18;
  --emoji: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.5; }
.fx-recipe .e { font-family: var(--emoji); }
.fx-recipe .rc-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 0; }
.fx-recipe .rc-dev, .fx-recipe .rc-view { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 3px 10px; cursor: pointer; font: inherit; }
.fx-recipe .rc-view[aria-pressed="true"] { border-color: var(--hi); box-shadow: 0 0 0 1px var(--hi); }
.fx-recipe .rc-dev b { font-family: var(--emoji); font-weight: normal; }
.fx-recipe .rc-dev small { color: var(--muted); }
.fx-recipe .rc-dev.on { border-color: var(--hi); box-shadow: 0 0 0 1px var(--hi); }
.fx-recipe .rc-info { padding: 8px 14px 10px; min-height: 52px; color: var(--muted); }
.fx-recipe .rc-info strong { color: var(--ink); }
.fx-recipe .rc-wrap { overflow: auto; max-height: 400px; padding: 0 14px 16px; }
.fx-recipe .rc-chart { position: relative; }
.fx-recipe .rc-chart svg { position: absolute; inset: 0; overflow: visible; }
.fx-recipe .rc-tier { position: absolute; top: 0; bottom: 0; padding-left: 4px; border-left: 1px dashed var(--line); font-size: 12px; color: var(--muted); font-weight: 600; }
.fx-recipe .rc-tier.head { border-left: 2px solid var(--muted); color: var(--ink); }
.fx-recipe .rc-lane { position: absolute; left: 0; right: 0; border-radius: 12px; background: var(--lane); }
.fx-recipe .rc-lane span { position: absolute; left: 10px; top: 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.fx-recipe .rc-node { position: absolute; display: flex; align-items: center; gap: 6px; padding: 0 8px; height: 44px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: opacity .15s; }
.fx-recipe .rc-node .e { font-size: 24px; line-height: 1; }
.fx-recipe .rc-node span:last-child { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-recipe .rc-node.final { border-color: var(--face); border-width: 2px; }
.fx-recipe .rc-badge { position: absolute; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--line); font-family: var(--emoji); font-size: 13px; transition: opacity .15s; }
.fx-recipe path { fill: none; stroke: var(--line); stroke-width: 1.5; transition: opacity .15s; }
.fx-recipe .focus .rc-node, .fx-recipe .focus .rc-badge, .fx-recipe .focus path { opacity: var(--dim); }
.fx-recipe .focus .on { opacity: 1; }
.fx-recipe .focus path.on { stroke: var(--hi); stroke-width: 2; }
.fx-recipe .focus .rc-node.sel { box-shadow: 0 0 0 2px var(--hi); }

/* D-04 업그레이드 목록 — 업그레이드_분류.html */
.fx-list { --panel: #fff; --ink: #22231f; --muted: #65665e; --line: #d8d8ce; --soft: #edeee7;
  --accent: #256a58; --accent-bg: #e4f0e9; --proposal: #955112; --proposal-bg: #f8ecdd;
  background: var(--panel); color: var(--ink); font-size: 14px; line-height: 1.65; }
.fx-list [hidden] { display: none !important; }
.fx-list button, .fx-list input, .fx-list select { font: inherit; color: inherit; }
.fx-list code { font: 11px/1.6 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.fx-list .ul-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px 10px; }
.fx-list .ul-heading h4 { margin: 0; font-size: 19px; letter-spacing: -.035em; }
.fx-list .ul-heading p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.fx-list .ul-count { white-space: nowrap; color: var(--muted); font-size: 12px; padding-top: 5px; }
.fx-list .ul-cats { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 12px; }
.fx-list .ul-cat { display: inline-flex; gap: 6px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: 12px; cursor: pointer; }
.fx-list .ul-cat:hover { background: var(--soft); }
.fx-list .ul-cat[aria-pressed="true"] { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); font-weight: 650; }
.fx-list .ul-cat .count { font-variant-numeric: tabular-nums; color: var(--muted); }
.fx-list .ul-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 0 18px 14px; font-size: 12px; color: var(--muted); }
.fx-list .ul-tools label { display: flex; align-items: center; gap: 6px; }
.fx-list .ul-tools input, .fx-list .ul-tools select, .fx-list .ul-reset { background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; color: var(--ink); font-size: 13px; }
.fx-list .ul-tools input { width: 240px; }
.fx-list .ul-reset { margin-left: auto; cursor: pointer; }
.fx-list .ul-wrap { max-height: 400px; overflow: auto; border-top: 1px solid var(--line); }
.fx-list table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; table-layout: fixed; text-align: left; }
.fx-list caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.fx-list thead th { position: sticky; top: 0; z-index: 1; background: var(--soft); color: var(--muted); font-size: 11px; font-weight: 600; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.fx-list tbody td, .fx-list tbody th { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 12px; overflow-wrap: anywhere; }
.fx-list tbody tr:last-child td { border-bottom: 0; }
.fx-list tbody tr:hover td { background: var(--soft); }
.fx-list .item-name { font-size: 14px; font-weight: 600; }
.fx-list .item-id { display: block; color: var(--muted); margin-top: 3px; }
.fx-list .status { display: inline-block; font-size: 11px; padding: 2px 8px; white-space: nowrap; border-radius: 4px; }
.fx-list .status.registered { color: var(--accent); background: var(--accent-bg); }
.fx-list .status.proposed { color: var(--proposal); background: var(--proposal-bg); }
.fx-list .stage { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); }
.fx-list .group-row th { background: var(--soft); font-size: 12px; padding: 9px 14px; font-weight: 650; }
.fx-list .group-row small { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 10px; }
.fx-list .ul-empty { padding: 40px; text-align: center; color: var(--muted); }

/* 금액 상승 곡선 · 강화 횟수별 금액 성장 — 수익_병목_곡선.html */
.fx-econ { --bg: #fcfcfb; --panel: #ffffff; --ink: #0b0b0b; --ink2: #52514e; --muted: #75736c; --grid: #e6e4de; --line: #cfccc2;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a;
  --emoji: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.55; padding: 12px 14px 14px; }
.fx-econ .e { font-family: var(--emoji); }
.fx-econ input, .fx-econ select, .fx-econ button { font: inherit; color: var(--ink); background: var(--panel); }
.fx-econ select, .fx-econ .ec-controls button { border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; }
.fx-econ :focus-visible { outline: 2px solid var(--s1); outline-offset: 3px; }
.fx-econ .ec-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.fx-econ .ec-row label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.fx-econ .ec-note { margin: 6px 0 0; color: var(--ink2); font-size: 13px; }
.fx-econ .ec-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.fx-econ .ec-k { min-width: 3.4em; font-weight: 600; color: var(--ink2); }
.fx-econ .ec-bar button { font-size: 13px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.fx-econ .ec-bar button[aria-pressed="true"] { border: 2px solid var(--ink); font-weight: 600; }
.fx-econ .ec-bar label { display: flex; align-items: center; gap: 6px; }
.fx-econ .ec-hint { font-size: 12px; }
.fx-econ .ec-chart { position: relative; background: var(--panel); border: 1px solid var(--grid); border-radius: 10px; padding: 8px; margin-top: 10px; }
.fx-econ .ec-chart svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; cursor: crosshair; user-select: none; }
.fx-econ .lbl { font-size: 11px; fill: var(--muted); }
.fx-econ .ec-band { fill: rgb(42 120 214 / 12%); stroke: var(--s1); stroke-dasharray: 4 3; }
.fx-econ .ec-tip { position: absolute; pointer-events: none; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px;
  font-size: 12px; color: var(--ink); white-space: nowrap; box-shadow: 0 2px 8px rgb(0 0 0 / .12); display: none; }
.fx-econ .ec-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 12px; border: 1px solid var(--grid); border-radius: 10px; }
.fx-econ .ec-controls label { display: flex; align-items: center; gap: 8px; }
.fx-econ .ec-scroll { overflow-x: auto; }
.fx-econ table { border-collapse: collapse; width: 100%; min-width: 600px; font-size: 12.5px; margin-top: 6px; }
.fx-econ th, .fx-econ td { border-bottom: 1px solid var(--grid); padding: 4px 6px; text-align: left; }
.fx-econ th { color: var(--muted); font-weight: 600; }
.fx-econ td.n { text-align: right; font-variant-numeric: tabular-nums; }

/* 공장 월드 · 허브 배치 예 — design-system/previews/world.html. 장면 자체는 world.css가 그린다 */
.fx-world { --page-bg: #f2f3fa; --page-fg: #24263d; --page-muted: #60647d; --page-card: #ffffff; --page-line: #d8dced;
  background: var(--page-bg); color: var(--page-fg); padding: 12px 14px 16px; font-size: 13px; }
.fx-world .wh-bar { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px; }
.fx-world .wh-grp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fx-world .wh-grp > span { color: var(--page-muted); }
.fx-world .wh-grp button { font: inherit; padding: 3px 10px; border: 1px solid var(--page-line); border-radius: 8px; background: var(--page-card); color: var(--page-fg); cursor: pointer; }
.fx-world .wh-grp button[aria-pressed="true"] { border: 2px solid var(--page-fg); font-weight: 600; }
.fx-world .wh-fit { overflow: hidden; }
.fx-world .var-stage { transform-origin: 0 0; }