@charset "utf-8";
/* ================================================================
   신성CMS  theme/company2  반응형 통합 테마
   ================================================================ */

:root{
  --ground:#f6f8fa; --surface:#ffffff; --panel:#eef2f6; --panel-2:#e3e9f0;
  --ink:#17222e; --ink-2:#4c5a68; --ink-3:#7b8794; --hair:#dbe2e9;
  --blue:#1f60a8; --blue-dark:#184b83; --blue-ink:#1b5793; --blue-tint:#e9f1f9;
  --accent:#e2531d; --accent-hover:#cf4a16; --ok:#2f7d4f; --danger:#c0392b;
  --shadow-sm:0 1px 2px rgba(16,28,45,.05),0 2px 10px rgba(16,28,45,.05);
  --shadow-md:0 6px 18px rgba(16,28,45,.09),0 20px 48px rgba(16,28,45,.10);
  --hd-h:64px; --wrap:1160px; --wrap-narrow:920px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#10151c; --surface:#171f28; --panel:#1e2833; --panel-2:#26313d;
    --ink:#e9edf2; --ink-2:#abb6c2; --ink-3:#78838f; --hair:#2b3540;
    --blue:#4a8fca; --blue-dark:#3778b3; --blue-ink:#7cb4de; --blue-tint:#182530;
    --accent:#f2662f; --accent-hover:#e2571f; --ok:#4caa74;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 10px 30px rgba(0,0,0,.5);
  }
}

/* ---------- reset / base ---------- */
*{box-sizing:border-box}
html,body,div,span,h1,h2,h3,h4,h5,h6,p,a,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,button,textarea,select,article,aside,figure,footer,header,nav,section{margin:0;padding:0;border:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{
  background:var(--ground); color:var(--ink);
  font-family:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  font-size:16px; font-weight:400; line-height:1.75; word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
body.is-sub{padding-bottom:62px}
@media (min-width:1000px){body.is-sub{padding-bottom:0}}
img{max-width:100%; height:auto; vertical-align:middle}
a{color:inherit; text-decoration:none}
ul,ol{list-style:none}
button{font:inherit; cursor:pointer; background:none; color:inherit}
input,textarea,select{font:inherit}
table{border-collapse:collapse; border-spacing:0}
hr{display:none}
h1,h2,h3,h4{line-height:1.35; letter-spacing:-.01em}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
@media (min-width:768px){.wrap{padding:0 32px}}
.sound_only,.msg_sound_only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0; white-space:nowrap}
#skip a{position:absolute; left:-9999px; top:0; z-index:9999; background:var(--ink); color:#fff; padding:10px 16px}
#skip a:focus{left:0}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:15px;
  padding:13px 22px; border-radius:10px; border:2px solid transparent; transition:background .12s,transform .08s; text-align:center; white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-accent{background:var(--accent); color:#fff}
.btn-accent:hover{background:var(--accent-hover); color:#fff}
.btn-line{background:var(--surface); color:var(--blue-ink); border-color:var(--hair)}
.btn-line:hover{border-color:var(--blue); background:var(--blue-tint)}
.btn-white{background:#fff; color:var(--blue-dark)}
.btn-onblue{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.45)}
.btn-onblue:hover{background:rgba(255,255,255,.22); color:#fff}

/* ================= 헤더 ================= */
#hd{position:sticky; top:0; z-index:200; background:var(--surface); border-bottom:1px solid var(--hair)}
#hd.scrolled{box-shadow:var(--shadow-sm)}
.hd-inner{display:flex; align-items:center; gap:14px; height:var(--hd-h); max-width:var(--wrap); margin:0 auto; padding:0 20px}
@media (min-width:768px){.hd-inner{padding:0 32px}}
.logo{display:flex; align-items:center; gap:9px; flex:none}
.logo-mk{flex:none; width:28px; height:26px}
.logo-mk svg{width:100%; height:100%; display:block}
.logo-mk .lm-a{fill:var(--blue)}
.logo-mk .lm-b{fill:var(--accent)}
.logo .logo-txt{display:flex; flex-direction:column; line-height:1.1}
.logo .logo-txt b{font-weight:900; font-size:20px; letter-spacing:-.03em; color:var(--ink)}
.logo .logo-cms{color:var(--blue); margin-left:1px}
.logo .logo-txt small{font-weight:500; font-size:9.5px; color:var(--ink-3); letter-spacing:.02em; margin-top:1px}

.gnb{display:none; margin-left:20px}
.gnb-list{display:flex; gap:2px}
.gnb-item{position:relative}
.gnb-1d{display:flex; align-items:center; gap:4px; height:var(--hd-h); padding:0 14px; font-weight:700; font-size:15px; white-space:nowrap}
.gnb-1d .cv{font-size:10px; opacity:.5}
.gnb-item:hover>.gnb-1d{color:var(--blue-ink)}
.gnb-sub{position:absolute; top:calc(var(--hd-h) - 8px); left:8px; min-width:150px; background:var(--surface);
  border:1px solid var(--hair); border-radius:10px; box-shadow:var(--shadow-md); padding:6px;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:.14s}
.gnb-item:hover .gnb-sub{opacity:1; visibility:visible; transform:none}
.gnb-sub a{display:block; padding:9px 12px; border-radius:7px; font-weight:500; font-size:14px; color:var(--ink-2)}
.gnb-sub a:hover{background:var(--blue-tint); color:var(--blue-ink)}

.hd-right{margin-left:auto; display:flex; align-items:center; gap:8px}
.hd-tel{display:none; align-items:center; gap:9px; background:var(--accent); color:#fff; padding:8px 15px; border-radius:9px}
.hd-tel .ico{font-size:16px}
.hd-tel-txt{display:flex; flex-direction:column; line-height:1.2}
.hd-tel-txt .lbl{font-size:10px; opacity:.9}
.hd-tel-txt .num{font-size:15px; font-weight:700; letter-spacing:.01em}
.icon-btn{width:44px; height:44px; border:1px solid var(--hair); border-radius:9px; background:var(--surface);
  display:flex; align-items:center; justify-content:center; color:var(--ink); flex:none; font-size:18px}
.icon-btn.tel{background:var(--accent); border-color:var(--accent); color:#fff}
.icon-btn.burger{flex-direction:column; gap:4.5px}
.icon-btn.burger span{width:18px; height:2px; background:currentColor; display:block}

@media (min-width:1000px){
  .gnb{display:block}
  .hd-tel{display:flex}
  .icon-btn{display:none}
}

/* ================= 모바일 드로어 ================= */
.drawer{position:fixed; inset:0; z-index:500; background:rgba(10,16,24,.5); opacity:0; transition:opacity .2s}
.drawer.open{opacity:1}
.drawer[hidden]{display:none}
.drawer-panel{position:absolute; top:0; right:0; width:min(84vw,340px); height:100%; background:var(--surface);
  padding:18px; overflow-y:auto; transform:translateX(100%); transition:transform .22s}
.drawer.open .drawer-panel{transform:none}
.drawer-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.drawer-head b{font-weight:900; font-size:16px}
.drawer-nav>li{border-bottom:1px solid var(--hair)}
.drawer-nav>li>a,.drawer-nav>li>span{display:block; padding:14px 4px; font-weight:700; font-size:16px; color:var(--ink)}
.drawer-sub{padding:0 0 10px}
.drawer-sub a{display:block; padding:9px 4px 9px 16px; font-weight:400; font-size:14.5px; color:var(--ink-2)}
.drawer-cta{margin-top:18px; display:flex; flex-direction:column; gap:8px}
.drawer-cta .btn{width:100%}

/* ================= 모바일 하단바 ================= */
.mbar{position:fixed; left:0; right:0; bottom:0; z-index:300; display:flex; background:var(--surface);
  border-top:1px solid var(--hair); box-shadow:0 -3px 14px rgba(16,28,45,.12);
  transition:transform .25s ease; will-change:transform}
.mbar.is-hidden{transform:translateY(105%)}
@media (prefers-reduced-motion:reduce){.mbar{transition:none}}
.mbar a{flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px; font-weight:700; font-size:13.5px}
.mbar a small{font-weight:400; font-size:10px; color:var(--ink-3)}
.mbar .ic{font-size:16px}
.mbar .m-tel{color:var(--accent)}
.mbar .m-est{background:var(--blue); color:#fff}
.mbar .m-est small{color:rgba(255,255,255,.85)}
@media (min-width:1000px){.mbar{display:none}}

/* ================= 서브 페이지 헤더 ================= */
.sub-hero{background:var(--surface); border-bottom:1px solid var(--hair)}
.sub-hero-inner{max-width:var(--wrap); margin:0 auto; padding:14px 20px 14px}
@media (min-width:768px){.sub-hero-inner{padding:16px 32px 16px}}
.crumb{display:flex; gap:6px; align-items:center; font-size:12px; color:var(--ink-3); font-weight:500}
.crumb a:hover{color:var(--ink-2)}
.crumb .sep{opacity:.5}
.sub-title{font-weight:700; font-size:clamp(18px,2.2vw,22px); letter-spacing:-.02em; margin:6px 0 0}
.share-row{display:flex; gap:8px; margin-top:10px}
.share-btn{display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border:1px solid var(--hair);
  background:var(--surface); color:var(--ink-2); border-radius:999px; font:inherit; font-size:12.5px; font-weight:600;
  cursor:pointer; transition:border-color .15s,color .15s}
.share-btn:hover{border-color:var(--blue); color:var(--blue-ink)}
.share-btn svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.share-btn.copied{border-color:var(--blue); color:var(--blue-ink)}
@media (min-width:768px){.sub-hero-inner{position:relative}
  .share-row{position:absolute; right:32px; top:50%; transform:translateY(-50%); margin:0}}

/* ================= 본문 컨테이너 ================= */
#wrapper{width:100%; background:var(--surface)}
.container-sub{max-width:var(--wrap); margin:0 auto; padding:22px 20px 56px}
@media (min-width:768px){.container-sub{padding:28px 32px 72px}}
.container-home{width:100%}
/* 콘텐츠(글) 페이지는 읽기 좋게 가운데 좁은 컬럼 */
#ctt .content-body{max-width:860px; margin:0 auto}
.content-cta{max-width:860px; margin-left:auto; margin-right:auto}

/* ================= 홈: 히어로 (전체폭 배경) ================= */
.home-hero{position:relative; overflow:hidden; background:var(--blue-dark); color:#fff; min-height:440px; display:flex; align-items:center}
@media (min-width:768px){.home-hero{min-height:540px}}
.hero-bg{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1s ease}
.hero-bg.on{opacity:1}
.hero-scrim{position:absolute; inset:0; background:linear-gradient(90deg,rgba(9,26,44,.90) 0%,rgba(9,26,44,.72) 45%,rgba(9,26,44,.42) 100%)}
.hero-inner{position:relative; z-index:2; padding:56px 20px}
@media (min-width:768px){.hero-inner{padding:72px 32px}}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:12.5px; letter-spacing:.08em; color:var(--accent); margin-bottom:16px}
.eyebrow::before{content:""; width:20px; height:2px; background:var(--accent)}
.eyebrow-light{color:#ffcbb3}
.eyebrow-light::before{background:#ff7a45}
.hero-h{font-weight:900; font-size:clamp(28px,5.6vw,46px); line-height:1.25; letter-spacing:-.02em; margin-bottom:16px; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.25)}
.hero-h .hl{color:#7fc0ff}
.hero-p{color:#d9e4ef; font-size:clamp(15px,1.9vw,17.5px); line-height:1.8; margin-bottom:26px; max-width:52ch}
.hero-btns{display:flex; flex-wrap:wrap; gap:10px}
.btn-hero-line{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.4)}
.btn-hero-line:hover{background:rgba(255,255,255,.2); color:#fff}
.pc-br{display:none}
@media (min-width:768px){.pc-br{display:inline}}
.hero-dots{position:absolute; left:0; right:0; bottom:18px; z-index:3; display:flex; gap:8px; justify-content:center}
.hero-dots button{width:9px; height:9px; border-radius:50%; border:0; background:rgba(255,255,255,.5); padding:0; cursor:pointer; transition:.2s}
.hero-dots button.on{background:#fff; width:24px; border-radius:5px}

/* ================= 홈: 신뢰 스트립 ================= */
.home-strip{background:var(--panel); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.home-strip-in{display:grid; grid-template-columns:1fr}
@media (min-width:560px){.home-strip-in{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.home-strip-in{grid-template-columns:repeat(5,1fr)}}
.hs-item{padding:16px 18px; display:flex; align-items:center; gap:12px; border-top:1px solid var(--hair)}
@media (min-width:560px){.hs-item{border-top:0; border-left:1px solid var(--hair)} .hs-item:nth-child(2n+1){border-left:0}}
@media (min-width:900px){.hs-item{border-left:1px solid var(--hair)} .hs-item:first-child{border-left:0}}
/* 제품 카탈로그 CTA (신뢰 스트립 5번째 항목) */
.hs-item-cta{grid-column:1 / -1; justify-content:center; background:var(--blue-tint); text-decoration:none; transition:background .15s}
.hs-item-cta:hover{background:var(--blue-tint-2,var(--blue-tint)); filter:brightness(.97)}
.hs-item-cta .hs-tx span{color:var(--blue-ink); font-weight:600}
@media (min-width:900px){.hs-item-cta{grid-column:auto; justify-content:flex-start; background:transparent}}
.hs-ic{flex:none; width:34px; height:34px; border-radius:9px; background:var(--blue-tint); color:var(--blue-ink); display:flex; align-items:center; justify-content:center}
.hs-ic svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.hs-tx{display:flex; flex-direction:column; gap:1px; min-width:0}
.hs-tx b{font-weight:700; font-size:13.5px; color:var(--ink)}
.hs-tx span{font-size:12px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ================= 홈: 섹션 공통 ================= */
.home-sec{padding:52px 0}
@media (min-width:768px){.home-sec{padding:80px 0}}
.home-fields{background:var(--surface); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.home-why{background:var(--surface); border-top:1px solid var(--hair)}
.sec-head{margin-bottom:32px; max-width:56ch}
.sec-head .tag{display:block; font-weight:700; font-size:12px; letter-spacing:.1em; color:var(--accent); margin-bottom:10px}
.sec-head h2{font-weight:900; font-size:clamp(22px,3.6vw,32px); letter-spacing:-.02em; line-height:1.35}
.sec-head p{margin-top:11px; color:var(--ink-2); font-size:15px}
.sec-more{margin-top:28px; text-align:center}

/* 시공분야 카드 */
.field-grid{display:grid; grid-template-columns:1fr; gap:13px}
@media (min-width:520px){.field-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:940px){.field-grid{grid-template-columns:repeat(4,1fr)}}
.field-card{background:var(--ground); border:1px solid var(--hair); border-radius:12px; padding:22px;
  display:flex; flex-direction:column; gap:9px; min-height:160px; transition:.13s}
.field-card:hover{border-color:var(--blue); transform:translateY(-3px); box-shadow:var(--shadow-md)}
.field-card h3{font-weight:700; font-size:17px}
.field-card p{font-size:13px; color:var(--ink-2); line-height:1.65}
.field-card .go{margin-top:auto; font-weight:700; font-size:12.5px; color:var(--blue-ink)}
.field-more{margin-top:18px; font-size:13.5px; color:var(--ink-2)}
.field-more b{color:var(--ink); font-weight:700}

/* 왜 신성CMS */
.why-grid{display:grid; grid-template-columns:1fr; gap:20px}
@media (min-width:800px){.why-grid{grid-template-columns:repeat(3,1fr)}}
.why-item{padding-top:20px; border-top:3px solid var(--blue)}
.why-item h3{font-weight:700; font-size:18px; margin-bottom:7px}
.why-item p{font-size:14px; color:var(--ink-2); line-height:1.75}

/* 홈: 시공사례 (크게) — latest/gallery 스킨 출력 */
.home-cases{background:var(--ground)}
.home-cases-wrap .cmp-latest-gall{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:0; padding:0; list-style:none}
@media (min-width:680px){.home-cases-wrap .cmp-latest-gall{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.home-cases-wrap .cmp-latest-gall{grid-template-columns:repeat(4,1fr)}}
.cmp-latest-gall li{list-style:none; background:var(--surface); border:1px solid var(--hair); border-radius:14px; overflow:hidden; transition:.13s}
.cmp-latest-gall li:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--blue)}
.cmp-latest-gall .clg-thumb{display:block; width:100%; aspect-ratio:4/3; background:var(--panel); overflow:hidden}
.cmp-latest-gall .clg-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.cmp-latest-gall .clg-noimg{display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:var(--ink-3); font-size:12px}
.cmp-latest-gall .clg-title{display:block; padding:13px 15px; font-weight:700; font-size:14px; color:var(--ink); line-height:1.45;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; min-height:2.9em}
.cmp-latest-gall .clg-empty{grid-column:1/-1; text-align:center; color:var(--ink-3); padding:40px 0; background:none; border:0}

/* ================= 견적 CTA 밴드 ================= */
.ctaband{background:linear-gradient(120deg,var(--blue-dark),var(--blue)); color:#fff}
.cta-in{display:flex; flex-direction:column; gap:18px; padding:42px 0}
@media (min-width:760px){.cta-in{flex-direction:row; align-items:center; justify-content:space-between; padding:52px 0}}
.cta-in h2{font-weight:900; font-size:clamp(20px,3.2vw,28px); letter-spacing:-.02em; line-height:1.4}
.cta-in p{color:#dbe9f6; font-size:14.5px; margin-top:7px}
.cta-btns{display:flex; flex-wrap:wrap; gap:10px; flex:none}

/* ================= 푸터 ================= */
#ft{background:var(--panel); border-top:1px solid var(--hair); padding:38px 0; font-size:13px; margin-top:0}
.ft-links{display:flex; flex-wrap:wrap; gap:8px 18px; font-weight:700; margin-bottom:20px}
.ft-links a{color:var(--ink-2)}
.ft-links a:hover{color:var(--ink)}
.ft-biz{color:var(--ink-2); line-height:1.95}
.ft-biz b{color:var(--ink); font-weight:700}
.ft-copy{margin-top:14px; padding-top:14px; border-top:1px solid var(--hair); color:var(--ink-3); font-size:12px}
.ft-copy a{color:var(--blue-ink); font-weight:700; margin-left:8px}

/* ================= 맨 위로 ================= */
#top-btn{position:fixed; right:16px; bottom:78px; z-index:250; width:44px; height:44px; border-radius:50%;
  background:var(--surface); border:1px solid var(--hair); box-shadow:var(--shadow-md); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:20px; opacity:0; pointer-events:none; transition:opacity .2s}
#top-btn.show{opacity:1; pointer-events:auto}
@media (min-width:1000px){#top-btn{bottom:24px}}

/* ================================================================
   콘텐츠 페이지 본문 (skin/content) : 편집기에서 쓴 태그를 자동 스타일링
   ================================================================ */
.content-body{font-size:15.5px; color:var(--ink-2)}
.content-body h1{display:none} /* 제목은 서브 헤더에서 이미 표시 */
.content-body h2{font-weight:900; font-size:clamp(20px,3.2vw,26px); color:var(--ink); line-height:1.4; margin:44px 0 14px}
.content-body h2:first-child{margin-top:0}
.content-body h3{font-weight:700; font-size:18px; color:var(--ink); margin:26px 0 8px}
.content-body h4{font-weight:700; font-size:16px; color:var(--ink); margin:20px 0 6px}
.content-body p{margin:0 0 14px; line-height:1.9}
.content-body strong,.content-body b{color:var(--ink); font-weight:700}
.content-body ul,.content-body ol{margin:0 0 16px; padding-left:20px; line-height:1.9}
.content-body ul{list-style:disc}
.content-body li{margin:5px 0}
.content-body ol{counter-reset:li; list-style:none; padding-left:0}
.content-body ol>li{position:relative; padding:12px 0 12px 44px; border-bottom:1px solid var(--hair)}
.content-body ol>li::before{counter-increment:li; content:counter(li); position:absolute; left:0; top:10px;
  width:30px; height:30px; border-radius:8px; background:var(--blue); color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center; font-size:14px}
.content-body img{border-radius:12px; border:1px solid var(--hair); margin:10px 0 18px; height:auto}
.content-body a{color:var(--blue-ink); font-weight:500; text-decoration:underline}
.content-body table{width:100%; font-size:14px; margin:8px 0 14px; display:block; overflow-x:auto}
.content-body th,.content-body td{border:1px solid var(--hair); padding:11px 14px; text-align:left}
.content-body th{background:var(--panel); font-weight:700; font-size:13px; color:var(--ink-2); white-space:nowrap}
.content-body blockquote{margin:14px 0; padding:14px 18px; background:var(--blue-tint); border-left:3px solid var(--blue); border-radius:8px; color:var(--ink-2); font-size:14px}
.content-body hr{display:block; border:0; border-top:1px solid var(--hair); margin:36px 0}
.content-body .tag,.content-body .badge{display:inline-block; background:var(--blue-tint); color:var(--blue-ink);
  font-weight:700; font-size:13px; padding:5px 12px; border-radius:20px; margin:2px 4px 2px 0}
.content-body iframe{max-width:100%; border-radius:12px}

/* content skin 래퍼 */
#ctt{margin:0}
#ctt_con{overflow:hidden}

/* 콘텐츠 페이지 하단 견적 CTA */
.content-cta{margin-top:40px; background:var(--surface); border:1px solid var(--hair); border-radius:14px; padding:22px}
.content-cta-in{display:flex; flex-direction:column; gap:14px}
@media (min-width:640px){.content-cta-in{flex-direction:row; align-items:center; justify-content:space-between}}
.content-cta p{margin:0; font-size:14.5px; color:var(--ink-2)}
.content-cta p b{color:var(--ink)}
.content-cta-btns{display:flex; flex-wrap:wrap; gap:10px; flex:none}

/* ================================================================
   그누보드 게시판 : 반응형 + 재스킨 (스킨 자체 style.css 는 비워둠)
   ================================================================ */
#bo_list,#bo_v,#bo_gall,#bo_w,.new_win,#faq_wrap,.qa_content,
.cmp-gall,.cmp-list,.cmp-view{width:auto !important; max-width:100% !important; float:none !important}

/* ---- 공통 버튼 ---- */
.btn_submit,button.btn_submit,input.btn_submit,
a.btn_b01,button.btn_b01,input.btn_b01,a.btn_b02,button.btn_b02,input.btn_b02,
a.btn01,button.btn01,a.btn02,button.btn02,a.btn_admin,button.btn_admin,a.btn_cancel,button.btn_cancel{
  display:inline-flex !important; align-items:center; justify-content:center;
  min-height:40px; height:auto; padding:9px 18px; border-radius:8px; font-weight:700; font-size:14px;
  line-height:1.2; white-space:nowrap; border:1px solid var(--hair); background:var(--surface); color:var(--ink);
  box-sizing:border-box; vertical-align:middle; cursor:pointer; width:auto; text-decoration:none}
.btn_submit,button.btn_submit,input.btn_submit,a.btn_b02,button.btn_b02,input.btn_b02{background:var(--blue); border-color:var(--blue); color:#fff}
.btn_submit:hover,a.btn_b02:hover,button.btn_b02:hover{background:var(--blue-dark); color:#fff}
a.btn_b01:hover,button.btn_b01:hover{border-color:var(--blue); color:var(--blue-ink)}
a.btn_admin,button.btn_admin{background:var(--danger); border-color:var(--danger); color:#fff}

/* ---- 목록 상단 (검색/카테고리) ---- */
.cmp-cate{margin:6px 0 18px; display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0}
.cmp-cate li{list-style:none}
.cmp-cate a,.cmp-cate strong{display:inline-block; padding:8px 15px; border-radius:20px; font-size:13px; font-weight:700; border:1px solid var(--hair); color:var(--ink-2); background:var(--surface)}
.cmp-cate a:hover{border-color:var(--blue); color:var(--blue-ink)}
.cmp-cate a.on,.cmp-cate strong{background:var(--blue); color:#fff; border-color:var(--blue)}
.cmp-list-top,.cmp-gall-top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px; margin:6px 0 20px; padding-bottom:16px; border-bottom:2px solid var(--hair)}
.cmp-list-total,.cmp-gall-total{font-size:13px; font-weight:700; color:var(--ink-3)}
.cmp-list-search,.cmp-gall-search{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.cmp-list-search select,.cmp-list-search input[type="text"],
.cmp-gall-search select,.cmp-gall-search input[type="text"]{
  height:40px; border:1px solid var(--hair); border-radius:8px; padding:0 12px; background:var(--surface); color:var(--ink); font-size:14px; box-sizing:border-box}
.cmp-list-search input[type="text"],.cmp-gall-search input[type="text"]{width:150px}

/* ---- 목록 테이블 ---- */
.tbl_head01{overflow-x:auto}
.tbl_head01 table{width:100%; font-size:14px; table-layout:fixed}
.tbl_head01 col.cmp-c-num{width:64px}
.tbl_head01 col.cmp-c-name{width:96px}
.tbl_head01 col.cmp-c-date{width:92px}
.tbl_head01 thead th{background:var(--panel); color:var(--ink-2); font-weight:700; font-size:12.5px; padding:14px 8px; border:0; border-bottom:1px solid var(--hair); text-align:center; white-space:nowrap}
.tbl_head01 td{padding:14px 10px; border:0; border-bottom:1px solid var(--hair); color:var(--ink-2); text-align:center; font-size:13.5px}
.tbl_head01 td.td_subject{text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tbl_head01 td.td_subject a{color:var(--ink); font-weight:500}
.tbl_head01 td.td_subject a:hover{color:var(--blue-ink)}
.tbl_head01 tr.bo_notice td{background:var(--blue-tint)}
.tbl_head01 tr.bo_notice .td_num strong{color:var(--blue-ink)}
.tbl_head01 tbody tr:hover td{background:var(--panel)}
.tbl_head01 .empty_table{padding:60px 0 !important; color:var(--ink-3)}
.cmt-cnt{display:inline-block; background:var(--accent); color:#fff; font-size:11px; font-weight:700; border-radius:10px; padding:1px 7px; margin-left:4px}
.bo_current{color:var(--accent); font-weight:700}
.cmp-list-btns,.cmp-gall-btns{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; margin:20px 0}

/* ---- 페이지네이션 ---- */
.pg_wrap{clear:both; margin:26px 0; text-align:center}
.pg{display:inline-flex; gap:4px; 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:38px; height:38px; padding:0 6px; border:1px solid var(--hair); border-radius:8px; background:var(--surface);
  color:var(--ink-2); font-weight:700; font-size:13px; text-indent:0 !important; overflow:visible !important; background-image:none !important}
.pg_current{background:var(--blue); border-color:var(--blue); color:#fff}
.pg_page:hover{border-color:var(--blue); color:var(--blue-ink)}

/* ---- 갤러리 목록 ---- */
.cmp-gall-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:0; padding:0; list-style:none}
@media (min-width:680px){.cmp-gall-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.cmp-gall-grid{grid-template-columns:repeat(4,1fr)}}
.cmp-gall-item{list-style:none; background:var(--surface); border:1px solid var(--hair); border-radius:14px; overflow:hidden; position:relative; transition:.13s}
.cmp-gall-item:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--blue)}
.cmp-gall-item.now{border-color:var(--accent)}
.cmp-gall-chk{position:absolute; top:10px; left:10px; z-index:2}
.cmp-gall-thumb{display:block; width:100%; aspect-ratio:4/3; background:var(--panel); overflow:hidden}
.cmp-gall-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.cmp-gall-notice,.cmp-gall-noimg{display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:var(--ink-3); font-size:13px; font-weight:700}
.cmp-gall-notice{background:var(--blue); color:#fff}
.cmp-gall-subject{display:block; padding:13px 15px 4px; font-weight:700; font-size:14.5px; color:var(--ink); line-height:1.45;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.cmp-gall-meta{display:block; padding:0 15px 14px; font-size:12px; color:var(--ink-3)}
.cmp-empty{padding:60px 0; text-align:center; color:var(--ink-3)}

/* ---- 게시물 보기 (컴팩트, 옛 스킨 느낌 유지) ---- */
.cmp-view{background:var(--surface); border:1px solid var(--hair); border-radius:14px; padding:22px}
@media (min-width:768px){.cmp-view{padding:28px}}
#bo_v_title{font-weight:700; font-size:clamp(17px,2.2vw,21px); letter-spacing:-.01em; line-height:1.5; margin:0 0 12px; color:var(--ink)}
.cmp-v-cate{display:inline-block; background:var(--blue-tint); color:var(--blue-ink); font-size:11px; font-weight:700; padding:2px 8px; border-radius:5px; vertical-align:middle; margin-right:4px}
.cmp-v-meta{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--ink-3); padding-bottom:12px; border-bottom:1px solid var(--hair); margin-bottom:18px}
.cmp-v-meta strong{color:var(--ink-2); font-weight:700}
.cmp-v-box{background:var(--panel); border-radius:8px; padding:12px 14px; margin:0 0 14px; font-size:12.5px}
.cmp-v-box b{display:block; font-weight:700; color:var(--ink); margin-bottom:5px; font-size:12.5px}
.cmp-v-box ul{list-style:none; padding:0; margin:0}
.cmp-v-box li{margin:3px 0}
.cmp-v-box a{color:var(--blue-ink); font-weight:500}
.cmp-v-box em{color:var(--ink-3); font-style:normal; font-size:11px}
.cmp-v-atc{padding:2px 0}
.cmp-v-img{margin-bottom:12px}
.cmp-v-img img{max-width:100%; height:auto; border-radius:8px; margin:4px 0; display:block}
.cmp-v-con{line-height:1.85; color:var(--ink-2); font-size:14.5px; word-wrap:break-word; min-height:50px}
.cmp-v-con img,#bo_v_con img{max-width:100% !important; height:auto !important; border-radius:6px; margin:6px 0}
.cmp-v-con p{margin:0 0 10px}
.cmp-v-con table{max-width:100%}
.cmp-v-sign{margin-top:14px; padding-top:12px; border-top:1px solid var(--hair); font-size:12.5px; color:var(--ink-3)}
.cmp-v-gng{display:flex; gap:8px; justify-content:center; margin:18px 0 2px}
.cmp-v-gng a{display:inline-flex; align-items:center; gap:5px; min-height:36px; padding:0 16px; border:1px solid var(--hair); border-radius:8px; font-weight:700; font-size:12.5px; color:var(--ink-2)}
.cmp-v-btns{display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; margin:22px 0 2px; padding-top:16px; border-top:1px solid var(--hair)}
.cmp-v-btns-l,.cmp-v-btns-r{display:flex; gap:6px; flex-wrap:wrap}
.cmp-v-btns .btn_b01,.cmp-v-btns .btn_b02,.cmp-v-btns .btn_admin{min-height:36px; padding:0 15px; font-size:13px}

/* ---- 댓글 ---- */
.cmp-cmt{margin-top:24px; border-top:1px solid var(--hair); padding-top:18px}
.cmp-cmt-head{font-weight:700; font-size:14px; color:var(--ink); margin-bottom:6px}
.cmp-cmt-head strong{color:var(--accent)}
.cmp-cmt-item{border-top:1px solid var(--hair); padding:13px 0}
.cmp-cmt-item:first-of-type{border-top:0}
.cmp-cmt-item.is-reply{margin-left:20px; padding-left:12px; border-left:2px solid var(--blue-tint); border-top:0; background:var(--panel); border-radius:0 8px 8px 0}
.cmp-cmt-head-row{display:flex; align-items:center; flex-wrap:wrap; gap:6px}
.cmp-cmt-arrow{color:var(--blue-ink); font-size:13px}
.cmp-cmt-name{font-weight:700; font-size:13px; color:var(--ink)}
.cmp-cmt-date{font-size:11.5px; color:var(--ink-3)}
.cmp-cmt-ip{font-size:11px; color:var(--ink-3)}
.cmp-cmt-body{margin:5px 0 0; font-size:13.5px; color:var(--ink-2); line-height:1.7; word-break:break-all; white-space:pre-line}
.cmp-cmt-secret{margin-right:3px}
.cmp-cmt-act{display:flex; gap:6px; margin-top:7px}
.cmp-cmt-act a{font-size:11.5px; color:var(--ink-3); border:1px solid var(--hair); border-radius:6px; padding:3px 9px}
.cmp-cmt-act a:hover{border-color:var(--blue); color:var(--blue-ink)}
.cmp-cmt-empty{padding:22px 0; text-align:center; color:var(--ink-3); font-size:13px}
.cmp-cmt-slot{display:block}
.cmp-cmt-slot .cmp-cmt-write{margin:10px 0 4px}

/* 댓글 쓰기 */
.cmp-cmt-write{margin-top:16px; background:var(--panel); border:1px solid var(--hair); border-radius:12px; padding:16px}
.cmp-cmt-write > h2{font-weight:700; font-size:13px; color:var(--ink); margin-bottom:10px}
.cmp-cw-row{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px}
.cmp-cw-row label{display:flex; flex-direction:column; gap:3px; font-size:11.5px; font-weight:700; color:var(--ink-3)}
.cmp-cw-row input{height:38px; border:1px solid var(--hair); border-radius:8px; padding:0 12px; background:var(--surface); color:var(--ink); font:inherit; width:150px; box-sizing:border-box}
.cmp-cw-captcha{margin-bottom:10px}
.cmp-cw-content textarea,.cmp-cmt-write textarea{width:100%; min-height:84px; border:1px solid var(--hair); border-radius:8px; padding:10px 12px; background:var(--surface); color:var(--ink); font:inherit; box-sizing:border-box}
.cmp-cw-cnt{font-size:11px; color:var(--ink-3); margin-top:3px; text-align:right}
.cmp-cw-bottom{display:flex; align-items:center; justify-content:space-between; margin-top:10px; gap:10px}
.cmp-cw-secret{font-size:12px; color:var(--ink-2); display:flex; align-items:center; gap:4px}
.cmp-cmt-write .btn_confirm{margin:0}
.cmp-cmt-write .btn_confirm .btn_submit,.cmp-cmt-write #btn_submit{min-height:42px; height:42px; padding:0 24px; font-size:14px}
#char_count_desc{font-size:11px; color:var(--ink-3)}

/* ---- 자동등록방지(캡차) ---- */
#captcha,.captcha{display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; margin:4px 0}
#captcha legend{position:static; width:auto; height:auto; font-size:12px; color:var(--ink-3)}
#captcha #captcha_img,.captcha img{height:44px; width:auto; border:1px solid var(--hair); border-radius:6px}
#captcha #captcha_key,.captcha input{height:44px; border:1px solid var(--hair); border-radius:8px; padding:0 10px; width:84px; background:var(--surface); color:var(--ink); font-size:16px; font-weight:700; text-align:center; box-sizing:border-box}
#captcha_info{font-size:11px; color:var(--ink-3); flex-basis:100%}
#captcha button,#captcha .btn_frmline,#captcha a{min-height:0 !important; height:auto; padding:4px 8px; font-size:11px; border-radius:6px}

/* ---- 글쓰기 / 견적 폼 ---- */
#bo_w{background:var(--surface)}
#bo_w #container_title,#bo_w > h2{font-weight:700; font-size:16px; color:var(--ink); margin:0 0 16px; padding:0}
#fwrite,#bo_w form{width:100% !important}
#bo_w .win_desc,#bo_w .frm_info{font-size:12px; color:var(--ink-3); line-height:1.5; margin:4px 0}
.tbl_frm01{overflow:visible; margin:0}
.tbl_frm01 table{width:100%; border-collapse:collapse; border-top:2px solid var(--ink-2)}
.tbl_frm01 th{background:var(--panel); color:var(--ink-2); font-weight:700; font-size:13px; padding:12px 14px; text-align:left; border:1px solid var(--hair); border-width:0 0 1px 0; white-space:nowrap; width:120px; vertical-align:middle}
.tbl_frm01 td{padding:10px 12px; border:0; border-bottom:1px solid var(--hair)}
.frm_input,.tbl_frm01 input[type="text"],.tbl_frm01 input[type="password"],.tbl_frm01 input[type="email"],.tbl_frm01 textarea,.tbl_frm01 select,.frm_file{
  border:1px solid var(--hair); border-radius:8px; padding:0 12px; height:42px; background:var(--surface); color:var(--ink); width:100%; max-width:420px; font:inherit; box-sizing:border-box}
.tbl_frm01 select{max-width:200px}
.tbl_frm01 textarea,#wr_content{height:auto; padding:10px 12px; width:100%; max-width:none; min-height:200px; box-sizing:border-box}
.tbl_frm01 .frm_file{height:auto; padding:6px 0; border:0}
/* 모바일: 폼 테이블을 세로 1열로 */
@media (max-width:680px){
  .tbl_frm01 table{display:block; border-top:0}
  .tbl_frm01 thead,.tbl_frm01 tbody,.tbl_frm01 tr{display:block}
  .tbl_frm01 th,.tbl_frm01 td{display:block; width:auto; border:0; padding:0}
  .tbl_frm01 th{background:none; color:var(--ink-2); font-size:12.5px; padding:14px 0 5px}
  .tbl_frm01 td{padding:0 0 4px}
  .tbl_frm01 tr{border-bottom:1px solid var(--hair); padding-bottom:8px}
  .tbl_frm01 input,.tbl_frm01 select,.tbl_frm01 textarea,.frm_input{max-width:none}
}
.btn_confirm,#bo_w_submit,.write_div,.act_btn{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:24px 0}
.btn_confirm > *,#bo_w_submit > *{margin:0 !important}
.btn_confirm input[type="submit"],.btn_confirm button,.btn_confirm a,
#bo_w_submit input[type="submit"],#bo_w_submit button,#bo_w_submit a{
  display:inline-flex !important; align-items:center; justify-content:center;
  min-height:46px; height:46px; padding:0 26px; border-radius:9px; font-weight:700; font-size:15px;
  line-height:1; white-space:nowrap; box-sizing:border-box; border:1px solid var(--hair); background:var(--surface); color:var(--ink); cursor:pointer; text-decoration:none}
.btn_confirm input[type="submit"],.btn_confirm .btn_submit,#bo_w_submit input[type="submit"]{background:var(--blue); border-color:var(--blue); color:#fff}
.btn_confirm input[type="submit"]:hover{background:var(--blue-dark)}
.btn_confirm a.btn_cancel,.btn_confirm .btn_cancel{background:var(--surface); border:1px solid var(--hair); color:var(--ink-2)}

#container-sub .tbl_wrap,#container-sub table{max-width:100%}

/* faq */
#faq_wrap dt,.faq_wrap dt{background:var(--panel); border:1px solid var(--hair); border-radius:8px; padding:14px 16px; font-weight:700; margin-top:8px; cursor:pointer}
#faq_wrap dd,.faq_wrap dd{padding:14px 16px; color:var(--ink-2); font-size:14px}

/* 회원/기타 새창 */
.new_win{background:var(--surface); padding:0 4px}
.new_win #win_title,.new_win .win_desc{padding:16px 4px}

/* ================= 로그인 / 회원 폼 ================= */
#mb_login,#register_form,#find_ok,#password_lost{max-width:460px; margin:8px auto 40px}
#mb_login > h1{font-size:22px; font-weight:900; letter-spacing:-.02em; margin:0 0 18px; color:var(--ink)}
#login_fs{border:1px solid var(--hair); border-radius:12px; padding:22px; background:var(--surface); display:flex; flex-direction:column; gap:10px}
#login_fs legend{float:none; width:auto; height:auto; margin:0 0 4px; padding:0; position:static; font-size:13px; font-weight:700; color:var(--ink-3); overflow:visible; clip:auto}
#login_fs label.login_id,#login_fs label.login_pw{font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:-4px}
#login_fs input[type="text"],#login_fs input[type="password"]{width:100%; height:46px; padding:0 14px; border:1px solid var(--hair); border-radius:9px; font-size:15px; background:var(--surface); color:var(--ink); box-sizing:border-box}
#login_fs input[type="text"]:focus,#login_fs input[type="password"]:focus{border-color:var(--blue); outline:none}
#login_fs .btn_submit,#login_fs input[type="submit"]{width:100%; height:48px; margin-top:4px; border:0; border-radius:9px; background:var(--blue); color:#fff; font-size:15px; font-weight:700; cursor:pointer}
#login_fs .btn_submit:hover{background:var(--blue-dark)}
.login_auto_row{display:flex; align-items:center; gap:6px}
#login_fs #login_auto_login{width:auto; height:auto; margin:0; vertical-align:middle}
#login_fs .login_auto_row label{font-size:13px; color:var(--ink-3); margin:0}
#login_info{margin-top:22px; padding:18px; border:1px solid var(--hair); border-radius:12px; background:var(--panel)}
#login_info h2{font-size:15px; font-weight:800; margin:0 0 8px; color:var(--ink)}
#login_info p{font-size:13.5px; color:var(--ink-2); line-height:1.7; margin:0 0 14px}
#login_info div{display:flex; gap:8px; flex-wrap:wrap}
#login_info .btn01,#login_info .btn02{display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 16px; border-radius:8px; font-size:13.5px; font-weight:600; text-decoration:none; border:1px solid var(--hair); background:var(--surface); color:var(--ink-2)}
#login_info .btn01{background:var(--blue-tint); border-color:transparent; color:var(--blue-ink)}
#mb_login .btn_confirm{margin-top:18px}

/* ---- 모바일 : 게시판 목록 컬럼 축소 ---- */
@media (max-width:640px){
  .tbl_head01 col.cmp-c-name,.tbl_head01 col.cmp-c-date{width:0}
  .tbl_head01 .td_name,.tbl_head01 .td_date,
  .tbl_head01 thead th:nth-child(3),.tbl_head01 thead th:nth-child(4){display:none}
  .tbl_head01 col.cmp-c-num{width:52px}
  .cmp-list-search input[type="text"],.cmp-gall-search input[type="text"]{width:120px; flex:1}
  .cmp-v-btns{flex-direction:column}
  .cmp-v-btns-l,.cmp-v-btns-r{justify-content:center}
}
/* ---------- 접근성: 모션 최소화 ---------- */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; scroll-behavior:auto !important}
}