@charset "utf-8";
/* ==========================================================================
   키워드몰 디자인 시스템 (2026)
   - 기존 style/icon/btn/main/kym.css 를 대체한다
   - 숫자(순위·입찰가·금액)는 고정폭으로 세운다. 이 사이트의 주인공은 숫자다.
   ========================================================================== */

:root{
  --ink:#0A1017; --ink-2:#101922; --ink-3:#17222D;
  --paper:#F6F7F5; --paper-2:#FFFFFF; --line:#E2E5E0; --line-2:#EDEFEB;
  --text:#0E141A; --muted:#5A6672; --muted-2:#8B96A0;
  --accent:#0E9F6E; --accent-dark:#0B7E57; --accent-soft:#E4F4EC; --accent-ink:#7BE3B4;
  --amber:#C77F1E; --amber-soft:#FBF0DE;
  --rose:#C4463F; --rose-soft:#FBE7E5;
  --on-ink:#EEF3F1; --on-ink-mute:#8FA0A8;

  --f-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic","맑은 고딕","Apple SD Gothic Neo",sans-serif;
  --f-mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,"D2Coding",monospace;

  --wrap:1180px;
  --r:10px;
}

/* ---------- reset ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--text);
  font-family:var(--f-sans); font-size:15px; line-height:1.7;
  -webkit-text-size-adjust:100%; word-break:keep-all;
}
img{max-width:100%; border:0; vertical-align:middle}
a{color:inherit; text-decoration:none}
a:hover{color:var(--accent)}
ul,ol,dl{margin:0; padding:0; list-style:none}
h1,h2,h3,h4,h5{margin:0; font-weight:700; letter-spacing:-.03em; line-height:1.3}
p{margin:0}
table{border-collapse:collapse; width:100%}
button,input,select,textarea{font-family:inherit; font-size:inherit; color:inherit}
hr{border:0; border-top:1px solid var(--line); margin:28px 0}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.sound_only,.sr-only{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.hnClear,.clear{clear:both}

/* ---------- 헤더 ---------- */
.kwm-top{
  position:sticky; top:0; z-index:200; background:rgba(246,247,245,.92);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line);
}
.kwm-top .wrap{display:flex; align-items:center; gap:28px; height:64px}
.kwm-logo{display:flex; align-items:center; gap:9px; font-weight:800; font-size:18px; letter-spacing:-.035em; flex:none}
.kwm-logo i{width:22px; height:22px; border-radius:6px; background:linear-gradient(150deg,var(--accent),#1B6FE0)}
.kwm-logo:hover{color:var(--text)}

.kwm-nav{display:flex; gap:4px; font-size:15px; font-weight:600}
.kwm-nav > li{position:relative}
.kwm-nav > li > a{display:block; padding:8px 14px; border-radius:7px; color:var(--muted)}
.kwm-nav > li:hover > a{color:var(--text); background:var(--line-2)}
.kwm-nav .sub{
  position:absolute; top:calc(100% + 6px); left:0; min-width:186px; padding:6px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 14px 34px -12px rgba(10,16,23,.22);
  opacity:0; visibility:hidden; transform:translateY(-4px); transition:.15s ease;
}
.kwm-nav > li:hover .sub{opacity:1; visibility:visible; transform:none}
.kwm-nav .sub a{display:block; padding:8px 12px; border-radius:6px; font-size:14px; font-weight:500; color:var(--muted)}
.kwm-nav .sub a:hover{background:var(--accent-soft); color:var(--accent-dark)}

.kwm-util{margin-left:auto; display:flex; align-items:center; gap:10px; font-size:13.5px}
.kwm-util .expire{color:var(--muted); font-size:13px}
.kwm-util .expire b{color:var(--text); font-weight:700}
.kwm-menu-btn{display:none}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:40px; padding:0 18px; border-radius:8px; border:1px solid transparent;
  font-size:14.5px; font-weight:700; cursor:pointer; white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active{transform:translateY(1px)}
.btn:hover{color:inherit}
.btn-primary{background:var(--accent); color:#03150E}
.btn-primary:hover{background:var(--accent-dark); color:#03150E}
.btn-ghost{background:var(--paper-2); border-color:var(--line); color:var(--text)}
.btn-ghost:hover{border-color:var(--muted-2)}
.btn-quiet{background:transparent; color:var(--muted)}
.btn-quiet:hover{background:var(--line-2); color:var(--text)}
.btn-onink{background:rgba(255,255,255,.09); color:var(--on-ink); border-color:rgba(255,255,255,.18)}
.btn-onink:hover{background:rgba(255,255,255,.16); color:var(--on-ink)}
.btn-sm{height:32px; padding:0 12px; font-size:13px; border-radius:6px}
.btn-lg{height:48px; padding:0 24px; font-size:16px}
.btn-block{width:100%}

/* ---------- 상태 배지 ---------- */
.pill{display:inline-block; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:700}
.pill-ok{background:var(--accent-soft); color:var(--accent-dark)}
.pill-warn{background:var(--amber-soft); color:var(--amber)}
.pill-off{background:var(--line-2); color:var(--muted)}
.pill-danger{background:var(--rose-soft); color:var(--rose)}

/* ---------- 페이지 골격 ---------- */
.kwm-main{min-height:52vh; padding:44px 0 88px}
.page-head{margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--line)}
.page-head h2{font-size:28px; letter-spacing:-.04em}
.page-head p{margin-top:8px; color:var(--muted)}
.crumb{font-size:13px; color:var(--muted-2); margin-bottom:10px}
.crumb a:hover{color:var(--accent)}

.card{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); padding:28px}
.card + .card{margin-top:20px}
.card h3{font-size:17px; margin-bottom:16px}

.grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
@media (max-width:860px){ .grid-2,.grid-3{grid-template-columns:1fr} }

/* ---------- 표 (게시판·요금표 공용) ---------- */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--paper-2)}
.tbl{width:100%; font-size:14.5px}
.tbl th{
  padding:13px 16px; text-align:left; white-space:nowrap;
  font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--muted-2); text-transform:uppercase;
  border-bottom:1px solid var(--line); background:var(--paper);
}
.tbl td{padding:14px 16px; border-bottom:1px solid var(--line-2); vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--paper)}
.tbl .r{text-align:right}
.tbl .c{text-align:center}
.tbl .subject{font-weight:600}
.tbl .subject a:hover{color:var(--accent)}
.tbl .meta{color:var(--muted-2); font-size:13px; white-space:nowrap}

/* ---------- 폼 ---------- */
.field{margin-bottom:18px}
.field > label{display:block; font-size:13px; font-weight:700; color:var(--muted); margin-bottom:7px}
.inp,select,textarea{
  width:100%; height:44px; padding:0 13px; background:var(--paper-2);
  border:1px solid var(--line); border-radius:8px; transition:border-color .15s ease;
}
textarea{height:auto; padding:12px 13px; line-height:1.7; resize:vertical}
.inp:focus,select:focus,textarea:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
.hint{margin-top:6px; font-size:13px; color:var(--muted-2)}
.err{color:var(--rose); font-size:13px; margin-top:6px}

/* ---------- 페이지네이션 ---------- */
.pg{display:flex; gap:6px; justify-content:center; margin-top:28px}
.pg a,.pg strong{
  display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px;
  padding:0 10px; border:1px solid var(--line); border-radius:7px; background:var(--paper-2);
  font-size:14px; font-weight:600; color:var(--muted);
}
.pg strong{background:var(--accent); border-color:var(--accent); color:#03150E}
.pg a:hover{border-color:var(--muted-2); color:var(--text)}

/* ---------- 알림 ---------- */
.note{padding:16px 18px; border-radius:var(--r); font-size:14.5px; border:1px solid}
.note-info{background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 30%,transparent); color:var(--accent-dark)}
.note-warn{background:var(--amber-soft); border-color:color-mix(in srgb,var(--amber) 30%,transparent); color:var(--amber)}

/* ---------- 푸터 ---------- */
.kwm-foot{background:var(--ink); color:var(--on-ink-mute); padding:48px 0; font-size:13.5px; line-height:1.9}
.kwm-foot .wrap{display:flex; gap:40px; flex-wrap:wrap; justify-content:space-between}
.kwm-foot b{color:var(--on-ink); font-weight:700}
.kwm-foot a:hover{color:var(--accent-ink)}
.kwm-foot .links{display:flex; gap:14px; margin-bottom:10px}

/* ---------- 모바일 ---------- */
@media (max-width:900px){
  .kwm-nav{
    display:none; position:absolute; top:64px; left:0; right:0; flex-direction:column; gap:0;
    background:var(--paper-2); border-bottom:1px solid var(--line); padding:8px 16px 16px;
  }
  .kwm-nav.open{display:flex}
  .kwm-nav > li > a{padding:12px 4px; color:var(--text); font-size:16px}
  .kwm-nav .sub{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:0; border-left:2px solid var(--line); border-radius:0; padding:0 0 8px 12px; margin-left:4px;
  }
  .kwm-menu-btn{
    display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
    margin-left:auto; border:1px solid var(--line); border-radius:8px; background:var(--paper-2); cursor:pointer;
  }
  .kwm-util .expire{display:none}
  .kwm-main{padding:28px 0 56px}
  .page-head h2{font-size:23px}
}

/* ---------- 다크 ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0C1319; --paper-2:#121B23; --line:#22303A; --line-2:#1B2731;
    --text:#E7EDEA; --muted:#93A1AA; --muted-2:#6E7C87;
    --accent:#2BBE88; --accent-dark:#4FD3A2; --accent-soft:#122A22;
    --amber:#D9A24A; --amber-soft:#2A2113;
    --rose:#E0645C; --rose-soft:#2C1715;
  }
  .kwm-top{background:rgba(12,19,25,.92)}
  .btn-primary,.btn-primary:hover{color:#04120C}
  .pg strong{color:#04120C}
}
:root[data-theme="dark"]{
  --paper:#0C1319; --paper-2:#121B23; --line:#22303A; --line-2:#1B2731;
  --text:#E7EDEA; --muted:#93A1AA; --muted-2:#6E7C87;
  --accent:#2BBE88; --accent-dark:#4FD3A2; --accent-soft:#122A22;
  --amber:#D9A24A; --amber-soft:#2A2113;
  --rose:#E0645C; --rose-soft:#2C1715;
}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
}

/* ==========================================================================
   홈 (index.php)
   ========================================================================== */
.kwm-main.is-home{padding:0}

.home-hero{background:var(--ink); color:var(--on-ink); position:relative; overflow:hidden}
.home-hero::before{
  content:""; position:absolute; inset:-40% -10% auto -10%; height:70%;
  background:radial-gradient(60% 60% at 30% 40%, rgba(14,159,110,.20), transparent 70%); pointer-events:none;
}
.home-hero .wrap{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:56px; align-items:center; padding-top:80px; padding-bottom:80px;
}
@media (max-width:940px){ .home-hero .wrap{grid-template-columns:1fr; gap:36px; padding-top:48px; padding-bottom:48px} }

.home-h1{margin:14px 0 0; font-size:clamp(32px,4.4vw,52px); line-height:1.18; letter-spacing:-.045em; font-weight:800}
.home-h1 em{font-style:normal; color:var(--accent-ink)}
.home-lede{margin:20px 0 0; max-width:46ch; color:var(--on-ink-mute); font-size:16.5px; line-height:1.75}
.home-cta{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap}
.home-trust{margin-top:28px; padding-top:22px; border-top:1px solid rgba(255,255,255,.10); display:flex; gap:34px; flex-wrap:wrap}
.home-trust div{font-size:13px; color:var(--on-ink-mute)}
.home-trust b{display:block; font-size:21px; color:var(--on-ink); font-weight:700; letter-spacing:-.02em}

.monitor{background:var(--ink-2); border:1px solid rgba(255,255,255,.09); border-radius:14px; box-shadow:0 30px 60px -20px rgba(0,0,0,.6); overflow:hidden}
.monitor-bar{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.08); background:var(--ink-3)}
.monitor-bar span{font-size:12.5px; color:var(--on-ink-mute); font-weight:600}
.monitor-bar .dot{width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(14,159,110,.16)}
.monitor-bar .clock{margin-left:auto}
.monitor-tbl th{
  background:transparent; color:#6E8089; border-bottom:1px solid rgba(255,255,255,.08);
  padding:12px 16px; text-align:right; font-size:11px;
}
.monitor-tbl th:first-child{text-align:left}
.monitor-tbl td{padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.05); text-align:right; white-space:nowrap; font-size:14px}
.monitor-tbl td:first-child{text-align:left; color:var(--on-ink); font-weight:600}
.monitor-tbl tbody tr:last-child td{border-bottom:0}
.monitor-tbl tbody tr:hover{background:transparent}
.monitor-tbl .rank{font-size:17px; font-weight:700; color:var(--on-ink)}
.monitor-tbl .bid{font-size:15px; color:var(--on-ink)}
.monitor-tbl .dim{color:var(--on-ink-mute)}
.monitor-tbl .live td{background:rgba(43,190,136,.05)}
.monitor-tbl .tick{transition:color .35s ease}
.monitor-tbl .tick.flash{color:var(--accent-ink)}
.monitor .pill-warn{background:rgba(217,162,74,.15); color:#E0B26B}
.monitor .pill-ok{background:rgba(43,190,136,.14); color:#5FD9A6}
.monitor .pill-off{background:rgba(255,255,255,.07); color:#93A1AA}

.home-sec{padding:88px 0}
.home-sec.alt{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.sec-head{max-width:52ch; margin-bottom:44px}
.sec-head h2{margin:12px 0 0; font-size:clamp(25px,2.9vw,34px); letter-spacing:-.035em; font-weight:800}
.sec-head p{margin:13px 0 0; color:var(--muted); font-size:16px}

.steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden}
@media (max-width:860px){ .steps{grid-template-columns:1fr} }
.step{background:var(--paper-2); padding:30px 26px}
.step .n{font-family:var(--f-mono); font-size:12px; font-weight:700; color:var(--accent); letter-spacing:.1em}
.step h3{margin:13px 0 0; font-size:18px}
.step p{margin:10px 0 0; color:var(--muted); font-size:14.5px}

.card h3 .tag{font-family:var(--f-mono); font-size:11px; font-weight:700; padding:3px 8px; border-radius:5px; background:var(--accent-soft); color:var(--accent-dark); letter-spacing:0}
.card h3 .more{float:right; font-size:13px; font-weight:600; color:var(--muted-2)}
.card h3 .more:hover{color:var(--accent)}
.card p.muted{color:var(--muted); font-size:14.5px}

.plan{display:flex; flex-direction:column}
.plan.best{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.plan-name{font-size:15px; font-weight:700}
.plan-price{margin-top:16px; font-size:33px; font-weight:800; letter-spacing:-.04em; line-height:1.1}
.plan-price small{font-size:15px; font-weight:600; color:var(--muted)}
.plan-was{margin-top:5px; color:var(--muted-2); font-size:13.5px; text-decoration:line-through}
.plan-note{margin:12px 0 22px; color:var(--muted); font-size:14px; min-height:66px}
.plan .btn{margin-top:auto}

.notices li{border-top:1px solid var(--line-2)}
.notices li:first-child{border-top:0}
.notices a{display:flex; gap:16px; align-items:baseline; padding:12px 0; font-size:14.5px}
.notices a span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.notices time{margin-left:auto; flex:none; color:var(--muted-2); font-size:12.5px}

.contact-card{margin-top:20px}
.contact{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 32px}
@media (max-width:700px){ .contact{grid-template-columns:1fr} }
.contact > div{display:flex; gap:14px; align-items:baseline; font-size:15px}
.contact dt{width:70px; flex:none; color:var(--muted-2); font-size:13px; font-weight:600}
.contact dd{margin:0; font-weight:600}
.contact dd small{display:block; font-weight:500; color:var(--muted); font-size:13px; margin-top:2px}

/* ==========================================================================
   그누보드5 표준 클래스 매핑
   - 스킨 파일을 고치지 않고 CSS 만으로 게시판·회원·폼 전체를 새 디자인에 맞춘다
   ========================================================================== */

/* --- 게시판 목록 --- */
#bo_list, #bo_v, #bo_w, #bo_gall{margin:0}
.tbl_head01, .tbl_head02{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--paper-2);
}
.tbl_head01 table, .tbl_head02 table{width:100%; font-size:14.5px}
.tbl_head01 caption, .tbl_wrap caption{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0)}
.tbl_head01 th, .tbl_head02 th{
  padding:13px 14px; background:var(--paper); border-bottom:1px solid var(--line);
  font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--muted-2); text-transform:uppercase; white-space:nowrap;
}
.tbl_head01 td, .tbl_head02 td{
  padding:14px; border-bottom:1px solid var(--line-2); vertical-align:middle; color:var(--muted);
}
.tbl_head01 tbody tr:last-child td{border-bottom:0}
.tbl_head01 tbody tr:hover{background:var(--paper)}
.td_num, .td_num2, .td_numbig{width:60px; text-align:center; font-family:var(--f-mono); font-variant-numeric:tabular-nums; color:var(--muted-2); font-size:13px}
.td_name, .td_nick, .td_namesmall{width:120px; text-align:center; font-size:13.5px}
.td_date, .td_datetime{width:96px; text-align:center; font-family:var(--f-mono); font-size:12.5px; color:var(--muted-2)}
.td_num_hit, .td_hit{width:70px; text-align:center; font-family:var(--f-mono); font-size:12.5px; color:var(--muted-2)}
.td_chk, .td_mng{width:44px; text-align:center}
.td_subject{text-align:left}
.bo_tit{color:var(--text); font-weight:600}
.bo_tit:hover{color:var(--accent)}
.bo_notice td{background:var(--accent-soft)}
.bo_notice .bo_tit{color:var(--accent-dark); font-weight:700}
.bo_current{font-weight:700}
.bo_cate_link{
  display:inline-block; margin-right:8px; padding:2px 8px; border-radius:5px;
  background:var(--line-2); color:var(--muted); font-size:12px; font-weight:700;
}
.cnt_cmt{
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent-dark); font-size:11.5px; font-weight:700;
  font-family:var(--f-mono);
}
#bo_list_total, .bo_fx{margin-bottom:14px; color:var(--muted-2); font-size:13.5px}
.bo_fx{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.bo_fx .btn_bo_user, .bo_fx .btn_bo_adm{display:flex; gap:8px; margin-left:auto; list-style:none}

/* --- 게시판 읽기 --- */
#bo_v_title, .bo_v_tit{font-size:24px; font-weight:800; letter-spacing:-.035em; line-height:1.35; margin:0 0 14px}
#bo_v_info{
  display:flex; gap:16px; flex-wrap:wrap; padding-bottom:18px; margin-bottom:26px;
  border-bottom:1px solid var(--line); color:var(--muted-2); font-size:13.5px;
}
#bo_v_info strong{font-weight:600; color:var(--muted)}
#bo_v_atc{min-height:180px; line-height:1.85; font-size:16px; color:var(--text)}
#bo_v_atc img{height:auto}
#bo_v_con{line-height:1.85; word-break:break-word}
#bo_v_file li, #bo_v_top, #bo_v_bot{list-style:none}
#bo_v_file li{
  padding:10px 14px; border:1px solid var(--line); border-radius:8px;
  margin-bottom:8px; background:var(--paper-2); font-size:14px;
}
#bo_v_top, #bo_v_bot{display:flex; gap:8px; flex-wrap:wrap; margin:24px 0}
.bo_v_nb{margin-top:20px; padding-top:18px; border-top:1px solid var(--line); font-size:14px}
.bo_v_nb li{padding:7px 0; color:var(--muted)}
#bo_vc{margin-top:36px; padding-top:28px; border-top:1px solid var(--line)}
#bo_vc h2{font-size:17px; margin-bottom:16px}
#bo_vc article{padding:16px 0; border-bottom:1px solid var(--line-2)}

/* --- 그누보드 버튼 --- */
.btn_b01, .btn_b02, .btn_b03, .btn_b04, .btn_submit, .btn_cancel, .btn_frmline, .btn_admin, .btn_confirm input[type=submit]{
  display:inline-flex; align-items:center; justify-content:center;
  height:38px; padding:0 16px; border-radius:8px; border:1px solid var(--line);
  background:var(--paper-2); color:var(--text); font-size:14px; font-weight:700; cursor:pointer;
  text-decoration:none;
}
.btn_b01:hover, .btn_b02:hover, .btn_b03:hover, .btn_b04:hover{border-color:var(--muted-2); color:var(--text)}
.btn_b02, .btn_submit, .btn_confirm input[type=submit]{background:var(--accent); border-color:var(--accent); color:#03150E}
.btn_b02:hover, .btn_submit:hover{background:var(--accent-dark); color:#03150E}
.btn_b04, .btn_admin{background:var(--rose-soft); border-color:transparent; color:var(--rose)}

/* --- 페이지네이션 --- */
.pg_wrap{display:flex; justify-content:center; gap:6px; margin-top:28px}
.pg_wrap .pg{display:flex; gap:6px}
.pg_page, .pg_current, .pg_start, .pg_prev, .pg_next, .pg_end{
  display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px;
  border:1px solid var(--line); border-radius:7px; background:var(--paper-2);
  font-size:14px; font-weight:600; color:var(--muted); text-decoration:none;
}
.pg_current{background:var(--accent); border-color:var(--accent); color:#03150E}
.pg_page:hover{border-color:var(--muted-2); color:var(--text)}

/* --- 폼 / 회원 --- */
.frm_input, .frm_file, input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number], input[type=date]{
  height:44px; padding:0 13px; background:var(--paper-2);
  border:1px solid var(--line); border-radius:8px; max-width:100%;
}
.frm_input:focus, input:focus, select:focus, textarea:focus{
  border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft);
}
.frm_label, .login_label{display:block; font-size:13px; font-weight:700; color:var(--muted); margin-bottom:7px}
.required, .frm_required{background-image:none!important; border-color:var(--line)}
.tbl_frm01 table{width:100%}
.tbl_frm01 th{
  width:150px; padding:14px; text-align:left; vertical-align:middle;
  background:var(--paper); border-bottom:1px solid var(--line-2);
  font-size:13.5px; font-weight:700; color:var(--muted);
}
.tbl_frm01 td{padding:12px 14px; border-bottom:1px solid var(--line-2)}
#mb_login, #register_form, #fregister{max-width:460px; margin:0 auto}
#mb_login h2, #register_form h2{font-size:24px; margin-bottom:24px; text-align:center}
#login_fs{display:flex; flex-direction:column; gap:12px}
#login_fs .frm_input{width:100%}
#login_fs .btn_submit{width:100%; height:46px; font-size:15px}
#login_info, #login_ft{margin-top:18px; font-size:13.5px; color:var(--muted-2); text-align:center}
#login_ft a{color:var(--muted)}

/* --- 알림 / 캡션 --- */
.empty_list, .empty_table{padding:56px 0; text-align:center; color:var(--muted-2)}
#validation_check{max-width:520px; margin:60px auto; text-align:center}

/* ==========================================================================
   반응형 보정
   - 그누보드 스킨은 th 고정폭 + input 에 size 속성을 쓰기 때문에
     좁은 화면에서 표가 그대로 밖으로 밀려난다. 아래에서 눌러 준다.
   ========================================================================== */

/* 어떤 경우에도 가로 스크롤이 생기지 않게 한다 */
html{overflow-x:hidden}
body{overflow-x:hidden; max-width:100%}
img,table,pre,iframe,video{max-width:100%}
input,select,textarea{max-width:100%}

/* 폼 표 : 좁은 화면에서 라벨과 입력칸을 위아래로 쌓는다 */
@media (max-width:760px){
  .tbl_frm01 table, .tbl_frm01 tbody, .tbl_frm01 tr, .tbl_frm01 th, .tbl_frm01 td{
    display:block; width:auto;
  }
  .tbl_frm01 th{
    width:auto; padding:16px 0 7px; background:transparent; border:0;
    font-size:13px; color:var(--muted);
  }
  .tbl_frm01 td{padding:0 0 16px; border-bottom:1px solid var(--line-2)}
  .tbl_frm01 tr:last-child td{border-bottom:0}
  .tbl_frm01 input[type=text], .tbl_frm01 input[type=password],
  .tbl_frm01 input[type=email], .tbl_frm01 input[type=tel],
  .tbl_frm01 .frm_input, .tbl_frm01 select, .tbl_frm01 textarea{
    width:100%!important;
  }
  .tbl_frm01 input[type=checkbox], .tbl_frm01 input[type=radio]{width:auto!important}

  /* 게시판 목록 : 좁은 화면에서 불필요한 열을 접는다 */
  .tbl_head01 .td_num, .tbl_head01 .td_num2,
  .tbl_head01 .td_hit, .tbl_head01 .td_num_hit,
  .tbl_head01 .td_name, .tbl_head01 .td_nick{display:none}
  .tbl_head01 th, .tbl_head01 td{padding:12px 10px}
  .tbl_head01 .td_date, .tbl_head01 .td_datetime{width:64px}

  #bo_v_title, .bo_v_tit{font-size:20px}
  #bo_v_info{gap:10px; font-size:12.5px}
  #bo_btn_top, #bo_v_top, #bo_v_bot{gap:6px}
  .btn_b01, .btn_b02, .btn_b03, .btn_b04{height:36px; padding:0 12px; font-size:13.5px}
}

/* 로그인·회원가입 같은 단독 폼은 항상 가운데 좁게 */
#mb_login, #register_form, #fregister, #login_fs{max-width:460px; margin-left:auto; margin-right:auto}
#fregister .tbl_frm01{margin-bottom:20px}
#fregister .btn_confirm, #register_form .btn_confirm{display:flex; gap:8px; justify-content:center; margin-top:24px}

/* 매우 좁은 화면 : 헤더 버튼이 두 줄로 넘치지 않게 */
@media (max-width:420px){
  .kwm-top .wrap{gap:10px; padding:0 14px}
  .kwm-logo{font-size:16px}
  .kwm-util .btn{padding:0 10px; font-size:12.5px}
  .wrap{padding:0 16px}
}