/* latuis-profile — "각인 플레이트"
   shop2 OG 이미지(로즈골드 각인 플레이트)의 격을 웹으로 옮긴 것:
   린넨 배경 위 세로형 종이 카드, 이중 프레임, 중앙 축 정렬 4개 밴드.
   스크롤 없음(100dvh), 움직이는 효과 없음, 외부 요청 없음.
   서브페이지(개인정보처리방침 등): body.doc-page — 스크롤 가능. */

:root {
  --stage: #ebe3d2;         /* 린넨 무대 (latuis-note 아이보리 계열) */
  --paper: #fdfaf2;         /* 카드 종이 */
  --line: #e2d9c4;          /* 웜 헤어라인 */
  --ink: #232019;           /* 잉크 */
  --ink-soft: #6d675c;
  --ink-faint: #a49b89;
  --gold: #b08a6e;          /* OG 이미지의 각인 로즈골드 */
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", Roboto, "Noto Sans KR",
    sans-serif;
  background: var(--stage);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  word-break: keep-all;
}

::selection { background: var(--gold); color: var(--paper); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
a { color: inherit; text-decoration: none; }

/* ── 무대 ─────────────────────────────── */
.stage {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
}

/* ── 플레이트 ─────────────────────────── */
.card {
  width: min(480px, 92vw, calc((100dvh - 96px) * 0.64));
  aspect-ratio: 2 / 3;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow:
    0 1px 2px rgba(107, 88, 55, 0.06),
    0 22px 44px -18px rgba(107, 88, 55, 0.3);
  padding: 10px;                     /* 이중 프레임 간격 */
  container-type: inline-size;
}

/* 내부 프레임 — 초대장의 이중 괘선 */
.frame {
  height: 100%;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: clamp(20px, 7cqw, 32px) clamp(16px, 6cqw, 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

/* 밴드 구분 헤어라인 — 중앙에 작은 각인 다이아 */
.sep {
  border: 0;
  width: 100%;
  height: 1px;
  background: var(--line);
  position: relative;
  overflow: visible;
}
.sep::after {
  content: "";
  position: absolute;
  top: -2.5px;
  left: 50%;
  width: 5px;
  height: 5px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--paper);
  border: 1px solid var(--gold);
}

/* ── 1. 모노그램 + 워드마크 ─────────────── */
.b-brand { display: flex; flex-direction: column; align-items: center; }
.b-brand .monogram {
  width: clamp(56px, 20cqw, 92px);
  height: auto;
}
.b-brand .wordmark {
  margin-top: clamp(10px, 3cqw, 18px);
  font-size: clamp(14px, 4.6cqw, 21px);
  font-weight: 300;
  letter-spacing: 0.52em;
  text-indent: 0.52em;               /* 자간 보정 — 시각적 중앙 */
  text-transform: uppercase;
  color: var(--ink);
}
.b-brand .est {
  margin-top: 6px;
  font-size: clamp(8px, 2.6cqw, 9.5px);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ── 2. 프랙티스 — 2×2 각인 목록 ────────── */
.b-practice {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 2.6cqw, 13px) 8px;
}
.b-practice .item {
  font-size: clamp(8.5px, 2.8cqw, 11px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.b-practice .item i {
  display: block;
  font-style: normal;
  font-family: var(--serif);
  font-size: clamp(8.5px, 2.8cqw, 10px);
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: 3px;
}

/* ── 4. 서명 ───────────────────────────── */
.b-sign { display: flex; flex-direction: column; align-items: center; }
/* 필기체 서명 — 웹폰트 없이 시스템 스크립트 폰트 폴백
   (Edwardian/Corsiva: Office 기본, Segoe Script: Windows 기본, Snell: macOS) */
.b-sign .sig {
  font-family: "Edwardian Script ITC", "Monotype Corsiva", "Segoe Script",
    "Snell Roundhand", "Apple Chancery", cursive;
  font-size: clamp(22px, 7.5cqw, 30px);
  line-height: 1.2;
  color: var(--ink);
}
.b-sign .role {
  margin-top: 5px;
  font-size: clamp(8px, 2.6cqw, 9.5px);
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.b-sign .mail {
  margin-top: clamp(10px, 3cqw, 14px);
  font-size: clamp(9.5px, 3cqw, 11px);
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  transition: color 0.3s;
}
.b-sign .mail:hover { color: var(--gold); }

/* ── 카드 아래 잔글씨 ─────────────────── */
.colophon {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #a1957c;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
}
.colophon a { transition: color 0.3s; }
.colophon a:hover { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .b-sign .mail { transition: none; }
  .colophon a { transition: none; }
}

/* ── 문서형 서브페이지 (body.doc-page) ─────
   개인정보처리방침 등 긴 글 — 밝은 종이 톤, 일반 스크롤 */
body.doc-page {
  background: var(--paper);
  line-height: 1.7;
}
.doc {
  max-width: 720px;
  margin: 0 auto;
  padding: 72px 24px 120px;
}
.doc .back {
  display: inline-block;
  font-size: 13.5px;
  color: var(--ink-faint);
  margin-bottom: 40px;
}
.doc .back:hover { color: var(--gold); }
.doc h1 { font-size: 28px; letter-spacing: -0.02em; margin-bottom: 8px; }
.doc .doc-date { color: var(--ink-faint); font-size: 14px; margin-bottom: 40px; }
.doc h2 { font-size: 19px; margin: 40px 0 12px; letter-spacing: -0.01em; }
.doc p, .doc li { color: var(--ink-soft); }
.doc ul { padding-left: 1.3em; margin: 8px 0; }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 48px 0; }

/* ── 404 — 카드 중앙 밴드 ─────────────── */
.b-404 { display: flex; flex-direction: column; align-items: center; }
.b-404 .code {
  font-family: var(--serif);
  font-size: clamp(40px, 14cqw, 58px);
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  line-height: 1;
  color: var(--gold);
}
.b-404 .note {
  margin-top: 12px;
  font-size: clamp(9px, 2.8cqw, 11px);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}