/* Dream Photo Lab */
:root{
  --bg:#f7f6ff;--ink:#191431;--sub:#69637d;--line:rgba(62,49,113,.14);
  --accent:#7657ff;--accent-deep:#4d34c8;--pink:#ff83c8;--cyan:#79e8ff;
  --lavender:#e9e2ff;--card:rgba(255,255,255,.76);--radius:26px;
  --shadow:0 28px 80px rgba(61,43,125,.16)
}
body{background:var(--bg);color:var(--ink)}

body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.035;background-image:repeating-linear-gradient(90deg,rgba(25,20,49,.25) 0 1px,transparent 1px 4px);mix-blend-mode:soft-light}
button,input,summary{font:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.wrap{width:min(1180px,calc(100% - 40px));max-width:none;padding:0}
nav{background:rgba(247,246,255,.7);backdrop-filter:blur(20px) saturate(1.35);border-bottom:1px solid rgba(255,255,255,.75)}
nav .wrap{height:68px}
.logo{display:flex;align-items:center;gap:10px;font-weight:850;letter-spacing:-.035em;font-size:16px}
.logo-mark{width:25px;height:25px;border-radius:50%;background:radial-gradient(circle at 30% 24%,#fff 0 8%,var(--cyan) 26%,var(--pink) 56%,var(--accent) 82%);box-shadow:inset -4px -5px 8px rgba(59,33,177,.22),0 5px 16px rgba(118,87,255,.27);position:relative}
.logo-mark::after{content:'✦';position:absolute;color:#fff;font-size:9px;right:3px;top:1px;text-shadow:0 0 7px #fff}
.nav-actions{display:flex;gap:18px;align-items:center}
.nav-link{font-size:13.5px;font-weight:750;color:var(--sub);transition:.2s}
.nav-link:hover{color:var(--accent-deep)}
.nav-cta{background:var(--ink);padding:10px 19px;font-size:13.5px;font-weight:800;box-shadow:0 7px 20px rgba(25,20,49,.16);transition:transform .2s,background .2s}
.nav-cta:hover{background:var(--accent-deep);transform:translateY(-2px)}

/* HERO */
.hero{position:relative;isolation:isolate;min-height:710px;padding:72px 0 84px;overflow:hidden;text-align:left;background:radial-gradient(circle at 72% 38%,rgba(121,232,255,.83),transparent 30%),radial-gradient(circle at 88% 63%,rgba(255,131,200,.73),transparent 34%),radial-gradient(circle at 45% -8%,rgba(151,118,255,.64),transparent 41%),linear-gradient(128deg,#f7f3ff 0%,#d9ddff 42%,#a9eaff 73%,#f8ccef 100%)}
.hero::before{content:'';position:absolute;z-index:-1;width:58vw;height:58vw;max-width:820px;max-height:820px;right:-20vw;top:-27vw;border:1px solid rgba(255,255,255,.6);border-radius:50%;box-shadow:0 0 0 46px rgba(255,255,255,.09),0 0 0 92px rgba(255,255,255,.07),0 0 0 138px rgba(255,255,255,.05)}
.hero::after{content:'SELF PHOTO STUDIO  ·  CREATE YOUR MOMENT  ·  SELF PHOTO STUDIO  ·';position:absolute;left:-22px;bottom:16px;color:rgba(255,255,255,.55);font-size:12px;font-weight:800;letter-spacing:.2em;white-space:nowrap}
.hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(480px,1.08fr);gap:38px;align-items:center;min-height:540px}
.hero-copy{position:relative;z-index:5;padding-left:6px}
.hero-kicker{display:flex;align-items:center;gap:10px;margin-bottom:18px;color:var(--accent-deep);font-size:11px;font-weight:850;letter-spacing:.18em}
.hero-kicker::before{content:'';width:34px;height:1px;background:currentColor}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:var(--accent-deep);background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.88);padding:7px 13px;border-radius:99px;letter-spacing:.02em;box-shadow:0 8px 24px rgba(70,49,139,.08);backdrop-filter:blur(12px)}
.eyebrow::before{content:'✦';color:var(--pink);font-size:10px}
h1{font-size:clamp(42px,5.4vw,72px);font-weight:900;letter-spacing:-.065em;line-height:.96;margin:16px 0 22px;word-break:keep-all}
.hero-display{display:block;letter-spacing:-.075em}
.hero-display.accent{color:transparent;background:linear-gradient(95deg,var(--accent-deep),#885cff 38%,#f36ab4 78%,#fc8bca);-webkit-background-clip:text;background-clip:text}
.hero-ko{display:block;margin-top:20px;font-size:clamp(22px,2.25vw,31px);line-height:1.28;letter-spacing:-.045em;font-weight:820}
h1 .num{color:var(--accent-deep)}
.hero p.sub{font-size:clamp(15px,1.6vw,17px);color:#514b69;max-width:530px;margin:0;word-break:keep-all}
.hero-cta{justify-content:flex-start;margin:28px 0 12px}
.hero-note{font-size:12px;color:#5d5772;font-weight:650}

.btn{padding:14px 24px;border-radius:15px;font-weight:820;font-size:15px;transition:transform .22s,box-shadow .22s,background .22s,border-color .22s}
.btn-primary{background:linear-gradient(112deg,var(--accent-deep),var(--accent) 58%,#8e69ff);box-shadow:0 13px 30px rgba(79,49,203,.27)}
.btn-primary:hover{background:linear-gradient(112deg,var(--accent-deep),var(--accent) 58%,#8e69ff);transform:translateY(-2px);box-shadow:0 17px 38px rgba(79,49,203,.33)}
.btn-ghost{background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(12px)}
.btn-ghost:hover{transform:translateY(-2px);border-color:rgba(118,87,255,.35);background:rgba(255,255,255,.78)}

/* HERO VISUAL */
.hero-visual{position:relative;z-index:2;min-height:545px;perspective:1200px}
.hero-halo{position:absolute;width:390px;height:390px;left:50%;top:49%;transform:translate(-50%,-50%);border-radius:50%;background:conic-gradient(from 120deg,rgba(255,255,255,.15),rgba(255,117,204,.8),rgba(118,87,255,.42),rgba(103,236,255,.84),rgba(255,255,255,.15));box-shadow:inset 0 0 60px rgba(255,255,255,.75),0 30px 90px rgba(83,47,193,.18)}
.hero-halo::after{content:'';position:absolute;inset:44px;border-radius:50%;background:radial-gradient(circle at 40% 30%,rgba(255,255,255,.7),rgba(227,220,255,.2) 55%,rgba(118,87,255,.18));backdrop-filter:blur(8px)}
.photo-card{position:absolute;width:246px;border:8px solid rgba(255,255,255,.88);border-bottom-width:42px;background:#fff;border-radius:6px;box-shadow:0 25px 70px rgba(38,24,92,.24);overflow:visible;transform-origin:center;transition:transform .35s ease}
.photo-card img{width:100%;aspect-ratio:1.28/1;object-fit:cover}
.photo-card span{position:absolute;left:12px;right:12px;bottom:-31px;display:flex;justify-content:space-between;color:#5f5776;font-size:9px;font-weight:850;letter-spacing:.13em}
.photo-card span::after{content:'SP · 58';color:var(--accent)}
.photo-card.back-left{left:1%;top:23%;transform:rotate(-12deg) translateZ(-60px)}
.photo-card.main{width:300px;left:27%;top:12%;z-index:3;transform:rotate(3deg) translateZ(50px)}
.photo-card.back-right{right:-1%;top:36%;z-index:2;transform:rotate(13deg) translateZ(-30px)}

.hero-visual:hover .back-left{transform:rotate(-15deg) translate(-8px,-5px) translateZ(-60px)}
.hero-visual:hover .main{transform:rotate(1deg) translateY(-8px) translateZ(50px)}
.hero-visual:hover .back-right{transform:rotate(16deg) translate(8px,-4px) translateZ(-30px)}
.holo-badge{position:absolute;z-index:6;right:3%;top:5%;width:116px;height:116px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;background:radial-gradient(circle at 30% 25%,#fff 0 4%,#8bedff 25%,#bc83ff 58%,#ff77bd 100%);box-shadow:inset -12px -13px 24px rgba(64,34,174,.22),0 18px 40px rgba(71,39,171,.24);transform:rotate(8deg)}
.holo-badge strong{font-size:40px;line-height:.9;letter-spacing:-.07em;text-shadow:0 2px 14px rgba(50,25,130,.18)}
.holo-badge small{font-size:9px;font-weight:900;letter-spacing:.1em;margin-top:7px}
.hero-ticket{position:absolute;z-index:7;left:4%;bottom:5%;padding:10px 15px;border:1px solid rgba(255,255,255,.85);background:rgba(255,255,255,.45);color:#514286;border-radius:10px;backdrop-filter:blur(12px);font-size:10px;font-weight:850;letter-spacing:.12em;transform:rotate(5deg);box-shadow:0 10px 30px rgba(58,35,135,.12)}
.spark{position:absolute;z-index:8;color:#fff;text-shadow:0 0 14px #fff;font-size:34px;line-height:1}
.spark.s1{right:5%;bottom:18%}.spark.s2{left:16%;top:5%;font-size:20px}.spark.s3{right:31%;bottom:0;font-size:22px}

/* SHOWCASE */
.showcase{position:relative;z-index:3;margin:-34px auto 0;max-width:none;padding:0 0 92px}
.showcase-panel{width:min(1060px,calc(100% - 40px));margin:0 auto;padding:26px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);border-radius:34px;box-shadow:var(--shadow);backdrop-filter:blur(24px)}
.showcase-head{display:flex;align-items:end;justify-content:space-between;gap:24px;padding:5px 5px 22px}
.showcase-head p{font-size:12px;color:var(--sub);font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.showcase-head h2{max-width:620px;text-align:right}
.viewer{border-radius:22px;background:#d8d2e7;box-shadow:0 18px 42px rgba(40,27,94,.16);border:1px solid rgba(255,255,255,.9)}
.viewer.single .after-clip img{background:#171329}
.divider{width:2px;box-shadow:0 0 18px rgba(0,0,0,.35)}
.divider::after{content:'◂  ▸';color:var(--accent-deep);font-size:11px;padding:9px 11px;box-shadow:0 7px 20px rgba(32,21,76,.25)}
.tag{top:15px;font-size:11px;font-weight:850;padding:6px 11px;background:rgba(25,20,49,.58);backdrop-filter:blur(8px)}
.tag.before{left:15px}.tag.after{right:15px;background:rgba(118,87,255,.84)}
.preset-label{bottom:15px;right:15px;background:rgba(255,255,255,.9);font-size:12px;font-weight:850;padding:7px 13px;box-shadow:0 6px 18px rgba(24,18,60,.18);backdrop-filter:blur(8px)}
.chip-cats{justify-content:flex-start;margin:22px 0 13px}
.cat{font-size:12px;font-weight:780;padding:7px 13px;background:rgba(255,255,255,.8);border:1px solid var(--line);transition:.18s}
.cat:hover{border-color:rgba(118,87,255,.4);color:var(--accent-deep)}
.cat.on{background:var(--ink);border-color:var(--ink);box-shadow:0 7px 20px rgba(25,20,49,.14)}
.chips{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:9px;max-width:none}
.chip{border-radius:13px;border:3px solid transparent;transition:.18s;background:#d8d2e7}
.chip img{transition:transform .3s}.chip:hover img{transform:scale(1.06)}
.chip span{font-size:10px;font-weight:750;background:linear-gradient(transparent,rgba(20,14,44,.8));padding:16px 5px 6px}
.chip.on{border-color:var(--pink);transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,91,178,.25)}

/* SECTIONS */
section{padding:92px 0}
.sec-head{margin-bottom:44px}
.sec-head .eyebrow{margin-bottom:15px}
h2{font-size:clamp(28px,3.8vw,43px);font-weight:900;letter-spacing:-.045em;line-height:1.14;word-break:keep-all}
.sec-head p{color:var(--sub);margin-top:11px;font-size:15px}
#how{position:relative;background:linear-gradient(180deg,#f7f6ff,#eeebff 70%,#f7f6ff)}
.steps{grid-template-columns:repeat(5,1fr);gap:12px}
.step{background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);border-radius:20px;padding:24px 18px;box-shadow:0 12px 34px rgba(49,33,105,.07);backdrop-filter:blur(10px)}
.step::after{content:'';position:absolute;left:19px;right:19px;top:62px;height:1px;background:linear-gradient(90deg,var(--cyan),var(--pink));opacity:.55}
.step b.n{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--lavender) 50%,var(--pink));color:var(--accent-deep);font-size:12px;margin-bottom:24px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.75)}
.step h3{font-size:15.5px;font-weight:850;margin-bottom:7px}
.step p{font-size:13px;line-height:1.58;word-break:keep-all}
.notice{background:linear-gradient(120deg,#18132f,#3a2678);color:#f7f4ff;border-radius:22px;padding:28px;gap:18px;margin-top:18px;box-shadow:0 18px 45px rgba(42,27,100,.16)}
.notice .ico{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:14px;background:rgba(255,255,255,.1);font-size:21px}
.notice b{font-size:16px;margin-bottom:5px}
.notice p{font-size:13.5px;color:#cfc9e3;line-height:1.65}
.notice p strong{color:var(--cyan)}

/* PRICING */
#pricing{position:relative;overflow:hidden}
#pricing::before{content:'';position:absolute;width:430px;height:430px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-45%);background:linear-gradient(135deg,rgba(121,232,255,.43),rgba(255,131,200,.35));filter:blur(60px);z-index:-1}
.price-card{position:relative;overflow:hidden;max-width:490px;background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.96);border-radius:30px;padding:42px 38px;box-shadow:var(--shadow);backdrop-filter:blur(16px)}
.price-card::before{content:'58 MOODS';position:absolute;right:-25px;top:25px;color:rgba(118,87,255,.08);font-size:66px;font-weight:950;letter-spacing:-.08em;transform:rotate(90deg)}
.price-card .badge{font-size:11px;font-weight:850;color:var(--accent-deep);background:linear-gradient(90deg,rgba(121,232,255,.42),rgba(255,131,200,.34));padding:6px 13px;border:1px solid rgba(255,255,255,.85)}
.price-num{font-size:54px;font-weight:950;letter-spacing:-.065em}
.price-desc{font-size:13.5px;margin:4px 0 22px}
.price-feats{max-width:320px;font-size:13.5px;gap:10px}
.price-feats li::before{content:'✦';color:var(--pink);font-size:10px;margin-top:3px}
.pay-note{font-size:11.5px;margin-top:13px}
#reviews{background:linear-gradient(180deg,transparent,rgba(229,223,255,.46),transparent)}
.reviews{gap:13px}
.review{background:var(--card);border:1px solid rgba(255,255,255,.9);border-radius:20px;padding:24px 21px;box-shadow:0 12px 30px rgba(52,36,112,.07)}
.review .stars{color:#ff85c7;font-size:13px;margin-bottom:10px}
.review p{line-height:1.7;margin-bottom:15px}
.review .rtag{background:var(--lavender);color:var(--accent-deep);font-size:10.5px;padding:4px 9px}
.faq{max-width:760px}
details{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.92);border-radius:16px;padding:0 22px;box-shadow:0 8px 24px rgba(52,36,112,.055)}
summary{font-size:15px;padding:19px 0}
summary::after{content:'+';display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--lavender);font-size:16px;color:var(--accent-deep);font-weight:700}
details[open] summary::after{content:'−'}
details p{padding-bottom:19px;font-size:13.5px;line-height:1.75}

/* FINAL */
.final{position:relative;overflow:hidden;background:radial-gradient(circle at 75% 15%,rgba(121,232,255,.48),transparent 26%),radial-gradient(circle at 15% 90%,rgba(255,131,200,.36),transparent 30%),linear-gradient(135deg,#17122e,#4b32a7);border-radius:32px;padding:72px 28px;margin-bottom:68px;box-shadow:0 30px 65px rgba(44,27,105,.2)}
.final::before,.final::after{content:'';position:absolute;border:1px solid rgba(255,255,255,.22);border-radius:50%}
.final::before{width:280px;height:280px;right:-105px;top:-130px;box-shadow:0 0 0 35px rgba(255,255,255,.035),0 0 0 70px rgba(255,255,255,.025)}
.final::after{width:100px;height:100px;left:7%;bottom:-52px;background:linear-gradient(135deg,rgba(121,232,255,.42),rgba(255,131,200,.54))}
.final h2,.final p,.final .btn{position:relative}
.final p{color:#d7d1e9;margin-bottom:27px}
.final .btn-primary{background:#fff;color:var(--accent-deep);box-shadow:none}
.final .btn-ghost{background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.26)!important}
footer{padding:28px 20px 42px;font-size:12px}
#refundModal{backdrop-filter:blur(10px)}
#refundModal>div{border:1px solid rgba(255,255,255,.9);box-shadow:0 28px 80px rgba(30,20,72,.28)}

@media (prefers-reduced-motion:no-preference){
  .photo-card.main{animation:float-main 5.6s ease-in-out infinite}
  .holo-badge{animation:float-badge 4.8s ease-in-out infinite}
  .spark{animation:twinkle 2.8s ease-in-out infinite alternate}
  @keyframes float-main{50%{transform:rotate(1deg) translateY(-10px) translateZ(50px)}}
  @keyframes float-badge{50%{transform:rotate(12deg) translateY(-8px)}}
  @keyframes twinkle{50%{opacity:.32;transform:scale(.65) rotate(18deg)}}
}

/* RESPONSIVE */
@media(max-width:960px){
  .hero{padding-top:58px}.hero-grid{grid-template-columns:1fr;gap:18px}
  .hero-copy{text-align:center;max-width:680px;margin:0 auto;padding:0}
  .hero-kicker,.hero-cta{justify-content:center}.hero p.sub{margin:0 auto}
  .hero-visual{min-height:470px;max-width:640px;width:100%;margin:0 auto}
  .steps{grid-template-columns:repeat(2,1fr)}.step:last-child{grid-column:1/-1}
}
@media(max-width:640px){
  .wrap,.showcase-panel{width:min(100% - 28px,1180px)}
  nav .wrap{height:62px}.nav-actions{gap:9px}.nav-link{display:none}.nav-cta{padding:9px 14px;font-size:12.5px}
  .logo{font-size:14px}.logo-mark{width:22px;height:22px}
  .hero{min-height:auto;padding:48px 0 68px}.hero::before{width:105vw;height:105vw;right:-68vw;top:-20vw}.hero-grid{min-height:0}
  .hero-kicker{font-size:9px;margin-bottom:13px}
  h1{font-size:clamp(38px,13.2vw,55px);margin-top:13px}.hero-ko{font-size:21px;margin-top:15px}
  .hero p.sub{font-size:14px}.hero p.sub br{display:none}
  .hero-cta{display:grid;grid-template-columns:1fr;width:100%;margin-top:22px}
  .btn{width:100%;padding:13px 16px;font-size:14px}.hero-note{font-size:10.5px;word-break:keep-all}
  .hero-visual{min-height:370px;margin-top:8px}.hero-halo{width:270px;height:270px}.hero-halo::after{inset:29px}
  .photo-card{width:142px;border-width:5px;border-bottom-width:28px}.photo-card span{bottom:-21px;font-size:6px;left:7px;right:7px}
  .photo-card.main{width:205px;left:21%;top:11%}.photo-card.back-left{left:-2%;top:29%}.photo-card.back-right{right:-2%;top:39%}
  .holo-badge{width:82px;height:82px;right:2%;top:1%}.holo-badge strong{font-size:29px}.holo-badge small{font-size:6px;margin-top:5px}
  .hero-ticket{left:2%;bottom:8%;font-size:7px;padding:8px 10px}.spark.s1{right:1%;bottom:13%}.spark.s2{left:11%;top:4%}
  .showcase{margin-top:-28px;padding-bottom:68px}.showcase-panel{padding:14px;border-radius:24px}
  .showcase-head{display:block;padding:5px 2px 16px}.showcase-head h2{text-align:left;margin-top:4px;font-size:25px}.showcase-head p{font-size:9px}
  .viewer{border-radius:16px}.tag{top:9px;font-size:9px;padding:5px 8px}.tag.before{left:9px}.tag.after{right:9px}.preset-label{bottom:9px;right:9px;font-size:10px;padding:5px 9px}
  .chip-cats{flex-wrap:nowrap;overflow-x:auto;padding-bottom:3px;scrollbar-width:none}.chip-cats::-webkit-scrollbar{display:none}.cat{flex:none}
  .chips{grid-template-columns:repeat(4,1fr);gap:7px}.chip span{font-size:8.5px}
  section{padding:68px 0}.sec-head{margin-bottom:30px}.sec-head p{font-size:13.5px}
  .steps{grid-template-columns:1fr}.step:last-child{grid-column:auto}.step{padding:20px}.step::after{display:none}.step b.n{margin-bottom:12px}
  .notice{padding:22px 19px;gap:13px}.notice .ico{width:36px;height:36px;font-size:18px}.notice p{font-size:12.5px}
  .price-card{padding:34px 22px;border-radius:24px}.price-num{font-size:48px}
  .final{padding:58px 20px;border-radius:24px;margin-bottom:48px}.final .btn{margin:4px 0}
  #refundModal>div{padding:24px 20px!important}
}

/* compatibility with the original single-file markup */
.hero-new+.hero{display:none}
.logo{font-size:0}
.logo::before{content:'';width:25px;height:25px;border-radius:50%;background:radial-gradient(circle at 30% 24%,#fff 0 8%,var(--cyan) 26%,var(--pink) 56%,var(--accent) 82%);box-shadow:inset -4px -5px 8px rgba(59,33,177,.22),0 5px 16px rgba(118,87,255,.27)}
.logo #brandName,.logo em{font-size:16px}
nav .wrap>div:last-child{display:flex;gap:18px;align-items:center}
nav .wrap>div:last-child>a:not(.nav-cta){font-size:13.5px!important;font-weight:750!important;color:var(--sub)!important}
.showcase{width:min(1060px,calc(100% - 40px));margin:-34px auto 92px;padding:26px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);border-radius:34px;box-shadow:var(--shadow);backdrop-filter:blur(24px)}
.showcase::before{content:'DRAG TO COMPARE  ·  마음에 드는 무드를 직접 골라보세요';display:block;padding:3px 4px 21px;color:var(--accent-deep);font-size:12px;font-weight:850;letter-spacing:.08em}
@media(max-width:640px){
  .logo::before{width:22px;height:22px}.logo #brandName,.logo em{font-size:14px}
  nav .wrap>div:last-child{gap:9px}nav .wrap>div:last-child>a:not(.nav-cta){display:none}
  .showcase{width:min(100% - 28px,1060px);margin:-28px auto 68px;padding:14px;border-radius:24px}
  .showcase::before{padding:3px 2px 14px;font-size:9px;letter-spacing:.045em}
}