@charset "utf-8";
/* ==========================================================================
   우리의집 테마 — 디자인 토큰
   이 파일이 색을 정의하는 유일한 곳이다. 다른 CSS 는 var(--oh-*) 만 쓴다.
   다크모드는 [data-theme="dark"] 에서 같은 이름을 재정의하는 방식으로만 동작한다.
   prefers-color-scheme 은 쓰지 않는다 — theme.js 가 항상 확정값을 박아준다.
   ========================================================================== */

:root {
  /* ---- 브랜드 ---- */
  --oh-primary: #35C5F0;
  --oh-primary-hover: #17A2CC;
  --oh-primary-strong: #0A7FA3;   /* 흰 글자와 4.59:1 (WCAG AA) — 채움 CTA 전용 */
  --oh-on-primary: #FFFFFF;
  --oh-primary-weak: #E8F8FE;     /* 연한 배경 (선택 상태, 배지) */

  /* ---- 상태색 ---- */
  --oh-sale: #FF4B4B;
  --oh-sale-weak: #FFECEC;
  --oh-star: #FFC700;
  --oh-success: #17A96A;
  --oh-warning: #F59F00;
  --oh-danger: #E03131;
  --oh-info: #3B82F6;

  /* ---- 텍스트 ---- */
  --oh-text-1: #2F3438;
  --oh-text-2: #757575;
  --oh-text-3: #8B949C;   /* 흰 배경과 3.08:1 — 보조 UI 텍스트 하한 */
  --oh-text-inverse: #FFFFFF;
  /* 이미지·오버레이 위에 얹는 글자. 라이트/다크 어느 쪽에서도 사진 위이므로
     항상 밝은 색을 유지해야 한다. --oh-text-inverse 는 모드에 따라 뒤집히므로 쓰면 안 된다. */
  --oh-on-media: #FFFFFF;
  --oh-on-media-dim: rgba(255, 255, 255, .82);

  /* ---- 표면 ---- */
  --oh-bg: #FFFFFF;
  --oh-surface: #F7F9FA;
  --oh-surface-2: #EFF2F4;
  --oh-elevated: #FFFFFF;
  --oh-overlay: rgba(15, 20, 25, .55);
  --oh-skeleton: #EDF0F2;

  /* ---- 선 ---- */
  --oh-border: #EAEDEF;
  --oh-border-strong: #DBDFE3;
  --oh-divider: #F1F3F5;

  /* ---- 그림자 ---- */
  --oh-shadow-1: 0 1px 3px rgba(15, 20, 25, .06), 0 1px 2px rgba(15, 20, 25, .04);
  --oh-shadow-2: 0 4px 16px rgba(15, 20, 25, .10);
  --oh-shadow-3: 0 12px 40px rgba(15, 20, 25, .16);

  /* ---- 타이포 ---- */
  --oh-font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
                  'Malgun Gothic', 'Noto Sans KR', system-ui, sans-serif;
  --oh-font-num: 'Pretendard', ui-monospace, SFMono-Regular, Menlo, monospace;

  --oh-fs-11: 11px;
  --oh-fs-12: 12px;
  --oh-fs-13: 13px;
  --oh-fs-14: 14px;
  --oh-fs-15: 15px;
  --oh-fs-16: 16px;
  --oh-fs-18: 18px;
  --oh-fs-20: 20px;
  --oh-fs-24: 24px;
  --oh-fs-30: 30px;
  --oh-fs-36: 36px;

  --oh-lh-tight: 1.3;
  --oh-lh-base: 1.5;
  --oh-lh-loose: 1.75;

  --oh-fw-regular: 400;
  --oh-fw-medium: 500;
  --oh-fw-semibold: 600;
  --oh-fw-bold: 700;

  /* ---- 간격 ---- */
  --oh-sp-1: 4px;
  --oh-sp-2: 8px;
  --oh-sp-3: 12px;
  --oh-sp-4: 16px;
  --oh-sp-5: 20px;
  --oh-sp-6: 24px;
  --oh-sp-7: 32px;
  --oh-sp-8: 40px;
  --oh-sp-9: 48px;
  --oh-sp-10: 56px;
  --oh-sp-11: 64px;
  --oh-sp-12: 80px;

  /* ---- 라운드 ---- */
  --oh-r-xs: 2px;
  --oh-r-sm: 4px;
  --oh-r-md: 8px;
  --oh-r-lg: 12px;
  --oh-r-xl: 16px;
  --oh-r-full: 999px;

  /* ---- 레이아웃 ---- */
  --oh-container: 1256px;
  --oh-gutter: 24px;
  --oh-header-h: 64px;
  --oh-gnb-h: 48px;
  --oh-tabbar-h: 56px;

  /* ---- 모션 ---- */
  --oh-t-fast: 120ms cubic-bezier(.4, 0, .2, 1);
  --oh-t-base: 200ms cubic-bezier(.4, 0, .2, 1);
  --oh-t-slow: 320ms cubic-bezier(.4, 0, .2, 1);

  /* ---- z-index ---- */
  --oh-z-header: 100;
  --oh-z-drawer: 200;
  --oh-z-tabbar: 90;
  --oh-z-modal: 300;
  --oh-z-toast: 400;

  color-scheme: light;
}

[data-theme="dark"] {
  --oh-primary: #35C5F0;
  --oh-primary-hover: #5AD3F5;
  --oh-primary-strong: #35C5F0;   /* 다크에선 밝은 채움 + 어두운 글자 */
  --oh-on-primary: #0B1216;
  --oh-primary-weak: #12313C;

  --oh-sale: #FF6B6B;
  --oh-sale-weak: #3A1F22;
  --oh-star: #FFCE2B;
  --oh-success: #38D9A9;
  --oh-warning: #FFC078;
  --oh-danger: #FF8787;
  --oh-info: #74B0FF;

  --oh-text-1: #E9ECEF;
  --oh-text-2: #A8B0B8;
  --oh-text-3: #6C757D;
  --oh-text-inverse: #14161A;

  --oh-bg: #14161A;
  --oh-surface: #1C1F24;
  --oh-surface-2: #23272E;
  --oh-elevated: #23272E;
  --oh-overlay: rgba(0, 0, 0, .68);
  --oh-skeleton: #262A31;

  --oh-border: #2E3339;
  --oh-border-strong: #3C434B;
  --oh-divider: #23272E;

  --oh-shadow-1: 0 1px 3px rgba(0, 0, 0, .5);
  --oh-shadow-2: 0 4px 16px rgba(0, 0, 0, .55);
  --oh-shadow-3: 0 12px 40px rgba(0, 0, 0, .65);

  color-scheme: dark;
}

@media (max-width: 767px) {
  :root {
    --oh-gutter: 16px;
    --oh-header-h: 56px;
  }
}