/* ────────────────────────────────────────────────────────────
   1. CSS Custom Properties (디자인 토큰)
   ──────────────────────────────────────────────────────────── */

:root {
  /* Gray scale (color-gray-* aliases) */
  --color-gray-50:  #F9FAFB;
  --color-gray-100: #F2F4F6;
  --color-gray-200: #E5E8EB;
  --color-gray-300: #D1D6DB;
  --color-gray-400: #B0B8C1;
  --color-gray-500: #8B95A1;
  --color-gray-600: #6B7684;
  --color-gray-700: #4E5968;
  --color-gray-800: #333D4B;
  --color-gray-900: #191F28;

  --color-primary:        #2563eb;
  --color-primary-hover:  #1d4ed8;
  --color-secondary:      #64748b;
  --color-success:        #16a34a;
  --color-warning:        #d97706;
  --color-danger:         #dc2626;
  --color-info:           #0891b2;

  /* Neutrals */
  --color-white:          #ffffff;
  --color-black:          #0a0a0a;


  /* Semantic Colors */
  --color-bg:             var(--color-white);
  --color-bg-subtle:      var(--color-gray-50);
  --color-surface:        var(--color-white);
  --color-border:         var(--color-gray-200);
  --color-text:           var(--color-gray-900);
  --color-text-muted:     var(--color-gray-500);
  --color-text-on-primary: var(--color-white);

  /* Typography */

  --font-sans: 'Outfit',  'Pretendard', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;



  --text-xs:      0.75rem;    /* 12px */
  --text-sm:      0.875rem;   /* 14px */
  --text-base:    1rem;       /* 16px */
  --text-lg:      1.125rem;   /* 18px */
  --text-xl:      1.25rem;    /* 20px */
  --text-2xl:     1.5rem;     /* 24px */
  --text-3xl:     1.875rem;   /* 30px */
  --text-4xl:     2.25rem;    /* 36px */
  --text-5xl:     3rem;       /* 48px */

  --font-normal:  400;
  --font-medium:  500;
  --font-semibold: 600;
  --font-bold:    700;

  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose:  2;

  /* Spacing */
  --space-0:   0;
  --space-px:  1px;
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* Border Radius */
  --radius-none: 0;
  --radius-sm:   0.25rem;
  --radius-md:   0.375rem;
  --radius-lg:   0.5rem;
  --radius-xl:   0.75rem;
  --radius-2xl:  1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.06);

  /* Transitions */
  --duration-fast:   150ms;
  --duration-base:   200ms;
  --duration-slow:   300ms;
  --ease-default:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --transition:      var(--duration-base) var(--ease-default);

  /* Z-Index */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;
  --z-tooltip: 600;

  /* Layout */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1536px;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:          var(--color-gray-900);
    --color-bg-subtle:   var(--color-gray-800);
    --color-surface:     var(--color-gray-800);
    --color-border:      var(--color-gray-700);
    --color-text:        var(--color-gray-50);
    --color-text-muted:  var(--color-gray-400);
  }
}


:root {
  --green-deep: #006f46;
  --green-bright: #29a67a;
  --green-lime: #8cbf3b;
  --lime: #9ccc59;
  --blue-sky: #35a5de;
  --blue-deep: #3781dd;
  --teal: #00a199;
  --yellow-lime: #dadf00;
  --white: #ffffff;
  --white-90: rgba(255,255,255,0.92);
  --white-70: rgba(255,255,255,0.70);
  --white-60: rgba(255,255,255,0.60);
  --white-40: rgba(255,255,255,0.40);
  --white-15: rgba(255,255,255,0.15);
  --white-08: rgba(255,255,255,0.08);

--black: #000000;
--black-90: rgba(0,0,0,0.92);
--black-70: rgba(0,0,0,0.70);
--black-40: rgba(0,0,0,0.40);
--black-15: rgba(0,0,0,0.15);
--black-08: rgba(0,0,0,0.08);
--black-04: rgba(0,0,0,0.04);
--grey-900: #191F28;
--grey-800: #333D4B;
--grey-700: #4E5968;
--grey-600: #6B7684;
--grey-500: #8B95A1;
--grey-400: #B0B8C1;
--grey-300: #D1D6DB;
--grey-200: #E5E8EB;
--grey-100: #F2F4F6;
--grey-50:  #F9FAFB;

  --dark: #0a1a0f;
  --glass: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.12);
  --glass-hover: rgba(255,255,255,0.14);
  --transition: cubic-bezier(0.22, 1, 0.36, 1);
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}





/* ────────────────────────────────────────────────────────────
   2. CSS Reset & Normalize
   ──────────────────────────────────────────────────────────── */

/* Box Sizing */
*,
*::before,
*::after { margin: 0; padding: 0;
  box-sizing: border-box;
}

/* Remove default margin & padding */
* {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;       /* 맥/iOS 계열 폰트 부드럽게 */
  -moz-osx-font-smoothing: grayscale;        /* Firefox macOS */
  text-rendering: optimizeLegibility;        /* 커닝/합자 최적화 */
  -webkit-text-stroke: 0.3px transparent;   /* 크롬 계열 미세 번짐 방지 */
  font-smooth: always;                       /* 구형 브라우저 대응 */
}



html {
  font-size: 100%; /* 16px base */
  line-height: var(--leading-normal);
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size:clamp(16px, 2.5vw, 25px);
  font-weight: var(--font-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: transparent; 
min-height: 100vh;
}







/* Media */
/* img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  max-width: 100%;
} */

img,
video {
  height: auto;
}

/* Lists */
ol,
ul {
  list-style: none;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

/* Links */
a {
  color: inherit;
  text-decoration: inherit;
}

/* Forms */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button,
select {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
  cursor: pointer;
  border: none;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

input,
textarea {
  border: none;
  outline: none;
  background: transparent;
}

textarea {
  resize: vertical;
}

.padding-inline-none {padding-inline:0px !important;}


/* Table */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* HR */
hr {
  border: none;
  border-top: 1px solid var(--color-border);
  height: 0;
  color: inherit;
  overflow: visible;
}

/* Abbr */
abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

/* Code */
code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Sub / Sup */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }

/* Hidden */
[hidden] {
  display: none;
}


/* ────────────────────────────────────────────────────────────
   3. Typography
   ──────────────────────────────────────────────────────────── */
h1 { font-size: var(--text-4xl); font-weight: var(--font-bold);    line-height: var(--leading-tight); }
h2 { font-size: var(--text-3xl); font-weight: var(--font-bold);    line-height: var(--leading-tight); }
h3 { font-size: var(--text-2xl); font-weight: var(--font-semibold); line-height: var(--leading-snug); }
h4 { font-size: var(--text-xl);  font-weight: var(--font-semibold); line-height: var(--leading-snug); }
h5 { font-size: var(--text-lg);  font-weight: var(--font-medium);  line-height: var(--leading-normal); }
h6 { font-size: var(--text-base); font-weight: var(--font-medium); line-height: var(--leading-normal); }

p {
  line-height: var(--leading-relaxed);
}

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}
a:hover {
  color: var(--color-primary-hover);
}

strong, b {
  font-weight: var(--font-bold);
}

em, i {
  font-style: italic;
}

small {
  font-size: var(--text-sm);
}

mark {
  background-color: #fef08a;
  color: var(--color-black);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-1);
}

code {
  background-color: var(--color-gray-100);
  color: var(--color-danger);
  border-radius: var(--radius-sm);
  padding: 0.1em var(--space-1);
  font-size: 0.875em;
}

pre {
  background-color: var(--color-gray-900);
  color: var(--color-gray-100);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  overflow-x: auto;
  line-height: var(--leading-relaxed);
}

pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

blockquote {
  border-left: 4px solid var(--color-primary);
  padding-left: var(--space-4);
  color: var(--color-text-muted);
  font-style: italic;
}


/* ────────────────────────────────────────────────────────────
   4. Layout Utilities
   ──────────────────────────────────────────────────────────── */


/* Grid */
.grid        { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Spacing Helpers */
.mt-auto { margin-top: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-inline: auto; }

/* Display */
.block        { display: block; }
.inline       { display: inline; }
.inline-block { display: inline-block; }
.hidden       { display: none; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

/* Width / Height */
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.min-h-screen { min-height: 100vh; }
.w-fit   { width: fit-content; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Visually Hidden (접근성) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}


/* ────────────────────────────────────────────────────────────
   5. Accessibility
   ──────────────────────────────────────────────────────────── */

/* Focus Visible — 키보드 접근성 */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Remove focus ring for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High Contrast */
@media (forced-colors: active) {
  *,
  *::before,
  *::after {
    border-color: ButtonText;
  }
}


/* ────────────────────────────────────────────────────────────
   6. Selection
   ──────────────────────────────────────────────────────────── */
::selection {
  background-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
  color: var(--color-text);
}


/* ────────────────────────────────────────────────────────────
   7. Scrollbar (Webkit)
   ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-gray-100);
}
::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-400);
}


/* ======================
   RESET
====================== */
:root {
  --radius-lg: 28px;
  --radius-md: 22px;
--padding:18px 4%;
}



a,
a:link,
a:visited,
a:hover,
a:active {
  color: inherit;
  text-decoration: none;
}




/* ======================
flex
====================== */
/* --- Display --- */
.flex        { display: flex; }
.inline-flex { display: inline-flex; }
 
/* --- Direction --- */
.flex.col    { flex-direction: column; }
.flex.row    { flex-direction: row; }  /* default지만 명시용 */
 
/* --- Justify Content (주축) --- */
.flex.start   { justify-content: flex-start; }
.flex.center  { justify-content: center; }
.flex.right  { justify-content: right; }
.flex.end     { justify-content: flex-end; }
.flex.between { justify-content: space-between; }
.flex.around  { justify-content: space-around; }
.flex.evenly  { justify-content: space-evenly; }
 
/* --- Align Items (교차축) --- */
.flex.middle   { align-items: center; }
.flex.top      { align-items: flex-start; }
.flex.bottom   { align-items: flex-end; }
.flex.stretch  { align-items: stretch; }  /* default */
 
/* --- Wrap --- */
.flex.wrap     { flex-wrap: wrap; }
.flex.nowrap   { flex-wrap: nowrap; }  /* default지만 명시용 */
 
/* --- Gap --- */
.flex.gap-xs { gap: 4px; }
.flex.gap-sm { gap: 8px; }
.flex.gap-md { gap: 16px; }
.flex.gap-lg { gap: 24px; }
 
/* --- 자식 아이템용 --- */
.flex-1    { flex: 1; }           /* 남은 공간 모두 차지 */
.flex-none { flex: none; }        /* 크기 고정 */
.flex-auto { flex: auto; }        /* 내용 크기 기준으로 늘어남 */