/**
 * Astra Child — 툴 페이지 Astra 호환 레이어
 *
 * 목적: tools/pages/assets/styles.css 의 독자 스타일을
 *       Astra 테마 스타일과 자연스럽게 맞추기.
 *
 * 전략:
 *   1) CSS 변수를 Astra 시맨틱 값으로 재정의
 *   2) 버튼 · 인풋 · 폰트 크기를 Astra 기본값에 맞춤
 *   3) 툴 래퍼가 Astra 컨테이너 너비를 따르도록 조정
 */

/* ── 1. CSS 변수 재정의 ──────────────────────────────────
   Astra 의 body 배경/텍스트 컬러를 변수로 덮어씌움.
   --ast-global-color-* 가 없으면 Astra 기본값으로 fallback. */
:root {
	/* 배경 · 서피스 — Astra 기본은 흰색 계열 */
	--bg:             #f5f5f5;
	--panel-bg:       #ffffff;
	--surface:        #ffffff;
	--surface-strong: #f5f5f5;

	/* 테두리 — Astra 기본 input border 와 동일한 톤 */
	--border:         #e0e0e0;

	/* 텍스트 — Astra body text 와 동일 */
	--text:           #3a3a3a;
	--muted:          #6b6b6b;

	/* 액센트: 사이트 브랜드 컬러 유지 (#FF0000) */
	--accent:         #FF0000;
	--accent-weak:    #FFE5E5;

	/* 뱃지 라운드: Astra 버튼과 통일 */
	--badge-radius:   4px;
}

/* ── 2. 폰트 크기 정규화 ─────────────────────────────────
   Astra 기본 body font-size: 15px (= 0.9375rem)
   tools는 1rem 기준이므로 큰 편차 없음. 제목만 축소. */

.page-header h1 {
	font-size: clamp(1.4rem, 2vw + 0.6rem, 1.8rem);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.section h2 {
	font-size: 1.05rem;
	font-weight: 600;
}

.card h3 {
	font-size: 0.95rem;
	font-weight: 600;
}

/* ── 3. 버튼 — Astra 기본 버튼 스타일과 맞춤 ────────────
   Astra: padding 10px 15px, border-radius 2px (기본)
   단, 사이트에서 커스터마이저로 바꿔두었을 수 있으므로
   inherit 계열 사용 불가 → 합리적 중간값 사용. */

button,
.btn,
[type="button"],
[type="submit"],
[type="reset"] {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.5;
	border-radius: 4px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
	white-space: nowrap;
}

/* Primary (accent) 버튼 */
button.primary,
button[data-primary],
.control-panel button,
.combo-button {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
}

button.primary:hover,
.control-panel button:hover,
.combo-button:hover {
	background: #cc0000;
	border-color: #cc0000;
}

/* Secondary / outline 버튼 */
button.secondary,
button.outline,
.filter-btn {
	background: #fff;
	color: var(--text);
	border-color: var(--border);
}

button.secondary:hover,
.filter-btn:hover {
	background: var(--surface-strong);
	border-color: #bdbdbd;
}

/* ── 4. 인풋 · 셀렉트 — Astra 폼 스타일과 맞춤 ─────────
   Astra: border 1px solid #d5d5d5, border-radius 0,
           padding 10px 15px, focus: accent 컬러 아웃라인 */

input[type="text"],
input[type="search"],
input[type="number"],
select,
textarea,
[list] {
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	line-height: 1.5;
	border: 1px solid #d5d5d5;
	border-radius: 4px;
	background: #fff;
	color: var(--text);
	transition: border-color 0.15s, box-shadow 0.15s;
	width: 100%;
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus,
[list]:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.15);
}

/* ── 5. 카드 · 섹션 — border-radius Astra 스타일에 근접 */

.card,
.section,
.result-card,
.pokemon-card,
.move-card {
	border-radius: 6px;
	border: 1px solid var(--border);
	background: var(--surface);
}

/* ── 6. 뱃지 타입 컬러 — 폰트 크기 통일 */

.badge-type {
	font-size: 0.7rem;
	padding: 0.15rem 0.6rem;
	border-radius: 4px;
}

/* ── 7. 툴 래퍼 — Astra 컨테이너 너비 안에서 동작 */

.page-wrapper {
	max-width: 100%;
	padding: 1.5rem 0;
	gap: 1.25rem;
}

/* Astra 의 .ast-container 가 이미 가로 패딩 처리함 */
@media (max-width: 768px) {
	.page-wrapper {
		padding: 1rem 0;
	}
}

/* ── 8. 링크 색상 — Astra 기본 링크와 동일하게 */

a {
	color: var(--accent);
}

a:hover {
	color: #cc0000;
}

/* ── 9. 스크롤바 (옵션) — 깔끔한 thin 스크롤바 */

::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
::-webkit-scrollbar-track {
	background: var(--surface-strong);
}
::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--muted);
}