/*-------------------------------
  Pretendard 폰트 설정
-------------------------------*/
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

/*-------------------------------
  기본 스타일
  **[수정]: 스크롤 기능을 유지하면서 스크롤바만 숨깁니다.**
-------------------------------*/
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    color: #121212;
    font-family: 'Pretendard';
    user-select: none;
    /* pointer-events: none; <- 이 속성은 인터랙션을 완전히 막으므로 필요에 따라 조정하세요. */
    -ms-overflow-style: none; /* IE/Edge 스크롤바 숨김 (기능 유지) */
    overscroll-behavior: none; 
    
    /* body에 넘치는 콘텐츠가 있다면 스크롤 가능하게 설정 */
    overflow-y: auto; 
}

/* Webkit 기반 브라우저 (Chrome, Safari) 스크롤바 숨김 */
body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

body *,
img {
    -webkit-user-drag: none;
    pointer-events: auto;
}

.app-container {
    font-family: 'Pretendard';
    width: 100%;
    max-width: 100vw;
    height: 100vh;
    background-color: #121212;
    position: relative;
    padding-bottom: env(safe-area-inset-bottom); /* iOS, 일부 안드로이드 */
    
    /* [수정]: 'overflow: hidden;'을 'overflow-y: auto;'로 변경하여 스크롤 기능을 활성화합니다. */
    overflow-y: auto; /* 전체 스크롤 활성화 */

    /* IE/Edge 스크롤바 숨김 (기능 유지) */
    -ms-overflow-style: none; 
}

/* Webkit 기반 브라우저 (Chrome, Safari) app-container 스크롤바 숨김 */
.app-container::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/*-------------------------------
  입력 및 UI
-------------------------------*/
.group {
    position: relative;
    margin-top: 50px;
}

.input {
    font-size: 16px;
    padding: 10px 10px 10px 5px;
    display: block;
    width: 315px;
    border: none;
    border-bottom: 1px solid #515151;
    background: transparent;
}

.input:focus {
    outline: none;
}

inputlabel {
    color: #999;
    font-size: 15px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 10px;
    transition: 0.2s ease all;
}

.input:focus~inputlabel,
.input:valid~inputlabel {
    top: -20px;
    font-size: 14px;
    color: #3b82f6;
}

.bar {
    position: relative;
    display: block;
    width: 315px;
}

.bar:before,
.bar:after {
    content: '';
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #3b82f6;
    transition: 0.2s ease all;
}

.bar:before {
    left: 50%;
}

.bar:after {
    right: 50%;
}

.input:focus~.bar:before,
.input:focus~.bar:after {
    width: 50%;
}

.highlight {
    position: absolute;
    height: 60%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: 0.5;
}

.input:focus~.highlight {
    animation: inputHighlighter 0.3s ease;
}

@keyframes inputHighlighter {
    from { background: #3b82f6; }
    to { width: 0; background: transparent; }
}

.fade-in {
    animation: fadeIn 0.3s;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/*-------------------------------
  autocomplete-items
  **[확인]: 이 섹션의 스크롤바 스타일은 유지됩니다.**
-------------------------------*/
.autocomplete-items {
    position: absolute;
    z-index: 99;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 300px;
    overflow-y: auto;

    /* Firefox 스크롤바 */
    scrollbar-width: thin;
    scrollbar-color: #313131 #222222;
}

/* Webkit 기반 스크롤바 (Chrome, Safari) */
.autocomplete-items::-webkit-scrollbar {
    width: 3px;
}

.autocomplete-items::-webkit-scrollbar-track {
    background: #222222;
    border-radius: 2px;
}

.autocomplete-items::-webkit-scrollbar-thumb {
    background-color: #313131;
    border-radius: 5px;
}

.autocomplete-items::-webkit-scrollbar-thumb:hover {
    background-color: #3b3b3b;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #1b1b1b;
    border-bottom: 2px solid #444444;
    color: #fff;
}

.autocomplete-items div:hover {
    color: #657bd1;
}

.autocomplete-items small {
    color: #888;
    font-size: 12px;
}

.autocomplete-active {
    background-color: #3b82f6 !important;
}