/* assets/css/night-base.css */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

:root {
	--bg-color: #121212;
	--card-bg-color: #1e1e1e;
	--card-bg-color-alt: #242427; /* Alt background */
	--primary-text-color: #e8e8e8;
	--secondary-text-color: #b0b0b0;
	--accent-color: #f0f; /* Neon Pink */
	--accent-color-hover: #ff40ff;
	--highlight-color: #0ff; /* Neon Cyan */
	--highlight-color-hover: #7fffff;
	--neon-green: #39FF14; /* Added Neon Green for App Buttons */
	--border-color: #404040;
	--header-bg-start: #101010;
	--header-bg-end: #1d1d1d;
	--nav-bg: #1a1a1a;
	--placeholder-bg: rgba(255, 255, 255, 0.07);
	--shadow-color: rgba(255, 0, 255, 0.5);
	--shadow-color-blue: rgba(0, 255, 255, 0.4);
	--wechat-green: #07C160;
	--menu-width: 260px;

	/* === Font Size Variables === */
	--font-size-base: 1rem;       /* Base size (equivalent to 16px if html font-size is 100%) */
	--font-size-sm: 0.875rem;     /* Small */
	--font-size-xs: 0.75rem;      /* Extra Small */
	--font-size-lg: 1.125rem;     /* Large */
	--font-size-xl: 1.25rem;      /* Extra Large */
	--font-size-h1: 2.5rem;       /* Heading 1 */
	--font-size-h2: 2rem;         /* Heading 2 */
	--font-size-h3: 1.5rem;       /* Heading 3 */
	--font-size-h4: 1.2rem;       /* Heading 4 (e.g., card titles) */
}

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

html {
	scroll-behavior: smooth;
	font-size: 100%; /* Set base font size for rem calculation (1rem = 16px by default) */
}

body {
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 400;
	font-size: var(--font-size-base); /* Use base font size variable */
	line-height: 1.65;
	background-color: var(--bg-color);
	color: var(--primary-text-color);
	overflow-x: hidden;
	transition: transform 0.3s ease;
}
body.menu-open {
	/* Optional: Prevent scrolling when menu is open */
	/* overflow: hidden; */
}


a { color: var(--accent-color); text-decoration: none; transition: color 0.3s ease, opacity 0.3s ease; }
a:hover { color: var(--accent-color-hover); opacity: 0.9; }

img { max-width: 100%; height: auto; display: block; }

.highlight { color: var(--highlight-color); font-weight: 700; font-family: 'Montserrat', sans-serif; }

p {
	font-size: var(--font-size-base); /* Standard paragraph size */
	margin-bottom: 1rem; /* Add default bottom margin to paragraphs */
}
p:last-child {
	margin-bottom: 0; /* Remove bottom margin from last paragraph in a container */
}

/* Basic heading styles (can be overridden in layout/components) */
h1 { font-size: var(--font-size-h1); margin-bottom: 1.5rem; line-height: 1.2; }
h2 { font-size: var(--font-size-h2); margin-bottom: 1.2rem; line-height: 1.3; }
h3 { font-size: var(--font-size-h3); margin-bottom: 1rem; line-height: 1.4; }
h4 { font-size: var(--font-size-h4); margin-bottom: 0.8rem; line-height: 1.4; }

ul, ol {
	margin-bottom: 1rem;
	padding-left: 1.5rem; /* Default padding for lists */
}
li {
	margin-bottom: 0.5rem;
}