/* ════════════════════════════════════════════════════════════════
   EMBlock Brand Components — brand.css
   ════════════════════════════════════════════════════════════════
   사용법:
   <link rel="stylesheet" href="/css/brand.css">
   
   포함 컴포넌트:
   - .emblock-logo (Light/Dark/Compact 3 variants)
   - .emblock-footer (Full / Compact 2 variants)
   
   디자인 토큰은 페이지의 :root 에서 정의되어 있어야 합니다.
   페이지에 토큰이 없으면 본 파일이 fallback 값을 제공합니다.
   ════════════════════════════════════════════════════════════════ */

/* ── 디자인 토큰 fallback (페이지에 :root 정의 없을 때만 적용) ─── */
:root{
  --navy:       #1a2744;
  --navy-deep:  #0f1929;
  --gold:       #b8860b;
  --gold-light: #d4a72c;
  --cream:      #faf8f3;
  --rule:       #d4cfc0;
  --rule-soft:  #e8e3d5;
  --muted:      #6b6356;
}

/* ════════════════════════════════════════════════════════════════
   로고 컴포넌트
   ════════════════════════════════════════════════════════════════ */

/* Light Background (기본) */
.emblock-logo{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  font-family:'JetBrains Mono', monospace;
  color:var(--navy);
  text-decoration:none;
  transition:opacity .15s;
}
.emblock-logo:hover{ opacity:.75 }
.emblock-logo img{
  height:28px;
  width:auto;
  display:block;
}
.emblock-logo-text{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--navy);
  line-height:1;
  padding-left:.7rem;
  border-left:1px solid var(--rule);
}
.emblock-logo-text strong{
  color:var(--gold);
  font-weight:600;
  margin-right:.3rem;
}

/* Dark Background */
.emblock-logo-dark{ color:var(--cream) }
.emblock-logo-dark .emblock-logo-text{
  color:var(--cream);
  border-left-color:rgba(250,248,243,.25);
}
.emblock-logo-dark .emblock-logo-text strong{ color:var(--gold-light) }

/* Compact (텍스트만, 이미지 없음) */
.emblock-logo-compact{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--navy);
  text-decoration:none;
  transition:opacity .15s;
}
.emblock-logo-compact:hover{ opacity:.75 }
.emblock-logo-compact strong{
  color:var(--gold);
  font-weight:600;
  margin-right:.3rem;
}
.emblock-logo-compact.dark{ color:var(--cream) }
.emblock-logo-compact.dark strong{ color:var(--gold-light) }

/* ════════════════════════════════════════════════════════════════
   푸터 — Full (PG 심사용)
   ════════════════════════════════════════════════════════════════ */

.emblock-footer{
  background:#0a1322;
  color:rgba(250,248,243,.65);
  padding:3rem 0 2rem;
  font-size:.86rem;
  line-height:1.75;
  font-family:"Pretendard Variable", "Pretendard", sans-serif;
}
.emblock-footer-inner{
  max-width:1080px;
  margin:0 auto;
  padding:0 1.5rem;
}

/* 상단: 브랜드 + 사이트 네비 */
.emblock-footer-top{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:2rem;
  padding-bottom:2rem;
  border-bottom:1px solid rgba(250,248,243,.12);
  margin-bottom:1.8rem;
  align-items:flex-start;
}
.emblock-footer-brand{ flex-shrink:0 }
.emblock-footer-brand img{
  height:32px;
  width:auto;
  display:block;
  margin-bottom:.8rem;
}
.emblock-footer-brand-tag{
  font-family:'JetBrains Mono', monospace;
  font-size:10px;
  letter-spacing:.22em;
  color:var(--gold-light);
  text-transform:uppercase;
  font-weight:600;
}
.emblock-footer-nav{
  display:flex;
  gap:1.8rem;
  flex-wrap:wrap;
  justify-self:end;
  padding-top:.5rem;
}
.emblock-footer-nav a{
  color:rgba(250,248,243,.75);
  text-decoration:none;
  font-size:.88rem;
  border-bottom:1px solid transparent;
  padding-bottom:1px;
  transition:color .15s, border-color .15s;
}
.emblock-footer-nav a:hover{
  color:var(--gold-light);
  border-bottom-color:var(--gold-light);
}

/* 중단: 사업자 정보 + 약관 */
.emblock-footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.5rem;
  padding-bottom:1.8rem;
  border-bottom:1px solid rgba(250,248,243,.12);
  margin-bottom:1.5rem;
}
.emblock-footer-block h4{
  font-family:'JetBrains Mono', monospace;
  font-size:10px;
  letter-spacing:.22em;
  color:var(--gold-light);
  text-transform:uppercase;
  margin-bottom:.9rem;
  font-weight:600;
}
.emblock-footer-block dl{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.4rem 1rem;
}
.emblock-footer-block dt{
  color:rgba(250,248,243,.5);
  font-weight:400;
  white-space:nowrap;
  font-size:.82rem;
}
.emblock-footer-block dd{
  color:rgba(250,248,243,.85);
  font-size:.86rem;
}
.emblock-footer-block dd em{
  color:rgba(250,248,243,.4);
  font-style:normal;
  font-size:.76rem;
  margin-left:.3rem;
}
.emblock-footer-block dd a{
  color:rgba(250,248,243,.85);
  text-decoration:none;
  border-bottom:1px solid rgba(250,248,243,.25);
  padding-bottom:1px;
}
.emblock-footer-block dd a:hover{
  color:var(--gold-light);
  border-bottom-color:var(--gold-light);
}

.emblock-footer-links{
  display:flex;
  gap:1.5rem;
  margin-bottom:1rem;
  flex-wrap:wrap;
}
.emblock-footer-links a{
  color:rgba(250,248,243,.7);
  text-decoration:none;
  font-size:.88rem;
  border-bottom:1px solid rgba(250,248,243,.2);
  padding-bottom:1px;
  transition:color .15s, border-color .15s;
}
.emblock-footer-links a:hover{
  color:var(--gold-light);
  border-bottom-color:var(--gold-light);
}
.emblock-footer-note{
  margin-top:.8rem;
  font-size:.82rem;
  color:rgba(250,248,243,.55);
  line-height:1.7;
}
.emblock-footer-copy{
  color:rgba(250,248,243,.4);
  font-size:.78rem;
  margin-top:.5rem;
}

/* ════════════════════════════════════════════════════════════════
   푸터 — Compact (간소화, 약관 페이지·문서 페이지용)
   ════════════════════════════════════════════════════════════════ */

.emblock-footer-compact{
  background:var(--navy-deep);
  color:rgba(250,248,243,.65);
  padding:2.5rem 0;
  font-size:.85rem;
  font-family:"Pretendard Variable", "Pretendard", sans-serif;
}
.emblock-footer-compact-inner{
  max-width:1080px;
  margin:0 auto;
  padding:0 1.5rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  flex-wrap:wrap;
}
.emblock-footer-compact-brand{
  display:flex;
  align-items:center;
  gap:.7rem;
}
.emblock-footer-compact-brand img{
  height:24px;
  width:auto;
}
.emblock-footer-compact-brand span{
  font-family:'JetBrains Mono', monospace;
  font-size:10px;
  letter-spacing:.2em;
  color:rgba(250,248,243,.7);
  text-transform:uppercase;
}
.emblock-footer-compact-links{
  display:flex;
  gap:1.3rem;
  flex-wrap:wrap;
}
.emblock-footer-compact-links a{
  color:rgba(250,248,243,.7);
  text-decoration:none;
  font-size:.85rem;
  transition:color .15s;
}
.emblock-footer-compact-links a:hover{ color:var(--gold-light) }

/* ════════════════════════════════════════════════════════════════
   반응형
   ════════════════════════════════════════════════════════════════ */

@media (max-width:768px){
  .emblock-footer-top{
    grid-template-columns:1fr;
    gap:1.5rem;
  }
  .emblock-footer-nav{
    justify-self:start;
    gap:1.2rem;
  }
  .emblock-footer-grid{
    grid-template-columns:1fr;
    gap:1.5rem;
  }
  .emblock-footer-compact-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:1.2rem;
  }
}

@media (max-width:480px){
  .emblock-logo img{ height:24px }
  .emblock-logo-text{
    font-size:10px;
    letter-spacing:.18em;
  }
}