/*
* bbs-modern.css — 커뮤니티 게시판 새 디자인 (2026-08-21)
*
* 좌측 snb + table_st1 로 만들던 옛 화면을, 자료실·마이페이지와 같은
* 상단 탭 + 카드 레이아웃으로 다시 만든 것. 껍데기는 skin/modern/shell_top.php.
*
* 토큰 블록은 studymaterials/skin/modern/pds-modern.css · mypage/skin/modern/my-modern.css 와 같은 스냅샷이다
* (/var/services/web/.design/tokens.css 의 iteach 브랜드 값). tokens.css 가
* 웹으로 직접 서빙되면 이 파일들 모두 한 줄로 교체한다.
*/
:root {
--font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
'system-ui', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Segoe UI', Roboto, sans-serif;
--fs-xs: .75rem; --fs-sm: .875rem; --fs-base: 1rem; --fs-md: 1.125rem;
--fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 1.875rem; --fs-3xl: 2.25rem;
--line-tight: 1.3; --line-base: 1.65;
--letter-tight: -.02em;
--fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
--space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem;
--space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
--radius-sm: .25rem; --radius-md: .5rem; --radius-lg: .75rem; --radius-xl: 1rem; --radius-full: 9999px;
--shadow-xs: 0 1px 2px rgb(0 0 0 / .04);
--shadow-sm: 0 1px 3px rgb(0 0 0 / .08), 0 1px 2px rgb(0 0 0 / .04);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .10), 0 2px 4px -2px rgb(0 0 0 / .06);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .10), 0 4px 6px -4px rgb(0 0 0 / .05);
--ease-out: cubic-bezier(.16, 1, .3, 1);
--duration-fast: 150ms; --duration-base: 200ms;
/* .pds-page-wrap 이 이 값을 쓴다. 예전엔 선언 없이 top2.php 의 :root 에
* 우연히 기대고 있어서, 헤더를 바꾸면 페이지가 조용히 full-bleed 로 퍼졌다.
* 스냅샷은 그 자체로 완결돼야 한다. */
--container-max: 1400px;
--gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1;
--gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155;
--gray-800: #1e293b; --gray-900: #0f172a;
--color-bg: #ffffff;
--color-fg: var(--gray-900);
--color-fg-muted: var(--gray-500);
--color-fg-subtle: var(--gray-400);
--color-border: var(--gray-200);
--color-border-strong: var(--gray-300);
--color-surface: var(--gray-50);
--color-surface-2: var(--gray-100);
--color-primary: #4f46e5; --color-primary-hover: #4338ca; --color-primary-active: #3730a3;
--color-primary-fg: #fff; --color-primary-soft: #eef2ff; --color-primary-soft-fg: #3730a3;
--color-accent: #b8893a; --color-accent-hover: #a37828;
--color-accent-soft: #f6ecd6; --color-accent-soft-fg: #6e5018; --color-accent-fg: #fff;
--color-success: #16a34a; --color-success-soft: #dcfce7;
--color-danger: #dc2626; --color-danger-hover: #b91c1c; --color-danger-soft: #fee2e2;
--color-warn: #d97706; --color-warn-soft: #fef3c7;
}
.bbs-badge {
display:inline-flex; align-items:center; padding:4px 9px; border-radius:999px;
background:#eef2ff; color:#4338ca; font-size:12px; font-weight:700; line-height:1.3;
}
/* ─────────────────────────────────────────────────────────────
* 페이지 래퍼 — top2.php 헤더와 짝. 레거시 #wrapper(1240px) /
* .container article(970px) 대신 여기서 최대폭을 잡는다.
* ───────────────────────────────────────────────────────────── */
.bbs-page, .bbs-page * { box-sizing: border-box; }
.bbs-page {
font-family: var(--font-sans);
color: var(--color-fg);
background: var(--color-bg);
font-size: var(--fs-base);
line-height: var(--line-base);
}
.bbs-page a { color: inherit; text-decoration: none; }
.bbs-page img { max-width: 100%; }
.bbs-page-wrap {
width: 100%; max-width: var(--container-max);
margin: 0 auto; padding: 0 var(--space-6);
}
@media (max-width: 640px) { .bbs-page-wrap { padding: 0 var(--space-4); } }
/* 상단 탭 — 자료실(.pds-tabnav)과 같은 기하 */
.bbs-tabnav {
display: flex; gap: var(--space-1); flex-wrap: wrap;
border-bottom: 1px solid var(--color-border);
margin-top: var(--space-5);
}
.bbs-tabnav a {
font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-fg-muted);
padding: var(--space-3) var(--space-4); border-bottom: 2px solid transparent; margin-bottom: -1px;
transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.bbs-tabnav a:hover { color: var(--color-fg); }
.bbs-tabnav a.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: var(--fw-semibold); }
.bbs-main { margin: var(--space-6) 0 var(--space-12); }
/* ── 히어로 (인사 + 요약) ────────────────────────────────── */
.bbs-hero {
background: linear-gradient(135deg, var(--color-primary-soft), var(--color-surface));
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-6) var(--space-6);
margin-bottom: var(--space-5);
}
.bbs-hero h2 {
margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold);
letter-spacing: var(--letter-tight); line-height: var(--line-tight);
}
.bbs-hero .bbs-hero-sub { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--color-fg-muted); }
.bbs-hero-icons { display: inline-flex; align-items: center; gap: var(--space-1); vertical-align: -3px; }
.bbs-hero-icons img { height: 16px; width: auto; }
/* ── 지표 타일 (CP / 캐쉬 / 코인 …) ─────────────────────── */
.bbs-stats {
display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--space-3); margin-bottom: var(--space-5);
}
.bbs-stat {
background: var(--color-bg); border: 1px solid var(--color-border);
border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
box-shadow: var(--shadow-xs);
}
.bbs-stat .label { font-size: var(--fs-xs); color: var(--color-fg-muted); font-weight: var(--fw-medium); }
.bbs-stat .value {
margin-top: var(--space-1); font-size: var(--fs-lg); font-weight: var(--fw-bold);
letter-spacing: var(--letter-tight); font-variant-numeric: tabular-nums; word-break: break-all;
}
.bbs-stat .value .unit { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-fg-muted); margin-left: 2px; }
.bbs-stat .note { margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--color-fg-subtle); }
.bbs-stat.is-accent .value { color: var(--color-primary); }
/* ── 섹션 카드 ───────────────────────────────────────────── */
.bbs-card {
background: var(--color-bg); border: 1px solid var(--color-border);
border-radius: var(--radius-lg); padding: var(--space-5);
box-shadow: var(--shadow-xs); margin-bottom: var(--space-5);
}
.bbs-card-title {
display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
margin: 0 0 var(--space-4); font-size: var(--fs-md); font-weight: var(--fw-semibold);
letter-spacing: var(--letter-tight);
}
.bbs-card-title .bbs-sub { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--color-fg-muted); }
.bbs-card-note { font-size: var(--fs-sm); color: var(--color-fg-muted); }
.bbs-card-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }
/* 라벨 + 값 목록 */
.bbs-dl { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0; }
.bbs-dl dt { font-size: var(--fs-sm); color: var(--color-fg-muted); font-weight: var(--fw-medium); }
.bbs-dl dd { margin: 0; font-size: var(--fs-sm); word-break: break-word; }
@media (max-width: 560px) { .bbs-dl { grid-template-columns: 100px minmax(0, 1fr); } }
/* 체크리스트 (1일 무료충전 조건) */
.bbs-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.bbs-checklist li {
display: flex; align-items: flex-start; gap: var(--space-2);
font-size: var(--fs-sm); color: var(--color-fg-muted);
}
.bbs-checklist li .mark {
flex: 0 0 auto; width: 18px; height: 18px; border-radius: var(--radius-full);
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: var(--fw-bold);
background: var(--color-surface-2); color: var(--color-fg-subtle);
}
.bbs-checklist li.is-on { color: var(--color-fg); }
.bbs-checklist li.is-on .mark { background: var(--color-success-soft); color: var(--color-success); }
.bbs-checklist li .gain { margin-left: auto; font-weight: var(--fw-semibold); white-space: nowrap; color: var(--color-fg-subtle); }
.bbs-checklist li.is-on .gain { color: var(--color-success); }
/* ── 표 ──────────────────────────────────────────────────── */
.bbs-table {
width: 100%; border-collapse: collapse;
background: var(--color-bg); border: 1px solid var(--color-border);
border-radius: var(--radius-lg); overflow: hidden;
font-size: var(--fs-sm);
}
.bbs-table thead th {
background: var(--color-surface); border-bottom: 1px solid var(--color-border);
padding: var(--space-3) var(--space-4);
font-size: var(--fs-xs); font-weight: var(--fw-semibold);
color: var(--color-fg-muted); text-align: center; white-space: nowrap;
}
.bbs-table td {
padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border);
text-align: center; vertical-align: middle; word-break: break-word;
}
.bbs-table tbody tr:last-child td { border-bottom: 0; }
.bbs-table tbody tr:hover td { background: var(--color-surface); }
.bbs-table td.left { text-align: left; }
.bbs-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bbs-table a { color: var(--color-primary); }
.bbs-table a:hover { text-decoration: underline; }
.bbs-table tr.is-me td { background: var(--color-primary-soft); font-weight: var(--fw-semibold); }
.bbs-table tr.is-me:hover td { background: var(--color-primary-soft); }
@media (max-width: 720px) {
.bbs-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bbs-table { min-width: 640px; }
}
/* 증감 배지 */
.bbs-delta { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bbs-delta.is-plus { color: var(--color-primary); }
.bbs-delta.is-minus { color: var(--color-danger); }
/* ── 버튼 / 칩 / 폼 ──────────────────────────────────────── */
.bbs-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
height: 38px; padding: 0 var(--space-5);
border: 1px solid var(--color-border); border-radius: var(--radius-full);
font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
background: var(--color-bg); color: var(--color-fg-muted);
white-space: nowrap; cursor: pointer;
transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out),
border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.bbs-btn:hover { background: var(--color-surface); color: var(--color-fg); border-color: var(--color-border-strong); }
.bbs-btn:focus-visible { outline: 3px solid var(--color-primary-soft); outline-offset: 2px; }
.bbs-btn-primary { background: var(--color-primary); color: var(--color-primary-fg); border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.bbs-btn-primary:hover { background: var(--color-primary-hover); color: var(--color-primary-fg); border-color: var(--color-primary-hover); box-shadow: var(--shadow-md); }
/* 상세 화면의 공통/방문 링크 색상이 버튼 글자색을 덮지 않도록 한다. */
.bbs-page a.bbs-btn-primary,
.bbs-page a.bbs-btn-primary:link,
.bbs-page a.bbs-btn-primary:visited { color: #fff; }
.bbs-page a.bbs-btn-primary:hover,
.bbs-page a.bbs-btn-primary:focus { color: #fff; }
.bbs-btn-danger { color: var(--color-danger); border-color: var(--color-danger-soft); }
.bbs-btn-danger:hover { background: var(--color-danger-soft); color: var(--color-danger-hover); border-color: var(--color-danger); }
.bbs-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.bbs-toolbar .spacer { flex: 1 1 auto; }
.bbs-select, .bbs-input {
height: 38px; padding: 0 var(--space-3);
font-family: inherit; font-size: var(--fs-sm); color: var(--color-fg);
background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.bbs-select:focus, .bbs-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.bbs-empty {
text-align: center; padding: var(--space-12) var(--space-4);
color: var(--color-fg-muted); background: var(--color-surface); border-radius: var(--radius-lg);
}
.bbs-footbar { display: flex; align-items: center; justify-content: center; margin-top: var(--space-5); }
/* 페이지네이션 — class/page.php 가 찍는 마크업에 맞춘다 (자료실과 동일) */
.bbs-page .page_nav { margin: var(--space-2) auto 0; }
.bbs-page .page_nav .paging { list-style: none; display: flex; justify-content: center; gap: 2px; margin: 0; padding: 0; flex-wrap: wrap; }
.bbs-page .page_nav .paging li a, .bbs-page .page_nav .paging li span {
display: inline-flex; align-items: center; justify-content: center;
min-width: 32px; height: 32px; padding: 0 var(--space-2);
border: 1px solid var(--color-border); border-radius: var(--radius-md);
font-size: var(--fs-sm); color: var(--color-fg-muted); background: var(--color-bg);
white-space: nowrap; /* 두 자리 이상 페이지 번호가 칸 안에서 줄바꿈되던 것 */
}
.bbs-page .page_nav .paging li a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.bbs-page .page_nav .paging li.on a, .bbs-page .page_nav .paging li a.on {
background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-fg); font-weight: var(--fw-semibold);
}
/* 광고 슬롯 — 고정폭 가 칸을 뚫지 않게 (자료실 .pds-ad 와 같은 처리) */
.bbs-ad { max-width: 100%; overflow: hidden; text-align: center; line-height: 0; margin: var(--space-5) 0; }
.bbs-ad ins, .bbs-ad iframe { max-width: 100% !important; }
/* ─────────────────────────────────────────────────────────────
* 레거시 폼 표 (.cForm) — 글쓰기 등 레거시 폼
*
* 이 화면의 폼은 필드명·검증 JS 가 서버 처리와 1:1 로 묶여 있어 마크업을
* 갈아엎지 않았다. 대신 표를 라벨/입력 2단으로 다시 그려 새 디자인에 맞춘다.
* bgcolor 속성(#F5F5F5 등)은 표현용 속성이라 CSS 가 이긴다 — 줄무늬가 사라진다.
* ───────────────────────────────────────────────────────────── */
.bbs-card table.cForm { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.bbs-card table.cForm td {
padding: var(--space-3) var(--space-2);
border-bottom: 1px solid var(--color-border);
vertical-align: top; line-height: var(--line-base); color: var(--color-fg);
background: transparent;
}
.bbs-card table.cForm tr:last-child td { border-bottom: 0; }
.bbs-card table.cForm td:first-child:not([colspan]) {
width: 150px; white-space: nowrap;
color: var(--color-fg-muted); font-weight: var(--fw-medium);
}
.bbs-card table.cForm td[colspan] { color: var(--color-fg-muted); font-size: var(--fs-xs); }
.bbs-card table.cForm a { color: var(--color-primary); }
.bbs-card table.cForm a:hover { text-decoration: underline; }
.bbs-card table.cForm font[color="#999999"], .bbs-card table.cForm td.ul { color: inherit; }
@media (max-width: 560px) {
.bbs-card table.cForm td:first-child:not([colspan]) { width: 96px; white-space: normal; }
}
/* 폼 컨트롤 — 페이지 전체 공통 */
.bbs-page input[type=text], .bbs-page input[type=password], .bbs-page input[type=email],
.bbs-page input[type=tel], .bbs-page input[type=number], .bbs-page select, .bbs-page textarea {
font-family: inherit; font-size: var(--fs-sm); color: var(--color-fg);
background: var(--color-bg);
border: 1px solid var(--color-border); border-radius: var(--radius-md);
padding: var(--space-2) var(--space-3);
max-width: 100%;
}
.bbs-page textarea { line-height: var(--line-base); }
.bbs-page input[type=text]:focus, .bbs-page input[type=password]:focus, .bbs-page input[type=email]:focus,
.bbs-page input[type=tel]:focus, .bbs-page input[type=number]:focus, .bbs-page select:focus, .bbs-page textarea:focus {
outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.bbs-page input[type=submit], .bbs-page button[type=submit] { cursor: pointer; }
/* ─────────────────────────────────────────────────────────────
* 게시판 전용 — 글 목록 카드 / 글보기 / 댓글
* ───────────────────────────────────────────────────────────── */
/* 카테고리 칩 줄 (fnGetCategory 가 찍는 링크들을 감싼다) */
.bbs-cats { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.bbs-cats a {
display: inline-flex; align-items: center;
font-size: var(--fs-sm); font-weight: var(--fw-medium);
color: var(--color-fg-muted); background: var(--color-surface);
border: 1px solid var(--color-border); border-radius: var(--radius-full);
padding: var(--space-1) var(--space-4);
transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.bbs-cats a:hover { background: var(--color-primary-soft); color: var(--color-primary-soft-fg); border-color: var(--color-primary-soft); }
.bbs-cats a.on, .bbs-cats b {
display: inline-flex; align-items: center; padding: var(--space-1) var(--space-4);
border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-primary-fg);
font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
/* 글 목록 — 카드 한 장 = 글 하나 */
.bbs-grid { display: flex; flex-direction: column; gap: var(--space-3); }
.bbs-card {
position: relative;
background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-xs);
transition: box-shadow var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.bbs-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.bbs-card.is-notice { background: var(--color-primary-soft); border-color: var(--color-primary-soft); }
.bbs-card-top { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.bbs-cat {
font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-primary);
background: var(--color-primary-soft); border-radius: var(--radius-sm); padding: 2px 8px;
}
.bbs-cat font { color: inherit !important; }
.bbs-badge-notice {
font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--color-primary-fg);
background: var(--color-primary); border-radius: var(--radius-sm); padding: 2px 8px;
}
.bbs-star { margin-left: auto; line-height: 0; }
.bbs-star img { height: 16px; width: auto; }
.bbs-title { margin: 0 0 var(--space-1); font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--line-tight); word-break: break-word; }
.bbs-title a { color: inherit; }
.bbs-title a:hover { color: var(--color-primary); }
.bbs-title img { height: 16px; vertical-align: -3px; margin-right: 2px; }
.bbs-title font { color: inherit !important; }
.bbs-meta { font-size: var(--fs-xs); color: var(--color-fg-subtle); display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.bbs-meta .writer { color: var(--color-fg-muted); font-weight: var(--fw-medium); }
.bbs-meta font { color: inherit !important; font-size: inherit !important; }
.bbs-meta img { height: 14px; vertical-align: -2px; }
.bbs-card-admin { position: absolute; top: var(--space-3); right: var(--space-3); }
/* 글보기 */
.bbs-detail-head { border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-4); margin-bottom: var(--space-4); }
.bbs-detail-title { margin: 0 0 var(--space-2); font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--letter-tight); line-height: var(--line-tight); word-break: break-word; }
.bbs-detail-meta { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; font-size: var(--fs-sm); color: var(--color-fg-muted); }
.bbs-detail-meta .spacer { flex: 1 1 auto; }
.bbs-detail-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.bbs-detail-actions img { height: 20px; }
.bbs-detail-body {
font-size: var(--fs-base); line-height: var(--line-base); color: var(--color-fg);
word-break: break-word; overflow-wrap: anywhere;
}
.bbs-detail-body img, .bbs-detail-body video, .bbs-detail-body iframe { max-width: 100%; height: auto; }
.bbs-detail-body table { max-width: 100%; }
.bbs-files { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px dashed var(--color-border); font-size: var(--fs-sm); }
.bbs-files img { height: 16px; vertical-align: -3px; }
.bbs-detail-foot { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--fs-sm); color: var(--color-fg-muted); }
.bbs-detail-foot .spacer { flex: 1 1 auto; }
.bbs-detail-foot img { height: 18px; vertical-align: -4px; }
.bbs-sign { margin-top: var(--space-4); font-size: var(--fs-xs); color: var(--color-fg-subtle); }
.bbs-sign table { max-width: 100%; }
/* 이전/다음 글 */
.bbs-prevnext { font-size: var(--fs-sm); }
.bbs-prevnext table { width: 100%; border-collapse: collapse; }
.bbs-prevnext td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); }
.bbs-prevnext a { color: var(--color-fg-muted); }
.bbs-prevnext a:hover { color: var(--color-primary); }
/* 댓글 */
.bbs-comments { display: flex; flex-direction: column; gap: var(--space-3); }
.bbs-comment {
border: 1px solid var(--color-border); border-radius: var(--radius-lg);
padding: var(--space-4); background: var(--color-bg);
}
.bbs-comment.is-deep { margin-left: var(--space-6); background: var(--color-surface); }
.bbs-comment-info { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.bbs-comment-text { margin: var(--space-2) 0; font-size: var(--fs-sm); line-height: var(--line-base); color: var(--color-fg); word-break: break-word; }
.bbs-comment-base { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--color-fg-subtle); }
.bbs-comment-base .tool { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; }
.bbs-comment-base a { color: var(--color-fg-muted); }
.bbs-comment-base a:hover { color: var(--color-primary); }
.bbs-comment-base img { height: 14px; vertical-align: -2px; }
.bbs-comment-form { margin-top: var(--space-4); }
.bbs-comment-form textarea { width: 100%; min-height: 84px; }
.bbs-comment-form .row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-2); }
.bbs-comment-form .row .spacer { flex: 1 1 auto; }
.bbs-comment-form .guest { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
/* 검색 폼 */
.bbs-search { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
/* 관리자 선택삭제/이동 GIF 버튼 — 새 툴바 안에서 크기만 맞춘다 */
.bbs-admin-cart { display: inline-flex; align-items: center; gap: var(--space-2); }
.bbs-admin-cart img { height: 20px; }
/* 꼬리글 베스트 3 — bullets/view.php 가 표를 직접 찍어서 표 그대로 스타일만 준다 */
.bbs-main table.table_board_v {
width: 100%; border-collapse: collapse; font-size: var(--fs-sm);
background: var(--color-bg); border: 1px solid var(--color-border);
border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-3);
}
.bbs-main table.table_board_v th, .bbs-main table.table_board_v td {
padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border);
vertical-align: top; line-height: var(--line-base);
}
.bbs-main table.table_board_v tr:last-child th, .bbs-main table.table_board_v tr:last-child td { border-bottom: 0; }
.bbs-main table.table_board_v th { background: var(--color-surface); font-weight: var(--fw-semibold); color: var(--color-fg-muted); }
.bbs-main table.table_board_v img { vertical-align: -3px; }
/* 글쓰기 폼(skin/modern/write.php) — 레거시 표를 그대로 두고 감싸서 맞춘다 */
.bbs-main table.table_write, .bbs-main table.cForm { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.bbs-main table.table_write th, .bbs-main table.table_write td {
padding: var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: top;
}
/* 관리자 안내글 상자 (fnGetAdminInfo) */
.bbs-notice-box {
background: var(--color-warn-soft); border: 1px solid var(--color-warn);
border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
font-size: var(--fs-sm); line-height: var(--line-base); color: var(--color-fg);
margin-bottom: var(--space-5);
}
.bbs-notice-box table { max-width: 100%; font-size: var(--fs-sm); }
.bbs-btn-icon { width: 15px; height: 15px; flex: 0 0 auto; }
/* 안내글 안의 레거시 표 색(bgcolor)을 상자 색으로 통일 */
.bbs-notice-box table, .bbs-notice-box tr, .bbs-notice-box td, .bbs-notice-box th { background: transparent !important; border: 0 !important; }
/* ── 과외 (선생님·학생) ──────────────────────────────────── */
.bbs-filter { display: flex; gap: var(--space-3); align-items: baseline; font-size: var(--fs-sm); padding: var(--space-1) 0; }
.bbs-filter .label { flex: 0 0 auto; width: 44px; color: var(--color-fg-muted); font-weight: var(--fw-semibold); font-size: var(--fs-xs); }
.bbs-filter .opts { color: var(--color-fg-muted); line-height: var(--line-base); }
.bbs-filter .opts a { color: var(--color-fg-muted); }
.bbs-filter .opts a:hover { color: var(--color-primary); text-decoration: underline; }
.bbs-filter .opts b, .bbs-filter .opts font { color: var(--color-fg) !important; font-weight: var(--fw-semibold); }
.bbs-tutor { display: flex; gap: var(--space-4); align-items: flex-start; }
.bbs-tutor-thumb {
flex: 0 0 auto; width: 104px; height: 72px; border-radius: var(--radius-md); overflow: hidden;
border: 1px solid var(--color-border); background: var(--color-surface-2);
}
.bbs-tutor-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bbs-tutor-body { min-width: 0; flex: 1 1 auto; }
.bbs-tutor-headline {
margin: var(--space-1) 0 0; font-size: var(--fs-sm); line-height: var(--line-base);
color: var(--color-primary);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 560px) { .bbs-tutor-thumb { width: 72px; height: 54px; } }
.bbs-tutor-promo { margin: 0 0 var(--space-5); }
.bbs-tutor-promo img { max-width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border); display: block; }
.bbs-tutor-promo .headline {
margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4);
border-left: 4px solid var(--color-accent); background: var(--color-accent-soft);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--color-accent-soft-fg);
line-height: var(--line-base); word-break: keep-all;
}
/* 대화방 */
.bbs-chat-frame {
width: 100%; height: 620px; border: 1px solid var(--color-border);
border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--color-surface);
}
.bbs-chat-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 640px) { .bbs-chat-frame { height: 70vh; } }
/* ═════════════════════════════════════════════════════════════
* 밀집 목록 · 화면 단순화 (2026-08-21)
*
* 요구: "게시판은 내용이 무척 많으니 최대한 위아래로 붙여서 한 번에 많이
* 보이게 해달라. 화면도 심플하게."
*
* 글 하나 = 카드 한 장(테두리 + 그림자 + 12px 간격, 세로 3줄) 이었던 것을
* 경계선으로 이어 붙인 한 줄짜리 행으로 바꾼다.
*
* [분류][★] 제목 [댓글수] ............ 글쓴이 · 날짜 · 조회
*
* .bbs-card 는 글쓰기 폼·안내 패널로도 쓰이므로 목록 컨테이너(.bbs-grid)
* 안쪽만 골라서 덮는다. 마크업은 건드리지 않는다.
* ═══════════════════════════════════════════════════════════ */
.bbs-grid {
gap: 0;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.bbs-grid > .bbs-card {
border: 0;
border-top: 1px solid var(--color-border);
border-radius: 0;
box-shadow: none;
padding: var(--space-2) var(--space-4);
overflow: hidden; /* 우측 float(글쓴이·날짜)를 행 안에 가둔다 */
}
.bbs-grid > .bbs-card:first-child { border-top: 0; }
.bbs-grid > .bbs-card:hover { box-shadow: none; border-color: var(--color-border); background: var(--color-surface); }
/* 분류·즐겨찾기 별을 제목과 같은 줄로 (예전엔 제목 위 별도 줄이었다) */
.bbs-grid > .bbs-card > .bbs-card-top {
display: inline-flex;
vertical-align: baseline;
margin: 0 var(--space-2) 0 0;
gap: var(--space-1);
}
.bbs-grid > .bbs-card > .bbs-card-top .bbs-star { margin-left: 0; }
.bbs-grid > .bbs-card > .bbs-title {
display: inline;
margin: 0;
font-size: var(--fs-base);
line-height: 1.5;
}
/* 글쓴이·날짜·조회는 오른쪽 끝으로 — 옛 게시판 목록의 오른쪽 칸과 같은 자리 */
.bbs-grid > .bbs-card > .bbs-meta {
float: right;
margin: 0 0 0 var(--space-3);
white-space: nowrap;
flex-wrap: nowrap;
}
/* 좁은 화면에선 오른쪽에 붙일 자리가 없다 — 제목 아래로 되돌린다 */
@media (max-width: 640px) {
.bbs-grid > .bbs-card > .bbs-meta { float: none; margin: 2px 0 0; }
}
/* ── 화면 단순화 ──
* 목록 위 큰 그라데이션 안내 상자를 걷어내고 제목줄로 만든다 */
.bbs-hero {
background: none;
border: 0;
border-radius: 0;
padding: 0;
margin-bottom: var(--space-3);
}
.bbs-hero h2 { font-size: var(--fs-lg); }
.bbs-hero .bbs-hero-sub { margin-top: 2px; font-size: var(--fs-xs); }
.bbs-cats { margin-bottom: var(--space-3); }
.bbs-toolbar { margin-bottom: var(--space-3); }
/* ── 온라인 과외 등록 폼 ────────────────────────────────── */
.bbs-card.tf-card { padding: 0; overflow: hidden; }
.tf-form { color: var(--color-fg); }
.tf-form, .tf-form * { box-sizing: border-box; }
.tf-head {
display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5);
padding: 28px 32px; border-bottom: 1px solid var(--color-border);
background: linear-gradient(135deg, #f7f8ff 0%, #fff 68%);
}
.tf-eyebrow { display: block; margin-bottom: 5px; color: var(--color-primary); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.tf-head h1 { margin: 0; font-size: 25px; line-height: 1.25; letter-spacing: -.03em; }
.tf-head p { margin: 7px 0 0; color: var(--color-fg-muted); font-size: 13px; }
.tf-required { flex: 0 0 auto; color: var(--color-fg-muted); font-size: 12px; }
.tf-required i, .tf-field > span i { color: #dc2626; font-style: normal; }
.tf-section { padding: 28px 32px; border-bottom: 1px solid var(--color-border); }
.tf-section-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.tf-section-head > span {
display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px;
width: 28px; height: 28px; border-radius: 9px; background: var(--color-primary); color: #fff;
font-size: 13px; font-weight: 800;
}
.tf-section-head h2 { margin: 1px 0 0; font-size: 17px; line-height: 1.35; letter-spacing: -.02em; }
.tf-section-head p { margin: 4px 0 0; color: var(--color-fg-muted); font-size: 12px; }
.tf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.tf-full { grid-column: 1 / -1; }
.tf-field { display: flex; min-width: 0; flex-direction: column; gap: 7px; }
.tf-field > span { min-height: 19px; color: #303747; font-size: 13px; font-weight: 700; }
.tf-field > span em { margin-left: 4px; color: var(--color-primary); font-size: 11px; font-style: normal; font-weight: 600; }
.tf-field input[type="text"], .tf-field select {
display: block; width: 100%; height: 44px; padding: 0 13px; border: 1px solid #cfd5df;
border-radius: 8px; outline: 0; background: #fff; color: var(--color-fg); font: inherit; font-size: 14px;
transition: border-color .15s, box-shadow .15s;
}
.tf-field input[type="text"]:focus, .tf-field select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.tf-field input::placeholder { color: #9ca3af; }
.tf-field small { min-height: 17px; color: var(--color-fg-muted); font-size: 11px; line-height: 1.5; }
.tf-field small a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.tf-file { min-height: 44px; padding: 7px 9px; border: 1px solid #cfd5df; border-radius: 8px; background: #fff; font-size: 12px; }
.tf-file::file-selector-button { margin-right: 10px; padding: 6px 11px; border: 0; border-radius: 6px; background: #eef2ff; color: #4338ca; cursor: pointer; font-weight: 700; }
.tf-notice { margin-top: 20px; padding: 13px 15px; border: 1px solid #c7d2fe; border-radius: 9px; background: #f4f6ff; color: #3730a3; font-size: 12px; line-height: 1.65; }
.tf-notice p { margin: 2px 0 0; }
.tf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tf-chips label { position: relative; }
.tf-chips input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tf-chips span { display: block; min-width: 58px; padding: 9px 14px; border: 1px solid #d5dae3; border-radius: 8px; background: #fff; color: #4b5563; font-size: 13px; text-align: center; cursor: pointer; }
.tf-chips span:hover { border-color: #818cf8; color: #4338ca; }
.tf-chips input:checked + span { border-color: var(--color-primary); background: var(--color-primary); color: #fff; font-weight: 700; }
.tf-chips input:focus-visible + span { outline: 3px solid var(--color-primary-soft); outline-offset: 2px; }
.tf-direct { max-width: 620px; margin-top: 16px; }
.tf-preview { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; }
.tf-preview[hidden] { display: none; }
.tf-preview img { display: block; max-width: 340px; max-height: 190px; border: 1px solid var(--color-border); border-radius: 9px; object-fit: contain; }
.tf-preview label { color: #b91c1c; font-size: 12px; }
.tf-section .tox-tinymce { border-color: #cfd5df; border-radius: 9px; }
.tf-reward { margin: 20px 32px 0; padding: 12px 15px; border-radius: 9px; background: #fff7db; color: #725400; font-size: 12px; }
.tf-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 22px 32px 28px; }
.tf-actions .bbs-btn { min-width: 96px; height: 42px; }
@media (max-width: 700px) {
.tf-head { align-items: flex-start; padding: 22px 20px; }
.tf-head h1 { font-size: 22px; }
.tf-required { margin-top: 3px; }
.tf-section { padding: 24px 20px; }
.tf-grid { grid-template-columns: 1fr; gap: 17px; }
.tf-full { grid-column: auto; }
.tf-preview { display: block; }
.tf-preview img { max-width: 100%; margin-bottom: 8px; }
.tf-reward { margin: 18px 20px 0; }
.tf-actions { padding: 18px 20px 24px; }
}
@media (max-width: 420px) {
.tf-head { display: block; }
.tf-required { display: block; margin-top: 12px; }
.tf-chips { gap: 6px; }
.tf-chips span { min-width: 52px; padding: 8px 11px; }
.tf-actions .bbs-btn { flex: 1; }
}
/* 온라인 과외 역할·인증 배지 */
.tutor-role-badge {
display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 2px 9px 2px 3px;
border: 1px solid transparent; border-radius: 999px; font-size: 11px; line-height: 1; white-space: nowrap;
box-shadow: 0 2px 7px rgb(30 41 59 / .08); vertical-align: middle;
}
.tutor-role-badge img { display: block; width: 25px; height: 25px; object-fit: contain; }
.tutor-role-badge strong { font-size: 11px; font-weight: 800; letter-spacing: -.02em; }
.tutor-role-badge.is-teacher { border-color: #d5b45b; background: linear-gradient(135deg,#fffdf5,#fff5cf); color: #6b4700; }
.tutor-role-badge.is-student { border-color: #c4b5fd; background: linear-gradient(135deg,#faf5ff,#eef2ff); color: #4c1d95; }
@media (max-width: 480px) {
.tutor-role-badge { padding-right: 7px; }
.tutor-role-badge img { width: 23px; height: 23px; }
}
/* ─────────────────────────────────────────────────────────────
* 글쓰기·글보기 액션 버튼 (2026-09-14)
*
* 옛 GIF 이미지 버튼과 인라인 style 로 찍던 파란 사각 버튼을 대체한다.
* 역할이 색과 형태로 바로 읽히도록 네 단계만 쓴다.
* primary = 저장·등록처럼 그 화면의 주 행동 (채움 + 그림자)
* 기본 = 이동·보조 행동 (흰 배경 + 테두리)
* soft = 정보성 이동 (연한 브랜드 톤)
* danger = 되돌릴 수 없는 행동 (평소 테두리, 올리면 빨강 채움)
* ghost = 취소처럼 물러나는 행동 (테두리 없음)
* ───────────────────────────────────────────────────────────── */
.bbs-btn-primary:active { background: var(--color-primary-active); border-color: var(--color-primary-active); box-shadow: var(--shadow-sm); }
/* soft — 다른글보기처럼 "더 보여주는" 이동 */
.bbs-btn-soft { background: var(--color-primary-soft); color: var(--color-primary-soft-fg); border-color: transparent; }
.bbs-btn-soft:hover { background: var(--color-primary-soft); color: var(--color-primary); border-color: var(--color-primary); }
.bbs-page a.bbs-btn-soft, .bbs-page a.bbs-btn-soft:link, .bbs-page a.bbs-btn-soft:visited { color: var(--color-primary-soft-fg); }
.bbs-page a.bbs-btn-soft:hover { color: var(--color-primary); }
/* ghost — 취소. 눌러도 되지만 눈에 먼저 띄면 안 되는 자리 */
.bbs-btn-ghost { background: transparent; border-color: transparent; color: var(--color-fg-muted); }
.bbs-btn-ghost:hover { background: var(--color-surface-2); color: var(--color-fg); border-color: transparent; }
/* danger — 올리면 빨강으로 채워 "지운다"는 걸 분명히 한다 */
.bbs-btn-danger:hover { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.bbs-page a.bbs-btn-danger, .bbs-page a.bbs-btn-danger:link, .bbs-page a.bbs-btn-danger:visited { color: var(--color-danger); }
.bbs-page a.bbs-btn-danger:hover { color: #fff; }
/* 작은 크기 — 글쓴이 옆 액션 묶음 */
.bbs-btn-sm { height: 30px; padding: 0 var(--space-3); font-size: var(--fs-xs); gap: var(--space-1); }
.bbs-btn-sm .bbs-btn-icon { width: 13px; height: 13px; }
/* 글보기 상단 액션은 이제 SVG 버튼이라 옛 이미지 높이 규칙을 덮는다 */
.bbs-detail-actions .bbs-btn img { height: auto; }
/* ── 글쓰기 폼 필드 ───────────────────────────────────────
* 예전엔 라벨·입력칸마다 인라인 style 로 14px/#d4d4d4 를 박아 넣어
* 버튼·카드와 톤이 맞지 않았다. 토큰으로 통일한다. */
.bbs-field { margin-bottom: var(--space-5); }
.bbs-formrow {
display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
margin-bottom: var(--space-5);
}
.bbs-input-block { width: 100%; height: 42px; }
.bbs-field textarea { width: 100%; font-family: inherit; }
/* 체크박스 — 라벨 전체가 누르는 영역 */
.bbs-check {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: 0 var(--space-3); height: 38px;
border: 1px solid var(--color-border); border-radius: var(--radius-full);
font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-fg-muted);
cursor: pointer; white-space: nowrap;
transition: border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
}
.bbs-check:hover { border-color: var(--color-border-strong); color: var(--color-fg); }
.bbs-check input { accent-color: var(--color-primary); margin: 0; cursor: pointer; }
.bbs-check:has(input:checked) { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary-soft-fg); }
.bbs-check:focus-within { outline: 3px solid var(--color-primary-soft); outline-offset: 2px; }
/* ── 파일 올리기 ──────────────────────────────────────────
* 네이티브 file 입력은 브라우저마다 생김새가 달라 화면과 겉돈다.
* 입력은 숨기고 label 을 버튼으로 세워, 고른 파일명을 옆에 적는다.
* JS 가 죽어도 label 클릭으로 파일 선택은 그대로 된다. */
.bbs-fileset { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-6) 0 var(--space-2); }
.bbs-field-label {
display: block; margin-bottom: var(--space-2);
font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-fg);
}
.bbs-file {
display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
padding: var(--space-3) var(--space-4);
background: var(--color-bg);
border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg);
transition: border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
}
.bbs-file:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.bbs-file:focus-within { border-color: var(--color-primary); background: var(--color-bg); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.bbs-file.is-filled { border-style: solid; border-color: var(--color-primary); background: var(--color-bg); }
/* 입력은 화면에서만 숨긴다 (display:none 은 일부 보조기기에서 초점을 잃는다) */
.bbs-file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bbs-file-input:focus-visible + .bbs-file-btn { outline: 3px solid var(--color-primary-soft); outline-offset: 2px; }
.bbs-file-btn { cursor: pointer; }
.bbs-file-name {
min-width: 0; flex: 1 1 12rem;
font-size: var(--fs-sm); color: var(--color-fg-subtle);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bbs-file.is-filled .bbs-file-name { color: var(--color-fg); font-weight: var(--fw-medium); }
/* 이미 올라가 있는 첨부 — 파일명 칩 + 삭제 체크박스 */
.bbs-file-old {
display: inline-flex; align-items: center; gap: var(--space-2);
max-width: 100%; padding: var(--space-1) var(--space-3);
background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full);
font-size: var(--fs-xs); color: var(--color-fg-muted);
}
.bbs-file-old .bbs-btn-icon { width: 13px; height: 13px; color: var(--color-fg-subtle); }
.bbs-file-old-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-fg); }
.bbs-file-del { display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer; color: var(--color-danger); white-space: nowrap; }
.bbs-file-del input { accent-color: var(--color-danger); margin: 0; cursor: pointer; }
/* 검색결과 표의 댓글 수 — fnColorOfDate 가 찍는 조각을 감싼다 */
.bbs-comment-count { margin-left: var(--space-1); font-size: var(--fs-xs); color: var(--color-primary); font-weight: var(--fw-semibold); }
/* ── 폼 하단 액션바 ───────────────────────────────────────── */
.bbs-actionbar {
display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2);
margin-top: var(--space-6); padding-top: var(--space-5);
border-top: 1px solid var(--color-border);
}
.bbs-actionbar .spacer { flex: 1 1 auto; }
/* ── 글보기 맨 아래 목록/글쓰기 줄 ─────────────────────────── */
.bbs-viewbar {
display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
margin: var(--space-6) 0 var(--space-2);
}
.bbs-viewbar .spacer { flex: 1 1 auto; }
@media (max-width: 640px) {
.bbs-actionbar .bbs-btn, .bbs-viewbar .bbs-btn { flex: 1 1 auto; }
}