/* Solutions 허브(/solutions/) 전용 — 2026-10-20
   확정 디자인 원본 solutions_hub_design.dc.html의 인라인 스타일·<style> 규칙을 클래스로 옮김.
   모든 선택자는 .hub-page 아래로 스코프 → 다른 페이지 영향 없음. 이 파일은 solutions.html에서만 로드.
   main.css의 전역 * { box-sizing: border-box } 때문에 원본(content-box)의 max-width 1240px에는 좌우 padding을 더해 둠.
   색: 진녹 #0E3B2C, 금색 #F5A524, 남색 #111C3A, 크림 #FDF3E3 (원본 그대로) */

.hub-page {
  --hub-gutter: clamp(20px, 4vw, 48px);
  /* 사이트 헤더(position:fixed 플로팅 카드: top 16px + 높이 60px / 640px 이상 24px + 72px) — 첫 섹션 안쪽 여백에만 더함 */
  --hub-header: calc(16px + 60px);
  background: #ffffff;
  color: #0D0D0D;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-height: normal;  /* body의 1.65 상속 대신 원본 기본값 */
}
@media (min-width: 640px) {
  .hub-page { --hub-header: calc(24px + 72px); }
}
.hub-page h1, .hub-page h2, .hub-page h3, .hub-page p { margin: 0; color: inherit; }
.hub-page picture { display: block; width: 100%; height: 100%; }
.hub-page a:focus-visible { outline: 3px solid #F5A524; outline-offset: 3px; }

/* 페이지 안 이동(#sori, #erp)이 고정 헤더 밑에 가려지지 않게 */
.hub-page [id] { scroll-margin-top: calc(var(--hub-header) + 8px); }

/* ---------- 애니메이션 (원본 그대로, 이름만 hub- 접두) ---------- */
.hub-page .door { transition: transform .35s ease, box-shadow .35s ease; }
.hub-page .door:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -24px rgba(0,0,0,.55); }
.hub-page .door:hover .door-go { background: #F5A524; color: #0D0D0D; border-color: #F5A524; }
.hub-page .wv { transform-origin: bottom; animation: hub-swell 5s ease-in-out infinite alternate; }
@keyframes hub-swell { from { transform: scaleY(.6); } to { transform: scaleY(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .hub-page .wv { animation: none; }
  .hub-page .door, .hub-page .hub-shot-card { transition: none; }
}

/* ---------- 공통 ---------- */
.hub-page .hub-inner {
  position: relative;
  max-width: calc(1240px + 2 * var(--hub-gutter));
  margin: 0 auto;
  padding-left: var(--hub-gutter);
  padding-right: var(--hub-gutter);
}
.hub-page .hub-green { background: #0E3B2C; color: #ffffff; position: relative; overflow: hidden; }
.hub-page .hub-grid-bg {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
}
.hub-page .hub-kicker { font-family: Archivo, sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0.18em; }
.hub-page .hub-kicker-gold { font-size: 14px; letter-spacing: 0.22em; color: #F5A524; }
.hub-page .hub-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 210px; min-height: 54px; padding: 0 26px;
  font-weight: 800; font-size: 16px; text-decoration: none;
}
.hub-page .hub-actions { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 6px; }

/* ---------- 1. HERO — 두 개의 문 ---------- */
.hub-page .hub-hero-inner {
  padding-top: calc(var(--hub-header) + clamp(72px, 9vw, 120px));
  padding-bottom: clamp(64px, 8vw, 104px);
  display: flex; flex-direction: column; gap: clamp(48px, 6vw, 72px);
}
.hub-page .hub-hero-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.hub-page .hub-hero-head h1 { font-size: clamp(38px, 5.4vw, 72px); line-height: 1.16; font-weight: 800; letter-spacing: -0.035em; color: #ffffff; }
.hub-page .hub-hero-head h1 span { color: #F5A524; }
.hub-page .hub-hero-head p { max-width: 620px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.75; color: rgba(255,255,255,.78); }

.hub-page .hub-doors { display: flex; flex-wrap: wrap; gap: 28px; }
.hub-page .door {
  flex: 1 1 480px; min-width: 0;
  text-decoration: none; display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.hub-page .door-top { padding: 36px 36px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.hub-page .door-title { display: flex; flex-direction: column; gap: 10px; }
.hub-page .door-label { font-family: Archivo, sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0.16em; }
.hub-page .door-name { font-family: Archivo, sans-serif; font-size: 40px; font-weight: 900; letter-spacing: -0.02em; line-height: 1; }
.hub-page .door-line { font-size: 18px; font-weight: 700; }
.hub-page .door-go {
  flex: none; width: 52px; height: 52px; border: 1.5px solid;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.hub-page .door-chips { padding: 28px 36px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.hub-page .door-chips span { font-family: Archivo, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; padding: 6px 12px; border: 1px solid; }
.hub-page .door-visual { position: relative; margin-top: 32px; height: 340px; }

/* 문 1: SORI AI (남색) */
.hub-page .door-sori { background: #111C3A; color: #ffffff; border: 1px solid #2B3B63; }
.hub-page .door-sori:hover { color: #ffffff; }
.hub-page .door-sori .door-label { color: #8EC5FF; }
.hub-page .door-sori .door-name span { color: #8EC5FF; }
.hub-page .door-sori .door-line { color: rgba(255,255,255,.9); }
.hub-page .door-sori .door-go { border-color: rgba(255,255,255,.5); color: #ffffff; }
.hub-page .door-sori .door-chips span { border-color: #2B3B63; color: #B1C2DB; }
.hub-page .door-waves {
  position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  display: flex; align-items: flex-end; gap: 4px; padding: 0 10px; opacity: .55;
}
.hub-page .door-waves i { flex: 1; display: block; }
.hub-page .door-sori-shot {
  position: absolute; left: 36px; right: 36px; top: 0; bottom: 36px;
  background: #ffffff; overflow: hidden; box-shadow: 0 24px 50px -18px rgba(0,0,0,.6);
}
.hub-page .door-sori-shot img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top; }

/* 문 2: ERP·CRM (크림) */
.hub-page .door-erp { background: #FDF3E3; color: #0D0D0D; border: 1px solid #ecdcbd; }
.hub-page .door-erp:hover { color: #0D0D0D; }
.hub-page .door-erp .door-label { color: #A8620A; }
.hub-page .door-erp .door-line { color: #2b2b2b; }
.hub-page .door-erp .door-go { border-color: rgba(13,13,13,.4); color: #0D0D0D; }
.hub-page .door-erp .door-chips span { border-color: #e0cba3; color: #6b4a14; }
.hub-page .door-erp-shot {
  position: absolute; aspect-ratio: 16 / 10; overflow: hidden;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.35); border: 4px solid #ffffff;
}
.hub-page .door-erp-shot img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top left; }
.hub-page .door-erp-shot-1 { left: 36px; width: 58%; top: 34px; transform: rotate(-3deg); }
.hub-page .door-erp-shot-2 { right: 36px; width: 56%; top: 10px; transform: rotate(2.5deg); }
.hub-page .door-erp-shot-3 { left: 22%; width: 60%; bottom: 20px; box-shadow: 0 24px 50px -18px rgba(0,0,0,.45); }

/* ---------- 2. FLOW — 듣고 · 세우고 · 본다 ---------- */
.hub-page .hub-flow { background: #ffffff; }
.hub-page .hub-flow-inner {
  padding-top: clamp(72px, 9vw, 112px); padding-bottom: clamp(72px, 9vw, 112px);
  display: flex; flex-direction: column; align-items: center; gap: 56px; text-align: center;
}
.hub-page .hub-flow-head { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.hub-page .hub-flow-head .hub-kicker { font-size: 14px; color: #256B50; }
.hub-page .hub-flow-head h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.3; font-weight: 800; letter-spacing: -0.03em; }
.hub-page .hub-flow-row { display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; border: 1px solid rgba(13,13,13,.14); }
.hub-page .hub-flow-cell {
  flex: 1 1 300px; min-width: 0; padding: 44px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.hub-page .hub-flow-1, .hub-page .hub-flow-2 { border-right: 1px solid rgba(13,13,13,.14); }
.hub-page .hub-flow-2 { background: #faf8f2; }
.hub-page .hub-flow-num { font-family: Archivo, sans-serif; font-size: 64px; font-weight: 900; line-height: 1; letter-spacing: -0.04em; }
.hub-page .hub-flow-label { font-family: Archivo, sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0.18em; }
.hub-page .hub-flow-cell h3 { font-size: 24px; font-weight: 800; letter-spacing: normal; }
.hub-page .hub-flow-cell p { font-size: 16px; line-height: 1.7; color: #4a4a4a; }
.hub-page .hub-flow-1 .hub-flow-num { color: #111C3A; }
.hub-page .hub-flow-1 .hub-flow-label { color: #0E5FA8; }
.hub-page .hub-flow-2 .hub-flow-num { color: #0E3B2C; }
.hub-page .hub-flow-2 .hub-flow-label { color: #256B50; }
.hub-page .hub-flow-3 .hub-flow-num,
.hub-page .hub-flow-3 .hub-flow-label { color: #A8620A; }

/* ---------- 3·4. 솔루션 상세 (좌우 2단) ---------- */
.hub-page .hub-split {
  padding-top: clamp(80px, 10vw, 128px); padding-bottom: clamp(80px, 10vw, 128px);
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(40px, 6vw, 80px);
}
.hub-page .hub-split-rev { flex-wrap: wrap-reverse; }
.hub-page .hub-copy { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.hub-page .hub-copy h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.2; font-weight: 800; letter-spacing: -0.035em; }
.hub-page .hub-lead { font-size: 18px; line-height: 1.75; }

/* 3. SORI AI (남색) */
.hub-page .hub-sori { background: #111C3A; color: #ffffff; position: relative; overflow: hidden; }
.hub-page .hub-sori .hub-kicker { color: #8EC5FF; }
.hub-page .hub-sori h2 { color: #ffffff; }
.hub-page .hub-sori h2 span { color: #8EC5FF; }
.hub-page .hub-sori .hub-lead { color: #B1C2DB; }
.hub-page .hub-points { display: flex; flex-direction: column; border-top: 1px solid #2B3B63; }
.hub-page .hub-points > div { display: flex; gap: 18px; padding: 16px 0; border-bottom: 1px solid #2B3B63; font-size: 16.5px; line-height: 1.6; color: #B1C2DB; }
.hub-page .hub-points b { flex: none; width: 128px; color: #ffffff; }
.hub-page .hub-btn-sori { background: #2E7EC4; color: #ffffff; }
.hub-page .hub-btn-sori-line { border: 1.5px solid #4a5d8c; color: #ffffff; font-weight: 700; }
.hub-page .hub-btn-sori:hover, .hub-page .hub-btn-sori-line:hover { color: #ffffff; }
.hub-page .hub-shot { flex: 1 1 460px; min-width: 0; }
.hub-page .hub-sori-shot {
  aspect-ratio: 1 / 1; background: #ffffff; overflow: hidden;
  border: 1px solid #2B3B63; box-shadow: 0 30px 70px -20px rgba(0,0,0,.6);
}
.hub-page .hub-sori-shot img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top; }
.hub-page .hub-shot-note { margin-top: 12px; font-size: 13px; color: #8EA0C2; text-align: right; }

/* 4. ERP·CRM (크림) */
.hub-page .hub-erp { background: #FDF3E3; }
.hub-page .hub-erp .hub-kicker { color: #A8620A; }
.hub-page .hub-erp .hub-lead { color: #3d3d3d; }
.hub-page .hub-shots { flex: 1 1 460px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
/* 샘플 카드 — 원본엔 링크가 없지만 화면 미리보기라 각 쇼룸 샘플로 연결(지시). hover는 문 카드와 같은 떠오름 */
.hub-page .hub-shot-card {
  background: #ffffff; border: 1px solid #ecdcbd; display: flex; flex-direction: column;
  color: #0D0D0D; text-decoration: none;
  transition: transform .35s ease, box-shadow .35s ease;
}
.hub-page .hub-shot-card:hover { color: #0D0D0D; transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(0,0,0,.35); }
.hub-page .hub-shot-img { aspect-ratio: 16 / 10; overflow: hidden; }
.hub-page .hub-shot-img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top left; }
.hub-page .hub-shot-meta { padding: 12px 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hub-page .hub-shot-meta b { font-size: 15px; }
.hub-page .hub-shot-meta span { font-size: 12.5px; color: #6b4a14; }
.hub-page .hub-stats { display: flex; flex-wrap: wrap; border-top: 2px solid #0D0D0D; border-bottom: 1px solid rgba(13,13,13,.2); }
.hub-page .hub-stats > div { flex: 1 1 120px; padding: 20px 0; display: flex; flex-direction: column; gap: 4px; }
.hub-page .hub-stat-num { font-family: Archivo, sans-serif; font-size: 44px; font-weight: 900; line-height: 1; letter-spacing: -0.03em; }
.hub-page .hub-stat-num span { font-size: 26px; }
.hub-page .hub-stat-label { font-size: 14px; color: #4a4a4a; }
.hub-page .hub-btn-green { background: #0E3B2C; color: #ffffff; }
.hub-page .hub-btn-green:hover { color: #ffffff; }
.hub-page .hub-btn-green-line { border: 1.5px solid #0E3B2C; color: #0E3B2C; font-weight: 700; }
.hub-page .hub-btn-green-line:hover { color: #256B50; }
.hub-page .hub-erp-note { font-size: 13px; color: #6b5a3a; }

/* ---------- 5. CTA ---------- */
.hub-page .hub-cta-inner {
  padding-top: clamp(80px, 10vw, 128px); padding-bottom: clamp(80px, 10vw, 128px);
  display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center;
}
.hub-page .hub-cta h2 { font-size: clamp(30px, 4vw, 52px); line-height: 1.25; font-weight: 800; letter-spacing: -0.03em; color: #ffffff; }
.hub-page .hub-cta p { font-size: 18px; line-height: 1.7; color: rgba(255,255,255,.78); }
.hub-page .hub-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-top: 6px; }
.hub-page .hub-cta-actions .hub-btn { width: 220px; min-width: 0; min-height: 58px; font-size: 17px; }
.hub-page .hub-btn-gold { background: #F5A524; color: #0D0D0D; }
.hub-page .hub-btn-gold:hover { color: #0D0D0D; }
.hub-page .hub-btn-white-line { border: 1.5px solid rgba(255,255,255,.7); color: #ffffff; font-weight: 700; }
.hub-page .hub-btn-white-line:hover { color: #ffffff; }