/* 콜라주 공용 판 — 스토어·클래스 쪽 (2026-11-13 시안)
   대표: "그 꼴라주 느낌의 무드로 맞추자 — 지금 디자인 요소가 너무 다르니까".
   학교·기관 페이지(inst-collage.css)와 같은 재료(찢은 종이 경계·흰 인화지 사진·캐릭터 스티커·붓 획·노란 마커·큰 제목)를 쓰되,
   스토어·클래스는 쇼핑몰이라 ① 작은 영문 라벨 + 제목 구조는 그대로(대표 '라벨 이쁘다') ② 상품 카드·필터·버튼은 반듯하게 그대로
   ③ 움직임은 화면에 들어올 때 한 번 '딱'(3컷)만 — 스크롤에 끌려가는 장면 없음.
   쓰는 법: <main class="collage"> + js/collage.js. 움직임 줄이기 설정이면 js 가 아무것도 안 해서 다 보인 채로 둔다. */

.collage { overflow-x: clip; }

/* ---------- 틀 통일(2026-11-13 대표: "카드나 영상 프레임 등 다 따로 놀잖아 — 일관성 있게 통일") ----------
   콜라주 페이지 안의 카드·패널·사진·영상 틀 모서리는 전부 종이 모서리(2px). 토큰을 이 범위에서만 바꿔 한 번에 맞춘다.
   알약(--r-pill)·동그라미는 그대로. 헤더·푸터·팝업은 main 밖이라 영향 없음. */
.collage { --r-md: var(--r-xs); --r-lg: var(--r-xs); --r-xl: var(--r-xs); --r-2xl: var(--r-xs); }


/* 구역 제목: 히어로 글꼴(ClimateCrisis). 라벨은 그대로 둔다 */
.collage .section-title { font-family: var(--font-hero); font-weight: 400; font-size: clamp(1.75rem, 3.1vw, 2.6rem); line-height: 1.2; letter-spacing: 0.01em; word-break: keep-all; text-wrap: balance; }
html[lang="ja"] .collage .section-title { font-weight: 800; }

/* 노란 마커: 제목 한 단어 밑에 붓 한 획 */
.cl-hl { position: relative; display: inline-block; z-index: 0; }
.cl-hl::after { content: ''; position: absolute; z-index: -1; left: -4%; right: -6%; bottom: 0.02em; height: 0.42em; background: url(../images/inst/d-hl2-y.webp) center / 100% 100% no-repeat; }

/* 찢은 종이 경계: 검은 구역 위·아래를 흰 종이를 찢은 선으로 */
.cl-torn-top, .cl-torn-bot { position: relative; }
.cl-torn-top::before, .cl-torn-bot::after { content: ''; position: absolute; left: 0; right: 0; height: clamp(22px, 3vw, 42px); background: url(../images/inst/edge-w.webp) center top / 100% 100% no-repeat; pointer-events: none; z-index: 1; }
.cl-torn-top::before { top: -1px; }
.cl-torn-bot::after { bottom: -1px; transform: scaleY(-1); }

/* 스티커(캐릭터): 흰 칼선 + 옅은 그림자. 높이는 늘 auto(너비만 주면 높이 속성값으로 늘어난다) */
.cl-obj { position: absolute; display: block; height: auto; pointer-events: none; user-select: none; transform: rotate(var(--r, 0deg)); z-index: 2; }
.cl-char { filter: drop-shadow(3px 0 0 var(--color-white)) drop-shadow(-3px 0 0 var(--color-white)) drop-shadow(0 3px 0 var(--color-white)) drop-shadow(0 -3px 0 var(--color-white)) drop-shadow(0 10px 14px rgba(15,15,15,0.18)); }
/* 사진: 흰 인화지 테두리 */
.cl-photo { box-sizing: border-box; background: var(--color-white); padding: clamp(5px, 0.6vw, 9px); border-radius: var(--r-xs); box-shadow: 0 1px 2px rgba(15,15,15,0.12), 0 14px 28px -10px rgba(15,15,15,0.3); }
/* 붓 획: 사진 뒤에 깔린다 */
.cl-paint { position: absolute; z-index: 0; height: auto; pointer-events: none; }

/* ---------- 움직임: 들어올 때 한 번, 부드럽게(2026-11-13 대표: 끊기는 느낌이라 눈이 피로 — 스톱모션은 학교·기관 상자 장면에만) ---------- */
.cl-anim .cl-pop { opacity: 0; transform: translate3d(0, 14px, 0) rotate(calc(var(--r, 0deg) - 8deg)) scale(0.8); transition: transform 0.5s var(--ease-pop), opacity 0.3s var(--ease-out); }
.cl-anim .cl-pop.is-on { opacity: 1; transform: rotate(var(--r, 0deg)); }
.cl-anim .cl-swipe { clip-path: inset(0 100% 0 0); transition: clip-path 0.55s var(--ease-out) 0.1s; }
.cl-anim .cl-swipe.is-on { clip-path: inset(0 0 0 0); }
.cl-anim .cl-hl::after { clip-path: inset(0 100% 0 0); transition: clip-path 0.5s var(--ease-out) 0.2s; }
.cl-anim .cl-hl.is-on::after { clip-path: inset(0 0 0 0); }

/* ============ 스토어 홈(index.html) ============ */
/* 구독: 오른쪽에 인화지 사진 + 노랑 붓 + 캐릭터 둘 */
#subscribe-teaser .container { position: relative; }
.cl-sub-art { position: relative; width: min(78%, 340px); aspect-ratio: 1; margin: var(--sp-40) auto 0; }
.cl-sub-art__photo { position: absolute; z-index: 1; width: 74%; height: auto; right: 6%; top: 6%; transform: rotate(3deg); }
.cl-sub-art__paint { width: 86%; left: -10%; bottom: 2%; transform: rotate(-9deg); }
.cl-sub-art__c1 { --r: -8deg; width: 34%; left: -6%; bottom: -6%; }
.cl-sub-art__c2 { --r: 10deg; width: 24%; right: -8%; top: 30%; }
@media (min-width: 1024px) {
  #subscribe-teaser .section-header, #subscribe-teaser .sub-teaser__cta { max-width: 52%; }
  .cl-sub-art { position: absolute; margin: 0; right: var(--gutter); top: 50%; width: min(32vw, 400px); transform: translateY(-50%); }
}

/* 대량주문(검정): 견적서 그림을 흰 인화지에 얹어 살짝 기울이고 뒤에 노랑 붓 */
.collage .estimate-showcase { position: relative; }
.collage .estimate-showcase__image { position: relative; z-index: 1; overflow: visible; border-radius: var(--r-xs); padding: clamp(5px, 0.6vw, 9px); background: var(--color-white); transform: rotate(-2deg); }
.collage .estimate-showcase__image img { border-radius: 2px; }
.cl-paint--est { width: 32%; left: -5%; top: 18%; transform: rotate(-10deg); }

/* 맞춤 제작: 포스터를 인화지로, 오른쪽 위에 검은 붓, 제목 옆에 햄마 */
#custom-oem .container { position: relative; }
.collage .oem-card { position: relative; }
.collage .oem-card__img { position: relative; z-index: 1; border-radius: var(--r-xs); padding: clamp(5px, 0.6vw, 9px); background: var(--color-white); box-shadow: 0 1px 2px rgba(15,15,15,0.12), 0 14px 28px -10px rgba(15,15,15,0.3); transform: rotate(-1.5deg); }
.collage .oem-card__img img { border-radius: 2px; }
.cl-paint--oem { width: 30%; left: 24%; top: -6%; transform: rotate(4deg); }

/* 구역 제목 오른쪽 위 캐릭터(구역마다 많아야 하나) — 제목 머리(.section-header) 기준 */
.collage .section-header { position: relative; }
.cl-head-c { --r: 8deg; width: clamp(80px, 6.8vw, 130px); right: 3%; top: -12px; }
.cl-head-c--l { --r: -6deg; }
.cl-head-c--low { top: -24px; }   /* 라벨 없는 제목 */
/* 캐릭터 자리만큼 제목 오른쪽을 비워 둔다(긴 제목 끝을 가리지 않게) — 모바일은 캐릭터가 라벨 줄로 올라가 필요 없음 */
@media (min-width: 768px) { .collage .section-header:has(> .cl-head-c) > .section-title { padding-right: calc(clamp(80px, 6.8vw, 130px) + 3% + 16px); } }

@media (max-width: 767px) {
  .cl-head-c { width: 54px; top: -30px; right: -8px; }   /* 라벨 줄 오른쪽 위 빈 곳 — 제목 끝을 가리지 않게 */
  .cl-head-c--low { top: -14px; }
  .collage .section-header:has(> .cl-head-c--low) > .section-title { padding-right: 52px; }   /* 라벨 없는 제목은 캐릭터 자리만큼 비움 */
  .cl-paint--oem { width: 46%; left: auto; right: -6%; top: -4%; }
}

/* ============ 아트키트 목록(artkit.html) — 카드·필터·정렬은 그대로 ============ */
.cl-listhead { position: relative; margin: var(--sp-8) 0 var(--sp-12); }
.cl-listhead .section-label { margin-bottom: var(--sp-8); }
.cl-listhead__title { font-family: var(--font-hero); font-weight: 400; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.15; letter-spacing: 0.01em; color: var(--color-dark); }
html[lang="ja"] .cl-listhead__title { font-weight: 800; }
.cl-listhead__c1 { --r: 9deg; width: clamp(64px, 6vw, 110px); right: 2%; top: -6px; }
.cl-listhead__c2 { --r: -8deg; width: clamp(70px, 7vw, 130px); right: calc(2% + clamp(64px, 6vw, 110px) + 12px); top: 14px; }
@media (max-width: 767px) { .cl-listhead__c2 { display: none; } .cl-listhead__c1 { width: 58px; top: 0; right: 0; } }
/* 구매 방법: 동그라미 번호 → 검은 태그, 단계 사이 → 손그림 화살표 */
.collage .howto-step__num { width: auto; height: auto; display: inline-flex; padding: 0.42em 0.78em 0.45em; border-radius: var(--r-xs); background: var(--color-dark); color: var(--color-white); font-size: 1rem; line-height: 1; letter-spacing: 0.04em; transform: rotate(-4deg); margin-bottom: var(--sp-16); }
.collage .howto-step:nth-child(even) .howto-step__num { transform: rotate(3deg); }
.collage .howto-step:not(:last-child)::after { content: ''; width: 46px; height: 31px; right: -30px; top: 0.2rem; background: url(../images/inst/d-arrow-k.webp) center / contain no-repeat; }
@media (max-width: 1023px) { .collage .howto-step:nth-child(2)::after { display: none; } }


/* ---------- 틀 통일 2: 카드에 담기지 않은 단독 사진·지도는 흰 인화지 틀(.cl-photo 와 같은 값) ----------
   카드 안 사진은 카드가 종이라 테두리를 또 두르지 않는다. 기울기는 구역의 큰 사진 하나에만, 2도 이내. 목록 카드는 기울이지 않는다. */
.collage .intro-section__img, .collage .ceo-hero__photo, .collage .location-map { box-sizing: border-box; background: var(--color-white); padding: clamp(5px, 0.6vw, 9px); border-radius: var(--r-xs); box-shadow: 0 1px 2px rgba(15,15,15,0.12), 0 14px 28px -10px rgba(15,15,15,0.3); }
.collage .intro-section__img { transform: rotate(-1.5deg); }
.collage .ceo-hero__photo { transform: rotate(1.5deg); }

/* ---------- 소개 페이지 공통(2026-11-13 넓힘): 검은 구역과 흰 구역 사이는 찢은 종이 경계 ----------
   검은 히어로 아래끝(다음 구역이 흰색인 것을 페이지마다 확인함), 흰 구역 사이의 검은 구역 위·아래, 맨 끝 검은 문의 구역 위. */
.collage > .page-hero, .collage > .inst-hero, .collage .section--dark, .collage > .lecture-cta { position: relative; }
.collage > .page-hero::after, .collage > .inst-hero::after, .collage .section--dark::after, .collage .section--dark::before, .collage > .lecture-cta::before { content: ''; position: absolute; left: 0; right: 0; height: clamp(22px, 3vw, 42px); background: url(../images/inst/edge-w.webp) center top / 100% 100% no-repeat; pointer-events: none; z-index: 1; }
.collage > .page-hero::after, .collage > .inst-hero::after, .collage .section--dark::after { bottom: -1px; transform: scaleY(-1); }
.collage .section--dark::before, .collage > .lecture-cta::before { top: -1px; }
/* 버튼은 어디서나 같은 각진 모서리(알약 버튼을 맞춤) */
.collage .lecture-cases__more, .collage .sub-track-card__cta { border-radius: var(--r-xs); }
/* 구독: 신청 구역이 숨어 있으면(검은 구역 다음이 바로 검은 푸터) 아래 경계를 그리지 않는다 */
.collage .section--dark:has(+ .sub-apply-sec #apply.is-hidden)::after { display: none; }

/* ---------- 점검 반영(2026-11-13 오퍼스 점검 1차: 회사소개 계열) ---------- */
/* 글줄: 끝줄에 한 단어만 남지 않게, 제목은 줄 길이를 고르게 */
.collage p, .collage li, .collage dd { text-wrap: pretty; }
.collage .page-hero__title, .collage .page-cta__title { word-break: keep-all; text-wrap: balance; }
/* 작은 회색 라벨뿐이던 묶음 제목(팀·대표)을 구역 제목 글꼴로 */
.collage .team-section__title, .collage .ceo-section__title { font-family: var(--font-hero); font-weight: 400; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.25; letter-spacing: 0.01em; text-transform: none; color: var(--color-dark); }
html[lang="ja"] .collage .team-section__title, html[lang="ja"] .collage .ceo-section__title { font-weight: 800; }
/* 맨 끝 문의 띠 제목도 구역 제목과 같은 글꼴·크기 */
.collage .page-cta__title { font-family: var(--font-hero); font-weight: 400; font-size: clamp(1.75rem, 3.1vw, 2.6rem); line-height: 1.2; letter-spacing: 0.01em; }
html[lang="ja"] .collage .page-cta__title { font-weight: 800; }
/* 대표: 뱃지가 칸 폭만큼 늘어나 막대처럼 보이던 것, 연도(~2022)가 숫자 중간에서 끊기던 것 */
.collage .ceo-badge { align-self: flex-start; }
.collage .ceo-award-year { width: auto; min-width: 3.4em; white-space: nowrap; }
/* 버튼은 각지게 */
.collage .partners-toggle-btn { border-radius: var(--r-xs); }
@media (max-width: 767px) {
  /* 회사소개 CI: 설명 글이 83px 칸에 갇히던 것 — 버튼을 아래로 내린다 */
  .collage .ci-gridline-footer { flex-direction: column; gap: var(--sp-16); }
  /* 회사소개 히어로 제목: 32px 에서는 5줄로 꺾이고 끝줄에 '미술'만 남는다 → 조금 줄여 줄을 고르게 */
  .collage .page-hero--video .page-hero__title { font-size: clamp(1.4rem, 6.3vw, 1.75rem); }
  /* 좁은 화면에서는 손으로 넣은 줄바꿈이 들쭉날쭉한 줄을 만든다(about.html 에서 br 앞에 빈칸을 넣어 둠 — 숨겨도 낱말이 붙지 않는다) */
  .collage .vision-card__desc br { display: none; }
}

/* ---------- 점검 반영(2026-11-13 오퍼스 점검 2차: 스토어·클래스·구독) ---------- */
/* 모바일: 제목 옆 캐릭터가 제목 끝 글자를 가리던 것 — 라벨 있는 제목도 캐릭터 자리만큼 비운다 */
@media (max-width: 767px) { .collage .section-header:has(> .cl-head-c) > .section-title { padding-right: 52px; } }
/* 남아 있던 알약 버튼을 각지게, 낱말 중간(·앞)에서 꺾이던 제목은 낱말 단위로 */
.collage .artkit-custom__btn, .collage .group-quote-cta__btn { border-radius: var(--r-xs); }
.collage .artkit-custom__title { word-break: keep-all; }
/* 자주 묻는 질문: 제목은 왼쪽 끝, 목록은 가운데 760px 라 왼쪽 선이 어긋나던 것 — 제목도 같은 폭에 맞춘다 */
.collage .faq .section-header { max-width: 760px; margin-inline: auto; }
/* PC 에서 한 줄이 70~86자로 늘어지던 설명 글 */
.collage .section-sub { max-width: 42em; }
.collage .faq__a p { max-width: 40em; }
/* 카드 제목 끝줄에 두세 글자만 남던 것 */
.collage .kit-card__case-title, .collage .kit-card__name--meta { text-wrap: balance; word-break: keep-all; }
/* 구독 소개 사진 기울기는 2도 이내 */
.cl-sub-art__photo { transform: rotate(2deg); }
/* 가운뎃점(·)으로 이은 낱말은 한 덩어리로(· 앞에서 줄이 꺾이지 않게) */
.cl-nb { white-space: nowrap; }

/* ---------- 점검 반영(2026-11-13 오퍼스 점검 3차: 출강·교육키트·활동·포트폴리오) ---------- */
/* 절차 단계: 동그라미 번호·글자 화살표 → 검은 태그 + 손그림 화살표(아트키트 구매 방법·학교·기관과 같게) */
.collage .process-step__num { width: auto; height: auto; display: inline-flex; padding: 0.42em 0.78em 0.45em; border-radius: var(--r-xs); background: var(--color-dark); color: var(--color-white); font-size: 1rem; line-height: 1; letter-spacing: 0.04em; transform: rotate(-4deg); margin: 0 auto var(--sp-16); }
.collage .process-step:nth-child(even) .process-step__num { transform: rotate(3deg); }
.collage .process-step:not(:last-child)::after { content: ''; width: 40px; height: 27px; right: -24px; top: 0.1rem; background: url(../images/inst/d-arrow-k.webp) center / contain no-repeat; }
/* 협력 기관 검은 띠: 위(회색 구역과 만남)·아래(흰 구역과 만남) 찢은 종이 */
.collage .partners-strip { position: relative; }
.collage .partners-strip::before, .collage .partners-strip::after { content: ''; position: absolute; left: 0; right: 0; height: clamp(22px, 3vw, 42px); background: url(../images/inst/edge-w.webp) center top / 100% 100% no-repeat; pointer-events: none; z-index: 1; }
.collage .partners-strip::before { top: -1px; filter: grayscale(1) brightness(0.975); }
.collage .partners-strip::after { bottom: -1px; transform: scaleY(-1); }
/* 교육 키트: 카드에 담기지 않은 사진도 흰 인화지 틀(같은 값) */
.collage .inst-hero__photos img, .collage .inst-box__main, .collage .inst-box__inset, .collage .inst-case__main, .collage .inst-case__thumbs img { box-sizing: border-box; background: var(--color-white); padding: clamp(4px, 0.5vw, 8px); border: 0; border-radius: var(--r-xs); box-shadow: 0 1px 2px rgba(15,15,15,0.12), 0 14px 28px -10px rgba(15,15,15,0.3); }
/* 자주 묻는 질문(출강·교육 키트는 .faq 구역 클래스가 없다): 제목을 목록 폭에 맞춘다 */
.collage .section-header:has(+ .faq__list) { max-width: 760px; margin-inline: auto; }
/* 카드는 어디서나 같은 흰 종이 한 장: 흰 바탕 + 가는 선 하나 */
.collage .lecture-card, .collage .case-item, .collage .inst-uses__item, .collage .portfolio-card, .collage .gallery-card, .collage .vision-card, .collage .team-card, .collage .history-item, .collage .character-card, .collage .partners-card { background: var(--color-white); border: 1px solid var(--line); box-shadow: none; }
/* 활동: 연도 제목을 구역 제목 글꼴·먹색으로(노란 글자는 흰 바탕에서 흐리다) */
.collage .gallery-year-badge { font-family: var(--font-hero); font-weight: 400; color: var(--color-dark); letter-spacing: 0.01em; }
/* 맨 끝 검은 문의 구역: 모바일에서 찢은 선과 글 사이가 빡빡하던 것 */
@media (max-width: 767px) { .collage > .lecture-cta { padding-top: var(--sp-56); } }

/* ---------- 장식 얹기(2026-11-13 대표 "장식 얹어" → "캐릭터 위치가 다 같은 곳이라 지루하다") ----------
   구역당 하나까지. 자리와 종류를 섞는다: 가장자리에서 빼꼼 / 구역 아래끝에 걸터앉기 / 위쪽 구석 소품 / 제목 끝 손그림 / (자주 묻는 질문만) 제목 옆.
   같은 자리를 한 페이지에서 두 번 쓰지 않는다. */
.collage section:has(> .cl-deco) { position: relative; }
.cl-deco { z-index: 2; }
.cl-deco--edge-r { --r: -16deg; width: clamp(96px, 10vw, 168px); right: clamp(-46px, -2.4vw, -22px); top: clamp(120px, 24%, 300px); }
.cl-deco--edge-l { --r: 15deg; width: clamp(96px, 10vw, 168px); left: clamp(-46px, -2.4vw, -22px); top: clamp(140px, 30%, 340px); }
.cl-deco--bot-r { --r: 7deg; width: clamp(88px, 8.6vw, 150px); right: clamp(16px, 4%, 80px); bottom: clamp(-30px, -1.6vw, -14px); }
.cl-deco--bot-l { --r: -8deg; width: clamp(88px, 8.6vw, 150px); left: max(var(--gutter), 7%); bottom: clamp(-30px, -1.6vw, -14px); }
.cl-deco--top-r { --r: 12deg; width: clamp(150px, 15vw, 250px); right: max(var(--gutter), 6%); top: clamp(26px, 4vw, 64px); filter: drop-shadow(0 10px 18px rgba(15,15,15,0.16)); }
.cl-deco--star { --r: -10deg; width: clamp(54px, 5vw, 84px); right: max(var(--gutter), 12%); top: clamp(30px, 5vw, 76px); }
/* 제목 끝에 붙는 손그림(별·고리) */
.cl-ink { display: inline-block; height: 0.82em; width: auto; margin-left: 0.18em; vertical-align: -0.04em; transform: rotate(-8deg); }
/* 검은 히어로 장식: 기본은 오른쪽 아래 / --peek 오른쪽 가장자리에서 크게 빼꼼 / --stand 찢은 경계 위 가운데쯤에 서 있기 / --spark 제목 오른쪽 위 노란 손그림 */
.cl-hero-deco { --r: 8deg; width: clamp(84px, 9.5vw, 150px); right: max(var(--gutter), 8%); bottom: clamp(10px, 2.2vw, 34px); z-index: 2; }
.cl-hero-deco--peek { --r: -18deg; width: clamp(120px, 14vw, 220px); right: clamp(-60px, -3vw, -26px); bottom: auto; top: clamp(70px, 26%, 130px); }
.cl-hero-deco--stand { --r: -5deg; right: auto; left: 72%; bottom: clamp(-6px, 0.6vw, 10px); }
.cl-hero-deco--spark { --r: 12deg; width: clamp(46px, 5vw, 78px); right: auto; left: clamp(330px, 52%, 740px); bottom: auto; top: clamp(64px, 24%, 104px); }
@media (max-width: 1023px) { .cl-deco--wide { display: none; } }
@media (max-width: 767px) {
  .cl-deco--edge-r, .cl-deco--edge-l { width: 58px; top: 12px; }
  .cl-deco--edge-r { right: -20px; }
  .cl-deco--edge-l { left: -20px; }
  .cl-deco--bot-r, .cl-deco--bot-l { width: 58px; bottom: -36px; }
  .cl-deco--bot-r { right: 18px; }
  .cl-deco--star { width: 40px; top: 18px; right: 20px; }
  .cl-hero-deco { width: 58px; right: 16px; bottom: 2px; }
  .cl-hero-deco--peek { width: 84px; right: -24px; top: auto; bottom: 18px; }
  .cl-hero-deco--stand { left: auto; right: 34%; bottom: -2px; }
  .cl-hero-deco--spark { width: 34px; left: auto; right: 22px; top: 62px; }
  /* 스티커 자리만큼 히어로 설명 글 오른쪽을 비운다(글 끝을 가리지 않게) */
  .collage > .page-hero:has(> .cl-hero-deco) .page-hero__sub { padding-right: 64px; }
}

/* 교육 키트 행정·서류: KC 는 글자만이 아니라 인증마크를 쓴다(대표 결정 — 학교·기관 페이지와 같게).
   마크가 주인공: 왼쪽에 크게, 오른쪽에 'KC 인증'(마크보다 작게) + 설명. 마크와 글 묶음은 세로 가운데를 맞춘다. */
.collage .inst-docs__kc { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(1.25rem, 2.6vw, 2rem); row-gap: var(--sp-6); align-items: center; align-content: center; padding: clamp(1.75rem, 3.4vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem); }
.collage .inst-docs__kc-logo { grid-row: 1 / span 2; width: clamp(84px, 9vw, 128px); height: auto; }
.collage .inst-docs__mark { align-self: end; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; }
.collage .inst-docs__desc { align-self: start; font-size: 0.95rem; color: var(--text-2); }

/* ---------- 교육 키트: 옛 그래픽 걷어내기(2026-11-13 대표 "체크 그래픽이랑 이런 거 안 쓰기로 했잖아") ----------
   학교·기관 확정본과 같은 말투로: 선 아이콘·동그라미 아이콘·노란 원 체크는 쓰지 않는다. 이름표는 검은 태그, 체크는 손그림, 나머지는 글과 선만. */
.collage .service-banner--facts .service-banner__icon, .collage .inst-box__icon, .collage .inst-facts .ic { display: none; }
.collage .service-banner--facts .service-banner__title { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; justify-self: start; padding: 0.4em 0.75em 0.42em; font-weight: 900; font-size: 0.85rem; letter-spacing: 0.04em; line-height: 1; color: var(--color-white); background: var(--color-dark); border-radius: var(--r-xs); white-space: nowrap; }
.cl-check { flex: none; width: 26px; height: auto; margin-top: -6px; }
/* KC: 회색 상자 대신 선 두 줄 사이에(학교·기관과 같게) */
.collage .inst-docs__kc { background: none; border-radius: 0; border-top: 1.5px solid var(--text); border-bottom: 1px solid var(--line); padding: var(--sp-24) 0; }
.collage .inst-docs { align-items: start; }
.collage .inst-docs__words { border-top-width: 1.5px; }
.collage .inst-facts__name { white-space: nowrap; }

/* ---------- 구독: 옛 선 아이콘 걷어내기(2026-11-13 대표 "진행해") ----------
   소개 구역의 선 아이콘은 없애고 글과 선만. 순서는 검은 태그 번호 + 손그림 화살표, 발달 단계 번호는 흰 태그.
   그대로 둔 것: 히든키트 상자 그림(.hk — 눌러서 여는 그림), 카드 등록·신청 완료 화면의 아이콘(기능 화면). */
.collage .sub-only__item .sub-ic, .collage .sub-perk > .sub-ic, .collage .sub-dev__items .sub-ic, .collage .sub-flow__icon .sub-ic { display: none; }
.collage .sub-flow { counter-reset: clflow; }
.collage .sub-flow__icon { counter-increment: clflow; display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; justify-self: start; width: auto; height: auto; padding: 0.42em 0.78em 0.45em; border: 0; border-radius: var(--r-xs); box-shadow: none; background: var(--color-dark); color: var(--color-white); font-weight: 900; font-size: 1rem; line-height: 1; letter-spacing: 0.04em; transform: rotate(-4deg); margin-bottom: var(--sp-16); }
.collage .sub-flow__icon::before { content: counter(clflow, decimal-leading-zero); }
.collage .sub-flow__step:nth-child(even) .sub-flow__icon { transform: rotate(3deg); }
.collage .sub-flow__step:not(:last-child)::after { border: 0; left: auto; right: var(--sp-16); top: 0.1rem; bottom: auto; width: 40px; height: 27px; background: url(../images/inst/d-arrow-k.webp) center / contain no-repeat; }
.collage .sub-stages__no { width: auto; height: auto; padding: 0.38em 0.62em 0.4em; border-radius: var(--r-xs); background: var(--color-white); color: var(--color-dark); line-height: 1; transform: rotate(-4deg); }
.collage .sub-stages li:nth-child(even) .sub-stages__no { transform: rotate(3deg); }
@media (max-width: 760px) {
  .collage .sub-flow__step { grid-template-columns: auto 1fr; }
  .collage .sub-flow__icon { margin-bottom: 0; }
  .collage .sub-flow__step:not(:last-child)::after { display: none; }
}

/* ---------- 여백 손메모(js/collage.js 가 넓은 화면에서만 만든다) ----------
   구역 제목 옆 여백에 그 구역에 맞는 손글씨 한마디 + 낙서 하나. 옅게, 색은 구역 바탕에 맞춘다(js 가 --on-dark 를 붙인다). */
main.collage { position: relative; }
.cl-margin { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.cl-note { position: absolute; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; color: var(--color-dark); opacity: 0.42; user-select: none; }
.cl-note--r { align-items: flex-start; }
.cl-note--on-dark { color: var(--color-white); opacity: 0.5; }
.cl-note__txt { font-family: 'Nanum Pen Script', 'Telma', cursive; line-height: 1.2; white-space: nowrap; transform: rotate(-6deg); transform-origin: 100% 100%; opacity: var(--in, 1); }
.cl-note--r .cl-note__txt { transform: rotate(5deg); transform-origin: 0 100%; }
.cl-note__doodle { display: block; height: auto; clip-path: inset(0 var(--draw, 0%) 0 0); }   /* --draw: 아직 안 그어진 오른쪽 몫(스크롤에 맞춰 줄어든다) */
.cl-note--on-dark .cl-note__doodle { filter: invert(1); }
.cl-note--r .cl-note__doodle { transform: scaleX(-1); }   /* 오른쪽 여백에서는 화살표가 왼쪽(본문)을 가리킨다 */
@media print { .cl-margin { display: none; } }

/* ---------- 꾸밈 요소 마우스·터치 반응(js/collage.js 맨 끝 블록) ----------
   올리면 살짝 커지며 떠오르고, 누르면 종류마다 다르게 움직인다. 기존 transform 과 겹치지 않게 scale·translate·rotate 개별 속성만 쓴다. */
.dp-item { transition: scale 0.22s var(--ease-pop), translate 0.22s var(--ease-out); }
.dp-item.dp-hover { scale: 1.09; translate: 0 -5px; }
.cl-note.dp-hover { opacity: 0.8; }
html.dp-pointing, html.dp-pointing body { cursor: pointer; }
.dp-wobble { animation: dp-wobble 0.7s var(--ease-out); }   /* 캐릭터: 씰룩씰룩 */
.dp-spin { animation: dp-spin 0.75s var(--ease-inout); }    /* 별·반짝이: 한 바퀴 */
.dp-hop { animation: dp-hop 0.55s var(--ease-out); }        /* 소품: 통통 */
.dp-wiggle { animation: dp-wiggle 0.5s var(--ease-out); }   /* 손메모: 까딱 */
.dp-redraw { animation: dp-redraw 0.6s var(--ease-out); }   /* 손메모 낙서: 다시 그어짐 */
@keyframes dp-wobble { 0%, 100% { rotate: 0deg; scale: 1; } 15% { rotate: -10deg; scale: 1.06 0.95; } 32% { rotate: 9deg; scale: 0.96 1.05; } 50% { rotate: -7deg; scale: 1.04 0.97; } 68% { rotate: 5deg; scale: 1; } 84% { rotate: -2deg; } }
@keyframes dp-spin { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes dp-hop { 0%, 100% { translate: 0 0; rotate: 0deg; } 30% { translate: 0 -20px; rotate: -5deg; } 55% { translate: 0 0; rotate: 3deg; } 75% { translate: 0 -7px; rotate: 0deg; } }
@keyframes dp-wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -5deg; } 50% { rotate: 4deg; } 75% { rotate: -2deg; } }
@keyframes dp-redraw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }