/* ===========================
   Global / Variables
=========================== */
:root{
  --color-main:#00b92f;     /* 메인 컬러 */
  --color-accent:#10a2ff;   /* 그라데이션 포인트 */
  --color-text:#111;
  --color-muted:#555;
  --color-border:#00b92f;
  --color-bg:#fff;

  --shadow-card:0 0 12px rgba(0,0,0,.12);

  --max-width:1200px;
  --gap:100px;
}


*{box-sizing:border-box}
html,body{height:100%}
body .search_main_wrap{ margin:0; color:var(--color-text); background:var(--color-bg); font-family: 'Montserrat', 'YoonGothicPro700', sans-serif;}
a{color:inherit; text-decoration:none}
.visually-hidden{
  position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); overflow:hidden;
}

#search_wrap .search_main_wrap .search_right_area .banner .swiper-slide {cursor: auto!important;}

/* ===========================
   Modifiers (색상 테마 재활용)
=========================== */
.banner--pink{ --color-main:#ff7373; --color-border:#ff7373; --color-accent:#ff7373; }
.banner--navy{ --color-main:#222450;    --color-border:#222450;    --color-accent:#222450; }

/* ===========================
   Banner Section
=========================== */
.banner{
  width:100%;
  background:var(--color-bg);
  position:relative;
  overflow-x:hidden;
  margin:0!important;        /* 외부 여백 강제 제거 */
}

/* 중앙 1200 컨테이너 */
.banner__inner{
  width:100%;
  max-width:1200px;          /* PC 최대 너비 */
  margin:0 auto;             /* 중앙 정렬 */
  box-sizing:border-box;
  text-align:center;         /* 배지/타이틀 중앙 정렬 */
}

/* 배지 & 타이틀 */
.banner__badge{
  display:inline-block;
  padding:6px 18px;
  border:1px solid var(--color-border);
  border-radius:20px;
  font-size:14px;
  color:var(--color-border);
  margin-bottom:24px;
}
.content__title{font-size:22px; font-weight:500; line-height:1.2; margin:0 0 40px;}

/* Panel (PC: 좌우 2단) */
.banner__panel{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:stretch; gap:var(--gap); border:1.5px solid var(--color-border); border-radius:20px; padding:50px 90px; box-sizing:border-box; width:100%; overflow-x:hidden; /* 내부 넘침 방지 */
}

.banner__left,.banner__right{flex:1 1 45%; text-align:left; min-width:0;               /* 플렉스 최소폭 이슈 방지 */}

.banner__left{display: flex; flex-direction: column; gap: 12px;  min-width: 0;}
.banner__subtitle{font-size:36px; font-weight:700; line-height:1.2; margin:0 0 14px; letter-spacing: -1px; color:#111;}
.banner__highlight{ background:linear-gradient(90deg, var(--color-main), var(--color-accent)); -webkit-background-clip:text;  -webkit-text-fill-color:transparent;  color:var(--color-main);}
.banner__desc{font-size:16px; line-height:1.6; color:#333;  margin:0;}

/* 버튼 */
.banner__button{display:inline-block; margin-top:auto; align-self: flex-start; background:var(--color-main); color:#fff!important; padding:18px 30px; border-radius:999px; font-weight:400; font-size:18px; transition:opacity .2s, transform .02s; white-space:nowrap;
}
.banner__button:hover{ opacity: 0.85; }
.banner__button:active{ transform:translateY(1px); }

/* 유의사항 토글 */
.banner__notice{ width: 100%; max-width: var(--max-width); margin: 16px auto 0; padding: 0 20px; box-sizing: border-box;}
.banner__footer{font-size:14px; color:#333; text-align:center; cursor:pointer; user-select:none; display:flex; align-items:center; justify-content:center; gap:6px; margin:0; padding:10px 0;}
.banner__notice .caret{display:inline-block; transition: transform .2s ease;}
.banner__notice[open] .caret{transform: rotate(180deg);}
.banner__notice-list{margin:12px auto 0; padding:12px 16px 14px 46px; max-width: 500px; background:#f7f8f9; border:1px solid #e5e8eb; border-radius:12px; color:#444; text-align:left; list-style: disc; box-sizing:border-box;}
.banner__notice-list li{line-height:1.6; margin:6px 10px; list-style-type: disc;}

/* 배너 내 이미지 영역 */
.banner__image-card {width: 80%; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; margin: 0 auto;}
.banner__image-card img {height: auto; display: block; object-fit: cover;}

/* 네이버페이 테이블 */
.banner__table-card{background:#fff; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-card);}
.banner__table{width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0; font-size:15px; font-variant-numeric:tabular-nums; max-width:100%; color: #111;}
.banner__table th, .banner__table td{width:50%; word-break:keep-all; overflow-wrap:anywhere;}
/* 테이블 Header */
.banner__table thead th{position:relative; background:var(--color-main); color:#fff; padding:14px 16px; font-weight:700; text-align:center;}
/* 테이블 분리선 */
.banner__table thead th:first-child::after{content:""; position:absolute; right:0; top:50%; width:1px; height:50%; transform:translateY(-50%); background:rgba(255,255,255,.6);} 
/* 테이블 bg컬러 */
.banner__table tbody tr:nth-child(odd)  td{ background:#ffffff; }
.banner__table tbody tr:nth-child(even) td{ background:#f2f2f2; }
/* Cell */
.banner__table tbody td{padding:14px 16px; border-bottom:1px solid #e9e9e9; vertical-align:middle; text-align:center;}
.banner__table tbody tr:last-child td{ border-bottom:none; }
/* 본문 세로 분리선 */
.banner__table tbody td:first-child{position:relative;}
.banner__table tbody td:first-child::after{content:""; position:absolute; right:0; top:50%; width:1px; height:50%; transform:translateY(-50%); background:#dddddd;}
/* 금액 열 강조 */
.banner__table .is-price{ font-weight:600; text-align:center;}


.is-price .tag{display:inline-block; font-size:12px; padding:2px 6px;color:#222450; vertical-align:middle;}
.banner__note{margin-top:12px; line-height:1.5; color:var(--color-muted); font-size:13px;}


/* ===========================
   Responsive
=========================== */
@media (max-width:1024px){
  .banner__inner{ padding:80px 24px; }   /* 태블릿 여백 */
  .banner__panel{ padding:40px 32px; }
}

@media (max-width:768px){
  body .searchArea{ margin:0; color:var(--color-text); background:var(--color-bg); font-family: 'Montserrat', 'YoonGothicPro700', sans-serif;}
  .banner__inner{ padding:50px 20px; }

  /* 🔁 모바일: 그리드로 전환해 순서 제어 (subtitle → table → button) */
  .banner__panel{
    display:grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "subtitle"
      "desc"
      "table"
      "button";
    row-gap:20px;
    padding:30px 18px;
  }

  /* .banner__left의 자식들을 그리드에 직접 참여시키기 */
  .banner__left{display:contents; text-align:center;}
  .banner__subtitle{grid-area: subtitle; margin: 0; font-size: 26px;}
  .banner__desc {margin: 0 0 12px;}

  .banner__right{ grid-area: table; }     /* 테이블 카드 */
  .banner__image-card {margin-bottom: 16px;  width: 68%;}



  /* 버튼 중앙 배치 */
  .banner__button{grid-area: button; display:inline-block; margin:8px auto 0; justify-self:center;}

  /* 텍스트 정렬 */
  .banner__left,.banner__right{ text-align:center; }
  .banner__notice{ padding: 0 16px; }
  .banner__footer{ font-size:13px; }
  .banner__notice-list{max-width: 100%; padding:10px 14px 12px 24px; font-size:13px;}

  
}

@media (max-width:420px){
  .banner__inner{ padding:50px 14px; }   /* 초소형 기기 */
  .banner__table{ font-size:14px; }
  .banner__footer{ font-size:12px; }
  .banner__notice-list{ font-size:12px; }
}
