/* 메인 업그레이드 시안 (10/31) — 첫 화면 임팩트 · 설치 사진 흐르는 띠. 틀(머리 · 바닥 · 아래 구역)은 그대로 */
:root{--mo:#FF6B1A;--mk:#1D1D1F;--mg:#6E6E73;--ms:#F5F5F7}

/* ── 첫 화면 ── */
.m-hero{position:relative;overflow:hidden;padding:150px 0 96px;background:#fff}
.m-glow{position:absolute;width:900px;height:900px;left:var(--gx,70%);top:var(--gy,40%);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,107,26,.13),rgba(255,107,26,0));pointer-events:none;transition:left .9s cubic-bezier(.2,.7,.2,1),top .9s cubic-bezier(.2,.7,.2,1)}
.m-hw{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:56px;align-items:center}
.m-eye{display:inline-flex;align-items:center;gap:8px;margin:0 0 22px;font-size:15px;font-weight:700;color:var(--mk)}
.m-eye i{width:8px;height:8px;border-radius:50%;background:var(--mo);box-shadow:0 0 0 0 rgba(255,107,26,.5);animation:mpulse 2.4s infinite}
@keyframes mpulse{70%{box-shadow:0 0 0 10px rgba(255,107,26,0)}100%{box-shadow:0 0 0 0 rgba(255,107,26,0)}}
.m-h{margin:0;font-size:78px;line-height:1.08;font-weight:800;letter-spacing:-.045em;color:var(--mk)}
.m-ln{display:block;overflow:hidden;padding-bottom:.06em;white-space:nowrap}
.m-ln:first-child{color:#86868B}
.m-h em{font-style:normal;color:var(--mo);font-variant-numeric:tabular-nums}
.m-sub{margin:26px 0 0;font-size:20px;line-height:1.6;color:#424245}
.m-cta{display:flex;align-items:center;gap:28px;margin-top:40px}
.m-btn{display:inline-flex;align-items:center;gap:12px;height:60px;padding:0 30px;border-radius:999px;background:var(--mk);color:#fff;font-size:18px;font-weight:700;text-decoration:none;transition:background-color .25s,transform .2s}
.m-btn i{font-style:normal;transition:transform .25s}
.m-btn:hover{background:var(--mo)}.m-btn:hover i{transform:translateX(4px)}.m-btn:active{transform:scale(.97)}
.m-tel{display:flex;flex-direction:column;color:var(--mk);text-decoration:none;font-size:24px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.m-tel small{font-size:13px;font-weight:600;color:var(--mg);letter-spacing:0}

/* 들어올 때: 아래에서 위로 차례로 */
.m-in{display:inline-block;opacity:0;transform:translateY(40px);animation:mup .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--d) * 110ms + 100ms)}
p.m-in,div.m-in{display:block}.m-eye.m-in{display:inline-flex}.m-cta.m-in{display:flex}
@keyframes mup{to{opacity:1;transform:none}}

/* 제품 무대: 세 기종이 돌아가며 · 금액이 굴러감 */
.m-stage{position:relative;border-radius:32px;background:var(--ms);padding:22px 22px 26px;overflow:hidden}
.m-tabs{position:relative;display:flex;gap:4px;padding:4px;border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.m-tabs button{flex:1;height:40px;border:0;border-radius:999px;background:none;font:inherit;font-size:14px;font-weight:700;color:var(--mg);cursor:pointer;position:relative;z-index:1;transition:color .3s}
.m-tabs button.on{color:#fff}
.m-tabs .m-ind{position:absolute;top:4px;bottom:4px;left:0;border-radius:999px;background:var(--mk);transition:transform .45s cubic-bezier(.2,.7,.2,1),width .45s cubic-bezier(.2,.7,.2,1)}
.m-shot{display:block;position:relative;height:400px;margin:8px 0 6px}
.m-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;opacity:0;transform:translateX(40px) scale(.96);transition:opacity .6s,transform .8s cubic-bezier(.2,.7,.2,1)}
.m-shot img.on{opacity:1;transform:none}
.m-shot img.out{opacity:0;transform:translateX(-40px) scale(.96)}
.m-cap{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:0 6px}
.m-cap>div:first-child b{display:block;font-size:22px;font-weight:800;color:var(--mk);letter-spacing:-.02em}
.m-cap>div:first-child span{display:block;margin-top:4px;font-size:15px;color:var(--mg)}
.m-price{font-size:18px;font-weight:700;color:var(--mk);white-space:nowrap}
.m-price b{font-size:40px;font-weight:800;letter-spacing:-.03em;color:var(--mo);font-variant-numeric:tabular-nums}
.m-bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--mo)}
.m-bar.run{width:100%;transition:width 4.5s linear}

/* ── 설치 사진이 흐르는 띠 ── */
.m-wall{padding:12px 0 96px;overflow:hidden;background:#fff}
.m-row{display:flex;gap:16px;width:max-content;animation:mflow 70s linear infinite}
.m-row+.m-row{margin-top:16px}
.m-rev{animation-direction:reverse;animation-duration:80s}
.m-wall:hover .m-row{animation-play-state:paused}
@keyframes mflow{to{transform:translateX(-50%)}}
.m-row a{position:relative;flex:none;width:300px;height:210px;border-radius:20px;overflow:hidden;background:var(--ms)}
.m-row img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.m-row a:hover img{transform:scale(1.06)}
.m-row a span{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.94);font-size:13px;font-weight:700;color:var(--mk);white-space:nowrap}

/* ── PC 폭별 ── */
@media (max-width:1400px){.m-h{font-size:66px}.m-hw{grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:48px}.m-shot{height:340px}}
@media (max-width:1180px){.m-h{font-size:54px}.m-hw{grid-template-columns:minmax(0,1fr) minmax(0,440px)}.m-shot{height:300px}.m-price b{font-size:32px}}

/* ── 휴대폰 ── */
@media (max-width:900px){
  .m-hero{padding:104px 0 48px}
  .m-hw{grid-template-columns:1fr;gap:36px}
  .m-eye{font-size:13px;margin-bottom:16px}
  .m-h{font-size:42px}.m-ln{white-space:normal}
  .m-sub{font-size:16px;margin-top:18px}
  .m-cta{gap:20px;margin-top:28px}
  .m-btn{height:54px;padding:0 24px;font-size:16px}
  .m-tel{font-size:20px}
  .m-stage{border-radius:24px;padding:14px 14px 20px}
  .m-tabs button{font-size:13px;height:36px}
  .m-shot{height:240px}
  .m-cap b{font-size:18px}.m-cap span{font-size:13px}
  .m-price{font-size:15px}.m-price b{font-size:28px}
  .m-glow{width:600px;height:600px}
  .m-wall{padding:4px 0 56px}
  .m-row a{width:220px;height:156px;border-radius:16px}
  .m-row+.m-row{display:none}
}

@media (prefers-reduced-motion:reduce){
  .m-in{animation:none;opacity:1;transform:none}
  .m-row{animation:none}.m-eye i{animation:none}
  .m-shot img{transition:none}.m-bar.run{transition:none}
}

/* 문구 3차 (10/31): 「복합기 고민, 여기서 끝.」 — 「끝.」이 마지막에 도장 찍히듯 */
.m-ln:first-child{color:#86868B}
.m-h em.m-end{display:inline-block;color:var(--mo);animation:mstamp .7s cubic-bezier(.3,1.6,.5,1) both;animation-delay:1.05s}
@keyframes mstamp{0%{opacity:0;transform:scale(1.8) rotate(-6deg)}60%{opacity:1}100%{opacity:1;transform:none}}
.m-sub strong{color:var(--mo);font-weight:800}
@media (prefers-reduced-motion:reduce){.m-h em.m-end{animation:none}}

/* 문구 4차 (10/31): 큰 따옴표 무늬 · 「끝.」 형광펜 줄 · 아래 세 가지 */
.m-h{position:relative}
.m-q{position:absolute;font-family:Georgia,"Times New Roman",serif;font-weight:700;line-height:1;color:var(--mo);opacity:0;pointer-events:none;user-select:none;animation:mqin 1s cubic-bezier(.2,.7,.2,1) forwards}
.m-q1{left:-.18em;top:-.42em;font-size:3.2em;opacity:0;animation-delay:.2s;--qo:.13}
.m-q2{position:relative;display:inline-block;vertical-align:top;margin-left:.06em;font-size:1.1em;line-height:.9;animation-delay:1.5s;--qo:.9}
@keyframes mqin{from{opacity:0;transform:translateY(16px)}to{opacity:var(--qo);transform:none}}
.m-ln{position:relative;z-index:1}
.m-end{position:relative}
.m-mark{position:absolute;left:-8%;bottom:-.02em;width:116%;height:.42em;z-index:-1;overflow:visible}
.m-mark path{fill:none;stroke:#FFD2B5;stroke-width:16;stroke-linecap:round;stroke-dasharray:220;stroke-dashoffset:220;animation:mdraw .6s cubic-bezier(.6,0,.3,1) forwards;animation-delay:1.55s}
@keyframes mdraw{to{stroke-dashoffset:0}}
.m-ln:last-child{overflow:visible}
.m-pts{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.m-pts li{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px 0 12px;border-radius:999px;background:var(--ms);font-size:15px;color:#424245;white-space:nowrap}
.m-pts li:before{content:"";width:16px;height:16px;border-radius:50%;background:var(--mo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.m-pts li b{color:var(--mk);font-weight:800}
ul.m-pts.m-in{display:flex}
.m-cta{margin-top:34px}
@media (max-width:900px){.m-pts li{height:34px;font-size:13.5px;padding:0 12px 0 10px}.m-q1{font-size:2.6em;top:-.32em}}
@media (prefers-reduced-motion:reduce){.m-q{animation:none;opacity:var(--qo)}.m-mark path{animation:none;stroke-dashoffset:0}}
.m-h>.m-ln:nth-child(2){color:#86868B}
.m-q1{top:-.2em;left:-.34em}
.m-pts li{gap:0}.m-pts li:before{margin-right:7px}
@media (max-width:900px){.m-q1{left:-.2em;top:-.14em}}
.m-pts li{display:inline-block;line-height:38px}.m-pts li:before{display:inline-block;vertical-align:-3px}
@media (max-width:900px){.m-pts li{line-height:34px}}
/* 큰 문구 돌리기 (10/31 「더 임팩트 · 더 빠르게」) */
.m-h .m-c{display:inline-block;opacity:0;transform:translateY(.55em) rotate(7deg) scale(.9);filter:blur(8px);animation:mcin .5s cubic-bezier(.2,.9,.25,1.2) forwards;animation-delay:var(--t)}
.m-h em.m-end.m-x{animation:mslam .52s cubic-bezier(.2,1.2,.35,1) both;animation-delay:var(--sd)}
.m-h em.m-x .m-mark path{animation-duration:.32s;animation-delay:var(--md)}
.m-h .m-q2.m-x{animation-duration:.4s;animation-delay:var(--qd)}
.m-h .m-l2{animation:mhit .32s linear;animation-delay:var(--hit)}
.m-h.m-out .m-c{animation:mcout .34s cubic-bezier(.5,0,.75,0) forwards;animation-delay:var(--o)}
.m-h.m-out em.m-x,.m-h.m-out .m-q2{animation:mcout .3s cubic-bezier(.5,0,.75,0) forwards;animation-delay:.1s}
@keyframes mcin{70%{filter:blur(0)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes mslam{0%{opacity:0;transform:scale(2.8) rotate(-10deg);filter:blur(10px)}55%{opacity:1;transform:scale(.9) rotate(1.5deg);filter:blur(0)}78%{transform:scale(1.04)}100%{opacity:1;transform:none}}
@keyframes mhit{0%,100%{transform:none}20%{transform:translate(-3px,2px)}45%{transform:translate(3px,-1px)}70%{transform:translate(-1px,1px)}}
@keyframes mcout{from{opacity:1;transform:none;filter:blur(0)}to{opacity:0;transform:translateY(-.45em) scale(.96);filter:blur(8px)}}


/* ── 메인 아래 구역 (10/31 · 삼성 + 애플 느낌: 큰 제목 왼쪽 · 오른쪽 바로 가기 · 넉넉한 여백) ── */
.n-sec{padding:112px 0;background:#fff}
.n-gray{background:#F5F5F7}
.n-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.n-eye{font-size:15px;font-weight:800;color:#FF6B1A;margin-bottom:10px}
.n-h2{font-size:48px;line-height:1.18;font-weight:800;letter-spacing:-.035em;color:#1D1D1F}
.n-more{flex:none;font-size:16px;font-weight:700;color:#1D1D1F;padding:12px 20px;border-radius:99px;background:#F5F5F7;transition:background .2s}
.n-gray .n-more{background:#fff}
.n-more:hover,.n-gray .n-more:hover{background:#E8E8ED}
.n-tx small{display:block;font-size:14px;font-weight:800;color:#FF6B1A}
.n-tx b{display:block;font-size:30px;font-weight:800;letter-spacing:-.03em;color:#1D1D1F;margin-top:6px}
.n-tx span{display:block;font-size:16px;color:#6E6E73;margin-top:6px}
.n-tx em{display:block;font-style:normal;font-size:17px;font-weight:700;color:#1D1D1F;margin-top:18px;font-variant-numeric:tabular-nums}
.n-tx em strong{font-size:26px;font-weight:800;letter-spacing:-.02em}
.n-go{display:inline-flex;align-items:center;margin-top:22px;font-style:normal;font-size:15px;font-weight:700;color:#fff;background:#1D1D1F;border-radius:99px;padding:11px 20px;transition:background .2s}
.n-go:after{content:"›";margin-left:8px;font-size:18px;line-height:1}
.n-im{position:relative;display:flex;align-items:flex-end;justify-content:center}
.n-im>img{max-width:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.n-im .im2 i img{transition:transform .7s cubic-bezier(.2,.8,.2,1);transform-origin:left bottom}
/* 이달의 추천 */
.n-pick{display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:1fr 1fr;gap:20px}
.n-pc{position:relative;display:grid;grid-template-columns:1fr 46%;align-items:center;gap:12px;padding:36px;border-radius:28px;background:#F5F5F7;overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.n-pc .n-im{height:220px}.n-pc .n-im>img{height:100%}
.n-big{grid-row:span 2;grid-template-columns:1fr;align-content:space-between;padding:44px 44px 36px}
.n-big .n-tx b{font-size:40px}
.n-big .n-im{height:400px}
.n-pc:hover{transform:scale(1.012)}
.n-pc:hover .n-go{background:#FF6B1A}
.n-pc:hover .n-im>img{transform:scale(1.04)}
.n-pc .cmb>img{transform:translateX(-18%)}
.n-pc:hover .cmb>img{transform:translateX(-18%) scale(1.04)}
.n-pc:hover .cmb .im2 i img,.n-ct:hover .cmb .im2 i img{transform:scale(1.04)}
/* 종류별 */
.n-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.n-ct{position:relative;display:grid;grid-template-columns:1fr 44%;align-items:center;gap:8px;min-height:210px;padding:30px;border-radius:24px;background:#fff;overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.n-ct .n-tx b{font-size:24px;margin-top:0}
.n-ct .n-tx span{font-size:15px}
.n-ct .n-tx em{font-size:16px;margin-top:14px;color:#FF6B1A;font-weight:800}
.n-ct .n-im{height:150px}.n-ct .n-im>img{height:100%}
.n-ar{position:absolute;right:20px;top:20px;width:34px;height:34px;border-radius:50%;background:#F5F5F7;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:20px;color:#1D1D1F;transition:background .25s,color .25s,transform .25s}
.n-ct:hover{transform:translateY(-4px);box-shadow:0 24px 40px -28px rgba(29,29,31,.28)}
.n-ct:hover .n-ar{background:#FF6B1A;color:#fff;transform:translateX(3px)}
.n-ct:hover .n-im>img{transform:scale(1.05)}
.n-ct .cmb>img{transform:translateX(-18%)}
.n-ct:hover .cmb>img{transform:translateX(-18%) scale(1.05)}
/* 진행 순서 */
.n-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.n-steps li{position:relative;padding:30px 28px 32px;border-radius:24px;background:#F5F5F7}
.n-steps em{display:block;font-style:normal;font-size:15px;font-weight:800;color:#FF6B1A;font-variant-numeric:tabular-nums}
.n-steps b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;color:#1D1D1F;margin-top:30px}
.n-steps span{display:block;font-size:15px;line-height:1.6;color:#6E6E73;margin-top:10px;word-break:keep-all}
.n-steps li:not(:last-child):after{content:"";position:absolute;right:-14px;top:34px;width:8px;height:8px;border-top:2px solid #C7C7CC;border-right:2px solid #C7C7CC;transform:rotate(45deg)}
.n-steps li:nth-child(2){transition-delay:.08s}.n-steps li:nth-child(3){transition-delay:.16s}.n-steps li:nth-child(4){transition-delay:.24s}
.n-cats .rv2:nth-child(3n+2){transition-delay:.08s}.n-cats .rv2:nth-child(3n){transition-delay:.16s}
.n-pick .rv2:nth-child(2){transition-delay:.08s}.n-pick .rv2:nth-child(3){transition-delay:.16s}
.n-cs{padding-top:24px;padding-bottom:96px}
@media (max-width:1100px){.n-h2{font-size:40px}.n-pc{grid-template-columns:1fr 42%;padding:30px}.n-big{padding:36px}.n-big .n-im{height:330px}.n-ct{grid-template-columns:1fr 40%;padding:26px}.n-ct .n-tx b{font-size:21px}}
@media (max-width:900px){
  .n-sec{padding:64px 0}
  .n-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:26px}
  .n-h2{font-size:30px}
  .n-more{font-size:14px;padding:10px 16px}
  .n-pick{grid-template-columns:1fr;grid-template-rows:none;gap:14px}
  .n-big{grid-row:auto}
  .n-pc,.n-big{grid-template-columns:1fr 44%;padding:24px 22px;border-radius:22px}
  .n-big .n-tx b,.n-tx b{font-size:22px}
  .n-tx span{font-size:14px}
  .n-tx em{margin-top:12px;font-size:15px}.n-tx em strong{font-size:21px}
  .n-go{margin-top:14px;font-size:13px;padding:9px 14px}
  .n-pc .n-im,.n-big .n-im{height:150px}
  .n-cats{grid-template-columns:1fr 1fr;gap:12px}
  .n-ct{grid-template-columns:1fr;min-height:0;padding:20px 18px 18px;border-radius:20px;gap:10px}
  .n-ct .n-tx b{font-size:18px}.n-ct .n-tx span{font-size:13px}.n-ct .n-tx em{font-size:14px;margin-top:8px}
  .n-ct .n-im{height:110px;order:-1}
  .n-ar{display:none}
  .n-steps{grid-template-columns:1fr 1fr;gap:12px}
  .n-steps li{padding:22px 18px;border-radius:20px}
  .n-steps b{font-size:18px;margin-top:16px}.n-steps span{font-size:13.5px}
  .n-steps li:after{display:none}
  .n-cs{padding-top:8px}
}
/* 설치 사례 줄: 설치 사례 화면과 같은 카드 (11/2) */
#arail .cs-a{flex:0 0 280px;scroll-snap-align:start;display:block}
@media (max-width:860px){#arail .cs-a{flex-basis:220px}}
@media (max-width:860px){#arail{padding:0 20px;scroll-padding:0 20px}}
/* 닫는 큰 따옴표: 여는 따옴표와 같은 연한 배경 · 고정 (11/2) */
.m-h .m-q3{left:calc(var(--qw,0px) - .5em);bottom:-.95em;top:auto;font-size:2.6em;animation-delay:.4s;--qo:.13}
@media (max-width:900px){.m-h .m-q3{bottom:-.8em;font-size:2.2em}}
.m-h .m-q3{bottom:-.62em;left:calc(var(--qw,0px) - .35em)}@media (max-width:900px){.m-h .m-q3{bottom:-.6em}}
/* 기종 무대 결합 상품 (11/2) — 복합기 + 잉크젯 사진 겹침 · 다른 사진처럼 옆으로 들어오고 나감 */
/* 넘어가는 동안(투명도 변화) 안쪽 사진의 「곱하기」가 바탕을 못 봐서 흰 네모가 보이던 것 → 판 자체에 무대 색을 깔아 둠 (11/3 대표님) */
.m-shot .m-set{background:var(--ms)}
.m-shot .m-set{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateX(40px) scale(.96);transition:opacity .6s,transform .8s cubic-bezier(.2,.7,.2,1)}
.m-shot .m-set.on{opacity:1;transform:none}
.m-shot .m-set.out{opacity:0;transform:translateX(-40px) scale(.96)}
.m-shot .m-set>img{position:relative;inset:auto;width:auto;height:100%;max-width:62%;opacity:1;transform:translateX(-22%);transition:none}
.m-shot .m-set .im2{left:50%;bottom:6%;height:52%}
.m-shot .m-set .im2 img{position:static;opacity:1;transform:none;width:auto;height:100%;mix-blend-mode:multiply;transition:none}