/* === CSS Variables === */
:root {
  --comm-primary: #ff5d1a;
  --comm-primary-light: #fff5f0;
  --comm-bg: #f2f4f8;
  --comm-white: #ffffff;
  --comm-border: #f2f2f2;
  --comm-text: #1b1b1b;
  --comm-text-sub: #5b5b5b;
  --comm-text-muted: #999;
  --comm-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* === Layout Wrappers === */
#community-view-wrap,
#community-reg-wrap {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 70px);
  font-family: 'Freesentation', 'Noto Sans KR', sans-serif;
  color: var(--comm-text);
}

/* ============================================================
   HERO
   ============================================================ */
.comm-hero {
  background: var(--comm-bg);
  padding: 54px 0 16px;
  width: 100%;
}

.comm-hero-inner {
  max-width: 1360px;
  margin: 0 auto;
}

.comm-hero-title {
  font-size: 49px;
  font-weight: 900;
  color: var(--comm-primary);
  line-height: 1.15;
  margin: 0 0 10px;
  letter-spacing: -0.5px;
}

.comm-hero-sub {
  font-size: 20px;
  font-weight: 500;
  color: var(--comm-text-sub);
  margin: 0;
  line-height: 1.5;
}

/* ============================================================
   FILTER ROW (공통 – view)
   ============================================================ */
.comm-content-wrap,
.comm-hero-inner {
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 40px;
}

.comm-hero-inner {
  padding-left: 52px;
  padding-right: 52px;
}

.comm-content-wrap {
  padding-top: 36px;
  padding-bottom: 80px;
}

.comm-view-filter-row {
  background: var(--comm-bg);
  padding: 20px 0 24px;
  border-bottom: 1px solid var(--comm-border);
}

.comm-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 0;
}

.faq-filter-wrap {
  overflow: visible;
  position: relative;
  z-index: 1;
}

.comm-list-filter-section {
  overflow: visible;
}

.comm-filter-action-group {
  justify-content: flex-end;
}

/* ============================================================
   SORT TABS (view 페이지 공통)
   ============================================================ */
.comm-sort-tab {
  /* pb-tab에서 font-size:16px, font-weight:700, padding:10px 22px 상속 */
  background: var(--comm-white);
  color: var(--comm-text);
  transition: background 0.18s, color 0.18s;
}

.comm-sort-tab:hover {
  color: var(--comm-primary);
}

.comm-sort-tab.active {
  background: var(--comm-primary);
  color: var(--comm-white);
}

/* ============================================================
   SEARCH AREA
   ============================================================ */
.comm-search-area {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Dropdown (공통) */
.comm-sel-wrap {
  position: relative;
}

.comm-sel-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  border-radius: 30px;
  border: 1.5px solid #e0e0e0;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  color: #4a4a4a;
  cursor: pointer;
  height: 44px;
  white-space: nowrap;
  user-select: none;
  transition: border-color 0.2s;
}

.comm-sel-btn:hover {
  border-color: var(--comm-primary);
  color: var(--comm-primary);
}

.comm-sel-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 120px;
  background: var(--comm-white);
  border: 1px solid var(--comm-border);
  border-radius: 10px;
  box-shadow: var(--comm-shadow);
  z-index: 2;
  display: none;
  overflow: hidden;
}

.comm-sel-wrap.open .comm-sel-list {
  display: block;
}

.comm-sel-item {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--comm-text);
  cursor: pointer;
  transition: background 0.15s;
}

.comm-sel-item:hover,
.comm-sel-item.selected {
  background: var(--comm-primary-light);
  color: var(--comm-primary);
}

/* 검색어 입력 */
.comm-kw-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 30px;
  height: 44px;
  transition: border-color 0.2s;
}

.comm-kw-wrap:focus-within {
  border-color: var(--comm-primary);
}

.comm-kw-wrap input {
  border: none;
  background: transparent;
  font-size: 15px;
  width: 220px;
  padding: 0 46px 0 18px;
  height: 100%;
  outline: none;
  color: var(--comm-text);
}

.comm-search-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--comm-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.18s;
}

.comm-search-icon:hover {
  color: var(--comm-primary);
}

.comm-kw-wrap input:focus {
  outline: none;
}

.comm-kw-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: none;
  line-height: 1;
}

.comm-kw-clear.visible {
  display: inline-flex;
  align-items: center;
}

/* 검색하기 버튼 */
.comm-search-btn-new {
  padding: 0 22px;
  height: 38px;
  border-radius: 30px;
  border: 2px solid var(--comm-primary);
  background: var(--comm-primary);
  color: var(--comm-white);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.18s;
}

.comm-search-btn-new:hover {
  opacity: 0.88;
}

/* ============================================================
   POPULAR CARDS
   ============================================================ */
.comm-popular-section {
  position: relative;
  margin: 0 0 20px;
  padding: 0 34px;
}

.comm-popular-grid {
  display: flex;
  gap: 25px;
  column-gap: 25px; /* JS getComputedStyle().columnGap 으로 읽기 위해 명시 */
}

.comm-popular-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 12px 12px 14px;
  margin: 0 -12px;
}

.comm-popular-viewport::-webkit-scrollbar {
  display: none;
}

.comm-popular-card {
  position: relative;
  flex: 0 0 calc((100% - 40px) / 3);
  min-width: 0;
  padding-top: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  border: 0;
  transition: transform 0.18s;
}

.comm-popular-card:hover {
  transform: translateY(-2px);
}

.comm-popular-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--comm-bg);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.comm-popular-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comm-popular-card-top {
  position: relative;
  z-index: 1;
  min-height: 72px;
  border-radius: 13px;
  padding: 10px 14px 36px;
  background: #fff;
  box-shadow: 0 0 10.9px rgba(0, 0, 0, 0.07);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comm-popular-card-cat {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  max-width: calc(100% - 30px);
  min-height: 32px;
  padding: 0 24px;
  border-radius: 12px;
  background: var(--comm-primary);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.comm-popular-card-inner {
  position: relative;
  z-index: 2;
  min-height: 184px;
  margin-top: -30px;
  padding: 24px 18px 12px;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 0 10.9px rgba(0, 0, 0, 0.11);
  display: flex;
  flex-direction: column;
}

.comm-popular-card-body {
  padding: 0 0 12px;
  margin-bottom: 0;
  border-bottom: none;
  flex: 1;
}

.comm-popular-card-title {
  font-size: 19px;
  font-weight: 700;
  color: #242424;
  line-height: 1.45;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(19px * 1.45 * 2); /* 2줄 고정 높이로 desc 위치 일관성 유지 */
}

.comm-popular-card-desc {
  min-height: 58px;
  color: #777;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.comm-popular-card-meta {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 13px;
  color: #999;
}

.comm-popular-card-meta span,
.comm-popular-card-top .comm-popular-meta-date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-size: 13px;
  color: #999;
}

.comm-popular-card-meta span::before,
.comm-popular-card-top .comm-popular-meta-date::before,
.comm-title-meta span::before {
  content: "";
  display: inline-block;
  background-color: currentColor;
  opacity: 0.85;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  vertical-align: middle;
  margin-right: 2px;
}

.comm-popular-card-meta span::before,
.comm-popular-card-top .comm-popular-meta-date::before {
  width: 17px;
  height: 17px;
}

.comm-title-meta span::before {
  width: 12px;
  height: 12px;
}

.comm-popular-meta-hit::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 5c5.5 0 9.5 5.1 9.8 5.5.3.4.3.9 0 1.3C21.5 12.1 17.5 17 12 17s-9.5-4.9-9.8-5.2a1 1 0 0 1 0-1.3C2.5 10.1 6.5 5 12 5Zm0 2c-3.7 0-6.7 2.8-7.7 4.1C5.3 12.3 8.3 15 12 15s6.7-2.7 7.7-3.9C18.7 9.8 15.7 7 12 7Zm0 1.5a2.7 2.7 0 1 1 0 5.4 2.7 2.7 0 0 1 0-5.4Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 5c5.5 0 9.5 5.1 9.8 5.5.3.4.3.9 0 1.3C21.5 12.1 17.5 17 12 17s-9.5-4.9-9.8-5.2a1 1 0 0 1 0-1.3C2.5 10.1 6.5 5 12 5Zm0 2c-3.7 0-6.7 2.8-7.7 4.1C5.3 12.3 8.3 15 12 15s6.7-2.7 7.7-3.9C18.7 9.8 15.7 7 12 7Zm0 1.5a2.7 2.7 0 1 1 0 5.4 2.7 2.7 0 0 1 0-5.4Z'/%3E%3C/svg%3E");
}

.comm-popular-meta-date::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1.5A2.5 2.5 0 0 1 22 6.5v12A2.5 2.5 0 0 1 19.5 21h-15A2.5 2.5 0 0 1 2 18.5v-12A2.5 2.5 0 0 1 4.5 4H6V3a1 1 0 0 1 1-1Zm13 8H4v8.5c0 .3.2.5.5.5h15c.3 0 .5-.2.5-.5V10ZM4.5 6a.5.5 0 0 0-.5.5V8h16V6.5a.5.5 0 0 0-.5-.5h-15Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1.5A2.5 2.5 0 0 1 22 6.5v12A2.5 2.5 0 0 1 19.5 21h-15A2.5 2.5 0 0 1 2 18.5v-12A2.5 2.5 0 0 1 4.5 4H6V3a1 1 0 0 1 1-1Zm13 8H4v8.5c0 .3.2.5.5.5h15c.3 0 .5-.2.5-.5V10ZM4.5 6a.5.5 0 0 0-.5.5V8h16V6.5a.5.5 0 0 0-.5-.5h-15Z'/%3E%3C/svg%3E");
}

.comm-popular-meta-reply::before {
  mask-image: url("/industry/img/icon/speech_bubble-24341295d4a409eb6299799f99a9ae54.svg");
  -webkit-mask-image: url("/industry/img/icon/speech_bubble-24341295d4a409eb6299799f99a9ae54.svg");
}

.comm-popular-meta-like::before {
  mask-image: url("/industry/img/favicon/like-33ba0a4dbf02939508cdecc65d12926f.png");
  -webkit-mask-image: url("/industry/img/favicon/like-33ba0a4dbf02939508cdecc65d12926f.png");
}

.comm-popular-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 28px;
  height: 60px;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #bbb;
  font-size: 44px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, opacity 0.2s;
}

.comm-popular-nav:hover {
  color: var(--comm-primary);
}

.comm-popular-prev {
  left: 0;
}

.comm-popular-next {
  right: 0;
}

.comm-popular-section.is-start .comm-popular-prev,
.comm-popular-section.is-end .comm-popular-next,
.comm-popular-section.is-static .comm-popular-nav {
  opacity: 0.25;
  pointer-events: none;
}


/* ============================================================
   TABLE AREA (LIST PAGE)
   ============================================================ */
/* 커뮤니티 목록: faq-content-left를 flex column으로 만들어 페이지네이션을 항상 아래에 고정 */
.comm-list-main .faq-content-left {
  display: flex;
  flex-direction: column;
  min-height: 70vh;
}

.comm-table-area {
  flex: 1;
  margin-bottom: 24px;
}


.comm-table-wrap {
  overflow-x: auto;
}

.comm-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--comm-text);
  min-width: 600px;
}

.comm-table th {
  padding: 13px 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--comm-text);
  background: #fafafa;
  border-bottom: 1px solid #e8e8e8;
  text-align: center;
  white-space: nowrap;
}

.comm-table td {
  padding: 13px 10px;
  font-size: 16px;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
  text-align: center;
  vertical-align: middle;
}

/* 제목 열 (첫 번째 열) 좌측 정렬 */
.comm-table td:nth-child(1) {
  text-align: left;
  font-weight: 500;
}

/* 제목 셀 내부 레이아웃 */
.comm-title-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.comm-table-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 모바일에서 제목 셀 하단에 표시할 meta 정보 (조회·추천·답변·날짜) */
.comm-title-meta {
  display: none;
}

/* 공통 카테고리 배지 (데스크톱·모바일 공용) */
.comm-cat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--comm-primary-light);
  color: var(--comm-primary);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.4;
}

.comm-post-tr {
  cursor: pointer;
  transition: background 0.12s;
}

.comm-post-tr:hover {
  background: #fdf8f5;
}

.comm-noti-tr {
  background: #fff8f5;
  cursor: pointer;
}

.comm-noti-tr:hover {
  background: #fff2ea;
}

.comm-noti-tr .comm-table-title {
  color: #ff601e;
  font-weight: 600;
}

.comm-noti-badge {
  background: var(--comm-primary);
  color: #fff;
}

.board-empty-div {
  text-align: center;
  padding: 60px 0;
  font-size: 15px;
  color: var(--comm-text-muted);
  display: none;
}

.comm-loading {
  text-align: center;
  padding: 40px 0;
  font-size: 14px;
  color: var(--comm-text-muted);
}

.page-list.comm-pagination {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}


/* mob-hide-td: 더 이상 사용하지 않으나 다른 페이지 호환을 위해 유지 */
.mob-hide-td {}

/* ============================================================
   LIST FOOTER (페이지네이션 + 버튼)
   ============================================================ */
.comm-list-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  flex-wrap: wrap;
  gap: 12px;
}

.comm-btn-area {
  display: flex;
  gap: 8px;
}

/* comm-write-btn-new, comm-notice-write-btn → pb-write-btn / pb-outline-btn 위임
   (HTML에서 pb-write-btn/pb-outline-btn과 함께 사용, 여기선 min-width만 조정) */
.comm-write-btn-new {
  min-width: 90px;
}

.comm-notice-write-btn {
  min-width: 90px;
}

/* ============================================================
   DETAIL PAGE – BODY LAYOUT
   (faq-main-container faq-container로 대체됨; 하위 호환 유지)
   ============================================================ */
.comm-view-body {
  display: flex;
  max-width: 1520px;
  margin: 0 auto;
  padding: 36px 40px 80px;
  gap: 28px;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
}

/* community-view-wrap 내 faq-main-container 간격 조정 */
#community-view-wrap .faq-main-container {
  gap: 28px;
  align-items: flex-start;
}

/* ============================================================
   CATEGORY SIDEBAR
   ============================================================ */
.comm-cat-sidebar.faq-sidebar {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 300px);
  overflow: auto;
  border: 1px solid var(--faq-border-card);
  border-radius: var(--faq-radius-card);
  background: #fff;
  padding: 14px;
  box-shadow: var(--faq-shadow-card-meta);
}

.comm-cat-sidebar {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 300px);
  overflow: auto;
  background: #fff;
  border: 1px solid var(--faq-border-card);
  border-radius: var(--faq-radius-card);
  box-shadow: var(--faq-shadow-card-meta);
  padding: 14px;
}

.comm-cat-sidebar-head {
  cursor: default;
  font-weight: 700;
  font-size: 17px;
  color: var(--faq-primary);
  outline: 0;
  padding: 4px 0 8px;
  text-align: left;
  border-bottom: none;
  background: transparent;
}

.comm-cat-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: none;
  overflow: visible;
}

.comm-cat-list li {
  margin: 0;
  padding: 0;
  border-radius: 0;
  overflow: visible;
}

.comm-cat-item {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px;
  border: none;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 0;
  color: #333;
  background: #fff;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: var(--faq-transition);
}

.comm-cat-list li:last-child .comm-cat-item {
  border-bottom: none;
}

.comm-cat-item:hover {
  color: var(--faq-primary);
  background: rgba(255, 93, 26, 0.03);
}

.comm-cat-item.active {
  background: rgba(255, 93, 26, 0.05);
  color: var(--faq-primary);
  font-weight: 700;
}

.comm-cat-name {
  display: block;
  flex: 1;
  min-width: 0;
  font-size: inherit;
  font-weight: inherit;
  color: #333;
  line-height: 1.4;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comm-cat-item.active .comm-cat-name {
  color: var(--faq-primary);
  font-weight: 700;
}

.comm-cat-item:hover .comm-cat-name {
  color: var(--faq-primary);
}

.comm-cat-count-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 0;
}

.comm-cat-count {
  font-size: 12px;
  font-weight: 500;
  color: #999;
  flex-shrink: 0;
  min-width: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  text-align: right;
  line-height: inherit;
}

.comm-cat-item.active .comm-cat-count,
.comm-cat-item:hover .comm-cat-count {
  background: transparent;
  color: var(--faq-primary);
  font-weight: 600;
}

.comm-cat-arrow {
  font-size: 16px;
  color: #ccc;
  flex-shrink: 0;
  line-height: inherit;
  transition: var(--faq-transition);
}

.comm-cat-item.active .comm-cat-arrow,
.comm-cat-item:hover .comm-cat-arrow {
  color: var(--faq-primary);
}

/* ============================================================
   POST DETAIL (MAIN)
   ============================================================ */
.comm-view-main {
  flex: 1;
  min-width: 0;
}

.comm-empty-msg {
  text-align: center;
  padding: 80px 0;
  font-size: 15px;
  color: var(--comm-text-muted);
}

.comm-post {
  background: transparent;
  border-radius: 0;
  border: none;
  padding: 0 0 18px;
  margin-bottom: 28px;
}

.comm-post-tag {
  display: inline-block;
  padding: 7px 18px;
  background: var(--comm-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 6px;
  margin-bottom: 28px;
  line-height: 1;
}

.comm-post-title {
  font-size: 23px;
  font-weight: 700;
  color: var(--comm-text);
  line-height: 1.4;
  margin: 0 0 0;
  word-break: keep-all;
}

.comm-post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  padding: 16px 20px;
  border-top: 1.5px solid #222;
  border-bottom: 1.5px solid #222;
  margin-top: 28px;
  margin-bottom: 36px;
}

.comm-meta-item {
  display: flex;
  align-items: center;
  gap: 18px;
}

.comm-post-meta .comm-meta-item:nth-of-type(3) {
  margin-left: auto;
}

.comm-meta-label {
  font-size: 14px;
  color: #111;
  font-weight: 700;
}

.comm-meta-value {
  font-size: 15px;
  color: #111;
  font-weight: 500;
}

.comm-meta-sep {
  display: none;
}

.comm-post-body {
  min-height: 110px;
  margin-bottom: 34px;
  padding: 0 12px;
}

.comm-post-content {
  font-size: 15px;
  line-height: 1.8;
  color: #111;
  word-break: keep-all;
}

/* 액션 버튼 영역 */
.comm-post-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 22px;
  border-top: 0;
  border-bottom: 1px solid #d9dde3;
}

.comm-action-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.comm-like-btn,
.comm-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  background: #fff;
  border: 1px solid #e3e3e3;
  cursor: pointer;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 15px;
  color: #222;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.comm-like-btn:hover,
.comm-reply-btn:hover {
  border-color: #ffd4c2;
  background: #fffaf7;
  color: var(--comm-primary);
}

.comm-like-icon {
  width: 20px;
  height: 20px;
}

.like-font-blue {
  color: #3b82f6;
}

.comm-action-sep {
  display: none;
}

.comm-action-right {
  display: flex;
  gap: 8px;
}

.comm-edit-btn {
  padding: 8px 18px;
  border-radius: 30px;
  border: 1px solid #ddd;
  background: var(--comm-white);
  font-size: 14px;
  color: var(--comm-text-sub);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.comm-edit-btn:hover {
  border-color: var(--comm-primary);
  color: var(--comm-primary);
}

.comm-delete-btn {
  padding: 8px 18px;
  border-radius: 30px;
  border: 1px solid #ddd;
  background: var(--comm-white);
  font-size: 14px;
  color: var(--comm-text-sub);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.comm-delete-btn:hover {
  border-color: #ef4444;
  color: #ef4444;
}

/* ============================================================
   REPLY SECTION
   ============================================================ */
.comm-reply-section {
  margin-bottom: 30px;
}

.comm-reply-header {
  font-size: 23px;
  font-weight: 700;
  color: #111;
  margin: 0 0 18px 8px;
}

.comm-reply-header span {
  color: var(--comm-primary);
}

/* 기존 reply-lv CSS 호환 */
.comm-view {
  background: var(--comm-white);
  border-radius: 12px;
  border: 1px solid #e0e4ea;
  padding: 42px 28px 28px;
  margin-bottom: 14px;
}

.comm-view.reply-lv-2 {
  margin-bottom: 8px;
}

.comm-view.reply-lv-3 {
  margin-left: 32px;
  margin-bottom: 8px;
}

/* 기존 comm-view-info 등 호환 */
.comm-view-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
  padding: 16px 20px;
  margin-bottom: 34px;
  border-top: 1.5px solid #222;
  border-bottom: 1.5px solid #222;
}

.comm-info-div-1,
.comm-info-div-2 {
  display: flex;
  gap: 16px;
}

.comm-info {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 14px;
}

.comm-info-left p {
  color: #111;
  margin: 0;
  font-weight: 700;
  white-space: nowrap;
}

.comm-info-right p {
  color: #111;
  margin: 0;
  font-weight: 500;
  white-space: nowrap;
}

.comm-view-content-div {
  margin-bottom: 40px;
  padding: 0 10px;
}

.comm-view-content {
  font-size: 15px;
  line-height: 1.8;
  color: #111;
}

.comm-view-sub-content-div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px 22px;
  border-top: 0;
  border-bottom: 1px solid #d9dde3;
}

.comm-view-sub-btn-div-1 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.like-div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
  font-size: 15px;
  color: #222;
  padding: 0 18px;
  border: 1px solid #e3e3e3;
  border-radius: 999px;
  background: #fff;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.like-div:hover {
  border-color: #ffd4c2;
  background: #fffaf7;
  color: var(--comm-primary);
}

.like-img-large {
  width: 20px;
  height: 20px;
}

.boundary-y {
  display: none;
}

.post-reply-btn-div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
  font-size: 15px;
  color: #222;
  padding: 0 18px;
  border: 1px solid #e3e3e3;
  border-radius: 999px;
  background: #fff;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.post-reply-btn-div:hover {
  border-color: #ffd4c2;
  background: #fffaf7;
  color: var(--comm-primary);
}

.comm-view-sub-btn-div-2 {
  display: flex;
  gap: 6px;
}

/* 답변 작성 영역 */
.comm-reply {
  margin-top: 12px;
}

.comm-reply textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  padding: 12px 14px;
  font-size: 14px;
  resize: vertical;
}

.comm-view-btn-div {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.comm-reply-btn-old,
.comm-reply .comm-reply-btn {
  padding: 8px 22px;
  border-radius: 30px;
  background: var(--comm-primary);
  color: var(--comm-white);
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.reply-content-error {
  color: #ef4444;
  font-size: 13px;
  margin-top: 4px;
}

/* ============================================================
   NEAR POSTS (이전/다음)
   ============================================================ */
.comm-near-posts {
  background: transparent;
  border-radius: 0;
  border: 0;
  border-top: 2px solid #222;
  margin: 40px 0 24px;
  overflow: visible;
}

.comm-near-post {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 0 20px;
  font-size: 15px;
  border-bottom: 1px solid #ececec;
  gap: 26px;
}

.comm-near-post:last-child {
  border-bottom: none;
}

.comm-near-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-weight: 700;
  color: #111;
  font-size: 14px;
  min-width: 100px;
}

.comm-near-arrow {
  font-size: 18px;
  color: #cfcfcf;
  font-weight: 300;
  line-height: 1;
}

.comm-near-title {
  flex: 1;
  min-width: 0;
  color: #333;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.15s;
  font-size: 15px;
  font-weight: 500;
}

.comm-near-title:hover {
  color: var(--comm-primary);
}

.comm-near-empty {
  flex: 1;
  min-width: 0;
  color: #aaa;
  font-size: 15px;
  font-weight: 500;
}

/* ============================================================
   VIEW FOOTER
   ============================================================ */
.comm-view-footer {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.comm-list-btn-new {
  padding: 11px 32px;
  border-radius: 30px;
  border: 1px solid #ddd;
  background: var(--comm-white);
  font-size: 15px;
  color: var(--comm-text-sub);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.comm-list-btn-new:hover {
  border-color: var(--comm-primary);
  color: var(--comm-primary);
}

/* ============================================================
   WRITE / EDIT PAGE
   ============================================================ */
.comm-reg-content-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 40px 80px;
  width: 100%;
  box-sizing: border-box;
}

.comm-reg-field {
  margin-bottom: 28px;
}

.comm-reg-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--comm-text);
  margin-bottom: 10px;
}

.comm-reg-input {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 15px;
  color: var(--comm-text);
  background: var(--comm-white);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.18s;
}

.comm-reg-input:focus {
  border-color: var(--comm-primary);
}

.comm-reg-textarea {
  width: 100%;
  min-height: 200px;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 15px;
  color: var(--comm-text);
  resize: vertical;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.18s;
}

.comm-reg-textarea:focus {
  border-color: var(--comm-primary);
}

/* 대분류 셀렉트 */
.comm-reg-sel-wrap {
  position: relative;
}

.comm-reg-sel-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 46px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: var(--comm-white);
  cursor: pointer;
  font-size: 15px;
  color: var(--comm-text);
  user-select: none;
  transition: border-color 0.18s;
}

.comm-reg-sel-btn:hover,
.comm-reg-sel-btn.open {
  border-color: var(--comm-primary);
}

.comm-reg-sel-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--comm-white);
  border: 1px solid var(--comm-border);
  border-radius: 10px;
  box-shadow: var(--comm-shadow);
  z-index: 100;
  max-height: 240px;
  overflow-y: auto;
  display: none;
}

.comm-reg-sel-btn.open + input + .comm-reg-error + .comm-reg-sel-list,
.comm-reg-sel-btn.open ~ .comm-reg-sel-list {
  display: block;
}

/* 기존 comm-select-cont-div.open 호환 */
.comm-select-cont-div.open {
  display: block !important;
}

.comm-reg-sel-list .comm-sel-item,
.comm-reg-sel-list .comm-select-cont {
  display: block;
  padding: 11px 16px;
  font-size: 14px;
  color: var(--comm-text);
  cursor: pointer;
  transition: background 0.15s;
}

.comm-reg-sel-list .comm-sel-item:hover,
.comm-reg-sel-list .comm-select-cont:hover {
  background: var(--comm-primary-light);
  color: var(--comm-primary);
}

.comm-reg-error {
  color: #ef4444;
  font-size: 13px;
  margin-top: 6px;
}

/* 기존 comm-select 호환 (registerHtml에서 사용) */
.comm-select.open {
  border-color: var(--comm-primary);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  .comm-hero-title {
    font-size: 38px;
  }
  .comm-cat-sidebar.faq-sidebar {
    display: none;
  }
  /* 2열: 2 cards * 1 gap */
  .comm-popular-card {
    flex-basis: calc((100% - 25px) / 2);
  }
}

@media (max-width: 900px) {
  #community-view-wrap .faq-main-container {
    margin-top: 12px;
  }

  .comm-hero {
    padding: 36px 0 12px;
  }

  .comm-hero-inner,
  .comm-view-body,
  .comm-reg-content-wrap {
    padding-left: 28px;
    padding-right: 28px;
  }

  .comm-view-body {
    flex-direction: column;
  }

  .comm-view-main.faq-content-left {
    width: 100%;
    margin: 0 auto;
  }

  .comm-cat-sidebar {
    width: 100%;
    position: static;
  }

  .comm-cat-sidebar-head {
    padding: 4px 0 8px;
  }

  .comm-cat-list {
    max-height: none;
  }

  .comm-post-tag {
    margin-bottom: 24px;
    font-size: 14px;
    padding: 7px 18px;
  }

  .comm-post-title {
    font-size: 22px;
  }

  .comm-post-meta {
    gap: 12px 20px;
    padding: 16px 12px;
    margin-top: 24px;
    margin-bottom: 32px;
  }

  .comm-post-meta .comm-meta-item:nth-of-type(3) {
    margin-left: 0;
  }

  .comm-meta-item {
    gap: 14px;
  }

  .comm-meta-label {
    font-size: 14px;
  }

  .comm-meta-value {
    font-size: 15px;
  }

  .comm-post-body {
    padding: 0 8px;
    margin-bottom: 34px;
  }

  .comm-post-content,
  .comm-view-content {
    font-size: 15px;
    line-height: 1.8;
  }

  .comm-post-actions,
  .comm-view-sub-content-div {
    padding-left: 0;
    padding-right: 0;
    flex-wrap: wrap;
    gap: 14px;
  }

  .comm-view {
    padding: 34px 20px 22px;
  }

  .comm-view-info {
    padding: 18px 12px;
    margin-bottom: 34px;
    flex-wrap: wrap;
  }

  .comm-info {
    gap: 14px;
    font-size: 14px;
  }

  .comm-view-content-div {
    padding: 0 4px;
    margin-bottom: 38px;
  }

  .comm-near-post {
    min-height: 58px;
    padding: 0 18px;
    gap: 20px;
  }

  .comm-near-label {
    min-width: 96px;
    font-size: 14px;
    gap: 8px;
  }

  .comm-near-title,
  .comm-near-empty {
    font-size: 15px;
  }

  .comm-filter-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .comm-list-filter-section {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .comm-search-area {
    width: 100%;
  }

  .comm-filter-sort-group,
  .comm-filter-action-group {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .comm-filter-sort-group::-webkit-scrollbar,
  .comm-filter-action-group::-webkit-scrollbar {
    display: none;
  }

  .comm-filter-sort-group {
    justify-content: flex-start;
  }

  .comm-filter-action-group {
    justify-content: flex-start;
  }

  .comm-filter-action-group .comm-kw-wrap {
    order: 2;
    flex: 1 1 auto;
    min-width: 180px;
  }

  .comm-filter-action-group #searchContentWrap {
    order: 1;
    flex: 0 0 auto;
  }

  .comm-filter-action-group .comm-notice-write-btn,
  .comm-filter-action-group .comm-write-btn-new {
    order: 3;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .comm-kw-wrap input {
    width: 100%;
    flex: 1;
  }

  .comm-table-wrap {
    overflow-x: visible;
  }

  .comm-table {
    width: 100%;
    min-width: 0;
    table-layout: auto;
  }

  /* 조회·추천·답변 th/td를 display:none → 브라우저가 자동으로 남은 폭 재분배 */
  .comm-col-hide-mob {
    display: none;
  }

  .comm-table th,
  .comm-table td {
    padding: 10px 5px;
    font-size: 13px;
  }

  .comm-table td:nth-child(1) {
    padding-left: 10px;
    padding-right: 8px;
    vertical-align: middle;
  }

  /* 모바일에서 제목 셀 세로 정렬 복원 */
  .comm-title-cell {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* 모바일에서 제목 줄바꿈 허용 */
  .comm-table-title {
    flex: none;
    width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 13px;
    line-height: 1.4;
    color: #222;
    font-weight: 600;
    word-break: keep-all;
  }

  /* 모바일 meta 행 (조회·추천·답변·날짜) 표시 */
  .comm-title-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 3px;
    font-size: 11px;
    color: var(--comm-text-muted);
    line-height: 1.3;
  }

  .comm-cat-badge {
    font-size: 11px;
  }
}

@media (max-width: 600px) {
  #community-view-wrap .faq-main-container {
    margin-top: 14px;
  }

  .comm-hero {
    padding: 28px 0 10px;
  }

  .comm-hero-inner {
    padding-left: 24px;
    padding-right: 24px;
  }

  .comm-hero-title {
    font-size: 28px;
  }

  .comm-hero-sub {
    font-size: 16px;
  }

  .comm-filter-action-group {
    gap: 8px;
  }

  .comm-filter-action-group .comm-kw-wrap {
    min-width: 150px;
  }

  .comm-table th,
  .comm-table td {
    padding: 9px 3px;
    font-size: 12px;
  }

  .comm-table-title {
    font-size: 12px;
  }

  .comm-title-meta {
    font-size: 10px;
    gap: 4px 8px;
  }

  .comm-cat-badge {
    font-size: 10px;
    padding: 2px 6px;
  }

  .comm-sel-btn {
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
  }

  .comm-post {
    margin-bottom: 24px;
  }

  .comm-post-tag {
    margin-bottom: 22px;
    font-size: 13px;
  }

  .comm-popular-card {
    flex-basis: 100%;
  }

  .comm-popular-nav {
    display: none;
  }

  .comm-post-title {
    font-size: 20px;
  }

  .comm-post-meta {
    gap: 12px 18px;
    padding: 16px 8px;
  }

  .comm-meta-item {
    gap: 10px;
  }

  .comm-action-left,
  .comm-view-sub-btn-div-1 {
    gap: 6px;
  }

  .comm-like-btn,
  .comm-reply-btn,
  .like-div,
  .post-reply-btn-div {
    min-height: 40px;
    font-size: 15px;
    padding: 0 13px;
  }

  .comm-reply-header {
    font-size: 20px;
    margin-left: 0;
  }

  .comm-view {
    padding: 28px 14px 20px;
  }

  .comm-view-main.faq-content-left {
    width: 100%;
    margin: 0 auto;
  }

  .comm-near-posts {
    margin-top: 32px;
  }

  .comm-near-post {
    min-height: auto;
    padding: 18px 8px;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .comm-near-label {
    min-width: 0;
  }
}