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

/* ── 기본 숨김 (채널톡 런처는 모바일·PC 모두 표시) ── */
#body footer:not(.sp-dt-footer) { display: none !important; }

/* ── 페이지 배경 ── */
#content.notices-page {
  position:relative;
  background: var(--wh-bg-stay, #F5F5F5) !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 아래) — 가로 등분 세그먼트
 * 글로벌 wh-tabs.css(BEM용 column)와 레거시 .wh-tab 충돌 보정
 * 톤: .events-subtabs와 동일
 */
.notices-page .wh-tabs {
  /* 선택 표시 이동(wh-tabs-indicator.js, components/wh-tabs.css): 선택 탭 모습 = 흰 알약 + 카드 그림자 */
  --wh-tab-ind-bg: #fff;
  --wh-tab-ind-bd: transparent;
  --wh-tab-ind-radius: 10px;
  --wh-tab-ind-shadow: var(--acc-card-shadow);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  margin-top: 0;
  padding: 8px 16px 4px;
  position: relative;
  top: auto;
  z-index: auto;
  background: transparent;
  border-bottom: none;
}
.notices-page .wh-tab {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  text-align: center;
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  border-bottom: none;
  background: var(--wh-bg);
  color: var(--wh-label-3, var(--wh-tx3, #6B6B6B));
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}
.notices-page .wh-tab.active {
  background: #fff;
  color: var(--wh-brand, #681DC7);
  border-color: transparent;
  box-shadow: var(--acc-card-shadow);
  font-weight: 600;
}

/* ── 본문 ── */
.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 var(--wh-motion-fast, 180ms), color var(--wh-motion-fast, 180ms), box-shadow var(--wh-motion-fast, 180ms);
}
.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 .ntc-photo-card,
.notices-events-list.ended-col-items .r26-host-cta-banner { cursor: pointer; }
.notices-page a.ntc-photo-card,
.notices-page .ntc-photo-card.is-clickable,
.notices-page .ntc-text-card.is-clickable,
.notices-page a.r26-host-cta-banner,
.notices-page .r26-host-cta-banner.is-clickable {
  cursor: pointer;
}

/* Stay 사진 이벤트 카드 — 홈과 같은 풀블리드 */
.notices-page .ntc-photo-card {
  display: block;
  position: relative;
  width: 100%;
  height: 168px;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit;
  background: var(--wh-bg-stay, #F5F5F5);
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.notices-page a.ntc-photo-card:visited,
.notices-page a.ntc-photo-card:hover,
.notices-page a.ntc-photo-card:active,
.notices-page a.ntc-photo-card:focus {
  color: inherit;
  text-decoration: none !important;
}
.notices-page .ntc-photo-card:focus-visible,
.notices-page .ntc-text-card:focus-visible,
.notices-page .r26-host-cta-banner:focus-visible {
  outline: 2px solid var(--wh-focus-ring);
  outline-offset: 2px;
}
.notices-page .ntc-photo-card:active,
.notices-page .ntc-text-card:active {
  opacity: 0.92;
}
.notices-page .ntc-photo-card__media {
  position: absolute;
  inset: 0;
}
.notices-page .ntc-photo-card__media img,
.notices-page .ntc-photo-card__ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.notices-page .ntc-photo-card__ph {
  background: #e8e8e8;
}
.notices-page .ntc-photo-card__chip {
  position: absolute;
  left: 8px;
  right: auto;
  bottom: 8px;
  z-index: 2;
  max-width: calc(100% - 16px);
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
}
.notices-page .ntc-photo-card__title {
  display: block;
  font-family: var(--wh-ff-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--wh-tx, #1A1A1A);
  line-height: 1.35;
  letter-spacing: -0.02em;
}
.notices-page .ntc-photo-card__meta {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--wh-tx3, #6B6B6B);
}
.notices-page .ntc-photo-card__ended {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 7px;
  background: var(--wh-card, #fff);
  color: var(--wh-tx, #1A1A1A);
  border: 1px solid var(--wh-hairline, #dfe0e2);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.notices-page .ntc-photo-card.is-ended .ntc-photo-card__media img {
  filter: grayscale(1);
  opacity: 0.72;
}

/* 공지·뉴스레터 텍스트 카드 */
.notices-page .ntc-text-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: var(--wh-card, #fff);
  border-radius: 16px;
  padding: 16px;
  min-height: var(--wh-touch-min, 44px);
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.notices-page .ntc-text-card__kicker {
  font-size: 12px;
  font-weight: 600;
  color: var(--wh-tx3, #6B6B6B);
  line-height: 1.3;
}
.notices-page .ntc-text-card__title {
  font-family: var(--wh-ff-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--wh-tx, #1A1A1A);
  line-height: 1.35;
  letter-spacing: -0.02em;
}
.notices-page .ntc-text-card__date {
  font-size: 13px;
  font-weight: 500;
  color: var(--wh-tx3, #6B6B6B);
}

/* ── 이벤트 카드 (메인 호스트 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 var(--wh-motion-fast, 180ms) ease, filter var(--wh-motion-fast, 180ms) 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, var(--wh-tx));
  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, var(--wh-tx));
  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, var(--wh-tx));
  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, var(--wh-tx));
  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, var(--wh-tx));
  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, var(--wh-tx));
}
.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: var(--wh-tx);
  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, var(--wh-tx));
}

/* ── 공지 헤더 ── */
.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 var(--wh-motion-fast, 180ms);
}
.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.55;
  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.45em; min-height: 0; }
.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 var(--wh-motion-fast, 180ms);
  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 var(--wh-motion-fast, 180ms);
}
.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: var(--wh-surface);
}
.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.55;
  color: var(--wh-label);
  letter-spacing: -0.2px;
  padding: 12px 14px;
}
.notice-quill-wrap .ql-editor p {
  margin: 0 0 0.45em;
}
.notice-quill-wrap .ql-editor p:last-child {
  margin-bottom: 0;
}
/* 행간 피커 라벨 */
.notice-quill-wrap .ql-snow .ql-picker.ql-lineheight {
  width: 72px;
}
.notice-quill-wrap .ql-snow .ql-picker.ql-lineheight .ql-picker-label::before,
.notice-quill-wrap .ql-snow .ql-picker.ql-lineheight .ql-picker-item::before {
  content: '행간';
}
.notice-quill-wrap .ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1.35"]::before,
.notice-quill-wrap .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1.35"]::before {
  content: '좁게';
}
.notice-quill-wrap .ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1.55"]::before,
.notice-quill-wrap .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1.55"]::before {
  content: '보통';
}
.notice-quill-wrap .ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1.75"]::before,
.notice-quill-wrap .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1.75"]::before {
  content: '넓게';
}
.notice-quill-wrap .ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="2"]::before,
.notice-quill-wrap .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="2"]::before {
  content: '더넓게';
}
.notice-quill-wrap .ql-snow .ql-picker.ql-lineheight .ql-picker-label::before,
.notice-quill-wrap .ql-snow .ql-picker.ql-lineheight .ql-picker-item::before {
  vertical-align: middle;
}
.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 12px;
}
.notices-intro-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(104, 29, 199, 0.08);
  border-radius: var(--wh-radius-btn, 18px);
  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, #1A1A1A);
  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, #4A4A4A);
  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: 92px;
  }
}

/* ── 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: 16px 0 24px;
  }

  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 {
    flex-direction: row;
    margin-top: 0 !important;
    padding: 0;
    margin-bottom: 8px;
    max-width: 480px;
  }
  html.sp-force-desktop-ui .notices-page .wh-tab {
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
  }

  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, minmax(0, 1fr));
    gap: 16px;
  }

  html.sp-force-desktop-ui .notices-page .ntc-photo-card {
    height: 180px;
    border-radius: var(--wh-radius-md, 20px);
  }
  html.sp-force-desktop-ui .notices-page .ntc-text-card {
    border-radius: var(--wh-radius-md, 20px);
    padding: 18px 18px 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;
  }

  /* 상세: 중앙 모달 — GNB(1200)·서브내비(1300) 위, notif(9999) 아래 */
  html.sp-force-desktop-ui .notice-sheet-overlay {
    align-items: center;
    padding: 24px;
    z-index: 2100;
  }

  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);
  }
}

/* ─── 카테고리 태그 배지 ─── */
.ntc-cat-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid;
  background: transparent;
  letter-spacing: 0.02em;
  vertical-align: middle;
  white-space: nowrap;
}

/* ─── NEW 뱃지 ─── */
.ntc-new-dot {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--wh-brand, #681DC7);
  vertical-align: middle;
  margin-left: 2px;
}

/* ─── 버전 태그 ─── */
.ntc-version-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--wh-brand, #681DC7);
  background: #F3EEFA;
  border-radius: 4px;
  padding: 1px 5px;
  vertical-align: middle;
  margin-left: 2px;
}

/* ─── 핀 아이콘 (카드 내 kicker) ─── */
.ntc-pin-icon {
  font-size: 13px !important;
  vertical-align: -2px;
  color: var(--wh-label-3, #888);
  font-variation-settings: 'FILL' 1;
}

/* ─── 핀 고정 카드 강조 ─── */
.ntc-card-pinned {
}

/* ─── 핀 고정 섹션 ─── */
.ntc-pinned-section {
  margin: 0 0 4px;
  background: var(--wh-bg-2, #F8F8FA);
  border-radius: 14px;
  overflow: hidden;
}
.ntc-pinned-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--wh-sep, rgba(0,0,0,0.06));
  font-size: 13px;
  color: var(--wh-label-1, #111);
  cursor: pointer;
  text-align: left;
}
.ntc-pinned-item:last-child {
  border-bottom: none;
}
.ntc-pin-icon-sm {
  font-size: 14px !important;
  color: var(--wh-brand, #681DC7);
  flex-shrink: 0;
  font-variation-settings: 'FILL' 1;
}
.ntc-pinned-cat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ntc-pinned-title {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
}
.ntc-pinned-date {
  font-size: 11px;
  color: var(--wh-label-3, #888);
  flex-shrink: 0;
}

/* ─── 점검 배너 ─── */
.ntc-maintenance-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.ntc-mb-icon {
  font-size: 20px !important;
  color: #B45309;
  flex-shrink: 0;
  font-variation-settings: 'FILL' 1;
}
.ntc-mb-body {
  flex: 1;
  min-width: 0;
}
.ntc-mb-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #78350F;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ntc-mb-time {
  display: block;
  font-size: 11px;
  color: #92400E;
  margin-top: 2px;
}
.ntc-mb-link {
  flex-shrink: 0;
  background: none;
  border: 1px solid #D97706;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #B45309;
  cursor: pointer;
}

/* ─── 필터 칩 ─── */
.ntc-filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 0 8px;
}
.ntc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Pretendard', -apple-system, sans-serif;
  background: var(--wh-bg-2, #EBEBF0);
  color: var(--wh-label-3);
  border: none;
  cursor: pointer;
  transition: background var(--wh-motion-fast, 180ms), color var(--wh-motion-fast, 180ms), box-shadow var(--wh-motion-fast, 180ms);
}
.ntc-chip.active {
  background: #fff;
  color: var(--wh-brand, #681DC7);
  box-shadow: var(--acc-card-shadow);
  font-weight: 700;
}
.ntc-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ─── 관리자 글쓰기 폼 — 카테고리 선택 ─── */
.ntc-write-category-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ntc-cat-radio {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 14px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  background: var(--wh-bg-2, #F4F4F7);
  color: var(--wh-label-2, #444);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--wh-motion-fast, 180ms), border-color var(--wh-motion-fast, 180ms);
}
.ntc-cat-radio.active {
  background: #EEF2FF;
  border-color: #C7D2FE;
  color: #4338CA;
  font-weight: 700;
}
.ntc-cat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

/* ─── 관리자 글쓰기 폼 — 옵션 체크박스 ─── */
.ntc-write-options-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ntc-write-opt-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--wh-label-2, #444);
  cursor: pointer;
}
.ntc-write-opt-check input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: #6366F1;
  cursor: pointer;
}

/* ── 다국어 가로 넘침 방지 (2026-08-22) ──────────────────────────────────
   `word-break: keep-all`은 CJK에서 문자 사이 줄바꿈을 금지해 텍스트의
   min-content가 문장 전체 폭이 된다. 그리드 `1fr`(= `minmax(auto, 1fr)`)
   트랙이 그 min-content에 밀려 컨테이너를 넘는다.
   한국어 어절 보존은 유지하고, 그 외 언어에서만 해제한다.
   SSOT: docs/design-md/wooseok.md §3 「다국어 줄바꿈·그리드」 */
html:not(:lang(ko)) #content.notices-page * {
  word-break: normal;
}

html:not(:lang(ko)) #content.notices-page :is(h1, h2, h3, h4, p, li, span, a, div, button) {
  overflow-wrap: break-word;
}

/* 동작 줄이기(motion §11): 토큰화 못 한 무한 반복·지연 진입만 끈다 (2026-10-08) */
@media (prefers-reduced-motion: reduce) {
  .notice-spinner { animation: none !important; }
}
html.wh-reduce-motion .notice-spinner { animation: none !important; }