/* ============================================================
   board.css
   그누보드5 기본(basic) 게시판 스킨의 목록/글보기/댓글 화면을
   gakkum 디자인 시스템에 맞게 덮어씌운다.
   스킨 자체는 건드리지 않고(수정 시 에디터 등 핵심기능 파손 위험),
   bbs/board.php에서 이 파일을 style.css보다 나중에(order 높게) 불러와
   같은 셀렉터의 값을 자연스럽게 덮어쓰는 방식.
   ============================================================ */

.board-wrap{--bd-accent:var(--green-700);--bd-accent-dark:var(--green-900);}
/* layout.css의 .page-wrap 공용 여백(56px 좌우24px)을 게시판만 절반/제로로 좁힘 */
.page-wrap.board-wrap{padding-top:0;padding-left:0;padding-right:0;}

/* ===== 상단 정보 줄 (건수만 — 버튼은 하단 .bo_fx 한 곳에만 둔다, 위아래 중복 방지) =====
   margin-bottom을 없애서 헤더행 위/아래 공백이 대칭이 되게 함
   (전엔 여기 margin-bottom(14px)이 th의 padding-top(14px)에 그대로 더해져서
   헤더행 위쪽 공백만 아래쪽의 거의 2배로 떠 보였음). */
.board-wrap #bo_btn_top{margin:0;padding-bottom:16px;border-bottom:2px solid var(--ink);}
.board-wrap #bo_btn_top > .btn_bo_user{display:none;}
.board-wrap #bo_list_total{font-size:15px;color:var(--ink-muted);}
.board-wrap #bo_list_total span{font-weight:700;color:var(--bd-accent-dark);}

/* 표 캡션("OO 목록")은 스크린리더용 안내일 뿐 화면엔 필요 없음 — 시각적으로만 숨김 */
.board-wrap .tbl_head01 caption{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.board-wrap .btn_bo_user{display:flex;gap:8px;list-style:none;margin:0;padding:0;}
/* 기본 스킨 style.css가 li{float:left;width:40px;margin-left:5px}로 폭을 고정해놔서
   폭이 넓은 "글쓰기" 버튼(아이콘+글자)이 옆 버튼과 겹쳐 보이던 문제 — 전부 리셋. */
.board-wrap .btn_bo_user li{position:relative;float:none;width:auto;margin:0;background:none;}
.board-wrap .btn_bo_user .btn,
.board-wrap .btn_bo_user button.btn_more_opt{
  display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:10px;background:#fff;color:var(--ink-muted);border:1px solid var(--line-strong);
  font-size:14px;transition:color .15s ease,border-color .15s ease;
}
.board-wrap .btn_bo_user .btn:hover,
.board-wrap .btn_bo_user button.btn_more_opt:hover{background:#fff;color:var(--bd-accent);border-color:var(--bd-accent);}
.board-wrap .btn_bo_user a.btn_b01[title="글쓰기"]{background:var(--bd-accent-dark);color:#fff;border-color:var(--bd-accent-dark);width:auto;padding:0 18px;gap:8px;font-weight:700;font-size:14px;}
.board-wrap .btn_bo_user a.btn_b01[title="글쓰기"]::after{content:"글쓰기";}
/* 제작문의 게시판은 목록의 "글쓰기" 버튼도 게시판 성격에 맞게 "제작문의"로 표시(요청) */
.board-wrap-inquiry .btn_bo_user a.btn_b01[title="글쓰기"]::after{content:"제작문의";}
.board-wrap .btn_bo_user a.btn_b01[title="글쓰기"]:hover{background:var(--bd-accent);border-color:var(--bd-accent);color:#fff;}

.board-wrap .more_opt{
  position:absolute;top:calc(100% + 6px);right:0;z-index:5;min-width:130px;list-style:none;margin:0;padding:6px;
  background:#fff;border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 12px 28px rgba(15,45,74,.1);display:none;
}
.board-wrap .more_opt.show, .board-wrap .more_opt:not([style*="display: none"]){}
.board-wrap .more_opt li a,
.board-wrap .more_opt li button{
  display:flex;align-items:center;justify-content:space-between;width:100%;padding:9px 10px;border-radius:7px;
  font-size:13.5px;color:var(--ink);background:none;border:none;text-align:left;
}
.board-wrap .more_opt li a:hover,
.board-wrap .more_opt li button:hover{background:none;color:var(--bd-accent-dark);text-decoration:underline;}

/* ===== 카테고리 ===== */
.board-wrap #bo_cate{margin:0 0 20px;}
.board-wrap #bo_cate ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;}
.board-wrap #bo_cate a{display:block;padding:7px 16px;border-radius:20px;border:1px solid var(--line-strong);color:var(--ink-muted);font-size:13.5px;background:#fff;}
.board-wrap #bo_cate a:hover{border-color:var(--bd-accent);color:var(--bd-accent);}
.board-wrap #bo_cate #bo_cate_on{background:var(--bd-accent-dark);border-color:var(--bd-accent-dark);color:#fff;font-weight:700;box-shadow:none;}

/* ===== 목록 테이블 : 화이트 배경 + 선으로만 구조를 표현한다 (배경색 칠 없음) =====
   선은 헤더 행 밑줄 하나로 충분 — 바깥 top-border까지 더하면 두 줄이 겹쳐 보여서 뺐음. */
.board-wrap .tbl_head01{overflow-x:auto;}
.board-wrap .tbl_head01 table{width:100%;border-collapse:collapse;font-size:16px;background:#fff;}
.board-wrap #bo_list thead th{
  padding:14px 16px;background:#fff;color:var(--ink);font-weight:700;font-size:14.5px;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.board-wrap #bo_list thead th a{color:inherit;}
.board-wrap #bo_list tbody td{padding:20px 16px;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:middle;background:#fff;transition:background .12s ease,color .12s ease;}
/* 조회/날짜(맨 끝 칸)가 우측 끝에 바짝 붙어 보였음(요청 — "너무 우측에 붙음") —
   마지막 칸에는 여백을 더 준다 */
.board-wrap #bo_list thead th:last-child,
.board-wrap #bo_list tbody td:last-child{padding-right:28px;}
.board-wrap #bo_list tbody tr{border-left:3px solid transparent;transition:border-color .12s ease;}
.board-wrap #bo_list tbody tr:hover{border-left-color:var(--bd-accent);}
.board-wrap #bo_list tbody tr:hover td{background:#f2f2f2;color:var(--bd-accent-dark);}
/* 스킨 원본 style.css의 .bo_notice td{background:#fff6fa !important}가 분홍색을 강제로 깔아서
   !important로 눌러야 없앨 수 있었음 */
.board-wrap #bo_list tbody tr.bo_notice td{font-weight:600;background:#f7f7f7 !important;}
.board-wrap #bo_list .td_num2, .board-wrap #bo_list .td_num{color:var(--ink-faint);font-size:14.5px;}
.board-wrap #bo_list .notice_icon{
  display:inline-block;padding:4px 11px;border-radius:20px;border:1px solid var(--line-strong);
  color:var(--bd-accent-dark);font-size:12.5px;font-weight:700;white-space:nowrap;line-height:1.6;
}
.board-wrap #bo_list .bo_current{color:var(--bd-accent);font-weight:700;}
.board-wrap #bo_list .td_subject{text-align:left;}
.board-wrap #bo_list .bo_tit{display:flex;align-items:center;gap:6px;}
.board-wrap #bo_list .bo_tit a{color:var(--ink);font-weight:500;}
.board-wrap #bo_list .bo_tit a:hover{color:var(--bd-accent-dark);text-decoration:none;}
.board-wrap #bo_list .new_icon{
  display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;
  background:#e0554f;color:#fff;font-size:9px;font-weight:800;flex:none;
}
.board-wrap #bo_list .cnt_cmt{color:var(--bd-accent);font-size:13.5px;font-weight:700;}
/* 제작문의/고충처리접수 목록의 "답변완료" 배지(댓글=관리자 답변이 하나라도 달리면 표시) */
.board-wrap-inquiry #bo_list .cnt_cmt.answered-badge{
  display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;
  background:var(--bd-accent-dark);color:#fff;font-size:12px;font-weight:700;white-space:nowrap;
}
.board-wrap #bo_list .td_name, .board-wrap #bo_list .td_datetime{color:var(--ink-muted);font-size:14.5px;}
/* 날짜 칸이 좁아서 "08-13"이 두 줄로 줄바꿈되며 그 행만 세로로 밀려 보였음(요청 —
   "날짜 다 밀렸어") — 줄바꿈 자체를 막아서 항상 한 줄로, 다른 칸들과 높이가 맞게 */
.board-wrap #bo_list .td_datetime{white-space:nowrap;}

/* 제작문의 등 비공개 게시판(제목에 이름이 이미 들어있고 비밀글이라 글쓴이 노출 최소화)
   + 공지사항(요청 — "공지는 글쓴이가 안보여도됨")까지: 글쓴이 컬럼을 아예 안 보여줌.
   칸 하나가 통째로 없어지니 자연히 행 높이/구조도 서로 맞춰진다. */
.board-wrap-noauthor #bo_list .td_name{display:none;}
/* 헤더의 "글쓴이" 칸은 위치(3번째)로 찾아서 숨겼었는데, 관리자로 로그인하면 맨 앞에
   전체선택 체크박스 칸이 하나 더 생겨서 3번째가 "제목"으로 밀려버림(버그 —
   "제목이 글쓴이로 변함"으로 보였던 원인). 체크박스 칸 유무에 따라 다른 위치를 본다. */
.board-wrap-noauthor #bo_list thead tr:not(:has(.chk_box)) th:nth-child(3){display:none;}
.board-wrap-noauthor #bo_list thead tr:has(.chk_box) th:nth-child(4){display:none;}
/* #bo_v_share(SNS 공유)는 내용이 없어도 테두리 때문에 빈 줄처럼 보임 —
   비공개 게시판(제작문의/후원신청)은 애초에 공유할 이유가 없으니 삭제.
   (!important 필요: 아래쪽 481번째줄 근처 ".board-wrap #bo_v_share{display:flex}"와
   특이도가 완전히 같아서(class 1개+id 1개끼리) 그냥 두면 소스 순서상 그 규칙이 이겨버림) */
.board-wrap-inquiry #bo_v_share{display:none !important;}
/* 이전글/다음글 네비게이션도 비공개 신청서 게시판에선 의미 없음(요청) — 삭제 */
.board-wrap-inquiry .bo_v_nb{display:none !important;}
/* 조회수/댓글수는 아래쪽(174번째줄 근처) 전체 게시판 공통 규칙이 이미 숨겨줌 — 여기서
   또 안 만듦(중복). 제작문의/고충처리접수 profile_info_ct에 연락처/이메일/분류를 추가로
   넣고 글씨/여백을 키우는 건 board.php에서 처리(요청 — "이 셀에 넣어주고"). */
.board-wrap-inquiry .profile_info_ct{font-size:18px;}
.board-wrap-inquiry #bo_v_info{padding-top:0;padding-bottom:12px;}
.board-wrap-inquiry .iq-vinfo{color:var(--ink-muted);font-weight:600;}
/* 화훼 문의 전용 배송정보(wr_3~wr_7) — 값이 있을 때만 표 형태로 붙는다 */
.board-wrap-inquiry .iq-flower-info{margin-top:14px;padding:18px 20px;background:#f7f7f5;border-radius:12px;}
.board-wrap-inquiry .iq-flower-row{display:flex;gap:16px;padding:6px 0;font-size:15px;}
.board-wrap-inquiry .iq-flower-row b{flex:0 0 140px;color:var(--ink-muted);font-weight:700;}
.board-wrap-inquiry .iq-flower-row span{color:var(--ink);}
/* 댓글 기능도 비공개 게시판에선 의미 없음(신청서에 공개 댓글이 달릴 이유가 없음) — 삭제
   (#bo_vc = 댓글 목록, #bo_vc_w = 댓글 작성폼, 서로 다른 형제 요소라 둘 다 지정)
   → 다시 켬(요청): 댓글을 관리자 답변 수단으로 쓰기로 함(댓글 달리면 목록에 "답변완료"
   표시). #bo_vc/#bo_vc_w는 더 이상 숨기지 않는다. */
.board-wrap #bo_list .empty_table{padding:70px 0;text-align:center;color:var(--ink-faint);font-size:15.5px;background:#fff;}

/* 갤러리형 스킨(썸네일 리스트) 대비 최소 보정 */
.board-wrap .gall_wr{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;}

/* ===== 하단 버튼 줄 ===== */
.board-wrap .bo_fx{display:flex;justify-content:flex-end;margin:18px 0 0;}

/* ===== 페이지네이션 (채움 없이 밑줄/테두리로만 상태 표시) ===== */
.board-wrap .pg_wrap{display:flex;justify-content:center;margin:40px 0 10px;}
.board-wrap .pg_wrap .pg{display:flex;align-items:center;gap:4px;}
.board-wrap .pg_page{
  display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 8px;
  border:1px solid transparent;color:var(--ink-muted);font-size:14px;
}
.board-wrap .pg_page:hover{border-color:var(--line-strong);color:var(--bd-accent-dark);}
.board-wrap .pg_current{
  display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;
  border:1px solid var(--ink);color:var(--ink);font-weight:700;font-size:14px;background:#fff;
}

/* ===== 검색창(오버레이) ===== */
.board-wrap .bo_sch_wrap{position:fixed;inset:0;z-index:120;display:none;}
.board-wrap .bo_sch_bg{position:absolute;inset:0;background:rgba(15,20,15,.5);}
.board-wrap .bo_sch{
  position:relative;z-index:1;max-width:480px;margin:14vh auto 0;background:#fff;border-radius:18px;
  padding:32px;box-shadow:0 30px 60px rgba(0,0,0,.25);
}
.board-wrap .bo_sch h3{margin:0 0 16px;font-size:18px;color:var(--bd-accent-dark);}
.board-wrap .bo_sch select{
  width:100%;height:44px;padding:0 12px;border:1px solid var(--line-strong);border-radius:10px;margin-bottom:10px;font-size:14px;background:#fff;
}
.board-wrap .sch_bar{position:relative;}
.board-wrap .sch_input{
  width:100%;height:46px;padding:0 46px 0 16px;border:1px solid var(--line-strong);border-radius:10px;font-size:14.5px;
}
.board-wrap .sch_input:focus{outline:none;border-color:var(--bd-accent);}
.board-wrap .sch_btn{
  position:absolute;top:0;right:0;width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  color:var(--bd-accent);background:none;border:none;
}
.board-wrap .bo_sch_cls{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border:none;background:none;color:var(--ink-faint);font-size:16px;
}
.board-wrap .bo_sch_cls:hover{color:var(--ink);}

/* ===== 글보기 ===== */
.board-wrap #bo_v{padding-top:6px;}
.board-wrap #bo_v_title{margin:0 0 20px;padding-bottom:22px;border-bottom:3px solid #333;font-size:12px;font-weight:800;color:#333;line-height:1.6;}
.board-wrap .bo_v_cate{display:inline-block;margin-right:8px;padding:3px 12px;border-radius:20px;background:var(--green-100);color:var(--bd-accent-dark);font-size:12.5px;font-weight:700;vertical-align:middle;}

.board-wrap #bo_v_info{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:28px;padding-bottom:22px;border-bottom:1px solid var(--line);}
.board-wrap #bo_v_info h2{display:none;}
.board-wrap .profile_info{display:flex;align-items:center;gap:12px;}
/* 프로필 아이콘은 빼고, 이름(좌)·작성일(우)만 심플하게 — 댓글수/조회수는 숨김 */
.board-wrap .pf_img{display:none;}
.board-wrap .profile_info_ct{
  display:flex;align-items:center;gap:20px;min-width:260px;
  font-size:14px;color:var(--ink-faint);line-height:1.7;
}
.board-wrap .profile_info_ct br{display:none;}
.board-wrap .profile_info_ct strong{color:var(--ink-muted);font-weight:600;margin-right:0;}
.board-wrap .profile_info_ct strong:first-child{color:var(--ink);font-weight:700;margin-right:auto;}
.board-wrap .profile_info_ct strong:nth-of-type(2),
.board-wrap .profile_info_ct strong:nth-of-type(3){display:none !important;}
.board-wrap .profile_info_ct i{margin-right:3px;}

/* 글 목록/답변/글쓰기/옵션 버튼: 상단에서 본문 아래로 옮겨 목록 페이지처럼 우측하단에 배치
   (실제 이동은 board.php의 JS에서 처리 — 스킨 파일은 안 건드림) */
.board-wrap #bo_v_top{display:flex;justify-content:flex-end;margin-top:24px;}
.board-wrap #bo_v_top .btn_bo_user{gap:8px;}

.board-wrap #bo_v_atc_title{display:none;}
/* 스크랩 버튼은 삭제, SNS 공유 아이콘만 남김 */
.board-wrap #bo_v_share .btn_b03{display:none;}
.board-wrap #bo_v_share{display:flex;justify-content:flex-end;gap:8px;margin-bottom:10px;}
.board-wrap #bo_v_con{
  padding:8px 2px 40px;min-height:120px;font-size:16px;line-height:1.9;color:var(--ink);word-break:break-word;
}
.board-wrap #bo_v_con img{max-width:100%;height:auto;border-radius:8px;}
.board-wrap #bo_v_con a{color:var(--bd-accent);text-decoration:underline;}

.board-wrap #bo_v_act{display:flex;justify-content:center;gap:16px;padding:28px 0;border-top:1px solid var(--line);}
.board-wrap .bo_v_act_gng, .board-wrap #bo_v_act .bo_v_good, .board-wrap #bo_v_act .bo_v_nogood{position:relative;}
.board-wrap .bo_v_good, .board-wrap .bo_v_nogood{
  display:flex;align-items:center;gap:8px;padding:10px 22px;border-radius:30px;border:1px solid var(--line-strong);
  color:var(--ink-muted);font-size:14px;
}
.board-wrap a.bo_v_good:hover, .board-wrap a.bo_v_nogood:hover{border-color:var(--bd-accent);color:var(--bd-accent);}
.board-wrap .bo_v_act_gng strong{font-weight:700;color:var(--ink);}

.board-wrap #bo_v_file, .board-wrap #bo_v_link{margin:18px 0;padding:18px 20px;background:#f7f7f7;border-radius:14px;}
.board-wrap #bo_v_file h2, .board-wrap #bo_v_link h2{margin:0 0 10px;font-size:14px;color:var(--bd-accent-dark);}
.board-wrap #bo_v_file ul, .board-wrap #bo_v_link ul{list-style:none;margin:0;padding:0;}
/* 스킨 원본(skin/board/basic/style.css)의 #bo_v_file li{border:1px solid #dfdfdf}가
   우리 border-top만 남기고 나머지 3면엔 그대로 깔려있어서 "이상한 테두리"로 겹쳐 보였음
   (요청 — "아래 이상한 테두리 지워") — border를 통째로 지우고 위쪽 구분선만 새로 그림.
   글자 크기 2단계 업, 배경은 더 연한 회색으로(요청). */
.board-wrap #bo_v_file li, .board-wrap #bo_v_link li{
  padding:10px 0;margin:0;font-size:17px;color:var(--ink-muted);
  border:none !important;border-top:1px solid var(--line) !important;
}
.board-wrap #bo_v_file li:first-child, .board-wrap #bo_v_link li:first-child{border-top:none !important;}
.board-wrap #bo_v_file a, .board-wrap #bo_v_link a{color:var(--ink);}
.board-wrap #bo_v_file a:hover, .board-wrap #bo_v_link a:hover{color:var(--bd-accent);}
.board-wrap #bo_v_file .bo_v_file_cnt{font-size:13px;}

.board-wrap .bo_v_nb{list-style:none;margin:24px 0;padding:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);}
.board-wrap .bo_v_nb li{display:flex;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid var(--line);font-size:14px;}
.board-wrap .bo_v_nb li:last-child{border-bottom:none;}
.board-wrap .bo_v_nb .nb_tit{flex:none;width:70px;color:var(--ink-faint);font-size:12.5px;}
.board-wrap .bo_v_nb a{flex:1;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.board-wrap .bo_v_nb a:hover{color:var(--bd-accent);}
.board-wrap .bo_v_nb .nb_date{flex:none;color:var(--ink-faint);font-size:12.5px;}

/* ===== 댓글 ===== */
.board-wrap #bo_vc{margin-top:34px;padding-top:26px;border-top:6px solid var(--paper-alt);}
.board-wrap .cmt_btn{display:flex;align-items:center;gap:8px;background:none;border:none;font-size:17px;font-weight:800;color:var(--bd-accent-dark);margin-bottom:18px;}
.board-wrap article[id^="c_"]{display:flex;gap:12px;padding:18px 2px;border-top:1px solid var(--line);}
.board-wrap article[id^="c_"]:first-of-type{border-top:none;}
.board-wrap .cm_wrap{flex:1;min-width:0;}
.board-wrap .cm_wrap h2{font-size:14px;font-weight:700;color:var(--ink);margin:0 0 4px;display:inline;}
.board-wrap .bo_vc_hdinfo{font-size:12px;color:var(--ink-faint);margin-left:8px;}
.board-wrap .cmt_contents{margin-top:8px;font-size:14.5px;line-height:1.7;color:var(--ink);word-break:break-word;}
.board-wrap #bo_vc_empty{padding:36px 0;text-align:center;color:var(--ink-faint);font-size:14px;}
.board-wrap .bo_vl_opt{position:relative;}
.board-wrap .bo_vl_opt .btn_cm_opt{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink-faint);}
.board-wrap .bo_vl_opt .btn_cm_opt:hover{border-color:var(--bd-accent);color:var(--bd-accent);}
.board-wrap .bo_vc_act{
  position:absolute;top:calc(100% + 4px);right:0;z-index:5;min-width:110px;list-style:none;margin:0;padding:6px;
  background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 28px rgba(15,45,74,.14);
}
.board-wrap .bo_vc_act li a, .board-wrap .bo_vc_act li button{display:block;width:100%;padding:8px 10px;font-size:13px;color:var(--ink);text-align:left;background:none;border:none;border-radius:7px;}
.board-wrap .bo_vc_act li a:hover, .board-wrap .bo_vc_act li button:hover{background:var(--paper-alt);color:var(--bd-accent-dark);}

.board-wrap #bo_vc_w{display:block;margin-top:22px;padding:22px;background:var(--paper-alt);border-radius:16px;}
.board-wrap #bo_vc_w textarea{
  width:100%;min-height:90px;padding:14px 16px;border:1px solid var(--line-strong);border-radius:10px;
  font-size:14.5px;font-family:inherit;resize:vertical;background:#fff;
}
.board-wrap #bo_vc_w textarea:focus{outline:none;border-color:var(--bd-accent);}
.board-wrap .bo_vc_w_wr{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center;}
.board-wrap .bo_vc_w_info{display:flex;gap:8px;flex:1;min-width:220px;}
.board-wrap .frm_input{height:42px;padding:0 12px;border:1px solid var(--line-strong);border-radius:9px;font-size:14px;background:#fff;}
.board-wrap .bo_vc_w_info .frm_input{flex:1;min-width:0;}
.board-wrap .btn_submit{
  height:42px;padding:0 24px;border-radius:9px;border:none;background:var(--bd-accent-dark);color:#fff;font-weight:700;font-size:14px;
}
.board-wrap .btn_submit:hover{background:var(--bd-accent);}

/* ===== 글쓰기 폼 (#bo_w) =====
   write.skin.php는 원래 css/default.css(테마 시스템에서만 로드됨)가 미리 로드돼있다고
   가정하고 만들어져 있다 — .frm_input/.full_input/.half_input의 "기본 크기" 자체가
   거기 정의돼 있어서, 그 파일을 안 쓰는 우리 독립형 페이지에선 통째로 빠져있었다.
   (제목 입력칸이 쪼그맣게 나오던 원인 — sound_only 때와 똑같은 패턴의 버그) */
.board-wrap #bo_w .full_input{width:100%;}
.board-wrap #bo_w .half_input{width:calc(50% - 6px);}
.board-wrap #bo_w .write_div{margin:14px 0;}
/* 에디터 위 "단축키 일람" 버튼 삭제(요청, 불필요) */
.board-wrap #bo_w .cke_sc,
.board-wrap #bo_w .btn_cke_sc{display:none !important;}
/* 글쓰기 화면 전체 글씨 2px 업(요청) */
.board-wrap #bo_w .frm_input{font-size:16px;}

/* 필수항목 미입력 시 알럿창 대신 파란 테두리로 안내(요청 — 전체 게시판 공통, 색상은
   빨강→파랑으로 변경. 페이지 로드 시점에 비어있는 필수항목엔 바로 표시하고, 제출을
   시도했는데 여전히 비어있으면 같은 스타일 그대로 유지 — 입력하는 순간 사라짐) */
.field-error{border-color:#e0405c !important;box-shadow:0 0 0 3px rgba(224,64,92,.15) !important;}
.field-error-box{border:1px solid #e0405c !important;border-radius:8px;padding:10px;background:rgba(224,64,92,.05);}
.iq-note{margin:6px 0 0;font-size:13px;color:#e0568c;font-weight:600;line-height:1.5;}

/* 이름/비밀번호/이메일/홈페이지 — write.php의 JS가 라벨+입력칸을 .bw-field로 묶어주면
   여기서 2열 그리드로 배치. 라벨 텍스트는 안 씀(요청 — placeholder로 충분) — 화면엔
   안 보이게 하되 완전히 지우진 않아서 스크린리더는 여전히 읽을 수 있게 둠. */
.board-wrap #bo_w .bo_w_info.bw-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;}
.board-wrap #bo_w .bw-field{display:flex;flex-direction:column;gap:6px;}
.board-wrap #bo_w .bw-field label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
.board-wrap #bo_w .bw-field .half_input{width:100%;}
@media (max-width:640px){
  .board-wrap #bo_w .bo_w_info.bw-info-grid{grid-template-columns:1fr;}
}
.board-wrap #bo_w .bo_w_select select{
  width:100%;height:42px;padding:0 12px;border:1px solid var(--line-strong);border-radius:9px;font-size:16px;background:#fff;
}

/* 공지/html/비밀글 체크박스 줄 — 세로 정렬 맞춤
   원래 스킨은 실제 체크박스를 position:absolute;width:0;height:0로 숨기고
   옆의 <label><span>가짜 네모를 클릭하게 만드는 방식인데, 우리 flex 오버라이드와
   맞물려 라벨 클릭이 실제 체크박스로 전달 안 되는 문제가 있었다(원인 불명확).
   더 확실하게 — 가짜 박스는 없애고 실제 체크박스를 그냥 눈에 보이게 키워서 쓴다. */
.board-wrap #bo_w .bo_v_option{display:flex;align-items:center;flex-wrap:wrap;gap:18px;list-style:none;margin:0;padding:0;}
.board-wrap #bo_w .bo_v_option li{display:flex;align-items:center;margin:0;}
.board-wrap #bo_w .chk_box .selec_chk{
  position:static !important;width:16px !important;height:16px !important;
  opacity:1 !important;z-index:auto !important;overflow:visible !important;outline:none;
  accent-color:var(--bd-accent-dark);cursor:pointer;margin:0 6px 0 0 !important;flex:none;
}
.board-wrap #bo_w .chk_box label{display:flex;align-items:center;gap:0;font-size:16px;color:var(--ink-muted);cursor:pointer;padding-left:0 !important;}
.board-wrap #bo_w .chk_box label span{display:none;}

/* 임시 저장된 글 버튼 */
.board-wrap #bo_w #btn_autosave{
  height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--line-strong);background:#fff;color:var(--ink-muted);font-size:12.5px;
}
.board-wrap #bo_w #btn_autosave:hover{border-color:var(--bd-accent);color:var(--bd-accent);}

/* 파일첨부: 네이티브 파일버튼이 촌스러워 보이던 것 — 버튼 부분만 우리 톤으로 재스킨 */
.board-wrap #bo_w .file_wr{border-color:var(--line-strong) !important;border-radius:9px !important;}
.board-wrap #bo_w .frm_file{font-size:15.5px;color:var(--ink-muted);}
.board-wrap #bo_w .frm_file::file-selector-button{
  height:30px;padding:0 14px;margin-right:12px;border-radius:7px;border:1px solid var(--line-strong);
  background:#fff;color:var(--ink-muted);font-size:12.5px;font-weight:600;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.board-wrap #bo_w .frm_file::file-selector-button:hover{background:var(--bd-accent-dark);color:#fff;border-color:var(--bd-accent-dark);}
/* 파일첨부 줄은 write_div 두 개(.bo_w_flie 자체 + 내부 .file_wr)가 겹쳐있어서
   위/아래 여백이 비대칭으로 보였음 — 아래쪽에도 확실히 여백을 준다 */
.board-wrap #bo_w .bo_w_flie{margin:0 0 16px !important;}
/* 스킨 원본(skin/board/basic/style.css)의 #wr_password/#wr_homepage margin-left:1%가
   2열 그리드에서 비밀번호 칸만 살짝 오른쪽으로 밀리게 만듦 — 스킨은 안 건드리고 여기서
   0으로 되돌린다(요청 — "줄이 안 맞아") */
.board-wrap #bo_w #wr_password,
.board-wrap #bo_w #wr_homepage{margin-left:0;}
/* 스킨 원본의 파일첨부 input margin-top:3px도 같은 이유로 제거(요청) */
.board-wrap #bo_w .bo_w_flie .frm_file{margin-top:0;}

.board-wrap #bo_w .btn_confirm{display:flex;justify-content:center;gap:12px;margin-top:24px;}
.board-wrap #bo_w .btn_cancel,
.board-wrap #bo_w .btn_submit{
  display:inline-flex;align-items:center;justify-content:center;height:54px;min-width:140px;padding:0 32px;border-radius:10px;
  font-weight:700;font-size:16px; /* 스킨 원본 CSS가 #bo_w .btn_submit에 font-size:1.167em을
    id 셀렉터로 걸어놔서 취소 버튼보다 커 보였음 — 여기서 동일하게 맞춤 */
}
.board-wrap #bo_w .btn_cancel{border:1px solid var(--line-strong);background:#fff;color:var(--ink-muted);}
.board-wrap #bo_w .btn_cancel:hover{border-color:var(--ink);color:var(--ink);}

/* 후원신청은 공지/html/비밀글 체크박스, 링크 입력칸, 파일첨부가 다 필요없음(요청) —
   캡차는 write.php/write_update.php에서 bo_table 예외로 아예 안 그려지게 처리했음 */
.board-wrap-sponsor #bo_w .bo_w_link,
.board-wrap-sponsor #bo_w .bo_w_flie{display:none;}

/* ===== 후원신청(sponsor) 전용 폼 — write.php가 JS로 이 마크업을 주입한다 =====
   기획서 실제 서식(기탁증서 스타일 표)을 그대로 재현: 섹션마다 ● 표시 제목 + 굵은 밑줄,
   그 아래 라벨/입력칸 표. 라벨 배경은 참고안의 분홍 대신 사이트 톤에 맞는 밝은 블루로,
   글자 크기는 기본보다 2px씩 키움. */
.sponsor-form{margin:26px 0 0;}
/* 캘린더 아이콘을 입력칸 맨 왼쪽으로 — 기본은 오른쪽 끝에 붙는데, 아이콘을 절대위치로
   왼쪽에 놓고 입력값(연/월/일 텍스트)은 padding-left로 그 뒤에서 시작하게 만든다. */
.sp-table input[type="date"].frm_input{
  position:relative;padding-left:40px;
}
.sp-table input[type="date"].frm_input::-webkit-calendar-picker-indicator{
  position:absolute;left:8px;width:22px;height:22px;padding:4px;cursor:pointer;
}

.sp-block{margin:0 0 30px;}
.sp-block h3{
  display:flex;align-items:center;gap:9px;margin:0 0 0;padding-bottom:12px;
  font-size:18px;font-weight:800;color:var(--ink);border-bottom:1px solid var(--ink);
}
.sp-block h3::before{content:'';width:7px;height:7px;border-radius:50%;background:#e0568c;flex:none;}

.sp-table{width:100%;border-collapse:collapse;table-layout:fixed;}
.sp-table th,.sp-table td{border-bottom:1px solid var(--line);padding:0;}
.sp-table th{
  background:#fdf1f5;color:var(--ink);font-weight:700;font-size:15px;text-align:center;
  padding:20px 10px;vertical-align:middle;
}
.sp-table th.sp-sub{background:#f9dce8;font-weight:600;font-size:14.5px;}
.sp-req{color:#e0405c;margin-left:2px;}
.sp-table td{padding:13px 12px;}
.sp-col-th{width:180px;}
.sp-table-item .sp-col-th{width:130px;}

.sp-table .frm_input{
  width:100%;height:44px;padding:0 12px;border:1px solid var(--line-strong);border-radius:8px;
  font-size:15px;background:#fff;color:var(--ink);
}
.sp-table textarea.frm_input{height:auto;min-height:80px;padding:10px 12px;resize:vertical;font-family:inherit;line-height:1.5;}

.sponsor-legal{margin:18px 0 0;padding:16px 18px;background:#fdf1f5;border-radius:10px;font-size:14.5px;color:var(--ink-muted);line-height:1.65;}
.sponsor-agree{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:15.5px;color:var(--ink);flex-wrap:wrap;}
.sponsor-agree input{width:18px;height:18px;accent-color:var(--bd-accent-dark);cursor:pointer;flex:none;}
/* "원문보기"를 밑줄 텍스트 링크가 아니라 버튼 형태로(요청) */
.sponsor-agree a{
  display:inline-flex;align-items:center;flex:none;
  padding:5px 12px;border:1px solid var(--bd-accent-dark, #3c8ed8);border-radius:20px;
  color:var(--bd-accent-dark, #3c8ed8);text-decoration:none;font-size:13px;font-weight:600;
  transition:background .15s, color .15s;
}
.sponsor-agree a:hover{background:var(--bd-accent-dark, #3c8ed8);color:#fff;}

/* 개인정보 수집·이용 동의 "원문보기" 모달 — 후원신청/자원봉사신청 공통 */
.sp-modal-overlay{
  display:none;position:fixed;inset:0;z-index:200;background:rgba(15,20,15,.5);
  align-items:center;justify-content:center;padding:24px;
}
.sp-modal-overlay.show{display:flex;}
.sp-modal{
  width:100%;max-width:480px;max-height:80vh;overflow-y:auto;background:#fff;
  border-radius:16px;padding:28px;box-shadow:0 30px 60px rgba(0,0,0,.25);
}
.sp-modal h4{margin:0 0 16px;font-size:18px;font-weight:800;color:var(--ink);}
.sp-modal-section{margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--line);}
.sp-modal-section:last-of-type{border-bottom:none;margin-bottom:0;padding-bottom:0;}
.sp-modal-section h5{margin:0 0 12px;font-size:15px;font-weight:800;color:var(--bd-accent-dark, var(--green-900));}
.sp-modal table{width:100%;border-collapse:collapse;margin-bottom:16px;font-size:14px;}
.sp-modal table th,.sp-modal table td{padding:10px 12px;border:1px solid var(--line);text-align:left;}
.sp-modal table th{width:110px;background:var(--paper-alt);color:var(--ink-muted);font-weight:600;}
.sp-modal p{margin:0 0 10px;font-size:13.5px;line-height:1.7;color:var(--ink-muted);}
.sp-modal-close{
  display:block;width:100%;height:44px;margin-top:6px;border:1px solid var(--line-strong);
  border-radius:9px;background:#fff;color:var(--ink);font-weight:700;font-size:14.5px;cursor:pointer;
}
.sp-modal-close:hover{border-color:var(--ink);}
@media (max-width: 640px){
  .sp-table,.sp-table thead,.sp-table tbody,.sp-table tr,.sp-table th,.sp-table td{display:block;width:100%;}
  .sp-table th{text-align:left;border-bottom:none;padding:12px 12px 6px;}
  .sp-table td{padding:0 12px 14px;}
}

/* 상세보기(board.php?wr_id=)에서 wr_content로 조립해 넣은 표 — 스킨은 안 건드리고 표 자체 스타일만 지정 */
.sponsor-view-table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:16px;}
.sponsor-view-table th,.sponsor-view-table td{padding:13px 16px;border:1px solid var(--line);text-align:left;}
.sponsor-view-table th{width:180px;background:#fdf1f5;color:var(--ink);font-weight:700;}

/* ===== 갤러리(가꿈 이야기): 가로 4열 카드 그리드로 재구성 =====
   스킨 원본은 float+width%(col-gn-4) 방식이라 그리드로 통째로 갈아끼움.
   이미지: 라운딩 + 호버시 그림자/살짝 떠오름/확대, 가운데 + 아이콘 오버레이. */
.board-wrap #bo_gall{width:100% !important;}
.board-wrap #bo_gall #bo_btn_top{border-bottom:none;}
.board-wrap #gall_ul.gall_row{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 22px;
  list-style:none;margin:0;padding:0;
}
.board-wrap #gall_ul.gall_row>.gall_li{min-width:0;}
.board-wrap .gall_row [class*="col-gn-"]{position:static;width:auto;float:none;padding:0;margin:0;box-sizing:border-box;}
.board-wrap .gall_row .box_clear{clear:none;}
.board-wrap #bo_gall .gall_box{margin:0;border-radius:0;}

.board-wrap #bo_gall .gall_img{
  position:relative;height:auto !important;max-height:none !important;aspect-ratio:4/3;
  border:none;border-radius:6px;overflow:hidden;background:var(--paper-alt);
  box-shadow:0 1px 3px rgba(15,45,74,.07);
  transition:box-shadow .3s ease,transform .3s ease;
}
.board-wrap #bo_gall .gall_li:hover .gall_img{box-shadow:0 20px 36px rgba(15,45,74,.18);transform:translateY(-5px);}
.board-wrap #bo_gall .gall_img a{position:absolute;inset:0;display:block;}
.board-wrap #bo_gall .gall_img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.board-wrap #bo_gall .gall_li:hover .gall_img img{transform:scale(1.09);}
/* 어두운 오버레이 + 가운데 "+" 아이콘 — 평소엔 투명, 호버시에만 떠오름 */
.board-wrap #bo_gall .gall_img::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(10,22,38,0);transition:background .3s ease;
}
.board-wrap #bo_gall .gall_li:hover .gall_img::before{background:rgba(10,22,38,.2);}
.board-wrap #bo_gall .gall_img a::after{
  content:'+';position:absolute;top:50%;left:50%;z-index:2;width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  transform:translate(-50%,-50%) scale(.55);opacity:0;
  background:rgba(255,255,255,.95);color:var(--ink);border-radius:50%;
  font-size:26px;font-weight:300;line-height:1;
  box-shadow:0 8px 20px rgba(15,45,74,.22);
  transition:opacity .3s ease,transform .3s ease;
}
.board-wrap #bo_gall .gall_li:hover .gall_img a::after{opacity:1;transform:translate(-50%,-50%) scale(1);}

.board-wrap #bo_gall .gall_text_href{margin:16px 2px 0;}
.board-wrap #bo_gall .gall_text_href a.bo_tit{
  display:block;font-size:18px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .2s ease;
}
.board-wrap #bo_gall .gall_li:hover .gall_text_href a.bo_tit{color:var(--bd-accent-dark);}
/* 제목/날짜 두 줄만 남기기(요청) — bo_cnt(내용 미리보기)는 아예 숨기고,
   gall_info 안의 작성자 이름은 board.php JS가 텍스트 노드를 지워서 없앰(스킨을
   직접 못 건드리는 텍스트라 CSS만으로는 숨길 수 없었음), 조회수도 숨김 */
.board-wrap #bo_gall .bo_cnt{display:none;}
/* font-size:0으로 자식 사이 공백(작성자 이름을 display:none으로 지운 뒤 남는 빈 공백 글자
   폭)을 없애고, 실제 보이는 날짜 글자에서만 폰트 크기를 되살린다 — 그래야 시계 아이콘이
   제목과 정확히 같은 세로선에서 시작한다(요청) */
.board-wrap #bo_gall .gall_info{margin:8px 2px 0;font-size:0;color:var(--ink-faint);}
.board-wrap #bo_gall .gall_info .gall_date{font-size:14.5px;color:var(--ink-faint);}
.board-wrap #bo_gall .gall_info .gall_view{display:none;}
/* 작성자 이름 — 스킨이 회원 유형에 따라 다른 클래스(member/guest/sv_member/sv_guest)로
   감싸서 렌더링함(당초 파악했던 "텍스트만" 케이스는 게스트 글에만 해당) — 전부 숨김 */
.board-wrap #bo_gall .gall_info .member,
.board-wrap #bo_gall .gall_info .guest,
.board-wrap #bo_gall .gall_info .sv_member,
.board-wrap #bo_gall .gall_info .sv_guest{display:none;}
.board-wrap #bo_gall .gall_option{display:none;} /* 추천/비추천 뱃지 — 항상 0이라 불필요 */

@media (max-width:1024px){
  .board-wrap #gall_ul.gall_row{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:768px){
  .board-wrap #gall_ul.gall_row{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px;}
}

/* ===== 반응형 ===== */
@media (max-width:768px){
  .aramchan-board-categories{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-right:30px;padding-left:30px;scrollbar-width:none;}
  .aramchan-board-categories::-webkit-scrollbar{display:none;}
  .aramchan-board-categories a{flex:0 0 auto;}
  .board-wrap .tbl_head01{overflow:visible;}
  .board-wrap #bo_list table{table-layout:fixed;}
  .board-wrap #bo_list thead tr:has(.all_chk) th:not(:first-child):not(:nth-child(3)):not(:last-child),
  .board-wrap #bo_list thead tr:not(:has(.all_chk)) th:not(:nth-child(2)):not(:last-child),
  .board-wrap #bo_list .td_num2,
  .board-wrap #bo_list .td_name,
  .board-wrap #bo_list .td_num{display:none !important;}
  .board-wrap #bo_list thead .all_chk,
  .board-wrap #bo_list tbody .td_chk{width:34px;padding:12px 4px;}
  .board-wrap #bo_list thead th:last-child,
  .board-wrap #bo_list tbody td:last-child{width:64px;padding:14px 4px;text-align:right;}
  .board-wrap #bo_list .td_subject{width:auto;padding:14px 8px !important;}
  .board-wrap #bo_list .bo_tit{min-width:0;flex-wrap:nowrap;}
  .board-wrap #bo_list .bo_tit a{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .board-wrap #bo_list tbody td{padding-top:14px;padding-bottom:14px;}
  .board-wrap .bo_fx{margin-top:14px;}
  .board-wrap .bo_fx .btn_bo_user{width:100%;justify-content:flex-end;flex-wrap:wrap;gap:6px;}
  .board-wrap .bo_fx .btn_bo_user li{min-width:0;}
  .board-wrap .bo_fx .btn_bo_user .btn,
  .board-wrap .bo_fx .btn_bo_user button.btn_more_opt{
    width:auto;min-width:0;height:34px;padding:0 10px;border-radius:7px;
    font-size:12px;line-height:32px;white-space:nowrap;
  }
  .board-wrap .bo_fx .btn_bo_user .btn_admin,
  .board-wrap .bo_fx .btn_bo_user a[title="RSS"],
  .board-wrap .bo_fx .btn_bo_user button.btn_more_opt{width:34px;padding:0;}
  .board-wrap .bo_fx .btn_bo_user a.btn_b01[title="글쓰기"]{
    height:34px;padding:0 11px;gap:0;font-size:12px;
  }
  .board-wrap .bo_fx .btn_bo_user a.btn_b01[title="글쓰기"] > i,
  .board-wrap .bo_fx .btn_bo_user .btn_list_action > i{display:none;}
  .board-wrap #bo_v_title{font-size:12px;}
  .board-wrap #bo_v_info{flex-direction:column;align-items:flex-start;}
  .board-wrap .bo_vc_w_wr{flex-direction:column;align-items:stretch;}
  .board-wrap .bo_vc_w_info{flex-direction:column;}
}

/* ===== 비밀글 비밀번호 입력 게이트(password.php) =====
   히어로 없이 가운데 카드 하나로 심플하게 — 유틸리티성 페이지라 과한 장식은 안 씀. */
/* 뷰포트 높이에 따라 흔들리는 세로중앙정렬 대신, 헤더 바로 아래 고정 여백(100px)을 두고
   시작한다 — "헤더랑 너무 붙었다"는 지적 반영. */
/* .page-wrap.board-wrap{padding-top:0 ...} (파일 위쪽)이 클래스 2개짜리라 특이도가 더 높아서
   .pw-gate-wrap 한 클래스짜리 padding-top을 이겨버리고 있었음(그래서 "헤더랑 붙어보임") —
   3클래스 조합으로 확실히 이기게 만들고, 너무 크지도 않게 적당히 줄임(요청) */
.page-wrap.board-wrap.pw-gate-wrap{display:flex;justify-content:center;padding:64px 24px 80px;}
.pw-gate-card{width:100%;max-width:440px;padding:44px 40px 40px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 20px 50px rgba(15,45,74,.08);}
/* #pw_confirm(비밀번호 확인 화면)뿐 아니라 #mb_login(로그인 화면)에도 똑같이 적용되도록
   .pw-gate-card 하위 전체에 걸어둔다 — 처음엔 #pw_confirm으로만 좁게 걸어놔서
   로그인 화면(#mb_login)엔 하나도 안 먹혀서 필드가 그대로 안 꾸며진 채 나왔었음. */
/* 스킨 원본(skin/member/basic/style.css)의 #mb_login h1{position:absolute;font-size:0;
   overflow:hidden}이 아이디(ID) 셀렉터라 우리 클래스 규칙보다 세서 타이틀이 통째로
   안 보이고 있었음(요청 — "타이틀이 없다") — !important로 되돌린다. .mbskin_box의
   자체 테두리/배경, #login_fs의 35px 패딩도 같은 이유(ID 셀렉터)로 남아서 카드 안에
   테두리 상자가 하나 더 있는 것처럼 보였던 것("이중라인")도 함께 없앤다. */
#mb_login h1{
  position:static !important;font-size:22px !important;line-height:normal !important;
  overflow:visible !important;margin:0 0 20px !important;
}
.pw-gate-card .mbskin_box{border:none !important;background:none !important;}
.pw-gate-card #login_fs{padding:0 !important;}
/* .mbskin{margin:100px auto 0;width:360px}가 진짜 범인 — 타이틀 위에 100px짜리 여백을
   또 깔고 있었음(카드 자체 padding-top 28px와는 별개). 카드가 이미 중앙정렬/여백을
   맡고 있으니 여기선 완전히 0으로. */
.pw-gate-card .mbskin{margin:0 !important;width:100% !important;}
.pw-gate-card h1{margin:0 0 20px;font-size:22px;font-weight:800;color:var(--ink);text-align:center;}
.pw-gate-card p{margin:0 0 26px;font-size:14px;line-height:1.7;color:var(--ink-muted);text-align:center;}
.pw-gate-card p strong{display:block;margin-bottom:4px;color:var(--ink);font-weight:700;}
/* 옆으로 나란히 두는 flex 대신 위아래로 쌓는 단순한 구조로 — 겹침/정렬 사고 방지 */
.pw-gate-card fieldset{display:block;border:none;margin:0;padding:0;}
/* fieldset의 <legend>("회원로그인")가 h1과 겹쳐서 이중 타이틀/이중 테두리처럼 보였음(요청
   — "이중라인 삭제") — h1 하나만 남기고 legend는 완전히 숨김 */
.pw-gate-card legend{display:none;}
.pw-gate-card .pw-gate-field{display:block;margin:0 0 12px;}
.pw-gate-card .pw-gate-field label{display:block;margin:0 0 8px;font-size:15px;font-weight:600;color:var(--ink-muted);}
.pw-gate-card .frm_input{display:block;width:100%;padding:14px 16px;margin-bottom:12px;border:1px solid var(--line-strong);border-radius:2px;font-size:15px;background:#fbfaf7;transition:border-color .15s ease,background .15s ease;}
.pw-gate-card .frm_input:focus{outline:none;border-color:var(--brand-primary);background:#fff;}
/* 버튼: 브랜드그린 + 라운드 */
.pw-gate-card .btn_submit{display:block;width:100%;height:50px;border-radius:2px;border:none;background:var(--brand-primary);color:#fff;font-weight:800;font-size:16px;cursor:pointer;}
.pw-gate-card .btn_submit:hover{background:var(--brand-primary-dark);}
/* h2("로그인")는 h1과 중복이라 숨기고, 회원가입 링크만 h1 밑에 오른쪽 정렬로 살려둠 */
.pw-gate-card .mb_log_cate{display:flex;justify-content:flex-end;margin:-14px 0 22px;}
.pw-gate-card .mb_log_cate h2{display:none;}
.pw-gate-card .mb_log_cate .join{width:auto;float:none;padding:0;background:none;text-align:right;font-size:13.5px;color:var(--ink-muted);text-decoration:underline;}
.pw-gate-card .mb_log_cate .join:hover{color:var(--ink);}
.pw-gate-card #login_info{display:flex;align-items:center;justify-content:space-between;margin-top:4px;font-size:16px;}
.pw-gate-card #login_info .chk_box{display:flex;align-items:center;gap:6px;}
/* 그누보드 기본은 실제 체크박스를 position:absolute;width:0;height:0로 숨기고 옆의 가짜
   네모(span)를 보여주는 방식인데, 이 로그인 화면엔 그 가짜 네모를 그리는 CSS가 아예
   없어서 체크박스 자체가 통째로 안 보였음(요청 — "체크박스 날아감") — 실제 input을
   그냥 눈에 보이게 키운다(글쓰기 화면 체크박스와 같은 방식) */
/* 진짜 <input>을 억지로 보이게 만들려고 몇 번을 시도했는데(appearance:none 직접
   그리기, 이후 네이티브+accent-color) 둘 다 실패했다 — 원인은 그게 아니었음.
   이 사이트엔 원래 "진짜 input은 접근성용으로 숨기고(.selec_chk), 라벨 옆의
   <span>을 눈에 보이는 가짜 네모로 그리는" 정상 작동하는 방식(skin/member/basic/
   style.css)이 이미 있었는데, 그 span을 display:none으로 꺼버린 게 진짜 원인이었다.
   span을 다시 켜고 우리 사이트 색(파랑)에 맞게 크기/색만 조정한다. */
.pw-gate-card #login_info .chk_box label span{
  width:16px !important;height:16px !important;margin-right:8px;
  border-color:#8a8a8a !important;
}
.pw-gate-card #login_info .chk_box input[type="checkbox"]:checked + label span{
  background-color:#1a1a1a !important;border-color:#1a1a1a !important;
}
.pw-gate-card #login_info a{color:var(--ink-muted);font-size:13.5px;text-decoration:underline;}
.pw-gate-card #login_info a:hover{color:var(--ink);}
@media (max-width:768px){
  .board-wrap #bo_list tbody .empty_table{
    display:table-cell!important;width:auto!important;
    padding:48px 0!important;text-align:center!important;
  }
}

@media (max-width: 768px) {
  .aramchan-board-categories {
    width: calc(100% - 60px) !important;
    margin-right: 30px !important;
    margin-left: 30px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    box-sizing: border-box;
  }
}