@charset "utf-8";
:root{
    color-scheme: light;
    
    --view-height: calc((var(--vh, 1vh) * 100));

    --logo-width: 42rem;
    --logo-height: 5.6rem;

    --logo-dark-width: 44rem;
    --logo-dark-height: 5.6rem;

    --primary-lighten5: #F7F3FF;
    --primary-lighten4: #EEEDFE;
    --primary-lighten3: #D4D1F5;
    --primary-lighten2: #C58CFF;
    --primary-lighten1: #822EFF;
    --primary-base: #5C3CAB;
    --primary-darken1: #3B2278;
    --primary-darken2: #23134D;
    --primary-darken3: #1C0E40;
    --primary-darken4: #11062B;

    --secondary-lighten5: #EAEEFF;
    --secondary-lighten4: #A5B4FF;
    --secondary-lighten3: #8EA1FD;
    --secondary-lighten2: #788EFB;
    --secondary-lighten1: #617BF9;
    --secondary-base: #4B68F8;
    --secondary-darken1: #3E56CE;
    --secondary-darken2: #2F4199;
    --secondary-darken3: #212D66;
    --secondary-darken4: #141B3D;

    --danger-base: #DE1703;
    --danger-darken1: #A80000;
    --danger-lighten5: #fde5e9;

    --warning-base: #EFE73B;
    --warning-lighten5: #fffddf;

    --success-base: #008351;
    --success-lighten5: #ecfff0;

    --info-base: #006ED0;
    --info-lighten5: #e9f5ff;

    --grey-lighten5: #F2F4F5;
    --grey-lighten4: #DDD;
    --grey-lighten3: #CCC;
    --grey-lighten2: #AAA;
    --grey-lighten1: #767676;
    --grey-base: #555; 
    --grey-darken1: #444;
    --grey-darken2: #333;
    --grey-darken3: #2D2D2D;
    --grey-darken4: #000;

    --border-color: var(--grey-lighten4);
    --border-style: solid;
    --border-width: 1px;
    --border: var(--border-width) var(--border-style) var(--border-color);

    /* Foundation */
    --surface-bg: #fff;
    --on-filled-color: #fff;
    --focus-border-width: 1px;
    --focus-border-color: var(--danger-base);
    --scrollbar-width: clamp(3px, .4rem, .4rem);
    --scrollbar-thumb-color: var(--primary-darken1);
    --scrollbar-track-color: var(--grey-lighten4);

    --container: 1400px;
    --container-gutter: 16px;

    --timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
    --transition: .425s var(--timing-function);

    /* Header */    
    --header-head: 68px;
    --header-body: 84px;
    --header-height: calc(var(--header-head) + var(--header-body));
    --gnb-mega-height: 52rem; /* PC GNB 메가메뉴 펼침 높이(고정값). 콘텐츠에 맞게 이 값만 조절 */

    /* Menual */
    --menual-width: 380px;

    /* Typography */
    --tit-font-size-sm: clamp(20px, 2.4rem, 2.4rem);
    --tit-font-size: clamp(24px, 3.2rem, 3.2rem);
    --tit-font-size-lg: clamp(28px, 4rem, 4rem);

    --txt-font-size-sm: clamp(12px, 1.5rem, 1.5rem);
    --txt-font-size: clamp(14px, 1.7rem, 1.7rem);
    --txt-font-size-lg: clamp(16px, 1.9rem, 1.9rem);

    /* Input */
    --input-height: var(--btn-height);
    --input-border-color: var(--border-color);
    --input-bg-color: var(--surface-bg);
    --input-font-size: var(--txt-font-size);
    --input-border-radius: .8rem;
    --input-padding: 1.6rem;
    --input-focus-border-color: var(--primary-base);
    --input-placeholder-color: var(--grey-base);
    --input-textarea-height: 120px;
    --input-textarea-height-long: 160px;

    /* 대형 입력 필요 시 추가 (.input-primary.lg)
    --input-height-lg: var(--btn-height-lg);
    --input-border-color-lg: var(--grey-lighten1);
    --input-border-radius-lg: .8rem;
    */

    --switch-width: clamp(32px, 4.8rem, 4.8rem);
    --switch-height: clamp(16px, 2rem, 2rem);
    --switch-gap: 2px;
    
    --switch-height-lg: clamp(20px, 2.4rem, 2.4rem);

    /* Tab */
    --tab-gap: 0;
    --tab-margin-bottom: 6rem;
    --tab-btn-font-size: var(--txt-font-size-lg);
    --tab-btn-font-weight: 700;
    --tab-btn-color: var(--primary-darken1);
    --tab-btn-active-color: var(--on-filled-color);

    --tab-secondary-gap: 0 .8rem;
    --tab-secondary-margin-bottom: 2rem;
    --tab-secondary-btn-height: clamp(25px, 3.8rem, 3.8rem);
    --tab-secondary-btn-padding: 0 2.5rem;
    --tab-secondary-btn-border-radius: 3.8rem;
    --tab-secondary-btn-border-color: var(--grey-darken4);
    --tab-secondary-btn-font-size: clamp(14px, 1.7rem, 1.7rem);
    --tab-secondary-btn-font-weight: 600;
    --tab-secondary-btn-active-bg: var(--grey-darken4);
    --tab-secondary-btn-active-color: var(--on-filled-color);

    /* Table */
    --table-row-border-color: var(--border-color);
    --table-th-height: 4.8rem;
    --table-th-font-size: var(--txt-font-size-sm);
    --table-th-font-weight: 700;
    --table-th-bg-color: var(--primary-lighten5);
    --table-th-padding: 1.2rem;
    --table-td-height: 5rem;
    --table-td-font-size: var(--txt-font-size);
    --table-td-color: var(--grey-darken2);
    --table-td-padding: 1.6rem 1.2rem;
    --table-row-cell-height: var(--btn-height-lg);
    --table-row-cell-padding: 2rem 1.6rem;
    --table-row-th-font-size: var(--txt-font-size-lg);
    --table-btn-color: var(--primary-base);
    --table-btn-hover-color: var(--primary-darken2);

    /* Thumb */
    --thumb-border-radius: 1.6rem;
    --thumb-ratio: 100%;
    --thumb-hover-border-width: 2px;
    --thumb-hover-border-color: var(--primary-base);

    --control-icon-size: var(--icon-size-sm); 
    --control-label-font-size: var(--txt-font-size-sm); 
    --control-label-color: var(--grey-darken2); 
    --control-gap: .8rem;
    --control-btn-height: var(--btn-height-lg);
    --control-btn-padding: 0 1.6rem;
    --control-btn-font-size: clamp(14px, 1.9rem, 1.9rem);
    --control-btn-font-weight: 700;
    --control-btn-border-radius: .8rem;
    --control-btn-gap: 1.6rem;
    --control-w-gap: 1.2rem 3.2rem;
    --control-w-gap-sm: 1.2rem 1.6rem;
    --control-btn-checked-color: var(--on-filled-color);

    /* Label */
    --label-height: clamp(24px, 3.4rem, 3.4rem);
    --label-font-size: var(--txt-font-size);
    --label-font-weight: 700;
    --label-padding: 0 1.2rem;
    --label-border-radius: 999px;
    --label-filled-color: var(--on-filled-color);
    --label-w-gap: 4px;

    --label-height-sm: clamp(22px, 3rem, 3rem);
    --label-font-size-sm: var(--txt-font-size-sm);
    --label-font-weight-sm: 400;

    --label-height-xs: clamp(22px, 2.6rem, 2.6rem);
    --label-padding-xs: 0 1.6rem;
    --label-font-size-xs: var(--txt-font-size-sm);
    --label-font-weight-xs: 700;

    /* Pagination */
    --pagination-size: clamp(26px, 4rem, 4rem);
    --pagination-gap: .8rem;
    --pagination-margin-top: 3.6rem;
    --pagination-active-bg: transparent;
    --pagination-active-color: var(--primary-base);
    --pagination-hover-bg: var(--primary-lighten4);
    --pagination-control-icon-size: var(--icon-size);
    --pagination-num-color: var(--grey-base);
    --pagination-num-active-font-weight: 700;

    /* Modal */
    --modal-width: 56rem;
    --modal-border-radius: 2rem;
    --modal-overlay-bg: rgba(0, 0, 0, .6);
    --modal-border-color: var(--primary-base);
    --modal-bg-color: var(--surface-bg);
    --modal-padding: 3rem;

    /* Icon */
    --icon-size: clamp(20px, 2.4rem, 2.4rem);
    --icon-size-lg: 2.8rem;
    --icon-size-sm: clamp(16px, 2rem, 2rem);
    --icon-size-xs: clamp(12px, 1.6rem, 1.6rem);

    /* Page section (contents.css) */
    --tit-w-margin-bottom: clamp(12px, 1.6rem, 1.6rem);
    --tit-w-margin-bottom-lg: 2.4rem;
    --tit-w-margin-bottom-xl: 4rem;
    --page-section-gap: 6.4rem;
    --page-section-gap-lg: 8rem;
    --page-section-gap-sm: 4rem;
    --page-section-gap-xs: 3rem;
    --page-section-tit-margin-bottom: 4rem;
    --page-section-tit-color: var(--primary-base);
    --page-section-tit-font-weight: 500;
    --page-section-tit-w-gap: 1.6rem;
    --page-section-tit-w-btn-margin-top: 2rem;

    /* Button */
    --btn-height-xs: clamp(24px, 3.2rem, 3.2rem);
    --btn-height-sm: clamp(28px, 4rem, 4rem);
    --btn-height: clamp(32px, 4.8rem, 4.8rem);
    --btn-height-lg: clamp(40px, 5.6rem, 5.6rem);
    --btn-height-xl: clamp(48px, 6.4rem, 6.4rem);
    
    --btn-padding-xs: 0 1.2rem;
    --btn-padding-sm: 0 1.2rem;
    --btn-padding: 0 1.6rem;
    --btn-padding-lg: 0 2rem;
    --btn-padding-xl: 0 2.4rem;
    
    --btn-font-size-xs: var(--txt-font-size);
    --btn-font-size-sm: var(--txt-font-size);
    --btn-font-size: var(--txt-font-size);
    --btn-font-size-lg: var(--txt-font-size-lg);
    --btn-font-size-xl: var(--tit-font-size-sm);

    --btn-border-radius: .8rem;
    --btn-gap: .4rem;
    --btn-filled-color: var(--on-filled-color);

    --bottom-btn-margin-top: 4rem;
    --bottom-btn-gap: 1.6rem;
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
    :root{
        --header-head: 0;
        --header-body: 8.6rem;
        --header-height: var(--header-body);
    }
}
@media screen and (max-width: 767px){
    :root{
        --logo-width: 32rem;
        --logo-dark-width: 32rem;

        --table-row-cell-padding: 1.6rem 1.2rem;
    }
}