/* apps/santa/style.css — 마니또 뽑기: 겨울 밤 초록 + 크리스마스 빨강 + 금색 리본, 크림색 카드, 빨간 선물 상자(SVG).
 * 모바일 한 줄(--app-width 480px). 이름 버튼 2칸 격자, 확인 창(#ask)은 앱 폭 안 전체 화면 고정 요소.
 * 선물 상자를 열면 뚜껑(.sn-lid)이 들리고 이름이 나온다. 움직임 줄이기면 애니메이션 없이 바로.
 * 제목·버튼·이름은 언어 파일 fonts → :root 변수(--font-display 등, 생성기가 이 파일 뒤에 둔다).
 * 공통 타이틀 바(G.topBar)·끝 화면(data-mg-end)은 --mg-* 변수로만 색을 맞춘다.
 */
:root {
  --pine: #123b2c;
  --pine-2: #1a4d39;
  --pine-deep: #0b2a1f;
  --berry: #c8202f;
  --berry-2: #8f1420;
  --gold: #f4c542;
  --gold-2: #d9a520;
  --snow: #fffaf0;
  --snow-2: #f1e9da;
  --ink: #1f2a24;
  --ink-dim: rgba(31, 42, 36, 0.78);
  --ink-faint: rgba(31, 42, 36, 0.6);
  --on-pine: #fffaf0;
  --on-pine-dim: rgba(255, 250, 240, 0.8);
  --line: rgba(31, 42, 36, 0.14);
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 14px 28px -16px rgba(0, 0, 0, 0.7);

  --font-display: 'Baloo 2', var(--font-sans);
  --display-weight: 800;
  --wb: normal;
  --hyphens: manual;

  --mg-top-fg: var(--on-pine);
  --mg-top-badge-bg: var(--berry);
  --mg-top-badge-fg: #fff;
  --lang-bg: var(--pine-deep);
  --lang-fg: var(--on-pine);
  --lang-border: rgba(255, 250, 240, 0.3);
  --mg-star-on: var(--gold);
  --mg-star-off: rgba(255, 250, 240, 0.28);
  --mg-heart-bg: var(--pine-deep);
  --mg-heart-border: var(--berry);
  --mg-heart-fg: #ff8f8f;
  --mg-heart-on: var(--berry);
  --mg-share-bg: rgba(255, 250, 240, 0.1);
  --mg-share-border: rgba(255, 250, 240, 0.26);
  --mg-share-primary-bg: var(--berry);
  --mg-share-primary-fg: #fff;
  --mg-x: currentColor;
  --mg-tiktok: currentColor;
  --mg-faq-bg: rgba(255, 250, 240, 0.08);
  --mg-faq-border: rgba(255, 250, 240, 0.24);
  --mg-end-retry-bg: var(--berry);
  --mg-end-retry-fg: #fff;
  --toast-bg: var(--snow);
  --toast-fg: var(--ink);
}

html { background: var(--pine); }
body.sn-body {
  min-height: 100vh;
  color: var(--on-pine);
  line-height: 1.6;
  word-break: var(--wb);
  hyphens: var(--hyphens);
  -webkit-hyphens: var(--hyphens);
  background-color: var(--pine);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.55) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 78% 14%, rgba(255, 255, 255, 0.5) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 44% 4%, rgba(255, 255, 255, 0.4) 0 1px, transparent 2px),
    radial-gradient(ellipse at 50% -10%, rgba(244, 197, 66, 0.22), transparent 55%),
    radial-gradient(circle at 90% 80%, rgba(200, 32, 47, 0.16), transparent 40%);
  background-size: 160px 160px, 210px 210px, 120px 120px, auto, auto;
  background-attachment: fixed;
}
[hidden] { display: none !important; }

/* base.css :lang(zh|th|vi) 가 모든 요소 글꼴을 덮으므로 제목 요소에 다시 지정 */
.sn-h1, .sn-kicker, .sn-h1-main, .sn-h1-main em, .sn-btn, .sn-h2, .sn-h3, .sn-label, .sn-switch-label, .sn-mini,
.sn-pass-title, .sn-progress, .sn-who-name, .sn-secret-for, .sn-secret-kicker, .sn-secret-name, .sn-ask-text, .sn-done-kicker,
.sn-ev-title, .sn-link-name, .sn-all-g, .sn-all-r, .sn-excl-names, .sn-doc h1 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
}

.sn-shell { max-width: var(--app-width); margin: 0 auto; padding: 8px 16px 0; overflow-x: clip; }
.sn-screen { padding-top: 10px; }

/* ---------------- 제목 ---------------- */
.sn-h1 { margin: 4px 0 6px; text-align: center; line-height: 1.15; }
.sn-kicker {
  display: inline-block; margin-bottom: 10px; padding: 2px 14px; border-radius: 999px;
  background: var(--berry); color: #fff; font-size: 15px; line-height: 1.6; letter-spacing: 0.02em; box-shadow: 0 3px 0 var(--berry-2);
}
.sn-h1-main { display: block; font-size: 30px; color: var(--on-pine); overflow-wrap: break-word; }
.sn-h1-main em { font-style: normal; color: var(--gold); }
.sn-hook { margin: 6px auto 14px; max-width: 30em; text-align: center; font-size: 15px; color: var(--on-pine-dim); }

/* ---------------- 카드·설정 ---------------- */
.sn-card { background: var(--snow); color: var(--ink); border-radius: 18px; padding: 14px; box-shadow: var(--shadow); }
.sn-form { display: grid; gap: 8px; border-top: 6px solid var(--berry); }
.sn-label { display: block; margin: 4px 0 0; font-size: 15px; color: var(--ink); line-height: 1.4; }
.sn-opt { font-family: var(--font-sans); font-weight: 400; font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; }
.sn-hint { margin: 0; font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; font-family: var(--font-sans); font-weight: 400; }
.sn-input, .sn-textarea, .sn-select {
  width: 100%; min-width: 0; padding: 9px 12px; border: 2px solid transparent; border-radius: 12px;
  background: #fff; color: var(--ink); font: inherit; font-size: 16px; line-height: 1.45; box-shadow: inset 0 0 0 1px var(--line);
}
.sn-textarea { min-height: 136px; resize: vertical; }
.sn-input::placeholder, .sn-textarea::placeholder { color: var(--ink-faint); }
.sn-input:focus, .sn-textarea:focus, .sn-select:focus { outline: none; border-color: var(--gold-2); }
.sn-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sn-field { display: grid; gap: 4px; min-width: 0; align-content: start; }
.sn-field .sn-label { margin: 0; }
.sn-count { font-weight: 700; color: var(--ink-dim); white-space: nowrap; }
.sn-count.is-bad { color: var(--berry-2); }
.sn-excl { display: grid; gap: 6px; padding: 10px; border-radius: 14px; background: var(--snow-2); }
.sn-excl .sn-label { margin: 0; }
.sn-excl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; align-items: center; }
.sn-excl-row .sn-mini { grid-column: 1 / -1; justify-self: stretch; min-height: 40px; }
.sn-select { padding: 8px 10px; font-size: 15px; appearance: auto; }
.sn-excl-x { color: var(--berry); font-weight: 700; }
.sn-excl-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.sn-excl-item { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 4px 3px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.sn-excl-names { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.sn-excl-del { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--snow-2); color: var(--berry-2); font-size: 18px; line-height: 1; cursor: pointer; }
.sn-switch { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--snow-2); cursor: pointer; }
.sn-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sn-switch-ui { flex: none; position: relative; width: 44px; height: 26px; border-radius: 999px; background: rgba(31, 42, 36, 0.25); transition: background 0.15s; }
.sn-switch-ui::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform 0.15s; }
.sn-switch input:checked + .sn-switch-ui { background: var(--pine-2); }
.sn-switch input:checked + .sn-switch-ui::after { transform: translateX(18px); }
.sn-switch input:focus-visible + .sn-switch-ui { outline: 3px solid var(--gold-2); outline-offset: 2px; }
.sn-switch-text { display: grid; min-width: 0; }
.sn-switch-label { font-size: 15px; line-height: 1.35; color: var(--ink); }
.sn-error { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: #ffe2dc; color: #8c1d14; font-size: 14px; font-weight: 700; }

/* ---------------- 버튼 ---------------- */
.sn-btn {
  display: block; width: 100%; min-height: 52px; padding: 10px 16px; border: 0; border-radius: 16px; cursor: pointer;
  font-size: 19px; line-height: 1.25; text-align: center; overflow-wrap: anywhere;
}
.sn-btn-primary { margin-top: 14px; background: var(--berry); color: #fff; box-shadow: 0 5px 0 var(--berry-2); }
.sn-btn-primary:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--berry-2); }
.sn-btn-ghost { min-height: 46px; font-size: 15.5px; background: var(--snow-2); color: var(--ink); }
.sn-btn:focus-visible, .sn-mini:focus-visible, .sn-who-btn:focus-visible, .sn-gift:focus-visible, .sn-excl-del:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.sn-fair { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--on-pine-dim); line-height: 1.5; }
.sn-mini { padding: 6px 14px; border: 0; border-radius: 999px; background: var(--snow-2); color: var(--ink-dim); font-size: 14px; cursor: pointer; white-space: nowrap; }
.sn-mini-strong { background: var(--pine-2); color: var(--on-pine); }

/* ---------------- 확인 화면 ---------------- */
.sn-event { text-align: center; padding: 6px 4px 10px; }
.sn-h2 { margin: 0; }
.sn-ev-title { font-size: 26px; line-height: 1.25; color: var(--on-pine); overflow-wrap: anywhere; }
.sn-ev-meta { margin: 4px 0 0; font-size: 14.5px; color: var(--gold); white-space: pre-wrap; }
.sn-pass { padding: 14px; border-radius: 20px; background: rgba(0, 0, 0, 0.18); text-align: center; }
.sn-pass-title { margin: 0; font-size: 20px; color: var(--gold); line-height: 1.3; }
.sn-pass-hint { margin: 2px 0 0; font-size: 14px; color: var(--on-pine-dim); }
.sn-progress { margin: 8px 0 10px; font-size: 15px; color: var(--on-pine); }
.sn-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sn-who-btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; padding: 8px 10px;
  border: 0; border-radius: 14px; background: var(--snow); color: var(--ink); cursor: pointer; box-shadow: 0 4px 0 var(--snow-2);
  font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; touch-action: manipulation;
}
.sn-who-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--snow-2); }
.sn-who-name { min-width: 0; }
.sn-who-btn.is-seen { background: rgba(255, 250, 240, 0.18); color: rgba(255, 250, 240, 0.62); box-shadow: none; }
.sn-who-mark { flex: none; color: var(--gold); font-weight: 800; }

.sn-secret { margin-top: 0; text-align: center; padding: 18px 16px 20px; border-top: 6px solid var(--gold); }
.sn-secret-for { margin: 0; font-size: 20px; line-height: 1.35; color: var(--berry-2); overflow-wrap: anywhere; }
.sn-gift {
  display: block; width: min(64vw, 240px); aspect-ratio: 1; margin: 6px auto 0; padding: 0; border: 0; border-radius: 24px;
  background: transparent; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.sn-gift-svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, 0.3)); }
.sn-gift:not(:disabled) .sn-gift-svg { animation: sn-wiggle 2.4s ease-in-out infinite; }
.sn-lid { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 0.6s cubic-bezier(0.3, 1.4, 0.5, 1); }
.sn-gift.is-open .sn-lid { transform: translateY(-40px) rotate(-14deg); }
.sn-gift.is-open .sn-gift-svg { animation: none; }
.sn-open-hint { margin: 6px 0 0; font-size: 14px; color: var(--ink-dim); }
.sn-secret-body { animation: sn-in 0.4s ease-out; }
.sn-secret-kicker { margin: 4px 0 0; font-size: 16px; color: var(--ink-dim); }
.sn-secret-name {
  margin: 4px auto 0; padding: 8px 18px; display: inline-block; max-width: 100%; border-radius: 16px;
  background: var(--berry); color: #fff; font-size: 34px; line-height: 1.2; overflow-wrap: anywhere; box-shadow: 0 5px 0 var(--berry-2);
}
.sn-secret-meta { margin: 12px 0 0; font-size: 15px; color: var(--pine-2); font-weight: 700; white-space: pre-wrap; }
.sn-secret-note { margin: 8px 0 0; font-size: 14px; color: var(--ink-faint); }

.sn-org { margin-top: 16px; }
.sn-h3 { margin: 0 0 8px; font-size: 16px; color: var(--ink); }
.sn-org-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sn-org-btns .sn-btn:first-child { grid-column: 1 / -1; }
.sn-links, .sn-all { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.sn-links-list, .sn-all-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.sn-link-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 12px; background: var(--snow-2); }
.sn-link-row.is-copied { background: #e2f1e6; }
.sn-link-name { min-width: 0; font-size: 16px; overflow-wrap: anywhere; }
.sn-all-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.sn-all-row:last-child { border-bottom: 0; }
.sn-all-g, .sn-all-r { overflow-wrap: anywhere; min-width: 0; }
.sn-all-r { color: var(--berry-2); text-align: right; }
.sn-all-arrow { color: var(--gold-2); font-weight: 800; }
.sn-all .sn-mini { margin-top: 10px; }

/* 확인 창: 앱 폭(480px) 안 전체 화면 */
.sn-ask {
  position: fixed; top: 0; bottom: 0; left: 50%; width: 100%; max-width: var(--app-width); transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 20px 16px; background: rgba(11, 42, 31, 0.9);
}
.sn-ask-box { width: 100%; max-width: 380px; padding: 20px 16px 16px; border-radius: 20px; background: var(--snow); color: var(--ink); text-align: center; box-shadow: var(--shadow); animation: sn-in 0.25s ease-out; }
.sn-ask-text { margin: 0; font-size: 22px; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.sn-ask-sub { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-dim); }
.sn-ask-box .sn-btn-ghost { margin-top: 10px; }

/* ---------------- 완료 ---------------- */
.sn-done { margin-top: 16px; min-width: 0; }
.sn-done > * + * { margin-top: 14px; }
.sn-done-card { text-align: center; padding: 18px 16px; border-top: 6px solid var(--pine-2); animation: sn-in 0.35s ease-out; }
.sn-done-kicker { margin: 0; font-size: 16px; color: var(--berry-2); }
.sn-done-title { font-size: 28px; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.sn-done-text { margin: 6px 0 0; font-size: 15px; color: var(--ink-dim); }
.sn-done-meta { margin: 6px 0 0; font-size: 14px; color: var(--pine-2); font-weight: 700; white-space: pre-wrap; }

@keyframes sn-wiggle { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-4deg); } 82% { transform: rotate(4deg); } 88% { transform: rotate(-2deg); } 94% { transform: rotate(1deg); } }
@keyframes sn-in { from { transform: scale(0.95); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .sn-gift:not(:disabled) .sn-gift-svg, .sn-secret-body, .sn-done-card, .sn-ask-box { animation: none; }
  .sn-lid, .sn-switch-ui, .sn-switch-ui::after { transition: none; }
}

/* ---------------- 개인정보·바닥글 ---------------- */
.sn-doc { padding: 18px 16px; margin-top: 12px; background: var(--snow); color: var(--ink); border-radius: 16px; box-shadow: var(--shadow); }
.sn-doc h1 { font-size: 24px; margin: 0 0 12px; }
.sn-doc h2 { font-size: 17px; margin: 18px 0 6px; }
.sn-doc p { font-size: 14.5px; color: var(--ink-dim); }
.sn-doc a { color: var(--berry-2); }
.site-footer { margin-top: 36px; padding: 18px 0 30px; text-align: center; font-size: 12.5px; color: var(--on-pine-dim); }
.site-footer a { color: var(--on-pine); }

/* ---------------- 언어별 ---------------- */
html:lang(th) .sn-h1, html:lang(th) .sn-btn, html:lang(th) .sn-who-btn, html:lang(th) .sn-secret-name, html:lang(th) .sn-ask-text, html:lang(th) .sn-pass-title, html:lang(th) .sn-done-title { line-height: 1.5; letter-spacing: 0; }
html:lang(th) .sn-h1-main { line-height: 1.45; }
html:lang(th) body { word-break: normal; line-break: strict; }
html:lang(vi) .sn-h1-main, html:lang(vi) .sn-secret-name, html:lang(vi) .sn-done-title { line-height: 1.35; }
html:lang(ja) body { word-break: auto-phrase; }
html:lang(de) .sn-label, html:lang(de) .sn-btn, html:lang(de) .sn-hint, html:lang(de) .sn-switch-label { hyphens: auto; -webkit-hyphens: auto; }

@media (max-width: 380px) {
  .sn-h1-main { font-size: 26px; }
  .sn-btn { font-size: 17px; }
  .sn-btn-ghost { font-size: 14.5px; }
  .sn-who-btn { font-size: 16px; }
  .sn-secret-name { font-size: 30px; }
}