@charset "utf-8";

/* ===== Layout : page shell · top app bar · drawer nav · overlays ===== */

/* 센트레빌 브랜드 톤 : 차분한 네이비 헤더 + 딥틸 포인트 + 뉴트럴 그레이 */
:root {
	--topbar-h:52px;
	--header:#272f3c;      /* 상단바·드로어 헤더 (센트레빌 시그니처 네이비) */
	--brand:#1a5a71;       /* 포인트 (아이콘·링크·버튼·표 헤더) */
	--brand-dark:#124559;  /* 포인트 hover */
	--tint:#eef2f4;        /* 아이콘 배경·hover 틴트 */
}

body { position:relative; max-width:720px; margin:0 auto; padding-top:var(--topbar-h); background:#f4f6f8; color:#1e293b; }
body .mask { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background-color:rgba(0,0,0,.6); z-index:100; }

/* 모달 래퍼 */
.mw { display:none; position:absolute; top:0; left:0; right:0; bottom:0; background-color:#fff; z-index:1000; }
.mw h1 { padding:12px; text-align:center; }

.container .page-title { text-align:center; }

/* ===== 상단 앱바 ===== */
#topbar {
	position:fixed; top:0; left:0; right:0; z-index:120;
	display:flex; align-items:center; height:var(--topbar-h);
	max-width:720px; margin:0 auto; padding:0 4px;
	background:var(--header); color:#fff;
	box-shadow:0 1px 4px rgba(0,0,0,.18);
}
#topbar .topbar-btn {
	flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
	width:44px; height:44px; border:0; background:transparent; color:#fff;
	font-size:19px; cursor:pointer; border-radius:8px; text-decoration:none;
}
#topbar .topbar-btn:hover, #topbar .topbar-btn:focus { background:rgba(255,255,255,.15); }
#topbar .topbar-title {
	flex:1 1 auto; min-width:0; margin:0; padding:0 4px;
	text-align:center; font-size:17px; font-weight:600; line-height:1.2;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#topbar .topbar-title a { display:inline-flex; align-items:center; padding:3px 9px; background:#fff; border-radius:8px; }
#topbar .topbar-title span { color:#fff; }
#topbar .topbar-logo { height:24px; width:auto; vertical-align:middle; display:block; }
#topbar .topbar-actions { flex:0 0 auto; display:flex; align-items:center; }

/* ===== 슬라이드 드로어 ===== */
.drawer {
	position:fixed; top:0; bottom:0; left:0; z-index:200;
	display:flex; flex-direction:column;
	width:82%; max-width:300px;
	background:#fff; box-shadow:2px 0 16px rgba(0,0,0,.25);
	transform:translateX(-100%); transition:transform .25s ease;
	overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.drawer.open { transform:translateX(0); }
.drawer-head {
	display:flex; align-items:center; justify-content:space-between;
	height:var(--topbar-h); padding:0 8px 0 16px; flex:0 0 auto;
	background:var(--header); color:#fff;
}
.drawer-brand { font-size:15px; font-weight:700; }
.drawer-brand i { margin-right:6px; opacity:.9; }
.drawer-close {
	display:inline-flex; align-items:center; justify-content:center;
	width:40px; height:40px; border:0; background:transparent; color:#fff;
	font-size:20px; cursor:pointer; border-radius:8px;
}
.drawer-close:hover { background:rgba(255,255,255,.15); }

.drawer-list { flex:1 1 auto; padding:8px 0; }
.drawer-list li { border:0; }
.drawer-list li.drawer-div { margin-top:8px; border-top:1px solid #edf0f3; padding-top:8px; }
.drawer-list a {
	display:flex; align-items:center; gap:14px;
	padding:14px 20px; color:#1e293b; text-decoration:none;
	font-size:15px; font-weight:500;
}
.drawer-list a:hover, .drawer-list a:focus { background:var(--tint); color:var(--brand); text-decoration:none; }
.drawer-list a i { flex:0 0 20px; text-align:center; color:#64748b; font-size:16px; }
.drawer-list a:hover i, .drawer-list a:focus i { color:var(--brand); }

.drawer-backdrop {
	display:none; position:fixed; top:0; left:0; right:0; bottom:0;
	background:rgba(0,0,0,.45); z-index:150;
}
.drawer-backdrop.open { display:block; }
body.drawer-open { overflow:hidden; }

/* ===== 푸터 ===== */
#footer { padding:18px 12px 28px; text-align:center; }
#footer .copyright { color:#94a3b8; font-size:12px; }