/* ==========================================================================
    Reset
========================================================================== */
/*
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    font-family: inherit;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
    border: 0;
    background: transparent;
}

button {
    cursor: pointer;
}

button,
input,
select,
textarea {
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

address,
em,
i {
    font-style: normal;
}

strong,
b {
    font-weight: 700;
}

fieldset {
    border: 0;
}

textarea {
    resize: vertical;
}

:where([hidden]) {
    display: none !important;
}
img{
	vertical-align:middle;
}*/

/* ==========================================================================
    Common
========================================================================== */
html {
  font-size: 100%; /* 브라우저 기본값 16px 유지 */
}

:root {

/* --- Micro Spacing (4px ~ 24px) --- */
  --space-4:   clamp(0.25rem, 1.5vw, 0.25rem);      /* 4px 고정 및 미세 가변 */
  --space-8:   clamp(0.375rem, 2vw, 0.5rem);        /* 6px ~ 8px */
  --space-12:  clamp(0.5rem, 2.5vw, 0.75rem);       /* 8px ~ 12px */
  --space-14:  clamp(0.625rem, 2.8vw, 0.875rem);   /* 10px ~ 14px */
  --space-16:  clamp(0.75rem, 3vw, 1rem);          /* 12px ~ 16px */
  --space-18:  clamp(0.875rem, 3.2vw, 1.125rem);   /* 14px ~ 18px */
  --space-20:  clamp(1rem, 3.4vw, 1.25rem);        /* 16px ~ 20px */
  --space-24:  clamp(1.125rem, 3.6vw, 1.5rem);     /* 18px ~ 24px */

  /* --- Medium Spacing (32px ~ 96px) --- */
  --space-32:  clamp(1.25rem, 5vw, 2rem);          /* 20px ~ 32px */
  --space-40:  clamp(1.5rem, 5.4vw, 2.5rem);       /* 24px ~ 40px */
  --space-48:  clamp(1.75rem, 5.6vw, 3rem);        /* 28px ~ 48px */
  --space-64:  clamp(2.25rem, 6.6vw, 4rem);        /* 36px ~ 64px */
  --space-80:  clamp(2.75rem, 8.6vw, 5rem);        /* 44px ~ 80px */
  --space-96:  clamp(3.25rem, 9.8vw, 6rem);        /* 52px ~ 96px */

  /* --- Large Spacing (128px ~ 320px) --- */
  --space-128: clamp(4rem, 14vw, 8rem);          /* 64px ~ 128px */
  --space-160: clamp(5rem, 17vw, 10rem);         /* 80px ~ 160px */
  --space-192: clamp(6rem, 18vw, 12rem);         /* 96px ~ 192px */
  --space-224: clamp(7rem, 21vw, 14rem);         /* 112px ~ 224px */
  --space-256: clamp(8rem, 23vw, 16rem);         /* 128px ~ 256px */
  --space-320: clamp(10rem, 28vw, 20rem);        /* 160px ~ 320px */

/* --- Micro Fonts (12px 이하 고정 rem) --- */
  --font-4:   0.25rem;
  --font-8:   0.5rem;
  --font-12:  0.75rem;

  /* --- Body & Macro Fonts --- */
  --font-14:  clamp(0.625rem, 2.8vw, 0.875rem);
  --font-16:  clamp(0.75rem, 3.0vw, 1rem);
  --font-18:  clamp(0.875rem, 3.2vw, 1.125rem);
  --font-20:  clamp(1.0rem, 3.4vw, 1.25rem);
  --font-24:  clamp(1.125rem, 3.6vw, 1.5rem);
  --font-32:  clamp(1.25rem, 5.0vw, 2rem);
  --font-40:  clamp(1.5rem, 5.4vw, 2.5rem);
  --font-48:  clamp(1.75rem, 5.6vw, 3rem);
  --font-64:  clamp(2.25rem, 6.6vw, 4rem);
  --font-80:  clamp(2.75rem, 8.6vw, 5rem);
  --font-96:  clamp(3.25rem, 9.8vw, 6rem);
  --font-128: clamp(4.0rem, 14.0vw, 8rem);
  --font-136: clamp(4.5rem, 14.6vw, 8.5rem);
  --font-160: clamp(5.0rem, 17.0vw, 10rem);
  --font-192: clamp(6.0rem, 18.0vw, 12rem);
  --font-224: clamp(7.0rem, 21.0vw, 14rem);
  --font-256: clamp(8.0rem, 23.0vw, 16rem);
  --font-320: clamp(10.0rem, 28.0vw, 20rem);

}

/* ==========================================================================
    Font
========================================================================== */

/* FONT SIZE UTILITIES (.fs-*) */
.fs-4   { font-size: var(--font-4); }
.fs-8   { font-size: var(--font-8); }
.fs-12  { font-size: var(--font-12); }
.fs-14  { font-size: var(--font-14); }
.fs-16  { font-size: var(--font-16); }
.fs-18  { font-size: var(--font-18); }
.fs-20  { font-size: var(--font-20); }
.fs-24  { font-size: var(--font-24); }
.fs-32  { font-size: var(--font-32); }
.fs-40  { font-size: var(--font-40); }
.fs-48  { font-size: var(--font-48); }
.fs-64  { font-size: var(--font-64); }
.fs-80  { font-size: var(--font-80); }
.fs-96  { font-size: var(--font-96); }
.fs-128 { font-size: var(--font-128); }
.fs-136 { font-size: var(--font-136); }
.fs-160 { font-size: var(--font-160); }
.fs-192 { font-size: var(--font-192); }
.fs-224 { font-size: var(--font-224); }
.fs-256 { font-size: var(--font-256); }
.fs-320 { font-size: var(--font-320); }

/*FONT WEIGHT UTILITIES (.fw-*)*/
.fw-100 { font-weight: 100; } /* Thin*/
.fw-200 { font-weight: 200; } /* Extra Light*/
.fw-300 { font-weight: 300; } /* Light*/
.fw-400 { font-weight: 400; } /* Regular*/
.fw-500 { font-weight: 500; } /* Medium*/
.fw-600 { font-weight: 600; } /* Semi Bold*/
.fw-700 { font-weight: 700; } /* Bold*/
.fw-800 { font-weight: 800; } /* Extra Bold*/
.fw-900 { font-weight: 900; } /* Black*/

/* LINEHEIGHT SIZE UTILITIES (.line-*) */
.line-12{line-height:1.2em;}
.line-15{line-height:1.5em;}
.line-18{line-height:1.8em;}

/*TEXT ALIGNMENT UTILITIES*/
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-justify { text-align: justify; }

/* ==========================================================================
    Layout
========================================================================== */
/*.view_pc{display:block;}*/
/*.view_m{display:none;}*/

.view_1600{display:none;}
.view_1440{display:none;}
.view_1024{display:none;}
.view_640{display:none;}

.con1600{width:1600px;margin:0 auto;}
.con1440{width:1440px;margin:0 auto;}

/* ===================================================
   1. MARGIN UTILITIES
   =================================================== */
/* Margin Top (.mt-*) */
.mt-4   { margin-top: var(--space-4); }
.mt-8   { margin-top: var(--space-8); }
.mt-12  { margin-top: var(--space-12); }
.mt-14  { margin-top: var(--space-14); }
.mt-16  { margin-top: var(--space-16); }
.mt-18  { margin-top: var(--space-18); }
.mt-20  { margin-top: var(--space-20); }
.mt-24  { margin-top: var(--space-24); }
.mt-32  { margin-top: var(--space-32); }
.mt-40  { margin-top: var(--space-40); }
.mt-48  { margin-top: var(--space-48); }
.mt-64  { margin-top: var(--space-64); }
.mt-80  { margin-top: var(--space-80); }
.mt-96  { margin-top: var(--space-96); }
.mt-128 { margin-top: var(--space-128); }
.mt-160 { margin-top: var(--space-160); }
.mt-192 { margin-top: var(--space-192); }
.mt-224 { margin-top: var(--space-224); }
.mt-256 { margin-top: var(--space-256); }
.mt-320 { margin-top: var(--space-320); }

/* Margin Bottom (.mb-*) */
.mb-4   { margin-bottom: var(--space-4); }
.mb-8   { margin-bottom: var(--space-8); }
.mb-12  { margin-bottom: var(--space-12); }
.mb-14  { margin-bottom: var(--space-14); }
.mb-16  { margin-bottom: var(--space-16); }
.mb-18  { margin-bottom: var(--space-18); }
.mb-20  { margin-bottom: var(--space-20); }
.mb-24  { margin-bottom: var(--space-24); }
.mb-32  { margin-bottom: var(--space-32); }
.mb-40  { margin-bottom: var(--space-40); }
.mb-48  { margin-bottom: var(--space-48); }
.mb-64  { margin-bottom: var(--space-64); }
.mb-80  { margin-bottom: var(--space-80); }
.mb-96  { margin-bottom: var(--space-96); }
.mb-128 { margin-bottom: var(--space-128); }
.mb-160 { margin-bottom: var(--space-160); }
.mb-192 { margin-bottom: var(--space-192); }
.mb-224 { margin-bottom: var(--space-224); }
.mb-256 { margin-bottom: var(--space-256); }
.mb-320 { margin-bottom: var(--space-320); }

/* Margin Left (.ml-*) */
.ml-4   { margin-left: var(--space-4); }
.ml-8   { margin-left: var(--space-8); }
.ml-12  { margin-left: var(--space-12); }
.ml-14  { margin-left: var(--space-14); }
.ml-16  { margin-left: var(--space-16); }
.ml-18  { margin-left: var(--space-18); }
.ml-20  { margin-left: var(--space-20); }
.ml-24  { margin-left: var(--space-24); }
.ml-32  { margin-left: var(--space-32); }
.ml-40  { margin-left: var(--space-40); }
.ml-48  { margin-left: var(--space-48); }
.ml-64  { margin-left: var(--space-64); }
.ml-80  { margin-left: var(--space-80); }
.ml-96  { margin-left: var(--space-96); }
.ml-128 { margin-left: var(--space-128); }
.ml-160 { margin-left: var(--space-160); }
.ml-192 { margin-left: var(--space-192); }
.ml-224 { margin-left: var(--space-224); }
.ml-256 { margin-left: var(--space-256); }
.ml-320 { margin-left: var(--space-320); }

/* Margin Right (.mr-*) */
.mr-4   { margin-right: var(--space-4); }
.mr-8   { margin-right: var(--space-8); }
.mr-12  { margin-right: var(--space-12); }
.mr-14  { margin-right: var(--space-14); }
.mr-16  { margin-right: var(--space-16); }
.mr-18  { margin-right: var(--space-18); }
.mr-20  { margin-right: var(--space-20); }
.mr-24  { margin-right: var(--space-24); }
.mr-32  { margin-right: var(--space-32); }
.mr-40  { margin-right: var(--space-40); }
.mr-48  { margin-right: var(--space-48); }
.mr-64  { margin-right: var(--space-64); }
.mr-80  { margin-right: var(--space-80); }
.mr-96  { margin-right: var(--space-96); }
.mr-128 { margin-right: var(--space-128); }
.mr-160 { margin-right: var(--space-160); }
.mr-192 { margin-right: var(--space-192); }
.mr-224 { margin-right: var(--space-224); }
.mr-256 { margin-right: var(--space-256); }
.mr-320 { margin-right: var(--space-320); }

/* Margin Block / Y축 (.my-*) */
.my-4   { margin-block: var(--space-4); }
.my-8   { margin-block: var(--space-8); }
.my-12  { margin-block: var(--space-12); }
.my-14  { margin-block: var(--space-14); }
.my-16  { margin-block: var(--space-16); }
.my-18  { margin-block: var(--space-18); }
.my-20  { margin-block: var(--space-20); }
.my-24  { margin-block: var(--space-24); }
.my-32  { margin-block: var(--space-32); }
.my-40  { margin-block: var(--space-40); }
.my-48  { margin-block: var(--space-48); }
.my-64  { margin-block: var(--space-64); }
.my-80  { margin-block: var(--space-80); }
.my-96  { margin-block: var(--space-96); }
.my-128 { margin-block: var(--space-128); }
.my-160 { margin-block: var(--space-160); }
.my-192 { margin-block: var(--space-192); }
.my-224 { margin-block: var(--space-224); }
.my-256 { margin-block: var(--space-256); }
.my-320 { margin-block: var(--space-320); }

/* Margin Inline / X축 (.mx-*) */
.mx-4   { margin-inline: var(--space-4); }
.mx-8   { margin-inline: var(--space-8); }
.mx-12  { margin-inline: var(--space-12); }
.mx-14  { margin-inline: var(--space-14); }
.mx-16  { margin-inline: var(--space-16); }
.mx-18  { margin-inline: var(--space-18); }
.mx-20  { margin-inline: var(--space-20); }
.mx-24  { margin-inline: var(--space-24); }
.mx-32  { margin-inline: var(--space-32); }
.mx-40  { margin-inline: var(--space-40); }
.mx-48  { margin-inline: var(--space-48); }
.mx-64  { margin-inline: var(--space-64); }
.mx-80  { margin-inline: var(--space-80); }
.mx-96  { margin-inline: var(--space-96); }
.mx-128 { margin-inline: var(--space-128); }
.mx-160 { margin-inline: var(--space-160); }
.mx-192 { margin-inline: var(--space-192); }
.mx-224 { margin-inline: var(--space-224); }
.mx-256 { margin-inline: var(--space-256); }
.mx-320 { margin-inline: var(--space-320); }


/* ===================================================
   2. PADDING UTILITIES
   =================================================== */
/* Padding Top (.pt-*) */
.pt-4   { padding-top: var(--space-4); }
.pt-8   { padding-top: var(--space-8); }
.pt-12  { padding-top: var(--space-12); }
.pt-14  { padding-top: var(--space-14); }
.pt-16  { padding-top: var(--space-16); }
.pt-18  { padding-top: var(--space-18); }
.pt-20  { padding-top: var(--space-20); }
.pt-24  { padding-top: var(--space-24); }
.pt-32  { padding-top: var(--space-32); }
.pt-40  { padding-top: var(--space-40); }
.pt-48  { padding-top: var(--space-48); }
.pt-64  { padding-top: var(--space-64); }
.pt-80  { padding-top: var(--space-80); }
.pt-96  { padding-top: var(--space-96); }
.pt-128 { padding-top: var(--space-128); }
.pt-160 { padding-top: var(--space-160); }
.pt-192 { padding-top: var(--space-192); }
.pt-224 { padding-top: var(--space-224); }
.pt-256 { padding-top: var(--space-256); }
.pt-320 { padding-top: var(--space-320); }

/* Padding Bottom (.pb-*) */
.pb-4   { padding-bottom: var(--space-4); }
.pb-8   { padding-bottom: var(--space-8); }
.pb-12  { padding-bottom: var(--space-12); }
.pb-14  { padding-bottom: var(--space-14); }
.pb-16  { padding-bottom: var(--space-16); }
.pb-18  { padding-bottom: var(--space-18); }
.pb-20  { padding-bottom: var(--space-20); }
.pb-24  { padding-bottom: var(--space-24); }
.pb-32  { padding-bottom: var(--space-32); }
.pb-40  { padding-bottom: var(--space-40); }
.pb-48  { padding-bottom: var(--space-48); }
.pb-64  { padding-bottom: var(--space-64); }
.pb-80  { padding-bottom: var(--space-80); }
.pb-96  { padding-bottom: var(--space-96); }
.pb-128 { padding-bottom: var(--space-128); }
.pb-160 { padding-bottom: var(--space-160); }
.pb-192 { padding-bottom: var(--space-192); }
.pb-224 { padding-bottom: var(--space-224); }
.pb-256 { padding-bottom: var(--space-256); }
.pb-320 { padding-bottom: var(--space-320); }

/* Padding Left (.pl-*) */
.pl-4   { padding-left: var(--space-4); }
.pl-8   { padding-left: var(--space-8); }
.pl-12  { padding-left: var(--space-12); }
.pl-14  { padding-left: var(--space-14); }
.pl-16  { padding-left: var(--space-16); }
.pl-18  { padding-left: var(--space-18); }
.pl-20  { padding-left: var(--space-20); }
.pl-24  { padding-left: var(--space-24); }
.pl-32  { padding-left: var(--space-32); }
.pl-40  { padding-left: var(--space-40); }
.pl-48  { padding-left: var(--space-48); }
.pl-64  { padding-left: var(--space-64); }
.pl-80  { padding-left: var(--space-80); }
.pl-96  { padding-left: var(--space-96); }
.pl-128 { padding-left: var(--space-128); }
.pl-160 { padding-left: var(--space-160); }
.pl-192 { padding-left: var(--space-192); }
.pl-224 { padding-left: var(--space-224); }
.pl-256 { padding-left: var(--space-256); }
.pl-320 { padding-left: var(--space-320); }

/* Padding Right (.pr-*) */
.pr-4   { padding-right: var(--space-4); }
.pr-8   { padding-right: var(--space-8); }
.pr-12  { padding-right: var(--space-12); }
.pr-14  { padding-right: var(--space-14); }
.pr-16  { padding-right: var(--space-16); }
.pr-18  { padding-right: var(--space-18); }
.pr-20  { padding-right: var(--space-20); }
.pr-24  { padding-right: var(--space-24); }
.pr-32  { padding-right: var(--space-32); }
.pr-40  { padding-right: var(--space-40); }
.pr-48  { padding-right: var(--space-48); }
.pr-64  { padding-right: var(--space-64); }
.pr-80  { padding-right: var(--space-80); }
.pr-96  { padding-right: var(--space-96); }
.pr-128 { padding-right: var(--space-128); }
.pr-160 { padding-right: var(--space-160); }
.pr-192 { padding-right: var(--space-192); }
.pr-224 { padding-right: var(--space-224); }
.pr-256 { padding-right: var(--space-256); }
.pr-320 { padding-right: var(--space-320); }

/* Padding Block / Y축 (.py-*) */
.py-4   { padding-block: var(--space-4); }
.py-8   { padding-block: var(--space-8); }
.py-12  { padding-block: var(--space-12); }
.py-14  { padding-block: var(--space-14); }
.py-16  { padding-block: var(--space-16); }
.py-18  { padding-block: var(--space-18); }
.py-20  { padding-block: var(--space-20); }
.py-24  { padding-block: var(--space-24); }
.py-32  { padding-block: var(--space-32); }
.py-40  { padding-block: var(--space-40); }
.py-48  { padding-block: var(--space-48); }
.py-64  { padding-block: var(--space-64); }
.py-80  { padding-block: var(--space-80); }
.py-96  { padding-block: var(--space-96); }
.py-128 { padding-block: var(--space-128); }
.py-160 { padding-block: var(--space-160); }
.py-192 { padding-block: var(--space-192); }
.py-224 { padding-block: var(--space-224); }
.py-256 { padding-block: var(--space-256); }
.py-320 { padding-block: var(--space-320); }

/* Padding Inline / X축 (.px-*) */
.px-4   { padding-inline: var(--space-4); }
.px-8   { padding-inline: var(--space-8); }
.px-12  { padding-inline: var(--space-12); }
.px-14  { padding-inline: var(--space-14); }
.px-16  { padding-inline: var(--space-16); }
.px-18  { padding-inline: var(--space-18); }
.px-20  { padding-inline: var(--space-20); }
.px-24  { padding-inline: var(--space-24); }
.px-32  { padding-inline: var(--space-32); }
.px-40  { padding-inline: var(--space-40); }
.px-48  { padding-inline: var(--space-48); }
.px-64  { padding-inline: var(--space-64); }
.px-80  { padding-inline: var(--space-80); }
.px-96  { padding-inline: var(--space-96); }
.px-128 { padding-inline: var(--space-128); }
.px-160 { padding-inline: var(--space-160); }
.px-192 { padding-inline: var(--space-192); }
.px-224 { padding-inline: var(--space-224); }
.px-256 { padding-inline: var(--space-256); }
.px-320 { padding-inline: var(--space-320); }


/* ===================================================
   3. GAP UTILITIES
   =================================================== */
/* Gap (.gap-*) */
.gap-4   { gap: var(--space-4); }
.gap-8   { gap: var(--space-8); }
.gap-12  { gap: var(--space-12); }
.gap-14  { gap: var(--space-14); }
.gap-16  { gap: var(--space-16); }
.gap-18  { gap: var(--space-18); }
.gap-20  { gap: var(--space-20); }
.gap-24  { gap: var(--space-24); }
.gap-32  { gap: var(--space-32); }
.gap-40  { gap: var(--space-40); }
.gap-48  { gap: var(--space-48); }
.gap-64  { gap: var(--space-64); }
.gap-80  { gap: var(--space-80); }
.gap-96  { gap: var(--space-96); }
.gap-128 { gap: var(--space-128); }
.gap-160 { gap: var(--space-160); }
.gap-192 { gap: var(--space-192); }
.gap-224 { gap: var(--space-224); }
.gap-256 { gap: var(--space-256); }
.gap-320 { gap: var(--space-320); }

/* ===================================================
   BORDER RADIUS UTILITIES (.radius-*)
   =================================================== */
.radius-4   { border-radius: var(--space-4); }
.radius-8   { border-radius: var(--space-8); }
.radius-12  { border-radius: var(--space-12); }
.radius-14  { border-radius: var(--space-14); }
.radius-16  { border-radius: var(--space-16); }
.radius-18  { border-radius: var(--space-18); }
.radius-20  { border-radius: var(--space-20); }
.radius-24  { border-radius: var(--space-24); }
.radius-32  { border-radius: var(--space-32); }
.radius-40  { border-radius: var(--space-40); }
.radius-48  { border-radius: var(--space-48); }
.radius-64  { border-radius: var(--space-64); }
.radius-80  { border-radius: var(--space-80); }
.radius-96  { border-radius: var(--space-96); }
.radius-128 { border-radius: var(--space-128); }
.radius-136 { border-radius: var(--space-136); }
.radius-160 { border-radius: var(--space-160); }
.radius-192 { border-radius: var(--space-192); }
.radius-224 { border-radius: var(--space-224); }
.radius-256 { border-radius: var(--space-256); }
.radius-320 { border-radius: var(--space-320); }

/* 예외적인 radius */
.radius-full{border-radius: 9999px;}/*알약형태*/
.radius-circle{border-radius:50%;}/*원형*/
.radius-0{border-radius:0;}

/* ==========================================================================
    Responsive 1600px(Desktop)
========================================================================== */
@media all and (max-width:1600px){
.view_1600{display:block;}
.hide_1600{display:none;}

.con1600{width:1440px;margin:0 auto;}
}/*1600px*/

/* ==========================================================================
    Responsive 1440px(Laptop)
========================================================================== */
@media all and (max-width:1440px){
.view_1440{display:block;}
.hide_1440{display:none;}

.con1600{width:1024px;margin:0 auto;}
.con1440{width:1024px;margin:0 auto;}
}/*1440px*/

/* ==========================================================================
    Responsive 1024px(Tablet)
========================================================================== */
@media all and (max-width:1024px){
.view_1024{display:block;}
.hide_1024{display:none;}

.con1600{width:640px;margin:0 auto;}
.con1440{width:640px;margin:0 auto;}
}/*1024px*/

/* ==========================================================================
    Responsive 640px(Mobile)
========================================================================== */
@media all and (max-width:640px){
.view_640{display:block;}
.hide_640{display:none;}

.con1600{width:90%;margin:0 auto;}
.con1440{width:90%;margin:0 auto;}
}/*640px*/