/* ========================================================
   common.css — 디자인 시스템 v2
   - @font-face : Pretendard 9종 + DONGGUK UNIVERSITY
   - Reset
   - Design Tokens (:root)
   - Body / Base Typography
   ======================================================== */

/* ========================================================
   @font-face — Pretendard
   ======================================================== */

@font-face {
    font-family: "Pretendard";
    src: url("/fonts/Pretendard-Thin.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("/fonts/Pretendard-ExtraLight.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("/fonts/Pretendard-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("/fonts/Pretendard-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("/fonts/Pretendard-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("/fonts/Pretendard-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("/fonts/Pretendard-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("/fonts/Pretendard-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Pretendard";
    src: url("/fonts/Pretendard-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* --- DONGGUK UNIVERSITY (타이틀 전용, 한정 사용) --- */
@font-face {
    font-family: "DONGGUK UNIVERSITY";
    src: url("/fonts/DONGGUK%20UNIVERSITY.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ========================================================
   Reset
   ======================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote {
    margin: 0;
    padding: 0;
    font-weight: inherit;
    font-size: inherit;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    all: unset;
    cursor: pointer;
    font-family: inherit;
}

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

/* [hidden] 속성이 page CSS 의 display:flex/grid 등에 의해 무시되지 않도록 강제 */
[hidden] {
    display: none !important;
}

/* ========================================================
   Design Tokens
   ======================================================== */

:root {
    /* ---- Font Family ---- */
    --font-sans:  "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
    --font-title: "DONGGUK UNIVERSITY", var(--font-sans);

    /* ---- Accent · Primary (Orange, hsl 24 92% X%) ---- */
    --primary-50:  hsl(24, 92%, 97%);   /* #FFF5EE 배경 틴트, 눈치 추천 배경 */
    --primary-100: hsl(24, 92%, 90%);   /* #FFE0C7 호버 배경, 뱃지 배경 */
    --primary-200: hsl(24, 92%, 80%);   /* #FFC08A 비활성 보더, 칩, 블롭 */
    --primary-300: hsl(24, 92%, 70%);   /* #FFA050 보조 아이콘, 진행 바, 블롭 */
    --primary-400: hsl(24, 92%, 60%);   /* #FF8320 버튼 호버 */
    --primary-500: hsl(24, 92%, 47%);   /* #E8600A 기본 CTA · 활성 탭 · 선택 보더 */
    --primary-600: hsl(24, 92%, 40%);   /* #C44F08 버튼 프레스 */
    --primary-700: hsl(24, 92%, 30%);   /* #933C06 강조 텍스트, 가격 (WCAG AA) */
    --primary-800: hsl(24, 92%, 20%);   /* #622804 다크 강조 */
    --primary-900: hsl(24, 92%, 10%);   /* #311402 극강조 */

    /* ---- Accent · Secondary (Amber, hsl 54 85% X%) ---- */
    --secondary-50:  hsl(54, 85%, 95%); /* #FFFCE8 아바타 배경 틴트 */
    --secondary-100: hsl(54, 85%, 85%); /* #FFF5B3 아바타 말풍선 배경 */
    --secondary-500: hsl(54, 85%, 43%); /* #D4B30A 아바타 강조, 정맥인증 포인트 */
    --secondary-700: hsl(54, 85%, 28%); /* #877206 아바타 강조 텍스트 */

    /* ---- Neutral · Warm Grey (Hue ≈ 30) ---- */
    --neutral-0:   #FFFFFF;  /* 카드·모달 배경 */
    --neutral-50:  #FAF8F6;  /* 페이지 배경 */
    --neutral-100: #F0EDEA;  /* 섹션 배경, 입력 필드 */
    --neutral-200: #DDD9D5;  /* 구분선, 비활성 보더 */
    --neutral-300: #C2BBB5;  /* 플레이스홀더, 비활성 아이콘 */
    --neutral-400: #A19A93;  /* 캡션 텍스트 */
    --neutral-500: #847D76;  /* 보조 텍스트 */
    --neutral-600: #6B645E;  /* 본문 보조 */
    --neutral-700: #4D4742;  /* 본문 텍스트 */
    --neutral-800: #352F2B;  /* 제목 텍스트 */
    --neutral-900: #1E1915;  /* 최강조, 오버레이 */

    /* ---- Semantic (기능 전용, 아이콘·텍스트 병행 필수) ---- */
    --semantic-error:       #DC3545;
    --semantic-warning:     #F59E0B;
    --semantic-success:     #16A34A;
    --semantic-info:        #2563EB;
    --semantic-error-bg:    #FEF2F2;
    --semantic-warning-bg:  #FFFBEB;
    --semantic-success-bg:  #F0FDF4;
    --semantic-info-bg:     #EFF6FF;

    /* ---- Contextual · Background ---- */
    --color-bg-page:    var(--neutral-50);
    --color-bg-card:    var(--neutral-0);
    --color-bg-input:   var(--neutral-100);
    --color-bg-overlay: rgba(30, 25, 21, 0.4);

    /* ---- Contextual · Text ---- */
    --color-text-heading:   var(--neutral-800);
    --color-text-body:      var(--neutral-700);
    --color-text-secondary: var(--neutral-500);
    --color-text-disabled:  var(--neutral-300);
    --color-text-inverse:   var(--neutral-0);
    --color-text-price:     var(--primary-700);

    /* ---- Contextual · Border ---- */
    --color-border-default: var(--neutral-200);
    --color-border-active:  var(--primary-500);

    /* ---- Contextual · Button ---- */
    --color-btn-primary:  var(--primary-500);
    --color-btn-hover:    var(--primary-400);
    --color-btn-press:    var(--primary-600);
    --color-btn-disabled: var(--neutral-200);

    /* ---- Contextual · Special ---- */
    --color-cart-badge:    var(--semantic-error);
    --color-sold-out:      var(--neutral-400);
    --color-nunchi-bg:     var(--primary-50);
    --color-nunchi-border: var(--primary-300);
    --color-focus:         var(--primary-500);

    /* ---- Glassmorphism ---- */
    --glass-bg:       rgba(255, 255, 255, 0.55);
    --glass-bg-heavy: rgba(255, 255, 255, 0.75);
    --glass-border:   rgba(255, 255, 255, 0.7);
    --glass-shadow:   0 8px 32px rgba(30, 25, 21, 0.08);
    --glass-blur:     blur(20px);

    /* ---- Shadow ---- */
    --shadow-sm: 0 2px 8px  rgba(30, 25, 21, 0.06);
    --shadow-md: 0 4px 16px rgba(30, 25, 21, 0.10);
    --shadow-lg: 0 8px 32px rgba(30, 25, 21, 0.15);

    /* ---- Layout (720 × 1280 키오스크 기준, 설계서 1080 × 2/3) ---- */
    --screen-width:   720px;
    --screen-height:  1280px;
    --pad-top:        53px;    /* 설계서 80 */
    --pad-side:       27px;    /* 설계서 40 */
    --pad-footer:     67px;    /* 설계서 100 */
    --touch-min:      53px;    /* 설계서 80+ */
    --btn-height:     53px;    /* 설계서 80 */
    --btn-radius:     11px;    /* 설계서 16 */
    --card-radius:    13px;    /* 설계서 20 */

    /* ---- Motion ---- */
    --ease-out:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-bounce:   cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --duration-fast: 200ms;
    --duration-base: 350ms;
    --duration-slow: 600ms;
}

/* ========================================================
   Body & Base Typography
   ======================================================== */

body {
    font-family: var(--font-sans);
    font-weight: 400;
    color: var(--color-text-body);
    background-color: var(--color-bg-page);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* ========================================================
   데스크톱 미리보기 프레임
   - 실제 키오스크(뷰포트 720×1280) 에서는 아무 효과 없음
   - 그보다 큰 창(개발용 데스크톱 브라우저)에서만
     body 를 플렉스 센터링하고 어두운 배경을 깔아
     .page-bg(720×1280) 가 키오스크 프레임처럼 보이게 함
   ======================================================== */

@media (min-width: 800px) {
    html,
    body {
        min-height: 100vh;
        height: auto;
        background: #1E1915;            /* neutral-900 하드값 (페이지 배경과 분리) */
    }
    body {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 24px 0;
    }
    .page-bg {
        flex-shrink: 0;
        border-radius: 28px;
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
    }
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-heading);
    font-weight: 700;
    line-height: 1.3;
}

button:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================================
   접근성 — prefers-reduced-motion
   모션 민감 사용자를 위해 모든 transition/animation 비활성화.
   0.01ms (0 이 아닌) 으로 설정해 animationend 이벤트는 정상 발화.
   ======================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}