/* ============================
   Mockup Review System - 공용 스타일
   ============================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: #1a1a2e;
  font-family: -apple-system, 'Pretendard', sans-serif;
  min-height: 100vh;
  color: #e0e0e0;
}

/* ── 상단 바 ── */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid #2a2a4a;
  background: #12121f;
}
.top-title { font-size: 15px; font-weight: 700; color: #fff; }
.screen-nav { display: flex; gap: 6px; }
.screen-nav button {
  background: #2a2a4a; border: none; color: #888;
  padding: 7px 14px; border-radius: 8px; font-size: 12px;
  cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; gap: 6px;
}
.screen-nav button.active { background: #667eea; color: #fff; }
.screen-nav button:hover:not(.active) { background: #3a3a5a; color: #ccc; }
.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.screen-counter { font-size: 12px; color: #555; }

/* ── 메인 레이아웃 ── */
.main-layout {
  display: flex;
  height: calc(100vh - 49px);
}

/* ── 폰 영역 ── */
.phone-area {
  flex: 0 0 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

/* ── 사이드 패널 ── */
.side-panel {
  flex: 1;
  border-left: 1px solid #2a2a4a;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 툴바 */
.side-toolbar {
  display: flex; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid #2a2a4a;
}
.status-badge {
  padding: 6px 14px; border-radius: 6px; border: none;
  color: #fff; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: opacity 0.2s;
}
.status-badge:hover { opacity: 0.85; }
.pin-mode-btn {
  padding: 6px 14px; border-radius: 6px;
  border: 1px solid #3a3a5a; background: transparent;
  color: #888; font-size: 12px; cursor: pointer;
  transition: all 0.2s;
}
.pin-mode-btn.active { background: #e74c3c; color: #fff; border-color: #e74c3c; }
.pin-mode-btn:hover:not(.active) { border-color: #667eea; color: #667eea; }

/* 탭 */
.side-tabs {
  display: flex; border-bottom: 1px solid #2a2a4a;
}
.side-tab {
  flex: 1; padding: 10px 8px; border: none;
  background: transparent; color: #555; font-size: 12px;
  cursor: pointer; transition: all 0.2s;
  border-bottom: 2px solid transparent;
}
.side-tab.active { color: #fff; border-bottom-color: #667eea; }
.side-tab:hover:not(.active) { color: #aaa; }

/* 탭 컨텐츠 */
.side-content {
  display: none;
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.side-content.active { display: flex; flex-direction: column; }

/* ── 메모 ── */
.memo-header { margin-bottom: 10px; }
.memo-title { font-size: 13px; font-weight: 600; color: #aaa; }
.memo-textarea {
  flex: 1; background: #12121f;
  border: 1px solid #2a2a4a; border-radius: 10px;
  color: #e0e0e0; font-family: inherit; font-size: 13px;
  line-height: 1.7; padding: 14px; resize: none; outline: none;
  transition: border-color 0.2s;
}
.memo-textarea:focus { border-color: #667eea; }
.memo-textarea::placeholder { color: #444; }

/* ── 이력 ── */
.history-empty { color: #444; font-size: 13px; text-align: center; padding: 30px; }
.history-item {
  padding: 10px 0;
  border-bottom: 1px solid #1f1f35;
}
.history-meta { display: flex; justify-content: space-between; margin-bottom: 4px; }
.history-time { font-size: 11px; color: #555; }
.history-status { font-size: 11px; font-weight: 600; }
.history-text { font-size: 12px; color: #888; line-height: 1.5; }

/* ── 핀 ── */
.pin-marker {
  position: absolute; z-index: 30;
  width: 24px; height: 24px; border-radius: 50%;
  background: #e74c3c; transform: translate(-50%, -50%);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(231,76,60,0.5);
  transition: transform 0.15s;
}
.pin-marker:hover { transform: translate(-50%, -50%) scale(1.2); }
.pin-number { color: #fff; font-size: 11px; font-weight: 700; }

.pin-list-empty { color: #444; font-size: 13px; text-align: center; padding: 30px; }
.pin-list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid #1f1f35;
}
.pin-list-number {
  width: 22px; height: 22px; border-radius: 50%;
  background: #e74c3c; color: #fff;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pin-list-text { font-size: 13px; color: #ccc; }

/* ── 체크리스트 ── */
.check-input-row { display: flex; gap: 8px; margin-bottom: 12px; }
.check-input {
  flex: 1; background: #12121f; border: 1px solid #2a2a4a;
  border-radius: 8px; padding: 8px 12px;
  color: #e0e0e0; font-size: 13px; outline: none;
}
.check-input:focus { border-color: #667eea; }
.check-add-btn {
  width: 36px; border: none; border-radius: 8px;
  background: #667eea; color: #fff; font-size: 18px;
  cursor: pointer;
}
.check-progress {
  font-size: 12px; color: #667eea; font-weight: 600;
  margin-bottom: 8px;
}
.check-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid #1f1f35;
}
.check-item.done .check-text { text-decoration: line-through; color: #555; }
.check-item input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: #667eea; cursor: pointer;
}
.check-text { flex: 1; font-size: 13px; color: #ccc; }
.check-remove {
  background: none; border: none; color: #555;
  font-size: 16px; cursor: pointer; padding: 0 4px;
}
.check-remove:hover { color: #e74c3c; }

/* ── 화면 흐름 ── */
.flow-section {
  border-top: 1px solid #2a2a4a;
  padding: 12px 16px;
  flex-shrink: 0;
}
.flow-title { font-size: 11px; color: #555; margin-bottom: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.flow-diagram { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.flow-node {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 6px;
  background: #1f1f35; cursor: pointer;
  transition: all 0.2s; font-size: 11px;
}
.flow-node.active { background: #2a2a5a; outline: 1px solid #667eea; }
.flow-node:hover { background: #2a2a4a; }
.flow-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.flow-label { color: #aaa; white-space: nowrap; }
.flow-arrow { color: #444; font-size: 12px; padding: 0 2px; }

/* ── 폰 프레임 (공용) ── */
.phone-wrapper { display: none; }
.phone-wrapper.active { display: block; }
.phone {
  width: 375px; height: 740px; background: #fff;
  border-radius: 40px; border: 6px solid #333;
  overflow: hidden; position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.phone-notch {
  width: 150px; height: 28px; background: #333;
  border-radius: 0 0 20px 20px; margin: 0 auto;
  position: relative; z-index: 10;
}
.mockup-badge {
  position: absolute; top: 14px; right: -32px;
  background: #e74c3c; color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 4px 36px; transform: rotate(45deg);
  z-index: 20; letter-spacing: 1px;
}
.screen {
  height: calc(100% - 28px);
  overflow-y: auto; position: relative;
}

/* ── 키보드 단축키 힌트 ── */
.shortcut-hint {
  position: fixed; bottom: 12px; left: 12px;
  font-size: 11px; color: #333;
}
kbd {
  background: #2a2a4a; padding: 2px 6px; border-radius: 4px;
  font-family: inherit; font-size: 11px; color: #666;
}