/* =========================================================
   고객 사례 (customer-stories) — main.css + about.css 위에 얹는 페이지 전용 스타일
   ========================================================= */

.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.hchips{ margin-top:32px; display:flex; flex-wrap:wrap; gap:8px }
.hchips li{ padding:8px 16px; border-radius:999px; font-size:16px; font-weight:600; color:#fff;
  background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px) }
.ico-plus{ display:inline-block; width:18px; height:18px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat }
.ico-out{ display:inline-block; width:18px; height:18px; flex:none; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat }
.page-stories .logos{ background:var(--bg-light) }

/* 공통 탭 */
.ftabs{ margin-top:48px; display:flex; flex-wrap:wrap; gap:8px }
.ftabs button{ display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 20px; border-radius:999px; font-size:16px; font-weight:600; color:var(--text-body);
  background:#fff; box-shadow:inset 0 0 0 1px var(--line-strong); transition:background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease) }
.ftabs button span{ font-weight:700; color:var(--text-sub); font-variant-numeric:tabular-nums }
.ftabs button:hover{ box-shadow:inset 0 0 0 1px var(--text-strong) }
.ftabs button[aria-selected="true"]{ background:var(--text-strong); color:#fff; box-shadow:none }
.ftabs button[aria-selected="true"] span{ color:var(--point-on-dark) }
.morewrap{ margin-top:48px; display:flex; justify-content:center }
.morewrap[hidden]{ display:none }

/* ---------- 대표 사례 ---------- */
.spot{ background:#fff }
.cs-feat{ margin-top:64px }
.cs-feat__logo{ margin-top:24px; height:44px; display:flex; align-items:center }
.cs-feat__logo img{ height:32px; width:auto; mix-blend-mode:multiply }
.cs-feat .feat__title{ margin-top:12px }

.legal{ margin-top:var(--gap); padding:16px; border-radius:var(--r-xl); background:var(--bg-dark); color:rgba(255,255,255,.75); overflow:hidden; position:relative; isolation:isolate }
.legal::before{ content:""; position:absolute; z-index:-1; right:-10%; top:-30%; width:60%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(67,48,230,.35), transparent 65%) }
.legal__top{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gap); align-items:center }
.legal__img{ grid-column:1 / 7; aspect-ratio:16 / 9; border-radius:calc(var(--r-xl) - 10px); overflow:hidden; background:#1A1540 }
.legal__img img{ width:100%; height:100%; object-fit:cover; transition:scale 1s var(--ease) }
.legal:hover .legal__img img{ scale:1.03 }
.legal__body{ grid-column:7 / 13; padding:24px 32px 24px 24px; display:flex; flex-direction:column; align-items:flex-start }
.badge--dark{ color:#D9D3FF; background:rgba(167,158,255,.16) }
.legal__org{ margin-top:22px; display:inline-flex; align-items:center; gap:10px; font-size:18px; font-weight:700; color:#fff; letter-spacing:-.02em }
.legal__org::before{ content:""; width:24px; height:1px; background:rgba(255,255,255,.5) }
.legal__title{ margin-top:10px; font-size:32px; font-weight:700; line-height:1.3; letter-spacing:-.04em; color:#fff }
.legal__desc{ margin-top:18px; font-size:17px; line-height:1.75 }
.legal__body .link-arrow{ margin-top:24px; color:#fff }
.legal__body .link-arrow:hover{ color:var(--point-on-dark) }
.legal__pts{ margin-top:16px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap) }
.legal__pts li{ padding:28px 28px 32px; border-radius:calc(var(--r-xl) - 10px); background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px var(--line-dark) }
.legal__pts span{ font-size:16px; font-weight:700; color:var(--point-on-dark); letter-spacing:.06em }
.legal__pts h4{ margin-top:14px; font-size:20px; font-weight:700; letter-spacing:-.03em; color:#fff }
.legal__pts p{ margin-top:10px; font-size:16px; line-height:1.7 }

/* ---------- 산업별 도입 사례 ---------- */
.cases-x{ background:var(--bg-light) }
.case-grid{ margin-top:32px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap) }
.case{ display:flex; flex-direction:column; padding:28px 32px 32px; border-radius:var(--r-lg); background:#fff; box-shadow:0 0 0 1px rgba(18,16,34,.05);
  transition:box-shadow .35s var(--ease), translate .35s var(--ease) }
.case:hover{ translate:0 -4px; box-shadow:0 30px 60px -36px rgba(47,31,196,.35), 0 0 0 1px rgba(67,48,230,.25) }
.case[hidden]{ display:none }
/* 로고 칸: 이미지가 있으면 로고, 없으면 기관명을 같은 칸에 표시 */
.case__logo{ height:52px; display:flex; align-items:center; justify-content:flex-start }
.case__logo img{ width:auto; height:auto; max-height:40px; max-width:170px; object-fit:contain; mix-blend-mode:multiply }
.case__logo--txt span{ font-size:22px; font-weight:800; letter-spacing:-.04em; color:var(--text-strong) }
.case__logo--gen span{ display:inline-flex; align-items:center; gap:10px; font-size:20px; font-weight:700; letter-spacing:-.03em; color:var(--text-body) }
.case__logo--gen span::before{ content:""; width:28px; height:28px; border-radius:8px; background:var(--point-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234330E6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M9 7h6M9 11h6M9 15h4'/%3E%3C/svg%3E") center/16px no-repeat }
.case__meta{ margin-top:14px; display:flex; align-items:center; gap:10px; padding-bottom:20px; border-bottom:1px solid var(--line) }
.case__chip{ font-size:16px; font-weight:600; padding:3px 12px; border-radius:999px; background:var(--point-soft); color:var(--deep) }
.case__org{ font-size:16px; font-weight:600; color:var(--text-sub) }
/* 기관명은 로고 칸이 대신 보여주므로 화면에서는 숨기고 읽기 프로그램용으로만 남김 */
.case__org{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.case{ position:relative }
.case__rows{ margin-top:20px; display:grid; gap:14px }
.case__rows > div{ display:grid; grid-template-columns:44px 1fr; gap:10px }
.case__rows dt{ font-size:16px; font-weight:700; color:var(--deep); line-height:1.65 }
.case__rows dd{ font-size:16px; line-height:1.65; color:var(--text-body) }

/* ---------- 주요 고객사 ---------- */
.clients{ background:#fff }
.cgrid{ margin-top:32px; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line) }
.cgrid li{ aspect-ratio:212 / 100; display:grid; place-items:center; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; overflow:hidden }
/* 로고 원본(212×91)보다 키우지 않음 — 확대되면 흐려짐 */
.cgrid img{ width:auto; height:auto; max-width:min(84%, 212px); mix-blend-mode:multiply; filter:grayscale(1); opacity:.7; transition:filter .35s var(--ease), opacity .35s var(--ease), scale .5s var(--ease) }
.cgrid li:hover img{ filter:none; opacity:1; scale:1.04 }

@media (max-width:1280px){ .cgrid{ grid-template-columns:repeat(5,minmax(0,1fr)) } }
@media (max-width:1024px){
  .legal__img,.legal__body{ grid-column:1 / -1 } .legal__body{ padding:16px 8px 8px }
  .legal__pts{ grid-template-columns:1fr }
  .case-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .cgrid{ grid-template-columns:repeat(4,minmax(0,1fr)) }
}
@media (max-width:767px){
  .ftabs{ margin-top:32px; flex-wrap:nowrap; overflow-x:auto; margin-left:calc(var(--pad) * -1); margin-right:calc(var(--pad) * -1); padding:0 var(--pad); scrollbar-width:none }
  .ftabs::-webkit-scrollbar{ display:none }
  .ftabs button{ flex:none; min-height:44px; padding:0 16px }
  .cs-feat{ margin-top:36px }
  .cs-feat__logo{ margin-top:18px }
  .legal{ padding:10px }
  .legal__title{ font-size:24px } .legal__desc{ font-size:16px }
  .legal__pts li{ padding:22px }
  .case-grid{ grid-template-columns:1fr; gap:12px }
  .case{ padding:22px 22px 26px }
  .case__rows > div{ grid-template-columns:1fr; gap:2px }
  .cgrid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}

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

@media (max-width:767px){ .legal__org{ margin-top:16px } .legal__title{ margin-top:8px } .legal__desc{ margin-top:12px } .legal__pts h4{ margin-top:10px } .legal__pts p{ margin-top:6px } .case__meta{ margin-top:10px; padding-bottom:16px } .case__rows{ margin-top:16px; gap:12px } }