@charset "utf-8";

/* =============================================
   디자인 토큰
   ============================================= */
:root {
  /* 브랜드 컬러 */
  --clr-primary-50:  #eef2ff;
  --clr-primary-100: #e0e7ff;
  --clr-primary-500: #6366f1;
  --clr-primary-600: #4f46e5;
  --clr-primary-700: #4338ca;
  --clr-accent:      #f43f5e;
  --clr-success:     #10b981;
  --clr-warning:     #f59e0b;

  /* 중성 팔레트 */
  --clr-gray-0:   #ffffff;
  --clr-gray-50:  #f8fafc;
  --clr-gray-100: #f1f5f9;
  --clr-gray-200: #e2e8f0;
  --clr-gray-300: #cbd5e1;
  --clr-gray-400: #94a3b8;
  --clr-gray-500: #64748b;
  --clr-gray-600: #475569;
  --clr-gray-700: #334155;
  --clr-gray-800: #1e293b;
  --clr-gray-900: #0f172a;

  /* 타이포그래피 */
  --font-sans: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
               'Segoe UI', 'Malgun Gothic', sans-serif;
  --font-size-xs:   11px;
  --font-size-sm:   12px;
  --font-size-base: 14px;
  --font-size-md:   15px;
  --font-size-lg:   18px;
  --font-size-xl:   22px;
  --line-height:    1.65;

  /* 그림자 */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  --shadow-xl: 0 20px 60px rgba(0,0,0,.15), 0 4px 16px rgba(0,0,0,.08);
  --shadow-primary: 0 4px 20px rgba(99,102,241,.35);

  /* 테두리 */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;
  --border-clr: var(--clr-gray-200);

  /* 애니메이션 */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 350ms;

  /* 레이아웃 */
  --layout-width: 1200px;
  --header-height: 80px;
  --gnb-height: 54px;
}

/* =============================================
   리셋 & 베이스
   ============================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0; padding: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--clr-gray-700);
  background: var(--clr-gray-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, h1, h2, h3, h4, h5, h6, form, fieldset, img { margin: 0; padding: 0; border: 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: 700; line-height: 1.3; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ul, dl, dt, dd { margin: 0; padding: 0; list-style: none; }

legend {
  position: absolute; margin: 0; padding: 0;
  font-size: 0; line-height: 0; text-indent: -9999em; overflow: hidden;
}

label, input, button, select, img { vertical-align: middle; font-size: 1em; }
input, button, textarea, select { margin: 0; font-family: var(--font-sans); font-size: 1em; }
input[type="submit"], button { cursor: pointer; }
p { margin: 0; padding: 0; word-break: break-all; }
hr { display: none; }
pre { overflow-x: auto; font-size: 1.05em; line-height: 1.6; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

:focus-visible {
  outline: 2px solid var(--clr-primary-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

input[type=text], input[type=password], input[type=email], input[type=tel], textarea {
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  outline: none;
}
input[type=text]:focus, input[type=password]:focus,
input[type=email]:focus, input[type=tel]:focus,
textarea:focus, select:focus {
  box-shadow: 0 0 0 3px rgba(99,102,241,.18) !important;
  border-color: var(--clr-primary-500) !important;
}

.placeholdersjs { color: var(--clr-gray-400) !important; }

/* =============================================
   레이아웃 너비
   ============================================= */
#hd, #wrapper, #ft { min-width: var(--layout-width); }
#hd_pop, #hd_wrapper, #tnb .inner,
#gnb .gnb_wrap, #container_wr, #ft_wr { width: var(--layout-width); }

/* =============================================
   유틸리티
   ============================================= */
.is-hidden { display: none !important; }
.is-visible { display: block !important; }
.pc-only { display: none; }
@media (min-width: 769px) { .pc-only { display: block !important; } }
.mobile-only { display: block; }
@media (min-width: 769px) { .mobile-only { display: none !important; } }

/* =============================================
   팝업 레이어
   ============================================= */
#hd_pop { z-index: 1000; position: relative; margin: 0 auto; height: 0; }
#hd_pop h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
.hd_pops {
  position: absolute;
  border: 1px solid var(--border-clr);
  background: var(--clr-gray-0);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.hd_pops img { max-width: 100%; display: block; }
.hd_pops_footer {
  padding: 0; background: var(--clr-gray-800);
  color: #fff; text-align: left; position: relative;
}
.hd_pops_footer::after { display: block; visibility: hidden; clear: both; content: ""; }
.hd_pops_footer button { padding: 10px 16px; border: 0; color: #fff; font-size: var(--font-size-sm); cursor: pointer; }
.hd_pops_footer .hd_pops_reject { background: transparent; }
.hd_pops_footer .hd_pops_close { background: var(--clr-gray-700); position: absolute; top: 0; right: 0; }

/* =============================================
   헤더
   ============================================= */
#hd {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(226,232,240,0.8);
  box-shadow: 0 1px 0 rgba(0,0,0,.04), var(--shadow-sm);
}
#hd_h1 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }

/* TNB */
#tnb { height: 36px; line-height: 36px; border-bottom: 1px solid var(--border-clr); background: var(--clr-gray-50); }
#tnb::after { display: block; visibility: hidden; clear: both; content: ""; }
#tnb .inner { margin: 0 auto; }

#hd_define { float: left; }
#hd_define::after { display: block; visibility: hidden; clear: both; content: ""; }
#hd_define li { float: left; font-size: var(--font-size-xs); letter-spacing: .02em; line-height: 36px; border-right: 1px solid var(--border-clr); padding: 0 14px 0 0; margin-right: 12px; }
#hd_define li:last-child { padding-right: 0; margin-right: 0; border-right: 0; }
#hd_define li a { color: var(--clr-gray-400); font-weight: 500; }
#hd_define li a:hover { color: var(--clr-primary-500); }
#hd_define li.active a { color: var(--clr-primary-600); font-weight: 700; }

#hd_qnb { float: right; }
#hd_qnb::after { display: block; visibility: hidden; clear: both; content: ""; }
#hd_qnb li { float: left; font-size: var(--font-size-xs); letter-spacing: .02em; line-height: 36px; border-right: 1px solid var(--border-clr); padding: 0 14px 0 0; margin-right: 12px; }
#hd_qnb li:last-child { padding-right: 0; margin-right: 0; border-right: 0; }
#hd_qnb li a { color: var(--clr-gray-400); }
#hd_qnb li a:hover { color: var(--clr-primary-500); }
#hd_qnb .visit .visit-num {
  display: inline-flex; align-items: center; justify-content: center;
  height: 18px; padding: 0 8px; margin-left: 5px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--clr-primary-500), var(--clr-primary-700));
  color: #fff; font-size: 10px; font-weight: 700; line-height: 1;
}

/* 헤더 래퍼 */
#hd_wrapper {
  position: relative; margin: 0 auto;
  height: var(--header-height);
  display: flex; align-items: center; gap: 32px;
}

/* 로고 */
#logo { flex-shrink: 0; display: flex; align-items: center; }
#logo img { max-height: 44px; width: auto; }

/* 검색창 */
.hd_sch_wr {
  flex: 1; max-width: 480px;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0; margin: 0;
}
#hd_sch {
  display: flex; align-items: center; width: 100%;
  background: var(--clr-gray-100);
  border: 1.5px solid transparent;
  border-radius: var(--radius-full); overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
#hd_sch:focus-within {
  background: var(--clr-gray-0);
  border-color: var(--clr-primary-500);
  box-shadow: 0 0 0 4px rgba(99,102,241,.12);
}
#hd_sch legend { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#hd_sch #sch_stx {
  flex: 1; height: 44px; padding: 0 18px;
  background: transparent; border: 0;
  font-size: var(--font-size-sm); color: var(--clr-gray-800);
  outline: none; box-shadow: none !important;
}
#hd_sch #sch_stx::placeholder { color: var(--clr-gray-400); }
#hd_sch #sch_submit {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 44px; border: 0;
  background: linear-gradient(135deg, var(--clr-primary-500), var(--clr-primary-700));
  color: #fff; font-size: 15px; cursor: pointer;
  transition: opacity var(--dur-fast);
}
#hd_sch #sch_submit:hover { opacity: .85; }

/* 로그인 */
.hd_login {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 2px;
  margin: 0; padding: 0;
}
.hd_login li { float: none; margin: 0; padding: 0; border: 0; list-style: none; }
.hd_login a {
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 12px;
  border-radius: var(--radius-md);
  color: var(--clr-gray-600);
  font-size: var(--font-size-sm); font-weight: 500;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.hd_login a:hover { background: var(--clr-primary-50); color: var(--clr-primary-600); }
.hd_login .tnb_admin a {
  background: linear-gradient(135deg, var(--clr-primary-500), var(--clr-primary-700));
  color: #fff; box-shadow: var(--shadow-primary);
}
.hd_login .tnb_admin a:hover { opacity: .9; }

/* =============================================
   GNB (메인 메뉴)
   ============================================= */
#gnb { background: rgba(255,255,255,0.98); border-bottom: 1px solid var(--border-clr); }
#gnb > h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#gnb .gnb_wrap { margin: 0 auto; position: relative; }
#gnb .gnb_wrap:hover, #gnb .gnb_wrap:focus { z-index: 100; }
#gnb #gnb_1dul { font-size: var(--font-size-sm); padding: 0; }
#gnb ul::after { display: block; visibility: hidden; clear: both; content: ""; }
#gnb .gnb_1dli { float: left; height: var(--gnb-height); position: relative; }

.gnb_1da {
  display: flex; align-items: center;
  height: var(--gnb-height); padding: 0 20px;
  font-size: var(--font-size-sm); font-weight: 600;
  color: var(--clr-gray-700); letter-spacing: .01em;
  position: relative;
  transition: color var(--dur-fast);
}
.gnb_1da::after {
  content: '';
  position: absolute; bottom: 0; left: 20px; right: 20px;
  height: 2.5px;
  background: var(--clr-primary-500);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transition: transform var(--dur-base) var(--ease-out);
  transform-origin: left;
}
.gnb_1dli:hover .gnb_1da, .gnb_1dli_over .gnb_1da { color: var(--clr-primary-600); }
.gnb_1dli:hover .gnb_1da::after, .gnb_1dli_over .gnb_1da::after { transform: scaleX(1); }
.gnb_1dli.gnb_al_li_plus .gnb_1da { padding-right: 28px; }
.gnb_1dli .bg {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  display: inline-block; width: 10px; height: 10px; overflow: hidden;
  background: url('../img/gnb_bg2.gif') no-repeat 50% 50%;
  text-indent: -999px; opacity: .35;
}

/* 2단 드롭다운 */
.gnb_2dli:first-child { border: 0; }
.gnb_2dul {
  display: none; position: absolute;
  top: calc(var(--gnb-height) + 2px); min-width: 180px; z-index: 200;
}
.gnb_2dul .gnb_2dul_box {
  background: var(--clr-gray-0);
  border: 1px solid var(--border-clr);
  border-radius: var(--radius-md); padding: 6px 0;
  box-shadow: var(--shadow-lg); overflow: hidden;
  animation: fadeDown var(--dur-base) var(--ease-out);
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gnb_2da {
  display: block; padding: 0 18px; line-height: 44px;
  font-size: var(--font-size-sm); color: var(--clr-gray-600);
  transition: background var(--dur-fast), color var(--dur-fast), padding-left var(--dur-fast);
}
a.gnb_2da:hover { background: var(--clr-primary-50); color: var(--clr-primary-600); padding-left: 22px; }
.gnb_1dli_over .gnb_2dul { display: block; left: 0; }
.gnb_1dli_over2 .gnb_2dul { display: block; right: 0; }
.gnb_wrap .gnb_empty { padding: 12px 0; width: 100%; text-align: center; line-height: 3em; color: var(--clr-gray-400); }
.gnb_wrap .gnb_empty a { color: var(--clr-primary-500); text-decoration: underline; }

/* 전체메뉴 버튼 */
#gnb .gnb_menu_btn {
  display: flex; align-items: center; justify-content: center;
  width: var(--gnb-height); height: var(--gnb-height);
  border: 0; background: transparent; color: var(--clr-gray-600);
  font-size: 18px; border-radius: 0;
  transition: color var(--dur-fast), background var(--dur-fast);
}
#gnb .gnb_menu_btn:hover { color: var(--clr-primary-600); background: var(--clr-primary-50); }
#gnb .gnb_close_btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--border-clr); border-radius: var(--radius-md);
  background: var(--clr-gray-0); color: var(--clr-gray-400); font-size: 18px;
  position: absolute; top: 16px; right: 16px;
  transition: all var(--dur-fast);
}
#gnb .gnb_close_btn:hover { background: var(--clr-gray-100); color: var(--clr-gray-700); }
#gnb .gnb_mnal { float: right; padding: 0; }

/* 전체메뉴 패널 */
#gnb_all {
  display: none; position: absolute; width: 100%;
  background: var(--clr-gray-0); z-index: 300;
  border: 1px solid var(--border-clr); border-top: none;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow: var(--shadow-xl); overflow: hidden;
  animation: slideDown var(--dur-slow) var(--ease-out);
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
#gnb_all h2 {
  font-size: var(--font-size-md); font-weight: 700;
  padding: 20px 28px; border-bottom: 1px solid var(--border-clr);
  color: var(--clr-gray-800);
}
#gnb_all .gnb_al_ul::after { display: block; visibility: hidden; clear: both; content: ""; }
#gnb_all .gnb_al_ul > li:nth-child(5n+1) { border-left: 0; }
#gnb_all .gnb_al_li { float: left; width: 20%; min-height: 140px; padding: 24px 28px; border-left: 1px solid var(--border-clr); }
#gnb_all .gnb_al_li .gnb_al_a {
  font-size: var(--font-size-sm); display: block; margin-bottom: 12px;
  font-weight: 700; color: var(--clr-primary-600); letter-spacing: .01em;
}
#gnb_all .gnb_al_li .gnb_al_a:hover { color: var(--clr-primary-700); }
#gnb_all .gnb_al_li li { line-height: 2.4em; }
#gnb_all .gnb_al_li li a {
  font-size: var(--font-size-sm); color: var(--clr-gray-500);
  transition: color var(--dur-fast), padding-left var(--dur-fast);
}
#gnb_all .gnb_al_li li a:hover { color: var(--clr-primary-600); padding-left: 4px; }
#gnb_all_bg {
  display: none;
  background: rgba(15,23,42,0.4);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 299;
}

/* =============================================
   콘텐츠 레이아웃
   ============================================= */
#wrapper {}
#container_wr { margin: 0 auto; }
#container_wr::after { display: block; visibility: hidden; clear: both; content: ""; }

#aside { float: right; width: 240px; margin: 32px 0 32px 24px; }

#container {
  position: relative; float: left;
  width: 910px; min-height: 500px; height: auto !important;
  margin: 32px 0;
  background: var(--clr-gray-0);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-clr);
  box-shadow: var(--shadow-sm);
  padding: 28px 32px;
}
#container::after { display: block; visibility: hidden; clear: both; content: ""; }

#container_title {
  font-size: var(--font-size-lg); font-weight: 800;
  color: var(--clr-gray-900);
  padding-bottom: 20px; margin-bottom: 24px;
  border-bottom: 1px solid var(--border-clr);
  letter-spacing: -.02em;
}
#container_title span { display: block; line-height: 1.4; }

.lt_wr { width: 32%; }
.lt_wr:nth-child(3n+1) { clear: both; }
.latest_wr { margin-bottom: 28px; }
.latest_wr::after { display: block; visibility: hidden; clear: both; content: ""; }
.latest_top_wr { margin: 0 -10px 28px; }
.latest_top_wr::after { display: block; visibility: hidden; clear: both; content: ""; }

/* =============================================
   푸터
   ============================================= */
#ft { background: var(--clr-gray-900); text-align: center; margin: 0; }
#ft h1 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#ft_wr { max-width: 1240px; margin: 0; padding: 52px 20px 0; display: inline-block; text-align: left; }
#ft_wr::after { display: block; visibility: hidden; clear: both; content: ""; }
#ft_wr .ft_cnt { width: 25%; float: left; padding: 0 24px; }

#ft_link { margin-bottom: 16px; }
#ft_link a {
  display: inline-block; color: var(--clr-gray-400);
  font-size: var(--font-size-sm); font-weight: 500;
  line-height: 2.4em; margin-right: 4px; padding: 0 4px;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast), background var(--dur-fast);
}
#ft_link a:hover { color: #fff; background: rgba(255,255,255,.06); }

#ft_company h2 {
  font-size: var(--font-size-sm); font-weight: 700;
  color: var(--clr-gray-300); margin-bottom: 14px;
  letter-spacing: .03em; text-transform: uppercase;
}
#ft_company { color: var(--clr-gray-500); font-size: var(--font-size-xs); line-height: 2.2em; }
#ft_catch { margin: 20px 0 10px; }
#ft_copy {
  text-align: center; width: var(--layout-width); margin: 36px auto 0;
  padding: 22px 0; color: var(--clr-gray-600); font-size: var(--font-size-xs);
  border-top: 1px solid rgba(255,255,255,.06); letter-spacing: .02em;
}

/* 상단이동 버튼 */
#top_btn {
  position: fixed; bottom: 28px; right: 28px;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  background: linear-gradient(135deg, var(--clr-primary-500), var(--clr-primary-700));
  color: #fff; font-size: 16px; border-radius: var(--radius-full);
  box-shadow: var(--shadow-primary); z-index: 90;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
#top_btn:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(99,102,241,.45); }

/* =============================================
   화면낭독기 / 건너뛰기
   ============================================= */
#hd_login_msg { position: absolute; top: 0; left: 0; font-size: 0; line-height: 0; overflow: hidden; }
.msg_sound_only, .sound_only {
  display: inline-block !important; position: absolute; top: 0; left: 0;
  width: 0; height: 0; margin: 0 !important; padding: 0 !important;
  font-size: 0; line-height: 0; border: 0 !important; overflow: hidden !important;
}
#skip_to_container a {
  z-index: 100000; position: absolute; top: 0; left: 0;
  width: 1px; height: 1px; font-size: 0; line-height: 0; overflow: hidden;
}
#skip_to_container a:focus, #skip_to_container a:active {
  width: 100%; height: 52px; background: var(--clr-primary-600); color: #fff;
  font-size: 1.2em; font-weight: 700; text-align: center; line-height: 52px; letter-spacing: .03em;
}

.img_fix { width: 100%; height: auto; }

/* =============================================
   게시물 복사/이동
   ============================================= */
#copymove .win_desc { text-align: center; display: block; }
#copymove .tbl_wrap { margin: 20px; }
#copymove .win_btn { padding: 0 20px 20px; }
.copymove_current {
  float: right; background: var(--clr-accent);
  padding: 4px 12px; color: #fff;
  border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 600;
}
.copymove_currentbg { background: var(--clr-gray-100); }

/* =============================================
   캡챠
   ============================================= */
#captcha { display: inline-block; position: relative; }
#captcha legend { position: absolute; font-size: 0; line-height: 0; text-indent: -9999em; overflow: hidden; }
#captcha #captcha_img { height: 40px; border: 1px solid var(--border-clr); vertical-align: top; border-radius: var(--radius-sm); }
#captcha #captcha_mp3 { margin: 0; padding: 0; width: 40px; height: 40px; border: 0; background: url('../../../img/captcha2.png') no-repeat; text-indent: -999px; cursor: pointer; border-radius: var(--radius-sm); vertical-align: middle; }
#captcha #captcha_reload { margin: 0; padding: 0; width: 40px; height: 40px; border: 0; background: url('../../../img/captcha2.png') no-repeat 0 -40px; text-indent: -999px; cursor: pointer; border-radius: var(--radius-sm); vertical-align: middle; }
#captcha #captcha_key { margin: 0 0 0 4px; padding: 0 8px; width: 90px; height: 40px; border: 1px solid var(--border-clr); background: var(--clr-gray-0); font-size: 1.25em; font-weight: 700; text-align: center; border-radius: var(--radius-sm); vertical-align: top; }
#captcha #captcha_info { display: block; margin: 5px 0 0; font-size: var(--font-size-xs); color: var(--clr-gray-400); }
#captcha.m_captcha audio { display: block; margin: 0 0 5px; width: 187px; }
#captcha.m_captcha #captcha_img { width: 160px; height: 60px; border: 1px solid var(--border-clr); margin: 5px 0 3px; display: block; border-radius: var(--radius-sm); }
#captcha.m_captcha #captcha_reload { position: static; }
#captcha.m_captcha #captcha_reload span { display: none; }
#captcha.m_captcha #captcha_key { margin: 0 0 0 4px; width: 115px; height: 29px; line-height: 29px; }
#captcha.m_captcha #captcha_mp3 { width: 31px; height: 31px; border: none; }

/* =============================================
   CKEditor
   ============================================= */
.cheditor-popup-window *, .cheditor-popup-window :after, .cheditor-popup-window :before {
  -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;
}
#bo_v_con ul { display: block; list-style-type: disc; margin: 1em 0; padding-left: 40px; }
#bo_v_con ol { display: block; list-style-type: decimal; margin: 1em 0; padding-left: 40px; }
#bo_v_con li { display: list-item; }

.cke_sc { margin: 0 0 6px; text-align: right; }
.btn_cke_sc {
  display: inline-block; padding: 0 12px; height: 28px;
  border: 1px solid var(--border-clr); background: var(--clr-gray-50);
  color: var(--clr-gray-600); text-decoration: none; line-height: 26px;
  vertical-align: middle; cursor: pointer; border-radius: var(--radius-sm);
  font-size: var(--font-size-xs); transition: background var(--dur-fast);
}
.btn_cke_sc:hover { background: var(--clr-gray-100); }
.cke_sc_def { margin: 0 0 6px; padding: 14px; border: 1px solid var(--border-clr); background: var(--clr-gray-50); border-radius: var(--radius-md); }
.cke_sc_def dl { margin: 0 0 5px; text-align: left; }
.cke_sc_def dl::after { display: block; visibility: hidden; clear: both; content: ""; }
.cke_sc_def dt, .cke_sc_def dd { float: left; margin: 0; padding: 6px 0; border-bottom: 1px solid var(--border-clr); }
.cke_sc_def dt { width: 20%; font-weight: 600; color: var(--clr-gray-700); }
.cke_sc_def dd { width: 30%; color: var(--clr-gray-500); }

/* =============================================
   버튼 시스템
   ============================================= */
a.btn, .btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 16px;
  font-weight: 600; font-size: var(--font-size-sm);
  border: 0; border-radius: var(--radius-md); cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out); letter-spacing: .01em;
}

a.btn01, button.btn01 {
  display: inline-flex; align-items: center; padding: 7px 14px;
  border: 1px solid var(--border-clr); background: var(--clr-gray-0);
  color: var(--clr-gray-600); border-radius: var(--radius-md);
  font-size: var(--font-size-sm); font-weight: 500;
  transition: all var(--dur-fast); cursor: pointer;
}
a.btn01:hover, button.btn01:hover { border-color: var(--clr-gray-300); background: var(--clr-gray-50); color: var(--clr-gray-800); }

a.btn02, button.btn02 {
  display: inline-flex; align-items: center; padding: 7px 14px;
  border: 1px solid var(--clr-gray-700); background: var(--clr-gray-800);
  color: #fff; border-radius: var(--radius-md);
  font-size: var(--font-size-sm); font-weight: 500; cursor: pointer;
  transition: all var(--dur-fast);
}
a.btn02:hover, button.btn02:hover { background: var(--clr-gray-900); }

.btn_confirm { text-align: right; }

.btn_submit {
  border: 0;
  background: linear-gradient(135deg, var(--clr-primary-500), var(--clr-primary-700));
  color: #fff; border-radius: var(--radius-md); font-weight: 600;
  box-shadow: 0 2px 8px rgba(99,102,241,.3);
  transition: opacity var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
.btn_submit:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(99,102,241,.4); }

.btn_close {
  border: 1px solid var(--border-clr); cursor: pointer;
  border-radius: var(--radius-md); background: var(--clr-gray-0);
  color: var(--clr-gray-600); transition: all var(--dur-fast);
}
.btn_close:hover { background: var(--clr-gray-100); border-color: var(--clr-gray-300); }
a.btn_close { text-align: center; line-height: 50px; }

a.btn_cancel, button.btn_cancel {
  display: inline-flex; align-items: center; padding: 7px 14px;
  background: var(--clr-gray-200); color: var(--clr-gray-600);
  border: 0; border-radius: var(--radius-md); font-size: var(--font-size-sm);
  font-weight: 500; cursor: pointer; transition: all var(--dur-fast);
}
.btn_cancel:hover { background: var(--clr-gray-300); color: var(--clr-gray-800); }

a.btn_frmline, button.btn_frmline {
  display: inline-flex; align-items: center; justify-content: center;
  width: 128px; height: 40px; padding: 0 8px;
  border: 0; background: var(--clr-gray-700);
  border-radius: var(--radius-md); color: #fff; font-weight: 500;
  font-size: var(--font-size-sm); cursor: pointer; transition: background var(--dur-fast);
}
a.btn_frmline:hover, button.btn_frmline:hover { background: var(--clr-gray-800); }

a.btn_b01, .btn_b01 { display: inline-flex; align-items: center; color: var(--clr-gray-300); border: 0; background: transparent; cursor: pointer; transition: color var(--dur-fast); }
.btn_b01:hover { color: var(--clr-gray-800); }
a.btn_b02, .btn_b02 {
  display: inline-flex; align-items: center;
  background: var(--clr-primary-500); padding: 5px 14px;
  color: #fff; border: 0; border-radius: var(--radius-md);
  font-size: var(--font-size-sm); font-weight: 600; transition: all var(--dur-fast);
}
a.btn_b02:hover, .btn_b02:hover { background: var(--clr-primary-700); }
a.btn_b03, .btn_b03 {
  display: inline-flex; align-items: center;
  background: var(--clr-gray-0); border: 1px solid var(--clr-gray-300);
  color: var(--clr-gray-600); border-radius: var(--radius-md); padding: 5px 12px;
  font-size: var(--font-size-sm); transition: all var(--dur-fast);
}
a.btn_b03:hover, .btn_b03:hover { background: var(--clr-primary-50); border-color: var(--clr-primary-500); color: var(--clr-primary-600); }
a.btn_b04, .btn_b04 {
  display: inline-flex; align-items: center;
  background: var(--clr-gray-0); border: 1px solid var(--border-clr);
  color: var(--clr-gray-600); border-radius: var(--radius-md); padding: 5px 12px;
  font-size: var(--font-size-sm); transition: all var(--dur-fast);
}
a.btn_b04:hover, .btn_b04:hover { background: var(--clr-gray-50); border-color: var(--clr-gray-300); color: var(--clr-gray-800); }
a.btn_admin, .btn_admin { display: inline-flex; align-items: center; color: var(--clr-accent); transition: color var(--dur-fast); }
.btn_admin:hover { color: #e11d48; }

/* =============================================
   테이블
   ============================================= */
.tbl_wrap table {
  width: 100%; border-collapse: collapse; border-spacing: 0;
  background: var(--clr-gray-0);
  border-top: 2px solid var(--clr-primary-500);
  border-bottom: 1px solid var(--border-clr);
}
.tbl_wrap caption { padding: 10px 0; font-weight: 700; text-align: left; color: var(--clr-gray-800); }

.tbl_head01 { margin: 0 0 16px; }
.tbl_head01 caption { padding: 0; font-size: 0; line-height: 0; overflow: hidden; }
.tbl_head01 thead th {
  padding: 14px 8px; font-weight: 600; font-size: var(--font-size-xs);
  text-align: center; letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid var(--border-clr);
  background: var(--clr-gray-50); color: var(--clr-gray-500);
}
.tbl_head01 thead th input { vertical-align: top; }
.tbl_head01 tfoot th, .tbl_head01 tfoot td { padding: 10px; border-top: 1px solid var(--border-clr); border-bottom: 1px solid var(--border-clr); background: var(--clr-gray-50); text-align: center; }
.tbl_head01 tbody th { padding: 12px 8px; border-bottom: 1px solid var(--border-clr); color: var(--clr-gray-700); font-weight: 500; }
.tbl_head01 td {
  color: var(--clr-gray-600); padding: 14px 8px;
  border-top: 1px solid var(--border-clr); border-bottom: 1px solid var(--border-clr);
  line-height: 1.5; height: 54px; word-break: break-all; font-size: var(--font-size-sm);
}
.tbl_head01 tbody tr { transition: background var(--dur-fast); }
.tbl_head01 tbody tr:hover td { background: var(--clr-primary-50); }
.tbl_head01 a { color: var(--clr-gray-700); }
.tbl_head01 a:hover { color: var(--clr-primary-600); text-decoration: underline; }

.tbl_head02 { margin: 0 0 16px; }
.tbl_head02 caption { padding: 0; font-size: 0; line-height: 0; overflow: hidden; }
.tbl_head02 thead th {
  padding: 12px 8px; border-top: 2px solid var(--clr-primary-500);
  border-bottom: 1px solid var(--border-clr);
  background: var(--clr-gray-50); color: var(--clr-gray-500);
  font-size: var(--font-size-xs); font-weight: 600;
  text-align: center; letter-spacing: .04em;
}
.tbl_head02 thead a { color: var(--clr-gray-600); }
.tbl_head02 thead th input { vertical-align: top; }
.tbl_head02 tfoot th, .tbl_head02 tfoot td { padding: 10px; border-top: 1px solid var(--border-clr); border-bottom: 1px solid var(--border-clr); background: var(--clr-gray-50); text-align: center; }
.tbl_head02 tbody th { padding: 10px 8px; border-top: 1px solid var(--border-clr); border-bottom: 1px solid var(--border-clr); background: var(--clr-gray-0); }
.tbl_head02 td { padding: 10px 8px; border-top: 1px solid var(--border-clr); border-bottom: 1px solid var(--border-clr); background: var(--clr-gray-0); line-height: 1.5; word-break: break-all; font-size: var(--font-size-sm); }

/* =============================================
   폼 테이블
   ============================================= */
.tbl_frm01 { margin: 0 0 24px; }
.tbl_frm01 table { width: 100%; border-collapse: collapse; border-spacing: 0; }
.tbl_frm01 th {
  width: 90px; padding: 10px 16px;
  border: 1px solid var(--border-clr); border-left: 0;
  background: var(--clr-gray-50); text-align: left;
  font-weight: 600; font-size: var(--font-size-sm); color: var(--clr-gray-600);
}
.tbl_frm01 td { padding: 9px 12px; border-top: 1px solid var(--border-clr); border-bottom: 1px solid var(--border-clr); }
.wr_content textarea, .tbl_frm01 textarea, .form_01 textarea, .frm_input {
  border: 1.5px solid var(--border-clr); background: var(--clr-gray-0);
  color: var(--clr-gray-800); vertical-align: middle;
  border-radius: var(--radius-md); padding: 8px 12px;
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.tbl_frm01 textarea { padding: 10px 12px; }
.frm_input { height: 42px; }
.full_input { width: 100%; }
.half_input { width: 49.5%; }
.twopart_input { width: 385px; margin-right: 10px; }
.tbl_frm01 textarea, .write_div textarea { width: 100%; height: 100px; }
.tbl_frm01 a { text-decoration: none; color: var(--clr-primary-500); }
.tbl_frm01 .frm_file { display: block; margin-bottom: 5px; }
.tbl_frm01 .frm_info { display: block; padding: 0 0 5px; line-height: 1.7; color: var(--clr-gray-400); font-size: var(--font-size-xs); }
.frm_info.add_info { margin-top: 10px !important; padding: 12px 16px; background: var(--clr-gray-50); border: 1px solid var(--border-clr); border-radius: var(--radius-md); line-height: 1.7; }
.btn_info_toggle { display: block; margin: 5px 0 0 21px; font-size: var(--font-size-xs); color: var(--clr-primary-500); background: none; border: none; cursor: pointer; text-decoration: underline; }

/* =============================================
   리스트
   ============================================= */
.list_01 ul { border-top: 1px solid var(--border-clr); }
.list_01 li { border-bottom: 1px solid var(--border-clr); background: var(--clr-gray-0); padding: 13px 18px; position: relative; transition: background var(--dur-fast); }
.list_01 li:nth-child(odd) { background: var(--clr-gray-50); }
.list_01 li::after { display: block; visibility: hidden; clear: both; content: ""; }
.list_01 li:hover { background: var(--clr-primary-50); }
.list_01 li.empty_li { text-align: center; padding: 28px 0; color: var(--clr-gray-400); }

.form_01 h2 { font-size: 1.1em; font-weight: 700; }
.form_01 li { margin-bottom: 12px; }
.form_01 ul::after, .form_01 li::after { display: block; visibility: hidden; clear: both; content: ""; }
.form_01 .left_input { float: left; }
.form_01 .margin_input { margin-right: 1%; }
.form_01 textarea { height: 100px; width: 100%; }
.form_01 .frm_label { display: inline-block; width: 130px; }

.empty_table { padding: 60px 0 !important; text-align: center; color: var(--clr-gray-400); font-size: var(--font-size-md); }
.empty_list  { padding: 28px 0 !important; color: var(--clr-gray-400); text-align: center; }

.required, textarea.required { background-image: url('../img/require.png') !important; background-repeat: no-repeat !important; background-position: right top !important; }

.td_board, .td_category, .td_group, .td_mng { width: 80px; text-align: center; }
.td_chk { width: 30px; text-align: center; }
.td_date { width: 60px; text-align: center; }
.td_datetime { width: 110px; text-align: center; }
.td_mb_id, .td_nick { width: 100px; text-align: center; }
.td_name { width: 100px; text-align: left; }
.td_num { width: 50px; text-align: center; }
.td_numbig { width: 80px; text-align: center; }
.td_stat { width: 60px; text-align: center; }

.txt_active  { color: var(--clr-success); font-weight: 600; }
.txt_done    { color: var(--clr-accent); font-weight: 600; }
.txt_expired { color: var(--clr-gray-300); }
.txt_rdy     { color: var(--clr-warning); font-weight: 600; }

/* =============================================
   새창 팝업
   ============================================= */
.new_win { position: relative; }
.new_win .tbl_wrap { margin: 0 20px; }
.new_win #win_title {
  font-size: var(--font-size-lg); font-weight: 800;
  height: 60px; line-height: 40px; padding: 10px 24px;
  background: var(--clr-gray-0); color: var(--clr-gray-900);
  border-bottom: 1px solid var(--border-clr);
}
.new_win #win_title .sv { font-size: var(--font-size-xs); line-height: 1.4; }
.new_win .win_ul { margin-bottom: 16px; padding: 0 24px; }
.new_win .win_ul::after { display: block; visibility: hidden; clear: both; content: ""; }
.new_win .win_ul li {
  float: left; background: var(--clr-gray-0); text-align: center; padding: 0 16px;
  border: 1.5px solid var(--border-clr); border-radius: var(--radius-full);
  margin-left: 6px; transition: all var(--dur-fast);
}
.new_win .win_ul li:first-child { margin-left: 0; }
.new_win .win_ul li a { display: block; padding: 8px 0; color: var(--clr-primary-500); font-size: var(--font-size-sm); font-weight: 500; }
.new_win .win_ul .selected { background: var(--clr-primary-500); border-color: var(--clr-primary-500); }
.new_win .win_ul .selected a { color: #fff; font-weight: 700; }
.new_win .win_desc {
  position: relative; margin: 10px; border-radius: var(--radius-md);
  font-size: var(--font-size-sm); background: #fff1f2; color: var(--clr-accent);
  line-height: 50px; padding: 0 20px; border: 1px solid #fecdd3;
}
.new_win .win_desc::after { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 50px; background: var(--clr-accent); border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.new_win .frm_info { font-size: var(--font-size-xs); color: var(--clr-gray-400); }
.new_win .win_total {
  float: right; display: inline-block; line-height: 30px; font-weight: 500;
  font-size: var(--font-size-xs); color: var(--clr-primary-500);
  background: var(--clr-primary-50); padding: 0 12px; border-radius: var(--radius-full);
}
.new_win .new_win_con { margin: 20px 0; padding: 20px; }
.new_win .new_win_con::after { display: block; visibility: hidden; clear: both; content: ""; }
.new_win .new_win_con2 { margin: 20px 0; }
.new_win .btn_confirm::after { display: block; visibility: hidden; clear: both; content: ""; }
.new_win .win_btn { text-align: center; }
.new_win .cert_btn { margin-bottom: 30px; text-align: center; }
.new_win .btn_close { padding: 0 20px; height: 46px; overflow: hidden; cursor: pointer; }
.new_win .btn_submit { padding: 0 24px; height: 46px; font-weight: 700; font-size: var(--font-size-sm); }

/* =============================================
   검색 하이라이트
   ============================================= */
.sch_word {
  color: #fff;
  background: linear-gradient(135deg, var(--clr-accent), #e11d48);
  padding: 2px 7px 3px; border-radius: var(--radius-sm);
  font-size: var(--font-size-xs); font-weight: 700;
  line-height: 18px; margin: 0 2px;
}

/* =============================================
   JS alert 대안
   ============================================= */
#validation_check { margin: 100px auto; width: 500px; }
#validation_check h1 { margin-bottom: 20px; font-size: var(--font-size-xl); font-weight: 800; color: var(--clr-gray-900); }
#validation_check p { margin-bottom: 20px; padding: 32px 24px; border: 1px solid var(--border-clr); background: var(--clr-gray-0); border-radius: var(--radius-lg); color: var(--clr-gray-600); line-height: 1.8; }

/* =============================================
   사이드뷰
   ============================================= */
.sv_wrap { position: relative; font-weight: normal; }
.sv_wrap .sv {
  z-index: 1000; display: none; margin: 6px 0 0;
  font-size: var(--font-size-xs); background: var(--clr-gray-800);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); overflow: hidden;
  animation: fadeDown var(--dur-base) var(--ease-out);
}
.sv_wrap .sv::before {
  content: ""; position: absolute; top: -6px; left: 15px; width: 0; height: 0;
  border-style: solid; border-width: 0 6px 6px 6px;
  border-color: transparent transparent var(--clr-gray-800) transparent;
}
.sv_wrap .sv a {
  display: block; padding: 0 14px; line-height: 38px; width: 120px;
  color: var(--clr-gray-400); transition: all var(--dur-fast);
}
.sv_wrap .sv a:hover { background: var(--clr-gray-900); color: #fff; }
.sv_member { color: var(--clr-gray-700); }
.sv_on { display: block !important; position: absolute; top: 24px; left: 0; width: auto; height: auto; }
.sv_nojs .sv { display: block; }

/* =============================================
   페이징
   ============================================= */
.pg_wrap { clear: both; float: left; display: inline-block; }
.pg_wrap::after { display: block; visibility: hidden; clear: both; content: ""; }
.pg { text-align: center; }
.pg_page, .pg_current { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.pg a:focus, .pg a:hover { text-decoration: none; }

.pg_page {
  height: 36px; min-width: 36px; padding: 0 10px;
  font-size: var(--font-size-sm); color: var(--clr-gray-500);
  border: 1.5px solid var(--border-clr); border-radius: var(--radius-md);
  background: var(--clr-gray-0); margin: 0 2px;
  transition: all var(--dur-fast);
}
.pg_page:hover { background: var(--clr-primary-50); border-color: var(--clr-primary-500); color: var(--clr-primary-600); }

.pg_start { background: var(--clr-gray-0) url('../img/btn_first.gif') no-repeat 50% 50%; text-indent: -999px; overflow: hidden; padding: 0; border: 1.5px solid var(--border-clr); }
.pg_prev  { background: var(--clr-gray-0) url('../img/btn_prev.gif')  no-repeat 50% 50%; text-indent: -999px; overflow: hidden; padding: 0; border: 1.5px solid var(--border-clr); }
.pg_end   { background: var(--clr-gray-0) url('../img/btn_end.gif')   no-repeat 50% 50%; text-indent: -999px; overflow: hidden; padding: 0; border: 1.5px solid var(--border-clr); }
.pg_next  { background: var(--clr-gray-0) url('../img/btn_next.gif')  no-repeat 50% 50%; text-indent: -999px; overflow: hidden; padding: 0; border: 1.5px solid var(--border-clr); }
.pg_start:hover, .pg_prev:hover, .pg_end:hover, .pg_next:hover { background-color: var(--clr-primary-50); border-color: var(--clr-primary-500); }

.pg_current {
  height: 36px; min-width: 36px; padding: 0 12px;
  background: linear-gradient(135deg, var(--clr-primary-500), var(--clr-primary-700));
  border: 0; color: #fff; font-weight: 700; font-size: var(--font-size-sm);
  border-radius: var(--radius-md); margin: 0 2px;
  box-shadow: 0 2px 8px rgba(99,102,241,.3);
}

/* =============================================
   모바일 전환
   ============================================= */
#device_change {
  display: block; margin: .4em; padding: .6em 0;
  border: 1.5px solid var(--border-clr); border-radius: var(--radius-full);
  background: var(--clr-gray-0); color: var(--clr-gray-600);
  font-size: 1.4em; font-weight: 500; text-align: center;
  transition: all var(--dur-base) var(--ease-out);
}
#device_change:hover {
  background: var(--clr-primary-500); border-color: var(--clr-primary-500);
  color: #fff; box-shadow: var(--shadow-primary);
}