/* ════════════════════════════════════════════
   program.css — Programs 전용
════════════════════════════════════════════ */

/* ════════════════════════════════
   PROGRAM — Architecture
════════════════════════════════ */

/* ── Hero ── */
#prog-hero { padding-top:140px; background:var(--cream); }
.prog-hero-inner { padding:0 56px; }
.prog-hero-breadcrumb {
  font-size:9px; letter-spacing:.28em; color:var(--warm);
  text-transform:uppercase; margin-bottom:24px;
  display:flex; align-items:center; gap:16px;
}
.prog-hero-breadcrumb a { color:var(--warm); text-decoration:none; transition:color .2s; }
.prog-hero-breadcrumb a:hover { color:var(--gold); }
.prog-hero-breadcrumb span { color:rgba(140,90,58,.35); }
.prog-hero-label {
  font-family:'DM Sans',sans-serif;
  font-size:9px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); margin-bottom:20px;
  display:flex; align-items:center; gap:12px;
}
.prog-hero-label::before { content:''; width:24px; height:1px; background:var(--gold); opacity:.5; }
.prog-hero-title {
  font-family:'Marcellus','Pretendard',sans-serif;
  font-size:clamp(44px,7vw,96px);
  letter-spacing:.02em; line-height:1.0;
  color:var(--dark); text-transform:uppercase;
  margin-bottom:64px;
}

/* ── Steps ── */
#arch-steps {
  background:var(--cream);
  border-top:1px solid var(--gb);
  padding:100px 56px;
}

/* 인트로 */
.arch-intro {
  text-align:center;
  max-width:600px;
  margin:0 auto 88px;
}
.arch-intro-title {
  font-family:'Marcellus','Pretendard',sans-serif;
  font-size:clamp(24px,2.6vw,36px);
  letter-spacing:.03em; line-height:1.5;
  color:var(--dark); margin-bottom:28px;
}
.arch-intro-div {
  width:1px; height:56px;
  background:rgba(140,90,58,.35);
  margin:0 auto 28px;
}
.arch-intro-desc {
  font-size:16px; font-weight:400; line-height:2.4;
  color:rgba(60,44,28,.55); letter-spacing:.01em;
}

/* 카드 목록 */
.arch-cards {
  max-width:1100px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:32px;
}

/* 카드 */
.arch-card {
  background:var(--off);
  padding:56px 64px 48px;
}

/* 카드 헤더 */
.arch-card-head {
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:12px 24px;
  margin-bottom:20px;
  padding-bottom:20px;
  border-bottom:1px solid var(--gb);
}
.arch-card-step {
  font-family:'DM Sans',sans-serif;
  font-size:9px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); flex-shrink:0;
}
.arch-card-title {
  font-family:'Marcellus','Pretendard',sans-serif;
  font-size:clamp(21px,2.1vw,28px);
  letter-spacing:.03em; color:var(--dark);
}
.arch-card-sub {
  font-family:'DM Sans',sans-serif;
  font-size:10px; letter-spacing:.1em;
  color:rgba(140,90,58,.4);
  margin-left:auto;
}

/* 설명 */
.arch-card-desc {
  font-size:16.5px; font-weight:400; line-height:1.6;
  color:rgba(60,44,28,.62); letter-spacing:.01em;
  margin-bottom:32px;
}

/* 아이콘 그리드 */
.arch-icon-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}
.arch-icon-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  text-align:center;
}
.arch-icon-circle {
  width:152px; height:152px;
  border-radius:50%;
  border:1px solid rgba(140,90,58,.18);
  background:var(--cream);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.arch-icon-circle svg {
  width:96px; height:96px;
  color:#8c5a3a;
  max-width:86px; max-height:86px;
}
.arch-icon-item p {
  font-size:16.5px; font-weight:400;
  color:rgba(60,44,28,.65); letter-spacing:.01em;
  display:flex; flex-direction:column; gap:3px; align-items:center;
}
.arch-icon-item p strong {
  font-weight:600;
  color:var(--dark);
  font-size:16.5px;
  line-height:1.3;
}
.arch-icon-item p span {
  font-size:13.5px;
  color:rgba(60,44,28,.55);
  line-height:1.3;
}

@media(max-width:900px) {
  #arch-steps { padding:64px 24px 80px; }
  .arch-cards  { gap:24px; }
  .arch-card   { padding:40px 24px 36px; }
  .arch-card-sub { margin-left:0; }
  .arch-icon-grid { gap:20px; }
  .arch-icon-circle { width:88px; height:88px; }
  .arch-icon-circle svg { width:54px; height:54px; }
  .arch-icon-item p { font-size:11px; }
}

/* ── CTA ── */
#arch-cta {
  background:var(--dark);
  border-top:1px solid rgba(140,90,58,.2);
}
.arch-cta-inner {
  padding:80px 56px;
  display:flex; align-items:center;
  justify-content:space-between; gap:48px;
  flex-wrap:wrap;
}
.arch-cta-copy { display:flex; flex-direction:column; gap:12px; }
.arch-cta-label {
  font-family:'DM Sans',sans-serif;
  font-size:9px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(140,90,58,.7);
}
.arch-cta-txt {
  font-family:'Marcellus','Pretendard',sans-serif;
  font-size:clamp(20px,2.2vw,28px);
  letter-spacing:.03em; line-height:1.4;
  color:var(--cream);
}
.arch-cta-btns { display:flex; gap:10px; flex-shrink:0; flex-wrap:wrap; }

/* btn-kk / btn-ph — arch-cta 안 */
#arch-cta .btn-kk {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px;
  font-family:'Pretendard',sans-serif; font-size:13.5px;
  letter-spacing:.02em;
  text-decoration:none; color:#fff;
  background:var(--gold); border:1px solid var(--gold);
  transition:background .25s, border-color .25s;
}
#arch-cta .btn-kk:hover { background:var(--gold-h); border-color:var(--gold-h); }
#arch-cta .btn-ph {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px;
  font-family:'Pretendard',sans-serif; font-size:13.5px;
  letter-spacing:.02em;
  text-decoration:none; color:var(--cream);
  background:none; border:1px solid rgba(245,240,232,.25);
  transition:border-color .25s, color .25s;
}
#arch-cta .btn-ph:hover { border-color:var(--cream); }

/* ── Responsive ── */
@media(max-width:900px) {
  .prog-hero-inner { padding:0 24px; }
  .prog-hero-title { margin-bottom:40px; }
  .arch-steps-grid { grid-template-columns:1fr; }
  .arch-step { padding:40px 24px; }
  .arch-step-svg { width:64px; height:64px; }
  .arch-step-num { font-size:clamp(36px,10vw,56px); }
  .arch-cta-inner { padding:56px 24px; flex-direction:column; align-items:flex-start; }
}

/* ── 패럴랙스 인테리어 사진 ── */
.arch-parallax {
  width:100%;
  height:480px;
  overflow:hidden;
  position:relative;
}
.arch-parallax-bg {
  position:absolute;
  inset:-12% 0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  animation:archZoom 14s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes archZoom {
  0%   { transform:scale(1) translateY(0); }
  100% { transform:scale(1.1) translateY(-4%); }
}
.arch-parallax-overlay {
  position:absolute; inset:0;
  background:linear-gradient(
    to bottom,
    rgba(26,17,10,.4) 0%,
    rgba(26,17,10,.12) 40%,
    rgba(26,17,10,.12) 60%,
    rgba(26,17,10,.45) 100%
  );
}
.arch-parallax-label {
  position:absolute; z-index:2;
  bottom:40px; left:56px;
  font-family:'DM Sans',sans-serif;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(235,220,200,.65);
  display:flex; align-items:center; gap:12px;
}
.arch-parallax-label::before {
  content:''; display:inline-block;
  width:24px; height:1px;
  background:rgba(196,154,104,.5);
  flex-shrink:0;
}

@media(max-width:900px) {
  .arch-parallax { height:260px; }
  .arch-parallax-bg { inset:-8% 0; }
  .arch-parallax-label { left:24px; bottom:20px; font-size:9px; }
}