@charset "utf-8";
/* ───────────────────────────────────────────────
   같이그림스튜디오 2026 — 메인 페이지
   Hero / Who we are / What we do / Marquee / Works / FAQ
   ─────────────────────────────────────────────── */

/* 스크롤 등장 요소: 모션이 켜진 경우에만 미리 숨김 (JS 가 값을 넣어 줌) */
.gg-motion [data-reveal] { opacity: 0; }

.gg-faq .gg-btn--black { --sh: var(--c-lilac); }

/* ───────── 1. Hero ───────── */
.gg-hero { position: relative; height: 180vh; }
.gg-hero-stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; }
#ggGfx { position: absolute; inset: 0; width: 100%; height: 100%; }
.gg-hero-tag, .gg-hero-copy { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; width: min(760px, 64vw); }
.gg-hero-tag { top: 60%; height: 22px; font-weight: 500; font-size: 15px; color: var(--c-purple); }
.gg-hero-copy { bottom: clamp(56px, 10vh, 96px); }
.gg-hero-slogan { margin: 0 0 14px; font-weight: 600; font-size: clamp(22px, 2.7vw, 40px); line-height: 1.15; color: var(--c-purple); }
.gg-hero-slogan .hl { background: var(--c-lilac); padding: 0 .08em; }
.gg-hero-sub { font-size: clamp(13px, 1.1vw, 16px); line-height: 1.6; color: var(--c-black); }
@media (max-width: 760px) {
  .gg-hero-tag, .gg-hero-copy { width: 72vw; }
}

/* ───────── 2. Who we are ───────── */
.gg-who { position: relative; background: var(--c-paper); }
.who-inner {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(20px, 4vh, 44px);
  padding: clamp(84px, 10vh, 96px) var(--gutter) clamp(24px, 4vh, 44px);
}
.who-top { display: flex; justify-content: space-between; align-items: center; gap: 64px; }
.who-text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(12px, 2vh, 24px); }
.who-label { font-weight: 500; font-size: 15px; color: var(--c-purple); }
.who-sub { font-weight: 500; font-size: 17px; color: var(--c-ink-sub); }
.who-title { font-weight: 700; font-size: clamp(38px, 7.2vh, 68px); line-height: 1.3; letter-spacing: -0.04em; transform-origin: left center; }
.who-body { font-size: 16px; line-height: 1.65; }
.who-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.who-chips li { padding: 9px 16px; border-radius: 4px; background: var(--c-black); color: var(--c-bg); font-weight: 500; font-size: 14px; }

.who-visual { position: relative; flex: 0 0 auto; width: calc(var(--panel-h) * 0.7778); height: calc(var(--panel-h) + 20px); --panel-h: clamp(360px, 50vh, 500px); }
.who-plate { position: absolute; left: 20px; top: 20px; width: calc(100% - 20px); height: var(--panel-h); border-radius: 14px; background: var(--c-purple); }
.who-panel { position: absolute; left: 0; top: 0; width: calc(100% - 20px); height: var(--panel-h); border-radius: 14px; background: var(--c-lilac); overflow: hidden; }
.who-panel .pose {
  position: absolute; left: 0; right: 0; bottom: 6%; margin: 0 auto;
  height: 88%; width: auto; max-width: none;
  opacity: 0; visibility: hidden;
}
.who-panel .pose.is-active { opacity: 1; visibility: visible; }
.who-dots { position: absolute; left: 20px; bottom: 16px; display: flex; gap: 6px; }
.who-dots i { display: block; width: 8px; height: 8px; border-radius: 4px; background: #fff; transition: width .5s var(--ease-out), background .3s; }
.who-dots i.is-active { width: 22px; background: var(--c-purple); }

.who-cards { display: flex; gap: 16px; }
.who-card {
  flex: 1; min-width: 0; padding: 22px 30px 24px; border-radius: 6px;
  display: flex; flex-direction: column; gap: 10px;
  color: var(--c-bg);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.who-card--black { background: var(--c-black); }
.who-card--purple { background: var(--c-purple); }
.who-card .mono { font-weight: 700; font-size: 14px; color: var(--c-lilac); margin-bottom: 8px; }
.who-card h3 { font-size: 22px; line-height: 1.3; }
.who-card p:last-child { font-size: 15px; line-height: 1.7; }
.who-card.is-dim { opacity: .5; }

/* ───────── 3. What we do ───────── */
.gg-what { position: relative; background: var(--c-black); color: var(--c-bg); overflow: hidden; }
.what-inner {
  min-height: 100vh;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;
  padding: clamp(96px, 15vh, 140px) var(--gutter) 60px;
}
.what-left { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 2.4vh, 28px); position: relative; z-index: 2; }
.what-label { font-weight: 500; font-size: 15px; color: var(--c-lilac); }
.what-title { display: flex; flex-direction: column; font-weight: 600; font-size: clamp(88px, 16.5vh, 150px); line-height: .92; letter-spacing: -0.03em; }
.what-title span { display: block; }
.what-star { display: inline-block; font-style: normal; transform-origin: 50% 62%; }
.what-lead { font-weight: 500; font-size: 22px; line-height: 1.5; }
.what-counter { display: flex; align-items: baseline; gap: 12px; }
.what-counter b { font-weight: 600; font-size: 56px; line-height: 1; color: var(--c-purple); }
.what-counter span { font-weight: 500; font-size: 15px; }

.what-stack { position: relative; flex: 0 0 min(640px, 50%); height: min(700px, 74vh); }
.svc-slot { position: absolute; width: min(600px, 100%); }
.svc-slot--1 { left: 0; top: 0; transform: rotate(5deg); }
.svc-slot--2 { left: 6%; top: 8%; transform: rotate(-3deg); }
.svc-slot--3 { left: 0; top: 16%; transform: rotate(2deg); }
.svc-slot--4 { left: 6%; top: 24%; transform: rotate(-4deg); }
.svc-plate { position: absolute; inset: 0; border-radius: 14px; transform: translate(8px, 8px); }
.svc-card {
  position: relative; display: flex; flex-direction: column; gap: 22px;
  padding: 36px 40px 40px; border-radius: 14px;
}
.svc-head { display: flex; align-items: center; justify-content: space-between; }
.svc-head .mono { font-weight: 700; font-size: 16px; }
.svc-sym { width: 60px; height: 44px; }
.svc-name { font-weight: 600; font-size: clamp(34px, 3.6vw, 52px); line-height: 1; letter-spacing: -0.03em; }
.svc-desc { font-size: 17px; line-height: 1.7; }
.svc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-tags li { padding: 7px 14px; border: 1.5px dashed currentColor; border-radius: 999px; font-weight: 500; font-size: 14px; }
.svc-feat { font-weight: 500; font-size: 14px; color: var(--c-lilac); }

.svc-slot--1 .svc-plate { background: var(--c-lilac); }
.svc-slot--1 .svc-card { background: var(--c-purple); color: var(--c-bg); }
.svc-slot--1 .svc-head .mono { color: var(--c-lilac); }
.svc-slot--2 .svc-plate, .svc-slot--3 .svc-plate, .svc-slot--4 .svc-plate { background: var(--c-purple); }
.svc-slot--2 .svc-card { background: var(--c-lilac); color: var(--c-black); }
.svc-slot--3 .svc-card { background: var(--c-bg); color: var(--c-black); }
.svc-slot--4 .svc-card { background: var(--c-paper); color: var(--c-black); }
.svc-slot--2 .svc-head .mono, .svc-slot--3 .svc-head .mono, .svc-slot--4 .svc-head .mono { color: var(--c-purple); }

/* ───────── 4. Marquee ───────── */
.gg-marquee { position: relative; height: 170px; background: var(--c-bg); overflow: hidden; }
.mq-band { position: absolute; left: -6%; width: 112%; height: 56px; overflow: hidden; display: flex; align-items: center; }
.mq-band--lilac { top: 74px; transform: rotate(2deg); background: var(--c-lilac); color: var(--c-black); }
.mq-band--purple { top: 28px; transform: rotate(-2deg); background: var(--c-purple); color: var(--c-bg); z-index: 1; }
.mq-track { display: flex; flex: none; white-space: pre; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; will-change: transform; }
.mq-band--purple .mq-track { font-family: var(--f-kr); font-weight: 700; letter-spacing: -0.04em; }
.mq-set { flex: none; }

/* ───────── 5. Works ───────── */
.gg-works { position: relative; background: var(--c-bg); padding: 100px var(--gutter) 160px; }
.works-bg { position: sticky; top: 84px; z-index: 0; pointer-events: none; }
.works-bg span { display: block; font-weight: 600; font-size: clamp(120px, 23.6vw, 340px); line-height: .95; letter-spacing: -0.03em; color: var(--c-purple); }
.works-fore { position: relative; z-index: 1; margin: 40px calc(var(--gutter) * -1) 0; padding: 40px var(--gutter) 0; background: var(--c-bg); }
.works-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; gap: 16px; }
.works-head h2 { font-size: 28px; line-height: 1.3; }
.works-head h2 span { font-weight: 500; }
.works-ctrl { display: flex; align-items: center; gap: 10px; }
.works-ctrl > .mono { font-weight: 500; font-size: 15px; color: var(--c-ink-sub); margin-right: 4px; }
.works-arrow {
  width: 48px; height: 48px; border: 1.5px solid var(--c-black); border-radius: 4px;
  font-family: var(--f-mono); font-weight: 500; font-size: 18px; line-height: 1;
  background: var(--c-bg); color: var(--c-black);
  transition: transform .35s var(--ease-out), opacity .3s;
}
.works-arrow--dark { background: var(--c-black); color: var(--c-bg); }
.works-arrow:hover { transform: translateY(-2px); }
.works-arrow.swiper-button-disabled, .works-arrow:disabled { opacity: .3; pointer-events: none; }

.works-swiper { overflow: hidden; }
.works-swiper .swiper-slide { height: auto; }
.work-card { display: flex; flex-direction: column; gap: 16px; }
.work-thumb { display: block; aspect-ratio: 416 / 308; overflow: hidden; border-radius: 6px; background: var(--c-line); }
.work-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.work-card:hover .work-thumb img { transform: scale(1.04); }
.work-cat { font-weight: 500; font-size: 13px; color: var(--c-purple); }
.work-title { font-weight: 600; font-size: 20px; line-height: 1.3; }
.work-all {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 380px; padding: 36px; border-radius: 6px;
  background: var(--c-black); color: var(--c-bg);
  transition: transform .5s var(--ease-out);
}
.work-all:hover { transform: translateY(-4px); }
.work-all-title { font-weight: 600; font-size: 32px; color: var(--c-lilac); }
.work-all-cats { font-weight: 500; font-size: 16px; line-height: 1.7; }

/* ───────── 6. FAQ ───────── */
.gg-faq { background: var(--c-paper); padding: 160px var(--gutter); }
.faq-row { display: flex; gap: 96px; align-items: flex-start; }
.faq-left { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; position: sticky; top: 140px; }
.faq-label { font-weight: 500; font-size: 15px; color: var(--c-purple); }
.faq-title { font-weight: 700; font-size: 44px; line-height: 1.35; }
.faq-list { flex: 0 0 min(640px, 52%); border-top: 1.5px solid var(--c-purple); }
.faq-item { border-bottom: 1.5px solid var(--c-purple); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; text-align: left; font-weight: 600; font-size: 18px; line-height: 1.4; }
.faq-ico { position: relative; flex: none; width: 24px; height: 24px; color: var(--c-purple); }
.faq-ico::before, .faq-ico::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%, -50%); transition: transform .45s var(--ease-out), opacity .3s; }
.faq-ico::before { width: 14px; height: 2px; }
.faq-ico::after { width: 2px; height: 14px; }
.faq-item.is-open .faq-ico::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-out); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a-in { overflow: hidden; }
.faq-a p { padding: 0 0 24px; max-width: 560px; font-size: 15px; line-height: 1.65; color: var(--c-ink-sub); }

/* ───────── 모바일 ───────── */
@media (max-width: 1100px) {
  .who-top { gap: 32px; }
  .who-visual { --panel-h: clamp(340px, 44vh, 480px); }
  .what-inner { gap: 24px; }
  .faq-row { gap: 48px; }
}

@media (max-width: 768px) {
  /* Who we are: 캐릭터 패널을 위에 고정하고, 카드가 올라올 때마다 포즈 전환 */
  .who-inner { min-height: 0; padding: 88px 20px 64px; gap: 28px; justify-content: flex-start; }
  .who-top { display: contents; }
  .who-text { gap: 14px; }
  .who-title { font-size: 40px; }
  .who-body { font-size: 15px; }
  .who-visual { position: sticky; top: 76px; z-index: 3; width: 100%; height: calc(40vh + 12px); --panel-h: 40vh; }
  .who-plate { width: calc(100% - 12px); left: 12px; top: 12px; }
  .who-panel { width: calc(100% - 12px); }
  .who-cards { flex-direction: column; gap: 18vh; padding-top: 6vh; padding-bottom: 8vh; }
  .who-card { padding: 24px; }

  /* What we do */
  .what-inner { flex-direction: column; min-height: 100vh; padding: 92px 20px 32px; gap: 0; }
  .what-left { width: 100%; gap: 10px; }
  .what-title { font-size: 72px; flex-direction: row; flex-wrap: wrap; column-gap: 14px; line-height: .95; }
  .what-lead { font-size: 16px; }
  .what-counter b { font-size: 36px; }
  .what-left .gg-btn { position: absolute; right: 0; bottom: 0; display: none; }
  .what-stack { flex: none; width: 100%; height: 50vh; margin-top: 24px; }
  .svc-slot { width: 100%; }
  .svc-slot--1 { transform: rotate(2.5deg); }
  .svc-slot--2 { left: 0; transform: rotate(-1.5deg); }
  .svc-slot--3 { transform: rotate(1deg); }
  .svc-slot--4 { left: 0; transform: rotate(-2deg); }
  .svc-card { padding: 22px 22px 24px; gap: 14px; }
  .svc-name { font-size: 30px; }
  .svc-desc { font-size: 14px; }
  .svc-tags li { font-size: 12px; padding: 5px 10px; }

  /* Marquee */
  .gg-marquee { height: 130px; }
  .mq-band { height: 44px; }
  .mq-band--purple { top: 20px; }
  .mq-band--lilac { top: 56px; }
  .mq-track { font-size: 16px; }

  /* Works */
  .gg-works { padding: 72px 20px 96px; }
  .works-fore { margin: 28px -20px 0; padding: 28px 20px 0; }
  .works-head { margin-bottom: 24px; }
  .works-head h2 { font-size: 22px; }
  .works-ctrl > .mono { display: none; }
  .works-arrow { width: 40px; height: 40px; }
  .work-title { font-size: 17px; }
  .work-all { min-height: 300px; padding: 28px; }
  .work-all-title { font-size: 26px; }

  /* FAQ */
  .gg-faq { padding: 80px 20px; }
  .faq-row { flex-direction: column; gap: 40px; }
  .faq-left { position: static; }
  .faq-title { font-size: 30px; }
  .faq-list { width: 100%; flex: none; }
  .faq-q { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .gg-hero { height: auto; }
  .gg-hero-stage { position: relative; height: 100svh; }
}

/* JS 가 올라오기 전에 FAQ 목록·제목을 숨겨 깜박임을 막음 (gg-motion 일 때만) */
.gg-motion .faq-item { opacity: 0; }
.gg-motion #faqTitle { visibility: hidden; }
.gg-motion .who-title, .gg-motion .who-visual, .gg-motion .who-card, .gg-motion .what-left { opacity: 0; }