/* ================================================
   사회미래연구소 (SFRI) — 디자인 시스템 v2
   ================================================ */

:root {
  --col-dark:    #1A1A18;
  --col-dark-2:  #141412;
  --col-dark-3:  #0E0E0C;
  --col-cream:   #F4EFE5;
  --col-cream-2: #EDE8DC;
  --col-gold:    #C8922A;
  --col-gold-dk: #B47D20;
  --col-border:  #DED8CC;
  --col-border-2:#2E2E2A;

  --txt-dark:    #1E1E1C;
  --txt-mid:     #706660;
  --txt-sub:     #8A8078;
  --txt-muted:   #9E9B95;
  --txt-light:   #F5F2EC;
  --txt-light-2: #7A7772;
  --txt-footer:  #6B6760;
  --txt-dim:     #4A4A47;

  --font-sans:   'Apple SD Gothic Neo','Malgun Gothic','맑은 고딕',sans-serif;
  --font-serif:  'Apple Myungjo','바탕','Noto Serif KR',Georgia,serif;

  --t1-hero:    40px;
  --t1-section: 26px;
  --t1-card:    15px;
  --t2-hero:    52px;
  --t2-section: 28px;
  --t2-area:    20px;
  --t3-hero:    44px;
  --t3-sub:     18px;
  --t3-body:    14px;
  --t-label:    11px;
  --t-tag:      12px;
  --t-body:     14px;
  --t-small:    13px;

  --sp-xs:   8px;
  --sp-sm:   16px;
  --sp-md:   24px;
  --sp-lg:   48px;
  --sp-xl:   80px;
  --sp-page: 60px;
  --sp-card: 28px;

  --r-sm: 2px;
  --r-md: 8px;
  --r-lg: 12px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);font-size:var(--t-body);color:var(--txt-dark);background:#fff;line-height:1.7}
a{text-decoration:none;cursor:pointer}

.serif{font-family:var(--font-serif)}
.s-label{font-size:var(--t-label);letter-spacing:0.15em;text-transform:uppercase}
.tag{font-size:var(--t-tag);padding:3px 10px;border-radius:var(--r-sm);display:inline-block}

header{display:flex;align-items:center;justify-content:space-between;padding:0 var(--sp-page);height:64px;border-bottom:0.5px solid var(--col-border-2);background:var(--col-dark);position:sticky;top:0;z-index:100}
.logo{display:flex;align-items:baseline;gap:10px}
.logo-text{font-family:var(--font-serif);font-size:14px;font-weight:400;color:var(--txt-light);letter-spacing:-0.01em}
.logo-en{font-size:10px;color:var(--col-gold);letter-spacing:0.18em;margin-left:6px}
nav{display:flex;gap:36px;align-items:center}
nav a{font-size:var(--t-tag);color:var(--txt-muted);transition:color .2s;padding-bottom:2px}
nav a:hover{color:var(--txt-light)}
nav a.active{color:var(--txt-light);border-bottom:1.5px solid var(--col-gold)}
.nav-right{display:flex;align-items:center;gap:16px}
.lang{font-size:var(--t-tag);color:var(--txt-footer)}

.btn-primary{background:var(--col-gold);color:#fff;border:none;padding:8px 18px;font-size:var(--t-tag);font-family:var(--font-sans);cursor:pointer;border-radius:var(--r-sm);transition:background .2s}
.btn-primary:hover{background:var(--col-gold-dk)}
.btn-primary.lg{padding:12px 28px;font-size:var(--t-body)}
.btn-ghost{background:transparent;color:var(--txt-muted);border:0.5px solid #6B6760;padding:12px 28px;font-size:var(--t-body);font-family:var(--font-sans);cursor:pointer;border-radius:var(--r-sm);transition:border-color .2s,color .2s}
.btn-ghost:hover{border-color:var(--txt-muted);color:var(--txt-light)}

.breadcrumb{padding:18px var(--sp-page);border-bottom:0.5px solid #e8e5df;font-size:var(--t-tag);color:var(--txt-muted);display:flex;align-items:center;gap:8px;background:#fff}
.breadcrumb a{color:var(--txt-muted)}
.breadcrumb a:hover{color:var(--col-gold)}
.breadcrumb span{color:var(--txt-dark)}

.card{border:0.5px solid #e8e5df;border-radius:var(--r-lg);overflow:hidden;background:#fff;transition:border-color .2s}
.card:hover{border-color:#ccc}
.card-body{padding:var(--sp-card)}

footer{background:var(--col-dark-3);padding:var(--sp-page);border-top:0.5px solid var(--col-border-2)}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 0.9fr 0.7fr;gap:20px;margin-bottom:48px}
.footer-name{font-family:var(--font-serif);font-size:16px;color:var(--txt-light);margin-bottom:6px}
.footer-en{font-size:var(--t-label);color:var(--col-gold);margin-bottom:20px;letter-spacing:0.12em}
.footer-desc{font-size:var(--t-small);color:var(--txt-footer);line-height:2}
.footer-col-title{font-size:var(--t-label);color:var(--txt-muted);margin-bottom:18px;letter-spacing:0.1em}
.footer-links{display:flex;flex-direction:column;gap:12px}
.footer-links a{font-size:var(--t-small);color:var(--txt-footer)}
.footer-links a:hover{color:var(--txt-muted)}
.footer-bottom{border-top:0.5px solid var(--col-border-2);padding-top:24px;display:flex;justify-content:space-between}
.footer-bottom p{font-size:var(--t-tag);color:#3E3E3A}

.section-pad{padding:var(--sp-xl) var(--sp-page)}
.section-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:var(--sp-lg)}
.section-header a{font-size:var(--t-small);color:var(--col-gold)}

.coming-badge{display:inline-block;font-size:var(--t-label);letter-spacing:0.15em;padding:6px 16px;border-radius:var(--r-sm);margin-bottom:36px}
.preview-item{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:0.5px solid var(--col-border)}
.preview-dot{width:6px;height:6px;border-radius:50%;background:var(--col-gold);flex-shrink:0}
.preview-text{font-size:var(--t-body);color:var(--txt-mid)}
.coming-soon-tag{font-size:var(--t-label);color:var(--txt-muted);margin-left:auto;flex-shrink:0}
.notify-form{display:flex;max-width:480px}
.notify-input{flex:1;padding:12px 16px;border:0.5px solid var(--col-border);border-right:none;font-size:var(--t-body);font-family:var(--font-sans);background:#fff;border-radius:var(--r-sm) 0 0 var(--r-sm);outline:none}
.notify-input:focus{border-color:var(--col-gold)}
.notify-btn{background:var(--col-gold);color:#fff;border:none;padding:12px 24px;font-size:var(--t-body);font-family:var(--font-sans);cursor:pointer;border-radius:0 var(--r-sm) var(--r-sm) 0;white-space:nowrap}

/* ── 모바일 햄버거 메뉴 ── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px;
  flex-shrink: 0;
  z-index: 200;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--txt-muted);
  transition: transform 0.3s, opacity 0.3s;
  border-radius: 1px;
}
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  background: var(--col-dark);
  border-top: 0.5px solid var(--col-border-2);
  z-index: 150;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.mobile-nav.open { max-height: 360px; }
.mobile-nav a {
  display: block;
  padding: 16px 28px;
  font-size: 15px;
  color: var(--txt-muted);
  border-bottom: 0.5px solid var(--col-border-2);
  transition: color 0.2s;
}
.mobile-nav a:hover, .mobile-nav a.active { color: var(--txt-light); }
.mobile-nav .m-btn {
  margin: 12px 28px 20px;
  display: block;
  background: var(--col-gold);
  color: #fff !important;
  padding: 13px 0;
  text-align: center;
  border-radius: var(--r-sm);
  font-size: 14px;
  border-bottom: none !important;
}
.mobile-nav .m-btn:hover { background: var(--col-gold-dk); }

@media (max-width: 1024px) {
  :root { --sp-page: 24px; --sp-xl: 56px; }
  header { padding: 0 24px; }
  nav { display: none; }
  .nav-right { display: none; }
  .hamburger { display: flex; }
  .mobile-nav { display: flex; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .section-pad { padding: 48px 24px; }
  .breadcrumb { padding: 14px 24px; }
}

@media (max-width: 640px) {
  :root { --sp-page: 20px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}