/* =========================
   공통 기본 설정
   ========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body.app-body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: #e5e7eb;
}

/* =========================
   모바일 프레임
   ========================= */
.mobile-frame {
  position: relative;
  max-width: 420px;
  margin: 0 auto;
  min-height: 100vh;
  background: linear-gradient(180deg, #f9fafb 0%, #eef2ff 40%, #f9fafb 100%);
  padding: 12px 12px 24px;
}

/* =========================
   상단 바 공통
   ========================= */
.top-bar {
  position: sticky;
  top: 8px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.15);
  margin-bottom: 12px;
}

.top-bar.login-top {
  justify-content: flex-start;
  gap: 10px;
}

.top-logo {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.top-title {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  display: flex;
  flex-direction: column;
}

.top-title.center {
  align-items: center;
  width: 100%;
}

.top-subtitle {
  font-size: 11px;
  font-weight: 400;
  color: #6b7280;
}

/* 로그인 배지 공통 */
.login-badge {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #111827 !important;
  color: #f9fafb !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
}

.badge-emp {
  opacity: 0.85;
  margin-left: 2px;
  color: #e5e7eb !important;
}

/* =========================
   조합원 라운지 상단 헤더
   ========================= */
.top-bar-lounge {
  margin-bottom: 12px;
  border-radius: 18px;
  padding: 10px 14px;
  background: radial-gradient(circle at 10% 0%, #eef2ff 0, #f9fafb 55%, #eff6ff 100%);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* 좌측 메뉴 버튼 (라운지) */
.top-bar-lounge .top-menu-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* 가운데 브랜드 */
.top-bar-lounge .top-brand {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.top-logo-circle {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  padding: 2px;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.top-logo-img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}

.top-title-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.top-title-main {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-bar-lounge .top-subtitle {
  margin-top: 2px;
  font-size: 11px;
  color: #6b7280;
}

/* 라운지용 로그인 배지 */
.login-badge-pill {
  margin-left: 4px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.08);
  color: #4f46e5;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.login-badge-pill .login-name {
  font-weight: 600;
}

.login-badge-pill .badge-emp {
  font-size: 10px;
  color: #818cf8;
}

/* =========================
   버튼 공통
   ========================= */
.icon-btn {
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}

.primary-btn {
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.35);
}

.primary-btn.full {
  width: 100%;
}

.secondary-btn {
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #fff;
  font-size: 12px;
  padding: 7px 14px;
  cursor: pointer;
}

.mini-btn {
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
}

/* 햄버거 메뉴 버튼 */
#drawerToggle {
  width: 45px;
  height: 45px;
  border-radius: 999px;
  background: #020617;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

/* =========================
   카드 공통
   ========================= */
.section-card {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 18px;
  padding: 14px 16px 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
  margin-bottom: 14px;
}

/* =========================
   로그인 화면
   ========================= */
.login-main {
  margin-top: 8px;
}

.login-card {
  padding-top: 16px;
}

.login-title {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}

.login-desc {
  margin: 0 0 12px;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}

.field-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  color: #4b5563;
}

.input-text {
  width: 100%;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  padding: 8px 12px;
  font-size: 12px;
}

.input-text.large {
  padding: 10px 14px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.login-note {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 10px;
  color: #6b7280;
}

.login-footer {
  margin-top: 14px;
  font-size: 10px;
  color: #9ca3af;
  text-align: center;
}

/* =========================
   알림
   ========================= */
.alert {
  margin-bottom: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 11px;
}

.alert.error {
  background: #fee2e2;
  color: #b91c1c;
}

/* =========================
   드로어 메뉴
   ========================= */
/* === 드로어(사이드 메뉴) ================================== */
.drawer {
  position: fixed;
  top: 88px;          /* 헤더 바로 아래에서 시작 */
  bottom: 0;
  left: 0;

  width: 260px;
  max-width: 80%;
  color: #f9fafb;

  /* 더 세련된 배경 + 블러 */
  background: linear-gradient(135deg, #020617 0%, #0f172a 50%, #111827 100%);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.9);
  border-radius: 0 18px 18px 0;
  backdrop-filter: blur(14px);

  transform: translateX(-100%);
  transition: transform .22s ease-out;
  z-index: 30;
  padding: 14px 14px 16px;
}

.drawer.show {
  transform: translateX(0);
}


.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.drawer-title {
  font-size: 14px;
  font-weight: 600;
}

.drawer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* 프로필 블록 */
.drawer-profile {
  display: flex;
  align-items: center;
  gap: 10px;
}

.drawer-avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: #020617;
  flex-shrink: 0;
}

.drawer-avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.drawer-profile-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.drawer-profile-name {
  font-size: 14px;
  font-weight: 600;
  color: #f9fafb;
}

.drawer-profile-sub {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 닫기 버튼 – 둥근 다크 버튼 */
.drawer-close-btn {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 14px;
  background: rgba(15, 23, 42, 0.75);
  color: #e5e7eb;
}

/* 섹션 라벨 (빠른 이동 / 계정 등) */
.drawer-section-label {
  margin: 10px 2px 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
}

/* 메뉴 리스트 공통 */
.drawer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drawer-list li + li {
  margin-top: 2px;
}

/* 메뉴 아이템 – 아이콘 + 텍스트 2줄 */
.drawer-list li a {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 9px 8px;
  border-radius: 10px;

  background: transparent;
  color: #e5e7eb;
  font-size: 13px;
  text-decoration: none;

  transition:
    background 0.18s ease,
    transform 0.12s ease,
    box-shadow 0.12s ease,
    color 0.18s ease;
}

.drawer-list li a:hover {
  background: rgba(55, 65, 81, 0.85);
  box-shadow: 0 8px 14px rgba(15, 23, 42, 0.5);
  transform: translateX(2px);
  color: #e5e7eb;
}

.drawer-item-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.drawer-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.drawer-item-main {
  font-size: 13px;
  font-weight: 500;
  color: #f9fafb;
}

.drawer-item-sub {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.drawer-list li a {
  display: block;
  padding: 8px 4px;
  font-size: 13px;
  color: #e5e7eb;
  text-decoration: none;
}

.drawer-list li a:hover {
  color: #a5b4fc;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 20;
}

.drawer-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

/* =========================
   대시보드 공통
   ========================= */
.dash-main {
  margin-top: 6px;
}

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 8px;
}

.section-eyebrow {
  margin: 0 0 2px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
}

.section-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.02em;
}

.section-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.chip-btn {
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 11px;
  padding: 4px 9px;
  text-decoration: none;
}

.link-more {
  font-size: 11px;
  color: #6b7280;
  text-decoration: none;
}

/* =========================
   대시보드 – 뉴스 섹션
   ========================= */
.news-section {
  background: radial-gradient(circle at top left, #eef2ff 0, #ffffff 55%);
}

.news-table {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  background: #fff;
}

/* 기본(대시보드) 3컬럼: 번호 / 제목 / 등록일 */
.news-table .news-header-row,
.news-table .news-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 72px;
  font-size: 11px;
  padding: 6px 8px;
  align-items: center;
}

.news-table .news-header-row {
  background: #f9fafb;
  font-weight: 700;
}

.news-table .news-row {
  font-weight: 500;
}

.news-table .news-row:nth-child(odd) {
  background: #fefefe;
}

.news-table .news-row:nth-child(even) {
  background: #f9fafb;
}

.news-table .news-row .col-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-empty {
  padding: 8px;
  font-size: 11px;
  color: #9ca3af;
}

/* 헤더 정렬 */
.news-table .news-header-row span {
  text-align: center;
  font-weight: 600;
}

/* 번호 컬럼 가운데 정렬 */
.news-table .col-no {
  text-align: center;
}

/* =========================
   뉴스 제목 링크 공통
   ========================= */
.news-link-title {
  color: #111827;
  text-decoration: none;
}

.news-link-title:hover {
  text-decoration: underline;
}

/* =========================
   뉴스 목록 화면 (전체 보기)
   ========================= */

/* 페이지 전용 배경 */
body.app-body.news-list-page .mobile-frame {
  background: linear-gradient(180deg, #f9fafb 0%, #e5edff 40%, #ffffff 100%);
}

/* 상단 바 – 뉴스 목록 전용 */
.top-bar-news {
  position: sticky;
  top: 8px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 18px;
  background: #111827;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.6);
  margin-bottom: 16px;
}

/* 뒤로가기 – 완전한 흰색 동그라미 */
.top-bar-news .back-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #111827;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.4);
}

/* 헤더 텍스트 – 밝은 테마에 맞게 */
.top-bar-news .top-title.center {
  align-items: flex-start;
  text-align: left;
}

.top-bar-news .top-title-main {
  font-size: 14px;
  font-weight: 700;
  color: #f9fafb;
}

.top-bar-news .top-subtitle {
  margin-top: 2px;
  font-size: 11px;
  color: #e5e7eb;
}

/* 뉴스 목록 헤더에서 로그인 배지 */
.top-bar-news .login-badge-pill {
  background: rgba(15, 23, 42, 0.9);
  color: #f9fafb;
}

/* 리스트 컨테이너 */
.news-list-main {
  margin-top: 8px;
}

.news-list-shell {
  border-radius: 20px;
  padding: 14px 14px 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
}

/* 소식 등록 버튼 – 새 스타일 */
.news-list-shell .chip-btn {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.35);
}

/* 목록 테이블 껍데기 */
.news-list-table {
  margin-top: 8px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  box-shadow: none;
  max-height: 60vh;
}

/* 헤더 – 그라데이션 바 */
.news-list-table .news-header-row {
  background: linear-gradient(90deg, #4f46e5, #6366f1);
  color: #ffffff;
  font-weight: 700;
}

.news-list-table .news-header-row span {
  color: #ffffff;
}

/* 4컬럼: 번호 / 제목(최대 폭) / 등록일 / 삭제 */
.news-list-table .news-header-row,
.news-list-table .news-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 72px 52px;
  font-size: 12px;
  padding: 6px 8px;
  align-items: center;
}

/* 행 스타일 */
.news-list-table .news-row {
  background: #ffffff;
  border-bottom: 1px solid #f3f4f6;
}

.news-list-table .news-row:nth-child(even) {
  background: #f9fafb;
}

.news-list-table .news-row:hover {
  background: #eef2ff;
}

/* 정렬 */
.news-list-table .col-no,
.news-list-table .col-date,
.news-list-table .col-delete {
  text-align: center;
  white-space: nowrap;
}

.news-list-table .col-title {
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 삭제 버튼 */
.news-list-table .news-delete-btn {
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  border: none;
  background: #fee2e2;
  color: #b91c1c;
  box-shadow: 0 2px 6px rgba(248, 113, 113, 0.45);
  cursor: pointer;
}

.news-list-table .news-delete-btn:hover {
  background: #fecaca;
}

/* 빈 상태 */
.news-list-empty {
  padding: 14px 10px 16px;
  font-size: 12px;
  color: #6b7280;
  text-align: center;
  background: #ffffff;
}

/* =========================
   달력 섹션
   ========================= */
.calendar-section {
  background: radial-gradient(circle at top right, #e0f2fe 0, #ffffff 60%);
}

.calendar-header {
  align-items: center;
}

/* 월 이동 네비게이션 */
.calendar-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #eef2ff 0%, #e0f2fe 40%, #ffffff 100%);
  border: 1px solid #c7d2fe;
  box-shadow: 0 6px 14px rgba(129, 140, 248, 0.35);
}

.calendar-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #111827;
}

/* 달력 그리드 */
.calendar-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  font-size: 10px;
  padding: 6px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 0 0 1px #e5e7eb;
}

/* 요일 헤더 */
.calendar-grid .weekday-header {
  text-align: center;
  padding: 4px 0 6px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
  color: #4b5563;
}

.calendar-grid .weekday-header:nth-child(1) {
  color: #ef4444;
}

.calendar-grid .weekday-header:nth-child(7) {
  color: #2563eb;
}

/* 날짜 셀 */
.calendar-day {
  background: linear-gradient(180deg, #f9fafb 0%, #ffffff 65%);
  border-radius: 14px;
  padding: 3px 4px 5px;      /* 🔹 패딩 살짝 줄여서 내용 공간 확보 */
  min-height: 92px;          /* 🔹 세로 조금 넉넉하게 */
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  transition:
    transform 0.12s ease-out,
    box-shadow 0.12s ease-out,
    background 0.12s ease-out;
}


.calendar-day:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
  border-color: #c7d2fe;
  background: linear-gradient(180deg, #eef2ff 0%, #ffffff 70%);
}

.calendar-day.other-month {
  background: #f3f4f6;
  border-style: dashed;
}

.calendar-day.other-month .calendar-day-number {
  color: #d1d5db;
}

/* 오늘 날짜 */
.calendar-day.today {
  border-color: #4f46e5;
  box-shadow:
    0 0 0 1px rgba(79, 70, 229, 0.2),
    0 6px 14px rgba(79, 70, 229, 0.18);
}

/* 날짜 상단 영역: 날짜 숫자 + 공휴일/기념일 이름을 세로로 쌓기 */
.calendar-day-header {
  display: flex;
  flex-direction: column;    /* 세로 방향 */
  align-items: flex-start;   /* 왼쪽 정렬 */
  justify-content: flex-start;
  margin-bottom: 2px;
}


/* 날짜 배지 */
.calendar-day-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}

.calendar-day-weekend .calendar-day-number {
  color: #2563eb;
}

.calendar-day-sun .calendar-day-number {
  color: #ef4444;
}

.calendar-day-holiday .calendar-day-number {
  color: #f97316;
}

.calendar-day.today .calendar-day-number {
  background: #4f46e5;
  color: #ffffff;
}

/* 국경일·공휴일·창립기념일 등: 날짜 숫자 바로 아래에, 항상 글자 전부 보이게 */
.calendar-day-holiday-label {
  margin-top: 1px;
  margin-left: 0;
  font-size: 9px;
  color: #ea580c;
  width: 100%;          /* 셀 너비 전체 사용 */
  white-space: normal;  /* 줄바꿈 허용 */
  overflow: visible;    /* 숨기지 않음 */
  text-overflow: clip;  /* ... 처리 안 함 */
  text-align: left;     /* 왼쪽 정렬 */
  line-height: 1.3;
}


/* 급여일 배지 */
.calendar-day-payday::after {
  content: "급여일";
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 999px;
  background: #dcfce7;
  color: #16a34a;
  box-shadow: 0 1px 3px rgba(22, 163, 74, 0.35);
}

/* 날짜 셀 안 일정 미리보기 영역 */
.event-summary-list {
  margin-top: 2px;
  max-height: 52px;      /* 세로 공간 제한 (필요 시 조절) */
  overflow: hidden;      /* 넘치는 부분은 잘라내기 */
}

/* 한 날짜의 일정들을 "/ "로 이어 붙여 여러 줄로 표시 */
.event-pill {
  padding: 0;
  border-radius: 0;
  font-size: 9px;
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
  white-space: normal;    /* 여러 줄 허용 */
  word-break: break-all;
  text-overflow: ellipsis;
  background: transparent; /* 회색 원 제거 */
  color: #111827;
}


/* 달력 셀 안에서만 사용하는 일정 요약 텍스트 */
.event-pill-summary {
  background: transparent;   /* 회색 배경 제거 */
  padding: 0;                /* 안쪽 여백 제거 */
  border-radius: 0;          /* 동그라미 제거 */
  white-space: normal;       /* 줄바꿈 허용 */
  text-overflow: clip;       /* 말줄임 표시 제거 */
}


.event-pill.meeting {
  background: #e0f2fe;
  color: #0369a1;
}

.event-pill.work {
  background: #fee2e2;
  color: #b91c1c;
}

.event-pill.meal {
  background: #dcfce7;
  color: #166534;
}

.event-pill.memo {
  background: #fef9c3;
  color: #92400e;
}

.event-more {
  font-size: 9px;
  color: #6b7280;
}

/* =========================
   바텀시트 모달 (공통)
   ========================= */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease-out;
  z-index: 40;
}

.modal-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

.modal-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: 100%;
  max-width: 420px;
  background: #f9fafb;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 25px rgba(15, 23, 42, 0.35);
  padding: 10px 14px 14px;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.23s ease-out, opacity 0.23s ease-out;
}

.modal-sheet.visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.modal-title {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.modal-body {
  max-height: 55vh;
  overflow-y: auto;
  padding-top: 4px;
}

.modal-subtitle {
  font-size: 13px;
  font-weight: 600;
  margin: 6px 0 4px;
}

.modal-footer {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.modal-footer.single {
  justify-content: center;
}

/* 보기 전용 모달 */
.modal-sheet.view-only .modal-body {
  max-height: 40vh;
}

/* 보기 모달 – 일정 리스트 */
.view-event-list {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  font-size: 14px;
}

.view-event-item {
  padding: 6px 10px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  border-bottom: 1px dashed #e5e7eb;
}

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

.view-event-tag {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #374151;
  flex-shrink: 0;
}

.view-event-tag.meeting {
  background: #dbeafe;
  color: #1d4ed8;
}

.view-event-tag.work {
  background: #fee2e2;
  color: #b91c1c;
}

.view-event-tag.meal {
  background: #dcfce7;
  color: #166534;
}

.view-event-tag.memo {
  background: #fef9c3;
  color: #92400e;
}

.view-event-body {
  flex: 1;
  font-size: 14px;
  color: #111827;
}

.view-event-empty {
  padding: 8px 10px;
  font-size: 14px;
  color: #6b7280;
}

/* 편집 모달 – 섹션 카드 */
.event-existing {
  margin-bottom: 8px;
}

.existing-event-list {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 6px 10px;
  background: #ffffff;
  font-size: 12px;
}

.existing-item {
  font-size: 12px;
  padding: 3px 0;
  border-bottom: 1px dashed #e5e7eb;
}

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

.event-editor {
  margin-top: 10px;
}

.event-section {
  margin-bottom: 10px;
  padding: 8px 10px 9px;
  border-radius: 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

.event-section:nth-of-type(1) {
  background: #eff6ff;
  border-color: #dbeafe;
}

.event-section:nth-of-type(2) {
  background: #fefce8;
  border-color: #facc15;
}

.event-section:nth-of-type(3) {
  background: #ecfdf3;
  border-color: #86efac;
}

.event-section:nth-of-type(4) {
  background: #f9fafb;
  border-color: #e5e7eb;
}

.event-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.event-section-title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.event-row-list {
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.event-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 0.9fr 24px;
  gap: 4px;
  align-items: center;
}

.event-row.meal-row {
  grid-template-columns: 0.9fr 0.9fr minmax(0, 1.6fr) 24px;
}

.time-select-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

.time-select-group select {
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #ffffff;
}

.time-separator {
  font-size: 12px;
  color: #6b7280;
}

.row-delete-btn {
  /* 🔽 왼쪽으로 조금 당기고, 버튼 폭을 살짝 줄여서 영역 안으로 넣기 */
  margin-left: 2px;      /* 기존 6px → 2px */
  margin-right: 8px;     /* 오른쪽에 여유를 줘서 잘리지 않게 */

  padding: 2px 4px;      /* 기존 4px 8px → 조금 줄임 */
  min-width: 32px;       /* 기존 40px → 줄여서 가로 스크롤 방지 */

  border-radius: 999px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.row-delete-btn:hover {
  background: #fee2e2;
}



.input-select {
  width: 100%;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #ffffff;
}

.textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  padding: 8px 10px;
  font-size: 13px;
  resize: vertical;
}

.range-date-header {
  font-size: 15px;
  font-weight: 700;
  margin-top: 18px;
  margin-bottom: 8px;
}

/* =========================
   소식 등록 화면
   ========================= */
.news-editor-main {
  margin-top: 8px;
}

.news-editor-card {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 18px;
  padding: 14px 16px 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
}

.news-field {
  margin-top: 8px;
}

.news-label {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #4b5563;
}

.news-input {
  width: 100%;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  padding: 8px 12px;
  font-size: 12px;
}

.news-editor-footer {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

/* =========================
   소식 상세 화면
   ========================= */
.news-detail-main {
  margin-top: 10px;
  padding-bottom: 24px;
}

.news-detail-card {
  padding: 18px 18px 20px;
}

.news-detail-header {
  margin-bottom: 12px;
}

.news-detail-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #eef2ff;
  color: #4f46e5;
  margin-bottom: 8px;
}

.news-detail-title {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.45;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.news-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 11px;
  color: #6b7280;
}

.news-detail-dot {
  margin: 0 4px;
}

.news-detail-date {
  font-variant-numeric: tabular-nums;
}

.news-detail-content {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.7;
  color: #111827;
}

.news-detail-content p {
  margin: 0 0 10px;
}

.news-detail-content p:last-child {
  margin-bottom: 0;
}

.news-detail-content strong {
  font-weight: 700;
}

.news-detail-content em {
  font-style: italic;
}

.news-detail-content ul,
.news-detail-content ol {
  padding-left: 18px;
  margin: 0 0 10px;
}

.news-detail-content li {
  margin-bottom: 4px;
}

.news-detail-content blockquote {
  margin: 8px 0 10px;
  padding: 8px 10px;
  border-left: 3px solid #e5e7eb;
  background: #f9fafb;
  font-size: 13px;
  color: #4b5563;
}

.news-detail-footer {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

.news-detail-list-btn {
  padding-left: 20px;
  padding-right: 20px;
  font-size: 13px;
}

/* =========================
   기타 링크/행 전체 클릭용
   ========================= */
.news-row-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.news-row-link:hover .news-row {
  background: #f3f4ff;
}

/* ============================================
   1) 뉴스 테이블 헤더(순번 / 제목 / 등록일) 디자인 개선
   ============================================ */
.news-table {
  border-radius: 18px;
  padding: 4px 6px 10px;
  background: radial-gradient(circle at 0% 0%, rgba(129, 140, 248, 0.12), transparent 55%),
              radial-gradient(circle at 100% 0%, rgba(56, 189, 248, 0.14), transparent 55%),
              rgba(248, 250, 252, 0.96);
}

/* 헤더 라인 자체를 캡슐 형태로 */
.news-header-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 72px;
  align-items: center;

  padding: 6px 12px;
  margin-bottom: 4px;

  border-radius: 999px;
  background: linear-gradient(90deg,
              rgba(255, 255, 255, 0.85) 0%,
              rgba(239, 246, 255, 0.98) 50%,
              rgba(239, 246, 255, 1) 100%);
  box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.9),
              0 8px 18px rgba(15, 23, 42, 0.06);

  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #4b5563;
}

/* 헤더 안 텍스트 정렬 */
.news-header-row .col-no,
.news-header-row .col-title,
.news-header-row .col-date {
  text-align: center;
}

/* 데이터 행은 기존 느낌 유지: 제목은 왼쪽 정렬 */
.news-row .col-no,
.news-row .col-date {
  text-align: center;
}

.news-row .col-title {
  text-align: left;
  font-weight: 500;
}

/* ============================================
   2) 달력 요일 헤더(일 월 화 수 목 금 토) 디자인 개선
   ============================================ */
.calendar-grid {
  padding-top: 4px;
}

/* 요일 헤더를 다른 부분과 어울리는 캡슐 스타일로 */
.weekday-header {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 26px;
  margin-bottom: 4px;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;

  border-radius: 999px;
  background: linear-gradient(180deg,
              rgba(255, 255, 255, 0.96) 0%,
              rgba(241, 245, 249, 1) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(226, 232, 240, 0.9),
    0 6px 14px rgba(148, 163, 184, 0.35);

  color: #6b7280;
}

/* 요일별 색상은 기존 컨셉 유지 (일: 빨강, 토: 파랑) */
.calendar-grid .weekday-header:nth-child(1) {
  color: #ef4444;
}

.calendar-grid .weekday-header:nth-child(7) {
  color: #2563eb;
}

/* =========================
   상품 상세 화면 - 상세 설명 카드 전용 (초근접 버전)
   ========================= */
.section-card.market-detail-desc-card {
  padding: 0;                /* 카드 안쪽 여백 완전 제거 */
  background: #050505;
  border-radius: 18px;
}

.section-card.market-detail-desc-card .desc-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

/* 제목/내용 셀 공통: 진짜로 0,0에서 시작 */
.section-card.market-detail-desc-card .desc-th,
.section-card.market-detail-desc-card .desc-td {
  padding: 0;
  margin: 0;
  border: none;
  text-align: left;
  vertical-align: top;
}

/* "상세 설명" 제목도 카드 테두리에 거의 붙게 */
.section-card.market-detail-desc-card .desc-th {
  font-size: 15px;
  font-weight: 600;
  color: #9ca3af;
  padding-top: 2px;   /* 위로 조금만 띄우고 */
}

/* 실제 내용: 카드 왼쪽 상단에 바짝 붙음 */
.section-card.market-detail-desc-card .desc-td {
  font-size: 15px;
  color: #e5e7eb;
  white-space: pre-line;
  line-height: 1.4;
  padding-top: 2px;   /* 너무 딱 붙으면 답답하면 2px 정도만 */
}

/* ===== 조합원마켓 하단 네비게이션 공통 스타일 ===== */
.market-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 54px;
  background: #151515;
  border-top: 1px solid #222222;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 11px;
  color: #aaaaaa;
  z-index: 50; /* 다른 요소 위로 */
}

.market-bottom-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
}

.market-bottom-item span.icon {
  font-size: 18px;
}

.market-bottom-item.active {
  color: #ffffff;
  font-weight: 600;
}

/* ✅ 모달이 하단 네비게이션보다 항상 위에 떠 있도록 z-index 조정 */
.modal-backdrop {
  z-index: 90;
}

.modal-sheet {
  z-index: 100;
}

.dash-main {
    padding-bottom: 70px !important;
}

/* ============================================= */
/*  루틴 일정 페이지 색상 적용 전용 패치        */
/* ============================================= */

.routine-page .card {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.rule-item {
  background: transparent !important;
}

/* item 색상 적용 규칙 (HTML의 style보다 강하게 우선 적용됨) */
.rule-item.item-0 { background:#F1F5FF !important; }
.rule-item.item-1 { background:#F7FEE7 !important; }
.rule-item.item-2 { background:#FEF9C3 !important; }
.rule-item.item-3 { background:#FFF7ED !important; }

/* ============================================= */
/*  기간별 일정 모달(주간·월간·연간) 고급 UI 패치  */
/* ============================================= */

/* 날짜 그룹 컨테이너 */
.range-date-group {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.range-date-title {
  background: linear-gradient(180deg, #ffffff, #f1f5f9);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 700;
  margin-bottom: 12px;
  border-bottom: none !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

/* 토요일 */
.range-date-title.range-date-sat {
  background: linear-gradient(180deg, #e0f2fe, #f0f9ff);
}

/* 일요일 + 공휴일 */
.range-date-title.range-date-sun,
.range-date-title.range-date-holiday {
  background: linear-gradient(180deg, #fee2e2, #fff1f2);
}


/* 날짜 색상 전용 클래스 */
.range-date-sun {
  color: #dc2626 !important;   /* 빨강 (일요일) */
}

.range-date-holiday {
  color: #dc2626 !important;   /* 공휴일 → 빨강 */
}

.range-date-sat {
  color: #1d4ed8 !important;   /* 파랑 (토요일) */
}

/* 각 날짜 내 일정 목록 */
.range-event-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 기존 view-event-item 스타일 업그레이드 재사용 */
.range-event-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: #f9fafb;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

/* 태그 */
.range-event-tag {
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #374151;
  flex-shrink: 0;
  font-weight: 600;
}

.range-event-tag.meeting { background:#dbeafe; color:#1d4ed8; }
.range-event-tag.work    { background:#fee2e2; color:#b91c1c; }
.range-event-tag.meal    { background:#dcfce7; color:#166534; }
.range-event-tag.memo    { background:#fef9c3; color:#92400e; }
.range-event-tag.routine { background:#ede9fe; color:#6b21a8; }

/* 내용 */
.range-event-body {
  font-size: 13px;
  line-height: 1.45;
  color: #1f2937;
}

/* 모달 자체 여백 보정 */
#rangeModal .modal-body {
  padding: 10px 6px 20px !important;
}

/* 모달 타이틀 스타일 업그레이드 */
#rangeModal .modal-title {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

/* 날짜 그룹 사이 간격 표시용 가벼운 구분선 */
.range-separator {
  height: 1px;
  width: 100%;
  background: #f1f5f9;
  margin: 10px 0;
}

/* 일정이 없을 때 */
.range-empty-msg {
  font-size: 13px;
  text-align: center;
  color: #6b7280;
  padding: 14px 0;
}

.range-date-group .range-date-title.range-date-sun {
  color: #dc2626 !important;
}

.range-date-group .range-date-title.range-date-sat {
  color: #1d4ed8 !important;
}

.range-date-group .range-date-title.range-date-holiday {
  color: #dc2626 !important;
}