/* ==========================================================================
   Reset & Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}
ul, ol { list-style: none; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, textarea { border: none; outline: none; background: none; width: 100%; }

html, body {
  width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-family);
  color: var(--color-black);
  background: var(--color-bluegrey-100);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* Two-segment fluid padding: exact 16px@375 / 40px@768 / 180px@1440 */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + (var(--container-pad-pc) * 2));
  margin: 0 auto;
  padding-left: clamp(40px, calc(40px + (180 - 40) * ((100vw - 768px) / (1440 - 768))), var(--container-pad-pc));
  padding-right: clamp(40px, calc(40px + (180 - 40) * ((100vw - 768px) / (1440 - 768))), var(--container-pad-pc));
}
@media (max-width: 767px) {
  .container {
    padding-left: clamp(16px, calc(16px + (40 - 16) * ((100vw - 375px) / (768 - 375))), 40px);
    padding-right: clamp(16px, calc(16px + (40 - 16) * ((100vw - 375px) / (768 - 375))), 40px);
  }
}

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

section { position: relative; }

/* ==========================================================================
   Scroll reveal — repeated main section titles animate up-in on scroll
   (적용: 각 섹션의 반복 메인 타이틀 = .section-title)
   ========================================================================== */
.section-title {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.section-title.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .section-title { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Horizontal "peek" scroll rows (tablet/mobile card galleries)
   ========================================================================== */
.hscroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { scroll-snap-align: start; flex-shrink: 0; }

/* ==========================================================================
   Click-and-drag horizontal scroll affordance (see main.js enableDragScroll)
   ========================================================================== */
.section3__track,
.intro-team__track {
  cursor: grab;
}
.section3__track.is-dragging,
.intro-team__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}