/* ==========================================================================
   휴먼아크 컴포넌트 (Components)
   --------------------------------------------------------------------------
   여러 페이지에서 재사용되는 UI 요소들 — 버튼·카드·태그·폼 등.
   ========================================================================== */


/* ==========================================================================
   1. 버튼 (Button)
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--duration-normal) var(--ease-out);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.btn:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* 버튼 크기 변형 */
.btn--sm {
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-sm);
}

.btn--lg {
  padding: var(--space-5) var(--space-7);
  font-size: var(--fs-md);
}

/* Primary — 골드 채운 버튼 (메인 CTA) */
.btn--primary {
  background-color: var(--color-gold);
  color: var(--color-navy);
  border-color: var(--color-gold);
  box-shadow: var(--shadow-gold);
}

.btn--primary:hover {
  background-color: var(--color-gold-deep);
  border-color: var(--color-gold-deep);
  color: var(--color-navy);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201, 168, 76, 0.35);
}

.btn--primary:active {
  transform: translateY(0);
}

/* Secondary — 골드 외곽선 (보조 CTA) */
.btn--secondary {
  background-color: transparent;
  color: var(--color-gold-deep);
  border-color: var(--color-gold);
}

.btn--secondary:hover {
  background-color: var(--color-gold-mist);
  color: var(--color-navy);
  border-color: var(--color-gold);
}

/* Navy — 네이비 채운 버튼 */
.btn--navy {
  background-color: var(--color-navy);
  color: var(--color-cream);
  border-color: var(--color-navy);
}

.btn--navy:hover {
  background-color: var(--color-navy-soft);
  border-color: var(--color-navy-soft);
  color: var(--color-cream);
  transform: translateY(-2px);
}

/* Ghost — 배경 없는 텍스트 버튼 */
.btn--ghost {
  background-color: transparent;
  color: var(--color-navy);
  border-color: transparent;
}

.btn--ghost:hover {
  background-color: var(--color-cream-deep);
  color: var(--color-navy);
}

/* 네이비 배경 위 버튼 변형 */
.section--navy .btn--secondary {
  color: var(--color-gold);
  border-color: var(--color-gold);
}

.section--navy .btn--secondary:hover {
  background-color: var(--color-gold);
  color: var(--color-navy);
}

/* 버튼 화살표 — hover 시 이동 */
.btn__arrow {
  display: inline-block;
  transition: transform var(--duration-normal) var(--ease-out);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}


/* ==========================================================================
   2. 카드 (Card) — 모듈형 카드 구조
   ========================================================================== */

.card {
  background-color: #FFFFFF;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: all var(--duration-normal) var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
  height: 100%;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-gold-soft);
}

/* 카드 — 골드 강조 변형 */
.card--featured {
  border-color: var(--color-gold);
  background: linear-gradient(
    180deg,
    var(--color-cream-soft) 0%,
    #FFFFFF 100%
  );
}

/* 카드 — 네이비 배경 변형 */
.card--navy {
  background-color: var(--color-navy);
  color: var(--color-text-on-navy);
  border-color: var(--color-navy-soft);
}

.card--navy:hover {
  border-color: var(--color-gold);
}

/* 카드 헤더 (번호·아이콘 + 카테고리) */
.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.card__number {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-light);
  font-style: italic;
  color: var(--color-gold);
  line-height: 1;
}

.card__category {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--color-gold-deep);
}

/* 카드 타이틀 */
.card__title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--color-navy);
}

.card--navy .card__title {
  color: var(--color-text-on-navy);
}

/* 카드 본문 */
.card__body {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-soft);
  flex-grow: 1;
}

.card--navy .card__body {
  color: rgba(248, 245, 238, 0.8);
}

/* 카드 푸터 (링크) */
.card__footer {
  margin-top: auto;
  padding-top: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-gold-deep);
  font-family: var(--font-display);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.card__footer-arrow {
  transition: transform var(--duration-normal) var(--ease-out);
}

.card:hover .card__footer-arrow {
  transform: translateX(4px);
}


/* ==========================================================================
   3. 상태 태그 (Status Badge)
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  border-radius: var(--radius-full);
  border: 1px solid;
}

.badge--ready {
  background-color: var(--color-gold-mist);
  color: var(--color-gold-deep);
  border-color: var(--color-gold);
}

.badge--progress {
  background-color: rgba(11, 31, 58, 0.06);
  color: var(--color-navy);
  border-color: var(--color-navy-mist);
}

.badge--coming {
  background-color: transparent;
  color: var(--color-text-mute);
  border-color: var(--color-text-mute);
  border-style: dashed;
}

/* 점 표시 */
.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: currentColor;
}

.badge--ready .badge__dot {
  background-color: var(--color-gold);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}


/* ==========================================================================
   4. 섹션 헤더 (Section Header) — 섹션 시작 부분의 제목 영역
   ========================================================================== */

.section-header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.section-header--left {
  text-align: left;
}

.section-header__eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  font-style: italic;
  color: var(--color-gold-deep);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  position: relative;
  padding-left: var(--space-6);
}

/* eyebrow 앞 골드 짧은 가로선 — Arc 미니멀 표현 */
.section-header__eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.5rem;
  height: 1px;
  background-color: var(--color-gold);
}

.section-header--center .section-header__eyebrow {
  padding-left: 0;
}

.section-header--center .section-header__eyebrow::before {
  display: none;
}

.section-header__title {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--color-navy);
  margin-bottom: var(--space-4);
}

.section--navy .section-header__title {
  color: var(--color-text-on-navy);
}

.section-header__subtitle {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text-soft);
  max-width: 640px;
  margin: 0 auto;
}

.section-header--left .section-header__subtitle {
  margin-left: 0;
}

.section--navy .section-header__subtitle {
  color: rgba(248, 245, 238, 0.75);
}


/* ==========================================================================
   5. Arc 모티프 — 가교 곡선 (작은 장식 요소)
   ========================================================================== */

.arc-divider {
  display: block;
  margin: var(--space-7) auto;
  width: min(60%, 400px);
  height: 24px;
}

.arc-divider svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}


/* ==========================================================================
   6. 폼 요소 (Form)
   ========================================================================== */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.form-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-navy);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-base);
  font-family: var(--font-sans);
  color: var(--color-navy);
  background-color: #FFFFFF;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-out);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--color-gold);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-gold-mist);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-mute);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
  font-family: var(--font-sans);
}


/* ==========================================================================
   7. 외부 링크 표시 (External Link)
   ========================================================================== */

.external-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.external-link::after {
  content: '↗';
  font-size: 0.9em;
  opacity: 0.7;
  transition: transform var(--duration-fast) var(--ease-out);
}

.external-link:hover::after {
  opacity: 1;
  transform: translate(2px, -2px);
}


/* ==========================================================================
   8. 인용문 (Quote)
   ========================================================================== */

.quote {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  line-height: var(--lh-relaxed);
  color: var(--color-navy);
  font-style: italic;
  position: relative;
  padding-left: var(--space-6);
  border-left: 3px solid var(--color-gold);
  margin: var(--space-6) 0;
}

.section--navy .quote {
  color: var(--color-text-on-navy);
}


/* ==========================================================================
   9. 그리드 레이아웃 (Grid)
   ========================================================================== */

.grid {
  display: grid;
  gap: var(--space-5);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 960px) {
  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }
}