*,
*::after,
*::before {
  box-sizing: border-box;
}

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@layer components {
    ._container_7pthe_2 {
        --scrollbar-width: 8px;
        --scrollbar-radius: 4px;
        --scrollbar-color: #c0c0c0;
        --scrollbar-hover-color: #8d8d8d;
        --scrollbar-active-color: #7c7c7c;
        --scrollbar-transition-duration: 0.3s;
        --scrollbar-hide-delay: 1s;
        /** 짝수가 아닐 경우 모바일 기기와 같은 고ppi 기기에서 마스킹이 제대로 안 될 수 있음. */
        --scrollbar-end-padding: 2px;
    }

    ._content_7pthe_14 {
        overflow-y: scroll;
        scrollbar-gutter: stable;
        width: 100%;
        height: 100%;
    }

    @supports selector(::-webkit-scrollbar) {
        ._container_7pthe_2 {
            padding-inline-end: var(--scrollbar-end-padding);
        }

        ._content_7pthe_14 {
            --mask-width: var(--scrollbar-width);

            /** 스크롤바 숨기기 */
            mask-image: linear-gradient(to top, transparent, black),
                linear-gradient(to left, transparent var(--mask-width), black var(--mask-width));
            mask-size: 100% 20000px;
            mask-position: left bottom;
            -webkit-mask-image: linear-gradient(to top, transparent, black),
                linear-gradient(to left, transparent var(--mask-width), black var(--mask-width));
            -webkit-mask-size: 100% 20000px;
            -webkit-mask-position: left bottom;

            transition: mask-position var(--scrollbar-transition-duration), -webkit-mask-position var(--scrollbar-transition-duration);
        }

        /** touchstart, touchend, scroll 이벤트를 통해 보여주기 */
        ._content_7pthe_14[data-scrolling] {
            -webkit-mask-position: left top;
            mask-position: left top;
        }

        /** 마우스를 사용할 경우에는 hover pseudo-selector로 보여주기 */
        @media (pointer: fine) {
            ._content_7pthe_14 {
                transition-delay: var(--scrollbar-hide-delay);
            }

            ._content_7pthe_14:hover {
                -webkit-mask-position: left top;
                mask-position: left top;
                transition-delay: 0s;
            }
        }

        ._content_7pthe_14::-webkit-scrollbar {
            background: none;
            width: var(--scrollbar-width);
        }

        ._content_7pthe_14::-webkit-scrollbar-thumb {
            background-color: var(--scrollbar-color);
            border-radius: var(--scrollbar-radius);
        }

        ._content_7pthe_14::-webkit-scrollbar-thumb:hover {
            background-color: var(--scrollbar-hover-color);
        }

        ._content_7pthe_14::-webkit-scrollbar-thumb:active {
            background-color: var(--scrollbar-active-color);
        }

        /** 스크롤바 위아래 여백을 위해 투명한 화살표 버튼을 삽입 */
        ._content_7pthe_14::-webkit-scrollbar-button:vertical:start:decrement {
            display: block;
            height: 4px;
        }

        ._content_7pthe_14::-webkit-scrollbar-button:vertical:end:increment {
            display: block;
            height: 4px;
        }
    }

    @supports not selector(::-webkit-scrollbar) {

        /** Firefox에서는 표준 속성을 통한 조작만 가능 */
        ._content_7pthe_14 {
            scrollbar-width: var(--scrollbar-width);
            scrollbar-color: var(--scrollbar-color) transparent;
        }
    }

}
._native_1l5f6_1 {
    width: 300px;
    height: 300px;
    border: 1px solid black;
    border-radius: 8px;
    overflow-y: scroll;
    padding-inline: 8px;
}

._outer_1l5f6_10 {
    width: 300px;
    height: 300px;
    border: 1px solid black;
    border-radius: 8px;
}

._inner_1l5f6_17 {
    width: 150px;
    height: 150px;
    border: 1px solid black;
    border-radius: 4px;
}

._content_1l5f6_24 {
    padding-inline: 8px;
}

._shrinkable_1l5f6_28 {
    width: 304px;
    height: 500px;
    border: 1px solid black;
    border-radius: 8px;
    transition: height 0.5s ease;
}

._shrinkable_1l5f6_28._shrink_1l5f6_28 {
    height: 250px;
}

._focusable_1l5f6_40 {
    width: 300px;
    height: 300px;
    border: 1px solid black;
    border-radius: 8px;
}
html,
body,
#root {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

#root {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 40px 60px;
}

@layer components;