/* variables.css — CSS 변수 및 기본 스타일 */
:root {
  --pk-bg: #fafafa;
  --pk-surface: #ffffff;
  --pk-surface-soft: #f3f4f6;
  --pk-border-subtle: #e1e4ea;
  --pk-text-main: #222222;
  --pk-text-sub: #7a6f76;
  --pk-primary: #31527e;
  --pk-primary-soft: #e3eaf5;
  --pk-accent: #31527e;
  --pk-radius-lg: 18px;
  --pk-radius-md: 12px;
  --pk-radius-pill: 999px;
  --pk-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.04);
}

* {
  box-sizing: border-box;
  font-family: 'Noto Sans',sans-serif;
}

body {
  margin: 0;
  padding: 0;
  background: var(--pk-bg);
  color: var(--pk-text-main);
}

.pk-page {
  min-height: 100vh;
  padding: 0px 16px 40px;
}

.pk-shell {
  max-width: 1200px;
  margin: 0 auto;
}

/* 본문/사이드 레이아웃 */
.pk-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 18px;
  align-items: flex-start;
}

.pk-article-shell,
.pk-comments-shell {
  background: var(--pk-surface);
  border-radius: var(--pk-radius-lg);
  box-shadow: var(--pk-shadow-soft);
}

.pk-article-shell {
  padding: 28px 20px;
}

.pk-side-shell {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

/* 반응형: 모바일에서 단일 칼럼 */
@media (max-width: 900px) {
  .pk-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .pk-article-shell { order: 0; }
  .pk-side-shell { order: 1; }
}

@media (max-width: 640px) {
  .pk-page {
    padding-inline: 12px;
  }

  .pk-article-shell,
  .pk-comments-shell {
    border-radius: 14px;
    padding-inline: 12px;
  }

  .pk-article-shell { padding-top: 14px; }
}