/* ============================================
   Direct Research Korea — Components
   Monochrome: White, Black, Gray
   ============================================ */

/* ===== NAVIGATION ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-sticky);
  padding: var(--space-4) 0;
  transition: all var(--transition-normal);
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav.scrolled {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(30px);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) 0;
  box-shadow: var(--shadow-sm);
}
.nav__inner { display:flex; align-items:center; justify-content:space-between; max-width:var(--container-xl); margin:0 auto; padding:0 var(--space-6); }
.nav__logo { display:flex; align-items:center; gap:var(--space-3); font-family:var(--font-heading); font-weight:700; font-size:var(--text-xl); color:var(--color-black); text-decoration:none; }
.nav__logo:hover { color:var(--color-black); }
.nav__logo-icon { width:36px; height:36px; border-radius:var(--radius-md); background:var(--color-black); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:var(--text-sm); color:var(--color-white); }
.nav__links { display:flex; align-items:center; gap:var(--space-1); }
.nav__link { position:relative; padding:var(--space-2) var(--space-4); font-size:var(--text-sm); font-weight:500; color:var(--color-gray-600); text-decoration:none; border-radius:var(--radius-md); transition:all var(--transition-fast); }
.nav__link:hover { color:var(--color-black); background:var(--color-accent-glow); }
.nav__link.active { color:var(--color-black); font-weight:600; }

/* Dropdown */
.nav__dropdown { position:relative; }
.nav__dropdown-trigger { display:flex; align-items:center; gap:var(--space-1); }
.nav__dropdown-trigger::after { content:''; display:inline-block; width:0;height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:4px solid currentColor; transition:transform var(--transition-fast); }
.nav__dropdown:hover .nav__dropdown-trigger::after { transform:rotate(180deg); }
.nav__dropdown-menu { position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px); min-width:220px; padding:var(--space-2); background:rgba(255,255,255,0.98); backdrop-filter:blur(30px); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transition:all var(--transition-normal); }
.nav__dropdown:hover .nav__dropdown-menu { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav__dropdown-item { display:block; padding:var(--space-3) var(--space-4); font-size:var(--text-sm); color:var(--color-gray-600); border-radius:var(--radius-md); transition:all var(--transition-fast); }
.nav__dropdown-item:hover { color:var(--color-black); background:var(--color-accent-glow); }

/* Nav CTA */
.nav__cta { margin-left:var(--space-4); padding:var(--space-2) var(--space-6); font-size:var(--text-sm); font-weight:600; color:var(--color-white); background:var(--color-black); border-radius:var(--radius-full); text-decoration:none; transition:all var(--transition-normal); }
.nav__cta:hover { color:var(--color-white); transform:translateY(-1px); box-shadow:var(--shadow-accent); }

/* Mobile */
.nav__toggle { display:none; flex-direction:column; gap:5px; padding:var(--space-2); }
.nav__toggle-line { display:block; width:24px; height:2px; background:var(--color-black); border-radius:2px; transition:all var(--transition-normal); }
.nav__toggle.open .nav__toggle-line:nth-child(1) { transform:rotate(45deg) translateY(7px) translateX(5px); }
.nav__toggle.open .nav__toggle-line:nth-child(2) { opacity:0; }
.nav__toggle.open .nav__toggle-line:nth-child(3) { transform:rotate(-45deg) translateY(-7px) translateX(5px); }
.nav__mobile { display:none; position:fixed; inset:0; background:rgba(255,255,255,0.98); backdrop-filter:blur(30px); z-index:var(--z-overlay); padding:var(--space-24) var(--space-6); flex-direction:column; gap:var(--space-2); }
.nav__mobile.open { display:flex; }
.nav__mobile-link { display:block; padding:var(--space-4); font-family:var(--font-heading); font-size:var(--text-2xl); font-weight:600; color:var(--color-black); border-bottom:1px solid var(--color-border); }
.nav__mobile-link:hover { color:var(--color-gray-500); }
.nav__mobile-sub { padding-left:var(--space-8); }
.nav__mobile-sub a { font-size:var(--text-lg); font-weight:400; color:var(--color-gray-600); padding:var(--space-3) var(--space-4); display:block; }

/* ===== BUTTONS ===== */
.btn { display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-3) var(--space-8); font-family:var(--font-heading); font-size:var(--text-sm); font-weight:600; letter-spacing:var(--tracking-wide); border-radius:var(--radius-full); text-decoration:none; transition:all var(--transition-normal); cursor:pointer; border:none; white-space:nowrap; }
.btn--primary { color:var(--color-white); background:var(--color-black); }
.btn--primary:hover { color:var(--color-white); transform:translateY(-2px); box-shadow:var(--shadow-accent); }
.btn--secondary { color:var(--color-black); background:transparent; border:1.5px solid var(--color-black); }
.btn--secondary:hover { color:var(--color-white); background:var(--color-black); }
.btn--ghost { color:var(--color-gray-600); background:transparent; border:1px solid var(--color-gray-200); }
.btn--ghost:hover { color:var(--color-black); border-color:var(--color-gray-400); }
.btn--lg { padding:var(--space-4) var(--space-10); font-size:var(--text-base); }
.btn--sm { padding:var(--space-2) var(--space-5); font-size:var(--text-xs); }
.btn__arrow { transition:transform var(--transition-fast); }
.btn:hover .btn__arrow { transform:translateX(4px); }

/* ===== CARDS ===== */
.card { position:relative; background:var(--color-white); border:1px solid var(--color-black); border-radius:2px; overflow:hidden; transition:all var(--transition-normal); display:flex; flex-direction:column; height:100%; }
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.card__image { width:100%; height:200px; object-fit:cover; border-bottom:1px solid var(--color-gray-200); }
.card__body { padding:var(--space-6); padding-bottom:0; flex-grow:1; display:flex; flex-direction:column; }
.card__author { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-4); }
.card__author-left { display:flex; align-items:center; gap:var(--space-3); }
.card__avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; }
.card__author-info { display:flex; flex-direction:column; }
.card__author-name { font-size:var(--text-sm); font-weight:600; color:var(--color-black); line-height:1.2; }
.card__author-meta { font-size:var(--text-xs); font-weight:500; color:var(--color-gray-500); margin-top:2px; }
.card__more-icon { color:var(--color-gray-500); font-size:18px; cursor:pointer; }
.card__title { font-family:var(--font-heading); font-size:var(--text-lg); font-weight:700; line-height:1.4; color:var(--color-black); margin-bottom:var(--space-3); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card__excerpt { font-size:var(--text-sm); line-height:1.6; font-weight:500; color:var(--color-gray-600); margin-bottom:var(--space-6); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card__footer { margin:0 var(--space-6); padding:var(--space-4) 0; border-top:1px solid var(--color-gray-200); display:flex; align-items:center; gap:var(--space-2); color:var(--color-gray-500); font-size:var(--text-sm); font-weight:500; }
.card__footer svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Service Card */
.service-card { position:relative; padding:var(--space-8); background:var(--color-white); border:1px solid var(--color-gray-200); border-radius:var(--radius-xl); transition:all var(--transition-normal); overflow:hidden; }
.service-card::before { content:''; position:absolute; top:0;left:0;right:0; height:3px; background:var(--color-black); transform:scaleX(0); transform-origin:left; transition:transform var(--transition-normal); }
.service-card:hover::before { transform:scaleX(1); }
.service-card:hover { border-color:var(--color-border-hover); transform:translateY(-4px); box-shadow:var(--shadow-md); }
.service-card__icon { width:56px;height:56px; display:flex;align-items:center;justify-content:center; border-radius:var(--radius-lg); background:var(--color-offwhite); margin-bottom:var(--space-6); font-size:var(--text-2xl); }
.service-card__title { font-family:var(--font-heading); font-size:var(--text-xl); font-weight:600; color:var(--color-black); margin-bottom:var(--space-3); }
.service-card__desc { font-size:var(--text-sm); line-height:var(--leading-relaxed); color:var(--color-gray-500); }

/* ===== SECTION HEADER ===== */
.section-header { text-align:center; max-width:720px; margin:0 auto var(--space-16); }
.section-header__label { display:inline-block; margin-bottom:var(--space-4); }
.section-header__title { margin-bottom:var(--space-4); }
.section-header__desc { font-size:var(--text-lg); color:var(--color-text-secondary); line-height:var(--leading-relaxed); }

/* ===== STAT ===== */
.stat { text-align:center; padding:var(--space-8); }
.stat__number { font-family:var(--font-heading); font-size:var(--text-5xl); font-weight:800; color:var(--color-black); line-height:1; margin-bottom:var(--space-2); }
.stat__label { font-size:var(--text-sm); color:var(--color-gray-500); letter-spacing:var(--tracking-wide); }

/* ===== DIVIDER ===== */
.divider { height:1px; background:linear-gradient(90deg,transparent 0%,var(--color-gray-200) 20%,var(--color-gray-300) 50%,var(--color-gray-200) 80%,transparent 100%); border:none; margin:var(--space-2) 0; }

/* ===== BREADCRUMB ===== */
.breadcrumb { display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); color:var(--color-gray-400); margin-bottom:var(--space-8); }
.breadcrumb a { color:var(--color-gray-500); }
.breadcrumb a:hover { color:var(--color-black); }
.breadcrumb__sep { color:var(--color-gray-300); }

/* ===== FOOTER ===== */
.footer { background:var(--color-charcoal); color:var(--color-gray-300); border-top:1px solid var(--color-gray-200); padding-top:var(--space-16); padding-bottom:var(--space-8); }
.footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--space-12); margin-bottom:var(--space-12); }
.footer__brand-desc { font-size:var(--text-sm); color:var(--color-gray-400); line-height:var(--leading-relaxed); margin-top:var(--space-4); max-width:320px; }
.footer__heading { font-family:var(--font-heading); font-size:var(--text-sm); font-weight:600; letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--color-white); margin-bottom:var(--space-6); }
.footer__link { display:block; padding:var(--space-2) 0; font-size:var(--text-sm); color:var(--color-gray-400); transition:color var(--transition-fast); }
.footer__link:hover { color:var(--color-white); }
.footer__bottom { display:flex; align-items:center; justify-content:space-between; padding-top:var(--space-8); border-top:1px solid rgba(255,255,255,0.1); }
.footer__copy { font-size:var(--text-xs); color:var(--color-gray-500); }
.footer .nav__logo { color:var(--color-white); }
.footer .nav__logo:hover { color:var(--color-white); }
.footer .nav__logo-icon { background:var(--color-white); color:var(--color-black); }

/* ===== FORM ===== */
.form-group { margin-bottom:var(--space-6); }
.form-label { display:block; font-size:var(--text-sm); font-weight:500; color:var(--color-gray-700); margin-bottom:var(--space-2); }
.form-input,.form-textarea,.form-select { width:100%; padding:var(--space-3) var(--space-4); font-family:var(--font-body); font-size:var(--text-base); color:var(--color-black); background:var(--color-white); border:1px solid var(--color-gray-200); border-radius:var(--radius-md); transition:all var(--transition-fast); outline:none; }
.form-input:focus,.form-textarea:focus,.form-select:focus { border-color:var(--color-black); box-shadow:0 0 0 3px rgba(0,0,0,0.05); }
.form-input::placeholder,.form-textarea::placeholder { color:var(--color-gray-400); }
.form-textarea { min-height:150px; resize:vertical; }
.form-select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='m4.646 6.646 3 3a.5.5 0 0 0 .708 0l3-3'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:var(--space-10); }

/* ===== BACK TO TOP ===== */
.back-to-top { position:fixed; bottom:var(--space-8); right:var(--space-8); width:44px;height:44px; display:flex;align-items:center;justify-content:center; background:var(--color-black); color:var(--color-white); border-radius:var(--radius-full); box-shadow:var(--shadow-accent); opacity:0;visibility:hidden; transform:translateY(10px); transition:all var(--transition-normal); cursor:pointer; z-index:var(--z-sticky); border:none; }
.back-to-top.visible { opacity:1;visibility:visible;transform:translateY(0); }
.back-to-top:hover { transform:translateY(-2px); box-shadow:0 6px 25px rgba(0,0,0,0.2); }

/* ===== RESPONSIVE ===== */
@media (max-width:1024px) { .nav__links,.nav__cta { display:none; } .nav__toggle { display:flex; } .footer__grid { grid-template-columns:1fr 1fr; gap:var(--space-8); } }
@media (max-width:768px) { .nav__inner { padding:0 var(--space-4); } .footer__grid { grid-template-columns:1fr; } .footer__bottom { flex-direction:column;gap:var(--space-4);text-align:center; } }

/* Cookie Consent Banner */
#cookie-consent-banner {
  position: fixed;
  bottom: -100%;
  left: 0;
  width: 100%;
  background-color: var(--color-white);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
  z-index: 9999;
  transition: bottom 0.4s ease-in-out;
  padding: var(--space-4) 0;
}
#cookie-consent-banner.show {
  bottom: 0;
}
.cookie-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  text-align: center;
}
@media (min-width: 768px) {
  .cookie-banner-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}
.cookie-banner-inner p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-gray-500);
  max-width: 800px;
}
.cookie-actions {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Language Switcher */
.lang-switcher-container {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-4);
}
.lang-switcher-select {
  appearance: none;
  background: transparent;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  padding: 4px 24px 4px 8px;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--color-black);
  cursor: pointer;
  background-image: url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 50%;
}
.lang-switcher-select:focus {
  outline: 2px solid var(--color-black);
}