/* css/base.css  —  디자인 토큰(:root) · 레이아웃 · 뷰 탭 · 플로팅 버튼 · 공통 버튼
   로드 순서 1/5: 캐스케이드(나중 규칙이 이긴다)가 원래 순서에 의존하므로 index.html 의 <link> 순서를 바꾸지 않는다. */

/* ── Design Tokens & Font Stack ── */
:root {
  --bg:       #f0efeb;
  --wall:     #e6e4de;
  --white:    #ffffff;
  --surface:  #eceae5;
  --panel:    #e4e2dc;
  --border:   #d4d2cb;
  --border2:  #b8b5ac;
  --text:     #1D2F2F;
  --muted:    #8a8880;
  --dim:      #bbb8b0;
  --accent:   #1D2F2F;
  --accent2:  #2d4a4a;
  --red:      #E75656;
  --joint-c:  #E75656;
  --yellow:   #F4E3A1;
  --sub:      #E9D8A0;
  --font: 'Apple SD Gothic Neo', sans-serif;   /* v39: 홈페이지 본문 한글 글꼴(--font-kr)과 같다 — 외부 글꼴(Noto Sans KR) 제거 */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 11px;
  overflow: hidden; -webkit-font-smoothing: antialiased;
}

/* ── Layout ── */
#app {
  display: grid;
  grid-template-columns: 244px 1fr 344px;
  grid-template-rows: 1fr;
  height: 100vh;
}

/* ── Floating View Tabs (가운데 상단) ── */
#float-view {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  z-index: 200;
}

/* ── Floating Action Buttons (가운데 하단) ── */
#float-actions {
  position: fixed;
  bottom: 52px;
  left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  z-index: 200;
}

/* Wall tabs (v35 코너) — 뷰 탭 아래, 옆 벽이 있을 때만 */
#wall-tabs {
  position: fixed;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  z-index: 200;
}
.wtab {
  font-family: var(--font);
  font-size: 11px; letter-spacing: .08em;
  padding: 7px 16px; cursor: pointer; transition: background .12s, color .12s;
  border: none; border-right: 1px solid var(--border);
  background: transparent; color: var(--muted);
  white-space: nowrap;
}
.wtab:last-child { border-right: none; }
.wtab.on { background: var(--accent); color: #fff; }
.wtab:not(.on):hover { background: var(--surface); color: var(--text); }

/* View tabs — segmented control */
.vtab {
  font-family: var(--font);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  padding: 9px 20px; cursor: pointer; transition: background .12s, color .12s;
  border: none; border-right: 1px solid var(--border);
  background: transparent; color: var(--muted);
  white-space: nowrap;
}
.vtab:last-child { border-right: none; }
.vtab.on  { background: var(--accent); color: #fff; }
.vtab:not(.on):hover { background: var(--surface); color: var(--text); }

/* Buttons */
.btn {
  font-family: var(--font);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 16px; cursor: pointer; transition: all .15s;
  border: 1px solid var(--border2); background: transparent; color: var(--muted);
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.btn-primary:hover { background: var(--accent2); border-color: var(--accent2); }
.btn-sm { padding: 6px 12px; font-size: 11px; }