body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #f4f4f4;
    color: #333;
}

/* 오에카 전용: 캔버스 전체화면 모드 */
body.oeka-fullscreen {
    overflow: hidden;
}
body.oeka-fullscreen .oeka-shell {
    padding: 0;
    max-height: 100vh;
}
body.oeka-fullscreen .oeka-header,
body.oeka-fullscreen .oeka-footer {
    display: none;
}

/* 브라우저 네이티브 전체화면 (Fullscreen API, Alt+Enter 또는 ⛶ 버튼) */
.oeka-canvas-panel:fullscreen,
.oeka-canvas-panel:-webkit-full-screen,
.oeka-canvas-panel:-ms-fullscreen {
    background: #1a1a1a;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}
.oeka-canvas-panel:fullscreen .canvas-row,
.oeka-canvas-panel:-webkit-full-screen .canvas-row,
.oeka-canvas-panel:-ms-fullscreen .canvas-row {
    flex: 1;
    min-height: 0;
}

.oeka-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 12px;
    box-sizing: border-box;
    overflow: hidden;
}

.oeka-header {
    flex-shrink: 0;
    text-align: center;
    margin-bottom: 12px;
    border-bottom: 2px dashed #79ACC5;
    padding-bottom: 8px;
}

.oeka-main {
    flex: 1;
    min-height: 0;
    display: flex;
    width: 100%;
}

.oeka-canvas-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    min-height: 0;
    box-sizing: border-box;
    background: #e0e0e0;
    padding: 12px;
    border: 2px outset #ccc;
}

/* 캔버스 행: 팔레트 플로팅 + 캔버스가 전체 영역 사용 (아래로 밀리지 않음) */
.canvas-row {
    position: relative;
    flex: 1;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* 팔레트: 플로팅(절대 위치) → 레이아웃 흐름에서 제외, canvas-stage가 밀리지 않음 */
.mini-oekaki-palette-container.palette-bundle {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 88px;
    max-width: 88px;
    box-sizing: border-box;
}

/* 캔버스 영역: 행 전체 사용, 왼쪽에 팔레트만큼 여백 */
.oeka-canvas-panel .canvas-wrapper {
    position: absolute;
    left: 98px;
    right: 0;
    top: 0;
    bottom: 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
}

.oeka-canvas-panel .canvas-wrapper .canvas-scroll-area {
    flex: 1 1 0%;
    min-width: 0;
    min-height: 0;
}

/* ① 위쪽 메뉴바 (패널 안에서 오른쪽으로 튀어나오지 않게) */
.mini-oekaki-toolbar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: 8px;
    border: 2px outset #ccc;
    background: #c0c0c0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* ② 왼쪽 메뉴바 (색상팔레트 ~ 저장 한 묶음) */
.palette-bundle {
    border: 2px outset #999;
    background: #b8b8b8;
    padding: 8px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tool-group {
    display: flex;
    align-items: center;
    margin: 4px;
}

.tool-group button {
    min-width: 30px;
    height: 30px;
    margin: 0 2px;
    padding: 5px;
    background-color: #c0c0c0;
    border: 2px outset #f0f0f0;
    font-weight: bold;
    color: #333;
    cursor: pointer;
}

.tool-group button:active,
.tool-group button.active {
    border-style: inset;
    background-color: #ddd;
}

/* 되돌리기/다시 실행 버튼 색 */
.undo-redo-btn {
    color: #FDDF58;
    text-shadow: 0 0 1px #333;
}
.undo-redo-btn:hover:not(:disabled) {
    color: #ffeb7a;
}
.undo-redo-btn:disabled {
    color: #999;
}

/* 손잡이(캔버스 이동) 버튼: 레트로 감성 색 */
.handle-btn {
    color: #5a7a8a;
    text-shadow: 0 0 1px #333;
}
.handle-btn:hover {
    color: #6a8a9a;
}
.handle-btn.active {
    color: #3d5a6a;
}

/* 레이어 FG/BG + 눈 보기/숨기기 (팔레트 내 Size/OPA 아래) */
.layer-box {
    width: 68px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 2px outset #ccc;
    background: #c0c0c0;
    padding: 4px;
}
.layer-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.layer-eye-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    background: #c0c0c0;
    border: 2px outset #f0f0f0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FDDF58;
    text-shadow: 0 0 1px #333;
}
.layer-eye-btn:hover {
    background: #d0d0d0;
    color: #ffeb7a;
}
.layer-eye-btn.hidden {
    opacity: 0.4;
    color: #999;
}
.layer-label-btn {
    min-width: 28px;
    font-size: 11px;
}
.layer-label-btn.active {
    border-style: inset;
    background-color: #ddd;
}

/* 팔레트 아래 반전/저장 버튼 */
.palette-extra-btn {
    width: 68px;
    box-sizing: border-box;
    margin-top: 4px;
    font-size: 12px;
}
.palette-save-btn {
    margin-top: 2px;
}

/* ③ 캔버스 놓는 영역 (스크롤 없음, 푸터 바로 위까지 넓고 높게) */
.canvas-scroll-area {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    border: 2px outset #999;
    background: #e0e0e0;
    border-radius: 4px;
    position: relative;
}

/* 모바일: 캔버스가 항상 보이도록 최소 높이 보장 */
@media (max-width: 768px), (max-height: 600px) {
    .oeka-shell {
        padding: 8px;
    }
    .oeka-header {
        padding-bottom: 6px;
        margin-bottom: 8px;
    }
    .oeka-header h1 {
        font-size: 1.1rem;
        margin: 0 0 2px 0;
    }
    .oeka-header p {
        font-size: 0.75rem;
        margin: 0;
    }
    .oeka-canvas-panel {
        padding: 8px;
    }
    .mini-oekaki-toolbar {
        padding: 6px;
        margin-bottom: 6px;
        max-height: 42vh;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .canvas-row {
        min-height: min(220px, 35vh);
    }
    .canvas-scroll-area {
        min-height: min(200px, 32vh);
    }
    .oeka-footer {
        margin-top: 8px;
        font-size: 11px;
    }
}

/* 모바일 가로: 높이가 적어도 캔버스 영역 확보 */
@media (orientation: landscape) and (max-height: 480px) {
    .oeka-shell {
        padding: 4px 8px;
    }
    .oeka-header {
        padding-bottom: 2px;
        margin-bottom: 4px;
    }
    .oeka-header h1 {
        font-size: 0.95rem;
    }
    .oeka-header p {
        display: none;
    }
    .oeka-canvas-panel {
        padding: 4px 8px;
    }
    .mini-oekaki-toolbar {
        padding: 4px;
        margin-bottom: 4px;
        max-height: 28vh;
        overflow-y: auto;
    }
    .canvas-row {
        min-height: min(180px, 55vh);
    }
    .canvas-scroll-area {
        min-height: min(160px, 50vh);
    }
    .oeka-footer {
        margin-top: 4px;
        padding: 2px 0;
        font-size: 10px;
    }
}

/* 손잡이용: 캔버스를 올려둘 스테이지 (스크롤 영역보다 크게, 레이아웃 분리 방지) */
.canvas-stage {
    position: relative;
    min-width: 100%;
    min-height: 100%;
    max-width: 8192px;
    max-height: 8192px;
}

.canvas-zoom-wrap {
    position: absolute;
    flex-shrink: 0;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

/* 손잡이 모드일 때 캔버스 위에 덮어서 드래그로 이동 */
.canvas-pan-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    pointer-events: none;
    cursor: grab;
    touch-action: none;
}
.canvas-zoom-wrap canvas {
    display: block;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.zoom-group .zoom-label {
    min-width: 36px;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    margin: 0 2px;
}

.mini-oekaki-palette-container {
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 2×8 팔레트 */
#color-palette {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(8, 1fr);
    width: 56px;
    gap: 2px;
    border: 2px outset #ccc;
    background: #c0c0c0;
    padding: 4px;
}

.color-swatch {
    width: 22px;
    height: 22px;
    border: 1px solid #777;
    cursor: pointer;
    box-sizing: border-box;
}

.color-swatch.active {
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #000;
}

/* 얇은 레트로 인라인 색상 선택기 (2×8 팔레트 창 너비와 동일: 56+8+4=68px) */
.slim-color-picker-wrap {
    width: 68px;
    padding: 2px 0;
    box-sizing: border-box;
}

.slim-color-picker-inner {
    border: 1px solid #808080;
    border-top-color: #fff;
    border-left-color: #fff;
    background: #c0c0c0;
    padding: 2px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
}

.slim-color-picker-input {
    width: 100%;
    height: 20px;
    padding: 0;
    border: 1px inset #777;
    background: #fff;
    cursor: pointer;
}

/* 슬라이더: 폼 테두리에 거의 꽉 차게, 텍스트는 슬라이더 안쪽 뒷배경 */
.palette-sliders-wrap {
    display: flex;
    gap: 4px;
    width: 68px;
    min-height: 120px;
    box-sizing: border-box;
}

.palette-slider-box {
    width: 32px;
    flex: 1;
    min-height: 120px;
    box-sizing: border-box;
    border: 2px outset #ccc;
    border-radius: 0;
    background: #c0c0c0;
    padding: 4px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
}

/* size=8px && opa=168 이스터에그
 * - 슬라이더 바(트랙) 배경: #4F8B3C
 * - 채움 부분(size/opa fill): RGB 그라디언트 애니메이션
 */
.palette-slider-box.gaming-rgb-glow .palette-size-slider-bar,
.palette-slider-box.gaming-rgb-glow .palette-opa-slider-bar {
    background: #4F8B3C;
}

.palette-slider-box.gaming-rgb-glow .palette-size-slider-fill,
.palette-slider-box.gaming-rgb-glow .palette-opa-slider-fill {
    animation: gamingRgbGlowBg 1.4s linear infinite;
}

@keyframes gamingRgbGlowBg {
    0%   { background: linear-gradient(to bottom, #ff0050, #ff8fa7); }
    33%  { background: linear-gradient(to bottom, #00ffa0, #8fffd4); }
    66%  { background: linear-gradient(to bottom, #008cff, #8fc4ff); }
    100% { background: linear-gradient(to bottom, #ff0050, #ff8fa7); }
}

.palette-opa-box {
    width: 32px;
}

/* 슬라이더 앞쪽 텍스트 (Size 1px / OPA 숫자) - 채움 바보다 앞에 표시 */
.palette-slider-label-bg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: rgba(0, 0, 0, 0.25);
    font-weight: bold;
    white-space: pre-wrap;
    text-align: center;
    line-height: 1.2;
    z-index: 2;
    pointer-events: none;
}

/* Size: 세로 바, 위에서 아래로 채움, 슬라이더 길이 길게 */
.palette-size-slider {
    flex: 1;
    min-height: 100px;
    position: relative;
    cursor: pointer;
    touch-action: none;
}

.palette-size-slider-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #808080;
    border: 1px inset #555;
    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3) inset;
}

.palette-size-slider-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1%;
    min-height: 2px;
    background: #333;
    pointer-events: none;
    z-index: 1;
}

/* OPA: 세로 바, 위에서 아래로 채움, 슬라이더 길이 길게 */
.palette-opa-slider.palette-opa-slider-vertical {
    flex: 1;
    min-height: 100px;
    position: relative;
    cursor: pointer;
    touch-action: none;
}

/* OPA 트랙: 채워지지 않은 영역(위쪽) 표시용. 채움(opaFill)이 아래에서 위로 올라감 */
.palette-opa-slider-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #AAAAAA;
    border: 1px inset #555;
    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3) inset;
}

.palette-opa-slider-fill {
    position: absolute;
    left: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    height: 0;
    min-height: 2px;
    background: #fff;
    pointer-events: none;
    z-index: 1;
}

#oeka-canvas {
    border: 2px inset #777;
    background: #fff;
    cursor: none;
}

/* NEO 스타일 브러시 미리보기 커서 - 테두리만 표시 (기존 그림 위에서도 구분 가능) */
.brush-cursor {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    box-sizing: border-box;
    display: none;
    z-index: 10;
    background: transparent;
}
.brush-cursor.visible {
    display: block;
}
.brush-cursor.eraser {
    background: transparent;
}
.size-control input {
    width: 40px;
    text-align: center;
    border: 2px inset #777;
    background: #fff;
    margin: 0 5px;
    font-weight: bold;
}

.oeka-footer {
    flex-shrink: 0;
    margin-top: 16px;
    text-align: center;
    font-size: 12px;
    color: #555;
}

/* 관리인 야치요 레트로 스타일 확인 창 */
.yachiyo-confirm-overlay {
    position: fixed;
    inset: 0;
    /* 에차 모바일 전체화면 오버레이(z-index: 10000)보다 위에 떠야 함 */
    z-index: 20000;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
.yachiyo-confirm-box {
    background: #c0c0c0;
    border: 3px outset #e0e0e0;
    border-radius: 4px;
    padding: 20px 24px;
    max-width: 320px;
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3);
}
.yachiyo-confirm-who {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: bold;
    color: #5a7a8a;
    text-align: center;
}
.yachiyo-confirm-text {
    margin: 0 0 16px 0;
    font-size: 15px;
    color: #333;
    text-align: center;
    line-height: 1.4;
}
.yachiyo-confirm-btns {
    display: flex;
    justify-content: center;
    gap: 12px;
}
.yachiyo-confirm-yes,
.yachiyo-confirm-no {
    min-width: 72px;
}
.yachiyo-confirm-yes:hover,
.yachiyo-confirm-no:hover {
    background-color: #d0d0d0;
}