@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: #fff;
	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: #fff;
	font-size: 15px;
	cursor: pointer;
  }
  .kku_login_btn:hover {
	background: #f5f5f5;
  }

  
  /* ====== 기본 변수 ====== */
:root{
  --CENTER: 640px;     /* 가운데 본문 폭 */
  --SIDE: 400px;       /* 좌/우 사이드 폭 */
  --GAP: 0px;          /* 본문과 사이드 사이 간격 (원하면 16px 등) */
  --HEADER: 0px;       /* 상단 고정 헤더 있으면 높이 입력 (예: 60px) */
  --LINE: #e1e1e1;
  --RADIUS: 12px;
  --BG: #fff;
  --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: #fff; */
    z-index: 70;
  }
  /* 왼쪽: 화면 가로의 중앙(50%)에서 CENTER/2(=320px)만큼 왼쪽 + SIDE 만큼 더 왼쪽 */
  .finalLineL {
    top: 50px;
    width: var(--SIDE);
    left: calc(50% - 320px - var(--SIDE) - var(--GAP));
    /*border-right: 1px solid var(--LINE);*/
  }
  /* 오른쪽: 화면 가로의 중앙(50%)에서 CENTER/2(=320px)만큼 오른쪽 + GAP */
  .finalLineR {
    top: 50px;
    width: var(--SIDE);
    left: calc(50% + 320px + var(--GAP));
    /* border-left: 1px solid var(--LINE); */
  }
  /* 사이드 내부만 스크롤 */
	.finalLineR .side-scroll ,
	.finalLineL .side-scroll {
    overflow: auto;
    max-height: 100%;
    width: 100%;
    padding: 16px;
  }
}


/* ====== 좌측 데모 요소(원본 교체 가능) ====== */
.finalLineL .brandimgbox img.brimg{
  width: 320px; height: auto; display: block;
  border: 1px solid var(--LINE); border-radius: var(--RADIUS);
}
.finalLineL .brand-search .text_search{
  display:flex; gap:8px; align-items:center; margin: 12px 0;
}
.finalLineL .brand-search input[type="text"]{
  flex:1; border:2px solid #333; border-radius:8px; padding:10px 12px; font-size:15px;
}
.finalLineL .brand-search .Icon_Search img{ width:38px; height:38px; display:block; }
.finalLineL .recommend_search .chips{ display:flex; flex-wrap:wrap; gap:8px; }
.finalLineL .chip{
  display:inline-block; padding:8px 12px; border-radius:999px; font-size:14px;
  background:#f5f5f5; border:1px solid #eaeaea; color:#222; text-decoration:none;
}
.finalLineL .chip.black{ background:#111; color:#fff; border-color:transparent; }

/* ====== 우측 상품 리스트 데모 ====== */
.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:#fff; 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:#fff; 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;
}


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







.kku_wrap{max-width:680px;margin:0 auto;background:#fff;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:#fff;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:#fff;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:#fff;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}