/* 메일브레이커 상품소개 (2026.10.21 리뉴얼 최종본)
   1부: 상품소개 공통 틀 — G-Cloud 공공메일 최종본(gcloud.css 20261015a)과 같은 규칙 (하늘색 강조만 MB 초록으로)
   2부: 메일브레이커 전용 — 색·히어로 관리자 화면 목업·특장점 그림·주요기능 목업·구성·도입 */

/* G-Cloud 공공메일 상품소개 페이지 전용 스타일 — 2026.10 리뉴얼 (최종본)
   써팀 상품소개(sirteam.css)와 같은 틀: 색은 변수로만, #cp 안으로만 한정, PC 휠 한 번에 한 구역
   구역: 히어로 → 특장점 → 주요기능 → 서비스 구성 → 요금제 → 공지사항 → 고객사(+문의 띠) */

:root{
  --primary:#00ad7c; --primary-h:#1583c2; --primary-t:#1173a8;   /* G-Cloud 포인트색 = 로고·메인 카드 하늘색 #00ad7c, --primary-t = 흰 바탕 위 강조 글자 */
  --weak-bg:#e8f5fc; --weak-fg:#0f6b9c;
  --gc-navy:#006b4c; --gc-sky:#5fe0b5;                               /* 제품소개서 남색 / 어두운 바탕 위 강조 글자 */
  --hero-bg:#0b1322;   /* 20261105: 회사소개와 같은 네이비(가이드) */
  --title:#111; --fg:#191f28; --body:#4e5968; --muted:#8b95a1;
  --canvas:#fff; --soft:#f7f8fa; --surface:#f2f4f6; --card:#fff; --border:#e5e8eb;
  --hero-g:linear-gradient(100deg,#fff 0%,#fff 42%,#f1f9fd 72%,#e6f4fb 100%);
  --btn:var(--fg); --btn-h:#333d4b;                                   /* 버튼 색: 검정 (써팀과 같음, 가이드 1-7) */
  --shadow:0 1px 2px rgba(17,24,39,.05),0 6px 18px rgba(17,24,39,.06);
  --r:8px; --rc:16px;
  --font:"Pretendard Variable","Pretendard","Noto Sans KR","Malgun Gothic",sans-serif;
}

/* ===== 공통 CSS(basic.css · supportBasic.css)와 함께 쓰기 위한 보정 ===== */
:where(#cp),:where(#cp) *,:where(#cp) *::before,:where(#cp) *::after{box-sizing:border-box}
#cp{background:var(--canvas);text-align:left;color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.6;word-break:keep-all;-webkit-font-smoothing:antialiased;overflow-x:clip}
:where(#cp) a{display:inline;width:auto;height:auto;color:inherit;text-decoration:none}
:where(#cp) img{max-width:100%;display:block}
:where(#cp) h1{position:relative;left:auto;top:auto;z-index:auto}
:where(#cp) :is(h1,h2,h3,h4,p,ul,ol){margin:0;padding:0;font-size:inherit;font-weight:inherit}
:where(#cp) :is(ul,ol){list-style:none}
:where(#cp) button{font:inherit;color:inherit}
#cp :is(li,p,h2,h3,div){text-align:left}                 /* supportBasic.css 의 가운데 정렬 무력화 */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
html{scroll-behavior:auto}
#header{position:sticky!important;top:0;z-index:1000;transition:transform .35s cubic-bezier(.2,.7,.2,1);margin-bottom:0!important}
#header.hd-up{transform:translateY(-100%)}
.nw{white-space:nowrap}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}

.w{max-width:1280px;margin:0 auto;padding-inline:40px}
@media(max-width:700px){.w{padding-inline:16px}}

/* ===== 가로 구역 메뉴 (옛 #lnb 자리) ===== */
.lnb{position:sticky;top:0;z-index:40;background:var(--canvas);border-bottom:1px solid var(--border);transition:top .35s cubic-bezier(.2,.7,.2,1)}
body.hd-shown #cp .lnb{top:var(--hd-h,56px)}
.lnb-in{max-width:1280px;margin:0 auto;padding-inline:40px;display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px}
.lnb-name{font-size:16px;font-weight:700;color:var(--fg);white-space:nowrap}
.lnb-anc{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.lnb-anc::-webkit-scrollbar{display:none}
#cp .lnb-anc a{display:inline-block;padding:8px 12px;border-radius:var(--r);font-size:15px;font-weight:500;color:var(--muted);white-space:nowrap;transition:color .2s,background .2s}
#cp .lnb-anc a:hover{color:var(--fg);background:var(--surface)}
#cp .lnb-anc a.on{color:var(--primary-t);font-weight:700}
@media(max-width:860px){.lnb-in{padding-inline:16px;height:52px}.lnb-name{display:none}.lnb-anc{margin-inline:-6px}}

/* 세로 구역 메뉴: 1600px 이상, 히어로를 지나면 나타남 */
.snav{display:none}
@media(min-width:1600px){
  .lnb{display:none}
  .snav{display:block;position:fixed;z-index:30;top:50%;left:max(24px,calc((100vw - 1280px)/2 - 150px));transform:translate(-8px,-50%);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
  .snav.show{opacity:1;transform:translate(0,-50%);pointer-events:auto}
  .snav ol{padding-left:14px!important;border-left:2px solid var(--border);display:flex;flex-direction:column;gap:4px}
  #cp .snav a{position:relative;display:block;padding:7px 0;font-size:14px;font-weight:500;color:var(--muted);white-space:nowrap;transition:color .2s}
  #cp .snav a::before{content:"";position:absolute;left:-16px;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--primary);transform:scaleY(0);transition:transform .25s}
  #cp .snav a:hover{color:var(--fg)}
  #cp .snav a.on{color:var(--primary-t);font-weight:700}
  #cp .snav a.on::before{transform:scaleY(1)}
}

/* ===== 구역 공통: 작은 영문 라벨 → 큰 한글 제목 ===== */
.sx{position:relative;padding-block:120px}
#cp #clients{padding-bottom:0}             /* 고객사 아래는 문의 띠가 바로 붙음 */
.sx-lab{font-size:16px;font-weight:500;color:var(--body);letter-spacing:-.02em}
.sx-t{margin-top:10px!important;font-size:40px;font-weight:700;line-height:1.35;letter-spacing:-.02em;color:var(--title)}
.sx-d{margin-top:16px!important;font-size:18px;line-height:1.65;color:var(--body);max-width:760px}
.sx-hd{margin-bottom:48px}
.m-br{display:none}                       /* 모바일에서만 줄바꿈 (앞뒤 띄어쓰기는 그대로 둠) */
@media(max-width:700px){.m-br{display:inline}}
.sx-hd.row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sx.soft{background:linear-gradient(180deg,var(--canvas) 0,var(--soft) 140px,var(--soft) calc(100% - 140px),var(--canvas) 100%)}
@media(max-width:700px){
  .sx{padding-block:72px}#cp #clients{padding-bottom:0}
  .sx-t{font-size:26px}
  .sx-d{font-size:16px;margin-top:12px!important}
  .sx-hd{margin-bottom:32px}
}

/* 버튼 */
.bt{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 24px;border-radius:var(--r);font-size:16px;font-weight:600;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
#cp .bt-main{background:var(--btn);color:#fff}
#cp .bt-main:hover{background:var(--btn-h)}
#cp .bt-line{border:1px solid var(--border);background:var(--card);color:var(--fg)}
#cp .bt-line:hover{border-color:#cfd6dd;background:var(--soft)}
.bt .ext{width:9px;height:9px;border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:translateY(-1px) rotate(45deg)}
.more{display:inline-flex!important;align-items:center;gap:8px;font-size:16px;font-weight:600;color:var(--fg)!important;white-space:nowrap}
.more::after{content:"";width:7px;height:7px;border-top:1.8px solid currentColor;border-right:1.8px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.more:hover::after{transform:translateX(3px) rotate(45deg)}
@media(max-width:700px){.bt{height:48px;padding:0 18px;font-size:15px}}


/* ===== 1-B. 히어로 B안: 어두운 목업형 (피그마 1315:2501) =====
   검정 바탕 + 왼쪽 아래 주황 빛, 가운데 큰 문장 2줄, 버튼 2개, 기기 목업 + 메신저 말풍선, 아래로 내려가는 선(스크롤 안내) */
.ph-hero{background:var(--hero-bg)}
.hv-b{position:relative;overflow:hidden;background:var(--hero-bg);color:#fff}
.hv-b::before{content:"";position:absolute;left:-14%;top:30%;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(0,173,124,.45) 0%,rgba(22,53,118,.35) 32%,rgba(22,53,118,.1) 56%,rgba(0,0,0,0) 70%);pointer-events:none}
.hv-b::after{content:"";position:absolute;right:-18%;bottom:-40%;width:56%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(0,173,124,.18) 0%,rgba(0,0,0,0) 66%);pointer-events:none}
.hb-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding-block:88px 120px;text-align:center}
#cp .hb-t{font-size:56px;line-height:1.4;letter-spacing:-.015em;color:#fff;text-align:center}
.hb-l1{font-weight:300}
.hb-l2{font-weight:700}
.hb-t em{font-style:normal;color:var(--gc-sky)}
.hb-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:36px}
#cp .hv-b .hb-main{background:#fff;color:#111}
#cp .hv-b .hb-main:hover{background:#e9e9e9}
#cp .hv-b .hb-line{border-color:rgba(255,255,255,.45);color:#fff}
#cp .hv-b .hb-line:hover{border-color:#fff}
.hb-vis{position:relative;width:min(1100px,88vw);margin-top:44px}
.hb-dev{width:100%;height:auto}
.hb-bub{position:absolute;left:18.8%;top:6.92%;width:40.98%;height:auto;filter:drop-shadow(0 10px 24px rgba(0,0,0,.35))}
.hb-fade{position:absolute;left:0;right:0;bottom:0;z-index:1;height:200px;background:linear-gradient(180deg,rgba(10,22,48,0),rgba(10,22,48,.85) 55%,var(--hero-bg) 80%);pointer-events:none}
.hb-cue{position:absolute;left:50%;bottom:22px;z-index:2;display:flex!important;flex-direction:column;align-items:center;gap:10px;transform:translateX(-50%);color:rgba(255,255,255,.62);transition:opacity .5s,color .2s}
.hb-cue:hover{color:#fff}
.hb-cue span{font-size:12px;font-weight:500;letter-spacing:.12em;line-height:1}     /* 회사소개 'Scroll' 안내와 같은 글자 */
.hb-cue i{position:relative;display:block;width:1px;height:64px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.7));transform-origin:top;animation:cueLine 2.4s cubic-bezier(.6,0,.3,1) infinite}
.hb-cue::after{content:"";width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.6)}
html.cue-off .hb-cue{opacity:0;pointer-events:none}
@keyframes cueLine{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
/* 등장: 문장 → 버튼 → 기기(아래에서 올라옴) → 말풍선(살짝 커지며) 순서, 말풍선은 이후 아주 천천히 떠 있음 */
.hb-t,.hb-btns,.hb-dev,.hb-bub{animation:hbUp 1s cubic-bezier(.2,.7,.2,1) both}
.hb-btns{animation-delay:.25s}
.hb-dev{animation-duration:1.4s;animation-delay:.45s}
.gm-win{animation:hbUp 1.4s cubic-bezier(.2,.7,.2,1) .45s both}
.hb-bub{animation:hbPop .9s cubic-bezier(.2,.7,.2,1) 1.2s both,hbFloat 7s ease-in-out 2.1s infinite}
@keyframes hbUp{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes hbPop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes hbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.hb-t,.hb-btns,.hb-dev,.hb-bub,.hb-cue i{animation:none}}
@media(max-width:1024px){#cp .hb-t{font-size:40px}.hb-in{padding-block:64px 110px}}
@media(max-width:700px){
  #cp .hb-t{font-size:clamp(26px,7.4vw,32px)}
  .hb-in{padding-block:48px 96px}
  .hb-btns{gap:8px;margin-top:24px}
  .hv-b .hb{height:46px;padding:0 20px;font-size:15px}
  .hb-vis{width:112%;margin-top:28px}
  .hv-b::before{left:-40%;top:40%;width:120%}
  .hb-cue{bottom:14px;gap:8px}.hb-cue i{height:40px}
}
/* PC 휠 이동 화면: 한 화면 안에 문장~기기까지 (기기 크기를 화면 높이에 맞춤) */
html.snap-on .ph-hero{display:block}
html.snap-on .hv-b{height:calc(100vh - var(--snap0,140px));min-height:620px}          /* 한 화면 높이 고정, 기기 아래쪽은 검정으로 서서히 사라짐 */
html.snap-on .hb-in{padding-block:clamp(28px,6vh,72px) 0}
html.snap-on .hb-btns{margin-top:clamp(20px,3.4vh,36px)}
html.snap-on .hb-vis{margin-top:clamp(24px,4.4vh,48px);width:min(1100px,88vw,calc((100vh - var(--snap0,140px) - 300px) * 1.9))}
/* 히어로 버튼 */
.hb{display:inline-flex!important;align-items:center;justify-content:center;gap:4px;height:52px;padding:0 40px;border-radius:100px;font-size:18px;line-height:1;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
#cp .hb-main{background:#222;color:#fff;font-weight:700}
#cp .hb-main:hover{background:#3a3a3a}
#cp .hb-line{border:1px solid #a3a3a3;color:#222;font-weight:500}
#cp .hb-line:hover{border-color:#222}

.sub-link{margin-top:16px!important;font-size:14px}
#cp .sub-link a{display:inline-flex;align-items:center;gap:4px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;transition:color .2s}
#cp .sub-link a::after{content:"↗";font-size:12px;text-decoration:none;display:inline-block}
#cp .sub-link a:hover{color:var(--fg)}
#func .sub-link{margin-top:20px!important;text-align:right!important}
/* 가운데 정렬 구역 (영상보기): 제목·영상·링크 모두 가운데 */
.sx-c .sx-hd,.sx-c .sub-link{text-align:center!important}
.sx-c .sx-hd p,.sx-c .sx-hd h2{text-align:center!important}
@media(max-width:700px){.vd{border-radius:12px}.vd-btn{width:60px;height:60px;margin:-30px 0 0 -30px}.vd-btn svg{width:22px;height:22px}}

/* ===== 1. 히어로 덧붙임: 인증 칩 + 목업 자리 ===== */
.hb-chips{display:flex;justify-content:center;gap:8px;margin-bottom:22px!important}
.hb-ck{width:15px;height:15px;margin-right:6px;flex:none}
.hb-chips span{display:inline-flex;align-items:center;height:30px;padding:0 14px;border:1px solid rgba(95,224,181,.45);border-radius:100px;background:rgba(0,173,124,.12);color:var(--gc-sky);font-size:13px;font-weight:600;letter-spacing:.01em}
/* 히어로 목업 (v20): 실제 G-Cloud 공공메일 화면(분할보기)을 HTML 로 그림. 주소는 흐림, 로그인 일시·IP 는 가짜(203.0.113.x = 문서 예시용 주소)
   단위: .gm-win·.gm-c 의 1em = 목업 폭의 1/142 (디자인 1420px 기준 10px), .gm-ui 안의 1em = 실제 화면 10px (1600px 화면을 72.5%로 줄인 비율) */
.gm{position:relative;container-type:inline-size;aspect-ratio:1420/620;text-align:left}
.gm *{box-sizing:border-box}
.gm svg{flex:none;fill:none;stroke:currentColor}
:where(.gm) :is(p,ul){margin:0;padding:0;list-style:none}   /* :where = 우선순위 0, 아래 각 칸의 여백을 덮어쓰지 않게 */
.gm-win{position:absolute;left:9.155%;top:3%;width:81.69%;height:97%;overflow:hidden;font-size:calc(100cqw/142);border-radius:1.2em 1.2em 0 0;box-shadow:0 3em 8em rgba(0,0,0,.5),0 0 0 .1em rgba(255,255,255,.08)}
.gm-ui{display:flex;flex-direction:column;width:160em;height:83em;font-size:.725em;background:#fff;color:#1f2937;line-height:1.35;letter-spacing:-.01em}
/* 상단 바 */
.gm-top{flex:none;display:flex;align-items:center;gap:5em;height:5.4em;padding:0 2.4em 0 2.2em;background:#4b72d9;color:#fff}
.gm-brand{width:18em;font-size:1.9em;font-weight:400;white-space:nowrap}
.gm-search{display:flex;align-items:center;gap:.8em;width:33.4em;height:3em;padding:0 .8em;border-radius:.2em;background:#fff;color:#6b7280;font-size:1.3em}
.gm-search svg{width:1.3em;height:1.3em;stroke:#3a5bb8;stroke-width:2.4}.gm-search em{margin-left:auto;font-style:normal;font-size:.92em;color:#4b5563}
.gm-log{display:flex;flex-direction:column;margin-left:auto;font-size:1.1em;line-height:1.35;white-space:nowrap}
.gm-ico{display:flex;align-items:center;gap:3em}.gm-ico svg{width:2.6em;height:2.6em;stroke-width:1.6}.gm-ico .dots{font-style:normal;font-size:1.8em;letter-spacing:.1em}
.gm-body{flex:1;min-height:0;display:flex}
/* 왼쪽 레일 */
.gm-rail{flex:none;display:flex;flex-direction:column;width:4.4em;background:#2b3245;color:#c9cfdc}
.gm-rail span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.36em;height:5.64em;font-size:1.1em}
.gm-rail span svg{width:2em;height:2em;stroke-width:1.6}
.gm-rail .mn{height:4.6em;color:#fff}.gm-rail .mn svg{stroke-width:2}
.gm-rail .on{background:#4b72d9;color:#fff}
/* 사이드바 */
.gm-nav{flex:none;width:23.4em;border-right:.1em solid #4b72d9;font-size:1em}
.gm-nav .fill{fill:#a3aab8;stroke:none}.gm-nav .w{fill:none;stroke:#fff;stroke-width:1.6}
.gm-write{display:flex;padding:1em .8em 0}
.gm-write b,.gm-write span{flex:1;display:flex;align-items:center;justify-content:center;gap:.5em;height:2.8em;font-size:1.3em;font-weight:700}
.gm-write b{background:#4b72d9;color:#fff}.gm-write b svg{width:.95em;height:.95em;stroke-width:2}.gm-write span{background:#eceef2}
.gm-quick{display:flex;justify-content:space-around;padding:1.6em .6em 1em}
.gm-quick span{display:flex;flex-direction:column;align-items:center;gap:.3em;font-size:1.3em}
.gm-quick svg{width:1.2em;height:1.15em;stroke:#8e96a8;stroke-width:2.2}.gm-quick svg.fill{fill:#8e96a8}
.gm-quick b{font-size:1.3em;line-height:1;color:#4b72d9}.gm-quick b.st{color:#f5b301;font-weight:400}
.gm-recent{display:flex;align-items:center;gap:.6em;margin:0 .6em;padding:.6em .5em;border-block:.1em solid #edf0f4;font-size:1.3em}
.gm-recent svg{width:1.15em;height:1.15em}.gm-recent i{margin-left:auto;width:1.1em;height:1.1em;border:.08em solid #c7ccd6;font-style:normal;font-size:.7em;line-height:1;text-align:center;color:#6b7280}
.gm-fd{padding:.8em .8em 0!important}
.gm-fd li{display:flex;align-items:center;gap:.72em;height:2.58em;padding:0 .58em;font-size:1.4em}
.gm-fd li svg{width:1.28em;height:1.14em}.gm-fd li>svg:not(.fill){stroke:#a3aab8;stroke-width:2.4}
.gm-fd li.on{background:#eef3ff;color:#3a5bb8;font-weight:700}.gm-fd li.on svg{fill:#4b72d9}
.gm-fd em{font-style:normal;font-size:.93em;color:#4b72d9}
.gm-fd small{margin-left:auto;padding:.05em .4em;border:.1em solid #dfe3ea;font-size:.72em;color:#6b7280}
.gm-my{display:flex;flex-direction:column;gap:2.2em;padding:2.4em 1.6em 0 3.4em!important}
.gm-my li{display:flex;align-items:center;font-size:1.4em}.gm-my i{margin-left:auto;width:1.6em;height:1.45em;border:.07em solid #dfe3ea;font-style:normal;font-size:.93em;line-height:1.4;text-align:center;color:#6b7280}
/* 툴바 공통 */
.gm-bar{flex:none;display:flex;align-items:center;gap:.8em;height:4em;padding:0 .8em}
.gm-bar>span{display:flex;align-items:center;height:2.6em;padding:0 1em;border:.1em solid #d5d9e0;background:#fff;font-size:1.2em;white-space:nowrap}
.gm-bar>span.grp{padding:0}.gm-bar .grp i{display:flex;align-items:center;height:100%;padding:0 .85em;border-right:.1em solid #eceef2;font-style:normal}.gm-bar .grp i:last-child{border:0}
.gm-bar>span.ck{font-size:1.1em}
.gm-bar>b{font-size:1.3em;color:#4b72d9}.gm-bar>b small{font-size:1em;font-weight:400;color:#6b7280}
.gm-bar .hk{gap:.5em}.gm-bar .hk i{width:.75em;height:.92em;border-radius:.35em .35em .1em .1em;background:#e0302f}
/* 목록 (분할보기 왼쪽) */
.gm-list{flex:none;display:flex;flex-direction:column;width:52em;border-right:.1em solid #d5d9e0}
.gm-list>.gm-bar{border-bottom:.1em solid #e3e6ec;background:#f7f8fa}
.gm-tab{flex:none;height:4.4em;border-bottom:.1em solid #e3e6ec;background:#f7f8fa}
.gm-tab span{display:flex;align-items:center;width:15.85em;height:3.3em;padding-left:1.54em;border-right:.077em solid #e3e6ec;background:#fff;font-size:1.3em;color:#4b72d9}
.gm-sub{flex:none;display:flex;align-items:flex-end;height:3.6em;padding-left:.6em;border-bottom:.1em solid #e3e6ec}
.gm-sub span{width:6.6em;padding-bottom:.6em;font-size:1.3em;text-align:center;color:#6b7280}
.gm-sub span.on{width:4.9em;padding-bottom:.45em;border-bottom:.15em solid #4b72d9;color:#4b72d9}
.gm-rows li{display:flex;align-items:flex-start;gap:1em;height:6.4em;padding:1.4em 1.2em 0 .8em;border-bottom:.1em solid #e8eaef;border-left:.3em solid transparent}
.gm-rows i{flex:none;font-style:normal}
.gm-rows .ck{width:1.3em;height:1.3em;border:.1em solid #b9bfca;border-radius:.2em}
.gm-rows .st{font-size:1.7em;line-height:.8;color:#9aa1ad}
.gm-rows .env{width:1.7em;height:1.2em;margin-top:.1em;border:.1em solid #b9bfca;border-radius:.1em}
.gm-rows li.u .env{background:#f7c35a;border-color:#e3a83a}
.gm-rows p{flex:1;min-width:0;display:flex;flex-direction:column;gap:.6em;margin-left:.2em}
.gm-rows .nm,.gm-rows .sj{display:flex;align-items:center;gap:.5em;white-space:nowrap;overflow:hidden;font-size:1.3em}
.gm-rows .nm b{font-weight:400}.gm-rows li.u b,.gm-rows li.u .sj{font-weight:700}
.gm-rows .nm em{font-style:normal;font-size:.92em;color:#8a93a3;filter:blur(.27em)}
.gm-rows .clip{width:.92em;height:.92em;stroke:#6b7280;stroke-width:2.4}
.gm-rows mark{flex:none;padding:.05em .5em;border-radius:.15em;background:#e0302f;color:#fff;font-size:.85em;font-weight:700}
.gm-rows mark.tg{background:#12a3e8;font-weight:400}
.gm-rows li.sel{background:#f3f6fe;border-left-color:#4b72d9}
.gm-rows li.warn{background:#fff4f4;border-left-color:#e0302f}.gm-rows li.warn b,.gm-rows li.warn .sj{color:#d92d2d}
/* 본문 (분할보기 오른쪽) */
.gm-read{flex:1;min-width:0;display:flex;flex-direction:column;padding:0 1em 1em;background:#f4f5f7}
.gm-read>.gm-bar{gap:.6em;padding:0 .4em}
.gm-doc{flex:1;min-height:0;display:flex;flex-direction:column;gap:1.4em;padding:2.2em 2.6em;border:.1em solid #e3e6ec;background:#fff}
.gm-subj{display:flex;align-items:flex-start;gap:.5em;font-size:1.9em;font-weight:700;color:#111827}
.gm-subj>i{font-style:normal;font-weight:400;color:#9aa1ad}
.gm-subj span{display:flex;gap:.3em;margin-left:auto}.gm-subj span i{display:grid;place-items:center;width:1.26em;height:1.26em;border:.05em solid #d5d9e0;font-style:normal;font-weight:400;font-size:.6em;color:#4b5563}.gm-subj span svg{width:1em;height:1em;stroke:#4b5563;stroke-width:2}
.gm-date{font-size:1.2em;text-align:right;color:#374151}
.gm-from,.gm-to{display:flex;align-items:center;gap:.92em;font-size:1.3em;white-space:nowrap}
.gm-from{padding-bottom:.92em;border-bottom:.08em solid #edf0f4}
.gm-from .k,.gm-to .k{width:4.6em;color:#6b7280}
.gm-from em,.gm-to em{font-style:normal;color:#6b7280;filter:blur(.27em)}
.gm-from a{color:#4b72d9}.gm-from a.r{color:#e0302f}.gm-from .ip{margin-left:auto;color:#374151}
.gm .g{color:#6b7280}
.gm-att{display:flex;flex-direction:column;gap:1em;padding:1.2em 1.4em;border:.1em solid #e3e6ec;background:#fafbfc}
.gm-att p{display:flex;align-items:center;gap:.6em;font-size:1.3em}
.gm-att .sv{margin-left:auto;font-size:.92em;color:#4b5563}
.gm-att .f{padding:.05em .4em;border-radius:.15em;background:#e0483e;color:#fff;font-size:.77em;font-weight:700}
.gm-att .ai{position:relative;display:flex;align-items:center;gap:.3em;height:1.7em;margin-left:.4em;padding:0 .6em;border-radius:.25em;background:#efeafd;color:#5b45d6;font-size:.92em;font-weight:700}
.gm-att .ai i{padding:0 .35em;border-radius:.25em;background:#6d5ce0;color:#fff;font-style:normal;font-size:.75em}
.gm-txt{font-size:1.4em}
.gm-lines{display:flex;flex-direction:column;gap:1.2em}.gm-lines i{display:block;height:.9em;border-radius:.45em;background:#edf0f4}
.gm-reply{margin-top:auto!important;display:flex;align-items:center;height:4.9em;padding:0 1.4em;border:.077em solid #e3e6ec;font-size:1.3em;color:#9aa1ad}
/* 떠 있는 카드 2장: 바깥(.gm-c) = 마우스 따라 살짝 움직임, 안쪽 = 등장·둥둥 */
.gm-c{position:absolute;z-index:2;font-size:calc(100cqw/142);transform:translate3d(calc(var(--mx,0) * var(--k) * 1em),calc(var(--my,0) * var(--k) * 1em),0);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.gm-c1{--k:1.2;left:50.3em;top:11.6em;width:28.2em}
.gm-c2{--k:-1.6;left:96em;top:27em;width:39.8em}
.gm-hack{overflow:hidden;border:.1em solid rgba(255,255,255,.1);border-radius:1.4em;background:rgba(28,32,44,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 3em 6em rgba(0,0,0,.55);color:#fff;animation:hbPop .9s cubic-bezier(.2,.7,.2,1) 1.1s both,hbFloat 7s ease-in-out 2s infinite}
.gm-hack-h{display:flex;align-items:center;gap:.8em;padding:1.2em 1.4em;border-bottom:.1em solid rgba(255,255,255,.08);font-size:1em}
.gm-hack-h b{font-size:1.3em;font-weight:700}
.gm-hack-h span{display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:.6em;background:#e23d3d}.gm-hack-h svg{width:1.2em;height:1.2em;stroke:#fff;stroke-width:2.4}
.gm-hack-b{display:flex;flex-direction:column;gap:1em;padding:1.4em}
.gm-hack-s{font-size:1.1em;line-height:1.4;color:#c7cddb}
.gm-hack-m{display:flex;align-items:center;gap:1em;padding:1em;border:.1em dashed rgba(255,255,255,.22);border-radius:.8em}
.gm-hack-m svg{width:1.8em;height:1.8em;stroke:#7fa0ff;stroke-width:2}
.gm-hack-m span{flex:1;display:flex;flex-direction:column;gap:.6em}.gm-hack-m i{display:block;height:.6em;width:90%;border-radius:.3em;background:rgba(255,255,255,.7)}.gm-hack-m i+i{height:.5em;width:55%;background:rgba(255,255,255,.3)}
.gm-hack-btn{display:flex;gap:.6em}
.gm-hack-btn span,.gm-hack-btn b{flex:1;display:grid;place-items:center;height:2.8em;border-radius:.6em;font-size:1em}
.gm-hack-btn span i,.gm-hack-btn b i{font-style:normal;font-size:1.1em}
.gm-hack-btn span{background:rgba(255,255,255,.08);color:#c7cddb}
.gm-hack-btn b{background:#e23d3d;animation:gmGlow 2.6s ease-in-out 2.4s infinite}
.gm-ai{padding:2em 2em 2.2em;border-radius:1.2em;background:#fff;box-shadow:0 3em 6em rgba(0,0,0,.45);color:#111827;animation:hbPop .9s cubic-bezier(.2,.7,.2,1) 1.5s both,hbFloat 8.5s ease-in-out 2.4s infinite}
.gm-ai-h{display:flex;align-items:center;gap:.6em;font-size:1.4em;font-weight:700}
.gm-ai-h span{padding:.15em .4em;border-radius:.3em;background:#6d5ce0;color:#fff;font-size:.65em}
.gm-ai-t{margin-top:1.1em!important;font-size:1.1em;font-weight:700;color:#374151}
.gm-ai-s{margin-top:.6em!important;font-size:1.3em;line-height:1.6;color:#4b5563}
.gm-ai-s span{display:inline-block;clip-path:inset(0 0 0 0);animation:gmType 1.4s steps(28,end) 2.2s both}
.gm-ai .gm-lines{gap:.9em;margin-top:1em}
.gm-ai .gm-lines i{height:.7em;background:linear-gradient(90deg,#eceff4 0%,#eceff4 35%,#f8f9fb 50%,#eceff4 65%,#eceff4 100%);background-size:300% 100%;animation:gmShine 2.6s ease-in-out 3.4s infinite}
/* 화면 안 작은 움직임: 사칭 메일 줄이 한 번 깜빡 → 해킹메일 신고 창, 첨부 'AI 요약' 버튼이 한 번 울림 → 요약 카드 */
.gm-rows li.warn{animation:gmFlag 1s ease-in-out .9s 2}
.gm-att .ai::after{content:"";position:absolute;inset:-.25em;border:.15em solid #6d5ce0;border-radius:.4em;opacity:0;animation:gmRing 1.2s ease-out 1.3s 2}
@keyframes gmType{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes gmShine{0%{background-position:100% 0}100%{background-position:0 0}}
@keyframes gmGlow{0%,100%{box-shadow:0 0 0 0 rgba(226,61,61,0)}50%{box-shadow:0 0 0 .5em rgba(226,61,61,.22)}}
@keyframes gmFlag{0%,100%{background:#fff4f4}50%{background:#ffd9d9}}
@keyframes gmRing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
@media(prefers-reduced-motion:reduce){.gm-win,.gm-hack,.gm-ai,.gm-ai-s span,.gm-ai .gm-lines i,.gm-hack-btn b,.gm-rows li.warn,.gm-att .ai::after{animation:none}.gm-c{transition:none;transform:none}}
@media(max-width:700px){.gm-c1{left:44em;top:8em}.gm-c2{left:92em;top:28em}}
@media(max-width:700px){.hb-chips{gap:6px;margin-bottom:14px!important}.hb-chips span{height:26px;padding:0 10px;font-size:12px}}

/* ===== 2. 특장점: 4가지 카드 2×2 (라벨 · 제목 · 큰 숫자 · 한 줄 · 근거 4줄) — 글자를 많이 남김(SEO·AEO) ===== */
.sx-t .ac{font-style:normal;color:var(--primary-t)}
.gk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.gk{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lab lab" "t stat" "lead lead" "ul ul";column-gap:24px;align-content:start;padding:34px 36px 34px;border:1px solid var(--border);border-radius:24px;background:var(--card)}
.gk-lab{grid-area:lab;font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--primary-t)}
.gk h3{grid-area:t;margin-top:8px!important;font-size:24px;font-weight:700;line-height:1.4;letter-spacing:-.02em;color:var(--title)}
.gk-stat{grid-area:stat;align-self:end;text-align:right!important}
.gk-num{display:block;font-size:30px;font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--primary-t);white-space:nowrap}
.gk-stat span{display:block;margin-top:4px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.gk-lead{grid-area:lead;margin-top:18px!important;padding-top:18px!important;border-top:1px solid var(--border);font-size:16px;font-weight:600;line-height:1.6;color:var(--fg)}
.gk-ul{grid-area:ul;margin-top:12px!important;display:flex;flex-direction:column;gap:7px}
.gk-ul li{position:relative;padding-left:16px;font-size:15px;line-height:1.6;color:var(--body)}
.gk-ul li::before{content:"";position:absolute;left:2px;top:.68em;width:5px;height:5px;border-radius:50%;background:var(--primary)}
@media(max-width:1100px){.gk-grid{grid-template-columns:1fr}}
@media(max-width:700px){.gk-grid{gap:12px}.gk{grid-template-columns:1fr;grid-template-areas:"lab" "t" "stat" "lead" "ul";padding:24px 20px}.gk h3{font-size:20px}.gk-stat{text-align:left!important;margin-top:14px}.gk-num{font-size:26px}.gk-lead{font-size:15px;margin-top:14px!important;padding-top:14px!important}.gk-ul li{font-size:14px}}

/* ===== 3. 도입이 필요한 기관: 상황 카드 3장 (번호·분류 → 질문 → 설명 → 'G-Cloud 공공메일은' 해결 상자) + 구축형/클라우드 띠 ===== */
.nd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:none}
.nd{display:flex;flex-direction:column;padding:30px 30px 28px;border:1px solid var(--border);border-radius:24px;background:var(--card)}
.nd-tag{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--primary-t)}
.nd-tag span{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--weak-bg);color:var(--weak-fg);font-size:13px;font-weight:800}
.nd h3{margin-top:18px!important;font-size:21px;font-weight:700;line-height:1.45;letter-spacing:-.02em;color:var(--title)}
.nd-d{margin-top:12px!important;font-size:15px;line-height:1.65;color:var(--body)}
.nd-sol{margin-top:auto;padding:18px 20px;border-radius:16px;background:var(--weak-bg)}
.nd-d+.nd-sol{margin-top:20px}
.nd-sol b{display:block;font-size:14px;font-weight:700;color:var(--weak-fg)}
.nd-sol p{margin-top:6px!important;font-size:15px;line-height:1.6;color:var(--fg)}
.nd-band{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-top:20px;padding:26px 32px;border-radius:20px;background:var(--soft);border:1px solid var(--border)}
.nd-band h3{font-size:19px;font-weight:700;color:var(--title)}
.nd-band p{margin-top:6px!important;font-size:15px;line-height:1.6;color:var(--body);max-width:780px}
#cp .nd-go{flex:none;display:inline-flex;align-items:center;gap:6px;height:46px;padding:0 22px;border:1px solid var(--fg);border-radius:100px;background:var(--card);font-size:15px;font-weight:700;color:var(--fg);white-space:nowrap;transition:background .2s,color .2s}
@media(hover:hover) and (pointer:fine){#cp .nd-go:hover{background:var(--fg);color:#fff}}
@media(max-width:1024px){.nd-grid{grid-template-columns:1fr;gap:12px}.nd h3 br{display:none}.nd-band{flex-direction:column;align-items:flex-start;gap:16px}}
@media(max-width:700px){.nd{padding:22px 20px}.nd h3{font-size:18px;margin-top:14px!important}.nd-d,.nd-sol p{font-size:14px}.nd-sol{padding:14px 16px}.nd-band{padding:20px}.nd-band h3{font-size:17px}.nd-band p{font-size:14px}#cp .nd-go{height:42px;font-size:14px}}

/* ===== 3. 주요기능: 화면 + 설명 4줄 (지그재그) ===== */
.gf-list{display:flex;flex-direction:column;gap:40px}
.gf{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center}
.gf:nth-child(even) .gf-shot{order:2}
.gf-shot{position:relative;aspect-ratio:16/10;border-radius:20px;background:linear-gradient(135deg,#dff0fa,#eef3fb);padding:6%;container-type:inline-size}
/* 작은 화면 목업 (HTML): 1em = 목업 폭의 1/60 */
.ms{height:100%;display:flex;flex-direction:column;font-size:calc(100cqw/56);border-radius:1em;overflow:hidden;background:#fff;box-shadow:0 1.2em 3em rgba(22,53,118,.18);color:#333d4b;text-align:left}
.ms *{box-sizing:border-box}
.ms-top{flex:none;display:flex;align-items:center;gap:.6em;height:3.2em;padding:0 1.4em;background:var(--gc-navy);color:#fff;font-size:1em;font-weight:700}
.ms-top span{margin-right:auto}.ms-top i{width:1.2em;height:1.2em;border-radius:50%;border:.14em solid rgba(255,255,255,.7)}
.ms-body{flex:1;min-height:0;display:flex}
.ms-h4{font-size:1.05em;font-weight:700;color:#191f28}
.ms-p{margin-top:.4em;font-size:.95em;line-height:1.5;color:#4e5968}
.ms-lines{display:flex;flex-direction:column;gap:.7em;margin-top:.9em}.ms-lines i{display:block;height:.7em;border-radius:.35em;background:#eef1f4}
/* 1. AI */
.ms-read{flex:1;min-width:0;padding:1.6em}
.ms-subj{font-size:1.3em;font-weight:700;color:#191f28}
.ms-att{display:flex;align-items:center;gap:.6em;margin-top:1.2em;padding:.8em 1em;border:.08em solid #e5e8eb;border-radius:.6em;font-size:.95em;white-space:nowrap;overflow:hidden}
.ms-att .pdf{padding:.1em .4em;border-radius:.3em;background:#e5484d;color:#fff;font-size:.8em;font-weight:700}
.ms-ai-btn{margin-left:auto;color:#7c6cf0}
.ms-side{flex:none;width:44%;padding:1.4em 1.5em;border-left:.08em solid #e5e8eb;background:#fbfbff}
.ms-side-h{display:flex;align-items:center;gap:.5em;margin-bottom:1em;font-size:1.1em;font-weight:700}
.ms-side .ms-h4{margin-top:.9em;font-size:1em}
.ai{padding:.05em .45em;border-radius:.3em;background:#7c6cf0;color:#fff;font-size:.8em;font-weight:700}
/* 2. 보안 */
.ms-sec{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:1.2em;padding:1.6em}
.ms-sec{align-content:start}
.ms-warn{grid-column:1/-1;display:flex;align-items:center;gap:.6em;padding:.8em 1em;border-radius:.6em;background:#fff1f1;color:#c92a2f;font-size:.95em;font-weight:600}
.ms-warn b{display:grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:#e5484d;color:#fff;font-size:.85em}
.ms-dl{display:grid;grid-template-columns:auto 1fr;align-content:start;gap:.7em 1em;margin:0;padding:1.3em;border:.08em solid #e5e8eb;border-radius:.8em;font-size:.95em}
.ms-dl dt{color:#8b95a1;text-align:right}.ms-dl dd{margin:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-dl.bad{border-color:#ffd0d0;background:#fff8f8}
.tag{display:inline-block;padding:.05em .6em;border-radius:.35em;font-size:.9em}.tag.no{background:#ffe3e3;color:#d92f35}.tag.ok{background:#e6f7f1;color:var(--primary-t)}
/* 3. 검색 */
.ms-form{flex:1;padding:1.4em 1.6em}
.ms-row{display:grid;grid-template-columns:5.2em 1fr;align-items:center;gap:.8em;margin-top:.7em;font-size:.95em}
.ms-row span{color:#6b7684}.ms-row b{height:1.9em;padding:0 .7em;border:.08em solid #d5dbe3;border-radius:.4em;font-weight:500;line-height:1.75em;white-space:nowrap;overflow:hidden}
.ms-row b.chk{border:0;padding:0}.ms-row b.chk::before{content:"✓";display:inline-grid;place-items:center;width:1.2em;height:1.2em;margin-right:.4em;border-radius:.25em;background:var(--primary);color:#fff;font-size:.8em;line-height:1.2em}
.ms-btns{display:flex;justify-content:flex-end;gap:.5em;margin-top:1em}.ms-btns b,.ms-btns span{padding:.3em 1em;border-radius:.4em;font-size:.95em}.ms-btns b{background:var(--gc-navy);color:#fff}.ms-btns span{border:.08em solid #d5dbe3}
.ms-files{flex:none;width:42%;padding:1.4em 1.4em;border-left:.08em solid #e5e8eb;background:#f7f9fc}
.ms-files li,.ms-dept li{display:flex;align-items:center;gap:.6em;margin-top:.8em;padding:.7em .8em;border-radius:.6em;background:#fff;font-size:.9em;white-space:nowrap;overflow:hidden;box-shadow:0 .1em .3em rgba(0,0,0,.05)}
.x{flex:none;padding:.1em .4em;border-radius:.3em;background:#1d8f4e;color:#fff;font-size:.8em;font-weight:700}.x.p{background:#e5484d}.x.h{background:#2f6fd8}
/* 4. 조직 */
.ms-adm{flex:1;padding:1.4em 1.6em}
.ms-perm li{display:flex;justify-content:space-between;align-items:center;margin-top:.75em;padding:.55em .9em;border:.08em solid #eef1f4;border-radius:.5em;font-size:.95em}
.ms-perm i{position:relative;width:2.4em;height:1.3em;border-radius:1em;background:#d5dbe3}.ms-perm i::after{content:"";position:absolute;left:.15em;top:.15em;width:1em;height:1em;border-radius:50%;background:#fff}
.ms-perm i.on{background:var(--primary)}.ms-perm i.on::after{left:auto;right:.15em}
.ms-dept{flex:none;width:48%;padding:1.4em;border-left:.08em solid #e5e8eb;background:#f7f9fc}
.ms-dept li{flex-wrap:wrap;gap:.2em .6em}.ms-dept b{font-weight:700}.ms-dept span{color:#6b7684;font-size:.9em}.ms-dept em{margin-left:auto;font-style:normal;color:var(--primary-t);font-weight:700;font-size:.9em}
/* 기능 목록 24가지 */
.gfl{margin-top:64px;padding:40px 44px;border-radius:24px;background:var(--card);border:1px solid var(--border)}
.gfl-t{font-size:24px;font-weight:700;color:var(--title)}
.gfl-cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:24px}
.gfl-h{display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:2px solid var(--fg);font-size:17px;font-weight:700;color:var(--title)}
.gfl-h span{display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 6px;border-radius:11px;background:var(--weak-bg);color:var(--weak-fg);font-size:12px}
.gfl-col ul{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.gfl-col li{padding:14px 0;border-bottom:1px solid var(--border)}
.gfl-col h4{font-size:15.5px;font-weight:700;color:var(--fg)}
.gfl-col li p{margin-top:4px!important;font-size:14px;line-height:1.55;color:var(--body)}
@media(max-width:1100px){.gfl-cols{grid-template-columns:1fr;gap:32px}}
@media(max-width:700px){.gfl{margin-top:40px;padding:24px 18px;border-radius:18px}.gfl-t{font-size:20px}.gfl-col ul{grid-template-columns:1fr}.gfl-col h4{font-size:15px}.gfl-col li p{font-size:13.5px}}
/* 한눈에 보는 핵심 기능 (v21): 설명은 짧게 한 줄, 두 열의 줄 높이를 같게 (왼쪽 사용자 · 오른쪽 관리자 줄이 나란히) */
.gfl-col ul{grid-auto-rows:1fr}
.gfl-col li{display:flex;flex-direction:column;justify-content:center;min-height:72px}
@media(min-width:861px){.gfl-col li p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
.gf-tx h3{font-size:26px;font-weight:700;line-height:1.4;letter-spacing:-.02em;color:var(--title)}
.gf-opt{display:inline-flex;align-items:center;height:24px;margin-left:6px;padding:0 9px;border-radius:6px;background:var(--fg);color:#fff;font-size:12px;font-weight:600;vertical-align:4px}
.gf-tx>p{margin-top:14px!important;font-size:17px;line-height:1.7;color:var(--body)}
@media(max-width:860px){.gf{grid-template-columns:1fr;gap:20px}.gf:nth-child(even) .gf-shot{order:0}.gf-tx h3{font-size:21px}.gf-tx>p{font-size:15px}}

/* ===== 5. 요금·도입 ===== */
.pr-plans{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pr-card{display:flex;flex-direction:column;padding:32px 34px;border:1px solid var(--border);border-radius:24px;background:var(--card)}
.pr-card.main{border:2px solid var(--primary);box-shadow:0 16px 40px rgba(0,173,124,.12)}
.pr-kind{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--primary-t)}
.pr-card h3{margin-top:8px!important;font-size:22px;font-weight:700;color:var(--title)}
.pr-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin-top:18px!important}
.pr-price b{font-size:36px;font-weight:800;letter-spacing:-.02em;color:var(--primary-t)}
.pr-price span{font-size:15px;color:var(--muted)}
.pr-add{margin-top:6px!important;font-size:15px;color:var(--body)}.pr-add b{color:var(--fg)}
.pr-ul{margin:20px 0 26px!important;padding-top:18px!important;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.pr-ul li{position:relative;padding-left:22px;font-size:15px;line-height:1.6;color:var(--body)}
.pr-ul li::before{content:"";position:absolute;left:2px;top:.42em;width:12px;height:7px;border-left:2px solid var(--primary);border-bottom:2px solid var(--primary);transform:rotate(-45deg)}
.pr-ul li b{color:var(--fg);margin-right:4px}
#cp .pr-btn{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;height:48px;padding:0 24px;border-radius:100px;background:var(--btn);font-size:15px;font-weight:700;color:#fff}
#cp .pr-btn.line{background:var(--card);border:1px solid var(--fg);color:var(--fg)}
@media(hover:hover) and (pointer:fine){#cp .pr-btn:hover{background:var(--btn-h)}#cp .pr-btn.line:hover{background:var(--fg);color:#fff}}
.pr-note{margin-top:6px!important;font-size:13.5px!important;line-height:1.6;color:var(--muted)!important}
/* 추가 선택: Public SaaS 체크 목록 마지막 줄 (10.14) */
.pr-ul li.opt{margin-top:4px;padding:12px 14px 12px 36px;border-radius:12px;background:var(--weak-bg);font-size:14.5px;color:var(--body)}
.pr-ul li.opt::before{left:15px;top:calc(12px + .42em)}
.pr-ul li.opt b{display:block;margin:0 0 2px;font-size:14px;color:var(--weak-fg)}
.pr-ul:has(+.pr-note.in){margin-bottom:10px!important}
.pr-note.in{margin:0 0 22px!important}
.pr-add+.pr-note{margin-top:4px!important}   /* 부가세·별도 문의 안내 = 가격 바로 아래 (v21) */
/* 오른쪽 구매 방법 2가지: 01 조달청 · 02 기관 전용 견적 (10.14) */
.pr-buy{display:flex;flex-direction:column;gap:14px}
.pr-way:first-child{flex:none}   /* 01은 내용만큼, 02가 남는 높이를 채우고 버튼은 맨 아래(왼쪽 카드 버튼과 줄 맞춤) */
.pr-way{flex:1;display:flex;flex-direction:column;padding:26px 30px;border-radius:24px;background:var(--card);border:1px solid var(--border)}
.pr-way h3{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:700;color:var(--title)}
.pr-way h3 span{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:var(--weak-bg);font-size:13px;font-weight:800;color:var(--weak-fg)}
.pr-way>p{margin-top:10px!important;font-size:14.5px;line-height:1.65;color:var(--body)}
.pr-links{display:flex;flex-direction:column;gap:8px;margin-top:16px!important}
/* 한 칸 = 한 줄: 이름 · 번호 ······ 바로가기 (위아래 2줄) */
#cp .pr-links a{display:flex;align-items:center;gap:12px;padding:13px 18px;border-radius:14px;background:var(--soft);transition:background .2s}
.pr-links b{flex:none;font-size:16px;font-weight:700;color:var(--title)}
.pr-links a>span:not(.sr-only){flex:1;min-width:0;font-size:13px;color:var(--muted)}
.pr-links i{flex:none;display:inline-flex;align-items:center;gap:4px;font-style:normal;font-size:14.5px;font-weight:700;color:var(--primary-t)}
@media(hover:hover) and (pointer:fine){#cp .pr-links a:hover{background:var(--weak-bg)}}
.pr-kinds{display:flex;flex-direction:column;gap:6px;margin:14px 0 18px!important}
.pr-kinds li{position:relative;padding-left:20px;font-size:14px;line-height:1.55;color:var(--body)}
.pr-kinds li::before{content:"";position:absolute;left:2px;top:.42em;width:11px;height:6px;border-left:2px solid var(--primary);border-bottom:2px solid var(--primary);transform:rotate(-45deg)}
.pr-kinds b{margin-right:6px;color:var(--fg)}
/* 한 화면에 들어가게: 제목·설명을 가로로, 카드 여백 줄임 */
@media(min-width:1025px){
  .pr-hd .sx-d{max-width:none;margin-top:10px!important;font-size:16px}
  #price .sx-hd{margin-bottom:28px}
  html.snap-on #price{padding-block:32px}
  #price .pr-way{padding:24px 30px}
  #price .pr-card.main{padding:28px 32px}
  #price .pr-price{margin-top:14px!important}
  #price .pr-ul{margin:16px 0 18px!important;padding-top:16px!important;gap:6px}
  #price .pr-ul li{font-size:14.5px}
  #price .pr-ul li.opt b{display:inline;margin-right:8px}
  #price .pr-note.in{margin-bottom:18px!important}
  #price .pr-ul li.opt b{display:inline;margin-right:8px}
  #price .pr-note.in{margin-bottom:18px!important}
}
/* 세로가 낮은 노트북(1280×800 · 1366×768 등): 한 화면에 들어가게 더 줄임 */
@media(min-width:1025px) and (max-height:880px){
  html.snap-on #price{padding-block:24px}
  #price .sx-t{font-size:34px}
  #price .sx-hd{margin-bottom:24px}
  #price .pr-card.main{padding:24px 30px}
  #price .pr-price{margin-top:10px!important}
  #price .pr-ul{margin:14px 0 14px!important;padding-top:14px!important}
  #price .pr-way{padding:22px 28px}
  .pr-way>p{margin-top:8px!important}
  .pr-kinds{margin:12px 0 16px!important}
}
@media(min-width:1025px) and (max-height:800px){   /* 1280×800 · 1366×768 · 1280×720 */
  html.snap-on #price{padding-block:16px}
  #price .sx-lab{font-size:14px}
  #price .sx-t{margin-top:4px!important;font-size:30px}
  #price .pr-hd .sx-d{margin-top:8px!important;font-size:15px}
  #price .sx-hd{margin-bottom:20px}
  .pr-buy{gap:12px}
  #price .pr-way{padding:20px 26px}
  .pr-way h3{font-size:18px}
  .pr-way>p{font-size:14px}
  .pr-links{margin-top:12px!important}
  .pr-kinds{margin:10px 0 14px!important;gap:4px}
}
@media(max-width:1024px){.pr-plans{grid-template-columns:1fr}}
@media(max-width:700px){.pr-card{padding:24px 20px}.pr-card h3{font-size:19px}.pr-price b{font-size:30px}.pr-ul li{font-size:14px}.pr-way{padding:22px 18px}.pr-way h3{font-size:17px}.pr-way>p{font-size:14px}#cp .pr-links a{flex-wrap:wrap;row-gap:0;padding:12px 14px}.pr-links a>span:not(.sr-only){order:3;flex-basis:100%}.pr-links i{margin-left:auto}.pr-links b{font-size:15px}.pr-links i{font-size:13.5px}}


/* ===== 5. 자주 묻는 질문: PC 왼쪽 제목·문의 상자(고정) + 오른쪽 분류별 질문 (10.14) ===== */
.fq-wrap{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:64px;align-items:start}
.fq-side{position:sticky;top:120px}
.fq-side .sx-d{margin-top:16px!important}
/* 공지·가이드 센터 링크 (v21, 10.15): 공지 게시판 → 외부 가이드 센터(document.govkorea.com)로 이전 — 구역 메뉴 오른쪽 끝 + 세로 메뉴 아래 + FAQ 왼쪽 */
.lnb-anc{margin-left:auto}
#cp .lnb-ext{flex:none;display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:6px 0 6px 16px;border-left:1px solid var(--border);font-size:14px;font-weight:500;color:var(--muted);white-space:nowrap;transition:color .2s}
#cp .lnb-ext:hover{color:var(--primary-t)}
#cp .snav-ext{display:inline-flex;align-items:center;gap:4px;margin:14px 0 0 16px;font-size:13px;font-weight:500;color:var(--muted)}
#cp .snav-ext:hover{color:var(--primary-t)}
#cp .fq-guide{position:relative;display:flex;flex-direction:column;gap:3px;margin-top:12px;padding:16px 44px 16px 20px;border:1px solid var(--border);border-radius:16px;background:var(--card);transition:border-color .2s,box-shadow .2s}
#cp .fq-guide b{font-size:15px;font-weight:700;color:var(--fg)}
#cp .fq-guide span{font-size:13.5px;color:var(--muted)}
#cp .fq-guide svg{position:absolute;right:20px;top:50%;margin-top:-6px;color:var(--primary-t)}
#cp .fq-guide:hover{border-color:#bfe9d8;box-shadow:0 8px 20px rgba(22,53,118,.08)}
@media(max-width:1024px){#cp .fq-guide{margin-top:20px;max-width:420px}}
@media(max-width:860px){#cp .lnb-ext{padding-left:10px;font-size:13px}}
.fq-help{margin-top:32px;padding:22px 24px;border-radius:18px;background:var(--card);border:1px solid var(--border)}
.fq-help b{display:block;font-size:16px;font-weight:700;color:var(--title)}
.fq-help p{margin-top:8px!important;font-size:14.5px;line-height:1.7;color:var(--body)}
#cp .fq-help a{display:inline-flex;align-items:center;gap:4px;margin-top:12px;font-size:15px;font-weight:700;color:var(--primary-t)}
#cp .fq-help a:hover{text-decoration:underline;text-underline-offset:3px}
.fq-list{display:flex;flex-direction:column;gap:36px}
.fq-cat>p{margin-bottom:12px!important;font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--primary-t)}
.fq-cat>ul{display:flex;flex-direction:column;gap:10px}
.fq{border-radius:16px;background:var(--card);border:1px solid var(--border);transition:border-color .2s,box-shadow .2s}
.fq[open]{border-color:rgba(0,173,124,.45);box-shadow:0 10px 28px rgba(0,173,124,.08)}
.fq summary{display:flex;align-items:flex-start;gap:12px;padding:20px 22px;cursor:pointer;list-style:none}
.fq summary::-webkit-details-marker{display:none}
.fq summary:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:16px}
.fq-q{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;background:var(--weak-bg);font-size:14px;font-weight:800;color:var(--weak-fg)}
.fq summary h3{flex:1;padding-top:1px;font-size:17px;font-weight:700;line-height:1.5;color:var(--title)}
.fq summary i{flex:none;position:relative;width:24px;height:24px;margin-top:1px}
.fq summary i::before{content:"";position:absolute;left:8px;top:6px;width:8px;height:8px;border-right:2px solid #8b95a1;border-bottom:2px solid #8b95a1;transform:rotate(45deg);transition:transform .25s,top .25s}
.fq[open] summary i::before{top:10px;transform:rotate(-135deg);border-color:var(--primary)}
@media(hover:hover) and (pointer:fine){.fq:not([open]) summary:hover h3{color:var(--primary-t)}}
.fq-a{padding:0 22px 22px 60px}
.fq-a p{font-size:15.5px;line-height:1.75;color:var(--body)}
#cp .fq-a a{font-weight:700;color:var(--primary-t);text-decoration:underline;text-underline-offset:3px}
.fq-steps{display:flex;flex-direction:column;gap:8px;counter-reset:fs}
.fq-steps li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.7;color:var(--body);counter-increment:fs}
.fq-steps li::before{content:counter(fs);position:absolute;left:0;top:.2em;width:20px;height:20px;border-radius:50%;background:var(--primary);font-size:12px;font-weight:800;line-height:20px;text-align:center;color:#fff}
.fq-steps b{margin-right:6px;color:var(--fg)}
@media(max-width:1024px){.fq-wrap{grid-template-columns:1fr;gap:32px}.fq-side{position:static}.fq-help{display:none}}
@media(max-width:700px){.fq-list{gap:28px}.fq summary{gap:10px;padding:16px 16px}.fq summary h3{font-size:15.5px}.fq-q{width:22px;height:22px;font-size:12.5px;border-radius:6px}.fq-a{padding:0 16px 18px 48px}.fq-a p,.fq-steps li{font-size:14.5px}}

/* ===== 7. 고객사: 큰 숫자 문장 + 메인 페이지와 같은 로고 띠 3줄 (흑백, 마우스 올리면 멈춤 + 컬러) ===== */
.cl-t{font-size:28px;font-weight:600;line-height:1.5;letter-spacing:-.02em;color:var(--title)}
.cl-n{font-weight:800}
.cl-n b{font-size:56px;font-weight:800;letter-spacing:-.03em;line-height:1.2;font-variant-numeric:tabular-nums;margin-right:4px}
/* 로고 띠: 메인 index '함께하는 고객사'(media.css .section3 .pt*)와 같은 값 — 가로 6×세로 3 묶음 그림(mainPartner1~4.png)에서 한 칸씩 */
.lg-rows{width:100%;overflow:hidden}
.lg-row{overflow:hidden;padding:22px 0}
.lg-row+.lg-row{margin-top:18px}
.lg-track{display:flex;width:max-content;animation:lgFlow 80s linear infinite}
.lg-row.rev .lg-track{animation-direction:reverse}
.lg-set{display:flex;flex:0 0 auto}
#cp .lg{flex:0 0 auto;display:block;overflow:hidden;text-indent:-9999px;white-space:nowrap;font-size:0;width:130px;height:35px;margin:0 30px;background-repeat:no-repeat;background-size:600% 300%;filter:grayscale(1);opacity:.6;transition:filter .3s,opacity .3s}
@media(hover:hover) and (pointer:fine){.lg-rows:hover .lg-track{animation-play-state:paused}#cp .lg:hover{filter:none;opacity:1}}
.lg.g1{background-image:url(/main/img/partner/mainPartner1.png)}
.lg.g2{background-image:url(/main/img/partner/mainPartner2.png)}
.lg.g3{background-image:url(/main/img/partner/mainPartner3.png)}
.lg.g4{background-image:url(/main/img/partner/mainPartner4.png)}
.lg.n1{background-position:0% 0%}.lg.n2{background-position:20% 0%}.lg.n3{background-position:40% 0%}.lg.n4{background-position:60% 0%}.lg.n5{background-position:80% 0%}.lg.n6{background-position:100% 0%}
.lg.n7{background-position:0% 50%}.lg.n8{background-position:20% 50%}.lg.n9{background-position:40% 50%}.lg.n10{background-position:60% 50%}.lg.n11{background-position:80% 50%}.lg.n12{background-position:100% 50%}
.lg.n13{background-position:0% 100%}.lg.n14{background-position:20% 100%}.lg.n15{background-position:40% 100%}.lg.n16{background-position:60% 100%}.lg.n17{background-position:80% 100%}.lg.n18{background-position:100% 100%}
@keyframes lgFlow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cl-more{margin-top:24px!important;text-align:center!important}
#cp .cl-more a::after{content:"›";font-size:15px}   /* 같은 탭에서 주요 고객사로 (새 창 표시 ↗ 없음) */
@media(max-width:1024px){#cp .lg{margin:0 24px}}
@media(max-width:700px){.cl-t{font-size:20px}.cl-n b{font-size:40px}.lg-row{padding:10px 0}.lg-row+.lg-row{margin-top:4px}#cp .lg{width:100px;height:27px;margin:0 16px}.lg-track{animation-duration:60s}}
@media(prefers-reduced-motion:reduce){.lg-track{animation:none}}

/* ===== 문의 띠: 고객사 구역 맨 아래, 하단(푸터) 바로 위 — PC 휠에서는 고객사와 한 화면 =====
   G-Cloud = 포인트색 하늘(#00ad7c) → 제품소개서 남색(#006b4c) 흐름, 흰 글자 + 흰 버튼 (가이드 13) */
#cp{--cta-bg:linear-gradient(110deg,var(--primary) 0%,#1a6fb0 48%,var(--gc-navy) 100%);--cta-fg:#fff;--cta-sub:rgba(255,255,255,.86);--cta-ring:rgba(255,255,255,.22);--cta-glow:rgba(255,255,255,.14);
    --cta-btn-bg:#fff;--cta-btn-fg:var(--gc-navy);--cta-btn-bd:#fff;--cta-btn-hbg:var(--weak-bg);--cta-btn-hfg:var(--gc-navy);--cta-btn-hbd:var(--weak-bg)}
.cta{position:relative;overflow:hidden;margin-top:96px;background:var(--cta-bg);color:var(--cta-fg);isolation:isolate}
.cta::before{content:"";position:absolute;z-index:-1;right:-140px;top:-180px;width:520px;height:520px;border-radius:50%;border:2px solid var(--cta-ring)}   /* 히어로 궤도에서 가져온 원 */
.cta::after{content:"";position:absolute;z-index:-1;left:-10%;bottom:-60%;width:60%;height:140%;background:radial-gradient(closest-side,var(--cta-glow),transparent);pointer-events:none}
.cta-in{max-width:1280px;margin:0 auto;padding:clamp(56px,8vh,88px) 40px;display:flex;flex-direction:column;align-items:center}
#cp .cta-t{font-size:40px;font-weight:700;line-height:1.35;letter-spacing:-.02em;text-align:center;color:var(--cta-fg)}
#cp .cta-d{margin-top:12px;font-size:20px;font-weight:500;line-height:1.5;text-align:center;color:var(--cta-sub)}
#cp .cta-btn{display:inline-flex;align-items:center;justify-content:center;min-width:180px;height:52px;margin-top:32px;padding:0 28px;border:1px solid var(--cta-btn-bd);border-radius:var(--r);background:var(--cta-btn-bg);font-size:16px;font-weight:700;color:var(--cta-btn-fg);transition:background .25s,color .25s,border-color .25s}
@media(hover:hover) and (pointer:fine){#cp .cta-btn:hover{background:var(--cta-btn-hbg);color:var(--cta-btn-hfg);border-color:var(--cta-btn-hbd)}}
@media(max-width:700px){
  .cta{margin-top:64px}
  .cta::before{width:300px;height:300px;right:-120px;top:-120px}
  .cta-in{padding:52px 16px}
  #cp .cta-t{font-size:24px}
  #cp .cta-d{font-size:15px;margin-top:8px}
  #cp .cta-btn{height:48px;margin-top:24px;font-size:15px}
}


/* ===== 스크롤 등장 (js 가 html 에 .rv-on 을 붙였을 때만 숨김) ===== */
.rv-on [data-rv]{opacity:0;transition:opacity .7s ease,translate .8s cubic-bezier(.2,.7,.2,1),scale .7s cubic-bezier(.3,1.4,.5,1),filter .8s ease;transition-delay:var(--rv-d,0ms)}
.rv-on [data-rv="up"]{translate:0 28px}
.rv-on [data-rv="pop"]{scale:.9}
.rv-on [data-rv="fade"]{filter:blur(6px)}
.rv-on [data-rv].rv-in{opacity:1;translate:0 0;scale:1;filter:none}
/* 히어로 문구: 단어가 하나씩 */
.wd{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(4px);animation:wdIn .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i)*90ms + 150ms)}
@keyframes wdIn{to{opacity:1;transform:none;filter:none}}
@media(prefers-reduced-motion:reduce){.wd{animation:none;opacity:1;transform:none;filter:none}}

/* ===== PC 휠 구역 이동 (html.snap-on): 구역마다 한 화면, 내용은 세로 가운데 ===== */
html.snap-on .ph-hero{min-height:calc(100vh - var(--snap0,140px));display:flex;flex-direction:column;justify-content:center}
html.snap-on .ph-hero>.w{width:100%}
html.snap-on .sx{min-height:calc(100vh - var(--snap1,60px));display:flex;flex-direction:column;justify-content:center;padding-block:56px}
html.snap-on .sx>.w,html.snap-on .cl-body>.w{width:100%}
html.snap-on #clients{justify-content:flex-start;padding-block:0}   /* 마지막 구역: 고객사 + 문의 띠가 딱 한 화면, 그 아래는 바로 하단(일반 스크롤) */
html.snap-on .cl-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(24px,4.5vh,64px) clamp(16px,2.6vh,40px)}
html.snap-on .cl-body .lg-row{padding-block:clamp(8px,1.3vh,22px)}
html.snap-on .cl-body .lg-row+.lg-row{margin-top:clamp(4px,.9vh,18px)}
html.snap-on .cta{margin-top:0}
html.snap-on .cta-in{padding-block:clamp(44px,7vh,88px)}
@media(max-height:820px){   /* 노트북 낮은 화면: 고객사 + 문의 띠가 한 화면에 들어가게 조금씩 줄임 */
  html.snap-on #clients .sx-hd{margin-bottom:20px}
  html.snap-on .cl-t{font-size:24px}
  html.snap-on .cl-n b{font-size:44px}
  html.snap-on .cl-more{margin-top:14px!important}
  html.snap-on #cp .cta-t{font-size:30px}
  html.snap-on #cp .cta-d{font-size:17px;margin-top:8px}
  html.snap-on #cp .cta-btn{height:46px;margin-top:22px}
}
html.snap-on .sx-hd{margin-bottom:clamp(24px,4vh,48px)}
html.snap-on .bc{min-height:clamp(240px,calc((100vh - var(--snap1,60px) - 300px) / 2),380px)}   /* 카드 2줄이 한 화면에 들어가게 */
html.snap-on .bc{padding-block:clamp(28px,4vh,40px)}
html.snap-on .vd{width:min(100%,1040px,calc((100vh - var(--snap1,60px) - 340px) * 16 / 9))}
/* 스크롤 안내 */
@keyframes cueBob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(6px);opacity:1}}

@media(max-width:700px){.hb-btns{display:grid!important;grid-template-columns:1fr 1fr;width:100%;max-width:360px}.hb-btns .hb-main{grid-column:1/-1}.hb-btns .hb{padding:0 12px}}   /* 휴대폰: 도입 문의 한 줄 + 조달청 링크 2개 나란히 */

/* ===== 2-1. 특장점 (PC 펼침 · 1100px 이하 가로로 밀어 넘기는 카드) ===== */
.fb{display:flex}
.fa-lab{font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--primary-t)}
.fa-stat b{display:block;font-size:34px;font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--primary-t);white-space:nowrap}
.fa-stat span{display:block;margin-top:4px;font-size:13px;color:var(--muted)}
.fa-lead{font-size:16px;font-weight:600;line-height:1.6;color:var(--fg)}

/* A안: 가로로 흐르는 카드 — 앞면은 제목·숫자·그림만, 마우스 올리면 설명 판이 아래에서 올라와 덮음 */
.fa{position:relative;margin-right:calc((100vw - min(100vw,1280px))/-2 - 40px)}           /* 오른쪽은 화면 끝까지 흘러 나감 */
.fa-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:0;padding:4px 40px 24px 0;scrollbar-width:none}
.fa-track::-webkit-scrollbar{display:none}
.fa-card{position:relative;flex:0 0 clamp(290px,27vw,380px);height:clamp(400px,calc(100vh - 500px),470px);scroll-snap-align:start;border-radius:24px;background:var(--card);border:1px solid var(--border);overflow:hidden;outline-offset:3px}
.fa-front{height:100%;display:flex;flex-direction:column;padding:32px 30px}
.fa-front h3{margin-top:10px!important;font-size:23px;font-weight:700;line-height:1.4;letter-spacing:-.02em;color:var(--title)}
.fa-front .fa-stat{margin-top:18px!important}
.fa-art{flex:1;display:flex;align-items:flex-end;justify-content:center;padding-top:10px}
.fa-art svg{width:72%;max-width:220px;height:auto;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.fa-more{position:absolute;right:22px;top:26px;font-size:13px;font-weight:600;color:var(--muted)}
.fa-back{position:absolute;inset:0;overflow:auto;padding:30px 30px 28px;background:linear-gradient(170deg,#fff 55%,#effaf6);transform:translateY(101%);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.fa-back>.fa-lab{margin-bottom:14px!important;padding-bottom:14px!important;border-bottom:1px solid var(--border)}
.fa-back .gk-ul{margin-top:12px!important}
.fa-back .gk-ul li{font-size:14.5px}
.fa-card.open .fa-back{transform:none}
@media(hover:hover) and (pointer:fine){.fa-card:hover .fa-back,.fa-card:focus-within .fa-back,.fa-card:focus .fa-back{transform:none}.fa-card:hover .fa-art svg{transform:translateY(-8px)}.fa-card{transition:box-shadow .3s,border-color .3s}.fa-card:hover{border-color:#bfe9d8;box-shadow:0 18px 40px rgba(22,53,118,.12)}}
.fa-nav{display:flex;gap:8px;margin-top:8px}
#cp .fa-btn{width:44px;height:44px;border:1px solid var(--border);border-radius:50%;background:var(--card);font-size:22px;line-height:1;color:var(--fg);cursor:pointer}
#cp .fa-btn:hover{border-color:var(--fg)}
@media(max-width:700px){.fa{margin-right:-16px}.fa-track{gap:12px;padding-right:16px}.fa-card{flex-basis:82%;height:420px}.fa-front{padding:24px 22px}.fa-front h3{font-size:20px}.fa-stat b{font-size:28px}.fa-back{padding:20px 22px}.fa-lead{font-size:15px}}

/* B안: 펼침형 — 4칸 나란히, 마우스를 올린 칸이 넓어지며 설명이 나옴 */
.fb{gap:14px;height:clamp(400px,calc(100vh - 480px),540px)}
.fb-p{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;padding:30px 28px;border-radius:24px;background:var(--card);border:1px solid var(--border);overflow:hidden;cursor:pointer;transition:flex-grow .6s cubic-bezier(.2,.7,.2,1),background .4s,border-color .4s;outline-offset:3px}
.fb-p.on{flex-grow:2.7;background:linear-gradient(160deg,#fff 40%,#effaf6);border-color:#bfe9d8;cursor:default}
.fb-head h3{margin-top:10px!important;font-size:22px;font-weight:700;line-height:1.4;letter-spacing:-.02em;color:var(--title)}
.fb-head .fa-stat{margin-top:16px!important}
.fb-p:not(.on) .fb-head h3{font-size:19px}
.fb-p:not(.on) .fa-stat b{font-size:28px}
.fb-more{margin-top:20px;padding-top:18px;border-top:1px solid var(--border);opacity:0;transform:translateY(12px);transition:opacity .4s,transform .5s;width:min(560px,100%)}
.fb-p.on .fb-more{opacity:1;transform:none;transition-delay:.2s}
.fb-p:not(.on) .fb-more{position:absolute;visibility:hidden}
.fb-art{position:absolute;right:22px;bottom:calc(100% - 112px);width:120px;transition:right .6s cubic-bezier(.2,.7,.2,1),bottom .6s cubic-bezier(.2,.7,.2,1),width .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.fb-p:not(.on) .fb-art{width:min(80%,180px);right:50%;bottom:18px;transform:translateX(50%)}
.fb-art svg{width:100%;height:auto}
@media(prefers-reduced-motion:reduce){.fa-back,.fb-p,.fb-more,.fa-art svg{transition:none}}
/* 특장점 카드 모션 v21 (10.15): ① 그림이 가운데 아래 → 오른쪽 위로 부드럽게 이동(흐려지지 않음) ② 설명 글은 펼친 폭으로 고정(넓어지는 동안 줄바꿈 안 바뀜)
   ③ 소개 문장 → 근거 줄 차례로 등장 ④ 펼칠 때 그림마다 한 번 움직임(체크 그리기·그래프 선·자물쇠 잠김) ⑤ 마우스는 0.12초 머물러야 펼침(gcloud-fx.js) */
@media(min-width:1240px){
  .fb-more{width:var(--fbin,min(560px,100%));flex:none;transform:none;transition:opacity .3s}
  .fb-p.on .fb-more{transition-delay:.1s}
  .fb-more>.fa-lead,.fb-more li{opacity:0;transform:translateY(10px);transition:opacity .35s,transform .5s cubic-bezier(.2,.7,.2,1)}
  .fb-p.on .fb-more>.fa-lead,.fb-p.on .fb-more li{opacity:1;transform:none}
  .fb-p.on .fb-more>.fa-lead{transition-delay:.2s}
  .fb-p.on .fb-more li:nth-child(1){transition-delay:.28s}
  .fb-p.on .fb-more li:nth-child(2){transition-delay:.33s}
  .fb-p.on .fb-more li:nth-child(3){transition-delay:.38s}
  .fb-p.on .fb-more li:nth-child(4){transition-delay:.43s}
}
.ic-ck,.ic-tr,.ic-tr2{stroke-dasharray:1 1}
.ic-seal,.ic-sh{transform-box:fill-box;transform-origin:50% 50%}
@keyframes icDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes icPop{0%{opacity:0;transform:scale(.55)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:none}}
@keyframes icLock{0%,45%{transform:translateY(-4px)}70%{transform:translateY(1px)}100%{transform:none}}
@media(min-width:1240px){
  .fb-p.on.seen .ic-seal{animation:icPop .55s cubic-bezier(.2,.7,.2,1) .35s both}
  .fb-p.on.seen .ic-seal .ic-ck{animation:icDraw .4s ease-out .75s both}
  .fb-p.on.seen .ic-r{animation:icDraw .3s ease-out calc(.35s + var(--r) * .14s) both}
  .fb-p.on.seen .ic-tr{animation:icDraw .6s ease-out .4s both}
  .fb-p.on.seen .ic-tr2{animation:icDraw .25s ease-out .95s both}
  .fb-p.on.seen .ic-sh{animation:icLock .8s cubic-bezier(.3,.7,.3,1.4) .3s both}
  .fb-p.on.seen:has(.ic-r) .ic-seal{animation-delay:.75s}
  .fb-p.on.seen:has(.ic-r) .ic-seal .ic-ck{animation-delay:1.1s}
}
@media(max-width:1239px){
  .fb-p.seen .ic-seal{animation:icPop .55s cubic-bezier(.2,.7,.2,1) .35s both}
  .fb-p.seen .ic-seal .ic-ck{animation:icDraw .4s ease-out .75s both}
  .fb-p.seen .ic-r{animation:icDraw .3s ease-out calc(.35s + var(--r) * .14s) both}
  .fb-p.seen .ic-tr{animation:icDraw .6s ease-out .4s both}
  .fb-p.seen .ic-tr2{animation:icDraw .25s ease-out .95s both}
  .fb-p.seen .ic-sh{animation:icLock .8s cubic-bezier(.3,.7,.3,1.4) .3s both}
  .fb-p.seen:has(.ic-r) .ic-seal{animation-delay:.75s}
  .fb-p.seen:has(.ic-r) .ic-seal .ic-ck{animation-delay:1.1s}
}
@media(prefers-reduced-motion:reduce){.fb-art,.fb-more,.fb-more>.fa-lead,.fb-more li{transition:none!important}.fb-art *{animation:none!important}}
/* 화면 높이가 낮은 PC(940px 이하: 1280×720·800, 1366×768, 1536×864 …): 펼친 칸 안 여백·글자를 조금 줄여 근거 4줄이 잘리지 않게 (v21) */
@media(min-width:1240px) and (max-height:940px){
  .fb-p.on{padding-top:24px;padding-bottom:20px}
  .fb-p.on .fb-head h3{margin-top:8px!important;font-size:20px}
  .fb-p.on .fb-head .fa-stat{margin-top:10px!important}
  .fb-p.on .fa-stat b{font-size:30px}
  .fb-more{margin-top:14px;padding-top:12px}
  .fb-more .fa-lead{font-size:15px;line-height:1.55}
  .fb-more .gk-ul{margin-top:8px!important;gap:3px}
  .fb-more .gk-ul li{font-size:14px;line-height:1.55}
}
/* 1101~1400px PC: 접힌 칸 제목이 3줄로 넘어가지 않게 조금 작게 */
@media(min-width:1240px) and (max-width:1400px){.fb-p:not(.on) .fb-head h3{font-size:17px}}
/* 접힌 칸 큰 숫자: 'CC · GS · 특허'가 좁은 칸에서 잘리지 않게 (최종본 검수 10.15) */
@media(min-width:1240px){.fb-p:not(.on) .fa-stat b{font-size:min(24px,1.8vw)}}
/* 1240~1279px: 펼친 칸이 좁아 근거 줄이 길게 감김 → 글자를 조금 줄여 칸 안에 (최종본 검수 10.15) */
@media(min-width:1240px) and (max-width:1279px){.fb-more .fa-lead{font-size:14.5px}.fb-more .gk-ul li{font-size:13.5px;line-height:1.5}.fb-p.on .fa-stat b{font-size:28px}}

html.snap-on #feature .sx-d{font-size:16px;margin-top:12px!important}

/* B안 1239px 이하(태블릿·휴대폰) = A안처럼: 카드가 옆으로 흐르고(밀어서 넘김), 누르면 설명 판이 카드를 덮음 */
@media(max-width:1239px){
  .fb{height:auto;gap:12px;margin-right:-40px;padding:4px 40px 20px 0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .fb::-webkit-scrollbar{display:none}
  .fb-p,.fb-p.on{flex:0 0 clamp(270px,46vw,360px);height:420px;scroll-snap-align:start;background:var(--card);border-color:var(--border);cursor:pointer}
  .fb-p .fb-head h3,.fb-p:not(.on) .fb-head h3{font-size:20px}
  .fb-p .fa-stat b,.fb-p:not(.on) .fa-stat b{font-size:28px}
  .fb-art,.fb-p.on .fb-art,.fb-p:not(.on) .fb-art{position:absolute;left:50%;right:auto;bottom:20px;width:150px;opacity:1;transform:translateX(-50%)}
  .fb-p::after{content:"자세히 +";position:absolute;right:20px;top:24px;font-size:12px;font-weight:600;color:var(--muted)}
  .fb-more,.fb-p.on .fb-more,.fb-p:not(.on) .fb-more{position:absolute;inset:0;z-index:2;visibility:visible;width:auto;margin:0;padding:24px 22px;border:0;overflow:auto;background:linear-gradient(170deg,#fff 55%,#effaf6);opacity:1;transform:translateY(101%);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
  .fb-p.open .fb-more{transform:none}
  .fb-more .fa-lead{font-size:15px}.fb-more .gk-ul li{font-size:14px}
}
@media(max-width:700px){.fb{margin-right:-16px;padding-right:16px;gap:10px}.fb-p,.fb-p.on{flex-basis:82%;padding:22px 20px}}
/* 휴대폰·태블릿: 옆에 카드가 더 있다는 표시 — 점 4개(지금 카드 표시) + 처음 보일 때 카드 줄이 왼쪽으로 살짝 밀렸다 돌아옴(gcloud-fx.js) */
.fb-dots{display:none}
@media(max-width:1239px){
  .fb-dots{display:flex;justify-content:center;gap:6px;margin-top:4px}
  .fb-dots i{width:6px;height:6px;border-radius:3px;background:#cfd6dd;transition:width .3s,background .3s}
  .fb-dots i.on{width:20px;background:var(--primary)}
}

/* 휴대폰: 카드 높이 줄임 — 그림은 오른쪽 아래 작게, 설명 판은 글자를 조금 줄여 스크롤 없이 한 번에 보이게 (10.14) */
@media(max-width:700px){
  .fb-p,.fb-p.on{height:350px;padding:20px 18px}
  .fb-p .fb-head h3,.fb-p:not(.on) .fb-head h3{font-size:18px;margin-top:6px!important}
  .fb-head .fa-stat{margin-top:12px!important}
  .fb-p .fa-stat b,.fb-p:not(.on) .fa-stat b{font-size:26px}
  .fb-art,.fb-p.on .fb-art,.fb-p:not(.on) .fb-art{left:auto;right:16px;bottom:16px;width:110px;transform:none}
  .fb-p::after{right:18px;top:20px}
  .fb-more,.fb-p.on .fb-more,.fb-p:not(.on) .fb-more{padding:18px 18px}
  .fb-more .fa-lead{font-size:14px;line-height:1.5}
  .fb-more .gk-ul{margin-top:8px!important;gap:3px}
  .fb-more .gk-ul li{font-size:13px;line-height:1.5;padding-left:13px}
  .fb-more .gk-ul li::before{top:.62em;width:4px;height:4px}
}
@media(max-width:359px){.fb-p,.fb-p.on{height:400px}}   /* 아주 좁은 휴대폰은 설명이 넘치지 않게 조금 높게 */

/* ===== 4-1. 주요기능 탭: 왼쪽 탭 · 가운데 화면 · 오른쪽 제목+설명 (10.14) ===== */
.ftb{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:start}
.ftb-tabs{display:flex;flex-direction:column;gap:6px}
#cp .ftb-tabs button{display:flex;align-items:center;gap:14px;height:58px;padding:0 20px;border:0;border-radius:14px;background:none;font-size:17px;font-weight:600;color:var(--muted);text-align:left;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
#cp .ftb-tabs button span{font-size:14px;font-weight:700;color:#b0b8c1;font-variant-numeric:tabular-nums}
#cp .ftb-tabs button[aria-selected=true]{background:var(--card);color:var(--title);font-weight:700;box-shadow:0 6px 20px rgba(22,53,118,.08)}
#cp .ftb-tabs button[aria-selected=true] span{color:var(--primary-t)}
@media(hover:hover) and (pointer:fine){#cp .ftb-tabs button:hover{color:var(--title)}}
.ftb-pan{display:none;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:center}
.ftb-pan.on{display:grid;animation:ftbIn .5s cubic-bezier(.2,.7,.2,1)}
@keyframes ftbIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ftb-shot.gf-shot{aspect-ratio:16/10.5;background:var(--card);border:1px solid var(--border);box-shadow:0 10px 30px rgba(22,53,118,.06)}
.ftb-tx h3{font-size:26px;font-weight:700;line-height:1.4;letter-spacing:-.02em;color:var(--title)}
.ftb-ul{margin-top:20px!important;display:flex;flex-direction:column;gap:12px}
.ftb-ul li{position:relative;padding-left:18px;font-size:16px;line-height:1.65;color:var(--body)}
.ftb-ul li::before{content:"";position:absolute;left:2px;top:.66em;width:6px;height:6px;border-radius:50%;background:var(--primary)}
@media(max-width:1200px){.ftb{grid-template-columns:200px minmax(0,1fr);gap:24px}.ftb-pan{grid-template-columns:1fr;gap:28px}}
@media(max-width:860px){
  .ftb{grid-template-columns:1fr;gap:16px}
  .ftb-tabs{flex-direction:row;overflow-x:auto;gap:6px;margin-right:-16px;padding:4px 16px 4px 0;scrollbar-width:none}
  .ftb-tabs::-webkit-scrollbar{display:none}
  #cp .ftb-tabs button{flex:none;height:44px;padding:0 16px;font-size:15px;gap:8px;border:1px solid var(--border);background:var(--card)}
  #cp .ftb-tabs button[aria-selected=true]{border-color:var(--fg);background:var(--fg);color:#fff;box-shadow:none}
  #cp .ftb-tabs button[aria-selected=true] span{color:#9fe2c8}
  .ftb-pan{gap:20px}.ftb-tx h3{font-size:21px}.ftb-ul li{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.ftb-pan.on{animation:none}}
/* 주요기능 05 PC·모바일 (v21): PC 창(멀티 탭·드래그 앤 드롭) + 휴대폰 + 브라우저 칩. 1em = 화면 칸 폭의 1/56 (.ms 와 같음) */
.mp{position:relative;height:100%;font-size:calc(100cqw/56);text-align:left}
.mp *{box-sizing:border-box}
.mp-pc{position:absolute;left:0;top:0;width:80%;height:88%;font-size:1em}
.mp-tabs{flex:none;display:flex;align-items:flex-end;gap:.3em;height:2.6em;padding:0 .8em;background:#eef1f6;font-size:.85em}
.mp-tabs b,.mp-tabs span{max-width:13em;padding:.45em .9em;border-radius:.6em .6em 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-tabs b{background:#fff;color:var(--primary-t)}.mp-tabs span{color:#6b7684}.mp-tabs em{padding:.45em .5em;font-style:normal;color:#8b95a1}
.mp-pc .ms-body{position:relative}
.mp-nav{flex:none;width:30%;padding:1em .8em;border-right:.08em solid #e5e8eb;background:#f7f9fc}
.mp-nav li{display:flex;justify-content:space-between;margin-top:.3em;padding:.45em .7em;border-radius:.5em;font-size:.9em;white-space:nowrap}
.mp-nav li.on{background:#e6f7f1;color:var(--primary-t);font-weight:700}.mp-nav em{font-style:normal;font-weight:700;color:var(--primary-t)}
.mp-nav li.drop{outline:.12em dashed transparent;outline-offset:-.12em}
.mp-list{flex:1;min-width:0;padding:.4em 0}
.mp-list li{display:flex;flex-direction:column;gap:.2em;padding:.7em 1.2em;border-bottom:.08em solid #eef1f4;font-size:.9em;white-space:nowrap;overflow:hidden}
.mp-list b{font-weight:700;color:#191f28}.mp-list span{color:#6b7684;overflow:hidden;text-overflow:ellipsis}
.mp-list li.drag{background:#f0f8fd}
.mp-ghost{position:absolute;left:34%;top:4.6em;display:flex;flex-direction:column;gap:.2em;width:15em;padding:.6em 1em;border-radius:.6em;background:#fff;box-shadow:0 .8em 2em rgba(22,53,118,.22);font-size:.85em;white-space:nowrap;opacity:0;pointer-events:none}
.mp-ghost b{font-weight:700;color:#191f28}.mp-ghost span{color:#6b7684;overflow:hidden;text-overflow:ellipsis}
.mp-ghost svg{position:absolute;right:-.6em;bottom:-.8em;width:1.8em;height:1.8em;fill:#191f28;stroke:#fff;stroke-width:1.4;stroke-linejoin:round}
.mp-phone{position:absolute;right:0;bottom:-2%;width:27%;aspect-ratio:9/17.5;padding:.45em;border-radius:2em;background:#191f28;box-shadow:0 1.2em 3em rgba(22,53,118,.28)}
.mp-ph{position:relative;height:100%;overflow:hidden;border-radius:1.6em;background:#fff}
.mp-ph-top{display:flex;align-items:center;gap:.5em;height:3.2em;padding:.8em 1em 0;background:var(--gc-navy);color:#fff;font-size:.85em}
.mp-ph-top em{font-style:normal;color:#9fe2c8;font-weight:700}
.mp-ph li{display:flex;align-items:center;gap:.6em;padding:.7em .8em;border-bottom:.08em solid #eef1f4}
.mp-ph li i{flex:none;width:1.8em;height:1.8em;border-radius:50%;background:#cfe9f7}.mp-ph li i.c2{background:#dcd6fb}.mp-ph li i.c3{background:#c9ecd9}.mp-ph li i.c4{background:#fbe0c6}
.mp-ph li p{min-width:0;display:flex;flex-direction:column;gap:.15em;font-size:.75em;white-space:nowrap}
.mp-ph li b{font-weight:700;color:#191f28}.mp-ph li span{color:#6b7684;overflow:hidden;text-overflow:ellipsis}
.mp-fab{position:absolute;right:.8em;bottom:.8em;width:2.6em;height:2.6em;border-radius:50%;background:var(--primary);box-shadow:0 .4em 1em rgba(0,173,124,.4)}
.mp-br{position:absolute;left:0;bottom:-2%;display:flex;gap:.4em}
.mp-br li{padding:.35em .8em;border-radius:2em;background:#fff;box-shadow:0 .3em .8em rgba(22,53,118,.12);font-size:.8em;font-weight:600;color:#4e5968;white-space:nowrap}
/* 탭을 열면 한 번: 메일을 끌어다 '기획예산팀' 메일함에 놓는 움직임 */
.ftb-pan.on .mp-ghost{animation:mpDrag 2.2s cubic-bezier(.4,0,.2,1) .5s both}
.ftb-pan.on .mp-nav li.drop{animation:mpDrop 2.2s ease .5s both}
@keyframes mpDrag{0%{opacity:0;transform:none}12%{opacity:1;transform:translate(.4em,-.3em) rotate(-2deg)}70%{opacity:1;transform:translate(-13em,1.6em) rotate(-3deg) scale(.9)}85%,100%{opacity:0;transform:translate(-13em,1.6em) scale(.6)}}
@keyframes mpDrop{0%,50%{outline-color:transparent;background:none}60%,82%{outline-color:var(--primary);background:#e6f7f1}100%{outline-color:transparent;background:none}}
@media(prefers-reduced-motion:reduce){.ftb-pan.on .mp-ghost,.ftb-pan.on .mp-nav li.drop{animation:none}}
/* 주요기능 목업을 실제 G-Cloud 공공메일 화면에 가깝게 (v21): 블루 상단 바 #4b72d9 + 'G-Cloud 공공메일' + 검색 칸 + 아이콘, 왼쪽 어두운 아이콘 레일 #2b3245, 화면 안 강조색 = 서비스 블루 */
#func .ms,.mp .ms{--primary:#4b72d9;--primary-t:#3a5bb8}
#func .ms-top{gap:.9em;height:3em;padding:0 1.2em;background:#4b72d9;font-weight:400}
#func .ms-top>span{margin-right:0;font-size:1.05em;white-space:nowrap}
#func .ms-top .ms-q{display:flex;align-items:center;gap:.4em;width:11em;height:1.7em;margin-right:auto;padding:0 .6em;border-radius:.15em;background:#fff;color:#8b95a1;font-style:normal;font-size:.8em}
#func .ms-top svg{flex:none;width:1.25em;height:1.25em;fill:none;stroke:#fff;stroke-width:1.7}
#func .ms-top .ms-q svg{width:1em;height:1em;stroke:#3a5bb8;stroke-width:2.6}
.ms-rail{flex:none;display:flex;flex-direction:column;align-items:center;width:2.6em;padding-top:.5em;background:#2b3245}
.ms-rail i{display:grid;place-items:center;width:100%;height:2.5em}
.ms-rail i.on{background:#4b72d9}
.ms-rail svg{width:1.2em;height:1.2em;fill:none;stroke:#c9cfdc;stroke-width:1.7}.ms-rail i.on svg{stroke:#fff}
#func .mp-ph-top{background:#4b72d9}
#func .ms-btns b{background:#4b72d9;border-radius:.15em}#func .ms-btns span{border-radius:.15em}
@keyframes mpDrag{0%{opacity:0;transform:none}12%{opacity:1;transform:translate(.4em,-.3em) rotate(-2deg)}70%{opacity:1;transform:translate(-11em,1.6em) rotate(-3deg) scale(.9)}85%,100%{opacity:0;transform:translate(-11em,1.6em) scale(.6)}}

/* 한눈에 보는 주요 기능: PC는 늘 펼침, 휴대폰은 '사용자 기능'·'관리자·보안 기능'을 눌러 접고 펼침 (처음엔 접힘) */
#cp .gfl-h{width:100%;border:0;border-bottom:2px solid var(--fg);background:none;font:inherit;font-size:17px;font-weight:700;color:var(--title);text-align:left;cursor:default}
.gfl-ar{display:none}
@media(max-width:860px){
  #cp .gfl-h{cursor:pointer;padding:14px 0}
  .gfl-ar{display:block;margin-left:auto;width:9px;height:9px;border-right:2px solid var(--fg);border-bottom:2px solid var(--fg);transform:translateY(-3px) rotate(45deg);transition:transform .3s}
  .gfl-col.open .gfl-ar{transform:translateY(2px) rotate(-135deg)}
  .gfl-col:not(.open) ul{display:none}
  .gfl-cols{gap:8px}
  #cp .gfl-col:not(.open) .gfl-h{border-bottom:1px solid var(--border)}
}

/* ===== 메일브레이커(MB) — 위 공통 틀(G-Cloud 상품소개와 같은 틀) 위에 색·히어로 목업·새 구역 (크리니티메시징·스팸브레이커와 같은 구성, 색만 MB 초록) ===== */
:root{
  --primary:#00ad7c; --primary-h:#00936a; --primary-t:#008a63;      /* MB 포인트색 = 메일브레이커 초록 */
  --weak-bg:#e6f7f1; --weak-fg:#008a63;
  --gc-navy:#006b4c; --gc-sky:#5fe0b5;                               /* 문의 띠 진한 파랑 #0050a8 / 어두운 바탕 위 강조 글자 */
  --hero-bg:#0b1322;   /* 20261105: 회사소개와 같은 네이비(가이드) */
  --svc:#1f6fe0; --warn:#e5484d;                                     /* 목업 안 서비스 파랑(실제 화면) · 경고 빨강 */
}
#cp{--cta-bg:linear-gradient(110deg,#00ad7c 0%,#008a63 48%,#006b4c 100%)}
.hv-b::before{background:radial-gradient(circle,rgba(0,173,124,.36) 0%,rgba(0,107,76,.28) 32%,rgba(0,107,76,.08) 56%,rgba(0,0,0,0) 70%)}
.hv-b::after{background:radial-gradient(circle,rgba(0,173,124,.16) 0%,rgba(0,0,0,0) 66%)}


/* ---- 1. 히어로: 칩 · 부제 · 기능 칩 · 실제 화면 목업 ---- */
#cp .hb-t{font-size:52px;line-height:1.3}
.hb-t em{background:linear-gradient(90deg,#fff 0%,#b8f2dc 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
#cp .hb-d{margin-top:16px;font-size:18px;line-height:1.65;color:#b9c4d3;animation:hbUp 1s cubic-bezier(.2,.7,.2,1) .12s both}
#cp .hb-d b{color:#fff;font-weight:600}
#cp .hb-d{text-align:center}
.hb-chips span{white-space:nowrap}
@media(max-width:700px){.hb-btns .hb-line{grid-column:1/-1}}
.hb-btns{margin-top:28px}
.hb-vis{width:min(1180px,92vw);margin-top:0}
html.snap-on .hb-in{padding-block:clamp(22px,4.4vh,56px) 0}
html.snap-on .hb-btns{margin-top:clamp(18px,2.8vh,28px)}
html.snap-on .hb-vis{width:min(1180px,92vw);margin-top:0}
/* 기능 표기 (10.19 사용자: 버튼 모양 말고 작게 표기만) — 목업 바로 위 작은 글자, 지금 단계만 흰색 + 아래 진행 줄 */
.fx-row{position:relative;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(1180px,92vw);margin:clamp(22px,3.4vh,36px) auto 12px;animation:hbUp 1s cubic-bezier(.2,.7,.2,1) .35s both}
.fx-nav{display:flex;align-items:center;gap:2px;margin-left:-8px}
#cp .fx-note{font-size:12px;line-height:1.4;color:rgba(255,255,255,.38);text-align:right}
.fx-k{margin-right:10px;font-size:12px;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.4)}
#cp .fx-nav button{position:relative;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 8px;border:0;background:none;color:rgba(255,255,255,.45);font-size:13px;font-weight:500;line-height:1;cursor:pointer;transition:color .25s}
#cp .fx-nav button+button::before{content:"";position:absolute;left:-2px;top:50%;width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.3);transform:translateY(-50%)}
#cp .fx-nav button i{font-style:normal;font-size:11px;font-weight:600;color:inherit;opacity:.7}
#cp .fx-nav button:hover{color:rgba(255,255,255,.8)}
#cp .fx-nav button.on{color:#fff}
#cp .fx-nav button.on i{color:var(--gc-sky);opacity:1}
#cp .fx-nav .bar{position:absolute;left:8px;right:8px;bottom:0;height:2px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden;opacity:0}
#cp .fx-nav button.on .bar{opacity:1}
#cp .fx-nav .bar::after{content:"";position:absolute;inset:0;background:var(--gc-sky);transform:scaleX(var(--p,0));transform-origin:left}
/* ===== 히어로 목업: 실제 메일브레이커 관리자 화면을 HTML 로 (사용자 캡처 10.21 참고 — SB 목업 틀을 초록으로) =====
   .cv 안 1em = 목업 폭/120 (디자인 1200px 기준 10px). 아래쪽은 히어로 밑에서 잘림 */
.cv{position:relative;container-type:inline-size;text-align:left;color:#222}
.cv-in{font-size:calc(100cqw / 120);position:relative}
.cv-win{position:relative;height:60em;border-radius:1.2em 1.2em 0 0;background:#fff;overflow:hidden;box-shadow:0 -1em 6em rgba(0,0,0,.35),0 0 0 .1em rgba(255,255,255,.12);animation:mkUp 1.3s cubic-bezier(.2,.7,.2,1) .35s both}
@keyframes mkUp{from{opacity:0;transform:translateY(4em)}to{opacity:1;transform:none}}
.cv-chrome{display:flex;align-items:center;gap:1.4em;height:3.4em;padding:0 1.4em;background:#eef1f5;border-bottom:.1em solid #dfe3e8}
.cv-dots{display:flex;gap:.6em}.cv-dots i{width:1.1em;height:1.1em;border-radius:50%;background:#d3d8df}
.cv-url{flex:0 1 38em;height:2.2em;border-radius:1.1em;background:#fff;display:flex;align-items:center;gap:.6em;padding:0 1.2em;font-size:1.1em;color:#7a8594}
.cv-url .bl{filter:blur(.28em);user-select:none}
.cv-url svg{width:1em;height:1em}
.bl{filter:blur(.2em);user-select:none}

/* 설명 카드 (CM 과 같음) */
.cv-call{position:absolute;z-index:5;left:-3.2em;top:9em;width:26em;padding:1.6em 1.8em;border-radius:1.2em;background:#fff;box-shadow:0 1.6em 4em rgba(10,22,48,.35);transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.cv-call.off{opacity:0;transform:translateY(1em)}
.cv-call .k{display:inline-flex;align-items:center;gap:.5em;font-size:1.15em;font-weight:700;color:var(--primary-t);letter-spacing:.02em}
.cv-call .k i{font-style:normal;display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:.5em;background:#e6f7f1}
.cv-call .k svg{width:1.15em;height:1.15em;stroke:var(--primary);fill:none;stroke-width:2}
.cv-call h3{margin:.55em 0 .3em;font-size:1.95em;line-height:1.35;font-weight:700;color:#111;letter-spacing:-.02em}
.cv-call p{margin:0;font-size:1.3em;line-height:1.55;color:#4e5968}

/* 관리자 머리: 흰 바탕 + 아래 초록 줄, 활성 메뉴 = 초록 알약 */
.sv-head{display:flex;align-items:center;gap:2em;height:4.8em;padding:0 2em;background:#fff;border-bottom:.22em solid #1fa564}
.sv-logo{display:flex;align-items:center;width:20em;flex:none}
.sv-logo img{display:block;height:1.12em;width:auto}
.sv-logo b{color:#00ad7c;font-weight:900;letter-spacing:.02em}
.sv-logo svg{width:1.05em;height:1.05em;flex:none}
.sv-top{display:flex;gap:1.2em;font-size:1.25em;color:#333;white-space:nowrap}
.sv-top>span{display:inline-flex;align-items:center;gap:.4em;height:2em;padding:0 .9em;border-radius:1em;transition:background .35s,color .35s}
.sv-top svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.sv-top>span.on{background:#1fa564;color:#fff;font-weight:700}
.sv-who{margin-left:auto;display:flex;align-items:center;gap:.8em;font-size:.95em;color:#333;white-space:nowrap}
.sv-who em{font-style:normal;color:#00ad7c;margin-left:-.4em}
.sv-who u{text-decoration:none;border:.1em solid #c9ced6;padding:.1em .6em}
.sv-body{display:flex;height:calc(100% - 8.4em)}

/* 왼쪽 남색 메뉴 */
.sv-side{position:relative;width:19em;flex:none;background:#29364a;color:#fff;overflow:hidden}
.sd{position:absolute;inset:0;padding:1.6em 1.6em;transition:opacity .4s}
.sd.off{opacity:0;pointer-events:none}
.sd-t{margin:0 0 1em;font-size:1.9em;font-weight:800}
.sd-h{margin:1.2em 0 .7em;font-size:1.15em;font-weight:700}
.sd-kpi{display:grid;grid-template-columns:1fr 1fr;gap:.6em}
.sd-kpi span{display:flex;flex-direction:column;align-items:center;padding:.7em 0 .5em;background:#1f2a3a;border-radius:.3em;text-align:center}
.sd-kpi b{font-size:1.6em;font-weight:700}
.sd-kpi small{font-size:.8em;color:#8d99ad}
.sd-inf{display:grid;grid-template-columns:auto 1fr;gap:.55em 1em;margin:1.2em 0 0;font-size:1em;color:#c9d1dc}
.sd-inf dd{margin:0;color:#fff;white-space:nowrap}
.sd-inf .ok{color:#6fe36a}
.sd-g{display:flex;align-items:center;gap:1.2em;margin-top:1em}
.gg{position:relative;width:6.6em;height:6.6em;flex:none}
.gg svg{width:100%;height:100%;transform:rotate(-90deg)}
.gg circle{fill:none;stroke:#3d4759;stroke-width:3.4}
.gg circle.v{stroke-dasharray:var(--vv,0) 1;transition:stroke-dasharray 1.1s cubic-bezier(.2,.7,.2,1)}
.gg.c circle.v{stroke:#59d65a}.gg.m circle.v{stroke:#ef4b55}.gg.d circle.v{stroke:#4f7df0}
.gg b{position:absolute;inset:0;display:grid;place-items:center;font-size:1.6em;font-weight:800}
.gg.c b,.sd-g b.c{color:#6fe36a}.gg.m b,.sd-g b.m{color:#ff5a63}.gg.d b,.sd-g b.d{color:#6f97ff}
.sd-g p{margin:0;font-size:1.05em;line-height:1.5;color:#dfe5ee}
.sd-g p b{display:block;font-size:1.1em}
.cv[data-s="1"] .gg circle.v{--vv:var(--v)}
.sd-menu{padding:1.2em 0}
.sd-m{margin:0;padding:.7em 1.6em .55em;font-size:1.45em;font-weight:800;border-top:.07em solid rgba(255,255,255,.06)}
.sd-m:first-child{border-top:0}
.sd-s{margin:0;padding:.42em 2.8em;font-size:.95em;color:#d5dbe4}
.sd-s.on,.sd-m.on{background:#1f2a3a;position:relative}
.sd-s.on::after,.sd-m.on::after{content:"";position:absolute;right:1.6em;top:50%;width:.5em;height:.5em;margin-top:-.25em;background:#1fa564}

/* 오른쪽 작업 영역 */
.sv-main{flex:1;min-width:0;position:relative;background:#eef0f4}
.sv-view{position:absolute;inset:0;padding:1.8em 2em;transition:opacity .45s,transform .45s}
.sv-view.off{opacity:0;transform:translateX(1.5em);pointer-events:none}
.sv-card{background:#fff;border-radius:.4em;box-shadow:0 0 0 .08em #e3e6eb}
.sv-ch{display:flex;align-items:center;gap:1em;margin:0;padding:.9em 1.4em;border-bottom:.08em solid #eceef2;font-size:1.2em;font-weight:600;color:#222}
.sv-ch .per{display:flex;gap:.6em;margin-left:auto;font-size:.8em;font-weight:400;color:#777}
.sv-ch .per i{font-style:normal;padding:.1em .8em;border-radius:1em}
.sv-ch .per i.on{background:#9aa1ab;color:#fff}
.sv-ch .sv-lgd{display:flex;align-items:center;gap:.5em;margin-left:1em;font-size:.75em;font-weight:400;color:#555}
.sv-ch .sv-lgd i{width:.9em;height:.9em;border-radius:.15em;margin-left:.5em}
.sv-lgd .a,.ar.a{--c:#6f82e6}.sv-lgd .b,.ar.b{--c:#c9e04a}.sv-lgd .c{--c:#f0636a}.sv-lgd .d,.ar.d{--c:#2f8d7f}.sv-lgd .e,.ar.e{--c:#8f949b}
.sv-ch .sv-lgd i{background:var(--c)}
/* 01 대시보드 */
.sd-sel{margin:0 0 .9em;padding:.55em .9em;background:#1f2a3a;font-size:1em;font-weight:700;position:relative}
.sd-sel::after{content:"";position:absolute;right:.9em;top:50%;margin-top:-.15em;border:.35em solid transparent;border-top-color:#1fa564}
.sv-plot{padding:1.2em 1.8em 1.4em}
.sv-plot svg{display:block;width:100%;height:15em;overflow:visible}
.sv-plot .gr path{stroke:#e9ebef;stroke-width:1;vector-effect:non-scaling-stroke}
.ar{fill:var(--c);fill-opacity:.25;stroke:var(--c);stroke-width:1.4;vector-effect:non-scaling-stroke;transform-origin:50% 100%;transform:scaleY(0);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.ar.e{fill-opacity:.22}.ar.d{fill-opacity:.18}.ar.a{fill-opacity:.2}
.cv[data-s="1"] .ar{transform:none}
.cv[data-s="1"] .ar.d{transition-delay:.15s}.cv[data-s="1"] .ar.a{transition-delay:.3s}.cv[data-s="1"] .ar.b{transition-delay:.45s}
.sv-dg{display:grid;grid-template-columns:1fr 1fr;gap:1.4em;margin-top:1.4em}
.sv-ch .more{margin-left:auto;font-size:.72em;font-weight:400;color:#9aa1ab}
.vb{display:grid;grid-template-columns:repeat(4,1fr);height:13em;margin:1em 1.8em 1.2em 4em;border-left:.08em solid #dfe2e7;border-bottom:.08em solid #dfe2e7;background:repeating-linear-gradient(to top,transparent 0,transparent calc(25% - .08em),#eef0f3 calc(25% - .08em),#eef0f3 25%)}
.vb>span{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:.6em;border-right:.06em solid #f0f2f4}
.vb i{width:1.8em;height:0;transition:height 1s cubic-bezier(.2,.7,.2,1)}
.vb i.a{background:#8d9ce8}.vb i.d{background:#6fa8a0}.vb i.e{background:#8a8c90}
.vb em{position:absolute;left:0;right:0;bottom:-1.9em;font-style:normal;font-size:.78em;color:#777;text-align:center;white-space:nowrap}
.cv[data-s="1"] .vb i{height:var(--h)}
.cv[data-s="1"] .sv-dg .sv-card:nth-child(2) .vb i{transition-delay:.15s}
.cv[data-s="1"] .sv-dg .sv-card:nth-child(n+3) .vb i{transition-delay:.3s}
/* 02 필터 관리 */
.sv-fm{padding-bottom:1.2em}
.fm-box{margin:1.2em 1.6em 0;padding:.5em 1.2em;background:#f7f8fa;border:.08em solid #eceef2}
.fm-box p{display:flex;align-items:center;gap:1em;margin:0;height:2.7em;font-size:.98em;color:#444;white-space:nowrap}
.fm-box p>b{flex:none;font-weight:600;color:#333}
.fm-box p>b::before{content:"·";margin-right:.4em;color:#999}
.fm-box .b2{margin-left:1.2em}
.fm-box .sl{width:9em;height:1.9em;border:.08em solid #d5d9df;background:#fff;display:flex;align-items:center;padding:0 .6em;position:relative}
.fm-box .sl::after{content:"";position:absolute;right:.6em;top:50%;margin-top:-.12em;border:.3em solid transparent;border-top-color:#1fa564}
.fm-box .rd,.ap-md .rd{display:inline-flex;align-items:center;gap:.35em}
.fm-box .rd::before,.ap-md .rd::before{content:"";width:.95em;height:.95em;border:.08em solid #9aa2ad;border-radius:50%;background:#fff;transition:background .25s}
.fm-box .rd.on::before,.ap-md .rd.on::before{box-shadow:inset 0 0 0 .2em #fff;background:#555}
.fm-box .sv-btn{margin-left:auto;height:2em}
.fm-tb{margin:1em 1.6em 0;font-size:.92em}
.fm-tb .th,.fm-tb .tr{display:grid;grid-template-columns:6em 13em 1fr 8em 5.6em;align-items:center;gap:0 1em;padding:0 .8em;border-bottom:.08em solid #eceef2}
.fm-tb .th{height:2.8em;border-top:.12em solid #555;background:#f7f8fa;font-weight:600;color:#444}
.fm-tb .th span:nth-child(n+4){text-align:center}
.fm-tb .tr{min-height:3.4em;padding-block:.5em;color:#444;transition:opacity .35s,transform .35s,background .35s}
.fm-tb .tr.off{opacity:0;transform:translateY(.6em)}
.fm-tb .tr.hit{background:#f2fbf6}
.fm-tb .tr>span:nth-child(4){text-align:center}
.fm-tb .pr{height:1.1em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 12'%3E%3Cg fill='none' stroke='%231fa564' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2h8M3 8l3-3 3 3M15 8l3-3 3 3M27 4l3 3 3-3M39 4l3 3 3-3M39 10h8'/%3E%3C/g%3E%3C/svg%3E") left center/auto 100% no-repeat}
.fm-tb b{font-weight:600;color:#1a8f57;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-tb .cd{display:flex;flex-direction:column;gap:.25em;font-size:.95em;color:#333;min-width:0}
.fm-tb .cd u{text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s}
.fm-tb .cd em{display:inline-block;margin-right:.45em;padding:0 .45em;border-radius:.25em;background:#eef1f6;color:#4e5968;font-style:normal;font-size:.78em;font-weight:800;letter-spacing:.03em;line-height:1.6;transition:background .3s,color .3s}
.fm-tb .cd em.and{background:#e8f0fd;color:#2a5bd7}
.fm-tb .tr.hit .cd em{background:#1fa564;color:#fff}
.fm-tb .ac{justify-self:center;font-style:normal;font-size:.9em;font-weight:700;color:#fff;background:#e0443e;padding:.25em .9em;border-radius:.15em;transform:scale(.6);opacity:0;transition:transform .3s cubic-bezier(.3,.7,.3,1.4),opacity .3s}
.fm-tb .tr.on .ac{transform:none;opacity:1}
.sv-ch .fl-cnt{margin-left:auto;font-size:.85em;font-weight:500;color:#555}
.fl-cnt b{color:#00ad7c;font-size:1.25em}
.sv-btn{display:inline-flex;align-items:center;height:2.3em;padding:0 1.3em;border:.08em solid #c9ced6;background:#fff;font-size:1em;color:#555;transition:transform .15s,box-shadow .2s}
.sv-btn.r{background:#1fa564;border-color:#1fa564;color:#fff;font-weight:600}
.sv-btn.press,.mf-tool .press{transform:scale(.93);box-shadow:0 0 0 .35em rgba(31,165,100,.25)}
.mf-tool{display:flex;gap:.5em;margin:1em 1.6em 0;font-size:.88em;color:#444;white-space:nowrap}
.mf-tool span{border:.08em solid #c9ced6;background:#fff;padding:.3em .8em;transition:background .3s,color .3s,border-color .3s,transform .15s,box-shadow .2s}
.mf-tool .rc.on{background:#1fa564;border-color:#1fa564;color:#fff;font-weight:700}
.ckb{width:.95em;height:.95em;border:.08em solid #9aa2ad;border-radius:.12em;background:#fff;transition:background .2s}
.ckb.on{background:#1fa564;border-color:#1fa564;box-shadow:inset 0 0 0 .18em #fff}
/* 03 승인자 · 위임 */
.ap{display:grid;grid-template-columns:19em 1fr;gap:1.4em;height:100%}
.ap-org .og{margin:0;padding:1em 1.2em;list-style:none;font-size:1em;color:#333}
.og li{display:flex;align-items:center;gap:.6em;height:2.5em;padding:0 .6em;border-radius:.2em;transition:background .3s,color .3s}
.og li i{width:0;height:0;border:.32em solid transparent;border-left-color:#555;border-right:0}
.og li.op i{border:.32em solid transparent;border-top-color:#555;border-bottom:0;margin-top:.15em}
.og .d1{padding-left:1.8em}
.og li.sel.on{background:#e6f7f1;color:#16804c;font-weight:700}
.ap-dm{margin-left:auto;font-size:.8em;font-weight:400;color:#666;border:.08em solid #d5d9df;padding:.15em .7em}
.ap-tb{margin:.6em 1.6em 0;font-size:.92em}
.ap-tb .th,.ap-tb .tr{display:grid;grid-template-columns:1.6em 6.5em 1fr 8.5em 7.5em;align-items:center;gap:0 .8em;height:3em;padding:0 .6em;border-bottom:.08em solid #eceef2;text-align:center}
.ap-tb .th{border-top:.12em solid #555;background:#f7f8fa;font-weight:600;color:#444}
.ap-tb .tr{color:#444;transition:opacity .35s,transform .35s,background .35s}
.ap-tb .tr.off{opacity:0;transform:translateY(.6em)}
.ap-tb .tr.sel{background:#f2fbf6}
.ap-tb .au{justify-self:center;font-style:normal;font-size:.9em;font-weight:600;color:#16804c;padding:.1em .7em;border-radius:1em;background:#e6f7f1;transition:background .35s,color .35s}
.ap-tb .au.g{background:none;color:#666;font-weight:400}
.ap-tb .au.dg{background:#1fa564;color:#fff}
.ap-md{position:absolute;z-index:3;right:3em;top:4.2em;width:38em;background:#fff;border-radius:.5em;box-shadow:0 1.4em 4em rgba(10,22,48,.28),0 0 0 .08em #dfe3e8;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.ap-md.off{opacity:0;transform:translateY(1em);pointer-events:none}
.ap-md .md-x{margin-left:auto;color:#999;font-weight:400}
.ap-md dl{display:grid;grid-template-columns:8.5em 1fr;gap:1em 1em;align-items:center;margin:0;padding:1.4em 1.8em .4em;font-size:1em}
.ap-md dt{color:#555;font-weight:600}
.ap-md dd{margin:0;display:flex;align-items:center;gap:1em;color:#222;white-space:nowrap}
.ap-md .in{width:19em;height:2em;border:.08em solid #d5d9df;background:#fff;display:flex;align-items:center;padding:0 .6em;color:#222;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.ap-md .in.dt{width:9em}
.ap-md .in.fill{border-color:#1fa564;box-shadow:0 0 0 .18em rgba(31,165,100,.15)}
.ap-md .md-ft{display:flex;justify-content:flex-end;gap:.6em;padding:1em 1.8em 1.4em}
/* 알림 */
.sv-toast{position:absolute;left:50%;top:1.2em;z-index:4;display:flex;align-items:center;gap:1em;padding:1.1em 1.8em 1.1em 1.3em;border-radius:.8em;background:#222a37;color:#fff;font-size:1.15em;box-shadow:0 1em 3em rgba(10,22,48,.35);transform:translateX(-50%);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.sv-toast.off{opacity:0;transform:translate(-50%,1em)}
.sv-toast i{width:1.8em;height:1.8em;border-radius:50%;background:#2fb170;position:relative;flex:none}
.sv-toast i::after{content:"";position:absolute;left:.62em;top:.42em;width:.42em;height:.75em;border:.18em solid #fff;border-top:0;border-left:0;transform:rotate(40deg)}
.sv-toast small{display:block;font-size:.8em;color:#b9c2d0;margin-top:.15em}

/* 휴대폰: 왼쪽 메뉴·주소창·머리 메뉴 일부 숨김 */
@media(max-width:860px){
  .sv-side,.sv-who,.cv-url{display:none}
  .sv-logo{width:auto}
  .sv-top{gap:.4em;font-size:1.4em}
  .sv-top>span:nth-child(n+4){display:none}
  .sv-top>span[data-m="3"]{display:inline-flex}
  .sv-view{padding:1.4em}
  .sv-ch .sv-lgd,.sv-ch .per{display:none}
  .sv-dg{grid-template-columns:1fr 1fr}
  .vb{height:11em;margin-left:1.4em;margin-right:1.4em}
  .vb em{font-size:1.1em}
  .fm-box{display:none}
  .fm-tb{font-size:1.25em}
  .fm-tb .th,.fm-tb .tr{grid-template-columns:1fr 4.6em}
  .fm-tb .th>:not(:nth-child(2)):not(:nth-child(5)),.fm-tb .tr>:not(b):not(.ac){display:none}
  .fm-tb .tr{min-height:3.6em}
  .mf-tool span:nth-child(n+3):not(.rc){display:none}
  .mf-tool{font-size:1.2em}
  .ap{grid-template-columns:1fr}
  .ap-org{display:none}
  .ap-tb{font-size:1.25em}
  .ap-tb .th,.ap-tb .tr{grid-template-columns:1.4em 5.4em 1fr 6.4em;height:3.4em}
  .ap-tb .th>:nth-child(3),.ap-tb .tr>:nth-child(3){display:none}
  .ap-md{left:1.4em;right:1.4em;width:auto;top:5em;font-size:1.3em}
  .ap-md dl{grid-template-columns:6.5em 1fr}
  .ap-md .in{width:100%}.ap-md .in.dt{width:7em}
  .sv-toast{font-size:1.5em;top:1em;white-space:nowrap}
}
.cv-win{height:56em}
.cv-call h3{margin:.55em 0 .3em}
.cv-call p{margin:0}


/* ---- 3. 주요기능: 목업 머리 흰 머리 + 'Crinity' 로고, 왼쪽 어두운 레일 없음 ---- */
#func .ms,.mp .ms{--primary:#1f6fe0;--primary-t:#1a4fb5}
#func .ms-top{background:#fff;color:#1a4fb5;border-bottom:.08em solid #e6e8ec}
#func .ms-top>span{font-weight:800;font-size:1.25em;letter-spacing:-.02em}
#func .ms-top .ms-q{background:#f1f3f6;color:#8b95a1}
#func .ms-top svg{stroke:#5b6573}
#func .ms-rail{display:none}
#cp .ftb-tabs button b{font-weight:inherit}
#cp .ftb-tabs button span i{font-style:normal}
.ftb-k{margin-bottom:6px!important;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--primary-t)}
.ftb-lead{margin:-4px 0 14px!important;font-size:16px;color:var(--body)}
.gfl-vd{margin-top:22px!important;text-align:center}
.gfl-vd a{display:inline-flex!important;align-items:center;gap:10px;height:44px;padding:0 20px;border:1px solid var(--border);border-radius:100px;background:var(--card);font-size:15px;font-weight:600;color:var(--fg)}
.gfl-vd a i{width:0;height:0;border-left:9px solid var(--primary);border-top:6px solid transparent;border-bottom:6px solid transparent}
.gfl-vd a:hover{border-color:var(--primary)}
/* 보안메일 목업 (.ms 1em = 화면 폭/56) */
.ms-body.sm{display:flex;flex:1;min-height:0}
.sm-w{flex:1;min-width:0;padding:1em 1.2em}
.sm-tl{display:flex;align-items:center;gap:.8em;padding-bottom:.8em;border-bottom:.06em solid #eef0f3;font-size:.85em;white-space:nowrap;color:#555}
.sm-tl .snd{border:.08em solid #1f6fe0;color:#1f6fe0;border-radius:.25em;padding:.15em .6em}
.sm-tl>i{width:.06em;height:1em;background:#dde1e6}
.sm-tl span{display:inline-flex;align-items:center;gap:.3em}
.sm-tl em{width:.9em;height:.9em;border:.08em solid #9aa2ad;border-radius:.15em}
.sm-tl .on{color:#1f6fe0;font-weight:700}.sm-tl em.cb{background:#1f6fe0;border-color:#1f6fe0;box-shadow:inset 0 0 0 .18em #1f6fe0;position:relative}
.sm-tl em.cb::after{content:"";position:absolute;left:.25em;top:.12em;width:.28em;height:.48em;border:.12em solid #fff;border-top:0;border-left:0;transform:rotate(40deg)}
.sm-tl .ai{font-weight:800;color:#333}
.sm-f{display:grid;grid-template-columns:4.5em 1fr;align-items:center;gap:.6em;min-height:2.5em;border-bottom:.06em solid #f0f2f4;font-size:.85em}
.sm-f b{font-weight:600;color:#333}
.sm-f span{display:flex;gap:.4em;color:#222;white-space:nowrap;overflow:hidden}
.sm-f u{text-decoration:none;background:#eef4ff;color:#1a4fb5;border-radius:1em;padding:0 .6em}
.sm-set{margin-top:1em;border-radius:.6em;box-shadow:0 .6em 1.8em rgba(10,22,48,.16),0 0 0 .06em #dfe3e8;overflow:hidden;font-size:.85em}
.sm-sh{display:flex;align-items:center;gap:.5em;padding:.7em 1em;background:linear-gradient(135deg,#1a4fb5,#2a7bf0);color:#fff;font-weight:700}
.sm-sh svg{width:1.1em;height:1.1em;fill:none;stroke:#fff;stroke-width:2}
.sm-set dl{display:grid;grid-template-columns:4.8em 1fr;gap:.55em .8em;align-items:center;margin:0;padding:.9em 1em}
.sm-set dt{font-weight:600;color:#444}
.sm-set dd{margin:0;border:.06em solid #d8dce2;border-radius:.25em;padding:.25em .55em;color:#222}
.sm-set dd.seg{display:flex;padding:0;overflow:hidden}
.sm-set dd.seg span{flex:1;text-align:center;padding:.25em 0;color:#777}
.sm-set dd.seg span.on{background:#e8f1fd;color:#1a4fb5;font-weight:700}
.sm-r{flex:none;width:40%;padding:1em 1.1em;border-left:.06em solid #e5e8eb;background:#fbfbff;font-size:.85em}
.sm-rh{font-weight:700;margin-bottom:.6em}
.sm-st li{display:flex;align-items:center;gap:.5em;padding:.5em .7em;margin-bottom:.4em;border-radius:.4em;background:#fff;box-shadow:0 0 0 .06em #e5e8eb}
.sm-st b{font-weight:600;flex:1}
.sm-st span{font-size:.9em;color:#8b95a1}.sm-st span.ok{color:#1d7a46;font-weight:600}
.sm-st em{font-style:normal;font-size:.85em;padding:.1em .6em;border-radius:.3em;background:#fde8e8;color:#c42b2b;font-weight:700}
.sm-rcv{margin-top:.9em;padding:1em;border-radius:.6em;background:linear-gradient(135deg,#dbe8fb,#eaf2fd);text-align:center}
.sm-rk{font-size:.8em;color:#5a6b85;margin-bottom:.5em}
.sm-lk{width:7.5em;margin:0 auto .4em}
.sm-lk svg{display:block;width:100%;height:auto}
.sm-big{font-size:1.5em;font-weight:800;color:#1a4fb5}.sm-big small{font-size:.5em;font-weight:500;color:#333;margin-left:.3em}
.sm-pw{font-size:.85em;color:#444;margin-top:.3em}
.sm-in{display:flex;gap:.4em;margin:.6em auto 0;max-width:12em}
.sm-in span{flex:1;background:#fff;border:.06em solid #c9d2df;border-radius:.25em;padding:.2em .5em;text-align:left}
.sm-in b{background:#1f6fe0;color:#fff;border-radius:.25em;padding:.2em .7em}
.sm-exp{margin-top:.6em;font-size:.85em;font-weight:700;color:#e5484d}

/* ---- 반응형 ---- */
@media(max-width:1024px){#cp .hb-t{font-size:40px}.cv-win{height:50em}}
@media(max-width:860px){
  #cp .hb-d{font-size:16px}
  #cp .hb-d br.pc{display:none}
  .fx-row{flex-direction:column;gap:2px;width:calc(100vw - 24px);margin:22px auto 10px}
  .fx-nav{margin-left:0}
  #cp .fx-note{font-size:11px;text-align:center}
  .fx-k{display:none}
  #cp .fx-nav button{padding:0 7px;font-size:12.5px}
  .hb-vis{width:calc(100vw - 24px)}
  .cv-in{font-size:calc(100cqw / 76)}
  .cv-win{height:62em}
  .cv-nav,.cv-chrome .cv-url,.cv-apps,.cv-list{display:none}
  .cv-call{position:relative;left:auto;right:auto;bottom:auto;top:auto;width:auto;margin:0 0 12px;box-shadow:0 1em 3em rgba(0,0,0,.3);font-size:9.5px}
  .cv-ai{width:auto;left:1.2em;right:1.2em}
  .cv-secp{left:1.2em;right:1.2em;width:auto}
}


/* 목업 안 로고 = 실제 크리니티 로고 (/main/img/logo/logo_crinity_color.svg) */
.cv-logo{display:flex;align-items:center}
.cv-logo .crl{display:block;height:.74em;width:auto}
#func .ms-top>span{display:flex;align-items:center}
#func .ms-top .crl,.ms-top .crl{display:block;height:.88em;width:auto}

/* 탭으로 보기: 메일보기 탭 = 새 탭에서 전체 화면 (분할보기 아님) */
.cv-tool .aiw{font-weight:800;color:#333}
.cv-full{height:calc(100% - 4.8em);padding:2em 2.6em;overflow:hidden}
.cv-fh{display:flex;align-items:center;gap:.6em;margin:0 0 1.1em!important;font-size:1.6em;font-weight:700;color:#111}
.cv-fh i{font-style:normal;color:#9aa2ad;font-weight:400}
.cv-fh time{margin-left:auto;font-size:.7em;font-weight:400;color:#777}
.cv-full .cv-meta{grid-template-columns:5.5em 1fr}
.cv-meta a{margin-left:.4em}.cv-meta a.r{color:#e5484d}
.cv-att{margin-top:1.6em;width:62%;border:.1em solid #e3e6ea;border-radius:.3em;padding:1em 1.4em;font-size:1.15em;color:#555}
.cv-att p{display:flex;align-items:center;gap:1em;margin:0!important}
.cv-att p+p{margin-top:.6em!important}
.cv-att span{color:#555}.cv-att span.r{margin-left:auto;color:#333}
.cv-att .doc{font-style:normal;font-size:.7em;font-weight:800;color:#fff;background:#2b5bd7;border-radius:.2em;padding:.1em .3em}
.cv-att small{color:#888}
.cv-txt{margin-top:2em;font-size:1.25em;line-height:1.8;color:#222}
.cv-txt p{margin:0!important}
.cv-thr{margin-top:2.6em;border:.1em solid #e3e6ea;border-radius:.3em;font-size:1.15em}
.cv-thr>b{display:block;padding:.8em 1.2em;border-bottom:.1em solid #eef0f3;font-weight:700}
.cv-thr p{display:flex;align-items:center;gap:1em;margin:0!important;padding:.8em 1.2em;color:#333}
.cv-thr em{font-style:normal;font-size:.85em;border:.1em solid #c9ced6;border-radius:.3em;padding:0 .4em;color:#666}
.cv-thr time{margin-left:auto;color:#777}
/* AI 기능 목록 (펼쳐 보였다 접힘) */
.cv-ai .bd{position:relative}
.cv-ai .sel.open{border-color:var(--svc);box-shadow:0 0 0 .15em rgba(31,111,224,.18)}
.cv-dd{position:absolute;left:1.6em;right:1.6em;top:7.6em;z-index:2;margin:0;padding:0;list-style:none;border:.1em solid #777;background:#fff;box-shadow:0 .6em 1.6em rgba(10,22,48,.18);transition:opacity .2s,transform .25s;transform-origin:top}
.cv-dd.off{opacity:0;transform:scaleY(.9);pointer-events:none}
.cv-dd li{padding:.35em .7em;color:#222;transition:background .12s,color .12s}
.cv-dd li.on{background:#1a6fd8;color:#fff}
/* 받은메일함 분할보기 안 보안메일 그림 (모니터 + 자물쇠) */
.cv-sec svg.ic{width:11em;height:auto;flex:none}
.cv-sec .ic::before,.cv-sec .ic::after{content:none}
.cv-sec svg.ic{display:block;background:none;border-radius:0}
/* 첫 화면(1440×900)에서 AI 창·기능 목록·보안메일 설정이 다 보이도록 떠 있는 창을 위로 */
.cv-ai{top:-8.4em}
.cv-dd li{padding:.28em .7em}
.cv-secp{top:-.8em}
@media(max-width:860px){.cv-ai{top:.8em}.cv-secp{top:4.2em}}
/* 보안메일 설정 창: '보안 메일' 체크가 가려지지 않게 도구 줄 아래, 넓고 낮은 2열 카드로 */
.cv-secp{top:4.6em;left:16em;width:76em}
.cv-secp .bd{grid-template-columns:5.6em 1fr 5.6em 1fr;padding:.8em 1.3em 1em;gap:.6em 1em}
.cv-secp .opt{grid-column:1/5}
@media(max-width:860px){.cv-secp{top:4.2em;left:1.2em;width:auto}.cv-secp .bd{grid-template-columns:5.6em 1fr}.cv-secp .opt{grid-column:1/3}}
.cv-secp{left:16em;right:1.6em;width:auto}
/* 분할보기 읽기 창: 보안메일 그림이 첫 화면에 더 보이도록 위 여백 줄임 */
.cv-read{padding:1.2em 2.2em}
.cv-read h4{margin-bottom:.5em}
.cv-dmc{margin-top:.6em}
.cv-sec{margin-top:1em;padding:1.4em 2em}
@media(max-width:860px){.cv-secp{left:1.2em;right:1.2em}}
/* 10.19 13:38 보완 ① AI 목록이 창 밖으로 넘침 → 목록이 펼쳐지는 동안은 입력칸 자리에 목록이 들어감(창 안에서만) */
.cv-dd{position:static;margin:.5em 0 0;max-height:20em;overflow:hidden;transition:max-height .3s,opacity .2s}
.cv-dd.off{max-height:0;opacity:0;margin:0;border-width:0;box-shadow:none;transform:none}
.cv-ai.dd-open .ta,.cv-ai.dd-open .ft,.cv-ai.dd-open .res{display:none!important}
/* ② 생성하기 버튼과 글자 수 사이 띄움 */
.cv-ai .ft{display:flex!important;justify-content:space-between!important;align-items:center;gap:1.2em;margin-top:1em}
.cv-ai .go{margin-left:auto}
/* ③ 보안메일 설정: 가로로 긴 카드 → 처음의 세로 카드로. '보안 메일' 체크가 보이도록 오른쪽 위에 */
.cv-secp{top:-.4em;left:auto;right:1.6em;width:38em;font-size:1.15em}
.cv-secp .bd{grid-template-columns:5.2em 1fr;gap:.55em .9em;padding:.9em 1.2em 1em}
.cv-secp .opt{grid-column:1/3}
@media(max-width:860px){.cv-secp{top:4.2em;left:1.2em;right:1.2em;width:auto}}
.cv-dd li{padding:.22em .7em;font-size:.95em}
.cv-ai .ft{margin-top:1.3em}
.cv-secp{top:-3.4em}
@media(max-width:860px){.cv-secp{top:4.2em}}

/* 10.19 13:47 사용자: 제목 두 줄 '보안과 안정성을 먼저 생각한 / 웹메일 솔루션, 크리니티메시징' (휴대폰은 아랫줄을 이름 앞에서 한 번 더 나눔) */
.hb-t br.mo{display:none}
#cp .hb-t{font-size:50px;line-height:1.3}
@media(max-width:700px){.hb-t br.mo{display:inline}}
@media(max-width:1024px){#cp .hb-t{font-size:40px}}
@media(max-width:700px){#cp .hb-t{font-size:clamp(26px,7.4vw,32px)}}
/* 10.19 13:48 사용자: 히어로 칩 3개 = GS인증 1등급 · 온프레미스 · 프라이빗 클라우드, 모양·간격은 G-Cloud 칩(CSAP)과 똑같이 (아이콘-글자 간격 6px 하나만) */
/* 제목이 두 줄이 되며 목업이 내려간 만큼 AI 창을 위로 */
.cv-ai{top:-10.4em}
@media(max-width:860px){.cv-ai{top:.8em}}
.cv-secp{top:-5.4em}
@media(max-width:860px){.cv-secp{top:4.2em}}
/* 특장점 펼친 문장 아래 근거 각주 (회색 작은 글씨, 10.19 사용자) */
.fa-lead .fa-note{display:block;margin-top:6px;font-size:12px;font-weight:400;line-height:1.5;color:var(--muted)}
/* 각주를 문장 뒤에 이어서(줄바꿈 없이), 주장 앞 * 표시 (10.19 15:02) */
.fa-lead .fa-note{display:inline;margin:0 0 0 2px}
.fa-lead .fa-mk{font-size:.8em;font-weight:600;vertical-align:top;margin-right:1px;color:var(--muted)}
.fa-stat .nw{font-style:normal;white-space:nowrap}
/* 각주를 펼친 목록 맨 아래로 (10.19 15:09) — 문장 속 * 와 짝, 목록 다음에 차례로 나타남 */
#cp .fb-fn{margin-top:12px;font-size:12px;line-height:1.5;color:var(--muted)}
@media(min-width:1240px){
  .fb-more>.fb-fn{opacity:0;transition:opacity .35s}
  .fb-p.on .fb-more>.fb-fn{opacity:1;transition-delay:.5s}
}

/* AI Assistant 목업 (히어로 AI 단계와 같은 구성) */
.sm-tl .ai.on{color:#fff;background:#7b5cf0;border-radius:.25em;padding:.05em .45em}
.sa-sub span{background:#f3efff;border-radius:.25em;padding:0 .4em;color:#4a2fb8;font-weight:600}
.sa-body{padding:.9em 0;font-size:.85em;color:#333;line-height:1.6}.sa-body p{margin:0 0 .5em}
.sa-body .ms-lines{margin-top:.6em}
.sa-r .sm-rh{display:flex;align-items:center;gap:.4em}
.sa-ai{font-size:.8em;font-weight:800;color:#fff;background:#7b5cf0;border-radius:.25em;padding:.05em .4em}
.sa-fn li{padding:.45em .7em;margin-bottom:.3em;border-radius:.4em;background:#fff;box-shadow:0 0 0 .06em #e5e8eb;color:#555}
.sa-fn li.on{background:#f3efff;box-shadow:0 0 0 .08em #b9a6f7;color:#4a2fb8;font-weight:700}
.sa-res{margin-top:.8em;padding:.8em;border-radius:.5em;background:linear-gradient(135deg,#efe9ff,#f6f2ff)}
.sa-res small{display:block;font-size:.85em;color:#6b55c9;font-weight:700;margin-bottom:.3em}
.sa-res p{margin:0 0 .6em;color:#222;font-weight:600;line-height:1.45}
.sa-res b{display:inline-block;font-size:.9em;background:#7b5cf0;color:#fff;border-radius:.25em;padding:.2em .7em}

.ftb-ul .nw{font-style:normal;white-space:nowrap}

/* 주요기능: 그림·설명을 01~06 탭 높이 가운데에 */
@media(min-width:1201px){.ftb{align-items:center}}

/* 구성·도입 02: 견적 요청(G-Cloud와 같은 테두리 버튼) + Public 클라우드 줄 */
.pr-way .pr-btn.line{margin-top:20px}
#cp .pr-pub a{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--primary-t,var(--primary))}
#cp .pr-pub a:hover{text-decoration:underline}
/* 구성·도입 01: 제목 옆 인증·등록 로고 (작게) */
.pw-hd{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px}
.pr-marks{display:flex;flex-wrap:wrap;gap:6px 14px}
.pr-marks li{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted)}
.pr-marks img{width:34px;height:24px;object-fit:cover;object-position:center 52%}
.pr-marks img.mk-gov{width:20px;height:20px;object-fit:contain}
/* 주요기능 탭 6개: 1200px 이하 PC·태블릿에서 탭 이름이 두 줄로 꺾이지 않게 */
@media(max-width:1200px) and (min-width:861px){.ftb{grid-template-columns:228px minmax(0,1fr)!important}#cp .ftb-tabs button{gap:10px;padding:0 14px;font-size:15.5px;white-space:nowrap}}

/* ===== MB 전용 (2026.10.21) ===== */
/* 히어로 칩: G-Cloud 하늘색 → 초록 계열 */
#cp .hb-chips span{border-color:rgba(95,224,181,.45);background:rgba(0,173,124,.14);color:#a8ecd3}
/* 10.20 15:04 사용자 확정: 펼친 카드 = B 남색 카드 (히어로와 같은 계열) — 크리니티메시징·스팸브레이커와 같음 */
.fa-back{background:#fff}
@media(min-width:1240px){
  .fb-p.on{background:#141c2e!important;border-color:#141c2e!important;box-shadow:0 20px 44px rgba(10,22,48,.22)}
  .fb-p.on .fa-lab{color:#5fe0b5}
  .fb-p.on h3{color:#fff}
  .fb-p.on .fa-stat b{color:#3fd6a4}
  .fb-p.on .fa-stat span{color:rgba(255,255,255,.55)}
  .fb-p.on .fb-more{border-top-color:rgba(255,255,255,.12)}
  .fb-p.on .fa-lead{color:#fff}
  .fb-p.on .gk-ul li{color:rgba(255,255,255,.75)}
  .fb-p.on .gk-ul li::before{background:#3fd6a4}
  .fb-p.on .fb-art svg>ellipse{opacity:0}
}
@media(max-width:1239px){.fb-more,.fb-p.on .fb-more,.fb-p:not(.on) .fb-more{background:#fff!important}}
/* 히어로 목업 높이: 관리자 화면 */
.sv-win{height:56em}
@media(max-width:1024px){.sv-win{height:50em}}
@media(max-width:860px){.sv-win{height:60em}}
/* 구성·도입 01: 사용자 수 5개 규격 칩 (3열 × 2줄, 마지막 칸 = 2,001 User 이상 별도 문의) */
.pr-marks img.mk-cc{width:22px;height:22px;object-fit:contain;object-position:center}
.pr-marks img.mk-gs{width:36px;height:24px;object-fit:contain}
.pr-kinds img.mk-nipa{width:20px;height:20px;vertical-align:-5px;margin-left:4px}
.pr-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.pr-tiers a{display:flex;flex-direction:column;gap:2px;height:100%;padding:11px 14px 10px;border:1px solid var(--border);border-radius:12px;background:var(--card);transition:border-color .2s,box-shadow .2s}
.pr-tiers a:hover{border-color:var(--primary);box-shadow:0 6px 16px rgba(25,31,40,.07)}
.pr-tiers b{display:flex;align-items:baseline;gap:4px;font-size:16px;font-weight:700;color:var(--fg);white-space:nowrap}
.pr-tiers b small{font-size:12px;font-weight:600;color:var(--muted)}
.pr-tiers b::after{content:"";width:6px;height:6px;margin-left:auto;align-self:center;border-top:1.6px solid var(--muted);border-right:1.6px solid var(--muted);transform:rotate(45deg)}
.pr-tiers span{font-size:12px;color:var(--muted);white-space:nowrap}
.pr-tiers .pt-etc a{border-style:dashed;background:transparent}
.pr-tiers .pt-etc span{color:var(--primary-t);font-weight:600}
@media(max-width:700px){.pr-tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 10.20 15:06 사용자: 회색 바탕 위 붉은 그림자가 촌스러움 (어두운 바탕은 쓰지 않음) → 그림자·테두리는 중립 회색, 빨강은 글자·버튼·선에만 */
/* 10.20 15:23 사용자: 구축형 카드 = 얇은 빨간 테두리 + 검정 그림자 */
.pr-card.main{border:1px solid var(--primary);box-shadow:0 16px 40px rgba(0,0,0,.08)}
.fq[open]{border-color:#d5d9e0!important;box-shadow:0 10px 28px rgba(25,31,40,.06)!important}
@media(max-width:860px){#cp .ftb-tabs button[aria-selected=true] span{color:#5fe0b5}}

/* 10.20 15:33 사용자: 특장점 소개 문장 '검사와 / 8중 필터로' 에서 줄바꿈 (휴대폰은 이어서) */
@media(max-width:860px){.sx-d br.sx-br{display:none}}

/* ===== 주요기능 화면 목업 (메일브레이커 관리자 화면 느낌 — SB 목업 틀을 초록으로, .ms 1em = 화면 폭/44) ===== */
#func .ms.sbm{--primary:#1fa564;--primary-t:#177d4b;background:#eef0f4;color:#333;font-size:calc(100cqw/44)}
.sbm-top{flex:none;display:flex;align-items:center;gap:1.2em;height:3em;padding:0 1.2em;background:#fff;border-bottom:.14em solid #1fa564;white-space:nowrap}
.sbm-top .sbm-lg{display:flex;align-items:center;margin-right:.8em}
.sbm-top .sbm-lg img{display:block;height:.63em;width:auto}
.sbm-top .sbm-lg svg{width:1.05em;height:1.05em}
.sbm-top>span{font-size:.78em;color:#444;padding:.2em .7em;border-radius:1em}
.sbm-top>span.on{background:#1fa564;color:#fff;font-weight:700}
.sbm-body{flex:1;min-height:0;padding:1.1em 1.2em;display:flex;flex-direction:column;gap:1em}
.sbm-body.sbm-2{flex-direction:row}
.sbm-card{background:#fff;border-radius:.3em;box-shadow:0 0 0 .06em #e3e6eb;overflow:hidden}
.sbm-ch{display:flex;align-items:center;gap:.6em;margin:0;padding:.65em 1em;border-bottom:.06em solid #eceef2;font-size:.9em;font-weight:700;color:#222}
.sbm-ch>span{margin-left:auto;font-size:.82em;font-weight:500;color:#8b95a1}
.sbm-ch .sbm-x{border:.08em solid #c9ced6;color:#555;padding:.1em .6em}
.sbm-btn{display:inline-flex;align-items:center;height:1.9em;padding:0 1em;border:.06em solid #c9ced6;background:#fff;font-size:.85em;color:#555}
.sbm-btn.r{background:#1fa564;border-color:#1fa564;color:#fff;font-weight:600}
.sbm-top>span{font-size:.74em}
.ck,.rd{display:inline-flex;align-items:center;gap:.3em}
.ck::before{content:"";width:.85em;height:.85em;border:.07em solid #9aa2ad;border-radius:.1em;background:#fff}
.ck.on::before{background:#555;box-shadow:inset 0 0 0 .15em #fff}
.rd::before{content:"";width:.85em;height:.85em;border:.07em solid #9aa2ad;border-radius:50%;background:#fff}
.rd.on::before{background:#555;box-shadow:inset 0 0 0 .17em #fff}
.tg{position:relative;width:2.4em;height:1.3em;border-radius:1em;background:#cfd4db;flex:none}
.tg::after{content:"";position:absolute;left:.15em;top:.15em;width:1em;height:1em;border-radius:50%;background:#fff}
.tg.on{background:#1fa564}.tg.on::after{left:1.25em}
/* 1. 필터 추가 */
.mbf{flex:1;padding-bottom:.8em}
.mbf-f{margin:.7em 1em 0;padding:.3em .9em;background:#f7f8fa;border:.06em solid #eceef2}
.mbf-f p{display:flex;align-items:center;gap:.7em;margin:0;height:2.3em;font-size:.8em;white-space:nowrap}
.mbf-f b{width:4.6em;flex:none;font-weight:600;color:#333}.mbf-f .b2{margin-left:.8em;width:4.6em}
.mbf-f u,.mbf-c u{text-decoration:none;display:inline-flex;align-items:center;height:1.8em;padding:0 .6em;border:.07em solid #d5d9df;background:#fff;color:#333;min-width:6em}
.mbf-f u.w{min-width:11em;color:#177d4b;font-weight:600}.mbf-f u.e{color:#8b95a1}
.mbf-h{margin:.8em 1em .35em;font-size:.8em;font-weight:700;color:#222}
.mbf-c{display:flex;align-items:center;gap:.5em;margin:0 1em .4em;padding:.35em .6em;border-radius:.3em;background:#f6faf8;font-size:.78em;white-space:nowrap}
.mbf-c u.w{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.mbf-c .op{flex:none;width:3.2em;text-align:center;font-size:.85em;font-weight:800;letter-spacing:.04em;padding:.15em 0;border-radius:.3em;background:#eef1f6;color:#4e5968}
.mbf-c .op.or{background:#1fa564;color:#fff}.mbf-c .op.and{background:#2a5bd7;color:#fff}
.mbf-r{display:flex;align-items:center;gap:.9em;margin:.55em 1em 0;font-size:.78em;white-space:nowrap}
.mbf-r>b{width:5.2em;flex:none;font-weight:700;color:#222}
.mbf-r .sbm-btn{margin-left:auto}
/* 2. 승인결재함 */
.mba{flex:1.05;min-width:0;display:flex;flex-direction:column}
.mba-r{display:grid;grid-template-columns:1fr auto;gap:.1em .6em;padding:.6em 1em;border-bottom:.06em solid #eef0f3;font-size:.8em}
.mba-r b{font-weight:600;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mba-r small{grid-row:2;color:#8b95a1;font-size:.88em}
.mba-r em{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;font-size:.82em;font-weight:700;padding:.1em .55em;border-radius:.25em;background:#fdecee;color:#c33240}
.mba-r.on{background:#f2fbf6;box-shadow:inset .2em 0 0 #1fa564}
.mba-dg{display:flex;align-items:center;gap:.5em;margin:auto 1em .9em;padding:.5em .7em;border-radius:.35em;background:#e6f7f1;font-size:.72em;color:#177d4b;font-weight:600}
.mba-dg i{width:1em;height:1em;border-radius:50%;background:#1fa564;flex:none}
.mbd{flex:1;min-width:0;padding-bottom:.8em}
.mbd dl{display:grid;grid-template-columns:auto 1fr;gap:.45em .9em;margin:0;padding:.8em 1em 0;font-size:.78em}
.mbd dt{color:#8b95a1}.mbd dd{margin:0;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbd dd b{color:#c33240}.mbd dd small{font-size:.85em;color:#a06a00;background:#fff4d6;padding:0 .35em;border-radius:.2em;margin-left:.2em}
.mbd-q{margin:.6em 1em 0;padding:.45em .7em;border-radius:.3em;background:#f7f8fa;font-size:.72em;color:#6b7684;font-family:ui-monospace,Menlo,monospace;white-space:nowrap;overflow:hidden}
.mbd-l{margin:.7em 1em .3em;font-size:.75em;font-weight:700;color:#444}
.mbd-in{margin:0 1em;padding:.45em .6em;border:.07em solid #d5d9df;font-size:.72em;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbd-ft{display:flex;gap:.4em;margin:.7em 1em 0}
/* 3. 보안메일: 실제 화면(제품소개서 23쪽) — 크리니티 웹메일 보안 메일 팝업(파랑) + 받는 사람 화면(연파랑) */
.mbs{flex:1;display:flex;flex-direction:column;gap:.9em;padding:1.1em 1.3em;background:#eef0f4}
.mbs-f{display:flex;gap:.4em;margin:0;padding:0;list-style:none;font-size:.72em}
#func .mbs-f li{position:relative;flex:1;display:block;padding:.45em 0;border-radius:2em;background:#fff;text-align:center;color:#6b7684;box-shadow:0 0 0 .08em #e3e6eb}
.mbs-f li b{font-weight:600}
#func .mbs-f li.on{background:#1fa564;color:#fff;box-shadow:none}.mbs-f li.on b{font-weight:800}
.mbs-m{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:.9em;min-height:0}
.sm-pop{min-width:0;overflow:hidden;background:#fff;border-radius:.3em;box-shadow:0 0 0 .06em #e3e6eb,0 .5em 1.4em rgba(25,31,40,.08);padding:1em 1.1em;font-size:.78em;color:#333}
.sm-pop .h{margin:0 0 .9em;padding-bottom:.6em;font-size:1.25em;color:#222;background:linear-gradient(#0b63e5,#0b63e5) left bottom/60% .18em no-repeat,linear-gradient(#e6e8ec,#e6e8ec) left bottom/100% .06em no-repeat}
.sm-pop dl{display:grid;grid-template-columns:auto 1fr;gap:.6em .9em;align-items:center;margin:0}
.sm-pop dt{color:#444;white-space:nowrap}
.sm-pop dd{margin:0;display:flex;gap:.7em;white-space:nowrap;min-width:0}
.sm-pop .rd.on::before{background:#555}
.sm-pop .in{flex:1;padding:.4em .6em;border:.07em solid #cfd4db;border-radius:.2em;color:#222}
.sm-pop .nt{color:#555;font-size:.92em}
.sm-pop .sm-bt{display:flex;justify-content:center;gap:.4em;margin-top:.9em}
.sm-pop .sm-bt u{display:inline-block;text-decoration:none;padding:.35em 1.1em;border-radius:.2em;background:#eceef1;color:#555;font-size:1em;line-height:1.3}
.sm-pop .sm-bt u.ok{background:#0b63e5;color:#fff;font-weight:700}
.sm-rc{min-width:0;overflow:hidden;display:flex;flex-direction:column;gap:.7em;padding:1em;border-radius:.3em;background:#dce8f6 repeating-linear-gradient(135deg,rgba(255,255,255,.35) 0 .15em,transparent .15em .5em);box-shadow:0 0 0 .06em #c9d8ea;font-size:.66em;color:#222}
.rc-hd{display:flex;gap:.7em;align-items:center;min-width:0}
.rc-mon{width:4.6em;height:4em;flex:none}
.rc-hd p{margin:0;line-height:1.45}
.rc-hd .t{font-size:1.7em;font-weight:800;color:#1b4fa0;line-height:1.2;margin-bottom:.25em}
.rc-hd .t small{font-size:.5em;font-weight:500;color:#222;margin-left:.3em}
#func .rc-bx{flex:1;align-items:center;display:flex;flex-direction:column;justify-content:center;gap:.6em;padding:.8em;border-radius:.3em;background:#fff;box-shadow:0 0 0 .06em #c9d8ea;text-align:center}
#func .rc-bx p{margin:0;font-weight:600;text-align:center}
#func .rc-bx .pw{display:flex;align-items:center;justify-content:center;gap:.4em}
.rc-bx .pw span{width:7em;height:1.7em;border:.1em solid #222}
.rc-bx .pw u{display:inline-block;line-height:1.3;text-decoration:none;padding:.3em .8em;background:#1b4fa0;color:#fff;font-weight:700}
/* 4. 통계 */
.sbm-st{flex:1;display:flex;flex-direction:column}
.st-k{display:grid;grid-template-columns:repeat(4,1fr);gap:.6em;padding:.8em 1em 0}
.st-k span{padding:.5em .8em;border-radius:.4em;background:#f1f4fd}
.st-k span.r{background:#f4f9de}.st-k span.y{background:#fdecee}.st-k span.g{background:#e6f3f1}
.st-k small{display:block;font-size:.72em;color:#6b7684}.st-k b{font-size:1.15em;color:#191f28}
.st-ch{padding:.8em 1em 0}
.st-ch svg{display:block;width:100%;height:5.8em}
.st-ch p{display:flex;justify-content:space-around;margin:.3em 0 0;font-size:.68em;color:#8b95a1}
.st-tb{margin:.6em 1em 0;font-size:.78em}
.st-tb p{display:grid;grid-template-columns:1.8fr repeat(5,1fr);margin:0;height:2.1em;align-items:center;border-bottom:.06em solid #eef0f3;padding:0 .4em}
.st-tb p.h{background:#f7f8fa;font-weight:700;border-top:.1em solid #555}
/* 5. 감사로그 + 관리자 보안 */
.mbl{flex:1.25;min-width:0}
.mbl-tb{margin:.5em 1em 0;font-size:.78em}
.mbl-tb p{display:grid;grid-template-columns:6.4em 5.4em 1fr 3.6em;gap:.5em;align-items:center;margin:0;height:2.35em;padding:0 .4em;border-bottom:.06em solid #eef0f3;white-space:nowrap}
.mbl-tb p.h{background:#f7f8fa;font-weight:700;border-top:.1em solid #555}
.mbl-tb span{overflow:hidden;text-overflow:ellipsis}
.mbl-tb em{justify-self:start;font-style:normal;font-size:.9em;font-weight:700;padding:0 .45em;border-radius:.2em;background:#e6f7f1;color:#177d4b}
.mbl-tb em.b{background:#e8f0fd;color:#2a5bd7}.mbl-tb em.g{background:#f1f3f6;color:#4e5968}.mbl-tb em.r{background:#fdecee;color:#c33240}
.sbm-ac{flex:1;min-width:0}
.sbm-ac dl{display:grid;grid-template-columns:auto 1fr;gap:.65em 1em;margin:0;padding:.9em 1.1em;font-size:.8em;align-items:center}
.sbm-ac dt{font-weight:600;color:#444;white-space:nowrap}
.sbm-ac dd{margin:0;display:flex;align-items:center;gap:.6em;color:#6b7684;white-space:nowrap}
.sbm-ac u,.mbm-s u{text-decoration:none;border:.07em solid #d5d9df;padding:.05em .55em;color:#333}
/* 6. 도메인 · 릴레이 · API */
.mbm{flex:none}
.mbm-tb{margin:.5em 1em .7em;font-size:.78em}
.mbm-tb p{display:grid;grid-template-columns:1.4fr .8fr 1.2fr 5em;gap:.5em;align-items:center;margin:0;height:2.3em;padding:0 .5em;border-bottom:.06em solid #eef0f3;white-space:nowrap}
.mbm-tb p.h{background:#f7f8fa;font-weight:700;border-top:.1em solid #555}
.mbm-tb b{font-weight:600;color:#1a8f57;overflow:hidden;text-overflow:ellipsis}
.mbm-2{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1.3fr;gap:1em}
.mbm-s dl{display:grid;grid-template-columns:auto 1fr;gap:.55em 1em;margin:0;padding:.8em 1.1em;font-size:.8em;align-items:center}
.mbm-s dt{font-weight:600;color:#444}.mbm-s dd{margin:0;display:flex;align-items:center;gap:.5em;color:#6b7684}
.mbm-a .api{display:flex;flex-wrap:wrap;gap:.4em;margin:0;padding:.8em 1em;font-size:.74em}
.mbm-a .api span{padding:.25em .7em;border-radius:1em;background:#e6f7f1;color:#177d4b;font-weight:600}