/* =============================================
   6 STREET ROASTERY — main.css
   전체 공통 스타일
   ============================================= */

/* ── RESET & BASE ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; font-family: 'Barlow', sans-serif; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }

/* ── LAYOUT SHELL ── */
#app { display: flex; height: 100vh; overflow: hidden; }

/* ── LEFT NAV ── */
#left-nav {
  width: 200px; flex-shrink: 0;
  display: flex; flex-direction: column;
  padding: 1.5rem 0; z-index: 200; position: relative;
}
#left-nav.dark { color: #e8dfd0; background: transparent; }
#left-nav.light { color: #1a1a1a; background: transparent; }

.nav-logo-box {
  width: 52px; height: 52px;
  border: none; background: none;
  display: flex; align-items: center; justify-content: center;
  margin: 0 1.5rem 2rem;
  cursor: pointer; flex-shrink: 0;
}
.nav-logo-box img { width: 100%; height: 100%; object-fit: contain; }

.nav-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.55rem 1.5rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; cursor: pointer; transition: opacity .15s;
}
.nav-item:hover { opacity: 0.6; }
.nav-item .arrow { font-size: 0.65rem; transition: transform .2s; }
.nav-item.open .arrow { transform: rotate(180deg); }

.nav-sub { overflow: hidden; max-height: 0; transition: max-height .25s ease; }
.nav-sub.open { max-height: 200px; }
.nav-sub-item {
  display: block; padding: 0.4rem 1.5rem 0.4rem 2.2rem;
  font-size: 0.68rem; font-weight: 400; letter-spacing: 0.1em;
  text-transform: uppercase; cursor: pointer; transition: opacity .15s;
}
.nav-sub-item:hover { opacity: 0.5; }
.nav-sub-item.active { font-weight: 600; }

/* ── TOP-RIGHT ICONS ── */
#top-icons {
  position: fixed; top: 1.5rem; right: 1.75rem;
  display: flex; gap: 1.25rem; align-items: center; z-index: 300;
}
#top-icons button, #top-icons a {
  background: none; border: none;
  font-size: 1.1rem; cursor: pointer; color: inherit; transition: opacity .15s;
}
#top-icons button:hover, #top-icons a:hover { opacity: 0.5; }
.cart-count {
  font-size: 0.65rem; font-weight: 600;
  background: #1a1a1a; color: #fff;
  border-radius: 50%; width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  position: absolute; top: -5px; right: -5px;
}

/* ── CONTENT AREA ── */
#content { flex: 1; overflow-y: auto; position: relative; }

/* ── TOAST ── */
.toast {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 999;
  background: #2d4a2d; color: #f5edcf;
  padding: 0.8rem 1.5rem;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px); transition: all .3s; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }