/*
 * 버튼 · 폼 · 카드 · 배지.
 * 트리 · 그리드 래퍼 스타일은 F04 · F09 에서 추가한다.
 */

.gbm-card {
	background: var(--gbm-surface);
	border: 1px solid var(--gbm-border);
	border-radius: var(--gbm-radius);
	padding: 28px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.gbm-card--narrow {
	width: 100%;
	max-width: 360px;
}

/*
 * 칸이 많은 폼 카드(가입). 360px 로는 <b>이메일 주소가 한눈에 안 들어온다</b> —
 * 자기가 무엇을 적었는지 보이지 않으면 오타를 못 찾는다.
 */
.gbm-card--form {
	width: 100%;
	max-width: 460px;
}

/* 라벨이 짧은 폼이다. 104px 은 과해 인풋만 좁아진다 */
.gbm-card--form .gbm-field {
	grid-template-columns: 76px 1fr;
	gap: 4px 8px;
}

.gbm-card__title {
	font-size: 18px;
}

/*
 * 브랜드 표식. 카드 위에 한 번만 놓는다.
 *
 * 마크는 앞장 128 × 전체 150 비율이다 — 높이를 임의로 맞추면 리본이 뭉개진다.
 * 16px 이하에서는 뒷장을 생략한 아이콘(icon-16.png)을 쓴다 (imgs/README.txt).
 */
.gbm-brand {
	/* h1 으로 쓰일 수 있다. 브라우저 기본 크기·여백을 덮는다 */
	font-size: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * 최소 여백 = 앞장 높이의 0.35배 (imgs/README.txt).
	 * 마크 26×30.5 에서 앞장 높이는 약 25px 이므로 9px 이상이 필요하다.
	 */
	gap: 10px;
	margin: 0 0 18px;
}

.gbm-brand__mark {
	width: 26px;
	height: 30.5px;
	display: block;
}

.gbm-brand__name {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--gbm-text);
}

.gbm-card__desc,
.gbm-card__foot {
	margin: 0 0 20px;
	color: var(--gbm-text-muted);
	font-size: 13px;
}

.gbm-card__foot {
	margin: 20px 0 0;
	text-align: center;
}

.gbm-form {
	display: flex;
	flex-direction: column;
	gap: var(--gbm-gap);
}

/*
 * 라벨과 입력을 한 줄에 둔다.
 *
 * 세로로 쌓으면 칸 하나가 60px 을 먹는다 — 가입 화면처럼 칸이 여덟이면
 * 카드가 화면을 넘어 스크롤이 생긴다. 가로로 두면 40px 로 줄어든다.
 *
 * 라벨 폭은 고정한다. 칸마다 다르면 입력 왼쪽 끝이 들쭉날쭉해진다.
 */
.gbm-field {
	display: grid;
	/* "② 관리자 아이디" 처럼 번호가 붙은 라벨도 한 줄에 들어가는 폭이다 */
	grid-template-columns: 104px 1fr;
	align-items: center;
	gap: 4px 10px;
}

.gbm-field__label {
	font-size: 13px;
	color: var(--gbm-text-muted);
	line-height: 1.35;
}

.gbm-field__label small {
	display: block;
	font-size: 11px;
	opacity: 0.8;
}

/* 칸 아래에 붙는 도움말 · 오류는 입력 열에 맞춘다 */
.gbm-field__note {
	grid-column: 2;
	margin: 0;
	font-size: 12px;
	color: var(--gbm-text-muted);
}

.gbm-input {
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--gbm-border);
	border-radius: var(--gbm-radius);
	font-family: inherit;
	font-size: 14px;
}

.gbm-input:focus {
	outline: none;
	border-color: var(--gbm-primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.gbm-btn {
	height: 36px;
	padding: 0 16px;
	border: 1px solid var(--gbm-border);
	border-radius: var(--gbm-radius);
	background: var(--gbm-surface);
	color: var(--gbm-text);
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
}

.gbm-btn:hover {
	background: #f3f4f6;
}


.gbm-btn--primary {
	background: var(--gbm-primary);
	border-color: var(--gbm-primary);
	color: #fff;
}

.gbm-btn--primary:hover {
	background: var(--gbm-primary-dark);
}

.gbm-btn--block {
	width: 100%;
	margin-top: 4px;
}

.gbm-check-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gbm-check-list li {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	border-bottom: 1px solid var(--gbm-border);
	font-family: Consolas, "D2Coding", monospace;
}

.gbm-ok   { color: #15803d; font-weight: 600; }
.gbm-fail { color: var(--gbm-danger); font-weight: 600; }

/* ------------------------------------------------------------------
   인증 코드 입력 (04 문서 4.1.1)

   6칸 분리 입력. 붙여넣기를 받으려면 칸들이 한 컨테이너 안에 있어야 한다.
   ------------------------------------------------------------------ */
.gbm-code {
	display: flex;
	gap: .5rem;
	justify-content: center;
	margin: 1rem 0 .5rem;
}

.gbm-code__box {
	width: 2.75rem;
	height: 3.25rem;
	padding: 0;
	border: 1px solid var(--gbm-border, #cbd5e1);
	border-radius: .375rem;
	background: var(--gbm-surface, #fff);
	color: inherit;
	font-size: 1.5rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.gbm-code__box:focus {
	outline: 2px solid var(--gbm-primary, #2563eb);
	outline-offset: 1px;
}

.gbm-code__box:disabled {
	background: var(--gbm-muted-bg, #f1f5f9);
	color: var(--gbm-muted, #94a3b8);
}

.gbm-code__clock {
	margin: 0 0 .75rem;
	color: var(--gbm-muted, #64748b);
	font-size: .875rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/* ── 토스트 ─────────────────────────────────────────────────────── */

.gbm-toasts {
	position: fixed;
	right: 16px;
	bottom: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 60;
}

.gbm-toast {
	max-width: 420px;
	padding: 10px 14px;
	border-radius: var(--gbm-radius);
	background: var(--gbm-text);
	color: #fff;
	font-size: 13px;
	line-height: 1.5;
	box-shadow: 0 6px 20px rgba(36, 31, 62, 0.25);
	transition: opacity 0.2s, transform 0.2s;
}

.gbm-toast--ok      { background: var(--gbm-primary); }
.gbm-toast--fail    { background: var(--gbm-danger); }
.gbm-toast--out     { opacity: 0; transform: translateY(6px); }

/* ── 모달 ───────────────────────────────────────────────────────── */

.gbm-modal {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(36, 31, 62, 0.45);
	z-index: 70;
}

.gbm-modal__box {
	width: 100%;
	max-width: 420px;
	background: var(--gbm-surface);
	border-radius: 10px;
	padding: 20px;
}

.gbm-modal__title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 800;
}

.gbm-modal__desc {
	margin: 0 0 6px;
	font-size: 14px;
	line-height: 1.6;
}

.gbm-modal__detail {
	margin: 0 0 6px;
	font-size: 13px;
	color: var(--gbm-text-muted);
	/* 확인창 문구는 여러 줄인 경우가 많다. 줄바꿈이 죽으면 한 덩어리로 읽힌다 */
	white-space: pre-line;
}

.gbm-modal__foot {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
}

/* ── 버튼 변형 ──────────────────────────────────────────────────── */

.gbm-btn--small {
	height: 28px;
	padding: 0 10px;
	font-size: 12px;
}

/* 되돌릴 수 없는 일. 눈에 띄어야 한다 */
.gbm-btn--danger {
	background: var(--gbm-danger);
	border-color: var(--gbm-danger);
	color: #fff;
}

.gbm-btn--danger:hover {
	background: #b91c1c;
}

.gbm-btn:disabled {
	opacity: 0.55;
	cursor: default;
}

/* ── 배지 ───────────────────────────────────────────────────────── */

.gbm-badge {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 10px;
	background: #eee;
	color: var(--gbm-text);
	font-size: 11px;
	font-weight: 700;
}

.gbm-badge--ok      { background: #e6f4ea; color: #137333; }
.gbm-badge--warn    { background: #fef3c7; color: #92400e; }
.gbm-badge--fail    { background: #fde8e8; color: #b91c1c; }
.gbm-badge--muted   { background: #eeedf3; color: var(--gbm-text-muted); }

/* ── 그리드 ─────────────────────────────────────────────────────── */

.gbm-grid {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.gbm-grid__box {
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	/*
	 * AG Grid 의 뿌리를 <b>flex 로</b> 늘린다. height:100% 에 맡기면
	 * 부모 높이가 flex 로 정해진 자리(팝업 안)에서 백분율이 풀리지 않아
	 * 뿌리가 2px 로 쭈그러들고 <b>표가 통째로 안 보인다</b> — 줄은 DOM 에 있는데
	 * 화면은 비어 있어, 데이터가 없는 것으로 오해하기 딱 좋다.
	 */
	display: flex;
	flex-direction: column;
}

/*
 * AG Grid 는 호스트와 뿌리 사이에 <b>테마용 div 를 하나 더 끼운다.</b>
 * 그 층이 auto 로 남으면 뿌리의 height:100% 가 풀리지 않아 2px 로 쭈그러든다 —
 * 그래서 뿌리만 겨누지 않고 중간 층까지 늘린다.
 */
.gbm-grid__box > div {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.gbm-grid__box .ag-root-wrapper {
	flex: 1 1 auto;
	min-height: 0;
}

.gbm-grid__foot {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 2px 0;
	font-size: 12px;
	color: var(--gbm-text-muted);
}

.gbm-grid__count {
	margin-right: auto;
}

/*
 * 지금 걸려 있는 배지. 눌러서 거르는 배지는 <b>눌린 티가 나야</b> 한다 —
 * 안 그러면 왜 목록이 줄었는지 알 수 없다.
 */
.gbm-badge.is-on {
	outline: 2px solid var(--gbm-primary);
	outline-offset: 1px;
	font-weight: 700;
}

/* 실패한 줄. 칸 하나만 물들이면 훑을 때 놓친다 */
.gbm-grid .ag-row.is-fail {
	background: #fff5f5;
}

.gbm-grid .ag-row.is-warn {
	background: #fffaf0;
}

/* ── 탭 ─────────────────────────────────────────────────────────── */
/*
 * 영역마다 저장이 따로인 화면(설정)에서 쓴다. 버튼으로 흉내 내면
 * '누르는 것' 과 '지금 보고 있는 것' 이 같은 모양이 되어 구별되지 않는다.
 */
.gbm-tabs {
	display: flex;
	gap: 2px;
	border-bottom: 1px solid var(--gbm-border);
}

.gbm-tab {
	padding: 7px 14px;
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: 6px 6px 0 0;
	background: none;
	color: var(--gbm-text-muted);
	font-family: inherit;
	font-size: 13px;
	cursor: pointer;
}

.gbm-tab:hover {
	background: #f6f5fb;
}

.gbm-tab.is-on {
	background: var(--gbm-surface);
	border-color: var(--gbm-border);
	color: var(--gbm-primary-dark);
	font-weight: 700;
	/* 아래 선을 덮어 탭과 본문이 이어져 보이게 한다 */
	margin-bottom: -1px;
	padding-bottom: 8px;
}

/* 필터가 전체를 거른 것으로 오해하지 않게 한다 */
.gbm-grid__note {
	margin-left: 8px;
	font-style: normal;
	color: var(--gbm-text-muted);
	opacity: 0.8;
}

.gbm-grid__page {
	min-width: 64px;
	text-align: center;
}

.gbm-grid__empty {
	color: var(--gbm-text-muted);
	font-size: 13px;
}

/* ── 트리 ───────────────────────────────────────────────────────── */

.gbm-tree {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	padding: 4px 0;
	user-select: none;
}

/*
 * 스크롤은 여기가 갖는다. 도구 막대(전체 열기·닫기, 추가)는 위에 붙어 있어야
 * 깊은 트리를 끝까지 내려간 뒤에도 되돌아 올라오지 않고 접을 수 있다.
 */
.gbm-tree__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
}

.gbm-tree__empty {
	margin: 12px;
	color: var(--gbm-text-muted);
	font-size: 13px;
}

/* ── jsTree ─────────────────────────────────────────────────────── */
/*
 * 트리는 jstree 가 그린다. 여기서는 <b>우리 화면에 맞추는 것만</b> 한다 —
 * 글자 크기 · 색 · 고른 줄 표시. 구조(들여쓰기 · 선 · 아이콘)는 테마가 갖는다.
 */

.gbm-jstree {
	font-size: 14px;
}

/* 고른 줄. 테마 기본은 파란색이라 우리 바이올렛으로 바꾼다 */
.gbm-jstree .jstree-wholerow-clicked,
.gbm-jstree .jstree-wholerow-hovered {
	background: #ede9fa;
	box-shadow: none;
}

.gbm-jstree .jstree-anchor.jstree-clicked,
.gbm-jstree .jstree-anchor.jstree-hovered {
	background: transparent;
	box-shadow: none;
	border-radius: 4px;
}

.gbm-jstree .jstree-anchor.jstree-clicked {
	font-weight: 700;
	color: var(--gbm-primary-dark);
}

/* 사용 안 함. 배포에서 빠진다는 것이 목록에서 보여야 한다 (01 문서 4.2 규칙 4) */
.gbm-jstree .gbm-jstree__anchor.is-disabled {
	color: var(--gbm-text-muted);
	text-decoration: line-through;
}

/* 검색어와 일치. 트리를 자르지 않고 표시만 한다 (01 문서 3.4) */
.gbm-jstree .gbm-jstree__anchor.is-matched {
	background: #fff3bf;
	border-radius: 3px;
}

/* 끌고 다닐 때 따라다니는 표식 — 화면 맨 위에 떠야 모달 위에서도 보인다 */
#jstree-dnd {
	z-index: 90;
	font-size: 13px;
}

/* ── 좁은 입력 · 설명 목록 ──────────────────────────────────────── */

/*
 * 필수 입력 표시.
 *
 * <p>색으로만 알리지 않는다 — 색을 못 가리는 사람에게는 아무 표시도 없는 것과 같다.
 * 별표라는 <b>모양</b>이 뜻을 나르고 색은 거들 뿐이다.
 * 폼 위에 "* 는 필수 입력입니다" 를 함께 두어 처음 보는 사람도 알게 한다.</p>
 */
.gbm-required {
	color: var(--gbm-danger);
	font-weight: 700;
}

/* 제목과 안내를 한 줄에. 안내는 오른쪽 끝으로 민다 */
.gbm-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.gbm-card__head .gbm-card__title {
	margin: 0;
}

.gbm-form__note {
	margin: 0 0 10px;
	color: var(--gbm-text-muted);
	font-size: 12px;
}

/* 제목 줄 안에서는 아래 여백이 필요 없다 */
.gbm-card__head .gbm-form__note {
	margin: 0;
}

.gbm-input--small {
	height: 28px;
	padding: 0 6px;
	font-size: 13px;
}

/*
 * 여러 줄 입력 칸. {@code .gbm-input} 은 한 줄용이라 높이가 36px 로 묶여 있어
 * textarea 를 그대로 두면 한 줄로 눌린다.
 */
.gbm-input--area {
	height: auto;
	padding: 8px 10px;
	line-height: 1.5;
	font-family: inherit;
	resize: vertical;
}

/* 날짜 칸. 달력은 브라우저가 띄운다 — 벤더 달력을 얹지 않는다 */
.gbm-input--date {
	width: 140px;
	padding: 0 6px;
}

.gbm-period__tilde {
	color: var(--gbm-text-muted);
	font-size: 12px;
}

.gbm-desc {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 6px 10px;
	margin: 10px 0 0;
	font-size: 13px;
}

.gbm-desc dt {
	color: var(--gbm-text-muted);
}

.gbm-desc dd {
	margin: 0;
}

/* ── 패널 안 머리·발 ────────────────────────────────────────────── */

.gbm-panel__head {
	display: flex;
	gap: 6px;
	margin-bottom: 8px;
}

.gbm-panel__foot {
	display: flex;
	gap: 8px;
	margin-top: 14px;
}

.gbm-hr {
	margin: 16px 0;
	border: 0;
	border-top: 1px solid var(--gbm-border);
}

/* 막지는 않지만 알려야 하는 것 (중복 URL 등) */
.gbm-warn {
	color: #92400e;
}

/* ── 배포 대상 ──────────────────────────────────────────────────── */

.gbm-target__pick {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0;
}

.gbm-target__list {
	margin: 8px 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--gbm-border);
	border-radius: var(--gbm-radius);
	max-height: 220px;
	overflow: auto;
}

.gbm-target__list li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	font-size: 13px;
	border-bottom: 1px solid var(--gbm-border);
}

.gbm-target__list li:last-child {
	border-bottom: 0;
}

.gbm-target__list li button {
	margin-left: auto;
}

/* 지워진 부서·회원을 가리키는 대상. 아무에게도 가지 않는다 */
.gbm-target__list li.is-dead {
	background: #fdf2f2;
}

.gbm-target__empty {
	color: var(--gbm-text-muted);
	justify-content: center;
}

/* ── 미리보기 ───────────────────────────────────────────────────── */

.gbm-modal__box--wide {
	max-width: 1000px;
}

/*
 * 목록을 보려고 여는 창이다. 작으면 몇 줄만 보여 결국 스크롤로 찾게 된다 —
 * 화면 높이의 대부분을 쓰고, 넘치는 것은 안쪽(그리드·트리)이 스크롤한다.
 */
.gbm-modal__box--tall {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 48px);
	min-height: min(680px, calc(100vh - 48px));
}

.gbm-modal__box--tall .gbm-grid,
.gbm-modal__box--tall .gbm-chooser__tree {
	flex: 1 1 auto;
	min-height: 0;
}

.gbm-preview {
	margin: 10px 0 0;
	padding: 10px;
	list-style: none;
	max-height: 50vh;
	overflow: auto;
	border: 1px solid var(--gbm-border);
	border-radius: var(--gbm-radius);
	font-size: 13px;
	line-height: 1.9;
}

/* ── 검색해서 고르는 상자 ───────────────────────────────────────── */

.gbm-picker {
	position: relative;
	/*
	 * 넓게 늘어나지 않게 한다. 늘어나면 아래 목록도 그만큼 벌어져
	 * 이름 하나와 아이디 하나 사이가 화면 폭만큼 떨어진다.
	 */
	flex: 0 1 260px;
	min-width: 180px;
	max-width: 320px;
}

.gbm-picker__chosen {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 6px;
	border: 1px solid var(--gbm-border);
	border-radius: var(--gbm-radius);
	background: var(--gbm-surface);
	font-size: 13px;
}

.gbm-picker__label {
	flex: 1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.gbm-picker__list {
	position: absolute;
	z-index: 40;
	left: 0;
	/* 입력 상자 폭을 따르되 좁은 칸에서는 조금 넓힌다 */
	min-width: 100%;
	width: max-content;
	max-width: 360px;
	top: 30px;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	max-height: 240px;
	overflow: auto;
	background: var(--gbm-surface);
	border: 1px solid var(--gbm-border);
	border-radius: var(--gbm-radius);
	box-shadow: 0 6px 18px rgba(36, 31, 62, 0.12);
	font-size: 13px;
}

.gbm-picker__list li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 5px 10px;
	cursor: pointer;
}

.gbm-picker__list li.is-on {
	background: #f0edfa;
}

.gbm-picker__list li small {
	margin-left: auto;
	padding-left: 12px;
	color: var(--gbm-text-muted);
	font-size: 11px;
	white-space: nowrap;
}

/* 찾는 중 · 없음 · 너무 많음 */
.gbm-picker__hint {
	color: var(--gbm-text-muted);
	cursor: default;
}

.gbm-tree__tools {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 0 4px 8px;
	border-bottom: 1px solid var(--gbm-border);
	margin-bottom: 4px;
}

/* 화면이 넣는 버튼(추가 따위)은 오른쪽으로 민다 */
.gbm-tree__tools-slot {
	display: flex;
	gap: 6px;
	margin-left: auto;
}

/* 아이콘 버튼 — 도구 막대를 한 줄로 유지한다 */
.gbm-btn--icon {
	width: 28px;
	height: 28px;
	padding: 0;
	font-size: 13px;
	line-height: 1;
}

/* 팝업 안의 부서 트리. 높이를 묶지 않으면 부서가 많을 때 모달이 화면을 넘는다 */
.gbm-chooser__tree {
	min-height: 200px;
	overflow: auto;
	margin-top: 10px;
	border: 1px solid var(--gbm-border);
	border-radius: var(--gbm-radius);
}

/* ── 미리보기 막대 ──────────────────────────────────────────────── */
/*
 * 항목이 아니라 트리 전체에 대한 기능이다. 그래서 패널 안이 아니라
 * 화면 머리에 가로로 눕힌다 — 무엇을 고르든 늘 같은 자리에 있다.
 */
.gbm-preview__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 14px;
	padding: 10px 12px;
	background: #f4f2fb;
	border: 1px solid #e0dcf3;
	border-radius: var(--gbm-radius);
}

.gbm-preview__label {
	font-weight: 700;
	font-size: 13px;
}

.gbm-preview__hint {
	color: var(--gbm-text-muted);
	font-size: 12px;
}

@media (max-width: 900px) {
	.gbm-preview__hint {
		display: none;
	}
}

/* ── SQL 미리보기 ───────────────────────────────────────────────
 *
 * 데이터베이스 업데이트 화면이 쓴다. 돌리기 전에 <b>눈으로 보는 자리</b>라
 * 줄바꿈과 들여쓰기를 그대로 살린다 — 자동 줄바꿈을 걸면 SQL 의 구조가 뭉개진다.
 * 대신 가로로 넘치면 이 상자 안에서만 스크롤한다.
 */
.gbm-sql {
	margin: 8px 0 0;
	padding: 10px 12px;
	max-height: 40vh;
	overflow: auto;
	border: 1px solid var(--gbm-border);
	border-radius: var(--gbm-radius);
	background: #faf9fd;
	font-family: ui-monospace, Consolas, "D2Coding", "Courier New", monospace;
	font-size: 12px;
	line-height: 1.6;
	white-space: pre;
	tab-size: 4;
}