@charset "utf-8";

/* ==============================================================
   닥터노트 (drnote) 보드 — 서브페이지 레이아웃 기반 매거진 스타일
   각 글 = 가로형 카드 (좌 비주얼 + 우 패널, 서브페이지 컨셉)
   ============================================================== */

.subcon { position: relative; padding: 0; min-height: 100vh; background: #fff; color: #121212; }
.subcon .inner { max-width: 1400px; margin: 0 auto; padding: 140px 32px 120px; }
/* drnote 리스트 페이지: 풀-너비 그리드 — 화면 최상단부터 시작 (메인 Griglia 와 동일하게 inset:0)
   PC 에서는 헤더(top:24px right:30px 26vw 박스)가 우상단을 덮으므로 그리드 자체는 viewport 전체 차지. 모바일은 헤더 아래부터 */
.subcon--drnote-list .inner { max-width: none; padding: 0; }

/* 뒤로가기 버튼 — drnote 에선 .subcon 밖에 위치 + fixed 로 좌상단 고정 (스크롤 시에도 유지)
   .subcon에 transform 애니메이션이 있어서 안에 두면 fixed 의 containing block 이 .subcon 으로 변함 → 밖으로 분리 */
.subpage-back.drnote-back {
  position: fixed !important;
  top: 30px !important;
  left: 30px !important;
  z-index: 50;
}

/* drnote → sub (SPA 인젝트) → 패널 오픈 시 drnote-back 도 함께 숨김
   (main → sub → panel 동선과 동일 동작 — 인젝트된 .subpage-back 은 .is-overlay 로 이미 숨겨지지만 drnote-back 은 layout 밖이라 별도 처리) */
body.spa-overlay-active:has(.subpage-layout.is-overlay) .subpage-back.drnote-back {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 글 상세 페이지 — 뒤로가기 버튼 아래부터 콘텐츠 시작 + 모바일 좌우 padding 보강 */
.subcon--view .inner { padding-top: 180px; padding-bottom: 100px; }
@media (max-width: 1024px) {
  .subcon--view .inner { padding-top: 160px; padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 768px) {
  .subcon--view .inner { padding-top: 170px; padding-left: 20px; padding-right: 20px; padding-bottom: 64px; }
}

/* SPA 진입 트랜지션 — 글 상세(.subcon--view)만 슬라이드+페이드. 리스트는 메인 g-grid 와 동일하게 entry transition 없이 즉시 표시 + 라인 cascade */
body:not(.is-leaving-page) .subcon:not(.subcon--drnote-list) {
  animation: drnote-enter .65s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes drnote-enter {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* 떠날 때 (head_new.php의 is-leaving-page 클래스) */
body.is-leaving-page .subcon {
  transition: opacity .28s ease, transform .28s ease;
  opacity: 0;
  transform: translateX(-30px);
}

#bo_gall { position: relative; }

/* === 카테고리 nav === */
#bo_cate { margin: 0 0 40px; }
#bo_cate ul { display: flex; flex-wrap: wrap; gap: 0; list-style: none; padding: 0; margin: 0; }
#bo_cate ul li { margin-right: 28px; }
#bo_cate ul li a { display: inline-block; padding: 8px 0; font-size: 14px; font-weight: 700; color: #999; letter-spacing: -0.01em; text-decoration: none; transition: color .2s ease; position: relative; }
#bo_cate ul li a::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #121212; transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1); }
#bo_cate ul li a:hover { color: #121212; }
#bo_cate ul li a:hover::before { transform: scaleX(1); }
#bo_cate ul li #bo_cate_on { color: #121212; }
#bo_cate ul li #bo_cate_on::before { transform: scaleX(1); }
#bo_cate ul li a .under { display: none; }

/* === 관리자 버튼 === */
#btn_bo_user { margin: 0 0 32px; }
#btn_bo_user ul { display: flex; gap: 6px; justify-content: flex-end; list-style: none; padding: 0; margin: 0; }
#btn_bo_user ul > li > * { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; font-size: 13px; font-weight: 600; color: #121212; background: #fff; border: 1px solid #121212; cursor: pointer; transition: background .2s ease, color .2s ease; text-decoration: none; }
#btn_bo_user ul > li > *:hover { background: #121212; color: #fff; }

/* === 체크박스 === */
.chk_box input[type="checkbox"] { display: none; }
.chk_box label { cursor: pointer; font-size: 13px; color: #666; display: inline-flex; align-items: center; gap: 8px; line-height: 1; }
.chk_box label span { width: 18px; height: 18px; border: 1px solid #121212; background: #fff; display: inline-block; }
.chk_box input[type="checkbox"]:checked + label span { background: #121212; }
#gall_allchk { margin: 0 0 16px; }

/* ==============================================================
   글 목록 — 메인 main-kor.php 의 .g-grid 와 1:1 동일 DOM/CSS 구조
   <section.g-grid.drnote-grid > div.g-grid__inner > a.g-grid__card | span.g-grid__card--empty | span.g-grid__edge--right>
   라인 트리거: body.drnote-grid-ready 클래스 (메인은 body[data-flow-mode="griglia"])
   ============================================================== */
.g-grid.drnote-grid { position: relative; margin: 0; }
.g-grid__inner {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 0;
  width: 100%; margin: 0;
  --final-col-delay: 0.48s;   /* cols × 0.12s — 우측 외곽선 시작 (메인 g-grid 와 동일) */
}
@media (max-width: 1024px) {
  .g-grid__inner { grid-template-columns: repeat(2, 1fr); --final-col-delay: 0.24s; }
  /* PHP 는 PC 4-grid 기준 placeholder 채움 → 모바일 2-grid 에선 col=2/3 placeholder 가 둘째 줄을 만들어 빈 row 가 생김. 숨겨서 1줄 2개 유지 */
  .g-grid__inner > .g-grid__card--empty[style*="--col:2"],
  .g-grid__inner > .g-grid__card--empty[style*="--col:3"] { display: none; }
}

/* 셀 — 메인 .g-grid__card 와 동일 패턴 */
.g-grid__card {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  aspect-ratio: 1 / 1;
  padding: 18px;
  overflow: hidden;
  box-sizing: border-box;
  isolation: isolate;
  text-decoration: none; color: #121212;
  --col-delay: calc(var(--col, 0) * 0.12s);
  --row-delay: calc(var(--row, 0) * 0.12s + 0.2s);
}
.g-grid__card--empty { background: #fff; }

/* === drnote / event / fi_note 사용 모든 게시판 보더 완전 제거 (클라이언트 요청) === */
.g-grid__card::before,
.g-grid__card::after,
.g-grid__card--empty::before,
.g-grid__card--empty::after,
.g-grid__edge { display: none !important; content: none !important; }

/* admin 체크박스 — a 안 absolute */
.g-grid__card-chk { position: absolute; top: 12px; right: 12px; z-index: 5; }

/* 이미지 영역 — 메인 .g-grid__card-img-wrap 와 동일 (drnote 만 max-width 로 contain 비율 조정) */
.g-grid__card-img-wrap {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .55s ease;
}
body.drnote-grid-ready .g-grid__card-img-wrap { opacity: 1; transition-delay: var(--col-delay); }
.g-grid__card-img-wrap img {
  display: block;
  max-width: 60%; max-height: 60%;
  width: auto; height: auto;
  object-fit: contain;
  transition: transform .4s ease;
}
.g-grid__card:hover .g-grid__card-img-wrap img { transform: scale(1.05); }
.g-grid__card-img-wrap img[src*="bo_noimg"] { max-width: 38%; max-height: 38%; opacity: 0.4; }

/* drnote + event 공통: 이미지가 카드(네모 블럭) 안에 가득 차게. 카드 padding 0, 이미지 절대 채움 */
/* .drnote-grid 셀렉터는 drnote 단독 + event(둘 다 가짐) 양쪽 매치 */
.g-grid.drnote-grid .g-grid__card { padding: 0; overflow: hidden; }
.g-grid.drnote-grid .g-grid__card-img-wrap {
  position: absolute; inset: 0;
  padding: 0; margin: 0;
  display: block;
  width: 100%; height: 100%;
}
.g-grid.drnote-grid .g-grid__card-img-wrap img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  object-fit: contain;
}
.g-grid.drnote-grid .g-grid__card-img-wrap img[src*="bo_noimg"] {
  width: 38%; height: 38%;
  max-width: none; max-height: none;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  opacity: 0.4; object-fit: contain;
}
/* 카드 텍스트는 카드 안에서 hide (제목은 hover-card 로 cursor 옆에 표시) */
.g-grid.drnote-grid .g-grid__card-text { display: none; }

/* === event 전용 hover-card (메인 main-kor.php 의 그것과 동일 스타일) === */
/* 기본: .active 클래스 없으면 무조건 hidden (어떤 leftover state 도 무효화) */
#hover-card.hover-card-event:not(.active) { display: none !important; }
/* 터치 디바이스 (모바일 전체) — hover-card 자체 봉인. JS state / bfcache / 어떤 잔존도 무시 */
@media (hover: none), (pointer: coarse), (max-width: 1024px) {
  #hover-card.hover-card-event { display: none !important; }
}
#hover-card.hover-card-event {
  /* 테마 default.css 의 .hover-card 오버라이드 */
  border: 0 !important;
  background: transparent !important;
  visibility: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  overflow: visible !important;
  max-width: none !important;
  /* 레이아웃 */
  position: fixed; pointer-events: none; z-index: 2147483647;   /* int32 max — 어떤 element 보다 위 */
  display: inline-flex; flex-direction: column;
  align-items: flex-start;
  opacity: 0;
  transition: opacity .12s ease;
}
#hover-card.hover-card-event::before,
#hover-card.hover-card-event::after { content: none !important; display: none !important; background: none !important; }
#hover-card.hover-card-event.active { opacity: 1; }
#hover-card.hover-card-event[data-side="left"] { align-items: flex-end; }
#hover-card.hover-card-event .hover-card__title {
  overflow: hidden; line-height: 1; display: block; background: transparent;
  border: 0; width: max-content; flex-shrink: 0;
}
#hover-card.hover-card-event .card-title {
  display: block; margin: 0;
  background: #fff;
  border: 1px solid #121212;
  font-weight: 700; color: #121212; letter-spacing: -0.01em; line-height: 1;
  white-space: nowrap;
  padding: 14px 18px; font-size: 22px;
  transform: translateY(110%);
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}
#hover-card.hover-card-event.active .card-title { transform: translateY(0); }

.g-grid__card-img-wrap .is_notice {
  position: absolute; left: 0; top: 0; z-index: 3;
  padding: 4px 10px;
  background: #121212; color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
}

/* 텍스트 영역 — drnote 만의 추가 (메인 g-grid 는 hover-card 로 표시) */
.g-grid__card-text {
  position: relative; z-index: 3;
  flex-shrink: 0;
  padding: 14px 0 0;
  color: #121212;
  opacity: 0;
  transition: opacity .55s ease;
}
body.drnote-grid-ready .g-grid__card-text { opacity: 1; transition-delay: var(--col-delay); }
.g-grid__card-text h3 {
  margin: 0 0 6px;
  font-size: 14px; font-weight: 700; color: #121212;
  line-height: 1.3; letter-spacing: -0.01em; word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.g-grid__card-text .cont {
  margin: 0;
  font-size: 12px; font-weight: 400; color: #888;
  line-height: 1.45; letter-spacing: -0.005em; word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 빈 상태 — 헤더 아래부터 viewport 끝까지 영역 잡고 메시지는 가운데 정렬
   (게시물 있을 때의 풀-그리드 영역과 동일한 위치) */
.li_empty {
  position: fixed;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #999;
  font-size: 16px;
  background: #fff;
  z-index: 1;
}
@media (max-width: 768px) {
  .li_empty { top: 88px; font-size: 14px; }
}

/* ==============================================================
   페이지네이션 — 모던 미니멀
   ============================================================== */
.pg_wrap {
  display: flex; justify-content: center;
  margin: 80px 0 0; padding: 32px 0 0;
  border-top: 1px solid #ededed;
  flex-wrap: wrap;
}
.pg {
  display: inline-flex;
  gap: 6px;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}

/* 공통 스타일 */
.pg_page, .pg_current,
.pg .pg_start, .pg .pg_prev, .pg .pg_next, .pg .pg_end {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 56px; height: 56px;
  padding: 0 18px;
  font-size: 15px; font-weight: 600;
  color: #121212;
  background: transparent;
  border: 0;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background .25s ease, color .25s ease, transform .25s ease;
  position: relative;
  cursor: pointer;
}

/* 호버: 배경 살짝 회색 + 살짝 위로 */
.pg_page:hover { background: #f4f4f4; }

/* 현재 페이지: 굵은 underline 으로 강조 */
.pg_current {
  color: #121212;
  background: transparent;
  font-weight: 800;
  pointer-events: none;
}
.pg_current::after {
  content: ""; position: absolute;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  width: 24px; height: 2px;
  background: #121212;
}

/* 화살표 스타일 (Prev/Next/Start/End) */
.pg .pg_start, .pg .pg_prev,
.pg .pg_next, .pg .pg_end {
  font-size: 18px; font-weight: 500;
  color: #999;
}
.pg .pg_start:hover, .pg .pg_prev:hover,
.pg .pg_next:hover, .pg .pg_end:hover {
  color: #121212; background: #f4f4f4;
}

/* 모바일 */
@media (max-width: 768px) {
  .pg_wrap { margin-top: 48px; padding-top: 24px; }
  .pg { gap: 2px; }
  .pg_page, .pg_current,
  .pg .pg_start, .pg .pg_prev, .pg .pg_next, .pg .pg_end {
    min-width: 44px; height: 44px;
    padding: 0 12px;
    font-size: 14px;
  }
  .pg_current::after { bottom: 10px; width: 20px; }
}

/* ==============================================================
   검색
   ============================================================== */
.bo_sch_wrap { display: flex; justify-content: center; margin: 32px 0 0; }
#bo_sch, .bo_sch { display: inline-flex; gap: 0; }
#bo_sch select, #bo_sch input[type="text"], #bo_sch button {
  height: 44px; padding: 0 14px;
  font-size: 14px; border: 1px solid #121212;
  background: #fff; color: #121212; box-sizing: border-box;
}
#bo_sch select { border-right: 0; cursor: pointer; }
#bo_sch input[type="text"] { border-right: 0; min-width: 240px; }
#bo_sch input[type="text"]:focus { outline: none; }
#bo_sch button {
  background: #121212; color: #fff;
  cursor: pointer; padding: 0 24px;
  font-weight: 700; transition: opacity .2s ease;
  letter-spacing: 0.02em;
}
#bo_sch button:hover { opacity: 0.85; }

/* ==============================================================
   글 보기 (view) — 서브페이지 컨셉: 풀-너비 헤로 + 본문
   실제 프로덕션 마크업: #bo_v > .bo_v_tit > h3, .bo_v_con > p
   ============================================================== */
#bo_v { padding: 0; max-width: 920px; margin: 0 auto; }

.bo_v_tit {
  padding: 0 0 40px; margin: 0 0 56px;
  border-bottom: 1px solid #121212;
  position: relative;
}
/* hero가 바로 뒤에 오면 .bo_v_tit 의 하단 여백 제거 (hero가 자체 margin-bottom 가짐) */
.bo_v_tit:has(+ .bo_v_hero) { margin-bottom: 56px; }
.bo_v_subtit {
  margin: 18px 0 0;
  font-size: 18px; font-weight: 500; color: #666;
  letter-spacing: -0.015em; line-height: 1.5;
  word-break: keep-all;
}
.bo_v_drname {
  margin: 22px 0 0;
  font-family: 'Poppins', sans-serif;
  font-size: 13px; font-weight: 700;
  color: #888; letter-spacing: 0.12em;
}

/* === 상세 hero 이미지 (본문 영역과 동일 너비) === */
.bo_v_hero {
  margin: 0 0 56px;
  width: 100%;
  background: #ededed;
  overflow: hidden;
  position: relative;
}
.bo_v_hero img {
  display: block;
  width: 100%; height: auto;
  max-height: 540px;
  object-fit: cover;
  margin: 0 auto;
}
.bo_v_hero img[src*="bo_noimg"] {
  object-fit: contain;
  max-width: 200px; max-height: 200px;
  margin: 80px auto;
  opacity: 0.5;
}
@media (max-width: 768px) {
  .bo_v_hero { margin-bottom: 36px; }
  .bo_v_hero img { max-height: 360px; }
  .bo_v_hero img[src*="bo_noimg"] { max-width: 140px; max-height: 140px; margin: 56px auto; }
  .bo_v_subtit { font-size: 15px; margin-top: 14px; }
}

.bo_v_tit::before {
  content: "DR'S NOTE";   /* drnote 기본 — bo_table 별 분기는 아래 */
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; color: #888;
  margin: 0 0 24px;
}
.subcon--event-view .bo_v_tit::before { content: "EVENT"; }
.bo_v_tit > p {
  margin: 0 0 12px;
  font-size: 13px; font-weight: 600;
  color: #666; letter-spacing: -0.01em;
}
.bo_v_tit > p:empty { display: none; }
.bo_v_tit h3 {
  margin: 0 0 18px;
  font-size: clamp(28px, 4.2vw, 52px);
  font-weight: 800; color: #121212;
  line-height: 1.18; letter-spacing: -0.025em;
  word-break: keep-all;
}
.bo_v_tit ol {
  list-style: none; padding: 0; margin: 12px 0 0;
  display: flex; flex-wrap: wrap; gap: 18px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px; color: #999;
  letter-spacing: 0.06em;
}
.bo_v_tit ol li { display: inline-flex; align-items: center; }
.bo_v_tit ol li + li::before {
  content: ""; display: inline-block;
  width: 1px; height: 10px; background: #ddd;
  margin-right: 18px;
}

.bo_v_con {
  padding: 8px 0 80px;
  min-height: 200px;
  font-size: 17px; line-height: 1.85;
  color: #2a2a2a; word-break: keep-all;
}
.bo_v_con p { margin: 0 0 1.2em; }
.bo_v_con img { max-width: 100%; height: auto; display: block; margin: 36px auto; }
.bo_v_con h2, .bo_v_con h3, .bo_v_con h4 {
  font-weight: 700; color: #121212;
  margin: 48px 0 18px; line-height: 1.3;
  letter-spacing: -0.02em;
}
.bo_v_con h2 { font-size: 28px; }
.bo_v_con h3 { font-size: 22px; }
.bo_v_con h4 { font-size: 18px; }
.bo_v_con blockquote {
  margin: 36px 0; padding: 8px 0 8px 28px;
  border-left: 2px solid #121212;
  font-size: 19px; font-style: italic;
  color: #121212; letter-spacing: -0.01em;
}
.bo_v_con ul, .bo_v_con ol { padding-left: 24px; margin: 0 0 1.2em; }
.bo_v_con li { margin-bottom: 8px; }
.bo_v_con a { color: #121212; text-decoration: underline; text-underline-offset: 4px; }

/* 호환: 일부 그누보드 기본 셀렉터 */
#bo_v_atc {
  padding: 8px 0 80px;
  min-height: 200px;
  font-size: 17px; line-height: 1.85;
  color: #2a2a2a; word-break: keep-all;
}
#bo_v_atc img { max-width: 100%; height: auto; display: block; margin: 36px auto; }

#bo_v_link ul, #bo_v_file ul { list-style: none; padding: 0; margin: 0; }
#bo_v_link li, #bo_v_file li { padding: 14px 0; border-bottom: 1px solid #eee; font-size: 14px; }
#bo_v_link a, #bo_v_file a { color: #121212; text-decoration: none; }
#bo_v_link a:hover, #bo_v_file a:hover { text-decoration: underline; }

#bo_vl { display: flex; gap: 8px; margin: 48px 0 0; flex-wrap: wrap; justify-content: center; }
#bo_vl a {
  display: inline-flex; align-items: center; height: 48px;
  padding: 0 28px;
  background: #fff; color: #121212;
  border: 1px solid #121212;
  font-size: 14px; font-weight: 600;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
  letter-spacing: -0.01em;
}
#bo_vl a:hover { background: #121212; color: #fff; }

/* ==============================================================
   글쓰기 (write) — gufram 미니멀 톤
   ============================================================== */
#bo_w {
  padding: 0;
  max-width: 920px; margin: 0 auto;
}

#fwrite { width: 100% !important; }

/* 옵션 ul (공지/html/secret/mail) — 폼 위쪽 작은 체크박스 묶음 */
#fwrite > ul:first-of-type:not(.frmBox ul) {
  display: flex; gap: 18px; flex-wrap: wrap;
  list-style: none; padding: 0; margin: 0 0 24px;
}

/* 폼 박스 */
.frmBox { margin: 0; }
.frmBox > ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 28px;
}
.frmBox > ul > li { padding: 0; margin: 0; position: relative; }
.frmBox > ul > li.wid01,
.frmBox > ul > li.wid02 { width: 100%; }

/* 라벨 */
.frmBox .label {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; font-weight: 700;
  color: #121212; margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.frmBox .label em {
  font-style: normal; font-weight: 500;
  font-size: 12px; color: #999;
  letter-spacing: -0.01em;
}
.frmBox .label .req {
  display: inline-block;
  width: 5px; height: 5px;
  background: #c20000; border-radius: 50%;
  margin-left: 2px;
}

/* 인풋 필드 */
#bo_w .frm_input,
#bo_w textarea,
#bo_w select {
  width: 100%; height: 50px;
  padding: 0 18px;
  font-size: 14px; font-family: inherit;
  border: 1px solid #d8d8d8;
  background: #fff; color: #121212;
  box-sizing: border-box;
  transition: border-color .2s ease;
  letter-spacing: -0.01em;
}
#bo_w .frm_input::placeholder,
#bo_w textarea::placeholder { color: #aaa; font-weight: 400; }
#bo_w .frm_input:focus,
#bo_w textarea:focus,
#bo_w select:focus {
  outline: none;
  border-color: #121212;
  box-shadow: inset 0 -2px 0 0 #121212;
}
#bo_w textarea { min-height: 360px; height: auto; padding: 18px; line-height: 1.7; resize: vertical; }
#bo_w select { cursor: pointer; appearance: none; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23121212' stroke-width='1.5' fill='none'/></svg>") no-repeat right 18px center; padding-right: 44px; }

/* 파일 업로드 박스 */
.frmBox .fileBox {
  display: flex; align-items: stretch;
  border: 1px solid #d8d8d8;
  background: #fff;
  height: 50px;
}
.frmBox .fileBox .upload-hidden {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.frmBox .fileBox .upload-name {
  flex: 1; border: 0; padding: 0 18px;
  font-size: 14px; color: #121212;
  background: transparent;
  min-width: 0;
}
.frmBox .fileBox > label {
  display: inline-flex; align-items: center; justify-content: center;
  height: 100%; padding: 0 22px;
  background: #f5f5f5; color: #121212;
  border-left: 1px solid #d8d8d8;
  font-family: 'Poppins', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.frmBox .fileBox > label::before {
  content: "FILE"; display: inline-block;
}
.frmBox .fileBox > label img { display: none; }
.frmBox .fileBox > label:hover { background: #121212; color: #fff; }

.frmBox .file_del {
  margin: 10px 0 0;
  font-size: 12px; color: #666;
  display: flex; align-items: center; gap: 8px;
}
.frmBox .file_del input[type="checkbox"] { margin: 0; }

/* chk_box 옵션 (공지/html/secret/mail 등) */
#fwrite .chk_box {
  display: inline-flex; align-items: center;
  font-size: 13px; color: #666;
  margin: 0;
}
#fwrite .chk_box input[type="checkbox"] {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
#fwrite .chk_box label {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
  font-weight: 500;
}
#fwrite .chk_box label > span {
  display: inline-block;
  width: 16px; height: 16px;
  border: 1px solid #d8d8d8;
  background: #fff;
  position: relative;
  transition: background .15s ease, border-color .15s ease;
}
#fwrite .chk_box input[type="checkbox"]:checked + label > span {
  background: #121212; border-color: #121212;
}
#fwrite .chk_box input[type="checkbox"]:checked + label > span::after {
  content: ""; position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 에디터 영역 */
.frmBox .inpBox { width: 100%; }
.frmBox .inpBox iframe { border: 1px solid #d8d8d8 !important; }

/* 작성완료 / 취소 버튼 */
.btn_confirm {
  text-align: center; margin: 56px 0 0;
  display: flex; gap: 0; justify-content: center;
}
.btn_confirm #btn_submit,
.btn_confirm .btn_submit,
.btn_confirm a {
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; padding: 0 56px;
  background: #121212; color: #fff;
  border: 1px solid #121212;
  font-size: 13px; font-weight: 700;
  font-family: 'Poppins', sans-serif;
  letter-spacing: 0.2em;
  cursor: pointer; transition: background .2s ease, color .2s ease;
  text-decoration: none;
  margin-left: -1px;
}
.btn_confirm #btn_submit:first-child,
.btn_confirm .btn_submit:first-child,
.btn_confirm a:first-child { margin-left: 0; }
.btn_confirm #btn_submit:hover,
.btn_confirm .btn_submit:hover,
.btn_confirm a:hover { background: #fff; color: #121212; }
.btn_confirm a.btn_cancel { background: #fff; color: #121212; }
.btn_confirm a.btn_cancel:hover { background: #121212; color: #fff; }

/* 글쓰기 페이지 반응형 */
@media (max-width: 768px) {
  #bo_w::before { font-size: 28px; }
  #bo_w::after { margin-bottom: 32px; padding-bottom: 20px; font-size: 10px; }
  .frmBox > ul { gap: 22px; }
  #bo_w .frm_input, #bo_w select { height: 46px; font-size: 14px; }
  #bo_w textarea { min-height: 280px; }
  .frmBox .fileBox { height: 46px; }
  .frmBox .fileBox > label { padding: 0 16px; font-size: 10px; }
  .btn_confirm #btn_submit,
  .btn_confirm .btn_submit,
  .btn_confirm a { height: 50px; padding: 0 36px; font-size: 12px; }
}

/* ==============================================================
   댓글
   ============================================================== */
#bo_vc { margin: 64px 0 0; padding: 32px 0 0; border-top: 1px solid #121212; max-width: 880px; margin-left: auto; margin-right: auto; }
#bo_vc h2 { font-size: 18px; font-weight: 700; margin: 0 0 24px; color: #121212; }
.cmt_contents { padding: 20px 0; border-bottom: 1px solid #eee; font-size: 14px; line-height: 1.7; }
.cmt_info { margin: 0 0 8px; font-size: 13px; color: #666; display: flex; gap: 12px; }
.cmt_info strong { color: #121212; font-weight: 700; }

/* ==============================================================
   반응형
   ============================================================== */
/* 태블릿 이하: 셀 padding 축소 */
@media (max-width: 1024px) {
  .g-grid__card { padding: 14px; }
  .g-grid__card-text { padding-top: 10px; }
  .g-grid__card-text h3 { font-size: 13px; }
  .g-grid__card-text .cont { font-size: 11px; }
}

@media (max-width: 768px) {
  .subcon .inner { padding: 100px 0 60px; }
  /* 모바일: 리스트는 viewport 최상단부터 시작 (헤더가 그리드 위에 overlay) — drnote / event 둘 다 */
  .subcon--drnote-list .inner { padding: 0; }
  /* 모바일: 1열 그리드 (PC 4열 / 태블릿 2열 → 모바일 1열) */
  .subcon--drnote-list .g-grid__inner { grid-template-columns: 1fr; --final-col-delay: 0.12s; }
  /* PHP 가 PC 4-grid 기준 placeholder 채움 → 모바일 1열에선 col 1/2/3 placeholder 모두 hide (이미 col 2/3 hide 룰 있어서 col 1 추가) */
  .subcon--drnote-list .g-grid__inner > .g-grid__card--empty[style*="--col:1"],
  .subcon--drnote-list .g-grid__inner > .g-grid__card--empty[style*="--col:2"],
  .subcon--drnote-list .g-grid__inner > .g-grid__card--empty[style*="--col:3"] { display: none; }
  /* 모바일 drnote: 1열이라 좌/우 보더 의미 없음 — ::after (좌측 세로선) + .g-grid__edge--right (우측 외곽선) 숨김. ::before (하단 가로선) 만 유지해서 row 사이 구분 */
  .subcon--drnote-list .g-grid__card::after,
  .subcon--drnote-list .g-grid__edge--right { display: none !important; }

  /* 글 상세는 뒤로가기 버튼 아래부터 콘텐츠 + 좌우 padding (위 .subcon .inner shorthand 에 의해 reset 되니 다시 한번) */
  .subcon.subcon--view .inner {
    padding-top: 170px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 64px !important;
  }

  /* 뒤로가기 버튼 — fixed 로 헤더(top 24px, height 54px) 아래 좌상단 고정 + 크기 축소 */
  .subpage-back.drnote-back {
    position: fixed !important;
    left: 16px !important;
    top: 96px !important;
    width: 48px !important;
    height: 48px !important;
  }
  .subpage-back.drnote-back span { width: 18px; height: 18px; background-size: 18px 18px; }

  /* 모바일 그리드 셀 */
  .g-grid__card { padding: 12px; }
  .g-grid__card-img-wrap img { max-width: 65%; max-height: 65%; }
  .g-grid__card-text { padding-top: 8px; }
  .g-grid__card-text h3 { font-size: 12px; -webkit-line-clamp: 1; }
  .g-grid__card-text .cont { font-size: 10px; -webkit-line-clamp: 2; }

  .bo_v_tit h3 { font-size: 26px; }
  .bo_v_con { font-size: 15px; padding-bottom: 60px; }
  #bo_cate ul li { margin-right: 18px; }
  #bo_cate ul li a { font-size: 13px; }
  #bo_sch input[type="text"] { min-width: 0; flex: 1; }
}