/* ═══════════════════════════════════════════════════════════
   ChipCalc — shared.css  (모든 페이지 공통)
═══════════════════════════════════════════════════════════ */

/* ── CSS 변수 ── */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --mono: "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
  --bg: #f2f2f7; --surface: #fff; --s2: #f9f9fb; --s3: #f2f2f7;
  --border: rgba(0,0,0,0.09); --border2: rgba(0,0,0,0.15);
  --l1: #1c1c1e; --l2: #3c3c43; --l3: #6b6b70; --l4: #aeaeb2;
  --blue: #0071e3; --blue-s: #d7eaff; --blue-t: #f0f6ff;
  --green: #30b94a; --green-s: #d4f0db; --green-t: #f0fbf3;
  --orange: #f97316; --orange-s: #fed7aa; --orange-t: #fff7ed;
  --red: #e4362a; --red-s: #fac5c1; --red-t: #fff1f0;
  --purple: #6e44cc; --purple-s: #d4c8f5; --purple-t: #f3f0ff;
  --yellow: #c8960c; --yellow-s: #fde68a; --yellow-t: #fffbeb;
  --r: 8px; --r2: 12px; --r3: 16px;
  --sh: 0 2px 8px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05);
  --sh2: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
  --topbar-bg: rgba(255,255,255,0.92);
  --topbar-h: 48px;
}

body.dark {
  --bg: #1c1c1e; --surface: #2c2c2e; --s2: #3a3a3c; --s3: #2c2c2e;
  --border: rgba(255,255,255,0.10); --border2: rgba(255,255,255,0.18);
  --l1: #f2f2f7; --l2: #ebebf5; --l3: #aeaeb2; --l4: #636366;
  --blue-t: rgba(0,113,227,0.18); --blue-s: rgba(0,113,227,0.35);
  --green-t: rgba(48,185,74,0.15); --green-s: rgba(48,185,74,0.35);
  --orange-t: rgba(249,115,22,0.15); --orange-s: rgba(249,115,22,0.35);
  --red-t: rgba(228,54,42,0.15); --red-s: rgba(228,54,42,0.35);
  --purple-t: rgba(110,68,204,0.18); --purple-s: rgba(110,68,204,0.35);
  --yellow: #e6a800; --yellow-t: rgba(200,150,12,0.18); --yellow-s: rgba(200,150,12,0.35);
  --sh: 0 2px 8px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.18);
  --sh2: 0 4px 16px rgba(0,0,0,0.30), 0 2px 6px rgba(0,0,0,0.20);
  --topbar-bg: rgba(28,28,30,0.92);
}

html { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--l1); font-family: var(--font);
  font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  min-height: 100vh; overflow-x: hidden;
}

/* ══════════════════════════════════════
   TOPBAR — grid 3열 구조
   left(1fr) | nav-center(auto) | right(1fr)
   → nav-center가 항상 정확히 중앙에 위치
══════════════════════════════════════ */
.topbar {
  background: var(--topbar-bg);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 200;
  height: var(--topbar-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 20px;
  gap: 8px;
}

/* 좌측 */
.topbar-l {
  display: flex; align-items: center; gap: 10px;
  justify-self: start;
}
.app-icon {
  width: 28px; height: 28px;
  background: linear-gradient(145deg, #0071e3, #0051a8);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,113,227,0.35); flex-shrink: 0; text-decoration: none;
}
.app-name { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; color: var(--l1); text-decoration: none; }
.app-sub  { font-size: 10px; color: var(--l3); margin-left: 3px; }

/* 중앙 nav — 항상 그리드 2번째 열에서 auto 크기 */
.nav-center {
  display: flex; align-items: center; gap: 2px;
  justify-self: center;
}

/* ── 기본 nav 링크 ── */
.nav-link {
  height: 30px; padding: 0 11px; border-radius: 6px;
  font-size: 12px; font-weight: 500; color: var(--l2);
  text-decoration: none; display: flex; align-items: center; gap: 4px;
  transition: all 0.15s; white-space: nowrap; border: none; background: transparent;
  cursor: pointer; font-family: var(--font);
}
.nav-link:hover  { background: var(--s3); color: var(--l1); }
.nav-link.active { background: var(--blue-t); color: var(--blue); font-weight: 600; }

/* ── 리소스 드롭다운 ── */
.nav-resources {
  position: relative; display: flex; align-items: center;
}
.nav-resources-btn {
  height: 30px; padding: 0 11px; border-radius: 6px;
  font-size: 12px; font-weight: 500; color: var(--l2);
  display: flex; align-items: center; gap: 4px;
  transition: all 0.15s; white-space: nowrap;
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font);
  user-select: none;
}
.nav-resources-btn:hover { background: var(--s3); color: var(--l1); }
.nav-resources-btn.active { background: var(--blue-t); color: var(--blue); font-weight: 600; }
.nav-resources-btn .caret { font-size: 9px; opacity: 0.6; margin-left: 1px; transition: transform 0.15s; }
.nav-resources:hover .nav-resources-btn .caret { transform: rotate(180deg); }

/* 드롭다운 패널 */
.nav-dropdown {
  position: absolute; top: calc(100% + 5px); left: 50%;
  transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r2); box-shadow: var(--sh2);
  min-width: 158px; z-index: 300;
  padding: 4px;
  opacity: 0; pointer-events: none;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity 0.15s, transform 0.15s;
}
.nav-dropdown::before {
  content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px; background: var(--surface);
  border-left: 1px solid var(--border); border-top: 1px solid var(--border);
  transform: translateX(-50%) rotate(45deg); border-radius: 2px;
}
.nav-resources:hover .nav-dropdown {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
  height: 34px; padding: 0 12px; border-radius: 6px;
  font-size: 12px; font-weight: 500; color: var(--l2);
  text-decoration: none; display: flex; align-items: center; gap: 7px;
  transition: background 0.12s, color 0.12s; white-space: nowrap;
}
.nav-dropdown a:hover { background: var(--s3); color: var(--l1); }
.nav-dropdown a.active { background: var(--blue-t); color: var(--blue); font-weight: 600; }
.nav-dropdown-divider { height: 1px; background: var(--border); margin: 3px 4px; }

/* 우측 */
.topbar-r {
  display: flex; align-items: center; gap: 6px;
  justify-self: end;
}
.ver { font-family: var(--mono); font-size: 10px; color: var(--l3); border: 1px solid var(--border); border-radius: 20px; padding: 2px 8px; }

/* ── 햄버거 (모바일 전용) ── */
.nav-hamburger {
  display: none; width: 32px; height: 32px; border: none; border-radius: 8px;
  background: transparent; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 0; flex-shrink: 0;
}
.nav-hamburger span { display: block; width: 18px; height: 2px; background: var(--l2); border-radius: 2px; transition: all 0.2s; }
.nav-hamburger:hover { background: var(--s3); }
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── 모바일 드로어 ── */
.nav-drawer {
  display: none; position: fixed;
  top: var(--topbar-h); left: 0; right: 0;
  background: var(--surface); border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 199; padding: 8px 12px 12px;
  flex-direction: column; gap: 2px;
}
.nav-drawer.open { display: flex; }
.nav-drawer .nav-link { height: 42px; padding: 0 14px; border-radius: 8px; font-size: 13px; width: 100%; }
/* 드로어 내 리소스 섹션 */
.nav-drawer-section {
  padding: 6px 0 3px; margin-top: 2px;
  border-top: 1px solid var(--border);
}
.nav-drawer-section-label {
  font-size: 10px; font-weight: 600; color: var(--l4);
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0 14px 4px;
}
/* 드로어 저장/기록 액션 */
.nav-drawer-actions { display: none; gap: 8px; padding: 8px 0 4px; border-top: 1px solid var(--border); margin-top: 4px; }
.nav-drawer-actions.visible { display: flex; }
.drawer-action-btn {
  flex: 1; height: 38px; border-radius: 8px; border: 1px solid var(--border2);
  background: var(--s3); color: var(--l2); font-family: var(--font);
  font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.drawer-action-btn:hover { background: var(--blue-t); color: var(--blue); border-color: var(--blue-s); }

/* ══════════════════════════════════════
   AUTH 버튼
══════════════════════════════════════ */
.auth-tip-wrap { position: relative; display: inline-flex; }
.auth-icon { flex-shrink: 0; }
.auth-text { margin-left: 2px; }

.auth-btn {
  height: 28px; padding: 0 11px; border: none; border-radius: 6px;
  font-family: var(--font); font-size: 11px; font-weight: 600;
  cursor: pointer; background: transparent; color: var(--l2);
  transition: all 0.15s; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 2px;
}
.auth-btn:hover        { background: var(--blue-t); color: var(--blue); }
.auth-btn.logged       { color: var(--green); }
.auth-btn.logged:hover { background: var(--green-t); }

.save-btn {
  height: 28px; padding: 0 11px; border: none; border-radius: 6px;
  font-family: var(--font); font-size: 11px; font-weight: 600;
  cursor: pointer; background: var(--green-t); color: var(--green);
  transition: all 0.15s; white-space: nowrap;
  display: none; align-items: center; gap: 4px;
}
.save-btn:hover { background: var(--green-s); }

/* 로그아웃 상태 info 툴팁 */
.auth-tip {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: #1c1c1e; color: #fff; border-radius: var(--r2);
  padding: 13px 15px; width: 240px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  pointer-events: none; opacity: 0; transform: translateY(-4px);
  transition: opacity 0.18s, transform 0.18s; z-index: 300;
  font-size: 11px; line-height: 1.55;
}
.auth-tip::after {
  content: ''; position: absolute; top: -5px; right: 18px;
  width: 10px; height: 10px; background: #1c1c1e;
  transform: rotate(45deg); border-radius: 2px;
}
.auth-tip-wrap:hover .auth-tip { opacity: 1; transform: translateY(0); }
.auth-tip-title { font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.auth-tip-row { display: flex; align-items: flex-start; gap: 7px; margin-bottom: 5px; color: rgba(255,255,255,0.75); }
.auth-tip-row:last-child { margin-bottom: 0; }
.ati { flex-shrink: 0; font-size: 10px; color: var(--green); }

/* ── 모드 / 언어 토글 ── */
.mode-toggle, .lang-toggle {
  display: flex; align-items: center;
  background: var(--s3); border: 1px solid var(--border2); border-radius: 20px; padding: 2px;
}
.mode-btn, .lang-btn {
  height: 22px; padding: 0 9px; border: none; border-radius: 18px;
  font-family: var(--font); font-size: 10px; font-weight: 600;
  cursor: pointer; background: transparent; color: var(--l3);
  transition: all 0.15s; white-space: nowrap; letter-spacing: 0.03em;
}
.mode-btn.active { background: var(--surface); color: var(--l1); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.lang-btn.active { background: var(--blue); color: #fff; box-shadow: 0 1px 3px rgba(0,113,227,0.3); }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
footer {
  text-align: center; padding: 28px 20px; font-size: 11.5px;
  color: var(--l4); border-top: 1px solid var(--border); background: var(--surface);
}
footer a { color: var(--blue); text-decoration: none; }
footer a:hover { text-decoration: underline; }
.footer-links { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }

/* ══════════════════════════════════════
   모바일 (≤ 768px)
══════════════════════════════════════ */
@media (max-width: 768px) {
  /* topbar: grid → flex로 전환 (모바일은 공간 부족) */
  .topbar {
    display: flex; justify-content: space-between;
  }

  /* 네비게이션 숨기고 햄버거 표시 */
  .nav-center    { display: none; }
  .nav-hamburger { display: flex; }

  /* 숨김 항목 */
  .ver        { display: none; }
  .lang-toggle { display: none; }

  /* app-name · app-sub 숨김 (IC 아이콘만) */
  .app-name { display: none; }
  .app-sub  { display: none; }

  /* auth 버튼: 원형 아이콘만 */
  .auth-text { display: none; }
  .auth-btn {
    width: 34px; height: 34px; padding: 0; border-radius: 50%;
    font-size: 16px; justify-content: center;
    background: var(--s3); border: 1px solid var(--border);
  }
  .auth-btn:hover        { background: var(--blue-t); border-color: var(--blue-s); }
  .auth-btn.logged       { background: var(--green-t); border-color: var(--green-s); }
  .auth-btn.logged:hover { background: var(--green-s); }

  /* 저장/기록: 원형 아이콘만 */
  .save-btn, #histBtn {
    width: 34px !important; height: 34px !important;
    padding: 0 !important; border-radius: 50% !important;
    font-size: 14px !important; justify-content: center !important;
    background: var(--s3) !important; border: 1px solid var(--border) !important;
    color: var(--l2) !important;
  }

  .auth-tip { width: 210px; }

  footer { padding: 20px 16px; }
  .footer-links { gap: 12px; font-size: 11px; }
}