/* ✅ 올바른 방식 (해당 계층에 포함됨) */
@import url('./global.css') layer(global);
@import url('./components.css') layer(components);

@layer base, global, typography, components;

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

html {
  scrollbar-gutter: stable;
}

body.scroll-lock,
body:has(dialog[open]),
body:has(.navigation-mobile[data-state='open']) {
  overflow: hidden;
  overscroll-behavior: contain;
  position: relative;
}

body {
  word-break: keep-all;
}

mark {
  font-weight: 600;
}

:root {
  --sticky-scale-reduction: 0.25;
}

@media screen and (min-width: 1025px) {
  :root {
    --sticky-scale-reduction: 0.46;
  }
}

@media screen and (max-width: 1025px) {
  body.scroll-lock-only-mobile {
    overflow: hidden;
    overscroll-behavior: contain;
    position: relative !important;
  }
}

.header {
  max-width: 1740px;
  margin-left: auto;
  margin-right: auto;
}

.hover-gradient {
  position: relative;
}

.hover-gradient::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background-image: linear-gradient(135deg, #ff761f 0%, #0b34ff 100%);
  filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.header .logo {
  width: 167px;
}


.tab-item {
  padding-bottom: 12px;
  border-bottom-width: 2px;
}

[data-js-selector="slick-customer-case"] .slick-track {
  margin: 0;
}

/*에디터 따옴표*/
.post-content .se2_quote2 {
  margin: 0 0 30px 13px;
  padding: 0 8px 0 16px;
  background: url("/resources/img/ict/kr/icon/bg_quote2.gif") 0 3px no-repeat !important;
  color: #888
}

@media screen and (min-width: 1025px) {
  .hover-gradient:hover::before {
    opacity: 1;
  }

  .hover-gradient::before {
    filter: blur(12px);
  }

  .tab-item {
    padding-bottom: 24px;
    border-bottom-width: 4px;
  }
}

@media screen and (min-width: 1200px) {
  .header .logo {
    width: 215px;
  }
}

.bg-image-01 {
  background-image: url('/resources/img/ict/kr/body_bg_mo.png');
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% 337px;
}

@media screen and (min-width: 1025px) {
  .bg-image-01 {
    background-image: url('/resources/img/ict/kr/body_bg.png');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% 480px;
  }
}


.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.animation-illuminate {
  /* 무작위 지연과 천천히 x, y, 회전으로 크게 waving effect */
  animation: illuminate-wave 60s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  animation-delay: calc(1s * var(--random-delay, 0));
}

@keyframes illuminate-wave {
  0% {
    opacity: 0.6;
    transform: translate(0%, 0%) rotate(0deg) scale(1.5);
  }
  18% {
    opacity: 0.82;
    transform: translate(12%, -13%) rotate(-2deg) scale(1.5);
  }
  32% {
    opacity: 1;
    transform: translate(-15%, 10%) rotate(3deg) scale(1.5);
  }
  50% {
    opacity: 0.75;
    transform: translate(20%, 18%) rotate(-3deg) scale(1.5);
  }
  68% {
    opacity: 1;
    transform: translate(-13%, -18%) rotate(5deg) scale(1.5);
  }
  82% {
    opacity: 0.85;
    transform: translate(11%, 13%) rotate(-2deg) scale(1.5);
  }
  100% {
    opacity: 0.6;
    transform: translate(0%, 0%) rotate(0deg) scale(1.5);
  }
}