/* ==========================================================================
   PACER 회원 탈퇴 안내 스타일
   - 앱 WebView 임베드를 전제로 한 모바일 퍼스트
   - 디자인 토큰(색·서체·라운드)은 public/common/assets/css/terms.css 와 같은 값을 쓴다.
     약관 페이지는 API 로 받아온 본문을 렌더링하는 규칙이 대부분이라 통째로 가져오지 않고,
     이 페이지에 필요한 것만 따로 둔다. 토큰을 바꿀 때는 두 파일을 함께 손봐야 한다.
   ========================================================================== */

:root {
  --doc-bg: #f6f7f9;
  --doc-surface: #ffffff;
  --doc-fg: #16181d;
  --doc-fg-muted: #6b7280;
  --doc-fg-subtle: #9ca3af;
  --doc-border: #e5e7eb;
  --doc-border-strong: #d1d5db;
  --doc-accent: #16181d;
  --doc-accent-fg: #ffffff;
  --doc-accent-soft: #eef0f3;

  /* 헤더 밴드. 로고 아트워크가 흰색이라 어두운 바탕을 깔아 원본 그대로 쓴다.
     라이트/다크 모두 어두운 색이므로 페이지 토큰과 따로 둔다 */
  --hero-bg: #16181d;
  --hero-fg: #ffffff;
  --hero-muted: rgba(255, 255, 255, 0.62);
  --hero-subtle: rgba(255, 255, 255, 0.42);
  --hero-line: rgba(255, 255, 255, 0.14);

  /* 되돌릴 수 없다는 경고에만 쓰는 색 */
  --doc-warn-bg: #fff8e6;
  --doc-warn-border: #f0d79a;
  --doc-warn-fg: #7a5804;
  --doc-warn-strong: #5c4203;
  --doc-warn-chip: rgba(122, 88, 4, 0.1);

  --doc-radius: 16px;
  --doc-radius-sm: 10px;
  --doc-max: 760px;

  --doc-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
  --doc-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);

  --doc-font: -apple-system, BlinkMacSystemFont, "Pretendard", "Pretendard Variable",
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "맑은 고딕", Inter,
    "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --doc-bg: #0d0e11;
    --doc-surface: #16181d;
    --doc-fg: #ececef;
    --doc-fg-muted: #9ca3af;
    --doc-fg-subtle: #6b7280;
    --doc-border: #272a31;
    --doc-border-strong: #3a3e47;
    --doc-accent: #ececef;
    --doc-accent-fg: #16181d;
    --doc-accent-soft: #21242b;

    /* 페이지 바탕(#0d0e11)보다 한 단 밝게 띄워야 밴드로 읽힌다 */
    --hero-bg: #1b1f27;

    --doc-warn-bg: #2b2410;
    --doc-warn-border: #574721;
    --doc-warn-fg: #e8cf92;
    --doc-warn-strong: #f5e4bb;
    --doc-warn-chip: rgba(232, 207, 146, 0.12);

    --doc-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
    --doc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--doc-bg);
  color: var(--doc-fg);
  font-family: var(--doc-font);
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

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

a:hover {
  text-decoration-color: currentColor;
}

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

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.doc-header {
  position: relative;
  overflow: hidden;
  color: var(--hero-fg);
  /* 오른쪽 위에서 옅게 번지는 빛으로 평평한 색면에 깊이를 준다 */
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(255, 255, 255, 0.11) 0%, transparent 58%),
    var(--hero-bg);
}

.doc-header__inner {
  position: relative;
  max-width: var(--doc-max);
  margin: 0 auto;
  padding: 30px 20px 26px;
}

/* 제목 위 PACER 로고.
   파일은 public/common/assets/logo 를 그대로 참조한다. 흰색 아트워크라 어두운 헤더 위에서는
   보정 없이 원본 그대로 쓴다 (밝은 바탕에 올릴 때만 뒤집어야 한다 - 인쇄 규칙 참고) */
.doc-logo {
  display: block;
  width: auto;
  height: 24px;
  margin: 0 0 18px;
}

.doc-title {
  margin: 0;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.035em;
  color: var(--hero-fg);
}

.doc-lead {
  margin: 10px 0 0;
  max-width: 46ch;
  font-size: 14px;
  line-height: 1.7;
  color: var(--hero-muted);
}

/* 스토어 심사용 앱·개발자 표기. 제목 아래에 한 줄로 붙는다 */
.doc-app {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--hero-line);
  font-size: 13px;
  line-height: 1.6;
}

.doc-app > div {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.doc-app dt {
  flex: none;
  font-weight: 600;
  color: var(--hero-subtle);
}

.doc-app dd {
  margin: 0;
  font-weight: 700;
  color: var(--hero-fg);
}

/* --------------------------------------------------------------------------
   Section
   -------------------------------------------------------------------------- */

.doc-main {
  max-width: var(--doc-max);
  margin: 0 auto;
  padding: 28px 20px 64px;
  /* 섹션 번호(01, 02 …)를 마크업에 적지 않고 순서대로 매긴다 */
  counter-reset: section;
}

.doc-section + .doc-section {
  margin-top: 34px;
}

.doc-section__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 14px;
}

.doc-section__head::before {
  counter-increment: section;
  content: counter(section, decimal-leading-zero);
  flex: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--doc-fg-subtle);
  font-variant-numeric: tabular-nums;
}

.doc-section__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.025em;
}

.doc-section__desc {
  margin: -6px 0 14px 32px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--doc-fg-muted);
}

.doc-card {
  padding: 22px 20px;
  border: 1px solid var(--doc-border);
  border-radius: var(--doc-radius);
  background: var(--doc-surface);
  box-shadow: var(--doc-shadow);
}

.doc-card > :first-child {
  margin-top: 0;
}

.doc-card > :last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   1. 유의사항 — 되돌릴 수 없는 동작이라 색을 따로 준다
   -------------------------------------------------------------------------- */

.notice {
  padding: 20px;
  border: 1px solid var(--doc-warn-border);
  border-radius: var(--doc-radius);
  background: var(--doc-warn-bg);
  color: var(--doc-warn-fg);
}

.notice__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.notice__list li {
  display: flex;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--doc-warn-border);
  font-size: 14.5px;
  line-height: 1.65;
}

.notice__list li:first-child {
  padding-top: 0;
  border-top: 0;
}

.notice__list li:last-child {
  padding-bottom: 0;
}

.notice__list svg {
  flex: none;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  padding: 6px;
  border-radius: 9px;
  background: var(--doc-warn-chip);
}

.notice strong {
  color: var(--doc-warn-strong);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   2. 탈퇴 절차 — 단계별 네모 카드
   -------------------------------------------------------------------------- */

/* 번호를 카드 밖 왼쪽 레일에 세우고 세로선으로 이어 진행 흐름을 보여준다 */
.steps {
  position: relative;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0 0 0 42px;
  list-style: none;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 16px 18px;
  border: 1px solid var(--doc-border);
  border-radius: var(--doc-radius-sm);
  background: var(--doc-surface);
  box-shadow: var(--doc-shadow-sm);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.step:hover {
  transform: translateY(-1px);
  box-shadow: var(--doc-shadow);
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 17px;
  left: -42px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  /* 세로선 위에 얹히므로 바탕색 링으로 선을 끊어 준다 */
  box-shadow: 0 0 0 4px var(--doc-bg);
  background: var(--doc-accent);
  color: var(--doc-accent-fg);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* 배지와 배지를 잇는 선. 마지막 단계 뒤에는 이어질 곳이 없어 그리지 않는다.
   길이를 카드 높이가 아니라 배지 위치에서 뽑아, 카드가 길어져도 선이 삐져나오지 않는다.
   (43px = 배지 top 17 + 높이 26, -27px = 카드 간격 10 + 다음 배지 top 17) */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: -30px;
  top: 43px;
  bottom: -27px;
  width: 2px;
  border-radius: 1px;
  background: var(--doc-border-strong);
}

.step__body {
  min-width: 0;
}

.step__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.step__desc {
  margin: 3px 0 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--doc-fg-muted);
}

/* 앱에서 그대로 눌러야 하는 메뉴 이름 */
.key {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--doc-border-strong);
  border-radius: 6px;
  background: var(--doc-accent-soft);
  color: var(--doc-fg);
  font-size: 0.9em;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

/* 메뉴 경로 사이 화살표 */
.key-sep {
  margin: 0 3px;
  color: var(--doc-fg-subtle);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   3. 개인정보 처리 안내 — 표
   -------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--doc-border);
  border-radius: var(--doc-radius);
  background: var(--doc-surface);
  box-shadow: var(--doc-shadow);
  -webkit-overflow-scrolling: touch;
}

.doc-table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 14px;
}

.doc-table th,
.doc-table td {
  padding: 13px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--doc-border);
  line-height: 1.6;
}

.doc-table thead th {
  background: var(--doc-accent-soft);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--doc-fg-muted);
  white-space: nowrap;
}

.doc-table tbody tr:last-child th,
.doc-table tbody tr:last-child td {
  border-bottom: 0;
}

.doc-table tbody th {
  font-weight: 700;
}

.doc-table td:last-child {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--doc-fg-muted);
}

.doc-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--doc-fg-muted);
}

/* --------------------------------------------------------------------------
   4. 고객센터
   -------------------------------------------------------------------------- */

/* 대표 연락 수단. 눌러서 바로 메일을 쓸 수 있어야 해서 행 전체를 링크로 잡는다
   (WebView 에서 손가락으로 정확히 누르기 어려운 텍스트 링크를 피한다) */
.mailbox {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--doc-border-strong);
  border-radius: var(--doc-radius-sm);
  background: var(--doc-accent-soft);
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    transform 0.15s ease;
}

.mailbox:hover {
  border-color: var(--doc-fg-subtle);
  transform: translateY(-1px);
}

.mailbox__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--doc-accent);
  color: var(--doc-accent-fg);
}

.mailbox__icon svg {
  width: 20px;
  height: 20px;
}

.mailbox__body {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.mailbox__label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--doc-fg-muted);
}

.mailbox__value {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.015em;
  /* 주소가 길어도 카드를 밀지 않고 끊어 내린다 */
  overflow-wrap: anywhere;
}

.mailbox__go {
  flex: none;
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--doc-fg-subtle);
}

.contact {
  display: grid;
  gap: 2px;
  margin: 0;
}

.contact__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 11px 0;
  border-top: 1px solid var(--doc-border);
}

.contact__row:first-child {
  padding-top: 0;
  border-top: 0;
}

.contact__row:last-child {
  padding-bottom: 0;
}

.contact dt {
  flex: none;
  min-width: 76px;
  font-size: 13px;
  font-weight: 700;
  color: var(--doc-fg-muted);
}

.contact dd {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
}

.contact dd small {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--doc-fg-muted);
}

/* --------------------------------------------------------------------------
   FAQ (고객지원 페이지)

   contact 는 라벨과 값을 한 줄에 놓는 목록이라 질문·답변처럼 긴 글에는 맞지 않는다.
   질문을 카드 제목처럼 세우고 답변을 그 아래 문단으로 흘리는 형태로 따로 둔다.
   -------------------------------------------------------------------------- */

.faq {
  display: grid;
  gap: 10px;
  margin: 0;
}

.faq__item {
  padding: 16px 18px;
  border: 1px solid var(--doc-border);
  border-radius: var(--doc-radius-sm);
  background: var(--doc-surface);
  box-shadow: var(--doc-shadow-sm);
}

.faq dt {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.faq dd {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--doc-fg-muted);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.doc-footer {
  max-width: var(--doc-max);
  margin: 0 auto;
  padding: 0 20px 48px;
  color: var(--doc-fg-subtle);
  font-size: 12.5px;
  line-height: 1.7;
}

.doc-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--doc-border);
}

.doc-footer nav a {
  color: var(--doc-fg-muted);
  font-weight: 600;
  text-decoration: none;
}

.doc-footer nav a:hover {
  color: var(--doc-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.doc-footer p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Responsive / Print
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
  body {
    font-size: 15.5px;
  }

  .doc-header__inner {
    padding: 34px 24px 30px;
  }

  .doc-logo {
    height: 28px;
  }

  .doc-title {
    font-size: 32px;
  }

  .doc-main {
    padding: 36px 24px 80px;
  }

  .doc-section + .doc-section {
    margin-top: 44px;
  }

  .doc-card,
  .notice {
    padding: 26px 28px;
  }

  .step {
    padding: 18px 22px;
  }

  .doc-footer {
    padding: 0 24px 56px;
  }
}

/* 카드가 살짝 떠오르는 효과는 장식이라 움직임을 줄이도록 설정한 기기에서는 끈다 */
@media (prefers-reduced-motion: reduce) {
  .step,
  .mailbox {
    transition: none;
  }

  .step:hover,
  .mailbox:hover {
    transform: none;
  }
}

@media print {
  :root {
    --doc-bg: #fff;
    --doc-surface: #fff;
    --doc-shadow: none;
    --doc-shadow-sm: none;

    /* 종이는 흰색이라 헤더 밴드를 그대로 두면 글자와 로고가 사라진다 */
    --hero-bg: #fff;
    --hero-fg: #000;
    --hero-muted: #444;
    --hero-subtle: #666;
    --hero-line: #ddd;
  }

  .doc-header {
    background: none;
    border-bottom: 1px solid #ddd;
  }

  /* 흰 종이 위에서는 흰색 로고가 보이지 않으므로 검게 뒤집는다 */
  .doc-logo {
    filter: brightness(0);
  }

  .step:hover,
  .mailbox:hover {
    transform: none;
    box-shadow: none;
  }

  /* 종이에서는 누를 수 없으니 이동 화살표를 지운다 */
  .mailbox__go {
    display: none;
  }

  .doc-section,
  .faq__item {
    break-inside: avoid;
  }

  .doc-footer nav {
    display: none;
  }
}