/* platys.kr — 그룹 공홈.
 *
 * 골격(레이아웃·간격·컴포넌트)은 `../saju/public/styles.css` 를 가져왔고, 그쪽은
 * 다시 `../ggeuduck/web/styles.css` 에서 온 것입니다. 색과 서체만 우리 것으로
 * 갈아끼웠습니다. 값을 참조하지 않고 **읽어서 베껴 옵니다** (CLAUDE.md 헌법).
 *
 * 🔴 여기는 **중립 팔레트**입니다 (DESIGN §4-4, 2026-09-10 사용자 결정).
 * 끄덕은 꿀 앰버 + 크림, 사주는 남색 먹 + 미색 종이입니다. 둘 중 하나를 그룹에
 * 올리면 그룹이 그 제품의 부속으로 읽힙니다 — 끄덕이 그룹 이름 노릇을 하던 문제를
 * 색으로 반복하는 것입니다. 그래서 골격은 무채색이고, **색은 서비스 카드 안에서만**
 * 씁니다. 카드 밖으로 번지면 규칙이 무너집니다.
 *
 * 🔴 강조색이 둘인 이유: 칠·선(`--accent` #0f7c6f)과 글자(`--accent-ink` #0b5f55)가
 * 다릅니다. 칠 값은 가라앉은 바탕(#ebebed) 위에서 4.26 이라 작은 글씨로 쓰면
 * 미달입니다. **선과 칠에는 `--accent`, 글자에는 `--accent-ink`.** 사주 theme.ts 의
 * seal/sealInk 와 같은 규칙이고, 값만 다릅니다.
 */

/* 서체 — 본문·제목 모두 Pretendard 하나입니다 (SIL OFL 1.1).
 *
 * 🔴 **끄덕·사주와 다른 판단입니다.** 둘은 제목에 개성 있는 서체를 씁니다
 * (Jua / 나눔명조). 우리는 안 씁니다. 이유 셋:
 *   1. 중립의 극단은 서체를 늘리지 않는 것입니다. 두 제품이 각자 얼굴을 갖고
 *      있으므로 그룹은 물러나 있는 편이 맞습니다
 *   2. Firebase Hosting 무료 티어의 전송량이 **360MB/일** 입니다 (확인 2026-09-10).
 *      한글 웹폰트 한 벌이 그 예산에서 가장 큰 덩어리입니다
 *   3. 제목-본문 대비는 굵기·크기·자간으로 만듭니다
 * 되돌리려면 `--font-display` 한 줄입니다 — 그러라고 토큰을 갈라 두었습니다. */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');

:root {
  /* 무채색 램프. 종이도 글자도 여기서 나옵니다 — 끄덕(따뜻한 크림)·사주(따뜻한
   * 종이 + 찬 남색 글자)와 달리 우리는 한 계열입니다. 그게 중립입니다. */
  --n-0: #ffffff;    /* 카드 */
  --n-25: #fafafa;   /* 보간 */
  --n-50: #f4f4f5;   /* 종이 — 바탕 */
  --n-100: #ebebed;  /* 가라앉은 면 (푸터·띠) */
  --n-200: #dcdce0;  /* 테두리 */
  --n-300: #c4c4ca;  /* 진한 테두리 */
  --n-400: #9a9aa3;  /* ⛔ 글자 금지 — 종이 위 2.53 */
  --n-500: #71717a;  /* ⛔ 글자 금지 — 종이 위 4.39. **아깝게 미달입니다** */
  --n-600: #52525b;  /* 보조 글자는 여기서부터 — 종이 위 7.03 */
  --n-700: #3f3f46;  /* 본문보다 한 단 여린 글자 */
  --n-900: #1c1c20;  /* 본문 글자 */

  --bg: var(--n-50);
  --surface: var(--n-0);
  --surface-sunken: var(--n-100);

  --border: var(--n-200);
  --border-strong: var(--n-300);
  --border-subtle: var(--n-100);

  --text: var(--n-900);

  /* 🔴 실측으로 잡은 값입니다 (2026-09-10, `npm run contrast`).
   *
   * 사주가 앱 토큰을 그대로 베꼈다가 보조 글자 둘이 WCAG AA 미달이었습니다
   * (3.36 / 1.93). 같은 함정을 밟지 않으려고 **팔레트를 정하는 자리에서 쟀습니다.**
   *
   * ⚠️ 기준 바탕이 셋입니다. 가장 어두운 **가라앉은 면(#ebebed)** 이 결정합니다 —
   * 푸터가 그 바탕이고 사업자 정보·저작권이 거기서 가장 작은 글자입니다.
   *
   *   토큰              종이   카드   가라앉은   판정
   *   --n-400 #9a9aa3   2.53   2.79   2.34      ❌
   *   --n-500 #71717a   4.39   4.83   4.05      ❌  ← 흔히 쓰는 회색인데 미달입니다
   *   #66666f           5.17   5.68   4.77      ✅  → --text-faint
   *   --n-600 #52525b   7.03   7.72   6.49      ✅  → --text-muted
   *
   * ⚠️ `#66666f` 은 **램프에 없는 값**입니다. `--n-500` 을 통과할 때까지 어둡게 한
   * 것이고, 램프를 한 단 늘리는 대신 여기 한 줄로 둡니다. */
  --text-muted: var(--n-600);
  --text-faint: #66666f;
  --text-on-ink: var(--n-0);

  /* 먹색 — 주된 동작. 브랜드색이 아니라 잉크입니다. 컨트롤이 많은 화면이
   * 색상표가 되지 않게 하는 규칙입니다 (사주에서 가져온 규칙). */
  --ink: var(--n-900);
  --ink-soft: var(--n-700);

  /* 강조 — 하나뿐입니다. 링크 밑줄·초점 테두리·작은 표식에만 씁니다.
   * ⛔ 넓은 면을 이 색으로 칠하지 마세요. 서비스 카드가 자기 색을 낼 자리가
   *    없어집니다 (DESIGN §4-4 지킬 것 2). */
  --accent: #0f7c6f;         /* 선·칠. 종이 위 4.62 / 가라앉은 위 4.26 — 3:1 통과, 글자는 미달 */
  --accent-ink: #0b5f55;     /* 글자용. 6.86 / 7.54 / 6.33 — 전부 통과 */
  --accent-tint: #e3f4f0;    /* 🟢 이 바탕 위 --accent-ink 는 6.63 으로 통과합니다.
                              *    (사주는 같은 자리가 4.44 로 미달이라 금지 주석이 붙어 있습니다) */
  --accent-border: #b3ded6;

  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-xxl: 28px;

  /* 그림자는 색이 먼저이고 세기는 나중입니다. 끄덕은 따뜻한 갈색, 사주는 남색을
   * 씁니다 — 각자 램프의 어두운 끝에서 나온 색입니다. 우리 램프는 무채색이라
   * 그림자도 무채색입니다. */
  --shadow-card: 0 2px 5px rgba(24, 24, 27, 0.06);
  --shadow-raised: 0 4px 14px rgba(24, 24, 27, 0.1);

  /* 🔴 제목과 본문이 같은 스택입니다. 위 서체 주석의 이유 셋을 보세요.
   * 개성 있는 제목 서체를 들이려면 이 한 줄만 바꿉니다. */
  --font-display: 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-body: var(--font-display);

  --measure: 760px;
}

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

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  /* 웹은 읽는 거리가 멀어 16px입니다. 끄덕·사주와 같은 값입니다. */
  font-size: 16px;
  line-height: 1.7;
  /* 한글은 단어 중간에서 끊지 않습니다 */
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* ── 타이포 ─────────────────────────────────────────────────────────
 * 제목 서체가 따로 없으므로 위계는 **굵기와 자간**이 만듭니다. 큰 글자일수록
 * 자간을 좁힙니다 — 안 좁히면 제목이 성기게 벌어져 힘을 잃습니다. */

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.025em;
}

h1 {
  font-size: clamp(30px, 6vw, 44px);
  letter-spacing: -0.035em;
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 17px;
  letter-spacing: -0.02em;
}

a {
  color: inherit;
  text-decoration-color: var(--accent-border);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: var(--accent);
}

/* 초점 표시를 지우지 않습니다. 키보드로만 다니는 사람에게는 이것이 커서입니다. */
a:focus-visible,
.btn:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

strong {
  font-weight: 600;
}

/* 작은 머리글. 자간을 넓게 벌리는 것은 로마자의 관용이라 한글에는 얕게만 줍니다 —
 * 자모가 성기게 벌어지면 한 글자가 두 덩어리로 보입니다. */
.label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  text-transform: uppercase;
}

.muted {
  color: var(--text-muted);
  font-size: 14px;
}

.lead {
  font-size: 17px;
  color: var(--ink-soft);
}

/* ── 레이아웃 ───────────────────────────────────────────────────── */

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding-inline: var(--space-xl);
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: var(--space-lg);
  top: var(--space-lg);
  z-index: 10;
  background: var(--surface);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
}

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

.site-header {
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
}

/* backdrop-filter를 모르는 브라우저에서는 반투명 배경만 남아 글이 겹쳐 보입니다.
 * 그런 곳에서는 불투명한 종이로 되돌립니다. */
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--bg); }
}

 /* 🔴 **첫 줄에만** 겁니다. 머리글 안에는 `.wrap` 이 둘(이름 줄·탭 줄)이라
  * `.site-header .wrap` 으로 걸면 **탭 줄도 flex 가 되어 탭이 내용 폭으로
  * 쪼그라듭니다** (2026-09-10 에 실제로 그렇게 나왔습니다). */
.site-header .head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

/* 이름이 로마자라 자간을 조금 벌립니다. 한글 규칙(얕게)이 여기엔 안 걸립니다. */
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.01em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.site-header .wordmark {
  font-size: 22px;
}

/* 마크는 파비콘 파일을 그대로 부릅니다. 한 파일이 탭과 머리글 양쪽을 그립니다. */
.site-header .wordmark::before {
  content: '';
  flex: none;
  width: 26px;
  height: 26px;
  background: url('/favicon.svg') center / contain no-repeat;
}

/* 🔴 **이름 줄의 nav 에만** 겁니다. `.site-header nav` 로 넓게 걸면 아래 탭 줄까지
 * 걸리고, 그쪽이 더 강해서(`.site-header nav` 는 0,1,1 / `.tabs` 는 0,1,0)
 * **탭의 `display: grid` 를 이깁니다** — 탭이 flex 가 되어 왼쪽에 몰립니다.
 * 2026-09-10 에 실제로 그렇게 나왔고, 화면을 보고서야 알았습니다. */
.site-header .head-row nav {
  display: flex;
  gap: var(--space-lg);
  font-size: 13px;
  color: var(--text-muted);
}

.site-header .head-row nav a {
  text-decoration: none;
}

.site-header .head-row nav a:hover {
  color: var(--text);
}

/* ── 서비스 탭 (고정) ────────────────────────────────────────────────
 * 머리글 안에 들어앉은 두 번째 줄입니다. **머리글과 한 덩어리로 고정됩니다** —
 * 고정되는 것을 둘로 나누면 위쪽 높이만큼 아래를 밀어야 하고, 그 높이는 화면 폭에
 * 따라 변해서 숫자로 못 박습니다. 하나로 두면 그 계산이 사라집니다.
 *
 * 지금 보고 있는 섹션에 불이 들어오고(아래 `.tab[aria-current]`), 누르면 그 섹션으로
 * 갑니다. 불을 켜는 것은 스크립트지만 **이동은 순수 앵커**라, 스크립트가 막혀도
 * 탭은 여전히 동작합니다 (끄덕·사주가 세운 원칙과 같습니다).
 *
 * 칸은 넷이 같은 폭입니다. 서비스가 늘면 `1fr` 이 자동으로 나눕니다. */

/* 탭이 붙어 있는 띠. **히어로 글 바로 아래**에 놓이고, 스크롤해서 위에 닿으면
 * 거기 붙습니다 (2026-09-10 사용자). 그래서 고정되는 것은 머리글이 아니라
 * 이것 하나입니다 — 머리글까지 고정하면 위가 두 겹이 되고, 좁은 화면에서 본문이
 * 볼 자리를 잃습니다.
 *
 * 🔴 sticky 는 **스크롤되는 조상 안에서만** 버팁니다. 이 띠를 히어로 안에 넣으면
 * 히어로가 지나가는 순간 같이 사라집니다. 그래서 히어로의 **형제**로 둡니다. */
.tabs-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  /* 🔴 **불투명입니다.** 반투명 + blur 로 두면 뒤의 큰 제목이 비쳐서 탭 글자와
   * 겹칩니다 (2026-09-10 실측). 머리글처럼 잠깐 스치는 것이면 몰라도, 이 띠는
   * 페이지 내내 붙어 있고 **어디에 있는지를 읽는 장치**라 뒤가 비치면 안 됩니다. */
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  /* 붙었을 때 아래 내용과 떨어져 보이게. 안 붙었을 때도 같은 그림자지만 바로
   * 위아래가 같은 종이라 눈에 띄지 않습니다 */
  box-shadow: 0 1px 0 rgba(24, 24, 27, 0.02), 0 6px 16px -12px rgba(24, 24, 27, 0.5);
}

.tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 10px var(--space-sm) 12px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  /* 칸 사이의 구분선. 첫 칸 왼쪽에는 안 긋습니다 */
  border-left: 1px solid var(--border-subtle);
  transition: color 0.15s ease, background 0.15s ease;
  min-width: 0;
}

.tab:first-child { border-left: 0; }
.tab:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 55%, transparent); }

/* 불 — 활성 표시.
 * 🔴 **글자는 브랜드색으로 칠하지 않습니다.** 끄덕 앰버(#eea93f)는 종이 위 대비가
 * 1.98 이라 글자로 못 씁니다. 그래서 **글자는 먹색으로 진해지고, 색은 아래 막대가**
 * 냅니다 (막대는 장식이라 대비 기준이 안 걸립니다). DESIGN §4-4 와 같은 규칙입니다. */
.tab[aria-current='true'] {
  color: var(--text);
}

.tab::after {
  content: '';
  position: absolute;
  left: var(--space-md);
  right: var(--space-md);
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--brand, var(--accent));
  /* 자리를 늘 잡아 두고 보이기만 바꿉니다 — 켜질 때 글자가 밀리지 않게 */
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.tab[aria-current='true']::after {
  opacity: 1;
  transform: scaleX(1);
}

/* 아직 없는 서비스. 글자를 죽이지 않고 **아이콘만** 물러나게 합니다 —
 * 글자까지 흐리면 대비가 무너집니다 */
.tab[data-ready='no'] .tab-mark { opacity: 0.45; }

.tab-mark {
  flex: none;
  width: 20px;
  height: 20px;
  display: block;
}

.tab-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 좁은 화면에서는 이름을 아이콘 아래로 내리고 글자를 줄입니다. 한 줄로 버티면
 * 네 칸이 서로를 밀어내 이름이 잘립니다. */
@media (max-width: 560px) {
  .tab {
    flex-direction: column;
    gap: 3px;
    padding: 8px 4px 10px;
    font-size: 11.5px;
    letter-spacing: -0.02em;
  }
  .tab::after { left: 8px; right: 8px; }
}

/* ── 카드 ───────────────────────────────────────────────────────────
 * 테두리도 그림자도 거의 없습니다. 종이 위의 밝은 면은 명도 차이만으로 이미
 * 카드로 섭니다. 선까지 그으면 한 화면에 테두리가 여러 겹이 됩니다. */

.card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-xl) var(--space-xxl);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  padding: 11px var(--space-xl);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.btn-primary {
  background: var(--ink);
  color: var(--text-on-ink);  /* 흰 글자 대비 16.98 */
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-raised);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}

.btn-secondary:hover {
  border-color: var(--accent-border);
  background: var(--accent-tint);
}

/* 움직임을 원치 않는다고 밝힌 사람에게는 움직이지 않습니다. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .btn-primary:hover { transform: none; }
}

/* 출시 전 상태 표시 */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-tint);
  border: 1px solid var(--accent-border);
  color: var(--ink-soft);   /* 틴트 위 8.76 */
  font-size: 13px;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ── 랜딩 전용 규칙은 여기 없습니다 ──────────────────────────────────
 * 히어로·띠·브랜드 판은 `index.html` 의 `<style>` 안에 있습니다. 끄덕·사주가
 * 똑같이 그렇게 나눠 두었습니다 — `styles.css` 는 **여러 쪽이 함께 쓰는 골격**이고,
 * 랜딩에만 있는 것은 랜딩이 듭니다. 서비스 페이지가 생기면 그 쪽도 이 골격 위에
 * 자기 것만 얹습니다. */

/* ── 푸터 ───────────────────────────────────────────────────────────
 * 톤을 한 단 낮춥니다. 본문이 끝났다는 것을 선 하나로만 알리면, 사업자 정보처럼
 * 글자가 작고 줄이 많은 덩어리가 본문의 마지막 문단처럼 읽힙니다. */

.site-footer {
  padding-block: var(--space-xxl) 44px;
  border-top: 1px solid var(--border);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: 14px;
}

.site-footer .wrap {
  display: grid;
  gap: var(--space-lg);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  align-items: center;
  justify-content: space-between;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
}

.site-footer nav a { text-decoration: none; }
.site-footer nav a:hover { color: var(--text); text-decoration: underline; }

/* ── 사업자 정보 ────────────────────────────────────────────────────
 * 값이 아직 없는 항목은 아예 적지 않습니다 — 비워 둔 자리를 남기는 것보다 없는
 * 편이 낫고, 틀린 값을 임시로 채워 두면 그대로 굳습니다. 값이 생기면 `<li>`를
 * 늘리면 됩니다. 끄덕·사주가 같은 형태입니다. */
.biz {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-md);
  font-size: 13px;
  color: var(--text-faint);
  line-height: 1.6;
}

.biz li { display: flex; gap: 5px; }
.biz b { font-weight: 600; color: var(--text-muted); }
.biz a { color: inherit; }

.copyright {
  font-size: 13px;
  color: var(--text-faint);
}

@media (max-width: 560px) {
  .card,
  .service {
    padding: var(--space-lg) var(--space-xl);
  }
}