/* RESET & BASE */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 18px; }
body {
  font-family: 'Noto Sans KR', sans-serif;
  color: var(--g800);
  background: var(--white);
  line-height: 1.9;
  overflow-x: hidden;
  word-break: keep-all;
  letter-spacing: -0.01em;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }
ul { list-style: none; }


/* ===========================
DESIGN TOKENS
=========================== */
:root {
  --pro:      #5B52F0;
  --pro-d:    #4338CA;
  --pro-l:    #EEF2FF;
  --home:     #059669;
  --home-d:   #047857;
  --home-l:   #ECFDF5;
  --pocket:   #D97706;
  --pocket-d: #B45309;
  --pocket-l: #FFFBEB;
  --dark:     #0F0F1A;
  --g900: #111827;
  --g800: #1F2937;
  --g700: #374151;
  --g600: #4B5563;
  --g500: #6B7280;
  --g400: #9CA3AF;
  --g300: #D1D5DB;
  --g200: #E5E7EB;
  --g100: #F3F4F6;
  --g50:  #F9FAFB;
  --white: #FFFFFF;
  --radius-xs: 6px;
  --radius-s:  10px;
  --radius-m:  14px;
  --radius-l:  20px;
  --radius-xl: 28px;
  --shadow-s: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-m: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-l: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.18);
}

/* CONTAINER */
.container {
  max-width: 1520px;
  width:100%;
  margin: 0 auto;
  padding: 0 60px;
}
@media (max-width: 1200px) { .container { padding: 0 40px; } }
@media (max-width: 768px) { .container { padding: 0 20px; } }

/* ===========================
SECTION COMMON
=========================== */
section { padding: 100px 0; }
@media (max-width: 768px) { section { padding: 72px 0; } }
.sec-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pro);
  background: var(--pro-l);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 24px;
}
.sec-title {
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 900;
  color: var(--g900);
  line-height: 1.2;
  letter-spacing: -2px;
  margin-bottom: 24px;
  word-break: keep-all;
}
.sec-desc {
  font-size: 20px;
  color: var(--g600);
  line-height: 1.9;
  max-width: 720px;
  word-break: keep-all;
}
.sec-head { margin-bottom: 56px; }
.sec-head.center { text-align: center; }
.sec-head.center .sec-desc { margin: 0 auto; }