/* ============================================================
   GILPOS — 화면 골격

   ★ 창은 안 움직이고 본문만 스크롤한다.
     사이드바와 위쪽 띠가 늘 붙어 있어야 지금 어디 있는지 안 헷갈린다.
     (큰 회사 업무 화면이 거의 다 이 모양이다)
   ============================================================ */

.app {
  display: flex;
  height: 100vh;
  overflow: hidden;          /* 창 자체는 안 움직인다 */
}

/* ================= 사이드바 ================= */
.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: #F4F8FC;                        /* 본문과 살짝 달리해 칸을 가른다 */
  border-right: 1.5px solid #C6D8EA;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--header-height);
  padding: 0 var(--space-5);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
/* ⚠ .sidebar__shop · .sidebar__co 규칙을 지웠다 (2026-09-04).
     사이드바에 매장 이름을 적던 시절 것인데, 2026-08-23 사장님 지시로
     **매장 이름은 오른쪽 위 고르개 한 곳에만** 두기로 했다 (app.html 에도 그렇게 적혀 있다).
     css 만 남아 「지금 보는 매장이 앞, 상호는 그 밑에」 라고 딴 말을 하고 있었다. */
.sidebar__nav { padding: var(--space-3); display: flex; flex-direction: column; gap: 2px; }
.sidebar__foot {
  margin-top: auto;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  line-height: 1.6;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
}
.nav-item__icon { width: 20px; text-align: center; flex-shrink: 0; }
.nav-item:hover { background: var(--color-bg-hover); }
.nav-item.is-active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}
/* 지금 보는 곳을 왼쪽 막대로도 알려 준다 — 색만으로는 못 알아보는 사람이 있다 */
.nav-item.is-active::before {
  content: "";
  position: absolute; left: 0;
  top: 20%; bottom: 20%; width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--color-primary);
}

/* ================= 본문 ================= */
/* ★ 본문 바닥을 한 톤 내린다 (2026-08-24) — 흰 카드가 흰 바탕에 얹혀 안 갈려 보였다 */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
        background: var(--color-canvas); }

.topbar {
  height: var(--header-height);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  background: var(--color-bg);
  border-bottom: 1.5px solid #C6D8EA;
}
.topbar__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__meta {
  display: flex; align-items: center; gap: var(--space-3);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.content {
  flex: 1;
  overflow-y: auto;              /* ★ 여기만 움직인다 */
  padding: var(--space-6);
  max-width: var(--content-max-width);
  width: 100%;
}
/* ★ .page-title 규칙을 지웠다 (2026-09-04) — 화면 안 제목은 2026-08-23 에 뺐다.
     제목은 위쪽 띠(#top-title) 한 곳에만 있다. 붙는 자리가 하나도 없었다. */

/* ================= 그리드 ================= */
.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
/* ★★ 왼쪽(고객 등록)은 **580px 못박기**, 오른쪽(고객 조회)이 남는 자리를 다 쓴다
     (사장님 확정 2026-08-30 · 3차 인수인계 갱신판).
   ★ 3 : 9 도 1 : 1 도 폐기했다. **비율로 하면 모니터가 넓어질수록 등록 칸까지 같이 커진다.**
     등록 칸은 연락처·차량번호·주행km 를 적는 자리라 넓어질 까닭이 없다.
     580 이면 칸 하나가 260px 남짓(580 − 테두리 3 − 안쪽 여백 40 − 칸 사이 14, 나누기 2) 이다.
   ★★ 그런데 **그냥 `580px 1fr` 로 두면 안 된다.** 창을 1100~1250px 로 줄이면 왼쪽은
     580 에 붙박여 있고 오른쪽만 200px 대로 짜부러진다 (아래 한 줄로 펴지기 직전 구간).
     그래서 — **오른쪽이 440px 아래로 내려가려 하면 그때부터 왼쪽이 양보한다.**
     넓은 화면에서는 언제나 580 이므로 「넓어져도 안 커진다」 는 그대로다.
   ★ 두 카드가 같은 눈금(머리띠 56 · 안쪽 여백 20 · 라벨 22 · 칸 44 · 줄 16 · 칸 사이 14)을
     쓰므로 왼쪽 「연락처 / 차량 번호」 줄과 오른쪽 「차량번호 / 연락처」 줄이 같은 높이에 선다.
     그 눈금은 sale.css 에 모아 두었다 — 여기서는 폭만 정한다.
   ★ 오른쪽은 minmax(0, 1fr) 이어야 한다. 그냥 1fr 로 두면 안쪽 격자의 최소 폭이 칸을 밀어내
     카드가 밖으로 삐져나온다 (screens.css 의 #scr-sale 규칙과 짝이다) */
.grid--sale {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: min(580px, calc(100% - var(--space-6) - 440px)) minmax(0, 1fr);
}
/* 1100px 아래에서는 좌우로 놓을 자리가 아니다 — 위아래로 편다 */
@media (max-width: 1100px) { .grid--sale { grid-template-columns: 1fr; } }

/* ================= 초점 (키보드로 다니는 사람) ================= */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-toast);
  background: var(--color-primary); color: #fff;
  padding: var(--space-3) var(--space-4); border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

/* ================= 반응형 ================= */
@media (max-width: 1200px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  :root { --sidebar-width: 200px; }
  /* ★ 사이드바가 좁아지는 만큼 발치 좌우 여백도 줄인다 (2026-08-31) —
       그래야 메일 주소가 한 줄에 들어가 「누구로 들어와 있나」 가 두 줄로 안 접힌다 */
  .sidebar__foot { padding-left: var(--space-3); padding-right: var(--space-3); }
}
@media (max-width: 820px) {
  /* 좁은 화면 — 사이드바를 아래 띠로 내린다. 손가락으로 누르기 쉬운 자리다 */
  .app { flex-direction: column; }
  .sidebar {
    width: 100%; height: auto; order: 2;
    border-right: none; border-top: 1px solid var(--color-border);
    overflow: visible;
  }
  .sidebar__brand, .sidebar__foot { display: none; }
  .sidebar__nav {
    flex-direction: row; padding: var(--space-2);
    gap: var(--space-1); overflow-x: auto;
  }
  .nav-item {
    flex-direction: column; gap: 2px; flex: 1 0 auto;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs); text-align: center;
    white-space: nowrap;
  }
  .nav-item.is-active::before { display: none; }
  .main { order: 1; flex: 1; }
  .grid--2, .grid--3, .grid--4, .grid--sale { grid-template-columns: 1fr; }
  .content { padding: var(--space-4); }
  .topbar { padding: 0 var(--space-4); }
  .topbar__meta { display: none; }
}

/* ================= 인쇄 ================= */
@media print {
  .app { display: block; height: auto; overflow: visible; }
  .sidebar, .topbar, .toast-area, .skip-link { display: none !important; }
  .main, .content { display: block; overflow: visible; height: auto; padding: 0; }
  .screen { display: none; }
  .screen.is-active { display: block; }
  .card {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .btn, .chip, .cart__x, .tabs, .ac__list { display: none !important; }
  .table th { background: #f3f3f3 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .table-wrap { overflow: visible !important; }
  body { background: #fff; }
  a[href]::after { content: ""; }   /* 주소를 뒤에 붙이지 않는다 */
}

/* ★ .grid--settle · .grid--allhome 규칙을 지웠다 (2026-09-04).
     ㆍ.grid--settle — 매출정산을 2026-08-27 에 다시 짜면서 .sesplit · .cols3 로 바뀌었다.
     ㆍ.grid--allhome — 「한눈에」 화면 자체가 2026-08-27 에 걷혔다.
     둘 다 붙는 자리가 하나도 없다 (진짜 화면에서 세어 봤다).
   ⚠ 격자 이름을 지을 때는 **css 에 반드시 함께 적는다** — 이름만 있고 규칙이 없으면
     칸이 한 줄로 흘러내린다. 거꾸로 규칙만 남으면 다음 사람이 못 지운다. */

/* ── 수정2 (2026-09-12 · 현관 3차) — 사이드바 로고도 색만 6번으로 ──
     크기·자리는 그대로 둔다. 현관·관리자·약관·가입과 **같은 색**이다. */
.sidebar__brand .brandword { font-weight: 900; letter-spacing: -.04em; }
.sidebar__brand .brandword b {
  font-weight: 900;
  background: linear-gradient(90deg,#5EC8F2,#8F7FFF 50%,#F27FC0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}