/* =============================================
   리앤양 커뮤니티 게시판 — Apple dark / DC style
   ============================================= */
:root {
  --la-bg:       #fff;
  --la-surface:  #f5f5f7;
  --la-surface2: #e8e8ed;
  --la-border:   rgba(0,0,0,0.08);
  --la-border2:  rgba(0,0,0,0.14);
  --la-text:     #1d1d1f;
  --la-text2:    #6e6e73;
  --la-text3:    #aeaeb2;
  --la-accent:   #c93720;
  --la-good:     #28a745;
  --la-bad:      #dc3545;
  --la-font:     -apple-system, 'SF Pro Display', 'Pretendard Variable', 'Pretendard', sans-serif;
  --la-radius:   12px;
  --la-radius-sm:8px;
}

/* 게시판 페이지 풀와이드: APMS at-container 제약 제거 */
.at-container { max-width: 100% !important; padding: 0 !important; margin: 0 auto !important; }
/* 유튜브 사이드 윙 + 사이드바 숨기기 */
.at-container.wing-wrap { display: none !important; }
.sidebar-wing { display: none !important; }
.sidebar-head { display: none !important; }
#sidebar-content { display: none !important; }
#sidebar-box-mask { display: none !important; }

.la-comm-wrap { background: #fff; min-height: 60vh; font-family: var(--la-font); color: var(--la-text); }
.la-comm-container { max-width: 100%; margin: 0 auto; padding: 0 24px; }

/* 헤더 */
.la-comm-header { background: var(--la-surface); border-bottom: 1px solid var(--la-border2); padding: 32px 0; }
.la-comm-header-inner { display: flex; align-items: center; justify-content: space-between; }
.la-comm-title { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; }
.la-comm-sub { font-size: 1rem; color: var(--la-text3); margin: 0; }

/* 레이아웃 */
.la-comm-layout { padding: 24px 20px; }

/* 인기글 바 */
.la-hot-list { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--la-surface); border-radius: var(--la-radius-sm); margin-bottom: 12px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; border: 1px solid var(--la-border2); }
.la-hot-list::-webkit-scrollbar { display: none; }
.la-hot-label { font-size: .7rem; font-weight: 700; background: var(--la-accent); color: #fff; padding: 2px 7px; border-radius: 20px; flex-shrink: 0; }
.la-comm-wrap .la-hot-item { font-size: .8125rem; color: var(--la-text2) !important; text-decoration: none; transition: color .15s; }
.la-comm-wrap .la-hot-item:hover { color: var(--la-text) !important; }
.la-hot-good { color: var(--la-good); font-size: .75rem; margin-left: 4px; }

/* 테이블 */
.la-comm-table { width: 100%; border-collapse: collapse; border-radius: var(--la-radius); overflow: hidden; background: var(--la-surface); }
.la-comm-table thead { background: var(--la-surface2); }
.la-comm-table th { padding: 12px 16px; font-size: 1rem; font-weight: 600; color: var(--la-text3); text-align: center; border-bottom: 1px solid var(--la-border2); white-space: nowrap; }
.la-th-subject { text-align: left !important; }
.la-comm-table tr { border-bottom: 1px solid var(--la-border); transition: background .15s; }
.la-comm-table tbody tr:hover { background: var(--la-surface2); }
.la-comm-table tr:last-child { border-bottom: none; }
.la-comm-table td { padding: 14px 16px; font-size: 1.0625rem; color: var(--la-text2); text-align: center; vertical-align: middle; }
.la-tr-hot { background: rgba(201,55,32,.06); }

/* 컬럼 너비 */
.la-th-num { width: 60px; } .la-th-author { width: 90px; } .la-th-date { width: 70px; } .la-th-views { width: 60px; } .la-th-good { width: 55px; }
@media (max-width: 600px) { .la-th-author, .la-td-author, .la-th-views, .la-td-views { display: none; } }

/* 제목 셀 */
.la-td-subject { text-align: left; max-width: 0; }
.la-comm-wrap .la-subject-link { display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--la-text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; font-size: 1.0625rem; }
.la-comm-wrap .la-subject-link:hover { color: var(--la-accent) !important; }
.la-thumb-indicator { width: 8px; height: 8px; border-radius: 2px; background: var(--la-text3); flex-shrink: 0; }
.la-reply-cnt { color: var(--la-accent); font-size: .8125rem; flex-shrink: 0; }
.la-new-badge { font-size: .6rem; font-weight: 700; background: var(--la-good); color: #000; padding: 1px 5px; border-radius: 3px; flex-shrink: 0; }
.la-hot-badge { font-size: .6rem; font-weight: 700; background: var(--la-accent); color: #fff; padding: 1px 5px; border-radius: 3px; flex-shrink: 0; }
.la-notice-badge { font-size: .7rem; font-weight: 700; background: var(--la-surface2); color: var(--la-text2); padding: 2px 7px; border-radius: 4px; }
.la-good-num { color: var(--la-good); font-weight: 600; }
.la-empty-cell { text-align: center; padding: 60px; color: var(--la-text3); }

/* 하단 페이징+검색 */
.la-comm-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 16px; }
.la-search-form { display: flex; gap: 6px; align-items: center; }
.la-search-sel { background: var(--la-surface2); border: 1px solid var(--la-border2); color: var(--la-text2); padding: 8px 12px; border-radius: var(--la-radius-sm); font-size: 1rem; }
.la-search-input { background: var(--la-surface2); border: 1px solid var(--la-border2); color: var(--la-text); padding: 8px 14px; border-radius: var(--la-radius-sm); font-size: 1rem; width: 180px; outline: none; }
.la-search-input:focus { border-color: var(--la-accent); }
.la-search-btn { background: var(--la-accent); color: #fff; border: none; padding: 9px 18px; border-radius: var(--la-radius-sm); font-size: 1rem; cursor: pointer; transition: opacity .2s; }
.la-search-btn:hover { opacity: .85; }

/* 글쓰기 버튼 */
.la-comm-wrap .la-write-btn { display: inline-block; padding: 10px 24px; background: var(--la-accent); color: #fff !important; border-radius: var(--la-radius-sm); font-size: 1rem; font-weight: 600; text-decoration: none; transition: opacity .2s; white-space: nowrap; }
.la-comm-wrap .la-write-btn:hover { opacity: .85; }

/* View */
.la-view-container { max-width: 820px; margin: 0 auto; padding: 32px 20px 80px; }
.la-comm-article { background: var(--la-surface); border-radius: var(--la-radius); padding: 28px 28px 20px; margin-bottom: 16px; }
.la-view-header { border-bottom: 1px solid var(--la-border2); padding-bottom: 16px; margin-bottom: 24px; }
.la-view-title { font-size: 1.5rem; font-weight: 700; color: var(--la-text); margin: 0 0 10px; line-height: 1.35; }
.la-view-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: .8125rem; color: var(--la-text3); align-items: center; }
.la-view-author { color: var(--la-text2); font-weight: 500; }
.la-view-sep { opacity: .4; }
.la-comm-body { font-size: .9375rem; line-height: 1.8; color: var(--la-text); padding-bottom: 24px; word-break: break-word; }
.la-comm-body img { max-width: 100%; border-radius: var(--la-radius-sm); margin: 8px 0; }
.la-comm-body a { color: var(--la-accent); }
.la-view-imgs { padding: 12px 0; }

/* 추천/비추 */
.la-vote-wrap { display: flex; justify-content: center; gap: 16px; padding: 20px 0 16px; border-top: 1px solid var(--la-border); }
.la-vote-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 28px; border-radius: 40px; border: 1px solid var(--la-border2); background: var(--la-surface2); color: var(--la-text2); font-size: .9375rem; cursor: pointer; transition: all .2s; }
.la-vote-btn svg { width: 20px; height: 20px; }
.la-vote-good:hover, .la-vote-good.voted { background: rgba(48,209,88,.12); border-color: var(--la-good); color: var(--la-good); }
.la-vote-nogood:hover, .la-vote-nogood.voted { background: rgba(255,69,58,.12); border-color: var(--la-bad); color: var(--la-bad); }

/* 이전/다음 */
.la-view-nav { background: var(--la-surface); border-radius: var(--la-radius); margin-bottom: 16px; overflow: hidden; }
.la-comm-wrap .la-nav-item { display: flex; align-items: center; gap: 12px; padding: 14px 20px; text-decoration: none; border-bottom: 1px solid var(--la-border); transition: background .15s; color: inherit !important; }
.la-comm-wrap .la-nav-item:last-child { border-bottom: none; }
.la-comm-wrap .la-nav-item:hover { background: var(--la-surface2); }
.la-nav-dir { font-size: .75rem; color: var(--la-text3); min-width: 40px; flex-shrink: 0; }
.la-nav-subject { font-size: .9rem; color: var(--la-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-comm-wrap .la-nav-item:hover .la-nav-subject { color: var(--la-text); }

/* View 버튼 */
.la-view-actions { display: flex; gap: 8px; padding-top: 12px; flex-wrap: wrap; }
.la-btn { display: inline-flex; align-items: center; padding: 7px 16px; border-radius: var(--la-radius-sm); font-size: .8125rem; text-decoration: none; transition: all .2s; cursor: pointer; border: none; font-family: var(--la-font); }
.la-btn-primary { background: var(--la-accent); color: #fff; }
.la-btn-secondary { background: var(--la-surface2); color: var(--la-text2); }
.la-btn-ghost { border: 1px solid var(--la-border2); color: var(--la-text3); background: transparent; }
.la-btn-danger { color: var(--la-bad); background: rgba(255,69,58,.1); }
.la-btn:hover { opacity: .8; }

/* 댓글 */
.la-comments { background: var(--la-surface); border-radius: var(--la-radius); padding: 24px 24px 16px; }
.la-comment-title { font-size: 1rem; font-weight: 600; color: var(--la-text); margin-bottom: 16px; }
.la-comment-cnt { color: var(--la-accent); }

/* 관리자 선택 버튼 (선택삭제/복사/이동) */
.la-comm-wrap .btn_bo_adm { display: flex; flex-direction: row; gap: 8px; list-style: none; padding: 0; margin: 16px 0 0; flex-wrap: wrap; }
.la-comm-wrap .btn_bo_adm li { margin: 0; }
.la-comm-wrap .btn_bo_adm input[type="submit"] {
  background: #c93720;
  color: #fff;
  border: none;
  padding: 9px 20px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .2s;
  letter-spacing: -0.01em;
}
.la-comm-wrap .btn_bo_adm input[type="submit"]:hover { opacity: .85; }

/* 페이징 공통 */
.la-paging { text-align: center; padding: 20px 0; }
.la-paging a, .la-paging strong { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; margin: 0 2px; border-radius: 8px; font-size: .8125rem; text-decoration: none; transition: all .15s; }
.la-comm-wrap .la-paging a { color: var(--la-text3) !important; border: 1px solid var(--la-border2); }
.la-comm-wrap .la-paging a:hover { border-color: var(--la-text2); color: var(--la-text) !important; }
.la-paging strong { background: var(--la-accent); color: #fff; border: 1px solid var(--la-accent); font-weight: 600; }

/* 쓰기 폼 — gnuboard 기본 write.php 쓰되 색 오버라이드 */
#bo_write { color: var(--la-text); }
#bo_write .bo_w_tbl td { background: transparent; border-color: var(--la-border2); color: var(--la-text); }
#bo_write input[type=text], #bo_write textarea { background: var(--la-surface2); border: 1px solid var(--la-border2); color: var(--la-text); border-radius: var(--la-radius-sm); padding: 8px 12px; }
#bo_write input[type=text]:focus, #bo_write textarea:focus { border-color: var(--la-accent); outline: none; }