/*
 * 8-bit / NES 스타일 디자인 시스템.
 * 방문자 페이지(index.php, view_post.php, login.php)에서 공용으로 사용.
 */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

/* 한글 픽셀 폰트 — Galmuri 패밀리 (quiple.dev/font/galmuri).
 * 모든 변형(Galmuri7/9/11/11Bold/11Condensed/14, GalmuriMono7/9/11) 포함.
 * 공식 jsDelivr 배포 사용. */
@import url('https://cdn.jsdelivr.net/gh/quiple/galmuri/dist/galmuri.css');

:root {
  /* NES 팔레트 */
  --nes-bg:        #0a0a18;        /* 어두운 게임 화면 배경 */
  --nes-bg-soft:   #1a1a2e;        /* 카드/박스 배경 */
  --nes-bg-deep:   #000000;        /* 가장 어두운 영역 */

  --nes-fg:        #ffffff;        /* 본문 텍스트 */
  --nes-fg-muted:  #b0b0c0;        /* 보조 텍스트 */
  --nes-fg-dim:    #6b6b80;        /* 더 흐린 텍스트 */

  --nes-red:       #e60012;        /* Mario red */
  --nes-blue:      #0058f8;        /* Mario blue */
  --nes-yellow:    #f8d800;        /* Coin yellow */
  --nes-green:     #00a800;        /* Luigi green */
  --nes-pink:      #f878f8;        /* Princess pink */
  --nes-cyan:      #58d8d8;        /* Power-up cyan */

  --nes-border:    #ffffff;        /* 기본 픽셀 보더 */
  --nes-shadow:    #000000;        /* 하드 그림자 */

  /* 픽셀 단위 */
  --px:            4px;            /* 기본 픽셀 크기 */
  --px2:           8px;
  --px3:           12px;
  --px4:           16px;
}

/* ─────────────── 베이스 ─────────────── */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--nes-bg);
  color: var(--nes-fg);
  font-family: 'Galmuri11', 'Press Start 2P', monospace;
  font-size: 12px;
  line-height: 1.8;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
}

/* 본문/긴 글에는 더 읽기 쉬운 픽셀 폰트(VT323) 사용 */
.nes-body {
  font-family: 'GalmuriMono11', 'Galmuri11', 'VT323', 'D2Coding', monospace;
  font-size: 20px;
  line-height: 1.5;
}

img, svg, canvas { image-rendering: pixelated; }

::selection { background: var(--nes-yellow); color: var(--nes-bg-deep); }

/* ─────────────── 타이포그래피 ─────────────── */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--px3);
  font-weight: normal;
  line-height: 1.4;
  text-shadow: var(--px) var(--px) 0 var(--nes-shadow);
}
h1 { font-size: 22px; color: var(--nes-yellow); }
h2 { font-size: 18px; color: var(--nes-cyan); }
h3 { font-size: 14px; color: var(--nes-pink); }
h4, h5, h6 { font-size: 12px; color: var(--nes-fg); }

p { margin: 0 0 var(--px3); }

a {
  color: var(--nes-cyan);
  text-decoration: none;
  border-bottom: var(--px) solid transparent;
  transition: none;
}
a:hover {
  color: var(--nes-yellow);
  border-bottom-color: var(--nes-yellow);
}

code, pre, kbd, samp {
  font-family: 'VT323', monospace;
  font-size: 18px;
  background: var(--nes-bg-deep);
  color: var(--nes-green);
  padding: 2px 6px;
}
pre {
  padding: var(--px3);
  border: var(--px) solid var(--nes-border);
  overflow-x: auto;
}

/* ─────────────── 컨테이너 / 박스 ─────────────── */

.nes-box {
  background: var(--nes-bg-soft);
  border: var(--px) solid var(--nes-border);
  padding: var(--px4);
  box-shadow: var(--px) var(--px) 0 var(--nes-shadow);
}

.nes-box-dialog {
  background: var(--nes-bg-soft);
  border: var(--px) solid var(--nes-border);
  padding: var(--px4);
  position: relative;
  box-shadow: var(--px) var(--px) 0 var(--nes-shadow);
}
/* 다이얼로그 네 모서리 픽셀 노치 */
.nes-box-dialog::before,
.nes-box-dialog::after {
  content: '';
  position: absolute;
  width: var(--px);
  height: var(--px);
  background: var(--nes-bg);
}
.nes-box-dialog::before { top: calc(-1 * var(--px)); left: calc(-1 * var(--px)); box-shadow:
  calc(100% + var(--px) * 2) 0 0 var(--nes-bg),
  0 calc(100% + var(--px) * 0) 0 var(--nes-bg); }
.nes-box-dialog::after  { bottom: calc(-1 * var(--px)); right: calc(-1 * var(--px)); box-shadow:
  calc(-100% - var(--px) * 2) 0 0 var(--nes-bg); }

.nes-box-title {
  position: absolute;
  top: calc(-1 * var(--px3));
  left: var(--px3);
  background: var(--nes-bg);
  padding: 0 var(--px2);
  color: var(--nes-yellow);
}

/* ─────────────── 버튼 ─────────────── */

.nes-btn {
  display: inline-block;
  padding: var(--px3) var(--px4);
  background: var(--nes-bg-soft);
  color: var(--nes-fg);
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  text-align: center;
  text-decoration: none;
  border: var(--px) solid var(--nes-border);
  box-shadow: var(--px) var(--px) 0 var(--nes-shadow);
  cursor: pointer;
  user-select: none;
  transition: none;
}
.nes-btn:hover {
  background: var(--nes-fg);
  color: var(--nes-bg-deep);
  border-color: var(--nes-fg);
}
.nes-btn:active {
  transform: translate(var(--px), var(--px));
  box-shadow: none;
}

.nes-btn-primary { background: var(--nes-blue); border-color: var(--nes-blue); color: #fff; }
.nes-btn-primary:hover { background: var(--nes-cyan); border-color: var(--nes-cyan); color: var(--nes-bg-deep); }

.nes-btn-success { background: var(--nes-green); border-color: var(--nes-green); }
.nes-btn-success:hover { background: #5acd5a; border-color: #5acd5a; color: var(--nes-bg-deep); }

.nes-btn-warning { background: var(--nes-yellow); border-color: var(--nes-yellow); color: var(--nes-bg-deep); }
.nes-btn-warning:hover { background: #fff5a0; border-color: #fff5a0; }

.nes-btn-danger { background: var(--nes-red); border-color: var(--nes-red); color: #fff; }
.nes-btn-danger:hover { background: #ff5a6c; border-color: #ff5a6c; }

/* ─────────────── 입력 폼 ─────────────── */

.nes-input,
input[type=text].nes-input,
input[type=password].nes-input,
input[type=email].nes-input,
textarea.nes-input,
select.nes-input {
  width: 100%;
  padding: var(--px3);
  background: var(--nes-bg-deep);
  color: var(--nes-fg);
  font-family: 'VT323', monospace;
  font-size: 20px;
  border: var(--px) solid var(--nes-border);
  box-shadow: inset var(--px) var(--px) 0 rgba(0,0,0,0.5);
  outline: none;
  border-radius: 0;
}
.nes-input:focus { border-color: var(--nes-yellow); box-shadow: inset var(--px) var(--px) 0 rgba(0,0,0,0.5), 0 0 0 var(--px) var(--nes-yellow); }
.nes-input::placeholder { color: var(--nes-fg-dim); }

.nes-label {
  display: block;
  margin-bottom: var(--px2);
  color: var(--nes-fg-muted);
  font-size: 11px;
}

/* ─────────────── 알림 / 메시지 ─────────────── */

.nes-msg {
  padding: var(--px3);
  margin: var(--px3) 0;
  border: var(--px) solid currentColor;
  font-size: 11px;
}
.nes-msg-error   { color: var(--nes-red);    background: rgba(230,0,18,.1); }
.nes-msg-success { color: var(--nes-green);  background: rgba(0,168,0,.1); }
.nes-msg-warning { color: var(--nes-yellow); background: rgba(248,216,0,.1); }
.nes-msg-info    { color: var(--nes-cyan);   background: rgba(88,216,216,.1); }

/* ─────────────── 유틸 ─────────────── */

.nes-blink { animation: nes-blink 1s steps(2) infinite; }
@keyframes nes-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

.nes-press {
  display: inline-block;
  color: var(--nes-yellow);
  animation: nes-blink 1.2s steps(2) infinite;
}

.nes-divider {
  border: 0;
  border-top: var(--px) dashed var(--nes-fg-dim);
  margin: var(--px4) 0;
}

/* 픽셀 스타 / 하트 / 코인 등 작은 장식 */
.nes-icon-star::before  { content: '★'; color: var(--nes-yellow); margin-right: 4px; }
.nes-icon-heart::before { content: '♥'; color: var(--nes-red); margin-right: 4px; }
.nes-icon-coin::before  { content: '◉'; color: var(--nes-yellow); margin-right: 4px; }

/* ─────────────── 반응형 ─────────────── */

@media (max-width: 600px) {
  html, body { font-size: 11px; }
  h1 { font-size: 18px; }
  h2 { font-size: 15px; }
  .nes-btn { font-size: 11px; padding: var(--px2) var(--px3); }
}