@charset "UTF-8";
/* =====================================================================
   온시큐리티 서브페이지 스타일 (메인 테마 계승)
   - 디자인 토큰은 tokens.css, 공통 헤더/푸터는 shell.css 참조
   ===================================================================== */

/* 페이지 히어로 */
/* min-height + 세로 중앙 정렬 — .desc 줄 수(1~2줄)가 달라도 전 페이지 히어로 높이가 같아진다.
   height 고정이 아니라 min-height라 좁은 폭에서 .desc가 여러 줄로 늘어나면 히어로가 함께 커진다. */
.page-hero{background:linear-gradient(140deg,var(--navy) 0%,var(--navy-light) 60%,var(--navy-bright) 130%);color:#fff;padding:64px 0 58px;min-height:var(--page-hero-h);display:flex;align-items:center;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;right:-120px;top:-80px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(61,123,239,.35),transparent 65%)}
.page-hero .container{position:relative;z-index:1;width:100%}
/* .page-hero__title — 상세 콘텐츠가 h1인 페이지(news-view)에서 히어로 제목을 p로 강등할 때 동일 스타일 유지 */
.page-hero h1,.page-hero .page-hero__title{font-size:clamp(28px,4.2vw,46px);font-weight:900;line-height:1.2}
.page-hero .eng{margin-top:12px;font-size:14px;font-weight:700;letter-spacing:1.5px;color:var(--primary-soft);text-transform:uppercase}
.page-hero .desc{margin-top:18px;font-size:16px;line-height:1.85;color:rgba(255,255,255,.86);max-width:820px}

/* 섹션 (index .content 재사용, 서브용 축소 변형) */
.sec{padding:var(--section-y-sub) 0}
.sec.tint{background:var(--bg)}
.sec-label{font-size:13px;font-weight:800;letter-spacing:1.5px;color:var(--primary);text-transform:uppercase}
.sec-head2{margin-bottom:44px}
.sec-head2 .sec-title{font-size:clamp(24px,3vw,36px);font-weight:900;line-height:1.3;margin-top:12px;color:var(--ink)}
.sec-head2 .sec-desc{margin-top:16px;font-size:16px;color:var(--gray);line-height:1.8;max-width:860px}
.sec-head2.center{text-align:center}
.sec-head2.center .sec-desc{margin-left:auto;margin-right:auto}

/* 2단 그리드 */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
/* 제품 개요 등 미디어를 작게: 이미지 1 / 텍스트 2 (전역 .g2 미영향) */
.g2--media{grid-template-columns:1fr 2fr}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}

/* 제품 개요 */
.ov-media{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--bg)}
.ov-media img{width:100%;display:block}
.ov-body h2{font-size:clamp(21px,2.4vw,28px);font-weight:900;color:var(--ink);line-height:1.4;margin:12px 0 16px}
.ov-body p{font-size:15px;color:var(--gray);line-height:1.9}
.ov-body p+p{margin-top:12px}
/* 배경 워터마크 텍스트 — 흐름에서 빠져 있어(absolute, top 자동) 섹션이 높이를 잡아주지
   않는다. 뒤 섹션 위에 겹쳐 그려지므로 클릭을 가로채지 않도록 pointer-events를 끈다 */
.ov-flow{position:absolute;right:0;font-size:72px;font-weight:700;color:var(--bg);pointer-events:none;}

/* 기능 칩 */
.chips{display:flex;flex-wrap:wrap;gap:12px}
.feat-chip{padding:13px 22px;background:#fff;border:1px solid var(--line);border-radius:40px;font-size:15px;font-weight:700;color:var(--navy);transition:.2s}
@media (hover: hover){.feat-chip:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-3px);box-shadow:0 10px 24px rgba(10,31,68,.1)}}

/* 주요 기능 그리드 (3열 · 아이콘 자리 포함) */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat-item{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;transition:.2s}
@media (hover: hover){.feat-item:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:0 10px 24px rgba(10,31,68,.1)}}
.feat-item__icon{flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:linear-gradient(150deg,var(--navy),var(--primary));display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px}
.feat-item__icon:empty::before{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:var(--icon-sparkle) center/contain no-repeat;mask:var(--icon-sparkle) center/contain no-repeat}
.feat-item__icon img{width:24px;height:24px;object-fit:contain}
.feat-item__icon svg{width:24px;height:24px}
.feat-item__label{font-size:16px;font-weight:700;color:var(--ink);line-height:1.4}

/* 지그재그 기능 상세 */
.zz{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:26px 0}
.zz:nth-child(even) .zz-media{order:2}
.zz-media{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--bg);cursor:zoom-in;position:relative}
.zz-media img{width:100%;display:block;transition:transform .4s}
@media (hover: hover){.zz-media:hover img{transform:scale(1.03)}}
.zz-body .no{display:inline-block;font-size:14px;font-weight:800;color:#fff;background:var(--navy);padding:6px 14px;border-radius:8px}
.zz-body h3{font-size:23px;font-weight:900;color:var(--ink);margin:16px 0 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.zz-body p{font-size:15px;color:var(--gray);line-height:1.9}
.badge.add{font-size:12px;font-weight:800;color:#fff;background:var(--primary-vivid);padding:4px 10px;border-radius:20px}

/* 기능 상세 슬라이더 (Swiper CDN을 로드한 페이지에서만 동작 · 3장 동시 노출형) */
.feat-slider{position:relative;max-width:var(--container);margin:0 auto;padding:0 96px}
.feat-card{text-align:center}
.feat-card__media{aspect-ratio:16/10;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);overflow:hidden;cursor:zoom-in}
.feat-card__media img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform .4s}
@media (hover: hover){.feat-card__media:hover img{transform:scale(1.03)}}
.feat-card__body{padding:22px 8px 0}
.feat-card__head{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.feat-card__head .no{font-size:14px;font-weight:800;color:var(--primary)}
.feat-card__head h3{font-size:20px;font-weight:800;color:var(--ink)}
.feat-card__body p{margin-top:10px;font-size:14.5px;color:var(--gray);line-height:1.8}
.feat-nav{position:absolute;top:38%;transform:translateY(-50%);z-index:10;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.95);border:1px solid var(--line);box-shadow:var(--shadow-deep);color:var(--ink);font-size:26px;line-height:1;cursor:pointer;transition:.2s}
@media (hover: hover){.feat-nav:hover{background:var(--primary);border-color:var(--primary);color:#fff}}
.feat-nav--prev{left:20px}
.feat-nav--next{right:20px}
.feat-slider .swiper-pagination{position:static;margin-top:30px;display:flex;justify-content:center;align-items:center}
.feat-slider .swiper-pagination-bullet{width:8px;height:8px;background:var(--gray);opacity:.35;transition:.25s}
.feat-slider .swiper-pagination-bullet-active{width:26px;border-radius:4px;background:var(--primary);opacity:1}

/* 표 */
.table-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tbl th,.tbl td{padding:15px 18px;text-align:left;font-size:15px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{background:var(--navy);color:#fff;font-weight:700;font-size:14px}
/* 본문 행 머리글(th scope="row") — 헤더 스타일 대신 데이터 셀 외관 유지 (접근성용 전환, 2026-07-30) */
.tbl th[scope="row"]{background:#fff;color:var(--ink);font-size:15px}
.tbl tr:last-child td,.tbl tbody tr:last-child td,.tbl tbody tr:last-child th[scope="row"]{border-bottom:0}
.tbl td{color:var(--ink)}
.tbl .center{text-align:center}
.chip{display:inline-block;padding:4px 12px;border:1px solid var(--line);border-radius:20px;font-size:12px;font-weight:700;color:var(--gray);background:var(--bg)}
.chip.ok{border-color:var(--success-line);color:var(--success);background:var(--success-bg)}
.price-cell{display:flex;flex-direction:column;gap:4px}
.price-cell .amt{font-size:19px;font-weight:900;color:var(--navy)}
.price-cell .cap{font-size:12px;color:var(--gray)}
.lock{color:var(--gray)}
.lock b{display:block;color:var(--navy);font-weight:800;font-size:14px;margin-bottom:6px}
.delta{font-weight:900;color:var(--primary);font-size:16px}

/* 노트 배너 */
.note{padding:16px 20px;border-radius:12px;background:var(--bg);border:1px solid var(--line);font-size:14.5px;color:var(--gray);line-height:1.8}
.note.accent{background:var(--info-bg);border-color:var(--info-line);color:var(--navy)}
.note.accent a,.note.accent b,.note.accent strong{color:var(--primary);font-weight:800}
/* 본문 안내 링크 — 상세 페이지로 이동하는 인라인 링크 공통 (상시 밑줄 + 호버 강조, 2026-07-31) */
.note a,.sec-desc a,.faq-a a,.contact-side a,.news-view__body p a{color:var(--primary);font-weight:800;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .15s,text-decoration-thickness .15s}
@media (hover:hover){.note a:hover,.sec-desc a:hover,.faq-a a:hover,.contact-side a:hover,.news-view__body p a:hover{color:var(--primary-deep);text-decoration-thickness:2px}}

/* 공통 수정자·유틸리티 — 마크업 인라인 style 속성 대신 사용 */
.g2--top{align-items:start}
.g3--single{grid-template-columns:1fr;max-width:410px}
.sec-head2--sub{margin:44px 0 20px}
.sec-head2 .sec-title--sm{font-size:clamp(19px,2.2vw,24px)}
.tbl .nw{white-space:nowrap}
.tbl .col-ok{width:110px;text-align:center}
.tbl .w10{width:10%}
.tbl .w12{width:12%}
.tbl .w24{width:24%}
.tbl .w26{width:26%}
.tbl .w38{width:38%}
.delta small{font-weight:600;color:var(--gray)}
.map-embed{border:0;border-radius:8px}
.mt-18{margin-top:18px}
.mt-20{margin-top:20px}
.mt-22{margin-top:22px}
.mt-26{margin-top:26px}
.mb-10{margin-bottom:10px}
.mb-18{margin-bottom:18px}
.mb-24{margin-bottom:24px}
.mb-26{margin-bottom:26px}

/* STEP */
.steps{display:flex;align-items:stretch;gap:40px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.step{position:relative;flex:1;min-width:220px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;transition:.25s}
@media (hover: hover){.step:hover{transform:translateY(-5px);box-shadow:var(--shadow-card);border-color:transparent}}
.step .no{display:inline-block;font-size:13px;font-weight:800;color:#fff;background:linear-gradient(150deg,var(--navy),var(--primary));padding:6px 14px;border-radius:8px}
.step .nm{font-size:18px;font-weight:800;color:var(--ink);margin:16px 0 6px;line-height:1.4}
.step .en{font-size:13px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.5px}
.step .use{margin-top:12px;font-size:14px;color:var(--gray)}
.step:not(:last-child)::after{content:"";position:absolute;top:50%;right:-33px;transform:translateY(-50%);width:26px;height:26px;background:var(--primary-light);-webkit-mask:var(--icon-arrow-right) center/contain no-repeat;mask:var(--icon-arrow-right) center/contain no-repeat}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;border-radius:40px;cursor:pointer;transition:.2s;border:0}
.btn-primary{background:var(--primary);color:#fff;padding:15px 34px;font-size:16px}
@media (hover: hover){.btn-primary:hover{background:var(--primary-light)}}
.btn-accent{background:var(--primary);color:#fff;padding:15px 32px;font-size:16px}
@media (hover: hover){.btn-accent:hover{background:var(--primary-light)}}
.btn-outline{background:#fff;color:var(--primary);border:1.5px solid var(--primary);padding:9px 18px;font-size:13px}
@media (hover: hover){.btn-outline:hover{background:var(--primary);color:#fff}}
.btn-sm{padding:9px 18px;font-size:13px}

/* 카드 */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px}
.card.tint{background:var(--bg)}
.cert-card{text-align:center;padding:30px 28px}
.cert-card img{height:240px;width:auto;margin:0 auto 16px;object-fit:contain}
.cert-card h3{font-size:17px;font-weight:800;color:var(--ink);margin-bottom:8px}
.cert-card p{font-size:14px;color:var(--gray);line-height:1.7}
.video-ph{background:linear-gradient(145deg,var(--navy),var(--navy-light));border-radius:var(--radius);min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff}
.video-ph .play{width:60px;height:60px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px}
.video-ph b{font-size:16px;font-weight:800}
.video-ph span{font-size:13px;color:rgba(255,255,255,.75)}

/* 고객사 로고 박스 */
.logo-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:36px 24px;text-align:center;transition:.25s}
@media (hover: hover){.logo-box:hover{transform:translateY(-5px);box-shadow:var(--shadow-card);border-color:transparent}}
.logo-box .mark{width:76px;height:76px;margin:0 auto 18px;border-radius:18px;background:linear-gradient(150deg,var(--navy),var(--primary));color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;letter-spacing:.5px}
.logo-box .nm{font-size:17px;font-weight:800;color:var(--ink)}
/* 이미지 로고(컬러 워드마크): 흰 배경 칩 + contain */
.logo-box .mark--img{width:auto;min-width:120px;max-width:190px;height:64px;padding:10px 16px;background:#fff;}
.logo-box .mark--img:last-child{margin-bottom:0}
.logo-box .mark--img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

/* 필터 */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.filters button{padding:10px 20px;border:1px solid var(--line);background:#fff;border-radius:40px;font-size:14px;font-weight:700;color:var(--gray);cursor:pointer;transition:.2s}
@media (hover: hover){.filters button:hover{border-color:var(--primary);color:var(--primary)}}
.filters button.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* 알림 목록 */
.news-list{border-top:2px solid var(--navy)}
.list-row{display:flex;align-items:center;gap:18px;padding:20px 8px;border-bottom:1px solid var(--line);transition:.2s;cursor:pointer;text-decoration:none;color:inherit}
@media (hover: hover){.list-row:hover{background:var(--bg)}}
.list-row .cat{flex:0 0 auto;font-size:12px;font-weight:800;color:#fff;padding:5px 13px;border-radius:20px}
.cat.build{background:var(--primary)}
.cat.deliver{background:var(--teal)}
.cat.maint{background:var(--neutral)}
.cat.cert{background:var(--success)}
.cat.notice{background:var(--navy)}
/* 자료(첨부파일 게시글) — deliver의 --teal보다 어두운 축으로 구분한다.
   흰 배지 글자(12px/800) 대비를 4.5:1 이상 유지하려면 이 계열에서 더 밝게 가지 말 것. */
.cat.doc{background:var(--teal-deep)}
.list-row .ttl{flex:1;font-size:16px;font-weight:700;color:var(--ink)}
/* 자료 행에만 제목 끝에 첨부 클립 아이콘 (마크업이 아니라 data-cat으로 붙이므로 자료 게시글을
   새로 올릴 때 손댈 것이 없다). inline-block이라 제목이 여러 줄로 접히면 마지막 줄을 따라간다. */
.list-row[data-cat="doc"] .ttl::after{content:"";display:inline-block;width:15px;height:15px;margin-left:8px;vertical-align:-2px;background:var(--teal-deep);-webkit-mask:var(--icon-paperclip) center/contain no-repeat;mask:var(--icon-paperclip) center/contain no-repeat}
.list-row .meta{flex:0 0 auto;font-size:13.5px;color:var(--gray)}
.pager{margin-top:26px;text-align:center;font-size:14px;font-weight:700;color:var(--gray)}
.pager .cur{color:var(--navy)}

/* 알림 상세 (뉴스 뷰) */
.container--narrow{max-width:880px}
.news-view__head{padding-bottom:30px;border-bottom:2px solid var(--navy);margin-bottom:38px}
.news-view__cat{display:inline-block;font-size:12px;font-weight:800;color:#fff;padding:6px 14px;border-radius:20px}
.news-view__title{font-size:clamp(23px,3vw,34px);font-weight:900;line-height:1.45;color:var(--ink);margin:18px 0 22px}
.news-view__sub{margin:0 0 24px;padding:20px 24px;background:var(--bg);border:1px solid var(--line);border-radius:12px;list-style:none}
.news-view__sub li{position:relative;padding-left:18px;font-size:15px;color:var(--gray);line-height:1.85}
.news-view__sub li+li{margin-top:10px}
.news-view__sub li::before{content:"";position:absolute;left:2px;top:10px;width:6px;height:6px;border-radius:50%;background:var(--primary)}
.news-view__date{font-size:14px;font-weight:700;color:var(--gray)}
.news-view__body p{font-size:16px;color:var(--ink);line-height:2}
.news-view__body p+p{margin-top:20px}
.news-view__body strong{font-weight:800;color:var(--navy)}
.news-view__point{margin:26px 0;padding:26px 28px;background:var(--info-bg);border:1px solid var(--info-line);border-radius:var(--radius);list-style:none}
.news-view__point li{position:relative;padding-left:22px;font-size:15px;color:var(--navy);line-height:1.85}
.news-view__point li+li{margin-top:12px}
.news-view__point li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;background:var(--primary);-webkit-mask:var(--icon-check) center/contain no-repeat;mask:var(--icon-check) center/contain no-repeat}
.news-view__point strong{color:var(--navy);font-weight:800}
.news-view__quote{margin:26px 0;padding:22px 26px;border-left:4px solid var(--primary);background:var(--bg);border-radius:0 12px 12px 0;font-size:16px;color:var(--ink);line-height:1.9}
.news-view__company{margin-top:36px;padding:28px 30px;background:var(--surface-dark);border-radius:var(--radius);color:#fff}
.news-view__company h3{font-size:16px;font-weight:800;margin-bottom:12px;color:#fff}
.news-view__company p{font-size:14.5px;line-height:1.9;color:rgba(255,255,255,.82)}
.news-view__contact{margin-top:22px;font-size:14px;color:var(--gray)}
.news-view__foot{margin-top:40px;padding-top:28px;border-top:1px solid var(--line);text-align:center}
.news-view__foot .btn-outline{padding:12px 30px;font-size:14px}

/* 첨부파일 (알림 상세의 자료 게시글) */
.file-box{margin-top:34px;padding:24px 26px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius)}
.file-box__title{font-size:15px;font-weight:800;color:var(--navy);margin-bottom:14px}
.file-list{list-style:none;display:grid;gap:12px}
.file-item{display:flex;align-items:center;gap:14px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:12px}
.file-item__ico{flex:0 0 auto;width:22px;height:22px;background:var(--primary);-webkit-mask:var(--icon-download) center/contain no-repeat;mask:var(--icon-download) center/contain no-repeat}
.file-item__body{flex:1;min-width:0}
.file-item__name{display:block;font-size:15px;font-weight:700;color:var(--ink);word-break:break-all}
.file-item__meta{display:block;margin-top:3px;font-size:13px;color:var(--gray)}
.file-item__btn{flex:0 0 auto;padding:11px 24px;font-size:14px}

/* 폼 */
.contact-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:30px;align-items:start}
.form-card h2{font-size:22px;font-weight:900;color:var(--ink);margin-bottom:6px}
.form-card .lead{font-size:14.5px;color:var(--gray);margin-bottom:8px}
.req{color:var(--primary)}
.form-label{display:block;font-size:14px;font-weight:700;color:var(--ink);margin:20px 0 8px}
.form-card .form-label:first-of-type{margin-top:10px}
.opt-row{display:flex;flex-wrap:wrap;gap:16px}
.opt{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;color:var(--ink);cursor:pointer}
.opt input{width:16px;height:16px;accent-color:var(--primary)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.input,.select,.textarea{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:10px;font-size:15px;font-family:inherit;color:var(--ink);background:#fff;transition:.2s}
.input:focus,.select:focus,.textarea:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent)}
.textarea{min-height:130px;resize:vertical}
.agree-row{margin-top:22px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.agree-row a{color:var(--gray);text-decoration:underline;font-size:13px}
.submit-row{margin-top:24px}
/* 스팸봇 유인용 숨김 필드(contact·support-portal) — display:none은 봇이 감지하기 쉬워 화면 밖 배치를 쓴다 */
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-side .card{margin-bottom:18px}
.contact-side .card:last-child{margin-bottom:0}
.contact-side h3{font-size:16px;font-weight:800;color:var(--navy);margin-bottom:10px}
.contact-side p{font-size:14px;color:var(--gray);line-height:1.9}
.contact-side a{color:var(--primary);font-weight:700}

/* 라이트박스 */
.lightbox{position:fixed;inset:0;background:rgba(6,17,40,.9);z-index:2000;display:none;align-items:center;justify-content:center;padding:40px;cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-width:94vw;max-height:90vh;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox .close{position:absolute;top:22px;right:28px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);color:#fff;font-size:24px;cursor:pointer}
.lightbox .close:focus-visible{outline:2px solid var(--dark-ink-strong);outline-offset:3px}
/* 묶음이 2장 이상일 때만 좌우 화살표를 낸다 (JS가 hidden 토글 — display:flex가 hidden 속성을
   덮으므로 [hidden] 한 줄이 반드시 필요하다).
   확대 이미지가 max-width:94vw라 화살표는 오버레이가 아니라 '이미지 위'에 얹힌다. 그래서
   ⓐ z-index로 이미지보다 위에 올리고(없으면 img가 뒤에 오는 prev를 덮는다)
   ⓑ .close처럼 반투명 흰 원으로 두면 흰 배경 스크린샷 위에서 사라지므로 오버레이와 같은
      짙은 남색 원 + 흰 테두리로 어떤 이미지 위에서든 보이게 한다 */
.lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;background:rgba(6,17,40,.72);border:1px solid rgba(255,255,255,.55);color:#fff;cursor:pointer;transition:.2s}
.lightbox .lb-nav[hidden]{display:none}
.lightbox .lb-nav::before{content:"";width:22px;height:22px;background:currentColor;-webkit-mask:var(--icon-chevron-right) center/contain no-repeat;mask:var(--icon-chevron-right) center/contain no-repeat}
.lightbox .lb-nav--prev{left:28px}
.lightbox .lb-nav--prev::before{transform:scaleX(-1)}   /* 좌향 토큰이 없어 뒤집어 쓴다 (.zz-nav와 같은 방식) */
.lightbox .lb-nav--next{right:28px}
.lightbox .lb-nav:focus-visible{outline:2px solid var(--dark-ink-strong);outline-offset:3px}
@media (hover: hover){.lightbox .lb-nav:hover{background:var(--primary);border-color:var(--primary)}}
/* 확대 트리거 (이미지 자체 또는 래퍼) */
.cert-card img[data-lightbox]{cursor:zoom-in}
[data-lightbox]:focus-visible{outline:2px solid var(--primary);outline-offset:3px}

/* FAQ 아코디언 — 제품 3종·service-remote·service-price 공용 (2026-08-10 products-common.css와
   service-maintenance.css에 있던 동일 규칙 두 벌을 여기로 합쳤다. JS는 페이지별 인라인 IIFE 유지 —
   공용 js로 올리면서 페이지 인라인을 남기면 핸들러가 이중 바인딩되어 클릭이 열렸다 닫힌다).
   마크업 계약 — #faqList.faq-list > .faq-item > button.faq-q[aria-expanded][aria-controls]
   > span.faq-qtxt + span.faq-icon, 형제 div.faq-panel[id][role=region] > div.faq-a */
.faq-sec{background:#fff;}
.faq-list{max-width:880px;margin:40px auto 0;}
.faq-item{border:1px solid var(--line);border-radius:var(--radius);background:#fff;margin-bottom:14px;overflow:hidden;transition:border-color .18s,box-shadow .18s;}
.faq-item.is-open{border-color:var(--primary);box-shadow:var(--shadow-card);}
.faq-q{width:100%;display:flex;align-items:center;gap:16px;padding:22px 26px;background:transparent;border:0;cursor:pointer;text-align:left;font-family:var(--font-sans);}
.faq-q:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;}
.faq-q .faq-qtxt{flex:1;font-size:17px;font-weight:700;color:var(--ink);line-height:1.5;transition:color .18s;}
.faq-item.is-open .faq-q .faq-qtxt{color:var(--primary);}
.faq-q .faq-icon{flex:none;width:28px;height:28px;position:relative;color:var(--gray);transition:transform .22s ease,color .18s;}
.faq-q .faq-icon::before,.faq-q .faq-icon::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;border-radius:2px;background:currentColor;transform:translate(-50%,-50%);}
.faq-q .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .22s ease,opacity .18s;}
.faq-item.is-open .faq-q .faq-icon{color:var(--primary);}
.faq-item.is-open .faq-q .faq-icon::after{transform:translate(-50%,-50%) rotate(0);opacity:0;}
.faq-panel{max-height:0;overflow:hidden;transition:max-height .28s ease;}
.faq-a{padding:0 26px 24px;color:var(--gray);font-size:15px;line-height:1.75;}
.faq-a b,.faq-a strong{color:var(--ink);font-weight:700;}

/* 반응형 */
@media (max-width:1024px){
  .g3{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  /* .steps 세로 전환은 ≤768이 아니라 여기서 한다 (2026-08-11).
     .step{flex:1;min-width:220px} + gap:40px이라 3개는 폭 740px, 4개는 1000px이 필요한데
     .container 안쪽 폭이 그보다 좁아지면 flex-wrap이 2+1(deployment) · 3+1(service-grade)로
     접혀 마지막 카드만 아랫줄에 홀로 남고, 카드 사이 화살표도 줄 끝에서 허공을 가리켰다.
     어중간한 줄바꿈 상태를 아예 없애기 위해 그 구간을 전부 세로 배치로 돌린다 */
  .steps{flex-direction:column}
  .step:not(:last-child)::after{top:auto;right:auto;left:50%;bottom:-35px;transform:translateX(-50%) rotate(90deg)}
}
@media (max-width:768px){
  .g2,.zz,.contact-grid,.form-row{grid-template-columns:1fr}
  .g4{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr}
  .feat-slider{padding:0 56px}
  .feat-nav{width:42px;height:42px;font-size:20px;top:32%}
  .feat-nav--prev{left:6px}
  .feat-nav--next{right:6px}
  .feat-card__head h3{font-size:18px}
  /* 라이트박스 화살표 — 390px에서는 확대 이미지가 화면 폭을 거의 다 쓰므로 원을 줄이고 가장자리로 붙인다 */
  .lightbox{padding:20px}
  .lightbox .lb-nav{width:38px;height:38px}
  .lightbox .lb-nav::before{width:18px;height:18px}
  .lightbox .lb-nav--prev{left:8px}
  .lightbox .lb-nav--next{right:8px}
  .zz:nth-child(even) .zz-media{order:0}
  .sec{padding:56px 0}
  .list-row{flex-wrap:wrap;gap:10px}
  .list-row .ttl{flex:1 1 100%;order:3}
  /* 첨부파일 카드 — 390px에서는 파일명과 버튼이 한 줄에 들어가지 않는다 */
  .file-box{padding:20px 18px}
  .file-item{flex-wrap:wrap}
  .file-item__btn{flex:1 1 100%}
  /* ── 모바일 표 → 카드 전환 (.tbl--stack) ────────────────────────────────
     열이 적고 행 단위로 읽는 표는 390px에서 열 폭이 눌려 글자가 잘게 접히므로,
     행 하나를 카드 하나로 세운다. 반대로 값끼리 비교하며 읽는 표는 카드로 세우면
     비교가 불가능해지므로 표 형태를 유지하고 페이지 css에서 min-width를 줘
     .table-wrap 안에서 가로 스크롤시킨다 (deployment 확장 경로·support-portal
     등급별 응답 목표·service-price 요금 매트릭스·service-grade SLA·개인정보 처리방침).
     즉 이 클래스는 표마다 성격을 따져 붙이며, 일괄 적용하지 말 것.
     display를 바꾸면 표 시맨틱이 사라지므로 마크업에 role을 명시해 두었고,
     숨긴 열 머리글은 [data-label]의 ::before로 셀마다 되붙인다 (라벨이 군더더기인
     본문 열은 data-label을 생략하면 아무것도 붙지 않는다).
     현재 사용처 — --split: 제품 3종 '제품 모델'. --lead는 service-remote '법령 근거'가
     2026-08-10 FAQ 아코디언으로 바뀌면서 직접 사용처가 없어졌으나, 긴 문장이 1열에 오는
     표를 위한 변형이라 재사용 대비로 남긴다.
     기본형은 두 변형이 딛고 서는 토대이므로 직접 사용처가 없어도 유지한다 */
  /* 표 자체의 배경·테두리는 걷어내고 tr로 옮겨, 섹션 배경 위에 흰 카드가 떠 보이게 한다 */
  .tbl--stack{display:block;background:none;border:0;border-radius:0;overflow:visible}
  .tbl--stack thead{display:none}
  .tbl--stack tbody{display:block}
  .tbl--stack tr{display:block;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
  .tbl--stack tbody tr+tr{margin-top:12px}
  .tbl--stack th,.tbl--stack td{display:block;padding:0;border-bottom:0;font-size:14px;line-height:1.75;color:var(--ink)}
  .tbl--stack td[data-label]::before{content:attr(data-label);display:block;margin-bottom:3px;font-size:12px;font-weight:700;color:var(--gray)}
  .tbl--stack tr>*+*+*{margin-top:12px}
  /* 1열 = 카드 제목 배지 (사이트 공통 네이비→블루 그라디언트 칩) */
  .tbl--stack tr>:first-child{display:inline-block;margin-bottom:14px;padding:7px 16px;border-radius:40px;background:linear-gradient(150deg,var(--navy),var(--primary));color:#fff;font-size:13px;font-weight:800;letter-spacing:.4px}

  /* --split — 1열 배지와 마지막 열 수치를 카드 머리 한 줄에 나란히 놓고,
     2열 본문을 구분선 아래 전체 폭으로 내린다. DOM 순서가 1→2→3열이므로
     order로 수치를 배지 옆까지 끌어올린다 (제품 3종 '제품 모델') */
  .tbl--stack--split tr{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px}
  .tbl--stack--split tr>:first-child{order:1;margin-bottom:0}
  .tbl--stack--split td:last-child{order:2;margin-top:0;margin-left:auto;display:flex;align-items:baseline;gap:6px;font-size:15px;font-weight:800;color:var(--navy)}
  .tbl--stack--split td:last-child::before{display:inline;margin:0;font-size:12px;font-weight:700;color:var(--gray)}
  .tbl--stack--split td:nth-child(2){order:3;flex:1 0 100%;display:flex;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);color:var(--gray)}
  .tbl--stack--split td:nth-child(2)::before{flex:0 0 auto;display:inline;margin:0;font-size:12px;font-weight:700;color:var(--ink);line-height:1.75}

  /* --lead — 1열이 긴 문장(법령 조문명 등)이라 배지에 담기지 않는 표 */
  .tbl--stack--lead tr>:first-child{display:block;margin-bottom:12px;padding:0 0 12px;border-radius:0;border-bottom:1px solid var(--line);background:none;color:var(--navy);font-size:14.5px;line-height:1.65;letter-spacing:0}

  /* 배경 워터마크는 우측 여백을 가로지르는 연출이라 1열 전환 후에는 놓일 자리가 없다.
     72px 그대로면 여러 줄로 접히며 다음 섹션을 덮고, 줄여도 히어로 .eng와 같은
     문자열이 중복될 뿐이다 → 모바일에서는 숨긴다 */
  .ov-flow{display:none}

  /* FAQ 아코디언 */
  .faq-list{margin-top:28px;}
  .faq-q{padding:18px 18px;gap:12px;}
  .faq-q .faq-qtxt{font-size:15.5px;}
  .faq-a{padding:0 18px 20px;font-size:14.5px;}
}