.pj-hero{padding:72px 0 40px}
.pj-list{display:grid;gap:28px}
.pj{display:grid;grid-template-columns:1.1fr 1fr;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 8px 30px rgba(10,30,60,.08)}
.pj:nth-child(even) .pj-img{order:2}
.pj-img img{width:100%;height:100%;object-fit:cover;display:block;min-height:300px}
.pj-body{padding:36px 40px;display:flex;flex-direction:column;justify-content:center}
.pj-body h2{margin:.3em 0 .5em;font-size:1.7rem}
.pj-tags{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}
.pj-tags span{padding:5px 12px;border-radius:999px;background:#eef4fb;color:#0b3d6e;font-size:.85rem;font-weight:600}
.pj-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pj-steps li{border-top:3px solid #d0202e;padding-top:8px;font-size:.88rem;font-weight:600;color:#33475b}
.pj-note{font-size:.75rem;color:#8a97a5;margin-top:14px}
.pj-img:has(.pj-remote){position:relative;min-height:360px}
.pj-img img.pj-remote{position:absolute;inset:0;height:100%;object-fit:cover;object-position:center 35%}
.pj-past{margin-top:36px;padding:28px 32px;background:#fff;border-radius:16px}.pj-past h2{font-size:1.3rem;margin:0 0 .5em}

@media(max-width:820px){.pj{grid-template-columns:1fr}.pj:nth-child(even) .pj-img{order:0}.pj-body{padding:26px}}
/* motion-proto7 — About/Projects richer + motion (EK 사이트 디자인) */
.js-on .rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);transition-delay:var(--rd,0s)}
.js-on .rv.in{opacity:1;transform:none}
.m7-eyebrow{display:inline-block;color:var(--cyan-700);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;margin-bottom:8px}
.m7-h2{font-family:var(--head);font-size:2.1rem;color:var(--navy);margin:0 0 14px}
.m7-lead{font-size:1.12rem;color:#3b4f66;max-width:760px}
/* divider: right-angle cable with travelling light */
.m7-div{display:block;width:100%;height:46px;background:var(--navy)}
.m7-div--light{background:#fff}
.m7-div path.base{fill:none;stroke:rgba(0,180,216,.3);stroke-width:2}
.m7-div path.pulse{fill:none;stroke:#5FE3FF;stroke-width:3;stroke-linecap:round;stroke-dasharray:120 1880;animation:m7-run 5s linear infinite}
.m7-div path.pulse.r{stroke:#FF3B47;animation-duration:7s;animation-delay:-2s}
@keyframes m7-run{from{stroke-dashoffset:2000}to{stroke-dashoffset:0}}
/* stats */
.m7-stats{background:var(--navy);color:#fff;padding:48px 0}
.m7-stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.m7-stat{border-left:3px solid var(--red);padding-left:18px}
.m7-stat b{display:block;font-family:var(--head);font-size:2.8rem;line-height:1;color:#fff}
.m7-stat span{color:#a9bdd6;font-size:.95rem}
/* founder */
.m7-founder{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:center}
.m7-badge{aspect-ratio:1;border-radius:18px;background:linear-gradient(150deg,var(--navy),#132C4F);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;position:relative;overflow:hidden}
.m7-badge b{font-family:var(--head);font-size:4.2rem;line-height:1}.m7-badge span{color:#5FE3FF;font-weight:600}
.m7-badge::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:linear-gradient(90deg,transparent,#5FE3FF,transparent);animation:m7-sweep 3s ease-in-out infinite}
@keyframes m7-sweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.m7-quote{font-size:1.25rem;color:var(--navy);font-weight:600;border-left:4px solid var(--red);padding-left:16px;margin:18px 0}
/* cards */
.m7-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:28px}
.m7-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;transition:transform .3s ease,box-shadow .3s ease,opacity .7s,translate .7s}
.m7-card:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(11,31,58,.12)}
.m7-card .ic{width:44px;height:44px;border-radius:10px;background:#e6f7fb;color:var(--cyan-700);display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:14px}
.m7-card h3{font-family:var(--head);font-size:1.3rem;margin:0 0 8px;color:var(--navy)}
.m7-card p{margin:0;color:#4a5d73;font-size:.95rem}
.m7-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 32px;list-style:none;padding:0;margin:24px 0 0}
.m7-list li{padding:12px 0 12px 28px;border-bottom:1px solid var(--line);position:relative}
.m7-list li::before{content:"";position:absolute;left:0;top:19px;width:14px;height:2px;background:var(--cyan)}
.m7-list li::after{content:"";position:absolute;left:12px;top:16px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.m7-two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.m7-panel{background:var(--navy);color:#fff;border-radius:16px;padding:32px}
.m7-panel h3{font-family:var(--head);font-size:1.5rem;margin:0 0 10px}.m7-panel p,.m7-panel li{color:#c5d4e6}
.m7-panel .kicker{color:#5FE3FF;font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.m7-safety{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.m7-safety div{background:#fff;border-top:4px solid var(--red);border-radius:10px;padding:22px;box-shadow:var(--shadow)}
/* timeline */
.m7-tl{position:relative;max-width:760px;margin:32px 0 0;padding-left:46px}
.m7-tl::before{content:"";position:absolute;left:14px;top:6px;bottom:6px;width:3px;background:rgba(0,180,216,.2);border-radius:2px}
.m7-tl .fill{--p:100%;position:absolute;left:14px;top:6px;width:3px;height:var(--p,0%);background:linear-gradient(#00B4D8,#5FE3FF);border-radius:2px;transition:height .2s linear}
.m7-tl .fill::after{content:"";position:absolute;left:-5px;bottom:-6px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #5FE3FF,0 0 18px 6px rgba(95,227,255,.7)}
.m7-step{position:relative;padding:0 0 34px}
.m7-step::before{content:"";position:absolute;left:-40px;top:4px;width:15px;height:15px;border-radius:50%;background:var(--red);border:3px solid var(--red);transition:all .4s}
.js-on .m7-step:not(.lit)::before{background:#fff;border-color:#b9c7d6}
.m7-step.lit::before{border-color:var(--red);background:var(--red);box-shadow:0 0 0 5px rgba(227,20,27,.15)}
.m7-step .yr{font-family:var(--head);font-weight:700;color:var(--red);font-size:1.05rem}
.m7-step h3{margin:2px 0 4px;font-size:1.2rem;color:var(--navy)}.m7-step p{margin:0;color:#4a5d73}
/* chips & area */
.m7-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.m7-chips span{padding:8px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:600;color:var(--navy);transition:all .25s}
.m7-chips span:hover{border-color:var(--cyan);color:var(--cyan-700);transform:translateY(-2px)}
/* projects */
.pj{transition:transform .3s ease,box-shadow .3s ease}
.pj:hover{transform:translateY(-6px)}
.pj-img img,.pj-img img.pj-remote{position:static;height:420px;min-height:0;object-fit:cover}
.pj-img img.pj-remote{object-position:50% 47%}
.pj-img:has(.pj-remote){min-height:0}
.pj-body p{color:#3b4f66}
@media (max-width:900px){.m7-stats .grid,.m7-cards{grid-template-columns:repeat(2,1fr)}.m7-founder,.m7-two{grid-template-columns:1fr}.m7-founder .m7-badge{max-width:220px}.m7-safety{grid-template-columns:1fr}.m7-list{grid-template-columns:1fr}.pj-img img,.pj-img img.pj-remote{height:280px}}
@media (max-width:480px){.m7-cards{grid-template-columns:1fr}.m7-h2{font-size:1.7rem}.m7-stat b{font-size:2.2rem}.m7-badge::after{animation:none}.m7-tl .fill::after{box-shadow:0 0 0 3px #5FE3FF}}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.m7-div path.pulse,.m7-badge::after{animation:none;display:none}.m7-tl .fill{height:100%!important}.m7-step::before{border-color:var(--red);background:var(--red)}.m7-card,.pj{transition:none}}
.static .rv{opacity:1;transform:none;transition:none}

.m7-mt40{margin-top:40px}.m7-mt36{margin-top:36px}.m7-mt24{margin-top:24px}.m7-mt18{margin-top:18px}.m7-inherit{color:inherit}.m7-foot{margin-top:16px;max-width:360px}
/* remote card: show full portrait photo, no crop */
.pj-img:has(.pj-remote){position:relative;overflow:hidden;background:#0b1e33}
.pj-img:has(.pj-remote)::before{content:"";position:absolute;inset:-30px;background:url(/assets/img/real-pole-climb-800.webp) center/cover;filter:blur(22px) brightness(.55);transform:scale(1.1)}
.pj-img img.pj-remote{position:relative;z-index:1;height:560px;width:100%;object-fit:contain;object-position:center}
@media(max-width:820px){.pj-img img.pj-remote{height:480px}}
/* full portrait photo with blurred fill (fibre terminal) */
.pj-img:has(.pj-term){position:relative;overflow:hidden;background:#0b1e33}
.pj-img:has(.pj-term)::before{content:"";position:absolute;inset:-30px;background:url(/assets/img/real-fibre-terminal-800.webp) center/cover;filter:blur(22px) brightness(.55);transform:scale(1.1)}
.pj-img img.pj-term{position:relative;z-index:1;height:520px;width:100%;object-fit:contain;object-position:center}
@media(max-width:820px){.pj-img img.pj-term{height:460px}}

/* --- EK web: extra rules (projects 2-stat row, services/safety motion) --- */
.m7-stats--2 .grid{grid-template-columns:repeat(2,minmax(0,320px));justify-content:center}
@media (max-width:900px){.m7-stats--2 .grid{grid-template-columns:repeat(2,1fr)}}
.js-on .rv .photo{transform:scale(1.06);transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.js-on .rv.in .photo{transform:none}
.js-on .service-block li,.js-on .hs-box li{opacity:0;transform:translateX(-10px);transition:opacity .5s ease,transform .5s ease}
.js-on .rv.in li{opacity:1;transform:none}
.js-on .rv.in li:nth-child(2){transition-delay:.08s}.js-on .rv.in li:nth-child(3){transition-delay:.16s}.js-on .rv.in li:nth-child(4){transition-delay:.24s}.js-on .rv.in li:nth-child(5){transition-delay:.32s}.js-on .rv.in li:nth-child(n+6){transition-delay:.4s}
@media (prefers-reduced-motion:reduce){.js-on .rv .photo,.js-on .service-block li,.js-on .hs-box li{opacity:1;transform:none;transition:none}}
.static .rv .photo,.static .service-block li,.static .hs-box li{opacity:1;transform:none;transition:none}
/* Since 2018 on one line, same style as other numbers */
.m7-stat b.m7-since{white-space:nowrap;font-size:clamp(1.6rem,6.2vw,2.8rem)}
/* elements already on screen at load: show at once, no slide-in */
.rv-now,.rv-now *{transition:none!important}
img.photo.sv-43{aspect-ratio:4/3;object-fit:contain;background:#fff}