/* ============================================================
   과정 상세 페이지 전용  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)}
/* 2026-08-27 신설 — course-apply.js 가 신청 버튼 옆에 붙이는 개강일 안내.
   flex-basis:100% 로 버튼 줄 아래로 내려가게 한다(같은 줄에 나란히 붙으면 어색하다). */
.d-cta-date{flex-basis:100%;font-size:.82rem;color:var(--soft)}
.d-cta-date a{color:var(--teal,#3A8FB7);font-weight:600;text-decoration:none}
.d-cta-date a:hover{text-decoration:underline}

.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-cta) 바로 뒤에 오면 -10px 때문에 course-apply.js 가 붙이는 「모집 중인 기수」 줄과 겹친다
   (2026-10-04 용환 건의 54cc18e8). 버튼 줄 뒤에서는 위 여백을 양수로 둔다. */
.d-cta + .d-note{margin-top:12px}

.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)}

/* .d-gal 안에 <figure>+<figcaption> 마크업을 쓰는 페이지용 (2026-09-20 추가).
   기존 10개 페이지는 <img> 만 쓰므로 영향이 없다 — 이 규칙은 figure 가 있을 때만 걸린다.
   figure 기본 margin(1em 40px)을 지우지 않으면 그리드 칸 안에서 사진이 쪼그라든다. */
.d-gal figure{margin:0}
.d-gal figcaption{font-size:.88rem;color:var(--soft);margin-top:6px;text-align:center}

/* 목록의 보조 설명을 다음 줄로 내린다 (2026-09-20).
   종전에는 규칙이 아예 없어 <b>제목</b><span>설명</span> 이 「프롬프트6시간」처럼
   한 줄에 붙어 나왔다 — 17개 과정 페이지 전부에서 그랬다. */
.d-grp li b{display:block}
.d-grp li span{display:block;color:var(--soft);font-size:.93rem;font-weight:400;margin-top:2px}

/* 시간 구성도 (2026-09-20) — 글을 줄이고 시간 비중을 눈으로 보이게 한다.
   ★막대 길이는 「그 묶음 안에서의 비중」이다. 묶음끼리의 비교는 위의 96시간 띠가 맡는다.
     한 막대에 두 뜻(전체 대비·묶음 내 대비)을 담지 않으려고 일부러 갈랐다. */
.hsplit{display:flex;height:40px;border-radius:9px;overflow:hidden;margin:6px 0 10px}
.hsplit span{display:flex;align-items:center;justify-content:center;color:#fff;
             font-weight:700;font-size:.95rem;white-space:nowrap}
.hsplit .s-ai{background:#3A8FB7}
.hsplit .s-wd{background:var(--copper)}
.hlegend{font-size:.88rem;color:var(--soft);margin:0 0 4px}
.hlegend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.hlegend .k-ai{background:#3A8FB7}
.hlegend .k-wd{background:var(--copper)}

.hmap{display:grid;gap:8px;margin:12px 0 2px}
.hrow{display:grid;grid-template-columns:8.6em 1fr;gap:10px;align-items:center}
.hname{font-weight:700;color:var(--navy);font-size:.95rem;line-height:1.35}
.htrack{position:relative;background:var(--cream);border-radius:7px;min-height:32px;display:flex;align-items:center}
.hfill{position:absolute;left:0;top:0;bottom:0;border-radius:7px;opacity:.3}
.hai .hfill{background:#3A8FB7}
.hwd .hfill{background:var(--copper)}
.htext{position:relative;padding:6px 11px;font-size:.9rem;color:var(--ink);line-height:1.45}
.hh{font-weight:700;color:var(--navy);margin-right:6px}
@media(max-width:560px){
  .hrow{grid-template-columns:1fr;gap:3px}
  .hsplit span{font-size:.85rem}
}

/* .d-note 는 상단 여백이 -10px 이라 구성도 바로 뒤에 오면 막대와 겹친다 (2026-09-20 실측). */
.hmap + .d-note{margin-top:12px}

/* 4회차 흐름 (2026-09-20) — AI 16시간은 네 회차가 모두 4시간이라
   막대(비중)로는 보여 줄 것이 없다. 대신 「무엇이 남는가」의 흐름으로 보인다.
   ★같은 묶음이라도 시수가 같으면 막대를 쓰지 않는다 — 다 100%가 되어 뜻이 사라진다. */
.steps4{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px;margin:12px 0 6px}
.s4{background:var(--cream);border-radius:10px;padding:13px 14px;border-left:3px solid #3A8FB7}
.s4 .no{display:block;font-size:.78rem;font-weight:700;color:#3A8FB7;letter-spacing:.04em}
.s4 .t{display:block;font-weight:700;color:var(--navy);font-size:.98rem;margin-top:3px;line-height:1.4}
.s4 .d{display:block;font-size:.88rem;color:var(--soft);margin-top:6px;line-height:1.55}
.s4 .g{display:block;font-size:.86rem;color:var(--copper);font-weight:700;margin-top:8px;line-height:1.45}

@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}
}