/* 핀 고정 스크롤 — 애플 제품 페이지 방식
   왼쪽에 붙어 있는 그림, 오른쪽에 바뀌는 글. 모바일에서는 위아래로 쌓인다. */

.gl-pin{
  position: relative;
  /* 실제 높이는 JS 가 단계 수에 맞춰 넣는다. 여기 값은 JS 가 안 돌 때의 몫이다. */
  height: auto;
  background: var(--chip);
  color: var(--ondark-fg, #fff);
}

.gl-pin-stage{
  height: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* align-items 는 «줄 안에서» 가운데를 맞춘다. 줄 자체는 내용만큼만 높아서
     그대로 두면 화면 위쪽에 붙는다. 줄 묶음을 화면 가운데로 보내는 것은
     align-content 다. 둘 다 있어야 진짜 가운데에 선다. */
  align-items: center;
  align-content: center;
  gap: 56px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 80px 32px;
}
/* 칸이 제 안의 내용만큼 넓어지려는 성질을 끊는다 */
.gl-pin-stage > *{ min-width: 0; }

/* 붙잡는 동안에만 화면에 고정된다 */
.gl-pin-on .gl-pin-stage{
  position: sticky;
  top: 0;
  height: 100vh;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

/* ── 맨 위: 제목 묶음 (선택) ─────────────────────────────────────────
   스테이지 «안» 에 있어서 화면이 붙은 동안 같이 고정되어 보인다.
   앞 위젯의 제목이던 때는 붙는 순간 위로 지나가 버렸다. */
.gl-pin-head{ grid-column: 1 / -1; }
.gl-pin-head .section-head{ max-width: none; margin: 0; }
.gl-pin-head .section-head h2{
  font-size: clamp(26px, 2.9vw, 40px);
  margin-bottom: 12px;
}
.gl-pin-head .section-head p{ max-width: 640px; }
.gl-pin:not(.gl-pin-light) .gl-pin-head h2{ color: var(--ondark-fg, #fff); }
.gl-pin:not(.gl-pin-light) .gl-pin-head p{ color: #b6b6be; }

.gl-pin-has-head .gl-pin-stage{ row-gap: 32px; }
/* 붙잡는 동안: 상단바(position:fixed) 아래에서 시작하고, 제목이 차지한 만큼 그림을 줄인다 */
.gl-pin-has-head.gl-pin-on .gl-pin-stage{ padding-top: var(--nav-h, 64px); }
.gl-pin-has-head .gl-pin-visual{
  max-height: min(74vh, calc(100vh - var(--nav-h, 64px) - 300px));
  min-height: 220px;
}

/* ── 왼쪽: 그림 ─────────────────────────────────────────────────── */
.gl-pin-visual{
  position: relative;
  aspect-ratio: 4 / 3;
  /* 화면보다 커지면 넘쳐서 "위에 붙은" 모양이 된다. 들어갈 만큼만 차지하게 묶는다. */
  max-height: 74vh;
  border-radius: var(--r-md, 18px);
  overflow: hidden;
  background: #16161a;
}
.gl-pin-visual [data-gl-pin-img]{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* 살짝 커진 상태에서 제자리로 — 그림이 바뀌는 것이 눈에 띄되 산만하지 않게 */
  transform: scale(1.04);
  transition: opacity 0.6s var(--ease, cubic-bezier(0.16,1,0.3,1)),
              transform 0.9s var(--ease, cubic-bezier(0.16,1,0.3,1));
}
.gl-pin-visual [data-gl-pin-img].on{ opacity: 1; transform: scale(1); }
/* 사진은 확대만 하고 방향을 주지 않는다 — 사진까지 함께 움직이면
   글과 사진이 서로 다른 속도로 미끄러져 눈이 어지럽다. */

/* ── 오른쪽: 바뀌는 글 ──────────────────────────────────────────── */
.gl-pin-steps{ position: relative; }
.gl-pin-on .gl-pin-steps{
  /* 단계들이 같은 자리에 겹쳐 있다가 하나씩 나타난다 */
  display: grid;
}
.gl-pin-on .gl-pin-step{
  grid-area: 1 / 1;
  opacity: 0;
  /* 기본은 «내려가는 중» — 아래에서 올라온다 */
  transform: translateY(var(--gl-pin-from, 16px));
  transition: opacity 0.45s ease, transform 0.55s var(--ease, cubic-bezier(0.16,1,0.3,1));
  pointer-events: none;
}
/* 되돌아 올라갈 때는 위에서 내려오게 뒤집는다.
   손이 움직이는 쪽과 글이 오는 쪽이 같아야 어색하지 않다. */
.gl-pin-on[data-gl-pin-dir="up"] .gl-pin-step{ --gl-pin-from: -16px; }
.gl-pin-on .gl-pin-step.on{
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.gl-pin-step .num{
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  /* 레드팀 2차 C1(2026-09-25) — 「.gl-pin 은 늘 어두운 바탕」은 틀린 가정이었다.
     gl-render.js 가 tone≠dark 면 .gl-pin-light 를 붙이고(가드랩 site.json 이 이 경우다),
     .gl-pin-light 는 밝은 바탕(--surface)이다. 기본은 밝은 바탕 기준 --fg-strong,
     실제로 어두운 핀(.gl-pin-light 가 없는 쪽)만 아래에서 --ondark-fg 로 뒤집는다. */
  color: var(--fg-strong);
  margin-bottom: 14px;
}
.gl-pin:not(.gl-pin-light) .gl-pin-step .num{ color: var(--ondark-fg, #fff); }

.gl-pin-step h3{
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin: 0 0 16px;
}
.gl-pin-step p{
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.8;
  color: #b6b6be;
  margin: 0;
  max-width: 460px;
}

/* ── 진행 표시 ──────────────────────────────────────────────────── */
.gl-pin-dots{
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  display: flex;
  gap: 9px;
}
.gl-pin-flat .gl-pin-dots{ display: none; }
.gl-pin-dots span{
  width: 8px; height: 8px;
  border-radius: 100px;
  background: rgba(255,255,255,0.28);
  cursor: pointer;
  transition: width 0.3s var(--ease, cubic-bezier(0.16,1,0.3,1)), background 0.3s ease;
}
.gl-pin-dots span.on{ width: 26px; background: var(--accent, #ff5a1f); }
.gl-pin-dots span:focus-visible{ outline: 2px solid var(--accent, #ff5a1f); outline-offset: 3px; }

/* ── 붙잡지 않을 때 (모바일 · 움직임 최소화 · JS 없음) ───────────── */
.gl-pin-flat .gl-pin-stage{ position: static; height: auto; }
.gl-pin-flat .gl-pin-steps{ display: flex; flex-direction: column; gap: 40px; }
.gl-pin-flat .gl-pin-step{ opacity: 1; transform: none; }
.gl-pin-flat .gl-pin-visual [data-gl-pin-img]{ position: relative; opacity: 1; transform: none; }
.gl-pin-flat .gl-pin-visual [data-gl-pin-img]:not(.on){ display: none; }

@media (max-width: 900px){
  /* 🔴 좁은 화면에서는 붙잡지 않는다 (2026-09-18 소유자 «스크롤이 중간에 걸린다»).
     JS(gl-pin.js)가 여기서는 gl-pin-on 대신 gl-pin-flat + gl-pin-cards 를 붙인다.

     종전에는 여기서도 붙잡았다. «쌓으면 페이지가 길어진다» 는 이유였는데
     실제로 재어 보니 반대였다 — 홈 사업분야 구간 390×812 기준으로
     붙잡을 때 2071px(그중 1259px 가 멈춘 구간), 펼칠 때 1279px 였다.
     붙잡는 쪽이 792px 더 길면서 «걸리는» 느낌까지 만들고 있었다. */
  /* 🔴 좌우 여백은 엔진의 기둥(.container)과 같게 — 601~900px 은 32px, 600 이하는 20px.
     종전에는 900 이하 전부 20px 이라, 태블릿에서 이 부품만 기둥보다 12px 왼쪽에 섰다
     (2026-09-21 화면 검수가 가드랩 홈에서 찾음). */
  .gl-pin-stage{
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 24px 32px 40px;
  }
  /* 제목이 있으면 맨 위 여백은 섹션 자체 여백으로 충분하다(종전 «앞 위젯의 제목» 과 같은 높이) */
  .gl-pin-has-head .gl-pin-stage{ padding-top: 0; row-gap: 28px; }
  .gl-pin-step h3{ font-size: clamp(22px, 6.5vw, 30px); }
  .gl-pin-step p{ font-size: 14.5px; line-height: 1.75; }
  .gl-pin-step .mark{ width: 38px; height: 38px; margin-bottom: 12px; }
  .gl-pin-step .mark svg{ width: 22px; height: 22px; }

  /* 사진 + 글 한 벌씩 쌓기 — 그림은 JS 가 단계 안으로 옮겨 넣는다.
     한 장만 남기면 2·3번째 글이 첫 사진과 짝이 안 맞는다. */
  .gl-pin-cards .gl-pin-steps{ gap: 44px; }
  .gl-pin-cards .gl-pin-card-visual{
    position: relative;
    aspect-ratio: 16 / 11;
    border-radius: var(--r-md, 18px);
    overflow: hidden;
    background: #16161a;
    margin-bottom: 18px;
  }
  .gl-pin-cards .gl-pin-card-visual [data-gl-pin-img]{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    /* 펼친 모양에서는 나타나는 연출을 하지 않는다 — 스크롤하며 지나가는 카드다 */
    opacity: 1; transform: none; transition: none;
  }
  .gl-pin-light .gl-pin-card-visual{ background: var(--surface-2); }
}

/* 아주 낮은 화면(가로로 눕힌 휴대폰 등)에서는 사진이 글을 밀어낸다.
   그럴 때는 사진을 줄여 글이 먼저 읽히게 한다. */
@media (max-width: 600px){
  .gl-pin-stage{ padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 900px) and (max-height: 620px){
  .gl-pin-cards .gl-pin-card-visual{ aspect-ratio: 21 / 9; }
}

@media (prefers-reduced-motion: reduce){
  .gl-pin{ height: auto !important; }
  .gl-pin-on .gl-pin-stage{ position: static; height: auto; overflow: visible; }
  .gl-pin-on .gl-pin-steps{ display: flex; flex-direction: column; gap: 36px; }
  .gl-pin-on .gl-pin-step{ opacity: 1; transform: none; transition: none; pointer-events: auto; }
  .gl-pin-dots{ display: none; }
}

/* ── 밝은 배경 변형 ────────────────────────────────────────────────
   기본형은 검은 바탕이다. 흰 바탕 구간(메인 홈의 사업분야 등)에 넣을 때는
   이 표시를 함께 준다. 페이지의 밝기 흐름이 갑자기 끊기지 않게 하기 위함이다. */
.gl-pin-light{ background: var(--surface); color: var(--fg); }
.gl-pin-light .gl-pin-visual{ background: var(--surface-2); }
.gl-pin-light .gl-pin-step p{ color: var(--muted-2); }
.gl-pin-light .gl-pin-dots span{ background: rgba(10,10,11,.18); }
.gl-pin-light .gl-pin-dots span.on{ background: var(--accent, #ff5a1f); }

/* 기존 카드에 있던 아이콘을 그대로 가져다 쓴다. 새로 그리지 않는다 —
   같은 것을 두 가지 모양으로 두면 나중에 한쪽만 고쳐진다. */
.gl-pin-step .mark{
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; /* 레드팀 2차 L(2026-09-25) — 이미 나간 화면(12px)이 라운드 2-C 모서리 스윕으로 10px 로 바뀌었다. 원래대로 */
  background: var(--accent-soft, #fff1ea);
  margin-bottom: 18px;
}
.gl-pin-step .mark svg{ width: 26px; height: 26px; }
.gl-pin-step .mark svg [stroke-width]{ stroke: var(--accent, #ff5a1f); }
.gl-pin:not(.gl-pin-light) .gl-pin-step .mark{ background: rgba(255,255,255,.1); }