@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* [Moonlit Fairy - Scenerio Board Final] */
:root {
    --bg-dark: #0f1623;
    --bg-card: rgba(13, 17, 23, 0.95); /* 배경 */
    --line: rgba(255, 255, 255, 0.15); /* 라인 */
    --accent: #64ffda;      /* 민트 */
    --accent-gold: #ffecb3; /* 골드 */
    --text-muted: #94a3b8;
}

#bookWrap {
    width: 100%;
    font-family: "Pretendard Variable", "Pretendard", sans-serif;
    color: #e2e8f0;
    font-size: 14px;
    line-height: 1.5;
    width: 100%; max-width: 1280px; margin: 0 auto;
}

/* 1. 통합 래퍼 (탭 디자인 호환용) */
.unified-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 10px 40px -5px rgba(0,0,0,0.5);
    margin-bottom: 20px;
    overflow: hidden; /* 둥근 모서리 유지 */
    position: relative;
    display: flex;
    flex-direction: column;
}

/* 2. 게시판 헤더 (제목 + 버튼) */
/* 네비게이션 바로 아래 위치 */
.sc-header {
    background: rgba(20, 30, 40, 0.6); /* 살짝 어둡게 */
    border-top: 1px solid var(--line); /* 탭과 구분선 */
    border-bottom: 1px solid var(--line);
    padding: 15px 20px;
    display: flex; align-items: center; justify-content: space-between;
}
.sc-header h2 {
    margin: 0; font-size: 16px; font-weight: 700; color: #fff;
    display: flex; align-items: center; gap: 8px;
}

/* 3. 테이블 스크롤 영역 (핵심 요청사항) */
.table-wrapper {
    width: 100%;
    max-height: 650px; /* 룰북 게시판처럼 높이 고정 */
    overflow-y: auto;  /* 세로 스크롤 생성 */
    background: rgba(0,0,0,0.2);
}

/* 커스텀 스크롤바 (다크 테마) */
.table-wrapper::-webkit-scrollbar { width: 8px; height: 8px; }
.table-wrapper::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
.table-wrapper::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }
.table-wrapper::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* 테이블 스타일 */
.sc-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 800px; }

/* 헤더 고정 (스크롤 시 헤더 유지) */
.sc-table thead th {
    position: sticky; top: 0; z-index: 10;
    background: #0d1117; /* 헤더 배경 불투명 */
    color: var(--text-muted); font-weight: 600; padding: 12px;
    border-bottom: 1px solid var(--line); text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.sc-table td {
    padding: 12px; 
    border-bottom: 1px solid rgba(255,255,255,0.05);
    vertical-align: middle; color: #e2e8f0;
}

/* 시나리오 집 (왼쪽 고정 컬럼) */
.cell-book {
    background: rgba(255, 236, 179, 0.02);
    border-right: 1px solid rgba(255,255,255,0.05);
    color: var(--accent-gold) !important;
    font-weight: 700; text-align: center;
}

/* 제목 등 텍스트 */
.sc-subject { font-weight: 600; color: #fff; font-size: 15px; display: block; }

/* 완료 상태 */
tr.is-complete .sc-subject { text-decoration: line-through; color: var(--text-muted); opacity: 0.6; }
tr.is-complete td { opacity: 0.6; }

/* 배지 스타일 */
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; margin-right: 2px; }
.badge-type { border: 1px solid var(--line); color: var(--text-muted); }
.type-series { border-color: var(--accent-gold); color: var(--accent-gold); background: rgba(255, 236, 179, 0.05); }

.role-gm { border: 1px solid #f472b6; color: #f472b6; background: rgba(244, 114, 182, 0.05); }
.role-pl { border: 1px solid #64ffda; color: #64ffda; background: rgba(100, 255, 218, 0.05); }
.role-read { border: 1px solid #94a3b8; color: #94a3b8; background: rgba(255,255,255,0.05); }

.status-badge { display: inline-block; width: 60px; text-align: center; padding: 4px 0; border-radius: 20px; font-size: 10px; font-weight: 800; }
.st-done { background: var(--accent); color: #000; }
.st-yet { background: rgba(255,255,255,0.05); color: #555; }

/* --- [버튼 스타일] --- */
.btn_write, .btn_action {
    background: rgba(100, 255, 218, 0.1); color: var(--accent) !important;
    border: 1px solid var(--accent); padding: 6px 14px; border-radius: 6px;
    font-weight: 600; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
    transition: 0.2s;
}
.btn_write:hover, .btn_action:hover { background: var(--accent); color: #000 !important; box-shadow: 0 0 10px rgba(100,255,218,0.2); }

.btn_cancel {
    background: transparent; border: 1px solid var(--line); 
    color: var(--text-muted) !important; padding: 6px 14px; border-radius: 6px; font-size: 13px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.btn_cancel:hover { border-color: #fff; color: #fff !important; }

/* 글쓰기 폼 스타일 */
.sc-write-table { width: 100%; border-collapse: collapse; }
.sc-write-table th { width: 130px; text-align: left; color: var(--accent); padding: 15px 5px; font-weight: 600; }
.sc-write-table td { padding: 10px 5px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.sc-input, .sc-select {
    background: #090c10; border: 1px solid var(--line); color: #fff;
    padding: 10px; border-radius: 6px; width: 100%; outline: none; box-sizing: border-box;
}
.sc-input:focus, .sc-select:focus { border-color: var(--accent); }

/* 모바일 */
@media (max-width: 768px) {
    .col-rule, .col-type, .col-people, .col-play, .col-done { display: none !important; }
    .sc-write-table th, .sc-write-table td { display: block; width: 100%; }
}

/* [Modal Style - 추가됨] */
.modal-overlay {
    display: none; /* 기본 숨김 */
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 9999;
    justify-content: center; align-items: center;
}
.modal-overlay.open { display: flex; }

.modal-content {
    background: var(--bg-card);
    border: 1px solid var(--accent);
    box-shadow: 0 0 30px rgba(100, 255, 218, 0.15);
    width: 90%; max-width: 500px;
    padding: 25px;
    border-radius: 12px;
    position: relative;
    animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalPop {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-header { font-size: 18px; font-weight: bold; color: var(--accent); margin-bottom: 20px; border-bottom: 1px solid var(--line); padding-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.modal-close { cursor: pointer; color: var(--text-muted); font-size: 20px; transition: 0.2s; }
.modal-close:hover { color: #fff; }

/* 모달 내부 폼 스타일 */
.m-group { margin-bottom: 15px; }
.m-label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 5px; }
.m-input, .m-select {
    width: 100%; box-sizing: border-box;
    background: #090c10; border: 1px solid var(--line);
    color: #fff; padding: 10px; border-radius: 6px; outline: none;
}
.m-input:focus { border-color: var(--accent); }
.m-row { display: flex; gap: 10px; }

/* 하단 버튼 */
.m-footer { 
    margin-top: 25px; 
    display: flex; justify-content: space-between; align-items: center; 
}

.btn-del { 
    background: transparent; border: 1px solid #f472b6; color: #f472b6; 
    padding: 8px 15px; border-radius: 6px; cursor: pointer; font-weight: 700; font-size: 13px;
    transition: 0.2s;
}
.btn-del:hover { background: #f472b6; color: #000; }

.btn-save { 
    background: var(--accent); border: 1px solid var(--accent); color: #000; 
    padding: 8px 20px; border-radius: 6px; cursor: pointer; font-weight: 700; font-size: 13px;
    transition: 0.2s;
}
.btn-save:hover { background: #fff; border-color: #fff; }