/* ============================================================
 * dev 모드 (TASK-081, 계약 정본 D-029) — 두 용도가 한 파일에 있다.
 *   1) 어드민 토글 화면(/madmin/dev_mode) 보조 클래스 — .dev-mode-help / -desc / -actions
 *   2) mock 표식 칩 — .dev-mock-chip (orders/_delivery_tracking.html.erb)
 *
 * 로드 경로가 둘이다: 프런트는 layouts/application.html.erb(:app glob + 명시 태그),
 * 어드민은 madmin/application/_javascript.html.erb 오버라이드. 어드민 레이아웃에는
 * tokens.css가 없으므로 1)은 madmin gem 변수(--light-text-color 등)를 쓴다.
 *
 * 운영 도메인에서는 DevMode.available? == false라 아래 마크업이 아예 렌더되지 않는다 —
 * 이 CSS가 실서비스 화면에 보일 일은 없다.
 * ============================================================ */

/* ------------------------------------------------------------
 * 1. 어드민 토글 화면 (madmin 레이아웃 — tokens.css 없음)
 * ------------------------------------------------------------ */

/* 화면 상단 안내 문단 — 운영 미적용 사실을 여기서 못 박는다 */
.dev-mode-help {
  margin: 0 0 1rem;
  color: var(--light-text-color, rgb(71 85 105));
  line-height: 1.6;
}

/* 표 안 구간 설명 — 라벨(굵은 줄) 아래 보조 한 줄 */
.dev-mode-desc {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--light-text-color, rgb(71 85 105));
}

/* 저장 버튼 줄 + 프리셋 버튼 줄. button_to는 form을 낳으므로 flex로 가로 정렬 */
.dev-mode-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* ------------------------------------------------------------
 * 2. mock 표식 칩 — 표시형 구간(배송) 전용 (프런트 레이아웃 — tokens.css 있음)
 *
 * 구 형상 = 전 화면 상단 고정 띠(.dev-mode-banner). position:fixed·top:0라 .top-bar(48px)·
 * .page-header(60px)를 덮어 로고·알림 벨 윗부분이 잘렸다(2026-08-09 실측) — 유저 확정으로
 * **폐기**(D-029 §4-1 개정, TASK-085). 지금은 mock이 실제로 실행되는 시점에 알린다:
 *   - 행동형 3구간(dev 로그인·카카오·결제) → flash 토스트 1회 (shared/_flash_toast 재사용)
 *   - 표시형 1구간(배송)                  → 이 칩. 화면을 열 때마다 발생하므로 토스트면
 *                                          성가시고, 없으면 "이 배송 정보가 가짜였나"를 알 수 없다.
 * 시각 패턴은 mock 결제창의 MOCK 배지(payapp_mock.css)와 같은 계열로 맞춘다 — dev 표식이
 * 화면마다 달라 보이면 그 자체가 신호로 읽히지 않는다.
 * ------------------------------------------------------------ */

.dev-mock-chip {
  /* 헤더가 space-between이라 이게 없으면 칩이 제목과 상태 배지 사이 한가운데로 밀린다 —
     제목 바로 옆에 붙여 "이 섹션의 표식"임이 드러나게 한다. */
  margin-right: auto;
  flex-shrink: 0;
  padding: var(--space-0-5) var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-bg-inverse);
  color: var(--color-farmer-yellow); /* 브랜드 오렌지와 구분되는 진단색 */
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------
 * 3. 카카오 mock 로그인 폼 (TASK-083 — /login, 프런트 레이아웃)
 *
 * auth.css의 .auth-field input과 같은 치수를 쓰되 클래스는 분리한다 — 이 블록은
 * DevMode.enabled?(:auth_kakao)일 때만 렌더되는 dev 전용 표면이라, auth.css(실서비스
 * 로그인 화면 스타일)에 섞으면 나중에 dev 자산만 걷어낼 때 경계가 사라진다.
 * ------------------------------------------------------------ */

.dev-mock-auth__input {
  width: 100%;
  height: 52px;
  margin-bottom: 12px;
  border: 1.5px dashed var(--color-border-strong); /* 점선 = 실 입력 필드와 시각 구분 */
  border-radius: 10px;
  padding: 0 16px;
  font-size: 15px;
  color: var(--color-fg);
  outline: none;
  box-sizing: border-box;
}

.dev-mock-auth__input::placeholder { color: var(--color-fg-faint); }

/* 두 시연 경로(신규 가입/재로그인)를 여기서 설명한다 — mock uid 규약을 모르면 빈 폼만
   누르고 "왜 매번 새 계정이 생기지"로 헤맨다 */
.dev-mock-auth__hint {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-fg-subtle);
}