/* 구글 폰트: 고운바탕(Gowun Batang) & 온글잎/나눔손글씨 스타일 불러오기 */
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=Gamja+Flower&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Galmuri9', sans-serif;
}

/* 메인 배경: 따뜻하고 부드러운 파스텔 핑크 */
body {
  background-color: #fce4ec;
  color: #4a3e3d; /* 너무 진한 검정 대신 부드러운 다크 브라운 텍스트 */
}

/* 전체 레이아웃 */
#layout {
  display: flex;
  min-height: 100vh;
}

/* 1. 맨 왼쪽 붙박이 사이드바 (따뜻한 크림/아이보리 공방 느낌) */
#sidebar {
  width: 220px;
  background-image: url('images/cate_ima.png');
  background-repeat: repeat;
  background-size: auto;
  background-color: rgba(255, 250, 240, 0.85);
  background-blend-mode: overlay;
  border-right: 2px solid #f4c2c2;
  padding: 20px 15px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* --- 1. '카구야의 공방' 헤더 타이틀 강조 --- */
.sidebar-header {
  text-align: center;
  padding-bottom: 15px;
  border-bottom: 2px dashed #f4c2c2; /* 핑크색 예쁜 점선 구분선 */
  margin-bottom: 10px;
}

.sidebar-header h2 {
  font-family: 'Gamja Flower', 'Gowun Batang', cursive, serif; /* [추가] 아기자기한 손글씨/동화 폰트 */
  font-size: 24px; /* 폰트에 맞춰 글씨 크기를 살짝 키움 */
  color: #d81b60;
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8);
  margin-bottom: 6px;
}

.sidebar-header p {
  font-size: 12px;
  color: #8d6e63;
  letter-spacing: -0.5px;
}


/* --- 2. 카테고리 메뉴 목록 (달 아이콘 & 촘촘한 간격) --- */
.menu-list {
  list-style: none;
  padding: 0;
}

/* 카테고리 사이를 가르는 점선 & 줄여진 간격 */
.menu-list li:not(:last-child) {
  border-bottom: 1px dashed rgba(244, 194, 194, 0.6); /* 은은한 연핑크 점선 */
  padding-bottom: 4px; /* [수정] 위아래 간격을 줄임 (8px -> 4px) */
  margin-bottom: 4px;  /* [수정] 위아래 간격을 줄임 (8px -> 4px) */
}

/* 카테고리 링크 버튼 디자인 */
.menu-list a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #5d4037; 
  
  font-family: 'Gowun Batang', serif; /* [추가] 감성적인 고운바탕 폰트 적용 */
  font-size: 14px;
  font-weight: 700; /* 폰트를 약간 두껍게 설정 */
  
  padding: 6px 10px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.6);
  transition: all 0.2s ease;
}

/* 카테고리 이름 앞에 초승달(🌙) 아이콘 적용 */
.menu-list a::before {
  content: '🌙';
  margin-right: 7px;
  font-size: 11px;
  opacity: 0.85;
  transition: transform 0.2s ease;
}

/* 마우스 올렸을 때 효과 */
.menu-list a:hover, .menu-list a.active {
  background-color: #f8bbd0;
  color: #880e4f;
  transform: translateX(3px);
  box-shadow: 0 2px 6px rgba(216, 27, 96, 0.15);
}

/* 마우스 올렸을 때 달 모양이 귀엽게 살짝 살랑거리는 효과 */
.menu-list a:hover::before {
  transform: scale(1.25) rotate(15deg);
}

/* 사이드바 달력 (크림 + 핑크 조화) */
.calendar-box {
  background-color: #ffffff;
  border: 1px solid #f4c2c2;
  border-radius: 6px;
  padding: 10px;
  text-align: center;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: bold;
  color: #d81b60;
}

.calendar-header button {
  background-color: #f8bbd0;
  border: 1px solid #f4c2c2;
  color: #880e4f;
  width: 18px;
  height: 18px;
  cursor: pointer;
  font-size: 9px;
  border-radius: 3px;
}

.calendar-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}

.calendar-table th, .calendar-table td {
  padding: 4px 0;
  text-align: center;
}

.calendar-table th {
  color: #8d6e63;
  border-bottom: 1px dashed #f8bbd0;
  padding-bottom: 4px;
}

.calendar-table .sun { color: #e53935; }
.calendar-table .sat { color: #1e88e5; }

.calendar-table td.today {
  background-color: #f06292;
  color: #fff !important;
  font-weight: bold;
  border-radius: 3px;
}

/* 카운터 & 공지 */
.counter-box {
  background-color: #fff0f5;
  border: 1px solid #f8bbd0;
  border-radius: 6px;
  padding: 8px;
  margin-top: 10px;
  font-size: 11px;
  text-align: center;
}

.counter-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 4px;
  color: #880e4f;
  font-weight: bold;
}

.counter-label {
  color: #b0858b;
}

.counter-value {
  color: #d81b60;
  font-family: 'Galmuri9', monospace;
}

/* 2. 우측 메인 영역 (트여있는 핑크 아카이브) */
#main-area {
  flex-grow: 1;
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 메인 타이틀 */
#main-header {
  text-align: center;
  margin-bottom: 35px;
}

#main-header h1 {
  font-size: 30px;
  color: #c2185b; /* 따뜻하고 화사한 로즈 핑크 */
  letter-spacing: 3px;
  margin-bottom: 10px;
}

#main-header p {
  font-size: 12px;
  color: #8e5265;
}

/* 중앙 콘텐츠 박스 Container */
.content-container {
  width: 100%;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 깨끗한 화이트 + 파스텔 핑크 테두리 공방 카드 박스 */
.content-card {
  background-color: rgba(255, 255, 255, 0.9); /* 깨끗한 소프트 화이트 */
  border: 2px solid #f8bbd0;
  border-radius: 10px;
  padding: 22px;
  box-shadow: 0 4px 12px rgba(216, 27, 96, 0.05); /* 은은한 핑크 그림자 */
}

.content-card h2 {
  font-size: 14px;
  color: #c2185b;
  border-bottom: 1px dashed #f8bbd0;
  padding-bottom: 8px;
  margin-bottom: 12px;
  text-align: center;
}

.content-card p {
  font-size: 12px;
  line-height: 1.8;
  color: #5d4037;
}

.history-list {
  list-style: none;
  font-size: 12px;
}

.history-list li {
  margin-bottom: 6px;
  color: #5d4037;
}

.history-list span {
  color: #b0858b;
}

.center-text {
  text-align: center;
}

/* 웹 박수 버튼 (크림 핑크 톤) */
.clap-btn {
  margin-top: 10px;
  background-color: #f8bbd0;
  border: 1px solid #f48fb1;
  padding: 8px 18px;
  font-size: 12px;
  color: #880e4f;
  cursor: pointer;
  border-radius: 20px; /* 동글동글 공방 느낌 */
  transition: all 0.2s;
}

.clap-btn:hover {
  background-color: #f48fb1;
  color: #fff;
}

#footer {
  margin-top: auto;
  padding-top: 30px;
  font-size: 10px;
  color: #b0858b;
  text-align: center;
}
/* ==========================================
   프로필 페이지 전용 스타일
========================================== */

/* 프로필 기본 레이아웃 */
.profile-info-grid {
  display: flex;
  gap: 20px;
  align-items: center;
}

.profile-avatar {
  width: 110px;
  height: 110px;
  flex-shrink: 0;
  background-color: #fff0f5;
  border: 2px dashed #f48fb1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.avatar-placeholder {
  font-size: 11px;
  color: #c2185b;
  line-height: 1.4;
}

.profile-details p {
  margin-bottom: 8px;
  font-size: 12px;
  color: #5d4037;
  line-height: 1.6;
}

.profile-details strong {
  color: #c2185b;
}

/* 취향 리스트 */
.fav-list {
  list-style: none;
}

.fav-list li {
  font-size: 12px;
  margin-bottom: 10px;
  color: #5d4037;
  line-height: 1.6;
}

.fav-list strong {
  color: #c2185b;
}

/* Q&A 스타일 */
.qna-list dt {
  font-size: 12px;
  font-weight: bold;
  color: #c2185b;
  margin-top: 14px;
  margin-bottom: 4px;
}

.qna-list dt:first-child {
  margin-top: 0;
}

.qna-list dd {
  font-size: 12px;
  color: #5d4037;
  padding-left: 10px;
  border-left: 2px solid #f8bbd0;
  line-height: 1.6;
}
/* ==========================================
   갤러리 & 블로그 포스트 모달 스타일
========================================== */

/* 갤러리 그리드 (여유롭고 큼직한 카드 형태) */
.gallery-container {
  width: 100%;
  max-width: 820px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 25px; /* 사진 사이 간격 */
}

.gallery-card {
  background-color: rgba(255, 255, 255, 0.95);
  border: 2px solid #f8bbd0;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.gallery-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 18px rgba(216, 27, 96, 0.12);
}

.gallery-thumb {
  width: 100%;
  height: 220px; /* 큼직한 썸네일 높이 */
  background-color: #fff5f8;
  border-bottom: 1px solid #f8bbd0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumb-placeholder {
  font-size: 48px;
}

.gallery-info {
  padding: 15px;
  text-align: center;
}

.gallery-info h3 {
  font-size: 13px;
  color: #4a3e3d;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gallery-date {
  font-size: 10px;
  color: #b0858b;
}

/* 블로그 포스트 레이어 팝업 (모달) */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(74, 62, 61, 0.5); /* 은은한 크림 브라운 어두운 배경 */
  backdrop-filter: blur(2px);
}

.modal-content {
  background-color: #fffaf0; /* 포근한 크림 아이보리 */
  border: 3px solid #f4c2c2;
  border-radius: 12px;
  margin: 5% auto;
  padding: 30px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.close-btn {
  position: absolute;
  right: 20px;
  top: 15px;
  font-size: 24px;
  color: #c2185b;
  cursor: pointer;
  font-weight: bold;
}

.post-detail {
  display: none;
}

.post-title {
  font-size: 18px;
  color: #c2185b;
  margin-bottom: 6px;
}

.post-meta {
  font-size: 10px;
  color: #b0858b;
  border-bottom: 1px dashed #f8bbd0;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.post-img-box {
  width: 100%;
  height: 280px;
  background-color: #fff;
  border: 2px dashed #f8bbd0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.large-placeholder {
  font-size: 14px;
  color: #c2185b;
}

.post-body p {
  font-size: 12px;
  line-height: 1.9;
  color: #5d4037;
  margin-bottom: 12px;
}
/* ==========================================
   일기장 게시판 (목록형) 스타일
========================================== */

.diary-board-card {
  background-color: rgba(255, 255, 255, 0.95);
  border: 2px solid #f8bbd0;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(216, 27, 96, 0.05);
}

.diary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.diary-table th {
  padding: 10px 8px;
  border-bottom: 2px solid #f48fb1;
  color: #c2185b;
  text-align: left;
}

.diary-table th.col-title { width: 55%; }
.diary-table th.col-author { width: 20%; }
.diary-table th.col-date { width: 15%; }
.diary-table th.col-views { width: 10%; text-align: center; }

.diary-row {
  cursor: pointer;
  transition: background-color 0.15s;
}

.diary-row:hover {
  background-color: #fff0f5;
}

.diary-row td {
  padding: 10px 8px;
  border-bottom: 1px dashed #f8bbd0;
  color: #4a3e3d;
}

.diary-row .col-views {
  text-align: center;
  color: #b0858b;
  font-size: 11px;
}

.author-mark {
  color: #4caf50;
  font-size: 10px;
}

/* 제목 옆 사진 첨부 아이콘 */
.icon-img {
  font-size: 11px;
  margin-left: 4px;
}

/* 일기 본문 열림 영역 */
.diary-content-row {
  display: none; /* 기본은 숨김 상태 */
  background-color: #fffaf0; /* 크림 아이보리 본문 배경 */
}

.diary-body {
  padding: 15px 20px;
  border-bottom: 1px solid #f8bbd0;
  line-height: 1.8;
  color: #5d4037;
  font-size: 12px;
}

.diary-photo {
  margin-top: 12px;
  padding: 15px;
  background-color: #fff;
  border: 1px dashed #f48fb1;
  border-radius: 6px;
  color: #c2185b;
  text-align: center;
}
/* ==========================================
   일기장 상세 보기 페이지 스타일
========================================== */

.diary-detail-card {
  background-color: rgba(255, 255, 255, 0.95);
  border: 2px solid #f8bbd0;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(216, 27, 96, 0.05);
}

.detail-header {
  border-bottom: 2px dashed #f48fb1;
  padding-bottom: 15px;
  margin-bottom: 25px;
}

.detail-title {
  font-size: 20px;
  color: #c2185b;
  margin-bottom: 12px;
}

.detail-meta {
  font-size: 11px;
  color: #b0858b;
  display: flex;
  gap: 20px;
}

.detail-body {
  font-size: 13px;
  line-height: 2;
  color: #4a3e3d;
  min-height: 200px;
}

.detail-body p {
  margin-bottom: 15px;
}

/* 상세페이지 내 큼직한 사진 박스 */
.detail-photo-box {
  width: 100%;
  max-width: 550px;
  height: 320px;
  margin: 25px auto;
  background-color: #fffaf0;
  border: 2px dashed #f8bbd0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.large-photo-placeholder {
  color: #c2185b;
  font-size: 14px;
}

.detail-footer {
  margin-top: 30px;
  padding-top: 15px;
  border-top: 1px solid #f8bbd0;
  text-align: right;
}

.btn-list {
  display: inline-block;
  padding: 8px 16px;
  background-color: #f8bbd0;
  color: #c2185b;
  text-decoration: none;
  border-radius: 20px;
  font-size: 11px;
  font-weight: bold;
  transition: background-color 0.2s;
}

.btn-list:hover {
  background-color: #f48fb1;
  color: #fff;
}
/* ==========================================
   대형 오에카키 그림판 스타일
========================================== */

.oekaki-tool-box {
  background-color: #fff;
}

.canvas-workspace {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  background-color: #fce4ec;
  padding: 20px;
  border-radius: 12px;
  border: 1px dashed #f48fb1;
  margin-bottom: 20px;
}

.paint-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #ffffff;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #f8bbd0;
}

.mode-tools {
  display: flex;
  gap: 5px;
}

.tool-btn {
  padding: 6px 12px;
  font-size: 11px;
  background-color: #fff;
  border: 1px solid #f8bbd0;
  border-radius: 6px;
  cursor: pointer;
  color: #5d4037;
  transition: all 0.2s;
}

.tool-btn.active {
  background-color: #f48fb1;
  color: #fff;
  font-weight: bold;
}

.clear-btn {
  background-color: #ffebee !important;
  color: #c62828 !important;
  border-color: #ffcdd2 !important;
}

.color-picker-group {
  display: flex;
  gap: 4px;
  align-items: center;
}

.color-btn {
  width: 24px;
  height: 24px;
  border: 1px solid #ccc;
  cursor: pointer;
  border-radius: 4px;
}

.color-btn.active-color {
  border: 2px solid #c2185b;
  transform: scale(1.15);
}

#customColor {
  width: 28px;
  height: 28px;
  border: none;
  cursor: pointer;
  background: none;
}

.size-tools {
  font-size: 11px;
  color: #5d4037;
  display: flex;
  gap: 5px;
  align-items: center;
}

.size-tools button {
  padding: 4px 8px;
  font-size: 10px;
  background-color: #fff;
  border: 1px solid #f8bbd0;
  border-radius: 4px;
  cursor: pointer;
}

/* 대형 캔버스 박스 */
.canvas-container {
  width: 100%;
  max-width: 700px;
  background-color: #ffffff;
  border: 3px solid #f48fb1;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow: hidden;
}

#paintCanvas {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair;
  background-color: #ffffff;
}

/* 입력 양식 */
.oekaki-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-row {
  display: flex;
  gap: 10px;
}

.form-row input {
  flex: 1;
  padding: 10px;
  border: 1px solid #f8bbd0;
  border-radius: 6px;
  font-size: 12px;
  outline: none;
}

.oekaki-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #f8bbd0;
  border-radius: 6px;
  font-size: 12px;
  resize: vertical;
  outline: none;
}

.submit-draw-btn {
  background-color: #f48fb1;
  color: #fff;
  border: none;
  padding: 12px;
  font-size: 13px;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.submit-draw-btn:hover {
  background-color: #f06292;
}

/* 목록 및 카드 */
.oekaki-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.oekaki-post {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}

.post-header-line {
  background-color: #fce4ec;
  padding: 10px 15px;
  font-size: 12px;
  color: #666;
  border-bottom: 1px solid #f8bbd0;
  display: flex;
  gap: 10px;
  align-items: center;
}

.post-title {
  color: #c2185b;
  font-size: 13px;
}

.post-author {
  color: #880e4f;
  font-weight: bold;
}

.post-time {
  margin-left: auto;
  font-size: 11px;
  color: #ad1457;
}

.post-main-content {
  display: flex;
  padding: 15px;
  gap: 20px;
}

.post-img-frame {
  width: 220px;
  height: 150px;
  border: 1px solid #f8bbd0;
  border-radius: 6px;
  flex-shrink: 0;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.post-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sample-oekaki-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
}

.post-text-content {
  font-size: 13px;
  color: #4a3e3d;
  line-height: 1.6;
}

.post-like-box {
  padding: 8px 15px;
  text-align: right;
  border-top: 1px dashed #f8bbd0;
}

.like-btn {
  background-color: #fff;
  border: 1px solid #f8bbd0;
  color: #c2185b;
  padding: 4px 12px;
  font-size: 11px;
  border-radius: 12px;
  cursor: pointer;
}
/* ==========================================
   PC 풀스크린 와이드 & 모바일 찌그러짐 완벽 방지
========================================== */

/* PC 화면 전체 사용 (왼쪽 사이드바 + 오른쪽 넓은 메인) */
#layout {
  display: flex;
  width: 100%;
  min-width: 1000px; /* 전체 최소 폭을 1000px로 단단히 고정 */
  margin: 0;
  box-sizing: border-box;
}

#sidebar {
  width: 220px;
  flex-shrink: 0; /* 사이드바 폭 고정 */
}

#main-area {
  flex: 1;
  min-width: 780px; /* 메인 콘텐츠 영역이 절대 줄어들지 않음 */
  box-sizing: border-box;
}

/* 표(Table) 및 카드 내부 글자 찌그러짐 방지 */
.content-card, table, td, th {
  word-break: keep-all; /* 단어 단위 줄바꿈 유지 */
  white-space: normal;
}

.diary-table th, .diary-table td,
.profile-table th, .profile-table td {
  padding: 8px 12px;
}
/* ==========================================
   방명록(BBS) 전용 파스텔 로즈 스타일
========================================== */
.bbs-container {
  width: 100%;
  max-width: 850px; /* 탁 트인 넓직한 너비 */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bbs-form-card {
  background-color: rgba(255, 255, 255, 0.95);
  border: 2px solid #f8bbd0;
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 4px 12px rgba(216, 27, 96, 0.05);
}

.bbs-form-header {
  font-weight: bold;
  color: #c2185b;
  margin-bottom: 12px;
  font-size: 13px;
}

.bbs-input-group {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.bbs-input-group input {
  padding: 8px 12px;
  border: 1px solid #f8bbd0;
  border-radius: 6px;
  outline: none;
  font-family: 'Galmuri9', sans-serif;
  font-size: 12px;
  color: #4a3e3d;
}

#bbsAuthor { width: 160px; }
#bbsPassword { width: 160px; }

#bbsContent {
  width: 100%;
  padding: 12px;
  border: 1px solid #f8bbd0;
  border-radius: 6px;
  resize: vertical;
  outline: none;
  font-family: 'Galmuri9', sans-serif;
  font-size: 12px;
  color: #4a3e3d;
  box-sizing: border-box;
}

.bbs-btn-area {
  text-align: right;
  margin-top: 10px;
}

.bbs-submit-btn {
  background-color: #f8bbd0;
  color: #880e4f;
  border: 1px solid #f48fb1;
  padding: 8px 20px;
  border-radius: 20px;
  cursor: pointer;
  font-family: 'Galmuri9', sans-serif;
  font-size: 12px;
  font-weight: bold;
  transition: all 0.2s;
}

.bbs-submit-btn:hover {
  background-color: #f48fb1;
  color: #fff;
}

/* 방명록 목록 카드 (넓직하고 몽글몽글한 카드) */
.bbs-card {
  background-color: rgba(255, 255, 255, 0.95);
  border: 2px solid #f8bbd0;
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 15px;
  box-shadow: 0 4px 12px rgba(216, 27, 96, 0.03);
}

.bbs-card-header {
  display: flex;
  align-items: center;
  border-bottom: 1px dashed #f8bbd0;
  padding-bottom: 8px;
  margin-bottom: 12px;
  font-size: 11px;
}

.bbs-no {
  color: #c2185b;
  font-weight: bold;
  margin-right: 12px;
}

.bbs-author {
  color: #880e4f;
  font-weight: bold;
}

.bbs-date {
  margin-left: auto;
  color: #b0858b;
  font-size: 10px;
}

.bbs-card-body {
  color: #5d4037;
  font-size: 12px;
  line-height: 1.8;
  word-break: keep-all;
}
/* 방명록 답글 전용 스타일 */
.bbs-reply-box {
  margin-top: 12px;
  padding: 10px 12px;
  background-color: #fff0f5;
  border-left: 3px solid #f48fb1;
  border-radius: 6px;
  font-size: 11px;
}

.bbs-reply-header {
  font-weight: bold;
  color: #c2185b;
  margin-bottom: 4px;
}

.bbs-reply-body {
  color: #5d4037;
  line-height: 1.6;
}

/* 답글 작성 폼 */
.reply-form-card {
  margin-top: 10px;
  padding: 10px;
  background-color: #fffaf0;
  border: 1px dashed #f48fb1;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reply-form-card textarea {
  width: 100%;
  padding: 6px;
  border: 1px solid #f8bbd0;
  border-radius: 4px;
  font-size: 11px;
  font-family: 'Galmuri9', sans-serif;
  resize: vertical;
}

.reply-btn-group {
  text-align: right;
}

.reply-submit-btn {
  background-color: #f8bbd0;
  color: #880e4f;
  border: 1px solid #f48fb1;
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 10px;
  font-weight: bold;
}

.open-reply-btn {
  background: none;
  border: none;
  color: #b0858b;
  font-size: 10px;
  cursor: pointer;
  margin-left: 10px;
  text-decoration: underline;
}
/* 방문자 카운터 및 안내 문구 스타일 */
.sidebar-footer {
  margin-top: 15px;
  text-align: center;
}

.counter-box {
  background-color: #fff0f5;
  border: 1px solid #f8bbd0;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 10px;
}

.counter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
  font-size: 11px;
  font-weight: bold;
}

.counter-label {
  color: #b0858b;
}

.counter-value {
  color: #d81b60;
  font-family: 'Galmuri9', monospace;
}

/* 안내 문구 글자 크기 축소 */
.notice-text {
  font-size: 10px !important;
  color: #888;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}
/* 사이드바 하단 미니 위젯 박스 */
.sidebar-widget {
  margin-top: auto; /* 사이드바 맨 아래로 밀어줌 */
  background-color: rgba(255, 255, 255, 0.75);
  border: 1px dashed #f4c2c2;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.widget-title {
  font-family: 'Gowun Batang', serif;
  font-size: 13px;
  font-weight: bold;
  color: #d81b60;
  margin-bottom: 6px;
}

.widget-text {
  font-family: 'Gowun Batang', serif;
  font-size: 11.5px;
  color: #6d4c41;
  line-height: 1.4;
}