@charset "utf-8";
/* ───────────────────────────────────────────────
   같이그림스튜디오 2026 — layout
   공통 헤더, 모바일 메뉴, 푸터
   ─────────────────────────────────────────────── */

/* ───────── 헤더 ───────── */
.gg-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 7000;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  padding: 24px 40px 0;
  pointer-events: none;           /* 빈 곳은 클릭이 아래로 통과 */
}
.gg-header > * { pointer-events: auto; }

.gg-logo { justify-self: start; margin-top: 16px; transition: transform .6s var(--ease-out), opacity .6s var(--ease-out); }
.gg-logo img { width: 140px; height: auto; }

/* 블랙 캡슐 메뉴 */
.gg-nav {
  position: relative; display: flex; gap: 4px; justify-self: center;
  padding: 6px; border-radius: 999px;
  background: var(--c-black);
  box-shadow: 4px 4px 0 var(--c-lilac);
}
.gg-nav a {
  position: relative; z-index: 1;
  padding: 10px 20px; border-radius: 999px;
  font-family: var(--f-mono); font-weight: 500; font-size: 15px; letter-spacing: -0.03em;
  color: var(--c-bg); white-space: pre;
  transition: padding .45s var(--ease-out);
}
.gg-nav a:hover, .gg-nav a:focus-visible { padding: 10px 14px; }   /* 호버 시 괄호 간격이 좁아짐 */
.gg-nav a:focus-visible { outline: 2px solid var(--c-lilac); outline-offset: 2px; }

/* 보라 알약: 호버한 메뉴로 미끄러져 이동. 현재 페이지에는 계속 남음 */
.gg-pill {
  position: absolute; top: 6px; bottom: 6px; left: 6px; width: 0;
  border-radius: 999px; background: var(--c-purple);
  opacity: 0;
  transition: left .5s var(--ease-out), width .5s var(--ease-out), opacity .3s;
}
.gg-pill.is-on { opacity: 1; }

/* 원형 스탬프 (문의 링크) */
.gg-stamp {
  position: relative; justify-self: end;
  display: grid; place-items: center;
  width: 112px; height: 112px; border-radius: 50%;
  background: var(--c-purple);
  box-shadow: 5px 5px 0 var(--c-lilac);
  transform: rotate(-8deg);
  transition: transform .6s var(--ease-out), opacity .6s var(--ease-out);
}
.gg-stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: ggSpin 14s linear infinite; }
.gg-stamp text { font-family: var(--f-mono); font-size: 10px; font-weight: 500; fill: var(--c-bg); letter-spacing: 0; }
.gg-stamp:hover svg { animation-play-state: paused; }
.gg-stamp .arr { position: relative; color: var(--c-lilac); font-family: var(--f-mono); font-size: 24px; transition: transform .45s var(--ease-out); }
.gg-stamp:hover .arr { transform: translateX(6px); }
@keyframes ggSpin { to { transform: rotate(360deg); } }

/* 스크롤 내리면 캡슐만 남고 로고·스탬프는 위로 빠짐 */
.gg-header.is-compact .gg-logo { transform: translateY(-140%); opacity: 0; pointer-events: none; }
.gg-header.is-compact .gg-stamp { transform: translateY(-140%) rotate(-8deg); opacity: 0; pointer-events: none; }

/* 모바일 메뉴 버튼·전체 화면 메뉴는 데스크톱에서 숨김 */
.gg-menu-btn { display: none; }
.gg-mmenu { display: none; }

/* ───────── 푸터 ───────── */
.gg-footer {
  display: flex; flex-direction: column; gap: 72px;
  padding: 96px var(--gutter) 48px;
  background: var(--c-footer);
  color: var(--c-bg);
  overflow: hidden;
}
.gg-footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.gg-footer-meta { display: flex; gap: 40px; font-size: 12px; }
.gg-footer-sns { display: flex; gap: 24px; font-size: 13px; font-weight: 500; color: var(--c-lilac); }
.gg-footer-sns a, .gg-footer-mail { transition: opacity .3s; }
.gg-footer-sns a:hover, .gg-footer-mail:hover { opacity: .7; }

.gg-footer-main { display: flex; align-items: center; gap: 64px; }
.gg-footer-symbol { flex: 0 0 540px; max-width: 100%; }
.gg-footer-symbol-svg { width: 100%; height: auto; overflow: visible; }
.gg-footer-symbol-svg .sym-cream { transform: translate(14px, 12px); }
.gg-footer-contact { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; min-width: 0; }
.gg-footer-title { font-size: 56px; font-weight: 700; line-height: 1.3; letter-spacing: -0.04em; }
.gg-footer-mail { font-size: 30px; font-weight: 500; color: var(--c-lilac); word-break: break-all; }
.gg-footer-buttons { display: flex; flex-wrap: wrap; gap: 16px; }

.gg-footer-bottom {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  padding-top: 24px; border-top: 1px solid var(--c-lilac);
  font-size: 13px; line-height: 1.6;
}
.gg-footer-bottom .mono { font-size: 12px; }

/* ───────── 태블릿·모바일 ───────── */
@media (max-width: 1100px) {
  .gg-header { padding: 20px 24px 0; }
  .gg-nav a { padding: 9px 14px; font-size: 14px; }
  .gg-footer-main { flex-direction: column; align-items: flex-start; gap: 40px; }
  .gg-footer-symbol { flex-basis: auto; width: min(420px, 100%); }
}

@media (max-width: 768px) {
  .gg-header { grid-template-columns: 1fr auto; align-items: center; padding: calc(14px + env(safe-area-inset-top, 0px)) 20px 0; }
  .gg-logo { margin-top: 0; }
  .gg-logo img { width: 96px; }
  .gg-nav, .gg-stamp { display: none; }
  .gg-menu-btn {
    display: inline-block; padding: 10px 18px; border-radius: 999px;
    background: var(--c-black); color: var(--c-bg);
    font-size: 13px; font-weight: 500; box-shadow: 3px 3px 0 var(--c-lilac);
  }
  /* 모바일은 스크롤해도 로고를 유지 */
  .gg-header.is-compact .gg-logo { transform: none; opacity: 1; pointer-events: auto; }

  /* 보라 전체 화면 메뉴 */
  .gg-mmenu {
    display: flex; flex-direction: column; justify-content: center;
    position: fixed; inset: 0; z-index: 7500;
    padding: 0 28px;
    background: var(--c-purple);
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path .7s var(--ease-out), visibility 0s .7s;
  }
  .gg-mmenu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .7s var(--ease-out); }
  .gg-mmenu-close {
    position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 20px;
    padding: 10px 18px; border-radius: 999px;
    background: var(--c-black); color: var(--c-bg); font-size: 13px; font-weight: 500;
  }
  .gg-mmenu nav { display: flex; flex-direction: column; gap: 14px; }
  .gg-mmenu nav a {
    font-family: var(--f-mono); font-weight: 500; font-size: 36px; letter-spacing: -0.03em; line-height: 1.2;
    color: var(--c-bg);
    transform: translateY(24px); opacity: 0;
    transition: transform .7s var(--ease-out), opacity .7s var(--ease-out), color .3s;
  }
  .gg-mmenu.is-open nav a { transform: none; opacity: 1; }
  .gg-mmenu.is-open nav a:nth-child(2) { transition-delay: .06s; }
  .gg-mmenu.is-open nav a:nth-child(3) { transition-delay: .12s; }
  .gg-mmenu.is-open nav a:nth-child(4) { transition-delay: .18s; }
  .gg-mmenu.is-open nav a:nth-child(5) { transition-delay: .24s; }
  .gg-mmenu nav a.is-active { color: var(--c-lilac); }

  /* 푸터 */
  .gg-footer { gap: 48px; padding: 64px 20px 32px; }
  .gg-footer-top { flex-direction: column; gap: 16px; }
  .gg-footer-meta { flex-direction: column; gap: 6px; }
  .gg-footer-symbol { width: 100%; }
  .gg-footer-title { font-size: 36px; }
  .gg-footer-mail { font-size: 20px; }
  .gg-footer-bottom { flex-direction: column; align-items: flex-start; }
}