:root {
    /* Color palette */
    --color-primary: #c0dff8;
    --color-secondary: #EDA23C;
    --color-accent: #F7ADA2;
    --color-background: #FFFFFF;
    --color-text: #333;
    --color-point: #3E5FAC;
    --color-cal:#d5eafa;

    /* Font size (기본 16px 기준) */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */

    /* Spacing (Padding / Margin) */
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    /* Widths */
    --container-max-width: 100%;
}
/* 프리텐다드 폰트*/
@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    src: url('/fonts/Pretendard-Regular.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    src: url('/fonts/Pretendard-Bold.woff2') format('woff2');
    font-display: swap;
}
/* * {
  box-sizing: border-box;
} */

body {
    font-family: 'Pretendard', sans-serif;
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: 1.5;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    padding-bottom: env(safe-area-inset-bottom);
    overflow-x: hidden;
}

button, input, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
a{
    text-decoration: none;
    color: inherit;
    font-family: inherit;
}
/* 공통 박스 스타일 */
/* 최상위 루트 박스: 전체 배경이나 전역 스타일 용도 */
.root {
    width: 100%;
    background-color: #ffffff; /* 페이지 전체 배경색 (필요 시 수정) */
}

/* 콘텐츠 중앙 정렬 영역 */
.contents {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto; /* 가운데 정렬 */
    padding: 0 20px;
    box-sizing: border-box;
}
.container {
    max-width: 1440px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 0 auto;
    /* padding: var(--spacing-md); */
    padding-right: constant(safe-area-inset-right);
    padding-left: constant(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-left: env(safe-area-inset-left);
}
/* 공통 버튼 스타일 */
.btn {
    display: inline-block;
    /* padding: 0.5rem 1rem; */
    font-size: var(--font-size-base);
    font-weight: 500;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 15px 0 calc(constant(safe-area-inset-bottom) + 15px);
    padding: 15px 0 calc(env(safe-area-inset-bottom) + 15px);
}

.btn-primary {
    background-color: var(--color-primary);
    color: #fff;
}

.btn-primary:hover {
    background-color: #0e6dd3;
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: #fff;
}

.btn-secondary:hover {
    background-color: #eea615;
}

/* 공통 인풋 스타일 */
/* ===== 공통 인풋 및 폼 요소 스타일 ===== */
.input,

textarea,
button {
    padding: 0.5rem;
    font-size: var(--font-size-base);
    border: 1px solid #ccc;
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    font-family: inherit;
}

/* 인풋 포커스 */
.input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-primary, #4E7FFF);
}


/* 공통 타이포그래피 */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text);
}

h1 {
    font-size: 1.75rem; /* 약 28px */
}

h2 {
    font-size: 1.5rem; /* 약 24px */
}

h3 {
    font-size: 1.25rem; /* 약 20px */
}

h4 {
    font-size: 1.125rem; /* 약 18px */
}

h5 {
    font-size: 1rem; /* 16px */
}

h6 {
    font-size: 0.875rem; /* 14px */
}
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-bold {
    font-weight: bold;
}

/* 노치 영역 대응 */
.text-area {
    padding-left: env(safe-area-inset-left);
}
.text-area {
    padding-left: calc(env(safe-area-inset-left) + 15px);
}

/* section */
section{
    width: 100%;
}

.ellipsis {       /* 말줄임 처리를 위한 너비 지정 */
    overflow: hidden;    /* 넘치는 텍스트 감춤 */
    white-space: nowrap; /* 줄바꿈 없이 한 줄로 표시 */
    text-overflow: ellipsis; /* 넘치는 텍스트를 ... 으로 표시 */
}

/* 코멘트창 빈칸일 떄 여백 처리 */
.commentlist_new:empty {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}
.commentbox_new::after {
    content: "";
    display: block;
    clear: both;
}
/* 상단 */
.header{
    position: relative;
}
.header::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    background-color: #ddd;
    z-index: 100;
}
.header-top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 14px 8px;
    background-color: #ffffff;
    gap: 20px;
    flex-wrap: wrap;
}

.header-top > * {
    flex-shrink: 1;
    min-width: 0;
}
.logo{
    font-size: 0;
    width: 150px;
    height: 78px;
}
.logo img {
    width: 100%;
    height: 100;
    object-fit: contain;
}
.logo,
.search-box {
    flex: 0 1 auto; /* 줄어들 수 있게 허용 */
    position:relative;
}
.login-area{

    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px; /* 아이콘 사이 간격 */
    flex-wrap: nowrap; /* 줄바꿈 방지 */
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
    min-width: 200px; /* 필요시 최소 너비 확보 */
    flex: 0 0 auto;
}
.search-box {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 auto;
    max-width: 480px;

}

.search input[type="search"] {
    width: 100%;
    padding: 25px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}

.sub-link-list {
    display: flex;
    justify-content: center;
    gap: 10px;
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.sub-link-list li a {
    font-size: 13px;
    color: var(--color-text);
    text-decoration: none;
}

.sub-link-list li a:hover {
    color: var(--color-primary);
}

.login-area .login-list {
    display: flex;
    gap: 16px;
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.login-list li a {
    font-size: 14px;
    color: #333;
    text-decoration: none;
    font-weight: 500;
}

.login-list li a:hover {
    color: #1e88e5;
}
.login-list li i{
    font-size: var( --font-size-xl);
}
/* 전체 GNB 메뉴 */
.gnb-menu-box {
    background: #fff;
    padding: 0;
    position: relative;
    z-index:1000;
    margin-bottom: 40px;
    border-bottom: 1px solid #ddd;
}
.gnb-menu-list {
    display: flex;
    justify-content: space-around;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    position: relative;
    z-index: 99000;
}
.gnb-menu-list > li {
    position: relative;
    padding: 14px 0px;
    width: 130px;
    display: flex;
    justify-content: center;
    transition: all 0.3s;
}
.gnb-menu-list > li > a{
    font-weight: 700;
    font-size: 16px;
}
.gnb-menu-list > li > ul > a {
    font-weight: bold;
    display: block;
    color: #333;
    padding: 10px 0;
    font-weight: 400;
}
.gnb-menu-list a.shopping{
    margin-top: -8px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-primary);
    color: #414040;
    width: 110px;
    height: 40px;
    border-radius: 100px;
    font-weight: 700;
}
.gnb-menu-list a.shopping:hover{
    background-color:var(--color-point);
    color: #fff;
    text-decoration:none;
}
/* 서브메뉴 기본 숨김 */
.gnb-menu-list > li ul li {
    display: none;
}



.gnb-menu-list > li ul {
    display: grid;
    grid-template-columns: repeat(1, auto);
    gap: 6px;
    background: #ffffff;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 130px;
    border-radius: 0 0 8px 8px;
    z-index: 99001;
    /* border-top: 2px solid var(--color-primary); */
}

.gnb-menu-list > li ul li a {
    color: #555;
    font-size: 15px;
    padding: 10px;
    box-sizing: border-box;
    display: block;
    white-space: nowrap;
    text-align:center;
    width:100%;
}

/* 메뉴 hover 시 스타일 */
.gnb-menu-list > li:hover > ul > a {
    /* color: var(--color-primary); */
    color: #414040;
}

/* 선택된 메뉴 강조 */
.gnb-menu-list li a:hover {
    /* color: var(--color-primary); */
    color: #414040;
}
.gnb-menu-list > li > ul > li:hover{
    background: var(--color-primary);
}

/* 1. 서브메뉴 숨기기 - 기본 */
.gnb-menu-list ul li {
    display: none;
}


/* 3. 전체 드롭다운 메뉴 박스 스타일 */
.gnb-menu-list ul {
    display: grid;
    grid-template-columns: repeat(1, auto);
    gap: 6px;
    background: #ffffff;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 1000px;
    min-width: 130px;
    border-radius: 0 0 8px 8px;
    z-index: 99002;
    border-top: 2px solid var(--color-primary);
}


/* ul 하나하나의 배경 없애고, 공통 배경을 li::after로 덧씌움 */
.gnb-menu-list {
    position: relative;
}
/* 전체 드롭다운 배경 공통 박스 */
.gnb-menu-list::after {
    content: "";
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 480px;
    background-color: #ffffff;
    border-top: 2px solid var(--color-primary);
    border-bottom: 1px solid #ddd;
    z-index: 0;
}

.gnb-menu-list.active::after {
    display: block;
}

/* 서브 ul 개별 배치 */
.gnb-menu-list > li {
    position: relative;
}

.gnb-menu-list > li > ul {
    background: transparent;
    z-index: 10;
    display: none;
    padding: 10px 0;
}

/* 서브 li 정리 */
.gnb-menu-list > li > ul > li {
    text-align: left;
    height:38px;
    display:flex;
    align-items: center;
}
/* 기본 스타일 (PC) */
.hamburger-btn {
    display: none;
}
.mobile-menu {
    display: none;
}
/* 기본 PC용 메뉴는 모바일에서 안 보이게 */
.pc-only {
    display: block;
}
/* 데스크탑 기본 스타일 (전체 보임) */
.login-list .login-icon-only {
    display: none;
}
.login-list .login-text {
    display: inline-block;
}
.login-list .login-text a{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* 검색 창 */
.search-form {
    display: flex;
    align-items: center;
}

.search-form input[type="search"] {
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid var(--color-primary);
    border-radius: 4px 0 0 4px;
    outline: none;
    width: 100%;
    border-right:none;
    height:39px;
    display:flex;
    text-align:left;
}

.search-form .search-btn {
    background-color: var(--color-primary);
    color: #414040;
    border: none;
    padding: 8px 24px;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    height: 39px;
    display:inline-flex;
    align-items: center;
    justify-content: center;
}

.search-form .search-btn i {
    font-size: 16px;
}
/* 푸터 */
.site-footer {
    /* background: #f9f9f9; */
    color: #666;
    padding: 20px;
    font-size: 14px;
    line-height: 1.6;
}

.site-footer .footer-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* border-bottom: 1px solid #eeeeee; */
    padding: 20px 0;
    position: relative;
}
.site-footer .footer-top::before,
.site-footer .footer-top::after{
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    background-color: #eeeeee; /* 연한 회색 줄 */
    z-index: 1;
}
.site-footer .footer-top::before{
    top: 0;
}
.site-footer .footer-top::after{
    bottom: 0;
}
.site-footer .footer-logo img {
    height: 80px;
    /* margin-bottom: 16px; */
}

.site-footer .footer-menu {
    max-width: 1160px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 10;
}

.site-footer .footer-menu li a {
    color: #666;
    text-decoration: none;
}

.site-footer .footer-middle {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30px;
    gap: 20px;
    /* background: #f9f9f9; */
    padding: 30px 0px;
}

.site-footer .footer-inner{
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.site-footer .footer-sns a img {
    width: 24px;
    margin-right: 5px;
    vertical-align: middle;
}

.site-footer .footer-info {
    flex: 2;
    min-width: 300px;
    max-width: 600px;
}
.site-footer .footer-contact {
    flex: 1;
    text-align: right;
    min-width: 300px;
}
.site-footer .footer-contact .contact-boxes{
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: flex-end;
}
.site-footer .kakao-inq{
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: flex-end;
}
.site-footer .contact-box h4 {
    font-size: 15px;
    color: #888;
    margin: 0;
}

.site-footer .contact-box .phone {
    font-size: 20px;
    color: #333;
    font-weight: bold;
    margin: 4px 0 16px;
}

.site-footer .kakao-btn {
    display: inline-block;
    background: #ffe812;
    color: #000;
    padding: 8px 14px;
    border-radius: 20px;
    font-weight: bold;
    text-decoration: none;
    margin-top: 10px;
}

.site-footer .contact-time {
    font-size: 13px;
    color: var(--color-text);
    margin-top: 8px;
}
/* 메인 테스트 */
/* 메인 배너 영역*/
.plan-banner-area .container {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* ✅ 두 박스 높이 동일하게! */
    max-width: 1350px;
    margin: 0 auto;
    gap: 20px;
}

/* 왼쪽 배너 */
.banner-box {
    flex: 1 1 65%;
    display: flex;
}

.banner-box img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* 오른쪽 박스 */
.calendar-box {
    width: 400px;
    height: auto;
    background-color: white;
    position: relative;
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    background: url(/images/renewal/plan_back2.png) no-repeat center center;
    background-size: contain;
}

.calendar-box::before {
    left: 60px;
}

.calendar-box::after {
    right: 60px;
}

/* 헤더 */
.calendar-header {
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    padding: 24px 0;
    flex-shrink: 0;
}

.calendar-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top:5px;
}

.calendar-row {
    display: flex;
    flex: 1;
}

.calendar-cell {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    box-sizing: border-box;
    padding:12px;
}


.calendar-cell a {display:flex;width:100%;height:100%;align-items: center;justify-content: center;box-sizing:border-box;border-radius:10px;}
.calendar-cell a:hover {background:rgba(240,240,240,0.8);font-weight:bold;}

/* 마지막 열: 오른쪽 선 제거 */
.calendar-cell:last-child {
    border-right: none;
}

/* 마지막 행: 아래 선 제거 */
.calendar-row:last-child .calendar-cell {
    border-bottom: none;
}
/* .age-table tr:nth-child(1){
  background-color: #fdf7ee;
} */
/* .age-table tr:nth-child(2){
  background-color: #ffecec;
} */
/* 놀이주제별 계획안 */
.main-section {
    display: flex;
    width: 100%;
    max-width: 1200px;
    height: 450px; /* ✅ 고정된 동일 높이 */
    margin: 0 auto;
    align-items: flex-start;
    box-sizing: border-box;
    justify-content: center;
}
.theme-plan-section{
    flex: 0 0 35%;
    max-width: 35%;
    height: 100%;
    margin-top: 50px;
}
.theme-plan-section > * {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}
.theme-header h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    text-align: center;
}

.theme-header p {
    color: #666;
    margin-bottom: 20px;
    text-align: center;
}

.age-tab {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
    margin-bottom: 50px;
}

.tab-btn {
    padding: 8px 20px;
    border: 1px solid #ddd;
    border-radius: 20px;
    background-color: #f4f4f4;
    cursor: pointer;
    font-size: 16px;
}

.tab-btn.active {
    background-color: #FFE0B4;
    color: #000;
    font-weight: bold;
    border-color: #ffc185;
}

/* 스와이퍼 슬라이드 영역 */
.theme-carousel-wrapper {
    position: relative;
    overflow: hidden;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 60px; /* 양옆 화살표 여백 */
}

.theme-carousel {
    position: relative;
    width: 100%;
}

.theme-carousel-wrapper .swiper-slide {
    width: auto;
    flex-shrink: 0;
    margin-right: 24px; /* 슬라이드 사이 여백 */
}

.theme-carousel-wrapper .swiper-slide:last-child {
    margin-right: 0;
}

.theme-carousel-wrapper .swiper-slide img {
    display: block;
    width: 180px;  /* 이미지 가로 크기 */
    height: auto;
}

/* 영역 */
.theme-carousel-area {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.theme-carousel-area .swiper-container {
    overflow: hidden;
}

.theme-carousel-area .swiper-wrapper {
    display: flex;
}

.theme-carousel-area .swiper-slide {
    padding: 0 10px; /* 카드 간 간격 */
    box-sizing: border-box;
}

.theme-carousel-area .swiper-slide img {
    width: 100%;
    max-width: 160px;
    display: block;
    margin: 0 auto;
}

/* .theme-carousel-area .swiper-button-prev,
.theme-carousel-area .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: #333;
  font-size: 24px;
  cursor: pointer;
} */

.theme-carousel-area .plan-prev,
.theme-carousel-area .infant-prev {
    left: -50px; /* 화살표를 컨테이너 바깥쪽으로 */
}

.theme-carousel-area .plan-next,
.theme-carousel-area .infant-next {
    right: -50px;
}
.theme-carousel-area .plan-prev,
.theme-carousel-area .plan-next,
.theme-carousel-area .infant-prev,
.theme-carousel-area .infant-next {
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
}

/* 왼쪽 화살표 */
.theme-carousel-area .plan-prev::after,
.theme-carousel-area .infant-prev::after {
    content: '';
    display: inline-block;
    margin-left: 10px;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 15px solid #333;
}

/* 오른쪽 화살표 */
.theme-carousel-area .plan-next::after,
.theme-carousel-area .infant-next::after {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid #333;
}

/* 영 유아 활성화 */
.slide-wrap {
    display: none;
}
.slide-wrap.active {
    display: block;
}

.tab-btn.active {
    background-color:var(--color-primary); /* 선택된 버튼 표시용 */
    color: var(--color-text);
    border:solid 1px var(--color-primary);
}
/* 아이콘 */
.icon-area {
    max-width: 65%;
    margin: 50px 0px 50px 86px;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.icon-area h2 {width:100%;text-align:center;margin-bottom:8px;}

.icon-area p {
    color: #666;
    margin-bottom: 20px;
    text-align: center;
}


.icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 80px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
    margin-top:10px;
}

.icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
    color: #333;
}

.icon-item img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    margin-bottom: 8px;
}
/* 자료 추천 섹션*/
.resource-section {
    display: flex;
    align-items: stretch;           /* ✅ 높이 동일 */
    justify-content: center;
    column-gap: 24px;               /* ✅ 사이 여백 */
    padding: 60px 20px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}
.resource-section .container{
    display: flex;
    gap: 24px;
}
.resource-section .resource-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1 1 50%;
    padding: 40px 20px;
    box-sizing: border-box;
    text-align: center;
    height: 100%;
}
.resource-section .resource-box h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}

.resource-section .resource-box p {
    font-size: 16px;
    color: #555;
    margin-bottom: 24px;
}

.resource-section .resource-box.data-package {
    flex: 0 0 40%;
    background-color: #fff4f5;
}

.resource-section .resource-box.popular {
    flex: 0 0 60%;
    background-color: #FFF9F0;
}

.resource-section .resource-list {
    display: flex;
    justify-content: center;
    gap: 20px;
    list-style: none;
    padding: 15px 25px;
    margin: 0;
    flex-wrap: nowrap;
}

.resource-section .resource-list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 220px;
    max-height: 220px;
    width: 100%;
}
.resource-section .resource-list li img {
    width: 100%;
    height: 220px;
    object-fit: contain;
}

.resource-section .resource-list li span {
    margin-top: 10px;
    font-size: 16px;
    color: #333;
}


/* 꼬망세몰 영역 */
.product-list {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.product-card {
    width: 150px;
    text-align: center;
    font-size: 15px;
}

.product-card img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 6px;
}

.product-card .name {
    margin: 4px 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-card .price {
    font-weight: 600;
    color: #333;
}

.product-card .price .main_shopsale {
    color:#f25c5c;
}

.product-card .sale {
    color: #f25c5c;
    font-weight: 700;
    margin-right: 4px;
}
.shop-banner-wrap {
    display: flex;
    justify-content: center;
    background: #f5f7fb;
    padding: 32px 0;
}
.shop-banner {
    max-width: 1100px;
    width: 100%;
    padding: 24px;
    border-radius: 12px;
    margin: 0 auto;
}
.shop-banner .banner-box{
    width: 100%;
    display: flex;
    gap: 52px;
    align-items: flex-start;
}
.shop-left{
    flex: 0 0 300px;
}
.shop-left img {
    border-radius: 16px;
    width: 300px;
    object-fit: cover;
}
.shop-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    position:relative;
}
.shop-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.shop-tags a {
    display: block;
    background: #f0f8ff;
    color: #1a60a9;
    padding: 8px 12px;
    border-radius: 40px;
    font-size: 15px;
}
.shop-tags a.active{
    background-color: var(--color-primary);
    color: #000;
}
.shop-title {
    font-size: 20px;
    font-weight: 700;
    margin: 6px 0;
}
.shop-desc {
    font-size: 16px;
    color: #555;
}
.shop-more {
    display: flex;
    justify-content: flex-end;
    flex: 1;
    text-align: right;
    position:absolute;
    right:0px;
    top:60px;
}
.shop-more a {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid #bbb;
    border-radius: 20px;
    font-size: 15px;
    color: #333;
    text-decoration: none;
}
/* 공지사항, 가정 통신문*/
.notice-section .container{
    max-width: 1300px;
}
.notice-section {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 60px 20px;
    flex-wrap: wrap;
}

.notice-board {
    flex: 1 1 400px;
    padding-right: 40px;
    box-sizing: border-box;
}

.board-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}

.board-header h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.board-header p {
    font-size: 14px;
    color: #555;
    margin: 4px 0 0;
}

.btn-more {
    font-size: 15px;
    padding: 6px 14px;
    border: 1px solid #ddd;
    border-radius: 30px;
    background: #fff;
    color: #333;
    text-decoration: none;
}

.board-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.board-list li {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
    height: 30px;
}
.board-list li a{
    width: 100%;
    padding: 14px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 16px;
    height: 30px;
}
.board-list .label {
    font-size: 15px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 6px;
    color: #fff;
}

.board-list .label.red {
    background-color: #FFD2CB;
    color: #FF523B;
}

.board-list .label.blue {
    background-color: #D7E3FF;
    color: #6E92E3;
}

.board-list .text {
    flex: 1;
    text-align: left;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board-list .date {
    font-size: 15px;
    color: #999;
    white-space: nowrap;
}
.banner2{
    max-width: 1300px;
    display: flex;
    justify-content: center;
    margin: 20px auto 100px;
}
.banner2 ul{
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.banner2 ul li{
    max-width: 645px;
    width: 100%;
}
.banner2 ul li a{
    max-width: 645px;
    width: 100%;
}
.banner2 ul li a img{
    width: 100%;
    object-fit: contain;
}

/* 전체 고정 메뉴 */
/* 전체 영역 */
.floating-container {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    z-index: 9999;
    transition: right 0.3s ease;
}

.floating-container.closed .floating-menu {
    display: none;
}

.toggle-btn {
    padding:0px;
    background:none;
    cursor: pointer;
    z-index: 1000;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border: none;
    position:relative;
    font-size:14px;
    background:url("/images/renewal/icon_quick_back.png");
    background-size:80px 80px;
    height:80px;
    width:80px;
    margin-right:-2px;
}
.toggle-btn .menu-name {line-height:16px;font-size:14px;margin-bottom:20px;color:#333;font-weight:600;padding-left:5px;}

.toggle-btn img {width:90px;}

.floating-menu {
    background-color: #fff;
    border-left: 1px solid #ccc;
    height: 100vh;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: -2px 0 6px rgba(0, 0, 0, 0.1);

}
/* 열릴 때 클래스 추가하면 제자리로 */
.floating-menu.open {
    transform: translateX(0);
}
.floating-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.floating-menu li {
    display: flex;
    align-items: center;
    padding: 12px 8px;
    font-size: 18px;
    cursor: pointer;
}
.item {
    position: relative; /* label이 item 내부에 붙게 함 */
}
.floating-menu .label {
    width: 120px;
    position: absolute;
    bottom: -5px;
    right: -10px;
    /* margin-right: 12px; */
    background-color: #e0f4ff;
    color: #333;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    font-size: 13px;
    box-shadow: 0 0 4px rgba(0,0,0,0.1);
    z-index: 3000;
    display: flex;
    align-items: center;
    height: 36px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.floating-menu li:hover .label {
    opacity: 1;
}

.icon {
    width: 24px;
    height: 24px;
    display: block;
    position: relative;
    z-index: 4000;
}
/* .floating-buttons {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 1000;
}

.floating-btn { */
/* background-color: var(--color-primary);
color: white; */
/* text-align: center;
padding: 16px 12px;
border-radius: 16px 0 0 16px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
position: relative;
width: 70px;
}
.floating-btn.popular{
padding-bottom: 50px;
background-color: #FFF0C7;
color: #333;
}
.floating-btn .qr-section a{
display: block;
width: 60px;
height: 60px;
font-size: 0;
}
.floating-btn.qr-section{
background-color: #B6C6EB;
color: #333;
}
.toggle-icon {
background-color: #f4a9a3;
border: none;
border-radius: 50%;
width: 32px;
height: 32px;
color: white;
font-size: 16px;
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
cursor: pointer;
}
.qr-section img {
margin-top: 10px;
width: 60px;
height: auto;
}

.floating-menu {
position: fixed;
top: 46%;
right: 110px;
height: 190px;
transform: translateY(-46%);
background-color: #FFF0C7;
padding: 24px;
box-sizing: border-box;
border-radius: 24px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
display: none;
z-index: 999;
}

.floating-menu.show {
display: block;
} */

.menu-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.menu-item {
    text-align: center;
    font-size: 14px;
    color: #222;
}

.menu-item img {
    display: block;
    margin: 0 auto 6px;
    width: 48px;
    height: auto;
}


/* 배너 영역 swiper */
/* 🧼 swiper 기본 세팅 */
.banner-area {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.banner-area .swiper-wrapper {
    display: flex;
}

.banner-area .swiper-slide {
    flex: 0 0 100%; /* 한 슬라이드가 100% 너비 */
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-box {
    width: 100%;
}

.banner-box img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* 1px 밀리는 문제 */
.banner-area .swiper-slide,
.banner-box,
.banner-box img {
    box-sizing: border-box;
}

/* 공통 스타일 */
.banner-prev,
.banner-next {
    position: absolute;
    top: 50%;
    /* transform: translateY(-50%); */
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.banner-prev:hover,
.banner-next:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius:50px;
}

/* 화살표 위치 */
.banner-prev {
    left: 10px;
    top:50%;
    margin-top:-30px;
}
.banner-next {
    right: 10px;
    top:50%;
    margin-top:-30px;
}

/* Swiper 기본 화살표 아이콘 제거하고 ::after로 대체 */
.banner-prev::after,
.banner-next::after {
    font-size: 18px;
    font-weight: bold;
}

.banner-prev::after {
    font-family: 'Font Awesome 6 Free'; /* 또는 'Font Awesome 5 Free' */
    font-weight: 900; /* Solid 스타일은 900 */
    content: '\f104'; /* chevron-left */
    font-size: 30px;
}

.banner-next::after {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: '\f105'; /* chevron-right */
    font-size: 30px;
}
.swiper-pagination-bullet-active{
    background: var(--color-point) !important;
}

.swiper-pagination {
    bottom: 10px;
    text-align: center;
    position:absolute;
    width:100%;

}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #ddd;
    opacity: 1;
    margin: 0 4px;
    border-radius: 50%;
    transition: background 0.3s;
    display:inline-flex;
}

.swiper-pagination-bullet-active {
    background: #ff7f50; /* 활성화된 dot 색상 */
}

/* 유아 단위 계획안 */
.plan-act-baby {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
    clear:both;
}
.plan-act-baby .page-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-top:10px;
}
.plan-act-baby .filter-ui {
    font-size: 14px;
    color: #333;
    margin: 20px 0;
}

.plan-act-baby .filter-group {
    margin-bottom: 20px;
}

.plan-act-baby .filter-group h4 {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: bold;
}

.plan-act-baby .filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.plan-act-baby .filter-options input[type="checkbox"] {
    display: none;
}

.plan-act-baby .filter-options label {
    padding: 6px 12px;
    background: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 20px;
    cursor: pointer;
    transition: 0.2s;
}

.plan-act-baby .filter-options input[type="checkbox"]:checked + label {
    background-color: var(--color-primary);
    color: white;
    border: 1px solid transparent;
}

.plan-act-baby .search-input {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.plan-act-baby .search-input input {
    padding: 8px 12px;
    width: 250px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.plan-act-baby .search-input button {
    padding: 8px 16px;
    margin-left: 8px;
    border: none;
    background: var(--color-primary);
    color: white;
    border-radius: 4px;
    cursor: pointer;
}

.plan-act-baby .selected-tags {
    display: flex;
    margin-bottom: 20px;
}
.plan-act-baby .selected-tags span{
    cursor: pointer;
}
.plan-act-baby .tag {
    display: inline-block;
    background: #d9eaff;
    color: var(--color-primary);
    padding: 4px 10px;
    margin: 4px 6px 0 0;
    border-radius: 16px;
    font-size: 13px;
}
.plan-act-baby .activity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-top: 20px;
    border-top: 2px solid #333;
}

.plan-act-baby .activity-table th {
    text-align: left;
    padding: 12px 10px;
    border-bottom: 1px solid #ddd;
    font-weight: 600;
    background-color: #f9f9f9;
}

.plan-act-baby .activity-table td {
    padding: 14px 10px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

.plan-act-baby .activity-table td small {
    font-size: 12px;
    color: #888;
}

.plan-act-baby .activity-table img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid #ccc;
    margin-bottom: 4px;
    display: block;
}

.plan-act-baby .file-type {
    font-size: 13px;
    color: #444;
}
/* 전체 체크 해제 */
.filter-reset-btn {
    display: inline-block;
    background: #e7e7e7;
    color: var(--color-text);
    padding: 4px 10px;
    margin: 4px 6px 0 0;
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;
}
.filter-reset-btn:hover {
    background-color: #ddd;
}
.filter-reset-wrap{
    display: flex;
    justify-content: flex-end;
}
#filter-reset-btn {
    display: none;
}

.formSelect {height:28px;}

.formSelect.basic{
    height: 28px;
    border-radius:0px;
    padding:0px 6.5px;
}

.formSelect.round{
    height:35px;
    border-radius:var(--radius-sm);
}

/* 스마트 계획안 가운데 정렬 */
.newplan_infowrap{
    display: flex;
    flex-wrap: wrap;
    /* justify-content: center; */
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
/* .smartplan_befibox1,
.smartplan_befibox2 {
  width: 100%;
} */
.smartplan_befibox3{
    width: 41%;
}

/* 스마트 계획안 탭메뉴 */
.smart-tab-menu {
    background-color: #fff;
    /* margin-top: 20px; */
    border-bottom: 2px solid #ddd; /* 전체 탭 메뉴 아래 구분선 */
}

.smart-tab-menu ul {
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.smart-tab-menu li {
    margin: 0 10px;
    padding: 12px 16px;
    position: relative;
}

.smart-tab-menu li a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 14px;
    font-family:'Pretendard', sans-serif;
}

.smart-tab-menu li a:hover {
    color:var(--color-point);
    font-weight:bold;
}

.smart-tab-menu li.active a {
    color: var(--color-point);
    font-weight: 600;
}

.smart-tab-menu li.active::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color:var(--color-point);
}
/* 하위 탭이 존재하는 경우 */
ul.tab-sub {
    display: flex;
    border-bottom: none; /* ✅ ul 자체 선 제거 */
    list-style: none;
    padding-left: 0;
    margin: 20px 0;
    width: 100%;
    justify-content: center;
    z-index: 0;
    position: relative; /* ✅ 중요: 내부 z-index 조절용 */
    background-color: #fff;
}
ul.tab-sub::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: var(--color-point);
    z-index: 0;
}
ul.tab-sub li {
    flex: 1;
    text-align: center;
    height: 45px;
    line-height: 45px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-bottom: none;
    background-color: #fff;
    box-sizing: border-box;
    color: #444;
    z-index: 0;
    position: relative;
    font-size:14px;
}
ul.tab-sub li a {
    color:#444;
}

ul.tab-sub li + li {
    margin-left: -1px;
}

ul.tab-sub li:first-child {
    border-left: 1px solid #ccc;
}

ul.tab-sub li.active {
    border: 2px solid var(--color-point);
    border-bottom: none;
    background-color: #fff;
    z-index: 2;
}
ul.tab-sub li.active a {font-weight:bold;color:#000;}

/* 브레인킨더 */
.program_refer_thum{
    display: flex;
    justify-content: center;
}
/* 스마트 한글 수 버튼 */
.custom-button-wrap {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.custom-button {
    background-color: #D8E7FC;
    color: #fff;
    border: none;
    padding: 10px 20px;
    min-width: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 500;
    box-sizing: border-box;
}

.custom-button i {
    font-size: 16px;
}

/* 아이콘과 텍스트 사이 구분선 효과 */
.custom-button i::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 16px;
    background: rgba(255,255,255,0.4);
    margin: 0 10px 0 10px;
    position: relative;
    top: 2px;
}
/* 한글 책 가운데 정렬 */
/* td 자체는 텍스트 정렬 */
#objImgWrap_3753 {
    position: relative;
    height: 460px;
    padding: 0; /* 여백 제거 */
}

#objImgWrap_3753 > .oImgItem {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    max-width: none;  /* 제한 해제 */
    max-height: 100%; /* 세로 꽉 차게 */
}

#objImgWrap_3753 > .oImgItem[style*="display: block"] {
    display: block !important;
}

#objImgWrap_3753 img {
    display: block;
    height: 100%;     /* 세로 기준 꽉 채움 */
    width: auto;      /* 가로는 비율 유지 */
}

#objImgWrap_3754 {
    position: relative;
    height: 460px;
    padding: 0; /* 여백 제거 */
}

#objImgWrap_3754 > .oImgItem {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    max-width: none;  /* 제한 해제 */
    max-height: 100%; /* 세로 기준 꽉 차게 */
}

#objImgWrap_3754 > .oImgItem[style*="display: block"] {
    display: block !important;
}

#objImgWrap_3754 img {
    display: block;
    height: 100%;     /* 세로 기준 꽉 채움 */
    width: auto;      /* 비율 유지 */
}
#objImgWrap_3756 {
    position: relative;
    height: 460px;
    padding: 0; /* 여백 제거 */
}

#objImgWrap_3756 > .oImgItem {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    max-width: none;  /* 제한 해제 */
    max-height: 100%; /* 세로 기준 꽉 차게 */
}

#objImgWrap_3756 > .oImgItem[style*="display: block"] {
    display: block !important;
}

#objImgWrap_3756 img {
    display: block;
    height: 100%;     /* 세로 기준 꽉 채움 */
    width: auto;      /* 비율 유지 */
}

#objImgWrap_3757 {
    position: relative;
    height: 460px;
    padding: 0; /* 여백 제거 */
}

#objImgWrap_3757 > .oImgItem {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    max-width: none;  /* 제한 해제 */
    max-height: 100%; /* 세로 기준 꽉 차게 */
}

#objImgWrap_3757 > .oImgItem[style*="display: block"] {
    display: block !important;
}

#objImgWrap_3757 img {
    display: block;
    height: 100%;     /* 세로 기준 꽉 채움 */
    width: auto;      /* 비율 유지 */
}
/* 250709 리뉴얼 */
/* 캘린더 섹션 */
.calanderbox{
    display: flex;
    align-items: stretch;
}
/* 연간놀이 계획안 섹션 */
.yearly-plan-section,
.monthly-free-section,
.weekly-plan-section,
.day-plan-section {
    background-color: #FFF;
    padding: 15px;
    text-align: center;
    box-sizing: border-box;
    width: 370px;
    height: 237px;
    border-left:solid 2px var(--color-point);
}

.section-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}

.monthly-free-section .section-title{

}
.plan-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.plan-wrapper.item3{
    gap: 10px;
}
.plan-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0;
    width: 100px;
}

.plan-item.item3{
    width:85px;
}
.plan-item a{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.plan-item img {
    width: 100%;
    height: auto;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.plan-caption {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 500;
}
.plan-cap{
    font-size: 12px;
}

/* 서브카테고리 */
.subcategory-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 25px 0 5px;
    font-size: 14px;
    padding: 0 20px; /* 좌우 여백 */
}

.subcategory-filter .label {
    font-weight: bold;
    color: #333;
}

.subcategory-list {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.subcategory-list li button {
    background-color: #f2f2f2;
    border: none;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
}

.subcategory-list li button:hover {
    background-color: #e0e0e0;
}
/* 스마트 한글수 책 넘기기 */
#objImgWrap_3758,
#objImgWrap_3759 {
    position: relative;
    height: 460px;
    padding: 0; /* 여백 제거 */
}

#objImgWrap_3758 > .oImgItem,
#objImgWrap_3759 > .oImgItem {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    max-width: none;  /* 제한 해제 */
    max-height: 100%; /* 세로 기준 꽉 차게 */
}

#objImgWrap_3758 > .oImgItem[style*="display: block"],
#objImgWrap_3759 > .oImgItem[style*="display: block"] {
    display: block !important;
}

#objImgWrap_3758 img,
#objImgWrap_3759 img {
    display: block;
    height: 100%;     /* 세로 기준 꽉 채움 */
    width: auto;      /* 비율 유지 */
}

/* 좌측에 추천 패키지 뜨는 UI */
.recommend-wrapper {
    padding: 20px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    max-width: 300px;
}

.recommend-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}

.recommend-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.recommend-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.recommend-item img {
    width: 100%;
    border-radius: 6px;
}

.recommend-item .title {
    margin-top: 8px;
    font-size: 14px;
    color: #333;
}

.bold{
    font-weight: bold;
}
.div_item {
    flex: 1 1 calc(25% - 24px); /* 4개 기준 */
    max-width: calc(25% - 24px);
    box-sizing: border-box;
    padding: 16px;
    text-align: center;
    background: #fff;
    border-radius: 8px;
}
.item-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 24px; /* 카드 사이 간격 */
    justify-content: space-between;
    margin-top: 20px;
}
/* 유료회원 안내 */
.floating-cta {
    position: fixed;
    right: 30px;
    bottom: 30px;
    background-color: #ff7373;
    color: #fff;
    padding: 12px 18px;
    border-radius: 30px;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 999;
    transition: background 0.3s;
}
.floating-cta:hover {
    background-color: #ff5757;
}
.flex_R{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.center-wrapper {
    width: 1000px;
    display: flex;
    justify-content: center;
}
/*체크박스 색상 변경*/
input[type="checkbox"] {
    accent-color: var(--color-primary); /* 원하는 색상 (하늘색) */

}
/* 알림장 도우미 */
/* Floating Button */
.floating-chat-wrap {
    position: fixed;
    bottom: 30px;
    right: 40px;
    display: flex;
    align-items: center;
    z-index: 10000;
    gap: 12px;
}

.floating-chat-message {
    max-width: 220px; /* 너무 길어지지 않게 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    background: #fff;
    padding: 16px 12px;
    font-size: 14px;
    color: #333;
    border-radius: 30px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    display: inline-block;
    transform: translateX(-20px); /* 💡 살짝 왼쪽으로 이동 */
    margin-right: 40px;
    margin-bottom: 0px;
}
.floating-chat-button {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.floating-chat-button img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}
#chatWindow{
    display: none;
}
.chat-window {
    position: fixed;
    bottom: 20px;
    right: 100px; /* 아이콘보다 왼쪽에 위치하도록 조정 */
    width: 400px;
    height: 600px;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 2000;
    font-family: sans-serif;
}
.chat-window.expanded {
    width: 700px;
    height: 800px;
}
.chat-header {
    background-color: #D8E7FC;
    color: #414040;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}
.chat-header strong{
    font-size:18px;
    font-weight: bold;
    padding-left: 10px;
}
/* 버튼 컨테이너 */
.chat-header-buttons {
    display: flex;
    align-items: center;
    gap: 4px; /* 버튼 사이 간격 최소화 */
}
/* 모든 아이콘 버튼 공통 스타일 */
.icon-btn {
    background: none;
    border: none;
    color: #414040;
    font-size: 16px;
    padding: 6px;
    cursor: pointer;
}
/* .icon-btn:hover {
  opacity: 0.8;
} */
.icon-btn.new-feature-btn{
    width: 32px;
}
.icon-btn.new-feature-btn img{
    width: 100%;
    object-fit: contain;
}
.chat-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    overflow-y: auto;
    flex-grow: 1;
}

.chat-message {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
    position: relative;
}

.chat-message.bot {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: flex-start;
    background-color: #f1f1f1;
    color: #333;
}

.chat-message.user {
    align-self: flex-end;
    background-color: #D8E7FC;
    color: #414040;
    padding: 10px 14px;
    border-radius: 16px 16px 0 18px;
    max-width: 75%;
    width: fit-content;
    word-break: break-word;
    margin: 8px 0;
    display: inline-block;
    text-align: left;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.usage-count {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 12px;
    color: #666;
}
.intro-card {
    border-radius: 16px;
    padding: 20px;
    text-align: center;
}
.intro-card img{
    width: 150px;
    height: 150px;
}
.intro-header {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.intro-text {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 16px;
    text-align: left;
}

.intro-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.intro-btn {
    padding: 8px 16px;
    background-color: #FDDFE8;
    color: #414040;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.intro-btn:hover {
    background-color: #ffb7ce;
}
/* 버튼 스타일 */
.tone-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.tone-btn {
    padding: 6px 14px;
    border: 1px solid #ccc;
    border-radius: 20px;
    background-color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tone-btn:hover {
    background-color: #D8E7FC;
    color: #fff;
    border-color: transparent;
}

.tone-btn.selected {
    background-color: #D8E7FC;
    color: #414040;
    border-color: transparent;
}

.tone-btn.long {
    padding-left: 16px;
    padding-right: 16px;
    font-size: 13px;
}

.button-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.select-btn {
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid #ccc;
    background-color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.select-btn.active,
.select-btn:hover {
    background-color: #D8E7FC;
    color: #414040;
    border-color: #D8E7FC;
}

.chat-footer {
    display: flex;
    padding: 12px 16px;
    border-top: 1px solid #ddd;
    background-color: #fff;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: white;
}

.chat-footer input[type="text"] {
    flex: 1;
    padding: 10px;
    border-radius: 20px;
    border: 1px solid #ccc;
    outline: none;
    font-size: 14px;
    box-sizing: border-box;
}

.send-btn {
    margin-left: 10px;
    padding: 10px 16px;
    background-color: #D8E7FC;
    color:#414040;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
}

.close-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: #414040;
    cursor: pointer;
}
/* 타임 스탬프 */
.timestamp-wrapper {
    margin-top: 4px;
    font-size: 11px;
    color: #999;
    text-align: left;
}

/* 기본적으로 숨김 처리 */
.timestamp-wrapper {
    margin-top: 4px;
    font-size: 11px;
    color: #999;
    text-align: left;
}
.chat-wrapper{
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
}
.chat-wrapper.user .timestamp-wrapper {
    text-align: right;
}

.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.action-btn {
    padding: 10px 16px;
    border: none;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    color: #333;
    width: fit-content;
    transition: background-color 0.2s ease;
}

.action-btn.blue {
    background-color: #D8E7FC;
}

.action-btn.yellow {
    background-color: #FDDFE8;
}

.action-btn.pink {
    background-color: #D8E7FC;
}
.action-btn.back{
    background-color: #F9E4AB;
}
/* 선택 레이아웃 */
.dropdown-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    max-width: 479px;
    width: 100%;
    margin: 0;
}
.dropdown-box {
    position: relative;
    /* flex: 1; */
    width: 180px;
}

/* 버튼 */
.dropdown-btn {
    width: 100%;
    padding: 8px 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
    text-align: left;
    font-weight: 400;
    position: relative;
    padding-right: 24px;
    width: 200px; /* 버튼도 넉넉하게 */
}
.dropdown-btn i {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* 클릭 막기 (선택 사항) */
}
.dropdown-btn.open .arrow {
    transform: translateY(-40%) rotate(180deg);
}
.dropdown-btn .arrow{
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* 클릭 방지 */
}
/* 드롭다운 리스트 */
.dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;  /* 이 부분을 키워보세요 */
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    padding: 10px 0;
}
.dropdown-list.show {
    display: block;
}

.dropdown-box.active .dropdown-list {
    display: block;
}

.dropdown-list label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    cursor: pointer;
}
.custom-checkbox {
    display: block;
    padding: 4px 14px;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
}

/* select 메뉴 커스텀 */
.custom-select-wrapper {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    font-size: 16px;
}
.custom-select {
    position: relative;
    display: block; /* 또는 inline-block */
    width: 100%;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
}

.custom-select-trigger {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    background: #ffffff;
    border-radius: 6px;
    cursor: pointer;
}
.custom-select-trigger i{
    font-size: var(--font-size-xl);
}
.custom-select.open .arrow {
    transform: rotate(180deg);
}
.arrow {
    float: right;
    transition: transform 0.3s ease;
}

.custom-options {
    position: absolute;
    top: 100%; /* 아래로 붙게 */
    left: 0;
    width: 100%; /* 부모 너비 기준 */
    border: 1px solid #ccc;
    border-radius: 6px;
    background: white;
    display: none;
    flex-direction: column;
    align-items: stretch;
    z-index: 1000;
}

.custom-option {
    padding: 8px 14px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}

.custom-option:hover {
    color: #fff;
    background: var(--color-primary);
}

.custom-select.open .custom-options {
    display: flex;
    flex-direction: column;
}
.custom-select.disabled {
    opacity: 0.6;
    pointer-events: none;
}

.custom-select.disabled .custom-select-trigger {
    background-color: #eee;
    cursor: not-allowed;
}

#wrap.test{
    min-height: 500px;
}
.copy-popup {
    display: none;
    background: white;
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    z-index: 999;
}

.copy-menu-item {
    display: block;
    padding: 6px 10px;
    background: none;
    border: none;
    text-align: left;
    width: 100%;
    cursor: pointer;
}

.copy-menu-item:hover {
    background-color: #f0f0f0;
}
.dropdown-wrapper{
    max-width: 200px;
    width: 100%;
}
.typing-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 4px 8px;
}

.typing-indicator span {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #aaa;
    border-radius: 50%;
    animation: blink 1.4s infinite;
}

.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes blink {
    0% { opacity: 0.3; transform: translateY(0); }
    20% { opacity: 1; transform: translateY(-2px); }
    100% { opacity: 0.3; transform: translateY(0); }
}

.footer_container {width:100%;clear:both;width:100%;padding-bottom:20px;margin-top:40px;}

/* auto complete 수정 */
.ui-autocomplete { z-index:9999;max-width: 420px;}
/* 자동완성 전체 박스 */
.ui-autocomplete {
    background: #fff;
    border: 2px solid #0078ff;
    font-size: 1.1em;
    max-height: 300px;
    overflow-y: auto;
    /* box-shadow도 추천 */
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* 리스트 각각(li) 기본 스타일 */
.ui-autocomplete .ui-menu-item {
    padding: 10px 18px;
    color: #222;
    cursor: pointer;
    transition: background 0.18s;
    font-size:14px;
}

/* hover, 선택 상태 */
.ui-autocomplete .ui-menu-item.ui-state-active,
.ui-autocomplete .ui-menu-item:hover {
    background: #f0f6ff;
    color: #0078ff;
    font-weight: bold;
}

.search_layerall {top:78px;left:auto;}

/* 인기자료 */
.resource-list.wide {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 90px); /* 원하는 높이로 지정 */
    gap: 20px;
    width: auto;
    padding:25px 20px;
}

.resource-list.wide li {
    overflow: hidden;
    position: relative;
    height: 100%;          /* 셀 높이 꽉 차게 */
    align-self: stretch;   /* 세로 가운데 정렬 방지 */
}

.resource-list.wide li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 위치 지정 */
.resource-list.wide li:nth-child(1) { grid-column: 1; grid-row: 1; }
.resource-list.wide li:nth-child(2) { grid-column: 1; grid-row: 2; }
.resource-list.wide li:nth-child(3) { grid-column: 2; grid-row: 1; }
.resource-list.wide li:nth-child(4) { grid-column: 2; grid-row: 2; }
.resource-list.wide li:nth-child(5) { grid-column: 3; grid-row: 1 / span 2; }
.resource-list.wide li:nth-child(6) { grid-column: 4; grid-row: 1 / span 2; }


/* ───────────────────────────────
   검색 레이어 전체 박스
──────────────────────────────── */
.search_layerall {
    position: absolute;
    top: 50px;                 /* 필요 시 조정 */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 760px;
    padding: 32px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 6px 30px rgba(0,0,0,.12);
    z-index: 9999;
    min-width:560px;
    display:none;
}

/* 내부를 2‑칼럼(Flex) */
.search_layerall .layer-inner {
    display: flex;
    gap: 40px;                 /* 칼럼 사이 간격 */
}

/* ───── 왼쪽 : 추천 검색어 ───── */
.search-keyword {
    width:45%;
    background:#F7F9FC;
    padding:1.5rem;
}

.search-keyword h2 {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 700;
}

.search-keyword ul {
    /* 토큰을 행 단위로 감싸서 래핑 */
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.search-keyword li a {
    display: inline-block;
    padding: 8px 16px;
    font-size: 14px;
    color: #333;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 999px;
    white-space: nowrap;
    transition: .2s;
    text-decoration: none;
}

.search-keyword ul li {border:none !important; background:none !important;}

/* ───── 오른쪽 : 실시간 인기 검색어 ───── */
.search-best {
    width: 55%;
}

.search-best h2 {
    position: relative;
    margin: 0 0 18px;
    font-size: 20px;
    font-weight: 700;
}

/* 닫기(X) 버튼 */
.search-best h2 .close-btn {
    position: absolute;
    top: -8px;
    right: -16px;
    font-size: 26px;
    line-height: 1;
    color: #999;
    cursor: pointer;
}

.search-best ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.search-best li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 15px;

}
.search-best li a {display:flex;height:36px;align-items: center;width:100%;}
.search-best li a:hover {text-decoration:underline;}

.search-best .search_best_level {
    width: 22px;               /* 번호 폭 고정 */

    font-weight: 700;
    color: #0056d2;
    flex: 0 0 22px;
}

.search-best .search_best_txt {
    flex: 1 1 auto;
    word-break: keep-all;
}

.search-best .search_best_num {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #f90;
    flex: 0 0 auto;
    margin-left:auto;
}

/* SVG 아이콘 크기 통일 (선택) */
.search-best .search_best_num svg {
    margin-right: 2px;
}

/* ───── 반응형(모바일) : 한 칼럼로 전환 ───── */
@media (max-width: 640px) {
    .search_layerall {
        padding: 24px;
    }
    .search_layerall .layer-inner {
        flex-direction: column;
        gap: 28px;
    }
    .search-best {
        width: 100%;
        flex: 1 1 auto;
    }
}

.act_table tr td label {display:inline-flex;align-items: center;}
.act_table tr td label input[type=checkbox] {margin-right:3px;}

.topic-tap li a {color:#000;}

.clips-name {font-size:12px;color:#000;margin-top:5px;}
.clips-tags {width:100%;display:block;margin-top:10px;}
.clips-tags .tag {display:inline-flex;padding:1px 4px;background:#f4f4f4;color:#333;font-size:11px;font-weight:bold;border-radius:0px;}

.btn-login {background:var(--color-point);width:100px;height:62px;display:inline-flex;align-items: center;justify-content: center;font-weight:bold;color:#fff !important;text-decoration:none !important;}
.btn-login:hover {background: #4578dd;}

.basic-tabs {display:flex;}

#BodyBox {background:none !important;}