/* public/card/card.css
   주밍 인증카드 — 디자인 A "맑은 파스텔" (2026-07-21 확정).
   · 캐릭터 반응형: html[data-char] 에 팔레트(판 이미지에서 추출). app.js가 선택 시 세팅.
   · 카드 canvas·판·엔진은 불변 — 이 파일은 UI 껍데기만.
   · 굵기 위계: 400(메타) / 500(캐릭터칸·타이틀 브랜드) / 600(라벨·버튼) / 700(타이틀 액션어). */

:root {
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", sans-serif;
  --radius: 16px;
  --ink: #3b3540; --muted: #8a828f; --faint: #a99fae;
  --surface: #ffffff; --field-bg: #ffffff; --bd-rest: #e5e0e9;
  /* 중립(캐릭터 미선택) 팔레트 = 메인 사이트 회색(모브 대신 — 첫 진입 차분하게) */
  --accent: #7c848b; --accent-2: #9aa2a8; --accent-soft: #dbe0e4; --tint: #edf1f3; --on-accent: #fff;
}
/* 캐릭터 반응형 팔레트 — 판 이미지 실측 추출값 */
html[data-char="alpaca"]      { --accent:#ee6c8a; --accent-2:#f88aa2; --accent-soft:#ffb6c4; --tint:#fbeef1; --on-accent:#fff; }
html[data-char="snowleopard"] { --accent:#b874e0; --accent-2:#d096ee; --accent-soft:#e4baf5; --tint:#f3ecfb; --on-accent:#fff; }
html[data-char="poodle"]      { --accent:#f0c518; --accent-2:#fcdf4a; --accent-soft:#fbeea0; --tint:#fdf7d6; --on-accent:#3b3540; }

@media (prefers-color-scheme: dark) {
  :root {
    --ink:#efe9f2; --muted:#b3a9bb; --faint:#8f8598;
    --surface:#221f2a; --field-bg:#221f2a; --bd-rest:#3a3542;
  }
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; min-height: 100vh;
  background: radial-gradient(120% 74% at 50% -8%, var(--tint) 0%, #ffffff 58%);
}
@media (prefers-color-scheme: dark) {
  html { background: radial-gradient(120% 74% at 50% -8%, color-mix(in srgb, var(--accent) 20%, #1a1822) 0%, #16141d 58%); }
}

body {
  margin: 0 auto; max-width: 520px;
  padding: 24px 18px calc(40px + env(safe-area-inset-bottom, 0px));
  font-family: var(--sans); color: var(--ink); line-height: 1.5;
  -webkit-font-smoothing: antialiased; background: transparent;
}
/* 데스크탑 = 중앙 소프트 패널(허공에 뜬 느낌·긴 버튼 방지) */
@media (min-width: 600px) {
  body {
    max-width: 464px; margin: 46px auto 60px; padding: 34px 34px 30px;
    background: var(--surface); border-radius: 24px;
    box-shadow: 0 16px 46px color-mix(in srgb, var(--accent) 16%, rgba(60,40,60,.14));
  }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── 타이틀 (브랜드 가볍게 + 액션어만 강조) ── */
h1 { font-size: 21px; margin: 2px 0 4px; letter-spacing: -0.01em; font-weight: 500; color: var(--ink); }
h1 .t-brand { font-weight: 500; }
h1 .t-spk { color: var(--accent); font-weight: 600; margin: 0 6px; }
h1 .t-act { font-weight: 700; }
.sub { font-size: 13px; color: var(--muted); margin: 0 0 20px; }

.view[hidden] { display: none; }

/* ── 필드 ── */
.field { margin: 0 0 16px; }
.field > label, .field > .legend { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.field .hint { font-size: 11.5px; color: var(--faint); margin: 6px 0 0; }
.field .req { color: var(--muted); font-weight: 400; }

input[type="text"], input[type="date"] {
  width: 100%; font-family: inherit; font-size: 16px; /* iOS 자동줌 방지(≥16px) */
  color: var(--ink); background: var(--field-bg);
  border: 1.5px solid var(--bd-rest); border-radius: 12px; padding: 12px 13px;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
input::placeholder { color: var(--faint); }
/* 입력 중(포커스) = 캐릭터색 테두리 + 은은한 링 */
input:focus-visible, input:focus {
  outline: none; border-color: var(--accent); border-width: 2px; padding: 11px 12px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
/* 입력 완료 = 옅은 캐릭터색(캐릭터칸처럼 진하지 않게, 테두리로만) */
input[type="text"]:not(:placeholder-shown):not(:focus) {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--bd-rest));
  background: color-mix(in srgb, var(--accent) 6%, var(--field-bg));
}
/* ── 기념일 = 완전 커스텀 ──
   진짜 date input을 투명 클릭레이어로 위에 겹치고(클릭하면 달력은 그대로 뜸), 보이는 박스는 .date-display span.
   → 브라우저 기본 date UI(연도 필드·달력 아이콘·폭 삐침)를 전부 제거해 PC·iOS·안드 3기기 통일. */
.date-wrap { position: relative; }
.date-wrap input[type="date"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; background: transparent; opacity: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.date-display {  /* 보이는 박스 = 텍스트 input 스타일 복제 */
  display: block; width: 100%; font-family: inherit; font-size: 16px; color: var(--faint);
  background: var(--field-bg); border: 1.5px solid var(--bd-rest); border-radius: 12px; padding: 12px 13px;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
#joindate:focus + .date-display, #joindate:focus-visible + .date-display {  /* 포커스 = accent 테두리 */
  border-color: var(--accent); border-width: 2px; padding: 11px 12px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
#joindate.filled + .date-display {  /* 날짜 고르면 진한 글자 + 옅은 accent */
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 46%, var(--bd-rest));
  background: color-mix(in srgb, var(--accent) 6%, var(--field-bg));
}

/* ── 캐릭터 선택 (네이티브 radio + 시각 버튼 · 볼드 최소 — 테두리·배경·체크로 선택 표시) ── */
.char-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.char-option { position: relative; }
.char-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.char-option label {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 6px 11px; font-size: 13.5px; font-weight: 500;
  border: 1.5px solid var(--bd-rest); border-radius: 14px; background: var(--field-bg);
  color: var(--ink); cursor: pointer; user-select: none; text-align: center;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
/* 캐릭터 얼굴 썸네일 (판에서 crop, 원형) — 위계 승부수: 캐릭터 고르기가 화면 주인공 */
.char-face {
  width: 56px; height: 56px; border-radius: 15px; object-fit: cover; display: block;
  background: var(--tint); box-shadow: 0 2px 7px color-mix(in srgb, var(--accent) 22%, transparent);
  transition: transform .15s, box-shadow .15s;
}
.char-option input:checked + label {
  border-color: var(--accent); border-width: 2px; padding: 12px 6px 10px; font-weight: 600;
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
}
.char-option input:checked + label .char-face { transform: scale(1.05); box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 40%, transparent); }
.char-option input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── 버튼 (세미볼드) ── */
.btn {
  width: 100%; font-family: inherit; font-size: 16px; font-weight: 600;
  border: 0; border-radius: 14px; padding: 15px; cursor: pointer; color: var(--on-accent); margin-top: 4px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 34%, transparent);
  -webkit-tap-highlight-color: transparent;
}
.btn:disabled { opacity: 0.55; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-ghost {
  background: transparent; color: var(--ink); box-shadow: none; margin-top: 10px;   /* 버튼 그룹(저장↔다시만들기) 타이트 */
  border: 1.5px solid color-mix(in srgb, var(--accent) 60%, transparent);
}

/* 에러·안내 */
.error { color: #e23b3b; font-size: 13px; font-weight: 500; margin: 6px 0 0; min-height: 0; }
.store-note { font-size: 11.5px; color: var(--faint); margin: 13px 0 0; text-align: center; }

/* ── 결과 ── */
.result { text-align: center; }
#card-slot { position: relative; display: block; width: fit-content; margin: 0 auto 16px; } /* block=inline-block 라인박스 여백 제거 · 카드(16)+저장버튼(4)=20 */
.card-preview {
  width: 100%; max-width: 300px; border-radius: 14px; display: block;
  box-shadow: 0 8px 26px color-mix(in srgb, var(--accent) 26%, rgba(0,0,0,.16));
}
/* 저장버튼 갭=카드 margin(20)에 흡수 · 다시만들기 갭=.btn-ghost margin-top(10, 버튼그룹) — .result .btn 오버라이드 제거(특이도 충돌) */

/* 등장 연출 "반짝" — 카드 주변 반짝이 (캐릭터색). app.js가 스폰. */
.sparkle {
  position: absolute; color: var(--accent); font-size: 22px; pointer-events: none; z-index: 3;
  transform: translate(-50%, -50%); text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* 로딩 */
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 44px 0; color: var(--muted); font-size: 14px; }
.spinner { width: 20px; height: 20px; border: 2.5px solid var(--bd-rest); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* ── 푸터 (상호링크 + 면책 · 간격은 메인·아트와 동일: 라인↔링크 40 / 링크↔면책 12) ── */
.card-footer {
  margin-top: 40px; padding-top: 40px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 22%, var(--bd-rest));
}
.footer-links {
  display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: flex-start; align-items: center;
  margin-bottom: 12px;
}
.footer-links a { font-size: 12.5px; color: var(--muted); text-decoration: none; }
.footer-links a .star { color: var(--accent); margin-right: 2px; }
.footer-links a:hover { color: var(--ink); }
.footer-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; color: var(--ink); }
.card-footer .footnote { font-size: 12.5px; color: var(--faint); letter-spacing: 0.04em; }
.card-footer .footnote .copy { margin-left: 6px; }
@media (max-width: 599px) {
  .footer-links { flex-direction: column; align-items: flex-start; gap: 16px; line-height: 1.1; margin-bottom: 0; }
  .card-footer .footnote { display: flex; flex-direction: column; gap: 5px; margin-top: 38px; padding-top: 40px; border-top: 1px solid color-mix(in srgb, var(--accent) 22%, var(--bd-rest)); }
  .card-footer .footnote .copy { margin-left: 0; font-size: 11px; opacity: 0.85; }
}

/* ── 저장 토스트 (성공=먹색 / 실패=빨강) ── */
.toast {
  position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(18px); opacity: 0;
  background: #3a3542; color: #fff; font-size: 13.5px; font-weight: 600;
  padding: 12px 20px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.24);
  z-index: 80; pointer-events: none; max-width: calc(100vw - 32px); text-align: center;
  transition: opacity .3s, transform .3s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: #e23b3b; }
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity .01s; } }