/* =============================
   Base Reset & Foundations
   ============================= */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
img { display:block; max-width:100%; height:auto; }

/* =============================
   Fonts (Self-hosted)
   - HTML에 Pretendard CDN <link>가 있다면 둘 중 하나만 사용 권장
   ============================= */
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/woff2/Pretendard-Regular.woff2') format('woff2'),
       url('../fonts/woff/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/woff2/Pretendard-Bold.woff2') format('woff2'),
       url('../fonts/woff/Pretendard-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =============================
   Base
   ============================= */
:root {
  --gap: 40px;
  --bg: #111;      /* page bg */
  --bg-2: #000;    /* gallery bg */
  --text: #fff;
  --muted: #aaa;
  --accent: #ffcc00;
}

body {
  margin: 0;
  font-family: 'Pretendard', sans-serif;
  background-color: var(--bg);
  color: var(--text);
  scroll-behavior: smooth;
}

h1, h2, h3, p { margin: 0; padding: 0; }

section { padding: 100px 10%; scroll-margin-top: 100px; }

/* =============================
   Hero
   ============================= */
.hero {
  height: 100vh;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  text-align: left;
  position: relative;
  overflow: hidden;
  padding: 0 10% 40px;
}

.bg-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -1;
}

.hero-text { position: relative; z-index: 1; margin-bottom: 240px; }
.hero-text h1 { font-size: 72px; font-weight: 700; line-height: 1.3; white-space: pre-line; }
.hero-text p { font-size: 22px; font-weight: 300; margin-top: 20px; color: #ccc; }

/* 어두운 오버레이 */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 0;
}

/* =============================
   Navbar
   ============================= */
.navbar {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 999;
  background-color: #101010;
  padding: 10px 60px; box-sizing: border-box;
  /* 원하는 경우 아래 두 줄 주석 해제 -> 영상 위 가독성 강화 */
   /* backdrop-filter: blur(6px); */
   /*background: linear-gradient(#00000080, #00000040 60%, #0000); */
}
.nav-inner { display: flex; justify-content: space-between; align-items: center; }
.logo a { color: #fff; text-decoration: none; font-weight: 900; font-size: 29px; letter-spacing: .5px; }

.nav-menu { list-style: none; display: flex; gap: 40px; margin: 0; padding: 0; }
.nav-menu li a {
  color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: 1px; transition: color .3s ease;
}
.nav-menu li a:hover { color: var(--accent); }

/* =============================
   Profile (Home preview)
   ============================= */
.profile-layout { background-color: var(--bg); color: var(--text); padding: 80px 15% 90px; }
.profile-page .profile-layout { padding: 80px 12% 80px; background-color: #101010; }

.profile-inner { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; margin-bottom: 100px; }
.profile-inner .left h1 { font-size: 50px; font-weight: 800; line-height: 1.3; letter-spacing: -.5px; }
.profile-inner .right h1 { font-size: 42px; font-weight: 900; color: #fff; opacity: .9; text-align: right; }

.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 30px; }
.profile-info h3 { font-size: 22px; font-weight: 700; margin-bottom: 2px; color: #fff; text-align: right;}
.profile-info p { font-size: 16px; color: var(--muted); line-height: 1.7; text-align: right;}

/* =============================
   Section Title (공통)
   ============================= */
.section-title { font-size: 50px; font-weight: 700; color:#fff; text-align:center; margin-bottom: 40px; }

/* =============================
   Gallery
   ============================= */
.gallery { padding: 80px 10%; background-color: var(--bg-2); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap); }

.grid .item {
  background-color: #111; border-radius: 10px; overflow: hidden; text-align: left; transition: transform .3s ease;
}
.grid .item:hover { transform: translateY(-5px); }

/* 링크 초기화(갤러리 전용) + 포커스 가시성 */
.gallery .item { display:block; text-decoration:none; }
.gallery .item:link,
.gallery .item:visited,
.gallery .item:hover,
.gallery .item:active,
.gallery .item:focus-visible { color: inherit; text-decoration: none; }
.item:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ✅ 추가: 어떤 마크업이든 갤러리/그리드 내부 링크는 무조건 밑줄 제거 */
.gallery a, .grid a { color: inherit; text-decoration: none; }
.gallery a:hover, .grid a:hover,
.gallery a:active, .grid a:active,
.gallery a:focus-visible, .grid a:focus-visible { color: inherit; text-decoration: none; }
/* h3/p 안에 링크가 들어오는 구조까지 대비 */
.grid h3 a, .grid p a { color: inherit; text-decoration: none; }

/* 썸네일 레이어 & 전환 (중복 제거, 카드 hover 유지) */
.thumb { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; border-radius: 10px 10px 0 0; }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .25s ease; }
.thumb .thumb-hover { opacity: 0; }
.item:hover .thumb .thumb-hover { opacity: 1; }
.item:hover .thumb .thumb-static { opacity: 0; }

.grid .item h3 { margin: 16px 12px 4px; font-size: 16px; color: #fff; }
.grid .item p { margin: 0 12px 16px; font-size: 12px; color: #888; }



/* =============================
   Media Queries
   ============================= */
@media (max-width: 768px) {
  .hero-text h1 { font-size: 36px; line-height: 1.3; }
  .hero-text p { font-size: 16px; }
  .nav-menu { flex-direction: column; gap: 20px; }
  /* 필요시 2열 고정 원하면 유지, 아니면 auto-fit 레이아웃 그대로 써도 됨 */
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* =============================
   Motion Preferences (접근성)
   ============================= */
@media (prefers-reduced-motion: reduce) {
  .item:hover .thumb .thumb-hover { opacity: 0; }
  .bg-video { display: none; }
}

/* Software badges with icons (sidebar) */
.tool-badges{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tool-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:9999px;background:#2a2a2a;border:1px solid #3a3a3a}
.tool-badge img{width:18px;height:18px;display:block}
.tool-badge span{font-size:12px;font-weight:600;color:#e6e6e6}


/* --- Software Used: compact badges --- */
.tool-badges{
  display:flex; flex-wrap:wrap;
  gap:8px 10px;   /* 행/열 간격 */
  margin:0; padding:0; list-style:none;
}
.tool-badges li{ margin:0; padding:0; list-style:none; }

.tool-badge{
  display:inline-flex; align-items:center; gap:6px;
  height:28px;              /* 전체 높이 (원하면 26~30px로 조절) */
  padding:0 10px;           /* 좌우 여백 */
  border-radius:8px;        /* ← 둥글기(라운딩) 핵심: 6~10px 추천 */
  background:#3a3a3a;       /* 배경 */
  border:1px solid #4a4a4a; /* 테두리 */
  color:#eaeaea;
  font-size:12px; font-weight:600; line-height:1;
  white-space:nowrap;       /* 한 줄 유지 */
  flex:0 0 auto;            /* 내용만큼만 너비 */
}
.tool-badge img{
  width:16px; height:16px;  /* 아이콘 크기 */
  display:block; object-fit:contain;
}
.tool-badge span{ font-size:12px; font-weight:600; }

/* 더 촘촘한 초소형 버전이 필요하면 */
.tool-badges.compact .tool-badge{
  height:26px; padding:0 8px; border-radius:6px; gap:6px; font-size:12px;
}


/* =============================
   Project Detail – Right Sidebar + Centered content + Single-image stills
   ============================= */
.project-page { padding: 120px clamp(24px, 4vw, 64px); max-width: 1400px; margin: 0 auto; }
.project-wrap { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 28vw, 340px); gap: 40px; align-items: start; }
.project-content { text-align: center; }
.project-title { font-size: 36px; font-weight: 800; margin-bottom: 8px; }
.project-subtitle { font-size: 18px; color: #ccc; margin-bottom: 24px; }
.project-hero img { width: 100%; border-radius: 10px; display: block; }
.project-description { margin-top: 20px; color: #ccc; line-height: 1.8; }
/* Stills: one per row, scroll down */
.stills-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 28px; }
.stills-grid img { width: 100%; border-radius: 10px; display: block; }
/* Sticky sidebar */
.project-sidebar { position: sticky; top: 110px; display: grid; gap: 14px; }
@media (max-width: 900px){
  .project-wrap { grid-template-columns: 1fr; }
  .project-sidebar { position: static; }
}
/* 바깥의 중복 .project-sidebar { position: static; } 는 삭제 */
/* Software Used badges: darker + more right padding */
.tool-badge { padding: 0 16px 0 10px; background: #2b2b2b; border: 1px solid #3a3a3a; }
.tool-badge:hover { background: #2f2f2f; border-color: #4a4a4a; }


/* =============================
   Work gallery: larger cards (index only)
   ============================= */
#work.gallery { --gap: 12px; }
#work .grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
@media (min-width: 1440px){ #work .grid { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); } }
@media (min-width: 1920px){ #work .grid { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); } }
/* keep mobile 2-up */
@media (max-width: 768px){ #work .grid { grid-template-columns: repeat(2, 1fr); } }



/* ── Project detail: widen on wide screens ───────────────────────────── */
.project-page {
  /* 컨테이너 폭 제한 제거 + 좌우 패딩은 화면에 비례해 살짝만 */
  max-width: none;
  padding-left: clamp(24px, 3vw, 48px);
  padding-right: clamp(24px, 3vw, 48px);
}

/* 사이드바는 유연하게, 본문은 더 넓게 */
.project-wrap {
  grid-template-columns: minmax(0, 1fr) clamp(280px, 22vw, 360px);
}

/* 아주 큰 화면에서 카드 간격도 살짝 줄이기 */
@media (min-width: 1440px) {
  .project-wrap { gap: 32px; }
}



/* Index: Work 섹션 좌우 여백을 화면폭에 따라 키우기 */
#work.gallery {
  /* 위아래는 80px 유지, 좌우는 최소 64px ~ 최대 220px, 기본은 화면폭의 6% */
  padding: 80px clamp(64px, 6vw, 220px);
}

/* Project detail: roomier side paddings on wide screens */
section.project-page{
  max-width: none !important;
  padding-left:  clamp(24px, 3vw, 100px) !important;
  padding-right: clamp(24px, 3vw, 100px) !important;
}

/* 초와이드 모니터에서 한 단계 더 넉넉하게 (선택) */
@media (min-width: 1920px){
  section.project-page{
    padding-left:  clamp(120px, 12vw, 500px) !important;
    padding-right: clamp(120px, 12vw, 500px) !important;
  }
}

/* =============================
 Profile 개별 page – layout & wrapping fixes
 (모든 규칙에 인라인 주석을 추가하여, 나중에 구조/우선순위 파악이 쉽도록 정리)
============================= */

/* ─────────────────────────────────────────────────────────────
   우측 열(프로필/연락처/경력)이 한 기준선에 정렬되도록 하는 상위 그리드
   - 좌측: 가변(콘텐츠 폭 따라 유동)
   - 우측: 520px 고정 폭(빨간 가이드 라인 기준)
   - column-gap으로 좌/우 칼럼 간격을 관리
   - justify-content:end 으로 전체 그리드를 우측 기준에 맞춤
────────────────────────────────────────────────────────────── */
.profile-page .profile-wrap{
  display: grid;                                 /* 그리드 컨테이너 활성화 */
  grid-template-columns: 1fr 520px;              /* 좌측 유동, 우측 고정 520px */
  justify-content: end;                          /* 우측 끝(기준선)에 칼럼을 밀착 */
  column-gap: 72px;                              /* 좌/우 칼럼 사이 간격 */
}

/* ─────────────────────────────────────────────────────────────
   오른쪽 열 내부 스택(.info)
   - 모든 아이템을 같은 x축(오른쪽) 기준으로 정렬
   - text-align:right 로 내부 텍스트도 우측 정렬
────────────────────────────────────────────────────────────── */
.profile-page .info{
  display: grid;                                 /* justify-items가 동작하도록 grid 사용 */
  justify-items: end;                            /* 자식 아이템을 우측 라인에 정렬 */
  align-items: start;                            /* 각 아이템의 세로 정렬은 상단 기준 */
  text-align: right;                             /* 텍스트 우측 정렬 (h3, p 등) */
  gap: 10px;                                     /* 섹션 내 요소 간 간격(좁게) */
}

/* ─────────────────────────────────────────────────────────────
   하단 두 칼럼(Use Tools / Experience)
   - 우측 레일을 기준으로 좌측/우측 블록을 나란히 배치
   - fixed width를 사용하여 줄바꿈 방지 및 수평 정렬 안정화
────────────────────────────────────────────────────────────── */
.profile-page .two-col{
  display: grid;                                 /* 하단 두 칼럼 컨테이너 */
  grid-template-columns: 240px 300px;            /* 왼쪽 240px, 오른쪽 300px 고정 폭 */
  justify-content: end;                          /* 두 칼럼 묶음을 우측 기준선에 붙임 */
  column-gap: 80px;                              /* 두 칼럼 간 간격 */
}
.profile-page .two-col > section{
  justify-self: end;                             /* 각 섹션 자체도 칼럼 내 우측 정렬 */
  text-align: right;                             /* 섹션 내부 텍스트 우측 정렬 */
}

/* ─────────────────────────────────────────────────────────────
   Experience 텍스트 우측 정렬
   - 블록 전체와 세부 항목(dt/dd)을 우측 정렬로 통일
   - dt/dd 모두 한 줄 유지가 필요하면 아래 wide 구간에서 white-space 추가
────────────────────────────────────────────────────────────── */
.profile-page .exp,
.profile-page .exp dt,
.profile-page .exp dd{
  text-align: right;                             /* 경력 제목/내용 통일 우측 정렬 */
}

/* =============================
 Profile/Experience right align (보조 규칙)
 - 일부 선택자 반복: 특정 우선순위/상황 보장을 위한 중복 선언
============================= */
/* 우측 열의 첫 번째 그룹(‘Profile’ 섹션 가정) 제목 포함 우측 정렬 */
.profile-page .info > .group:first-of-type,
.profile-page .info > .group:first-of-type h3{
  text-align:right;                              /* 첫 그룹 및 h3 텍스트 우측 정렬 */
}
/* Experience 블록 중복 선언(의도: 우선순위 강화) */
.profile-page .exp,
.profile-page .exp dt,
.profile-page .exp dd{
  text-align:right;                              /* 위 규칙과 동일 – 필요 시 통합 가능 */
}

/* ─────────────────────────────────────────────────────────────
   모바일(≤680px)에서는 가독성을 위해 좌측 정렬로 복귀
   - 엄지 스크롤 환경에서 우측 정렬 가독성 저하 방지
────────────────────────────────────────────────────────────── */
@media (max-width:680px){
  .profile-page .info > .group:first-of-type,
  .profile-page .exp,
  .profile-page .exp dt,
  .profile-page .exp dd{
    text-align:left;                             /* 모바일에서는 좌측 정렬로 */
  }
}

/* =============================
 Wide layout tidy (≥1000px)
 - 더 넓은 화면에서 정렬/줄바꿈 제어 강화
============================= */
@media (min-width:1200px){                        /* 문서 상단 주석의 ≥1280px과 달리 코드 기준은 1000px */
  /* 상단 래퍼: 좌 유동 + 우 고정(같은 의미를 재선언하여 우선순위 보강) */
  .profile-page .profile-wrap{
    display:grid;                                 /* grid 컨텍스트 보장 */
    grid-template-columns: minmax(0,2fr) 720px;   /* 좌측은 0~1fr 유동, 우측 520px 고정 */
    column-gap:72px;                              /* 칼럼 간격 유지 */
  }

  /* 오른쪽 열 스택: 하단 여백/정렬을 더 엄격히 */
  .profile-page .info{
    display:grid;                                 /* justify-items 적용을 위해 grid */
    align-items:end;                              /* 각 행의 세로 정렬을 하단에 맞춤 */
    justify-items:end;                            /* 아이템을 우측 라인에 정렬 */
    gap:24px;                                     /* 와이드 구간에서는 여유 있게 간격 */
  }
  .profile-page .info .group,
  .profile-page .info .group h3{ text-align:right; }

  /* 하단 두 칼럼: 고정 폭 유지 + 우측 레일 정렬 + 미세 들여쓰기 */
  .profile-page .two-col{
    grid-template-columns: 200px 380px;           /* 넓은 화면에서는 240/280px로 조정 */
    justify-content:end;                          /* 전체 박스를 우측으로 몰기 */
    column-gap:120px;                              /* 두 칼럼 간 간격 */
    margin-right: 34px;                           /* ▶ 우측 레일에서 34px 안쪽으로 들여쓰기(Use Tools/Experience를 살짝 왼쪽으로) */
  }
  .profile-page .two-col > section{ justify-self:end; }

  /* Experience 항목을 한 줄로 유지하면서 우측 정렬(넘침 방지) */
  .profile-page .exp dt,
  .profile-page .exp dd{
    text-align:right;                             /* 텍스트 우측 정렬 */
    white-space:nowrap;                           /* 줄바꿈 방지(한 줄 유지) */
  }
}

/* ─────────────────────────────────────────────────────────────
   (중복) wide 외부 영역에 동일 규칙이 한 번 더 선언되어 있었음
   - 목적: 일부 빌드/병합 상황에서 우선순위 보강
   - 필요 없다면 아래 중복 블록은 정리 가능
────────────────────────────────────────────────────────────── */
.profile-page .two-col > section{ justify-self:end; }   /* 위와 동일 규칙(중복) */
.profile-page .exp dt,
.profile-page .exp dd{
  text-align:right;                                     /* 위와 동일 규칙(중복) */
  white-space:nowrap;
}




/* =============================
Optional: unify font (if needed)
Uncomment if you want a global font in this page only
============================= */
/*
.profile-page{
font-family: 'Pretendard', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
}
*/


/* =============================
Optional: right-align phone/email (adjust selectors to your markup)
============================= */
/*
.profile-page .contact .phone,
.profile-page .contact .email{
text-align:right;
}
*/