* { box-sizing: border-box; user-select: none; margin: 0; padding: 0; }

/* ▼ 変更: Macネイティブフォントを優先指定 */
body {
  height: 100vh; overflow: hidden; display: flex; flex-direction: column;
  background: #808890; 
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Arial, "Yu Gothic", sans-serif;
  font-size: 12px;
}

/* ▼ 新規追加: Mac Safari等で強制適用されるフォームのスタイル（丸み等）をリセットし統一 */
input[type="number"], input[type="color"], button {
  -webkit-appearance: none;
  appearance: none;
}
/* Chrome/Safariのnumber入力のスピナー（上下矢印）を消す */
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* プルダウンメニューバー */
.menu-bar {
  background: #f0f0f0; border-bottom: 1px solid #a0a0a0;
  display: flex; align-items: center; height: 24px; padding: 0 4px; z-index: 1000;
}
#menu-bar-convert {
  background: #dbe8f5; border-bottom-color: #7ba2c7;
}

.menu-item { position: relative; padding: 2px 8px; cursor: pointer; }
.menu-item:hover { background: #3399ff; color: #fff; }
.dropdown {
  display: none; position: absolute; top: 100%; left: 0; background: #fff;
  color: #000; border: 1px solid #999; box-shadow: 2px 2px 5px rgba(0,0,0,0.2); min-width: 160px; z-index: 1001;
}
.menu-item:hover > .dropdown { display: block; }
.dropdown-item { padding: 4px 16px; position: relative; white-space: nowrap; cursor: pointer; }
.dropdown-item:hover { background: #3399ff; color: #fff; }

.dropdown-submenu {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dropdown-submenu > .dropdown-menu-child {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background: #fff;
  color: #000;
  border: 1px solid #999;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.25);
  min-width: 175px;
  z-index: 1002;
}
.dropdown-submenu:hover > .dropdown-menu-child {
  display: block;
}

.disabled-item {
  color: #999 !important;
  cursor: default !important;
}
.disabled-item:hover {
  background: transparent !important;
  color: #999 !important;
}

.ap-btn { color: #0033aa; font-weight: bold; }
.ap-btn:hover { background: #0055ea; color: #fff; }
.ap-btn-return { color: #cc3300; font-weight: bold; }
.ap-btn-return:hover { background: #cc3300; color: #fff; }

/* ツールバー */
.tool-bar {
  background: #e4e4e4; border-bottom: 1px solid #888;
  height: 32px; display: flex; align-items: center; padding: 0 6px; gap: 3px;
}
.tool-btn {
  min-width: 26px; height: 24px; background: #efefef; border: 1px solid #707070;
  border-radius: 2px; font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 5px;
}
.tool-btn:hover { background: #dcdcdc; }
.tool-btn.active { background: #b0c4de; border-color: #000080; font-weight: bold; }

.tool-btn-action {
  height: 24px; background: #ffffff; border: 1px solid #0055ea; color: #0033aa;
  font-weight: bold; border-radius: 2px; font-size: 11px; cursor: pointer; display: flex; align-items: center; padding: 0 8px;
}
.tool-btn-action:hover { background: #0055ea; color: #ffffff; }

.separator { width: 1px; height: 20px; background: #a0a0a0; margin: 0 4px; }

/* キャンバス領域 */
#canvas-container { flex: 1; position: relative; width: 100%; background: #7a8288; overflow: hidden; }
canvas { display: block; width: 100%; height: 100%; }

/* 数値入力ボックス共通 */
#cmd-input-box, .cad-input-popup {
  position: absolute; display: none; background: #fff; border: 2px solid #0055ea;
  padding: 4px 6px; border-radius: 2px; box-shadow: 2px 2px 8px rgba(0,0,0,0.4); z-index: 50;
  flex-direction: column; gap: 3px;
}
.input-row { display: flex; align-items: center; gap: 4px; }
.input-row span { font-weight: bold; color: #0055ea; width: 62px; font-size: 11px; }
.input-row input { width: 75px; font-size: 12px; border: 1px solid #777; outline: none; padding: 2px 4px; }

/* 重複要素選択ポップアップ */
.cad-dup-popup {
  position: absolute; display: none; background: #ffffff; border: 2px solid #0055ea;
  box-shadow: 3px 3px 10px rgba(0,0,0,0.4); z-index: 120; border-radius: 3px;
  flex-direction: column; min-width: 170px; font-size: 11px;
}
.dup-header { background: #0055ea; color: #fff; font-weight: bold; padding: 3px 6px; }
.dup-list { display: flex; flex-direction: column; max-height: 160px; overflow-y: auto; }
.dup-item { padding: 4px 8px; cursor: pointer; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between; }
.dup-item:hover { background: #e6f2ff; color: #0033aa; font-weight: bold; }

/* ================= 操作ガイド・フローティングパネル ================= */
#guide-panel {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 290px;
  background: rgba(255, 255, 255, 0.98);
  border: 2px solid #0055ea;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  z-index: 1200;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Arial, "Yu Gothic", sans-serif;
  display: flex;
  flex-direction: column;
  user-select: none;
}
.guide-header {
  background: #0055ea;
  color: #ffffff;
  font-weight: bold;
  font-size: 12px;
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: move;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.guide-header-btns {
  display: flex;
  gap: 4px;
}
.guide-btn-icon {
  background: rgba(255, 255, 255, 0.25);
  border: none;
  color: #ffffff;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guide-btn-icon:hover {
  background: rgba(255, 255, 255, 0.45);
}
.guide-body {
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: #222222;
}
.guide-step {
  font-weight: bold;
  color: #0044bb;
  margin-bottom: 6px;
  font-size: 13px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 3px;
}
.guide-desc {
  margin-bottom: 8px;
  font-size: 12px;
  color: #333333;
}
.guide-keys {
  background: #f0f4f9;
  border-left: 3px solid #0055ea;
  padding: 5px 8px;
  font-size: 11px;
  color: #444444;
  border-radius: 0 3px 3px 0;
}
.guide-keys kbd {
  background: #ffffff;
  border: 1px solid #aaa;
  border-radius: 3px;
  padding: 1px 4px;
  font-family: monospace;
  font-size: 10px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* 下部スーパーコマンド & ステータス */
#super-bar {
  height: 30px; background: #dcdcdc; border-top: 1px solid #777;
  display: flex; align-items: center; justify-content: space-between; padding: 0 6px;
}
#super-left { display: flex; align-items: center; gap: 4px; }
#super-right { display: flex; align-items: center; gap: 15px; font-size: 12px; font-weight: bold; }

.super-btn {
  height: 22px; padding: 0 6px; background: #f4f4f4; border: 1px solid #707070;
  border-radius: 2px; cursor: pointer; font-size: 11px; display: flex; align-items: center; gap: 3px;
}
.super-btn:hover { background: #e0e0e0; }
.super-btn.active-danger { background: #ffcccc; border-color: #cc0000; font-weight: bold; color: #cc0000; }

.super-btn-square {
  height: 22px; width: 54px; background: #ffffff; border: 2px groove #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 1px;
}
.super-btn-square:active { border-style: inset; }

#super-guide {
  flex: 1; text-align: center; font-size: 12px; font-weight: bold;
  color: #003366; background: #ffffcc; border: 1px solid #cccc88;
  padding: 2px 8px; margin: 0 10px; border-radius: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

#cad-hud {
  position: absolute; pointer-events: none; display: none; z-index: 100;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 11px; flex-direction: column; gap: 2px;
}
.hud-badge { background: rgba(0, 0, 0, 0.75); color: #fff; padding: 1px 6px; border-radius: 3px; width: fit-content; }
.hud-snap { background: rgba(200, 100, 0, 0.9); color: #fff; font-weight: bold; }

/* パレット共通 */
.cad-palette {
  position: absolute; bottom: 32px; left: 6px;
  background: #f0f0f0; border: 2px solid #555;
  padding: 4px; display: none; flex-direction: column; gap: 3px;
  box-shadow: 3px 3px 10px rgba(0,0,0,0.5); z-index: 1500; border-radius: 3px;
}
.palette-item {
  width: 70px; height: 18px; background: #ffffff; border: 1px solid #999;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.palette-item:hover { background: #d0e4ff; border-color: #000080; }
.ltype-preview { width: 62px; height: 12px; display: block; }

.palette-color-item {
  width: 60px; height: 18px; background: #e0e0e0; border: 1px solid #808080;
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 1px;
}
.palette-color-item:hover { background: #ffffff; border-color: #000080; }

.pencil-icon-mini {
  width: 46px; height: 14px; position: relative;
  border: 1px solid #444; border-radius: 2px; display: flex; align-items: center;
}
.pencil-icon-mini::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 7px;
  background: #d2b48c; clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.pencil-icon-mini::after {
  content: ''; position: absolute; left: 9px; right: 2px; height: 6px;
  border-radius: 1px; border: 1px solid rgba(0,0,0,0.3);
}

.c-black::after  { background: #000000; }
.c-blue::after   { background: #0033ff; }
.c-red::after    { background: #ff0000; }
.c-magenta::after{ background: #ff00ff; }
.c-green::after  { background: #00dd00; }
.c-cyan::after   { background: #00ffff; }
.c-yellow::after { background: #ffff00; }
.c-white::after  { background: #ffffff; }

/* モーダル */
.modal-overlay {
  display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.4); z-index: 2000; align-items: center; justify-content: center;
}
.modal-box {
  background: #f0f0f0; border: 2px solid #666; border-radius: 4px;
  width: 260px; box-shadow: 4px 4px 12px rgba(0,0,0,0.5); font-size: 12px;
}
.modal-header { background: #000080; color: #fff; font-weight: bold; padding: 4px 8px; }
.modal-body { padding: 12px 15px; }
.modal-body input[type="number"] { width: 70px; padding: 3px; font-size: 12px; border: 1px solid #777; outline: none; }
.modal-footer { padding: 6px 8px; background: #e0e0e0; display: flex; justify-content: flex-end; gap: 6px; border-top: 1px solid #ccc; }
.modal-btn { padding: 3px 12px; font-size: 11px; cursor: pointer; border: 1px solid #707070; background: #fdfdfd; border-radius: 2px; }
.modal-btn:hover { background: #e6e6e6; }

.bg-swatch { flex: 1; height: 24px; border: 1px solid #555; cursor: pointer; border-radius: 2px; }
.bg-swatch:hover { border-color: #000080; outline: 1px solid #000080; }