/* ============================================================================
   GiftTalk — 디자인 토큰
   색·간격·글자·모서리·그림자를 여기 한 곳에서만 정한다. 화면 코드는 값을
   직접 쓰지 않고 항상 변수를 부른다. 그래야 사이트 전체가 한 벌로 움직인다.

   방향: 검정 · 차콜 · 딥네이비 위에 차분한 파랑 포인트.
        네온·과한 그라디언트·빛나는 효과는 쓰지 않는다.
   ========================================================================== */

:root {
  /* ── 바탕 ── 아래로 갈수록 앞으로 나온 면 */
  --bg:            #090C13;
  --bg-2:          #0C1019;
  --surface:       #111624;
  --surface-2:     #161C2C;
  --surface-3:     #1C2436;
  --surface-hover: #1F293D;

  /* ── 선 ── */
  --line:          #212A3C;
  --line-2:        #2B3549;
  --line-3:        #3A465F;

  /* ── 글자 ── */
  --text:          #E9EDF5;
  --text-2:        #A6B1C6;
  --text-3:        #717D95;
  --text-4:        #4E5870;

  /* ── 포인트 ── Telegram / TON 계열을 낮은 채도로 */
  --accent:        #3D9EE8;
  --accent-2:      #2C86CC;
  --accent-3:      #1E6DAB;
  --accent-soft:   rgba(61, 158, 232, .13);
  --accent-line:   rgba(61, 158, 232, .34);
  --on-accent:     #04121E;

  /* ── 뜻이 있는 색 ── */
  --ok:            #34BC85;
  --ok-soft:       rgba(52, 188, 133, .13);
  --warn:          #D9A63C;
  --warn-soft:     rgba(217, 166, 60, .13);
  --danger:        #E05A5A;
  --danger-soft:   rgba(224, 90, 90, .13);
  --gold:          #C7A76A;
  --gold-soft:     rgba(199, 167, 106, .13);

  /* ── 판매자 등급 ── */
  --tier-new:      #717D95;
  --tier-active:   #6E9BC4;
  --tier-trusted:  #34BC85;
  --tier-verified: #3D9EE8;
  --tier-top:      #C7A76A;

  /* ── 간격 (4의 배수) ── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;
  --s9: 56px; --s10: 72px;

  /* ── 모서리 ── */
  --r-xs: 6px; --r-sm: 9px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-full: 999px;

  /* ── 그림자 ── 어두운 바탕에서는 번지지 않게 얕게 */
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 4px 14px rgba(0,0,0,.34);
  --sh-3: 0 12px 34px rgba(0,0,0,.44);

  /* ── 글자 크기 ── */
  --f-xs: 12px; --f-sm: 13px; --f-md: 14px; --f-base: 15px;
  --f-lg: 17px; --f-xl: 20px; --f-2xl: 24px; --f-3xl: 30px; --f-4xl: 38px;

  /* ── 레이아웃 ── */
  --wrap: 1280px;
  --header-h: 62px;
  --mobile-nav-h: 60px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ── 기본 초기화 ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
}
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
               'Segoe UI', 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;
  font-size: var(--f-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;               /* 가로 스크롤 금지 */
  word-break: keep-all;             /* 한글이 한 글자씩 끊기지 않게 */
  overflow-wrap: anywhere;          /* 긴 영문/주소는 안에서 접는다 */
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

::selection { background: rgba(61,158,232,.3); }

/* 스크롤바 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 2px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover { background: var(--line-3); }

/* 움직임을 줄이고 싶은 사용자 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}