/* ============================================================
   365 ARCHIVE — shared.css
   모든 페이지 공통 스타일 (디자인 토큰 + 헤더/푸터 + 공통 자산)
   ============================================================ */


/* ─────────────────────────────────────────────
   외부 폰트 로드 — Pretendard + Space Mono + Noto Serif
   ⚠ @import 는 다른 모든 CSS 결보다 *먼저* 와야 함 (CSS 룰)
   Pretendard 는 CDN 에서 로드 (한국어 + 일본어 한자 일부 포함)
   ───────────────────────────────────────────── */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Noto+Serif+JP:wght@300;400;500&family=Noto+Serif+KR:wght@300;400;500&family=Shippori+Mincho:wght@400;500;600&display=swap');


/* ─────────────────────────────────────────────
   1. RESET — 브라우저 기본값 제거
   ───────────────────────────────────────────── */
*,*::before,*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}

a{color:inherit;text-decoration:none}
button{background:none;border:none;cursor:pointer;font:inherit;color:inherit;padding:0}
img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}


/* ─────────────────────────────────────────────
   2. 디자인 토큰 (CSS 변수)
   v3 문서 §2 디자인 시스템
   ───────────────────────────────────────────── */
:root{
  /* 컬러 — 살짝 따뜻한 검정 가족 */
  --fg:        #252423;   /* 본문, 큰 자산 */
  --fg-muted:  #6b6764;   /* 라벨, 발췌 */
  --fg-dim:    #a09d9a;   /* 비활성, 보조 */
  --border:    #e0e0dd;   /* 라인 */
  --bg:        #ffffff;
  
  /* 폰트 */
  --font-body:    'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:    'Space Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --font-serif-jp:'Shippori Mincho','Noto Serif JP',serif;
  --font-serif-kr:'Noto Serif KR',serif;
  
  /* 자주 쓰는 자산 값 */
  --line:       0.5px solid var(--border);
  --label-size: 9px;
  --label-spc:  0.22em;
  --header-h:   72px;
}


/* ─────────────────────────────────────────────
   3. 폰트 로드 — 위 자리로 이동됨 (CSS 룰 따라 @import 는 맨 위)
   ───────────────────────────────────────────── */



/* ─────────────────────────────────────────────
   4. 헤더
   v3 문서 §4 헤더
   ───────────────────────────────────────────── */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  background:var(--bg);
  transition:transform 0.4s ease,opacity 0.3s ease;
}

/* 헤더 내용은 본문 max-width 안에 정렬 */
.site-header > *{
  /* 직접 자식들이 컨테이너 폭 안에 배치되도록 wrapper 결로 처리 */
}

/* 헤더 wrapper — 본문과 같은 max-width로 정렬 */
.site-header{
  display:block;
  padding:0;
}
.site-header-inner{
  max-width:1440px;
  margin:0 auto;
  padding:24px 32px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}

/* 스크롤 내리면 헤더 숨김 */
.site-header.is-hidden{
  transform:translateY(-100%);
  opacity:0;
  pointer-events:none;
}

/* 좌측 큰 로고 */
.site-logo{
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:400;
  letter-spacing:0.28em;
  color:var(--fg);
  text-transform:uppercase;
  line-height:1;
  user-select:none;
}

/* 우측 세로 메뉴 (데스크톱) */
.site-nav{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}

.site-nav a{
  position:relative;
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:0.22em;
  color:var(--fg-muted);
  text-transform:uppercase;
  padding:4px 0;
  transition:color 0.2s ease;
}

.site-nav a:hover,
.site-nav a.is-active{
  color:var(--fg);
}

/* 호버 시 [라벨] 결 — 박물관 라벨 */
.site-nav a::before,
.site-nav a::after{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:0.22em;
  color:var(--fg);
  opacity:0;
  transition:opacity 0.2s ease;
  pointer-events:none;
}
.site-nav a::before{
  content:'[';
  right:calc(100% + 6px);
}
.site-nav a::after{
  content:']';
  left:calc(100% + 6px);
}
.site-nav a:hover::before,
.site-nav a:hover::after,
.site-nav a.is-active::before,
.site-nav a.is-active::after{
  opacity:1;
}


/* ─────────────────────────────────────────────
   5. 햄버거 (스크롤 시, 모든 화면)
   + 기본 → 누르면 × 로 회전
   데스크톱 두께 1px / 모바일 두께 1.5px (자동 보정)
   ───────────────────────────────────────────── */
.site-burger{
  position:fixed;
  top:24px;right:32px;
  z-index:110;
  width:32px;height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s ease;
}
.site-burger.is-visible{
  opacity:1;
  pointer-events:auto;
}

/* + 모양 — 절대 위치로 두 줄 겹침 */
.site-burger__icon{
  position:relative;
  width:16px;height:16px;
  display:block;
}
.site-burger__icon::before,
.site-burger__icon::after{
  content:'';
  position:absolute;
  background:var(--fg);
  transition:transform 0.4s cubic-bezier(.6,.05,.3,1);
  top:50%;
  left:50%;
}
/* 가로 줄 */
.site-burger__icon::before{
  width:16px;
  height:1px;
  transform:translate(-50%,-50%);
}
/* 세로 줄 */
.site-burger__icon::after{
  width:1px;
  height:16px;
  transform:translate(-50%,-50%);
}

/* 열림 상태 — 45도 회전해서 × 로 */
.site-burger.is-open .site-burger__icon::before{
  transform:translate(-50%,-50%) rotate(45deg);
}
.site-burger.is-open .site-burger__icon::after{
  transform:translate(-50%,-50%) rotate(45deg);
}


/* ─────────────────────────────────────────────
   6. 풀화면 메뉴 오버레이 (햄버거 열림 + 모바일)
   ───────────────────────────────────────────── */
.site-menu-overlay{
  position:fixed;
  inset:0;
  z-index:105;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:32px;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s ease;
}
.site-menu-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}
.site-menu-overlay a{
  font-family:var(--font-mono);
  font-size:14px;
  letter-spacing:0.32em;
  color:var(--fg);
  text-transform:uppercase;
  padding:8px 12px;
  position:relative;
  transition:color 0.2s ease;
}
.site-menu-overlay a.is-active{
  color:var(--fg-muted);
}

/* 풀화면 메뉴도 호버 시 [라벨] 결 */
.site-menu-overlay a::before,
.site-menu-overlay a::after{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-family:var(--font-mono);
  font-size:14px;
  letter-spacing:0.32em;
  color:var(--fg);
  opacity:0;
  transition:opacity 0.2s ease;
  pointer-events:none;
}
.site-menu-overlay a::before{
  content:'[';
  right:calc(100% - 4px);
}
.site-menu-overlay a::after{
  content:']';
  left:calc(100% - 4px);
}
.site-menu-overlay a:hover::before,
.site-menu-overlay a:hover::after,
.site-menu-overlay a.is-active::before,
.site-menu-overlay a.is-active::after{
  opacity:1;
}


/* ─────────────────────────────────────────────
   7. 모바일 헤더
   ───────────────────────────────────────────── */
@media (max-width: 640px){
  .site-header-inner{
    padding:18px 20px;
    align-items:center;
    min-height:56px;
  }
  /* 모바일 로고 — 햄버거(28px)보다 한 단계 더 큰 결로 위계 살림
     얇은 결로 박물관 톤 유지 */
  .site-logo{font-size:18px;letter-spacing:0.22em}
  
  /* 모바일: 우측 세로 메뉴 숨김, 햄버거만 */
  .site-nav{display:none}
  
  /* 모바일 햄버거 — fixed 유지하되 헤더 baseline에 정확히 맞춤 */
  .site-burger{
    top:14px;right:20px;
    width:28px;height:28px;
    opacity:1;
    pointer-events:auto;
  }
}


/* ─────────────────────────────────────────────
   8. 본문 영역 — 헤더 높이만큼 여백
   ───────────────────────────────────────────── */
.site-main{
  min-height:calc(100vh - var(--header-h));
  padding-top:var(--header-h);
}


/* ─────────────────────────────────────────────
   9. 글로벌 푸터
   v3 문서 §10 — 홈/리스트용 단순 결, 우측 정렬
   본문 페이지(post.html)는 BACK/NEXT 결 별도
   ───────────────────────────────────────────── */
.site-footer{
  border-top:var(--line);
  padding:0;
  margin-top:80px;
}

/* 푸터 내부 — 헤더처럼 max-width 안에 정렬 */
.site-footer-inner{
  max-width:1440px;
  margin:0 auto;
  padding:48px 32px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:24px;
}

/* 365 ARCHIVE + 링크 한 묶음 */
.site-footer-block{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

.site-footer-brand{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.28em;
  color:var(--fg);
  text-transform:uppercase;
}

.site-footer-links{
  display:flex;
  gap:16px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.18em;
  color:var(--fg-muted);
  text-transform:uppercase;
}
.site-footer-links a{
  transition:color 0.2s ease;
  color:var(--fg-muted);
}
.site-footer-links a:hover{color:var(--fg)}
.site-footer-links .arrow{
  font-family:var(--font-body);
  margin-left:4px;
  letter-spacing:0;
}

/* 카피라이트 — 살짝 호흡 두고 아래 */
.site-footer-copy{
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:0.18em;
  color:var(--fg-dim);
}

/* 모바일 — 한 줄 배치 */
@media (max-width: 640px){
  .site-footer-inner{
    flex-direction:row;
    align-items:flex-end;
    justify-content:space-between;
    padding:28px 20px;
    gap:16px;
  }
  .site-footer-block{
    align-items:flex-start;
    gap:8px;
  }
  .site-footer-brand{font-size:10px;letter-spacing:0.22em}
  .site-footer-links{font-size:9px;gap:12px}
  .site-footer-copy{font-size:8px}
}


/* ─────────────────────────────────────────────
   10. 우하단 ↑ 버튼 (스크롤 위로)
   ───────────────────────────────────────────── */
.site-totop{
  position:fixed;
  right:24px;bottom:24px;
  z-index:90;
  width:36px;height:36px;
  border:0.5px solid var(--border);
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s ease,border-color 0.2s ease;
}
.site-totop.is-visible{
  opacity:1;
  pointer-events:auto;
}
.site-totop:hover{border-color:var(--fg)}
.site-totop svg{
  width:11px;height:11px;
  stroke:var(--fg-muted);
  fill:none;stroke-width:1.2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke 0.2s ease;
}
.site-totop:hover svg{stroke:var(--fg)}


/* ============================================================
   공통 작은 자산 — 모든 페이지에서 호출해 쓰는 자산
   v3 문서 §2 폰트 룰 + 일련번호 + §6 카운터 워딩
   ============================================================ */


/* ─────────────────────────────────────────────
   11. 라인 결 — 0.5px
   ───────────────────────────────────────────── */
.hr-thin{
  border:0;
  border-top:var(--line);
  margin:0;
}


/* ─────────────────────────────────────────────
   12. 라벨 — 모노스페이스 9px (─ APR 결)
   v3 §2 라벨 자산
   ───────────────────────────────────────────── */
.label{
  font-family:var(--font-mono);
  font-size:var(--label-size);
  letter-spacing:var(--label-spc);
  color:var(--fg-muted);
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.label::before{
  content:'';
  display:inline-block;
  width:14px;
  height:0.5px;
  background:var(--fg-muted);
}
.label--bare::before{display:none} /* 앞 대시 없는 변형 */


/* ─────────────────────────────────────────────
   13. 일련번호 — (01) (02) (100)
   v3 §2 일련번호 자릿수 자동 가변
   ───────────────────────────────────────────── */
.serial{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--fg-muted);
  display:inline-block;
}
.serial--lg{
  font-size:48px;
  font-family:var(--font-body);
  font-weight:500;
  letter-spacing:-0.02em;
  color:var(--fg);
  line-height:1;
}


/* ─────────────────────────────────────────────
   14. 점잇기 메타 — LOCATION ........... 시부야
   v3 §10 글 페이지 메타
   ───────────────────────────────────────────── */
.dot-meta{
  display:flex;
  gap:8px;
  align-items:baseline;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.12em;
  color:var(--fg-muted);
  text-transform:uppercase;
  line-height:1.9;
}
.dot-meta__key{
  flex-shrink:0;
}
.dot-meta__dots{
  flex:1;
  border-bottom:1px dotted var(--fg-dim);
  transform:translateY(-3px);
  min-width:24px;
}
.dot-meta__val{
  flex-shrink:0;
  color:var(--fg);
  text-transform:none;
  letter-spacing:0.02em;
  font-family:var(--font-body);
  font-size:13px;
  font-weight:400;
}


/* ─────────────────────────────────────────────
   15. 카운터 — 185 / 365 days
   v3 §6 카운터 워딩
   ───────────────────────────────────────────── */
.counter{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.12em;
  color:var(--fg-muted);
}
.counter strong{
  font-weight:400;
  color:var(--fg);
}


/* ─────────────────────────────────────────────
   16. 카테고리 필터 칩
   v3 §9 Things 카테고리 필터
   ───────────────────────────────────────────── */
.cat-filter{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
}
.cat-filter button{
  padding:6px 14px;
  color:var(--fg-dim);
  transition:color 0.2s ease;
  position:relative;
}
.cat-filter button:not(:last-child)::after{
  content:'·';
  position:absolute;
  right:-2px;
  color:var(--fg-dim);
  pointer-events:none;
}
.cat-filter button:hover,
.cat-filter button.is-active{
  color:var(--fg);
}


/* ─────────────────────────────────────────────
   17. 페이지 컨테이너 (가운데 정렬, 최대폭)
   ───────────────────────────────────────────── */
.container{
  max-width:1440px;
  margin:0 auto;
  padding:0 32px;
}
@media (max-width: 640px){
  .container{padding:0 20px}
}


/* ─────────────────────────────────────────────
   18. 본문 흐름 — Pretendard 13px line-height 2
   v3 §10 Archive 본문 결
   ───────────────────────────────────────────── */
.prose{
  font-family:var(--font-body);
  font-size:13px;
  line-height:2;
  font-weight:400;
  color:var(--fg);
}
.prose p+p{margin-top:1.4em}