@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');
/* ========================================
   Gnuboard5 Modern Admin Skin
   기존 레이아웃 구조 유지 + 모던 스타일링
   ======================================== */

/* CSS Variables */
:root {
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --sidebar-bg: #1e293b;
  --sidebar-icon-bg: #0f172a;
  --sidebar-hover: #334155;
  --sidebar-text: #94a3b8;
  --sidebar-text-active: #ffffff;
  --header-bg: #0f172a;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --bg: #f1f5f9;
  --card: #ffffff;
  --border: #e2e8f0;
  --text: #0f172a;
  --text-muted: #64748b;
  --radius: 8px;
  --radius-sm: 4px;
  --shadow: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  /* Size System */
  --input-height: 32px;
  --btn-height: 32px;
  --font-size: 13px;
  --font-size-sm: 12px;
  --spacing: 16px;
  --spacing-sm: 10px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-y: scroll; }
body {
  margin: 0; padding: 0;
  font-size: var(--font-size);
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img { margin: 0; padding: 0; border: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
li, dt, dd { margin: 0; padding: 0; }
ol { list-style-position: inside; }
legend { position: absolute; font-size: 0; text-indent: -9999em; overflow: hidden; }
label, input, button, select, img { vertical-align: middle; }
input, button, textarea, select { font-family: inherit; font-size: inherit; }
button, input[type="submit"] { cursor: pointer; }
p { margin: 0; padding: 0; word-break: break-all; }
pre { overflow-x: auto; font-size: 13px; background: #1e293b; color: #e2e8f0; padding: 16px; border-radius: var(--radius-sm); }
a:link, a:visited { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h2 { font-size: 16px; font-weight: 600; margin: 10px 0; }

#wrapper { min-height: 480px; }

/* 공통 유틸 */
.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; } }

/* 팝업 */
.popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 9999; display: flex; justify-content: center; align-items: center; }
.popup-content { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 90%; max-width: 600px; overflow: hidden; }
.popup-header, .popup-footer { padding: 16px 20px; display: flex; align-items: center; }
.popup-header { justify-content: space-between; border-bottom: 1px solid var(--border); }
.popup-footer { gap: 12px; border-top: 1px solid var(--border); }
.popup-close-btn { background: none; border: none; color: var(--text-muted); font-size: 24px; cursor: pointer; }
.popup-title { font-size: 16px; font-weight: 600; }
.popup-body { padding: 20px; max-height: 60vh; overflow-y: auto; }
.popup-footer button { background: var(--primary); color: #fff; border: none; padding: 10px 20px; border-radius: var(--radius-sm); font-weight: 500; cursor: pointer; }

/* 탭 */
.tab-header { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 16px; }
.tab-btn { padding: 10px 16px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; color: var(--text-muted); }
.tab-btn.active { border-bottom-color: var(--primary); color: var(--primary); font-weight: 600; }

/* ========================================
   Header (상단바)
   ======================================== */
#hd h1 { position: absolute; font-size: 0; overflow: hidden; }

#hd_top {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 50px;
  background: var(--header-bg);
  z-index: 1000;
  display: flex;
  align-items: center;
}
#hd_top:after { display: block; visibility: hidden; clear: both; content: ""; }

#logo {
  background: var(--sidebar-icon-bg);
  height: 50px;
  float: left;
  width: 220px;
  padding: 0 15px 0 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#logo a { color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; }
#logo a:hover { text-decoration: none; }
#logo img { max-height: 28px; width: auto; }

#btn_gnb {
  width: 50px;
  height: 50px;
  border: 0;
  position: absolute;
  top: 0; left: 0;
  text-indent: -999px;
  overflow: hidden;
  background: var(--sidebar-icon-bg);
  cursor: pointer;
  transition: background 0.2s;
}
#btn_gnb::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 18px; height: 2px;
  background: #fff;
  box-shadow: 0 -5px 0 #fff, 0 5px 0 #fff;
  transition: 0.2s;
}
#btn_gnb:hover { background: var(--sidebar-hover); }
#btn_gnb.btn_gnb_open::before {
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: none;
}
#btn_gnb.btn_gnb_open::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 18px; height: 2px;
  background: #fff;
}

/* Top Navigation */
#tnb { float: right; padding: 10px; margin-left: auto; }
#tnb ul:after { display: block; visibility: hidden; clear: both; content: ""; }
#tnb li { float: left; position: relative; margin-left: 3px; }
#tnb a { color: var(--sidebar-text); padding: 0 10px; display: block; line-height: 30px; height: 30px; border-radius: var(--radius-sm); font-size: var(--font-size); }
#tnb a:hover { background: var(--sidebar-hover); color: #fff; text-decoration: none; }

#tnb .tnb_service { background: var(--sidebar-hover); color: #fff; padding: 0 10px; line-height: 30px; height: 30px; border-radius: var(--radius-sm); }
#tnb .tnb_service:hover { background: var(--primary); }

#tnb button {
  min-width: 80px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--sidebar-hover);
  color: #fff;
  padding: 0 28px 0 10px;
  height: 30px;
  line-height: 30px;
  position: relative;
  font-size: var(--font-size);
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
#tnb button span {
  display: block;
  text-indent: -999px;
  overflow: hidden;
  width: 24px; height: 100%;
  position: absolute;
  top: 0; right: 0;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='white' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") center no-repeat;
  background-size: 16px;
}
#tnb button:hover { background: var(--primary); }

#tnb .tnb_mb_area {
  display: none;
  background: var(--card);
  min-width: 100px;
  position: absolute;
  right: 0; top: 100%;
  margin-top: 2px;
  padding: 4px 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
#tnb .tnb_mb_area a { color: var(--text); padding: 6px 12px; height: auto; line-height: 1.4; }
#tnb .tnb_mb_area a:hover { background: var(--bg); }
#tnb .tnb_mb_area li { float: none; margin: 0; }

#tnb .tnb_community,
#tnb .tnb_shop {
  width: 30px; height: 30px;
  overflow: hidden;
  text-indent: -999px;
  border-radius: var(--radius-sm);
  opacity: 0.7;
}
#tnb .tnb_community { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E") center no-repeat; }
#tnb .tnb_shop { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center no-repeat; }
#tnb .tnb_community:hover,
#tnb .tnb_shop:hover { background-color: var(--sidebar-hover); opacity: 1; }

/* ========================================
   Sidebar (GNB)
   ======================================== */
#gnb {
  position: fixed;
  top: 0; left: 0;
  max-width: 220px;
  height: 100%;
  padding-top: 50px;
  z-index: 999;
}
#gnb h2 { position: absolute; font-size: 0; overflow: hidden; }

#gnb .gnb_ul {
  position: relative;
  height: 100%;
  background: var(--sidebar-icon-bg);
  width: 50px;
}

#gnb .gnb_li { border-bottom: 1px solid rgba(255,255,255,0.05); }

#gnb .gnb_li button {
  background: var(--sidebar-icon-bg) !important;
  border: 0;
  width: 50px;
  height: 50px;
  text-indent: -999px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
}
#gnb .gnb_li button:hover { background-color: var(--sidebar-hover) !important; }
#gnb .gnb_li.on button { background-color: var(--sidebar-bg) !important; }

/* 메뉴 아이콘 - SVG */
#gnb .gnb_li .btn_op { background: var(--sidebar-icon-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E") center no-repeat !important; }
#gnb .on .btn_op { background: var(--sidebar-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E") center no-repeat !important; }

#gnb .gnb_li .btn_op.menu-100 { background: var(--sidebar-icon-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") center no-repeat !important; }
#gnb .on .btn_op.menu-100 { background: var(--sidebar-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") center no-repeat !important; }

#gnb .gnb_li .btn_op.menu-200 { background: var(--sidebar-icon-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center no-repeat !important; }
#gnb .on .btn_op.menu-200 { background: var(--sidebar-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center no-repeat !important; }

#gnb .gnb_li .btn_op.menu-300 { background: var(--sidebar-icon-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/svg%3E") center no-repeat !important; }
#gnb .on .btn_op.menu-300 { background: var(--sidebar-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/svg%3E") center no-repeat !important; }

#gnb .gnb_li .btn_op.menu-400 { background: var(--sidebar-icon-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center no-repeat !important; }
#gnb .on .btn_op.menu-400 { background: var(--sidebar-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center no-repeat !important; }

#gnb .gnb_li .btn_op.menu-500 { background: var(--sidebar-icon-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E") center no-repeat !important; }
#gnb .on .btn_op.menu-500 { background: var(--sidebar-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E") center no-repeat !important; }

#gnb .gnb_li .btn_op.menu-900 { background: var(--sidebar-icon-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E") center no-repeat !important; }
#gnb .on .btn_op.menu-900 { background: var(--sidebar-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E") center no-repeat !important; }

/* 서브메뉴 패널 */
#gnb .gnb_oparea {
  display: none;
  position: absolute;
  top: 0; left: 50px;
  background: var(--sidebar-bg);
  height: 100%;
  width: 170px;
  padding: 16px 0;
  box-shadow: 4px 0 10px rgba(0,0,0,0.2);
  overflow-y: auto;
}
#gnb .on .gnb_oparea { display: block; }
#gnb .gnb_oparea h3 {
  margin: 0 0 12px;
  padding: 0 16px 12px;
  line-height: 1.4;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
#gnb .gnb_oparea li { line-height: 1.4; }
#gnb .gnb_oparea li a {
  display: block;
  padding: 10px 16px;
  color: var(--sidebar-text);
  font-size: 13px;
  transition: 0.15s;
}
#gnb .gnb_oparea li a:hover,
#gnb .gnb_oparea li a.on {
  background: var(--sidebar-hover);
  color: #fff;
  text-decoration: none;
}
#gnb.gnb_small .gnb_oparea { display: none; }
#gnb.gnb_small .gnb_li:hover .gnb_oparea { display: block; }
.gnb_small .gnb_ul { display: block; }

/* ========================================
   Container (메인 영역)
   ======================================== */
#container {
  padding: 0 0 0 220px;
  margin-top: 100px;
  min-height: calc(100vh - 100px);
  background: var(--bg);
  min-width: 1000px;
}
#container.container-small { padding-left: 50px; }

#container_title {
  position: fixed;
  top: 50px; left: 0;
  width: 100%;
  line-height: 50px;
  font-size: 18px;
  font-weight: 600;
  padding: 0 24px 0 244px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  z-index: 99;
}
#container.container-small #container_title { padding-left: 74px; }

.container_wr { padding: var(--spacing); }
#container_wr { padding: var(--spacing); min-height: 500px; }

/* 스크린 리더 */
#hd_login_msg { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.sound_only, .msg_sound_only { overflow: hidden; position: absolute; width: 1px; height: 1px; clip: rect(0,0,0,0); }
#to_content a { z-index: 100000; position: absolute; top: 0; left: 0; font-size: 0; overflow: hidden; }
#to_content a:focus { width: 100%; height: 70px; background: #fff; font-size: 1.5em; font-weight: bold; text-align: center; line-height: 3; }

/* ========================================
   Cards & Boxes
   ======================================== */
.local_desc {
  background: var(--card);
  padding: var(--spacing-sm) var(--spacing);
  margin-bottom: var(--spacing);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.local_desc h2 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text);
}
.local_desc p { color: var(--text-muted); font-size: var(--font-size); margin: 0; }

/* Stats Overview */
.local_ov { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; margin-bottom: var(--spacing); }
.local_ov:after { display: block; visibility: hidden; clear: both; content: ""; }
.local_ov > div {
  flex: 1;
  min-width: 140px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--spacing);
}
.local_ov strong {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.local_ov span { color: var(--text-muted); font-size: var(--font-size-sm); }
.local_ov a { color: var(--primary); }
.btn_ov01 { display: inline-flex; align-items: center; height: 28px; font-size: 12px; vertical-align: top; }
.btn_ov01 .ov_txt { background: var(--primary); color: #fff; border-radius: var(--radius-sm) 0 0 var(--radius-sm); padding: 0 8px; height: 100%; display: flex; align-items: center; }
.btn_ov01 .ov_num { background: var(--bg); color: var(--text); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 0 8px; height: 100%; display: flex; align-items: center; }
a.btn_ov02, a.ov_listall { display: inline-flex; align-items: center; height: 28px; font-size: 12px; background: var(--sidebar-bg); color: #fff; border-radius: var(--radius-sm); padding: 0 10px; }
a.btn_ov02:hover, a.ov_listall:hover { background: var(--primary); text-decoration: none; }

/* ========================================
   Tables
   ======================================== */
.tbl_wrap {
  width: 100%;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: var(--spacing-sm);
}
.tbl_wrap > table { border-radius: var(--radius); overflow: hidden; }
table { width: 100%; border-collapse: collapse; border-spacing: 0; }
table caption { height: 0; font-size: 0; line-height: 0; overflow: hidden; }
table td { line-height: 1.6; }
tfoot th, tfoot td { border: 1px solid var(--border); background: var(--bg); padding: 10px; text-align: center; font-weight: 600; }

.tbl_head01 thead th {
  background: #64748b;
  color: #fff;
  font-weight: 500;
  font-size: var(--font-size-sm);
  padding: 8px 10px;
  text-align: center;
  border: 1px solid #5b6b7d;
  white-space: nowrap;
}
.tbl_head01 thead th a { color: #fff; }
.tbl_head01 tbody th {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: center;
  font-weight: 500;
}
.tbl_head01 tbody td {
  padding: 8px 10px;
  border: 1px solid var(--border);
  font-size: var(--font-size);
  color: var(--text);
  vertical-align: middle;
  text-align: center;
}
.tbl_head01 tbody tr:nth-child(even) { background: #f8fafc; }
.tbl_head01 tbody tr:hover { background: #f1f5f9; }
.tbl_head01 .td_chk, .tbl_head01 .td_num, .tbl_head01 .td_mng { text-align: center; }
.tbl_head01 tbody td .frm_input { width: 100%; }
.tbl_head01 tbody td select { width: 100%; }
.tbl_head01 a { color: var(--text); }
.tbl_head01 a:hover { color: var(--primary); }

.empty_table, .empty_list { text-align: center; padding: 40px 20px; color: var(--text-muted); }

/* thead 두 줄 테이블 */
.tbl_head02 table { width: 100%; border-collapse: collapse; }
.tbl_head02 thead th,
.tbl_head02 tbody th {
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-weight: 500;
  font-size: var(--font-size-sm);
}
.tbl_head02 tbody td {
  padding: 8px 10px;
  border: 1px solid var(--border);
  line-height: 1.5;
  word-break: break-all;
}

/* ========================================
   Forms
   ======================================== */
.form_01, .tbl_frm01 {
  width: 100%;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: var(--spacing-sm);
}
.form_01 th {
  background: var(--bg);
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  font-size: var(--font-size);
  color: var(--text);
  width: 160px;
  vertical-align: middle;
  border: 1px solid var(--border);
}
.form_01 td {
  padding: 10px 14px;
  border: 1px solid var(--border);
  vertical-align: middle;
}
.form_01 td { line-height: var(--input-height); }
.form_01 td input[type="text"],
.form_01 td input[type="number"] { margin: 0 3px; }
.form_01 td input[size="1"],
.form_01 td input[size="2"],
.form_01 td input[size="3"],
.form_01 td input[size="4"],
.form_01 td input[size="5"] { width: auto; min-width: 45px; text-align: center; }
.tbl_frm01 { padding: var(--spacing); }
.tbl_frm01 table { border-collapse: collapse; }
.tbl_frm01 th {
  padding: 10px;
  text-align: left;
  font-weight: 600;
  font-size: var(--font-size);
  width: 140px;
  vertical-align: top;
  background: var(--bg);
  border: 1px solid var(--border);
}
.tbl_frm01 td {
  padding: 10px;
  vertical-align: top;
  line-height: var(--input-height);
  border: 1px solid var(--border);
}
.tbl_frm01 td input[type="text"],
.tbl_frm01 td input[type="number"] { margin: 0 3px; }
.tbl_frm01 textarea { min-height: 120px; }

/* Form Inputs */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"] {
  padding: 0 10px;
  height: var(--input-height);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size);
  color: var(--text);
  background: var(--card);
  transition: 0.15s;
}
input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(59,130,246,0.1); }

select {
  height: var(--input-height);
  padding: 0 28px 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size);
  color: var(--text);
  background: var(--card) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%236b7280' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") right 6px center no-repeat;
  background-size: 14px;
  appearance: none;
  cursor: pointer;
}
select:focus { outline: none; border-color: var(--primary); }

textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size);
  color: var(--text);
  min-height: 80px;
  resize: vertical;
}
textarea:focus { outline: none; border-color: var(--primary); }

input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

input[type="file"] {
  padding: 6px 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: pointer;
  font-size: var(--font-size-sm);
}

.frm_input { max-width: 320px; width: 100%; }
.frm_input.full_input, .frm_input_full { max-width: 100%; }
.required {
  border-left: 3px solid var(--danger) !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}
.required:focus {
  border-color: var(--border) !important;
  border-left-color: var(--danger) !important;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.1) !important;
}
.frm_info { display: block; margin-top: 4px; font-size: var(--font-size-sm); color: var(--text-muted); }

/* 인라인 폼 요소 정렬 */
td label { margin-right: 6px; }
td label input[type="checkbox"],
td label input[type="radio"] { margin-right: 3px; }
td input + label,
td select + label { margin-left: 12px; }
.form_01 td > label,
.tbl_frm01 td > label { display: inline-flex; align-items: center; margin-right: 12px; line-height: var(--input-height); }
.sitecode { display: inline-block; font: bold var(--font-size) 'Consolas', monospace; vertical-align: middle; background: var(--bg); padding: 3px 6px; border-radius: var(--radius-sm); }
.sitecode.title { width: 80px; }
.code_input { font: bold var(--font-size) 'Consolas', monospace; }

/* ========================================
   Buttons
   ======================================== */
.btn,
.btn_01,
.btn_02,
.btn_03,
.btn_submit,
.btn_cancel,
.btn_confirm,
.btn_frmline,
button[type="submit"],
input[type="submit"],
input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: var(--btn-height);
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size);
  font-weight: 500;
  cursor: pointer;
  transition: 0.15s;
  border: none;
  vertical-align: middle;
}
a.btn, a.btn_01, a.btn_02, a.btn_03, a.btn_submit, a.btn_frmline {
  display: inline-flex;
  align-items: center;
  height: var(--btn-height);
  text-decoration: none;
}

.btn_submit, .btn_01, a.btn_01, button[type="submit"], input[type="submit"] { background: var(--primary); color: #fff; }
.btn_submit:hover, .btn_01:hover, a.btn_01:hover { background: var(--primary-dark); }

.btn, .btn_02, a.btn_02, .btn_frmline, a.btn_frmline, input[type="button"] { background: #64748b; color: #fff; }
.btn:hover, .btn_02:hover, a.btn_02:hover { background: #475569; text-decoration: none; }

.btn_03, a.btn_03 { background: var(--sidebar-bg); color: #fff; }
.btn_03:hover, a.btn_03:hover { background: var(--header-bg); }

.btn_confirm {
  margin: 0 0 var(--spacing);
  padding: var(--spacing-sm) var(--spacing);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.btn_fixed_top {
  position: fixed;
  top: 58px;
  right: var(--spacing);
  z-index: 100;
  display: flex;
  gap: 6px;
}
.btn_fixed_top.btn_confirm {
  margin: 0;
  padding: 0;
}
.btn_list {
  margin: var(--spacing-sm) 0;
  padding: var(--spacing-sm) var(--spacing);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.td_mng a.btn, .td_mng a, .td_mng button {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font-size: var(--font-size-sm);
  margin: 1px;
}
.td_mng a:hover, .td_mng button:hover { background: var(--bg); text-decoration: none; }

/* Additional Button Classes */
.btn_confirm01 button, .btn_confirm02 button { padding: 0 12px; height: var(--btn-height); border: 0; background: var(--primary); color: #fff; border-radius: var(--radius-sm); }
.btn_confirm01 a, .btn_confirm02 a { display: inline-flex; align-items: center; padding: 0 12px; height: var(--btn-height); background: var(--primary); color: #fff; text-decoration: none; border-radius: var(--radius-sm); }
.btn_win { margin: 0 var(--spacing) var(--spacing-sm); }
.btn_win01, .btn_win02 { clear: both; text-align: center; margin: var(--spacing-sm) 0; }
.btn_win01 a, .btn_win01 button { display: inline-flex; align-items: center; padding: 0 10px; height: 28px; border: 1px solid var(--border); background: var(--card); border-radius: var(--radius-sm); font-size: var(--font-size-sm); }
.btn_add { margin: var(--spacing-sm) 0; }
.btn_add01 { text-align: right; }
.btn_add01 a, .btn_add01 button { display: inline-flex; align-items: center; padding: 8px 12px; border: 1px solid var(--border); background: var(--bg); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--font-size); }

/* ========================================
   Pagination
   ======================================== */
.pg_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  margin: var(--spacing) 0;
  padding: var(--spacing-sm);
}
.pg_wrap a, .pg_wrap strong, .pg_wrap span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
}
.pg_wrap a:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.pg_wrap .pg_current, .pg_wrap strong { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }

/* ========================================
   Search Form
   ======================================== */
.local_frm, .local_sch {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  background: var(--card);
  padding: var(--spacing-sm) var(--spacing);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: var(--spacing);
}
.local_sch:after, .local_sch div:after { display: block; visibility: hidden; clear: both; content: ""; }
.local_sch select { height: var(--input-height); margin-right: 3px; }
.local_sch .sch_input { height: var(--input-height); border: 1px solid var(--border); border-right: 0; padding: 0 10px; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.local_sch .frm_input { height: var(--input-height); }
.local_sch .btn_sch {
  width: var(--input-height); height: var(--input-height);
  padding: 0;
  border: 1px solid var(--border);
  border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") center no-repeat;
  text-indent: -999px;
  overflow: hidden;
  cursor: pointer;
}
.local_sch01 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: var(--spacing-sm) var(--spacing);
  margin-bottom: var(--spacing-sm);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.local_sch01 .frm_input { height: var(--input-height); }
.local_sch01 .btn_submit {
  width: var(--input-height);
  height: var(--input-height);
  padding: 0;
  background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") center no-repeat;
  text-indent: -999px;
  overflow: hidden;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.local_sch01 .btn_submit:hover { background-color: var(--primary-dark); }
.local_sch03 { padding: var(--spacing-sm) var(--spacing); background: var(--card); margin: var(--spacing-sm) 0; border-radius: var(--radius); box-shadow: var(--shadow); }
.local_sch03 strong { display: inline-block; min-width: 70px; font-weight: 600; white-space: nowrap; }
.local_sch03 label { margin-right: 6px; display: inline-block; }
.local_sch03 .frm_input { height: var(--input-height); padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.local_sch03 button,
.local_sch03 .btn_submit { height: var(--btn-height); padding: 0 12px; border: 0; background: var(--primary); color: #fff; border-radius: var(--radius-sm); font-size: var(--font-size); cursor: pointer; }
.local_sch03 button:hover,
.local_sch03 .btn_submit:hover { background: var(--primary-dark); }
.local_sch div { margin: 6px 0; }
.local_sch div.sch_last { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.local_sch03.local_sch div.sch_last { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }

/* 회원 관리 필터링 */
.member_list_data { display: flex; flex-direction: column; padding: var(--spacing); margin: var(--spacing) 0; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.sch_table { display: flex; flex-direction: column; gap: var(--spacing-sm); font-size: var(--font-size); }
.member_list_data .sch_row { display: flex; align-items: center; gap: var(--spacing-sm); min-height: var(--input-height); }
.member_list_data .label { min-width: 100px; font-weight: 500; }
.member_list_data .field { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sch_btn { display: flex; gap: 8px; justify-content: center; margin-top: var(--spacing); }
.btn_reset { display: flex; align-items: center; gap: 4px; padding: 0 16px; height: var(--btn-height); background: #64748b; color: #fff; font-weight: 500; border: none; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--font-size); }
.btn_reset:hover { background: #475569; }

/* ========================================
   Alerts & Messages
   ======================================== */
.alert, .info_box, .caution, .notice_box {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 13px;
}
.alert-info, .info_box, .notice_box { background: #eff6ff; color: #1e40af; border-left: 4px solid var(--primary); }
.alert-success { background: #ecfdf5; color: #065f46; border-left: 4px solid var(--success); }
.alert-warning, .caution { background: #fffbeb; color: #92400e; border-left: 4px solid var(--warning); }
.alert-danger, .error_box { background: #fef2f2; color: #991b1b; border-left: 4px solid var(--danger); }

/* ========================================
   Footer
   ======================================== */
#ft {
  background: var(--card);
  padding: 0 24px;
  color: var(--text-muted);
  text-align: center;
  border-top: 1px solid var(--border);
}
#ft p { line-height: 50px; font-size: 12px; }

.scroll_top {
  position: fixed;
  bottom: 16px; right: 16px;
  width: 44px; height: 44px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  z-index: 50;
}
.scroll_top:hover { background: var(--bg); }

/* ========================================
   Colors & Labels
   ======================================== */
.color_st01 { background: #f43f5e; color: #fff; display: inline-block; padding: 2px 8px; font-size: 12px; border-radius: 4px; }
.color_st02 { background: var(--success); color: #fff; display: inline-block; padding: 2px 8px; font-size: 12px; border-radius: 4px; }
.color_st03 { background: #a855f7; color: #fff; display: inline-block; padding: 2px 8px; font-size: 12px; border-radius: 4px; }
.color_st04 { background: var(--warning); color: #fff; display: inline-block; padding: 2px 8px; font-size: 12px; border-radius: 4px; }
.color_st05 { background: var(--primary); color: #fff; display: inline-block; padding: 2px 8px; font-size: 12px; border-radius: 4px; }
.color_st06 { color: var(--danger); border: 1px solid var(--danger); display: inline-block; padding: 2px 8px; font-size: 12px; border-radius: 4px; }

/* Anchor / Tab Navigation */
.anchor { margin: 10px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.anchor li { list-style: none; }
.anchor a { display: inline-block; padding: 8px 14px; border: 1px solid var(--border); background: var(--card); border-radius: var(--radius-sm); font-size: 13px; }
.anchor a:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.anchor .selected, .anchor .selected a { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Compare Wrap */
.compare_wrap { margin: 0 0 16px; display: flex; gap: 16px; flex-wrap: wrap; }
.compare_wrap section { margin: 0; flex: 1; min-width: 300px; }
.compare_wrap h3 { margin: 0 0 12px; font-size: 15px; }
.compare_left, .compare_right { flex: 1; min-width: 300px; }

/* Captcha */
#captcha img { border: 1px solid var(--border); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
#captcha_mp3 img { border: 1px solid var(--border); border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: #333; }

/* CKEditor */
.cke_sc { margin: 0 0 8px; text-align: right; }
.btn_cke_sc { display: inline-block; padding: 6px 12px; border: 1px solid var(--border) !important; background: var(--card) !important; color: var(--text) !important; border-radius: var(--radius-sm); font-size: 12px; }

/* New Window Styles */
.new_win { background: var(--bg); min-height: 100vh; }
.new_win .win_title { background: var(--header-bg); color: #fff; padding: 16px 20px; font-size: 16px; font-weight: 600; }
.new_win .win_desc { padding: 16px 20px; background: var(--card); border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-muted); }
.new_win .win_btn { text-align: center; padding: 16px; }
.new_win .win_btn a, .new_win .win_btn button { display: inline-flex; align-items: center; padding: 0 16px; height: 38px; background: var(--primary); color: #fff; border-radius: var(--radius-sm); border: none; }
.new_win .local_sch, .new_win .local_desc01, .new_win .local_ov { margin: 16px; }
.new_win_con { margin: 16px; background: var(--card); padding: 20px; border-radius: var(--radius); }

/* Form Heading */
.h2_frm { text-align: left; color: var(--primary); font-size: 15px; font-weight: 600; margin: 20px 0 10px; }

/* Table Backgrounds */
.tbl_head01 tbody .bg0 { background: #fff !important; }
.tbl_head01 tbody .bg1 { background: #f8fafc !important; }
.tbl_head01 tbody .bg0cancel, .tbl_head01 tbody .bg1cancel { background: #fef2f2 !important; }

/* Local Descriptions */
.local_desc ol, .local_desc ul { margin: 0; padding: 0 0 0 16px; list-style: disc; }
.local_desc strong { color: var(--danger); }
.local_desc li { margin: 8px 0; }
.local_desc01 {
  margin-bottom: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.local_desc01 strong { color: var(--danger); }
.local_desc01 p { color: var(--text-muted); font-size: var(--font-size); margin: 0; line-height: 1.6; }
.local_desc02 { margin: 16px 0; }
.local_desc02 p { padding: 0; line-height: 1.8; }

/* Local Command */
.local_cmd { margin: 16px 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.local_cmd01 { margin: 16px 0; }

/* ========================================
   Overview Sections (local_ov01)
   ======================================== */
.local_ov01 {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: var(--spacing-sm) var(--spacing);
  margin-bottom: var(--spacing-sm);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.local_ov01 .ov_a {
  display: inline-flex;
  align-items: center;
  height: 28px;
  font-size: var(--font-size-sm);
  background: var(--primary);
  color: #fff;
  vertical-align: top;
  border-radius: var(--radius-sm);
  padding: 0 10px;
  text-decoration: none;
}
.local_ov01 .ov_a:hover { background: var(--primary-dark); text-decoration: none; }

/* ========================================
   Service Page (부가서비스)
   ======================================== */
.lnb_svc { color: var(--danger); font-weight: 600; }
.service_wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing);
  margin: var(--spacing) 0;
}
.sevice_1 {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  overflow: hidden;
}
.sevice_1 h3 {
  font-size: 15px;
  margin: 0;
  padding: 20px 16px;
  color: var(--text);
  line-height: 1.4;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.sevice_1 h3 span { display: block; font-size: 13px; color: var(--text-muted); font-weight: 400; margin-top: 4px; }
.sevice_1 p {
  padding: 16px;
  background: var(--bg);
  font-size: var(--font-size-sm);
  text-align: left;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}
.sevice_1 ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  border-top: 1px solid var(--border);
}
.sevice_1 ul li {
  flex: 1;
  border-right: 1px solid var(--border);
}
.sevice_1 ul li:last-child, .sevice_1 ul li.last { border-right: 0; }
.sevice_1 ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  transition: background 0.15s;
}
.sevice_1 ul li a:hover { background: var(--bg); }
.sevice_1 ul li img { max-height: 40px; width: auto; }
.sevice_1 h4 {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.sevice_1 h4 a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
}
.svc_card, .svc_phone, .svc_ipin { }

.service_2 {
  grid-column: 1 / -1;
  margin-top: var(--spacing-sm);
}
.service_2 h3 {
  font-size: 14px;
  color: var(--text);
  margin: 0 0 6px;
}
.service_2 .svc_a p {
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
  font-size: var(--font-size);
}
.svc_ri { display: flex; align-items: center; gap: var(--spacing); }
.svc_sms {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing);
}
.svc_sms .svc_a { flex: 1; }
.svc_btn2 a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: 0.15s;
}
.svc_btn2 a:hover { background: var(--card); border-color: var(--primary); }
.svc_btn2 img { max-height: 50px; }

/* ========================================
   Social Login Icons
   ======================================== */
.sns-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 0 2px;
  vertical-align: middle;
}
.sns-icon .ico {
  display: inline-block;
  background: url('../img/social/sns_logo.png') no-repeat;
  vertical-align: top;
}
.sns-icon .txt {
  position: absolute;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
.sns-wrap-32 .sns-icon { width: 26px; height: 26px; }
.sns-wrap-32 .sns-icon .ico { width: 24px; height: 24px; }
.sns-wrap-over .sns-icon { border-color: var(--border); }
.sns-wrap-over .sns-icon-not { border-color: #8b8b8b; opacity: 0.5; }
.sns-wrap-over .sns-naver { border-color: #03c75a; }
.sns-wrap-over .sns-naver .ico { background-position: -29px 0; }
.sns-wrap-over .sns-google { border-color: #ea4335; }
.sns-wrap-over .sns-google .ico { background-position: -58px 0; }
.sns-wrap-over .sns-facebook { border-color: #1877f2; }
.sns-wrap-over .sns-facebook .ico { background-position: 0 0; }
.sns-wrap-over .sns-kakao { border-color: #fee500; }
.sns-wrap-over .sns-kakao .ico { background-position: -87px 0; }
.sns-wrap-over .sns-twitter { border-color: #1da1f2; }
.sns-wrap-over .sns-twitter .ico { background-position: -145px 0; }
.sns-wrap-over .sns-payco { border-color: #e02441; }
.sns-wrap-over .sns-payco .ico { background-position: -116px 0; }

.social_link_box, .social_link_box li { margin: 0; padding: 0; list-style: none; }
.social_link_box { max-width: 300px; }
.account_provider { position: relative; margin: 10px 0 5px; display: flex; align-items: center; gap: 8px; }
.account_provider .sns-wrap-32 .sns-icon { vertical-align: middle; }
.account_provider .provider_name { display: inline-block; vertical-align: middle; font-size: var(--font-size); }
.account_provider .btn_info { position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
.member_social_provider { display: inline-flex; gap: 2px; vertical-align: middle; }

/* Sideview */
.sv_use { cursor: pointer; }
.sv_use:hover { color: var(--primary); }

/* ========================================
   Table Cell Classes (td_xxx)
   ======================================== */
.td_addr { text-align: left !important; }
.td_alignc { text-align: center; }
.td_addr_line { line-height: 2.2; }
.td_addr_line .frm_input { margin: 2px 0; }
.td_amount { width: 70px; text-align: center; }
.td_auth { width: 100px; text-align: center; }
.td_auth_mbnick { width: 200px; }
.td_boolean { width: 50px; text-align: center; }
.td_category { width: 120px; text-align: center; }
.td_categorysmall { width: 60px; text-align: center; }
.td_chk { width: 30px; text-align: center; }
.td_chk2 { width: 70px; }
.td_cnt { width: 100px; font-size: 13px; text-align: center; }
.td_cntsmall { width: 50px; font-size: 13px; text-align: center; }
.td_code { width: 80px; text-align: center; }
.td_confirm { width: 90px; text-align: center; }
.td_date { width: 85px; text-align: center; }
.td_datetime { width: 140px; text-align: center; }
.td_delicom { width: 100px; }
.td_delino { width: 130px; }
.td_device { width: 70px; text-align: center; }
.td_etc { width: 80px; text-align: center; }
.td_use { width: 80px; text-align: center; }
.td_extra label { display: inline-block; width: 100px; }
.td_extra input { margin-right: 5px; width: 130px; }
.td_grid { width: 60px; text-align: center; }
td.td_grpset { width: 160px; border-left: 1px solid var(--border); text-align: center; }
.td_id { width: 150px; }
.td_idsmall { width: 75px; }
.td_itname { text-align: left !important; }
.td_itopt { width: 200px; }
.td_itopt_tl { text-align: left !important; }
.td_img { text-align: center; }
.td_imgline { width: 70px; text-align: center; }
.td_input input { width: 94%; }
.td_mbcert { text-align: center; }
.td_mbid, .td_name, .td_mbname { width: 100px; text-align: left !important; }
.td_mbstat { text-align: center; }
.td_mng { width: 100px; font-size: 13px; text-align: center; }
.td_mngsmall { width: 60px; text-align: center; }
.td_num { width: 60px; text-align: center; }
.td_num_c { width: 70px; text-align: center; }
.td_num_c2 { width: 60px; text-align: center; }
.td_num_c3 { width: 100px; text-align: center; }
.td_numbig { width: 100px; text-align: right !important; }
.td_numcancel0 { color: var(--text-muted); text-align: right !important; }
.td_numcancel1 { color: var(--danger); font-weight: 600; text-align: right !important; }
.td_numcoupon { color: var(--success); text-align: right !important; }
.td_numincome { text-align: right !important; }
.td_num_right { text-align: right !important; }
.td_numsmall { width: 40px; text-align: center; }
.td_numsum { font-weight: 600; text-align: right !important; }
.td_numrdy { color: var(--danger); text-align: right !important; }
.td_odrnum { width: 250px; text-align: center; }
.td_odrnum2 { width: 140px; text-align: center; }
.td_odrnum3 { width: 110px; text-align: center; }
.td_odrstatus { width: 70px; text-align: center; }
.td_output { width: 90px; text-align: center; }
.td_payby { width: 70px; text-align: center; }
.td_paybybig { width: 140px; text-align: center; }
.td_possible { width: 70px; text-align: center; }
.td_postal { width: 60px; text-align: center; }
.td_postalbig { width: 140px; text-align: center; }
.td_price { text-align: right !important; }
.td_pt { text-align: right !important; }
.td_send { width: 50px; text-align: center; }
.td_sendcost_by { width: 50px; text-align: center; }
.td_sendcost_add { width: 100px; text-align: center; }
.td_stat { width: 70px; text-align: center; }
.td_tdiv { border-bottom: 1px solid var(--border) !important; }
.td_tel { width: 120px; text-align: left !important; }
.td_telbig { width: 100px; text-align: center; }
.td_test { width: 50px; text-align: center; }
.td_category1 { width: 130px; text-align: center; }
.td_category2 { width: 100px; text-align: center; }
.td_category3 { width: 80px; text-align: center; }
.td_time { text-align: center; width: 130px; }
.td_center { text-align: center; }
.td_type { width: 120px; }
.td_consent { width: 200px; }
.td_mng_s { width: 60px; }
.td_mng_m { width: 100px; }
.td_mng_l { width: 160px; }
.td_left { text-align: left !important; }

/* ========================================
   Grid System
   ======================================== */
.grid_1 { width: 50px; }
.grid_2 { width: 100px; }
.grid_3 { width: 150px; }
.grid_4 { width: 200px; }
.grid_5 { width: 250px; }
.grid_6 { width: 300px; }
.grid_7 { width: 350px; }
.grid_8 { width: 400px; }
.grid_9 { width: 450px; }
.grid_10 { width: 500px; }
.grid_11 { width: 550px; }
.grid_12 { width: 600px; }

/* ========================================
   Text Status Colors
   ======================================== */
.txt_true { color: var(--danger); }
.txt_false { color: var(--text-muted); }
.txt_succeed { color: var(--success); }
.txt_fail { color: var(--danger); }
.txt_active { color: var(--success); }
.txt_expired { color: var(--text-muted); }

/* ========================================
   List Styles
   ======================================== */
.ul_wrap { margin: 0 0 16px; }
.ul_01 ul { margin: 0; padding: 0; list-style: none; }
.ul_01 li { padding: 12px 0; border-bottom: 1px solid var(--border); }
.local_wr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: var(--spacing-sm) var(--spacing);
  margin-bottom: var(--spacing-sm);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.local_wr:after { display: block; visibility: hidden; clear: both; content: ""; }

/* ========================================
   Member Management
   ======================================== */
.mb_leave_msg { color: var(--text-muted); }
.mb_intercept_msg { color: var(--danger); }
#point_mng { margin-top: 50px; }
.ad_agree_log { max-height: 150px !important; overflow-y: auto; }

/* ========================================
   Board/Extra Fields
   ======================================== */
#anc_bo_extra .td_grpset label { width: auto; }
#anc_bo_extra .td_grpset input { margin: 0; }
#anc_bo_extra label { display: inline-block; width: 100px; }
#anc_bo_extra input { margin-right: 10px; }
#anc_bo_extra input.extra-value-input,
#anc_cf_extra input.extra-value-input { width: calc(100% - 370px); }

/* ========================================
   Config/Settings
   ======================================== */
.cf_cert_hide { display: none; }
.cf_tr_hide { display: none; }
.server_config_views { margin-bottom: 16px; }
.rules_label { margin-left: 8px; vertical-align: middle; }
#menu_frm #menu_result { margin: 16px 0; }
#menulist .sub_menu_class { padding-left: 25px; position: relative; }
#menulist .sub_menu_class::before { content: '└'; position: absolute; left: 8px; color: var(--text-muted); }
.exist_menu_link { font-weight: 600; color: var(--danger); }

/* ========================================
   Visit Statistics
   ======================================== */
.tbl_visit_list td { text-align: center; }
.visit_bar { position: relative; }
.visit_bar span { position: absolute; top: -8px; left: 0; height: 15px; background: var(--primary); border-radius: 2px; }
.visit_del_bt { margin: 8px 0; border-top: 1px solid var(--border); padding: 12px 0; }
.visit_del_bt .btn_submit { border: 0; height: 38px; padding: 0 12px; border-radius: var(--radius-sm); }

/* ========================================
   Session/Cache Delete
   ======================================== */
.session_del { margin: 16px 0; padding-left: 20px; }
.session_del li { list-style: disc; margin: 8px 0; }
.session_del strong { color: var(--danger); }
.session_del p { line-height: 1.7; padding: 12px 16px; background: #fef2f2; border: 2px solid #fecaca; border-radius: var(--radius-sm); color: var(--danger); }

/* ========================================
   Admin Permission
   ======================================== */
#add_admin fieldset { margin-top: 20px; overflow: auto; padding: 12px; line-height: 1.6; resize: vertical; border: 1px solid var(--border); border-radius: var(--radius-sm); }

/* ========================================
   Mail Test
   ======================================== */
#fsendmailtest { margin: 50px 0; text-align: center; }
#fsendmailtest .btn_submit { height: 38px; border: 0; padding: 0 16px; border-radius: var(--radius-sm); }

/* ========================================
   Banner/Image
   ======================================== */
.banner_or_img { margin: 16px 0 0; }
.banner_or_img button { display: block; margin: 8px 0 0; }
#sct_mobileimg { width: 125px; }

/* ========================================
   Rewrite Rules
   ======================================== */
.is_rewrite .connect-close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: 0; background: transparent; color: var(--text); cursor: pointer; font-size: 16px; border-radius: var(--radius-sm); }
.is_rewrite .connect-close:hover { color: var(--danger); background: var(--bg); }
.is_rewrite textarea { width: 100%; min-height: 260px; }
.is_rewrite .copy_title { margin: 16px 0 12px; font-weight: 600; text-align: left; }
.is_rewrite .info-success { color: var(--success); }
.is_rewrite .info-warning { color: var(--warning); }
.icode_old_version th { background-color: #fef9c3 !important; }
.icode_json_version th { background-color: #f3e8ff !important; }

/* ========================================
   Excel Download Progress
   ======================================== */
.excel-download-progress p { color: var(--text); }
.excel-download-progress .progress-desc { padding: 40px 0 32px; text-align: center; }
.excel-download-progress .progress-summary { margin-bottom: 8px; font-size: 16px; font-weight: 500; color: var(--text); }
.excel-download-progress .progress-message { font-size: 20px; font-weight: 600; color: var(--primary); }
.excel-download-progress .progress-error { color: var(--danger); }
.progress-spinner { display: flex; flex-direction: column; align-items: center; gap: 45px; padding: 24px 0; }
.spinner { width: 48px; height: 48px; border: 5px solid var(--primary); border-top: 5px solid transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-message { text-align: center; font-size: 14px; color: var(--text); }
.excel-download-progress .progress-download-box { margin-top: 24px; background: var(--bg); padding: 20px; border-radius: var(--radius); }
.excel-download-progress .progress-download-box a { display: block; text-align: center; margin-top: 8px; font-weight: 500; font-size: 14px; padding: 12px 20px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); cursor: pointer; }
.excel-download-progress .progress-download-box a:hover { border-color: var(--primary); text-decoration: none; }

/* ========================================
   Field Select Form
   ======================================== */
.field-select-form { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 16px; gap: 0 12px; padding: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
.field-select-form label { display: flex; align-items: center; cursor: pointer; padding: 8px 12px; border-radius: var(--radius-sm); }
.field-select-form label:hover { background: var(--card); }
.field-select-form input[type="checkbox"] { margin-right: 8px; }
.field-separator { grid-column: 1 / -1; border-top: 1px solid var(--border); margin: 8px 0; }
.selected-fields-preview { padding: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 12px 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.selected-fields-preview strong { padding: 4px 8px; }
.selected-fields-preview .field-tag { background: #dbeafe; color: #1e40af; padding: 4px 10px; border-radius: 4px; font-size: 13px; }

/* ========================================
   Theme Settings
   ======================================== */
.theme_p { margin: 0 0 var(--spacing); }
.no_theme { text-align: center; padding: 60px 20px; color: var(--text-muted); background: var(--card); border-radius: var(--radius); }

#theme_list {
  padding: 0;
  margin: var(--spacing) 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing);
}
#theme_list li {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#theme_list li .tmli_if {
  position: relative;
}
#theme_list li .tmli_if > img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: 0.2s;
}
#theme_list li:hover .tmli_if > img {
  opacity: 0.8;
}
#theme_list li .tmli_tit {
  background: var(--bg);
  border-top: 1px solid var(--border);
}
#theme_list li .tmli_tit p {
  height: 44px;
  line-height: 44px;
  padding: 0 12px;
  font-weight: 600;
  font-size: 14px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
  color: var(--text);
}
/* 버튼 영역 */
#theme_list li .theme_sl,
#theme_list li .theme_pr,
#theme_list li .theme_preview,
#theme_list li .tmli_dt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  margin: 0 4px 12px 0;
  margin-left: 12px;
}
#theme_list li .theme_sl:first-of-type { margin-left: 12px; }

#theme_list li .theme_sl {
  background: #64748b;
  color: #fff;
  border: none;
}
#theme_list li .theme_sl:hover {
  background: var(--primary);
}
#theme_list li .theme_sl_use {
  background: var(--success);
  color: #fff;
  cursor: default;
}
#theme_list li .theme_deactive {
  background: var(--danger);
  margin-left: 4px;
}
#theme_list li .theme_deactive:hover {
  background: #dc2626;
}
#theme_list li .theme_pr,
#theme_list li .theme_preview,
#theme_list li .tmli_dt {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  margin-left: 4px;
}
#theme_list li .theme_pr:hover,
#theme_list li .theme_preview:hover,
#theme_list li .tmli_dt:hover {
  background: var(--bg);
  border-color: var(--primary);
  color: var(--primary);
}

/* 테마 상세 모달 */
#theme_detail {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 850px;
  max-width: 95vw;
  max-height: 90vh;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  z-index: 10000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#theme_detail:after { display: block; visibility: hidden; clear: both; content: ""; }
#theme_detail h2 {
  font-size: 16px;
  font-weight: 600;
  background: var(--sidebar-bg);
  color: #fff;
  padding: 0 20px;
  padding-right: 100px;
  line-height: 50px;
  margin: 0;
  position: relative;
}
#theme_detail h2 a { color: #fff; }
#theme_detail h2 a:hover { text-decoration: underline; }
.thdt_home { color: inherit; }

.theme_dt_img {
  float: left;
  padding: 20px;
}
.theme_dt_img img {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-width: 500px;
  max-height: 380px;
  display: block;
}
.theme_dt_if {
  float: right;
  width: 280px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: calc(100% - 50px);
}
.theme_dt_if > p {
  line-height: 1.6;
  margin: 0 0 16px;
  font-size: var(--font-size);
  color: var(--text-muted);
}
.theme_dt_if table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px;
  font-size: var(--font-size);
}
.theme_dt_if table th {
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  vertical-align: top;
  color: var(--text);
  text-align: left;
  font-weight: 600;
  width: 70px;
}
.theme_dt_if table td {
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  line-height: 1.5;
}
.theme_dt_if table td a { color: var(--primary); }
.if_p_bg { display: block; width: 30px; height: 2px; background: var(--border); margin: 16px 0; }

.theme_dt_btn {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
}
.theme_dt_btn .theme_pr {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-height);
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: var(--font-size);
  text-decoration: none;
}
.theme_dt_btn .theme_pr:hover { background: var(--primary-dark); }
.theme_dt_btn .close_btn {
  width: var(--btn-height);
  height: var(--btn-height);
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.theme_dt_btn .close_btn:hover {
  background: var(--bg);
  color: var(--text);
}

/* Skin Select */
.get_shop_skin, .shop_etc, .shop_pc_index, .shop_mobile_index {
  background: var(--primary);
  color: #fff;
  height: var(--btn-height);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0 10px;
  font-weight: 500;
  font-size: var(--font-size);
  vertical-align: middle;
  cursor: pointer;
}
.sct_pcskin select, .sct_mskin select { width: 37% !important; }
.sct_pcskin .frm_input, .sct_mskin .frm_input { width: 60% !important; }

/* ========================================
   Sideview (회원 정보 팝업)
   ======================================== */
.sv_wrap {
  position: relative;
  font-weight: normal;
  display: inline-block;
  z-index: 10;
}
.sv_wrap .sv {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  display: none;
  margin-top: 4px;
  font-size: var(--font-size-sm);
  background: var(--sidebar-bg);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-sm);
  overflow: visible;
  min-width: 140px;
}
.sv_wrap .sv::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 16px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 6px 6px;
  border-color: transparent transparent var(--sidebar-bg) transparent;
}
.sv_wrap .sv a {
  display: block;
  padding: 0 12px;
  line-height: var(--btn-height);
  font-weight: normal;
  color: var(--sidebar-text);
  white-space: nowrap;
  text-decoration: none;
}
.sv_wrap .sv a:hover {
  background: var(--sidebar-icon-bg);
  color: #fff;
  text-decoration: none;
}
.sv_member {
  color: var(--primary);
  font-weight: 500;
  cursor: pointer;
}
.sv_member:hover {
  text-decoration: underline;
}
.sv_on {
  display: block !important;
}

/* 테이블 내에서 sideview가 잘 보이도록 */
.tbl_head01 tbody td { overflow: visible; }
.tbl_head01 tbody tr { position: relative; }
.tbl_head01 tbody tr:hover { z-index: 10; }
.tbl_head01 .sv_wrap:hover { z-index: 9999; }
.sv_use { color: var(--success); }
.sv_stop { color: var(--danger); }
.sv_nojs .sv { display: block; }

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 1200px) {
  #container { min-width: auto; }
}

@media (max-width: 768px) {
  #logo { width: auto; padding: 0 16px 0 56px; }
  #gnb { transform: translateX(-100%); transition: transform 0.3s; }
  #gnb.gnb_open { transform: translateX(0); }
  #container { padding-left: 0 !important; margin-top: 50px; }
  #container_title { padding-left: 16px !important; top: 50px; display: none; }
  .container_wr { padding: 16px; }
  #ft { padding: 0 16px; }
  .form_01 th, .form_01 td { display: block; width: 100%; }
  .form_01 th { border-bottom: none; padding-bottom: 4px; }
  .form_01 td { padding-top: 0; }
  .local_ov > div { min-width: 100%; }
}

/* ========================================
   추가 스타일 (누락 클래스 보완)
   ======================================== */

/* 테이블 내 인라인 입력 */
.tbl_input { width: 100%; max-width: 100px; height: var(--input-height); padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--font-size); text-align: center; }
.tbl_input:focus { border-color: var(--primary); outline: none; }
.bo_subject { max-width: 200px; }

/* write_count.php 차트 */
#wr_cont { background: var(--card); padding: var(--spacing); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: var(--spacing); }
#wr_cont form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#chart_wr { background: var(--card); padding: var(--spacing); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: var(--spacing); }
#chart1 { height: 500px; width: 100%; }
#grp_color { display: flex; gap: 16px; list-style: none; margin: 12px 0; padding: 0; font-size: var(--font-size); }
#grp_color li { display: flex; align-items: center; gap: 6px; }
#grp_color li span { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
#grp_color li.color2 span { background: #ef4444; }

/* config_form.php 설명 박스 */
.explain_box { margin: 8px 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); font-size: var(--font-size-sm); line-height: 1.6; }
.explain_box label { margin-right: 8px; }

/* point_list.php 날짜 */
.td_datetime2 { width: 140px; text-align: center; font-size: var(--font-size-sm); }
.txt_expired { color: var(--danger); }

/* menu_form.php */
.new_win_desc { padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg); font-size: var(--font-size); }
.sub_menu_ico { display: inline-block; width: 16px; margin-right: 4px; color: var(--text-muted); font-size: 12px; }
.sub_menu_ico::before { content: '└'; }

/* visit_delete.php */
.visit_del { background: var(--card); padding: var(--spacing); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: var(--spacing); }

/* member_form.php 소셜 */
.social_login_container { margin: 8px 0; padding: 12px; background: var(--bg); border-radius: var(--radius-sm); }
.social_unlink { color: var(--danger); font-size: var(--font-size-sm); margin-left: 8px; }
.social_unlink:hover { text-decoration: underline; }

/* member_list_exel.php */
.sch_notice { color: var(--danger); font-size: var(--font-size-sm); margin: 6px 0; }
.radio_group { display: flex; gap: 10px; align-items: center; }
.ad_range_wrap { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.ad_range_box { display: flex; gap: 6px; align-items: center; }
.progress-box { margin: var(--spacing) 0; }

/* browscap 처리 */
.check_processing, .update_processing { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--bg); border-radius: var(--radius-sm); font-size: var(--font-size); }

/* auth_list.php */
.td_menu { width: 120px; text-align: center; }

/* FontAwesome 대체 (close 아이콘) */
.fa.fa-close::before { content: '✕'; font-style: normal; }

/* 공지 (announcements) */
#platform-announcements { margin-bottom: 20px; }

/* Subscription Widget */
#subscription-widget {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}
#subscription-widget .sub-card {
  flex: 1;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
}
#subscription-widget .sub-label { color: #64748b; font-size: 11px; margin-bottom: 4px; }
#subscription-widget .sub-value { font-size: 15px; font-weight: 700; color: var(--text-primary); }
#subscription-widget .sub-badge {
  display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 700;
  border-radius: 4px;
}
#subscription-widget .sub-bar-track { width: 100%; background: #e2e8f0; border-radius: 9999px; height: 6px; margin-top: 8px; }
#subscription-widget .sub-bar-fill { height: 6px; border-radius: 9999px; transition: width 0.3s; }

/* Print */
@media print {
  #hd, #hd_top, #gnb, #ft, .btn, .scroll_top { display: none !important; }
  #container { padding: 0 !important; margin: 0 !important; }
}