/**
 * common.css — 13.Seohyeon 공통 기반 스타일
 * 위치: /var/www/test_seohyeon/public/assets/css/common.css
 * 역할: CSS 변수 기본값 + reset + body + 스크롤바 + 공통 유틸
 * 주의: 색상 변수(--dark, --blade 등)는 theme.css의 [data-theme] 선택자가 덮어씀
 * 수정이력:
 *   2026-03-08 최초 작성 (WBS 1-03 리팩토링)
 *   2026-03-12 v5.0 — body background: --bg → --page-grad (그라데이션 배경 적용)
 */

/* ══════════════════════════════════════════════
   CSS 변수 — 기본값 (Light Ice 기준)
   실제 적용값은 theme.css의 [data-theme] 선택자가 결정
══════════════════════════════════════════════ */
:root {
	/* 레이아웃 */
	--header-h: 58px;

	/* 테마 무관 공통 */
	--border:	#E2E8F0;
	--muted:	#64748B;
	--light:	#94A3B8;
	--green:	#10B981;
	--amber:	#F59E0B;
	--red:		#EF4444;
	--purple:	#8B5CF6;

	/* 기본 색상 (Light Ice 기준 — theme.css가 덮어씀) */
	--bg:		#F4F6F9;
	--surface:	#FFFFFF;
	--blade:	#0A84C8;
	--bladeL:	#EBF5FB;
	--dark:		#0D1B2A;
	--steel:	#1E3A5F;
	--text:		#1A2B3C;
}

/* ══════════════════════════════════════════════
   Reset
══════════════════════════════════════════════ */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}


/* ══════════════════════════════════════════════
   CUSTOM FONTS
══════════════════════════════════════════════ */
@font-face {
	font-family: 'InfinitySans';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/InfinitySans-RegularA1.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'EliceBaeum';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/EliceDigitalBaeum_Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'EliceBaeum';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/EliceDigitalBaeum_Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ══════════════════════════════════════════════
   Body
══════════════════════════════════════════════ */
body {
	font-family: 'InfinitySans', 'EliceBaeum', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
	background: var(--page-grad, var(--bg)); /* --page-grad: theme.css에서 정의, 없으면 --bg 폴백 */
	color: var(--text);
	font-size: 14px;
	line-height: 1.6;
	min-height: 100vh;
	min-width: 320px; /* 최소 너비 — 헤더/탭바 깨짐 방지 */
	width: 100%;      /* flex 자식들이 올바르게 stretch되도록 */
	display: flex;
	flex-direction: column;
	-webkit-overflow-scrolling: touch;
	transition: background .35s ease, color .35s ease;
}

a { text-decoration: none; color: inherit; }

/* ══════════════════════════════════════════════
   스크롤바 커스텀
══════════════════════════════════════════════ */
/* ── 기본 스크롤바 형태 ─────────────────────── */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: rgba(14,165,233,.28); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(14,165,233,.70); }
* { scrollbar-width: thin; scrollbar-color: rgba(14,165,233,.28) transparent; }

/* ── Light Ice 스크롤바 ──────────────────────── */
[data-theme="light"] ::-webkit-scrollbar-track { background: rgba(224,242,254,.50); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(14,165,233,.30); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(14,165,233,.72); }
[data-theme="light"] * { scrollbar-color: rgba(14,165,233,.30) rgba(224,242,254,.50); }

/* ── Deep Ice 스크롤바 ───────────────────────── */
[data-theme="dark"] ::-webkit-scrollbar-track { background: rgba(10,22,40,.60); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(56,189,248,.35); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(56,189,248,.80); }
[data-theme="dark"] * { scrollbar-color: rgba(56,189,248,.35) rgba(10,22,40,.60); }

/* ══════════════════════════════════════════════
   페이지 본문 공통 래퍼
══════════════════════════════════════════════ */
.page-body {
	padding: 28px 24px;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	flex: 1;
	box-sizing: border-box;
}

/* ══════════════════════════════════════════════
   iOS safe-area 대응
══════════════════════════════════════════════ */
.bottom-fixed {
	padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* 라이트 모드 */
::placeholder {
    color: rgba(100, 120, 140, 0.45);
    opacity: 1; /* Firefox 기본값 덮어쓰기 */
}

/* 다크 모드 */
[data-theme="dark"] ::placeholder {
    color: rgba(180, 200, 220, 0.35);
    opacity: 1;
}