/**
 * 2026-08-13: 메인 v11 (뉴스형) — 칸반 115
 *
 * 히어로 없이 검색 + 뉴스 2단.
 * 모든 규칙은 .main-v11 / .v11-* 안으로 스코프한다 —
 * 전역 셀렉터를 쓰면 같은 코드를 공유하는 다른 학회 화면이 함께 흔들린다.
 */

/* ── 검색 영역 ─────────────────────────────────────────────
   배경은 사이트 설정의 GNB 바 배경색을 그대로 쓴다.
   별도 설정을 만들면 관리자가 두 곳을 맞춰야 한다. */
.v11-search {
  background: var(--gnb-bar-bg, #1f3a5f);
  padding: var(--spacing-2xl) 0;
}

/* 2026-08-14: 정확히 반반. flex 로 나누면 gap 이 한쪽에만 붙어 검색창이 더 넓어진다.
   아래 뉴스 2단과 같은 격자를 써서 검색창 오른쪽 끝이 열 경계와 맞는다. */
.v11-search__inner {
  max-width: var(--container-width, 1400px);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3xl);
  align-items: center;
}

.v11-search__form {
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: var(--radius-xl, 28px);
  padding: 0 var(--spacing-lg) 0 var(--spacing-xl);
  height: 56px;
}

.v11-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: var(--font-body);
  font-family: inherit;
  color: var(--text-primary);
}

.v11-search__input::placeholder { color: var(--text-gray); }

.v11-search__btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.v11-search__btn svg { width: 22px; height: 22px; }

/* 협력 사무소 — '지난 뉴스' 제목과 같은 크기 */
/* 2026-08-14: PC 에서 작아 보인다는 지적 — '지난 뉴스' 제목과 같은 급으로 올린다 */
.v11-partner {
  min-width: 0;
  font-size: var(--font-h3);
  font-weight: var(--weight-h3);
  color: #fff;
  text-align: center;
  word-break: keep-all;
}

.v11-partner a {
  color: inherit;
  text-decoration: none;
}

.v11-partner a:hover { text-decoration: underline; }

/* ── 뉴스 2단 ─────────────────────────────────────────── */
.v11-news {
  max-width: var(--container-width, 1400px);
  margin: 0 auto;
  /* 검색 영역 바로 아래다 — 64px 은 첫 화면이 비어 보인다 */
  padding: var(--spacing-2xl) var(--spacing-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3xl);
  align-items: start;
}

/* base.css 의 h2/h3 는 font-size 에 !important 가 걸려 있다.
   그대로 두면 '오늘의 뉴스'(h2, 32px)가 기사 제목(h3, 24px)보다 커져 위계가 뒤집힌다.
   전역 규칙은 사이트 전체가 쓰므로 건드리지 않고, 이 버전 안에서만 덮는다. */
/* 라벨은 아래 내용에 붙는다.
   padding-bottom 과 margin-bottom 을 함께 주면 48px 이 되어 따로 노는 제목처럼 보였다. */
.v11-col__head {
  font-size: var(--font-h4) !important;
  font-weight: var(--weight-h4);
  color: var(--text-gray);
  margin: 0 0 var(--spacing-sm);
  line-height: 1.4;
}

/* ── 오늘의 뉴스 ───────────────────────────────────────── */
/* 라벨 바로 아래 붙이고, 메타와는 넉넉히 띄운다 —
   간격이 같으면 무엇이 제목이고 무엇이 부가정보인지 읽히지 않는다 */
.v11-today__title {
  font-size: var(--font-h2) !important;
  font-weight: var(--weight-h2);
  line-height: 1.45;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-md);
  word-break: keep-all;
}

/* 2026-08-14: 아래 선은 흐리게.
   오른쪽 표 상단선(2px 진한 선)과 같게 했더니 나란히 놓였을 때 오히려 어긋나 보였다.
   왼쪽은 기사 한 건, 오른쪽은 목록 표라 성격이 달라 같은 선을 쓸 자리가 아니다. */
.v11-today__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-lg);
  font-size: var(--font-small);
  color: var(--text-gray);
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-light);
}

/* 첨부 — 본문 아래 별도 영역. 구조는 게시판 상세와 같다:
   왼쪽에 클립+파일명, 오른쪽에 [다운로드] 버튼.
   파일명 앞에 다운로드 아이콘을 두면 이름의 일부처럼 읽힌다. */
.v11-today__files {
  margin-top: var(--spacing-xl);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--bg-gray);
  border-radius: var(--radius-md);
}

/* --text-dark 는 이 프로젝트에서 남색이라 링크처럼 보인다 → 본문 검정 */
.v11-today__files-head {
  font-size: var(--font-small);
  font-weight: var(--weight-h3);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.v11-file {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
}
.v11-file + .v11-file { border-top: 1px solid var(--border-light); }

.v11-file__name {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-small);
  color: var(--text-primary);
}
.v11-file__name > span { min-width: 0; word-break: break-all; }
.v11-file__name svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-gray); }

.v11-file__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-white);
  color: var(--text-gray);
  font-size: var(--font-small);
  text-decoration: none;
  line-height: 1.4;
  transition: border-color .15s, color .15s;
}
.v11-file__btn:hover { border-color: var(--accent-tertiary); color: var(--accent-tertiary); }
.v11-file__btn svg { width: 13px; height: 13px; flex-shrink: 0; }

.v11-today__body {
  font-size: var(--font-body);
  line-height: 1.9;
  color: var(--text-primary);
  word-break: break-word;
}

.v11-today__body p { margin: 0 0 var(--spacing-lg); }
.v11-today__body p:last-child { margin-bottom: 0; }
.v11-today__body img { max-width: 100%; height: auto; }

.v11-today__more {
  display: inline-block;
  margin-top: var(--spacing-2xl);
  font-size: var(--font-small);
  color: var(--accent-tertiary);
  text-decoration: none;
}

.v11-today__more:hover { text-decoration: underline; }

/* ── 지난 뉴스 ─────────────────────────────────────────── */
/* 표 윗선은 좌측 제목의 아래 여백과 같은 자리에서 시작한다 */
.v11-past__table {
  border-top: 2px solid var(--text-dark);
}

/* 2026-08-14: 제목이 두 줄까지 늘어나므로(54px) 상하 24 를 더하면 한 행이 103px 이 된다.
   목록은 한눈에 훑는 자리라 행을 낮춰 화면에 더 담는다. */
.v11-past__row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  padding: 14px var(--spacing-sm);
  border-bottom: 1px solid var(--border-light);
}

.v11-past__row--head {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: var(--font-small);
  color: var(--text-gray);
  border-bottom: 1px solid var(--border-light);
}

/* 제목 영역을 넓게 — 날짜·조회수는 오른쪽 끝에 고정 */
.v11-past__title {
  flex: 1;
  min-width: 0;
  font-size: var(--font-body);
  font-weight: var(--weight-h4);
  color: var(--text-dark);
  text-decoration: none;
  line-height: 1.5;
  /* 제목이 길면 두 줄까지 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.v11-past__title:hover { text-decoration: underline; }

.v11-past__date {
  flex: 0 0 92px;
  text-align: right;
  font-size: var(--font-small);
  color: var(--text-gray);
  white-space: nowrap;
}

.v11-past__views {
  flex: 0 0 64px;
  text-align: right;
  font-size: var(--font-small);
  color: var(--text-gray);
  white-space: nowrap;
}

.v11-empty {
  padding: var(--spacing-4xl) 0;
  text-align: center;
  color: var(--text-gray);
  font-size: var(--font-small);
}

/* ── 댓글 ─────────────────────────────────────────────── */
.v11-comments {
  margin-top: var(--spacing-2xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--border-light);
}

.v11-comments__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-body);
  font-weight: var(--weight-h4);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.v11-comments__count { color: var(--accent-tertiary); }

.v11-comment {
  padding: var(--spacing-lg) 0;
  border-bottom: 1px solid var(--border-light);
}
.v11-comment:first-child { border-top: 1px solid var(--border-light); }
.v11-comment:last-child { border-bottom: 1px solid var(--border-light); }

.v11-comment__meta {
  display: flex;
  gap: var(--spacing-md);
  font-size: var(--font-small);
  color: var(--text-gray);
  margin-bottom: var(--spacing-xs);
}

.v11-comment__author { font-weight: var(--weight-h4); color: var(--text-primary); }

/* 삭제 — 관리자·본인에게만 나온다 (서버가 다시 판정한다).
   아이콘만 두면 무슨 버튼인지 알기 어려워 라벨을 함께 두고 버튼 모양으로 만든다. */
.v11-comment__del {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-white);
  color: var(--text-gray);
  font-size: var(--font-small);
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.v11-comment__del:hover {
  border-color: #c62828;
  color: #c62828;
}
.v11-comment__del svg { width: 13px; height: 13px; flex-shrink: 0; }
.v11-comment__meta { align-items: center; }

.v11-comment__body {
  font-size: var(--font-small);
  line-height: 1.7;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.v11-comments__empty {
  padding: var(--spacing-lg) 0;
  margin: 0;
  text-align: center;
  color: var(--text-gray);
  font-size: var(--font-small);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

/* 댓글 작성 (2026-08-14, 칸반 116)
   배경으로 묶지 않으면 입력칸이 허공에 뜬 것처럼 보인다 */
.v11-comment-form {
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md);
  background: var(--bg-gray);
  border-radius: var(--radius-md);
}
.v11-comment-form__row { margin-bottom: var(--spacing-sm); }

/* 2026-08-14: 보조 입력이라 16px 은 과하다 → 상하 8 / 좌우 12.
   좌우까지 8 로 줄이면 글자가 테두리에 붙어 보인다. */
.v11-comment-form input,
.v11-comment-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: var(--spacing-sm) 12px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  font-size: var(--font-small);
  font-family: inherit;
  background: var(--bg-white);
}

.v11-comment-form input { max-width: 220px; }
.v11-comment-form textarea { min-height: 84px; resize: vertical; line-height: 1.7; }
.v11-comment-form input:focus,
.v11-comment-form textarea:focus { outline: none; border-color: var(--accent-tertiary); }

/* 댓글 이메일 인증 (2026-08-14, 칸반 117) */
.v11-cmt-verify { margin-bottom: var(--spacing-sm); }
.v11-cmt-verify__row { display: flex; gap: var(--spacing-xs); margin-bottom: var(--spacing-xs); }
.v11-cmt-verify__row input {
  flex: 1;
  min-width: 0;
  max-width: none;
  padding: var(--spacing-sm) 12px;
}

.v11-cmt-verify__btn {
  flex-shrink: 0;
  padding: 0 var(--spacing-md);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  background: var(--bg-white);
  color: var(--text-primary);
  font-size: var(--font-small);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.v11-cmt-verify__btn:hover:not(:disabled) { border-color: var(--accent-tertiary); color: var(--accent-tertiary); }
.v11-cmt-verify__btn:disabled { color: var(--text-gray); cursor: not-allowed; }

.v11-cmt-verify__done {
  margin: 0 0 var(--spacing-xs);
  font-size: var(--font-small);
  color: #2e7d32;
}
.v11-cmt-verify__msg {
  margin: 0;
  font-size: var(--font-small);
  color: var(--text-gray);
  line-height: 1.6;
}
.v11-cmt-verify__msg.is-error { color: #c62828; }

.v11-comment-form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-top: var(--spacing-sm);
}

.v11-comment-form__msg {
  margin: 0;
  font-size: var(--font-small);
  color: var(--text-gray);
  min-height: 1.4em;
}
.v11-comment-form__msg.is-error { color: #c62828; }

.v11-comment-form__btn {
  flex-shrink: 0;
  padding: var(--spacing-sm) var(--spacing-xl);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--accent-tertiary);
  color: #fff;
  font-size: var(--font-small);
  font-weight: var(--weight-h4);
  font-family: inherit;
  cursor: pointer;
}
.v11-comment-form__btn:disabled { background: var(--border-medium); cursor: not-allowed; }

/* 로그인이 필요한데 비로그인 — 눌리면 로그인으로 보낸다 */
.v11-comment-form.is-locked input,
.v11-comment-form.is-locked textarea {
  background: var(--bg-gray);
  cursor: pointer;
}

/* ── 좁은 화면 ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* 뉴스가 한 줄로 서면 검색창의 반반도 맞출 상대가 없다 — 함께 한 줄로 */
  .v11-news,
  .v11-search__inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-3xl);
  }
  .v11-search__inner {
    gap: var(--spacing-lg);
    align-items: stretch;
  }
  .v11-partner { text-align: left; }
}

@media (max-width: 768px) {
  .v11-search__form { height: 48px; }
  .v11-partner { font-size: var(--font-body); font-weight: var(--weight-h4); }

  .v11-today__title { font-size: var(--font-h3) !important; }
  .v11-past__date { flex-basis: 78px; }
  .v11-past__views { flex-basis: 52px; }
}

/* ── 댓글 삭제 인증 모달 (2026-08-14, 칸반 117) ─────────────
   window.prompt 는 스타일을 맞출 수 없고 안내도 한 줄뿐이라
   무엇을 입력해야 하는지 알기 어렵다. 상세 페이지 인증 창과 같은 모양으로 둔다. */
.v11-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: var(--spacing-lg);
}
.v11-modal.is-open { display: flex; }

.v11-modal__box {
  width: 100%;
  max-width: 400px;
  padding: var(--spacing-2xl);
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
}

.v11-modal__title {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-h4) !important;
  font-weight: var(--weight-h4);
  color: var(--text-primary);
}

.v11-modal__desc {
  margin: 0 0 var(--spacing-lg);
  font-size: var(--font-small);
  color: var(--text-gray);
  line-height: 1.7;
}

.v11-modal__row { margin-bottom: var(--spacing-sm); }
.v11-modal__row input {
  width: 100%;
  box-sizing: border-box;
  padding: var(--spacing-sm) 12px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  font-size: var(--font-body);
  font-family: inherit;
}
.v11-modal__row input:focus { outline: none; border-color: var(--accent-tertiary); }

.v11-modal__msg {
  margin: 0;
  min-height: 1.5em;
  font-size: var(--font-small);
  color: var(--text-gray);
  line-height: 1.6;
}
.v11-modal__msg.is-error { color: #c62828; }

.v11-modal__actions {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}
.v11-modal__actions button {
  flex: 1;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: var(--font-body);
  font-weight: var(--weight-h4);
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--border-medium);
}
.v11-modal__cancel { background: var(--bg-white); color: var(--text-primary); }
.v11-modal__ok {
  background: #c62828;
  border-color: #c62828;
  color: #fff;
}
.v11-modal__ok:disabled { background: var(--border-medium); border-color: var(--border-medium); cursor: not-allowed; }