/* 사주공주 공통 모양 — 밝은 크림 바탕에 먹색(블랙)을 섞는다.
   색은 여기 :root 한 곳에서만 바꾼다. */
:root {
  --paper:      #F6F0E4;   /* 바탕 : 밝은 크림 */
  --paper-2:    #EFE6D4;   /* 한 톤 짙은 크림 */
  --card:       #FFFCF6;   /* 카드 */
  --ink:        #1A1714;   /* 먹색 : 글자·검은 카드 */
  --ink-2:      #2A251F;
  --ink-soft:   #5E554A;   /* 보조 글 */
  --ink-faint:  #8C8171;
  --line:       rgba(26, 23, 20, .12);
  --line-2:     rgba(26, 23, 20, .22);
  --gold:       #B0823A;   /* 포인트 : 세조대 금색 */
  --gold-soft:  #E9D6AE;
  --cream-on-ink: #F6F0E4; /* 검은 카드 위 글자 */
  --cream-dim:  #BDB19B;
  --red:        #B3261E;
  --ok:         #2E6B3F;
  --radius:     18px;
  --shadow:     0 1px 0 rgba(26,23,20,.04), 0 6px 20px -10px rgba(26,23,20,.25);
  --app:        480px;     /* 앱처럼 보이는 가운데 폭 */
  --tab-h:      64px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Malgun Gothic", "Segoe UI", sans-serif;
  line-height: 1.65;
  /* 한국어는 낱말 단위로 줄을 바꾼다 ('세워 / 요' 처럼 끊기지 않게). 아주 긴 영문·주소는 넘치지 않게 끊는다 */
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.serif, h1, h2, h3 {
  font-family: "Nanum Myeongjo", "AppleMyungjo", "Batang", "바탕", Georgia, serif;
  font-weight: 700;
  /* 명조는 글자 사이가 넓어 낱말 사이(띄어쓰기)가 묻힌다. 글자는 살짝 붙이고 낱말 사이는 살짝 띄운다 */
  letter-spacing: -.02em;
  word-spacing: .06em;
}
a { color: inherit; }
/* display 를 따로 준 칸도 hidden 이면 숨는다 */
[hidden] { display: none !important; }

/* 제목이 두 줄이 되면 마지막 한두 글자만 넘어가지 않게 한다 (pretty 를 못 쓰는 브라우저는 balance) */
h1, h2, h3 { text-wrap: balance; text-wrap: pretty; }
/* 설명 글은 문장마다 새 줄에서 시작한다. 한 문장이 길어 넘치면 줄 길이를 고르게 나눠 끝 낱말만 남지 않게 */
.문장 { display: block; text-wrap: balance; }
button { font-family: inherit; }

/* ---------- 앱 틀 ---------- */
.app {
  max-width: var(--app);
  margin: 0 auto;
  min-height: 100vh;
  padding: 0 16px calc(var(--tab-h) + 28px + env(safe-area-inset-bottom));
}

/* ---------- 머리 ---------- */
.apphead {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  height: 56px;
  margin: 0 -16px; padding: 0 16px;
  background: rgba(246, 240, 228, .9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
}
.apphead.scrolled { border-bottom-color: var(--line); }
.apphead .logo {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--ink);
  font-family: "Nanum Myeongjo", "AppleMyungjo", "Batang", serif;
  font-weight: 700; font-size: 18px; letter-spacing: 0;
}
.apphead .logo img {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--ink);
}
.apphead .logo { white-space: nowrap; min-height: 44px; }   /* 손가락으로 누르기 쉬운 높이 */
.apphead .logo i {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--ink); color: var(--cream-on-ink);
  display: grid; place-items: center;
  font-style: normal; font-size: 14px;
}
.apphead .back {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-left: -12px; flex: none;   /* 손가락으로 누르기 쉬운 크기 · 글자를 키워도 줄지 않게 */
  border-radius: 10px; text-decoration: none; font-size: 20px; color: var(--ink);
}
.apphead .title { font-weight: 700; font-size: 16px; }
.apphead .auth {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--ink-soft);
}
.apphead .auth a, .apphead .auth button {
  font: inherit; color: var(--ink-soft); background: none; border: 0;
  text-decoration: none; cursor: pointer;
  /* 손가락으로 누르는 곳이라 글자 높이보다 넉넉히 잡는다 */
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 44px; padding: 0 2px;
}
.apphead .auth a:first-child:last-child,
.apphead .auth .who + a {
  color: var(--ink);
}
.apphead .auth .who {
  color: var(--ink); font-weight: 600;
  max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 350px) {
  .apphead .logo { font-size: 16px; }
  .apphead .auth { font-size: 13px; gap: 8px; }
}

/* ---------- 아래 탭 ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: rgba(255, 252, 246, .96);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar nav {
  max-width: var(--app); margin: 0 auto;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: var(--tab-h);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-decoration: none; color: var(--ink-faint);
  font-size: 11px; font-weight: 600;
}
.tabbar a svg { width: 22px; height: 22px; }
.tabbar a[aria-current="page"] { color: var(--ink); }
.tabbar a.main span.dot {
  width: 42px; height: 42px; margin-top: -14px; border-radius: 14px;
  background: var(--ink); color: var(--cream-on-ink);
  display: grid; place-items: center;
  box-shadow: 0 6px 16px -6px rgba(26,23,20,.6);
}
.tabbar a.main span.dot svg { width: 22px; height: 22px; }

/* ---------- 공통 부품 ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.ink-card {
  background: var(--ink);
  color: var(--cream-on-ink);
  border-radius: 22px;
}
.sec { margin-top: 30px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.sec-head h2 { font-size: 19px; }
.sec-head .more { font-size: 13px; color: var(--ink-soft); text-decoration: none; }
.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--gold);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 52px; padding: 0 22px; border-radius: 14px; border: 0;
  font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer;
  background: var(--ink); color: var(--cream-on-ink);
  transition: transform .12s ease, opacity .2s ease;
}
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .45; cursor: default; }
.btn.cream { background: var(--cream-on-ink); color: var(--ink); }
.btn.line { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn.gold { background: var(--gold); color: #fff; }
.btn.block { display: flex; width: 100%; }
.chip {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  background: var(--paper-2); color: var(--ink-soft);
}
.chip.ink { background: var(--ink); color: var(--cream-on-ink); }
.chip.gold { background: var(--gold-soft); color: #7A5518; }
.won { font-weight: 800; letter-spacing: -.01em; }
.won small { font-size: .72em; font-weight: 700; margin-left: 1px; }
del { color: var(--ink-faint); }

/* 하단 정보는 탭에 가리지 않도록 */
/* 푸터 아래 탭바 여백은 footer.js 가 직접 준다 (거기서 margin 을 덮어쓰기 때문) */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}