/* ── 공통 베이스 ── */
:root{
  --blue:#1A6BF0; --blue-deep:#1259C3; --green:#2BA84A; --orange:#E07B00; --purple:#8E44C9;
  --ink:#1A1C1E; --sub:#5B6068; --line:#E7EAEF; --bg:#F5F7FB; --card:#FFFFFF;
  --shadow:0 4px 20px rgba(20,40,80,.08); --shadow-ph:0 10px 34px rgba(20,40,80,.16);
}
*{box-sizing:border-box; -webkit-print-color-adjust:exact; print-color-adjust:exact; margin:0; padding:0;}
html{background:var(--bg);}
body{font-family:'Pretendard','-apple-system','Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  color:var(--ink); line-height:1.62; -webkit-font-smoothing:antialiased; word-break:keep-all;}
a{text-decoration:none; color:inherit;}
.wrap{max-width:960px; margin:0 auto; padding:0 22px;}

/* ── 내비게이션 ── */
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; max-width:960px; margin:0 auto;}
.nav .brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px; color:var(--ink);}
.nav .brand img{width:30px; height:30px;}   /* 스퀘어클 모양은 PNG에 baked — border-radius 불필요 */
.nav .links{display:flex; gap:20px; font-size:14.5px; font-weight:600; color:var(--sub);}
.nav .links a{color:var(--sub);}
.nav .links a:hover{color:var(--blue);}

/* ── 페이지 히어로 ── */
.page-hero{background:linear-gradient(160deg,#1259C3 0%,#1A6BF0 56%,#2E8BFF 100%); color:#fff;
  border-radius:0 0 32px 32px; padding:54px 22px 64px; text-align:center;}
.page-hero .mark{margin:0 auto 22px; line-height:0;}
.page-hero .mark img{width:104px; height:104px; filter:drop-shadow(0 12px 26px rgba(0,0,0,.24));}   /* drop-shadow=스퀘어클 알파 따라감(box-shadow는 사각 그림자) */
.page-hero .kicker{font-size:12.5px; letter-spacing:.22em; opacity:.85; font-weight:700; margin-bottom:12px;}
.page-hero h1{font-size:36px; font-weight:800; letter-spacing:-.01em; line-height:1.18; margin-bottom:14px; color:#fff; text-wrap:balance;}
.page-hero .sub{font-size:17px; opacity:.94; line-height:1.55; max-width:680px; margin:0 auto;}
.page-hero .ver{margin-top:34px; font-size:13px; opacity:.92; border-top:1px solid rgba(255,255,255,.28); padding-top:14px;}
.page-hero .ver b{font-weight:700;}

/* ── 푸터 ── */
.foot{background:linear-gradient(160deg,#1259C3 0%,#1A6BF0 56%,#2E8BFF 100%); color:rgba(255,255,255,.8); font-size:12.5px; line-height:1.75; padding:34px 0 40px;}
.foot .inner{max-width:960px; margin:0 auto; padding:0 22px;}
.foot a{color:rgba(255,255,255,.8); font-weight:600;}
.foot a:hover{color:#fff;}
.foot .row{display:flex; gap:24px; flex-wrap:wrap; margin-bottom:14px;}
.foot .row a{display:flex; align-items:center; gap:5px; transition:transform .1s ease-out, color .15s;}
.foot .row a:active{transform:scale(.95);}
.foot hr{border:none; border-top:1px solid rgba(255,255,255,.25); margin:14px 0;}
.foot b{color:#fff;}

/* ── 모바일 ── */
@media (max-width:560px){
  .nav{padding:14px 16px;}
  .nav .brand{font-size:15px; gap:8px;}
  .nav .brand img{width:24px; height:24px;}
  .nav .links{gap:13px; font-size:13px;}
}

/* ── 데스크톱 ── */
@media (min-width:760px){
  .page-hero{padding:70px 22px 80px;}
  .page-hero .mark img{width:128px; height:128px;}
  .page-hero h1{font-size:46px;}
  .page-hero .sub{font-size:19px;}
}