/* ============================================================
   메이플 월드 커뮤니티 — 테마 레이어 v2
   기존 스타일시트 뒤에 로드. 가독성 · 레이아웃 우선.
   ============================================================ */

:root {
  --mw-sky:        #45DCE8;
  --mw-sky-light:  #C4F4F8;
  --mw-sky-pale:   #EAFBFD;
  --mw-sky-deep:   #0E8FB5;
  --mw-ink:        #1B2043;   /* 본문 텍스트 */
  --mw-ink-soft:   #4A5578;   /* 보조 텍스트 — 흰 배경 대비 충분 */
  --mw-pink:       #FF4B95;
  --mw-sun:        #FFB703;
  --mw-coral:      #EF4335;
  --mw-grass:      #2FA968;
  --mw-cloud:      #FFFFFF;
  --mw-line:       #D5E7EC;

  --mw-radius:     18px;
  --mw-shadow:     0 6px 18px rgba(27, 32, 67, .10);
  --mw-pop:        0 3px 0 var(--mw-ink);

  --mw-display: 'Jua', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --mw-body: 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
}

/* ---------- 배경 ---------- */
body {
  background:
    radial-gradient(circle at 14% 20%, rgba(255,255,255,.45) 0 22px, transparent 23px),
    radial-gradient(circle at 86% 14%, rgba(255,255,255,.35) 0 15px, transparent 16px),
    linear-gradient(180deg, #D8F6F9 0%, #A8ECF2 40%, #7FE3EC 100%) fixed !important;
  color: var(--mw-ink) !important;
  font-family: var(--mw-body) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 가독성: 본문 타이포 ---------- */
p, li, td, dd, .board-preview a, .post-content, .form-help, small {
  color: var(--mw-ink) !important;
  line-height: 1.7 !important;
}
.text-secondary, .form-help, small, .post-meta, .board-meta, .insight-sub {
  color: var(--mw-ink-soft) !important;
}
h1, h2, h3, h4, h5 {
  font-family: var(--mw-display) !important;
  color: var(--mw-ink) !important;
  letter-spacing: -.01em !important;
  line-height: 1.35 !important;
  text-shadow: none !important;
}
h2 { font-size: 1.6rem !important; }
h3 { font-size: 1.24rem !important; }
a { color: var(--mw-sky-deep); }
a:hover { color: var(--mw-pink); }

/* ---------- 헤더 ---------- */
.header {
  background: var(--mw-cloud) !important;
  border: none !important;
  border-bottom: 3px solid var(--mw-ink) !important;
  border-radius: 0 0 22px 22px !important;
  box-shadow: 0 6px 0 rgba(27,32,67,.12) !important;
}
.header .logo { gap: 12px !important; align-items: center !important; }
.header .logo .logo-image, .logo-image {
  width: 46px !important; height: 46px !important;
}
.header .logo h1, .logo h1 {
  font-family: var(--mw-display) !important;
  color: var(--mw-ink) !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  letter-spacing: -.01em !important;
  text-shadow: none !important;
  -webkit-text-fill-color: var(--mw-ink) !important;
  background: none !important;
  line-height: 1.15 !important;
}
.logo h1::after {
  content: 'MAPLE WORLD · FAN COMMUNITY' !important;
  color: var(--mw-sky-deep) !important;
  font-family: var(--mw-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  margin-top: 3px !important;
}

/* 검색창 */
.g5-head-search input {
  background: var(--mw-sky-pale) !important;
  color: var(--mw-ink) !important;
  border: 2px solid var(--mw-line) !important;
  border-radius: 999px !important;
  height: 42px !important;
}
.g5-head-search input::placeholder { color: var(--mw-ink-soft) !important; }
.g5-head-search button {
  background: var(--mw-sky-deep) !important;
  color: #fff !important;
  border-radius: 50% !important;
}

/* 상단 내비 — 알약 버튼 */
.main-nav ul li a, .main-nav a {
  font-family: var(--mw-body) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--mw-ink) !important;
  background: var(--mw-sky-pale) !important;
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  box-shadow: none !important;
  transition: background .15s ease, color .15s ease;
}
.main-nav ul li a:hover, .main-nav a:hover {
  background: var(--mw-sky-light) !important;
}
.main-nav ul li a.active, .main-nav a.active {
  background: var(--mw-sky-deep) !important;
  color: #FFFFFF !important;
  border-color: var(--mw-ink) !important;
  box-shadow: 0 2px 0 var(--mw-ink) !important;
}

/* ---------- 히어로 ---------- */
.hero-banner {
  position: relative !important;
  min-height: 380px !important;
  display: flex !important;
  align-items: center !important;
  padding: 56px 0 !important;
  background: #0E8FB5 url('/static/images/mw-hero.png') center/cover no-repeat !important;
  border-bottom: 3px solid var(--mw-ink) !important;
}
.hero-banner .hero-overlay {
  position: absolute !important; inset: 0 !important;
  background: linear-gradient(100deg, rgba(14,49,80,.82) 0%, rgba(14,49,80,.55) 46%, rgba(14,49,80,.15) 100%) !important;
}
.hero-inner { position: relative; z-index: 2; text-align: left; }
.hero-kicker {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: .2em;
  color: #9BE9F2; margin-bottom: 14px;
}
.hero-title {
  font-family: var(--mw-display) !important;
  font-size: clamp(30px, 4.6vw, 52px) !important;
  color: #FFFFFF !important;
  line-height: 1.28 !important;
  margin: 0 0 14px !important;
  text-shadow: 0 3px 0 rgba(27,32,67,.45) !important;
}
.hero-sub {
  color: #E3F7FA !important;
  font-size: 16px !important;
  max-width: 30em;
  margin: 0 0 26px !important;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-btn {
  display: inline-flex; align-items: center;
  font-family: var(--mw-display);
  font-size: 16px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 3px solid var(--mw-ink);
  box-shadow: var(--mw-pop);
  text-decoration: none;
  transition: transform .08s ease, box-shadow .08s ease;
}
.hero-btn--primary { background: var(--mw-pink); color: #fff !important; }
.hero-btn--ghost   { background: var(--mw-sun);  color: var(--mw-ink) !important; }
.hero-btn:hover { filter: brightness(1.05); }
.hero-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--mw-ink); }

/* ---------- 콘텐츠 카드 (차분하게) ---------- */
.card, .board-section, .widget, .side-widget, .g5-side-box,
.maple-showcase-card, .admin-table-container, .modal-content, .board-preview {
  background: var(--mw-cloud) !important;
  border: 2px solid var(--mw-line) !important;
  border-radius: var(--mw-radius) !important;
  box-shadow: var(--mw-shadow) !important;
}

.section-header {
  border-bottom: 2px solid var(--mw-sky-light) !important;
  padding-bottom: 10px !important;
  margin-bottom: 12px !important;
}
.section-header h3 { display: flex; align-items: center; gap: 8px; }
.section-header h3 i { color: var(--mw-sky-deep) !important; }
.more-btn {
  font-size: 13px !important; font-weight: 700 !important;
  color: var(--mw-sky-deep) !important;
  background: var(--mw-sky-pale) !important;
  border-radius: 999px !important; padding: 5px 12px !important;
}
.more-btn:hover { background: var(--mw-sky-light) !important; }

/* 쇼케이스 3단 */
.maple-showcase {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 18px !important;
  margin-bottom: 26px !important;
}
.maple-showcase-card { overflow: hidden !important; }
.maple-showcase-card img {
  width: 100% !important; height: 168px !important;
  object-fit: cover !important; display: block !important;
  border-bottom: 2px solid var(--mw-line) !important;
}
.maple-showcase-copy { padding: 16px 18px 20px !important; }
.maple-showcase-kicker {
  display: inline-block; font-size: 10px; font-weight: 800;
  letter-spacing: .18em; color: var(--mw-pink) !important; margin-bottom: 6px;
}
.maple-showcase-copy h3 { margin: 0 0 8px !important; }
.maple-showcase-copy p { font-size: 14px !important; color: var(--mw-ink-soft) !important; }

/* ---------- 버튼 (시그니처: 스티커) ---------- */
.btn-primary, .btn-submit, input[type="submit"], .mw-refresh {
  font-family: var(--mw-display) !important;
  background: var(--mw-pink) !important;
  color: #FFFFFF !important;
  border: 3px solid var(--mw-ink) !important;
  border-radius: 999px !important;
  box-shadow: var(--mw-pop) !important;
  padding: 11px 22px !important;
  font-size: 15px !important;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
.btn-primary:hover, .mw-refresh:hover { filter: brightness(1.06); }
.btn-primary:active, .mw-refresh:active {
  transform: translateY(3px); box-shadow: 0 0 0 var(--mw-ink) !important;
}
.btn-secondary {
  font-family: var(--mw-display) !important;
  background: var(--mw-cloud) !important; color: var(--mw-ink) !important;
  border: 3px solid var(--mw-ink) !important;
  border-radius: 999px !important; box-shadow: var(--mw-pop) !important;
}
.mw-refresh-row { text-align: right; margin-bottom: 20px; }

.btn-edit, .btn-delete, .btn-sm {
  border: 2px solid var(--mw-ink) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 0 var(--mw-ink) !important;
}
.btn-delete { background: var(--mw-coral) !important; color: #fff !important; }
.btn-edit   { background: var(--mw-sun) !important;   color: var(--mw-ink) !important; }

/* ---------- 탭 ---------- */
.tab-btn {
  font-family: var(--mw-display) !important;
  border: 3px solid var(--mw-ink) !important;
  border-radius: 999px !important;
  background: var(--mw-cloud) !important;
  color: var(--mw-ink) !important;
  box-shadow: var(--mw-pop) !important;
}
.tab-btn.active { background: var(--mw-sun) !important; }

/* ---------- 표 ---------- */
.admin-table thead th, .board-table thead th {
  font-family: var(--mw-display) !important;
  background: var(--mw-sky-pale) !important;
  color: var(--mw-ink) !important;
  border-bottom: 2px solid var(--mw-sky-light) !important;
}
.admin-table tbody td, .board-table tbody td {
  color: var(--mw-ink) !important;
  border-bottom: 1px solid var(--mw-line) !important;
}
.admin-table tbody tr:hover, .board-table tbody tr:hover { background: var(--mw-sky-pale) !important; }

/* ---------- 입력 ---------- */
input[type="text"], input[type="password"], input[type="number"], input[type="email"],
input[type="date"], input[type="datetime-local"], select, textarea {
  font-family: var(--mw-body) !important;
  border: 2px solid var(--mw-line) !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  color: var(--mw-ink) !important;
  padding: 10px 14px !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--mw-sky-deep) !important;
  outline: 3px solid rgba(14,143,181,.25) !important;
  outline-offset: 0;
}

/* ---------- 플로팅 연락 버튼 ---------- */
.contact-floating-btn {
  border: 3px solid var(--mw-ink) !important;
  border-radius: 22px !important;
  box-shadow: var(--mw-pop) !important;
  background: var(--mw-sun) !important;
  color: var(--mw-ink) !important;
}
.kakao-floating-btn { background: var(--mw-pink) !important; color: #FFFFFF !important; }
.contact-floating-btn::before {
  font-family: var(--mw-body) !important;
  font-weight: 700 !important;
  background: #FFFFFF !important;
  color: var(--mw-ink) !important;
  border: 2px solid var(--mw-ink) !important;
  border-radius: 12px !important;
  box-shadow: 0 3px 0 var(--mw-ink) !important;
}

/* ---------- 비공식 표기 ---------- */
.mw-disclaimer {
  text-align: center;
  font-size: 12px;
  color: var(--mw-ink);
  opacity: .8;
  padding: 18px 16px 30px;
  line-height: 1.7;
}

/* ---------- 접근성 ---------- */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--mw-sun);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- 반응형 ---------- */
@media (max-width: 900px) {
  .hero-banner { min-height: 320px !important; padding: 40px 0 !important; }
  .hero-banner .hero-overlay {
    background: linear-gradient(180deg, rgba(14,49,80,.55) 0%, rgba(14,49,80,.85) 100%) !important;
  }
}
@media (max-width: 640px) {
  body { font-size: 15px !important; }
  .header .logo h1, .logo h1 { font-size: 20px !important; }
  .header .logo .logo-image, .logo-image { width: 38px !important; height: 38px !important; }
  .main-nav ul li a, .main-nav a { font-size: 12.5px !important; padding: 7px 11px !important; }
  .hero-btn { font-size: 14px; padding: 11px 20px; }
  .maple-showcase-card img { height: 140px !important; }
}