/* 주점 버전(/fun) 스타일: Kant Decide의 주점 무대, 낮엔 커피 · 밤엔 와인·맥주·위스키. style.css 위에 덮어쓴다
   방향: 카드 게임 속 여관처럼 나무와 놋쇠 테두리, 주인장(화자)이 말풍선 대신 이름표 달린 쪽지로 말을 건다
   - 낮: 세이지빛 회벽 #dfe6d6, 메뉴판 종이 #fbf7ee, 원목 #6b4428, 놋쇠 #b8862b, 잉크 #2b2118
   - 밤: 남보라 밤 #191530 + 위에서 내려오는 호박색 등불 빛, 포도주 #8a2846 강조
   - 글꼴: 영어 제목 Fraunces(부드러운 세리프, 간판 느낌), 한글 제목·화자 Gowun Batang, 본문 Instrument Sans/Pretendard
   - 다크 모드 설정과 무관하게 낮/밤 스위치가 조명을 정한다 (한 세계관을 일부러 유지)
   - 위기 안내는 장식 없이 차분하게 */
body[data-flavor="fun"] {
  --wall: #dfe6d6;
  --wood: #6b4428;
  --wood-dark: #4a2e1a;
  --brass: #b8862b;
  /* 놋쇠색 글씨: 장식용 --brass는 회벽·종이 위 글씨로는 흐려서(대비 2.5~3.0) 더 짙게. 벽 위 글씨(page)와 종이 위 글씨(paper)를 나눈다 */
  --page-brass: #7d5913;
  --paper-brass: #7d5913;
  --wine: #8a2846;
  --bg: var(--wall);
  --surface: #fbf7ee;
  --surface-2: #f1e9d6;
  --text: #2b2118;
  --muted: #5e5044;
  --line: #d6c7a6;
  --accent: var(--wine);
  --accent-ink: #fff8ec;
  --accent-soft: #f6e3e8;
  --yes: #2f7d4f;
  --yes-soft: #e1f0e4;
  --no: #b23a2a;
  --no-soft: #f8e1dc;
  --abstain: #7a6d5f;
  --abstain-soft: #efe8da;
  --warn-soft: #f6ecd0;
  --info-soft: #fbf7ee;
  --page-ink: var(--text);
  --page-muted: var(--muted);
  --frame: 0 0 0 2px var(--brass), 0 0 0 5px var(--wood), 0 7px 0 5px var(--wood-dark);
  --radius: 16px;
  --radius-sm: 10px;
  --display: "Fraunces", "Gowun Batang", Georgia, serif;
  --voice: "Fraunces", "Gowun Batang", Georgia, serif;
  --sans: "Instrument Sans", "Pretendard Variable", Pretendard, system-ui, sans-serif;
  color-scheme: light;
  color: var(--page-ink);
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 244, 214, 0.9), rgba(255, 244, 214, 0) 70%),
    var(--bg);
  background-attachment: fixed;
  transition: background-color 700ms var(--ease), color 700ms var(--ease);
}
:lang(ko) body[data-flavor="fun"] { --display: "Gowun Batang", Georgia, serif; --voice: "Gowun Batang", Georgia, serif; }
:lang(ja) body[data-flavor="fun"] { --sans: "Instrument Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif; --display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif; --voice: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif; }
:lang(zh-Hans) body[data-flavor="fun"] { --sans: "Instrument Sans", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; --display: "Noto Serif SC", "Songti SC", serif; --voice: "Noto Serif SC", "Songti SC", serif; }
:lang(zh-Hant) body[data-flavor="fun"] { --sans: "Instrument Sans", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif; --display: "Noto Serif TC", "Songti TC", serif; --voice: "Noto Serif TC", "Songti TC", serif; }

/* 밤: 벽은 어두워지고 등불 빛이 내려온다. 카드(메뉴판)는 등불 아래라 밝은 종이 그대로 */
body[data-flavor="fun"].night {
  --bg: #191530;
  --page-ink: #f3e6cc;
  --page-muted: #c9bba0;
  --brass: #d4a246;
  --page-brass: #e9b860;
  --wine: #b0385f;
  background:
    radial-gradient(ellipse 70% 45% at 50% -8%, rgba(255, 170, 70, 0.32), rgba(255, 170, 70, 0) 70%),
    radial-gradient(ellipse 50% 40% at 85% 110%, rgba(176, 56, 95, 0.25), rgba(176, 56, 95, 0) 70%),
    var(--bg);
  background-attachment: fixed;
}

/* 머리 */
[data-flavor="fun"] .topbar { gap: 12px; flex-wrap: wrap; }
[data-flavor="fun"] .tagline { color: var(--page-brass); font-family: var(--sans); }
[data-flavor="fun"] .brand { font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0; color: var(--page-ink); }
[data-flavor="fun"] .flavor-link { margin-left: auto; font-size: 0.9rem; color: var(--page-muted); text-underline-offset: 3px; }
[data-flavor="fun"] .lang-switch { color: var(--page-ink); border-color: color-mix(in srgb, var(--page-ink) 35%, transparent); background: transparent; }

[data-flavor="fun"] h1 {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: "SOFT" 100;
  font-size: clamp(2.2rem, 6vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--page-ink);
  text-wrap: balance;
}
:lang(ko) [data-flavor="fun"] h1 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
[data-flavor="fun"] .lede { color: var(--page-muted); font-size: 1.08rem; }
[data-flavor="fun"] .hero { display: grid; gap: 0; }

/* 지문(*홀짝*): 화자의 몸짓은 기울인 놋쇠색 */
.stage-direction { font-style: italic; color: var(--page-brass); font-family: var(--voice); }
.stage-direction::before, .stage-direction::after { content: "*"; font-style: normal; }
/* 카드·말풍선·주인장 쪽지는 밤에도 밝은 종이라 짙은 놋쇠색 그대로 (밤 벽 위 밝은 놋쇠색은 종이 위에서 대비 1.7) */
.card .stage-direction, .vote-card .stage-direction, .stage-answer .stage-direction, .narrator .stage-direction { color: var(--paper-brass); }

/* 낮/밤 스위치: 해 → 달 */
.daynight {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 20px;
  cursor: pointer;
  color: var(--page-ink);
  max-width: 100%;
}
.daynight input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.daynight-word { font-family: var(--display); font-weight: 600; font-size: 1rem; transition: opacity 200ms var(--ease); }
.daynight input:checked ~ .day-word, .daynight input:not(:checked) ~ .night-word { opacity: 0.45; }
.daynight-track {
  flex: none;
  width: 60px;
  height: 32px;
  border-radius: 999px;
  position: relative;
  background: linear-gradient(180deg, #a9d3f0, #f7e3a1);
  box-shadow: 0 0 0 2px var(--brass), 0 0 0 4px var(--wood);
  transition: background 400ms var(--ease);
}
.daynight-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffd25a;
  box-shadow: 0 0 10px rgba(255, 196, 60, 0.9);
  transition: transform 400ms var(--ease), background 400ms var(--ease), box-shadow 400ms var(--ease);
}
.daynight input:checked ~ .daynight-track { background: linear-gradient(180deg, #232048, #3a2f63); }
.daynight input:checked ~ .daynight-track .daynight-thumb {
  transform: translateX(28px);
  background: #f2ead2;
  box-shadow: inset -6px -3px 0 #c9bfa0, 0 0 8px rgba(242, 234, 210, 0.6);
}
.daynight input:focus-visible ~ .daynight-track { outline: 3px solid var(--brass); outline-offset: 5px; }
.daynight-hint { flex-basis: 100%; font-size: 0.88rem; color: var(--page-muted); }

/* 가게 안내: 상담소가 아니라는 말 + AI 고지를 첫 화면에 (법무 계획의 AI 고지 위치) */
.house-note { margin: 16px 0 0; max-width: 40rem; font-family: var(--voice); font-style: italic; font-size: 0.95rem; color: var(--page-muted); }
:lang(ko) .house-note { font-style: normal; }

/* 메뉴판 같은 카드: 놋쇠 + 원목 테두리 */
[data-flavor="fun"] .card {
  border: 0;
  box-shadow: var(--frame);
  margin-bottom: 30px;
  color: var(--text);
}
[data-flavor="fun"] .field-label { font-family: var(--display); font-weight: 650; font-size: 1.2rem; }
[data-flavor="fun"] textarea,
[data-flavor="fun"] .text-input,
[data-flavor="fun"] .proposition-input { background: #fffdf8; border-color: var(--line); }
[data-flavor="fun"] .proposition-input { font-family: var(--display); }
[data-flavor="fun"] .mode-row { color: var(--muted); }

[data-flavor="fun"] .button { font-weight: 650; }
[data-flavor="fun"] .question-choice { background: #fffdf8; font-family: var(--display); }
[data-flavor="fun"] .question-choice[aria-pressed="true"] { border-color: var(--wine); background: var(--accent-soft); }
[data-flavor="fun"] .button-primary {
  background: var(--wine);
  color: var(--accent-ink);
  box-shadow: 0 0 0 2px var(--brass), 0 4px 0 2px var(--wood-dark);
}
[data-flavor="fun"] .button-primary:hover { background: color-mix(in srgb, var(--wine) 85%, #000); }
[data-flavor="fun"] .button-primary:active { transform: translateY(3px); box-shadow: 0 0 0 2px var(--brass), 0 1px 0 2px var(--wood-dark); }
[data-flavor="fun"] .button-ghost { background: var(--surface); border-color: var(--line); color: var(--text); }
[data-flavor="fun"] .result > .button-row .button-ghost { box-shadow: 0 0 0 2px var(--brass); }

/* 무대: 초상화 메달 + 주인장 쪽지 */
[data-flavor="fun"] .face-canvas { box-shadow: 0 0 0 4px var(--brass), 0 0 0 9px var(--wood), 0 8px 0 9px var(--wood-dark); }
[data-flavor="fun"] .stage-columns { padding-top: 10px; }
[data-flavor="fun"] .stage-name { font-family: var(--display); font-size: 1.1rem; margin-top: 18px; color: var(--page-ink); }
[data-flavor="fun"] .stage-answer {
  color: var(--text);
  background: var(--surface);
  border-radius: 10px;
  padding: 3px 10px;
  margin-top: 6px;
  min-height: 0;
  font-family: var(--display);
  box-shadow: 0 0 0 2px var(--brass);
}
[data-flavor="fun"] .stage-answer:empty { visibility: hidden; }
[data-flavor="fun"] .emotion-row { color: var(--page-muted); }
[data-flavor="fun"] .emotion-row.top { color: var(--page-ink); }
[data-flavor="fun"] .emotion-track { background: color-mix(in srgb, var(--page-ink) 14%, transparent); }
[data-flavor="fun"] .emotion-row.top .emotion-fill { background: var(--brass); }

.narrator {
  position: relative;
  max-width: 40rem;
  margin: 26px auto 0;
  padding: 18px 20px 16px;
  background: var(--surface);
  color: var(--text);
  border-radius: 12px;
  box-shadow: 0 0 0 2px var(--brass), 0 5px 0 2px var(--wood-dark);
}
.narrator-name {
  position: absolute;
  top: -13px;
  left: 16px;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--wood);
  color: #fbe9c4;
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 0 0 2px var(--brass);
}
[data-flavor="fun"] .narrator .stage-status { margin: 0; text-align: left; color: var(--text); font-family: var(--voice); font-size: 1.06rem; line-height: 1.55; }

/* 판결 */
[data-flavor="fun"] .verdict-question,
[data-flavor="fun"] .verdict-sub,
[data-flavor="fun"] .verdict-tone { color: var(--page-muted); }
/* 질문 + 자리표: 메뉴판 종이 한 장 (밤에도 등불 아래 밝은 종이) */
[data-flavor="fun"] .verdict-board { background: var(--surface); box-shadow: var(--frame); border-radius: var(--radius); padding: 20px 16px 18px; margin-bottom: 8px; color: var(--text); }
[data-flavor="fun"] .verdict-board .verdict-question { color: var(--text); font-family: var(--display); font-size: 1.15rem; line-height: 1.5; }
[data-flavor="fun"] .tally-count { font-family: var(--display); }
[data-flavor="fun"] .tally-bench { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
[data-flavor="fun"] .seat.chosen { --ring: var(--brass); }
[data-flavor="fun"] .tally-row { background: var(--surface-2); border-color: transparent; }
[data-flavor="fun"] .tally-row.top { background: color-mix(in srgb, var(--brass) 16%, var(--surface)); border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
[data-flavor="fun"] .tally-row.top .tally-n { color: var(--wood); }
[data-flavor="fun"] .tally-row.aside { background: transparent; border: 1px dashed var(--line); }
[data-flavor="fun"] .tally-option { font-family: var(--display); }
[data-flavor="fun"] .verdict-headline { font-family: var(--display); font-weight: 650; font-size: clamp(1.4rem, 4vw, 2rem); color: var(--page-ink); text-wrap: balance; }

/* 인물 카드: 카드 게임 카드처럼 놋쇠 테두리, 판결 세기는 리본 색 */
[data-flavor="fun"] .vote-cards { gap: 26px; }
[data-flavor="fun"] .vote-card { border: 0; box-shadow: var(--frame); color: var(--text); }
[data-flavor="fun"] .vote-card.strength-strong { background: var(--surface); }
[data-flavor="fun"] .vote-card.strength-weak { border: 0; }
[data-flavor="fun"] .vote-name { font-family: var(--display); font-size: 1.2rem; }
[data-flavor="fun"] .stance {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--tone);
  background: var(--tone-soft);
  border-radius: 6px;
  padding: 3px 12px;
}
[data-flavor="fun"] .stance.strength-strong { background: var(--tone); color: #fff8ec; font-size: 1.3rem; }
/* 옅은 바탕(보통 세기)·흐리게(약한 세기) 쓴 YES 초록·NO 빨강 글씨는 4.2~4.3:1이라 조금 짙게, 약한 세기는 흐리게 하지 않고 테두리로만 구분 (2026-10-11 점검) */
[data-flavor="fun"] .stance.strength-moderate,
[data-flavor="fun"] .stance.strength-weak { color: color-mix(in srgb, var(--tone) 82%, #000); }
[data-flavor="fun"] .stance.strength-weak { opacity: 1; }
[data-flavor="fun"] .stance.strength-strong .stage-direction { color: #ffe3a3; }
[data-flavor="fun"] .stance.strength-weak { background: transparent; box-shadow: inset 0 0 0 1px var(--tone); }
[data-flavor="fun"] .minority-badge { color: #fff8ec; background: var(--wine); }
[data-flavor="fun"] .vote-card.minority { box-shadow: var(--frame); }
[data-flavor="fun"] .passages summary,
[data-flavor="fun"] .reasons summary { color: var(--wine); }
[data-flavor="fun"] .reasons-dialog { box-shadow: var(--frame), 0 20px 60px rgba(0, 0, 0, 0.3); }
[data-flavor="fun"] .reasons-stance { color: var(--wine); }
[data-flavor="fun"] .passage { border-left-color: var(--brass); }

[data-flavor="fun"] .premium { border-top: 2px dashed color-mix(in srgb, var(--page-ink) 30%, transparent); color: var(--page-ink); }
[data-flavor="fun"] .premium .hint,
[data-flavor="fun"] #advice-status { color: var(--page-muted); }
[data-flavor="fun"] .footnote { color: var(--page-muted); }
/* 벽 위에 바로 놓인 작은 글씨는 벽 색에 맞춘다: 밤에 종이용 색(--muted, --text)을 쓰면 남보라 벽 위에서 거의 안 보였다 (AI 고지·위기 감지 한계 안내) */
[data-flavor="fun"] .ai-note,
[data-flavor="fun"] .share-box .hint,
[data-flavor="fun"] .share-hide { color: var(--page-muted); }
[data-flavor="fun"] .footnote-safety { color: var(--page-ink); }
/* 자주 묻는 질문은 벽 위에 놓여 벽 색에 맞춘다 */
[data-flavor="fun"] .faq-title, [data-flavor="fun"] .faq summary { color: var(--page-ink); font-family: var(--display); }
[data-flavor="fun"] .faq details p { color: var(--page-muted); }
[data-flavor="fun"] .faq details { border-color: color-mix(in srgb, var(--page-ink) 20%, transparent); }
[data-flavor="fun"] .banner { color: var(--text); }

/* 영업 끝나고 낸 판결 도장: 밤에 낸 판결에만 */
.tipsy-stamp { display: none; }
[data-flavor="fun"] .was-tipsy .tipsy-stamp {
  display: inline-block;
  margin: 14px 0 0;
  padding: 3px 14px;
  font-family: var(--display);
  font-weight: 700;
  color: var(--page-brass);
  border: 2px solid var(--page-brass);
  border-radius: 6px;
  rotate: -5deg;
}

/* 밤: 얼굴이 조금씩 흔들린다 */
/* 홍조는 3D 얼굴의 볼에 직접 칠한다 (faces.js setFlushed). 화면 위에 덧칠하면 니체 콧수염 위에 얹힌다 */
/* 흔들리는 건 얼굴만 (이름·감정 막대까지 흔들면 보는 사람이 어지럽다) */
.night .face-canvas { animation: sway 3.4s ease-in-out infinite; }
.night .stage-column:nth-child(2) .face-canvas { animation-delay: -1.1s; }
.night .stage-column:nth-child(3) .face-canvas { animation-delay: -2.3s; }
@keyframes sway {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(3px); }
}

/* 위기 안내: 장식·지문 없이 */
[data-flavor="fun"] .crisis { background: #ffffff; color: #1d1d1d; box-shadow: none; border: 1px solid #c9c9c9; }
[data-flavor="fun"] .crisis * { font-family: var(--sans); }
/* 이용 동의도 위기 안내처럼 장식 없이 */
[data-flavor="fun"] .consent * { font-family: var(--sans); font-style: normal; }

@media (max-width: 560px) {
  [data-flavor="fun"] .stage-answer { font-size: 0.78rem; padding: 2px 6px; }
  [data-flavor="fun"] .face-canvas { box-shadow: 0 0 0 3px var(--brass), 0 0 0 6px var(--wood), 0 5px 0 6px var(--wood-dark); }
  .narrator { padding: 16px 14px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .night .face-canvas { animation: none; }
}