/*
 * 직접 만들기(/ai/build) — 이전 사이트 routes/ai/build/+page.svelte · components/BigramControls.svelte 의 스코프 CSS 를 옮겼다.
 * 선택자는 .ai-build 아래로 좁히고, 전역 이름(app.css 의 .chip 등)을 쓰지 않는다 — 공식의 낱말 칸은 .word 다.
 * 후보 막대·비교표·단계 레일의 모양은 공용 content.css(dg-*)가 맡는다. 방향이 있는 속성은 논리 속성만 쓴다(ar·ur).
 */

/* ── 페이지 틀 ─────────────────────────────────── */
.ai-build {
	display: grid;
	gap: clamp(2.25rem, 5vw, 3.25rem);
}
.ai-build .ai-build-hero {
	gap: 0.8rem;
	margin: 0;
}
.ai-build .ai-build-hero p {
	margin: 0;
}
.ai-build-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1.2rem;
}
.ai-build-back {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--wa-color-text-quiet);
	font-size: 0.9rem;
	font-weight: var(--wa-font-weight-semibold);
	text-decoration: none;
}
.ai-build-back:hover {
	color: var(--wa-color-brand-on-quiet);
}

.ai-build-block {
	display: grid;
	gap: 1rem;
	min-inline-size: 0;
}
.ai-build-block h2 {
	margin: 0;
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	line-height: 1.3;
}
.ai-build-desc {
	margin: 0;
	color: var(--wa-color-text-quiet);
	line-height: 1.7;
}

/* ── 실습 — 왼쪽 입력, 오른쪽 계산 ──────────────── */
.ai-build-lab {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 1rem;
	align-items: start;
}
.ai-build-input {
	display: grid;
	gap: 0.8rem;
	padding: 1.1rem;
}
.ai-build-input label {
	display: grid;
	gap: 0.3rem;
	font-weight: var(--wa-font-weight-semibold);
}
.ai-build-input :is(textarea, input[type='text'], select) {
	inline-size: 100%;
	box-sizing: border-box;
	font: inherit;
	line-height: 1.55;
}
.ai-build-input textarea {
	resize: vertical;
}
.ai-build-input > button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
}

/* 고르는 방법 · 온도 */
.ai-build-controls {
	display: grid;
	gap: var(--wa-space-s);
}
.ai-build-controls label {
	gap: var(--wa-space-2xs);
}
/* .pes-control 의 background 줄임 속성이 Web Awesome 의 select 꺾쇠(--icon-caret)를 지우므로 되살린다.
   background-position 에는 논리 값이 없어 오른쪽→왼쪽 언어에서 따로 옮긴다. */
.ai-build-controls select {
	padding-inline-end: calc(var(--wa-form-control-padding-inline, 0.85rem) + 1rem + var(--wa-space-xs, 0.5rem));
	background-image: var(--icon-caret), var(--icon-caret);
	background-repeat: no-repeat;
	background-position: center right var(--wa-form-control-padding-inline, 0.85rem);
	background-size: 1rem 1rem;
	background-blend-mode: hue, difference;
}
[dir='rtl'] .ai-build-controls select {
	background-position: center left var(--wa-form-control-padding-inline, 0.85rem);
}
.ai-build-controls output {
	color: var(--wa-color-brand-on-quiet);
	font-variant-numeric: tabular-nums;
}
.ai-build-controls input[type='range'] {
	inline-size: 100%;
}
.ai-build-controls input[type='range']:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}
.ai-build-controls p {
	margin: 0;
	color: var(--wa-color-text-quiet);
	font-size: 0.88rem;
	font-weight: normal;
	line-height: 1.6;
}

.ai-build-generated {
	display: grid;
	gap: 0.25rem;
	padding: 0.8rem 0.9rem;
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-brand-fill-quiet);
}
.ai-build-generated span {
	color: var(--wa-color-text-quiet);
	font-size: 0.8rem;
}
.ai-build-generated strong {
	overflow-wrap: anywhere;
}

.ai-build-output {
	display: grid;
	gap: 1rem;
	min-inline-size: 0;
}

/* ── 확률 공식: [앞 단어 → 다음 단어]  이어진 횟수 / 전체 횟수 = 확률 ── */
.ai-build-formula {
	display: grid;
	gap: 0.7rem;
	margin: 0;
	padding: 1rem;
	border: 1px solid var(--wa-color-brand-border-normal);
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-brand-fill-quiet);
}
.ai-build-formula figcaption {
	color: var(--wa-color-brand-on-quiet);
	font-size: 0.85rem;
	font-weight: var(--wa-font-weight-bold);
}
.ai-build-formula-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 0.9rem;
}
.ai-build-formula .pair {
	display: inline-flex;
	align-items: flex-end;
	gap: 0.4rem;
}
.ai-build-formula .term {
	display: grid;
	justify-items: center;
	gap: 0.2rem;
}
.ai-build-formula :is(.term, .fraction, .result) small {
	color: var(--wa-color-text-quiet);
	font-size: 0.72rem;
	line-height: 1.3;
	text-align: center;
}
.ai-build-formula .word {
	padding: 0.25rem 0.7rem;
	border: 1px solid var(--wa-color-brand-border-normal);
	border-radius: 999px;
	background: var(--wa-color-surface-default);
	font-size: 0.95rem;
}
.ai-build-formula .word.strong {
	border-color: var(--wa-color-brand-fill-loud);
	background: var(--wa-color-brand-fill-loud);
	color: var(--wa-color-brand-on-loud);
}
.ai-build-formula .arrow {
	inline-size: 1.2rem;
	block-size: 0.7rem;
	margin-block-end: 0.55rem;
	background: var(--wa-color-text-quiet);
	mask: var(--dg-arrow) center / contain no-repeat;
}
[dir='rtl'] .ai-build-formula .arrow {
	transform: scaleX(-1);
}
.ai-build-formula .fraction {
	display: inline-grid;
	justify-items: center;
	padding-inline: 0.4rem;
}
.ai-build-formula :is(.num, .den) {
	display: grid;
	justify-items: center;
}
.ai-build-formula .num {
	padding-block-end: 0.2rem;
	border-block-end: 2px solid var(--wa-color-text-normal);
}
.ai-build-formula .den {
	padding-block-start: 0.2rem;
}
.ai-build-formula :is(.fraction, .result) strong {
	font-size: 1.35rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}
.ai-build-formula .eq {
	color: var(--wa-color-text-quiet);
	font-size: 1.4rem;
	font-weight: var(--wa-font-weight-bold);
}
.ai-build-formula .result {
	display: grid;
	justify-items: center;
}
.ai-build-formula .result strong {
	color: var(--wa-color-brand-on-quiet);
	font-size: 1.8rem;
}
.ai-build-formula .empty {
	margin: 0;
	color: var(--wa-color-text-quiet);
}

.ai-build-learned {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	color: var(--wa-color-text-quiet);
	font-size: 0.85rem;
}

/* ── 이어짐 횟수 표(히트맵) — 칸이 진할수록 그 줄에서 많이 이어졌다 ── */
.ai-build-matrix-wrap {
	max-inline-size: 100%;
	overflow-x: auto;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-surface-default);
}
.ai-build-matrix-wrap:focus-visible {
	outline: 2px solid var(--wa-color-brand-fill-loud);
	outline-offset: 2px;
}
.ai-build-matrix {
	border-collapse: collapse;
	font-size: 0.85rem;
}
.ai-build-matrix caption {
	padding: 0.7rem 0.9rem 0.4rem;
	color: var(--wa-color-text-quiet);
	font-size: 0.85rem;
	font-weight: var(--wa-font-weight-semibold);
	text-align: start;
}
.ai-build-matrix :is(th, td) {
	padding: 0.45rem 0.7rem;
	border: 1px solid var(--wa-color-surface-border);
	white-space: nowrap;
	text-align: center;
}
.ai-build-matrix thead th {
	background: var(--wa-color-surface-lowered);
	color: var(--wa-color-text-quiet);
	font-size: 0.78rem;
}
.ai-build-matrix thead th.end {
	font-style: italic;
}
.ai-build-matrix .corner {
	display: grid;
	line-height: 1.25;
	text-align: start;
}
.ai-build-matrix .corner span:last-child {
	text-align: end;
}
.ai-build-matrix tbody th {
	font-weight: var(--wa-font-weight-semibold);
	text-align: start;
}
.ai-build-matrix tr.focus th {
	color: var(--wa-color-brand-on-quiet);
	box-shadow: inset 3px 0 0 var(--wa-color-brand-fill-loud);
}
[dir='rtl'] .ai-build-matrix tr.focus th {
	box-shadow: inset -3px 0 0 var(--wa-color-brand-fill-loud);
}
.ai-build-matrix td {
	background: color-mix(in srgb, var(--wa-color-brand-fill-loud) calc(var(--heat, 0) * 70%), var(--wa-color-surface-default));
	font-variant-numeric: tabular-nums;
	font-weight: var(--wa-font-weight-semibold);
}
.ai-build-matrix td.zero {
	color: var(--wa-color-text-quiet);
	font-weight: normal;
	opacity: 0.45;
}
.ai-build-fine {
	margin: 0;
	color: var(--wa-color-text-quiet);
	font-size: 0.82rem;
}

@media (max-width: 900px) {
	.ai-build-lab {
		grid-template-columns: minmax(0, 1fr);
	}
}