: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;
    max-width: 1440px !important; /* 기존 max-width 무시 */
    width: 1440px !important;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}
.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: 21px;
}
.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: 120px;
    height: 40px;
    border-radius: 50px;
    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: 19px;
    padding: 10px;
    box-sizing: border-box;
    display: block;
    white-space: nowrap;
    text-align: center;
}

/* 메뉴 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: 610px;
    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:#fff;
    z-index: 10;
    display: none;
    padding: 10px 0;
}

/* 서브 li 정리 */
.gnb-menu-list > li > ul > li {
    display: block;
    text-align: left;
}
/* 기본 스타일 (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-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;
    }

    .top-banner-wrap {display:none !important;}
    .floating-container {display:none !important;}
    .floating-chat-wrap {display:none !important;}
}

.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;}



/* 가정통신문 */
/* 뉴스레터 생성하기 페이지 */
/* 공통 */
.ai-gen *{box-sizing:border-box; font-size: 15px;}
.ai-gen img{display:block;max-width:100%}
.req{color:#ff5a5a;margin-right:4px}

/* 상단 */
.ai-gen__topbar{display:flex;align-items:center;justify-content:space-between;margin:12px 0}
.ai-gen__h3{padding-top: 15px; margin:0;font-size:18px;font-weight:800;color:#1f2a44}
.ai-gen__h3 i{
    font-size:7px;       /* 살짝 키우거나 줄여보기 */
    margin-right: 4px;     /* 텍스트랑 간격 */
    position: relative;
    top: -3px;             /* 살짝 위로 올려 정렬 맞춤 */
}
.ai-gen__vault-btn{padding:10px 16px;border:1px solid #dfe6f3;border-radius:8px;background:#fff;color:#1f2a44;text-decoration:none;font-weight:600; display: flex; align-items: center; gap: 8px; font-size: 16px;}
.ai-gen__vault-btn:hover{background:#EAF6FF}
.ai-gen__vault-btn img{
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.ai-gen__topbar a,
.ai-gen__topbar a:hover,
.ai-gen__topbar a:visited,
.ai-gen__topbar a:active,
.ai-gen__topbar a:focus{
    text-decoration: none;
    color: inherit;
    font-family: inherit;
}
/* 카드 */
.ai-gen__card{background:#fff;}

/* 그룹 */
.ai-gen__group{border:1px solid #D5EAFA;background:#F2F9FF;border-radius:10px;padding:14px;margin-bottom:14px}
.ai-gen__label{display:block;font-weight:800;color:#1f2a44;margin-bottom:8px}
.ai-gen__inline{display:flex;gap:10px;flex-wrap:wrap}
.ai-gen__select{height:40px;min-width:160px;padding:0 12px;border:1px solid #dfe6f3;border-radius:8px;background:#fff}
.ai-gen__textarea{width:100%;padding:12px;border:1px solid #dfe6f3;border-radius:8px;resize:vertical}
.ai-gen__hint{margin:.5rem 0 0;color:#555;font-size:12px}

/* 한 줄씩 나오게 처리 */
/* 한 줄(라벨 + 필드) 레이아웃 */
.ai-gen__group--row{
    display: grid;
    grid-template-columns: 140px minmax(0,1fr); /* 라벨 고정, 필드 유동 */
    align-items: center;
    column-gap: 12px;
    padding: 12px 14px; /* 살짝 컴팩트 */
}
.ai-gen__group--row .ai-gen__label{ margin:0; }

/* 필드 쪽 내용은 필요시 줄바꿈 허용 */
.ai-gen__group--row .ai-gen__inline{ display:flex; gap:10px; flex-wrap:wrap; }
.ai-gen__group--row .ai-gen__chips{ display:flex; gap:8px; flex-wrap:wrap; }

/* 모바일에서는 다시 세로 쌓기 */
@media (max-width: 768px){
    .ai-gen__group--row{
        grid-template-columns: 1fr;
        row-gap: 6px;
    }
    .ai-gen__group--row .ai-gen__label{ margin-bottom: 2px; }
}

/* 선택 박스가 너무 길면 자동 줄맞춤 되도록 최소폭만 지정 */
.ai-gen__select{ min-width: 140px; }

/* chips */
/* chips */
.ai-gen__chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ai-gen__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #dfe6f3;
    border-radius: 999px;
    padding: 8px 12px;
    background: #fff;
    cursor: pointer;
    font-weight: 600;
    color: #1f2a44;
    transition: background .2s, border-color .2s;
}

/* 라디오 버튼 */
.ai-gen__chip input {
    appearance: none;
    width: 15px;
    height: 15px;
    border: 2px solid #7cc7ff;
    border-radius: 8px;
    display: inline-block;     /* inline-flex 말고 block처럼 */
    vertical-align: middle;    /* 글자 기준선 보정 */
    margin: 0;                 /* 기본 여백 제거 */
    flex-shrink: 0;            /* 줄어들지 않게 */
}

.ai-gen__chip input:checked {
    background: #7cc7ff;             /* 파스텔 블루 */
    border-color: #7cc7ff;
    box-shadow: 0 0 0 3px rgba(124,199,255,.25);
}

.ai-gen__chip:hover {
    background: #eaf7ff;             /* 파스텔 블루 hover */
    border-color: #7cc7ff;
}

/* search */
/* 래퍼: 조금 짧게 + 반응형 */
.ai-gen__search{
    position: relative;
    width: clamp(280px, 40vw, 420px); /* ← 살짝 짧게 (280~420px 범위) */
    margin: 8px 0 12px;
}

/* 인풋: 우측에 버튼 자리 확보 */
.ai-gen__search-input{
    width: 100%;
    height: 40px;
    padding: 0 44px 0 12px;            /* ← 오른쪽 여백을 버튼 너비만큼 */
    border: 1px solid #dfe6f3;
    border-radius: 10px;
    background: #fff;
}
.ai-gen__search-input:focus{
    outline: none;
    border-color: #B2D7F5;
    box-shadow: 0 0 0 3px #EAF6FF;
}

/* 버튼: 인풋 안쪽 우측에 겹치기 */
.ai-gen__search-btn{
    position: absolute;
    top: 50%;
    right: 6px;                        /* ← 필요시 6~10px로 미세조정 */
    transform: translateY(-50%);
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border: 0; border-radius: 8px;
    background: transparent;           /* 인풋 안쪽에 자연스럽게 */
    color: var(--ink); cursor: pointer;
}
.ai-gen__search-btn i{ font-size: 16px; line-height: 1; }

/* templates */
/* grid */
.ai-gen__tpl-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;                 /* 카드 사이 여백 확장 (라디오 포함한 영역 고려) */
    padding: 8px;              /* 바깥쪽 패딩 */
}

/* 카드 */
.ai-gen__tpl-card {
    position: relative;
    overflow: visible;         /* 라디오가 밖으로 보여야 함 */
    background: #fff;
    cursor: pointer;
    border: 1px solid #e6e9ef;
    border-radius: 10px;
    transition: box-shadow .2s, border-color .2s, border-radius .15s;

    /* 라디오 튀어나온 영역도 포함해서 시각적 여백 보장 */
    margin-top: 14px;          /* 위쪽 여백 확보 */
    margin-left: 14px;         /* 왼쪽 여백 확보 */
}

/* hover/focus/checked 시 사각형 */
.ai-gen__tpl-card:hover,
.ai-gen__tpl-card:focus-within,
.ai-gen__tpl-card:has(.ai-gen__tpl-radio:checked) {
    border-radius: 0;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* 라디오 버튼 */
.ai-gen__tpl-radio {
    position: absolute;
    top: 0; left: 0;
    transform: translate(-60%, -60%);
    width: 28px; height: 28px; z-index: 2;

    appearance: none; -webkit-appearance: none;
    background: #fff;
    border: 3px solid #c9d4e5;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,.14);
    transition: .2s;
}
.ai-gen__tpl-radio:hover { border-color: #C0DFF8; }
.ai-gen__tpl-radio:checked {
    border-color: #C0DFF8;
    box-shadow: 0 0 0 4px rgba(124,199,255,.25);
    background: radial-gradient(circle, #7cc7ff 45%, transparent 47%) #fff;
}
.ai-gen__tpl-radio:focus-visible {
    outline: 2px solid #ffb3c7;
    outline-offset: 2px;
}
/* text 카운트 */
/* 카운터가 textarea 박스 오른쪽 아래에 붙도록 */
/* 그룹을 기준 위치로 */
.ai-gen__group { position: relative; }

/* textarea 우측에 카운터 자리 확보 (겹치지 않게) */
.ai-gen__textarea{
    /* 기존 스타일 유지 + 우측 패딩만 늘리기 */
    padding-right: 72px;            /* ← 카운터 폭만큼 여유 */
    font-size: 14px;                /* 사용 중인 값으로 맞추세요 */
}

/* 카운터를 textarea '안쪽 끝'에 고정 */
.ai-count{
    position: absolute;
    right: 22px;                    /* textarea 우측 패딩과 맞춰 정렬 */
    bottom: 18px;                   /* textarea 하단 패딩과 맞춰 정렬 */
    line-height: 1;
    font-size: 14px;                /* ↑ textarea와 같은 크기 */
    color: #6b7684;
    pointer-events: none;           /* 클릭 방해 X */
    background: transparent;        /* 경계에 걸려 보이지 않게 */
}
/* 임계치 근접/초과 시 색만 살짝 변경 (선택) */
.ai-count.is-warning{ color:#d98c00; }  /* ~85% 이상 */
.ai-count.is-danger{  color:#c92132; }  /* 초과(보통 maxlength가 막아줌) */
/* 추천 배지 */
.ai-gen__tpl-badge{
    position:absolute; top:-2px; right:6px; z-index:3;

    /* 스프라이트 이미지의 한 셀 크기에 맞추세요 */
    width:37px; height:33px;      /* ← 예시 값 */
    padding-top:2px;
    text-align:center;
    color:#fff; font-weight:800; font-size:12px; letter-spacing:-0.3px;

    /* 리본 스프라이트 */
    background:url(/images/main/nametag_icon_s.png) no-repeat 0 0;
}

/* pager */
.ai-gen__pager{display:flex;gap:12px;justify-content:center;margin:14px 0 4px}
.ai-gen__pager-btn{min-width:110px;height:40px;padding:0 14px;border:1px solid #dfe6f3;border-radius:10px;background:#fff;font-weight:600;cursor:pointer}
.ai-gen__pager-btn:hover{background:#C0DFF8;}
.ai-gen__pager .ai-gen__pager-btn:disabled {
    opacity: 0.5;              /* 흐리게 */
    cursor: not-allowed;       /* 🚫 금지 마크 */
    pointer-events: none;      /* 마우스 이벤트 완전 차단 */
}

/* CTA */
.ai-gen__cta{display:flex;justify-content:center;margin:20px 0 8px}
.ai-gen__create{min-width:220px;height:54px;border-radius:12px;background:#3E5FAC;border:none;font-weight:800;font-size:20px;color:#fff;cursor:pointer}
.ai-gen__create:hover{background:#2f4a89}

/* 결과 */
/* 결과 */
.ai-gen__result{margin-top:16px}
.ai-gen__preview-card{overflow:hidden; display: flex; width: 600px;
    justify-content: center;}
.ai-gen__result-actions{display:flex;gap:10px;justify-content:center;margin-top:12px}
.ai-gen__btn-outline{min-width:120px;height:42px;padding:0 14px;border:1px solid #333; border-radius:10px;background:#fff;font-weight:700;color:#333; cursor:pointer; display: flex; align-items: center; justify-content: center; gap: 5px;}
.ai-gen__btn-outline:hover{background:#D5EAFA;}
.ai-gen__btn-solid{min-width:120px;height:42px;padding:0 14px;border:1px solid #3E5FAC;border-radius:10px;background:#3E5FAC;font-weight:800;color:#fff;cursor:pointer}
.ai-gen__btn-solid:hover{background:#2f4a89}

.ai-gen__btn-outline img{
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* 생성하기 버튼 하단 처음엔 숨김 */
.ai-gen__result { display:none; }
/* URL에 #genResult가 붙었을 때만 보이기 */
#genResult:target { display:block; }

/* 클릭 후 자연스럽게 스크롤 */
/*html { scroll-behavior: smooth; }*/


.ai-gen__preview-card {
    position: relative;
    display: inline-block;
    border: 1px solid #ccc;
}

.ai-gen__preview-card .preview-bg {
    display: block;
    height: auto;
}

.ai-gen__preview-card .preview-title {
    position: absolute;
    top: 15%;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 35px;
    font-weight: bold;
    color: #000;
    font-family: 'NanumSquare', sans-serif;
}

/* 텍스트 오버레이 */
.ai-gen__preview-card .preview-text {
    position: absolute;
    top: 24%;   /* 원하는 위치 */
    left: 15%;
    min-height: 200px;
    width: 70%;
    font-size: 16px;
    line-height: 1.8;
    padding: 3px;
    display: block;
    white-space: pre-wrap; /* 개행/띄어쓰기 보존 */
    word-break: break-word;
    outline: none;
    text-align: left;
    font-family: 'NanumSquare', sans-serif;
    /*font-weight: bold;*/
}


/* =========================
   상단 AI 가정통신문 바로가기
========================= */
.ai-newsletter-btn{
    margin:15px 0; display:flex; justify-content:flex-end;
}

/* 버튼 자체 높이(← 원하는 값으로 통일) */
.ai-btn{
    position:relative; overflow: hidden;
    display:inline-flex; align-items:center; gap:5px;

    height:44px; padding:0 22px; line-height:1;   /* 버튼 높이 고정 */
    border-radius:999px; font-size:15px; font-weight:800; color:#3E5FAC; text-decoration:none;

    background:linear-gradient(180deg,#EAF6FF 0%,#C0DFF8 55%,#B2D7F5 100%);
    border:1px solid #B2D7F5;
    box-shadow:0 10px 22px rgba(62,95,172,.18), 0 2px 0 rgba(255,255,255,.85) inset;
    transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
    --icoY: -0.8px;
}

/* 아이콘 사이즈 고정 + 베이스라인 공백 제거 */
.ai-btn > img{
    width:16px; height:16px;
    display:block;
    flex:0 0 18px;
    transform: translateY(var(--icoY));   /* ← 이미지만 살짝 위로 */
}

.ai-btn > i{ font-size:18px; line-height:1; display:block; }

/* 라벨(텍스트)만 위로 1px 살짝 올려서 '시각적 중앙' 보정 */
.ai-btn__label{ display:block; line-height:1; transform:translateY(-1px); }

/* 윗쪽 하이라이트(유광) */
.ai-btn::before{
    content:""; position:absolute; left:14px; right:14px; top:6px; height:14px;
    background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0));
    border-radius:12px; pointer-events:none;
}

/* 샤인 스윕(hover 시만 지나감) */
/* 흰색 샤인 */
.ai-btn::after{
    content:"";
    position:absolute; top:0; bottom:0;
    left:-50%;              /* 부모 너비의 -50% 지점에서 시작(완전 왼쪽 밖) */
    width:50%;              /* 스트립 폭: 부모의 50% */
    transform:translateX(0) skewX(-18deg);
    background:linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.70) 50%,
    rgba(255,255,255,0) 100%);
    opacity:0;
    transition: transform 1s ease-in-out, opacity .2s ease;
    will-change: transform;
}
.ai-btn:hover::after{
    transform:translateX(300%) skewX(-18deg); /* 3 × 자기너비 = 오른쪽 밖까지 완주 */
    opacity:1;
}

.ai-btn:hover{
    transform:translateY(-1px);
    background:linear-gradient(180deg,#FFFFFF 0%,#EAF6FF 45%,#C0DFF8 100%);
    box-shadow:0 14px 26px rgba(62,95,172,.22), 0 2px 0 rgba(255,255,255,.92) inset;
}
.ai-btn:active{ transform:translateY(0); box-shadow:inset 0 2px 6px rgba(62,95,172,.25); }
.ai-btn:focus-visible{ outline:3px solid rgba(62,95,172,.35); outline-offset:2px; border-radius:999px; }

/* 뉴스레터 보관함 */
/* =========================
   섹션/헤더/칩/생성하기 버튼
========================= */
.ai-letter__section{ margin-top:24px; font-size:16px;}
/* .ai-letter__section.border{padding-top: 20px; border-top: 1px solid #ddd;} */
.ai-letter__section.padding{padding-bottom: 30px;}
.ai-letter__header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; padding-top:12px; }
/* === 섹션 제목 왼쪽 하늘색 바 | === */
.ai-letter__title{
    position: relative;
    padding-left: 16px;   /* 바만큼 여백 */
    margin: 0;
    font-weight: 800;
    font-size: 18px;
    color: #1f2937;
}
.ai-letter__title::before{
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 6px;                 /* 바 두께 */
    height: 24px;               /* 바 높이 */
    border-radius: 4px;         /* 살짝 둥글게 */
    background: linear-gradient(180deg, #C0DFF8, #D5EAFA); /* 하늘색 그라디언트 */
    box-shadow:
            inset 0 1px 0 rgba(255,255,255,.8),  /* 안쪽 하이라이트 */
            0 0 0 1px rgba(255,255,255,.6);      /* 아주 얇은 외곽선 */
}


.ai-letter__bar{ display:flex; align-items:center; justify-content:space-between; margin:12px 0 16px; }
.ai-letter__create-btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 16px; border:1px solid #d8e2f0; border-radius:10px; background:#D5EAFA;
    font-weight:400; cursor:pointer; font-size:16px; text-decoration:none; color:#000;
}
.ai-letter__create-btn:hover{ font-weight: bold; }
.ai-letter__create-btn img{ width:20px; }

.ai-letter__chip{
    padding:8px 12px; border:1px solid #e1e6ef; border-radius:8px; background:#fff; font-size:13px; cursor:pointer;
}
.ai-letter__chip:hover{ background:#F2F9FF; }
.ai-letter__chip--danger{ border-color:#e1e6ef; background:#fff; }
.ai-letter__chip img{ width:20px; height:20px; object-fit:contain; }

/* =========================
   카드 그리드/카드
========================= */
.ai-letter__grid{ display:flex; gap:18px; justify-content: center; }

/* 카드 본체: 기준점 + 라운드 + 그림자 */
.ai-letter__card{
    flex: 0 0 auto;   /* 크기 자동 늘어남 방지 */
    width: 180px;     /* 카드 고정 폭 (원하는 크기로 조절) */
    position:relative; overflow:hidden;
    /* border-radius:16px; */
    background:#fff; border:1px solid #e5e7eb;
    box-shadow:0 6px 20px rgba(2,6,23,.06);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ai-letter__card:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(2,6,23,.10); border-color:#dbe2ea; }

/* 썸네일 */
.ai-letter__thumb{ display:block; width:100%; padding:0; border:0; background:transparent; cursor:pointer; }
.ai-letter__thumb img{ display:block; width:100%; height:auto; }

/* 주차 라벨 (한 번만 정의) */
.ai-letter__week{
    position:absolute; left:12px; top:12px; z-index:2;
    padding:4px 10px; border-radius:999px;
    background:#EAF6FF; border:1px solid #D5EAFA;
    color:#3E5FAC; font-weight:800; font-size:12px;
    box-shadow:0 1px 2px rgba(0,0,0,.06);
}

/* ✅ 오버레이: 카드 전체 덮기 (중복/부분 적용 규칙 제거) */
.ai-letter__overlay{
    position:absolute; inset:0; z-index:5; border-radius:inherit;
    background:rgba(22,31,55,.55);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    opacity:0; pointer-events:none; transition:opacity .2s;
}
.ai-letter__card:hover .ai-letter__overlay,
.ai-letter__card:focus-within .ai-letter__overlay{ opacity:1; pointer-events:auto; }

/* 오버레이 버튼 */
.ai-letter__action{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:130px; height:36px; padding:0 12px;
    border-radius:18px; background:#fff; color:#333; font-weight:600; font-size:14px;
    border:1px solid #ccc; transition:background .2s, border-color .2s;
}
.ai-letter__action:hover{ background:#F2F9FF; }
.ai-letter__action.is-primary{ background:#fff; color:#333; border:1px solid #ccc; }
.ai-letter__action.is-primary:hover{ background:#F2F9FF; }

/* =========================
   표 (최근 5줄)
========================= */
.ai-letter__table{ border:1px solid #dfe6f3; border-radius:12px; overflow:hidden; }
.ai-letter__thead{
    display:grid; grid-template-columns:56px 1fr 280px;
    background:#D5EAFA; border-bottom:1px solid #dfe6f3; font-weight:800;
}
.ai-letter__th{ padding:12px 14px; text-align:center; }
.ai-letter__th--check{text-align:center}
.ai-letter__th--manage{text-align:center}

.ai-letter__tr{
    display:grid; grid-template-columns:56px 1fr 280px;
    border-bottom:1px solid #eef2f8; align-items:center;
}
.ai-letter__td{ padding:12px 14px; }
.ai-letter__td--check{ text-align:center; }

/* 관리 영역: 한 줄 고정 */
.ai-letter__td--manage{
    display:flex; gap:8px; justify-content:center; align-items:center;
    flex-wrap:nowrap; min-width:0;
}
.ai-letter__mini{
    display:inline-flex; align-items:center; gap:6px;
    padding:10px 12px; border:1px solid #e5eaf6; border-radius:8px; background:#fff;
    font-size:14px; line-height:1; white-space:nowrap; word-break:keep-all;
    color: var(--ink);
}
.ai-letter__mini:hover{ background:#F2F9FF; }
.ai-letter__mini img{ width:15px; height:15px; flex:0 0 auto; }

.ai-letter__link{ text-decoration:none; color:#1f2a44;
    display: flex; justify-content: center; align-items: center;}
.ai-letter__link:hover{ text-decoration:underline; }
.ai-letter__tag{
    display:inline-block; margin-right:6px; padding:2px 6px; border-radius:6px;
    color:#3E5FAC; font-weight:700; font-size:15px;
}
.ai-letter__link img{
    width: 14px;
}
@media (max-width:920px){
    .ai-letter__thead, .ai-letter__tr{ grid-template-columns:44px 1fr 200px; }
}

/* 헤더 고정 */
.ai-letter__thead{
    position: sticky;
    top: 0;
    z-index: 1;
}

/* 스크롤랩 기본 */
.ai-letter__scrollwrap {
    overflow: visible;   /* 기본은 자연 높이 */
    max-height: none;
}

/* 컨테이너 기본값 + 스크롤바 폭 변수 */
#myLetterWrap {
    --sbw: 0px;          /* JS에서 실측값으로 덮어씀 */
    box-sizing: border-box;
}

/* 확장 상태 공통 */
#myLetterWrap.is-expanded {
    /* 높이는 JS에서 정확 픽셀로 넣어줌 */
    overflow-y: hidden; /* 기본은 숨김, 필요 시 auto (JS에서 제어) */
}

/* 스크롤이 '실제로' 생길 때만 바깥으로 밀기 */
#myLetterWrap.has-scroll {
    margin-right: calc(var(--sbw) * -1); /* 박스 밖으로 스크롤바 밀어냄 */
    padding-right: 0px;           /* 내용 폭 보전 */
}

/* 헤더 패딩도 스크롤 있을 때만 보정 */
#myLetterWrap .ai-letter__thead { padding-right: 0; }
#myLetterWrap.has-scroll .ai-letter__thead { padding-right: 0px; }

/* =========================
   드롭다운 & 더보기
========================= */
.ai-letter__dropdown{ position:relative; display:inline-block; }
.ai-letter__dropdown-menu{
    position:absolute; right:0; top:100%; margin-top:4px; background:#fff; border:1px solid #ddd; border-radius:8px;
    list-style:none; padding:6px 0; min-width:90px; box-shadow:0 4px 10px rgba(0,0,0,.1); z-index:10;
}
.ai-letter__dropdown-menu li{ padding:0; }
.ai-letter__dropdown-menu li button{
    display:block; width:100%; padding:12px 16px; background:none; border:none; text-align:left; font-size:14px; color:#333; cursor:pointer;
}
.ai-letter__dropdown-menu li button:hover{ background:#f5f5f5; }

.ai-letter__more{ text-align:center; margin:16px 0; padding-bottom:20px;
    /* border-bottom:1px solid #ddd;  */
}
.ai-letter__more-btn{
    display:inline-block; padding:10px 20px; background:#fff; border:1px solid #ddd; border-radius:8px;
    font-size:14px; font-weight:600; color:#333; cursor:pointer; transition:.2s;
}
.ai-letter__more-btn:hover{ background:#f7f7f7; border-color:#aaa; }

/* 버튼만 밑줄 없애기 */
.ai-letter__card a,
.ai-letter__card a:hover,
.ai-letter__card a:visited,
.ai-letter__card a:active,
.ai-letter__card a:focus{
    text-decoration: none;
    color: inherit;
    font-family: inherit;
}
.ai-letter__td--manage a,
.ai-letter__td--manage a:hover,
.ai-letter__td--manage a:visited,
.ai-letter__td--manage a:active,
.ai-letter__td--manage a:focus{
    text-decoration: none;
    color: inherit;
    font-family: inherit;
}

.ai-letter__bar a,
.ai-letter__bar a:hover,
.ai-letter__bar a:visited,
.ai-letter__bar a:active,
.ai-letter__bar a:focus{
    text-decoration: none;
    color: #111;
    font-family: inherit;
}

/* 폼 표 기본 스타일 */
.ai-gen__form-table {
    width: 100%;
    border-collapse: collapse;
}

/* 라벨 셀 (왼쪽) */
.ai-gen__form-table th {
    background-color: #E4F7FF;
    text-align: center;
    vertical-align: middle;
    padding: 16px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    border-bottom: 1px solid #ddd; /* 행 구분선 */
}

/* 입력 셀 (오른쪽) */
.ai-gen__form-table td {
    background-color: #fff;
    padding: 16px;
    vertical-align: middle;
    border-bottom: 1px solid #ddd; /* 행 구분선 */
}

/* 맨 위 행에는 윗줄 추가 */
.ai-gen__form-table tr:first-child th,
.ai-gen__form-table tr:first-child td {
    border-top: 1px solid #ddd;
}

/* 마지막 행은 아랫줄 제거 */
.ai-gen__form-table tr:last-child th,
.ai-gen__form-table tr:last-child td {
    border-bottom: none;
}