/* portal-header.css hotfix */
.it-portal-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: #fff;
  padding: 8px 0 6px;
  box-shadow: 0 1px 0 rgba(0,0,0,.07);
}

.it-portal-header__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.it-portal-header__logo { flex-shrink: 0; display: flex; align-items: center; }
.it-portal-logo { display: flex; align-items: center; text-decoration: none; }
.it-portal-logo__img { height: 56px; width: auto; object-fit: contain; display: block; }
.it-portal-header__search { flex: 1; display: flex; justify-content: center; }
.it-portal-searchbar { position: relative; width: 100%; max-width: 720px; }
.it-portal-searchbar__input {
  width: 100%;
  padding: 10px 52px 10px 18px;
  background: #fff;
  border: none;
  border-radius: 9999px;
  font-size: 17px;
  font-weight: 600;
  color: #111;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: box-shadow .2s;
  font-family: inherit;
}
.it-portal-searchbar.has-clear .it-portal-searchbar__input { padding-right: 94px; }
.it-portal-searchbar__input::placeholder { color: rgba(33,33,33,.45); font-weight: 600; }
.it-portal-searchbar__input:focus { outline: none; box-shadow: 0 0 0 2px rgba(0,39,166,.2), 0 2px 8px rgba(0,0,0,.12); }
.it-portal-searchbar__clear {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
  color: #7b8494;
  background: #eef1f6;
  border: 1px solid #d9dfeb;
}
.it-portal-searchbar__clear:hover { background:#e2e7f0; color:#3e4a5f; }
.it-portal-searchbar__btn {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary, #0027A6);
  border-radius: 50%;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}
.it-portal-searchbar__btn:hover  { background: #001e8a; }
.it-portal-searchbar__btn:active { background: #001580; }
.it-portal-header__user { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; min-width: 48px; }

.it-portal-hero {
  position: relative;
  width: 100%;
  background: linear-gradient(135deg, #0027A6 0%, #0039D9 100%);
  overflow: hidden;
  margin-top: 76px;
}
/* ── 히어로 풀사이즈 배경 이미지 (has-hero-bg 클래스 활성 시) ── */
.it-portal-hero.has-hero-bg { background-size: cover; background-position: center center; background-repeat: no-repeat; }
.it-portal-hero.has-hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
  z-index: 0;
  pointer-events: none;
}
.it-portal-hero.has-hero-bg .it-portal-hero__inner { position: relative; z-index: 1; }
/* 히어로 내부: 배너는 full-width, 카테고리 바는 max-width 제한 */
.it-portal-hero__inner { width: 100%; display: flex; flex-direction: column; align-items: center; }
/* 히어로 배너 래퍼: 상단 여백 + 좌우 패딩으로 이미지가 자연스럽게 */
.it-portal-hero__banner-wrap {
  width: 100%;
  max-width: 1080px;
  padding: 12px 20px 0;
  box-sizing: border-box;
}
/* 히어로 배너: 라운딩 + 오버레이를 위한 컨테이너 */
.it-portal-hero__banner {
  position: relative;
  width: 100%;
  padding: 0;
  text-align: center;
  overflow: hidden;
  height: 154px;
  min-height: 126px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;    /* 자연스러운 라운딩 */
}
.it-portal-hero__banner-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  margin: 0;
  display: block;
  border-radius: 0;
}
/* 이미지 위 반투명 블라인드 (텍스트 가독성 보조) — 이미지가 있을 때만 표시 */
.it-portal-hero__banner.has-img::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  z-index: 1;
  border-radius: 0;
  pointer-events: none;
}
.it-portal-hero__banner-text { position: relative; z-index: 2; font-size: 28px; font-weight: 800; color: #fff; margin: 0; transition: opacity .18s ease; text-shadow: 0 2px 10px rgba(0,0,0,.7); padding: 0 24px; line-height: 1.35; max-width: 100%; word-break: keep-all; }
.it-portal-hero__dots { position: absolute; bottom: 12px; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; align-items: center; gap: 8px; }
.it-portal-hero__dot { width:8px; height:8px; border:0; border-radius:999px; background:rgba(255,255,255,.5); padding:0; cursor:pointer; transition:transform .15s ease, background-color .15s ease; }
.it-portal-hero__dot.is-active { background:#fff; transform:scale(1.25); width:20px; border-radius:4px; }
/* ── 풀배경 모드: 배너 내부 이미지 숨기고, 배너 박스는 투명하게 ── */
.it-portal-hero.has-hero-bg .it-portal-hero__banner-img { display: none !important; }
.it-portal-hero.has-hero-bg .it-portal-hero__banner.has-img::after { display: none; }
.it-portal-hero.has-hero-bg .it-portal-hero__banner { background: transparent; }
/* 카테고리 바: max-width로 배너보다 살짝 좁게 */
.it-portal-cat-bar { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; width:100%; max-width:1200px; padding:8px 20px 12px; margin-top:6px; position:relative; z-index:2; }
.it-portal-cat-item { display:flex; flex-direction:column; align-items:center; gap:5px; min-width:68px; padding:4px 6px; border-radius:12px; text-decoration:none; transition:transform .15s, opacity .15s; }
.it-portal-cat-item:hover { transform: translateY(-3px); opacity:.9; }
.it-portal-cat-item.is-active .it-portal-cat-icon { box-shadow:0 0 0 3px #fff, 0 0 0 5px rgba(255,255,255,.5); }
.it-portal-cat-icon { width:46px; height:46px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.13); color:var(--color-primary, #0027A6); transition:box-shadow .2s; flex-shrink:0; }
.it-portal-cat-icon img, .it-portal-cat-icon svg { width:28px; height:28px; object-fit:contain; }
.it-portal-cat-label { font-size:13px; font-weight:600; color:#fff; white-space:nowrap; text-align:center; }
.it-portal-hero-divider { height:10px; background:#f5f5f5; }

@media (max-width: 1024px) {
  .it-portal-header__inner { padding: 0 14px; }
  .it-portal-logo__img { height: 48px; }
  .it-portal-hero { margin-top: 68px; }
}

@media (max-width: 768px) {
  .it-portal-header { padding: 6px 0 4px; }
  .it-portal-header__inner { padding: 0 10px; gap: 8px; }
  .it-portal-logo__img { height: 34px; }
  .it-portal-searchbar__input {
    font-size: 13px; font-weight: 500; text-align: left; padding: 9px 44px 9px 14px;
    border-radius: 10px; background: #f2f4f8; box-shadow: none; border: 1.5px solid #e3e7f0; height: 40px;
  }
  .it-portal-searchbar.has-clear .it-portal-searchbar__input { padding-right: 78px; }
  .it-portal-searchbar__input::placeholder { font-size:13px; color: #aab0bc; }
  .it-portal-searchbar__input:focus { background: #fff; border-color: var(--color-primary, #0027A6); box-shadow: 0 0 0 3px rgba(0,39,166,.08); }
  .it-portal-searchbar__clear {
    width: 22px; height: 22px; right: 40px; font-size: 15px; background:#fff; border:1px solid #d7deea;
  }
  .it-portal-searchbar__btn { width: 32px; height: 32px; right: 4px; }
  .it-portal-searchbar__btn svg { width: 15px; height: 15px; }
  .it-portal-hero { overflow: hidden; margin-top: 50px; }
  /* 모바일: 배너 래퍼 패딩 축소 */
  .it-portal-hero__banner-wrap { padding: 8px 12px 0; }
  /* 모바일: 히어로 배너 높이 축소 */
  .it-portal-hero__banner { height: 130px; min-height: 100px; display: flex; overflow: hidden; border-radius: 10px; }
  .it-portal-hero__banner-text { font-size: 18px; font-weight: 700; line-height: 1.4; padding: 0 16px; max-width: 100%; word-break: keep-all; }
  .it-portal-hero__dots { bottom: 8px; }
  .it-portal-cat-bar {
    display:flex; flex-wrap:nowrap; justify-content:stretch; gap:0; padding:10px 0 12px; margin-top:0;
    background: linear-gradient(135deg, #0027A6 0%, #0039D9 100%); overflow-x:hidden; width:100%;
  }
  .it-portal-cat-item { flex:1 1 0%; min-width:0; padding:6px 0; align-items:center; }
  .it-portal-cat-icon { width:min(44px,11.5vw); height:min(44px,11.5vw); box-shadow:0 1px 4px rgba(0,0,0,.12); }
  .it-portal-cat-icon img, .it-portal-cat-icon svg { width:min(22px,5.5vw); height:min(22px,5.5vw); }
  .it-portal-cat-label { font-size:clamp(9px,2.4vw,11px); font-weight:600; margin-top:4px; }
  .it-portal-hero-divider { height:6px; }
}

@media (max-width: 480px) {
  .it-portal-header__inner { padding: 0 8px; gap: 6px; }
  .it-portal-logo__img { height: 30px; }
}