/*
 * 결쩜사 Romantic Fairytale System
 * 두 개의 결, 하나의 골드 점, 여백의 선화로 설렘을 표현한다.
 * 입력·결제·약관 화면에는 적용하지 않는다.
 */

:root{
  --fairy-violet:#8b5cf6;
  --fairy-lilac:#c8b8ff;
  --fairy-gold:#e3bd4d;
  --fairy-champagne:#fff2b6;
  --fairy-ink:#21083f;
  --fairy-ease:cubic-bezier(.16,1,.3,1);
}

body.kyeol-fairytale-page{
  --fairy-scene-opacity:.54;
  --fairy-page-progress:0;
  --fairy-dusk:0;
  --fairy-dawn:0;
}
body[data-page="about"],
body[data-page="process"],
body[data-page="pricing"],
body[data-page="reviews"],
body[data-page="notes"],
body[data-page="note_detail"]{
  background-image:
    radial-gradient(circle at 88% 7%,rgba(255,239,188,.16),transparent 22rem),
    radial-gradient(circle at 8% 42%,rgba(200,184,255,.12),transparent 28rem);
  background-attachment:fixed;
}

/* 페이지 전체를 한 편의 짧은 동화로 잇는 두 결. */
.kyeol-story-journey{
  position:fixed;
  z-index:4;
  inset:60px 0 0;
  overflow:hidden;
  pointer-events:none;
  contain:strict;
  mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 91%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 91%,transparent 100%);
}
.kyeol-story-atmosphere,
.kyeol-story-atmosphere::before,
.kyeol-story-atmosphere::after{
  position:absolute;
  inset:0;
  content:'';
}
.kyeol-story-atmosphere::before{
  background:
    radial-gradient(ellipse at 82% 28%,rgba(98,58,148,.38),transparent 46%),
    linear-gradient(180deg,rgba(72,35,112,.1),rgba(34,9,65,.3));
  mix-blend-mode:soft-light;
  opacity:calc(var(--fairy-dusk) * .2);
}
.kyeol-story-atmosphere::after{
  background:
    radial-gradient(ellipse at 52% 88%,rgba(255,226,142,.52),transparent 48%),
    linear-gradient(180deg,transparent 48%,rgba(255,239,189,.16));
  mix-blend-mode:screen;
  opacity:calc(var(--fairy-dawn) * .28);
}
.kyeol-story-guides{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  opacity:.68;
}
.kyeol-story-thread{
  fill:none;
  stroke-width:.13;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1;
  stroke-dashoffset:calc(1 - var(--fairy-page-progress));
  transition:stroke-dashoffset .18s linear;
  filter:drop-shadow(0 0 5px rgba(173,143,247,.2));
}
.kyeol-story-thread-left{stroke:url(#story-thread-left)}
.kyeol-story-thread-right{stroke:url(#story-thread-right)}

/* 네이티브 포인터는 보존하고, 작은 샴페인 스파클만 살짝 늦게 따라온다. */
.kyeol-sparkle-cursor{
  position:fixed;
  z-index:1200;
  top:0;
  left:0;
  width:22px;
  height:22px;
  opacity:0;
  pointer-events:none;
  transform:translate3d(-80px,-80px,0);
  transition:opacity .22s ease,filter .35s ease;
  will-change:transform;
}
.kyeol-sparkle-cursor.is-visible{opacity:.78}
.kyeol-sparkle-cursor i{
  position:absolute;
  inset:4px;
  background:linear-gradient(135deg,#fffef3 8%,#f2d374 52%,#cdbdff 100%);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  filter:drop-shadow(0 0 6px rgba(229,193,80,.56));
  transform:rotate(0deg) scale(.78);
  transition:transform .42s var(--fairy-ease),filter .35s ease;
}
.kyeol-sparkle-cursor b,.kyeol-sparkle-cursor em{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#c6b4ff;
  box-shadow:0 0 5px rgba(185,165,255,.5);
}
.kyeol-sparkle-cursor b{left:1px;top:3px}
.kyeol-sparkle-cursor em{right:1px;bottom:2px;width:2px;height:2px;background:#e7c759}
.kyeol-sparkle-cursor.is-over-action{opacity:1;filter:drop-shadow(0 0 7px rgba(227,189,77,.34))}
.kyeol-sparkle-cursor.is-over-action i{transform:rotate(45deg) scale(1.15);filter:drop-shadow(0 0 8px rgba(229,193,80,.72))}
.kyeol-sparkle-cursor.is-pressed i{transform:rotate(80deg) scale(.64)}

/* 직접적인 성·하트 대신 로맨스 소설의 여백 같은 선화만 남긴다. */
.has-kyeol-ornament{position:relative;isolation:isolate;overflow:hidden}
.has-kyeol-ornament > :not(.kyeol-story-ornament):not(.kyeol-fairytale-mark){position:relative;z-index:1}
.kyeol-story-ornament{
  position:absolute;
  z-index:0;
  right:max(22px,calc((100vw - 1180px)/2));
  bottom:-30px;
  width:clamp(105px,12vw,170px);
  color:rgba(128,96,165,.2);
  opacity:.58;
  transform:rotate(3deg);
  pointer-events:none;
}
.kyeol-story-ornament svg{display:block;width:100%;height:auto;overflow:visible}
.kyeol-story-ornament path{fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.kyeol-story-ornament path.fine{stroke-width:.72;opacity:.72}
.kyeol-story-ornament circle{fill:rgba(201,168,76,.58)}
.kyeol-story-ornament.is-ribbon{right:4%;bottom:3%;width:clamp(120px,15vw,205px);transform:rotate(-4deg)}
.kyeol-story-ornament.is-letter{right:5%;bottom:-38px;color:rgba(111,79,153,.18);transform:rotate(5deg)}
body[data-page="home"] .kyeol-story-ornament{right:4%;bottom:-54px;color:rgba(231,207,133,.25);opacity:.65}
body[data-page="about"] .kyeol-story-ornament{right:-8px;bottom:-58px}
body[data-page="notes"] .kyeol-story-ornament{right:8%;bottom:-64px}

/* 중요한 클릭에서만 선으로 그린 작은 하트가 한 번 흩어진다. */
.kyeol-heart-sprinkle{
  position:fixed;
  z-index:1600;
  width:1px;
  height:1px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  animation:kyeolHeartSprinkleLife .72s linear forwards;
}
.kyeol-heart-sprinkle i{
  position:absolute;
  left:0;
  top:0;
  color:#9a73f8;
  font-family:Arial,sans-serif;
  font-size:11px;
  font-style:normal;
  line-height:1;
  text-shadow:0 0 6px rgba(154,115,248,.28);
  animation:kyeolHeartFloat .72s var(--fairy-ease) forwards;
}
.kyeol-heart-sprinkle i:nth-child(2){color:#d2ad43;font-size:8px;animation-name:kyeolHeartFloatB}
.kyeol-heart-sprinkle i:nth-child(3){color:#e9cd71;font-size:7px;animation-name:kyeolHeartFloatC}
.kyeol-heart-sprinkle i:nth-child(4){color:#bba5ff;font-size:9px;animation-name:kyeolHeartFloatD}

/* 페이지 첫 장면: 두 개의 결이 골드 점을 사이에 두고 스쳐 간다. */
.kyeol-fairytale-scene{
  position:relative;
  isolation:isolate;
}
.kyeol-fairytale-scene > :not(.kyeol-fairytale-mark):not(.kyeol-story-ornament){position:relative;z-index:1}
.kyeol-fairytale-scene::after{
  content:'';
  position:absolute;
  z-index:0;
  top:-34px;
  right:-3%;
  width:clamp(220px,31vw,420px);
  height:clamp(130px,19vw,250px);
  border-radius:50%;
  background:
    radial-gradient(ellipse at 54% 48%,rgba(255,242,182,.23),rgba(226,210,255,.11) 40%,transparent 72%);
  filter:blur(18px);
  opacity:.72;
  transform:rotate(-8deg);
  pointer-events:none;
  animation:fairySceneAura 10s ease-in-out infinite alternate;
}
.kyeol-fairytale-mark{
  position:absolute;
  z-index:0;
  top:22px;
  right:clamp(20px,5vw,70px);
  width:clamp(164px,19vw,254px);
  aspect-ratio:2.45/1;
  opacity:var(--fairy-scene-opacity);
  pointer-events:none;
  filter:drop-shadow(0 12px 28px rgba(72,33,111,.08));
}
.kyeol-fairytale-mark svg{display:block;width:100%;height:100%;overflow:visible}
.kyeol-fairytale-thread{
  fill:none;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-dasharray:250;
  stroke-dashoffset:250;
  animation:fairyThreadDraw 1.65s var(--fairy-ease) forwards;
}
.kyeol-fairytale-thread-a{stroke:url(#fairy-thread-a)}
.kyeol-fairytale-thread-b{stroke:url(#fairy-thread-b);animation-delay:.16s}
.kyeol-fairytale-point{
  fill:var(--fairy-gold);
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation:fairyPointArrive .8s var(--fairy-ease) .94s forwards,fairyPointBreathe 4.8s ease-in-out 1.8s infinite;
}
.kyeol-fairytale-star{
  position:absolute;
  width:8px;
  height:8px;
  background:linear-gradient(135deg,#fff,var(--fairy-champagne) 58%,var(--fairy-gold));
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  opacity:0;
  filter:drop-shadow(0 0 7px rgba(255,230,130,.65));
  animation:fairyStar 5.6s ease-in-out infinite;
}
.kyeol-fairytale-star-a{top:8%;right:18%}
.kyeol-fairytale-star-b{left:25%;bottom:7%;width:5px;height:5px;animation-delay:1.35s}

/* 제목에는 한 개의 작은 별빛만 둔다. */
.kyeol-fairytale-title{
  position:relative;
  width:fit-content;
  max-width:100%;
}
.kyeol-title-glint{
  position:absolute;
  top:-7px;
  right:-17px;
  width:10px;
  height:10px;
  background:linear-gradient(135deg,#fff,var(--fairy-champagne) 54%,var(--fairy-gold));
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  filter:drop-shadow(0 0 8px rgba(227,189,77,.52));
  opacity:.15;
  pointer-events:none;
  animation:fairyTitleGlint 6.4s ease-in-out infinite;
}
body[data-page="notes"] .notes-header .kyeol-fairytale-title{margin-inline:auto}

/* 가장 중요한 버튼에만 초대장처럼 한 줄의 빛이 흐른다. */
.kyeol-fairytale-action{
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
}
.kyeol-fairytale-action::before{
  content:'';
  position:absolute;
  z-index:0;
  top:-70%;
  left:-45%;
  width:28%;
  height:240%;
  background:linear-gradient(90deg,transparent,rgba(255,247,205,.42),transparent);
  transform:rotate(16deg) translateX(-240%);
  pointer-events:none;
  animation:fairyInviteShine 7.2s ease-in-out 1.2s infinite;
}

/* 매칭 방식: 사용자가 읽는 위치를 골드 점이 천천히 따라간다. */
.steps .kyeol-journey-dot{
  position:absolute;
  z-index:0;
  left:17px;
  top:calc(20px + (100% - 40px) * var(--journey-progress,0));
  width:10px;
  height:10px;
  border:2px solid rgba(255,253,238,.96);
  border-radius:50%;
  background:var(--fairy-gold);
  box-shadow:0 0 0 7px rgba(227,189,77,.09),0 0 22px rgba(227,189,77,.42);
  transform:translateY(-50%);
  transition:top .18s linear,box-shadow .35s ease;
  pointer-events:none;
}
.steps.is-journey-reading .kyeol-journey-dot{box-shadow:0 0 0 9px rgba(227,189,77,.1),0 0 28px rgba(227,189,77,.5)}

/* 실제 인연 카드는 점 대신 오래 보관한 사진첩 같은 얇은 빛의 테두리를 둔다. */
.kyeol-fairytale-story-card{
  position:relative;
  isolation:isolate;
  border-color:rgba(116,83,145,.14)!important;
  box-shadow:0 18px 54px rgba(47,24,72,.075),0 2px 8px rgba(65,39,82,.035);
}
.kyeol-fairytale-story-card::before{
  content:'';
  position:absolute;
  z-index:4;
  inset:9px;
  border:1px solid rgba(255,244,198,.16);
  border-radius:calc(var(--r) - 6px);
  box-shadow:inset 0 0 55px rgba(255,239,190,.035);
  opacity:.42;
  transition:opacity .5s ease,box-shadow .5s ease;
  pointer-events:none;
}
@media(hover:hover) and (pointer:fine){
  .kyeol-fairytale-story-card:hover::before{opacity:.74;box-shadow:inset 0 0 72px rgba(255,239,190,.07)}
  .kyeol-fairytale-action:hover::before,
  .kyeol-fairytale-action:focus-visible::before{animation-duration:2.8s}
}

/* 쩜미노트는 종이 위에 남은 얇은 금박처럼 반응한다. */
.kyeol-fairytale-note{
  transition:transform .55s var(--fairy-ease),box-shadow .55s ease,border-color .4s ease!important;
}
.kyeol-fairytale-note::after{
  content:'';
  position:absolute;
  z-index:4;
  left:14%;
  right:14%;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--fairy-gold),transparent);
  opacity:0;
  transform:scaleX(.25);
  transition:opacity .42s ease,transform .64s var(--fairy-ease);
  pointer-events:none;
}
@media(hover:hover) and (pointer:fine){
  .kyeol-fairytale-note:hover::after{opacity:.8;transform:scaleX(1)}
}

/* 프로필 등록과 마이페이지에서는 완료·선택 상태만 은은하게 빛난다. */
body[data-page="apply"] .apply-step.on .apply-step-num,
body[data-page="mypage"] .my-tab.on,
body[data-page="member_pages.mypage"] .my-tab.on{
  box-shadow:0 0 0 6px rgba(139,92,246,.06),0 8px 24px rgba(139,92,246,.14);
}
body[data-page="mypage"] .mypage-empty-mark,
body[data-page="member_pages.mypage"] .mypage-empty-mark{
  animation:fairySealBreathe 5.4s ease-in-out infinite;
}

/* HOME · 밤 정원에서 새벽으로 넘어가는 첫 장면 */
.hero-full{--hero-dawn:0;isolation:isolate}
.kyeol-night-garden{
  position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(38,17,73,calc(.02 + var(--hero-dawn) * .1)),transparent 52%),
    radial-gradient(ellipse at 72% 17%,rgba(255,230,159,calc(.12 + var(--hero-dawn) * .12)),transparent 24%);
  mix-blend-mode:screen;
}
.kyeol-moon-halo{
  position:absolute;top:7%;right:9%;width:clamp(120px,16vw,230px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,247,211,.2) 0,rgba(239,220,255,.1) 34%,transparent 69%);
  filter:blur(2px);opacity:calc(.38 - var(--hero-dawn) * .19);animation:kyeolMoonBreathe 10s ease-in-out infinite alternate;
}
.kyeol-star-field{position:absolute;inset:0;opacity:calc(.68 - var(--hero-dawn) * .46)}
.kyeol-star-field::before,.kyeol-star-field::after{
  content:'';position:absolute;width:3px;height:3px;border-radius:50%;background:#fff8cf;
  box-shadow:11vw 8vh 0 rgba(255,248,207,.72),24vw 16vh 0 rgba(206,190,255,.65),46vw 9vh 0 rgba(255,248,207,.58),61vw 21vh 0 rgba(222,207,255,.7),76vw 12vh 0 rgba(255,241,178,.72),89vw 27vh 0 rgba(205,184,255,.62),34vw 32vh 0 rgba(255,249,220,.48),68vw 39vh 0 rgba(255,249,220,.5);
  filter:drop-shadow(0 0 4px rgba(255,239,180,.7));animation:kyeolStarsBreathe 6.8s ease-in-out infinite;
}
.kyeol-star-field::after{top:7%;left:5%;transform:scale(.65);opacity:.7;animation-delay:2.1s}
.kyeol-star-field.is-far{transform:translateY(calc(var(--hero-dawn) * -18px));opacity:calc(.42 - var(--hero-dawn) * .28)}
.kyeol-garden-silhouette{
  position:absolute;right:-2%;bottom:-3%;width:45%;height:27%;opacity:calc(.2 - var(--hero-dawn) * .08);
  background:
    radial-gradient(ellipse at 18% 100%,rgba(24,7,44,.7) 0 28%,transparent 29%),
    radial-gradient(ellipse at 48% 108%,rgba(24,7,44,.72) 0 38%,transparent 39%),
    radial-gradient(ellipse at 82% 104%,rgba(24,7,44,.68) 0 31%,transparent 32%);
  filter:blur(3px);
}

/* APPLY · 작성한 입력칸은 한 장을 완성한 듯 짧게 빛난다. */
body[data-page="apply"] input.is-fairy-complete,
body[data-page="apply"] select.is-fairy-complete,
body[data-page="apply"] textarea.is-fairy-complete{
  border-color:rgba(201,168,76,.42)!important;
  box-shadow:0 0 0 3px rgba(201,168,76,.055),inset 0 0 22px rgba(255,244,201,.07)!important;
}
body[data-page="apply"] input:focus,
body[data-page="apply"] select:focus,
body[data-page="apply"] textarea:focus{
  box-shadow:0 0 0 4px rgba(139,92,246,.08),0 8px 26px rgba(68,34,102,.055)!important;
}

/* MYPAGE · 아직 도착하지 않은 장면은 닫힌 초대장으로 표현한다. */
body[data-page="mypage"] .mypage-empty-mark.is-fairy-invitation,
body[data-page="member_pages.mypage"] .mypage-empty-mark.is-fairy-invitation{
  position:relative;width:58px;height:46px;border-radius:13px;background:linear-gradient(145deg,#fffdf7,#f5edff);overflow:visible;
  box-shadow:0 10px 28px rgba(45,16,84,.09),inset 0 0 0 1px rgba(255,255,255,.82);
}
.mypage-empty-mark.is-fairy-invitation i{position:absolute;inset:9px 8px;border:1px solid rgba(139,92,246,.24);border-radius:5px}
.mypage-empty-mark.is-fairy-invitation i::before,.mypage-empty-mark.is-fairy-invitation i::after{content:'';position:absolute;top:1px;width:24px;height:1px;background:rgba(139,92,246,.25);transform-origin:top}
.mypage-empty-mark.is-fairy-invitation i::before{left:0;transform:rotate(31deg)}
.mypage-empty-mark.is-fairy-invitation i::after{right:0;transform:rotate(-31deg)}
.mypage-empty-mark.is-fairy-invitation b{position:absolute;left:50%;top:22px;width:9px;height:9px;border-radius:50%;background:var(--fairy-gold);box-shadow:0 0 0 4px rgba(227,189,77,.1);transform:translate(-50%,-50%)}

/* REVIEWS · 커플 사진을 로맨스 동화책의 삽화처럼 연다. */
body[data-page="reviews"] .couple-list .cc{overflow:visible;background:linear-gradient(145deg,#fff,#fdf9ff)}
body[data-page="reviews"] .couple-list .cc img{
  width:calc(100% - 22px);height:calc(100% - 22px);min-height:218px;margin:11px;
  border-radius:48% 48% 18px 18px / 16% 16% 18px 18px;
  outline:1px solid rgba(201,168,76,.2);outline-offset:5px;box-shadow:0 16px 34px rgba(43,23,62,.12);
}
body[data-page="reviews"] .couple-list .cc:nth-child(even) img{border-radius:18px 18px 48% 48% / 18px 18px 16% 16%}

@media(max-width:768px){
  body[data-page="reviews"] .couple-list .cc img,
  body[data-page="reviews"] .couple-list .cc:nth-child(even) img{
    border-radius:14px;
  }
  body[data-page="reviews"] .couple-list .cc:not(.story-open) img{
    height:144px;
    min-height:0;
  }
  body[data-page="reviews"] .couple-list .cc.story-open img{
    height:220px;
    min-height:0;
  }
}

/* 어두운 첫 장면에서는 선과 별빛의 대비만 조금 높인다. */
body[data-page="about"] .kyeol-fairytale-mark{top:38px;right:26px;opacity:.62;mix-blend-mode:screen}
body[data-page="about"] .kyeol-fairytale-thread{stroke-width:1.7}
body[data-page="pricing"] .kyeol-fairytale-mark{top:18px;right:22px;opacity:.42}
body[data-page="reviews"] .kyeol-fairytale-mark,
body[data-page="process"] .kyeol-fairytale-mark{top:-14px;right:0;opacity:.42}
body[data-page="notes"] .kyeol-fairytale-mark{top:-18px;right:50%;transform:translateX(50%);opacity:.35}
body[data-page="note_detail"] .kyeol-fairytale-mark{top:-4px;right:0;opacity:.34}
body[data-page="mypage"] .kyeol-fairytale-mark,
body[data-page="member_pages.mypage"] .kyeol-fairytale-mark{top:-10px;right:0;width:180px;opacity:.28}

@keyframes fairyThreadDraw{to{stroke-dashoffset:0}}
@keyframes fairyPointArrive{0%{opacity:0;transform:scale(.2)}70%{opacity:1;transform:scale(1.22)}100%{opacity:1;transform:scale(1)}}
@keyframes fairyPointBreathe{0%,100%{filter:drop-shadow(0 0 0 rgba(227,189,77,0))}50%{filter:drop-shadow(0 0 8px rgba(227,189,77,.65))}}
@keyframes fairyStar{0%,18%,34%,100%{opacity:0;transform:scale(.25) rotate(0)}24%{opacity:.88;transform:scale(1) rotate(45deg)}}
@keyframes fairyTitleGlint{0%,12%,27%,100%{opacity:.12;transform:scale(.45) rotate(0)}18%{opacity:.96;transform:scale(1) rotate(45deg)}}
@keyframes fairyInviteShine{0%,66%{transform:rotate(16deg) translateX(-240%)}84%,100%{transform:rotate(16deg) translateX(690%)}}
@keyframes fairySealBreathe{0%,100%{filter:drop-shadow(0 0 0 rgba(139,92,246,0))}50%{filter:drop-shadow(0 0 14px rgba(139,92,246,.22))}}
@keyframes fairySceneAura{from{opacity:.48;transform:translate3d(-8px,4px,0) rotate(-9deg)}to{opacity:.82;transform:translate3d(9px,-5px,0) rotate(-5deg)}}
@keyframes kyeolMoonBreathe{from{transform:scale(.94);opacity:.28}to{transform:scale(1.06);opacity:.46}}
@keyframes kyeolStarsBreathe{0%,100%{opacity:.34}50%{opacity:.92}}
@keyframes kyeolHeartSprinkleLife{0%,72%{opacity:1}100%{opacity:0}}
@keyframes kyeolHeartFloat{0%{opacity:0;transform:translate(-3px,0) scale(.45) rotate(-12deg)}30%{opacity:.9}100%{opacity:0;transform:translate(-23px,-30px) scale(1.1) rotate(-28deg)}}
@keyframes kyeolHeartFloatB{0%{opacity:0;transform:translate(0,0) scale(.5)}30%{opacity:.86}100%{opacity:0;transform:translate(19px,-27px) scale(1) rotate(24deg)}}
@keyframes kyeolHeartFloatC{0%{opacity:0;transform:translate(0,0) scale(.4) rotate(0)}24%{opacity:.92}100%{opacity:0;transform:translate(5px,-39px) scale(1.2) rotate(46deg)}}
@keyframes kyeolHeartFloatD{0%{opacity:0;transform:translate(0,0) scale(.45)}28%{opacity:.78}100%{opacity:0;transform:translate(-13px,-19px) scale(.9) rotate(-16deg)}}
@media(max-width:767px){
  body[data-page="about"],
  body[data-page="process"],
  body[data-page="pricing"],
  body[data-page="reviews"],
  body[data-page="notes"],
  body[data-page="note_detail"]{background-attachment:scroll}
  body.kyeol-fairytale-page{--fairy-scene-opacity:.34}
  .kyeol-fairytale-scene::after{right:28px;width:min(68vw,270px);filter:blur(12px)}
  .kyeol-fairytale-mark{top:10px;right:8px;width:138px}
  body[data-page="about"] .kyeol-fairytale-mark{top:218px;right:-12px;width:150px;opacity:.52}
  body[data-page="process"] .kyeol-fairytale-mark,
  body[data-page="reviews"] .kyeol-fairytale-mark{top:-10px;right:0;width:126px;opacity:.3}
  body[data-page="notes"] .kyeol-fairytale-mark{top:-12px;width:130px}
  body[data-page="mypage"] .kyeol-fairytale-mark,
  body[data-page="member_pages.mypage"] .kyeol-fairytale-mark{display:none}
  .kyeol-title-glint{top:-5px;right:0;width:8px;height:8px}
  .steps .kyeol-journey-dot{left:15px;width:8px;height:8px}
  .kyeol-fairytale-story-card::before{inset:6px;border-radius:16px;opacity:.34}
  .kyeol-story-journey{inset:59px 0 0}
  .kyeol-story-guides{opacity:.42}
  .kyeol-story-thread{stroke-width:.1;filter:none}
  .kyeol-story-atmosphere::before,
  .kyeol-story-atmosphere::after{mix-blend-mode:normal}
  .kyeol-story-ornament{right:-38px!important;bottom:-44px!important;width:118px!important;opacity:.34}
  body[data-page="about"] .kyeol-story-ornament{bottom:-52px!important}
}

@media(prefers-reduced-motion:reduce){
  .kyeol-fairytale-thread{stroke-dashoffset:0;animation:none}
  .kyeol-fairytale-point{opacity:1;animation:none}
  .kyeol-fairytale-star,.kyeol-title-glint{opacity:.42;animation:none;transform:scale(.7) rotate(45deg)}
  .kyeol-fairytale-action::before{display:none}
  .kyeol-fairytale-scene::after{animation:none}
  .kyeol-story-atmosphere::before{opacity:calc(var(--fairy-dusk) * .08)}
  .kyeol-story-atmosphere::after{opacity:calc(var(--fairy-dawn) * .1)}
  .kyeol-story-thread{stroke-dashoffset:0;transition:none}
  .kyeol-sparkle-cursor,.kyeol-heart-sprinkle{display:none}
  .steps .kyeol-journey-dot{transition:none}
  body[data-page="mypage"] .mypage-empty-mark,
  body[data-page="member_pages.mypage"] .mypage-empty-mark{animation:none}
  .kyeol-moon-halo,.kyeol-star-field::before,.kyeol-star-field::after{animation:none}
}