/* ==========================================================================
   pages-company-history.css — 수국차 소개 페이지
   (서브 히어로 + 섹션 탭 / 감로차의 유래 / 수국차의 특징 배너 / 차별성·단맛의 원리)
   ========================================================================== */

/* ---------- 서브 히어로 ---------- */
.subhero {
  position: relative;
  min-height: 50px;
  color: #fff;
  background-size: cover;
  background-position: center;
}
.subhero__dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, #141e30 0%, #243b55 100%);
}
.subhero__dim--70 { opacity: 0.7; }
.subhero__dim--80 { opacity: 0.8; }

.subhero__stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 275px;
  padding: var(--space-70) var(--root-pad-x) 0;
}
/* 원본 히어로 상/하 스페이서 (flex-basis 140px / 100px) */
.subhero__stack::before,
.subhero__stack::after { content: ''; }
.subhero__stack::before { height: 140px; }
.subhero__stack::after { height: 100px; }
.subhero__kicker {
  font-size: clamp(1.039rem, 1.039rem + ((1vw - 0.2rem) * 0.561), 1.6rem);
  font-weight: 700;
  letter-spacing: 7px;
  line-height: 1.2;
}
.subhero__subtitle { opacity: 0.5; }
.subhero__bar {
  width: 48px;
  height: 2px;
  background-color: #fff;
  margin-block: var(--space-20);
}

/* 섹션 탭 (투명 바 + 활성 탭) */
.subhero__tabs-wrap {
  position: relative;
  z-index: 1;
  background-color: #0000004f;
}
.subhero__tabs {
  display: flex;
  align-items: flex-end;
  flex-wrap: nowrap;
}
.subhero__tab {
  display: block;
  flex: 1 1 0;
  text-align: center;
  padding: var(--space-20) var(--space-10);
  border-top: 6px solid transparent;
  color: #fffffc;
  transition: color 0.3s ease, background-color 0.3s ease;
}
.subhero__tab:hover {
  color: var(--color-primary);
  background-color: #0000004f;
}
.subhero__tab.is-active {
  background-color: var(--color-base);
  border-top-color: var(--color-primary);
  color: var(--color-contrast);
}

/* ---------- 공통 섹션 (쿼트 아이콘 + 헤딩) ---------- */
.psection { padding-block: var(--space-70); }
.psection__quote {
  display: flex;
  align-items: flex-end;
  height: 1.29em;
  margin-bottom: 0.36em;
  color: var(--color-primary);
  font-size: var(--fs-xxx-huge);
}
.psection__quote svg {
  display: block;
  width: 0.5em;
  height: auto;
  transform: rotate(180deg);
}
.psection__heading {
  font-size: var(--fs-m-huge);
  line-height: 1.2;
}
.psection__lead {
  margin-top: 41px;
  font-size: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.275), 1.15rem);
  color: var(--color-step-13);
}
.psection__rule {
  border: none;
  border-top: 1px solid var(--color-step-3);
  margin: 0;
}

/* ---------- 수국차의 특징 배너 ---------- */
.feature-cover {
  position: relative;
  background-size: cover;
  background-position: center;
  padding-block: var(--space-70);
  color: #fff;
}
.feature-cover__dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, #141e30 0%, #243b55 100%);
  opacity: 0.5;
}
.feature-cover__inner {
  position: relative;
  z-index: 1;
  padding-bottom: calc(var(--space-20) * 2);
}
.feature-cover__spacer {
  height: calc(200px + var(--space-70) * 2);
  padding-block: var(--space-70);
}
.feature-cover__quote {
  color: var(--color-primary);
  font-size: var(--fs-m-huge);
  padding-bottom: var(--space-20);
}
.feature-cover__quote svg {
  display: block;
  width: 0.85em;
  height: auto;
  transform: rotate(180deg);
}
.feature-cover__title {
  font-size: var(--fs-large);
  font-weight: 700;
  line-height: 1.2;
  margin-left: 3px;
  margin-bottom: var(--space-10);
}
.feature-cover__text {
  opacity: 0.5;
  margin-top: 0.5em;
}
.feature-cover__divider { height: 25px; }
.feature-cover__masks {
  font-size: var(--fs-m-huge);
  font-weight: 700;
  line-height: 1.2;
  margin-top: var(--space-20);
}
.feature-cover__masks + .feature-cover__masks { margin-top: 0; }

/* 원본 섹션 상단 스페이서 (spacing-30 + 1px) */
.pspacer { height: calc(var(--space-30) * 2 + 1px); }

/* ---------- 차별성 / 단맛의 원리 2단 ---------- */
.pfeature {
  display: grid;
  grid-template-columns: 1fr 30%;
  gap: var(--space-30) var(--space-70);
  align-items: start;
}
.pfeature + .pfeature { margin-top: calc(var(--space-50) * 2 + 1px); }
.pfeature--reverse { grid-template-columns: 30% 1fr; }

.pfeature__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.pfeature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pfeature__media--clip {
  clip-path: polygon(100% 0, 100% 100%, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 0);
}
.pfeature__dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, #141e30 0%, #243b55 100%);
  opacity: 0.3;
}
.pfeature__title {
  font-size: var(--fs-x-large);
  font-weight: 700;
  margin-bottom: 27px;
}
.pfeature__text {
  font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.188), 17px);
  color: var(--color-step-13);
  line-height: 1.5;
}

/* ---------- 반응형 ---------- */
@media (max-width: 1280px) {
  .pfeature__media--clip { clip-path: none; }
}
@media (max-width: 1024px) {
  .pfeature,
  .pfeature--reverse { grid-template-columns: 1fr; }
  .feature-cover__spacer { height: 120px; padding-block: var(--space-70); }
  .subhero__stack::before,
  .subhero__stack::after { height: 0; }
}

/* 서브내비 탭: 전체 폭 균등 분할 (원본 정렬) */
.subhero__tab { flex: 1 1 0; text-align: center; }

/* 이미지 커버 위 영문 요약은 밝게 */
.feature-cover__text ~ .en-para { color: rgba(255, 255, 252, 0.85); }

.feature-cover__body {
  position: relative;
  z-index: 1;
  max-width: 880px;
}
.feature-cover { color: #fff; }
.feature-cover .en-para, .feature-cover .en-title { color: rgba(255, 255, 252, 0.9) !important; }