/* ==========================================================================
   manufacturing 페이지 스타일 — 섹션별 통합 (원본: manufacturing/section*.html)
   ========================================================================== */

/* --- section01-header --- */
.han-a01 {
  width: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(80px, 12vw, 200px) clamp(20px, 8vw, 150px) 0;
}
.han-a01__title {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: -50px;
  padding-bottom: 50px;
}
.han-a01__crumb {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px 15px;
  overflow-x: auto;
  scrollbar-width: none;
}
.han-a01__crumb::-webkit-scrollbar { display: none; }
.han-a01__home { width: 24px; height: 24px; flex-shrink: 0; }
.han-a01__dot { width: 4px; height: 4px; border-radius: 50%; background: #ccc; flex-shrink: 0; }
.han-a01__crumb-text {
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.025em;
  color: #222;
  white-space: nowrap;
}
.han-a01__heading {
  margin: 0;
  font-family: 'SUIT', 'Pretendard', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 80px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--main, #0a58a5);
}
.han-a01__wrap { width: 100%; display: flex; flex-direction: column; align-items: center; }
.han-a01__tabs {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 50px;
  flex-wrap: wrap;
}
.han-a01__tab {
  padding: 20px 0;
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #999;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.16s ease-out;
}
.han-a01__tab:hover { color: var(--main, #0a58a5); font-weight: 700; }
.han-a01__tab:focus-visible { outline: 2px solid var(--main, #0a58a5); outline-offset: 4px; border-radius: 2px; }
.han-a01__tab.is-active { font-weight: 700; color: var(--main, #0a58a5); }
.han-a01__hero { width: calc(100% + 2 * clamp(20px, 8vw, 150px)); height: 433px; overflow: hidden; }
.han-a01__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 브레드크럼 링크 */
.han-a01__home-link { display: inline-flex; align-items: center; }
.han-a01__crumb-text { text-decoration: none; }
a.han-a01__crumb-text { transition: color 0.16s ease-out; }
a.han-a01__crumb-text:hover { color: var(--main, #0a58a5); }


/* ── Laptop: ~1439px ─────────────────────── */
@media (max-width: 1439px) {
  .han-a01__hero { height: 340px; }
}

/* ── Tablet 가로: ~1024px ────────────────── */
@media (max-width: 1024px) {
  .han-a01__hero { height: 280px; }
  .han-a01__tabs { gap: 24px; }
  .han-a01__tab { font-size: 16px; }
}

/* ── Tablet 세로: ~768px ─────────────────── */
@media (max-width: 768px) {
  .han-a01 { padding: 60px 24px 0; }
  .han-a01__tabs { justify-content: flex-start; gap: 16px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .han-a01__tab { flex-shrink: 0; font-size: 15px; }
  .han-a01__hero { width: calc(100% + 48px); height: 220px; }
}

/* ── Mobile 가로: ~480px ─────────────────── */
@media (max-width: 480px) {
  .han-a01__tab { font-size: 14px; }
  .han-a01__hero { height: 180px; }
}

/* ── Mobile 세로: ~375px ─────────────────── */
@media (max-width: 375px) {
  .han-a01__crumb-text, .han-a01__tab { font-size: 13px; }
  .han-a01__hero { height: 150px; }
}

/* --- section02-process --- */
.han-m02 {
  width: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: clamp(50px, 6vw, 100px) clamp(20px, 8vw, 150px);
}
.han-m02__title {
  margin: 0;
  font-family: 'SUIT', 'Pretendard', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 2.9vw, 55px); /* 다른 페이지 섹션 타이틀과 크기 통일 */
  color: #222;
}
.han-m02__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 32px);
  background: #f7f7f7;
  padding: 6px 40px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.han-m02__step { flex-shrink: 0; }
.han-m02__step span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 14px 8px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  color: var(--main, #0a58a5);
  white-space: nowrap;
}
.han-m02__arrow { flex-shrink: 0; font-family: 'Montserrat', sans-serif; font-size: 18px; color: #aab4c2; }

.han-m02__illust { width: 100%; }
.han-m02__illust img { width: 100%; height: auto; display: block; }

/* ── Tablet 세로: ~768px ─────────────────── */
@media (max-width: 768px) {
  .han-m02 { padding: 50px 24px; gap: 24px; }
  .han-m02__steps { justify-content: flex-start; gap: 14px; } /* 좁은 화면: 왼쪽부터 스크롤 */
  .han-m02__step span { font-size: 16px; height: 48px; padding: 12px 14px; }
}