@import './base.css';

#app {
  font-weight: normal;
}

/* 네이티브 앱(Capacitor) safe-area: 상단 상태바 / 하단 제스처바 영역 확보 */
html.is-native .layout-top {
  /* 상태바 높이(safe-area)에 더해 여유 간격을 줘서 헤더가 상태바에 붙지 않게 */
  padding-top: calc(env(safe-area-inset-top) + 14px);
  height: auto;
  min-height: 56px;
}
html.is-native .layout-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
}

@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
}

/* ===== Toast UI 코드 스타일 (에디터/뷰어 공통) =====
   인라인 코드: 다크 배경 + 흰 글자 / 코드 블록: 다크 + 구문 강조(Prism) + Copy 버튼.
   클래스 중첩으로 우선순위를 높여 라이브러리 기본 스타일을 덮어쓴다. */
.toastui-editor-contents.toastui-editor-contents :not(pre) > code {
  color: #ffffff;
  background-color: #1e1e1e;
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 100%;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}
.toastui-editor-contents.toastui-editor-contents pre {
  position: relative;
  background-color: #1e1e1e;
  border-radius: 8px;
  padding: 14px 16px;
  overflow: auto;
  font-size: 100%;
  line-height: 1.5;
}
.toastui-editor-contents.toastui-editor-contents pre code {
  background: transparent;
  padding: 0;
  font-size: 100%;
  color: #f0f0f0;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

/* 코드 블록 Copy 버튼 (JS로 주입되므로 전역 스타일) */
.toastui-editor-contents pre .code-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 12px;
  font-size: 12px;
  color: #ddd;
  background: #2d2d2d;
  border: 1px solid #444;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.toastui-editor-contents pre .code-copy-btn:hover {
  background: #3a3a3a;
  color: #fff;
}