:root{
  --sidebar-w:260px; --bg:#fff; --panel:#f7f7f7; --text:#222;
  --muted:#666; --accent:#2b72f8; --border:#ddd; --tap:48px; --icon:26px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);line-height:1.5}
.app{min-height:100dvh;display:grid;grid-template-rows:auto 1fr}
.topbar{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-bottom:1px solid var(--border);background:#fff;position:sticky;top:0;z-index:50}
.brand{font-weight:700}.spacer{flex:1}
.icon-btn{width:var(--tap);height:var(--tap);display:grid;place-items:center;border:0;background:transparent;cursor:pointer;border-radius:12px;-webkit-tap-highlight-color:rgba(0,0,0,0)}
.icon-btn svg{width:var(--icon);height:var(--icon)}
.icon-btn:hover{background:rgba(0,0,0,.06)}
.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.layout{display:grid;grid-template-columns:1fr}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);background:var(--panel);border-right:1px solid var(--border);transform:translateX(-100%);transition:transform .25s ease;z-index:60;display:flex;flex-direction:column;min-height:100dvh}
.sidebar.open{transform:translateX(0)}
.sb-head{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1rem;border-bottom:1px solid var(--border);font-weight:700}
.nav{padding:.5rem}
.nav a{display:block;padding:.6rem .8rem;border-radius:6px;text-decoration:none;color:var(--text)}
.nav a:hover{background:#eee}
.content{padding:1rem}
.card{background:#fff;border:1px solid var(--border);border-radius:8px;padding:1rem;max-width:800px;margin:0 auto}
@media (min-width:992px){.layout{grid-template-columns:var(--sidebar-w) 1fr}.sidebar{position:sticky;transform:none !important;top:0;min-height:calc(100dvh - 0px)}.topbar .hamburger{display:none}.sidebar .close{display:none}}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .2s;z-index:55}
.scrim.show{opacity:1;pointer-events:auto}

/* ===== 메인 콘텐츠 전용 ===== */
.hero-cta {
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:1rem;
  max-width: 800px;
  margin: 0 auto 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}
.hero-cta h2 {
  font-size:1.05rem; margin:0; font-weight:700;
}
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  height:42px; padding:0 16px; border-radius:10px;
  border:1px solid transparent; text-decoration:none; cursor:pointer;
  font-weight:700;
}
.btn-primary {
  background: var(--accent); color:#fff; border-color: var(--accent);
}
.btn-primary:hover { filter: brightness(0.95); }

/* 포스터 */
.poster-wrap {
  max-width: 1200px;
  margin: 0 auto;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.poster {
  display:block;
  width:100%;
  height:auto;
}

/* 모바일 우선: 이미 충분히 꽉 차게 표시됨 */
/* 데스크톱에서는 콘텐츠 폭이 넓어짐 → poster-wrap의 max-width로 제어 */


/* ===== 토스트 ===== */
.toast{
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  min-width: 240px;
  max-width: 90vw;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(34,34,34,.95);
  color: #fff;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 1000;
  text-align: center;
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* ===== 모달(옵션) ===== */
.modal{ position: fixed; inset: 0; z-index: 1000; }
.modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1000; /* 낮게 */
}
.modal__panel {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 420px);
  background: #fff;
  color: #222;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  z-index: 1001; /* ✅ scrim보다 높게 */
}

.modal__actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; }


/* 버튼 블록형 (거의 꽉 차게) */
/* 홈 메인 CTA 버튼 전용 */
.btn-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 95%;
  max-width: 1200px;
  height: 60px;
  font-size: 1.15rem;
  border-radius: 12px;
  margin: 0 auto;
}
@media (min-width: 992px) {
  .btn-cta {
    height: 70px;
    font-size: 1.25rem;
  }
}




/* 입력 박스 스타일 */
.input-full{
  width: 100%;
  height: 54px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 1rem;
  box-sizing: border-box;
}
.input-full:focus{
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(43,114,248,.2);
}

/* 버튼 100% 차지 */
.btn-block{
  display: block;
  width: 100%;
  text-align: center;
}

/* 로그인/회원가입 전용 큰 버튼 */
.btn-auth {
  display: flex;               /* flex로 전환 */
  align-items: center;         /* 세로 중앙 정렬 */
  justify-content: center;     /* 가로 중앙 정렬 */
  width: 100%;                 /* 카드 폭 꽉 차게 */
  height: 60px;                /* 높이 */
  font-size: 1.15rem;
  border-radius: 12px;
}

@media (min-width: 992px){
  .btn-auth {
    height: 70px;
    font-size: 1.25rem;
  }
}


/* 헤더는 항상 grid (가운데 정렬 안정화) */
.topbar{
  display:grid !important;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
}

/* 브랜드 너비는 auto여야 진짜 중앙에 옴 */
.brand{ justify-self:center; text-align:center; width:auto !important; }

/* PC: 사이드바 만큼 "화면 좌표계"에서 시각적으로 밀기 */
@media (min-width: 992px){
  .topbar{
    /* viewport 기준으로 오른쪽으로 이동 */
    transform: translateX(calc(var(--sidebar-w) + 1px));
    width: calc(100vw - var(--sidebar-w) - 1px); /* 보더 1px까지 보정 */
  }
  .topbar .hamburger{ display:none !important; } /* 중앙에 영향 제거 */
}



/* 헤더는 grid 유지 */
.topbar{
  display:grid !important;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  position: sticky; /* 이미 있음 */
  top: 0;
  z-index: 50;
}

.brand{ justify-self:center; text-align:center; width:auto !important; }

/* PC 구간: 사이드바 제외 폭으로 이동(네가 쓰는 방식 그대로 유지) */
@media (min-width: 992px){
  .topbar{
    transform: translateX(calc(var(--sidebar-w) + 1px));
    width: calc(100vw - var(--sidebar-w) - 1px);
  }
  .topbar .hamburger{ display:none !important; }

  /* 🔧 좌측 ‘브리지’ 패널: 헤더 높이(100%)에 맞춰 배경/라인 이어붙이기 */
  .topbar::before{
    content:"";
    position:absolute;
    top:0;
    left: calc(-1 * (var(--sidebar-w) + 1px)); /* 헤더 좌측 바깥으로 빼서 채움 */
    width: calc(var(--sidebar-w) + 1px);      /* 사이드바 폭 + 보더 두께 */
    height: 100%;                              /* 헤더 높이에 자동 맞춤 */
    background:#fff;                           /* 헤더 배경과 동일 */
    border-bottom:1px solid var(--border);     /* 끊긴 가로선 이어붙이기 */
    pointer-events:none;                       /* 클릭 영향 없음 */
    z-index:-1;                                /* 헤더 내용보다 뒤 */
  }
}

/* grid에선 spacer 불필요 */
.spacer{ display:none !important; }