/* 공개 페이지 공통 스타일 — 색·글꼴·모양은 app/CLAUDE.md 4장 디자인 시스템을 따른다 */

/* 글꼴: 페이지에 쓰인 글자만 남긴 서브셋을 직접 내보낸다 (외부 CDN 없음 — web/README.md) */
@font-face {
  font-family: 'Jua';
  src: url('/assets/fonts/jua.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gowun Dodum';
  src: url('/assets/fonts/gowun-dodum.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --background: #f4f2fb;
  --card: #ffffff;
  --ink: #2e2a4a;
  --ink-sub: #5b5675;
  --ink-soft: #4a4566;
  --line: #d9d5ea;
  --divider: #ece9f6;
  --chip-bg: #e6e2f3;
  --danger: #b23a26;
  --danger-line: #d9604a;
  --warm-note: #fff1c9;

  /* 서브셋에 없는 글자는 시스템 글꼴로 대체된다 */
  --font-title: 'Jua', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --font-body: 'Gowun Dodum', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;

  --screen-x: 20px;
  --radius-input: 18px;
  --radius-card: 24px;
  --radius-card-lg: 32px;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--background);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

a {
  color: var(--ink);
  text-underline-offset: 3px;
}

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

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  line-height: 1.35;
}

p,
ul,
ol {
  margin: 0;
}

/* ── 틀 ───────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--screen-x);
}

.site-header .wrap {
  height: 64px;
  display: flex;
  align-items: center;
}

.brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-title);
  font-size: 20px;
  text-decoration: none;
}

.brand svg {
  width: 32px;
  height: 32px;
}

main {
  flex: 1 0 auto;
  padding: 8px 0 48px;
}

.site-footer {
  padding: 28px 0 36px;
  border-top: 1px solid var(--divider);
  color: var(--ink-sub);
  font-size: 13px;
  line-height: 1.6;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--ink-sub);
  font-size: 14px;
}

/* 개인정보 처리방침은 다른 링크와 구별되게 (표준 개인정보 처리방침 작성지침) */
.footer-links strong {
  color: var(--ink);
}

.footer-links a[aria-current='page'] {
  color: var(--ink);
  text-decoration-thickness: 2px;
}

/* ── 부품 ───────────────────────────────────── */

.card {
  padding: 20px;
  border-radius: var(--radius-card);
  background: var(--card);
}

.button {
  height: 56px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 28px;
  background: var(--ink);
  color: #ffffff;
  font-family: var(--font-title);
  font-size: 18px;
  text-decoration: none;
}

.button.soft {
  background: var(--card);
  color: var(--ink);
}

.button svg {
  width: 22px;
  height: 22px;
  flex: none;
}

.note {
  padding: 16px 18px;
  border-radius: var(--radius-input);
  background: var(--warm-note);
  color: var(--ink-soft);
  font-size: 15px;
}

/* 확정되지 않은 사실 — 게시 전에 모두 채우고 지운다 (grep "확인 필요") */
.todo {
  padding: 1px 6px;
  border: 1px dashed var(--danger-line);
  border-radius: 6px;
  background: var(--warm-note);
  color: var(--danger);
  font-size: 0.9em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.draft {
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 1px dashed var(--danger-line);
  border-radius: var(--radius-input);
  background: var(--warm-note);
  color: var(--danger);
  font-size: 14px;
}

/* ── 문서 (약관·처리방침·지원·계정 삭제) ───────────────── */

.doc-head {
  margin: 8px 0 20px;
}

.doc-head h1 {
  font-size: 30px;
}

.doc-head .lead {
  margin-top: 8px;
  color: var(--ink-soft);
}

.doc-head .meta {
  margin-top: 6px;
  color: var(--ink-sub);
  font-size: 14px;
}

.doc {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.doc section {
  padding: 22px 20px;
  border-radius: var(--radius-card);
  background: var(--card);
  color: var(--ink-soft);
  font-size: 15px;
  scroll-margin-top: 16px;
}

.doc h2 {
  margin-bottom: 12px;
  color: var(--ink);
  font-size: 20px;
}

.doc h3 {
  margin: 18px 0 8px;
  color: var(--ink);
  font-size: 17px;
}

.doc p + p,
.doc p + ul,
.doc p + ol,
.doc ul + p,
.doc ol + p,
.doc .table-wrap + p,
.doc p + .table-wrap {
  margin-top: 10px;
}

.doc ul,
.doc ol {
  padding-left: 1.3em;
}

.doc li + li {
  margin-top: 6px;
}

.doc strong {
  color: var(--ink);
}

.summary {
  margin: 0 0 14px;
  padding: 20px;
  border-radius: var(--radius-card);
  background: var(--warm-note);
  color: var(--ink-soft);
  font-size: 15px;
}

.summary h2 {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 18px;
}

.toc {
  margin: 0 0 14px;
  padding: 18px 20px;
  border-radius: var(--radius-card);
  background: var(--chip-bg);
  font-size: 15px;
}

.toc summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-family: var(--font-title);
  font-size: 17px;
  cursor: pointer;
}

.toc ol {
  margin: 4px 0 4px;
  padding-left: 1.4em;
}

.toc li + li {
  margin-top: 4px;
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--divider);
  border-radius: 14px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.6;
}

th,
td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--divider);
  text-align: left;
  vertical-align: top;
  /* anywhere는 칸 최소 폭을 한 글자로 줄여 "미/국"처럼 꺾이므로 표 안에서는 단어 단위로 */
  overflow-wrap: break-word;
}

tr:last-child td {
  border-bottom: 0;
}

th {
  background: var(--background);
  color: var(--ink);
  font-weight: 400;
  font-family: var(--font-title);
  white-space: nowrap;
}

/* 열이 많은 표는 휴대폰 폭에서 행마다 카드처럼 쌓는다 (td의 data-label이 열 이름) */
@media (max-width: 559px) {
  table.stack thead {
    display: none;
  }

  table.stack tr {
    display: block;
    padding: 12px 14px;
    border-bottom: 1px solid var(--divider);
  }

  table.stack tr:last-child {
    border-bottom: 0;
  }

  table.stack td {
    display: block;
    padding: 0;
    border: 0;
  }

  table.stack td + td {
    margin-top: 6px;
  }

  table.stack td:first-child {
    color: var(--ink);
    font-family: var(--font-title);
    font-size: 15px;
  }

  table.stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--ink-sub);
    font-size: 12px;
  }
}

.steps {
  counter-reset: step;
  list-style: none;
  padding: 0 !important;
}

.steps li {
  position: relative;
  min-height: 32px;
  padding-left: 44px;
}

.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: var(--ink);
  color: #ffffff;
  font-family: var(--font-title);
  font-size: 15px;
}

.steps li + li {
  margin-top: 12px;
}

.path {
  font-family: var(--font-title);
  color: var(--ink);
}

.faq details + details {
  border-top: 1px solid var(--divider);
}

.faq summary {
  min-height: 52px;
  padding: 12px 28px 12px 0;
  position: relative;
  display: flex;
  align-items: center;
  color: var(--ink);
  font-family: var(--font-title);
  font-size: 16px;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -7px;
  border-right: 2.2px solid var(--ink-sub);
  border-bottom: 2.2px solid var(--ink-sub);
  transform: rotate(45deg);
}

.faq details[open] summary::after {
  margin-top: -2px;
  transform: rotate(-135deg);
}

.faq details p {
  padding-bottom: 14px;
}

.company dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 0;
}

.company dt {
  color: var(--ink);
}

.company dd {
  margin: 0;
}

@media (min-width: 768px) {
  .doc-head h1 {
    font-size: 36px;
  }

  .doc section {
    padding: 28px 32px;
    font-size: 16px;
  }
}

/* ── 다운로드 (/) ───────────────────────────── */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 24px 0 8px;
  text-align: center;
}

.faces {
  width: 260px;
  height: 190px;
}

.hero h1 {
  font-size: 52px;
  letter-spacing: -1px;
}

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

.download {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}

.get {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.get .button {
  width: 100%;
}

.get .hint {
  margin-top: 4px;
  color: var(--ink-sub);
  font-size: 14px;
  text-align: center;
}

.qr-card {
  display: none;
  width: 100%;
  max-width: 400px;
  padding: 24px;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-radius: var(--radius-card-lg);
  background: var(--card);
  text-align: center;
}

.qr-card h2 {
  font-size: 20px;
}

.qr-card p {
  color: var(--ink-sub);
  font-size: 15px;
}

.qr {
  width: 184px;
  height: 184px;
}

.qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 기기에 맞는 스토어 버튼만 앞에 보여 준다 (download.js가 html에 클래스를 붙임) */
.is-ios .store-android,
.is-android .store-ios {
  display: none;
}

/* PC: QR을 먼저, 스토어 버튼은 그 아래 한 줄로 */
.is-desktop .qr-card {
  display: flex;
}

.is-desktop .get {
  order: 1;
}

.is-desktop .get .hint {
  display: none;
}

@media (min-width: 560px) {
  .is-desktop .get {
    max-width: 480px;
    flex-direction: row;
  }

  .is-desktop .get .button {
    flex: 1 1 0;
    padding: 0 16px;
    gap: 6px;
    font-size: 17px;
    white-space: nowrap;
  }
}

/* ── 앱 안 웹뷰 ─────────────────────────────── */
/* 앱의 약관 및 정책 화면(app/src/app/terms.tsx)이 html에 in-app을 단다.
   앱 시안(Terms)처럼 흰 카드 하나 안에 제목 · 시행일 · 구분선 · 이어지는 본문으로 보인다. 머리말·꼬리말·목차는 앱 화면이 맡거나 뺀다 */

html.in-app body {
  background: var(--card);
}

html.in-app .site-header,
html.in-app .site-footer,
html.in-app .toc {
  display: none;
}

html.in-app .wrap {
  padding: 0;
}

html.in-app main {
  padding: 20px 20px 28px;
}

html.in-app .draft {
  margin-bottom: 14px;
  font-size: 13px;
}

html.in-app .doc-head {
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--divider);
}

html.in-app .doc-head h1 {
  font-size: 19px;
}

html.in-app .doc-head .meta {
  margin-top: 4px;
  font-size: 13px;
}

html.in-app .doc-head .lead {
  font-size: 15px;
  line-height: 1.7;
}

html.in-app .doc {
  gap: 20px;
}

html.in-app .doc section {
  padding: 0;
  border-radius: 0;
  background: none;
  line-height: 1.7;
}

/* 처리방침 "한눈에 보기"는 강조 상자로 남긴다 */
html.in-app .summary {
  padding: 16px;
  border-radius: var(--radius-input);
  line-height: 1.7;
}

html.in-app .doc h2,
html.in-app .summary h2 {
  margin-bottom: 6px;
  font-size: 16px;
}

html.in-app .doc h3 {
  margin: 12px 0 4px;
  font-size: 15px;
}