/* =========================================================
   GNB — 모햇 헤더: 흰 배경, 텍스트 메뉴
   ========================================================= */
.gnb {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--gnb-h);
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
  /* 처음에 확 움직이는 곡선(--ease)은 폰에서 뚝 끊겨 보여서, 처음과 끝을 고르게 늦추는 곡선으로 (2026-10-26) */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* 아래로 스크롤하면 숨기고, 위로 스크롤할 때만 다시 보인다 (gnb.js autoHide) */
.is-gnb-hidden .gnb {
  transform: translateY(-100%);
}

.gnb__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  height: 100%;
}

.gnb__nav ul {
  display: flex;
  gap: 4px;
}

.gnb__link {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-800);
}

.gnb__link:hover,
.gnb__link.is-active {
  color: var(--green-700);
}

.gnb__menu {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--navy-900);
}

.gnb__menu.is-shown {
  display: inline-grid;
}

@media (max-width: 1099px) {
  .gnb__nav {
    display: none;
  }

  .gnb__menu {
    display: inline-grid;
  }
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 150;
}

.drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--shade-rgb), 0.45);
}

.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(86vw, 360px);
  padding: 8px 20px 24px;
  background: #fff;
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  margin-bottom: 8px;
}

.drawer__nav {
  flex: 1;
}

.drawer__link {
  display: flex;
  align-items: center;
  height: 52px;
  font-size: 17px;
  font-weight: 700;
  color: var(--gray-900);
  border-bottom: 1px solid var(--gray-150);
}

.drawer__actions {
  display: grid;
  gap: 8px;
}

/* =========================================================
   Hero — 모햇 홈 상단: 사진 띠 → [모집 배너 │ 계산기] → 숫자 타일
   ========================================================= */
.hero {
  padding-bottom: 72px;
}

.hero__strip {
  position: relative;
  height: clamp(340px, 34vw, 500px);
  overflow: hidden;
  background: var(--navy-900);
}

.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(var(--shade-rgb), 0.78) 0%, rgba(var(--shade-rgb), 0.45) 45%, rgba(var(--shade-rgb), 0.05) 80%),
    linear-gradient(0deg, rgba(var(--shade-rgb), 0.45) 0%, rgba(var(--shade-rgb), 0) 40%);
}

.hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding-bottom: 56px;
  color: #fff;
}

.hero__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--green-300);
}

.hero__title {
  margin-top: 10px;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.035em;
}

.hero__lead {
  max-width: 460px;
  margin-top: 14px;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.85);
}

/* 헤더에서 옮겨 온 '조합원 가입' (2026-10-26) */
.hero__cta {
  margin-top: 28px;
}

.hero__cta .btn {
  padding-inline: 32px;
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.hero__facts dt {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.hero__facts dd {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hero__main {
  margin-top: 40px;
}

/* 모집 카드 하나: 위쪽 조합 탭 + 아래 [조합 정보(사진 │ 내용) │ 계산기] */
.promo {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy-900);
  color: #fff;
}

/* 조합 고르기 — 아래 '사업 개요'의 조합 탭과 같은 밑줄 탭. 모집 중인 조합에만 점을 찍는다
   옆으로만 밀린다: 세로로 넘치는 게 없게 아래 선은 테두리 대신 안쪽 그림자로 긋고(밑줄이 그 위를 덮는다),
   overflow-y 를 막는다. 그래야 iOS 에서 탭 줄이 위아래로 튕기지 않는다 (2026-10-26) */
.promo__tabs {
  display: flex;
  flex: none;
  gap: 28px;
  height: 60px;
  padding-inline: 32px;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.promo__tabs::-webkit-scrollbar {
  display: none;
}

.promo-tab {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 100%;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy-300);
}

.promo-tab:hover {
  color: #fff;
}

.promo-tab:focus-visible {
  outline-offset: -4px;
}

.promo-tab[aria-selected='true'] {
  color: #fff;
  font-weight: 700;
}

.promo-tab[aria-selected='true']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--green-400);
}

/* 고르면 글자가 굵어져도 탭 폭은 그대로 — 굵은 글자 폭을 보이지 않는 줄로 미리 잡아 둔다 */
.promo-tab__label {
  display: inline-flex;
  flex-direction: column;
}

.promo-tab__label::after {
  content: attr(data-text);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 700;
  user-select: none;
}

.promo-tab__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-400);
}

.promo__panel {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) 400px;
}

.promo__slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  touch-action: pan-y;
}

/* 계산기는 카드 안의 오른쪽 칸 — 따로 떠 있는 카드 테두리·모서리는 걷는다 */
.promo__panel .calc {
  height: 100%;
  padding: 32px 32px 28px;
  border: 0;
  border-radius: 0;
  color: var(--gray-900);
}

/* 메뉴의 '수익 계산'으로 오면 탭 줄까지 보이게 */
@media (min-width: 1024px) {
  .promo__panel #simulator {
    scroll-margin-top: calc(var(--gnb-h) + 68px);
  }
}

.promo__body {
  display: flex;
  flex-direction: column;
  padding: 40px;
}

.promo__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--green-300);
}

.promo__title {
  margin-top: 12px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.035em;
}

.promo__desc {
  margin-top: 10px;
  font-size: 15px;
  color: var(--navy-200);
}

.promo__facts {
  display: flex;
  gap: 32px;
  margin-top: 32px;
}

.promo__facts dt,
.promo__stats dt {
  font-size: 13px;
  color: var(--navy-300);
}

.promo__facts dd {
  margin-top: 2px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.promo__facts div:first-child dd {
  color: var(--green-300);
}

.promo__progress {
  margin-top: 28px;
}

.promo__progress p {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--navy-200);
  font-variant-numeric: tabular-nums;
}

.promo__progress strong {
  color: #fff;
}

.promo__bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.promo__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green-400);
}

/* 그림 칸(.promo__photo)도 .promo__body 안에 있어서 함께 사라진다 */
.promo__body {
  transition: opacity 0.14s;
}

.promo__slide.is-changing .promo__body {
  opacity: 0;
}

.promo__body {
  user-select: none;
}

.promo__meta {
  display: grid;
  gap: 10px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 14px;
}

.promo__meta div {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
}

.promo__meta dt {
  color: var(--navy-300);
}

.promo__meta dd {
  color: #fff;
}

.promo__meta dd span {
  color: var(--navy-300);
}

/* 모집 정보 한 줄: 모집 기간 · 최소 참여 · 참여 조합원 */
.promo__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 24px;
}

.promo__stats div {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
}

.promo__stats dd {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.promo__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 32px;
}

/* 사업계획서 내려받기 — 옆 칸 '참여하기'와 같은 높이의 보조 버튼 */
.promo__download {
  gap: 8px;
}

.promo__file {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-500);
}

/* 위쪽 줄: 왼쪽 조합 이름 · 오른쪽 4:3 그림 칸 */
.promo__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 32px;
}

.promo__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
}

.promo__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1023px) {
  /* 한 줄로 쌓일 때는 탭 → 조합 정보 → 계산기 */
  .promo__panel {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .hero {
    padding-bottom: 48px;
  }

  .hero__copy {
    padding-bottom: 28px;
  }

  .hero__lead {
    font-size: 15px;
  }

  .hero__cta {
    margin-top: 20px;
  }

  .hero__facts {
    display: none;
  }

  .hero__main {
    margin-top: 20px;
  }

  .promo__panel .calc {
    padding: 24px 20px 20px;
  }

  .promo__tabs {
    gap: 20px;
    height: 52px;
    padding-inline: 20px;
  }

  .promo-tab {
    font-size: 15px;
  }

  .promo__body {
    padding: 24px 20px 20px;
  }

  /* 폰: 그림 칸을 이름 위에 16:9로 */
  .promo__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .promo__photo {
    order: -1;
    aspect-ratio: 16 / 9;
  }

  /* 폰: 모집 정보는 한 줄에 하나씩, 이름 왼쪽 · 값 오른쪽 */
  .promo__stats {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 20px;
  }

  .promo__stats div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
  }

  .promo__stats dd {
    margin-top: 0;
    text-align: right;
  }

  .promo__title {
    font-size: 26px;
  }

  .promo__facts {
    gap: 20px;
    margin-top: 20px;
  }

  .promo__facts dd {
    font-size: 18px;
  }

  .promo__foot {
    padding-top: 24px;
  }
}

/* 320px 폭에서는 버튼 한 줄에 파일 정보까지 들어가지 않아서 뺀다 */
@media (max-width: 359px) {
  .promo__file {
    display: none;
  }
}

/* =========================================================
   계산기 — 모햇 "내 이자 계산해보기"
   ========================================================= */
/* 카드 바탕은 아주 연한 회색, 안쪽 칸(조합·입력·빠른 금액·결과)은 흰색 */
.calc {
  padding: 28px 24px 24px;
  border: 1px solid var(--gray-150);
  border-radius: 20px;
  background: var(--surface);
}

.calc__title {
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--navy-900);
}

.calc__label {
  display: block;
  margin: 22px 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
}

.calc__title + .calc__label {
  margin-top: 0;
}

.calc__coop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: #fff;
}

.calc__coop strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy-900);
}

.calc__coop-meta {
  width: 100%;
  font-size: 14px;
  color: var(--gray-700);
  font-variant-numeric: tabular-nums;
}

.calc__coop.is-flash {
  animation: coop-flash 0.9s var(--ease);
}

@keyframes coop-flash {
  0% { background: var(--green-100); }
  100% { background: #fff; }
}

/* 테두리·초점·오류 표시는 .input-box (components.css) */
.amount {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 60px;
  padding: 0 16px;
}

.amount input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 22px;
  font-weight: 700;
  text-align: right;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
}

.amount span {
  font-size: 16px;
  color: var(--gray-600);
}

.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  margin: 12px 0 8px;
  background: transparent;
  cursor: pointer;
}

.range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--green-700) 0 var(--p, 0%), var(--gray-300) var(--p, 0%) 100%);
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--green-700);
}

.range::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--gray-300);
}

.range::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--green-700);
}

.range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--green-700);
}

.calc__quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.quick-chip {
  height: 36px;
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
}

.quick-chip:hover {
  background: var(--gray-100);
}

.calc__error {
  margin-top: 10px;
}

.calc__result {
  position: relative;
  margin-top: 20px;
  padding: 24px 16px 16px;
  border-radius: var(--radius);
  background: #fff;
  text-align: center;
}

.calc__result.is-empty .calc__result-value {
  color: var(--gray-400);
}

.seg {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  padding: 2px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--gray-200);
}

.seg button {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
}

.seg button[aria-checked='true'] {
  background: var(--navy-900);
  color: #fff;
}

.calc__result-label {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--green-700);
}

.calc__result-value {
  margin-top: 2px;
  font-size: 24px;
  font-weight: 700;
  color: var(--green-700);
}

.calc__result-value span {
  margin-right: 2px;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.calc__result-sub {
  margin-top: 4px;
  font-size: 15px;
  color: var(--gray-700);
  font-variant-numeric: tabular-nums;
}

.calc__result-sub strong {
  color: var(--gray-900);
}

.calc__muted {
  font-size: 13px;
  color: var(--gray-600);
}

.calc__result-split {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 6px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface);
  font-size: 13px;
  color: var(--gray-700);
  font-variant-numeric: tabular-nums;
}

.calc__result-split:empty {
  display: none;
}

.calc__plus {
  color: var(--gray-400);
}

.calc__eq {
  width: 100%;
}

.calc__eq strong {
  color: var(--navy-900);
}

.calc .btn--lg {
  margin-top: 16px;
}

.calc__note {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gray-600);
  text-align: center;
}

@media (max-width: 767px) {
  .calc {
    padding: 24px 16px 16px;
  }

  .calc__result-value span {
    font-size: 36px;
  }
}

/* =========================================================
   참여 구조 — 모햇 색면 카드 2장
   ========================================================= */
.structure {
  background: var(--surface);
}

.split-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.split-card {
  padding: 36px;
  border-radius: var(--radius);
  color: #fff;
}

.split-card--navy {
  background: var(--navy-900);
}

.split-card--green {
  background: var(--green-700);
}

.split-card__label {
  font-size: 16px;
  font-weight: 600;
  opacity: 0.8;
}

.split-card__value {
  margin-top: 6px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.split-card__desc {
  max-width: 440px;
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.65;
  opacity: 0.88;
}

.split-card__list {
  display: grid;
  gap: 6px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 15px;
}

.split-card__list li::before {
  content: '· ';
}

.depositor {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 8px 32px;
  margin-top: 20px;
  padding: 24px 28px;
  border-radius: var(--radius);
  background: #fff;
}

.depositor__title {
  font-size: 17px;
  font-weight: 600;
}

.depositor__title strong {
  color: var(--green-700);
}

.depositor__example {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--navy-900);
}

.depositor__code {
  color: var(--green-700);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.depositor__desc {
  font-size: 14px;
  color: var(--gray-600);
}

.steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 2px solid var(--navy-900);
}

.step__num {
  font-size: 13px;
  font-weight: 700;
  color: var(--green-700);
}

.step__title {
  margin-top: 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy-900);
}

.step__desc {
  margin-top: 6px;
  font-size: 14px;
  color: var(--gray-600);
}

@media (max-width: 1023px) {
  .split-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .depositor {
    grid-template-columns: minmax(0, 1fr);
  }

  .steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 0;
  }

  .step {
    display: grid;
    grid-template-columns: 64px 1fr;
    padding: 16px 0;
    border-bottom: 1px solid var(--gray-200);
  }

  .step__num {
    grid-row: span 2;
    padding-top: 3px;
  }

  .step__title {
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .split-card {
    padding: 24px 20px;
  }

  .split-card__value {
    font-size: 26px;
  }

  .depositor {
    padding: 20px;
  }
}

/* =========================================================
   언론 보도 — 기사 한 건은 넓은 카드 한 장 (유아이볼: 카드고릴라 TODAY'S BEST, 피처링 최신 콘텐츠)
   ========================================================= */
/* 바로 아래 '자주 묻는 질문'도 흰 바탕이라 두 섹션 여백이 겹치지 않게 */
.press {
  padding-bottom: 0;
}

/* 그림 칸 폭(28%)은 위 모집 배너의 아이콘 칸과 같은 폭 */
.press-card {
  display: grid;
  grid-template-columns: 28% minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: #fff;
}

.press-card__art {
  position: relative;
  order: -1;
  min-height: 240px;
}

/* 원본 사진: 가로로 긴 단체 사진이 많아서 칸을 넓히고, 16:9·3:2 사진이 덜 잘리게 16:10 칸에 채운다 */
.press-card--photo {
  grid-template-columns: 40% minmax(0, 1fr);
}

.press-card--photo .press-card__art {
  min-height: 0;
  aspect-ratio: 16 / 10;
}

.press-card__art > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 밝은 사진 위에서도 출처가 읽히게 */
.press-card__art .photo-credit {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 넓은 화면: 글은 왼쪽, '기사 보기'는 오른쪽 끝 (카드 오른쪽이 비지 않게) */
.press-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 40px 48px 40px 40px;
}

.press-card__text {
  min-width: 0;
}

.press-card__meta {
  font-size: 15px;
  color: var(--gray-500);
}

.press-card__meta strong {
  font-weight: 700;
  color: var(--gray-900);
}

.press-card__title {
  margin-top: 12px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: var(--navy-900);
  text-wrap: balance;
}

.press-card__summary {
  margin-top: 8px;
  font-size: 16px;
  color: var(--gray-600);
}

.press-card__link {
  flex: none;
  gap: 6px;
}

/* 두 번째 기사부터: 매체·날짜 │ 제목 한 줄 */
.press-list {
  margin-top: 16px;
  border-top: 1px solid var(--gray-200);
}

.press-list__link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-500);
}

.press-list__meta {
  flex: none;
  width: 168px;
  font-size: 14px;
}

.press-list__title {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-900);
}

.press-list__link:hover .press-list__title {
  text-decoration: underline;
}

/* 좁은 화면: 글 아래에 '기사 보기' */
@media (max-width: 1023px) {
  .press-card__body {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    padding: 32px;
  }
}

@media (max-width: 767px) {
  .press-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .press-card__art {
    min-height: 0;
    aspect-ratio: 16 / 7;
  }

  .press-card--photo {
    grid-template-columns: minmax(0, 1fr);
  }

  .press-card--photo .press-card__art {
    aspect-ratio: 16 / 9;
  }

  .press-card__body {
    gap: 20px;
    padding: 24px 20px;
  }

  .press-card__title {
    font-size: 21px;
  }

  .press-card__summary {
    font-size: 15px;
  }

  .press-list__link {
    flex-wrap: wrap;
    gap: 4px 12px;
  }

  .press-list__meta {
    width: 100%;
  }
}

/* =========================================================
   자주 묻는 질문 — 모햇 홈 하단
   ========================================================= */
.faq {
  border-top: 2px solid var(--navy-900);
}

.faq__item {
  border-bottom: 1px solid var(--gray-200);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary .icon {
  color: var(--gray-500);
  transition: transform 0.2s var(--ease);
}

.faq__item[open] summary .icon {
  transform: rotate(180deg);
}

.faq__item p {
  padding: 0 0 22px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--gray-700);
}

@media (max-width: 767px) {
  .faq__item summary {
    font-size: 16px;
  }
}

/* =========================================================
   유의사항 · 푸터
   ========================================================= */
.disclosure {
  padding-bottom: 64px;
}

.notice {
  padding: 28px 32px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}

.notice__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy-900);
}

.notice__list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-left: 20px;
  list-style: decimal;
  font-size: 14px;
  line-height: 1.65;
  color: var(--gray-700);
}

.footer {
  padding: 40px 0 48px;
  background: var(--surface);
  border-top: 1px solid var(--gray-200);
  font-size: 13px;
  color: var(--gray-600);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-700);
}

.footer__links strong {
  color: var(--gray-900);
}

.footer__info {
  margin-top: 20px;
  line-height: 1.9;
}

.footer i {
  display: inline-block;
  width: 1px;
  height: 10px;
  margin: 0 8px;
  background: var(--gray-300);
}

.footer__coops {
  margin-top: 12px;
}

.footer__coops summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--gray-700);
  cursor: pointer;
  list-style: none;
}

.footer__coops summary::-webkit-details-marker {
  display: none;
}

.footer__coops[open] summary .icon {
  transform: rotate(180deg);
}

.footer__coops ul {
  display: grid;
  gap: 4px;
  margin-top: 10px;
}

.footer__sample {
  margin-top: 20px;
  color: var(--green-800);
}

.footer__copy {
  margin-top: 6px;
  color: var(--gray-500);
}

@media (max-width: 767px) {
  .notice {
    padding: 22px 20px;
  }

  .footer {
    padding-bottom: 96px;
  }
}

/* =========================================================
   모바일 하단 바
   ========================================================= */
.mobile-cta {
  display: none;
}

@media (max-width: 767px) {
  .mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--gray-200);
    transform: translateY(100%);
    transition: transform 0.25s var(--ease);
  }

  .mobile-cta.is-visible {
    transform: none;
  }

  .mobile-cta__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
  }

  .mobile-cta__info strong {
    font-size: 15px;
    color: var(--navy-900);
  }

  .mobile-cta__info span {
    overflow: hidden;
    font-size: 12.5px;
    color: var(--gray-600);
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/* =========================================================
   조합원 가입 신청 팝업 (2026-10-26) — 유아이볼: 토스 비즈니스 '상담 신청', 위시켓 '견적 상담 신청'
   한 줄에 칸 하나 → 동의 줄(내용은 '보기'로 펼침) → 큰 버튼 하나. 폰에서는 아래에서 올라오는 시트
   ========================================================= */
.join {
  width: min(460px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: #fff;
  color: var(--gray-900);
  overflow: auto;
  overscroll-behavior: contain;
}

/* 메뉴(드로어) 바깥과 같은 어둡기. 예전 브라우저는 ::backdrop 에 변수를 넘기지 않아 기본값을 둔다 */
.join::backdrop {
  background: rgba(var(--shade-rgb, 0, 0, 0), 0.45);
}

.join[open] {
  animation: join-in 0.25s var(--ease);
}

@keyframes join-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

.join__inner {
  position: relative;
  padding: 36px 32px 32px;
}

.join__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--gray-600);
}

.join__close:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}

.join__title {
  padding-right: 40px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

/* 열 때·신청 뒤 읽는 위치를 알리려고 제목에 포커스를 둔다. 테두리는 그리지 않는다 */
.join__title:focus {
  outline: 0;
}

.join__lead {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray-600);
}

.join__fields {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

.field {
  display: grid;
  gap: 8px;
}

.field__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-800);
}

/* 테두리·초점·오류 표시는 .input-box, 오류 글은 .form-error (components.css) */
.field__input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 0;
  font-size: 16px; /* 16px 아래면 iOS 가 칸을 누를 때 화면을 확대한다 */
  color: var(--gray-900);
  outline: 0;
}

.field__input::placeholder {
  color: var(--gray-400);
}

.join__consent {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-150);
}

.join__agree {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--green-700);
  cursor: pointer;
}

.join__terms-toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  padding: 6px 0;
  font-size: 14px;
  color: var(--gray-600);
}

.join__terms-toggle .icon {
  transition: transform 0.2s var(--ease);
}

.join__terms-toggle[aria-expanded='true'] .icon {
  transform: rotate(180deg);
}

.join__terms {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 13px;
  line-height: 1.55;
}

.join__terms div {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px;
}

.join__terms dt {
  color: var(--gray-600);
}

.join__terms dd {
  color: var(--gray-800);
}

.join__form > .btn {
  margin-top: 24px;
}

/* 신청 뒤 */
.join__done {
  display: grid;
  justify-items: center;
  padding-top: 12px;
  text-align: center;
}

.join__done-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-700);
}

.join__done .join__title {
  padding-right: 0;
}

.join__sample {
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface);
  font-size: 13px;
  color: var(--gray-600);
}

.join__done .btn {
  margin-top: 28px;
}

@media (max-width: 767px) {
  /* 폰: 화면 아래에 붙는 시트 */
  .join {
    width: 100%;
    max-height: 92dvh;
    margin: auto 0 0;
    border-radius: 20px 20px 0 0;
  }

  .join[open] {
    animation-name: join-up;
  }

  @keyframes join-up {
    from {
      transform: translateY(100%);
    }
  }

  .join__inner {
    padding: 28px 20px calc(24px + env(safe-area-inset-bottom));
  }

  .join__close {
    top: 12px;
    right: 12px;
  }

  .join__title {
    font-size: 21px;
  }

  .join__fields {
    margin-top: 24px;
  }
}