/* 매도왕 디자인 토큰 — Claude Design 프로토타입에서 추출 (v2 기준) */
/* Pretendard는 CDN 사용:
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css">
   Material Symbols Rounded:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
*/

:root{
  /* Primary · 토스 연하늘색 */
  --blue-50:#E8F3FF; --blue-100:#C9E2FF; --blue-400:#4593FC; --blue-500:#3182F6; --blue-600:#1B64DA;
  /* Neutral · 블랙 & 화이트 */
  --black:#191F28; --grey-800:#333D4B; --grey-700:#4E5968; --grey-500:#8B95A1; --grey-400:#B0B8C1;
  --grey-300:#D1D6DB; --grey-200:#E5E8EB; --grey-100:#F2F4F6; --grey-50:#F9FAFB; --white:#FFFFFF;
  /* Semantic */
  --primary:var(--blue-500); --primary-hover:var(--blue-600); --primary-bg:var(--blue-50); --primary-bg-hover:#D6E9FF;
  --text-strong:var(--black); --text-body:var(--grey-700); --text-muted:var(--grey-500); --text-disabled:var(--grey-400);
  --surface-page:var(--grey-100); --surface-card:var(--white); --surface-sunken:var(--grey-50);
  --border:var(--grey-200); --border-subtle:#EDF0F2;
  --selection:var(--blue-100);

  /* Typography */
  --font-body:'Pretendard Variable','Pretendard',-apple-system,sans-serif;
  --font-icon:'Material Symbols Rounded';
  --tracking:-0.01em;          /* 본문 */
  --tracking-tight:-0.02em;    /* 20px 이상 타이틀 */
  --text-display:700 32px/1.3 var(--font-body);
  --text-title-1:700 24px/1.35 var(--font-body);
  --text-title-2:600 20px/1.4 var(--font-body);
  --text-headline:600 17px/1.45 var(--font-body);
  --text-body-1:400 15px/1.6 var(--font-body);
  --text-body-2:400 14px/1.57 var(--font-body);
  --text-caption:400 13px/1.5 var(--font-body);
  --text-label:500 12px/1.4 var(--font-body);

  /* Spacing · 8pt 그리드 */
  --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space-5:32px;
  /* Radius */
  --radius-chip:8px; --radius-control:12px; --radius-card:14px; --radius-card-lg:18px; --radius-sheet:24px; --radius-pill:100px;
  --touch-target:48px;

  /* Elevation */
  --elevation-1:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --elevation-2:0 4px 16px rgba(0,0,0,.08);
  --elevation-3:0 12px 32px rgba(0,0,0,.12);
  --elevation-4:0 24px 56px rgba(0,0,0,.2);
  --shadow-card:0 1px 3px rgba(0,0,0,.04);
  --dim:rgba(25,31,40,.5);
  --ease-sheet:cubic-bezier(.32,.72,0,1);
}

/* 베이스 스타일 */
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);font-family:var(--font-body);color:var(--text-strong);letter-spacing:var(--tracking);word-break:keep-all}
h1,h2,h3,p,div,span{text-wrap:pretty}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-hover)}
input::placeholder,textarea::placeholder{color:var(--grey-400)}
.only-m{display:none}
@media(max-width:760px){.hide-m{display:none!important}.only-m{display:block!important}}
@keyframes mdw-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mdw-spin{to{transform:rotate(360deg)}}

.material-symbols-rounded{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}