@import "tailwindcss";
@import "@o2o/shared/styles/base.css";
/* 시안 토큰·유틸(타이포·.shell·.h2·.panel·슬라이더)은 캔버스와 한 파일을 쓴다. */
@import "@o2o/shared/styles/site.css";

/* 발행 사이트의 디자인 토큰. */
:root {
  --tpl-primary: #18181b;
  --tpl-secondary: #52525b;
  --tpl-bg: #ffffff;
  --tpl-card: #fafafa;
  --tpl-text: #09090b;
  --tpl-accent: #2563eb;
  --tpl-surface: #ffffff;
  --tpl-surface-alt: #f5f5f4;
  --tpl-inverse: #1c1917;
  --tpl-border: #e7e5e4;

  /* 생김새 폴백 = '심플' 템플릿(admin `industryData.ts` 의 LOOK.simple). */
  --tpl-font-heading: 'Pretendard Variable', 'Noto Sans KR', system-ui, sans-serif;
  --tpl-font-body: 'Pretendard Variable', 'Noto Sans KR', system-ui, sans-serif;
  --tpl-radius: 0.75rem;
  --tpl-border-width: 1px;
  --tpl-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
  --tpl-heading-tracking: -0.02em;
  --tpl-heading-weight: 700;
  --tpl-section-space: 4rem;
}

@theme inline {
  --color-brand: var(--tpl-primary);
  --color-brand-soft: var(--tpl-secondary);
  --color-surface: var(--tpl-bg);
  --color-surface-alt: var(--tpl-card);
  --color-ink: var(--tpl-text);
  --color-accent: var(--tpl-accent);

  --font-sans: 'Pretendard Variable', 'Noto Sans KR', system-ui, sans-serif;
  --font-serif: 'Noto Serif KR', 'Batang', 'Times New Roman', serif;

  --color-line: color-mix(in oklab, currentColor 14%, transparent);
  --color-line-soft: color-mix(in oklab, currentColor 8%, transparent);
  /* 본문 보조 글자. */
  --color-muted: color-mix(in oklab, currentColor 96%, transparent);

  /* 모서리는 템플릿이 정한 값 하나에서 **비율로** 펼친다. */
  --radius-sm: calc(var(--tpl-radius, 0.75rem) * 0.4);
  --radius-md: calc(var(--tpl-radius, 0.75rem) * 0.7);
  --radius-lg: var(--tpl-radius, 0.75rem);
  --radius-xl: calc(var(--tpl-radius, 0.75rem) * 1.35);
  --radius-2xl: calc(var(--tpl-radius, 0.75rem) * 1.7);
  --radius-3xl: calc(var(--tpl-radius, 0.75rem) * 2.2);
}

html {
  scroll-behavior: smooth;
  /* 고정 헤더에 앵커가 가리지 않게. */
  scroll-padding-top: 5.5rem;
}

body {
  background-color: var(--color-surface);
  background-image: var(--tpl-texture, none);
  color: var(--color-ink);
  /* 본문 서체도 템플릿이 정한다(theme.look → seo/head.ts). */
  font-family: var(--tpl-font-body, var(--font-sans));
  font-size: var(--fs-body);
  font-weight: 450;
  line-height: 1.7;
  font-feature-settings: "tnum" 1;
  /* 하단 고정 탭(모바일)에 마지막 섹션이 가리지 않게. */
  padding-bottom: env(safe-area-inset-bottom);
}

/* 키보드 사용자에게만 보이는 초점 테두리. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@keyframes w4-note-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.w4-note-fade { animation: w4-note-fade 0.4s ease; }
@media (prefers-reduced-motion: reduce) {
  .w4-note-fade { animation: none; }
}