/* 업종 쇼케이스 — 좌 설명 · 우 카드 더미. data-pos 0 이 맨 앞, 4 이상은 숨김 */
.sec-showcase{overflow:hidden;word-break:keep-all}
.sec-showcase__layout{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:var(--gap);
  align-items:center;
}

.sec-showcase__heading{
  font-family:var(--f-head);
  font-size:44px;font-weight:800;
  line-height:1.25;letter-spacing:-.04em;
}

.sec-showcase__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.sec-showcase__chip{
  padding:9px 16px;
  font-family:var(--f-base);font-size:14px;font-weight:600;
  color:var(--c-text-sub);
  background:var(--c-bg);
  border:1px solid var(--c-line);
  border-radius:999px;
  cursor:pointer;
  transition:var(--tr);
}
.sec-showcase__chip:hover{color:var(--c-text);border-color:var(--c-text-mute)}
.sec-showcase__chip.is-active{color:#fff;background:var(--c-text);border-color:var(--c-text)}

.sec-showcase__panels{position:relative;margin-top:32px;min-height:200px}
.sec-showcase__panel{display:none}
.sec-showcase__panel.is-active{display:block;animation:showcaseIn .5s ease both}
@keyframes showcaseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.sec-showcase__title{font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.35}
.sec-showcase__body{margin-top:12px;color:var(--c-text-sub);line-height:1.7}
.sec-showcase__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.sec-showcase__btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 24px;
  font-weight:700;font-size:15px;
  color:var(--c-text);
  background:var(--c-bg);
  border:1px solid var(--c-line);
  border-radius:var(--btn-radius);
  transition:var(--tr);
}
.sec-showcase__btn:hover{border-color:var(--c-text)}
.sec-showcase__btn--fill{color:#fff;background:var(--c-primary);border-color:var(--c-primary)}
.sec-showcase__btn--fill:hover{background:var(--c-primary-d);border-color:var(--c-primary-d)}

/* 카드 더미 */
.sec-showcase__stage{position:relative;height:600px}
.sec-showcase__card{
  position:absolute;top:50%;left:0;
  width:62%;aspect-ratio:3/4;
  overflow:hidden;
  border-radius:16px;
  background:#fff;
  box-shadow:0 24px 60px rgba(15,23,42,.18);
  transform-origin:left center;
  transition:transform .7s cubic-bezier(.2,.7,.2,1), opacity .5s ease, filter .5s ease;
  will-change:transform;
}
.sec-showcase__card img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}

.sec-showcase__card[data-pos="0"]{z-index:5;transform:translate(0,-50%) scale(1)}
.sec-showcase__card[data-pos="1"]{z-index:4;transform:translate(42%,-50%) scale(.86);filter:brightness(.9)}
.sec-showcase__card[data-pos="2"]{z-index:3;transform:translate(74%,-50%) scale(.74);filter:brightness(.8)}
.sec-showcase__card[data-pos="3"]{z-index:2;transform:translate(100%,-50%) scale(.64);filter:brightness(.7)}
.sec-showcase__card:not([data-pos="0"]):not([data-pos="1"]):not([data-pos="2"]):not([data-pos="3"]){
  z-index:1;opacity:0;transform:translate(120%,-50%) scale(.56);pointer-events:none;
}

@media (max-width:1024px){
  .sec-showcase__layout{grid-template-columns:1fr;gap:32px}
  .sec-showcase__heading{font-size:32px}
  .sec-showcase__chips{margin-top:24px}
  .sec-showcase__panels{min-height:0}
  .sec-showcase__stage{order:-1;height:auto;aspect-ratio:4/3}
  .sec-showcase__card{width:52%}
}

/* 모바일 — 업종 버튼은 가로 스크롤 없이 여러 줄로 감싼다 */
@media (max-width:640px){
  .sec-showcase__heading{font-size:25px;line-height:1.3}
  .sec-showcase__chips{gap:6px}
  .sec-showcase__chip{padding:7px 12px;font-size:13px}
  .sec-showcase__panels{margin-top:24px}
  .sec-showcase__title{font-size:19px}
  .sec-showcase__body{font-size:15px}
  /* 버튼은 위아래로 전체 폭 — 반씩 나누면 「○○ 사례 보기」가 세 줄로 접힌다 */
  .sec-showcase__actions{margin-top:20px;flex-direction:column;gap:8px}
  .sec-showcase__btn{justify-content:center;padding:14px;font-size:15px;white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){
  .sec-showcase__card{transition:none}
  .sec-showcase__panel.is-active{animation:none}
}