:root{
  --white: #fff;

  /* ✅ white filter (중복 제거 후 하나로 통일) */
  --filter-white: invert(99%) sepia(1%) saturate(4%) hue-rotate(349deg) brightness(101%) contrast(105%);

  --text-small:0.875rem;
  --text-medium:1.1rem;
  --text-large:1.333rem;

  --text-small-em:0.875em;
  --text-medium-em:1.1em;
  --text-large-em:1.333em;

  /* ✅ BLUE 계열로 통일 */
  --filter-focus: invert(24%) sepia(98%) saturate(5300%) hue-rotate(210deg) brightness(101%) contrast(102%);
  --filter-success: invert(35%) sepia(85%) saturate(4000%) hue-rotate(210deg) brightness(100%) contrast(100%);

  --header-height: 5rem;
  --nav-folded-width:3rem;
  --nav-unfold-width:15rem;

  --container-padding-right:15vw;
}

/*tablet*/
@media all and (min-width:769px) and (max-width:1279px){
  :root{
    --nav-folded-width:3rem;
    --nav-unfold-width:10rem;
  }
}

/*mobile*/
@media all and (max-width:768px){
  :root{
    --header-height:4rem;
    --nav-folded-width:100%;
    --nav-unfold-width:100%;
  }
}

html[data-theme='light']{
  --background-color:#fff;

  --text-color-100:#dddddd;
  --text-color-200:#c6c6c6;
  --text-color-300:#afafaf;
  --text-color-400:#999999;
  --text-color-500:#838383;
  --text-color-600:#6e6e6e;
  --text-color-700:#595959;
  --text-color-800:#464646;
  --text-color-900:#333333;
  --text-color-1000:#111;

  /* ✅ BLUE PRIMARY SYSTEM */
  --primary-color-10:#C7E4FF;
  --primary-color-50:#96C2FF;
  --primary-color-400:#4796FF;
  --primary-color-500:#0056ff;

  /* ✅ 핵심 수정 (RED → BLUE) */
  --filter-primary: invert(19%) sepia(99%) saturate(7474%) hue-rotate(222deg) brightness(101%) contrast(105%);

  --secondary-color-10:#EBEEF2;
  --secondary-color-50:#DCE3EF;
  --secondary-color-400:#4A6BA0;
  --secondary-color-500:#385179;
  --filter-secondary: invert(29%) sepia(14%) saturate(1806%) hue-rotate(178deg) brightness(92%) contrast(86%);

  --focus-color-50:#DCE3EF;
  --focus-color-400:#4796FF;
  --focus-color-500:#0056ff;

  /* 👉 success는 블루로 통일 (원하면 green으로 다시 바꿔도 됨) */
  --success-color-500:#4796FF;

  --filter-text-500:invert(53%) sepia(0%) saturate(627%) hue-rotate(207deg) brightness(97%) contrast(86%);
  --filter-text-700:invert(34%) sepia(0%) saturate(1%) hue-rotate(147deg) brightness(94%) contrast(84%);
  --filter-text-900:invert(17%) sepia(1%) saturate(0%) hue-rotate(55deg) brightness(94%) contrast(88%);

  --theme-color-50:#fcfcfd;
  --theme-color-100:#f5f6f7;
  --theme-color-200:#f0f2f4;
  --theme-color-300:#eaecee;
  --theme-color-400:#e5e8eb;
  --theme-color-500:#dfe2e6;
  --theme-color-600:#cbced1;
  --theme-color-700:#9ea0a3;
  --theme-color-800:#7b7c7f;
  --theme-color-900:#5e5f61;

  --box-shadow--3: 0 0.75rem 1.5rem 0 rgba(94,95,97,0.1);
  --box-shadow--5: 0 2rem 3rem 0 rgba(94,95,97,0.1);

  --aside-box-shadow: -1rem var(--header-height) 2rem 1rem rgba(94,95,97,0.1);

  --help-layer-shadow: 0em 0 1em .5em rgba(94,95,97,.1);

  --filter-shadow-3:drop-shadow(0 0.75rem 1.5rem 0 rgba(94,95,97,0.1));

  --dim-soft:rgba(0,0,0,0.1);
  --dim:rgba(0,0,0,0.25);
  --dim-deep:rgba(0,0,0,0.5);
}

html[data-theme='dark']{
  --background-color:#111;

  --text-color-1000:#fff;
  --text-color-900:#dddddd;
  --text-color-800:#c6c6c6;
  --text-color-700:#afafaf;
  --text-color-600:#999999;
  --text-color-500:#838383;
  --text-color-400:#6e6e6e;
  --text-color-300:#595959;
  --text-color-200:#464646;
  --text-color-100:#333333;

  --primary-color-10:#C7E4FF01;
  --primary-color-50:#96C2FF01;
  --primary-color-400:#4796FF;
  --primary-color-500:#0056ff;

  /* ✅ 다크모드도 동일하게 BLUE 유지 */
  --filter-primary: invert(19%) sepia(99%) saturate(7474%) hue-rotate(222deg) brightness(101%) contrast(105%);

  --secondary-color-10:rgba(56, 81, 121, 0.05);
  --secondary-color-50:rgba(56, 81, 121, 0.1);
  --secondary-color-400:#6896c6;
  --secondary-color-500:#4e71a9;
  --filter-secondary: invert(41%) sepia(49%) saturate(478%) hue-rotate(178deg) brightness(93%) contrast(94%);

  --focus-color-50:rgba(53, 165, 238, 0.1);
  --focus-color-400:#4796FF;
  --focus-color-500:#0056ff;

  --success-color-500:#4796FF;

  --filter-text-500:invert(53%) sepia(0%) saturate(627%) hue-rotate(207deg) brightness(97%) contrast(86%);
  --filter-text-700:invert(75%) sepia(1%) saturate(1%) hue-rotate(314deg) brightness(95%) contrast(89%);
  --filter-text-900:invert(98%) sepia(1%) saturate(2779%) hue-rotate(205deg) brightness(117%) contrast(73%);

  --theme-color-50:#1E1E1E;
  --theme-color-100:#252526;
  --theme-color-200:#2C2C2E;
  --theme-color-300:#333336;
  --theme-color-400:#393A3E;
  --theme-color-500:#404045;
  --theme-color-600:#47484E;
  --theme-color-700:#4E4F56;
  --theme-color-800:#54555D;
  --theme-color-900:#5C5D66;

  --box-shadow--3: 0 0.75rem 1.5rem 0 rgba(17,17,17,0.1);
  --box-shadow--5: 0 2rem 3rem 0 rgba(17,17,17,0.1);

  --aside-box-shadow: -1rem var(--header-height) 2rem 1rem rgba(17,17,17,0.1);

  --help-layer-shadow: 0em 0 1em .5em rgba(17,17,17,.1);

  --filter-shadow-3:drop-shadow(0 0.75rem 1.5rem 0 rgba(17,17,17,0.1));

  --dim-soft:rgba(255,255,255,0.1);
  --dim:rgba(255,255,255,0.25);
  --dim-deep:rgba(255,255,255,0.5);
}