/* ============================================================
   BATIFA custom-basic.css — Clien-style Community v2
   Fixed: header icon clipping, mobile responsive, polish
   ============================================================ */

:root {
  --primary:    #1a3a5c;
  --primary-d:  #0f2540;
  --accent:     #3b82f6;
  --accent-h:   #2563eb;
  --red:        #ef4444;
  --text:       #1f2937;
  --text-dim:   #6b7280;
  --text-light: #9ca3af;
  --border:     #e5e7eb;
  --border-lt:  #f3f4f6;
  --bg:         #f2f3f5;
  --white:      #ffffff;
  --dark:       #1e293b;
  --nav-bg:     #ffffff;
  --tag-bg:     #e8edf3;
  --header-h:   50px;
  --gnb-h:      44px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--bg) !important;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Malgun Gothic", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  min-width: 0 !important;
  -webkit-text-size-adjust: 100%;
}
html {
  background: var(--bg) !important;
  overflow-x: hidden !important;
}
a { text-decoration: none; color: inherit; }

/* ════════════════════════════════════════
   CONTAINER
   ════════════════════════════════════════ */
.container {
  background: transparent !important;
  min-width: 0 !important;
  width: 100% !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}
/* Prevent container fixed_header from clipping header icons */
.container.fixed_header {
  overflow: visible !important;
}

/* ════════════════════════════════════════
   HEADER — Clien-style dark bar (FIXED)
   ════════════════════════════════════════ */
.header_wrap {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.15) !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

.header {
  background: var(--dark) !important;
  border-bottom: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: var(--header-h) !important;
  min-height: var(--header-h) !important;
  padding: 0 40px 0 24px !important;
  flex-wrap: nowrap !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
  z-index: 1001 !important;
}
/* Ensure nothing clips in header */
.header *, .header *::before, .header *::after {
  clip: auto !important;
  clip-path: none !important;
}

/* Logo */
.logo-item {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}
.logo-item a {
  display: flex;
  align-items: center;
  font-size: 0;
  height: var(--header-h);
}
.logo-item a::before {
  content: "";
  display: block;
  width: 120px;
  height: 30px;
  background: url("/files/attach/batifa_logo.png") no-repeat center / contain;
}
.logo-item img { display: none !important; }

/* Search in header */
.search_wrap {
  z-index: 2000 !important;
}

/* ── Side icons (RIGHT SIDE - FIXED CLIPPING) ── */
/* Must use .header > .side to beat XEdition's specificity:
   layout.css has ".header > .side { margin: 39px 0 0 22px }"
   which pushes icons 39px down, causing them to overflow into
   the GNB area (white bg, z-index:999) which covers them. */
.header > .side,
.header.main > .side {
  margin: 0 !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  float: none !important;
  height: var(--header-h) !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 10 !important;
  padding-right: 4px !important;
  white-space: nowrap !important;
  max-width: none !important;
  width: auto !important;
}
.header > .side > ul {
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 8px 0 0 !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}
.header > .side > ul > li {
  border: none !important;
  flex-shrink: 0 !important;
}
.header > .side > ul > li > a,
.side ul li a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  color: rgba(255,255,255,.75) !important;
  border-radius: 6px !important;
  font-size: 16px !important;
  transition: all .15s !important;
  border-bottom: none !important;
  line-height: 1 !important;
  overflow: visible !important;
  padding: 0 !important;
}
.side ul li a:hover {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  border-bottom: none !important;
}
.side ul li a::before, .side ul li a::after { display: none !important; }

/* Login dropdown — hidden by default (match XEdition specificity) */
.side .ly.ly_login,
.header .side .ly.ly_login,
.header > .side > ul .ly.ly_login,
.header > .side > ul > li .ly.ly_login,
.header > .side > ul > li.hover .ly.ly_login {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: fixed !important;
  top: var(--header-h) !important;
  right: 16px !important;
  left: auto !important;
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
  min-width: 180px !important;
  padding: 0 !important;
  z-index: 2000 !important;
  margin-top: 0 !important;
}
.side .ly.ly_login ul,
.header > .side > ul .ly.ly_login ul {
  flex-direction: column !important;
  gap: 0 !important;
  background: var(--white) !important;
  margin-top: 0 !important;
  padding: 0 !important;
  position: static !important;
}
.side .ly.ly_login ul li a {
  width: 100% !important;
  height: auto !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  color: var(--text) !important;
  border-radius: 0 !important;
  font-weight: 500 !important;
  justify-content: flex-start !important;
  background: transparent !important;
}
.side .ly.ly_login ul li a:hover {
  background: #f5f5f5 !important;
  color: var(--accent) !important;
}
.side .ly.ly_login .edge { display: none !important; }
/* Show login dropdown ONLY on click (.on class added by JS) */
.header > .side > ul > li.on > .ly.ly_login,
.header > .side > ul .on .ly.ly_login {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  padding: 6px 0 !important;
}
/* Also hide the edge arrow */
.side .ly .edge,
.header > .side > ul > li .ly .edge {
  display: none !important;
}

/* ════════════════════════════════════════
   GNB — Navigation bar (Clien-style)
   ════════════════════════════════════════ */
nav.gnb, nav.gnb.gnb-bar {
  float: none !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: var(--gnb-h) !important;
  background: var(--nav-bg) !important;
  border-top: none !important;
  border-bottom: 2px solid var(--primary) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 16px !important;
  z-index: 999 !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

nav.gnb > ul, nav.gnb.gnb-bar > ul {
  display: flex !important;
  align-items: stretch !important;
  flex-direction: row !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  height: 100% !important;
  float: none !important;
  flex-wrap: nowrap !important;
}

nav.gnb > ul > li, nav.gnb.gnb-bar > ul > li {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  height: 100% !important;
  flex-shrink: 0 !important;
}

nav.gnb > ul > li > a, nav.gnb.gnb-bar > ul > li > a {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  white-space: nowrap !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  transition: color .15s, border-color .15s !important;
}

nav.gnb > ul > li > a:hover,
nav.gnb > ul > li > a.on,
nav.gnb > ul > li.on > a,
nav.gnb.gnb-bar > ul > li > a:hover,
nav.gnb.gnb-bar > ul > li > a.on {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
}

/* GNB dropdown */
nav.gnb .depth2, .gnb .depth2 {
  display: none;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
  min-width: 150px !important;
  padding: 6px 0 !important;
  z-index: 100 !important;
  list-style: none !important;
}
nav.gnb li:hover .depth2 { display: block !important; }
nav.gnb .depth2 li a {
  display: block !important;
  padding: 9px 18px !important;
  font-size: 13px !important;
  color: var(--text) !important;
  font-weight: 500 !important;
  border: none !important;
}
nav.gnb .depth2 li a:hover {
  background: #f9fafb !important;
  color: var(--primary) !important;
}

/* Mobile menu btn */
.menu_btn { display: none !important; }

/* Header inside gnb (hidden) */
header nav.gnb:not(.gnb-bar) { display: none !important; }

/* ════════════════════════════════════════
   VISUAL / SUB BANNER — hidden
   ════════════════════════════════════════ */
.visual.sub { display: none !important; }

/* ════════════════════════════════════════
   BODY / CONTENT
   ════════════════════════════════════════ */
.body {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 20px 16px !important;
}
.body.fixed-width {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}
.content { background: transparent !important; }

/* LNB — left sidebar */
.lnb {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}
.lnb > ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.lnb > ul > li { border-bottom: 1px solid var(--border-lt) !important; }
.lnb > ul > li:last-child { border-bottom: none !important; }
.lnb > ul > li > a {
  display: block !important;
  padding: 11px 16px !important;
  font-size: 13px !important;
  color: var(--text-dim) !important;
  font-weight: 500 !important;
  transition: all .15s !important;
}
.lnb > ul > li > a:hover,
.lnb > ul > li.on > a {
  color: var(--primary) !important;
  background: #f8fafc !important;
  font-weight: 600 !important;
}

/* ════════════════════════════════════════
   BOARD — 게시판 (Clien-style)
   ════════════════════════════════════════ */
.rx_content, .board-skin-wrap, .bd_wrap {
  background: var(--white) !important;
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  overflow: hidden !important;
}

/* Table header */
table.board_list thead tr th,
.board_list .bd_header th {
  background: #f8fafc !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-dim) !important;
  padding: 10px 14px !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Rows */
table.board_list tbody tr {
  border-bottom: 1px solid var(--border-lt) !important;
  transition: background .1s !important;
}
table.board_list tbody tr:hover { background: #fafbfc !important; }
table.board_list tbody tr td {
  font-size: 13px !important;
  padding: 10px 14px !important;
  color: var(--text) !important;
}

/* Title links */
.board_list .title a {
  color: var(--text) !important;
  font-weight: 500 !important;
}
.board_list .title a:hover { color: var(--primary) !important; }
.board_list tr.notice .title a {
  color: var(--primary) !important;
  font-weight: 700 !important;
}

/* Comment count badge */
.board_list .title .replyNum,
.board_list .title .comment_count {
  color: var(--accent) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-left: 4px !important;
}

/* Category tag */
.board_list .cate_title,
.board_list .category {
  display: inline-block !important;
  background: var(--tag-bg) !important;
  color: var(--primary) !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  margin-right: 6px !important;
}

/* No data */
.board_list .no_data td, .nodata {
  color: var(--text-dim) !important;
  text-align: center !important;
  padding: 48px !important;
  font-size: 13px !important;
}

/* ════════════════════════════════════════
   PAGINATION
   ════════════════════════════════════════ */
.pagination, .paginate, .rx-paginate {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 16px !important;
  list-style: none !important;
  margin: 0 !important;
  flex-wrap: wrap !important;
}
.pagination a, .paginate a, .rx-paginate a,
.pagination span, .paginate span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 30px !important;
  height: 30px !important;
  padding: 0 6px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-dim) !important;
  border: 1px solid var(--border) !important;
  background: var(--white) !important;
}
.pagination a:hover, .paginate a:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
.pagination .on a, .paginate .on, .pagination strong, .paginate strong {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* ════════════════════════════════════════
   BUTTONS / SEARCH AREA
   ════════════════════════════════════════ */
.bd_write, .board_btn_area, .btn_area {
  display: flex !important;
  justify-content: flex-end !important;
  padding: 12px 14px !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.bd_write a, .bd_write button,
.board_btn_area a, .board_btn_area button,
.btn_area a, .btn_area button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 34px !important;
  padding: 0 14px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: 1px solid var(--border) !important;
  background: var(--white) !important;
  color: var(--text) !important;
  cursor: pointer !important;
  transition: all .15s !important;
}
.bd_write a:hover, .btn_area a:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* Write button (primary) */
.btn_write, a.btn_write {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.btn_write:hover, a.btn_write:hover {
  background: var(--primary-d) !important;
}

/* ════════════════════════════════════════
   WIDGET SECTIONS (main page)
   ════════════════════════════════════════ */
.widget_area, .widgetOutput {
  margin-bottom: 16px !important;
}

/* Widget box style */
.widgetbox {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}

.widgetbox .widgetbox_title,
.widget .widget_title {
  background: #f8fafc !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.widgetbox .widgetbox_title a,
.widget .widget_title a {
  font-size: 12px !important;
  color: var(--text-dim) !important;
  font-weight: 500 !important;
}
.widgetbox .widgetbox_title a:hover,
.widget .widget_title a:hover {
  color: var(--primary) !important;
}

/* ════════════════════════════════════════
   MAIN PAGE — Multi-section layout
   ════════════════════════════════════════ */
.main-board-section {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}
.main-board-section .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
}
.main-board-section .section-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.main-board-section .section-header a {
  font-size: 12px;
  color: var(--text-dim);
}
.main-board-section .section-header a:hover {
  color: var(--primary);
}
.main-board-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-board-section ul li {
  padding: 9px 16px;
  border-bottom: 1px solid var(--border-lt);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.main-board-section ul li:last-child {
  border-bottom: none;
}
.main-board-section ul li a {
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.main-board-section ul li a:hover {
  color: var(--primary);
}
.main-board-section ul li .date {
  font-size: 12px;
  color: var(--text-light);
  flex-shrink: 0;
}
.main-board-section ul li .comment {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}

/* Two-column layout for main page */
.main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ════════════════════════════════════════
   FOOTER — Clien-style minimal
   ════════════════════════════════════════ */
footer, .footer {
  background: var(--dark) !important;
  border-top: none !important;
  border-bottom: none !important;
  margin-top: 32px !important;
}
.footer .f_info_area { display: none !important; }
.footer .f_cr_area {
  background: var(--dark) !important;
  padding: 0 20px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.footer .f_cr_area .copyright {
  font-size: 12px !important;
  color: var(--text-light) !important;
}
.footer .f_cr_area .mobile-footer-member {
  display: flex !important;
  list-style: none !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.footer .f_cr_area .mobile-footer-member a {
  font-size: 12px !important;
  color: var(--text-light) !important;
}
.footer .f_cr_area .mobile-footer-member a:hover { color: #fff !important; }

/* ════════════════════════════════════════
   TOP BUTTON
   ════════════════════════════════════════ */
.btn_top {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 40px !important;
  height: 40px !important;
  background: var(--dark) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 16px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
  z-index: 500 !important;
  opacity: .8;
  transition: all .2s !important;
}
.btn_top:hover { opacity: 1; background: var(--primary) !important; }

/* ════════════════════════════════════════
   FIXED HEADER adjustments
   ════════════════════════════════════════ */
.container.fixed_header {
  padding-top: 0 !important;
  overflow: visible !important;
}
.fixed_header .header_wrap { position: sticky !important; top: 0 !important; }

/* ════════════════════════════════════════
   LOGIN WIDGET
   ════════════════════════════════════════ */
.login_widget .signin {
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.2) !important;
}
.login_widget .login-header {
  background: var(--dark) !important;
  border-radius: 12px 12px 0 0 !important;
}
.login_widget .btn_submit {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}
.login_widget .btn_submit:hover {
  background: var(--primary-d) !important;
}

/* ════════════════════════════════════════
   READ (글 보기) STYLES
   ════════════════════════════════════════ */
.rd, .read_body, .board_read {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
.rd .rd_hd, .read_header {
  padding: 20px !important;
  border-bottom: 1px solid var(--border) !important;
}
.rd .rd_hd .title_area h1,
.read_header .title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  line-height: 1.4 !important;
}
.rd .rd_body, .read_body {
  padding: 20px !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
}

/* Comment area */
.rx_content .cmt_list,
.comment_list {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  margin-top: 16px !important;
  overflow: hidden !important;
}

/* ════════════════════════════════════════
   SEARCH FORM in board
   ════════════════════════════════════════ */
.bd_search, .board_search {
  display: flex !important;
  justify-content: center !important;
  padding: 16px !important;
  gap: 6px !important;
}
.bd_search input[type="text"],
.board_search input[type="text"] {
  height: 36px !important;
  padding: 0 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  outline: none !important;
  transition: border-color .15s !important;
}
.bd_search input[type="text"]:focus,
.board_search input[type="text"]:focus {
  border-color: var(--primary) !important;
}
.bd_search button,
.board_search button {
  height: 36px !important;
  padding: 0 14px !important;
  background: var(--primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

/* ════════════════════════════════════════
   WRITE FORM (글쓰기)
   ════════════════════════════════════════ */
.write_wrap, .board_write {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  padding: 20px !important;
}
.write_wrap input[type="text"],
.write_wrap textarea,
.write_wrap select {
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  transition: border-color .15s !important;
}
.write_wrap input[type="text"]:focus,
.write_wrap textarea:focus {
  border-color: var(--primary) !important;
  outline: none !important;
}

/* ════════════════════════════════════════
   MOBILE RESPONSIVE
   ════════════════════════════════════════ */

/* ── Tablet (≤ 960px) ── */
@media (max-width: 960px) {
  .body {
    padding: 16px 12px !important;
  }

  .main-grid {
    grid-template-columns: 1fr;
  }

  /* Stack body layout vertically */
  .body .lnb {
    display: none !important;
  }
}

/* ── Mobile (≤ 768px) ── */
@media (max-width: 768px) {
  :root {
    --header-h: 46px;
    --gnb-h: 40px;
  }

  .header {
    padding: 0 12px !important;
  }

  .logo-item a::before {
    font-size: 17px;
  }

  .side ul li a {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }

  /* GNB horizontal scroll on mobile */
  nav.gnb, nav.gnb.gnb-bar {
    padding: 0 8px !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }
  nav.gnb::-webkit-scrollbar { display: none !important; }

  nav.gnb > ul > li > a,
  nav.gnb.gnb-bar > ul > li > a {
    padding: 0 10px !important;
    font-size: 13px !important;
  }

  /* Body */
  .body {
    padding: 12px 10px !important;
  }

  /* Main page grid to single column */
  .main-home div[style*="grid-template-columns"] {
    display: block !important;
  }
  .main-home div[style*="grid-template-columns"] > div {
    margin-bottom: 12px !important;
  }

  /* Board table responsive */
  table.board_list thead { display: none !important; }
  table.board_list tbody tr {
    display: flex !important;
    flex-direction: column !important;
    padding: 10px 12px !important;
    gap: 4px !important;
  }
  table.board_list tbody tr td {
    padding: 2px 0 !important;
    border: none !important;
  }
  table.board_list tbody tr td.no { display: none !important; }
  table.board_list tbody tr td.author { font-size: 12px !important; color: var(--text-dim) !important; }

  /* Read view */
  .rd .rd_hd, .read_header { padding: 14px !important; }
  .rd .rd_hd .title_area h1,
  .read_header .title { font-size: 17px !important; }
  .rd .rd_body, .read_body {
    padding: 14px !important;
    font-size: 14px !important;
  }

  /* Pagination */
  .pagination a, .paginate a, .rx-paginate a,
  .pagination span, .paginate span {
    min-width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }

  /* Footer */
  .footer .f_cr_area {
    flex-direction: column !important;
    height: auto !important;
    padding: 12px 16px !important;
    gap: 8px !important;
    text-align: center !important;
  }

  /* Write form */
  .write_wrap, .board_write { padding: 12px !important; }
}

/* ── Small phone (≤ 480px) ── */
@media (max-width: 480px) {
  .header {
    padding: 0 8px !important;
  }

  .logo-item a::before {
    font-size: 15px;
  }

  .side ul { gap: 0 !important; }
  .side ul li a {
    width: 30px !important;
    height: 30px !important;
    font-size: 13px !important;
  }

  nav.gnb > ul > li > a,
  nav.gnb.gnb-bar > ul > li > a {
    padding: 0 8px !important;
    font-size: 12px !important;
  }

  .body { padding: 8px !important; }

  .main-board-section .section-header { padding: 10px 12px; }
  .main-board-section .section-header h3 { font-size: 14px; }
  .main-board-section ul li { padding: 8px 12px; font-size: 12px; }

  /* Buttons */
  .bd_write, .board_btn_area, .btn_area {
    padding: 8px !important;
  }
  .bd_write a, .bd_write button,
  .btn_area a, .btn_area button {
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  .btn_top {
    width: 36px !important;
    height: 36px !important;
    bottom: 16px !important;
    right: 16px !important;
  }
}

/* ════════════════════════════════════════
   BOARD TITLE BAR (Clien-style)
   ════════════════════════════════════════ */
.board-title-bar {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border) !important;
}
.board-title-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 14px 16px !important;
}
.board-title-bar h2 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* ════════════════════════════════════════
   GNB MENU REORDER: 홈을 첫 번째로
   ════════════════════════════════════════ */
/* GNB의 '홈' 메뉴를 맨 앞으로 이동 (flex order)
   '홈' 링크의 href가 "/" 인 li를 CSS로 선택 */
nav.gnb > ul > li:last-child {
  order: -1 !important;
}

/* ════════════════════════════════════════
   VISUAL SUBHEADER — hidden (replaced by board-title-bar)
   ════════════════════════════════════════ */
.visual.sub { display: none !important; }

/* ════════════════════════════════════════
   MEMBERSHIP FORMS (회원가입, 로그인, 정보수정 등)
   PC에서 넓고 보기 좋은 폼 스타일
   ════════════════════════════════════════ */
.body.fixed-width .content .xm,
.body.fixed-width .content form.form-horizontal {
  max-width: 580px !important;
  margin: 0 auto !important;
  padding: 30px 0 !important;
}

/* 폼 제목 (회원가입, 로그인 등) */
.body.fixed-width .content h2,
.body.fixed-width .content .xm > h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin-bottom: 24px !important;
  padding-bottom: 16px !important;
  border-bottom: 2px solid var(--primary) !important;
}

/* 폼 그룹 레이아웃: 레이블 위, 입력 아래 (수직 배치) */
.body.fixed-width .control-group {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 16px !important;
}

/* 레이블 */
.body.fixed-width .control-label {
  text-align: left !important;
  float: none !important;
  width: auto !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin-bottom: 6px !important;
  padding-top: 0 !important;
}

/* 입력 필드 컨테이너 */
.body.fixed-width .controls {
  margin-left: 0 !important;
  float: none !important;
  width: 100% !important;
}

/* 입력 필드 자체 */
.body.fixed-width .controls input[type="text"],
.body.fixed-width .controls input[type="password"],
.body.fixed-width .controls input[type="email"],
.body.fixed-width .controls input[type="tel"],
.body.fixed-width .controls input[type="url"],
.body.fixed-width .controls input.text,
.body.fixed-width .controls input.homepage,
.body.fixed-width .controls textarea,
.body.fixed-width .controls select {
  width: 100% !important;
  max-width: 100% !important;
  height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  color: var(--text) !important;
  background: var(--white) !important;
  transition: border-color .15s !important;
  box-sizing: border-box !important;
}
.body.fixed-width .controls input:focus,
.body.fixed-width .controls textarea:focus,
.body.fixed-width .controls select:focus {
  border-color: var(--primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(26, 58, 92, .1) !important;
}

/* 날짜 입력 */
.body.fixed-width .controls .inputDate {
  width: 100% !important;
  max-width: 300px !important;
  height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
}

/* 도움말 텍스트 */
.body.fixed-width .controls .help-inline,
.body.fixed-width .controls .help-block {
  font-size: 12px !important;
  color: var(--text-dim) !important;
  margin-top: 4px !important;
}

/* 라디오/체크박스 */
.body.fixed-width .controls label {
  font-size: 13px !important;
  color: var(--text) !important;
  margin-right: 16px !important;
}

/* 버튼 영역 */
.body.fixed-width .btnArea,
.body.fixed-width .btn_area {
  margin-top: 24px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--border-lt) !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

/* 버튼 스타일 — 텍스트 정중앙 정렬 */
.body.fixed-width .btnArea .btn,
.body.fixed-width .btn_area .btn,
.body.fixed-width .btnArea button,
.body.fixed-width .btn_area button,
.body.fixed-width .btnArea a,
.body.fixed-width .btn_area a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 42px !important;
  padding: 0 24px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all .15s !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}
.body.fixed-width .btnArea .btn-inverse,
.body.fixed-width .btn_area .btn-inverse,
.body.fixed-width .btnArea .btn.pull-right,
.body.fixed-width .btn_area .btn.pull-right {
  background: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  color: #fff !important;
  float: none !important;
}
.body.fixed-width .btnArea .btn-inverse:hover,
.body.fixed-width .btn_area .btn-inverse:hover {
  background: var(--primary-d) !important;
}
.body.fixed-width .btnArea .pull-left,
.body.fixed-width .btn_area .pull-left {
  float: none !important;
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-dim) !important;
}

/* ════════════════════════════════════════
   GLOBAL: 버튼/링크 텍스트 정중앙 정렬 보정
   사이트 전체에서 height가 지정된 버튼/a 요소의
   텍스트가 수직 중앙에 오도록 보장
   ════════════════════════════════════════ */
/* Rhymix 기본 .btn 클래스 전역 보정 */
.btn, a.btn, button.btn,
input[type="submit"], input[type="button"],
.bd_write a, .bd_write button,
.btn_write, a.btn_write,
.btn_submit,
.dateRemover {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

/* 검색 버튼 정렬 */
.bd_search button,
.board_search button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 로그인 위젯 버튼 */
.login_widget .btn_submit {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* 로그인 위젯 input 필드 높이 통일 */
.login_widget .control-group input[type="text"],
.login_widget .control-group input[type="email"],
.login_widget .control-group input[type="password"] {
  height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
}

/* 페이지네이션 텍스트 정렬 */
.pagination a, .paginate a, .rx-paginate a,
.pagination span, .paginate span {
  line-height: 1 !important;
}

/* 푸터 링크 정렬 */
.footer .f_cr_area .mobile-footer-member li a {
  display: inline-flex !important;
  align-items: center !important;
}

/* ════════════════════════════════════════
   UTILITY: hide XE/Rhymix default cruft
   ════════════════════════════════════════ */
.xe_official_banner, .poweredBy, .rxPoweredBy { display: none !important; }