/* ============================================
   MAIN — hero, marquee, work, experience, why-me, approach
   ============================================ */

/* ---- HERO ---- */
.main-visual {
  position: relative;
  height: 300vh;
}

.main-title {
  position: sticky;
  top: 0; left: 0;
  width: 100%;
  height: 95vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.main-visual .btit {
  font-size: clamp(52px, 12.5vw, 240px);
  line-height: 0.95;
  font-weight: 350;
  font-family: var(--font-display);
}

.main-bottom {
  position: sticky;
  width: 100%; left: 0;
  padding: 10px 30px;
  bottom: 0;
  height: 50px;
  top: calc(100% - 50px);
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 400;
}

.main-shutter {
  position: absolute;
  inset: 0;
  top: 0;
  height: 100vh;
  z-index: -1;
}

.main-shutter span {
  background: var(--black);
  height: 2px;
  width: 100%;
  position: absolute;
  left: 0; bottom: -2px;
  will-change: transform;
  transform: translateZ(0);
}

.main-scroll {
  position: sticky;
  width: 100%;
  top: calc(100% - 36px);
  font-weight: 400;
  height: 36px;
  left: 0; bottom: 0;
  text-align: center;
  letter-spacing: 0;
  line-height: 1;
  z-index: 2;
  font-size: clamp(12px, 0.729vw, 14px);
  text-transform: uppercase;
}

/* hero media — 4 floating thumbnails */
.main-media {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.main-media span {
  position: absolute;
  left: 50%; top: 50%;
  width: 25%;
  max-width: 250px;
  aspect-ratio: 1;
  overflow: hidden;
  will-change: transform, border-radius, opacity;
}

.main-media span:nth-child(1) { border-radius: clamp(20px,3vw,60px) 0 clamp(20px,3vw,60px) 0; }
.main-media span:nth-child(2) { border-radius: 50%; z-index: 5; }
.main-media span:nth-child(3) { border-radius: 0 clamp(20px,3vw,60px) 0 0; }
.main-media span:nth-child(4) { border-radius: 50%; }

/* placeholder colored blocks (replace with real images) */
.hero-img {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* .hero-img-1 { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); } */
/* .hero-img-2 { background: linear-gradient(135deg, #0f3460 0%, #533483 100%); } */
/* .hero-img-3 { background: linear-gradient(135deg, #2d6a4f 0%, #1b4332 100%); } */
/* .hero-img-4 { background: linear-gradient(135deg, #7b2d8b 0%, #4a0e5c 100%); } */
.hero-img-1 { background: url('https://pub-85f1ab55639646929cd762dc7665bb86.r2.dev/hero-img/hero-img-01.jpg') center/cover no-repeat; }
.hero-img-2 { background: none; }
.hero-img-2 video {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}
.hero-img-3 { background: url('https://pub-85f1ab55639646929cd762dc7665bb86.r2.dev/hero-img/hero-img-03.jpg') center/cover no-repeat; }
.hero-img-4 { background: url('https://pub-85f1ab55639646929cd762dc7665bb86.r2.dev/hero-img/hero-img-04.jpg') center/cover no-repeat; }

/* ---- MARQUEE ---- */
.marquee-section {
  display: flex;
  flex-direction: column;
  gap: 100px;
  padding: clamp(50px, 10vw, 200px) 0 0;
  overflow: hidden;
}

.marquee-track {
  display: flex;
  gap: clamp(8px, 0.833vw, 16px);
  width: max-content;
  will-change: transform;
  cursor: grab;
}

.marquee-track:active { cursor: grabbing; }
.marquee-track * { user-select: none; -webkit-user-drag: none; }

.marquee-card { flex-shrink: 0; }

.marquee-track:has(.media-card) { align-items: flex-start; }

.marquee-track:has(.media-card) .marquee-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--black);
  transition: all 0.5s ease;
  pointer-events: none;
}

.marquee-track:has(.media-card) .marquee-card.is-active::after {
  height: 0;
  top: auto;
  bottom: 0;
}

.info-card {
  position: relative;
  width: clamp(160px, 16.667vw, 320px);
  aspect-ratio: 0.8;
  padding: clamp(16px, 1.25vw, 24px);
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: flex-start;
  overflow: hidden;
  font-weight: 500;
  background: var(--black);
  color: var(--white);
  gap: 10px;
}

.info-card p {
  font-size: clamp(18px, 1.875vw, 36px);
  line-height: 1.1;
}

.info-card p:last-child {
  font-size: clamp(12px, 0.833vw, 16px);
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255,255,255,0.5);
}

.info-card strong {
  width: 100%;
  font-size: 60px;
  font-weight: 500;
  opacity: 0.2;
  text-align: center;
  display: none;
}

.media-card {
  position: relative;
  width: clamp(160px, 16.667vw, 320px);
  aspect-ratio: 1;
  overflow: hidden;
}

.mcard-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* marquee card placeholder colors */
/* .mcard-img-1  { background: linear-gradient(135deg,#1a1a2e,#16213e); } */
/* .mcard-img-2  { background: linear-gradient(135deg,#0f3460,#533483); } */
/* .mcard-img-3  { background: linear-gradient(135deg,#2d6a4f,#1b4332); } */
/* .mcard-img-4  { background: linear-gradient(135deg,#7b2d8b,#4a0e5c); } */
/* .mcard-img-5  { background: linear-gradient(135deg,#b5451b,#7c2d12); } */
/* .mcard-img-6  { background: linear-gradient(135deg,#1d3557,#457b9d); } */
/* .mcard-img-7  { background: linear-gradient(135deg,#3d405b,#81b29a); } */
/* .mcard-img-8  { background: linear-gradient(135deg,#264653,#2a9d8f); } */
/* .mcard-img-9  { background: linear-gradient(135deg,#e9c46a,#f4a261); } */
/* .mcard-img-10 { background: linear-gradient(135deg,#e76f51,#264653); } */
.mcard-img-1  { background: url('https://pub-85f1ab55639646929cd762dc7665bb86.r2.dev/thumb/thumb_rolling01.jpg') center/cover no-repeat; }
.mcard-img-2  { background: url('https://pub-85f1ab55639646929cd762dc7665bb86.r2.dev/thumb/thumb_rolling02.jpg') center/cover no-repeat; }
.mcard-img-3  { background: url('https://pub-85f1ab55639646929cd762dc7665bb86.r2.dev/thumb/thumb_rolling03.jpg') center/cover no-repeat; }
.mcard-img-4  { background: url('https://pub-85f1ab55639646929cd762dc7665bb86.r2.dev/thumb/thumb_rolling04.jpg') center/cover no-repeat; }
.mcard-img-5  { background: url('https://pub-85f1ab55639646929cd762dc7665bb86.r2.dev/thumb/thumb_rolling05.jpg') center/cover no-repeat; }
.mcard-img-6  { background: url('https://pub-85f1ab55639646929cd762dc7665bb86.r2.dev/thumb/thumb_rolling06.jpg') center/cover no-repeat; }
.mcard-img-7  { background: url('https://pub-85f1ab55639646929cd762dc7665bb86.r2.dev/thumb/thumb_rolling07.jpg') center/cover no-repeat; }
.mcard-img-8  { background: url('https://pub-85f1ab55639646929cd762dc7665bb86.r2.dev/thumb/thumb_rolling08.jpg') center/cover no-repeat; }
.mcard-img-9  { background: url('https://pub-85f1ab55639646929cd762dc7665bb86.r2.dev/thumb/thumb_rolling09.jpg') center/cover no-repeat; }
.mcard-img-10 { background: url('https://pub-85f1ab55639646929cd762dc7665bb86.r2.dev/thumb/thumb_rolling10.jpg') center/cover no-repeat; }

/* ---- WORK SECTION ---- */
.work-section {
  position: relative;
  padding: clamp(50px, 10vw, 200px) clamp(20px, 1.5vw, 30px) 0;
}

.work-section .btit {
  position: sticky;
  top: 50px;
  transform-origin: left;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  width: 100%;
  align-items: flex-start;
  row-gap: clamp(20px, 6vw, 120px);
}

.work-grid + .work-grid { padding-top: clamp(20px, 6vw, 120px); }
.work-grid:last-child    { padding-bottom: 300px; }

.work-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1.7;
  overflow: hidden;
  will-change: transform;
}

.work-thumb-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 0.7s ease;
}

.work-block { position: sticky; top: 60px; will-change: transform; }
.work-block a { display: block; }

/* work content bar */
.work-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  overflow: hidden;
  transition: all 0.35s ease;
  opacity: 0;
  transform: translateY(-100%);
  padding: 8px 10px;
  z-index: -1;
  position: relative;
  color: var(--white);
  border-top: 2px solid var(--beige);
}

.work-content::before {
  content: '';
  position: absolute;
  right: 0; top: 0;
  width: 0; height: 100%;
  background: var(--black);
  transition: all 0.35s ease;
  z-index: -1;
}

.work-content.active { transform: translateY(0); opacity: 1; }
.work-content.active::before { width: 100%; left: 0; right: auto; }

.work-content h3 {
  flex: 1;
  width: 40%;
  font-weight: 500;
  font-size: clamp(14px, 0.938vw, 18px);
}

.work-content b {
  margin-top: 2px;
  font-weight: 400;
  opacity: 0.8;
  letter-spacing: 0;
}

/* work block grid positions */
.work-block-1 { grid-column: 8 / span 3; }
.work-block-2 { grid-column: 1 / span 5; }
.work-block-3 { grid-column: 7 / span 3; }
.work-block-4 { grid-column: 1 / span 4; }
.work-block-5 { grid-column: 6 / span 6; }
.work-block-6 { grid-column: 1 / span 4; }
.work-block-7 { grid-column: 5 / span 3; }

.work-block-1 a,
.work-block-5 a { transform-origin: right top; }

.work-block-2 a,
.work-block-3 a,
.work-block-4 a,
.work-block-6 a,
.work-block-7 a { transform-origin: left top; }

/* work thumb placeholder colors */
/* .wt-1 { background: linear-gradient(135deg,#1a1a2e,#16213e); }
.wt-2 { background: linear-gradient(135deg,#0f3460,#533483); }
.wt-3 { background: linear-gradient(135deg,#2d6a4f,#1b4332); }
.wt-4 { background: linear-gradient(135deg,#7b2d8b,#4a0e5c); }
.wt-5 { background: linear-gradient(135deg,#b5451b,#7c2d12); }
.wt-6 { background: linear-gradient(135deg,#1d3557,#457b9d); }
.wt-7 { background: linear-gradient(135deg,#3d405b,#81b29a); } */
.wt-1 { background: url('https://pub-85f1ab55639646929cd762dc7665bb86.r2.dev/project/3D_Gallery.png') center/cover no-repeat; }
.wt-2 { background: url('https://pub-85f1ab55639646929cd762dc7665bb86.r2.dev/project/co2ero.png') center/cover no-repeat; }
.wt-3 { background: url('https://pub-85f1ab55639646929cd762dc7665bb86.r2.dev/project/gmp.png') center/cover no-repeat; }
.wt-4 { background: url('https://pub-85f1ab55639646929cd762dc7665bb86.r2.dev/project/kecic.png') center/cover no-repeat; }
.wt-5 { background: url('https://pub-85f1ab55639646929cd762dc7665bb86.r2.dev/project/coretechnology.png') center/cover no-repeat; }
.wt-6 { background: url('https://pub-85f1ab55639646929cd762dc7665bb86.r2.dev/project/kosic.png') center/cover no-repeat; }
.wt-7 { background: url('https://pub-85f1ab55639646929cd762dc7665bb86.r2.dev/project/kodta.png') center/cover no-repeat; }

/* ---- EXPERIENCE / EDUCATION ---- */
.exp-section {
  padding: 20px clamp(20px, 1.5vw, 30px) 0;
}

/*
  블록 구조: [레이블 고정폭] [리스트 나머지 전부]
  레이블 너비를 고정해서 리스트가 최대한 넓게 사용
*/
.exp-block {
  position: relative;
  display: grid;
  grid-template-columns: clamp(140px, 16vw, 240px) 1fr;
  gap: 0 clamp(24px, 2.5vw, 48px);
}

.exp-block:has(.exp-label) {
  border-top: 2px solid var(--black);
  padding-top: 12px;
  margin-top: 28px;
}

/* 레이블 영역 — sticky로 따라다님 */
.exp-year {
  position: relative;
  padding-top: 4px;
}

.exp-year .exp-label {
  position: sticky;
  top: 84px;
  font-size: clamp(14px, 1.1vw, 20px);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.2;
  display: block;
}

.exp-year .exp-date {
  display: block;
  margin-top: 6px;
  font-size: clamp(10px, 0.625vw, 12px);
  color: var(--gray);
  font-weight: 400;
  letter-spacing: 0;
}

/* 리스트 영역 */
.exp-list {
  width: 100%;
  min-width: 0;
}

/*
  각 행: 발주사 | 프로젝트명 | 기간
  - 발주사: 모든 행이 같은 폭이 되도록 min-content 기반
  - 발주사 컬럼 폭은 가장 긴 텍스트(한국아스콘공업협동조합연합회 등)에 맞게
    max-content 허용 + 상한선 vw로 제한
  - 프로젝트명: 남는 공간 전부
  - 기간: 내용 너비만
*/
.exp-item {
  display: grid;
  grid-template-columns:
    minmax(max-content, clamp(180px, 22vw, 320px))
    1fr
    max-content;
  align-items: baseline;
  gap: 0 clamp(12px, 1.5vw, 24px);
  font-size: clamp(13px, 0.9vw, 15px);
  padding: 8px 0;
  border-top: 1px solid rgba(10,10,10,0.12);
}

/* 연도 구분 헤더 */
.exp-item.exp-group-head {
  display: flex;
  align-items: center;
  border-top: 2px solid var(--black);
  padding-top: 14px;
  margin-top: 22px;
}

.exp-item.exp-group-head:first-child {
  border-top: 0;
  margin-top: 0;
}

.exp-block:has(.exp-label) .exp-list .exp-item:first-child {
  border-top: 0;
}

.exp-year-tag {
  font-size: clamp(15px, 1.2vw, 20px);
  font-weight: 650;
  letter-spacing: -0.03em;
}

/* 발주사명 */
.exp-item > span:first-child {
  font-weight: 600;
  letter-spacing: -0.03em;
  white-space: nowrap;  /* 데스크탑: 한 줄 */
}

/* 프로젝트명 */
.exp-item > span:nth-child(2) {
  letter-spacing: -0.02em;
  min-width: 0;
  color: rgba(10,10,10,0.72);
}

/* 기간 */
.exp-period {
  font-size: clamp(10px, 0.6vw, 12px);
  color: var(--gray);
  letter-spacing: 0;
  white-space: nowrap;
  text-align: right;
}

.exp-item strong { font-weight: 650; color: var(--black); }

/* floating preview image on hover */
.exp-preview {
  position: fixed;
  left: 0; top: 0;
  width: 220px;
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
  transform: translate(-50%,-50%) scale(0.85);
  will-change: transform;
  display: none;
}

.exp-preview-inner {
  position: relative;
  width: 100%; height: 100%;
  background: #111;
  overflow: hidden;
}

.exp-preview-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.exp-section .cursor-hover {
  margin-top: clamp(40px, 4vw, 80px);
  text-align: center;
}

/* ---- WHY ME / STRENGTHS ---- */
.why-section {
  position: relative;
  height: 300vh;
  padding: 0 clamp(20px, 1.5vw, 30px);
}

.why-expand {
  position: sticky;
  top: 0;
  padding-top: clamp(100px, 10vw, 200px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 2vw, 40px);
  overflow: hidden;
}

.why-grid {
  position: relative;
  width: clamp(100px, 8.333vw, 160px);
  height: clamp(100px, 8.333vw, 160px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 0 40px;
  background: var(--primary);
  overflow: hidden;
  will-change: width, height, border-radius, padding;
}

.why-grid .symbol {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%) scale(1.5);
  transition: all 0.5s ease;
}

.why-card {
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 1vw, 20px);
  opacity: 0;
  transform: translateY(80px) scale(0.8);
  will-change: transform, opacity;
}

.why-section .btit { text-align: center; }

.why-label {
  position: relative;
  z-index: 2;
  font-size: clamp(16px, 1.25vw, 24px);
}


/* ---- APPROACH / HOW I WORK ---- */
.approach-section {
  position: relative;
  padding: clamp(60px, 10vw, 200px) clamp(20px, 1.5vw, 30px) 0;
  overflow: hidden;
}

.approach-head {
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 3vw, 60px);
}

.approach-section .stit {
  font-size: clamp(30px, 3vw, 60px);
  line-height: 1;
  font-weight: 450;
  letter-spacing: -0.04em;
}

.approach-grid {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.approach-cont {
  width: 100%;
  display: flex;
  gap: clamp(50px, 5vw, 100px);
  margin: 0 auto;
}

.approach-list {
  position: relative;
  flex: 1;
  height: clamp(300px, 31vw, 600px);
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.approach-track {
  display: flex;
  flex-direction: column;
  gap: 0;
  will-change: transform;
  transform: translateZ(0);
}

.approach-item + .approach-item::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: var(--black);
}

.approach-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: clamp(10px, 1vw, 20px) 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: clamp(16px, 1.25vw, 24px);
  font-weight: 550;
  letter-spacing: -0.03em;
}

.approach-icon {
  position: relative;
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
}

.approach-icon::before,
.approach-icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--black);
  transform: translate(-50%,-50%);
  transition: 0.45s ease;
}

.approach-icon::before { width: 13px; height: 1px; }
.approach-icon::after  { width: 1px;  height: 13px; }

.approach-answer { height: 0; opacity: 0; }

.approach-answer p {
  padding: 0 50px clamp(16px, 1.25vw, 24px) 0;
  font-size: clamp(14px, 0.938vw, 18px);
}

.approach-item:hover .approach-icon::after {
  opacity: 0;
  transform: translate(-50%,-50%) rotate(90deg);
}

.approach-item.active .approach-question { color: var(--primary); }

/* ---- LETS BTN (footer CTA) ---- */
.lets-btn { display: block; }
.lets-btn .btit { font-family: var(--font-display); }

/* ============================================
   RESPONSIVE — main
   ============================================ */
@media (max-width: 1400px) {
  .main-bottom { display: none; }
  .work-content b { display: none; }
  .main-visual .btit { font-size: 14vw; line-height: 1; }
}

@media (max-width: 768px) {
  .main-visual .btit { line-height: 1.5; font-weight: 450; }

  .work-grid { grid-template-columns: auto; }
  .work-block { grid-column: auto !important; position: relative; top: auto; }
  .work-block a { transform-origin: left top !important; transform: scale(1) !important; }
  .work-grid:last-child { padding-bottom: 0; }
  .work-content { transform: translateY(0); opacity: 1; }
  .work-content::before { width: 100%; }
  .work-section .btit { margin-bottom: 30px; position: relative; top: 0; }

  .exp-block {
    grid-template-columns: 1fr;  /* 레이블을 리스트 위로 올림 */
    margin-top: 16px;
  }
  .exp-block:has(.exp-label) { margin-top: 28px; }
  .exp-year .exp-label { position: relative; top: auto; }
  .exp-year .exp-date  { display: inline; margin-left: 6px; }

  /*
    모바일: 발주사 + 프로젝트명 2열 → 너무 길면 각각 한 줄씩
    기간은 숨김
  */
  .exp-item {
    grid-template-columns: max-content 1fr;
    gap: 0 12px;
    font-size: 12px;
    align-items: start;
  }
  .exp-period { display: none; }

  /* 발주사명이 화면 40% 초과 시 전체 폭 차지 후 프로젝트명이 아래로 */
  @media (max-width: 480px) {
    .exp-item {
      grid-template-columns: 1fr;
      gap: 2px 0;
    }
    .exp-item > span:first-child {
      white-space: normal;
    }
  }

  .why-section { height: auto; }
  .why-expand  { position: relative; }
  .why-grid {
    width: 100%; height: auto;
    background: var(--beige);
    padding: 40px 30px;
    border-radius: 10px;
    gap: 30px;
    grid-template-columns: repeat(2, 1fr);
    align-items: flex-start;
  }
  .why-card { opacity: 1; transform: translateY(0) scale(1); }
  .why-grid .symbol { opacity: 0; }
  .why-grid.glass-noise::before { opacity: 0; }

  .approach-cont { flex-direction: column; }
  .approach-head { width: 100%; }
  .approach-list  { flex: auto; }
}