/* hero.css — 히어로 · 3D 프리미엄 패키지 박스 · 대시보드 목업(미리보기) · 활용 장소 */

/* 히어로 */
.hero{position:relative;overflow:hidden;padding:72px 0 52px;background:radial-gradient(circle at 8% 16%,rgba(90,162,255,.16),transparent 24%),radial-gradient(circle at 90% 8%,rgba(37,99,255,.12),transparent 26%),linear-gradient(180deg,#fff 0%,#f9fbff 74%,#fff 100%)}
.hero::before{content:"";position:absolute;right:-140px;top:40px;width:520px;height:520px;background:radial-gradient(circle,rgba(37,99,255,.10),transparent 62%);border-radius:50%}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
.hero-copy h1{margin:20px 0 16px;font-size:clamp(34px,7vw,64px);line-height:1.14;letter-spacing:-2px;font-weight:900}
.hero-copy h1 .blue{color:var(--brand)}
.hero-copy p{max-width:600px;font-size:17.5px;color:var(--muted);margin:0 0 26px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hero-badges span{display:inline-flex;align-items:center;gap:7px;border:1px solid #e6eef9;background:rgba(255,255,255,.9);padding:10px 14px;border-radius:999px;color:#4b5b73;font-size:13px;font-weight:800;box-shadow:var(--shadow-soft)}
.hero-badges i{color:var(--success);font-size:15px}
@media(min-width:1000px){.hero{padding:88px 0 64px}.hero-grid{grid-template-columns:.92fr 1.08fr;gap:54px}}

/* 대시보드 목업(노트북) — 미리보기 섹션에서도 사용 */
.laptop{position:relative;filter:drop-shadow(0 28px 40px rgba(6,24,53,.20))}
.screen-shell{position:relative;background:linear-gradient(180deg,#2e3138,#090b10);padding:12px 12px 16px;border-radius:24px 24px 15px 15px;border:1px solid #3e434d}
.notch{position:absolute;left:50%;top:7px;transform:translateX(-50%);width:92px;height:15px;border-radius:0 0 11px 11px;background:#090b10;z-index:3}
.dashboard{background:#f5f8fc;border-radius:15px;overflow:hidden;height:470px;display:grid;grid-template-columns:128px 1fr}
.side{background:linear-gradient(180deg,#0a2b56,#081c37);color:#d9e8ff;padding:20px 10px}
.side-logo{font-size:17px;font-weight:900;color:#fff;margin:0 8px 22px;letter-spacing:-.5px}
.side-item{display:flex;align-items:center;gap:9px;height:34px;border-radius:9px;padding:0 10px;font-size:11px;font-weight:800;margin-bottom:4px;color:#dbeafe}
.side-item.active{background:linear-gradient(135deg,var(--brand),#3887ff);color:#fff;box-shadow:0 10px 22px rgba(37,99,255,.22)}
.side-item i{font-size:14px}
.dash-main{padding:15px}
.dash-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.dash-title{font-size:16px;font-weight:900;letter-spacing:-.5px}
.notice-chip{font-size:10px;color:#627086;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 11px;display:flex;align-items:center;gap:8px}
.notice-chip .tag{color:var(--brand);background:#eef4ff;padding:3px 7px;border-radius:999px;font-weight:900}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.stat,.panel{background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 8px 20px rgba(13,40,79,.05)}
.stat{padding:12px}
.stat-label{font-size:10px;color:#607088;font-weight:900}
.stat-value{font-size:18px;margin-top:6px;font-weight:900;letter-spacing:-.5px}
.stat-value.blue{color:var(--brand)}
.stat small{display:block;margin-top:5px;color:#8a97aa;font-size:10px}
.dash-body{display:grid;grid-template-columns:1.65fr 1fr;gap:9px;margin-top:9px}
.schedule{padding:12px}
.panel-title{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:900;margin-bottom:9px}
.panel-title .ghost{font-size:9px;color:#607088;border:1px solid var(--line);padding:4px 8px;border-radius:999px;font-weight:800}
.calendar{display:grid;grid-template-columns:34px repeat(7,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.cell{min-height:34px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;padding:4px;font-size:8px;background:#fff}
.cell.day{min-height:26px;text-align:center;background:#fbfdff;font-weight:900;color:#516074;padding-top:6px}
.time{color:#7f8ca1;font-size:8px}
.event{position:absolute;inset:auto 4px auto 4px;top:5px;height:20px;border-radius:6px;font-weight:900;display:grid;place-items:center;padding:2px;text-align:center;background:#dfeaff;color:#205fb8}
.event.green{background:#dff6e8;color:#247f53}.event.red{background:#ffe7e3;color:#bf5446}.event.cyan{background:#dcf5f5;color:#16837f}
.right-stack{display:grid;gap:9px}
.mini-panel{padding:12px}
.mini-panel .stat-value{font-size:17px;margin-top:2px}
.progress{height:7px;border-radius:999px;background:#eaf0f7;overflow:hidden;margin-top:7px}
.progress i{display:block;width:68%;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand2));border-radius:999px}
.media-row{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:10px;color:#5d6b81}
.file{width:23px;height:23px;border-radius:6px;display:grid;place-items:center;background:#eef4ff;color:var(--brand);border:1px solid #d8e6ff;font-size:8px;font-weight:900}
.donut-wrap{display:flex;align-items:center;gap:12px;margin-top:6px}
.donut{width:70px;height:70px;border-radius:50%;background:conic-gradient(var(--success) 0 82%,var(--warning) 82% 90%,var(--danger) 90% 95%,#e4e9f1 95%);position:relative;flex:0 0 70px}
.donut::after{content:"";position:absolute;inset:12px;background:#fff;border-radius:50%}
.donut-legend{font-size:9px;color:#64748b}
.donut-legend div{display:flex;align-items:center;gap:6px;margin:4px 0}
.ddot{width:7px;height:7px;border-radius:50%}
.base{width:108%;height:22px;margin-left:-4%;background:linear-gradient(#dadde3,#aeb3bb);clip-path:polygon(4% 0,96% 0,100% 64%,67% 64%,63% 100%,37% 100%,33% 64%,0 64%);border-radius:0 0 18px 18px}
@media(max-width:760px){
  .dashboard{height:340px;grid-template-columns:80px 1fr}
  .side{padding:13px 6px}.side-logo{font-size:12px;margin:0 4px 13px}
  .side-item{height:23px;padding:0 6px;font-size:7px;gap:4px;border-radius:7px}.side-item i{font-size:10px}
  .dash-main{padding:9px}.dash-title{font-size:11px}.notice-chip{display:none}
  .stats{gap:5px}.stat{padding:7px;border-radius:9px}.stat-label{font-size:7px}.stat-value{font-size:12px;margin-top:3px}.stat small{font-size:7px}
  .dash-body{gap:5px;margin-top:5px}.schedule,.mini-panel{padding:7px}.panel-title{font-size:8px}.panel-title .ghost{display:none}
  .cell{min-height:21px;font-size:6px}.cell.day{min-height:19px;padding-top:3px}.time{font-size:6px}.event{height:12px;top:3px;border-radius:4px}
  .media-row{font-size:7px;gap:5px;margin:5px 0}.file{width:15px;height:15px;font-size:6px;border-radius:4px}
  .donut{width:44px;height:44px;flex-basis:44px}.donut::after{inset:8px}.donut-legend{font-size:6px}.base{height:16px}
}
.preview-wrap{max-width:880px;margin:0 auto}

/* 프리미엄 패키지 박스 (히어로 우측, 드래그 회전) */
.pb-stage{perspective:1600px;display:flex;align-items:center;justify-content:center;height:520px;position:relative;width:100%}
.pb-box{width:380px;height:480px;position:relative;transform-style:preserve-3d;will-change:transform;cursor:grab;touch-action:none;transform:rotateX(-15deg) rotateY(-30deg)}
.pb-box.grabbing{cursor:grabbing}
.pb-hint{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:12.5px;font-weight:700;color:var(--muted);z-index:3;pointer-events:none;display:flex;align-items:center;justify-content:center;gap:6px}
.pb-hint i{font-size:15px;color:var(--brand)}
.pb-face{position:absolute;background:#fff;border:1px solid rgba(226,232,240,.8);backface-visibility:hidden;overflow:hidden}
.pb-front{width:380px;height:480px;transform:translateZ(70px);background:radial-gradient(circle at 90% 10%,rgba(243,232,255,.85),#fff 60%),linear-gradient(180deg,#fff,#f8fafc);padding:34px 30px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 0 0 40px rgba(37,99,255,.03),0 30px 60px -12px rgba(15,23,42,.22)}
.pb-hdr{display:flex;justify-content:space-between;align-items:center}
.pb-logo{display:flex;align-items:center;gap:10px}
.pb-icon{width:40px;height:40px;border-radius:10px;display:block;box-shadow:0 4px 12px rgba(37,99,255,.22)}
.pb-name{font-weight:900;font-size:18px;letter-spacing:-.5px;color:#0f172a}
.pb-ver{font-size:11px;font-weight:800;background:#eff6ff;color:#2563eb;padding:4px 10px;border-radius:999px;border:1px solid #bfdbfe}
.pb-hero{margin-top:6px}
.pb-sub{font-size:12px;font-weight:800;color:#7c3aed;text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.pb-title{font-size:33px;font-weight:900;line-height:1.2;color:#0f172a;letter-spacing:-1px}
.pb-title span{background:linear-gradient(135deg,#2563eb,#6d28d9);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pb-desc{font-size:13px;color:#64748b;margin-top:10px;line-height:1.5}
.pb-graphic{background:#0f172a;border-radius:16px;padding:16px;color:#fff;box-shadow:0 12px 24px -6px rgba(15,23,42,.25);border:1px solid rgba(255,255,255,.1);margin:14px 0}
.pb-screen{background:#1e293b;border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:10px;border:1px solid #334155}
.pb-screen-hd{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;color:#94a3b8}
.pb-live{display:flex;align-items:center;gap:5px;color:#10b981;font-weight:800}
.pb-dot{width:6px;height:6px;background:#10b981;border-radius:50%;box-shadow:0 0 8px #10b981;animation:pbPulse 1.5s infinite}
@keyframes pbPulse{0%,100%{opacity:1}50%{opacity:.35}}
.pb-bars{display:flex;gap:6px;height:36px;align-items:flex-end}
.pb-bar{flex:1;border-radius:4px}
.pb-bar.b1{height:60%;background:#3b82f6}.pb-bar.b2{height:100%;background:#8b5cf6}.pb-bar.b3{height:80%;background:#06b6d4}.pb-bar.b4{height:45%;background:#10b981}
.pb-badges{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #e2e8f0;padding-top:14px;gap:6px;flex-wrap:wrap}
.pb-badge{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:800;color:#334155}
.pb-badge i{color:#2563eb;font-size:15px}
.pb-back{width:380px;height:480px;transform:rotateY(180deg) translateZ(70px);background:radial-gradient(circle at 12% 88%,rgba(243,232,255,.75),#fff 55%),linear-gradient(180deg,#fff,#f8fafc);padding:34px 30px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;box-shadow:inset 0 0 40px rgba(37,99,255,.03)}
.pb-back-top{font-size:11px;font-weight:800;letter-spacing:.22em;color:#9aa8bd}
.pb-back-center{display:flex;flex-direction:column;align-items:center;gap:12px}
.pb-back-logo{width:88px;height:88px;border-radius:22px;box-shadow:0 16px 34px rgba(37,99,255,.22)}
.pb-back-name{font-size:32px;font-weight:900;letter-spacing:-1px;color:#0f172a}
.pb-back-name span{background:linear-gradient(135deg,#2563eb,#6d28d9);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pb-back-tag{font-size:13px;color:#64748b;max-width:240px;line-height:1.55}
.pb-back-foot{width:100%;border-top:1px solid #e2e8f0;padding-top:14px;display:flex;flex-direction:column;align-items:center;gap:8px}
.pb-barcode{width:150px;height:40px;background:repeating-linear-gradient(90deg,#1e293b 0 2px,#fff 2px 3px,#1e293b 3px 5px,#fff 5px 6px,#1e293b 6px 8px,#fff 8px 11px);border-radius:2px}
.pb-barcode-no{font-size:10px;letter-spacing:.24em;color:#64748b;font-weight:700}
.pb-co{font-size:11px;color:#64748b;line-height:1.65;font-weight:600}
.pb-co b{color:#334155}
.pb-right{width:140px;height:480px;left:240px;transform:rotateY(90deg) translateZ(70px);background:linear-gradient(180deg,#1e293b,#0f172a);color:#fff;padding:28px 16px;display:flex;flex-direction:column;justify-content:space-between;border-left:1px solid rgba(255,255,255,.1)}
.pb-side-brand{writing-mode:vertical-rl;transform:rotate(180deg);font-size:19px;font-weight:900;letter-spacing:.1em;color:#fff;display:flex;align-items:center;gap:12px;margin:0 auto}
.pb-specs{display:flex;flex-direction:column;gap:11px;font-size:11px;color:#94a3b8;border-top:1px solid rgba(255,255,255,.1);padding-top:14px}
.pb-spec{display:flex;flex-direction:column;gap:2px}
.pb-spec strong{color:#fff;font-size:11px;font-weight:700}
.pb-qr{background:#fff;padding:8px;border-radius:8px;text-align:center;margin-top:6px}
.pb-qrimg{width:100%;height:62px;background:#f1f5f9;display:grid;place-items:center;color:#0f172a;font-size:28px;border-radius:4px}
.pb-qr span{font-size:10px;color:#64748b;margin-top:4px;display:block}
.pb-left{width:140px;height:480px;left:0;transform:rotateY(-90deg) translateZ(70px);background:linear-gradient(180deg,#f8fafc,#e2e8f0);padding:22px 15px;display:flex;flex-direction:column;justify-content:space-between}
.pb-feat-title{font-size:12px;font-weight:900;color:#2563eb;border-bottom:2px solid #2563eb;padding-bottom:6px;margin-bottom:12px}
.pb-feats{list-style:none;display:flex;flex-direction:column;gap:11px;font-size:11px;color:#0f172a;font-weight:700}
.pb-feats li{display:flex;align-items:flex-start;gap:6px}
.pb-feats i{color:#7c3aed;font-size:14px;margin-top:1px}
.pb-left-foot{font-size:9.5px;color:#64748b;border-top:1px solid #e2e8f0;padding-top:10px}
.pb-top{width:380px;height:140px;top:0;transform:rotateX(90deg) translateZ(70px);background:linear-gradient(135deg,#2563eb,#6d28d9);color:#fff;padding:20px 30px;display:flex;align-items:center;justify-content:space-between}
.pb-top-logo{font-size:19px;font-weight:900;display:flex;align-items:center;gap:10px}
.pb-top-tag{font-size:12px;opacity:.9;font-weight:800}
.pb-ground{position:absolute;width:330px;height:104px;background:rgba(15,23,42,.22);border-radius:50%;filter:blur(26px);transform:rotateX(80deg) translateZ(-255px) translateY(40px);pointer-events:none}
@media(max-width:1000px){.pb-stage{height:500px}}
@media(max-width:520px){.pb-stage{height:380px}}
@media(max-width:360px){.pb-stage{height:330px}}

/* 활용 장소 */
.use-cases{margin-top:44px;position:relative;z-index:2;background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:20px;padding:18px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-items:center;box-shadow:var(--shadow-soft);backdrop-filter:blur(10px)}
.use-cases b{grid-column:1/-1;text-align:center;font-size:16px;letter-spacing:-.3px;margin-bottom:2px}
.use-item{text-align:center;font-size:12.5px;font-weight:800;color:#5d6b81}
.use-icon{width:52px;height:52px;margin:0 auto 8px;border-radius:15px;background:linear-gradient(180deg,#f8fbff,#f1f6ff);border:1px solid #dfe8f6;display:grid;place-items:center;color:var(--brand);box-shadow:0 8px 18px rgba(37,99,255,.08);font-size:24px}
@media(min-width:640px){.use-cases{grid-template-columns:170px repeat(4,1fr)}.use-cases b{grid-column:auto;text-align:left;margin:0}}
@media(min-width:1000px){.use-cases{grid-template-columns:180px repeat(8,1fr)}}