/* 모바일 — 세로=하단 시트, 가로=우측 레일
   가로 강제는 불가 (iOS Safari 가 orientation.lock 미지원) */

@media (max-width: 768px), (max-height: 600px) {

    :root {
        --toolbar-h: 46px;
        --info-h:    26px;
    }

    #toolbar {
        gap: 6px;
        padding-left: calc(12px + var(--safe-l));
        padding-right: calc(8px + var(--safe-r));
    }

    #toolbarScroll {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        mask-image: linear-gradient(
            to right, #000 0, #000 calc(100% - 20px), transparent 100%
        );
    }

    #toolbarScroll::-webkit-scrollbar {
        display: none;
    }

    #toolbarFixed {
        display: flex;
        padding-left: 8px;
        border-left: var(--rule-w) solid var(--ink);
    }

    /* 가로 폰은 폭이 900px 안팎이라 마스트헤드를 남긴다.
       세로에서만 숨긴다(아래 portrait 블록). */
    .spacer {
        display: none;
    }

    #toolbar .appTitle {
        font-size: 13px;
        margin-right: 4px;
    }

    /* 터치 타깃 */
    .tbtn,
    .floorField input[type="number"] {
        height: 34px;
    }

    /* --- 도크: 토글로 여닫는 오버레이 --- */
    #panelDock {
        display: flex;
        flex-direction: column;
        gap: 10px;

        position: absolute;
        z-index: 110;

        padding: 14px;
        overflow-y: auto;
        overscroll-behavior: contain;

        background: var(--paper);
        box-shadow: none;

        visibility: hidden;
        opacity: 0;
        transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
    }

    #panelDock.open {
        visibility: visible;
        opacity: 1;
        transform: none;
    }

    /* 도크가 유일한 지면 — 내부 패널은 테두리를 벗는다 */
    #fovPanel,
    #objectPanel {
        position: static;
        width: 100%;
        max-height: none;

        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
    }

    #objectPanel {
        padding-top: 12px;
        border-top: var(--rule-w) solid var(--ink);
    }

    /* 닫기 핸들 — 각진 잉크 막대 */
    #dockHandle {
        display: block;
        flex: none;
        align-self: center;

        width: 44px;
        height: var(--rule-w-thick);
        margin-bottom: 4px;
        padding: 0;

        background: var(--ink);
        border: none;
        border-radius: 0;
        cursor: pointer;
    }

    /* 행을 한 줄로 눕혀 세로 공간을 아낀다
       (:has 미지원 시 규칙 전체가 무효화되어 기존 세로 배치로 폴백) */
    .fovRow:has(.fovInputLine),
    .fovRow:has(select),
    .fovRow:has(#focalLengthDisplay) {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
    }

    .fovRow:has(.fovInputLine) > label,
    .fovRow:has(select) > label,
    .fovRow:has(#focalLengthDisplay) > label {
        flex: 0 0 88px;
        margin-bottom: 0;
    }

    .fovRow .fovInputLine,
    .fovRow select,
    #focalLengthDisplay {
        flex: 1;
        min-width: 0;
    }

    #focalLengthDisplay {
        font-size: 17px;
    }

    #monitorViewport {
        width: auto;
        height: auto;
        aspect-ratio: 16 / 10;
    }
}


/* --- 세로: 하단 시트 --- */
@media (max-width: 768px) and (orientation: portrait) {

    #panelDock {
        left: 0;
        right: 0;
        bottom: var(--info-total);
        max-height: 60vh;
        max-height: 60svh;

        transform: translateY(12px);
        border-top: var(--rule-w-thick) solid var(--ink);
        border-radius: 0;
        padding-left: calc(14px + var(--safe-l));
        padding-right: calc(14px + var(--safe-r));
    }

    /* 세로는 폭이 없다. app.css 의 `#toolbar .appTitle` 과
       같은 특정도로 써야 덮인다 (.appTitle 만으론 안 먹음) */
    #toolbar .appTitle {
        display: none;
    }

    #monitorViewport {
        top: calc(var(--toolbar-total) + 10px);
        left: calc(10px + var(--safe-l));
        right: calc(10px + var(--safe-r));
    }
}


/* --- 가로: 우측 레일 (주력) --- */
@media (max-height: 600px) and (orientation: landscape) {

    #panelDock {
        top: var(--toolbar-total);
        bottom: var(--info-total);
        right: 0;
        width: 268px;
        max-width: 62vw;

        transform: translateX(12px);
        border-left: var(--rule-w-thick) solid var(--ink);
        padding-right: calc(14px + var(--safe-r));
    }

    #monitorViewport {
        top: calc(var(--toolbar-total) + 10px);
        left: calc(10px + var(--safe-l));
        right: auto;
        width: 38vw;
        max-width: 300px;
    }
}