/* 2026-08 마케팅 셸 + 공용 마케팅 프리미티브 (보라/골드).
   공개 _Layout 전역 로드. 페이지별(히어로·섹션 그리드 등)은 각 뷰의 @section Styles 에 둔다. */

/* 공용 버튼(.btn*) — 기능 페이지의 .button* 과 별개, 마케팅 CTA용 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.95rem 1.8rem;border-radius:10px;font-weight:700;font-size:.98rem;border:1px solid transparent;cursor:pointer;transition:.2s;text-align:center}
.btn-primary{background:var(--color-accent-600);color:#fff}
.btn-primary:hover{background:var(--color-accent-700);transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--color-text);border-color:var(--color-border)}
.btn-ghost:hover{border-color:var(--color-accent-600);color:var(--color-accent-600)}
.btn-gold{background:var(--color-gold);color:#3a2c05}
.btn-gold:hover{filter:brightness(1.04);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--color-accent-600)}
.btn-outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}

/* 섹션 공통 */
.sec{padding:5rem 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto 3rem}
.eyebrow{display:inline-block;color:var(--color-accent-600);font-weight:800;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.9rem}
.eyebrow::before{display:none} /* common.css 의 밑줄 프리픽스 제거 */
.sec-head h2{font-size:2.05rem;font-weight:900;letter-spacing:-.03em;line-height:1.32}
.sec-head p{margin-top:1.1rem;color:var(--color-text-secondary);font-size:1.05rem;line-height:1.75}

/* 상단 공지바 */
.noticebar{background:var(--color-primary-950);color:#fff;font-size:.85rem}
.noticebar .container{display:flex;align-items:center;gap:.7rem;height:42px}
.noticebar .tag{background:var(--color-gold);color:#3a2c05;font-weight:800;font-size:.7rem;padding:2px 8px;border-radius:20px;flex:none}
.noticebar .txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.9}
.noticebar .txt a{color:inherit}
.noticebar .more{opacity:.65;white-space:nowrap;flex:none}

/* 헤더 */
.mkt-header{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:100}
.hd{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{font-size:1.4rem;font-weight:900;color:var(--color-accent-600);letter-spacing:-.03em}
.logo span{color:var(--color-gold)}
.logo img{max-height:34px;width:auto;display:block}
.mkt-nav{display:flex;gap:2.2rem}
.mkt-nav a{color:var(--color-text-secondary);font-weight:700;font-size:.94rem}
.mkt-nav a:hover,.mkt-nav a[aria-current="page"]{color:var(--color-accent-600)}
.hd-cta{display:flex;align-items:center;gap:.8rem}
.hd-cta .link{font-weight:700;font-size:.9rem;color:var(--color-text-secondary)}
.hd-cta .link:hover{color:var(--color-accent-600)}
.hd-cta .btn{padding:.6rem 1.2rem;font-size:.9rem}
.hd-toggle{display:none;background:none;border:0;cursor:pointer;color:var(--color-text);padding:6px}
/* 로그인 상태 헤더(2026-08-31 A안): 이름 · 콘솔 가기 · 로그아웃 */
.hd-user{font-weight:700;font-size:.9rem;color:var(--color-text);white-space:nowrap;max-width:14rem;overflow:hidden;text-overflow:ellipsis}
.hd-logout{display:inline-flex;margin:0}
.hd-logout button.link{background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
.mkt-mobile{display:none;flex-direction:column;background:#fff;border-bottom:1px solid var(--color-border)}
.mkt-mobile.open{display:flex}
.mkt-mobile a{padding:.9rem 22px;font-weight:700;color:var(--color-text-secondary);border-top:1px solid var(--color-border)}
.mkt-mobile__user{padding:.9rem 22px;font-weight:700;color:var(--color-text);border-top:1px solid var(--color-border)}
.mkt-mobile form{margin:0}
.mkt-mobile form button{display:block;width:100%;text-align:left;padding:.9rem 22px;font-weight:700;font-size:1rem;font-family:inherit;color:var(--color-text-secondary);background:none;border:0;border-top:1px solid var(--color-border);cursor:pointer}

/* 푸터 */
.mkt-footer{background:#fff;border-top:1px solid var(--color-border);padding:3rem 0 1.8rem;font-size:.86rem}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:1.8rem}
.f-brand p{color:var(--color-text-secondary);margin:.7rem 0;line-height:1.6;max-width:22rem}
.f-brand .tel{font-weight:800}
.f-brand .tel span{display:block;font-weight:400;color:var(--color-text-muted);font-size:.8rem;margin-top:.2rem}
.f-col h4{font-size:.92rem;margin-bottom:.6rem}
.f-col a{display:block;color:var(--color-text-secondary);margin-bottom:.32rem;font-size:.85rem}
.f-col a:hover{color:var(--color-accent-600)}
.f-bottom{border-top:1px solid var(--color-border);margin-top:1.8rem;padding-top:1.3rem;color:var(--color-text-muted);font-size:.78rem;line-height:1.8}

/* 스크롤 등장 애니메이션 — JS 활성(html.js-anim) 일 때만 숨겼다 보여줌.
   JS 미실행 시 .reveal 은 그대로 보임(콘텐츠가 사라지지 않도록). */
html.js-anim .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
html.js-anim .reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){html.js-anim .reveal{opacity:1;transform:none;transition:none}}

/* 하단 CTA 밴드 (여러 페이지 공용) */
.cta{background:var(--color-accent-600);color:#fff;text-align:center;padding:4.4rem 0}
.cta h2{font-size:2rem;font-weight:900;letter-spacing:-.02em}
.cta p{margin:1rem 0 2rem;opacity:.93;font-size:1.05rem}
.cta-btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.cta small{display:block;margin-top:1.3rem;opacity:.85;font-size:.85rem}

@media (max-width:560px){
  .mkt-nav{display:none}
  .hd-toggle{display:inline-flex}
  .sec{padding:2.8rem 0}
  .sec-head{margin-bottom:1.8rem}
  .sec-head h2{font-size:1.55rem}
  .f-grid{grid-template-columns:1fr;gap:.9rem}
}
@media (max-width:820px){
  .sec{padding:3.6rem 0}
  .f-grid{grid-template-columns:1fr 1fr}
}
/* [10-16 꼭 고칠 것 §3] 태블릿 폭에서 헤더 메뉴가 붙음 → 900px 이하 ☰ · 휴대폰 푸터 1칸(위 820px 규칙보다 뒤에 둬야 이김) */
@media (max-width:900px){
  .mkt-nav{display:none}
  .hd-toggle{display:inline-flex}
}
@media (max-width:560px){
  .f-grid{grid-template-columns:1fr;gap:.9rem}
}

/* 헤더·푸터 로고 = N7 + NTEST7 워드마크 (마케팅 요청 2026-08-18 #14)
   헤더는 보라색, 어두운 푸터는 흰색을 상속받게 color:inherit. */
.mkt-header .logo, .f-brand .logo { font-size: 1.62rem; }
.logo .wm { font-size: .72em; font-weight: 800; letter-spacing: .03em; margin-left: .44rem; color: inherit; }
.f-brand .logo .wm { color: inherit; }

/* 폰트 통일 (마케팅 요청 2026-08-18 #15)
   variables.css 는 'Pretendard Variable' 을 먼저 두는데, 레이아웃이 로드하는 건 정적 Pretendard 다.
   공개 마케팅 사이트는 정적 Pretendard 로 통일해 페이지마다 글꼴이 달라 보이는 것을 막는다. */
:root { --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif; }
body { font-family: var(--font-sans); }