/* ==========================================================

   기본 스타일

   - 어두운 배경(스펙트로그램 가독성), 모바일 터치 친화적인 크기

   ========================================================== */

* {

    box-sizing: border-box;

}




/* hidden 속성이 display 규칙에 덮어써지지 않도록 강제 */

[hidden] {

    display: none !important;

}




html,
body {

    margin: 0;

    padding: 0;

    background: #111;

    color: #ddd;

    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;

    /* 모바일에서 더블탭 확대 방지 */

    touch-action: manipulation;

}




button {

    font: inherit;

    color: #fff;

    background: #2b5ea8;

    border: none;

    border-radius: 6px;

    padding: 8px 14px;

    cursor: pointer;

}




button:active {

    background: #1f477f;

}




/* ==========================================================

   1) 설정 화면

   ========================================================== */

#settings-view {

    max-width: 520px;

    margin: 0 auto;

    padding: 16px;

}




#settings-view h1 {

    margin: 8px 0 0;

    font-size: 1.5rem;

}




.subtitle {

    margin: 4px 0 16px;

    color: #999;

    font-size: 0.9rem;

}




fieldset {

    border: 1px solid #333;

    border-radius: 8px;

    margin: 0 0 12px;

    padding: 8px 12px 12px;

}




legend {

    padding: 0 6px;

    color: #8ab4f8;

    font-size: 0.9rem;

}




label {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 12px;

    margin: 8px 0;

    font-size: 0.95rem;

}




input,
select {

    width: 120px;

    font: inherit;

    padding: 6px 8px;

    color: #eee;

    background: #222;

    border: 1px solid #444;

    border-radius: 6px;

}




#start-btn {

    width: 100%;

    padding: 14px;

    font-size: 1.1rem;

    margin-top: 4px;

}




#status {

    min-height: 1.5em;

    color: #f28b82;

    font-size: 0.9rem;

    white-space: pre-line;

}




/* ==========================================================

   2) 스펙트로그램 화면

   - 화면 전체 높이를 사용 (100dvh: 모바일 주소창 높이 변화 반영)

   ========================================================== */

#viewer-view {

    display: flex;

    flex-direction: column;

    width: 100vw;

    height: 100vh;

    height: 100dvh;

    background: #111;

}




.toolbar {

    flex: 0 0 auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 8px;

    padding: 4px 8px;

    background: #1a1a1a;

    border-bottom: 1px solid #333;

}




#info {

    font-size: 0.75rem;

    color: #aaa;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}




.toolbar-buttons {

    display: flex;

    gap: 6px;

    flex: 0 0 auto;

}




.toolbar-buttons button {

    padding: 6px 10px;

    font-size: 0.85rem;

}




/* 축 + 스펙트로그램을 담는 영역: 남은 높이를 전부 사용 */

#plot-container {

    position: relative;

    flex: 1 1 auto;

    min-height: 0;

    overflow: hidden;

}




/* 축/라벨/컬러바를 그리는 캔버스 (컨테이너 전체 크기) */

.axis-canvas {

    position: absolute;

    left: 0;

    top: 0;

}




/* 실제 스펙트로그램 픽셀을 그리는 캔버스 (플롯 영역에만 위치, JS에서 좌표 지정) */

.spec-canvas {

    position: absolute;

    image-rendering: pixelated;

}




/* 전체화면 상태일 때도 배경을 동일하게 유지 */

#viewer-view:fullscreen {

    width: 100vw;

    height: 100vh;

}