/* ABC Favorit 폰트 등록 */
@font-face {
  font-family: 'ABCIkarus';
  src: url('fonts/ABCIkarus.otf') format('opentype'); /* 확장자가 otf면 format('opentype') */
  font-weight: normal;
  font-style: normal;
}


:root{--soft:#b4b4b4;--line:#202020}
*{box-sizing:border-box;margin:0}
html{background:#000;color:#fff;font:400 15px/1.7 'ABCIkarus', "Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif;-webkit-font-smoothing:antialiased}
body{min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:1px solid #fff;outline-offset:6px}

/* ===== Header (Sticky Fix) ===== */
.top {
  position: sticky;
  top: 0;
  z-index: 9000;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 28px 40px;
  background: rgba(0, 0, 0, 0.85); /* 약간의 투명도로 뒷 배경이 자연스럽게 비치게 함 */
  backdrop-filter: blur(10px); /* 스크롤 시 뒤에 깔리는 콘텐츠 블러 처리 */
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* 경계선 아주 살짝 */
}
.name{font-size:15px;font-weight:600;letter-spacing:-.01em}
.name img{display:block;height:28px;width:auto}
.tag{font-size:11px;color:var(--soft);text-align:left;flex:1;max-width:340px;margin-left:8vw}
.jump{font-size:11px;color:var(--soft)}
.jump:hover{color:#fff}
.hidden{display:none !important}

.links { display: flex; gap: 28px; align-items: center; }
.links a { color: var(--soft); transition: color 0.2s ease; }
.links a:hover, .links a[aria-current="page"] { color: #fff; }

.dropdown { position: relative; display: inline-block; }
.dropdown-btn { background: none; border: none; color: var(--soft); font-size: inherit; font-weight: inherit; font-family: inherit; cursor: pointer; padding: 0; transition: color 0.2s ease; }
.dropdown:hover .dropdown-btn, .dropdown-btn:hover { color: #fff; }
.dropdown-menu { display: none; position: absolute; top: 100%; right: 0; background: #000; border: 1px solid var(--line); padding: 8px 0; min-width: 120px; flex-direction: column; gap: 4px; z-index: 100; padding-top: 12px; }
.dropdown:hover .dropdown-menu { display: flex; }
.dropdown-menu a { padding: 6px 16px; font-size: 13px; color: var(--soft); white-space: nowrap; transition: color 0.2s, background 0.2s; }
.dropdown-menu a:hover { color: #fff; background: #111; }

.about{padding:72px 40px 56px;max-width:640px;font-size:12px;color:var(--soft)}
.about .small{margin-top:20px;font-size:11px;color:#6a6a6a}

@keyframes in{to{opacity:1}}

/* 📱 모바일 헤더 중앙 정렬 */
@media (max-width:700px){
  .top{
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    padding: 20px;
    gap: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .name img{height:22px; margin: 0 auto;}
  .links{
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    font-size:14px;
    width: 100%;
  }
  .dropdown-menu {
    left: 50%;
    transform: translateX(-50%);
    right: auto;
  }
}

/* ===== About ===== */
.about-page { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 5vw; 
  max-width: 1100px; 
  padding: 0 40px; 
  margin: 12vh auto 10vh;
  align-items: stretch; /* 좌우 상자 높이 동기화 */
}

.about-photo { 
  flex: 1; 
  min-width: 300px; 
  margin: 0; 
  display: flex; 
  flex-direction: column; /* 👈 세로형 플렉스로 설정 (이미지 비율 버그 해결 핵심) */
}

.about-photo img { 
  width: 100%; 
  flex: 1; /* 👈 height:100% 대신 플렉스 채우기 사용 */
  min-height: 0; /* 👈 브라우저 자체 이미지 비율 고집 꺾기 */
  object-fit: cover; 
  display: block; 
}

.about-text { 
  flex: 1.2; 
  min-width: 300px; 
}

.about-text h1 { 
  font-size: 24px; 
  margin-bottom: 24px; 
  font-weight: 500; 
  line-height: 1; /* 로고 이미지 상단 빈 공간 제거 */
}

.about-desc p { 
  font-size: 15px; 
  line-height: 1.8; 
  color: #e4e4e4; 
  margin-bottom: 16px; 
  text-align: justify; 
  word-break: break-all; 
}

/* 👈 마지막 문단 밑의 눈에 안 보이는 빈 여백 제거 (사진 하단선과 높이 완벽 일치용) */
.about-desc p:last-child { 
  margin-bottom: 0; 
}

@media (max-width: 700px) { .about-page { flex-direction: column; margin: 30px auto; padding: 0 20px; } }

.team-section { max-width: 1100px; margin: 0 auto 100px; padding: 80px 40px 0; border-top: 1px solid var(--line); }
.team-section h2 { font-size: 16px; font-weight: 600; margin-bottom: 40px; color: #fff; letter-spacing: 0.05em; }
.team-grid { display: flex; gap: 3vw; justify-content: space-between; }
.member { flex: 1; display: flex; flex-direction: column; }
.member-photo { width: 100%; aspect-ratio: 3 / 4; overflow: hidden; margin-bottom: 20px; background: #111; }
.member-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.member-info { display: flex; flex-direction: column; flex-grow: 1; }
.member h3 { font-size: 15px; font-weight: 500; margin-bottom: 8px; color: #fff; }

/* 팀원 역할(Editor) 텍스트 */
.member p { font-size: 13px; color: var(--soft); margin-bottom: 16px; }

/* 인스타그램 링크 */
.member-insta-link {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  color: var(--soft);
  text-decoration: none;
  align-self: flex-start;
  transition: color 0.2s;
}
.member-insta-link:hover {
  color: #fff;
}

@media (max-width: 700px) { .team-grid { flex-direction: column; gap: 50px; } .team-section { padding: 60px 20px 0; } }

/* ===== 아카이브 (점 네비게이션 & 섹션) ===== */
.side-nav { position: fixed; left: 40px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 20px; z-index: 100; }
.nav-dot-wrapper { display: flex; align-items: center; gap: 15px; cursor: pointer; }
.nav-dot { width: 6px; height: 6px; background: var(--soft); border-radius: 50%; transition: background 0.3s ease, transform 0.3s ease; }
.nav-label { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; letter-spacing: 0.1em; color: #fff; text-transform: uppercase; opacity: 0; transform: translateX(-10px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; }
@media (hover: hover) {
  .nav-dot-wrapper:hover .nav-dot { background: #fff; transform: scale(1.6); }
  .nav-dot-wrapper:hover .nav-label { opacity: 1; transform: translateX(0); }
}

/* 💡 현재 보고 있는 섹션의 닷을 주황색(#df4d1c)으로 활성화 (모바일 강제 적용을 위해 important 사용) */
.nav-dot-wrapper.active .nav-dot {
  background-color: #df4d1c !important;
  transform: scale(1.6) !important;
}

.archive-section-title { max-width: 1400px; margin: 40px auto 20px; padding: 0 40px 12px 140px; border-bottom: 1px solid var(--line); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: #fff; text-transform: uppercase; }
.archive-section-title:first-child { margin-top: 20px; }

.year-selector { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 80vh; gap: 30px; }
.year-btn { font-size: 56px; font-weight: 300; color: var(--soft); background: none; border: none; cursor: pointer; font-family: inherit; transition: color 0.3s, transform 0.3s; }
.year-btn:hover { color: #fff; transform: scale(1.05); }

.archive-container { max-width: 1400px; margin: 0 auto; padding: 10px 40px 60px 140px; display: flex; gap: 16px; align-items: flex-start; }
.archive-col { flex: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.archive-item { cursor: pointer; overflow: hidden; background: #111; transition: opacity 0.3s ease, transform 0.3s ease; }
.archive-item:hover { opacity: 0.85; transform: translateY(-2px); }
.archive-item img { width: 100%; height: auto; display: block; }

/* 모바일 아카이브 (점 위치 미세조정) */
@media (max-width: 700px) { 
  .side-nav { left: 15px; gap: 16px; }
  .archive-section-title { padding: 0 20px 10px 50px; margin: 30px auto 16px; font-size: 11px; }
  .archive-container { padding: 10px 20px 40px 50px; gap: 10px; } 
  .archive-col { gap: 10px; }
}

/* ===== 라이트박스 ===== */
.lightbox { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; padding: 40px; }
.lightbox.active { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8); user-select: none; }
.lightbox-close { position: absolute; top: 24px; right: 32px; background: none; border: none; color: #fff; font-size: 36px; line-height: 1; cursor: pointer; opacity: 0.7; transition: opacity 0.2s; z-index: 10001; }
.lightbox-close:hover { opacity: 1; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: #fff; font-size: 60px; font-weight: 300; cursor: pointer; padding: 20px; opacity: 0.5; transition: opacity 0.2s, transform 0.2s; z-index: 10000; user-select: none; }
.lightbox-nav:hover { opacity: 1; transform: translateY(-50%) scale(1.1); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
@media (max-width: 700px) {
  .lightbox-nav { font-size: 40px; padding: 10px; }
  .lightbox-prev { left: 5px; }
  .lightbox-next { right: 5px; }
}

/* ===== Sound 페이지 ===== */
.sound-page { max-width: 800px; margin: 60px auto 100px; padding: 0 40px; }
.sound-header { display: flex; align-items: flex-start; gap: 30px; margin-bottom: 50px; border-bottom: 1px solid var(--line); padding-bottom: 40px; }
.sound-cover { width: 240px; flex-shrink: 0; aspect-ratio: 1 / 1; background: #111; border-radius: 8px; overflow: hidden; }
.sound-cover a { display: block; width: 100%; height: 100%; }
.sound-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.sound-cover a:hover img { transform: scale(1.05); }
.sound-info { display: flex; flex-direction: column; }
.sound-info h1 { font-size: 26px; font-weight: 600; letter-spacing: 0.02em; margin-top: 0; margin-bottom: 12px; line-height: 1; }
.sound-info p { font-size: 14px; color: var(--soft); }
.track-list { list-style: none; padding: 0; margin: 0; }
.track-list li { display: flex; align-items: baseline; padding: 16px 0; border-bottom: 1px solid #1a1a1a; font-size: 14px; transition: color 0.2s ease; color: #ccc; }
.track-list li:hover { color: #fff; }
.track-list .num { font-family: monospace; font-size: 12px; color: var(--soft); width: 50px; flex-shrink: 0; }
.track-list .title { flex: 1; padding-right: 20px; }
.track-list .artist { color: var(--soft); font-size: 13px; text-align: right; }
@media (max-width: 700px) { 
  .sound-page { margin: 30px auto 60px; padding: 0 20px; } 
  .sound-header { flex-direction: column; align-items: center; text-align: center; gap: 24px; } 
  .sound-info { padding-top: 0; } 
  .track-list li { flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 0; } 
  .track-list .num { width: auto; margin-bottom: 4px; } 
  .track-list .title { padding-right: 0; } 
  .track-list .artist { text-align: left; padding-left: 0; color: #888; } 
}

/* ===== Map 페이지 ===== */
.map-page { max-width: 1440px; margin: 24px auto 110px; padding: 0 40px; }
.map-header { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.map-label { font-size: 24px; font-weight: 800; letter-spacing: 0.05em; color: #fff; font-family: 'Pretendard', sans-serif; text-transform: uppercase; }
.map-count { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--soft); }

.map-layout-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 40px; align-items: start; }
.map-left-pane { display: flex; flex-direction: column; gap: 20px; }
.map-visual-container { position: relative; width: 100%; background: #000; user-select: none; -webkit-user-select: none; }
.world-map-bg { width: 100%; height: auto; display: block; opacity: 0.9; filter: contrast(1.05); }
.flight-path-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
#flight-path { filter: drop-shadow(0 0 5px rgba(255, 71, 71, 0.9)); }
.map-marker { position: absolute; width: 7px; height: 7px; background-color: #fff; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 10px rgba(255, 255, 255, 0.9); z-index: 10; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; }
.map-marker::after { content: ''; position: absolute; top: -15px; left: -15px; right: -15px; bottom: -15px; }
.map-marker .pulse { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.65); border-radius: 50%; animation: radarPulse 2s infinite ease-out; pointer-events: none; box-sizing: border-box; }
.map-marker.origin .pulse { border-color: rgba(255, 71, 71, 0.65); }
.marker-tag { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 9px; letter-spacing: 0.05em; color: #fff; background: rgba(0, 0, 0, 0.85); border: 1px solid #333; padding: 1px 4px; border-radius: 2px; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; white-space: nowrap; }
.map-marker.origin .marker-tag { background: rgba(255, 71, 71, 0.85); border-color: #cc0000; }
.map-marker:hover, .map-marker.active { transform: translate(-50%, -50%) scale(1.45); }
.map-marker:hover .marker-tag, .map-marker.active .marker-tag { opacity: 1; transform: translateX(-50%) translateY(-2px); }
@keyframes radarPulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(5.5); opacity: 0; } }

.distance-tracker { width: 100%; background: rgba(0, 0, 0, 0.75); padding: 14px 20px; border: 1px solid #222; border-radius: 4px; z-index: 15; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; backdrop-filter: blur(4px); display: flex; justify-content: space-between; align-items: center; }
.tracker-label { font-size: 10px; color: #888; letter-spacing: 0.15em; }
.tracker-value-box { display: flex; align-items: baseline; gap: 6px; }
.tracker-value { font-size: 22px; font-weight: 600; color: #fff; letter-spacing: 0.05em; }
.tracker-unit { font-size: 11px; color: #666; }
.map-right-pane { display: flex; flex-direction: column; }
.country-index-head { display: flex; justify-content: space-between; padding: 0 8px 12px; border-bottom: 1px solid #2a2a2a; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 10px; letter-spacing: 0.14em; color: #666; }
.country-list { list-style: none; padding: 0; margin: 0; }
.country-list li { display: flex; flex-direction: column; gap: 6px; padding: 18px 8px; border-bottom: 1px solid #181818; transition: background-color 0.25s ease, padding-left 0.25s ease, border-color 0.25s ease; cursor: default; }
.country-list li:hover, .country-list li.active { background-color: #0b0b0b; padding-left: 14px; border-bottom-color: #3a3a3a; }
.country-list-top { display: flex; align-items: baseline; gap: 14px; }
.country-list .num { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; letter-spacing: 0.08em; color: #666; transition: color 0.25s ease; width: 30px; }
.country-list li:hover .num, .country-list li.active .num { color: #fff; }
.country-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.country-list .country-en { font-size: 16px; font-weight: 600; letter-spacing: 0.04em; color: #e8e8e8; transition: color 0.25s ease; }
.country-list li:hover .country-en, .country-list li.active .country-en { color: #fff; }
.country-list .country-ko { font-size: 12px; font-weight: 400; color: var(--soft); letter-spacing: -0.01em; }
.country-meta { display: flex; justify-content: space-between; align-items: center; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; padding-left: 44px; }
.country-spot { font-size: 10px; letter-spacing: 0.08em; color: #9a9a9a; transition: color 0.25s ease; }
.country-list li:hover .country-spot, .country-list li.active .country-spot { color: #d8d8d8; }
.country-coord { font-size: 9px; letter-spacing: 0.06em; color: #555; }

@media (max-width: 1024px) { 
  .map-layout-grid { grid-template-columns: 1fr; gap: 40px; } 
  .map-page { margin: 16px auto 70px; padding: 0 20px; } 
}
@media (max-width: 700px) { 
  .map-page { margin: 16px auto 70px; padding: 0 20px; } 
  .map-label { font-size: 16px; } 
  .map-marker { width: 5px; height: 5px; } 
  .tracker-value { font-size: 18px; } 
  .country-list li { padding: 16px 4px; } 
  .country-meta { padding-left: 0; flex-direction: column; align-items: flex-start; gap: 2px; } 
}

/* ===== 로딩 / 홈 ===== */
.loader { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #000; display: flex; align-items: center; justify-content: center; z-index: 99999; transition: opacity 0.8s ease, visibility 0.8s ease; }
.loader-logo { width: 340px; animation: pulse 1.2s infinite alternate; }
.loader.hidden { opacity: 0; visibility: hidden; }
@keyframes pulse { 0% { opacity: 0.2; transform: scale(0.98); } 100% { transform: scale(1); } }

/* ===== 프로젝트 페이지 ===== */
.project-page { max-width: 1400px; margin: 40px auto 100px; padding: 0 40px; min-height: 60vh; }
.project-header { margin-bottom: 60px; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.project-title { font-size: 24px; font-weight: 600; letter-spacing: 0.05em; color: #fff; margin-bottom: 8px; }
.project-desc { font-size: 14px; color: var(--soft); }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 40px; }
.project-card { display: flex; flex-direction: column; gap: 16px; cursor: pointer; transition: transform 0.3s ease; text-decoration: none; }
.project-card:hover { transform: translateY(-4px); }
.project-thumb { width: 100%; aspect-ratio: 4 / 3; background: #111; border: 1px solid #1a1a1a; overflow: hidden; position: relative; }
.project-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.project-card:hover .project-thumb img { transform: scale(1.05); }
.project-info h3 { font-size: 16px; font-weight: 500; color: #fff; margin-bottom: 4px; }
.project-info p { font-size: 13px; color: var(--soft); }

/* ===== 프로젝트 상세 페이지 ===== */
.project-detail-page { max-width: 750px; margin: 40px auto 100px; padding: 0 40px; }
.project-detail-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 60px; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.project-detail-title { font-size: 22px; font-weight: 600; letter-spacing: 0.02em; color: #fff; text-transform: uppercase; }
.project-back-btn { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; letter-spacing: 0.1em; color: var(--soft); text-transform: uppercase; transition: color 0.2s ease; cursor: pointer; }
.project-back-btn:hover { color: #fff; }

.editorial-grid { display: flex; flex-wrap: wrap; gap: 24px 2%; margin-bottom: 80px; }
.e-item { display: flex; flex-direction: column; }
.span-5 { width: 40.5%; }
.span-6 { width: 49%; }
.span-8 { width: 66%; }
.span-12 { width: 100%; }
.span-3 { width: 23.5%; }
.span-4 { width: 32%; }
.span-7 { width: 57.5%; }
.offset-1 { margin-left: 8.5%; }
.offset-2 { margin-left: 17%; }
.align-center { justify-content: center; }
.e-item img { width: 100%; height: auto; object-fit: cover; display: block; border: 1px solid #111; }
.e-caption { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 10px; color: var(--soft); margin-top: 16px; letter-spacing: 0.05em; border-bottom: 1px solid #222; padding-bottom: 8px; }
.e-text {
  font-size: 14px;
  line-height: 1.8;
  color: #ccc;
  text-align: justify;       /* 양끝 정렬 유지 */
  word-break: break-all;     /* 빈 공간이 뻥 뚫리지 않도록 글자 단위로 줄바꿈 허용 */
}
.e-text p + p { margin-top: 20px; }
.e-credits { width: 100%; margin-top: 80px; padding-top: 24px; border-top: 1px solid var(--line); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; color: var(--soft); line-height: 1.8; }
.e-credits strong { color: #fff; font-weight: normal; margin-right: 8px; }

/* 💡 모바일 상세 페이지 레이아웃 및 여백/방해 요소 전면 초기화 (JS로 클래스 부여) */
@media (max-width: 700px) {
  .project-detail-page { padding: 0 20px; }
  .project-detail-header { flex-direction: column; gap: 16px; align-items: flex-start; margin-bottom: 40px; }
  .e-credits { margin-top: 40px; }

  /* JS로 부여되는 클래스를 통해 100% 확장 (인스타그램 인앱 브라우저 완벽 대응) */
  .mobile-full-width {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 20px !important;
    display: block !important; 
  }

  .mobile-full-width img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
}

/* ===== 모바일 헤더 메뉴 한 줄에 맞추기 ===== */
@media (max-width: 768px) {
  .top nav.links {
    display: flex;
    flex-wrap: nowrap; /* 억지로 다음 줄로 넘어가는 것 방지 */
    justify-content: center;
    gap: 8px; /* 메뉴 사이사이의 띄어쓰기 간격 줄이기 */
  }
  
  .top nav.links a, .dropdown-btn {
    font-size: 13px; /* 모바일용 글씨 크기 */
    letter-spacing: 0; /* 글자 사이 간격 좁히기 */
    padding: 0 2px; /* 좌우 여백 좁히기 */
    white-space: nowrap; /* 단어가 쪼개지거나 줄바꿈되는 것 강제 방지 */
  }
}

/* ===== 이스터에그: 네거티브(색상 반전) 무한 유지 모드 ===== */
html {
  transition: filter 0.8s ease; 
}

html.invert-mode {
  filter: invert(100%); 
}

/* 안내 문구(토스트) 디자인 */
.easter-egg-toast {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff; /* 화면이 반전되면 까만색 바탕으로 보입니다 */
  color: #000;      /* 화면이 반전되면 하얀색 글씨로 보입니다 */
  padding: 12px 24px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.05em;
  z-index: 100000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.easter-egg-toast.show {
  opacity: 1; /* 활성화 시 서서히 나타남 */
}

/* ===== 홈 화면: 레이아웃 & 스르륵 등장 효과 ===== */

body.page-home {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.home-single {
  flex: 1; /* 남은 공간 모두 차지하게 하여 그래픽을 위로 올림 */
  position: relative; /* HUD 배치를 위한 기준점 */
  display: flex;
  flex-direction: column; /* 메인 사진과 텍스트 로고를 세로로 배치 */
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  margin-top: -10vh; /* 그래픽을 살짝 더 위로 끌어올림 */
  gap: 30px; /* 사진과 텍스트 로고 사이 간격 */
}

.home-graphic {
  width: 100%;
  max-width: 700px; /* 메인 사진 크기 유지 */
  height: auto;
  opacity: 0;
  animation: in 1.4s ease forwards 0.2s; /* 브라운관 지지직 삭제하고 스르륵 등장 */
}

/* 새로 추가한 텍스트 로고(이미지) 스타일 */
.home-text-logo {
  max-width: 300px; /* 텍스트 로고 이미지의 최대 폭 설정 */
  width: 100%;
  height: auto;
  opacity: 0;
  animation: in 1.4s ease forwards 0.4s; /* 사진 등장 후 살짝 늦게 스르륵 등장 */
}


/* ===== 홈 화면 HUD (좌표 & 디지털 시계) ===== */
.home-hud {
  position: absolute;
  bottom: 60px; /* 카피라이트가 들어갈 공간 확보를 위해 살짝 위로 */
  left: 0;
  width: 100%;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* 텍스트 밑줄 맞춤 */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  color: #666; /* 너무 튀지 않는 건조한 회색 */
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-transform: uppercase;
  pointer-events: none; /* 클릭 방해 금지 */
}

.hud-left span, .hud-right span {
  display: block;
}

.hud-right {
  text-align: right;
}

.digital-clock {
  color: #999;
  font-weight: bold;
}

/* 모바일 화면에서는 HUD 크기/여백 축소 */
@media (max-width: 700px) {
  .home-hud {
    padding: 0 20px;
    font-size: 9px;
    bottom: 50px;
  }
}

/* ===== 프로젝트 상세페이지 본문 여백 균형 맞추기 (데스크탑 전용) ===== */
@media (min-width: 701px) {
  .desktop-text-left { transform: translateX(35px); }
  .desktop-text-right { transform: translateX(-35px); }
}