/* ============================================================
   사진일기 (AM;ME) — Common Style Guide
   Concept     : Midnight Continuity
   Version     : design_v1
   Created     : 2026-06-01
   Spec        : ./디자인규칙.md
   Usage       : <link rel="stylesheet" href="styleguide.css">
                  (반드시 prototype <style> 블록 '다음'에 로드)
   ============================================================ */


/* ---------- 1. Font Imports ----------------------------------
   영문/숫자 → Kode Mono   |   한글 → Pretendard Variable
   font-family에서 Kode Mono 우선, 한글 글리프 없으면 Pretendard 폴백
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400;500;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');


/* ---------- 2. Design Tokens (CSS Variables) ----------------- */
:root{
  /* Backgrounds */
  --bg-main:           #F2F2F7;  /* Icy White  — 폰/스크린 배경        */
  --bg-card:           #FFFFFF;  /* White      — 카드, 리스트 항목     */
  --bg-sub:            #F0F0F5;  /* Pale Gray  — 프레임 프리뷰, 입력   */
  --bg-pill:           #EDEDF2;  /* Light Gray — pill 비활성 배경      */

  /* Foreground */
  --c-point:           #2E4453;  /* Deep Blue  — CTA, 활성 탭, 히어로  */
  --c-text:            #121212;  /* Midnight   — 메인 텍스트, 아이콘   */
  --c-text-sub:        #8E8E93;  /* Muted Gray — 보조 텍스트, 시간     */
  --c-edge:            #E5E5EA;  /* Soft Edge  — 보더, 구분선          */

  /* Frame Slot Colors (홈 프레임 만들기 미리보기) */
  --c-frame-strip:     #121212;  /* Strip 슬롯  */
  --c-frame-quad:      #2C2C2E;  /* Quad 슬롯   */
  --c-frame-classic:   #2E4453;  /* Classic 슬롯 (=Point) */

  /* Typography — Font Stacks */
  --font-en:           'Kode Mono', monospace;
  --font-kr:           'Pretendard Variable', Pretendard, sans-serif;
  --font-base:         'Kode Mono',
                       'Pretendard Variable', Pretendard,
                       -apple-system, BlinkMacSystemFont, system-ui,
                       'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Typography — Weights */
  --w-regular:         400;
  --w-medium:          500;
  --w-semibold:        600;
  --w-bold:            700;

  /* Typography — Letter Spacing (한글 가독성 보정) */
  --ls-tight:         -0.01em;

  /* Icon — 표시 사이즈 (실제 화면에 그려지는 px) */
  --icon-xs:          14px;   /* Statusbar (배터리/신호)              */
  --icon-sm:          18px;   /* Sheet row, sub-action               */
  --icon-md:          20px;   /* Header action (icon-btn 내부 SVG)   */
  --icon-lg:          24px;   /* Tab bar (홈/지도/앨범/마이)         */
  --icon-xl:          26px;   /* Tab bar 카메라 FAB                  */

  /* Icon — 디자인 기준 (사용자가 PNG export 시 기준 사이즈) */
  --icon-design-max:  44px;   /* PNG 원본 export 기준 (retina 대응) */

  /* Tappable target (최소 터치 영역) */
  --tap-min:          32px;   /* 헤더 아이콘 버튼 컨테이너 (icon-btn) */
  --tap-tab:          48px;   /* 탭바 기본 버튼 컨테이너 (tab-btn)   */
  --tap-tab-cam:      52px;   /* 탭바 카메라 컨테이너 (tab-cam)      */
}


/* ---------- 3. Base ------------------------------------------ */
*, *::before, *::after{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
}

body{
  font-family: var(--font-base);
  font-weight: var(--w-regular);
  color: var(--c-text);
  background: var(--bg-main);
  letter-spacing: var(--ls-tight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button, input, textarea, select{
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
}


/* ---------- 4. Utility Classes ------------------------------- */

/* Text color ----------------------------------------------- */
.text-main  { color: var(--c-text); }
.text-sub   { color: var(--c-text-sub); }
.text-point { color: var(--c-point); }
.text-white { color: #FFFFFF; }

/* Background ----------------------------------------------- */
.bg-main    { background: var(--bg-main); }
.bg-card    { background: var(--bg-card); }
.bg-sub     { background: var(--bg-sub); }
.bg-point   { background: var(--c-point); }

/* Border --------------------------------------------------- */
.bd         { border:        1px solid var(--c-edge); }
.bd-top     { border-top:    1px solid var(--c-edge); }
.bd-bottom  { border-bottom: 1px solid var(--c-edge); }

/* Font family ---------------------------------------------- */
.font-en    { font-family: var(--font-en); }
.font-kr    { font-family: var(--font-kr); }
.font-base  { font-family: var(--font-base); }

/* Font weight ---------------------------------------------- */
.w-400 { font-weight: var(--w-regular); }
.w-500 { font-weight: var(--w-medium); }
.w-600 { font-weight: var(--w-semibold); }
.w-700 { font-weight: var(--w-bold); }

/* Numeric --------------------------------------------------- */
/* 시간/카운트 같은 숫자가 흔들리지 않도록 동일 폭 적용 */
.tabular    { font-variant-numeric: tabular-nums; }

/* Frame slot helper (홈 프레임 카드 미리보기) ------------- */
.slot-strip   { background: var(--c-frame-strip); }
.slot-quad    { background: var(--c-frame-quad); }
.slot-classic { background: var(--c-frame-classic); }


/* ---------- 5. Notes ----------------------------------------
   · 본 파일은 prototype의 인라인 스타일을 '덮어쓰지 않습니다'.
     필요한 영역에 utility class 또는 var()로 직접 호출하세요.
     예) <div style="background:var(--bg-card);color:var(--c-text)">
   · prototype 기능은 그대로 고정 — 본 파일은 토큰·폰트만 주입.
   · 한·영 자동 폴백 예시:
       "오늘 12:30 AM"
        ┗ 오늘     → Pretendard Variable
        ┗ 12:30 AM → Kode Mono
   ------------------------------------------------------------ */