/*
 * Tailwind 브라우저 빌드가 컴파일을 끝내기 전 한 프레임 동안 노출되는
 * 스타일 없는 화면(FOUC)을 막기 위한 최소 스타일.
 *
 * 반드시 @layer base 안에 둘 것.
 * 레이어 밖(unlayered)에 두면 Tailwind 유틸리티(@layer utilities)보다
 * 우선순위가 높아져서 h-8, h-full 같은 클래스가 먹지 않는다.
 */
@layer base {

  :root {
    --brand: #0b5fa5;
    --header-h: 68px;
  }

  * { box-sizing: border-box; }

  html {
    scroll-behavior: smooth;
    /* 앵커로 이동할 때 sticky 헤더에 제목이 가리지 않도록 */
    scroll-padding-top: var(--header-h);
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
    background: #fff;
    color: #334155;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
                 "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
    line-height: 1.7;
    word-break: keep-all; /* 한글 단어 중간에서 줄바꿈되지 않게 */
  }

  img { max-width: 100%; display: block; }

  /* <picture>가 레이아웃에서 사라지고 <img>가 부모의 직접 자식처럼 동작하게 한다.
     이게 없으면 picture가 inline 상자를 만들어 img의 h-full/object-cover가 무너진다. */
  picture { display: contents; }

  .site-header { height: var(--header-h); }

  /* 히어로가 컴파일 전에 높이 0으로 무너지지 않도록 */
  .hero-shell { min-height: 60vh; background: #0f172a; }

  /*
   * Material Symbols.
   * Google이 내려주는 .material-symbols-outlined 규칙은 레이어 밖이라
   * font-size:24px 가 Tailwind의 text-* 유틸리티를 이겨버린다.
   * 그래서 클래스명을 .msi 로 따로 두고 폰트 지정만 여기서 한다.
   * (Google 스타일시트는 @font-face 공급용으로만 쓴다)
   */
  .msi {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 1.5rem;   /* 기본값 — Tailwind text-* 로 덮어쓸 수 있다 */
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    direction: ltr;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    user-select: none;
  }

  /* 폼 허니팟 — 사람에게는 안 보이고 봇만 채운다 */
  .hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .01ms !important;
      transition-duration: .01ms !important;
    }
  }
}