/* ═══════════════════════════════════════════════════════
   skills_sh 게시판 스킨 — style.css
   레이아웃: mb-wrap (max-width:1200px, padding:28px 24px) 표준 사용
   ═══════════════════════════════════════════════════════ */

/* mb-wrap / mb-header / mb-board-title 은 main_board/style.css 에서 상속
   여기서는 sk-* 전용 컴포넌트만 정의 */

/* ── 카드 그리드 */
.sk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

/* ── 카드 */
.sk-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    background: #fff;
    border: 1.5px solid #e9ecef;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: all .18s;
}
.sk-card:hover {
    border-color: #4361ee;
    box-shadow: 0 4px 16px rgba(67,97,238,.1);
    transform: translateY(-2px);
}
.sk-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sk-owner {
    font-size: 0.78rem;
    color: #6c757d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sk-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
    color: #1a1a2e;
    line-height: 1.3;
}
.sk-desc {
    margin: 0;
    font-size: 0.8rem;
    color: #6c757d;
    line-height: 1.5;
    flex: 1;
}
.sk-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #f1f3f5;
}
.sk-stat {
    font-size: 0.76rem;
    color: #6c757d;
    font-weight: 500;
}
.sk-cmd {
    font-size: 0.7rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 3px;
    padding: 2px 5px;
    color: #495057;
    font-family: 'SFMono-Regular', Consolas, monospace;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── 빈 상태 */
.sk-empty {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

/* ── 페이지네이션 */
.pcest-pager {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}
.pcest-pager .pagination {
    display: flex;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.pcest-pager .page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    border: 1.5px solid #dee2e6;
    border-radius: 5px;
    color: #495057;
    text-decoration: none;
    font-size: 0.85rem;
    transition: all .15s;
}
.pcest-pager .page-item .page-link:hover { border-color: #4361ee; color: #4361ee; }
.pcest-pager .page-item.active .page-link {
    background: #4361ee;
    border-color: #4361ee;
    color: #fff;
    font-weight: 600;
}

/* ════════ 상세 뷰 ════════ */
.sk-view-header {
    padding: 0 0 24px;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 28px;
}
.sk-view-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.sk-view-title {
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0 0 6px;
    color: #1a1a2e;
}
.sk-view-subtitle {
    margin: 0 0 8px;
    font-size: 1rem;
    color: #495057;
}
.sk-view-info {
    display: flex;
    gap: 16px;
    font-size: 0.8rem;
    color: #adb5bd;
}

.sk-view-body { max-width: 760px; }
.sk-section { margin-bottom: 30px; }
.sk-section h2 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid #e9ecef;
}

/* ── 설치 박스 */
.sk-install {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1a1a2e;
    border-radius: 8px;
    padding: 12px 16px;
}
.sk-install code {
    flex: 1;
    color: #a9fbc3;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.88rem;
    word-break: break-all;
}
.sk-copy-btn {
    padding: 5px 12px;
    background: #4361ee;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    flex-shrink: 0;
}
.sk-copy-btn:hover { background: #3451d1; }

/* ── 통계 */
.sk-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}
.sk-stat-box {
    background: #f8f9fa;
    border: 1.5px solid #e9ecef;
    border-radius: 7px;
    padding: 12px 14px;
    text-align: center;
}
.sk-stat-val { font-size: 1.1rem; font-weight: 700; color: #1a1a2e; margin-bottom: 3px; }
.sk-stat-lbl { font-size: 0.75rem; color: #6c757d; }

/* ── 보안 배지 */
.sk-sec-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.sk-sec-badge { padding: 4px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; }
.sec-gen    { background: #fff3cd; color: #856404; }
.sec-socket { background: #cff4fc; color: #055160; }
.sec-snyk   { background: #d1e7dd; color: #0f5132; }

/* ── 링크 버튼 */
.sk-links { display: flex; flex-wrap: wrap; gap: 8px; }
.sk-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    background: #fff;
    border: 1.5px solid #dee2e6;
    border-radius: 7px;
    color: #495057;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all .15s;
}
.sk-link-btn:hover { border-color: #4361ee; color: #4361ee; }

/* ── 이전/다음 */
.sk-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}
.sk-nav-btn {
    padding: 8px 14px;
    border: 1.5px solid #dee2e6;
    border-radius: 6px;
    font-size: 0.84rem;
    color: #495057;
    text-decoration: none;
    transition: all .15s;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sk-nav-btn:hover { border-color: #4361ee; color: #4361ee; }
.sk-nav-center { font-weight: 700; white-space: nowrap; }

/* ════════ 쓰기 폼 ════════ */
.sk-write-grid { display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px; }
.sk-fieldset { border: 1.5px solid #e9ecef; border-radius: 8px; padding: 18px 20px; }
.sk-fieldset legend { padding: 0 8px; font-size: 0.88rem; font-weight: 700; color: #495057; }
.sk-field { margin-bottom: 14px; }
.sk-field:last-child { margin-bottom: 0; }
.sk-field label { display: block; font-size: 0.82rem; font-weight: 600; color: #495057; margin-bottom: 5px; }
.sk-field label .req { color: #dc3545; }
.sk-input, .sk-textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid #dee2e6;
    border-radius: 6px;
    font-size: 0.88rem;
    outline: none;
    transition: border-color .2s;
    box-sizing: border-box;
}
.sk-input:focus, .sk-textarea:focus {
    border-color: #4361ee;
    box-shadow: 0 0 0 3px rgba(67,97,238,.1);
}
.sk-textarea { resize: vertical; font-family: inherit; }
.sk-mono { font-family: 'SFMono-Regular', Consolas, monospace; }
.sk-field-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.sk-write-btns { display: flex; gap: 10px; padding-top: 16px; }

/* ── 반응형 */
@media (max-width: 768px) {
    .sk-grid { grid-template-columns: 1fr; }
    .sk-view-title { font-size: 1.4rem; }
    .sk-field-row { grid-template-columns: 1fr; }
    .sk-nav { grid-template-columns: 1fr; }
}