/* 기본 설정 */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    margin: 0;
    background-color: #f9f9f9;
    color: #333;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* 헤더 */
.site-header {
    background-color: #0b1f3a;
    padding: 10px 0;
    text-align: center;
}

.site-header .logo img {
    height: 50px;
}

/* 포스트 상세 */
.post-detail {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.post-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
}

/* 게시글 썸네일 래퍼 */
.post-thumbnail {
    width: 150px;
    max-width: 150px;   /* 원하면 사이즈 조정 가능 */
    margin: 0 auto 20px auto; /* 가운데 정렬 + 여백 */
    display: flex;
    justify-content: center;
}

/* 썸네일 이미지 스타일 */
.post-thumbnail img {
    width: 100%;           /* 반응형 */
    height: auto;          /* 비율 유지 */
    object-fit: contain;   /* 이미지 깨짐 방지 */
    border-radius: 8px;    /* 모서리 둥글게 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
}

/* 본문 스타일 */
.post-content {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}

.post-content h1{
    color: #0b1f3a;
    margin-top: 30px;
}

/* 본문 테이블 */

/* 타이틀 h2, h3 */
h2 {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin: 20px 0 10px;
  padding-bottom: 5px;
}

h3 {
  font-size: 16px;
  color: #555;
  margin: 5px 0;
}

/*---------------*/        
.rankinsIt_wrap{           
	width:100%;            
	height: auto;           
	max-width:800px;            
	margin:0 auto;            
	padding: 0 10px;            
	box-sizing: border-box;       
}       
.rankinsIt_PrdRowDiv{           
	width:22%;            
	height:auto;            
	float: left;            
	margin: 1.5% 2% 1.5% 0;            
	box-sizing: border-box;            
	border: 1px solid #ddd;            
	padding: 10px;            
	box-sizing: border-box;            
	position: relative;        
}        
.rankinsIt_Rank{            
	width:100%;            
	height:21px;            
	line-height: 20px;            
	text-align: center;            
	color:#fff;            	
	background-color:#0000ff;            
	position: absolute;            
	top:0;            
	left:0;                    
}        
.rankinsIt_PrdInfoDiv h4{  
	color: #000;    
	clear: both;      
	font-size: 16px!important;     
	margin: 10px 0!important;      
	display:-webkit-box;    
	-webkit-line-clamp:3;     
	-webkit-box-orient:vertical;     
	height:60px!important;       
	line-height:20px!important;      
	overflow:hidden;      
	text-overflow:ellipsis;     
	font-weight: 900;      	
}       
.rankinsIt_PrdRowDiv:nth-child(4n){    
	margin-right: 0%;     
}       

.rankinsIt_PrdRowDiv .rankinsIt_ThumbImg{   width:100%;      
	overflow: hidden;       
	margin-bottom: 0px;    
}      
.rankinsIt_PrdRowDiv .rankinsIt_ThumbImg img{    
	margin-top:14px;
	width:100%;      
}      
.rankinsIt_DisInfo{      
	font-size: 14px;       
	color:#999;       
	text-decoration: line-through;    
}      
.rankinsIt_DisPercent{           
	font-weight: 600;      
	font-size: 12px;
	color: #fff;        
	padding: 2px 10px;     
  background-color: #ff0000;
  color: #fff;
  padding: 2px 10px;
  border-radius: 10px;
}      
.rankinsIt_DisPercent.none {
    background-color: #fff;
}
.rankinsIt_DisPercent.none{     
	background-color: #fff;    
}       
.deliInfo {
    float: left;
    height: 16px;
    margin-bottom: 5px;
	  color: #0e17de;
	  font-weight: 200;      
}
.rankinsIt_Price{     
	color: #ae0000;    
	font-size: 16px;  
	font-weight: 600;   
	margin-top: 15px;     
}     
.rankinsIt_detail_info{    
	border-right: 1px solid #ddd;    
	box-sizing: border-box;    
}      

.rankinsItMsg {
	float:left;
	font-size: 9pt;
}
.default_btn {display: inline-block; padding: 2px 10px; /*line-height: 1.42857143;*/ text-align: center; white-space: nowrap; vertical-align: middle;
		font-family:'Roboto','Arial', sans-serif; font-weight:500;
		-ms-touch-action: manipulation;
			touch-action: manipulation;
		-webkit-user-select: none;
		-moz-user-select: none;
			-ms-user-select: none;
				user-select: none;
		background-image: none;
		border: 1px solid transparent; border-radius: 25px; cursor: pointer;
	}
.rankinsIt_btn {
    color: #fff;
    border-color: #3b3ffc;
    background: #3b3ffc;    
}

@media all and (max-width:660px) { 
	.rankinsIt_PrdRowDiv{         
		width:30%;             
		float: left;         
		margin: 1.666% 2% 1.666% 0;   
	}      
	.rankinsIt_PrdRowDiv:nth-child(4n){      
		margin-right: 1.666%;  
	}       
	.rankinsIt_PrdRowDiv:nth-child(3n){     
		margin-right: 0%;   
	}      
}     
@media all and (max-width:500px) { 
	.rankinsIt_PrdRowDiv{ 
	width:48%;
	float: left; 
	margin: 2% 2% 2% 0; 
	}           
	.rankinsIt_PrdRowDiv:nth-child(4n){ 
		margin-right: 1.666%;
	}         
	.rankinsIt_PrdRowDiv:nth-child(3n){    
		margin-right: 1.666%;
	}          
	.rankinsIt_PrdRowDiv:nth-child(2n){ 
		margin-right: 0%;
	}       
}



/* 2022-01-06 */
/* rkiTable 및 셀 고정 정렬 */
.rkiTable {
  display: table;
  width: 100%;
  table-layout: fixed; /* 셀 크기 고정 */
  border-collapse: collapse; /* 경계선 딱 붙이기 */
  border: 1px solid #BDBDBD;
}

.rkiTable ~ .rkiTable {
  border-top: 0;
}

.rkiTable span + span {
  border-left: 1px solid #BDBDBD;
}

.rkiSpan {
  display: table-cell;
  vertical-align: middle;
  padding: 12px;
  box-sizing: border-box;
  word-break: break-word;
}

.rkiNumberInfo {
  width: 12%;
  min-width: 60px;
  text-align: center;
  background-color: #b3e5fc;
}

.rkiProductInfo {
  text-align:center; 
  vertical-align: middle;
  background-color:#b3e5fc;
}

.rkiThumbSpan {
  width: 30%;
  text-align: center;
}

.rkiThumbSpan img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.rkiSpanText {
  width: 58%;
  text-align: left;
  padding-left: 10px;
}

/* 텍스트 블록 라인 정리 */
.rkiSpanText h4 {
  font-size: 14px;
  margin: 5px 0;
}

.rkiSpanText h4 a {
    color: #000000;
    text-decoration: none;
}

.rkiSpanText span {
  display: block;
  margin-top: 8px;
}

.rkiDisInfoTxt {
  font-size: 12px;
  color: #ae0000;
}

.rkiDivBar {
  font-size: 11px;
  color: #ddd;
}

.rkiBPrice {
  font-size: 14px;
  color: #888888;
  text-decoration: line-through;
}

.rkiDisPer {
  font-size: 12px;
  color: #0E17DE;
}

.rkiPriceVal {
  font-size: 14px;
  color: #ae0000;
}

.btn.anchor_btn {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  background-color: #007bff;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
}

/* 줄 높이 및 셀 높이 조정 */
.divRow {
  min-height: 150px; /* 각 행 최소 높이 */
}

/* 본문 테이블 끝*/
/* 푸터 */
.site-footer {
    text-align: center;
    padding: 20px 0;
    background-color: #0b1f3a;
    color: #fff;
}

.site-footer img {
    display: block;
    margin: 0 auto 10px;
}

/* 검색 시작 */
.search-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
}

.search-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.search-modal.active {
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-box {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-width: 400px;
  display: flex;
  gap: 10px;
}

.search-box input {
  flex: 1;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.search-box button {
  padding: 10px 16px;
  font-size: 16px;
  background-color: #0b1f3a;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
/* 검색 끝 */
/* tags  */
.tags {
    margin-top: 20px;
}

.tags ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tags li {
    margin: 0;
}

.tags a.tag-item {
    display: inline-block;
    padding: 6px 12px;
    background-color: #f0f0f0;
    color: #333;
    text-decoration: none;
    border-radius: 20px;
    font-size: 14px;
    transition: background-color 0.3s;
}

.tags a.tag-item:hover {
    background-color: #007BFF;
    color: #fff;
}

/* message */
.rkiMsg {
	display: block;
	font-size: 14px;
	background: #f9f9f9;
	color: #333;
	padding: 10px;
	margin-bottom: 12px;
	border-left: 4px solid #ccc;
	word-break: break-word;
	max-width: 100%;
}


/* 반응형 */
@media screen and (max-width: 600px) {
    .container {
        padding: 10px;
    }

    .post-detail {
        padding: 15px;
    }

    .post-title {
        font-size: 20px;
    }
}

@media (max-width: 600px) {
  .rkiMsg {
    font-size: 13px;
    padding: 8px;
    line-height: 1.4;
  }
}