/* ==========================================================================
   common.css — Nolege 홈페이지 공통 레이아웃 / 헤더 / 푸터 / .inner 계열
   - default.css 다음에 link
   - 기본 inner 1200 (트랙1 BP = 1240)
   ========================================================================== */

/* ==========================================================================
   .inner 세트 (트랙1)
   ========================================================================== */
.inner {width:100%; max-width:1200px; margin:0 auto;}
.inner--fill {max-width:none; padding-right:calc((100% - 1200px) / 2); padding-left:calc((100% - 1200px) / 2);}
@media(max-width:1240px){.inner {padding:0 4%;}}

/* ==========================================================================
   header
   ========================================================================== */
.header {position:sticky; top:0; z-index:10; background:var(--bg01); border-bottom:1.5px solid var(--main-color);}
.header__body {display:flex; align-items:center; padding:14px 0;}
.header__logo {display:flex; align-items:center;}
.header__logo img {width:36px; height:36px;}
.header__logo strong {margin-left:10px; font-size:22px; font-weight:800; color:var(--main-color);}
.header__nav {margin-left:48px;}
.header__nav a {margin-right:28px; font-size:16px; font-weight:500; color:var(--gray05);}
.header__nav a:hover {color:var(--main-color);}
.header__nav a[aria-current="page"] {font-weight:700; color:var(--main-color);}
.header__cta {margin-left:auto; display:inline-block; padding:9px 20px; border-radius:10px; background:var(--note-yellow); color:var(--main-color); border:1.5px solid var(--main-color); font-size:15px; font-weight:700; box-shadow:var(--shadow01); transition:transform 100ms ease-out, box-shadow 100ms ease-out;}
.header__cta:hover {transform:translate(-1px, -1px); box-shadow:3px 3px 0 rgba(28, 29, 34, 0.8);}
.header__cta:active {transform:translate(0, 0); box-shadow:var(--shadow01);}

/* ==========================================================================
   footer
   ========================================================================== */
.footer {padding:40px 0 48px; background:var(--bg02); border-top:1.5px solid var(--main-color);}
.footer__body {display:flex; align-items:center;}
.footer__brand {display:flex; align-items:center;}
.footer__brand img {width:26px; height:26px;}
.footer__brand span {margin-left:8px; font-size:16px; font-weight:700; color:var(--main-color);}
.footer__copy {margin:0 0 0 20px; font-size:14px; color:var(--gray06);}
.footer__links {margin-left:auto;}
.footer__links a {margin-left:24px; font-size:14px; color:var(--gray05);}
.footer__links a:hover {color:var(--main-color);}

/* ==========================================================================
   공통 컴포넌트 — 페이지 타이틀 / 버튼
   ========================================================================== */
.page-head {padding:72px 0 16px; text-align:center;}
.page-head__title {margin:0; font-size:40px; font-weight:800; line-height:52px; color:var(--main-color);}
.page-head__desc {margin:14px 0 0; font-size:17px; line-height:26px; color:var(--gray05);}

.btn {display:inline-block; padding:14px 30px; border-radius:12px; font-size:16px; font-weight:800; border:1.5px solid var(--main-color); transition:transform 100ms ease-out, box-shadow 100ms ease-out;}
.btn--primary {background:var(--note-yellow); color:var(--main-color); box-shadow:var(--shadow02);}
.btn--primary:hover {transform:translate(-2px, -2px); box-shadow:6px 6px 0 rgba(28, 29, 34, 0.85);}
.btn--primary:active {transform:translate(0, 0); box-shadow:var(--shadow02);}
.btn--ghost {color:var(--main-color); background:var(--bg01);}
.btn--ghost:hover {transform:translate(-2px, -2px); box-shadow:var(--shadow02);}
.btn--ghost:active {transform:translate(0, 0); box-shadow:none;}

/* ==========================================================================
   스크롤 리빌 (GSAP) — JS가 있을 때만 숨겼다가 등장 (JS 실패 시 그대로 보임)
   ========================================================================== */
.js [data-reveal] {visibility:hidden;}

/* ==========================================================================
   트랙2 — 모바일 공통
   ========================================================================== */
@media(max-width:768px){
  .header__nav {margin-left:20px;}
  .header__nav a {margin-right:16px; font-size:14px;}
  .header__logo strong {font-size:18px;}
  .header__cta {padding:8px 14px; font-size:13px;}
  .footer__body {flex-direction:column; align-items:flex-start;}
  .footer__copy {margin:10px 0 0;}
  .footer__links {margin:14px 0 0;}
  .footer__links a {margin:0 20px 0 0;}
  .page-head {padding:48px 0 8px;}
  .page-head__title {font-size:30px; line-height:40px;}
}