/* 5517 v13 — 신세계 움직임 맞춤(2026-10-24 실측: common.css·common.js·main.css·main.js). 확대·축소 기능(html 크기 조절)은 쓰지 않는다 — 사진은 transform: scale 만. */

/* 1) VIEW MORE — 신세계 .custom_viewmore 와 같은 값 (common.css) */
.custom_viewmore{position:relative;display:inline-block;width:127px;height:45px;line-height:45px;text-align:center;font-size:15px;overflow:visible;box-sizing:content-box;padding:0!important;border:0!important;text-decoration:none;vertical-align:top}
.custom_viewmore::after{content:none}
.custom_viewmore span.copy{display:inline-block;transform:translate(0px,6px);transition:.3s}
.custom_viewmore span.line{position:absolute;width:100%;height:100%}
.custom_viewmore span.line_l{top:0;left:0}
.custom_viewmore span.line_r{bottom:0;right:0}
.custom_viewmore span.line_c{top:0;left:0}
.custom_viewmore span.line::before,.custom_viewmore span.line::after{content:"";position:absolute;display:block;transition:.19s ease}
/* v13 (대표님 2026-10-24): 신세계는 한 줄이 테두리를 도는 방식 — 우리는 가운데 세로선 기준 좌우 거울.
   ① 밑줄이 가운데에서 양쪽으로 넓어짐 → ② 양 끝에서 동시에 왼·오른 변을 타고 위로 → ③ 윗변을 양쪽 모서리에서 가운데로 → 가운데에서 만나 닫힘.
   전체 0.55초(신세계 실측 545ms)를 세 단계로 나눠 각 0.19초·ease, 단계 사이 0.01초 겹침. 떼면 거꾸로(③→②→①). */
.custom_viewmore span.line_r::after{bottom:0;left:15%;width:70%;height:0;border-bottom-width:2px;border-bottom-style:solid;border-color:inherit}
.custom_viewmore span.line_l::before{left:0;bottom:0;top:auto;width:0;height:0;border-left-width:2px;border-left-style:solid;border-color:inherit}
.custom_viewmore span.line_r::before{right:0;bottom:0;top:auto;width:0;height:0;border-right-width:2px;border-right-style:solid;border-color:inherit}
.custom_viewmore span.line_l::after{left:0;top:0;right:auto;width:0;height:0;border-top-width:2px;border-top-style:solid;border-color:inherit}
.custom_viewmore span.line_c::after{right:0;top:0;left:auto;width:0;height:0;border-top-width:2px;border-top-style:solid;border-color:inherit}
.custom_viewmore span.line_c::before{content:none}
.custom_viewmore:hover{opacity:1}
.custom_viewmore.on span.copy{transform:translate(0px,0px)}
.custom_viewmore.on span.line_r::after{left:0;width:100%;transition-delay:0s}
.custom_viewmore.on span.line_l::before,.custom_viewmore.on span.line_r::before{height:100%;transition-delay:.18s}
.custom_viewmore.on span.line_l::after,.custom_viewmore.on span.line_c::after{width:50.5%;transition-delay:.36s}
.custom_viewmore.off span.copy{transform:translate(0px,6px)}
.custom_viewmore.off span.line_l::after,.custom_viewmore.off span.line_c::after{width:0;transition-delay:0s}
.custom_viewmore.off span.line_l::before,.custom_viewmore.off span.line_r::before{height:0;transition-delay:.18s}
.custom_viewmore.off span.line_r::after{left:15%;width:70%;transition-delay:.36s}

/* 2) 사진 — 마우스를 올리면 자기 상자 안에서 1.05배, 0.6초 ease (신세계 .gu_img_box: scale(1.05), transition .6s) */
.mi{position:relative;overflow:hidden;background-image:none!important}
.mi::before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;z-index:0;pointer-events:none;background-image:var(--mi-bg);background-size:var(--mi-size);background-position:var(--mi-pos);background-repeat:var(--mi-rep);transition:transform .6s ease;transform:none}
.mi:hover::before{transform:scale(1.05)}

/* 3) 스크롤하면 나타남 — 아래 100px에서 올라오며 투명→불투명 (신세계 main.css: translate(0,100px) opacity 0 → .on) */
.rv{transform:translate(0,100px);opacity:0}
.rv.rv-on{transform:none;opacity:1;transition:transform 1s,opacity 1s}
.rv.rv-list.rv-on{transition:transform .8s,opacity .8s}
.rv.rv-more.rv-on{transition:transform .8s .9s,opacity .8s .9s}

/* 4) 맨 위로 가기 — 신세계 #btn_top (common.css) */
#btn_top{position:relative;z-index:11}
#btn_top a{position:fixed;right:24px;bottom:-40px;visibility:hidden;opacity:0;background:#000;width:40px;height:40px;border-radius:100%;display:inline-block;overflow:hidden;transition:.3s;cursor:pointer;z-index:120}
#btn_top a.on{bottom:200px;visibility:visible;opacity:.6}
#btn_top a.on:hover{opacity:.8}
#btn_top a::before{content:"";border-right:2px solid #fff;border-top:2px solid #fff;left:16px;top:17px;position:absolute;width:7px;height:7px;z-index:1;cursor:pointer;transform:rotate(-45deg)}
#btn_top a::after{content:"";border-right:2px solid #fff;border-top:2px solid #fff;left:16px;bottom:-40px;position:absolute;width:7px;height:7px;z-index:1;cursor:pointer;transform:rotate(-45deg)}
#btn_top a:hover::before{animation:mm_scroll1 .6s ease 0s 1 normal none running}
#btn_top a:hover::after{transition-delay:.6s;animation:mm_scroll2 .6s ease 0s 1 normal none running}
@keyframes mm_scroll1{0%{top:17px}100%{top:-40px}}
@keyframes mm_scroll2{0%{bottom:-40px}100%{bottom:14px}}
@media (max-width:900px){#btn_top a.on{bottom:76px;right:14px}}

/* 5) 슬라이드 화살표 — 신세계 gu_btn_arrow: 흰 원이 그려지고(0.5초) 마우스를 피해 움직임(TweenMax 1초) */
.mm-arrow{position:relative}
.mm-arrow .svg_circle{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible;fill:none;stroke:#fff;stroke-width:1px}
.mm-arrow .svg_circle circle{transition:.5s}
.mm-arrow:hover .svg_circle circle{stroke-dashoffset:0}

/* 6) 포스터가 머리 아래에 머묾 */
.mm-poster{position:sticky;top:105px}

@media (prefers-reduced-motion:reduce){
  .custom_viewmore span.copy,.custom_viewmore span.line::before,.custom_viewmore span.line::after,.mi::before,.rv.rv-on,.rv.rv-list.rv-on,.rv.rv-more.rv-on,#btn_top a,.mm-arrow .svg_circle circle{transition:none!important}
  .rv{transform:none;opacity:1}
}