/* ─── 폰트 ─── */
@import url('https://cdn.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css');

@font-face { font-family: 'Freesentation'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-4Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Freesentation'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-7Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* ============================================
   실루엣자판기 - 메인 스타일
   ============================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Freesentation', sans-serif;
    background: #e8e8e8;
    color: #222;
    min-height: 100vh;
    padding: 20px;
}

body.font-galmuri {
    font-family: 'Galmuri11', sans-serif;
}

/* ─── 3단 레이아웃 ─── */
.svm-layout {
    display: flex;
    height: calc(100vh - 40px);
    max-width: 1400px;
    margin: 0 auto;
}

.panel {
    background: #f5f5f5;
    border: 2px solid #222;
    overflow-y: auto;
}

.panel-left {
    width: 250px;
    flex-shrink: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.panel-center {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border-left: none;
    border-right: none;
}

.panel-right {
    width: 320px;
    flex-shrink: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

/* ─── 공통 버튼 ─── */
.btn {
    font-family: inherit;
    background: #f0ece4;
    color: #333;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 5px 14px;
    font-size: 0.8em;
    cursor: pointer;
    box-shadow: 2px 2px 0px #888;
    transition: box-shadow 0.05s, transform 0.05s;
    position: relative;
    user-select: none;
}

.btn:hover {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px #888;
}

.btn:active {
    transform: translate(2px, 2px);
    box-shadow: 0px 0px 0px #888;
}

.btn.active { color: #1a6b3a; font-weight: bold; }
.btn.excluded { color: #b33; font-weight: bold; }
.btn.hidden-state { color: #b33; }

.btn-wide {
    width: 100%;
    margin-top: 10px;
    padding: 8px;
    font-size: 0.9em;
    font-weight: bold;
}

.btn-sm {
    padding: 3px 10px;
    font-size: 0.73em;
    flex-shrink: 0;
}

.btn-half {
    flex: 1;
    padding: 6px;
    font-size: 0.8em;
}

.btn-icon {
    padding: 3px 6px;
    line-height: 1;
}

.btn-icon .material-icons {
    font-size: 18px;
    vertical-align: middle;
}

/* ─── 왼쪽 패널 ─── */
.left-section { margin-bottom: 4px; }

.section-title {
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 8px;
}

hr {
    border: none;
    border-top: 1px solid #bbb;
    margin: 10px 0;
}

.section-label {
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 10px;
}

/* 슬롯 토글 */
.slot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
}

.slot-name {
    font-size: 0.85em;
    font-weight: bold;
}

/* 악세사리 행 */
.acc-row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 0;
    border-bottom: 1px solid #e0e0e0;
}

.acc-row:last-child { border-bottom: none; }

.acc-name {
    font-size: 0.8em;
    font-weight: bold;
    width: 36px;
    flex-shrink: 0;
}

.acc-status {
    flex: 1;
    font-size: 0.72em;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acc-row.filled .acc-status {
    color: #2d6a4f;
    font-weight: bold;
}

.acc-bulk-row {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

/* 리롤 행 */
.reroll-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}

.reroll-name {
    font-size: 0.85em;
    font-weight: bold;
    width: 40px;
    flex-shrink: 0;
}

/* ─── 중앙: 스테이지 ─── */
.stage-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.silhouette-stage {
    position: relative;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1 / 2;
    border: 2px solid #222;
    background:
        linear-gradient(45deg, #ccc 25%, transparent 25%),
        linear-gradient(-45deg, #ccc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ccc 75%),
        linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    background-color: #fff;
    overflow: hidden;
}

.silhouette-stage img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}

.base-body { z-index: 1; }
.part-layer { transition: opacity 0.2s ease; }
.part-layer.behind-body { z-index: 0; }
.part-layer.front-body { z-index: 2; }
.part-layer.topmost-body { z-index: 3; }
.coat-filtered { filter: brightness(0); }

/* ─── 오른쪽: 태그 ─── */
.tag-section { margin-bottom: 24px; }

.tag-area {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 32px;
}

.tag-chip {
    padding: 4px 12px;
    border: 1px solid #999;
    border-radius: 4px;
    font-size: 0.78em;
    cursor: pointer;
    user-select: none;
    background: #f0ece4;
    color: #555;
    box-shadow: 2px 2px 0px #888;
    transition: box-shadow 0.05s, transform 0.05s;
}

.tag-chip:hover {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px #888;
}

.tag-chip:active {
    transform: translate(2px, 2px);
    box-shadow: 0px 0px 0px #888;
}

.tag-chip.include-active {
    background: #f0ece4;
    border-color: #1a6b3a;
    color: #1a6b3a;
    font-weight: bold;
}

.tag-chip.exclude-active {
    background: #f0ece4;
    border-color: #b33;
    color: #b33;
    font-weight: bold;
    text-decoration: line-through;
}

.no-tags { color: #999; font-size: 0.8em; font-style: italic; }

/* ─── 안내 ─── */
.info-section { margin-top: 16px; }
.info-text { font-size: 0.8em; color: #666; line-height: 1.6; }

/* ─── 관리자 링크 ─── */
.admin-link-area {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

/* ─── 언어 선택 ─── */
.lang-wrap {
    position: relative;
}

.lang-menu {
    display: none;
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 4px;
    background: #f0ece4;
    border: 1px solid #555;
    border-radius: 4px;
    box-shadow: 2px 2px 0px #888;
    z-index: 10;
    min-width: 100px;
}

.lang-menu.show { display: block; }

.lang-option {
    padding: 6px 14px;
    font-size: 0.8em;
    cursor: pointer;
    white-space: nowrap;
}

.lang-option:hover { background: #e0dcd4; }

/* ─── 점검모드 팝업 ─── */
.maint-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.maint-box {
    background: #f5f5f5;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 28px 32px;
    max-width: 460px;
    width: 90%;
    box-shadow: 4px 4px 0px #888;
}

.maint-msg {
    font-size: 0.85em;
    line-height: 1.6;
    margin-bottom: 14px;
    color: #333;
    padding-bottom: 14px;
    border-bottom: 1px solid #ddd;
}

.maint-msg:last-of-type {
    border-bottom: none;
    margin-bottom: 18px;
}

.admin-link {
    color: #888;
    font-size: 0.8em;
    text-decoration: none;
    border-bottom: 1px solid #bbb;
}

.admin-link:hover { color: #444; border-color: #666; }