/* ======================================================
 * common.css - 공통 스타일 (다크모드 적용)
 * ====================================================== */

/* ==============================
   Base Styles
   ================================ */
body {
   font-family:
      -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif;
   background-color: var(--c-bg);
   color: var(--c-text);
   transition:
      background-color var(--dur-base) var(--ease-base),
      color var(--dur-base) var(--ease-base);
}

/* ==============================
      Typography
      ================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
   color: var(--c-text);
   transition: color var(--dur-base) var(--ease-base);
}

p {
   color: var(--c-text-sub);
   transition: color var(--dur-base) var(--ease-base);
}

a {
   color: var(--c-primary);
   text-decoration: none;
   transition: color var(--dur-fast) var(--ease-base);
}

a:hover {
   color: var(--c-primary-hover);
}

/* ==============================
      Buttons
      ================================ */
button {
   font-family: inherit;
   cursor: pointer;
}

/* ==============================
      Utility Classes
      ================================ */
.container {
   max-width: var(--container-max);
   margin: 0 auto;
   padding: 0 var(--gutter);
}

/* ==============================
      Scrollbar (다크모드 대응)
      ================================ */
::-webkit-scrollbar {
   width: 10px;
}

::-webkit-scrollbar-track {
   background: var(--c-bg);
}

::-webkit-scrollbar-thumb {
   background: var(--c-border);
   border-radius: 5px;
   transition: background-color var(--dur-base) var(--ease-base);
}

::-webkit-scrollbar-thumb:hover {
   background: var(--c-text-sub);
}

/* ==============================
      Selection
      ================================ */
::selection {
   background-color: var(--c-primary);
   color: white;
}

::-moz-selection {
   background-color: var(--c-primary);
   color: white;
}

/* ==============================
      Focus Styles
      ================================ */
:focus-visible {
   outline: 2px solid var(--c-primary);
   outline-offset: 2px;
}

/* ==============================
      Dark Mode 이미지 최적화
      ================================ */
[data-theme='dark'] img {
   opacity: 0.9;
}

[data-theme='dark'] img:hover {
   opacity: 1;
}