/* 영재의논리:자료받기 — 홈페이지 안의 한 화면.
   앱의 다른 화면과 이름이 부딪히지 않도록 모두 lg- 를 붙였다. */

/* ── 맨 위: 자료실과 같은 서재형 제목 ─────────────── */

.lg-head { margin-bottom: 18px; }

.lg-hero {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 5px 0 16px;
}
.lg-hero::before { content: ""; flex: 0 0 4px; width: 4px; height: 52px; margin-top: 3px; background: #365D8D; }

.lg-hero-tx { flex: 1 1 auto; min-width: 0; }

.lg-hero-tx h1 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 29px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -1px;
  color: #17243A;
}

.lg-hero-tx h1 .h1-ic-img, .lg-hero-art { display: none; }

/* '영재의 논리'는 일반 문장이 아니라 자료 서비스의 이름으로 보이게 한다. */
.lg-brand-name {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1em;
  font-weight: 800;
  letter-spacing: inherit;
}
.lg-brand-suffix { color: #6B778A; font-size: .54em; font-weight: 700; letter-spacing: -.4px; }

/* 사이드바에서도 같은 이름을 작은 브랜드 표식으로 유지한다. */
.side-item .logic-nav-label { display: inline-flex; align-items: center; flex: 1 1 auto; min-width: 0; gap: 7px; }
.side-item .logic-nav-label small { color: #778DA4; font-size: .73rem; font-weight: 600; white-space: nowrap; }
.side-item .logic-nav-label strong {
  display: inline-flex; align-items: center; padding: 3px 7px;
  border: 1px solid #BCCEE8; border-radius: 7px; background: #F5F8FD;
  color: #426995; font-size: .82rem; font-weight: 800; line-height: 1.2; white-space: nowrap;
}
.side-item.nav-tab.active .logic-nav-label small { color: #5C7695; }
.side-item.nav-tab.active .logic-nav-label strong { border-color: #96B6E0; background: #FFFFFF; color: #245B9C; }

/* 작은 하단 탭에서는 높이를 늘리지 않고 글자만 또렷하게 처리한다. */
.logic-tab-brand { color: #496A8A; font-weight: 800; letter-spacing: -.4px; }

.lg-who {
  margin: 0;
  color: var(--ink-500, #64748b);
  font-size: 14px;
}

/* 신청서·설명 — 제목 밑 작은 네모 단추 둘. 화면 아래에 큰 상자를 두면
   목록을 다 지나야 보여서, 처음 온 사람이 바로 누를 수 있게 위로 올렸다. */

.lg-notice { margin: 8px 0 0; color: #5B6779; font-size: 14px; line-height: 1.7; }
.lg-notice-sub { margin: 2px 0 0; color: #7B8797; font-size: 13px; line-height: 1.65; }
.lg-notice-em { color: #C83D48; font-style: normal; font-weight: 800; }

.lg-quick { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 15px; }

.lg-quick-b {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 15px;
  box-sizing: border-box;
  border: 1px solid #C9D6E1;
  border-radius: 9px;
  background: #FFFFFF;
  box-shadow: 0 2px 5px rgba(34, 60, 88, .08);
  color: #43566C;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.3px;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease;
}

.lg-quick-b svg { flex: 0 0 auto; width: 15px; height: 15px; }
.lg-quick-b .lg-insta-ic { width: 23px; height: 23px; }

/* 게시판 이름은 두 단추에 똑같이 붙는 말이라, 색을 갈라 놓아야
   '신청서'·'설명보기' 라는 할 일이 먼저 눈에 든다. */
.lg-quick-t { color: #365D8D; }
.lg-quick-action { color: #294E78; font-size: 14px; font-weight: 800; }

.lg-quick-b:hover { transform: translateY(-1px); border-color: #9DB4C8; background: #FBFCFD; color: #294E78; box-shadow: 0 5px 11px rgba(34, 60, 88, .12); }

/* 눌리는 순간 살짝 내려앉아, 눌렸다는 것이 손에 잡힌다 */
.lg-quick-b:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 3px rgba(34, 60, 88, .12);
  background: #F0F4F7;
}

/* 신청서가 이 자리에서 할 일이다. 글자색은 설명보기와 같게 두고
   테두리 색만 달리해 조용히 앞세운다. */
.lg-quick-key { border-color: #9FB8CD; }
.lg-quick-key:hover { border-color: #769AB9; background: #F6FAFD; }

/* ── 게시판 분류 + 학교 검색 ───────────────────── */

.lg-navrow { display: flex; flex-direction: row; align-items: flex-end; gap: 22px; padding: 0 0 10px; border-bottom: 1px solid #DCE3EB; }
.lg-school { order: 2; flex: 0 0 260px; width: auto; max-width: 100%; margin: 0; }

.lg-school-label {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: #66758A;
}
.lg-school-label small { color: #8A96A6; font-size: 11px; font-weight: 500; letter-spacing: -.2px; white-space: nowrap; }

/* 검색칸은 화면 폭을 다 먹지 않는다. 학교 이름은 짧아서 이만하면 충분하고,
   가로로 길게 늘어나면 그 아래 게시판 단추들과 무게가 뒤바뀐다. */
.lg-school-inputwrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
}

.lg-school-ic {
  position: absolute;
  left: auto;
  right: 12px;
  width: 16px;
  height: 16px;
  color: #718096;
  pointer-events: none;
}

.lg-school-inputwrap input {
  flex: 1 1 auto;
  width: 100%;
  height: 38px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14px;
  color: #253858;
  padding: 0 38px 0 13px;
  border: 1px solid #D7E0E9;
  border-radius: 7px;
  background: #FFFFFF;
  box-shadow: none;
}

.lg-school-inputwrap input::placeholder { color: #94A3B8; }
.lg-school-inputwrap input:focus { outline: none; border-color: #6D8EAF; }

/* 학교를 고른 뒤에만 나오는 되돌리기 단추. 검색칸 오른쪽에 붙는다. */
.lg-school-clear {
  position: absolute;
  left: calc(100% + 10px);
  flex: 0 0 auto;
  border: 1px solid #DCE5F2;
  background: #fff;
  color: #516583;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.lg-school-clear:hover { border-color: #BFCDE2; color: #1769FF; }

.lg-school-results {
  position: relative;
  width: 230px;
  max-width: 100%;
  margin-top: 6px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line, #e9eef6);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-sm, 0 6px 20px rgba(15, 23, 42, .08));
}

.lg-school-opt {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--line-soft, #f1f5f9);
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink-700, #334155);
  padding: 11px 14px;
  cursor: pointer;
}

.lg-school-opt:last-child { border-bottom: none; }
.lg-school-opt:hover { background: #eef2ff; color: var(--brand-500, #2563eb); }

.lg-school-empty {
  margin: 0;
  padding: 14px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-400, #94a3b8);
}

.lg-filter-note { margin: 6px 0 0; color: #7B8797; font-size: 11px; line-height: 1.4; }

/* ── 게시판 고르기: 자료실과 같은 밑줄 탭 ───────── */

.lg-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  order: 1;
  flex: 1 1 auto;
  gap: 2px;
  margin: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.lg-tab {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #718096;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.3px;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}

.lg-tab-ic { display: none; }
.lg-tab-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lg-tab:hover {
  border-color: #B5C6D8;
  box-shadow: none;
  background: transparent;
  color: #365D8D;
}

.lg-tab.is-on {
  background: transparent;
  border-color: #365D8D;
  color: #1E436D;
  box-shadow: none;
  transform: none;
}

.lg-tab.is-on .lg-tab-ic { color: #FFFFFF; }
.lg-tab.is-on::after { content: none; }

/* ── 자료 올리기·목록·글 보기 ──────────────────────
   자료실(올바른 자료(무료))과 같은 방식이라 표 목록(.board-*)과
   글 보기(.post-*) 모양은 styles.css 의 것을 그대로 쓴다.
   여기에는 이 게시판에만 있는 조각만 둔다. */

/* 이 화면의 목록만 하얀 카드 한 장으로 만든다. 다른 화면(검색결과·문의)이
   같이 쓰는 .board-* 규칙은 그대로 두고, 여기서 #view-logic 안에서만 덮어쓴다. */

#view-logic .board-outer {
  background: none;
  border-radius: 12px;
  box-shadow: none;
  overflow: visible;
}

#view-logic .board-inner {
  margin: 0;
  background: #FFFFFF;
  border: 1px solid #DDE5EC;
  border-radius: 12px;
  box-shadow: none;
  overflow: hidden;
}

#view-logic .board-tablehead {
  align-items: center;
  height: 44px;
  padding: 0 24px;
  font-size: 12px;
  font-weight: 700;
  color: #7B8797;
  background: #F7F9FB;
  border-bottom: 1px solid #E7ECF1;
}
#view-logic .board-inner.is-manage .board-tablehead,
#view-logic .board-inner.is-manage .board-row {
  grid-template-columns: 24px minmax(0, 1fr) 84px 96px 64px 70px;
}
#view-logic .lg-select-cell { display: none; align-items: center; justify-content: center; }
#view-logic .board-inner.is-manage .board-row .lg-select-cell { display: flex; }
#view-logic .board-tablehead .lg-select-cell { display: none; }
#view-logic .board-inner.is-manage .board-tablehead .lg-select-cell { display: flex; }
#view-logic .lg-select-cell input, #view-logic .lg-check-label input { width: 15px; height: 15px; margin: 0; accent-color: #365D8D; cursor: pointer; }
#view-logic .lg-bulkbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 10px 20px; border-top: 1px solid #E7ECF1; border-bottom: 1px solid #E7ECF1;
  background: #F8FAFC; color: #526174; font-size: 13px; font-weight: 700;
}
#view-logic .lg-check-label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#view-logic .lg-check-label { margin-right: auto; }
#view-logic .lg-bulk-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 30px; padding: 0 11px; border: 1px solid #9DB4C8; border-radius: 6px; background: #fff; color: #365D8D; font: inherit; font-size: 12px; font-weight: 800; line-height: 1; cursor: pointer; }
#view-logic .lg-bulk-btn:disabled { opacity: .45; cursor: default; }
#view-logic .lg-bulk-delete { border-color: #E6B8BE; color: #B34D58; }
.lg-bulk-picker { position: fixed; inset: 0; z-index: 3200; display: grid; place-items: center; padding: 20px; background: rgba(15, 23, 42, .42); }
.lg-bulk-picker-card { width: min(100%, 340px); display: grid; gap: 12px; padding: 18px; border: 1px solid #d5e0ea; border-radius: 8px; background: #fff; box-shadow: 0 18px 42px rgba(15, 23, 42, .2); color: #1f2937; }
.lg-bulk-picker-card strong { font-size: 15px; }
.lg-bulk-picker-select { width: 100%; height: 36px; padding: 0 10px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #1f2937; }
.lg-bulk-picker-actions { display: flex; justify-content: flex-end; gap: 8px; }
.lg-bulk-picker-actions button { display: inline-flex; align-items: center; justify-content: center; min-width: 62px; height: 34px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #334155; font-weight: 700; }
.lg-bulk-picker-actions [data-bulk-confirm] { border-color: #2563eb; background: #2563eb; color: #fff; }

#view-logic .board-list { border-top: none; min-height: 220px; }
#view-logic .board-item { border-bottom: 1px solid #E7ECF1; }

/* 글이 쌓여도 화면을 다 먹지 않도록 한 줄을 낮게 잡는다. */
#view-logic .board-row {
  min-height: 60px;
  padding: 8px 20px;
  align-items: center;
}

#view-logic .board-row:hover { background: #F7F9FB; }
#view-logic .board-row:hover .br-title { color: #2F5A86; }
#view-logic .board-item.open .board-row { background: #F3F6F9; }

#view-logic .br-main { gap: 10px; padding: 0 10px 0 0; }

#view-logic .br-fic {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 9px;
}

/* 제목과 설명은 한 덩어리로 붙여 읽는다. 사이를 벌리지 않는다. */
#view-logic .br-tt-line { gap: 7px; }
#view-logic .br-title { font-size: 14px; font-weight: 700; line-height: 1.24; color: #1E293B; }
#view-logic .br-desc {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
  color: #7B8797;
}

#view-logic .br-new {
  font-size: 10px;
  font-weight: 700;
  color: #52728F;
  background: #EDF3F8;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0;
}

#view-logic .br-cmt { font-size: 12.5px; font-weight: 700; color: #3E5B8C; }

/* 학교 이름표 */
#view-logic .br-cat {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 700;
  margin-left: 4px;
}

#view-logic .br-author,
#view-logic .br-date { font-size: 12px; font-weight: 500; color: #516583; }
#view-logic .br-views { font-size: 12px; font-weight: 700; color: #183052; }

/* 좋아요가 하나도 없으면 속을 비운 하트로 둔다 */
#view-logic .br-likes { gap: 5px; font-size: 12px; font-weight: 700; color: #183052; }
#view-logic .br-likes svg { width: 15px; height: 15px; fill: transparent; stroke: #294B7C; }
#view-logic .br-likes-on svg { fill: #F24F70; stroke: #F24F70; }

#view-logic .board-bottombar {
  margin-top: 0;
  padding: 12px 20px;
  border-top: 1px solid #E7ECF1;
}

#view-logic .board-count { font-size: 12px; font-weight: 600; color: #657895; }

/* 글쓰기 폼의 대상 학교 칸. 자료실 폼의 분류칸(#bdCategory)과 같은 모양 */
#lgWriteSchool {
  width: 100%; box-sizing: border-box;
  border: 1px solid #cbd5e1; border-radius: 10px;
  padding: 10px; font-size: 0.95rem; background: #fff;
}

/* 받을 수 없는 첨부파일. 없는 척 감추지 않고, 잠겨 있다는 것을 보여준다.
   누르면 소개·신청으로 이어지는 팝업(.lg-modal)이 뜬다. */
.post-file-locked {
  width: 100%;
  border: 1px dashed var(--line, #d8e0ec);
  background: var(--line-soft, #f1f5f9);
  color: var(--ink-500, #64748b);
  font-family: inherit;
  cursor: pointer;
  flex-wrap: wrap;
}

.post-file-locked:hover { background: #e9eef6; color: var(--ink-700, #334155); }
.post-file-locked .post-file-n { text-align: left; }
.post-file-why { font-size: 12.5px; font-weight: 600; color: #b45309; }

/* ── 신청서 폼의 입력칸 ─────────────────────────── */

.lg-field { display: block; margin-bottom: 13px; }

.lg-field > span {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-500, #64748b);
}

.lg-field input[type="text"],
.lg-field textarea,
.lg-field select {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  background: #fff;
}

.lg-field textarea { resize: vertical; line-height: 1.6; }

/* ── 소개 · 신청서로 넘어가는 상자 ───────────────
   게시판 아래에 있어 그냥 두면 지나치기 쉽다. 한 칸을 크게 띄우고
   글자도 키워, 처음 온 사람이 무엇을 눌러야 할지 바로 알게 한다. */

.lg-links-box {
  margin-top: 30px;
  padding: 26px 24px 24px;
  border: 1px solid var(--line, #e9eef6);
  border-radius: 22px;
  background: linear-gradient(180deg, #f8faff 0%, #fff 60%);
}

.lg-links-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--ink-900, #0f172a);
  letter-spacing: -.2px;
}

.lg-links-sub { margin: 8px 0 20px; font-size: 14px; color: var(--ink-500, #64748b); }

.lg-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.lg-link {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  text-align: left;
  padding: 24px 24px;
  border: 2px solid var(--line, #e9eef6);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, .06));
  cursor: pointer;
}

/* 눌리는 자리는 오른쪽 단추 하나뿐이다. 상자 전체가 파랗게 물들지 않도록
   공통 단추 색(button:hover)을 여기서 되돌린다. */
.lg-link:hover,
.lg-link:focus-visible {
  background: #fff;
  transform: none;
  filter: none;
}

/* 신청서는 이 자리에서 제일 중요한 단추다. 색으로 한눈에 갈라 놓는다. */
.lg-link-key { border-color: #bfdbfe; background: linear-gradient(180deg, #f5f9ff 0%, #fff 70%); }

.lg-link-key:hover,
.lg-link-key:focus-visible { background: linear-gradient(180deg, #f5f9ff 0%, #fff 70%); }
.lg-link-key .lg-link-ic { background: var(--brand-500, #2563eb); color: #fff; }

.lg-link-key .lg-link-go {
  background: var(--brand-500, #2563eb);
  color: #fff;
  border-color: var(--brand-500, #2563eb);
}

.lg-link-wide { margin-top: 20px; }

.lg-link-ic {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #eef2ff;
  font-size: 27px;
  color: var(--brand-500, #2563eb);
}

.lg-link-ic svg { width: 28px; height: 28px; }

.lg-link-tx { flex: 1 1 auto; min-width: 0; }

/* 낱말 가운데가 끊기면 읽기 어려우므로 띄어쓰기에서만 줄을 바꾼다. */
.lg-link-tx strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -.3px;
  color: var(--ink-900, #0f172a);
  word-break: keep-all;
}

.lg-link-tx small {
  display: block;
  margin-top: 7px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-500, #64748b);
  word-break: keep-all;
}

.lg-link-go {
  flex: 0 0 auto;
  padding: 10px 18px;
  border: 1.5px solid var(--brand-500, #2563eb);
  border-radius: 999px;
  color: var(--brand-500, #2563eb);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* 눌리는 자리가 어디인지 알려 준다. 마우스를 올리면 이 단추에만 색이 찬다. */
.lg-link:hover .lg-link-go,
.lg-link:focus-visible .lg-link-go {
  background: var(--brand-500, #2563eb);
  color: #fff;
}

.lg-link-key:hover .lg-link-go,
.lg-link-key:focus-visible .lg-link-go {
  background: var(--brand-700, #12376f);
  border-color: var(--brand-700, #12376f);
}

/* ── 하위 페이지 공통 ──────────────────────────── */

.lg-back {
  margin-bottom: 14px;
  padding: 8px 14px;
  border: 1px solid var(--line, #e9eef6);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-500, #64748b);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.lg-back:hover { color: var(--brand-500, #2563eb); border-color: #c7d2fe; }

/* ── 소개 ──────────────────────────────────────── */

.lg-intro-video { padding: 18px; }

.lg-video { position: relative; padding-top: 56.25%; border-radius: 14px; overflow: hidden; }
.lg-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.lg-video-empty {
  margin: 0;
  padding: 60px 20px;
  text-align: center;
  color: var(--ink-400, #94a3b8);
  font-size: 14px;
  background: var(--line-soft, #f1f5f9);
  border-radius: 14px;
}

.lg-intro-body h2 { margin: 0 0 14px; font-size: 18px; }
.lg-intro-body ul { margin: 0; padding-left: 20px; color: var(--ink-700, #334155); font-size: 14.5px; line-height: 1.9; }
.lg-intro-more { margin: 18px 0 0; font-size: 14px; color: var(--ink-500, #64748b); }

/* ── 신청서 ────────────────────────────────────── */

.lg-form { padding: 26px 24px; }

.lg-q {
  margin: 0 0 26px;
  padding: 0 0 22px;
  border: 0;
  border-bottom: 1px solid var(--line-soft, #f1f5f9);
}

.lg-q:last-of-type { border-bottom: 0; padding-bottom: 6px; }

.lg-q legend,
.lg-field > span {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900, #0f172a);
}

.lg-q legend b, .lg-field > span b { color: #dc2626; font-weight: 700; }

.lg-q-note {
  margin: -4px 0 12px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-500, #64748b);
}

.lg-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 8px;
  padding: 11px 14px;
  border: 1px solid var(--line, #e9eef6);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-700, #334155);
  line-height: 1.6;
  cursor: pointer;
}

.lg-opt:hover { border-color: #c7d2fe; background: #fbfcff; }
.lg-opt input { margin: 3px 0 0; flex: 0 0 auto; }
.lg-opt span { flex: 1 1 auto; }

/* 학년처럼 답이 짧은 것은 한 줄에 늘어놓는다. */
.lg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lg-chips .lg-chip { margin: 0; }

.lg-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border: 1px solid var(--line, #e9eef6);
  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;
}

.lg-chip:hover { border-color: #c7d2fe; }

.lg-other { margin-top: 4px; width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 14px; }

.lg-q-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.lg-form .lg-field { display: block; }

.lg-form .lg-field input[type="text"],
.lg-form .lg-field input[type="tel"],
.lg-form .lg-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 14px;
  background: #fff;
}

.lg-q-warn { background: #fffbeb; border: 1px solid #fde68a; border-radius: 14px; padding: 18px; }
.lg-warn-red { color: #dc2626; font-weight: 800; font-size: 14px; }
.lg-q-warn legend { padding: 0 6px; }
.lg-q-warn .lg-opt { background: #fff; }

.lg-form-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.lg-form-note { color: #b45309; font-size: 13px; }
.lg-form-foot button { padding: 12px 30px; font-size: 15px; font-weight: 700; }

.lg-done { text-align: center; padding: 44px 24px; }
.lg-done h2 { margin: 0 0 12px; font-size: 20px; }
.lg-done p { margin: 0 0 22px; color: var(--ink-500, #64748b); font-size: 14.5px; line-height: 1.8; }

/* ── 받을 수 없는 자료를 눌렀을 때 뜨는 팝업 ──────
   수강생 전용 안내와 신청서·소개 길을 알려준다. */

.lg-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, .45);
}

.lg-modal[hidden] { display: none; }

.lg-modal-box {
  position: relative;
  width: min(400px, 100%);
  padding: 34px 26px 26px;
  border-radius: 20px;
  background: #fff;
  text-align: center;
  box-shadow: 0 20px 56px rgba(15, 23, 42, .2);
}

.lg-modal-x {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px;
  border: 1px solid var(--line, #e2e8f0); border-radius: 50%;
  background: #fff; color: var(--ink-500, #64748b);
  font-size: 14px; cursor: pointer;
  padding: 0;
}

.lg-modal-x:hover { background: #f1f5f9; color: var(--ink-700, #334155); }

.lg-modal-ic { display: block; font-size: 32px; margin-bottom: 10px; }

.lg-modal-title { margin: 0 0 10px; font-size: 17px; font-weight: 800; color: var(--ink-900, #0f172a); }

.lg-modal-desc {
  margin: 0 0 22px;
  color: var(--ink-500, #64748b);
  font-size: 13.5px;
  line-height: 1.7;
}

.lg-modal-actions { display: flex; flex-direction: column; gap: 10px; }

.lg-modal-btn {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 13px 16px;
  border: 1px solid var(--line, #e9eef6);
  border-radius: 12px;
  background: #fff;
  color: var(--ink-700, #334155);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* 핵심 브랜드명 뱃지. 단추 안에서 이름이 먼저 또렷하게 읽히게 한다. */
.lg-modal-brand {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 9px;
  background: #eef2ff;
  border: 1px solid #dbe4ff;
  color: var(--brand-500, #2563eb);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* 파란 단추 위에서는 반투명 흰 뱃지로 — 파랑 위 파랑이 되지 않게 */
.lg-modal-btn-key .lg-modal-brand {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}

/* 전역 button:hover 가 파란 배경을 입히므로 흰 배경을 그대로 못박는다.
   안 그러면 파란 글자와 겹쳐 글씨가 안 보인다. */
.lg-modal-btn:hover { background: #fff; border-color: #c7d2fe; color: var(--brand-500, #2563eb); }

.lg-modal-btn-key {
  background: var(--brand-500, #2563eb);
  border-color: var(--brand-500, #2563eb);
  color: #fff;
}

.lg-modal-btn-key:hover { background: var(--brand-700, #12376f); border-color: var(--brand-700, #12376f); color: #fff; }

/* 이미 수강생인 사람을 위한 로그인 안내줄. 단추보다 낮게, 글 링크처럼 보인다. */
.lg-modal-sub {
  margin-top: 14px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink-500, #64748b);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.lg-modal-sub:hover { background: none; color: var(--brand-500, #2563eb); }
.lg-modal-sub[hidden] { display: none; }

/* ── 미리보기 설정 (올리기 폼 · PDF일 때만 보임) ────────────── */

.lg-pvset {
  margin: -4px 0 13px;
  padding: 12px 14px;
  border: 1.5px dashed #c7d2fe;
  border-radius: 12px;
  background: #f4f7ff;
}

.lg-pv-on {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--brand-500, #2563eb);
  cursor: pointer;
}

.lg-pv-on input { width: 16px; height: 16px; accent-color: var(--brand-500, #2563eb); }

/* '미리보기 열기' 부터 페이지 칸까지 한 줄에 둔다 */
.lg-pv-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }

.lg-pv-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-700, #334155);
  white-space: nowrap;
}

/* display:flex 가 hidden 속성을 이겨버려, 켜기 전에도 페이지 칸이 보이던 문제 */
.lg-pv-row[hidden] { display: none; }

/* '1~3' 정도만 적는 칸이라 크게 둘 까닭이 없다 */
.lg-pv-row input {
  width: 62px;
  box-sizing: border-box;
  text-align: center;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--brand-500, #2563eb);
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  padding: 6px 6px;
  background: #fff;
}

.lg-pv-hint { margin: 9px 0 0; font-size: 12px; color: var(--ink-400, #94a3b8); line-height: 1.6; }

/* ── 미리보기 뷰어 — 어두운 바탕 가운데에 뜨는 작은 상자 ──────
   화면을 다 덮으면 자료를 다 주는 것처럼 보인다. 뒤 화면이 비치게 두고
   바탕(상자 바깥)을 누르면 닫히게 한다. */

.lg-pv-lock { overflow: hidden; }

.lg-pv {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(9, 17, 33, .62);
}

/* display:flex 가 hidden 속성(UA 규칙)을 이겨버리므로 직접 닫아준다.
   이게 없으면 뷰어가 닫혀 있어도 화면 전체를 덮는다. */
.lg-pv[hidden] { display: none; }

.lg-pv-box {
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: min(78vh, 760px);
  border-radius: 16px;
  overflow: hidden;
  background: #0b1220;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}

.lg-pv-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  flex-wrap: wrap;
}

.lg-pv-grp { display: flex; align-items: center; gap: 7px; }

.lg-pv-b {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: none;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.lg-pv-cnt {
  margin-left: 6px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lg-pv-note {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  background: #dbeafe;
  color: #1e3a8a;
  padding: 9px 12px;
  font-size: 12.5px;
  line-height: 1.45;
}
.lg-pv-note[hidden] { display: none; }
.lg-pv-apply[hidden] { display: none; }

.lg-pv-ck {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1d4ed8;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
}

.lg-pv-apply {
  margin-left: auto;
  border: none;
  border-radius: 8px;
  background: #1d4ed8;
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
}

/* 마지막 쪽에서 더 넘기려 할 때 안내줄로 시선을 보낸다 */
.lg-pv-note-flash { animation: lgPvFlash .45s ease 2; }
@keyframes lgPvFlash { 50% { background: #93c5fd; } }
@media (prefers-reduced-motion: reduce) {
  .lg-pv-note-flash { animation: none; }
}

.lg-pv-stage {
  flex: 1 1 auto;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 14px 12px;
  cursor: zoom-out;
}

.lg-pv-img {
  display: block;
  width: min(100%, 520px);
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
  cursor: pointer;
}

.lg-pv-hintbar {
  margin: 0;
  padding: 8px 12px 10px;
  text-align: center;
  color: #7c8aa3;
  font-size: 11.5px;
}


/* ===== 좁은 화면 — 파일 끝에 두어 위 규칙을 확실히 덮어쓴다 ===== */

/* 이 앱의 본문(.app-body)은 640px 아래에서만 폭이 줄어든다(styles.css).
   그 위에서는 늘 1060px 이므로 중간 분기를 두면 오히려 어긋난다. */
@media (max-width: 640px) {
  .lg-hero-art { display: none; }
  .lg-quick-b { font-size: 12.5px; padding: 0 12px; }

  .lg-hero-tx h1 { font-size: 23px; gap: 9px; }
  .lg-hero-tx h1 .h1-ic-img { height: 28px; }
  .lg-brand-name { min-height: 29px; padding: 0 9px; border-radius: 8px; }
  .lg-notice { font-size: 14px; }
  .lg-notice-sub { font-size: 13px; }

  .lg-school-inputwrap { width: 100%; }
  /* 되돌리기 단추는 옆에 붙일 자리가 없다. 검색칸 아래로 내린다. */
  .lg-school-clear { position: static; left: auto; width: 100%; margin-top: 8px; }
  .lg-school-results { width: 100%; }

  .lg-tabs { gap: 5px; margin: 24px 0 0; }
  .lg-tab { height: 40px; padding: 0 10px; gap: 6px; font-size: 11.5px; }
  .lg-tab-ic { width: 16px; height: 16px; }

  /* 목록: 공통 규칙(styles.css)이 좁은 화면에서 줄이는 만큼 여기서도 같이 줄인다 */
  #view-logic .board-tablehead { height: 46px; padding: 0 14px; }
  #view-logic .board-row { min-height: 56px; padding: 8px 12px; }
  #view-logic .board-inner.is-manage .board-tablehead,
  #view-logic .board-inner.is-manage .board-row { grid-template-columns: 20px minmax(0, 1fr) 56px 64px; }
  #view-logic .br-main { gap: 9px; }
  #view-logic .br-fic { width: 32px; height: 34px; }
  #view-logic .br-title { font-size: 13px; }
  #view-logic .board-bottombar { padding: 10px 12px; }
  #view-logic .lg-bulkbar { align-items: flex-start; padding: 10px 12px; }
  #view-logic .lg-check-label { margin-right: 0; }

  /* '처음 오셨나요?' 카드: 아이콘|글|단추 가로 배치가 좁아져 글자가
     세로로 쪼개지던 문제. 글은 아이콘 옆에 온전한 폭으로 두고,
     '보러 가기' 단추는 아래 줄 전체 폭으로 내린다. */
  .lg-link { flex-wrap: wrap; gap: 12px 14px; padding: 18px 16px; }
  .lg-link-ic { width: 48px; height: 48px; font-size: 22px; border-radius: 14px; }
  .lg-link-tx { flex: 1 1 calc(100% - 62px); }
  .lg-link-tx strong { font-size: 16px; }
  .lg-link-tx small { font-size: 12.5px; }
  .lg-link-go { flex: 1 1 100%; text-align: center; }

  /* 미리보기 뷰어: 좁은 화면에서는 조작 안내를 줄이고 단추를 화면에 맞춘다 */
  .lg-pv-b { min-width: 32px; height: 32px; padding: 0 10px; font-size: 13px; }
  .lg-pv-hintbar { font-size: 11.5px; }
  .lg-pv-stage { padding: 14px 10px; }
}

/* 자료받기 제목 아래 안내 — 누구를 위한 게시판인지 분명히 밝힌다.
   띠를 두르지 않고 왼쪽에 얇은 남색 선만 세워, 제목 바로 아래 글줄로 읽히게 한다. */
.lg-notice {
  margin: 22px 0 0;
  padding: 0 0 0 11px;
  border-left: 3px solid #123B7A;
  font-size: 15px; font-weight: 600; color: #1C3155; line-height: 1.6;
  background: none; border-radius: 0;
}
.lg-notice .lg-notice-em { color: #F04438; font-weight: 700; font-style: normal; }   /* 누구를 위한 곳인지 — 이 구절만 빨갛게 */

.lg-notice-sub { margin: 8px 0 0; font-size: 14px; font-weight: 400; color: #445979; line-height: 1.6; }

/* 자료실과 같은 차분한 안내문으로 마지막에 맞춘다. */
.lg-notice { margin: 8px 0 0; padding: 0; border: 0; font-size: 14px; font-weight: 400; color: #5B6779; line-height: 1.7; }
.lg-notice .lg-notice-em { color: #365D8D; font-weight: 700; font-style: normal; }
.lg-notice-sub { margin: 2px 0 0; font-size: 13px; color: #7B8797; line-height: 1.65; }

@media (max-width: 640px) {
  .lg-head { margin-bottom: 16px; }
  .lg-hero { gap: 11px; padding: 4px 0 16px; }
  .lg-hero::before { flex-basis: 3px; width: 3px; height: 43px; }
  .lg-hero-tx h1 { font-size: 22px; }
  .lg-brand-name { min-height: 0; padding: 0; border-radius: 0; }
  .lg-navrow { flex-wrap: wrap; gap: 10px; padding-bottom: 9px; }
  .lg-tabs { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 0; scrollbar-width: none; }
  .lg-tabs::-webkit-scrollbar { display: none; }
  .lg-tab { height: 36px; padding: 0 12px; gap: 0; }
  .lg-school { flex: 1 1 100%; }
}

/* ── 학교·학년 대상 공간 ─────────────────────────────────────── */

.lg-grade { order: 3; flex: 0 0 142px; width: 142px; }

.lg-grade select,
#lgWriteGrade {
  width: 100%;
  height: 38px;
  box-sizing: border-box;
  padding: 0 11px;
  border: 1px solid #D7E0E9;
  border-radius: 7px;
  background: #FFFFFF;
  color: #253858;
  font-family: inherit;
  font-size: 14px;
}

.lg-grade select:focus,
#lgWriteGrade:focus { outline: none; border-color: #6D8EAF; }
.lg-grade select:disabled,
#lgWriteGrade:disabled { color: #94A0B3; background: #F7F9FC; cursor: not-allowed; }

/* 글쓰기에서 여러 학교를 체크해도 폼의 리듬이 흐트러지지 않게 한다. */
#lgWriteGrade { margin-bottom: 2px; }
.lg-write-school-picker {
  display: grid;
  gap: 9px;
  margin: 0 0 2px;
  padding: 11px 12px;
  border: 1px solid #D7E0E9;
  border-radius: 8px;
  background: #F9FBFE;
}
.lg-write-school-all,
.lg-write-school-choice {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #253858;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.lg-write-school-all input,
.lg-write-school-choice input { width: 15px; height: 15px; margin: 0; accent-color: #4F72F2; }
.lg-write-school-choices { display: flex; flex-wrap: wrap; gap: 7px 14px; padding-top: 9px; border-top: 1px solid #E7EDF5; }
.lg-write-school-choice { font-weight: 600; color: #526278; }
.lg-write-school-hint { margin: 0; color: #7B899D; font-size: 12px; line-height: 1.35; }

/* 운영자가 여는 대상 설정. 자료 목록을 가리지 않도록 필요할 때만 작은 창으로 띄운다. */
.lg-audience-manager {
  position: fixed;
  inset: 0;
  z-index: 3200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(23, 35, 60, .38);
}

.lg-audience-manager-card {
  position: relative;
  width: min(690px, 100%);
  max-height: min(82vh, 760px);
  overflow: auto;
  box-sizing: border-box;
  padding: 28px;
  border: 1px solid #E4EAF3;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 20px 54px rgba(20, 40, 80, .18);
  color: #17233C;
}

.lg-audience-manager-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: 1px solid #E4EAF3;
  border-radius: 50%;
  background: #FFFFFF;
  color: #65738A;
  font: inherit;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.lg-audience-manager-x:hover { border-color: #B8C6DA; color: #17233C; background: #F7F9FC; }

.lg-audience-manager-head { padding-right: 34px; }
.lg-audience-manager-head p { margin: 0 0 5px; color: #4F72F2; font-size: 12px; font-weight: 800; }
.lg-audience-manager-head h3 { margin: 0; font-size: 20px; letter-spacing: -.4px; }
.lg-audience-manager-head span { display: block; margin-top: 7px; color: #65738A; font-size: 13px; line-height: 1.55; }

.lg-audience-manager-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.lg-audience-create-school,
.lg-audience-create-target {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid #E4EAF3;
  border-radius: 12px;
  background: #F7F9FC;
}

.lg-audience-manager h4 { margin: 0; font-size: 14px; }
.lg-audience-manager label { display: grid; gap: 6px; color: #65738A; font-size: 12px; font-weight: 700; }
.lg-audience-manager input,
.lg-audience-manager select {
  width: 100%;
  height: 36px;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid #D7E0E9;
  border-radius: 8px;
  background: #FFFFFF;
  color: #17233C;
  font: inherit;
  font-size: 13px;
}

.lg-audience-manager input:focus,
.lg-audience-manager select:focus { outline: none; border-color: #4F72F2; }
.lg-audience-manager form button,
.lg-audience-row button {
  min-height: 34px;
  border: 1px solid #4F72F2;
  border-radius: 8px;
  background: #4F72F2;
  color: #FFFFFF;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.lg-audience-manager form button:disabled,
.lg-audience-row button:disabled { opacity: .5; cursor: wait; }

.lg-audience-list { margin-top: 20px; border-top: 1px solid #E4EAF3; padding-top: 18px; }
.lg-audience-list > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lg-audience-list > div span { color: #94A0B3; font-size: 12px; font-weight: 700; }
.lg-audience-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #EEF1F6;
}

.lg-audience-row strong { display: block; font-size: 13px; }
.lg-audience-row small { display: block; margin-top: 3px; color: #159A68; font-size: 12px; }
.lg-audience-row button { flex: 0 0 auto; min-width: 64px; border-color: #D7E0E9; background: #FFFFFF; color: #4F72F2; }
.lg-audience-row.is-off strong { color: #65738A; text-decoration: line-through; }
.lg-audience-row.is-off small { color: #94A0B3; }
.lg-audience-row.is-off button { border-color: #4F72F2; background: #4F72F2; color: #FFFFFF; }
.lg-audience-empty { margin: 14px 0 0; color: #94A0B3; font-size: 13px; }

@media (max-width: 640px) {
  .lg-grade { flex: 1 1 100%; width: auto; }
  .lg-audience-manager { align-items: end; padding: 0; }
  .lg-audience-manager-card { width: 100%; max-height: 88vh; border-radius: 18px 18px 0 0; padding: 24px 18px; }
  .lg-audience-manager-grid { grid-template-columns: 1fr; }
}