@charset "utf-8";
/* ------------------------------------------------------------------
 * assets/css/style.css — 유저 사이트 공통 스타일
 * Tailwind 로 처리되지 않는 것만 여기 둔다.
 *   1) 전역 커서 (head.php 에서 개별 cursor-pointer 불필요)
 *   2) 진입 애니메이션 (tw-animate-css 대체)
 *   3) Swiper 페이지네이션 커스텀
 * ------------------------------------------------------------------ */

:root {
  --max-width-container: 1440px;
}

html { scroll-behavior: smooth; }

body {
  font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #0f172a;
  background: #fff;
}

/* ── 1. 클릭 가능한 요소는 손모양 커서로 통일 ── */
a[href], button:not(:disabled), [onclick], [role="button"],
label[for], select, summary { cursor: pointer; }
button:disabled, .cursor-not-allowed { cursor: not-allowed; }

:focus-visible {
  outline: 2px solid #1f2937;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── 2. 진입 애니메이션 ── */
@keyframes kl-slide-up   { from { opacity:0; transform:translateY(100%); } to { opacity:1; transform:translateY(0); } }
@keyframes kl-slide-down { from { opacity:0; transform:translateY(-100%); } to { opacity:1; transform:translateY(0); } }
@keyframes kl-fade-up    { from { opacity:0; transform:translateY(16px); }  to { opacity:1; transform:translateY(0); } }

.kl-anim-slide-up   { animation: kl-slide-up   .5s ease both; }
.kl-anim-slide-down { animation: kl-slide-down .3s ease both; }
.kl-anim-fade-up    { animation: kl-fade-up    .35s ease both; }

/* ── 3. 히어로 Swiper 페이지네이션 ── */
.hero-pagination .swiper-pagination-bullet {
  width: 8px; height: 4px;
  border-radius: 2px;
  background: rgba(0,0,0,.2);
  opacity: 1;
  transition: all .3s;
  margin: 0 4px !important;
}
.hero-pagination .swiper-pagination-bullet-active {
  width: 24px;
  background: #03c75a;
}

/* Swiper 기본 화살표 숨김 (커스텀 버튼 사용) */
.swiper-button-next::after,
.swiper-button-prev::after { display: none; }

/* ── 4. 줄바꿈 보존 유틸 ── */
.kl-prewrap { white-space: pre-line; }

/* ── 5. 게시판 본문 (Tailwind reset 방어) ──
 * 에디터로 저장한 HTML 이 밋밋해지는 것을 막는다. (03_코딩규칙 3-8)
 */
.board-content { font-size: 15px; line-height: 1.9; color: #334155; }
.board-content h1 { font-size: 1.75em; font-weight: 700; margin: 1em 0 .5em; }
.board-content h2 { font-size: 1.45em; font-weight: 700; margin: 1em 0 .5em; }
.board-content h3 { font-size: 1.2em;  font-weight: 700; margin: 1em 0 .5em; }
.board-content p  { margin: .75em 0; }
.board-content ul { list-style: disc;    padding-left: 1.5em; margin: .75em 0; }
.board-content ol { list-style: decimal; padding-left: 1.5em; margin: .75em 0; }
.board-content li { margin: .25em 0; }
.board-content strong { font-weight: 700; }
.board-content em     { font-style: italic; }
.board-content a      { color: #02a348; text-decoration: underline; }
.board-content blockquote { border-left: 3px solid #e2e8f0; padding-left: 1em; color: #64748b; margin: 1em 0; }
.board-content img    { max-width: 100%; height: auto; }
.board-content table  { width: 100%; border-collapse: collapse; margin: 1em 0; }
.board-content th,
.board-content td     { border: 1px solid #e2e8f0; padding: .5em .75em; }