@charset "UTF-8";

/* --- MINI BOARD & PLAYER ROW FIX (Dedicated File) --- */

/* Force Flexbox Layout for Player Row */
.player-row {
    grid-column: 1 / -1 !important;
    /* Critical for CSS Grid */
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;

    /* Breakout of container to 100vw */
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    margin-bottom: 30px;
    background: transparent;
    padding: 0 15px;
    /* Slight padding on edges if needed */
    box-sizing: border-box !important;
}

.player-top-area {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px !important;
    background: #000;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    overflow: hidden;
}

/* Video Container: Takes remaining space, maintains aspect ratio */
.player-row-video {
    width: 100% !important;
    max-height: 100vh !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
    background: #000;
    position: relative !important;
}

.player-row-video>div {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

/* Ensure iframe covers the container */
.player-row-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.player-nav-btn {
    position: absolute;
    top: 0;
    bottom: 5%; /* YouTube 컨트롤 영역 간섭 최소화 */
    width: 80px; /* 고정 너비로 안정감 확보 */
    background: transparent;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    opacity: 0.8; /* 기본적으로 살짝 보임 */
    pointer-events: auto;
}

.player-nav-btn:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.3); /* 호버 시 배경 살짝 어둡게 */
}

/* When video is playing, fade out navigation buttons slightly */
.player-top-area.is-playing .player-nav-btn {
    opacity: 0.1; /* 아주 살짝만 표시 */
}

/* Temporarily show controls when strictly instructed or mouse move (handled by JS) */
.player-top-area.is-playing.show-controls .player-nav-btn {
    opacity: 0.8;
}

.player-nav-btn.prev-btn {
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.4), transparent);
}

.player-nav-btn.next-btn {
    right: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.4), transparent);
}

.player-nav-btn svg {
    width: 48px;
    height: 48px;
    fill: white;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8)); /* 화살표 그림자 강화 */
    transition: transform 0.2s;
}

.player-nav-btn:hover svg {
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .player-nav-btn {
        width: 15%;
    }
}



/* Ad Placeholder Styling (Clean) */
.player-row-ad {
    position: relative;
    background: #222;
    /* Lighter than black */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Removed text label per user request */
/*.player-row-ad::before { content: ''; }*/

/* Ensure actual ad content (iframe/ins) sits on top of label */
.player-row-ad * {
    z-index: 1;
    position: relative;
}

/* Sidebar: Full width below video, horizontal layout */
.player-row-sidebar {
    width: 100% !important;
    flex: 0 0 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    justify-content: center;
    gap: 15px;
    margin-left: 0 !important;
    flex-wrap: nowrap;
}

/* Default Horizontal Layout for Sidebar Items */
.player-row-sidebar .mini-board-wrapper {
    flex: 1 1 0;
    min-width: 0;
    height: 240px;
}

.player-row-sidebar .player-row-ad {
    flex: 0 0 280px;
    min-width: 250px;
    min-height: 0 !important;
    height: 240px !important;
    max-height: 240px !important;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* Mobile/Tablet Responsive handled by default now, only special case for small mobile */

/* 소형 모바일: 세로 스택 */
@media (max-width: 560px) {
    .player-row-sidebar {
        flex-direction: column !important;
    }

    .player-row-sidebar .mini-board-wrapper {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: 200px !important;
        min-height: 200px !important;
    }

    .player-row-sidebar .player-row-ad {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: 240px !important;
        max-height: 240px !important;
    }
}

/* Desktop/Tablet Landscape: Side-by-Side Layout (Expanded range) */
@media (min-width: 960px) {
    .player-row {
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }

    .player-top-area {
        width: 100% !important;
        flex: 1 1 0% !important;
        margin-right: 20px !important;
        margin-bottom: 0 !important;
    }

    .player-row-video {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
    }

    .player-row-sidebar {
        width: 320px !important;
        flex: 0 0 320px !important;
        flex-direction: column !important;
        gap: 15px;
    }

    .player-row-sidebar .mini-board-wrapper {
        flex: 0 0 auto !important;
        width: 100% !important;
        /* Force width */
        height: 350px !important;
    }

    .player-row-sidebar .player-row-ad {
        flex: 1 1 auto !important;
        width: 100% !important;
        /* Force width */
        min-height: 240px !important;
        height: 100% !important;
        max-height: 600px !important;
        background: #000;
        /* Placeholder to verify visibility */
    }
}

/* Hanji Board Styling - DARK MODE */
.mini-board-wrapper {
    width: 100%;
    height: 350px;
    background-color: #2a2a2a !important;
    /* Slightly lighter dark */

    /* CSS-only subtle paper texture */
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 50%, transparent 50%),
        linear-gradient(rgba(255, 255, 255, 0.05) 50%, transparent 50%);
    background-size: 4px 4px;

    border: 1px solid #555 !important;
    /* Brighter border */
    border-radius: 4px;
    position: relative;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6), 0 4px 15px rgba(0, 0, 0, 0.4);
    /* Deeper shadow */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Posts Container */

.mini-board-posts {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 15px;
    align-items: flex-start;
}

/* Custom Scrollbar for Dark Mode */
.mini-board-posts::-webkit-scrollbar {
    height: 6px;
}

.mini-board-posts::-webkit-scrollbar-track {
    background: #333;
}

.mini-board-posts::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 3px;
}

.mini-board-post {
    writing-mode: vertical-lr;
    text-orientation: upright;
    font-family: 'Gungsuh', 'Batang', serif;
    font-size: 15px;
    line-height: 1.0;
    /* Ultra-tight horizontal spacing */
    color: #fff !important;
    height: 100%;
    padding: 2px 2px;
    border-right: none;
    white-space: pre-wrap;
    letter-spacing: -2px;
    /* Very tight vertical spacing */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    display: inline-block;
    /* Natural vertical flow */
    vertical-align: top;
    margin-right: 4px;
    /* Gap between posts */
}

.post-author {
    font-size: 12px;
    color: #ffd54f !important;
    opacity: 1;
    font-weight: bold;
    display: inline !important;
    /* Force inline with content */
    margin-top: 8px;
    padding-top: 8px;
    /* Visual separation */
}

.post-content {
    display: inline;
}

/* 낙관(좋아요) 스타일 */
.post-likes {
    margin-top: auto;
    margin-left: 5px;
    cursor: pointer;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 5px 0;
    transition: transform 0.2s;
    writing-mode: horizontal-tb;
    /* 숫자는 가로로 표시 */
}

.post-likes:hover {
    transform: scale(1.1);
}

.stamp-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #c00;
    color: #fff;
    text-align: center;
    line-height: 20px;
    font-family: 'Gungsuh', serif;
    font-size: 12px;
    font-weight: bold;
    border-radius: 2px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.likes-count {
    font-size: 10px;
    color: #ff6b6b;
    font-family: 'Batang', serif;
}

/* 낙관 찍기 애니메이션 */
.post-likes.stamped {
    animation: stamp-push 0.5s ease-out;
}

@keyframes stamp-push {
    0% {
        transform: scale(1.5);
        opacity: 0.5;
    }

    50% {
        transform: scale(0.8);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

.mini-board-post:last-child {
    border-right: none;
}

/* Empty State */
.mini-board-empty {
    margin: 20px;
    font-family: 'Gungsuh', serif;
    color: #aaa !important;
    /* Brighter grey */
    font-size: 14px;
    text-align: left;
    writing-mode: vertical-lr;
    text-orientation: upright;
    line-height: 1.8;
    align-self: flex-start;
}

/* Write Button (Floating) - HIGH CONTRAST */
.mini-board-write-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #757575 0%, #424242 100%);
    /* Dark Metallic Gradient */
    /* Darker, moody feel */
    color: #fff;
    /* Icon color needs to be light now, or we keep it dark if user wants black brush on dark background? User said "white part darker", usually implies background. Black brush on dark grey might key low contrast. Let's try lighter icon or keep black if they want subtle. Actually, User's brush is black/gold. On dark grey, black handle might disappear.
    Wait, the user said "white part ... darker". The button was white. Now it's silver.
    If I make it dark grey, the *black* handle of the brush SVG will be invisible.
    The brush SVG has `fill="#1a1a1a"` (almost black).
    If background is `#424242`, contrast is low.
    But user wants "Check realistic brush".
    Maybe they want the *button* to be dark, and the brush...
    I will assume they want the button dark. I will add a `filter: drop-shadow(...)` or `stroke` to the SVG in CSS to ensure it pops, OR I'll assume the gold bristles will carry the visibility.
    Actually, let's stick to the request: "make the white part darker".
    I'll set the background to a mid-dark grey that still shows the black handle. E.g. #999 to #666.
    Let's go with #888888 to #555555. That's "darker" but potentially contrast-safe.
    Let's try a metallic Gunmetal: #b0b0b0 to #6e6e6e. That's darker than silver, but lighter than charcoal.
    User said "feel like this" (darker). I will go with the #757575 -> #424242.
    AND I will add a CSS rule to make the SVG pop if needed. But the SVG is inline.
    I'll add a light glow to the SVG in CSS?
    No, let's just do the background first. The gold tip will show up.
    */
    border: 1px solid #666;
    border-radius: 50%;
    /* Premium glow + drop shadow */
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.3),
        inset -1px -1px 2px rgba(0, 0, 0, 0.3),
        0 4px 15px rgba(0, 0, 0, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 5;
    padding: 0;
}

.mini-board-write-btn:hover {
    transform: translateY(-4px) scale(1.05);
    background: linear-gradient(135deg, #858585 0%, #525252 100%);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.4),
        0 6px 20px rgba(0, 0, 0, 0.8);
    border-color: #888;
}

/* Button Icon (SVG) */
.mini-board-write-btn svg {
    width: 44px;
    height: 44px;
    fill: #333 !important;
    /* Dark Ink Color */
    transition: transform 0.2s;
}

.mini-board-write-btn:hover svg {
    transform: rotate(-10deg) scale(1.1);
    fill: #000 !important;
}

/* Input Form Overlay - DARK MODE */
.mini-board-form-overlay {
    position: absolute;
    /* fixed -> absolute: 컨테이너 내부로 제한 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    /* 배경 불투명도 증가 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 10;
    /* z-index 조정 */
    padding: 10px;
    box-sizing: border-box;
}

.form-paper {
    background: #2a2a2a;
    padding: 15px;
    /* 패딩 축소 */
    border-radius: 8px;
    border: 1px solid #555;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    max-width: 98%;
    max-height: 98%;
    width: auto;
    height: auto;
    min-width: 0;
    /* 최소 너비 제한 해제 */
    min-height: 0;
    /* 최소 높이 제한 해제 */
    overflow: auto;
}

.mini-board-form-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* 버튼들을 감싸는 컨테이너가 없으므로 JS 수정 없이 CSS로 처리하기 위해 버튼 스타일 조정 */
/* 하지만 JS에서 버튼을 별도 div로 감싸지 않았으므로, flex-direction: row 상태에서는 버튼들이 입력창 옆에 나열됨. */
/* 버튼들을 세로로 쌓기 위해 flex-wrap을 쓰거나, JS에서 버튼 컨테이너를 추가하는 게 좋음. */
/* 여기서는 간단하게 form-paper에 flex-wrap을 주고 버튼들을 오른쪽으로 보내는 방식 대신, */
/* JS 수정 없이 CSS만으로 버튼을 오른쪽에 세로로 배치하려면? */
/* 입력창은 하나고 버튼은 두 개. */

/* 입력창 스타일 */
.form-input-vertical {
    width: 180px;
    /* 너비 조금 축소 */
    height: 200px;
    /* 높이 축소 (부모 컨테이너 350px 고려) */
    border: 1px solid #666;
    background: #333;
    font-family: 'Gungsuh', serif;
    padding: 10px;
    font-size: 15px;
    outline: none;
    resize: none;
    line-height: 1.6;
    color: #fff !important;
    writing-mode: vertical-lr;
    text-orientation: upright;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

/* 버튼 공통 스타일 */
.form-submit-btn,
.form-cancel-btn {
    writing-mode: vertical-lr;
    /* 버튼 텍스트도 세로로 */
    text-orientation: upright;
    padding: 10px 15px;
    /* 세로쓰기 버튼은 패딩 조정 */
    width: 50px;
    /* 버튼 폭 고정 */
    height: auto;
    margin: 0;
}

.form-submit-btn {
    background: #fff;
    color: #333;
    border: none;
    border-radius: 4px;
    font-family: 'Gungsuh', serif;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    height: 100px;
    /* 버튼 길이 늘리기 */
}

.form-cancel-btn {
    background: #555;
    color: #ccc;
    border: none;
    border-radius: 4px;
    font-family: 'Gungsuh', serif;
    cursor: pointer;
    font-size: 12px;
    height: 60px;
}

.form-input-vertical::placeholder {
    color: #888;
}

/* 중복 스타일 제거됨 */