/* ==========================================================================
   pages-company-ceo.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--notop { padding-top: 0; }
.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__heading--xxxx { font-size: var(--fs-xxxx-large); }
.psection__heading--xxx { font-size: var(--fs-xxx-large); }
.psection__lead {
  margin-top: var(--space-10);
  font-size: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.275), 1.15rem);
  color: var(--color-step-13);
}

/* ---------- 커버 딤 그라디언트 ---------- */
.pdim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pdim--g31 { background: linear-gradient(45deg, #141e30 0%, #243b55 100%); }
.pdim--g12 { background: linear-gradient(45deg, #614385 0%, #516395 100%); }
.pdim--d5 { background: linear-gradient(45deg, #c9c9c9 0%, #c0c0c0 100%); }
.pdim--g06 { background: linear-gradient(45deg, #bdc3c7 0%, #2c3e50 100%); }
.pdim--g34 { background: linear-gradient(45deg, #2b5876 0%, #4e4376 100%); }
.pdim--10 { opacity: 0.1; }
.pdim--20 { opacity: 0.2; }
.pdim--30 { opacity: 0.3; }

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

/* ---------- 음용법 스텝 카드 ---------- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-50) 3vw;
  margin-top: var(--space-70);
}
.step__media {
  position: relative;
  min-height: 291px;
  clip-path: polygon(100% 0, 100% 100%, 20px 100%, 0 calc(100% - 20px), 0 0);
}
.step__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.step__num {
  margin-top: 28px;
  font-size: var(--fs-x-large);
  font-weight: 700;
  line-height: 1.5;
}
.step__desc {
  margin-top: var(--space-10);
  color: var(--color-step-13);
  line-height: 1.6;
}

/* ---------- 감로차 활용법 ---------- */
.usage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-50) var(--space-70);
  align-items: start;
}
.usage__intro { position: relative; }
.usage__title {
  font-size: var(--fs-xxx-large);
  line-height: 1.4;
}
.usage__desc {
  margin-top: var(--space-10);
  color: var(--color-step-13);
  font-size: var(--fs-large);
  line-height: 1.5;
}
.usage-item + .usage-item { margin-top: var(--space-50); }
.usage-item__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.usage-item__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.usage-item__media--clip {
  clip-path: polygon(100% 0, 100% 100%, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 0);
}
.usage-item__title {
  margin-top: var(--space-10);
  font-size: var(--fs-x-large);
}
.usage-item__title a { transition: color 0.2s ease; }
.usage-item__title a:hover { color: var(--color-primary); }
.usage-item__desc {
  margin-top: 0.5em;
  color: var(--color-step-10);
  font-size: var(--fs-medium);
  line-height: 1.7;
}

/* ---------- 반응형 ---------- */
@media (min-width: 1281px) {
  .usage__intro {
    position: sticky;
    top: 160px;
  }
}
@media (max-width: 1280px) {
  .usage-item__media--clip { clip-path: none; }
}
@media (max-width: 1024px) {
  .steps-grid { grid-template-columns: 1fr; }
  .usage { grid-template-columns: 1fr; }
  .subhero__stack::before,
  .subhero__stack::after { height: 0; }
}

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