html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: #ffffff; color: #111111;
  font-family: -apple-system, "Segoe UI", Pretendard, sans-serif;
  overflow: hidden;
}
/* #space 전체가 "클릭하면 그 자리에 입력창" 캔버스 역할을 한다. */
#space { position: fixed; inset: 0; background: #ffffff; cursor: text; }

/* --- 소스 슬롯: 좌측 1/3(primary) / 중앙 1/3(secondary), 각각 position:fixed로 화면에
   직접 고정 (flex 흐름이 아님 - 소스 표시 여부와 무관하게 항상 제자리를 지킨다) --- */
#slot-primary {
  position: fixed; top: 0; left: 0; width: 33.3333vw; height: 100vh;
  display: none; flex-direction: column;
  background: #ffffff; border-right: 1px solid #eee;
  box-sizing: border-box; overflow: hidden;
  z-index: 5;
}
#slot-primary.slot-active { display: flex; }

#slot-secondary {
  position: fixed; top: 0; left: 33.3333vw; width: 33.3333vw; height: 100vh;
  display: none; flex-direction: column;
  background: #ffffff; border-right: 1px solid #eee;
  box-sizing: border-box; overflow: hidden;
  z-index: 5;
}
#slot-secondary.slot-active { display: flex; }

.slot-bar {
  flex: 0 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; border-bottom: 1px solid #eee; font-size: 12px; color: #666;
}
.slot-bar button {
  border: none; background: transparent; font-size: 15px; line-height: 1;
  cursor: pointer; color: #333;
}
.slot-iframe { flex: 1 1 auto; width: 100%; border: none; }

/* fix27: 팟 트랙리스트 등 iframe이 아닌 커스텀 소스 콘텐츠가 들어가는 자리.
   지금까지 이 클래스에 대한 CSS 규칙이 아예 없어서(styles.css 원본에 전무) 텍스트가
   왼쪽 테두리에 그대로 달라붙고 나머지 폭은 빈 채로 버려져 보였다 - "팟" 조판 붕괴의
   실제 원인. 여백/폭/스크롤을 명시하고, 트랙 한 줄 한 줄에 여백과 hover를 준다. */
.slot-custom {
  flex: 1 1 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 18px;
  overflow-y: auto;
}
.pot-track {
  padding: 9px 10px !important;
  margin: 0 0 2px 0;
  border-radius: 6px;
  font-size: 14px;
  color: #333333;
  transition: background 0.15s ease;
}
.pot-track:hover { background: #f3f3f3; }

/* --- 입력창(composer): 박스 없이 커서+마이크만. JS가 클릭 위치로 옮긴다.
   fix27: 예전 "#composer{display:none} + .open 토글" 게이트를 완전히 제거했다.
   app.js는 Phase13부터 .open 클래스를 붙이는 코드가 없어서, 이 게이트가 살아있는 한
   컴포저 전체(마이크+입력창+커서)가 영구히 숨는 사고가 계속 재발할 수 있는 구조였다
   (index.html의 !important 인라인으로 그때그때 땜질해왔던 부분). 이제 그 여지 자체를
   없앤다 - 기본값이 처음부터 display:flex다. --- */
#composer {
  position: fixed; left: 16px; bottom: 16px;
  display: flex; align-items: center; gap: 6px;
  background: transparent; border: none; box-shadow: none; padding: 0;
  z-index: 40;
}
#composer input {
  border: none; outline: none; background: transparent; box-shadow: none;
  font-size: 15px; padding: 0; margin: 0;
  width: 2px; min-width: 2px;
  color: #333333;
  caret-color: #454545;
}

/* fix27: "단아·단순·매트"하게 - 순검정 대신 톤다운 다크그레이 하나로 통일하고,
   상태별 색은 오직 클래스 하나(mic-off / wake-flash)로만 갈린다. styles.css와
   index.html 인라인 두 군데서 서로 다른 색을 우기던 충돌(#CC785C !important vs
   #d9662b)을 없애고 여기 한 곳만 진실로 삼는다. */
#mic-btn {
  border: none; background: transparent; padding: 2px; margin: 0;
  cursor: pointer; color: #3a3a3a; /* 기본(listening) - 톤다운 매트 다크그레이 */
  display: flex; align-items: center; justify-content: center;
  transition: color 0.2s ease, opacity 0.2s ease;
}
#mic-btn.wake-flash { color: #a66b45; } /* 차콜 인식 2초 반짝임 - 매트 테라코타 */
#mic-btn.mic-off { color: #a3a3a3; opacity: .55; } /* 사용자가 눌러서 끈 상태 */

/* fix27: 컨트롤타워(안내문 = 명령로그 #dialogue + 상태 #status). 더 이상 우측 33vw
   전체높이 패널이 아니라 composer(마이크) 바로 위에 붙는다. app.js의
   positionControlTower()가 composer가 클릭으로 움직일 때마다 같이 따라가게 만든다.
   예전엔 #status만 따로 position:fixed(bottom:10px;left:12px)를 갖고 있어서 부모
   레이아웃과 무관하게 혼자 좌하단으로 튕겨나가고, #dialogue는 부모(control-tower,
   우측 패널)를 따라 반대편에 남아 "안내문이 계속 옮겨다닌다"는 증상의 실제 원인이었다.
   이제 두 자식 모두 독자적인 position이 없어서 항상 같은 자리에 붙어 다닌다. */
#control-tower {
  position: fixed;
  left: 16px;
  bottom: 46px;
  max-width: 55vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  pointer-events: none;
  z-index: 45;
}
#dialogue {
  font-size: 13px; line-height: 1.6; color: #777777;
  max-width: 100%; pointer-events: none;
}
#dialogue .cmd-line {
  opacity: 1; transition: opacity 0.6s ease, filter 0.6s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#dialogue .cmd-line.vaporize {
  opacity: 0; filter: blur(2px);
}
#status {
  font-size: 11px; color: #999999;
}

/* 입력창이 비어있을 때만 보이는 깜빡이는 가짜 커서 - 매트, 얇게 */
#fake-caret {
  display: inline-block;
  width: 1.5px; height: 16px;
  background: #454545;
  margin-right: 2px;
  vertical-align: middle;
  animation: caret-blink 1s steps(1) infinite;
}
#fake-caret.hidden { display: none; }
@keyframes caret-blink { 50% { opacity: 0; } }