/* ===================================
   Top Utility Bar Styles
   의존: common.css (디자인 시스템 변수, 리셋, .sr-only)
   =================================== */

/* ===================================
   Utility Bar Design Tokens
   =================================== */
:root {
  /* Layout */
  --utility-bar-height: 40px;
  --utility-bar-height-mobile: 36px;
  --utility-container-max-width: 1440px;
  --utility-padding-desktop: 40px;
  --utility-padding-tablet: 32px;
  --utility-padding-mobile: 24px;

  /* Colors (refs: common.css design system) */
  --utility-bar-bg: var(--color-gray-100);
  --utility-bar-border: var(--color-gray-300);
  --utility-text-default: var(--color-gray-700);
  --utility-text-hover: var(--color-primary-900);
  --utility-text-disabled: var(--color-gray-500);
  --utility-divider-color: var(--color-gray-300);

  /* Typography */
  --utility-font-size: var(--fs-small);
  --utility-line-height: 1.4;
  --utility-letter-spacing: var(--ls);

  /* Spacing */
  --utility-item-padding-v: 10px;
  --utility-item-padding-h: 16px;
  --utility-item-padding-h-tablet: 12px;
  --utility-item-padding-h-mobile: 6px;
  --utility-divider-height: 12px;
  --utility-divider-margin: 4px;

  /* Interactive */
  --utility-focus-outline: 2px solid var(--color-primary-500);
  --utility-focus-offset: 2px;
  --utility-transition: color 0.2s ease;
}

/* ===================================
   Top Utility Bar Container
   =================================== */
.top-utility-bar {
  width: 100%;
  background-color: var(--utility-bar-bg);
  border-bottom: 1px solid var(--utility-bar-border);
  z-index: 1001;
  position: relative;
}

.utility-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--space-10);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 40px;
}

/* ===================================
   Utility Navigation
   =================================== */
.utility-nav {
  display: flex;
  align-items: center;
}

.utility-list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.utility-item {
  display: flex;
  align-items: center;
}

/* 유틸리티 항목 구분자 (·) — 모든 페이지 공통 */
.top-utility-bar .utility-item + .utility-item::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--color-gray-400);
  vertical-align: middle;
  margin: 0 6px;
}

/* ===================================
   Utility Links & Buttons
   =================================== */
.utility-link,
.utility-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) 0;
  font-family: var(--font-family);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  letter-spacing: var(--ls-tight);
  color: var(--utility-text-default);
  text-decoration: none;
  transition: color 0.2s ease;
  cursor: pointer;
  background: none;
  border: none;
  min-height: 40px;
  position: relative;
}

/* Hover 시 파란색 밑줄 애니메이션 */
.utility-link::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary-700);
  transition: width 0.3s ease;
}

.utility-link:hover {
  color: var(--color-primary-700);
}

.utility-link:hover::after {
  width: 100%;
}

.utility-btn:hover {
  color: var(--utility-text-hover);
}

.utility-link:active,
.utility-btn:active {
  color: var(--utility-text-hover);
}

/* ===================================
   Utility Select (부서홈페이지)
   =================================== */
.utility-select {
  padding: 6px 30px 6px var(--space-3);
  font-family: var(--font-family);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  letter-spacing: var(--ls-tight);
  color: var(--utility-text-default);
  background-color: var(--utility-bar-bg);
  border: 1px solid var(--utility-bar-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--utility-transition);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 8px;
}

.utility-select:hover {
  color: var(--color-primary-700);
  border-color: var(--color-primary-700);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230066CC' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.utility-select:focus,
.utility-select:focus-visible {
  color: var(--color-primary-700);
  border-color: var(--color-primary-700);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 6.5L6 1.5L11 6.5' stroke='%230066CC' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  outline: 1px solid var(--color-primary-700);
  outline-offset: 0;
}

/* ===================================
   Utility Select Group (Select + Button)
   =================================== */
.utility-item--select-group {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.utility-item--select-group .utility-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

.utility-item--select-group .btn-go {
  padding: 6px var(--space-4);
  font-family: var(--font-family);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  letter-spacing: var(--ls-tight);
  color: var(--color-white);
  background-color: var(--color-primary-700);
  border: 1px solid var(--color-primary-700);
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.utility-item--select-group .btn-go:hover {
  background-color: var(--color-primary-900);
  border-color: var(--color-primary-900);
}

.utility-item--select-group .btn-go:active {
  background-color: var(--color-primary-950);
  border-color: var(--color-primary-950);
}

.utility-item--select-group .btn-go:focus-visible {
  outline: 2px solid var(--color-primary-700);
  outline-offset: 2px;
}

/* ===================================
   Focus States
   =================================== */
.utility-link:focus-visible,
.utility-btn:focus-visible {
  outline: 1px solid var(--color-primary-700);
  outline-offset: 0;
  border-radius: var(--radius-sm);
  color: var(--color-primary-700);
}

/* ===================================
   Font Size Control Buttons
   =================================== */
.font-size-btn {
  font-family: var(--font-family);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.font-size-btn .icon-font-size {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  transition: var(--utility-transition);
}

.font-size-btn:disabled {
  color: var(--utility-text-disabled);
  cursor: not-allowed;
  opacity: 0.5;
}

.font-size-btn:disabled:hover {
  color: var(--utility-text-disabled);
  background: none;
}

.font-size-btn:disabled .icon-font-size {
  stroke: currentColor;
}

/* ===================================
   Responsive: Tablet (768px ~ 1199px)
   =================================== */
@media (max-width: 1023px) {
  .utility-container {
    padding: 0 var(--utility-padding-tablet);
  }

  .utility-link,
  .utility-btn {
    padding: var(--utility-item-padding-v) var(--utility-item-padding-h-tablet);
    font-size: var(--fs-small);
  }

  /* 좌우 패딩만큼 밑줄 inset — 텍스트 너비에 맞춤 */
  .utility-link::after {
    left: var(--utility-item-padding-h-tablet);
  }

  .utility-link:hover::after {
    width: calc(100% - var(--utility-item-padding-h-tablet) * 2);
  }
}

/* ===================================
   Responsive: Mobile (0 ~ 767px)
   =================================== */
@media (max-width: 767px) {
  /* 넘침 방어: flex-end 상태의 좌측 overflow는 스크롤이 불가능하므로
     정렬은 nav의 margin-left:auto로 대체 — 폭이 넘치면 margin이 0으로 접히며 좌측부터 스크롤 가능 */
  .utility-container {
    padding: 0 var(--utility-padding-mobile);
    min-height: var(--utility-bar-height-mobile);
    justify-content: flex-start;
    overflow-x: auto;
  }

  .utility-nav {
    margin-left: auto;
  }

  /* dot 구분자 간격 축소 */
  .top-utility-bar .utility-item + .utility-item::before {
    margin: 0 3px;
  }

  /* 모바일에서는 mobile-show 클래스가 있는 항목만 표시 */
  .utility-item:not(.mobile-show) {
    display: none;
  }

  /* 햄버거 전체메뉴 열림(.menu-open) — 사이트맵/마이페이지/로그아웃 등 모든 utility 노출 */
  body.menu-open .utility-item:not(.mobile-show) {
    display: flex;
  }

  .utility-link,
  .utility-btn {
    min-height: 36px;
    min-width: 36px;
    padding: var(--space-2) var(--utility-item-padding-h-mobile);
    font-size: var(--fs-small);
  }

  /* 좌우 패딩만큼 밑줄 inset — 텍스트 너비에 맞춤 */
  .utility-link::after {
    left: var(--utility-item-padding-h-mobile);
  }

  .utility-link:hover::after {
    width: calc(100% - var(--utility-item-padding-h-mobile) * 2);
  }
}

/* ===================================
   Logged-in Utility Bar (로그인 후 상태)
   =================================== */

/* 세션 타이머 */
.utility-timer {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  min-height: 28px;
  border: 1px solid var(--color-primary-700);
  border-radius: var(--radius-full);
  background: var(--color-primary-700);
  color: var(--color-white);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
  vertical-align: middle;
}

.utility-timer:hover {
  border-color: var(--color-primary-900);
  background: var(--color-primary-900);
  color: var(--color-white);
}

.utility-timer__icon {
  width: 16px;
  height: 16px;
}

.utility-timer__time {
  font-variant-numeric: tabular-nums;
  min-width: 38px;
}

/* 5분 이하 경고 — 핑크 배경 전환 */
.utility-timer.is-warning {
  border-color: var(--color-error);
  background: var(--color-error);
  color: var(--color-white);
}

.utility-timer.is-warning:hover {
  border-color: var(--color-error);
  background: var(--color-error);
  color: var(--color-white);
}

/* 3분 이하 위험 — 핑크 배경 + 점멸 */
.utility-timer.is-danger {
  border-color: var(--color-error);
  background: var(--color-error);
  color: var(--color-white);
  animation: utility-timer-blink 1.2s ease-in-out infinite;
}

.utility-timer.is-danger:hover {
  border-color: var(--color-error);
  background: var(--color-error);
  color: var(--color-white);
}

@keyframes utility-timer-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* 사용자 인사 */
.utility-item--greeting {
  padding: 0 var(--space-2);
}

/* 기본은 밝은 유틸바(서브 페이지 gray-100) 기준 어두운 색.
   다크 히어로(bri 메인 등) 위 흰색 표시는 utility-link 와 동일하게
   해당 사이트 메인 CSS(bri/css/001_main.css .top-utility-bar .utility-greeting)가 오버라이드한다.
   — 공통에 흰색을 넣으면 전 사이트 서브 페이지에서 이름이 사라짐(2026-07-29 회귀 복구, 퍼블 정본과 동일) */
.utility-greeting {
  font-size: var(--fs-small);
  color: var(--color-gray-700);
  white-space: nowrap;
}

.utility-greeting strong {
  color: var(--color-gray-900);
  font-weight: var(--fw-bold);
}

/* 로그인 상태: 기본 dot 전체 리셋 */
body.is-logged-in .utility-item + .utility-item::before {
  content: none;
  display: none;
}

/* 로그인 상태: 항목 사이 구분자 (·) — greeting·timer 뒤는 구분자 없음 */
body.is-logged-in .utility-item + .utility-item:not(.utility-item--greeting):not(.utility-item--timer)::before {
  content: '·';
  display: inline-block;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  color: var(--color-gray-400);
  margin: 0 var(--space-2);
  vertical-align: middle;
}

@media (max-width: 767px) {
  /* 인사말은 메뉴 열림(.menu-open) 시에도 계속 숨김 — 폭 확보.
     두 번째 셀렉터는 body.menu-open .utility-item:not(.mobile-show) 노출 규칙(동일 특이도)을 후순위로 이김 */
  .utility-item--greeting,
  body.menu-open .utility-item.utility-item--greeting {
    display: none;
  }

  .utility-timer {
    padding: var(--space-1) 6px;
  }

  /* 모바일 로그인 상태: dot 구분자 제거
     — dot 생성 규칙(:not 2개 포함, 특이도 0,5,2)을 이겨야 하므로 동일 :not 체인으로 맞춤(후순위 승) */
  body.is-logged-in .utility-item + .utility-item:not(.utility-item--greeting):not(.utility-item--timer)::before {
    content: none;
    display: none;
  }
}