/* BASIC css start */
/* =========================================================
   THE LAB CHEMICAL — Header CSS (Premium Minimal v2026.02)
   ✅ 목표
   - 얇은 선(hairline) + 꾸안꾸 고급스러움
   - 풀화면에서도 너무 흩어지지 않게 "컨테이너로 묶기"
   - 1024~1100 구간 안정화(로고/검색/배너/버튼 조화)
   - 1023 이하(태블릿/모바일) 검색창/버튼 정렬 무너짐 방지
   - MakeShop 공용CSS 충돌(네모 input/고정폭/가운데정렬) 방어
========================================================= */

/* ---------- Tokens ---------- */
:root{
  --tlc-navy:#0C025B;
  --tlc-text:#0f172a;
  --tlc-muted:#64748b;

  --tlc-bg:#ffffff;
  --tlc-soft:#f8fafc;
  --tlc-soft2:rgba(248,250,252,.72);

  --tlc-line:rgba(15,23,42,.10);     /* 얇은선 */
  --tlc-line2:rgba(12,2,91,.18);     /* 포인트 얇은선 */
  --tlc-ring:rgba(12,2,91,.10);      /* focus ring */

  --shadow-sm:0 6px 18px rgba(15,23,42,.06);
  --shadow-md:0 10px 30px rgba(15,23,42,.08);

  --aside-width:210px;

  --header-height:128px;             /* 140 → 살짝 컴팩트 */
  --header-row-gap:8px;
  --header-col-gap:22px;

  --container:1320px;                /* ✅ 풀화면에서 흩어짐 방지 */

  --radius:14px;
  --pill:999px;

  --banner-w:180px;
  --banner-h:44px;

  --fs-12:12px;
  --fs-13:13px;
  --fs-14:14px;
  --fs-15:15px;

  --font:'Pretendard','Montserrat','Noto Sans KR',sans-serif;
}

/* ---------- Scope base (헤더/어사이드만) ---------- */
#header, #header * ,
aside#aside, aside#aside *{
  box-sizing:border-box;
  font-family:var(--font);
}

#header a, aside#aside a{ color:inherit; text-decoration:none; }
#header ul, aside#aside ul{ margin:0; padding:0; list-style:none; }
#header img, aside#aside 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 (Category)
========================================================= */
aside#aside{
  position:fixed;
  left:0; top:0; bottom:0;
  width:var(--aside-width);
  height:100vh;
  background:var(--tlc-bg);
  border-right:1px solid var(--tlc-line);
  z-index:130;
  overflow-y:auto;
  transition:transform .25s ease;
}

aside#aside .asi_inner{
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:18px 12px 24px;
}

aside#aside .aside-title{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#9aa3b2;
  font-weight:800;
  padding:8px 6px 0;
}

aside#aside nav{ margin-top:18px; }
aside#aside nav li{ position:relative; }
aside#aside nav .main_m>li{ margin-bottom:6px; }

aside#aside nav a{
  display:block;
  padding:9px 10px;
  border-radius:12px;
  font-size:14px;
  font-weight:650;
  color:var(--tlc-text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}

aside#aside nav li:hover>a,
aside#aside nav li:focus-within>a{
  background:var(--tlc-soft);
}

aside#aside nav li.active>a,
aside#aside nav li.selected>a{
  background:rgba(12,2,91,.06);
  color:var(--tlc-navy);
  font-weight:800;
  box-shadow:inset 2px 0 0 var(--tlc-navy);
}

/* dropdown */
aside#aside nav .sub1_m,
aside#aside nav .sub2_m{
  display:none;
  position:absolute;
  top:0; left:100%;
  min-width:180px;
  background:var(--tlc-bg);
  border:1px solid var(--tlc-line);
  border-radius:14px;
  box-shadow:0 12px 28px rgba(17,24,39,.08);
  padding:8px;
  z-index:200;
}

aside#aside nav .main_m>li:hover>.sub1_m:not(:empty){ display:block; }
aside#aside nav .sub1_m>li:hover>.sub2_m:not(:empty){ display:block; }

aside#aside nav .sub1_m a,
aside#aside nav .sub2_m a{
  font-size:13px;
  font-weight:560;
  color:#374151;
  padding:8px 10px;
  border-radius:10px;
}

aside#aside nav .sub1_m a:hover,
aside#aside nav .sub2_m a:hover{
  background:var(--tlc-soft);
  color:var(--tlc-navy);
}

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

/* =========================================================
   HEADER Shell
========================================================= */
#header{
  position:fixed;
  top:0; left:0;
  width:100%;
  min-height:var(--header-height);

  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);

  border-bottom:1px solid var(--tlc-line);
  z-index:120;
}

#header .head_inner{
  height:var(--header-height);
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px;
}

/* =========================================================
   Desktop (>=1024): 3col x 3row grid
   - logo | center | banner
   - row1 user, row2 search, row3 buttons
========================================================= */
@media (min-width:1024px){

  /* ✅ aside 옆 컬럼으로 header를 이동 */
  #header{
    left:var(--aside-width);
    width:calc(100% - var(--aside-width));
  }

  #header .head_inner{
    display:grid;
    grid-template-columns:max-content 1fr max-content;
    grid-template-rows:auto auto auto;
    column-gap:var(--header-col-gap);
    row-gap:var(--header-row-gap);
    align-content:center;
    align-items:center;
  }

  /* left */
  #header .header_left{
    grid-column:1;
    grid-row:1 / 4;
    display:flex;
    align-items:center;
    gap:10px;
  }

  /* (desktop) toggle hidden */
  #header .aside-toggle{ display:none; }

  #header .header_logo{
    display:flex;
    align-items:center;
  }
  #header .header_logo img{
    height:56px;
    max-width:220px;
    width:auto;
    object-fit:contain;
    filter:drop-shadow(0 10px 18px rgba(12,2,91,.06));
  }

  /* center becomes "contents" so we can place internal rows */
  #header .header_center{ display:contents; }
  #header .header_search_box{ display:contents; }

  /* row1 user */
  #header .header_user{
    grid-column:2;
    grid-row:1;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin:0;
    min-height:0;
  }

  #header .user_icon_btn{
    height:30px;
    padding:0 10px;
    font-size:12px;
    font-weight:650;
    color:var(--tlc-muted);
    border-radius:var(--pill);
    border:1px solid transparent;
    background:transparent;
    transition:background .15s ease, border-color .15s ease, color .15s ease;
  }
  #header .user_icon_btn:hover{
    background:var(--tlc-soft2);
    border-color:var(--tlc-line);
    color:var(--tlc-text);
  }

  /* row2 search */
  #header .header_search_box form{
    grid-column:2;
    grid-row:2;
    margin:0;
  }

  #header .header_search_box form fieldset{
    height:44px;
    margin:0;
    padding:0 10px;
    display:flex;
    align-items:center;

    border:1px solid var(--tlc-line);
    border-radius:var(--pill);
    background:var(--tlc-soft2);

    box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  }

  #header .header_search_box form:focus-within fieldset{
    background:#fff;
    border-color:rgba(12,2,91,.28);
    box-shadow:0 0 0 6px var(--tlc-ring), inset 0 1px 0 rgba(255,255,255,.8);
  }

  /* MakeShop input reset (네모 박스 방지) */
  #header .header_search_box input,
  #header .header_search_box input.MS_search_word,
  #header .header_search_box input.search_auto_completion,
  #header .header_search_box input[name="search"]{
    flex:1 1 auto;
    min-width:0;
    border:0 !important;
    outline:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;

    padding:0 8px !important;
    height:100% !important;
    line-height:normal !important;

    font-size:15px !important;
    color:var(--tlc-text) !important;
  }

  #header .header_search_box input::placeholder{
    color:#94a3b8 !important;
  }

  #header .header_search_box .search_btn{
    width:36px;
    height:36px;
    border-radius:var(--pill);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--tlc-muted);
    transition:background .15s ease, transform .12s ease, color .15s ease;
  }

  #header .header_search_box .search_btn:hover{
    background:rgba(12,2,91,.06);
    color:var(--tlc-navy);
    transform:translateY(-1px);
  }

  #header .header_search_box .search_btn::before{
    content:"";
    width:18px; height:18px;
    display:block;
    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;
  }

  /* row3 buttons */
  #header .search_sub_buttons{
    grid-column:2;
    grid-row:3;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:8px;
    margin:0;
    flex-wrap:wrap;
  }

  /* “꾸안꾸 고급” : ghost pill */
  #header .search_sub_buttons a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:32px;
    padding:0 12px;
    border-radius:var(--pill);

    font-size:12px;
    font-weight:650;
    color:var(--tlc-navy);

    background:transparent;
    border:1px solid var(--tlc-line2);
    transition:background .15s ease, border-color .15s ease, transform .12s ease;
  }

  #header .search_sub_buttons a:hover{
    background:rgba(12,2,91,.06);
    border-color:rgba(12,2,91,.30);
    transform:translateY(-1px);
  }

  /* banner aligns with search row */
  #header .header_banner{
    grid-column:3;
    grid-row:2; /* ✅ 검색창과 같은 줄 */
    width:var(--banner-w);
    height:var(--banner-h);
    border-radius:14px;
    border:1px solid var(--tlc-line);
    overflow:hidden;
    justify-self:end;
    align-self:center;
    background:#fff;
    box-shadow:var(--shadow-sm);
  }

  #header .header_banner img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  /* Swiper inline width 방어 */
  #header .header_banner .swiper,
  #header .header_banner .swiper-wrapper,
  #header .header_banner .swiper-slide{
    height:100% !important;
  }
  #header .header_banner .swiper-slide{
    width:100% !important;
  }
}

/* =========================================================
   1024~1100 TUNE: 조금 눌리는 구간만 “조화롭게 축소”
========================================================= */
@media (min-width:1024px) and (max-width:1100px){

  :root{
    --container:1180px;   /* 묶음 폭 살짝 줄여 균형 */
    --banner-w:160px;
  }

  #header .head_inner{
    column-gap:16px;
  }

  #header .header_logo img{
    height:52px;
    max-width:200px;
  }

  #header .search_sub_buttons a{
    height:30px;
    padding:0 10px;
    font-size:12px;
  }

  #header .header_user .user_icon_btn{
    height:28px;
    padding:0 9px;
    font-size:12px;
  }
}

/* =========================================================
   Tablet/Mobile (<=1023): 2col grid + search + buttons
   ✅ 검색창/버튼이 왼쪽으로 쏠리거나 네모박스 뜨는 문제 방지
========================================================= */
@media (max-width:1023px){

  /* aside offcanvas */
  aside#aside{ transform:translateX(-100%); }
  aside#aside.is-open{ transform:translateX(0); }
  body.aside-open{ overflow:hidden; touch-action:none; }

  /* header full */
  #header{
    left:0; width:100%;
  }

  #header .head_inner{
    max-width:100%;
    margin:0;
    height:auto;
    padding:10px 14px;

    display:grid;
    grid-template-columns:max-content 1fr;
    grid-template-rows:auto auto auto;
    column-gap:10px;
    row-gap:8px;
    align-items:center;
  }

  /* left: toggle + logo */
  #header .header_left{
    grid-column:1;
    grid-row:1;
    display:flex;
    align-items:center;
    gap:10px;
  }

  #header .aside-toggle{
    display:inline-flex;
    width:40px; height:40px;
    align-items:center; justify-content:center;
    border:1px solid var(--tlc-line);
    border-radius:12px;
    background:#fff;
    color:var(--tlc-text);
  }

  #header .header_logo img{
    height:36px;
    max-width:160px;
    width:auto;
  }

  /* user: row1 col2 */
  #header .header_user{
    grid-column:2;
    grid-row:1;
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:8px !important;
    margin:0 !important;
    padding:0 !important;
    width:100% !important;
    flex-wrap:wrap;
  }

  #header .user_icon_btn{
    height:28px !important;
    padding:0 9px !important;
    font-size:12px !important;
    border-radius:var(--pill) !important;
    color:var(--tlc-muted) !important;
    background:transparent !important;
    border:1px solid transparent !important;
  }
  #header .user_icon_btn:hover{
    background:var(--tlc-soft2) !important;
    border-color:var(--tlc-line) !important;
    color:var(--tlc-text) !important;
  }

  /* search: row2 full */
  #header .header_center{
    grid-column:1 / 3;
    grid-row:2;
  }

  #header .header_search_box{
    width:100%;
  }

  #header .header_search_box form{
    width:100%;
  }

  #header .header_search_box form fieldset{
    height:44px !important;
    border:1px solid var(--tlc-line) !important;
    border-radius:var(--pill) !important;
    background:var(--tlc-soft2) !important;
    padding:0 10px !important;
    display:flex !important;
    align-items:center !important;
    overflow:hidden; /* 네모 input 삐져나옴 방지 */
  }

  #header .header_search_box input,
  #header .header_search_box input.MS_search_word,
  #header .header_search_box input.search_auto_completion,
  #header .header_search_box input[name="search"]{
    width:100% !important;
    border:0 !important;
    outline:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
    padding:0 8px !important;
    height:100% !important;
    font-size:14px !important;
    color:var(--tlc-text) !important;
  }

  #header .header_search_box .search_btn{
    width:36px !important;
    height:36px !important;
    flex:0 0 36px !important;
    margin:0 !important;
    border-radius:var(--pill) !important;
  }

  /* buttons: row3 full (오른쪽 정렬 유지) */
  #header .search_sub_buttons{
    grid-column:1 / 3;
    grid-row:3;

    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:8px !important;

    width:100% !important;
    margin:0 !important;
    padding:0 !important;

    flex-wrap:wrap !important;
  }

  #header .search_sub_buttons a{
    height:30px !important;
    padding:0 10px !important;
    font-size:12px !important;
    border-radius:var(--pill) !important;

    background:transparent !important;
    border:1px solid var(--tlc-line2) !important;
    color:var(--tlc-navy) !important;
  }

  /* banner hide on <=1023 */
  #header .header_banner{ display:none !important; }
}

/* =========================================================
   Main layout anchor (header 높이만큼 띄우기)
   ✅ (다른 페이지) 헤더가 위에 fixed라 내용이 가려지는 것 방지
========================================================= */
.main_layout{
  padding-top:var(--header-height);
}

/* Desktop: aside column 만큼 본문을 오른쪽으로 */
@media (min-width:1024px){
  .main_layout{
    margin-left:var(--aside-width);
  }
}

/* =========================================================
   OPTIONAL: 공용 CSS가 #header/#aside 폭을 강제로 잡는 경우 방어
   (MakeShop 스킨에 따라 필요할 때만 살아나는 “안전장치”)
========================================================= */
#header{ width:100% !important; }
aside#aside{ width:var(--aside-width) !important; margin:0 !important; }

/* =========================================================
   FIX (<=1023): 제품문의/견적문의/MSDS 버튼 “캡슐 바”로 고급스럽게
   - 공용CSS 덮어쓰기 방지 위해 강하게 지정
========================================================= */
@media (max-width:1023px){

  /* ✅ 버튼 3개를 하나의 캡슐 컨테이너로 묶기 */
  #header .search_sub_buttons{
    /* grid 영역에서 오른쪽으로 딱 붙게 */
    grid-column:1 / 3 !important;
    grid-row:3 !important;

    width:fit-content !important;     /* ✅ 100% 늘어나는 거 방지 */
    justify-self:end !important;      /* ✅ 그리드 우측 정렬 */
    margin-left:auto !important;
    margin-right:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:6px !important;
    padding:5px !important;

    /* ✅ 고급스러운 캡슐 */
    background:rgba(255,255,255,.88) !important;
    border:1px solid rgba(15,23,42,.12) !important;
    border-radius:999px !important;
    box-shadow:0 12px 28px rgba(15,23,42,.08) !important;
    backdrop-filter:saturate(140%) blur(8px);
    -webkit-backdrop-filter:saturate(140%) blur(8px);
  }

  /* ✅ 개별 버튼(칩) */
  #header .search_sub_buttons a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    height:32px !important;
    padding:0 14px !important;

    font-size:12px !important;
    font-weight:700 !important;
    letter-spacing:-.01em !important;

    color:var(--tlc-navy, #0C025B) !important;
    background:transparent !important;
    border:1px solid transparent !important;
    border-radius:999px !important;

    transition:background .15s ease, border-color .15s ease, transform .12s ease !important;
  }

  #header .search_sub_buttons a:hover{
    background:rgba(12,2,91,.06) !important;
    border-color:rgba(12,2,91,.14) !important;
    transform:translateY(-1px) !important;
  }

  #header .search_sub_buttons a:active{
    transform:translateY(0) !important;
  }
}
/* BASIC css end */