/* =========================================================================
   detail.css — 과정 상세
   프로토타입 assets/css/style.css의 섹션 23를 그대로 옮긴 파일입니다.
   ※ 파일 순서(globals.css의 import 순서)가 곧 캐스케이드 순서입니다. 바꾸지 마세요.
   ========================================================================= */

/* --------------------------------------------------------------------------
   23. 상세페이지
   -------------------------------------------------------------------------- */
.detail-hero{
  position:relative; text-align:center; color:#fff; padding:46px 20px 42px;
  background:
    linear-gradient(180deg,rgba(8,26,54,.5) 0%,rgba(8,26,54,.78) 55%,var(--navy) 100%),
    linear-gradient(120deg,#3a6ea8,#7c9cc4);
  /* 실제 배경 사진 적용 시 두 번째 레이어를 url()로 교체 */
}
.detail-hero__gov{ display:inline-flex; align-items:center; gap:var(--s-3); font-size:var(--fs-sm); font-weight:700; margin-bottom:14px }
.detail-hero h1{ font-size:var(--fs-2xl); font-weight:700; letter-spacing:-.03em; line-height:1.25 }
.detail-hero__rule{ width:44px; height:1.5px; background:rgba(255,255,255,.5); margin:18px auto; border:0 }
.detail-hero p{ font-size:var(--fs-sm); color:rgba(255,255,255,.82); max-width:62ch; margin:0 auto; line-height:1.7 }

.detail-spec{
  max-width:var(--container); margin:-20px auto 0; padding:0 20px;
  display:grid; grid-template-columns:1.75fr 1fr; gap:var(--s-5); position:relative; z-index:2;
}
.spec-card{
  background:var(--surface); border-radius:var(--r-lg); padding:22px 24px;
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4) var(--s-8);
}
.spec-card div{ display:flex; gap:var(--s-4); align-items:center; font-size:var(--fs-sm); color:var(--ink-3) }
.spec-card .label{
  flex-shrink:0; min-width:64px; text-align:center;
  background:var(--surface-sunken); border-radius:var(--r-sm); padding:3px 8px;
  font-size:var(--fs-xs); font-weight:700; color:var(--muted);
}
.spec-card b{ color:var(--ink); font-weight:700 }
.spec-card .is-fee{ color:var(--red); font-weight:700 }

.reg-card{ background:var(--surface); border-radius:var(--r-lg); padding:22px; text-align:center }
.reg-card__label{ font-size:var(--fs-xs); color:var(--muted) }
.reg-card__no{
  font-size:var(--fs-lg); font-weight:700; color:var(--navy);
  letter-spacing:-.02em; margin:3px 0 8px; font-variant-numeric:tabular-nums;
}
.reg-card p{ font-size:var(--fs-xs); color:var(--faint); line-height:1.6; margin-bottom:12px }

.free-band{ max-width:var(--container); margin:16px auto 0; padding:0 20px }
.free-band__in{
  background:var(--blue-soft); border-radius:var(--r-lg); padding:22px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-6); flex-wrap:wrap;
}
.free-band__label{ font-size:var(--fs-sm); font-weight:700; color:var(--blue); margin-bottom:4px }
.free-band h2{
  font-size:var(--fs-xl); font-weight:700; color:var(--ink); letter-spacing:-.025em;
  display:flex; align-items:baseline; gap:var(--s-4); flex-wrap:wrap;
}
.free-band h2 .zero{ font-size:var(--fs-2xl); color:var(--navy) }
.free-band h2 del{ font-size:var(--fs-md); color:var(--faint); font-weight:700 }
.free-band__note{ font-size:var(--fs-xs); color:var(--muted); margin-top:6px }

/* 탭 밑줄 — 기능적 최소선 유지 */
.detail-tabs{
  display:flex; overflow-x:auto;
  max-width:var(--container); margin:34px auto 22px; padding:0 20px;
  background:linear-gradient(to top,var(--line) 0 1.5px,transparent 1.5px);
}
.detail-tabs a{
  padding:12px 18px; font-size:var(--fs-sm); font-weight:700; color:var(--faint);
  border-bottom:2.5px solid transparent; white-space:nowrap;
}
.detail-tabs a:hover{ color:var(--ink-2) }
.detail-tabs a[aria-current="true"]{ color:var(--blue); border-color:var(--blue) }

.detail-block{ background:var(--surface); border-radius:var(--r-lg); padding:24px; margin-bottom:14px }
.detail-block h2{ font-size:var(--fs-md); font-weight:700; color:var(--ink); margin-bottom:14px }
.detail-block h2 .sub{ font-weight:600; color:var(--faint); font-size:var(--fs-sm) }
.detail-block > p{ font-size:var(--fs-sm); color:var(--muted) }

.who-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-4)}
.who{ background:var(--surface-sunken); border-radius:var(--r-lg); padding:15px; font-size:var(--fs-xs); color:var(--muted) }
.who .ph{ margin-bottom:9px }
.who b{ display:block; color:var(--ink); font-size:var(--fs-sm); margin-bottom:3px }

.req-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-4); text-align:center }
/* 발급요건 링차트 카드 — div.req로 한정해 폼 별표(span.req)와 분리 */
div.req{ background:var(--surface-sunken); border-radius:var(--r-lg); padding:18px 12px }
.req__label{ font-size:var(--fs-xs); font-weight:700; color:var(--muted); margin-bottom:10px }
.ring{
  width:60px; height:60px; margin:0 auto 10px; border-radius:50%; position:relative;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-md); font-weight:700; color:var(--navy);
  background:conic-gradient(var(--blue) 0 var(--pct,60%),var(--line) 0);
}
.ring::after{ content:""; position:absolute; inset:7px; border-radius:50%; background:var(--surface-sunken) }
.ring span{ position:relative; z-index:1 }
.req__desc{ font-size:var(--fs-xs); color:var(--faint); line-height:1.5 }

.curriculum{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-1) var(--s-5)}
.curriculum li{
  display:flex; gap:var(--s-4); align-items:center; padding:9px 12px; font-size:var(--fs-sm);
  background:var(--surface-sunken); border-radius:var(--r-md);
}
.curriculum .no{
  flex-shrink:0; background:var(--navy); color:#fff; border-radius:var(--r-sm);
  padding:2px 7px; font-size:var(--fs-xs); font-weight:700; font-variant-numeric:tabular-nums;
}
.curriculum .title{ color:var(--ink-3) }
.curriculum__more{
  grid-column:1/-1; justify-content:center; background:none !important;
  font-size:var(--fs-xs); color:var(--faint); padding-top:10px;
}

/* 표 — 테두리 + 라운드는 .dtable과 동일한 방식 (radius를 잘라내려면 separate + overflow) */
.info-table{
  border-collapse:separate; border-spacing:0; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.info-table th{
  background:var(--surface-sunken); color:var(--muted); font-weight:700;
  text-align:left; padding:11px 15px; width:120px;
  border-bottom:1px solid var(--line);
}
.info-table td{ padding:11px 15px; color:var(--ink-3); border-bottom:1px solid var(--line) }
.info-table tr:last-child th,
.info-table tr:last-child td{ border-bottom:0 }

.notice{
  display:flex; gap:var(--s-4); align-items:flex-start;
  background:var(--red-soft); border-radius:var(--r-lg);
  padding:15px 17px; font-size:var(--fs-sm); color:var(--red); line-height:1.75;
}
.notice--info{ background:var(--surface-sunken); color:var(--muted) }
.notice b{ color:inherit; font-weight:700 }

.detail-cta{
  position:sticky; bottom:0; z-index:40; background:#fff; padding:15px 20px;
  box-shadow:0 -4px 16px rgba(0,0,0,.10);
  display:flex; align-items:center; justify-content:center; gap:var(--s-5); flex-wrap:wrap;
}
/* 데스크탑: 래퍼를 투명 처리(display:contents)해 4요소를 한 줄로, 순서만 원래대로 유지 */
.detail-cta__top, .detail-cta__bottom{ display:contents }
.detail-cta__label{ order:1 }
.detail-cta .timer{ order:2 }
.detail-cta__left{ order:3 }
/* 이벤트·카운트다운·남았습니다는 붙여 두고, 신청 버튼만 넉넉히 띄웁니다 */
.detail-cta .btn--cta{ order:4; margin-left:28px }
/* 무료수강 이벤트 라벨 — 알람 아이콘 + 파란 강조 (Figma 576) */
.detail-cta__label{ display:flex; align-items:center; gap:var(--s-3); font-size:var(--fs-md); font-weight:700; color:#0039B2 }
.detail-cta__alarm{ width:30px; height:30px; flex-shrink:0 }
.detail-cta__left{ font-size:var(--fs-md); font-weight:700; color:var(--ink) }

/* 카운트다운 — 각 자릿수가 개별 연블루 박스 */
.timer{ display:flex; align-items:center; gap:var(--s-2); font-variant-numeric:tabular-nums }
.timer__unit{ display:flex; gap:var(--s-1)}
.timer__box{
  display:flex; align-items:center; justify-content:center;
  min-width:34px; height:46px; padding:0 6px;
  background:var(--blue-soft); color:var(--navy);
  border-radius:var(--r-sm); font-size:var(--fs-2xl); font-weight:700; line-height:1;
}
.timer__sep{ text-decoration:none; color:#596E83; font-size:var(--fs-xl); font-weight:700; margin:0 2px }

/* CTA 버튼 — Figma #0039B2 */
.btn--cta{ background:#0039B2; color:#fff; padding:14px 30px; font-size:var(--fs-md); border-radius:var(--r-md) }
.btn--cta:hover{ background:#002d8c }

/* 모바일 — 참고 이미지 구조: 위(라벨+큰 버튼) / 아래(큰 카운트다운+남았습니다) 2줄.
   색상은 그대로, 배치·크기만 변경합니다. */
@media (max-width:560px){
  .detail-cta{ flex-direction:column; align-items:stretch; gap:var(--s-5); padding:14px 18px }
  .detail-cta__top{ display:flex; align-items:center; gap:var(--s-5)}
  .detail-cta__bottom{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3)}
  .detail-cta__label{ flex-shrink:0; font-size:var(--fs-sm); line-height:1.2 }
  .detail-cta__alarm{ width:26px; height:26px }
  .detail-cta .btn--cta{ flex:1; margin-left:0; padding:15px 20px; font-size:var(--fs-lg); font-weight:700 }
  /* 카운트다운을 아래 줄에 크게 */
  .detail-cta .timer{ gap:var(--s-1)}
  .timer__unit{ gap:var(--s-1)}
  .timer__box{ min-width:29px; height:42px; padding:0 3px; font-size:var(--fs-2xl) }
  .timer__sep{ font-size:var(--fs-lg); margin:0 1px }
  .detail-cta__left{ flex-shrink:0; font-size:var(--fs-sm); line-height:1.2; text-align:right }
}