/* 썸궁합 시험 사이트 — 폰 세로(390px) 기본, PC 는 가운데 정렬 + 결과 2단
   방향: 한지와 먹(따뜻한 종이색 + 먹색 글자). 한 화면에 밝은 것은 하나 — 첫 화면 = 큰 그림, 결과 = 카드(기획_다시_1112.md).
   버튼 · 글 · 바탕은 조용하게. 여백은 모두 4의 배수, 굵기는 400 · 600 이 기본이고 800 은 h1 · 결과 이름 · 큰 숫자 줄만. */
@font-face { font-family: "Pretendard"; font-weight: 400; font-display: swap;
  src: url("fonts/Pretendard-Regular.subset.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 600; font-display: swap;
  src: url("fonts/Pretendard-SemiBold.subset.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 800; font-display: swap;
  src: url("fonts/Pretendard-ExtraBold.subset.woff2") format("woff2"); }

:root {
  /* 종이 · 먹 (한 줄기 따뜻한 무채색) */
  --bg: #FBF6EE;
  --paper: #FFFDF8;
  --raised: #F1EADC;
  --ink: #1C1814;
  --ink-2: #5C5348;
  --ink-3: #776D60;
  --hair: rgba(28, 24, 20, .14);
  --card: #17130F;
  /* 오행 다섯 색 (app.js EL_COLOR 와 같은 값) */
  --wood: #1FAF6B;
  --fire: #FF4D4D;
  --earth: #F2A413;
  --metal: #F3EEE2;
  --water: #2F6BFF;
  /* 글자로 쓰는 빨강은 종이 위에서 읽히게 한 단계 진하게 */
  --accent-ink: #D42A2A;
  --r: 12px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Pretendard", sans-serif; font-size: 16px; line-height: 1.6;
  word-break: keep-all; overflow-wrap: anywhere;
}
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.page { max-width: 460px; margin: 0 auto; padding: 20px 20px calc(28px + env(safe-area-inset-bottom)); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

/* 머리: 겹친 두 원 = 이 사이트의 표식(카드의 두 원과 같은 모양) */
.top { display: flex; align-items: center; gap: 8px; padding: 4px 0 24px; }
.brand { font-weight: 600; font-size: 18px; line-height: 1; }
.mark { position: relative; width: 32px; height: 20px; flex: none; }
.mark i { position: absolute; top: 0; width: 20px; height: 20px; border-radius: 50%; }
.mark i:first-child { left: 0; background: var(--fire); }
.mark i:last-child { right: 0; background: var(--water); box-shadow: 0 0 0 2px var(--bg); }

/* 띠: 초대 링크 · 결과 링크로 들어온 사람에게만 보인다 */
.band { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 12px 16px;
  border-radius: var(--r); background: var(--raised); font-weight: 600; font-size: 14px; line-height: 20px; }
.band p { margin: 0; }
.btn.band-btn { flex: none; width: auto; min-height: 40px; padding: 8px 16px; border-color: var(--ink); background: var(--ink); color: #fff; font-size: 14px; line-height: 20px; }
.btn.band-btn:hover { border-color: #332C25; background: #332C25; }

.hero { padding: 0 0 28px; }
/* 큰 그림: 폰 첫 화면 안에 '나' 입력 칸이 보이도록 높이를 240px 안쪽으로 묶는다 */
.hero-img { display: block; width: 100%; height: auto; max-height: 240px; aspect-ratio: 3 / 2; object-fit: cover;
  margin-bottom: 20px; border-radius: 20px; background: var(--raised); }
/* 큰 숫자 줄: 숫자는 코드 상수(60 · 60×60 · 5), 낱말만 copy */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 20px 0 0; padding: 0; list-style: none; }
.stats li { padding: 0 12px; border-left: 1px solid var(--hair); }
.stats li:first-child { padding-left: 0; border-left: 0; }
.stats b { display: block; font-weight: 800; font-size: 28px; line-height: 32px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stats span { display: block; margin-top: 4px; font-size: 13px; line-height: 20px; color: var(--ink-2); }
.eyebrow { margin: 0 0 8px; font-weight: 600; font-size: 14px; line-height: 20px; color: var(--accent-ink); }
h1 { margin: 0 0 12px; font-weight: 800; font-size: 36px; line-height: 1.2; letter-spacing: -0.02em; }
.sub { margin: 0; color: var(--ink-2); font-size: 16px; }

/* 입력: 바깥 상자 없이 이름표 + 칸 3개 (상자 안의 상자를 없앰) */
.form { display: grid; gap: 16px; }
.who { margin: 0; padding: 0; border: 0; min-width: 0; }
.who legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.ymd { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 8px; }
.ymd label { display: block; min-width: 0; }
.ymd input {
  width: 100%; height: 52px; padding: 0 12px; border: 1px solid var(--hair); border-radius: var(--r);
  background: var(--paper); color: var(--ink); font: inherit; font-size: 18px; font-weight: 600; text-align: center;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.ymd input::placeholder { color: #A39A8C; font-weight: 400; }
.ymd input:hover { border-color: var(--ink-3); }
.ymd input:focus { border-color: var(--ink); outline: none; }
.ymd input:focus-visible, .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.who.bad .ymd input { border-color: var(--accent-ink); }
.err { margin: 8px 0 0; color: var(--accent-ink); font-size: 14px; line-height: 20px; font-weight: 600; }
.err:empty { display: none; }
.note { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.note.small, .small { font-size: 13px; line-height: 20px; color: var(--ink-3); }
/* 초대 링크: 상대 칸은 보낸 친구의 일주로 고정 */
.fixed { display: flex; align-items: center; min-height: 52px; margin: 0; padding: 12px 16px; border: 1px dashed var(--hair);
  border-radius: var(--r); background: var(--raised); color: var(--ink-2); font-size: 15px; line-height: 24px; }

/* 미리보기 줄 2개: 폰은 가로로 미는 줄 */
.preview { margin-top: 40px; }
.preview h2 { margin: 0 0 12px; font-weight: 600; font-size: 18px; line-height: 24px; }
.strip { display: flex; gap: 12px; margin: 0 -20px; padding: 0 20px 8px; list-style: none; overflow-x: auto;
  scroll-snap-type: x proximity; scroll-padding: 0 20px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.thumb { flex: none; width: 148px; scroll-snap-align: start; }
.thumb img { display: block; width: 100%; height: auto; border-radius: var(--r); background: var(--raised); }
.thumb span { display: block; margin-top: 8px; font-weight: 600; font-size: 13px; line-height: 20px; }
.thumb.char { width: 104px; }
.thumb.char span { text-align: center; }
.home-share { margin-top: 32px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 12px 16px;
  border: 1px solid var(--hair); border-radius: var(--r); background: var(--paper); color: var(--ink);
  font: inherit; font-weight: 600; font-size: 16px; line-height: 24px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .12s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease);
}
.btn:hover { background: var(--raised); }
.btn:active { transform: scale(.98); }
.btn.primary { border-color: var(--ink); background: var(--ink); color: #fff; }
.btn.primary:hover { border-color: #332C25; background: #332C25; }
.btn.ghost { min-height: 44px; border-color: transparent; background: transparent; color: var(--ink-2); font-weight: 400; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.btn.ghost:hover { background: transparent; color: var(--ink); }
.btn.paid-btn { border-color: transparent; background: var(--raised); }
.btn.paid-btn:hover { background: #E9E0CF; }

/* 결과: 카드가 이 화면에서 색을 가진 단 한 곳 */
.result { display: grid; gap: 32px; animation: rise .36s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#card { display: block; width: 100%; height: auto; border-radius: 20px; background: var(--card); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.toast { margin: 8px 0 0; min-height: 20px; text-align: center; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-2); }

.grade { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--hair); }
.grade p { margin: 0; }
.grade-name { font-weight: 600; font-size: 18px; line-height: 24px; color: var(--accent-ink); }
.grade-line { margin: 4px 0 8px !important; color: var(--ink-2); font-size: 15px; line-height: 24px; }
.result-detail h2 { margin: 0 0 12px; font-weight: 800; font-size: 28px; line-height: 1.25; letter-spacing: -0.01em; }
.body { margin: 0 0 24px; }
/* 풀이 칸: 똑같은 상자 세 개 대신 가는 줄로 나눈 한 묶음 */
.points { margin: 0 0 24px; border-bottom: 1px solid var(--hair); }
.points > div { padding: 16px 0; border-top: 1px solid var(--hair); }
.points dt { margin-bottom: 4px; font-weight: 600; font-size: 14px; line-height: 20px; }
.points dd { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 24px; }
.two { display: grid; gap: 16px; margin-bottom: 24px; }
.el { display: flex; gap: 12px; align-items: flex-start; }
.el img { flex: none; width: 64px; height: 64px; border-radius: var(--r); background: var(--raised); }
.el p { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-2); }
.el b { display: block; color: var(--ink); font-weight: 600; }
.el span { display: block; }
.el .who-meta { font-size: 13px; line-height: 20px; color: var(--ink-3); }
.invite { margin-bottom: 24px; }
.invite .toast:empty, .home-share .toast:empty { min-height: 0; margin: 0; }
.basis { margin: 0 0 24px; font-size: 13px; line-height: 20px; color: var(--ink-3); }
.paid { margin-bottom: 8px; }
.paid-notice { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-2); }

.foot { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--hair); color: var(--ink-3); font-size: 13px; line-height: 20px; }
.foot p { margin: 0 0 4px; }
.load-fail { margin: 40px 20px; font-size: 15px; }

@media (min-width: 900px) {
  .page { max-width: 980px; padding: 36px 40px 40px; }
  .home-top { display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: center; }
  .hero { padding: 0; }
  .hero-img { max-height: none; }
  .stats b { font-size: 36px; line-height: 40px; }
  .preview { margin-top: 56px; }
  .strip { margin: 0; padding: 0; overflow: visible; gap: 16px; }
  .thumb, .thumb.char { flex: 1; width: auto; }
  .thumb.char img { max-width: 140px; margin: 0 auto; }
  .home-share { max-width: 420px; margin: 40px auto 0; }
  h1 { font-size: 56px; line-height: 1.14; letter-spacing: -0.03em; }
  .sub { font-size: 18px; max-width: 24em; }
  .result { grid-template-columns: 420px 1fr; gap: 64px; align-items: start; }
  .result-card { position: sticky; top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .ymd input { transition: none; }
  .result { animation: none; }
}