@charset "utf-8";

/****************************************************

	1. asset 이동완료 2025-07-25
	2. 개별사이트 스타일 작업시 아래에 추가하여 사용하세요!

****************************************************/
/* add */






/* 수정추가 서브 관심고객등록 */

/* ===== KCC 스위첸 미사 안내 섹션 (Light + Strong Accent) ===== */
.kcc-section{
  /* 핵심 컬러 변수 */
  --bg:#f9fafb;           /* 섹션 배경 */
  --card:#ffffff;         /* 카드 배경 */
  --card-2:#f3f6fb;       /* 카드 보조 배경 */
  --text:#111827;         /* 일반 텍스트 */
  --muted:#6b7280;        /* 보조 텍스트 */
  --accent:#3b82f6;       /* 메인 포인트 */
  --accent-2:#10b981;     /* 보조 포인트(민트) */
  --on-accent:#ffffff;    /* 포인트 위 텍스트 */
  --border:rgba(17,24,39,.10);
  --soft:rgba(17,24,39,.05);
  --ring:rgba(59,130,246,.25);
  max-width:1300px; 
/*   margin:48px auto;  */
  padding:0;
/*padding:28px;
  background:var(--bg); color:var(--text);
  border-radius:24px; border:1px solid var(--border);
  box-shadow:0 10px 26px rgba(0,0,0,.06); */
}

/* 본문 */
.kcc-section p{ margin:0 0 22px; color:var(--text); line-height:1.7; }
.kcc-section strong{ color:#ef3120; font-weight:800; }

/* 대제목: 포인트 그라데이션 유지 */
.kcc-section>h2{
  margin:0 0 14px; font-size:clamp(22px,2.2vw + 14px,32px);
  line-height:1.25; letter-spacing:-.02em; font-weight:900;
background:#1a3576;
/*   background:linear-gradient(90deg,var(--accent),var(--accent-2)); */
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* 카드 공통 */
.kcc-section .kcc-points,
.kcc-section .kcc-summary,
.kcc-section .kcc-reservation{
  background:linear-gradient(180deg,var(--card),var(--card-2));
  border:1px solid var(--border);
  border-radius:16px; padding:20px 18px; margin-bottom:16px;
  box-shadow:0 8px 18px rgba(0,0,0,.05), inset 0 0 0 1px var(--soft);
  gap:0;
}

/* 카드 제목: 포인트 도트 */
.kcc-section h3{
  margin:0 0 12px; font-size:2.2rem; font-weight:800; letter-spacing:-.01em;
  display:inline-flex; align-items:center; gap:10px; color:var(--text);
}
.kcc-section h3::before{
  content:""; width:10px; height:10px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #fff, var(--accent) 45%, transparent 62%);
  box-shadow:0 0 14px var(--ring);
}

/* ========== 투자 포인트 (순번 배지: 블루→민트 그라데이션) ========== */
.kcc-points ol{ margin:0; padding:0; display:grid; gap:10px; counter-reset:num; }
.kcc-points li{
  list-style:none; counter-increment:num; position:relative;
  padding:12px 14px 12px 52px; font-weight:400; color:var(--text);
  background:#fff; border:1px solid var(--border); border-radius:12px;
}
.kcc-points li::before{
  content:counter(num);
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; display:grid; place-items:center;
  font-size:13px; font-weight:900; color:var(--on-accent);
background: #1a3576;
/*   background: linear-gradient(180deg, #f63b3b, #104cb9); */
  border-radius:999px; box-shadow:0 5px 12px var(--ring);
}

/* ========== 6포인트 요약 (체크 아이콘: 민트 박스, 블루 음영) ========== */
.kcc-summary ul{
  margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
}
.kcc-summary li{
  list-style:none; position:relative;
  padding:12px 12px 12px 44px; border-radius:12px;
  background:#fff; border:1px dashed var(--border);
}
.kcc-summary li::before{
  content:"✓";
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; display:grid; place-items:center;
  font-size:12px; font-weight:900; color:var(--on-accent);
background: #1a3576;

/*   background:linear-gradient(180deg,var(--accent-2),var(--accent)); */
  border-radius:6px; box-shadow:0 3px 10px var(--ring);
}

/* ========== 방문 예약 & 선물 ========== */
.kcc-reservation p{ margin:8px 0 12px; }
.kcc-reservation strong{ color:var(--accent-2); }
.kcc-reservation ul{ margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.kcc-reservation li{
  list-style:none; padding:10px 12px; font-weight:700; color:var(--text);
  background:#fff; border:1px solid var(--border); border-radius:12px;
}

/* 방문 예약 선물 리스트 아이콘 (v 체크) */
.kcc-reservation ul li {
  position: relative;
  padding-left: 40px; /* 아이콘 들어갈 자리 */
}

.kcc-reservation ul li::before {
  content: "✓";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  color: var(--on-accent);
  background:#ef3120;
/*   background: linear-gradient(180deg, var(--accent-2), var(--accent)); */
  border-radius: 6px;
  box-shadow: 0 3px 8px var(--ring);
}



/* 강조 알림 (예약 필수) */
.kcc-reservation p strong{
  display:inline-block; margin-top:10px; padding:9px 12px; border-radius:10px;
  background: color-mix(in srgb, var(--accent) 14%, white);
  color: color-mix(in srgb, var(--accent) 12%, black);
  border:1px solid color-mix(in srgb, var(--accent-2) 40%, transparent);
}

/* 버튼 (선택) */
.kcc-section .kcc-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 16px; border-radius:12px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  color:var(--on-accent); font-weight:900; text-decoration:none;
  box-shadow:0 10px 18px var(--ring), inset 0 0 0 1px rgba(255,255,255,.18);
  transition:transform .06s ease, box-shadow .2s ease, filter .2s ease;
}
.kcc-section .kcc-btn:hover{ transform:translateY(-1px); filter:saturate(1.08); }
.kcc-section .kcc-btn:active{ transform:translateY(0); box-shadow:0 6px 12px var(--ring); }


.kcc-reservation h3:nth-of-type(2) {
    padding-top: 10px;
}

/* 반응형 */
@media (max-width:720px){
  .kcc-section{ border-radius:20px; }
  .kcc-section>h2{ font-size:22px; }
  .kcc-summary ul{ grid-template-columns:1fr; }
}


/* .kcc-reservation p:last-of-type {
  margin-top: 3rem;
   animation: blink 1s ease-in-out infinite; 부드럽게
   color:#ef3120;
}
 */

/* 깜빡이 수정 */


@keyframes blink {
  0%, 100% {
    opacity: 1; /* 선명 */
  }
  50% {
    opacity: 0; /* 투명 */
  }
}


.kcc-reservation .reserve-warning {
    margin-top: 3rem;
    animation: blink 1s ease-in-out infinite;
    color:#ef3120;
}

/* 두 블록 사이 자연스러운 간격 */
.kcc-reservation .reserve-block + .reserve-block {
    margin-top: 48px;
}

/* 하단 주의문은 좀 띄워주기 */
.kcc-reservation .reserve-warning {
    margin-top: 42px;
}
.kcc-reservation p{margin: 0px;}
.kcc-section{padding:0 !important;}
[class*=section].customer.sub .common-customer .customer-box.V2 {padding: 0 !important;}











/* media */
@media screen and (max-width: 1880px) {
	@media screen and (max-width: 1640px){
	}
	@media screen and (max-width: 1560px){
	}
	@media screen and (max-width: 1500px){
	}
	@media screen and (max-width: 1470px){		
	}
	@media screen and (max-width:1280px){
	}
	@media screen and (max-width: 1024px){
	}
	@media screen and (max-width: 800px){ /* breakpoint 모바일 */
	}
	@media screen and (max-width: 640px){		
	}
	@media screen and (max-width: 480px){
	}
	@media screen and (max-width: 360px){	
	}
}