@import url(https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css);

/* =============================================
   헤더 텍스트
   ============================================= */
#top-navigation .ident .vc-name .position h2 {
	font-size: 19px;
	line-height: 3.4em;
}

@media screen and (max-width: 500px) and (min-width: 100px) {
	#top-navigation .ident .vc-name .position h2 {
		font-size: 12px;
	}
}

#top-navigation .ident .vc-name .name h1 {
	font-weight: 400 !important;
	font-size: 32px;
	line-height: 2.8em;
}

body #top-navigation .ident .vc-name .name h1 {
	font-weight: 600 !important;
}

.name-cot {
	font-size: 17px;
	font-weight: 400;
}

#details .quote h4.subtitle {
	color: #3f3f3f;
	line-height: 30px;
	font-size: 16px;
}


/* =============================================
   프로필 사진 (.photo-01 / .vc-photo)
   CSS 로드 순서: style.css → samuel.css → custom.css
   custom.css가 가장 나중에 로드되므로 최우선 적용

   samuel.css 기본값:
     background: hwj3.jpg
     background-position: center center
     background-size: cover
     min-height: 360px

   여기서 leebon.jpeg 로 교체 + position 조정
   ============================================= */

/* 기본 (모든 화면): leebon.jpeg, 상단부터 자연스럽게 */
.photo-01 {
	background: url('../images/leebon.jpeg') no-repeat center top;
	background-size: cover;
}

/* ── PC (992px 이상) ──
   cover + center top: 얼굴 전체 자연스럽게 표시
   ────────────────────────────────────────────── */
@media (min-width: 992px) {
	#top-navigation .ident .vc-photo.photo-01 {
		background-size: cover;
		background-position: center top;
		background-repeat: no-repeat;
		min-height: 360px;
	}
}

/* ── 태블릿 (769px ~ 991px) ──
   contain: 얼굴 전체 잘리지 않게, 흰 배경
   ────────────────────────────────────────────── */
@media (max-width: 991px) and (min-width: 769px) {
	#top-navigation .ident .vc-photo.photo-01 {
		min-height: 320px;
		height: 320px;
		background-size: contain;
		background-position: center top;
		background-repeat: no-repeat;
		background-color: #ffffff;
	}
}

/* ── 모바일 (768px 이하) ──
   contain + 높이 260px: 사진이 화면 전체 차지하지 않게
   이름/메뉴가 함께 보이도록
   ────────────────────────────────────────────── */
@media (max-width: 768px) {
	#top-navigation .ident .vc-photo.photo-01 {
		min-height: 260px !important;
		height: 260px !important;
		background-size: contain !important;
		background-position: center top !important;
		background-repeat: no-repeat !important;
		background-color: #ffffff;
	}
}

/* ── 초소형 모바일 (480px 이하) ──
   높이를 240px로 더 줄여서 화면 활용도 높임
   ────────────────────────────────────────────── */
@media (max-width: 480px) {
	#top-navigation .ident .vc-photo.photo-01 {
		min-height: 240px !important;
		height: 240px !important;
		background-size: contain !important;
		background-position: center top !important;
		background-repeat: no-repeat !important;
		background-color: #ffffff;
	}
}

/* position-title 모바일 패딩 */
@media (max-width: 543px) {
	#top-navigation .ident .vc-name .position .position-title {
		padding: 15px 20px 15px 20px !important;
		min-height: auto;
	}
}


/* =============================================
   내부 페이지 공통
   ============================================= */
.inner-content .inner-section {
	padding: 22px 22px;
}


/* =============================================
   포트폴리오 필터 (모바일)
   ============================================= */
@media (max-width: 767px) {
	.port-filter ul li {
		display: block;
		margin-bottom: 5px;
	}
}


/* =============================================
   포트폴리오 카드 배지
   ============================================= */
.ddi-1 {
	position: absolute; top: 0; opacity: 0.8; right: 0;
	background: #552BD9; color: #fff;
	min-width: 50px; text-align: center; padding: 3px 5px;
}
.ddi-2 {
	position: absolute; top: 0; opacity: 0.8; right: 0;
	background: #2BB0D9; color: #fff;
	min-width: 50px; text-align: center; padding: 3px 5px;
}
.ddi-3 {
	position: absolute; top: 0; opacity: 0.8; right: 0;
	background: #F8B632; color: #fff;
	min-width: 50px; text-align: center; padding: 3px 5px;
}
.ddi-4 {
	position: absolute; top: 0; opacity: 0.8; right: 0;
	background: #F71E30; color: #fff;
	min-width: 50px; text-align: center; padding: 3px 5px;
}
.ddi-5 {
	position: absolute; top: 0; opacity: 0.8; right: 0;
	background: #E0740D; color: #fff;
	min-width: 50px; text-align: center; padding: 3px 5px;
}

/* =============================================
   #back-top 버튼 — 모바일에서 완전 숨김
   원인: back_top.png가 1×1 placeholder라
         화살표 없이 회색 사각형만 노출됨
   모바일에서는 display:none으로 완전 제거
   ============================================= */
@media (max-width: 991px) {
	#back-top {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}
}


/* =============================================
   포트폴리오 카드 링크 버튼
   - 정사각형 아이콘 전용 버튼 (텍스트 없음)
   - link 값이 있는 카드에만 사용
   - fig-description 내 p 태그 아래 삽입
   - 다른 카드에 추가할 때: p 태그 아래 1줄 삽입
   ============================================= */
.portfolio-link-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	min-width: 42px;
	padding: 0;
	margin-top: 8px;
	border: none;
	border-radius: 8px;
	background: #35b5e5;
	color: #ffffff;
	text-decoration: none;
	transition: background .25s, opacity .25s;
	cursor: pointer;
	box-sizing: border-box;
}
.portfolio-link-btn svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	stroke: #ffffff;
}
.portfolio-link-btn:hover,
.portfolio-link-btn:focus {
	background: #1a9fd4;
	opacity: 1;
	text-decoration: none;
	color: #ffffff;
}


/* =============================================
   비트코인닷컴 카드 전용 다중 배지
   - 우상단 고정 (기존 ddi-* 와 동일 위치)
   - 기획(파랑) + 긴급(빨강) 나란히 표시
   ============================================= */
.btc-badges {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.btc-badge {
	display: block;
	min-width: 50px;
	text-align: center;
	padding: 3px 5px;
	font-size: 12px;
	color: #fff;
	opacity: 0.8;
}
.btc-badge-plan   { background: #2BB0D9; }
.btc-badge-urgent { background: #F04C45; }


/* =============================================
   메뉴 active (현재 페이지) 강조 스타일
   - 각 메뉴 li에 active 클래스 추가 시 적용
   - 기존 ui-menu-color 톤보다 밝게 표시
   - 하단 밝은 보더라인으로 명확히 구분
   ============================================= */
.menuitem.active {
	filter: brightness(1.55) !important;
	border-bottom: 3px solid rgba(255, 255, 255, 0.55) !important;
	box-sizing: border-box;
}
.menuitem.active a {
	color: #ffffff !important;
}
.menuitem.active a span {
	color: #ffffff !important;
	font-weight: 600 !important;
}