/* 강의 소개(/courses) 전용 — 매거진 표지 + 강의 안내판 + 도장.
   공용 규격은 /lp/ai_bootcamp_01/vibe.css, 공용 카드·후기 규칙은 courses.css 가 맡고 여기엔 이 페이지 것만 둔다.
   마크업은 scripts/make-course-pages.py 의 build_index() 가 만든다(2026-09-11 시안 45 를 그대로 옮김).
   · 표지: 세 줄 제목(넓은 화면에서 세 줄 고정) · 뒤집히는 숫자판(광고비 100억 / 400억 매출) · 엘런 사진 + "검증된 것만 공개" 도장
   · 안내판: 설명 세 문장(안내/안내/주의) → 목차 번호 01~05 · 판매 상태 도장
   클래스 앞머리(c9-·c8-·c6-·c42-)는 시안 번호에서 온 이름이다 — 표지 c9, 안내판 c8, 도장 c6·c42 */
/* ── 공통 바탕 (모든 시안 같다) ──
   작은 글자에 쓰는 강조색은 흰 바탕 대비 4.5:1 을 넘는 한 톤 짙은 파랑을 쓴다 */
:root{ --k-acc:#2F66D8; --k-red:#C0333B; --k-green:#15803D; }
:root[data-theme="dark"]{ --k-acc:#8FB3F5; --k-red:#FF8A8F; --k-green:#5BD69A; }
/* 건너뛰기 링크는 위치 대신 transform 으로 드나든다 */
.skip-link{ top:12px; transform:translateY(-220%); transition:transform .2s ease; }
.skip-link:focus{ transform:none; }
header.top .btn.sm{ background:#2F66D8; color:#fff; }


/* 09 매거진 표지 — 아주 큰 제목, 얇은 선, 엘런 원형 사진과 이름, 설명은 인용 블록. 목록은 번호 붙은 기사 목차 */

.c9-cover{ padding:36px 0 64px; background:var(--ground); }
.c9-mast{ position:relative; display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:14px 0 12px; border-top:4px solid var(--ink); }
.c9-mast::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ink);
  transform-origin:left; animation:c9-rule .9s cubic-bezier(.6,0,.2,1) .1s both; }
.c9-name{ font-size:15px; font-weight:800; letter-spacing:.32em; color:var(--ink); }
.c9-meta{ font-size:13px; letter-spacing:.08em; color:var(--ink-soft); }

.c9-body{ margin-top:44px; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:64px; align-items:start; }
.c9-cover h1{ font-size:clamp(44px, 7.4vw, 116px); line-height:1.02; letter-spacing:-.055em; color:var(--ink); font-weight:250; }
.c9-cover h1 span{ display:block; animation:c9-up .8s cubic-bezier(.2,.7,.2,1) both; }
.c9-cover h1 .l2{ font-weight:900; animation-delay:.1s; }
.c9-cover h1 .l3{ animation-delay:.2s; }

.c9-body{ align-items:center; }
.c9-side{ display:flex; justify-content:center; }
/* 인용 블록이 빠진 자리 — 사진을 키우고 이름을 사진 아래에 둔다 */
.c9-por{ margin:0; display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.c9-por .ring{ position:relative; flex:0 0 auto; width:min(236px, 22vw); aspect-ratio:1/1; border-radius:50%; overflow:hidden;
  background:#111; box-shadow:0 0 0 1px var(--ink), 0 0 0 10px var(--ground), 0 0 0 11px var(--ink); margin:11px; }
/* 원본은 넓은 사진이라 얼굴 부분만 크게 당겨 온다 */
.c9-por .ring img{ position:absolute; max-width:none; width:284%; height:auto; left:-167%; top:-70%; }
.c9-por figcaption{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.c9-por figcaption b{ font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.c9-por figcaption span{ font-size:13.5px; line-height:20px; color:var(--ink-soft); }

.sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* 숫자판 — 표지 맨 아래에 놓인 검정 판. 바탕·글자 모두 고정값(다크 모드에서도 같다) */
.c9-figs{ margin-top:56px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-radius:18px;
  background:#0E0F12; border:1px solid #23262C; box-shadow:0 24px 40px -30px rgba(0,0,0,.5); overflow:hidden;
  container-type:inline-size; }
.c9-figs .f{ display:flex; align-items:center; gap:18px; min-width:0; padding:30px 32px; }
.c9-figs .f + .f{ border-left:1px solid #23262C; }
.c9-figs .k{ flex:0 0 auto; font-size:17px; font-weight:800; letter-spacing:.1em; color:#D7DAE0; }
/* 숫자 한 글자 = 판 한 장. 가운데 가로줄이 뒤집히는 판처럼 보이게 */
/* 타일 크기는 숫자판 폭을 기준으로 — 한 칸(판 폭의 절반)에 이름표 + 타일 넉 장이 넘치지 않는 가장 큰 크기, 위로는 116px 까지 */
.c9-figs .flap{ display:flex; gap:.07em; font-size:clamp(40px, calc(13.5cqi - 40px), 116px); perspective:600px; }
.c9-figs .flap i{ position:relative; display:grid; place-items:center; width:.78em; height:1.14em; font-style:normal;
  font-size:1em; line-height:1; font-weight:800; letter-spacing:0; color:#FFD24D; border-radius:.08em;
  background:linear-gradient(180deg,#1C1E23 0 50%,#141619 50% 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  font-variant-numeric:tabular-nums; transform-origin:50% 50%; animation:c8-flip .55s cubic-bezier(.3,.8,.3,1) both; animation-delay:.45s; }
.c9-figs .flap i.u{ width:1.1em; }
.c9-figs .flap i::after{ content:""; position:absolute; left:0; right:0; top:50%; height:max(1px,.015em); background:rgba(0,0,0,.75); }
/* 판이 차례로 한 번 뒤집히며 자리 잡는다 — 전광판이 막 바뀐 느낌 */
.c9-figs .f .flap i:nth-child(2){ animation-delay:.53s; } .c9-figs .f .flap i:nth-child(3){ animation-delay:.61s; }
.c9-figs .f .flap i:nth-child(4){ animation-delay:.69s; }
.c9-figs .f + .f .flap i:nth-child(1){ animation-delay:.75s; } .c9-figs .f + .f .flap i:nth-child(2){ animation-delay:.83s; }
.c9-figs .f + .f .flap i:nth-child(3){ animation-delay:.91s; } .c9-figs .f + .f .flap i:nth-child(4){ animation-delay:.99s; }

/* 선이 왼쪽에서 오른쪽으로 그어지고 제목 줄이 차례로 올라온다 — 인쇄물이 펼쳐지는 느낌 하나만 */
@keyframes c9-rule{ from{ transform:scaleX(0); } to{ transform:none; } }
@keyframes c9-up{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }

@media (max-width:980px){
  .c9-body{ grid-template-columns:minmax(0,1fr); gap:36px; margin-top:28px; }
  .c9-side{ justify-content:flex-start; }
  .c9-por{ flex-direction:row; gap:20px; text-align:left; }
  .c9-por .ring{ width:168px; }
  .c9-por figcaption{ align-items:flex-start; }
}
@media (max-width:640px){
  .c9-cover{ padding:20px 0 44px; }
  .c9-name{ font-size:13px; letter-spacing:.2em; }
  .c9-meta{ font-size:12px; }
  .c9-cover h1{ font-size:clamp(38px, 11.2vw, 52px); line-height:1.06; }
  .c9-side{ justify-content:flex-start; }
  .c9-por{ flex-direction:row; gap:14px; text-align:left; }
  .c9-por .ring{ width:92px; box-shadow:0 0 0 1px var(--ink), 0 0 0 5px var(--ground), 0 0 0 6px var(--ink); margin:6px; }
  .c9-por figcaption{ align-items:flex-start; }
  .c9-por figcaption b{ font-size:22px; }
  .c9-por figcaption span{ font-size:12.5px; }
  /* 좁은 화면에서는 숫자를 제목 바로 아래로 올린다 — 첫 화면에 제목과 숫자가 같이 보이게 */
  .c9-cover .wrap-wide{ display:flex; flex-direction:column; }
  .c9-body{ display:contents; }
  .c9-cover h1{ order:1; margin-top:24px; }
  .c9-figs{ order:2; margin-top:22px; }
  .c9-side{ order:3; margin-top:30px; }
  .c9-figs{ grid-template-columns:minmax(0,1fr); border-radius:14px; }
  /* 두 줄로 쌓되 타일 시작점을 맞춘다: [이름표 칸][타일][뒤 이름표] */
  .c9-figs .f{ display:grid; grid-template-columns:46px auto minmax(0,1fr); gap:12px; padding:16px 18px; }
  .c9-figs .f > .k:first-child{ grid-column:1; }
  .c9-figs .f .flap{ grid-column:2; }
  .c9-figs .f .flap + .k{ grid-column:3; }
  .c9-figs .f + .f{ border-left:0; border-top:1px solid #23262C; }
  .c9-figs .flap{ font-size:clamp(34px, 12.8vw, 60px); }
  .c9-figs .k{ font-size:14px; }
}

/* ── 제목 세 줄 고정 (넓은 화면) ──
   줄마다 한 줄을 넘지 않게 묶고, 글자 크기는 제목 칸 폭을 기준으로 잡는다 — 원래 크기를 쓰되 가장 긴 첫 줄이 칸을 넘을 것 같으면 그만큼 줄인다 */
@media (min-width:641px){
  .c9-body > h1{ container-type:inline-size; }
  .c9-cover h1 span{ white-space:nowrap; font-size:min(7.4vw, 116px, 16cqi); }
}

/* ── 강의 안내판 자리: 표지(흰) 아래 검정 띠 위에 08 의 전광판을 그대로 얹는다. 바탕·글자 모두 고정값 ── */
.x-band{ padding-block:72px 110px; background:#07080A; color:#fff; }
.x-band .c8-board{ margin-top:0; }
/* ── 전광판 ── */
.c8-board{ margin-top:56px; border-radius:18px; overflow:hidden; background:#0E0F12;
  border:1px solid #23262C; box-shadow:0 30px 60px -30px rgba(0,0,0,.8); }
.c8-bar{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  padding:16px 24px; background:#16181C; border-bottom:1px solid #23262C; }
.c8-bar .t{ font-size:15px; font-weight:800; letter-spacing:.2em; color:#FFD24D; }
.c8-bar .lg{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:#AEB3BB; }
.c8-bar .lg .lamp.off{ margin-left:8px; }
/* 공지 줄 — 강의 안내 막대 바로 아래. 목록보다 먼저 읽히는 판의 규칙 */
.c8-notice{ display:flex; flex-direction:column; gap:10px; padding:20px 24px 22px; background:#121317; border-bottom:1px solid #23262C; perspective:600px; }
.c8-notice li{ display:flex; gap:12px; align-items:baseline; transform-origin:50% 0; animation:c8-flip .55s cubic-bezier(.3,.8,.3,1) both; }
.c8-notice li:nth-child(1){ animation-delay:.3s; } .c8-notice li:nth-child(2){ animation-delay:.38s; } .c8-notice li:nth-child(3){ animation-delay:.46s; }
.c8-notice .lab{ flex:0 0 auto; padding:3px 7px; border-radius:5px; font-size:12px; font-weight:800; line-height:1.3;
  background:#FFD24D; color:#141414; }
.c8-notice .tx{ min-width:0; font-size:15.5px; line-height:25px; color:#C9CDD4; }
.c8-notice li.warn .lab{ background:#FF5A5F; color:#1A0506; }
.c8-notice li.warn .tx{ color:#fff; font-weight:700; }

/* 목차 번호 칸(37) — 번호 칸이 맨 앞에 선다 */
.c8-cols, .c8-row{ display:grid; grid-template-columns:96px minmax(0,2.2fr) minmax(0,1fr) 124px 112px; gap:20px; align-items:center; }
.c8-cols{ padding:10px 24px; font-size:12px; font-weight:700; letter-spacing:.14em; color:#8A9099; border-bottom:1px solid #23262C; }
.c8-cols > span:first-child{ grid-column:2; }

.c8-grp{ padding:0; }
/* 그룹 줄 — 앞에 얇은 로마 숫자(37) */
.c8-gt{ display:flex; align-items:center; gap:20px; padding:14px 24px 12px; font-size:14.5px; line-height:1.3; font-weight:800;
  letter-spacing:.04em; color:#07080A; background:#FFD24D; }
.c8-gt .sn{ flex:0 0 auto; width:96px; font-size:26px; line-height:1; font-weight:300; letter-spacing:0; }
.c8-gt .gn{ min-width:0; }
.c8-grp + .c8-grp .c8-gt{ background:#3A3D44; color:#fff; }

.c8-row{ position:relative; padding:22px 24px; text-decoration:none; color:#fff;
  background:linear-gradient(180deg,#121317 0 50%,#0F1013 50% 100%); border-bottom:1px solid #1E2126; }
/* 올리면 줄 전체가 한 톤 밝아진다(겹친 판의 불투명도만 바꾼다) */
.c8-row::after{ content:""; position:absolute; inset:0; background:rgba(255,210,77,.07); opacity:0; transition:opacity .2s ease; pointer-events:none; }
.c8-row:hover::after, .c8-row:focus-visible::after{ opacity:1; }

/* 번호 — 아주 얇고 크게(37). 처음엔 왼쪽에서 차례로 들어오고, 올리면 옆으로 밀린다 */
.c8-row .no{ font-size:64px; line-height:.9; font-weight:150; letter-spacing:-.05em; color:#FFD24D;
  font-variant-numeric:tabular-nums; transition:translate .3s cubic-bezier(.2,.7,.2,1);
  animation:c37-in .7s cubic-bezier(.2,.7,.2,1) both; }
.c8-row:hover .no, .c8-row:focus-visible .no{ translate:10px 0; }
.c8-row.past .no{ color:#6E737C; }

.c8-row .nm{ display:flex; flex-direction:column; gap:4px; min-width:0; perspective:600px; }
.c8-row .ttl{ font-size:20px; line-height:1.35; font-weight:800; letter-spacing:-.2px; color:#FFD24D;
  transform-origin:50% 0; animation:c8-flip .55s cubic-bezier(.3,.8,.3,1) both; }
.c8-row .bdg{ font-size:12.5px; font-weight:800; letter-spacing:0; color:#7FD6FF; }
.c8-row .cs{ font-size:14px; line-height:21px; color:#AEB3BB; }
.c8-row .cn{ font-size:14px; color:#D7DAE0; font-variant-numeric:tabular-nums; }
.c8-row .st{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:800; }
.c8-row .st.on{ color:#5BE38E; }
.c8-row .st.off{ color:#FF7A7E; }
.c8-row .cgo{ justify-self:end; font-size:14px; font-weight:700; color:#fff; }
.c8-row.past .ttl{ color:#E7E0C8; }

.c8-grp:nth-of-type(1) .c8-row:nth-of-type(1) .no{ animation-delay:.5s; }
.c8-grp:nth-of-type(1) .c8-row:nth-of-type(2) .no{ animation-delay:.6s; }
.c8-grp:nth-of-type(2) .c8-row:nth-of-type(1) .no{ animation-delay:.7s; }
.c8-grp:nth-of-type(2) .c8-row:nth-of-type(2) .no{ animation-delay:.8s; }
.c8-grp:nth-of-type(2) .c8-row:nth-of-type(3) .no{ animation-delay:.9s; }
.c8-grp:nth-of-type(1) .c8-row:nth-of-type(1) .ttl{ animation-delay:.62s; }
.c8-grp:nth-of-type(1) .c8-row:nth-of-type(2) .ttl{ animation-delay:.72s; }
.c8-grp:nth-of-type(2) .c8-row:nth-of-type(1) .ttl{ animation-delay:.82s; }
.c8-grp:nth-of-type(2) .c8-row:nth-of-type(2) .ttl{ animation-delay:.92s; }
.c8-grp:nth-of-type(2) .c8-row:nth-of-type(3) .ttl{ animation-delay:1.02s; }

/* 점등 표시 — 판매 중만 천천히 깜빡인다 */
.lamp{ display:inline-block; width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
.lamp.on{ background:#3CE37A; box-shadow:0 0 10px 2px rgba(60,227,122,.55); animation:c8-blink 1.8s ease-in-out infinite; }
.lamp.off{ background:#FF4D4F; box-shadow:0 0 6px 1px rgba(255,77,79,.35); opacity:.85; }
@keyframes c8-blink{ 0%,60%{ opacity:1; } 80%{ opacity:.25; } 100%{ opacity:1; } }
@keyframes c8-flip{ from{ transform:rotateX(90deg); opacity:.2; } to{ transform:none; opacity:1; } }
@keyframes c37-in{ from{ opacity:0; transform:translateX(-18px); } to{ opacity:1; transform:none; } }

.c8-foot{ padding:16px 24px; font-size:13.5px; color:#AEB3BB; background:#16181C; }

/* 중간 폭: 정보 칸을 강의명 아래로 내려 강의명을 크게 유지한다 */
@media (min-width:901px) and (max-width:1100px){
  .c8-row{ grid-template-columns:84px minmax(0,1fr) 120px 104px; grid-template-areas:"no nm st go" "no cn st go"; row-gap:8px; }
  .c8-row .no{ grid-area:no; } .c8-row .nm{ grid-area:nm; } .c8-row .cn{ grid-area:cn; font-size:13px; color:#AEB3BB; }
  .c8-row .st{ grid-area:st; } .c8-row .cgo{ grid-area:go; }
  .c8-cols{ grid-template-columns:84px minmax(0,1fr) 120px 104px; }
  .c8-cols > span:nth-child(2){ display:none; }
  .c8-gt .sn{ width:84px; }
}
@media (max-width:900px){
  .x-band{ padding-block:44px 80px; }
  .c8-board{ border-radius:14px; }
  .c8-cols{ display:none; }
  .c8-bar, .c8-gt, .c8-row, .c8-foot, .c8-notice{ padding-inline:16px; }
  .c8-notice{ padding-block:16px 18px; gap:10px; }
  .c8-notice li{ gap:10px; }
  .c8-notice .tx{ font-size:14.5px; line-height:23px; }
  .c8-gt{ gap:12px; padding-block:13px 11px; }
  .c8-gt .sn{ width:40px; font-size:22px; }
  /* 좁은 화면: 번호가 왼쪽 세로 칸을 차지하고, 오른쪽에 강의명 · 정보 · 상태/이동이 쌓인다 */
  .c8-row{ grid-template-columns:40px minmax(0,1fr) auto; grid-template-areas:"no nm nm" "no cn cn" "no st go";
    gap:8px 12px; align-items:start; padding-block:20px; }
  .c8-row .no{ grid-area:no; font-size:34px; padding-top:1px; }
  .c8-row .nm{ grid-area:nm; }
  .c8-row .cn{ grid-area:cn; font-size:13px; color:#AEB3BB; }
  .c8-row .st{ grid-area:st; font-size:13.5px; margin-top:6px; }
  .c8-row .cgo{ grid-area:go; margin-top:6px; align-self:center; }
  .c8-row .ttl{ font-size:17px; }
}

/* ── 06 도장 공통 — 종이색 바탕에 잉크, 가장자리는 거칠게. 바탕·글자 모두 고정값 ── */
.c6-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.seal .fill{ fill:#FFFDF6; }
/* 도장이 위에서 눌려 찍힌다 — 딱 한 번 */
@keyframes c6-thud{ 0%{ opacity:0; transform:scale(1.7) rotate(var(--r0,-4deg)); } 60%{ opacity:1; }
  100%{ opacity:1; transform:scale(1) rotate(var(--r,-12deg)); } }

/* 사진 왼쪽 아래에 도장이 걸친다 */
.c9-por .rw{ position:relative; display:block; }
/* 사진 칸이 도장 자리 안으로 한 겹 들어가 인라인이 되므로 블록으로 되돌린다 — 안 하면 폭이 0 으로 접힌다 */
.c9-por .ring{ display:block; }
.c42-seal{ position:absolute; left:-86px; bottom:-18px; width:168px; height:auto; color:#1F4FB8; --r:-12deg;
  transform:rotate(-12deg); animation:c6-thud .55s cubic-bezier(.3,1.4,.5,1) .9s both; }
@media (max-width:980px){
  .c9-por{ position:relative; width:100%; }
  /* 기울어진 도장의 모서리가 화면 밖으로 나가지 않게 안쪽으로 들인다.
     찍히는 순간(크게 → 제자리)에 잠깐 커지는 부분은 표지 밖으로 그리지 않는다 — 가로 스크롤이 생기지 않게 */
  .c42-seal{ left:auto; right:14px; }
  .c9-cover{ overflow-x:clip; }
  .c9-por .rw{ position:static; }
  .c42-seal{ top:50%; bottom:auto; width:128px; margin-top:-64px; }
  /* 이름·경력 글자가 도장 밑으로 들어가지 않게 도장 폭만큼 비운다 */
  .c9-por figcaption{ padding-right:144px; }
}
@media (max-width:640px){
  .c42-seal{ width:96px; margin-top:-48px; }
  .c9-por figcaption{ padding-right:104px; }
}

/* ── 43 에서: 강의 줄 상태 칸 = 도장 (표지 도장이 먼저 찍히고, 줄 도장이 뒤따른다) ── */
/* 상태 칸 = 도장. 줄이 화면에 들어올 때 한 번 찍힌다 */
.c8-row .st{ display:block; }
.stamp{ display:inline-grid; place-items:center; filter:url(#c6-rough); font-weight:900; line-height:1; letter-spacing:.06em;
  background:#FFFDF6; white-space:nowrap; }
.stamp.on{ width:78px; height:78px; border-radius:50%; color:#1F4FB8; border:4px solid #1F4FB8;
  box-shadow:inset 0 0 0 3px #FFFDF6, inset 0 0 0 5px #1F4FB8; font-size:15px;
  --r:-10deg; transform:rotate(-10deg); animation:c6-thud .5s cubic-bezier(.3,1.4,.5,1) both; }
.stamp.off{ padding:10px 12px; border-radius:6px; color:#B3262E; border:5px double #B3262E; font-size:16px;
  --r:-8deg; transform:rotate(-8deg); animation:c6-thud .5s cubic-bezier(.3,1.4,.5,1) both; }
.c8-grp:nth-of-type(1) .c8-row:nth-of-type(1) .stamp{ animation-delay:1.1s; }
.c8-grp:nth-of-type(1) .c8-row:nth-of-type(2) .stamp{ animation-delay:1.25s; }
.c8-grp:nth-of-type(2) .c8-row:nth-of-type(1) .stamp{ animation-delay:1.4s; }
.c8-grp:nth-of-type(2) .c8-row:nth-of-type(2) .stamp{ animation-delay:1.55s; }
.c8-grp:nth-of-type(2) .c8-row:nth-of-type(3) .stamp{ animation-delay:1.7s; }
/* 범례도 작은 도장 모양으로 */
.c8-bar .lg{ gap:10px; }
.c8-bar .lg .mini{ font-style:normal; font-size:11.5px; font-weight:900; letter-spacing:.04em; padding:3px 7px; background:#FFFDF6; }
.c8-bar .lg .mini.on{ color:#1F4FB8; border:2px solid #1F4FB8; border-radius:999px; }
.c8-bar .lg .mini.off{ color:#B3262E; border:3px double #B3262E; border-radius:4px; }
@media (max-width:900px){
  .c8-row .st{ margin-top:2px; }
  .stamp.on{ width:64px; height:64px; font-size:13px; }
  .stamp.off{ padding:8px 10px; font-size:14px; }
}


/* ── 무료 칼럼 칸(시안 01) — 강의 안내판 바로 아래, 같은 표 모양 ──────────────
   줄은 columns-featured.js 가 /api/columns/featured 로 받아 채운다. 도장만 초록 「무료」로 다르다. */
.x-band .c8-board + .c8-board{ margin-top:28px; }
/* 공용 section{ padding:160px 0 } 을 받지 않게 — 안내판 묶음(.c8-grp)과 같은 처리 */
.c8-free{ padding:0; }
.c8-free .c8-gt{ background:#1E5E43; color:#fff; }
.c8-row.col .ttl{ color:#fff; }
.stamp.free{ width:78px; height:78px; border-radius:50%; color:#17804F; border:4px solid #17804F;
  box-shadow:inset 0 0 0 3px #FFFDF6, inset 0 0 0 5px #17804F; font-size:15px;
  --r:-10deg; transform:rotate(-10deg); animation:c6-thud .5s cubic-bezier(.3,1.4,.5,1) both; }
.c8-bar .lg .mini.free{ color:#17804F; border:2px solid #17804F; border-radius:999px; }
.c8-more{ display:flex; justify-content:center; padding:20px 24px 22px; background:#16181C; border-top:1px solid #23262C; }
.c8-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 26px; border-radius:999px;
  background:#FFD24D; color:#07080A; font-size:15.5px; font-weight:800; text-decoration:none; }
.c8-btn:hover{ filter:brightness(1.05); }
.c8-btn:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
@media (max-width:900px){
  .x-band .c8-board + .c8-board{ margin-top:20px; }
  .stamp.free{ width:64px; height:64px; font-size:13px; }
  .c8-more{ padding:16px; }
  .c8-btn{ width:100%; }
}