/* ══════════════════════════════════════════════════════════════════════════
   controls.css — 셸이 갖는 **단추 한 벌.**

   왜 페이지 CSS 가 아니라 셸인가: 단추는 표지·목록·상세·서랍 네 곳에 전부 나온다.
   페이지마다 `.btn` 을 다시 쓰면 네 벌이 되고, 그 넷은 반드시 갈린다(높이 2px, 모서리
   1px 씩 다른 단추가 한 화면에 섞이는 것이 이렇게 생긴다).

   여기 있는 것은 «생김새» 뿐이다. 무엇을 하는 단추인지는 각 화면이 안다.
   ══════════════════════════════════════════════════════════════════════════ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	height: var(--control-h);     /* 단추·입력칸이 같은 높이 — 토큰 주석 참조 */
	/* 최소 폭. 짧은 글자(「저장」·「확인」)에서도 단추가 «누를 것» 으로 보이려면 글자보다
	   넓은 판이 필요하다 — 글자에 딱 맞는 단추는 라벨처럼 읽힌다.
	   최댓값이 아니라 **최솟값**이라, 긴 글자는 그대로 늘어난다. */
	min-width: 7.5rem;
	padding: 0 1rem;
	border: 1px solid var(--line-strong);
	/* **모서리를 굴리지 않는다.** 둥근 단추는 소비자 앱의 문법이고, 이 화면은 터미널
	   패널과 활자로 서 있다 — 그 사이에 둥근 알약이 끼면 그것만 다른 제품처럼 보인다. */
	border-radius: 0;
	background: transparent;
	font: inherit;
	font-size: var(--t-base);
	font-weight: 500;
	line-height: 1;
	color: var(--fg);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background var(--dur) var(--ease),
		border-color var(--dur) var(--ease),
		color var(--dur) var(--ease);
}

@media (hover: hover) {
	.btn:hover {
		background: var(--accent-soft);
		border-color: var(--accent);
		color: var(--fg);
		text-decoration: none;
	}
}

/* 주 동작은 **한 화면에 하나**다. 둘이면 어느 것이 주인지 알 수 없어 둘 다 부차가 된다. */
.btn.is-primary {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
}

@media (hover: hover) {
	.btn.is-primary:hover {
		background: var(--accent-hover);
		border-color: var(--accent-hover);
		color: var(--on-accent);
	}
}

.btn:disabled,
.btn[aria-disabled='true'] {
	opacity: 0.5;
	cursor: not-allowed;
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* 작은 단추 — 도구 줄(보기 방식·걸러내기·삭제)에 쓴다. 본문 단추와 **같은 모양**이고
   크기만 한 단계 작다: 다른 모양으로 만들면 화면에 단추가 두 종류 생긴다. */
.btn.is-small {
	height: var(--control-h-sm);
	min-width: 0;
	padding: 0 0.6rem;
	font-size: var(--t-sm);
}

/* 선택된 상태(보기 방식 등). 색만으로 알리지 않는다 — 마크업이 `aria-pressed` 를 함께 쓴다. */
.btn[aria-pressed='true'] {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
}

/* 지우는 동작. 평소에는 조용하고, 손이 닿을 때만 위험색이 된다 — 늘 빨간 단추는 화면에서
   가장 강한 것이 되어 «지우기» 를 권하는 꼴이 된다. */
.btn.is-danger {
	color: var(--fg-3);
}
.btn.is-danger:focus-visible {
	background: transparent;
	border-color: var(--bad);
	color: var(--bad);
}

/* 초점은 **가드 밖**이다 — 키보드는 기기와 무관하다. */

@media (hover: hover) {
	.btn.is-danger:hover {
		background: transparent;
		border-color: var(--bad);
		color: var(--bad);
	}
}