/* ==========================================================================
   marketing.css — 마케팅 페이지 공용 크롬 (헤더 + 푸터)
   --------------------------------------------------------------------------
   사용처: _marketing_header.php / _marketing_footer.php 가 자동으로 링크
           (첫 페이지 · 로그인 · 회원가입 · 약관 등 head.php 미사용 페이지 전부)
   전제:   페이지가 CSS 토큰(--primary, --ink, --sub, --line)을 정의해야 함
           → 색은 페이지 토큰을 따라감 (랜딩=블루 #3D5CE0, 로그인/가입=네이비 #15406F)
   구성:   1. 공통  2. 헤더  3. 헤더-로그인 우측 영역  4. 푸터
           5. 반응형(데스크탑 min-width)  6. 반응형(태블릿→모바일 max-width 내림차순)
   브레이크포인트: 1200 / 768 (min) · 980 / 860 / 767 / 600 / 520 / 390 (max)
   ========================================================================== */

/* ── 1. 공통 ─────────────────────────────────────────────────────────── */
html{overflow-y:scroll}  /* 스크롤바 유무에 따른 좌우 위치 이동 방지 (페이지 간 정렬 고정) */

/* ── 2. 헤더 (.mkt-header) ───────────────────────────────────────────── */
.mkt-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
/* 좌우 여백 = 앱 헤더(head.php .sh-header-bar)와 동일 단계: 20 → 32(768~) → 40(1200~) */
.mkt-header .mkt-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:11px 20px;max-width:1400px;margin:0 auto}
.mkt-header .brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.mkt-header .brand .bn{font-size:19px;font-weight:900;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.mkt-header .brand .bn-tag{font-size:13px;font-weight:700;color:#5B6472;white-space:nowrap;padding-left:12px;border-left:1px solid #DFE3E8}
.mkt-header .brand .bn-tag b{color:var(--primary);font-weight:900}
.mkt-header .mkt-actions{display:flex;align-items:center;gap:14px}
.mkt-header .mkt-actions .login{background:none;border:none;font-size:14px;font-weight:700;color:var(--ink);padding:12px 8px;text-decoration:none;white-space:nowrap}
.mkt-header .mkt-actions .start{background:var(--primary);color:#fff;border:none;border-radius:999px;padding:11px 22px;font-size:14px;font-weight:800;text-decoration:none;white-space:nowrap;transition:transform .12s,filter .12s}
.mkt-header .mkt-actions .start:hover{transform:translateY(-1px);filter:brightness(1.06)}
.mkt-header .mkt-nav{display:flex;gap:14px;padding:0 14px;max-width:1400px;margin:0 auto;overflow-x:auto;scrollbar-width:none}
.mkt-header .mkt-nav::-webkit-scrollbar{display:none}
.mkt-header .mkt-nav a{display:inline-flex;align-items:center;gap:6px;height:48px;padding:0 4px;font-size:15px;font-weight:700;color:#3A4250;border-bottom:2.5px solid transparent;white-space:nowrap;transition:color .12s;text-decoration:none}
.mkt-header .mkt-nav a:hover{color:var(--primary)}
.mkt-header .mkt-nav a.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:800}
.mkt-header .mkt-nav .material-symbols-outlined{font-size:17px;color:#8A93A0;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}
.mkt-header .mkt-nav a:hover .material-symbols-outlined,.mkt-header .mkt-nav a.active .material-symbols-outlined{color:var(--primary)}
.mkt-header .mkt-nav a.active .material-symbols-outlined{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
/* 인라인 SVG 아이콘 (sh_top_icon — 폰트 로딩 흔들림 없음) */
.mkt-header .mkt-nav .sh-ticon{color:#8A93A0;flex-shrink:0}
.mkt-header .mkt-nav a:hover .sh-ticon,.mkt-header .mkt-nav a.active .sh-ticon{color:var(--primary)}
/* 역할 전용 탭 (기관관리 보라 강조 — head.php .sh-tab--accent와 동일) */
.mkt-header .mkt-nav a.accent{color:#6D28D9}
.mkt-header .mkt-nav a.accent.active{color:#6D28D9;border-bottom-color:#6D28D9}
/* 요금제 탭 — 골드 알약으로 차별화 (head.php .sh-tab--pricing과 동일 규격) */
.mkt-header .mkt-nav a.mkt-nav--pricing{align-self:center;height:34px;padding:0 14px;border-radius:99px;background:#FBF0DA;color:#8A5A00;border-bottom:none;font-weight:800}
.mkt-header .mkt-nav a.mkt-nav--pricing:hover{background:#F7E7C8;color:#5A3D08}
.mkt-header .mkt-nav a.mkt-nav--pricing .material-symbols-outlined,.mkt-header .mkt-nav a.mkt-nav--pricing .sh-ticon{color:#B7791F}
.mkt-header .mkt-nav a.mkt-nav--pricing.active{background:#F5DFAE;color:#5A3D08;border-bottom-color:transparent}
.mkt-header .mkt-nav a.mkt-nav--pricing.active .material-symbols-outlined,.mkt-header .mkt-nav a.mkt-nav--pricing.active .sh-ticon{color:#8A5A00}

/* ── 3. 헤더 — 로그인 우측 영역 (head.php .sh-acct 계열과 동일 규격) ──── */
.mkt-header .sh-bell{display:inline-flex;color:#5A6B7E;text-decoration:none}
.mkt-header .sh-acct{position:relative}
.mkt-header .sh-acct-chip{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:8px;background:#F4F7FB;text-decoration:none;border:none;cursor:pointer;font-family:inherit}
.mkt-header .sh-acct-chip:hover{text-decoration:none;background:#EAF0F7}
.mkt-header .sh-acct-av{width:24px;height:24px;border-radius:50%;background:#2E78D2;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.mkt-header .sh-acct-name{font-size:13px;font-weight:600;color:#1B2A3A;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkt-header .sh-acct-caret{font-size:18px;color:#5A6B7E;transition:transform .15s}
.mkt-header .sh-acct.open .sh-acct-caret{transform:rotate(180deg)}
.mkt-header .sh-acct-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:214px;background:#fff;border:1px solid #E2E8F1;border-radius:12px;box-shadow:0 14px 32px -12px rgba(20,40,70,.28);padding:6px;display:none;z-index:60}
.mkt-header .sh-acct.open .sh-acct-menu{display:block}
.mkt-header .sh-acct-head{padding:8px 12px 10px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.mkt-header .sh-acct-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:14px;font-weight:600;color:#1B2A3A;text-decoration:none}
.mkt-header .sh-acct-link:hover{background:#F4F7FB;text-decoration:none}
.mkt-header .sh-acct-link .material-symbols-outlined{font-size:19px;color:#5A6B7E}
.mkt-header .sh-acct-link.danger{color:#C0392B}
.mkt-header .sh-acct-link.danger .material-symbols-outlined{color:#C0392B}
.mkt-header .sh-acct-div{height:1px;background:#F1F5F9;margin:4px 6px}
.mkt-header .sh-plan-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:20px;font-size:12px;font-weight:700}
.mkt-header .pro-txt-m{display:none}

/* ── 4. 푸터 (.mkt-footer) ───────────────────────────────────────────── */
.mkt-footer{margin-top:80px;background:#1B2A3A;padding:48px 0;color:#fff}
.mkt-footer .mf-wrap{max-width:1400px;margin:0 auto;padding:0 40px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px}
.mkt-footer .ft-brand{display:flex;align-items:center;gap:10px}
.mkt-footer .ft-brand .bn{font-size:18px;font-weight:800;color:#fff}
.mkt-footer .ft-desc{margin-top:12px;font-size:13px;line-height:1.6;color:rgba(255,255,255,.55);max-width:320px}
.mkt-footer .ft-cols{display:flex;gap:48px;flex-wrap:wrap}
.mkt-footer .ft-col .h{font-size:13px;font-weight:700;color:rgba(255,255,255,.85);margin-bottom:12px}
.mkt-footer .ft-col a{display:block;font-size:13px;color:rgba(255,255,255,.55);padding:7px 0;margin-bottom:2px;text-decoration:none}
.mkt-footer .ft-col a:hover{color:#fff}
.mkt-footer .ft-foot{max-width:1400px;margin:28px auto 0;padding:24px 40px 0;border-top:1px solid rgba(255,255,255,.08)}
.mkt-footer .ft-biz{font-size:12px;line-height:1.9;color:rgba(255,255,255,.45);margin-bottom:10px}
.mkt-footer .ft-biz .sep{margin:0 8px;color:rgba(255,255,255,.2)}
.mkt-footer .ft-copy{font-size:12px;color:rgba(255,255,255,.4)}

/* ── 5. 반응형 — 데스크탑 (min-width) ────────────────────────────────── */
@media(min-width:768px){
  .mkt-header .mkt-bar{padding:12px 32px}
  .mkt-header .mkt-nav{padding:0 26px}
}
@media(min-width:1200px){
  .mkt-header .mkt-bar{padding:12px 40px}
  .mkt-header .mkt-nav{padding:0 34px}
}

/* ── 6. 반응형 — 태블릿 → 모바일 (max-width 내림차순) ────────────────── */
@media(max-width:980px){
  .mkt-footer .mf-wrap,.mkt-footer .ft-foot{padding-left:22px;padding-right:22px}
}
@media(max-width:860px){
  .mkt-header .brand .bn-tag{display:none}
}
@media(max-width:767px){
  .mkt-header .mkt-nav{padding-left:12px;padding-right:12px}
  .mkt-header .pro-txt{display:none}
  .mkt-header .pro-txt-m{display:inline}
}
@media(max-width:600px){
  .mkt-header .mkt-bar,.mkt-header .mkt-nav{padding-left:12px;padding-right:12px}
  .mkt-header .mkt-bar{gap:8px}
  /* 모바일: 로고·버튼 압축 — 한 줄 유지 (줄바꿈 금지) */
  .mkt-header .brand{gap:7px}
  .mkt-header .brand img{width:30px !important;height:30px !important}
  .mkt-header .brand .bn{font-size:15px}
  .mkt-header .mkt-actions{gap:6px}
  .mkt-header .mkt-actions .login{padding:8px 2px;font-size:13px}
  .mkt-header .mkt-actions .start{padding:8px 11px;font-size:13px}
  .mkt-header .sh-fs-btn{padding:4px 7px}
  .mkt-header .sh-fs-btn .sh-fs-ga{font-size:13px}
  .mkt-header .sh-tts-btn{padding:4px 6px}
  .mkt-header .sh-tts-btn .material-symbols-outlined{font-size:16px !important}
  .mkt-header .mkt-nav{gap:8px}
  .mkt-header .mkt-nav a{padding:0 3px;gap:4px;font-size:13px;height:44px}
  .mkt-header .mkt-nav .material-symbols-outlined{font-size:15px}
  .mkt-footer{margin-top:56px}
  .mkt-footer .mf-wrap,.mkt-footer .ft-foot{padding-left:16px;padding-right:16px}
}
@media(max-width:520px){
  .mkt-header .sh-acct-name{display:none}
}
@media(max-width:390px){
  /* 초소형 화면: '무료로 ' 생략해 한 줄 확보 */
  .mkt-header .mkt-actions .start .bw{display:none}
}