/* BASIC css start */
/* 메인 컨테이너 */
.penm-main-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 배너 섹션 */
.penm-banner-section {
  width: 100%;
  height: 250px;
  background: linear-gradient(135deg, #403F6F, #2c344e);
  margin-bottom: 50px;
  position: relative;
  overflow: hidden;
}
/* 이미지는 사용 안 함: .penm-banner-image 제거 가능 */
.penm-banner-overlay {
  position: absolute; inset: 0; background: rgba(64,63,111,.45);
  display: flex; align-items: center; justify-content: center;
}
.penm-banner-text { text-align: center; color: #fff; }
.penm-banner-title { color: #fff; font-size: 2.5rem; font-weight: 700; margin-bottom: 10px; letter-spacing: 1px; }
.penm-banner-subtitle { font-size: 1.1rem; font-weight: 300; opacity: .95; }

/* 게시판 컨테이너 */
.penm-board-container { background: #fff; margin-bottom: 50px; }

/* 게시판 헤더 */
.penm-board-header {
  background: #f8f9ff; padding: 30px; border-bottom: 2px solid #403F6F;
  display: flex; justify-content: space-between; align-items: center;
}
.penm-board-title { font-size: 1.8rem; font-weight: 700; color: #403F6F; }
.penm-board-count { font-size: .9rem; color: #666; }

/* ============================== */
/* 검색 영역 (라디오 + 검색박스)   */
/* ============================== */
.penm-search-section{
  background:#fff; padding:20px 30px; border-bottom:1px solid #e4eaff;
  display:flex; justify-content:flex-end; align-items:center; gap:16px;
}
.penm-search-radios{ display:inline-flex; gap:18px; align-items:center; }
.penm-search-radios label{ display:inline-flex; gap:8px; align-items:center; font-size:.95rem; color:#555; cursor:pointer; }
.penm-search-radios input[type="radio"]{ width:18px; height:18px; accent-color:#3b5bfd; cursor:pointer; }

/* input + 버튼을 하나의 사각형으로 */
.penm-search-box{
  display:flex; align-items:center;
  border:1px solid #d7dff8;
  border-radius:8px;
  overflow:hidden;
  height:40px;
}

/* 메이크샵 기본 인풋 스타일 덮어쓰기 */
.penm-search-input{
  padding:0 14px !important;
  border:0 !important;
  font-size:.95rem !important;
  width:260px !important;
  outline:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  height:100% !important;
}
.penm-search-input:focus{ box-shadow:none !important; }

/* a 링크 버튼 (돋보기) */
.penm-search-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:100%;
  text-decoration:none; color:#8a8fa3;
  background:#fff; border:0;
  font-size:16px;
  transition: background .2s ease, color .2s ease;
}
.penm-search-btn:hover{ background:#f3f6ff; color:#3b5bfd; }

/* 테이블 */
.penm-board-table{ width:100%; border-collapse:collapse; border:1px solid #e4eaff; }
.penm-table-header{ background:#f8f9ff; border-bottom:1px solid #e4eaff; }
.penm-table-header th{
  padding:15px; font-size:.9rem; font-weight:600; color:#403F6F; text-align:center; border-right:1px solid #e4eaff;
}
.penm-table-header th:last-child{ border-right:none; }
.penm-table-header .penm-col-no{ width:80px; }
.penm-table-header .penm-col-title{ width:auto; }
.penm-table-header .penm-col-name{ width:120px; }
.penm-table-header .penm-col-date{ width:120px; }
.penm-table-header .penm-col-hit{ width:80px; }

.penm-table-row{ border-bottom:1px solid #f0f0f0; }
.penm-table-row:hover{ background:#fafbff; }
.penm-table-row td{
  padding:12px 15px; font-size:.9rem; color:#555; text-align:center;
  border-right:1px solid #f0f0f0; word-break:keep-all; word-wrap:break-word;
}
.penm-table-row td:last-child{ border-right:none; }

/* 제목 영역 */
.penm-title-flex{ display:flex; align-items:center; gap:8px; }
.penm-indent{ width: calc(var(--d, 0) * 14px); flex:0 0 auto; } /* depth만큼 들여쓰기 */
.penm-reply-icon{
  display:inline-block;
  width: calc(var(--d, 0) * 12px);
  overflow: hidden;
  line-height: 1;
}
.penm-reply-icon::before{
  content: 'ㄴ';
  display:inline-block;
  width: 12px;
  color: #888;
  margin-right: 4px;
  transform: translateY(1px);
}
.penm-title-cell{ text-align:left; cursor:pointer; }
.penm-title-cell:hover{ color:#403F6F; }

/* 비밀글 링크(제목 강제) */
.penm-secret-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px;
  color:#333; text-decoration:none;
}
.penm-secret-link i{ color:#9aa3c7; font-size:14px; }

/* 질문/답변 토글: depth=0 → 질문, 그 외 → 답변 */
.penm-secret-link[data-depth="0"] .penm-title-q { display:inline; }
.penm-secret-link[data-depth="0"] .penm-title-a { display:none; }
.penm-secret-link:not([data-depth="0"]) .penm-title-q { display:none; }
.penm-secret-link:not([data-depth="0"]) .penm-title-a { display:inline; }

/* 스크린리더 전용(원래 제목은 시각 숨김) */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* 답변 상태 뱃지 (필요 시 사용) */
.penm-reply-badge{
  display:inline-block; padding:2px 6px; border:1px solid #e0e6ff;
  color:#5560a9; font-size:11px; border-radius:999px; background:#f6f8ff;
}

/* 페이징 & 글쓰기 */
.penm-bottom-section{ position:relative; padding:30px 0; }
.penm-pagination{ display:flex; justify-content:center; align-items:center; gap:5px; }
.penm-page-btn{
  padding:8px 12px; border:1px solid #ddd; background:#fff; color:#666; text-decoration:none; font-size:.9rem; cursor:pointer;
}
.penm-page-btn:hover{ background:#f0f0f0; }
.penm-page-btn.active{ background:#403F6F; color:#fff; border-color:#403F6F; }
.penm-page-btn.disabled{ color:#ccc; cursor:not-allowed; }
.penm-page-btn.disabled:hover{ background:#fff; }

.penm-write-btn{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  padding:10px 20px; background:#403F6F; color:#fff; border:none; font-size:.9rem; cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; gap:5px;
}
.penm-write-btn:hover{ background:#2c344e; }
/* BASIC css end */