/* host-tokens.css — Simple 시안 토큰만 적용 (마크업·레이아웃 변경 없음)
 *
 * 목적: 6종 프로그램 페이지(.hp-*)와 호스트 가이드 3페이지의 색·타이포·
 * 디바이더·버튼 모양만 통일. 기존 .program-hero / .section / .program-cards /
 * .host-process / .program-cta / .host-page / .program-grid 마크업은 그대로 둠.
 */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');

:root {
  --htp-bg: #faf8f4;
  --htp-paper: #ffffff;
  --htp-ink: #1a1816;
  --htp-ink2: #5a544c;
  --htp-ink3: #9a9288;
  --htp-rule: #e6e0d4;
  --htp-rule-soft: #efeae0;
  --htp-accent: #C2410C;
  --htp-serif: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
  --htp-sans: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
  --htp-mono: "Geist Mono", ui-monospace, monospace;
}

/* 제목은 600~700, 본문은 400 (Pretendard 1-family 시스템) */
body.page h1, body.page h2, body.page h3,
body.page .program-hero__title, body.page .host-hero h1,
body.page .host-page__title, body.page .section__title,
body.page .section-title, body.page .program-cta__title,
body.page .host-process__step-title, body.page .program-card__title {
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}
body.page h4, body.page h5, body.page h6 {
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}

/* ====== 페이지 베이스 ====== */
body.page {
  background: var(--htp-bg) !important;
  color: var(--htp-ink) !important;
}

/* ====== Hero (program-hero / host-hero) ====== */
.program-hero {
  background-image: none !important;
  background-color: var(--htp-bg) !important;
  height: auto !important;
  padding: 96px 56px 80px !important;
  text-align: center !important;
  display: block !important;
  border-bottom: 1px solid var(--htp-rule) !important;
}
.program-hero__overlay { display: none !important; }
.program-hero__content {
  text-align: center !important;
  max-width: 700px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  color: var(--htp-ink) !important;
}
.program-hero__title {
  font-family: var(--htp-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(48px, 6vw, 72px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  color: var(--htp-ink) !important;
  text-shadow: none !important;
  margin: 0 !important;
}
.program-hero__description {
  font-family: var(--htp-sans) !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
  color: var(--htp-ink2) !important;
  opacity: 1 !important;
  max-width: 620px !important;
  margin: 24px auto 0 !important;
}

/* ====== 섹션 ====== */
.section {
  background: var(--htp-bg) !important;
  border-top: 1px solid var(--htp-rule) !important;
  padding: 80px 56px !important;
}
.section--alt {
  background: var(--htp-bg) !important;
}
.section__title,
.host-page__title {
  font-family: var(--htp-serif) !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em !important;
  color: var(--htp-ink) !important;
  margin: 0 0 12px !important;
}
.section__subtitle,
.host-page__subtitle {
  font-family: var(--htp-sans) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--htp-ink2) !important;
  margin: 0 0 40px !important;
  max-width: 660px !important;
}

/* ====== host-process 번호 카드 ====== */
.host-process {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0 !important;
  border-top: 1px solid var(--htp-rule-soft) !important;
}
.host-process__card {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--htp-rule-soft) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 32px !important;
  position: relative !important;
}
.host-process__card:nth-child(odd) {
  border-right: 1px solid var(--htp-rule-soft) !important;
}
.host-process__num {
  font-family: var(--htp-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
  color: var(--htp-accent) !important;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  display: block !important;
  margin-bottom: 12px !important;
}
.host-process__num::before {
  content: "STEP " !important;
}
.host-process__title {
  font-family: var(--htp-serif) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: var(--htp-ink) !important;
  margin: 0 0 10px !important;
}
.host-process__text {
  font-family: var(--htp-sans) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--htp-ink2) !important;
}

/* ====== program-cards 그리드 ====== */
.program-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid var(--htp-rule-soft) !important;
}
.program-card {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--htp-rule-soft) !important;
  border-right: 1px solid var(--htp-rule-soft) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.program-card:hover {
  transform: none !important;
  box-shadow: none !important;
}
.program-card__body {
  padding: 32px !important;
}
.program-card__title {
  font-family: var(--htp-serif) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: var(--htp-ink) !important;
  margin: 0 0 10px !important;
}
.program-card__text {
  font-family: var(--htp-sans) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--htp-ink2) !important;
}
.program-card .btn--secondary {
  background: transparent !important;
  color: var(--htp-ink) !important;
  border: none !important;
  border-bottom: 1px solid var(--htp-ink) !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  font-family: var(--htp-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin-top: 16px !important;
}

/* card 안의 인라인 eyebrow (Homestay Program / Group Program / Education Program) */
.program-card p[style*="text-transform:uppercase"],
.program-card p[style*="text-transform: uppercase"] {
  font-family: var(--htp-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  color: var(--htp-accent) !important;
  font-weight: 500 !important;
  margin: 0 0 8px !important;
}

/* ====== 활동비 노트 ====== */
.host-fee-note {
  border-left: 2px solid var(--htp-accent) !important;
  padding: 4px 0 4px 24px !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.host-fee-note p {
  font-family: var(--htp-sans) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: var(--htp-ink2) !important;
  margin: 0 0 12px !important;
}
.host-fee-note a {
  color: var(--htp-accent) !important;
  font-weight: 500 !important;
}
.host-fee-note strong {
  color: var(--htp-ink) !important;
}

/* ====== program-cta ====== */
.program-cta {
  background: var(--htp-bg) !important;
  border: none !important;
  border-top: 1px solid var(--htp-rule) !important;
  border-radius: 0 !important;
  padding: 80px 0 !important;
  text-align: center !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.program-cta__title {
  font-family: var(--htp-serif) !important;
  font-size: clamp(36px, 5vw, 48px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.025em !important;
  color: var(--htp-ink) !important;
  margin: 0 0 20px !important;
}
.program-cta__text {
  font-family: var(--htp-sans) !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: var(--htp-ink2) !important;
  margin: 0 auto 36px !important;
  max-width: 620px !important;
}
.program-cta__actions {
  justify-content: center !important;
}
.program-cta .btn,
.program-cta .btn--primary,
.program-cta .btn--secondary {
  border-radius: 0 !important;
  font-family: var(--htp-sans) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  padding: 14px 26px !important;
  letter-spacing: 0 !important;
}
.program-cta .btn--primary,
[data-portal="host"] .program-cta .btn--primary,
[data-portal="host"] .btn--primary {
  background: var(--htp-ink) !important;
  border: 1px solid var(--htp-ink) !important;
  color: var(--htp-bg) !important;
}
.program-cta .btn--primary:hover {
  background: #000 !important;
}
.program-cta .btn--secondary {
  background: transparent !important;
  border: 1px solid var(--htp-rule) !important;
  color: var(--htp-ink) !important;
}
.program-cta .btn--secondary:hover {
  background: var(--htp-rule-soft) !important;
}

/* ====== group-programs 전용 (host-page / program-grid / 모달 카드) ====== */
.host-page {
  max-width: 100% !important;
  padding: 0 56px 80px !important;
}
.host-page__title {
  display: none !important; /* 본문 H1 중복 제거 */
}
.host-page__subtitle {
  display: none !important;
}
.section-title {
  font-family: var(--htp-serif) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: var(--htp-ink) !important;
  border-bottom: 1px solid var(--htp-rule) !important;
  padding-bottom: 12px !important;
  margin: 64px 0 24px !important;
}
/* .program-grid 1열 리스트 + 동적 버튼은 css/pages/programs-list.css로 분리.
 * host-tokens.css의 --htp-* 토큰이 fallback으로 자동 매핑된다. */

/* status badges */
.badge {
  border-radius: 0 !important;
  font-family: var(--htp-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
}
.badge--pending,
.badge--finalized-standby { background: var(--htp-rule-soft) !important; color: var(--htp-accent) !important; }
.badge--accepted,
.badge--finalized-confirmed { background: var(--htp-rule-soft) !important; color: var(--htp-ink) !important; }
.badge--rejected { background: transparent !important; color: var(--htp-ink3) !important; border: 1px solid var(--htp-rule) !important; }

/* empty/loading 상태 */
.empty-state {
  border: 1px dashed var(--htp-rule) !important;
  border-radius: 0 !important;
  padding: 64px 24px !important;
  background: transparent !important;
  color: var(--htp-ink3) !important;
}
.empty-state__icon { display: none !important; }
.empty-state__text {
  font-family: var(--htp-mono) !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  color: var(--htp-ink3) !important;
}
.loading-spinner {
  font-family: var(--htp-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--htp-ink3) !important;
  padding: 32px 0 !important;
}

/* 테이블 */
.applications-table th {
  font-family: var(--htp-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  color: var(--htp-ink3) !important;
  border-bottom: 1px solid var(--htp-rule) !important;
  font-weight: 500 !important;
  padding: 12px 16px !important;
}
.applications-table td {
  font-family: var(--htp-sans) !important;
  font-size: 14px !important;
  color: var(--htp-ink) !important;
  border-bottom: 1px solid var(--htp-rule-soft) !important;
  padding: 14px 16px !important;
}

/* ====== 호스트 포털 헤더 액센트도 브릭으로 통일 (선택적) ====== */
[data-portal="host"] .nav__link.is-active,
[data-portal="host"] .nav__link:hover {
  color: var(--htp-accent) !important;
}
[data-portal="host"] .header__signup {
  background: var(--htp-accent) !important;
}
[data-portal="host"] .header__signup:hover {
  background: #9a330a !important;
}

/* ====== host-hero (group-programs) — large-text variant ====== */
.host-hero {
  background: var(--htp-bg) !important;
  background-image: none !important;
  padding: 96px 56px 80px !important;
  text-align: center !important;
  border-bottom: 1px solid var(--htp-rule) !important;
  color: var(--htp-ink) !important;
}
.host-hero > div {
  max-width: 900px !important;
  margin: 0 auto !important;
}
.host-hero h1 {
  font-family: var(--htp-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(48px, 6vw, 72px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  color: var(--htp-ink) !important;
  margin: 0 0 20px !important;
  text-shadow: none !important;
}
.host-hero p {
  font-family: var(--htp-sans) !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
  color: var(--htp-ink2) !important;
  max-width: 720px !important;
  margin: 0 auto 28px !important;
}
.host-hero a {
  font-family: var(--htp-sans) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
  border-radius: 999px !important;
  padding: 12px 28px !important;
}
.host-hero a[href*="register"] {
  background: var(--htp-accent) !important;
  border: 1px solid var(--htp-accent) !important;
  color: #fff !important;
}
.host-hero a[href*="login"] {
  background: var(--htp-ink) !important;
  border: 1px solid var(--htp-ink) !important;
  color: #fff !important;
}

/* host-page 컨텐츠 영역 — 프로덕션 사이트와 동일한 좌우폭 (900px) */
.host-page {
  background: var(--htp-bg) !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 40px 20px 80px !important;
}
.host-page__title {
  font-family: var(--htp-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--htp-ink) !important;
  margin: 0 0 12px !important;
}
.host-page__subtitle {
  font-family: var(--htp-sans) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--htp-ink2) !important;
  margin: 0 0 48px !important;
  max-width: 720px !important;
}
.host-page .section-title {
  font-family: var(--htp-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(24px, 2.4vw, 32px) !important;
  letter-spacing: -0.015em !important;
  color: var(--htp-ink) !important;
  border-bottom: 1px solid var(--htp-rule) !important;
  padding-bottom: 16px !important;
  margin-bottom: 24px !important;
}

/* ====== center alignment for hero / section / cta ====== */
.program-hero,
.program-hero__content,
.program-hero__title,
.program-hero__description,
.host-hero,
.section__title,
.section__subtitle,
.program-cta,
.program-cta__title,
.program-cta__text {
  text-align: center !important;
}
.section__subtitle,
.program-cta__text {
  margin-left: auto !important;
  margin-right: auto !important;
}
.program-cta__actions {
  justify-content: center !important;
}
/* guide.html host-activity-intro 두 번째 paragraph */
.container--narrow > p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 반응형 */
@media (max-width: 1024px) {
  .program-hero, .host-hero { padding: 56px 24px 48px !important; }
  .section { padding: 56px 24px !important; }
  .host-page { padding: 0 24px 64px !important; }
  .host-process,
  .program-cards { grid-template-columns: 1fr !important; }
  .host-process__card:nth-child(odd) { border-right: none !important; }
  .program-card { border-right: none !important; }
}