/*
 * 결쩜사 홈 시그니처 모션
 * 의미가 있는 세 장면(쩜미의 목소리, 결의 정렬, 이어진 이야기)에만 움직임을 둔다.
 */

@font-face{
  font-family:'Maru Buri';
  src:url('/static/fonts/MaruBuri-Light.woff2') format('woff2');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}

/* HERO — 결(結) 위로 천천히 흐르는 샴페인 골드 빛 */
.hero-bg::after{
  content:'';
  position:absolute;
  inset:-24%;
  background:
    radial-gradient(ellipse at 78% 32%,rgba(255,225,151,.22),transparent 22%),
    linear-gradient(112deg,transparent 35%,rgba(255,245,210,.13) 48%,transparent 61%);
  mix-blend-mode:screen;
  opacity:.36;
  transform:translate3d(-8%,2%,0) rotate(-3deg);
  animation:heroRomanceLight 12s cubic-bezier(.45,0,.2,1) infinite alternate;
  pointer-events:none;
}
.hero-h1 .hero-kyeol-sparkle{
  position:relative;
  display:inline-block;
  color:#b99cff;
  background:linear-gradient(108deg,#a783ff 0%,#c6b4ff 27%,#f1cf64 43%,#fff4bf 50%,#d7b54e 57%,#9a6df8 78%,#c6b4ff 100%);
  background-size:260% 100%;
  background-position:100% 50%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 12px rgba(213,180,76,.12));
  animation:heroKyeolShimmer 5.4s cubic-bezier(.45,0,.2,1) infinite;
}
.hero-h1 .hero-kyeol-sparkle::before,
.hero-h1 .hero-kyeol-sparkle::after{
  content:'';
  position:absolute;
  z-index:1;
  width:12px;
  height:12px;
  background:linear-gradient(135deg,#fffbe4,#e7c454 64%,#fff);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  filter:drop-shadow(0 0 7px rgba(255,232,148,.7));
  opacity:0;
  pointer-events:none;
  animation:heroKyeolGlint 5.4s cubic-bezier(.16,1,.3,1) infinite;
}
.hero-h1 .hero-kyeol-sparkle::before{top:-3px;right:-11px}
.hero-h1 .hero-kyeol-sparkle::after{bottom:4px;left:-10px;width:8px;height:8px;animation-delay:.42s}
@keyframes heroKyeolShimmer{
  0%,20%{background-position:100% 50%;filter:drop-shadow(0 0 10px rgba(213,180,76,.08))}
  48%,100%{background-position:0 50%;filter:drop-shadow(0 0 15px rgba(213,180,76,.18))}
}
@keyframes heroKyeolGlint{
  0%,19%,55%,100%{opacity:0;transform:scale(.35) rotate(0)}
  27%{opacity:.95;transform:scale(1) rotate(45deg)}
  36%{opacity:.25;transform:scale(.58) rotate(82deg)}
}
@keyframes heroRomanceLight{
  from{opacity:.23;transform:translate3d(-9%,3%,0) rotate(-4deg)}
  to{opacity:.46;transform:translate3d(8%,-2%,0) rotate(2deg)}
}

/* EXPERIENCE — 경험 지표를 감싸는 차분한 배경 */
.zzummi-note{
  background:
    radial-gradient(ellipse at 76% 14%,rgba(161,118,237,.13),transparent 38%),
    radial-gradient(ellipse at 16% 84%,rgba(227,189,77,.07),transparent 34%),
    var(--bg-dark)!important;
}

/* 2. MATCHING — 네 가지 결 사이에서 두 흐름이 가까워지는 장면 */
.kyeol-match-canvas{
  position:relative;
  max-width:960px;
  min-height:350px;
  margin:44px auto 0;
}
.kyeol-match-canvas .kyeol-card-grid{
  position:relative;
  z-index:2;
  max-width:none;
  margin:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 190px minmax(0,1fr);
  grid-template-rows:repeat(2,minmax(148px,1fr));
  gap:18px 0;
}
.kyeol-match-canvas .kyeol-card:nth-child(1){grid-column:1;grid-row:1}
.kyeol-match-canvas .kyeol-card:nth-child(2){grid-column:1;grid-row:2}
.kyeol-match-canvas .kyeol-card:nth-child(3){grid-column:3;grid-row:1}
.kyeol-match-canvas .kyeol-card:nth-child(4){grid-column:3;grid-row:2}
.kyeol-match-canvas .kyeol-card{
  min-height:148px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:14px;
  align-content:center;
  padding:24px 26px;
  border-color:rgba(139,92,246,.13);
  border-radius:16px;
  background:rgba(255,255,255,.9);
  box-shadow:0 14px 38px rgba(55,27,79,.055);
  backdrop-filter:blur(10px);
  transition:opacity .64s ease,transform .78s cubic-bezier(.2,.72,.2,1),border-color .5s ease,box-shadow .5s ease;
}
.kyeol-match-canvas .kyeol-card::before{left:26px;right:26px;height:2px;opacity:.7}
.kyeol-match-canvas .kyeol-card-icon{grid-column:1;grid-row:1/3;margin:0;align-self:center}
.kyeol-match-canvas .kyeol-card-title{grid-column:2;grid-row:1;margin:0 0 6px;font-size:17px}
.kyeol-match-canvas .kyeol-card-desc{grid-column:2;grid-row:2}
.kyeol-connection-visual{
  position:absolute;
  z-index:1;
  top:3px;
  left:50%;
  width:190px;
  height:332px;
  transform:translateX(-50%);
  pointer-events:none;
}
.kyeol-connection-visual svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.kyeol-connection-guide,
.kyeol-connection-thread{
  fill:none;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.kyeol-connection-guide{stroke:rgba(139,92,246,.1);stroke-width:1.2;stroke-dasharray:3 8}
.kyeol-connection-thread{stroke-width:2.2;stroke-dasharray:1;stroke-dashoffset:1}
.kyeol-connection-thread-a{stroke:var(--ac)}
.kyeol-connection-thread-b{stroke:var(--ac3)}
.kyeol-connection-point{
  position:absolute;
  left:50%;
  top:50%;
  width:66px;
  height:66px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(201,168,76,.3);
  border-radius:50%;
  background:rgba(30,9,56,.96);
  box-shadow:0 18px 46px rgba(30,9,56,.18),0 0 0 10px rgba(201,168,76,.05);
  opacity:0;
  transform:translate(-50%,-50%) scale(.72);
  transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1),box-shadow .7s ease;
}
.kyeol-connection-point img{display:block;width:45px;height:45px;object-fit:contain}
.signature-motion .definition-sec:not(.is-reading) .kyeol-card:nth-child(-n+2){opacity:.56;transform:translateX(-28px)}
.signature-motion .definition-sec:not(.is-reading) .kyeol-card:nth-child(n+3){opacity:.56;transform:translateX(28px)}
.definition-sec.is-reading .kyeol-card{
  opacity:1;
  transform:none;
  border-color:rgba(139,92,246,.2);
  box-shadow:0 17px 46px rgba(55,27,79,.08);
}
.definition-sec.is-linked .kyeol-connection-thread{stroke-dashoffset:0;transition:stroke-dashoffset 1.25s cubic-bezier(.58,0,.22,1)}
.definition-sec.is-linked .kyeol-connection-thread-b{transition-delay:.12s}
.definition-sec.is-linked .kyeol-connection-point{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
  box-shadow:0 18px 46px rgba(30,9,56,.2),0 0 0 12px rgba(201,168,76,.07);
}

/* 3. STORIES — 네 장을 기다림 없이 한 번에 보여준다. */
.home-couple-section .sec-title{font-weight:800;letter-spacing:-.8px}
.home-couple-card{position:relative;isolation:isolate}
.home-couple-card::before{
  content:'';
  position:absolute;
  z-index:4;
  inset:10px;
  border-radius:calc(var(--r) - 6px);
  background:
    linear-gradient(var(--gold2),var(--gold2)) left top/18px 1px no-repeat,
    linear-gradient(var(--gold2),var(--gold2)) left top/1px 18px no-repeat,
    linear-gradient(var(--gold2),var(--gold2)) right bottom/18px 1px no-repeat,
    linear-gradient(var(--gold2),var(--gold2)) right bottom/1px 18px no-repeat;
  opacity:0;
  transform:scale(.985);
  transition:opacity .35s ease,transform .48s cubic-bezier(.2,.72,.2,1);
  pointer-events:none;
}
.home-couple-card:hover::before,.home-couple-card:focus-within::before{opacity:.9;transform:scale(1)}
.home-couple-card:hover img{filter:saturate(.92) contrast(1.03)}

/* 마지막 CTA는 PC에서도 모바일과 같은 문장 위계를 사용한다. */
.cta-title{font-size:initial;line-height:1.3;letter-spacing:0}
.cta-title .cta-desktop-eyebrow{
  display:block;
  margin-bottom:13px;
  color:rgba(255,255,255,.8);
  font-size:15px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:-.2px;
}
.cta-title em,.cta-title strong{
  display:block;
  font-size:clamp(27px,2.45vw,34px);
  font-weight:800;
  line-height:1.32;
  letter-spacing:-1.2px;
}
.cta-title strong{margin-top:2px;color:#fff}

@media(max-width:1023px){
  .kyeol-match-canvas .kyeol-card-grid{grid-template-columns:minmax(0,1fr) 136px minmax(0,1fr)}
  .kyeol-connection-visual{width:136px}
  .kyeol-match-canvas .kyeol-card{padding:22px 20px;grid-template-columns:40px minmax(0,1fr);column-gap:10px}
  .kyeol-match-canvas .kyeol-card-title{font-size:15px}
}

@media(max-width:768px){
  .hero-scroll-hint{display:none}
  .hero-h1 .hero-kyeol-sparkle::before{top:-2px;right:-8px;width:9px;height:9px}
  .hero-h1 .hero-kyeol-sparkle::after{bottom:2px;left:-7px;width:6px;height:6px}

  .kyeol-match-canvas{min-height:0;margin:22px 0 0}
  .kyeol-connection-visual{
    position:relative;
    top:auto;
    left:auto;
    width:100%;
    height:88px;
    margin:0 0 14px;
    transform:none;
    overflow:hidden;
  }
  .kyeol-connection-visual svg{left:50%;top:50%;width:132px;height:250px;transform:translate(-50%,-50%) rotate(90deg)}
  .kyeol-connection-point{width:52px;height:52px}
  .kyeol-connection-point img{width:36px;height:36px}
  .kyeol-match-canvas .kyeol-card-grid{
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:auto auto;
    gap:0;
    margin:0;
  }
  .kyeol-match-canvas .kyeol-card:nth-child(1){grid-column:1;grid-row:1}
  .kyeol-match-canvas .kyeol-card:nth-child(2){grid-column:2;grid-row:1}
  .kyeol-match-canvas .kyeol-card:nth-child(3){grid-column:1;grid-row:2}
  .kyeol-match-canvas .kyeol-card:nth-child(4){grid-column:2;grid-row:2}
  .kyeol-match-canvas .kyeol-card{
    min-height:112px;
    padding:16px 14px;
    grid-template-columns:34px minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:9px;
    row-gap:8px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none!important;
    backdrop-filter:none;
  }
  .kyeol-match-canvas .kyeol-card:nth-child(odd){border-right:1px solid var(--bd)}
  .kyeol-match-canvas .kyeol-card:nth-child(-n+2){border-bottom:1px solid var(--bd)}
  .kyeol-match-canvas .kyeol-card::before{display:none}
  .kyeol-match-canvas .kyeol-card-icon{grid-column:1;grid-row:1;width:30px;height:30px}
  .kyeol-match-canvas .kyeol-card-title{grid-column:2;grid-row:1;margin:0;align-self:center;font-size:14px}
  .kyeol-match-canvas .kyeol-card-desc{grid-column:1/-1;grid-row:2}
  .signature-motion .definition-sec:not(.is-reading) .kyeol-card:nth-child(n){opacity:.62;transform:translateY(12px)}
  .definition-sec.is-reading .kyeol-card{transform:none}

  .home-couple-card::before{inset:6px;border-radius:8px}
}

@media(prefers-reduced-motion:reduce){
  .hero-bg::after{animation:none;opacity:.26;transform:none}
  .hero-h1 .hero-kyeol-sparkle{animation:none;background-position:42% 50%}
  .hero-h1 .hero-kyeol-sparkle::before,
  .hero-h1 .hero-kyeol-sparkle::after{animation:none;opacity:.58;transform:scale(.72) rotate(45deg)}
  .signature-motion .definition-sec .kyeol-card,
  .kyeol-connection-point{opacity:1;transform:none;transition:none!important}
  .kyeol-connection-point{transform:translate(-50%,-50%)}
  .kyeol-connection-thread{stroke-dashoffset:0;transition:none!important}
}