/* 학교·기관 페이지(institution.html) 콜라주 판 — 시안(2026-11-13)
   대표 지적: "여백이 애매하다, 타이틀·내용이 부족하다, 디자인 요소가 없어 만들다 만 것 같다", "PC 양옆이 너무 빈다".
   방향: 글은 본문 폭 안에 두고, 사진·오린 키트·찢은 종이는 화면 양끝까지 내보낸다(브레이크아웃).
   그림 재료는 영문 회사소개서 때 만든 콜라주 도구(collage.py: 찢은 흰 종이 + 검은 종이)와 같은 방식이다.
   색은 검정·흰색이 바탕이고 노랑은 큰 제목 밑 붓 한 획과 버튼에만 쓴다. */

.ix { --ix-wide: 1360px; --ix-py: clamp(4rem, 8vw, 7.5rem); overflow-x: clip; }
.ix-wide { width: 100%; max-width: var(--ix-wide); margin-inline: auto; padding-inline: var(--gutter); position: relative; }
.ix-sec { position: relative; padding: var(--ix-py) 0; background: var(--surface); }
.ix-sec--warm { background: var(--surface-2); }
.ix-sec--dark { background: var(--color-dark); color: var(--color-white); }

/* 큰 제목: 히어로 글꼴로 크게. 밑에 노랑 붓 한 획(.ix-hl)을 깔 수 있다 */
.ix-title { font-family: var(--font-hero); font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.12; letter-spacing: 0.01em; color: var(--text); word-break: keep-all; }
.ix-sec--dark .ix-title { color: var(--color-white); }
.ix-hl { position: relative; display: inline-block; z-index: 0; }
/* 노란 마카: --hl(0~1)만큼 왼쪽부터 그어진다(상자 장면 스크립트가 스크롤에 맞춰 바꾼다. 값이 없으면 다 그어진 상태) */
.ix-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; clip-path: inset(0 calc((1 - var(--hl, 1)) * 100%) 0 0); }
.ix-sub { margin-top: var(--sp-16); font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.7; color: var(--text-2); word-break: keep-all; }
.ix-sec--dark .ix-sub { color: rgba(255,255,255,0.78); }

/* 찢은 종이 이름표: 검은 종이(tk1) 위 흰 글자 / 흰 종이(tw1) 위 검은 글자 */
.ix-tag { display: inline-flex; align-items: center; justify-content: center; 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; }
.ix-tag--w { color: var(--text); background: var(--color-white); box-shadow: inset 0 0 0 1.5px var(--color-dark); }

/* 찢은 가장자리: 검은 구역의 위·아래를 흰 종이를 찢은 선으로 */
.ix-torn-top::before, .ix-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; }
.ix-torn-top::before { top: -1px; }
.ix-torn-bot::after { bottom: -1px; transform: scaleY(-1); }
.ix-sec--warm.ix-torn-top::before, .ix-torn-top--warm::before { filter: grayscale(1) brightness(0.975); }   /* 2026-11-13 점검: sepia 때문에 회색 구역(244,244,242) 위에 누런 띠가 보였다 */

/* 오린 키트(스티커): 넓은 화면의 양옆 여백에 붙인다. 글을 덮지 않게 자리를 정해 두고, 좁은 화면에서는 숨기거나 작게 */
.ix-obj { position: absolute; display: block; height: auto; pointer-events: none; user-select: none; transform: rotate(var(--r, 0deg)); filter: drop-shadow(0 10px 18px rgba(15,15,15,0.16)); z-index: 0; }
/* 캐릭터(원본 SVG 그대로): 흰 칼선 스티커처럼 사방 3px 흰 그림자를 겹치고 아래로 옅은 그림자 */
.ix-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)); }
/* 물감·연필 자국: 그림자 없이 종이에 묻은 것처럼 */
.ix-mark { filter: none; }
/* 사진: 찢은 테두리 대신 흰 인화지 테두리 + 옅은 그림자 */
.ix-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); object-fit: cover; }
@media (max-width: 1199px) { .ix-obj--wide { display: none; } }

/* ---------- 1. 히어로: PC 도 첫 화면을 영상으로 꽉 채운다 ---------- */
.inst-hero-film { min-height: 100svh; }
.inst-hero-film .page-hero__title { font-size: clamp(3rem, 7vw, 6rem); }
.inst-hero-film .page-hero__sub { font-size: clamp(1.02rem, 1.4vw, 1.25rem); }
/* PC 에서도 히어로를 보는 동안 헤더를 영상 위에 투명하게 얹는다(모바일 규칙은 style.css 에 있다 — 같은 값) */
@media (min-width: 768px) {
  body.has-hero-over #header.header { transition: transform 0.28s var(--ease-out), background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out); }
  body.has-hero-over #header .header__logo-img { transition: filter 0.3s var(--ease-out); }
  body.hero-over #header.header { background: transparent; border-bottom-color: transparent; box-shadow: none; }
  body.hero-over #header .header__logo-img { filter: brightness(0) invert(1); }
  body.hero-over #header .header__icon-btn { color: var(--color-white); }
  body.hero-over #header .header__toggle { background: rgba(255,255,255,0.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  body.hero-over #header .header__toggle-item { color: var(--color-white); }
  body.hero-over #header .header__toggle-item.is-active { color: var(--color-dark); }
  body.hero-over #header .header__menu-btn span { background: var(--color-white); }
}

/* ---------- 2. 교육 키트 제작(스크롤 장면, 페이지에 한 번) ---------- */
.kit-rise { position: relative; height: 280vh; margin-top: -100svh; background: var(--surface-2); }
.inst-hero-film { z-index: 2; }
.kit-rise__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.kit-rise__inner { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; padding-top: var(--header-h); }
.kit-rise__copy { position: relative; width: min(46%, 560px); }
.kit-rise__title { font-family: var(--font-hero); font-weight: 400; font-size: clamp(2.4rem, 4.6vw, 4.4rem); line-height: 1.06; color: var(--text); white-space: nowrap; }
.kit-rise__lead { margin-top: var(--sp-24); font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: 800; line-height: 1.45; color: var(--text); word-break: keep-all; }
.kit-rise__sub { margin-top: var(--sp-12); font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.7; color: var(--text-2); word-break: keep-all; }
.ix-spec { margin-top: var(--sp-28); display: grid; gap: var(--sp-12); }
.ix-spec > div { display: flex; align-items: center; gap: var(--sp-12); flex-wrap: wrap; }
.ix-spec dt { flex: none; }
.ix-spec dd { display: flex; flex-wrap: wrap; gap: var(--sp-6) var(--sp-16); font-weight: 700; font-size: 1rem; color: var(--text); }
.ix-spec dd span + span::before { content: ''; display: inline-block; width: 4px; height: 4px; margin: 0 var(--sp-12) 0.2em 0; border-radius: 50%; background: var(--text-4); vertical-align: middle; }
.kit-rise__btns { margin-top: var(--sp-32); display: flex; gap: var(--sp-12); flex-wrap: wrap; }
.kit-rise__btns .btn { min-height: 48px; white-space: nowrap; }
/* 상자·손·팔: 그림 17장(스톱모션). 팔이 잘린 아래 끝은 무대 아래 끝에 붙는다 */
/* 캔버스 838x1212: 그림(838x992)을 아래쪽에 그리고, 끝 무렵 위로 올리며 팔을 아래로 늘인다(스크립트 paint). 크기는 예전(82svh 에 992)과 같은 비율 */
.kit-rise__box { position: absolute; z-index: 1; left: 68%; bottom: -9svh; height: min(100svh, 1145px); width: auto; transform: translateX(-50%); transform-origin: 50% 100%; }
/* 스톱모션은 상자·손(캔버스)뿐. 둘레 스티커와 글은 부드럽게 나온다(대표 2026-11-13) */
.kit-rise .ix-obj { opacity: 0; transform: translate3d(0, 18px, 0) rotate(calc(var(--r) - 8deg)) scale(0.8); transition: transform 0.5s var(--ease-pop), opacity 0.3s var(--ease-out); }
.kit-rise .ix-obj.is-on { opacity: 1; transform: rotate(var(--r)) scale(1); }
/* 오린 키트는 모두 상자·손 뒤(z 0, 캔버스 1). o1 은 글 묶음 안에서 제목 위에 붙는다 — 높이는 제목 위 빈자리(50svh - 글 높이/2)만큼 */
/* 조아: 제목 오른쪽 끝('제작') 위에 걸터앉는다. 반짝이는 조아 머리 오른쪽 위에 바짝 붙인다(2026-11-13 대표: 둘 다 위치가 애매했다). 제목 안에 넣어 em 으로 따라간다 */
.kit-rise__title { position: relative; width: fit-content; --jh: clamp(64px, calc(50svh - 365px), 140px); }   /* --jh = 조아 키. 제목 위 빈자리(화면 높이에 따라 달라짐)에 맞춘다 */
.kit-rise .o1 { --r: 8deg; position: absolute; left: auto; right: -0.5em; bottom: 0.78em; width: auto; height: var(--jh); }
.kit-rise .o2 { --r: -7deg;  width: clamp(130px, 11vw, 230px); right: 2vw; top: calc(var(--header-h) + 4svh); }
.kit-rise .o3 { --r: 5deg;   width: clamp(170px, 15vw, 300px); right: 2vw; bottom: 5svh; }
.kit-rise .o4 { --r: -11deg; width: auto; height: clamp(70px, calc(47svh - 265px), 220px); left: 1.5vw; bottom: 3svh; }
.kit-rise .o5 { --r: 6deg;   width: auto; height: clamp(70px, calc(48svh - 265px), 190px); left: 35vw; bottom: 2svh; }
.kit-rise .o6 { --r: -6deg;  width: clamp(110px, 8.5vw, 180px); left: 2vw; top: calc(var(--header-h) + 6svh); }
.kit-rise .o7 { --r: 8deg;   width: clamp(120px, 10vw, 210px); right: 1.5vw; top: 44svh; }
@media (max-width: 1599px) { .kit-rise .o6 { display: none; } }
@media (max-width: 767px) {
  .kit-rise { height: 280vh; }
  .kit-rise__inner { align-items: flex-start; padding-top: calc(var(--header-h) + 5svh); }
  .kit-rise__copy { width: 100%; text-align: center; }
  .kit-rise__title { font-size: clamp(2.3rem, 10.5vw, 3rem); }
  .kit-rise__lead { margin-top: var(--sp-12); font-size: 1.1rem; }
  .kit-rise__sub { font-size: 0.98rem; }
  .ix-spec, .kit-rise__btns { display: none; }
  .kit-rise__box { left: 50%; bottom: 0; height: auto; width: min(108vw, 500px); }
  .kit-rise .o2 { width: 24vw; right: -3vw; top: 39svh; }
  .kit-rise .o4 { width: 32vw; height: auto; left: -6vw; top: 43svh; bottom: auto; }

  .kit-rise .o1, .kit-rise .o3, .kit-rise .o5, .kit-rise .o6, .kit-rise .o7 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kit-rise { height: auto; margin-top: 0; }
  .kit-rise__stage { position: relative; height: min(100svh, 900px); }
  .kit-rise .ix-obj { opacity: 1; transform: rotate(var(--r)); transition: none; }
}

/* ---------- 3. 하는 일: 4단계, 사진마다 찢은 테두리, 사이에 붓 화살표 ---------- */
.ix-flow__head { max-width: 760px; }
.ix-steps { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 3rem); counter-reset: none; }
.ix-step { position: relative; }
.ix-step__fig { margin: 0; position: relative; transform: rotate(var(--r, 0deg)); }
.ix-step:nth-child(1) { --r: -2deg; }
.ix-step:nth-child(2) { --r: 1.5deg; margin-top: clamp(0px, 3vw, 44px); }
.ix-step:nth-child(3) { --r: -1deg; }
.ix-step:nth-child(4) { --r: 2deg; margin-top: clamp(0px, 3vw, 44px); }
.ix-step__fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; }
.ix-step__num { position: absolute; left: 6%; top: -0.9rem; z-index: 1; transform: rotate(-4deg); font-size: 1rem; }
.ix-step__name { margin-top: var(--sp-20); font-size: clamp(1.2rem, 1.6vw, 1.45rem); font-weight: 900; color: var(--text); }
.ix-step__desc { margin-top: var(--sp-8); font-size: 1rem; line-height: 1.65; color: var(--text-2); word-break: keep-all; }
.ix-step:not(:last-child)::after { content: ''; position: absolute; top: 18%; right: calc(clamp(1.25rem, 3vw, 3rem) * -0.5 - 30px); width: 60px; height: 44px; background: url(../images/inst/d-arrow2-k.webp) center / contain no-repeat; transform: rotate(-24deg); z-index: 1; }
/* 물감통은 왼쪽 아래(대표 2026-11-13: 오른쪽 아래는 위로 가기 버튼과 겹치고 자리가 애매했다) */
.ix-flow .o-flow1 { --r: -12deg; width: clamp(120px, 9vw, 170px); left: clamp(0.75rem, 2.2vw, 2.75rem); right: auto; bottom: clamp(0.5rem, 1.5vw, 1.5rem); }   /* 화면 안쪽에 온전히 보이게(밖으로 잘리지 않게) */
@media (max-width: 900px) {
  .ix-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-48); }
  .ix-step:nth-child(2)::after { display: none; }
  .ix-step:nth-child(3) { margin-top: 0; }
}
@media (max-width: 560px) {
  .ix-steps { grid-template-columns: 1fr; row-gap: var(--sp-40); }
  .ix-step, .ix-step:nth-child(n) { margin-top: 0; display: grid; grid-template-columns: 44% 1fr; gap: 0 var(--sp-16); align-items: center; }
  .ix-step__fig { grid-row: 1 / 3; }
  .ix-step__name { margin-top: 0; align-self: end; }
  .ix-step__desc { align-self: start; font-size: 0.95rem; }
  .ix-step::after { display: none; }
}

/* ---------- 4. 이렇게 씁니다(검정): 큰 사진 한 장 + 세 줄 ---------- */
.ix-uses { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
.ix-use__img { display: block; width: 100%; height: auto; }
.ix-use-list .ix-use__img { aspect-ratio: 4 / 3; }
.ix-use--big .ix-use__img { transform: rotate(-1.5deg); }
.ix-use__name { font-size: clamp(1.2rem, 1.6vw, 1.5rem); font-weight: 900; color: var(--color-white); }
.ix-use__desc { margin-top: var(--sp-6); font-size: 1rem; line-height: 1.6; color: rgba(255,255,255,0.75); word-break: keep-all; }
.ix-use--big .ix-use__name { margin-top: var(--sp-24); font-size: clamp(1.5rem, 2.2vw, 2rem); }
.ix-use-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.5rem, 2.6vw, 2.5rem); }
.ix-use-list .ix-use { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: var(--sp-24); align-items: center; }
.ix-use-list .ix-use:nth-child(1) .ix-use__img { transform: rotate(2deg); }
.ix-use-list .ix-use:nth-child(2) .ix-use__img { transform: rotate(-1.5deg); }
.ix-use-list .ix-use:nth-child(3) .ix-use__img { transform: rotate(1deg); }
.ix-uses-sec .o-use1 { --r: 8deg; width: clamp(100px, 7.5vw, 150px); right: 5vw; top: clamp(3rem, 6vw, 5.5rem); z-index: 2; }
@media (max-width: 900px) {
  .ix-uses { grid-template-columns: 1fr; }
}

/* ---------- 5. 직접 개발한 키트: 화면 끝까지 나가는 가로 줄 ---------- */
.ix-kits__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-24); flex-wrap: wrap; }
.ix-kits .inst-kits__track {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-inline: max(var(--gutter), calc((100vw - var(--ix-wide)) / 2 + var(--gutter)));
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--ix-wide)) / 2 + var(--gutter)));
}
.ix-kits .inst-kits__track { padding-block: var(--sp-16) var(--sp-24); }
.ix-kits .inst-kits__item { flex: 0 0 clamp(168px, 15vw, 236px); }
.ix-kits .inst-kits__item:nth-child(odd) { transform: rotate(-1.2deg); }
.ix-kits .inst-kits__item:nth-child(even) { transform: rotate(1.2deg) translateY(10px); }
.ix-kits .ix-wide > .inst-actions { margin-top: var(--sp-32); }

/* ---------- 6. 출강 수업 · 키트 단체 주문: 사진 두 장 나란히 ---------- */
.ix-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); }
.ix-more__item { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.25rem, 2.4vw, 2rem); align-items: center; }
.ix-more__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; transform: rotate(var(--r, -1.5deg)); }
.ix-more__item:nth-child(2) { --r: 1.8deg; }
.ix-more__name { font-size: clamp(1.3rem, 1.9vw, 1.7rem); font-weight: 900; color: var(--text); }
.ix-more__desc { margin-top: var(--sp-8); font-size: 1rem; line-height: 1.65; color: var(--text-2); word-break: keep-all; }
.ix-more__item .inst-actions { margin-top: var(--sp-20); }
@media (max-width: 900px) {
  .ix-more { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ix-more__item { grid-template-columns: 1fr; gap: var(--sp-20); }
}

/* ---------- 7. 사례: 큰 사진이 화면 왼쪽 끝까지, 작은 사진 둘은 겹쳐 붙인다 ---------- */
.ix-case { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ix-case__media { position: relative; margin-left: calc(-1 * max(var(--gutter), (100vw - var(--ix-wide)) / 2 + var(--gutter)) + 12px); padding-bottom: clamp(3rem, 7vw, 6rem); }
.ix-case__main { display: block; width: 100%; height: auto; transform: rotate(-1deg); }
.ix-case__a, .ix-case__b { position: absolute; z-index: 2; width: 38%; height: auto; bottom: 0; }
.ix-case__a { right: 22%; transform: rotate(-5deg); }
.ix-case__b { right: -6%; bottom: 2rem; transform: rotate(6deg); }
.ix-case__name { margin-top: var(--sp-24); display: flex; align-items: center; gap: var(--sp-12); flex-wrap: wrap; font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 900; color: var(--text); }
.ix-case__desc { margin-top: var(--sp-12); font-size: 1.05rem; line-height: 1.7; color: var(--text-2); word-break: keep-all; }
.ix-case__scope { margin-top: var(--sp-24); padding-top: var(--sp-16); border-top: 1.5px solid var(--text); display: flex; gap: var(--sp-16); font-size: 0.95rem; }
.ix-case__scope dt { font-weight: 700; color: var(--text-3); }
.ix-case__scope dd { font-weight: 800; color: var(--text); }
/* 화살표: 사진 묶음 폭(cqw) 기준, 버튼 아래 흰 바탕에서 올라와 오른쪽 작은 사진을 왼쪽으로 가리킨다. 그림 비율 그대로(height:auto — 없으면 높이 속성값으로 늘어나 찌그러짐) */
.ix-case__media { container-type: inline-size; }
.ix-case .d-arrow { position: absolute; z-index: 3; width: 17cqw; height: auto; left: 106cqw; bottom: calc(2rem - 5.6cqw); transform: scaleX(-1); pointer-events: none; }
@media (max-width: 900px) {
  .ix-case { grid-template-columns: 1fr; }
  .ix-case__media { margin-left: 0; margin-right: 6%; }
  .ix-case .d-arrow { display: none; }
}

/* ---------- 8. 함께한 기관(검정) — 로고 줄은 style.css .partners-strip 그대로, 위·아래만 찢은 선 ---------- */
.partners-strip--inst { position: relative; padding: calc(var(--ix-py) * 0.85) 0; }

/* ---------- 9. 예산과 일정 + 행정·서류: 한 구역 두 칸 ---------- */
.ix-ready { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); }
.ix-facts { list-style: none; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; padding: 0; display: grid; gap: var(--sp-24); }
.ix-facts li { padding-bottom: var(--sp-24); border-bottom: 1px solid var(--line); }
.ix-facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.ix-facts h3 { font-size: 1.2rem; font-weight: 900; color: var(--text); }
.ix-facts p { margin-top: var(--sp-4); font-size: 1rem; line-height: 1.6; color: var(--text-2); word-break: keep-all; }
.ix-kc { position: relative; margin-top: clamp(1.75rem, 3vw, 2.5rem); padding: var(--sp-20) 0; display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 1.75rem); border-top: 1.5px solid var(--text); border-bottom: 1px solid var(--line); }
.ix-kc__logo { flex: none; width: clamp(64px, 6vw, 88px); height: auto; }
.ix-kc__mark { font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 900; line-height: 1.2; color: var(--text); }
.ix-kc__desc { margin-top: var(--sp-6); font-size: 0.95rem; line-height: 1.5; color: var(--text-2); word-break: keep-all; }
.ix-words { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-24); }
.ix-words li { display: flex; align-items: center; gap: 10px; padding: var(--sp-16) 0; border-bottom: 1px solid var(--line); font-weight: 800; font-size: 1.05rem; color: var(--text); }
/* 붓으로 그은 체크(p-check-k, brush3) */
.ix-check { flex: none; width: 26px; height: auto; margin-top: -6px; }
@media (max-width: 900px) {
  .ix-ready { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .ix-words { grid-template-columns: 1fr; }
}

/* ---------- 10. 자주 묻는 질문 — 목록은 style.css .faq__* 그대로, 폭만 ---------- */
.ix-faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.ix-faq .faq__list { margin-top: 0; }
.ix-faq__side { position: relative; }
.ix-faq__side .ix-obj { position: relative; margin-top: var(--sp-40); width: min(70%, 240px); --r: -8deg; }
@media (max-width: 900px) {
  .ix-faq { grid-template-columns: 1fr; }
  .ix-faq__side .ix-obj { display: none; }
}

/* ---------- 11. 문의(검정): 양옆에 오린 키트, 버튼 쪽으로 붓 화살표 ---------- */
.ix-contact { position: relative; overflow: hidden; padding: calc(var(--ix-py) * 1.1) 0; }
.ix-contact .lecture-cta__title { font-size: clamp(2.6rem, 6vw, 5rem); }
.ix-contact__sub { max-width: 34em; margin-inline: auto; word-break: keep-all; }
.ix-contact .o-c1 { --r: -8deg; width: clamp(120px, 10vw, 200px); left: 5vw; top: 20%; z-index: 1; }
.ix-contact .o-c3 { --r: 18deg; width: clamp(90px, 7vw, 130px); right: 12vw; top: 14%; }
.ix-contact .o-c2 { --r: 9deg; width: clamp(150px, 14vw, 260px); right: 3vw; bottom: 12%; }
@media (max-width: 767px) {
  .ix-contact .o-c1 { width: 20vw; left: -3vw; top: 6%; }
  .ix-contact .o-c2 { display: none; }
}
.partners-strip--inst .ix-title { color: var(--color-white); }

.partners-strip--inst .ix-sub { color: rgba(255,255,255,0.75); margin-bottom: var(--sp-32); }
.ix-ready .ix-sub { font-size: 1rem; }

/* 상자 장면 꾸밈 자리 (2026-11-13 대표: 제품 사진만 말고 캐릭터·물감·연필 자국도) */
.kit-rise .o2 { --r: 7deg; width: clamp(110px, 9vw, 190px); right: 2.5vw; top: calc(var(--header-h) + 4svh); }
/* 물감통 뒤로 노랑 붓 획(물감통이 위) */
.kit-rise .m1 { --r: -7deg; width: clamp(240px, 21vw, 420px); right: 0; bottom: 4svh; }
/* 조아 오른쪽 위에 손그림 반짝 선 */
.kit-rise .m2 { --r: 14deg; position: absolute; width: auto; height: calc(var(--jh) * 0.4); left: auto; right: calc(-0.5em - var(--jh) * 0.4); bottom: calc(0.78em + var(--jh) * 0.68); }
.ix-flow .o-flow2 { --r: -6deg; width: clamp(90px, 7vw, 140px); right: 9vw; top: clamp(2.5rem, 5vw, 4.5rem); z-index: 1; }
.ix-flow .o-flow3 { --r: -8deg; width: clamp(170px, 13.5vw, 260px); right: calc(9vw - clamp(40px, 3.2vw, 60px)); top: clamp(2rem, 4.5vw, 4rem); }
@media (max-width: 767px) {
  .kit-rise .o2 { width: 24vw; right: -3vw; top: 39svh; }
  .kit-rise .m1, .kit-rise .m2 { display: none; }
  .ix-flow .o-flow2, .ix-flow .o-flow3 { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ix-hl { --hl: 1 !important; } }

/* 붓 획이 큰 사진 모서리 뒤로 비친다(사진이 위). margin-top % 는 너비 기준이라 사진 높이 비율에 맞춰 둘 수 있다 */
.ix-use--big { position: relative; }
.ix-use--big .ix-use__img, .ix-case__main { position: relative; z-index: 1; }
.ix-paint { position: absolute; z-index: 0; height: auto; pointer-events: none; user-select: none; }
.ix-paint--use { width: 44%; left: -15%; top: 0; margin-top: 41%; transform: rotate(-10deg); }
.ix-paint--case { width: 42%; right: -9%; top: 0; margin-top: -7%; transform: rotate(4deg); }
@media (max-width: 767px) { .ix-paint--use { left: -4%; } .ix-paint--case { right: -2%; } }

/* 상자 장면 글: 그림 스티커와 같은 방식(서너 컷 스톱모션)으로 살짝 기울었다가 제자리에 "딱" 붙는다.
   ix-pop 은 스크립트가 붙이므로, 스크립트가 없거나 움직임 줄이기면 처음부터 보인다 */
.kit-rise .ix-pop { opacity: 0; transform: translate3d(0, 14px, 0); transition: transform 0.55s var(--ease-out), opacity 0.4s var(--ease-out); }
.kit-rise .ix-pop.is-on { opacity: 1; transform: none; }
.kit-rise__title.ix-pop { --pr: -3deg; transform-origin: 0 100%; }
.kit-rise__lead.ix-pop { --pr: 1.5deg; transform-origin: 0 50%; }
.kit-rise__sub.ix-pop { --pr: -1.5deg; transform-origin: 0 50%; }
.kit-rise .ix-spec.ix-pop { --pr: 2deg; transform-origin: 0 0; }
.kit-rise__btns.ix-pop { --pr: -4deg; transform-origin: 0 50%; }
@media (max-width: 767px) { .kit-rise__title.ix-pop, .kit-rise__lead.ix-pop, .kit-rise__sub.ix-pop { transform-origin: 50% 50%; } }

/* 아래 구역 포인트 움직임(2026-11-13 대표: 많이 말고 '귀엽다' 싶은 포인트만). 위 상자 장면과 같은 서너 컷 스톱모션.
   스크립트가 main 에 .ix-anim 을 붙였을 때만 숨겼다가 나온다(스크립트가 없거나 움직임 줄이기면 처음부터 보임) */
.ix-anim .ix-pop2 { 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); }
.ix-anim .ix-pop2.is-on { opacity: 1; transform: rotate(calc(var(--r, 0deg) + var(--sw, 0) * 3deg)); transition: transform 0.45s var(--ease-out), opacity 0.3s var(--ease-out); }
/* 반달이 둘레 손그림 고리: 9시 방향부터 시계 방향으로 6번 끊어서 그어진다 */
@property --ix-a { syntax: '<angle>'; inherits: false; initial-value: 360deg; }
.ix-anim .ix-draw { --ix-a: 0deg; -webkit-mask-image: conic-gradient(from -90deg, #000 var(--ix-a), transparent 0); mask-image: conic-gradient(from -90deg, #000 var(--ix-a), transparent 0); transition: --ix-a 0.7s var(--ease-out) 0.25s; }
.ix-anim .ix-draw.is-on { --ix-a: 360deg; }
/* 사진 뒤 붓 획: 붓이 지나가듯 왼쪽부터 5번 끊어서 */
.ix-anim .ix-swipe { clip-path: inset(0 100% 0 0); transition: clip-path 0.55s var(--ease-out) 0.1s; }
.ix-anim .ix-swipe.is-on { clip-path: inset(0 0 0 0); }
/* 서류 체크: 하나씩 "착착" */
.ix-anim .ix-ticks .ix-check { clip-path: inset(0 100% 0 0); transition: clip-path 0.35s var(--ease-out); }
.ix-anim .ix-ticks.is-on .ix-check { clip-path: inset(0 0 0 0); }
.ix-anim .ix-ticks li:nth-child(2) .ix-check { transition-delay: 0.18s; }
.ix-anim .ix-ticks li:nth-child(3) .ix-check { transition-delay: 0.36s; }
.ix-anim .ix-ticks li:nth-child(4) .ix-check { transition-delay: 0.54s; }
/* 문의 노란 별: 스크롤에 맞춰 15도씩 */
.ix-contact .ix-spin { transform: rotate(calc(var(--r, 0deg) + var(--spin, 0deg))); transition: transform 0.35s linear; }
/* 사례 작은 사진 둘: 큰 사진 밑(왼쪽 위)에 접혀 있다가 스크롤에 맞춰 4컷으로 꺼내 놓이고, 다 놓이면 스크롤에 까딱인다 */
.ix-case__a { --cr: -5deg; }
.ix-case__b { --cr: 6deg; }
.ix-anim .ix-deal { opacity: calc(var(--k, 0) * 4); transform: translate3d(calc((1 - var(--k, 0)) * -38%), calc((1 - var(--k, 0)) * -34%), 0) rotate(calc(var(--cr) + (1 - var(--k, 0)) * -16deg + var(--k, 0) * var(--sw, 0) * 1.5deg)) scale(calc(0.72 + var(--k, 0) * 0.28)); transition: transform 0.35s var(--ease-out), opacity 0.2s var(--ease-out); }
.ix-anim .ix-case__arrow { opacity: 0; transform: scaleX(-1) rotate(-14deg) scale(0.6); transition: transform 0.5s var(--ease-pop), opacity 0.3s var(--ease-out); }
.ix-anim .ix-case__arrow.is-on { opacity: 1; transform: scaleX(-1); }
/* 줄바꿈: 마지막 줄에 한 단어만 남지 않게(본문은 pretty, 가운데 정렬 리드·키트 이름은 줄 길이를 고르게) */
main.ix p { text-wrap: pretty; }
.kit-rise__lead, .ix-kits .inst-kits__name { text-wrap: balance; }
/* 상자 장면 끝: 다음 구역(흰 종이)의 찢은 윗변이 올라와 팔 잘린 선을 덮는다 — 팔이 종이 밑으로 들어간 것처럼 */
.kit-rise.ix-torn-bot::after { z-index: 3; height: clamp(30px, 3.6vw, 56px); }

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

/* 인라인 style 을 클래스로 옮김(check-institution: 인라인 style 금지) */
.ix-case__body { position: relative; }
.ix-contact__in { position: relative; z-index: 1; }

/* 만드는 순서 아래 한 줄: 사진의 상자가 기본 상자라 '이 상자로만 나간다'고 읽히지 않게 맞춤 포장을 알린다(대표 2026-11-13) */
.ix-flow__note { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-8) var(--sp-12); margin-top: clamp(2rem, 4vw, 3rem); padding-top: var(--sp-20); border-top: 1.5px solid var(--text); font-size: 1.05rem; font-weight: 700; line-height: 1.6; color: var(--text); word-break: keep-all; }
.ix-flow__note .ix-tag { transform: rotate(-3deg); }
@media (min-width: 1200px) { .ix-flow__note { padding-left: clamp(150px, 12vw, 210px); } }   /* 왼쪽 아래 물감통 자리만큼 비운다 */

/* ---------- 최적화(2026-11-13 대표: 상자 장면을 오르내리면 프레임이 튄다) ----------
   스크롤에 맞춰 움직이는 것만 따로 층을 줘서, 움직일 때 둘레(그림자 필터가 걸린 스티커들)를 다시 칠하지 않게 한다. */
.kit-rise__box, .ix-wig, .ix-spin, .ix-deal { will-change: transform; }
.kit-rise__stage { contain: layout style; }

/* ---------- 꾸밈 요소 마우스·터치 반응(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); } }

/* (이 페이지는 collage.css 를 부르지 않아 같은 규칙을 여기에도 둔다) */