/* Blunux.com — 디자인 파일(Blunux.dc.html)의 nocturne 토큰을 실제 CSS로 옮긴 것.
 *
 * 원본은 Claude Design 의 디자인 시스템 스타일시트를 참조하고 있었는데
 * (`_ds/nocturne-.../styles.css`) 그 파일은 공유 링크 밖으로 나오지 않습니다.
 * 그래서 원본이 실제로 쓴 토큰만 골라 여기서 정의합니다:
 *   --color-text, --color-divider, --color-accent, --color-accent-300,
 *   --color-accent-700, --font-body, .btn/.btn-primary/.btn-secondary/
 *   .btn-ghost, .tag/.tag-outline/.tag-neutral, .table, .lighten
 *
 * 강조색은 nocturne 기본값인 보라(#9184d9)가 아니라 Blunux 파랑입니다.
 * 원본 안에서도 눈에 보이는 요소(히어로 글로우, 로고 글로우)는 전부
 * rgba(78,140,255,…) 파랑으로 직접 적어 두고, 보라는 버튼·칩 같은
 * 컨트롤에만 남아 있었습니다 — 손대지 않은 디자인 시스템 기본값으로 보입니다.
 * 로고, 배경화면, 슬라이드, 부팅 스플래시, fastfetch 가 전부 #418CEF 계열이라
 * 파랑으로 통일했습니다. 보라로 되돌리려면 아래 세 줄만 바꾸면 됩니다.
 */

:root {
  --color-bg:          #0e1018;
  --color-surface:     #14161f;
  --color-surface-2:   #13151f;
  --color-surface-3:   #10121b;
  --color-well:        #0a0c13;

  --color-text:        #e9e9ed;
  --color-divider:     #242734;

  /* Blunux 팔레트 — logo.svg 에서 그대로 가져온 값 */
  --color-accent:      #418cef;
  --color-accent-300:  #82c0ff;
  --color-accent-700:  #2b5aa8;
  --accent-rgb:        65, 140, 239;

  --font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic",
               Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono",
               "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* 한국어는 어절 단위로 끊어야 읽힙니다. 기본값이면 브라우저가 글자 사이
   * 아무 데서나 줄을 바꿔서 "사용자를" 이 "사 / 용자를" 로 갈라집니다.
   * 라틴 문자에는 영향이 없습니다 — 원래 단어 단위로 끊기니까요.
   * 체크섬처럼 띄어쓰기가 없는 긴 문자열은 그 자리에서 overflow-wrap 으로
   * 따로 풀어 줍니다. */
  word-break: keep-all;
}

img { max-width: 100%; }

/* 로고 PNG 는 검은 배경 위에 얹히도록 만들어져 있어서, 어두운 판 위에서
 * 가장자리가 사각형으로 보입니다. screen 합성이 그 검정을 지웁니다. */
.lighten { mix-blend-mode: screen; }

a { color: inherit; }
a:hover { color: var(--color-accent-300); }

summary::-webkit-details-marker { display: none; }
summary { list-style: none; }

@keyframes bxGlow {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: .9;  transform: scale(1.06); }
}

/* ── 버튼 ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn svg { flex: none; }

.btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #06101f;
  font-weight: 500;
}
.btn-primary:hover { background: var(--color-accent-300); border-color: var(--color-accent-300); color: #06101f; }

.btn-secondary {
  background: transparent;
  border-color: var(--color-divider);
  color: rgba(233, 233, 237, .82);
}
.btn-secondary:hover { border-color: rgba(var(--accent-rgb), .55); color: var(--color-accent-300); }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-accent-300);
  padding: 6px 0;
}
.btn-ghost:hover { color: var(--color-accent); }

/* ── 태그 ─────────────────────────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 11.5px;
  letter-spacing: .04em;
  line-height: 1.4;
  white-space: nowrap;
}
.tag-outline { border: 1px solid rgba(var(--accent-rgb), .5); color: var(--color-accent-300); background: rgba(var(--accent-rgb), .1); }
.tag-neutral { border: 1px solid var(--color-divider); color: rgba(233, 233, 237, .55); }

/* ── 표 ───────────────────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table tr { border-bottom: 1px solid var(--color-divider); }
.table tr:last-child { border-bottom: 0; }

/* ── 링크 목록 ────────────────────────────────────────────────────────── */
.linklist a { color: rgba(233, 233, 237, .72); text-decoration: none; transition: color .18s ease; }
.linklist a:hover { color: var(--color-accent-300); }

.navlink { text-decoration: none; color: rgba(233, 233, 237, .72); transition: color .18s ease; }
.navlink:hover, .navlink[aria-current="page"] { color: var(--color-accent); }

/* ── 카드 hover (원본의 style-hover 속성을 대체) ──────────────────────── */
.card-hover { transition: border-color .18s ease, background .18s ease; }
.card-hover:hover { border-color: rgba(var(--accent-rgb), .5); background: #171a26; }

details > summary { transition: color .18s ease; }
details > summary:hover { color: var(--color-accent-300); }
details[open] > summary .ico-plus { transform: rotate(45deg); }
.ico-plus { transition: transform .2s ease; }

/* ── 등장 애니메이션 ─────────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
}
[data-reveal].bx-in { opacity: 1; transform: none; }

/* ── 반응형 ───────────────────────────────────────────────────────────── */
/* 원본은 1440px 미리보기 폭 하나만 상정하고 grid-template-columns 를
 * 인라인으로 박아 두었습니다. 실제 사이트는 휴대폰에서도 열리므로,
 * 두 칸짜리 그리드를 좁은 화면에서 한 칸으로 접습니다. */
@media (max-width: 900px) {
  .split          { grid-template-columns: 1fr !important; gap: 32px !important; }
  .split > .split-spacer { display: none; }
  .pad            { padding-left: 22px !important; padding-right: 22px !important; }
  .hero           { padding-top: 56px !important; padding-bottom: 64px !important; }
  .hero-art       { min-height: 260px !important; order: -1; }
  .foot-grid      { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hist-row       { grid-template-columns: 92px 1fr !important; gap: 16px !important; }
  .builder-grid   { grid-template-columns: 1fr !important; }
  .builder-out    { position: static !important; }
}

@media (max-width: 720px) {
  .nav-links { display: none !important; }
  .nav-menu-btn { display: inline-flex !important; }
  .nav-open .nav-links {
    display: flex !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0 !important;
    padding: 8px 22px 18px;
    background: rgba(14, 16, 24, .97);
    border-bottom: 1px solid var(--color-divider);
  }
  .nav-open .nav-links > a { padding: 11px 0; width: 100%; }
}

@media (min-width: 721px) {
  .nav-menu-btn { display: none !important; }
}