/* 공통 UI 컴포넌트 스타일 (단계 53).
 *
 * tokens.css 의 디자인 토큰만 사용 — 색·간격·반경을 컴포넌트 안에 박지 않는다.
 * 모든 페이지가 이 CSS 와 ui.js 를 import 하면 자동으로 일관된 UI.
 */

/* ── 머리글 — 로고 · 메뉴(왼쪽) · 화면 폭 배지 · 사용자 메뉴(오른쪽). 좌우는 본문과 같은 선(--edge) ─────── */
.app-header {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 56px;
  padding: 0 var(--edge);
  box-sizing: border-box;
  background: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
}

.app-brand {
  font-weight: 800;
  font-size: var(--font-size-lg);
  letter-spacing: -0.01em;
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
}

.app-brand:hover {
  color: var(--color-accent-hover);
}

/* 메뉴 — 낱말 하나씩, 지금 화면은 아래 줄로 표시한다 */
.app-header-nav {
  display: flex;
  align-self: stretch;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  min-width: 0;
}

.app-header-nav a {
  display: flex;
  align-items: center;
  white-space: nowrap;
  color: var(--color-fg-muted);
  text-decoration: none;
  font-weight: 500;
  padding: 0 var(--space-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.app-header-nav a:hover {
  color: var(--color-fg);
  background: var(--color-bg-subtle);
}

.app-header-nav a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.app-header-nav a.primary {
  color: var(--color-accent);
  font-weight: 700;
  border-bottom-color: var(--color-accent);
}

.app-header-end { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.app-header-end > a { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-accent); text-decoration: none; white-space: nowrap; }

/* 관리자 콘솔 표시 · 보는 곳 전환(#129) */
.app-area { margin-left: calc(-1 * var(--space-3)); padding: 1px var(--space-2); border-radius: var(--radius-sm); background: var(--color-accent); color: var(--color-fg-inverse); font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.app-header--admin { border-bottom-color: var(--color-accent); }
.app-space { display: inline-flex; padding: 2px; border-radius: var(--radius-md); background: var(--color-bg-subtle); border: 1px solid var(--color-border); }
.app-space-btn { border: 0; background: transparent; color: var(--color-fg-muted); font: inherit; font-size: var(--font-size-sm); padding: 3px var(--space-3); border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; max-width: 14em; overflow: hidden; text-overflow: ellipsis; }
.app-space-btn:hover { color: var(--color-fg); }
.app-space-btn.is-active { background: var(--color-bg-elevated); color: var(--color-fg); font-weight: 700; box-shadow: var(--shadow-card); }
.app-space-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* 화면 폭 배지(S · M · L · XL) — 글자는 tokens.css 의 .bp::after */
.bp {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 20px; padding: 0 5px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  color: var(--color-fg-muted); background: var(--color-bg-subtle);
  font-family: var(--font-family-mono); font-size: 0.7rem; font-weight: 700; box-sizing: border-box;
}

/* 사용자 메뉴(#97) */
.app-user { position: relative; font-size: var(--font-size-sm); }
.app-user > summary {
  list-style: none; cursor: pointer; display: flex; gap: var(--space-2); align-items: baseline;
  padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-bg-elevated); white-space: nowrap;
}
.app-user > summary::-webkit-details-marker { display: none; }
.app-user > summary::after { content: "▾"; color: var(--color-fg-muted); }
.app-user > summary span { color: var(--color-fg-muted); }
.app-user[open] > summary { border-color: var(--color-accent); }
.app-user-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 220px;
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-3); background: var(--color-bg-elevated);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated);
}
.app-user-panel p { margin: 0; }
.app-user-email { color: var(--color-fg-muted); word-break: break-all; }
.app-user-tags { display: flex; gap: var(--space-1); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-1) !important; }
.app-user-panel button {
  text-align: left; background: none; border: 0; padding: var(--space-2); border-radius: var(--radius-sm);
  font: inherit; color: var(--color-fg); cursor: pointer;
}
.app-user-panel button:hover { background: var(--color-bg-subtle); }
.app-user-link { display: block; padding: var(--space-2) var(--space-2); border-radius: var(--radius-sm); color: var(--color-accent); font-weight: 600; text-decoration: none; font-size: var(--font-size-sm); }
.app-user-link:hover { background: var(--color-bg-subtle); }

/* 안내 판(권한 없음 · 빈 화면) · 작은 대화상자 — utils/page.js */
/* hidden 속성은 늘 이긴다 — display 를 준 규칙(form · flex)이 숨긴 것을 다시 보이게 하지 않도록 */
[hidden] { display: none !important; }

.ui-notice { max-width: 560px; margin: var(--space-8) auto; padding: var(--space-5); text-align: center;
  background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.ui-notice h1 { font-size: var(--font-size-xl); margin: 0 0 var(--space-2); }
.ui-notice p { color: var(--color-fg-muted); margin: 0 0 var(--space-4); }
.ui-dialog { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5);
  width: min(420px, calc(100vw - 32px)); box-shadow: var(--shadow-modal); color: var(--color-fg); font-family: var(--font-family-base); }
.ui-dialog::backdrop { background: rgba(20, 30, 50, 0.45); }
.ui-dialog h2 { margin: 0 0 var(--space-3); font-size: var(--font-size-lg); }
.ui-form { display: flex; flex-direction: column; gap: var(--space-3); }
.ui-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--font-size-sm); color: var(--color-fg-muted); }
.ui-form input, .ui-form select { font: inherit; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md); background: var(--color-bg-input); color: var(--color-fg); }
.ui-form .ui-field-error { color: var(--color-error); font-size: var(--font-size-sm); min-height: 1em; }
.ui-form-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }

/* ── 버튼 ──────────────────────────────────────────────────────────── */
.ui-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: inherit;
  font-size: var(--font-size-base);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.ui-btn-sm { padding: var(--space-1) var(--space-2); font-size: var(--font-size-sm); }
.ui-btn-md { padding: var(--space-2) var(--space-3); }

.ui-btn-primary {
  background: var(--color-accent);
  color: var(--color-fg-inverse);
  border-color: var(--color-accent);
}
.ui-btn-primary:hover:not(:disabled) {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.ui-btn-secondary {
  background: var(--color-bg-elevated);
  color: var(--color-fg);
  border-color: var(--color-border-strong);
}
.ui-btn-secondary:hover:not(:disabled) {
  background: var(--color-info-bg);
  border-color: var(--color-info);
  color: var(--color-fg);
}

.ui-btn-ghost {
  background: transparent;
  color: var(--color-fg-muted);
  border-color: transparent;
}
.ui-btn-ghost:hover:not(:disabled) {
  background: var(--color-bg-subtle);
  color: var(--color-fg);
}

.ui-btn-danger {
  background: var(--color-error-bg);
  color: var(--color-error);
  border-color: var(--color-error);
}
.ui-btn-danger:hover:not(:disabled) {
  background: var(--color-error);
  color: var(--color-fg-inverse);
}

.ui-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── 뱃지 ──────────────────────────────────────────────────────────── */
.ui-badge {
  display: inline-block;
  flex: none;                 /* 좁은 칸 · flex 줄에서 글자 단위로 쪼개지지 않게 */
  white-space: nowrap;
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.4;
}

.ui-badge-neutral { background: var(--color-bg-subtle); color: var(--color-fg-muted); }
.ui-badge-info    { background: var(--color-info-bg); color: var(--color-info); }
.ui-badge-success { background: var(--color-success-bg); color: var(--color-success); }
.ui-badge-warn    { background: var(--color-warn-bg); color: var(--color-warn); }
.ui-badge-error   { background: var(--color-error-bg); color: var(--color-error); }

/* 알림(토스트) — components/ui.js toast() */
.ui-toast-box { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 50; max-width: min(420px, calc(100vw - 32px)); }
.ui-toast {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-elevated);
  background: var(--color-bg-elevated); color: var(--color-fg); border-left: 4px solid var(--color-info);
}
.ui-toast-success { border-left-color: var(--color-success); }
.ui-toast-warn { border-left-color: var(--color-warn); }
.ui-toast-error { border-left-color: var(--color-error); }


/* 법정 고지 바닥글 — utils/legal.js (전사 LEGAL_FOOTER.md) */
.ui-legal { color: var(--color-fg-subtle); font-size: 0.72rem; line-height: 1.6; text-align: center; }
.ui-legal p { margin: 0 0 2px; }
.ui-legal a { color: inherit; }
.ui-legal-links { white-space: nowrap; }
.ui-legal-bar { padding: var(--space-5) var(--edge) var(--space-6); }

/* 좁은 화면(S) — 머리글은 두 줄(로고 + 배지 · 사용자 / 메뉴). 메뉴가 넘치면 그 줄만 옆으로 민다 */
@media (max-width: 639px) {
  .app-header { flex-wrap: wrap; gap: 0 var(--space-3); padding-top: var(--space-2); }
  .app-header-nav { order: 3; flex: 1 0 100%; overflow-x: auto; min-height: 40px; margin: 0 calc(-1 * var(--space-3)); }
}

/* 좁은 화면 — 보는 곳 전환은 메뉴 줄 아래 한 줄 */
@media (max-width: 639px) {
  .app-space { order: 4; }
  .app-header-end { flex-wrap: wrap; justify-content: flex-end; }
  .app-space-btn { max-width: 9em; }
}