@property --accent {
  syntax: '<color>';
  inherits: true;
  initial-value: #5ef2ff;
}

:root {
  /* cityzen Neon Arcade 토큰 정렬 */
  --ink: #eef0ff;
  --muted: #9a9ac0;
  --accent: #5ef2ff;
  --serif: "Gowun Batang", serif;
  --sans: "Gowun Dodum", system-ui, sans-serif;
  --display: "Fraunces", serif;
  transition: --accent 1.1s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: #06060b;
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
  cursor: default;
}

/* 상태 = 강조색 (cz 토큰: cyan/green/violet/magenta) */
body[data-phase="idle"]      { --accent: #5ef2ff; }
body[data-phase="listening"] { --accent: #39ff96; }
body[data-phase="thinking"]  { --accent: #a98bff; }
body[data-phase="speaking"]  { --accent: #ff4fc8; }

#stage { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }

/* ── 분위기 오버레이 ── */
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(120% 100% at 50% 44%, transparent 36%, rgba(0,0,0,.58) 100%),
    linear-gradient(180deg, rgba(6,6,11,.38), transparent 20%, transparent 76%, rgba(6,6,11,.5));
}
.grain {
  position: fixed; inset: -120%; pointer-events: none; z-index: 3;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 5s steps(6) infinite;
}
@keyframes grain {
  0%{transform:translate(0,0)} 20%{transform:translate(-6%,4%)} 40%{transform:translate(5%,-5%)}
  60%{transform:translate(-4%,-3%)} 80%{transform:translate(6%,5%)} 100%{transform:translate(0,0)}
}

/* 워드마크는 cz 헤더로 일원화 — 중복 'Aura' 제거 (P1) */

/* ── 중앙 UI ── */
#ui {
  position: fixed; inset: 0; z-index: 4;
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: 17vh 6vw 8vh;
  pointer-events: none;
}

.caption {
  font-family: var(--serif);
  font-size: clamp(21px, 3.3vw, 36px);
  line-height: 1.55; letter-spacing: .005em;
  text-align: center; max-width: min(760px, 88vw);
  color: #f6f7ff;
  text-shadow: 0 2px 18px rgba(0,0,0,.92), 0 4px 50px rgba(0,0,0,.8), 0 0 30px color-mix(in srgb, var(--accent) 26%, transparent);
  min-height: 1.6em;
}
.caption.show { animation: capIn .72s cubic-bezier(.2,.7,.2,1) both; }
@keyframes capIn {
  from { opacity: 0; filter: blur(14px); transform: translateY(10px); letter-spacing: .14em; }
  to   { opacity: 1; filter: blur(0);    transform: translateY(0);    letter-spacing: .005em; }
}

/* ── 도크 (오브 + 상태) ── */
.dock { display: flex; flex-direction: column; align-items: center; gap: 18px; }

.orb {
  position: relative; width: 94px; height: 94px; border-radius: 50%;
  pointer-events: auto; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.06), rgba(8,12,28,.35));
  backdrop-filter: blur(8px);
  color: var(--accent);
  display: grid; place-items: center;
  box-shadow: 0 0 36px color-mix(in srgb, var(--accent) 28%, transparent),
              inset 0 0 22px color-mix(in srgb, var(--accent) 14%, transparent);
  transition: transform .25s ease, box-shadow .6s ease, border-color 1s ease;
}
.orb:hover { transform: scale(1.06); }
.orb:active { transform: scale(.97); }
/* 외곽 부드러운 헤일로 — 떠 있는 듯한 깊이 */
.orb::before {
  content: ""; position: absolute; inset: -16px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 68%);
  opacity: .75; animation: breathe 5.5s ease-in-out infinite;
}
/* 가장자리 회전 광륜 — 정밀한 보석 같은 디테일 */
.orb::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: conic-gradient(from 0deg, transparent 52%, color-mix(in srgb, var(--accent) 55%, transparent) 72%, transparent 86%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  opacity: .65; animation: spin 9s linear infinite;
}
/* 켜짐(대화 중) 상태: 테두리·글로우 상향으로 어포던스 강화 */
.orb.active {
  border-color: var(--accent);
  box-shadow: 0 0 56px color-mix(in srgb, var(--accent) 50%, transparent),
              inset 0 0 30px color-mix(in srgb, var(--accent) 26%, transparent);
}
.orb .mic { width: 30px; height: 30px; position: relative; z-index: 2; transition: color 1s ease; }
.orb-core {
  position: absolute; inset: 16px; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 65%, transparent), transparent 70%);
  animation: breathe 4.5s ease-in-out infinite;
}
@keyframes breathe { 0%,100%{transform:scale(.82);opacity:.55} 50%{transform:scale(1.08);opacity:.95} }

/* 펄스 링: 기본은 숨김, 듣는 중에만 발산 */
.orb .ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  opacity: 0; pointer-events: none;
}
body[data-running="true"][data-phase="listening"] .ring { animation: emit 2.6s ease-out infinite; }
.orb .ring.r2 { animation-delay: .85s !important; }
.orb .ring.r3 { animation-delay: 1.7s !important; }
@keyframes emit {
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(2.5); opacity: 0; }
}
/* 생각 중: 회전 코나 링 */
body[data-phase="thinking"] .orb { box-shadow: 0 0 42px color-mix(in srgb, var(--accent) 40%, transparent); }
body[data-phase="thinking"] .orb-core {
  animation: spin 1.8s linear infinite, breathe 4.5s ease-in-out infinite;
  background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--accent) 80%, transparent), transparent 65%);
}
@keyframes spin { to { transform: rotate(360deg); } }
/* 말하는 중: 빠른 호흡 */
body[data-phase="speaking"] .orb-core { animation: breathe 1.6s ease-in-out infinite; }

.status {
  font-family: var(--sans); font-size: 13px; letter-spacing: .14em;
  color: var(--muted); display: inline-flex; align-items: center; gap: 9px;
  pointer-events: none;
}
.status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px var(--accent);
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:.35} 50%{opacity:1} }

/* 설정 톱니/다이얼로그 CSS는 키 방식 폐기로 삭제 (P2 죽은 코드) */

/* ── 모바일 반응형 (cz 헤더 단일화 후 상단 혼잡 완화) ── */
@media (max-width: 560px) {
  #ui { padding: 11vh 6vw 8vh; }
  .caption { font-size: clamp(18px, 5vw, 28px); }
}

@media (prefers-reduced-motion: reduce) {
  .grain, .orb-core, .orb .ring, .status::before, .orb::before, .orb::after { animation: none !important; }
}

/* Polaroid Lobby 2026-06-07 */
.pol-lobby{position:fixed;inset:0;background:#ece7dc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;z-index:500}
.pol-lcard{background:#fff;padding:5px 5px 22px;width:140px;box-shadow:0 3px 12px rgba(0,0,0,.18);transform:rotate(-3deg);flex-shrink:0}
.pol-lphoto{width:100%;aspect-ratio:1 / 1}
.pol-lnum{font-family:'Fraunces',serif;font-style:italic;font-weight:100;font-size:.6rem;color:#c0a060;display:block;margin-top:5px}
.pol-ltag{font-family:'Fraunces',serif;font-style:italic;font-weight:200;font-size:.66rem;color:#a09060;text-align:center;margin-top:2px;display:block}
.pol-ltitle{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:clamp(1.9rem,5vw,3rem);color:#1a1005;line-height:1;text-align:center}
.pol-ldesc{font-family:'Fraunces',serif;font-style:italic;font-weight:200;font-size:.86rem;color:#4a3820;text-align:center;max-width:260px;line-height:1.55}
.pol-lbtn{font-family:'Fraunces',serif;font-style:italic;font-weight:200;font-size:.88rem;letter-spacing:.16em;color:#c0a060;background:#fff;border:1px solid rgba(192,160,96,.45);padding:11px 46px;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.1);transition:box-shadow .3s,transform .3s;margin-top:6px}
.pol-lbtn:hover{box-shadow:0 8px 22px rgba(0,0,0,.15);transform:translateY(-2px)}
.pol-llabel{font-family:'Space Mono',monospace;font-size:.57rem;color:#a09060;letter-spacing:.09em;text-transform:uppercase}

/* pol-back-btn */
.pol-back-btn{position:fixed;top:14px;left:14px;font-family:'Fraunces',serif;font-style:italic;font-weight:200;font-size:.78rem;color:#c0a060;text-decoration:none;letter-spacing:.06em;z-index:9999;background:rgba(236,231,220,.88);padding:6px 14px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(192,160,96,.25);transition:color .2s,background .2s}
.pol-back-btn:hover{color:#1a1005;background:rgba(236,231,220,.98)}