@charset "UTF-8";

/* css */
@import url("content.css"); /* 콘텐츠 */
@import url("main.css"); /* 메인프로모션 */

/*폰트*/
@font-face {
    font-family: 'OneStoreMobilePop';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-POP.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}


/* reset */
html{font-size:62.5%; scroll-behavior:auto; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0}
fieldset,img {border:0 none}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {font-size:1.4rem;vertical-align:middle}
button {border:0 none;background-color:transparent;cursor:pointer}
table {border-collapse:collapse;border-spacing:0}
body {-webkit-text-size-adjust:none} /* 뷰포트 변환시 폰트크기 자동확대 방지 */
input[type='text'],input[type='password'],input[type='submit'],input[type='search'] {-webkit-appearance:none; border-radius:0}
input:checked[type='checkbox'] {background-color:#666; -webkit-appearance:checkbox}
button,input[type='button'],input[type='submit'],input[type='reset'],input[type='file'] {-webkit-appearance:button; border-radius:0}
input[type='search']::-webkit-search-cancel-button {-webkit-appearance:none}
body,table,input,select,textarea,button {font-size:1.7rem;line-height:1.5;font-family:'Pretendard', sans-serif;color:#111;letter-spacing:-0.04em;}
a {color:#000;text-decoration:none}
/* a:active, a:hover {text-decoration:none} */
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}
img {vertical-align:top;max-width:100%;}
.mo_block{display:none}
select {
  -webkit-appearance: none;  /* 크롬, 사파리 */
  -moz-appearance: none;     /* 파이어폭스 */
  appearance: none;          /* 표준 속성 */
}
input, select:focus{outline: none; /* Optional: removes the default browser outline */
  border-color: var(--brain-primary); /* Example: change the border color */
  color:var(--gray-70)
 }

/* variables */
:root {
  --nav-h:   72px;
  --ease:    cubic-bezier(.4, 0, .2, 1);
  --black:   #111;
  --gray-90: #222;
  --gray-80: #333;
  --gray-70: #444;
  --gray-60: #666;
  --gray-50: #777;
  --gray-40: #999;
  --gray-30: #bbb;
  --gray-20: #ddd;
  --gray-10: #eee;
  --gray-05: #f5f5f5;
  --white:   #fff;
  --fz-heading-xxlg: 6.2rem;
  --fz-heading-xlg: 5.1rem;
  --fz-heading-lg: 4.2rem;
  --fz-title-xxxlg: 3.8rem;
  --fz-title-xxlg: 3.2rem;
  --fz-title-xmlg: 2.7rem;
  --fz-title-xlg: 2.5rem;
  --fz-title-lg: 2.1rem;
  --fz-title-md: 1.9rem;
  --fz-title-sm: 1.7rem;
  --fz-title-xsm: 1.5rem;
  --fz-body-lg: 1.9rem;
  --fz-body-md: 1.7rem;
  --fz-body-sm: 1.5rem;
  --fz-detail-sm: 1.3rem;
  --fz-detail-xsm: 1.1rem;
  --rd-1: .1rem;
  --rd-2: .2rem;
  --rd-4: .4rem;
  --rd-6: .6rem;
  --rd-8: .8rem;
  --rd-10: 1rem;
  --rd-12: 1.2rem;
  --rd-50: 5rem;
  --rd-full: 100%;
  --spacer-12:12rem;
  --spacer-20: 8rem;
  --spacer-60: 6rem;
  --spacer-11: 4.8rem;
  --spacer-10: 4rem;
  --spacer-8: 3.2rem;
  --spacer-6: 2.4rem;
  --spacer-5: 2rem;
  --spacer-4: 1.6rem;
  --spacer-3: 1.2rem;
  --spacer-2: 0.8rem;
  --spacer-1: 0.4rem;
  --spacer-0: 0;

  /*브레인스쿨*/
  --brain-primary:#0077D3;
  --brain-primary-5:#f0f8ff;
  --brain-primary-5-line:#dcecf8;
  --brain-primary-line:#C0DDF8;
  --brain-primary-10:#DBEEFF;
  --brain-primary-60:#31A3FA;
  --brain-primary-90:#0066B3;
  --brain-neon:#FAFF4B;
  --brain-point:#ED1B2F;
  --brain-yellow:#FDCF3C;
  --brain-yg:#8DC557;
  --brain-green:#0DB14B;
  --brain-orange:#F58220;
  --brain-purple:#A3238E;
  
}

/* ============================================================
   NAVBAR
   ============================================================ */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--white);
  backdrop-filter: blur(16px);
  background: var(--brain-primary);
  z-index: 900;
  display: flex;
  align-items: center;
  padding: 0 3%;
  transition: box-shadow .3s var(--ease);
  justify-content:center
}
#navbar.scrolled { box-shadow: 0 2px 24px rgba(0,0,0,.08); }
.logo {  
  position:absolute;left:6rem;
  font-weight: 700;
  letter-spacing: -.5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.logo img{height:42px}

/* ── PC 메인 메뉴 (가운데 정렬) ── */
.pc-nav {
  display: flex;
  align-items: stretch;
  height: var(--nav-h);
  /* mega-panel이 뷰포트 기준으로 튀어나올 수 있도록 overflow visible */
  overflow: visible;
}
.nav-item {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  flex:1
} 
.nav-item > a {
  display: flex;
  align-items: center;
  padding: 0 var(--spacer-8);
  height: 100%;
  letter-spacing: -.2px;
  transition: color .2s;
  white-space: nowrap;
  color:var(--white);
  font-size:var(--fz-title-md);
  position:relative;
  font-weight:500;
}

/* ── 우측 버튼 ── */
.nav-right {  position:absolute;  right:6rem}
.btn-consult {display:inline-flex;font-weight:600;border:2px solid var(--black);border-radius:var(--rd-50);height:4rem;padding:0 var(--spacer-5);align-items: center;line-height:0;}
.btn-consult{background-color:#E6DEFC;}

/* PC 화살표 숨김 */
.nav-arrow { display: none; }

/* ── FULL MEGA MENU ── */
.mega-panel {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  width: 100vw;
  background: #fff;
  border-bottom: 1px solid var(--gray-10);
  box-shadow:0 8px 14px rgba(0,0,0,.08);
  z-index: 890;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.pc-nav:hover .mega-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.mega-grid {
  width: 100%;
  max-width:860px;
  margin:0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-right: 1px solid var(--gray-10);
  border-left: 1px solid var(--gray-10);
}
.mega-col {
  padding:0 12px 20px 12px;
  margin: 0 12px 0 12px;
  border-right: 1px solid var(--gray-10);
}
.mega-col:last-child { border-right: none; padding-right: 0; margin-right: 0; }
.mega-col-head {
  text-transform: uppercase;
  margin: 20px 0 8px 0;
  font-weight:600;
}
.mega-col a {
  display: block;
  padding: 6px 0;
  transition: color .15s;
  line-height: 1.4;
  color:var(--gray-70)
}
.mega-col a:hover { color:var(--brain-primary);font-weight:600 }

/* ── 햄버거 ── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px; height: 36px;
  cursor: pointer;
  background: none;
  border: none;
  margin-left: auto;
}
.hamburger span {
  display: block;
  width: 24px; height: 3px;
  background: var(--white);
  border-radius: 10px;
  transition: all .3s var(--ease);
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   DRAWER (우측 슬라이드)
   ============================================================ */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.8);
  z-index: 1000;
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease);
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0; right: 0;
  width: 300px; height: 100%;
  background: #fff;
  z-index: 1001;
  transform: translateX(100%);
  transition: transform .38s var(--ease);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  z-index:99999;
}
.drawer.open { transform: translateX(0); }

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 24px;
  height: 60px;
  position: sticky; top: 0; background: var(--brain-primary); z-index: 2;
  flex-shrink: 0;
}
.drawer-logo {  font-weight: 700; letter-spacing: -.4px; }

.drawer-close {
  position: relative;
  width: 32px; height: 32px;
  background: none; border: none;
  cursor: pointer; border-radius: 50%;
  transition: background-color .2s; flex-shrink: 0;
}
.drawer-close::before,
.drawer-close::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 27px; height: 3px;
  background: var(--white); border-radius: 4px;
}
.drawer-close::before { transform: translate(-50%,-50%) rotate(45deg); }
.drawer-close::after  { transform: translate(-50%,-50%) rotate(-45deg); }

.drawer-body { flex: 1; }

.dm-item { border-bottom: 1px solid var(--gray-05); }
.dm-item.open .dm-parent{color:var(--black);font-weight:600;border-bottom:1px solid var(--gray-10)}
.dm-parent {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  cursor: pointer; transition: background-color .15s; user-select: none;
}

.dm-caret {
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--gray-50);
  border-bottom: 1.5px solid var(--gray-50);
  transform: rotate(45deg); transition: transform .25s; flex-shrink: 0;
}
.dm-item.open .dm-caret { transform: rotate(-135deg); border-color:var(--black);}
.dm-sub {
  overflow: hidden; max-height: 0;
  transition: max-height .3s var(--ease);
  background: var(--gray-05);
}
.dm-item.open .dm-sub { max-height: 300px; }
.dm-sub a {
  display: block; padding: 10px 24px 10px 36px;
  border-bottom: 1px solid var(--gray-10);
  transition: color .15s, background-color .15s;
}
.dm-sub a:last-child { border-bottom: none; }

/*nav_banner*/
.nav_banner{padding:0}
.nav_banner img{width:100%}

/* FOOTER */
.ft_banner footer {padding-bottom:164px;/*고정배너 여백*/;}
footer {background: var(--gray-70);padding-bottom:60px}
footer .ft-top{background-color:var(--gray-80)}
footer .txt-link{display:flex;gap:var(--spacer-8)}
footer .txt-link a{color:var(--gray-30);padding:var(--spacer-4) 0}
footer .txt-link a.col_yg{font-weight:600}
footer .txt-adress{padding:var(--spacer-6) 0;}
footer .txt-adress p{color:var(--gray-40);padding:var(--spacer-1) 0}
footer .txt-adress p.copyright{color:var(--gray-60);font-size:var(--fz-body-sm)}
footer .txt-info{display:flex;align-items: center}
footer .txt-info strong{margin-right:var(--spacer-2)}
footer .txt-info strong,
footer .txt-info > a{font-family:'OneStoreMobilePop';color:var(--white);font-weight:normal;font-size:var(--fz-title-xxxlg)}
footer .txt-info > a{color:var(--brain-yellow);}
footer .txt-info .btn-sns{display:flex;gap:var(--spacer-2);margin-left:var(--spacer-4)}
footer .txt-info .btn-sns img{height:5rem}
footer .txt-adress,
footer .ft-bottom,
footer .txt-link{width:100%;max-width:860px;margin:0 auto;}
footer .txt-adress p br{display:none}

/* SCROLL TOP */
.scroll-top {
  position: fixed; bottom: 80px; right: 28px;
  width:70px;height:70px;
  background:url('../images/scroll_top.svg') no-repeat center var(--brain-yellow); color: #fff;
  background-size:28px;
  border: none; border-radius:var(--rd-full);
  cursor: pointer; 
  display: flex; align-items: center; justify-content: center;
  z-index: 500;
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s, transform .3s, background-color .2s;
  box-shadow: 0 0.4rem 1.2rem 0 rgba(0, 0, 0, 0.12);;
}
.scroll-top.show { opacity: 1; transform: translateY(0); z-index:9997}
.fix_btn{position:fixed;bottom:-4px;z-index:999;left:50%;margin-left:-430px}

/*기본 폼박스*/
.radio-box {position:relative;padding-left:3rem;margin-right:var(--spacer-3);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}  
.radio-box input{position:absolute;opacity:0;cursor:pointer;}  
.radio-box .checkmark {position:absolute;top:0;left:0;height:2.5rem;width:2.5rem;background-color:var(--white);border:1px solid var(--gray-20);border-radius:50%;}  
.radio-box input:checked ~ .checkmark {background-color:var(--white);border:1px solid var(--brain-primary);}  
.radio-box .checkmark:before{content:"";position:absolute;top:0.6rem;left:0.6rem;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--gray-20);}
.radio-box .checkmark:after{content:"";position:absolute;display:none;}  
.radio-box input:checked ~ .checkmark:after {display:block;}  
.radio-box .checkmark:after{top:0.6rem;left:0.6rem;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--brain-primary);}

.check-box {position:relative;height:2.5rem;width:2.5rem;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;left:0;width:auto;margin-left:auto;padding-left:2.8rem;line-height:2.5rem;margin-right:var(--spacer-3)}
.check-box input {opacity:0;cursor:pointer;height:0;width:0;}  
.check-box .checkmark {position:absolute;top:0;left:0;height:2.5rem;width:2.5rem;border:1px solid var(--gray-20);border-radius:var(--rd-8);background-color:var(--white)}  
.check-box .checkmark:before {content:"";position:absolute;left:0.8rem;top:0.3rem;width:6px;height:12px;border:1px solid var(--gray-20);border-width:0 3.5px 3.5px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}
.check-box input:checked ~ .checkmark {background-color:var(--brain-primary);border:1px solid var(--brain-primary);} 
.check-box .checkmark:after {content:"";position:absolute;display:none;}  
.check-box input:checked ~ .checkmark:after {display:block;}  
.check-box .checkmark:after {left:0.8rem;top:0.3rem;width:6px;height:12px;border:solid white;border-width:0 3.5px 3.5px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}

input{border:none;background-color:var(--gray-05);border-radius:var(--rd-12) !important;height:6rem;padding:0 var(--spacer-4)}
select{color:var(--gray-60);border:none;border-radius:var(--rd-12);height:6rem;padding:0 var(--spacer-8) 0 var(--spacer-3);background: url('../images/search_arrow.svg') no-repeat 95% 50% var(--gray-05);background-size:2.5rem;}


/* ============================================================
   RESPONSIVE
   ============================================================ */
 @media (max-width:1280px) {
    .logo{left:3rem}
    .nav-right{right:3rem}
    .nav-item > a{padding:0 var(--spacer-6)}
}
@media (max-width:860px) {  
  .pc-nav{max-width:860px}
  .nav-item > a{padding:0 var(--spacer-4);font-size:var(--fz-body-md)}
  .mega-grid{font-size:var(--fz-body-sm)}
  .logo{left:var(--spacer-4)}
  .nav-right{right:var(--spacer-4)}
  footer .txt-link,
  footer .ft-bottom{padding:var(--spacer-1) var(--spacer-4);box-sizing:border-box}
  footer .txt-adress, footer .txt-link a{font-size:var(--fz-body-sm)}
  footer .txt-adress p.copyright{font-size:var(--fz-detail-sm)}
  footer .txt-info .btn-sns img{height:5rem}
}
@media (max-width:1023px) {
  .pc-nav { display: none; }
  .nav-right { display: none; }
  .hamburger { display: flex; }
}
@media (max-width: 860px){  
  :root { --nav-h: 60px; }
  .logo img{height:34px}
  #navbar { padding: 0 var(--spacer-4); }
  .drawer { width: 80%; }
  .scroll-top { width:50px;height:50px;bottom:13%; right:var(--spacer-4); background-size:20px}
  .pc_block{display:none;}
  .mo_block{display:block}
  .fix_btn img{width:100%;}
  .fix_btn{left:0;margin-left:0;bottom:2%}
  
  .ft_banner footer {padding-bottom:12rem}
  footer{padding-bottom:30px}
  footer .txt-link{justify-content:center;gap:var(--spacer-4)}
  footer .txt-link a{padding:var(--spacer-2) 0}
  footer .txt-adress p{text-align:center;word-break:keep-all;}
  footer .txt-adress p br{display:block}
  footer .txt-info{flex-wrap:wrap;justify-content:center;}
  footer .txt-info strong,
  footer .txt-info > a{font-size:var(--fz-title-xmlg);text-align:center}
  footer .txt-info .btn-sns{margin-left:0;margin-top:var(--spacer-2);justify-content:center;width:100%;}
  footer .txt-info .btn-sns img{height:4.5rem}
}
@media (max-width: 540px){

    input{border-radius:var(--rd-8) !important;height:4.5rem;padding:0 var(--spacer-3)}
    select{border-radius:var(--rd-10);height:4.5rem;padding:0 var(--spacer-6) 0 var(--spacer-3);background-size:2rem;}

}
@media (max-width: 340px){
    select{background-size:1.5rem}
    .scroll-top{height:42px;width:42px;background-size:18px}
    footer .txt-link a,
    footer .txt-adress p{font-size:var(--fz-detail-sm)}
    footer .txt-adress p.copyright{font-size:var(--fz-detail-xsm)}
    footer .txt-info strong, footer .txt-info > a{font-size:var(--fz-title-xlg)}
    footer .txt-info .btn-sns img{height:4.2rem}

}

/* 모달팝업 */
.dullBg{position: fixed; z-index: 9999; left: 0px; top: 0px; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.7);}
.modal-wrap{display: none; position: fixed;max-width:740px;  z-index: 10000; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.modal-in{position:relative;text-align:center;}
.modal-body{border-radius:var(--rd-12);box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px, rgba(0, 0, 0, 0.19) 0px 6px 20px 0px;}
.modal-body img{border-radius:var(--rd-12);width:100%}
.modal-in .modal_close_btn{position:absolute;top:24px;right:24px;width:46px;height:46px;cursor:pointer;text-indent:-9999px;color:#000;border:2px solid var(--black);  background: none;  cursor: pointer; border-radius: 50%;  background-color:var(--white)}
.modal-in .modal_close_btn:before,
.modal-in .modal_close_btn:after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 24px; height: 3px;
  background: var(--black); border-radius: 4px;
}
.modal-in .modal_close_btn:before { transform: translate(-50%,-50%) rotate(45deg); }
.modal-in .modal_close_btn:after  { transform: translate(-50%,-50%) rotate(-45deg); }
.modal-in .today_closed{text-align:right;margin-top:var(--spacer-1)}
.modal-in .today_closed a{width:100%;height:100%;padding:var(--spacer-2) var(--spacer-3);color:var(--white);font-size:var(--fz-body-lg);text-align:right;box-sizing:border-box}

@media (max-width: 860px){
    .modal-wrap{width:94%}
    .modal-in .modal_close_btn{top:12px;right:12px;width:3.5rem;height:3.5rem;}
    .modal-in .modal_close_btn:before,
    .modal-in .modal_close_btn:after{width:20px;}
    .modal-in .today_closed a{font-size:var(--fz-body-sm);padding:var(--spacer-1) var(--spacer-2) }
}


  /* ── TAB MENU ── */
  .tabs {
    display: flex;
    border-bottom: 1px solid var(--gray-20);
    gap: 4px;
  }
  .tab-btn {
    flex: 1;
    background: none;
    border: none;
    padding: 16px 0;
    font-family: inherit;
    font-weight: 500;
    color: var(--gray-50);
    cursor: pointer;
    position: relative;
    transition: color .2s;
    font-size:var(--fz-title-lg);
  }
  .tab-btn::after {
    content: '';
    position: absolute;
    bottom: -1.5px;
    left: 0; right: 0;
    height: 2.5px;
    background: var(--brain-point);
    border-radius: 2px 2px 0 0;
    transform: scaleX(0);
    transition: transform .2s;
  }
  .tab-btn.active { color: var(--black); font-weight: 700; }
  .tab-btn.active::after { transform: scaleX(1); }

  /* ── TAB CONTENT ── */
  .tab-panel { display: none; padding:40px 0}
  .tab-panel.active { display: block; }

  /* ── ACCORDION ── */
  .accordion { display: flex; flex-direction: column; gap: 10px; }

  .acc-item {
    border: 1px solid var(--gray-20);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color .2s;
  }
  .acc-item.open { border-color: var(--brain-primary); border:1px solid var(--brain-primary) }

  .acc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding:16px 32px;
    cursor: pointer;
    user-select: none;
    background: #fff;
  }
  .acc-q {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-30);
    border-radius: 5px;
    flex-shrink: 0;
   font-family:'OneStoreMobilePop';
   font-size:28px
  }
  .acc-item.open .acc-q { color: var(--brain-primary); }

  .acc-title {
    flex: 1;
    font-weight: 500;
    color: var(--gray-70);
    font-size:19px
  }
  .acc-item.open .acc-title { color: var(--brain-primary); font-weight: 700; }

  .acc-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s;
    color:var(--gray-50);
  }
.acc-item.open .acc-icon { transform: rotate(180deg);color:var(--brain-primary); }

  .acc-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
  }
  .acc-item.open .acc-body { grid-template-rows: 1fr; }
  .acc-item.open .acc-body-inner{border-top: 1px solid var(--gray-20);}
  .acc-body-inner {
    overflow: hidden;
    margin: 0 32px;
    line-height: 1.7;
    color: var(--gray-70);
    transition: padding .3s, border-top-width .3s;
    word-break: keep-all;
  }
  .acc-item.open .acc-body-inner {
    padding: 24px 0;
    border-top-width: 1px;
  }
  .acc-body-inner a { color: var(--red); font-weight: 700; text-decoration: none; }

@media (max-width: 540px){
    .tab-btn{font-size:var(--fz-title-sm);padding:8px 0}
    .tab-panel{padding:30px 0}
    .acc-header{padding:8px 16px}
    .acc-title{font-size:var(--fz-body-sm);}
    .acc-item.open .acc-body-inner{padding:16px 0;font-size:var(--fz-body-sm);margin:0 16px}
    .acc-q{font-size:var(--fz-title-lg)}
    .acc-header{gap:6px}
}

/* ** pagination ** */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: var(--spacer-2);
    width: 100%;
    margin-top: var(--spacer-10);
    font-family:'Pretendard Variable'
}
.pagination .page-navi {
display: inline-flex;
align-items: center;
justify-content: center;
flex-direction: row;
color: var(--hanq-gray-70);
height: 4rem;
}
.pagination .page-navi:hover {
border-radius: 0.6rem;
background-color: var(--gray-05);
transition: 0.2s ease-in-out;
}
.pagination .page-navi:active {
background-color: var(--gray-05);
transition: 0.2s ease-in-out;
}
.pagination .page-navi.prev {
width:4rem;height:4rem;
border:0.1rem solid var(--gray-20);
border-radius: 6px;
}
.pagination .page-navi.first {
width:4rem;height:4rem;
border:0.1rem solid var(--gray-20);
border-radius: 6px;
}
.pagination .page-navi.prev::before {
display: inline-flex;
align-items: center;
justify-content: center;
flex-direction: row;
content: "";
width: 2rem;
height: 2rem;
background-image: url('../images/ico_arr_right.svg');
background-repeat: no-repeat;
transform: rotate(-180deg);
background-size:100%;
}
.pagination .page-navi.first::before {
display: inline-flex;
align-items: center;
justify-content: center;
flex-direction: row;
content: "";
width: 2rem;
height: 2rem;
background-image: url('../images/ico_arr_end.svg');
background-repeat: no-repeat;
transform: rotate(-180deg);
background-size:100%;
}
.pagination .page-navi.next {
padding:0;
width:4rem;height:4rem;
border:0.1rem solid var(--gray-20);
border-radius: 6px;
}
.pagination .page-navi.end {
padding:0;
width:4rem;height:4rem;
border:0.1rem solid var(--gray-20);
border-radius: 6px;
}
.pagination .page-navi.next::after {
display: inline-flex;
align-items: center;
justify-content: center;
flex-direction: row;
content: "";
width: 2rem;
height: 2rem;
background-image: url('../images/ico_arr_right.svg');
background-size:100%;
background-repeat: no-repeat;
}
.pagination .page-navi.end::after {
display: inline-flex;
align-items: center;
justify-content: center;
flex-direction: row;
content: "";
width: 2rem;
height: 2rem;
background-image: url('../images/ico_arr_end.svg');
background-size:100%;
background-repeat: no-repeat;
}
.pagination .page-links {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
gap: var(--spacer-2);
}
.pagination .page-links .page-link {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
color: var(--gray-70);
min-width: 4rem;
height: 4rem;
border:0.1rem solid var(--gray-20);
border-radius: 6px;
background-color:var(--gray-05)
}
.pagination .page-links .page-link.active {
font-weight: 700;
color: var(--white);
border-radius: 6px;
background-color: var(--brain-primary);
border-color:var(--brain-primary);
}
.pagination .arrow_wrap{display:flex;gap:var(--spacer-1);flex-wrap:wrap;justify-content: center}

@media (max-width: 540px){
}
@media (max-width: 340px){
    .pagination{flex-wrap: wrap;}
    .pagination .page-links{gap:var(--spacer-1);order:5;width:100%}
    .pagination .arrow_wrap{order:2;}
    /* .pagination .page-links .page-link ,
    .pagination .page-navi.end,
    .pagination .page-navi.prev,
    .pagination .page-navi.first,
    .pagination .page-navi.next{min-width:3rem;width:3rem;height:3rem;} */
}

/* 모바일 사이드메뉴 header 수정 */
.drawer-header{height:0;}
.drawer-header .drawer-logo{display:none;}
.drawer-header .drawer-close{position:absolute;left:0;top:15px;}
.drawer.open{overflow:visible}
.drawer.open .drawer-header .drawer-close{left:-37px}