/* =========================================================================
   HRBrain POC - 공통 디자인 토큰 / 레이아웃
   원본: https://hrbrain-demo-korea.auth.hrbrain.jp/services 실측 기반
   ========================================================================= */

:root {
  /* Color */
  --hrb-bg:              #f5f6f9;   /* 페이지 배경 (실측 rgb(245,246,249)) */
  --hrb-surface:         #ffffff;   /* 카드/패널 배경 */
  --hrb-text:            #222224;   /* 기본 텍스트 (실측 rgb(34,34,36)) */
  --hrb-text-sub:        #333333;   /* 패널 내 텍스트 */
  --hrb-text-muted:      #6b6b70;
  --hrb-border:          #e6e7eb;
  --hrb-primary:         #00a85f;   /* 브랜드 그린 (아이콘 primary) */
  --hrb-secondary:       #8cc456;   /* 브랜드 라이트 그린 (아이콘 secondary) */
  --hrb-hover:           #f0f1f4;

  /* Elevation */
  --hrb-shadow-card:     0 1px 3px 0 #e6e7eb;
  --hrb-shadow-panel:    0 3px 8px 0 rgba(0, 0, 0, 0.16);

  /* Radius */
  --hrb-radius:          6px;

  /* Layout */
  --hrb-header-h:        40px;
  --hrb-card-size:       192px;
  --hrb-card-gap:        8px;       /* 카드 margin (실측 8px → 실 간격 16px) */
}

* { box-sizing: border-box; }

html {
  background: var(--hrb-surface);
}

body {
  margin: 0;
  font-family: YakuHanJP, "Helvetica Neue", Arial, "Apple SD Gothic Neo",
               "Noto Sans KR", "Malgun Gothic", "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 21px;
  color: var(--hrb-text);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* -------------------------------------------------------------------------
   글로벌 헤더 (우측 상단 Help / Menu)
   ------------------------------------------------------------------------- */
.hrb-header {
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  height: var(--hrb-header-h);
  padding: 8px;
}

.hrb-header__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: none;
  color: var(--hrb-text);
  font-size: 14px;
  line-height: 24px;
  cursor: pointer;
}

.hrb-header__item:hover { opacity: 0.7; }
.hrb-header__item svg { width: 24px; height: 24px; flex: none; }

/* Menu 드롭다운 패널 */
.hrb-menu {
  position: relative;
  display: flex;
  align-items: center;
}

.hrb-menu__panel {
  position: absolute;
  top: 32px;
  right: 0;
  width: 228px;
  padding: 24px;
  border-radius: var(--hrb-radius);
  background: var(--hrb-surface);
  box-shadow: var(--hrb-shadow-panel);
  color: var(--hrb-text-sub);
  text-align: left;
}

.hrb-menu__panel[hidden] { display: none; }

.hrb-menu__link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 180px;
  height: 40px;
  padding: 4px 8px;
  border: 0;
  border-radius: var(--hrb-radius);
  background: none;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.hrb-menu__link:hover { background: var(--hrb-hover); }
.hrb-menu__link img,
.hrb-menu__link svg { width: 24px; height: 24px; flex: none; }
.hrb-menu__link span { flex: 1 1 auto; }
.hrb-menu__caret { width: 10px; height: 10px; flex: none; }

.hrb-menu__divider {
  margin: 16px 0;
  border: 0;
  border-top: 1px solid var(--hrb-border);
}

/* -------------------------------------------------------------------------
   서비스 선택 (HOME)
   ------------------------------------------------------------------------- */
.hrb-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--hrb-bg);
}

.hrb-page__body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hrb-services { width: 624px; text-align: center; }

.hrb-services__logo {
  display: block;
  width: 284px;
  height: 56px;
  margin: 0 auto;
}

.hrb-services__title {
  margin: 32px 0 24px;
  font-size: 22px;
  font-weight: 700;
  line-height: 22px;
  color: var(--hrb-text);
}

.hrb-services__grid {
  display: flex;
  flex-wrap: wrap;
  /* 원본은 flex-start. 카드가 3의 배수가 아닐 때 마지막 줄이 왼쪽으로 몰리는 것을
     막기 위해 center 로 둔다. 한 줄이 꽉 찬 경우(3장=624px)는 원본과 동일하다. */
  justify-content: center;
}

.hrb-service-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hrb-card-size);
  height: var(--hrb-card-size);
  margin: var(--hrb-card-gap);
  border-radius: var(--hrb-radius);
  background: var(--hrb-surface);
  box-shadow: var(--hrb-shadow-card);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.hrb-service-card:hover {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.16);
  transform: translateY(-1px);
}

/* 원본은 inner 가 아이콘과 같은 80px 고정폭이었다. 원본 라벨(인사 평가/조직도 등)은
   모두 80px 안에 들어가지만, ONECHAMBER 처럼 긴 라벨은 80px 박스를 넘쳐서
   카드 밖으로 삐져나온다. inner 를 카드 폭으로 두고 아이콘만 auto 마진으로
   가운데 맞춘다. 짧은 라벨의 렌더링 결과는 원본과 동일하다. */
.hrb-service-card__inner {
  width: 100%;
  padding: 0 12px;
  text-align: center;
}

.hrb-service-card__icon {
  display: block;
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
}

.hrb-service-card__label {
  font-size: 18px;
  line-height: 18px;
  font-weight: 400;
  color: var(--hrb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 좁은 화면 대응 (원본은 고정폭이지만 POC 확인 편의를 위해 축소 허용) */
@media (max-width: 680px) {
  .hrb-services { width: 100%; padding: 24px 8px; }
  .hrb-services__logo { width: 200px; height: 40px; }
  .hrb-services__grid { justify-content: center; }
}