/* ============================================================
   스마일캠프 전시회 — 디자인 토큰
   css/tokens.css
   모든 화면은 이 파일을 가장 먼저 불러온다.
   ============================================================ */

/* ---------- 웹폰트 ---------- */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.css");

@font-face {
  font-family: "GmarketSans";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "GmarketSans";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}


:root {

  /* ==========================================================
     1. 브랜드 — 보라
     규칙: 채움 보라는 "학생이 할 수 있는 것"에만 쓴다.
           한 화면에 채움 버튼은 하나. 배지·상태·정보에는 쓰지 않는다.
     ========================================================== */
  --brand:            #7C4DFF;   /* 주 CTA 채움 */
  --brand-hover:      #6B3AF0;
  --brand-active:     #5B2BD6;
  --brand-tint:       #F3EFFF;   /* 배경용 — 가장 옅게. Hero */
  --brand-soft:       #E3D8FF;   /* 신호용 — 미읽음 알림, 응원 누른 상태 */
  --brand-ink:        #FFFFFF;   /* 채움 보라 위 글자 */
  --brand-soft-ink:   #4A2AA8;   /* 옅은 보라 위 글자 */

  /* 오프닝 화면 전용 — 문·빛·픽셀 */
  --door:             #6B5CE7;
  --door-dark:        #4B3FB8;
  --door-light:       #8B7BF5;
  --stage:            #241B5C;   /* 문 밖 어두운 벽 */
  --glow:             #FFF6D8;   /* 문틈에서 새는 빛 */

  /* 강조색 — 제목 글자, 픽셀 장식에만. UI 버튼에는 쓰지 않는다. */
  --pop-pink:         #FF6BAA;
  --pop-yellow:       #FFC53D;
  --pop-green:        #3FCF7F;
  --pop-blue:         #3FB8F5;


  /* ==========================================================
     2. 중립 — 글자와 면
     따뜻한 베이지에서 차가운 라벤더로 옮겼다.
     보라 브랜드와 같은 계열이라야 화면이 하나로 보인다.
     ========================================================== */
  --ink:              #1F1B3D;   /* 제목, 본문 */
  --ink-2:            #6A6591;   /* 보조 정보, 제작자, 날짜 */
  --ink-3:            #9C97BE;   /* placeholder, 비활성 */

  --paper:            #F6F4FF;   /* 페이지 배경 */
  --card:             #FFFFFF;   /* 카드, 입력창 */
  --card-sub:         #F4F1FE;   /* 살짝 눌린 면 */

  --line:             #E8E3F8;   /* 기본 경계선 */
  --line-strong:      #D3CBEF;   /* 강조 경계선 */


  /* ==========================================================
     3. 주제 태그 배지 — 6종
     채도를 올리되 글자는 진하게 유지해 읽기를 지킨다.
     ========================================================== */
  --type-game-bg:       #EDE7FF;
  --type-game-ink:      #5433C7;

  --type-homepage-bg:   #E2F1FE;
  --type-homepage-ink:  #10609E;

  --type-quiz-bg:       #FFE6F0;
  --type-quiz-ink:      #B32064;

  --type-story-bg:      #DFF6E9;
  --type-story-ink:     #14724A;

  --type-tool-bg:       #E0F5F4;
  --type-tool-ink:      #14646A;

  --type-art-bg:        #FFF0D9;
  --type-art-ink:       #8A5A12;


  /* ==========================================================
     4. 상태 — 검토 중 / 반려
     보라와 겹치지 않도록 무채색에 가깝게 둔다.
     ========================================================== */
  --state-pending-bg:   #EAE7F5;
  --state-pending-ink:  #5C5878;

  --state-reject-bg:    #FDE8EC;
  --state-reject-ink:   #A82244;

  --state-live-ink:     #14724A;   /* 공개 상태 표시용 점 */


  /* ==========================================================
     5. 타이포그래피
     ========================================================== */
  --font-display: "GmarketSans", "Pretendard", sans-serif;
  --font-body:    "Pretendard", -apple-system, sans-serif;

  --fs-hero:      32px;   /* Hero 인사 문구 */
  --fs-title:     28px;   /* 페이지 제목 */
  --fs-section:   24px;   /* 섹션 제목 */
  --fs-detail:    32px;   /* 작품 상세 제목 */
  --fs-card:      17px;   /* 카드 제목 */
  --fs-body:      16px;   /* 본문 */
  --fs-meta:      13px;   /* 제작자, 날짜, 응원 수 */
  --fs-badge:     12px;   /* 배지 */

  --lh-tight:     1.3;
  --lh-body:      1.7;


  /* ==========================================================
     6. 간격 · 모서리
     ========================================================== */
  --gap-xs:   8px;
  --gap-sm:   12px;
  --gap-md:   20px;
  --gap-lg:   32px;
  --gap-xl:   64px;   /* 섹션 사이 */

  --r-badge:   4px;
  --r-btn:     8px;
  --r-card:   16px;
  --r-chip:   16px;
  --r-pill:   32px;   /* Hero 메인 버튼 */


  /* ==========================================================
     7. 레이아웃
     ========================================================== */
  --w-page:      1200px;
  --w-main:       800px;
  --w-side:       320px;
  --h-header:      64px;
  --h-tabbar:      64px;   /* 모바일 하단 */


  /* ==========================================================
     8. 모션
     ========================================================== */
  --dur:      160ms;
  --ease:     cubic-bezier(0.2, 0, 0, 1);
}


/* ============================================================
   접근성 — 동작 최소화 설정 존중
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}