/* OHOTORO 공지/배너/팝업 스타일 (메인 페이지 + 어드민 미리보기 공용)
   기존 사이트와 통일: 흰 배경, 각진 모서리, 1px #e5e5e5 보더, 모노크롬.
   (검색창/버튼과 동일한 플랫 스타일 — border-radius·그림자·좌측 액센트 보더 없음) */

/* ── 상단 띠 바 / 티저 배너 공통 (검색창과 동일한 톤) ── */
.notice-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 500px;
  margin: 0 auto 16px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  color: #000000;
  text-align: left;
  box-sizing: border-box;
}
.notice-bar.warning {
  background: #fbecec;
  border-color: #e8c4c4;
  color: #930000;
}
.notice-bar-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 한 줄 말줄임 */
}
.notice-bar-text a { color: inherit; }
.notice-bar-x {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.4;
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}
.notice-bar-x:hover { opacity: 1; }

/* 티저(클릭 가능한 바) */
button.notice-teaser {
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s;
}
button.notice-teaser:hover { background: #fafafa; }
button.notice-teaser.warning:hover { background: #f6dede; }
.notice-teaser-more {
  flex: 0 0 auto;
  font-size: 0.85em; /* 바 글자 크기에 비례 (커스텀 fontSize와 함께 커짐) */
  color: #737373;
  white-space: nowrap;
}
.notice-teaser-more::after { content: ' \203A'; } /* › 화살표 */
.notice-teaser-more.no-arrow::after { content: ''; }

/* ── 이미지 배너 (사이트 이미지처럼 각진 모서리) ── */
.promo-banner {
  width: 100%;
  max-width: 500px;
  margin: 0 auto 16px;
}
.promo-banner a { display: block; }
.promo-banner-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── 팝업 / 모달 ── */
.popup-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
}
.popup-overlay.show { display: flex; }
.popup-box {
  position: relative;
  display: flex;
  flex-direction: column; /* 헤더(고정) · 본문(스크롤) · 푸터(고정) */
  width: 100%;
  max-width: 360px;
  max-height: 85vh;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  box-sizing: border-box;
}
.popup-header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid #f0f0f0;
}
.popup-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: #000;
  line-height: 1.5;
}
.popup-x {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: #a3a3a3;
  cursor: pointer;
  padding: 0;
  margin: -2px -2px 0 0;
}
.popup-x:hover { color: #000; }
.popup-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 18px;
}
.popup-body {
  font-size: 14px;
  line-height: 1.7;
  color: #404040;
  word-break: break-word;
  white-space: pre-line; /* 입력창의 Enter 줄바꿈을 그대로 표시 (<br>·<p>도 함께 가능) */
}
.popup-body p { margin: 0 0 8px; }
.popup-body p:last-child { margin-bottom: 0; }
.popup-body a { color: #000; text-decoration: underline; }
.popup-img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 14px;
}
.popup-img:first-child { margin-top: 0; }
.popup-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid #f0f0f0;
}
.popup-btn {
  display: block;
  width: 100%;
  padding: 13px;
  font-size: 14px;
  font-family: inherit;
  text-align: center;
  border: 1px solid #e5e5e5;
  background: #fff;
  color: #000;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}
.popup-btn:hover { border-color: #000; }
.popup-btn.primary {
  background: #000;
  color: #fff;
  border-color: #000;
}
.popup-btn.primary:hover { background: #1a1a1a; }
.popup-dismiss {
  border: none;
  background: transparent;
  color: #a3a3a3;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  padding: 4px;
  text-align: center;
}
.popup-dismiss:hover { color: #737373; text-decoration: underline; }