/* =====================================================
   ArtEdu Share — Design System (정돈된 갤러리 톤)
   가독성 우선 + 절제된 미술 액센트
   ===================================================== */

:root {
  --ink-50: #faf9f7;
  --ink-100: #f0eee9;
  --ink-200: #dcd8cf;
  --ink-300: #bbb4a6;
  --ink-500: #6f6759;
  --ink-700: #3d3933;
  --ink-900: #141312;
  --wine-700: #a91f3f;
  --wine-800: #7C2D3C;
  --terracotta: #C26A4A;
  --neon-pink: #ff2e88;
  --neon-yellow: #f5d340;
  --neon-cyan: #00bfba;
}

html { scroll-behavior: smooth; }
body { font-feature-settings: "ss01", "kern"; }

/* 카드 — 부드러운 그림자 */
.card {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 4px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.card:hover {
  border-color: var(--wine-800);
  box-shadow: 0 6px 20px -8px rgba(20, 19, 18, 0.18);
}

/* 액센트 색 바 (왼쪽) */
.accent-bar { position: relative; }
.accent-bar::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--wine-800);
}

/* 섹션 라벨 */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 0.5rem;
}
.section-label::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--ink-300);
}

/* 태그 */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 3px;
  background: var(--ink-100);
  color: var(--ink-700);
  font-weight: 500;
}
.tag-wine { background: #fde9ed; color: var(--wine-800); }
.tag-terracotta { background: #fbe6db; color: #8d3a20; }
.tag-dark { background: var(--ink-900); color: #fff; }

/* 버튼 */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  background: var(--wine-800);
  color: #fff;
  border-radius: 4px;
  font-weight: 500;
  font-size: 14px;
  transition: background .15s ease;
}
.btn-primary:hover { background: var(--wine-900, #5e2230); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  background: #fff;
  color: var(--ink-900);
  border: 1px solid var(--ink-300);
  border-radius: 4px;
  font-weight: 500;
  font-size: 14px;
  transition: border-color .15s ease, background .15s ease;
}
.btn-secondary:hover { border-color: var(--wine-800); background: #fff7f9; }

/* link underline reveal — 본문에서만 사용 */
.link-reveal {
  position: relative;
  display: inline-block;
}
.link-reveal::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%;
  height: 1.5px;
  background: var(--wine-800);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .25s ease;
}
.link-reveal:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* 본문 prose */
.prose-content {
  color: var(--ink-700);
  line-height: 1.85;
  font-size: 0.95rem;
}
.prose-content h1, .prose-content h2, .prose-content h3, .prose-content h4 {
  font-family: "Noto Sans KR", "Pretendard", system-ui, sans-serif;
  color: var(--ink-900);
  font-weight: 800;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.prose-content h1 { font-size: 1.6rem; }
.prose-content h2 {
  font-size: 1.35rem;
  border-left: 3px solid var(--wine-800);
  padding-left: 0.65em;
}
.prose-content h3 { font-size: 1.15rem; }
.prose-content h4 { font-size: 1.05rem; }
.prose-content p { margin: 0.8em 0; }
.prose-content ul, .prose-content ol { margin: 0.8em 0; padding-left: 1.5em; }
.prose-content ul { list-style: disc; }
.prose-content ol { list-style: decimal; }
.prose-content li { margin: 0.3em 0; }
.prose-content a {
  color: var(--wine-800);
  text-decoration: underline;
  text-decoration-color: rgba(124, 45, 60, 0.35);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.prose-content a:hover { text-decoration-color: var(--wine-800); }
.prose-content strong {
  color: var(--ink-900);
  font-weight: 600;
  background: linear-gradient(transparent 65%, rgba(245, 211, 64, 0.5) 65%);
}
.prose-content blockquote {
  margin: 1em 0;
  padding: 0.7em 1.1em;
  border-left: 3px solid var(--terracotta);
  background: var(--ink-50);
  color: var(--ink-700);
  font-style: italic;
  border-radius: 2px;
}
.prose-content code {
  background: var(--ink-100);
  padding: 0.18em 0.45em;
  border-radius: 3px;
  font-size: 0.875em;
  color: var(--wine-800);
  font-family: "JetBrains Mono", monospace;
}
.prose-content pre {
  background: var(--ink-900);
  color: var(--ink-50);
  padding: 1em;
  overflow-x: auto;
  margin: 1em 0;
  border-radius: 4px;
}
.prose-content pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}
.prose-content img {
  max-width: 100%;
  height: auto;
  margin: 1em 0;
  border-radius: 4px;
}
.prose-content hr {
  border: none;
  border-top: 1px solid var(--ink-200);
  margin: 2em 0;
}
.prose-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
  font-size: 0.875em;
  border-radius: 4px;
  overflow: hidden;
}
.prose-content th, .prose-content td {
  border: 1px solid var(--ink-200);
  padding: 0.55em 0.8em;
  text-align: left;
}
.prose-content th {
  background: var(--ink-100);
  font-weight: 600;
}
.prose-content iframe { max-width: 100%; border-radius: 4px; }

/* line-clamp */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* 입력 폼 */
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }

/* 스크롤바 — 절제 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-50); }
::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 5px; border: 2px solid var(--ink-50); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-500); }

::selection { background: var(--neon-yellow); color: var(--ink-900); }

/* 인쇄 */
@media print {
  header, footer, .no-print { display: none !important; }
}