/* ============================================================
   game-ui.css
   MMORPG 톤 공통 UI 컴포넌트 (모듈화)
   - 새로운 색상을 도입하지 않고 기존 팔레트만 사용
     기본/브랜드: #10221b, #0a0a0a, #272727, #463972(rgb(70,57,116))
   - 부트스트랩 5 위에 얹는 커스텀 클래스
   - JS/Razor 선택자에 영향 없음 (신규 클래스만 정의)
   ============================================================ */

:root {
    --game-base-dark: #0a0a0a;
    --game-base-deep: #10221b;
    --game-base-panel: #272727;
    --game-accent: rgb(70, 57, 116); /* 기존 grade_image 테두리 색과 동일한 판타지 톤 */
    --game-text-light: #ebebeb;
    --game-border: rgba(70, 57, 116, 0.55);
    --game-highlight: rgba(255, 255, 255, 0.08);
}

/* ---------- 게임풍 버튼 ---------- */
.btn-game-primary,
.btn-game-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font-weight: 700;
    letter-spacing: .02em;
    border-radius: .5rem;
    border: 1px solid var(--game-border);
    padding: .55rem 1.3rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
    /* 모바일 터치 타겟 확보 */
    min-height: 44px;
}

.btn-game-primary {
    color: var(--game-text-light);
    background: linear-gradient(180deg, #16261f 0%, var(--game-base-deep) 100%);
    box-shadow: inset 0 1px 0 var(--game-highlight), 0 1px 2px rgba(0, 0, 0, 0.45);
}

    .btn-game-primary:hover,
    .btn-game-primary:focus {
        color: #fff;
        background: linear-gradient(180deg, #1d3329 0%, #16261f 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 .5rem var(--game-border);
    }

    .btn-game-primary:active {
        transform: translateY(1px);
    }

.btn-game-outline {
    color: var(--game-base-deep);
    background: transparent;
}

    .btn-game-outline:hover,
    .btn-game-outline:focus {
        color: #fff;
        background: var(--game-base-deep);
        box-shadow: 0 0 .5rem var(--game-border);
    }

/* ---------- 게임풍 패널 / 아이템 프레임 ---------- */
.game-panel {
    background: transparent;
    border: none;
    border-radius: .6rem;
}

.item-frame {
    position: relative;
    border: 1px solid var(--game-border);
    border-radius: .5rem;
    background: linear-gradient(160deg, rgba(70, 57, 116, 0.10), rgba(10, 10, 10, 0.04));
    box-shadow: inset 0 0 .4rem rgba(0, 0, 0, 0.25);
    transition: box-shadow .15s ease, transform .05s ease;
    overflow: hidden;
}

    .item-frame:hover {
        box-shadow: inset 0 0 .4rem rgba(0, 0, 0, 0.25), 0 0 .6rem var(--game-border);
    }

/* ---------- 게임풍 제목/헤딩 강조 ---------- */
.game-heading {
    font-weight: 900;
    letter-spacing: .02em;
    color: #10221b;
    text-shadow: none;
}

/* 어두운 game-panel 위의 board_title(plain strong 포함) 가독성 보장 */
.game-panel .board_title strong {
    color: #10221b;
    text-shadow: none;
}

/* ---------- 반응형 이미지/미디어 안전장치 (전역 깨짐 방지) ---------- */
img,
video,
canvas {
    max-width: 100%;
    height: auto;
}

table {
    max-width: 100%;
}

/* ---------- 리치 에디터 본문 가독성 확보 ----------
   .game-panel(어두운 배경) 위에 렌더링되는 에디터 본문(@Html.Raw)은
   흰 배경/어두운 글자 기준으로 작성되어 있으므로, 밝은 표면으로 감싸
   웹/모바일 모두에서 글자가 잘 보이도록 한다.
   기존 페이지 스타일 훼손을 막기 위해 .editor-surface-light 로 한정한다. */
.editor-surface-light {
    background: #ffffff;
    color: #333333;
    border: none;
    border-radius: .5rem;
    padding: 1.25rem;
    overflow-wrap: break-word;
    word-break: break-word;
}

    .editor-surface-light article,
    .editor-surface-light p,
    .editor-surface-light span,
    .editor-surface-light li,
    .editor-surface-light td,
    .editor-surface-light th,
    .editor-surface-light h1,
    .editor-surface-light h2,
    .editor-surface-light h3,
    .editor-surface-light h4,
    .editor-surface-light h5,
    .editor-surface-light h6 {
        color: #333333;
    }

    .editor-surface-light a {
        color: var(--game-accent);
    }

/* .button 클래스와 btn-game-primary 충돌 해소: height 고정값 무력화 */
.button.btn-game-primary {
    height: auto;
    min-height: 44px;
    line-height: 1.2;
    background: linear-gradient(180deg, #16261f 0%, var(--game-base-deep) 100%);
    border: 1px solid var(--game-border);
    color: var(--game-text-light);
    border-radius: .5rem;
}

    .button.btn-game-primary:hover,
    .button.btn-game-primary:focus {
        color: #fff;
        background: linear-gradient(180deg, #1d3329 0%, #16261f 100%);
        box-shadow: 0 0 .5rem var(--game-border);
    }

    .button.btn-game-primary:active {
        transform: translateY(1px);
    }

/* game-panel 하단 버튼 영역 정렬 */
.game-panel .board-list-button {
    display: flex;
    justify-content: flex-end;
    padding-top: .75rem;
    margin-top: .5rem;
}

/* 모바일 웹뷰 여백 최적화 */
@media (max-width: 767.98px) {
    .editor-surface-light {
        padding: .9rem;
    }

    .game-panel .board-list-button {
        padding-top: .5rem;
    }
}

/* ---------- 홈 이벤트 배너 pulse (인라인에서 참조하나 미정의였던 키프레임 보강) ---------- */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}