/* =========================================================
   Notice (공지사항) — list.php / view.php / form.php 공통
   ========================================================= */
:root{
  --notice-ink: #111;
  --notice-muted: #666;
  --notice-border: #e6e6e6;
  --notice-bg: #fff;
  --notice-bg-alt: #dfdfdf;
  --notice-accent: #0b57d0;   /* 링크/포커스 */
  --notice-pin: #d12a2a;      /* [공지] 배지 */
  --notice-shadow: 0 8px 22px rgba(0,0,0,.06);
  --radius: 12px;
}

/* 공통 타이틀 */
h1{
  margin: 0px 0 0;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.25;
  color: var(--notice-ink);
  padding-bottom:10px;
}

/* 링크/포커스 접근성 */
a{ color: var(--notice-ink); text-decoration: none; }
a:hover{ color: var(--notice-accent); text-decoration: underline; }
a:focus-visible{
  outline: 2px solid var(--notice-accent);
  outline-offset: 2px;
  border-radius: 6px;
}
th.no{width:5%}
th.title{width:65%}
th.author{width:15%}
th.creat_at{width:15%}
/* =========================================================
   Empty state (등록된 공지 없음)
   ========================================================= */
.notice-empty{
  padding: 24px;
  border: 1px dashed var(--notice-border);
  border-radius: var(--radius);
  background: var(--notice-bg-alt);
  color: var(--notice-muted);
}

/* =========================================================
   List (테이블)
   ========================================================= */
.notice-table{
  width: 100%;
  border-collapse: collapse;
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  border-radius: var(--radius);
  overflow: hidden; /* 둥근모서리 유지 */
  box-shadow: var(--notice-shadow);
}
.notice-table th,
.notice-table td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--notice-border);
  text-align: left;
  vertical-align: middle;
  color: var(--notice-ink);
  font-size: 14px;
}
.notice-table thead th{
  background: var(--notice-bg-alt);
  font-weight: 600;
  color: #333;
}
.notice-table tbody tr:hover{
  background: #f7faff;
}
.notice-table tbody tr:last-child td{
  border-bottom: 0;
}

/* 번호 칼럼 살짝 줄이기 */
.notice-table td:first-child,
.notice-table th:first-child{
  width: 72px;
  white-space: nowrap;
  color: #444;
}

/* 제목 링크 */
.notice-table a{
  font-weight: 600;
  text-underline-offset: 3px;
}

/* [공지] 배지 */
.notice-table strong{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 6px;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  color: #fff;
  background: var(--notice-pin);
  border-radius: 999px;
}

/* 작은 화면에서는 카드 형태로 전환 */
@media (max-width: 720px){
  h1{ margin: 10px 0 0;}
  .notice-table{ display: block; border: 0; box-shadow: none; }
  .notice-table thead{ display: none; }
  .notice-table tbody{ display: grid; gap: 10px; }
  .notice-table tr{
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid var(--notice-border);
    border-radius: var(--radius);
    background: var(--notice-bg);
    box-shadow: var(--notice-shadow);
    overflow: hidden;
  }
  .notice-table td{
    border: 0;
    padding: 10px 12px;
  }
  .notice-table td:nth-child(1){
    order: 2; color: var(--notice-muted);
  }
  .notice-table td:nth-child(2){
    order: 1; padding-bottom: 0;
  }
  .notice-table td:nth-child(3),
  .notice-table td:nth-child(4){
    order: 3; color: var(--notice-muted);
    display: inline-block;
    padding-top: 6px;
  }
  .notice-table td:nth-child(3)::before{
    content: "작성자 · ";
  }
  .notice-table td:nth-child(4)::before{
    content: "등록일 · ";
  }
}

/* =========================================================
   View (상세)
   ========================================================= */
.notice-meta{
  margin: 8px 0 16px;
  color: var(--notice-muted);
  font-size: 14px;
}
.notice-content{
  padding: 18px;
  border: 1px solid var(--notice-border);
  border-radius: var(--radius);
  background: var(--notice-bg);
  box-shadow: var(--notice-shadow);
  line-height: 1.7;
  color: #222;
  word-break: break-word;
  white-space: pre-wrap; /* 서버에서 nl2br을 쓰더라도 안전하게 */
}
.notice-content img{
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* 목록 버튼(앵커)을 버튼처럼 */
.notice-actions,
.notice-view-actions{
  margin-top: 16px;
  display: flex;
  gap: 8px;
  justify-content:flex-end;
}
.notice-actions{margin-bottom:30px;}
.notice-actions a,
.notice-view-actions a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid var(--notice-border);
  border-radius: 10px;
  background: var(--notice-bg);
  color: var(--notice-ink);
  text-decoration: none;
  transition: box-shadow .15s;
}
.notice-actions a:hover,
.notice-view-actions a:hover{
  box-shadow: var(--notice-shadow);
}

/* =========================================================
   Form (등록/수정)
   ========================================================= */
.notice-form{
  margin-top: 8px;
  padding: 16px;
  border: 1px solid var(--notice-border);
  border-radius: var(--radius);
  background: var(--notice-bg);
  box-shadow: var(--notice-shadow);
  max-width: 900px;
}
.notice-form label{
  font-weight: 600;
  color: #333;
}
.notice-form input[type="text"],
.notice-form textarea{
  width: 100%;
  border: 1px solid var(--notice-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
  background: #fff;
}
.notice-form textarea{ resize: vertical; min-height: 220px; }
.notice-form input[type="text"]:focus,
.notice-form textarea:focus{
  border-color: var(--notice-accent);
  box-shadow: 0 0 0 4px rgba(11,87,208,.08);
}

.notice-form .form-row{
  margin-top: 12px;
}

.notice-form .pin-check{
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; color: #333;
}

.notice-form .form-actions{
  margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap;
}
.notice_bottom_margin{margin-bottom:50px;}
.notice-form button,
.notice-form a{
  appearance: none;
  border: 1px solid var(--notice-border);
  border-radius: 10px;
  background: var(--notice-bg);
  padding: 9px 14px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  color: var(--notice-ink);
  transition: transform .02s, box-shadow .15s;
}
.notice-form button:hover,
.notice-form a:hover{ box-shadow: var(--notice-shadow); }
.notice-form button:active{ transform: translateY(1px); }

/* 메인 액션 강조 */
.notice-form button[type="submit"]{
  background: var(--notice-accent);
  border-color: var(--notice-accent);
  color: #fff;
}

/* =========================================================
   Utilities
   ========================================================= */
.mt-16{ margin-top: 16px; }
.mt-10{ margin-top: 10px; }
.max-720{ max-width: 720px; }

/* 프린트 시 여백/테이블 라인 유지 */
@media print{
  .notice-form, .notice-actions, .notice-view-actions{ display:none !important; }
  .notice-table{ border:1px solid #000; box-shadow:none; }
  .notice-table th, .notice-table td{ border-bottom:1px solid #000; }
}

.notice-body {
  line-height: 1.2;
  word-break: keep-all;
}
.notice-body ul li,
.notice-body ol li{
	list-style-position:inside;
	line-height:1.4;
}

.notice-body h1{
	margin: 20px 0;
    font-size: 28px;
    line-height: 1.25;
    color: #000;
}
.notice-body img { max-width: 100%; height: auto; }
.notice-body table { width: 100%; border-collapse: collapse; }
.notice-body th, .notice-body td { border:1px solid #e5e5e5; padding:8px; }
.notice-body a[target="_blank"] { text-decoration: underline; }


.notice-empty {grid-column: 1 / -1;
    text-align: center;
    padding: 18px;
    border: 1px dashed #e8e8ea;
    border-radius: 14px;
    color: #667085;
    background: #fbfbfd;}

.notice-table {
  width:100%; border-collapse:collapse; table-layout:fixed;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden;
}
.notice-table th, .notice-table td {
  padding:12px 14px; border-bottom:1px solid #f1f5f9; vertical-align:middle;
}
.notice-table thead th { background:#f8fafc; font-weight:700; color:#111827; }
.notice-table .title-cell .notice-link { display:inline-flex; align-items:center; gap:8px; }
.notice-title { display:inline-block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.title-cell .notice-link {
  display: inline-flex;      /* 수평으로 배치 */
  align-items: center;       /* 수직 가운데 정렬 */
  gap: 6px;                  /* 간격 */
  text-decoration: none;
  color: inherit;
}
.title-cell .notice-link:hover{
	text-decoration:underline;
}
.badge {
  font-size: 12px;
  line-height: 1.4;
  padding: 2px 6px;
  border-radius: 999px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #9a3412;
}
.notice-title {
  font-size: 14px;
  line-height: 1.4;
}
.badge {
  display:inline-block; padding:3px 8px; border-radius:999px; font-size:12px; line-height:1;
  border:1px solid transparent; vertical-align:middle;
}
.badge--pinned { background:#fff7ed; color:#9a3412; border-color:#fdba74; }

/* ───── 모바일 카드 레이아웃 기본 숨김(데스크톱) ───── */
.notice-list,
.notice-card { display:none; }

/* ───── 768px 이하: 카드형 전환 ───── */
@media (max-width: 768px) {
  .notice-table { display:none; }        /* 표 숨김 */
  .notice-list { display:block; padding:0; margin:0; list-style:none; }
  .notice-card {
    display:block; background:#fff; border:1px solid #e5e7eb; border-radius:14px;
    padding:14px; margin-bottom:10px;
    box-shadow:0 1px 2px rgba(0,0,0,.03);
  }
  .notice-card__link { display:block; color:inherit; text-decoration:none; }
  .notice-card__head { display:flex; align-items:flex-start; gap:8px; margin-bottom:8px; }
  .notice-card__title {
    margin:0; font-size:16px; font-weight:700; line-height:1.3;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .notice-card__meta {
    display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:0;
  }
  .notice-card__meta dt { font-size:11px; color:#6b7280; }
  .notice-card__meta dd { margin:2px 0 0; font-size:13px; color:#111827; }
}
/* ========== Notice Editor: Focused Writing UI ========== */
.notice-form {
  --nf-max: 860px;
  --nf-ink: #111;
  --nf-ink-2: #666;
  --nf-line: #e6e6e6;
  --nf-bg: #fff;
  --nf-accent: #0a84ff;

  max-width: var(--nf-max);
  margin: 24px auto 80px;
  padding: 0 16px;
  color: var(--nf-ink);
  font-size: 16px;
  line-height: 1.6;
}

/* 제목 / 라벨 / 행 간격 */
.notice-form .form-row {
  margin-bottom: 18px;
}
.notice-form .form-row.max-720 {
  max-width: 720px;
}
.notice-form label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--nf-ink-2);
  margin: 0 0 8px;
}

/* 제목 인풋: 크게, 집중 느낌 */
.notice-form input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--nf-line);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 20px;
  line-height: 1.4;
  background: var(--nf-bg);
  transition: border-color .15s, box-shadow .15s;
}
.notice-form input[type="text"]:focus {
  outline: 0;
  border-color: var(--nf-accent);
  box-shadow: 0 0 0 4px rgba(10,132,255,.12);
}

/* Quill 툴바: 상단 고정 + 미묘한 그림자 */
.notice-form .ql-toolbar {
  position: sticky;
  top: 64px;           /* 상단 고정 높이(관리자 헤더 높이에 맞게 조정) */
  z-index: 5;
  background: #fff;
  border: 1px solid var(--nf-line) !important;
  border-bottom: none !important;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 6px 20px rgba(0,0,0,.05);
}

/* 에디터 박스 */
.notice-form #editor {
  border: 1px solid var(--nf-line);
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}
.notice-form .ql-container {
  border: none !important;
  font-size: 17px;
}
.notice-form .ql-editor {
  min-height: 420px;  /* 기본 높이 상향 */
  padding: 20px 22px;
  line-height: 1.85;
  font-kerning: normal;
  background:#fff;
}

/* 에디터 본문 요소들 – 읽기/작성 모두 깔끔하게 */
.notice-form .ql-editor h1,
.notice-form .ql-editor h2,
.notice-form .ql-editor h3 {
  line-height: 1.3;
  margin: 1.4em 0 .6em;
  font-weight: 800;
}
.notice-form .ql-editor h1 { font-size: 28px; }
.notice-form .ql-editor h2 { font-size: 24px; }
.notice-form .ql-editor h3 { font-size: 20px; }
.notice-form .ql-editor p { margin: 0 0 1em; }
.notice-form .ql-editor a { color: #0a84ff; text-decoration: underline; }
.notice-form .ql-editor blockquote {
  margin: 1.2em 0;
  padding: .6em .9em;
  border-left: 4px solid #ddd;
  background: #fafafa;
  color: #333;
  border-radius: 6px;
}
.notice-form .ql-editor pre.ql-syntax {
  border-radius: 8px;
  padding: 14px 16px;
  background: #0f172a;
  color: #e5e7eb;
  font-size: 14px;
  overflow: auto;
}
.notice-form .ql-editor ul,
.notice-form .ql-editor ol {
  padding-left: 1.4em;
  margin: 0 0 1em;
}
.notice-form .ql-editor img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* 상단 고정 체크(핀) 행 */
.notice-form .pin-check {
  margin-top: 14px;
  user-select: none;
}
.notice-form .pin-check input[type="checkbox"] {
  width: 16px; height: 16px; vertical-align: -2px; margin-right: 6px;
}

/* 하단 액션바: 고정(모바일 안전영역 고려) */
.notice-form .form-actions {
  position: sticky;
  bottom: 0;
  z-index: 6;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,.92));
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid var(--nf-line);
  margin-top: 18px;
}

/* 버튼 */
.notice-form .form-actions button,
.notice-form .form-actions a {
  appearance: none;
  border: 1px solid #d0d0d0;
  background: #fff;
  color: #111;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  transition: box-shadow .15s, transform .02s, border-color .15s, background .15s;
}
.notice-form .form-actions button {
  background: var(--nf-accent);
  color: #fff;
  border-color: var(--nf-accent);
}
.notice-form .form-actions button:hover {
  box-shadow: 0 10px 24px rgba(10,132,255,.18);
}
.notice-form .form-actions a:hover {
  border-color: #bbb;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

/* 제목/에디터의 ‘집중’ 상태를 더 강조 (포커스 감지) */
.notice-form input[type="text"]:focus,
.notice-form .ql-editor:focus {
  scroll-margin-top: 72px; /* 포커스 이동 시 상단 여백 */
}

/* 모바일 최적화 */
@media (max-width: 640px) {
  .notice-form {
    margin-top: 12px;
    font-size: 15px;
  }
  .notice-form input[type="text"] {
    font-size: 18px;
    padding: 12px 14px;
  }
  .notice-form .ql-editor {
    padding: 16px;
    min-height: 360px;
  }
}