/* ============================================================
   과정 상세 페이지 전용  2026-08-02
   [AI 생성 초안 - 검토 전]
   styles.css 를 그대로 쓰고 여기서 상세 페이지에만 필요한 것만 더한다.

   ⚠ 화질 원칙 : 포스터는 1400px 로 줄여 두었다. 그보다 크게 늘리지 않는다.
   ============================================================ */
.d-hero{background:var(--navy);color:#fff;padding:44px 0 40px;border-bottom:4px solid var(--c,#C67B3C)}
.d-back{display:inline-block;color:#9fb3c8;font-size:.86rem;margin-bottom:16px}
.d-back:hover{color:#fff}
.d-tag{display:inline-block;background:var(--c,#C67B3C);color:#fff;font-size:.72rem;font-weight:700;
       border-radius:999px;padding:4px 12px;margin-bottom:12px}
.d-hero h1{font-size:clamp(1.5rem,4vw,2.3rem);line-height:1.3;letter-spacing:-.02em}
.d-sub{color:#cbd6e2;margin-top:10px;font-size:1.02rem}
.d-slogan{color:var(--c,#C67B3C);margin-top:14px;font-weight:700;font-size:.95rem;line-height:1.6}

.d-lead{font-size:1.05rem;line-height:1.8;color:var(--ink);margin-bottom:26px;max-width:52em}

/* 한눈에 보는 표 — 숫자를 찾으러 온 사람이 가장 먼저 본다 */
.d-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
         background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.d-facts .fact{background:#fff;padding:16px 18px}
.d-facts dt{font-size:.76rem;color:var(--soft);font-weight:700;letter-spacing:.04em}
.d-facts dd{font-size:1.02rem;color:var(--navy);font-weight:700;margin-top:6px;line-height:1.5}

.d-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.btn-o{border:1px solid var(--line);color:var(--navy)}

.d-h2{font-size:clamp(1.2rem,2.6vw,1.6rem);color:var(--navy);margin-bottom:22px;
      padding-bottom:12px;border-bottom:2px solid var(--line)}
.d-note{color:var(--soft);font-size:.9rem;margin:-10px 0 18px}

.d-grp{margin-bottom:26px}
.d-grp h3{font-size:1.02rem;color:var(--copper);margin-bottom:10px}
.d-grp ul{list-style:none;display:grid;gap:8px}
.d-grp li{position:relative;padding-left:18px;line-height:1.7;color:var(--ink)}
.d-grp li::before{content:'';position:absolute;left:2px;top:.66em;width:6px;height:6px;
                  border-radius:50%;background:var(--copper)}

.d-vals{list-style:none;counter-reset:v;display:grid;gap:14px;max-width:62em}
.d-vals li{counter-increment:v;position:relative;padding-left:44px;line-height:1.75}
.d-vals li::before{content:counter(v);position:absolute;left:0;top:0;width:28px;height:28px;
    border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;
    font-size:.82rem;font-weight:700}

.d-merits{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.d-merits .m{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;
             line-height:1.7;font-size:.94rem}

/* 포스터 갤러리 — 원본 1400px 이하로만 표시 */
.d-gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.d-gal img{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--cream)}

.d-rel{display:flex;gap:10px;flex-wrap:wrap}
.d-rel a{background:#fff;border:1px solid var(--line);border-radius:999px;
         padding:9px 18px;font-size:.9rem;font-weight:600;color:var(--navy)}
.d-rel a:hover{border-color:var(--copper);color:var(--copper)}

@media(max-width:900px){
  .d-hero{padding:30px 0 28px}
  .d-facts{grid-template-columns:1fr 1fr}
  .d-cta .btn{flex:1;text-align:center}
  .d-gal{grid-template-columns:1fr}
}