/* BASIC css start */
/* =============== 기본 =============== */
:root{
  --aside-width:220px; --header-height:80px;
  --color-primary:#1A237E; --color-accent:#5C6BC0;
  --color-background:#F8F9FA; --color-surface:#FFFFFF; --color-border:#E9ECEF;
  --color-text-main:#212529; --color-text-sub:#6C757D;
  --shadow-soft:0 4px 12px rgba(0,0,0,.05);
  --font-kor:'Pretendard',sans-serif; --transition-smooth:.3s ease-in-out;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-kor);font-size:16px;background:var(--color-background);color:var(--color-text-main);line-height:1.6}
a{text-decoration:none;color:inherit} ul,li{list-style:none} img{max-width:100%;display:block}

/* =============== 레이아웃 =============== */
#aside{position:fixed;top:0;left:0;width:var(--aside-width);height:100vh;background:var(--color-surface);border-right:1px solid var(--color-border);z-index:200}
#header{position:fixed;top:0;left:var(--aside-width);width:calc(100% - var(--aside-width));height:var(--header-height);background:var(--color-surface);border-bottom:1px solid var(--color-border);z-index:100}
#contentWrapper{margin-left:var(--aside-width);margin-top:var(--header-height);padding:20px;width:calc(100% - var(--aside-width))}
.sec_inner{max-width:1200px;margin:0 auto;width:100%}
section{padding:80px 0;background:var(--color-surface);margin-bottom:20px;border:1px solid var(--color-border);border-radius:12px}
section:first-child{padding:0;border:none;border-radius:12px;overflow:hidden}
section:last-child{margin-bottom:0}
h2{font-size:2.2rem;font-weight:700;margin-bottom:40px;text-align:center}

/* =============== 섹션 =============== */
#sec1 .swiper-slide img{width:100%;height:450px;object-fit:cover}
#sec1 .swiper-pagination-bullet-active{background-color:var(--color-accent)}

#sec2 .brand-swiper{width:100%;overflow:hidden}
#sec2 .swiper-wrapper{align-items:center}
#sec2 .brand-swiper .swiper-slide{width:auto;text-align:center}
#sec2 .brand-swiper img{max-height:70px;width:auto;transition:all var(--transition-smooth)}

#about .about_inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:60px}
#about .about_text{flex:0 1 500px}
#about .about_image{flex:0 1 450px}
#about .about_title{text-align:left;font-size:2.2rem;font-weight:700;margin-bottom:20px}
#about .about_image img{border-radius:12px;box-shadow:var(--shadow-soft)}
#about .about_desc{font-size:1.05rem;color:var(--color-text-sub);margin-bottom:20px}
#about .about_highlight{font-weight:600;font-size:1.15rem;margin-bottom:30px}
#about .about_contact{display:flex;gap:20px}

#sec3 .faq_box{max-width:800px;margin:0 auto}
#sec3 .faq-title{font-size:2rem;font-weight:600;margin-bottom:30px}
#sec3 .faq-list li{border-bottom:1px solid var(--color-border);padding:15px 0}
#sec3 .faq-list li:last-child{border-bottom:none}
#sec3 .question{cursor:pointer;font-weight:600;font-size:1.1rem;position:relative;padding-right:30px}
#sec3 .question::after{content:'▼';position:absolute;right:5px;top:50%;transform:translateY(-50%);font-size:.8em;color:var(--color-text-sub);transition:transform .3s ease}
#sec3 .question.active::after{transform:translateY(-50%) rotate(180deg);color:var(--color-accent)}
#sec3 .answer{max-height:0;overflow:hidden;transition:max-height .4s ease;padding:0 10px;color:var(--color-text-sub);background:#fdfdfd;margin-top:10px;border-radius:8px}
#sec3 .answer.active{padding:15px 10px 0}
#sec3 .answer a{color:var(--color-accent);font-weight:500}

#sec6 .review-video{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:1000px;margin:auto;border-radius:12px}
#sec6 .review-video iframe{position:absolute;top:0;left:0;width:100%;height:100%}

#sec8 .sec_inner ul{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:30px !important}
#sec8 .sec_inner li a{display:block;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-soft);transition:transform .3s ease,box-shadow .3s ease}
#sec8 .sec_inner li a:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,.08)}
#sec8 .sec_inner li a img{display:block;width:100%;height:auto;border-radius:12px}
@media (min-width:1024px){
  #sec8 .sec_inner{max-width:1320px}
  #sec8 .sec_inner ul{gap:30px !important}
  #sec8 .sec_inner li a img{height:220px;object-fit:cover}
}

/* =============== 반응형 사이드 처리 =============== */
.aside-toggle{display:none;margin-right:12px;font-size:22px;background:none;border:0;cursor:pointer}
.aside-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:190}

@media (max-width:1023px){
  /* 모바일: 사이드 오프캔버스 */
  #aside{position:fixed;top:0;left:-100%;width:min(85vw,320px);height:100vh;transition:transform .3s ease,left 0s .3s;box-shadow:var(--shadow-soft);z-index:200;overflow-y:auto;background:var(--color-surface)}
  #aside.is-open{left:0;transform:translateX(0)}
  #header{left:0;width:100%}
  #contentWrapper{margin-left:0;width:100%}
  .aside-toggle{display:inline-block}
  section:first-child{border-radius:0}
}
@media (min-width:1024px){
  #aside{left:0;transform:none}
  #contentWrapper{margin-left:var(--aside-width);width:calc(100% - var(--aside-width))}
  .aside-overlay{display:none !important}
}

/* BASIC css end */