/* 세부 페이지 프레임 2026 (faceOff 202-205 공용) — 진본 Z:\CLUDE_개발_홈페이지관리
_CL_세부페이지프레임_2026-09-19_레이아웃\sub2026.css. default2.css(메인 공용) 뒤에 읽힌다 */
:root{
  --navy:#1B2A6B; --navy-deep:#14204F; --blue:#2B4CA0; --ink:#1C2333; --muted:#4E586B;
  --faint:#8A93A6; --line:#D3D8E2; --line-soft:#E3E7EE; --surface:#E9EDF4;
}
html,body{margin:0;padding:0;}
body{
  font-family:'Malgun Gothic','Apple SD Gothic Neo',sans-serif; font-size:14px; line-height:1.6; color:var(--ink);
  /* 헤더 띠(0-92px) + 남색 그라데이션(1000px 까지, 그 아래는 단색) — 옛 1.2MB 배경 jpg 를 CSS 로 대체.
     흰 기둥은 body 배경이 아니라 #contentBody 가 맡는다 — body 배경의 % 크기는 첫 화면 높이 기준이라 긴 페이지에서 끊긴다(2026-09-19 실측) */
  background-color:#344A9F;
  background-image:linear-gradient(180deg,#EAEAEC 0,#FAFAFA 91px,#161E42 92px,#1C2859 320px,#2E4290 640px,#344A9F 1000px);
  background-repeat:no-repeat; background-position:0 0; background-size:100% 1000px;
}
/* 레이아웃이 body 에 옛 배경 jpg(2000px 타일: 1500px 너머가 흰색)를 인라인 <style> 로 박는다 — 그보다 뒤에 오는 인라인이라 !important 로 덮는다 */
body{background-color:#344A9F !important;background-image:linear-gradient(180deg,#EAEAEC 0,#FAFAFA 91px,#161E42 92px,#1C2859 320px,#2E4290 640px,#344A9F 1000px) !important;background-repeat:no-repeat !important;background-position:0 0 !important;background-size:100% 1000px !important;}
/* Rhymix 가 CKEditor 편집창(iframe) 안에도 이 CSS 를 넣는다 — 편집창 body 는 흰색 (2026-09-19 A/S 의뢰서 「내용」 칸이 남색으로 보인 원인) */
body.cke_editable{background:#fff !important;background-image:none !important;color:var(--ink);}
#bodyWrap{position:relative;width:auto;min-width:1280px;float:none;}
/* 헤더를 1280 으로 — 배경 jpg(1002px: 세로 그라데이션 + 검색 알약 + 메뉴 사이 점)는 CSS 로 대체. 로고·메뉴·전체보기 자리는 그대로, 검색창·HOME/CONTACT 만 오른쪽 끝으로 */
#header{width:auto;background:linear-gradient(180deg,#E8E8E8 0,#F3F3F3 30px,#FCFCFC 60px,#FFFFFF 85px);}
#gnb li+li::before{content:"";position:absolute;left:-6px;top:17px;width:3px;height:3px;border-radius:50%;background:#9AA0AE;}
#branding2{left:auto;right:35px;}
#isSearch{width:180px;white-space:nowrap;}
#isSearch .inputText{border-radius:9px;padding:2px 8px 2px 10px;width:92px;}
#contentBody{position:relative;width:auto;margin-right:40px;min-height:calc(100vh - 92px);box-sizing:border-box;padding:26px 0 0;display:flow-root;overflow:visible;background:#fff;box-shadow:14px 0 14px -14px rgba(0,0,0,0.22);}

/* 왼쪽 열 */
#columnLeft{float:left;width:230px;margin:0 0 0 50px;}
.sec-title{margin:6px 0 0;font-size:22px;line-height:1.2;font-weight:700;color:var(--navy);letter-spacing:-0.01em;}
.sec-sub{margin:4px 0 0;font-size:13.5px;color:var(--faint);letter-spacing:0.04em;}
#lnb{list-style:none;margin:22px 0 0;padding:0;width:auto;border-top:1px solid var(--line);}
#lnb>li{list-style:none;padding:4px 0;border-bottom:1px solid var(--line-soft);}
#lnb>li>a{display:block;width:auto;padding:9px 12px;border-radius:8px;background:none;color:var(--ink);font-size:15px;font-weight:600;text-decoration:none;}
#lnb>li>a:hover,#lnb>li>a:focus{background:var(--surface);color:var(--navy);}
#lnb>li.on>a,#lnb>li.on>a:hover{background:var(--navy);color:#fff;font-weight:700;}
#lnb>li>ul{list-style:none;display:block;width:auto;margin:4px 0 6px;padding:0 0 0 10px;}
#lnb>li>ul>li{padding:0;}
#lnb>li>ul>li>a{display:block;width:auto;padding:6px 10px;border-radius:6px;background:none !important;border:none !important;color:var(--muted) !important;font-size:14px;font-weight:normal;text-decoration:none;}
#lnb>li>ul>li>a:hover,#lnb>li>ul>li>a:focus{color:var(--blue) !important;background:var(--surface) !important;font-weight:normal !important;}
#lnb>li>ul>li.on>a{color:var(--blue) !important;font-weight:700 !important;background:none !important;}
#lnb>li>ul>li.on>a::before{content:"";display:inline-block;width:8px;height:8px;background:var(--blue);margin:0 8px 1px 0;vertical-align:baseline;}
.side-card{margin:30px 0 0;padding:18px 18px 20px;background:var(--surface);border-radius:12px;}
.side-card .lbl{margin:0;font-size:13.5px;color:var(--muted);}
.side-card .tel{margin:2px 0 0;font-size:21px;line-height:1.2;font-weight:700;color:var(--navy);letter-spacing:0.01em;}
.side-card .btn{display:block;margin:12px 0 0;padding:10px 0;border-radius:8px;text-align:center;font-size:14px;font-weight:700;text-decoration:none;}
.side-card .btn-fill{background:var(--blue);color:#fff;}
.side-card .btn-fill:hover{background:#2C4A9C;}
.side-card .btn-line{margin-top:8px;background:#fff;color:var(--navy);border:1px solid #C5CDE0;}
.side-card .btn-line:hover{border-color:var(--blue);color:var(--blue);}

/* 오른쪽 열 */
#columnRight{float:left;width:calc(100% - 352px);margin:0 0 0 32px;border:0;overflow:visible;} /* 왼쪽 메뉴와 32px 띄움 — 대표 09-19 「너무 붙었어」 */
.page-head{margin:0 0 22px;padding:0 0 16px;border-bottom:1px solid var(--line);}
.crumb{margin:0 0 6px;font-size:13.5px;color:var(--faint);}
.crumb span{margin:0 6px;}
.page-title{margin:0;font-size:26px;line-height:1.2;font-weight:700;color:var(--ink);letter-spacing:-0.01em;}
.page-title .mk{display:inline-block;width:10px;height:10px;background:var(--blue);margin:0 12px 3px 0;vertical-align:baseline;}
.prod-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px;}
.prod-card{display:block;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s;}
.prod-card:hover{border-color:var(--blue);box-shadow:0 8px 20px rgba(27,42,107,0.12);transform:translateY(-2px);}
.prod-card .thumb{height:215px;display:flex;align-items:center;justify-content:center;background:#fff;border-bottom:1px solid var(--line-soft);}
.prod-card .thumb img{width:100%;height:100%;display:block;object-fit:contain;}
.prod-card .name{margin:0;padding:14px 16px 16px;font-size:15px;line-height:1.45;font-weight:600;word-break:keep-all;}
.prod-card .name em{display:block;font-style:normal;font-weight:normal;font-size:13.5px;color:var(--muted);margin-top:2px;}
.list-tools{display:flex;justify-content:space-between;align-items:center;margin:26px 0 0;padding:16px 0 0;border-top:1px solid var(--line-soft);}
.srch{display:flex;align-items:center;gap:6px;}
.srch input{width:200px;height:34px;box-sizing:border-box;padding:0 12px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:14px;color:var(--ink);}
.srch input::placeholder{color:var(--faint);}
.srch button{height:34px;padding:0 14px;border:0;border-radius:8px;background:var(--navy);color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer;}
.pg{display:flex;align-items:center;gap:4px;font-size:14px;}
.pg a,.pg strong{display:inline-block;min-width:34px;height:34px;line-height:32px;box-sizing:border-box;padding:0 10px;text-align:center;border:1px solid var(--line);border-radius:8px;color:var(--muted);text-decoration:none;font-weight:normal;}
.pg strong.this{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700;}
.pg .dir{color:var(--faint);}

/* 푸터 — 두 열 아래, 흰 바탕 안 */
.foot{clear:both;width:auto;margin-right:40px;margin:44px 0 0 50px;padding:18px 0 40px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.7;color:var(--muted);}
.foot .links{margin:0 0 6px;}
.foot .links a{color:var(--ink);font-weight:600;text-decoration:none;margin-right:18px;}
.foot .links a:hover{color:var(--blue);}
.foot p{margin:0;}
/* 상세 화면 */
.doc-tools{display:flex;justify-content:flex-end;margin:0 0 16px;}
.btn-list{display:inline-block;padding:8px 16px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:14px;text-decoration:none;background:#fff;}
.btn-list:hover{border-color:var(--blue);color:var(--blue);}
.doc-nav{display:flex;justify-content:space-between;align-items:center;margin:32px 0 0;padding:18px 0 0;border-top:1px solid var(--line-soft);}
.doc-nav .pn a{display:block;color:var(--ink);text-decoration:none;font-size:14px;}
.doc-nav .pn a span{display:inline-block;margin-right:10px;padding:2px 8px;border-radius:6px;background:var(--surface);color:var(--muted);font-size:13.5px;}
.doc-nav .pn a:hover{color:var(--blue);}

/* ---- 게시판(sketchbook5) 목록: 제품 카드 ---- (대표 2026-09-19: 사진 가운데 크게(틀의 88%) · 남색 제목 띠 가운데 · 카드 전체 호버·클릭)
   스킨 마크업: li > div.tmb_wrp(img.tmb + a.hx.fixed 덮개) + p > b(제목). 제목은 링크가 아니라 덮개 a 를 li 전체로 키운다.
   썸네일은 16개 게시판 공통 400×300 ratio(4:3 흰 바탕) — 카드 틀도 4:3 */
#columnRight .bd_tmb_lst.gall_style{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px;margin:0;padding:0;text-align:left;}
#columnRight .bd_tmb_lst.gall_style>li{position:relative;display:block;float:none;width:auto !important;height:auto !important;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;transition:border-color .15s,box-shadow .15s,transform .15s;}
#columnRight .bd_tmb_lst.gall_style>li:hover{border-color:var(--blue);box-shadow:0 8px 20px rgba(27,42,107,0.16);transform:translateY(-2px);}
#columnRight .bd_tmb_lst.gall_style .tmb_wrp{position:static;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:auto !important;max-width:none !important;height:auto;aspect-ratio:4/3;margin:0;padding:6%;border:0;background:#fff;}
#columnRight .bd_tmb_lst.gall_style .tmb_wrp img.tmb{width:100% !important;height:auto;max-height:100%;object-fit:contain;margin:0;}
#columnRight .bd_tmb_lst.gall_style .tmb_wrp .no_img{width:100% !important;height:auto;line-height:1.4;color:var(--faint);text-align:center;}
#columnRight .bd_tmb_lst.gall_style .tmb_wrp a.hx.fixed{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;box-shadow:none;}
#columnRight .bd_tmb_lst.gall_style .tmb_wrp .info,#columnRight .bd_tmb_lst.gall_style .tmb_wrp .info_wrp{display:none !important;}
#columnRight .bd_tmb_lst.gall_style>li>p{display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;min-height:68px;margin:0;padding:10px 14px;max-height:none;background-color:var(--navy);background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27600%27 height=%2768%27 viewBox=%270 0 600 68%27%3E%3Cpolyline points=%2765,7 253,7 269,3 422,3%27 fill=%27none%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.25%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%2765%27 cy=%277%27 r=%273%27 fill=%27%2314204F%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.38%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%27422%27 cy=%273%27 r=%273%27 fill=%27%2314204F%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.38%27 stroke-width=%271.25%27/%3E%3Cpolyline points=%2740,13 150,13 166,29 319,29%27 fill=%27none%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.25%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%2740%27 cy=%2713%27 r=%273%27 fill=%27%2314204F%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.38%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%27319%27 cy=%2729%27 r=%273%27 fill=%27%2314204F%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.38%27 stroke-width=%271.25%27/%3E%3Cpolyline points=%27139,23 246,23 253,16 396,16%27 fill=%27none%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.25%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%27139%27 cy=%2723%27 r=%273%27 fill=%27%2314204F%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.38%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%27396%27 cy=%2716%27 r=%273%27 fill=%27%2314204F%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.38%27 stroke-width=%271.25%27/%3E%3Cpolyline points=%2771,33 203,33 213,43 310,43%27 fill=%27none%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.25%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%2771%27 cy=%2733%27 r=%273%27 fill=%27%2314204F%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.38%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%27310%27 cy=%2743%27 r=%273%27 fill=%27%2314204F%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.38%27 stroke-width=%271.25%27/%3E%3Cpolyline points=%27113,40 228,40 235,33 311,33%27 fill=%27none%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.25%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%27113%27 cy=%2740%27 r=%273%27 fill=%27%2314204F%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.38%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%27311%27 cy=%2733%27 r=%273%27 fill=%27%2314204F%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.38%27 stroke-width=%271.25%27/%3E%3Cpolyline points=%2755,47 182,47 194,35 369,35%27 fill=%27none%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.25%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%2755%27 cy=%2747%27 r=%273%27 fill=%27%2314204F%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.38%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%27369%27 cy=%2735%27 r=%273%27 fill=%27%2314204F%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.38%27 stroke-width=%271.25%27/%3E%3Cpolyline points=%27138,54 278,54 289,43 486,43%27 fill=%27none%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.25%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%27138%27 cy=%2754%27 r=%273%27 fill=%27%2314204F%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.38%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%27486%27 cy=%2743%27 r=%273%27 fill=%27%2314204F%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.38%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%27484%27 cy=%2744%27 r=%271.6%27 fill=%27%23A9BEF5%27 fill-opacity=%27.30%27/%3E%3Ccircle cx=%27392%27 cy=%2722%27 r=%271.6%27 fill=%27%23A9BEF5%27 fill-opacity=%27.30%27/%3E%3Ccircle cx=%27151%27 cy=%2716%27 r=%271.6%27 fill=%27%23A9BEF5%27 fill-opacity=%27.30%27/%3E%3Ccircle cx=%2716%27 cy=%2726%27 r=%271.6%27 fill=%27%23A9BEF5%27 fill-opacity=%27.30%27/%3E%3Ccircle cx=%27524%27 cy=%2734%27 r=%271.6%27 fill=%27%23A9BEF5%27 fill-opacity=%27.30%27/%3E%3Ccircle cx=%2792%27 cy=%2726%27 r=%271.6%27 fill=%27%23A9BEF5%27 fill-opacity=%27.30%27/%3E%3Ccircle cx=%27577%27 cy=%2744%27 r=%271.6%27 fill=%27%23A9BEF5%27 fill-opacity=%27.30%27/%3E%3Ccircle cx=%2751%27 cy=%2751%27 r=%271.6%27 fill=%27%23A9BEF5%27 fill-opacity=%27.30%27/%3E%3Ccircle cx=%27398%27 cy=%2715%27 r=%271.6%27 fill=%27%23A9BEF5%27 fill-opacity=%27.30%27/%3E%3C/svg%3E"),linear-gradient(180deg,#1B2A6B 0%,#14204F 100%);background-repeat:repeat-x,no-repeat;background-size:600px 68px,100% 100%;color:#fff;font-size:15px;line-height:1.35;font-weight:700;word-break:keep-all;text-align:center;white-space:normal;transition:background-color .15s;}
/* 제목 띠 물결 무늬(대표 09-20 「심심한데 물결 같은 무늬」 — 시안 나 → 대표 「너무 약한데」(09-20) 로 강화: 흰 물결 3줄 26·18·14% 굵기 2.2·2·1.8 + 아래 물결 채움 7% + 아래로 짙어지는 남색). SVG 타일 300×68 반복 */
#columnRight .bd_tmb_lst.gall_style>li>p b{font-weight:700;font-size:15px;color:#fff;}
/* sub2026.js 가 제목을 모델명/설명 두 줄로 나눈다(대표 09-19 「모델 부분 일괄성」) — 높이 68px 고정이라 한 줄짜리도 같은 키 */
#columnRight .bd_tmb_lst.gall_style>li>p .mdl{display:block;font-size:15.5px;letter-spacing:0.01em;}
#columnRight .bd_tmb_lst.gall_style>li>p .dsc{display:block;margin-top:3px;font-size:13.5px;font-weight:400;color:rgba(255,255,255,0.82);}
#columnRight .bd_tmb_lst.gall_style>li:hover>p{background-color:var(--blue);background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27600%27 height=%2768%27 viewBox=%270 0 600 68%27%3E%3Cpolyline points=%2765,7 253,7 269,3 422,3%27 fill=%27none%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.25%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%2765%27 cy=%277%27 r=%273%27 fill=%27%2314204F%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.38%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%27422%27 cy=%273%27 r=%273%27 fill=%27%2314204F%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.38%27 stroke-width=%271.25%27/%3E%3Cpolyline points=%2740,13 150,13 166,29 319,29%27 fill=%27none%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.25%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%2740%27 cy=%2713%27 r=%273%27 fill=%27%2314204F%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.38%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%27319%27 cy=%2729%27 r=%273%27 fill=%27%2314204F%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.38%27 stroke-width=%271.25%27/%3E%3Cpolyline points=%27139,23 246,23 253,16 396,16%27 fill=%27none%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.25%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%27139%27 cy=%2723%27 r=%273%27 fill=%27%2314204F%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.38%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%27396%27 cy=%2716%27 r=%273%27 fill=%27%2314204F%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.38%27 stroke-width=%271.25%27/%3E%3Cpolyline points=%2771,33 203,33 213,43 310,43%27 fill=%27none%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.25%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%2771%27 cy=%2733%27 r=%273%27 fill=%27%2314204F%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.38%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%27310%27 cy=%2743%27 r=%273%27 fill=%27%2314204F%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.38%27 stroke-width=%271.25%27/%3E%3Cpolyline points=%27113,40 228,40 235,33 311,33%27 fill=%27none%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.25%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%27113%27 cy=%2740%27 r=%273%27 fill=%27%2314204F%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.38%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%27311%27 cy=%2733%27 r=%273%27 fill=%27%2314204F%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.38%27 stroke-width=%271.25%27/%3E%3Cpolyline points=%2755,47 182,47 194,35 369,35%27 fill=%27none%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.25%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%2755%27 cy=%2747%27 r=%273%27 fill=%27%2314204F%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.38%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%27369%27 cy=%2735%27 r=%273%27 fill=%27%2314204F%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.38%27 stroke-width=%271.25%27/%3E%3Cpolyline points=%27138,54 278,54 289,43 486,43%27 fill=%27none%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.25%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%27138%27 cy=%2754%27 r=%273%27 fill=%27%2314204F%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.38%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%27486%27 cy=%2743%27 r=%273%27 fill=%27%2314204F%27 stroke=%27%23A9BEF5%27 stroke-opacity=%27.38%27 stroke-width=%271.25%27/%3E%3Ccircle cx=%27484%27 cy=%2744%27 r=%271.6%27 fill=%27%23A9BEF5%27 fill-opacity=%27.30%27/%3E%3Ccircle cx=%27392%27 cy=%2722%27 r=%271.6%27 fill=%27%23A9BEF5%27 fill-opacity=%27.30%27/%3E%3Ccircle cx=%27151%27 cy=%2716%27 r=%271.6%27 fill=%27%23A9BEF5%27 fill-opacity=%27.30%27/%3E%3Ccircle cx=%2716%27 cy=%2726%27 r=%271.6%27 fill=%27%23A9BEF5%27 fill-opacity=%27.30%27/%3E%3Ccircle cx=%27524%27 cy=%2734%27 r=%271.6%27 fill=%27%23A9BEF5%27 fill-opacity=%27.30%27/%3E%3Ccircle cx=%2792%27 cy=%2726%27 r=%271.6%27 fill=%27%23A9BEF5%27 fill-opacity=%27.30%27/%3E%3Ccircle cx=%27577%27 cy=%2744%27 r=%271.6%27 fill=%27%23A9BEF5%27 fill-opacity=%27.30%27/%3E%3Ccircle cx=%2751%27 cy=%2751%27 r=%271.6%27 fill=%27%23A9BEF5%27 fill-opacity=%27.30%27/%3E%3Ccircle cx=%27398%27 cy=%2715%27 r=%271.6%27 fill=%27%23A9BEF5%27 fill-opacity=%27.30%27/%3E%3C/svg%3E"),linear-gradient(180deg,#2B4CA0 0%,#1B2A6B 100%);}
#columnRight .btm_mn{margin:26px 0 0;padding:16px 0 0;border-top:1px solid var(--line-soft);}
#columnRight .bd_pg a,#columnRight .bd_pg strong{min-width:34px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:8px;font:400 14px/32px 'Malgun Gothic',sans-serif;color:var(--muted);}
#columnRight .bd_pg .this{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700;}
/* 게시판 머리글의 제목 이미지(navigation_*.jpg) — 프레임이 글자 제목을 찍으므로 숨긴다 */
#columnRight > div > img[src*="/contents/navigation"]{display:none;}
/* 글 읽기 화면: 제목·뷰어 버튼 줄은 히어로가 맡으므로 숨긴다(목록 화면의 bd_hd 는 비어 있어 영향 없음) */
#columnRight .bd .bd_hd.v2{display:none;}
#columnRight .bd .rd .rd_hd{display:none;}
#columnRight .bd .rd{padding:0 !important;}
#columnRight .bd .rd_body{margin:0;}

/* ---- 글 안 절 이동 버튼 띠(대표 2026-09-19 「버튼 만들어서 스크롤 없이 바로」) — 본문이 <div class="doc-jump"> 로 넣는다. 화면 위에 붙는다(sticky) ----
   #contentBody 가 overflow:hidden 이면 sticky 가 안 붙는다 → float 정리는 display:flow-root 로 */
html{scroll-behavior:smooth;}
.doc-jump{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:10px 0;background:rgba(255,255,255,0.96);border-bottom:1px solid var(--line-soft);}
.doc-jump a{display:inline-block;padding:8px 16px;border:1px solid var(--navy);border-radius:999px;background:#fff;color:var(--navy);font-size:14px;font-weight:700;line-height:1.3;text-decoration:none;transition:background .15s,color .15s;}
.doc-jump a:hover{background:var(--navy);color:#fff;}
.doc-jump a.dl{background:var(--navy);color:#fff;} .doc-jump a.dl:hover{background:var(--blue);border-color:var(--blue);}
.doc-jump a.top{margin-left:auto;border-color:var(--line);color:var(--muted);background:#fff;} .doc-jump a.top:hover{background:var(--surface);color:var(--navy);}
.doc-sec{scroll-margin-top:72px;}

/* ---- 히어로 사진 갤러리(대표 2026-09-20 「썸네일 버튼 누르면 이미지 변경」) — 본문 <div class="hero-gal"> : img.hero-img + div.hero-ths > button.hero-th[data-src] ----
   썸네일은 남색 위 흰 테두리 상자, 선택된 것은 흰 배경 + 파란 테두리. 큰 사진은 바뀔 때 0.12초 페이드. sub2026.js 가 클릭·호버를 받는다. */
.hero-gal{display:inline-block;max-width:560px;text-align:center;}
.hero-gal img.hero-img{transition:opacity .12s;}
.hero-ths{display:flex;justify-content:center;gap:8px;margin:12px 0 0;}
.hero-th{box-sizing:border-box;width:72px;height:54px;padding:3px;border:2px solid rgba(255,255,255,0.45);border-radius:8px;background:rgba(255,255,255,0.10);cursor:pointer;transition:border-color .15s,background .15s;}
.hero-th img{width:100%;height:100%;object-fit:contain;display:block;}
.hero-th:hover{border-color:#fff;background:rgba(255,255,255,0.22);}
.hero-th.on{border-color:#7FA6FF;background:#fff;}

/* ---- 히어로 탭(대표 2026-09-21 「주요기능 · 사양 버튼」 — 사양 줄이 많아도 히어로가 안 길어진다) — 본문 <div class="hero-tabs"> button[data-tab] + div.hero-pane[data-pane] ---- */
.hero-tabs{display:flex;gap:8px;margin:12px 0 0;padding:10px 0 0;border-top:1px solid rgba(255,255,255,0.18);}
.hero-tabs button{box-sizing:border-box;padding:7px 16px;border:1px solid rgba(255,255,255,0.35);border-radius:999px;background:rgba(255,255,255,0.06);color:#C9D3EA;font-size:13.5px;font-weight:700;letter-spacing:0.02em;cursor:pointer;font-family:inherit;transition:background .15s,color .15s,border-color .15s;}
.hero-tabs button:hover{border-color:#fff;color:#fff;}
.hero-tabs button.on{background:#fff;color:#1B2A6B;border-color:#fff;}
.hero-pane{display:none;margin:10px 0 0;}
.hero-pane.on{display:block;}

/* ---- 세트 구성 + 임시 장바구니(대표 2026-09-21) — 히어로 탭 판 <div class="hero-pane" data-pane="set">: .set-grid > .set-card(select.set-sel · a.set-link > .set-img img · .set-model · .set-name · button.set-add) + .set-cart(.set-cart-items · a.set-quote[data-href]) ---- */
.set-grid{display:flex;flex-wrap:wrap;gap:10px;}
.set-card{box-sizing:border-box;flex:1 1 140px;min-width:140px;max-width:240px;padding:8px 9px 9px;border-radius:12px;background:#fff;color:#1c2333;display:flex;flex-direction:column;}
.set-role{margin:0 0 4px;font-size:13.5px;font-weight:700;color:#1B2A6B;letter-spacing:0.02em;}
.set-card select.set-sel{box-sizing:border-box;width:100%;margin:0 0 6px;padding:4px 6px;font-size:13.5px;font-family:inherit;color:#1c2333;border:1px solid #D5DBE6;border-radius:8px;background:#F7F8FB;}
.set-card a.set-link{color:inherit;text-decoration:none;}
.set-img{display:flex;align-items:center;justify-content:center;height:84px;margin:0 0 6px;border-radius:8px;background:#F7F8FB;overflow:hidden;}
.set-img img{max-width:92%;max-height:78px;display:block;transition:transform .15s;}
.set-card a.set-link:hover .set-img img{transform:scale(1.04);}
.set-model{margin:0;font-size:14px;font-weight:700;color:#1B2A6B;line-height:1.35;}
.set-name{margin:2px 0 0;font-size:13.5px;color:#6B778C;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.set-spec{margin:2px 0 0;font-size:13.5px;font-weight:700;color:#2B4CA0;line-height:1.35;}
.set-card select.set-size{box-sizing:border-box;width:100%;margin:5px 0 7px;padding:4px 6px;font-size:13.5px;font-family:inherit;color:#1c2333;border:1px solid #D5DBE6;border-radius:8px;background:#fff;}
.set-cable{box-sizing:border-box;display:flex;align-items:center;gap:6px;width:100%;margin:0 0 7px;padding:4px 6px;border:1px solid #D5DBE6;border-radius:8px;background:#F7F8FB;color:#1c2333;font-family:inherit;text-align:left;cursor:pointer;}   /* 케이블 같이 담기(대표 2026-09-28) — 체크 모양 button */
.set-cable-box{flex:0 0 auto;box-sizing:border-box;width:16px;height:16px;border:2px solid #9AA3B5;border-radius:4px;background:#fff;position:relative;}
.set-cable.on .set-cable-box{border-color:#1B2A6B;background:#1B2A6B;}
.set-cable.on .set-cable-box::after{content:"";position:absolute;left:3px;top:0;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.set-cable img{flex:0 0 auto;width:40px;height:28px;object-fit:contain;background:#fff;border-radius:4px;}
.set-cable span{display:flex;flex-direction:column;min-width:0;line-height:1.25;}
.set-cable b{font-size:13.5px;font-weight:700;color:#1B2A6B;}
.set-cable em{font-style:normal;font-size:13.5px;color:#4E586B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.set-cable:not(.on) b,.set-cable:not(.on) em{color:#9AA3B5;}
.set-add{box-sizing:border-box;margin:auto 0 0;padding:6px 10px;border:0;border-radius:8px;background:#1B2A6B;color:#fff;font-size:13.5px;font-weight:700;font-family:inherit;cursor:pointer;transition:background .15s;}
.set-add:hover{background:#2F4FB0;}
.set-add.done{background:#1E8E5A;}
.set-cart{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 0;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);}
.set-cart-lbl{font-size:13.5px;font-weight:700;color:#fff;white-space:nowrap;}
.set-cart-items{flex:1 1 240px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.set-empty{font-size:13.5px;color:#C9D3EA;}
.set-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border-radius:999px;background:#fff;color:#1B2A6B;font-size:13.5px;line-height:1;}
.set-chip b{font-weight:700;}
.set-qty{display:inline-flex;align-items:center;gap:2px;}
.set-qty i{font-style:normal;min-width:18px;text-align:center;font-weight:700;}
.set-qty button,.set-del{box-sizing:border-box;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:#E9EDF4;color:#1B2A6B;font-size:14px;line-height:22px;font-weight:700;cursor:pointer;font-family:inherit;}
.set-qty button:hover,.set-del:hover{background:#D5DBE6;}
.set-del{background:transparent;color:#9AA3B5;font-size:16px;}
.set-quote{display:inline-block;padding:9px 16px;border-radius:8px;background:#fff;color:#1B2A6B;font-size:13.5px;font-weight:700;text-decoration:none;white-space:nowrap;}
.set-quote:hover{background:#E9EDF4;}
.set-quote.off{opacity:0.55;}
.set-note{margin:6px 0 0;font-size:13.5px;color:#9FB0D0;line-height:1.4;}
@media (max-width:640px){.set-card{max-width:none;}}

/* 좁은 화면 · 폰(대표 2026-09-28 스마트폰 캡처 — 폰은 PC 화면을 축소해 보인다): ① 오른쪽 TOP 떠 있는 버튼(alway_stalker 위젯)이 left:1870px 고정이라 좁은 화면에서 문서가 1,898px 로 늘어나 폰이 더 축소하고 오른쪽이 파랗게 비었다 → 오른쪽 끝에 붙인다 ② 제품 히어로 표 안 「주요 기능」 두 칸 · 버튼 줄의 nowrap 이 표를 안 줄어들게 해 오른쪽(버튼 · 사진 판)이 둥근 상자 밖으로 잘렸다 → 줄바꿈 허용. 넓은 화면(1920)은 높이 · 폭 그대로(실측) */
[id^="alwayStalker_"]{left:auto !important;right:6px !important;}
.hero-pane td[style*="nowrap"]{white-space:normal !important;}
#columnRight td[style*="width:38%"] > div[style*="nowrap"]{white-space:normal !important;}