/* ============================================================
   Ncafe - ncafe.css  v2.0
   네이버 카페 스타일
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&display=swap');

/* ── CSS 변수 ── */
:root {
    --nc-green:       #03c75a;
    --nc-green-dk:    #00b351;
    --nc-green-bg:    #f0fdf6;
    --nc-green-light: #e6f9ee;

    --nc-text:        #191919;
    --nc-text-2:      #444;
    --nc-text-3:      #767676;
    --nc-text-4:      #999;

    --nc-line:        #e5e5e5;
    --nc-line-2:      #f0f0f0;
    --nc-bg:          #f9f9f9;
    --nc-bg-2:        #f4f4f4;
    --nc-white:       #fff;

    --nc-red:         #ff3c3c;
    --nc-blue:        #1a73e8;
    --nc-star:        #ffb100;

    --nc-r:           4px;
    --nc-r-lg:        8px;
    --nc-shadow:      0 1px 3px rgba(0,0,0,.08);
    --nc-shadow-md:   0 2px 10px rgba(0,0,0,.10);

    --nc-sidebar:     176px;
    --nc-max:         1100px;
    --nc-font:        'Noto Sans KR', -apple-system, 'Malgun Gothic', sans-serif;
}

/* ── 전역 리셋 ── */
#ncafe-wrap, #ncafe-wrap *, #ncafe-admin-wrap, #ncafe-admin-wrap * { box-sizing: border-box; }
#ncafe-wrap, #ncafe-admin-wrap {
    font-family: var(--nc-font);
    font-size: 13px;
    color: var(--nc-text);
    line-height: 1.5;
    background: var(--nc-bg);
    word-break: keep-all;
}
#ncafe-wrap a, #ncafe-admin-wrap a { color: inherit; text-decoration: none; }
#ncafe-wrap img { max-width: 100%; display: block; }
#ncafe-wrap ul, #ncafe-wrap ol,
#ncafe-admin-wrap ul, #ncafe-admin-wrap ol { list-style: none; margin: 0; padding: 0; }
#ncafe-wrap h1, #ncafe-wrap h2, #ncafe-wrap h3,
#ncafe-admin-wrap h1, #ncafe-admin-wrap h2, #ncafe-admin-wrap h3 { margin: 0; font-weight: 700; }
#ncafe-wrap p { margin: 0; }


/* ============================================================
   ① 카페 홈 헤더
   ============================================================ */

#ncafe-header {
    background: var(--nc-white);
    border-bottom: 1px solid var(--nc-line);
    margin-bottom: 0;
}

/* 커버 */
#ncafe-cover {
    height: 160px;
    background: linear-gradient(135deg, #00c853 0%, #64dd17 100%);
    background-size: cover;
    background-position: center;
}

/* 정보 바 */
#ncafe-info-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: var(--nc-max);
    margin: 0 auto;
    padding: 0 20px 14px;
}

/* 카페 로고 */
#ncafe-cafe-image {
    flex-shrink: 0;
    width: 68px;
    height: 68px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--nc-white);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    background: var(--nc-green-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -24px;
    position: relative;
    z-index: 1;
}
#ncafe-cafe-image img { width: 100%; height: 100%; object-fit: cover; }
.ncafe-no-image {
    font-size: 26px;
    font-weight: 700;
    color: var(--nc-green-dk);
    line-height: 1;
}

/* 카페 메타 */
#ncafe-cafe-meta { flex: 1; padding-top: 6px; }
#ncafe-cafe-name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.3px;
    margin-bottom: 3px;
    color: var(--nc-text);
}
#ncafe-cafe-desc {
    font-size: 12px;
    color: var(--nc-text-3);
    margin-bottom: 6px;
    line-height: 1.4;
}
#ncafe-cafe-stats {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--nc-text-3);
}
#ncafe-cafe-stats span { display: flex; align-items: center; gap: 3px; }
#ncafe-cafe-stats span strong { color: var(--nc-text-2); font-weight: 600; }

/* 액션 버튼 영역 */
#ncafe-cafe-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding-top: 6px;
}

/* 등급 뱃지 */
.ncafe-my-grade {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 14px;
    background: var(--nc-green-light);
    color: var(--nc-green-dk);
    font-size: 12px;
    font-weight: 600;
}
.ncafe-grade-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--nc-bg-2);
    color: var(--nc-text-3);
    font-size: 11px;
    font-weight: 500;
}
.ncafe-grade-badge.owner {
    background: #fff3e0;
    color: #e65100;
}


/* ============================================================
   ② 버튼 공통
   ============================================================ */

.btn-ncafe-join,
.btn-ncafe-leave,
.btn-ncafe-fav,
.btn-ncafe-admin,
.btn-ncafe-create,
.btn-ncafe-submit,
.btn-ncafe-cancel,
.btn-ncafe-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 14px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .15s;
    white-space: nowrap;
    font-family: var(--nc-font);
    letter-spacing: -.2px;
}

/* 초록 - 가입/제출 */
.btn-ncafe-join,
.btn-ncafe-submit {
    background: var(--nc-green);
    color: #fff;
    border-color: var(--nc-green);
}
.btn-ncafe-join:hover,
.btn-ncafe-submit:hover {
    background: var(--nc-green-dk);
    border-color: var(--nc-green-dk);
    color: #fff;
}

/* 아웃라인 - 즐겨찾기 */
.btn-ncafe-fav {
    background: var(--nc-white);
    color: var(--nc-text-2);
    border-color: var(--nc-line);
}
.btn-ncafe-fav:hover { background: var(--nc-bg-2); }
.btn-ncafe-fav.active {
    background: #fffbf0;
    color: var(--nc-star);
    border-color: #ffd740;
}

/* 아웃라인 - 관리/만들기 */
.btn-ncafe-admin,
.btn-ncafe-create {
    background: var(--nc-white);
    color: var(--nc-text-2);
    border-color: var(--nc-line);
}
.btn-ncafe-admin:hover,
.btn-ncafe-create:hover { background: var(--nc-bg-2); }

/* 취소/탈퇴 */
.btn-ncafe-leave,
.btn-ncafe-cancel {
    background: var(--nc-white);
    color: var(--nc-text-3);
    border-color: var(--nc-line);
}
.btn-ncafe-leave:hover,
.btn-ncafe-cancel:hover { background: var(--nc-bg-2); }

/* 위험 */
.btn-ncafe-danger {
    background: var(--nc-red);
    color: #fff;
    border-color: var(--nc-red);
    border-radius: var(--nc-r);
}
.btn-ncafe-danger:hover { opacity: .88; color: #fff; }


/* ============================================================
   ③ 카페 바디 레이아웃
   ============================================================ */

#ncafe-body {
    display: flex;
    max-width: var(--nc-max);
    margin: 0 auto;
    padding: 16px 20px 40px;
    gap: 16px;
    align-items: flex-start;
}

/* ── 사이드바 ── */
#ncafe-sidebar {
    width: var(--nc-sidebar);
    flex-shrink: 0;
    position: sticky;
    top: 12px;
}

/* 카페 메뉴 네비 */
#ncafe-menu {
    background: var(--nc-white);
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r-lg);
    overflow: hidden;
    margin-bottom: 10px;
}

/* 메뉴 최상위 항목 */
#ncafe-menu > ul > li > a,
#ncafe-menu > ul > li > span {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 14px;
    font-size: 13px;
    color: var(--nc-text-2);
    transition: background .1s;
    cursor: pointer;
    border-bottom: 1px solid var(--nc-line-2);
    gap: 6px;
}
#ncafe-menu > ul > li:last-child > a { border-bottom: none; }
#ncafe-menu > ul > li > a:hover { background: var(--nc-bg); color: var(--nc-text); }

/* 활성 메뉴 */
#ncafe-menu > ul > li.active > a,
#ncafe-menu > ul > li.ncafe-menu-all.active > a,
#ncafe-menu > ul > li.ncafe-menu-board.active > a,
#ncafe-menu > ul > li.ncafe-menu-notice.active > a {
    background: var(--nc-green-light);
    color: var(--nc-green-dk);
    font-weight: 700;
    border-left: 3px solid var(--nc-green);
    padding-left: 11px;
}

/* 폴더 그룹 헤더 */
.ncafe-menu-folder > span {
    height: 30px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--nc-text-4) !important;
    text-transform: uppercase;
    letter-spacing: .6px;
    background: var(--nc-bg-2) !important;
    cursor: default !important;
}
.ncafe-menu-folder ul li a {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 14px 0 26px;
    font-size: 12px;
    color: var(--nc-text-2);
    border-bottom: 1px solid var(--nc-line-2);
    transition: background .1s;
}
.ncafe-menu-folder ul li a:hover { background: var(--nc-bg); color: var(--nc-text); }
.ncafe-menu-folder ul li:last-child a { border-bottom: none; }

/* 운영진 박스 */
#ncafe-managers {
    background: var(--nc-white);
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r-lg);
    padding: 12px 14px;
}
#ncafe-managers h3 {
    font-size: 11px;
    color: var(--nc-text-4);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--nc-line-2);
}
#ncafe-managers ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 12px;
    gap: 6px;
}
#ncafe-managers ul li a:hover { color: var(--nc-green-dk); }

/* ── 메인 컨텐츠 ── */
#ncafe-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

/* 공통 카드 */
.ncafe-card {
    background: var(--nc-white);
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r-lg);
    overflow: hidden;
}
.ncafe-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--nc-line-2);
}
.ncafe-card-header h2 {
    font-size: 13px;
    font-weight: 700;
    color: var(--nc-text);
}
.ncafe-card-more {
    font-size: 12px;
    color: var(--nc-text-3);
}
.ncafe-card-more:hover { color: var(--nc-green-dk); }

/* 공지사항 카드 */
#ncafe-notices { background: var(--nc-white); border: 1px solid var(--nc-line); border-radius: var(--nc-r-lg); overflow: hidden; }
#ncafe-notices h2 {
    font-size: 13px;
    font-weight: 700;
    padding: 12px 16px;
    border-bottom: 1px solid var(--nc-line-2);
}
#ncafe-notices ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 16px;
    border-bottom: 1px solid var(--nc-line-2);
    gap: 10px;
}
#ncafe-notices ul li:last-child { border-bottom: none; }
#ncafe-notices ul li::before {
    content: '공지';
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    color: var(--nc-green-dk);
    background: var(--nc-green-light);
    padding: 1px 5px;
    border-radius: 3px;
}
#ncafe-notices ul li a {
    flex: 1;
    font-size: 13px;
    color: var(--nc-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#ncafe-notices ul li a:hover { color: var(--nc-green-dk); }
#ncafe-notices .ncafe-date {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--nc-text-4);
}

/* 최신글 카드 */
#ncafe-recent-articles {
    background: var(--nc-white);
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r-lg);
    overflow: hidden;
}
#ncafe-recent-articles h2 {
    font-size: 13px;
    font-weight: 700;
    padding: 12px 16px;
    border-bottom: 1px solid var(--nc-line-2);
}


/* ============================================================
   ④ 게시글 테이블 (공통)
   ============================================================ */

.ncafe-article-list {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;
}
.ncafe-article-list thead th {
    padding: 8px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--nc-text-3);
    background: var(--nc-bg);
    border-bottom: 1px solid var(--nc-line);
    white-space: nowrap;
}
.ncafe-article-list tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--nc-line-2);
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ncafe-article-list tbody tr:last-child td { border-bottom: none; }
.ncafe-article-list tbody tr:hover td { background: var(--nc-bg); }
.ncafe-article-list .col-subject { white-space: normal; }
.ncafe-article-list .col-subject a {
    color: var(--nc-text);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ncafe-article-list .col-subject a:hover { color: var(--nc-green-dk); }

/* 컬럼 너비 */
.col-menu   { width: 80px; }
.col-author { width: 72px; }
.col-date   { width: 52px; text-align: center !important; }
.col-hit    { width: 44px; text-align: right !important; }
.col-like   { width: 44px; text-align: right !important; }
.col-author, .col-date, .col-hit, .col-like { color: var(--nc-text-3); font-size: 12px; }

/* 게시판 이름 태그 */
.ncafe-board-name {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--nc-green-light);
    color: var(--nc-green-dk);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    max-width: 76px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* 댓글 수 */
.ncafe-comment-count {
    color: var(--nc-green);
    font-size: 12px;
    font-weight: 600;
    margin-left: 2px;
}

/* 더보기 */
.ncafe-more {
    text-align: center;
    padding: 10px;
    border-top: 1px solid var(--nc-line-2);
}
.ncafe-more a {
    font-size: 12px;
    color: var(--nc-text-3);
}
.ncafe-more a:hover { color: var(--nc-green-dk); }

/* 빈 상태 */
.ncafe-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--nc-text-3);
    font-size: 13px;
}


/* ============================================================
   ⑤ 카페 목록 페이지
   ============================================================ */

#ncafe-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--nc-max);
    margin: 0 auto;
    padding: 20px 20px 0;
}
#ncafe-list-header h1 {
    font-size: 20px;
    font-weight: 800;
    color: var(--nc-green);
    letter-spacing: -1px;
}

/* 내 즐겨찾기 */
#ncafe-my-favorites {
    max-width: var(--nc-max);
    margin: 16px auto 0;
    padding: 0 20px;
}
#ncafe-my-favorites h2 {
    font-size: 13px;
    font-weight: 700;
    color: var(--nc-text-2);
    margin-bottom: 10px;
}
#ncafe-my-favorites .ncafe-cafe-grid {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
}
#ncafe-my-favorites .ncafe-cafe-grid li { flex-shrink: 0; }
#ncafe-my-favorites .ncafe-cafe-grid li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 12px;
    background: var(--nc-white);
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r-lg);
    width: 88px;
    transition: box-shadow .15s;
}
#ncafe-my-favorites .ncafe-cafe-grid li a:hover { box-shadow: var(--nc-shadow-md); }
#ncafe-my-favorites .ncafe-cafe-thumb {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--nc-green-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--nc-green-dk);
}
#ncafe-my-favorites .ncafe-cafe-thumb img { width: 100%; height: 100%; object-fit: cover; }
#ncafe-my-favorites .ncafe-cafe-title {
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    color: var(--nc-text);
    word-break: break-all;
    line-height: 1.3;
}
#ncafe-my-favorites .ncafe-cafe-member {
    font-size: 10px;
    color: var(--nc-text-3);
}

/* 검색 바 */
#ncafe-search-bar {
    max-width: var(--nc-max);
    margin: 14px auto 0;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--nc-white);
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r-lg);
    padding: 12px 16px;
}
#ncafe-search-bar form {
    display: flex;
    gap: 6px;
    align-items: center;
}
#ncafe-search-bar select,
#ncafe-search-bar input[type="text"] {
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r);
    font-size: 13px;
    background: var(--nc-white);
    color: var(--nc-text);
    outline: none;
    font-family: var(--nc-font);
    transition: border-color .15s;
}
#ncafe-search-bar select:focus,
#ncafe-search-bar input[type="text"]:focus { border-color: var(--nc-green); }
#ncafe-search-bar input[type="text"] { width: 200px; }
#ncafe-search-bar button {
    height: 34px;
    padding: 0 16px;
    background: var(--nc-green);
    color: #fff;
    border: none;
    border-radius: var(--nc-r);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--nc-font);
    transition: background .15s;
}
#ncafe-search-bar button:hover { background: var(--nc-green-dk); }

/* 정렬 탭 */
#ncafe-sort-tabs {
    display: flex;
    gap: 2px;
}
#ncafe-sort-tabs a {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 15px;
    color: var(--nc-text-3);
    transition: all .15s;
}
#ncafe-sort-tabs a:hover { background: var(--nc-bg-2); color: var(--nc-text); }
#ncafe-sort-tabs a.active {
    background: var(--nc-green-light);
    color: var(--nc-green-dk);
    font-weight: 700;
}

/* 카페 그리드 */
#ncafe-cafe-list {
    max-width: var(--nc-max);
    margin: 14px auto 0;
    padding: 0 20px 40px;
}
.ncafe-cafe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}
.ncafe-cafe-item {
    background: var(--nc-white);
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r-lg);
    overflow: hidden;
    transition: box-shadow .15s, transform .15s;
}
.ncafe-cafe-item:hover {
    box-shadow: var(--nc-shadow-md);
    transform: translateY(-2px);
}
.ncafe-cafe-item > a { display: block; padding: 16px; }

/* 카페 목록 썸네일 */
.ncafe-cafe-thumb {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--nc-green-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--nc-green-dk);
    margin-bottom: 10px;
}
.ncafe-cafe-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ncafe-cafe-info { display: flex; flex-direction: column; gap: 3px; }
.ncafe-cafe-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--nc-text);
    display: block;
    letter-spacing: -.2px;
}
.ncafe-cafe-category {
    font-size: 11px;
    color: var(--nc-green-dk);
    font-weight: 600;
}
.ncafe-cafe-desc {
    font-size: 12px;
    color: var(--nc-text-3);
    line-height: 1.5;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ncafe-cafe-stats {
    display: flex;
    gap: 8px;
    font-size: 11px;
    color: var(--nc-text-4);
    margin-top: 6px;
}


/* ============================================================
   ⑥ 페이지네이션
   ============================================================ */

#ncafe-pagination {
    text-align: center;
    padding: 20px 0 4px;
}
#ncafe-pagination a,
#ncafe-pagination strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    margin: 0 1px;
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r);
    font-size: 12px;
    color: var(--nc-text-2);
    background: var(--nc-white);
    transition: all .15s;
}
#ncafe-pagination a:hover { background: var(--nc-bg-2); border-color: #ccc; }
#ncafe-pagination strong {
    background: var(--nc-green);
    color: #fff;
    border-color: var(--nc-green);
    font-weight: 700;
}


/* ============================================================
   ⑦ 폼 공통
   ============================================================ */

.ncafe-form-row { margin-bottom: 16px; }
.ncafe-form-row label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--nc-text-2);
}
.ncafe-form-row input[type="text"],
.ncafe-form-row input[type="number"],
.ncafe-form-row select,
.ncafe-form-row textarea {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r);
    font-size: 13px;
    color: var(--nc-text);
    background: var(--nc-white);
    outline: none;
    font-family: var(--nc-font);
    transition: border-color .15s, box-shadow .15s;
}
.ncafe-form-row textarea {
    height: auto;
    padding: 10px 12px;
    resize: vertical;
    min-height: 90px;
    line-height: 1.6;
}
.ncafe-form-row input[type="file"] {
    width: 100%;
    padding: 8px 0;
    font-size: 13px;
    color: var(--nc-text-2);
}
.ncafe-form-row input:focus,
.ncafe-form-row select:focus,
.ncafe-form-row textarea:focus {
    border-color: var(--nc-green);
    box-shadow: 0 0 0 3px rgba(3,199,90,.1);
}
.ncafe-form-row small {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--nc-text-4);
}
.ncafe-form-row input[type="radio"] {
    width: auto;
    height: auto;
    margin-right: 4px;
    vertical-align: middle;
}
.ncafe-form-row label + label {
    margin-left: 14px;
    font-weight: 400;
    display: inline;
}
.required { color: var(--nc-red); }

.ncafe-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--nc-line);
}
/* form actions 내 버튼은 더 크게 */
.ncafe-form-actions .btn-ncafe-submit,
.ncafe-form-actions .btn-ncafe-cancel,
.ncafe-form-actions .btn-ncafe-danger {
    height: 38px;
    padding: 0 20px;
    border-radius: var(--nc-r);
    font-size: 13px;
}

/* URL 입력 */
.ncafe-url-input {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ncafe-url-input span { font-size: 12px; color: var(--nc-text-3); white-space: nowrap; }
.ncafe-url-input input { flex: 1; }
.ncafe-url-input button {
    flex-shrink: 0;
    height: 38px;
    padding: 0 12px;
    background: var(--nc-bg-2);
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--nc-font);
    transition: background .15s;
    color: var(--nc-text-2);
}
.ncafe-url-input button:hover { background: var(--nc-line); }

/* 에러 */
.ncafe-errors {
    background: #fff5f5;
    border: 1px solid #ffd0d0;
    border-radius: var(--nc-r);
    padding: 10px 14px;
    margin-bottom: 16px;
}
.ncafe-error {
    font-size: 13px;
    color: var(--nc-red);
    margin: 0 0 4px;
}
.ncafe-error:last-child { margin-bottom: 0; }


/* ============================================================
   ⑧ 카페 만들기 / 가입 / 탈퇴 페이지
   ============================================================ */

#ncafe-create-form,
#ncafe-join-form,
#ncafe-leave-confirm {
    max-width: 600px;
    margin: 24px auto;
    padding: 0 20px 40px;
}
#ncafe-create-form h1,
#ncafe-join-form h1,
#ncafe-leave-confirm h1 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--nc-green);
    letter-spacing: -.5px;
}
#ncafe-create-form fieldset {
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r-lg);
    padding: 16px 20px 8px;
    margin-bottom: 16px;
}
#ncafe-create-form legend {
    font-size: 12px;
    font-weight: 700;
    color: var(--nc-text-3);
    padding: 0 8px;
}

/* 카페 미리보기 */
.ncafe-cafe-preview {
    background: var(--nc-bg);
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r-lg);
    padding: 14px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--nc-text-2);
    line-height: 1.8;
}
.ncafe-cafe-preview strong { color: var(--nc-text); }

#ncafe-leave-confirm p { font-size: 14px; color: var(--nc-text-2); line-height: 1.8; margin-bottom: 16px; }


/* ============================================================
   ⑨ 페이지 헤더 (브레드크럼)
   ============================================================ */

#ncafe-page-header {
    max-width: var(--nc-max);
    margin: 0 auto;
    padding: 14px 20px 0;
    font-size: 12px;
    color: var(--nc-text-3);
    display: flex;
    align-items: center;
    gap: 6px;
}
#ncafe-page-header::before { content: ''; }
#ncafe-page-header a { color: var(--nc-green-dk); font-weight: 600; }
#ncafe-page-header a:hover { text-decoration: underline; }


/* ============================================================
   ⑩ 공지사항 보기
   ============================================================ */

.ncafe-notice-view {
    background: var(--nc-white);
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r-lg);
    padding: 0 24px 24px;
}
.ncafe-notice-view h1 {
    font-size: 18px;
    padding: 18px 0 14px;
    border-bottom: 1px solid var(--nc-line);
    margin-bottom: 10px;
    letter-spacing: -.3px;
}
.ncafe-notice-meta {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: var(--nc-text-3);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--nc-line-2);
    margin-bottom: 20px;
}
.ncafe-notice-content {
    font-size: 14px;
    line-height: 1.9;
    color: var(--nc-text);
    padding-bottom: 24px;
    border-bottom: 1px solid var(--nc-line);
    margin-bottom: 14px;
    white-space: pre-wrap;
    word-break: break-all;
}
.ncafe-notice-actions a {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    font-size: 12px;
    color: var(--nc-text-3);
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r);
    transition: all .15s;
}
.ncafe-notice-actions a:hover { background: var(--nc-bg-2); color: var(--nc-text); }


/* ============================================================
   ⑪ 관리자 페이지
   ============================================================ */

#ncafe-admin-wrap {
    max-width: var(--nc-max);
    margin: 0 auto;
    padding: 20px 20px 50px;
}

#ncafe-admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--nc-green);
}
#ncafe-admin-header h1 {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.5px;
}
#ncafe-admin-header a { font-size: 12px; color: var(--nc-text-3); }
#ncafe-admin-header a:hover { color: var(--nc-green-dk); }

/* 관리 탭 */
#ncafe-admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 0;
    border-bottom: 2px solid var(--nc-green);
}
#ncafe-admin-nav a {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--nc-text-3);
    border-radius: var(--nc-r) var(--nc-r) 0 0;
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -2px;
    transition: all .15s;
}
#ncafe-admin-nav a:hover { color: var(--nc-text); background: var(--nc-bg-2); }
#ncafe-admin-nav a.active {
    color: var(--nc-green-dk);
    background: var(--nc-white);
    border-color: var(--nc-line);
    border-bottom-color: var(--nc-white);
    font-weight: 700;
}

/* 관리 컨텐츠 */
#ncafe-admin-content {
    background: var(--nc-white);
    border: 1px solid var(--nc-line);
    border-top: none;
    border-radius: 0 0 var(--nc-r-lg) var(--nc-r-lg);
    padding: 20px 24px;
}
#ncafe-admin-content h2 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--nc-line);
}
#ncafe-admin-content h3 {
    font-size: 13px;
    font-weight: 700;
    margin: 16px 0 10px;
    color: var(--nc-text-2);
}

/* 통계 카드 */
.ncafe-admin-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.stat-box {
    background: var(--nc-bg);
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r-lg);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stat-label { font-size: 11px; color: var(--nc-text-3); font-weight: 600; }
.stat-value { font-size: 22px; font-weight: 800; color: var(--nc-green-dk); letter-spacing: -1px; }

/* 알림 */
.ncafe-admin-alert {
    background: #fffde7;
    border: 1px solid #ffe57f;
    border-radius: var(--nc-r);
    padding: 10px 14px;
    font-size: 13px;
    color: #5d4037;
    margin-bottom: 16px;
}
.ncafe-admin-alert a {
    color: var(--nc-green-dk);
    font-weight: 700;
    margin-left: 8px;
    text-decoration: underline;
}

/* 관리 테이블 */
.ncafe-admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 12px;
}
.ncafe-admin-table th {
    padding: 9px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--nc-text-2);
    background: var(--nc-bg);
    border: 1px solid var(--nc-line);
    white-space: nowrap;
    width: 120px;
    font-size: 13px;
}
.ncafe-admin-table td {
    padding: 9px 12px;
    border: 1px solid var(--nc-line);
    vertical-align: middle;
    color: var(--nc-text);
}
.ncafe-admin-table thead th {
    width: auto;
    background: var(--nc-bg-2);
    font-size: 12px;
    color: var(--nc-text-3);
}
.ncafe-admin-table tbody tr:hover td { background: var(--nc-bg); }
.ncafe-admin-table input[type="text"],
.ncafe-admin-table input[type="number"],
.ncafe-admin-table select,
.ncafe-admin-table textarea {
    padding: 6px 10px;
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r);
    font-size: 13px;
    outline: none;
    font-family: var(--nc-font);
    transition: border-color .15s;
    background: var(--nc-white);
}
.ncafe-admin-table input:focus,
.ncafe-admin-table select:focus,
.ncafe-admin-table textarea:focus { border-color: var(--nc-green); }
.ncafe-admin-table button {
    padding: 5px 11px;
    border-radius: var(--nc-r);
    border: 1px solid var(--nc-line);
    background: var(--nc-bg);
    font-size: 12px;
    cursor: pointer;
    font-family: var(--nc-font);
    color: var(--nc-text-2);
    transition: background .15s;
}
.ncafe-admin-table button:hover { background: var(--nc-line); }

/* 관리 검색 */
.ncafe-admin-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}
.ncafe-admin-search form { display: flex; gap: 6px; }
.ncafe-admin-search input[type="text"] {
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r);
    font-size: 13px;
    outline: none;
    width: 200px;
    font-family: var(--nc-font);
}
.ncafe-admin-search input:focus { border-color: var(--nc-green); }
.ncafe-admin-search button {
    height: 34px;
    padding: 0 14px;
    background: var(--nc-green);
    color: #fff;
    border: none;
    border-radius: var(--nc-r);
    font-size: 13px;
    cursor: pointer;
    font-family: var(--nc-font);
    transition: background .15s;
}
.ncafe-admin-search button:hover { background: var(--nc-green-dk); }
.ncafe-admin-search p { font-size: 13px; color: var(--nc-text-3); margin: 0; }

/* 관리 섹션 박스 */
.ncafe-admin-section {
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r-lg);
    padding: 14px 18px;
    margin-top: 20px;
    background: var(--nc-bg);
}
.ncafe-admin-section h3 { margin-top: 0; }

/* 일괄 처리 */
.ncafe-admin-bulk-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.ncafe-admin-bulk-actions button {
    height: 32px;
    padding: 0 14px;
    background: var(--nc-green);
    color: #fff;
    border: none;
    border-radius: var(--nc-r);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--nc-font);
    transition: background .15s;
}
.ncafe-admin-bulk-actions button:hover { background: var(--nc-green-dk); }
.ncafe-admin-bulk-actions span { font-size: 12px; color: var(--nc-text-3); }

/* 위험 구역 */
.ncafe-admin-danger-zone {
    margin-top: 24px;
    padding: 14px 18px;
    border: 1px dashed var(--nc-red);
    border-radius: var(--nc-r-lg);
    background: #fff9f9;
}
.ncafe-admin-danger-zone h3 { color: var(--nc-red); margin-top: 0; font-size: 13px; }


/* ============================================================
   ⑫ 반응형
   ============================================================ */

@media (max-width: 860px) {
    #ncafe-body { padding: 12px 14px 30px; }
    #ncafe-sidebar { width: 160px; }
}

@media (max-width: 680px) {
    #ncafe-cover { height: 110px; }
    #ncafe-info-bar { padding: 0 14px 12px; gap: 10px; }
    #ncafe-cafe-image { width: 56px; height: 56px; margin-top: -20px; }
    #ncafe-cafe-name { font-size: 15px; }
    #ncafe-cafe-actions { flex-wrap: wrap; }

    #ncafe-body { flex-direction: column; padding: 10px 14px 30px; }
    #ncafe-sidebar { width: 100%; position: static; }

    #ncafe-menu > ul {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 8px;
    }
    #ncafe-menu > ul > li > a {
        height: auto;
        padding: 5px 10px;
        border-radius: 14px;
        border-bottom: none;
        font-size: 12px;
    }
    #ncafe-menu > ul > li.active > a {
        border-left: none;
        padding-left: 10px;
    }

    #ncafe-list-header { padding: 14px 14px 0; }
    #ncafe-search-bar { margin: 10px 14px 0; }
    #ncafe-cafe-list { padding: 10px 14px 30px; }
    .ncafe-cafe-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

    .ncafe-admin-stats { grid-template-columns: repeat(2, 1fr); }
    #ncafe-admin-nav a { padding: 0 10px; font-size: 12px; }
    #ncafe-admin-content { padding: 14px 16px; }

    .ncafe-article-list .col-author,
    .ncafe-article-list .col-hit,
    .ncafe-article-list .col-like { display: none; }

    #ncafe-create-form, #ncafe-join-form, #ncafe-leave-confirm { padding: 0 14px 30px; }
    .ncafe-notice-view { padding: 0 14px 20px; }
}


/* ============================================================
   ⑬ 독립 게시판 스타일
   ============================================================ */

/* ── 게시판 공통 래퍼 ── */
.ncafe-board-wrap,
.ncafe-view-wrap,
.ncafe-write-wrap {
    background: var(--nc-white);
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r-lg);
    overflow: hidden;
}

/* ── 게시판 헤더 ── */
.ncafe-board-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 2px solid var(--nc-green);
    background: var(--nc-white);
}
.ncafe-board-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--nc-text);
    letter-spacing: -.3px;
}
.ncafe-board-count {
    font-size: 12px;
    color: var(--nc-text-3);
}

/* ── 검색 행 ── */
.ncafe-search-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--nc-line-2);
    background: var(--nc-bg);
    gap: 8px;
}
.ncafe-search-row form {
    display: flex;
    gap: 4px;
    align-items: center;
}
.ncafe-search-row select,
.ncafe-search-row input[type="text"] {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r);
    font-size: 12px;
    outline: none;
    font-family: var(--nc-font);
    background: var(--nc-white);
}
.ncafe-search-row input[type="text"] { width: 160px; }
.ncafe-search-row input:focus,
.ncafe-search-row select:focus { border-color: var(--nc-green); }
.ncafe-search-row button {
    height: 32px;
    padding: 0 12px;
    background: var(--nc-green);
    color: #fff;
    border: none;
    border-radius: var(--nc-r);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--nc-font);
}
.ncafe-search-row button:hover { background: var(--nc-green-dk); }
.ncafe-search-clear {
    font-size: 12px;
    color: var(--nc-text-3);
    padding: 4px 6px;
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r);
    background: var(--nc-white);
}

/* 글쓰기 버튼 */
.btn-ncafe-write {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border-radius: var(--nc-r);
    font-size: 12px;
    font-weight: 700;
    background: var(--nc-green);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
.btn-ncafe-write:hover { background: var(--nc-green-dk); color: #fff; }

/* 공지/비밀 뱃지 */
.ncafe-notice-badge {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    background: #fff3cd;
    color: #856404;
    font-size: 10px;
    font-weight: 700;
    margin-right: 4px;
    vertical-align: middle;
}
.ncafe-secret-badge { font-size: 12px; margin-right: 3px; }
.ncafe-file-badge   { font-size: 11px; margin-left: 3px; }
.col-num { width: 50px; text-align: center; color: var(--nc-text-3); font-size: 12px; }

/* 공지 행 강조 */
.ncafe-article-list tbody tr.is-notice td { background: #fffdf0; }
.ncafe-article-list tbody tr.is-notice:hover td { background: #fffae0; }

/* 게시판 푸터 */
.ncafe-board-footer {
    padding: 12px 14px;
    border-top: 1px solid var(--nc-line-2);
    text-align: right;
}

/* ── 갤러리형 ── */
.ncafe-gallery-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    padding: 14px;
}
.ncafe-gallery-list li { }
.ncafe-gallery-list li a {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r);
    overflow: hidden;
    transition: box-shadow .15s;
}
.ncafe-gallery-list li a:hover { box-shadow: var(--nc-shadow-md); }
.ncafe-gallery-thumb {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--nc-bg-2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ncafe-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.no-thumb { font-size: 32px; color: var(--nc-text-4); }
.ncafe-gallery-subject {
    font-size: 12px;
    font-weight: 600;
    color: var(--nc-text);
    padding: 0 8px 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ncafe-gallery-meta {
    font-size: 11px;
    color: var(--nc-text-3);
    padding: 0 8px 8px;
}

/* ── 홈 게시판 위젯 ── */
.ncafe-board-widget {
    background: var(--nc-white);
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r-lg);
    overflow: hidden;
    margin-top: 12px; /* content gap 보완 */
}
.ncafe-board-widget .ncafe-card-header { padding: 11px 16px; border-bottom: 1px solid var(--nc-line-2); }
.ncafe-board-widget .ncafe-card-header h2 { font-size: 13px; }
.ncafe-board-widget .ncafe-card-header h2 a:hover { color: var(--nc-green-dk); }

.ncafe-widget-list { }
.ncafe-widget-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-bottom: 1px solid var(--nc-line-2);
    gap: 8px;
    font-size: 13px;
}
.ncafe-widget-list li:last-child { border-bottom: none; }
.ncafe-widget-list li a {
    flex: 1;
    color: var(--nc-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ncafe-widget-list li a:hover { color: var(--nc-green-dk); }
.ncafe-widget-list li .ncafe-date { flex-shrink: 0; font-size: 11px; color: var(--nc-text-4); }

.ncafe-gallery-mini {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 8px;
}
.ncafe-gallery-mini li a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}
.ncafe-gallery-mini li a img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--nc-r);
}
.ncafe-gallery-mini li a .no-thumb {
    width: 100%;
    aspect-ratio: 1;
    background: var(--nc-bg-2);
    border-radius: var(--nc-r);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.ncafe-gallery-mini li a span:last-child { font-size: 11px; color: var(--nc-text-2); text-align: center; line-height: 1.3; }

/* ── 글 보기 ── */
.ncafe-view-header {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--nc-line);
}
.ncafe-view-breadcrumb {
    font-size: 12px;
    color: var(--nc-text-3);
    margin-bottom: 8px;
}
.ncafe-view-breadcrumb a { color: var(--nc-green-dk); font-weight: 600; }
.ncafe-view-breadcrumb a:hover { text-decoration: underline; }

.ncafe-view-subject {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -.4px;
    color: var(--nc-text);
    margin-bottom: 10px;
}
.ncafe-view-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--nc-text-3);
}
.meta-author {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    color: var(--nc-text-2);
}
.ncafe-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}

.ncafe-view-content {
    padding: 20px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--nc-text);
    min-height: 120px;
    border-bottom: 1px solid var(--nc-line-2);
    word-break: break-all;
}
.ncafe-view-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--nc-r);
    margin: 8px 0;
    display: inline-block;
    vertical-align: middle;
}
/* SmartEditor2 이미지 래퍼 */
.ncafe-view-content p img,
.ncafe-view-content div img {
    max-width: 100%;
    height: auto;
}
.ncafe-view-content p,
.ncafe-view-content div {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-all;
}

/* 첨부파일 */
.ncafe-view-files {
    padding: 12px 20px;
    border-bottom: 1px solid var(--nc-line-2);
    background: var(--nc-bg);
}
.ncafe-view-files strong { font-size: 12px; color: var(--nc-text-3); display: block; margin-bottom: 6px; }
.ncafe-view-files ul { display: flex; flex-wrap: wrap; gap: 8px; }
.ncafe-view-files li { }
.ncafe-file-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: var(--nc-r); border: 1px solid var(--nc-line); }
.ncafe-file-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: var(--nc-white);
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r);
    font-size: 12px;
    color: var(--nc-text-2);
    transition: background .15s;
}
.ncafe-file-link:hover { background: var(--nc-bg-2); }
.ncafe-file-size { color: var(--nc-text-4); font-size: 11px; }

/* 좋아요 */
.ncafe-view-like {
    padding: 14px 20px;
    border-bottom: 1px solid var(--nc-line-2);
    text-align: center;
}
.btn-ncafe-like {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 20px;
    border-radius: 19px;
    border: 1px solid var(--nc-line);
    background: var(--nc-white);
    font-size: 14px;
    color: var(--nc-text-3);
    cursor: pointer;
    font-family: var(--nc-font);
    transition: all .15s;
}
.btn-ncafe-like:hover,
.btn-ncafe-like.active {
    background: #fff0f4;
    border-color: #ff6b8a;
    color: #e0285a;
}

/* 수정/삭제 */
.ncafe-view-actions {
    display: flex;
    gap: 6px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--nc-line-2);
}
.btn-ncafe-edit {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: var(--nc-r);
    border: 1px solid var(--nc-line);
    background: var(--nc-bg);
    font-size: 12px;
    color: var(--nc-text-2);
    transition: background .15s;
}
.btn-ncafe-edit:hover { background: var(--nc-border); }
.btn-ncafe-del {
    height: 30px;
    padding: 0 12px;
    border-radius: var(--nc-r);
    border: 1px solid #ffd0d0;
    background: #fff8f8;
    font-size: 12px;
    color: var(--nc-red);
    cursor: pointer;
    font-family: var(--nc-font);
    transition: background .15s;
}
.btn-ncafe-del:hover { background: #ffe0e0; }

/* 이전/다음 */
.ncafe-view-nav {
    border-top: 1px solid var(--nc-line-2);
    border-bottom: 1px solid var(--nc-line-2);
}
.nav-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    font-size: 13px;
    border-bottom: 1px solid var(--nc-line-2);
}
.nav-row:last-child { border-bottom: none; }
.nav-label {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--nc-text-4);
    width: 34px;
}
.nav-next .nav-label::before { content: '▲ '; font-size: 9px; }
.nav-prev .nav-label::before { content: '▼ '; font-size: 9px; }
.nav-row a { color: var(--nc-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-row a:hover { color: var(--nc-green-dk); }

/* 목록/글쓰기 버튼 */
.ncafe-view-bottom {
    display: flex;
    gap: 6px;
    padding: 12px 20px;
}
.btn-ncafe-list {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 16px;
    border-radius: var(--nc-r);
    border: 1px solid var(--nc-line);
    background: var(--nc-bg);
    font-size: 13px;
    color: var(--nc-text-2);
    transition: background .15s;
}
.btn-ncafe-list:hover { background: var(--nc-line); }

/* ── 댓글 ── */
.ncafe-comments {
    padding: 0 20px 20px;
    margin-top: 8px;
}
.ncafe-comment-title {
    font-size: 14px;
    font-weight: 700;
    padding: 14px 0 10px;
    border-bottom: 1px solid var(--nc-line);
    margin-bottom: 0;
    color: var(--nc-text);
}
.ncafe-comment-title span {
    color: var(--nc-green-dk);
    font-size: 13px;
}

.ncafe-comment-list { }
.ncafe-comment-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--nc-line-2);
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.ncafe-comment-item.is-reply {
    padding-left: 20px;
    background: var(--nc-bg);
    border-radius: var(--nc-r);
    margin: 4px 0;
    padding: 10px 12px 10px 32px;
}
.reply-arrow { color: var(--nc-text-3); font-size: 14px; flex-shrink: 0; margin-top: 2px; }
.ncafe-comment-body { flex: 1; }
.ncafe-comment-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    flex-wrap: wrap;
}
.ncafe-comment-meta strong { font-size: 13px; color: var(--nc-text); }
.ncafe-comment-meta span { font-size: 11px; color: var(--nc-text-4); }
.ncafe-comment-text {
    font-size: 13px;
    line-height: 1.7;
    color: var(--nc-text-2);
    word-break: break-all;
}
.btn-cm-del, .btn-cm-reply {
    height: 22px;
    padding: 0 8px;
    border-radius: 3px;
    border: 1px solid var(--nc-line);
    background: var(--nc-bg);
    font-size: 11px;
    cursor: pointer;
    font-family: var(--nc-font);
    color: var(--nc-text-3);
    transition: background .1s;
}
.btn-cm-del:hover  { background: #ffe0e0; border-color: #ffd0d0; color: var(--nc-red); }
.btn-cm-reply:hover { background: var(--nc-green-light); border-color: var(--nc-green); color: var(--nc-green-dk); }

/* 대댓글 폼 */
.ncafe-reply-form {
    margin-top: 8px;
    background: var(--nc-bg);
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r);
    padding: 10px;
}
.ncafe-reply-form textarea {
    width: 100%;
    height: 60px;
    padding: 8px;
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r);
    font-size: 13px;
    resize: none;
    font-family: var(--nc-font);
    outline: none;
}
.ncafe-reply-form textarea:focus { border-color: var(--nc-green); }
.ncafe-reply-form button {
    margin-top: 6px;
    height: 28px;
    padding: 0 12px;
    border-radius: var(--nc-r);
    border: none;
    font-size: 12px;
    cursor: pointer;
    font-family: var(--nc-font);
    margin-right: 4px;
}
.ncafe-reply-form .btn-ncafe-submit { background: var(--nc-green); color: #fff; }
.ncafe-reply-form button:last-child { background: var(--nc-bg-2); border: 1px solid var(--nc-line); color: var(--nc-text-2); }

/* 댓글 입력 폼 */
.ncafe-comment-form {
    margin-top: 12px;
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r-lg);
    overflow: hidden;
}
.ncafe-comment-form textarea {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-bottom: 1px solid var(--nc-line-2);
    font-size: 13px;
    line-height: 1.6;
    resize: none;
    font-family: var(--nc-font);
    outline: none;
    color: var(--nc-text);
}
.ncafe-comment-form textarea:focus { background: #fafff9; }
.ncafe-comment-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--nc-bg);
}
.char-count { font-size: 11px; color: var(--nc-text-4); }
.ncafe-comment-form .btn-ncafe-submit {
    height: 32px;
    padding: 0 16px;
    border-radius: var(--nc-r);
    font-size: 12px;
}
.ncafe-comment-login {
    text-align: center;
    padding: 18px;
    font-size: 13px;
    color: var(--nc-text-3);
    border: 1px dashed var(--nc-line);
    border-radius: var(--nc-r-lg);
    margin-top: 12px;
}
.ncafe-comment-login a { color: var(--nc-green-dk); font-weight: 600; }

/* ── 글쓰기 폼 ── */
.ncafe-write-wrap { padding: 0; }
.ncafe-write-title {
    font-size: 16px;
    font-weight: 800;
    padding: 14px 18px;
    border-bottom: 2px solid var(--nc-green);
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -.3px;
}
.ncafe-write-board {
    font-size: 12px;
    font-weight: 400;
    color: var(--nc-text-3);
    background: var(--nc-bg);
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid var(--nc-line);
}
.ncafe-write-row {
    padding: 10px 16px;
    border-bottom: 1px solid var(--nc-line-2);
}
.ncafe-write-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--nc-text-3);
    margin-bottom: 5px;
}
.ncafe-write-subject {
    display: block;
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r);
    font-size: 15px;
    font-weight: 600;
    font-family: var(--nc-font);
    outline: none;
    color: var(--nc-text);
    transition: border-color .15s;
}
.ncafe-write-subject:focus { border-color: var(--nc-green); }
.ncafe-write-content {
    display: block;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-r);
    font-size: 14px;
    font-family: var(--nc-font);
    line-height: 1.8;
    resize: vertical;
    outline: none;
    color: var(--nc-text);
    transition: border-color .15s;
}
.ncafe-write-content:focus { border-color: var(--nc-green); }
.ncafe-write-row input[type="file"] {
    font-size: 13px;
    color: var(--nc-text-2);
    margin-bottom: 4px;
}
.ncafe-write-row small { font-size: 11px; color: var(--nc-text-4); }
.ncafe-existing-files { margin-top: 6px; }
.ncafe-existing-files li {
    font-size: 12px;
    color: var(--nc-text-2);
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ncafe-existing-files label { font-size: 12px; color: var(--nc-red); }
.ncafe-write-options {
    padding: 10px 16px;
    display: flex;
    gap: 16px;
    background: var(--nc-bg);
    border-top: 1px solid var(--nc-line-2);
}
.ncafe-write-options label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--nc-text-2);
    cursor: pointer;
}
.ncafe-write-footer {
    display: flex;
    gap: 8px;
    padding: 14px 16px;
    border-top: 1px solid var(--nc-line);
}
.ncafe-write-footer .btn-ncafe-submit,
.ncafe-write-footer .btn-ncafe-cancel {
    height: 40px;
    padding: 0 22px;
    border-radius: var(--nc-r);
    font-size: 14px;
}

/* ── 반응형 게시판 ── */
@media (max-width: 680px) {
    .ncafe-gallery-list { grid-template-columns: repeat(2, 1fr); }
    .ncafe-gallery-mini { grid-template-columns: repeat(3, 1fr); }
    .ncafe-view-subject { font-size: 16px; }
    .ncafe-view-content { padding: 14px; }
    .ncafe-comments { padding: 0 14px 16px; }
    .ncafe-article-list .col-num,
    .ncafe-article-list .col-like { display: none; }
}


/* ── 댓글 툴바 ── */
.ncafe-cm-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    background: var(--nc-bg);
    border-bottom: 1px solid var(--nc-line-2);
}
.ncafe-cm-toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: var(--nc-r);
    background: transparent;
    font-size: 13px;
    cursor: pointer;
    color: var(--nc-text-2);
    font-family: var(--nc-font);
    transition: all .1s;
}
.ncafe-cm-toolbar button:hover {
    background: var(--nc-white);
    border-color: var(--nc-line);
    color: var(--nc-text);
}
.cm-toolbar-sep {
    width: 1px;
    height: 18px;
    background: var(--nc-line);
    margin: 0 4px;
}


/* ── 답글 폼 ── */
.ncafe-reply-wrap {
    list-style: none;
    padding: 8px 16px 8px 20px;
    background: var(--nc-bg);
    border-bottom: 1px solid var(--nc-line-2);
}
.ncafe-reply-form-inner {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.ncafe-reply-form-inner .reply-arrow {
    flex-shrink: 0;
    padding-top: 8px;
    color: var(--nc-text-3);
    font-size: 14px;
}
.ncafe-reply-wrap .ql-toolbar { border-radius: 4px 4px 0 0; }
.ncafe-reply-wrap .ql-container { border-radius: 0 0 4px 4px; }

/* ── 댓글 수정 버튼/폼 ── */
.btn-cm-edit {
    height: 22px;
    padding: 0 8px;
    border-radius: 3px;
    border: 1px solid var(--nc-line);
    background: var(--nc-bg);
    font-size: 11px;
    cursor: pointer;
    font-family: var(--nc-font);
    color: var(--nc-text-3);
    transition: background .1s;
}
.btn-cm-edit:hover {
    background: var(--nc-green-light);
    border-color: var(--nc-green);
    color: var(--nc-green-dk);
}
.ncafe-cm-edit-form { }
.ncafe-cm-edit-textarea {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--nc-green);
    border-radius: var(--nc-r);
    font-size: 13px;
    font-family: var(--nc-font);
    line-height: 1.6;
    resize: vertical;
    outline: none;
    box-shadow: 0 0 0 3px rgba(3,199,90,.08);
}
.ncafe-cm-edit-footer {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}
.ncafe-cm-edit-footer .btn-ncafe-submit,
.ncafe-cm-edit-footer .btn-ncafe-cancel {
    height: 30px;
    padding: 0 14px;
    border-radius: var(--nc-r);
    font-size: 12px;
}

/* ── 댓글 수정 폼 Quill ── */
.ncafe-cm-edit-form .ql-toolbar  { border-radius: 4px 4px 0 0; }
.ncafe-cm-edit-form .ql-container { border-radius: 0 0 4px 4px; }

/* ── 카페 URL ── */
#ncafe-cafe-url {
    margin: 5px 0 0;
}
#ncafe-cafe-url a {
    font-size: 12px;
    color: var(--nc-green-dk);
}
#ncafe-cafe-url a:hover {
    text-decoration: underline;
}