/* ══════════════════════════════════════════════════════════════
   app.css — 공통 뼈대 + 홈 화면 (시안 A)
   색은 전부 tokens.css 의 var(--...) 만 사용합니다.
   ══════════════════════════════════════════════════════════════ */

/* ── 기본 초기화 ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  /* 아이폰 노치·홈바 영역 확보 */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

body.is-locked { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button { cursor: pointer; border: none; background: none; padding: 0; }

a { color: inherit; text-decoration: none; }

/* 키보드 사용자를 위한 포커스 표시 — 마우스·터치에는 안 보입니다 */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 화면 낭독기 전용 (눈에는 안 보이지만 읽힘) */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.hidden { display: none !important; }

/* ── 페이지 틀 ────────────────────────────────────────────── */
.page {
  max-width: var(--page-max);
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ── 상단 사용자 바 ───────────────────────────────────────── */
/* 알림과 이름을 오른쪽에 모아 둡니다.
   한 손으로 쥐었을 때 엄지가 닿는 쪽이라 누르기 편합니다. */
.userbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}

/* 이름 + 드롭다운 */
.userbar__menu { position: relative; flex: 0 1 auto; min-width: 0; }

.namebtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-height: var(--tap);
  padding: 0 11px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: transform .12s ease, background .12s ease;
}
.namebtn:active { transform: scale(.96); background: var(--surface-2); }
.namebtn[aria-expanded="true"] { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }
.namebtn__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.namebtn__caret { flex: none; font-size: 10px; opacity: .7; }

.menu-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 176px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--sh-3);
  z-index: 8100;
  animation: pop-in .16s ease-out;
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.menu-pop__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--tap);
  padding: 0 12px;
  border-radius: 10px;
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.menu-pop__item:active { background: var(--brand-soft); }
.menu-pop__icon { flex: none; font-size: var(--fs-md); }

/* 드롭다운 바깥을 눌러 닫기 위한 투명 막 */
.menu-backdrop { position: fixed; inset: 0; z-index: 8000; }

.bell {
  position: relative;
  /* 애플·구글 접근성 권고 최소 터치 영역 44px — 장갑 낀 손도 정확히 눌립니다 */
  width: var(--tap); height: var(--tap);
  flex: none;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  display: grid; place-items: center;
  font-size: 17px;
  transition: transform .12s ease, background .12s ease;
}
.bell:active { transform: scale(.94); background: var(--surface-2); }

.bell__count {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: grid; place-items: center;
  border: 2px solid var(--bg);
  line-height: 1;
}

/* 작은 보조 버튼 (예: "← 홈으로") */
.chipbtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  min-height: var(--tap);
  padding: 0 11px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  transition: transform .12s ease, background .12s ease;
}
.chipbtn:active { transform: scale(.95); background: var(--surface-2); }

/* ── 회사명 헤더 ──────────────────────────────────────────── */
.brandhead {
  text-align: center;
  padding: var(--sp-2) var(--sp-5) var(--sp-5);
}
.brandhead h1 {
  margin: 0 0 3px;
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}
.brandhead p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  letter-spacing: .03em;
}

/* ── 전광판 ───────────────────────────────────────────────── */
.ticker {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 var(--sp-4) var(--sp-5);
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-md);
  color: var(--ink-2);
  box-shadow: var(--sh-1);
}
.ticker__icon { flex: none; font-size: var(--fs-md); }
.ticker__window { flex: 1; min-width: 0; overflow: hidden; }
.ticker__text {
  display: inline-block;
  white-space: nowrap;
  font-size: var(--fs-sm);
}
/* 글이 길 때만 흐릅니다 (JS 가 --dur 을 넣어줍니다) */
.ticker__text--scroll {
  animation: ticker-slide var(--dur, 14s) linear infinite;
}
@keyframes ticker-slide {
  0%, 8%   { transform: translateX(0); }
  100%     { transform: translateX(-100%); }
}
.ticker__edit {
  flex: none;
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-size: var(--fs-sm);
  color: var(--ink-3);
}
.ticker__edit:active { background: var(--brand-soft); }

/* ── 메뉴 격자 ────────────────────────────────────────────── */
.menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 줄마다 높이가 달라지면 격자가 들쭉날쭉해 보입니다.
     1fr 로 모든 줄을 가장 큰 칸에 맞춰 통일합니다. */
  grid-auto-rows: 1fr;
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
}

.menu__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 118px;
  padding: 19px 12px 17px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  text-align: center;
  transition: transform .12s ease, box-shadow .12s ease;
}
.menu__item:active {
  transform: scale(.97);
  box-shadow: none;
}

.menu__icon {
  width: 46px; height: 46px;
  flex: none;
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 21px;
  line-height: 1;
}

.menu__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  word-break: keep-all;
}

.menu__new {
  position: absolute;
  top: 9px; right: 9px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  display: grid; place-items: center;
  line-height: 1;
}

/* ── 관리자 버튼 ──────────────────────────────────────────── */
.adminbar {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-4);
}
.adminbar__btn {
  flex: 1;
  min-height: var(--tap);
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--on-brand);
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: var(--sh-brand);
  transition: transform .12s ease;
}
.adminbar__btn:active { transform: scale(.97); }
.adminbar__btn--ghost {
  background: var(--surface);
  color: var(--brand);
  border: 1.5px solid var(--brand-line);
  box-shadow: none;
}

/* ── 푸터 ─────────────────────────────────────────────────── */
.footer {
  margin-top: auto;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--ink-4);
  padding: var(--sp-6) var(--sp-4) var(--sp-6);
}

/* ── 로딩 ─────────────────────────────────────────────────── */
.spinner {
  width: 26px; height: 26px;
  border: 3px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: 56px 20px;
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

/* 첫 화면 통째 로딩 */
.boot {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: var(--bg);
  z-index: 100;
}

/* 뼈대 화면 (데이터 오기 전 자리 잡아두기 — 화면이 덜컹거리는 걸 막습니다) */
.skeleton {
  background: linear-gradient(90deg, var(--line-soft) 25%, var(--line) 37%, var(--line-soft) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ── 알림 토스트 ──────────────────────────────────────────── */
.toast-host {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(20px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  z-index: 9500;
  pointer-events: none;
  padding: 0 var(--sp-4);
}
.toast {
  max-width: var(--page-max);
  padding: 12px 18px;
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--bg);
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: var(--sh-3);
  animation: toast-in .22s ease-out;
  word-break: keep-all;
}
.toast--error { background: var(--danger); color: #fff; }
.toast--ok    { background: var(--success); color: #fff; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 오류 안내 ────────────────────────────────────────────── */
.errorbox {
  margin: var(--sp-4);
  padding: 18px 16px;
  border-radius: var(--r-md);
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  color: var(--danger);
  font-size: var(--fs-sm);
  text-align: center;
  word-break: keep-all;
}
.errorbox button {
  display: block;
  margin: 14px auto 0;
  min-height: var(--tap);
  padding: 0 20px;
  border-radius: var(--r-sm);
  background: var(--danger);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-sm);
}

/* ══════════════════════════════════════════════════════════════
   아래에서 올라오는 선택 시트
   메뉴 하나에 갈래가 둘 이상일 때 씁니다. (예: 매뉴얼 → 출입 / EV)
   화면을 새로 열지 않으므로 잘못 눌렀을 때 되돌리기가 쉽습니다.
   ══════════════════════════════════════════════════════════════ */
.sheet-bg {
  position: fixed; inset: 0;
  background: rgba(15, 18, 26, .45);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 9000;
  padding: 0;
}
.sheet-bg.is-open { display: flex; }

.sheet {
  width: 100%;
  max-width: var(--page-max);
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 14px var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px rgba(15, 18, 26, .18);
  animation: sheet-up .26s cubic-bezier(.2, .8, .2, 1);
}
@keyframes sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.sheet__handle {
  width: 40px; height: 4px;
  margin: 0 auto var(--sp-4);
  border-radius: 2px;
  background: var(--line);
}
.sheet__title {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--ink);
  text-align: center;
}
.sheet__list { display: flex; flex-direction: column; gap: var(--sp-2); }

.sheet__item {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 66px;
  padding: 13px 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  text-align: left;
  transition: transform .12s ease, background .12s ease;
}
.sheet__item:active { transform: scale(.98); background: var(--brand-soft); }

.sheet__icon {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 13px;
  display: grid; place-items: center;
  font-size: 20px;
}
.sheet__text { flex: 1; min-width: 0; }
.sheet__text b {
  display: block;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
}
.sheet__text small {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--ink-3);
}
.sheet__arrow { flex: none; color: var(--ink-4); font-size: var(--fs-lg); }

.sheet__cancel {
  width: 100%;
  min-height: var(--tap);
  margin-top: var(--sp-3);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink-3);
  font-size: var(--fs-md);
  font-weight: 600;
}
.sheet__cancel:active { background: var(--surface-2); }

/* 시트 안에 입력 양식이 들어갈 때 */
.sheet__form { display: flex; flex-direction: column; gap: var(--sp-4); }

.sheet__note {
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  color: var(--warn);
  font-size: var(--fs-sm);
  line-height: 1.6;
  word-break: keep-all;
}

.sheet__buttons { display: flex; gap: var(--sp-2); }
.sheet__buttons .btn { flex: 1; min-height: 50px; font-size: var(--fs-md); }

/* ══════════════════════════════════════════════════════════════
   내부 화면 (상단바 + 탭)
   ══════════════════════════════════════════════════════════════ */
.view {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-width: var(--page-max);
  margin: 0 auto;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.topbar__back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: var(--tap);
  padding: 0 12px 0 8px;
  margin-left: -8px;
  border-radius: var(--r-sm);
  color: var(--brand);
  font-size: var(--fs-md);
  font-weight: 600;
}
.topbar__back:active { background: var(--brand-soft); }
.topbar__title {
  flex: 1;
  text-align: center;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  /* 뒤로가기 버튼만큼 오른쪽에 여백을 줘서 제목이 정확히 가운데 오게 함 */
  margin-right: 64px;
}

/* 탭 — 아이폰 분절 컨트롤과 같은 조작감 */
.tabs {
  display: flex;
  gap: 4px;
  margin: var(--sp-3) var(--sp-4) 0;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 13px;
}
.tab {
  position: relative;
  flex: 1;
  /* 분절 컨트롤은 보통 40px 이하로도 만들지만,
     전 직원이 모바일로만 쓰므로 여기서도 44px 기준을 지킵니다. */
  min-height: var(--tap);
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink-3);
  transition: background .15s ease, color .15s ease;
}
.tab.is-active {
  background: var(--surface);
  color: var(--brand);
  box-shadow: var(--sh-1);
}
.tab__dot {
  position: absolute;
  top: 7px; right: 10px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--danger);
}

.view__body {
  flex: 1;
  padding: var(--sp-4);
}

/* ══════════════════════════════════════════════════════════════
   글 목록 (공지사항 · 게시판 공용)
   ══════════════════════════════════════════════════════════════ */

/* 상단 고정 박스 — 늘 봐야 하는 글(식단표 등)을 목록 위에 따로 둡니다 */
.pinbox {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: var(--sp-3);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--brand-line);
  background: var(--brand-line);
}
.pinbox__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--tap);
  padding: 11px 14px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: var(--fs-md);
  font-weight: 600;
  text-align: left;
}
.pinbox__item:active { background: var(--brand-line); }
.pinbox__pin { flex: none; font-size: var(--fs-sm); }
.pinbox__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 글 카드 */
.postlist { display: flex; flex-direction: column; gap: var(--sp-2); }

.post {
  position: relative;
  display: block;
  width: 100%;
  padding: 14px 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  text-align: left;
  transition: transform .12s ease;
}
.post:active { transform: scale(.99); }

/* 고정 글 — 왼쪽에 브랜드색 띠 */
.post--pinned { border-left: 3px solid var(--brand); }
/* 주목 글 — 왼쪽에 경고색 띠 (고정보다 우선) */
.post--attention { border-left: 3px solid var(--danger); }
/* 이미 읽은 글은 흐리게 — 안 읽은 글이 눈에 들어오게 */
.post--read { opacity: .58; }

.post__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 7px;
}
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.badge--today { background: var(--danger); color: #fff; }
.badge--near  { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn); }
.badge--soon  { background: var(--info-soft); color: var(--info); border: 1px solid var(--info); }
.badge--far   { background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line); }
.badge--period { background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line); }
.badge--attention { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger); }
.badge--new { background: var(--danger); color: #fff; }

.post__row { display: flex; align-items: flex-start; gap: 8px; }
.post__title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
  word-break: keep-all;
}
.post__link { flex: none; font-size: var(--fs-sm); color: var(--ink-4); }
.post__meta {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  font-size: var(--fs-sm);
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

/* 비어 있을 때 */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 56px 20px;
  color: var(--ink-3);
  font-size: var(--fs-md);
}
.empty__icon { font-size: 38px; }

/* 페이지 넘기기 */
.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-top: var(--sp-4);
  flex-wrap: wrap;
}
.pager__btn {
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 10px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pager__btn:disabled { opacity: .35; }
.pager__btn.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}

/* ══════════════════════════════════════════════════════════════
   글 상세
   ══════════════════════════════════════════════════════════════ */
.detail__head {
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.detail__title {
  margin: 0 0 8px;
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.45;
  word-break: keep-all;
  text-wrap: balance;
}
.detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* 본문은 관리자가 서식 편집기로 쓴 HTML 이 들어옵니다 */
.detail__body {
  font-size: var(--fs-md);
  line-height: 1.75;
  color: var(--ink);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.detail__body img {
  border-radius: var(--r-md);
  margin: 10px 0;
}
.detail__body a { color: var(--brand); text-decoration: underline; }
.detail__body table { display: block; overflow-x: auto; max-width: 100%; }
.detail__body :is(h1, h2, h3) { line-height: 1.4; margin: 18px 0 8px; }

.detail__images { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.detail__images img { width: 100%; border-radius: var(--r-md); display: block; }

/* 이미지가 뜨기 전 자리를 잡아둬 화면이 덜컹거리지 않게 합니다 */
.imgslot {
  display: grid;
  place-items: center;
  min-height: 180px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-3);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.imgslot--error { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }

/* ══════════════════════════════════════════════════════════════
   로그인 화면
   ══════════════════════════════════════════════════════════════ */
.login {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5);
}

.login__brand {
  text-align: center;
  margin-bottom: var(--sp-6);
}
.login__logo {
  width: 68px; height: 68px;
  margin: 0 auto var(--sp-4);
  border-radius: var(--r-xl);
  background: var(--brand);
  color: var(--on-brand);
  display: grid; place-items: center;
  font-size: 28px;
  font-weight: 900;
  box-shadow: var(--sh-brand);
}
.login__brand h1 {
  margin: 0 0 4px;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.login__brand p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  letter-spacing: .03em;
}

.login__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  box-shadow: var(--sh-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
}
.field input {
  width: 100%;
  min-height: 50px;
  padding: 0 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  /* 16px 미만이면 아이폰이 입력 시 화면을 확대해버립니다 — 반드시 유지 */
  font-size: var(--fs-lg);
  color: var(--ink);
  transition: border-color .15s ease, background .15s ease;
}
.field input::placeholder { color: var(--ink-4); }
.field input:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.checkline {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  font-size: var(--fs-md);
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
}
.checkline input {
  width: 21px; height: 21px;
  flex: none;
  accent-color: var(--brand);
  margin: 0;
}

.btn {
  width: 100%;
  min-height: 52px;
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--fs-lg);
  font-weight: 700;
  box-shadow: var(--sh-brand);
  display: grid;
  place-items: center;
  transition: transform .12s ease, opacity .12s ease;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; box-shadow: none; transform: none; }
.btn--ghost {
  background: var(--surface);
  color: var(--brand);
  border: 1.5px solid var(--brand-line);
  box-shadow: none;
}

.formmsg {
  font-size: var(--fs-sm);
  text-align: center;
  color: var(--danger);
  min-height: 20px;
  word-break: keep-all;
  white-space: pre-line;
}

.login__foot {
  margin-top: var(--sp-5);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--ink-4);
}