/* =========================================================
   ARURU Mail — Elastic 위에 얹는 Gmail 풍 테마 (라이트 / 다크)
   ========================================================= */
:root {
	--a-bg: #f6f8fc;
	--a-surface: #ffffff;
	--a-surface-2: #f2f6fc;
	--a-line: #e3e7ee;
	--a-text: #1f1f1f;
	--a-muted: #5f6368;
	--a-primary: #0b57d0;
	--a-primary-soft: #d3e3fd;
	--a-compose: #c2e7ff;
	--a-compose-text: #001d35;
	--a-hover: #e8eef7;
	--a-danger: #b3261e;
	--a-radius: 16px;
	--a-font: "Pretendard Variable", Pretendard, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
}
html.dark-mode {
	--a-bg: #111418;
	--a-surface: #1b1f24;
	--a-surface-2: #22272e;
	--a-line: #2e343c;
	--a-text: #e3e3e3;
	--a-muted: #a8b0ba;
	--a-primary: #a8c7fa;
	--a-primary-soft: #0842a0;
	--a-compose: #004a77;
	--a-compose-text: #c2e7ff;
	--a-hover: #262c34;
}

html, body, input, select, textarea, button, .form-control, .popover, .ui-dialog {
	font-family: var(--a-font) !important;
	letter-spacing: -0.01em;
}
body { background: var(--a-bg) !important; color: var(--a-text); }

/* ---------- 레이아웃: 회색 바탕 위 둥근 흰 패널 ---------- */
#layout { background: var(--a-bg); }
#layout-menu { background: var(--a-bg) !important; border: 0 !important; }
#layout-sidebar, #layout-list, #layout-content {
	background: var(--a-surface) !important;
	border: 0 !important;
}
@media (min-width: 1025px) {
	#layout { padding: 8px 12px 12px 0; gap: 8px; }
	#layout-sidebar { background: var(--a-bg) !important; }
	#layout-list { border-radius: var(--a-radius) 0 0 var(--a-radius); margin-right: 1px; overflow: hidden; }
	#layout-content { border-radius: 0 var(--a-radius) var(--a-radius) 0; overflow: hidden; }
	#layout-content.selected:only-of-type,
	.task-settings #layout-content, .task-addressbook #layout-content { border-radius: var(--a-radius); }
}
.header, .footer, #layout-sidebar > .header, #layout-list > .header, #layout-content > .header {
	background: transparent !important;
	border-bottom: 1px solid var(--a-line) !important;
	color: var(--a-text) !important;
}
#layout-sidebar > .header { border-bottom: 0 !important; }
.header-title { font-weight: 600; color: var(--a-text) !important; }

/* ---------- 왼쪽 앱 메뉴 + 작성 버튼 ---------- */
#layout-menu .popover-header, #layout-menu #logo { filter: none; }
#taskmenu a { color: var(--a-muted) !important; border-radius: 16px; }
#taskmenu a:hover { background: var(--a-hover) !important; color: var(--a-text) !important; }
#taskmenu a.selected { background: var(--a-primary-soft) !important; color: var(--a-text) !important; }
#taskmenu a.compose, #taskmenu a.compose.selected {
	background: var(--a-compose) !important;
	color: var(--a-compose-text) !important;
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 3px 1px rgba(0, 0, 0, 0.06);
	font-weight: 600;
}
#taskmenu a.compose:hover { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 4px 8px 3px rgba(0, 0, 0, 0.08); }

/* ---------- 폴더 목록: 선택된 폴더는 오른쪽이 둥근 알약 ---------- */
#folderlist-content li > a,
.listing li > a { border-radius: 0 999px 999px 0 !important; margin-right: 10px; color: var(--a-text) !important; }
#folderlist-content li > a:hover, .listing li > a:hover { background: var(--a-hover) !important; }
#folderlist-content li.selected > a,
.listing li.selected > a { background: var(--a-primary-soft) !important; font-weight: 700; }
#folderlist-content li.unread > a .unreadcount, .unreadcount {
	background: transparent !important; color: var(--a-text) !important; font-weight: 700;
}
.listing li, .listing tr { border-color: transparent !important; }

/* ---------- 메일 목록 ---------- */
table.messagelist tr { background: var(--a-surface-2); }
table.messagelist tr.unread { background: var(--a-surface); }
table.messagelist tr.unread td { font-weight: 700; color: var(--a-text); }
table.messagelist td { border-bottom: 1px solid var(--a-line) !important; }
table.messagelist tr:hover td {
	box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
	position: relative; z-index: 1;
}
table.messagelist tr.selected td, table.messagelist tr.focused td { background: #c2dbff !important; }
html.dark-mode table.messagelist tr.selected td { background: #1c3a6b !important; }
table.messagelist .subject a, table.messagelist span.subject { color: var(--a-text) !important; }
table.messagelist td .date, table.messagelist .size { color: var(--a-muted); font-size: 0.85em; }

/* ---------- 검색창: Gmail 처럼 둥근 회색 상자 ---------- */
.searchbar, #mailsearchform, .searchbar input {
	background: var(--a-surface-2) !important;
	border-radius: 999px !important;
	border: 0 !important;
}
.searchbar input:focus { background: var(--a-surface) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important; }

/* ---------- 버튼·입력 ---------- */
.btn-primary, .button.mainaction, button.mainaction, input.mainaction {
	background: var(--a-primary) !important;
	border-color: var(--a-primary) !important;
	color: #fff !important;
	border-radius: 999px !important;
	font-weight: 600;
}
html.dark-mode .btn-primary, html.dark-mode .button.mainaction, html.dark-mode button.mainaction { color: #062e6f !important; }
.btn-secondary, .button:not(.mainaction):not(.icon) { border-radius: 999px !important; }
.form-control, .custom-select, textarea, input[type=text], input[type=password], input[type=email] {
	border-radius: 8px !important;
	border-color: var(--a-line) !important;
}
.form-control:focus, input:focus, textarea:focus, select:focus {
	border-color: var(--a-primary) !important;
	box-shadow: 0 0 0 1px var(--a-primary) !important;
}
a, .link { color: var(--a-primary); }
.ui-dialog, .popover, .modal-content { border-radius: var(--a-radius) !important; border: 0 !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18) !important; }

/* =========================================================
   로그인 · 2단계 인증 화면
   ========================================================= */
body.task-login { background: var(--a-bg) !important; }
body.task-login #layout { background: transparent; padding: 0; }
.aruru-login {
	min-height: 100vh;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px 16px !important;
	background: transparent !important;
}
.aruru-card {
	width: 100%;
	max-width: 448px;
	background: var(--a-surface);
	border: 1px solid var(--a-line);
	border-radius: 28px;
	padding: 40px 40px 32px;
	box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08), 0 4px 16px rgba(60, 64, 67, 0.08);
}
.aruru-brand { display: flex; align-items: center; gap: 10px; color: var(--a-primary); }
.aruru-mark { width: 34px; height: 34px; }
.aruru-wordmark { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--a-text); }
.aruru-wordmark b { color: var(--a-primary); font-weight: 800; }
.aruru-title { margin: 28px 0 6px; font-size: 30px; font-weight: 700; color: var(--a-text); letter-spacing: -0.03em; }
.aruru-sub { margin: 0 0 24px; color: var(--a-muted); font-size: 15px; }

.aruru-card { text-align: left; }
.aruru-login #login-form { width: 100% !important; max-width: none !important; margin: 0 !important; position: static !important; }
.aruru-login #login-form table, .aruru-login #login-form tbody { display: block; width: 100% !important; }
.aruru-login #login-form tr, .aruru-login #login-form tr.row { display: block !important; width: 100%; margin: 0 0 14px !important; }
.aruru-login #login-form td { padding: 0 !important; border: 0 !important; width: 100% !important; max-width: none !important; flex: none !important; }
.aruru-login #login-form td.title { display: none !important; }
.aruru-login #login-form td.input { display: flex !important; }
.aruru-login #login-form td.input > input, .aruru-login #login-form td.input > .form-control { flex: 1 1 100% !important; width: 100% !important; min-width: 0; }
.aruru-login .input-group { flex-wrap: nowrap; }
.aruru-login #login-form p.formbuttons {
	position: static !important;
	display: flex !important;
	justify-content: flex-end;
	width: 100% !important;
	margin: 22px 0 0 !important;
}
.aruru-login #rcmloginsubmit { text-transform: none !important; letter-spacing: 0; }
.aruru-login .input-group-prepend, .aruru-login .input-group-text { display: none !important; }
.aruru-login #login-form input.form-control,
.aruru-login #login-form input[type=text],
.aruru-login #login-form input[type=password] {
	height: 56px !important;
	padding: 0 16px !important;
	font-size: 16px !important;
	border: 1px solid #747775 !important;
	border-radius: 8px !important;
	background: var(--a-surface) !important;
	color: var(--a-text) !important;
}
html.dark-mode .aruru-login #login-form input { border-color: #8e918f !important; }
.aruru-login #login-form input:focus { border-color: var(--a-primary) !important; box-shadow: 0 0 0 1px var(--a-primary) !important; }
.aruru-login #login-form .formbuttons, .aruru-login #login-form p.formbuttons { text-align: right; margin: 22px 0 0 !important; }
.aruru-login #login-form .formbuttons .button, .aruru-login #login-form button[type=submit], .aruru-login #rcmloginsubmit {
	width: auto !important;
	min-width: 112px;
	height: 44px;
	padding: 0 24px !important;
	border-radius: 999px !important;
	background: var(--a-primary) !important;
	border: 0 !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 600 !important;
}
html.dark-mode .aruru-login #rcmloginsubmit { color: #062e6f !important; }
.aruru-login #rcmloginsubmit:hover { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); filter: brightness(1.05); }

/* 2단계 인증(OTP) 입력칸·체크박스 (twofactor_gauthenticator 가 같은 폼에 넣음) */
.aruru-login #login-form input[name="_code_2FA"] {
	letter-spacing: 0.4em;
	text-align: center;
	font-size: 22px !important;
	font-variant-numeric: tabular-nums;
}
.aruru-login #login-form label, .aruru-login #login-form .custom-control-label { color: var(--a-muted); font-size: 14px; }
.aruru-login #login-form input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--a-primary); vertical-align: middle; margin-right: 6px; }

.aruru-footer {
	display: flex !important;
	align-items: center;
	gap: 6px;
	margin-top: 26px !important;
	padding-top: 18px;
	border-top: 1px solid var(--a-line);
	color: var(--a-muted) !important;
	font-size: 13px;
	position: static !important;
	width: auto !important;
}
.aruru-lock { font-size: 13px; }
.aruru-legal { margin-top: 18px; color: var(--a-muted); font-size: 12px; text-align: center; }
body.task-login #message, body.task-login .messagestack { z-index: 50; }
body.task-login #logo { display: none; }

@media (max-width: 480px) {
	.aruru-card { border: 0; box-shadow: none; padding: 28px 20px; border-radius: 0; background: transparent; }
	.aruru-title { font-size: 26px; }
}