@font-face{font-family:'Pretendard';src:url(fonts/pr-400.woff2) format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'Pretendard';src:url(fonts/pr-700.woff2) format('woff2');font-weight:700;font-display:block}
@font-face{font-family:'Pretendard';src:url(fonts/pr-800.woff2) format('woff2');font-weight:800;font-display:block}
@font-face{font-family:'BHS';src:url(fonts/bhs.woff2) format('woff2');font-weight:400;font-display:block}

:root{
  --navy:#14315E;--navy2:#0A2047;--pink:#EC3577;--pink2:#F7C9D8;--cream:#FCF1DA;--cream2:#F6E4C0;
  --blue:#2C74C9;--sky:#CFE3F5;--ylw:#FED615;--ink:#1A1D26;--mute:#5A5F6E;--line:rgba(20,49,94,.14);
  --sh:0 18px 40px -18px rgba(13,35,67,.45),0 4px 10px -4px rgba(13,35,67,.18);
  --sh-s:0 10px 24px -14px rgba(13,35,67,.5);
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1180px;--g:clamp(16px,4vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:'Pretendard',system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.6;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
h1,h2,h3,p{margin:0}
ul{list-style:none;margin:0;padding:0}
::selection{background:var(--pink);color:#fff}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
html{scrollbar-color:var(--navy) var(--cream2)}
.disp{font-family:'BHS','Pretendard',sans-serif;font-weight:400;letter-spacing:-.01em;line-height:1.18;text-wrap:balance}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--g)}
.pk{color:var(--pink)}
.yl{color:var(--ylw)}

/* 버튼: 로고와 같은 노랑 */
.btn{display:inline-flex;align-items:center;gap:.5em;min-height:50px;padding:0 26px;border-radius:999px;background:var(--ylw);color:var(--navy2);font-weight:800;font-size:16px;box-shadow:0 10px 22px -12px rgba(150,105,0,.7);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.btn svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 28px -14px rgba(150,105,0,.8)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.sm{min-height:40px;padding:0 18px;font-size:14px}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor;color:inherit}

/* 머리글 */
.hd{position:sticky;top:0;z-index:50;transition:background .3s,box-shadow .3s}
.hd .in{display:flex;align-items:center;gap:24px;height:78px}
.hd .logo img{height:48px;width:auto}
.hd nav{margin-left:auto;display:flex;gap:30px;font-weight:700;font-size:16px}
.hd nav a{position:relative;padding:6px 0}
.hd nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.hd nav a:hover::after{transform:none}
.hd .menu{display:none;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center}
.hd .menu svg{width:24px;height:24px}
.sheet{position:fixed;inset:0;z-index:60;background:rgba(13,35,67,.5);opacity:0;pointer-events:none;transition:opacity .3s}
.sheet .pn{position:absolute;right:0;top:0;bottom:0;width:min(320px,86vw);background:var(--cream);padding:24px;display:flex;flex-direction:column;gap:6px;transform:translateX(100%);transition:transform .45s var(--ease)}
.sheet .pn a{font-weight:800;font-size:20px;padding:14px 4px;border-bottom:1px solid var(--line)}
.sheet .pn .btn{margin-top:16px;justify-content:center}
.sheet .x{align-self:flex-end;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.sheet.on{opacity:1;pointer-events:auto}
.sheet.on .pn{transform:none}
body.lock{overflow:hidden}

/* 등장 움직임: 기본은 보이는 상태, JS가 있을 때만 숨겼다가 나타남 */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.seen{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}.js .rv.d4{transition-delay:.32s}

/* 바닥글 */
.ft{padding:44px 0 calc(44px + env(safe-area-inset-bottom));font-size:14px}
.ft .in{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.ft .logo img{height:52px;width:auto}
.ft p{margin-left:auto;opacity:.85}
.ft b{font-weight:700}

/* 시안 이동 바 (미리보기 전용) */
.dock{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:70;display:flex;gap:4px;padding:5px;border-radius:999px;background:rgba(13,35,67,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:var(--sh);font-size:13px;font-weight:700;color:#fff;white-space:nowrap}
.dock a{padding:8px 14px;border-radius:999px;transition:background .25s}
.dock a:hover{background:rgba(255,255,255,.14)}
.dock a.on{background:var(--ylw);color:var(--navy2)}

.toast{position:fixed;left:50%;top:92px;transform:translate(-50%,-12px);z-index:80;background:var(--navy2);color:#fff;padding:12px 20px;border-radius:14px;font-weight:700;font-size:15px;box-shadow:var(--sh);opacity:0;pointer-events:none;transition:opacity .3s,transform .4s var(--ease);max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:900px){
  .hd nav,.hd .hbtn{display:none}
  .hd .menu{display:flex;margin-left:auto}
  .hd .in{height:66px}
  .hd .logo img{height:40px}
  .ft p{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
}