@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap");
:root {
	font:
		14px/1.6 "Noto Sans KR",
		system-ui,
		sans-serif;
	color: #e6e8ef;
	background: #101116;
	color-scheme: dark;
}
* {
	box-sizing: border-box;
}
[hidden] {
	display: none !important;
}
body {
	margin: 0;
	padding: 24px;
}
main {
	max-width: 540px;
	margin: 40px auto;
	padding: 24px;
	background: #1b1d26;
	border: 1px solid #303440;
	border-radius: 12px;
}
h1,
h2 {
	letter-spacing: -0.5px;
}
h1 {
	font-size: 26px;
}
h2 {
	font-size: 20px;
	margin-top: 0;
}
h3 {
	font-size: 14px;
}
p,
small {
	color: #a4aabb;
}
label {
	display: block;
	color: #b8bece;
	margin-top: 16px;
	font-size: 13px;
}
input,
textarea,
select {
	font: inherit;
	color: inherit;
	width: 100%;
	background: #13151e;
	border: 1px solid #454e64;
	border-radius: 7px;
	padding: 10px;
	margin: 6px 0 16px;
}
input[type="checkbox"] {
	width: auto;
	margin: 0 10px 0 0;
}
button,
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font: inherit;
	font-size: 13px;
	color: #f2f3f5;
	border: 1px solid #454e72;
	border-radius: 7px;
	padding: 9px 14px;
	background: #303a60;
	cursor: pointer;
	text-decoration: none;
}
button:hover:enabled,
.button:hover {
	background: #465686;
}
button:disabled,
fieldset:disabled {
	opacity: 0.6;
	cursor: default;
}
fieldset {
	padding: 0;
	margin: 0;
	border: 0;
	min-width: 0;
}
:focus-visible {
	outline: 2px solid #93c5fd;
	outline-offset: 3px;
}
a {
	color: #b6c3ff;
}
pre {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font-size: 12px;
}
.actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
.danger {
	background: #36242d;
	border-color: #69434f;
	color: #f3b5c1;
}
#status {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	max-width: calc(100% - 32px);
	margin: 0;
	padding: 12px 18px;
	background: #282d3b;
	border: 1px solid #454e72;
	border-radius: 9px;
	box-shadow: 0 8px 24px #0005;
	z-index: 20;
}

.admin-page {
	padding: 0;
}
.admin-page main {
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}
.admin-shell {
	display: grid;
	grid-template-columns: 224px minmax(0, 1fr);
	min-height: 100vh;
}
.sidebar {
	position: sticky;
	top: 0;
	height: 100vh;
	background: #181a22;
	border-right: 1px solid #303440;
	padding: 28px 18px;
	display: flex;
	flex-direction: column;
}
.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	color: inherit;
	font-size: 20px;
	font-weight: 700;
	text-decoration: none;
}
.brand small {
	display: block;
	font-size: 11px;
	font-weight: 400;
}
.brand-mark {
	width: 38px;
	height: 38px;
	object-fit: contain;
	flex-shrink: 0;
}
.sidebar nav {
	display: grid;
	gap: 6px;
	margin-top: 32px;
}
.sidebar nav a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: 8px;
	color: #b0b5c7;
	text-decoration: none;
}
.sidebar nav a:hover,
.sidebar nav [aria-current] {
	background: #2a2e41;
	color: #fff;
}
.sidebar-note {
	margin-top: auto;
	font-size: 12px;
}
.workspace {
	padding: 0 32px 40px;
	max-width: 1440px;
	min-width: 0;
}
.workspace header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 26px 0;
	margin-bottom: 28px;
	border-bottom: 1px solid #303440;
}
.workspace header h1 {
	margin: 0;
}
.card {
	padding: 24px;
	border: 1px solid #303440;
	border-radius: 12px;
	background: #1b1d26;
	margin: 20px 0;
	overflow-wrap: anywhere;
}
.page-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}
.page-title h2 {
	margin: 0;
}
.metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}
.metrics a {
	color: #a4aabb;
	text-decoration: none;
}
.metrics strong {
	display: block;
	color: #f1f3f9;
	font-size: 28px;
	margin-top: 12px;
}
.record-list {
	list-style: none;
	padding: 6px 24px;
}
.record-list li {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 0;
	border-bottom: 1px solid #303440;
}
.record-list li:last-child {
	border-bottom: 0;
}
.record-list a {
	text-decoration: none;
	color: #e6e8ef;
}
.record-list span {
	font-size: 12px;
	color: #a4aabb;
}
/* 사이트 이름·상태는 왼쪽에 묶고 이동 버튼은 좁은 화면에서 다음 줄로 내린다. */
#site-list li {
	align-items: center;
	flex-wrap: wrap;
}
.site-record-info {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	min-width: 0;
	flex: 1 1 180px;
}
#site-list .site-record-name {
	min-width: 0;
	color: #93c5fd;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
	overflow-wrap: anywhere;
}
#site-list .site-record-name:hover {
	color: #bfdbfe;
}
#site-list .site-record-status {
	flex-shrink: 0;
	padding: 2px 8px;
	border-radius: 6px;
	background: #26313d;
}
#site-list .site-record-status.is-active {
	color: #86efac;
	background: #173629;
}
.site-record-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.login-shell {
	max-width: 430px;
	padding: 32px;
	margin: 12vh auto;
	background: #1b1d26;
	border: 1px solid #303440;
	border-radius: 16px;
}
.login-shell button {
	width: 100%;
	background: #5865f2;
}
.login-shell > p {
	font-size: 12px;
}
.primary {
	background: #5865f2;
}
@media (max-width: 650px) {
	.admin-shell {
		display: block;
	}
	.sidebar {
		position: relative;
		height: auto;
		border-bottom: 1px solid #303440;
		padding: 16px;
	}
	.sidebar nav {
		display: flex;
		flex-wrap: wrap;
		margin: 16px 0 0;
		gap: 4px;
	}
	.sidebar nav a {
		padding: 8px;
		font-size: 12px;
		gap: 5px;
	}
	.sidebar-note {
		display: none;
	}
	.workspace {
		padding: 0 16px 24px;
	}
	.workspace header {
		align-items: flex-start;
	}
	.workspace h1 {
		font-size: 22px;
	}
	.workspace header .actions {
		justify-content: flex-end;
	}
	.metrics {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.card {
		padding: 18px;
	}
	.login-shell {
		margin: 8vh 16px;
	}
	.page-title {
		flex-wrap: wrap;
	}
}
/* 관리 화면은 탐색·요약·데이터·예제를 같은 간격과 표면으로 구분한다. */
.admin-page { background:#0d1117; color:#e6edf3; }
.sidebar { background:#10161e; border-color:#26313d; }
.sidebar nav a { padding:10px 12px; font-size:13px; }
.sidebar nav [aria-current] { background:#1b3049; color:#a7d2ff; border-left:2px solid #70b4ff; }
.workspace { padding:0 36px 40px; }
.workspace header { margin-bottom:24px; padding:24px 0; border-color:#26313d; }
.workspace h1 { font-size:23px; letter-spacing:-.5px; }
.card { background:#131b25; border-color:#26313d; border-radius:12px; box-shadow:0 2px 8px #0002; }
.card h2 { font-size:17px; margin-top:0; }
.card p,.page-intro { color:#99aabd; font-size:13px; line-height:1.8; }
.metrics .card { margin:0; padding:22px; }
.metrics strong { font-size:24px; margin:12px 0; }
.metrics small { font-size:12px; color:#8194a8; }
button,.button { background:#1c2a3a; border-color:#34465c; }
button:hover:enabled,.button:hover { background:#293e55; }
.primary,form button[type=submit] { background:#2763ac; }
input,textarea,select { background:#0d141d; border-color:#34465c; border-radius:7px; }
.filters { display:grid; grid-template-columns:1fr 130px 1.5fr auto; gap:14px; align-items:end; margin:22px 0; }
.filters input,.filters select { margin-bottom:0; }
.table-scroll { overflow-x:auto; }
.member-table { width:100%; border-collapse:collapse; text-align:left; font-size:13px; }
.member-table th { color:#899db3; font-weight:500; background:#101721; }
.member-table td,.member-table th { padding:16px 12px; border-bottom:1px solid #26313d; white-space:nowrap; }
.member-table small { display:block; font-size:11px; color:#8298af; margin-top:5px; }
.member-table td:first-child { white-space:normal; overflow-wrap:anywhere; min-width:180px; }
/* 프로필과 이름을 묶고 관리 동작은 줄바꿈해 좁은 카드 안에도 표시한다. */
.member-person {display:flex;align-items:center;gap:12px;}
.member-person > div {min-width:0;}
.member-avatar {position:relative;display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:50%;overflow:hidden;background:#263b52;color:#c9e4ff;}
.member-avatar img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.member-actions {display:flex;gap:8px;flex-wrap:wrap;max-width:240px;}
.member-actions button {padding:8px 10px;font-size:12px;}
#member-dialog {width:min(480px,calc(100vw - 32px));box-sizing:border-box;padding:24px;background:#131b25;color:#e6e8ef;border:1px solid #34465c;border-radius:12px;}
#member-dialog::backdrop {background:#0009;}
#member-dialog .actions {justify-content:flex-end;}
#member-dialog-save.danger {background:#36242d;border-color:#69434f;color:#f3b5c1;}
#member-dialog-save.danger:hover:enabled {background:#52303b;}
.pagination { display:flex; justify-content:flex-end; align-items:center; gap:14px; margin-top:20px; font-size:12px; }
.steps { display:flex; flex-wrap:wrap; gap:24px; padding-left:22px; color:#c9d7e7; font-size:13px; margin:24px 0; }
.sample-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-top:24px; }
.sample-tabs [aria-selected=true] { background:#234769; border-color:#6cabed; color:#e8f4ff; }
.code-block { background:#0b1119; border:1px solid #26313d; padding:20px; border-radius:8px; min-height:160px; line-height:1.8; font-family:Consolas,monospace; white-space:pre; overflow:auto; overflow-wrap:normal; }
.hint { font-size:12px; }
details { margin:22px 0; padding:14px 0; border-top:1px solid #26313d; }
summary { cursor:pointer; font-size:13px; color:#b5c6d8; }
@media(max-width:800px) { .filters { grid-template-columns:1fr 1fr; } }
@media(max-width:650px) { .workspace {padding:0 16px 24px;} .metrics {gap:12px;} .filters {grid-template-columns:1fr;} .sidebar nav {gap:3px;} .sidebar nav a {padding:8px;font-size:12px;} .code-block {padding:14px;} .steps {display:grid;gap:12px;} }

/* 좁은 화면은 회원 행을 카드로 표시해 가로 스크롤 없이 관리 버튼을 사용할 수 있게 한다. */
@media(max-width:650px) {
 .member-table,.member-table tbody {display:block;width:100%;}
 .member-table thead {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
 .member-table tr {display:block;border:1px solid #26313d;border-radius:8px;background:#101721;margin:12px 0;padding:8px;}
 .member-table td {display:flex;justify-content:space-between;align-items:center;gap:12px;white-space:normal;padding:10px 8px;border:0;}
 .member-table td:first-child {display:block;min-width:0;font-weight:600;}
 .member-table td:not(:first-child)::before {content:attr(data-label);color:#899db3;font-size:12px;flex-shrink:0;}
 .member-table td:last-child {border-top:1px solid #26313d;margin-top:8px;}
}


#status {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: #382f23;
	color: #fff0d2;
	border: 1px solid #b89a62;
	border-left: 3px solid #e2bd77;
	font-size: 12px;
	line-height: 1.6;
	width: max-content;
	max-width: min(440px, calc(100% - 32px));
	padding: 10px 12px;
	overflow-wrap: anywhere;
}
#status.success {
	background: #203a35;
	border-color: #478f79;
	color: #d5fff0;
}
/* 아이콘과 본문의 너비는 공통 Toast 컴포넌트에서 각각 정한다. */
#status button {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 20px;
}
.evidence {
	padding: 12px;
	background: #13151e;
	border-radius: 8px;
	margin: 12px 0;
}
#chat-detail button {
	margin: 4px;
}
#chat-content .record-list,
#channel-content .record-list {
	padding: 0;
}
#chat-content .record-list li,
#channel-content .record-list li {
	flex-wrap: wrap;
	align-items: center;
}
#chat-content .record-list span,
#channel-content .record-list span {
	flex: 1;
	color: inherit;
	font-size: 13px;
}

#status {
	position: fixed;
	bottom: 20px;
	left: 16px;
	right: 16px;
	transform: none;
	max-width: none;
	width: auto;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	display: block;
	pointer-events: none;
	z-index: 100;
}