/* ============================================
   오머(Omer) 디자인 시스템
   모바일 퍼스트 · 한 손 조작 최적화 · 다크 모드
   ============================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');

/* --- Design Tokens --- */
:root {
  /* 컬러 팔레트 */
  --c-bg:          #0f0f14;
  --c-bg-card:     #1a1a24;
  --c-bg-elevated: #22222e;
  --c-bg-glass:    rgba(30, 30, 42, 0.72);
  --c-surface:     #2a2a3a;

  --c-primary:     #ff6b35;
  --c-primary-dim: rgba(255, 107, 53, 0.15);
  --c-secondary:   #ffc857;
  --c-accent:      #4ecdc4;
  --c-danger:      #ff6b6b;

  --c-text:        #f0f0f5;
  --c-text-sub:    #9898a8;
  --c-text-dim:    #5e5e72;
  --c-border:      rgba(255, 255, 255, 0.06);

  /* 그라디언트 */
  --g-primary:     linear-gradient(135deg, #ff6b35 0%, #ff9a56 100%);
  --g-accent:      linear-gradient(135deg, #4ecdc4 0%, #44b8a8 100%);
  --g-card:        linear-gradient(145deg, #1e1e2a 0%, #16161f 100%);
  --g-hero:        linear-gradient(180deg, rgba(255,107,53,0.12) 0%, transparent 60%);

  /* 타이포 */
  --font:          'Noto Sans KR', -apple-system, sans-serif;
  --fs-xs:         0.7rem;
  --fs-sm:         0.8rem;
  --fs-md:         0.95rem;
  --fs-lg:         1.2rem;
  --fs-xl:         1.6rem;
  --fs-2xl:        2.2rem;
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-bold:       700;
  --fw-black:      900;

  /* 간격 */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-2xl: 48px;

  /* 라운드 */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 9999px;

  /* 그림자 */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 20px rgba(255,107,53,0.3);

  /* 트랜지션 */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:    0.15s;
  --t-normal:  0.25s;
  --t-slow:    0.4s;

  /* 레이아웃 */
  --max-width:       480px;
  --bottom-nav-h:    64px;
  --header-h:        56px;
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

/* --- Reset & Base --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font);
  background: var(--c-bg);
  color: var(--c-text);
  min-height: 100dvh;
  overflow-x: hidden;
  line-height: 1.5;
}

/* --- 앱 컨테이너 (모바일 중앙정렬) --- */
#app {
  max-width: var(--max-width);
  margin: 0 auto;
  min-height: 100dvh;
  position: relative;
  padding-bottom: var(--safe-area-bottom);
}

/* --- 공통 유틸리티 --- */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* --- 버튼 기본 --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border: none;
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
  -webkit-user-select: none;
  user-select: none;
}

.btn--primary {
  background: var(--g-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:active {
  transform: scale(0.96);
  box-shadow: var(--shadow-glow);
}

.btn--ghost {
  background: transparent;
  color: var(--c-text-sub);
  border: 1px solid var(--c-border);
}
.btn--ghost:active { background: var(--c-surface); }

.btn--pill {
  border-radius: var(--r-full);
  padding: 6px 14px;
  font-size: var(--fs-xs);
}

/* --- 카드 --- */
.card {
  background: var(--g-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-md);
  transition: transform var(--t-fast) var(--ease-snap);
}
.card:active {
  transform: scale(0.98);
}

/* --- 칩(태그) --- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  background: var(--c-surface);
  color: var(--c-text-sub);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
  -webkit-user-select: none;
  user-select: none;
}
.chip--selected {
  background: var(--c-primary-dim);
  color: var(--c-primary);
  border-color: var(--c-primary);
}
.chip:active {
  transform: scale(0.94);
}

/* --- 매치 바 (퍼센트 게이지) --- */
.match-bar {
  height: 6px;
  border-radius: var(--r-full);
  background: var(--c-surface);
  overflow: hidden;
}
.match-bar__fill {
  height: 100%;
  border-radius: var(--r-full);
  background: var(--g-primary);
  transition: width var(--t-slow) var(--ease-out);
}
.match-bar__fill--high { background: var(--g-accent); }
.match-bar__fill--mid  { background: var(--g-primary); }
.match-bar__fill--low  { background: var(--c-danger); }

/* --- 딥링크 버튼 그룹 --- */
.deep-links {
  display: flex;
  gap: var(--sp-sm);
  margin-top: var(--sp-sm);
}
.deep-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: all var(--t-fast) var(--ease-out);
}
.deep-link:active { transform: scale(0.94); }
.deep-link--youtube { background: rgba(255,0,0,0.12); color: #ff4444; }
.deep-link--10000  { background: rgba(78,205,196,0.12); color: var(--c-accent); }
.deep-link--naver  { background: rgba(0,199,60,0.12); color: #00c73c; }

/* --- 페이지 전환 애니메이션 --- */
.page { animation: fadeSlideUp var(--t-normal) var(--ease-out); }
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- 스크롤바 커스텀 --- */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-surface); border-radius: var(--r-full); }