/* ─────────────────────────────────────────────────────────────
 * 공개 사이트 공통 디자인 시스템 — /promotion(모집) · /blog(저널)
 *   2026-09-25 통합 개편. 두 화면이 같은 상단 메뉴·글꼴·색·버튼을 쓴다.
 *   · 색: SM 공식 팔레트(SM Entertainment Group & Artist Color) — SM BLUE #223055 계열 네이비 바탕 +
 *     SM PINK #FFB7CA 강조 하나. 장식용 그라데이션 없음(SM 규정). HOT PINK #F66181 은 쓰지 않는다.
 *   · 로고: 2·3기 상세페이지 원본의 공식 흰색 로고. 순서는 SM UNIVERSE(메인) → SM STUDIO REALIVE → KNDA
 *     (사용자 지시 2026-09-25, 스마트인재개발원 표기는 뺐다). SMTOWN 서체는 "회사 밖 배포 금지" 사내 자산이라 웹에 싣지 않는다.
 *   · 테마: 다크 고정. 섹션 반전 없음.
 *   · 모서리: 카드·이미지 16px, 작은 요소 10px, 버튼 알약형(999px).
 *   · 글꼴: Pretendard 하나(굵기로 위계).
 *   · 움직임: transform·opacity 만. prefers-reduced-motion 이면 전부 멈춘다.
 * z-index: 10 상단 메뉴 · 20 하단 신청 바(모바일) · 30 읽기 진행 막대 · 40 본문 바로가기
 * ───────────────────────────────────────────────────────────── */
:root{
  --bg:#131b30; --bg2:#172038; --surface:#1b2542; --surface2:#223055;          /* SM BLUE #223055 계열 */
  --ink:#f6f7fb; --ink2:#dde1ec; --muted:#b0b8c9; --muted2:#959eb2;            /* SM GRAY #85929A 를 어두운 바탕용으로 밝힘 */
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16);
  --accent:#FFB7CA; --accent-ink:#FFD2DE; --accent-bg:rgba(255,183,202,.12);     /* SM PINK(accent) */
  --on-accent:#1b2542;
  --r:16px; --r-sm:10px; --pill:999px;
  --font:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",Roboto,"Noto Sans KR",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1200px; --gutter:clamp(20px,4vw,40px);
  --head-h:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{text-wrap:balance;margin:0;letter-spacing:-.025em;line-height:1.25}
p{text-wrap:pretty;margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:12px}
.skip:focus{left:16px;z-index:40;background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:var(--r-sm);font-weight:700}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.num{font-variant-numeric:tabular-nums}
.nw{white-space:nowrap}   /* 조사·괄호가 떨어지지 않게 묶는다 */


/* ── 상단 메뉴 (모집·저널 공통) ── */
.site-head{position:sticky;top:0;z-index:10;height:var(--head-h);background:rgba(19,27,48,.86);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line)}
.site-head .wrap{height:100%;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:14px;flex:0 0 auto;min-height:44px}
.brand img{height:24px;width:auto}
.brand img + img{padding-left:14px;border-left:1px solid var(--line2);box-sizing:content-box}
.brand .srl{height:20px}
.brand .knda{height:16px}
.site-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:14.5px;font-weight:500;color:var(--muted);padding:0 12px;border-radius:var(--pill);white-space:nowrap;transition:color .2s,background-color .2s}
.site-nav a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.site-nav a[aria-current="page"]{color:var(--ink);font-weight:700}
@media(max-width:900px){
  html{scroll-padding-top:calc(var(--head-h) + 60px)}
  .site-head{height:auto}
  .site-head .wrap{height:auto;flex-wrap:wrap;gap:0 16px}
  .brand{min-height:52px}
  .site-head .btn{margin-left:auto}
  .site-nav{order:3;flex:1 0 100%;gap:0;margin:0 calc(var(--gutter) * -1);padding:0 calc(var(--gutter) - 10px) 4px;overflow-x:auto;scrollbar-width:none}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{padding:0 10px}
}

/* ── 버튼 ── 한 의도에 한 이름: 「지원하기」(신청) · 「카카오톡 상담」(문의) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;font-family:var(--font);
  font-weight:700;font-size:15px;line-height:1;padding:14px 22px;border-radius:var(--pill);border:1px solid transparent;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .2s,border-color .2s,color .2s}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-apply{background:var(--accent);color:var(--on-accent)}
.btn-apply:hover{transform:translateY(-1px);background:#FFC7D5;box-shadow:0 12px 28px rgba(255,183,202,.22)}
.btn-ghost{background:transparent;color:var(--ink);border-color:rgba(255,255,255,.32)}
.btn-ghost:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.04)}
.btn-sm{font-size:13.5px;padding:10px 16px;min-height:44px}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}

/* ── 섹션 공통 ── */
.sec{padding:clamp(72px,10vw,120px) 0 clamp(80px,11vw,132px)}
.sec + .sec{border-top:1px solid var(--line)}
.sec-title{font-size:clamp(28px,4vw,44px);font-weight:800;max-width:22ch}
.sec-lead{margin-top:16px;max-width:60ch;color:var(--muted);font-size:clamp(16px,1.6vw,18px);line-height:1.7}
.note{font-size:13.5px;color:var(--muted2);line-height:1.65}

/* ── 푸터 (공통) ── */
.site-foot{border-top:1px solid var(--line);padding:40px 0 56px;color:var(--muted2);font-size:13px}
.site-foot .wrap{display:grid;grid-template-columns:1fr auto;gap:18px 32px;align-items:start}
.site-foot .partners{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--muted)}
.site-foot nav{display:flex;flex-wrap:wrap;gap:0 18px}
.site-foot nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.site-foot nav a:hover{color:var(--ink)}
.site-foot .foot-brand{display:flex;align-items:center;gap:22px;margin:0}
.site-foot .foot-brand img{height:28px;width:auto}
.site-foot .foot-brand img + img{height:20px;opacity:.9}
.site-foot .logos{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:22px}
.site-foot .logos img{height:20px;width:auto;opacity:.75}
@media(max-width:700px){.site-foot .wrap{grid-template-columns:1fr}}

/* ── 모바일 하단 신청 바 (모집 페이지) ── */
.cta-bar{display:none}
@media(max-width:900px){
  .cta-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));transition:transform .3s var(--ease);
    background:rgba(19,27,48,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .cta-bar .btn{flex:1;padding:14px 10px}
  .cta-bar.off{transform:translateY(110%)}   /* 본문의 같은 버튼이 보이는 동안 숨긴다 */
  body.has-cta-bar{padding-bottom:78px}
  body.has-cta-bar .site-head .btn{display:none}   /* 하단 바에 같은 버튼이 있다 */
}

/* ── 스크롤 등장 — IntersectionObserver 가 .in 을 붙인다. 스크립트가 없으면 그냥 보인다 ── */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.js .reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}