/* Paper Harmony - WordPress Plugin CSS */
/* 完全CSS隔離とテーマ干渉対策 */

/* メインコンテナの隔離 */
.paper-harmony-app {
  all: initial !important;
  display: block !important;
  box-sizing: border-box !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Meiryo, sans-serif !important;
  position: relative !important;
  z-index: 1000 !important;
  isolation: isolate !important;
  background: #fafafa !important;
  color: #1f2937 !important;
  line-height: 1.4 !important;
  font-size: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  min-height: 600px !important;
}

.paper-harmony-app * {
  all: unset !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
}



/* CSS変数をスコープ内で定義 */
.paper-harmony-app {
  --ph-board: #f6f3e9;
  --ph-ui: #2563eb;
  --ph-ui-hover: #1d4ed8;
  --ph-line: #e5e7eb;
  --ph-text: #1f2937;
  --ph-success: #10b981;
  --ph-danger: #ef4444;
  --ph-warning: #f59e0b;
  --ph-background: #fafafa;
}

/* レイアウト */
.ph-wrap {
  max-width: 1400px !important;
  margin: 16px auto !important;
  padding: 0 12px !important;
  display: block !important;
}

.ph-grid {
  display: grid !important;
  grid-template-columns: 250px 1fr 220px !important;
  gap: 16px !important;
  min-height: 600px !important;
}

@media (max-width: 900px) {
  .ph-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .ph-panel {
    order: 2 !important;
  }
  .ph-stage-wrap {
    order: 1 !important;
  }
  .ph-layer-panel {
    order: 3 !important;
  }
}

/* パネル */
.ph-panel {
  background: #fff !important;
  border: 1px solid var(--ph-line) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
  height: fit-content !important;
  display: block !important;
}

.ph-section {
  margin-bottom: 16px !important;
  display: block !important;
}
.ph-section:last-child {
  margin-bottom: 0 !important;
}

.ph-section-title {
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  color: var(--ph-text) !important;
  font-size: 0.9rem !important;
  display: block !important;
}

.ph-row {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}
.ph-row:last-child {
  margin-bottom: 0 !important;
}

/* ボタン */
.ph-btn {
  appearance: none !important;
  border: 1px solid var(--ph-line) !important;
  background: #fff !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-size: 0.85rem !important;
  transition: all .2s !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: var(--ph-text) !important;
  font-family: inherit !important;
  text-decoration: none !important;
}

.ph-btn:hover {
  background: #f8fafc !important;
  border-color: var(--ph-ui) !important;
}

.ph-btn[aria-pressed="true"] {
  background: var(--ph-ui) !important;
  color: #fff !important;
  border-color: var(--ph-ui) !important;
}

.ph-btn:disabled {
  opacity: .5 !important;
  cursor: not-allowed !important;
}

.ph-btn.ph-success {
  background: var(--ph-success) !important;
  color: #fff !important;
  border-color: var(--ph-success) !important;
}

.ph-btn.ph-danger {
  background: var(--ph-danger) !important;
  color: #fff !important;
  border-color: var(--ph-danger) !important;
}

/* カラーパレット */
.ph-swatch {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: 2px solid var(--ph-line) !important;
  cursor: pointer !important;
  transition: all .2s !important;
  position: relative !important;
  display: block !important;
  background: inherit !important; /* 重要: inline styleの背景色を保護 */
}

.ph-swatch:hover {
  transform: scale(1.1) !important;
}

.ph-swatch.ph-active {
  border-color: var(--ph-ui) !important;
  border-width: 3px !important;
}

.ph-swatch.ph-active::after {
  content: '✓' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%,-50%) !important;
  color: #fff !important;
  font-weight: bold !important;
  font-size: 12px !important;
  text-shadow: 1px 1px 1px rgba(0,0,0,.5) !important;
}

/* ステージエリア */
.ph-stage-wrap {
  position: relative !important;
  background: #fff !important;
  padding: 20px !important;
  border: 1px solid var(--ph-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
  display: block !important;
}

.ph-board {
  width: 100% !important;
  aspect-ratio: 1000/700 !important;
  border-radius: 12px !important;
  border: 2px solid #d6d3d1 !important;
  background: var(--ph-board) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.06) !important;
  cursor: crosshair !important;
  display: block !important;
}

.ph-board.ph-compose-mode {
  cursor: grab !important;
}

.ph-board.ph-compose-mode:active {
  cursor: grabbing !important;
}

.ph-board::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background-image: radial-gradient(rgba(0,0,0,.03) 1px, transparent 1px) !important;
  background-size: 4px 4px !important;
  mix-blend-mode: multiply !important;
}

/* Canvas */
.ph-board canvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* モードインジケータ */
.ph-mode-indicator {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  background: rgba(255,255,255,.9) !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-size: .75rem !important;
  font-weight: 600 !important;
  border: 1px solid var(--ph-line) !important;
  display: block !important;
}

.ph-mode-indicator.ph-edit {
  color: var(--ph-warning) !important;
}

.ph-mode-indicator.ph-compose {
  color: var(--ph-ui) !important;
}

/* 形状セレクタ */
.ph-shape-selector {
  display: flex !important;
  gap: 4px !important;
  margin-bottom: 8px !important;
}

.ph-shape-btn {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid var(--ph-line) !important;
  background: #fff !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .2s !important;
  font-size: 16px !important;
}

.ph-shape-btn:hover {
  background: #f8fafc !important;
}

.ph-shape-btn.ph-active {
  background: var(--ph-ui) !important;
  color: #fff !important;
  border-color: var(--ph-ui) !important;
}

/* ドラフトプレビュー */
.ph-draft-preview {
  background: #f8fafc !important;
  border: 1px solid var(--ph-line) !important;
  border-radius: 6px !important;
  padding: 8px !important;
  font-size: .8rem !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.ph-draft-preview.ph-empty {
  color: #94a3b8 !important;
}

/* レイヤーリスト */
.ph-layer-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  max-height: 400px !important;
  overflow: auto !important;
  padding: 2px !important;
}

.ph-layer-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px !important;
  border: 1px solid var(--ph-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  cursor: pointer !important;
  transition: all .2s !important;
}

.ph-layer-item:hover {
  background: #f8fafc !important;
  border-color: var(--ph-ui) !important;
}

.ph-layer-item.ph-active {
  outline: 2px solid var(--ph-ui) !important;
  background: #eff6ff !important;
}

.ph-layer-name {
  flex: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: .85rem !important;
  display: block !important;
}

.ph-layer-count {
  color: #64748b !important;
  font-size: .8rem !important;
  font-weight: normal !important;
}

/* ヘルプテキスト */
.ph-help-text {
  color: #64748b !important;
  font-size: .8rem !important;
  line-height: 1.4 !important;
  background: #f8fafc !important;
  padding: 8px !important;
  border-radius: 6px !important;
  margin-top: 8px !important;
  display: block !important;
}

/* 入力要素 */
.paper-harmony-app input[type="color"] {
  width: auto !important;
  height: 32px !important;
  border: 1px solid var(--ph-line) !important;
  border-radius: 6px !important;
  background: #fff !important;
  cursor: pointer !important;
  outline: none !important;
  padding: 0 !important;
}

/* フルスクリーン対応（必要に応じて） */
.paper-harmony-app.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  background: var(--ph-background) !important;
  overflow: auto !important;
}

/* スウォッチとレイヤーの色チップは、リセットの例外にする */
.paper-harmony-app .ph-swatch {
  all: initial !important;                  /* ここで全リセットを解除 */
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: 2px solid var(--ph-line) !important;
  cursor: pointer !important;
  transition: all .2s !important;
  position: relative !important;
  background: var(--ph-swatch, transparent) !important; /* ← 色はCSS変数から */
}

/* レイヤーリスト内の小さな色チップ（JSで作るやつ）も同様 */
.paper-harmony-app .ph-layer-item .ph-swatch {
  all: initial !important;
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 4px !important;
  border: 1px solid var(--ph-line) !important;
  background: var(--ph-swatch, transparent) !important;
}