/* 글로벌 변수 및 초기화 */
:root {
  --grid-gap: clamp(16px, 1.5vw, 24px);
  --site-padding: var(--grid-gap);       
  --font-size-base: clamp(14px, 1.4vw, 22px);    
  /* 🎨 [색상 변경 완료] 기존 #FFFF00에서 가독성이 확보된 세련된 노란색(#ffd903)으로 교체 */
  --color-yellow: #ffd903;
}

*, *::before, *::after { box-sizing: border-box; }

/* 1. 기본 서체 등록 (짧은 하이픈 '-' 및 일반 문자용) */
@font-face {
  font-family: 'ABC Otto';
  src: url('../fonts/ABCOtto-Regular.woff2') format('woff2');
  font-weight: normal; font-style: normal;
}
@font-face {
  font-family: 'ABC Otto';
  src: url('../fonts/ABCOtto-RegularItalic.woff2') format('woff2');
  font-weight: normal; font-style: italic;
}

/* 2. 긴 대시 '–' (U+2013) 전용 대체 가상 서체 */
@font-face {
  font-family: 'HighDashFont';
  src: url('../fonts/ABCOtto-Regular.woff2') format('woff2');
  font-weight: normal; font-style: normal;
  unicode-range: U+2013;
}

/* 3. 긴 대시 가상 서체 덩어리에 높은 글리프 기능("case") 주입 */
@font-feature-values HighDashFont {
  @styleset {
    uppercase-dash: 1;
  }
}

html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  font-family: 'HighDashFont', 'ABC Otto', -apple-system, sans-serif;
  background-color: #ffffff; color: #000000;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: proportional-nums lining-nums;
  font-feature-settings: "pnum" 1, "lnum" 1;
}

/* 4. 긴 대시 가상 폰트 구역에 강제로 대문자 정렬 맵 가두기 */
@layer {
  html, body {
    font-feature-settings: "pnum" 1, "lnum" 1, "case" 1;
  }
  input, textarea, p, a, span {
    font-variant-numeric: proportional-nums lining-nums;
  }
}

/* 공통 레이아웃 컴포넌트 */
.grid-container, .archive-grid-container {
  display: grid; 
  grid-template-columns: repeat(6, 1fr); 
  column-gap: var(--grid-gap); 
  padding: var(--site-padding); 
  width: 100%; 
  height: 100%; 
  position: relative;
}

.navigation-header {
  grid-column: 1 / 2; 
  font-size: var(--font-size-base); 
  line-height: 1.4; 
  letter-spacing: -0.01em; 
  z-index: 10;
}
.navigation-header a { color: #000000; text-decoration: none; display: block; }
.artwork-title-italic, .masonry-title-italic { font-style: italic; }

.page-main-content, .archive-list-container {
  position: absolute;
  top: calc(var(--site-padding) + (var(--font-size-base) * 1.4 * 3) + clamp(40px, 6vh, 100px));
  left: var(--site-padding);
  right: var(--site-padding);
  bottom: var(--site-padding);
}

@media (max-width: 768px) {
  html, body { overflow: visible !important; height: auto !important; }
  .grid-container, .archive-grid-container { 
    display: block !important; 
    padding: var(--site-padding) !important; 
    height: auto !important; 
  }
  .navigation-header { width: 100% !important; display: block !important; margin-bottom: 30px !important; }
  
  .page-main-content, .archive-list-container {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }
}

/* PC 화면 커스텀 텍스트 커서 베이스 인프라 */
.custom-image-counter {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  font-family: 'ABC Otto', serif;
  font-style: italic;
  font-size: var(--font-size-base);
  color: var(--color-yellow) !important;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  display: none;
}

/* 모바일 탭 터치 하이라이트 투명화 조치 */
.Mobile-roll-card, .Mobile-roll-card * {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation;
}

/* 💡 [신규 추가 보장] 이미지 아카이브 호버 텍스트 좌하단 패딩 가동 조치 */
.masonry-inner-hover-layer span {
  display: block;
  line-height: 1.4;
}