/* 위아크 브랜드 톤 — 스틸 + 블루 + 그레이 조합에, 서체는 세리프 대신 Pretendard로
   깔끔하고 시크한 느낌을 냈어요(제목은 타이트한 자간의 볼드로 에디토리얼한 톤).
   폰트는 외부 CDN(@import)이 아니라 /fonts에 직접 담아서 서빙해요 — @import는 그 파일을
   다 받아올 때까지 나머지 CSS 적용을 통째로 멈추는 방식이라, 페이지를 옮길 때마다 스타일
   안 입혀진 화면이 잠깐 보였다가 확 바뀌는 현상(FOUC)이 있었어요. 직접 담아두면 이 지연이
   없어져요. font-display: swap이라 폰트 로딩 전엔 시스템 폰트로 먼저 보여주다가(화면이
   비지는 대신) 다 받으면 바로 교체돼요. */
@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/Pretendard-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/Pretendard-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/Pretendard-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/Pretendard-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/Pretendard-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f1f3f5;
  --surface: #ffffff;
  --border: #dde1e6;
  --text: #1e2733;
  --text-muted: #64748b;
  --accent: #34567a;
  --accent-hover: #24374d;
  --pos: #1a8f5e;
  --neg: #d13b3b;
  --radius: 10px;
  --sidebar-width: 224px;
  /* 사이드바는 라이트/다크 모드와 상관없이 늘 짙은 스틸 그레이 톤을 유지해요. */
  --sidebar-bg: #1b232d;
  --sidebar-border: #2c3744;
  --sidebar-text: #e4e9ef;
  --sidebar-text-muted: #8a97a6;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
  --sidebar-accent: #5a8ab3;
}

/* 다크 모드 — 색상은 전부 위 변수로만 되어 있어서, 여기서 값만 다시 정의하면 화면 전체가 따라와요. */
[data-theme="dark"] {
  --bg: #10151c;
  --surface: #1a212c;
  --border: #2c3644;
  --text: #e7ebf0;
  --text-muted: #93a1b0;
  --accent: #6f97bb;
  --accent-hover: #5a8ab3;
  --pos: #3fbe84;
  --neg: #e3585b;
}

* { box-sizing: border-box; }

/* 아이폰을 가로로 돌려도 글씨를 제멋대로 키우지 않게 해요. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

h1, h2, h3, .sidebar .brand span, .auth-box h1 {
  font-weight: 800;
  letter-spacing: -0.03em;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- 사이드바 네비게이션 ----------
   메뉴가 늘어날수록 예전 가로 topnav는 줄바꿈이 지저분해져서, 왼쪽 고정 사이드바로
   바꿨어요. 좁은 화면(모바일)에서는 평소엔 숨어있다가 햄버거 버튼으로 슬라이드 인되는
   구조예요(.sidebar.open). */
.brand-logo { height: 40px; width: auto; display: block; }
/* 로고가 검정 글씨라 어두운 배경에선 안 보여서, 다크 모드일 때만 색을 반전시켜 하얗게 보이게 해요. */
[data-theme="dark"] .brand-logo { filter: invert(1); }
/* 사이드바는 테마와 상관없이 항상 어두운 배경이라 로고를 항상 반전시켜요. */
.sidebar .brand-logo { filter: invert(1); }

body.has-sidebar { padding-left: var(--sidebar-width); }

.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  z-index: 30;
  overflow-y: auto;
}
.sidebar .brand {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px; color: var(--sidebar-text); text-decoration: none;
  padding: 20px 16px; border-bottom: 1px solid var(--sidebar-border); white-space: nowrap;
}
.sidebar .brand span { font-size: 16px; }
.sidebar .brand:hover { text-decoration: none; opacity: 0.85; }
/* 로고 줄은 사이드바를 위아래로 스크롤해도 맨 위에 고정돼요(옆의 접기 버튼도 같이). */
.sidebar-head { position: sticky; top: 0; z-index: 3; background: var(--sidebar-bg); }

.sidebar-nav { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav a {
  color: var(--sidebar-text); font-size: 14px; padding: 9px 12px; border-radius: 8px;
  text-decoration: none; white-space: nowrap; font-weight: 500; letter-spacing: -0.01em;
}
.sidebar-nav a:hover { background: var(--sidebar-hover-bg); text-decoration: none; }
.sidebar-nav a.active { background: var(--sidebar-accent); color: #fff; font-weight: 700; }
.sidebar-group-label {
  font-size: 11px; color: var(--sidebar-text-muted); text-transform: uppercase; letter-spacing: .06em;
  margin: 14px 12px 4px;
}
.sidebar-group-label:first-child { margin-top: 4px; }
/* 그룹 접고 펴기 — 이름(버튼)을 누르면 그 아래 메뉴가 열리고 닫혀요. 접힌 그룹에 새 글이 있으면 이름 옆에 작은 점. */
.sidebar-group { display: flex; flex-direction: column; gap: 2px; }
.sidebar-group > .sidebar-group-label {
  display: flex; align-items: center; gap: 6px; width: calc(100% - 4px);
  background: none; border: none; border-radius: 6px; cursor: pointer; text-align: left;
  font-family: inherit; padding: 6px 8px; margin: 10px 2px 0;
}
.sidebar-group:first-child > .sidebar-group-label { margin-top: 4px; }
.sidebar-group > .sidebar-group-label:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text); }
.sidebar-group-caret { display: inline-block; width: 10px; font-size: 10px; transition: transform .15s ease; }
.sidebar-group.open .sidebar-group-caret { transform: rotate(90deg); }
.sidebar-group-links { display: none; flex-direction: column; gap: 2px; }
.sidebar-group.open .sidebar-group-links { display: flex; }
.sidebar-group-dot { display: none; width: 7px; height: 7px; border-radius: 50%; background: var(--neg, #e03131); margin-left: auto; }
.sidebar-group:not(.open):has(.badge-new:not([style*="display:none"]):not([style*="display: none"])) .sidebar-group-dot { display: inline-block; }

.sidebar-footer { border-top: 1px solid var(--sidebar-border); padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.sidebar-user { font-size: 13px; color: var(--sidebar-text-muted); padding: 0 4px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-footer button, .sidebar-footer .theme-toggle {
  background: none; border: 1px solid var(--sidebar-border); border-radius: 6px;
  padding: 8px 10px; font-size: 13px; cursor: pointer; color: var(--sidebar-text-muted);
  text-align: left; width: 100%;
}
.sidebar-footer button:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text); }

/* '내 계정' 카드 — 사진·이름·직급 한 줄 + 알림/테마 아이콘. 카드를 누르면 위로 계정 메뉴가 열려요. */
.sidebar-footer .account-card { position: relative; display: flex; align-items: center; gap: 4px; }
.sidebar-footer .account-main {
  flex: 1; min-width: 0; width: auto; display: flex; align-items: center; gap: 10px;
  border: none; padding: 6px; border-radius: 8px; text-align: left;
}
.account-avatar { flex-shrink: 0; display: flex; }
.account-avatar .avatar { width: 34px; height: 34px; }
.account-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.account-text b { color: var(--sidebar-text); font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-text span { color: var(--sidebar-text-muted); font-size: 12px; font-weight: 600; }
.sidebar-footer .account-icon {
  width: 34px; height: 34px; flex-shrink: 0; padding: 0; border: none; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.account-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 5;
  background: var(--sidebar-bg); border: 1px solid var(--sidebar-border); border-radius: 10px;
  padding: 6px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 -6px 20px rgba(0,0,0,0.35);
}
.account-menu[hidden] { display: none; }
.sidebar-footer .account-menu button { border: none; padding: 9px 10px; color: var(--sidebar-text); }
.account-menu-sep { height: 1px; background: var(--sidebar-border); margin: 4px 2px; }
.sidebar-footer .account-menu .account-logout { color: #f08c8c; }

.sidebar-toggle {
  display: none;
  position: fixed; top: 10px; left: 10px; z-index: 35;
  align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: var(--sidebar-bg); border: 1px solid var(--sidebar-border); border-radius: 8px;
  font-size: 18px; cursor: pointer; color: var(--sidebar-text);
}
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 29; }

/* 홈 화면에 설치한 앱 모드 전용 "뒤로" 버튼 — 메뉴(☰) 버튼 바로 옆, 좁은 화면에서만 보여요. */
.app-back-btn {
  display: none;
  position: fixed; top: 10px; left: 56px; z-index: 35;
  align-items: center; justify-content: center;
  height: 38px; padding: 0 12px;
  background: var(--sidebar-bg); border: 1px solid var(--sidebar-border); border-radius: 8px;
  font-size: 14px; font-weight: 600; cursor: pointer; color: var(--sidebar-text);
}

/* PC 사이드바 접기 — 사이드바 위 « 버튼(넓은 화면에서만 보여요)으로 접으면 본문이 화면을 다 쓰고,
   왼쪽 위 ☰ 버튼으로 다시 열어요. 접힌 상태는 <html class="sidebar-collapsed">. */
.sidebar-collapse-btn {
  position: absolute; top: 24px; right: 10px;
  width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--sidebar-border); border-radius: 6px;
  font-size: 16px; line-height: 1; cursor: pointer; color: var(--sidebar-text-muted);
}
.sidebar-collapse-btn:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text); }
@media (min-width: 769px) {
  html.sidebar-anim .sidebar { transition: transform .2s ease; }
  html.sidebar-anim body.has-sidebar { transition: padding-left .2s ease; }
  html.sidebar-collapsed body.has-sidebar { padding-left: 0; }
  html.sidebar-collapsed .sidebar { transform: translateX(-100%); }
  html.sidebar-collapsed .sidebar-toggle { display: flex; }
  html.sidebar-collapsed body.has-sidebar .page { padding-top: 64px; }
}

@media (max-width: 768px) {
  .sidebar-collapse-btn { display: none; }
  body.has-sidebar { padding-left: 0; }
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 24px rgba(0,0,0,0.2); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-toggle { display: flex; }
  .app-back-btn { display: flex; }
  .sidebar-backdrop.open { display: block; }
  body.has-sidebar .page { padding-top: 64px; }
}

.page { max-width: 1080px; margin: 0 auto; padding: 24px; }

/* 좁은 화면에서는 여백을 줄여서 답답하지 않게 해요. */
@media (max-width: 480px) {
  .page { padding: 14px; }
}

/* 대시보드 카드를 넓은 화면에서 2단으로 배치해서 스크롤을 줄여요. 좁은 화면에서는
   자동으로 1단으로 쌓여요. */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
.dashboard-grid > .card { margin-bottom: 0; }
.dashboard-grid > .card.span-2 { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .dashboard-grid { grid-template-columns: 1fr; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(20, 16, 8, 0.03), 0 4px 16px rgba(20, 16, 8, 0.03);
}
.card h2 { margin: 0 0 14px; font-size: 16px; }
.card h3 { margin: 0 0 10px; font-size: 14px; color: var(--text-muted); font-weight: 600; }

.filters {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: end;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 20px; margin-bottom: 18px;
}
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 12px; color: var(--text-muted); }
input, select, textarea, button {
  font-family: inherit; font-size: 14px;
}
/* 휴대폰: 입력칸 글씨가 16px보다 작으면 아이폰이 누를 때마다 화면을 확대해서, 좁은 화면에선 16px로 맞춰요. */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; } /* 화면마다 따로 적은 작은 글씨보다 우선 */
}
input, select, textarea {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* 기본 브라우저 파란 아웃라인 대신 브랜드 색으로 포커스 링을 줘서 어디를 클릭했는지 딱 보이게 해요. */
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
textarea {
  width: 100%; resize: vertical;
}
button.primary {
  background: var(--accent); color: #fff; border: none; border-radius: 5px;
  padding: 9px 16px; cursor: pointer; font-weight: 700; letter-spacing: -0.01em;
  transition: background .15s ease, box-shadow .15s ease;
}
button.primary:hover { background: var(--accent-hover); }
button.primary:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
button.secondary {
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 5px;
  padding: 9px 16px; cursor: pointer; font-weight: 600;
  transition: border-color .15s ease, background .15s ease;
}
button.secondary:hover { background: var(--bg); border-color: var(--accent); }

/* 표 행 끝의 버튼 묶음 — 자주 쓰는 버튼 하나 + "관리 ▾" 메뉴(나머지 작업). 메뉴는 표의 가로 스크롤에
   잘리지 않게 position: fixed로 띄우고, 위치는 admin.js의 openRowMenu가 버튼 기준으로 정해요. */
.row-actions { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.row-actions button.primary, .row-actions button.secondary { padding: 6px 12px; font-size: 13px; }
.row-menu {
  position: fixed; z-index: 50; min-width: 168px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 4px; display: flex; flex-direction: column; box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}
.row-menu[hidden] { display: none; }
.row-menu button {
  background: none; border: none; border-radius: 5px; padding: 8px 10px; text-align: left;
  font-size: 13px; color: var(--text); cursor: pointer;
}
.row-menu button:hover { background: var(--bg); }
.row-menu .row-menu-danger { color: var(--neg); }
.row-menu-sep { height: 1px; background: var(--border); margin: 4px 2px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
/* 열이 많은 표(관리 페이지 등)가 좁은 화면에서 페이지 전체를 밀어내지 않고, 표 안에서만
   가로 스크롤되게 감싸는 컨테이너예요. */
.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 480px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--text-muted); font-weight: 600; font-size: 12px; }
.muted { color: var(--text-muted); }
.empty { color: var(--text-muted); padding: 20px 0; text-align: center; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; }
.form-grid .field { width: 100%; }

.error-box {
  background: #fdecec; border: 1px solid #f3b6b6; color: var(--neg);
  border-radius: 6px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; display: none;
}
.notice-box {
  background: #eaf0f6; border: 1px solid #c7d6e2; color: var(--accent-hover);
  border-radius: 6px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px;
}
[data-theme="dark"] .notice-box { background: #1e2a36; border-color: #34495c; color: var(--accent); }

/* ---------- 로그인/인증 화면 — 사진을 화면 전체 배경으로 깔고
   로그인 박스가 그 위에 카드로 떠 있는 레이아웃 ----------
   대표님이 보내주신 캠페인 포스터 사진이 화면 전체를 채우고, 왼쪽엔
   작은 브랜드 마크, 오른쪽엔 로그인 카드가 그 위에 떠 있어요. */
.auth-shell { position: relative; }
/* 사진을 자르지 않고 가로 폭에 맞춰 원본 비율 그대로 보여주고, 화면보다
   사진이 길면 페이지를 스크롤해서 전체를 볼 수 있게 했어요. 로그인
   카드는 position:fixed로 화면에 고정해서, 스크롤해도 항상 같은
   자리에 떠 있어요. PC(가로로 넓은 화면)와 모바일은 서로 다른 사진을
   써요 — 기본값은 PC용 가로 사진(1672:940), 모바일은 아래 미디어
   쿼리에서 세로 사진(1024:1536)으로 바꿔요. */
.auth-hero {
  position: relative; z-index: 0;
  box-sizing: border-box;
  width: 100%; aspect-ratio: 1672 / 940;
  overflow: hidden;
  display: flex; align-items: center; justify-content: flex-start;
  /* 브랜드 마크(.auth-hero-content)는 이제 항상 숨겨져 있어서 padding이
     필요 없어요 — padding이 남아 있으면 박스 비율이 aspect-ratio랑
     안 맞아서 사진이 미세하게 잘려 보였어요. */
  padding: 0;
  background-color: #0b0d10;
  background-image:
    linear-gradient(180deg, rgba(6, 8, 11, 0.45) 0%, rgba(6, 8, 11, 0.1) 40%, rgba(6, 8, 11, 0.6) 100%),
    url('/img/auth-hero-bg-desktop.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
}
/* 사진 자체에 이미 큼직한 WE:ARK 워드마크와 문구가 있어서, DOM 쪽
   브랜드 마크(이름표/로고/태그라인)는 전부 숨기고 사진만 보여줘요. */
.auth-hero-content { display: none; }
.auth-hero-tag { display: none; }

.auth-panel {
  position: fixed; z-index: 2; top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%; max-width: 460px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  padding: 40px 24px;
}

/* 로그인/인증 화면은 사진 배경 위주라 라이트·다크 전환이 의미가 없어서
   다크모드 버튼 자체를 없앴어요 (버튼과 이벤트 리스너는 그대로 두고
   화면에서만 숨겨서, JS 쪽을 따로 건드릴 필요 없게 했어요). */
.auth-theme-toggle { display: none; }

@media (max-width: 860px) {
  .auth-panel { max-width: 100%; padding: 24px 16px; }
  /* 실제 휴대폰 화면은 사진(1024:1536)보다 세로로 더 길어서, 사진
     비율에 맞춰 폭만 채우면 아래쪽에 빈 여백이 크게 남았어요. 그래서
     모바일에서는 스크롤 방식을 버리고, 화면 전체를 채우도록(min-height:
     100vh + cover) 바꿨어요 — 사진이 약간 잘릴 수 있지만 여백 없이
     꽉 차 보여요. */
  .auth-hero {
    aspect-ratio: auto; min-height: 100vh;
    background-image:
      linear-gradient(180deg, rgba(6, 8, 11, 0.45) 0%, rgba(6, 8, 11, 0.1) 40%, rgba(6, 8, 11, 0.6) 100%),
      url('/img/auth-hero-bg-mobile.png');
  }
}

.auth-box {
  width: 100%; max-width: 320px; position: relative; z-index: 1;
  /* 배경 틴트와 블러를 완전히 없애서 뒤 사진이 그대로 또렷하게 비쳐요 —
     테두리/그림자만으로 카드 영역을 구분하고, 글자는 고정 밝은 색+
     그림자로 가독성을 잡았어요. */
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--border) 20%, transparent);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  border-radius: var(--radius); padding: 28px 26px;
}
/* 카드 안 "ADMIN LOGIN" 문구 자리에 대신 로고를 넣었어요 — 배경 사진은
   항상 어둡기 때문에 라이트 모드에서도 흰 로고가 잘 보이도록 반전해요. */
/* 원본 로고 파일이 정사각형이라 실제 글자 부분은 가운데 얇은 띠에만
   있어서, object-fit:cover로 위아래 여백을 잘라내고 글자만 꽉 차게
   키웠어요. */
.auth-box-logo {
  width: 260px; max-width: 78%; aspect-ratio: 2.6 / 1;
  object-fit: cover; object-position: center;
  margin: 0 auto 22px; display: block;
  filter: invert(1) brightness(1.15) drop-shadow(0 2px 10px rgba(0, 0, 0, .4));
}
/* 카드가 거의 투명해서 뒤 배경(항상 어두운 사진)이 그대로 비치기
   때문에, 라이트/다크 테마와 상관없이 글자는 밝은 고정 색으로 두고
   그림자를 줘서 가독성을 잡았어요. */
.auth-box h1 { font-size: 20px; margin: 0 0 4px; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .55); }
.auth-box p.sub { color: #d7dce2; font-size: 13px; margin: 0 0 20px; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.auth-box .field label { color: #cfd5db; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.auth-box .field { margin-bottom: 14px; }
.auth-box input { width: 100%; }
/* 로그인 박스 안 버튼만 파란 accent 대신 무광 스텐(스테인리스) 재질로 —
   반짝이는 그라데이션 없이 단일 톤 매트 컬러만 써서 광택감을 뺐어요.
   앱 전체의 button.primary는 그대로 두고 이 안에서만 덮어썼어요. */
.auth-box button.primary {
  width: 100%; margin-top: 8px;
  background: #6b7580;
  border: 1px solid rgba(255, 255, 255, .16);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.auth-box button.primary:hover { background: #757f8a; }
.auth-box button.primary:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .22);
}
.auth-checkbox-row {
  display: flex; align-items: center; gap: 7px; font-size: 13px; color: #cfd5db;
  margin: -8px 0 16px; text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
.auth-checkbox-row input[type="checkbox"] { width: auto; accent-color: var(--accent); }
.auth-links {
  text-align: center; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: 13px; color: #cfd5db; line-height: 1.8; text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
.auth-links a { color: #a9cbe8; }
/* "계정이 없으신가요?" 문구와 "가입 신청하기" 링크 사이 간격을
   기본 띄어쓰기보다 3배 정도 넓혔어요. */
#showSignup { margin-left: 12px; }

.badge {
  display: inline-block; font-size: 11px; padding: 3px 8px; border-radius: 4px;
  background: var(--bg); color: var(--text-muted); border: 1px solid var(--border);
  white-space: nowrap; font-weight: 600; letter-spacing: -0.01em;
}
.badge.good { background: #e7f6ef; color: var(--pos); border-color: #bfe8d4; }
.badge.warn { background: #fdecec; color: var(--neg); border-color: #f3b6b6; }
[data-theme="dark"] .badge.good { background: #123526; color: var(--pos); border-color: #1d5a3f; }
[data-theme="dark"] .badge.warn { background: #3b1414; color: var(--neg); border-color: #6b2323; }
/* 최근 회의록 중 가장 새 항목에 붙는 표시 — 진한 빨간 배경으로 눈에 확 띄게 해요. */
.badge-new { background: var(--neg); color: #fff; border-color: var(--neg); font-weight: 700; }

/* 마감 달력 — 요일 헤더 7칸 + 날짜 칸들. 좁은 화면에서도 날짜/상태점(일·주·월)이
   겹치지 않게 칸 높이를 여유있게 잡았어요. */
.closing-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.closing-cal-weekday { text-align: center; font-size: 12px; font-weight: 700; color: var(--text-muted); padding: 4px 0 8px; }
.closing-cal-day { min-height: 64px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 4px; cursor: pointer; }
.closing-cal-day.empty { border: none; cursor: default; }
.closing-cal-day:not(.empty):hover { background: var(--bg); }
.closing-cal-day.today { border-color: var(--accent); border-width: 2px; }
.closing-cal-day.selected { background: var(--accent); }
.closing-cal-day.selected .closing-cal-date, .closing-cal-day.selected .closing-dot { color: #fff; }
.closing-cal-date { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.closing-cal-dots { display: flex; gap: 4px; flex-wrap: wrap; }
.closing-dot { font-size: 10px; padding: 1px 4px; border-radius: 4px; background: var(--bg); color: var(--text-muted); }
.closing-dot.done { background: var(--pos); color: #fff; }
.closing-cal-day.selected .closing-dot.done { background: rgba(255,255,255,0.35); }
@media (max-width: 640px) { .closing-cal-day { min-height: 50px; } .closing-cal-date { font-size: 12px; } .closing-dot { font-size: 10px; } }

.closing-period-block { padding: 14px 0; border-top: 2px solid var(--border); }
.closing-period-block:first-child { border-top: none; padding-top: 0; }

/* KPI 대시보드 숫자 타일 — 좁은 화면에서는 2단, 넓은 화면에서는 4단으로 쌓여요. */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 720px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi-tile { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.kpi-tile-label { font-size: 12px; color: var(--text-muted); font-weight: 600; margin-bottom: 8px; }
.kpi-tile-value { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.kpi-tile-delta { font-size: 12px; margin-top: 6px; color: var(--text-muted); }
.kpi-tile-delta.up { color: var(--pos); }
.kpi-tile-delta.down { color: var(--neg); }
/* 디자이너 한 명을 선택했을 때, 그 지표에서 1~3등이면 카드 모서리에 겹쳐서 보여주는
   메달 배지예요. medal-slot은 비교 표 셀 앞에 붙는 자리로, 메달이 없어도 폭을 미리
   확보해둬서(20px) 숫자 시작 위치가 흔들리지 않게 해요. */
.kpi-card-medal { position: absolute; top: 12px; right: 14px; font-size: 17px; line-height: 1; }
.medal-slot { display: inline-block; width: 20px; text-align: left; vertical-align: middle; }
/* 1~3등 숫자 동그라미 — 1등은 채운 색, 2등은 테두리, 3등은 흐린 테두리 */
.kpi-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; font-size: 10px; font-weight: 700; line-height: 1;
  border: 1.5px solid var(--accent); color: var(--accent); background: transparent; vertical-align: middle;
}
.kpi-rank-1 { background: var(--accent); color: #fff; }
.kpi-rank-3 { border-color: var(--text-muted); color: var(--text-muted); }
.kpi-card-medal .kpi-rank { width: 20px; height: 20px; font-size: 11px; }
/* KPI 화면 상단의 하위 섹션 탭(월간 요약/고객 관리/메뉴·추이/디자이너 피드백/목표·리뷰 관리) —
   디자이너 선택(알약 모양) 탭과 헷갈리지 않게, 밑줄 방식의 별도 탭으로 구분했어요. */
.kpi-section-tabs { display: flex; gap: 4px 18px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.kpi-section-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 10px 2px; font-size: 14px; font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.kpi-section-tab:hover { color: var(--text); }
.kpi-section-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.kpi-designer-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.kpi-designer-tab {
  font-size: 13px; padding: 7px 13px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; font-weight: 500;
}
.kpi-designer-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.kpi-upload-zone {
  border: 1.5px dashed var(--border); border-radius: var(--radius); padding: 18px 20px;
  text-align: center; cursor: pointer; color: var(--text-muted); font-size: 13px; margin-bottom: 16px;
}
.kpi-upload-zone:hover { border-color: var(--accent); color: var(--text); }

/* 회의록 하단 확인(좋아요)/댓글/사진 버튼 — 셋 다 같은 모양으로, 눌렸거나(확인)
   개수가 1개 이상이면(댓글/사진) accent 색으로 진하게 칠해요. */
.like-btn, .comment-toggle-btn, .photo-toggle-btn {
  border: 1px solid var(--border); background: var(--bg); color: var(--text-muted);
  border-radius: 5px; padding: 4px 12px; font-size: 13px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.like-btn:hover, .comment-toggle-btn:hover, .photo-toggle-btn:hover { background: var(--surface); }
.like-btn.liked, .comment-toggle-btn.active, .photo-toggle-btn.active {
  border-color: #c7d6e2; color: var(--accent-hover); background: #eaf0f6; font-weight: 600;
}
[data-theme="dark"] .like-btn.liked,
[data-theme="dark"] .comment-toggle-btn.active,
[data-theme="dark"] .photo-toggle-btn.active {
  border-color: #34495c; background: #1e2a36;
}

/* 비품/재고 주문 — 품목마다 이름 + 수량 증감 버튼 */
.stepper-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 4px; border-bottom: 1px solid var(--border);
}
.stepper-row:last-child { border-bottom: none; }
.stepper-name { font-size: 14px; }
.stepper-controls { display: flex; align-items: center; gap: 10px; }
.stepper-btn {
  width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 16px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.stepper-btn:hover { background: var(--bg); }
.stepper-qty { min-width: 24px; text-align: center; font-weight: 600; font-size: 14px; }
.stepper-row.has-qty .stepper-qty { color: var(--accent); }

.feedback-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; overflow: hidden; }
.feedback-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 10px; }
.feedback-head .name { font-weight: 700; white-space: nowrap; }
.feedback-head .muted { white-space: nowrap; }
.feedback-line { font-size: 13px; margin-bottom: 8px; line-height: 1.6; white-space: pre-wrap; }

/* 좁은 화면에서는 카드 안쪽 뱃지/글씨 줄이 여러 줄로 자연스럽게 넘어가게 하고,
   글자 크기도 살짝 줄여서 답답하지 않게 해요. */
@media (max-width: 480px) {
  .feedback-card { padding: 12px; }
  .feedback-head { gap: 5px 6px; }
  .feedback-head .name { font-size: 14px; }
  .feedback-head .muted { font-size: 11px !important; width: 100%; order: 10; }
  .badge { font-size: 10px; padding: 2px 7px; }
}

.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-header button { padding: 4px 12px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-grid + .cal-grid { margin-top: 4px; }
.cal-weekday { text-align: center; font-size: 12px; color: var(--text-muted); padding: 4px 0; }
.cal-cell {
  min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 4px 2px; gap: 2px;
  border-radius: 6px; cursor: pointer; font-size: 13px; user-select: none;
}
.cal-cell:hover:not(.cal-empty):not(.cal-range-start):not(.cal-range-end) { background: var(--bg); }
.cal-cell.cal-empty { cursor: default; }
.cal-cell.cal-selected { background: var(--accent); color: #fff; font-weight: 600; }
.cal-cell.cal-today { box-shadow: inset 0 0 0 1px var(--accent); }

/* 날짜 검색용으로 접었다 펼 수 있는 작은 달력 — 기본 달력보다 칸을 훨씬 작게 줄여요. */
.cal-grid.cal-compact { gap: 2px; }
.cal-grid.cal-compact .cal-weekday { font-size: 10px; padding: 2px 0; }
.cal-grid.cal-compact .cal-cell { min-height: 34px; font-size: 11px; padding: 2px 1px; gap: 1px; }
.cal-grid.cal-compact .cal-cell-branch-tag { font-size: 9px; padding: 0 2px; }

/* 그 날짜에 회의록이 있으면 점 대신 지점 이름이 적힌 작은 박스를 바로 보여줘요 —
   눌러보지 않아도 어느 지점 건지 한눈에 알 수 있게. */
.cal-cell-branch-tag {
  font-size: 10px; line-height: 1.3; padding: 1px 4px; border-radius: 4px;
  background: var(--accent); color: #fff; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-cell.cal-selected .cal-cell-branch-tag { background: rgba(255, 255, 255, 0.3); color: #fff; }
.cal-cell.cal-has-minute.cal-selected::after { background: #fff; }

/* 달력 날짜에 커서를 올리거나 누르면 뜨는 "작성/수정" 선택 버튼 */
.day-action-popover {
  position: fixed;
  z-index: 50;
  display: none;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.day-action-popover button {
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.day-action-popover button:hover:not(:disabled) { background: var(--bg); }
.day-action-popover button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.day-action-popover button.primary:hover { background: var(--accent-hover); }
.day-action-popover button:disabled { opacity: 0.4; cursor: not-allowed; }

/* 출석 달력(대표 전용) — 날짜 칸마다 출석한 사람 이름표를 쌓아요. 이름이 많아도 칸 안에서
   줄바꿈되고, "전체 지점" 보기에서는 지점마다 색을 달리해요(att-b0~3). */
.att-day { cursor: default; }
.att-names { display: flex; flex-wrap: wrap; gap: 3px; }
.att-name { font-size: 11px; line-height: 1.3; padding: 1px 5px; border-radius: 4px; background: var(--pos); color: #fff; white-space: nowrap; }
.att-b0 { background: #34567a; }
.att-b1 { background: #5b8db8; }
.att-b2 { background: #6b7c8f; }
.att-b3 { background: #8fa7bf; }
@media (max-width: 640px) { .att-name { font-size: 10px; padding: 1px 3px; } }

/* 개별미팅 작성 — 왼쪽 지난 미팅(참고용) / 오른쪽 이번 미팅. 좁은 화면에선 지난 미팅이 위로. */
.im-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; align-items: stretch; }
.im-prev { display: flex; flex-direction: column; min-width: 0; }
.im-prev-body { flex: 1; min-height: 180px; max-height: 420px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 1.6; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 6px; background: var(--bg); }
.im-prev-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; font-weight: 600; }
.im-cur textarea { height: 100%; min-height: 180px; }
@media (max-width: 860px) { .im-compare { grid-template-columns: 1fr; } .im-prev-body { max-height: 260px; } }

/* 파트너 교육 진도표 — 파트너 × 교육 항목. 칸을 누르면 그 기록들로 목록이 걸러져요. */
.pt-progress th, .pt-progress td { text-align: center; }
.pt-progress th:first-child, .pt-progress td:first-child { text-align: left; }
.pt-progress th { font-size: 11px; white-space: nowrap; }
.pt-cell { cursor: pointer; font-size: 16px; min-width: 56px; }
.pt-cell:hover { background: var(--bg); }
.pt-lv { background: var(--bg); font-size: 12px; color: var(--text); }
.pt-lv-start { border-left: 2px solid var(--border); }
.pt-head { max-width: 84px; white-space: normal; line-height: 1.3; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pt-progress td:nth-child(-n+3), .pt-progress thead tr:first-child th:nth-child(-n+3) { white-space: nowrap; }

/* 프로필 사진 — 동그랗게. 사진이 없으면 이름 첫 글자를 브랜드 색 원 안에 보여줘요. */
.avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); }
.avatar-empty { background: #34567a; color: #fff; font-weight: 700; }

/* "앱으로 설치하기" 안내 배너 — 로그인 후 페이지 맨 위. 좁은 화면에선 버튼이 아래 줄로 내려가요. */
.install-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid #34567a; border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; }
.install-banner img { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; }
.install-banner-text { flex: 1; min-width: 160px; display: flex; flex-direction: column; font-size: 14px; }
.install-banner-text span { font-size: 12px; color: var(--text-muted); }
.install-banner button { padding: 7px 14px; }
.install-step-num { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: #34567a; color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.install-share-icon { display: inline-block; border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; font-size: 12px; }

/* KPI 고객 관리 목록(VIP/이탈위험/완전이탈) 접고 펴기 — 기본 삼각형 대신 직접 그린 ▸를 써요(사파리용). */
.kpi-customer-section > summary::-webkit-details-marker { display: none; }

/* 파트너 교육 — 규칙 안내, 교육과정(레벨 → 항목 접고 펴기), 연습 할당량 막대, 연습일지 피드백 */
.pt-rules { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.7; color: var(--text-muted); }
.pt-st { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: var(--bg); color: var(--text); white-space: nowrap; }
.pt-st.good { background: #e7f6ef; color: var(--pos); }
.pt-st.warn { background: #fdecec; color: var(--neg); }
[data-theme="dark"] .pt-st.good { background: #123526; }
[data-theme="dark"] .pt-st.warn { background: #3b1414; }
.pt-quota { font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.pt-quota.full { color: var(--pos); font-weight: 600; }
.pt-level { margin-bottom: 14px; }
.pt-level-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 2px solid var(--border); margin-bottom: 6px; font-size: 14px; }
.pt-level-head .muted { font-size: 12px; }
.pt-course { border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; background: var(--surface); }
.pt-course-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px; cursor: pointer; font-size: 14px; }
.pt-course-head:hover { background: var(--bg); }
.pt-course-title { font-weight: 600; flex: 1; min-width: 160px; }
.pt-course-who { font-size: 12px; }
.pt-caret { width: 0; height: 0; border-left: 5px solid var(--text-muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.15s; flex-shrink: 0; }
.pt-course.open .pt-caret { transform: rotate(90deg); }
.pt-course-body { display: none; padding: 4px 12px 12px 25px; border-top: 1px dashed var(--border); }
.pt-course.open .pt-course-body { display: block; }
.pt-sec { margin-top: 10px; font-size: 13px; }
.pt-sec-title { font-weight: 700; font-size: 12px; color: var(--accent); margin-bottom: 4px; }
.pt-sessions { margin: 0; padding-left: 0; list-style: none; }
.pt-sessions li { margin-bottom: 6px; line-height: 1.5; }
.pt-sessions li .muted { font-size: 12px; }
.pt-test { margin: 0; padding-left: 18px; line-height: 1.6; }
.pt-req { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.pt-req > span:first-child { flex: 1; min-width: 150px; }
.pt-bar { width: 110px; height: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }
.pt-bar > span { display: block; height: 100%; background: var(--accent); }
.pt-bar > span.full { background: var(--pos); }
.pt-req-n { font-size: 12px; min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; }
.pt-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.pt-actions button { padding: 5px 10px; font-size: 13px; }
.pt-tabs { display: flex; gap: 4px; }
.pt-tab { background: none; border: 1px solid var(--border); border-radius: 5px; padding: 6px 12px; font-size: 14px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.pt-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.pt-links { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; margin: 4px 0; }
.pt-feedback { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 13px; }
.pt-fb { background: var(--bg); border-radius: 6px; padding: 6px 10px; margin-bottom: 6px; }
.pt-fb-form { display: flex; gap: 6px; align-items: flex-end; }
.pt-fb-form textarea { flex: 1; min-height: 0; }
.pt-fb-form button { flex-shrink: 0; padding: 6px 10px; }
.pt-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.pt-checks label { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-weight: 500; cursor: pointer; }
.pt-checks input { width: auto; margin: 0; }
.pt-edit-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.pt-edit-row input, .pt-edit-row select { min-width: 0; }
.pt-edit-row .ce-s-title { flex: 1; }
.pt-edit-row .ce-s-content { flex: 2; }
.pt-edit-row .ce-r-session { width: 150px; flex-shrink: 0; }
.pt-edit-row .ce-r-type { width: 100px; flex-shrink: 0; }
.pt-edit-row .ce-r-count { width: 70px; flex-shrink: 0; }
.pt-edit-row .ce-r-note { flex: 1; }
.pt-edit-row .ce-del { padding: 4px 8px; flex-shrink: 0; }
.pt-edit-no { font-size: 12px; font-weight: 600; color: var(--text-muted); width: 40px; flex-shrink: 0; }
.pt-partner-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--border); }
.pt-partner-row b { min-width: 80px; }
@media (max-width: 640px) {
  .pt-edit-row { flex-wrap: wrap; }
  .pt-edit-row .ce-s-content, .pt-edit-row .ce-r-note { flex-basis: 100%; }
  .pt-fb-form { flex-direction: column; align-items: stretch; }
  .pt-course-body { padding-left: 12px; }
}
.pt-test-edit { font-size: 12px; font-weight: 600; margin-left: 6px; }
.pt-test-form textarea { width: 100%; font-size: 13px; }

/* 첫 화면 로딩 — 짙은 스틸 블루 반투명 막 위로 로고에 빛줄기가 물결처럼 지나가요. 로고 PNG를 마스크로
   써서 로고 모양 안에서만 빛나요. .show가 붙기 전(처음 0.3초)엔 투명하고 클릭도 그대로 통과해요. */
.page-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: rgba(22, 34, 48, 0.88);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
}
.page-loader.show { opacity: 1; pointer-events: auto; }
.page-loader-logo {
  width: 220px; max-width: 60vw; aspect-ratio: 241 / 76;
  -webkit-mask: url(/img/logo-wide.png) center / contain no-repeat;
  mask: url(/img/logo-wide.png) center / contain no-repeat;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.35) 38%,
    #ffffff 46%, #bcd6ec 50%, #ffffff 54%,
    rgba(255, 255, 255, 0.35) 62%, rgba(255, 255, 255, 0.35) 100%);
  background-size: 250% 100%;
  animation: page-loader-wave 1.8s ease-in-out infinite;
}
@keyframes page-loader-wave {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}
.page-loader-msg { margin: 0; min-height: 1.4em; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.92); text-align: center; padding: 0 16px; word-break: keep-all; }
.page-loader-wait { display: block; margin-top: 4px; font-size: 12px; color: rgba(255, 255, 255, 0.6); }
@media (prefers-reduced-motion: reduce) {
  .page-loader-logo { animation-duration: 4s; }
}

/* 비품 주문 — 링크를 버튼처럼(구매하러 가기·문자로 보내기), 품목별 구매처 줄, 도매 주문서 줄 */
a.btn-link {
  display: inline-block; background: var(--surface); color: var(--accent); border: 1px solid var(--accent); border-radius: 5px;
  font-weight: 700; text-decoration: none; line-height: 1.4;
}
a.btn-link:hover { background: var(--bg); }
.supply-vendor-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.supply-vendor-row .supply-vendor-name { min-width: 140px; flex: 1 1 140px; }
.supply-vendor-row input[type="text"], .supply-vendor-row input[type="url"] { flex: 1 1 180px; width: auto; min-width: 0; }
/* 품목 관리 — 바꾼 줄 표시, 아래 '모두 저장' 막대(바뀐 게 있으면 화면 아래에 붙어 따라와요), 등록된 구매처 목록 */
.supply-vendor-row.is-dirty { box-shadow: inset 3px 0 0 var(--accent); padding-left: 10px; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.vendor-save-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 0 0; font-size: 13px; }
.vendor-save-bar.has-changes { position: sticky; bottom: 0; z-index: 5; background: var(--surface); border-top: 1px solid var(--border); padding: 10px 0; }
.vendor-summary-title { font-size: 14px; font-weight: 700; margin: 4px 0 8px; }
.vendor-summary-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-bottom: 14px; }
.vendor-chip { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 13px; min-width: 0; }
/* 관리 화면 오류 기록(11/7) — 같은 오류 한 줄, 펼치면 상세 */
.error-log-row { border-bottom: 1px solid var(--border); padding: 8px 0; }
.error-log-row summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.error-log-row summary b { word-break: break-all; }
.error-log-row .error-log-meta { margin-left: auto; font-size: 12px; }
.error-log-stack { font-size: 11px; line-height: 1.5; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; overflow-x: auto; white-space: pre; max-height: 240px; margin: 0; }
.vendor-chip .vendor-chip-sub { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.supply-wholesale { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; margin: 4px 0 8px; border-radius: 6px; background: var(--bg); }
/* 비품 주문 목록 접기 제목(미확인·확인된·반려된 주문) */
.order-fold { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; padding: 0; cursor: pointer; font-size: 16px; font-weight: 700; color: var(--text); text-align: left; }
.order-fold .order-fold-arrow { font-size: 13px; color: var(--text-muted); width: 14px; }
.order-fold .order-fold-count { font-size: 13px; font-weight: 600; }