/* 폰트 등록 (파일 경로: assets/fonts/Pretendard/Pretendard-Regular.otf) */
@font-face{
    font-family:'Pretendard';
    src:url('../assets/fonts/Pretendard/Pretendard-Regular.otf') format('opentype');
    font-weight:400;
    font-style:normal;
}
 
/* 전체 요소 초기화 + 글씨체 지정 (여기서 글씨체 변경) */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:var(--font-family-base);
    letter-spacing:0;
}
 
html, body{
    margin:0;
    height:100%;
    overflow:hidden;
}
 
/* ============================================================ */
/* 전체 레이아웃 (4:3 컨테이너)                                  */
/* 파일명 : css/layout.css                                       */
/* 역할   : 화면 가운데 4:3 영역 고정 + 좌우 흰 여백             */
/* ============================================================ */
 
/* 바깥 배경 (좌우 흰 여백이 되는 영역) */
.app-bg{
    width:100%;
    height:100vh;              /* min-height → height 고정 */
    background:var(--color-container-base-primary);         /* 좌우 여백 색 (원하면 회색으로) */
    display:flex;
    align-items:center;        /* 세로도 가운데 */
    justify-content:center;     /* 가로 가운데 */
    overflow:hidden;           /* 스크롤 제거 핵심 */
    padding:0;
}
 
/* ============================================================ */
/* 4:3 컨테이너                                                  */
/* max-width 로 최대 크기만 고정 → 화면 작아지면 비율 유지 축소  */
/* aspect-ratio 4/3 으로 세로가 자동 결정됨                      */
/* ============================================================ */
.app-frame{
    width:100%;
    max-width:calc(var(--spacing-gap-40) * 40);          /* 최대 가로폭 (조절 지점) */
    height:100vh;          /* 화면 높이 넘지 않게 */
    height:100dvh; /* 실제 보이는 높이 (아래 줄이 우선 적용됨) */
    background:var(--color-container-base-primary);
    display:flex;
    flex-direction:column;     /* 상단바 → 본문 세로 배치 */
    overflow:hidden;
}
 
/* 좁은 화면에서는 16:9 상자를 해제 */
@media (max-width: 1279px){
    html, body{
        overflow:hidden;
    }
    .app-bg{
        height:100vh;
        min-height:100vh;
        align-items:flex-start;
        overflow:hidden;
    }
    .app-frame{
        aspect-ratio:auto;
        max-width:100%;
        max-height:100vh;
        height:100vh;          /* ★ 핵심: auto였던 걸 100vh로 고정 */
        overflow:hidden;
    }
}
 
 
@media (max-height:600px) and (max-width:1279px){
    html, body{
        overflow:auto;
    }
 
    .app-frame{
        height:auto;
        min-height:100dvh;
    }
 
    .main-content{
        overflow:visible;
    }
}
body{font-size:var(--font-size-16);font-weight:var(--font-weight-medium);line-height:var(--line-height-body);
}
button,input,textarea,select{font-family:var(--font-family-base);
}