.top.oc-hero-top{position:relative;height:min(47.9167vw,920px);min-height:660px;padding:0;overflow:hidden;background:#eaf6fc;isolation:isolate}.oc-hero-media{position:absolute;z-index:0;inset:0;display:grid;height:100%;place-items:center}.oc-hero-top:after{position:absolute;z-index:1;inset:0;content:"";pointer-events:none;background:linear-gradient(90deg,rgba(5,27,50,.10),transparent 31%,transparent 74%,rgba(12,61,96,.04))}@keyframes ocHeroDrift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-8px,0)}}.oc-hero-canvas{position:relative;width:min(86vw,1640px);aspect-ratio:1823/863;animation:ocHeroDrift 7s ease-in-out infinite;will-change:transform}.oc-hero-canvas .oc-hero-image{display:block;width:100%;height:100%;max-width:none;object-fit:contain;animation:none}.oc-feature-hotspot{position:absolute;z-index:2;border:0;border-radius:12px;background-image:url('../images/home-hero-v1.png');background-repeat:no-repeat;opacity:0;cursor:pointer;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}.oc-feature-hotspot:after{position:absolute;top:10px;left:12px;content:attr(data-label);padding:7px 11px;border-radius:999px;background:#078abb;color:#fff;font-size:13px;font-weight:700;box-shadow:0 6px 18px rgba(0,71,108,.25);white-space:nowrap}.oc-feature-hotspot:hover,.oc-feature-hotspot:focus-visible,.oc-feature-hotspot.is-active{opacity:1;transform:translateY(-8px) scale(1.012);box-shadow:0 0 0 2px #28b9d4,0 18px 38px rgba(0,62,95,.3);outline:none}.oc-hotspot-approval{left:7.5%;top:5.8%;width:25.5%;height:36.5%;background-size:392.2% auto;background-position:10.1% 9.1%}.oc-hotspot-mail{left:3.6%;top:45.5%;width:25.5%;height:42%;background-size:392.2% auto;background-position:4.8% 78.4%}.oc-hotspot-portal{left:23.8%;top:15.5%;width:53.2%;height:73.5%;background-size:188% auto;background-position:50.9% 58.5%}.oc-hotspot-org{left:76.4%;top:6.5%;width:16.5%;height:46%;background-size:606.1% auto;background-position:91.5% 12%}.oc-hotspot-ai{left:75.8%;top:50.5%;width:20%;height:44%;background-size:500% auto;background-position:94.8% 90%}.top.oc-hero-top .oc-feature-panel{position:absolute;z-index:4;right:7%;bottom:26px;left:7%;display:grid;grid-template-columns:minmax(220px,.75fr) minmax(360px,1.6fr) auto;gap:38px;align-items:center;height:auto!important;padding:22px 26px;border-top:3px solid #17b7d1;background:rgba(5,30,51,.88);color:#fff;box-shadow:0 18px 45px rgba(5,32,52,.24);backdrop-filter:blur(10px)}.oc-feature-panel div,.oc-feature-panel h1,.oc-feature-panel p{height:auto!important}.oc-feature-kicker{display:block;margin-bottom:5px;color:#61d9e7;font-size:12px;font-weight:800;letter-spacing:.12em}.oc-feature-panel h1{margin:0;color:#fff;font-size:clamp(25px,2vw,38px);font-weight:800}.oc-feature-panel p{margin:0;color:rgba(255,255,255,.88);font-size:clamp(14px,1vw,18px);line-height:1.65}.oc-feature-controls{display:flex;align-items:center;gap:12px;white-space:nowrap}.oc-feature-controls button{width:42px;height:42px;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:26px;line-height:1;cursor:pointer}.oc-feature-count{min-width:48px;text-align:center;font-size:16px}@media(max-width:900px){.top.oc-hero-top{height:760px;min-height:0}.oc-hero-media{align-items:start;padding-top:70px}.oc-hero-canvas{width:118vw}.top.oc-hero-top .oc-feature-panel{right:20px;bottom:24px;left:20px;grid-template-columns:1fr auto;gap:14px 18px;padding:18px}.oc-feature-description{grid-column:1/-1;grid-row:2}.oc-feature-panel p{font-size:14px}}@media(prefers-reduced-motion:reduce){.oc-hero-canvas{animation:none}.oc-feature-hotspot{transition:none}}

/* 개별 원본 화면 전체 펼침 전환 */
.oc-feature-hotspot{
  overflow:hidden;
  background-color:#f4f9fc;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  opacity:0;
  transform:none;
  transition:left .68s cubic-bezier(.2,.78,.2,1),top .68s cubic-bezier(.2,.78,.2,1),width .68s cubic-bezier(.2,.78,.2,1),height .68s cubic-bezier(.2,.78,.2,1),opacity .28s ease,box-shadow .5s ease,border-radius .5s ease;
}
.oc-hotspot-approval{background-image:url('../images/screen-approval.png')}
.oc-hotspot-mail{background-image:url('../images/screen-mail.png')}
.oc-hotspot-portal{background-image:url('../images/screen-portal.png')}
.oc-hotspot-org{background-image:url('../images/screen-messenger.png')}
.oc-hotspot-ai{background-image:url('../images/screen-ai.png')}
.oc-feature-hotspot:hover,.oc-feature-hotspot:focus-visible{opacity:.92;transform:none}
.oc-feature-hotspot.is-active{
  z-index:9;
  left:2.5%;
  top:2.5%;
  width:95%;
  height:78%;
  opacity:1;
  transform:none;
  border:2px solid rgba(60,186,218,.9);
  border-radius:10px;
  background-size:contain;
  background-position:center;
  box-shadow:0 0 0 1200px rgba(6,30,48,.66),0 28px 70px rgba(3,29,48,.44);
}
.oc-feature-hotspot.is-active::after{top:14px;left:16px}
.oc-hero-top .oc-feature-panel{z-index:12}
@media(max-width:900px){
  .oc-feature-hotspot.is-active{left:3%;top:3%;width:94%;height:66%;background-size:contain}
}

/* 초기에는 합성 바탕만 표시하고, 클릭했을 때 개별 원본을 펼친다. */
.oc-feature-hotspot{opacity:1;background-color:transparent;background-image:none;box-shadow:none}
.oc-hotspot-approval,.oc-hotspot-mail,.oc-hotspot-portal,.oc-hotspot-org,.oc-hotspot-ai{background-image:none}
.oc-feature-hotspot::after{opacity:0;transition:opacity .2s ease}
.oc-feature-hotspot:hover,.oc-feature-hotspot:focus-visible{opacity:1;transform:none;background-image:none;box-shadow:inset 0 0 0 2px rgba(22,142,193,.55)}
.oc-feature-hotspot:hover::after,.oc-feature-hotspot:focus-visible::after{opacity:1}
.oc-hotspot-approval.is-active{background-image:url('../images/screen-approval.png')}
.oc-hotspot-mail.is-active{background-image:url('../images/screen-mail.png')}
.oc-hotspot-portal.is-active{background-image:url('../images/screen-portal.png')}
.oc-hotspot-org.is-active{background-image:url('../images/screen-messenger.png')}
.oc-hotspot-ai.is-active{background-image:url('../images/screen-ai.png')}
.oc-feature-hotspot.is-active{background-color:#f4f9fc;background-repeat:no-repeat;background-position:center;background-size:contain}
.oc-feature-hotspot.is-active::after{opacity:1}

/* 원본 비율 유지 + 우측 설명 패널 */
.oc-feature-hotspot.is-active{
  background-size:72% auto;
  background-position:2.5% center;
  background-color:#f8fbfd;
}
.oc-hotspot-org.is-active,.oc-hotspot-ai.is-active{
  background-size:auto 92%;
  background-position:24% center;
}
.top.oc-hero-top .oc-feature-panel{
  top:14%;
  right:4.2%;
  bottom:auto;
  left:auto;
  width:24%;
  min-height:52%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:20px;
  padding:28px 30px;
  border-top:0;
  border-left:3px solid #17b7d1;
  background:rgba(8,42,66,.96);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(24px);
  transition:opacity .32s ease,transform .48s cubic-bezier(.2,.8,.2,1),visibility .32s;
}
.oc-hero-top.has-active .oc-feature-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(0);
}
.oc-feature-panel .oc-feature-description{width:100%}
.oc-feature-panel .oc-feature-description p{font-size:16px;line-height:1.75;text-align:left}
.oc-feature-panel .oc-feature-controls{margin-top:auto}
@media(max-width:900px){
  .oc-feature-hotspot.is-active{background-size:contain;background-position:center 5%;height:66%}
  .oc-hotspot-org.is-active,.oc-hotspot-ai.is-active{background-size:auto 72%;background-position:center 5%}
  .top.oc-hero-top .oc-feature-panel{top:auto;right:3%;bottom:3%;left:3%;width:auto;min-height:26%;padding:18px 20px;border-top:3px solid #17b7d1;border-left:0}
}

/* 포털 1919x921 기준 데스크톱 웹 화면 */
.top.oc-hero-top{
  height:clamp(780px,52vw,1000px);
  min-height:780px;
}
.oc-hero-canvas{
  width:min(94vw,1919px);
  aspect-ratio:1919/921;
}
.oc-feature-hotspot.is-active{
  left:1.5%;
  top:3%;
  width:97%;
  height:88%;
  border-radius:8px;
  background-size:74% auto;
  background-position:1.5% center;
}
.oc-hotspot-org.is-active,.oc-hotspot-ai.is-active{
  background-size:auto 94%;
  background-position:27% center;
}
.top.oc-hero-top .oc-feature-panel{
  top:13%;
  right:3.2%;
  width:23%;
  min-height:61%;
}
@media(max-width:900px){
  .top.oc-hero-top{height:820px;min-height:820px}
  .oc-hero-canvas{width:124vw;aspect-ratio:1919/921}
  .oc-feature-hotspot.is-active{left:2%;top:2%;width:96%;height:72%;background-size:contain;background-position:center}
  .top.oc-hero-top .oc-feature-panel{top:auto;right:2%;bottom:2%;left:2%;width:auto;min-height:24%}
}

/* 확대 화면 좌우 폭 보정 */
.oc-feature-hotspot.is-active{
  left:7%;
  width:86%;
  background-size:68% auto;
  background-position:1.5% center;
}
.oc-hotspot-org.is-active,.oc-hotspot-ai.is-active{
  background-size:auto 92%;
  background-position:25% center;
}
.top.oc-hero-top .oc-feature-panel{
  right:9%;
  width:23%;
}
@media(max-width:900px){
  .oc-feature-hotspot.is-active{left:4%;width:92%;background-size:contain;background-position:center}
  .top.oc-hero-top .oc-feature-panel{right:4%;left:4%;width:auto}
}

/* 두 번째 OfficeCore 개념 섹션 */
.oc-concept{padding:118px 0 126px;background:#fff}
.oc-concept-head{display:grid;grid-template-columns:minmax(420px,.9fr) minmax(420px,1.1fr);gap:80px;align-items:end;margin-bottom:58px}
.oc-concept-head h2{margin:0;color:#0b2941;font-size:clamp(38px,4vw,58px);line-height:1.18}
.oc-concept-head>p{max-width:620px;margin:0 0 6px;color:#607583;font-size:18px;line-height:1.85}
.oc-concept-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #d7e4eb;border-left:1px solid #d7e4eb}
.oc-concept-card{min-height:430px;padding:38px 34px 36px;border-right:1px solid #d7e4eb;border-bottom:1px solid #d7e4eb;background:#fff;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.oc-concept-card:hover{z-index:1;transform:translateY(-6px);border-color:#9bcddd;box-shadow:0 22px 55px rgba(11,67,96,.11)}
.oc-concept-no{display:block;margin-bottom:56px;color:#168ec1;font-size:13px;font-weight:900;letter-spacing:.08em}
.oc-concept-card h3{margin:0 0 18px;color:#0b2941;font-size:26px;line-height:1.4}
.oc-concept-summary{min-height:82px;margin:0 0 24px;color:#587080;font-size:16px;line-height:1.75}
.oc-concept-card ul{margin:0;padding:22px 0 0;border-top:1px solid #e1e9ee;list-style:none}
.oc-concept-card li{position:relative;margin:11px 0;padding-left:17px;color:#405969;font-size:14px;line-height:1.6}
.oc-concept-card li:before{position:absolute;top:.68em;left:0;width:5px;height:5px;border-radius:50%;background:#20aeba;content:""}
@media(max-width:900px){.oc-concept{padding:86px 0}.oc-concept-head{grid-template-columns:1fr;gap:24px}.oc-concept-grid{grid-template-columns:1fr}.oc-concept-card{min-height:0}.oc-concept-no{margin-bottom:30px}}

/* 두 번째 섹션 질문·답변 타이틀 보정 */
.oc-concept-head{
  grid-template-columns:1fr;
  gap:22px;
  align-items:start;
}
.oc-concept-head .eyebrow{
  margin-bottom:16px;
  font-size:18px;
  letter-spacing:.1em;
}
.oc-concept-head h2{
  font-size:clamp(32px,3.1vw,46px);
  line-height:1.25;
  white-space:nowrap;
}
.oc-concept-head>p{
  max-width:760px;
  margin:0 0 0 auto;
  font-size:17px;
}
@media(max-width:900px){
  .oc-concept-head h2{white-space:normal;font-size:clamp(30px,6vw,42px)}
  .oc-concept-head>p{margin-left:0}
}

/* 세 번째 제품 화면: 원본 이미지 중심의 밝은 구성 */
.product{
  padding:112px 0 124px;
  color:#0b2941;
  background:#f6fafc;
}
.product .section-head{margin-bottom:34px}
.product .section-head .eyebrow{color:#168ec1}
.product .section-head p{color:#607583}
.product .tabs{gap:8px;margin-bottom:22px}
.product .tab{
  border-color:#bdd2de;
  color:#496474;
  background:#fff;
}
.product .tab:hover{border-color:#168ec1;color:#168ec1}
.product .tab[aria-selected="true"]{
  border-color:#0b2941;
  color:#fff;
  background:#0b2941;
}
.product-panel{
  width:min(1120px,100%);
  margin:0 auto;
  overflow:hidden;
  border:1px solid #d7e4eb;
  border-radius:10px;
  background:#fff;
  box-shadow:0 22px 60px rgba(22,74,105,.12);
}
.product-panel img{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  background:#fff;
}
.product-note{
  align-items:center;
  border-top:1px solid #dce7ed;
  color:#0b2941;
  background:#fff;
}
.product-note span{color:#607583}
@media(max-width:900px){.product{padding:82px 0 92px}}

/* 두 번째 소개와 제품 화면을 하나의 연속 영역으로 연결 */
.oc-concept{
  padding-bottom:54px;
  background:#fff;
}
.product{
  position:relative;
  padding:34px 0 124px;
  background:#fff;
}
.product::before{
  position:absolute;
  top:0;
  left:50%;
  width:min(calc(100% - 40px),1180px);
  height:1px;
  background:#dce7ed;
  content:"";
  transform:translateX(-50%);
}
.product .section-head{margin-top:28px}
@media(max-width:900px){
  .oc-concept{padding-bottom:36px}
  .product{padding-top:28px}
}

.product::before{display:none}

/* 두 번째 섹션 하단에 연속 배치하는 제품 원본 화면 */
.oc-concept{padding-bottom:120px}
.product-flow{width:min(calc(100% - 40px),1180px);margin:90px auto 0}
.product-flow-head{max-width:760px;margin-bottom:46px}
.product-flow-head h2{margin:0 0 15px;color:#0b2941;font-size:clamp(34px,4vw,50px)}
.product-flow-head>p:last-child{margin:0;color:#607583;font-size:18px}
.product-flow-list{display:grid;gap:72px}
.product-story{overflow:hidden;border:1px solid #d7e4eb;border-radius:10px;background:#fff;box-shadow:0 20px 55px rgba(22,74,105,.10)}
.product-story-title{display:flex;gap:20px;align-items:center;padding:24px 28px;border-bottom:1px solid #dce7ed;background:#fff}
.product-story-title>span{display:grid;flex:0 0 42px;width:42px;height:42px;place-items:center;border-radius:50%;color:#fff;background:#168ec1;font-size:14px;font-weight:900}
.product-story-title h3{margin:0 0 3px;color:#0b2941;font-size:23px}
.product-story-title p{margin:0;color:#607583;font-size:15px}
.product-story img{display:block;width:100%;height:auto}
@media(max-width:900px){.oc-concept{padding-bottom:82px}.product-flow{width:min(calc(100% - 28px),1180px);margin-top:62px}.product-flow-list{gap:42px}.product-story-title{padding:20px}.product-story-title h3{font-size:20px}}

/* 01·02·03 카드와 하단 탭을 번호별로 연결 */
.oc-concept-card{cursor:pointer}
.oc-concept-card.is-selected{z-index:1;border-color:#168ec1;background:#f7fcfe;box-shadow:0 20px 48px rgba(22,142,193,.12)}
.oc-concept-card.is-selected .oc-concept-no{color:#0879a7}
.product-groups{width:min(calc(100% - 40px),1180px);margin:72px auto 0}
.product-group-top{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:22px}
.product-group-top h2{margin:0;color:#0b2941;font-size:clamp(30px,3.4vw,44px)}
.product-group-top .eyebrow{margin-bottom:10px}
.product-subtabs{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.product-subtabs button{min-width:112px;padding:13px 18px;border:1px solid #bdd2de;border-radius:6px;color:#496474;background:#fff;font:inherit;font-weight:800;cursor:pointer}
.product-subtabs button[aria-selected="true"]{border-color:#0b2941;color:#fff;background:#0b2941}
.product-group-panel{overflow:hidden;border:1px solid #d7e4eb;border-radius:10px;background:#fff;box-shadow:0 22px 60px rgba(22,74,105,.12)}
.product-group-panel img{display:block;width:100%;height:auto}
.product-group-caption{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:24px 28px;border-top:1px solid #dce7ed}
.product-group-caption strong{color:#0b2941;font-size:21px}
.product-group-caption span{color:#607583;text-align:right}
@media(max-width:900px){.product-groups{width:min(calc(100% - 28px),1180px);margin-top:54px}.product-group-top,.product-group-caption{align-items:flex-start;flex-direction:column}.product-subtabs{justify-content:flex-start}.product-group-caption span{text-align:left}}

/* 주요 기능 카드 */
.core-feature-tabs{padding:118px 0 126px;background:#f7fafc}
.core-feature-tabs .section-head{margin-bottom:38px}
.core-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.core-feature-card{position:relative;min-width:0;height:320px;padding:28px;overflow:hidden;border:1px solid #e2e7eb;border-radius:24px;background:#f1f3f5;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.core-feature-card:hover{transform:translateY(-5px);border-color:#cbd8df;box-shadow:0 18px 42px rgba(19,79,111,.1)}
.core-feature-copy{position:relative;z-index:2}
.core-feature-card h3{margin:0 0 10px;color:#292d30;font-size:26px;line-height:1.3;letter-spacing:-.04em}
.core-feature-card p{max-width:230px;margin:0;color:#687075;font-size:15px;line-height:1.62;word-break:keep-all}
.core-feature-more{display:inline-flex;margin-top:14px;align-items:center;gap:8px;color:#858b8f;font-size:14px}
.core-feature-more i{width:8px;height:8px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
.core-feature-visual{position:absolute;right:16px;bottom:-20px;width:72%;height:150px;overflow:hidden;border-radius:20px 20px 0 0;background:#fff;box-shadow:0 6px 22px rgba(43,65,79,.1)}
.core-feature-visual img{width:100%;height:100%;object-fit:cover;object-position:top left}
.core-feature-integration{display:grid;right:20px;bottom:24px;width:70%;height:100px;padding:14px;grid-template-columns:repeat(3,1fr);align-items:center;gap:7px;overflow:visible;border-radius:18px;background:linear-gradient(135deg,#69c9d8,#8d77f5)}
.core-feature-integration span{position:relative;z-index:2;display:flex;height:54px;align-items:center;justify-content:center;border-radius:12px;color:#fff;background:rgba(255,255,255,.18);font-weight:800}
.core-feature-integration i{position:absolute;top:-19px;right:23px;width:38px;height:38px;border:8px solid #62b9e3;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(-22deg)}
.core-feature-security{display:flex;right:18px;bottom:26px;width:78%;height:112px;padding:8px;flex-wrap:wrap;align-content:center;justify-content:center;gap:7px;overflow:visible;border-radius:18px;background:transparent;box-shadow:none}
.core-feature-security span{padding:7px 10px;border-radius:9px;color:#2482b5;background:#cceeff;font-size:12px;font-weight:800}
.core-feature-security span:nth-child(2),.core-feature-security span:nth-child(4){color:#2d9e87;background:#cef1e8}
.core-feature-security span:nth-child(3){color:#557fd0;background:#dbe7ff}
.core-feature-maintenance{right:18px;bottom:20px;width:78%;height:125px;padding:16px 16px 13px;overflow:visible;border-radius:20px;background:linear-gradient(145deg,#102e46,#165a72);box-shadow:0 14px 30px rgba(17,67,91,.18)}
.maintenance-status{display:flex;align-items:center;gap:7px;color:#e9fbff;font-size:12px;font-weight:750}
.maintenance-status b{width:7px;height:7px;border-radius:50%;background:#54e1b2;box-shadow:0 0 0 4px rgba(84,225,178,.13)}
.maintenance-pulse{display:flex;height:43px;margin:7px 0 5px;align-items:flex-end;gap:5px}
.maintenance-pulse i{display:block;width:20%;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#56d9ee,#3689ce)}
.maintenance-pulse i:nth-child(1){height:30%}.maintenance-pulse i:nth-child(2){height:58%}.maintenance-pulse i:nth-child(3){height:43%}.maintenance-pulse i:nth-child(4){height:82%}.maintenance-pulse i:nth-child(5){height:66%}
.maintenance-items{display:flex;justify-content:space-between;color:#9bc9d8;font-size:7px;font-style:normal;letter-spacing:.08em}
.maintenance-items em{font-style:normal}

@media(max-width:1050px){.core-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.core-feature-card{height:300px}}
@media(max-width:900px){.core-feature-tabs{padding:84px 0 92px}}
@media(max-width:620px){.core-card-grid{grid-template-columns:1fr;gap:16px}.core-feature-card{height:290px;padding:26px;border-radius:20px}.core-feature-card h3{font-size:24px}.core-feature-visual{width:65%}}

/* 로고 가시성 및 첫 화면 축소 */
.site-header .brand img{
  width:168px;
  filter:none;
  opacity:1;
}
.top.oc-hero-top{
  height:clamp(500px,38vw,690px);
  min-height:500px;
  transition:height .65s cubic-bezier(.2,.8,.2,1);
}
.oc-hero-canvas{
  width:min(64vw,1280px);
  transition:width .65s cubic-bezier(.2,.8,.2,1);
}
.oc-hero-top.has-active{
  height:clamp(780px,52vw,1000px);
}
.oc-hero-top.has-active .oc-hero-canvas{
  width:min(94vw,1919px);
  animation:none;
}
@media(max-width:900px){
  .site-header .brand img{width:145px}
  .top.oc-hero-top{height:500px;min-height:500px}
  .oc-hero-canvas{width:92vw}
  .oc-hero-top.has-active{height:820px}
  .oc-hero-top.has-active .oc-hero-canvas{width:124vw}
}

/* 상단 기능 마커: 외곽선 제거 + 원형 버튼과 타이틀 */
.oc-feature-hotspot,
.oc-feature-hotspot:hover,
.oc-feature-hotspot:focus-visible{
  border:0;
  outline:0;
  box-shadow:none;
}
.oc-feature-hotspot::before{
  position:absolute;
  z-index:3;
  top:50%;
  left:50%;
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border:1px solid rgba(11,41,65,.18);
  border-radius:50%;
  color:#0b2941;
  background:#fff;
  box-shadow:0 8px 22px rgba(7,43,67,.18);
  content:"+";
  font-size:25px;
  font-weight:400;
  line-height:1;
  transform:translate(-50%,-50%);
  transition:color .2s ease,background .2s ease,transform .2s ease;
}
.oc-feature-hotspot::after{
  position:absolute;
  z-index:2;
  top:50%;
  left:calc(50% + 17px);
  min-width:max-content;
  padding:9px 15px 9px 27px;
  border:0;
  border-radius:0 20px 20px 0;
  color:#0b2941;
  background:rgba(255,255,255,.94);
  box-shadow:0 8px 22px rgba(7,43,67,.13);
  content:attr(data-label);
  font-size:13px;
  font-weight:800;
  opacity:1;
  transform:translateY(-50%);
}
.oc-feature-hotspot:hover::before,
.oc-feature-hotspot:focus-visible::before{
  color:#fff;
  background:#168ec1;
  transform:translate(-50%,-50%) scale(1.08);
}
.oc-feature-hotspot.is-active{border:0;box-shadow:0 28px 70px rgba(3,29,48,.35)}
.oc-feature-hotspot.is-active::before,
.oc-feature-hotspot.is-active::after{display:none}
@media(max-width:900px){
  .oc-feature-hotspot::before{width:32px;height:32px;font-size:21px}
  .oc-feature-hotspot::after{left:calc(50% + 14px);padding:7px 11px 7px 23px;font-size:11px}
}

/* 클릭 후에도 합성 바탕과 상단 높이는 초기 크기 유지 */
.oc-hero-top.has-active{
  height:clamp(500px,38vw,690px);
  min-height:500px;
}
.oc-hero-top.has-active .oc-hero-canvas{
  width:min(64vw,1280px);
  animation:none;
}
.oc-hero-top.has-active .oc-feature-hotspot.is-active{
  left:-10%;
  top:2%;
  width:120%;
  height:90%;
}
.oc-hero-top.has-active .oc-feature-panel{
  top:11%;
  right:7%;
  width:25%;
  min-height:58%;
}
@media(max-width:900px){
  .oc-hero-top.has-active{height:680px;min-height:680px}
  .oc-hero-top.has-active .oc-hero-canvas{width:92vw}
  .oc-hero-top.has-active .oc-feature-hotspot.is-active{left:0;width:100%;height:70%}
}

/* 상단 기능별 세부 화면 탭 */
.oc-feature-variants{display:flex;flex-wrap:wrap;gap:7px;width:100%}
.oc-feature-variants:empty{display:none}
.oc-feature-variants button{padding:8px 11px;border:1px solid rgba(255,255,255,.34);border-radius:999px;color:rgba(255,255,255,.8);background:transparent;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.oc-feature-variants button[aria-selected="true"]{border-color:#65dce8;color:#082a42;background:#65dce8}

/* 최신 개별 화면으로 구성한 첫 화면 콜라주 */
.oc-hero-canvas{overflow:visible}
.oc-live-collage{position:absolute;inset:0}
.oc-collage-screen{position:absolute;display:block;border:0;border-radius:8px;object-fit:cover;object-position:top;background:#fff;box-shadow:0 12px 30px rgba(25,75,105,.16)}
.oc-collage-approval{z-index:1;top:7%;left:2%;width:32%;height:36%}
.oc-collage-mail{z-index:1;bottom:7%;left:0;width:32%;height:38%}
.oc-collage-portal{z-index:3;top:12%;left:22%;width:58%;height:76%}
.oc-collage-messenger{z-index:4;top:5%;right:1%;width:18%;height:48%;object-fit:contain}
.oc-collage-ai{z-index:5;right:0;bottom:4%;width:20%;height:48%;object-fit:contain}
.oc-feature-hotspot:not(.is-active){overflow:visible}
.oc-hotspot-org:not(.is-active)::after,
.oc-hotspot-ai:not(.is-active)::after{
  right:calc(50% + 17px);
  left:auto;
  padding:9px 27px 9px 15px;
  border-radius:20px 0 0 20px;
}
.oc-feature-hotspot.is-active{overflow:hidden}
@media(max-width:900px){
  .oc-hotspot-org:not(.is-active)::after,.oc-hotspot-ai:not(.is-active)::after{right:calc(50% + 14px);padding:7px 23px 7px 11px}
}

/* 콜라주 원본 전체 표시 + 기능 마커를 이미지보다 위에 고정 */
.oc-live-collage{z-index:1;pointer-events:none}
.oc-collage-screen{object-fit:contain;object-position:center;background:transparent}
.oc-feature-hotspot:not(.is-active){z-index:20;background:transparent}
.oc-feature-hotspot:not(.is-active)::before,.oc-feature-hotspot:not(.is-active)::after{display:block;visibility:visible;opacity:1}
.oc-feature-hotspot:not(.is-active)::before{z-index:22}
.oc-feature-hotspot:not(.is-active)::after{z-index:21}
/* 상세 화면에서는 선택한 기능 외의 마커를 숨긴다 */
.oc-hero-top.has-active .oc-feature-hotspot:not(.is-active){
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* 여러 상세 화면을 한 장면에 중첩해 보여주는 몽타주 */
.oc-feature-hotspot.is-active.is-montage{background-repeat:no-repeat;background-color:#f8fbfd}
.oc-hotspot-org.is-active.is-montage{
  background-size:auto 82%,auto 72%,auto 64%;
  background-position:8% center,34% 54%,57% 50%;
}
.oc-hotspot-ai.is-active.is-montage{
  background-size:auto 86%,auto 74%;
  background-position:14% center,52% 52%;
}
.oc-feature-hotspot.is-active.is-montage::before{
  content:"";display:block;position:absolute;z-index:1;left:4%;top:7%;width:66%;height:84%;
  background:radial-gradient(circle at 45% 48%,rgba(60,170,220,.12),transparent 64%);pointer-events:none;
}
.oc-feature-panel .oc-feature-variants button:disabled{cursor:default;opacity:1}
.oc-hero-top.has-active:has(.is-montage) .oc-feature-controls{display:none}
@media(max-width:900px){
  .oc-hotspot-org.is-active.is-montage{background-size:auto 65%,auto 57%,auto 50%;background-position:4% 8%,38% 15%,70% 22%}
  .oc-hotspot-ai.is-active.is-montage{background-size:auto 66%,auto 58%;background-position:12% 10%,66% 18%}
}


/* 상세 이미지는 여백을 허용하고 원본 비율과 선명도를 우선 */
.oc-feature-hotspot.is-active:not(.is-montage){
  background-size:min(64%, 1280px) auto;
  background-position:4% center;
  background-repeat:no-repeat;
  image-rendering:auto;
}
.oc-hotspot-org.is-active.is-montage{
  background-size:auto 76%,auto 67%,auto 59%;
  background-position:7% center,32% 52%,55% 50%;
}
.oc-hotspot-ai.is-active.is-montage{
  background-size:auto 78%,auto 68%;
  background-position:12% center,48% 52%;
}
@media(max-width:900px){
  .oc-feature-hotspot.is-active:not(.is-montage){background-size:contain;background-position:center top}
}


/* 플러스 기호 시각적 중앙 정렬 */
.oc-feature-hotspot:not(.is-active)::before{
  box-sizing:border-box;
  padding:0 0 3px;
  font-family:Arial,sans-serif;
  line-height:1;
  text-align:center;
}


/* 폰트 글리프 대신 두 선으로 +를 정확히 원 중앙에 그림 */
.oc-feature-hotspot:not(.is-active)::before{
  content:"";
  padding:0;
  background:
    linear-gradient(#0b2941,#0b2941) center/14px 2px no-repeat,
    linear-gradient(#0b2941,#0b2941) center/2px 14px no-repeat,
    #fff;
}
.oc-feature-hotspot:not(.is-active):hover::before,
.oc-feature-hotspot:not(.is-active):focus-visible::before{
  background:
    linear-gradient(#fff,#fff) center/14px 2px no-repeat,
    linear-gradient(#fff,#fff) center/2px 14px no-repeat,
    #168ec1;
}


/* 모바일 기능 미리보기와 6개 원본 화면 몽타주 */
.oc-collage-mobile{z-index:4;top:23%;right:13%;width:13%;height:54%;object-fit:contain}
.oc-hotspot-mobile{left:67%;top:28%;width:14%;height:36%}
.oc-hotspot-mobile.is-active.is-montage{
  background-size:auto 76%,auto 70%,auto 65%,auto 60%,auto 55%,auto 50%;
  background-position:3% 50%,17% 52%,31% 48%,44% 53%,56% 49%,66% 52%;
}
@media(max-width:900px){
  .oc-collage-mobile{right:15%;width:15%}
  .oc-hotspot-mobile.is-active.is-montage{background-size:auto 54%,auto 50%,auto 46%,auto 42%,auto 38%,auto 34%;background-position:1% 10%,19% 15%,36% 11%,52% 16%,67% 12%,80% 17%}
}


/* 6개 기능 첫 화면 재배치: 중앙 포털 + 좌우 독립 영역 */
.oc-collage-approval{z-index:1;top:7%;left:3%;width:28%;height:30%}
.oc-collage-mail{z-index:1;bottom:7%;left:0;width:28%;height:33%}
.oc-collage-portal{z-index:2;top:17%;left:23%;width:50%;height:66%}
.oc-collage-mobile{z-index:3;top:19%;right:14%;width:12%;height:62%}
.oc-collage-messenger{z-index:4;top:4%;right:0;width:13%;height:44%}
.oc-collage-ai{z-index:4;right:0;bottom:4%;width:13%;height:44%}

.oc-hotspot-approval{left:5%;top:6%;width:25%;height:32%}
.oc-hotspot-mail{left:1%;top:61%;width:26%;height:34%}
.oc-hotspot-portal{left:25%;top:20%;width:46%;height:61%}
.oc-hotspot-mobile{left:72%;top:25%;width:12%;height:50%}
.oc-hotspot-org{left:85%;top:5%;width:14%;height:42%}
.oc-hotspot-ai{left:85%;top:53%;width:14%;height:42%}

.oc-hotspot-mobile:not(.is-active)::after,
.oc-hotspot-org:not(.is-active)::after,
.oc-hotspot-ai:not(.is-active)::after{
  right:calc(50% + 17px);
  left:auto;
  padding:9px 27px 9px 15px;
  border-radius:20px 0 0 20px;
}
@media(max-width:900px){
  .oc-hotspot-mobile:not(.is-active)::after,
  .oc-hotspot-org:not(.is-active)::after,
  .oc-hotspot-ai:not(.is-active)::after{right:calc(50% + 14px);padding:7px 23px 7px 11px}
}


/* AI 상세 화면 3장 중첩 배치 */
.oc-hotspot-ai.is-active.is-montage{
  background-size:auto 76%,auto 68%,auto 82%;
  background-position:5% 52%,31% 49%,57% 50%;
}
@media(max-width:900px){
  .oc-hotspot-ai.is-active.is-montage{background-size:auto 55%,auto 49%,auto 59%;background-position:1% 12%,34% 16%,70% 10%}
}


/* AI 상세 재배치: 메일 상세를 메인으로, AI 패널 두 장을 우측 카드로 */
.oc-hotspot-ai.is-active.is-montage{
  background-size:auto 69%,auto 61%,52% auto;
  background-position:48% 47%,65% 54%,3% center;
  background-repeat:no-repeat;
}
@media(max-width:900px){
  .oc-hotspot-ai.is-active.is-montage{
    background-size:auto 48%,auto 43%,58% auto;
    background-position:45% 10%,76% 17%,2% 58%;
  }
}


/* 첫 화면 6개 전체 구성 최종 재배치 */
.oc-hero-canvas{width:min(72vw,1380px)}
.oc-collage-screen{box-shadow:0 14px 34px rgba(24,69,96,.14)}
.oc-collage-approval{z-index:1;top:8%;left:2%;width:29%;height:34%}
.oc-collage-mail{z-index:1;bottom:8%;left:0;width:29%;height:35%}
.oc-collage-portal{z-index:3;top:13%;left:24%;width:53%;height:74%}
.oc-collage-mobile{z-index:4;top:19%;right:12%;width:12%;height:62%}
.oc-collage-messenger{z-index:5;top:5%;right:0;width:12%;height:43%}
.oc-collage-ai{z-index:5;right:0;bottom:5%;width:12%;height:43%}

.oc-hotspot-approval{left:2%;top:8%;width:29%;height:34%}
.oc-hotspot-mail{left:0;top:57%;width:29%;height:35%}
.oc-hotspot-portal{left:24%;top:13%;width:53%;height:74%}
.oc-hotspot-mobile{left:76%;top:19%;width:12%;height:62%}
.oc-hotspot-org{left:88%;top:5%;width:12%;height:43%}
.oc-hotspot-ai{left:88%;top:52%;width:12%;height:43%}

/* 마커를 화면 가장자리에 두어 중앙 콘텐츠를 가리지 않음 */
.oc-hotspot-approval:not(.is-active)::before{left:88%;top:72%}
.oc-hotspot-approval:not(.is-active)::after{left:calc(88% + 17px);top:72%}
.oc-hotspot-mail:not(.is-active)::before{left:88%;top:34%}
.oc-hotspot-mail:not(.is-active)::after{left:calc(88% + 17px);top:34%}
.oc-hotspot-portal:not(.is-active)::before{left:54%;top:50%}
.oc-hotspot-portal:not(.is-active)::after{left:calc(54% + 17px);top:50%}
.oc-hotspot-mobile:not(.is-active)::before{left:20%;top:50%}
.oc-hotspot-mobile:not(.is-active)::after{right:calc(80% + 17px);top:50%;left:auto}
.oc-hotspot-org:not(.is-active)::before,
.oc-hotspot-ai:not(.is-active)::before{left:12%;top:50%}
.oc-hotspot-org:not(.is-active)::after,
.oc-hotspot-ai:not(.is-active)::after{right:calc(88% + 17px);top:50%;left:auto}

@media(max-width:1100px){.oc-hero-canvas{width:86vw}}


/* 첫 화면: 동일 비중의 macOS 스타일 3 x 2 윈도우 구성 */
.oc-hero-canvas{width:min(76vw,1460px);aspect-ratio:16/8.7}
.oc-live-collage{display:block}
.oc-window{
  position:absolute;z-index:2;width:30.5%;height:40%;overflow:hidden;
  border:1px solid rgba(44,82,108,.15);border-radius:16px;background:#f8fbfd;
  box-shadow:0 14px 34px rgba(22,62,89,.14),0 2px 6px rgba(22,62,89,.08);
}
.oc-window::before{
  position:absolute;z-index:2;top:0;right:0;left:0;height:38px;content:"";
  border-bottom:1px solid #e5edf2;
  background:
    radial-gradient(circle,#ff605c 0 4px,transparent 4.5px) 14px 50%/10px 10px no-repeat,
    radial-gradient(circle,#ffbd44 0 4px,transparent 4.5px) 29px 50%/10px 10px no-repeat,
    radial-gradient(circle,#00ca4e 0 4px,transparent 4.5px) 44px 50%/10px 10px no-repeat,
    rgba(255,255,255,.97);
}
.oc-window img{
  position:absolute;top:38px;right:0;bottom:0;left:0;display:block;width:100%;height:calc(100% - 38px);
  object-fit:contain;object-position:center;background:#f8fbfd;
}
.oc-window-approval{top:5%;left:2%}.oc-window-portal{top:5%;left:34.75%}.oc-window-messenger{top:5%;right:2%}
.oc-window-mail{bottom:5%;left:2%}.oc-window-mobile{bottom:5%;left:34.75%}.oc-window-ai{right:2%;bottom:5%}

/* 실제 클릭 버튼을 각 창의 헤더로 사용 */
.oc-feature-hotspot:not(.is-active){height:38px;width:30.5%;border-radius:16px 16px 0 0;background:transparent}
.oc-hotspot-approval:not(.is-active){top:5%;left:2%}.oc-hotspot-portal:not(.is-active){top:5%;left:34.75%}.oc-hotspot-org:not(.is-active){top:5%;left:67.5%}
.oc-hotspot-mail:not(.is-active){top:55%;left:2%}.oc-hotspot-mobile:not(.is-active){top:55%;left:34.75%}.oc-hotspot-ai:not(.is-active){top:55%;left:67.5%}
.oc-feature-hotspot:not(.is-active)::before{
  top:50%;right:10px;left:auto;width:27px;height:27px;border-color:#d3e0e8;transform:translateY(-50%);
  background:linear-gradient(#0b2941,#0b2941) center/11px 2px no-repeat,linear-gradient(#0b2941,#0b2941) center/2px 11px no-repeat,#fff;
  box-shadow:0 3px 10px rgba(7,43,67,.12);
}
.oc-feature-hotspot:not(.is-active)::after,
.oc-hotspot-mobile:not(.is-active)::after,
.oc-hotspot-org:not(.is-active)::after,
.oc-hotspot-ai:not(.is-active)::after{
  top:50%;right:auto;left:64px;min-width:0;padding:0;border-radius:0;background:transparent;box-shadow:none;
  color:#0b2941;font-size:13px;transform:translateY(-50%);
}
.oc-feature-hotspot:not(.is-active):hover::before,.oc-feature-hotspot:not(.is-active):focus-visible::before{
  transform:translateY(-50%) scale(1.06);
}
@media(max-width:900px){
  .oc-hero-canvas{width:94vw;aspect-ratio:1/1.35}
  .oc-window{width:47%;height:29%}
  .oc-window-approval{top:2%;left:2%}.oc-window-portal{top:2%;left:51%}.oc-window-messenger{top:35%;right:51%}
  .oc-window-mail{top:35%;bottom:auto;left:51%}.oc-window-mobile{top:68%;bottom:auto;left:2%}.oc-window-ai{top:68%;right:2%;bottom:auto}
  .oc-feature-hotspot:not(.is-active){width:47%;height:38px}
  .oc-hotspot-approval:not(.is-active){top:2%;left:2%}.oc-hotspot-portal:not(.is-active){top:2%;left:51%}.oc-hotspot-org:not(.is-active){top:35%;left:2%}
  .oc-hotspot-mail:not(.is-active){top:35%;left:51%}.oc-hotspot-mobile:not(.is-active){top:68%;left:2%}.oc-hotspot-ai:not(.is-active){top:68%;left:51%}
}


/* 첫 시안처럼 자유롭게 겹친 혼합형 윈도우 구성 */
.oc-hero-canvas{width:min(76vw,1460px);aspect-ratio:16/8.8}
.oc-window-approval{z-index:2;top:7%;left:2%;width:31%;height:34%;transform:rotate(-.5deg)}
.oc-window-mail{z-index:2;top:57%;bottom:auto;left:5%;width:32%;height:35%;transform:rotate(.35deg)}
.oc-window-portal{z-index:4;top:22%;left:29%;width:39%;height:45%;transform:none}

.oc-window-mobile,.oc-window-messenger,.oc-window-ai{
  overflow:hidden;border:0;background:#fff;box-shadow:0 15px 34px rgba(20,61,88,.16);
}
.oc-window-mobile::before,.oc-window-messenger::before,.oc-window-ai::before{display:none}
.oc-window-mobile img,.oc-window-messenger img,.oc-window-ai img{top:0;width:100%;height:100%;object-fit:contain;object-position:center;background:#fff}
.oc-window-mobile{z-index:5;top:49%;bottom:auto;left:64%;width:12%;height:45%;border-radius:22px;transform:rotate(-1deg)}
.oc-window-messenger{z-index:5;top:5%;right:10%;left:auto;width:12%;height:46%;border-radius:22px;transform:rotate(.6deg)}
.oc-window-ai{z-index:6;right:1%;bottom:4%;left:auto;width:13%;height:46%;border-radius:22px;transform:rotate(-.4deg)}

/* 창 헤더 및 세로 화면 상단의 기능 버튼 */
.oc-hotspot-approval:not(.is-active){top:7%;left:2%;width:31%;height:38px}
.oc-hotspot-mail:not(.is-active){top:57%;left:5%;width:32%;height:38px}
.oc-hotspot-portal:not(.is-active){top:22%;left:29%;width:39%;height:38px}
.oc-hotspot-mobile:not(.is-active),.oc-hotspot-org:not(.is-active),.oc-hotspot-ai:not(.is-active){height:38px;border-radius:19px;background:rgba(255,255,255,.97);box-shadow:0 7px 18px rgba(20,61,88,.14)}
.oc-hotspot-mobile:not(.is-active){top:49%;left:64%;width:12%}
.oc-hotspot-org:not(.is-active){top:5%;left:78%;width:12%}
.oc-hotspot-ai:not(.is-active){top:50%;left:86%;width:13%}
.oc-hotspot-mobile:not(.is-active)::after,.oc-hotspot-org:not(.is-active)::after,.oc-hotspot-ai:not(.is-active)::after{top:50%;right:auto;left:14px;padding:0;background:transparent;box-shadow:none;transform:translateY(-50%)}
.oc-hotspot-mobile:not(.is-active)::before,.oc-hotspot-org:not(.is-active)::before,.oc-hotspot-ai:not(.is-active)::before{top:50%;right:7px;left:auto;transform:translateY(-50%)}
@media(max-width:900px){
  .oc-hero-canvas{width:96vw;aspect-ratio:1/1.3}
  .oc-window-approval{top:3%;left:1%;width:48%;height:27%}.oc-window-portal{top:16%;left:37%;width:58%;height:31%}.oc-window-mail{top:39%;left:2%;width:52%;height:28%}
  .oc-window-mobile{top:57%;left:48%;width:18%;height:39%}.oc-window-messenger{top:48%;right:4%;width:18%;height:39%}.oc-window-ai{right:25%;bottom:1%;width:18%;height:39%}
}


/* 첫 화면 콜라주를 중앙으로 모아 간격 축소 */
.oc-window-approval{top:10%;left:9%;width:30%;height:35%}
.oc-window-mail{top:53%;left:11%;width:31%;height:36%}
.oc-window-portal{top:25%;left:32%;width:40%;height:47%}
.oc-window-mobile{top:45%;left:65%;width:13%;height:47%}
.oc-window-messenger{top:8%;right:auto;left:69%;width:13%;height:47%}
.oc-window-ai{right:auto;bottom:auto;top:49%;left:78%;width:14%;height:47%}

.oc-hotspot-approval:not(.is-active){top:10%;left:9%;width:30%}
.oc-hotspot-mail:not(.is-active){top:53%;left:11%;width:31%}
.oc-hotspot-portal:not(.is-active){top:25%;left:32%;width:40%}
.oc-hotspot-mobile:not(.is-active){top:45%;left:65%;width:13%}
.oc-hotspot-org:not(.is-active){top:8%;left:69%;width:13%}
.oc-hotspot-ai:not(.is-active){top:49%;left:78%;width:14%}


/* 초기 화면: 영역 안에서 자유롭게 포개지는 작은 미리보기 */
.oc-hero-canvas{width:min(66vw,1260px);aspect-ratio:16/9}
.oc-window{transform:none}
.oc-window-approval{z-index:2;top:12%;left:12%;width:30%;height:32%}
.oc-window-mail{z-index:2;top:53%;left:14%;width:30%;height:32%}
.oc-window-portal{z-index:4;top:27%;left:31%;width:39%;height:41%}
.oc-window-messenger{z-index:5;top:9%;left:65%;right:auto;width:12%;height:44%}
.oc-window-mobile{z-index:5;top:48%;left:60%;width:12%;height:44%}
.oc-window-ai{z-index:6;top:45%;left:73%;right:auto;bottom:auto;width:12%;height:44%}

.oc-hotspot-approval:not(.is-active){top:12%;left:12%;width:30%}
.oc-hotspot-mail:not(.is-active){top:53%;left:14%;width:30%}
.oc-hotspot-portal:not(.is-active){top:27%;left:31%;width:39%}
.oc-hotspot-org:not(.is-active){top:9%;left:65%;width:12%}
.oc-hotspot-mobile:not(.is-active){top:48%;left:60%;width:12%}
.oc-hotspot-ai:not(.is-active){top:45%;left:73%;width:12%}
.oc-window-approval,.oc-window-mail,.oc-window-portal{border-radius:14px}
.oc-window-mobile,.oc-window-messenger,.oc-window-ai{border-radius:18px}
@media(max-width:1100px){.oc-hero-canvas{width:82vw}}

/* 2026-09-09 첫 화면 자유 배치 라벨 */
.oc-live-collage {
  display: none !important;
}

.top.oc-hero-top:not(.has-active) {
  height: clamp(500px, 39vw, 680px);
  min-height: 500px;
}

.oc-hero-top:not(.has-active) .oc-hero-media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.oc-hero-top:not(.has-active) .oc-hero-canvas {
  width: min(86vw, 1480px);
  aspect-ratio: 16 / 7;
  border-radius: 2px;
  background: linear-gradient(135deg, #edf8fc 0%, #e3f3fa 52%, #dceef7 100%);
  box-shadow: none;
  animation: none;
  overflow: visible;
}

.oc-hero-top:not(.has-active) .oc-feature-hotspot:not(.is-active) {
  z-index: 20;
  height: 48px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  opacity: 1;
  background: transparent !important;
  box-shadow: none !important;
  transform: none;
  transition: transform .2s ease;
}

.oc-hero-top:not(.has-active) .oc-feature-hotspot:not(.is-active)::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: auto;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(13, 48, 72, .17);
  border-radius: 50%;
  transform: translateY(-50%);
  background:
    linear-gradient(#12344c, #12344c) center / 12px 2px no-repeat,
    linear-gradient(#12344c, #12344c) center / 2px 12px no-repeat,
    rgba(255, 255, 255, .94);
  box-shadow: 0 5px 14px rgba(34, 74, 99, .10);
}

.oc-hero-top:not(.has-active) .oc-feature-hotspot:not(.is-active)::after {
  position: absolute;
  top: 50%;
  left: 45px;
  right: auto;
  width: auto;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  transform: translateY(-50%);
  background: transparent;
  box-shadow: none;
  color: #102c42;
  font-size: clamp(18px, 1.45vw, 27px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.035em;
  white-space: nowrap;
}

.oc-hero-top:not(.has-active) .oc-feature-hotspot:not(.is-active):hover {
  transform: translateY(-4px);
}

.oc-hero-top:not(.has-active) .oc-feature-hotspot:not(.is-active):hover::before {
  border-color: #18a9c1;
  background:
    linear-gradient(#fff, #fff) center / 12px 2px no-repeat,
    linear-gradient(#fff, #fff) center / 2px 12px no-repeat,
    #18a9c1;
}

.oc-hero-top:not(.has-active) .oc-hotspot-approval { left: 7%; top: 15%; width: 162px; }
.oc-hero-top:not(.has-active) .oc-hotspot-mail     { left: 17%; top: 69%; width: 162px; }
.oc-hero-top:not(.has-active) .oc-hotspot-portal   { left: 35%; top: 39%; width: 188px; }
.oc-hero-top:not(.has-active) .oc-hotspot-mobile   { left: 51%; top: 73%; width: 142px; }
.oc-hero-top:not(.has-active) .oc-hotspot-org      { left: 67%; top: 20%; width: 142px; }
.oc-hero-top:not(.has-active) .oc-hotspot-ai       { left: 81%; top: 58%; width: 82px; }

@media (max-width: 900px) {
  .top.oc-hero-top:not(.has-active) {
    height: 620px;
    min-height: 620px;
  }

  .oc-hero-top:not(.has-active) .oc-hero-canvas {
    width: 92vw;
    height: 540px;
    aspect-ratio: auto;
  }

  .oc-hero-top:not(.has-active) .oc-feature-hotspot:not(.is-active)::after {
    font-size: 18px;
  }

  .oc-hero-top:not(.has-active) .oc-hotspot-approval { left: 5%; top: 10%; }
  .oc-hero-top:not(.has-active) .oc-hotspot-mail     { left: 50%; top: 23%; }
  .oc-hero-top:not(.has-active) .oc-hotspot-portal   { left: 12%; top: 40%; }
  .oc-hero-top:not(.has-active) .oc-hotspot-mobile   { left: 54%; top: 55%; }
  .oc-hero-top:not(.has-active) .oc-hotspot-org      { left: 8%; top: 73%; }
  .oc-hero-top:not(.has-active) .oc-hotspot-ai       { left: 65%; top: 85%; }
}

/* 2026-09-09 배경 카테고리 문구 */
.oc-hero-keywords { display: none; }

.oc-hero-top:not(.has-active) .oc-hero-keywords {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  color: #0c293f;
  font-family: Arial, sans-serif;
  font-size: clamp(26px, 2.35vw, 43px);
  font-weight: 500;
  letter-spacing: -.035em;
}

.oc-hero-top:not(.has-active) .oc-hero-keywords span {
  position: absolute;
  white-space: nowrap;
}

.oc-hero-top:not(.has-active) .oc-keyword-groupware {
  top: 17%;
  left: 11%;
}

.oc-hero-top:not(.has-active) .oc-keyword-collaboration {
  top: 67%;
  left: 27%;
}

.oc-hero-top:not(.has-active) .oc-keyword-communication {
  top: 48%;
  left: 61%;
}

/* 기능 버튼은 큰 카테고리 문구를 피하면서 주변에 자연스럽게 흩어진다. */
.oc-hero-top:not(.has-active) .oc-hotspot-approval { left: 5%; top: 45%; }
.oc-hero-top:not(.has-active) .oc-hotspot-mail     { left: 23%; top: 28%; }
.oc-hero-top:not(.has-active) .oc-hotspot-portal   { left: 43%; top: 14%; }
.oc-hero-top:not(.has-active) .oc-hotspot-mobile   { left: 49%; top: 78%; }
.oc-hero-top:not(.has-active) .oc-hotspot-org      { left: 73%; top: 25%; }
.oc-hero-top:not(.has-active) .oc-hotspot-ai       { left: 84%; top: 68%; }

@media (max-width: 900px) {
  .oc-hero-top:not(.has-active) .oc-hero-keywords {
    font-size: clamp(25px, 7vw, 36px);
  }
  .oc-hero-top:not(.has-active) .oc-keyword-groupware { top: 12%; left: 7%; }
  .oc-hero-top:not(.has-active) .oc-keyword-collaboration { top: 48%; left: 13%; }
  .oc-hero-top:not(.has-active) .oc-keyword-communication { top: 72%; left: 38%; }
  .oc-hero-top:not(.has-active) .oc-hotspot-approval { left: 8%; top: 25%; }
  .oc-hero-top:not(.has-active) .oc-hotspot-mail { left: 53%; top: 33%; }
  .oc-hero-top:not(.has-active) .oc-hotspot-portal { left: 34%; top: 7%; }
  .oc-hero-top:not(.has-active) .oc-hotspot-mobile { left: 56%; top: 58%; }
  .oc-hero-top:not(.has-active) .oc-hotspot-org { left: 7%; top: 84%; }
  .oc-hero-top:not(.has-active) .oc-hotspot-ai { left: 72%; top: 88%; }
}

/* 2026-09-09 키워드 임팩트 비주얼 */
.oc-hero-top:not(.has-active) .oc-hero-canvas {
  isolation: isolate;
  background:
    radial-gradient(circle at 13% 25%, rgba(63, 208, 220, .28), transparent 27%),
    radial-gradient(circle at 78% 24%, rgba(70, 128, 255, .22), transparent 30%),
    radial-gradient(circle at 47% 84%, rgba(145, 104, 255, .18), transparent 28%),
    linear-gradient(135deg, #f1fbff 0%, #e5f5fb 48%, #deeff9 100%);
}

.oc-hero-top:not(.has-active) .oc-hero-canvas::after {
  content: '';
  position: absolute;
  inset: 3% 2%;
  z-index: 0;
  pointer-events: none;
  opacity: .48;
  background-image: radial-gradient(rgba(14, 76, 106, .18) .75px, transparent .75px);
  background-size: 24px 24px;
  mask-image: linear-gradient(115deg, transparent 3%, #000 32%, #000 68%, transparent 97%);
}

.oc-hero-top:not(.has-active) .oc-hero-keywords {
  z-index: 8;
  color: inherit;
}

.oc-hero-top:not(.has-active) .oc-hero-keywords span {
  display: block;
  filter: drop-shadow(0 12px 22px rgba(13, 67, 96, .12));
  will-change: transform;
}

.oc-hero-top:not(.has-active) .oc-keyword-groupware {
  top: 12%;
  left: 8%;
  color: #075c78;
  font-size: clamp(46px, 5vw, 88px);
  font-weight: 750;
  animation: ocFloatWordA 7.5s ease-in-out infinite;
}

.oc-hero-top:not(.has-active) .oc-keyword-collaboration {
  top: 62%;
  left: 24%;
  color: #6046b5;
  font-size: clamp(35px, 3.8vw, 66px);
  font-weight: 650;
  animation: ocFloatWordB 9s ease-in-out infinite;
}

.oc-hero-top:not(.has-active) .oc-keyword-communication {
  top: 43%;
  left: 58%;
  color: #087f91;
  font-size: clamp(39px, 4.35vw, 76px);
  font-weight: 720;
  animation: ocFloatWordC 8.2s ease-in-out infinite;
}

@keyframes ocFloatWordA {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1.5deg); }
  50% { transform: translate3d(12px, -14px, 0) rotate(.5deg); }
}
@keyframes ocFloatWordB {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(.5deg); }
  50% { transform: translate3d(-10px, -17px, 0) rotate(-1deg); }
}
@keyframes ocFloatWordC {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(1deg); }
  50% { transform: translate3d(8px, 15px, 0) rotate(-.5deg); }
}

.oc-hero-top:not(.has-active) .oc-feature-hotspot:not(.is-active) {
  z-index: 15;
  height: 54px;
  border-radius: 27px;
  background: rgba(255, 255, 255, .36) !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 28px rgba(22, 76, 104, .08) !important;
}

.oc-hero-top:not(.has-active) .oc-feature-hotspot:not(.is-active)::before {
  left: 9px;
  width: 36px;
  height: 36px;
  border: 0;
  background:
    linear-gradient(#fff, #fff) center / 12px 2px no-repeat,
    linear-gradient(#fff, #fff) center / 2px 12px no-repeat,
    linear-gradient(135deg, #17b9c5, #237bc3);
  box-shadow: 0 7px 16px rgba(21, 133, 171, .25);
}

.oc-hero-top:not(.has-active) .oc-feature-hotspot:not(.is-active)::after {
  left: 56px;
  color: #102f45;
  font-size: clamp(16px, 1.15vw, 21px);
  font-weight: 720;
}

.oc-hero-top:not(.has-active) .oc-feature-hotspot:not(.is-active):hover {
  transform: translateY(-5px) scale(1.035);
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: 0 16px 34px rgba(17, 74, 104, .16) !important;
}

.oc-hero-top:not(.has-active) .oc-hotspot-approval { left: 3%; top: 47%; width: 170px; }
.oc-hero-top:not(.has-active) .oc-hotspot-mail     { left: 24%; top: 29%; width: 170px; }
.oc-hero-top:not(.has-active) .oc-hotspot-portal   { left: 42%; top: 7%; width: 188px; }
.oc-hero-top:not(.has-active) .oc-hotspot-mobile   { left: 47%; top: 80%; width: 148px; }
.oc-hero-top:not(.has-active) .oc-hotspot-org      { left: 72%; top: 24%; width: 148px; }
.oc-hero-top:not(.has-active) .oc-hotspot-ai       { left: 83%; top: 70%; width: 92px; }

.oc-hero-top:not(.has-active) .oc-hotspot-mail::before,
.oc-hero-top:not(.has-active) .oc-hotspot-mobile::before {
  background:
    linear-gradient(#fff, #fff) center / 12px 2px no-repeat,
    linear-gradient(#fff, #fff) center / 2px 12px no-repeat,
    linear-gradient(135deg, #7a5ce1, #4d79d8);
}

.oc-hero-top:not(.has-active) .oc-hotspot-portal::before,
.oc-hero-top:not(.has-active) .oc-hotspot-ai::before {
  background:
    linear-gradient(#fff, #fff) center / 12px 2px no-repeat,
    linear-gradient(#fff, #fff) center / 2px 12px no-repeat,
    linear-gradient(135deg, #13bbb1, #0a8da5);
}

@media (prefers-reduced-motion: reduce) {
  .oc-hero-top:not(.has-active) .oc-hero-keywords span { animation: none !important; }
}

@media (max-width: 900px) {
  .oc-hero-top:not(.has-active) .oc-keyword-groupware { top: 9%; left: 4%; font-size: 46px; }
  .oc-hero-top:not(.has-active) .oc-keyword-collaboration { top: 45%; left: 6%; font-size: 34px; }
  .oc-hero-top:not(.has-active) .oc-keyword-communication { top: 69%; left: 22%; font-size: 35px; }
  .oc-hero-top:not(.has-active) .oc-feature-hotspot:not(.is-active) { height: 48px; }
  .oc-hero-top:not(.has-active) .oc-feature-hotspot:not(.is-active)::before { left: 7px; width: 34px; height: 34px; }
  .oc-hero-top:not(.has-active) .oc-feature-hotspot:not(.is-active)::after { left: 49px; font-size: 16px; }
}

/* 2026-09-09 배경 경계와 잘림 보정 */
.top.oc-hero-top:not(.has-active) {
  overflow: hidden;
  background: linear-gradient(120deg, #eaf8fc 0%, #e5f3fb 52%, #e8f5fa 100%);
}

.oc-hero-top:not(.has-active) .oc-hero-media {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.oc-hero-top:not(.has-active) .oc-hero-canvas {
  width: 100%;
  max-width: none;
  height: 100%;
  aspect-ratio: auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 17% 23%, rgba(48, 197, 205, .13), transparent 30%),
    radial-gradient(circle at 78% 72%, rgba(100, 112, 224, .10), transparent 34%),
    linear-gradient(120deg, #eaf8fc 0%, #e5f3fb 52%, #e8f5fa 100%);
}

.oc-hero-top:not(.has-active) .oc-hero-canvas::after {
  inset: 0;
  opacity: .26;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

/* 헤더 및 화면 끝에서 충분히 떨어진 안전 배치 */
.oc-hero-top:not(.has-active) .oc-keyword-groupware { top: 11%; left: 13%; }
.oc-hero-top:not(.has-active) .oc-keyword-collaboration { top: 63%; left: 30%; }
.oc-hero-top:not(.has-active) .oc-keyword-communication { top: 43%; left: 56%; }

.oc-hero-top:not(.has-active) .oc-hotspot-approval { left: 8%; top: 45%; }
.oc-hero-top:not(.has-active) .oc-hotspot-mail     { left: 29%; top: 24%; }
.oc-hero-top:not(.has-active) .oc-hotspot-portal   { left: 45%; top: 12%; }
.oc-hero-top:not(.has-active) .oc-hotspot-mobile   { left: 48%; top: 80%; }
.oc-hero-top:not(.has-active) .oc-hotspot-org      { left: 70%; top: 23%; }
.oc-hero-top:not(.has-active) .oc-hotspot-ai       { left: 78%; top: 69%; }

@media (max-width: 900px) {
  .oc-hero-top:not(.has-active) .oc-hero-canvas { width: 100%; height: 100%; }
  .oc-hero-top:not(.has-active) .oc-hotspot-portal { top: 18%; }
}

/* 2026-09-09 다크 네트워크 히어로 */
.top.oc-hero-top:not(.has-active),
.oc-hero-top:not(.has-active) .oc-hero-canvas {
  background:
    radial-gradient(circle at 18% 20%, rgba(22, 185, 203, .16), transparent 28%),
    radial-gradient(circle at 77% 72%, rgba(102, 73, 214, .17), transparent 30%),
    linear-gradient(135deg, #071b2b 0%, #0b263a 50%, #101d39 100%);
}

.oc-hero-top:not(.has-active) .oc-hero-canvas::after {
  opacity: .22;
  background-image: radial-gradient(rgba(134, 213, 234, .42) .7px, transparent .8px);
  background-size: 26px 26px;
  mask-image: linear-gradient(90deg, transparent 1%, #000 15%, #000 85%, transparent 99%);
}

.oc-network-lines {
  display: none;
}

.oc-hero-top:not(.has-active) .oc-network-lines {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.oc-network-paths path {
  fill: none;
  stroke: url(#ocLineCyan);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-dasharray: 7 12;
  opacity: .42;
  animation: ocNetworkFlow 15s linear infinite;
}

.oc-network-paths path:nth-child(even) {
  stroke: url(#ocLinePurple);
  animation-duration: 19s;
  animation-direction: reverse;
}

.oc-network-nodes circle {
  fill: #73eff3;
  stroke: rgba(115, 239, 243, .24);
  stroke-width: 10;
  animation: ocNodePulse 3s ease-in-out infinite alternate;
}

.oc-network-nodes circle:nth-child(3n) { fill: #9b83ff; animation-delay: -1s; }
.oc-network-nodes circle:nth-child(2n) { animation-delay: -2s; }

@keyframes ocNetworkFlow { to { stroke-dashoffset: -190; } }
@keyframes ocNodePulse { to { stroke-width: 22; opacity: .65; } }

.oc-hero-top:not(.has-active) .oc-keyword-groupware {
  top: 11%; left: 10%;
  color: #f4fbff;
  font-size: clamp(45px, 4.7vw, 82px);
  text-shadow: 0 0 32px rgba(34, 206, 220, .18);
}
.oc-hero-top:not(.has-active) .oc-keyword-collaboration {
  top: 63%; left: 27%;
  color: #bdaaff;
  font-size: clamp(34px, 3.35vw, 58px);
  text-shadow: 0 0 28px rgba(143, 112, 255, .22);
}
.oc-hero-top:not(.has-active) .oc-keyword-communication {
  top: 39%; left: 57%;
  color: #6ce2e5;
  font-size: clamp(37px, 3.85vw, 67px);
  text-shadow: 0 0 30px rgba(65, 213, 219, .20);
}

/* 키워드별 안전 영역을 분리해 부유 중에도 서로 겹치지 않는다. */
@keyframes ocFloatWordA {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(7px, -7px, 0); }
}
@keyframes ocFloatWordB {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-6px, -8px, 0); }
}
@keyframes ocFloatWordC {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(6px, 7px, 0); }
}

.oc-hero-top:not(.has-active) .oc-feature-hotspot:not(.is-active) {
  border: 1px solid rgba(151, 221, 238, .16);
  background: rgba(7, 29, 46, .72) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px rgba(0, 8, 20, .32), inset 0 1px rgba(255,255,255,.05) !important;
}
.oc-hero-top:not(.has-active) .oc-feature-hotspot:not(.is-active)::after {
  color: #eefaff;
}
.oc-hero-top:not(.has-active) .oc-feature-hotspot:not(.is-active):hover {
  border-color: rgba(100, 229, 237, .46);
  background: rgba(12, 48, 69, .9) !important;
  box-shadow: 0 15px 36px rgba(0, 7, 18, .42), 0 0 24px rgba(35, 197, 211, .14) !important;
}

.oc-hero-top:not(.has-active) .oc-hotspot-approval { left: 7%; top: 45%; }
.oc-hero-top:not(.has-active) .oc-hotspot-mail     { left: 29%; top: 27%; }
.oc-hero-top:not(.has-active) .oc-hotspot-portal   { left: 45%; top: 10%; }
.oc-hero-top:not(.has-active) .oc-hotspot-mobile   { left: 49%; top: 82%; }
.oc-hero-top:not(.has-active) .oc-hotspot-org      { left: 75%; top: 20%; }
.oc-hero-top:not(.has-active) .oc-hotspot-ai       { left: 82%; top: 69%; }

@media (prefers-reduced-motion: reduce) {
  .oc-network-paths path, .oc-network-nodes circle { animation: none !important; }
}

@media (max-width: 900px) {
  .oc-hero-top:not(.has-active) .oc-keyword-groupware { top: 7%; left: 5%; font-size: 42px; }
  .oc-hero-top:not(.has-active) .oc-keyword-collaboration { top: 47%; left: 7%; font-size: 31px; }
  .oc-hero-top:not(.has-active) .oc-keyword-communication { top: 70%; left: 19%; font-size: 32px; }
  .oc-hero-top:not(.has-active) .oc-hotspot-approval { left: 5%; top: 25%; }
  .oc-hero-top:not(.has-active) .oc-hotspot-mail { left: 54%; top: 30%; }
  .oc-hero-top:not(.has-active) .oc-hotspot-portal { left: 48%; top: 13%; }
  .oc-hero-top:not(.has-active) .oc-hotspot-mobile { left: 56%; top: 58%; }
  .oc-hero-top:not(.has-active) .oc-hotspot-org { left: 5%; top: 84%; }
  .oc-hero-top:not(.has-active) .oc-hotspot-ai { left: 70%; top: 88%; }
}

/* 2026-09-09 심도형 네트워크 공간 */
.top.oc-hero-top:not(.has-active),
.oc-hero-top:not(.has-active) .oc-hero-canvas {
  background:
    radial-gradient(ellipse at 50% 72%, rgba(19, 79, 159, .24), transparent 43%),
    radial-gradient(circle at 74% 40%, rgba(34, 44, 126, .22), transparent 30%),
    linear-gradient(180deg, #020b25 0%, #041231 48%, #071a3b 100%);
}

.oc-hero-top:not(.has-active) .oc-hero-canvas::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 72%, rgba(49, 166, 255, .14), transparent 22%),
    radial-gradient(circle at 82% 78%, rgba(106, 70, 255, .15), transparent 24%);
  filter: blur(12px);
}

.oc-hero-top:not(.has-active) .oc-hero-canvas::after {
  opacity: .12;
  background-size: 31px 31px;
  mask-image: linear-gradient(180deg, transparent 8%, #000 45%, #000 100%);
}

.oc-network-lines { z-index: 4 !important; }
.oc-network-wave path {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.oc-wave-back path {
  stroke: url(#ocLinePurple);
  stroke-width: 1.1;
  opacity: .28;
}
.oc-wave-front path {
  stroke: url(#ocLineCyan);
  stroke-width: 1.5;
  opacity: .58;
  filter: drop-shadow(0 0 7px rgba(42, 183, 255, .42));
  stroke-dasharray: 10 9;
  animation: ocDeepFlow 18s linear infinite;
}
.oc-wave-front path:nth-child(2) { animation-duration: 24s; animation-direction: reverse; }
.oc-wave-front path:nth-child(3) { opacity: .22; stroke-dasharray: none; }
.oc-network-nodes circle {
  fill: url(#ocNodeGlow);
  stroke: none;
  animation: ocDeepNode 3.8s ease-in-out infinite alternate;
}
@keyframes ocDeepFlow { to { stroke-dashoffset: -260; } }
@keyframes ocDeepNode { to { opacity: .46; transform: scale(.72); transform-origin: center; } }

.oc-hero-top:not(.has-active) .oc-keyword-groupware {
  top: 15%; left: 35%;
  color: #f7fbff;
  font-size: clamp(54px, 5.8vw, 100px);
  font-weight: 780;
  letter-spacing: -.055em;
  text-shadow: 0 0 42px rgba(28, 139, 255, .26);
}
.oc-hero-top:not(.has-active) .oc-keyword-collaboration {
  top: 45%; left: 13%;
  color: #91a8ff;
  font-size: clamp(30px, 3vw, 52px);
  font-weight: 520;
}
.oc-hero-top:not(.has-active) .oc-keyword-communication {
  top: 43%; left: 65%;
  color: #73e7ec;
  font-size: clamp(31px, 3.2vw, 56px);
  font-weight: 560;
}

.oc-hero-top:not(.has-active) .oc-feature-hotspot:not(.is-active) {
  background: rgba(11, 25, 58, .64) !important;
  border-color: rgba(131, 190, 255, .2);
  box-shadow: 0 14px 38px rgba(0, 2, 16, .38), inset 0 1px rgba(255,255,255,.06) !important;
}
.oc-hero-top:not(.has-active) .oc-feature-hotspot:not(.is-active)::before {
  background:
    linear-gradient(#fff, #fff) center / 12px 2px no-repeat,
    linear-gradient(#fff, #fff) center / 2px 12px no-repeat,
    linear-gradient(135deg, #2878ff, #22d6e2);
  box-shadow: 0 0 20px rgba(37, 188, 231, .34);
}

/* 텍스트와 기능 노드를 각각 분리된 좌표에 고정 */
.oc-hero-top:not(.has-active) .oc-hotspot-approval { left: 7%; top: 18%; }
.oc-hero-top:not(.has-active) .oc-hotspot-mail     { left: 24%; top: 68%; }
.oc-hero-top:not(.has-active) .oc-hotspot-portal   { left: 48%; top: 38%; }
.oc-hero-top:not(.has-active) .oc-hotspot-mobile   { left: 48%; top: 78%; }
.oc-hero-top:not(.has-active) .oc-hotspot-org      { left: 80%; top: 17%; }
.oc-hero-top:not(.has-active) .oc-hotspot-ai       { left: 84%; top: 67%; }

@media (prefers-reduced-motion: reduce) {
  .oc-wave-front path, .oc-network-nodes circle { animation: none !important; }
}

/* 2026-09-09 히어로 연속형 다크 헤더 */
.site-header {
  border-bottom: 1px solid rgba(104, 177, 224, .13) !important;
  background: rgba(2, 11, 37, .90) !important;
  box-shadow: 0 8px 32px rgba(0, 5, 24, .20);
  backdrop-filter: blur(18px) saturate(125%);
}

.site-header::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 8%, rgba(45, 213, 231, .34) 38%, rgba(73, 112, 255, .30) 67%, transparent 92%);
}

.site-header .nav {
  min-height: 76px;
}

.site-header .brand img {
  filter: brightness(0) invert(1);
  opacity: .94;
}

.site-header .nav-links {
  color: rgba(235, 247, 255, .82);
}

.site-header .nav-links a {
  position: relative;
  transition: color .2s ease;
}

.site-header .nav-links a::after {
  content: '';
  position: absolute;
  right: 50%;
  bottom: -10px;
  left: 50%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #2887ff, #29d5dc);
  transition: right .22s ease, left .22s ease;
}

.site-header .nav-links a:hover {
  color: #fff;
}

.site-header .nav-links a:hover::after {
  right: 0;
  left: 0;
}

.site-header .btn-primary {
  border: 1px solid rgba(98, 224, 235, .28);
  border-radius: 21px;
  background: linear-gradient(135deg, #176bd8, #16b7c6);
  box-shadow: 0 8px 22px rgba(15, 135, 197, .24);
}

.site-header .btn-primary:hover {
  background: linear-gradient(135deg, #217cf1, #21c8d2);
  box-shadow: 0 11px 28px rgba(23, 159, 216, .34);
}

.site-header .menu-btn {
  color: #eefaff;
}

@media (max-width: 760px) {
  .site-header .nav-links {
    border: 1px solid rgba(98, 179, 224, .16);
    background: rgba(3, 17, 45, .97);
    box-shadow: 0 18px 45px rgba(0, 5, 22, .44);
  }
}

/* 2026-09-09 오비탈 코어 히어로 */
body {
  background: #030d27;
}

.site-header {
  border-bottom: 0 !important;
  background:
    radial-gradient(circle at 50% 180%, rgba(31, 101, 183, .16), transparent 48%),
    #030d27 !important;
  box-shadow: none;
  backdrop-filter: none;
}

.site-header::after {
  right: 8%;
  left: 8%;
  opacity: .42;
  background: linear-gradient(90deg, transparent, rgba(57, 205, 229, .25), rgba(99, 91, 231, .22), transparent);
}

.top.oc-hero-top:not(.has-active),
.oc-hero-top:not(.has-active) .oc-hero-canvas {
  background:
    radial-gradient(ellipse at 50% 28%, rgba(24, 102, 201, .25), transparent 30%),
    radial-gradient(ellipse at 50% 78%, rgba(16, 180, 204, .10), transparent 38%),
    linear-gradient(180deg, #030d27 0%, #061735 56%, #081c3e 100%);
}

.oc-hero-top:not(.has-active) .oc-hero-canvas::before {
  inset: -15% -5% 0;
  z-index: 2;
  background:
    linear-gradient(112deg, transparent 18%, rgba(53, 202, 226, .055) 42%, transparent 55%),
    linear-gradient(68deg, transparent 35%, rgba(104, 87, 233, .06) 54%, transparent 68%);
  filter: none;
  animation: ocLightSweep 12s ease-in-out infinite alternate;
}

.oc-hero-top:not(.has-active) .oc-hero-keywords::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -23%;
  left: 24%;
  width: 53%;
  aspect-ratio: 1.65;
  border: 1px solid rgba(72, 218, 235, .18);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(35, 122, 235, .15) 0 2%, transparent 2.5% 20%, rgba(59, 204, 229, .055) 20.5% 21%, transparent 21.5% 39%, rgba(112, 89, 238, .05) 39.5% 40%, transparent 40.5%),
    radial-gradient(circle at center, rgba(41, 162, 255, .18), transparent 58%);
  box-shadow:
    0 0 100px rgba(34, 114, 225, .12),
    inset 0 0 70px rgba(39, 197, 223, .05);
  transform: perspective(700px) rotateX(64deg) rotateZ(-7deg);
  animation: ocOrbitDrift 18s ease-in-out infinite alternate;
}

.oc-hero-top:not(.has-active) .oc-hero-keywords::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 18%;
  left: 47%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #dffcff;
  box-shadow:
    0 0 8px #fff,
    0 0 25px #24d6ed,
    -340px 135px 0 -2px #55d9ed,
    -340px 135px 18px 1px rgba(85,217,237,.48),
    385px 98px 0 -2px #9982ff,
    385px 98px 20px 1px rgba(153,130,255,.46),
    -120px 315px 0 -2px #55b5ff,
    -120px 315px 18px 0 rgba(85,181,255,.42),
    275px 360px 0 -2px #42e2db,
    275px 360px 18px 0 rgba(66,226,219,.40);
  animation: ocCorePulse 3.6s ease-in-out infinite alternate;
}

@keyframes ocOrbitDrift {
  from { transform: perspective(700px) rotateX(64deg) rotateZ(-7deg) scale(.98); opacity: .72; }
  to { transform: perspective(700px) rotateX(61deg) rotateZ(-2deg) scale(1.04); opacity: 1; }
}
@keyframes ocCorePulse {
  to { transform: scale(1.35); opacity: .65; }
}
@keyframes ocLightSweep {
  to { transform: translateX(4%); opacity: .72; }
}

.oc-network-lines {
  opacity: .56;
  transform: translateY(7%);
  mask-image: linear-gradient(180deg, transparent 35%, #000 67%, #000 100%);
}
.oc-wave-back path { opacity: .13; }
.oc-wave-front path { opacity: .30; stroke-width: 1.15; }
.oc-network-nodes circle { opacity: .68; }

.oc-hero-top:not(.has-active) .oc-keyword-groupware {
  top: 19%;
  left: 50%;
  transform: translateX(-50%);
  color: #f8fbff;
  font-size: clamp(55px, 5.7vw, 98px);
  text-shadow: 0 0 55px rgba(45, 139, 255, .34);
  animation: ocMainTitleFloat 8s ease-in-out infinite;
}
@keyframes ocMainTitleFloat {
  0%, 100% { transform: translate3d(-50%, 0, 0); }
  50% { transform: translate3d(-50%, -7px, 0); }
}
.oc-hero-top:not(.has-active) .oc-keyword-collaboration {
  top: 51%; left: 14%;
  color: rgba(159, 177, 255, .92);
  font-size: clamp(28px, 2.65vw, 47px);
}
.oc-hero-top:not(.has-active) .oc-keyword-communication {
  top: 49%; left: 67%;
  color: rgba(111, 231, 235, .94);
  font-size: clamp(29px, 2.8vw, 50px);
}

.oc-hero-top:not(.has-active) .oc-feature-hotspot:not(.is-active) {
  border-color: rgba(107, 187, 236, .18);
  background: linear-gradient(135deg, rgba(8, 24, 56, .74), rgba(13, 39, 72, .58)) !important;
  box-shadow: 0 16px 40px rgba(0, 3, 18, .34), inset 0 1px rgba(255,255,255,.07) !important;
}

/* 궤도 주변에 기능 노드를 균형 있게 배치 */
.oc-hero-top:not(.has-active) .oc-hotspot-approval { left: 7%; top: 22%; }
.oc-hero-top:not(.has-active) .oc-hotspot-mail     { left: 25%; top: 70%; }
.oc-hero-top:not(.has-active) .oc-hotspot-portal   { left: 46%; top: 44%; }
.oc-hero-top:not(.has-active) .oc-hotspot-mobile   { left: 48%; top: 79%; }
.oc-hero-top:not(.has-active) .oc-hotspot-org      { left: 80%; top: 20%; }
.oc-hero-top:not(.has-active) .oc-hotspot-ai       { left: 84%; top: 68%; }

@media (prefers-reduced-motion: reduce) {
  .oc-hero-top:not(.has-active) .oc-hero-canvas::before,
  .oc-hero-top:not(.has-active) .oc-hero-keywords::before,
  .oc-hero-top:not(.has-active) .oc-hero-keywords::after,
  .oc-hero-top:not(.has-active) .oc-keyword-groupware { animation: none !important; }
}

/* 2026-09-09 연속형 라이트 라인 */
.oc-wave-front path,
.oc-network-paths path {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  animation: ocContinuousGlow 7s ease-in-out infinite alternate !important;
}
.oc-wave-front path:nth-child(2),
.oc-network-paths path:nth-child(2) {
  animation: ocContinuousGlow 9s ease-in-out -3s infinite alternate !important;
}
.oc-wave-front path:nth-child(3) { animation: none !important; }
@keyframes ocContinuousGlow {
  from { opacity: .16; filter: drop-shadow(0 0 3px rgba(42,183,255,.18)); }
  to { opacity: .40; filter: drop-shadow(0 0 9px rgba(42,183,255,.46)); }
}
@media (prefers-reduced-motion: reduce) {
  .oc-wave-front path, .oc-network-paths path { animation: none !important; }
}

/* 2026-09-09 유기적 연결망 히어로 */
.site-header {
  background: #030d27 !important;
}

.top.oc-hero-top:not(.has-active),
.oc-hero-top:not(.has-active) .oc-hero-canvas {
  background:
    radial-gradient(circle at 42% 46%, rgba(28, 126, 189, .13), transparent 28%),
    radial-gradient(circle at 70% 36%, rgba(85, 71, 194, .12), transparent 26%),
    linear-gradient(145deg, #030d27 0%, #071735 55%, #091b3a 100%);
}

.oc-hero-top:not(.has-active) .oc-hero-canvas::before {
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(112deg, transparent 14%, rgba(45, 207, 220, .035) 45%, transparent 67%),
    radial-gradient(ellipse at 52% 52%, rgba(30, 120, 210, .10), transparent 48%);
  animation: none;
}

.oc-hero-top:not(.has-active) .oc-hero-keywords::before,
.oc-hero-top:not(.has-active) .oc-hero-keywords::after {
  display: none;
}

.oc-organic-network {
  inset: 1% -2% -3% !important;
  z-index: 4 !important;
  width: 104% !important;
  height: 102% !important;
  opacity: 1;
  transform: none;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.oc-organic-links path {
  fill: none;
  stroke: url(#ocOrganicLine);
  stroke-width: 1.05;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: .42;
  animation: ocOrganicBreathe 8s ease-in-out infinite alternate;
}
.oc-organic-links path:nth-child(2n) { opacity: .25; animation-delay: -4s; }
.oc-organic-links path:nth-child(3n) { stroke-width: .7; opacity: .2; }

.oc-organic-nodes circle {
  fill: url(#ocOrganicNode);
  stroke: rgba(122, 229, 238, .17);
  stroke-width: 8;
  transform-box: fill-box;
  transform-origin: center;
  animation: ocOrganicNodePulse 4.5s ease-in-out infinite alternate;
}
.oc-organic-nodes circle:nth-child(3n) { animation-delay: -1.5s; }
.oc-organic-nodes circle:nth-child(4n) { animation-delay: -3s; }

@keyframes ocOrganicBreathe {
  to { opacity: .62; filter: drop-shadow(0 0 5px rgba(67, 195, 231, .28)); }
}
@keyframes ocOrganicNodePulse {
  to { transform: scale(1.28); opacity: .64; stroke-width: 15; }
}

.oc-hero-top:not(.has-active) .oc-keyword-groupware {
  top: 18%; left: 38%;
  transform: none;
  color: #f8fcff;
  font-size: clamp(52px, 5.2vw, 90px);
  animation: ocFloatWordA 9s ease-in-out infinite;
}
.oc-hero-top:not(.has-active) .oc-keyword-collaboration {
  top: 51%; left: 13%;
  color: #a7b6ff;
  font-size: clamp(29px, 2.7vw, 48px);
}
.oc-hero-top:not(.has-active) .oc-keyword-communication {
  top: 45%; left: 66%;
  color: #7ce5e6;
  font-size: clamp(30px, 2.85vw, 50px);
}

/* 기능 버튼을 실제 연결망의 주요 노드에 배치 */
.oc-hero-top:not(.has-active) .oc-hotspot-approval { left: 6%; top: 28%; }
.oc-hero-top:not(.has-active) .oc-hotspot-mail     { left: 27%; top: 72%; }
.oc-hero-top:not(.has-active) .oc-hotspot-portal   { left: 48%; top: 48%; }
.oc-hero-top:not(.has-active) .oc-hotspot-mobile   { left: 51%; top: 80%; }
.oc-hero-top:not(.has-active) .oc-hotspot-org      { left: 80%; top: 22%; }
.oc-hero-top:not(.has-active) .oc-hotspot-ai       { left: 84%; top: 69%; }

.oc-hero-top:not(.has-active) .oc-feature-hotspot:not(.is-active) {
  border: 1px solid rgba(111, 205, 229, .20);
  background: rgba(5, 21, 49, .78) !important;
  box-shadow: 0 13px 34px rgba(0, 5, 23, .38), 0 0 0 4px rgba(40, 149, 210, .025) !important;
}

@media (prefers-reduced-motion: reduce) {
  .oc-organic-links path, .oc-organic-nodes circle { animation: none !important; }
}

@media (max-width: 900px) {
  .oc-organic-network { transform: scale(1.5) translateX(-8%); transform-origin: center; }
  .oc-hero-top:not(.has-active) .oc-keyword-groupware { top: 9%; left: 6%; font-size: 43px; }
  .oc-hero-top:not(.has-active) .oc-keyword-collaboration { top: 46%; left: 6%; font-size: 30px; }
  .oc-hero-top:not(.has-active) .oc-keyword-communication { top: 70%; left: 17%; font-size: 31px; }
}

/* 2026-09-09 헤더 오버레이와 첫 화면 높이 보정 */
html { scroll-padding-top: 76px; }

.site-header {
  position: fixed !important;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
}

.top.oc-hero-top:not(.has-active) {
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 650px;
  padding-top: 76px;
}

.oc-hero-top:not(.has-active) .oc-hero-media {
  height: 100%;
}

.oc-hero-top:not(.has-active) .oc-hero-canvas {
  height: 100%;
}

@media (max-width: 900px) {
  .top.oc-hero-top:not(.has-active) {
    height: 100svh;
    min-height: 690px;
    padding-top: 70px;
  }
}

/* 2026-09-09 다음 섹션 미리보기 높이 */
@media (min-width: 901px) {
  .top.oc-hero-top:not(.has-active) {
    height: calc(100vh - 215px);
    height: calc(100svh - 215px);
    min-height: 620px;
    max-height: 780px;
  }
}

/* 2026-09-09 모바일 몽타주 원형 오버레이 제거 */
.oc-hotspot-mobile.is-active.is-montage::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* 2026-09-09 다크 히어로 연속형 상세 화면 */
.top.oc-hero-top.has-active {
  background:
    radial-gradient(circle at 35% 42%, rgba(28, 126, 189, .12), transparent 34%),
    radial-gradient(circle at 78% 65%, rgba(82, 68, 185, .11), transparent 30%),
    linear-gradient(145deg, #030d27 0%, #071735 58%, #091b3a 100%);
}

.oc-hero-top.has-active .oc-hero-media,
.oc-hero-top.has-active .oc-hero-canvas {
  background: transparent;
}

.oc-hero-top.has-active .oc-feature-hotspot.is-active {
  border: 1px solid rgba(104, 200, 228, .22);
  border-radius: 20px;
  background-color: #091a31;
  box-shadow:
    0 28px 70px rgba(0, 4, 20, .48),
    0 0 0 1px rgba(255,255,255,.025),
    0 0 50px rgba(39, 146, 208, .08);
}

.top.oc-hero-top.has-active .oc-feature-panel {
  overflow: hidden;
  border: 1px solid rgba(104, 200, 228, .18);
  border-left: 2px solid #27c2d0;
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(14, 48, 72, .96), rgba(7, 29, 53, .97));
  box-shadow:
    0 24px 60px rgba(0, 4, 20, .44),
    inset 0 1px rgba(255,255,255,.045);
  backdrop-filter: blur(16px);
}

.top.oc-hero-top.has-active .oc-feature-panel::before {
  content: '';
  position: absolute;
  top: -90px;
  right: -65px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(45, 198, 215, .13), transparent 68%);
}

.oc-hero-top.has-active .oc-feature-kicker {
  color: #68e4e9;
}

.oc-hero-top.has-active .oc-feature-variants button {
  border-color: rgba(105, 216, 228, .22);
  background: rgba(27, 197, 210, .08);
  color: #dffcff;
}

.oc-hero-top.has-active .oc-feature-variants button.is-active {
  border-color: transparent;
  background: linear-gradient(135deg, #20c4cf, #5ee3df);
  color: #073047;
  box-shadow: 0 7px 20px rgba(32, 196, 207, .22);
}

.oc-hero-top.has-active .oc-feature-controls button {
  border-color: rgba(141, 216, 232, .35);
  background: rgba(255,255,255,.045);
}

.oc-hero-top.has-active .oc-feature-controls button:hover {
  border-color: rgba(104, 226, 234, .7);
  background: rgba(41, 197, 210, .12);
}

@media (max-width: 900px) {
  .oc-hero-top.has-active .oc-feature-hotspot.is-active { border-radius: 14px; }
  .top.oc-hero-top.has-active .oc-feature-panel {
    border-top: 2px solid #27c2d0;
    border-left: 1px solid rgba(104, 200, 228, .18);
    border-radius: 14px;
  }
}

/* 2026-09-09 모든 몽타주 렌즈 오버레이 제거 */
.oc-feature-hotspot.is-active.is-montage::before,
.oc-hotspot-mobile.is-active.is-montage::before,
.oc-hotspot-org.is-active.is-montage::before,
.oc-hotspot-ai.is-active.is-montage::before {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* 2026-09-09 상세 화면 헤더 간격과 강조 띠 제거 */
.oc-hero-top.has-active .oc-hero-media {
  top: 76px;
  bottom: 0;
  height: calc(100% - 76px);
}

.top.oc-hero-top.has-active .oc-feature-panel {
  top: calc(76px + 4%);
  border: 1px solid rgba(104, 200, 228, .18);
  border-left: 1px solid rgba(104, 200, 228, .18);
}

@media (max-width: 900px) {
  .oc-hero-top.has-active .oc-hero-media {
    top: 70px;
    height: calc(100% - 70px);
    padding-top: 0;
  }
  .top.oc-hero-top.has-active .oc-feature-panel {
    top: auto;
    border: 1px solid rgba(104, 200, 228, .18);
  }
}

/* 2026-09-09 하단 콘텐츠 임시 제거 및 상단 이동 비활성화 */
main > section:not(.oc-hero-top),
body > footer {
  display: none !important;
}



.site-header .nav-links a::after {
  display: none;
}

@media (min-width: 901px) {
  .top.oc-hero-top:not(.has-active) {
    height: 100vh;
    height: 100svh;
    max-height: none;
  }
}

/* 2026-09-09 하단 콘텐츠 복구 */
main > section:not(.oc-hero-top) {
  display: block !important;
}

body > footer {
  display: block !important;
}

@media (min-width: 901px) {
  .top.oc-hero-top:not(.has-active) {
    height: calc(100vh - 215px);
    height: calc(100svh - 215px);
    min-height: 620px;
    max-height: 780px;
  }
}

/* 2026-09-09 두 번째 섹션 연동 상세 영역 제거 */
.oc-concept .product-groups {
  display: none !important;
}

.oc-concept-card {
  cursor: default;
}

/* 2026-09-09 가격안내 페이지 링크 활성화 */
.site-header .nav-links a[href="price.asp"] {
  pointer-events: auto;
  cursor: pointer;
}

.site-header .nav-links a[href="price.asp"]::after {
  display: block;
}

/* 2026-09-09 레퍼런스 드롭다운 */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: 700;
  cursor: pointer;
}
.nav-dropdown-trigger span { font-size: 12px; transition: transform .2s ease; }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 20px);
  left: 50%;
  width: 150px;
  padding: 8px;
  border: 1px solid rgba(112, 197, 224, .17);
  border-radius: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  background: rgba(5, 20, 45, .97);
  box-shadow: 0 18px 42px rgba(0, 4, 20, .38);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 21px;
}
.nav-dropdown-menu button {
  display: block;
  width: 100%;
  padding: 11px 13px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(238, 249, 255, .86);
  text-align: left;
  font-weight: 700;
  cursor: default;
}
.nav-dropdown-menu button:hover { background: rgba(37, 188, 210, .10); color: #fff; }
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav-dropdown:hover .nav-dropdown-trigger span,
.nav-dropdown:focus-within .nav-dropdown-trigger span { transform: rotate(180deg); }

@media (max-width: 760px) {
  .nav-dropdown { width: 100%; }
  .nav-dropdown-menu {
    position: static;
    width: 100%;
    margin-top: 10px;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
  }
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu { display: block; transform: none; }
}


/* 2026-09-17 전자결재 핵심 화면 확대 컷 */
.oc-approval-zoom {
  position: absolute;
  z-index: 20;
  left: 31%;
  bottom: 7%;
  width: 31%;
  padding: 8px;
  overflow: visible;
  border: 2px solid rgba(64, 200, 225, .96);
  border-radius: 16px;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow:
    0 28px 64px rgba(0, 7, 24, .48),
    0 0 0 7px rgba(73, 205, 228, .08),
    inset 0 0 0 1px rgba(255,255,255,.8);
  transform: translateY(22px) scale(.9);
  transform-origin: center bottom;
  transition: opacity .36s ease, transform .52s cubic-bezier(.18,.82,.22,1), visibility .36s;
  pointer-events: none;
}
.oc-approval-zoom::before {
  position: absolute;
  z-index: -1;
  top: 17%;
  right: 14%;
  bottom: 17%;
  left: 14%;
  border-radius: 50%;
  background: rgba(53, 202, 229, .28);
  filter: blur(32px);
  content: '';
}
.oc-approval-zoom img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.oc-approval-zoom i {
  position: absolute;
  top: -15px;
  right: 16px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #06283d;
  background: #68e4e9;
  box-shadow: 0 8px 20px rgba(0, 36, 57, .25);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .06em;
}
.oc-hotspot-approval.is-active .oc-approval-zoom {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
@media (max-width: 900px) {
  .oc-approval-zoom {
    left: 42%;
    bottom: 4%;
    width: 50%;
    padding: 5px;
    border-radius: 11px;
  }
  .oc-approval-zoom img { border-radius: 7px; }
  .oc-approval-zoom i { top: -12px; right: 8px; padding: 5px 8px; font-size: 9px; }
}


/* 2026-09-17 전자결재 확대 컷 위치 재조정 */
.oc-hotspot-approval.is-active .oc-approval-zoom {
  top: 18%;
  right: auto;
  bottom: auto;
  left: 10%;
  width: 25%;
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(72, 201, 225, .92);
  border-radius: 18px;
  box-shadow:
    0 18px 42px rgba(0, 13, 33, .36),
    0 0 0 5px rgba(73, 205, 228, .07);
}
.oc-hotspot-approval.is-active .oc-approval-zoom img {
  border-radius: 15px;
}
.oc-hotspot-approval .oc-approval-zoom i { display: none !important; }
@media (max-width: 900px) {
  .oc-hotspot-approval.is-active .oc-approval-zoom {
    top: 15%;
    left: 8%;
    width: 38%;
    border-radius: 13px;
  }
  .oc-hotspot-approval.is-active .oc-approval-zoom img { border-radius: 10px; }
}


/* 2026-09-17 전자결재 합성 화면 크기 및 모서리 보정 */
.oc-approval-main-image {
  display: none;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 1.5%;
  width: 68%;
  height: auto;
  max-height: 88%;
  border: 1px solid rgba(133, 190, 213, .34);
  border-radius: 16px;
  object-fit: contain;
  box-shadow: 0 18px 42px rgba(0, 10, 29, .30);
  transform: translateY(-50%);
  pointer-events: none;
}
.oc-hotspot-approval.is-active {
  background-image: none !important;
}
.oc-hotspot-approval.is-active .oc-approval-main-image {
  display: block;
}
.oc-hotspot-approval.is-active .oc-approval-zoom {
  z-index: 3;
  top: 27%;
  left: 9%;
  width: 18%;
  border-width: 1.5px;
  border-radius: 14px;
  box-shadow:
    0 16px 36px rgba(0, 13, 33, .34),
    0 0 0 4px rgba(73, 205, 228, .06);
}
.oc-hotspot-approval.is-active .oc-approval-zoom img {
  border-radius: 12px;
}
@media (max-width: 900px) {
  .oc-approval-main-image {
    top: 43%;
    left: 3%;
    width: 94%;
    max-height: 64%;
    border-radius: 12px;
  }
  .oc-hotspot-approval.is-active .oc-approval-zoom {
    top: 24%;
    left: 13%;
    width: 25%;
    border-radius: 10px;
  }
  .oc-hotspot-approval.is-active .oc-approval-zoom img { border-radius: 8px; }
}


/* 2026-09-17 전자결재 보조 화면 자연스러운 강조 */
.oc-hotspot-approval.is-active .oc-approval-zoom {
  border: 1px solid #d8e0e6;
  background: #fff;
  box-shadow: 0 14px 34px rgba(12, 35, 53, .28);
  transform: none;
}
.oc-hotspot-approval.is-active .oc-approval-zoom::before {
  display: none;
  content: none;
}


/* 2026-09-17 전자메일 메인과 보조 화면 합성 */
.oc-mail-main-image {
  display: none;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 1.5%;
  width: 68%;
  height: auto;
  max-height: 88%;
  border: 1px solid rgba(133, 190, 213, .34);
  border-radius: 16px;
  object-fit: contain;
  box-shadow: 0 18px 42px rgba(0, 10, 29, .30);
  transform: translateY(-50%);
  pointer-events: none;
}
.oc-mail-detail {
  position: absolute;
  z-index: 3;
  top: 32%;
  left: 24%;
  display: block;
  width: 30%;
  overflow: hidden;
  border: 1px solid #d8e0e6;
  border-radius: 14px;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0 14px 34px rgba(12, 35, 53, .28);
  transition: opacity .32s ease, transform .46s cubic-bezier(.18,.82,.22,1), visibility .32s;
  transform: translateY(14px);
  pointer-events: none;
}
.oc-mail-detail img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.oc-hotspot-mail.is-active { background-image: none !important; }
.oc-hotspot-mail.is-active .oc-mail-main-image { display: block; }
.oc-hotspot-mail.is-active .oc-mail-detail {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (max-width: 900px) {
  .oc-mail-main-image {
    top: 43%;
    left: 3%;
    width: 94%;
    max-height: 64%;
    border-radius: 12px;
  }
  .oc-mail-detail {
    top: 31%;
    left: 36%;
    width: 47%;
    border-radius: 10px;
  }
  .oc-mail-detail img { border-radius: 8px; }
}


/* 2026-09-17 통합 포털 메인과 보조 화면 합성 */
.oc-portal-main-image {
  display: none;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 1.5%;
  width: 68%;
  height: auto;
  max-height: 88%;
  border: 1px solid rgba(133, 190, 213, .34);
  border-radius: 16px;
  object-fit: contain;
  box-shadow: 0 18px 42px rgba(0, 10, 29, .30);
  transform: translateY(-50%);
  pointer-events: none;
}
.oc-portal-detail {
  position: absolute;
  z-index: 3;
  display: block;
  overflow: hidden;
  border: 1px solid #d8e0e6;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0 14px 34px rgba(12, 35, 53, .26);
  transition: opacity .32s ease, transform .46s cubic-bezier(.18,.82,.22,1), visibility .32s;
  transform: translateY(14px);
  pointer-events: none;
}
.oc-portal-detail img { display:block;width:100%;height:auto; }
.oc-portal-detail-large {
  top: 48%;
  left: 24%;
  width: 31%;
  border-radius: 13px;
}
.oc-portal-detail-large img { border-radius: 11px; }
.oc-portal-detail-small {
  top: 23%;
  left: 29%;
  width: 17%;
  border-radius: 11px;
}
.oc-portal-detail-small img { border-radius: 9px; }
.oc-hotspot-portal.is-active { background-image: none !important; }
.oc-hotspot-portal.is-active .oc-portal-main-image { display: block; }
.oc-hotspot-portal.is-active .oc-portal-detail {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (max-width: 900px) {
  .oc-portal-main-image {
    top: 43%;
    left: 3%;
    width: 94%;
    max-height: 64%;
    border-radius: 12px;
  }
  .oc-portal-detail-large { top: 45%;left: 37%;width: 48%;border-radius: 10px; }
  .oc-portal-detail-small { top: 28%;left: 45%;width: 28%;border-radius: 8px; }
  .oc-portal-detail-large img { border-radius: 8px; }
  .oc-portal-detail-small img { border-radius: 6px; }
}


/* 2026-09-17 모바일 기기 화면 합성 */
.oc-mobile-gallery {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 4%;
  display: none;
  width: 62%;
  height: 86%;
  align-items: center;
  justify-content: center;
  gap: 3.2%;
  transform: translateY(-50%);
  pointer-events: none;
}
.oc-mobile-phone {
  position: relative;
  display: block;
  height: 91%;
  overflow: visible;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(0, 10, 29, .32);
}
.oc-mobile-phone > img:not(.oc-mobile-menu-layer) {
  display: block;
  width: auto;
  height: 100%;
  border: 1px solid #d8e0e6;
  border-radius: 18px;
  object-fit: contain;
}
.oc-mobile-menu-layer {
  position: absolute;
  z-index: 3;
  top: 24%;
  right: -18%;
  width: 49%;
  height: auto;
  border: 1px solid #d8e0e6;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(12, 35, 53, .27);
}
.oc-hotspot-mobile.is-active { background-image: none !important; }
.oc-hotspot-mobile.is-active .oc-mobile-gallery { display: flex; }
@media (max-width: 900px) {
  .oc-mobile-gallery {
    top: 37%;
    left: 4%;
    width: 92%;
    height: 56%;
    gap: 2.5%;
  }
  .oc-mobile-phone { height: 88%;border-radius: 12px; }
  .oc-mobile-phone > img:not(.oc-mobile-menu-layer) { border-radius: 12px; }
  .oc-mobile-menu-layer { right:-14%;border-radius:8px; }
}


/* 2026-09-17 메신저 창 화면 합성 */
.oc-messenger-gallery {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 3.5%;
  display: none;
  width: 64%;
  height: 86%;
  transform: translateY(-50%);
  pointer-events: none;
}
.oc-messenger-window {
  position: absolute;
  display: block;
  height: auto;
  border: 1px solid #d8e0e6;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(0, 10, 29, .29);
  object-fit: contain;
}
.oc-messenger-org-window {
  z-index: 1;
  bottom: 1%;
  left: 0;
  width: 33%;
}
.oc-messenger-chat-window {
  z-index: 2;
  bottom: 1%;
  left: 34%;
  width: 33%;
}
.oc-messenger-note-window {
  z-index: 3;
  top: 10%;
  right: 0;
  width: 49%;
  box-shadow: 0 20px 48px rgba(0, 10, 29, .35);
}
.oc-hotspot-org.is-active { background-image: none !important; }
.oc-hotspot-org.is-active .oc-messenger-gallery { display: block; }
@media (max-width: 900px) {
  .oc-messenger-gallery {
    top: 37%;
    left: 3%;
    width: 94%;
    height: 58%;
  }
  .oc-messenger-window { border-radius: 8px; }
  .oc-messenger-org-window { width: 34%; }
  .oc-messenger-chat-window { left: 32%;width:34%; }
  .oc-messenger-note-window { top:16%;width:52%; }
}


/* 2026-09-17 AI Assistant 화면 합성 */
.oc-ai-gallery {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 3.5%;
  display: none;
  width: 64%;
  height: 86%;
  align-items: center;
  justify-content: center;
  gap: 3.1%;
  transform: translateY(-50%);
  pointer-events: none;
}
.oc-ai-screen {
  display: block;
  width: auto;
  height: 91%;
  border: 1px solid #d8e0e6;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(0, 10, 29, .29);
  object-fit: contain;
}
.oc-ai-screen-start { height: 94%; }
.oc-ai-screen:nth-child(2) { transform: translateY(-1.5%); }
.oc-ai-screen:nth-child(3) { transform: translateY(1.5%); }
.oc-hotspot-ai.is-active { background-image: none !important; }
.oc-hotspot-ai.is-active .oc-ai-gallery { display: flex; }
@media (max-width: 900px) {
  .oc-ai-gallery {
    top: 37%;
    left: 3%;
    width: 94%;
    height: 58%;
    gap: 2.2%;
  }
  .oc-ai-screen { height: 86%;border-radius:9px; }
  .oc-ai-screen-start { height: 90%; }
}


/* 2026-09-17 그룹웨어 소개 섹션 상단 여백 축소 */
.oc-concept { padding-top: 68px; }
@media (max-width: 900px) { .oc-concept { padding-top: 52px; } }

/* Fit the approval card asset without cropping. */
.core-feature-visual.core-approval-fit img{object-fit:contain;object-position:top center;}

/* Fit the mail card asset without cropping. */
.core-feature-visual.core-mail-fit img{object-fit:contain;object-position:top center;}

/* Messenger desktop platform support. */
.core-feature-visual.core-messenger-fit{overflow:visible;background:transparent;box-shadow:none;}
.core-feature-visual.core-messenger-fit>img{display:block;object-fit:contain;object-position:top center;border-radius:14px 14px 0 0;background:#fff;}
.core-messenger-platforms{position:absolute;top:-34px;left:0;right:0;display:flex;justify-content:center;gap:14px;color:#416074;}
.core-messenger-platforms span{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;}
.core-messenger-platforms svg{width:19px;height:19px;flex:none;}

/* Floating desktop platform icons over the messenger screen. */
.core-feature-visual.core-messenger-fit .core-messenger-platforms {
  top: 14px;
  left: auto;
  right: 8px;
  z-index: 5;
  gap: 8px;
}
.core-messenger-platforms span {
  width: 42px;
  height: 42px;
  justify-content: center;
  gap: 0;
  border: 1px solid #d6e2e9;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(11, 41, 65, .24);
  font-size: 0;
}
.core-messenger-platforms svg { width: 24px;height: 24px; }
.core-messenger-platforms span:first-child { color: #168ec1; }
.core-messenger-platforms span:last-child { color: #284358; }

/* Mobile approval notification, rather than a full app screenshot. */
.core-feature-visual.core-mobile-notification {
  right: 14px;
  bottom: 17px;
  width: calc(100% - 42px);
  height: 133px;
  padding: 14px 12px 12px;
  overflow: visible;
  border: 1px solid #d7e9ed;
  border-radius: 23px;
  background: linear-gradient(140deg,#e3f2f7,#e8eefb 65%,#dcf4f0);
  box-shadow: 0 12px 28px rgba(32,77,105,.12);
}
.core-mobile-locktime { text-align:center;color:#33566b;font-size:25px;line-height:1.1;font-weight:500;letter-spacing:-.03em; }
.core-mobile-locktime span { display:block;margin-top:4px;font-size:9px;letter-spacing:0;color:#6e8999; }
.core-mobile-alert {
  position: relative;
  margin: 12px -5px 0;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 13px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 7px 18px rgba(29,66,90,.17);
}
.core-feature-visual.core-mobile-notification .core-mobile-alert img { display:block;width:100%;height:auto;object-fit:contain;border-radius:7px; }

/* Fit the AI Assistant card asset without cropping. */
.core-feature-visual.core-ai-fit{height:125px;bottom:20px;padding:12px;border-radius:18px;background:#fff;}
.core-feature-visual.core-ai-fit img{object-fit:contain;object-position:center;border-radius:10px;}

/* Ensure the complete mobile notification is always visible. */
.core-feature-card .core-mobile-notification{overflow:visible!important;}
.core-feature-card .core-mobile-notification .core-mobile-alert{overflow:hidden;}
.core-feature-card .core-mobile-notification .core-mobile-alert img{display:block!important;width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;object-position:center!important;}

/* Four primary security capabilities. */
.core-feature-security{display:grid!important;grid-template-columns:repeat(2,max-content);grid-template-rows:repeat(2,auto);place-content:center;gap:9px!important;}
.core-feature-security span{min-width:72px;text-align:center;}

/* Care service visual. */
.core-feature-maintenance.core-care{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:13px;padding:18px 20px;}
.core-care-title{font-size:30px;font-weight:800;line-height:1;letter-spacing:-.04em;color:#fff;}
.core-care-items{display:flex;flex-wrap:wrap;gap:6px;}
.core-care-items span{padding:5px 7px;border:1px solid rgba(112,228,236,.22);border-radius:7px;background:rgba(255,255,255,.08);color:#d4f7ff;font-size:10px;font-weight:700;white-space:nowrap;}

/* Inner spacing for approval and mail card images. */
.core-feature-visual.core-approval-fit { padding: 15px 14px 0; }
.core-feature-visual.core-mail-fit { padding: 15px 0 0; }
.core-feature-visual.core-approval-fit img,
.core-feature-visual.core-mail-fit img { display:block;width:100%;height:100%;object-fit:contain;object-position:top center; }

/* Remove the extra white frame around the mobile notification. */
.core-feature-visual.core-mobile-notification .core-mobile-alert {
  margin: 12px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Larger AI artwork. */
.core-feature-visual.core-ai-fit {
  right: 12px;
  bottom: 16px;
  width: calc(100% - 24px);
  height: 140px;
  padding: 8px;
}
.core-feature-visual.core-ai-fit img { width:100%;height:100%;object-fit:contain; }

/* Security visual aligned with the Care panel style. */
.core-feature-security.core-security-panel {
  right: 18px;
  bottom: 20px;
  width: 78%;
  height: 125px;
  display:flex!important;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:13px!important;
  padding:18px 20px;
  border-radius:20px;
  background:linear-gradient(145deg,#102e46,#165a72);
  box-shadow:0 14px 30px rgba(17,67,91,.18);
}
.core-security-title { color:#fff;font-size:26px;line-height:1;font-weight:800;letter-spacing:-.04em; }
.core-security-items { display:flex;flex-wrap:wrap;gap:6px; }
.core-feature-security.core-security-panel .core-security-items span {
  min-width:0;
  padding:5px 7px;
  border:1px solid rgba(112,228,236,.22);
  border-radius:7px;
  color:#d4f7ff!important;
  background:rgba(255,255,255,.08)!important;
  font-size:10px;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
}

/* Extra top spacing for the messenger artwork. */
.core-feature-visual.core-messenger-fit { height: 136px; }

/* Resolve legacy security grid styles and keep all content inside the panel. */
.core-feature-security.core-security-panel {
  box-sizing:border-box;
  overflow:hidden;
  grid-template:none!important;
  place-content:normal!important;
  align-content:normal!important;
  justify-content:center!important;
}
.core-feature-security.core-security-panel .core-security-title {
  position:static!important;
  display:block;
  align-self:stretch;
  width:auto;
  margin:0;
  padding:0;
  transform:none!important;
  text-align:left;
  white-space:nowrap;
}
.core-feature-security.core-security-panel .core-security-items {
  width:100%;
  align-self:stretch;
}

/* Asymmetric Care item placement that uses the full panel width. */
.core-feature-maintenance.core-care .core-care-items {
  width:100%;
  display:grid;
  grid-template-columns:max-content 1fr;
  gap:8px 14px;
  align-items:center;
}
.core-care-items span:nth-child(1) { justify-self:start; }
.core-care-items span:nth-child(2) { justify-self:end; }
.core-care-items span:nth-child(3) { grid-column:1 / -1;justify-self:center; }

/* More space above the messenger image and platform icons. */
.core-feature-visual.core-messenger-fit { bottom: -40px; }


/* Security uses the same internal title layout as Care. */
.core-feature-maintenance.core-care.core-security-care {
  justify-content:center;
  align-items:flex-start;
}
.core-security-care .core-care-title {
  position:static!important;
  display:block;
  margin:0;
  padding:0;
  transform:none!important;
  text-align:left;
}
.core-security-care .core-security-care-items {
  width:100%;
  display:grid;
  grid-template-columns:max-content max-content;
  justify-content:start;
  gap:7px 8px;
}


/* Match the approval artwork size; spacing belongs inside the messenger frame. */
.core-feature-visual.core-messenger-fit {
  right:16px;
  bottom:-20px;
  width:72%;
  height:150px;
  padding:15px 14px 0;
  overflow:hidden;
  border-radius:20px 20px 0 0;
  background:#fff;
  box-shadow:0 6px 22px rgba(43,65,79,.1);
}
.core-feature-visual.core-messenger-fit > img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:top center;
}
.core-feature-visual.core-messenger-fit .core-messenger-platforms {
  top:29px;
  right:22px;
}


/* Align AI and mobile artwork frames with the approval card. */
.core-feature-visual.core-ai-fit,
.core-feature-visual.core-mobile-notification {
  right:16px;
  bottom:-20px;
  width:72%;
  height:150px;
  padding:15px 14px 0;
  border-radius:20px 20px 0 0;
}
.core-feature-visual.core-ai-fit {
  overflow:hidden;
  background:#fff;
  box-shadow:0 6px 22px rgba(43,65,79,.1);
}
.core-feature-visual.core-ai-fit img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:top center;
}
.core-feature-card .core-mobile-notification {
  overflow:hidden!important;
}


/* Keep the taller four-item Security content fully inside its panel. */
.core-feature-maintenance.core-care.core-security-care {
  box-sizing:border-box;
  overflow:hidden;
  justify-content:flex-start;
  gap:10px;
  padding:14px 20px 12px;
}
.core-feature-maintenance.core-care.core-security-care .core-care-title {
  flex:0 0 auto;
  line-height:1;
}
.core-feature-maintenance.core-care.core-security-care .core-security-care-items {
  flex:0 0 auto;
  gap:6px 8px;
}


/* Security has four items: use a true 2x2 grid, unlike Care's 3-item layout. */
.core-security-care .core-security-care-items {
  grid-template-columns:max-content max-content;
  grid-template-rows:auto auto;
  justify-content:start;
  align-items:center;
}
.core-security-care .core-security-care-items span:nth-child(3),
.core-security-care .core-security-care-items span:nth-child(4) {
  grid-column:auto;
  justify-self:start;
}


/* Improve pricing heading contrast against the dark section. */
#pricing .section-head .eyebrow { color:#52cce7; }
#pricing .section-head h2 { color:#fff; }
#pricing .section-head > p:last-child { color:rgba(225,240,250,.78); }


/* Structured site footer. */
.site-footer { padding:0!important;background:#091a2d!important;color:#d7e5ee!important;font-size:14px!important; }
.site-footer .footer-contact-grid { display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(165,202,222,.16);border-bottom:1px solid rgba(165,202,222,.16); }
.site-footer .footer-contact-grid > div { min-height:90px;display:flex;flex-direction:column;justify-content:center;padding:16px clamp(22px,7vw,145px);border-right:1px solid rgba(165,202,222,.16);white-space:nowrap; }
.site-footer .footer-contact-grid > div:last-child { border-right:0; }
.site-footer .footer-contact-grid span { margin-bottom:4px;color:#91a8b8;font-size:12px; }
.site-footer .footer-contact-grid strong { color:#fff;font-size:20px;font-weight:500;letter-spacing:.01em; }
.site-footer a { color:inherit;text-decoration:none; }
.site-footer .footer-company { min-height:190px;display:flex;justify-content:space-between;align-items:flex-start;gap:40px;padding:30px max(24px,calc((100% - 1200px)/2)); }
.site-footer .footer-company-copy p { margin:0 0 8px;color:#8198a7;line-height:1.5; }
.site-footer .footer-company-copy .footer-copyright { margin-top:18px;font-size:12px; }
.site-footer .footer-links { display:flex;align-items:center;gap:28px; }
.site-footer .footer-links > a { color:#b7c7d1;font-size:14px;white-space:nowrap; }
.site-footer .footer-links > a span { display:inline-grid;width:22px;height:22px;margin-left:3px;place-items:center;border:1px solid #718896;border-radius:3px;font-size:16px; }
.site-footer .footer-cert { width:116px;height:116px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:8px solid #1261a8;border-radius:50%;background:#fff;color:#0c4b86;box-shadow:inset 0 0 0 2px #dceaf3;text-align:center; }
.site-footer .footer-cert small { font-size:9px;font-weight:800; }
.site-footer .footer-cert b { margin:1px 0;color:#1565a8;font-size:27px;font-style:italic;line-height:1; }
.site-footer .footer-cert em { color:#657987;font-size:9px;font-style:normal;font-weight:800; }
@media(max-width:900px){
  .site-footer .footer-contact-grid { grid-template-columns:repeat(2,1fr); }
  .site-footer .footer-contact-grid > div { padding:16px 28px;border-bottom:1px solid rgba(165,202,222,.16); }
  .site-footer .footer-company { padding:28px 24px; }
}
@media(max-width:620px){
  .site-footer .footer-contact-grid { grid-template-columns:1fr; }
  .site-footer .footer-contact-grid > div { min-height:76px;border-right:0; }
  .site-footer .footer-contact-grid strong { font-size:18px; }
  .site-footer .footer-company { flex-direction:column; }
  .site-footer .footer-links { width:100%;justify-content:space-between; }
  .site-footer .footer-cert { width:94px;height:94px;border-width:6px; }
}


/* Light consultation CTA above the dark footer. */
.cta {
  color:#0b2941!important;
  background:linear-gradient(135deg,#f7fbfd 0%,#eaf6fb 100%)!important;
  border-top:1px solid #dceaf0;
  border-bottom:1px solid #dceaf0;
}
.cta h2 { color:#0b2941!important; }
.cta p { color:#607887!important; }

/* Compact default hero; keep feature detail overlays unchanged. */
.oc-hero-top:not(.has-active) .oc-hero-media{padding:0!important;place-items:center!important}
.oc-hero-top:not(.has-active) .oc-hero-canvas{width:min(calc(100% - 40px),1200px)!important;max-width:1200px!important;height:100%!important;margin:0 auto!important}
@media(max-width:900px){
  .top.oc-hero-top:not(.has-active){height:560px!important;min-height:0!important;max-height:none!important;padding:0!important}
  .oc-hero-top:not(.has-active) .oc-hero-canvas{width:100%!important}
  .oc-hero-top:not(.has-active) .oc-keyword-groupware{top:12%!important;left:50%!important;font-size:clamp(32px,8vw,55px)!important}
  .oc-hero-top:not(.has-active) .oc-keyword-collaboration{top:37%!important;left:6%!important;font-size:clamp(19px,5vw,28px)!important}
  .oc-hero-top:not(.has-active) .oc-keyword-communication{top:62%!important;left:30%!important;font-size:clamp(20px,5vw,29px)!important}
  .oc-hero-top:not(.has-active) .oc-hotspot-approval{left:6%!important;top:26%!important}
  .oc-hero-top:not(.has-active) .oc-hotspot-org{left:65%!important;top:26%!important}
  .oc-hero-top:not(.has-active) .oc-hotspot-portal{left:40%!important;top:47%!important}
  .oc-hero-top:not(.has-active) .oc-hotspot-mail{left:7%!important;top:73%!important}
  .oc-hero-top:not(.has-active) .oc-hotspot-ai{left:72%!important;top:73%!important}
  .oc-hero-top:not(.has-active) .oc-hotspot-mobile{left:43%!important;top:87%!important}
}