@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

* {
    -webkit-text-size-adjust: none;
}

html, body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0px;
    padding: 0px;
    font-family:
        Pretendard,
        'Pretendard Variable',
        -apple-system,
        BlinkMacSystemFont,
        system-ui,
        Roboto,
        'Helvetica Neue',
        'Segoe UI',
        'Apple SD Gothic Neo',
        'Noto Sans KR',
        'Malgun Gothic',
        'Apple Color Emoji',
        'Segoe UI Emoji',
        'Segoe UI Symbol',
        sans-serif !important;
    font-feature-settings: 'tnum' !important;
    background-color: var(--background-2);
    scrollbar-width: thin;
    scrollbar-color: #333333 #111111;
    scrollbar-gutter: stable;
}

.scrollBlock{
	height: 100%;
	min-height: 100%;
	overflow: hidden !important;
	touch-action: none;
}

:root {
    --spring-ease-0: linear(
        0,
        0.018370213166896243,
        0.0664899439029012,
        0.13508085945895032,
        0.21645418873386868,
        0.3044205031659212,
        0.394150016564211,
        0.4820074208629802,
        0.5653783028578574,
        0.6424987915984848,
        0.7122959773447298,
        0.7742435720992547,
        0.828235037955453,
        0.8744748163944571,
        0.9133872031871283,
        0.9455417102117694,
        0.9715933406431,
        0.9922360003828435,
        1.0081672153781387,
        1.0200623742412864,
        1.028556832084252,
        1.0342343674672376,
        1.0376206598085636,
        1.0391806352038837,
        1.0393187045063688,
        1.0383810823013313,
        1.036659525228507,
        1.034395961030338,
        1.0317875951734732,
        1.0289921802918325,
        1.02613321604724,
        1.0233049146920066,
        1.0205768222384455,
        1.017998028350087,
        1.0156009314983352,
        1.0134045511182403,
        1.0114173968632125,
        1.0096399178693556,
        1.00806656330935,
        1.0066874904038068,
        1.0054899582788548,
        1.0044594462915877,
        1.0035805342472863,
        1.0028375797539646,
        1.0022152251574208,
        1.001698763350712,
        1.001274388466045,
        1.0009293541895057,
        1.0006520592997805,
        1.0004320770950474
    );
    --smooth-spring-ease-0: linear(
        0,
        0.017523096306421904,
        0.061551935550104964,
        0.1219013822495576,
        0.1912078645890012,
        0.26424111765711533,
        0.33737273379315535,
        0.40816728654014445,
        0.47506905321389603,
        0.5371631129795577,
        0.5939941502901619,
        0.6454298932405316,
        0.6915589588159975,
        0.732615118428398,
        0.7689217620241717,
        0.8008517265285442,
        0.8287987432908619,
        0.8531576121745653,
        0.8743108767424541,
        0.8926202950904051,
        0.9084218055563291,
        0.9220230005335159,
        0.9337023645234305,
        0.9437097198300519,
        0.9522674671156839,
        0.9595723180054871,
        0.9657973005912832,
        0.971093881967279,
        0.9755940994712127,
        0.9794126277314444,
        0.9826487347633355,
        0.9853880994186707,
        0.9877044761785129,
        0.989661202914636,
        0.9913125538468105,
        0.9927049442755639,
        0.9938779963713112,
        0.9948654768065116,
        0.9956961176724107,
        0.9963943321849779,
        0.9969808363488774,
        0.9974731871562563,
        0.9978862471527188,
        0.9982325843807912,
        0.9985228158640643,
        0.9987659019591332,
        0.9989693981012616,
        0.999139669718211,
        0.9992820753931969,
        0.9994011227261325
    );

    /* TIMING DESIGN SYSTEM (TDS) */
    --background-1: #ffffff;
    --background-2: #fafafa;
    --background-3: #f5f5f7;
    --background-4: #ebebed;
    --background-5: #aaaaaa;
    --background-transparent: #00000000;
    --background-nav: rgba(8, 9, 11, 0.85);
    --background-nav-reflect: rgba(255, 255, 255, 0.85);
    --background-second-nav: rgba(29, 29, 29, 0.74);
    --background-second-nav-reflect: rgba(250, 250, 252, 0.8);


    --backdrop-1: rgba(250 250 250 / 0.8);
    --backdrop-2: rgba(250 250 250 / 0.5);
    --backdrop-3: rgba(250 250 250 / 0.1);
    --backdrop-4: rgba(255 255 255 / 0.77);

    --label-1: #1d1d1d;
    --label-2: #333333;
    --label-3: #666666;
    --label-4: #848484;
    --label-5: #aaaaaa;
    --label-reflect: #ffffff;

    --separators-1: #d6d6d6;
    --separators-2: #efefef;

    --icons-1: #1d1d1d;
    --icons-2: #666666;
    --icons-3: #848484;
    --icons-4: #999999;
    --icons-5: #aaaaaa;
    --icons-6: #fafafa;
    --icons-7: #ffffff;

    --active-1: rgba(120 120 128 / 0.2);
    --active-2: rgba(120 120 128 / 0.14);

    --brand: #5ea152;
    --brand-1: #7eb475;
    --brand-2: #9ec797;
    --brand-3: #bfd9bb;
    --brand-4: #deecdc;
    --brand-5: #e5f0e3;
    --brand-6: #ebf4ea;
    --brand-7: #ebf4ea;
    --brand-8: #f2f7f0;
    --brand-9: #f9fbf8;
    
    --colors-red: #ff453a;
    --colors-tomato: #db4534;
    --colors-banana: #ffbb00;

    --overlay-primary: rgba(250 250 250 / 0.2);
    --overlay-secondary: rgba(0 0 0 / 0.5);
    --overlay-tertiary: rgba(0 0 0 / 0.3);
    --overlay-purple: rgba(93 92 222 / 0.8);

    word-break: keep-all;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-callout: none;
    outline: none;
}

button {
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    background: none;
    border: none;
    outline: none;
    user-select: none;
}

svg {
    pointer-events: none;
}

textarea {
    font-family: Pretendard, 'Pretendard Variable' !important;
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

/* ----------------------------------- transition ----------------------------------- */

.transtion--default-opacity{
    transition-property: opacity;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0,0,0.4,1);
}

.transtion--default-scale{
    transition-property: transform;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0,0,0.4,1);
}

.transtion--default-fill{
    overflow: hidden;
}

.transtion--default-fill::before{
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: var(--active-1);
    top: 0px;
    left: 0px;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0,0,0.4,1);
}

.transtion--default-fill:active::before{
    opacity: 1;
    transition-duration: 0.14s;
}

/* PC에서만 Hover */
@media (hover: hover) and (pointer: fine){

    .transtion--default-opacity:active{
        opacity: 0.6 !important;
        transition-duration: 0.14s;
    }

    .transtion--default-opacity:hover{
        opacity: 0.8;
        transition-duration: 0.14s;
    }

    .transtion--default-scale:active{
        transform: scale(0.98);
        transition-duration: 0.14s;
    }
    
}

/* 모바일에서만 Active */
@media (hover: none) and (pointer: coarse){

    .transtion--default-opacity:active{
        opacity: 0.6;
        transition-duration: 0.14s;
    }

    .transtion--default-scale:active{
        transform: scale(0.98);
        transition-duration: 0.14s;
    }

}

/* === 테마 수동 오버라이드 레이어 (미디어 쿼리보다 우선 적용) === */
:root[data-theme='light'] {
    /* TIMING DESIGN SYSTEM (TDS) - Light Theme Override */
    --background-1: #ffffff;
    --background-2: #fafafa;
    --background-3: #efefef;
    --background-4: #aaaaaa;
    --background-footer_control: linear-gradient(to bottom, transparent 0%, rgba(170, 170, 170, 0) 0%, #efefef 100%);

    --backdrop-1: rgba(250 250 250 / 0.8);
    --backdrop-2: rgba(250 250 250 / 0.5);
    --backdrop-3: rgba(250 250 250 / 0.1);
    --backdrop-4: rgba(255 255 255 / 0.77);

    --label-1: #1d1d1d;
    --label-2: #333333;
    --label-3: #666666;
    --label-4: #848484;
    --label-5: #aaaaaa;
    --label-reflect: #ffffff;

    --separators-1: #d6d6d6;
    --separators-2: #efefef;

    --icons-1: #1d1d1d;
    --icons-2: #666666;
    --icons-3: #848484;
    --icons-4: #999999;
    --icons-5: #aaaaaa;
    --icons-6: #fafafa;
    --icons-7: #ffffff;

    --active-1: rgba(120 120 128 / 0.2);
    --active-2: rgba(120 120 128 / 0.14);

    --block-default-l: 92%;
}

:root[data-theme='dark'] {
    /* TIMING DESIGN SYSTEM (TDS) - Dark Theme Override */
    --background-1: #181818;
    --background-2: #111111;
    --background-3: #333333;
    --background-4: #666666;
    --background-footer_control: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 10%, #000000 100%);

    --backdrop-1: rgba(17 17 17 / 0.8);
    --backdrop-2: rgba(17 17 17 / 0.5);
    --backdrop-3: rgba(17 17 17 / 0.1);
    --backdrop-4: rgba(34 34 34 / 0.77);

    --label-1: #ffffff;
    --label-2: #dddddd;
    --label-3: #aaaaaa;
    --label-4: #848484;
    --label-5: #666666;
    --label-reflect: #1d1d1d;

    --separators-1: #424242;
    --separators-2: #333333;

    --icons-1: #ffffff;
    --icons-2: #aaaaaa;
    --icons-3: #848484;
    --icons-5: #666666;
    --icons-4: #777777;
    --icons-6: #333333;
    --icons-7: #1d1d1d;

    --active-1: rgba(120 120 128 / 0.3);
    --active-2: rgba(120 120 128 / 0.2);

    --block-default-l: 20%;
}