/* ============================================================
   Intercom Design System - mdmproj1 공통 테마
   Primary(sub-header): #ff5600 (Fin Orange) / Dark nav: #111111 / Canvas: #f5f1ec
   ============================================================ */

:root {
  --n-primary:        #6aaed6;   /* bright sky blue — sub-header & CTA */
  --n-primary-press:  #4a92be;   /* slightly darker on press */
  --n-navy:           #4a7fa8;   /* bright light navy blue / top nav */
  --n-navy-mid:       #5a92bc;   /* slightly lighter navy */
  --n-link:           #ff5600;
  --n-canvas:         #f5f1ec;   /* warm cream canvas */
  --n-surface:        #ebe7e1;   /* surface-2 */
  --n-surface-soft:   #ffffff;   /* surface-1 */
  --n-hairline:       #d3cec6;
  --n-hairline-str:   #ebe7e1;
  --n-ink:            #111111;
  --n-charcoal:       #111111;
  --n-slate:          #626260;   /* ink-muted */
  --n-steel:          #7b7b78;   /* ink-subtle */
  --n-muted:          #9c9fa5;   /* ink-tertiary */
  --n-error:          #c41c1c;   /* semantic-error */
  --n-success:        #0bdf50;   /* semantic-success */
  --n-teal:           #03b2cb;   /* report-cyan */
  --n-amber:          #ff5600;
  --n-nav-text:       #ffffff;
  --n-nav-active:     #ff5600;   /* Fin Orange for active menu */
  --n-radius-sm:      6px;
  --n-radius-md:      8px;
  --n-radius-lg:      12px;
  --n-radius-full:    9999px;
}

/* ---------- 기본 ---------- */
body {
  font-family: 'Segoe UI', Inter, -apple-system, sans-serif;
  background-color: var(--n-canvas);
  color: var(--n-ink);
}

/* ---------- 네비게이터 바 ---------- */
.content-wrapper {
  background-color: var(--n-navy) !important;
  border-bottom: 2px solid var(--n-navy-mid) !important;
}
.navigator {
  background-color: var(--n-navy) !important;
}
.navigator ul {
  gap: 28px !important;
  margin: 0 20px !important;
}

/* 메뉴 기본 색 */
.navigator ul li a,
#wordClassList, #wordCheckList, #naverDic,
#livingEnglish, #testEnglish, #newsSites {
  color: var(--n-nav-text) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color 0.15s;
}
/* 호버 */
.navigator ul li a:hover,
#wordClassList:hover, #wordCheckList:hover, #naverDic:hover,
#livingEnglish:hover, #testEnglish:hover, #newsSites:hover {
  color: #ffffff !important;
}
/* 활성 메뉴 - JS가 id에 직접 nav-active 클래스 추가 */
#wordClassList.nav-active,
#wordCheckList.nav-active,
#livingEnglish.nav-active,
#testEnglish.nav-active,
#newsSites.nav-active,
.navigator ul li a.nav-active {
  color: var(--n-nav-active) !important;
  font-weight: 700 !important;
}

/* 사용자명 */
.navigator > span {
  color: #ffffff !important;
  font-weight: 600;
}

/* 로그아웃 버튼 */
.navigator button {
  background-color: transparent !important;
  color: var(--n-nav-text) !important;
  border: 1px solid var(--n-navy-mid) !important;
  border-radius: var(--n-radius-md) !important;
  font-size: 13px !important;
  padding: 4px 14px !important;
  margin-left: 8px !important;
  transition: background 0.15s, color 0.15s;
}
.navigator button:hover {
  background-color: var(--n-navy-mid) !important;
  color: #ffffff !important;
}

/* 네비 입력창 */
.navigator input[type="text"] {
  background-color: var(--n-navy-mid) !important;
  border: 1px solid #4a729e !important;
  border-radius: var(--n-radius-md) !important;
  color: #ffffff !important;
  padding: 5px 12px !important;
  font-size: 13px !important;
}
.navigator input[type="text"]::placeholder { color: var(--n-muted); }

/* ---------- 서브 헤더 ---------- */
.content-wrapper_header,
.navigator_header {
  background-color: var(--n-primary) !important;
  border-bottom: 1px solid var(--n-primary-press) !important;
}

/* 서브 헤더 레이블·스팬 텍스트만 흰색 (버튼 제외) */
.content-wrapper_header label,
.content-wrapper_header span,
.content-wrapper_header a,
.navigator_header label,
.navigator_header span,
.navigator_header a,
.navigator_header li {
  color: #ffffff !important;
}

/* 서브 헤더 input은 흰 배경 */
.content-wrapper_header input[type="text"],
.content-wrapper_header input[type="number"],
.navigator_header input[type="text"],
.navigator_header input[type="number"] {
  color: var(--n-ink) !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
}

/* 서브 헤더 버튼: 반투명 흰색 스타일 */
.navigator_header button,
.content-wrapper_header button {
  background-color: rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  height: 32px !important;
  padding: 0 14px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
}
.navigator_header button:hover,
.content-wrapper_header button:hover {
  background-color: rgba(255,255,255,0.30) !important;
  border-color: rgba(255,255,255,0.70) !important;
}

/* ---------- 버튼 공통 ---------- */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1 !important;
  border-radius: var(--n-radius-md);
  border: 1px solid var(--n-hairline-str);
  background-color: var(--n-canvas);
  color: var(--n-ink) !important;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
button:hover {
  background-color: var(--n-surface);
  border-color: var(--n-ink);
}

/* 주요 액션 버튼 */
button[type="submit"],
#searchBtn, #refreshBtn, #createWord {
  background-color: var(--n-primary) !important;
  color: #fff !important;
  border-color: var(--n-primary) !important;
}
button[type="submit"]:hover,
#searchBtn:hover, #refreshBtn:hover, #createWord:hover {
  background-color: var(--n-primary-press) !important;
}

/* 삭제 버튼 */
#deleteBtn, #wordDeleteBtn {
  background-color: transparent !important;
  color: var(--n-error) !important;
  border-color: var(--n-error) !important;
}
#deleteBtn:hover, #wordDeleteBtn:hover { background-color: #fff0f0 !important; }

/* ---------- 입력창 ---------- */
input[type="text"],
input[type="password"],
input[type="search"],
select,
textarea {
  font-family: inherit;
  font-size: 13px;
  border: 1px solid var(--n-hairline-str);
  border-radius: var(--n-radius-md);
  background-color: var(--n-canvas);
  color: var(--n-ink);
  padding: 5px 10px;
  outline: none;
  transition: border-color 0.15s;
}
input[type="text"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  border-color: var(--n-primary);
  box-shadow: 0 0 0 2px rgba(255,86,0,0.15);
}

/* ---------- 테이블 ---------- */
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  background: var(--n-canvas);
}
table thead th {
  background-color: var(--n-surface);
  color: var(--n-charcoal);
  font-weight: normal;
  padding: 8px 10px;
  border-bottom: 2px solid var(--n-hairline);
  text-align: center;
}
table tbody tr { border-bottom: 1px solid var(--n-hairline); transition: background 0.1s; }
table tbody tr:hover { background-color: var(--n-surface-soft); }
table tbody td { padding: 7px 10px; color: var(--n-charcoal); }

/* ---------- 사이드패널 ---------- */
.right-side,
.right-side-form {
  background-color: var(--n-surface) !important;
  border-left: 1px solid var(--n-hairline) !important;
}

/* ---------- 로그인 ---------- */
.login #header { background-color: var(--n-navy) !important; }
.login #container {
  border-color: var(--n-hairline) !important;
  border-radius: var(--n-radius-lg) !important;
  box-shadow: 0 4px 24px rgba(10,21,48,0.10);
}