/*
 * 툴 마스터(/tool-master) — 인포그래픽. SSOT 23절 "에이전트 툴" · 11절 "디자인".
 * 읽는 순서: 제목(그림) → 도구 여섯 → Agent = Model + Harness → 에이전트 루프(고리 · 아홉 걸음 · 대화가 자람 · 차이) → 비교표 → AGENTS.md → /goal → 육하원칙 → 함께 쓰기 → 공통 명령 → 수업 · 문서.
 * 같은 뜻에 같은 색 — 모델 = 브랜드(--tm-model), 하네스 = 성공(--tm-harness), 나 = 정보(--tm-you). 세 테마에서 토큰이 저절로 맞는다.
 * 글자 네 단계: h1(공용) · h2 1.35rem · 본문 1rem · 주석 0.85rem (모두 배율을 곱한다). 선은 public/js/ig-lines.js 가 svg 로 내용 뒤에 그린다.
 */
.tmaster {
	--tm-body: calc(1rem * var(--wa-font-size-scale, 1));
	--tm-note: calc(0.85rem * var(--wa-font-size-scale, 1));
	--tm-h2: calc(1.35rem * var(--wa-font-size-scale, 1));
	--tm-h3: calc(1.1rem * var(--wa-font-size-scale, 1));
	--tm-model: var(--sonub-accent);
	--tm-model-soft: var(--sonub-accent-soft);
	--tm-harness: var(--sonub-success);
	--tm-harness-soft: var(--sonub-success-soft);
	--tm-you: var(--sonub-info);
	--tm-you-soft: var(--sonub-info-soft);
	display: grid;
	container: tmaster / inline-size;
	max-inline-size: 72rem;
	padding-block: 1rem 3rem;
	gap: clamp(2.75rem, 5vw, 3.75rem);
	color: var(--sonub-ink);
	word-break: keep-all;
	overflow-wrap: break-word;
}
.tmaster :is(h2, h3, p, ul, ol, li, figure, blockquote, pre) { margin: 0; }
.tmaster :is(section, div, li, a, td, th) { min-inline-size: 0; }
.tmaster :where(ul[role='list'], ol[role='list']) { padding: 0; list-style: none; }
.tmaster h2 { font-size: var(--tm-h2); }
.tmaster h3 { font-size: var(--tm-h3); line-height: 1.4; }
.tmaster :is(a, button, [tabindex='0']):focus-visible { outline: 3px solid var(--sonub-accent); outline-offset: 3px; }
.tmaster code { font-family: var(--wa-font-family-code); overflow-wrap: anywhere; }
.tmaster-block { position: relative; display: grid; gap: 1.1rem; }
.tmaster-block > .sonub-section-heading h2 { color: var(--sonub-accent-ink); }
.tmaster-note { max-inline-size: var(--sonub-reading-width); color: var(--sonub-muted); font-size: var(--tm-body); line-height: 1.75; }
.tmaster-small { font-size: var(--tm-note); line-height: 1.65; }
.tmaster h2.tmaster-label { color: var(--sonub-muted); font-size: var(--tm-note); font-weight: 700; letter-spacing: 0.02em; }
.tmaster-go { justify-self: start; gap: 0.45rem; }
.tmaster-hero img, .tmaster-wide-pic img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; border-radius: var(--wa-border-radius-l); }
.tmaster-wide-pic { max-inline-size: 46rem; justify-self: center; inline-size: 100%; }
.tmaster-wide-pic img { box-shadow: var(--wa-shadow-s); }

/* 누가 하나 — 칩·카드·걸음이 같은 색을 쓴다 */
[data-who='model'] { --tm-who: var(--tm-model); --tm-who-soft: var(--tm-model-soft); --tm-who-fill: var(--wa-color-brand-fill-loud); --tm-who-on: var(--wa-color-brand-on-loud); }
[data-who='harness'] { --tm-who: var(--tm-harness); --tm-who-soft: var(--tm-harness-soft); --tm-who-fill: var(--wa-color-success-fill-loud); --tm-who-on: var(--wa-color-success-on-loud); }
[data-who='you'], [data-who='agent'] { --tm-who: var(--tm-you); --tm-who-soft: var(--tm-you-soft); --tm-who-fill: var(--wa-color-neutral-fill-loud); --tm-who-on: var(--wa-color-neutral-on-loud); }
[data-who='tool'] { --tm-who: var(--wa-color-warning-fill-loud); --tm-who-soft: var(--wa-color-warning-fill-quiet); --tm-who-fill: var(--wa-color-warning-fill-loud); --tm-who-on: var(--wa-color-warning-on-loud); }
.tmaster-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.65rem; border: 1px solid color-mix(in srgb, var(--tm-who) 45%, transparent); border-radius: 999px; background: var(--tm-who-soft); color: var(--sonub-ink); font-size: var(--tm-note); font-weight: 650; line-height: 1.5; }
.tmaster-chip .fa-solid, .tmaster-chip svg, .tmaster-chip i { color: var(--tm-who); }
.tmaster-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.65rem; }
.tmaster-legend-title { color: var(--sonub-muted); font-size: var(--tm-note); font-weight: 700; }

/* 0. 낱말 셋 — 한 프로그램(알약)에서 세 이름(카드)으로 갈라지는 곡선. 세 칸 아니면 한 줄이고, 한 줄이면 첫 카드까지만 선을 긋는다(숨은 점은 ig-lines 가 건너뛴다) */
.tmaster-names { display: grid; justify-items: center; gap: 3.25rem; }
.tmaster-names-origin { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem 0.6rem; padding: 0.55rem 1.15rem; border-radius: 999px; background: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud); font-weight: 750; box-shadow: var(--wa-shadow-s); text-align: center; }
.tmaster-names-programs { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 0.5rem; }
.tmaster-names-programs > span + span::before { content: '·'; margin-inline-end: 0.5rem; opacity: 0.7; }
.tmaster-names-one { font-size: var(--tm-note); font-weight: 650; opacity: 0.9; }
/* 좁으면 알약 대신 둥근 상자 — 이름은 점 대신 작은 칩으로(줄 맨 앞에 점이 떨어지지 않게) */
@container tmaster (max-inline-size: 34rem) {
	.tmaster-names-origin { flex-direction: column; border-radius: var(--wa-border-radius-xl); }
	.tmaster-names-programs > span { padding: 0.1rem 0.6rem; border-radius: 999px; background: color-mix(in srgb, var(--wa-color-brand-on-loud) 16%, transparent); }
	.tmaster-names-programs > span + span::before { content: none; }
}
.tmaster-names-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; justify-self: stretch; }
@container tmaster (min-inline-size: 46rem) {
	.tmaster-names-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container tmaster (max-inline-size: 45.99rem) {
	.tmaster-name:not(:first-child) .tmaster-name-pin { display: none; }
}
/* 한 줄이지만 넓으면 그림 | 글 — 그림이 화면을 다 차지하지 않게 */
@container tmaster (min-inline-size: 30rem) and (max-inline-size: 45.99rem) {
	.tmaster-names .tmaster-name { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 1.1rem; align-items: start; }
	.tmaster-name-pic { grid-row: 1 / 5; }
}
.tmaster-names .ig-line { fill: none; stroke: color-mix(in srgb, var(--wa-color-brand-fill-loud) 70%, var(--sonub-border)); stroke-width: 3; stroke-linecap: round; }
.tmaster-name { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 0.5rem; padding: 1.15rem 1.1rem 1rem; border: 2px solid color-mix(in srgb, var(--tm-who) 55%, var(--sonub-border)); border-radius: var(--wa-border-radius-l); background: color-mix(in srgb, var(--tm-who) 7%, var(--sonub-surface)); box-shadow: var(--wa-shadow-s); }
/* 갈라진 선이 닿는 점 — 카드 윗변 가운데(선이 카드 뒤로 숨지 않게) */
.tmaster-name-pin { position: absolute; inset-block-start: -0.5rem; inset-inline-start: calc(50% - 0.5rem); inline-size: 1rem; block-size: 1rem; border-radius: 999px; background: var(--tm-who-fill); box-shadow: 0 0 0 3px var(--sonub-surface); }
.tmaster-name-pic { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--wa-border-radius-m); }
.tmaster-name-head { display: flex; align-items: center; gap: 0.65rem; }
.tmaster-name h3 { color: var(--sonub-ink); font-size: calc(1.25rem * var(--wa-font-size-scale, 1)); }
.tmaster-name-view { color: var(--sonub-muted); font-size: var(--tm-note); font-weight: 700; }
.tmaster-name > p:not([class]) { font-size: var(--tm-body); line-height: 1.7; }
.tmaster-name-formula { justify-self: start; padding: 0.3rem 0.7rem; border-radius: var(--wa-border-radius-s); background: var(--sonub-surface); color: var(--sonub-ink); font-family: var(--wa-font-family-code); font-size: var(--tm-note); font-weight: 700; overflow-wrap: anywhere; }

/* 0. 도구 여섯 */
.tmaster-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 0.6rem; }
.tmaster-tool a { display: grid; gap: 0.15rem; min-block-size: 2.5rem; padding: 0.65rem 0.9rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-m); background: var(--sonub-surface); color: var(--sonub-ink); text-decoration: none; box-shadow: var(--wa-shadow-xs); }
.tmaster-tool a:hover { border-color: var(--sonub-accent); }
.tmaster-tool-name { font-weight: 750; font-size: var(--tm-body); }
.tmaster-tool-meta { color: var(--sonub-muted); font-size: var(--tm-note); }

/* 1. Agent = Model + Harness */
.tmaster-quote { display: grid; gap: 0.5rem; max-inline-size: 54rem; padding: 1.1rem 1.3rem; border-inline-start: 4px solid var(--sonub-accent); border-radius: var(--wa-border-radius-m); background: color-mix(in srgb, var(--wa-color-brand-fill-loud) 7%, var(--sonub-surface)); }
.tmaster-quote figcaption { color: var(--sonub-muted); font-size: var(--tm-note); font-weight: 650; }
.tmaster-quote blockquote p { color: var(--sonub-accent-ink); font-size: calc(1.3rem * var(--wa-font-size-scale, 1)); font-weight: 750; line-height: 1.45; text-align: start; }
.tmaster-quote-src a { display: inline-flex; align-items: center; gap: 0.45rem; min-block-size: 2.5rem; color: var(--sonub-accent); font-size: var(--tm-note); }
.tmaster-equation { display: grid; gap: 0.75rem; align-items: stretch; }
@container tmaster (min-inline-size: 52rem) {
	.tmaster-equation { grid-template-columns: minmax(0, 0.8fr) auto minmax(0, 1fr) auto minmax(0, 1.6fr); align-items: center; }
}
.tmaster-eq-card:not([data-who='harness']) { align-self: center; block-size: auto; }
.tmaster-eq-card { display: grid; gap: 0.45rem; align-content: start; block-size: 100%; padding: 1rem 1.1rem; border: 2px solid color-mix(in srgb, var(--tm-who) 55%, var(--sonub-border)); border-radius: var(--wa-border-radius-l); background: color-mix(in srgb, var(--tm-who) 7%, var(--sonub-surface)); box-shadow: var(--wa-shadow-s); }
.tmaster-eq-card h3 { color: var(--sonub-ink); font-size: calc(1.3rem * var(--wa-font-size-scale, 1)); }
.tmaster-eq-card > p { color: var(--sonub-muted); font-size: var(--tm-note); line-height: 1.6; }
.tmaster-who-icon { display: inline-grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border-radius: var(--wa-border-radius-m); background: var(--tm-who-fill); color: var(--tm-who-on); font-size: var(--wa-font-size-l); }
.tmaster-eq-op { display: grid; place-items: center; justify-self: center; inline-size: 2.6rem; block-size: 2.6rem; border-radius: 999px; background: var(--sonub-ink); color: var(--sonub-surface); font-size: var(--wa-font-size-l); }
.tmaster-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.4rem; margin-block-start: 0.35rem; }
.tmaster-parts li { display: flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.6rem; border-radius: var(--wa-border-radius-s); background: var(--sonub-surface); color: var(--sonub-ink); font-size: var(--tm-note); line-height: 1.4; }
.tmaster-parts li > :first-child { flex: none; color: var(--tm-harness); }
.tmaster-callout { display: grid; gap: 0.6rem; max-inline-size: 54rem; padding: 1.1rem 1.3rem; border: 1px solid var(--sonub-border); border-block-start: 3px solid var(--tm-harness); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); }
.tmaster-callout > p { font-size: var(--tm-body); line-height: 1.75; }
.tmaster-callout .sonub-button { justify-self: start; gap: 0.45rem; }

/* 2. 큰 고리 — 좁으면 2칸(prompt|report · input|infer · result|run), 넓으면 4칸(prompt input infer report · _ result run _).
   input → infer → run → result → input 이 네모 고리다(결과를 입력에 붙여 모델에게 다시 — OpenAI 글). 글 답은 점선으로 report. */
.tmaster-cycle-wrap { padding: clamp(0.75rem, 2.5vw, 1.5rem); border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-xl); background: color-mix(in srgb, var(--wa-color-brand-fill-loud) 4%, var(--sonub-surface)); }
.tmaster-cycle {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-areas: 'prompt report' 'input infer' 'result run';
	gap: 2.4rem 2rem;
}
@container tmaster (min-inline-size: 50rem) {
	.tmaster-cycle { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: 'prompt input infer report' '. result run .'; gap: 3rem 2.75rem; }
}
.tmaster-cy { position: relative; z-index: 1; display: grid; gap: 0.3rem; align-content: start; padding: 0.75rem 0.85rem; border: 2px solid color-mix(in srgb, var(--tm-who) 60%, var(--sonub-border)); border-radius: var(--wa-border-radius-l); background: color-mix(in srgb, var(--tm-who) 9%, var(--sonub-surface)); box-shadow: var(--wa-shadow-s); }
.tmaster-cy[data-cy='prompt'] { grid-area: prompt; }
.tmaster-cy[data-cy='input'] { grid-area: input; }
.tmaster-cy[data-cy='infer'] { grid-area: infer; }
.tmaster-cy[data-cy='run'] { grid-area: run; }
.tmaster-cy[data-cy='result'] { grid-area: result; }
.tmaster-cy[data-cy='report'] { grid-area: report; }
.tmaster-cy strong { font-size: var(--tm-body); line-height: 1.35; }
.tmaster-cy-who { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--tm-who); font-size: var(--tm-note); font-weight: 750; }
.tmaster-cy-sub { display: flex; gap: 0.35rem; align-items: baseline; color: var(--sonub-muted); font-size: var(--tm-note); line-height: 1.5; }
.tmaster-cycle .ig-line { fill: none; stroke: var(--sonub-muted); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tmaster-cycle .ig-line.is-loop { stroke: var(--tm-harness); stroke-width: 5; }
.tmaster-cycle .ig-line.is-dashed { stroke-dasharray: 7 7; }
.tmaster-cycle .ig-arrow { fill: var(--sonub-muted); stroke: none; }
.tmaster-cycle .ig-arrow.is-loop { fill: var(--tm-harness); }

/* 아홉 걸음 — 번호 원 | 몸통, 번호 사이를 사슬 선이 잇는다 */
.tmaster-steps { display: grid; gap: 1.4rem; max-inline-size: 60rem; }
.tmaster-step { position: relative; z-index: 1; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.9rem; align-items: start; }
.tmaster-step-n { display: inline-grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border-radius: 999px; background: var(--tm-who-fill); color: var(--tm-who-on); font-weight: 800; box-shadow: 0 0 0 4px var(--sonub-surface); }
.tmaster-step-body { display: grid; gap: 0.55rem; padding: 0.95rem 1.15rem; border: 1px solid var(--sonub-border); border-inline-start: 4px solid var(--tm-who); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); box-shadow: var(--wa-shadow-xs); }
.tmaster-step-who { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tmaster-step-body h3 { display: flex; align-items: center; gap: 0.55rem; }
.tmaster-step-body h3 > :first-child { color: var(--tm-who); }
.tmaster-step-body > p { font-size: var(--tm-body); line-height: 1.75; }
@container tmaster (max-inline-size: 34rem) {
	.tmaster-step { grid-template-columns: 2.1rem minmax(0, 1fr); gap: 0.55rem; }
	.tmaster-step-n { inline-size: 2.1rem; block-size: 2.1rem; }
	.tmaster-step-body { padding: 0.85rem 0.9rem; }
}
.tmaster-steps-lines .ig-line { fill: none; stroke: color-mix(in srgb, var(--sonub-accent) 55%, var(--sonub-border)); stroke-width: 3; stroke-linecap: round; }
.tmaster-sample { display: grid; gap: 0.3rem; }
.tmaster-sample figcaption { color: var(--sonub-muted); font-size: var(--tm-note); font-weight: 700; }
.tmaster-sample pre { overflow-x: auto; padding: 0.75rem 0.9rem; border-radius: var(--wa-border-radius-m); background: var(--wa-color-surface-lowered); color: var(--sonub-ink); font-size: calc(0.82rem * var(--wa-font-size-scale, 1)); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; text-align: start; }

/* 대화가 자란다 — 칸 수로만 보이는 쌓인 막대 */
.tmaster-context { display: grid; gap: 0.8rem; padding: 1.1rem 1.25rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); }
.tmaster-stacks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; align-items: end; max-inline-size: 40rem; }
.tmaster-stack { display: grid; gap: 0.4rem; justify-items: center; }
.tmaster-stack-bar { display: grid; gap: 3px; inline-size: min(100%, 4.5rem); }
.tmaster-seg { display: block; block-size: 1.6rem; border-radius: var(--wa-border-radius-s); }
.tmaster-seg[data-seg='fixed'] { background: var(--tm-harness); }
.tmaster-seg[data-seg='history'] { background: color-mix(in srgb, var(--tm-model) 40%, var(--sonub-surface)); }
.tmaster-seg[data-seg='new'] { background: var(--tm-model); }
.tmaster-seg[data-seg='summary'] { background: repeating-linear-gradient(45deg, var(--tm-you), var(--tm-you) 4px, var(--tm-you-soft) 4px, var(--tm-you-soft) 8px); }
.tmaster-stack-label { color: var(--sonub-muted); font-size: var(--tm-note); text-align: center; line-height: 1.35; }
.tmaster-seg-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: var(--tm-note); color: var(--sonub-muted); }
.tmaster-seg-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.tmaster-seg-legend .tmaster-seg { inline-size: 1rem; block-size: 1rem; }

/* 사실 카드(캐시 · 압축 · 안전, 함께 쓰는 좋은 점) */
.tmaster-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem; }
.tmaster-facts > li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0.35rem 0.85rem; align-content: start; padding: 1rem 1.1rem; border: 1px solid var(--sonub-border); border-block-start: 3px solid var(--coding-accent, var(--sonub-accent)); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); }
.tmaster-facts > li > .sonub-icon-tile { grid-row: 1 / 3; }
.tmaster-facts h3 { font-size: var(--tm-body); }
.tmaster-facts p { color: var(--sonub-muted); font-size: var(--tm-note); line-height: 1.7; }

/* 표 — 넓으면 표, 좁으면 줄마다 카드(칸 앞에 도구 이름) */
.tmaster-table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); }
.tmaster-table { inline-size: 100%; border-collapse: collapse; font-size: var(--tm-note); }
.tmaster-matrix { table-layout: fixed; min-inline-size: 52rem; }
.tmaster-matrix thead th:first-child { inline-size: 9.5rem; }
.tmaster-matrix code { overflow-wrap: normal; word-break: normal; }
.tmaster-table :is(th, td) { padding: 0.6rem 0.65rem; border-block-end: 1px solid var(--sonub-border); text-align: start; vertical-align: top; line-height: 1.5; }
.tmaster-table thead th { position: sticky; inset-block-start: 0; background: var(--wa-color-surface-lowered); color: var(--sonub-ink); font-weight: 750; }
.tmaster-table tbody th { font-weight: 700; color: var(--sonub-ink); }
.tmaster-table tbody th > :first-child { margin-inline-end: 0.4rem; color: var(--sonub-accent); }
.tmaster-table tbody tr:last-child :is(th, td) { border-block-end: 0; }
.tmaster-cell-label { display: none; }
.tmaster-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.4rem; }
.tmaster-cell small { flex-basis: 100%; color: var(--sonub-muted); font-size: calc(0.78rem * var(--wa-font-size-scale, 1)); line-height: 1.45; }
.tmaster-cell code { padding: 0.05rem 0.35rem; border-radius: var(--wa-border-radius-s); background: var(--wa-color-surface-lowered); font-size: calc(0.8rem * var(--wa-font-size-scale, 1)); }
.tmaster-verdict { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 650; }
.tmaster-legend .tmaster-verdict { padding: 0.2rem 0.6rem; border: 1px solid var(--sonub-border); border-radius: 999px; background: var(--sonub-surface); font-size: var(--tm-note); }
.tmaster-verdict[data-verdict='yes'] > :first-child { color: var(--sonub-success); }
.tmaster-verdict[data-verdict='name'] > :first-child { color: var(--sonub-info); }
.tmaster-verdict[data-verdict='no'] > :first-child { color: var(--sonub-danger); }
.tmaster-verdict[data-verdict='unconfirmed'] > :first-child { color: var(--sonub-muted); }
.tmaster-matrix td[data-verdict='no'] { background: color-mix(in srgb, var(--wa-color-danger-fill-loud) 7%, transparent); }
.tmaster-matrix td[data-verdict='unconfirmed'] { background: color-mix(in srgb, var(--sonub-muted) 9%, transparent); }
.tmaster-src { display: inline-flex; align-items: center; gap: 0.3rem; min-block-size: 1.75rem; min-inline-size: 1.75rem; justify-content: center; color: var(--sonub-accent); font-size: var(--tm-note); text-decoration: none; }
.tmaster-src:hover { text-decoration: underline; }
.tmaster-src.is-cli { color: var(--sonub-muted); cursor: help; }
.tmaster-diff-table td { font-size: var(--tm-note); }
.tmaster-diff-table td .tmaster-src { margin-inline-start: 0.35rem; }
.tmaster-diff { display: grid; gap: 0.8rem; }
@container tmaster (max-inline-size: 47.99rem) {
	.tmaster-matrix { min-inline-size: 0; table-layout: auto; }
	.tmaster-matrix code { overflow-wrap: anywhere; }
	.tmaster-table-wrap { overflow: visible; border: 0; background: none; }
	.tmaster-table, .tmaster-table :is(thead, tbody, tr, th, td) { display: block; }
	.tmaster-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
	.tmaster-table tbody { display: grid; gap: 0.8rem; }
	.tmaster-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); overflow: hidden; }
	.tmaster-diff-table tbody tr { grid-template-columns: minmax(0, 1fr); }
	.tmaster-table tbody th { grid-column: 1 / -1; background: var(--wa-color-surface-lowered); font-size: var(--tm-body); }
	.tmaster-table tbody :is(th, td) { border-block-end: 1px solid var(--sonub-border); }
	.tmaster-matrix tbody td:nth-child(even) { border-inline-end: 1px solid var(--sonub-border); }
	.tmaster-cell-label { display: block; margin-block-end: 0.2rem; color: var(--sonub-muted); font-size: calc(0.75rem * var(--wa-font-size-scale, 1)); font-weight: 750; }
}

/* 4~8. 그림 | 글 */
.tmaster-split { display: grid; gap: 1.25rem; align-items: start; }
@container tmaster (min-inline-size: 44rem) {
	.tmaster-split { grid-template-columns: 13rem minmax(0, 1fr); gap: 1.75rem; }
}
.tmaster-pic { inline-size: min(100%, 13rem); block-size: auto; aspect-ratio: 1; border-radius: var(--wa-border-radius-l); box-shadow: var(--wa-shadow-s); }
.tmaster-split-body { display: grid; gap: 0.85rem; }
.tmaster-checks { display: grid; gap: 0.5rem; }
.tmaster-checks li { display: flex; align-items: center; gap: 0.7rem; font-size: var(--tm-body); line-height: 1.55; }
.tmaster-checks .sonub-icon-tile { flex: none; }
.tmaster-example { max-inline-size: 44rem; }
.tmaster-example pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.tmaster-where { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.8rem; }
.tmaster-where > li { display: grid; gap: 0.35rem; align-content: start; padding: 0.9rem 1rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); }
.tmaster-where strong { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--tm-body); }
.tmaster-where p { color: var(--sonub-muted); font-size: var(--tm-note); line-height: 1.65; }
.tmaster-where .tmaster-src { justify-self: start; }
.tmaster-where > li[data-verdict='no'] { border-style: dashed; }

/* 6. 육하원칙 — 나쁜 예(빨강 테두리) | 좋은 예(여섯 칸) */
.tmaster-bad, .tmaster-good { display: grid; gap: 0.6rem; padding: 1rem 1.2rem; border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); }
.tmaster-bad { border: 2px dashed color-mix(in srgb, var(--wa-color-danger-fill-loud) 60%, var(--sonub-border)); }
.tmaster-good { border: 2px solid color-mix(in srgb, var(--wa-color-success-fill-loud) 60%, var(--sonub-border)); }
.tmaster-bad h3 > :first-child { color: var(--wa-color-danger-fill-loud); margin-inline-end: 0.4rem; }
.tmaster-good h3 > :first-child { color: var(--sonub-success); margin-inline-end: 0.4rem; }
.tmaster-quote-line { font-size: calc(1.15rem * var(--wa-font-size-scale, 1)); font-weight: 700; }
.tmaster-bad .tmaster-small { color: var(--sonub-muted); }
.tmaster-w { display: grid; gap: 0.5rem; }
.tmaster-w li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline; padding-block: 0.35rem; border-block-end: 1px dashed var(--sonub-border); }
.tmaster-w li:last-child { border-block-end: 0; }
.tmaster-w-key { display: inline-flex; align-items: center; gap: 0.4rem; justify-self: start; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--sonub-accent-soft); color: var(--sonub-accent-ink); font-size: var(--tm-note); font-weight: 750; }
.tmaster-w-text { font-size: var(--tm-body); line-height: 1.65; }
@container tmaster (max-inline-size: 30rem) {
	.tmaster-w li { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
}

/* 7. 두 상자가 에이전트 하나로 — 넓으면 왼쪽 둘 → 오른쪽 하나, 좁으면 위 둘 → 아래 하나 */
.tmaster-merge { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: 'a p' 'out out'; gap: 2.5rem 1rem; max-inline-size: 54rem; }
@container tmaster (min-inline-size: 44rem) {
	.tmaster-merge { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); grid-template-areas: 'a out' 'p out'; gap: 1.25rem 4rem; align-items: center; }
}
#tm-tg-agents { grid-area: a; }
#tm-tg-prompt { grid-area: p; }
.tmaster-merge-in { position: relative; z-index: 1; display: grid; gap: 0.35rem; padding: 0.9rem 1rem; border: 2px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); }
.tmaster-merge-in.is-agents, #tm-tg-agents { border-color: color-mix(in srgb, var(--tm-model) 55%, var(--sonub-border)); }
#tm-tg-prompt { border-color: color-mix(in srgb, var(--tm-harness) 55%, var(--sonub-border)); }
.tmaster-merge-in p { color: var(--sonub-muted); font-size: var(--tm-note); line-height: 1.6; }
.tmaster-merge-out { grid-area: out; position: relative; z-index: 1; display: grid; justify-items: center; gap: 0.4rem; justify-self: center; padding: 0.75rem; border-radius: var(--wa-border-radius-xl); background: var(--sonub-surface); box-shadow: var(--wa-shadow-s); }
.tmaster-merge-out img { inline-size: min(100%, 11rem); block-size: auto; aspect-ratio: 1; border-radius: var(--wa-border-radius-l); }
.tmaster-merge .ig-line { fill: none; stroke-width: 3; stroke-linecap: round; }
.tmaster-merge .ig-line.is-agents, .tmaster-merge .ig-arrow.is-agents { stroke: var(--tm-model); }
.tmaster-merge .ig-line.is-prompt, .tmaster-merge .ig-arrow.is-prompt { stroke: var(--tm-harness); }
.tmaster-merge .ig-arrow.is-agents { fill: var(--tm-model); }
.tmaster-merge .ig-arrow.is-prompt { fill: var(--tm-harness); }

/* 8. 공통 명령 */
.tmaster-cheats { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.8rem; }
.tmaster-cheats > li { display: grid; gap: 0.45rem; align-content: start; padding: 0.9rem 1rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); }
.tmaster-cheats h3 { display: flex; align-items: center; gap: 0.5rem; font-size: var(--tm-body); }
.tmaster-cheats h3 > :first-child { color: var(--sonub-accent); }
.tmaster-cheats code { justify-self: start; padding: 0.25rem 0.55rem; border-radius: var(--wa-border-radius-s); background: var(--wa-color-surface-lowered); font-size: calc(0.82rem * var(--wa-font-size-scale, 1)); }
.tmaster-cheats small { color: var(--sonub-muted); font-size: var(--tm-note); line-height: 1.5; }

/* 9. 수업 · 문서 */
.tmaster-lessons { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.5rem; }
.tmaster-lessons a { display: flex; align-items: center; gap: 0.55rem; min-block-size: 2.75rem; padding: 0.5rem 0.85rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-m); background: var(--sonub-surface); color: var(--sonub-accent); font-size: var(--tm-body); text-decoration: none; }
.tmaster-lessons a:hover { border-color: var(--sonub-accent); background: var(--sonub-accent-soft); }
.tmaster-docs { display: grid; gap: 0.35rem; }
.tmaster-docs a { display: inline-flex; align-items: center; gap: 0.55rem; min-block-size: 2.5rem; color: var(--sonub-accent); font-size: var(--tm-body); }

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.tmaster :is(.tmaster-tool a, .tmaster-lessons a) { transition: border-color 160ms ease, background-color 160ms ease; }
}

/* 탭 둘(툴 공통 특징 · 툴 설치) — 탭 본문 안의 절도 페이지와 같은 간격으로 쌓는다(SSOT 11절 "페이지 안 탭") */
.tmaster-tabs { display: grid; gap: 1.75rem; }
.tmaster-panel { display: grid; gap: clamp(2.75rem, 5vw, 3.75rem); }
.tmaster-panel[hidden] { display: none; }

/* 툴 설치 탭 — 모양 셋 카드 · 공통 네 걸음(사슬 선) · 도구 여섯 카드. 모양마다 색: CLI = 하네스색, 데스크톱 = 나(정보)색, VS Code 확장 = 모델(브랜드)색 */
.tmaster-form[data-form='cli'] { --tm-form: var(--tm-harness); --tm-form-soft: var(--tm-harness-soft); }
.tmaster-form[data-form='desktop'] { --tm-form: var(--tm-you); --tm-form-soft: var(--tm-you-soft); }
.tmaster-form[data-form='ide'] { --tm-form: var(--tm-model); --tm-form-soft: var(--tm-model-soft); }
.tmaster-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.9rem; }
.tmaster-form { display: grid; grid-template-rows: auto 1fr auto; gap: 0.75rem; padding: 1rem 1.1rem; border: 1px solid var(--sonub-border); border-block-start: 4px solid var(--tm-form); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); box-shadow: var(--wa-shadow-xs); }
.tmaster-form h3 { display: flex; align-items: center; gap: 0.6rem; }
.tmaster-form-icon { display: inline-grid; place-items: center; inline-size: 2.3rem; block-size: 2.3rem; border-radius: 999px; background: var(--tm-form-soft); color: var(--tm-form); }
.tmaster-form dl { display: grid; gap: 0.6rem; margin: 0; }
.tmaster-form dt { color: var(--sonub-muted); font-size: var(--tm-note); font-weight: 700; }
.tmaster-form dd { margin: 0; font-size: var(--tm-body); line-height: 1.6; }

.tmaster-path { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: 1rem; }
.tmaster-path-step { position: relative; z-index: 1; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0.65rem; align-items: start; padding: 0.85rem 0.95rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); }
.tmaster-path-n { display: inline-grid; place-items: center; inline-size: 2.2rem; block-size: 2.2rem; border-radius: 999px; background: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud); font-weight: 800; }
.tmaster-path-step > p { font-size: var(--tm-body); line-height: 1.6; }

.tmaster-installs { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 0.85rem; }
.tmaster-install { display: grid; gap: 0.55rem; align-content: start; padding: 0.95rem 1.05rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); }
.tmaster-install[data-missing] { border-style: dashed; background: transparent; }
.tmaster-install h3 { font-size: var(--tm-body); }
.tmaster-install-os { color: var(--sonub-muted); font-size: var(--tm-note); font-weight: 700; }
.tmaster-install-os code { color: var(--sonub-ink); font-weight: 600; }
.tmaster-install-name { font-weight: 700; }
.tmaster-install-note, .tmaster-install-none { color: var(--sonub-muted); font-size: var(--tm-note); line-height: 1.6; }
.tmaster-install-none { display: flex; align-items: center; gap: 0.45rem; }
.tmaster-install-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0; font-size: var(--tm-note); }
.tmaster-install-meta > div { display: flex; align-items: center; gap: 0.4rem; }
.tmaster-install-meta dt { color: var(--sonub-muted); font-weight: 700; }
.tmaster-install-meta dd { margin: 0; }
.tmaster-install-meta code { padding: 0.1rem 0.45rem; border-radius: var(--wa-border-radius-s); background: var(--wa-color-surface-lowered); }
.tmaster-install-doc { display: inline-flex; align-items: center; gap: 0.45rem; justify-self: start; color: var(--sonub-accent); font-size: var(--tm-note); }
.tmaster-install .skills-command { margin: 0; }
.tmaster-install-more { display: grid; gap: 0.5rem; }
.tmaster-install-more > summary { color: var(--sonub-accent); font-size: var(--tm-note); font-weight: 700; cursor: pointer; }
.tmaster-install-more[open] > summary { margin-block-end: 0.2rem; }

/* 툴 추천 사용법 탭(/tool-master/usage, x-widget.tool-master.usage) — 머리 그림에서 세 갈래 · 도구 카드 둘(사다리에 추천 칸) · 습관 사슬 · 실수 → 고치기 */
.tmaster-usage { display: grid; gap: clamp(2.75rem, 5vw, 3.75rem); }
.tmaster-use-intro { position: relative; display: grid; gap: 1.1rem; }
.tmaster-use-hero { position: relative; z-index: 1; justify-self: center; inline-size: min(100%, 44rem); }
.tmaster-use-hero img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--wa-border-radius-l); box-shadow: var(--wa-shadow-s); }
.tmaster-use-glance { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.8rem; }
.tmaster-use-glance a { display: flex; align-items: center; gap: 0.75rem; block-size: 100%; padding: 0.85rem 1rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); color: var(--sonub-ink); text-decoration: none; }
.tmaster-use-glance a:hover { border-color: var(--sonub-accent); background: var(--sonub-accent-soft); }
.tmaster-use-glance span:not(.sonub-icon-tile) { display: grid; gap: 0.15rem; }
.tmaster-use-glance small { color: var(--sonub-muted); font-size: var(--tm-note); line-height: 1.5; }
.tmaster-use-intro .ig-line { fill: none; stroke: color-mix(in srgb, var(--sonub-accent) 55%, var(--sonub-border)); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 7; }

.tmaster-use-models { display: grid; gap: 1rem; }
@container tmaster (min-width: 46rem) {
	.tmaster-use-models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tmaster-use-model { display: grid; gap: 0.85rem; align-content: start; padding: 1.1rem 1.2rem; border: 1px solid var(--sonub-border); border-block-start: 4px solid var(--tm-who); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); }
.tmaster-use-model > p { font-size: var(--tm-body); line-height: 1.7; }
.tmaster-use-model-head { display: grid; gap: 0.5rem; }
.tmaster-use-model-head h3 { color: var(--sonub-muted); }
.tmaster-use-pick { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem; color: var(--tm-who); font-size: calc(1.6rem * var(--wa-font-size-scale, 1)); font-weight: 800; line-height: 1.2; }
.tmaster-use-pick-effort { padding: 0.15rem 0.7rem; border-radius: 999px; background: var(--tm-who-fill); color: var(--tm-who-on); font-size: var(--tm-note); font-weight: 700; }
.tmaster-use-ladder { display: grid; gap: 0.35rem; }
.tmaster-use-ladder figcaption { color: var(--sonub-muted); font-size: var(--tm-note); }
.tmaster-use-ladder ol { display: flex; align-items: flex-end; gap: 0.3rem; }
.tmaster-use-ladder li { flex: 1 1 0; display: grid; place-items: end center; min-inline-size: 0; padding-block-end: 0.3rem; border-radius: var(--wa-border-radius-s) var(--wa-border-radius-s) 0 0; background: var(--tm-who-soft); color: var(--sonub-muted); }
.tmaster-use-ladder li:nth-child(1) { block-size: 2.2rem; }
.tmaster-use-ladder li:nth-child(2) { block-size: 2.8rem; }
.tmaster-use-ladder li:nth-child(3) { block-size: 3.4rem; }
.tmaster-use-ladder li:nth-child(4) { block-size: 4rem; }
.tmaster-use-ladder li:nth-child(5) { block-size: 4.6rem; }
.tmaster-use-ladder li:nth-child(6) { block-size: 5.2rem; }
.tmaster-use-ladder li[aria-current] { background: var(--tm-who-fill); color: var(--tm-who-on); font-weight: 800; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tm-who) 35%, transparent); }
.tmaster-use-ladder code { font-size: calc(0.72rem * var(--wa-font-size-scale, 1)); overflow-wrap: normal; }
.tmaster-use-cmds { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.35rem 0.75rem; margin: 0; font-size: var(--tm-note); }
.tmaster-use-cmds dt { color: var(--sonub-muted); font-weight: 700; }
.tmaster-use-cmds dd { margin: 0; }
.tmaster-use-cmds code, .tmaster-use-tools code { padding: 0.1rem 0.45rem; border-radius: var(--wa-border-radius-s); background: var(--wa-color-surface-lowered); }
.tmaster-use-model .tmaster-src { justify-self: start; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--sonub-accent); font-size: var(--tm-note); }

.tmaster-use-tools { display: grid; gap: 0.4rem; margin: 0; }
.tmaster-use-tools > div { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.tmaster-use-tools dd { margin: 0; font-size: var(--tm-note); }

.tmaster-use-mistakes { display: grid; gap: 0.8rem; max-inline-size: 62rem; }
/* 실수 카드에도 링크 복사(data-linkify-anchor) — 단추는 격자 칸을 차지하지 않게 모서리에 띄운다 */
.tmaster-use-mistakes > li > .linkify-link { position: absolute; inset-block-start: 0.35rem; inset-inline-end: 0.35rem; margin: 0; }
.tmaster-use-mistakes > li { position: relative; display: grid; gap: 0.6rem; align-items: center; padding: 0.85rem 1rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); }
@container tmaster (min-width: 42rem) {
	.tmaster-use-mistakes > li { grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr); }
}
.tmaster-use-bad { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.35rem 0.7rem; align-items: start; }
.tmaster-use-bad > p { font-size: var(--tm-body); line-height: 1.6; }
.tmaster-use-from { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tmaster-use-from .tmaster-chip { font-size: calc(0.75rem * var(--wa-font-size-scale, 1)); }
.tmaster-use-arrow { justify-self: center; color: var(--tm-harness); font-size: 1.2rem; }
.tmaster-use-fix { display: grid; gap: 0.35rem; padding: 0.6rem 0.8rem; border-inline-start: 3px solid var(--tm-harness); border-radius: var(--wa-border-radius-m); background: var(--tm-harness-soft); }
.tmaster-use-fix > p { font-size: var(--tm-body); line-height: 1.6; }
.tmaster-use-fix a { display: inline-flex; align-items: center; gap: 0.4rem; justify-self: start; color: var(--sonub-accent); font-size: var(--tm-note); font-weight: 700; }
@container tmaster (max-width: 42rem) {
	.tmaster-use-arrow { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.tmaster-use-glance a { transition: border-color 160ms ease, background-color 160ms ease; }
}
/* 걸음 사슬 선 — 걸음 칸 뒤로 지나가는 가는 선(public/js/ig-lines.js) */
.tmaster-path-lines { position: relative; }
.tmaster-path-lines .ig-line { fill: none; stroke: color-mix(in srgb, var(--sonub-accent) 55%, var(--sonub-border)); stroke-width: 3; stroke-linecap: round; }
@container tmaster (max-width: 40rem) {
	.tmaster-path { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
}

/* 툴 컨텍스트 탭(/tool-master/context) — 사용량 카드 · 두 몫 · 압축 길 · 1M 눈금 · 다른 툴. 머리·설정 카드는 툴 추천 사용법 부품(tmaster-use-*)을 같이 쓴다 */
.tmaster-ctx { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.75rem, 5vw, 3.75rem); }
/* 넓은 표(압축 표)가 칸을 늘려 페이지를 넓히지 않게 — 표는 자기 상자 안에서 옆으로 스크롤 */
.tmaster-ctx > .tmaster-block { grid-template-columns: minmax(0, 1fr); }
.tmaster-ctx-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 0.9rem; }
.tmaster-ctx-tool { position: relative; display: grid; gap: 0.55rem; align-content: start; padding: 1rem 1.1rem; border: 1px solid var(--sonub-border); border-block-start: 4px solid var(--tm-who); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); }
.tmaster-ctx-tool > .linkify-link { position: absolute; inset-block-start: 0.35rem; inset-inline-end: 0.35rem; margin: 0; }
.tmaster-ctx-tool h3 { color: var(--tm-who); }
.tmaster-ctx-tool > p:not(.tmaster-ctx-row, .tmaster-small) { font-size: var(--tm-body); line-height: 1.65; }
.tmaster-ctx-tool .tmaster-small { color: var(--sonub-muted); }
.tmaster-ctx-tool .tmaster-src { justify-self: start; }
.tmaster-ctx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.45rem; font-size: var(--tm-note); }
.tmaster-ctx-k { color: var(--sonub-muted); font-weight: 700; margin-inline-end: 0.2rem; }
.tmaster-ctx-row code, .tmaster-ctx-free code, .tmaster-ctx-table code { padding: 0.1rem 0.45rem; border-radius: var(--wa-border-radius-s); background: var(--wa-color-surface-lowered); }
.tmaster-ctx-row .tmaster-chip[data-span='none'] { border-style: dashed; background: transparent; color: var(--sonub-muted); }

.tmaster-ctx-free ul { display: grid; gap: 0.7rem; }
.tmaster-ctx-free li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start; padding: 0.7rem 0.85rem; border-inline-start: 3px solid var(--tm-who); border-radius: var(--wa-border-radius-m); background: var(--tm-who-soft); }
.tmaster-ctx-free li div { display: grid; gap: 0.35rem; justify-items: start; }
.tmaster-ctx-free li p { font-size: var(--tm-body); line-height: 1.65; }
.tmaster-ctx-free code { font-size: var(--tm-note); }

.tmaster-ctx-grow { display: grid; gap: 1rem; align-items: start; }
@container tmaster (min-width: 52rem) {
	.tmaster-ctx-grow { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}
.tmaster-ctx-grow figcaption { color: var(--sonub-muted); }
.tmaster-ctx-parts { display: grid; gap: 0.8rem; }
.tmaster-ctx-part { display: grid; gap: 0.55rem; padding: 0.9rem 1.05rem; border: 1px solid var(--sonub-border); border-inline-start: 4px solid var(--tm-who); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); }
.tmaster-ctx-part > p { font-size: var(--tm-body); line-height: 1.65; }
.tmaster-ctx-layers { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tmaster-ctx-layers li { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.65rem; border-radius: 999px; background: var(--tm-who-soft); font-size: var(--tm-note); font-weight: 650; }
.tmaster-ctx-layers li > :first-child { color: var(--tm-who); }

.tmaster-ctx-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0.8rem; }
.tmaster-ctx-ways > li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start; padding: 0.9rem 1rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); }
.tmaster-ctx-ways > li > .linkify-link { position: absolute; inset-block-start: 0.35rem; inset-inline-end: 0.35rem; margin: 0; }
.tmaster-ctx-ways > li div { display: grid; gap: 0.3rem; }
.tmaster-ctx-ways p { font-size: var(--tm-body); line-height: 1.6; }
.tmaster-ctx-table { min-inline-size: 46rem; }
/* 표의 명령·설정은 낱말 가운데서 자르지 않는다(넘치면 표가 옆으로 스크롤) */
.tmaster-ctx-table code { overflow-wrap: normal; word-break: normal; }
.tmaster-ctx-table td:last-child { min-inline-size: 16rem; }
/* 좁은 화면 — 툴 마스터 표 공통 규칙대로 도구마다 카드(칸 이름 tmaster-cell-label), 넓은 칸 폭은 풀고 긴 이름은 끊어 넣는다 */
@container tmaster (max-inline-size: 47.99rem) {
	.tmaster-ctx-table { min-inline-size: 0; }
	.tmaster-ctx-table td:is(:nth-child(4), :last-child) { grid-column: 1 / -1; min-inline-size: 0; }
	.tmaster-ctx-table code { overflow-wrap: anywhere; }
}
/* KIMI_MODEL_MAX_CONTEXT_SIZE 같은 긴 이름이 카드 밖으로 나가지 않게 */
.tmaster-ctx :is(.tmaster-ctx-tool, .tmaster-ctx-others li, .tmaster-use-model, .tmaster-ctx-free li) p { overflow-wrap: anywhere; }
.tmaster-ctx-none { color: var(--sonub-muted); }

/* 1M 눈금 — 채운 막대(SONUB 압축선까지) 위에 기본 몫, 세로 눈금 셋. 왼쪽에서 오른쪽으로 읽는 수직선이라 RTL 에서도 dir="ltr" */
.tmaster-ctx-scale { display: grid; gap: 0.55rem; max-inline-size: 54rem; padding: 1rem 1.15rem 1.1rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); }
.tmaster-ctx-scale figcaption { color: var(--sonub-muted); font-size: var(--tm-note); font-weight: 700; }
.tmaster-ctx-track { position: relative; block-size: 1.6rem; border-radius: 999px; background: var(--wa-color-surface-lowered); box-shadow: inset 0 0 0 1px var(--sonub-border); }
.tmaster-ctx-fill { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--pct); border-radius: 999px; background: color-mix(in srgb, var(--tm-model) 55%, var(--sonub-surface)); }
.tmaster-ctx-fill[data-part='base'] { background: var(--tm-harness); }
.tmaster-ctx-mark { position: absolute; inset-block: -0.35rem; inset-inline-start: var(--pct); inline-size: 3px; margin-inline-start: -1.5px; border-radius: 2px; background: var(--sonub-muted); }
.tmaster-ctx-mark[data-mark='pick'] { background: var(--tm-model); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tm-model) 30%, transparent); }
.tmaster-ctx-mark[data-mark='base'] { background: var(--tm-harness); }
.tmaster-ctx-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; font-size: var(--tm-note); color: var(--sonub-muted); }
.tmaster-ctx-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.tmaster-ctx-legend li::before { content: ''; inline-size: 0.8rem; block-size: 0.8rem; border-radius: 3px; background: var(--sonub-muted); }
.tmaster-ctx-legend li[data-mark='base']::before { background: var(--tm-harness); }
.tmaster-ctx-legend li[data-mark='pick'] { color: var(--sonub-ink); }
.tmaster-ctx-legend li[data-mark='pick']::before { background: var(--tm-model); }
.tmaster-ctx-legend li[data-mark='window']::before { background: var(--wa-color-surface-lowered); box-shadow: inset 0 0 0 1px var(--sonub-border); }

.tmaster-ctx-others { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 0.8rem; }
.tmaster-ctx-others > li { position: relative; display: grid; gap: 0.5rem; align-content: start; padding: 0.9rem 1rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); }
.tmaster-ctx-others > li > .linkify-link { position: absolute; inset-block-start: 0.35rem; inset-inline-end: 0.35rem; margin: 0; }
.tmaster-ctx-others h4 { margin: 0; font-size: var(--tm-body); }
.tmaster-ctx-others p { font-size: var(--tm-body); line-height: 1.6; }
.tmaster h3.tmaster-label { color: var(--sonub-muted); font-size: var(--tm-note); font-weight: 700; letter-spacing: 0.02em; }