/*
 * WalkLingo 홍보 사이트
 *
 * 흑백만 쓴다. 앱이 그렇게 생겼고, 색을 하나 들이면 그때부터 색을 관리해야 한다.
 * 대비는 색이 아니라 **여백과 굵기**로 만든다.
 *
 * 그림은 앱 온보딩에 쓰는 선화를 그대로 가져왔다. 따로 그린 일러스트를 쓰면
 * 사이트에서 본 것과 앱에서 만나는 것이 달라진다.
 */

/* ── 바탕값 ─────────────────────────────────────────────────── */

:root {
  --ink: #0d0d0f;
  --ink-2: #3a3a40;
  --ink-3: #74747c;
  --line: #e6e6ea;
  --wash: #f6f6f8;
  --paper: #ffffff;

  --shell: 1160px;
  --gut: clamp(20px, 5vw, 48px);

  --font: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR",
    sans-serif;

  /* 한 박자. 여기저기서 같은 속도를 쓰면 사이트가 한 몸처럼 움직인다. */
  --beat: 620ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  /* body에만 걸면 판에 따라 문서 폭이 늘어난 채로 남는다. 둘 다 잠근다. */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.shell--narrow { max-width: 760px; }

/* 눈으로 볼 일은 없지만 키보드로 오는 사람에게는 첫 칸이다. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

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

/* ── 글자 ───────────────────────────────────────────────────── */

.display,
.h1,
.h2 {
  color: var(--ink);
  font-weight: 800;
  /* 큰 글씨는 자간을 좁혀야 덩어리로 읽힌다. 기본값 그대로면 성기게 벌어진다. */
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

.display { font-size: clamp(2.9rem, 7.4vw, 5.5rem); }
.h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.15; }
.h2 { font-size: clamp(1.5rem, 2.9vw, 2.15rem); line-height: 1.25; }

/* 유일한 강조. 색 대신 밑줄 한 획으로 준다. */
.display em {
  font-style: normal;
  position: relative;
  white-space: nowrap;
}
.display em::after {
  content: "";
  position: absolute;
  left: -0.02em;
  right: -0.02em;
  bottom: -0.03em;
  height: 0.09em;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease) 400ms;
}
.display.is-in em::after { transform: scaleX(1); }

.eyebrow {
  margin: 0 0 18px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.lede {
  margin: 26px 0 0;
  font-size: clamp(1.02rem, 1.5vw, 1.17rem);
  color: var(--ink-2);
  max-width: 34ch;
}

/* ── 단추 ───────────────────────────────────────────────────── */

.btn {
  --bg: var(--ink);
  --fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  border: 1px solid var(--bg);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font-size: 0.97rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: transform 200ms var(--ease), background 200ms, color 200ms;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  --bg: transparent;
  --fg: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--ink); }

.btn--invert {
  --bg: #fff;
  --fg: var(--ink);
}

.btn--sm { padding: 10px 20px; font-size: 0.88rem; }

/* ── 머리띠 ─────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  /* 맨 위에서는 선이 없다가 스크롤하면 생긴다. 늘 있으면 히어로가 잘려 보인다. */
  border-bottom: 1px solid transparent;
  transition: border-color 260ms;
}
.nav.is-stuck { border-bottom-color: var(--line); }

.nav__in {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
}


.nav__links {
  display: flex;
  gap: 26px;
  margin-left: auto;
  font-size: 0.93rem;
  font-weight: 600;
}
.nav__links a {
  color: var(--ink-2);
  text-decoration: none;
  transition: color 180ms;
}
.nav__links a:hover { color: var(--ink); }

@media (max-width: 800px) {
  .nav__links { display: none; }
  .nav__in > .btn { margin-left: auto; }
}

/* ── 히어로 ─────────────────────────────────────────────────── */

.hero {
  padding: clamp(56px, 9vw, 112px) 0 clamp(48px, 7vw, 88px);
}
.hero__in {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 38px;
}
.hero__note {
  margin: 20px 0 0;
  font-size: 0.9rem;
  color: var(--ink-3);
}

.hero__art { position: relative; justify-self: center; }
.hero__art img { width: min(100%, 520px); }

/* 말풍선. 그림이 "말하고 있다"는 것을 한 번 더 말해 준다. */
.hero__bubble {
  position: absolute;
  right: -8px;
  top: 4%;
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 16px 16px 16px 4px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(13, 13, 15, 0.07);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  animation: float 5s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@media (max-width: 900px) {
  .hero__in { grid-template-columns: 1fr; }
  .hero__art { order: -1; }
  .hero__art img { width: min(74%, 340px); margin-inline: auto; }
  .lede { max-width: none; }
}

/* 아주 좁은 기기. 말풍선이 nowrap이라 그냥 두면 화면 밖으로 나간다. */
@media (max-width: 420px) {
  .hero__bubble {
    right: 0;
    padding: 9px 13px;
    font-size: 0.82rem;
  }
  .hero__cta .btn { flex: 1 1 auto; }
}

/* ── 흐르는 띠 ──────────────────────────────────────────────── */

.ticker {
  border-block: 1px solid var(--line);
  padding: 20px 0;
  overflow: hidden;
  /* 양끝을 흐리게 해 잘린 티가 안 나게 한다. */
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.ticker__track {
  display: flex;
  align-items: center;
  gap: 30px;
  width: max-content;
  animation: slide 42s linear infinite;
}
.ticker span {
  font-size: clamp(1.1rem, 2.1vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.ticker i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line);
  flex: none;
}
@keyframes slide {
  from { transform: translateX(0); }
  /* 목록을 두 벌 이어 붙였으므로 절반만 밀면 이음매가 안 보인다. */
  to { transform: translateX(-50%); }
}

/* ── 반전 블록 ──────────────────────────────────────────────── */

.invert {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.78);
  padding: clamp(72px, 11vw, 132px) 0;
}
.invert .h2 { color: #fff; }
.invert b { color: #fff; font-weight: 700; }

.split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.split__body p { margin: 0 0 18px; }
.split__body p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
}

/* ── 구획 ───────────────────────────────────────────────────── */

.section { padding: clamp(72px, 9vw, 116px) 0; }
.section--tight { padding-top: 0; }

/* ── 세 걸음 ────────────────────────────────────────────────── */

.steps {
  list-style: none;
  margin: clamp(40px, 6vw, 68px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.step {
  padding: 34px 30px 8px 0;
  border-right: 1px solid var(--line);
}
.step:last-child { border-right: 0; padding-right: 0; }
.step:not(:first-child) { padding-left: 30px; }

.step__no {
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.step h3 {
  margin: 14px 0 10px;
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.step p { margin: 0; font-size: 0.98rem; }

@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; }
  .step {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 28px 0;
  }
  .step:not(:first-child) { padding-left: 0; }
  .step:last-child { border-bottom: 0; }
}

/* ── 기능 줄 ────────────────────────────────────────────────── */

.feat {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(24px, 5vw, 76px);
  align-items: center;
  padding: clamp(44px, 6vw, 72px) 0;
  border-top: 1px solid var(--line);
}
.feat--flip .feat__art { order: 2; }

.feat__art {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--wash);
  border-radius: 26px;
}
.feat__art img { width: 68%; }

.feat__copy p { margin: 0 0 18px; max-width: 46ch; }
.feat__copy .h2 { margin-bottom: 16px; }

.ticks {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.ticks li {
  position: relative;
  padding-left: 26px;
  font-size: 0.97rem;
  color: var(--ink-2);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 14px;
  height: 1.5px;
  background: var(--ink);
}

@media (max-width: 860px) {
  .feat { grid-template-columns: 1fr; }
  .feat--flip .feat__art { order: 0; }
  .feat__art { aspect-ratio: 16 / 10; }
  .feat__art img { width: 46%; }
}

/* ── 언어 ───────────────────────────────────────────────────── */

.langs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: clamp(28px, 4vw, 44px);
}
.lang-card {
  padding: 34px 30px;
  border: 1px solid var(--line);
  border-radius: 22px;
  transition: border-color 240ms, transform 240ms var(--ease);
}
.lang-card:hover { border-color: var(--ink); transform: translateY(-3px); }

.lang-card__native {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.lang-card h3 {
  margin: 18px 0 6px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
}
.lang-card p { margin: 0; font-size: 0.92rem; color: var(--ink-3); }

.langs__note {
  margin: 26px 0 0;
  font-size: 0.92rem;
  color: var(--ink-3);
}

@media (max-width: 760px) {
  .langs { grid-template-columns: 1fr; }
}

/* ── FAQ ────────────────────────────────────────────────────── */

.faq { margin-top: clamp(28px, 4vw, 44px); }

.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  /* ::before(세로 획)가 이 상자를 기준으로 자리잡아야 한다. 없으면 훨씬 위쪽
     조상을 기준으로 잡혀 화면 구석에 가서 붙는다. */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }

/* 더하기 → 빼기. 아이콘 파일 없이 선 두 개로 만든다. */
.faq summary::after {
  content: "";
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  /* 가로 획은 늘 있고, 세로 획만 접힌다. */
  background: linear-gradient(var(--ink), var(--ink)) center/14px 1.5px no-repeat;
}
.faq summary::before {
  content: "";
  position: absolute;
  right: 6.25px;
  top: 50%;
  margin-top: -7px;
  width: 1.5px;
  height: 14px;
  background: var(--ink);
  transition: transform 300ms var(--ease);
}
.faq details[open] summary::before { transform: scaleY(0); }

.faq details p {
  margin: 0;
  padding: 0 0 26px;
  max-width: 62ch;
  color: var(--ink-2);
}

/* ── 마지막 부름 ────────────────────────────────────────────── */

.get {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.7);
  padding: clamp(84px, 13vw, 156px) 0;
  text-align: center;
}
.get .display { color: #fff; }
.get .display em::after { background: #fff; }
.get > .shell > p { margin: 24px 0 0; font-size: 1.05rem; }

.get__cta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}
.get__soon {
  margin: 22px 0 0;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.45);
  transition: color 250ms, transform 250ms var(--ease);
}
/* 아직 링크가 없는 배지를 눌렀을 때 이 줄이 한 번 밝아진다 —
   눌렸는데 아무 일도 안 일어나면 고장으로 읽힌다. */
.get__soon.is-flash {
  color: #fff;
  transform: scale(1.06);
}

/* ── 스토어 배지 ────────────────────────────────────────────── */

/*
 * 애플과 구글이 주는 공식 배지를 그대로 쓴다. 모양·비율·여백이 각자의 지침에
 * 묶여 있어서, 우리가 다시 그리면 안 된다. 높이만 맞추고 나머지는 건드리지
 * 않는다.
 */
.store {
  display: inline-flex;
  border-radius: 10px;
  transition: transform 200ms var(--ease), opacity 200ms;
}
.store:hover { transform: translateY(-2px); }
.store img {
  height: 54px;
  width: auto;
}
/* 애플 배지는 SVG라 여백이 딱 맞고, 구글 배지는 PNG에 여백이 들어 있다.
   같은 높이로 두면 구글 쪽이 작아 보여서 조금 키워 눈으로 맞춘다. */
.store[data-store="android"] img { height: 66px; margin: -6px; }

/* ── 언어 고르개 ────────────────────────────────────────────── */

.lang { position: relative; }

.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 180ms, color 180ms;
}
.lang__btn:hover { color: var(--ink); border-color: var(--line); }

.lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 148px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(13, 13, 15, 0.12);
  /* 닫혀 있을 때는 화면 낭독기에서도 빠져야 한다. */
  display: none;
}
.lang.is-open .lang__menu { display: block; }

.lang__menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
}
.lang__menu a:hover { background: var(--wash); color: var(--ink); }
.lang__menu a[aria-current] { color: var(--ink); background: var(--wash); }

@media (max-width: 800px) {
  .lang { margin-left: auto; }
  .lang__btn span { display: none; }
  .nav__in > .btn { margin-left: 0; }
}

/* ── 바닥 ───────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--line); padding: 40px 0; }
.foot__in {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.foot__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.foot__links {
  display: flex;
  gap: 22px;
  margin-left: auto;
  font-size: 0.9rem;
}
.foot__links a { color: var(--ink-3); text-decoration: none; }
.foot__links a:hover { color: var(--ink); }
.foot__copy {
  margin: 0;
  font-size: 0.86rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) {
  .foot__links { margin-left: 0; order: 3; width: 100%; }
}

/* ── 법적 문서 ──────────────────────────────────────────────── */
/*
 * 약관과 처리방침. 읽히려고 만든 것이지 채워 넣으려고 만든 것이 아니다.
 * 글줄을 좁게(.shell--narrow) 잡고, 글자를 홈보다 조금 키우고, 조항 사이를
 * 넉넉히 벌린다 — 빽빽한 약관은 안 읽는 쪽이 정상이 된다.
 */
.doc { padding: 118px 0 40px; }

.doc__dates {
  margin-top: 10px;
  font-size: 0.86rem;
  color: var(--ink-3);
}

.doc__lede {
  margin-top: 18px;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-2);
}

.doc__toc {
  margin: 36px 0 8px;
  padding: 22px 26px;
  background: var(--wash);
  border-radius: 16px;
}

.doc__toc-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.doc__toc ol {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.doc__toc a {
  display: block;
  padding: 5px 0;
  font-size: 0.94rem;
  color: var(--ink-2);
  text-decoration: none;
}

.doc__toc a:hover { color: var(--ink); text-decoration: underline; }

.doc__sec {
  margin-top: 44px;
  /* 목차에서 뛰어왔을 때 붙박이 머리띠에 제목이 가리지 않게. */
  scroll-margin-top: 96px;
}

.doc__sec h2 {
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--ink);
}

/* 조항 제목이 곧 그 조항으로 가는 링크다. 남에게 "9조 보세요"라고 할 때
   주소를 만들 방법이 이것뿐이다. 평소엔 링크처럼 안 보이게 둔다. */
.doc__sec h2 a { color: inherit; text-decoration: none; }
.doc__sec h2 a:hover { text-decoration: underline; }

.doc__sec p,
.doc__sec li {
  margin-top: 12px;
  font-size: 0.97rem;
  line-height: 1.78;
  color: var(--ink-2);
}

.doc__sec ul {
  margin: 6px 0 0;
  padding-left: 20px;
}

.doc__sec li { padding-left: 4px; }

.doc__table {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.doc__table th,
.doc__table td {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.65;
}

.doc__table tr:last-child th,
.doc__table tr:last-child td { border-bottom: 1px solid var(--line); }

.doc__table th {
  width: 34%;
  font-weight: 700;
  color: var(--ink);
}

.doc__table td { color: var(--ink-2); }

.doc__foot {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-3);
}

@media (max-width: 640px) {
  .doc { padding-top: 100px; }
  .doc__toc { padding: 18px 20px; }
  /* 좁은 화면에서 두 칸을 나란히 두면 둘 다 못 읽는다. 위아래로 편다. */
  .doc__table,
  .doc__table tbody,
  .doc__table tr,
  .doc__table th,
  .doc__table td { display: block; width: auto; }
  .doc__table th { border-top: 1px solid var(--line); padding-bottom: 0; }
  .doc__table td { border-top: 0; padding-top: 4px; }
  .doc__table tr:last-child td { border-bottom: 1px solid var(--line); }
}

/* ── 나타나기 ───────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--beat) var(--ease),
    transform var(--beat) var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* 한 덩어리 안에서 조금씩 늦춰 들어오면 시선이 따라온다. */
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }

/*
 * 움직임을 줄여 달라고 한 사람에게는 전부 끈다.
 * 나타나기를 끌 때는 **보이는 상태로** 끝나야 한다 — 안 그러면 글이 통째로
 * 사라진다.
 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .display em::after { transform: scaleX(1); transition: none; }
  .ticker__track,
  .hero__bubble { animation: none; }
  .btn:hover,
  .lang-card:hover { transform: none; }
}