/* YUNARI motion layer */
html{scroll-behavior:smooth}
body{margin:0;background:#fbf6f2}
a{color:#4d2613;transition:color .3s ease}a:hover{color:#7d5f22}
::selection{background:#edca96;color:#4d2613}

/* page fade */
.js body{opacity:0;transition:opacity .6s ease;animation:ynShow 0s linear 2s forwards}
@keyframes ynShow{to{opacity:1}}
.js body.is-ready{opacity:1}
.js body.is-leaving{opacity:0;transition-duration:.35s;animation:none}

/* scroll progress */
.yn-progress{position:fixed;top:0;left:0;height:2px;width:100%;background:#c3a767;transform-origin:0 50%;transform:scaleX(0);z-index:100;pointer-events:none}

/* header */
header{transition:box-shadow .4s ease,background-color .4s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
header > div{transition:padding .4s ease}
header img{transition:height .4s ease}
header{position:sticky!important;top:0!important}
header.is-scrolled{box-shadow:0 8px 30px -18px rgba(77,38,19,.35);background:rgba(251,246,242,.62)!important;-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border-bottom-color:rgba(195,167,103,.35)!important}
header.is-scrolled > div{padding-top:6px!important;padding-bottom:6px!important}
header.is-scrolled img{height:38px!important}
header nav a{position:relative}
header nav a::after{content:"";position:absolute;left:0;bottom:6px;height:1px;width:100%;background:#8a6a2a;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
header nav a:hover::after{transform:scaleX(1);transform-origin:left}

/* pill buttons */
a[style*="border-radius: 999px"],button[style*="border-radius: 999px"]{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,background-color .35s ease,color .35s ease}
a[style*="border-radius: 999px"]:hover,button[style*="border-radius: 999px"]:hover{transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(77,38,19,.45)}

/* reveal */
.js .rv{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js .rv-fade{opacity:0;transition:opacity 1.2s ease;transition-delay:var(--d,0s)}
.js .rv-fade.in{opacity:1}

/* image frames */
.yn-frame{position:relative}
.yn-frame img{transform:translate3d(0,var(--py,0px),0) scale(var(--s,1.08));transition:transform 1.4s cubic-bezier(.2,.7,.2,1);will-change:transform}
.js .yn-frame{clip-path:inset(12% 0 0 0);transition:clip-path 1.4s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .yn-frame.in{clip-path:inset(0 0 0 0)}
.js .yn-frame.in img{--s:1.02}
.yn-frame:hover img{--s:1.07}
.yn-frame.yn-par img{transition:transform .15s linear;--s:1.14}
.js .yn-frame.yn-par.in img{--s:1.12}
.yn-frame.yn-par:hover img{--s:1.15}

/* hero */
.yn-hero-bg{animation:ynKen 22s ease-in-out infinite alternate}
@keyframes ynKen{from{transform:scale(1.05)}to{transform:scale(1.14) translate(-1%,-1%)}}
.js .yn-hero-in{opacity:0;transform:translateY(40px);animation:ynUp 1.3s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes ynUp{to{opacity:1;transform:none}}
.yn-line{animation:ynLine 2.4s ease-in-out infinite}
@keyframes ynLine{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* cards */
article,.yn-card{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease}
.yn-card:hover{transform:translateY(-6px);box-shadow:0 22px 40px -28px rgba(77,38,19,.45)}

/* svg diagrams */
.js svg[role="img"] circle,.js svg[role="img"] rect,.js svg[role="img"] image{transform-box:fill-box;transform-origin:center}
.js svg[role="img"]:not(.in) circle{transform:scale(.4);opacity:0}
.js svg[role="img"] circle{transition:transform 1.2s cubic-bezier(.2,.8,.2,1.1),opacity .9s ease;transition-delay:calc(var(--i,0)*0.12s)}
.js svg[role="img"] rect{transform-origin:left center}
.js svg[role="img"]:not(.in) rect.yn-bar{transform:scaleX(0)}
.js svg[role="img"] rect.yn-bar{transition:transform 1.4s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*0.1s + .2s)}
.js svg[role="img"] text{transition:opacity .9s ease;transition-delay:calc(.5s + var(--i,0)*0.03s)}
.js svg[role="img"]:not(.in) text{opacity:0}
.js svg[role="img"] line,.js svg[role="img"] path{stroke-dasharray:var(--len,300);stroke-dashoffset:0;transition:stroke-dashoffset 1s ease .6s}
.js svg[role="img"]:not(.in) line,.js svg[role="img"]:not(.in) path{stroke-dashoffset:var(--len,300)}
.js svg[role="img"] image{transition:transform 1.1s cubic-bezier(.2,.8,.2,1.15),opacity .8s ease;transition-delay:calc(var(--i,0)*0.15s + .2s)}
.js svg[role="img"]:not(.in) image{transform:scale(.6);opacity:0}

/* details */
details summary{transition:color .3s ease}
details summary:hover{color:#8a6a2a}
details[open] > *:not(summary){animation:ynUp .6s cubic-bezier(.2,.7,.2,1);}

/* marquee italic shimmer on h1 em */
h1 em,h2 em{background:linear-gradient(100deg,#4d2613 40%,#b39550 50%,#4d2613 60%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ynShine 7s ease-in-out infinite}
@keyframes ynShine{0%,60%{background-position:100% 0}100%{background-position:0 0}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv,.js .rv-fade,.js .yn-hero-in{opacity:1!important;transform:none!important}
  .js .yn-frame{clip-path:none!important}
  .js svg[role="img"] *{opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
  .js body{opacity:1}
}

/* ---------- mobile header (≤1024px): not fixed, MENU toggle like a drawer ---------- */
.yn-menu-toggle{display:none;align-items:center;gap:10px;min-height:44px;padding:0 4px 0 8px;background:none;border:0;cursor:pointer;font-family:'Quicksand','Noto Sans KR',sans-serif;font-size:12px;font-weight:600;letter-spacing:.18em;color:#4d2613}
.yn-menu-toggle .bars{position:relative;width:20px;height:12px;display:inline-block}
.yn-menu-toggle .bars::before,.yn-menu-toggle .bars::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:currentColor;transition:transform .25s ease,top .25s ease}
.yn-menu-toggle .bars::before{top:1px}
.yn-menu-toggle .bars::after{top:9px}
.yn-menu-toggle[aria-expanded="true"] .bars::before{top:5px;transform:rotate(45deg)}
.yn-menu-toggle[aria-expanded="true"] .bars::after{top:5px;transform:rotate(-45deg)}
@media (max-width:1024px){
  header{position:relative!important;top:auto!important}
  header.is-scrolled{background:rgba(251,246,242,.95)!important;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
  header > div,header.is-scrolled > div{padding:10px 20px!important;gap:8px 12px!important;flex-wrap:wrap!important;justify-content:flex-start!important}
  header img,header.is-scrolled img{height:38px!important}
  header > div > a:first-child{order:1;margin-right:auto}
  header > div > a[href*="smartstore"]{order:2;min-height:40px!important;padding:0 16px!important;font-size:11px!important;letter-spacing:.12em!important}
  .yn-menu-toggle{display:inline-flex;order:3}
  header nav{display:none!important;order:4;width:100%;flex-direction:column!important;flex-wrap:nowrap!important;gap:0!important;padding:4px 0 14px}
  header nav.is-open{display:flex!important;animation:ynUp .45s cubic-bezier(.2,.7,.2,1)}
  header nav a{display:block;padding:14px 0!important;border-top:1px solid #e6d6bd;border-bottom:0!important;font-size:13px}
  header nav a::after{display:none}
}