/* Subpage layout overrides for Aerial theme */

html {
  scroll-behavior: smooth;
}

/* Allow page to scroll and content to flow */
body {
  overflow: auto !important;
}

#wrapper {
  position: static !important;
  height: auto !important;
  width: 100% !important;
}

#bg,
#overlay {
  z-index: 0 !important; /* keep in the back */
}

#main {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: auto !important;
  left: auto !important;
  top: auto !important;
  text-align: left !important;
}

#main:before { display: none !important; }

/* Header: move icon nav to top-left; hide big heading */
#header { 
  display: block !important;
  width: 100% !important;
  opacity: 1 !important;
  top: 0 !important;
}

#header h1,
#header p { display: none !important; }

#header nav {
  position: fixed;
  top: 1rem;
  left: 1rem;
  margin: 0 !important;
  z-index: 3;
}
/* 가로 정렬 */
#header nav ul{
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  gap:.6rem;
}
/* 밑점(점선 밑줄) 제거 – 아이콘(::before)은 유지 */
#header nav a{
  border-bottom:none !important;
  text-decoration:none;
}
/* 아이콘 크기 유지 */
#header nav li {
  width: 3.25em !important;
  height: 3.25em !important;
  line-height: 3.5em !important;
  opacity: 1 !important;
  animation: none !important;
}

#header nav a:before {
  font-size: 1.15em !important;
  height: 2.25em !important;
  width: 2.25em !important;
  line-height: 2.25em !important;
}

/* Centered content panel */
.content-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 1.5rem 3rem; /* top padding to avoid nav overlap */
}

.panel {
  width: 100%;
  max-width: 960px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  backdrop-filter: saturate(120%) blur(3px);
  padding: 2rem;
}

.panel h1, .panel h2, .panel h3 { margin-bottom: 0.8rem; }
.panel p { margin: 0.5rem 0 0.5rem; opacity: 0.95; }

/* Strong title for intro */
.panel h1 {
  font-weight: 900 !important;
  letter-spacing: -0.02em;
}

/* Two-column split for intro page */
.panel-split {
  display: grid;
  grid-template-columns: 1fr auto; /* text grows, photo sizes to its content */
  gap: 1.25rem;
  align-items: center;
}

.panel-content { min-width: 0; }

.photo-box {
  width: fit-content;
  max-width: 400px;
  max-height: 400px;
  background: rgba(255, 255, 255, 0.06);
  border: 2px dashed rgba(255, 255, 255, 0.45);
  border-radius: 12px;
  padding: 8px;
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-box img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  border-radius: 10px;
  object-fit: contain;
}

/* Portfolio styles have been moved to assets/css/portfolio.css */

/* Portfolio styles have been moved to assets/css/portfolio.css */

.panel-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  padding: 1rem;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.panel-card:hover { 
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.32);
}

/* Footer flows under content */
#footer {
  position: static !important;
  height: auto !important;
  line-height: 1.6 !important;
  padding: 2rem 0 !important;
  background: none !important;
  text-align: center;
}

@media (max-width: 600px) {
  .content-container { padding-top: 5.5rem; }
  .panel-split { grid-template-columns: 1fr; }
  
  /* Mobile photo box */
  .photo-box {
    max-width: 300px;
    max-height: 300px;
    align-self: center;
  }
  
  /* Portfolio styles have been moved to assets/css/portfolio.css */
}

/* Portfolio responsive styles have been moved to assets/css/portfolio.css */

/* Toast styles have been moved to assets/css/portfolio.css */

/* === Fix: top-left nav must be horizontal on subpages === */
#header nav{
  position:fixed; top:1rem; left:1rem; z-index:1000;  /* 기존 위치 유지 */
}

#header nav ul{
  display:flex !important;
  flex-direction:row !important;
  align-items:center; gap:12px;
  list-style:none !important;
  margin:0; padding:0;
}

/* 아이콘 버튼 기본 모양 */
#header nav ul li{ margin:0; }
#header nav ul li a{
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:50%;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.35);
  color:#fff; text-decoration:none !important;
  transition:transform .15s ease, background .15s ease;
}
#header nav ul li a:hover{ transform:translateY(-2px); background:rgba(0,0,0,.5); }

/* === Fix: remove dots/underlines/ornaments === */
/* Aerial 테마 전역 a { border-bottom: dotted 1px }를 nav에서는 끔 */
#header nav a{ border-bottom:none !important; }  /* (main.css 기본 규칙 차단) */

/* 혹시 남는 의사요소 장식 제거 (::before는 아이콘이므로 제거하지 않음) */
#header nav ul li::before,
#header nav ul li a::after{ content:none !important; }

/* === Fix: keep horizontal nav on portfolio page === */
.portfolio-page #header nav ul{
  display:flex !important;
  flex-direction:row !important;
}

/* === 보강: 고정 위치/수평 + 원형 버튼 + 중앙정렬 + 점/밑줄 제거 === */
/* 고정 위치/수평 */
#header nav{ position:fixed; top:1rem; left:1rem; z-index:1000; }
#header nav ul{
  display:flex !important; flex-direction:row !important;
  align-items:center; gap:12px; list-style:none !important; margin:0; padding:0;
}

/* 원형 버튼 + 중앙정렬 */
#header nav ul li{ margin:0; }
#header nav ul li a{
  width:46px; height:46px; display:grid; place-items:center;
  border-radius:50%;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.35);
  color:#fff; text-decoration:none !important;
}

/* 아이콘 글리프 정렬 안정화 */
#header nav a:before{ line-height:1; font-size:18px; }

/* 밑줄/장식 제거(도트, 의사요소) */
#header nav a{ border-bottom:none !important; }
#header nav ul li::before, #header nav ul li a::after{ content:none !important; }

/* 포트폴리오 페이지에서도 항상 수평 유지 */
.portfolio-page #header nav ul{ display:flex !important; flex-direction:row !important; }

/* ===== Canonical: Top-left header nav - horizontal, circular, centered ===== */
#header nav{ position:fixed; top:1rem; left:1rem; z-index:1000; }

#header nav ul{
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  gap:12px;
  list-style:none !important;
  margin:0 !important; padding:0 !important;
}

/* li의 기존 크기/라인높이 초기화(아이콘 찌그러짐 방지) */
#header nav ul li{
  width:auto !important;
  height:auto !important;
  line-height:1 !important;
  margin:0 !important; padding:0 !important;
}

/* 원형 버튼 + 아이콘 정중앙 */
#header nav ul li a{
  width:46px !important; height:46px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  border-radius:50% !important;
  background:rgba(0,0,0,.35) !important;
  border:1px solid rgba(255,255,255,.35) !important;
  color:#fff !important;
  text-decoration:none !important;
  border-bottom:none !important; /* dotted underline 제거 (main.css 기본 규칙 무력화) */
  transition:transform .15s ease, background .15s ease;
}

/* 폰트어썸 글리프 크기/정렬 안정화 */
#header nav ul li a:before{
  font-size:18px !important;
  line-height:1 !important;
}

/* 라벨 텍스트가 DOM에 있어도 숨김 */
#header nav .label{ display:none !important; }

/* hover 효과 */
#header nav ul li a:hover{
  transform:translateY(-2px);
  background:rgba(0,0,0,.5) !important;
}

/* 모바일: 조금 작게 */
@media (max-width: 600px){
  #header nav ul{ gap:10px; }
  #header nav ul li a{ width:40px !important; height:40px !important; }
  #header nav ul li a:before{ font-size:16px !important; }
}

/* ===== 공용 헤더(좌측 상단) 정렬: 수평·원형·정중앙 + 점/밑줄 제거 ===== */
#header{ display:block !important; width:100% !important; }
#header nav{ position:fixed; top:1rem; left:1rem; z-index:1000; }

#header nav ul{
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  gap:12px;
  list-style:none !important;
  margin:0 !important; padding:0 !important;
}

/* li 기본 치수/라인높이 초기화 */
#header nav ul li{
  margin:0 !important; padding:0 !important;
  width:auto !important; height:auto !important; line-height:1 !important;
}

/* 원형 버튼 컨테이너 */
#header nav ul li a{
  width:46px !important; height:46px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  border-radius:50% !important;
  background:rgba(0,0,0,.35) !important;            /* ← 소수점 표기 보정 */
  border:1px solid rgba(255,255,255,.35) !important; /* ← 소수점 표기 보정 */
  color:#fff !important; text-decoration:none !important;
  border-bottom:none !important; /* main.css의 dotted 밑줄 무력화 */
  transition:transform .15s ease, background .15s ease;
}
#header nav ul li a:hover{ transform:translateY(-2px); background:rgba(0,0,0,.5) !important; }

/* Font Awesome 의사요소 아이콘 크기/정렬 보정 */
#header nav a:before{ line-height:1 !important; font-size:18px !important; }

/* 라벨 숨김 & 장식 제거 */
#header nav .label{ display:none !important; }
#header nav ul li::before, #header nav ul li a::after{ content:none !important; }

@media (max-width:600px){
  #header nav ul{ gap:10px; }
  #header nav ul li a{ width:40px !important; height:40px !important; }
  #header nav a:before{ font-size:16px !important; }
}

/* ===== Fixed top-left nav: clean circle button, perfect centering ===== */

/* 수평/위치 고정 */
#header nav{ position:fixed; top:1rem; left:1rem; z-index:1000; }

/* 가로 플렉스 + 기본 목록 제거 */
#header nav ul{
  display:flex !important;
  flex-direction:row !important;
  align-items:center; gap:12px;
  list-style:none !important;
  margin:0 !important; padding:0 !important;
}

/* li의 잔여 치수/라인높이 초기화 (테마 값 무력화) */
#header nav ul li{
  width:auto !important; height:auto !important;
  line-height:1 !important; margin:0 !important; padding:0 !important;
}

/* ⭐ 앵커 자체가 원형 컨테이너 */
#header nav ul li a{
  width:46px !important; height:46px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  border-radius:50% !important;
  background:rgba(0,0,0,.35) !important;
  border:1px solid rgba(255,255,255,.35) !important;
  color:#fff !important;
  text-decoration:none !important;
  border-bottom:none !important;   /* dotted 밑줄 제거 (전역 규칙 무력화) */
  transition:transform .15s ease, background .15s ease;
}
#header nav ul li a:hover{ transform:translateY(-2px); background:rgba(0,0,0,.5) !important; }

/* ❌ 의사요소로 그리던 '두 번째 원형' 완전 제거 -> 글리프만 남김 */
#header nav ul li a::before{
  /* 글리프(아이콘)만 남기고 컨테이너 역할 제거 */
  width:auto !important; height:auto !important;
  line-height:1 !important; font-size:18px !important;
  margin:0 !important; padding:0 !important;
  border:0 !important; border-radius:0 !important;
  box-shadow:none !important; background:transparent !important;
  position:static !important; transform:none !important;
}

/* 라벨/장식 제거(점, 꼬리 등) */
#header nav .label{ display:none !important; }
#header nav ul li::before, #header nav ul li a::after{ content:none !important; }

/* 활성 메뉴 표시(선택) */
#header nav a.is-active{ background:rgba(255,255,255,.16) !important; border-color:rgba(255,255,255,.5) !important; }

/* 모바일 축소 */
@media (max-width: 600px){
  #header nav ul{ gap:10px; }
  #header nav ul li a{ width:40px !important; height:40px !important; }
  #header nav ul li a::before{ font-size:16px !important; }
}