/* =========================================================
   데모 화면 공용 — 여기에는 "생김새"를 넣지 않습니다.

   ⚠️ 예전에는 base.css 하나에 헤더·카드·버튼·간격을 전부 넣고
     화면마다 --brand 색만 바꿔 썼습니다. 그 결과 10개가
     **색만 다른 같은 사이트**로 보였습니다.
     의뢰인 입장에서는 "이 회사는 한 가지 스타일만 만드는구나"로 읽힙니다.

   그래서 지금은 이 파일에 초기화와 되돌아가기 배지만 남기고,
   글꼴·색·모서리·그림자·레이아웃은 **화면마다 각자 정의**합니다.
   ========================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* 가로 스크롤 방지 — 데모는 어떤 화면에서도 옆으로 밀리면 안 됩니다 */
body { overflow-x: hidden; }

/* 키보드로 이동할 때만 초점 테두리 */
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 되돌아가기 배지 (10개 공통) ---------- */
.nc-demo-badge {
  position: fixed; right: 18px; bottom: 18px; z-index: 9999;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: rgba(11, 27, 51, .92); color: #fff;
  padding: 11px 16px; border-radius: 999px;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55);
  backdrop-filter: blur(10px);
}
.nc-demo-badge b { color: #7FB4FF; font-weight: 800; }
.nc-demo-badge:hover { background: #0b1b33; }

/* 좁은 화면에서는 띄우지 않고 문서 맨 아래에 깔아 둡니다.
   앱 데모는 화면 아래에 탭바가 붙어 있어서, 떠 있으면 탭을 가립니다. */
@media (max-width: 760px) {
  .nc-demo-badge {
    position: static; width: 100%; justify-content: center;
    border-radius: 0; padding: 16px; font-size: 12.5px; box-shadow: none;
  }
}

/* 포트폴리오 상세페이지 안에 끼워 넣어 보여줄 때(iframe)는
   "설명 보기" 배지를 숨깁니다. 액자 안에서 그 링크를 누르면
   액자 안에 포트폴리오 페이지가 열려 이상해집니다.
   부모 페이지(src/components/portfolio/LiveDemo.tsx)가 이 표시를 붙입니다. */
.nc-embed .nc-demo-badge { display: none !important; }