@charset "utf-8";

/* 전체 레이아웃 및 배경 */
#VIEW { position: relative; min-height: 100vh; background: #020617; padding: 40px 50px; font-family: 'Pretendard', sans-serif; color: #f1f5f9; overflow-x: hidden; }
#starCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: 0.25; }
    
.View-Wrapper { position: relative; z-index: 2; background: rgba(2, 6, 23, 0.8); border: 1px solid #1e293b; border-radius: 16px; box-shadow: 0 25px 50px rgba(0,0,0,0.6); overflow: hidden; backdrop-filter: blur(10px); }

/* 헤더 */
.View-Header { padding: 20px 30px; background: rgba(15, 23, 42, 0.6); border-bottom: 1px solid #1e293b; display: flex; justify-content: space-between; align-items: center; }
.View-Header h2 { margin: 0; font-size: 1.1rem; font-weight: 900; color: #fff; display: flex; align-items: center; gap: 12px; letter-spacing: -0.5px; }
.View-Header h2 i { color: #00d4ff; }
.View-Header .status-badge { padding: 5px 14px; border-radius: 50px; font-size: 0.7rem; font-weight: 800; background: rgba(0, 0, 0, 0.3); text-transform: uppercase; }
/* [단독 디자인] Target Object 히어로 섹션 */
.Hero-Target-Section { padding: 50px 40px; background: linear-gradient(135deg, #0f172a 0%, #020617 100%); border-bottom: 1px solid #1e293b; display: flex; align-items: center; gap: 30px; position: relative; overflow: hidden; }
.Hero-Target-Section::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: #00d4ff; box-shadow: 0 0 20px #00d4ff; }
.Hero-Icon { width: 80px; height: 80px; background: rgba(0, 212, 255, 0.1); border: 1px solid rgba(0, 212, 255, 0.3); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: #00d4ff; text-shadow: 0 0 15px rgba(0, 212, 255, 0.5); }
.Hero-Content { flex: 1; }
.Hero-Content .label { display: block; color: #64748b; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; }
.Hero-Content .subject-text { font-size: 2.2rem; color: #fff; font-weight: 900; margin-bottom: 8px; letter-spacing: -1px; font-family: 'JetBrains Mono', monospace; }
.Hero-Content .kor-text { font-size: 1.2rem; color: #94a3b8; font-weight: 600; display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.Hero-Content .kor-text::before { content: ''; width: 20px; height: 2px; background: #1e293b; }
    
/* 메모(wr_1) 출력 스타일 */
.Hero-Memo { background: rgba(0, 212, 255, 0.08); border: 1px solid rgba(0, 212, 255, 0.2); padding: 12px 20px; border-radius: 8px; display: inline-flex; align-items: flex-start; gap: 12px; color: #00d4ff; font-size: 0.95rem; font-weight: 500; line-height: 1.5; max-width: 80%; }
.Hero-Memo i { font-size: 1rem; margin-top: 3px; filter: drop-shadow(0 0 5px #00d4ff); }

/* 대시보드 그리드 */
.Dashboard-Grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #1e293b; border-bottom: 1px solid #1e293b; }
.info-item { background: #080c14; padding: 20px 30px; transition: 0.3s; }
.info-item:hover { background: #0f172a; }
.info-item .label { display: flex; align-items: center; color: #64748b; font-size: 0.65rem; font-weight: 800; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; }
.info-item .label i { color: #00d4ff; margin-right: 8px; font-size: 0.8rem; }
.info-item .value { font-size: 0.95rem; color: #f1f5f9; font-weight: 600; }
.info-item .value.accent { color: #00d4ff; font-family: 'JetBrains Mono', monospace; }

/* 실시간 상태바 */
.dynamic-result-area { background: #020617; padding: 15px 30px; border-bottom: 1px solid #1e293b; display: flex; flex-wrap: wrap; gap: 15px 40px; border-left: 4px solid #00d4ff; }
.res-item { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; display: flex; align-items: center; }
.res-item span { color: #475569; margin-right: 10px; font-weight: 800; }
.res-item b { color: #94a3b8; text-transform: uppercase; }

/* 본문 섹션 */
.View-Body { padding: 40px; background: #000; }
.section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; color: #00d4ff; font-size: 0.85rem; font-weight: 900; text-transform: uppercase; }
.section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, #1e293b, transparent); }
.main-content { line-height: 1.8; color: #cbd5e1; font-size: 1.05rem; margin-bottom: 50px; }
.info-card { background: rgba(30, 41, 59, 0.3); padding: 25px; border-radius: 12px; border: 1px solid #1e293b; margin-bottom: 30px; }
.info-card.special { border-left: 4px solid #ff2d55; background: rgba(255, 45, 85, 0.05); }
.info-card.additional { border-left: 4px solid #00d4ff; background: rgba(0, 212, 255, 0.05); }
    
/* 코드 블럭 (300px 스크롤 적용) */
.code-block { background: #050505; border: 1px solid #1e293b; padding: 25px; border-radius: 8px; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; color: #00d4ff; overflow-x: auto; overflow-y: auto; line-height: 1.6; max-height: 300px; margin-bottom: 30px; }
.code-block::-webkit-scrollbar { width: 8px; height: 8px; }
.code-block::-webkit-scrollbar-track { background: #020617; }
.code-block::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; }
.code-block::-webkit-scrollbar-thumb:hover { background: #00d4ff; }

/* 태그 링크 */
.Tag-Container { padding: 20px 40px; background: #080c14; border-top: 1px solid #1e293b; display: flex; flex-wrap: wrap; gap: 10px; }
.x2-tag-item { display: inline-block; padding: 4px 12px; background: #1e293b; color: #94a3b8; border-radius: 4px; font-size: 0.8rem; font-weight: 700; transition: 0.2s; text-decoration: none; }
.x2-tag-item:hover { background: #00d4ff; color: #020617; transform: translateY(-2px); }

/* 버튼 */
.View-Footer { padding: 30px; background: #080c14; border-top: 1px solid #1e293b; display: flex; justify-content: center; gap: 12px; }
.btn-ui { padding: 12px 28px; border-radius: 6px; font-size: 0.85rem; font-weight: 800; cursor: pointer; transition: 0.2s; border: 1px solid #334155; background: #0f172a; color: #f1f5f9; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.btn-ui:hover { border-color: #00d4ff; color: #00d4ff; background: #1e293b; }
.btn-ui.btn-edit { background: #00d4ff; color: #020617; border: none; }
.btn-ui.btn-edit:hover { background: #fff; color: #000; box-shadow: 0 0 20px rgba(0, 212, 255, 0.4); }

.Post-Nav { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.nav-item { padding: 20px; background: rgba(15, 23, 42, 0.5); border: 1px solid #1e293b; border-radius: 12px; text-decoration: none; transition: 0.3s; }
.nav-item:hover { border-color: #00d4ff; background: rgba(0, 212, 255, 0.05); }
.nav-item .nav-label { display: block; font-size: 0.7rem; color: #64748b; font-weight: 800; margin-bottom: 5px; text-transform: uppercase; }
.nav-item .nav-title { display: block; font-size: 0.95rem; color: #f1f5f9; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 스크롤바 */
* { scrollbar-width: thin; scrollbar-color: #334155 #020617; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #020617; }
*::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #334155 0%, #1e293b 100%); border: 2px solid #020617; border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #475569 0%, #334155 100%); }

/* ========== Table Status ========== */
.tbl-status-title { color: #f59e0b; }
.tbl-status-wrap { overflow-x: auto; margin-bottom: 30px; }
.tbl-status { width: 100%; border-collapse: collapse; font-size: 0.8rem; font-family: 'JetBrains Mono', monospace; }
.tbl-status tr { border-bottom: 1px solid #1e293b; }
.tbl-status-label { padding: 8px 14px; color: #94a3b8; width: 160px; }
.tbl-status-val { padding: 8px 14px; color: #f59e0b; }

/* ========== Table Column Definition ========== */
.tbl-col-title { color: #00d4ff; }
.tbl-col-wrap { height: 400px; overflow-x: auto; overflow: auto; margin-bottom: 30px; }
.tbl-col { width: 100%; border-collapse: collapse; font-size: 0.78rem; font-family: 'JetBrains Mono', monospace; }
.tbl-col-head { background: #0f172a; border-bottom: 2px solid rgba(0, 212, 255, 0.13); }
.tbl-col-head th { padding: 10px 12px; color: #00d4ff; text-align: left; white-space: nowrap; }
.tbl-col-row { border-bottom: 1px solid #1e293b; }
.tbl-col-row.even { background: rgba(15, 23, 42, 0.4); }
.tbl-col-row.odd  { background: rgba(30, 41, 59, 0.3); }
.tbl-col-row td { padding: 8px 12px; }
.col-num     { color: #475569; }
.col-name    { color: #e2e8f0; font-weight: bold; }
.col-type    { color: #a78bfa; }
.col-null-yes { color: #f59e0b; }
.col-null-no  { color: #64748b; }
.col-key-pri  { color: #ff2d55; }
.col-key-mul  { color: #00d4ff; }
.col-key-none { color: #64748b; }
.col-default  { color: #94a3b8; }
.col-null-val { color: #334155; }
.col-extra    { color: #34d399; }
.col-comment  { color: #94a3b8; }