@charset "UTF-8";

/* 
	noto-sans - https://fonts.google.com/noto/specimen/Noto+Sans+KR 
*/ 
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@553&display=swap');

.noto-sans {
  font-family: "Noto Sans KR", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.bmhannapro-font {
    font-family: 'BMHANNAPro', sans-serif !important; /* 한글 폰트 적용 */
}

/* Common */
.custom-link {
    color: #ff63c3;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 16px;
 }

.custom-link:hover { 
   	text-decoration: underline;
 }
 
.year-badge {
	background-color: #444;
	color: #fff; 
	font-size: 12px; 
	padding: 2px 6px; 
	border-radius: 4px; 
	vertical-align: middle;
}

.rounded-image {
    border-radius: 15px; /* 둥근 테두리의 정도 */
    overflow: hidden;    /* 이미지가 둥근 테두리 안에 깔끔하게 표시되도록 */
 }

/* index.html */

.profile-sub {
	font-size: 20px;
}

.desc-main {
	font-size: 23px !important;
}

.desc-sub {
	font-size: 15px !important;
}

.timeline-main {
	font-size: 28px !important;
	font-weight: bold !important;
}

.timeline-sub {
	font-size: 17px !important;
}


/* works.html */

.media-block img {
    object-fit: cover; /* 또는 contain, 이미지 비율 유지하면서 영역에 맞춤 */
} 

.blog-main {
	font-size: 35px !important;
}

.blog-sub {
	font-size: 16px !important;
	font-weight: bold !important;
}

.platform-skill-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px; /* 각 줄 사이 간격 */
}

.platform-skill-badge {
    background-color: #6fbf7354; /* 배지 배경색 */
    color: #fff; /* 배지 글자색 */
    font-size: 12px; /* 배지 글자 크기 */
    padding: 0px 8px; /* 배지 안쪽 여백 */
    border-radius: 4px; /* 배지 모서리를 둥글게 */
    margin-right: 8px; /* 배지와 텍스트 간격 */
    padding-top: 1px; /* 배지 중앙처리 */
}

.platform-skill-item a {
    color: #ff66cc; /* 링크 색상 */
    text-decoration: none;
    font-size: 14px; /* 링크 글자 크기 */
}

.platform-skill-item a:hover {
    text-decoration: underline; /* 링크 호버 시 밑줄 */
}

.work-foryoujob-main {
    font-size: 26px !important;
    font-weight: bold;
    margin-bottom: -3px;
}

.work-foryoujob-content {
    font-size: 16px !important;
}

.work-foryoujob-link {
    color: #009ffd;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 16px;
    font-weight: bold;
}

.work-foryoujob-link:hover { 
   	text-decoration: underline;
}

.work-foryoujob-ul {
    font-size: 15px;
}

.portfolio-item-img img {
    width: 100%; /* 부모 요소의 너비에 맞춤 */
    height: 200px; /* 원하는 높이 지정 */
    object-fit: cover; /* 비율을 유지하면서 잘라서 맞춤 */
    border-radius: 8px; /* 모서리를 둥글게 (선택 사항) */
}

.portfolio-grid {
    margin-bottom: 180px; /* 그리드 아래 여백 추가 */
} 


/* *-post.html */
.post-main {
	font-size: 60px !important;
	font-weight: 600 !important;
  	margin: 0 !important;
}

.post-main-content {
	font-size: 16px !important;
}


/* *-uses.html */
.uses-main {
	font-size: 18px !important;
	color: #aaa !important;
}

.uses-content {
    font-size: 16px !important;
}

.user-small-ex {
	font-size: 16px !important;
	color: #007ced !important;
}
 
.uses-thumbnail img { 
    width: 100%; /* 부모 요소에 맞게 너비 조정 */
    height: 400px; /* 원하는 높이 설정 */
    object-fit: cover; /* 이미지가 요소를 채우도록 설정 */
    object-position: center; /* 중앙 부분을 표시 */
}

.uses-real-link {
    color: #6a94a2;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 16px;
}

.uses-happy-link {
    color: #e2565f;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 16px;
}

.user-happy-link:hover { 
   	text-decoration: underline;
}

.uses-macbook-link {
    color: #5990ff;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 16px;
}

.user-macbook-link:hover { 
   	text-decoration: underline;
}

.uses-monitor-link {
    color: #ff549d;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 16px;
}

.user-monitor-link:hover { 
   	text-decoration: underline;
}

.uses-ipad-link {
    color: #ff4929;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 16px;
}

.user-ipad-link:hover { 
   	text-decoration: underline;
}

.uses-SPM-link {
    color: #ff6248;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 16px;
}

.user-SPM-link:hover { 
   	text-decoration: underline;
}

.uses-k7pro-link {
    color: #ff6961;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 16px;
}

.user-k7pro-link:hover { 
   	text-decoration: underline;
}

.uses-majextand-link {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 16px;
}

.user-majextand-link:hover { 
   	text-decoration: underline;
}

.uses-nuphy-link {
    color: #fad162;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 16px;
}

.user-nuphy-link:hover { 
   	text-decoration: underline;
}

.uses-omen-link {
    color: #80b1ff;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 16px;
}

.user-omen-link:hover { 
   	text-decoration: underline;
}

.uses-zoom-link {
    color: #94ed87;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 16px;
}

.user-zoom-link:hover { 
   	text-decoration: underline;
}


/* *-hobby.html */
.hobby-main {
	font-size: 18px !important;
	color: #aaa !important;
}

.hobby-apex-main {
    font-size: 26px !important;
    font-weight: bold;
    margin-bottom: -3px;
}

.hobby-apex-content {
    font-size: 16px !important;
}

.hobby-apex-link {
    color: #fa0200;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 15px;
}

.hobby-relax-link {
    color: #f5c056;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 15px;
}

.hobby-study-link {
    color: #1e8cff;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 15px;
}

.hobby-apex-link:hover { 
   	text-decoration: underline;
}

.hobby-youtube-link {
    color: #ffa600;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 16px;
}

.hobby-youtube-link:hover { 
   	text-decoration: underline;
}

/* List Table */
.company-table-title {
	font-size: 30px !important;
	font-weight: 600 !important;
  	margin: 0 !important;
  	text-align: center;
}

.table-container {
    max-height: 250px; /* 스크롤 영역 */
    overflow-y: auto;
}

.company-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0px !important; 
}

.company-table th,
.company-table td {
    padding: 8px 12px;
    border: 1px solid #ddd;
    text-align: center;
}

.company-table th {
    font-weight: bold;
    background: #6fbf7354;
}