/* TalkTalk 예제 모음 - 독립 스타일 */

/* CSS Variables for Design System */
:root {
	/* Colors */
	--background: 0 0% 100%;
	--foreground: 222.2 84% 4.9%;
	--card: 0 0% 100%;
	--card-foreground: 222.2 84% 4.9%;
	--popover: 0 0% 100%;
	--popover-foreground: 222.2 84% 4.9%;
	--primary: 221.2 83.2% 53.3%;
	--primary-foreground: 210 40% 98%;
	--secondary: 210 40% 96%;
	--secondary-foreground: 222.2 84% 4.9%;
	--muted: 210 40% 96%;
	--muted-foreground: 215.4 16.3% 46.9%;
	--accent: 210 40% 96%;
	--accent-foreground: 222.2 84% 4.9%;
	--destructive: 0 84.2% 60.2%;
	--destructive-foreground: 210 40% 98%;
	--border: 214.3 31.8% 91.4%;
	--input: 214.3 31.8% 91.4%;
	--ring: 221.2 83.2% 53.3%;
	--radius: 0.5rem;
}

/* Dark mode */
.dark {
	--background: 222.2 84% 4.9%;
	--foreground: 210 40% 98%;
	--card: 222.2 84% 4.9%;
	--card-foreground: 210 40% 98%;
	--popover: 222.2 84% 4.9%;
	--popover-foreground: 210 40% 98%;
	--primary: 217.2 91.2% 59.8%;
	--primary-foreground: 222.2 84% 4.9%;
	--secondary: 217.2 32.6% 17.5%;
	--secondary-foreground: 210 40% 98%;
	--muted: 217.2 32.6% 17.5%;
	--muted-foreground: 215 20.2% 65.1%;
	--accent: 217.2 32.6% 17.5%;
	--accent-foreground: 210 40% 98%;
	--destructive: 0 62.8% 30.6%;
	--destructive-foreground: 210 40% 98%;
	--border: 217.2 32.6% 17.5%;
	--input: 217.2 32.6% 17.5%;
	--ring: 224.3 76.3% 94.1%;
}

/* Reset */
* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Base */
body {
	background-color: hsl(var(--background));
	color: hsl(var(--foreground));
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-feature-settings: "rlig" 1, "calt" 1;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Layout */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1rem;
}

.page-container {
	min-height: 100vh;
	background: linear-gradient(135deg, hsl(var(--primary) / 0.1), hsl(var(--secondary) / 0.1));
	padding: 2rem 0;
}

.example-buttons {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
}

.btn {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	border-radius: 0.375rem;
	text-decoration: none;
	text-align: center;
	transition: background-color 0.3s, color 0.3s;
}

.btn-primary {
	background-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
}