/* ============================================
   WEAVE - Modern Volunteer Organization Style
   ============================================ */

:root {
  --primary: #31b7ff;
  --primary-dark: #0a96d1;
  --primary-light: #e6f7ff;
  --secondary: #f5f6fa;
  --text-dark: #1a1a1a;
  --text-light: #666666;
  --border-color: #e0e0e0;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.15);
  --hero-bg-image: image-set(url('/Background.jpg') 1x, url('/Background.jpg') 2x);
  --hero-bg-pos-x: 50%;
  --hero-bg-pos-y: 45%;
  --fs-heading-lg: clamp(1.6rem, 3.3vw, 2.4rem);
  --fs-heading-md: clamp(1.25rem, 2.2vw, 1.8rem);
  --fs-body: clamp(0.95rem, 1.3vw, 1.02rem);
  --fs-label: clamp(0.8rem, 1.1vw, 0.9rem);
  --fs-meta: clamp(0.74rem, 1vw, 0.84rem);
  --fs-button: clamp(0.84rem, 1.05vw, 0.96rem);
  --fs-table: clamp(0.82rem, 1.02vw, 0.94rem);
  --space-1: clamp(0.25rem, 0.4vw, 0.4rem);
  --space-2: clamp(0.45rem, 0.7vw, 0.65rem);
  --space-3: clamp(0.8rem, 1vw, 1rem);
  --toolbar-btn-min-inline: clamp(88px, 22vw, 122px);
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-bottom-nav-height: 74px;
  --mobile-overlay-offset: calc(var(--mobile-bottom-nav-height) + var(--safe-area-bottom));
  --z-mobile-cta: 1025;
  --z-mobile-nav: 1030;
  --vh: 1vh;
  --panel-vh: 1dvh;
}

@media (max-width: 359px) {
  :root {
    --mobile-bottom-nav-height: 68px;
  }
}

@media (min-width: 360px) and (max-width: 768px) {
  :root {
    --mobile-bottom-nav-height: 74px;
  }
}

/* ============ BASE & TYPOGRAPHY ============ */
* {
  scroll-behavior: smooth;
}

html {
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text-dark);
  background: #ffffff;
  line-height: 1.6;
  overflow-x: clip;
}

/* Bootstrap utility fallback (offline/CDN fail-safe) */
.d-none {
  display: none !important;
}

img,
video,
canvas,
svg {
  max-inline-size: 100%;
  block-size: auto;
}


.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 2000;
  padding: 8px 12px;
  border-radius: 8px;
  background: #0d6efd;
  color: #fff;
  font-weight: 700;
}

.skip-link:focus {
  top: 8px;
  color: #fff;
}

.brand-bg {
  background: #31b7ff;
}

.anim-delay-100 { animation-delay: 0.1s; }
.anim-delay-200 { animation-delay: 0.2s; }
.anim-delay-300 { animation-delay: 0.3s; }
.anim-delay-400 { animation-delay: 0.4s; }

.content-prewrap {
  white-space: pre-wrap;
}

:focus-visible {
  outline: 3px solid rgba(49, 183, 255, 0.9);
  outline-offset: 2px;
}

main {
  padding-top: calc(88px + var(--safe-area-top));
  overflow-x: clip;
}

section[id] {
  scroll-margin-top: calc(92px + var(--safe-area-top));
}

@media (max-width: 768px) {
  :root {
    --hero-bg-image: image-set(url('/Background.jpg') 1x, url('/Background.jpg') 2x);
  }
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.5px;
}

h1, .display-5 {
  font-size: var(--fs-heading-lg);
}

h2, h3 {
  font-size: var(--fs-heading-md);
}

.display-3, .display-4, .display-5 {
  font-weight: 800;
  letter-spacing: -1px;
}

p {
  font-size: var(--fs-body);
  color: var(--text-light);
  overflow-wrap: anywhere;
  word-break: keep-all;
  text-wrap: pretty;
}

.small,
small,
.text-muted {
  font-size: var(--fs-meta);
}

.btn,
button {
  font-size: var(--fs-button);
}

.table td,
.table th {
  font-size: var(--fs-table);
}

.modal-body .form-control,
.modal-body .form-select {
  max-inline-size: min(100%, 620px);
}

.modal-step-hint {
  margin-bottom: 12px;
  font-size: var(--fs-meta);
  font-weight: 700;
  color: #3a5a73;
}

.responsive-search-input {
  min-width: 0;
  width: min(100%, 220px);
}

.responsive-toolbar {
  width: 100%;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.responsive-toolbar.news-toolbar,
.responsive-toolbar.faq-toolbar,
.responsive-toolbar.qna-toolbar,
.responsive-toolbar.gallery-toolbar {
  justify-content: flex-end;
}

.responsive-toolbar.ops-toolbar {
  justify-content: flex-end;
}

.site-edit-history-select {
  max-width: 220px;
}

.logo-inline-responsive {
  max-width: 220px;
  width: 100%;
  height: auto;
}

.admin-preview-image {
  max-height: 180px;
  display: none;
}

.policy-scroll-box {
  max-height: 140px;
  overflow-y: auto;
  font-size: 12px;
  scrollbar-gutter: stable;
}

.social-icon-btn {
  min-width: 48px;
  min-height: 48px;
  width: 48px;
  height: 48px;
  line-height: 34px;
}

.ops-action-col {
  width: 220px;
}

.th-num { width: 10%; }
.th-author,
.th-date { width: 15%; }
.th-metric,
.th-admin { width: 10%; }

a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--primary-dark);
}

/* ============ HEADER / NAV ============ */
.site-header {
  background: white;
  border-bottom: 1px solid var(--border-color);
  transition: all 0.3s ease;
  z-index: 1000;
  padding-left: var(--safe-area-left);
  padding-right: var(--safe-area-right);
  padding-top: var(--safe-area-top);
}

.navbar {
  padding: 0.8rem 0;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.3rem;
  color: var(--primary) !important;
}

.logo-wrapper {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  border-radius: 50%;
  overflow: hidden;
}

.logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  transform: translateZ(0);
}

.nav-link {
  color: white !important;
  font-weight: 500;
  position: relative;
  transition: color 0.2s ease;
  padding: 8px 0 !important;
}

#mobile-bottom-nav .mobile-tab {
  min-height: 48px;
  min-width: 48px;
  padding: 10px 8px;
}

.app-toast {
  position: fixed;
  right: 16px;
  bottom: calc(16px + var(--safe-area-bottom));
  z-index: 2200;
  max-width: min(420px, calc(100vw - 24px));
  padding: 11px 14px;
  border-radius: 10px;
  background: rgba(20, 26, 34, 0.93);
  color: #fff;
  font-size: 0.92rem;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.app-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.news-title-badge {
  margin-left: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #8a5b00;
  background: #fff2cc;
  border: 1px solid #f1cc78;
  border-radius: 999px;
  padding: 1px 7px;
  vertical-align: middle;
}

.search-highlight {
  background: #fff2a8;
  color: #213547;
  border-radius: 4px;
  padding: 0 2px;
  font-weight: 700;
}

.deadline-badge {
  margin-left: 6px;
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 8px;
  border: 1px solid transparent;
}

.deadline-badge.dday-open {
  background: #e8f8ff;
  color: #066089;
  border-color: #8fd3f4;
}

.deadline-badge.dday-today {
  background: #fff4d6;
  color: #8f5a00;
  border-color: #efc979;
}

.deadline-badge.dday-closed {
  background: #f2f4f7;
  color: #6b7280;
  border-color: #cfd5df;
}

.period-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 8px;
  border: 1px solid transparent;
}

.period-badge.period-day {
  background: #eef7ff;
  color: #0f5d86;
  border-color: #a8d4ef;
}

.period-badge.period-overnight {
  background: #f4f1ff;
  color: #5240a2;
  border-color: #cfc7f3;
}

.period-badge.period-long {
  background: #fff3e8;
  color: #9b5514;
  border-color: #efc8a8;
}

.detail-pager .btn {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-pager {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 auto;
}

.detail-pager .detail-pager-btn {
  min-width: 88px;
  max-width: 124px;
  padding: 0.34rem 0.72rem;
  line-height: 1.2;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: white;
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-with-submenu {
  position: relative;
}

.nav-submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 8px 0;
  display: none;
  z-index: 1100;
}

.nav-submenu::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 9px;
}

.nav-submenu a {
  display: block;
  padding: 8px 12px;
  font-size: 0.9rem;
  color: var(--text-dark) !important;
}

.nav-submenu a:hover {
  background: var(--primary-light);
  color: var(--primary-dark) !important;
}

.nav-with-submenu:hover .nav-submenu {
  display: block;
}

.nav-with-submenu:focus-within .nav-submenu {
  display: block;
}

.nav-with-submenu.submenu-suppressed .nav-submenu {
  display: none;
}

.nav-submenu a:focus-visible {
  background: var(--primary-light);
  color: var(--primary-dark) !important;
}

#auth-buttons button,
#user-profile button {
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.2s ease;
}

#auth-buttons .btn-outline-primary:hover {
  background: var(--primary);
  border-color: var(--primary);
}

#auth-buttons .btn-primary {
  background: var(--primary);
  border-color: var(--primary);
}

#auth-buttons .btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

#user-profile {
  display: none !important;
}

#user-profile.show {
  display: flex !important;
}

#site-edit-history-select {
  min-width: 180px;
}

body.site-edit-mode .site-editable-text {
  outline: 2px dashed rgba(255, 193, 7, 0.9);
  outline-offset: 2px;
  border-radius: 6px;
  background: rgba(255, 248, 220, 0.25);
  cursor: text;
}

body.site-edit-mode .site-editable-text:focus {
  outline-color: rgba(255, 140, 0, 0.95);
  background: rgba(255, 248, 220, 0.42);
}

body.site-edit-mode .site-editable-image {
  outline: 3px dashed rgba(255, 193, 7, 0.9);
  outline-offset: 3px;
  cursor: pointer;
  filter: saturate(1.05);
}

.hero-text-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  background-image: url('logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.22;
  z-index: 0;
  pointer-events: none;
}

.hero-text-bg {
  display: none;
}

.hero-main-logo {
  width: min(300px, 62vw);
  height: auto;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.35)) contrast(1.08) saturate(1.08);
  transform: translateZ(0);
}

.hero-logo-stage {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(560px, 86vw);
  min-height: 240px;
  padding: 24px;
}

.hero-logo-stage .hero-main-logo {
  position: relative;
  z-index: 1;
}

#home {
  margin-top: -88px;
  padding-top: calc(88px + 3rem) !important;
}

#home,
#home-notice-carousel {
  position: relative;
}

.hero-background-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-bg-pos-x) var(--hero-bg-pos-y);
  pointer-events: none;
}
#home::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg-image);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: var(--hero-bg-pos-x) var(--hero-bg-pos-y);
  filter: blur(1px);
  transform: scale(1.01);
  z-index: 0;
  pointer-events: none;
}

#home::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#home::after {
  background: linear-gradient(180deg, rgba(11, 18, 28, 0.32) 0%, rgba(11, 18, 28, 0.46) 100%);
}

#home-notice-carousel::after {
  content: none;
}

#home .container,
#home-notice-carousel .container,
#home .hero-scroll-hint {
  position: relative;
  z-index: 1;
}

#home-notice-carousel {
  background: #f8f9fa !important;
}

#home p.lead,
#home .hero-subtext {
  color: #f5f8ff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

#home p.lead {
  font-size: clamp(1.3rem, 2.15vw, 1.85rem) !important;
  font-weight: 800;
  line-height: 1.45;
}

#home .hero-subtext {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 700;
  line-height: 1.6;
}

#home p.lead strong {
  font-weight: 900;
}

#home .btn-outline-primary {
  background: rgba(255, 255, 255, 0.96);
  border-color: var(--primary-dark);
  color: var(--primary-dark);
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

#home .btn-outline-primary:hover {
  background: rgba(255, 255, 255, 1);
  color: var(--primary-dark);
}

.hero-bg-editor {
  max-width: 460px;
  margin: 0 auto;
}

.home-hero-quick-tools {
  max-width: min(560px, 92vw);
  margin: 0 auto;
}

.home-hero-quick-tools .card {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(4px);
}

.hero-bg-preview-canvas {
  width: 100%;
  height: 170px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background-image: var(--hero-bg-image);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: var(--hero-bg-pos-x) var(--hero-bg-pos-y);
  cursor: grab;
  position: relative;
  touch-action: none;
}

.hero-bg-preview-canvas::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hero-bg-preview-canvas.dragging {
  cursor: grabbing;
}

.site-editable-text:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
  border-radius: 4px;
}

.weave-calendar-table {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.weave-calendar-cell {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  min-height: 70px;
  background: #fff;
  padding: 8px;
  min-width: 0;
}

.weave-calendar-cell.header {
  min-height: auto;
  text-align: center;
  font-weight: 700;
  background: var(--primary-light);
}

.weave-calendar-cell.day {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  text-align: left;
}

.weave-calendar-cell.day .day-main {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.weave-calendar-cell.day .day-num {
  font-weight: 700;
}

.weave-calendar-cell.day .day-title {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weave-calendar-cell.day .day-count {
  font-size: 12px;
  color: var(--text-light);
}

.weave-calendar-cell.day.has-activity {
  background: var(--primary-light);
  border-color: rgba(49, 183, 255, 0.35);
}

.weave-calendar-cell.day.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(49, 183, 255, 0.2);
}

.weave-calendar-cell.empty {
  background: transparent;
  border: none;
}

#home-calendar-mini-grid .weave-calendar-cell {
  min-height: 52px;
  padding: 6px;
}

#home-calendar-mini-grid .weave-calendar-cell.header {
  min-height: auto;
  padding: 4px;
  font-size: 12px;
}

.activity-focus-highlight {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(49, 183, 255, 0.2), var(--shadow-sm);
  animation: activityPulse 2.4s ease-out;
}

@keyframes activityPulse {
  0% { transform: scale(1.00); }
  15% { transform: scale(1.01); }
  100% { transform: scale(1.00); }
}

.profile-avatar {
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

#myinfo .myinfo-shell {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(11, 51, 77, 0.12);
}

#myinfo .myinfo-body {
  background:
    radial-gradient(640px 220px at 50% -150px, rgba(49, 183, 255, 0.22), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
}

#myinfo .profile-avatar {
  width: 112px;
  height: 112px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #edf8ff 0%, #dff2ff 100%);
  border: 1px solid rgba(49, 183, 255, 0.24);
  box-shadow: 0 8px 22px rgba(13, 93, 138, 0.12);
}

#myinfo #profile-name {
  color: #0f4266;
  letter-spacing: -0.02em;
}

#myinfo #profile-email {
  font-size: 0.95rem;
}

#myinfo .myinfo-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#myinfo #profile-details > div {
  background: #ffffff;
  border: 1px solid rgba(67, 131, 166, 0.16);
  border-radius: 10px;
  padding: 8px 10px;
  color: #2d5268;
  line-height: 1.45;
}

#myinfo .myinfo-notification-card,
#myinfo .myinfo-nickname-card {
  border: 1px solid rgba(67, 131, 166, 0.2) !important;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86) !important;
}

#my-activity-summary .badge {
  font-size: 0.84rem;
  color: #1f4f6b;
  border-color: rgba(67, 131, 166, 0.28) !important;
  background: #f4fbff !important;
  padding: 0.5rem 0.62rem;
  border-radius: 999px;
}

#myinfo #my-notifications-list .list-group-item {
  border-radius: 10px;
  border: 1px solid rgba(67, 131, 166, 0.16);
  margin-bottom: 6px;
}

#myinfo #profile-joindate {
  display: inline-block;
  background: #eef8ff;
  border: 1px solid rgba(49, 183, 255, 0.2);
  border-radius: 999px;
  padding: 6px 12px;
}

@media (max-width: 768px) {
  #myinfo .myinfo-detail-grid {
    grid-template-columns: 1fr;
  }
}

#change-password-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

#logout-btn-profile {
  font-weight: 600;
}

/* ============ HERO SECTION ============ */
.hero {
  position: relative;
  min-height: 72vh;
  min-height: 72svh;
  min-height: 72dvh;
  display: none;
  align-items: center;
  justify-content: center;
  color: white;
  overflow: hidden;
}

.hero-content-row {
  min-height: 56vh;
  min-height: 56svh;
  min-height: 56dvh;
}

.hero.panel-active {
  display: flex !important;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--primary) 0%, #0689c1 100%);
  z-index: -1;
}

.hero-logo-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  background-image: url('logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.08;
  z-index: 0;
  pointer-events: none;
}

.hero h1 {
  font-size: clamp(2.5rem, 8vw, 4rem);
  margin-bottom: 1rem;
  line-height: 1.1;
}

.hero .text-primary {
  background: linear-gradient(135deg, #31b7ff, #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-scroll-hint {
  position: absolute;
  bottom: 20px;
  animation: bounce 2s infinite;
  cursor: pointer;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

/* ============ STATS SECTION ============ */
.stats-section {
  background: linear-gradient(180deg, #f0f9ff 0%, #f8fbff 100%);
}

.stat-card {
  padding: 2rem;
  text-align: center;
  background: white;
  border-radius: 12px;
  min-height: 190px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
  }
}

.stat-number {
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  font-weight: 800;
  margin-bottom: 0.5rem;
  line-height: 1.2;
  word-break: keep-all;
}

.stat-label {
  color: var(--text-light);
  font-size: 0.9rem;
}

/* ============ SECTION HEADERS ============ */
.section-header {
  margin-bottom: 3rem;
}

.section-header h2 {
  position: relative;
  display: inline-block;
  padding-bottom: 1rem;
}

.section-header h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
  border-radius: 2px;
}

/* ============ PANELS ============ */
.panel {
  display: none;
  min-height: calc((var(--panel-vh, var(--vh, 1vh)) * 100) - 80px);
  min-height: calc(100vh - 80px);
  min-height: calc(100svh - 80px);
  min-height: calc(100dvh - 80px);
  padding: 24px 0 64px;
  animation: fadeIn 0.5s ease;
  content-visibility: auto;
  contain-intrinsic-size: 920px auto;
}

.panel-active {
  display: block !important;
  content-visibility: visible;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mobilePanelFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ============ ABOUT SECTION ============ */
#about {
  padding: 6rem 0;
}

#about-volunteer-image {
  width: min(100%, 720px);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

.info-card {
  background: var(--primary-light) !important;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .info-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
  }
}

.info-card h4 {
  color: var(--primary);
  font-size: 1.1rem;
}

.info-card p {
  font-size: 0.95rem;
  margin: 0;
}

.about-tab-nav .btn {
  min-width: 130px;
}

.executive-card {
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.executive-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #eef5fb;
}

.executive-card-admin {
  border-style: dashed;
}

.list-toolbar {
  margin-top: 0.25rem;
}

.detail-meta-card {
  background: var(--primary-light);
  border: 1px solid rgba(49, 183, 255, 0.35);
  border-radius: 12px;
  padding: 0.9rem 1rem;
}

.detail-meta-author {
  font-weight: 700;
  color: var(--text-dark);
}

.detail-meta-stats {
  font-weight: 400;
  color: var(--text-dark);
}

.detail-meta-date,
.detail-meta-volunteer {
  font-size: 0.92rem;
  color: var(--text-light);
}

.detail-meta-key {
  font-weight: 700;
  color: #31556d;
}

.detail-meta-value {
  color: #2f4c60;
}

.detail-volunteer-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.detail-volunteer-calendar-btn {
  border-radius: 999px;
  padding: 0.26rem 0.62rem;
  font-weight: 700;
}

#news-detail .card,
#gallery-detail .card {
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(8, 36, 56, 0.1);
}

#news-detail-title,
#gallery-detail-title {
  letter-spacing: -0.01em;
  line-height: 1.35;
}

#news-detail-content,
#gallery-detail-content {
  line-height: 1.72;
  color: #263947;
}

/* ============ ACTIVITY CARDS ============ */
.activity-card {
  padding: 2rem;
  text-align: center;
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  transition: all 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .activity-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(49, 183, 255, 0.15);
    transform: translateY(-5px);
  }
}

.activity-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-light);
}

.activity-card h4 {
  font-size: 1.15rem;
  margin-bottom: 0.8rem;
  color: var(--text-dark);
}

.activity-card p {
  font-size: 0.9rem;
  margin-bottom: 0;
}
/* Default accessible ON/OFF control. Every post setting uses the reservation
   publishing switch so size, color, keyboard behavior, and labels stay aligned. */
.weave-form-toggle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem .55rem;
  padding-left: 0;
}

.weave-form-toggle .form-check-input {
  float: none;
  flex: 0 0 auto;
  margin: .125em 0 0;
  cursor: pointer;
}

.weave-form-toggle .form-check-label {
  margin: 0;
  font-weight: 700;
  cursor: pointer;
}

.weave-form-toggle > small,
.weave-form-toggle > .row {
  flex-basis: 100%;
}

/* Activity overview cards keep their familiar icon layout until a staff image
   is saved. Custom photographs receive an overlay for reliable text contrast. */
.activity-card[data-activity-card-key] {
  position: relative;
  overflow: hidden;
}

.activity-card.has-custom-background {
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
  background-image: linear-gradient(145deg, rgba(5, 38, 61, .82), rgba(7, 115, 165, .56)), var(--activity-card-image);
  background-position: center;
  background-size: cover;
}

.activity-card.has-custom-background h4,
.activity-card.has-custom-background p {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .32);
}

.activity-card.has-custom-background .activity-icon {
  color: #fff;
  background: rgba(255, 255, 255, .88);
}

.activity-card-image-control {
  position: absolute;
  top: .7rem;
  right: .7rem;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, .9);
  color: #12425c;
  background: rgba(255, 255, 255, .93);
  border-radius: 999px;
  padding: .28rem .52rem;
  font-size: .73rem;
  font-weight: 700;
}

.activity-card-image-control:hover,
.activity-card-image-control:focus-visible {
  color: #fff;
  background: #087bb7;
}

/* ============ GENERATION SECTION ============ */
#generation {
  padding: 6rem 0;
}

.generation-featured {
  background: linear-gradient(180deg, #f8fbff 0%, #f0f9ff 100%);
  border-radius: 16px;
  padding: 3rem;
  margin-bottom: 3rem;
}

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

.emblem-circle {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-lg);
}

.emblem-text {
  font-size: 3.5rem;
  font-weight: 800;
}

.generation-featured h3 {
  margin-top: 1.5rem;
  font-size: 1.8rem;
}

.generation-card {
  background: white;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 1.8rem;
  text-align: center;
  transition: all 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .generation-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
  }
}

.generation-num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.generation-card h5 {
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}

.stats-row {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-top: 1rem;
}

/* ============ GALLERY ============ */
#gallery {
  padding: 6rem 0;
}

.gallery-filter {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.gallery-filter .btn {
  padding: 0.5rem 1.2rem;
  font-size: 0.9rem;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.gallery-filter .btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.gallery-grid {
  margin-top: 2rem;
}

.gallery-card {
  min-height: clamp(250px, 42vw, 310px);
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  container-name: gallery-card;
  content-visibility: auto;
  contain-intrinsic-size: 300px auto;
  contain: layout style paint;
}

.gallery-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, #eef5fb 0%, #e3edf6 100%);
  overflow: hidden;
}

.gallery-card.is-loading .gallery-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.58) 45%, rgba(255, 255, 255, 0) 70%);
  transform: translateX(-110%);
  animation: galleryImageShimmer 1.2s ease-in-out infinite;
}

.gallery-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-card-image {
  opacity: 0;
  transition: opacity 0.24s ease, transform 0.3s ease;
}

.gallery-card-image.is-ready {
  opacity: 1;
}

.gallery-caption {
  flex: 1 1 auto;
}

.gallery-caption h6 {
  font-size: 0.95rem;
  margin: 0;
  color: var(--text-dark);
}

@media (hover: hover) and (pointer: fine) {
  .gallery-card:hover img {
    transform: scale(1.1);
  }
}

.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(49, 183, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .gallery-card:hover .gallery-overlay {
    opacity: 1;
  }
}

/* Gallery Modal */
.gallery-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.gallery-modal.active {
  display: flex;
}

.gallery-modal .modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.gallery-modal .modal-content {
  position: relative;
  background: white;
  width: min(95vw, 700px);
  border-radius: 12px;
  overflow: hidden;
  z-index: 10;
}

.gallery-modal .btn-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 11;
}

.gallery-modal img {
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: cover;
}

/* ============ COMMENTS ============ */
.comment-list {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1rem;
}

.comment-item {
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--border-color);
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-author {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--primary);
}

.comment-text {
  font-size: 0.9rem;
  margin: 0.4rem 0;
  color: var(--text-dark);
}

.comment-time {
  font-size: 0.75rem;
  color: var(--text-light);
}

.comment-reply {
  margin-left: 1.25rem;
  padding-left: 0.8rem;
  border-left: 2px solid var(--border-color);
}

.comment-time .btn {
  line-height: 1.1;
}

.editor-toolbar {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.rich-editor {
  min-height: 180px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.75rem;
  background: #fff;
  overflow-y: auto;
}

.rich-editor:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 0.2rem rgba(49, 183, 255, 0.2);
}

.gallery-image-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0;
}

.gallery-image-grid-item {
  position: relative;
  border: 1px solid #d6e6f2;
  border-radius: 10px;
  overflow: hidden;
  background: #f7fbff;
  cursor: grab;
  user-select: none;
}

.gallery-image-grid-item.is-dragging {
  opacity: 0.6;
  cursor: grabbing;
}

.gallery-image-pin-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(18, 67, 96, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #1e5f84;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  line-height: 1;
}

.gallery-image-delete-btn {
  position: absolute;
  top: 6px;
  left: 6px;
  min-width: 38px;
  height: 28px;
  border: 1px solid rgba(210, 57, 57, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #c53030;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  padding: 0 8px;
}

.gallery-image-grid-item.is-pinned {
  border-color: #31b7ff;
  box-shadow: 0 0 0 2px rgba(49, 183, 255, 0.2);
}

.gallery-image-grid-item.is-pinned::after {
  content: '대표';
  position: absolute;
  right: 6px;
  bottom: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(49, 183, 255, 0.95);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.gallery-image-pin-btn.active {
  background: #31b7ff;
  color: #fff;
  border-color: #31b7ff;
}

.gallery-image-grid-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.editor-inline-image-wrap {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
}

.editor-inline-image-wrap > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

#news-detail-content img,
#gallery-detail-content img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}#news-detail-content video,
#gallery-detail-content video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0.9rem 0;
  border-radius: 14px;
  background: #122536;
  box-shadow: 0 10px 22px rgba(26, 86, 122, 0.14);
}

.editor-image-delete-btn {
  position: absolute;
  top: 8px;
  left: 8px;
  min-width: 42px;
  height: 28px;
  border: 1px solid rgba(210, 57, 57, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #c53030;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  padding: 0 9px;
}

.editor-delete-confirm-thumb {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border: 1px solid #d9e8f4;
  border-radius: 10px;
  background: #f7fbff;
  padding: 4px;
}

.image-dropzone {
  border: 2px dashed var(--border-color);
  border-radius: 10px;
  padding: 0.9rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.2s ease;
}

.image-dropzone:hover,
.image-dropzone.dragover {
  border-color: var(--primary);
  color: var(--primary-dark);
  background: var(--primary-light);
}

.modal-lg {
  max-width: 600px;
}

/* ============ NEWS CARDS ============ */
#news {
  padding: 6rem 0;
}

.news-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  container-type: inline-size;
  container-name: news-card;
  content-visibility: auto;
  contain-intrinsic-size: 260px auto;
  contain: layout style paint;
}

#ops-dashboard .card {
  container-type: inline-size;
  container-name: ops-card;
}

@container gallery-card (max-width: 260px) {
  .gallery-caption h6 {
    font-size: 0.85rem;
  }
}

@container news-card (max-width: 300px) {
  .news-body {
    padding: 1rem;
  }

  .news-title {
    font-size: 1rem;
  }
}

@container ops-card (max-width: 300px) {
  .card-title {
    font-size: 0.95rem;
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 480px) {
    .gallery-caption h6 {
      font-size: 0.85rem;
    }

    .news-body {
      padding: 1rem;
    }

    .news-title {
      font-size: 1rem;
    }

    #ops-dashboard .card-title {
      font-size: 0.95rem;
    }
  }
}

@media (hover: hover) and (pointer: fine) {
  .news-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-5px);
  }
}

.news-thumb {
  width: 100%;
  height: clamp(150px, 28vw, 200px);
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .news-card:hover .news-thumb {
    transform: scale(1.05);
  }
}

.news-body {
  padding: 1.5rem;
}

.news-date {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.news-title {
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
  color: var(--text-dark);
  line-height: 1.4;
}

.news-excerpt {
  font-size: 0.9rem;
  color: var(--text-light);
  margin-bottom: 1rem;
}

.news-link {
  font-size: 0.9rem;
  color: var(--primary);
  font-weight: 600;
  transition: all 0.2s ease;
}

.news-link:hover {
  color: var(--primary-dark);
}

/* ============ JOIN SECTION ============ */
#join {
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
  background: #ffffff !important;
  color: var(--text-dark) !important;
}

.bg-primary-gradient {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
}

.join-bg-animation {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(255,255,255,0.05) 0%, transparent 50%);
  z-index: 0;
}

#join .join-bg-animation {
  display: none;
}

#join h2,
#join h5,
#join p,
#join .text-white-75,
#join .text-white-50,
#join .join-benefit p {
  color: var(--text-dark) !important;
}

#join .btn-light {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

#join .btn-outline-light {
  border-color: var(--primary);
  color: var(--primary);
}

#join .btn-outline-light:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary-dark);
}

.z-1 {
  position: relative;
  z-index: 1;
}

.join-benefit {
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.1);
}

.join-benefit i {
  color: white;
}

.join-benefit h5 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.join-benefit p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0;
}

#join .join-benefit-card {
  text-align: center;
}

#join .join-benefit-card h5 {
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
  color: var(--text-dark);
}

#join .join-benefit-card p {
  margin-bottom: 0;
  color: var(--text-light);
}

.text-white-75 {
  color: rgba(255, 255, 255, 0.75);
}

#write .nav-tabs {
  border-bottom: 0;
  gap: 0.6rem;
}

#write .nav-tabs .nav-link {
  color: var(--text-dark) !important;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 0.65rem 1.45rem;
  min-width: 132px;
  text-align: center;
}

#write .nav-tabs .nav-link.active {
  color: #fff !important;
  background: var(--primary);
  border-color: var(--primary);
}

.gallery-mini-calendar {
  border: 1px solid rgba(49, 183, 255, 0.28);
  border-radius: 12px;
  background: #f8fcff;
  padding: 10px 12px;
}

.gallery-mini-calendar-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: #27506b;
  font-size: 0.88rem;
}

.gallery-mini-months {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.gallery-mini-months.is-multi {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gallery-mini-month {
  border: 1px solid rgba(49, 183, 255, 0.18);
  border-radius: 10px;
  background: #fff;
  padding: 8px;
}

.gallery-mini-month-title {
  text-align: center;
  font-size: 0.84rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: #2f4f67;
}

.gallery-mini-weekdays,
.gallery-mini-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.gallery-mini-weekdays span {
  text-align: center;
  font-size: 0.68rem;
  color: #7890a3;
  font-weight: 700;
}

.gallery-mini-day {
  min-height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  font-size: 0.72rem;
  color: #355166;
  background: #f8fbff;
}

.gallery-mini-day.is-empty {
  background: transparent;
}

.gallery-mini-day.is-range {
  background: #dff2ff;
  color: #0f5376;
  font-weight: 700;
}

.gallery-mini-day.is-start,
.gallery-mini-day.is-end {
  background: #31b7ff;
  color: #fff;
}

.upload-progress-wrap .progress {
  height: 8px;
  border-radius: 999px;
  background: #ecf2f8;
}

.upload-progress-wrap .progress-bar {
  background: var(--primary);
}

.upload-total-gauge .progress {
  height: 8px;
  border-radius: 999px;
  background: #e8f0f7;
}

.upload-total-gauge .progress-bar {
  background: #1f8fd1;
}

.upload-queue-panel {
  border: 1px solid #d8e4ef;
  border-radius: 10px;
  padding: 8px 10px;
  background: #f9fcff;
}

.upload-queue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 132px;
  overflow-y: auto;
}

.upload-queue-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 4px 8px;
  align-items: center;
  border-bottom: 1px dashed #e2ecf5;
  padding: 4px 0;
  font-size: 0.82rem;
}

.upload-queue-item:last-child {
  border-bottom: 0;
}

.upload-queue-name {
  color: #2f4354;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-queue-status {
  font-weight: 700;
  color: #4f6475;
}

.upload-queue-item.is-success .upload-queue-status {
  color: #1d8f60;
}

.upload-queue-item.is-failed .upload-queue-status {
  color: #c13d3d;
}

.upload-queue-item.is-processing .upload-queue-status {
  color: #1f8fd1;
}

.upload-queue-item-retry {
  min-height: 28px;
  padding: 2px 8px;
  font-size: 0.75rem;
}

.upload-queue-reason {
  grid-column: 1 / -1;
  color: #a33f3f;
  font-size: 0.75rem;
}

@keyframes galleryImageShimmer {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(120%); }
}

#account-recovery .card {
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(10, 38, 58, 0.1);
}

#account-recovery .nav-tabs {
  gap: 8px;
  border-bottom: 0;
}

#account-recovery .nav-tabs .nav-link {
  border-radius: 999px;
  border: 1px solid rgba(49, 183, 255, 0.4);
  color: #2b485d !important;
  background: #ffffff !important;
  font-weight: 700;
}

#account-recovery .nav-tabs .nav-link.active {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary);
}

#account-recovery .btn.btn-primary {
  color: #fff !important;
}

#account-recovery .form-control {
  min-height: 46px;
  border-radius: 12px;
}

.login-page {
  min-height: calc(100vh - 180px);
  padding-top: clamp(5.5rem, 9vw, 7.5rem) !important;
  padding-bottom: clamp(4rem, 8vw, 6rem) !important;
  background:
    radial-gradient(circle at 12% 12%, rgba(49, 183, 255, 0.16), transparent 32%),
    linear-gradient(180deg, #f6fbff 0%, #ffffff 58%);
}

.login-page-card {
  border-radius: 22px;
  box-shadow: 0 18px 46px rgba(16, 72, 104, 0.13) !important;
}

.login-page h1 {
  color: #153247;
  font-weight: 800;
}

.login-page .form-control {
  min-height: 46px;
  border-radius: 12px;
}

.login-page #login-submit-btn {
  min-height: 48px;
  border-radius: 12px;
  font-weight: 800;
}

.login-page #login-submit-btn:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.login-page #login-error:not(.d-none) {
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  background: #fff1f1;
  border: 1px solid rgba(220, 53, 69, 0.25);
}
.signup-page {
  min-height: calc(100vh - 180px);
  padding-top: clamp(5.5rem, 9vw, 7.5rem) !important;
  padding-bottom: clamp(4rem, 8vw, 6rem) !important;
  background:
    radial-gradient(circle at 14% 10%, rgba(49, 183, 255, 0.2), transparent 34rem),
    linear-gradient(180deg, #f6fbff 0%, #ffffff 58%);
}

.signup-page-card {
  border-radius: 22px;
  box-shadow: 0 18px 46px rgba(16, 72, 104, 0.13) !important;
}

.signup-page-kicker {
  color: var(--weave-brand-ink);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.signup-page h1 {
  color: #153247;
  font-weight: 800;
}

.signup-page .form-control {
  min-height: 46px;
  border-radius: 12px;
}

.signup-page .policy-scroll-box {
  max-height: 170px;
  padding: 1rem !important;
  border-color: rgba(49, 183, 255, 0.32) !important;
  background: #fafdff;
}

.signup-page #signup-submit-btn {
  min-height: 48px;
  border-radius: 12px;
  font-weight: 800;
}

#home-notice-track .btn-link {
  color: var(--text-dark);
  text-decoration: none;
}

#home-notice-track {
  min-height: 60px;
}

#home-notice-track .btn-link:hover {
  color: var(--primary-dark);
}

#home-notice-dots {
  gap: 6px !important;
}

.home-notice-dot {
  width: 5px;
  height: 5px;
  min-width: 5px;
  min-height: 5px;
  aspect-ratio: 1 / 1;
  display: inline-block;
  box-sizing: border-box;
  appearance: none;
  border: 0;
  border-radius: 50%;
  background: #c6d4de;
  padding: 0;
  margin: 0;
  line-height: 0;
  font-size: 0;
  transition: transform 0.18s ease, background-color 0.18s ease;
}

.home-notice-dot.is-active {
  background: #199ddb;
  transform: scale(1.18);
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.5);
}

.border-white-50 {
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* ============ FOOTER ============ */
footer {
  background: #0f1419;
  padding: 3rem 0 1rem;
}

footer h5, footer h6 {
  color: white;
}

footer a {
  color: rgba(255, 255, 255, 0.6);
}

footer a:hover {
  color: var(--primary);
}

footer .btn {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.95rem;
}

.py-6 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

hr {
  margin: 1.5rem 0;
  opacity: 0.5;
}

/* ============ UTILITIES ============ */
.bg-primary-light {
  background: var(--primary-light) !important;
}

.text-primary {
  color: var(--primary) !important;
}

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(49, 183, 255, 0.4);
}

.btn-outline-light {
  border-color: rgba(255,255,255,0.8);
  color: white;
  transition: all 0.3s ease;
}

.btn-outline-light:hover {
  background: white;
  border-color: white;
  color: var(--primary);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
  #gallery-grid.mobile-cols-1 {
    grid-template-columns: 1fr;
  }

  #gallery-grid.mobile-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  main {
    padding-bottom: calc(var(--mobile-bottom-nav-height) + var(--safe-area-bottom) + 8px);
  }

  .navbar-brand span {
    font-size: clamp(0.85rem, 2.6vw, 1rem);
    max-inline-size: min(54vw, 230px);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .navbar {
    padding: 0.6rem 0;
  }

  .navbar-nav > .nav-item:not(:last-child) {
    display: none;
  }

  .navbar-nav .nav-with-submenu,
  .navbar-nav .nav-link[data-panel] {
    display: none !important;
  }

  .navbar-toggler {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
  }

  #navMenu {
    display: block !important;
    flex-basis: auto;
  }

  .offcanvas .list-group-item {
    border: 0;
    border-radius: 10px;
    margin-bottom: 4px;
    font-weight: 600;
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: -0.01em;
  }

  #mobileMenuDrawer {
    width: min(92vw, 380px);
    max-width: min(92vw, 380px);
  }

  #mobileMenuDrawer .offcanvas-header {
    padding-top: calc(0.8rem + var(--safe-area-top));
    padding-left: calc(0.9rem + var(--safe-area-left));
    padding-right: calc(0.9rem + var(--safe-area-right));
    backdrop-filter: blur(6px);
  }

  .offcanvas .list-group-item.is-active {
    background: var(--primary-light);
    color: #075f88;
    font-weight: 800;
  }

  .offcanvas .list-group-item i {
    transition: transform 0.2s ease;
  }

  .offcanvas .list-group-item[aria-expanded='true'] i {
    transform: rotate(180deg);
  }

  .offcanvas-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100dvh - 64px - var(--safe-area-top));
    padding-left: calc(12px + var(--safe-area-left));
    padding-right: calc(12px + var(--safe-area-right));
    padding-top: calc(8px + var(--safe-area-top));
    padding-bottom: calc(12px + var(--safe-area-bottom));
  }

  .mobile-menu-breadcrumb {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0;
    padding: 7px 10px;
    border-radius: 8px;
    background: #f4f7fb;
    font-weight: 700;
    font-size: var(--fs-label);
  }

  .mobile-menu-scroll-area {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mobile-menu-quick-actions {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-top: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 35%);
  }

  #mobileMenuDrawer .offcanvas-title,
  #mobileMenuDrawer .list-group-item span,
  #mobile-bottom-nav .mobile-tab,
  #mobile-bottom-nav .mobile-tab span {
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: -0.01em;
  }

  .nav-submenu {
    position: static;
    transform: none;
    min-width: auto;
    margin-top: 6px;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero {
    min-height: clamp(460px, 64dvh, 760px);
  }

  .hero-content-row {
    min-height: clamp(340px, 48dvh, 620px);
  }

  .stat-card {
    padding: 1.5rem;
  }

  .section-header h2 {
    font-size: 1.8rem;
  }

  .about-tab-nav .btn {
    min-width: 48%;
  }

  .panel {
    min-height: calc((var(--panel-vh, var(--vh, 1vh)) * 100) - 64px);
    padding: 20px 0 56px;
    display: none;
  }

  .panel-active {
    display: block !important;
  }

  .activity-card {
    padding: 1.5rem;
  }

  .generation-featured {
    padding: 1.5rem;
  }

  .emblem-circle {
    width: 150px;
    height: 150px;
  }

  .emblem-text {
    font-size: 2.5rem;
  }

  .gallery-card {
    height: 280px;
  }

  #join {
    padding: 3rem 0;
  }

  .py-6 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  #write .card-body {
    padding: 1rem !important;
  }

  #write .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.6rem;
  }

  #write .nav-tabs .nav-item {
    flex: 0 0 auto;
  }

  #write .nav-tabs .nav-link {
    white-space: nowrap;
    font-size: 0.9rem;
    padding: 0.65rem 1.2rem;
    min-width: 124px;
  }

  #auth-buttons {
    width: 100%;
    justify-content: center;
  }

  #auth-buttons .btn {
    flex: 1;
    min-width: 110px;
  }

  button,
  .btn,
  .form-control,
  .form-select,
  .page-link {
    min-height: 48px;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .navbar-brand {
    max-width: calc(100vw - 80px);
    overflow: hidden;
  }

  body.header-auth-compact .navbar-brand {
    max-width: calc(100vw - 128px);
  }

  .navbar-brand span {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
  }

  .site-header #user-profile {
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  #home-calendar-mini-grid {
    overflow-x: auto;
    padding-bottom: 4px;
  }

  #home-calendar-mini-grid .weave-calendar-table {
    min-width: clamp(360px, 86vw, 540px);
  }

  .gallery-grid .row {
    row-gap: 12px;
  }

  #site-edit-toggle-btn,
  #site-edit-save-btn,
  #site-edit-undo-btn,
  #site-edit-history-restore-btn,
  #site-edit-history-refresh-btn,
  #site-edit-reset-btn {
    min-height: 44px;
  }

  .table td,
  .table th {
    font-size: var(--fs-body);
    vertical-align: middle;
  }

  .responsive-toolbar > * {
    min-width: 0;
  }

  .responsive-toolbar .btn {
    min-inline-size: var(--toolbar-btn-min-inline);
  }

  #news-table,
  #faq-table,
  #qna-table,
  #ops-pending-users-body {
    min-width: 100%;
  }

  #news-table thead,
  #faq-table thead,
  #qna-table thead,
  #ops-dashboard table thead {
    display: none;
  }

  #news-table,
  #faq-table,
  #qna-table,
  #news-table tbody,
  #faq-table tbody,
  #qna-table tbody,
  #news-table tr,
  #faq-table tr,
  #qna-table tr,
  #news-table td,
  #faq-table td,
  #qna-table td {
    display: block;
    width: 100%;
  }

  #news-table tr,
  #faq-table tr,
  #qna-table tr {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
    background: #fff;
  }

  #news-table td,
  #faq-table td,
  #qna-table td {
    border: 0;
    padding: 6px 0;
  }

  #news-table td[data-label]::before,
  #faq-table td[data-label]::before,
  #qna-table td[data-label]::before,
  #ops-dashboard td[data-label]::before {
    content: attr(data-label) ' ';
    font-weight: 700;
    color: #4a5565;
    margin-right: 4px;
  }

  #news-table td[data-col-key='manage'],
  #faq-table td[data-col-key='manage'],
  #qna-table td[data-col-key='manage'],
  #ops-dashboard td[data-col-key='manage'] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
    margin-top: 6px;
  }

  #news-table td[data-col-key='manage'] .btn,
  #faq-table td[data-col-key='manage'] .btn,
  #qna-table td[data-col-key='manage'] .btn,
  #ops-dashboard td[data-col-key='manage'] .btn {
    min-height: 44px;
    min-width: 108px;
  }

  #news-table td[data-col-key='title'],
  #faq-table td[data-col-key='question'],
  #qna-table td[data-col-key='question'] {
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #news-table td[data-col-key='title'].is-expanded,
  #faq-table td[data-col-key='question'].is-expanded,
  #qna-table td[data-col-key='question'].is-expanded {
    display: block;
    -webkit-line-clamp: initial;
  }

  .mobile-cell-expand-btn {
    min-height: 36px;
    padding: 2px 10px;
    font-size: 0.78rem;
    border-radius: 999px;
  }

  #qna-table td[data-col-key='status'] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
  }

  #news-table td[data-col-key='date'],
  #faq-table td[data-col-key='date'],
  #qna-table td[data-col-key='date'] {
    color: #566273;
    font-size: var(--fs-label);
    text-align: right;
  }

  #news-table td[data-col-key='views'],
  #news-table td[data-col-key='likes'],
  #faq-table td[data-col-key='views'],
  #qna-table td[data-col-key='status'] {
    justify-content: flex-end;
    text-align: right;
  }

  #news-table tr,
  #faq-table tr,
  #qna-table tr {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
  }

  #faq-table td[data-col-key='number'],
  #qna-table td[data-col-key='number'],
  #news-table td[data-col-key='date'],
  #faq-table td[data-col-key='date'],
  #qna-table td[data-col-key='date'],
  #news-table td[data-col-key='views'],
  #news-table td[data-col-key='likes'],
  #faq-table td[data-col-key='views'] {
    font-size: var(--fs-meta);
    color: #607083;
  }

  #ops-dashboard .table-responsive {
    overflow: visible;
  }

  #ops-dashboard table,
  #ops-dashboard tbody,
  #ops-dashboard tr,
  #ops-dashboard td {
    display: block;
    width: 100%;
  }

  #ops-dashboard tr {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
    background: #fff;
  }

  #ops-dashboard td {
    border: 0;
    padding: 6px 0;
  }

  .card,
  .info-card,
  .activity-card,
  .generation-card {
    border-radius: 12px;
  }

  .event-detail-cta-wrap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--mobile-overlay-offset);
    z-index: var(--z-mobile-cta);
    padding: 8px 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.95) 28%);
  }

  #event-detail.panel-active {
    padding-bottom: calc(132px + var(--mobile-overlay-offset));
  }

  .event-detail-cta-btn {
    width: 100%;
    min-height: 52px;
    font-weight: 700;
  }

  .mobile-bottom-nav {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-mobile-nav);
    background: #fff;
    border-top: 1px solid var(--border-color);
    padding: 6px 6px calc(6px + var(--safe-area-bottom));
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    padding-left: calc(6px + var(--safe-area-left));
    padding-right: calc(6px + var(--safe-area-right));
    backdrop-filter: blur(8px);
  }

  .mobile-tab {
    border: 0;
    background: transparent;
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 58px;
    font-size: 11px;
    border-radius: 10px;
    padding: 4px 1px;
  }

  .mobile-tab i {
    font-size: 15px;
  }

  .mobile-tab.active {
    color: #075f88;
    background: #d8effb;
    font-weight: 700;
    box-shadow: inset 0 -2px 0 #0a96d1;
  }

  .mobile-tab:active {
    transform: translateY(1px);
  }

  .mobile-tab span {
    max-width: 100%;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
  }

  .notice-attachment-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .notice-attachment-actions .mobile-attachment-btn {
    min-height: 48px;
    width: 100%;
    justify-content: center;
    display: inline-flex;
    align-items: center;
  }

  .notice-attachment-actions a.d-inline-block {
    margin-right: 0 !important;
  }
}

@media (max-width: 576px) {
  .gallery-mini-months.is-multi {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    font-size: 1.5rem;
  }

  .hero {
    min-height: clamp(420px, 58dvh, 640px);
  }

  .hero-content-row {
    min-height: clamp(300px, 42dvh, 520px);
  }

  .hero p {
    font-size: 0.95rem;
  }

  .section-header h2 {
    font-size: 1.4rem;
  }

  .section-header h2::after {
    width: 40px;
  }

  .stat-number {
    font-size: 1.8rem;
  }

  .gallery-filter {
    gap: 0.3rem;
  }

  .gallery-filter .btn {
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
  }

  main {
    padding-top: 78px;
    padding-bottom: calc(var(--mobile-bottom-nav-height) + var(--safe-area-bottom) + 8px);
  }

  h1, h2 {
    line-height: 1.25;
  }

  h3, h4, h5, h6 {
    line-height: 1.35;
  }

  .navbar-nav {
    gap: 0.2rem;
  }

  .nav-link {
    font-size: 0.92rem;
  }

  .editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .editor-toolbar .btn {
    padding: 0.2rem 0.45rem;
    font-size: 0.78rem;
  }

  .rich-editor {
    min-height: 180px;
  }

  .mobile-tab span {
    font-size: 9px;
    line-height: 1.15;
  }

  #home .btn,
  #join .btn,
  #mobile-bottom-nav .mobile-tab {
    min-height: 44px;
  }

  .stat-card {
    min-height: 150px;
    padding: 1rem;
  }

  .modal-dialog {
    margin: 0.5rem;
  }

  .btn.btn-sm {
    min-height: 44px;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
  }

  .signup-optional-field.is-collapsed {
    display: none;
  }
  .login-page {
    min-height: calc(100vh - var(--mobile-bottom-nav-height, 72px));
    padding-top: 5.25rem !important;
    padding-bottom: calc(5.5rem + var(--mobile-bottom-nav-height, 72px)) !important;
  }

  .login-page-card {
    border-radius: 18px;
  }

  .login-page .card-body {
    padding: 1.25rem !important;
  }
  .signup-page {
    min-height: calc(100vh - var(--mobile-bottom-nav-height, 72px));
    padding-top: 5.25rem !important;
    padding-bottom: calc(5.5rem + var(--mobile-bottom-nav-height, 72px)) !important;
  }

  .signup-page-card {
    border-radius: 18px;
  }

  .signup-page .card-body {
    padding: 1.25rem !important;
  }

  .signup-page .policy-scroll-box {
    max-height: 150px;
  }
}

@media (hover: none) and (pointer: coarse) {
  .btn-primary:hover,
  .btn-outline-light:hover,
  .gallery-card:hover,
  .news-card:hover {
    transform: none;
    box-shadow: inherit;
  }

  .gallery-card:hover img,
  .news-card:hover .news-thumb,
  .gallery-card:hover .gallery-overlay {
    transform: none;
    opacity: 0;
  }
}

@media (max-height: 480px) and (orientation: landscape) {
  :root {
    --fs-body: clamp(0.88rem, 1.1vw, 0.96rem);
    --space-2: 0.45rem;
    --space-3: 0.72rem;
  }

  .offcanvas-body {
    max-height: calc(100dvh - 56px - var(--safe-area-top));
  }

  .hero {
    min-height: 360px;
  }

  .hero-content-row {
    min-height: 260px;
  }

  .panel {
    padding-top: 10px;
    padding-bottom: 18px;
  }

  .section-header {
    margin-bottom: 1.1rem;
  }

  .card-body,
  #event-detail .card-body,
  #gallery-detail .card-body,
  #news-detail .card-body,
  #qna-detail .card-body {
    padding: 0.9rem !important;
  }

  .mobile-bottom-nav {
    padding-top: 4px;
    padding-bottom: calc(4px + var(--safe-area-bottom));
  }

  .mobile-tab {
    min-height: 50px;
  }

  .modal-content {
    max-height: min(calc(var(--modal-vh, var(--vh, 1vh)) * 84), 84dvh);
  }
}

@supports not (height: 100dvh) {
  .offcanvas-body {
    max-height: calc(100vh - 64px - var(--safe-area-top));
  }

  .modal-content {
    max-height: min(calc(var(--modal-vh, var(--vh, 1vh)) * 88), 88vh);
  }
}

.mobile-bottom-nav {
  display: none;
  transition: transform 0.2s ease;
}

body.scroll-down-hide-nav .mobile-bottom-nav {
  transform: translateY(110%);
  pointer-events: none;
}

body.keyboard-open .mobile-bottom-nav {
  transform: translateY(110%);
  pointer-events: none;
}

@media (max-width: 768px) {
  .panel.panel-mobile-enter {
    animation: mobilePanelFadeIn 0.18s ease both !important;
    transform: translateZ(0);
    will-change: opacity;
  }

  .detail-pager .detail-pager-btn {
    min-width: 80px;
    max-width: 116px;
    padding: 0.32rem 0.65rem;
  }

  .mobile-bottom-nav {
    display: grid !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel.panel-mobile-enter {
    animation: none !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .mobile-bottom-nav {
    display: grid !important;
  }
}

body.modal-scroll-lock {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  touch-action: none;
}

.modal,
.modal-dialog,
.modal-content {
  overscroll-behavior: contain;
}

.modal-dialog {
  margin: 0.75rem auto;
}

.modal-content {
  max-height: min(calc(var(--modal-vh, var(--vh, 1vh)) * 88), 88dvh);
  display: flex;
  flex-direction: column;
}

.modal-body {
  overflow-y: auto;
}

.modal-footer {
  position: sticky;
  bottom: 0;
  background: #fff;
  z-index: 2;
  padding-bottom: calc(0.75rem + var(--safe-area-bottom));
}

.session-expired-summary {
  position: sticky;
  top: 0;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: #f5f9ff;
  color: #275a7a;
  padding: 8px 10px;
}

body.keyboard-open .site-header {
  padding-top: 0;
  transform: translateY(-4px);
  transition: none;
}

#home-calendar-summary,
#home-calendar-list,
.detail-meta-author,
.detail-meta-date,
.detail-meta-volunteer,
.detail-meta-stats,
footer a,
footer p {
  overflow-wrap: anywhere;
  word-break: break-word;
  text-wrap: balance;
}

body:not(.panel-home-active) #home-notice-carousel,
body:not(.panel-home-active) #home-calendar-preview,
body:not(.panel-home-active) #home-stats {
  display: none !important;
}

#event-detail-cta-wrap {
  display: none;
}

#event-detail.panel-active #event-detail-cta-wrap {
  display: block;
}

.network-error-box {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  text-align: center;
}

.offline-banner {
  position: fixed;
  top: calc(var(--safe-area-top) + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2300;
  display: none;
  width: min(92vw, 520px);
  border: 1px solid #d99a00;
  border-radius: 999px;
  padding: 8px 14px;
  text-align: center;
  font-size: var(--fs-label);
  font-weight: 700;
  color: #5f4200;
  background: #fff4cc;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

body.offline-mode .offline-banner {
  display: block;
}

.skeleton-line,
.skeleton-block {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, #eef2f6 25%, #f7f9fc 37%, #eef2f6 63%);
  background-size: 400% 100%;
  animation: skeletonLoading 1.25s ease infinite;
}

.skeleton-line {
  height: 12px;
}

.skeleton-block {
  height: 220px;
  width: 100%;
}

.skeleton-card {
  pointer-events: none;
}

@keyframes skeletonLoading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

#gallery-grid {
  -webkit-overflow-scrolling: touch;
}

.gallery-grid,
#gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(12px, 2vw, 20px);
}

#gallery-grid > [class*='col-'],
#gallery-grid > .col {
  width: 100%;
  max-width: none;
  padding: 0;
}

@media (min-width: 992px) {
  #gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.table-responsive {
  container-type: inline-size;
  container-name: tablewrap;
  scrollbar-gutter: stable both-edges;
}

@container tablewrap (max-width: 720px) {
  #news-table td[data-col-key='manage'] .btn,
  #faq-table td[data-col-key='manage'] .btn,
  #qna-table td[data-col-key='manage'] .btn,
  #ops-dashboard td[data-col-key='manage'] .btn {
    width: 100%;
    min-width: 0;
  }

  #calendar-grid {
    overflow-x: hidden;
  }

  #calendar-grid .weave-calendar-table {
    gap: 4px;
  }

  #calendar-grid .weave-calendar-cell {
    min-height: 60px;
    padding: 5px 4px;
    border-radius: 8px;
  }

  #calendar-grid .weave-calendar-cell.header {
    font-size: 0.72rem;
    padding: 4px 2px;
  }

  #calendar-grid .weave-calendar-cell.day .day-main {
    gap: 4px;
  }

  #calendar-grid .weave-calendar-cell.day .day-num {
    font-size: 0.82rem;
  }

  #calendar-grid .weave-calendar-cell.day .day-title {
    font-size: 0.63rem;
    line-height: 1.2;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #calendar-grid .weave-calendar-cell.day .day-count {
    font-size: 0.66rem;
  }

  #news-table td[data-col-key='manage'],
  #faq-table td[data-col-key='manage'],
  #qna-table td[data-col-key='manage'],
  #ops-dashboard td[data-col-key='manage'] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

@container tablewrap (max-width: 520px) {
  #news-table td[data-col-key='title'],
  #faq-table td[data-col-key='question'],
  #qna-table td[data-col-key='question'] {
    -webkit-line-clamp: 3;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@container tablewrap (max-width: 640px) {
  #news-table td[data-col-key='title'],
  #faq-table td[data-col-key='question'],
  #qna-table td[data-col-key='question'] {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  #home-notice-carousel::before {
    filter: none;
    transform: none;
  }

  .animate__animated {
    animation: none !important;
  }

  .mobile-bottom-nav {
    transition: none !important;
  }

  .panel,
  .activity-card,
  .info-card,
  .generation-card {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .skeleton-line,
  .skeleton-block {
    animation: none !important;
    background: #eef2f6;
  }
}

@media (prefers-reduced-data: reduce) {
  #home-notice-carousel::before,
  .hero-bg-preview-canvas {
    background-image: none !important;
  }

  .hero-bg,
  .stats-section {
    background: #f4f7fb !important;
  }

  .hero-main-logo {
    filter: none;
  }

  .card,
  .news-card,
  .gallery-card {
    box-shadow: none !important;
  }
}
body.reduced-data-mode #home-notice-carousel::before,
body.reduced-data-mode .hero-bg-preview-canvas {
  background-image: none !important;
}

body.reduced-data-mode .card,
body.reduced-data-mode .news-card,
body.reduced-data-mode .gallery-card {
  box-shadow: none !important;
}

@media (prefers-contrast: more) {
  :root {
    --text-dark: #0d1117;
    --text-light: #2b3138;
    --border-color: #717b8a;
  }

  .btn,
  .form-control,
  .form-select,
  .list-group-item {
    border-width: 2px;
  }

  .table,
  .table td,
  .table th,
  .card,
  .info-card {
    border-color: #4b5563 !important;
  }

  .mobile-tab.active {
    background: #b6e4ff;
    color: #00334d;
    border: 2px solid currentColor;
  }

  .nav-link.active,
  .nav-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 800;
  }

  .nav-submenu::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 9px;
}

.nav-submenu a {
    border-bottom: 1px solid var(--border-color);
  }

  .nav-submenu a:hover,
  .nav-submenu a:focus-visible,
  .nav-submenu a.active {
    background: #dff1ff;
    color: #00334d !important;
    font-weight: 800;
  }
}

@media (spanning: single-fold-vertical) {
  main {
    padding-left: max(12px, env(fold-left, 0px));
    padding-right: max(12px, env(fold-right, 0px));
  }

  .mobile-bottom-nav {
    grid-template-columns: repeat(5, minmax(56px, 1fr));
    gap: 6px;
  }
}

/* ============ MOBILE VISUAL POLISH ============ */
@media (max-width: 768px) {
  body {
    background:
      radial-gradient(1200px 400px at 50% -220px, rgba(49, 183, 255, 0.15), transparent 60%),
      linear-gradient(180deg, #f8fbff 0%, #f3f8ff 100%);
  }

  main {
    padding-top: calc(82px + var(--safe-area-top));
    padding-left: max(10px, var(--safe-area-left));
    padding-right: max(10px, var(--safe-area-right));
  }

  .container {
    padding-left: clamp(12px, 3.6vw, 18px);
    padding-right: clamp(12px, 3.6vw, 18px);
  }

  .site-header {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(1.15) blur(10px);
    border-bottom: 1px solid rgba(49, 183, 255, 0.24);
    box-shadow: 0 8px 22px rgba(8, 35, 56, 0.08);
  }

  .navbar {
    padding: 0.45rem 0;
  }

  .logo-wrapper {
    box-shadow: 0 6px 14px rgba(49, 183, 255, 0.22);
  }

  #home {
    border-radius: 20px;
    margin-top: 0;
    padding-top: clamp(1.35rem, 5.2vw, 1.95rem) !important;
    padding-bottom: clamp(1.35rem, 5vw, 2rem) !important;
    overflow: hidden;
    box-shadow: 0 14px 36px rgba(8, 34, 52, 0.16);
  }

  .hero-content-row {
    min-height: clamp(300px, 56dvh, 520px);
  }

  .hero-logo-stage {
    width: min(96%, 520px);
    min-height: 210px;
    padding: 14px;
  }

  #home p.lead {
    font-size: clamp(1.08rem, 4.4vw, 1.35rem) !important;
    line-height: 1.52;
    margin-bottom: 0.8rem !important;
  }

  #home .hero-subtext {
    font-size: clamp(0.92rem, 3.2vw, 1.06rem);
    line-height: 1.62;
    margin-bottom: 1.15rem !important;
  }

  #home .btn-outline-primary {
    border-radius: 999px;
    padding-inline: 1.1rem;
    min-height: 46px;
  }

  #home-notice-carousel,
  #home-calendar-preview,
  #home-stats,
  #about,
  #activities,
  #gallery,
  #news,
  #join,
  #myinfo,
  #myinfo-auth,
  #myinfo-edit,
  #ops-dashboard {
    border-radius: 18px;
    margin-top: 12px;
    box-shadow: 0 10px 28px rgba(9, 36, 58, 0.08);
    background-clip: padding-box;
  }

  #home-notice-carousel .card,
  #home-calendar-preview .card,
  #home-stats .stat-card,
  .activity-card,
  .info-card,
  .generation-card,
  .card {
    border: 1px solid rgba(34, 100, 138, 0.08);
    box-shadow: 0 8px 20px rgba(9, 36, 58, 0.08);
    border-radius: 14px;
  }

  .section-header {
    margin-bottom: 1.5rem;
  }

  .section-header h2 {
    font-size: clamp(1.28rem, 5vw, 1.66rem);
    line-height: 1.3;
  }

  .section-header .lead {
    font-size: clamp(0.88rem, 3.2vw, 1rem);
    line-height: 1.55;
  }

  .about-tab-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .about-tab-nav .btn {
    min-width: 0;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: -0.01em;
    box-shadow: 0 3px 9px rgba(8, 48, 73, 0.08);
  }

  .table-responsive {
    border-radius: 14px;
    padding: 2px;
  }

  #news-table tr,
  #faq-table tr,
  #qna-table tr,
  #ops-dashboard tr {
    padding: 12px;
    border-radius: 14px;
    box-shadow: 0 6px 14px rgba(9, 39, 62, 0.08);
  }

  #news-table td,
  #faq-table td,
  #qna-table td,
  #ops-dashboard td {
    padding: 7px 0;
  }

  .mobile-bottom-nav {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px) saturate(1.15);
    border-top: 1px solid rgba(44, 123, 229, 0.2);
    box-shadow: 0 -8px 24px rgba(7, 29, 45, 0.14);
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
  }

  .mobile-tab {
    min-height: 56px;
    border-radius: 12px;
    transition: transform 0.16s ease, background-color 0.16s ease;
  }

  .mobile-tab.active {
    background: linear-gradient(180deg, #dff2ff 0%, #cdeaff 100%);
    color: #074f74;
    box-shadow: inset 0 -2px 0 #0a96d1, 0 2px 6px rgba(7, 87, 129, 0.14);
  }

  #mobileMenuDrawer {
    border-left: 1px solid rgba(47, 136, 188, 0.18);
    box-shadow: -12px 0 28px rgba(9, 35, 53, 0.2);
  }

  .offcanvas .list-group-item {
    border: 1px solid rgba(49, 183, 255, 0.12);
    background: rgba(255, 255, 255, 0.95);
  }

  .offcanvas .list-group-item.is-active {
    box-shadow: inset 0 0 0 1px rgba(49, 183, 255, 0.35);
  }
}

@media (max-width: 430px) {
  .section-header h2 {
    letter-spacing: -0.03em;
  }

  #home,
  #home-notice-carousel,
  #home-calendar-preview,
  #home-stats,
  #about,
  #activities,
  #gallery,
  #news,
  #join,
  #myinfo,
  #myinfo-auth,
  #myinfo-edit,
  #ops-dashboard {
    border-radius: 16px;
    margin-top: 10px;
  }

  .card-body,
  #event-detail .card-body,
  #gallery-detail .card-body,
  #news-detail .card-body,
  #qna-detail .card-body {
    padding: 1rem !important;
  }
}

/* ============ MOBILE ADVANCED USABILITY ============ */
@media (max-width: 768px) {
  #mobileMenuDrawer .list-group-item.is-active,
  #mobileMenuDrawer .list-group-item[aria-current='page'] {
    background: linear-gradient(180deg, #e1f3ff 0%, #d2ebff 100%) !important;
    border-color: rgba(10, 150, 209, 0.52) !important;
    color: #065d85 !important;
    font-weight: 800 !important;
    box-shadow: inset 0 0 0 1px rgba(10, 150, 209, 0.55), 0 4px 12px rgba(10, 150, 209, 0.15);
  }

  :root {
    --mobile-content-max: 760px;
  }

  .container {
    max-width: var(--mobile-content-max);
    margin-left: auto;
    margin-right: auto;
  }

  body.panel-home-active main {
    padding-left: max(6px, var(--safe-area-left));
    padding-right: max(6px, var(--safe-area-right));
  }

  body.panel-home-active #home {
    margin-inline: 0;
    border-radius: 14px;
  }

  body.panel-home-active #home > .container {
    padding-left: 12px;
    padding-right: 12px;
    overflow-x: clip;
  }

  body.panel-home-active #home .row {
    margin-left: 0;
    margin-right: 0;
  }

  body.panel-home-active #home-stats .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.panel-home-active #home-stats .row > [class*='col-'] {
    width: auto;
    max-width: none;
    padding: 0;
  }

  input,
  textarea,
  select,
  button,
  .form-control,
  .form-select,
  .btn,
  .rich-editor,
  .comment-text {
    font-family: inherit !important;
    letter-spacing: -0.01em;
  }

  footer.py-5 {
    padding-top: 2rem !important;
    padding-bottom: 0.9rem !important;
  }

  footer .row.g-5 {
    --bs-gutter-y: 1.35rem;
    margin-bottom: 1.4rem !important;
  }

  .list-toolbar,
  .responsive-toolbar {
    gap: 8px;
  }

  .responsive-toolbar {
    width: 100%;
  }

  .responsive-search-input {
    flex: 1 1 180px;
    min-height: 44px;
    border-radius: 999px;
    border-color: rgba(49, 183, 255, 0.35);
    background: #fff;
  }

  .responsive-toolbar .btn,
  .list-toolbar .btn {
    border-radius: 999px;
    min-height: 44px;
    font-weight: 700;
  }

  #news-tab-nav,
  .gallery-filter {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  #news-tab-nav .btn,
  .gallery-filter .btn {
    border-radius: 999px;
    font-size: 0.84rem;
    padding: 0.5rem 0.45rem;
    min-height: 42px;
  }

  #news-table td[data-col-key='title'],
  #faq-table td[data-col-key='question'],
  #qna-table td[data-col-key='question'] {
    font-size: 0.96rem;
    letter-spacing: -0.01em;
    line-height: 1.52;
  }

  #news-table td[data-col-key='manage'],
  #faq-table td[data-col-key='manage'],
  #qna-table td[data-col-key='manage'] {
    margin-top: 8px;
    padding-top: 12px;
    border-top-style: solid;
    border-top-color: rgba(73, 122, 151, 0.2);
  }

  #news-table td[data-col-key='manage'] .btn,
  #faq-table td[data-col-key='manage'] .btn,
  #qna-table td[data-col-key='manage'] .btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 120px;
  }

  .detail-meta-card {
    border-radius: 14px;
    padding: 0.85rem 0.95rem;
    background: linear-gradient(180deg, #ecf8ff 0%, #e4f3ff 100%);
    border-color: rgba(35, 132, 188, 0.24);
  }

  .detail-meta-author,
  .detail-meta-stats,
  .detail-meta-date,
  .detail-meta-volunteer {
    font-size: 0.86rem;
  }

  #gallery-detail-image,
  #news-detail-image {
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(11, 38, 57, 0.14);
  }

  #gallery-detail-actions,
  #news-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  #gallery-detail-actions .btn,
  #news-detail-actions .btn,
  #event-detail-cta-btn {
    border-radius: 12px;
  }

  #news-table tr {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    grid-template-areas:
      "title title title title"
      "author date views likes";
    align-items: baseline;
    column-gap: 10px;
    row-gap: 4px;
  }

  #news-table td[data-col-key='title'] {
    grid-area: title;
  }

  #news-table td[data-col-key='author'] {
    grid-area: author;
    font-size: 0.8rem;
    color: #6d7f8d;
  }

  #news-table td[data-col-key='date'] {
    grid-area: date;
  }

  #news-table td[data-col-key='views'] {
    grid-area: views;
  }

  #news-table td[data-col-key='likes'] {
    grid-area: likes;
  }

  #news-table td[data-col-key='author']::before,
  #news-table td[data-col-key='date']::before,
  #news-table td[data-col-key='views']::before,
  #news-table td[data-col-key='likes']::before {
    content: none;
  }

  #news-table td[data-col-key='date'],
  #news-table td[data-col-key='views'],
  #news-table td[data-col-key='likes'] {
    font-size: 0.79rem;
    color: #6a7886;
    text-align: right;
    justify-self: end;
  }

  .detail-volunteer-inline {
    gap: 6px;
  }

  .detail-volunteer-calendar-btn {
    min-height: 30px;
    padding: 0.2rem 0.54rem;
  }

  .editor-toolbar {
    position: sticky;
    top: calc(72px + var(--safe-area-top));
    z-index: 9;
    padding: 8px;
    margin: 0 -4px 8px;
    border: 1px solid rgba(49, 183, 255, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.93);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 16px rgba(11, 41, 61, 0.08);
  }

  .editor-toolbar .btn {
    min-height: 38px;
    border-radius: 9px;
    font-weight: 700;
  }

  .rich-editor {
    min-height: 220px;
    border-radius: 12px;
    padding: 0.9rem;
    line-height: 1.7;
    font-size: 0.95rem;
  }

  .image-dropzone {
    border-radius: 12px;
    border-width: 1.5px;
    font-size: 0.86rem;
    background: rgba(245, 251, 255, 0.72);
  }

  .modal-dialog {
    margin: 0.45rem;
  }

  .modal-content {
    border-radius: 16px;
    border: 1px solid rgba(49, 183, 255, 0.24);
    box-shadow: 0 20px 44px rgba(8, 29, 42, 0.24);
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding-left: 0.95rem;
    padding-right: 0.95rem;
  }

  .modal-footer .btn {
    min-height: 44px;
    border-radius: 10px;
    font-weight: 700;
  }

  #auth-buttons .btn,
  #user-profile .btn,
  #mobile-menu-login-btn,
  #mobile-menu-signup-btn {
    border-radius: 999px;
    font-weight: 700;
  }

  .offline-banner {
    border-radius: 12px;
    width: min(94vw, 560px);
    top: calc(var(--safe-area-top) + 10px);
  }
}

@media (max-width: 520px) {
  #news-tab-nav,
  .gallery-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #news-table td[data-col-key='manage'] .btn,
  #faq-table td[data-col-key='manage'] .btn,
  #qna-table td[data-col-key='manage'] .btn {
    flex: 1 1 100%;
  }

  .hero-logo-stage {
    min-height: 190px;
  }

  .mobile-tab span {
    font-size: 10.5px;
  }
}

@media (forced-colors: active) {
  .mobile-bottom-nav,
  #mobileMenuDrawer {
    border: 1px solid CanvasText;
  }

  .btn,
  .mobile-tab,
  .list-group-item,
  a {
    forced-color-adjust: auto;
    border: 1px solid CanvasText;
  }

  .mobile-tab.active {
    outline: 2px solid Highlight;
    outline-offset: 1px;
  }

  .nav-link.active {
    outline: 2px solid Highlight;
    outline-offset: 1px;
  }

  i,
  .fa,
  [class*='fa-'] {
    color: CanvasText !important;
  }

  #mobile-bottom-nav .mobile-tab i {
    display: none;
  }

  #mobile-bottom-nav .mobile-tab span {
    font-weight: 700;
  }
}

@media (display-mode: standalone) {
  body {
    padding-top: calc(var(--safe-area-top) + 4px);
  }

  main {
    padding-top: calc(78px + var(--safe-area-top));
    padding-bottom: calc(var(--mobile-bottom-nav-height) + var(--safe-area-bottom) + 12px);
  }

  .site-header {
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
  }
}

#gallery-grid:empty::before {
  content: '';
  display: block;
  width: 100%;
  height: 220px;
  border-radius: 10px;
  background: linear-gradient(90deg, #eef2f6 25%, #f7f9fc 37%, #eef2f6 63%);
  background-size: 400% 100%;
  animation: skeletonLoading 1.25s ease infinite;
}



#mobile-notification-badge {
  font-size: 0.62rem;
  min-width: 1.05rem;
  line-height: 1.05;
}

#my-notifications-filter-all.active,
#my-notifications-filter-unread.active {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}


.join-honor-tier {
  border: 1px solid #d7e4f2;
  border-radius: 12px;
  overflow: hidden;
}

.join-honor-tier-header {
  color: #fff;
  font-weight: 700;
  padding: 10px 14px;
}

.join-honor-tier-body {
  padding: 12px;
}

.join-honor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.join-honor-card {
  border: 1px solid #b9ddff;
  border-radius: 10px;
  min-height: 90px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px;
  background: #f7fcff;
}

.join-honor-card-name {
  font-weight: 600;
  font-size: 0.94rem;
  color: #0f4d7d;
  text-align: left;
  line-height: 1.25;
  word-break: keep-all;
}

.join-honor-photo-wrap {
  width: 58px;
  min-width: 58px;
  height: 58px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #b8d4ea;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.join-honor-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.join-honor-photo-placeholder {
  color: #7f9bb2;
  font-size: 1.15rem;
}

.join-honor-info {
  min-width: 0;
  flex: 1 1 auto;
}

.join-honor-card-head {
  font-weight: 700;
  color: #0f4d7d;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.join-honor-card-title {
  font-weight: 500;
  color: #2f6d9b;
}

.join-honor-card-tagline {
  margin-top: 4px;
  font-size: 0.8rem;
  color: #4b708c;
  line-height: 1.35;
  word-break: keep-all;
}


.join-honor-card {
  position: relative;
}

.join-honor-card:has(.join-honor-card-actions) {
  grid-template-columns: 58px minmax(0, 1fr) auto;
}

.join-honor-card-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 4px;
  align-items: center;
  align-self: center;
  min-width: max-content;
}

.join-honor-card-actions .btn {
  white-space: nowrap;
}

#join-honor-order-input::-webkit-outer-spin-button,
#join-honor-order-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#join-honor-order-input {
  -moz-appearance: textfield;
}

@media (max-width: 575.98px) {
  .join-honor-grid {
    grid-template-columns: 1fr;
  }

  .join-honor-card {
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: start;
  }

  .join-honor-card-actions {
    width: 100%;
    justify-content: flex-start;
    padding-left: 68px;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    min-width: 0;
  }
}

.join-honor-search-wrap {
  align-items: center;
  flex-wrap: nowrap;
}

#join-honor-search-btn {
  min-width: 56px;
  white-space: nowrap;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.responsive-sort-select {
  min-width: 110px;
}

.toolbar-sort-compact {
  width: 92px;
  min-width: 92px;
  max-width: 92px;
  height: 31px;
  font-size: 0.8rem;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
}

.news-toolbar,
.faq-toolbar,
.qna-toolbar,
.gallery-toolbar {
  justify-content: space-between;
}

.toolbar-actions-end {
  justify-content: flex-end;
  margin-left: auto;
}

.toolbar-single-row {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.toolbar-single-row > .small {
  flex: 0 0 auto;
}

.toolbar-single-row .toolbar-actions-end {
  flex-wrap: nowrap !important;
  flex: 0 0 auto;
}

.toolbar-single-row .responsive-search-input {
  flex: 0 0 210px;
  width: 210px;
}

@media (max-width: 575.98px) {
  .toolbar-single-row .responsive-search-input {
    flex-basis: 160px;
    width: 160px;
  }
}



/* ============ 2026 HOME BRAND POLISH ============
   Selected Weave branding with the original rectangular photo hero. */
:root {
  --weave-brand-deep: #087eb8;
  --weave-brand-ink: #075f8d;
  --weave-brand-soft: #eaf8ff;
  --weave-brand-pale: #f6fcff;
  --weave-accent-orange: #ff8a34;
  --weave-ink: #17364a;
  --weave-muted: #627a89;
  --weave-line: #dcecf4;
  --weave-home-shadow: 0 12px 32px rgba(8, 126, 184, 0.1);
}
body.panel-home-active { color: var(--weave-ink); background: var(--weave-brand-pale); }
.site-header.brand-bg, .site-header .brand-bg { background: rgba(49, 183, 255, 0.97) !important; }
.site-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: 0 8px 28px rgba(4, 93, 137, 0.14) !important;
  backdrop-filter: blur(10px);
}
.site-header .nav-link {
  border-radius: 999px;
  font-weight: 700;
  transition: color 160ms ease, background-color 160ms ease;
}
.site-header .nav-link:hover, .site-header .nav-link:focus-visible,
.site-header .nav-link.active, .site-header .nav-link[aria-current="page"] {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.16);
}
/* Keep Background.jpg as the original full-width rectangle. */
#home.hero { min-height: 510px; border-radius: 0; clip-path: none; isolation: isolate; }

#home::before {
  background-size: cover;
  background-position: var(--hero-bg-pos-x) var(--hero-bg-pos-y);
  filter: none;
  transform: none;
}
#home::after { background: linear-gradient(180deg, rgba(8, 29, 43, 0.22), rgba(7, 35, 52, 0.58)); }
#home .hero-content-row { min-height: 510px; }
#home .hero-logo-stage { min-height: 190px; padding: 12px 24px; }
#home .hero-main-logo {
  width: min(280px, 62vw);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.34)) contrast(1.04) saturate(1.04);
}
#home .btn-outline-primary {
  min-width: 188px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  color: var(--weave-brand-ink);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 24px rgba(5, 71, 103, 0.2);
  font-weight: 800;
}
#home .btn-outline-primary:hover, #home .btn-outline-primary:focus-visible {
  color: #fff;
  border-color: var(--weave-accent-orange);
  background: var(--weave-brand-deep);
}
#home-notice-carousel {
  padding-block: clamp(1rem, 2.2vw, 1.7rem) !important;
  background: var(--weave-brand-pale) !important;
}
#home-notice-carousel .card, #home-calendar-preview .card {
  border: 1px solid var(--weave-line) !important;
  border-radius: 18px;
  box-shadow: var(--weave-home-shadow) !important;
}
#home-notice-carousel .card { position: relative; overflow: hidden; }
#home-notice-carousel .card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--primary), var(--weave-accent-orange));
}
#home-notice-carousel h5, #home-calendar-preview h4 { color: var(--weave-ink); letter-spacing: -0.035em; }
#home-notice-toggle-btn, #home-calendar-preview .btn { border-radius: 999px; font-weight: 700; }
#home-calendar-preview {
  position: relative;
  padding-block: clamp(2.7rem, 5vw, 4.5rem) !important;
  background: #fff !important;
}
#home-calendar-preview::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: min(180px, 30vw);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--weave-accent-orange));
  transform: translateX(-50%);
}
#home-calendar-preview .card-body { padding: clamp(1rem, 2.6vw, 1.7rem); }
#home-stats.stats-section {
  padding-block: clamp(3rem, 6vw, 5rem) !important;
  background: linear-gradient(180deg, var(--weave-brand-soft), var(--weave-brand-pale));
}
#home-stats .stat-card {
  position: relative;
  min-height: 172px;
  border: 1px solid rgba(8, 126, 184, 0.12);
  border-radius: 18px;
  box-shadow: var(--weave-home-shadow);
  overflow: hidden;
}
#home-stats .stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 42px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: var(--weave-accent-orange);
  transform: translateX(-50%);
}
#home-stats .stat-number { color: var(--weave-brand-deep) !important; letter-spacing: -0.04em; }
footer.brand-bg {
  border-top: 1px solid rgba(7, 95, 141, 0.12);
  background: #31b7ff !important;
}
footer.brand-bg .text-white-50, footer.brand-bg a.text-white-50, footer.brand-bg p {
  color: rgba(255, 255, 255, 0.84) !important;
}
footer.brand-bg .text-primary { color: #fff1e6 !important; }
footer.brand-bg .btn-outline-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.52);
  background: rgba(7, 95, 141, 0.08);
}
footer.brand-bg .btn-outline-secondary:hover, footer.brand-bg .btn-outline-secondary:focus-visible {
  color: var(--weave-brand-ink);
  border-color: #fff;
  background: #fff;
}
@media (max-width: 767.98px) {
  .site-header { backdrop-filter: none; }
  #home.hero, #home .hero-content-row { min-height: 430px; }
  #home .hero-logo-stage { min-height: 150px; margin-bottom: 0.75rem !important; padding: 6px 16px; }
  #home .hero-main-logo { width: min(210px, 58vw); }
  #home p.lead { font-size: clamp(1.05rem, 5vw, 1.3rem) !important; }
  #home .hero-subtext { margin-bottom: 1.5rem !important; }
  #home-notice-carousel .card, #home-calendar-preview .card, #home-stats .stat-card { border-radius: 14px; }
  #home-stats .stat-card { min-height: 132px; padding: 1.2rem 0.65rem; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .nav-link, #home .btn-outline-primary, #home-stats .stat-card { transition: none !important; }
}


/* Accessible text on the fixed Weave sky-blue brand surfaces. */
.site-header .navbar-brand,
.site-header .navbar-brand .text-white,
.site-header .nav-link {
  color: #153247 !important;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus-visible,
.site-header .nav-link.active,
.site-header .nav-link[aria-current="page"] {
  color: #153247 !important;
  background: rgba(255, 255, 255, 0.28);
}

.site-header .btn-outline-light {
  color: #153247;
  border-color: rgba(21, 50, 71, 0.46);
}

.site-header .btn-outline-light:hover,
.site-header .btn-outline-light:focus-visible {
  color: #153247;
  border-color: #fff;
  background: #fff;
}

footer.brand-bg,
footer.brand-bg h5,
footer.brand-bg h6,
footer.brand-bg p,
footer.brand-bg a,
footer.brand-bg .text-white-50,
footer.brand-bg a.text-white-50 {
  color: #153247 !important;
}

footer.brand-bg hr {
  border-color: rgba(21, 50, 71, 0.28) !important;
}

footer.brand-bg .text-primary {
  color: #075f8d !important;
}

footer.brand-bg .btn-outline-secondary {
  color: #153247;
  border-color: rgba(21, 50, 71, 0.46);
  background: rgba(255, 255, 255, 0.12);
}


/* ============ 2026 HEADER FOOTER BRAND POLISH V2 ============
   Match the selected v2 concept without changing navigation or auth contracts. */
.site-header,
.site-header.brand-bg,
.site-header .navbar.brand-bg {
  color: #fff;
  background: rgba(49, 183, 255, 0.96) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 28px rgba(4, 93, 137, 0.15) !important;
  backdrop-filter: blur(12px);
}

.site-header .navbar > .container {
  gap: clamp(18px, 2.2vw, 34px);
}

.site-header .navbar-brand {
  flex: 0 0 auto;
  padding-block: 0;
}

.site-header .logo-wrapper {
  width: 72px;
  height: 48px;
  padding: 8px 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  box-shadow: 0 7px 16px rgba(5, 98, 142, 0.13);
}

.site-header .logo-img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  border-radius: 0;
}

.site-header .navbar-brand > span {
  display: none !important;
}

.site-header .nav-link {
  position: relative;
  padding: 12px 2px !important;
  color: #fff !important;
  background: transparent !important;
  border-radius: 0;
  font-size: 0.94rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 3px rgba(7, 95, 141, 0.28);
}

.site-header .nav-link::after {
  content: '';
  position: absolute;
  right: 50%;
  bottom: 7px;
  left: 50%;
  height: 2px;
  background: #fff;
  border-radius: 999px;
  transition: left 180ms ease, right 180ms ease;
}

.site-header .nav-link:hover::after,
.site-header .nav-link:focus-visible::after,
.site-header .nav-link.active::after,
.site-header .nav-link[aria-current="page"]::after {
  right: 4px;
  left: 4px;
}

.site-header #auth-buttons,
.site-header #user-profile {
  gap: 8px !important;
}

.site-header #auth-buttons .btn,
.site-header #user-profile .btn {
  min-height: 36px;
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.site-header #auth-buttons .btn:hover,
.site-header #auth-buttons .btn:focus-visible,
.site-header #user-profile .btn:hover,
.site-header #user-profile .btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(7, 95, 141, 0.16);
}

.site-header #auth-buttons .btn-outline-light,
.site-header #user-profile .btn-outline-light {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.75);
}

.site-header #auth-buttons .btn-light,
.site-header #user-profile .btn-light {
  color: var(--weave-brand-ink);
  background: #fff;
  border-color: #fff;
}

footer.brand-bg {
  position: relative;
  overflow: hidden;
  padding-top: 62px !important;
  padding-bottom: 28px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #31b7ff 0%, #159bdc 100%) !important;
  border-top: 0;
}

footer.brand-bg::before {
  content: '';
  position: absolute;
  right: -9%;
  bottom: -160px;
  width: 500px;
  height: 280px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  transform: rotate(-12deg);
}

footer.brand-bg > .container {
  position: relative;
  z-index: 1;
}

footer.brand-bg h5,
footer.brand-bg h6,
footer.brand-bg p,
footer.brand-bg a,
footer.brand-bg .text-white-50,
footer.brand-bg a.text-white-50 {
  color: #fff !important;
}

footer.brand-bg h5,
footer.brand-bg h6 {
  letter-spacing: -0.025em;
}

footer.brand-bg p,
footer.brand-bg .text-white-50,
footer.brand-bg a.text-white-50 {
  color: rgba(255, 255, 255, 0.82) !important;
}

footer.brand-bg hr {
  border-color: rgba(255, 255, 255, 0.25) !important;
  opacity: 1;
}

footer.brand-bg .btn-outline-secondary {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: none;
}

footer.brand-bg .btn-outline-secondary:hover,
footer.brand-bg .btn-outline-secondary:focus-visible {
  color: var(--weave-brand-ink);
  background: #fff;
  border-color: #fff;
}

footer.brand-bg .text-primary {
  color: #fff !important;
}

.site-header :focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px var(--weave-brand-ink) !important;
}

footer.brand-bg :focus-visible {
  outline: 3px solid var(--weave-brand-ink) !important;
  outline-offset: 3px !important;
}

@media (max-width: 991.98px) {
  .site-header .logo-wrapper {
    width: 68px;
    height: 44px;
    padding: 7px 9px;
  }
}

@media (max-width: 767.98px) {
  .site-header {
    backdrop-filter: none;
  }

  .site-header .navbar > .container {
    gap: 12px;
  }

  .site-header .logo-wrapper {
    width: 64px;
    height: 42px;
  }

  footer.brand-bg {
    padding-top: 48px !important;
    padding-bottom: calc(24px + var(--mobile-overlay-offset)) !important;
  }

  footer.brand-bg .row {
    row-gap: 28px !important;
  }

  footer.brand-bg::before {
    right: -220px;
    bottom: -175px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .nav-link::after,
  .site-header #auth-buttons .btn,
  .site-header #user-profile .btn {
    transition: none !important;
  }
}

/* ============ 2026 ACCESSIBLE BRAND + POLICY PAGES ============ */
:root {
  --weave-brand-surface: #31b7ff;
  --weave-brand-surface-strong: #25a8e5;
  --weave-brand-ink: #153247;
  --weave-brand-ink-soft: #244d65;
}

.site-header,
.site-header.brand-bg,
.site-header .navbar.brand-bg {
  color: var(--weave-brand-ink) !important;
  background: linear-gradient(135deg, var(--weave-brand-surface), var(--weave-brand-surface-strong)) !important;
}

.site-header .navbar-brand,
.site-header .navbar-brand .text-white {
  color: var(--weave-brand-ink) !important;
  text-shadow: none;
}

.site-header .nav-link {
  margin-inline: 3px;
  padding-inline: 10px !important;
  color: #fff !important;
  background: transparent !important;
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: none;
  text-shadow: 0 1px 2px rgba(7, 65, 96, 0.3);
}

.site-header .nav-link::after {
  content: none !important;
  display: none !important;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus-visible {
  color: #fff !important;
  background: transparent !important;
  border-color: transparent;
  box-shadow: none;
}

.site-header .nav-link.active,
.site-header .nav-link[aria-current='page'] {
  color: var(--weave-brand-ink) !important;
  background: #fff !important;
  border-color: rgba(21, 50, 71, 0.28);
  border-radius: 999px;
  box-shadow: 0 5px 14px rgba(5, 94, 139, 0.16);
  font-weight: 900;
}

.site-header #auth-buttons .btn-outline-light,
.site-header #user-profile .btn-outline-light {
  color: var(--weave-brand-ink);
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--weave-brand-ink);
}

.site-header #auth-buttons .btn-outline-light:hover,
.site-header #auth-buttons .btn-outline-light:focus-visible,
.site-header #user-profile .btn-outline-light:hover,
.site-header #user-profile .btn-outline-light:focus-visible {
  color: var(--weave-brand-ink);
  background: #fff;
  border-color: var(--weave-brand-ink);
}

.site-header #auth-buttons .btn-light,
.site-header #user-profile .btn-light {
  color: var(--weave-brand-ink);
  background: #fff;
  border-color: var(--weave-brand-ink);
}
.site-header #auth-buttons .btn,
.site-header #auth-buttons .btn:hover,
.site-header #auth-buttons .btn:active {
  color: #fff !important;
  background: transparent !important;
  border-color: transparent !important;
  border-radius: 0;
  box-shadow: none !important;
  text-shadow: 0 1px 2px rgba(7, 65, 96, 0.3);
}

.site-header #auth-buttons .btn:hover {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.site-header #auth-buttons .btn:focus-visible {
  color: #fff !important;
  background: transparent !important;
  border-color: transparent !important;
  border-radius: 2px;
  outline: 3px solid var(--weave-brand-ink);
  outline-offset: 2px;
  box-shadow: none !important;
}

.site-header .navbar,
.site-header .logo-wrapper,
.site-header #auth-buttons .btn,
.site-header #user-profile .btn {
  transition:
    padding 180ms ease,
    width 180ms ease,
    height 180ms ease,
    min-height 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

@media (min-width: 992px) {
  .site-header.scrolled .navbar {
    padding-block: 0.32rem;
  }

  .site-header.scrolled .logo-wrapper {
    width: 58px;
    height: 38px;
    padding: 6px 9px;
  }

  .site-header.scrolled #auth-buttons .btn,
  .site-header.scrolled #user-profile .btn {
    min-height: 32px;
    padding-block: 6px;
  }
}

footer.brand-bg {
  color: var(--weave-brand-ink) !important;
  background-color: var(--weave-brand-surface) !important;
  background-image: linear-gradient(135deg, var(--weave-brand-surface) 0%, var(--weave-brand-surface-strong) 100%) !important;
}

footer.brand-bg h5,
footer.brand-bg h6,
footer.brand-bg p,
footer.brand-bg a,
footer.brand-bg .text-white-50,
footer.brand-bg a.text-white-50,
footer.brand-bg .text-primary {
  color: var(--weave-brand-ink) !important;
  text-shadow: none;
}

footer.brand-bg p,
footer.brand-bg .text-white-50,
footer.brand-bg a.text-white-50 {
  color: var(--weave-brand-ink-soft) !important;
}

footer.brand-bg a:not(.social-icon-btn) {
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

footer.brand-bg a:not(.social-icon-btn):hover,
footer.brand-bg a:not(.social-icon-btn):focus-visible {
  color: #052f48 !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

footer.brand-bg hr {
  border-color: rgba(21, 50, 71, 0.34) !important;
}

footer.brand-bg .social-icon-btn {
  display: inline-flex;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--weave-brand-ink) !important;
  background: rgba(255, 255, 255, 0.34);
  border: 1px solid var(--weave-brand-ink);
  font-size: 1rem;
  line-height: 1;
}

footer.brand-bg .social-icon-btn:hover,
footer.brand-bg .social-icon-btn:focus-visible {
  color: var(--weave-brand-ink) !important;
  background: #fff;
  border-color: var(--weave-brand-ink);
  transform: translateY(-2px);
}

.footer-policy-links {
  display: inline-flex;
  gap: 14px;
  margin-left: 12px;
}

.footer-policy-links a {
  padding: 4px 8px;
  border-radius: 8px;
}

.footer-policy-links a.active,
.footer-policy-links a[aria-current='page'] {
  color: var(--weave-brand-ink) !important;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(21, 50, 71, 0.3);
  font-weight: 900;
}

.footer-policy-links a + a {
  position: relative;
}

.footer-policy-links a + a::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -8px;
  width: 1px;
  height: 0.9em;
  background: rgba(21, 50, 71, 0.45);
  transform: translateY(-50%);
}

.policy-page {
  min-height: 70vh;
  color: #1d3342;
}

.policy-document {
  max-width: 980px;
  padding: clamp(24px, 4vw, 56px);
  background: #fff;
  border: 1px solid #d9e8f0;
  border-radius: 26px;
  box-shadow: 0 18px 48px rgba(18, 65, 91, 0.09);
}

.policy-document-header {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 28px;
  border-bottom: 1px solid #dbe8ef;
}

.policy-document-header h1 {
  margin: 5px 0 10px;
  color: var(--weave-brand-ink);
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -0.045em;
}

.policy-kicker {
  color: #075f8d;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.policy-review-notice {
  margin: 28px 0;
  padding: 18px 20px;
  color: #513300;
  background: #fff7dd;
  border: 1px solid #e5b94c;
  border-left: 5px solid #c68500;
  border-radius: 14px;
}

.policy-review-notice strong {
  display: block;
  margin-bottom: 5px;
  font-size: 1rem;
}

.policy-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 36px;
}

.policy-summary-grid > div {
  min-height: 120px;
  padding: 18px;
  background: #eaf8ff;
  border: 1px solid #abdff7;
  border-radius: 16px;
}

.policy-summary-grid strong,
.policy-summary-grid span {
  display: block;
}

.policy-summary-grid strong {
  margin-bottom: 10px;
  color: #075f8d;
  font-size: 0.82rem;
}

.policy-summary-grid span {
  color: var(--weave-brand-ink);
  font-weight: 700;
  line-height: 1.55;
}

.policy-section {
  padding-block: 25px;
  border-top: 1px solid #e2edf2;
}

.policy-section h2 {
  margin-bottom: 14px;
  color: var(--weave-brand-ink);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 900;
  letter-spacing: -0.025em;
}

.policy-section p,
.policy-contact-list {
  margin-bottom: 0;
  line-height: 1.8;
}

.policy-section p + p {
  margin-top: 10px;
}

.policy-table {
  min-width: 720px;
  margin-bottom: 0;
  border-color: #d9e8f0;
}

.policy-table th {
  color: var(--weave-brand-ink);
  background: #eaf8ff;
}

.policy-table th,
.policy-table td {
  padding: 13px;
  vertical-align: top;
}

.policy-contact-list {
  padding-left: 1.15rem;
}

.policy-source-note {
  padding: 14px 16px;
  color: #315468;
  background: #f3f8fb;
  border-radius: 12px;
  font-size: 0.9rem;
}

@media (max-width: 767.98px) {
  #mobileMenuDrawer {
    font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  }

  #mobileMenuDrawer .list-group-item,
  #mobileMenuDrawer .list-group-item span,
  #mobileMenuDrawer .mobile-menu-quick-actions .btn {
    min-height: 48px;
    font-family: inherit !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    letter-spacing: -0.01em;
  }

  #mobileMenuDrawer .offcanvas-title {
    font-family: inherit !important;
    font-size: 1.125rem;
    line-height: 1.4;
  }

  .site-header .nav-link {
    margin-inline: 0;
  }

  .footer-policy-links {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    margin-left: 0;
  }

  .policy-document {
    padding: 22px 17px;
    border-radius: 18px;
  }

  .policy-document-header {
    flex-direction: column;
  }

  .policy-document-header .btn {
    width: 100%;
  }

  .policy-summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .policy-summary-grid > div {
    min-height: 108px;
    padding: 15px;
  }
}

@media (max-width: 380px) {
  .policy-summary-grid {
    grid-template-columns: 1fr;
  }

  .policy-summary-grid > div {
    min-height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .navbar,
  .site-header .logo-wrapper,
  .site-header #auth-buttons .btn,
  .site-header #user-profile .btn,
  footer.brand-bg .social-icon-btn {
    transition: none !important;
  }
}

/* ============ SERVER-SYNCED COMMUNITY UX ============ */
.comment-loading,
.comment-empty-state,
.network-error-box {
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #f8fcff;
}

.comment-edited-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  padding: 0.08rem 0.38rem;
  border: 1px solid rgba(21, 50, 71, 0.2);
  border-radius: 999px;
  color: var(--weave-brand-ink, #153247);
  font-size: 0.68rem;
  font-weight: 700;
}

.comment-actions .btn {
  min-height: 32px;
  white-space: nowrap;
}

.comment-reply-form .form-control,
.comment-form .form-control {
  min-height: 42px;
}

@media (max-width: 575.98px) {
  .comment-list {
    padding: 0.75rem;
  }

  .comment-reply {
    margin-left: 0.65rem;
    padding-left: 0.65rem;
  }

  .comment-actions {
    width: 100%;
  }

  .comment-actions .btn {
    flex: 1 1 auto;
  }
}

/* KindMoa-inspired shared post create/edit form */
.weave-post-editor {
  --post-editor-border: #d9e1e8;
  --post-editor-muted: #667786;
  --post-editor-panel: #f5f7f9;
  width: 100%;
  padding: 18px;
  border: 1px solid #e5edf3;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(19, 66, 94, 0.06);
}

.weave-post-editor .form-label {
  color: #465b6a;
  font-size: 0.82rem;
  font-weight: 600;
}

.weave-post-editor .form-control,
.weave-post-editor .form-select {
  min-height: 38px;
  border-color: var(--post-editor-border);
  border-radius: 4px;
  font-size: 0.9rem;
}

.weave-post-editor .form-control:focus,
.weave-post-editor .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(49, 183, 255, 0.13);
}

.weave-post-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 5px;
}

.weave-post-title-counter {
  flex: 0 0 auto;
  color: var(--post-editor-muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.kindmoa-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 5px 7px;
  border: 1px solid var(--post-editor-border);
  border-radius: 4px 4px 0 0;
  background: var(--post-editor-panel);
}

.kindmoa-editor-toolbar .pe-toolbar-btn {
  min-width: 31px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: #162f40;
  font-size: 0.83rem;
  font-weight: 700;
  line-height: 1;
}

.kindmoa-editor-toolbar .pe-toolbar-btn:hover,
.kindmoa-editor-toolbar .pe-toolbar-btn:focus-visible {
  border-color: #c9d8e2;
  background: #e6edf2;
  outline: none;
}

.kindmoa-editor-toolbar .pe-toolbar-btn.is-active {
  border-color: #1d9ce0;
  background: var(--primary);
  color: #08324b;
}

.kindmoa-editor-toolbar .pe-toolbar-text-btn {
  min-width: auto;
  white-space: nowrap;
}

.pe-toolbar-separator {
  align-self: stretch;
  width: 1px;
  min-height: 22px;
  margin: 2px 5px;
  background: #d4dee5;
}

.pe-toolbar-extra {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding-left: 4px;
}

.pe-toolbar-color-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: #4d6271;
  font-size: 0.75rem;
  white-space: nowrap;
}

.pe-toolbar-color {
  width: 30px;
  height: 24px;
  padding: 1px;
  border: 1px solid #cbd8e1;
  border-radius: 3px;
  background: #fff;
}

.weave-post-editor .kindmoa-rich-editor {
  min-height: 320px;
  max-height: 620px;
  padding: 14px;
  border: 1px solid var(--post-editor-border);
  border-top: 0;
  border-radius: 0 0 4px 4px;
  font-size: 0.95rem;
  line-height: 1.7;
}

.weave-post-editor .kindmoa-rich-editor:empty::before {
  color: #9aa8b2;
  content: attr(data-placeholder);
  pointer-events: none;
}

.weave-post-editor .kindmoa-rich-editor:focus {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.editor-html-source {
  width: 100%;
  min-height: 320px;
  padding: 14px;
  resize: vertical;
  border: 1px solid var(--post-editor-border);
  border-top: 0;
  border-radius: 0 0 4px 4px;
  background: #f8fafb;
  color: #213b4d;
  font: 0.86rem/1.6 Consolas, Monaco, monospace;
}

.editor-html-source:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: inset 0 0 0 1px var(--primary);
}

.weave-post-attachment-section {
  padding-top: 2px;
}

.weave-post-editor .post-editor-dropzone {
  display: grid;
  gap: 12px;
  min-height: 94px;
  padding: 14px;
  border: 1px dashed #cbd8e1;
  border-radius: 6px;
  background: #fff;
  color: var(--post-editor-muted);
  text-align: left;
}

.weave-post-editor .post-editor-dropzone:hover,
.weave-post-editor .post-editor-dropzone:focus-visible,
.weave-post-editor .post-editor-dropzone.dragover {
  border-color: var(--primary);
  background: rgba(49, 183, 255, 0.055);
  outline: none;
}

.post-editor-dropzone-hint {
  font-size: 0.78rem;
  line-height: 1.65;
}

.post-editor-dropzone-hint strong {
  color: #223f52;
}

.post-editor-dropzone-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.post-editor-file-button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 6px 13px;
  border: 1px solid #cbd6de;
  border-radius: 4px;
  background: var(--post-editor-panel);
  color: #19384b;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.post-editor-file-button:hover {
  border-color: #9fc9df;
  background: #edf7fc;
}

.post-editor-dropzone-total {
  margin-left: auto;
  color: #7a8994;
  font-size: 0.75rem;
  white-space: nowrap;
}

.weave-post-editor .upload-queue-panel {
  border: 0;
  padding: 0;
  background: transparent;
}

.weave-post-editor .upload-queue-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 8px;
  margin: 8px 0 0;
}

.weave-post-editor .upload-queue-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 3px 8px;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid var(--post-editor-border);
  border-radius: 5px;
  background: var(--post-editor-panel);
}

.weave-post-editor .upload-queue-name {
  min-width: 0;
  overflow: hidden;
  color: #213b4c;
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weave-post-editor .upload-queue-item-retry {
  min-height: 28px;
  padding: 2px 8px;
  font-size: 0.75rem;
}

.upload-queue-reason {
  grid-column: 1 / -1;
}

.weave-post-editor > .d-flex.justify-content-end {
  gap: 8px;
  padding-top: 4px;
}

.weave-post-editor > .d-flex.justify-content-end .btn {
  min-width: 104px;
  border-radius: 4px;
}

@media (max-width: 767.98px) {
  .weave-post-editor {
    padding: 14px 12px;
    border-radius: 9px;
    box-shadow: none;
  }

  .kindmoa-editor-toolbar {
    position: static;
    top: auto;
    gap: 2px;
    margin: 0;
    padding: 5px;
    border-radius: 4px 4px 0 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  .kindmoa-editor-toolbar .pe-toolbar-btn {
    min-width: 32px;
    min-height: 32px;
    height: 32px;
    padding: 0 7px;
    font-size: 0.79rem;
  }

  .pe-toolbar-separator {
    margin-inline: 2px;
  }

  .pe-toolbar-extra {
    width: 100%;
    padding: 5px 0 0;
    border-top: 1px solid #d8e2e8;
  }

  .weave-post-editor .kindmoa-rich-editor,
  .editor-html-source {
    min-height: 270px;
    max-height: none;
  }

  .post-editor-dropzone-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .post-editor-file-button {
    width: 100%;
  }

  .post-editor-dropzone-total {
    margin-left: 0;
    text-align: right;
  }

  .weave-post-editor .upload-queue-list {
    grid-template-columns: 1fr;
  }

  .weave-post-editor > .d-flex.justify-content-end .btn {
    width: 100%;
  }
}
/* Volunteer journal calendar */
.calendar-journal-heading { position: relative; z-index: 1; }
.calendar-journal-kicker { display: block; margin-bottom: .35rem; color: #087bb7; font-size: .7rem; font-weight: 800; letter-spacing: .16em; }
.calendar-month-label { min-width: 8.5rem; text-align: center; color: #153247; font-size: 1rem; }
.calendar-nav-btn { display: inline-grid; place-items: center; width: 2.35rem; height: 2.35rem; padding: 0; border-radius: 50% !important; }
.calendar-journal-card { overflow: hidden; border: 1px solid #dcebf3 !important; border-radius: 20px !important; background: linear-gradient(145deg,#fff 0%,#fff 72%,#f3fbff 100%); }
.calendar-journal-card > .card-body { padding: clamp(1rem,2.5vw,2rem); }
.home-calendar-journal-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.9fr); gap: clamp(1.25rem,3vw,2.5rem); }
.home-calendar-month-panel { min-width: 0; padding: clamp(.75rem,2vw,1.35rem); border: 1px solid #e3edf3; border-radius: 16px; background: rgba(255,255,255,.94); }
.home-calendar-stories { min-width: 0; }
.calendar-summary { margin-top: 1rem; color: #526775; font-size: .82rem; }
.home-calendar-story-list { display: grid; grid-template-columns: 1fr; gap: .75rem; }
.home-journal-story,.journal-day-story { appearance: none; width: 100%; padding: 0; overflow: hidden; color: #153247; text-align: left; border: 1px solid #dce8ef; border-radius: 14px; background: #fff; box-shadow: 0 7px 18px rgba(26,67,91,.07); transition: border-color .2s ease,transform .2s ease,box-shadow .2s ease; }
.home-journal-story:hover,.journal-day-story:hover { transform: translateY(-2px); border-color: #31b7ff; box-shadow: 0 12px 25px rgba(26,109,153,.13); }
.home-journal-story:focus-visible,.journal-day-story:focus-visible,.weave-calendar-cell.day:focus-visible { outline: 3px solid #087bb7; outline-offset: 3px; }
.home-journal-featured { display: grid; grid-column: 1/-1; grid-template-columns: minmax(150px,.85fr) minmax(0,1.15fr); }
.home-journal-compact { display: flex; align-items: stretch; min-height: 112px; }
.journal-story-media { position: relative; display: block; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #eaf8ff; }
.journal-story-media img { width: 100%; height: 100%; object-fit: cover; }
.journal-story-media-compact { flex: 0 0 42%; width: 42%; min-width: 88px; aspect-ratio: auto; }
.journal-story-media-fallback { display: grid; place-items: center; color: #087bb7; background: radial-gradient(circle at 18% 22%,rgba(255,153,68,.22) 0 3px,transparent 4px),radial-gradient(circle at 76% 70%,rgba(49,183,255,.22) 0 4px,transparent 5px),linear-gradient(145deg,#e9f8ff,#f8fcff); }
.journal-story-media-fallback i { font-size: 1.8rem; }
.journal-media-mark { position: absolute; top: .55rem; left: .65rem; font-size: .65rem; font-weight: 900; letter-spacing: .08em; opacity: .7; }
.journal-story-body { display: flex; flex-direction: column; min-width: 0; padding: .9rem; gap: .35rem; }
.journal-story-title { display: -webkit-box; overflow: hidden; color: #153247; font-size: .94rem; font-weight: 800; line-height: 1.42; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.home-journal-featured .journal-story-title { font-size: 1.05rem; }
.journal-story-eyebrow { color: #087bb7; font-size: .68rem; font-weight: 800; letter-spacing: .08em; }
.journal-story-badges { display: flex; flex-wrap: wrap; gap: .3rem; min-height: 1.35rem; }
.journal-story-meta { display: flex; align-items: center; gap: .4rem; min-width: 0; color: #617482; font-size: .74rem; }
.journal-story-meta i { flex: 0 0 1rem; color: #159bdc; text-align: center; }
.journal-story-action { display: flex; align-items: center; justify-content: space-between; margin-top: .35rem; color: #087bb7; font-size: .76rem; font-weight: 800; }
.activities-calendar-journal-layout { display: grid; grid-template-columns: minmax(0,1.75fr) minmax(280px,.75fr); gap: clamp(1rem,2.5vw,2rem); align-items: start; }
.activities-calendar-month-panel { min-width: 0; }
.calendar-day-journal { position: sticky; top: 92px; min-width: 0; padding: 1.1rem; border: 1px solid #d7eaf5; border-radius: 16px; background: linear-gradient(155deg,#f5fbff,#fff); }
.calendar-day-story-list { display: grid; gap: .85rem; }
.journal-day-story { display: block; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; color: #647783; font-size: .72rem; }
.calendar-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.calendar-legend-dot,.calendar-legend-ring,.calendar-legend-selected { display: inline-block; width: .7rem; height: .7rem; }
.calendar-legend-dot { border-radius: 50%; background: #159bdc; }
.calendar-legend-ring { border: 2px solid #159bdc; border-radius: 50%; }
.calendar-legend-selected { border: 2px solid #087bb7; border-radius: 3px; background: #e5f7ff; }
.calendar-state { display: grid; justify-items: center; gap: .6rem; padding: 1.5rem 1rem; color: #617482; text-align: center; border: 1px dashed #bddceb; border-radius: 14px; background: rgba(255,255,255,.82); }
.calendar-state strong { color: #153247; }
.calendar-state-error { border-color: #efb6ac; background: #fff8f6; }
.calendar-empty-illustration { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; color: #159bdc; font-size: 1.4rem; border-radius: 18px; background: #e6f7ff; transform: rotate(-3deg); }
.weave-calendar-table { gap: 5px; }
.weave-calendar-cell { border-color: #e3ebf0; border-radius: 9px; }
.weave-calendar-cell.header { padding: .45rem .25rem; color: #607482; font-size: .72rem; background: transparent; border: 0; }
.weave-calendar-cell.day { position: relative; display: grid; grid-template-rows: minmax(0,1fr) auto; min-height: 82px; padding: .5rem; color: #233b4b; }
.weave-calendar-cell.day.has-activity { background: #fbfdff; border-color: #cfe6f2; }
.weave-calendar-cell.day.today .day-num { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; color: #087bb7; border: 2px solid #31b7ff; border-radius: 50%; }
.weave-calendar-cell.day.selected { border: 2px solid #087bb7; background: #edf9ff; box-shadow: 0 0 0 2px rgba(49,183,255,.15); }
.today-label { color: #087bb7; font-size: .58rem; font-weight: 800; }
.calendar-event-ribbon { display: block; width: calc(100% + 1rem); margin: .25rem -.5rem 0; padding: .22rem .42rem; overflow: hidden; color: #075f8c; font-size: .62rem; font-weight: 700; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; background: #dff4ff; }
.calendar-event-ribbon.range-start { margin-left: 0; width: calc(100% + .5rem); border-radius: 8px 0 0 8px; }
.calendar-event-ribbon.range-middle { border-radius: 0; }
.calendar-event-ribbon.range-end { width: 100%; border-radius: 0 8px 8px 0; }
.calendar-event-dot { display: block; width: .4rem; height: .4rem; margin-top: auto; border-radius: 50%; background: #159bdc; box-shadow: 0 0 0 3px rgba(49,183,255,.12); }
#home-calendar-mini-grid .weave-calendar-cell.day { align-items: center; justify-content: center; min-height: 44px; padding: .25rem; text-align: center; border-color: transparent; background: transparent; }
#home-calendar-mini-grid .weave-calendar-cell.day.has-activity { border-color: transparent; background: transparent; }
#home-calendar-mini-grid .weave-calendar-cell.day.today .day-num { width: 1.65rem; height: 1.65rem; }
#home-calendar-mini-grid .calendar-event-dot { width: .32rem; height: .32rem; margin: .15rem auto 0; }
@media (max-width: 991.98px) {
  .home-calendar-journal-layout,.activities-calendar-journal-layout { grid-template-columns: 1fr; }
  .calendar-day-journal { position: static; }
}
@media (max-width: 575.98px) {
  .calendar-journal-heading { align-items: flex-start !important; }
  .calendar-journal-controls { width: 100%; justify-content: space-between; }
  .calendar-journal-card > .card-body { padding: .8rem; }
  .home-calendar-month-panel { padding: .5rem; }
  #home-calendar-mini-grid { overflow: visible; }
  #home-calendar-mini-grid .weave-calendar-table { min-width: 0; gap: 1px; }
  .weave-calendar-table { gap: 2px; }
  .weave-calendar-cell.day { min-height: 58px; padding: .25rem; border-radius: 7px; }
  .weave-calendar-cell.day .day-num { font-size: .78rem; }
  .calendar-event-ribbon { width: calc(100% + .5rem); margin-inline: -.25rem; font-size: 0; min-height: .32rem; padding: 0; }
  .calendar-event-ribbon::after { content: ''; display: block; height: .32rem; background: #a9def7; }
  .today-label { display: none; }
  .calendar-legend { gap: .7rem; }
  .home-calendar-story-list { grid-template-columns: 1fr; }
  .home-journal-featured { grid-template-columns: 1fr; }
  .home-journal-compact { min-height: 105px; }
  .calendar-day-journal { padding: .85rem; }
}

/* Calendar discovery controls, dense-day popover, and agenda view */
.calendar-discovery-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:-.5rem 0 1.15rem;padding:.7rem .8rem;border:1px solid #dcebf3;border-radius:14px;background:#f7fcff}
.calendar-view-toggle{display:inline-flex;padding:3px;border-radius:11px;background:#e6f6fe}
.calendar-personal-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.16rem .42rem;border-radius:999px;color:#476270;background:#eef5f8;font-size:.68rem;font-weight:800;line-height:1.2}
.calendar-personal-badge.state-waiting{color:#8a5b00;background:#fff3cf}
.calendar-personal-badge.state-confirmed{color:#08734d;background:#def8ec}
.calendar-personal-badge.state-completed{color:#075f8c;background:#dff3ff}
.calendar-personal-badge.state-cancel_requested,.calendar-personal-badge.state-cancelled{color:#9b3e3e;background:#fff0f0}
.calendar-personal-badge.is-interest{color:#b44769;background:#fff0f5}
.calendar-interest-btn{display:inline-flex;align-items:center;gap:.25rem;min-height:30px;padding:.25rem .5rem;color:#b44769;border:1px solid #f0c5d2;border-radius:8px;background:#fff7fa;font-size:.72rem;font-weight:800}
.calendar-interest-btn.is-active{color:#fff;border-color:#c25878;background:#c25878}
.calendar-interest-btn:focus-visible{outline:3px solid #087bb7;outline-offset:2px}

.calendar-view-btn{min-height:36px;padding:.4rem .8rem;color:#476270;font-size:.78rem;font-weight:800;border:0;border-radius:8px;background:transparent}
.calendar-view-btn.active{color:#075f8c;background:#fff;box-shadow:0 3px 10px rgba(21,103,145,.12)}
.calendar-filter-label{display:flex;align-items:center;gap:.6rem;margin:0;color:#476270;font-size:.75rem;font-weight:800}
.calendar-filter-label .form-select{width:auto;min-width:128px}
.activity-focus-control{padding:.7rem;border:1px solid #dcebf3;border-radius:12px;background:#f8fcff}
.activity-focus-fields{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.activity-focus-fields label{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.4rem;color:#526775;font-size:.72rem}
.activity-focus-fields output{min-width:2.4rem;text-align:right}
.activity-focus-preview{display:grid;place-items:center;min-height:88px;margin-top:.55rem;overflow:hidden;color:#6b7e89;font-size:.72rem;border:1px dashed #b9dbe9;border-radius:10px;background:#fff}
.activity-focus-preview img{width:100%;height:112px;object-fit:cover}
.calendar-date-button{display:flex;flex-direction:column;width:100%;height:100%;min-height:inherit;padding:0;color:inherit;text-align:left;border:0;background:transparent}
.calendar-date-button:focus-visible,.calendar-density-trigger:focus-visible,.calendar-view-btn:focus-visible,.journal-share-actions button:focus-visible,.calendar-agenda-item button:focus-visible{outline:3px solid #087bb7;outline-offset:2px}
.calendar-event-ribbon i{margin-right:.25rem}
.calendar-density-trigger{position:static;justify-self:end;z-index:2;min-width:1.65rem;height:1.35rem;padding:0 .35rem;color:#075f8c;font-size:.65rem;font-weight:900;border:1px solid #8ed6f7;border-radius:999px;background:#fff;box-shadow:0 2px 5px rgba(8,123,183,.12)}
.weave-calendar-cell.density-high{background:linear-gradient(145deg,#fff,#eaf8ff)}
.calendar-density-popover{position:absolute;z-index:20;top:10.5rem;left:50%;width:min(360px,calc(100% - 2rem));max-height:420px;overflow:auto;transform:translateX(-50%);border:1px solid #addcf1;border-radius:16px;background:#fff;box-shadow:0 18px 50px rgba(17,67,94,.22)}
.calendar-density-popover-head{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;border-bottom:1px solid #e4eef3;background:#f8fcff}
.calendar-density-popover-head button{display:grid;place-items:center;width:2rem;height:2rem;border:0;border-radius:50%;background:#e5f6fe}
.calendar-density-list{display:grid;gap:.35rem;padding:.6rem}
.calendar-density-list>button{display:flex;align-items:center;gap:.75rem;padding:.7rem;color:#153247;text-align:left;border:1px solid transparent;border-radius:11px;background:#fff}
.calendar-density-list>button:hover{border-color:#9bdaf6;background:#f3fbff}
.calendar-density-list>button>i{display:grid;place-items:center;width:2rem;height:2rem;color:#087bb7;border-radius:10px;background:#e6f7ff}
.calendar-density-list span{display:grid;min-width:0}
.calendar-density-list strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.calendar-density-list small{color:#667b88}
.calendar-type-badge,.calendar-recruitment-badge{display:inline-flex;align-items:center;gap:.28rem;width:max-content;padding:.2rem .42rem;font-size:.64rem;font-weight:800;border-radius:999px}
.calendar-type-badge{color:#075f8c;background:#def3fd}
.calendar-recruitment-badge.state-open{color:#17653c;background:#e4f7ec}
.calendar-recruitment-badge.state-closingSoon{color:#8a5200;background:#fff0c9}
.calendar-recruitment-badge.state-closed{color:#81535a;background:#f3e8ea}
.calendar-recruitment-badge.state-notConfigured{color:#5c6970;background:#edf1f3}
.journal-story-open{display:flex;flex-direction:column;gap:.35rem;width:100%;padding:0;color:inherit;text-align:left;border:0;background:transparent}
.journal-share-actions{display:flex;gap:.4rem;margin-top:.35rem}
.journal-share-actions button{display:inline-flex;align-items:center;gap:.3rem;min-height:34px;padding:.3rem .6rem;color:#087bb7;font-size:.7rem;font-weight:800;border:1px solid #b9dff1;border-radius:8px;background:#fff}
.calendar-agenda-list{display:grid;gap:.65rem}
.calendar-agenda-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:.8rem;padding:.85rem;border:1px solid #dce8ef;border-radius:14px;background:#fff;box-shadow:0 5px 14px rgba(26,67,91,.05)}
.calendar-agenda-item time{display:grid;place-items:center;align-self:stretch;color:#087bb7;border-right:1px solid #e2ecf2}
.calendar-agenda-item time strong{font-size:.88rem}.calendar-agenda-item time span{font-size:.68rem}
.calendar-agenda-item>button{display:grid;gap:.25rem;min-width:0;padding:0;color:#153247;text-align:left;border:0;background:transparent}
.calendar-agenda-item>button>span{display:flex;flex-wrap:wrap;gap:.3rem}
.calendar-agenda-item>button>strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.calendar-agenda-item>button>small{overflow:hidden;color:#617482;white-space:nowrap;text-overflow:ellipsis}
.calendar-agenda-actions{display:flex;gap:.3rem}
.calendar-agenda-actions button{display:grid;place-items:center;width:34px;height:34px;color:#087bb7;border:1px solid #bddfec;border-radius:9px;background:#f7fcff}
@media(max-width:575.98px){
 .calendar-discovery-toolbar{align-items:stretch;flex-direction:column}
 .calendar-view-toggle{display:grid;grid-template-columns:1fr 1fr}
 .calendar-filter-label{justify-content:space-between}
 .calendar-filter-label .form-select{flex:1}
 .activity-focus-fields{grid-template-columns:1fr}
 .calendar-density-popover{position:fixed;top:auto;right:.75rem;bottom:calc(74px + env(safe-area-inset-bottom));left:.75rem;width:auto;max-height:52vh;transform:none}
 .calendar-date-button{box-sizing:border-box;min-height:42px;scroll-margin-block:90px}
 .calendar-density-trigger{min-width:1.15rem;height:1.15rem;padding:0 .2rem;font-size:.55rem}
 .calendar-agenda-item{grid-template-columns:52px minmax(0,1fr)}
 .calendar-agenda-actions{grid-column:2;justify-content:flex-end}
 .journal-share-actions button{flex:1;justify-content:center}
}
/* Calendar management: staff drag targets, impact dialogs, and map actions. */
.calendar-event-ribbon[draggable="true"] { cursor: grab; outline-offset: 2px; }
.calendar-event-ribbon[draggable="true"]:active,
.calendar-event-ribbon.is-dragging { cursor: grabbing; opacity: .56; }
.weave-calendar-cell.calendar-drop-target {
  outline: 3px solid #31b7ff;
  outline-offset: -3px;
  background: #eaf8ff;
}
.activity-impact-list { display: grid; gap: .65rem; }
.activity-impact-list > div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: .75rem;
}
.activity-impact-list dt { color: #526675; font-size: .86rem; }
.activity-impact-list dd { margin: 0; font-weight: 700; }
.activity-map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}
.activity-map-actions .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
@media (max-width: 575.98px) {
  .activity-map-actions .btn { flex: 1 1 9rem; justify-content: center; }
  .activity-impact-list > div { grid-template-columns: 1fr; gap: .15rem; }
}

/* Member-facing schedule, recommendation, and onboarding surfaces. */
.member-recommendations{display:grid;gap:.5rem;text-align:left}.member-recommendation{position:relative;display:grid;gap:.12rem;padding:.72rem .82rem;color:#123247;text-align:left;border:1px solid #c8e7f4;border-radius:12px;background:#f7fcff}.member-recommendation:hover{border-color:#31aeea;background:#effaff}.member-recommendation small{color:#637886}.member-match-badge{position:absolute;right:.7rem;top:.65rem;padding:.14rem .38rem;color:#075f8c;font-size:.66rem;font-weight:800;border-radius:999px;background:#dff5ff}.notice-unread-banner{display:flex;align-items:center;gap:.6rem;width:100%;padding:.7rem 1rem;color:#145778;text-align:left;border:1px solid #bce2f1;border-radius:12px;background:#f1fbff}.notice-unread-banner span{padding:.15rem .42rem;color:#0872a6;font-size:.72rem;font-weight:800;border-radius:999px;background:#d9f3ff}.notice-unread-banner strong{overflow:hidden;flex:1;white-space:nowrap;text-overflow:ellipsis}.notice-read-summary-done{display:block;padding:.5rem 0;color:#6c7d86;font-size:.8rem}.notice-read-detail{display:inline-flex;align-items:center;margin-top:.5rem;padding:.2rem .42rem;color:#16734b;font-size:.72rem;font-weight:700;border-radius:999px;background:#e7f8ee}.member-onboarding-card{border:0;border-radius:18px;box-shadow:0 20px 60px rgba(15,69,96,.25)}.member-onboarding-kicker{margin-bottom:.45rem;color:#0783bf;font-size:.72rem;font-weight:900;letter-spacing:.08em}.member-onboarding-guide{display:grid;gap:.55rem;padding-left:1.1rem;color:#405866;font-size:.9rem}.mobile-home-quick-schedule{display:none}
@media(max-width:768px){.mobile-home-quick-schedule{display:block;margin:0 0 .8rem;padding:.85rem;border:1px solid #cdebf7;border-radius:14px;background:linear-gradient(135deg,#f5fcff,#eaf8fe)}.mobile-quick-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:.55rem;font-size:.84rem;font-weight:800}.mobile-quick-heading button{padding:0;color:#087bb7;font-size:.74rem;border:0;background:transparent}.mobile-quick-item{display:grid;width:100%;padding:.5rem 0;color:#193d51;text-align:left;border:0;border-top:1px solid #d9edf5;background:transparent}.mobile-quick-item:first-of-type{border-top:0}.mobile-quick-item small{color:#667d8b;font-size:.72rem}.member-match-badge{position:static;width:max-content;margin-top:.2rem}}

/* Notice read state and activity history controls. */
.notice-list-state{display:inline-flex;align-items:center;margin-left:.42rem;padding:.12rem .38rem;font-size:.66rem;font-weight:800;line-height:1.25;border-radius:999px;vertical-align:middle}.notice-list-state.is-new{color:#086e9f;background:#d9f4ff}.notice-list-state.is-read{color:#65747c;background:#eef2f4}@media(max-width:575.98px){.notice-list-state{margin-left:.28rem}}

/* Activity badges, annual comparison, capacity and attachment download metrics. */
.member-profile-achievements{display:flex;align-items:center;justify-content:center;gap:.35rem;flex-wrap:wrap}.member-level-badge,.member-activity-badge,.member-profile-progress{display:inline-flex;align-items:center;gap:.28rem;padding:.24rem .48rem;font-size:.7rem;font-weight:800;border-radius:999px}.member-level-badge{color:#0a668f;background:#dff5ff}.member-level-badge.level-grow{color:#216b44;background:#e5f6eb}.member-level-badge.level-connector{color:#725a17;background:#fff1c8}.member-level-badge.level-leader{color:#7a4b16;background:#ffe6b8}.member-activity-badge{color:#586875;background:#f0f4f6}.member-profile-progress{color:#637783;font-weight:700}.activity-capacity-status{display:inline-flex;margin-top:.55rem;padding:.25rem .5rem;color:#086e9d;font-size:.73rem;font-weight:800;border-radius:999px;background:#e4f7ff}.attachment-download-count{color:#71808a;font-size:.68rem;font-weight:700}@media(max-width:575.98px){.member-profile-progress{width:100%;justify-content:center}.activity-capacity-status{font-size:.69rem}}



/* Notice activity state is derived from the saved volunteer date range. */
.notice-activity-status { display: inline-flex; align-items: center; justify-content: center; min-width: 3.7rem; padding: .22rem .48rem; border: 1px solid transparent; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.notice-activity-status.is-recruiting { color: #086089; background: #e8f8ff; border-color: #8fd3f4; }
.notice-activity-status.is-active { color: #0f6b43; background: #e5f7ed; border-color: #97d9b2; }
.notice-activity-status.is-closed { color: #6b7280; background: #f2f4f7; border-color: #cfd5df; }
.notice-activity-status.is-none { color: #697586; background: #f8fafc; border-color: #d8e0e8; }

@media (max-width: 575.98px) {
  #news-table tr { grid-template-columns: auto 1fr auto auto auto auto; grid-template-areas: "status title title title title title" "author date views comments likes likes"; }
  #news-table td[data-col-key='status'] { grid-area: status; align-self: start; padding-top: 4px; }
  #news-table td[data-col-key='comments'] { grid-area: comments; font-size: .79rem; color: #6a7886; text-align: right; justify-self: end; }
  #news-table td[data-col-key='comments']::before { content: none; }
}

/* Recruitment deadline emphasis keeps urgent notices scannable without changing the Weave palette. */
.deadline-badge.deadline-urgent { background: #fff0eb; border-color: #f3a08a; color: #b43a1f; font-weight: 800; }
.deadline-badge.deadline-soon { background: #fff8dc; border-color: #e5ba4c; color: #795400; font-weight: 800; }
.notice-application-action { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }

.news-filter-feedback { white-space: nowrap; }
.news-empty-row td { padding: 2.25rem 1rem !important; text-align: center; color: #5d7186; background: #f8fbfe; }
.home-notice-deadline-alert { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .55rem; padding: .25rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 800; line-height: 1.2; }
.home-notice-deadline-alert.is-today { color: #9c2f1c; background: #fff0eb; border: 1px solid #f2a088; }
.home-notice-deadline-alert.is-tomorrow { color: #765000; background: #fff8dc; border: 1px solid #e6bf57; }
.home-notice-deadline-alert.is-expired { color: #5d7186; background: #f1f5f8; border: 1px solid #b9c8d4; }
@media (max-width: 575.98px) { .news-filter-feedback { display: block; margin: .2rem 0 0 !important; } }
/* Activity status contract: the same semantic color and icon treatment is used across home, news, and calendar. */
.weave-status-badge { display: inline-flex; align-items: center; gap: .28rem; }
.weave-status-badge.is-recruiting { color: #086089; background: #e8f8ff; border-color: #8fd3f4; }
.weave-status-badge.is-closingSoon { color: #795400; background: #fff8dc; border-color: #e5ba4c; }
.weave-status-badge.is-active { color: #0f6b43; background: #e5f7ed; border-color: #97d9b2; }
.weave-status-badge.is-closed { color: #6b7280; background: #f2f4f7; border-color: #cfd5df; }
.weave-status-badge.is-none { color: #697586; background: #f8fafc; border-color: #d8e0e8; }
.home-notice-deadline-alert.weave-status-badge.is-closingSoon.is-today,
.home-notice-deadline-alert.weave-status-badge.is-closingSoon.is-tomorrow { color: #795400; background: #fff8dc; border-color: #e5ba4c; }
.home-notice-deadline-alert.weave-status-badge.is-closed.is-expired { color: #6b7280; background: #f2f4f7; border-color: #cfd5df; }

/* FAQ category accordion */
.faq-category-row th {
  background: rgba(44, 178, 239, 0.09);
  border-top: 1px solid rgba(44, 178, 239, 0.24);
  color: #12658b;
}
.faq-category-toggle {
  color: #12658b;
  font-weight: 700;
}
.faq-category-toggle:focus-visible {
  outline: 3px solid rgba(44, 178, 239, 0.45);
  outline-offset: 2px;
}
.faq-category-chevron {
  display: inline-block;
  min-width: 1.1em;
  font-size: 0.8em;
}

/* ============ MOBILE ACCESSIBILITY GUARDRAILS ============ */
@media (max-width: 768px) {
  #mobileMenuDrawer .list-group-item,
  #mobileMenuDrawer .mobile-menu-quick-actions .btn,
  #mobileMenuDrawer .btn-close,
  #mobile-bottom-nav .mobile-tab {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }

  #mobileMenuDrawer .list-group-item:focus-visible,
  #mobileMenuDrawer .mobile-menu-quick-actions .btn:focus-visible,
  #mobile-bottom-nav .mobile-tab:focus-visible {
    outline: 3px solid #075f88 !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px #075f88 !important;
  }

  #mobileMenuDrawer .btn-close:focus-visible {
    outline: 3px solid #075f88;
    outline-offset: 3px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px #075f88;
  }
}

@media (prefers-reduced-motion: reduce) {
  #mobileMenuDrawer,
  #mobileMenuDrawer *,
  #mobile-bottom-nav,
  #mobile-bottom-nav * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  #mobileMenuDrawer .list-group-item.is-active,
  #mobileMenuDrawer .list-group-item[aria-current="page"],
  #mobile-bottom-nav .mobile-tab.active {
    forced-color-adjust: none;
    background: Highlight !important;
    border: 2px solid Highlight !important;
    color: HighlightText !important;
  }

  #mobileMenuDrawer .list-group-item:focus-visible,
  #mobileMenuDrawer .mobile-menu-quick-actions .btn:focus-visible,
  #mobileMenuDrawer .btn-close:focus-visible,
  #mobile-bottom-nav .mobile-tab:focus-visible {
    outline: 3px solid CanvasText !important;
    box-shadow: none !important;
  }
}


@media (max-width: 768px) {
  .calendar-density-trigger,
  .calendar-density-popover-head button,
  .calendar-view-btn,
  .calendar-nav-btn,
  .detail-volunteer-calendar-btn,
  .journal-share-actions button,
  .weave-post-editor .editor-toolbar button,
  .weave-post-editor .editor-toolbar [role="button"] {
    min-width: 44px;
    min-height: 44px;
  }

  .rich-editor:focus-visible,
  .weave-post-editor .kindmoa-rich-editor:focus-visible {
    outline: 3px solid #075f88;
    outline-offset: 3px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px #075f88;
  }
}

/* MOBILE COMMUNITY UX */
@media (max-width: 768px) {
  .weave-post-editor { padding: 12px; border-radius: 16px; }
  .weave-post-editor .editor-toolbar,
  .weave-post-editor .rich-editor-toolbar { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .weave-post-editor .editor-toolbar button,
  .weave-post-editor .editor-toolbar [role="button"],
  .post-editor-file-button,
  .gallery-image-delete-btn,
  .editor-image-delete-btn,
  .upload-queue-panel button,
  .comment-actions .btn,
  .comment-form button,
  .comment-reply-form button,
  .join-honor-card-actions .btn,
  .calendar-agenda-actions button,
  .calendar-density-trigger,
  .calendar-density-popover-head button,
  .calendar-view-btn,
  .calendar-nav-btn,
  .detail-volunteer-calendar-btn,
  #my-notifications-list .list-group-item,
  #my-notifications-filter-all,
  #my-notifications-filter-unread,
  #my-notifications-mark-all-read {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }
  .post-editor-file-button { display: inline-flex; align-items: center; justify-content: center; }
  .comment-form .input-group, .comment-reply-form .input-group { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .comment-actions { gap: 6px !important; flex-wrap: wrap; }
  #news-table tr, #faq-table tr, #qna-table tr { padding: 12px; box-shadow: 0 4px 14px rgba(22, 64, 87, .08); }
  #news-table td[data-col-key="title"], #faq-table td[data-col-key="title"], #qna-table td[data-col-key="title"], #faq-table td[data-col-key="question"], #qna-table td[data-col-key="question"] { font-size: .98rem; font-weight: 700; }
  #news-table td:not([data-col-key="title"]), #faq-table td:not([data-col-key="title"]):not([data-col-key="question"]), #qna-table td:not([data-col-key="title"]):not([data-col-key="question"]) { font-size: .82rem; }
  #gallery-grid.mobile-cols-1 { grid-template-columns: 1fr; }
  #gallery-grid.mobile-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .calendar-discovery-toolbar { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .calendar-view-toggle { width: 100%; }
  .calendar-view-btn { flex: 1; }
  .calendar-filter-label { justify-content: space-between; min-height: 44px; }
  .calendar-filter-label .form-select { min-width: 0; flex: 1; }
  .join-honor-card { grid-template-columns: 58px minmax(0, 1fr); }
  .join-honor-card-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  #myinfo .myinfo-notification-card > .card-body > .d-flex { flex-wrap: wrap; }
  #myinfo .myinfo-notification-card [data-my-notification-action] { flex: 1 1 auto; }
}
.weave-lightbox { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 12px; background: rgba(4, 19, 30, .92); }
.weave-lightbox.d-none { display: none !important; }
.weave-lightbox-backdrop { position: absolute; inset: 0; }
.weave-lightbox-panel { position: relative; z-index: 1; width: min(100%, 980px); display: grid; gap: 8px; }
.weave-lightbox-toolbar { display: flex; justify-content: space-between; align-items: center; color: #fff; }
.weave-lightbox-stage { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; min-height: min(78vh, 720px); }
.weave-lightbox-image { max-width: 100%; max-height: 78vh; margin: auto; object-fit: contain; touch-action: pan-y; }
.weave-lightbox-nav { min-width: 44px; min-height: 44px; border: 0; border-radius: 50%; color: #153247; background: #fff; font-size: 2rem; }
.weave-lightbox-error { color: #ffd6d6; text-align: center; }
body.weave-lightbox-open { overflow: hidden; }
.weave-mobile-dialog { position: fixed; inset: 0; z-index: 3010; display: grid; place-items: center; padding: 16px; }
.weave-mobile-dialog-backdrop { position: absolute; inset: 0; background: rgba(4, 19, 30, .52); }
.weave-mobile-dialog-panel { position: relative; width: min(100%, 440px); padding: 20px; border-radius: 16px; background: #fff; color: #153247; box-shadow: 0 18px 52px rgba(4, 19, 30, .28); }
.weave-mobile-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.weave-mobile-dialog-actions .btn { min-width: 88px; min-height: 44px; }
.notification-state-badge { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.notification-state-badge.is-unread { color: #fff; background: #0b8bc5; }
.notification-state-badge.is-read { color: #526775; background: #e8eff3; }
.my-notification-item.is-unread { border-left: 4px solid #0b8bc5 !important; }
.notification-kind-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 7px; border-radius: 999px; color: transparent; background: transparent; font-size: .68rem; font-weight: 800; }
.notification-kind-badge.is-activity { color: #075985; background: #dff3ff; border: 1px solid #9ddcf7; }
.activity-application-badge { display: inline-flex; align-items: center; margin-top: 3px; padding: 2px 7px; border-radius: 999px; font-size: .7rem; font-weight: 800; border: 1px solid currentColor; }
.activity-application-badge.is-waiting { color: #8a5a00; background: #fff3cd; }
.activity-application-badge.is-confirmed { color: #087443; background: #e4f7ec; }
.activity-application-badge.is-cancel-requested { color: #955800; background: #fff1d6; }
.activity-application-badge.is-cancelled { color: #687782; background: #eef2f4; }
@media (prefers-reduced-motion: reduce) {
  .weave-lightbox *, .weave-post-editor *, .gallery-card, .weave-mobile-dialog * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Nearby activity cards use one consistent full-width row per item. */
.home-journal-uniform { display: grid; grid-column: auto; grid-template-columns: minmax(150px,.85fr) minmax(0,1.15fr); min-height: 0; }
.home-journal-uniform .journal-story-title { font-size: 1.05rem; }
@media (max-width: 575.98px) { .home-journal-uniform { grid-template-columns: 1fr; } .home-journal-uniform .journal-story-media { aspect-ratio: 16 / 9; } }

/* Mobile header auth and neutral drawer rows */
.mobile-header-auth { display: none !important; }

@media (max-width: 767.98px) {
  .site-header .navbar > .container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }

  .site-header .navbar-brand {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 0;
  }

  .site-header .navbar-toggler {
    flex: 0 0 auto;
    order: 3;
    width: 42px;
    height: 42px;
    padding: 6px;
  }

  .mobile-header-auth {
    display: flex !important;
    flex: 0 0 auto;
    order: 2;
    gap: 4px !important;
  }

  .mobile-header-auth.d-none {
    display: none !important;
  }

  .mobile-header-auth .btn {
    min-height: 34px;
    padding: 7px 9px;
    border-radius: 9px;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
  }

  #navMenu {
    order: 4;
  }

  #mobileMenuDrawer .mobile-menu-breadcrumb {
    display: none !important;
  }

  #mobileMenuDrawer .mobile-menu-scroll-area > .list-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    width: 100%;
    text-align: left;
  }

  #mobileMenuDrawer .mobile-menu-scroll-area > a.list-group-item::after,
  #mobileMenuDrawer .mobile-menu-scroll-area > button.list-group-item::after {
    content: '\f054';
    flex: 0 0 1.25rem;
    width: 1.25rem;
    color: currentColor;
    font-family: 'Font Awesome 6 Free';
    font-size: 0.72rem;
    font-weight: 900;
    text-align: center;
    opacity: 0.58;
  }

  #mobileMenuDrawer .mobile-menu-scroll-area > button.list-group-item::after {
    content: '\f078';
    transition: transform 180ms ease;
  }

  #mobileMenuDrawer .mobile-menu-scroll-area > button.list-group-item[aria-expanded='true']::after {
    transform: rotate(180deg);
  }

  #mobileMenuDrawer .mobile-menu-scroll-area > button.list-group-item > i {
    display: none;
  }

  #mobileMenuDrawer .mobile-menu-scroll-area > .collapse > .list-group-item {
    text-align: left;
  }
}
/* Mobile header keeps one logo, one auth action group, and one menu trigger. */
@media (max-width: 767.98px) {
  .site-header .navbar > .container {
    width: 100%;
    max-width: none;
  }

  .site-header .navbar-brand {
    display: flex !important;
    flex: 1 1 auto;
    min-width: 40px;
    max-width: none;
    overflow: visible;
    visibility: visible !important;
  }

  .site-header .navbar-brand .logo-wrapper {
    display: flex !important;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
  }

  #navMenu,
  #auth-buttons,
  #user-profile {
    display: none !important;
  }
}

.signup-phone-verification {
  border: 1px solid rgba(49, 183, 255, 0.28);
  border-radius: 14px;
  padding: 1rem;
  background: #fafdff;
}

.signup-phone-verification [hidden] { display: none !important; }

.signup-phone-verification .input-group .btn {
  min-width: 118px;
  border-radius: 10px;
}

@media (max-width: 576px) {
  .signup-phone-verification { padding: 0.85rem; }
  .signup-phone-verification .input-group { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .signup-phone-verification [hidden] { display: none !important; }

.signup-phone-verification .input-group .btn { min-width: 98px; }
}
/* Gallery tag badges and shared representative-image controls. */
.gallery-tag-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.gallery-tag-badge { display: inline-flex; align-items: center; gap: .3rem; min-height: 1.55rem; padding: .16rem .5rem; border: 1px solid #b9e4fa; border-radius: 999px; color: #12618a; background: #effaff; font-size: .72rem; font-weight: 700; line-height: 1.15; }
.gallery-tag-badge i { color: #138cca; font-size: .68rem; }
.editor-image-pin-btn { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border: 1px solid rgba(18, 67, 96, .24); border-radius: 999px; background: rgba(255,255,255,.94); color: #1e5f84; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.editor-image-pin-btn.active { border-color: #31b7ff; background: #31b7ff; color: #fff; }
.editor-inline-image-wrap.is-pinned { outline: 2px solid rgba(49,183,255,.45); outline-offset: 3px; border-radius: 4px; }
.editor-inline-image-wrap.is-pinned::after { content: '대표'; position: absolute; right: 8px; bottom: 8px; min-height: 22px; padding: 0 8px; border-radius: 999px; background: rgba(49,183,255,.96); color: #fff; font-size: .72rem; font-weight: 700; line-height: 22px; }
@media (max-width: 575.98px) { .gallery-tag-badges { margin-top: .45rem; } .gallery-tag-badge { font-size: .68rem; } }
/* My Info tab separation */
#myinfo .myinfo-section-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(49, 183, 255, 0.22);
  border-radius: 14px;
  background: #edf9ff;
}
#myinfo .myinfo-section-tab {
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  color: #356279;
  background: transparent;
  font-weight: 700;
}
#myinfo .myinfo-section-tab.is-active {
  color: #0d547c;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(15, 77, 111, 0.12);
}
#myinfo .myinfo-section-tab:focus-visible {
  outline: 3px solid rgba(49, 183, 255, 0.55);
  outline-offset: 2px;
}
#myinfo .myinfo-volunteer-guide {
  padding: 0.85rem 1rem;
  border: 1px solid rgba(49, 183, 255, 0.18);
  border-radius: 12px;
  color: #4d6c7e;
  background: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
  text-align: left;
}

/* Standalone external media previews generated from allowlisted post links. */
.weave-social-embed {
  display: grid;
  gap: 0.45rem;
  width: min(100%, 720px);
  margin: 1rem auto;
}
.weave-social-embed-frame {
  position: relative;
  width: 100%;
  min-height: 200px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(21, 50, 71, 0.16);
  border-radius: 14px;
  background: #10212d;
  box-shadow: 0 8px 20px rgba(8, 36, 56, 0.1);
}
.weave-social-embed--instagram .weave-social-embed-frame,
.weave-social-embed--tiktok .weave-social-embed-frame {
  max-width: 520px;
  margin-inline: auto;
}
.weave-social-embed-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.weave-social-embed figcaption {
  padding-inline: 0.2rem;
  color: #547184;
  font-size: 0.82rem;
  text-align: right;
}
.weave-social-embed figcaption a { color: #1677ad; }
@media (max-width: 576px) {
  #myinfo .myinfo-section-tabs { margin-bottom: 1rem !important; }
  .weave-social-embed { margin-block: 0.85rem; }
  .weave-social-embed-frame { border-radius: 12px; }
}

/* Restored My Info workspace: profile settings and volunteering use the full desktop canvas. */
#myinfo .myinfo-container { max-width: 1440px; }
#myinfo .myinfo-shell { width: 100%; border-radius: 22px; }
#myinfo .myinfo-body { text-align: left; }
#myinfo .myinfo-identity-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(67, 131, 166, .16); }
#myinfo .myinfo-identity-copy { min-width: 0; }
#myinfo .myinfo-identity-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
#myinfo .myinfo-tabs { display: inline-flex; gap: .35rem; margin: 1.25rem 0; padding: .25rem; border: 1px solid rgba(40, 126, 171, .16); border-radius: 999px; background: rgba(255, 255, 255, .84); }
#myinfo .myinfo-tab { border: 0; border-radius: 999px; background: transparent; color: #456275; font-weight: 700; padding: .52rem 1rem; }
#myinfo .myinfo-tab.is-active { background: #35afea; color: #fff; box-shadow: 0 .2rem .6rem rgba(24, 138, 196, .22); }
#myinfo .myinfo-tab:focus-visible { outline: 3px solid rgba(8, 124, 185, .34); outline-offset: 2px; }
#myinfo .myinfo-workspace { display: grid; gap: 1rem; }
#myinfo .myinfo-profile-workspace { grid-template-columns: minmax(0, 1.35fr) minmax(340px, .8fr); align-items: start; }
#myinfo .myinfo-main-column,
#myinfo .myinfo-side-column { display: grid; gap: 1rem; min-width: 0; }
#myinfo .myinfo-section-card,
#myinfo .my-volunteer-card { border: 1px solid rgba(72, 181, 235, .2) !important; border-radius: 16px; background: rgba(255, 255, 255, .9); box-shadow: 0 8px 22px rgba(18, 79, 110, .05); }
#myinfo .myinfo-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
#myinfo .myinfo-section-heading h4 { color: #17394d; }
#myinfo .myinfo-volunteer-workspace { max-width: 980px; margin: 0 auto; }
#myinfo .my-activity-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-bottom: 1rem; }
#myinfo .my-activity-stat { display: grid; gap: .18rem; justify-items: center; padding: .8rem .65rem; color: #1f4f6b; border-color: rgba(67, 131, 166, .25) !important; background: #f4fbff !important; font-size: 1.1rem; }
#myinfo .my-activity-stat-label { color: #607d8f; font-size: .78rem; font-weight: 700; }
#myinfo .my-volunteer-empty { border: 1px dashed #b7dceb; border-radius: .75rem; background: #fff; color: #577082; padding: 1rem; text-align: center; }
#myinfo .my-volunteer-item { padding: 1rem; border: 1px solid rgba(72, 181, 235, .22); border-radius: 13px; background: #fff; box-shadow: 0 .25rem .75rem rgba(18, 79, 110, .05); }
#myinfo .my-volunteer-item-header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
#myinfo .my-volunteer-item-title { color: #17394d; overflow-wrap: anywhere; }
#myinfo .my-volunteer-meta { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: .3rem .75rem; font-size: .875rem; }
#myinfo .my-volunteer-meta dt { color: #627889; font-weight: 500; }
#myinfo .my-volunteer-meta dd { color: #26475b; margin: 0; }
#myinfo .my-volunteer-date-link { color: #087cb9; text-decoration: underline; text-underline-offset: .16em; }
#myinfo .my-volunteer-actions { display: flex; justify-content: flex-end; margin-top: .9rem; }
#myinfo .my-volunteer-actions .btn { padding: .25rem .55rem; font-size: .78rem; }

/* Notice titles lead the scan order; status badges stay compact and equal-sized. */
#news-table { table-layout: fixed; }
#news-table .th-status,
#news-table td[data-col-key='status'] { width: 10%; }
#news-table th:nth-child(2),
#news-table td[data-col-key='title'] { width: 39%; }
#news-table .th-author,
#news-table td[data-col-key='author'] { width: 16%; }
#news-table .th-date,
#news-table td[data-col-key='date'] { width: 14%; }
#news-table .th-metric,
#news-table td[data-col-key='views'],
#news-table td[data-col-key='comments'],
#news-table td[data-col-key='likes'] { width: 7%; }
#news-table td[data-col-key='title'] > a { color: #174f70; font-weight: 750; letter-spacing: -.01em; }
#news-table td[data-col-key='title'] > a:hover,
#news-table td[data-col-key='title'] > a:focus-visible { color: #087db8; text-decoration: underline; text-underline-offset: .18em; }
#news-table .notice-activity-status { inline-size: 4.2rem; block-size: 1.48rem; justify-content: center; padding: .1rem .2rem; font-size: .68rem; font-weight: 700; line-height: 1; }

@media (max-width: 991.98px) {
  #myinfo .myinfo-profile-workspace { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  #myinfo .myinfo-body { padding: 1rem !important; }
  #myinfo .myinfo-identity-banner { grid-template-columns: auto minmax(0, 1fr); }
  #myinfo .myinfo-identity-actions { grid-column: 1 / -1; justify-content: stretch; }
  #myinfo .myinfo-identity-actions .btn { flex: 1 1 0; }
  #myinfo .myinfo-tabs { display: flex; width: 100%; margin-block: 1rem; }
  #myinfo .myinfo-tab { flex: 1 1 0; padding-inline: .55rem; }
  #myinfo .my-activity-summary-grid { gap: .45rem; }
  #myinfo .my-volunteer-meta { grid-template-columns: 4.6rem minmax(0, 1fr); }
  #news-table .notice-activity-status { inline-size: 4rem; block-size: 1.42rem; }
}
/* FAQ·Q&A 목록은 공지와 같은 제목 우선순위를 사용한다. */
#faq-table td[data-col-key='question'] > a,
#qna-table td[data-col-key='question'] > a { color: #123b59; font-weight: 700; }
#faq-table td[data-col-key='question'] > a:hover,
#faq-table td[data-col-key='question'] > a:focus-visible,
#qna-table td[data-col-key='question'] > a:hover,
#qna-table td[data-col-key='question'] > a:focus-visible { color: #178ed0; }
@media (max-width: 767.98px) {
  #faq-table td[data-col-key='question'], #qna-table td[data-col-key='question'] { display: block; overflow: visible; }
  #faq-table td[data-col-key='question'] > a, #qna-table td[data-col-key='question'] > a { display: -webkit-box; min-width: 0; max-height: calc(1.52em * 2); overflow: hidden; overflow-wrap: anywhere; word-break: break-word; line-height: 1.52; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  #faq-table td[data-col-key='author'], #qna-table td[data-col-key='author'], #faq-table td[data-col-key='date'], #qna-table td[data-col-key='date'] { color: #607083; font-size: .8rem; }
  .gallery-card-media { aspect-ratio: 4 / 3; }
  .gallery-caption { padding: .78rem !important; }
  .gallery-caption h6 { font-size: .96rem; line-height: 1.38; }
  #myinfo .my-volunteer-item-header { align-items: center; }
  #myinfo .my-volunteer-meta { grid-template-columns: 4.25rem minmax(0, 1fr); font-size: .82rem; }
  #myinfo .my-volunteer-actions .btn { min-height: 36px; }
}

/* Mobile layout recovery: keep essential controls visible without horizontal scrolling. */
@media (max-width: 575.98px) {
  .toolbar-single-row.news-toolbar,
  .toolbar-single-row.gallery-toolbar {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }

  .toolbar-single-row.news-toolbar > .small,
  .toolbar-single-row.gallery-toolbar > .small {
    width: 100%;
  }

  .toolbar-single-row.news-toolbar .toolbar-actions-end,
  .toolbar-single-row.gallery-toolbar .toolbar-actions-end {
    display: grid !important;
    flex: 1 1 100% !important;
    width: 100%;
    min-width: 0;
    margin-left: 0;
    gap: 6px;
  }

  .toolbar-single-row.news-toolbar .toolbar-actions-end {
    grid-template-columns: 72px 56px minmax(0, 1fr) 42px 42px;
  }

  .toolbar-single-row.gallery-toolbar .toolbar-actions-end {
    grid-template-columns: minmax(0, 1fr) 66px 42px 42px;
  }

  .news-toolbar #news-status-filter { grid-column: 1; grid-row: 1; width: 72px; min-width: 0; }
  .news-toolbar #news-sort { grid-column: 2; grid-row: 1; width: 56px; min-width: 0; }
  .news-toolbar #news-search { grid-column: 3; grid-row: 1; width: 100%; min-width: 0; }
  .news-toolbar #news-search-btn { grid-column: 4; grid-row: 1; }
  .news-toolbar #news-write-btn { grid-column: 5; grid-row: 1; }

  .gallery-toolbar #gallery-tag-search { grid-column: 1; grid-row: 1; width: 100%; min-width: 0; }
  .gallery-toolbar #gallery-sort { grid-column: 2; grid-row: 1; width: 66px; min-width: 0; }
  .gallery-toolbar #gallery-mobile-view-toggle { grid-column: 3 / 5; grid-row: 1; justify-self: end; }
  .gallery-toolbar #gallery-search { grid-column: 1 / 3; grid-row: 2; width: 100%; min-width: 0; }
  .gallery-toolbar #gallery-search-btn { grid-column: 3; grid-row: 2; }
  .gallery-toolbar #gallery-write-btn { grid-column: 4; grid-row: 2; }

  .news-toolbar .toolbar-sort-compact,
  .gallery-toolbar .toolbar-sort-compact {
    max-width: none;
    height: 42px;
    padding-inline: 0.35rem 1.1rem;
    font-size: 0.73rem;
  }

  .news-toolbar .responsive-search-input,
  .gallery-toolbar .responsive-search-input {
    flex: none;
    height: 42px;
    min-height: 42px;
    padding-inline: 0.65rem;
    font-size: 0.78rem !important;
  }

  .news-toolbar #news-search-btn,
  .news-toolbar #news-write-btn,
  .gallery-toolbar #gallery-search-btn,
  .gallery-toolbar #gallery-write-btn {
    display: grid;
    place-items: center;
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    height: 42px;
    padding: 0;
    font-size: 0;
  }

  .news-toolbar #news-search-btn::before,
  .gallery-toolbar #gallery-search-btn::before {
    content: '\f002';
    font-family: 'Font Awesome 6 Free';
    font-size: 0.9rem;
    font-weight: 900;
  }

  .news-toolbar #news-write-btn::before,
  .gallery-toolbar #gallery-write-btn::before {
    content: '\f044';
    font-family: 'Font Awesome 6 Free';
    font-size: 0.9rem;
    font-weight: 900;
  }

  #gallery-mobile-view-toggle .btn {
    min-width: 38px;
    min-height: 42px;
    height: 42px;
    padding-inline: 0.55rem;
  }

  #calendar-grid .calendar-density-trigger {
    justify-self: end;
    align-self: end;
    min-width: 1.2rem;
    min-height: 1.2rem;
    width: 1.2rem;
    height: 1.2rem;
    padding: 0;
    font-size: 0.54rem;
    line-height: 1;
  }

  #mobileMenuDrawer .mobile-menu-scroll-area > .list-group-item {
    box-sizing: border-box;
    min-height: 52px;
    height: 52px;
    margin-bottom: 6px;
    padding: 0 14px;
  }

  #mobileMenuDrawer .mobile-menu-scroll-area > .collapse > .list-group-item {
    min-height: 44px;
    padding-block: 10px;
  }

  .login-page,
  .signup-page {
    min-height: 0;
    padding-top: 1.25rem !important;
    padding-bottom: 1.5rem !important;
  }

  #news-table tr {
    grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      'status title title title'
      'author author date date'
      'views comments likes likes';
    gap: 4px 8px;
  }

  #news-table tr > td {
    width: auto;
    min-width: 0;
    overflow: hidden;
  }

  #news-table td[data-col-key='status'] { grid-area: status; }
  #news-table td[data-col-key='title'] { grid-area: title; }
  #news-table td[data-col-key='author'] { grid-area: author; white-space: nowrap; text-overflow: ellipsis; }
  #news-table td[data-col-key='date'] { grid-area: date; white-space: nowrap; }
  #news-table td[data-col-key='views'] { grid-area: views; }
  #news-table td[data-col-key='comments'] { grid-area: comments; }
  #news-table td[data-col-key='likes'] { grid-area: likes; }

  #news-table td[data-col-key='author'],
  #news-table td[data-col-key='date'],
  #news-table td[data-col-key='views'],
  #news-table td[data-col-key='comments'],
  #news-table td[data-col-key='likes'] {
    font-size: 0.73rem;
    line-height: 1.35;
    color: #607083;
  }

  #news-table td[data-col-key='author']::before,
  #news-table td[data-col-key='date']::before,
  #news-table td[data-col-key='views']::before,
  #news-table td[data-col-key='comments']::before,
  #news-table td[data-col-key='likes']::before {
    display: none;
  }
}

@media (max-width: 359.98px) {
  .toolbar-single-row.news-toolbar > .small { display: none; }
  .toolbar-single-row.news-toolbar .toolbar-actions-end { grid-template-columns: 64px 52px minmax(0, 1fr) 40px 40px; gap: 4px; }
  .news-toolbar #news-status-filter { width: 64px; }
  .news-toolbar #news-sort { width: 52px; }
  .news-toolbar .toolbar-sort-compact { padding-inline: 0.25rem 0.95rem; font-size: 0.68rem; }
  .news-toolbar #news-search-btn,
  .news-toolbar #news-write-btn,
  .gallery-toolbar #gallery-search-btn,
  .gallery-toolbar #gallery-write-btn { width: 40px; min-width: 40px; min-height: 40px; height: 40px; }
}
/* Login and signup panels live after main; hide its empty header spacer on those routes. */
@media (max-width: 767.98px) {
  body:has(#login.panel-active) main,
  body:has(#signup.panel-active) main {
    display: none;
  }
}
/* Mobile news cards and drawer primary rows: preserve a readable scan order. */
@media (max-width: 575.98px) {
  #news-table tbody > tr {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    grid-template-areas:
      'status title title'
      'author author date'
      'views comments likes';
    align-items: center;
    gap: .5rem .65rem;
    padding: 1rem !important;
  }

  #news-table tbody > tr > td {
    display: block;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
  }

  #news-table td[data-col-key='status'] { grid-area: status; align-self: start; }
  #news-table td[data-col-key='title'] { grid-area: title; align-self: start; }
  #news-table td[data-col-key='author'] { grid-area: author; }
  #news-table td[data-col-key='date'] { grid-area: date; justify-self: end; }
  #news-table td[data-col-key='views'] { grid-area: views; }
  #news-table td[data-col-key='comments'] { grid-area: comments; }
  #news-table td[data-col-key='likes'] { grid-area: likes; justify-self: end; }

  #news-table td[data-col-key]::before {
    display: none !important;
  }

  #news-table td[data-col-key='views']::before,
  #news-table td[data-col-key='comments']::before,
  #news-table td[data-col-key='likes']::before {
    display: inline !important;
    margin-right: .2rem;
    color: #718096;
    font-weight: 600;
  }

  #news-table td[data-col-key='views']::before { content: '조회'; }
  #news-table td[data-col-key='comments']::before { content: '댓글'; }
  #news-table td[data-col-key='likes']::before { content: '추천'; }

  #news-table td[data-col-key='title'] > a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #news-table td[data-col-key='title'].is-expanded > a {
    display: inline;
    -webkit-line-clamp: unset;
  }
}

@media (max-width: 767.98px) {
  #mobileMenuDrawer .mobile-menu-scroll-area > .list-group-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box;
    width: 100%;
    min-height: 56px;
    height: 56px;
    margin: 0 0 10px;
    padding: 0 18px !important;
    line-height: 1;
  }

  #mobileMenuDrawer .mobile-menu-scroll-area > .list-group-item > span,
  #mobileMenuDrawer .mobile-menu-scroll-area > .list-group-item::after {
    display: inline-flex;
    align-items: center;
    align-self: center;
    line-height: 1;
  }
}

@media (max-width: 575.98px) {
  #news-table td[data-col-key] {
    width: auto !important;
    max-width: none !important;
  }
}

/* Mobile community controls: readable comments, filters, and compact footer. */
@media (max-width: 575.98px) {
  .comment-form .input-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .comment-form textarea.form-control {
    min-height: 100px;
    height: 100px;
    padding: 0.72rem 0.8rem;
    font-size: 16px;
    line-height: 1.5;
    resize: vertical;
  }

  .comment-form .input-group > button[type='submit'] {
    justify-self: end;
    min-width: 76px;
  }

  .toolbar-single-row.news-toolbar .toolbar-actions-end,
  .toolbar-single-row.gallery-toolbar .toolbar-actions-end {
    display: grid !important;
    width: 100%;
    min-width: 0;
    gap: 8px;
  }

  .toolbar-single-row.news-toolbar .toolbar-actions-end {
    grid-template-columns: minmax(112px, 1fr) minmax(86px, 0.8fr) 44px;
  }

  .news-toolbar #news-status-filter { grid-column: 1; grid-row: 1; width: 100%; }
  .news-toolbar #news-sort { grid-column: 2; grid-row: 1; width: 100%; }
  .news-toolbar #news-write-btn { grid-column: 3; grid-row: 1; }
  .news-toolbar #news-search { grid-column: 1 / 3; grid-row: 2; width: 100%; }
  .news-toolbar #news-search-btn { grid-column: 3; grid-row: 2; }

  .toolbar-single-row.gallery-toolbar .toolbar-actions-end {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .gallery-toolbar #gallery-tag-search { grid-column: 1 / 3; grid-row: 1; width: 100%; }
  .gallery-toolbar #gallery-sort { grid-column: 3 / 5; grid-row: 1; width: 100%; }
  .gallery-toolbar #gallery-search { grid-column: 1 / 3; grid-row: 2; width: 100%; }
  .gallery-toolbar #gallery-search-btn { grid-column: 3; grid-row: 2; }
  .gallery-toolbar #gallery-write-btn { grid-column: 4; grid-row: 2; }
  .gallery-toolbar #gallery-mobile-view-toggle { grid-column: 1 / 5; grid-row: 3; justify-self: start; }

  .news-toolbar .toolbar-sort-compact,
  .gallery-toolbar .toolbar-sort-compact {
    box-sizing: border-box;
    max-width: none;
    min-width: 0;
    height: 44px;
    padding: 0.5rem 2rem 0.5rem 0.68rem !important;
    background-position: right 0.68rem center;
    font-size: 0.82rem;
    line-height: 1.25;
    text-overflow: clip;
  }

  .news-toolbar #news-search-btn,
  .news-toolbar #news-write-btn,
  .gallery-toolbar #gallery-search-btn,
  .gallery-toolbar #gallery-write-btn {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    height: 44px;
  }

  #gallery-mobile-view-toggle .btn {
    min-width: 44px;
    min-height: 44px;
    height: 44px;
  }
}

@media (max-width: 767.98px) {
  footer.brand-bg {
    padding-top: 34px !important;
    padding-bottom: calc(20px + var(--mobile-overlay-offset)) !important;
  }

  footer.brand-bg .row.g-5 {
    --bs-gutter-y: 20px;
    margin-bottom: 22px !important;
  }

  footer.brand-bg .row.g-5 h5,
  footer.brand-bg .row.g-5 h6 {
    margin-bottom: 0.6rem !important;
  }

  footer.brand-bg .row.g-5 p {
    margin-bottom: 0.38rem;
    line-height: 1.55;
  }

  footer.brand-bg .social-icon-btn {
    width: 48px;
    height: 48px;
  }

  footer.brand-bg hr {
    margin: 20px 0 14px;
  }

  footer.brand-bg .text-center.small {
    font-size: 0.78rem;
    line-height: 1.55;
  }
}

@media (max-width: 359.98px) {
  .toolbar-single-row.news-toolbar .toolbar-actions-end {
    grid-template-columns: minmax(106px, 1fr) minmax(82px, 0.8fr) 44px;
    gap: 6px;
  }

  .news-toolbar .toolbar-sort-compact,
  .gallery-toolbar .toolbar-sort-compact {
    padding-right: 1.8rem !important;
    padding-left: 0.55rem !important;
    font-size: 0.76rem;
  }
}

@media (max-width: 767.98px) {
  #news-comments-section .comment-form > .input-group,
  #gallery-comments-section .comment-form > .input-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  #news-comments-section .comment-form > .input-group > .form-control,
  #gallery-comments-section .comment-form > .input-group > .form-control {
    width: 100%;
    min-width: 0;
    min-height: 96px;
    padding: 0.72rem 0.8rem;
    font-size: 16px;
    line-height: 1.5;
    resize: vertical;
  }

  #news-comments-section .comment-form > .input-group > button[type='submit'],
  #gallery-comments-section .comment-form > .input-group > button[type='submit'] {
    justify-self: end;
    min-width: 76px;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .toolbar-single-row.news-toolbar .toolbar-actions-end,
  .toolbar-single-row.gallery-toolbar .toolbar-actions-end {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .news-toolbar .toolbar-sort-compact,
  .gallery-toolbar .toolbar-sort-compact {
    min-width: 124px;
    min-height: 48px;
    padding-right: 2rem !important;
    background-position: right 0.68rem center;
  }
}

@media (max-width: 767.98px) {
  footer.brand-bg .row.g-5 {
    --bs-gutter-y: 0 !important;
    row-gap: 20px;
  }

  footer.brand-bg .row.g-5 > [class*='col-'] {
    margin-top: 0 !important;
  }
}

@media (max-width: 767.98px) {
  #news-comments-section .comment-form > .input-group > input.form-control,
  #gallery-comments-section .comment-form > .input-group > input.form-control {
    min-height: 64px;
    height: 64px;
    resize: none;
  }
}

/* Mobile news: title first, compact metadata badges second. Keep the table DOM for desktop. */
@media (max-width: 575.98px) {
  #news-table thead { display: none; }

  #news-table tbody > tr:not(.news-empty-row) {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) max-content max-content max-content max-content;
    grid-template-areas:
      'title title title title title title'
      'status author date views comments likes';
    align-items: center;
    gap: 0.45rem 0.3rem;
    width: 100%;
    min-width: 0;
    padding: 0.78rem 0.82rem !important;
    overflow: hidden;
  }

  #news-table tbody > tr:not(.news-empty-row) > td {
    display: block;
    min-width: 0;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  #news-table td[data-col-key='title'] { grid-area: title; }
  #news-table td[data-col-key='status'] { grid-area: status; }
  #news-table td[data-col-key='author'] { grid-area: author; }
  #news-table td[data-col-key='date'] { grid-area: date; }
  #news-table td[data-col-key='views'] { grid-area: views; }
  #news-table td[data-col-key='comments'] { grid-area: comments; }
  #news-table td[data-col-key='likes'] { grid-area: likes; }

  #news-table td[data-col-key='title'] > a {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-line-clamp: unset;
  }

  #news-table td[data-col-key='title'] .notice-list-state,
  #news-table td[data-col-key='title'] .news-title-badge,
  #news-table td[data-col-key='title'] .deadline-badge {
    display: none !important;
  }

  #news-table td[data-col-key='status'],
  #news-table td[data-col-key='author'],
  #news-table td[data-col-key='date'],
  #news-table td[data-col-key='views'],
  #news-table td[data-col-key='comments'],
  #news-table td[data-col-key='likes'] {
    min-width: 0;
    overflow: hidden;
    color: #53667b;
    font-size: 0.61rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  #news-table td[data-col-key='author'] {
    padding: 0.18rem 0.36rem !important;
    border: 1px solid #dbeaf5 !important;
    border-radius: 999px;
    background: #f7fbff;
  }

  #news-table td[data-col-key='date'],
  #news-table td[data-col-key='views'],
  #news-table td[data-col-key='comments'],
  #news-table td[data-col-key='likes'] {
    padding: 0.18rem 0.28rem !important;
    border-radius: 999px;
    background: #f1f6fa;
  }

  #news-table td[data-col-key='status'] .notice-activity-status {
    display: inline-flex;
    max-width: 3.7rem;
    min-height: 1.35rem;
    padding: 0.14rem 0.32rem;
    overflow: hidden;
    font-size: 0.6rem;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top;
  }

  #news-table td[data-col-key='status'] .notice-activity-status i {
    margin-right: 0.18rem;
    font-size: 0.55rem;
  }

  #news-table td[data-col-key]::before { display: none !important; }

  /* d-none is the login guard for the guest-only mobile menu item. */
  #mobileMenuDrawer .mobile-menu-scroll-area > .list-group-item.d-none {
    display: none !important;
  }
}

/* Shared KindMoa-style composer media blocks: each asset is an independent block, never nested inside a text paragraph. */
.rich-editor .editor-inline-media {
  position: relative;
  display: table;
  width: fit-content;
  max-width: 100%;
  margin: .85rem 0;
  padding: 0;
  line-height: 0;
  border: 0;
  background: transparent;
  border-radius: .75rem;
}
.rich-editor .editor-inline-media > img,
.rich-editor .editor-inline-media > video {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0;
  border-radius: .75rem;
  background: transparent;
}
.rich-editor .editor-inline-video > video {
  width: min(100%, 44rem);
  background: #122536;
}
.rich-editor .editor-inline-media.is-dragging { opacity: .6; cursor: grabbing; }
.rich-editor .editor-media-spacer { min-height: 1.45rem; margin: 0 0 .7rem; }
.rich-editor .editor-inline-media .editor-inline-media-action { position: absolute; z-index: 2; line-height: 1; }
.rich-editor .editor-inline-media .editor-image-pin-btn { top: .5rem; right: .5rem; }
.rich-editor .editor-inline-media .editor-image-delete-btn { top: .5rem; left: .5rem; }
.rich-editor .editor-inline-media.is-pinned { outline: 2px solid rgba(49, 183, 255, .52); outline-offset: 3px; }
.rich-editor .editor-inline-media.is-pinned::after {
  content: '대표';
  position: absolute;
  right: .55rem;
  bottom: .55rem;
  min-height: 1.4rem;
  padding: 0 .5rem;
  border-radius: 999px;
  background: rgba(49, 183, 255, .96);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.4rem;
}
#news-detail-content figure.editor-inline-media,
#gallery-detail-content figure.editor-inline-media {
  display: table;
  width: fit-content;
  max-width: 100%;
  margin: 1rem 0;
}
#news-detail-content figure.editor-inline-media > img,
#gallery-detail-content figure.editor-inline-media > img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0;
  border-radius: .75rem;
}
#news-detail-content figure.editor-inline-media > video,
#gallery-detail-content figure.editor-inline-media > video {
  display: block;
  width: min(100%, 44rem);
  max-width: 100%;
  height: auto;
  border-radius: .75rem;
  background: #122536;
}
@media (max-width: 575.98px) {
  .rich-editor .editor-inline-media { max-width: 100%; margin: .7rem 0; }
  .rich-editor .editor-inline-media .editor-image-pin-btn,
  .rich-editor .editor-inline-media .editor-image-delete-btn { transform: scale(.92); transform-origin: top; }
  .rich-editor .editor-media-spacer { min-height: 1.2rem; }
}

/* A two-column photo row is opt-in: it is created only by dropping one image on the right half of another image. */
.rich-editor .editor-inline-media.editor-inline-media-pair[data-media-layout="pair"],
#news-detail-content figure.editor-inline-media.editor-inline-media-pair[data-media-layout="pair"],
#gallery-detail-content figure.editor-inline-media.editor-inline-media-pair[data-media-layout="pair"] {
  display: inline-block;
  width: calc((100% - .7rem) / 2);
  max-width: calc((100% - .7rem) / 2);
  margin: .85rem 0;
  vertical-align: top;
}
.rich-editor .editor-inline-media.editor-inline-media-pair[data-media-layout="pair"] + .editor-inline-media.editor-inline-media-pair[data-media-layout="pair"],
#news-detail-content figure.editor-inline-media.editor-inline-media-pair[data-media-layout="pair"] + figure.editor-inline-media.editor-inline-media-pair[data-media-layout="pair"],
#gallery-detail-content figure.editor-inline-media.editor-inline-media-pair[data-media-layout="pair"] + figure.editor-inline-media.editor-inline-media-pair[data-media-layout="pair"] {
  margin-left: .7rem;
}
.rich-editor .editor-inline-media.editor-inline-media-pair[data-media-layout="pair"] > img,
#news-detail-content figure.editor-inline-media.editor-inline-media-pair[data-media-layout="pair"] > img,
#gallery-detail-content figure.editor-inline-media.editor-inline-media-pair[data-media-layout="pair"] > img {
  width: 100%;
  max-width: 100%;
}
.detail-view-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: .18rem .55rem;
  border: 1px solid #b9e6ff;
  border-radius: 999px;
  background: #f2fbff;
  color: #176287;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.2;
}
@media (max-width: 575.98px) {
  .rich-editor .editor-inline-media.editor-inline-media-pair[data-media-layout="pair"],
  #news-detail-content figure.editor-inline-media.editor-inline-media-pair[data-media-layout="pair"],
  #gallery-detail-content figure.editor-inline-media.editor-inline-media-pair[data-media-layout="pair"] {
    width: calc((100% - .5rem) / 2);
    max-width: calc((100% - .5rem) / 2);
    margin: .7rem 0;
  }
  .rich-editor .editor-inline-media.editor-inline-media-pair[data-media-layout="pair"] + .editor-inline-media.editor-inline-media-pair[data-media-layout="pair"],
  #news-detail-content figure.editor-inline-media.editor-inline-media-pair[data-media-layout="pair"] + figure.editor-inline-media.editor-inline-media-pair[data-media-layout="pair"],
  #gallery-detail-content figure.editor-inline-media.editor-inline-media-pair[data-media-layout="pair"] + figure.editor-inline-media.editor-inline-media-pair[data-media-layout="pair"] {
    margin-left: .5rem;
  }
}
/* Comment updates keep context stable while editing or retaining reply threads. */
.comment-item-deleted {
  background: #f8fafc;
  border-radius: 8px;
  padding-inline: 0.7rem;
}

.comment-item-deleted .comment-text {
  color: #6b7280;
  font-style: italic;
}

.comment-inline-edit-form textarea.form-control {
  min-height: 88px;
  resize: vertical;
}

.comment-inline-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}