/* ═══════════════════════════════════════════════════════
   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: #9333EA;
    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;
}

/* ── pill 카운트 뱃지 */
.sk-pill-cnt {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: #e5e7eb; color: #374151;
    font-size: 11px; font-weight: 700;
}
.mb-pill.is-active .sk-pill-cnt {
    background: rgba(124, 58, 237, .2); color: #5b21b6;
}

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

/* ── 페이지네이션 (PC견적·중고매입 게시판 동일 디자인) */
.pcest-pager { margin: 16px 0 0; display: flex; justify-content: center; align-items: center; gap: 4px; flex-wrap: wrap; }
.pcest-pager .sound_only { display: none !important; }
.pcest-pager .pg_wrap { background: none; border: none; padding: 0; margin: 0; }
.pcest-pager .pg { display: flex; align-items: center; gap: 4px; }
.pcest-pager .pg a,
.pcest-pager .pg span,
.pcest-pager .pg strong {
    min-width: 30px; height: 30px; line-height: 30px;
    padding: 0 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #555;
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: all .15s;
}
.pcest-pager .pg a:hover { background: #f5f5f5; border-color: #2b2b2b; color: #2b2b2b; }
.pcest-pager .pg .pg_current,
.pcest-pager .pg strong { background: #2b2b2b; border-color: #2b2b2b; color: #fff; font-weight: 700; }

/* ════════ 상세 뷰 ════════ */
.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: #9333EA;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    flex-shrink: 0;
}
.sk-copy-btn:hover { background: #7C3AED; }

/* ── 통계 */
.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: #9333EA; color: #9333EA; }

/* ── 이전/다음 */
.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: #9333EA; color: #9333EA; }
.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: #9333EA;
    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; }
}

/* ─── Dark Mode ────────────────────────────────────────── */
html.dark-mode .sk-card { background: #18181b; border-color: rgba(255,255,255,.08); }
html.dark-mode .sk-card:hover { border-color: rgba(147,51,234,.5); }
html.dark-mode .sk-owner,
html.dark-mode .sk-stat,
html.dark-mode .sk-desc { color: #a1a1aa; }
html.dark-mode .sk-title { color: #f4f4f5; }
html.dark-mode .sk-cmd { background: #27272a; border-color: rgba(255,255,255,.08); color: #d4d4d8; }
html.dark-mode .sk-pill-cnt { background: #27272a; color: #71717a; }
html.dark-mode .mb-pill.is-active .sk-pill-cnt { background: rgba(124,58,237,.2); color: #c084fc; }
html.dark-mode .sk-empty { color: #71717a; }
html.dark-mode .pcest-pager .pg a { background: #18181b; border-color: rgba(255,255,255,.1); color: #a1a1aa; }
html.dark-mode .pcest-pager .pg strong { background: #e4e4e7; border-color: rgba(255,255,255,.15); color: #09090b; }
html.dark-mode .sk-view-header { background: #18181b; border-color: rgba(255,255,255,.07); }
html.dark-mode .sk-view-title { color: #f4f4f5; }
html.dark-mode .sk-view-subtitle { color: #a1a1aa; }
html.dark-mode .sk-view-meta,
html.dark-mode .sk-view-info { color: #71717a; }