/* store2 — PC(대화면) 레이아웃. 모바일/인증화면은 그대로, 로그인 후 메인앱(.app:has(.tabbar))만 전환.
 * 하단 탭바 → 좌측 사이드바, 콘텐츠 넓게, 4열 KPI, 바텀시트 → 중앙 모달.
 */
@media (min-width: 960px) {
  .app:has(.tabbar) {
    max-width: 1180px;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-areas: "side header" "side main";
    column-gap: var(--sp-6);
    box-shadow: var(--sh-md);
    border-inline: 1px solid var(--c-line);
    background: var(--c-surface);
  }

  /* 헤더 */
  .app:has(.tabbar) .app-header {
    grid-area: header;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-line);
  }

  /* 본문: 읽기 좋은 폭으로 중앙 정렬 */
  .app:has(.tabbar) .page {
    grid-area: main;
    background: var(--c-bg);
    width: 100%;
    max-width: 900px;
    margin-inline: auto;
    padding: var(--sp-6) var(--sp-6) var(--sp-8);
  }

  /* 하단 탭바 → 좌측 세로 사이드바 */
  .app:has(.tabbar) .tabbar {
    grid-area: side;
    position: sticky;
    top: 0; left: auto; bottom: auto;
    transform: none;
    width: 240px; max-width: none;
    height: 100dvh;
    display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-1);
    padding: var(--sp-5) var(--sp-3);
    background: var(--c-surface);
    border-top: none; border-right: 1px solid var(--c-line);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .app:has(.tabbar) .tabbar::before {
    content: "store2";
    font-size: 22px; font-weight: 700; color: var(--c-brand);
    padding: var(--sp-2) var(--sp-3) var(--sp-5);
  }
  .app:has(.tabbar) .tabbar__item {
    flex-direction: row; justify-content: flex-start; gap: var(--sp-3);
    width: 100%; height: 46px; padding-inline: var(--sp-3);
    border-radius: var(--r-md);
    font-size: var(--fs-body); font-weight: var(--fw-medium);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .app:has(.tabbar) .tabbar__item:hover { background: var(--c-surface-2); }
  .app:has(.tabbar) .tabbar__item.is-active { background: var(--c-brand-weak); color: var(--c-brand-ink); }
  .app:has(.tabbar) .tabbar__item svg,
  .app:has(.tabbar) .tabbar__icon { width: 22px; height: 22px; }
  /* 사이드바에선 '입력' 강조 동그라미 해제 → 일반 항목처럼 */
  .app:has(.tabbar) .tabbar__item--accent { margin-top: var(--sp-2); background: var(--c-brand); color: #fff; }
  .app:has(.tabbar) .tabbar__item--accent:hover { background: var(--c-brand-strong); }
  .app:has(.tabbar) .tabbar__item--accent .tabbar__icon {
    width: 22px; height: 22px; margin-top: 0;
    background: transparent; color: inherit; box-shadow: none; border-radius: 0;
  }

  /* KPI 4열, 히어로는 2칸 차지 */
  .app:has(.tabbar) .kpi-grid { grid-template-columns: repeat(4, 1fr); }
  .app:has(.tabbar) .kpi-grid .kpi--wide { grid-column: span 2; }

  /* FAB: 뷰포트 우하단 고정 */
  .app:has(.tabbar) .fab { right: var(--sp-7); bottom: var(--sp-7); }

  /* 바텀시트 → 중앙 모달 */
  .sheet {
    left: 50%; top: 50%; bottom: auto;
    transform: translate(-50%, -50%);
    width: 540px; max-width: calc(100vw - var(--sp-8));
    border-radius: var(--r-xl);
    max-height: 86dvh;
    animation: modal-in var(--dur) var(--ease);
  }
  .sheet__grab { display: none; }

  /* 차트는 너무 커지지 않게 */
  .app:has(.tabbar) .chart__canvas-wrap--square { max-width: 520px; margin-inline: auto; }

  /* 토스트: 데스크톱은 우하단 고정 */
  .toast-host { left: auto; right: var(--sp-5); bottom: var(--sp-5); max-width: 360px; align-items: flex-end; }
}

/* 초대형 화면에서 본문 살짝 더 */
@media (min-width: 1280px) {
  .app:has(.tabbar) .page { max-width: 980px; }
}