/* ==================================================
   LESERO — 나에게 맞는 시술 찾기 (공용)
   index / cases / events 세 페이지가 함께 씁니다.
   ================================================== */
/* ════════════════════════════════════════════════
   FIND — 유도 띠 + 모달
   ════════════════════════════════════════════════ */
.find{position:relative;overflow:hidden;padding:var(--bay) 0;
  background:var(--veil);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fd-bloom{
  position:absolute;z-index:0;pointer-events:none;
  left:50%;top:50%;width:min(120vw,1100px);aspect-ratio:2/1;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(ellipse at 32% 48%,rgba(165,56,76,.16),transparent 58%),
    radial-gradient(ellipse at 66% 55%,rgba(216,147,119,.14),transparent 56%),
    radial-gradient(ellipse at 50% 40%,rgba(131,48,74,.09),transparent 62%);
  filter:blur(52px);
  animation:fdDrift 19s ease-in-out infinite;
}
@keyframes fdDrift{
  0%,100%{ transform:translate(-50%,-50%) scale(1)    rotate(0deg) }
  50%    { transform:translate(-52%,-48%) scale(1.12) rotate(6deg) }
}
.find-in{position:relative;z-index:1;text-align:center}
.fd-sub{margin-top:22px;font-size:14.5px;line-height:1.95;color:var(--ash)}
.fd-open{
  position:relative;isolation:isolate;overflow:visible;
  margin-top:clamp(38px,5vh,58px);padding:19px 48px;
  border:1px solid var(--ink);background:rgba(255,255,255,.7);backdrop-filter:blur(6px);
  cursor:pointer;font-size:14.5px;letter-spacing:.02em;color:var(--ink);
  transition:color .5s ease,letter-spacing .8s var(--e);
}
.fd-open span{position:relative;z-index:2}
.fd-open::before{content:"";position:absolute;inset:0;z-index:1;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--e)}
.fd-open:hover::before{transform:scaleX(1)}
.fd-open:hover{color:var(--paper);letter-spacing:.05em}
.fd-open::after{
  content:"";position:absolute;inset:-2px;z-index:0;pointer-events:none;
  border:1px solid var(--pigment);opacity:0;
  animation:fdRing 2.8s cubic-bezier(.14,.72,.24,1) infinite;
}
@keyframes fdRing{
  0%,30%   { transform:scale(1);    opacity:0 }
  42%      { transform:scale(1.01); opacity:.6 }
  85%,100% { transform:scale(1.10); opacity:0 }
}

/* 모달 */
.fdm{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(20,16,15,.34);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .6s var(--e),visibility .6s}
.fdm.on{opacity:1;visibility:visible}
.fdm-box{position:relative;width:100%;max-width:600px;max-height:min(90vh,860px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper);border:1px solid var(--line);
  transform:translateY(20px);transition:transform .8s var(--e);
  box-shadow:0 24px 70px rgba(20,16,15,.16)}
.fdm.on .fdm-box{transform:none}
.fdm-x{position:absolute;top:18px;right:20px;z-index:3;font-size:11px;letter-spacing:.2em;
  color:var(--ash);background:none;border:0;padding:6px;cursor:pointer;transition:color .4s var(--e)}
.fdm-x:hover{color:var(--ink)}
.fdm-in{overflow-y:auto;padding:clamp(46px,6vw,62px) clamp(26px,4vw,44px) clamp(30px,4vh,44px);
  text-align:center}

.fd-bar{height:1px;background:var(--line);margin:clamp(20px,3vh,30px) 0 0;position:relative}
.fd-bar i{position:absolute;left:0;top:0;height:1px;background:var(--pigment);
  width:0;transition:width .8s var(--e)}
.fd-step{display:none}
.fd-step.on{display:block;animation:fdIn .7s var(--e) both}
@keyframes fdIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fd-no{font-family:var(--serif);font-style:italic;font-size:11px;letter-spacing:.26em;
  color:var(--ash);margin-top:clamp(26px,4vh,38px)}
.fd-q{margin-top:14px;font-weight:200;letter-spacing:-0.035em;line-height:1.45;
  font-size:clamp(20px,2.8vw,27px)}
.fd-opts{margin-top:clamp(24px,3.5vh,34px);text-align:left}
.fd-opts button{position:relative;display:block;width:100%;padding:18px 42px 18px 4px;
  border:0;border-bottom:1px solid var(--line);background:none;cursor:pointer;
  font-size:15.5px;font-weight:300;letter-spacing:-0.02em;color:var(--ink);text-align:left;
  transition:padding-left .6s var(--e),color .5s var(--e)}
.fd-opts button:first-child{border-top:1px solid var(--line)}
.fd-opts button::after{content:"";position:absolute;right:8px;top:50%;width:16px;height:1px;
  background:var(--ash);transform:translateY(-50%) scaleX(.4);transform-origin:right;
  transition:transform .6s var(--e),background .5s var(--e)}
.fd-opts button:hover{padding-left:12px;color:var(--pigment)}
.fd-opts button:hover::after{transform:translateY(-50%) scaleX(1);background:var(--pigment)}

.fd-res{display:none;text-align:center}
.fd-res.on{display:block;animation:fdIn .9s var(--e) both}
.fd-res .cap{margin-top:clamp(24px,4vh,36px);font-family:var(--serif);font-style:italic;
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ash)}
.fd-res .nm{margin-top:14px;font-weight:200;letter-spacing:-0.04em;line-height:1.25;
  font-size:clamp(28px,4.6vw,42px);color:var(--pigment)}
.fd-res .en{display:block;margin-top:10px;font-family:var(--serif);font-style:italic;
  font-size:12px;letter-spacing:.26em;color:var(--ash)}
.fd-res .why{margin:clamp(26px,4vh,38px) auto 0;max-width:29em;
  font-size:14.5px;line-height:2.05;color:var(--ash)}
.fd-res .amt{margin-top:24px;font-family:var(--serif);font-size:18px;color:var(--ink)}
.fd-act{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:clamp(30px,4vh,44px)}
.fd-go{position:relative;overflow:hidden;z-index:0;isolation:isolate;
  padding:16px 36px;border:1px solid var(--ink);background:none;cursor:pointer;
  font-size:13.5px;letter-spacing:.02em;color:var(--ink);
  transition:color .5s ease,letter-spacing .8s var(--e)}
.fd-go::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--e)}
.fd-go:hover::before{transform:scaleX(1)}
.fd-go:hover{color:var(--paper);letter-spacing:.05em}
.fd-again{padding:16px 22px;border:0;background:none;cursor:pointer;
  font-size:13.5px;color:var(--ash);transition:color .5s var(--e)}
.fd-again:hover{color:var(--ink)}
.fd-note{margin-top:clamp(28px,4vh,42px);padding-top:22px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.95;color:var(--ash)}
/* 결과 화면 안의 간이 접수 */
.fd-form{max-width:24em;margin:clamp(28px,4vh,40px) auto 0;padding-top:clamp(24px,3.5vh,34px);
  border-top:1px solid var(--line);text-align:left}
.fd-lead{font-size:13.5px;color:var(--ash);text-align:center;margin-bottom:20px}
.fd-lead b{color:var(--ink);font-weight:400}
.fd-inp{position:relative;display:flex;align-items:center;gap:4px}
.fd-inp .at{position:static;bottom:auto;left:auto;font-size:16px;color:var(--ash);flex:none;line-height:1}
.fd-inp input{flex:1;min-width:0;border:0;background:transparent;padding:10px 0;
  font:inherit;font-size:16px;color:var(--ink);letter-spacing:-0.01em}
.fd-inp input:focus{outline:none}
.fd-inp i{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.fd-inp i::after{content:"";position:absolute;inset:0;background:var(--pigment);
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--e)}
.fd-inp:focus-within i::after{transform:scaleX(1)}
.fd-agree{display:flex;gap:10px;align-items:flex-start;margin-top:20px;
  font-size:12.5px;line-height:1.7;color:var(--ash);cursor:pointer}
.fd-agree input{width:15px;height:15px;flex:none;margin-top:3px;accent-color:var(--pigment)}
.fd-agree em{display:block;margin-top:4px;font-style:normal;font-size:11.5px;opacity:.85}
.fd-msg{margin-top:14px;font-size:13.5px;line-height:1.9;min-height:1.9em}
.fd-msg.ok{color:var(--pigment)}
.fd-msg.err{color:#B4453C}
.fd-done .fd-form,.fd-done .fd-act{display:none}

/* 떠 있는 진입 버튼 */
.fdf{
  position:fixed;right:16px;bottom:132px;z-index:53;display:none;
  align-items:center;gap:8px;padding:12px 17px 12px 14px;border-radius:999px;
  white-space:nowrap;
  border:1px solid var(--pigment);background:var(--pigment);color:#fff;
  box-shadow:0 8px 24px rgba(165,56,76,.26);
  font-size:13px;letter-spacing:-0.01em;cursor:pointer;
  animation:fdfFloat 2.6s ease-in-out infinite;
}
.fdf svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}
.fdf::before{content:"";position:absolute;inset:-1px;border-radius:999px;
  border:1px solid var(--pigment);opacity:0;pointer-events:none;
  animation:fdfRing 2.6s cubic-bezier(.14,.72,.24,1) infinite}
@keyframes fdfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes fdfRing{
  0%,36%{transform:scale(1);opacity:0}
  48%{transform:scale(1.02);opacity:.7}
  90%,100%{transform:scale(1.32);opacity:0}
}
@media (max-width:900px){ .fdf{display:flex} }

/* PC 우측 레일 진입 */
.quick .q-find{color:var(--pigment);font-weight:600}
.quick .q-find i{background:var(--pigment)}

@media (prefers-reduced-motion:reduce){
  .fd-bloom,.fd-open::after,.fdf,.fdf::before{animation:none}
}