/* ══════════════════════════════════════════════════════════════════════════
   drawer.css — 링크를 넣고 고치는 서랍. 셸의 컴포넌트다(세 화면이 같은 것을 쓴다).

   **기본은 숨김이다.** 이 규칙이 없으면 서랍 마크업이 페이지 맨 아래에 그냥 그려진다 —
   실제로 그렇게 보였다(홈 Footer 아래에 스타일 없는 폼이 노출). 모달은 «열기 전에는 없는
   것» 이어야 하고, 그 사실을 CSS 가 보장해야 한다(JS 가 늦게 오거나 죽어도 마찬가지다).
   ══════════════════════════════════════════════════════════════════════════ */

.drawer {
	display: none;
}

.drawer.show {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	justify-content: flex-end;
}

/* 뒤를 덮는 막. 누르면 닫힌다(`data-drawer-dismiss`). */
.drawer-scrim {
	position: absolute;
	inset: 0;
	background: rgba(8, 11, 16, 0.55);
}

/* 오른쪽에서 들어오는 판. 폭은 읽기 좋은 한 단(`--measure`)을 넘지 않는다. */
.drawer-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(28rem, 100%);
	max-height: 100%;
	background: var(--bg);
	border-left: 1px solid var(--line-strong);
	box-shadow: -24px 0 60px -30px rgba(0, 0, 0, 0.45);
}

.drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem var(--gutter);
	border-bottom: 1px solid var(--line);
}

.drawer-head h2 {
	margin: 0;
	font-size: var(--t-lg);
	font-weight: 700;
	color: var(--fg);
}

.drawer-close {
	width: 2rem;
	height: 2rem;
	border: 0;
	background: none;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--fg-3);
	cursor: pointer;
}

@media (hover: hover) {
	.drawer-close:hover {
		color: var(--fg);
	}
}

/* 판(세로 flex) → **폼** → 본문·바닥. 가운데 폼이 빠지면 사슬이 끊긴다 — 폼이 그냥 블록이라
   높이를 물려받지 못하고, 그러면 아래 `.drawer-body` 의 `flex: 1`·`overflow-y: auto` 가
   **아무 일도 하지 않는다.** 칸이 늘어난 만큼 판이 화면 밖으로 자라 저장 단추가 사라졌다
   (실측: 계약·진행 두 칸을 넣자 900px 이하 화면에서). */
.drawer-form {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}

/* 본문은 스크롤한다 — 필드가 많고 화면이 짧을 수 있다. 바닥(저장·취소)은 늘 보인다.
   `min-height: 0` 이 짝이다: flex 아이템의 기본 최소 크기는 내용 크기라, 이게 없으면
   줄어들지 않아 스크롤이 생기지 않는다. */
.drawer-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 1rem var(--gutter);
}

.drawer-foot {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	padding: 0.9rem var(--gutter);
	border-top: 1px solid var(--line);
}

/* ── 필드 ── 라벨이 입력 위에 온다. 옆에 두면 긴 한글 라벨에서 줄이 어긋난다. */
.field {
	display: block;
	margin-bottom: 0.9rem;
}

/* 「직접 입력」을 골랐을 때만 나타나는 칸. 셀렉트 바로 아래에 붙어 «저 셀렉트의 이어짐» 으로
   읽힌다 — 떨어뜨리면 별개의 칸으로 보이고, 그러면 둘 중 무엇이 진짜인지 다시 모호해진다. */
.field-new {
	margin-top: 0.4rem;
}

/* 라벨은 **홀로 서는 공용 부품**이다 — `.field .label` 로만 두었더니 그 정의 자신이 부모에
   기대고 있었고, 그래서 화면이 좁혀 쓸 때(`.find-form .label`)도 부모 없이는 뜻이 없는
   이름이 됐다. 폼 밖(상세의 「이동할 서비스」)에서도 쓰므로 `.field` 안이라는 조건을 뗀다. */
.label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: var(--t-sm);
	color: var(--fg-2);
}

.input,
.select,
.textarea {
	width: 100%;
	min-height: var(--control-h);
	padding: 0 0.7rem;
	border: 1px solid var(--line-strong);
	border-radius: 0;              /* 단추와 같은 규칙 — 모서리를 굴리지 않는다 */
	background: var(--bg-2);
	font: inherit;
	font-size: var(--t-base);
	color: var(--fg);
}

.textarea {
	min-height: 5rem;
	padding: 0.5rem 0.7rem;
	line-height: 1.6;
	resize: vertical;
}

.input:focus,
.select:focus,
.textarea:focus {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

.input::placeholder,
.textarea::placeholder {
	color: var(--fg-3);
	opacity: 1;
}

/* 오류는 **폼 위**에 둔다 — 저장을 누른 자리에서 가장 가까운 곳이 아니라, 무엇이 잘못됐는지
   먼저 읽어야 하는 곳이다. */
.form-error {
	margin-bottom: 0.9rem;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--bad);
	font-size: var(--t-sm);
	color: var(--bad);
}