/* ============ base & layout ============ */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  font-family: var(--ff);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--c-ink);
  background: linear-gradient(180deg, #fcfcfd 0%, #f6f6f9 25%, #fcfcfd 50%, #f4f4f7 75%, #fcfcfd 100%);
}
h1, h2, p { margin: 0; font-weight: 400; }
h1, h2, h3, p, .t-regular, .footer-link-text { word-break: keep-all; } /* 한글 단어 단위 줄바꿈 */
a { text-decoration: none; color: inherit; }
img { display: inline-block; max-width: 100%; vertical-align: middle; }
video { display: block; max-width: 100%; }

.container::before, .container::after { content: ""; display: table; } /* margin collapse 방지(webflow 동작) */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
}
.section {
  position: relative;
  z-index: 2;
  background-color: transparent;
  padding-left: var(--section-pad-x);
  padding-right: var(--section-pad-x);
  overflow: clip;
}

/* utilities */
.caps { text-transform: uppercase; }
.w500 { font-weight: 500; }
.w700 { font-weight: 700; }
.oh { overflow: hidden; }
.opacity-60 { opacity: .6; }

.t-tiny { font-size: var(--fs-tiny); line-height: var(--lh-tiny); letter-spacing: var(--ls-tiny); }
.t-small { font-size: var(--fs-small); line-height: 1; }
.t-small.lh-140 { line-height: 1.4; }
.t-regular { font-size: var(--fs-regular); line-height: var(--lh-regular); }
.t-medium { font-size: var(--fs-medium); line-height: var(--lh-medium); }
.t-display { font-size: var(--fs-display); line-height: var(--lh-display); }
.t-xhuge { font-size: var(--fs-xhuge); line-height: var(--lh-xhuge); }
.heading-2 { font-size: var(--fs-h2); line-height: 1; font-weight: 700; }

/* tag (hero/parallax 공용) */
.tag {
  margin-bottom: var(--tag-mb);
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 11px 16px;
  border-radius: var(--r-tag);
  background-color: var(--c-tag-bg-light);
}
.tag.secondary { background-color: var(--c-tag-bg-dark); justify-content: center; }
.elipse { width: 5px; height: 5px; border-radius: 50%; background-color: var(--c-lime); }
.elipse.blue { background-color: var(--c-blue); }

/* sticky hero 구조 */
.sticky-section-wrapper { position: relative; }
.sticky-component { position: sticky; top: 0; }
.hero-static-component { position: relative; top: auto; }

/* ============ responsive (원본 webflow breakpoints) ============ */
@media screen and (max-width: 991px) {
  body { font-size: 1rem; }
  .container { max-width: 95vw; }
  .section { padding-left: 1em; padding-right: 1em; }
  .heading-2 { font-size: 2.5rem; }
  .t-display { font-size: 2.5rem; }
}
@media screen and (max-width: 767px) {
  .container { max-width: 90vw; }
  .heading-2 { font-size: 2.375rem; }
}
@media screen and (max-width: 479px) {
  .container { max-width: 90vw; }
  .heading-2 { font-size: 2.25rem; }
  .t-display { font-size: 10vw; }
  .section { overflow: clip; }
}

/* ============ Custom Cursor ============ */
@media screen and (min-width: 992px) {
  body {
    cursor: none;
  }
  a, button, [role="button"], details, summary, .swiper-slide, .works-nav-prev, .works-nav-next, .price-cta, .pricing-kakao, .works-more-btn, .services-more-btn, .services-header-btn {
    cursor: none !important;
  }
  
  .custom-cursor-dot {
    width: 10px;
    height: 10px;
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9999;
    transition: width 0.2s, height 0.2s, background-color 0.2s;
  }
  .custom-cursor-dot::before {
    content: "";
    position: absolute;
    top: 4px; left: 0;
    width: 10px; height: 2px;
    background-color: var(--c-ink);
    transition: background-color 0.2s;
  }
  .custom-cursor-dot::after {
    content: "";
    position: absolute;
    top: 0; left: 4px;
    width: 2px; height: 10px;
    background-color: var(--c-ink);
    transition: background-color 0.2s;
  }
  
  .custom-cursor-circle {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(44, 45, 47, 0.5);
    border-radius: 6px;
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9998;
    animation: cursorRotate 10s linear infinite;
    transition: transform 0.08s ease-out, width 0.3s, height 0.3s, background-color 0.3s, border-color 0.3s, border-radius 0.3s;
  }
  
  body.cursor-hover .custom-cursor-dot::before,
  body.cursor-hover .custom-cursor-dot::after {
    display: none;
  }
  
  body.cursor-hover .custom-cursor-dot {
    width: 4px;
    height: 4px;
    background-color: var(--c-white);
    border-radius: 50%;
  }
  
  body.cursor-hover .custom-cursor-circle {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.95);
    border-color: transparent;
    mix-blend-mode: difference;
    animation: cursorRotateFast 1.5s linear infinite;
  }
}

@keyframes cursorRotate {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes cursorRotateFast {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@media screen and (max-width: 991px) {
  .custom-cursor-dot, .custom-cursor-circle {
    display: none !important;
  }
}