/* 출시 지원(#release, 1인 기업 섹션은 solo.css). 2026-10-23 사용자 "게임이 컨베이어 벨트의 공장처럼 RookissAI의 기계를 통해, 광고 부착, 멀티플레이어 변환,
   최적화 작업을 거쳐서 16개국으로 뻗어 나가는 느낌으로 디자인 다시해줄래 ?": 옛 타일 넷 · 게임 화면 세 장 · 도장 대신 공장 라인 한 장면.
   [선정된 작품 더미] → 벨트 → [RookissAI 기계: 01 광고 부착 · 02 멀티플레이 전환(우수작 검토, 조건부라 점선 꼬리표) · 03 최적화] → 지구본 16 점으로 뻗는 빛줄기.
   게임 칩은 벨트를 9초에 한 번 지나고(세 장이 3초씩 어긋남) 공정 아래를 지날 때 그 공정의 팔이 눌러 표시(AD · 멀티 · 번개)가 붙는다.
   팔이 누르는 때(--ad)와 표시가 붙는 때(키프레임 %)는 칩이 공정 가운데를 지나는 때에 맞춘 값이라, 벨트 · 기계 자리(%)를 바꾸면 같이 고친다.
   움직임 줄이기 · ?still 은 세 장이 각각 1 · 2 · 3 공정을 지난 자리(--sx · --sy, is-1~3)에 멈춘 장면. 모바일은 같은 장면을 세로로(벨트가 아래로 흐른다). */
.l5-release{padding-block:clamp(32px,4.6vh,64px)}
#release .l5-in{max-width:1480px}
.l5-rel-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:end}
.l5-release .l5-h2{font-size:clamp(38px,3.8vw,58px);line-height:1.12}
.l5-rel-side{padding-bottom:4px}
.l5-release .l5-lead{max-width:460px;margin-top:0;font-size:17px;line-height:1.7;text-wrap:balance}
.l5-rel-flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin:16px 0 0;padding:0;list-style:none;color:var(--t3);font-size:13.5px;font-weight:600}
.l5-rel-flow li{display:flex;align-items:center}
.l5-rel-flow li+li::before{content:"";width:6px;height:6px;margin:0 12px;border-top:1.5px solid var(--t4);border-right:1.5px solid var(--t4);rotate:45deg}
.l5-release .l5-fine{max-width:none;margin-top:clamp(16px,2.6vh,26px);padding-top:14px;border-top:1px solid var(--ln);font-size:12px;line-height:1.7}

/* ── 공장 장면 ── --by: 벨트 가운데 높이, 칩은 --chip 폭(16:9) */
.l5-fac{--chip:clamp(84px,8.2vw,136px);--chh:calc(var(--chip) * .5625);--by:75%;--bh:26px;--T:9s;--fh:clamp(300px,46vh,500px);position:relative;height:var(--fh);margin-top:clamp(22px,3.6vh,40px)}
.l5-fac::before{content:"";position:absolute;inset:auto 0 0;height:calc(100% - var(--by) + 30px);background:radial-gradient(ellipse 60% 70% at 40% 0,rgba(255,65,85,.07),transparent 70%);pointer-events:none}

/* 선정된 작품 더미(벨트 왼쪽 끝 위) */
.l5-fac-in{position:absolute;left:0;width:15%;bottom:calc(100% - var(--by) + var(--bh) / 2 + 4px);display:flex;flex-direction:column;align-items:center}
.l5-fac-k{margin:0 0 12px;color:var(--t4);font-size:12.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.l5-fac-pile{position:relative;width:var(--chip);height:calc(var(--chh) + 20px)}
.l5-fac-pile img{position:absolute;left:0;bottom:0;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid rgba(255,255,255,.16);border-radius:8px;box-shadow:0 12px 22px -12px rgba(0,0,0,.9)}
.l5-fac-pile img:nth-child(1){bottom:18px;rotate:-7deg;filter:brightness(.45) saturate(.6)}
.l5-fac-pile img:nth-child(2){bottom:9px;rotate:5deg;filter:brightness(.65) saturate(.75)}
.l5-fac-pile img:nth-child(3){rotate:-1.5deg}

/* 벨트: 바닥 + 움직이는 홈 + 양 끝 바퀴 */
.l5-fac-belt{position:absolute;left:3%;width:67%;top:calc(var(--by) - var(--bh) / 2);height:var(--bh);border-radius:var(--bh);background:linear-gradient(180deg,#2C2C33,#151518 55%,#0D0D0F);box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(0,0,0,.6),0 18px 30px -14px rgba(0,0,0,.95)}
.l5-fac-belt i{position:absolute;inset:5px 18px;border-radius:3px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 2px,transparent 2px 24px)}
.l5-fac-belt::before,.l5-fac-belt::after{content:"";position:absolute;top:50%;width:calc(var(--bh) - 6px);aspect-ratio:1;border-radius:50%;translate:0 -50%;background:radial-gradient(circle,#4A4A52 0 2.5px,#1E1E22 3.5px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14)}
.l5-fac-belt::before{left:3px}
.l5-fac-belt::after{right:3px}

/* RookissAI 기계 */
.l5-fac-mc{position:absolute;left:17%;width:49%;top:0;bottom:calc(100% - var(--by) + var(--bh) / 2 + var(--chh) + 46px);display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:linear-gradient(180deg,#1E1E23,#141416);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 60px -30px rgba(0,0,0,.95)}
.l5-fac-mc::after{content:"";position:absolute;left:8%;right:8%;bottom:-1px;height:1.5px;background:linear-gradient(90deg,transparent,rgba(255,65,85,.85),transparent)}
.l5-fac-plate{display:flex;align-items:center;gap:8px;margin:0;padding:11px 18px;border-bottom:1px solid rgba(255,255,255,.07);color:#fff;font-size:14px}
.l5-fac-crown{width:17px;height:auto;fill:var(--ac)}
.l5-fac-plate b{font-weight:800;letter-spacing:-.02em}
.l5-fac-leds{display:flex;gap:6px;margin-left:auto}
.l5-fac-leds i{width:6px;height:6px;border-radius:50%;background:#3A3A42}
.l5-fac-leds i:first-child{background:var(--ac);box-shadow:0 0 8px rgba(255,65,85,.9)}
.l5-fac-sts{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none}
.l5-fac-st{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;padding:8px 6px;text-align:center}
.l5-fac-st+.l5-fac-st{border-left:1px dashed rgba(255,255,255,.08)}
.l5-fac-no{color:var(--t5);font-size:11.5px;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.l5-fac-st>svg{width:clamp(22px,2vw,30px);height:auto;fill:none;stroke:var(--ac);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.l5-fac-st b{color:#fff;font-size:clamp(14px,1.25vw,19px);font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.l5-fac-st em{padding:2px 9px;border:1px dashed rgba(255,255,255,.24);border-radius:999px;color:var(--t3);font-size:11.5px;font-style:normal;font-weight:700;white-space:nowrap}
/* 공정마다 아래로 뻗은 팔(막대 + 누름판 + 빨간 빛) */
.l5-fac-arm{position:absolute;z-index:3;top:100%;left:50%;width:46px;height:36px;translate:-50% 0}
.l5-fac-arm::before{content:"";position:absolute;left:50%;top:0;width:8px;height:calc(100% - 8px);translate:-50% 0;background:linear-gradient(90deg,#26262B,#43434B,#26262B)}
.l5-fac-arm::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;border-radius:3px;background:linear-gradient(180deg,#3C3C44,#222227);box-shadow:inset 0 -2px 0 var(--ac),0 6px 14px -4px rgba(255,65,85,.55)}
.l5-fac-arm i{position:absolute;left:3px;right:3px;top:100%;height:calc(var(--chh) * .9);background:linear-gradient(180deg,rgba(255,65,85,.5),rgba(255,65,85,0));clip-path:polygon(12% 0,88% 0,100% 100%,0 100%);opacity:0}
.l5-fac-st:nth-child(1){--ad:.87s}
.l5-fac-st:nth-child(2){--ad:.23s}
.l5-fac-st:nth-child(3){--ad:-.42s}

/* 벨트 위 게임 칩과 붙는 표시 */
.l5-fac-items{position:absolute;inset:0;z-index:2;pointer-events:none}
.l5-fac-it{position:absolute;left:calc(10% + 60% * var(--sx));bottom:calc(100% - var(--by) + var(--bh) / 2 - 1px);width:var(--chip);translate:-50% 0}
.l5-fac-it img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid rgba(255,255,255,.22);border-radius:8px;box-shadow:0 14px 22px -12px rgba(0,0,0,.9)}
.l5-fac-it.is-3 img{border-color:rgba(255,65,85,.75);box-shadow:0 0 0 3px rgba(255,65,85,.16),0 14px 22px -12px rgba(0,0,0,.9)}
.l5-fac-b{position:absolute;top:-9px;display:grid;place-items:center;height:20px;min-width:20px;padding:0 6px;border-radius:999px;background:var(--ac);box-shadow:0 4px 10px -2px rgba(255,65,85,.6);color:#fff;font-size:10.5px;font-style:normal;font-weight:850;letter-spacing:.02em;opacity:0;scale:.5}
.l5-fac-b svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.l5-fac-b1{left:6px}
.l5-fac-b2{left:39px;padding:0 3px;background:#18181B;box-shadow:inset 0 0 0 1.5px var(--ac),0 4px 10px -2px rgba(0,0,0,.6)}
.l5-fac-b2 svg{stroke:var(--ac2)}
.l5-fac-b3{left:65px;padding:0 3px;background:#fff}
.l5-fac-b3 svg{fill:var(--ac);stroke:var(--ac);stroke-width:1.4}
.l5-fac-it.is-1 .l5-fac-b1,.l5-fac-it.is-2 .l5-fac-b1,.l5-fac-it.is-2 .l5-fac-b2,.l5-fac-it.is-3 .l5-fac-b{opacity:1;scale:1}

/* 16개국: 벨트 끝에서 지구본 위 16 점으로 */
.l5-fac-out{position:absolute;left:70%;right:0;top:0;bottom:0}
.l5-fac-fan{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.l5-fac-fan.is-m{display:none}
.l5-fac-globe{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1}
circle.l5-fac-globe{fill:rgba(255,65,85,.035);stroke:rgba(255,255,255,.1)}
.l5-fac-line{fill:none;stroke:rgba(255,255,255,.13);stroke-width:1}
.l5-fac-ray{fill:none;stroke:var(--ac);stroke-width:1.6;stroke-linecap:round;opacity:0}
.l5-fac-node{fill:var(--ac);stroke:rgba(255,65,85,.3);stroke-width:5;paint-order:stroke}
/* 「16개국」은 지구본 바로 아래 가운데(부채 SVG 는 높이에 맞춰 그려져 지구본 가운데 x = 높이 × .5, 아래 끝 y = 높이 × .655) */
.l5-fac-cnt{position:absolute;left:calc(var(--fh) * .5);top:calc(var(--fh) * .655 + 14px);display:flex;flex-direction:column;align-items:center;margin:0;text-align:center;translate:-50% 0;white-space:nowrap}
.l5-fac-cnt b{color:var(--ac);font-size:clamp(32px,3.3vw,50px);font-weight:850;line-height:1;letter-spacing:-.04em;text-shadow:0 0 .5em rgba(255,65,85,.25)}
.l5-fac-cnt span{margin-top:8px;color:var(--t3);font-size:13.5px;font-weight:700}

@media (prefers-reduced-motion:no-preference){
  .l5-js .l5-fac-belt i{animation:l5-fac-tread .31s linear infinite}
  @keyframes l5-fac-tread{to{background-position-x:24px}}
  .l5-js .l5-fac-leds i{animation:l5-fac-led 1.2s steps(1) infinite}
  .l5-js .l5-fac-leds i:nth-child(2){animation-delay:.4s}
  .l5-js .l5-fac-leds i:nth-child(3){animation-delay:.8s}
  @keyframes l5-fac-led{0%{background:var(--ac);box-shadow:0 0 8px rgba(255,65,85,.9)}34%,100%{background:#3A3A42;box-shadow:none}}
  .l5-js .l5-fac-arm{animation:l5-fac-press 3s var(--ad) infinite}
  .l5-js .l5-fac-arm i{animation:l5-fac-beam 3s var(--ad) infinite}
  @keyframes l5-fac-press{0%,36%,64%,100%{translate:-50% 0;animation-timing-function:cubic-bezier(.5,0,.5,1)}50%{translate:-50% 9px}}
  @keyframes l5-fac-beam{0%,40%,66%,100%{opacity:0}50%{opacity:1}}
  .l5-js .l5-fac-it{animation:l5-fac-move var(--T) linear infinite;animation-delay:calc(var(--n) * var(--T) / -3)}
  .l5-js .l5-fac-it img{animation:l5-fac-done var(--T) linear infinite;animation-delay:inherit}
  .l5-js .l5-fac-b{animation:var(--T) linear infinite;animation-delay:inherit}
  .l5-js .l5-fac-b1{animation-name:l5-fac-b1}
  .l5-js .l5-fac-b2{animation-name:l5-fac-b2}
  .l5-js .l5-fac-b3{animation-name:l5-fac-b3}
  @keyframes l5-fac-move{0%{left:10%;opacity:0;scale:.9}5%{opacity:1;scale:1}93%{opacity:1;scale:1}100%{left:70%;opacity:0;scale:.8}}
  @keyframes l5-fac-done{0%,79%{border-color:rgba(255,255,255,.22);box-shadow:0 14px 22px -12px rgba(0,0,0,.9)}82%,100%{border-color:rgba(255,65,85,.75);box-shadow:0 0 0 3px rgba(255,65,85,.16),0 14px 22px -12px rgba(0,0,0,.9)}}
  @keyframes l5-fac-b1{0%,26%{opacity:0;scale:.5}28.5%{opacity:1;scale:1.25}31%,100%{opacity:1;scale:1}}
  @keyframes l5-fac-b2{0%,52%{opacity:0;scale:.5}54.5%{opacity:1;scale:1.25}57%,100%{opacity:1;scale:1}}
  @keyframes l5-fac-b3{0%,78%{opacity:0;scale:.5}80.5%{opacity:1;scale:1.25}83%,100%{opacity:1;scale:1}}
  .l5-js .l5-fac-ray{opacity:1;stroke-dasharray:.14 1;animation:l5-fac-ray 3s linear var(--rd) infinite}
  @keyframes l5-fac-ray{from{stroke-dashoffset:.14}to{stroke-dashoffset:-1}}
  .l5-js .l5-fac-node{animation:l5-fac-node 3s linear var(--rd) infinite}
  @keyframes l5-fac-node{0%,84%{stroke-width:5;stroke:rgba(255,65,85,.3)}90%{stroke-width:11;stroke:rgba(255,65,85,.4)}100%{stroke-width:5;stroke:rgba(255,65,85,.3)}}
}

/* 낮은 화면(1280×720 등) */
@media (min-width:760px) and (max-height:800px){
  .l5-release{padding-block:24px}
  .l5-release .l5-h2{font-size:clamp(36px,3.4vw,46px)}
  .l5-release .l5-lead{font-size:15.5px;line-height:1.6}
  .l5-rel-flow{margin-top:10px;font-size:12.5px}
  .l5-fac{--chip:clamp(76px,6.8vw,96px);--fh:clamp(260px,47vh,340px);margin-top:18px}
  .l5-fac-plate{padding:8px 16px;font-size:13px}
  .l5-fac-st{gap:3px;padding:6px}
  .l5-fac-st em{font-size:11px;padding:1px 8px}
  .l5-release .l5-fine{margin-top:14px;padding-top:10px}
}

/* 모바일: 장면을 세로로. 벨트는 왼쪽(20%)에서 아래로 흐르고, 공정은 오른쪽에 세 줄, 아래에 16개국 부채 */
@media (max-width:759px){
  .l5-release{padding-block:56px}
  .l5-rel-top{grid-template-columns:minmax(0,1fr);gap:18px}
  .l5-release .l5-h2{font-size:clamp(36px,10vw,52px)}
  .l5-release .l5-lead{font-size:15.5px}
  .l5-rel-flow{font-size:12.5px}
  .l5-fac{--chip:72px;container-type:inline-size;height:auto;aspect-ratio:1/1.8;margin-top:30px}
  .l5-fac::before{display:none}
  .l5-fac-in{left:calc(20% - var(--chip) / 2);width:auto;top:0;bottom:auto;flex-direction:row-reverse;align-items:flex-end;gap:12px}
  .l5-fac-k{margin:0 0 4px}
  .l5-fac-belt{left:calc(20% - var(--bh) / 2);width:var(--bh);top:10%;bottom:calc(100cqw * .676 - 2px);height:auto}
  .l5-fac-belt i{inset:18px 5px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.1) 0 2px,transparent 2px 24px)}
  .l5-fac-belt::before,.l5-fac-belt::after{left:50%;translate:-50% 0}
  .l5-fac-belt::before{top:3px}
  .l5-fac-belt::after{top:auto;bottom:3px}
  .l5-fac-mc{left:40%;width:auto;right:0;top:12%;bottom:calc(100cqw * .676 + 10px)}
  .l5-fac-plate{padding:9px 14px;font-size:13px}
  .l5-fac-sts{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(3,minmax(0,1fr))}
  .l5-fac-st{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:4px 8px;padding:6px 14px;text-align:left}
  .l5-fac-st+.l5-fac-st{border-left:0;border-top:1px dashed rgba(255,255,255,.08)}
  .l5-fac-st>svg{width:22px}
  .l5-fac-st b{font-size:15px}
  .l5-fac-st em{font-size:10.5px;padding:1px 7px}
  .l5-fac-arm{top:50%;left:auto;right:100%;width:30px;height:40px;translate:0 -50%}
  .l5-fac-arm::before{left:auto;right:0;top:50%;width:calc(100% - 8px);height:7px;translate:0 -50%;background:linear-gradient(180deg,#26262B,#43434B,#26262B)}
  .l5-fac-arm::after{left:0;right:auto;top:0;bottom:0;width:9px;height:auto;box-shadow:inset 2px 0 0 var(--ac),-6px 0 14px -4px rgba(255,65,85,.55)}
  .l5-fac-arm i{left:auto;right:100%;top:3px;bottom:3px;width:20px;height:auto;background:linear-gradient(270deg,rgba(255,65,85,.5),rgba(255,65,85,0));clip-path:polygon(100% 12%,100% 88%,0 100%,0 0)}
  .l5-fac-st:nth-child(1){--ad:.73s}
  .l5-fac-st:nth-child(2){--ad:.51s}
  .l5-fac-st:nth-child(3){--ad:.29s}
  .l5-fac-it{left:20%;top:calc(14% + 46% * var(--sy));bottom:auto;translate:-50% -50%}
  .l5-fac-b{top:-8px;height:18px;min-width:18px;font-size:9.5px}
  .l5-fac-b svg{width:11px;height:11px}
  .l5-fac-b1{left:3px}
  .l5-fac-b2{left:30px}
  .l5-fac-b3{left:51px}
  .l5-fac-out{left:0;right:0;top:auto;bottom:0;height:calc(100cqw * .676)}
  .l5-fac-fan.is-d{display:none}
  .l5-fac-fan.is-m{display:block}
  .l5-fac-cnt{right:auto;left:0;top:auto;bottom:4px;align-items:flex-start;text-align:left;translate:none}
  .l5-fac-cnt b{font-size:30px}
  .l5-fac-cnt span{margin-top:6px;font-size:12.5px}
  .l5-release .l5-fine{margin-top:28px}
}
@media (max-width:759px) and (prefers-reduced-motion:no-preference){
  .l5-js .l5-fac-belt i{animation-name:l5-fac-tread-y}
  @keyframes l5-fac-tread-y{to{background-position-y:24px}}
  @keyframes l5-fac-press{0%,36%,64%,100%{translate:0 -50%;animation-timing-function:cubic-bezier(.5,0,.5,1)}50%{translate:-7px -50%}}
  @keyframes l5-fac-move{0%{top:14%;opacity:0;scale:.9}5%{opacity:1;scale:1}93%{opacity:1;scale:1}100%{top:60%;opacity:0;scale:.8}}
  @keyframes l5-fac-b1{0%,23%{opacity:0;scale:.5}25.5%{opacity:1;scale:1.25}28%,100%{opacity:1;scale:1}}
  @keyframes l5-fac-b2{0%,54%{opacity:0;scale:.5}56.5%{opacity:1;scale:1.25}59%,100%{opacity:1;scale:1}}
  @keyframes l5-fac-b3{0%,85%{opacity:0;scale:.5}87%{opacity:1;scale:1.25}89%,100%{opacity:1;scale:1}}
}

/* FAQ(#faq, 맨 끝, 2026-10-23 사용자 "마지막 섹션 이후에 FAQ 섹션 하나 추가로 넣어줘"): 접는 목록은 사이트 challenge.css 의 .c4-q(시안 4 FAQ) 그대로, 여기서는 머리 · 폭만 */
.l5-faq .l5-faq-hd{max-width:none;margin-inline:auto;text-align:center}
.l5-faq .l5-h2{font-size:clamp(36px,3.6vw,56px);line-height:1.15}
.l5-faq .l5-lead{max-width:none;margin-inline:auto}
.l5-faq .c4-qa{max-width:920px;margin-top:clamp(24px,4vh,44px)}
/* 일곱 문항이 한 화면에 들도록(처음엔 모두 닫힘): 높이 960 이하는 줄 높이를 줄인다 */
.l5-faq{padding-block:clamp(32px,5vh,96px)}
@media (min-width:760px) and (max-height:960px){
  .l5-faq .c4-q summary{padding-block:18px}
  .l5-faq .c4-qa{margin-top:clamp(20px,3vh,32px)}
}
@media (min-width:760px) and (max-height:800px){
  .l5-faq .c4-q summary{padding-block:14px;font-size:16px}
  .l5-faq .c4-q p{padding-bottom:16px;font-size:15px}
}