@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); }
}

/* -----------------------------------------------------------------------------
   홈 구성 — company: basic 의 캐러셀+게시판별 카드 그리드 대신,
   큰 배너 하나 + 상위 게시판 3개를 메뉴 타일로, 나머지는 한 줄 목록으로 정리한다.
   정보량보다 정돈된 인상을 우선한다.
-------------------------------------------------------------------------------- */
.hero-banner {
  background: var(--brand); color: var(--brand-foreground);
  border-radius: var(--radius-lg);
  padding: 3.5rem 2rem; margin-bottom: 1.5rem;
  text-align: center;
}
.hero-inner { max-width: 34rem; margin: 0 auto; }
.hero-banner .promo-badge {
  display: inline-block; margin-bottom: .8rem;
  background: rgba(255, 255, 255, .16); color: inherit;
}
.hero-title { margin: 0 0 .6rem; font-size: var(--text-2xl); font-weight: 700; }
.hero-desc { margin: 0 0 1.4rem; opacity: .88; }
.hero-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .7rem 1.6rem; border-radius: var(--radius-md);
  background: var(--brand-foreground); color: var(--brand);
  font-weight: 600; text-decoration: none;
}
.hero-cta:hover { opacity: .9; }

.feature-tile {
  display: block; padding: 1.4rem; text-decoration: none; color: inherit;
  border: 1px solid var(--border); transition: border-color .15s ease, box-shadow .15s ease;
}
.feature-tile:hover { border-color: var(--brand); box-shadow: 0 2px 10px rgba(20, 71, 107, .08); }
.feature-tile h2 { margin: 0 0 .5rem; font-size: var(--text-base); font-weight: 700; }
.feature-tile p { margin: 0 0 1rem; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feature-tile .go {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: var(--text-sm); font-weight: 600; color: var(--brand);
}

.board-lines { list-style: none; margin: 0; padding: 0; }
.board-lines li {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem 0; border-bottom: 1px solid var(--border-subtle);
}
.board-lines li:last-child { border-bottom: 0; }
.board-lines a { font-weight: 600; flex: none; }
.board-lines .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); }

@media (max-width: 640px) {
  .hero-banner { padding: 2.4rem 1.2rem; }
  .board-lines li { flex-direction: column; align-items: flex-start; gap: .2rem; }
}

/* 정적 콘텐츠 페이지 — 문서 느낌의 제목 + 조용한 태그 목록 */
.doc-head { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid var(--brand); }
.doc-head h1 { margin: 0; font-size: var(--text-2xl); font-weight: 700; }
.doc-tags {
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border-subtle);
  font-size: var(--text-sm); color: var(--muted-foreground);
}
.doc-tags a { color: var(--muted-foreground); }
.doc-tags a:hover { color: var(--brand); }
.doc-tags .sep { margin: 0 .4rem; }

/* 새글모음 — 날짜 구분줄 */
.new-report .date-group td {
  background: var(--muted); color: var(--muted-foreground);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em;
  padding: .4rem .75rem; border-bottom: 1px solid var(--border);
}