@charset "UTF-8";

/* --- 1. Material Library (변수 설정) --- */
:root {
  /* Font Stacks */
  --font-stack-sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-stack-serif: 'Merriweather', Georgia, serif;

  /* Colors & Layout */
  --page-width: 1400px;
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-gray: #777777;

  /* Default Typography Fallback */
  --type-heading: var(--font-stack-sans);
  --type-body:    var(--font-stack-sans);
  --type-scale:   1.0;
}

/* --- 2. Theme Definitions (테마) --- */
[data-theme="modern"] {
  --type-heading: var(--font-stack-sans);
  --type-body:    var(--font-stack-sans);
  --type-scale:   1.0;
}

[data-theme="classic"] {
  --type-heading: var(--font-stack-serif);
  --type-body:    var(--font-stack-serif);
  --type-scale:   0.95;
}

[data-theme="hybrid"] {
  --type-heading: var(--font-stack-sans);
  --type-body:    var(--font-stack-serif);
  --type-scale:   0.98;
}

/* --- 3. Base Reset & Global Styles --- */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--type-body);
  font-size: calc(15px * var(--type-scale)); /* 기본 폰트 살짝 작게 (16px -> 15px) */
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .headline, .nav-link, .logo {
  font-family: var(--type-heading);
}

.meta, .date, .footnotes {
font-family: var(--font-stack-serif);
}

a { color: inherit; text-decoration: none; }

.header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 2px 16px; 
  border-bottom: 1px solid #000; /* 얇은 검은 줄 */
}

.logo {
  font-weight: 600;
  font-size: 0.9rem; /* [수정] 1.5rem -> 1.1rem (작고 단단하게) */
  letter-spacing: -0.02em;
  color: black;
}

.menu a {
  font-size: 0.9rem;
  margin-left: 20px;
  color: #555;
  transition: color 0.3s;
}
.menu a:hover { color: #000; }

/* --- 5. Layout: Home Archive Grid --- */
.home-layout {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 20px 20px 120px 20px;
}

.archive-grid {
  display: grid;
  /* 반응형 그리드: 화면이 넓으면 3~4개, 좁으면 1~2개 자동 조절 */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  column-gap: 40px;
  row-gap: 70px; /* 세로 간격을 넓혀 시원하게 */
}

/* --- Home Layout (Minimal List Style) --- */

.home-layout {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0;
}

.archive-list {
  display: flex;
  flex-direction: column;
}

/* 행(Row) 스타일 */
.archive-row {
  display: flex;
  justify-content: space-between; /* 양쪽 끝으로 배치 */
  align-items: baseline;
  padding: 2px 0; /* 위아래 간격 */
  
  /* [요청하신 부분] 전체 폭 1px 검은색 라인 */
  border-bottom: 1px solid #000; 
  
  text-decoration: none;
  color: #000; /* 글자색도 완전 검정 */
  transition: background-color 0.2s;
}

.archive-row:hover {
  background-color: #f0f0f0; /* 마우스 올렸을 때 살짝 반응 */
}

/* 1. 왼쪽 (날짜, 장소) */
.row-meta {
  /* 제목과 똑같은 폰트 사용 (Sans-serif) */
  font-family: var(--type-heading);
  font-size: 0.8rem; /* 작고 단정하게 */
  font-weight: 400;   /* [중요] Regular (굵지 않게) */
  color: #000;        /* 회색 아니고 검정 */
  margin-left: 16px;
  width: 40%; /* 왼쪽 영역 너비 확보 */
  flex-shrink: 0;
}

.row-meta .date {
  font-family: inherit !important; 
  color: inherit;
}

.row-meta .location {
  margin-left: 16px; /* 여기서 20px 띄움 */
  color: inherit;
}

/* 모바일 대응 */
@media (max-width: 600px) {
  .archive-row {
    flex-direction: column; /* 좁으면 위아래로 */
    gap: 8px;
  }
  .row-title {
    text-align: left; /* 모바일에선 왼쪽 정렬 */
  }
}

/* 2. 제목 */
.row-title {
  font-family: var(--type-heading);
  font-size: 0.8rem;
  font-weight: 400;
  color: #000;
  margin-right: 16px;
  text-align: right; /* 제목을 오른쪽 끝에 붙임 */
}

/* --- Mobile Response (모바일에서도 한 줄 유지) --- */
@media (max-width: 600px) {
  .archive-row {
    flex-direction: row;      /* 위아래가 아닌 가로 유지 */
    justify-content: flex-start; /* 왼쪽부터 차례대로 배치 */
    align-items: baseline;
    padding: 6px 0;          /* 좁은 화면을 위해 상하 여백 살짝 축소 */
    gap: 4px;                /* 요소 간 최소 간격 */
  }

  .row-meta {
    width: auto;              /* 고정 너비 해제 */
    flex-shrink: 0;           /* 날짜/장소가 찌그러지지 않게 */
    font-size: 0.8rem;        /* 폰트 크기 소폭 축소 */
    display: flex;
    gap: 4px;                /* 날짜와 장소 사이 공백 (콤마 포함) */
  }

  .row-title {
    font-size: 0.8rem;        /* 폰트 크기 소폭 축소 */
    text-align: right;        /* 제목은 오른쪽 끝으로 */
    flex-grow: 1;             /* 남는 공간을 제목이 다 차지해서 오른쪽으로 밀어내기 */
    
    /* 제목이 너무 길 경우를 대비한 처리 (말줄임표) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .row-meta .location {
    margin-left: 0;           /* 모바일에서는 20px 대신 gap 설정을 따름 */
  }
}



.archive-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: opacity 0.3s ease;
}
.archive-item:hover { opacity: 0.7; }

/* 이미지 비율 3:2 */
.archive-cover {
  width: 100%;
  aspect-ratio: 3 / 2;
  background-color: #f4f4f4;
  overflow: hidden;
  margin: 0;
}
.archive-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.archive-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.archive-info .date {
  font-size: 0.75rem;
  color: #999;
}

/* [수정] 메인 리스트 제목 축소 */
.archive-title {
  font-size: 1.1rem; /* 본문과 거의 비슷한 크기로 미니멀하게 */
  font-weight: 700;
  line-height: 1.3;
  margin-top: 5px;
}

/* [수정] 요약글 축소 */
.archive-excerpt {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.5;
  margin-top: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* --- 6. Layout: Article Detail --- */
.article-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 20px;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 20px 120px 20px;
}

.article-header {
  grid-column: 3 / 11; /* 중앙 정렬 */
  margin-bottom: 60px;
  text-align: center;  /* 제목 중앙 정렬 (선택사항) */

}

.headline {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0px;
}

.meta {
  font-size: 0.85rem;
  font-style: italic; /* [선택] 명조는 기울임꼴(Italic)일 때 더 멋집니다 */
  color: #555;
  padding: 15px;
}

.article-content {
  grid-column: 3 / 11; /* 본문 폭을 적당히 좁게 유지 */
  font-size: 1.0rem;   /* 본문 크기 표준화 */
  line-height: 1.75;   /* 줄간격은 여유롭게 */
}

/* 본문 요소들 */
.article-content p { margin-bottom: 1.5em; }
.article-content h2 { font-size: 1.3rem; margin-top: 2em; margin-bottom: 0.8em; }
.article-content figure { width: 100%; margin: 50px 0; }
.article-content img { width: 100%; height: auto; display: block; }
.article-content a { text-decoration: underline; text-underline-offset: 3px; }

.article-nav {
  /* [요청 2 해결] 본문과 똑같은 그리드 칸(3~11)을 차지하게 함 */
  grid-column: 3 / 11;
  
  display: flex;
  justify-content: space-between; /* 양쪽 끝으로 밀어내기 */
  margin-top: 80px;
  padding-top: 20px;
  border-top: 1px solid #ddd; /* 본문과 구분되는 얇은 회색선 */
}

.article-nav a {
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  color: black;
  transition: opacity 0.3s;
}
.article-nav a:hover {
  opacity: 0.6;
}

/* --- 7. Layout: Default Page (About) --- */
/* --- Default Page Layout (Vertically Centered) --- */

.default-layout {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 20px;
  
  /* 화면 전체 높이에서 헤더/푸터 대략적인 높이를 뺀 만큼 최소 높이 설정 */
  min-height: calc(100vh - 100px); 
  
  display: flex;          /* 그리드 대신 플렉스 사용 */
  flex-direction: column;
  justify-content: center; /* 수직 중앙 정렬 */
  align-items: center;     /* 수평 중앙 정렬 */
  text-align: center;      /* [추가] 텍스트 좌우 정렬을 중앙으로 */
}

/* 제목 영역 */
.page-header {
  width: 100%;
  max-width: 800px; /* 본문 폭 제한 */
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #000;
  text-align: left; /* 제목은 왼쪽 정렬 유지 */
}

.page-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* 본문 영역 */
.page-content {
  width: 100%;
  max-width: 800px;
  font-size: 1.05rem;
  line-height: 1.7;
}

.page-header {
  grid-column: 3 / 11;
  margin-bottom: 50px;
  padding-bottom: 20px;
  border-bottom: 1px solid #000;
}

/* [수정] About 페이지 제목 축소 */
.page-header h1 {
  font-size: 1.5rem; /* 아티클 제목과 통일 */
  font-weight: 700;
  letter-spacing: -0.03em;
}

.page-content {
  grid-column: 3 / 11;
  font-size: 1rem;
  line-height: 1.7;
}


/* --- Mobile Response --- */
@media (max-width: 768px) {
  .article-header, .article-content, 
  .page-header, .page-content {
    grid-column: 1 / -1;
  }
  .headline, .page-header h1 { font-size: 1.1rem; }
  .archive-grid { grid-template-columns: 1fr; } /* 모바일은 1단 */
}

/* --- Image Alignment (Text Wrapping) --- */

/* 오른쪽 정렬: 이미지가 오른쪽으로 가고, 글이 왼쪽을 채움 */
figure.right {
  float: right;
  width: 45%;        /* 화면의 절반 조금 안 되게 */
  margin-left: 30px; /* 글자와의 간격 */
  margin-bottom: 20px;
  margin-top: 10px;
}

/* 왼쪽 정렬 */
figure.left {
  float: left;
  width: 45%;
  margin-right: 30px;
  margin-bottom: 20px;
  margin-top: 10px;
}

/* 모바일에서는 무조건 꽉 차게 (글자 흐름 방지) */
@media (max-width: 768px) {
  figure.right, figure.left {
    float: none;
    width: 100%;
    margin: 40px 0;
  }
}