/* ══════════════════════════════════════════════════════════
   sim.css — 공유보드 패널(시뮬레이터 + 연결 표시) 공통 디자인
   블록(coding.html) · 파이썬(python.html) · C(arduino.html) 셋이 같이 쓴다.
   각 페이지의 <style> 보다 뒤에 불러서, 페이지마다 달랐던 값을 여기서 덮어쓴다.
   ══════════════════════════════════════════════════════════ */

/* ── 보드 그림 위 마커 ── */
.mk {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 5;
}
.mk-say { transform: translate(-50%, -100%); z-index: 20; }
.mk .sim-led, .mk .sim-buzzer, .mk .sim-motor { position: static; }

/* ── LED ── */
.sim-led {
  width: 8px; height: 8px; border-radius: 50%;
  opacity: .12;
  transition: opacity .2s, box-shadow .2s;
  pointer-events: none;
}
/* 켜진 LED 는 살짝 커지고, 가운데가 하얗게 달아오른다.
   빨강 LED 가 빨강 스위치 불빛 안에 있어도 '켜졌다'가 분명히 보이도록. */
.mk .sim-led { position: relative; width: 11px; height: 11px; }
.mk .sim-led.on { width: 13px; height: 13px; }
.sim-led.on::after {
  content: ''; position: absolute; inset: 24%;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 7px 3px rgba(255,255,255,.95);
}
.sim-led.on {
  opacity: 1;
  box-shadow: 0 0 14px 6px currentColor, 0 0 30px 10px currentColor;
  animation: led-glow .8s ease-in-out infinite alternate;
}
.mk .sim-led.on { animation: led-glow-sm .8s ease-in-out infinite alternate; }

@keyframes led-glow {
  from { box-shadow: 0 0 10px 4px currentColor, 0 0 20px 8px currentColor; }
  to   { box-shadow: 0 0 16px 8px currentColor, 0 0 35px 14px currentColor; }
}
/* 보드 위 LED — 작아서 잘 안 보이던 것을 키우고, 속이 하얗게 달아오르게 했다.
   (빨강 LED 가 빨강 스위치 바로 아래라, 스위치 불빛에 묻혀 안 켜진 것처럼 보였다) */
@keyframes led-glow-sm {
  from { box-shadow: 0 0 8px 4px currentColor,  0 0 16px 7px currentColor,
                     inset 0 0 5px 1px rgba(255,255,255,.95); }
  to   { box-shadow: 0 0 13px 7px currentColor, 0 0 26px 11px currentColor,
                     inset 0 0 6px 2px rgba(255,255,255,1); }
}

/* ── 부저 ── */
.sim-buzzer {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid transparent;
  pointer-events: none;
  transition: all .15s;
}
.sim-buzzer.on {
  border-color: #FF9800;
  box-shadow: 0 0 18px 6px rgba(255,152,0,.5), 0 0 40px 12px rgba(255,152,0,.2);
  animation: buzzer-pulse .15s infinite alternate;
}
.sim-buzzer.on::after {
  content: ''; position: absolute; inset: -10px;
  border-radius: 50%; border: 1px solid rgba(255,152,0,.3);
  animation: buzzer-wave .6s ease-out infinite;
}
@keyframes buzzer-pulse { from { transform: scale(1); } to { transform: scale(1.1); } }
@keyframes buzz-pulse  { from { transform: scale(1); } to { transform: scale(1.1); } }
@keyframes buzzer-wave { from { transform: scale(1); opacity: .6; } to { transform: scale(2.5); opacity: 0; } }
@keyframes buzz-wave   { from { transform: scale(1); opacity: .6; } to { transform: scale(2.5); opacity: 0; } }

/* 부저 주파수 표시 — 페이지마다 클래스 이름이 달라서 둘 다 받아 준다 */
.buzzer-freq-label, .buzz-hz {
  position: absolute; left: 50%; top: -17px; transform: translateX(-50%);
  font-size: 9px; font-weight: 900; color: #FF9800;
  white-space: nowrap; display: none;
  text-shadow: 0 0 6px rgba(255,152,0,.5);
  pointer-events: none;
}
.buzzer-freq-label.on, .buzz-hz.on { display: block; animation: freq-blink .5s infinite alternate; }
@keyframes freq-blink { from { opacity: .6; } to { opacity: 1; } }

/* ── 모터 ── */
.sim-motor {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.3);
  font-size: 10px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  transition: all .15s;
}
body.light .sim-motor { border-color: rgba(15,23,42,.15); color: rgba(15,23,42,.3); }
.sim-motor.on {
  border-color: #9C27B0; color: #CE93D8;
  box-shadow: 0 0 12px 4px rgba(156,39,176,.5);
  animation: motor-spin .5s linear infinite;
}
.sim-motor.on.reverse, .sim-motor.on.rev { animation-direction: reverse; }
@keyframes motor-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── 보드 위 스위치 — 평소엔 작은 색점, 누르면 커지면서 빛난다 ── */
.sim-sw-dot {
  width: 14px; height: 14px; border-radius: 50%;
  font-size: 0; line-height: 0; color: transparent;
  border: 1.5px solid rgba(255,255,255,.45);
  opacity: .75;
  transition: width .14s, height .14s, opacity .14s, box-shadow .14s, border-color .14s;
}
.sim-sw-dot[data-c="red"]    { background: #F44336; }
.sim-sw-dot[data-c="blue"]   { background: #2196F3; }
.sim-sw-dot[data-c="green"]  { background: #4CAF50; }
.sim-sw-dot[data-c="yellow"] { background: #FFC107; }

/* 시뮬레이터일 때만 누를 수 있다 (.mk 가 pointer-events:none 이라 여기서 되살린다) */
body.sim-on .sim-sw-dot       { cursor: pointer; opacity: 1; pointer-events: auto; }
body.sim-on .sim-sw-dot:hover { width: 18px; height: 18px; border-color: #fff; }

.sim-sw-dot.on { width: 22px; height: 22px; opacity: 1; border-color: #fff; }
.sim-sw-dot.on[data-c="red"]    { box-shadow: 0 0 11px 4px rgba(244,67,54,.6); }
.sim-sw-dot.on[data-c="blue"]   { box-shadow: 0 0 11px 4px rgba(33,150,243,.6); }
.sim-sw-dot.on[data-c="green"]  { box-shadow: 0 0 11px 4px rgba(76,175,80,.6); }
.sim-sw-dot.on[data-c="yellow"] { box-shadow: 0 0 11px 4px rgba(255,193,7,.6); }

/* ── 보드 위 센서 값 칩 ── */
.ov-chip {
  background: rgba(0,0,0,.68);
  padding: 2px 7px; border-radius: 9px;
  font-size: 10px; font-weight: 800; color: #cbd5e1;
  white-space: nowrap;
  transition: color .2s, box-shadow .2s;
  pointer-events: none;
}
.ov-chip.hot { color: #fff; box-shadow: 0 0 10px 2px rgba(96,165,250,.55); }

/* ── 말풍선 (say) ── */
.say-bubble {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  background: #fff; color: #1e293b;
  font-size: 12px; font-weight: 900;
  padding: 6px 14px; border-radius: 14px;
  box-shadow: 0 4px 15px rgba(0,0,0,.3);
  display: none; z-index: 20;
  white-space: nowrap; max-width: 250px;
  overflow: hidden; text-overflow: ellipsis;
}
.say-bubble::after {
  content: ''; position: absolute; bottom: -6px; left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 6px solid #fff;
}
.say-bubble.on { display: block; animation: bubble-pop .3s ease-out; }
.mk-say .say-bubble { position: static; transform: none; top: auto; left: auto; }
.mk-say .say-bubble::after { left: 50%; margin-left: -6px; transform: none; }
.mk-say .say-bubble.on { animation: bubble-pop2 .3s ease-out; }
@keyframes bubble-pop  { from { transform: translateX(-50%) scale(.5); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
@keyframes bubble-pop2 { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ── 보드 그림 ── */
#board-sim { position: relative; width: 300px; margin: 0 auto; user-select: none; }
#board-sim > img { width: 100%; display: block; border-radius: 12px; }

/* ══════════════════════════════════════════════════════════
   연결 줄 — 보드 그림 바로 위의 [연결] 버튼과 상태 표시
   세 편집기에서 규격이 달랐던 부분이라 여기로 모았다.
   ══════════════════════════════════════════════════════════ */
.side-connect {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 0; flex-shrink: 0;
}
.side-connect .tb-btn { flex: 1; padding: 9px 0; font-size: 13px; }

/* 연결 상태 — 알약 모양 배지 (.online / .on 둘 다 켜짐으로 본다) */
.conn-badge {
  font-size: 11px; font-weight: 900;
  padding: 4px 10px; border-radius: 20px;
  background: rgba(255,255,255,.08); color: #94a3b8;
  white-space: nowrap;
}
.conn-badge.online, .conn-badge.on { background: rgba(34,197,94,.2); color: #4ade80; }
body.light .conn-badge { background: #e2e8f0; color: #475569; }
body.light .conn-badge.online, body.light .conn-badge.on { background: #dcfce7; color: #15803d; }

/* 센서 모니터 머리글의 상태 — 이쪽은 배지가 아니라 작은 글씨 */
.sp-status { font-size: 10px; font-weight: 700; color: #64748b; white-space: nowrap; }
.sp-status.connected, .sp-status.on { color: #4ade80; }
body.light .sp-status { color: #94a3b8; }
body.light .sp-status.connected, body.light .sp-status.on { color: #15803d; }

/* 버튼 글꼴 — 지정하지 않으면 브라우저 기본(Arial)이 잡혀서
   같은 padding 인데도 페이지마다 버튼 높이와 글자 모양이 달라진다. */
.tb-btn, .pinmap-link { font-family: inherit; }

/* 켜진 LED 는 스위치 불빛 위로 올라오게 (가려져서 안 보이는 일이 없도록) */
#mk-led1, #mk-led2, #mk-led3, #mk-led4 { z-index: 8; }

/* ══════════════════════════════════════════════════════════
   실행 줄 — [▶ 실행] 과 [⬇ 보드에 다운로드]
   세 편집기에서 색·모양이 제각각이라 여기로 모았다.
   ══════════════════════════════════════════════════════════ */
.run-bar {
  display: grid; grid-template-columns: 1fr; gap: 7px;
  padding: 10px 12px; flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
body.light .run-bar { border-top-color: #e2e8f0; }
.run-bar .tb-btn {
  position: relative;
  padding: 12px 0; font-size: 14px; font-weight: 900;
}

/* 보드에 다운로드 — primary(초록)·danger(빨강) 과 같은 '꽉 찬' 계열로 맞춘다 */
.tb-btn.flash { background: #d97706; border-color: #d97706; color: #fff; }
.tb-btn.flash:hover:not(:disabled) { background: #b45309; border-color: #b45309; color: #fff; }
body.light .tb-btn.flash { background: #d97706; border-color: #d97706; color: #fff; }
body.light .tb-btn.flash:hover:not(:disabled) { background: #b45309; border-color: #b45309; color: #fff; }
.run-bar .flash { grid-column: 1 / -1; }

/* 아직 준비 중인 버튼에 붙이는 작은 꼬리표 */
.tb-btn .soon-badge {
  display: inline-block;
  margin-left: 7px; padding: 2px 7px; border-radius: 20px;
  font-size: 10px; font-weight: 900;
  line-height: 1; vertical-align: middle;   /* 버튼 높이를 키우지 않도록 */
  background: rgba(0,0,0,.28); color: #fff;
}
/* 꼬리표가 붙어도 세 편집기의 버튼 높이가 같게 */
.run-bar .tb-btn { min-height: 42px; line-height: 1.2; }
.tb-btn.soon { background: #7c6f5a; border-color: #7c6f5a; }
.tb-btn.soon:hover:not(:disabled) { background: #6b5f4d; border-color: #6b5f4d; }
body.light .tb-btn.soon { background: #a8a29e; border-color: #a8a29e; color: #fff; }
body.light .tb-btn.soon:hover:not(:disabled) { background: #928d88; border-color: #928d88; color: #fff; }


/* ══ 보드 칸 버튼 줄이기 (2026-09-23) ══════════════════════
   연결 · 실행 · 다운로드가 각각 한 줄씩 먹어 194px 이었다.
   제목줄에 연결을 합치고 실행·다운로드를 한 줄로 묶어 110px 로 줄인다.
   버튼 높이(42px)는 그대로 둔다 — 터치 권장 크기(44px) 언저리라
   더 줄이면 태블릿 수업에서 잘 안 눌린다. */

/* ① 제목줄 = [▼ 공유보드] ··· [연결] [상태] [◀]
      (구체적인 규칙은 아래 '보드 칸 머리' 절에 모아 두었다) */
.panel-head { gap: 8px; padding: 9px 12px; }

/* ② 실행 · 다운로드를 한 줄로. 실행을 더 크게 */
.run-bar { grid-template-columns: 1.7fr 1fr; }
.run-bar .flash { grid-column: auto; }
.run-bar .tb-btn.flash { font-size: 13px; }

/* ④ 다운로드 확인창 (js/dl-confirm.js 가 만든다) */
.dl-note {
  font-size: 12.5px; font-weight: 700; line-height: 1.8;
  color: #94a3b8; margin-bottom: 12px;
}
body.light .dl-note { color: #475569; }
.dl-warn {
  font-size: 12px; font-weight: 700; line-height: 1.85;
  background: rgba(217,119,6,.13); border: 1px solid rgba(217,119,6,.35);
  color: #fbbf24; border-radius: 10px; padding: 11px 13px; margin-bottom: 16px;
}
body.light .dl-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.dl-row { display: flex; gap: 8px; }
.dl-row .tb-btn { flex: 1; padding: 11px 0; font-size: 13px; font-weight: 900; }
.dl-row .tb-btn.flash { flex: 1.4; }

/* ⑤ 툴바 버튼 높이를 맞춘다 — 이모지가 든 버튼만 2px 더 높았다 */
.toolbar .tb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 32px; line-height: 1.2;
}


/* ══ 보드 칸 머리 — 센서 모니터·바이브 코딩과 같은 모양 (2026-09-28) ══
   [▼ 공유보드] ······················· [🔗 연결] [연결 안됨] [◀]

   왜 이렇게 —
     센서 모니터(.sp-header)·바이브 코딩(.vibe-head) 은 둘 다 "왼쪽에 화살표,
     그 옆에 제목, 누르면 접힌다" 이다. 보드 칸만 화살표가 오른쪽 끝에 있고
     제목이 숨어 있어서, 같은 화면에서 혼자 다른 물건처럼 보였다.
   네 편집기(블록·블록AI·파이썬·C)가 이 한 파일을 같이 쓴다. */

/* ▼ + 공유보드 — 통째로 누르는 버튼. 보드 '그림'만 접는다.
   칸 전체를 감추는 ◀ 와는 다르다. 그림이 200px 넘게 먹어서,
   접으면 아래(센서·콘솔·바이브)가 스크롤 없이 넉넉해진다. */
.ph-fold {
  display: flex; align-items: center; gap: 6px;
  margin-right: auto;                       /* 나머지를 오른쪽으로 민다 */
  background: none; border: none; cursor: pointer; font-family: inherit;
  padding: 3px 6px; border-radius: 6px; flex-shrink: 0;
}
.ph-fold:hover { background: rgba(255,255,255,.06); }
body.light .ph-fold:hover { background: #f1f5f9; }

.ph-caret {
  font-size: 9px; color: #64748b; display: inline-block;
  transition: transform .15s;
}
.panel-head .ph-title {
  display: inline-block; font-size: 12px; font-weight: 900; color: #94a3b8;
  letter-spacing: .2px;
}
body.light .panel-head .ph-title { color: #64748b; }
.ph-fold:hover .ph-title { color: #e2e8f0; }
body.light .ph-fold:hover .ph-title { color: #0f172a; }

/* 접히면 화살표가 오른쪽을 본다 — 센서 모니터와 같은 방향 */
body.board-min .ph-caret { transform: rotate(-90deg); }

/* 블록 편집기는 .stage-wrap, 파이썬·C 는 .stage 로 이름이 다르다 — 둘 다 적는다 */
body.board-min .stage, body.board-min .stage-wrap { display: none; }

/* 연결 버튼 — 줄을 다 먹지 않게. 이제 제목이 왼쪽 자리를 쓴다 */
.panel-head .tb-btn {
  flex: 0 0 auto; padding: 6px 11px; font-size: 12px; font-weight: 800;
}
.panel-head .conn-badge { flex-shrink: 0; }

/* ◀ 로 칸을 통째로 접었을 때 — 세로로 '공유보드' 만 남긴다 */
body.board-collapsed .panel-head .tb-btn,
body.board-collapsed .panel-head .conn-badge,
body.board-collapsed .ph-caret { display: none; }
body.board-collapsed .ph-fold {
  margin: 0; pointer-events: none;          /* 그림 접기는 여기선 의미가 없다 */
}
body.board-collapsed .ph-fold:hover { background: none; }