/* apps/yesno/style.css — 예스 노 결정기: 밤하늘 남보라 바탕 + 별 점 + 검은 구슬(파란 답 창) + 민트(예)·코랄(아니오)·호박(글쎄) 포인트.
 * 모바일 한 줄(--app-width 480px). 제목·버튼은 언어 파일 fonts → :root 변수(--font-display 등, 생성기가 이 파일 뒤에 둔다).
 * 공통 타이틀 바(G.topBar)·끝 화면(data-mg-end)은 --mg-* 변수로만 색을 맞춘다.
 */
:root {
  --night: #1a1238;
  --night-2: #261a52;
  --night-3: #33246b;
  --star: rgba(255, 255, 255, 0.55);
  --ink: #f4f0ff;
  --ink-dim: rgba(244, 240, 255, 0.82);
  --ink-faint: rgba(244, 240, 255, 0.62);
  --gold: #ffcf5a;
  --gold-2: #f2a93b;
  --yes: #3fe0a5;
  --no: #ff6f7d;
  --maybe: #ffc04d;
  --window: #2346d8;
  --line: rgba(255, 255, 255, 0.14);
  --card: rgba(255, 255, 255, 0.07);

  --font-display: 'Fredoka', var(--font-sans);
  --display-weight: 700;
  --wb: normal;
  --hyphens: manual;

  --mg-top-fg: var(--ink);
  --mg-top-badge-bg: var(--gold);
  --mg-top-badge-fg: var(--night);
  --lang-bg: var(--night-2);
  --lang-fg: var(--ink);
  --lang-border: var(--line);
  --mg-star-on: var(--gold);
  --mg-star-off: rgba(255, 255, 255, 0.22);
  --mg-heart-bg: var(--night-2);
  --mg-heart-border: var(--no);
  --mg-heart-fg: var(--no);
  --mg-heart-on: var(--no);
  --mg-share-bg: var(--night-2);
  --mg-share-border: var(--line);
  --mg-x: #fff;
  --mg-tiktok: #fff;
  --mg-faq-bg: var(--night-2);
  --mg-faq-border: var(--line);
  --mg-end-retry-bg: var(--gold);
  --mg-end-retry-fg: var(--night);
  --toast-bg: var(--gold);
  --toast-fg: var(--night);
}

html { background: var(--night); }
body.yn-body {
  min-height: 100vh;
  color: var(--ink);
  line-height: 1.6;
  word-break: var(--wb);
  hyphens: var(--hyphens);
  -webkit-hyphens: var(--hyphens);
  background-color: var(--night);
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, var(--star), transparent 60%),
    radial-gradient(1px 1px at 90px 80px, var(--star), transparent 60%),
    radial-gradient(1.2px 1.2px at 150px 20px, var(--star), transparent 60%),
    radial-gradient(1px 1px at 60px 140px, var(--star), transparent 60%),
    radial-gradient(ellipse at 50% -10%, #3b2a86 0%, transparent 60%);
  background-size: 180px 180px, 180px 180px, 180px 180px, 180px 180px, 100% 700px;
  background-repeat: repeat, repeat, repeat, repeat, no-repeat;
}
[hidden] { display: none !important; }

.yn-h1, .yn-kicker, .yn-h1-main, .yn-h1-main em, .yn-btn, .yn-h2, .yn-badge, .yn-doc h1, .yn-chip, .yn-orb-text, .yn-tally-n, .yn-tally-l, .yn-h-ans, .yn-flip, .yn-tone {
  font-family: var(--font-display);
}

.yn-shell { max-width: var(--app-width); margin: 0 auto; padding: 8px 16px 0; }
.yn-screen { padding-top: 12px; }

/* ---------------- 제목 ---------------- */
.yn-orb-mini {
  width: 64px; height: 64px; margin: 4px auto 6px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 28%, #5a5a7a 0, #15131f 45%, #000 100%);
  box-shadow: 0 0 0 3px rgba(255, 207, 90, 0.35), 0 10px 30px -8px rgba(124, 92, 255, 0.8);
}
.yn-orb-mini span {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--window);
  color: #fff; font: 700 18px/1 var(--font-display);
}
.yn-h1 { margin: 6px 0 8px; text-align: center; line-height: 1.2; font-weight: var(--display-weight); }
.yn-kicker {
  display: inline-block; margin-bottom: 10px; padding: 4px 12px; border-radius: 999px;
  background: var(--gold); color: var(--night); font-size: 13px; letter-spacing: 0.02em; line-height: 1.4;
}
.yn-h1-main { display: block; font-size: 28px; color: var(--ink); overflow-wrap: break-word; }
.yn-h1-main em { font-style: normal; color: var(--gold); }
.yn-hook { margin: 0 auto 16px; max-width: 400px; text-align: center; font-size: 15px; color: var(--ink-dim); }

/* ---------------- 입력 카드 ---------------- */
.yn-card { padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; backdrop-filter: blur(2px); }
.yn-label { display: block; margin: 0 0 6px; font-size: 13.5px; font-weight: 800; line-height: 1.35; color: var(--ink-dim); }
.yn-label-mode { margin-top: 14px; }
.yn-input {
  display: block; width: 100%; min-width: 0; min-height: 50px; padding: 10px 14px;
  border: 2px solid var(--line); border-radius: 14px; background: rgba(0, 0, 0, 0.25); color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; font-weight: 600; line-height: 1.3;
}
.yn-input::placeholder { color: rgba(244, 240, 255, 0.4); font-weight: 500; }
.yn-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255, 207, 90, 0.18); }
.yn-hint { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-faint); }
.yn-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.yn-chip {
  flex: 1 1 auto; min-width: 0; min-height: 42px; padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 12px;
  background: rgba(255, 255, 255, 0.06); color: var(--ink); font-size: 14.5px; font-weight: 600; line-height: 1.25; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.yn-chip[aria-checked="true"] { background: var(--gold); border-color: var(--gold); color: var(--night); }
.yn-chip:disabled { cursor: default; opacity: 0.7; }
.yn-mode-hint { min-height: 1.45em; }

.yn-error {
  margin: 12px 0 0; padding: 10px 14px; border-radius: 14px; background: rgba(255, 111, 125, 0.12); border: 1.5px solid var(--no);
  color: #ffd0d5; font-size: 14px; font-weight: 700; line-height: 1.45;
}

/* ---------------- 버튼 ---------------- */
.yn-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 58px; margin: 16px 0 0; padding: 12px 18px; border: 0; border-radius: 18px;
  font-size: 19px; font-weight: var(--display-weight); line-height: 1.25; cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.2s;
}
.yn-btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: var(--night);
  box-shadow: 0 6px 0 #a8641b, 0 16px 30px -12px rgba(255, 207, 90, 0.7);
}
.yn-btn-primary:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 #a8641b; }
.yn-btn:disabled { opacity: 0.65; cursor: default; }
.yn-btn:focus-visible, .yn-chip:focus-visible, .yn-mini:focus-visible { outline: 3px solid var(--yes); outline-offset: 2px; }
.yn-fair { margin: 12px 0 0; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--ink-faint); }
.yn-btn-ghost {
  min-height: 48px; margin: 14px 0 0; padding: 8px 12px; font-size: 15px; background: rgba(255, 255, 255, 0.08); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 14px;
}
.yn-mini {
  padding: 4px 10px; border: 1.5px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-dim);
  font-size: 12.5px; font-weight: 700; cursor: pointer;
}

/* ---------------- 답: 구슬 ---------------- */
.yn-result { margin-top: 22px; }
.yn-result-card { text-align: center; background: linear-gradient(180deg, var(--night-3), var(--night-2)); }
.yn-result-card.is-shared { box-shadow: 0 0 0 3px var(--gold); }
.yn-badge {
  display: inline-block; margin: 0 0 8px; padding: 3px 12px; border-radius: 999px; background: var(--gold); color: var(--night);
  font-size: 13px; line-height: 1.5;
}
.yn-h2 { margin: 0; font-size: 18px; font-weight: var(--display-weight); line-height: 1.3; color: var(--ink); }
.yn-res-q { margin: 6px 0 0; font-size: 15px; font-weight: 700; color: var(--ink-dim); overflow-wrap: anywhere; }
.yn-res-q.is-empty { font-weight: 500; color: var(--ink-faint); }

.yn-orb {
  position: relative; width: min(230px, 64vw); aspect-ratio: 1; margin: 18px auto 6px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 33% 26%, #6b6b8c 0, #1b1828 34%, #050409 72%, #000 100%);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.8), 0 0 0 4px rgba(255, 255, 255, 0.06), 0 0 60px -10px rgba(124, 92, 255, 0.6);
}
.yn-orb::before {
  content: ''; position: absolute; left: 20%; top: 12%; width: 26%; height: 16%; border-radius: 50%;
  background: rgba(255, 255, 255, 0.28); filter: blur(4px); transform: rotate(-25deg);
}
.yn-orb-window {
  width: 56%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; padding: 6%;
  background: radial-gradient(circle at 50% 40%, #3a63ff, var(--window) 55%, #101c66 100%);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.7), 0 0 0 5px #0b0a12;
  overflow: hidden;
}
.yn-orb-text {
  color: #fff; font-size: 32px; font-weight: var(--display-weight); line-height: 1.15; text-align: center;
  overflow-wrap: anywhere; text-shadow: 0 0 12px rgba(160, 200, 255, 0.9); opacity: 0;
}
.yn-orb-text.is-long { font-size: 14.5px; line-height: 1.25; }
.yn-orb.is-revealed .yn-orb-text { opacity: 1; animation: yn-fade 0.5s ease-out; }
.yn-orb.is-revealed.is-yes { box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.8), 0 0 0 4px rgba(63, 224, 165, 0.5), 0 0 70px -6px rgba(63, 224, 165, 0.55); }
.yn-orb.is-revealed.is-no { box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.8), 0 0 0 4px rgba(255, 111, 125, 0.5), 0 0 70px -6px rgba(255, 111, 125, 0.55); }
.yn-orb.is-revealed.is-maybe { box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.8), 0 0 0 4px rgba(255, 192, 77, 0.5), 0 0 70px -6px rgba(255, 192, 77, 0.55); }
.yn-orb.is-shaking { animation: yn-shake 0.36s ease-in-out infinite; }
.yn-orb.is-shaking .yn-orb-window, .yn-orb.is-thinking .yn-orb-window { animation: yn-swirl 0.9s linear infinite; }
@keyframes yn-shake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(-6px, 2px) rotate(-6deg); }
  75% { transform: translate(6px, -2px) rotate(6deg); }
}
@keyframes yn-swirl {
  0% { filter: hue-rotate(0deg) brightness(0.8); }
  50% { filter: hue-rotate(60deg) brightness(1.15); }
  100% { filter: hue-rotate(0deg) brightness(0.8); }
}
@keyframes yn-fade { 0% { opacity: 0; transform: scale(0.6); filter: blur(4px); } 100% { opacity: 1; transform: scale(1); filter: none; } }

.yn-tone { display: inline-block; margin: 8px 0 0; padding: 2px 12px; border-radius: 999px; font-size: 14px; line-height: 1.6; }
.yn-tone.is-yes { background: rgba(63, 224, 165, 0.16); color: var(--yes); }
.yn-tone.is-no { background: rgba(255, 111, 125, 0.16); color: var(--no); }
.yn-tone.is-maybe { background: rgba(255, 192, 77, 0.16); color: var(--maybe); }

/* best-of 판 */
.yn-flips { margin: 10px 0 0; }
.yn-flips-title { margin: 0; font-size: 13px; font-weight: 800; color: var(--ink-faint); }
.yn-flips-list { display: flex; justify-content: center; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.yn-flip {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; font-weight: 700; line-height: 1;
  border: 2px dashed var(--line); color: var(--ink-faint);
}
.yn-flip.is-landed { border-style: solid; color: var(--night); animation: yn-pop 0.3s cubic-bezier(0.2, 1.5, 0.4, 1); }
.yn-flip.is-yes { background: var(--yes); border-color: var(--yes); }
.yn-flip.is-no { background: var(--no); border-color: var(--no); }
.yn-flip.is-unused { opacity: 0.3; }
@keyframes yn-pop { 0% { transform: scale(0.4) rotateY(180deg); } 100% { transform: scale(1) rotateY(0); } }
.yn-flips-score { margin: 6px 0 0; font-size: 14px; font-weight: 800; color: var(--ink-dim); }

.yn-shared-note { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-faint); }

/* ---------------- 누적 ---------------- */
.yn-tally-card { margin-top: 14px; }
.yn-tally-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.yn-tally-total { font-size: 13px; font-weight: 700; color: var(--ink-faint); }
.yn-tally { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.yn-tally-item { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 8px 4px; border-radius: 14px; background: rgba(0, 0, 0, 0.2); }
.yn-tally-n { font-size: 26px; font-weight: var(--display-weight); line-height: 1.1; }
.yn-tally-l { font-size: 12.5px; line-height: 1.4; color: var(--ink-dim); overflow-wrap: anywhere; text-align: center; }
.yn-tally-item.is-yes .yn-tally-n { color: var(--yes); }
.yn-tally-item.is-no .yn-tally-n { color: var(--no); }
.yn-tally-item.is-maybe .yn-tally-n { color: var(--maybe); }

/* ---------------- 최근 기록 ---------------- */
.yn-history-card { margin-top: 14px; }
.yn-history-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.yn-history-note { margin: 2px 0 8px; font-size: 12.5px; color: var(--ink-faint); }
.yn-history-list { margin: 0; padding: 0; list-style: none; }
.yn-history-list li {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 8px; padding: 8px 2px; border-top: 1.5px dashed var(--line);
  font-size: 14px; line-height: 1.4;
}
.yn-history-list li:first-child { border-top: 0; }
.yn-h-ans { padding: 1px 9px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--night); background: var(--maybe); }
.yn-history-list li.is-yes .yn-h-ans { background: var(--yes); }
.yn-history-list li.is-no .yn-h-ans { background: var(--no); }
.yn-h-meta { font-size: 12px; color: var(--ink-faint); }
.yn-h-time { margin-left: auto; font-size: 12px; color: var(--ink-faint); }
.yn-h-q { flex: 1 0 100%; color: var(--ink-dim); font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.yn-h-q.is-empty { font-weight: 400; color: var(--ink-faint); }

/* ---------------- 개인정보처리방침 ---------------- */
.yn-doc { padding: 28px 0 36px; line-height: 1.8; font-size: 14.5px; color: var(--ink-dim); }
.yn-doc h1 { font-size: 24px; font-weight: var(--display-weight); color: var(--ink); margin-bottom: 20px; }
.yn-doc h2 { font-size: 16px; font-weight: 800; color: var(--ink); margin: 26px 0 8px; }
.yn-doc a { color: var(--gold); text-decoration: underline; }
.site-footer { margin-top: 28px; color: var(--ink-faint); }
.site-footer a { color: var(--ink-dim); }

/* 언어별 */
html:lang(th) .yn-h1-main, html:lang(th) .yn-h2, html:lang(th) .yn-label, html:lang(th) .yn-btn, html:lang(th) .yn-chip, html:lang(th) .yn-orb-text { line-height: 1.5; letter-spacing: 0; }
html:lang(vi) .yn-h1-main { line-height: 1.32; }
html:lang(ja) .yn-h1-main, html:lang(ja) .yn-hook, html:lang(ja) .yn-orb-text { word-break: auto-phrase; }
html:lang(ko) .yn-orb-text, html:lang(ko) .yn-h1-main { word-break: keep-all; }
html:lang(zh) .yn-h1, html:lang(zh) .yn-btn, html:lang(zh) .yn-h2, html:lang(zh) .yn-chip, html:lang(zh) .yn-orb-text, html:lang(zh) .yn-tally-n, html:lang(zh) .yn-h-ans,
html:lang(th) .yn-h1, html:lang(th) .yn-btn, html:lang(th) .yn-h2, html:lang(th) .yn-orb-text, html:lang(th) .yn-tally-n, html:lang(th) .yn-h-ans,
html:lang(vi) .yn-h1, html:lang(vi) .yn-btn, html:lang(vi) .yn-h2, html:lang(vi) .yn-chip, html:lang(vi) .yn-orb-text, html:lang(vi) .yn-tally-n, html:lang(vi) .yn-h-ans { font-family: var(--font-display); }

@media (max-width: 374px) {
  .yn-h1-main { font-size: 24px; }
  .yn-card { padding: 14px 12px; }
  .yn-chip { font-size: 13.5px; padding: 6px 8px; }
  .yn-orb-text { font-size: 28px; }
  .yn-orb-text.is-long { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .yn-orb.is-shaking, .yn-orb.is-shaking .yn-orb-window, .yn-orb.is-thinking .yn-orb-window,
  .yn-orb.is-revealed .yn-orb-text, .yn-flip.is-landed { animation: none; }
  .yn-btn, .yn-chip { transition: none; }
}