/* ============================================================
   kt초이스 — 공지사항 페이지 전용 스타일 (notice.html)
   ============================================================ */
.ntc-list { border-top:1px solid var(--gray-900); }
.ntc-item { border-bottom:1px solid var(--gray-100); }
.ntc-row { display:flex; align-items:center; gap:14px; width:100%; padding:20px 4px; text-align:left; transition:background .15s; }
.ntc-row:hover { background:var(--gray-50); }
.ntc-row:hover .ntc-ttl { color:var(--blue-600); }
/* 고정(상단 고정) 공지 — 관리자 페이지에서 지정. 배경·색상 구분 없이 '중요' 뱃지로만 구분 */
.ntc-ttl { flex:1; min-width:0; font-size:15.5px; font-weight:var(--fw-medium); color:var(--gray-900); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* '중요' 뱃지 — 고정 공지 전용, 유일한 구분 요소. 뱃지 유무와 무관하게 제목 시작 위치를 맞추기 위해
   고정폭 슬롯(.ntc-badge-slot)에 담아 렌더 — 뱃지 없는 행도 같은 폭의 빈 슬롯을 둬 제목이 항상 같은 x좌표에서 시작 */
.ntc-badge-slot { display:inline-flex; align-items:center; width:45px; vertical-align:middle; }
.ntc-badge-important { display:inline-flex; align-items:center; justify-content:center; padding:3px 8px; border-radius:var(--r-6); background:var(--blue-600); color:#fff; font-size:var(--fs-caption2); font-weight:var(--fw-bold); letter-spacing:-0.02em; }
/* 'N' 새 글 표시 — 등록일 기준 7일 이내 */
.ntc-new { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; background:var(--status-negative); color:#fff; font-size:10px; font-weight:var(--fw-bold); vertical-align:middle; margin-left:2px; }
.ntc-date { flex:0 0 auto; font-size:var(--fs-label2); color:var(--gray-400); }
.ntc-chev { flex:0 0 auto; width:18px; height:18px; color:var(--gray-300); }
@media (max-width:768px) {
  /* 모바일에서 제목이 2줄로 줄바꿈될 때 날짜가 세로 중앙에 어색하게 떠 보이던 문제 —
     제목을 항상 첫 줄 전체폭으로 감싸고, 날짜·화살표는 둘째 줄로 내려서 정리 */
  .ntc-row { padding:16px 2px; gap:6px 10px; flex-wrap:wrap; align-items:flex-start; }
  /* 뱃지 슬롯과 제목 텍스트를 별도 flex 아이템으로 분리 — 제목이 2줄 이상으로 줄바꿈돼도
     둘째 줄이 슬롯 폭만큼 항상 같은 x좌표에서 시작하도록 함(인라인 방식은 줄바꿈 시 정렬이 깨짐) */
  .ntc-ttl { display:flex; align-items:flex-start; font-size:14.5px; white-space:normal; flex:1 1 100%; }
  .ntc-ttl-text { flex:1 1 auto; min-width:0; }
  .ntc-chev { margin-left:auto; }
  /* 날짜를 뱃지 슬롯 폭만큼 들여써서 제목 텍스트와 왼쪽 정렬을 맞춤 */
  .ntc-date { font-size:var(--fs-caption1); margin-left:40px; }
  .ntc-new { width:14px; height:14px; font-size:9px; }
  .ntc-badge-slot { width:40px; flex:0 0 40px; }
  .ntc-badge-important { padding:2px 7px; font-size:10px; }
}


/* ===== 브레드크럼 (전 페이지 공통 통일) ===== */
.crumb { display:flex; align-items:center; justify-content:flex-end; gap:6px; font-size:var(--fs-label2); color:var(--gray-400); margin-bottom:14px; }
.crumb a { color:var(--gray-400); transition:color .15s; }
.crumb a:hover { color:var(--blue-600); }
.crumb .sep { color:var(--gray-300); }
.crumb .cur { color:var(--gray-800); font-weight:var(--fw-semibold); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:280px; }
@media (max-width:768px){ .crumb { display:none; } }