/* ===== works.css — 컨베이어 캐러셀·상품카드·프로젝트 상세모달 (index+portfolio 공통) ===== */

.cat-block{ margin-bottom:var(--sp-5); }
.cat-head{ display:flex; align-items:baseline; gap:1rem; margin-bottom:1.1rem; flex-wrap:wrap; }
.cat-no{ font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.12em; color:var(--accent); font-weight:600; }
.cat-head h3{ font-size:clamp(1.15rem,2.4vw,1.45rem); letter-spacing:-.01em; }
.conveyor{ overflow:hidden; padding:10px 0 18px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%); }
.conveyor-track{ display:flex; gap:20px; width:max-content; animation:convScroll 46s linear infinite; will-change:transform; }
.conveyor[data-reverse] .conveyor-track{ animation-direction:reverse; }
.conveyor:hover .conveyor-track, .conveyor:focus-within .conveyor-track{ animation-play-state:paused; }
@keyframes convScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.shop-card{ flex:0 0 300px; width:300px; background:linear-gradient(180deg,#fff 0%,#F6FAFC 100%); border:1px solid #E3EBF1; border-radius:16px; overflow:hidden; box-shadow:0 10px 26px -18px rgba(4,94,120,.24); cursor:pointer; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); text-align:left; }
.shop-card:hover{ transform:translateY(-7px); box-shadow:0 30px 54px -24px rgba(4,94,120,.36); border-color:rgba(0,146,184,.32); }
.shop-thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--paper-alt); }
.shop-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); display:block; }
.shop-card:hover .shop-thumb img{ transform:scale(1.07); }
.shop-thumb.grad{ display:flex; align-items:center; justify-content:center; }
.shop-thumb.grad svg{ width:58px; height:58px; color:#fff; opacity:.92; }
.shop-thumb.g1{ background:linear-gradient(135deg,#045E78,#0092B8); }
.shop-thumb.g2{ background:linear-gradient(135deg,#0A4A63,#12A5C4); }
.shop-thumb.g3{ background:linear-gradient(135deg,#063E52,#0092B8); }
.shop-thumb.g4{ background:linear-gradient(135deg,#0B5570,#28B0CE); }
.shop-thumb.g5{ background:linear-gradient(135deg,#045E78,#3BC0DE); }
.shop-badge{ position:absolute; top:10px; left:10px; font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.04em; padding:.3rem .55rem; border-radius:6px; z-index:2; font-weight:600; }
.shop-badge.live{ background:#0092B8; color:#fff; box-shadow:0 4px 10px -3px rgba(0,146,184,.6); }
.shop-badge.demo{ background:rgba(255,255,255,.94); color:var(--brand); }
.shop-badge.work{ background:rgba(255,255,255,.94); color:var(--brand); }
.shop-body{ padding:1rem 1.1rem 1.15rem; }
.shop-cat{ font-family:'IBM Plex Mono',monospace; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.shop-card h3{ font-size:1.04rem; letter-spacing:-.01em; margin:.34rem 0 .4rem; }
.shop-body p{ font-size:.84rem; color:var(--sub); line-height:1.55; min-height:2.6em; }
.shop-more{ display:inline-flex; align-items:center; gap:.3rem; margin-top:.75rem; font-size:.82rem; font-weight:700; color:var(--brand); }
.shop-more svg{ width:14px; height:14px; transition:transform .22s var(--ease); }
.shop-card:hover .shop-more svg{ transform:translateX(3px); }
.pf-modal{ position:fixed; inset:0; z-index:400; display:none; align-items:center; justify-content:center; padding:20px; }
.pf-modal.open{ display:flex; }
.pf-modal-backdrop{ position:absolute; inset:0; background:rgba(15,25,38,.62); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); animation:pfFade .25s ease; }
.pf-modal-panel{ position:relative; z-index:1; width:100%; max-width:640px; max-height:88vh; overflow-y:auto; background:linear-gradient(180deg,#fff 0%,#F6FAFC 100%); border-radius:20px; box-shadow:0 40px 90px -30px rgba(15,25,38,.6); animation:pfPop .3s var(--ease); }
.pf-modal-hd{ position:relative; padding:1.8rem 1.9rem 1.3rem; border-bottom:1px solid var(--line); }
.pf-m-cat{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:linear-gradient(135deg,#045E78,#0092B8); padding:.32rem .7rem; border-radius:6px; margin-bottom:.8rem; }
.pf-m-cat.demo{ background:linear-gradient(135deg,#6B7684,#98A2B0); }
.pf-modal-hd h3{ font-size:1.4rem; letter-spacing:-.02em; line-height:1.3; }
.pf-modal-close{ position:absolute; top:1.2rem; right:1.2rem; width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink); transition:background .2s; }
.pf-modal-close:hover{ background:var(--paper-alt); }
.pf-modal-close svg{ width:18px; height:18px; }
.pf-modal-bd{ padding:1.5rem 1.9rem 2rem; }
.pf-m-block{ margin-bottom:1.4rem; }
.pf-m-block:last-child{ margin-bottom:0; }
.pf-m-label{ font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:.5rem; }
.pf-m-block p{ color:var(--ink); line-height:1.72; font-size:.96rem; }
.pf-m-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.pf-m-list li{ display:flex; gap:.6rem; align-items:flex-start; color:var(--sub); font-size:.94rem; line-height:1.6; }
.pf-m-list li svg{ flex:none; width:18px; height:18px; color:var(--brand); margin-top:.15rem; }
.pf-m-stack{ display:flex; flex-wrap:wrap; gap:.5rem; }
.pf-m-stack span{ font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--brand); background:var(--accent-tint); border:1px solid rgba(0,146,184,.16); border-radius:8px; padding:.35rem .7rem; }
.pf-m-cta{ margin-top:1.6rem; }
.pf-m-cta .btn{ width:100%; justify-content:center; }
@keyframes pfFade{ from{opacity:0} to{opacity:1} }
@keyframes pfPop{ from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
.pf-modal-hd{ background:linear-gradient(135deg,#045E78 0%,#0092B8 55%,#12A5C4 100%); border-bottom:none; }
.pf-modal-hd h3{ color:#fff; }
.pf-modal-hd .pf-m-cat{ background:rgba(255,255,255,.22); color:#fff; }
.pf-modal-hd .pf-m-cat.demo{ background:rgba(255,255,255,.22); color:#fff; }
.pf-modal-close{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.34); color:#fff; }
.pf-modal-close:hover{ background:rgba(255,255,255,.3); }
.pf-m-list{ display:grid; grid-template-columns:1fr 1fr; gap:.55rem 1.2rem; }