@import "tailwindcss";
@import "tw-animate-css";

/* 디자인 토큰(색상·폰트·radius)은 shared 단일 소스에서 관리. site 와 공유 가능. */
@import "@o2o/shared/styles/tokens.css";
@import "@o2o/shared/styles/base.css";

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  transition: background-color 0.2s ease, color 0.2s ease;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
  html {
    @apply font-sans;
  }
}

/* 캔버스(발행 사이트 미리보기)는 관리자 토큰이 아니라 템플릿 색을 쓴다.
   .site-canvas 안쪽은 --tpl-* 변수로만 색을 잡는다 — 관리자 크롬 색이 새어 들어오지 않게. */
@layer components {
  .site-canvas {
    color-scheme: light;
    background-color: var(--tpl-bg, #ffffff);
    color: var(--tpl-text, #09090b);
    /* 본문 서체도 토큰이다. 변수가 없으면(빌더 캔버스 등) 지금까지처럼 관리자 본문 서체를 쓴다. */
    font-family: var(--tpl-font-body, var(--font-sans));
  }
  .site-canvas .serif-title {
    font-family: var(--tpl-font-heading, 'Noto Serif KR', 'Batang', 'Times New Roman', serif);
  }
  /* 캔버스 안의 '면'(카드·패널)과 테두리도 토큰을 따른다.
     ★ bg-white / bg-stone-* 이 캔버스 안에만 82곳 흩어져 있어 파일마다 고치는 대신 여기서 덮는다.
       폴백이 원래 Tailwind 값이라, --tpl-* 이 없는 곳에서는 지금까지와 완전히 동일하다.
     ★ 팔레트를 바꿔도 화면이 안 변하는 원인의 절반이 이 면들이었다(나머지 절반은 섹션 바탕). */
  .site-canvas .bg-white {
    background-color: var(--tpl-card, #ffffff);
  }
  .site-canvas .bg-stone-50 {
    background-color: var(--tpl-card, var(--color-stone-50));
  }
  .site-canvas .bg-stone-100 {
    background-color: var(--tpl-surface-alt, var(--color-stone-100));
  }
  /* 테두리는 팔레트 색을 그대로 쓰면 너무 세다 — 30% 만 섞는다. */
  .site-canvas .border-stone-200,
  .site-canvas .border-stone-300 {
    border-color: color-mix(in oklab, var(--tpl-border, var(--color-stone-200)) 30%, transparent);
  }

  /* serif-title 을 안 쓰는 제목도 제목 서체를 따르게 한다.
     ★ 폴백이 inherit 이라 --tpl-font-heading 이 없으면 예전과 똑같이 본문 서체를 그대로 물려받는다. */
  .site-canvas h1,
  .site-canvas h2,
  .site-canvas h3,
  .site-canvas h4 {
    font-family: var(--tpl-font-heading, inherit);
    letter-spacing: var(--tpl-heading-tracking, normal);
  }
  /* ★ 굵기는 폴백을 inherit 로 두지 않는다. 간판체(Gugi)는 굵기가 한 벌뿐이라 700 을 주면
     브라우저가 가짜 볼드를 씌워 획이 뭉갠다 — 템플릿이 400 을 지정할 수 있어야 한다. */
  .site-canvas :is(h1, h2, h3, h4).tpl-title {
    font-weight: var(--tpl-heading-weight, 700);
  }
  /* 카드·패널 테두리 두께도 템플릿이 정한다. 레트로는 2px 라야 인쇄물처럼 보인다. */
  .site-canvas .border {
    border-width: var(--tpl-border-width, 1px);
  }
}

/* 수집 진행바 shimmer — 0%(빈 트랙) 구간에서도 '진행 중'이 보이게 한다. */
@keyframes o2o-shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(500%); }
}
.o2o-progress-shimmer {
  animation: o2o-shimmer 1.8s ease-in-out infinite;
}

/* 노치/홈 인디케이터 회피 (viewport-fit=cover 와 짝).
   화면 맨 위/맨 아래에 붙는 바에만 붙인다 — 스크롤되는 본문에는 쓰지 않는다. */
@layer components {
  .safe-t { padding-top: env(safe-area-inset-top); }
  .safe-b { padding-bottom: env(safe-area-inset-bottom); }
}