/* =====================================================================
   PPIP 법적 고지 — **홈 화면의 톤 그대로**(2026-09-19 사용자).

   앱을 열면 보이는 것은 머스타드 벽에 찍힌 점 격자, 그 위에 뜬 크림빛 카드,
   자간이 벌어진 대문자 이름표다. 이 페이지도 그 셋으로 짠다 — 앱에서 칩을
   눌러 넘어오는 자리라, 여기서 갑자기 하얀 문서가 나오면 앱 밖으로 튕겨
   나간 것처럼 읽힌다.

   색은 `PPIP/DesignSystem/Tokens.swift` 의 값을 그대로 옮긴 것이다.
   ===================================================================== */

:root {
  /* 브랜드 — 바꾸지 않는다. */
  --mustard: #E3B447;
  --cord:    #141414;
  --cream:   #F4E3B5;
  --signal:  #E00000;

  /* 화면 */
  --bg:      #EFE9DA;
  --paper:   #FBF8F0;
  --ink:     #1C1B18;
  --soft:    #5E5A50;
  --rule:    #D9D2BE;
  /* 글자용 빨강. 신호 빨강은 머스타드 위에서 2.6:1 이라 문장이 안 읽힌다. */
  --signal-ink: #8E0000;

  /* 벽 — 점 격자는 30 칸에 3.4 점, 잉크 11%. 앱의 `LogoWall` 과 같은 자다. */
  --wall-step: 30px;
  --wall-dot: rgba(20, 20, 20, 0.11);

  --sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Pretendard", "Noto Sans KR", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, "Roboto Mono", monospace;
}

/* 벽은 밝은 머스타드라 앱에서도 시스템 설정을 그대로 따른다
   (어두운 벽에서만 색 모드를 뒤집는다 — `Wallpaper.swift` 의 주석). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mustard: #B98F2E;
    --bg:    #1B1916;
    --paper: #25221D;
    --ink:   #EDE8DC;
    --soft:  #A8A296;
    --rule:  #3B372F;
    --cream: #3A342A;
    --signal-ink: #FF7A70;
    --wall-dot: rgba(0, 0, 0, 0.16);
  }
}
:root[data-theme="dark"] {
  --mustard: #B98F2E;
  --bg:    #1B1916;
  --paper: #25221D;
  --ink:   #EDE8DC;
  --soft:  #A8A296;
  --rule:  #3B372F;
  --cream: #3A342A;
  --signal-ink: #FF7A70;
  --wall-dot: rgba(0, 0, 0, 0.16);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* --- 벽 ----------------------------------------------------------- */

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  /* 한국어는 낱말 안에서 자르지 않는다. 긴 주소는 `anywhere` 가 받아낸다. */
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;

  /* 점 격자 · 빛 한 줄기 · 머스타드. 완전히 평평하면 인쇄물이지 벽이 아니다. */
  background-color: var(--mustard);
  background-image:
    radial-gradient(var(--wall-dot) 1.7px, transparent 1.8px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 45%, rgba(0, 0, 0, 0.10));
  background-size: var(--wall-step) var(--wall-step), 100% 100%;
  background-position: 0 0, 0 0;
  background-attachment: fixed, fixed;
}

/* 일본어·중국어에는 낱말의 경계가 없다. `keep-all` 을 그대로 두면 줄을 끊을
   자리를 못 찾아 `overflow-wrap: anywhere` 가 아무 데서나 끊고, 문장부호가 줄
   맨 앞에 서는 등 금칙이 깨진다. 이 두 말은 브라우저의 기본 규칙이 맞다.
   한국어(뿌리)와 영어는 위의 `keep-all` 을 그대로 쓴다. */
:lang(ja),
:lang(zh),
:lang(zh-Hant) {
  word-break: normal;
  overflow-wrap: break-word;
}

.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 44px 16px 72px;
  display: flex;
  flex-direction: column;
  gap: 10px;              /* 앱의 카드 간격과 같다. */
}

/* --- 머리 --------------------------------------------------------- */

/* 이름표 — 앱의 `ppipLabel`(11pt, 자간 1.8). 알약이 아니라 벽에 적힌 글자다. */
.tag,
.label {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soft);
}

header.head {
  padding: 4px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.subtitle {
  margin: 0;
  color: var(--soft);
  font-size: 15px;
}

.stamp {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}

/* --- 카드 --------------------------------------------------------- */

/* 앱의 흰 카드. 벽 위에 떠 있고, 만지는 것이든 읽는 것이든 한 장에 담긴다. */
section,
.notice {
  background: var(--paper);
  border-radius: 16px;
  padding: 20px 18px;
}

section { padding: 22px 18px 24px; }

section > :first-child { margin-top: 0; }
section > :last-child  { margin-bottom: 0; }

h2 {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.45;
}

h3 {
  margin: 22px 0 8px;
  font-size: 13px;
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
}

p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

ul {
  margin: 0 0 12px;
  padding-left: 0;
  list-style: none;
}
ul:last-child { margin-bottom: 0; }

/* 줄머리는 점 하나 — 벽의 격자에서 가져온 것이다. */
li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 9px;
}
li:last-child { margin-bottom: 0; }
li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--soft);
  opacity: 0.55;
}

b, strong { font-weight: 600; }

/* 번호처럼 **그대로 읽어야 하는 값**. 앱의 알약을 작게 줄인 모양이다. */
code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--cream);
  border-radius: 5px;
  padding: 1px 5px;
  font-variant-numeric: tabular-nums;
}

a {
  color: var(--ink);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--signal-ink); }

/* --- 알림 상자 ---------------------------------------------------- */
/*
 * 맨 위의 **요약 띠는 걷었다**(2026-09-19 사용자). 본문과 같은 말을 두 곳에
 * 두는 것이라, 근거가 바뀌면 둘을 다 고쳐야 하고 한 곳은 반드시 늦는다 —
 * 그날 하루에만 세 번 틀렸고 세 번 다 그 칸이었다(삐삐 기한, 기한의 기준,
 * 사진 문구). 짧게 쓰려다 본문보다 센 약속이 되기도 했다.
 *
 * 아래 `notice` 는 남는다. 이건 본문의 요약이 아니라 **본문에 없는 당부**다.
 */

.notice {
  background: var(--cream);
}
.notice strong { display: block; margin-bottom: 4px; }
.notice p { margin: 0; font-size: 15px; }

/* 빨강은 이 앱에서 울리는 것·되돌리는 것의 색이다. 경고 한 장에만 쓴다. */
.notice.alarm {
  background: var(--paper);
  border-left: 3px solid var(--signal);
}
.notice.alarm strong { color: var(--signal-ink); }

/* --- 표 ----------------------------------------------------------- */

.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.65;
}
th {
  text-align: left;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: 0; }

/* 좁은 화면에서는 표를 옆으로 미는 대신 줄로 편다 — 옆으로 밀리는 표는
   거기 무엇이 더 있는지 보이지 않는다. */
@media (max-width: 620px) {
  thead { display: none; }
  table, tbody, tr, td { display: block; width: 100%; }
  tr {
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
  }
  tbody tr:last-child { border-bottom: 0; }
  td {
    padding: 0 0 6px;
    border: 0;
  }
  td:last-child { padding-bottom: 0; }
  td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--soft);
    margin-bottom: 1px;
  }
}

/* --- 연락처 묶음 -------------------------------------------------- */

.dl {
  background: var(--cream);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.dl p { margin: 0 0 4px; }
.dl p:last-child { margin-bottom: 0; }

/* --- 건너가는 알약 ------------------------------------------------ */

/* 앱 꼬리말의 알약과 같은 모양. 누르면 다른 문서로 간다. */
.jump {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  background: rgba(28, 27, 24, 0.07);
  border-radius: 999px;
  padding: 8px 16px;
}
.jump:hover { background: rgba(28, 27, 24, 0.13); color: var(--ink); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .jump { background: rgba(237, 232, 220, 0.10); }
  :root:not([data-theme="light"]) .jump:hover { background: rgba(237, 232, 220, 0.18); }
}
:root[data-theme="dark"] .jump { background: rgba(237, 232, 220, 0.10); }
:root[data-theme="dark"] .jump:hover { background: rgba(237, 232, 220, 0.18); }

/* --- 꼬리말 ------------------------------------------------------- */

footer {
  padding: 20px 14px 0;
  text-align: center;
}
footer p {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--soft);
  line-height: 1.9;
}