/* ══ 로빈덱스 ══════════════════════════════════════════════════

   흰색 바탕 하나로 간다.

   검정 면을 넓게 깔았더니 머리와 서비스 영역이 먼저 눈에 들어와, 정작
   읽어야 할 글보다 면이 셌다. 면을 채우는 대신 **여백과 가는 선**으로
   영역을 나눈다.

   ### 색

   글자는 먹색, 바탕은 흰색, 영역을 구분할 때만 아주 옅은 회색을 쓴다.
   유채색은 에이비 아이콘 하나뿐이다.

   ### 버튼

   채우지 않는다. 테두리와 글자만 두고, 마우스를 올렸을 때만 옅은 회색이
   깔린다 — 검정으로 채운 버튼은 흰 화면에서 가장 먼저 보이는 것이 된다.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --paper: #FFFFFF;
  --ink:   #1A1A1C;
  --ink-2: #6B6B70;
  --ink-3: #9A9AA0;
  --rule:  #E8E8EA;
  /* 영역을 나눌 때 쓰는 옅은 회색. 하나만 둔다. */
  --wash:  #F7F7F8;

  /* 에이비 앱이 쓰는 값 그대로. 이 페이지의 유일한 유채색이다. */
  --ab:    linear-gradient(135deg, #D70652 0%, #F2476B 48%, #FF9E5E 100%);

  --wide:  70rem;

  /* 라이트 모드만 지원한다. 흰 배경이 이 페이지의 기본 구성이다. */
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* **바닥을 화면 아래에 붙인다.** 글이 짧은 페이지에서 바닥이 화면 중간에
   떠 있으면, 그 아래 빈 흰 면이 페이지가 덜 그려진 것처럼 보였다 —
   본문(`main`)이 남는 높이를 가져가 바닥을 밀어 내린다. */
body {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  font-family: 'Pretendard Variable', Pretendard, -apple-system,
               BlinkMacSystemFont, system-ui, sans-serif;
  background: var(--paper); color: var(--ink);
  line-height: 1.68; letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all; overflow-wrap: break-word;
  font-feature-settings: 'tnum';
}

main { flex: 1 0 auto; }

a { color: inherit; text-decoration: none; }
/* `height: auto` 를 빠뜨리면 `<img>` 에 적어 둔 높이가 그대로 남아 이미지가
   세로로 늘어난다. 그 속성은 레이아웃 공간을 미리 확보하기 위한 값이다. */
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.wide { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 1.5rem; }

/* ── 글자 ───────────────────────────────────────────────────── */
h1, h2, h3 { font-weight: 700; letter-spacing: -0.045em; line-height: 1.3; }
.h-xl { font-size: clamp(1.9rem, 4.6vw, 3.1rem); font-weight: 800; }
.h-lg { font-size: clamp(1.45rem, 3.2vw, 2.05rem); }
.h-md { font-size: 1.1rem; letter-spacing: -0.035em; }

/* 섹션 제목 위의 작은 라벨. 대문자로 자간을 벌려 쓰지 않는다 — 그런 라벨은
   어느 회사 소개에나 있어서 있으나 없으나 같은 역할을 한다. */
.tag { font-size: 0.85rem; font-weight: 700; color: var(--ink-3); letter-spacing: -0.02em; }

.lead { margin-top: 1.1rem; font-size: 1.05rem; color: var(--ink-2); max-width: 33em; }

/* 제목 속 **강조 낱말**에만 쓰는 에이비 그라데이션 글자. 에이비 자리에서만
   쓴다 — 회사 첫 화면 에이비 섹션 제목 · 에이비 소개 페이지(`ab/info.html`)
   섹션 제목. 회사 제목들은 검정 그대로다.

   **낱말마다 따로 칠한다** — `inline-block` 이라 그라데이션이 낱말 안에서
   처음부터 끝까지 다 돌고, 줄이 바뀌어도 낱말이 끊기지 않는다. 문장에
   한 번 깔고 오려 내면 뒤쪽 낱말만 옅어진다. */
.ab-word {
  display: inline-block;
  background: linear-gradient(135deg, #D70652 0%, #FF9E5E 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* 칠한 낱말에 토씨가 붙을 때(`리포트로`) 둘이 줄에서 갈라지지 않게 묶는다. */
.keep { white-space: nowrap; }

/* ── 움직임 ─────────────────────────────────────────────────────
   회사 첫 화면 · 에이비 소개 페이지가 같이 쓰는 등장 규칙(2026-11-03 대표 —
   **짧고 옅게, 한 번만**). 투명도 + 아래에서 10px(휴대폰 7px), 0.45~0.5초,
   80ms 간격. 순서는 요소마다 `--d`, 거리는 `--rise`, 크기는 `--s`.

   - **`.motion` 이 있을 때만** — 각 페이지 `<head>` 의 짧은 스크립트가
     붙이고, 움직임 줄이기 설정이면 붙이지 않는다. 스크립트가 꺼지면
     처음부터 다 보인다
   - 페이지를 열 때 움직이는 것(`data-intro`, 첫 화면)은 **CSS 로만** —
     `backwards` 라 끝나면 transform 이 남지 않는다
   - 아래 섹션(`data-reveal` 안의 `data-rise`)은 `assets/motion.js` 가 열 때
     화면 밖인 섹션에만 `.wait` 를 붙여 숨기고, 들어오면 `.in`. 숨길 때는
     바로, 나타날 때만 움직인다
   - `transform` · `opacity` 만 — 자리가 밀리지 않는다. 끝나면 transform
     이 없어 그림이 따로 그려지지 않는다(에이비 영수증 흐림을 막은 것 그대로) */
:root { --rise-k: 1; }
@media (max-width: 620px) { :root { --rise-k: 0.7; } }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(calc(var(--rise, 10px) * var(--rise-k))) scale(var(--s, 1)); }
  to   { opacity: 1; transform: none; }
}
.motion [data-intro] { animation: rise-in .45s ease-out var(--d, 0ms) backwards; }
.motion [data-reveal].in [data-rise] {
  transition: opacity .45s ease-out var(--d, 0ms), transform .5s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms);
}
/* 숨길 때는 바로 — 요소가 제 transition 을 갖고 있어도(예: `.more-link`
   의 투명도) 숨는 쪽으로 움직이지 않게 끈다. */
.motion [data-reveal].wait:not(.in) [data-rise] {
  opacity: 0; transform: translateY(calc(var(--rise, 10px) * var(--rise-k))) scale(var(--s, 1));
  transition: none;
}

/* 손을 얹었을 때 — 스토어 배지만 아주 살짝 떠오른다(두 페이지). */
.stores .badge { transition: transform .2s ease; }
.motion .stores .badge:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  [data-intro], [data-rise] { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
  .stores .badge:hover { transform: none; }
}

/* ── 머리 ───────────────────────────────────────────────────── */
/* 선 대신 **아주 옅은 그림자 한 겹**으로 아래와 가른다. 1px 선은 글판
   위에 자를 대고 그은 것처럼 딱딱했다 — 반투명 바탕과 흐림이 이미 머리를
   띄워 주므로, 경계는 거의 보이지 않을 만큼만 둔다. */
header {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent);
}
header .wide { display: flex; align-items: center; gap: 1rem; height: 4rem; }

/* 이름만 둔다. 한글 이름을 나란히 두면 머리에 글자가 두 덩어리가 된다.
   지금은 모든 페이지가 글자 대신 글자 로고 그림(`.mark.logo`, 아래)을 쓴다.
   이 글자 모양은 그림을 못 불러올 때를 위한 바탕으로 남긴다. */
.mark {
  margin-right: auto;
  font-size: 1.05rem; font-weight: 800;
  letter-spacing: 0.12em;
}

/* **글자 로고(워드마크)**(2026-11-03 대표) — 굵고 둥근 검정 `L♥VINDEX`,
   O 자리가 분홍 → 주황 하트. 원본 `projects/lovindex-site/design/러브인덱스
   하트 로고.png`(2172×724)의 둘레 여백을 잘라 312×48(머리 높이의 2배)로
   줄인 `assets/img/lovindex-wordmark.png`. 머리 18.4px, 바닥 12px(처음 22 ·
   18px → 18.4 · 15.5px → 바닥만 12px, 대표가 줄임 — 파일은 2배라 그대로
   선명하다). 배경이 투명한 검정 글자라 어두운 바탕에 쓰려면 흰 판이 필요하다.

   **바닥은 옆 문장과 한 줄로 읽히게**(2026-11-03 대표) — 15.5px 일 때 로고가
   "생활에서 매일 사용하는 앱을 만듭니다."(13.6px)보다 커 보여 줄이 안 맞았다.
   그림 안 글자 높이가 그림의 92%라 12px 이면 글자가 11px, 한글 글자 높이와
   거의 같다. 바닥 줄은 기준선 맞춤(`footer .top > div`)이라 그림 바닥이 문장
   기준선에 선다 — 한글은 기준선 아래로 1px 남짓 내려가므로 그림도 그만큼
   내려(`top`, 줄 맞춤 계산에는 안 끼친다) 두 글자 덩어리의 가운데를 맞춘다. 좁은 화면에서 두 줄로 쌓이면 줄
   사이를 0.45rem 으로 둔다. */
.mark.logo { display: inline-flex; align-items: center; letter-spacing: 0; }
.mark.logo img { display: block; width: auto; height: 1.15rem; }
footer .mark.logo img { height: 0.75rem; position: relative; top: 0.07rem; }

nav { display: flex; align-items: center; gap: 1.6rem; font-size: 0.92rem; }
nav a { color: var(--ink-2); font-weight: 600; transition: color .2s ease; }
nav a:hover { color: var(--ink); }

/* 머리의 글자 링크는 손을 얹으면 **밑줄이 왼쪽에서 그어진다.** 색만
   짙어지면 눌러지는 줄인지 알기 어려웠다. 버튼(`.btn`)은 제외한다. */
header nav a:not(.btn), footer .top nav a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: color .2s ease, background-size .25s ease;
}
header nav a:not(.btn):hover, footer .top nav a:hover { background-size: 100% 1px; }

/* 머리 오른쪽 끝의 **글자 버튼.** 둥근 테두리를 두르지 않는다 — 머리에
   테두리가 하나 서면 이름보다 그것이 먼저 보였다. 다른 링크보다 한 단계
   짙게 두고, 화살표가 가는 쪽을 알린다. 밑줄은 글자에만 긋는다. */
header nav a.cta {
  display: inline-flex; align-items: center; gap: 0.3rem;
  color: var(--ink); font-weight: 700;
  background: none; padding-bottom: 0;
}
header nav a.cta .arrow { transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
header nav a.cta:hover .arrow { transform: translateX(3px); }

/* ── 버튼 ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.94rem; font-weight: 700; letter-spacing: -0.03em;
  padding: 0.68rem 1.25rem; border-radius: 999px;
  border: 1px solid var(--rule); color: var(--ink); background: var(--paper);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover { background: var(--wash); border-color: var(--ink-3); }
.btn:active { transform: scale(0.97); }
.btn.sm { font-size: 0.87rem; padding: 0.48rem 0.95rem; }

/* ── 묶음 ───────────────────────────────────────────────────── */
.band { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.band.tight { padding-top: 0; }

/* ── 서비스 ─────────────────────────────────────────────────────
   옅은 회색 판 하나로 본문과 구분한다. 검정으로 채웠더니 페이지 한가운데에
   큰 덩어리가 생겨, 소개하려던 서비스보다 그 면이 먼저 보였다. */
.svc {
  /* **흰 면이다.** 옅은 회색 판으로 두었더니 페이지 가운데에 큰 덩이가
     생겨, 소개하려던 서비스보다 그 면이 먼저 보였다 — 가르는 일은 여백과
     글 사이의 선이 한다. */
  background: var(--paper); border-radius: 1.5rem;
  /* **`minmax(0, …)` 로 적는다.** `1fr` 만 적으면 칸이 내용의 최소 너비
     아래로는 줄지 않아서, 좁은 화면에서 영역이 화면 밖으로 7px 삐져나갔다. */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.8rem, 4vw, 3.2rem);
}
.svc .words { min-width: 0; }
.svc h2 { margin-top: 1rem; }

/* 이름과 아이콘. 페이지에서 유일하게 색이 있는 자리다.

   **앱 아이콘 파일을 그대로 쓴다.** 전에는 글자 `AB` 를 그려 넣었는데, 스토어와
   휴대폰 화면에 보이는 것과 달라서 같은 앱으로 알아보기 어려웠다. 모서리는
   iOS 가 아이콘에 입히는 것과 같은 정도로 둥글린다. */
.svc .who { display: flex; align-items: center; gap: 0.65rem; width: fit-content; }  /* 링크라 이름 너비만 눌리게 */
.svc .who img {
  width: 2.4rem; height: 2.4rem; border-radius: 0.6rem; flex: none;
}
.svc .who b { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.05em; }

/* ── 강점 넷 ────────────────────────────────────────────────────
   이미지와 소개 글 아래에서 **판 전체를 가로질러** 두 개씩 선다. 오른쪽
   칸 안에 넣어 두었더니 넷이 세로로 길게 늘어서, 소개 글보다 목록이 먼저
   읽혔다.

   짝마다 `div` 로 묶는 까닭은, 격자에서는 `dt` 와 `dd` 가 각각 한 칸을
   차지해 제목과 설명이 서로 다른 열로 갈라지기 때문이다. */
.svc dl {
  grid-column: 1 / -1;
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem clamp(1.5rem, 4vw, 3rem);
}
.svc dl > div { min-width: 0; }
.svc dt {
  font-size: 0.97rem; font-weight: 800; letter-spacing: -0.035em;
  padding-top: 0.95rem; border-top: 1px solid #E3E3E6;
}
.svc dd { margin-top: 0.35rem; padding-bottom: 0.3rem; font-size: 0.93rem; color: var(--ink-2); }

/* 이미지를 올리는 자리. 면은 카드와 같은 흰색이고, 하는 일은 **그림을
   가운데에 두고 자리를 정해 주는 것**이다 — 면 색이 다르면 카드 안에 또
   하나의 카드가 선다. */
.svc figure {
  background: var(--paper); border-radius: 1.2rem;
  padding: clamp(0.8rem, 2vw, 1.5rem);
  display: grid; place-items: center;
}

/* 에이비 섹션 그림 — 소개 페이지 첫 화면 그림(`ab/assets/hero.webp`,
   1280×853 — 원본 1536×1024 를 같은 비율로 줄임)을 같이 쓴다. 그려진 것은
   원본 기준 가로 242~1278 · 세로 28~974 라
   좌우 투명 여백이 넓어, 칸을 그려진 부분 비율(약 1.08:1)로 잡고
   `cover` 로 여백만 잘라 낸다. 그려진 부분은 잘리지 않는다. */
.svc .ab-hero { aspect-ratio: 1080 / 1000; object-fit: cover; object-position: 49.5% 49%; }

/* ── 다운로드 ───────────────────────────────────────────────────
   **스토어가 준 배지 파일을 그대로 쓴다**(`assets/img/google-play-badge-ko.png`).
   정하는 것은 높이 하나다 — 너비는 비율대로 따라온다. 파일에는 배지 위아래로
   투명한 여백이 들어 있다(250px 가운데 위아래 30px씩). 그 여백은 배지
   지침이 정한 둘레 공간이라 잘라 내지 않는다. 그만큼 윗줄 간격을 줄여
   눈에 보이는 간격을 맞춘다.

   **3.6rem** — 보이는 검은 면이 약 2.7rem(44px)이 된다. 손가락으로 누르기에
   넉넉하고, 좁은 화면에서도 한 줄에 글자와 함께 선다.

   아직 공개되지 않은 스토어는 **배지 없이 글자만** 둔다 — 아무 곳에도 가지
   않는 단추를 누르게 하지 않고, 남의 배지를 흐리게 고쳐 쓰지도 않는다. */
.stores {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.4rem 1.1rem; margin-top: 1.45rem;
}
.badge { display: block; flex: none; line-height: 0; }
.badge img { display: block; width: auto; max-width: none; height: 3.6rem; }  /* 비율을 지킨다 — 전역 `max-width: 100%` 가 좁은 칸에서 배지를 찌그러뜨리지 않게 */
.soon { font-size: 0.85rem; font-weight: 700; color: var(--ink-3); }

/* 서비스 섹션에서 그 앱의 소개 페이지로 가는 **글자 링크.** 배지 아래에
   두고, 에이비 그라데이션 글자로 칠한다(2026-11-03 대표). 글자에서
   화살표까지 `#D70652 → #FF9E5E` 가 한 줄로 이어진다.

   **굵고 크게(1.05rem, 800).** 밝은 끝 `#FF9E5E` 는 흰 바탕에서 대비가
   약해 작은 글자에는 쓰지 않는 색이다(에이비 `COLORS.md`). 그라데이션을
   깐 단추로 만들지 않는다 — 그 위 흰 글자는 대비가 모자란다. 밑줄도
   두지 않는다(대표).

   **칠은 글자(`.txt`)와 화살표(`.arrow`)에 따로** 건다 — 링크 자신에는
   칠 · 투명도 · 변형을 걸지 않는다. 처음엔 링크 하나에 칠을 걸고 손을
   얹으면 옅어지게(opacity) 했는데, 거기에 화살표 이동(transform)이
   더해지자 칠한 글자를 다시 그리며 가장자리가 뭉개지고 잘려 보였다
   (대표 제보, Safari · 레티나에서 잘 생긴다). 칠한 부모 안에서 자식을
   움직이면 부모의 칠이 옛 자리 글자 모양에 남기도 한다. 이제 손을 얹으면
   **화살표만** 3px 나가고, 칠한 글자는 그대로다. 두 칠의 색은 이어지게
   나눴다(글자 `#D70652 → #FA8A5F`, 화살표 `#FB915E → #FF9E5E`). */
.more-link {
  display: inline-flex; align-items: baseline; gap: 0.3em; margin-top: 1.1rem;
  font-size: 1.05rem; font-weight: 800; letter-spacing: -0.03em; white-space: nowrap;
}
.more-link .txt,
.more-link .arrow {
  display: inline-block;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.more-link .txt   { background-image: linear-gradient(135deg, #D70652 0%, #FA8A5F 100%); }
.more-link .arrow {
  background-image: linear-gradient(135deg, #FB915E 0%, #FF9E5E 100%);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.motion .more-link:hover .arrow { transform: translateX(3px); }

/* 앱 띠의 아이콘만 손을 얹으면 살짝 떠오른다. */
.apps a img { transition: transform .2s ease; }
.motion .apps a:hover img { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .more-link:hover .arrow, .apps a:hover img { transform: none; }
}

/* ── 회사 ───────────────────────────────────────────────────── */
.about { max-width: 38rem; }
.about p + p { margin-top: 1.1rem; }
.about .acts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2.2rem; }

/* ── 읽는 글(약관 · 처리방침) ──────────────────────────────────── */
.doc { max-width: 40rem; }
.doc h2 { font-size: 1.12rem; margin-top: 2.4rem; }
.doc h2:first-child { margin-top: 0; }
.doc p { margin-top: 0.9rem; color: var(--ink-2); }
.doc p strong { color: var(--ink); font-weight: 800; }
.doc ul { margin-top: 0.9rem; padding-left: 1.1rem; color: var(--ink-2); }
.doc li { margin-top: 0.35rem; }
.doc a { color: var(--ink); font-weight: 700;
         text-decoration: underline; text-underline-offset: 3px; }
.doc table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.93rem; }
.doc th, .doc td { text-align: left; padding: 0.65rem 0.8rem 0.65rem 0;
                   border-bottom: 1px solid var(--rule); vertical-align: top; }
.doc th { color: var(--ink-3); font-weight: 700; white-space: nowrap; }
.doc td { color: var(--ink-2); }

.top-doc { padding: 3.5rem 0 0; }
.top-doc h1 { margin-top: 0.6rem; }
.top-doc .ver { margin-top: 0.9rem; font-size: 0.92rem; color: var(--ink-3); }
.top-doc .ver a { color: var(--ink); font-weight: 700; }

/* ── 바닥 ───────────────────────────────────────────────────── */
/* **슬림하게 간다.** 바닥은 찾을 때만 읽는 자리다 — 여백을 줄이고,
   사업자 정보는 칸을 나누지 않고 한 줄로 흘려 둔다. 칸으로 세우면
   세 줄짜리 표가 되어 바닥이 본문만큼 키가 커졌다. */
/* 바탕을 **옅은 회색으로 깐다.** 흰 바탕 위에 선 하나로만 갈랐더니 본문이
   어디서 끝나는지 흐렸다 — 면 하나가 선보다 조용하게 끝을 알린다. */
footer { background: var(--wash); border-top: 1px solid var(--rule); padding: 1.8rem 0 1.5rem; }
footer a { transition: color .2s ease; }
footer .top {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.6rem 2rem; justify-content: space-between;
}
footer .top > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem 0.9rem; }
footer .say { font-size: 0.85rem; color: var(--ink-2); }
footer nav { gap: 1.1rem; font-size: 0.85rem; flex-wrap: wrap; }
footer .biz {
  display: flex; flex-wrap: wrap;
  gap: 0.25rem 1.2rem; margin-top: 1.1rem; font-size: 0.78rem; color: var(--ink-3);
}
footer .biz div { display: flex; gap: 0.4rem; }
footer .biz dt { flex: none; opacity: .72; }
footer .biz a:hover { color: var(--ink); }
footer .end {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 0.8rem;
  margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--rule);
  font-size: 0.78rem; color: var(--ink-3);
}
footer .end a:hover { color: var(--ink); }

/* 로또미 섹션을 내려 둔 동안의 **임시 약관 줄.** (에이비 두 줄은 2026-11-03 섹션 아래로 되돌렸다)
   서비스가 다시 서면 각 섹션 아래(`.svc .legal`)로 되돌린다 — 푸터에 모아
   두면 서비스가 넷이 되었을 때 여덟 줄이 한자리에 선다.

   © 와 나란히 선다(`.end` 가 양 끝으로 밀어 둔다). 좁은 화면에서는 줄을
   바꿔 아래로 쌓인다. */
footer .end .terms { gap: 0.3rem 1rem; font-size: 0.72rem; }
footer .end .terms a { color: inherit; }

/* ── 좁은 화면 ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* 좁은 화면에서는 이미지를 텍스트 위로 올린다. 위아래로 쌓을 때 먼저
     보이는 것이 이미지여야 무엇에 관한 영역인지 바로 전달된다. */
  .svc { grid-template-columns: minmax(0, 1fr); }

  /* **`width: 100%` 를 함께 적는다.** `max-width` 만 적으면 전역 규칙의
     `max-width: 100%` 를 덮어써서, 화면이 19rem 보다 좁을 때 이미지가 흰
     패널 밖으로 삐져나간다. 390px 화면에서는 패널 안쪽이 259px 이라 45px 이
     넘쳤고, 그 때문에 페이지 전체가 가로로 밀렸다. */
  .svc figure img { width: 100%; max-width: 19rem; }

  /* 로또미 섹션은 데스크톱에서 그림이 오른쪽이라 글을 먼저 적어 두었다.
     쌓이는 화면에서는 **그림이 먼저여야** 무엇에 관한 영역인지 바로
     전달되므로 자리를 바꾼다. */
  .svc.lottome figure { order: -1; }
}

/* ── 에이비 슬로건 제목 ───────────────────────────────────────────
   "혼자 써도, 같이 써도." / "생활비는 한곳에," / "기록은 리포트로." 세 줄
   (2026-11-03 대표) — 회사 첫 화면 에이비 섹션 제목과 에이비 소개 페이지
   첫 화면 제목이 같이 쓴다. 왼쪽 정렬, 좌우 폭은 맞추지 않는다.

   - **1줄은 머리글처럼 작게**(제목 크기의 0.7 배, 굵기 · 그라데이션
     그대로) — 2 · 3줄을 앞에서 받쳐 준다. 제목 크기(`font-size`)는 2 · 3줄
     크기이고, 각 페이지가 정한다
   - 1줄과 2줄 사이에만 한 숨 쉬는 여백 — 1줄 글자의 0.5em(제목 크기의
     0.35em). 2 · 3줄 사이는 보통 줄 간격 */
.slogan .s1, .slogan .s2 { display: block; }
.slogan .s1 { font-size: 0.7em; margin-bottom: 0.5em; }

/* 회사 첫 화면 에이비 섹션의 슬로건 제목 크기(2 · 3줄) — 넓은 화면
   39px 언저리, 한 칸 화면은 칸 폭에 비례(390px 34px). */
.svc .slogan { font-size: clamp(1.6rem, 4vw, 2.45rem); }
@media (max-width: 900px) {
  .svc .slogan { font-size: clamp(1.4rem, calc((100vw - 120px) / 8), 2.45rem); }
}

/* 강점은 한 칸이 11rem 아래로 내려가면 제목이 세 줄로 접힌다 — 그 전에
   한 줄에 하나씩으로 바꾼다. */
@media (max-width: 620px) {
  .svc dl { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) { .hide-sm { display: none; } }

/* ── 서비스 바로 가기 ───────────────────────────────────────────
   얇은 띠 하나. **선을 두지 않는다** — 위아래로 그어 보았더니 띠가 한
   덩이로 닫혀 아래 서비스 판과 붙어 보였고, 본문 폭 · 화면 끝까지 둘 다
   그어 본 뒤 대표가 뺐다(2026-11-03). 가르는 일은 여백이 한다 — 띠 아래를
   바깥 여백으로 넉넉히 띄운다.

   앱 하나가 목록 항목 하나(`li > a`)다. 앱이 늘어 시세판처럼 옆으로 흐르는
   줄로 바꿀 때는 **선 대신 양 끝을 흰색으로 서서히 흐리게**(`mask-image`
   가로 그라데이션) 한다 — 항목은 그대로 이어 붙이면 된다. */
.apps { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.apps .row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.2rem 1.6rem; list-style: none;
}
.apps a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0;
  font-size: 0.97rem; font-weight: 800; letter-spacing: -0.04em;
  color: var(--ink-2);
}
.apps a:hover { color: var(--ink); }

/* 아이콘은 이름 옆에 작게. 모서리는 iOS 가 입히는 것과 같은 정도로
   둥글린다(`.svc .who img` 와 같은 결). */
.apps a img { width: 1.5rem; height: 1.5rem; border-radius: 0.42rem; flex: none; }

/* 사이를 가르는 선. **글자로 `|` 를 적지 않는다** — 화면 읽기 도구가
   그것을 읽어 버리고, 줄이 접히는 화면에서는 선만 남는다. */
.apps li + li { position: relative; }
/* ── 서비스마다의 약관 ──────────────────────────────────────────
   그 서비스를 읽은 자리에서 그 글로 간다. 판 전체를 가로질러 맨 아래에
   조용히 선다 — 읽을 글이 아니라 **필요할 때 찾는 줄**이다.

   **밑줄을 두지 않는다.** 밑줄이 둘 서면 그 자리가 본문보다 먼저 눈에
   든다 — 손을 얹으면 색만 짙어진다. */
.svc .legal {
  grid-column: 1 / -1;
  margin-top: clamp(1.4rem, 2.5vw, 2rem);
  padding-top: 1.1rem; border-top: 1px solid #E3E3E6;
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: 0.4rem 1.4rem;
  font-size: 0.86rem; color: var(--ink-3);
}
.svc .legal a { color: inherit; }
.svc .legal a:hover { color: var(--ink); }

.apps li + li::before {
  content: ""; position: absolute; left: -0.8rem; top: 50%;
  width: 1px; height: 0.95rem; transform: translateY(-50%);
  background: var(--rule);
}