/* AdPotter landing – shared styles (layout toggle, nav, scroll-reveal, hover, helpers) */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:#0E1A2B;font-family:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;word-break:keep-all;-webkit-font-smoothing:antialiased;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%}
a{color:#1D5BD8}a:hover{color:#1647AD}
.pc,.mo{background:#fff;color:#0E1A2B}
@media (min-width:900px){.mo{display:none!important}}
@media (max-width:899.98px){.pc{display:none!important}}
/* anchored sections clear the sticky bars */

/* ===== scroll reveal (AOS-compatible attribute names) ===== */
.js [data-aos]{opacity:0;transition-property:opacity,transform;transition-duration:var(--aos-d,.75s);transition-timing-function:cubic-bezier(.2,.7,.2,1);transition-delay:var(--aos-delay,0ms);will-change:opacity,transform}
.js [data-aos="fade-up"]{transform:translate3d(0,34px,0)}
.js [data-aos="fade-down"]{transform:translate3d(0,-28px,0)}
.js [data-aos="fade-left"]{transform:translate3d(40px,0,0)}
.js [data-aos="fade-right"]{transform:translate3d(-40px,0,0)}
.js [data-aos="zoom-in"]{transform:scale(.94)}
.js [data-aos="fade-in"]{}
.js [data-aos].aos-animate{opacity:1}
.js [data-aos]:not([data-aos="fade-in"]).aos-animate{transform:none}
.js [data-aos].aos-done{will-change:auto;transition-delay:0s!important;transition-duration:.28s;transition-property:transform,box-shadow,background-color,border-color,filter}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-aos]{opacity:1!important;transform:none!important;transition:none!important}
  .hv,.btn,.tix,.zoomwrap img{transition:none!important}
}

/* ===== hover / press micro-interactions ===== */
.btn{transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(14,26,43,.18);filter:brightness(1.06)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn svg:last-child{transition:transform .2s ease}
.btn:hover svg:last-child{transform:translateX(3px)}
.hv{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.hv:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(14,26,43,.10)}
.v-b .hv:hover{box-shadow:0 18px 36px rgba(0,0,0,.26)}
.zoomwrap img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.zoomwrap:hover img{transform:scale(1.05)}
.tix{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tix:hover{transform:rotate(-2deg) translateY(-6px) scale(1.03)!important}
a:focus-visible,button:focus-visible{outline:3px solid #FFB020;outline-offset:2px}

/* ===== scroll progress + back to top + toast ===== */
.pgbar{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none;background:var(--pg,#1D5BD8)}
.totop{position:fixed;right:16px;bottom:16px;z-index:50;width:46px;height:46px;border-radius:999px;border:0;background:#0E1A2B;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.25);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .25s,transform .25s}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.v-b .totop{background:#FFD43B;color:#0C1830}
.toast{position:fixed;left:50%;bottom:76px;z-index:80;max-width:min(92vw,420px);padding:13px 18px;border-radius:12px;background:#0E1A2B;color:#fff;font-size:14px;line-height:1.55;text-align:center;box-shadow:0 12px 30px rgba(0,0,0,.3);opacity:0;transform:translate(-50%,10px);pointer-events:none;transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ===== top nav ===== */
.b-nav{position:sticky;top:0;z-index:40;background:#0C1830;border-bottom:1px solid #22355E}
.b-nav-in{max-width:880px;margin:0 auto;display:flex}
.b-nav a{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;height:56px;color:#A9B4CA;font-size:16px;font-weight:500;text-decoration:none;transition:background .25s,color .25s}
.b-nav a:hover{color:#fff;background:#15274A}
.b-nav a.on{background:#D0261F;color:#fff;font-weight:700}
.b-nav-m .b-nav-in{max-width:none}
.b-nav-m a{height:48px;font-size:13px}

/* tablet: keep the mobile layout readable on 600–899px */
@media (min-width:600px) and (max-width:899.98px){
  .mo .pad-x,.mo section,.mo footer{padding-left:max(20px,calc((100% - 640px)/2))!important;padding-right:max(20px,calc((100% - 640px)/2))!important}
  .mo .b-nav-m .b-nav-in{max-width:640px}
}

/* very small phones: let flex children shrink instead of overflowing */
@media (max-width:359px){.mo *{min-width:0}.mo a,.mo p,.mo h2,.mo h3{overflow-wrap:anywhere}}