/*
* 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;
}
/* ─────────────────────────────────────────────────────────────
* 페이지 래퍼 — 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-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);
}
.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); }