@charset "utf-8";

/* Reset & Fonts */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Pretendard', sans-serif; color: #222; background-color: #fff; line-height: 1.6; -webkit-text-size-adjust: none; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; vertical-align: middle; }

/* Base Utilities */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.accent { color: #bca178; }

/* ── HEADER ── */
#header {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(8, 14, 30, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    height: 76px;
}

/* 로고 왼쪽 고정 */
.logo { flex-shrink: 0; }
.logo a { display: flex; align-items: center; text-decoration: none; }
.logo-img {
    height: 46px;
    width: auto;
    display: block;
    object-fit: contain;
}

/* 오른쪽 묶음: GNB + 상담버튼 */
.header-right {
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: auto;
}

/* GNB */
/* PC에서 모바일gnb 숨김, 모바일gnb-pc 숨김은 head.php 미디어쿼리에서 처리 */
#gnb { display: none; }
#gnb.open { display: block !important; }
.gnb-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0; padding: 0;
}
.gnb-menu > li > a {
    display: block;
    padding: 8px 18px;
    color: rgba(255,255,255,0.82);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-decoration: none;
    border-radius: 6px;
    white-space: nowrap;
    transition: color 0.2s, background 0.2s;
}
.gnb-menu > li > a:hover {
    color: #fff;
    background: rgba(255,255,255,0.07);
}

/* 드롭다운 */
.has-sub { position: relative; }
.sub-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 150px;
    background: rgba(12, 18, 36, 0.98);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 8px 0;
    list-style: none;
    box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.has-sub:hover .sub-menu { display: block; }
.sub-menu li a {
    display: block;
    padding: 10px 20px;
    color: rgba(255,255,255,0.72);
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s, background 0.2s;
}
.sub-menu li a:hover {
    color: #fff;
    background: rgba(255,255,255,0.06);
}

/* 온라인 상담 버튼 */
.btn-consult {
    display: inline-block;
    padding: 10px 24px;
    background: #b89a5a;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    border: 2px solid #b89a5a;
    transition: background 0.2s, color 0.2s, transform 0.15s;
    margin-left: 16px;
}
.btn-consult:hover {
    background: transparent;
    color: #b89a5a;
    transform: translateY(-1px);
}

/* 모바일 토글 */
.mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    margin-left: 8px;
}
.mobile-toggle span {
    display: block;
    width: 24px; height: 2px;
    background: #fff;
    border-radius: 2px;
}

/* Main Visual */
.main-visual { width: 100%; height: 550px; background: linear-gradient(rgba(17, 30, 56, 0.85), rgba(17, 30, 56, 0.85)), url('https://images.unsplash.com/photo-1589829545856-d10d557cf95f?auto=format&fit=crop&w=1920&q=80') no-repeat center center; background-size: cover; display: table; text-align: center; color: #fff; }
.visual-text { display: table-cell; vertical-align: middle; padding: 0 20px; }
.main-visual h1 { font-size: 42px; font-weight: 700; line-height: 1.4; margin-bottom: 20px; letter-spacing: -1px; }
.main-visual p { font-size: 18px; color: #cbd5e1; margin-bottom: 40px; font-weight: 300; }
.visual-buttons { display: block; }
.btn-main { display: inline-block; padding: 15px 35px; font-size: 16px; font-weight: 600; border-radius: 4px; margin: 0 10px; transition: all 0.3s; }
.main-primary { background-color: #bca178; color: #fff; }
.main-primary:hover { background-color: #a48a63; }
.main-secondary { background-color: transparent; color: #fff; border: 1px solid #fff; }
.main-secondary:hover { background-color: #fff; color: #111e38; }

/* Main Common Sections */
.main-section { padding: 90px 0; }
.section-title { text-align: center; margin-bottom: 60px; }
.section-title h2 { font-size: 32px; font-weight: 700; color: #111e38; letter-spacing: 1px; position: relative; padding-bottom: 15px; }
.section-title h2::after { content: ''; display: block; width: 40px; height: 2px; background-color: #bca178; position: absolute; bottom: 0; left: 50%; margin-left: -20px; }
.section-title p { font-size: 16px; color: #666; margin-top: 15px; }

/* 그리드/섹션 스타일 → 파일 하단 통합 블록에서 관리 */

/* Board Section */
.board-columns { display: table; width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 40px 0; }
.board-col { display: table-cell; vertical-align: top; }
.board-col-title { display: table; width: 100%; border-bottom: 2px solid #111e38; padding-bottom: 12px; margin-bottom: 15px; }
.board-col-title h3 { display: table-cell; font-size: 20px; font-weight: 700; color: #111e38; }
.board-col-title h3 i { margin-right: 6px; color: #bca178; }
.btn-more { display: table-cell; text-align: right; vertical-align: middle; font-size: 13px; color: #888; }

/* Latest Board */
.latest-wrapper ul { padding: 5px 0; }
.latest-wrapper li { padding: 12px 0; border-bottom: 1px solid #f1f5f9; font-size: 15px; display: table; width: 100%; }
.latest-wrapper li a { display: table-cell; max-width: 450px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.latest-wrapper li span { display: table-cell; text-align: right; font-size: 13px; color: #94a3b8; width: 90px; }

/* Quick Consult Banner */
.quick-consult-banner { background-color: #111e38; color: #fff; padding: 50px 0; }
.banner-flex { display: table; width: 100%; }
.banner-text { display: table-cell; vertical-align: middle; }
.banner-text h3 { font-size: 24px; font-weight: 600; margin-bottom: 8px; }
.banner-text p { font-size: 15px; color: #94a3b8; }
.btn-banner { display: table-cell; vertical-align: middle; text-align: right; background-color: #fff; color: #111e38; padding: 14px 30px; font-weight: 600; border-radius: 4px; white-space: nowrap; transition: all 0.3s; }
.btn-banner:hover { background-color: #bca178; color: #fff; }

/* Sub Page Common */
.sub-banner { width: 100%; height: 200px; background: linear-gradient(rgba(17, 30, 56, 0.9), rgba(17, 30, 56, 0.9)); display: table; text-align: center; color: #fff; }
.sub-banner h2 { display: table-cell; vertical-align: middle; font-size: 28px; font-weight: 700; letter-spacing: -0.5px; }
.sub-container { max-width: 100%; margin: 0; padding: 0; min-height: 500px; }

/* Footer */
#footer { background-color: #0f172a; color: #94a3b8; padding: 50px 0; font-size: 14px; border-top: 1px solid #1e293b; }
.footer-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.footer-logo { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 20px; letter-spacing: 1px; }
.footer-info p { margin-bottom: 6px; line-height: 1.6; }
.footer-info .copyright { margin-top: 20px; color: #64748b; font-size: 13px; }

/* ==========================================================================
   게시판 스킨 스타일
   ========================================================================= */
.sub-container { max-width: 100%; margin: 0; padding: 0; font-family: 'Pretendard', sans-serif; }
.sub-container iframe, .sub-container form { width: 100%; }
#bo_list_total { font-size: 14px; color: #64748b; margin-bottom: 15px; }

.sub-container table { width: 100%; border-collapse: collapse; margin-bottom: 30px; border-top: 2px solid #111e38; }
.sub-container th { background-color: #f8fafc; color: #111e38; font-weight: 600; padding: 15px 10px; border-bottom: 1px solid #e2e8f0; font-size: 15px; }
.sub-container td { padding: 16px 10px; border-bottom: 1px solid #f1f5f9; text-align: center; color: #334155; font-size: 15px; }
.sub-container td.td_subject { text-align: left; padding-left: 15px; }
.sub-container td.td_subject a { color: #1e293b; font-weight: 500; }
.sub-container td.td_subject a:hover { color: #bca178; text-decoration: underline; }
.empty_table { padding: 80px 0; color: #94a3b8; font-size: 16px; border-bottom: 1px solid #e2e8f0; }

/* ==========================================================================
   그누보드 통합 패치
   ========================================================================= */
#wrapper, .sub-container {
    max-width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Pretendard', sans-serif;
}
.sub-container table, #fboardlist table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    border-top: 3px solid #111e38;
}
.sub-container th, #fboardlist th {
    background-color: #f8fafc;
    color: #111e38;
    font-weight: bold;
    padding: 16px 10px;
    border-bottom: 1px solid #cbd5e1;
    font-size: 15px;
}
.sub-container td, #fboardlist td {
    padding: 16px 10px;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
    font-size: 15px;
    text-align: center;
}
.empty_table, td.empty_table {
    padding: 100px 0;
    color: #94a3b8;
    font-size: 16px;
    text-align: center;
}
.bo_fx, #bo_list_total, .btn_bo_user, .btn_bo_adm {
    margin: 15px 0;
    display: block;
    text-align: right;
}
.sub-container a[href*="write.php"], .sub-container button[type="submit"], .sub-container .btn_submit {
    background-color: #bca178;
    color: #ffffff;
    border: 1px solid #bca178;
}
.sub-container a[href*="write.php"]:hover { background-color: #a48a63; }

fieldset#bo_sch, .bo_sch {
    background-color: #f1f5f9;
    padding: 20px;
    border-radius: 6px;
    margin-top: 30px;
    text-align: center;
    border: none;
}
fieldset#bo_sch select, .bo_sch select { padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; }
fieldset#bo_sch input[type="text"], .bo_sch input[type="text"] { padding: 8px 15px; width: 250px; border: 1px solid #cbd5e1; border-radius: 4px; margin: 0 5px; }
fieldset#bo_sch button, .bo_sch button { background-color: #111e38; color: #fff; border: none; padding: 9px 20px; }

/* ==========================================================================
   글 보기(view) 스타일
   ========================================================================= */
.view-info, #bo_v_info, .bo_v_info, #bo_v_top,
#bo_vc, .bo_vc, #bo_vc_w, .bo_vc_w, .captcha_box, #captcha {
    display: none;
    height: 0;
    padding: 0;
    margin: 0;
}
.sub-container h2.sub-title,
.sub-container h3:contains("본문") {
    display: none;
    font-size: 0;
    height: 0;
    margin: 0;
    padding: 0;
}
#bo_v_atc p, #bo_v_atc br { margin: 0; content: ""; }

#bo_v_img, .bo_v_img, .view-img, #bo_v_atc b~img {
    display: block;
    text-align: center;
    width: 100%;
    margin: 0 auto;
}
.law-column img, #bo_v_atc img, #bo_v_img img {
    display: inline-block;
    margin: 10px auto 35px auto;
    max-width: 100%;
    height: auto;
    border: none;
    box-shadow: none;
}

/* ==========================================================================
   법률 칼럼 본문 스타일
   ========================================================================= */
.law-column {
    max-width: 950px;
    margin: 10px auto;
    padding: 10px 25px;
    font-family: 'Pretendard', sans-serif;
    color: #1e293b;
    line-height: 1.8;
    font-size: 17.5px;
    word-break: keep-all;
}
.law-lead-box {
    background-color: #f8fafc;
    border-left: 6px solid #111e38;
    padding: 20px;
    margin: 0 0 30px 0;
    border-radius: 0 10px 10px 0;
    font-size: 18.5px;
    font-weight: 500;
    line-height: 1.8;
}
.law-h1 {
    font-size: 25px;
    font-weight: 800;
    color: #111e38;
    margin: 35px 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 3px solid #cbd5e1;
    display: block;
}
.law-h2 {
    font-size: 20px;
    font-weight: 700;
    color: #bca178;
    margin: 25px 0 12px 0;
    padding-left: 10px;
    border-left: 4px solid #bca178;
    display: block;
}
.law-text {
    margin: 0 0 14px 0;
    color: #334155;
    display: block;
    font-size: 17.5px;
}
.law-timeline-container { display: flex; gap: 15px; margin: 20px 0; }
.law-timeline-card {
    flex: 1; padding: 20px; border-radius: 8px; border: 1px solid #e2e8f0; display: block;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.03);
}
.law-timeline-card.past { background-color: #f8fafc; border-top: 4px solid #94a3b8; }
.law-timeline-card.current { background-color: #fdfcf7; border-top: 4px solid #bca178; }
.law-timeline-badge {
    display: inline-block; padding: 3px 12px; font-size: 13.5px; font-weight: 700; border-radius: 4px; margin-bottom: 10px;
}
.law-timeline-badge.past { background-color: #e2e8f0; color: #475569; }
.law-timeline-badge.current { background-color: #bca178; color: #ffffff; }
.law-summary-box {
    background-color: #fffafb; border: 1px solid #fee2e2; border-radius: 10px; padding: 25px; margin: 40px 0 0 0; display: block;
}
.law-summary-title { font-size: 20px; font-weight: 800; color: #991b1b; margin-bottom: 12px; }
.law-summary-list { margin: 0; padding-left: 20px; color: #991b1b; }
.law-summary-list li { margin-bottom: 8px; list-style-type: disc; font-size: 17px; }
.law-bold { font-weight: 700; color: #0f172a; }
.law-hl-red { color: #dc2626; font-weight: 700; }
.law-mark { background-color: #fef08a; padding: 2px 6px; font-weight: 700; border-radius: 4px; color: #0f172a; }
.law-image-box {
    width: 100%;
    max-width: 100%;
    text-align: center;
    margin: 20px auto;
    display: block;
    clear: both;
}
.law-image-box img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: inline-block;
}
.law-summary-item {
    display: block;
    position: relative;
    padding-left: 15px;
    margin-bottom: 16px;
    font-size: 17px;
    line-height: 1.8;
    color: #1e293b;
    text-align: left;
}
.law-summary-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 5px;
    height: 5px;
    background-color: #991b1b;
    border-radius: 1px;
}

/* Responsive Grid */
@media (max-width: 991px) {
    .nk-grid-board { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .nk-grid-board { grid-template-columns: repeat(1, 1fr); }
    .nk-grid-cell { height: 160px; padding: 20px; }
}


@media (max-width: 768px) {
    /* 기존 코드들... */

    /* gnb 모바일 동작은 head.php에서 처리 */
}
/* ==========================================================================
   메인 컨테이너 & 공통
   ========================================================================== */
/* ==========================================================================
   메인 컨테이너 & 공통 (게시판 검은색 현상 해결 수정본)
   ========================================================================== */
/* 1. 그누보드 전체를 감싸는 wrapper는 배경을 투명하게 해서 게시판이 원래 색(흰색)을 찾게 합니다. */
#container_wr, #wrapper { 
    max-width: 100%; 
    padding: 0; 
    margin: 0; 
    background-color: transparent; 
}

/* 2. 일반적인 레이아웃용 .wrapper도 안전하게 분리합니다. */
.wrapper {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

/* 3. 진짜 어두운 배경이 필요한 '메인 페이지'에만 정확하게 남색 배경을 꽂아줍니다. */
.nk-main-container { 
    width: 100%; 
    font-family: 'Pretendard', sans-serif; 
    background-color: #12161f; 
    color: #fff; 
    overflow: hidden; 
}

#container { padding: 0; width: 100%; }

/* ==========================================================================
   ① 메인 비주얼
   ========================================================================== */
.nk-top-visual {
    width: 100%;
    height: 800px;
    background: linear-gradient(rgba(18,22,31,0.85), rgba(18,22,31,0.98)),
                url('/img/topvisual.jpg') no-repeat center center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
}
.nk-visual-title {
    font-size: 42px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.45;
    letter-spacing: -1px;
    margin-bottom: 20px;
}
.nk-visual-subtitle {
    font-size: 17px;
    color: #94a3b8;
    font-weight: 300;
}

/* ==========================================================================
   ② 8단 그리드 섹션  (nk-section-box 에서 nk-grid-section 으로 분리)
   ========================================================================== */
.nk-grid-section {
    width: 100%;
    background: linear-gradient(rgba(10,14,23,0.93), rgba(10,14,23,0.93)),
                url('https://images.unsplash.com/photo-1589829545856-d10d557cf95f?q=80&w=1920') no-repeat center center;
    background-size: cover;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}
.nk-grid-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* 공통 섹션 타이틀 (그리드·유튜브 공용) */
.nk-tag-blue  { font-size: 12px; letter-spacing: 2px; color: #3b82f6; font-weight: 600; display: block; margin-bottom: 12px; position: relative; z-index: 2; }
.nk-section-title { font-size: 32px; font-weight: 700; color: #fff; margin: 0 0 15px; letter-spacing: -1px; position: relative; z-index: 2; }
.nk-section-desc  { font-size: 15px; color: #7a8b9e; margin: 0 0 50px; position: relative; z-index: 2; }

/* 그리드 보드 */
.nk-grid-board { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background-color: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.06); margin-top: 20px; }
.nk-grid-cell  { background: rgba(16,21,31,0.65); height: 200px; padding: 30px 25px; box-sizing: border-box; text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; transition: all 0.35s cubic-bezier(0.25,0.8,0.25,1); }
.nk-grid-cell:hover { background: #0b0f19; transform: translateY(-4px); z-index: 10; box-shadow: 0 15px 35px rgba(0,0,0,0.7); }
.nk-grid-cell h3   { font-size: 19px; font-weight: 700; color: #fff; margin: 0; letter-spacing: -0.5px; text-align: left; }
.nk-grid-cell .en-sub { font-size: 11px; color: #51627c; font-style: italic; display: block; font-family: 'Georgia', serif; margin-top: 4px; text-align: left; transition: color 0.3s; }
.nk-grid-cell:hover .en-sub { color: #8e9fb5; }
.nk-arrow-circle { width: 26px; height: 26px; border: 1px solid rgba(255,255,255,0.18); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.3); font-size: 11px; transition: all 0.3s; margin-left: auto; }
.nk-grid-cell:hover .nk-arrow-circle { background-color: #bca178; border-color: #bca178; color: #fff; }

/* ==========================================================================
   ③ 유튜브 섹션
   ========================================================================== */
.nk-youtube-bg-wrap { background-color: #161b26; border-top: 1px solid rgba(255,255,255,0.03); width: 100%; padding: 70px 0; text-align: center; }
.nk-youtube-header { margin-bottom: 30px; }
.nk-youtube-header .nk-section-title { margin-bottom: 8px; }

.video-main-card { display: block; position: relative; width: 100%; max-width: 600px; margin: 0 auto 25px; padding-bottom: 20%; max-height: none; height: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 45px rgba(0,0,0,0.6); background-color: #000; }
.video-main-card img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.video-main-card:hover img { transform: scale(1.02); }

@media (max-width: 768px) {
    .video-main-card {
        max-width: 100%;
        padding-bottom: 56.25%;
    }
}

.video-slider-outer { position: relative; width: 100%; margin-bottom: 25px; }
.video-sub-slider { display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: 5px 50px; }
.video-sub-slider::-webkit-scrollbar { display: none; }
.video-sub-item { flex: 0 0 calc(20% - 11px); min-width: 250px; display: flex; flex-direction: column; text-align: left; }
.video-img-link { display: block; position: relative; width: 100%; padding-bottom: 56.25%; height: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 8px 16px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.05); background-color: #000; margin-bottom: 8px; }
.video-img-link img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.video-img-link:hover img { transform: scale(1.04); }
.video-meta-tag { display: inline-block; padding: 3px 8px; font-size: 11px; font-weight: 600; color: #a1b0cb; background-color: rgba(255,255,255,0.05); border-radius: 4px; transition: all 0.2s; }
.video-sub-item:hover .video-meta-tag { background-color: #3b82f6; color: #fff; }

.slider-arrow { position: absolute; top: calc(50% - 10px); transform: translateY(-50%); width: 38px; height: 38px; background: #fff; border: none; border-radius: 50%; color: #12161f; font-size: 12px; font-weight: bold; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: all 0.2s; box-shadow: 0 4px 10px rgba(0,0,0,0.4); }
.slider-arrow:hover { background: #bca178; color: #fff; transform: translateY(-50%) scale(1.05); }
.slider-arrow.prev-btn { left: 15px; }
.slider-arrow.next-btn { right: 15px; }

.nk-view-all-box { display: flex; justify-content: center; margin-top: 5px; }
.nk-btn-view-all { display: inline-flex; align-items: center; justify-content: center; padding: 10px 35px; font-size: 13px; font-weight: 600; color: #fff; background-color: transparent; border: 1px solid rgba(255,255,255,0.15); border-radius: 30px; text-decoration: none; transition: all 0.3s; }
.nk-btn-view-all:hover { background-color: #fff; color: #12161f; border-color: #fff; }

/* ==========================================================================
   ④ 3C POINT
   ========================================================================== */
.nk-3c-section { width: 100%; background-color: #12161f; padding: 120px 0; font-family: 'Pretendard', sans-serif; }
.nk-3c-container { max-width: 1400px; margin: 0 auto; display: flex; align-items: stretch; padding: 0 40px; }
.nk-3c-title-box { flex: 0 0 25%; text-align: left; display: flex; flex-direction: column; justify-content: center; }
.nk-3c-tag   { font-size: 13px; font-weight: 700; color: #3b82f6; letter-spacing: 1.5px; display: block; margin-bottom: 12px; }
.nk-3c-title { font-size: 42px; font-weight: 800; color: #fff; line-height: 1.35; letter-spacing: -1px; }
.nk-3c-card-box { flex: 0 0 75%; display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
.nk-3c-card  { background-color: transparent; padding: 60px 40px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; transition: background-color 0.3s; text-decoration: none; }
.nk-3c-card:hover { background-color: #1a2a47; }
.nk-3c-img-wrap { width: 100%; max-width: 260px; padding-bottom: 100%; position: relative; margin-bottom: 40px; overflow: hidden; }
.nk-3c-img-wrap img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.nk-3c-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.75); display: flex; align-items: center; justify-content: center; padding: 25px; box-sizing: border-box; opacity: 0; transition: opacity 0.3s; z-index: 2; }
.nk-3c-card:hover .nk-3c-overlay { opacity: 1; }
.nk-3c-overlay-text { color: #fff; font-size: 14px; line-height: 1.6; text-align: left; word-break: keep-all; font-weight: 500; }
.nk-3c-info-wrap { width: 100%; max-width: 260px; text-align: left; }
.nk-3c-eng { font-size: 13px; color: #64748b; margin-bottom: 8px; font-weight: 500; }
.nk-3c-ko  { font-size: 20px; font-weight: 700; color: #fff; line-height: 1.3; }

/* ==========================================================================
   ⑤ 구성원
   ========================================================================== */
.nk-people-section { width: 100%; background-color: #0b0d12; padding: 120px 0; font-family: 'Pretendard', sans-serif; }
.nk-people-container { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
.nk-people-header { text-align: center; margin-bottom: 80px; }
.nk-people-tag { font-size: 13px; font-weight: 700; color: #3b82f6; letter-spacing: 2px; display: block; margin-bottom: 12px; }
.nk-people-main-title { font-size: 42px; font-weight: 800; color: #fff; letter-spacing: -1px; }
.nk-people-sub-title  { font-size: 15px; color: #64748b; margin-top: 15px; }

.nk-people-grid { display: grid; gap: 20px; margin-bottom: 60px; }
.nk-grid-2 { grid-template-columns: repeat(2,1fr); max-width: 900px; margin: 0 auto 80px; }

.nk-people-card { background-color: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); padding: 50px 30px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; transition: all 0.3s; text-decoration: none; box-sizing: border-box; }
.nk-people-card:hover { background-color: #1a2a47; border-color: #3b82f6; transform: translateY(-5px); }
.nk-people-img-wrap { width: 100%; aspect-ratio: 3/4; position: relative; margin-bottom: 35px; overflow: hidden; background-color: #12161f; }
.nk-people-img-wrap img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.nk-people-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(11,13,18,0.85); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 30px 20px; box-sizing: border-box; opacity: 0; transition: opacity 0.3s; z-index: 2; }
.nk-people-card:hover .nk-people-overlay { opacity: 1; }
.nk-people-overlay-title { color: #3b82f6; font-size: 15px; font-weight: 700; margin-bottom: 15px; }
.nk-people-overlay-text  { color: #fff; font-size: 13px; line-height: 1.6; text-align: left; word-break: keep-all; }
.nk-people-info { width: 100%; text-align: center; }
.nk-people-name { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.nk-people-name span { font-size: 14px; font-weight: 500; color: #94a3b8; margin-left: 6px; }
.nk-people-dept { font-size: 13px; color: #3b82f6; font-weight: 500; }

/* 구성원 슬라이더 */
.nk-member-slider-outer { position: relative; width: 100%; }
.nk-slider-arrow { position: absolute; top: 35%; transform: translateY(-50%); width: 40px; height: 40px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; color: #fff; font-size: 14px; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.nk-slider-arrow:hover { background: #bca178; border-color: #bca178; }
.nk-prev { left: -20px; }
.nk-next { right: -20px; }
.nk-member-slider { display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: 10px 0 20px; }
.nk-member-slider::-webkit-scrollbar { display: none; }
.nk-member-item { flex: 0 0 calc(25% - 15px); min-width: 220px; display: flex; flex-direction: column; }
.nk-member-img { position: relative; width: 100%; aspect-ratio: 3/4; overflow: hidden; background-color: #12161f; margin-bottom: 15px; }
.nk-member-img img { width: 100%; height: 100%; object-fit: cover; }
.nk-member-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(11,13,18,0.85); display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; opacity: 0; transition: opacity 0.3s; }
.nk-member-item:hover .nk-member-overlay { opacity: 1; }
.nk-member-overlay p { color: #fff; font-size: 13px; line-height: 1.6; text-align: center; word-break: keep-all; }
.nk-member-info { text-align: center; }
.nk-member-name { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.nk-member-name span { font-size: 13px; font-weight: 400; color: #94a3b8; margin-left: 4px; }
.nk-member-dept { font-size: 12px; color: #3b82f6; font-weight: 500; }

/* ==========================================================================
   반응형
   ========================================================================== */
@media (max-width: 1200px) {
    .nk-3c-container { flex-direction: column; padding: 0 20px; gap: 60px; }
    .nk-3c-title-box { flex: 0 0 100%; text-align: center; }
    .nk-3c-card-box { flex: 0 0 100%; }
    .nk-member-item { flex: 0 0 calc(33.333% - 14px); }
}
@media (max-width: 991px) {
    .nk-grid-board { grid-template-columns: rep