/* ============================================================
   수룡산업 올품 문의 게시판 - 공통 스타일
   (koreacabletie.com 톤앤매너: 다크 네이비 헤더 + 밝은 본문)
   ============================================================ */

:root {
    --navy-900: #0b2138;
    --navy-800: #0e2b4e;
    --navy-700: #123a66;
    --blue:     #1a5fa8;
    --blue-dark:#154e8c;
    --bg:       #f4f6f9;
    --card:     #ffffff;
    --line:     #e2e6ee;
    --text:     #2b3240;
    --muted:    #7b8494;
    --radius:   12px;
    --shadow:   0 2px 12px rgba(14, 43, 78, .06);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    font-size: 16px;
    color: var(--text);
    background: var(--bg);
    line-height: 1.65;
    word-break: keep-all;          /* 한글이 단어 중간에서 끊기지 않게 */
    overflow-wrap: break-word;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── 레이아웃 ──
   헤더 .inner와 본문 .wrap이 같은 max-width + 같은 좌우 패딩을 쓰므로
   열이 정확히 일치합니다. */
.wrap {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px 60px;
}

/* ── 헤더 (다크 네이비, 대형) ── */
.site-header {
    background: linear-gradient(120deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
    color: #fff;
    border-bottom: 3px solid var(--blue);
}
.site-header .inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: clamp(84px, 9vw, 110px);
}
.site-header .logo {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    color: #fff;
}
.site-header .logo .brand {
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 800;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.site-header .logo .brand em {
    font-style: normal;
    font-weight: 700;
    font-size: 0.82em;
    /* 태극기 상징색: 레드 → 블루 그라데이션 */
    background: linear-gradient(95deg, #ff7d88 0%, #f0526b 32%, #b58ae0 55%, #6ea8ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ff8f9a; /* 미지원 브라우저 대비 */
}
.site-header .logo .brand .divider {
    color: rgba(255,255,255,.3);
    font-weight: 300;
    margin: 0 6px;
}
.site-header .logo .sub {
    font-size: clamp(12px, 1.3vw, 14px);
    font-weight: 400;
    color: rgba(255,255,255,.65);
    letter-spacing: .06em;
    white-space: nowrap;
}
.site-header .logo:hover { text-decoration: none; }
.site-header .header-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}
.site-header .header-nav a {
    color: rgba(255,255,255,.9);
    font-size: clamp(14px, 1.4vw, 16px);
    padding: 10px 20px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    white-space: nowrap;
    transition: background .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.site-header .header-nav a:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.55);
    text-decoration: none;
    transform: translateY(-1px);
}
.site-header .header-nav a.nav-primary {
    background: var(--blue);
    border-color: var(--blue);
}
.site-header .header-nav a.nav-primary:hover {
    background: var(--blue-dark);
    border-color: var(--blue-dark);
}
.site-header .header-nav a.nav-admin {
    border-color: transparent;
    color: rgba(255,255,255,.5);
    font-size: 13px;
    padding: 8px 10px;
}
.site-header .header-nav a.nav-admin:hover {
    color: rgba(255,255,255,.9);
    background: rgba(255,255,255,.08);
}

/* ── 페이지 헤드 ── */
.page-head { margin: 40px 0 28px; }
.page-title {
    font-size: clamp(26px, 2.8vw, 34px);
    font-weight: 800;
    color: var(--navy-800);
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}
.page-title::after {
    content: '';
    display: block;
    width: 44px;
    height: 4px;
    background: linear-gradient(90deg, var(--blue), #5ea2ec);
    border-radius: 2px;
    margin-top: 12px;
    animation: lineGrow .6s cubic-bezier(.25,.8,.35,1) both;
    transform-origin: left;
}
@keyframes lineGrow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
.page-desc {
    font-size: clamp(15px, 1.5vw, 16px);
    color: var(--muted);
    margin-top: 12px;
}

/* ── 카드 ── */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(24px, 3.2vw, 40px);
    margin-bottom: 22px;
    box-shadow: var(--shadow);
}

/* ── 목록 테이블 ── */
.board-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;    /* 제목 칸 말줄임(...) 처리를 위해 필요 */
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.board-table thead th {
    background: #eef2f8;
    color: #4a5568;
    font-size: 14px;
    font-weight: 700;
    padding: 16px 16px;
    text-align: center;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.board-table tbody td {
    padding: 16px 16px;
    border-bottom: 1px solid #f0f2f6;
    vertical-align: middle;
}
.board-table tbody tr:last-child td { border-bottom: none; }
.board-table tbody tr { transition: background .12s; }
.board-table tbody tr:hover { background: #f7fafd; }
.board-table .td-num    { text-align: center; color: #a0a8b5; font-size: 14px; white-space: nowrap; }
.board-table .td-title  { text-align: left; }
.board-table .td-center { text-align: center; font-size: 15px; white-space: nowrap; }
.board-table .td-date   { text-align: center; color: var(--muted); font-size: 14px; white-space: nowrap; }

.title-link {
    color: #222;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    transition: color .15s;
}
.title-link .cat-chip,
.title-link .lock-icon { flex-shrink: 0; }
.title-link .title-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;   /* 긴 제목은 한 줄 + ... 처리 */
    white-space: nowrap;
    transition: transform .18s ease;
}
.title-link:hover { color: var(--blue); text-decoration: none; }
.title-link:hover .title-text { transform: translateX(3px); }
.lock-icon { font-size: 13px; opacity: .55; }

/* 대분류 칩 */
.cat-chip {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1.6;
}
.cat-quote   { background: #e3edfa; color: #1a5fa8; }
.cat-product { background: #e2f3e8; color: #14652f; }
.cat-quality { background: #efe7fa; color: #6b3fa0; }
.cat-dev     { background: #fdeee0; color: #b05e12; }
.cat-etc     { background: #ececf0; color: #5a6270; }

/* 상태 뱃지 */
.badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.badge-pending { background: #fff4d6; color: #8a6d00; }
.badge-replied { background: #dcefe4; color: #14652f; }

/* ── 폼 ── */
.form-group { margin-bottom: 24px; }
.form-group label {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #3a4254;
    margin-bottom: 9px;
}
.form-group label .req { color: #e74c3c; margin-left: 2px; }
.form-group label .opt {
    color: #a7aebb;
    font-weight: 400;
    font-size: 13px;
    margin-left: 5px;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="password"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid #d5dae3;
    border-radius: 10px;
    font-size: 16px;
    color: var(--text);
    background: #fff;
    transition: border-color .18s, box-shadow .18s;
    font-family: inherit;
}
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(26, 95, 168, .12);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: #b4bac5; font-size: 15px; }
.form-group textarea { resize: vertical; min-height: 180px; line-height: 1.7; }
.form-group .hint { font-size: 13.5px; color: #99a1af; margin-top: 7px; }
.form-group .hint.point { color: var(--blue); }

/* 개인정보 동의 박스 */
.privacy-box {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8fafc;
    padding: 18px 20px;
    font-size: 13.5px;
    color: #5a6270;
    line-height: 1.85;
    max-height: 180px;
    overflow-y: auto;
    margin-bottom: 14px;
}
.privacy-box strong { color: #333; }
.agree-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
}
.agree-row input[type="checkbox"] {
    width: 19px;
    height: 19px;
    cursor: pointer;
    accent-color: var(--blue);
    flex-shrink: 0;
}

/* 파일 업로드 */
.file-input-wrap { display: flex; align-items: center; gap: 10px; }
.file-input-wrap input[type="file"] {
    flex: 1;
    padding: 12px 14px;
    border: 1.5px dashed #c3cbd8;
    border-radius: 10px;
    background: #fafbfd;
    font-size: 14.5px;
    cursor: pointer;
    transition: border-color .18s;
}
.file-input-wrap input[type="file"]:hover { border-color: var(--blue); }

/* 행 2열 분할 */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* ── 버튼 ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: background .15s, transform .1s, box-shadow .15s;
    font-family: inherit;
    line-height: 1.4;
    white-space: nowrap;          /* 버튼 글자 줄바꿈 방지 */
}
.btn:active { transform: translateY(0) scale(.98); }
/* 네이비 → 레드가 왼쪽부터 천천히 차오르는 호버 */
.btn-primary {
    color: #fff;
    background:
        linear-gradient(135deg, #cd2e3a, #a72330) no-repeat left center / 0% 100%,
        linear-gradient(135deg, var(--blue), var(--blue-dark));
    box-shadow: 0 3px 10px rgba(26, 95, 168, .28);
    transition: background-size .65s cubic-bezier(.4, 0, .2, 1),
                transform .2s ease,
                box-shadow .4s ease;
}
.btn-primary:hover {
    background-size: 100% 100%, 100% 100%;
    text-decoration: none;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(167, 35, 48, .35);
}
.btn-secondary { background: #6c757d; color: #fff; }
.btn-secondary:hover {
    background: #5a6268;
    text-decoration: none;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(90, 98, 104, .3);
}
.btn-danger { background: #dc3545; color: #fff; }
.btn-danger:hover {
    background: #c82333;
    text-decoration: none;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(220, 53, 69, .3);
}
.btn-outline { background: #fff; color: var(--blue); border: 1.5px solid var(--blue); }
.btn-outline:hover {
    background: #f0f5fb;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(26, 95, 168, .15);
}
.btn-sm { padding: 9px 18px; font-size: 14.5px; }

/* ── 버튼 영역 ── */
.btn-area { display: flex; gap: 12px; margin-top: 30px; }
.btn-area.right { justify-content: flex-end; }
.btn-area.between { justify-content: space-between; }
.btn-area.center { justify-content: center; }

/* ── 페이지네이션 ── */
.pagination { text-align: center; margin-top: 30px; }
.pagination a, .pagination strong {
    display: inline-block;
    min-width: 42px;
    padding: 9px 0;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: #5a6270;
    margin: 3px;
    font-size: 15px;
    background: #fff;
}
.pagination a { transition: border-color .15s, color .15s, transform .15s, box-shadow .15s; }
.pagination a:hover {
    border-color: var(--blue);
    color: var(--blue);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(26, 95, 168, .12);
}
.pagination strong {
    border-color: var(--blue);
    background: var(--blue);
    color: #fff;
    font-weight: 700;
}

/* ── 안내 박스 ── */
.notice-box {
    margin-top: 30px;
    padding: 20px 24px;
    background: #f0f5fb;
    border: 1px solid #d3e2f2;
    border-radius: var(--radius);
    font-size: 14.5px;
    color: #3d5a7a;
    line-height: 2.0;
}
.notice-box strong { color: var(--navy-800); }
.notice-box ul {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}
.notice-box li {
    position: relative;
    padding-left: 15px;      /* 줄바꿈 시에도 글머리 기준으로 정렬 유지 */
    margin-bottom: 6px;
    line-height: 1.75;
}
.notice-box li:last-child { margin-bottom: 0; }
.notice-box li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #8fb4d9;
}

/* ── 비밀번호 확인 박스 ── */
.pw-box {
    max-width: 480px;
    margin: 60px auto;
    text-align: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 44px 36px;
    box-shadow: var(--shadow);
}
.pw-box .icon { font-size: 46px; margin-bottom: 16px; }
.pw-box h3 { font-size: 21px; margin-bottom: 10px; color: var(--navy-800); }
.pw-box p { font-size: 15px; color: var(--muted); margin-bottom: 24px; }
.pw-box .pw-title {
    margin-bottom: 16px;
    padding: 14px 18px;
    background: #f5f7fa;
    border-radius: 9px;
    font-size: 14.5px;
    text-align: center;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── 등록 완료 화면 ── */
.done-box {
    max-width: 520px;
    margin: 70px auto;
    text-align: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 52px 40px;
    box-shadow: var(--shadow);
}
.done-box .done-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: #dcefe4;
    color: #14652f;
    font-size: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.done-box h3 { font-size: 23px; color: var(--navy-800); margin-bottom: 12px; }
.done-box p { font-size: 15px; color: var(--muted); line-height: 1.9; margin-bottom: 30px; }

/* ── 글 보기 ── */
.view-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    font-size: 14.5px;
    color: var(--muted);
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eef0f4;
}
.view-meta strong { color: #444; }
.view-content {
    min-height: 120px;
    font-size: 16px;
    line-height: 1.85;
    white-space: pre-wrap;
    word-break: break-word;
}
.view-file {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #eef0f4;
    font-size: 15px;
}

/* ── 관리자 답변 영역 ── */
.reply-box {
    background: #f0f5fb;
    border-left: 4px solid var(--blue);
    border-radius: 0 10px 10px 0;
    padding: 22px 26px;
    margin-top: 26px;
}
.reply-box .reply-label {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--blue);
    margin-bottom: 10px;
}
.reply-box .reply-content {
    font-size: 16px;
    line-height: 1.85;
    white-space: pre-wrap;
    color: #333;
}
.reply-box .reply-date { font-size: 13px; color: #99a1af; margin-top: 10px; }

/* ── 알림 메시지 ── */
.alert {
    padding: 15px 20px;
    border-radius: 10px;
    font-size: 15px;
    margin-bottom: 20px;
}
.alert-danger  { background: #fdecea; color: #842029; border: 1px solid #f5c2c7; }
.alert-success { background: #d1e7dd; color: #0f5132; border: 1px solid #badbcc; }
.alert-info    { background: #cff4fc; color: #055160; border: 1px solid #b6effb; }

/* ── 관리자 테이블 ── */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.admin-table th {
    background: var(--navy-800);
    color: #fff;
    padding: 13px 12px;
    text-align: center;
    white-space: nowrap;
    font-weight: 600;
}
.admin-table td {
    padding: 12px 12px;
    border-bottom: 1px solid #e8ecf1;
    vertical-align: middle;
}
.admin-table td.nowrap { white-space: nowrap; }
.admin-table tbody tr:hover { background: #f5f8fc; }
.admin-table .td-content { max-width: 300px; white-space: pre-wrap; word-break: break-word; }

/* ── 관리자 답변 폼 ── */
.reply-form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid #d5dae3;
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    resize: vertical;
    min-height: 120px;
    margin-bottom: 10px;
    line-height: 1.7;
}
.reply-form textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(26, 95, 168, .12);
}

/* ── 검색/필터 바 (관리자) ── */
.filter-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    align-items: center;
}
.filter-bar input[type="text"],
.filter-bar select {
    padding: 11px 14px;
    border: 1.5px solid #d5dae3;
    border-radius: 9px;
    font-size: 14.5px;
    font-family: inherit;
    color: var(--text);
    background: #fff;
    transition: border-color .18s, box-shadow .18s;
}
.filter-bar input[type="text"]:focus,
.filter-bar select:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(26, 95, 168, .12);
}

/* ── 빈 목록 ── */
.empty-msg {
    text-align: center;
    padding: 80px 20px;
    color: #a7aebb;
    font-size: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

/* ── 푸터 ── */
.site-footer {
    margin-top: 50px;
    padding: 30px 20px;
    background: var(--navy-900);
    text-align: center;
    font-size: 14px;
    color: rgba(255,255,255,.55);
    line-height: 1.9;
}
.site-footer strong { color: rgba(255,255,255,.8); font-weight: 600; }

/* ============================================================
   모던 이펙트
   ============================================================ */

/* 페이지 진입 시 부드러운 등장 */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.wrap { animation: fadeUp .4s ease both; }

/* 목록 행이 순차적으로 나타나는 효과 */
.board-table tbody tr { animation: fadeUp .35s ease both; }
.board-table tbody tr:nth-child(1)  { animation-delay: .03s; }
.board-table tbody tr:nth-child(2)  { animation-delay: .06s; }
.board-table tbody tr:nth-child(3)  { animation-delay: .09s; }
.board-table tbody tr:nth-child(4)  { animation-delay: .12s; }
.board-table tbody tr:nth-child(5)  { animation-delay: .15s; }
.board-table tbody tr:nth-child(6)  { animation-delay: .18s; }
.board-table tbody tr:nth-child(7)  { animation-delay: .21s; }
.board-table tbody tr:nth-child(8)  { animation-delay: .24s; }
.board-table tbody tr:nth-child(9)  { animation-delay: .27s; }
.board-table tbody tr:nth-child(10) { animation-delay: .30s; }
.board-table tbody tr:nth-child(n+11) { animation-delay: .33s; }

/* 목록 행 호버 시 살짝 강조 */
.board-table tbody tr:hover { box-shadow: inset 3px 0 0 var(--blue); }

/* 키보드 포커스 표시 (접근성 + 모던 링) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-radius: 6px;
}

/* 부드러운 스크롤 */
html { scroll-behavior: smooth; }

/* 카드 호버 시 은은한 그림자 */
.card { transition: box-shadow .25s ease; }
.card:hover { box-shadow: 0 6px 24px rgba(14, 43, 78, .09); }

/* 애니메이션 최소화 설정 사용자 배려 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

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

/* 대형 모니터 (1600px~, 4K 포함) */
@media (min-width: 1600px) {
    body { font-size: 17px; }
    .wrap { max-width: 1240px; }
    .site-header .inner { max-width: 1240px; }
    .board-table tbody td { padding: 18px 18px; }
    .title-link { font-size: 17px; }
}

/* 태블릿 ~ */
@media (max-width: 820px) {
    .page-head { margin: 30px 0 22px; }
    .site-header .logo .brand { font-size: 20px; }
    .site-header .logo .brand em { font-size: 0.78em; }
    .site-header .header-nav a { padding: 8px 14px; font-size: 13.5px; }
}

/* 모바일 */
@media (max-width: 640px) {
    body { font-size: 15px; }
    .wrap { padding: 0 14px 44px; }
    /* ── 모바일 헤더: 데스크탑과 동일 구성, 2단 배치 ──
       1단: 로고(전체 문구 + 서브텍스트)
       2단: 문의 홈 · 공식 홈페이지 · 관리자             */
    .site-header .inner {
        padding: 14px 14px 13px;
        height: auto;
        flex-wrap: wrap;
        row-gap: 11px;
    }
    .site-header .logo .brand { font-size: 18px; }
    .site-header .logo .brand em { font-size: 0.8em; }
    .site-header .logo .brand .divider { margin: 0 5px; }
    .site-header .logo .sub { display: block; font-size: 10px; letter-spacing: .05em; }
    .site-header .header-nav {
        width: 100%;
        gap: 6px;
    }
    .site-header .header-nav a { padding: 7px 14px; font-size: 13px; }
    .site-header .header-nav a.nav-admin { margin-left: auto; padding: 7px 10px; font-size: 12.5px; }
    /* ── 목록: 모바일 카드형 레이아웃 ──
       1행: [유형칩] 🔒 제목 (카드 전체 폭으로 흐르고 최대 2줄 후 ...)
       2행: No.번호 · 작성자 · 날짜 ──────────── 상태뱃지
       grid-template-areas로 각 정보의 자리를 고정 → 줄 틀어짐 없음 */
    .board-table { display: block; table-layout: auto; }
    .board-table thead { display: none; }
    .board-table tbody { display: block; }
    .board-table tbody tr {
        display: grid;
        grid-template-columns: auto auto auto 1fr;
        grid-template-areas:
            "title title  title title"
            "num   author date  status";
        align-items: center;
        gap: 12px 8px;
        padding: 16px;
        border-bottom: 1px solid #f0f2f6;
    }
    .board-table tbody tr:last-child { border-bottom: none; }
    .board-table tbody td {
        display: block;
        padding: 0;
        border: none;
        width: auto;
    }
    .board-table .td-title  { grid-area: title; min-width: 0; }
    .board-table .td-status { grid-area: status; justify-self: end; }
    .board-table .td-num    { grid-area: num; }
    .board-table .td-author { grid-area: author; }
    .board-table .td-date   { grid-area: date; }
    .board-table .td-num,
    .board-table .td-author,
    .board-table .td-date {
        font-size: 12.5px;
        line-height: 1.4;          /* 뱃지와 수직 중심 일치 */
        text-align: left;
        white-space: nowrap;
    }
    .board-table .td-num    { color: #a7aebb; }
    .board-table .td-num::before { content: 'No.'; margin-right: 1px; }  /* 숫자와 같은 크기로 베이스라인 통일 */
    .board-table .td-author { color: #7b8494; }
    .board-table .td-date   { color: #a7aebb; }
    .board-table .td-num::after,
    .board-table .td-author::after {
        content: '';
        display: inline-block;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: #cfd5df;
        margin-left: 8px;
        vertical-align: 2px;       /* 글자 세로 중심에 맞춤 */
    }
    /* 제목: 칩·자물쇠·글자가 한 흐름으로 이어지며 최대 2줄 표시 */
    .title-link {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 15.5px;
        font-weight: 600;
        line-height: 1.6;
    }
    .title-link .cat-chip  { margin-right: 7px; vertical-align: 1px; }
    .title-link .lock-icon { margin-right: 6px; }
    .title-link .title-text {
        display: inline;
        white-space: normal;
        overflow: visible;
    }
    .title-link:hover .title-text { transform: none; }
    .lock-icon { font-size: 11px; }
    .cat-chip { padding: 2.5px 9px; font-size: 11px; }
    .badge { padding: 4px 10px; font-size: 11.5px; }
    .card { padding: 22px 18px; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="tel"],
    .form-group input[type="password"],
    .form-group textarea { font-size: 16px; }   /* iOS 확대 방지 */
    .btn { padding: 13px 24px; font-size: 15px; }
    .btn-area.between { flex-direction: column-reverse; }
    .btn-area.between .btn { width: 100%; }
    .notice-box { padding: 16px 18px; font-size: 13px; line-height: 1.85; }
    .pagination a, .pagination strong { min-width: 38px; padding: 8px 0; font-size: 14px; }
    .pw-box { margin: 36px auto; padding: 34px 22px; }
    .done-box { margin: 44px auto; padding: 38px 24px; }
    .admin-table { font-size: 13px; }
    .admin-table td, .admin-table th { padding: 8px 6px; }
    .admin-table .btn-sm { padding: 7px 12px; font-size: 13px; }
}