/*
 * GIFLO 랜딩 페이지 (#127, #128)
 *
 * 시안 기준 폭은 셋이다. PC 는 콘텐츠 폭을 1080 으로 **고정**하고 배경만 좌우로 늘린다.
 *
 *   PC     1080 이상   — Figma 198:6864 / 푸터 198:7409
 *   Tablet 768~1079    — Figma 223:11111 / 푸터 223:12270
 *   Mobile 0~767       — Figma 223:13392 / 푸터 223:13997
 *
 * 기본 규칙은 모바일에 두지 않고 **PC 를 기본으로** 적었다. 시안이 PC 기준으로 그려졌고
 * 값이 가장 많아, 그쪽을 기본에 두면 미디어쿼리에서 덮는 양이 가장 적다.
 */

:root {
  --purple-500: #7b3af2;
  --purple-400: #6c2ae8;
  --purple-300: #ac70ff;
  --purple-050: #f3ebff;
  --gray-900: #111827;
  --gray-800: #1f2937;
  --gray-700: #374151;
  --gray-600: #4b5563;
  --gray-500: #6b7280;
  --gray-300: #d1d5db;
  --gray-200: #e8eaed;
  --gray-100: #f3f4f6;
  --white: #fff;

  /* 시안의 Purple Gra 01. 각도는 섹션마다 조금씩 다르다. */
  --grad-btn: linear-gradient(94deg, #7b3af2 0%, #ac70ff 100%);
  --grad-hero: linear-gradient(131deg, #7b3af2 28.358%, #ac70ff 95.156%);
  --grad-icon: linear-gradient(127deg, #7b3af2 28.358%, #ac70ff 95.156%);

  --content: 1080px;
  --header-h: 66px;

  /* 스크롤 등장 (#127). 토스 참고: 500~600ms, ease-out, 100ms 씩 밀어서. */
  --reveal-duration: 560ms;
  --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--gray-800);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "case" 1;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }

.w-regular { font-weight: 400; }
.w-medium { font-weight: 500; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--gray-900);
  color: var(--white);
}
.skip-link:focus { left: 8px; top: 8px; }

/* 헤더가 붙어 있어 앵커로 뛰면 제목이 그 밑에 깔린다. 그만큼 여유를 둔다. */
[id] { scroll-margin-top: var(--header-h); }
#main:focus { outline: none; }

:focus-visible { outline: 3px solid var(--purple-400); outline-offset: 2px; }

/* ── 버튼 ─────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  white-space: nowrap;
}

.btn--filled {
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--grad-btn);
  color: var(--white);
  font-size: 14px;
  line-height: 22px;
}

/* 히어로 위에 얹는 버튼. 배경이 보라라 반투명 흰색으로 띄운다. */
.btn--ghost {
  gap: 8px;
  padding: 12px 18px 12px 16px;
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: 72px;
  background: rgb(255 255 255 / 0.18);
  color: var(--white);
  font-size: 16px;
  line-height: 22px;
  transition: background 160ms ease-out;
}
.btn--ghost:hover { background: rgb(255 255 255 / 0.3); }

.btn--block { width: 100%; justify-content: center; padding: 14px 18px; font-size: 16px; }

/*
 * 스토어 버튼은 스크립트가 붙기 전까지 잠겨 있다. 눌러도 아무 일이 없는 버튼이 멀쩡해
 * 보이면 안 된다 — `main.js` 가 막히면 그대로 남는다(Codex).
 */
.btn[disabled] { opacity: 0.5; cursor: default; }

/* ── 헤더 ─────────────────────────────────────────────── */

.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--white);
}

.header__inner {
  position: relative;
  width: min(100%, var(--content));
  height: var(--header-h);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
}

.header__menu { display: none; border: 0; background: none; padding: 0 10px 0 0; cursor: pointer; }
.header__logo img { width: 140px; height: 38.5px; }

/* 시안에서 링크는 헤더 **전체 기준 가운데**다. 양 끝 슬롯에 같은 몫을 줘 맞춘다. */
.header__nav {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 42px;
  color: var(--gray-500);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.32;
}
.header__nav a { transition: color 140ms ease-out; }
.header__nav a:hover { color: var(--purple-400); }

.header__cta { margin-left: auto; }

/* ── 모바일 메뉴 패널 ─────────────────────────────────── */

.mobile-menu {
  position: absolute;
  inset: 0 0 auto;
  padding: 16px 20px 24px;
  background: var(--white);
  box-shadow: 0 12px 24px rgb(17 24 39 / 0.08);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.mobile-menu[hidden] { display: none; }
/* 넓은 화면에서는 어떤 경우에도 뜨지 않는다. JS 가 닫기 전이라도 마찬가지다. */
@media (min-width: 768px) { .mobile-menu { display: none; } }
.mobile-menu__close { align-self: flex-start; border: 0; background: none; padding: 0; cursor: pointer; }
.mobile-menu__nav { display: flex; flex-direction: column; gap: 22px; }
.mobile-menu__nav a { color: var(--gray-600); font-size: 16px; font-weight: 500; }

/* ── 스토어 드롭다운 ──────────────────────────────────── */

.store-dropdown {
  position: absolute;
  z-index: 60;
  min-width: 168px;
  padding: 6px;
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 8px 28px rgb(17 24 39 / 0.18);
}
.store-dropdown[hidden] { display: none; }

.store-dropdown__item {
  display: block;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--gray-800);
  font-size: 15px;
  font-weight: 500;
  transition: background 140ms ease-out;
}
.store-dropdown__item:hover { background: var(--purple-050); }

/* 스토어에 아직 안 올라간 항목. 누를 수 없다는 것이 보여야 한다. */
.store-dropdown__item[aria-disabled="true"] { color: var(--gray-500); cursor: default; }
.store-dropdown__item[aria-disabled="true"]:hover { background: none; }
/*
 * 상태는 CSS 로 붙이지 않고 **문서 안의 글자**로 둔다. `::after` 로 넣은 글자는 읽어 주는
 * 도구가 지나칠 수 있어, 잠긴 이유가 화면에만 보이고 소리로는 안 들렸다(Codex).
 */
.store-dropdown__state {
  float: right;
  margin-left: 12px;
  color: var(--gray-500);
  font-size: 13px;
}
.store-dropdown__state[hidden] { display: none; }

/*
 * 스토어에 아직 안 올라간 링크. 눌러도 아무 일이 없으므로 **눌러 보기 전에** 알아야 한다.
 * 드롭다운 항목뿐 아니라 큰 뱃지와 푸터 링크에도 같은 표시를 준다.
 */
[data-store-link][aria-disabled="true"] { cursor: default; }
.badge[aria-disabled="true"] { opacity: 0.45; filter: grayscale(1); }
.footer__col a[aria-disabled="true"] { color: var(--gray-500); }
.footer__col a[aria-disabled="true"]::after { content: " (준비 중)"; font-size: 0.86em; }
.footer__col a[aria-disabled="true"]:hover { color: var(--gray-500); }

.cta__note { margin-top: -14px; color: var(--gray-500); font-size: 15px; }
.cta__note[hidden] { display: none; }

/* ── section 1 · 히어로 ───────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--grad-hero);
}

/* 시안의 곡선 벡터. 이미지 대신 큰 타원으로 같은 인상을 만든다. */
.hero__glow {
  position: absolute;
  left: 50%;
  bottom: -46%;
  width: 1520px;
  height: 682px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  filter: blur(2px);
}

.hero__inner {
  position: relative;
  width: min(100%, var(--content));
  margin: 0 auto;
  padding: 60px 20px 0;
  height: 960px;
}

.hero__copy { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.hero__logo { width: 120px; height: 33px; }
.hero__title { color: var(--white); font-size: 48px; font-weight: 400; line-height: 1.28; }
.hero__title strong { font-weight: 700; }
.hero__sub { color: var(--gray-200); font-size: 22px; font-weight: 600; line-height: 1.28; }

.hero__copy > .store-menu { margin-top: 0; }

.hero__shots {
  position: absolute;
  left: 50%;
  top: 342px;
  transform: translateX(-50%);
  display: flex;
  gap: 36px;
  justify-content: center;
  width: 920px;
}
.hero__shots img { filter: drop-shadow(3.8px 12.6px 15.7px rgb(75 85 99 / 0.5)); }
.shot--a img { width: 342px; height: auto; }
/* 두 번째 화면은 시안대로 조금 내려 앉는다. */
.shot--b { padding-top: 92px; }
.shot--b img { width: 342px; height: auto; }

/* ── section 2 · 세 가지 강점 ─────────────────────────── */

.features { background: var(--purple-050); }

.features__inner {
  width: min(100%, var(--content));
  margin: 0 auto;
  padding: 80px 20px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
}

.feature {
  flex: 1 0 0;
  min-width: 0;
  padding: 36px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}
.feature__icon { width: 48px; height: 48px; }
.feature__title { color: var(--gray-800); font-size: 26px; font-weight: 800; line-height: 1.32; }
.feature__body { color: var(--gray-600); font-size: 17px; font-weight: 500; line-height: 1.42; }

.features__divider { align-self: center; width: 1px; height: 142px; background: var(--purple-300); opacity: 0.2; }

/* ── section 3 · 기능 소개 ────────────────────────────── */

.showcase {
  background: linear-gradient(180deg, #f3ebff 0%, #fff 12%, #fff 100%);
}

.showcase__row {
  width: min(100%, var(--content));
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.showcase > .showcase__row:first-child { padding-top: 120px; }
.showcase > .showcase__row + .showcase__row { margin-top: 100px; }
.showcase > .showcase__row:last-child { padding-bottom: 120px; }

.showcase__row--reverse { flex-direction: row-reverse; }

.showcase__media { width: 510px; display: flex; align-items: center; justify-content: flex-end; padding-right: 80px; }
.showcase__row--reverse .showcase__media { justify-content: flex-start; padding: 0 0 0 80px; }
.showcase__media img { filter: drop-shadow(3.9px 12.9px 16.1px rgb(75 85 99 / 0.5)); }
.showcase__media--wide img { filter: none; }

.showcase__copy { width: 510px; display: flex; flex-direction: column; gap: 16px; }
.showcase__copy--right { text-align: right; }
.showcase__title { color: var(--gray-800); font-size: 42px; font-weight: 800; line-height: 1.24; }
.showcase__body { color: var(--gray-600); font-size: 20px; font-weight: 400; line-height: 1.4; }
.showcase__body b { color: var(--purple-400); font-weight: 700; }

/* ── section 4 · 마무리 ───────────────────────────────── */

.cta { position: relative; overflow: hidden; background: var(--white); height: 560px; }

.cta__glow {
  position: absolute;
  left: 50%;
  top: calc(50% + 366px);
  width: 660px;
  height: 560px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(172 112 255 / 0.35), transparent 100%);
}

.cta__inner {
  position: relative;
  width: min(100%, 800px);
  margin: 0 auto;
  height: 100%;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  text-align: center;
}

.cta__icon { width: 92px; height: 92px; border-radius: 24px; }
.cta__title { color: var(--gray-700); font-size: 42px; font-weight: 500; line-height: 1.2; }
.cta__title strong { color: var(--purple-400); font-weight: 800; }
.cta__sub { color: var(--gray-600); font-size: 18px; font-weight: 500; line-height: 1.28; }
.cta__badges { margin-top: 14px; display: flex; gap: 12px; }
.badge img { width: 222.75px; height: 66px; }

/* ── 푸터 (#128) ──────────────────────────────────────── */

.footer { background: var(--gray-800); color: var(--white); }

.footer__inner {
  width: min(100%, var(--content));
  margin: 0 auto;
  padding: 72px 40px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

/* 워드마크 SVG 는 어두운 색 하나로 그려져 있다. 어두운 푸터 위에서는 흰색으로 뒤집어 쓴다. */
.footer__logo { width: 200px; height: 55px; filter: brightness(0) invert(1); }
.footer__slogan { margin-top: 18px; color: var(--white); font-size: 22px; font-weight: 400; }
.footer__slogan strong { font-weight: 700; }

.footer__links { display: flex; gap: 40px; text-align: right; }
.footer__col { min-width: 122px; }
.footer__label { color: var(--purple-300); font-size: 18px; font-weight: 900; line-height: 1.22; }
.footer__col ul { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.footer__col a { color: var(--gray-100); font-size: 18px; font-weight: 500; line-height: 1.22; transition: color 140ms ease-out; }
.footer__col a:hover { color: var(--purple-300); }

/* ── 스크롤 등장 (#127) ───────────────────────────────── */

/*
 * 아래에서 위로 올라오며 나타난다. 움직임은 `transform` 이 아니라 **`translate` 속성**으로
 * 준다 — 가운데 정렬에 `transform: translateX(-50%)` 를 쓰는 요소가 있어서, 같은 속성을
 * 애니메이션에 쓰면 정렬이 덮여 요소가 오른쪽으로 밀린다.
 */
/*
 * 시작 상태는 `html.js` 아래에서만 건다. JS 가 없거나 실패하면 아무것도 숨기지 않아
 * 정적 문서로서 그대로 읽힌다.
 */
.js [data-reveal] {
  opacity: 0;
  translate: 0 24px;
}
.js [data-reveal].is-in {
  opacity: 1;
  translate: none;
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              translate var(--reveal-duration) var(--reveal-ease);
  transition-delay: var(--reveal-delay, 0ms);
}

/* 움직임을 줄여 달라고 한 사용자에게는 애니메이션 없이 그대로 보여 준다. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; translate: none; }
  .js [data-reveal].is-in { transition: none; }
}

/* ── Tablet 768~1079 (Figma 223:11111) ────────────────── */

@media (max-width: 1079px) {
  .header__inner { padding: 0 16px; }
  .header__nav { gap: 36px; font-size: 16px; }

  .hero__inner { height: 860px; padding-top: 60px; }
  .hero__copy { gap: 22px; }
  .hero__title { font-size: 42px; }
  .hero__sub { font-size: 18px; }
  /* 시안(223:11127)에서 목업 둘은 36px 만 띄우고 가운데에 모인다. */
  .hero__shots { top: 316px; width: 728px; gap: 36px; }
  .shot--a img, .shot--b img { width: 245px; }
  .shot--b { padding-top: 80px; }

  .features__inner { padding: 60px 20px; gap: 12px; }
  .feature { padding: 36px 18px; gap: 14px; }
  .feature__icon { width: 40px; height: 40px; }
  .feature__title { font-size: 22px; }
  .feature__body { font-size: 14px; }

  .showcase > .showcase__row:first-child { padding-top: 100px; }
  .showcase > .showcase__row + .showcase__row { margin-top: 80px; }
  .showcase > .showcase__row:last-child { padding-bottom: 100px; }
  .showcase__row { gap: 20px; }
  .showcase__media, .showcase__copy { width: 354px; }
  .showcase__media { padding-right: 0; justify-content: center; }
  .showcase__row--reverse .showcase__media { padding-left: 0; justify-content: center; }
  .showcase__media img { width: 250px; }
  .showcase__media--wide img { width: 354px; }
  .showcase__title { font-size: 34px; }
  .showcase__body { font-size: 16px; }

  .cta { height: 480px; }
  .cta__title { font-size: 36px; }
  .cta__sub { font-size: 16px; }
  .badge img { width: 202.5px; height: 60px; }

  .footer__inner { padding: 72px 40px; }
  .footer__logo { width: 160px; height: 44px; }
  .footer__slogan { font-size: 20px; }
  .footer__label, .footer__col a { font-size: 17px; }
}

/* ── Mobile 0~767 (Figma 223:13392) ───────────────────── */

/* ── 정책 페이지 ──────────────────────────────────────
   `privacy.html` · `terms.html` · `licenses.html` 은 `sync-legal.mjs` 가 만든다.
   본문 마크업은 앱이 담아 배포하는 파일 그대로라 클래스가 없다. 태그로 받는다. */

.legal {
  max-width: 720px;
  /* 헤더가 붙어 있으므로 그 높이만큼 띄운다. */
  margin: calc(var(--header-h) + 40px) auto 96px;
  padding: 0 20px;
  color: var(--gray-700);
  font-size: 17px;
  line-height: 1.7;
}

.legal:focus { outline: none; }

.legal__title {
  margin: 0 0 32px;
  color: var(--gray-900);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.legal h2 {
  margin: 40px 0 12px;
  color: var(--gray-900);
  font-size: 20px;
  font-weight: 700;
}

.legal h3 {
  margin: 28px 0 10px;
  color: var(--gray-900);
  font-size: 17px;
  font-weight: 700;
}

/* 오픈소스 고지는 iOS 와 Android 의 내용이 다르다. 어느 앱 이야기인지 먼저 보이게 한다. */
.legal__platform {
  margin-top: 56px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gray-200);
  font-size: 24px;
}

.legal__platform:first-of-type { margin-top: 8px; }

.legal p { margin: 0 0 12px; }
/* 전역 리셋이 `list-style: none` 이다. 여기서는 되살린다 — 수집 항목이 몇 개인지
   글머리 기호 없이는 알아볼 수 없다. */
.legal ul { margin: 0 0 12px; padding-left: 22px; list-style: disc; }
.legal li { margin-bottom: 6px; }
.legal b { color: var(--gray-900); font-weight: 700; }
.legal a { color: var(--purple-400); }

/* 라이선스 원문은 줄바꿈이 정해져 있어 좁은 화면에서 밖으로 삐져나온다.
   페이지 전체가 옆으로 밀리지 않도록 이 블록 안에서만 스크롤한다. */
.legal pre {
  overflow-x: auto;
  margin: 0 0 12px;
  padding: 16px;
  border-radius: 12px;
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 767px) {
  /*
   * 링크를 감추고 메뉴 아이콘으로 대체한다(#127).
   *
   * **JS 가 있을 때만** 바꾼다. 햄버거는 스크립트로만 열리므로, 없는 채로 바꾸면 링크는
   * 사라지고 아이콘은 아무 일도 하지 않는다.
   */
  .js .header__menu { display: block; }
  .js .header__nav { display: none; }
  .header__logo img { width: 120px; height: 33px; }

  /* 스크립트가 없을 때의 헤더. 링크를 아래 줄로 흘려 좁은 폭에서도 다 보이게 한다. */
  html:not(.js) .header__inner { flex-wrap: wrap; height: auto; padding: 10px 16px; }
  html:not(.js) .header__nav {
    flex: 1 0 100%;
    order: 3;
    justify-content: flex-start;
    gap: 16px;
    padding-top: 8px;
    font-size: 14px;
  }

  .hero__inner { height: 820px; padding: 48px 20px 0; }
  .hero__copy { gap: 22px; }
  .hero__logo { width: 101.8px; height: 28px; }
  /* 시안은 두 줄이다. 저절로 접히면 "복잡한 편집 없이 빠르게 / GIF로" 로 갈라진다. */
  .hero__title { font-size: 36px; }
  .hero__title .w-regular { display: block; }
  .hero__sub { font-size: 14px; }

  .hero__shots { top: 328px; width: 100%; gap: 0; }
  .shot--a { margin-right: -76px; }
  .shot--a img, .shot--b img { width: 214px; }
  .shot--b { padding-top: 80px; }

  /* 세로로 쌓이고 구분선이 가로로 눕는다. */
  .features__inner { flex-direction: column; align-items: center; padding: 60px 20px; }
  .feature { width: 300px; flex: none; padding: 24px 0; }
  .feature__icon { width: 36px; height: 36px; }
  .feature__title { font-size: 20px; }
  .features__divider { width: 142px; height: 1px; }

  .showcase__row, .showcase__row--reverse { flex-direction: column; gap: 42px; }
  .showcase > .showcase__row:first-child { padding-top: 60px; }
  .showcase > .showcase__row + .showcase__row { margin-top: 80px; }
  .showcase > .showcase__row:last-child { padding-bottom: 60px; }
  .showcase__media, .showcase__copy { width: 100%; max-width: 354px; padding: 0; }
  .showcase__media img { width: 226px; }
  .showcase__media--wide img { width: 100%; max-width: 354px; }
  .showcase__copy, .showcase__copy--right { text-align: center; align-items: center; }
  .showcase__title { font-size: 28px; }
  .showcase__body { font-size: 15px; }

  .cta { height: 560px; }
  /* 시안은 "지금," 과 "무료로 만들어보세요" 가 두 줄이다. 저절로 접히면 "…만들어보세 / 요" 가 된다. */
  .cta__title { font-size: 36px; }
  .cta__title .w-medium:first-child { display: block; }
  .cta__sub { font-size: 16px; }
  .cta__sub span { display: block; }
  .badge img { width: 189px; height: 56px; }

  /* 브랜드가 위, 링크가 아래로 내려온다. */
  .footer__inner { flex-direction: column; padding: 48px 20px; gap: 32px; }
  .footer__logo { width: 144px; height: 39.6px; }
  .footer__slogan { font-size: 18px; }
  .footer__links { text-align: left; gap: 32px; }
  .footer__label, .footer__col a { font-size: 16px; }

  .legal { margin-top: calc(var(--header-h) + 24px); font-size: 16px; }
  .legal__title { font-size: 28px; }
  .legal h2 { font-size: 18px; }
}