@charset "utf-8";
/*!
 * web02 (BLOOM) 테마 · 공통 스타일
 * 색은 --accent 하나로 움직인다 (theme/web02/config.web02.php 에서 바꿉니다)
 */

/* ── 토큰 ─────────────────────────────────────────────────────── */
:root{
  --accent:#ff5c7a; --accent-dark:#e6486a; --accent-soft:#fff2f5;
  --accent-rgb:255,92,122; /* 그림자·반투명 배경용 r,g,b — head.sub.php 가 고른 색으로 덮어쓴다 */
  --ink:#20242c; --ink2:#4a505c; --muted:#5b6270; --light:#9aa1ad; --faint:#b9bfca;
  --line:#f2f3f6; --line2:#ecedf1; --soft:#f6f7f9; --soft2:#fbfbfd;
  --wrap:1400px; --hd:72px; --cb-h:88px;
  --font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,'Malgun Gothic','맑은 고딕',sans-serif;
}

/* ── 기본 ─────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:clip;max-width:100%}
body{background:#fff;color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;word-break:keep-all}
img{max-width:100%;vertical-align:middle;border:0}
a{color:var(--accent);text-decoration:none}
a:hover,a:focus{color:var(--accent-dark)}
ul,ol,li{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:800;letter-spacing:-0.5px;line-height:1.3}
p{margin:0}
hr{display:none}
fieldset{margin:0;padding:0;border:0;min-width:0}
input,select,textarea,button{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
legend,caption{position:absolute;width:0;height:0;overflow:hidden;font-size:0;line-height:0}
table{width:100%;border-collapse:collapse;border-spacing:0}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(var(--accent-rgb),.35);border-radius:99px}
::-webkit-scrollbar-track{background:transparent}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.sound_only,.msg_sound_only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}
#skip_to_container a{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;font-size:0}
#skip_to_container a:focus,#skip_to_container a:active{width:100%;height:auto;padding:12px 0;background:var(--accent);color:#fff;font-weight:700;text-align:center;font-size:15px;z-index:999}
.pc-only{display:block}
.mobile-only{display:none}

/* ── 버튼 ─────────────────────────────────────────────────────── */
.btn,a.btn,button.btn,.btn_submit,input[type=submit].btn_submit,.btn_b01,.btn_close{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:46px;padding:0 24px;border:none;border-radius:14px;
  background:var(--accent);color:#fff;font-size:15px;font-weight:800;
  transition:filter .15s,background .15s,color .15s}
.btn:hover,a.btn:hover,.btn_submit:hover,.btn_b01:hover{filter:brightness(0.95);color:#fff}
.btn.line,a.btn.line,.btn_close,.btn_cancel{background:#fff;border:1.5px solid var(--line2);color:var(--ink2)}
.btn.line:hover,.btn_close:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.btn.soft,a.btn.soft{background:var(--accent-soft);color:var(--accent)}
.btn.soft:hover{background:rgba(var(--accent-rgb),.14);color:var(--accent)}
.btn.sm{height:38px;padding:0 16px;font-size:14px;border-radius:11px}
.btn.wide{width:100%}

/* ── 상단 ─────────────────────────────────────────────────────── */
header.site{position:sticky;top:0;z-index:80;background:rgba(255,255,255,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header.site>.wrap{height:var(--hd);display:flex;align-items:center;justify-content:space-between;gap:24px}
header.site .logo{display:flex;align-items:baseline;gap:6px;color:var(--ink);flex:0 0 auto}
header.site .logo .en{font-size:26px;font-weight:800;letter-spacing:-0.5px}
header.site .logo .en i{font-style:normal;color:var(--accent)}
header.site .logo .ko{font-size:12px;font-weight:600;color:var(--light)}
header.site .logo img{height:42px;width:auto;display:block} /* 테마관리에서 올린 로고 이미지 */

.gnb>ul{display:flex;align-items:center;gap:4px}
.gnb>ul>li{position:relative}
.gnb>ul>li>a{display:block;padding:10px 16px;border-radius:99px;font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap;transition:.15s}
.gnb>ul>li>a:hover,.gnb>ul>li>a.on,.gnb>ul>li:hover>a{color:var(--accent);background:var(--accent-soft)}
.gnb2{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:8px;z-index:5}
.gnb>ul>li:hover .gnb2,.gnb>ul>li:focus-within .gnb2{display:block}
.gnb2>ul{min-width:168px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 16px 40px rgba(var(--accent-rgb),.12),0 2px 8px rgba(0,0,0,.05)}
.gnb2 a{display:block;padding:9px 14px;border-radius:10px;font-size:14px;font-weight:500;color:var(--ink2);white-space:nowrap}
.gnb2 a:hover,.gnb2 a.on{background:var(--accent-soft);color:var(--accent)}
.gnb2 a.on{font-weight:700}

.hd-util{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.hd-util .txt{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ink2)}
.hd-util .txt:hover{color:var(--accent)}
.hd-util .txt svg{width:20px;height:20px}
.hd-util .btn{height:auto;padding:9px 18px;border-radius:99px;font-size:14px;font-weight:600}

.ham{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;background:none;color:var(--ink)}
.ham svg{width:24px;height:24px}

.mnav{border-top:1px solid var(--line);background:#fff;max-height:70vh;overflow-y:auto;padding:16px 24px 28px}
.mnav-util{display:flex;gap:10px;margin-bottom:20px}
.mnav-util a{flex:1;text-align:center;padding:11px 0;border-radius:12px;font-size:14px;font-weight:700}
.mnav-util .line{border:1.5px solid var(--line2);color:var(--ink2)}
.mnav-util .fill{background:var(--accent);color:#fff}
.mnav-grp{margin-bottom:16px}
.mnav-tit a{display:block;font-size:15px;font-weight:800;color:var(--ink);margin-bottom:8px}
.mnav-tit a.on{color:var(--accent)}
.mnav-sub{display:flex;flex-wrap:wrap;gap:6px}
.mnav-sub a{padding:7px 13px;border-radius:99px;background:var(--soft);font-size:13px;font-weight:500;color:var(--muted)}
.mnav-sub a:hover,.mnav-sub a.on{background:var(--accent-soft);color:var(--accent)}
.mnav-sub a.on{font-weight:700}

/* ── 서브페이지 상단 ──────────────────────────────────────────── */
.subhero{background:linear-gradient(180deg,var(--accent-soft) 0%,#fff 100%);padding:52px 28px 40px;text-align:center}
.subhero .lb{font-size:13px;font-weight:800;letter-spacing:3px;color:var(--accent)}
.subhero h2{margin:10px 0 8px;font-size:34px;letter-spacing:-1px}
.subhero p{font-size:15px;color:var(--light)}
.subhero .crumb{margin-top:14px;font-size:12.5px;color:var(--faint);display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.subhero .crumb a{color:var(--faint)}
.subhero .crumb a:hover{color:var(--accent)}
.subhero .crumb span::before{content:'\203A';margin-right:8px;color:var(--faint)}

main.content{display:block;padding:36px 0 60px}
.empty_list,.empty_table{padding:70px 20px;text-align:center;color:var(--light);font-size:15px}

/* ── 하단 ─────────────────────────────────────────────────────── */
footer.site{border-top:1px solid var(--line);background:var(--soft2)}
footer.site .wrap{padding:36px 28px calc(44px + var(--cb-h));display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between}
.ft-brand .logo{font-size:20px;font-weight:800;color:var(--ink)}
.ft-brand .logo i{font-style:normal;color:var(--accent)}
.ft-brand .logo span{font-size:13px;font-weight:600;color:var(--light)}
.ft-brand p{margin-top:10px;font-size:13px;line-height:1.7;color:var(--light)}
.ft-links{display:flex;gap:20px;align-items:flex-start;font-size:13px;font-weight:600}
.ft-links a{color:var(--muted)}
.ft-links a:hover{color:var(--accent)}

#w02_top{position:fixed;right:20px;bottom:calc(24px + var(--cb-h));z-index:70;width:44px;height:44px;border:none;border-radius:50%;
  background:#fff;color:var(--ink2);box-shadow:0 6px 20px rgba(0,0,0,.12);font-size:18px;font-weight:700;
  opacity:0;visibility:hidden;transition:.2s}
#w02_top.on{opacity:1;visibility:visible}
#w02_top:hover{background:var(--accent);color:#fff}

/* ── 하단 상담바 ──────────────────────────────────────────────── */
.consultbar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);
  box-shadow:0 -10px 34px rgba(var(--accent-rgb),.10)}
.cb-open{display:none;width:calc(100% - 32px);margin:10px 16px calc(10px + env(safe-area-inset-bottom));
  height:50px;border:none;border-radius:14px;background:var(--accent);color:#fff;font-size:16px;font-weight:800;
  align-items:center;justify-content:center;gap:8px;box-shadow:0 6px 18px rgba(var(--accent-rgb),.35)}
.cb-open svg{width:16px;height:16px}
.cb-fold{display:none;width:100%;align-items:center;justify-content:center;gap:6px;padding:8px 0 2px;
  border:none;background:none;color:var(--light);font-size:12px;font-weight:700}
.cb-fold svg{width:14px;height:14px}
.consultbar.folded .cb-body{display:none}
.consultbar.folded .cb-open{display:flex}

.cb-form{max-width:var(--wrap);margin:0 auto;padding:14px 28px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.cb-tit{font-size:15px;font-weight:800;color:var(--ink);margin-right:4px;white-space:nowrap}
.cb-tit i{font-style:normal;color:var(--accent)}
.cb-form input[type=text],.cb-form input[type=tel],.cb-form select{
  height:44px;border:1.5px solid var(--line2);border-radius:12px;padding:0 14px;font-size:14px;background:#fff;outline-color:var(--accent)}
.cb-form .cb-name{flex:1 1 110px;min-width:110px}
.cb-form .cb-tel{flex:1.4 1 150px;min-width:150px}
.cb-form .cb-part{flex:1 1 130px;min-width:130px;padding:0 10px;color:var(--ink2)}
.cb-agree{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);cursor:pointer;white-space:nowrap}
.cb-agree input{width:17px;height:17px;accent-color:var(--accent)}
.cb-more{border:none;background:none;padding:0;font-size:13px;font-weight:700;color:var(--accent)}
.cb-submit{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 28px;
  border:none;border-radius:12px;background:var(--accent);color:#fff;font-size:15px;font-weight:800;
  box-shadow:0 6px 18px rgba(var(--accent-rgb),.35)}
.cb-submit:hover{filter:brightness(.95);color:#fff}
.cb-hp{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}
.cb-fallback p{flex:1 1 220px;font-size:14px;color:var(--muted);margin:0}
.cb-adm{max-width:var(--wrap);margin:0 auto;padding:0 28px 12px;font-size:12px;line-height:1.6;color:var(--light)}

/* 개인정보처리방침 알림창 */
.w02-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(32,36,44,.45);backdrop-filter:blur(4px)}
.w02-modal[hidden]{display:none}
.w02-modal-box{width:100%;max-width:480px;max-height:80vh;overflow-y:auto;background:#fff;border-radius:24px;
  padding:32px 30px;box-shadow:0 30px 80px rgba(0,0,0,.25)}
.w02-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.w02-modal-head h3{font-size:20px}
.w02-modal-x{width:34px;height:34px;border:none;border-radius:50%;background:var(--soft);color:var(--ink2);font-size:18px;line-height:1}
.w02-modal-x:hover{background:var(--accent-soft);color:var(--accent)}
.w02-modal-body{display:flex;flex-direction:column;gap:14px;font-size:14px;line-height:1.65;color:var(--ink2)}
.w02-privacy-item{background:rgba(var(--accent-rgb),.04);border:1px solid rgba(var(--accent-rgb),.16);border-radius:14px;padding:14px 16px}
.w02-privacy-item b{display:block;color:var(--ink);margin-bottom:4px;font-weight:800}
.w02-modal-ok{width:100%;height:50px;margin-top:22px;border:none;border-radius:14px;background:var(--accent);color:#fff;font-size:15px;font-weight:800}
.w02-modal-ok:hover{filter:brightness(.95)}

/* ── 부품 : 가로 스크롤 · 전후 비교 ────────────────────────────
   메인 · 게시판 · 일반페이지에서 함께 쓰므로 여기 한 곳에만 둔다.
   (같은 규칙을 여러 파일에 두면 한쪽만 고쳐져 어긋난다)          */
.xscroll{display:flex;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory;scrollbar-width:none;
  overscroll-behavior-x:contain;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}
.xscroll::-webkit-scrollbar{display:none}
.xscroll>*{scroll-snap-align:start}

.ba{position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:#eef0f4;user-select:none;display:block}
.ba .after,.ba .before{position:absolute;inset:0;background-size:cover;background-position:center}
.ba .before{clip-path:inset(0 50% 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-1px);background:#fff;
  pointer-events:none;box-shadow:0 0 10px rgba(0,0,0,.2)}
.ba-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;padding:0;
  border:2.5px solid #fff;border-radius:50%;background:var(--accent);color:#fff;font-size:10px;cursor:ew-resize;
  touch-action:none;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 12px rgba(0,0,0,.18);z-index:3}
/* 손잡이가 작아진 만큼 손가락이 닿는 범위는 넉넉하게 (보이지 않는 여유) */
.ba-handle::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%}
.ba-handle:active,.ba-dragging .ba-handle{transform:translate(-50%,-50%) scale(1.12)}
.ba-dragging{cursor:ew-resize}
.ba-dragging .after,.ba-dragging .before{pointer-events:none}
.ba-info{position:absolute;top:16px;left:18px;pointer-events:none;z-index:2}
.ba-info .cat{font-size:11px;font-weight:800;letter-spacing:2px;color:var(--accent)}
.ba-info .tit{margin-top:3px;font-size:19px;font-weight:800;color:var(--ink);text-shadow:0 1px 6px rgba(255,255,255,.8)}
.ba-info .meta{margin-top:3px;font-size:12.5px;color:var(--muted)}
.ba .lb-b,.ba .lb-a{position:absolute;bottom:14px;padding:6px 14px;border-radius:99px;z-index:2;
  font-size:11px;font-weight:700;letter-spacing:2px;pointer-events:none}
.ba .lb-b{left:16px;background:rgba(255,255,255,.9);color:var(--muted)}
.ba .lb-a{right:16px;background:var(--accent);color:#fff}


/* ── 그룹 페이지 ──────────────────────────────────────────────── */
.grp-lay{display:flex;flex-direction:column;gap:44px}
.grp-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.grp-head h2{font-size:22px}
.grp-head .more{font-size:14px;font-weight:600;color:var(--light)}
.grp-head .more:hover{color:var(--accent)}

/* ── 그누보드 공통 (게시판·회원 화면) ────────────────────────── */
.tbl_wrap{margin:0 0 20px}
.tbl_head01{width:100%;border-top:2px solid var(--ink)}
.tbl_head01 caption{padding:0;font-size:0;line-height:0;overflow:hidden}
.tbl_head01 th{padding:16px 8px;border-bottom:1px solid var(--line);background:#fff;font-size:13.5px;font-weight:800;color:var(--ink);text-align:center}
.tbl_head01 td{padding:16px 8px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink2);text-align:center;word-break:break-all}
.tbl_head01 tbody tr:hover td{background:rgba(var(--accent-rgb),.04)}
.tbl_head01 a{color:var(--ink)}
.tbl_head01 a:hover{color:var(--accent)}
.td_num,.td_numbig,.td_num2{width:60px;color:var(--faint);font-size:13px}
.td_date,.td_datetime{width:90px;color:var(--light);font-size:13px}
.td_name,.td_nick{width:110px}
.td_chk{width:40px}
.td_mng,.td_mng_s{width:90px}
.td_category{width:100px}
.td_group{width:100px}
.tbl_frm01{width:100%;border-top:2px solid var(--ink)}
.tbl_frm01 th{width:130px;padding:14px 12px;border-bottom:1px solid var(--line);background:var(--soft2);font-size:14px;font-weight:700;text-align:left;color:var(--ink)}
.tbl_frm01 td{padding:12px 12px;border-bottom:1px solid var(--line);font-size:14px}
.frm_input,.full_input,.half_input,.twopart_input input,
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=search],select,textarea{
  height:46px;padding:0 14px;border:1.5px solid var(--line2);border-radius:12px;background:#fff;font-size:14.5px;outline-color:var(--accent);max-width:100%}
textarea{height:auto;padding:12px 14px;line-height:1.6}
select{padding-right:8px}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
.full_input{width:100%}
.half_input{width:49%}
.required,textarea.required{background-image:none;border-color:rgba(var(--accent-rgb),.35)}
.frm_info{display:block;margin-top:5px;font-size:12.5px;color:var(--light)}
.btn_confirm,.btn_list,.bd-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:20px 0}
.btn_confirm{justify-content:center}

/* 글쓰기 — 테마가 더한 전용 입력칸 */
.w02-extra{padding:14px 16px;margin-bottom:12px;border:1.5px solid var(--accent-soft);
  border-radius:14px;background:rgba(var(--accent-rgb),.04)}
.w02-extra>label,.w02-lb{display:block;margin-bottom:7px;font-size:14px;font-weight:700;color:var(--ink)}
.w02-extra>label span,.w02-lb span{display:inline;margin-left:6px;font-size:12.5px;font-weight:500;color:var(--light)}
.w02-extra input{width:100%}
.w02-hint{margin:6px 0 12px;font-size:12.5px;line-height:1.6;color:var(--light)}

/* 페이지 번호 — 코어 get_paging 이 .pg_wrap > .pg 로 내보낸다.
   .pg 만 쓰면 일반페이지(page.php)의 본문 래퍼와 겹치므로 반드시 .pg_wrap 아래로 한정한다. */
.pg_wrap{display:flex;justify-content:center;margin:36px 0 0}
.pg_wrap .pg{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.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 8px;
  border-radius:10px;font-size:14px;font-weight:700;color:var(--ink2);background:transparent}
.pg_page:hover,.pg_start:hover,.pg_prev:hover,.pg_next:hover,.pg_end:hover{background:var(--accent-soft);color:var(--accent)}
.pg_current{background:var(--accent);color:#fff}

/* 목록 상단 (분류 + 검색) */
.bd-top{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:22px}
.bd-cats{display:flex;flex-wrap:wrap;gap:8px}
.bd-cats a{padding:9px 18px;border-radius:99px;border:1.5px solid var(--line2);background:#fff;color:var(--ink2);font-size:14px;font-weight:700}
.bd-cats a:hover{border-color:var(--accent);color:var(--accent)}
.bd-cats a.on{border-color:var(--accent);background:var(--accent);color:#fff}
.bd-srch{display:flex;gap:8px}
.bd-srch select{height:42px}
.bd-srch input[type=text]{width:200px;height:42px}
.bd-srch .btn{height:42px;padding:0 18px;border-radius:12px;background:var(--accent-soft);color:var(--accent);font-size:14px}
.bd-srch .btn:hover{background:rgba(var(--accent-rgb),.14);color:var(--accent)}

/* 새 글 표시 */
.badge{display:inline-block;margin-left:8px;width:16px;height:16px;line-height:16px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:10px;font-weight:800;text-align:center;vertical-align:2px}

/* 팝업·기타 */
.new_win{padding:24px}
.new_win .win_title{margin-bottom:16px;font-size:20px;font-weight:800}
#validation_check{padding:40px 24px}
.cke_sc,.btn_cke_sc,.cke_sc_def{display:none}
#captcha{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;vertical-align:middle;max-width:100%}
#captcha input{height:42px}
/* 댓글 — 기능은 그대로 두고 화면에서만 감춘다.
   다시 보이게 하려면 이 한 줄을 지우면 된다. */
.cmt_btn,#bo_vc,#bo_vc_w,.bo_vc_w{display:none!important}

/* 팝업레이어 — 등록된 팝업이 없을 때 '팝업레이어 알림' 글자가 보이지 않게 */
#hd_pop{position:relative;z-index:1000}
#hd_pop>h2{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}
.hd_pops{position:absolute;z-index:1000}
.hd_pops_con{border:1px solid var(--line)}
.hd_pops_footer{display:flex;gap:8px;background:var(--ink);color:#fff}
.hd_pops_footer button{flex:1;border:none;background:none;color:#fff;padding:10px 0;font-size:13px}

/* ── 반응형 ───────────────────────────────────────────────────── */
@media (max-width:1024px){
  .wrap{padding:0 20px}
  .cb-form{padding:14px 20px}
}
@media (max-width:820px){
  .pc-only{display:none}
  .mobile-only{display:block}
  .gnb,.hd-util{display:none!important}
  .ham{display:flex}
  .mnav[hidden]{display:none}
  .subhero{padding:40px 20px 32px}
  .subhero h2{font-size:27px}
  main.content{padding:28px 0 40px}
  footer.site .wrap{padding-bottom:calc(32px + var(--cb-h))}
  .cb-fold{display:flex}
  .cb-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;padding:4px 16px calc(12px + env(safe-area-inset-bottom))}
  .cb-form .cb-tit{display:none}
  .cb-form .cb-part,.cb-form .cb-agree,.cb-form .cb-submit,.cb-fallback p{grid-column:1/-1}
  .cb-form .cb-hp{display:none}
  .cb-form .cb-agree{justify-content:center;order:2}   /* 상담신청 버튼 아래 · 가운데 */
  .cb-form input,.cb-form select{min-width:0!important;width:100%}
  .tbl_head01 .td_name,.tbl_head01 .td_num,.tbl_head01 .td_date{display:none}
  .tbl_frm01 th{display:block;width:100%;border-bottom:0;padding-bottom:4px}
  .tbl_frm01 td{display:block;width:100%}
  #w02_top{right:14px}

  /* 게시판 상단 — 분류는 가로로 밀어 보고, 검색은 한 줄을 다 쓴다 */
  .bd-top{flex-direction:column;align-items:stretch;gap:12px}
  .bd-cats{flex-wrap:nowrap;overflow-x:auto;gap:6px;margin:0 -20px;padding:0 20px 2px;scrollbar-width:none}
  .bd-cats::-webkit-scrollbar{display:none}
  .bd-cats a{flex:0 0 auto;padding:8px 15px;font-size:13.5px}
  .bd-srch{width:100%}
  .bd-srch select{flex:0 0 auto;max-width:110px}
  .bd-srch input[type=text]{flex:1 1 auto;width:auto;min-width:0}
  .bd-srch .btn{flex:0 0 auto;padding:0 14px}
  .bd-total{font-size:13px}

  /* 목록 아래 버튼은 손가락으로 누르기 좋게 */
  .bd-actions{gap:8px}
  .bd-actions .btn{height:44px}
  .btn,a.btn,button.btn,.btn_submit,.btn_b01,.btn_close{height:44px;padding:0 18px;font-size:14.5px}
  .btn.sm{height:36px;padding:0 13px;font-size:13px}
}

/* ── 유튜브 모달 (data-yt) ────────────────────────────────────── */
.w02-yt{position:fixed;inset:0;z-index:9999;background:rgba(10,12,16,.88);
  display:flex;align-items:center;justify-content:center;padding:20px}
.w02-yt .box{position:relative;width:min(92vw,960px)}
.w02-yt.portrait .box{width:min(92vw,calc(84vh * 9 / 16))}
.w02-yt .frame{aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.w02-yt.portrait .frame{aspect-ratio:9/16}
.w02-yt iframe{width:100%;height:100%;border:0;display:block}
.w02-yt .x{position:absolute;top:-42px;right:-4px;width:34px;height:34px;border:none;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.w02-yt .x:hover{background:rgba(255,255,255,.34)}

/* ── 좁은 화면(360px 급) 가로 넘침 방지 · 2026-08-31 점검 ─────────────────
   그누보드 코어 화면(새글모음·FAQ·자동등록방지·상품검색)은 고정폭이라
   갤럭시 계열 360px 기기에서 옆으로 밀린다. 이 블록을 지우면 증상이 돌아온다. */
#new_sch,#faq_sch{min-width:0;max-width:100%;box-sizing:border-box}
#pw_confirm,.mbskin,#info_fs{max-width:100%;min-width:0}
#info_fs input,#info_fs .frm_input,#pw_confirm input,.mbskin input{max-width:100%;min-width:0;box-sizing:border-box}
/* 320px 급 좁은 기기 — 한 낱말이 칸보다 길면 그때만 끊어 준다.
   word-break:keep-all 로 한글 단어는 그대로 두되, 넘치는 것보다는 끊는 편이 낫다. */
body{overflow-wrap:break-word}
#new_sch form,#faq_sch form{width:100%;max-width:100%;flex-wrap:wrap}
#new_sch select,#new_sch input,#new_sch .frm_input,
#faq_sch select,#faq_sch input,#faq_sch .frm_input{max-width:100%}
#captcha{max-width:100%}
#captcha img,#captcha audio,#captcha_audio{max-width:100%}
#ssch_q,.ssch_input{max-width:100%}
@media (max-width:480px){
  #new_sch,#faq_sch{padding:18px}
}

/* ── 모바일 입력창 확대 방지 · 2026-08-31 점검 ────────────────────────────
   iOS 사파리는 글자가 16px 보다 작은 입력칸을 누르면 화면을 확대해 버리고,
   사용자가 손으로 되돌려야 한다. 휴대폰에서만 글자를 16px 로 올려 막는다.
   (칸의 높이·테두리·색은 그대로이므로 디자인은 유지된다)
   화면별 규칙(.xx-auth .fld input 등)이 더 세서 !important 로 눌러 둔다 —
   이 한 줄을 빼면 로그인·가입·검색칸에서 확대가 다시 일어난다. */
@media (max-width:768px){
  input[type=text],input[type=password],input[type=email],input[type=tel],
  input[type=number],input[type=search],input[type=url],input[type=date],
  input[type=time],input[type=datetime-local],input[type=month],input[type=week],
  input:not([type]),select,textarea{font-size:16px!important}
}

/* ── 폼 입력칸 한 벌로 통일 · 2026-08-31 점검 ──────────────────────────────
   로그인 · 회원가입 · 비밀번호찾기 · 자동등록방지 칸의 높이·테두리·둥글기·안여백이
   화면마다 달랐다(로그인 48px 인데 가입은 다른 값, 비밀번호찾기는 아예 브라우저 기본).
   ★ 칸 모양을 바꾸려면 이 블록만 고치면 네 화면이 함께 따라간다. */
#mb_login input[type=text],#mb_login input[type=password],#mb_login input[type=email],
#mb_login input[type=tel],#mb_login input[type=number],#mb_login select,
.auth input[type=text],.auth input[type=password],.auth input[type=email],.auth input[type=tel],.auth select,
.b01-auth input[type=text],.b01-auth input[type=password],.b01-auth input[type=email],.b01-auth select,
#register_form input[type=text],#register_form input[type=password],#register_form input[type=email],
#register_form input[type=tel],#register_form input[type=number],#register_form select,#register_form .frm_input,
#find_info input[type=text],#find_info input[type=email],#find_info select,#find_info .frm_input,
#pw_confirm input[type=password],#pw_confirm .frm_input,
#captcha.m_captcha #captcha_key,#captcha #captcha_key,#captcha .captcha_box,#captcha_key,.captcha_box{
  box-sizing:border-box;height:48px;
  border:1px solid #ECEDF1;border-radius:12px;
  padding:0 15px;font-size:16px;line-height:normal;
  background:#fff;color:inherit;
  -webkit-appearance:none;outline:0;
  transition:border-color .2s}
#mb_login select,.auth select,.b01-auth select,#register_form select,#find_info select{
  -webkit-appearance:menulist;appearance:menulist;padding-right:8px}
#mb_login textarea,.auth textarea,.b01-auth textarea,#register_form textarea,#find_info textarea{
  box-sizing:border-box;width:100%;min-height:150px;
  border:1px solid #ECEDF1;border-radius:12px;
  padding:12px 15px;font-size:16px;line-height:1.7;
  background:#fff;color:inherit;-webkit-appearance:none;outline:0}
/* 자동등록방지 칸은 좁으니 폭만 따로 둔다 */
#captcha.m_captcha #captcha_key,#captcha #captcha_key,#captcha .captcha_box,#captcha_key,.captcha_box{width:120px;text-align:center;letter-spacing:.2em}

/* 폼을 감싼 fieldset 에 브라우저 기본 테두리(2px groove)가 남아 회색 홈 박스가 그려졌다.
   로그인·비밀번호찾기·자동등록방지에서 특히 눈에 띄었다. (2026-08-31 점검) */
#mb_login fieldset,.auth fieldset,.b01-auth fieldset,#fregisterform fieldset,
#register_form fieldset,#find_info fieldset,#pw_confirm fieldset,
fieldset#login_fs,fieldset#info_fs,fieldset#captcha,fieldset.captcha,fieldset.srch,
#fregister fieldset,fieldset.fregister_agree{
  border:0;margin:0;padding:0;min-width:0}
/* 약관 동의 체크줄은 위쪽 여백만 남긴다 (2026-09-01 점검) */
#fregister fieldset.fregister_agree,fieldset.fregister_agree{margin-top:14px}
#mb_login legend,.auth legend,.b01-auth legend,#register_form legend,#find_info legend{padding:0}

/* ── 칸 옆 버튼·자동등록방지 줄 정렬 · 2026-08-31 점검 ─────────────────────
   '주소 검색' 버튼이 우편번호 칸보다 낮고 한 줄 아래로 밀려 있었고,
   자동등록방지는 그림·입력칸·새로고침 버튼의 높이와 윗선이 제각각이었다.
   칸 높이(48px)에 맞춰 한 줄로 가지런히 세운다. */
#register_form .btn_frmline,#find_info .btn_frmline,#mb_login .btn_frmline,
.auth .btn_frmline,.b01-auth .btn_frmline,#register_form button.btn_frmline{
  box-sizing:border-box;height:48px;padding:0 16px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  vertical-align:top;line-height:1;white-space:nowrap}
#fregisterform #captcha,#captcha{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:100%}
#fregisterform #captcha #captcha_img,#captcha #captcha_img,#captcha img{vertical-align:middle;border-radius:12px;max-width:100%}
/* #captcha_reload 는 브라우저 기본 모양(회색 그라데이션)이라 테마와 겉돌았다 (2026-08-31 점검) */
#fregisterform #captcha #captcha_reload,#captcha #captcha_reload,#captcha button{text-indent:0;overflow:visible;width:auto;white-space:nowrap;background-image:none;background:#fff;color:inherit;border:1px solid var(--line);cursor:pointer;font-size:14px;
  box-sizing:border-box;height:48px;min-width:48px;padding:0 12px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1}
#captcha #captcha_info,#captcha .captcha_info{flex:1 1 100%;margin:6px 0 0;font-size:13px;line-height:1.6}
#captcha #captcha_audio,#captcha audio{flex:1 1 100%;max-width:100%;margin:0 0 6px}
/* legend 가 섹션 제목(h2)과 같은 '자동등록방지' 를 한 번 더 찍어 두 번 나왔다 → 읽기용으로만 남긴다 */
#captcha legend{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 안내 문구는 버튼 옆에 끼어 뒤엉켰다 → 늘 아랫줄 전체를 쓰게 한다 */
#fregisterform #captcha #captcha_info,#captcha #captcha_info,#captcha .captcha_info{flex:0 0 100%;min-width:100%}
#captcha #captcha_reload span{display:none}
/* 그누보드 가입양식은 두 칸짜리 줄의 <li> 에도 half_input 클래스를 붙인다.
   입력칸 모양 규칙(.half_input)이 그 <li> 에까지 걸려 비밀번호 줄만 네모 상자가 그려졌다.
   줄을 감싸는 <li> 에서는 칸 모양을 없앤다. (2026-08-31 점검) */
#register_form li.half_input,#register_form li.full_input,#register_form li.twopart_input,
#register_form li.margin_input,#register_form li.left_input,#register_form li.frm_input{
  border:0;background:none;height:auto;padding:0;border-radius:0;box-shadow:none}
/* 반폭 줄(half_input) 안의 입력칸은 그 줄을 꽉 채우게만 한다.
   ★ 줄의 배치(2열이냐 한 줄이냐)는 테마 디자인이므로 건드리지 않는다 —
     display·float·width 를 손댔더니 PC 에서 섹션 카드가 겹쳐 무너졌다. (2026-08-31 점검) */
#register_form li.half_input>input,#register_form li.half_input>.frm_input{width:100%}
/* 우편번호 칸이 줄 전체를 차지해 '주소 검색' 버튼이 아랫줄로 밀렸다.
   칸을 줄이고 버튼을 옆에 붙인다. (2026-08-31 점검) */
#register_form #reg_mb_zip,#register_form input[name=mb_zip],#find_info input[name=mb_zip]{
  width:150px;max-width:48%;display:inline-block;vertical-align:middle;margin-right:8px}
#register_form #reg_mb_zip+.btn_frmline,#register_form input[name=mb_zip]+.btn_frmline{vertical-align:middle}

/* 라벨 옆 도움말 단추(.tooltip_icon)는 코어가 '설명보기' 글자만 내보내고 아이콘은 테마 몫이다.
   그대로 두면 테마마다 빈 동그라미(20×20)이거나 아예 0×0 이라 안 보였다.
   물음표 아이콘으로 통일한다. (2026-08-31 점검) */
#register_form .tooltip_icon,.tooltip_icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;min-width:18px;padding:0;margin-left:5px;
  border:1px solid var(--line);border-radius:50%;background:none;
  font-size:0;line-height:1;vertical-align:middle;cursor:pointer}
#register_form .tooltip_icon::before,.tooltip_icon::before{
  content:"?";font-size:11px;font-weight:700;line-height:1;color:inherit}