@charset "utf-8";

/*
	[프로그램팀 맞춤제작 및 수정 CSS]

	copyright(c) 상상너머·원데이넷 all rights reserved.
	허용된 라이센스이외 무단도용재배포를 금합니다.
	본 소스는 모두 (주)상상너머의 지적 재산이며, 이에 대해 무단도용 및 수정 재배포/재편집등을 절대 금하며 적발 시 법적 대응을 할 것임을 경고합니다.

	※ css 추가 시, 반드시 날짜와 작업자 이니셜을 기재바랍니다.

	===============================================================================
	반응형으로 제작되어 임의적인 CSS추가는 문제가 될 수 있으니 디자인팀과 반드시 상의바랍니다.
	===============================================================================
*/


.kku_container {
	text-align: center;
	max-width: 400px;
	margin: 0 auto;
	padding: 20px;
  }
  
  .kku_title {
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 15px;
	padding: 20px 0;
  }
  
  .kku_desc {
	font-size: 14px;
	color: #888;
	margin-bottom: 5px;
  }
  
  .kku_highlight {
	font-size: 16px;
	font-weight: bold;
	color: #000;
	margin-bottom: 20px;
  }
  
  .kku_kakao_btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #ffe812;
	border: none;
	border-radius: 10px;
	padding: 15px 20px;
	font-size: 16px;
	font-weight: bold;
	width: 100%;
	cursor: pointer;
	margin-bottom: 15px;
  }
  
  .kku_kakao_icon {
	background: #000;
	color: #FDFBF6;
	border-radius: 50%;
	font-size: 12px;
	padding: 6px 8px;
	margin-right: 10px;
  }
  
  .kku_kakao_text {
	flex: 1;
	text-align: left;
  }
  
  .kku_kakao_img {
	width: 40px;
	height: 40px;
  }
  
  .kku_sub {
	font-size: 13px;
	color: #666;
	margin: 20px 0;
  }
  
  .kku_login_box {
	margin-top: 30px;
  }
  
  .kku_login_text {
	font-size: 14px;
	margin-bottom: 10px;
  }
  
  .kku_login_btn {
	width: 100%;
	padding: 12px;
	border: 1px solid #ddd;
	border-radius: 10px;
	background: #FDFBF6;
	font-size: 15px;
	cursor: pointer;
  }
  .kku_login_btn:hover {
	background: #f5f5f5;
  }

  
  /* ====== 기본 변수 ====== */
:root{
  --CENTER: 640px;     /* 가운데 본문 폭 */
  --SIDE: 400px;       /* 좌/우 사이드 폭 */
  --GAP: 0px;          /* 본문과 사이드 사이 간격 (원하면 16px 등) */
  --HEADER: 30px;       /* 상단 고정 헤더 있으면 높이 입력 (예: 60px) */
  --LINE: #e1e1e1;
  --RADIUS: 12px;
  --BG: #FDFBF6;
  --TEXT: #222;
}

  
/* ====== 좌/우 사이드: PC에서만 표시 ======
   주의) 미디어쿼리에 calc/var 조합은 브라우저마다 미묘해서
   '정수 값'으로 명확히 처리 (640+400+400 = 1440)
*/
@media (min-width: 1440px) {
  .finalLineL,
  .finalLineR {
    position: fixed;
    top: var(--HEADER);
    height: calc(100vh - var(--HEADER));
    display: flex;
    align-items: flex-start;
    /*background: #FDFBF6; */
    z-index: 70;
  }
  /* 왼쪽: 화면 가로의 중앙(50%)에서 CENTER/2(=320px)만큼 왼쪽 + SIDE 만큼 더 왼쪽 */
  .finalLineL {
    top: 150px;
    width: auto; text-align:center;
    left: calc(50% - 240px - var(--SIDE) - var(--GAP)); display:flex;
    /*border-right: 1px solid var(--LINE);*/
  }
  /* 오른쪽: 화면 가로의 중앙(50%)에서 CENTER/2(=320px)만큼 오른쪽 + GAP */
  .finalLineR {
    top: 50px;
    width: var(--SIDE);
    left: calc(50% + 360px + var(--GAP));
    /* border-left: 1px solid var(--LINE); */
    animation: floatUpDown 3s ease-in-out infinite;
  }
  
  @keyframes floatUpDown {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
  }
  /* 사이드 내부만 스크롤 */
	.finalLineR .side-scroll ,
	.finalLineL .side-scroll {
    overflow: auto;
    max-height: 100%;
    width: 100%;
    padding: 16px;  
  }

  
  .finalLineL_qr {margin:40px 0;text-align:center;}
  .finalLineL_qr img {width:120px;}
  .finalLineL_qr p {font-size:16px; font-weight:700; color:#423E34;}
  .finalLineL_qr span  {font-size:11px; color:#423E34;}

	.app_down {display:flex; gap:7px;}
	.app_down img {width:120px;}




}


/* ====== 좌측 데모 요소(원본 교체 가능) ====== */
.finalLineL .brandimgbox img {width:200px;}
.finalLineL .brandimgbox .logo_txt {font-size:16px; }
.finalLineL .brandimgbox .logo_txt b {font-weight:800; color:#EE2D24; margin-top:5px;}
.finalLineL .brandimgbox img.brimg{
  width: 185px; height: auto; display: block;
  /* border: 1px solid var(--LINE); border-radius: var(--RADIUS);*/
}
.finalLineL .brand-search .text_search {display:flex;align-items:center;gap:7px;margin:60px 0 30px 0;border:2px solid #EE2D24;border-radius:12px;box-sizing:border-box;}
.finalLineL .brand-search input[type="text"] {flex:1; margin-left:3px;height:36px;padding:0 10px;font-size:14px;border-radius:12px;color:#423E34;background:#FDFBF6;}
.finalLineL .brand-search input[type="text"]::placeholder {color:#BEB7A8;font-size:14px;}
.finalLineL .brand-search .Icon_Search {width:46px;height:36px;border-radius:50%; background:#FDFBF6;display:flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box;}
.finalLineL .brand-search .Icon_Search img {width:22px;height:22px;object-fit:contain;}
.finalLineL .recommend_search {margin-top:14px; overflow:hidden; width:230px; }
.finalLineL .recommend_search p {color:#423E34; opacity:0.7;font-weight:700;font-size:14px; text-align:center; margin:8px 0 12px;}
.finalLineL .recommend_search .chips {display:flex;flex-wrap:wrap;gap:4px; justify-content:center;}
.finalLineL .chip {display:inline-block;padding:7px 10px;border-radius:999px;background:#EFE8D8;border:none;font-size:13px;color:#423E34; border:1px solid #423E3480; white-space:nowrap;cursor:pointer;}
.finalLineL .chip:hover {background:#423E34;color:#FDFBF6;}

/* ====== 우측 상품 리스트 데모 ====== */
.finalLineR .section-title-wrap{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.finalLineR .section-title{ margin:0; font-size:18px; }
.finalLineR .recommen-box{
  border:1px solid var(--LINE); border-radius: var(--RADIUS); background:#FDFBF6; padding:16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.finalLineR .itembox{ display:grid; gap:12px; }
.finalLineR .prod{
  display:grid; grid-template-columns: 120px 1fr; gap:12px; position:relative;
}
.finalLineR .thumb{
  position:relative; width:100%; padding-bottom:100%;
  overflow:hidden; border-radius:var(--RADIUS); border:1px solid var(--LINE);
}
.finalLineR .thumb > img, .finalLineR .thumb > video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:var(--RADIUS);
}
.finalLineR .rank{ position:absolute; top:6px; left:6px; background:#111; color:#FDFBF6; border-radius:999px; font-size:13px; min-width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; padding:0 8px; }
.finalLineR .prod h4{ margin:0 0 6px 0; font-size:15px; line-height:1.35; }
.finalLineR .org{ color:#777; text-decoration:line-through; font-size:14px; display:block; margin-bottom:4px; }
.finalLineR .row{ display:flex; align-items:center; gap:8px; }
.finalLineR .price{ font-weight:700; font-size:18px; }
.finalLineR .rate{ color:#ff7327; font-weight:700; font-size:14px; }
.finalLineR .basket{
  margin-left:auto; display:inline-flex; width:32px; height:32px; align-items:center; justify-content:center;
  border:1px solid var(--LINE); border-radius:8px; text-decoration:none;
}
.finalLineR .prod-link{
  display:grid; grid-template-columns: 120px 1fr; gap:12px; position:relative;
  text-decoration:none; color:inherit;
}
.finalLineR .prod-link:hover{
  text-decoration:none; color:inherit;
}


.join-benefit {margin:0; text-align:center; font-size:17px; font-weight:600; line-height:1.4; color:#423E34; margin-top:60px; }
.join-benefit b {position:relative;font-weight:800;color:#423E34;z-index:1; padding:0 2px;}
.join-benefit b::after {content:"";position:absolute;left:0;bottom:2px;width:100%;height:40%; background:#FFD34280;border-radius:8px;z-index:-1;}



/* 1440 미만: 사이드 숨김, 본문만 */
@media (max-width: 1440px) {
   .finalLineR,	.finalLineL, .finalLineL_qr, .app_down {display: none;}
}







.kku_wrap{max-width:680px;margin:0 auto;background:#FDFBF6;overflow:hidden}

/* ===== 상단 고객센터 안내 ===== */
.kku_wrap .kku_header{text-align:center;padding:24px 16px}
.kku_wrap .kku_header h1{font-size:20px;font-weight:500}
.kku_wrap .kku_header h2{font-size:20px;font-weight:600;margin-top:8px}
.kku_wrap .kku_header h2 span{color:#f59e0b}
.kku_wrap .kku_note{background:#000;color:#FDFBF6;font-size:13px;text-align:center;padding:6px}

.kku_wrap .kku_contact{display:flex;justify-content:space-between;align-items:center;padding:18px 16px;border-bottom:1px solid #eaeef5}
.kku_wrap .kku_contact span{display:flex;align-items:center;font-size:16px;font-weight:600}
.kku_wrap .kku_contact span::before{content:"✉";margin-right:8px}
.kku_wrap .kku_contact strong{font-size:18px}

.kku_wrap .kku_time{display:flex;justify-content:space-between;gap:14px;padding:14px 16px;font-size:15px;border-bottom:1px solid #eaeef5;background:#f3f4f6;flex-wrap:wrap}
.kku_wrap .kku_time .kku_box{display:flex;align-items:center;gap:6px;font-weight:700}
.kku_wrap .kku_time .kku_box span{background:#111;color:#FDFBF6;padding:2px 6px;border-radius:4px;font-size:13px}
.kku_wrap .kku_time .kku_holiday{color:#e11d48;font-size:14px;margin-top:6px;font-weight:700}

.kku_wrap .kku_section{padding:20px 16px;border-bottom:1px solid #eaeef5}
.kku_wrap .kku_section h3{font-size:18px;margin:0 0 12px;font-weight:800;display:flex;align-items:center;gap:6px}
.kku_wrap .kku_section h3::before{content:"©";font-size:20px}
.kku_wrap .kku_section p{font-size:14px;color:#222}
.kku_wrap .kku_notice{font-size:13px;color:#58677a;margin-top:12px}

.kku_wrap .kku_law{background:#111;color:#FDFBF6;padding:12px 16px;font-size:14px;font-weight:800}
.kku_wrap .kku_footer{padding:16px;font-size:13px;color:#444;line-height:1.6}

/* ===== 하단 패널 ===== */
.kku_wrap .kku_noticebar{display:flex;align-items:center;gap:10px;padding:14px 16px;border-top:1px solid #eee;border-bottom:1px solid #eee;background:#fafafa}
.kku_wrap .kku_noticebar strong{font-size:15px;font-weight:900;white-space:nowrap}
.kku_wrap .kku_noticebar .kku_notice_text{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;color:#111}
.kku_wrap .kku_noticebar .kku_chev{font-weight:900;opacity:.5}

.kku_wrap .kku_blk{padding:18px 16px;border-bottom:1px solid #eee}
.kku_wrap .kku_blk:last-child{border-bottom:0}
.kku_wrap .kku_title{font-size:18px;font-weight:900;margin-bottom:6px}
.kku_wrap .kku_desc{font-size:14px;color:#4b5563;line-height:1.6}

.kku_wrap .kku_row{display:flex;align-items:center;gap:12px}
.kku_wrap .kku_col_text{flex:1;min-width:0}
.kku_wrap .kku_col_btn{display:flex;align-items:center;justify-content:center;}
.kku_wrap .kku_col_btn_rstack{display:flex;flex-direction:column;gap:8px;align-items:center;}
@media (max-width:640px){.kku_row{align-items:flex-start}}

.kku_wrap .kku_btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:4px 16px;font-weight:700;font-size:13px;white-space:nowrap;width:80px;}
.kku_wrap .kku_btn_black{background:#111;color:#fff}
.kku_wrap .kku_btn_kakao{background:#fee500;color:#111}
.kku_wrap .kku_btn_shop{background:#111;color:#fff}
.kku_wrap .kku_btn .kku_arrow{display:inline-block;border:2px solid currentColor;border-radius:999px;width:22px;height:22px;line-height:18px;text-align:center;font-weight:900;font-size:14px}
.kku_wrap .kku_dot{margin-right:6px}


 
/* -----------------------
 리스트 아이템 기본 레이아웃
----------------------- */
.sale-box {width:280px; background:#f2eee4; padding:0; border-radius:10px; font-family:'Pretendard',sans-serif; border:0.7px solid #E5DFCE;}
.sale-box .sale-title {background:#423e34; color:#FDFBF6; padding:12px; font-size:15px; border-radius:8px 8px 0 0; margin-bottom:15px; text-align:center;}
.sale-box .sale-title span {font-weight:700;}

.sale-box .item {position:relative; margin-bottom:18px; padding:0 12px; display:flex; gap:10px; align-items:flex-start;}
.sale-box .item-img-wrapper {position:relative; width:100px; height:100px; border-radius:8px; flex-shrink:0; box-shadow:4px 4px 8px rgba(0,0,0,.19);}
.sale-box .item-img {width:100%; height:100%; object-fit:cover; border-radius:8px;}
.sale-box .item-rank {position:absolute; top:0; left:0; background:#423E34; color:#FDFBF6; font-size:14px; font-weight:700; width:26px; height:26px; border-radius:7px 0; text-align:center; line-height:26px; z-index:10;}
.sale-box .item-info {flex:1;}
.sale-box .item-name {font-size:13px; font-weight:400; color:#111; margin-bottom:4px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.sale-box .item-org {color:#999; text-decoration:line-through; font-size:13px; margin-bottom:2px;}
.sale-box .item-price {font-size:14px; font-weight:600;}
.sale-box .item-price .price {margin-right:6px; color:#121212; font-size:15px; letter-spacing:-1px;}
.sale-box .item-price .sale {color:#EE2D24; font-size:15px; font-weight:800;}


/* ★ sale-title 바로 뒤 첫 번째 아이템 전용 스타일 */
.sale-box .sale-title + .item {display:block; padding:0 12px; margin-bottom:5px;}
.sale-box .sale-title + .item .item-img-wrapper {width:250px; height:250px;}
.sale-box .sale-title + .item .item-img {width:100%; height:100%; object-fit:cover;}
.sale-box .sale-title + .item .item-rank {width:34px; height:34px; font-size:16px; line-height:34px; border-radius:10px 0;}
.sale-box .sale-title + .item .item-info {padding:10px 0; }
.sale-box .sale-title + .item .item-name {font-size:15px; font-weight:400; margin-bottom:6px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.sale-box .sale-title + .item .item-org {font-size:15px;}
.sale-box .sale-title + .item .item-price {font-size:18px; margin-top:4px;}
.sale-box .sale-title + .item .item-price .price {font-size:20px;}
.sale-box .sale-title + .item .item-price .sale {font-size:20px;}