@charset "UTF-8";
@font-face {
  font-family: "Pretendard";
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/pretendard/Pretendard-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/pretendard/Pretendard-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/pretendard/Pretendard-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/pretendard/Pretendard-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/pretendard/Pretendard-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/pretendard/Pretendard-ExtraBold.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/pretendard/Pretendard-Black.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Serif KR";
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/noto-serif-kr/NotoSerifKR-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Serif KR";
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/noto-serif-kr/NotoSerifKR-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Serif KR";
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/noto-serif-kr/NotoSerifKR-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Gowun Batang";
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/gowun-batang/GowunBatang-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Gowun Batang";
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/gowun-batang/GowunBatang-Bold.woff2") format("woff2");
}
/* ================================================================
   에디토리얼 토큰 → 포털 디자인 시스템에 정렬 (변수명 유지, 값만 재매핑)
   파랑=강조, 본문=중립 그레이, 산세리프, 포털 배경/여백
   ================================================================ */
/* ---- Neutral (본문 · 면 · 라인) : 포털 중립 스케일과 일치 ---- */
/* ---- Dark (다크 히어로 · 밴드) : 포털 ink 다크와 통일 ---- */
/* ---- Accent (강조) : 포털 blue ---- */
/* ---- Typography : serif 제거, 전체 산세리프(Pretendard) ---- */
/* ---- Layout ---- */
/* ---- Radius : 포털과 일치 ---- */
/* ---- Motion ---- */
/* ---- Shadow : 포털 shadow 스케일 ---- */
/* ---- Text scale : 포털 밀도에 맞춰 축소 ---- */
/* ================================================================
   장기요양지원센터 — 통합 디자인 시스템 (Design Tokens)
   원칙:
   - 파랑(primary)은 링크 · 활성 · 포커스 등 강조에만 사용한다.
   - 본문 · 면 · 구분은 중립(검정 · 회색 · 흰색)과 여백으로 처리한다.
   - 강조색(accent)은 CTA에만 사용한다.
   ================================================================ */
/* ---- Primary (institutional blue) : 강조 전용 ---- */
/* ---- Accent : CTA 전용 ---- */
/* ---- Neutral scale : 본문 · 면 · 라인 ---- */
/* ---- 의미 별칭 ---- */
/* ---- Radius : 면은 각지되, 카드는 살짝 둥글게 ---- */
/* ---- Shadow : 얇은 경계 + 얕은 깊이 ---- */
/* ---- Motion ---- */
:root {
  --portal-header-height: 72px;
  --portal-header-compact-height: 56px;
  --portal-footer-height: 180px;
  --portal-blue: #1a5fa8;
  --portal-blue-dark: #134a85;
  --portal-accent: #ec6a1a;
  --portal-line: #e9ebef;
  --portal-bg: #f3f7fb;
  --portal-radius: 10px;
  --portal-shadow: 0 8px 24px rgba(20, 32, 56, 0.08);
  --portal-shell: 1520px;
}

.portal-header.is-compact {
  --portal-header-height: var(--portal-header-compact-height);
}

/* ---------------- 페이지 셸 ---------------- */
.portal-page {
  background: #f3f7fb;
  padding: 28px 0 56px;
}

.portal-page__inner {
  width: 100%;
  max-width: var(--portal-shell);
  margin-inline: auto;
  padding-inline: 32px;
}

@media (max-width: 860px) {
  .portal-page__inner,
  .home-shell {
    padding-inline: 16px;
  }
}
.portal-page__head {
  margin-bottom: 28px;
}

.portal-page__eyebrow {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1a5fa8;
}

.portal-page__title {
  margin: 0 0 8px;
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1b1f24;
}

.portal-page__desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #5e6671;
}

.portal-panel {
  background: #ffffff;
  border: 1px solid #e9ebef;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(20, 32, 56, 0.04);
}

.portal-card {
  background: #ffffff;
  border: 1px solid #e9ebef;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20, 32, 56, 0.08);
}

.portal-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 20px;
}

.portal-section-head__copy {
  min-width: 0;
}

.portal-section-head__more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #1a5fa8;
  text-decoration: none;
}
.portal-section-head__more:hover {
  text-decoration: underline;
}

/* ---------------- 버튼 ---------------- */
.portal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 20px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.18s cubic-bezier(0.22, 1, 0.36, 1), color 0.18s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-btn--primary {
  color: #fff;
  background: #1a5fa8;
  border-color: #1a5fa8;
}
.portal-btn--primary:hover:not(:disabled) {
  background: #134a85;
  border-color: #134a85;
}
.portal-btn--primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.portal-btn--secondary {
  color: #383d44;
  background: #ffffff;
  border-color: #d8dce2;
}
.portal-btn--secondary:hover {
  border-color: #1a5fa8;
  color: #1a5fa8;
}
.portal-btn--accent {
  color: #fff;
  background: #ec6a1a;
  border-color: #ec6a1a;
}
.portal-btn--accent:hover:not(:disabled) {
  background: #d35a0d;
  border-color: #d35a0d;
}

/* ---------------- 인풋 ---------------- */
.portal-input {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  font-size: 0.9375rem;
  color: #383d44;
  border: 1px solid #d8dce2;
  border-radius: 6px;
  background: #ffffff;
  transition: border-color 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-input::placeholder {
  color: #8b929c;
}
.portal-input:focus {
  outline: none;
  border-color: #1a5fa8;
  box-shadow: none;
}

/* ---------------- 공통 셸 (홈/포털 콘텐츠 폭) ---------------- */
.home-shell {
  width: 100%;
  max-width: var(--portal-shell);
  margin-inline: auto;
  padding-inline: 32px;
}

/* ---------------- 검색어 하이라이트 ---------------- */
.search-highlight {
  background: #fff1a8;
  border-radius: 2px;
  padding: 0 2px;
}

/* ---------------- 전역 포커스 (접근성) ---------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #1a5fa8;
  outline-offset: 2px;
  border-radius: 4px;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1), transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ================================================================
   판매관리센터 공통 UI (sui-*)
   관리 화면 전반에서 반복되는 카드 · 표 · 배지 · 툴바를 모아 둔다.
   ================================================================ */
/* ---------------- 카드 ---------------- */
.sui-card {
  background: #fff;
  border: 1px solid #e9ebef;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(20, 32, 56, 0.04);
}
.sui-card--flush {
  overflow: hidden;
}

.sui-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #e9ebef;
}

.sui-card__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1b1f24;
}
.sui-card__title em {
  margin-left: 7px;
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 500;
  color: #8b929c;
}

.sui-card__link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1a5fa8;
  text-decoration: none;
  white-space: nowrap;
}
.sui-card__link:hover {
  text-decoration: underline;
}

.sui-card__body {
  padding: 18px;
}

/* ---------------- 섹션 제목 ---------------- */
.sui-section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1b1f24;
}

/* ---------------- 배지 ---------------- */
.sui-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 2px;
  border: 1px solid transparent;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  background: #f3f4f6;
  color: #5e6671;
}
.sui-badge--blue {
  background: #e8f1fb;
  color: #1a5fa8;
}
.sui-badge--green {
  background: #e6f6ee;
  color: #1d7a4c;
}
.sui-badge--amber {
  background: #fdf1de;
  color: #a35a08;
}
.sui-badge--red {
  background: #fdeceb;
  color: #b42318;
}
.sui-badge--gray {
  background: #eef0f3;
  color: #5e6671;
}
.sui-badge--violet {
  background: #efeafc;
  color: #6035c9;
}

/* ---------------- 표 ---------------- */
.sui-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.sui-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8438rem;
  white-space: nowrap;
}
@media (max-width: 1280px) {
  .sui-table {
    white-space: normal;
  }
  .sui-table th,
  .sui-table td {
    padding: 10px 8px;
    white-space: normal;
    word-break: keep-all;
  }
}
.sui-table th,
.sui-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid #e9ebef;
  vertical-align: middle;
}
.sui-table th {
  position: sticky;
  top: 0;
  background: #fafbfc;
  font-size: 0.75rem;
  font-weight: 700;
  color: #5e6671;
  z-index: 1;
}
.sui-table tbody tr:hover {
  background: #fafbfd;
}
.sui-table tbody tr:last-child td {
  border-bottom: 0;
}
.sui-table .is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sui-table .is-center {
  text-align: center;
}
.sui-table .is-wrap {
  white-space: normal;
}

.sui-table__strong {
  font-weight: 700;
  color: #1b1f24;
}

.sui-table__sub {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  color: #8b929c;
}

/* 표 안의 상품 셀 */
.sui-prod {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: min(240px, 100%);
}
@media (max-width: 1280px) {
  .sui-prod {
    min-width: 0;
  }
}

.sui-prod__img {
  flex: none;
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e9ebef;
  background: #fafbfc;
}

.sui-prod__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: #1b1f24;
}

.sui-prod__name-btn {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  color: #1a5fa8;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sui-prod__name-btn:hover {
  color: #1b1f24;
}

/* ---------------- 툴바 · 폼 컨트롤 ---------------- */
.sui-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid #e9ebef;
}
.sui-toolbar > .sui-btn {
  height: 36px;
  min-height: 36px;
}

.sui-toolbar__spacer {
  flex: 1;
}

.sui-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 180px;
  min-width: 0;
  max-width: 320px;
}
.sui-search .mdi,
.sui-search svg,
.sui-search i {
  position: absolute;
  left: 10px;
  color: #8b929c;
  pointer-events: none;
}
.sui-search input {
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  padding: 0 12px 0 34px;
  font: inherit;
  font-size: 0.8438rem;
  line-height: 36px;
  color: #383d44;
  border: 1px solid #d8dce2;
  border-radius: 6px;
  background: #fff;
}
.sui-search input::placeholder {
  color: #8b929c;
}
.sui-search input:focus {
  outline: none;
  border-color: #1a5fa8;
  box-shadow: none;
}

.sui-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  max-width: 100%;
  height: 36px;
  padding: 0 10px 0 12px;
  border: 1px solid #d8dce2;
  border-radius: 6px;
  background: #fff;
}
.sui-date > span {
  flex: none;
  font-size: 0.75rem;
  font-weight: 700;
  color: #5e6671;
  white-space: nowrap;
}
.sui-date input {
  box-sizing: border-box;
  width: min(11.5rem, 100%);
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.2;
  color: #383d44;
}
.sui-date input:focus {
  outline: none;
}
.sui-date input::-webkit-calendar-picker-indicator {
  margin: 0;
  cursor: pointer;
}

.sui-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.sui-presets button {
  box-sizing: border-box;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #e9ebef;
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  color: #5e6671;
  cursor: pointer;
}
.sui-presets button.is-active {
  border-color: #1a5fa8;
  background: rgba(26, 95, 168, 0.08);
  color: #1a5fa8;
}

.sui-select {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  min-height: 40px;
  padding: 0 30px 0 12px;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.35;
  color: #383d44;
  border: 1px solid #d8dce2;
  border-radius: 6px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238b929c' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") no-repeat right 10px center;
  appearance: none;
  cursor: pointer;
}
.sui-select:focus {
  outline: none;
  border-color: #1a5fa8;
  box-shadow: none;
}

.sui-input {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  min-height: 40px;
  padding: 0 12px;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.35;
  color: #383d44;
  border: 1px solid #d8dce2;
  border-radius: 6px;
  background: #fff;
  /* 브라우저·비밀번호 관리자가 칸마다 다른 테두리를 덧그리지 못하게 */
  appearance: none;
  -webkit-appearance: none;
}
.sui-input::placeholder {
  color: #8b929c;
}
.sui-input:focus {
  outline: none;
  border-color: #1a5fa8;
  box-shadow: none;
}
.sui-input:disabled, .sui-input[readonly] {
  border-color: #d8dce2;
}
.sui-input:-webkit-autofill, .sui-input:-webkit-autofill:hover, .sui-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #383d44;
  caret-color: #383d44;
  border: 1px solid #d8dce2;
  box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 99999s ease-out;
}
.sui-input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.sui-input[type=number]::-webkit-outer-spin-button, .sui-input[type=number]::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}

textarea.sui-input {
  height: auto;
  min-height: 96px;
  padding: 10px 12px;
  line-height: 1.55;
  resize: vertical;
}

.sui-field {
  display: grid;
  gap: 6px;
  align-content: start;
}
.sui-field > label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #383d44;
}

.sui-hint {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #8b929c;
}

/*
 * 옆칸 필드 정렬: 라벨 / 입력 / 힌트 줄을 subgrid로 맞춘다.
 * 힌트가 없는 칸은 빈 줄을 남겨 입력창 높이가 어긋나지 않게 한다.
 */
.sui-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  column-gap: 16px;
  row-gap: 6px;
  min-width: 0;
}
.sui-row > .sui-field {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0;
  min-width: 0;
}
.sui-row > .sui-field > label {
  min-height: 1.375rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.sui-row > .sui-field > .sui-hint {
  min-height: 1.125rem;
}
.sui-row > .sui-field:not(:has(> .sui-hint))::after {
  content: "";
  min-height: 1.125rem;
}
.sui-row--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sui-row--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1200px) {
  .sui-row--3, .sui-row--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .sui-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .sui-row--3, .sui-row--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1280px) {
  .seller__main th,
  .seller__main td,
  .admin__main th,
  .admin__main td {
    white-space: normal;
    word-break: keep-all;
  }
}
@media (max-width: 720px) {
  .sui-search {
    flex: 1 1 100%;
    max-width: none;
  }
}
/* ---------------- 버튼 ---------------- */
.sui-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 40px;
  padding: 0 14px;
  font: inherit;
  font-size: 0.8438rem;
  font-weight: 700;
  line-height: 1.2;
  color: #383d44;
  background: #fff;
  border: 1px solid #d8dce2;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.18s cubic-bezier(0.22, 1, 0.36, 1), color 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.sui-btn:hover:not(:disabled) {
  border-color: #1a5fa8;
  color: #1a5fa8;
}
.sui-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.sui-btn--primary {
  color: #fff;
  background: #1a5fa8;
  border-color: #1a5fa8;
}
.sui-btn--primary:hover:not(:disabled) {
  background: #134a85;
  border-color: #134a85;
  color: #fff;
}
.sui-btn--accent {
  color: #fff;
  background: #ec6a1a;
  border-color: #ec6a1a;
}
.sui-btn--accent:hover:not(:disabled) {
  background: #d35a0d;
  border-color: #d35a0d;
  color: #fff;
}
.sui-btn--sm {
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.75rem;
}
.sui-btn--ghost {
  border-color: transparent;
  background: transparent;
  color: #5e6671;
}
.sui-btn--ghost:hover:not(:disabled) {
  background: #fafbfc;
  color: #1a5fa8;
}

/* ---------------- 선택 일괄 작업 바 ---------------- */
.sui-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  background: #eaf1f9;
  border-bottom: 1px solid #e9ebef;
  font-size: 0.8438rem;
  color: #1a5fa8;
}
.sui-bulk strong {
  font-weight: 800;
}

.sui-bulk-enter-active,
.sui-bulk-leave-active {
  transition: opacity 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}

.sui-bulk-enter-from,
.sui-bulk-leave-to {
  opacity: 0;
}

/* ---------------- 탭 ---------------- */
.sui-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 0 18px;
  border-bottom: 1px solid #e9ebef;
}

.sui-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 13px 14px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: #5e6671;
  white-space: nowrap;
  cursor: pointer;
}
.sui-tab em {
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 700;
  color: #8b929c;
}
.sui-tab::after {
  content: "";
  position: absolute;
  inset: auto 10px -1px;
  height: 2px;
  background: transparent;
}
.sui-tab:hover {
  color: #1b1f24;
}
.sui-tab.is-active {
  color: #1a5fa8;
  font-weight: 800;
}
.sui-tab.is-active em {
  color: #1a5fa8;
}
.sui-tab.is-active::after {
  background: #1a5fa8;
}

/* ---------------- 빈 상태 ---------------- */
.sui-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 56px 20px;
  color: #8b929c;
  text-align: center;
}
.sui-empty p {
  margin: 0;
  font-size: 0.875rem;
}

/* ---------------- 페이지네이션 ---------------- */
.sui-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px;
  border-top: 1px solid #e9ebef;
}

.sui-pager__btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #5e6671;
  cursor: pointer;
}
.sui-pager__btn:hover:not(:disabled) {
  background: #fafbfc;
  color: #1b1f24;
}
.sui-pager__btn.is-active {
  background: #1a5fa8;
  border-color: #1a5fa8;
  color: #fff;
}
.sui-pager__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ---------------- 토스트 ---------------- */
.sui-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(27, 31, 36, 0.94);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 16px 40px rgba(20, 32, 56, 0.12);
  transform: translateX(-50%);
}

.sui-toast-enter-active,
.sui-toast-leave-active {
  transition: opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1), transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.sui-toast-enter-from,
.sui-toast-leave-to {
  opacity: 0;
  transform: translate(-50%, 12px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 130px;
  font-size: 18px;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  color: #1b1f24;
  background: #f4f6f9;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

img {
  max-width: 100%;
  display: block;
}

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

button,
input,
select,
textarea {
  font-family: inherit;
}

::selection {
  background: rgba(26, 95, 168, 0.18);
  color: #1b1f24;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
/* ================================================================
   함우리몰 스킨 토큰
   - 레이아웃·밀도·사각 모서리: 그누보드/영카트형
   - 포인트 컬러만 함우리몰 레드 유지
   ================================================================ */
/*
 * 1920×1080 브라우저 100% 에서 체감 75% 밀도.
 * Windows 화면 배율(125·150%)이 켜지면 CSS 뷰포트가 1536×864 / 1280×720 으로
 * 줄어드므로, 그 구간에는 이 값을 곱하지 않는다.
 */
/** 1920을 넘는 큰 모니터에서만 몰을 키운다. 작은 1080p·배율 모니터에는 쓰지 않는다. */
.app-shell {
  min-height: 100%;
}

.app-boot {
  min-height: 100vh;
  background: #f3f7fb;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1000;
  padding: 10px 14px;
  background: #1b1f24;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.18s ease;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.site-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #f3f7fb;
}
.site-app--landing {
  background: #090a09;
  scroll-padding-top: 90px;
}
.site-app--landing .site-main {
  background: #090a09;
}
.site-app {
  /* 함우리몰 — 기본은 OS·브라우저 배율을 존중한다(줌 없음). */
}
.site-app--mall {
  --mall-ui-zoom: 1;
  background: #f5f6f8;
  /* zoom 때문에 브라우저 포커스 링이 입력칸 위에 따로 그려진다 */
}
.site-app--mall input:focus, .site-app--mall input:focus-visible,
.site-app--mall textarea:focus,
.site-app--mall textarea:focus-visible,
.site-app--mall select:focus,
.site-app--mall select:focus-visible,
.site-app--mall button:focus,
.site-app--mall button:focus-visible {
  outline: none;
}
.site-app--gate {
  min-height: 0;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background: #1d2939;
}
.site-app--gate .site-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.site-app--gate .site-main--home {
  background: #1d2939;
}
.site-app--gate .site-main > * {
  flex: 1 1 auto;
  min-height: 0;
}

/*
 * 진짜 1920×1080(브라우저 100%, CSS 폭 1600~1920)만 밀도를 맞춘다.
 * 화면 배율 125%/150% 모니터는 여기 안 들어온다(CSS 폭이 1280~1536).
 */
@media (min-width: 1600px) and (max-width: 1920px) and (min-height: 700px) {
  .site-app--mall {
    --mall-ui-zoom: 0.99;
    zoom: 0.99;
    min-height: calc(100vh / 0.99);
  }
}
/* 큰 모니터만 기존처럼 키운다. */
@media (min-width: 1921px) {
  .site-app--mall {
    --mall-ui-zoom: 1.32;
    zoom: 1.32;
    min-height: calc(100vh / 1.32);
  }
}
@media (max-width: 768px) {
  .site-app:not(.site-app--mall):not(.site-app--gate) {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
  .site-app--mall {
    --mall-ui-zoom: 1;
    zoom: 1;
    min-height: 100vh;
  }
  /* 390×844에서 지금 크기. 더 좁거나 낮으면 rem 글자·여백이 같은 비율로 줄어든다. */
  html:has(.site-app--mall) {
    font-size: calc(min(1px, 0.25641vw, 0.11848dvh) * 18);
  }
  .site-app--mall img {
    max-width: 100%;
  }
}
.site-app:not(.site-app--mall) h1, .site-app:not(.site-app--mall) h2, .site-app:not(.site-app--mall) h3, .site-app:not(.site-app--mall) h4 {
  text-wrap: balance;
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: break-word;
}
.site-app:not(.site-app--mall) p, .site-app:not(.site-app--mall) li, .site-app:not(.site-app--mall) dd {
  text-wrap: balance;
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: break-word;
}

.site-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.site-main--home {
  background: #fff;
}

.site-main > * {
  flex: 1 0 auto;
}

.page-fade-enter-active,
.page-fade-leave-active {
  transition: opacity 0.2s ease;
}

.page-fade-enter-from,
.page-fade-leave-to {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .page-fade-enter-active,
  .page-fade-leave-active {
    transition: none;
  }
}
.app-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.portal-header {
  position: sticky;
  top: 0;
  z-index: 300;
  background: #fff;
  border-bottom: 1px solid #e6e9ee;
  box-shadow: none;
  transition: box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ================= 1단 ================= */
.portal-header__top {
  border-bottom: 1px solid #eef1f4;
}

.portal-header__top-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1520px;
  width: 100%;
  height: 72px;
  margin-inline: auto;
  padding-inline: 32px;
  transition: height 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.portal-header.is-compact .portal-header__top-inner {
  height: 56px;
}

.portal-header.is-compact .portal-header__board {
  display: none;
}

.portal-header.is-compact.is-menu-open .portal-header__board {
  display: block;
}

.portal-header__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #1d2939;
  background: none;
  border: none;
  cursor: pointer;
}

.portal-header__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex-shrink: 1;
}

.portal-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.portal-header__logo img {
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-header__logo:hover img {
  transform: scale(1.05);
}

.portal-header__logo-line {
  min-width: 0;
  line-height: 1;
  white-space: nowrap;
}

.portal-header__logo-name {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #1a2332;
  text-decoration: none;
  vertical-align: baseline;
}

.portal-header__logo-dash {
  margin: 0 0.35em;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, 0.36);
  vertical-align: baseline;
}

.portal-header__logo-org {
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.82);
  vertical-align: baseline;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
}
.portal-header__logo-org:hover, .portal-header__logo-org:focus-visible {
  color: #fff;
  outline: none;
}

.portal-header__nav {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  transform: translateX(-50%);
}

.portal-header__util {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  z-index: 2;
  flex-shrink: 0;
}

.portal-header__tools {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

@media (max-width: 1180px) {
  .portal-header__all-btn-text {
    display: none;
  }
}

.portal-header__util-item {
  position: relative;
  display: flex;
  align-items: center;
}
.portal-header__util-item::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}

.portal-header__who {
  margin: 0 4px 8px;
  padding: 4px 6px 10px;
  border-bottom: 1px solid #e9ebef;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1b1f24;
}

.portal-header__icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #5e6671;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.18s cubic-bezier(0.22, 1, 0.36, 1), background 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-header__icon-btn:hover, .portal-header__icon-btn.is-open {
  color: #1a5fa8;
  background: #f3f7fb;
}

.portal-header__count {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 0.625rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  background: #1a5fa8;
  border-radius: 999px;
}
.portal-header__count--alert {
  background: #e0392b;
}

.portal-header__divider {
  width: 1px;
  height: 22px;
  margin-inline: 6px;
  background: #d8dce2;
}

.portal-header__mall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  background: #e52528;
  border: 1px solid #e52528;
  border-radius: 4px;
  transition: border-color 0.18s cubic-bezier(0.22, 1, 0.36, 1), color 0.18s cubic-bezier(0.22, 1, 0.36, 1), background 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-header__mall:hover, .portal-header__mall.is-on {
  color: #fff;
  background: #ff4747;
  border-color: #ff4747;
}

.portal-header__mall-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  color: #fff;
  background: #c41e22;
  border-radius: 2px;
}

.portal-header__profile {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 260px;
  padding: 7px 10px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.18s cubic-bezier(0.22, 1, 0.36, 1), color 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-header__profile:hover, .portal-header__profile.is-open {
  border-color: #1a5fa8;
  color: #1a2332;
}

.portal-header__welcome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  color: inherit;
}

.portal-header__login-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 14px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.18s cubic-bezier(0.22, 1, 0.36, 1), color 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-header__login-trigger:hover, .portal-header__login-trigger.is-on {
  border-color: #fff;
  color: #fff;
}

.portal-header__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 260;
  min-width: 240px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid #e9ebef;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(20, 32, 56, 0.12);
}
.portal-header__panel--right {
  left: auto;
  right: 0;
}

.portal-header__panel-title {
  display: block;
  margin: 2px 4px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #5e6671;
}

.portal-header__panel-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.portal-header__panel-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  font-size: 0.875rem;
  color: #383d44;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.18s cubic-bezier(0.22, 1, 0.36, 1), color 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-header__panel-list a .app-icon {
  color: #8b929c;
}
.portal-header__panel-list a:hover {
  color: #1a5fa8;
  background: #eaf1f9;
}

.portal-header__panel-empty {
  margin: 0;
  padding: 12px 10px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #8b929c;
}

.portal-header__panel--right > a,
.portal-header__panel--right > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  color: #383d44;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s cubic-bezier(0.22, 1, 0.36, 1), color 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-header__panel--right > a:hover,
.portal-header__panel--right > button:hover {
  color: #1a5fa8;
  background: #eaf1f9;
}
.portal-header__panel--right > a.is-logout,
.portal-header__panel--right > button.is-logout {
  margin-top: 4px;
  border-top: 1px solid #e9ebef;
  border-radius: 0 0 6px 6px;
  color: #c41e22;
}
.portal-header__panel--right > a.is-logout:hover,
.portal-header__panel--right > button.is-logout:hover {
  color: #c41e22;
  background: #fff5f5;
}

/* ================= 메인 네비게이션 (상단 중앙) ================= */
.portal-header__menu {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-header__menu-item {
  position: relative;
  display: flex;
  align-items: stretch;
}
.portal-header__menu-item.is-hover .portal-header__menu-link, .portal-header__menu-item.is-active .portal-header__menu-link {
  color: #1a2332;
}
.portal-header__menu-item.is-active .portal-header__menu-link {
  font-weight: 700;
}
.portal-header__menu-item.is-active .portal-header__menu-link::after {
  background: #5a9be6;
  opacity: 1;
  transform: scaleX(1);
}

.portal-header__org-wrap {
  display: none;
  position: relative;
  flex-shrink: 0;
}

.portal-header__org {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1a5fa8;
  white-space: nowrap;
  text-decoration: none;
  background: #f3f7fc;
  border: 1px solid #c5d4e6;
  border-radius: 4px;
  cursor: pointer;
}
.portal-header__org:hover, .portal-header__org:focus-visible {
  border-color: #1a5fa8;
  outline: none;
}
.portal-header__org--empty {
  color: #383d44;
  background: #fff;
  border-color: #d8dce2;
}

.portal-header__org-wrap .portal-header__panel {
  min-width: 260px;
  padding: 8px;
}
.portal-header__org-wrap .portal-header__panel button {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  text-align: left;
  color: #383d44;
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.portal-header__org-wrap .portal-header__panel button strong {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #1b1f24;
}
.portal-header__org-wrap .portal-header__panel button span {
  font-size: 0.75rem;
  color: #5e6671;
}
.portal-header__org-wrap .portal-header__panel button:hover, .portal-header__org-wrap .portal-header__panel button.is-current {
  background: #eaf1f9;
}
.portal-header__org-wrap .portal-header__panel button:hover strong, .portal-header__org-wrap .portal-header__panel button.is-current strong {
  color: #1a5fa8;
}

.portal-drawer__org {
  padding: 16px 20px 12px;
  border-bottom: 1px solid #e9ebef;
}
.portal-drawer__org p {
  margin: 0 0 10px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #8b929c;
}
.portal-drawer__org button {
  display: block;
  width: 100%;
  margin-bottom: 6px;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: left;
  color: #1b1f24;
  background: #fff;
  border: 1px solid #d8dce2;
  border-radius: 4px;
  cursor: pointer;
}
.portal-drawer__org button.is-on {
  color: #1a5fa8;
  background: #f3f7fc;
  border-color: #1a5fa8;
}

.portal-header__sub {
  position: absolute;
  top: calc(100% - 6px);
  left: 50%;
  z-index: 30;
  display: none;
  flex-direction: column;
  min-width: 196px;
  padding: 10px 8px 8px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.16);
  transform: translateX(-50%);
}
.portal-header__sub::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.portal-header__menu-item:hover .portal-header__sub,
.portal-header__menu-item:focus-within .portal-header__sub {
  display: flex;
}

.portal-header__sub-link {
  padding: 10px 12px;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1b1f24;
  text-decoration: none;
  border-radius: 6px;
}
.portal-header__sub-link:hover, .portal-header__sub-link:focus-visible {
  color: #1a5fa8;
  background: #f4f6f8;
  outline: none;
}

.portal-header__menu-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 18px;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: #2c3544;
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-header__menu-link::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 3px;
  background: #6d8eae;
  border-radius: 3px 3px 0 0;
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 0.18s cubic-bezier(0.22, 1, 0.36, 1), transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-header__menu-link:hover {
  color: #1a2332;
}
.portal-header__menu-link:hover::after {
  opacity: 0.45;
  transform: scaleX(1);
}
.portal-header__menu-link.is-static {
  cursor: default;
}
.portal-header__menu-link.is-on {
  color: #1a2332;
  font-weight: 700;
}
.portal-header__menu-link.is-on::after {
  opacity: 1;
  transform: scaleX(1);
}

.portal-header__all-btn {
  display: none; /* 넓은 화면: 모든 메뉴가 보이므로 숨김. 좁아지면 아래 미디어쿼리로 노출 */
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 8px 14px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: #5e6671;
  background: #f3f7fb;
  border: 1px solid #e9ebef;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.18s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-header__all-btn:hover {
  color: #1a5fa8;
  border-color: #1a5fa8;
}

/* 메뉴가 좁아져 다 보이지 않는 중간 폭에서만 전체메뉴 노출 */
@media (min-width: 961px) and (max-width: 1180px) {
  .portal-header__all-btn {
    display: inline-flex;
  }
}
/* ================= 메가메뉴 ================= */
.portal-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 250;
  background: #ffffff;
  border-top: 1px solid #e9ebef;
  box-shadow: 0 20px 40px rgba(20, 32, 56, 0.1);
}

.portal-mega__inner {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 300px;
  gap: 36px;
  max-width: 1440px;
  margin-inline: auto;
  padding: 32px clamp(16px, 2vw, 28px) 36px;
}

.portal-mega__aside {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.portal-mega__label {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1b1f24;
}

.portal-mega__all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a5fa8;
  text-decoration: none;
}
.portal-mega__all:hover {
  text-decoration: underline;
}

.portal-mega__cols {
  display: flex;
  gap: 40px;
}

.portal-mega__col {
  flex: 1;
  min-width: 0;
}

.portal-mega__col-title {
  display: block;
  margin-bottom: 12px;
  padding-bottom: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #5e6671;
  border-bottom: 1px solid #e9ebef;
}

.portal-mega__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  margin-inline: -12px;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-mega__link strong {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1b1f24;
  transition: color 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-mega__link span {
  font-size: 0.75rem;
  color: #5e6671;
}
.portal-mega__link:hover {
  background: #eaf1f9;
}
.portal-mega__link:hover strong {
  color: #1a5fa8;
}
.portal-mega__link.is-active strong {
  color: #1a5fa8;
}

.portal-mega__feature {
  display: flex;
  flex-direction: column;
  padding: 22px;
  text-decoration: none;
  background: #eaf1f9;
  border-radius: 10px;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-mega__feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(20, 32, 56, 0.08);
}

.portal-mega__feature-badge {
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 4px 11px;
  font-size: 0.6875rem;
  font-weight: 800;
  color: #fff;
  background: #1a5fa8;
  border-radius: 999px;
}

.portal-mega__feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  color: #1a5fa8;
  background: #ffffff;
  border-radius: 12px;
}

.portal-mega__feature-title {
  font-size: 1.0625rem;
  font-weight: 800;
  color: #1b1f24;
}

.portal-mega__feature-desc {
  margin: 6px 0 16px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #5e6671;
}

.portal-mega__feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: 700;
  color: #1a5fa8;
}

/* 메가 애니메이션 */
.mega-enter-active,
.mega-leave-active {
  transition: opacity 0.18s cubic-bezier(0.22, 1, 0.36, 1), transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.mega-enter-from,
.mega-leave-to {
  opacity: 0;
  transform: translateY(-8px);
}

/* ================= 전체메뉴 패널 ================= */
.portal-header__all-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 250;
  background: #f3f7fb;
  border-top: 1px solid #e9ebef;
  box-shadow: 0 20px 40px rgba(20, 32, 56, 0.1);
}

.portal-header__all-menu-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1440px;
  margin-inline: auto;
  padding: 28px clamp(16px, 2vw, 28px) 32px;
}
.portal-header__all-menu-inner h2 {
  margin: 0 0 10px;
  padding-bottom: 8px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #1b1f24;
  border-bottom: 1px solid #d8dce2;
}
.portal-header__all-menu-inner ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.portal-header__all-menu-inner a {
  display: block;
  padding: 6px 0;
  font-size: 0.875rem;
  color: #5e6671;
  text-decoration: none;
}
.portal-header__all-menu-inner a:hover {
  color: #1a5fa8;
}

/* ================= 모바일 Drawer ================= */
.portal-drawer__backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(15, 20, 30, 0.5);
}

.portal-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 510;
  display: flex;
  flex-direction: column;
  width: min(320px, 86vw);
  background: #ffffff;
  box-shadow: 8px 0 32px rgba(20, 32, 56, 0.18);
}

.portal-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid #e9ebef;
}

.portal-drawer__brand {
  font-size: 1.0625rem;
  font-weight: 800;
  color: #1b1f24;
}

.portal-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #5e6671;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.portal-drawer__close:hover {
  background: #f3f7fb;
}

.portal-drawer__nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.portal-drawer__group {
  border-bottom: 1px solid #e9ebef;
}

.portal-drawer__group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 20px;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: #1b1f24;
  background: none;
  border: none;
  cursor: pointer;
}
.portal-drawer__group-head .app-icon {
  color: #8b929c;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-drawer__group-head.is-open {
  color: #1a5fa8;
}
.portal-drawer__group-head.is-open .app-icon {
  transform: rotate(180deg);
  color: #1a5fa8;
}

.portal-drawer__group-label {
  margin: 0;
  padding: 14px 20px 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #8b929c;
}

.portal-drawer__links {
  padding: 4px 0 12px;
  background: #fafbfc;
}
.portal-drawer__links--plain {
  padding: 8px 0;
  background: #fff;
}

.portal-drawer__link {
  display: block;
  width: 100%;
  padding: 10px 20px 10px 32px;
  font: inherit;
  font-size: 0.9375rem;
  text-align: left;
  color: #5e6671;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}
.portal-drawer__link:hover, .portal-drawer__link.is-on {
  color: #1a5fa8;
}

.portal-drawer__sublink {
  display: block;
  padding: 8px 20px 8px 36px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #5e6671;
  text-decoration: none;
}
.portal-drawer__sublink.is-nested {
  padding-left: 48px;
}
.portal-drawer__sublink:hover, .portal-drawer__sublink:focus-visible {
  color: #1a5fa8;
  outline: none;
}
.portal-drawer__sublink {
  /* 링크 없이 그룹 제목으로만 보이는 항목 (임금관리) */
}
.portal-drawer__sublink.is-disabled {
  cursor: default;
}
.portal-drawer__sublink.is-disabled:hover, .portal-drawer__sublink.is-disabled:focus-visible {
  color: #5e6671;
}

.portal-drawer__links--plain .portal-drawer__link {
  padding: 13px 20px;
  font-weight: 600;
  color: #1b1f24;
}

.portal-drawer__foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 16px 18px;
  border-top: 1px solid #e9ebef;
}
.portal-drawer__foot > :only-child {
  grid-column: 1/-1;
}

/* 랜딩 헤더와 같은 다크 톤. 휴대폰 서랍이 옛 흰 메뉴로 보이지 않게 한다 */
.portal-header.is-landing .portal-drawer {
  background: #121412;
  color: #f3f3e9;
  box-shadow: 16px 0 40px rgba(0, 0, 0, 0.45);
}
.portal-header.is-landing .portal-drawer__head {
  min-height: calc(var(--fit, 1px) * 52);
  padding: calc(var(--fit, 1px) * 8) calc(var(--fit, 1px) * 12) calc(var(--fit, 1px) * 8) calc(var(--fit, 1px) * 18);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.portal-header.is-landing .portal-drawer__brand {
  font-size: calc(var(--fit, 1px) * 15);
  letter-spacing: -0.03em;
  color: #f3f3e9;
}
.portal-header.is-landing .portal-drawer__close {
  width: calc(var(--fit, 1px) * 36);
  height: calc(var(--fit, 1px) * 36);
}
.portal-header.is-landing .portal-drawer__close .app-icon {
  font-size: calc(var(--fit, 1px) * 20) !important;
}
.portal-header.is-landing .portal-drawer__close {
  color: #d7ddd0;
  border-radius: 0;
}
.portal-header.is-landing .portal-drawer__close:hover {
  background: rgba(255, 255, 255, 0.06);
}
.portal-header.is-landing .portal-drawer__nav {
  padding: 8px 0 12px;
}
.portal-header.is-landing .portal-drawer__link {
  padding: calc(var(--fit, 1px) * 14) calc(var(--fit, 1px) * 20);
  font-size: calc(var(--fit, 1px) * 16);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #f3f3e9;
}
.portal-header.is-landing .portal-drawer__link:hover, .portal-header.is-landing .portal-drawer__link.is-on {
  color: #b6e0c3;
}
.portal-header.is-landing .portal-drawer__foot {
  border-top-color: rgba(255, 255, 255, 0.1);
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px));
}
.portal-header.is-landing .portal-drawer__foot .portal-btn {
  min-height: calc(var(--fit, 1px) * 42);
  padding: calc(var(--fit, 1px) * 10) calc(var(--fit, 1px) * 14);
  border-radius: 0;
  font-size: calc(var(--fit, 1px) * 14);
}
.portal-header.is-landing .portal-drawer__foot .portal-btn--primary {
  color: #121412;
  background: #b6e0c3;
  border-color: #b6e0c3;
}
.portal-header.is-landing .portal-drawer__foot .portal-btn--secondary {
  color: #f3f3e9;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.28);
}

.drawer-fade-enter-active,
.drawer-fade-leave-active {
  transition: opacity 0.2s ease;
}

.drawer-fade-enter-from,
.drawer-fade-leave-to {
  opacity: 0;
}

.drawer-slide-enter-active,
.drawer-slide-leave-active {
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.drawer-slide-enter-from,
.drawer-slide-leave-to {
  transform: translateX(-100%);
}

/* ================= 반응형 ================= */
@media (max-width: 1100px) {
  .portal-header__burger {
    display: inline-flex;
  }
  .portal-header__nav,
  .portal-header__board,
  .portal-mega,
  .portal-header__all-menu {
    display: none;
  }
  .portal-header__logo {
    margin-right: auto;
  }
  .portal-header__divider {
    display: none;
  }
  .portal-header__mall {
    padding: 8px 10px;
  }
}
@media (max-width: 640px) {
  .portal-header__profile {
    max-width: 168px;
    padding: 7px 8px;
  }
  .portal-header__welcome {
    font-size: 0.75rem;
  }
}
.portal-header.is-gate .portal-header__brand {
  margin-right: auto;
}
.portal-header.is-gate .portal-header__logo {
  margin-right: 0;
}
.portal-header.is-gate .portal-header__burger,
.portal-header.is-gate .portal-header__nav,
.portal-header.is-gate .portal-header__org-wrap {
  display: none;
}
.portal-header.is-gate .portal-header__util {
  margin-left: auto;
}

@media (max-width: 1100px) {
  .portal-header.is-gate .portal-header__burger {
    display: none;
  }
  .portal-header.is-gate .portal-header__brand {
    margin-right: auto;
  }
  .portal-header.is-gate .portal-header__login-trigger {
    display: inline-flex;
  }
}
@media (max-width: 767px) {
  .portal-header__top-inner,
  .portal-header.is-compact .portal-header__top-inner {
    height: 56px;
    gap: 8px;
    padding-inline: 12px;
  }
  /* 하단 메뉴·서랍에 같은 동작이 있다. 헤더는 이름만 남긴다. */
  .portal-header:not(.is-gate) .portal-header__util,
  .portal-header:not(.is-gate) .portal-header__org-wrap,
  .portal-header:not(.is-gate) .portal-header__logo-dash,
  .portal-header:not(.is-gate) .portal-header__logo-org {
    display: none;
  }
  .portal-header:not(.is-gate) .portal-header__brand {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 0;
  }
  .portal-header:not(.is-gate) .portal-header__logo {
    margin-right: 0;
  }
  .portal-header:not(.is-gate) .portal-header__logo-name {
    display: block;
    overflow: hidden;
    font-size: 1rem;
    text-overflow: ellipsis;
  }
}
@media (max-width: 480px) {
  .portal-header__login-trigger,
  .portal-header__mall {
    padding-inline: 10px;
  }
  .portal-header.is-gate .portal-header__profile {
    display: inline-flex;
    max-width: 148px;
  }
}
.portal-header__util-link {
  display: inline-flex;
  align-items: center;
  padding: 0;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: #5c6673;
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
}
.portal-header__util-link + .portal-header__util-link::before {
  content: "|";
  margin: 0 12px;
  color: #c5cad1;
  font-weight: 400;
}
.portal-header__util-link:hover, .portal-header__util-link.is-on {
  color: #1a2332;
}

.portal-header__profile {
  color: #2c3544;
  background: transparent;
  border-color: #d5dbe3;
}
.portal-header__profile:hover, .portal-header__profile.is-open {
  border-color: #1a5fa8;
  color: #1a2332;
}

.portal-header__board {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 280;
  background: #fff;
  border-bottom: 1px solid #e6e9ee;
  box-shadow: 0 16px 28px rgba(17, 24, 39, 0.08);
}

.portal-header.is-menu-open .portal-header__board {
  display: block;
}

.portal-header__board-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 48px;
  max-width: 1520px;
  margin-inline: auto;
  padding: 28px 32px 36px;
}

.portal-header__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.portal-header__col-title {
  margin: 0 0 14px;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1a2332;
  text-decoration: none;
}
.portal-header__col-title:hover, .portal-header__col-title.is-active {
  color: #1a5fa8;
}

.portal-header__col-link {
  padding: 7px 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: #3a4250;
  text-decoration: none;
}
.portal-header__col-link.is-nested {
  padding-left: 12px;
  font-size: 0.875rem;
  color: #5c6673;
}
.portal-header__col-link:hover, .portal-header__col-link.is-active {
  color: #1a5fa8;
}
.portal-header__col-link {
  /* 링크 없이 그룹 제목으로만 보이는 항목 (임금관리) */
}
.portal-header__col-link.is-disabled {
  cursor: default;
}
.portal-header__col-link.is-disabled:hover {
  color: #3a4250;
}

.portal-header__find {
  display: flex;
  align-items: center;
  width: 220px;
  height: 36px;
  margin-right: 8px;
  padding: 0 4px 0 12px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}
.portal-header__find input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 0.8125rem;
}
.portal-header__find input::placeholder {
  color: rgba(255, 255, 255, 0.62);
}
.portal-header__find input:focus {
  outline: none;
}
.portal-header__find button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
}

.portal-header.is-landing {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(9, 10, 9, 0.78);
  border-bottom-color: rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(18px);
  /* blur가 있으면 서랍(position:fixed)이 헤더 높이에 갇힌다 */
}
.portal-header.is-landing:has(.portal-drawer) {
  backdrop-filter: none;
}
.portal-header.is-landing .portal-header__top {
  border-bottom-color: transparent;
}
.portal-header.is-landing .portal-header__logo-name,
.portal-header.is-landing .portal-header__menu-link,
.portal-header.is-landing .portal-header__util-link,
.portal-header.is-landing .portal-header__welcome,
.portal-header.is-landing .portal-header__burger {
  color: #d4d9df;
}
.portal-header.is-landing .portal-header__menu-link {
  padding: 0 22px;
  font-size: 1.0625rem;
  font-weight: 600;
}
.portal-header.is-landing .portal-header__menu-link::after {
  background: #b6e0c3;
}
.portal-header.is-landing .portal-header__menu-link:hover {
  color: #b6e0c3;
}
.portal-header.is-landing .portal-header__menu-item.is-active .portal-header__menu-link,
.portal-header.is-landing .portal-header__menu-link.is-on {
  color: #b6e0c3;
}
.portal-header.is-landing .portal-header__nav {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  margin-left: 0;
}
.portal-header.is-landing .portal-header__menu-trigger {
  color: #d4d9df;
}
.portal-header.is-landing .portal-header__menu-trigger[aria-expanded=true] .app-icon {
  transform: rotate(180deg);
}

.portal-header.is-landing.is-info {
  background: #3c4944;
  border-bottom-color: transparent;
  backdrop-filter: none;
}
.portal-header.is-landing.is-info .portal-header__util-link {
  height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
}
.portal-header.is-landing.is-info .portal-header__menu-link.is-on {
  color: #fff;
}
.portal-header.is-landing.is-info .portal-header__menu-link.is-on::after {
  background: #d7e7df;
}

.portal-header__menu-drop {
  position: relative;
  display: flex;
  align-items: center;
}

.portal-header__menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: #2c3544;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}
.portal-header__menu-trigger .app-icon {
  transition: transform 0.16s ease;
}

.portal-header__menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 20;
  min-width: 168px;
  padding: 6px 0;
  background: #121412;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.portal-header__menu-panel a {
  display: block;
  padding: 10px 16px;
  color: #f3f3e9;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.portal-header__menu-panel a:hover, .portal-header__menu-panel a.is-on {
  color: #b6e0c3;
}

/* 태블릿: 가운데 메뉴를 유지하고 햄버거는 겹치지 않게 숨긴다 */
@media (max-width: 1100px) and (min-width: 721px) {
  .portal-header.is-landing .portal-header__nav {
    display: flex;
  }
  .portal-header.is-landing .portal-header__burger {
    display: none;
  }
}
/* 휴대폰: 390×844에서 1px. 더 좁거나 낮으면 글자·버튼이 같은 비율로 줄어든다. */
@media (max-width: 720px) {
  .site-app--landing {
    --fit: min(0.25641vw, 0.11848dvh);
  }
  .portal-header.is-landing .portal-header__nav {
    display: none;
  }
  .portal-header.is-landing .portal-header__burger {
    display: inline-flex;
    flex-shrink: 0;
    width: calc(var(--fit) * 36);
    height: calc(var(--fit) * 36);
  }
  .portal-header.is-landing .portal-header__burger .app-icon {
    font-size: calc(var(--fit) * 20) !important;
  }
  .portal-header.is-landing .portal-header__top-inner, .portal-header.is-landing.is-compact .portal-header__top-inner {
    height: calc(var(--fit) * 52);
    gap: calc(var(--fit) * 8);
    padding-inline: calc(var(--fit) * 14);
    padding-left: max(var(--fit) * 14, env(safe-area-inset-left));
    padding-right: max(var(--fit) * 14, env(safe-area-inset-right));
  }
  .portal-header.is-landing .portal-header__brand {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 0;
  }
  .portal-header.is-landing .portal-header__logo {
    margin-right: 0;
  }
  .portal-header.is-landing .portal-header__logo img {
    width: calc(var(--fit) * 28);
    height: calc(var(--fit) * 28);
  }
  .portal-header.is-landing .portal-header__logo-line {
    overflow: hidden;
  }
  .portal-header.is-landing .portal-header__logo-name {
    display: block;
    overflow: hidden;
    font-size: calc(var(--fit) * 15);
    font-weight: 800;
    letter-spacing: -0.03em;
    text-overflow: ellipsis;
  }
  .portal-header.is-landing .portal-header__util {
    display: flex;
    flex-shrink: 0;
    gap: 0;
    margin-left: calc(var(--fit) * 8);
  }
  .portal-header.is-landing .portal-header__util-link {
    height: calc(var(--fit) * 30);
    padding: 0 calc(var(--fit) * 10);
    border: 1px solid rgba(255, 255, 255, 0.32);
    font-size: calc(var(--fit) * 13);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #f3f3e9;
  }
  .portal-header.is-landing .portal-header__profile .app-icon {
    font-size: calc(var(--fit) * 18) !important;
  }
  .portal-header.is-landing .portal-header__welcome {
    display: none;
  }
  .portal-header.is-landing .portal-header__profile {
    max-width: none;
    padding: 6px;
    border-color: transparent;
    color: #f3f3e9;
  }
}
@media (max-width: 860px) {
  .portal-header__find {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mega-enter-active,
  .mega-leave-active,
  .drawer-slide-enter-active,
  .drawer-slide-leave-active {
    transition: opacity 0.15s ease;
  }
  .mega-enter-from,
  .mega-leave-to,
  .drawer-slide-enter-from,
  .drawer-slide-leave-to {
    transform: none;
  }
}
.portal-footer {
  margin-top: auto;
  background: #090a09;
  color: #adafa4;
  border-top: 1px solid #353831;
}
.portal-footer .portal-footer__cta,
.portal-footer .portal-footer__main,
.portal-footer .portal-footer__bottom {
  background: #090a09;
  border-color: #353831;
}
.portal-footer .portal-footer__brand,
.portal-footer .portal-footer__col-title,
.portal-footer .portal-footer__contact span,
.portal-footer .portal-footer__contact strong,
.portal-footer .portal-footer__hours {
  color: #f3f3e9;
}
.portal-footer .portal-footer__org,
.portal-footer .portal-footer__contact,
.portal-footer .portal-footer__biz,
.portal-footer .portal-footer__copy {
  color: #777e73;
}
.portal-footer a {
  color: #adafa4;
}

/* ================= 상단 CTA 밴드 ================= */
.portal-footer__cta {
  background: #1b1f24;
  color: #fff;
}

.portal-footer__cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-block: clamp(36px, 5vw, 56px);
}

.portal-footer__cta-eyebrow {
  margin: 0 0 8px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #ec6a1a;
}

.portal-footer__cta-title {
  margin: 0 0 8px;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.portal-footer__cta-sub {
  margin: 0 0 14px;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.7);
}

.portal-footer__cta-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.portal-footer__hours {
  margin: 6px 0 16px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
}

.portal-footer__cta-actions {
  display: flex;
  gap: 10px;
}

.portal-footer__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 20px;
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  transition: background 0.18s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-footer__btn:hover {
  background: rgba(255, 255, 255, 0.18);
}
.portal-footer__btn--accent {
  background: #ec6a1a;
  border-color: #ec6a1a;
}
.portal-footer__btn--accent:hover {
  background: #d35a0d;
  border-color: #d35a0d;
}
.portal-footer__btn--primary {
  background: #1a5fa8;
  border-color: #1a5fa8;
}
.portal-footer__btn--primary:hover {
  background: #134a85;
  border-color: #134a85;
}

/* ================= 정보 ================= */
.portal-footer__main {
  background: #ffffff;
  border-top: 1px solid #e9ebef;
}

.portal-footer__main-inner {
  padding-block: clamp(32px, 4vw, 48px);
}

.portal-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.0625rem;
  font-weight: 800;
  color: #1b1f24;
  text-decoration: none;
}

.portal-footer__org {
  margin: 14px 0 18px;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: #5e6671;
}

.portal-footer__contact {
  display: grid;
  gap: 4px;
  margin-bottom: 16px;
  font-size: 0.8125rem;
}
.portal-footer__contact span {
  font-weight: 700;
  color: #1b1f24;
}
.portal-footer__contact strong {
  font-weight: 500;
  color: #5e6671;
}
.portal-footer__contact a {
  width: fit-content;
  color: #1a5fa8;
  text-decoration: none;
}

.portal-footer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portal-footer__consult {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: #f3f3e9;
  color: #1b2a4a;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}
.portal-footer__consult:hover {
  background: #fff;
}

.portal-footer__mall-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #1a5fa8;
  text-decoration: none;
  border: 1px solid #d8dce2;
  border-radius: 6px;
}
.portal-footer__mall-link:hover {
  background: #eaf1f9;
  border-color: #1a5fa8;
}

.portal-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 180px));
  justify-content: end;
  gap: clamp(24px, 4vw, 56px);
}

.portal-footer__col-title {
  margin: 0 0 14px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #1b1f24;
}

.portal-footer__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-footer__col li {
  margin-bottom: 10px;
}

.portal-footer__col a {
  font-size: 0.875rem;
  color: #5e6671;
  text-decoration: none;
  transition: color 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-footer__col a:hover {
  color: #1a5fa8;
}

/* 링크 없이 그룹 제목으로만 보이는 항목 (임금관리) */
.portal-footer__disabled {
  font-size: 0.875rem;
  color: #5e6671;
  cursor: default;
}

/* ================= 하단 법적 고지 ================= */
.portal-footer__bottom {
  background: #fafbfc;
  border-top: 1px solid #e9ebef;
}

.portal-footer__bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding-block: 18px;
}

.portal-footer__biz {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #5e6671;
}
.portal-footer__biz a {
  color: #383d44;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.portal-footer__biz a:hover {
  color: #1a5fa8;
}

.portal-footer__bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.portal-footer__copy {
  margin: 0;
  font-size: 0.8125rem;
  color: #8b929c;
}

.portal-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 18px;
}
.portal-footer__legal a {
  font-size: 0.8125rem;
  color: #5e6671;
  text-decoration: none;
}
.portal-footer__legal a:hover {
  color: #1a5fa8;
}

.portal-footer__legal-strong {
  font-weight: 700;
  color: #383d44;
}

/* ================= 반응형 ================= */
@media (max-width: 860px) {
  .portal-footer__cta-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .portal-footer__cta-contact {
    align-items: flex-start;
  }
}
@media (max-width: 560px) {
  .portal-footer__cta-actions {
    flex-wrap: wrap;
  }
  .portal-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  .portal-footer__bottom-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
/* 함우리몰은 구분선 아래 사업자·약관만 보여 준다 */
.site-app--mall .portal-footer__main {
  display: none;
}

.site-app--mall .portal-footer__bottom {
  border-top: 0;
}

@media (max-width: 768px) {
  .site-app--mall .portal-footer {
    padding-bottom: var(--mall-nav-h, calc(56px + env(safe-area-inset-bottom, 0px)));
  }
}
.portal-footer .portal-footer__mall-link {
  min-height: 36px;
  padding: 0 14px;
  color: #121412;
  background: #b6e0c3;
  border-color: #b6e0c3;
  border-radius: 0;
  font-size: 13px;
  letter-spacing: -0.02em;
}
.portal-footer .portal-footer__mall-link:hover {
  color: #121412;
  background: #e7fba7;
  border-color: #e7fba7;
}

.portal-footer .portal-footer__contact a {
  color: #d7ddd0;
}
.portal-footer .portal-footer__contact a:hover {
  color: #b6e0c3;
}

@media (max-width: 720px) {
  .portal-footer .home-shell {
    padding-inline: calc(var(--fit) * 20);
  }
  .portal-footer .portal-footer__main-inner {
    padding-block: calc(var(--fit) * 32) calc(var(--fit) * 28);
  }
  .portal-footer .portal-footer__brand {
    font-size: calc(var(--fit) * 15);
    letter-spacing: -0.03em;
  }
  .portal-footer .portal-footer__brand img {
    width: calc(var(--fit) * 26);
    height: calc(var(--fit) * 26);
  }
  .portal-footer .portal-footer__org {
    margin: calc(var(--fit) * 10) 0 calc(var(--fit) * 14);
    font-size: calc(var(--fit) * 13);
    line-height: 1.75;
  }
  .portal-footer .portal-footer__contact {
    font-size: calc(var(--fit) * 13);
    line-height: 1.55;
  }
  .portal-footer .portal-footer__mall-link {
    min-height: calc(var(--fit) * 32);
    padding: 0 calc(var(--fit) * 12);
    font-size: calc(var(--fit) * 13);
  }
  .portal-footer .portal-footer__bottom-inner {
    gap: calc(var(--fit) * 12);
    padding-block: calc(var(--fit) * 18) calc(var(--fit) * 22);
  }
  .portal-footer .portal-footer__biz {
    font-size: calc(var(--fit) * 12);
    line-height: 1.75;
  }
  .portal-footer .portal-footer__copy {
    font-size: calc(var(--fit) * 11.5);
    line-height: 1.5;
  }
  .portal-footer .portal-footer__legal {
    justify-content: flex-start;
    gap: calc(var(--fit) * 8) calc(var(--fit) * 12);
  }
  .portal-footer .portal-footer__legal a {
    font-size: calc(var(--fit) * 12);
    line-height: 1.5;
  }
}
.help-dock {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 420;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  width: min(380px, 100vw - 28px);
  pointer-events: none;
  word-break: keep-all;
}
.help-dock > * {
  pointer-events: auto;
}

.help-dock__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: min(640px, 100dvh - 120px);
  overflow: hidden;
  color: #161814;
  background: #e7e9df;
  border: 1px solid #8d9486;
  border-radius: 0;
  box-shadow: 0 22px 48px rgba(22, 24, 20, 0.28);
  outline: none;
}
.help-dock__panel:focus, .help-dock__panel:focus-visible {
  outline: none;
}

.help-dock__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 16px 16px;
  color: #f3f3e9;
  background: #242822;
  border-bottom: 1px solid #242822;
}

.help-dock__head .help-dock__kicker {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #b6e0c3;
}

.help-dock__greet {
  min-width: 0;
}
.help-dock__greet h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.3;
  color: #f3f3e9;
}
.help-dock__greet p {
  margin: 8px 0 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #c9cec2;
}

.help-dock__greet .help-dock__hours {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #f3f3e9;
}
.help-dock__greet .help-dock__hours::before {
  content: "";
  width: 18px;
  height: 1px;
  background: #b6e0c3;
}

.help-dock__x {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-left: auto;
  color: #f3f3e9;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.help-dock__x:hover {
  color: #161814;
  background: #b6e0c3;
}

.help-dock__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 16px 14px 14px;
  background: #dddfd4;
}

.help-dock__label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #4e564c;
}

.help-dock__home,
.help-dock__talk {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.help-dock__topic,
.help-dock__choice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 12px;
  text-align: left;
  color: #161814;
  background: #f6f5ef;
  border: 1px solid #b7bcae;
  border-radius: 0;
  cursor: pointer;
  font: inherit;
}
.help-dock__topic:hover:not(:disabled),
.help-dock__choice:hover:not(:disabled) {
  border-color: #2e6b5a;
}
.help-dock__topic:disabled,
.help-dock__choice:disabled {
  cursor: default;
  opacity: 0.6;
}

.help-dock__topic-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  color: #161814;
  background: #b6e0c3;
  border-radius: 0;
}

.help-dock__topic-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.help-dock__topic-copy strong {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #161814;
}
.help-dock__topic-copy small {
  font-size: 0.75rem;
  color: #4e564c;
}

.help-dock__chevron {
  flex-shrink: 0;
  color: #2e6b5a;
}

.help-dock__hint {
  margin: 4px 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: #4e564c;
}

.help-dock__msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.help-dock__msg > p {
  max-width: 90%;
  margin: 0;
  padding: 11px 12px;
  border-radius: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  white-space: pre-wrap;
}
.help-dock__msg--bot > p {
  color: #161814;
  background: #f6f5ef;
  border: 1px solid #b7bcae;
}
.help-dock__msg--user {
  align-items: flex-end;
}
.help-dock__msg--user > p {
  color: #161814;
  background: #b6e0c3;
}

.help-dock__choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.help-dock__choice {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.help-dock__choice strong {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.45;
  color: #161814;
}
.help-dock__choice small {
  font-size: 0.75rem;
  color: #4e564c;
}

.help-dock__composer {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  background: #e7e9df;
  border-top: 1px solid #b7bcae;
}
.help-dock__composer input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  font: inherit;
  font-size: 0.875rem;
  color: #161814;
  background: #f6f5ef;
  border: 1px solid #b7bcae;
  border-radius: 0;
}
.help-dock__composer input::placeholder {
  color: #4e564c;
}
.help-dock__composer input:focus {
  outline: 1px solid #b6e0c3;
  outline-offset: 0;
}
.help-dock__composer button {
  height: 42px;
  padding: 0 16px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: #161814;
  background: #b6e0c3;
  border: 1px solid #b6e0c3;
  border-radius: 0;
  cursor: pointer;
}
.help-dock__composer button:hover:not(:disabled) {
  background: #e7fba7;
}
.help-dock__composer button:disabled {
  cursor: default;
  opacity: 0.45;
}

.help-dock__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #e7e9df;
  border-top: 1px solid #b7bcae;
}
.help-dock__tabs button {
  height: 46px;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #4e564c;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.help-dock__tabs button.is-on {
  color: #161814;
  background: #b6e0c3;
}

.help-dock__launch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  color: #161814;
  background: #b6e0c3;
  border: 1px solid #b6e0c3;
  border-radius: 0;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.help-dock__launch:hover {
  background: #e7fba7;
}
.help-dock__launch:focus-visible {
  outline: 2px solid #b6e0c3;
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .help-dock {
    right: 14px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    width: min(380px, 100vw - 20px);
  }
  .site-app--landing .help-dock {
    right: calc(var(--fit) * 14);
    bottom: calc(var(--fit) * 14 + env(safe-area-inset-bottom, 0px));
  }
  .site-app--landing .help-dock__launch {
    width: calc(var(--fit) * 44);
    height: calc(var(--fit) * 44);
  }
  .site-app--landing .help-dock__launch .app-icon {
    font-size: calc(var(--fit) * 20) !important;
  }
  .help-dock__panel {
    max-height: min(560px, 100dvh - 170px);
  }
}
/* 휴대폰에서는 패널 헤더의 X만 닫기이다. 아래 버튼은 열릴 때만 둔다. */
@media (max-width: 720px) {
  .site-app--landing .help-dock:has(.help-dock__panel) {
    top: calc(var(--fit) * 60);
    right: calc(var(--fit) * 12);
    bottom: calc(var(--fit) * 12 + env(safe-area-inset-bottom, 0px));
    left: calc(var(--fit) * 12);
    width: auto;
    gap: 0;
  }
  .site-app--landing .help-dock:has(.help-dock__panel) .help-dock__launch {
    display: none;
  }
  .site-app--landing .help-dock__panel {
    flex: 1 1 auto;
    height: 100%;
    max-height: none;
    border-color: #3a4038;
  }
  .site-app--landing .help-dock__head {
    gap: calc(var(--fit) * 10);
    padding: calc(var(--fit) * 16) calc(var(--fit) * 14) calc(var(--fit) * 14);
  }
  .site-app--landing .help-dock__head .help-dock__kicker {
    margin-bottom: calc(var(--fit) * 6);
    font-size: calc(var(--fit) * 11);
  }
  .site-app--landing .help-dock__greet h2 {
    font-size: calc(var(--fit) * 20);
    line-height: 1.3;
  }
  .site-app--landing .help-dock__greet p {
    margin-top: calc(var(--fit) * 6);
    font-size: calc(var(--fit) * 13);
    line-height: 1.5;
  }
  .site-app--landing .help-dock__greet .help-dock__hours {
    gap: calc(var(--fit) * 8);
    margin-top: calc(var(--fit) * 12);
    font-size: calc(var(--fit) * 12);
  }
  .site-app--landing .help-dock__greet .help-dock__hours::before {
    width: calc(var(--fit) * 16);
  }
  .site-app--landing .help-dock__x {
    width: calc(var(--fit) * 32);
    height: calc(var(--fit) * 32);
  }
  .site-app--landing .help-dock__x .app-icon {
    font-size: calc(var(--fit) * 16) !important;
  }
  .site-app--landing .help-dock__body {
    padding: calc(var(--fit) * 14) calc(var(--fit) * 12);
  }
  .site-app--landing .help-dock__label {
    margin-bottom: calc(var(--fit) * 8);
    font-size: calc(var(--fit) * 11);
  }
  .site-app--landing .help-dock__home,
  .site-app--landing .help-dock__talk {
    gap: calc(var(--fit) * 8);
  }
  .site-app--landing .help-dock__topic,
  .site-app--landing .help-dock__choice {
    gap: calc(var(--fit) * 10);
    padding: calc(var(--fit) * 12) calc(var(--fit) * 12);
  }
  .site-app--landing .help-dock__topic-icon {
    width: calc(var(--fit) * 32);
    height: calc(var(--fit) * 32);
  }
  .site-app--landing .help-dock__topic-icon .app-icon {
    font-size: calc(var(--fit) * 16) !important;
  }
  .site-app--landing .help-dock__topic-copy strong {
    font-size: calc(var(--fit) * 14);
  }
  .site-app--landing .help-dock__topic-copy small {
    font-size: calc(var(--fit) * 12);
  }
  .site-app--landing .help-dock__chevron {
    font-size: calc(var(--fit) * 16) !important;
  }
  .site-app--landing .help-dock__tabs button {
    height: calc(var(--fit) * 42);
    font-size: calc(var(--fit) * 13);
  }
  .site-app--landing .help-dock__hint,
  .site-app--landing .help-dock__msg > p {
    font-size: calc(var(--fit) * 13);
  }
  .site-app--landing .help-dock__composer {
    gap: calc(var(--fit) * 8);
    padding: calc(var(--fit) * 10) calc(var(--fit) * 12);
  }
  .site-app--landing .help-dock__composer input,
  .site-app--landing .help-dock__composer button {
    height: calc(var(--fit) * 38);
    font-size: calc(var(--fit) * 13);
  }
}
.scroll-jumps {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.scroll-jump {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  color: #fff;
  background: #134a85;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(20, 32, 56, 0.08);
  transition: background 0.18s cubic-bezier(0.22, 1, 0.36, 1), transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.scroll-jump:hover {
  background: #1a5fa8;
  transform: translateY(-2px);
}
.scroll-jump:focus-visible {
  outline: 2px solid #1a5fa8;
  outline-offset: 2px;
}

.site-app:not(.site-app--mall) .scroll-jumps {
  bottom: 98px;
}

.site-app--landing .scroll-jumps {
  bottom: 86px;
}

.site-app--landing:has(.info-center) .scroll-jumps {
  right: 22px;
  bottom: 142px;
}

.site-app--landing:has(.info-center) .scroll-jump {
  width: 52px;
  height: 52px;
}

.site-app--landing .scroll-jump {
  color: #121412;
  background: #b6e0c3;
  border-radius: 0;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
.site-app--landing .scroll-jump:hover {
  background: #e7fba7;
}

@media (max-width: 768px) {
  .scroll-jumps {
    right: 14px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
  .scroll-jump {
    width: 42px;
    height: 42px;
  }
  .site-app:not(.site-app--mall) .scroll-jumps {
    bottom: calc(146px + env(safe-area-inset-bottom, 0px));
  }
  .site-app--landing .scroll-jumps {
    right: calc(var(--fit) * 14);
    bottom: calc(var(--fit) * 66 + env(safe-area-inset-bottom, 0px));
  }
  .site-app--landing:has(.info-center) .scroll-jumps {
    right: calc(var(--fit) * 14);
    bottom: calc(var(--fit) * 118 + env(safe-area-inset-bottom, 0px));
  }
  .site-app--landing:has(.info-center) .scroll-jump {
    width: calc(var(--fit) * 44);
    height: calc(var(--fit) * 44);
  }
  .site-app--landing .scroll-jump {
    width: calc(var(--fit) * 40);
    height: calc(var(--fit) * 40);
  }
  .site-app--landing .scroll-jump .app-icon {
    font-size: calc(var(--fit) * 20) !important;
  }
}
html:has(.site-app--landing) {
  scroll-padding-top: 88px;
  background: #07090e;
}

.home {
  color: #eef3f8;
  background: #07090e;
  font-weight: 400;
  word-break: keep-all;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.home h1, .home h2, .home h3, .home p {
  margin: 0;
}
.home a {
  color: inherit;
  text-decoration: none;
}
.home img {
  display: block;
  max-width: 100%;
}
.home a:focus-visible,
.home button:focus-visible {
  outline: 2px solid #b7d2ff;
  outline-offset: 5px;
}
.home ::selection {
  color: #111;
  background: #b7d2ff;
}

.home-wrap {
  width: min(1390px, 100% - 108px);
  margin-inline: auto;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;
  width: 0;
  height: 3px;
  background: #b7d2ff;
}

.home .sup {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.19em;
  color: #8eb6ff;
}

.home .btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-width: 209px;
  padding: 17px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #eef3f8;
  background: transparent;
  border: 1px solid #5d6d84;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.home .btn span[aria-hidden] {
  transition: transform 0.2s cubic-bezier(0.2, 0.75, 0.25, 1);
}
.home .btn:hover {
  border-color: #b7d2ff;
  box-shadow: none;
  transform: translateY(-2px);
}
.home .btn:hover span[aria-hidden] {
  transform: translate(3px, -3px);
}

.home .btn-primary {
  color: #07090e;
  background: #b7d2ff;
  border-color: #b7d2ff;
}
.home .btn-primary:hover {
  color: #07090e;
  background: #dceaff;
}

/* ── hero ─────────────────────────────── */
.hero {
  position: relative;
  min-height: 720px;
  border-bottom: 1px solid #2c3848;
}

.hero-kicker,
.hero h1,
.hero-desc,
.hero-actions {
  opacity: 0;
  transform: translateY(22px);
  animation: heroRise 0.9s cubic-bezier(0.2, 0.75, 0.25, 1) forwards;
}

.hero-kicker {
  animation-delay: 0.05s;
}

.hero h1 {
  animation-delay: 0.16s;
}

.hero-desc {
  animation-delay: 0.3s;
}

.hero-actions {
  animation-delay: 0.42s;
}

@keyframes heroRise {
  to {
    opacity: 1;
    transform: none;
  }
}
.hero-in {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 6.5vw;
  align-items: center;
  padding-top: 156px;
  padding-bottom: 83px;
}

.hero-kicker {
  display: block;
  max-width: 100%;
  margin-bottom: 31px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
  color: #d5deea;
  overflow-wrap: break-word;
}

.kicker-line {
  display: block;
  width: 35px;
  height: 1px;
  background: #b7d2ff;
}

.hero h1 {
  margin: 0 0 30px;
  font-size: clamp(55px, 5.9vw, 100px);
  max-width: 100%;
  margin: 0 0 30px;
  font-size: clamp(55px, 5.9vw, 100px);
  line-height: 1.16;
  letter-spacing: -0.08em;
  font-weight: 900;
  overflow-wrap: break-word;
}

.hero-desc {
  max-width: 590px;
  margin: 0 0 31px;
  font-size: 18px;
  line-height: 1.95;
  color: #b6c0d4;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
}

.hero-photo {
  position: relative;
  height: 575px;
  overflow: hidden;
  background: #0e141c;
  clip-path: inset(0 0 100% 0);
  animation: photoOpen 1.05s cubic-bezier(0.2, 0.75, 0.25, 1) 0.38s forwards;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.06);
  transform: scale(1.09);
  animation: photoSettle 1.7s cubic-bezier(0.2, 0.75, 0.25, 1) 0.38s forwards;
}
.hero-photo .frame-corner,
.hero-photo .photo-index {
  opacity: 0;
  animation: fadeIn 0.6s ease 1.15s forwards;
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.0745098039);
  pointer-events: none;
}

.frame-corner {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 53px;
  height: 53px;
  border-top: 3px solid #b7d2ff;
  border-right: 3px solid #b7d2ff;
}

.photo-index {
  position: absolute;
  bottom: 26px;
  left: 27px;
  display: flex;
  align-items: center;
  gap: 17px;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.17em;
  text-shadow: 0 1px 8px #000;
}
.photo-index::before {
  content: "";
  width: 45px;
  height: 1px;
  background: #b7d2ff;
}

@keyframes photoOpen {
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes photoSettle {
  to {
    transform: scale(1);
  }
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
/* ── entry (바로 이용하기) ────────────── */
.entry {
  border-bottom: 1px solid #2c3848;
}

.entry-in {
  display: flex;
  align-items: stretch;
}

.entry-label {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 20px 34px 20px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #b7d2ff;
  white-space: nowrap;
}

.entry-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  flex: 1;
}

.entry-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 28px 24px 26px;
  border-left: 1px solid #2c3848;
  transition: background 0.2s;
}
.entry-item b {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.04em;
  transition: color 0.2s;
}
.entry-item span {
  max-width: 240px;
  font-size: 14px;
  line-height: 1.55;
  color: #b6c0d4;
}
.entry-item em {
  margin-top: 10px;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: #b7d2ff;
}
.entry-item:hover {
  background: #0e141c;
}
.entry-item:hover b {
  color: #b7d2ff;
}

/* ── section head ─────────────────────── */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 34px;
  margin-bottom: 58px;
}
.section-head h2 {
  margin: 16px 0 0;
  font-size: clamp(33px, 3.4vw, 54px);
  font-weight: 800;
  line-height: 1.27;
  letter-spacing: -0.07em;
}
.section-head .side {
  max-width: 350px;
  font-size: 15px;
  line-height: 1.85;
  color: #b6c0d4;
}

/* ── services ─────────────────────────── */
.services {
  padding: 130px 0 138px;
  background: #10141c;
  border-bottom: 1px solid #2c3848;
}
.services .section-head {
  margin-bottom: 52px;
}

.service-wrap {
  display: grid;
  grid-template-columns: 0.32fr 0.68fr;
  min-height: 560px;
  border-top: 1px solid #3a4a60;
  border-bottom: 1px solid #3a4a60;
}

.service-tabs {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #3a4a60;
}

.service-tab {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 34px 22px 36px 4px;
  font-family: inherit;
  font-size: clamp(20px, 2.05vw, 32px);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #8494aa;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #3a4a60;
  cursor: pointer;
  transition: color 0.2s, padding-left 0.25s cubic-bezier(0.2, 0.75, 0.25, 1);
}
.service-tab .tabnum {
  align-self: flex-start;
  padding-top: 9px;
  font-size: 11px;
  letter-spacing: 0;
  color: #8094b0;
}
.service-tab .arr {
  margin-left: auto;
  font-size: 22px;
  transition: transform 0.3s cubic-bezier(0.2, 0.75, 0.25, 1);
}
.service-tab[aria-selected=true] {
  padding-left: 12px;
  color: #b7d2ff;
}
.service-tab[aria-selected=true] .arr {
  transform: rotate(-45deg);
}
.service-tab:hover {
  color: #fff;
}

/* 탭 전환 — 패널 안쪽만 페이드 (패널 자체는 display:contents) */
.panel-enter-active,
.panel-leave-active {
  transition: opacity 0.01s;
}

.panel-enter-active {
  transition-duration: 0.38s;
}
.panel-enter-active .service-detail,
.panel-enter-active .service-photo {
  transition: opacity 0.38s ease, transform 0.38s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.panel-leave-active {
  transition-duration: 0.18s;
}
.panel-leave-active .service-detail,
.panel-leave-active .service-photo {
  transition: opacity 0.18s ease;
}

.panel-enter-from .service-detail,
.panel-enter-from .service-photo {
  opacity: 0;
  transform: translateY(16px);
}

.panel-leave-to .service-detail,
.panel-leave-to .service-photo {
  opacity: 0;
}

.tab-hint {
  margin: auto 0 0;
  padding: 20px 16px 23px 4px;
  font-size: 12px;
  line-height: 1.7;
  color: #90a0b6;
}

.service-display {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 35px;
  align-items: center;
  padding: 36px 0 37px 62px;
}

.service-panel {
  display: contents;
}

.service-detail .ey {
  margin: 0 0 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #8eb6ff;
}
.service-detail h3 {
  margin: 0 0 23px;
  font-size: clamp(33px, 3.7vw, 61px);
  font-weight: 800;
  line-height: 1.26;
  letter-spacing: -0.078em;
}
.service-detail p {
  max-width: 365px;
  margin: 0 0 25px;
  font-size: 15px;
  line-height: 1.9;
  color: #b6c0d4;
}
.service-detail .inline {
  padding-bottom: 9px;
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid #b7d2ff;
  transition: color 0.2s;
}
.service-detail .inline:hover {
  color: #b7d2ff;
}

.service-list {
  max-width: 400px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
  border-top: 1px solid #334256;
}
.service-list li {
  border-bottom: 1px solid #334256;
}
.service-list a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 4px;
  font-size: 15px;
  font-weight: 700;
  color: #eef3f8;
  transition: padding-left 0.22s cubic-bezier(0.2, 0.75, 0.25, 1), color 0.2s;
}
.service-list a::before {
  content: "";
  width: 5px;
  height: 5px;
  flex-shrink: 0;
  background: #b7d2ff;
}
.service-list a::after {
  content: "↗";
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: #b7d2ff;
}
.service-list a:hover {
  padding-left: 12px;
  color: #b7d2ff;
}

.service-photo {
  height: 470px;
  overflow: hidden;
  background: #0e141c;
}
.service-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.06);
}

/* ── brand (함우리는) ─────────────────── */
.brand {
  padding: 108px 0 96px;
  border-bottom: 1px solid #2c3848;
}
.brand h2 {
  margin: 16px 0 0;
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -0.06em;
}

.brand-lead {
  max-width: 640px;
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.9;
  color: #b6c0d4;
}

.brand-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 42px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #2c3848;
}
.brand-facts li {
  padding: 26px 28px 8px 0;
  border-right: 1px solid #2c3848;
}
.brand-facts li:last-child {
  border-right: 0;
}
.brand-facts b {
  display: block;
  margin-bottom: 10px;
  font-size: 18px;
  letter-spacing: -0.04em;
}
.brand-facts span {
  display: block;
  max-width: 280px;
  font-size: 14px;
  line-height: 1.7;
  color: #b6c0d4;
}

/* ── values ───────────────────────────── */
.values {
  padding: 122px 0 130px;
}

.values-list {
  border-top: 1px solid #2c3848;
}
.values-list .value-row:nth-child(2) {
  transition-delay: 0.1s;
}
.values-list .value-row:nth-child(3) {
  transition-delay: 0.18s;
}

.value-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 340px;
  gap: 28px;
  align-items: center;
  padding: 36px 0;
  border-bottom: 1px solid #2c3848;
}

.value-no {
  padding-top: 8px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: #8eb6ff;
  align-self: start;
}

.value-copy h3 {
  margin: 0 0 10px;
  font-size: clamp(36px, 3.6vw, 56px);
  line-height: 1.18;
  letter-spacing: -0.08em;
  font-weight: 800;
}
.value-copy .short {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #d6dfeb;
}
.value-copy .desc {
  max-width: 520px;
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.9;
  color: #b6c0d4;
}

.value-visual {
  height: 210px;
  overflow: hidden;
  background: #121822;
}
.value-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(0.96) contrast(1.06);
}

.value-more {
  display: inline-block;
  padding-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid #b7d2ff;
  transition: color 0.2s;
}
.value-more::after {
  content: " ↗";
}
.value-more:hover {
  color: #b7d2ff;
}

/* ── why ──────────────────────────────── */
.why {
  padding: 138px 0 145px;
}

.why-in {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 7vw;
}

.why h2 {
  margin: 16px 0 22px;
  font-size: clamp(39px, 4.3vw, 70px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.076em;
}
.why h2 .line {
  color: #b7d2ff;
}

.why-left p {
  max-width: 350px;
  font-size: 15px;
  line-height: 1.9;
  color: #b6c0d4;
}

.why-list {
  border-top: 1px solid #2c3848;
}

.why-item {
  display: grid;
  grid-template-columns: 55px 1fr;
  gap: 18px;
  padding: 25px 0;
  border-bottom: 1px solid #2c3848;
}
.why-item .number {
  padding-top: 4px;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #8eb6ff;
}
.why-item b {
  font-size: 21px;
  letter-spacing: -0.05em;
}
.why-item p {
  margin: 7px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: #b6c0d4;
}

/* ── process ──────────────────────────── */
.process {
  padding: 98px 0 106px;
  background: #121822;
  border-top: 1px solid #2c3848;
  border-bottom: 1px solid #2c3848;
}
.process h2 {
  margin: 14px 0 44px;
  font-size: clamp(35px, 3.4vw, 54px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.07em;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #3a4a60;
}

.step {
  padding: 28px 23px 10px 0;
}
.step .n {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.11em;
  color: #b7d2ff;
}
.step h3 {
  margin: 30px 0 12px;
  font-size: 20px;
  letter-spacing: -0.04em;
}
.step p:last-child {
  max-width: 195px;
  font-size: 13px;
  line-height: 1.8;
  color: #b6c0d4;
}

/* ── final ────────────────────────────── */
.final {
  position: relative;
  padding: 155px 0 130px;
  overflow: hidden;
}
.final .home-wrap {
  position: relative;
  z-index: 1;
}
.final .shape {
  position: absolute;
  top: 80px;
  right: 6%;
  width: 250px;
  height: 250px;
  border: 1px solid #243e68;
  opacity: 0.45;
  transform: rotate(27deg);
  pointer-events: none;
}
.final .small {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #8eb6ff;
}
.final h2 {
  margin: 26px 0 20px;
  font-size: clamp(55px, 7.7vw, 125px);
  font-weight: 900;
  line-height: 1.23;
  letter-spacing: -0.085em;
}
.final h2 em {
  font-style: normal;
  color: #b7d2ff;
}
.final .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
}

.final > .home-wrap > p:not(.small):not(.photo-note) {
  margin-bottom: 37px;
  font-size: 18px;
  line-height: 1.8;
  color: #b6c0d4;
}

.photo-note {
  margin-top: 28px;
  font-size: 12px;
  color: #7e8ea4;
}

/* ── reveal ───────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ── 반응형 ───────────────────────────── */
@media (max-width: 1100px) {
  .hero {
    min-height: auto;
  }
  .hero-in {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-top: 128px;
    padding-bottom: 56px;
  }
  .hero h1 {
    font-size: clamp(42px, 6vw, 64px);
  }
  .hero-photo {
    max-width: 760px;
    height: 380px;
  }
  .entry-in {
    display: block;
  }
  .entry-label {
    padding: 18px 0 0;
  }
  .entry-items {
    grid-template-columns: 1fr;
    margin-top: 8px;
    border-top: 1px solid #2c3848;
  }
  .entry-item {
    padding: 20px 2px;
    border-left: 0;
    border-bottom: 1px solid #2c3848;
  }
  .brand-facts {
    grid-template-columns: 1fr;
  }
  .brand-facts li {
    padding: 22px 0;
    border-right: 0;
    border-bottom: 1px solid #2c3848;
  }
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1180px) {
  .home-wrap {
    width: min(1390px, 100% - 68px);
  }
  .entry-item {
    padding: 18px 16px;
  }
  .service-display {
    padding-left: 37px;
  }
  .service-detail h3 {
    font-size: 42px;
  }
  .service-photo {
    height: 405px;
  }
}
@media (max-width: 880px) {
  .home-wrap {
    width: calc(100% - 48px);
  }
  .hero {
    min-height: auto;
  }
  .hero-in {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-top: 126px;
    padding-bottom: 64px;
  }
  .hero h1 {
    font-size: clamp(38px, 6.4vw, 52px);
  }
  .hero-photo {
    max-width: 640px;
    height: 300px;
  }
  .entry-in {
    display: block;
  }
  .entry-label {
    padding: 16px 0 0;
  }
  .entry-items {
    grid-template-columns: 1fr;
    margin-top: 10px;
    border-top: 1px solid #2c3848;
  }
  .entry-item {
    padding: 15px 2px;
    border-left: 0;
    border-bottom: 1px solid #2c3848;
  }
  .entry-item:hover {
    background: transparent;
  }
  .values, .why, .services {
    padding-top: 98px;
    padding-bottom: 100px;
  }
  .brand {
    padding: 84px 0 72px;
  }
  .brand-facts {
    grid-template-columns: 1fr;
  }
  .brand-facts li {
    padding: 22px 0;
    border-right: 0;
    border-bottom: 1px solid #2c3848;
  }
  .service-wrap {
    grid-template-columns: 1fr;
  }
  .service-tabs {
    flex-direction: row;
    gap: 18px;
    border-right: 0;
    border-bottom: 1px solid #3a4a60;
  }
  .service-tab {
    flex: 1;
    padding: 20px 12px;
    font-size: 23px;
    border: 0;
  }
  .tab-hint {
    display: none;
  }
  .service-display {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 28px 0 8px;
  }
  .service-photo {
    height: 260px;
  }
  .value-row {
    grid-template-columns: 62px minmax(0, 1fr);
  }
  .value-no {
    padding-top: 12px;
  }
  .value-visual {
    grid-column: 1/-1;
    width: min(100%, 240px);
    height: 136px;
    margin: 8px 0 0;
  }
  .why-in {
    display: block;
  }
  .why-left {
    margin-bottom: 44px;
  }
  .why-left p {
    margin-bottom: 0;
  }
  .steps {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 17px;
  }
}
@media (max-width: 590px) {
  .home-wrap {
    width: calc(100% - 38px);
  }
  .hero-in {
    gap: 32px;
    padding: 104px 0 48px;
  }
  .hero-kicker {
    gap: 9px;
    margin-bottom: 22px;
    margin-bottom: 22px;
    font-size: 12px;
    line-height: 1.5;
  }
  .kicker-line {
    width: 19px;
    margin-right: 9px;
  }
  .hero h1 {
    margin-bottom: 18px;
    font-size: clamp(32px, 9vw, 42px);
    line-height: 1.22;
  }
  .hero-desc {
    font-size: 14px;
    line-height: 1.9;
  }
  .hero-actions,
  .final .buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .home .btn {
    flex: none;
    gap: 12px;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 48px;
    padding: 14px 16px;
    font-size: 15px;
  }
  .hero-photo {
    height: 220px;
  }
  .photo-index {
    right: 16px;
    left: 16px;
    max-width: none;
    font-size: 11px;
    letter-spacing: 0.06em;
  }
  .entry-item {
    gap: 6px;
    min-height: 48px;
  }
  .entry-item b {
    font-size: 18px;
  }
  .entry-item span {
    max-width: none;
    font-size: 13px;
  }
  .values, .services, .why {
    padding: 85px 0;
  }
  .brand {
    padding: 72px 0 56px;
  }
  .brand h2 {
    font-size: 32px;
  }
  .brand-lead {
    font-size: 14px;
  }
  .section-head {
    display: block;
    margin-bottom: 38px;
  }
  .section-head h2 {
    font-size: 36px;
  }
  .section-head .side {
    margin-top: 18px;
    font-size: 14px;
  }
  .value-row {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 34px 0 32px;
  }
  .value-no {
    padding-top: 0;
  }
  .value-copy h3 {
    margin-bottom: 9px;
    font-size: 32px;
  }
  .value-copy .short {
    font-size: 15px;
  }
  .value-copy .desc {
    font-size: 13px;
  }
  .value-visual {
    width: min(100%, 240px);
    height: 136px;
  }
  .service-wrap {
    min-height: auto;
  }
  .service-display {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 26px;
    padding: 29px 0;
  }
  .service-detail h3 {
    font-size: 36px;
  }
  .service-detail p {
    font-size: 14px;
  }
  .service-photo {
    height: 270px;
  }
  .service-tabs {
    flex-direction: column;
    gap: 0;
  }
  .service-tab {
    flex: none;
    width: 100%;
    min-height: 52px;
    padding: 16px 4px;
    font-size: 18px;
    border-bottom: 1px solid #3a4a60;
  }
  .service-tab .arr {
    font-size: 16px;
  }
  .why h2 {
    font-size: 39px;
  }
  .why-item b {
    font-size: 19px;
  }
  .process {
    padding: 78px 0 87px;
  }
  .process h2 {
    font-size: 36px;
  }
  .steps {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .step {
    padding: 20px 0 23px;
    border-bottom: 1px solid #334256;
  }
  .step h3 {
    margin: 10px 0 7px;
  }
  .step p:last-child {
    max-width: none;
    margin: 0;
  }
  .final {
    padding: 98px 0 96px;
  }
  .final h2 {
    font-size: clamp(32px, 8.6vw, 46px);
  }
  .final .shape {
    display: none;
  }
  .final > .home-wrap > p:not(.small):not(.photo-note) {
    font-size: 15px;
  }
  .photo-note {
    margin-top: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .home .btn,
  .home .btn span[aria-hidden],
  .entry-item,
  .service-tab,
  .service-tab .arr,
  .service-list a,
  .service-detail .inline {
    transition: none;
  }
  .hero-kicker,
  .hero h1,
  .hero-desc,
  .hero-actions {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .hero-photo {
    clip-path: none;
    animation: none;
  }
  .hero-photo img {
    transform: none;
    animation: none;
  }
  .hero-photo .frame-corner,
  .hero-photo .photo-index {
    opacity: 1;
    animation: none;
  }
  .panel-enter-active,
  .panel-leave-active,
  .panel-enter-active .service-detail,
  .panel-enter-active .service-photo,
  .panel-leave-active .service-detail,
  .panel-leave-active .service-photo {
    transition: none;
  }
}
/* ── 가독성과 편집 리듬 ─────────────────── */
.home-wrap {
  width: min(1280px, 100% - 96px);
}

.hero-in {
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
  gap: clamp(54px, 6vw, 96px);
  padding-top: 142px;
  padding-bottom: 74px;
}

.hero h1 {
  max-width: 720px;
  margin-bottom: 28px;
  font-size: clamp(52px, 5vw, 82px);
}

.hero-desc {
  max-width: 610px;
  margin-bottom: 28px;
  line-height: 1.8;
}

.hero-photo {
  height: clamp(470px, 40vw, 570px);
}

.hero-criteria {
  max-width: 560px;
}

.entry-in {
  grid-template-columns: 140px minmax(0, 1fr);
}

.entry-item {
  min-width: 0;
}
.entry-item span {
  max-width: 230px;
  line-height: 1.55;
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: clamp(42px, 7vw, 100px);
  align-items: end;
}
.section-head h2 {
  max-width: 760px;
}
.section-head .side {
  max-width: 360px;
  padding-bottom: 4px;
}

.brand > .home-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: clamp(56px, 9vw, 140px);
  align-items: end;
}

.brand .sup {
  grid-column: 1/-1;
  margin-bottom: -14px;
}

.brand h2 {
  margin-bottom: 0;
}

.brand-lead {
  margin: 0 0 5px;
  max-width: 520px;
  font-size: 17px;
  line-height: 1.85;
}

.values-list {
  border-color: #3a4a60;
}

.value-row {
  grid-template-columns: 122px minmax(0, 1fr) minmax(300px, 390px);
  gap: clamp(28px, 4vw, 64px);
  min-height: 286px;
  padding: 38px 0;
}

.value-copy {
  max-width: 590px;
}
.value-copy h3 {
  font-size: clamp(38px, 3.4vw, 54px);
}
.value-copy .desc {
  max-width: 560px;
  line-height: 1.8;
}

.value-visual {
  height: 220px;
}

.service-wrap {
  grid-template-columns: minmax(250px, 0.3fr) minmax(0, 0.7fr);
}

.service-display {
  grid-template-columns: minmax(300px, 1.08fr) minmax(280px, 0.92fr);
  gap: clamp(30px, 4vw, 58px);
  padding: 42px 0 42px clamp(36px, 4.5vw, 68px);
}

.service-detail h3 {
  font-size: clamp(38px, 3.7vw, 58px);
}
.service-detail p {
  max-width: 420px;
  line-height: 1.8;
}

.why-in {
  grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(64px, 9vw, 140px);
}

.why-left p {
  max-width: 390px;
  line-height: 1.85;
}

.why-item {
  grid-template-columns: 62px minmax(0, 1fr);
  padding: 27px 0;
}
.why-item p {
  max-width: 590px;
}

.process h2 {
  max-width: 720px;
}

.steps {
  gap: 0;
}

.step {
  min-height: 210px;
  padding: 28px 28px 18px 0;
  border-right: 1px solid #334256;
}
.step:not(:first-child) {
  padding-left: 28px;
}
.step:last-child {
  border-right: 0;
}
.step p:last-child {
  max-width: 220px;
}

.final > .home-wrap {
  max-width: 1120px;
  margin-left: max(48px, (100% - 1280px) / 2);
}

.final > .home-wrap > p:not(.small):not(.photo-note) {
  max-width: 560px;
}

@media (max-width: 1100px) {
  .home-wrap {
    width: calc(100% - 68px);
  }
  .hero-in {
    grid-template-columns: 1fr;
    gap: 42px;
    padding-top: 120px;
  }
  .hero-left {
    max-width: 820px;
  }
  .hero-photo {
    width: min(100%, 820px);
    max-width: none;
    height: 390px;
  }
  .brand > .home-wrap {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .brand .sup {
    margin-bottom: 0;
  }
  .brand-lead {
    max-width: 680px;
  }
  .value-row {
    grid-template-columns: 110px minmax(0, 1fr) minmax(270px, 330px);
    gap: 30px;
  }
  .final > .home-wrap {
    margin-inline: auto;
  }
}
@media (max-width: 900px) {
  .home-wrap {
    width: calc(100% - 48px);
  }
  .section-head {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .section-head .side {
    max-width: 620px;
    padding-bottom: 0;
  }
  .value-row {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 24px;
  }
  .value-visual {
    grid-column: 1/-1;
    width: min(100%, 240px);
    height: 136px;
    margin: 8px 0 0;
  }
  .service-wrap {
    grid-template-columns: 1fr;
  }
  .service-display {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.8fr);
    padding: 36px 0;
  }
  .why-in {
    display: block;
  }
  .why-left {
    max-width: 650px;
    margin-bottom: 48px;
  }
}
@media (max-width: 680px) {
  .home-wrap {
    width: calc(100% - 38px);
  }
  .hero-in {
    gap: 30px;
    padding-top: 96px;
    padding-bottom: 42px;
  }
  .hero h1 {
    margin-bottom: 20px;
    font-size: clamp(36px, 10.2vw, 48px);
  }
  .hero-desc {
    font-size: 15px;
  }
  .hero-desc br {
    display: none;
  }
  .hero-photo {
    height: 230px;
  }
  .hero-criteria {
    margin-top: 26px;
  }
  .section-head h2,
  .brand h2,
  .process h2 {
    font-size: 34px;
    line-height: 1.28;
  }
  .brand-lead {
    font-size: 15px;
  }
  .value-row {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 12px;
    padding: 30px 0;
  }
  .value-copy h3 {
    font-size: 34px;
  }
  .value-visual {
    width: min(100%, 240px);
    height: 136px;
    margin: 8px 0 0;
  }
  .service-display {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    padding: 30px 0;
  }
  .service-detail h3 {
    font-size: 36px;
  }
  .service-photo {
    height: 250px;
  }
  .why h2 {
    font-size: 38px;
  }
  .steps {
    display: block;
  }
  .step {
    min-height: 0;
    padding: 21px 0 24px;
    border-right: 0;
    border-bottom: 1px solid #334256;
  }
  .step:not(:first-child) {
    padding-left: 0;
  }
  .step p:last-child {
    max-width: 420px;
  }
  .final > .home-wrap {
    width: calc(100% - 38px);
  }
}
/* ── 단일 페이지 설명형 콘텐츠 ───────────── */
.entry-item {
  cursor: default;
  transition: none;
}
.entry-item:hover {
  background: transparent;
}
.entry-item:hover b {
  color: #eef3f8;
}

.value-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.value-tags li {
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #d6e2f2;
  background: #121822;
  border: 1px solid #3a4a60;
}

.service-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 4px;
  font-size: 15px;
  font-weight: 700;
  color: #eef3f8;
}
.service-list li::before {
  content: "";
  width: 5px;
  height: 5px;
  flex-shrink: 0;
  background: #b7d2ff;
}

/* ── 운영 분석형 랜딩 보강 ───────────────── */
.hero h1 {
  max-width: 760px;
  font-size: clamp(54px, 5.35vw, 88px);
  line-height: 1.12;
  letter-spacing: -0.068em;
}

.hero-desc {
  max-width: 640px;
}

.hero-photo {
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.28);
}
.hero-photo img {
  object-position: 52% center;
}

.hero-criteria {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 640px;
  margin: 42px 0 0;
  padding: 21px 0 0;
  list-style: none;
  border-top: 1px solid #2c3848;
}
.hero-criteria li {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: #d6dfeb;
}
.hero-criteria span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #8eb6ff;
}

.services {
  padding-top: 112px;
  padding-bottom: 118px;
}

.brand {
  padding-top: 96px;
  padding-bottom: 86px;
  color: #101820;
  background: #e7eef6;
  border-color: #c5d2e4;
}
.brand .sup {
  color: #1a5fa8;
}
.brand h2 {
  max-width: 760px;
  font-size: clamp(38px, 4.1vw, 64px);
  line-height: 1.2;
}
.brand h2 span {
  color: #1a5fa8;
}

.brand-lead {
  max-width: 760px;
  color: #3c4a5e;
}

.brand-facts {
  border-color: #c5d2e4;
}
.brand-facts li {
  min-height: 164px;
  border-color: #c5d2e4;
}
.brand-facts small {
  display: block;
  margin-bottom: 24px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #1a5fa8;
}
.brand-facts b {
  font-size: 21px;
}
.brand-facts span {
  color: #445266;
}

.values {
  padding-top: 108px;
  padding-bottom: 112px;
}

.value-row {
  grid-template-columns: 128px minmax(0, 1fr) 340px;
}

.value-no {
  white-space: nowrap;
}

.value-visual {
  position: relative;
  border: 1px solid rgba(142, 182, 255, 0.22);
}
.value-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  pointer-events: none;
}

.why {
  padding-top: 118px;
  padding-bottom: 124px;
}

.process {
  padding-top: 88px;
  padding-bottom: 94px;
}

.final {
  padding-top: 126px;
  padding-bottom: 116px;
}
.final h2 {
  max-width: 1050px;
  font-size: clamp(52px, 7vw, 108px);
}

@media (max-width: 1100px) {
  .hero-criteria {
    margin-top: 34px;
  }
}
@media (max-width: 880px) {
  .hero h1 {
    font-size: clamp(42px, 8.4vw, 62px);
  }
  .hero-desc br {
    display: none;
  }
  .services,
  .values,
  .why {
    padding-top: 88px;
    padding-bottom: 92px;
  }
  .value-row {
    grid-template-columns: 108px minmax(0, 1fr);
  }
  .brand-facts li {
    min-height: auto;
  }
}
@media (max-width: 590px) {
  .hero h1 {
    font-size: clamp(36px, 10.4vw, 44px);
    line-height: 1.16;
  }
  .hero-criteria {
    gap: 12px;
    margin-top: 30px;
  }
  .hero-criteria li {
    font-size: 11px;
    line-height: 1.45;
  }
  .hero-photo img {
    object-position: 58% center;
  }
  .services,
  .values,
  .why {
    padding-top: 74px;
    padding-bottom: 78px;
  }
  .brand {
    padding-top: 66px;
    padding-bottom: 48px;
  }
  .brand h2 {
    font-size: 34px;
  }
  .brand-facts {
    margin-top: 34px;
  }
  .brand-facts small {
    margin-bottom: 15px;
  }
  .final {
    padding-top: 88px;
    padding-bottom: 88px;
  }
}
/* ── 메인 히어로 영상 (풀블리드) ─────────────────
 * 영상을 배경으로 꽉 채우고, 그 위에 히어로 카피를 올린다.
 * 기존 2단 그리드 오버라이드를 확실히 덮기 위해 .home 하위로 명시.
 */
.home .hero--video {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(600px, 88vh, 860px);
  overflow: hidden;
  background: #07090e;
}

.home .hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  filter: saturate(0.78);
}

.home .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 9, 14, 0.94) 0%, rgba(7, 9, 14, 0.66) 36%, rgba(7, 9, 14, 0.24) 66%, rgba(7, 9, 14, 0.46) 100%), linear-gradient(0deg, rgba(7, 9, 14, 0.82) 0%, rgba(7, 9, 14, 0.06) 44%);
}

.home .hero--video .hero-in {
  position: relative;
  z-index: 2;
  display: block;
  grid-template-columns: minmax(0, 1fr);
  max-width: 100%;
  margin-inline: auto;
  padding-top: 0;
  padding-bottom: 0;
}

.home .hero--video .hero-left {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.home .hero--video h1,
.home .hero--video .hero-desc,
.home .hero--video .hero-kicker,
.home .hero--video .hero-actions,
.home .hero--video .hero-criteria {
  max-width: 100%;
  min-width: 0;
}

/* 음수 자간이 마침표를 박스 밖으로 밀어 잘리지 않게 한다 */
.home .hero--video h1 {
  padding-right: 0.14em;
  overflow-wrap: break-word;
}

@media (max-width: 680px) {
  .home .hero--video {
    min-height: clamp(520px, 86vh, 720px);
  }
  .home .hero-overlay {
    background: linear-gradient(90deg, rgba(7, 9, 14, 0.9) 0%, rgba(7, 9, 14, 0.6) 55%, rgba(7, 9, 14, 0.5) 100%), linear-gradient(0deg, rgba(7, 9, 14, 0.85) 0%, rgba(7, 9, 14, 0.12) 50%);
  }
}
/* 모션 최소화 선호 시 영상은 정지(첫 프레임/포스터 유지) */
@media (prefers-reduced-motion: reduce) {
  .home .hero-video {
    animation: none;
  }
  .home .hero--video {
    background: radial-gradient(120% 90% at 18% 30%, rgba(80, 140, 255, 0.14) 0%, rgba(7, 9, 14, 0) 60%), #07090e;
  }
}
/* ── 휴대폰 ─────────────────────────────────
 * --fit 은 390×844에서 1px이다.
 * 가로가 줄거나 세로가 낮아지면 글자·버튼·여백이 같은 비율로 줄어든다.
 */
@media (max-width: 720px) {
  .home {
    font-size: calc(var(--fit) * 16);
  }
  .home-wrap {
    width: calc(100% - var(--fit) * 40);
  }
  .home .sup {
    font-size: calc(var(--fit) * 11);
    letter-spacing: 0.16em;
    line-height: 1.4;
  }
  .home .hero--video {
    align-items: center;
    min-height: 100svh;
    min-height: 100dvh;
    padding-top: calc(var(--fit) * 52);
    box-sizing: border-box;
  }
  .home .hero-overlay {
    background: linear-gradient(180deg, rgba(7, 9, 14, 0.72) 0%, rgba(7, 9, 14, 0.28) 28%, rgba(7, 9, 14, 0.38) 62%, rgba(7, 9, 14, 0.88) 100%), linear-gradient(90deg, rgba(7, 9, 14, 0.55) 0%, rgba(7, 9, 14, 0.28) 100%);
  }
  .home .hero--video .hero-in {
    padding-top: calc(var(--fit) * 24);
    padding-bottom: calc(var(--fit) * 32);
  }
  .home .hero-kicker {
    margin-bottom: calc(var(--fit) * 16);
    font-size: calc(var(--fit) * 13);
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: #e6eef8;
  }
  .home .kicker-line {
    width: calc(var(--fit) * 28);
    margin: 0 0 calc(var(--fit) * 12);
  }
  .home .hero--video h1 {
    margin-bottom: calc(var(--fit) * 16);
    padding-right: 0.08em;
    font-size: calc(var(--fit) * 32);
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -0.045em;
  }
  .home .hero-desc {
    margin-bottom: 0;
    font-size: calc(var(--fit) * 15);
    line-height: 1.75;
    color: #c6d2e4;
  }
  .home .hero-desc br {
    display: block;
    margin-top: 2px;
    content: "";
  }
  .home .hero-criteria {
    gap: calc(var(--fit) * 10);
    max-width: none;
    margin-top: calc(var(--fit) * 22);
    padding-top: calc(var(--fit) * 14);
  }
  .home .hero-criteria li {
    gap: calc(var(--fit) * 6);
    font-size: calc(var(--fit) * 13.5);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.03em;
  }
  .home .hero-criteria span {
    font-size: calc(var(--fit) * 11);
    letter-spacing: 0.12em;
  }
  .home .entry-in {
    display: block;
    padding-block: 8px 4px;
  }
  .home .entry-label {
    padding: calc(var(--fit) * 16) 0 calc(var(--fit) * 4);
    font-size: calc(var(--fit) * 11);
    letter-spacing: 0.16em;
  }
  .home .entry-items {
    grid-template-columns: 1fr;
    margin-top: 8px;
    border-top: 1px solid #2c3848;
  }
  .home .entry-item {
    gap: 5px;
    min-height: 0;
    padding: calc(var(--fit) * 14) calc(var(--fit) * 2) calc(var(--fit) * 15);
    border-left: 0;
    border-bottom: 1px solid #2c3848;
  }
  .home .entry-item b {
    font-size: calc(var(--fit) * 17);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.35;
  }
  .home .entry-item span {
    max-width: none;
    font-size: calc(var(--fit) * 14);
    line-height: 1.6;
  }
  .home .brand {
    padding: calc(var(--fit) * 48) 0 calc(var(--fit) * 40);
  }
  .home .brand > .home-wrap {
    display: block;
  }
  .home .brand .sup {
    margin-bottom: 14px;
  }
  .home .brand h2,
  .home .section-head h2,
  .home .process h2 {
    font-size: calc(var(--fit) * 27);
    font-weight: 800;
    line-height: 1.34;
    letter-spacing: -0.04em;
  }
  .home .brand h2 {
    margin-bottom: 16px;
  }
  .home .brand-lead,
  .home .section-head .side,
  .home .why-left p {
    max-width: none;
    margin-top: 0;
    font-size: calc(var(--fit) * 15);
    line-height: 1.8;
  }
  .home .values,
  .home .why {
    padding: calc(var(--fit) * 52) 0 calc(var(--fit) * 44);
  }
  .home .section-head {
    display: block;
    margin-bottom: 8px;
  }
  .home .section-head .side {
    margin-top: 14px;
    padding-bottom: 0;
  }
  .home .value-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: calc(var(--fit) * 22) 0 calc(var(--fit) * 20);
  }
  .home .value-no {
    padding-top: 0;
    font-size: calc(var(--fit) * 12);
    letter-spacing: 0.12em;
    white-space: normal;
  }
  .home .value-copy h3 {
    margin-bottom: 8px;
    font-size: calc(var(--fit) * 30);
    line-height: 1.2;
    letter-spacing: -0.045em;
  }
  .home .value-copy .short {
    margin-bottom: 8px;
    font-size: calc(var(--fit) * 15);
    line-height: 1.45;
    letter-spacing: -0.03em;
  }
  .home .value-copy .desc {
    max-width: none;
    margin-bottom: 0;
    font-size: calc(var(--fit) * 14.5);
    line-height: 1.75;
  }
  .home .value-tags {
    gap: 6px;
    margin-top: 14px;
  }
  .home .value-tags li {
    padding: 6px 9px;
    font-size: calc(var(--fit) * 12);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
  }
  .home .value-visual {
    display: none;
  }
  .home .why-in {
    display: block;
  }
  .home .why-left {
    max-width: none;
    margin-bottom: 28px;
  }
  .home .why h2 {
    margin: 12px 0 14px;
    font-size: calc(var(--fit) * 28);
    line-height: 1.32;
    letter-spacing: -0.045em;
  }
  .home .why-item {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px;
    padding: 18px 0;
  }
  .home .why-item .number {
    padding-top: 3px;
    font-size: calc(var(--fit) * 12);
    letter-spacing: 0.06em;
  }
  .home .why-item b {
    font-size: calc(var(--fit) * 16.5);
    line-height: 1.4;
    letter-spacing: -0.03em;
  }
  .home .why-item p {
    max-width: none;
    margin-top: 5px;
    font-size: calc(var(--fit) * 14);
    line-height: 1.7;
  }
  .home .process {
    padding: calc(var(--fit) * 48) 0 calc(var(--fit) * 40);
  }
  .home .process h2 {
    margin: 12px 0 8px;
  }
  .home .steps {
    display: block;
    margin-top: 8px;
  }
  .home .step {
    min-height: 0;
    padding: calc(var(--fit) * 16) 0 calc(var(--fit) * 18);
    border-right: 0;
    border-bottom: 1px solid #334256;
  }
  .home .step:not(:first-child) {
    padding-left: 0;
  }
  .home .step .n {
    font-size: calc(var(--fit) * 12);
    letter-spacing: 0.1em;
  }
  .home .step h3 {
    margin: calc(var(--fit) * 8) 0 calc(var(--fit) * 6);
    font-size: calc(var(--fit) * 17);
    line-height: 1.35;
    letter-spacing: -0.035em;
  }
  .home .step p:last-child {
    max-width: none;
    font-size: calc(var(--fit) * 14);
    line-height: 1.7;
  }
  .home .final {
    padding: calc(var(--fit) * 56) 0 calc(var(--fit) * 48);
  }
  .home .final h2 {
    font-size: calc(var(--fit) * 34);
    line-height: 1.22;
    letter-spacing: -0.045em;
  }
  .home .final .small {
    font-size: calc(var(--fit) * 11);
    letter-spacing: 0.14em;
  }
  .home .final .shape {
    display: none;
  }
  .home .final > .home-wrap {
    width: calc(100% - var(--fit) * 40);
    max-width: none;
    margin-inline: auto;
  }
  .home .final > .home-wrap > p:not(.small):not(.photo-note) {
    max-width: none;
    margin-bottom: 0;
    font-size: calc(var(--fit) * 15);
    line-height: 1.75;
  }
  .home .photo-note {
    margin-top: calc(var(--fit) * 18);
    font-size: calc(var(--fit) * 12);
    line-height: 1.65;
  }
  .home .btn {
    gap: calc(var(--fit) * 16);
    min-width: 0;
    min-height: calc(var(--fit) * 44);
    padding: calc(var(--fit) * 12) calc(var(--fit) * 16);
    font-size: calc(var(--fit) * 14);
  }
}
/* 홈을 스크롤할 때 남는 이끼색 크롬을 히어로와 같은 푸른색으로 맞춘다 */
.site-app:has(.home) .portal-header.is-landing {
  background: rgba(7, 9, 14, 0.78);
}
.site-app:has(.home) .portal-header.is-landing .portal-header__menu-link::after {
  background: #b7d2ff;
}
.site-app:has(.home) .portal-header.is-landing .portal-header__menu-link:hover,
.site-app:has(.home) .portal-header.is-landing .portal-header__menu-item.is-active .portal-header__menu-link,
.site-app:has(.home) .portal-header.is-landing .portal-header__menu-link.is-on {
  color: #b7d2ff;
}
.site-app:has(.home) .portal-header.is-landing .portal-drawer {
  background: #10141c;
  color: #eef3f8;
}
.site-app:has(.home) .portal-header.is-landing .portal-drawer__brand,
.site-app:has(.home) .portal-header.is-landing .portal-drawer__link {
  color: #eef3f8;
}
.site-app:has(.home) .portal-header.is-landing .portal-drawer__link:hover,
.site-app:has(.home) .portal-header.is-landing .portal-drawer__link.is-on {
  color: #b7d2ff;
}
.site-app:has(.home) .portal-header.is-landing .portal-drawer__foot .portal-btn--primary {
  color: #07090e;
  background: #b7d2ff;
  border-color: #b7d2ff;
}
.site-app:has(.home) .portal-header__menu-panel {
  background: #10141c;
}
.site-app:has(.home) .portal-header__menu-panel a:hover,
.site-app:has(.home) .portal-header__menu-panel a.is-on {
  color: #b7d2ff;
}
.site-app:has(.home) .scroll-jump {
  color: #07090e;
  background: #b7d2ff;
}
.site-app:has(.home) .scroll-jump:hover {
  background: #dceaff;
}
.site-app:has(.home) .help-dock__launch {
  color: #07090e;
  background: #b7d2ff;
  border-color: #b7d2ff;
}
.site-app:has(.home) .help-dock__launch:hover {
  background: #dceaff;
}
.site-app:has(.home) .portal-footer {
  background: #07090e;
  color: #9aa6b8;
  border-top-color: #2c3848;
}
.site-app:has(.home) .portal-footer .portal-footer__cta,
.site-app:has(.home) .portal-footer .portal-footer__main,
.site-app:has(.home) .portal-footer .portal-footer__bottom {
  background: #07090e;
  border-color: #2c3848;
}
.site-app:has(.home) .portal-footer .portal-footer__brand,
.site-app:has(.home) .portal-footer .portal-footer__col-title,
.site-app:has(.home) .portal-footer .portal-footer__contact span,
.site-app:has(.home) .portal-footer .portal-footer__contact strong,
.site-app:has(.home) .portal-footer .portal-footer__hours {
  color: #eef3f8;
}
.site-app:has(.home) .portal-footer .portal-footer__org,
.site-app:has(.home) .portal-footer .portal-footer__contact,
.site-app:has(.home) .portal-footer .portal-footer__biz,
.site-app:has(.home) .portal-footer .portal-footer__copy {
  color: #7e8ea4;
}
.site-app:has(.home) .portal-footer a {
  color: #9aa6b8;
}
.site-app:has(.home) .portal-footer .portal-footer__mall-link {
  color: #07090e;
  background: #b7d2ff;
  border-color: #b7d2ff;
}
.site-app:has(.home) .portal-footer .portal-footer__mall-link:hover {
  color: #07090e;
  background: #dceaff;
  border-color: #dceaff;
}
.site-app:has(.home) .portal-footer .portal-footer__contact a {
  color: #d5deea;
}
.site-app:has(.home) .portal-footer .portal-footer__contact a:hover {
  color: #b7d2ff;
}

.terms-page__shell {
  max-width: 860px;
}
.terms-page__head {
  margin-bottom: 28px;
}
.terms-page__meta {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1a5fa8;
}
.terms-page__title {
  margin: 0 0 8px;
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1b1f24;
}
.terms-page__desc {
  margin: 0 0 8px;
  font-size: 1rem;
  line-height: 1.75;
  color: #5e6671;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
  text-wrap: balance;
}
.terms-page__date {
  margin: 0;
  font-size: 0.875rem;
  color: #8b929c;
}
.terms-page__docs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.terms-page__doc {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #d8dce2;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #383d44;
  text-decoration: none;
}
.terms-page__doc:hover {
  border-color: #1a5fa8;
  color: #1a5fa8;
}
.terms-page__doc.is-on {
  border-color: #1a5fa8;
  background: #eaf1f9;
  color: #1a5fa8;
}
.terms-page__panel {
  border: 1px solid #e9ebef;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(20, 32, 56, 0.1);
  overflow: hidden;
}
.terms-page__table-wrap {
  overflow-x: auto;
  border-bottom: 1px solid #e9ebef;
}
.terms-page__table-caption {
  padding: 16px 24px;
  text-align: left;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #1b1f24;
  border-bottom: 1px solid #e9ebef;
  background: rgba(244, 246, 249, 0.5);
}
.terms-page__table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.terms-page__table th,
.terms-page__table td {
  padding: 14px 20px;
  border-bottom: 1px solid #e9ebef;
  text-align: left;
  vertical-align: top;
  line-height: 1.65;
  color: #2f343b;
}
.terms-page__table th {
  font-weight: 700;
  color: #1b1f24;
  background: rgba(244, 246, 249, 0.35);
}
.terms-page__table tbody tr:last-child td {
  border-bottom: 0;
}
.terms-page__cms {
  padding: clamp(24px, 4vw, 32px);
}
.terms-page__cms-body {
  margin: 0;
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: #2f343b;
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
  text-wrap: balance;
}
.terms-page__sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: clamp(24px, 4vw, 32px);
}
.terms-page__section-title {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 700;
  color: #1b1f24;
}
.terms-page__section-body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: #2f343b;
  white-space: pre-line;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
  text-wrap: balance;
}
.terms-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

@media (max-width: 640px) {
  .terms-page__actions {
    flex-direction: column;
  }
  .terms-page__actions .btn-primary,
  .terms-page__actions .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}
.site-app--landing .terms-page {
  background: #090a09;
  padding: 112px 0 80px;
  color: #f3f3e9;
}
.site-app--landing .terms-page .terms-page__meta {
  color: #b6e0c3;
  letter-spacing: 0.14em;
}
.site-app--landing .terms-page .terms-page__title {
  color: #f3f3e9;
  font-weight: 500;
  letter-spacing: -0.04em;
}
.site-app--landing .terms-page .terms-page__desc,
.site-app--landing .terms-page .terms-page__date {
  color: rgba(243, 243, 233, 0.72);
}
.site-app--landing .terms-page .terms-page__doc {
  border-radius: 0;
  border-color: rgba(255, 255, 255, 0.18);
  background: transparent;
  color: #d4d9df;
}
.site-app--landing .terms-page .terms-page__doc:hover, .site-app--landing .terms-page .terms-page__doc.is-on {
  border-color: #b6e0c3;
  background: transparent;
  color: #b6e0c3;
}
.site-app--landing .terms-page .terms-page__panel {
  border-radius: 0;
  border-color: rgba(255, 255, 255, 0.14);
  background: #121412;
  box-shadow: none;
}
.site-app--landing .terms-page .terms-page__table-caption,
.site-app--landing .terms-page .terms-page__table th {
  color: #f3f3e9;
  background: #1a1c19;
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.site-app--landing .terms-page .terms-page__table-wrap,
.site-app--landing .terms-page .terms-page__table th,
.site-app--landing .terms-page .terms-page__table td {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.site-app--landing .terms-page .terms-page__table td,
.site-app--landing .terms-page .terms-page__cms-body,
.site-app--landing .terms-page .terms-page__section-body {
  color: rgba(243, 243, 233, 0.82);
}
.site-app--landing .terms-page .terms-page__section-title {
  color: #f3f3e9;
}
.site-app--landing .terms-page .btn-primary,
.site-app--landing .terms-page .btn-secondary {
  min-height: 48px;
  border-radius: 0;
  box-shadow: none;
  font-size: 0.875rem;
  font-weight: 700;
}
.site-app--landing .terms-page .btn-primary {
  color: #090a09;
  background: #b6e0c3;
  border-color: #b6e0c3;
}
.site-app--landing .terms-page .btn-primary:hover {
  color: #090a09;
  background: #c9ecd4;
  border-color: #c9ecd4;
  box-shadow: none;
}
.site-app--landing .terms-page .btn-secondary {
  color: #f3f3e9;
  background: transparent;
  border: 1px solid #70756a;
}
.site-app--landing .terms-page .btn-secondary:hover {
  color: #b6e0c3;
  border-color: #b6e0c3;
  background: transparent;
  box-shadow: none;
}