/* 파일명: st003_appendix.css */


@charset "utf-8";

/* ==========================================================================
   ST003 APPENDIX MODULE CSS (다형성 부록 전용 스타일)
   ========================================================================== */

/* 🚨 4개 버튼 디자인을 하나로 통일시키는 공통 클래스 추가 */
.st003-apx-btn {
    border-radius: 3px;
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    outline: none;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap; 
}

/* 🚨 읽기, 수정, 이어가기, 브랜치 모두 이 다크/뉴트럴 테마 하나로 통일 */
.st003-apx-btn-action { 
    background: #2d333b; 
    color: #adbac7; 
    border: 1px solid #444c56; 
}
.st003-apx-btn-action:hover { 
    background: #444c56; 
    color: #ffffff; 
    border-color: #768390; 
}

/* 모달 하단 푸터 저장버튼 등 전용 색상 (유지) */
.st003-apx-btn-primary { background: #316dca; color: #fff; border: 1px solid #4184e4; }
.st003-apx-btn-primary:hover { background: #255ab2; border-color: #316dca; }
.st003-apx-btn-danger { background: #da3633; color: #fff; border: 1px solid #b32624; }
.st003-apx-btn-danger:hover { background: #b32624; }

.st003-apx-node-actions {
    display: flex;
    flex-wrap: wrap; 
    gap: 6px;
    margin-top: 8px;
}

.st003-apx-box {
    background: #1c2128;
    border: 1px solid #444c56;
    border-radius: 4px;
}
.st003-apx-hide { display: none !important; }

/* 모달 컨테이너 레이아웃 */
.st003-apx-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: rgba(13, 17, 23, 0.75);
    z-index: 9999; display: flex; justify-content: center; align-items: center;
    box-sizing: border-box; padding: 2.5vh 2.5vw;
}
.st003-apx-modal-content {
    width: 95vw; height: 95vh;
    background: #22272e;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden;
}
.st003-apx-modal-header {
    background: #1c2128; border-bottom: 1px solid #373e47; color: #f0f6fc;
    padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
}
.st003-apx-modal-title { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.st003-apx-seq-badge { background: #316dca; color: #fff; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; }
.st003-apx-close-btn {
    background: #2d333b; border: 1px solid #444c56; border-radius: 4px; color: #adbac7;
    font-size: 13px; font-weight: bold; cursor: pointer; padding: 4px 10px; transition: all 0.15s ease;
}
.st003-apx-close-btn:hover { background: #e5534b; border-color: #f85149; color: #fff; }

/* 탭 바 */
.st003-apx-tab-bar {
    background: #1c2128; padding: 8px 16px 0 16px; border-bottom: 1px solid #373e47; display: flex; gap: 6px; flex-shrink: 0;
}
.st003-apx-tab-btn {
    padding: 6px 12px; font-size: 11px; font-weight: 600; cursor: pointer;
    background: #22272e; color: #768390; border: 1px solid #373e47; border-bottom: none; border-radius: 4px 4px 0 0;
}
.st003-apx-tab-btn:hover { color: #adbac7; background: #2d333b; }
.st003-apx-tab-btn.active { background: #2d333b; color: #539bf5; border-color: #444c56; border-top: 2px solid #539bf5; }

.st003-apx-toolbar {
    display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; margin-bottom: 8px;
}
.st003-apx-sort-select {
    background: #22272e; color: #f0f6fc; border: 1px solid #444c56; padding: 4px 8px; border-radius: 3px; font-size: 11px; outline: none; cursor: pointer;
}

/* 🚨 툴바 레벨 컨트롤러, 미니 인풋 스타일 */
.st003-apx-select, .st003-apx-input {
    background: #0d1117; color: #c9d1d9;
    border: 1px solid #30363d; border-radius: 6px;
    padding: 6px 8px; font-size: 12px; outline: none;
}
.st003-apx-input[type="number"] { width: 60px; }

/* 본문 영역 */
.st003-apx-modal-body { flex: 1; padding: 12px; overflow-y: auto; background: #2d333b; box-sizing: border-box; display: flex; flex-direction: column; }
.st003-apx-panel { flex: 1; display: flex; flex-direction: column; width: 100%; box-sizing: border-box; }

.st003-apx-guide-box {
    border-left: 4px solid #d29922; padding: 8px 12px; margin-bottom: 10px; font-size: 11px; line-height: 1.5; color: #adbac7;
}
.st003-apx-guide-code-q { background: #1e3a5f; color: #79c0ff; padding: 2px 6px; border-radius: 3px; font-family: monospace; font-weight: bold; }
.st003-apx-guide-code-a { background: #1a4731; color: #7ee787; padding: 2px 6px; border-radius: 3px; font-family: monospace; font-weight: bold; }

.st003-apx-textarea {
    flex: 1; width: 100%; min-height: 250px; padding: 10px; font-family: 'Consolas', monospace; font-size: 12px;
    color: #f0f6fc; background: #22272e; border: 1px solid #444c56; border-radius: 4px; box-sizing: border-box; line-height: 1.5; resize: none;
}
.st003-apx-textarea:focus { border-color: #539bf5; box-shadow: 0 0 0 2px rgba(83, 155, 245, 0.2); outline: none; }

/* 리스트 테이블 */
.st003-apx-table-wrap { width: 100%; border-radius: 4px; overflow: hidden; }
.st003-apx-table { width: 100%; border-collapse: collapse; font-size: 11px; text-align: left; }
.st003-apx-table th { background: #1c2128; color: #adbac7; padding: 8px 10px; border-bottom: 1px solid #444c56; font-weight: 600; }
.st003-apx-table td { padding: 8px 10px; color: #f0f6fc; background: #22272e; border-bottom: 1px solid #373e47; }
.st003-apx-table tr:last-child td { border-bottom: none; }
.st003-apx-table tr:hover td { background: #2d3848; }

.st003-apx-empty-box { padding: 30px 15px; text-align: center; color: #768390; font-size: 12px; line-height: 1.5; }
.st003-apx-preview-text { cursor: pointer; color: #539bf5; font-weight: 600; }
.st003-apx-preview-text:hover { text-decoration: underline; color: #79c0ff; }

/* 푸터 */
.st003-apx-modal-footer {
    background: #1c2128; border-top: 1px solid #373e47; padding: 8px 14px;
    display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
}
.st003-apx-status-msg { font-size: 11px; color: #539bf5; font-weight: 600; }

/* 상세 뷰어 모달 */
.st003-apx-view-overlay { background-color: rgba(0, 0, 0, 0.85); z-index: 10000; }
.st003-apx-view-content { width: 800px; max-width: 95%; height: 85vh; border: 1px solid #444c56; border-radius: 6px; }
.st003-apx-view-body { flex: 1; padding: 15px; overflow-y: auto; color: #f0f6fc; font-size: 12px; line-height: 1.5; }

.st003-apx-bubble-q { background: #1e3a5f; border-left: 4px solid #539bf5; padding: 10px; margin-bottom: 8px; border-radius: 4px; }
.st003-apx-bubble-a { background: #1a4731; border-left: 4px solid #3fb950; padding: 10px; margin-bottom: 20px; border-radius: 4px; }

.st003-apx-td-chk { text-align: center; width: 30px; }
.st003-apx-td-ctrl { text-align: center; width: 50px; white-space: nowrap; }
.st003-apx-td-turns { text-align: center; width: 40px; color: #adbac7; font-weight: bold; }
.st003-apx-spacer { display: inline-block; width: 15px; }
.st003-apx-list-info { margin-bottom: 8px; font-size: 11px; color: #adbac7; font-weight: 700; padding-left: 4px; }
.st003-apx-th-center { text-align: center; }
.st003-apx-error-msg { color: #f85149; text-align: center; padding: 15px; }
.st003-apx-hl-text { color: #539bf5; }

/* 💡 3층 단독 방 전용 (전역 탐색기) 기본 구조 */
.st003-apx-global-wrapper {
    padding: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.st003-apx-global-header {
    background: #1c2128;
    border: 1px solid #444c56;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.st003-apx-global-tree-container {
    flex: 1;
    overflow-y: auto;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 10px;
}

/* 💡 JS가 뿌리는 1줄 컴팩트 전용 모듈 (PHP에서 인라인으로 뺐던 부분) */
.st003-apx-compact-row {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #0d1117;
    padding: 5px 8px;
    border: 1px solid #30363d;
    border-radius: 4px;
    margin-bottom: 4px;
}
.st003-apx-folder-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #21262d;
    padding: 6px 10px;
    border: 1px solid #30363d;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 2px;
}
.st003-apx-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    padding: 2px 4px;
    opacity: 0.85;
    transition: opacity 0.15s;
}
.st003-apx-icon-btn:hover { opacity: 1; transform: scale(1.1); }