/* =============================================================
   기본 — 리셋 · 글꼴 · 타이포 · 공통 부품 · 등장 모션
   ============================================================= */

/* --- 한글 디스플레이 : Paperlogy (OFL) --- */
@font-face{font-family:'Paperlogy';font-weight:800;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');}
@font-face{font-family:'Paperlogy';font-weight:700;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');}
@font-face{font-family:'Paperlogy';font-weight:400;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');}
/* --- 본문 한글 : Pretendard (OFL) --- */
@font-face{font-family:'Pretendard';font-weight:45 920;font-style:normal;font-display:swap;
  src:url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2') format('woff2-variations');}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--f-body);font-size:var(--t-body);font-weight:var(--w-body);
  line-height:1.6;letter-spacing:-.01em;
  /* body 에 overflow 를 걸면 브라우저에 따라 sticky 헤더가 풀립니다.
     가로 넘침은 각 요소에서 막습니다. */
}
img,video{max-width:100%;display:block}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{list-style:none;padding:0}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;padding:12px 18px}
.skip:focus{left:8px;top:8px}


/* --- 타이포 --- */

/* --- 버튼 : 왼쪽에서 오른쪽으로 채워지는 와이프 --- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-width:180px;height:52px;padding:0 20px;
  font-weight:var(--w-bold);font-size:var(--t-label);letter-spacing:.02em;
  border:1px solid currentColor;background:none;overflow:hidden;isolation:isolate;
  transition:color var(--d-switch) var(--e-out);
}
.btn::before{
  content:'';position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);z-index:-1;
  transition:width var(--d-switch) var(--e-out);
}
.btn:hover::before,.btn:focus-visible::before{width:100%}
.btn:hover,.btn:focus-visible{color:var(--ink)}
.btn--fill{color:var(--ink);border-color:var(--ink)}

/* --- 텍스트 링크 --- */
.tlink{
  display:inline-block;font-weight:var(--w-bold);font-size:var(--t-body);
  border-bottom:1px solid currentColor;padding-bottom:2px;
  transition:border-color var(--d-hover) var(--e-out),color var(--d-hover) var(--e-out);
}
.tlink:hover{border-bottom-width:2px;border-color:var(--accent)}

/* --- 등장 모션 : 한 가지 규칙만 씁니다 --- */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity var(--d-enter) var(--e-out),transform var(--d-enter) var(--e-out)}
.js-off [data-reveal]{opacity:1;transform:none}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal] [data-r]{opacity:0;transform:translateY(20px);transition:opacity var(--d-enter) var(--e-out),transform var(--d-enter) var(--e-out)}
[data-reveal].is-in [data-r]{opacity:1;transform:none}
[data-reveal].is-in [data-r="1"]{transition-delay:.1s}
[data-reveal].is-in [data-r="2"]{transition-delay:.2s}
[data-reveal].is-in [data-r="3"]{transition-delay:.3s}
[data-reveal].is-in [data-r="4"]{transition-delay:.4s}
[data-reveal].is-in [data-r="5"]{transition-delay:.5s}

/* ?show=1 : 등장 모션을 완전히 끄고 전부 보여 줍니다. 캡처·인쇄용 */
.show-all [data-reveal],.show-all [data-reveal] [data-r]{
  opacity:1 !important;transform:none !important;transition:none !important;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  [data-reveal],[data-reveal] [data-r]{opacity:1 !important;transform:none !important}
}

/* --- 푸터 : 모든 페이지 공통 --- */
.ftr{background:var(--ink);color:#fff;padding:clamp(48px,6vw,64px) 0}
.ftr__inner{width:94%;max-width:var(--wrap);margin-inline:auto;text-align:center}
.ftr__logo{width:146px;height:20px;margin:0 auto;filter:none}
.ftr__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;margin-top:28px}
.ftr__link{padding:5px 15px;font-size:var(--t-mini);color:var(--on-dark-80);
  transition:color var(--d-hover) var(--e-out)}
.ftr__link:hover{color:#fff}
.ftr__legal{margin-top:28px;font-size:var(--t-mini);line-height:1.7;color:var(--on-dark-60)}
.ftr__legal p{margin:2px 0}