@font-face {
    font-family: 'DungGeunMo';
    src: url('/DungGeunMo.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* 모든 배경 제거 - 파란색만 표시 */
* {
    background: transparent !important;
}

body {
    background-color: #0000AA !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    height: 100vh !important;
    max-height: 100vh !important;
}

html {
    background-color: #0000AA !important;
    overflow: hidden !important;
    height: 100vh !important;
    max-height: 100vh !important;
}

#terminal {
    font-family: 'DungGeunMo', monospace !important;
    line-height: 1.2 !important;
    background-color: transparent !important;
}

.xterm {
    font-family: 'DungGeunMo', monospace !important;
    background-color: transparent !important;
}

.xterm-rows {
    font-family: 'DungGeunMo', monospace !important;
    background-color: transparent !important;
}

/* inline style을 강제로 덮어쓰기 */
.xterm-viewport {
    background-color: transparent !important;
    background: transparent !important;
}

.xterm-viewport[style] {
    background-color: transparent !important;
    background: transparent !important;
}

.xterm-screen {
    background-color: transparent !important;
}

canvas {
    background-color: transparent !important;
}

/* 컨테이너도 투명하게 */
.terminal,
#terminal-container {
    background-color: transparent !important;
}

/* ttyd 타이틀바/오버레이/헤더/리사이즈 인디케이터 전부 숨기기 */
#overlay,
.overlay,
.header,
#header,
.title-bar,
#title-bar,
.toolbar,
#toolbar,
.xterm-decoration-overview-ruler {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
}

/* 모바일 IME 입력용 composition-view: 기능 유지하되 시각적으로 숨김 */
.composition-view {
    color: transparent !important;
    background: transparent !important;
    caret-color: transparent !important;
}

/* 터미널을 화면 전체에 고정 */
.xterm.fullscreen,
#terminal-container,
#terminal,
.container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* xterm 내부 요소가 뷰포트를 넘지 않도록 제한 */
.xterm {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
}

.xterm-screen {
    width: 100% !important;
    max-width: 100vw !important;
}

/* 스크롤바 숨기기 */
::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important;
    background: transparent !important;
}

* {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* 테두리 제거 */
* {
    border: none !important;
    outline: none !important;
}

/* 네비/스크린샷 버튼: 모바일에서만 표시 */
#nav-buttons,
#screenshot-btn {
    display: none !important;
}

@media screen and (max-width: 1024px) {
    #nav-buttons,
    #screenshot-btn {
        display: flex !important;
    }

    /* 모바일에서 네비 버튼 크기 축소 (화면 가림 최소화) */
    #nav-buttons button {
        width: 38px !important;
        height: 38px !important;
        font-size: 15px !important;
    }

    #screenshot-btn {
        width: 38px !important;
        height: 38px !important;
        font-size: 20px !important;
    }
}

@media screen and (max-height: 400px) {
    /* 가로 모드 등 높이가 매우 작을 때: 버튼 더 축소 + 상단 배치 */
    #nav-buttons {
        bottom: auto !important;
        top: 4px !important;
        left: 4px !important;
        gap: 4px !important;
    }

    #nav-buttons button {
        width: 30px !important;
        height: 30px !important;
        font-size: 12px !important;
        opacity: 0.7;
    }

    #screenshot-btn {
        bottom: auto !important;
        top: 4px !important;
        width: 30px !important;
        height: 30px !important;
        font-size: 16px !important;
        opacity: 0.7;
    }
}