.cm_no_conts .no_icon {
	width: 42px !important;
	height: 42px !important;
	margin: 0 auto 10px !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

/* itsue css */
/* --- 모던 페이지네이션 스타일 --- */
.md-page-wrap { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    font-family: 'Pretendard', -apple-system, sans-serif; 
    margin: 10px 0; 
}
.md-page-btn { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    min-width: 36px; 
    height: 36px; 
    padding: 0 10px; 
    border-radius: 8px; 
    font-size: 14px; 
    font-weight: 600; 
    color: #475569; 
    background-color: #ffffff; 
    border: 1px solid #e2e8f0; 
    text-decoration: none; 
    transition: all 0.2s ease; 
    box-sizing: border-box; 
}
.md-page-btn:hover:not(.is-disabled):not(.is-active) { 
    background-color: #f8fafc; 
    color: #0f172a; 
    border-color: #cbd5e1; 
    transform: translateY(-1px); 
}
.md-page-btn.is-active { 
    background-color: #0f172a; 
    color: #ffffff; 
    border-color: #0f172a; 
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15); 
    cursor: default; 
}
.md-page-btn.is-disabled { 
    color: #cbd5e1; 
    background-color: #f8fafc; 
    border-color: #e2e8f0; 
    cursor: not-allowed; 
}
.md-page-icon { 
    width: 18px; 
    height: 18px; 
    stroke: currentColor; 
}



.its_qrcate_skin_link .its_qrcate_btn {position:relative; padding-top:8px; box-sizing:border-box;}
.its_qrcate_skin_link .its_qrcate_icon {display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative;}
.its_qrcate_skin_link .its_qrcate_icon img {height:22px;}
/*.its_qrcate_skin_link .scan {position:absolute; left:0; top:50%; width:100%; height:2px; background:#e10000; transform:translateY(-50%); border:2px solid #fff; margin-left:-2px;}*/
.its_qrcate_skin_link .its_qrcate_scan {
	position:absolute;
	left:0;
	top:50%;
	width:100%;
	height:2px;
	background:#e10000;
	transform:translateY(-50%);
	border:0;
	margin-left:0;
}

.its_qrcate_skin_link .its_qrcate_scan {animation:mv_header_scan 4s infinite; -webkit-animation:mv_header_scan 4s infinite; animation-delay:1s; -webkit-animation-delay:1s;}
.its_qrcate_skin_link .its_qrcate_cart_num {position:absolute; right:-10px; top:-5px; font-size:12px; font-weight:800; color:#fff; background:#0044ff; width:20px; height:20px; border-radius:100px;}
.its_qrcate_skin_link .its_qrcate_cart_num {display: flex; flex-direction: row; justify-content: center; align-items: center; white-space:nowrap;}
.its_qrcate_skin_link .its_qrcate_this_search {display:none;}


/* 상하단 :: 헤더 > 탑메뉴(QR코드 모션) ==================== */
@-webkit-keyframes mv_header_scan {
	0% {top:50%; }
	30% {top:0; transform:translateY(0);}
	90% {top:100%; transform:translateY(-3px);}
	100% {top:50%; transform:translateY(-50%);}
}
@keyframes mv_header_scan {
	0% {top:50%; }
	30% {top:0; transform:translateY(0);}
	90% {top:100%; transform:translateY(-3px);}
	100% {top:50%; transform:translateY(-50%);}
}

@media screen and (max-width:900px) {

.its_qrcate_skin_link .its_qrcate_btn {position:relative; padding:0px; box-sizing:border-box;}

}




/*.mypage_sub_group_title_round_box {border:1px solid #cfcfcf; padding:5px 15px;background:#fafafa; border-radius:13px;}*/

/* 옵션 2: 모던 스플릿 라인 스타일 */
.mypage_sub_group_title_round_box {
    width: 100%;
    /* 높이 최소화 */
    height: 30px; 
    box-sizing: border-box;
    
    display: flex;
    align-items: center; /* 수직 중앙 정렬 */
    
    margin-bottom: 25px; /* 본문과의 간격 */
    
    /* 텍스트 스타일 */
    font-size: 16px;
    font-weight: 800; /* 폰트를 더 두껍게 강조 */
    color: #334155;
    flex-shrink: 0; /* 텍스트 영역이 줄어들지 않도록 설정 */
}

/* 텍스트 옆에 따라붙는 가로 라인 생성 */
.mypage_sub_group_title_round_box::after {
    content: '';
    flex-grow: 1; /* 남은 영역을 모두 차지 */
    height: 1px;
    background-color: #e2e8f0; /* 은은한 회색 라인 */
    margin-left: 20px; /* 텍스트와 라인 사이 간격 */
}





/* 요소들을 수직 가운데 정렬하는 컨테이너 */
.its-onair-container {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* 도트와 텍스트 사이 간격 */
	margin:8px;
}

/* On-Air 깜빡이는 도트 */
.its-onair-dot {
    width: 7px;
    height: 7px;
    background-color: #ccc;
    border-radius: 50%;
    display: inline-block;
}

.its-onair-dot.is-active {
    background-color: #ff3b30; /* 레드 포인트 */
    box-shadow: 0 0 5px rgba(255, 59, 48, 0.6);
    animation: its-onair-blink 1.5s infinite;
}

@keyframes its-onair-blink {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}

/* 텍스트 스타일 */
.its-onair-status-text {
    font-size: 11px;
    font-weight: 700;
    color: #666;
    letter-spacing: 0.5px;
    font-family: sans-serif;
    display: flex;
    align-items: center; /* 텍스트 내부 박스 수직 중앙 정렬 */
}

/* 아이디 둥근 박스 디자인 */
.its-onair-id-box {
    display: inline-block;
    padding: 2px 8px 3px 8px; /* 상하좌우 여백 */
    margin-right: 4px; /* '상점 접속중' 텍스트와의 간격 */
    background-color: #f1f3f5; /* 연한 회색 배경 */
    border: 1px solid #dcdcdc; /* 테두리 */
    border-radius: 12px; /* 둥근 모서리 */
    color: #2c3e50;
    cursor: pointer; /* 마우스 오버 시 손가락 모양 */
    transition: all 0.2s ease-in-out;
    font-size: 11px;
	font-weight:bold;

}

/* 박스에 마우스를 올렸을 때 효과 */
.its-onair-id-box:hover {
    background-color: #e2e6ea;
    border-color: #ced4da;
    color: #111;
}




	/* 1. 전체 래퍼 */
    .its-entry-wrapper {
        position: relative;
        display: inline-block;
        float: left;
        width: auto;
        min-width: 100px;
        list-style: none !important;
        margin: 0;
        padding: 0;
        z-index: 9999;
        box-sizing: border-box;
        vertical-align: middle;
    }

    /* 2. 메인 버튼 스타일 */
    .its-entry-btn {
        width: 100%;
        justify-content: flex-start; /* 좌측 정렬 */
        background-color: transparent;
        border: none;
        color: #333333;
        padding: 10px 12px;
        font-size: 14px;
        cursor: pointer;
        border-radius: 4px;
        display: flex;
        align-items: center;
        transition: all 0.3s ease;
        box-sizing: border-box;
        white-space: nowrap;
        outline: none;
    }

    /* 메인 앞 아이콘 */
    .its-prefix-icon {
        width: 16px;
        height: 16px;
        margin-right: 6px;
        fill: currentColor;
        margin-top: 2px;
    }

    /* 뒤 화살표 아이콘 (우측 끝 정렬) */
    .its-arrow-icon {
        width: 10px;
        height: auto;
        margin-left: auto; /* 우측 끝으로 밀기 */
        transition: transform 0.3s ease;
    }

    /* 마우스 오버 시 메인 버튼 효과 */
    .its-entry-wrapper:hover .its-entry-btn {
        font-weight: 600;

    }

    /* 마우스 오버 시 화살표 회전 */
    .its-entry-wrapper:hover .its-arrow-icon {
        transform: rotate(180deg);
    }

    /* 3. 드롭다운 박스 */
    .its-entry-dropdown {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        margin-top: 0;
        margin-left: -20px;
        background-color: #ffffff;
        box-shadow: 0 5px 15px rgba(0,0,0,0.15);
        border: 1px solid #eeeeee;
        border-radius: 4px;
        padding: 2px 0;
        transition: all 0.3s ease;
        box-sizing: border-box;
        min-width: 140px; 
    }

    /* 4. 드롭다운 내부 링크 */
    .its-entry-dropdown a {
        display: flex;
        align-items: center;
        justify-content: center; /* 내부 텍스트 중앙 정렬 */
        padding: 4px 5px;
        color: #555555;
        text-decoration: none;
        font-size: 13px;
        text-align: center;
        white-space: nowrap;
        transition: background 0.2s;
    }

/* 드롭다운 내부 아이콘 (위치 미세 조정) */
.its-sub-icon {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    fill: currentColor;
    flex-shrink: 0;
    
    /* [수정됨] 아이콘 위치 내리기 */
    position: relative; 
    top: 2px;  /* 숫자를 키울수록 더 아래로 내려갑니다 (예: 1px, 2px, 3px...) */
}

    .its-entry-dropdown a:hover {
        background-color: #f5f5f5;
        color: #000000;
        font-weight: bold;
    }

    /* === [동작 구현] === */
    
    /* 기본: 마우스 오버 시 보임 */
    .its-entry-wrapper:hover .its-entry-dropdown {
        visibility: visible;
        opacity: 1;
    }

    /* [NEW] 강제로 닫았을 때 (클릭 시 적용됨) - 마우스 오버 무시하고 숨김 */
    .its-entry-wrapper.its-force-close .its-entry-dropdown {
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* [NEW] 강제로 닫았을 때 화살표도 원위치 */
    .its-entry-wrapper.its-force-close .its-arrow-icon {
        transform: rotate(0deg) !important;
    }






/* ✅ SVG 느낌 로고 텍스트 */
.its-logo-svg{
  display:inline-block;
  font-weight:200;
  font-size:26px;
  letter-spacing:-0.6px;
  line-height:1;

  /* 1) 채움: 벡터 느낌의 선명한 하이라이트 그라데이션 */
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f5f7ff 18%,
    #e7ecff 40%,
    #ffffff 65%,
    #e9eefc 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  /* 2) 외곽선: SVG stroke 느낌 (지원 브라우저에서 최고로 또렷) */
  -webkit-text-stroke: 1.2px rgba(10, 25, 55, .75);

  /* 3) 외곽선 보강: text-stroke 미지원에서도 또렷하게 */
  text-shadow:
    /* 외곽선(8방향) */
    1px 0 0 rgba(10,25,55,.55),
   -1px 0 0 rgba(10,25,55,.55),
    0 1px 0 rgba(10,25,55,.55),
    0 -1px 0 rgba(10,25,55,.55),
    1px 1px 0 rgba(10,25,55,.45),
   -1px 1px 0 rgba(10,25,55,.45),
    1px -1px 0 rgba(10,25,55,.45),
   -1px -1px 0 rgba(10,25,55,.45),

    /* 깊이감(아주 얇게) */
    0 2px 6px rgba(0,0,0,.25);

  position:relative;
  transform:translateZ(0); /* 렌더링 선명도 개선 */
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

/* 4) 광택 하이라이트(벡터 느낌 업) */
.its-logo-svg::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,.85) 45%,
    transparent 70%
  );
  opacity:.18;
  pointer-events:none;
  mix-blend-mode:screen;
}

/* ✅ 선택: hover 시 살짝 또렷/빛남 */
.top_logo:hover .its-logo-svg{
  -webkit-text-stroke-color: rgba(40, 120, 255, .85);
  text-shadow:
    1px 0 0 rgba(40,120,255,.55),
   -1px 0 0 rgba(40,120,255,.55),
    0 1px 0 rgba(40,120,255,.55),
    0 -1px 0 rgba(40,120,255,.55),
    1px 1px 0 rgba(40,120,255,.40),
   -1px 1px 0 rgba(40,120,255,.40),
    1px -1px 0 rgba(40,120,255,.40),
   -1px -1px 0 rgba(40,120,255,.40),
    0 6px 18px rgba(40,120,255,.22),
    0 2px 6px rgba(0,0,0,.22);
}



    /* --- Main Product Section --- */
    .its-main-list-wrap {
        position: relative;
        padding: 60px 0;
        background-color: #fff;
        font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    }

    /* 레이아웃 제한 (중앙 정렬) */
    .its-layout-fix {
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 20px;
        box-sizing: border-box;
    }

    /* --- Tab Navigation --- */
    .its-tab-nav {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 40px;
    }

    /* 탭 버튼 스타일 */
    .its-tab-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 32px;
        font-size: 16px;
        font-weight: 500;
        color: #666;
        background-color: #f8f9fa;
        border: 1px solid #eee;
        border-radius: 99px; /* 둥근 쉐입 */
        text-decoration: none;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    /* 탭 호버 */
    .its-tab-btn:hover {
        background-color: #fff;
        border-color: #ddd;
        color: #111;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

    /* 활성화 된 탭 (JS가 'btn_hit' 클래스 토글) */
    .its-tab-btn.btn_hit {
        background-color: #111;
        border-color: #111;
        color: #fff;
        font-weight: 700;
        box-shadow: 0 6px 16px rgba(0,0,0,0.15);
        transform: translateY(-1px);
    }

    /* --- Content Area --- */
    .its-content-area {
        position: relative;
        min-height: 300px; /* 로딩 전 최소 높이 확보 */
        width: 100%;
    }

    /* 반응형 (모바일) */
    @media (max-width: 768px) {
        .its-main-list-wrap { padding: 40px 0; }
        .its-tab-nav { gap: 8px; margin-bottom: 30px; }
        .its-tab-btn { padding: 10px 20px; font-size: 14px; flex: 0 0 auto; }

		.its-logo-svg { font-size:22px;font-weight:small}
    }





/* 2026-01-12 FIND ID/PW (dedup cleaned) */

/* Wrap */
.its-find-wrap{
  max-width: 100%;
  margin: 0 auto;
}

/* Card */
.its-find-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 20px;
  overflow: hidden;
}

.its-find-head{
  padding: 18px 18px 12px;
  border-bottom: 1px solid rgba(15,23,42,.06);
}

.its-find-title{
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.2px;
}

.its-find-sub{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(15,23,42,.62);
  line-height: 1.45;
}

/* Tabs */
.its-find-tabs{
  display:flex;
  gap: 10px;
  padding: 12px 18px 0;
}

.its-find-tab{
  flex: 1;
  text-decoration: none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 11px 10px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 900;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.04);
  color: rgba(15,23,42,.70);
}

.its-find-tab:hover{ background: rgba(15,23,42,.06); }

.its-find-tab.is-active{
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
  box-shadow: 0 10px 22px rgba(2,6,23,.20);
}

.its-find-tab small{
  font-weight: 800;
  opacity: .75;
}



/* Body */
.its-find-body{
  padding: 16px 18px 18px;
}

.its-field{ margin-top: 12px; }
.its-field:first-child{ margin-top: 0; }

.its-label{
  display:block;
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.75);
  margin-bottom: 8px;
}

.its-input{
  width: 100%;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.98);
  padding: 0 14px;
  outline: none;
  font-size: 14px;
  color: #0f172a;
  transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease;
}

/* ✅ focus 색상은 하나로 통일 (원하면 여기만 바꾸면 됨) */
.its-input:focus{
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 4px rgba(59,130,246,.15);
}

.its-input::placeholder{
  color: rgba(15,23,42,.35);
  font-weight: 700;
}

/* CTA */
.its-actions{
  margin-top: 16px;
  display:flex;
  gap: 10px;
}

.its-btn{
  flex: 1;
  height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.06);
  color: #0f172a;
  font-weight: 950;
  font-size: 14px;
  cursor: pointer;
}

.its-btn:hover{ background: rgba(15,23,42,.09); }
.its-btn:active{ transform: scale(.99); }

.its-btn-primary{
  background: linear-gradient(135deg, #0f172a, #111827);
  border-color: rgba(15,23,42,.35);
  color: #fff;
}

.its-btn-primary:hover{ filter: brightness(1.04); }

/* Result layer (PW/ID 공통) */
#find_id_layer.its-result,
#find_pw_layer.its-result{
  display:none;
  padding: 16px 18px 18px;
}

.its-result-box{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.98);
  padding: 16px 14px;
  box-shadow: 0 14px 30px rgba(2,6,23,.10);
}

.its-result-top{
  display:flex;
  align-items:flex-start;
  gap: 10px;
}

.its-badge{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
}

/* ✅ 배지/강조색은 페이지별로 다를 수 있어서 “기본값 + ID/PW 각각 오버라이드” */
#find_id_layer .its-badge{
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.20);
  color: #1d4ed8;
}
#find_pw_layer .its-badge{
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.20);
  color: #16a34a;
}

.its-result-title{
  font-size: 14px;
  font-weight: 950;
  color: #0f172a;
  line-height: 1.35;
}

.its-result-title em{
  font-style: normal;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 1000;
  margin: 0 4px;
  display:inline-block;
}

/* ✅ em 색상도 ID/PW 분리 */
#find_id_layer .its-result-title em{
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.18);
  color: #15803d;
}
#find_pw_layer .its-result-title em{
  background: rgba(59,130,246,.10);
  border: 1px solid rgba(59,130,246,.18);
  color: #1d4ed8;
}

.its-result-desc{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(15,23,42,.62);
  line-height: 1.5;
}

/* Guide */
.its-guide{
  margin-top: 14px;
  font-size: 12px;
  color: rgba(15,23,42,.55);
  line-height: 1.55;
}

.its-guide ul{ margin: 0; padding-left: 16px; }
.its-guide li{ margin: 6px 0; }

/* Dark mode */
@media (prefers-color-scheme: dark){
  .common_page.its-find-page{
    background:
      radial-gradient(1000px 520px at 10% 0%, rgba(34,197,94,.20), transparent 55%),
      radial-gradient(900px 480px at 100% 10%, rgba(59,130,246,.22), transparent 60%),
      linear-gradient(180deg, rgba(2,6,23,.85), rgba(2,6,23,.92));
  }

  .its-find-card{
    background: rgba(15,23,42,.78);
    border-color: rgba(148,163,184,.16);
    box-shadow: 0 18px 42px rgba(0,0,0,.35);
  }

  .its-find-title{ color:#e5e7eb; }
  .its-find-sub{ color: rgba(226,232,240,.68); }

  .its-find-tab{
    background: rgba(226,232,240,.06);
    border-color: rgba(148,163,184,.18);
    color: rgba(226,232,240,.72);
  }

  .its-find-tab.is-active{
    background:#e5e7eb;
    color:#0f172a;
    border-color: rgba(229,231,235,.55);
  }

  .its-label{ color: rgba(226,232,240,.74); }

  .its-input{
    background: rgba(2,6,23,.55);
    border-color: rgba(148,163,184,.22);
    color: #e5e7eb;
  }

  .its-input::placeholder{ color: rgba(226,232,240,.35); }

  .its-btn{
    background: rgba(226,232,240,.06);
    border-color: rgba(148,163,184,.18);
    color: #e5e7eb;
  }

  .its-btn-primary{
    background: linear-gradient(135deg, #e5e7eb, #cbd5e1);
    color:#0f172a;
    border-color: rgba(229,231,235,.55);
  }

  .its-result-box{
    background: rgba(2,6,23,.52);
    border-color: rgba(148,163,184,.18);
    box-shadow: 0 14px 30px rgba(0,0,0,.30);
  }

  .its-result-title{ color:#e5e7eb; }
  .its-result-desc{ color: rgba(226,232,240,.68); }
  .its-guide{ color: rgba(226,232,240,.58); }
}










/* 필터 토글 버튼 */
.its-btn-toggle-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px 0 5px;
  height: 28px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border:1px solid #ccc;
  /* 다크 그라데이션 + 살짝 유리 느낌 */
  background: linear-gradient(135deg, #ccc, #666);
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.25);
  position: relative;
  overflow: hidden;
}

.its-btn-toggle-filter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(255,255,255,0.25), transparent 55%);
  opacity: 0.6;
  pointer-events: none;
}

.its-btn-toggle-filter:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.3);
}

.its-btn-toggle-filter:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.28);
}

/* 아이콘 동그라미 */
.its-btn-toggle-icon {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* + / - 라인 */
.its-btn-toggle-icon::before,
.its-btn-toggle-icon::after {
  content: "";
  position: absolute;
  background-color: #ffffff;
  border-radius: 2px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

/* 가로 라인 */
.its-btn-toggle-icon::before {
  width: 9px;
  height: 2px;
}

/* 세로 라인 (기본: + 모양) */
.its-btn-toggle-icon::after {
  width: 2px;
  height: 9px;
}

/* 접힌 상태일 때는 - 모양으로 변경 */
.its-btn-toggle-filter.is-collapsed .its-btn-toggle-icon::after {
  opacity: 0;
  transform: scaleY(0);
}

/* 텍스트 */
.its-btn-toggle-text {
  position: relative;
  z-index: 1;
  color:#ffffff;
  font-size:12px;
}






/* 필터 토글 버튼 */
.its-btn-toggle-lightgray-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px 0 5px;
  height: 28px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border:1px solid #ccc;
  /* 다크 그라데이션 + 살짝 유리 느낌 */
  background: #fcfcfc;
  color: #666;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.25);
  position: relative;
  overflow: hidden;
}

.its-btn-toggle-lightgray-filter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(255,255,255,0.25), transparent 55%);
  opacity: 0.6;
  pointer-events: none;
}

.its-btn-toggle-lightgray-filter:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.3);
}

.its-btn-toggle-lightgray-filter:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.28);
}

/* 아이콘 동그라미 */
.its-btn-toggle-lightgray-icon {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* + / - 라인 */
.its-btn-toggle-lightgray-icon::before,
.its-btn-toggle-lightgray-icon::after {
  content: "";
  position: absolute;
  background-color: #666;
  border-radius: 2px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

/* 가로 라인 */
.its-btn-toggle-lightgray-icon::before {
  width: 9px;
  height: 2px;
}

/* 세로 라인 (기본: + 모양) */
.its-btn-toggle-lightgray-icon::after {
  width: 2px;
  height: 9px;
}

/* 접힌 상태일 때는 - 모양으로 변경 */
.its-btn-toggle-lightgray-filter.is-collapsed .its-btn-toggle-lightgray-icon::after {
  opacity: 0;
  transform: scaleY(0);
}

/* 텍스트 */
.its-btn-toggle-lightgray-text {
  position: relative;
  z-index: 1;
  color:#666;
  font-size:12px;
}




/* ●●●●● 기본레이아웃 상단 */
.its_common_pages_top {overflow:hidden; background:#fff; border-bottom:1px solid #ccc;}
.its_common_pages_top .its_this_page_name {position:relative; text-align:center; }
.its_common_pages_top .its_txt {font-size:16px; line-height:45px; color:#555863; margin:0 45px;}
.its_common_pages_top .its_btn_back {position:absolute; left:0; top:0; height:45px; width:50px; text-align:center; }
.its_common_pages_top .its_btn_back .its_shape {width:22px; height:1px; background:#555863; position:absolute; left:10px; top:50%;}
.its_common_pages_top .its_btn_back .its_shape:before {content:''; background:#555863; position:absolute; left:3px; top:0; margin-top:-8px; width:1px; height:10px; transform: rotate(45deg); -webkit-transform: rotate(45deg); }
.its_common_pages_top .its_btn_back .its_shape:after {content:''; background:#555863; position:absolute; left:3px; top:0;  margin-top:-1px; width:1px; height:10px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}

.its_common_pages_top .its_btn_openmenu {position:absolute; right:0; top:0; width:50px; height:45px; box-sizing:border-box; }

/* 스킨 적용 버튼문제 공통으로 사용하기 위해 수정 */
.its_common_pages_top .its_btn_openmenu .its_shape {background:#666; margin:17px 0 0 5px; position:absolute;}

.its_common_pages_top .its_btn_openmenu .its_shape:before {content:''; width:1px; height:14px; position:absolute; left:0; top:0; background:#555863; transform: rotate(45deg); -webkit-transform: rotate(45deg); margin:0 0 0 0}
.its_common_pages_top .its_btn_openmenu .its_shape:after {content:''; width:1px; height:14px; position:absolute; left:0; top:0; background:#555863; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); margin:0 0 0 -10px}

.its_common_pages_top .its_open_menu {display:none; background:rgba(0,0,0,0.05); padding:10px; }
.its_common_pages_top .its_open_menu ul {overflow:hidden; background:#fff; border:1px solid rgba(0,0,0,0.1)}
.its_common_pages_top .its_open_menu li {list-style:none; width:50%; float:left; border-bottom:1px solid rgba(0,0,0,0.1); box-sizing:border-box; border-right:1px solid rgba(0,0,0,0.1)}
.its_common_pages_top .its_open_menu li:nth-last-of-type(2) {border-bottom:0}
.its_common_pages_top .its_open_menu li:nth-of-type(2n) {border-bottom:1px solid rgba(0,0,0,0.1); border-right:0}
.its_common_pages_top .its_open_menu li:last-of-type {border-bottom:0}
.its_common_pages_top .its_open_menu .its_menu {padding:0 15px; height:34px; line-height:35px; color:#777; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box;}
.its_common_pages_top .its_open_menu .its_hit {color:#f54d4d}
.its_common_pages_top .its_if_open_menu .its_open_menu {display:block;} 
.its_common_pages_top .its_if_open_menu .its_btn_openmenu {transform: rotate(180deg); -webkit-transform: rotate(180deg); }

.its_common_pages_three .its_open_menu {display:none; background:rgba(0,0,0,0.05);  }
.its_common_pages_three .its_open_menu ul {overflow:hidden; background:#fff; border:1px solid rgba(0,0,0,0.1)}
.its_common_pages_three .its_open_menu li {list-style:none; width:33.33%; float:left; border-bottom:1px solid rgba(0,0,0,0.1); box-sizing:border-box; border-right:1px solid rgba(0,0,0,0.1)}
.its_common_pages_three .its_open_menu li:nth-last-of-type(1) {border-bottom:0}
.its_common_pages_three .its_open_menu li:nth-of-type(3n) {border-bottom:1px solid rgba(0,0,0,0.1); border-right:0}

.its_common_pages_three .its_open_menu .its_menu {padding:0 15px; height:34px; line-height:35px; color:#777; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box;}
.its_common_pages_three .its_open_menu .its_hit {color:#f54d4d}
.its_common_pages_three .its_if_open_menu .its_open_menu {display:block;} 
.its_common_pages_three .its_if_open_menu .its_btn_openmenu {transform: rotate(180deg); -webkit-transform: rotate(180deg); }









/* --- ITS prefix applied for conflict prevention --- */

/* 전체 컨테이너: 라이프스타일 바 */
.its-status-container {
    width: 100%;
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    padding: 12px 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Pretendard', 'Malgun Gothic', sans-serif; /* 한글 폰트 명시 */
    color: #4a5568;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

/* 1. 좌측: 프로필 영역 (아바타 수정됨) */
.its-profile-area {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 20px;
    border-right: 1px solid #edf2f7;
    height: 36px;
}
/* 아바타: 그라데이션 원형 */
.its-profile-avatar {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    line-height: 1; /* 수직 정렬 보정 */
    box-shadow: 0 2px 5px rgba(102, 126, 234, 0.4);
}
.its-user-name {
    font-weight: 700;
    color: #2d3748;
    font-size: 15px;
    letter-spacing: -0.5px;
}
.its-user-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
}


/* 2. 중앙: 포인트/자산 리스트 (가로 나열) */ .its-asset-list { display: flex; align-items: center; gap: 12px; flex-grow: 1; /* 남은 공간 채우기 */ margin: 0 10px; } .its-asset-item { display: flex; align-items: center; gap: 4px; white-space: nowrap; /* 줄바꿈 방지 */ background: #f8fafc; padding: 4px 8px; border-radius: 4px; border: 1px solid #f1f5f9; } .its-asset-label { color: #64748b; font-size: 11px; font-weight: 600; } .its-asset-val { color: #2563eb; font-weight: 700; font-size: 13px; }

/* 3. 우측: 기능 버튼 그룹 */
.its-action-area {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* 아이콘 버튼 */
.its-icon-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 8px; /* 약간 둥근 사각형 */
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
}
.its-icon-btn:hover {
    background: #f7fafc;
    border-color: #bee3f8;
    transform: translateY(-2px);
}
.its-icon-btn img {
    max-height: 16px;
    width: auto;
}

/* 분양몰 URL 박스 */
.its-url-box {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border-radius: 6px;
    height: 34px;
    padding: 0 0 0 12px;
    border: 1px solid #e2e8f0;
}
.its-url-text {
    font-size: 12px;
    color: #4a5568;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 34px;
    margin-right: 8px;
}
.its-copy-btn {
    display: inline-flex;
    align-items: center;
    height: 100%;
    background: #fff;
    border: none;
    border-left: 1px solid #e2e8f0;
    padding: 0 12px;
    font-size: 11px;
    cursor: pointer;
    color: #4a5568;
    font-weight: 700;
    text-decoration: none;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    transition: background 0.2s;
}
.its-copy-btn:hover {
    background: #edf2f7;
    color: #2d3748;
}

/* 쇼핑몰 이동 버튼 */
.its-mall-btn {
    height: 34px;
    padding: 0 16px;
    background: #4299e1;
    color: #fff !important;
    font-size: 12px;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
    box-shadow: 0 2px 4px rgba(66, 153, 225, 0.3);
}
.its-mall-btn:hover {
    background: #3182ce;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .its-status-container {
        padding: 15px;
        gap: 12px;
    }
    .its-profile-area {
        border-right: none;
        width: 100%;
        border-bottom: 1px solid #f7fafc;
        padding-bottom: 10px;
        margin-bottom: 5px;
    }
    .its-asset-list {
        width: 100%;
        padding: 0;
        overflow-x: auto;
        padding-bottom: 8px; /* 스크롤바 여유 */
    }
    .its-asset-item {
        min-width: 90px; /* 모바일에서 조금 더 넓게 */
    }
    .its-action-area {
        width: 100%;
        justify-content: space-between;
    }
    .its-url-box {
        flex-grow: 1;
        margin-right: 5px;
    }
}




/* 미니멀 화이트 테마 & PC 1열 레이아웃 CSS */
.dashboard-wrapper {
	width: 100%;
	box-sizing: border-box;
}

.stat-row {
	display: flex;
	flex-wrap: nowrap; /* PC에서 무조건 1줄로 강제 */
	gap: 16px;
	width: 100%;
}

.stat-box {
	flex: 1; /* 모든 카드가 동일한 너비를 가지며 100%를 꽉 채움 */
	min-width: 0; /* Flexbox 내부 텍스트 넘침 방지 */
	background-color: #ffffff;
	border: 1px solid #e2e8f0; /* 매우 연하고 깔끔한 테두리 */
	border-radius: 8px;
	padding: 24px 20px;
	text-align: center;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
	box-shadow: 0 1px 3px rgba(0,0,0,0.02); /* 거의 안 보이는 아주 연한 그림자 */
}

.stat-box:hover {
	border-color: #cbd5e1;
	box-shadow: 0 4px 12px rgba(0,0,0,0.06);
	transform: translateY(-2px);
}

.stat-label {
	font-size: 14px;
	font-weight: 600;
	color: #64748b; /* 차분한 그레이 톤 */
	margin-bottom: 12px;
	word-break: keep-all;
}

.stat-value {
	font-size: 22px;
	font-weight: 700;
	color: #0f172a; /* 짙은 네이비/블랙으로 가독성 확보 */
	margin: 0;
	line-height: 1.3;
	word-break: break-all;
}

.stat-pv {
	font-size: 13px;
	color: #94a3b8;
	margin-top: 6px;
	font-weight: 500;
}





/* ✅ 2026-02-03: 최상단 배너 리뉴얼(이미지 원본 사이즈 그대로 노출) */
.its-topbn{
  position: relative;
  width: 100%;
  overflow: visible; /* 높이 제한/잘림 방지 */
}

.its-topbn__inner{
  position: relative;
  width: 100%;
  overflow: visible;
}

/* 이미지 원본 크기 유지 + 중앙정렬(가로가 커도 OK) */
.its-topbn__link{
  position: relative;
  display: block;
  width: 100%;
  text-decoration: none;
}

.its-topbn__img{
  display: block;
  margin: 0 auto;   /* 가운데 */
  height: auto;     /* 원본 높이 유지 */
  width: auto;      /* 원본 너비 유지 */
  max-width: none;  /* 화면을 넘어도 그대로 */
}

/* 닫기 버튼: 원형 배경 제거, X 아이콘만 */
.its-topbn__close{
  position: fixed;
  right: 10px;
  top: 10px;
  z-index: 99999;
  display: inline-block;
  padding: 0;               /* 원형 제거 */
  background: transparent;  /* 원형 제거 */
  box-shadow: none;         /* 원형 제거 */
  border: 0;
  line-height: 0;
}

.its-topbn__close img{
  display: block;
  width: 18px;
  height: 18px;
}

/* 모바일 안전영역 */
@supports (padding: max(0px)) {
  .its-topbn__close{
    right: max(10px, env(safe-area-inset-right));
    top: max(10px, env(safe-area-inset-top));
  }
}







/* =========================
   ✅ 2026-02-03 Top Banner - 덮어쓰기 추가 CSS
   - X 버튼: 세로 정가운데 정렬
   - 배너: 원하는 높이로 강제 축소 + 위/아래 균등 크롭(center)
   ========================= */

/* 1) X 버튼을 "배너 영역 세로 가운데"에 고정 */
.its-topbn{ position: relative; }

.its-topbn__close{
  position: absolute;        /* fixed → absolute로 변경(배너 기준) */
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99999;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  line-height: 0;
}
.its-topbn__close img{ width: 18px; height: 18px; }


/* 크롭 적용(필요할 때만 활성) */
.its-topbn.its-topbn--crop{
  height: 60px;
  overflow: hidden;
}

.its-topbn.its-topbn--crop .its-topbn__inner{
  height: 60px;
  overflow: hidden;
}

/* 이미지가 컨테이너 높이에 맞게 들어가면서, 위/아래 균등 크롭 */
.its-topbn.its-topbn--crop .its-topbn__img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* 크롭 */
  object-position: center;  /* 위/아래 균등(센터 기준) */
  margin: 0;                /* 기존 center margin 제거 */
}

/* (옵션) 링크도 꽉 차게 */
.its-topbn.its-topbn--crop .its-topbn__link{
  display: block;
  height: 100%;
}

/* 사용법:
   1) 기본(원본 사이즈 그대로): <div class="its-topbn"> ...
   2) 크롭 축소 사용:         <div class="its-topbn its-topbn--crop"> ...
   3) 높이 바꾸기: :root의 --its-topbn-crop-h 값만 수정
*/



/* ✅ 데모 탑배너: 1번 스타일 기반 */
.its-top-banner{
	position:relative;
	padding:16px 56px 16px 36px;
	background-color:#000;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	text-align:center;
	color:#fff;
	overflow:hidden;

	/* ✅ 기본 17px, 화면 줄면 자동 축소 */
	--its-top-banner-font-size: clamp(12px, 1.6vw, 17px);
	--its-top-banner-icon-size: clamp(14px, 2.3vw, 22px);
}

/* 배경이미지가 있을 때 가독성용 어두운 오버레이 */
.its-top-banner.its-top-banner--demo::before{
	content:'';
	position:absolute;
	left:0; top:0; right:0; bottom:0;
	background:#000;
	z-index:0;
}

.its-top-banner__link{
	position:relative;
	z-index:1;
	display:block;
	text-decoration:none;
	color:#fff;
}

.its-top-banner p{
	position:relative;
	z-index:1;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:12px;
	margin:0;
	color:#fff;
	font-weight:500;
	line-height:1.2;
	white-space:nowrap;
	flex-wrap:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	font-size:var(--its-top-banner-font-size) !important;
}

.its-top-banner p span{
	display:block;
	min-width:0;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	font-size:var(--its-top-banner-font-size) !important;
	color:#fff !important;
}

.its-top-banner p img{
	display:block;
	flex:0 0 auto;
	width:var(--its-top-banner-icon-size);
	height:var(--its-top-banner-icon-size);
}

.its-top-banner .btn-close{
	position:absolute;
	top:50%;
	right:20px;
	transform:translateY(-50%);
	z-index:2;
	line-height:0;
}

.its-top-banner .btn-close img{
	display:block;
	width:18px;
	height:18px;
}

@media screen and (max-width:900px){
	.its-top-banner{
		padding:12px 44px 12px 16px;

		/* ✅ 모바일에서도 같은 규칙 유지 */
		--its-top-banner-font-size: clamp(11px, 3.2vw, 17px);
		--its-top-banner-icon-size: clamp(14px, 3.6vw, 18px);
	}

	.its-top-banner p{
		gap:8px;
	}

	.its-top-banner .btn-close{
		right:12px;
	}
}



.its-menu-container {
    display: flex;
    justify-content: center;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

@media (max-width: 767px) {
    .its-menu-container {
        justify-content: flex-start;
    }
}

@media (min-width: 768px) {
    .its-menu-container {
        justify-content: center;
        flex-wrap: wrap;
        overflow-x: visible;
    }
}



.its-menu-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    font-size: 15px;
    font-weight: 500;
    color: #495057;
    background-color: #f8f9fa;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid transparent;
}

.its-menu-item:hover {
    background-color: #e9ecef;
    color: #212529;
}

.its-menu-item.its-active {
    background-color: #007bff;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.25);
}






/* 1. 전체를 감싸는 컨테이너 (Flexbox 적용) */
    .its-cs-layout-container {
        display: flex;
        align-items: flex-start; /* 상단 정렬 */
        gap: 15px;/ /* 사이드바와 컨텐츠 사이 간격 */
        width: 100%;
        max-width: 1160px; /* 전체 페이지 최대 너비 (조절 가능) */
        margin: 0 auto; /* 중앙 정렬 */
        padding: 20px 5px; /* 상하 여백 */
        box-sizing: border-box;
    }


    /* CS 사이드바 전체 컨테이너 */
    .its-cs-sidebar-wrap {
        width: 100%;
        max-width: 200px; /* 사이드바 권장 너비 */
        background-color: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }

    /* 상단 헤더 영역 */
    .its-cs-sidebar-header {
        padding: 24px;
        background-color: #f8fafc;
        border-bottom: 1px solid #e5e7eb;
        text-align: center;
    }

    .its-cs-sidebar-header .icon-wrap {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        background-color: #fff;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        margin-bottom: 12px;
    }
    
    .its-cs-sidebar-header .icon-wrap img {
        max-width: 24px;
        height: auto;
    }

    .its-cs-sidebar-header h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: #1e293b;
    }

    .its-cs-sidebar-header h2 a {
        text-decoration: none;
        color: inherit;
    }

    .its-cs-sidebar-header p {
        margin: 8px 0 0;
        font-size: 13px;
        color: #64748b;
        line-height: 1.4;
        word-break: keep-all;
    }

    /* 메뉴 리스트 영역 */
    .its-cs-nav-container {
        padding: 12px;
    }

    .its-cs-nav-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .its-cs-nav-list li {
        margin-bottom: 2px;
    }

    /* 메뉴 링크 스타일 */
    .its-cs-nav-link {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        font-size: 15px;
        color: #475569;
        text-decoration: none;
        border-radius: 8px;
        transition: all 0.2s ease;
        font-weight: 500;
    }

    /* 호버 효과 */
    .its-cs-nav-link:hover {
        background-color: #f1f5f9;
        color: #0f172a;
        transform: translateX(4px);
    }

    /* 활성화(hit) 상태 스타일 - 기존 로직 'hit' 클래스 대응 */
    .its-cs-nav-link.hit {
        background-color: #eff6ff; /* 연한 파란색 배경 */
        color: #2563eb; /* 진한 파란색 텍스트 */
        font-weight: 700;
    }
    
    .its-cs-nav-link.hit::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 4px;
        background-color: #2563eb;
        border-radius: 50%;
        margin-right: 8px;
    }

    /* 메뉴 그룹 간 구분선 */
    .its-cs-divider {
        height: 1px;
        background-color: #e5e7eb;
        margin: 8px 12px;
    }


/* 상단 탭 타이틀 영역 (좌측 정렬 및 하단 라인) */
.its-cs-tab-line-header {
    display: flex;
    justify-content: flex-start; /* 텍스트 좌측 정렬 */
    align-items: center;
    border-bottom: 1px solid #ddd; /* 타이틀 하단에 무게감을 주는 라인 */
    padding-bottom: 12px;
    width: 100%;
}

/* 타이틀 텍스트 디자인 */
.its-cs-tab-line-title {
    font-size: 16px;
    font-weight: 700;
    color: #666;
    position: relative;
    padding-left: 10px; /* 포인트 바(Bar)가 들어갈 공간 확보 */
    letter-spacing: -0.5px;
    line-height: 1.2;
}


/* 타이틀 텍스트 왼쪽 포인트 바(Bar) */
/*
.its-cs-tab-line-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    background-color: #3498db;
    border-radius: 3px;
}
*/


/* 상단 탭 타이틀 영역 (좌측 정렬 및 하단 라인) */
.its-cs-tab-header {
    display: flex;
    justify-content: flex-start; /* 텍스트 좌측 정렬 */
    align-items: center;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 100%;
}

/* 타이틀 텍스트 박스 디자인 */
.its-cs-tab-title {
    display: inline-block; /* 텍스트 크기에 딱 맞는 박스 생성 */
    font-size: 15px;
    font-weight: 700;
    color: #2c3e50; /* 텍스트 컬러 */
    background-color: #f1f3f5; /* 연한 회색 배경 */
    border: 1px solid #dcdcdc; /* 박스 테두리 */
    border-radius: 6px; /* 둥근 모서리 */
    padding: 8px 16px; /* 박스 내부 여백 */
    letter-spacing: -0.5px;
    line-height: 1.2;    
	width: 100%;

}



.its-tree-block-message {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding: 10px 14px;
	border: 1px solid #ffd6d6;
	background: #fff5f5;
	color: #d92d20;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	border-radius: 8px;
	box-sizing: border-box;
}

.its-tree-block-message i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #ffe1e1;
	color: #d92d20;
	font-size: 11px;
	flex: 0 0 auto;
}

.its-tree-block-message-text {
	display: inline-block;
}


/* 필수입력 항목 체크 표시 */
.its-required-mark {
    display: inline-flex;
    align-items: center;
    margin-left: 7px;
    color: #dc2626;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
}

.its-required-mark:before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    border: 1px solid #ef4444;
    border-radius: 3px;
    background: #fff1f2;
    color: #dc2626;
    font-size: 10px;
    font-weight: 900;
    box-sizing: border-box;
}