html {
  color-scheme: light;
}
html.dark {
  color-scheme: dark;
}

body {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  transition: background-color 300ms ease, color 300ms ease;
}

/* Basic deterrents (not true DRM) */
.no-save {
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* Stitch utilities */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Mobile photo viewer mode (fallback when Fullscreen API is blocked) */
@media (max-width: 1024px) {
  #photo-modal.photo-mobile-viewer [data-photo-mobile-hide="viewer"] {
    display: none;
  }
  #photo-modal.photo-mobile-viewer .photo-modal-shell {
    margin: 0;
    width: 100%;
    height: 100vh;
    border-radius: 0;
  }
  #photo-modal.photo-mobile-viewer #photo-modal-media {
    height: 100vh;
  }
}

.masonry-grid {
  column-count: 3;
  column-gap: 2rem;
}
@media (max-width: 1024px) {
  .masonry-grid {
    column-count: 2;
  }
}
@media (max-width: 640px) {
  .masonry-grid {
    column-count: 1;
  }
}
.masonry-item {
  break-inside: avoid;
  margin-bottom: 2rem;
}
.hover-overlay {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.masonry-item:hover .hover-overlay {
  opacity: 1;
}
.masonry-item:hover img {
  transform: scale(1.05);
}

/* Markdown rendering (used by blog build) */
.md-content h1 {
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1.3;
  margin: 0 0 1.25rem;
  color: #191110;
}
.md-content h2 {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.35;
  margin: 2rem 0 0.75rem;
  color: #191110;
}
.md-content h3 {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 1.75rem 0 0.5rem;
  color: #191110;
}
.md-content h4 {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.45;
  margin: 1.5rem 0 0.5rem;
  color: #191110;
}
.md-content p {
  font-size: 1.125rem;
  line-height: 1.75;
  color: #4a3734;
  margin: 0 0 1.25rem;
}
.md-content a {
  color: #c34e37;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.md-content blockquote {
  border-left: 4px solid #c34e37;
  padding-left: 1.25rem;
  margin: 1.75rem 0;
  font-style: italic;
  color: #8c625a;
}
.md-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 0.95em;
  padding: 0.15em 0.35em;
  border-radius: 0.35rem;
  background: rgba(140, 98, 90, 0.12);
}
.md-content pre {
  overflow: auto;
  padding: 1rem;
  border-radius: 0.75rem;
  background: rgba(140, 98, 90, 0.12);
}
.md-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
}
.md-content hr {
  border: 0;
  border-top: 1px solid #eae0da;
  margin: 2.5rem 0;
}

/* Tables */
.md-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0;
  font-size: 0.95rem;
  display: block;
  overflow-x: auto;
}
.md-content th,
.md-content td {
  border: 1px solid #eae0da;
  padding: 0.6rem 0.9rem;
  text-align: left;
  vertical-align: top;
  color: #4a3734;
}
.md-content th {
  background: rgba(140, 98, 90, 0.08);
  color: #191110;
  font-weight: 700;
}
.md-content tbody tr:nth-child(even) {
  background: rgba(140, 98, 90, 0.035);
}

/* Image grid tables: every image renders at the same height and fills its cell. */
.md-content table.img-table {
  display: table;
  table-layout: fixed;
  width: 100%;
  border: 0;
  border-collapse: separate;
  border-spacing: 0.5rem;
  overflow: visible;
  margin: 1.75rem -0.5rem;
}
.md-content table.img-table td {
  border: 0;
  padding: 0;
  vertical-align: middle;
  background: transparent;
}
.md-content table.img-table img {
  display: block;
  width: 100%;
  height: 22rem;
  object-fit: cover;
  border-radius: 0.5rem;
  margin: 0;
}
@media (max-width: 768px) {
  .md-content table.img-table img {
    height: 11rem;
  }
}

html.dark .md-content h1,
html.dark .md-content h2,
html.dark .md-content h3,
html.dark .md-content h4 {
  color: #f9f7f6;
}
html.dark .md-content p {
  color: #d1d5db;
}
html.dark .md-content pre,
html.dark .md-content code {
  background: rgba(255, 255, 255, 0.06);
}
html.dark .md-content blockquote {
  color: #c9b8b3;
}
html.dark .md-content a {
  color: #e8836b;
}
html.dark .md-content hr {
  border-top-color: #2d3741;
}
html.dark .md-content th,
html.dark .md-content td {
  border-color: #2d3741;
  color: #d1d5db;
}
html.dark .md-content th {
  background: rgba(255, 255, 255, 0.05);
  color: #f9f7f6;
}
html.dark .md-content tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.025);
}


/* 마크다운 컨텐츠 내 리스트 스타일 복구 */
.md-content ul {
  list-style-type: disc; /* 불릿 점 표시 */
  margin: 1rem 0;
  padding-left: 2rem; /* 점이 표시될 왼쪽 공간 확보 */
}

.md-content ol {
  list-style-type: decimal; /* 숫자 표시 */
  margin: 1rem 0;
  padding-left: 2rem;
}

.md-content li {
  display: list-item; /* 리스트 아이템 속성 명시 */
  margin-bottom: 0.5rem;
  /* 일반 텍스트와 동일한 폰트 설정 */
  font-family: inherit; 
  line-height: 1.6;
}

/* 중첩 리스트 대응 (선택 사항) */
.md-content ul ul, 
.md-content ol ol, 
.md-content ul ol, 
.md-content ol ul {
  margin: 0.5rem 0;
}

/* Reduce motion if requested */
@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }
}