/**
 * account-notices.css — 이벤트 & 공지 피드 허브 (/account/notices)
 * SSOT: toss.md · craft.md · travel.md §1c Feed Hub
 * 플랫 · Logo Violet 관리자 CTA · left-stripe/glow 금지
 */
@import url('../wh-tokens.css');

/* ── 기본 숨김 ── */
#body #ch-plugin,
#body footer { display: none !important; }

/* ── 페이지 배경 ── */
#content.notices-page {
  position:relative;
  background: var(--wh-bg) !important;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: calc(var(--bottom-naverbar-height, 66px) + 24px + var(--safe-b, 0px)) !important;
  min-height: 100vh;
}

/* ── 탭 바 (intro 아래) ── */
.notices-page .wh-tabs {
  margin-top: 0;
  padding: 0 16px;
}

/* ── 본문 ── */
.notices-body {
  padding: 14px 16px;
}
.notices-section-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--wh-label-3);
  padding: 2px 4px 10px;
  letter-spacing: -0.2px;
}

/* ── 이벤트 서브탭 (진행 중 / 종료됨) ── */
.events-subtabs {
  display: flex;
  gap: 8px;
  padding: 0 0 14px;
}
.events-subtab {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  background: var(--wh-bg);
  color: var(--wh-label-3);
  font-size: 13px;
  font-weight: 600;
  font-family: 'Pretendard', -apple-system, sans-serif;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.events-subtab.active {
  background: #fff;
  color: var(--wh-brand, #681DC7);
  box-shadow: var(--acc-card-shadow);
}
.events-pane { display: block; }
.notices-events-list,
.notices-feed-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.notices-events-list.ended-col-items .r26-host-cta-banner { cursor: pointer; }
.notices-page .r26-host-cta-banner.is-clickable {
  cursor: pointer;
}

/* ── 이벤트 카드 (메인 호스트 CTA split 템플릿) ── */
.notices-page .r26-host-cta-banner {
  display: block;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--acc-card-shadow);
  transition: box-shadow 0.2s ease, filter 0.2s ease;
}
.notices-page .r26-host-cta-banner:hover {
  box-shadow: rgba(0, 0, 0, 0.16) 0 8px 26px 0;
  filter: brightness(0.99);
}
.notices-page .r26-host-cta-banner:active {
  filter: brightness(0.96);
  transition-duration: 0.1s;
}
.notices-page .r26-host-cta-banner.r26-host-cta-template {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  position: relative;
  min-height: 118px;
  width: 100%;
  overflow: hidden;
  background: var(--cta-bg, #F5F0EB);
  color: var(--cta-text, #111827);
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
}
.notices-page .r26-host-cta-banner.r26-host-cta-template:visited,
.notices-page .r26-host-cta-banner.r26-host-cta-template:hover,
.notices-page .r26-host-cta-banner.r26-host-cta-template:active,
.notices-page .r26-host-cta-banner.r26-host-cta-template:focus,
.notices-page .r26-host-cta-banner.r26-host-cta-template * {
  color: var(--cta-text, #111827);
  text-decoration: none !important;
}
.notices-page .r26-host-cta-panel {
  position: relative;
  z-index: 2;
  flex: 0 0 66%;
  max-width: 66%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 16px 12px 14px;
  box-sizing: border-box;
  min-width: 0;
  background: var(--cta-bg, #F5F0EB);
  clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
}
.notices-page .r26-host-cta-template .r26-host-cta-kicker {
  margin: 0 0 4px;
  font-size: var(--wh-text-xs);
  font-weight: 600;
  line-height: 1.3;
  color: var(--cta-text, #111827);
  opacity: 0.84;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.notices-page .r26-host-cta-template .r26-host-cta-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--cta-text, #111827);
  word-break: keep-all;
  white-space: pre-line;
}
.notices-page .r26-host-cta-template .r26-host-cta-title span { font-weight: inherit; }
.notices-page .r26-host-cta-template .r26-host-cta-more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 7px;
  font-size: var(--wh-text-xs);
  font-weight: 700;
  color: var(--cta-text, #111827);
  opacity: 0.9;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notices-page .r26-host-cta-visual {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 52%;
  z-index: 1;
  overflow: hidden;
  background: var(--cta-bg, #F5F0EB);
}
.notices-page .r26-host-cta-visual img {
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  object-fit: cover;
  object-position: center right;
  display: block;
  transform-origin: center center;
}
.notices-page .r26-host-cta-visual-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cta-bg, #F5F0EB);
}
.notices-page .r26-host-cta-visual-placeholder .material-symbols-rounded {
  font-size: 34px;
  font-variation-settings: 'FILL' 1;
  opacity: 0.28;
  color: var(--cta-text, #111827);
}
.notices-page .r26-host-cta-date {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 2;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #111827;
  font-size: var(--wh-text-xs);
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.12);
}
.notices-page .r26-host-cta-ended-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.notices-page .r26-host-cta-banner.r26-host-cta-template.is-ended {
  opacity: 0.82;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.notices-page .r26-host-cta-banner.r26-host-cta-template.is-ended .r26-host-cta-visual img {
  filter: grayscale(1) brightness(0.68);
}
.notices-page .r26-host-cta-banner.r26-host-cta-template.is-ended .r26-host-cta-title,
.notices-page .r26-host-cta-banner.r26-host-cta-template.is-ended .r26-host-cta-more {
  opacity: 0.72;
}

/* ── 공지·뉴스레터: 이미지 없는 텍스트 카드 ── */
.notices-page .r26-host-cta-banner.r26-host-cta-text-only {
  min-height: 0;
}
.notices-page .r26-host-cta-text-only .r26-host-cta-panel {
  flex: 1 1 auto;
  max-width: 100%;
  clip-path: none;
  padding: 14px 16px 13px;
}
.notices-page .r26-host-cta-text-only .r26-host-cta-date-inline {
  display: block;
  margin-top: 8px;
  font-size: var(--wh-text-xs);
  font-weight: 600;
  opacity: 0.72;
  color: var(--cta-text, #111827);
}

/* ── 공지 헤더 ── */
.notice-board-total {
  font-size: 12px;
  color: var(--wh-label-3);
  font-weight: 500;
}

/* ── 로딩 / 빈 상태 ── */
.notice-loading-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0;
  gap: 12px;
  color: var(--wh-label-4);
  font-size: 13px;
}
.notice-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--wh-sep-opaque);
  border-top-color: var(--wh-brand, #681DC7);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.notice-empty-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0;
  gap: 10px;
  color: var(--wh-label-4);
}
.notice-empty-wrap .material-symbols-rounded {
  font-size: 44px;
  color: #d1d1d6;
  font-variation-settings: 'FILL' 1;
}
.notice-empty-wrap p { font-size: 13px; margin: 0; }

/* ── 더 보기 버튼 ── */
.notice-load-more-btn {
  width: 100%;
  background: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--wh-brand, #681DC7);
  font-family: 'Pretendard', -apple-system, sans-serif;
  box-shadow: var(--acc-card-shadow);
  cursor: pointer;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.notice-load-more-btn:active { opacity: .7; }

/* ── 탭 헤더 (관리자 글쓰기 버튼 포함) ── */
.tab-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 12px;
}
.tab-header-row .notice-board-total {
  font-size: 12px;
  color: var(--wh-label-3);
  font-weight: 500;
}
.tab-write-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--wh-brand, #681DC7);
  color: #fff;
  border: none;
  border-radius: 16px;
  height: 34px;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Pretendard', -apple-system, sans-serif;
  cursor: pointer;
  transition: opacity .15s;
}
.tab-write-btn:active { opacity: .82; }
.tab-write-btn .material-symbols-rounded { font-size: 16px; font-variation-settings: 'FILL' 1; }

/* ── 바텀 시트 공통 ── */
.notice-sheet-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 9000;
  align-items: flex-end;
  justify-content: center;
}
.notice-sheet-overlay.open { display: flex; }
.notice-sheet {
  background: #fff;
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: var(--max-width-in-mobile-only-mode, 540px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.notice-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--wh-bg);
  flex-shrink: 0;
}
.notice-sheet-title {
  font-size: 17px;
  font-weight: 700;
  color: #000;
  letter-spacing: -0.4px;
  font-family: 'Pretendard', -apple-system, sans-serif;
  flex: 1;
  padding-right: 10px;
}
.notice-sheet-close {
  background: var(--wh-sep-opaque);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.notice-sheet-close .material-symbols-rounded { font-size: 16px; color: var(--wh-label-2); }
.notice-sheet-body { overflow-y: auto; flex: 1; }
/* 뉴스레터 이메일 HTML 렌더링 보정:
   border-collapse:collapse이면 td의 border-radius가 무시되므로 separate로 강제 */
#newsletter-detail-content table { border-collapse: separate; }

/* ── 상세 뷰 ── */
.notice-detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--wh-bg);
  font-size: 12px;
  color: var(--wh-label-4);
  flex-shrink: 0;
}
.notice-detail-meta .sep { color: var(--wh-sep-opaque); }
.notice-detail-content {
  padding: 20px;
  font-size: 15px;
  color: #3a3a3c;
  line-height: 1.7;
  font-family: 'Pretendard', -apple-system, sans-serif;
  letter-spacing: -0.2px;
  word-break: keep-all;
}
/* 연속 스페이스 보존 (Quill은   대신 공백 여러 개로 저장) */
.notice-detail-content p,
.notice-detail-content li {
  white-space: pre-wrap;
}
/* Quill v2 저장 HTML 렌더링:
   bullet → <ol><li data-list="bullet">
   ordered → <ol><li data-list="ordered">
   두 타입 모두 <ol> 태그이므로 ol은 list-style:none으로 초기화 후 li로 구분 */
.notice-detail-content p { margin: 0 0 0.8em; min-height: 1em; }
.notice-detail-content p:last-child { margin-bottom: 0; }
.notice-detail-content ol,
.notice-detail-content ul {
  padding-left: 1.5em;
  margin: 0.4em 0;
  list-style: none;
}
.notice-detail-content li[data-list="bullet"] { list-style-type: disc; }
.notice-detail-content li[data-list="ordered"] { list-style-type: decimal; }
.notice-detail-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 6px 0; display: block; }
.notice-detail-content a { color: var(--wh-brand, #681DC7); text-decoration: underline; }
.notice-detail-content a,
#newsletter-detail-content a {
  pointer-events: auto !important;
  cursor: pointer;
  -webkit-user-select: auto;
  user-select: auto;
  touch-action: manipulation;
  position: relative;
  z-index: 2;
}
.notice-sheet { pointer-events: auto; }
.notice-detail-actions {
  padding: 12px 20px 32px;
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--wh-bg);
  flex-shrink: 0;
}
.notice-action-btn {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Pretendard', -apple-system, sans-serif;
  cursor: pointer;
}
.notice-action-edit { background: #f0e6ff; color: var(--wh-brand, #681DC7); }
.notice-action-delete { background: #fff0f0; color: #e03131; }
.notice-action-push { background: #e8f4ff; color: #0071e3; }

/* ── 글쓰기/수정 폼 ── */
.notice-form-wrap { padding: 16px 20px 32px; }
.notice-form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--wh-label-2);
  margin-bottom: 6px;
  letter-spacing: -0.1px;
}
.notice-form-input {
  width: 100%;
  border: 1.5px solid var(--wh-sep-opaque);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: 'Pretendard', -apple-system, sans-serif;
  color: var(--wh-label);
  background: #fff;
  box-sizing: border-box;
  outline: none;
  transition: border-color .15s;
  letter-spacing: -0.2px;
  margin-bottom: 14px;
}
.notice-form-input:focus { border-color: var(--wh-brand, #681DC7); }
/* Quill 에디터 래퍼 */
.notice-quill-wrap {
  border: 1.5px solid var(--wh-sep-opaque);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
  background: #fff;
  transition: border-color .15s;
}
.notice-quill-wrap:focus-within { border-color: var(--wh-brand, #681DC7); }
.notice-quill-wrap .ql-toolbar.ql-snow {
  border: none;
  border-bottom: 1px solid var(--wh-sep-opaque);
  padding: 8px 10px;
  background: #fafafa;
}
.notice-quill-wrap .ql-container.ql-snow {
  border: none;
  font-family: 'Pretendard', -apple-system, sans-serif;
  font-size: 15px;
}
.notice-quill-wrap .ql-editor {
  min-height: 200px;
  line-height: 1.65;
  color: var(--wh-label);
  letter-spacing: -0.2px;
  padding: 12px 14px;
}
.notice-quill-wrap .ql-editor img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 6px 0;
}
.notice-quill-wrap .ql-editor.ql-blank::before {
  font-style: normal;
  color: var(--wh-label-4);
  font-size: 15px;
}
.notice-form-submit {
  width: 100%;
  background: var(--wh-brand, #681DC7);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 15px;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Pretendard', -apple-system, sans-serif;
  cursor: pointer;
  margin-top: 4px;
}
.notice-form-submit:active { opacity: .85; }
.notice-form-submit:disabled { background: var(--wh-label-4); cursor: default; }

.notice-detail-actions .material-symbols-rounded{
  display: inline-block !important;
}

/* ── Page intro (피드 허브) ── */
.notices-intro {
  padding: 12px 20px 4px;
}
.notices-intro-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(104, 29, 199, 0.08);
  border-radius: 980px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--wh-brand, #681DC7);
  letter-spacing: -0.2px;
  margin-bottom: 10px;
}
.notices-intro-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wh-brand, #681DC7);
}
.notices-intro-title {
  font-family: var(--wh-ff-display, 'SUIT', 'Pretendard', sans-serif);
  font-size: 24px;
  font-weight: 800;
  color: var(--wh-tx, #191f28);
  letter-spacing: -0.5px;
  line-height: 1.25;
  margin: 0 0 8px;
  word-break: keep-all;
}
.notices-intro-body {
  font-size: 14px;
  color: var(--wh-tx2, #4e5968);
  line-height: 1.55;
  margin: 0;
  word-break: keep-all;
}

#content.notices-page a,
#content.notices-page a:hover,
#content.notices-page a:focus,
#content.notices-page a:active {
  text-decoration: none !important;
}

/* 모바일: intro는 nav 아래 */
@media (max-width: 1023px) {
  .notices-intro {
    padding-top: 76px;
  }
}

/* ── PC Feed Hub ── */
@media (min-width: 1024px) {
  html.sp-force-desktop-ui #content.notices-page {
    max-width: min(1120px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: calc(var(--r26-dt-base-header-h, 108px) + 24px) 24px 56px !important;
    background: transparent !important;
  }

  html.sp-force-desktop-ui .notices-intro {
    padding: 8px 0 20px;
  }

  html.sp-force-desktop-ui .notices-intro-title {
    font-size: 32px;
    letter-spacing: -0.8px;
  }

  html.sp-force-desktop-ui .notices-intro-body {
    font-size: 16px;
    max-width: 560px;
  }

  html.sp-force-desktop-ui .notices-page .wh-tabs {
    margin-top: 0 !important;
    padding: 0;
    margin-bottom: 8px;
  }

  html.sp-force-desktop-ui .notices-body {
    padding: 24px 0 8px;
  }

  html.sp-force-desktop-ui .events-subtabs {
    max-width: 360px;
    gap: 10px;
    padding-bottom: 20px;
  }

  html.sp-force-desktop-ui .events-subtab {
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
  }

  html.sp-force-desktop-ui .notices-events-list,
  html.sp-force-desktop-ui .notices-feed-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  html.sp-force-desktop-ui .notices-page .r26-host-cta-banner {
    border-radius: var(--wh-radius-md, 20px);
  }

  html.sp-force-desktop-ui .notices-page .r26-host-cta-banner.r26-host-cta-template {
    min-height: 132px;
  }

  html.sp-force-desktop-ui .tab-header-row {
    padding: 0 0 16px;
  }

  html.sp-force-desktop-ui .tab-write-btn {
    height: 40px;
    padding: 0 16px;
    border-radius: var(--wh-radius-btn, 18px);
    font-size: 14px;
  }

  html.sp-force-desktop-ui .notice-load-more-btn {
    max-width: 320px;
    margin: 8px auto 16px;
    border-radius: 14px;
  }

  html.sp-force-desktop-ui .notice-empty-wrap,
  html.sp-force-desktop-ui .notice-loading-wrap {
    padding: 80px 0;
  }

  /* 상세: 중앙 모달 */
  html.sp-force-desktop-ui .notice-sheet-overlay {
    align-items: center;
    padding: 24px;
  }

  html.sp-force-desktop-ui .notice-sheet {
    border-radius: var(--wh-radius-lg, 24px);
    max-width: 720px;
    width: 100%;
    max-height: 80vh;
    box-shadow: 0 16px 48px rgba(25, 31, 40, 0.18);
  }

  html.sp-force-desktop-ui .notice-sheet-title {
    font-size: 20px;
  }

  html.sp-force-desktop-ui .notice-detail-content {
    padding: 24px 28px;
    font-size: 16px;
  }

  html.sp-force-desktop-ui .notice-detail-actions {
    padding: 16px 28px 24px;
  }

  html.sp-force-desktop-ui .notice-action-btn {
    border-radius: 12px;
    padding: 14px;
  }

  html.sp-force-desktop-ui .notice-form-wrap {
    padding: 20px 28px 28px;
  }

  html.sp-force-desktop-ui .notice-form-submit {
    border-radius: var(--wh-radius-btn, 18px);
  }
}