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

/* ==========================================================================
    Reset
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}}body{min-height:100vh;line-height:1.5;text-rendering:optimizeSpeed;font-family:'Pretendard',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}img,picture,video,canvas,svg{display:block;max-width:100%;height:auto;}input,button,textarea,select{font:inherit;color:inherit;background:transparent;border:none;}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer;}input:focus,textarea:focus,select:focus{outline:none;}ol,ul,li{list-style:none;}a{text-decoration:none;color:inherit;}h1,h2,h3,h4,h5,h6{text-wrap:balance;}p{text-wrap:pretty;}[hidden]{display:none !important;}

/* ==========================================================================
    Variables
   ========================================================================== */
:root {
    --container-width: 1280px;
    --bg-secondary: #F9FAFB;

    --text-primary: #35373A;
    --text-secondary: #595C61;
    --font-primary: #111827;
    --font-secondary: #374151;
    --font-teritory: #9CA3AF;
    --font-disabled: #E5E7EB;

    --Smart-office-400: #E8556A;
    --Smart-office-500: #D5394E;
    --Smart-office-600: #B52B40;
    --Smart-retail-500: #3FC28D;
    --Smart-factory-500: #364FAA;

    --Red-500: #D5394E;
    --color-red-600: #DA0021;
    --color-neutral-50: #F2F3F3;
    --color-neutral-600: #72767D;

    --font-size-sm: 16px;
    --font-size-md: 18px;
    --font-size-2xl: 26px;
    --font-size-4xl: 40px;
    --font-size-lg: 20px;
    --size-H1: 36px;
    --size-H2: 30px;
    --size-H3: 20px;
    --size-h4: 18px;
    --size-title: 16px;
    --size-body: 14px;
    --size-caption: 12px;

    --font-weight-regular: 300;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --radius-small: 8px;
    --radius-s: 4px;
    --radius-m: 8px;
    --radius-l: 16px;
    --radius-full: 9999px;

    --border-brand: #D5394E;
    --border-primary: #D7D8DA;
    --border-secondary: #595C61;

    --Neutral-50: #F9FAFB;
    --Neutral-100: #F3F4F6;
    --Neutral-200: #E5E7EB;
    --Neutral-300: #D1D5DB;
    --Neutral-500: #6B7280;

    --sub: #596271;
    --mockup: #F2F2F2;
    --Number: 26px;
}

@media screen and (max-width: 768px) {
    :root {
        --size-H1: 24px;
        --size-H2: 22px;
        --size-H3: 20px;
        --size-h4: 18px;
        --size-title: 16px;
        --size-body: 14px;
        --size-caption: 11px;
    }
}

/* 드래그 하이라이트 색상 설정 */
::selection {
    background-color: var(--Smart-office-500, #D5394E);
    color: #fff;
}

/* 스크린 리더용 웹 접근성 숨김 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 반응형 디스플레이 헬퍼 */
.web-hidden {
    display: none;
}
.mobile-hidden {
    display: block;
}
span.mobile-hidden {
    display: inline-block;
}

@media screen and (max-width: 768px) {
    .web-hidden {
        display: block;
    }
    .mobile-hidden,
    span.mobile-hidden {
        display: none;
    }
}