/* =========================================================
   산업별 사례 (industry-*.html) — main.css + about.css + stories.css 위에 얹는 공통 스타일
   ========================================================= */


/* ---------- AI가 하는 일: 이미지 카드 3장 ---------- */
.roles{ background:#fff; padding-top:calc(var(--sec) * .8) }
.rcards{ margin-top:72px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap) }
.rcard{ display:flex; flex-direction:column }
.rcard__img{ position:relative; aspect-ratio:4 / 3; border-radius:var(--r-lg); overflow:hidden; background:#E9E7F2; isolation:isolate }
.rcard__img img{ width:100%; height:100%; object-fit:cover; transition:scale 1.2s var(--ease) }
.rcard:hover .rcard__img img{ scale:1.05 }
.rcard__img::after{ content:""; position:absolute; inset:auto 0 0; height:45%; background:linear-gradient(to top, rgba(14,12,28,.55), transparent); pointer-events:none }
.rcard__no{ position:absolute; z-index:1; left:24px; bottom:20px; font-size:16px; font-weight:700; letter-spacing:.08em; color:#fff }
.rcard__body{ padding:28px var(--r-lg) 0 }
.rcard__title{ font-size:26px; font-weight:700; line-height:1.35; letter-spacing:-.035em; color:var(--text-strong) }
.rcard__desc{ margin-top:12px; font-size:17px; line-height:1.75; color:var(--text-body) }
.rcard__tags{ margin-top:20px; display:flex; flex-wrap:wrap; gap:6px }
.rcard__tags li{ padding:4px 12px; border-radius:999px; font-size:16px; font-weight:600; color:var(--deep); background:var(--point-soft) }

/* ---------- 과제: 4개 카드 ---------- */
.hurdles{ background:var(--bg-light) }
.hgrid{ margin-top:72px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap); counter-reset:h }
.hcard{ position:relative; display:flex; flex-direction:column; min-height:360px; padding:32px; border-radius:var(--r-lg); background:#fff; box-shadow:0 0 0 1px rgba(18,16,34,.05); overflow:hidden;
  transition:translate .4s var(--ease), box-shadow .4s var(--ease) }
.hcard:hover{ translate:0 -4px; box-shadow:0 30px 60px -36px rgba(47,31,196,.3), 0 0 0 1px rgba(67,48,230,.2) }
.hcard__top{ display:flex; align-items:center; justify-content:space-between }
.hcard__tag{ padding:4px 14px; border-radius:999px; font-size:16px; font-weight:700; color:var(--deep); background:var(--point-light) }
.hcard__no{ font-size:16px; font-weight:700; letter-spacing:.06em; color:var(--text-sub); font-variant-numeric:tabular-nums }
.hcard__title{ margin-top:48px; font-size:23px; font-weight:700; line-height:1.4; letter-spacing:-.035em; color:var(--text-strong) }
.hcard__desc{ margin-top:14px; font-size:16px; line-height:1.75; color:var(--text-body) }
.hcard__ico{ position:absolute; right:-18px; top:52px; width:120px; height:120px; color:var(--point); opacity:.08; transition:opacity .4s var(--ease), translate .6s var(--ease) }
.hcard:hover .hcard__ico{ opacity:.16; translate:-6px 0 }

/* ---------- 솔루션: 어두운 배경 ---------- */
.solve{ background:var(--bg-dark); color:rgba(255,255,255,.7); overflow:hidden; isolation:isolate }
.solve::before{ content:""; position:absolute; z-index:-1; left:50%; top:-20%; width:min(1100px,120vw); aspect-ratio:1; translate:-50% 0; border-radius:50%;
  background:radial-gradient(circle, rgba(67,48,230,.28), transparent 62%) }
.solve .sec-title{ color:#fff } .solve .sec-title em{ color:var(--point-on-dark) } .solve .sec-lead{ color:rgba(255,255,255,.62) }
.pillars{ margin-top:72px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap) }
.pillar{ padding:36px 32px 40px; border-radius:var(--r-lg); background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--line-dark);
  transition:background-color .4s var(--ease), box-shadow .4s var(--ease) }
.pillar:hover{ background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(167,158,255,.35) }
.pillar__ico{ display:block; width:88px; height:88px; margin:-8px 0 0 -10px; transition:translate .5s var(--ease), scale .5s var(--ease) }
.pillar__ico img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 14px 24px rgba(67,48,230,.35)) }
.pillar:hover .pillar__ico{ translate:0 -4px; scale:1.04 }
.pillar__title{ margin-top:20px; font-size:22px; font-weight:700; line-height:1.4; letter-spacing:-.03em; color:#fff }
.pillar__desc{ margin-top:12px; font-size:16px; line-height:1.75 }

/* 고객사례 인용 */
.proof{ margin-top:var(--gap); display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gap); align-items:center;
  padding:48px; border-radius:var(--r-xl); background:linear-gradient(120deg, #2A1BA8, #4330E6 60%, #6B5CF0); color:#fff; overflow:hidden; position:relative }
.proof::after{ content:""; position:absolute; right:-80px; bottom:-120px; width:360px; aspect-ratio:1; border-radius:50%; border:1px solid rgba(255,255,255,.18); box-shadow:0 0 0 60px rgba(255,255,255,.04) }
.proof__logo{ grid-column:1 / 4; display:grid; place-items:center; aspect-ratio:16 / 9; border-radius:calc(var(--r-xl) - 12px); background:#fff; padding:24px }
.proof__logo img{ max-width:80%; max-height:56px; width:auto; height:auto; mix-blend-mode:multiply }
.proof__body{ grid-column:4 / 13; padding-left:24px; position:relative; z-index:1 }
.proof__label{ font-size:16px; font-weight:700; letter-spacing:.08em; color:rgba(255,255,255,.7) }
.proof__text{ margin-top:14px; font-size:22px; font-weight:600; line-height:1.6; letter-spacing:-.03em; color:#fff; max-width:860px }
.proof .link-arrow{ margin-top:16px; color:#fff }

/* ---------- 도입 사례 ---------- */
.usecases{ background:var(--bg-light) }
.ucgrid{ margin-top:72px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap) }
.uc{ display:flex; flex-direction:column; padding:40px; border-radius:var(--r-xl); background:#fff; transition:translate .4s var(--ease), box-shadow .4s var(--ease) }
.uc:hover{ translate:0 -4px; box-shadow:0 30px 60px -36px rgba(47,31,196,.3) }
.uc__logo{ height:56px; display:flex; align-items:center }
.uc__logo img{ max-height:44px; max-width:200px; width:auto; height:auto; mix-blend-mode:multiply }
.uc__logo--txt span{ font-size:24px; font-weight:800; letter-spacing:-.04em; color:var(--text-strong) }
.uc__meta{ margin-top:20px; display:flex; flex-wrap:wrap; gap:8px }
.uc__meta span{ padding:4px 12px; border-radius:999px; font-size:16px; font-weight:600; color:var(--deep); background:var(--point-soft) }
.uc__title{ margin-top:20px; font-size:26px; font-weight:700; line-height:1.4; letter-spacing:-.035em; color:var(--text-strong) }
.uc__rows{ margin-top:24px; padding-top:24px; border-top:1px solid var(--line); display:grid; gap:16px }
.uc__rows > div{ display:grid; grid-template-columns:56px 1fr; gap:12px }
.uc__rows dt{ font-size:16px; font-weight:700; color:var(--deep); line-height:1.7 }
.uc__rows dd{ font-size:17px; line-height:1.7; color:var(--text-body) }

/* ---------- 교육기관 고객사 ---------- */
.iclients{ background:#fff }
.iclients .cgrid{ grid-template-columns:repeat(7,minmax(0,1fr)) }
.iclients .cgrid{ margin-top:48px }
.iclients .cgrid li{ background:#fff }
.iclients .morewrap{ margin-top:40px }

@media (max-width:1280px){
  .iclients .cgrid{ grid-template-columns:repeat(5,minmax(0,1fr)) }
  .hgrid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .hcard{ min-height:300px }
}
@media (max-width:1024px){
  .rcards{ grid-template-columns:1fr; gap:48px }
  .rcard{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap); align-items:center }
  .rcard__body{ padding:0 8px }
  .pillars{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .proof{ padding:32px }
  .proof__logo{ grid-column:1 / 5 } .proof__body{ grid-column:5 / 13; padding-left:8px }
  .ucgrid{ grid-template-columns:1fr }
  .iclients .cgrid{ grid-template-columns:repeat(4,minmax(0,1fr)) }
}
@media (max-width:767px){
  .rcards,.hgrid,.pillars,.ucgrid{ margin-top:40px }
  .rcards{ gap:36px }
  .rcard{ display:flex }
  .rcard__body{ padding:22px var(--r-lg) 0 }
  .rcard__title{ font-size:22px } .rcard__desc{ font-size:16px }
  .hgrid{ grid-template-columns:1fr }
  .hcard{ min-height:0; padding:26px 24px 28px }
  .hcard__title{ margin-top:32px; font-size:21px }
  .hcard__ico{ width:96px; height:96px; top:40px }
  .pillars{ grid-template-columns:1fr }
  .pillar{ padding:28px 24px 30px }
  .pillar__title{ margin-top:16px; font-size:20px }
  .pillar__ico{ width:72px; height:72px }
  .proof{ padding:24px; row-gap:20px }
  .proof__logo,.proof__body{ grid-column:1 / -1; padding-left:0 }
  .proof__logo{ aspect-ratio:auto; height:120px }
  .proof__text{ font-size:19px }
  .uc{ padding:28px 24px }
  .uc__title{ font-size:22px }
  .uc__rows > div{ grid-template-columns:1fr; gap:2px }
  .uc__rows dd{ font-size:16px }
  .iclients .cgrid{ margin-top:32px; grid-template-columns:repeat(2,minmax(0,1fr)) }
}

.page-ind .cta{ background:#fff }

/* 해결 방식 5개: 위 3개 + 아래 2개 */
.pillars--5{ grid-template-columns:repeat(6,minmax(0,1fr)) }
.pillars--5 .pillar{ grid-column:span 2 }
.pillars--5 .pillar:nth-child(n+4){ grid-column:span 3 }
@media (max-width:1024px){ .pillars--5{ grid-template-columns:repeat(2,minmax(0,1fr)) } .pillars--5 .pillar,.pillars--5 .pillar:nth-child(n+4){ grid-column:auto } .pillars--5 .pillar:last-child{ grid-column:1 / -1 } }
@media (max-width:767px){ .pillars--5{ grid-template-columns:1fr } }

/* 고객 사례 띠: 로고 대신 화면 이미지 */
.proof__logo--img{ padding:0; overflow:hidden; aspect-ratio:4 / 3 }
.proof__logo--img img{ max-width:none; max-height:none; width:100%; height:100%; object-fit:cover; mix-blend-mode:normal }
.iclients .morewrap{ gap:12px; flex-wrap:wrap }
.iclients .morewrap [hidden]{ display:none }
@media (max-width:767px){ .proof__logo--img{ height:auto; aspect-ratio:16 / 9 } }

/* 고객 사례 띠: 로고 없이 브랜드 이름만 */
.proof--brands .proof__body{ grid-column:1 / -1; padding-left:0 }
.proof__brands{ margin-top:20px; display:flex; flex-wrap:wrap; gap:8px }
.proof__brands li{ padding:6px 14px; border-radius:999px; font-size:16px; font-weight:600; color:#fff; background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22) }

/* 모바일 간격 정리 */
@media (max-width:767px){
  .rcard__desc{ margin-top:8px } .rcard__tags{ margin-top:14px }
  .hcard__title{ margin-top:20px } .hcard__desc{ margin-top:8px }
  .pillar__title{ margin-top:12px } .pillar__desc{ margin-top:8px }
  .uc__meta{ margin-top:14px } .uc__title{ margin-top:12px; font-size:22px } .uc__rows{ margin-top:18px; padding-top:18px; gap:12px }
  .proof__text{ margin-top:10px }
}