/* BASIC css start */
:root{
  --color-main:#0C025B;
  --color-accent-bg:#F4F6FE;
  --color-border:#D3DAF2;
  --color-bg:#fff;

  --header-height:140px;
  --aside-width:210px;

  --banner-width:200px;
  --banner-height:90px;

  --searchbar-maxwidth:900px;

  --font-size-base:16px;
  --font-size-sm:14px;
  --font-size-xs:12px;
}

/* ===== Base ===== */
html{ box-sizing:border-box; }
*,*:before,*:after{ box-sizing:inherit; }
html,body{
  width:100%; min-width:320px; margin:0; padding:0;
  font-family:'Pretendard','Montserrat','Noto Sans KR',sans-serif;
  font-size:var(--font-size-base);
  background:var(--color-bg); color:var(--color-main);
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ border:0; background:none; cursor:pointer; }
img{ max-width:100%; height:auto; display:block; }
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ===== Aside ===== */
#aside{
  position:fixed; left:0; top:0; bottom:0;
  width:var(--aside-width); height:100vh;
  background:#fff; border-right:1.5px solid var(--color-border);
  z-index:130; overflow-y:auto;
  transition:transform .28s ease;
}
.asi_inner{ display:flex; flex-direction:column; height:100%; padding-bottom:30px; }
.aside-title{
  font-size:15px; color:#A1A7C5; margin-top:20px;
  padding:10px 18px 0 15px; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
}
#aside nav{ margin-top:44px; }
#aside nav li{ position:relative; }
#aside nav .main_m>li{ margin-bottom:12px; }
#aside nav a{
  display:block; padding:7px 12px; font-size:15px; font-weight:600;
  border-radius:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background .13s, color .13s;
}
#aside nav li:hover>a, #aside nav li:focus-within>a{
  background:var(--color-accent-bg); color:var(--color-main)!important;
}
#aside nav li.active>a, #aside nav li.selected>a{
  background:var(--color-accent-bg); color:var(--color-main)!important;
  font-weight:700; border-left:4px solid var(--color-main);
  box-shadow:0 2px 8px rgba(12,2,91,.06);
}
#aside nav .sub1_m, #aside nav .sub2_m{
  display:none; position:absolute; top:0; left:100%; min-width:170px;
  background:#fff; border:1.5px solid var(--color-border); border-radius:8px;
  box-shadow:0 2px 12px rgba(12,2,91,.06); z-index:200; padding:6px 0;
}
#aside nav .main_m>li:hover>.sub1_m:not(:empty){ display:block; }
#aside nav .sub1_m>li:hover>.sub2_m:not(:empty){ display:block; }
#aside nav .sub1_m li a, #aside nav .sub2_m li a{
  font-size:13px; font-weight:500; color:#555; padding:7px 16px; border-radius:6px;
}
#aside nav .sub1_m li:hover>a, #aside nav .sub2_m li:hover>a{
  background:var(--color-accent-bg); color:var(--color-main)!important;
}

/* ===== Overlay (mobile only) ===== */
.aside-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:109;
}
.aside-overlay[hidden]{
  display:none !important;
  pointer-events:none !important;
  background:transparent !important;
}

/* ===== Header ===== */
#header{
  position:fixed; top:0; left:0; width:100%;
  background:#fff; border-bottom:1.5px solid var(--color-border);
  z-index:120; box-shadow:0 2px 14px rgba(0,0,0,.01);
  min-height:var(--header-height);
}
.head_inner{
  max-width:1700px; margin:0 auto; padding:0 2.8vw;
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  min-height:var(--header-height);
}

/* Left */
.header_left{ display:flex; align-items:center; gap:10px; position:relative; }
.aside-toggle{
  font-size:22px; line-height:1; padding:6px 8px; border-radius:8px;
  color:#222; background:#fff; border:1px solid #E9ECF5;
  display:none; z-index:131;
}
.aside-toggle:focus{ outline:2px solid #0C025B; outline-offset:2px; }

.header_logo{ display:flex; align-items:center; min-width:130px; }
.header_logo img{ height:68px; width:auto; max-width:260px; object-fit:contain; }

/* Center */
.header_center{ flex:1 1 0; min-width:0; }
.header_search_box{
  display:flex; flex-direction:column; align-items:stretch;
  width:100%; max-width:var(--searchbar-maxwidth); margin:0 auto;
}
.header_user{
  width:100%; display:flex; align-items:center; justify-content:flex-end;
  gap:12px; margin-bottom:6px; min-height:32px; flex-wrap:wrap;
}
.user_icon_btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:32px; min-width:32px; padding:0 11px; font-weight:600; font-size:var(--font-size-xs);
  border-radius:15px; background:none; color:var(--color-main); transition:background .14s, color .14s;
}
.user_icon_btn:hover, .user_icon_btn:focus{ background:var(--color-accent-bg); }

#header .header_search_box form{ width:100%; max-width:var(--searchbar-maxwidth); margin:0 auto; }
#header .header_search_box form fieldset{
  border:1.5px solid #EAEAEA; margin:0; padding:0;
  display:flex; align-items:center; background:#fff; border-radius:28px;
  transition:border-color .2s, box-shadow .2s;
}
#header .header_search_box form:focus-within fieldset{
  border-color:#0C025B; box-shadow:0 0 0 4px rgba(12,2,91,.05);
}
#header .header_search_box input{
  flex:1 1 auto; border:0; background:transparent; font-size:1rem;
  padding:10px 18px; outline:0; min-width:0; color:#222;
}
#header .header_search_box input::placeholder{ color:#A0A0A0; }
#header .header_search_box .search_btn{
  display:flex; align-items:center; justify-content:center;
  background:transparent; color:#888; border:0; border-radius:50%;
  width:40px; height:40px; margin:0 4px 0 0; transition:background .17s, color .17s;
}
#header .header_search_box .search_btn:hover,
#header .header_search_box .search_btn:focus{ background:#F4F6FE; color:#0C025B; }
#header .header_search_box .search_btn::before{
  content:""; display:inline-block; width:22px; height:22px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>') no-repeat center/contain;
}

.search_sub_buttons{
  display:flex; gap:10px; margin-top:6px; width:100%; justify-content:flex-end; flex-wrap:wrap;
}
.search_sub_buttons a{
  display:inline-block; font-size:12px; font-weight:500; padding:6px 16px;
  background:var(--color-main); color:#fff; border-radius:16px; border:1px solid transparent;
  transition:opacity .2s; text-align:center;
}
.search_sub_buttons a:hover, .search_sub_buttons a:focus{ opacity:.85; }

/* Right banner */
.header_banner{ width:var(--banner-width); height:var(--banner-height); overflow:hidden; border-radius:6px; flex:0 0 auto; }
.header_banner img{ width:100%; height:100%; object-fit:cover; }

/* ===== Main layout anchor (본문 래퍼) ===== */
.main_layout{
  padding-top:var(--header-height);
  transition:margin-left .28s ease, padding-top .28s ease;
}

/* ===== Desktop: aside 차감 고정 ===== */
@media (min-width:1024px){
  /* aside는 좌측 고정. 드롭다운은 앞에서 z-index:200 */
  #aside{ transform:none; }

  /* 데스크톱에선 오버레이 없음 */
  .aside-overlay{ display:none !important; }

  /* 헤더·본문을 aside 폭만큼 차감 */
  #header{
    left:var(--aside-width) !important;
    width:calc(100% - var(--aside-width)) !important;
  }
  .main_layout{
    margin-left:var(--aside-width) !important;
  }

  /* 차감된 영역 안에서 헤더 내용 중앙 정렬 */
  #header .head_inner{
    max-width:1400px; /* 필요 시 조정 */
    margin:0 auto;
    padding:0 2vw;
  }
}

/* ===== Tablet/Mobile: 오프캔버스 ===== */
@media (max-width:1023px){
  .aside-toggle{ display:inline-flex; }

  #aside{ transform:translateX(-100%); }
  #aside.is-open{ transform:translateX(0); }

  /* aside 열릴 때 오버레이를 aside 오른쪽부터 */
  #aside.is-open + .aside-overlay{ left:var(--aside-width) !important; }

  /* 스크롤 잠금(바디 클래스는 JS에서 토글) */
  body.aside-open{ overflow:hidden; touch-action:none; }

  /* 헤더 전폭 */
  #header{ left:0; width:100%; }
  .main_layout{ margin-left:0; }

  .header_banner{ display:none; }
  .header_logo img{ height:44px; }
}

/* ===== 601–1023px: 2열 그리드 ===== */
@media (min-width:601px) and (max-width:1023px){
  .head_inner{
    display:grid; grid-template-columns:auto 1fr; grid-column-gap:14px; align-items:center;
    grid-template-areas:"left right";
  }
  .header_left{ grid-area:left; }
  .header_center{ grid-area:right; }
  .header_search_box{ max-width:100%; }
  .header_user{ justify-content:flex-end; }
}

/* ===== <=600px: 3행 스택 ===== */
@media (max-width:600px){
  .head_inner{
    display:grid; row-gap:6px; column-gap:8px; align-items:center; padding:6px 3vw;
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "left user"
      "search search"
      "sub sub";
  }
  .header_left{ grid-area:left; display:flex; align-items:center; gap:8px; }
  .header_logo img{ height:40px; max-width:140px; }
  .header_center{ grid-area:search; width:100%; }
  .header_search_box{ max-width:100%; }

  .header_user{ grid-area:user; justify-content:flex-end; gap:6px; margin-bottom:0; }
  .user_icon_btn{ height:28px; padding:0 8px; font-size:10.5px; border-radius:12px; }

  .search_sub_buttons{ grid-area:sub; justify-content:flex-end; gap:6px; margin-top:0; }
  .search_sub_buttons a{ font-size:10.5px; padding:5px 10px; border-radius:10px; }
}

/* ===== >=1200px: 검색박스 최대폭 ===== */
@media (min-width:1200px){
  .header_search_box{ max-width:var(--searchbar-maxwidth); }
}

/* BASIC css end */