/* ==========================================================================
   랜딩(index.html) — 스튜디오 레이아웃

   시안을 **값 그대로** 옮겼다: 흰 바탕, #051A24 / #0D212C, 지정된 다층 그림자,
   fadeInUp 0.8s + 0.1s 계단, 마퀴 30s/10s, rounded-[40px] 카드, 고정 하단 필,
   푸터·저작권 바. 색·간격·라운드·모션 길이는 시안 값이다.

   ⚠️ BRAND.md §4 와 충돌하는 지점(사용자 지시로 덮음. 되돌릴 땐 이 목록만 보면 된다):
     · 순백 배경 금지 → 시안은 흰 바탕이 전제다
     · 캡슐 라운드 금지 → 버튼·하단 필이 rounded-full
     · 450ms 초과 모션 금지 → fadeInUp 800ms, 마퀴 30s
     · 그라디언트/유리 금지 → primary 버튼의 inset 하이라이트
   토큰(--s*, 터치 바닥선, tabular-nums, RTL 격리, .langsw)은 tokens.css 를 계속 쓴다.
   제품 화면은 이 파일을 링크하지 않는다 — 여기는 판매 문서다.

   ⚠️ 글꼴: PP Neue Montreal 은 시안이 준 Webflow CDN 주소를 그대로 쓴다. PP Mondwest 는
   /PPMondwest-Regular.woff2 를 기대하는데 저장소에 그 파일이 없다 — 라이선스를 사서
   그 자리에 두면 즉시 켜진다. 그전까지는 Instrument Serif 가 세리프 액센트를 맡는다.
   상용 전에 둘 다 자체 호스팅할 것(남의 CDN + PDPL 을 파는 페이지).
   ========================================================================== */

/* ⚠️ 유료 글꼴 두 벌은 **아직 없다.** 그래서 @font-face 를 켜 두지 않는다 —
   프로덕션에서 매 방문마다 실패하는 요청이 남기 때문이다:
     · PP Neue Montreal: 시안이 준 Webflow 주소가 403 이고(자산이 내려갔다),
       그 호스트는 vercel.json 의 CSP `font-src` 에도 없어서 두 번 막힌다.
     · PP Mondwest: /PPMondwest-Regular.woff2 가 저장소에 없어 404.
   라이선스를 사서 woff2 를 dashboard/ 에 두고 아래 두 블록의 주석만 풀면 즉시 켜진다.
   글꼴 스택(--font-body / --font-accent)은 이 이름들을 **첫 항목으로 그대로 들고 있다**.
   그때까지는 Inter(본문) · Instrument Serif(액센트)가 같은 자리를 맡는다. */
/*
@font-face { font-family: 'PP Neue Montreal'; src: url('/PPNeueMontreal-Book.woff2') format('woff2');
  font-weight: 400; font-display: swap; }
@font-face { font-family: 'PP Neue Montreal'; src: url('/PPNeueMontreal-Medium.woff2') format('woff2');
  font-weight: 500; font-display: swap; }
@font-face { font-family: 'PP Mondwest'; src: url('/PPMondwest-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap; }
*/

:root {
  --ink-1: #051A24;   /* primary dark */
  --ink-2c: #0D212C;  /* secondary dark — 표제 */
  --on-dark: #F6FCFF;
  --on-dark-2: #E0EBF0;
  --muted: #273C46;
  --paper: #ffffff;

  /* ⚠️ 시안이 준 Webflow 주소는 지금 **403** 을 준다(2026-07-30 확인) — 그 자산은
     내려갔다. 그래서 PP Neue Montreal 은 자체 호스팅하기 전까지 절대 안 뜬다.
     그 자리를 Inter 가 받는다: Neue Montreal 과 같은 계열의 네오그로테스크라
     시안의 질감이 유지된다. 라이선스를 사서 woff2 를 올리면 첫 항목이 다시 이긴다. */
  --font-body: 'PP Neue Montreal', 'Inter', ui-sans-serif, -apple-system, system-ui,
               "Segoe UI", Roboto, "Noto Sans Arabic", Arial, sans-serif;
  --font-accent: 'PP Mondwest', 'Instrument Serif', Georgia, "Times New Roman", serif;
  --font-mono-s: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* 시안이 "critical for the design feel" 이라고 못박은 두 그림자. 값 그대로. */
  --sh-primary:
    0 1px 2px 0 rgba(5, 26, 36, .1),
    0 4px 4px 0 rgba(5, 26, 36, .09),
    0 9px 6px 0 rgba(5, 26, 36, .05),
    0 17px 7px 0 rgba(5, 26, 36, .01),
    0 26px 7px 0 rgba(5, 26, 36, 0),
    inset 0 2px 8px 0 rgba(255, 255, 255, .5);
  --sh-secondary: 0 0 0 .5px rgba(0, 0, 0, .05), 0 4px 30px rgba(0, 0, 0, .08);
  --sh-card: 0 4px 16px rgba(0, 0, 0, .08);
  --sh-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink-1);
  font-family: var(--font-body); line-height: 1.5;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
  /* 하단 고정 필이 마지막 줄을 덮지 않게 */
  padding-bottom: 96px;
  overflow-x: hidden;
}
.ac { font-family: var(--font-accent); font-weight: 400; }
/* 아랍어에 액센트 세리프를 물려주지 않는다: Mondwest·Instrument Serif 에 아랍 문자가
   없어 기기마다 다른 폴백으로 떨어진다. 자간도 0 이다 — 자간을 주면 이어 쓰는 글자의
   연결이 끊어져 낱자로 읽힌다(tokens.css .wordmark 주석과 같은 이유). */
[lang="ar"] .ac { font-family: var(--font-body); font-weight: 500; letter-spacing: 0; }

a { color: inherit; text-decoration: none; }

/* ── 공통 폭 ──────────────────────────────────────────────────────────── */
.pad { padding-inline: 24px; }
.w-1200 { max-width: 1200px; margin-inline: auto; }
.w-7xl { max-width: 1280px; margin-inline: auto; }
.w-4xl { max-width: 896px; }
.w-2xl { max-width: 672px; margin-inline: auto; }

/* ── 애니메이션 ────────────────────────────────────────────────────────
   시안 그대로. IntersectionObserver(threshold .1, once)가 클래스를 붙인다.
   붙기 전에는 opacity:0 이므로, JS 가 죽으면 글이 안 보인다 — studio.js 가
   맨 위에서 no-js 안전판을 켠다(그 주석 참고). */
@keyframes fadeInUp {
  0%   { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* .js 로 잠근다 — 스크립트가 죽거나 늦으면 글이 **보이는 쪽으로** 실패해야 한다.
   시안대로 .reveal 에 바로 opacity:0 을 주면 JS 하나가 넘어질 때 판매 문서가 백지가 된다. */
.js .reveal { opacity: 0; }
.reveal.animate-fade-in-up { animation: fadeInUp .8s ease-out forwards; }
/* 모션을 줄이는 설정에서는 tokens.css 가 duration 을 .01ms 로 누른다 —
   forwards 라 즉시 최종 상태로 끝난다. 과정만 사라지고 글은 남는다. */

/* ── 1. 히어로 ─────────────────────────────────────────────────────────
   좁은 칼럼(440px)이 이 시안의 골격이다. 표제는 칼럼보다 넓게 nowrap 으로 나가고,
   본문만 440px 에 갇힌다 — 그 대비가 전부다. */
/* ⚠️ tokens.css 의 표면 사다리가 `.card,.panel,.hero,.stat` 에 헤어라인을 준다 —
   그 이름이 겹쳐서 히어로 칼럼에 440px 짜리 테두리 상자가 그려졌다. 여기선 면이 없다. */
.hero, .panel { border: 0; }
.hero { max-width: 440px; margin-inline: auto; padding: 48px 24px 0; }
.hero .logo {
  font-family: var(--font-accent); font-weight: 600;
  font-size: 32px; line-height: 1.1; letter-spacing: -.02em;
  color: var(--ink-1); margin: 0 0 16px;
}
.hero .tagline {
  font-family: var(--font-mono-s); font-size: 12px; color: var(--ink-1);
  margin: 0 0 8px; letter-spacing: .01em;
}
.hero h1 {
  font-size: 32px; line-height: 1.1; letter-spacing: -.02em;
  color: var(--ink-2c); font-weight: 400; margin: 0;
  white-space: nowrap;
}
.hero .body { display: flex; flex-direction: column; gap: 24px; margin-top: 20px; }
.hero .body p { margin: 0; font-size: 14px; line-height: 1.625; color: var(--ink-1); }
.hero .cta { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }

@media (min-width: 640px) { .hero .cta { flex-direction: row; } }
@media (min-width: 768px) {
  .hero { padding-top: 64px; }
  .hero .logo, .hero h1 { font-size: 40px; }
  .hero .tagline { font-size: 14px; }
  .hero .body { gap: 24px; margin-top: 24px; }
  .hero .body p { font-size: 16px; }
  .hero .cta { gap: 16px; margin-top: 24px; }
}
@media (min-width: 1024px) { .hero .logo, .hero h1 { font-size: 44px; } }
/* 아랍어 표제는 nowrap 을 풀어야 한다 — 같은 뜻이 라틴보다 길고, 넘치면 잘린다. */
[lang="ar"] .hero h1 { white-space: normal; }

/* ── 버튼 ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 28px; border-radius: 999px; border: 0; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.2;
  min-height: 44px; white-space: nowrap;
  transition: transform .12s ease, opacity .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--ink-1); color: #fff; box-shadow: var(--sh-primary); }
.btn-secondary { background: #fff; color: var(--ink-1); box-shadow: var(--sh-secondary); }
.btn-tertiary { background: #fff; color: var(--ink-1);
  box-shadow: var(--sh-secondary), var(--sh-card); }

/* ── 2. 마퀴 ───────────────────────────────────────────────────────────
   끊김 없이 흐르는 화면 띠. 트랙을 두 벌 이어 붙이고 -50% 까지 밀면 이어진다.
   ⚠️ 트랙은 언제나 LTR 이다 — RTL 에서 방향이 뒤집히면 두 벌의 이음매가 화면
   가운데로 와서 흐름이 끊긴다. 움직임의 방향은 언어가 아니다. */
.marquee { margin: 64px 0 64px; overflow: hidden; }
.marquee-track {
  display: flex; width: max-content; direction: ltr;
  animation: marquee 30s linear infinite;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee .cell { margin-inline: 12px; flex: none; }
@media (min-width: 768px) { .marquee { margin: 80px 0 64px; } }
@media (max-width: 767px) { .marquee-track { animation-duration: 10s; } }

/* ── 화면 목업 ─────────────────────────────────────────────────────────
   시안은 여기에 GIF 8 장을 걸었는데, 그건 다른 제품들의 자산이다. 대신 **우리 제품의
   화면**을 CSS 로 짰다 — 외부 요청이 0 이고, 문구가 i18n 을 타고, 제품이 바뀌면 여기도
   같이 바뀐다. 실제 스크린샷이 준비되면 .screen 을 <img> 로 갈면 된다.
   구조는 studio.js 의 SCREENS 가 만든다. */
.screen {
  height: 280px; aspect-ratio: 9 / 13; border-radius: 16px; box-shadow: var(--sh-lg);
  background: var(--ink-1); color: var(--on-dark);
  padding: 18px 16px; overflow: hidden; position: relative;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 11px; direction: ltr; text-align: left;
}
.screen.light { background: #F4F6F7; color: var(--ink-1); }
.screen .s-head { display: flex; align-items: center; gap: 6px; opacity: .65;
  font-family: var(--font-mono-s); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; }
.screen .s-title { font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.screen .s-big { font-family: var(--font-mono-s); font-size: 34px; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; }
.screen .s-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.screen .s-tile { border-radius: 8px; padding: 8px 7px; font-size: 10px; font-weight: 500;
  background: rgba(246, 252, 255, .1); }
.screen.light .s-tile { background: #fff; box-shadow: 0 1px 2px rgba(5, 26, 36, .08); }
.screen .s-tile.on { background: var(--on-dark); color: var(--ink-1); }
.screen .s-rows { display: flex; flex-direction: column; gap: 5px; }
.screen .s-row { display: flex; justify-content: space-between; gap: 8px;
  padding-bottom: 5px; border-bottom: 1px solid rgba(246, 252, 255, .12); }
.screen.light .s-row { border-bottom-color: rgba(5, 26, 36, .1); }
.screen .s-row span:last-child { font-family: var(--font-mono-s);
  font-variant-numeric: tabular-nums slashed-zero; opacity: .8; }
.screen .s-pin { flex: 1; border-radius: 10px; position: relative;
  background:
    repeating-linear-gradient(45deg, rgba(246, 252, 255, .06) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-45deg, rgba(246, 252, 255, .06) 0 1px, transparent 1px 13px),
    rgba(246, 252, 255, .05); }
.screen .s-pin::after { content: ""; position: absolute; inset: 26% 24%;
  border: 1.5px dashed rgba(246, 252, 255, .5); border-radius: 999px; }
.screen .s-pin::before { content: ""; position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 999px;
  background: var(--on-dark); }
.screen .s-face { flex: 1; border-radius: 10px; position: relative;
  background: rgba(246, 252, 255, .05); }
.screen .s-face::after { content: ""; position: absolute; inset: 18% 22%;
  border: 1.5px solid rgba(246, 252, 255, .55); border-radius: 40% 40% 45% 45%; }
.screen .s-note { margin-top: auto; opacity: .7; font-size: 10px; line-height: 1.4; }
.screen .s-chip { align-self: flex-start; border-radius: 999px; padding: 3px 9px;
  font-size: 9px; font-weight: 500; background: var(--on-dark); color: var(--ink-1); }
@media (min-width: 768px) {
  .screen { height: 500px; padding: 28px 24px; gap: 14px; font-size: 13px; }
  .screen .s-title { font-size: 22px; }
  .screen .s-big { font-size: 58px; }
  .screen .s-head { font-size: 11px; }
  .screen .s-tile { font-size: 13px; padding: 12px 11px; border-radius: 10px; }
  .screen .s-note { font-size: 12px; }
  .screen .s-chip { font-size: 11px; padding: 4px 12px; }
}
/* 넓게 쓰는 화면(프로젝트 절) — 비율을 눕힌다 */
.screen.wide { aspect-ratio: 16 / 9; height: auto; width: 100%; }

/* ── 3. 인용 ───────────────────────────────────────────────────────────── */
.quote-sec { padding: 48px 24px; }
.quote-sec .qmark { color: #0f172a; display: block; margin-bottom: 20px; }
.quote-sec blockquote {
  margin: 0; font-size: 32px; line-height: 1.1; letter-spacing: -.02em;
  color: var(--ink-2c); font-weight: 400;
}
.quote-sec .by { font-style: italic; font-size: 14px; color: var(--muted); margin: 20px 0 0; }
.quote-sec .marks { display: flex; flex-wrap: wrap; align-items: baseline; gap: 28px;
  margin: 32px 0 0; }
.quote-sec .marks span { font-size: 24px; font-weight: 500; color: #0f172a;
  letter-spacing: -.01em; }
.quote-sec .parallax { margin-top: 40px; max-width: 320px; width: 100%;
  will-change: transform; }
@media (min-width: 768px) { .quote-sec blockquote { font-size: 40px; } }
@media (min-width: 1024px) { .quote-sec blockquote { font-size: 44px; } }

/* ── 4. 요금 ───────────────────────────────────────────────────────────
   시안은 두 장이지만 우리 요금제는 세 단이다 — 카드의 생김새(라운드 40, 비대칭 패딩,
   어두운 한 장)는 그대로 두고 열만 늘렸다. 값을 빼면 판매 페이지가 아니게 된다. */
.pricing { padding: 48px 24px; }
.plans { display: grid; grid-template-columns: 1fr; gap: 32px; }
.plan {
  border-radius: 40px; padding: 12px 40px 40px;
  background: #fff; box-shadow: var(--sh-card); color: var(--ink-1);
}
.plan.dark { background: var(--ink-1); color: var(--on-dark-2);
  box-shadow: var(--sh-card), inset 0 1px 0 rgba(255, 255, 255, .08); }
.plan h3 { font-size: 22px; font-weight: 500; letter-spacing: -.01em; margin: 20px 0 10px; }
.plan .desc { font-size: 14px; line-height: 1.6; margin: 0 0 24px; opacity: .85; }
.plan .amt { font-size: 24px; font-weight: 500; color: var(--ink-2c); }
.plan.dark .amt { color: var(--on-dark); }
.plan .per { font-size: 13px; opacity: .8; margin: 2px 0 20px; }
.plan ul { list-style: none; margin: 0 0 24px; padding: 0; font-size: 14px; }
.plan li { padding: 5px 0; opacity: .9; }
.plan li::before { content: "—"; margin-inline-end: 8px; opacity: .5; }
.plan .acts { display: flex; flex-wrap: wrap; gap: 12px; }
.pricing .note { font-size: 13px; line-height: 1.6; color: var(--muted);
  margin: 32px 0 0; max-width: 72ch; }
@media (min-width: 768px) {
  .plans { grid-template-columns: repeat(3, 1fr); margin-inline-start: auto; max-width: 1100px; }
  .plan { padding-inline-end: 64px; }
}

/* ── 4b. 비교표 ────────────────────────────────────────────────────────
   시안에 표가 없어서 **카드 안에** 넣는다 — 같은 라운드 40, 같은 그림자.
   좁은 화면에서는 표만 옆으로 흐른다(페이지가 흐르면 안 된다). */
.compare { padding: 48px 24px; }
.compare .panel { background: #fff; border-radius: 40px; box-shadow: var(--sh-card);
  padding: 32px 24px; }
.compare h2 { margin: 0 0 24px; font-size: 24px; line-height: 1.15; letter-spacing: -.02em;
  color: var(--ink-2c); font-weight: 500; }
.compare .scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.compare th, .compare td { text-align: start; padding: 12px 14px; vertical-align: top;
  border-bottom: 1px solid rgba(5, 26, 36, .08); }
.compare th { font-family: var(--font-mono-s); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); font-weight: 400; }
.compare td.num { white-space: nowrap; }
.compare .win { color: #0f6b45; font-weight: 500; }
.compare .note { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 24px 0 0; }
@media (min-width: 768px) {
  .compare .panel { padding: 40px; }
  .compare h2 { font-size: 32px; }
}

/* ── 5. 캐러셀 ─────────────────────────────────────────────────────────
   시안의 얼굴 사진·이름·별점은 우리에게 없는 것(고객 인용과 평점)이라 넣지 않았다.
   구조는 그대로 쓰고 **실제로 있는 것**을 담는다: 우리가 늘 받는 질문과 답. */
.carousel-sec { padding: 80px 0; overflow: hidden; }
.carousel-head { display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 24px; padding-inline: 24px; margin-bottom: 40px; }
.carousel-head h2 { margin: 0; font-size: 32px; line-height: 1.1; letter-spacing: -.02em;
  color: var(--ink-2c); font-weight: 400; }
.facts { display: flex; gap: 24px; }
.facts div { font-size: 13px; color: var(--muted); }
.facts b { display: block; font-size: 24px; font-weight: 500; color: #0f172a;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.carousel-view { overflow: hidden; padding-inline: 24px; }
.carousel-track { display: flex; gap: 24px; will-change: transform;
  transition: transform .8s cubic-bezier(.4, 0, .2, 1); }
.qa {
  flex: none; width: calc(100vw - 48px); background: #fff;
  border-radius: 32px; box-shadow: var(--sh-card);
  padding: 32px 24px; display: flex; flex-direction: column; gap: 16px;
  transition: opacity .5s ease, transform .5s ease;
}
.qa.exiting { opacity: 0; transform: scale(.96); }
.qa .qm { color: var(--ink-2c); opacity: .35; }
.qa h3 { margin: 0; font-size: 16px; font-weight: 500; color: var(--ink-2c); }
.qa p { margin: 0; font-size: 15px; line-height: 1.625; color: var(--ink-2c); }
.qa .who { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 8px; }
.qa .who .tile { width: 48px; height: 48px; border-radius: 999px; flex: none;
  background: var(--ink-1); color: var(--on-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-accent); font-size: 20px; }
.qa .who b { font-size: 14px; font-weight: 600; display: block; color: var(--ink-2c); }
.qa .who span { font-size: 13px; color: var(--muted); }
.carousel-nav { display: flex; gap: 12px; padding-inline: 24px; margin-top: 32px; }
.carousel-nav button {
  width: 48px; height: 48px; border-radius: 999px; background: #fff; cursor: pointer;
  border: 1px solid rgba(13, 33, 44, .2); color: var(--ink-2c);
  display: inline-flex; align-items: center; justify-content: center;
}
.carousel-nav button:hover { background: #f6f8f9; }
@media (min-width: 768px) {
  .carousel-head { max-width: 896px; margin-inline-start: auto; }
  .carousel-head h2 { font-size: 40px; }
  .qa { width: 427.5px; border-radius: 40px; padding: 32px 96px 32px 40px; }
}
@media (min-width: 1024px) { .carousel-head h2 { font-size: 44px; } }

/* ── 6. 단계(시안의 Projects) ──────────────────────────────────────────── */
.steps { padding: 48px 24px; }
.steps ol { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 64px; }
.steps .txt { margin-inline-start: 80px; margin-bottom: 24px; }
.steps h3 { font-family: var(--font-accent); font-weight: 600; font-size: 24px;
  letter-spacing: -.01em; color: var(--ink-1); margin: 0 0 8px; }
.steps p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(5, 26, 36, .7); }
@media (min-width: 768px) {
  .steps ol { gap: 80px; }
  .steps .txt { margin-inline-start: 112px; }
  .steps h3 { font-size: 30px; }
  .steps p { font-size: 16px; }
}

/* ── 7. 파트너 ─────────────────────────────────────────────────────────
   커서를 따라 조각이 떨어지는 자리. 시안은 GIF 를 뿌리는데, 우리는 **마크**를 뿌린다 —
   외부 자산이 없고, 우리 마크가 자기 성질(白場 이 藍 속으로 사라진다)을 그대로 보여준다. */
.partner { padding: 48px 24px; }
.partner .box {
  position: relative; overflow: hidden; border-radius: 40px; background: #fff;
  box-shadow: var(--sh-secondary); padding: 96px 24px; text-align: center;
}
.partner h2 { font-family: var(--font-accent); font-weight: 400; font-size: 48px;
  line-height: 1.05; letter-spacing: -.02em; color: var(--ink-2c); margin: 0 0 48px; }
.partner .lede { position: relative; z-index: 2; font-size: 16px; line-height: 1.625;
  color: var(--muted); max-width: 46ch; margin: -24px auto 40px; }
.partner .pill { position: relative; z-index: 2; padding-inline-start: 8px; }
/* 시안은 사람 얼굴 사진을 원형으로 넣는다. 우리 자리에는 마크가 오는데, 마크를 원으로
   자르면 재단된 모서리가 사라진다(BRAND §1: 회전·늘이기·변형 금지). 라운드만 준다. */
.partner .pill img { width: 40px; height: 40px; border-radius: 10px; }
.trail { position: absolute; width: 96px; height: 96px; border-radius: 14px;
  pointer-events: none; opacity: .9; z-index: 1;
  transition: opacity 1s ease, transform 1s ease; }
@media (min-width: 768px) {
  .partner .box { padding: 192px 24px; }
  .partner h2 { font-size: 64px; }
}
@media (min-width: 1024px) { .partner h2 { font-size: 80px; } }

/* ── 8·9. 푸터 / 저작권 ────────────────────────────────────────────────── */
.foot { padding: 48px 24px; display: flex; flex-direction: column; gap: 40px; }
.foot .links { display: flex; align-items: flex-start; gap: 40px; }
.foot .links ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px; }
.foot .links a { font-size: 16px; color: var(--ink-1); transition: opacity .12s; }
.foot .links a:hover { opacity: .7; }
.copy { padding: 16px 24px; display: flex; justify-content: space-between;
  gap: 16px; font-size: 14px; color: var(--ink-1); }
@media (min-width: 768px) {
  .foot { flex-direction: row; align-items: flex-start; justify-content: space-between; }
}

/* ── 10. 고정 하단 필 ──────────────────────────────────────────────────── */
.dock {
  position: fixed; z-index: 50; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px;
  background: #fff; border-radius: 999px; padding: 8px 32px;
  box-shadow: var(--sh-secondary), 0 12px 40px rgba(5, 26, 36, .14);
  max-width: calc(100vw - 32px);
}
.dock .v { font-family: var(--font-accent); font-weight: 600; font-size: 24px;
  color: var(--ink-1); line-height: 1; }
/* 언어 전환은 여기 산다 — 이 시안에는 상단 내비가 없고, 아랍어 사용자가 언어 버튼을
   찾으려고 페이지 끝까지 내려가야 하면 안 된다. 화면에 항상 떠 있는 자리가 여기뿐이다. */
.dock .langsw { background: #f1f4f5; }
/* 밀도는 **폭과 글자**로만 줄인다. 높이를 36px 로 내렸다가 감사에서 잡혔다 —
   tokens.css 가 44px 를 바닥선으로 정해 놓고 변형에서 깨면 그건 바닥선이 아니다. */
.dock .langsw button { min-height: var(--tap-compact); padding: 0 10px; font-size: 12px;
  color: var(--ink-1); }
.dock .langsw button.on { background: #fff; }
@media (max-width: 420px) {
  .dock { gap: 10px; padding: 8px 14px; }
  .dock .btn { padding-inline: 18px; font-size: 14px; }
}