/**
 * design.css — neisme 2026 브랜드 오버라이드 + emerald 다크 보정
 *
 * 시안: /var/services/web/.design/neisme/2026/chrome/dark-mode.md §3 / §10
 *
 * tokens.css 본체는 수정하지 않음.
 * 이 파일이 neisme 전용 토큰 override 의 단일 진실 원천.
 *
 * 로딩 순서: tokens.css → design.css → auth.css / page-specific.css
 */

/* ─── emerald 라이트 브랜드 override ──────────────────────────────────────── */

[data-brand="neisme"] {
  --color-primary:        #047857;  /* emerald-700 */
  --color-primary-hover:  #065f46;  /* emerald-800 */
  --color-primary-active: #064e3b;  /* emerald-900 */
  --color-primary-fg:     #ffffff;  /* primary 버튼 위 글자 */
  --color-primary-soft:   #d1fae5;  /* emerald-100 */
  --color-primary-soft-fg:#065f46;  /* emerald-800 — soft 배경 위 글자 */

  --color-accent:         #f59e0b;  /* amber-500 */
  --color-accent-hover:   #d97706;  /* amber-600 */
  --color-accent-soft:    #fef3c7;  /* amber-100 */
  --color-accent-soft-fg: #92400e;  /* amber-800 */

  --gradient-emerald-1:   linear-gradient(135deg, #047857 0%, #064e3b 100%);
  --gradient-hero:        linear-gradient(135deg, #ecfdf5 0%, #ffffff 50%, #f0fdfa 100%);
  --gradient-navbar:      var(--gradient-emerald-1);
}

/* ─── emerald 다크 보정 ────────────────────────────────────────────────────── */
/* dark-mode.md §3 의 정확한 hex 값 그대로 */

[data-theme="dark"][data-brand="neisme"] {
  /* primary — light 의 emerald-700 → 다크에서 emerald-400 으로 한 단계 밝힘 */
  --color-primary:        #34d399;  /* emerald-400 */
  --color-primary-hover:  #6ee7b7;  /* emerald-300 — 다크에서 더 밝게 */
  --color-primary-active: #a7f3d0;  /* emerald-200 */
  --color-primary-fg:     #022c22;  /* emerald-950 — primary 버튼 위 글자 (8.7:1 vs #34d399) */
  --color-primary-soft:   #064e3b;  /* emerald-900 — 다크 위 soft 배경 */
  --color-primary-soft-fg:#a7f3d0;  /* emerald-200 — soft 위 글자 (5.6:1 vs #064e3b) */

  /* accent — amber 다크 보정 */
  --color-accent:         #fbbf24;  /* amber-400 — 다크에서 한 단계 밝힘 */
  --color-accent-hover:   #fcd34d;  /* amber-300 */
  --color-accent-soft:    #2a1f0a;  /* dark amber-soft */
  --color-accent-soft-fg: #fde68a;  /* amber-200 — soft 위 글자 (8.5:1 vs #2a1f0a) */

  /* hero / nav 그라데이션 */
  --gradient-emerald-1:   linear-gradient(135deg, #064e3b 0%, #022c22 100%);
  --gradient-hero:        linear-gradient(135deg, #064e3b 0%, #022c22 100%);
  --gradient-navbar:      var(--gradient-emerald-1);

  /* focus shadow — emerald hue (vs indigo 기본) */
  --shadow-focus:         0 0 0 3px rgb(52 211 153 / 0.45);
}

/* ─── chrome 글로벌 컴포넌트 ─────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky, 100);
  height: var(--header-height, 64px);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: saturate(1.1) blur(10px);
  -webkit-backdrop-filter: saturate(1.1) blur(10px);
}
.site-header__inner {
  max-width: var(--container-xl, 1280px);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--space-6, 1.5rem);
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);
}
.site-header__hamburger { display: none; }

/* 브랜드 */
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-size: var(--fs-md, 1rem);
  font-weight: var(--fw-semibold, 600);
  color: var(--color-fg);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.site-brand__mark {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm, 4px);
  background: var(--color-primary);
  color: var(--color-primary-fg);
  font-size: var(--fs-sm, 0.875rem);
  font-weight: var(--fw-bold, 700);
  letter-spacing: 0;
  flex-shrink: 0;
}
.site-brand__suffix { color: var(--color-primary); }

/* nav */
.site-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  list-style: none;
  margin: 0; padding: 0;
}
.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  font-size: var(--fs-sm, 0.875rem);
  font-weight: var(--fw-medium, 500);
  color: var(--color-fg-muted);
  text-decoration: none;
  border-radius: var(--radius-md, 6px);
  transition: color var(--duration-fast, 150ms) var(--ease-out, ease),
              background var(--duration-fast, 150ms) var(--ease-out, ease);
}
.site-nav__link:hover { color: var(--color-fg); background: var(--color-surface); }
.site-nav__link[data-active="true"],
.site-nav__link[aria-current="page"] {
  color: var(--color-primary);
  font-weight: var(--fw-semibold, 600);
}
.site-nav__badge {
  display: inline-grid;
  place-items: center;
  padding: 0 var(--space-2, 0.5rem);
  height: 18px;
  font-size: 10px;
  font-weight: var(--fw-semibold, 600);
  background: var(--color-accent-soft);
  color: var(--color-accent-soft-fg);
  border-radius: var(--radius-full, 9999px);
}

/* 우측 actions */
.site-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-left: auto;
}

/* 사용자 메뉴 */
.user-menu { position: relative; }
.user-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
}
.user-menu__avatar {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: var(--radius-full, 9999px);
  color: #fff;
  font-size: var(--fs-sm, 0.875rem);
  font-weight: var(--fw-semibold, 600);
  flex-shrink: 0;
}
.user-menu__name {
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-sm, 0.875rem);
}
.user-menu__caret { color: var(--color-fg-muted); }
.user-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2, 0.5rem));
  min-width: 12rem;
  padding: var(--space-2, 0.5rem);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 6px);
  box-shadow: var(--shadow-md);
  z-index: var(--z-dropdown, 200);
}
.user-menu[data-state="open"] .user-menu__panel { display: block; }
.user-menu__panel[hidden] { display: none; }
.user-menu__item {
  display: block;
  width: 100%;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  font-size: var(--fs-sm, 0.875rem);
  color: var(--color-fg);
  text-decoration: none;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-fast, 150ms) var(--ease-out, ease);
}
.user-menu__item:hover,
.user-menu__item:focus-visible { background: var(--color-surface); }
.user-menu__item--admin {
  color: var(--color-accent-soft-fg);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
}
.user-menu__item--button { width: 100%; }
.user-menu__sep {
  margin: var(--space-1, 0.25rem) 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}

/* ─── 공용 btn 스타일 ────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  font-size: var(--fs-sm, 0.875rem);
  font-weight: var(--fw-semibold, 600);
  font-family: inherit;
  border-radius: var(--radius-md, 6px);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast, 150ms) var(--ease-out, ease),
              border-color var(--duration-fast, 150ms) var(--ease-out, ease),
              color var(--duration-fast, 150ms) var(--ease-out, ease);
  white-space: nowrap;
  user-select: none;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-fg);
  border-color: var(--color-primary);
}
.btn-primary:hover  { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-primary:active { background: var(--color-primary-active); border-color: var(--color-primary-active); }

.btn-ghost {
  background: transparent;
  color: var(--color-fg);
  border-color: transparent;
}
.btn-ghost:hover  { background: var(--color-surface); }
.btn-ghost:active { background: var(--color-border); }

.btn-icon {
  padding: var(--space-2, 0.5rem);
  width: 36px; height: 36px;
  border-radius: var(--radius-md, 6px);
}
.btn-lg {
  padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
  font-size: var(--fs-base, 1rem);
}
.btn-md {
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  font-size: var(--fs-sm, 0.875rem);
}
.btn-sm {
  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  font-size: var(--fs-xs, 0.75rem);
}

/* btn-icon 사이즈 specifier — .btn-md/.btn-sm 의 비대칭 padding 이
   .btn-icon 의 정사각 패딩을 덮어쓰는 cascade 문제 수정.
   icon-fix.md §4 의 정식 스펙(40×40 / 32×32 / 48×48 + padding 0). */
.btn-icon.btn-sm { width: 32px; height: 32px; padding: 0; }
.btn-icon.btn-md { width: 40px; height: 40px; padding: 0; }
.btn-icon.btn-lg { width: 48px; height: 48px; padding: 0; }

/* ─── 스크린리더 전용 ─────────────────────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only:focus {
  position: static;
  width: auto; height: auto;
  margin: 0; clip: auto;
  white-space: normal;
  overflow: visible;
}

/* ─── 모바일 ─────────────────────────────────────────────────────────────── */

@media (max-width: 1023.98px) {
  .site-header { height: var(--header-height-mobile, 56px); }
  .site-header__inner { padding: 0 var(--space-4, 1rem); }
  .site-header__hamburger { display: inline-grid; }
  .site-nav { display: none; }
  .user-menu__name { display: none; }
  .site-actions__signup-cta { display: none; }
}

/* ─── 푸터 ───────────────────────────────────────────────────────────────── */

.site-footer {
  margin-top: var(--space-16, 4rem);
  padding: var(--space-12, 3rem) 0 var(--space-8, 2rem);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  color: var(--color-fg-muted);
}
.site-footer__inner {
  max-width: var(--container-xl, 1280px);
  margin: 0 auto;
  padding: 0 var(--space-6, 1.5rem);
}
.site-footer__brand { margin-bottom: var(--space-8, 2rem); }
.site-brand--footer { color: var(--color-fg); }
.site-footer__tag {
  margin: var(--space-2, 0.5rem) 0 0;
  font-size: var(--fs-sm, 0.875rem);
  color: var(--color-fg-muted);
}
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6, 1.5rem);
}
.site-footer__col > summary {
  list-style: none;
  cursor: default;
  font-size: var(--fs-sm, 0.875rem);
  font-weight: var(--fw-semibold, 600);
  color: var(--color-fg);
  margin-bottom: var(--space-3, 0.75rem);
}
.site-footer__col > summary::-webkit-details-marker { display: none; }
.site-footer__col-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: var(--space-2, 0.5rem);
}
.site-footer__col-list a {
  font-size: var(--fs-sm, 0.875rem);
  color: var(--color-fg-muted);
  text-decoration: none;
}
.site-footer__col-list a:hover,
.site-footer__col-list a:focus-visible {
  color: var(--color-fg);
  text-decoration: underline;
}
.site-footer__sep {
  margin: var(--space-8, 2rem) 0 var(--space-4, 1rem);
  border: 0; border-top: 1px solid var(--color-border);
}
.site-footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4, 1rem); flex-wrap: wrap;
}
.site-footer__copy {
  font-size: var(--fs-xs, 0.75rem);
  color: var(--color-fg-subtle);
}
.site-footer__bottom-actions { display: flex; gap: var(--space-2, 0.5rem); }

@media (max-width: 767.98px) {
  .site-footer { padding: var(--space-8, 2rem) 0 var(--space-6, 1.5rem); }
  .site-footer__inner { padding: 0 var(--space-4, 1rem); }
  .site-footer__cols { grid-template-columns: 1fr; gap: var(--space-2, 0.5rem); }
  .site-footer__col {
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3, 0.75rem) 0;
  }
  .site-footer__col[open] > summary { color: var(--color-primary); }
  .site-footer__col > summary {
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-2, 0.5rem);
    min-height: 44px;
  }
  .site-footer__col > summary::after {
    content: "▾";
    color: var(--color-fg-subtle);
    font-size: var(--fs-sm, 0.875rem);
    transition: transform var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .site-footer__col[open] > summary::after { transform: rotate(180deg); }
}

/* ─── prefers-reduced-motion ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── site-theme-toggle 가시성 보강 (2026-05-08 재보강) ──────────────────────
   사용자 보고(2회): #theme-toggle 이 헤더에서 잘 안 보임.
   1차(05-05) 보강의 surface 배경만으로는 부족 → border-strong + 명시적
   color 지정 + SVG stroke-width 강화로 헤더에서도 확실히 눈에 띄게 함. */

.site-theme-toggle {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong, var(--color-border));
  color: var(--color-fg);
  box-shadow: 0 1px 2px rgb(0 0 0 / .06);
  transition: background var(--duration-fast, 150ms) var(--ease-out, ease),
              border-color var(--duration-fast, 150ms) var(--ease-out, ease),
              color var(--duration-fast, 150ms) var(--ease-out, ease),
              transform var(--duration-fast, 150ms) var(--ease-out, ease);
}
.site-theme-toggle:hover {
  background: var(--color-surface-2, var(--color-border));
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-1px);
}
.site-theme-toggle:active {
  transform: translateY(0);
}
.site-theme-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.site-theme-toggle svg {
  display: block;
  width: 20px;
  height: 20px;
}
/* hidden 속성이 CSS specificity 로 덮이는 문제 수정.
   chrome.js 가 moonIcon.hidden / sunIcon.hidden 으로 토글하므로
   [hidden] 일 때는 항상 숨겨야 한다 (라이트=달, 다크=해 한 개만 노출). */
.site-theme-toggle svg[hidden] {
  display: none;
}

[data-theme="dark"] .site-theme-toggle {
  background: var(--color-surface-2, var(--color-surface));
  border-color: var(--color-border-strong, var(--color-border));
  color: var(--color-fg);
}
[data-theme="dark"] .site-theme-toggle:hover {
  background: var(--color-border);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ─────────────────────────────────────────────────────────────────
 * 모바일 햄버거 슬라이드 패널 (#site-nav-mobile)
 * 시안: /var/services/web/.design/neisme/2026/chrome/site-nav-mobile.md §5
 * Phase 9 #2
 * ───────────────────────────────────────────────────────────────── */

/* 5.1 백드롭 */
.site-nav--mobile__backdrop {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.4);
  z-index: var(--z-overlay, 1000);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base, 200ms) var(--ease-out);
}
.site-nav--mobile__backdrop[data-state="open"] {
  opacity: 1;
  pointer-events: auto;
}
.site-nav--mobile__backdrop[hidden] {
  /* hidden 속성과 transition 충돌 방지 — JS 가 open 직전 hidden 제거 */
  display: none;
}

/* 5.2 패널 본체 + 슬라이드 전환 */
.site-nav--mobile {
  position: fixed;
  inset: 0 auto 0 0;          /* 좌측 (L9-M1) */
  width: min(85vw, 320px);    /* L9-M2 */
  background: var(--color-bg);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-modal, 1100);
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  gap: var(--space-3);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-100%);
  transition: transform var(--duration-base, 200ms) var(--ease-out);
}
.site-nav--mobile[data-state="open"] {
  transform: translateX(0);
}
.site-nav--mobile[hidden] {
  display: none;
}

/* 5.3 닫기 버튼 영역 */
.site-nav--mobile__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.site-nav--mobile__close {
  /* btn-ghost btn-icon btn-md 의 표준 (design.css 에 이미 존재) */
}
.site-nav--mobile__title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-fg);
}

/* 5.4 사용자 영역 */
.site-nav--mobile__user {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}
.site-nav--mobile__avatar {
  grid-row: 1 / 3;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  color: var(--color-on-dark);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}
.site-nav--mobile__name {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-nav--mobile__workplace {
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 5.5 메뉴 항목 */
.site-nav--mobile__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.site-nav--mobile__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  font-size: var(--fs-base);
  color: var(--color-fg);
  text-decoration: none;
  border-radius: var(--radius-sm);
  min-height: 44px;           /* 터치 타겟 (Apple HIG / Material) */
  transition: background var(--duration-fast, 150ms) var(--ease-out);
}
.site-nav--mobile__link:hover,
.site-nav--mobile__link:focus-visible {
  background: var(--color-surface);
}
.site-nav--mobile__link[aria-current="page"] {
  background: var(--color-primary-soft);
  color: var(--color-primary-soft-fg);
  font-weight: var(--fw-semibold);
}
.site-nav--mobile__link--admin {
  color: var(--color-accent-soft-fg);
}
.site-nav--mobile__chevron {
  margin-left: auto;
  color: var(--color-fg-subtle);
  font-size: var(--fs-md);
}

/* 5.6 구분선 */
.site-nav--mobile__sep {
  margin: var(--space-3) 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}

/* 5.7 다크모드 스위치 */
.site-nav--mobile__theme {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  font-size: var(--fs-base);
  color: var(--color-fg);
  cursor: pointer;
  border-radius: var(--radius-sm);
  user-select: none;
  min-height: 44px;
}
.site-nav--mobile__theme:hover {
  background: var(--color-surface);
}
.site-nav--mobile__theme-icon {
  color: var(--color-fg-muted);
  display: inline-grid;
  place-items: center;
}
.site-nav--mobile__theme-label {
  /* 1fr 컬럼 — 좌우 채우기 */
}
/* native checkbox 를 toggle 스위치로 시각화 */
.site-nav--mobile__theme-input {
  appearance: none;
  -webkit-appearance: none;
  width: 40px;
  height: 22px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  position: relative;
  cursor: pointer;
  transition: background var(--duration-fast, 150ms) var(--ease-out);
  flex-shrink: 0;
}
.site-nav--mobile__theme-input::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast, 150ms) var(--ease-out);
}
.site-nav--mobile__theme-input:checked {
  background: var(--color-primary);
}
.site-nav--mobile__theme-input:checked::before {
  transform: translateX(18px);
}
.site-nav--mobile__theme-input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* 5.8 액션 영역 (로그인/로그아웃) */
.site-nav--mobile__actions {
  margin-top: auto;             /* flex column → 하단 고정 */
  padding-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.site-nav--mobile__action-btn {
  width: 100%;
  justify-content: center;
}
.site-nav--mobile__actions form {
  margin: 0;
  width: 100%;
}

/* 5.9 body 스크롤 락 (L9-M4) */
body[data-mobile-nav="open"] {
  overflow: hidden;
}

/* 5.10 반응형 — 데스크탑에서 강제 hide */
@media (min-width: 1024px) {
  .site-nav--mobile,
  .site-nav--mobile__backdrop {
    display: none !important;
    /* JS 가 resize 시 자동 close 도 함께 (L9-M9) */
  }
}