:root{
  --bg:#07080d;
  --orange:#ff6820;
  --orange-dim:#7a2d00;
  --red:#e02000;
  --gold:#ffaa44;
  --panel:#0d0f17ee;
  --line:#3a1a08;
  --text:#ffe5cc;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Segoe UI","Malgun Gothic",system-ui,sans-serif;
  background:radial-gradient(110% 85% at 50% 0%,#120a04 0%,var(--bg) 55%);
  color:var(--text);
  overflow-x:hidden;
  min-height:100dvh;
  display:flex;flex-direction:column;
  -webkit-tap-highlight-color:transparent;
}

/* 스캔라인 오버레이 */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,#ff330006 3px,#ff330006 4px);
}

/* 배경 별 / 파티클 */
#stars{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 15% 25%,#ff6820aa,transparent),
    radial-gradient(1px 1px at 72% 55%,#ffffff33,transparent),
    radial-gradient(1px 1px at 42% 78%,#ff682066,transparent),
    radial-gradient(1px 1px at 88% 18%,#ffaa4433,transparent),
    radial-gradient(1px 1px at 33% 45%,#ffffff22,transparent);
}

/* ── 무대 ── */
#stage{position:relative;z-index:1;flex:1;
  display:flex;flex-direction:column;align-items:center;
  padding:28px 16px 130px;gap:14px}

/* ── 코어 (아크 리액터) ── */
#core{position:relative;width:200px;height:200px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;margin-top:10px;
  transition:transform .3s;touch-action:manipulation}
#core:active{transform:scale(.96)}
.ring{position:absolute;border-radius:50%;border:2px solid var(--orange-dim);opacity:.7}
.ring1{inset:0;border-top-color:var(--orange);animation:spin 6s linear infinite}
.ring2{inset:22px;border-right-color:var(--orange);border-left-color:var(--red);animation:spin 4s linear infinite reverse}
.ring3{inset:44px;border-bottom-color:var(--gold);border-top-color:var(--red);animation:spin 8s linear infinite}
.reactor{width:86px;height:86px;border-radius:50%;
  background:radial-gradient(circle,#fff8f0 0%,var(--gold) 25%,var(--orange) 55%,var(--red) 75%,transparent 78%);
  box-shadow:0 0 30px 10px #ff682099,0 0 80px 25px #ff682033,inset 0 0 20px #fff4;
  animation:pulse 3s ease-in-out infinite}
.core-label{position:absolute;bottom:-8px;font-size:11px;letter-spacing:5px;
  color:var(--orange);text-shadow:0 0 10px var(--orange);font-weight:700}

/* HUD 크로스헤어 */
#core::before,#core::after{content:"";position:absolute;background:var(--orange-dim);opacity:.5}
#core::before{width:100%;height:1px;top:50%}
#core::after{width:1px;height:100%;left:50%}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.1);opacity:1}}

/* 상태별 코어 */
#core.state-listening .reactor{
  background:radial-gradient(circle,#fff 0%,var(--gold) 30%,var(--orange) 60%,var(--red) 78%,transparent 80%);
  box-shadow:0 0 50px 15px #ff682099,0 0 100px 35px #ff682044;
  animation:pulse .8s ease-in-out infinite}
#core.state-listening .ring{border-color:var(--gold);opacity:1}
#core.state-thinking .reactor{animation:pulse .5s ease-in-out infinite}
#core.state-thinking .ring1{animation-duration:1s}
#core.state-thinking .ring2{animation-duration:.7s}
#core.state-speaking .reactor{box-shadow:0 0 60px 20px #ff6820cc,0 0 130px 40px #ff682055}

#status{font-size:13px;color:#c87a50;letter-spacing:.5px;min-height:18px;text-align:center}
#transcript{font-size:18px;color:var(--gold);text-shadow:0 0 10px #ffaa4455;
  min-height:24px;text-align:center;max-width:680px;font-weight:500}

/* ── 패널 (챔퍼드 코너 HUD 카드) ── */
#panels{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  width:100%;max-width:940px;margin-top:6px}

.panel{
  background:var(--panel);
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
  box-shadow:inset 0 0 0 1px var(--line),0 0 24px #ff68200d;
  padding:18px 20px;min-width:260px;max-width:450px;flex:1 1 300px;
  animation:panelIn .45s cubic-bezier(.2,.9,.3,1.3) both;position:relative;overflow:hidden}

/* 왼쪽 주황 액센트 바 (클립패스로 모서리 자연스럽게 잘림) */
.panel::before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;
  background:linear-gradient(var(--orange),var(--red),transparent)}

/* 오른쪽 상단 코너 마커 */
.panel::after{content:"";position:absolute;top:4px;right:4px;
  width:10px;height:10px;
  border-top:1px solid var(--orange);border-right:1px solid var(--orange);opacity:.6}

.panel:nth-child(2){animation-delay:.07s}
.panel:nth-child(3){animation-delay:.14s}
.panel:nth-child(4){animation-delay:.21s}
@keyframes panelIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}

.panel h3{font-size:13px;color:var(--orange);letter-spacing:1.5px;margin-bottom:12px;
  text-transform:uppercase;display:flex;align-items:center;gap:8px}
.panel h3 .dot{
  width:8px;height:8px;flex-shrink:0;
  background:var(--orange);box-shadow:0 0 8px var(--orange);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}

.panel p{font-size:14px;line-height:1.65;color:#e8c4a8}
.panel ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.panel li{font-size:14px;line-height:1.5;padding-left:18px;position:relative;color:#e8c4a8}
.panel li::before{content:"▸";position:absolute;left:0;color:var(--orange)}

/* 경고 패널 */
.panel.alert-panel::before{background:linear-gradient(#f87171,var(--red),transparent)}
.panel.alert-panel{box-shadow:inset 0 0 0 1px #7f1d1d,0 0 24px #ff000015}
.panel.alert-panel::after{border-color:#f87171}

/* 뉴스 */
.news-item{display:block;padding:10px 0;border-bottom:1px solid #2a1008;text-decoration:none;color:inherit}
.news-item:last-child{border-bottom:none}
.news-item .t{font-size:14px;color:#ffddc4;line-height:1.45}
.news-item .m{font-size:11px;color:#b06040;margin-top:3px}
.news-item:hover .t{color:var(--orange)}

/* 날씨 */
.wx{display:flex;align-items:center;gap:16px}
.wx .temp{font-size:42px;font-weight:700;color:var(--gold);text-shadow:0 0 14px #ffaa4455}
.wx .meta{font-size:13px;color:#e8c4a8;line-height:1.7}

/* 액션 */
.action-done{font-size:14px;color:#7aff9e;display:flex;align-items:center;gap:8px}
.open-link{display:block;margin-top:12px;text-align:center;text-decoration:none;
  background:linear-gradient(135deg,var(--orange),var(--red));color:#fff;
  font-weight:700;font-size:15px;padding:12px;
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
  box-shadow:0 0 20px #ff682055;transition:.2s}
.open-link:active{transform:scale(.97)}
.open-hint{margin-top:8px;font-size:12px;color:#c87a50;line-height:1.5;
  background:#120a04;border:1px solid var(--line);
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);
  padding:8px 10px}
.open-hint b{color:var(--gold)}

/* ── 하단 바 ── */
#bar{position:fixed;bottom:0;left:0;right:0;z-index:5;
  display:flex;gap:10px;align-items:center;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent,#07080dcc 30%,#07080d 70%);
}
#textInput{flex:1;min-width:0;background:#0d0f17;border:1px solid var(--line);
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
  padding:12px 18px;color:var(--text);font-size:16px;outline:none;
  -webkit-appearance:none;}
#textInput:focus{border-color:var(--orange);box-shadow:0 0 0 2px #ff682022}
#micBtn,#sendBtn,#wakeBtn,#setBtn{
  width:46px;height:46px;border-radius:0;border:1px solid var(--line);
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
  background:#0d0f17;color:var(--orange);font-size:17px;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:.2s;
  touch-action:manipulation;}
#micBtn:hover,#sendBtn:hover,#wakeBtn:hover,#setBtn:hover{background:#1a0c04;border-color:var(--orange)}
#setBtn{font-size:15px}
#micBtn.on,#wakeBtn.on{background:var(--orange);color:#fff;border-color:var(--orange);box-shadow:0 0 18px #ff682088}

/* ── 설정 모달 ── */
.modal{position:fixed;inset:0;z-index:100;background:#00000099;
  display:flex;align-items:flex-end;justify-content:center}
.modal.hidden{display:none}
.modal-inner{background:#0d0f17;border:1px solid var(--line);
  border-top:1px solid var(--orange-dim);
  border-radius:0;
  clip-path:polygon(20px 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%,0 20px);
  padding:28px 20px calc(28px + env(safe-area-inset-bottom));
  width:100%;max-width:520px}
.modal-inner h2{color:var(--orange);font-size:13px;letter-spacing:4px;margin-bottom:20px;text-align:center}
.modal-inner label{display:block;font-size:11px;color:#c87a50;margin:16px 0 6px;letter-spacing:.5px}
.modal-inner input{width:100%;background:#07080d;border:1px solid var(--line);
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);
  padding:13px 14px;color:var(--text);font-size:16px;outline:none}
.modal-inner input:focus{border-color:var(--orange)}
.modal-hint{font-size:11px;color:#4a2510;margin-top:5px}
#settingsSave{display:block;width:100%;margin-top:20px;padding:14px;
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
  font-size:15px;font-weight:700;cursor:pointer;border:none;
  background:linear-gradient(135deg,var(--orange),var(--red));color:#fff;
  touch-action:manipulation;}
#settingsClose{display:block;width:100%;margin-top:10px;padding:12px;
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
  font-size:14px;cursor:pointer;background:transparent;color:#c87a50;
  border:1px solid var(--line);touch-action:manipulation;}
#installBtn{display:block;width:100%;margin-top:10px;padding:12px;
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
  font-size:14px;cursor:pointer;background:#0a1f0a;color:#4ade80;
  border:1px solid #166534;touch-action:manipulation;}
#installBtn.hidden{display:none}

/* ── 자비스 청취 오버레이 (Siri/Bixby 스타일) ── */
#jOverlay{
  position:fixed;inset:0;z-index:60;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:#04060cee;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  opacity:0;pointer-events:none;
  transition:opacity .35s;
}
#jOverlay.visible{opacity:1;pointer-events:auto}

#jName{
  font-size:11px;letter-spacing:8px;color:var(--orange-dim);margin-bottom:8px;
  text-shadow:0 0 14px var(--orange);font-weight:700
}

#jWave{display:flex;align-items:center;gap:6px;height:64px}
#jWave span{
  display:block;width:5px;border-radius:3px;background:var(--orange);
  animation:jwave 1.3s ease-in-out infinite
}
#jWave span:nth-child(1){animation-delay:0s}
#jWave span:nth-child(2){animation-delay:.18s}
#jWave span:nth-child(3){animation-delay:.36s}
#jWave span:nth-child(4){animation-delay:.18s}
#jWave span:nth-child(5){animation-delay:0s}
@keyframes jwave{
  0%,100%{height:10px;opacity:.35}
  50%{height:52px;opacity:1}
}

#jOverlay.thinking #jWave span{
  background:var(--gold);
  animation:jpulse .55s ease-in-out infinite
}
#jOverlay.thinking #jWave span:nth-child(2){animation-delay:.11s}
#jOverlay.thinking #jWave span:nth-child(3){animation-delay:.22s}
#jOverlay.thinking #jWave span:nth-child(4){animation-delay:.11s}
@keyframes jpulse{
  0%,100%{height:6px;opacity:.3}
  50%{height:28px;opacity:.9}
}

#jOverlay.speaking #jWave span{
  background:#4ade80;animation-duration:.45s
}

#jLabel{
  font-size:11px;letter-spacing:4px;color:var(--orange);
  text-transform:uppercase;margin-top:8px
}
#jText{
  font-size:20px;color:var(--gold);text-align:center;
  max-width:320px;line-height:1.55;margin-top:10px;
  text-shadow:0 0 24px #ffaa4466;font-weight:500;min-height:26px;
  padding:0 24px
}

@media(max-width:600px){
  #core{width:160px;height:160px}
  .reactor{width:66px;height:66px}
  .panel{flex:1 1 100%;max-width:100%;min-width:0}
  #bar{gap:6px;padding:10px 10px calc(10px + env(safe-area-inset-bottom))}
  #micBtn,#sendBtn,#wakeBtn,#setBtn{width:42px;height:42px;font-size:15px}
  #textInput{padding:11px 12px;font-size:16px}
}