/* 프로그램 페이지 전용 (홈페이지 장면·버튼·목록 모양을 그대로 쓰고, 폰 화면·영상 창만 더함) */
.pgm .scene{min-height:auto;padding:calc(var(--hd) + 56px) 0 72px}
.pgm .scene .wrap{min-height:0}
.pgm .scene:nth-of-type(even){background:var(--ivory)}
.pgm .scene.l .wrap{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
.pgm .scene.r .wrap{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
.pgm .scene .body{margin-top:22px;font-size:clamp(16px,1.2vw,19px);color:var(--sub);line-height:1.75}
.pgm .state{display:inline-block;margin-top:18px;font-size:14px;font-weight:700;padding:6px 14px;border-radius:999px;background:var(--gr-l);color:var(--gr-d)}
.pgm .state.soon{background:var(--or-l);color:var(--or-d)}
.pgm .state.dev{background:#EAEAE7;color:var(--mute)}
.pgm .lines b{color:var(--ink);font-weight:700}
.pgm .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.pgm .scene.r .acts{justify-content:flex-end}
.pgm .scene.r .lines{width:fit-content;margin-left:auto;text-align:left}
.pgm .acts .btn{min-height:52px;padding:0 24px;font-size:16px}
.pgm .note{margin-top:14px;font-size:13px;color:var(--mute)}
.pgm .note a{text-decoration:underline;text-underline-offset:3px}
.pgm .media{justify-self:center;width:min(300px,100%)}
.pgm .scene.r .media{order:-1}
.pgm .intro .art{max-height:min(62vh,640px)}

.phone{position:relative;display:block;width:100%;aspect-ratio:9/19;border-radius:40px;padding:10px;background:#141413;border:0;cursor:pointer;font:inherit;box-shadow:0 40px 60px -30px rgba(0,0,0,.5),inset 0 0 0 2px #2c2c2a;transition:transform .3s cubic-bezier(.23,1,.32,1)}
.phone .sc{position:absolute;inset:10px;border-radius:31px;overflow:hidden;background:#fff}
.phone .sc img{width:100%;height:100%;object-fit:cover;object-position:top}
.phone .play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:74px;height:74px;border-radius:50%;background:var(--or);display:grid;place-items:center;box-shadow:0 14px 30px -10px rgba(240,120,38,.7);transition:transform .25s cubic-bezier(.23,1,.32,1)}
.phone .play::after{content:"";margin-left:6px;border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent}
.phone .cap{position:absolute;left:50%;bottom:26px;translate:-50% 0;white-space:nowrap;font-size:13px;font-weight:700;color:#fff;background:rgba(17,17,17,.82);padding:7px 14px;border-radius:999px}
@media (hover:hover) and (pointer:fine){ .phone:hover{transform:translateY(-6px)} .phone:hover .play{transform:scale(1.08)} }
.eps{display:flex;gap:8px;margin-top:16px;justify-content:center}
.eps button{font:inherit;font-size:14px;font-weight:700;padding:9px 15px;border-radius:999px;border:1.5px solid #d6d6d2;background:#fff;cursor:pointer;transition:border-color .2s ease,color .2s ease}
.eps button:hover{border-color:var(--or);color:var(--or-d)}

.vm{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(17,17,17,.78);opacity:0;visibility:hidden;transition:opacity .22s cubic-bezier(.23,1,.32,1),visibility 0s .22s}
.vm.on{opacity:1;visibility:visible;transition:opacity .22s cubic-bezier(.23,1,.32,1)}
.vm-box{position:relative;width:min(420px,100%);transform:scale(.96);transition:transform .25s cubic-bezier(.23,1,.32,1)}
.vm.on .vm-box{transform:none}
.vm video{width:100%;max-height:calc(100dvh - 120px);border-radius:22px;background:#000;object-fit:contain}
.vm-t{color:#fff;font-weight:700;margin-bottom:10px;padding-right:48px}
.vm-x{position:absolute;right:0;top:-6px;width:40px;height:40px;border-radius:50%;border:0;background:#fff;cursor:pointer}
.vm-x::before,.vm-x::after{content:"";position:absolute;left:12px;top:19px;width:16px;height:2px;background:#111;rotate:45deg}
.vm-x::after{rotate:-45deg}
.quick a.q-prog.on{background:var(--gr-l)}

@media (max-width:1023px){
  .pgm .scene.l .wrap,.pgm .scene.r .wrap{grid-template-columns:1fr}
  .pgm .scene.r .txt{text-align:left} .pgm .scene.r .tag{margin-left:0} .pgm .scene.r .acts{justify-content:flex-start}
  .pgm .scene.r .media{order:0}
  .pgm .scene.r .lines{margin-left:0}
  .pgm .media{width:min(280px,76%);margin-top:28px}
  .pgm .intro .art{display:none}
}
@media (prefers-reduced-motion:reduce){ .phone,.phone .play,.vm,.vm-box{transition:none} }

/* ── 차별화 모음 (special.html) ── */
.sp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);margin-top:clamp(28px,5vh,56px)}
.sp-item{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 18px 40px -30px rgba(0,0,0,.35);transition:transform .3s cubic-bezier(.23,1,.32,1),box-shadow .3s cubic-bezier(.23,1,.32,1),border-color .2s ease}
.sp-item .ph{aspect-ratio:16/10;overflow:hidden;background:var(--ivory)}
.sp-item .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.23,1,.32,1)}
.sp-item .ph.contain img{object-fit:contain;padding:14px}
.sp-item .bd{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px;flex:1}
.sp-item .kd{font-size:12.5px;font-weight:800;letter-spacing:.08em;color:var(--or)}
.sp-item h3{font-size:clamp(19px,1.5vw,23px);letter-spacing:-.03em;line-height:1.35}
.sp-item p{font-size:15px;color:var(--sub);line-height:1.6}
.sp-item .go{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:15px;color:var(--ink)}
.sp-item .go::after{content:"";width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;rotate:45deg;transition:translate .25s cubic-bezier(.23,1,.32,1)}
.sp-item.page .go{color:var(--or-d)}
@media (hover:hover) and (pointer:fine){
  .sp-item:hover{transform:translateY(-6px);border-color:var(--or);box-shadow:0 30px 50px -30px rgba(0,0,0,.45)}
  .sp-item:hover .ph img{transform:scale(1.04)}
  .sp-item:hover .go::after{translate:4px 0}
}
.pgm .sp .wrap{display:block}
.pgm .sp h2{max-width:900px}

/* ── 사진 모음 (wrap.html) ── */
.gal{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;margin-top:clamp(24px,4vh,44px)}
.gal button{position:relative;border:0;padding:0;cursor:zoom-in;border-radius:18px;overflow:hidden;background:#ddd;font:inherit}
.gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.23,1,.32,1)}
.gal figcaption,.gal .cp{position:absolute;left:12px;bottom:12px;font-size:13px;font-weight:700;color:#fff;background:rgba(17,17,17,.7);padding:6px 12px;border-radius:999px}
@media (hover:hover) and (pointer:fine){ .gal button:hover img{transform:scale(1.04)} }
.gal .w8{grid-column:span 8;aspect-ratio:16/11}.gal .w4{grid-column:span 4;min-height:100%}.gal .w6{grid-column:span 6;aspect-ratio:16/7.5}.gal .w12{grid-column:span 12;aspect-ratio:16/6}
.views{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(24px,4vh,44px)}
.views figure{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 18px 14px;display:flex;flex-direction:column;align-items:center;gap:10px}
.views figure.sm img{max-height:300px;width:auto}
.views img{width:100%;height:auto;cursor:zoom-in}
.views figcaption{font-size:14px;font-weight:700;color:var(--sub)}
.vm img{display:block;max-width:min(1200px,100%);max-height:calc(100dvh - 120px);border-radius:16px;margin:0 auto;background:#fff}
.vm-box.wide{width:min(1200px,100%)}
@media (max-width:1023px){
  .sp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gal .w8,.gal .w4,.gal .w6,.gal .w12{grid-column:span 12;aspect-ratio:16/11}
  .gal .w4{aspect-ratio:4/5}
  .views{grid-template-columns:1fr}
}
@media (max-width:640px){ .sp-grid{grid-template-columns:1fr} }