@charset "utf-8";

/* ========================================
   ROOT
======================================== */

:root {
    --color-primary: #6c963b;
    --color-secondary: #f28c28;
    --color-text: #333;
    --color-text-sub: #666;
    --color-black: #000;
    --color-focus: #6c963b;
    --color-border: #ddd;
    --color-bg: #f7f8f5;

    --inner-width: 1520px;
    --inner-padding: 30px;
    --inner-padding-mobile: 20px;

    --font-size-base: 1rem;
    --line-height-base: 1.6;

    --transition-base: 0.3s ease;

    --font-family-base: 'Paperozi';
}

/* ========================================
   BASE
======================================== */

html {font-size: 16px;}

body {
    font-family: "Paperozi", "Noto Sans KR", "Malgun Gothic", sans-serif;
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: var(--line-height-base);
    color: var(--color-text);
    background: var(--color-white);
    word-break: keep-all;
    overflow-wrap: break-word;
}

body,button,input,select,textarea {font-family: var(--font-family-base);}

button,input,select,textarea {font-size: inherit; line-height: inherit;}

/* ========================================
   COMMON LAYOUT
======================================== */

.inner {
    width: 100%;
    max-width: calc(var(--inner-width) + (var(--inner-padding) * 2));
    margin: 0 auto;
    padding: 0 var(--inner-padding);
}

.main-sns .inner {
    position: relative;
}

@media (max-width: 768px) {
    .inner {padding: 0 var(--inner-padding-mobile);}
}

/* ========================================
 ACCESSIBILITY
======================================== */

.blind {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-navigation {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
}

.skip-navigation a {
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    padding: 0.75rem 1rem;
    color: var(--color-white);
    background: var(--color-black);
    text-align: center;
}

.skip-navigation a:focus {
    top: 0;
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

[aria-disabled="true"] {cursor: default;}

/* ========================================
   MEDIA
======================================== */

picture {display: block;}

svg {display: block;}

iframe,video {max-width: 100%;}

/* ========================================
   ACCESSIBILITY UTILITY
======================================== */

.is-scroll-lock {overflow: hidden;}

@media (prefers-reduced-motion: reduce) {
    html {scroll-behavior: auto;}

    *,*::before,*::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}