/* /ai/ 사례 페이지 전용 — 공용 style.css 위에 덧씌운다 */
.ai .ai-head{padding-top:130px!important;padding-bottom:40px!important}
.ai .ai-head h1{font-size:clamp(36px,5vw,60px);letter-spacing:-.03em}
.ai .ai-head .note{margin-top:22px}

.hero-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:34px 0 0}
.hero-kpi div{background:var(--white);padding:18px 20px}
.hero-kpi b{display:block;font-size:clamp(24px,2.6vw,32px);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.hero-kpi > div > span{display:block;font-size:14px;color:var(--muted);margin-top:4px;line-height:1.45}

.toc{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:22px}
.toc a{display:flex;flex-direction:column;gap:2px;text-decoration:none;padding:16px 16px 18px;border-radius:12px;background:var(--ink);color:var(--white);transition:transform .2s}
.toc a:hover{transform:translateY(-3px)}
.toc i{font-style:normal;font-size:13px;color:var(--accent);letter-spacing:.08em}
.toc b{font-size:18px;font-weight:600}
.toc span{font-size:14px;opacity:.72;line-height:1.4}

.case{padding-top:96px!important;padding-bottom:96px!important;scroll-margin-top:40px}
.case-head{max-width:50em}
.cno{font-size:14px;letter-spacing:.1em;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:10px}
.cno::before{content:"";width:24px;height:3px;background:var(--accent)}
.case h2{font-size:clamp(26px,3.2vw,40px);letter-spacing:-.025em;line-height:1.25}
.clead{font-size:clamp(17px,1.6vw,19px);margin-top:16px;color:var(--ink2)}
.case-body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);margin-top:40px;align-items:start}
.case-body.wide-vis{grid-template-columns:.85fr 1.15fr}
.case-body > *{min-width:0}
.ctext h3{font-size:15px;font-weight:600;letter-spacing:.06em;color:var(--muted);margin:0 0 14px}
.ctext h3 + p, .ctext p{margin-bottom:12px}
.ctext h3:not(:first-child){margin-top:30px}

.who{list-style:none;display:grid;gap:10px}
.who li{display:grid;grid-template-columns:76px 1fr;column-gap:12px;align-items:baseline;font-size:16px;line-height:1.55}
.who li b{font-weight:600;margin-right:6px}
.who .wd{min-width:0}
.nw{white-space:nowrap}
.t{font-size:12.5px;font-weight:600;text-align:center;border-radius:999px;padding:3px 0;align-self:start;margin-top:2px}
.t.code{background:#e3e9f3;color:var(--ink2)}
.t.ai{background:var(--accent);color:var(--ink)}
.t.human{background:#dcefe4;color:#1f5b3c}
.t.me{background:var(--ink);color:var(--white)}

.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px}
.nums div{border-top:3px solid var(--ink);padding-top:10px}
.nums b{display:block;font-size:clamp(22px,2.2vw,28px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.nums.n4{grid-template-columns:1fr 1fr}
.nums > div > span{display:block;font-size:14px;color:var(--muted);line-height:1.45;margin-top:3px}

.cvis{margin:0}
.cvis figcaption{font-size:14px;color:var(--muted);margin-top:12px;line-height:1.5}
.dl{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:9px 16px;border-radius:999px;background:var(--ink);color:var(--white);text-decoration:none;font-size:15px}
.dl::after{content:"↓";color:var(--accent)}
.dl.out::after{content:"↗"}

/* 슬랙 메시지 모양 */
.dm{background:var(--white);border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:12px;padding:20px 22px;font-size:15.5px;line-height:1.75;box-shadow:0 18px 40px -24px #0e1b2e40}
.dm-h{font-weight:600;font-size:14px;color:var(--muted);margin-bottom:8px}
.dm-bell{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.mask{display:inline-block;height:.85em;border-radius:3px;background:#cfc9bb;vertical-align:-1px}

/* 화면 묶음 */
.phones{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.phone{border-radius:22px;overflow:hidden;border:6px solid var(--ink);background:var(--ink);box-shadow:0 18px 40px -22px #0e1b2e70}
.phone img{width:100%}
.phone-cap{font-size:13.5px;color:var(--muted);text-align:center;margin-top:8px}
.browser{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--white);box-shadow:0 22px 50px -28px #0e1b2e60}
.browser .bar{height:28px;background:#ece8df;display:flex;align-items:center;gap:6px;padding:0 12px}
.browser .bar i{width:9px;height:9px;border-radius:50%;background:#cfc9bb}
.stack{position:relative}
.stack{padding-right:4%;margin-bottom:40px}
.stack .phone.float{position:absolute;right:0;bottom:-26px;width:27%}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vthumb{position:relative;border-radius:12px;overflow:hidden;background:var(--ink)}
.vthumb img{width:100%;aspect-ratio:16/9;object-fit:cover}
.vthumb span{position:absolute;left:10px;bottom:8px;font-size:13px;color:#fff;background:#0e1b2ecc;padding:2px 8px;border-radius:6px}

/* 스토리보드 묶음 (큰 1장 + 작은 2장) */
.sb{margin-top:44px}
.sb-grid{display:grid;grid-template-columns:2fr 1fr;gap:14px}
.sb-grid a{position:relative;display:block;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--white);box-shadow:0 18px 40px -26px #0e1b2e50}
.sb-grid .sb-big{grid-row:span 2}
.sb-grid img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.sb-grid .sb-big img{height:100%;aspect-ratio:auto}
.sb-grid span{position:absolute;left:10px;bottom:8px;font-size:13px;color:#fff;background:#0e1b2ecc;padding:2px 8px;border-radius:6px}

/* 직접 다시 그린 콘솔 도식 */
.wire{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:0 18px 40px -26px #0e1b2e50}
.wire .wh{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;margin-bottom:12px}
.wire .wh em{font-style:normal;font-weight:400;font-size:12.5px;color:var(--muted)}
.wire .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.wire .tile{border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-size:12.5px;color:var(--muted);line-height:1.35}
.wire .tile .mask{display:block;width:60%;height:15px;margin-top:6px;background:#e4dfd3}
.wire .rows{margin-top:10px;display:grid;gap:6px}
.wire .row{display:grid;grid-template-columns:120px 1fr 64px;gap:8px;align-items:center;font-size:12.5px}
.wire .row .mask{height:9px;width:100%;background:#ece8df}
.wire .feed{font-size:12px;color:var(--muted);margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);display:flex;flex-wrap:wrap;gap:6px}
.wire .feed b{font-weight:600;background:#e3e9f3;color:var(--ink2);border-radius:999px;padding:2px 9px}
.lint{margin-top:14px;background:var(--ink);color:#e9edf5;border-radius:12px;padding:16px 18px;font:13.5px/1.7 ui-monospace,Consolas,monospace;overflow-x:auto}
.lint .lw{color:var(--accent)}
.lint .lr{color:#9aa7bd}
.lint .ln{display:block}
.lint .ok{color:#8fd6ac}

/* 일하는 방식 */
.take{list-style:none;counter-reset:t;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.take li{counter-increment:t;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px}
.take li::before{content:"0" counter(t);font-size:13px;letter-spacing:.1em;color:var(--muted)}
.take b{font-size:19px;font-weight:600;line-height:1.35}
.take span{color:var(--ink2);font-size:16px}

@media (max-width:980px){
  .toc{grid-template-columns:repeat(3,1fr)}
  .case-body,.case-body.wide-vis{grid-template-columns:1fr}
  .take{grid-template-columns:1fr}
}
@media (max-width:720px){
  .hero-kpi{grid-template-columns:1fr 1fr}
  .toc{grid-template-columns:1fr 1fr}
  .toc a:last-child{grid-column:1/-1}
  .who li{grid-template-columns:64px 1fr;font-size:15.5px}
  .nums{grid-template-columns:1fr 1fr}
  .nums div:last-child:nth-child(odd){grid-column:1/-1}
  .phones{gap:8px}.phone{border-width:4px;border-radius:14px}
  .wire .tiles{grid-template-columns:1fr 1fr}
  .wire .row{grid-template-columns:90px 1fr 48px}
  .stack .phone.float{width:32%;right:0}
  .sb-grid{grid-template-columns:1fr}.sb-grid .sb-big{grid-row:auto}.sb-grid .sb-big img{aspect-ratio:16/9}
  .lint{white-space:pre-wrap;font-size:12.5px}
  .lint .lr{display:block;padding-left:4ch}
  .lint .sp{display:none}
  .grid2{grid-template-columns:1fr}
}