/* ============================================================
   kb — 빈티지 페이퍼 70s 디자인 시스템 (공통 토큰 & 기본 요소)
   크림 종이 · 잉크 · 세피아/머스타드/틸/페이드레드 · 명조 세리프 · 종이결
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,400&family=Courier+Prime:wght@400;700&display=swap');

:root {
  /* 종이 계층 */
  --bg:        #f4ecd8;   /* 크림 종이 */
  --bg-elev:   #efe5cd;
  --bg-card:   #fbf6e8;   /* 카드 = 살짝 밝은 종이 */
  --bg-card-2: #f0e7cf;
  --border:    #d8c8a8;   /* 옅은 괘선 */
  --border-hi: #b8a47e;
  --rule:      #2b2620;   /* 강한 잉크 괘선 */

  /* 잉크 텍스트 */
  --text:      #2b2620;   /* 따뜻한 먹색 */
  --text-dim:  #6b5d4f;
  --text-mute: #9c8e79;

  /* 레트로 팔레트 */
  --sepia:     #b5651d;
  --mustard:   #d8a531;
  --teal:      #3a7d7b;
  --faded-red: #c1432e;
  --olive:     #7a7d3a;

  /* 콘텐츠 타입 컬러 (캔버스가 getComputedStyle 로 읽으므로 직접 hex) */
  --type-worklog:   #b5651d;
  --type-learning:  #3a7d7b;
  --type-book:      #d8a531;
  --type-interview: #c1432e;
  --type-story:     #8a5a83;
  --type-sysdesign: #3f6b8a;

  --accent: #b5651d;

  /* 캔버스(그래프/레이더)용 — 테마에 따라 잉크 방향이 뒤집힘 */
  --g-edge:      rgba(43, 38, 32, .18);
  --g-edge-hot:  rgba(181, 101, 29, .60);
  --g-ring:      rgba(43, 38, 32, .50);
  --g-label:     #2b2620;
  --g-label-bg:  rgba(244, 236, 216, .85);
  --radar-grid:  rgba(43, 38, 32, .18);
  --radar-label: #6b5d4f;

  /* 그림자: 글로우 대신 인쇄물 느낌의 하드 오프셋 */
  --shadow-card: 3px 3px 0 rgba(43, 38, 32, .10);
  --shadow-pop:  4px 4px 0 rgba(43, 38, 32, .16);

  /* 타이포 */
  --display: "Abril Fatface", Georgia, "Times New Roman", serif;
  --font:    "Merriweather", Georgia, "Times New Roman", serif;
  --mono:    "Courier Prime", "Courier New", ui-monospace, monospace;

  /* 간격 / 반경 */
  --r-sm: 3px;  --r: 4px;  --r-lg: 6px;
  --sp: 16px;
  --maxw: 1100px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .25s ease, color .25s ease;
}
@media (prefers-reduced-motion: reduce) { body { transition: none; } }
/* 종이결 노이즈 (은은하게) */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .05; mix-blend-mode: multiply;
}
body > * { position: relative; z-index: 1; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; color: var(--text); }
::selection { background: rgba(181, 101, 29, .25); }

/* 스크롤바 */
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: var(--bg-elev); }
*::-webkit-scrollbar-thumb { background: var(--border-hi); border: 3px solid var(--bg-elev); border-radius: 0; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-mute); }

/* ---- Topbar ---- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 18px;
  /* full-bg 유지 + 내용은 본문(max-width 중앙)과 같은 좌우 축으로 정렬 →
     모든 페이지(대시보드/탐색/그래프/가이드/노트)에서 헤더 위치 일관 */
  padding: 12px max(clamp(14px, 4vw, 32px), calc((100% - var(--maxw)) / 2));
  background: var(--bg);
  border-bottom: 4px double var(--rule);
}
.brand { display: flex; align-items: baseline; gap: 9px; font-family: var(--display); font-size: 1.5rem; color: var(--text); letter-spacing: .01em; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand .logo { color: var(--sepia); font-size: 1.1rem; }
.topnav { display: flex; gap: 4px; flex-shrink: 0; }
.topnav a {
  padding: 6px 14px; color: var(--text-dim);
  font-size: .9rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--r-sm);
}
.topnav a:hover { color: var(--text); background: var(--bg-card); text-decoration: none; border-color: var(--border); }
.topnav a.active { color: var(--bg); background: var(--rule); border-color: var(--rule); }

/* 테마 토글 */
.theme-toggle {
  margin-left: auto; width: 38px; height: 34px; display: inline-grid; place-content: center;
  background: var(--bg-card); color: var(--text); border: 1px solid var(--border-hi);
  border-radius: var(--r-sm); cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.theme-toggle:hover { border-color: var(--sepia); color: var(--sepia); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
/* 대시보드는 우측 정렬된 검색창 뒤에 둔다. (그래프는 검색을 왼쪽 패널로 옮겨, 다른 탭처럼 기본 우측 정렬 사용) */
.dashboard-page .theme-toggle,
.graph-page .theme-toggle,
.browse-page .theme-toggle { margin-left: 12px; }   /* topbar-auth 가 우측 정렬 흡수 → 토글은 그 옆 */

/* (헤더 정렬은 위 .topbar 기본 padding 에서 모든 페이지 공통으로 처리) */

/* ---- Badges / pills / tags (러버 스탬프 룩) ---- */
.type-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-sm); font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  background: transparent; border: 1.5px solid currentColor;
}
.type-pill[data-type="worklog"]   { color: var(--type-worklog); }
.type-pill[data-type="learning"]  { color: var(--type-learning); }
.type-pill[data-type="book"]      { color: var(--type-book); }
.type-pill[data-type="interview"] { color: var(--type-interview); }
.type-pill[data-type="story"]     { color: var(--type-story); }
.type-pill[data-type="sysdesign"] { color: var(--type-sysdesign); }

.badge {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--r-sm);
  font-size: .76rem; background: var(--bg-card-2); color: var(--text-dim); border: 1px solid var(--border-hi);
  font-family: var(--mono);
}
.badge.sev { color: var(--faded-red); border-color: var(--faded-red); }
.badge.score { color: var(--teal); border-color: var(--teal); }

.tag {
  font-size: .78rem; color: var(--text-dim); padding: 2px 9px; border-radius: var(--r-sm);
  background: var(--bg-card-2); border: 1px solid var(--border-hi); font-family: var(--mono);
}
.tag:hover { text-decoration: none; background: var(--bg-card); border-color: var(--sepia); color: var(--sepia); }
.tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }

.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; border: 1px solid rgba(43,38,32,.35); }
.dot[data-type="worklog"]   { background: var(--type-worklog); }
.dot[data-type="learning"]  { background: var(--type-learning); }
.dot[data-type="book"]      { background: var(--type-book); }
.dot[data-type="interview"] { background: var(--type-interview); }
.dot[data-type="story"]     { background: var(--type-story); }
.dot[data-type="sysdesign"] { background: var(--type-sysdesign); }

.dim { color: var(--text-dim); }
code, pre, .mono { font-family: var(--mono); }

/* 카드/패널 공통 — 인쇄물 카드 */
.panel {
  background: var(--bg-card);
  border: 1px solid var(--border-hi);
  border-radius: var(--r);
  padding: clamp(16px, 2.5vw, 24px);
  box-shadow: var(--shadow-card);
}
.panel h2 { margin: 0 0 14px; font-size: 1.1rem; font-weight: 900; display: flex; align-items: center; gap: 10px; }
.panel h2 .more { margin-left: auto; font-size: .8rem; font-weight: 700; }

.site-footer { text-align: center; padding: 28px; border-top: 4px double var(--rule); margin-top: 40px; font-family: var(--mono); }

@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: 10px; }
}

/* ============================================================
   다크 빈티지 — 에스프레소/가죽 배경 + 양피지 텍스트 (네온 아님)
   ============================================================ */
:root[data-theme="dark"] {
  --bg:        #1c1714;
  --bg-elev:   #221b16;
  --bg-card:   #262019;
  --bg-card-2: #2f2820;
  --border:    #3d3328;
  --border-hi: #564a3a;
  --rule:      #e8dcc0;   /* 강한 선/반전 채움 = 밝은 양피지 */

  --text:      #ece3d0;
  --text-dim:  #b3a48c;
  --text-mute: #82745c;

  --sepia:     #d08a3e;
  --mustard:   #e3b84a;
  --teal:      #5aa9a6;
  --faded-red: #e0613f;
  --olive:     #a3a653;
  --accent:    #d08a3e;

  --type-worklog:   #cf8a44;
  --type-learning:  #5aa9a6;
  --type-book:      #e3b84a;
  --type-interview: #e0613f;
  --type-story:     #b07faa;
  --type-sysdesign: #6b9bc4;

  --g-edge:      rgba(236, 227, 208, .16);
  --g-edge-hot:  rgba(208, 138, 62, .70);
  --g-ring:      rgba(236, 227, 208, .45);
  --g-label:     #ece3d0;
  --g-label-bg:  rgba(28, 23, 20, .85);
  --radar-grid:  rgba(236, 227, 208, .16);
  --radar-label: #b3a48c;

  --shadow-card: 3px 3px 0 rgba(0, 0, 0, .35);
  --shadow-pop:  4px 4px 0 rgba(0, 0, 0, .45);
}
:root[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: .04; }

/* ── 동기화 인증 컨트롤 (kb-sync.js · 노트·대시보드 공용) ── */
.sync-btn { padding: 7px 14px; cursor: pointer; font-family: var(--mono); font-size: .78rem; font-weight: 700;
  color: var(--teal); background: var(--bg-card); border: 1.5px solid var(--teal); border-radius: var(--r-sm); }
.sync-btn:hover { background: var(--bg-card-2); }
.sync-state { font-family: var(--mono); font-size: .76rem; }
.sync-state.on { color: var(--teal); }
.sync-state.local { color: var(--text-mute); }
.sync-link { background: none; border: 0; cursor: pointer; font-family: var(--mono); font-size: .74rem;
  color: var(--text-mute); text-decoration: underline; text-underline-offset: 2px; padding: 2px 4px; }
.sync-link:hover { color: var(--faded-red); }

/* ── 접근 게이트(비로그인=그래프·탐색만, 대시보드·가이드 비공개) — kb-sync.js ── */
.gated-page main { visibility: hidden; }            /* 소유자 확인 전까지 숨김(플래시 방지) */
.gated-page.kb-owner main { visibility: visible; }
.kb-gate-loader { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center;
  background: var(--bg); font-family: var(--mono); font-size: .9rem; color: var(--text-mute); }
.topbar-auth { display: inline-flex; align-items: center; margin-left: auto; }
.topbar-auth:empty { display: none; }