@charset "UTF-8";

/*
 * =============================================================
 * INFORMATION
 * -------------------------------------------------------------
 * Author :mooyeon
  * -------------------------------------------------------------
 * Create Date :2026.06
 * -------------------------------------------------------------
 * Modified Date :2026.06
 * =============================================================
 */

/* flex */
.flex { display:flex; }
.flex_start { display:flex; justify-content:flex-start; align-items:center; }
.flex_center { display:flex; justify-content:center; align-items:center; }
.flex_end { display:flex; justify-content:flex-end; align-items:center; }
.flex_spacebetween { display:flex; justify-content:space-between; align-items:center; }
.flex_spacearound { display:flex; justify-content:space-around; align-items:center; }
.justify_start { justify-content:start; }
.justify_end { justify-content:end; }
.justify_center { justify-content:center; }
.justify_between { justify-content:space-between; }
.justify_around { justify-content:space-around; }
.align_start { align-items:start; }
.align_end { align-items:end; }
.align_center { align-items:center; }

/* position */
.relative { position:relative; }
.absolute { position:absolute; }

/* float */
.floatL { float:left; }
.floatR { float:right; }
.clearfix:after { content:""; display:block; clear:both; }

.italic { font-style:italic; }
.bold { font-weight:bold; }
.underline { text-decoration:underline; }
.center { text-align:center; }
.right { text-align:right; }
.left { text-align:left; }
.justify { text-align:justify; }
.nowrap { white-space:nowrap; }
.break-all { word-break:break-all; }
.break-word { word-break:break-word; }
.break-all { word-break:break-all; }

.main_color { color:var(--color_text_main); }
.muted_color { color:var(--color_text_muted); }
.light_color { color:var(--color_text_light); }
.green_color { color:var(--color_green); }
.blue_color { color:var(--color_blue); }
.dark_blue_color { color:var(--color_dark_blue); }
.dark_blue_light_color { color:var(--color_dark_blue_light); }
.light_bg_color { color:var(--color_light_bg); }

/* spacing tokens (4px grid + micro, class number = px) */
:root {
    --space-0:0;
    --space-4:4px;
    --space-6:6px;
    --space-8:8px;
    --space-10:10px;
    --space-12:12px;
    --space-14:14px;
    --space-16:16px;
    --space-18:18px;
    --space-20:20px;
    --space-24:24px;
    --space-28:28px;
    --space-32:32px;
    --space-36:36px;
    --space-40:40px;
    --space-44:44px;
    --space-48:48px;
    --space-52:52px;
    --space-56:56px;
    --space-60:60px;
    --space-64:64px;
    --space-68:68px;
    --space-72:72px;
    --space-76:76px;
    --space-80:80px;
}

/* margin style */
.m_0 { margin:var(--space-0); }
.m_4 { margin:var(--space-4); }
.m_6 { margin:var(--space-6); }
.m_8 { margin:var(--space-8); }
.m_10 { margin:var(--space-10); }
.m_12 { margin:var(--space-12); }
.m_14 { margin:var(--space-14); }
.m_16 { margin:var(--space-16); }
.m_18 { margin:var(--space-18); }
.m_20 { margin:var(--space-20); }
.m_24 { margin:var(--space-24); }
.m_28 { margin:var(--space-28); }
.m_32 { margin:var(--space-32); }
.m_36 { margin:var(--space-36); }
.m_40 { margin:var(--space-40); }
.m_44 { margin:var(--space-44); }
.m_48 { margin:var(--space-48); }
.m_52 { margin:var(--space-52); }
.m_56 { margin:var(--space-56); }
.m_60 { margin:var(--space-60); }
.m_64 { margin:var(--space-64); }
.m_68 { margin:var(--space-68); }
.m_72 { margin:var(--space-72); }
.m_76 { margin:var(--space-76); }
.m_80 { margin:var(--space-80); }

.mt_0 { margin-top:var(--space-0); }
.mt_4 { margin-top:var(--space-4); }
.mt_6 { margin-top:var(--space-6); }
.mt_8 { margin-top:var(--space-8); }
.mt_10 { margin-top:var(--space-10); }
.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_28 { margin-top:var(--space-28); }
.mt_32 { margin-top:var(--space-32); }
.mt_36 { margin-top:var(--space-36); }
.mt_40 { margin-top:var(--space-40); }
.mt_44 { margin-top:var(--space-44); }
.mt_48 { margin-top:var(--space-48); }
.mt_52 { margin-top:var(--space-52); }
.mt_56 { margin-top:var(--space-56); }
.mt_60 { margin-top:var(--space-60); }
.mt_64 { margin-top:var(--space-64); }
.mt_68 { margin-top:var(--space-68); }
.mt_72 { margin-top:var(--space-72); }
.mt_76 { margin-top:var(--space-76); }
.mt_80 { margin-top:var(--space-80); }

.mb_0 { margin-bottom:var(--space-0); }
.mb_4 { margin-bottom:var(--space-4); }
.mb_6 { margin-bottom:var(--space-6); }
.mb_8 { margin-bottom:var(--space-8); }
.mb_10 { margin-bottom:var(--space-10); }
.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_28 { margin-bottom:var(--space-28); }
.mb_32 { margin-bottom:var(--space-32); }
.mb_36 { margin-bottom:var(--space-36); }
.mb_40 { margin-bottom:var(--space-40); }
.mb_44 { margin-bottom:var(--space-44); }
.mb_48 { margin-bottom:var(--space-48); }
.mb_52 { margin-bottom:var(--space-52); }
.mb_56 { margin-bottom:var(--space-56); }
.mb_60 { margin-bottom:var(--space-60); }
.mb_64 { margin-bottom:var(--space-64); }
.mb_68 { margin-bottom:var(--space-68); }
.mb_72 { margin-bottom:var(--space-72); }
.mb_76 { margin-bottom:var(--space-76); }
.mb_80 { margin-bottom:var(--space-80); }

.ml_0 { margin-left:var(--space-0); }
.ml_4 { margin-left:var(--space-4); }
.ml_6 { margin-left:var(--space-6); }
.ml_8 { margin-left:var(--space-8); }
.ml_10 { margin-left:var(--space-10); }
.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_28 { margin-left:var(--space-28); }
.ml_32 { margin-left:var(--space-32); }
.ml_36 { margin-left:var(--space-36); }
.ml_40 { margin-left:var(--space-40); }
.ml_44 { margin-left:var(--space-44); }
.ml_48 { margin-left:var(--space-48); }
.ml_52 { margin-left:var(--space-52); }
.ml_56 { margin-left:var(--space-56); }
.ml_60 { margin-left:var(--space-60); }
.ml_64 { margin-left:var(--space-64); }
.ml_68 { margin-left:var(--space-68); }
.ml_72 { margin-left:var(--space-72); }
.ml_76 { margin-left:var(--space-76); }
.ml_80 { margin-left:var(--space-80); }

.mr_0 { margin-right:var(--space-0); }
.mr_4 { margin-right:var(--space-4); }
.mr_6 { margin-right:var(--space-6); }
.mr_8 { margin-right:var(--space-8); }
.mr_10 { margin-right:var(--space-10); }
.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_28 { margin-right:var(--space-28); }
.mr_32 { margin-right:var(--space-32); }
.mr_36 { margin-right:var(--space-36); }
.mr_40 { margin-right:var(--space-40); }
.mr_44 { margin-right:var(--space-44); }
.mr_48 { margin-right:var(--space-48); }
.mr_52 { margin-right:var(--space-52); }
.mr_56 { margin-right:var(--space-56); }
.mr_60 { margin-right:var(--space-60); }
.mr_64 { margin-right:var(--space-64); }
.mr_68 { margin-right:var(--space-68); }
.mr_72 { margin-right:var(--space-72); }
.mr_76 { margin-right:var(--space-76); }
.mr_80 { margin-right:var(--space-80); }

/* padding style */
.p_0 { padding:var(--space-0); }
.p_4 { padding:var(--space-4); }
.p_6 { padding:var(--space-6); }
.p_8 { padding:var(--space-8); }
.p_10 { padding:var(--space-10); }
.p_12 { padding:var(--space-12); }
.p_14 { padding:var(--space-14); }
.p_16 { padding:var(--space-16); }
.p_18 { padding:var(--space-18); }
.p_20 { padding:var(--space-20); }
.p_24 { padding:var(--space-24); }
.p_28 { padding:var(--space-28); }
.p_32 { padding:var(--space-32); }
.p_36 { padding:var(--space-36); }
.p_40 { padding:var(--space-40); }
.p_44 { padding:var(--space-44); }
.p_48 { padding:var(--space-48); }
.p_52 { padding:var(--space-52); }
.p_56 { padding:var(--space-56); }
.p_60 { padding:var(--space-60); }
.p_64 { padding:var(--space-64); }
.p_68 { padding:var(--space-68); }
.p_72 { padding:var(--space-72); }
.p_76 { padding:var(--space-76); }
.p_80 { padding:var(--space-80); }

.pt_0 { padding-top:var(--space-0); }
.pt_4 { padding-top:var(--space-4); }
.pt_6 { padding-top:var(--space-6); }
.pt_8 { padding-top:var(--space-8); }
.pt_10 { padding-top:var(--space-10); }
.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_28 { padding-top:var(--space-28); }
.pt_32 { padding-top:var(--space-32); }
.pt_36 { padding-top:var(--space-36); }
.pt_40 { padding-top:var(--space-40); }
.pt_44 { padding-top:var(--space-44); }
.pt_48 { padding-top:var(--space-48); }
.pt_52 { padding-top:var(--space-52); }
.pt_56 { padding-top:var(--space-56); }
.pt_60 { padding-top:var(--space-60); }
.pt_64 { padding-top:var(--space-64); }
.pt_68 { padding-top:var(--space-68); }
.pt_72 { padding-top:var(--space-72); }
.pt_76 { padding-top:var(--space-76); }
.pt_80 { padding-top:var(--space-80); }

.pb_0 { padding-bottom:var(--space-0); }
.pb_4 { padding-bottom:var(--space-4); }
.pb_6 { padding-bottom:var(--space-6); }
.pb_8 { padding-bottom:var(--space-8); }
.pb_10 { padding-bottom:var(--space-10); }
.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_28 { padding-bottom:var(--space-28); }
.pb_32 { padding-bottom:var(--space-32); }
.pb_36 { padding-bottom:var(--space-36); }
.pb_40 { padding-bottom:var(--space-40); }
.pb_44 { padding-bottom:var(--space-44); }
.pb_48 { padding-bottom:var(--space-48); }
.pb_52 { padding-bottom:var(--space-52); }
.pb_56 { padding-bottom:var(--space-56); }
.pb_60 { padding-bottom:var(--space-60); }
.pb_64 { padding-bottom:var(--space-64); }
.pb_68 { padding-bottom:var(--space-68); }
.pb_72 { padding-bottom:var(--space-72); }
.pb_76 { padding-bottom:var(--space-76); }
.pb_80 { padding-bottom:var(--space-80); }

.pl_0 { padding-left:var(--space-0); }
.pl_4 { padding-left:var(--space-4); }
.pl_6 { padding-left:var(--space-6); }
.pl_8 { padding-left:var(--space-8); }
.pl_10 { padding-left:var(--space-10); }
.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_28 { padding-left:var(--space-28); }
.pl_32 { padding-left:var(--space-32); }
.pl_36 { padding-left:var(--space-36); }
.pl_40 { padding-left:var(--space-40); }
.pl_44 { padding-left:var(--space-44); }
.pl_48 { padding-left:var(--space-48); }
.pl_52 { padding-left:var(--space-52); }
.pl_56 { padding-left:var(--space-56); }
.pl_60 { padding-left:var(--space-60); }
.pl_64 { padding-left:var(--space-64); }
.pl_68 { padding-left:var(--space-68); }
.pl_72 { padding-left:var(--space-72); }
.pl_76 { padding-left:var(--space-76); }
.pl_80 { padding-left:var(--space-80); }

.pr_0 { padding-right:var(--space-0); }
.pr_4 { padding-right:var(--space-4); }
.pr_6 { padding-right:var(--space-6); }
.pr_8 { padding-right:var(--space-8); }
.pr_10 { padding-right:var(--space-10); }
.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_28 { padding-right:var(--space-28); }
.pr_32 { padding-right:var(--space-32); }
.pr_36 { padding-right:var(--space-36); }
.pr_40 { padding-right:var(--space-40); }
.pr_44 { padding-right:var(--space-44); }
.pr_48 { padding-right:var(--space-48); }
.pr_52 { padding-right:var(--space-52); }
.pr_56 { padding-right:var(--space-56); }
.pr_60 { padding-right:var(--space-60); }
.pr_64 { padding-right:var(--space-64); }
.pr_68 { padding-right:var(--space-68); }
.pr_72 { padding-right:var(--space-72); }
.pr_76 { padding-right:var(--space-76); }
.pr_80 { padding-right:var(--space-80); }