/* Noto Sans */
@font-face {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 100 900;
	src: url('/assets/fonts/NotoSans/NotoSansKR-VariableFont_wght.ttf') format('truetype');
}

:root {
   --bg: #081a2b;
   --bg2: #0b2235;
   --panel: #112d40;
   --line: #294556;
   --crimson: #f96666;
   --mint: #4ce3c6;
   --mint2: #13bfa7;
   --text: #f4fbff;
   --muted: #a6bac8;
   --light: #e8f4f4;
   --ink: #102a3b;
   --width: 1200px;
   --header: 78px;
   --fix-tel-bar-H: 50px;

   color-scheme: dark;
   --faq-bg: #09162a;
   --faq-card: #14263e;
   --faq-text: #f0f7ff;
   --faq-muted: #9db5cf;
   --faq-accent: #65c7f5;
   --faq-border: #2a415a
}

* {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: calc(var(--header) + 14px)
}

body {
   margin: 0;
   font-family: 'Noto Sans', system-ui, sans-serif !important;
   background: var(--bg);
   color: var(--text);
   line-height: 1.65;
   word-break: keep-all
}

body.modal-open {
   overflow: hidden
}

a {
   color: inherit;
   text-decoration: none
}

button,
input,
textarea {
   font: inherit
}

button {
   cursor: pointer
}

button:disabled {
   cursor: not-allowed;
   opacity: .6
}

img {
   max-width: 100%
}

.container {
   width: min(var(--width), calc(100% - 48px));
   margin-inline: auto
}

.skip-link {
   position: absolute;
   left: 12px;
   top: -60px;
   background: #fff;
   color: #000;
   padding: 10px;
   z-index: 1000
}

.skip-link:focus {
   top: 10px
}

:focus-visible {
   outline: 3px solid var(--mint);
   outline-offset: 4px
}



/* 
    스크롤 애니메이션 
    - 애니메이션 개별 조정 외에 클래스 추가할 시 main.js에 가서
    animationElements에 추가하는 클래스 넣어주세요. 
*/
.fade-top {opacity: 0; transform: translateY(20%);}
.box-fade-top {opacity: 0; transform: translateY(5%);}
.fade-down {opacity: 0; transform: translateY(-20%);}
.fade-left {opacity: 0; transform: translateX(10%);}
.fade-right {opacity: 0; transform: translateX(-10%);}
.fade-scale-shadow {
   opacity: 0; transform: scale(1.1);
   box-shadow: 0 0 0px 0px #c73d2e;
}

.fade-top.trigger {animation: fade-animate 0.7s 0.2s forwards;}
.box-fade-top.trigger {animation: fade-animate 0.5s 0.2s forwards;}
.fade-down.trigger {animation: fade-animate 0.7s 0.2s forwards;}
.fade-left.trigger {animation: fade-animate 0.7s 0.2s forwards;}
.fade-right.trigger {animation: fade-animate 0.7s 0.2s forwards;}

.fade-scale-shadow.trigger {animation: fade-scale-shadow 0.7s 0.2s forwards;}


@keyframes fade-scale-shadow {
  to {opacity: 1; transform: scale(1); box-shadow: 0 0 0px 10px #c73d2e00;}
}

@keyframes fade-animate {
  to {opacity: 1; transform: translateY(0);}
}

/* 스크롤 애니메이션 end */



.site-header {
   height: var(--header);
   position: sticky;
   top: 0;
   z-index: 40;
   background: rgba(8, 26, 43, .96);
   border-bottom: 1px solid rgba(130, 180, 200, .16);
   backdrop-filter: blur(12px)
}

.header-inner {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px
}

.brand {
   display: flex;
   align-items: center;
   gap: 10px;
}

.brand > a:first-child img {width: 100px; filter: brightness(100);}


.brand .security-logo {
   font-size: 18px;
   letter-spacing: -.055em;
   font-weight: 800;
   white-space: nowrap;
   margin: 0;
}

.brand span {
   color: var(--mint)
}

.main-nav {
   display: flex;
   align-items: center;
   gap: 34px;
   font-size: 14px;
   font-weight: 600
}

.main-nav>a:not(.nav-contact) {
   color: #d7e5eb;
   transition: color .2s
}

.main-nav>a:hover,
.main-nav>a.is-active {
   color: var(--mint)
}

.nav-contact {
   padding: 11px 19px;
   background: var(--light);
   color: #062b30;
   border-radius: 7px;
   transition: all 0.2s;
}

.nav-contact:hover,
.nav-contact.is-active {
   background: var(--mint2) !important;
   color: var(--light) !important;
}

.menu-toggle {
   display: none
}

.hero {
   min-height: 675px;
   position: relative;
   overflow: hidden;
   background: radial-gradient(circle at 80% 45%, #17465a 0%, transparent 38%), linear-gradient(110deg, #081a2b 35%, #0b283b 100%)
}

.hero-glow {
   position: absolute;
   right: -180px;
   top: -200px;
   width: 650px;
   height: 650px;
   border: 1px solid rgba(76, 227, 198, .12);
   border-radius: 50%;
   box-shadow: 0 0 0 100px rgba(76, 227, 198, .02), 0 0 0 200px rgba(76, 227, 198, .018);
   pointer-events: none
}

.hero-grid {
   position: relative;
   display: grid;
   grid-template-columns: minmax(0, 1.55fr) minmax(285px, .65fr);
   gap: 70px;
   align-items: center;
   padding-block: 105px 110px
}

.eyebrow {
   color: var(--mint);
   font-size: 13px;
   letter-spacing: .15em;
   font-weight: 800;
   margin: 0 0 20px
}

.hero h1 {
   font-size: clamp(36px, 4.5vw, 50px);
   letter-spacing: -.07em;
   line-height: 1.3;
   margin: 0 0 30px;
   font-weight: 800
}

.hero h1 em {
   color: var(--mint);
   font-style: normal
}

.hero-description {
   font-size: 17px;
   color: #c0d3df;
   line-height: 1.95;
   margin: 0 0 35px
}

.hero-grid .btn_box {
   display: flex;
   align-items: center;
   gap: 10px;
}

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 28px;
   min-height: 52px;
   padding: 13px 24px;
   border: 0;
   border-radius: 7px;
   font-weight: 800;
   transition: transform .2s, background .2s
}

.btn:hover {
   transform: translateY(-2px)
}

.btn-primary {
   background: var(--light);
   color: #07302e
}

.btn-primary:hover {
   background: #72efd8
}

.hero-footnote {
   font-size: 13px;
   color: #90adbd;
   margin-top: 20px
}

.hero-panel {
   background: linear-gradient(160deg, #123c4e, #0e2b40);
   border: 1px solid #2e6571;
   border-radius: 18px;
   padding: 38px 32px;
   position: relative;
   overflow: hidden;
   box-shadow: 0 25px 75px rgba(0, 0, 0, .23);
   /* 2026-10-27: 테두리 물결이 바깥으로 퍼지며 사라지는 효과 반복 */
   animation: shadow-wave 1.8s infinite linear;
}

.hero-panel.fade-left.trigger {
   animation: fade-animate 1s .2s forwards, shadow-wave 1s infinite linear;
}

@keyframes shadow-wave {
   from {
      box-shadow:
         0 25px 75px rgba(0, 0, 0, .23),
         0 0 0 0 rgba(76, 227, 198, .55),
         0 0 0 14px rgba(76, 227, 198, .22),
         0 0 0 28px rgba(76, 227, 198, 0);
   }
   to {
      box-shadow:
         0 25px 75px rgba(0, 0, 0, .23),
         0 0 0 14px rgba(76, 227, 198, .22),
         0 0 0 28px rgba(76, 227, 198, 0),
         0 0 0 42px rgba(76, 227, 198, 0);
   }
}

@media (prefers-reduced-motion: reduce) {
   .hero-panel {
      animation: none;
   }

   .hero-panel.fade-left.trigger {
      animation: fade-animate .01ms forwards;
   }
}

.panel-eyebrow {
   font-size: 12px;
   letter-spacing: .17em;
   color: var(--mint);
   font-weight: 800
}

.hero-panel > a {
   font-size: 26px;
   line-height: 1.5;
   margin: 18px 0 27px;
   font-weight: bold;
   letter-spacing: -.04em;
   display: inline-block;
   transition: all 0.3s;
}

.hero-panel > a:hover {
   color: var(--crimson);
}

.hero-panel ul {
   list-style: none;
   padding: 0;
   margin: 0;
   position: relative;
   z-index: 1
}

.hero-panel li {
   padding: 13px 0;
   border-top: 1px solid #2b5260;
   font-size: 14px
}

.hero-panel li:before {
   content: '✓';
   color: var(--mint);
   font-weight: 800;
   margin-right: 12px
}

.panel-orb {
   position: absolute;
   width: 190px;
   height: 190px;
   border-radius: 50%;
   background: rgba(76, 227, 198, .05);
   right: -110px;
   bottom: -95px
}

/* .trust-band {
   background: #0e3041;
   border-top: 1px solid #1b4656;
   border-bottom: 1px solid #1b4656;
   padding: 33px 0 17px
}

.trust-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 18px
}

.trust-grid>div {
   border-right: 1px solid #2c5260;
   padding: 8px 30px
}

.trust-grid>div:last-child {
   border: 0
}

.trust-grid strong {
   display: block;
   color: var(--mint);
   font-size: 38px;
   line-height: 1.2;
   letter-spacing: -.05em
}

.trust-grid span {
   font-size: 14px;
   color: #c9dbe2
}

.trust-note {
   color: #9ab5be;
   text-align: center;
   font-size: 11px;
   margin: 14px 0 0
} */

.section {
   padding: 105px 0
}

.section-dark {
   background: #202f3d;
}

.section-deeper {
   background: #0c2234
}

.section-title {
   font-size: clamp(29px, 3.3vw, 44px);
   letter-spacing: -.055em;
   line-height: 1.45;
   margin: 0 0 18px
}

.section-lead {
   font-size: 16px;
   color: var(--muted);
   margin: 0 0 44px;
   max-width: 1050px
}

.risk-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px
}

.risk-card {
   min-height: 230px;
   background: #112e42;
   border: 1px solid #27485b;
   border-radius: 15px;
   padding: 34px 28px
}

.card-index {
   display: block;
   color: var(--mint);
   font-size: 23px;
   font-weight: 800;
   margin-bottom: 28px
}

.risk-card h3 {
   font-size: 22px;
   margin: 0 0 10px
}

.risk-card p,
.service-grid p,
.consult-grid p {
   font-size: 14px;
   color: #b6c8d4;
   margin: 0;
   line-height: 1.85
}

#main > section {
   overflow: hidden;
}


/* 2026-10-27: 위험 안내 영역을 밝은 배경과 흰색 카드로 구성하고 애니메이션 유지 */
.section.risk {
   padding: 58px 0 110px;
   background: #f2f7f8;
   color: #081925;
}

.risk .risk-container {
   width: min(1200px, calc(100% - 48px));
   margin-inline: auto;
}

.risk .eyebrow {
   margin: 0 0 16px;
   color: #00d9bd;
   font-size: 16px;
   font-weight: 600;
   line-height: 1.5;
   letter-spacing: 0;
}

.risk .section-title {
   margin: 0 0 12px;
   color: #081925;
   font-size: 36px;
   font-weight: 700;
   line-height: 1.4;
   letter-spacing: -.04em;
}

.risk .section-lead {
   margin: 0 0 44px;
   color: #657e95;
   font-size: 18px;
   line-height: 1.5;
}

.risk .risk-grid {
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 28px;
}

.risk .risk-card {
   min-height: 240px;
   padding: 27px 26px;
   background: #fff;
   border: 0;
   border-radius: 16px;
}

.risk .card-index {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 56px;
   height: 56px;
   margin-bottom: 18px;
   border-radius: 12px;
   background: #13323f;
   color: #00d9bd;
   font-size: 20px;
   font-weight: 700;
   line-height: 1;
}

.risk .risk-card h3 {
   margin: 0 0 16px;
   color: #081925;
   font-size: 24px;
   font-weight: 700;
   line-height: 1.5;
   letter-spacing: -.04em;
}

.risk .risk-card p {
   max-width: 240px;
   margin: 0;
   color: #657e95;
   font-size: 16px;
   line-height: 1.25;
}

@media (max-width: 1000px) {
   .risk .risk-grid {
      gap: 20px;
   }

   .risk .risk-card {
      padding: 26px 22px;
   }
}

@media (max-width: 760px) {
   .section.risk {
      padding: 60px 0;
   }

   .risk .risk-container {
      width: calc(100% - 36px);
   }

   .risk .section-title {
      font-size: clamp(27px, 5vw, 36px);
   }

   .risk .section-lead {
      margin-bottom: 32px;
      font-size: 16px;
   }

   .risk .risk-grid {
      grid-template-columns: 1fr;
   }

   .risk .risk-card {
      min-height: 220px;
      padding: 26px;
   }

   .risk .risk-card p {
      max-width: none;
      line-height: 1.5;
   }
}


/* 2026-10-27: 보안 권고 영역의 색상만 진행 절차 영역과 같은 다크 톤으로 변경 */
.advisory {
   background: var(--bg);
   color: var(--text);
}

.advisory .eyebrow {
   color: var(--mint)
}

.advisory .section-lead {
   color: var(--muted)
}

.alert-strip {
   background: #c73e2e;
   color: #ffebe7;
   padding: 15px 22px;
   border-radius: 10px;
   font-weight: 800;
   margin-bottom: 30px
}

.alert-dot {
   display: inline-block;
   width: 9px;
   height: 9px;
   background: #d55b49;
   border-radius: 50%;
   margin-right: 9px
}

.alert-divider {
   padding-inline: 8px;
   color: #d7a7a0
}

.cve-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
   margin-bottom: 36px
}

.cve-card {
   background: #fff;
   border-radius: 14px;
   padding: 25px 28px;
   border-left: 5px solid #0eab9c;
   box-shadow: 0 6px 25px rgba(12, 54, 75, .05)
}

.cve-code {
   color: #0b7774;
   font-weight: 800;
   font-size: 15px;
   margin: 0 0 10px
}

.cve-code span {
   font-size: 12px;
   margin-left: 8px;
   background: #e4f7f4;
   padding: 4px 7px;
   border-radius: 5px
}

.cve-card h3 {
   font-size: 19px;
   margin: 0 0 12px
}

.cve-card>p:last-child {
   color: #597181;
   font-size: 14px;
   margin: 0
}

.versions-title {
   font-size: 23px;
   margin: 0 0 16px
}

.version-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
   margin-bottom: 20px
}

.version-grid>div {
   background: #fff;
   border-radius: 10px;
   padding: 20px
}

.version-grid span {
   display: block;
   font-size: 14px;
   font-weight: 700
}

.version-grid strong {
   display: block;
   color: #087e78;
   font-size: 21px;
   margin-top: 4px
}

.advisory-note {
   font-size: 14px;
   color: #536b7b;
   margin: 8px 0
}

.source-note {
   font-size: 12px;
   color: #6d8694;
   margin-top: 24px
}

/* 2026-10-27: 다크 배경에 맞춰 카드와 안내 텍스트 색상 조정 */
.advisory .section-title,
.advisory .versions-title,
.advisory .cve-card h3,
.advisory .version-grid span {
   color: var(--text);
}

.advisory .cve-card,
.advisory .version-grid > div {
   background-color: #123046;
}

.advisory .cve-card {
   border-left-color: var(--mint);
}

.advisory .cve-code,
.advisory .version-grid strong {
   color: var(--mint);
}

.advisory .cve-code span {
   background-color: #294c5f;
}

.advisory .cve-card > p:last-child {
   color: #b6c8d4;
}

.advisory .advisory-note,
.advisory .source-note {
   color: var(--muted);
}

/* 2026-10-27: 상담 대상 영역만 이미지 기준으로 변경하고 텍스트와 애니메이션 유지 */
.section.consultation-section {
   padding: 54px 0 90px;
   background: #f2f7f8;
   color: #081925;
}

.consultation-section > .container {
   width: min(1200px, calc(100% - 48px));
   margin-inline: auto;
}

.consultation-section .eyebrow {
   margin: 0 0 14px;
   color: #00d9bd;
   font-size: 16px;
   font-weight: 600;
   line-height: 1.5;
   letter-spacing: 0;
}

.consultation-section .section-title {
   margin: 0;
   color: #081925;
   font-size: 36px;
   font-weight: 700;
   line-height: 1.4;
   letter-spacing: -.04em;
}

.consultation-section .consult-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 24px 20px;
   margin-top: 32px;
}

.consultation-section .consult-grid article {
   position: relative;
   min-height: 130px;
   padding: 18px 28px 24px 45px;
   background: #fff;
   border: 0;
   border-radius: 14px;
}

.consultation-section .consult-grid article::before {
   content: '';
   position: absolute;
   top: 27px;
   bottom: 27px;
   left: 18px;
   width: 7px;
   border-radius: 4px;
   background: #20d9bd;
}

.consultation-section .consult-grid article > span {
   display: none;
}

.consultation-section .consult-grid h3 {
   margin: 0 0 12px;
   color: #081925;
   font-size: 22px;
   font-weight: 700;
   line-height: 1.5;
   letter-spacing: -.03em;
}

.consultation-section .consult-grid p {
   margin: 0;
   color: #657e95;
   font-size: 16px;
   line-height: 1.5;
}

@media (max-width: 760px) {
   .section.consultation-section {
      padding: 60px 0;
   }

   .consultation-section > .container {
      width: calc(100% - 36px);
   }

   .consultation-section .section-title {
      font-size: clamp(27px, 5vw, 36px);
   }

   .consultation-section .consult-grid {
      grid-template-columns: 1fr;
      gap: 20px;
      margin-top: 28px;
   }

   .consultation-section .consult-grid article {
      padding: 22px 22px 24px 45px;
   }

   .consultation-section .consult-grid h3 {
      font-size: 20px;
   }
}

/* 2026-10-27: 대응 서비스 영역만 이미지 기준의 4열 카드로 변경 */
.section.services-section {
   padding: 58px 0 76px;
   background: #fff;
   color: #081925;
}

.services-section > .container {
   width: min(1200px, calc(100% - 48px));
   margin-inline: auto;
}

.services-section .eyebrow {
   margin: 0 0 16px;
   color: #00d9bd;
   font-size: 16px;
   font-weight: 600;
   line-height: 1.5;
   letter-spacing: 0;
}

.services-section .section-title {
   margin: 0;
   color: #081925;
   font-size: 36px;
   font-weight: 700;
   line-height: 1.4;
   letter-spacing: -.04em;
}

.services-section .service-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 24px;
   margin-top: 44px;
}

.services-section .service-grid article {
   min-height: 276px;
   padding: 24px 23px;
   background: #081e2b;
   border: 0;
   border-radius: 16px;
   border: 1px solid #294c5f;
}

.services-section .service-grid article > span {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 58px;
   height: 58px;
   border-radius: 15px;
   background: #173f50;
   color: #20d9bd;
   font-size: 20px;
   font-weight: 700;
   line-height: 1;
}

.services-section .service-grid h3 {
   margin: 22px 0 24px;
   color: #f4fbff;
   font-size: 22px;
   font-weight: 700;
   line-height: 1.5;
   letter-spacing: -.04em;
}

.services-section .service-grid p {
   max-width: 220px;
   margin: 0;
   color: #b6c8d4;
   font-size: 14px;
   line-height: 1.3;
}

@media (max-width: 1000px) {
   .services-section .service-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (max-width: 760px) {
   .section.services-section {
      padding: 60px 0;
   }

   .services-section > .container {
      width: calc(100% - 36px);
   }

   .services-section .section-title {
      font-size: clamp(27px, 5vw, 36px);
   }

   .services-section .service-grid {
      gap: 20px;
      margin-top: 32px;
   }

   .services-section .service-grid h3 {
      font-size: 20px;
   }
}

@media (max-width: 480px) {
   .services-section .service-grid {
      grid-template-columns: 1fr;
   }

   .services-section .service-grid article {
      min-height: 240px;
   }

   .services-section .service-grid p {
      max-width: none;
      line-height: 1.5;
   }
}

.process-section {
   padding-bottom: 120px;
   background: var(--light);
}

.process-section .eyebrow {
   margin: 0 0 16px;
   color: #00d9bd;
   font-size: 16px;
   font-weight: 600;
   line-height: 1.5;
   letter-spacing: 0;
}

.process-section .section-title {
   color: #081925;
}

.process-grid {
   list-style: none;
   padding: 0;
   margin: 45px 0 0;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 18px
}

.process-grid li {
   position: relative;
   background: #123046;
   border: 1px solid #294c5f;
   border-radius: 12px;
   padding: 28px 22px;
   min-height: 155px
}

.process-grid li:not(:last-child):after {
   content: '→';
   position: absolute;
   right: -17px;
   top: 43%;
   z-index: 2;
   /* color: var(--mint); */
   color: #5d97a5;
   font-size: 22px;
   font-weight: 600;
}

.process-grid span {
   display: block;
   color: var(--mint);
   font-size: 27px;
   font-weight: 800;
   margin-bottom: 18px
}

.process-grid strong {
   font-size: 17px
}


.security-faq {
    padding: 100px 0;
    background: var(--faq-bg)
}

/* .faq-container {
    width: min(100%, 1160px);
    margin: 0 auto
} */

.faq-eyebrow {
    font-size: 14px;
    letter-spacing: .13em;
    font-weight: 700;
    color: var(--faq-accent);
    margin: 0 0 22px
}

.security-faq h2 {
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.25;
    letter-spacing: -.04em;
    margin: 0 0 16px
}

.faq-intro {
    font-size: 17px;
    color: var(--faq-muted);
    line-height: 1.7;
    margin: 0 0 46px
}

.faq-list {
    display: grid;
    gap: 12px
}

.faq-item {
    border: 1px solid var(--faq-border);
    border-radius: 12px;
    background: var(--faq-card);
    overflow: hidden
}

.faq-item summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 78px;
    padding: 22px 26px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5
}

.faq-item summary::-webkit-details-marker {
    display: none
}

.faq-item summary:focus-visible {
    outline: 3px solid var(--faq-accent);
    outline-offset: -4px
}

.faq-item[open] {
    border-color: #47728e
}

.faq-icon {
    width: 22px;
    height: 22px;
    flex: none;
    position: relative
}

.faq-icon:before,
.faq-icon:after {
    content: "";
    position: absolute;
    background: var(--faq-accent);
    border-radius: 2px;
    top: 10px;
    left: 3px;
    width: 16px;
    height: 2px
}

.faq-icon:after {
    transform: rotate(90deg);
    transition: transform .2s
}

.faq-item[open] .faq-icon:after {
    transform: rotate(0)
}

.faq-answer {
    padding: 0 26px 26px;
    color: var(--faq-muted);
    font-size: 16px;
    line-height: 1.85
}

.faq-answer p {
    border-top: 1px solid var(--faq-border);
    padding-top: 18px;
    margin: 0
}

@media(max-width:768px) {
    .security-faq {
        padding: 72px 0;
    }

    .faq-intro {
        font-size: 15px;
        margin-bottom: 30px
    }

    .faq-item summary {
        padding: 20px;
        min-height: 70px;
        font-size: 16px
    }

    .faq-answer {
        padding: 0 20px 22px;
        font-size: 14px
    }
}

@media(max-width:480px) {
    .security-faq {
        padding: 60px 0;
    }

    .faq-eyebrow {
        font-size: 11px;
        letter-spacing: .09em
    }

    .faq-item summary {
        font-size: 15px;
        gap: 12px;
        padding: 18px 16px
    }

    .faq-answer {
        padding: 0 16px 18px
    }

    .faq-icon {
        width: 18px;
        height: 18px
    }

    .faq-icon:before,
    .faq-icon:after {
        left: 2px;
        top: 8px;
        width: 14px
    }
}




.contact-section {
   background: #0e293c
}

.contact-form {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 24px 28px
}

.field label {
   display: block;
   font-weight: 700;
   margin-bottom: 10px;
   font-size: 15px
}

.field label b {
   color: var(--mint)
}

/* 2026-10-27: 상담 유형 선택 메뉴에 기존 입력란과 같은 스타일 적용 */
.field input,
.field select,
.field textarea {
   display: block;
   width: 100%;
   background: #092134;
   border: 1px solid #3c586b;
   color: #fff;
   border-radius: 7px;
   padding: 16px 17px;
   outline: none;
   transition: border-color .2s
}

/* 2026-10-27: 실제 select 목록이 열릴 때 화살표가 회전하도록 별도 장식 요소로 분리 */
#contact-form .consultation-select {
   position: relative;
}

#contact-form #contact-project {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   padding-right: 52px;
   background-image: none;
}

#contact-form .consultation-select-arrow {
   position: absolute;
   top: 50%;
   right: 18px;
   width: 16px;
   height: 16px;
   margin-top: -8px;
   pointer-events: none;
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='%234ce3c6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
   transform: rotate(0deg);
   transition: transform .2s ease;
}

#contact-form #contact-project:open + .consultation-select-arrow {
   transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
   #contact-form .consultation-select-arrow {
      transition: none;
   }
}

#contact-form .submit-row .btn-primary {
   width: 100%;
   max-width: 500px;
   margin: 0 auto;
   border: 1px solid transparent;
   gap: 10px;
}

#contact-form .submit-row .btn-primary:hover,
#contact-form .submit-row .btn-primary:focus {
   background: rgba(8, 26, 43, .96);
   color: var(--light);
   border-color: var(--mint);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
   border-color: var(--mint);
   box-shadow: 0 0 0 2px rgba(76, 227, 198, .12)
}

.field input::placeholder,
.field textarea::placeholder {
   color: #829dac
}

.field textarea {
   resize: vertical;
   min-height: 145px
}

.field-wide {
   grid-column: 1/-1
}

.consent-row,
.submit-row {
   grid-column: 1/-1;
   display: flex;
   align-items: center;
   gap: 20px;
   flex-wrap: wrap
}

.consent-row {
   justify-content: space-between;
   margin-top: 4px
}

.check-label {
   display: inline-flex;
   gap: 11px;
   align-items: center;
   cursor: pointer;
   font-size: 14px
}

.check-label input {
   width: 18px;
   height: 18px;
   accent-color: var(--mint)
}

.text-link,
.site-footer button {
   background: none;
   border: 0;
   color: #257364;
   text-decoration: underline;
   text-underline-offset: 4px;
   padding: 4px;
   transition: color 0.2s;
}

.text-link:hover,
.text-link:focus,
.site-footer button:hover,
.site-footer button:focus {
   color: var(--mint);
}

.submit-row {
   margin-top: 5px
}

.demo-note {
   font-size: 12px;
   color: #a9c4ce
}


.site-footer {
   background: #071827;
   border-top: 1px solid #294355;
   padding: 45px 0;
   /* margin-bottom: var(--fix-tel-bar-H); */
}

.footer-inner {
   display: flex;
   gap: 10px;
   flex-direction: column;
}

.site-footer .brand {
   margin-bottom: 10px;
}

.site-footer .brand > a:first-child {
   filter: grayscale(1) brightness(0.5);
}

.footer-inner p {
   color: #95adba;
   font-size: 13px;
   margin: 0;
}

.site-footer nav {
   display: flex;
   flex-wrap: wrap;
   gap: 15px 24px;
   font-size: 13px;
   color: #c5d4df;
   justify-content: space-between;
}

.footer-inner nav .meta-wrap {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   width: 100%;
   max-width: 650px;
}

.site-footer nav a:hover {
   text-decoration: underline;
}

.site-footer button {
   font-size: 13px;
   padding: 0;
}

.floating-actions {
   position: fixed;
   right: 22px;
   bottom: 26px;
   display: grid;
   gap: 10px;
   z-index: 35
}

.floating-actions a,
.floating-actions button {
   border: 1px solid #438c90;
   border-radius: 10px;
   background: #0f3c4b;
   color: #fff;
   min-width: 58px;
   height: 56px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   font-weight: 800;
   box-shadow: 0 6px 22px rgba(0, 0, 0, .2)
}

.floating-actions button {
   background: var(--mint);
   color: #062b30;
   border-color: var(--mint);
   font-size: 22px
}

.floating-actions button span {
   font-size: 10px;
   line-height: 1
}


/* top 버튼 */
.back-to-top {
   opacity: 0;
   pointer-events: none;
   transform: translateY(10px);
   transition: opacity .2s, transform .2s
}

.back-to-top.is-visible {
   opacity: 1;
   pointer-events: auto;
   transform: none
}


/* 빠른상담 전화바 */
.fix-tel-bar {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   height: var(--fix-tel-bar-H);
   background: var(--panel);
   z-index: 34;
   box-shadow: rgba(76, 227, 198, 0.12) 0px 0px 0px 2px;
   border-top: 1px solid var(--mint);
}

.fix-tel-bar .container {
   display: flex;
   align-items: center;
   gap: 10px;
   height: 100%;
}

.fix-tel-bar .container a b {display: none;}

@media (max-width: 768px) {
   .fix-tel-bar .container a b {display: inline-block;}

   .fix-tel-bar .container a span {display: none;}
}


/* 모달 레이어 */
.modal-layer[hidden] {
   display: none
}

.modal-layer {
   position: fixed;
   inset: 0;
   z-index: 100;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px
}

.modal-backdrop {
   position: absolute;
   inset: 0;
   background: rgba(0, 10, 19, .76)
}

.modal-dialog {
   position: relative;
   width: min(520px, 100%);
   max-height: min(85vh, 800px);
   display: flex;
   flex-direction: column;
   background: #fff;
   color: #142d3b;
   border-radius: 15px;
   box-shadow: 0 24px 80px rgba(0, 0, 0, .4)
}

.modal-header {
   padding: 22px 26px;
   border-bottom: 1px solid #e4edf1;
   display: flex;
   align-items: center;
   justify-content: space-between
}

.modal-header h2 {
   font-size: 21px;
   margin: 0
}

.modal-close {
   background: none;
   border: 0;
   font-size: 30px;
   line-height: 1;
   color: #395565
}

.modal-body {
   padding: 25px 26px;
   overflow: auto;
   font-size: 15px;
   color: #415867
}

.modal-body p {
   margin: 0 0 13px
}

.modal-actions {
   display: flex;
   justify-content: flex-end;
   padding: 18px 26px;
   border-top: 1px solid #e4edf1
}

.policy-content h3 {
   font-size: 15px;
   color: #142d3b;
   margin: 22px 0 7px
}

.policy-content h3:first-child {
   margin-top: 0
}

@media(max-width:1000px) {
   .main-nav {
      gap: 17px;
      font-size: 13px
   }

   .hero-grid {
      gap: 30px
   }

   .hero h1 {
      font-size: 45px
   }

   .service-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .footer-inner {
      align-items: flex-start;
      flex-direction: column
   }
}

@media(max-width:760px) {
   :root {
      --header: 68px
   }

   .container {
      width: min(100% - 36px, var(--width))
   }


   .menu-toggle {
      display: flex;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: 0;
      padding: 12px
   }

   .menu-toggle span {
      display: block;
      width: 23px;
      height: 2px;
      background: #fff
   }

   .main-nav {
      display: none;
      position: absolute;
      left: 0;
      right: 0;
      top: var(--header);
      background: #0b2235;
      border-bottom: 1px solid #355668;
      padding: 15px 18px 22px;
      flex-direction: column;
      align-items: stretch;
      gap: 0
   }

   .main-nav.is-open {
      display: flex
   }

   .main-nav>a {
      padding: 13px 12px
   }

   .nav-contact {
      text-align: center;
      margin-top: 8px
   }

   .hero {
      min-height: unset
   }

   .hero-grid {
      grid-template-columns: 1fr;
      padding-block: 75px 80px;
      gap: 38px
   }

   .hero h1 {
      font-size: clamp(33px, 7.5vw, 48px)
   }

   .hero-description {
      font-size: 15px
   }

   .hero-panel {
      max-width: 100%;
   }

   /* .trust-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 15px
   }

   .trust-grid>div {
      padding: 8px 12px
   }

   .trust-grid>div:nth-child(2) {
      border: 0
   }

   .trust-grid strong {
      font-size: 32px
   } */

   .section {
      padding: 75px 0
   }

   .section-title {
      font-size: 30px
   }

   .risk-grid,
   .cve-grid,
   .consult-grid {
      grid-template-columns: 1fr
   }

   .risk-card {
      min-height: 190px
   }

   .version-grid,
   .process-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .service-grid h3 {
      margin: 10px 0 12px;
   }

   .process-grid li:nth-child(2):after {
      display: none
   }

   .contact-form {
      grid-template-columns: 1fr
   }

   .field-wide,
   .consent-row,
   .submit-row {
      grid-column: auto
   }

   .footer-inner {
      gap: 18px
   }

   .floating-actions {
      right: 13px;
      bottom: 16px
   }
}

@media (max-width: 525px) {
   .hero-grid .btn_box {
      flex-direction: column;
   }

   .hero-grid .btn_box .btn {width: 100%;}
}

@media(max-width:480px) {

   .brand {
      gap: 10px;
   }

   .brand h1 {
      font-size: 16px;
   }

   .hero h1 {
      font-size: 34px
   }

   .hero-grid {
      padding-top: 55px
   }

   .hero-panel {
      padding: 28px 24px
   }

   /* .trust-grid strong {
      font-size: 29px
   } */

   .section-title {
      font-size: 27px
   }

   .service-grid,
   .version-grid {
      grid-template-columns: 1fr
   }

   .service-grid article {
      min-height: unset
   }

   .consult-grid article {
      padding: 27px 22px 27px 56px
   }

   .consult-grid article>span {
      left: 20px;
      top: 30px
   }

   .process-grid {
      gap: 12px
   }

   .process-grid li {
      padding: 20px 14px;
      min-height: 135px
   }

   .process-grid strong {
      font-size: 14px
   }

   .process-grid li:after {
      display: none
   }

   .consent-row {
      align-items: flex-start;
      flex-direction: column
   }

   .modal-header,
   .modal-body,
   .modal-actions {
      padding-inline: 19px
   }
}

@media(prefers-reduced-motion:reduce) {
   html {
      scroll-behavior: auto
   }

   *,
   *:before,
   *:after {
      animation-duration: .01ms !important;
      transition-duration: .01ms !important
   }
}