/* 몽글동글 회사 사이트
 *
 * 빌드가 없다. 이 파일이 곧 배포되는 파일이다.
 *
 * ── 어디에 맞췄나 ────────────────────────────────────────
 * mgdg.mongledongle.com(몽글동글 서비스 랜딩)의 언어를 따른다. 회사와 서비스가
 * 따로 노는 것보다, 같은 손에서 나온 것처럼 보이는 편이 낫다.
 *
 *   바탕 #FAFAFE      아주 옅은 라벤더가 도는 흰색
 *   글자 #2D2B3D      순검정을 쓰지 않는다
 *   면   흰 카드 + 크고 옅은 그림자 + 큰 라운드
 *   버튼 알약(rounded-full)
 *   서체 Pretendard 한 벌. 굵기로 위계를 만든다
 *
 * 🔴 회사는 자기 색을 갖지 않는다.
 *    첫 화면의 흐린 원 두 개가 두 앱의 색이고, 카드도 각자 자기 색을 옅게
 *    두른다. 회사가 한 색을 가지면 나머지 앱이 그 아래로 들어간다.
 *    앱이 늘면 `--tint`/`--deep` 두 줄과 <article> 하나를 더한다.
 *
 * 다크 모드는 만들지 않는다(2026-08-02 결정). 밝은 화면 하나만 잘 만든다.
 */

@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/PretendardVariable.woff2") format("woff2-variations");
}

:root {
  --bg:        #fafafe;
  --surface:   #ffffff;
  --line:      #ecebf3;

  --tx-1: #2d2b3d;
  --tx-2: #6e6b7b;
  --tx-3: #726f7f;   /* 4.6:1 - 보조 글자도 기준을 넘긴다 */

  /* 🔴 앱 색이 두 벌인 이유 - 글자용과 장식용은 같을 수 없다.
     `deep`(연한 쪽)은 예쁘지만 흰 바탕에서 4.0:1 · 3.3:1 뿐이라 **작은
     글자에 쓰면 안 읽힌다.** 그래서 글자에는 `ink`(진한 쪽)를 쓰고,
     `deep` 은 점·테두리·그라디언트처럼 못 읽어도 되는 곳에만 쓴다.
     기준 사이트도 연한 쪽을 글자에 쓰고 있는데, 그 결함까지 따라가지 않는다. */
  --mongle-ink:  #6f4cae;   /* 흰면 6.3:1 · 라벤더칩 5.6:1 */
  --mongle-deep: #8b6bc9;   /* 장식 전용 */
  --mongle-tint: #f3eefc;
  --dialog-ink:  #2b7a58;   /* 흰면 5.2:1 · 민트칩 4.7:1 */
  --dialog-deep: #3f9a72;   /* 장식 전용 */
  --dialog-tint: #e9f6ef;

  /* 그림자는 한 축으로만 키운다. 세 단계면 충분하다. */
  --sh-1: 0 1px 3px rgb(45 43 61 / 0.04), 0 6px 16px -6px rgb(45 43 61 / 0.06);
  --sh-2: 0 2px 6px rgb(45 43 61 / 0.05), 0 16px 34px -12px rgb(45 43 61 / 0.11);
  --sh-3: 0 3px 10px rgb(45 43 61 / 0.07), 0 26px 50px -16px rgb(45 43 61 / 0.16);

  --r-card: 24px;
  --r-pill: 999px;

  --page: 68rem;                      /* 본문 최대 폭 */
  --pad:  clamp(1.25rem, 5vw, 2.5rem);
  --sec:  clamp(4.5rem, 10vw, 7.5rem); /* 섹션 위아래 여백 */

  --ease: cubic-bezier(0.22, 0.68, 0.28, 1);
}

/* ── 바탕 ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx-1);
  font-family: "Pretendard Variable", -apple-system, BlinkMacSystemFont,
               system-ui, "Apple SD Gothic Neo", sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-break: keep-all;      /* 한글은 단어 중간에서 끊지 않는다 */
  overflow-wrap: anywhere;   /* 단, 긴 메일주소·URL 은 끊어야 안 넘친다 */
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--mongle-ink);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 60;
  background: var(--surface); padding: 0.6rem 1rem;
  border-radius: var(--r-pill); box-shadow: var(--sh-2);
}

/* ── 공통 조각 ───────────────────────────────────────── */
.eyebrow {
  margin: 0 0 0.9rem;
  font-size: 0.8rem;
  font-weight: 620;
  letter-spacing: 0.02em;
  color: var(--mongle-ink);
}

.head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.head h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3.6vw, 2.25rem);
  font-weight: 780;
  letter-spacing: -0.032em;
  line-height: 1.35;
}
.head__sub { margin: 0.7rem 0 0; color: var(--tx-2); font-size: 1rem; }

/* 두 앱의 색을 잇는 그라디언트. 회사를 뜻하는 유일한 장식이다. */
.grad {
  background: linear-gradient(96deg, var(--mongle-deep) 8%, var(--dialog-deep) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.82rem 1.6rem;
  border-radius: var(--r-pill);
  font-size: 0.95rem;
  font-weight: 640;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
              background-color 0.2s var(--ease);
}
.btn--fill {
  background: var(--tx-1);
  color: #fff;
  box-shadow: var(--sh-2);
}
.btn--fill:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
.btn--ghost {
  background: var(--surface);
  color: var(--tx-1);
  box-shadow: var(--sh-1);
}
.btn--ghost:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.btn--lg { padding: 1rem 2rem; font-size: 1.02rem; }

@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
}

/* ── 머리 ────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.nav[data-scrolled="true"] {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}
.nav__in {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0.95rem var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 1rem;
  font-weight: 760;
  letter-spacing: -0.028em;
  text-decoration: none;
}
/* 마크는 assets/mark.svg 한 곳에만 있다. 파비콘도 같은 파일을 복사한 것이다.
   여기서 색을 다시 정하지 않는다 - 두 곳에서 색을 정하면 언젠가 갈라진다. */
.brand__mark {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}
.nav nav { display: flex; gap: clamp(0.9rem, 2.5vw, 1.85rem); font-size: 0.9rem; }
.nav nav a {
  color: var(--tx-2);
  text-decoration: none;
  font-weight: 520;
  transition: color 0.18s var(--ease);
}
.nav nav a:hover { color: var(--tx-1); }

/* ── 첫 화면 ─────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 11vw, 8rem) var(--pad) clamp(4rem, 9vw, 6.5rem);
  text-align: center;
}

/* 흐린 원 둘 = 두 앱. 배경이 평평하지 않게 하고, 동시에 "회사는 두 앱의
   합" 이라는 말을 색으로만 한다. 장식이 아니라 이 페이지의 유일한 그림이다. */
.orbs { position: absolute; inset: 0; pointer-events: none; }
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(76px);
  opacity: 0.55;
}
.orb--m {
  width: 34rem; height: 34rem;
  top: -13rem; left: -9rem;
  background: radial-gradient(circle, #c9b3ef 0%, transparent 68%);
}
.orb--d {
  width: 30rem; height: 30rem;
  top: -7rem; right: -8rem;
  background: radial-gradient(circle, #a8ddc3 0%, transparent 68%);
}

.hero__in { position: relative; max-width: 46rem; margin: 0 auto; }

.hero h1 {
  margin: 0;
  /* 굵기와 크기 도약으로 위계를 만든다. 본문은 400대, 표제는 800대. */
  font-size: clamp(2.15rem, 6.4vw, 3.9rem);
  font-weight: 830;
  line-height: 1.26;
  letter-spacing: -0.045em;
}
.hero__sub {
  margin: 1.4rem auto 0;
  max-width: 34rem;
  color: var(--tx-2);
  font-size: clamp(0.98rem, 2vw, 1.1rem);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

/* 좁은 화면에서만 줄바꿈한다. 넓은 화면에서는 한 줄이 자연스럽다. */
.br-sm { display: none; }
@media (max-width: 30rem) { .br-sm { display: inline; } }

/* ── 앱 카드 ─────────────────────────────────────────── */
.apps { max-width: var(--page); margin: 0 auto; padding: var(--sec) var(--pad); }

.cards {
  display: grid;
  /* min() 이 없으면 320px 화면에서 카드가 화면보다 넓어져 가로 스크롤이 생긴다.
     minmax 의 최소값은 컨테이너보다 작아질 수 없기 때문이다. */
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }

.card--mongle { --tint: var(--mongle-tint); --ink: var(--mongle-ink); --deep: var(--mongle-deep); }
.card--dialog { --tint: var(--dialog-tint); --ink: var(--dialog-ink); --deep: var(--dialog-deep); }

/* 카드 윗면이 그 앱의 색이다. 아이콘 하나만 놓는다. */
.card__top {
  display: grid;
  place-items: center;
  padding: clamp(2rem, 4vw, 2.75rem);
  background: var(--tint);
}
.card__icon {
  width: clamp(4.5rem, 9vw, 5.5rem);
  border-radius: 24%;
  box-shadow: var(--sh-2);
}

.card__body { padding: clamp(1.5rem, 3vw, 2rem); }
.card__kind {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 620;
  color: var(--ink);
}
.card__body h3 {
  margin: 0 0 0.7rem;
  font-size: clamp(1.35rem, 3vw, 1.6rem);
  font-weight: 790;
  letter-spacing: -0.032em;
}
.card__desc { margin: 0 0 1.35rem; color: var(--tx-2); font-size: 0.95rem; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.chips li {
  padding: 0.34rem 0.8rem;
  border-radius: var(--r-pill);
  background: var(--tint);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 580;
}

.stores { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.store {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.6rem 1.05rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
              transform 0.2s var(--ease);
}
.store svg { width: 1.05em; height: 1.05em; fill: currentColor; flex: none; }
.store:hover { color: var(--ink); border-color: var(--ink); transform: translateY(-1px); }

/* 아직 공개되지 않은 스토어. **링크가 아니다** - 누르면 404 가 나오므로
   `<span>` 으로 두고 여기서 눌러지지 않는다는 것을 눈으로도 알린다.
   글자색은 보조 글자 기준(4.6:1)을 그대로 쓴다 - 흐리게 보이자고
   못 읽는 색을 쓰지 않는다. */
.store--soon {
  color: var(--tx-3);
  background: transparent;
  border-style: dashed;
  cursor: default;
}
.store--soon:hover { color: var(--tx-3); border-color: var(--line); transform: none; }

/* ── 문의 ────────────────────────────────────────────── */
.contact { max-width: var(--page); margin: 0 auto; padding: 0 var(--pad) var(--sec); }
.contact__panel {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(2.75rem, 7vw, 4.5rem) clamp(1.5rem, 5vw, 3rem);
  border-radius: 32px;
  background:
    radial-gradient(120% 150% at 12% 0%, var(--mongle-tint) 0%, transparent 58%),
    radial-gradient(120% 150% at 88% 100%, var(--dialog-tint) 0%, transparent 58%),
    var(--surface);
  box-shadow: var(--sh-2);
}
.contact__panel h2 {
  margin: 0;
  font-size: clamp(1.45rem, 3.4vw, 2rem);
  font-weight: 790;
  letter-spacing: -0.032em;
  line-height: 1.35;
}
.contact__panel p { margin: 0.7rem 0 1.9rem; color: var(--tx-2); }

/* ── 꼬리 ────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); background: var(--surface); }
.foot__in { max-width: var(--page); margin: 0 auto; padding: clamp(2.5rem, 5vw, 3.5rem) var(--pad); }
.foot__brand {
  display: flex; align-items: center; gap: 0.55em;
  font-weight: 740; letter-spacing: -0.028em;
  margin-bottom: 2rem;
}
.foot__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: 1.75rem;
  font-size: 0.9rem;
}
.foot__cols h4 {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--tx-3);
}
.foot__cols a {
  display: block;
  padding: 0.22rem 0;
  color: var(--tx-2);
  text-decoration: none;
  transition: color 0.18s var(--ease);
}
.foot__cols a:hover { color: var(--tx-1); }
.foot__cols p { margin: 0.4rem 0 0; color: var(--tx-3); }
.foot__copy { margin: 2.5rem 0 0; font-size: 0.82rem; color: var(--tx-3); }

/* ── 좁은 화면 ───────────────────────────────────────── */
@media (max-width: 34rem) {
  .hero__cta .btn { flex: 1 1 100%; }
  .nav nav { font-size: 0.85rem; }
}

/* ── 등장 ────────────────────────────────────────────
   🔴 첫 화면에서 한 번만 움직인다. 스크롤할 때마다 요소가 떠오르는
      연출은 넣지 않는다 - 읽기를 방해하고 어디서나 보이는 연출이다.  */
@media (prefers-reduced-motion: no-preference) {
  .hero__in > * { animation: rise 0.7s var(--ease) backwards; }
  .hero__in > h1          { animation-delay: 0.05s; }
  .hero__in > .hero__sub  { animation-delay: 0.14s; }
  .hero__in > .hero__cta  { animation-delay: 0.23s; }
  .orb { animation: fade 1.4s var(--ease) backwards; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 0.55; }
}