@charset "utf-8";
/**
 * 테마: company — 각지고 단정한 기업용
 *
 * basic 의 style.css 를 다 불러온 뒤 이 파일이 얹힌다.
 * 그래서 여기에는 "바꾸고 싶은 값"만 적는다. 적지 않은 것은 basic 그대로다.
 * 색은 라이트/다크 두 벌을 모두 적어야 한다 — 한쪽만 적으면 다른 쪽에서 어긋난다.
 */

:root {
  /* 브랜드 — 감청 */
  --brand:            #14476b;
  --brand-foreground: #ffffff;
  --brand-hover:      #1b5a87;
  --brand-active:     #0f3853;

  /* 모서리를 각지게 */
  --radius-sm:   0;
  --radius-md:   2px;
  --radius-lg:   2px;
  --radius-xl:   4px;
  --radius:      2px;

  /* 차분한 회청 바탕 */
  --background:    #ffffff;
  --card:          #ffffff;
  --muted:         #eef2f5;
  --secondary:     #eef2f5;
  --accent:        #eef2f5;
  --border:        #d6dee5;
  --border-subtle: #e7edf1;
  --input:         #d6dee5;
  --ring:          #14476b;

  --header-height: 84px;
}

/* 다크 */
:root[data-theme="dark"] {
  --brand:        #4dabf7;
  --brand-hover:  #74c0fc;
  --brand-active: #339af0;
  --brand-foreground: #06202f;

  --background:    #0e1520;
  --card:          #151d2a;
  --muted:         #1c2634;
  --secondary:     #1c2634;
  --accent:        #1c2634;
  --border:        #26313f;
  --border-subtle: #1c2634;
  --input:         #26313f;
  --ring:          #4dabf7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --brand:        #4dabf7;
    --brand-hover:  #74c0fc;
    --brand-active: #339af0;
    --brand-foreground: #06202f;

    --background:    #0e1520;
    --card:          #151d2a;
    --muted:         #1c2634;
    --secondary:     #1c2634;
    --accent:        #1c2634;
    --border:        #26313f;
    --border-subtle: #1c2634;
    --input:         #26313f;
    --ring:          #4dabf7;
  }
}

/* 로고 마크와 버튼을 각지게, 제목은 조금 더 조인다 */
.brand .mark { border-radius: 2px; }
.brand .wordmark { letter-spacing: -.6px; }

/* ===================================================================
   site-header — server.uidc.co.kr 헤더 참고 리디자인
   라이트/다크 토글과 무관하게 늘 어두운 반투명 유리 헤더로 고정한다.
   (본문 배경·글자색은 기존 라이트/다크 토큰을 그대로 따른다 — 헤더만 바꾼다)
   =================================================================== */
.site-header {
  --sh-accent: #e14c5b;
  background: rgba(9, 12, 17, .74);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.site-header .brand .wordmark { color: #fff; }
.site-header .brand .mark { background: var(--sh-accent); color: #fff; }

/* 1뎁스 메뉴 — 흰 글자, 호버는 배경 없이 색만 밝게 */
.site-header .gnb-1a { color: rgba(245, 247, 250, .66); }
.site-header .gnb-1li:hover .gnb-1a,
.site-header .gnb-1li.is-active .gnb-1a,
.site-header .gnb-1li.is-open .gnb-1a { color: #fff; background: transparent; }

/* 캐럿(하위메뉴 열기) — 클릭으로 열렸을 때는 살짝 밝은 원형 배경 */
.site-header .gnb-caret { color: rgba(245, 247, 250, .5); }
.site-header .gnb-1li:hover .gnb-caret,
.site-header .gnb-1li.is-open .gnb-caret { color: #fff; }
.site-header .gnb-1li.is-open .gnb-caret { background: rgba(255, 255, 255, .14); }

/* 2뎁스 드롭다운 — 라이트/다크와 무관하게 늘 흰 카드 */
.site-header .gnb-2d {
  background: #fff; border-color: #ece7dd; border-radius: 12px;
  box-shadow: 0 16px 36px rgba(6, 8, 12, .32);
}
.site-header .gnb-2d a { color: #5b5b5b; }
.site-header .gnb-2d a:hover, .site-header .gnb-2d a:focus {
  background: #faf6f0; color: var(--sh-accent);
}

/* 검색 버튼 */
.site-header .hd-search {
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16);
  color: rgba(245, 247, 250, .72);
}
.site-header .hd-search:hover, .site-header .hd-search:focus-visible {
  background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .32); color: #fff;
}
.site-header .hd-search .kbd { background: rgba(255, 255, 255, .14); color: rgba(245, 247, 250, .85); }

/* 로그인/회원가입/마이페이지 등 헤더 버튼 — 유리 위 고스트 버튼 톤으로 통일 */
.site-header .btn.btn-sm.btn-bch,
.site-header .btn.btn-sm.btn-primary,
.site-header .btn.btn-sm.btn-sec,
.site-header .btn.btn-sm.btn-ter {
  background: rgba(255, 255, 255, .08); color: rgba(245, 247, 250, .88);
  border-color: rgba(255, 255, 255, .16);
}
.site-header .btn.btn-sm.btn-bch:hover,
.site-header .btn.btn-sm.btn-primary:hover,
.site-header .btn.btn-sm.btn-sec:hover,
.site-header .btn.btn-sm.btn-ter:hover {
  background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .32);
}
.site-header .btn.btn-sm.btn-bch svg,
.site-header .btn.btn-sm.btn-primary svg,
.site-header .btn.btn-sm.btn-sec svg,
.site-header .btn.btn-sm.btn-ter svg { color: currentColor; }

/* 로그아웃(brand 채움 버튼)만 포인트 색으로 강조 */
.site-header .btn.btn-sm.btn-brand {
  background: var(--sh-accent); color: #fff; border-color: transparent;
}
.site-header .btn.btn-sm.btn-brand:hover { background: #c73f4d; color: #fff; }

/* 테마 세그먼트 (시스템/라이트/다크) */
.site-header .theme-group { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }
.site-header .theme-opt { color: rgba(245, 247, 250, .66); }
.site-header .theme-opt:hover { color: #fff; }
.site-header .theme-opt[aria-pressed="true"] { background: #fff; color: #14171c; }

/* 검색/전체메뉴 아이콘 버튼 (좁은 화면) */
.site-header .mhd-btn { color: rgba(245, 247, 250, .78); }
.site-header .mhd-btn:hover, .site-header .mhd-btn:focus { background: rgba(255, 255, 255, .14); color: #fff; }

@media (max-width: 768px) {
  .site-header { border-bottom: 1px solid rgba(255, 255, 255, .14); }
}