/* 툴바 · 패널 · 정보바 · 미리보기 — BRUTALIST ZINE */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    overflow: hidden;
    background: var(--paper);
    color: var(--ink);

    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    overscroll-behavior: none;
    touch-action: manipulation;
}


/* ============================= */
/* 상단 툴바 (masthead)          */
/* ============================= */

#toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;

    display: flex;
    align-items: center;
    gap: 10px;

    height: var(--toolbar-total);
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: calc(16px + var(--safe-l));
    padding-right: calc(16px + var(--safe-r));

    background: var(--paper);
    /* 두꺼운 괘선 — zine 의 뼈대 */
    border-bottom: var(--rule-w-thick) solid var(--rule);
}

#toolbarScroll {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

#toolbarFixed {
    display: none;
    align-items: center;
    gap: 6px;
    flex: none;
}

.spacer {
    flex: 1;
}


/* 마스트헤드 — 포트폴리오 로고(kimsangpil + .com 액센트)의 구조를 따른다:
   디스플레이 폰트 + 타이트한 자간 + 일부만 액센트 */
#toolbar .appTitle {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    /* button 이지만 마스트헤드로 보여야 한다 */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;

    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--ink);
    white-space: nowrap;
    margin-right: 8px;
}

/* 새로고침 가능하다는 신호 — 슬러그만 액센트에서 잉크로 반전 */
#toolbar .appTitle:hover::before {
    background: var(--ink);
}

/* 빨강 슬러그 — 지면 상단의 판형 표시 */
.appTitle::before {
    content: "FOV";
    background: var(--accent);
    color: #fff;

    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;

    padding: 5px 7px 4px;
}


/* ============================= */
/* 버튼 — hover = 반전            */
/* ============================= */

.tbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    height: 30px;
    padding: 0 12px;
    cursor: pointer;

    background: transparent;
    border: var(--rule-w) solid var(--ink);
    border-radius: 0;

    color: var(--ink);
    /* 한글 라벨이 대부분이라 본문 폰트를 쓴다.
       mono + uppercase 는 한글에 글리프도 효과도 없다. */
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;

    transition: background .12s linear, color .12s linear;
}

/* 라틴 전용 라벨(Top/Side/3D/KO/EN)은 zine 원본대로 mono + 대문자 */
#viewTop, #viewSide, #view3D,
#langKO, #langEN {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tbtn:hover:not(:disabled),
.tbtn:active:not(:disabled) {
    background: var(--ink);
    color: var(--paper);
}

.tbtn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* 활성 = 반전 고정 */
.tbtn.active {
    background: var(--ink);
    color: var(--paper);
}

.tbtn.active:hover:not(:disabled) {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.tbtn.danger {
    color: var(--accent);
    border-color: var(--accent);
}

.tbtn.danger:hover:not(:disabled) {
    background: var(--accent);
    color: #fff;
}

.toolbarDivider {
    width: var(--rule-w);
    height: 22px;
    background: var(--rule-soft);
    margin: 0 2px;
}

.btnGroup {
    display: flex;
    gap: 0;
}

.btnGroup .tbtn {
    border-right-width: 0;
}

.btnGroup .tbtn:last-child {
    border-right-width: var(--rule-w);
}

.iconBtn {
    width: 32px;
    padding: 0;
    justify-content: center;
}


/* 바닥 크기 입력 */
.floorField {
    display: flex;
    align-items: center;
    gap: 6px;

    color: var(--mute);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.floorField input[type="number"] {
    width: 44px;
    height: 30px;
    padding: 0 6px;

    background: var(--paper-3);
    border: var(--rule-w) solid var(--ink);
    border-radius: 0;

    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.floorField input[type="number"]:focus {
    outline: none;
    background: var(--mark);
}


/* ============================= */
/* 하단 정보 바 (colophon)        */
/* ============================= */

#info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;

    display: flex;
    align-items: center;

    height: var(--info-total);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: calc(16px + var(--safe-l));
    padding-right: calc(16px + var(--safe-r));

    background: var(--ink);
    color: var(--paper);

    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
}


/* ============================= */
/* 패널 도크                      */
/* ============================= */

#panelDock {
    display: contents;
}

#dockHandle {
    display: none;
}


/* ============================= */
/* 화각 조절 패널                 */
/* ============================= */

#fovPanel {
    position: absolute;
    top: calc(var(--toolbar-total) + 14px);
    right: 14px;
    z-index: 100;

    width: var(--panel-w);
    padding: 14px;

    background: var(--paper-3);
    border: var(--rule-w-thick) solid var(--ink);
    border-radius: 0;
    box-shadow: none;

    font-family: var(--font-body);
    font-size: 12px;
    color: var(--ink);
}

/* 올캡스 아이브로우 — zine 의 섹션 표제 */
#fovPanel h3,
#objectPanel h3 {
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: var(--rule-w) solid var(--ink);

    /* 한글이라 mono 대신 본문 폰트. uppercase 는 한글에 무의미하고
       단위 m 을 M 으로 바꿔버린다 */
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ink);
}

.fovRow {
    margin-bottom: 10px;
}

.fovRow label {
    display: block;
    margin-bottom: 4px;

    color: var(--mute);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.fovRow .fovInputLine {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fovRow.divided {
    margin-top: 14px;
    padding-top: 12px;
    border-top: var(--rule-w) solid var(--rule-soft);
}

/* 슬라이더 — 각진 잉크 막대 */
.fovRow input[type="range"] {
    flex: 1;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    height: 3px;
    background: var(--ink);
    border-radius: 0;
    outline: none;
}

.fovRow input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 0;
    background: var(--accent);
    border: var(--rule-w) solid var(--ink);
    cursor: pointer;
}

.fovRow input[type="range"]::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border-radius: 0;
    background: var(--accent);
    border: var(--rule-w) solid var(--ink);
    cursor: pointer;
}

.fovRow input[type="number"],
#fovPanel select {
    padding: 4px 8px;

    background: var(--paper);
    border: var(--rule-w) solid var(--ink);
    border-radius: 0;

    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fovRow input[type="number"] {
    width: 54px;
    text-align: right;
}

#fovPanel select {
    width: 100%;
    height: 28px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    font-size: 11px;
}

.fovRow input[type="number"]:focus,
#fovPanel select:focus {
    outline: none;
    background: var(--mark);
}

.fovRow input[type="checkbox"] {
    accent-color: var(--accent);
}

/* 초점거리 — 지면의 큰 수치 */
#focalLengthDisplay {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

#fovPanel.disabled {
    opacity: 0.35;
    pointer-events: none;
}


/* ============================= */
/* 감지 현황 패널                 */
/* ============================= */

#objectPanel {
    position: absolute;
    bottom: calc(var(--info-total) + 14px);
    right: 14px;
    z-index: 100;

    width: var(--panel-w);
    max-height: 35vh;
    overflow-y: auto;

    padding: 14px;

    background: var(--paper-3);
    border: var(--rule-w-thick) solid var(--ink);
    border-radius: 0;
    box-shadow: none;

    font-family: var(--font-body);
    font-size: 12px;
    color: var(--ink);
}

.objectRow {
    display: flex;
    justify-content: space-between;
    gap: 8px;

    padding: 7px 0;
    border-bottom: var(--rule-w) solid var(--rule-soft);

    font-weight: 500;
}

.objectRow:last-child {
    border-bottom: none;
}

.objectRow .state {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* 감지 = 형광펜, 미감지 = 핫 액센트 (문제 상태에 시선을 준다) */
.objectRow .covered {
    background: var(--mark);
    color: var(--ink);
    padding: 2px 6px;
}

.objectRow .uncovered {
    color: var(--accent);
}

.emptyText {
    color: var(--mute);
    font-size: 11px;
}


/* ============================= */
/* 모니터 미리보기 뷰포트          */
/* ============================= */

#monitorViewport {
    position: absolute;
    top: calc(var(--toolbar-total) + 14px);
    right: calc(var(--panel-w) + 28px);
    z-index: 100;

    width: 500px;
    height: 310px;

    background: none;
    border: none;
    box-shadow: none;

    display: none;
}

#monitorViewport.nightMode #monitorCanvas {
    filter: grayscale(1);
}

#monitorViewport.active {
    display: block;
}

#monitorCanvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
}

#monitorCanvas:active {
    cursor: grabbing;
}

/* 캡션 — 도판 설명 */
#monitorLabel {
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);

    max-width: calc(100% - 16px);
    padding: 4px 9px;

    background: var(--ink);
    color: var(--paper);
    border-radius: 0;

    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    pointer-events: none;
}


/* ============================= */
/* 초기 로딩 오버레이             */
/* ============================= */

/* 모델이 ~22MB 라 첫 진입에 시간이 걸린다.
   포트폴리오 사이트의 zine 로더와 같은 형태 (각진 막대, 반전 없음). */
#pageLoader {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--paper);

    transition: opacity 0.35s ease, visibility 0.35s ease;
}

#pageLoader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loaderContent {
    text-align: center;
    padding: 0 24px;
}

.loaderMast {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 20px;

    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--ink);
}

.loaderMast::before {
    content: "FOV";
    background: var(--accent);
    color: #fff;

    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;

    padding: 6px 8px 5px;
}

/* 각진 막대 — radius 0 */
.loaderBar {
    width: 260px;
    height: 6px;
    margin: 0 auto;

    background: var(--paper-3);
    border: var(--rule-w) solid var(--ink);
    border-radius: 0;
    overflow: hidden;
}

#loaderFill {
    width: 0%;
    height: 100%;
    background: var(--ink);
    transition: width 0.2s linear;
}

#loaderText {
    margin-top: 12px;

    color: var(--mute);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
}