@charset "UTF-8";
/* =========================================================================
   도장통 djt2026 — index.php(메인) 전용 스타일
   -------------------------------------------------------------------------
   · 2026-07-01: index.php 인라인 <style id="djt-main-extra"> 를 분리.
   · djt-head.css(#djt-main 공통 셸/카드) 뒤에 로드되어 메인 전용 그리드를
     세부 조정한다.
   · 반응형은 Tailwind CSS 기본 브레이크포인트 기준: lg 1024 / md 768 / sm 640
   ========================================================================= */

/* 광고배너 : 3:4 · 한 줄 5개 */
#djt-main .mid-banner-row{grid-template-columns:repeat(4,1fr);}
#djt-main .mid-banner-row .ad{display:block;height:auto;overflow:hidden;padding:0;line-height:0;}
#djt-main .mid-banner-row .ad:has(img){border:none;background:none;}
#djt-main .mid-banner-row .ad img{width:100%;height:100%; max-height:256px;object-fit:cover;display:block;}
/* 뉴스 + 탐방 50:50 — 내부 스타일은 각 latest 스킨 CSS 참조 */
#djt-main .news-visit-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;min-width:0;}
#djt-main .news-visit-row>div{display:flex;flex-direction:column;min-width:0;}
#djt-main .nv-panel{background:var(--djt-surface);border:1px solid var(--djt-line);border-radius:14px;padding:20px;flex:1;min-width:0;}
/* 중고매매 : 1:1 · 한 줄 5개 */
#djt-main .used-grid{grid-template-columns:repeat(5,1fr);}
#djt-main .used-card .thumb-ph{height:auto;aspect-ratio:1/1;}
/* nv-panel 내부 텍스트 리스트 (자료실·지식문의) */
#djt-main .nv-panel ul{list-style:none;margin:0;padding:0;}
#djt-main .nv-panel li{font-size:14px;padding:8px 0;border-bottom:1px solid var(--djt-line);list-style:none;color:var(--djt-ink-60);display:flex;justify-content:space-between;gap:8px;align-items:baseline;}
#djt-main .nv-panel li:last-child{border-bottom:none;}
#djt-main .nv-panel li b{color:var(--djt-ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#djt-main .nv-panel li>a{min-width:0;flex:1;overflow:hidden;}
#djt-main .nv-panel li span{font-size:13px;flex:none;color:#111827;}
/* 제품추천 : 한 줄 5개 */
#djt-main .product-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
#djt-main .product-card{background:var(--djt-surface);border:1px solid var(--djt-line);border-radius:12px;overflow:hidden;}
#djt-main .product-card:hover{border-color:var(--djt-blue);}
#djt-main .product-card .thumb-ph{aspect-ratio:1/1;position:relative;}
#djt-main .product-card .thumb-ph img{width:100%;height:100%;object-fit:cover;}
#djt-main .product-card .cap{padding:10px 12px;font-size:14px;font-weight:600;color:var(--djt-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; text-align:center;}
/* 우측 통합 슬라이더 */
#djt-main .djt-side-slider .slide{height:250px;border-radius:12px;overflow:hidden;background:var(--djt-ad-bg);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;text-align:center;}
#djt-main .djt-side-slider .slide img{width:100%;height:100%;object-fit:cover;}
/* 우측 빠른 업체검색 */
#djt-main .djt-side-search h5{margin-bottom:12px;}
#djt-main .djt-side-search form{display:flex;flex-direction:column;gap:8px;margin:0;}
#djt-main .djt-side-search select{width:100%;height:40px;padding:0 12px;border:1px solid var(--djt-line);border-radius:8px;background:var(--djt-bg);font-size:13px;font-family:inherit;color:var(--djt-ink);}
#djt-main .djt-side-search .djt-side-search-btn{width:100%;height:42px;border:none;border-radius:8px;background:var(--djt-blue);color:#fff;font-weight:700;font-size:14px;cursor:pointer;margin-top:2px;}
#djt-main .djt-side-search .djt-side-search-btn:hover{background:var(--djt-blue-dark);}
/* 로그인 SNS 로고 버튼 */
#djt-main .login-box .sns-row{gap:10px;}
#djt-main .login-box .sns-row a{width:40px;height:40px;border:none;background:#fff;overflow:hidden;}
#djt-main .login-box .sns-row a svg{width:55%;height:55%;display:block;}
#djt-main .login-box .sns-row .sns-naver{background:#03C75A;color:#fff;}
#djt-main .login-box .sns-row .sns-kakao{background:#FEE500;color:#3C1E1E;}
#djt-main .login-box .sns-row .sns-facebook{background:#1877F2;color:#fff;}
#djt-main .login-box .sns-row .sns-google{background:#fff;border:1px solid var(--djt-line);}
#djt-main .login-box .sns-row .sns-google svg{width:62%;height:62%;}
/* 하단 배너 (okcarousel_bottom 스킨 = 실제 사이트와 동일, 6개 노출) */
#djt-main .djt-bottom-wrap{padding:0 0 44px;}
/* bxSlider 공통(메인 리더보드 제외) 여백 정리 */
#djt-main .djt-side-slider .bx-wrapper{margin:0 auto;border:none;box-shadow:none;background:transparent;}
/* 내부 도료 리스트 및 버튼 스타일 */

.bx-pager-item {display:none !important;}

/* 도료 계산기 카드 그리드 */
.djt-calc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    min-width: 0;
}
.djt-calc-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 6px 12px;
    background: #f3f7ff;
    border: 1.5px solid #d4e2f7;
    border-radius: 10px;
    text-decoration: none;
    color: var(--djt-blue);
    font-size: 12px;
    font-weight: 700;
    gap: 7px;
    transition: all 0.22s ease;
    text-align: center;
    line-height: 1.3;
}
.djt-calc-card svg {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    transition: transform 0.22s ease;
}
.djt-calc-card:hover {
    background: var(--djt-blue);
    border-color: var(--djt-blue);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(29,95,191,0.22);
}
.djt-calc-card:hover svg {
    transform: scale(1.1);
}

/* ════════════════════════════════════════════════════════════════════════
   반응형 (Tailwind CSS 브레이크포인트 기준: lg 1024 / md 768 / sm 640)
   기존 1100px 단일 분기점을 3단계로 세분화.
════════════════════════════════════════════════════════════════════════ */

/* ---- 태블릿 구간 (1024px~1279px): 우측 컬럼이 아래로 내려가 본문이 풀사이즈가 되므로
   데스크톱과 동일한 5열 유지(사이드바로 인한 폭 제약이 없어짐) ---- */
@media screen and (min-width:1024px) and (max-width:1279px){
  #djt-main .mid-banner-row{grid-template-columns:repeat(4,1fr);}
  #djt-main .product-grid,#djt-main .used-grid{grid-template-columns:repeat(5,1fr);}

  /* 2026-07-02: 공지사항·견적의뢰는 태블릿에서 #djtNoticeEstimateRow(news-visit-row 클래스 재사용)
     안에 나란히 배치되어 자료실·지식문의와 동일한 1:1 비율 그리드를 이룬다. 여기서는 그 두 박스의
     내부(h2 헤더 + ul 리스트)를 section-head + nv-panel과 동일한 디자인으로 스타일링만 담당.
     업체검색은 이 구간에서 계속 우측 컬럼(.box) 디자인 그대로 유지되므로 여기 포함하지 않음.
     [주의] #djt-main .box h2 등 id+class 조합 규칙보다 확실히 이기도록 #djt-main 프리픽스로
     명시도(specificity)를 높임 — 1023px 이하 블록과 동일한 패턴/버그 예방 */
  #djt-main #djtNoticeBox, #djt-main #djtEstimateBox{
    background:none;border:none;box-shadow:none;padding:0;
  }
  #djt-main #djtNoticeBox h2, #djt-main #djtEstimateBox h2{
    display:flex;justify-content:space-between;align-items:baseline;
    font-size:17px;font-weight:800;color:var(--djt-navy);
    margin:0 0 14px;padding:0;border:none;
  }
  #djt-main #djtNoticeBox h2 a, #djt-main #djtEstimateBox h2 a{font-size:14px;font-weight:700;color:var(--djt-blue);}
  #djt-main #djtNoticeBox ul, #djt-main #djtEstimateBox ul{
    background:var(--djt-surface);border:1px solid var(--djt-line);border-radius:14px;
    padding:20px;margin:0;list-style:none;
  }
  #djt-main .djt-bottom-wrap{padding:0;}
}

/* ---- lg 미만 (<1024px, 768px~1023px 포함): 모바일과 완전히 동일한 코드 —
   광고배너=2개씩 슬라이드, 중고매매·제품추천=2열 축소, 뉴스/탐방 세로 스택, 계산기 카드 3열 ---- */
@media screen and (max-width:1023px){
  #djt-main .news-visit-row{grid-template-columns:1fr;gap:20px;min-width:0;}
  /* 광고배너 — 그리드 대신 가로 스와이프 슬라이드(2개씩 노출) */
  #djt-main .mid-banner-row{
    display:flex;grid-template-columns:none;flex-wrap:nowrap;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    gap:10px;padding-bottom:2px;scrollbar-width:none;
  }
  #djt-main .mid-banner-row::-webkit-scrollbar{display:none;}
  #djt-main .mid-banner-row .ad{flex:0 0 calc(50% - 5px);scroll-snap-align:start;height:auto;aspect-ratio:3/4;}
  /* 중고매매·제품추천 — 카드 사이즈 축소 + 2열 */
  #djt-main .product-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  #djt-main .used-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  /* 중고매매 — 모바일에서는 5개 전부가 아닌 2개만 노출(1줄) */
  #djt-main .used-grid .used-card:nth-child(n+3){display:none;}
  #djt-main .used-card .thumb-ph{height:auto;aspect-ratio:1/1;}
  #djt-main .used-card .cap,#djt-main .product-card .cap{font-size:12.5px;padding:8px 10px;}
  #djt-main .used-card .tag{font-size:10px;padding:2px 6px;}
  #djt-main .nv-panel{padding:16px;}
  /* [주의] bxSlider(mode:'fade', adaptiveHeight:false)로 초기화되므로 height:auto만 두면
     이미지 로딩 전 높이가 0으로 고정돼 안 보이는 문제가 재발함 — aspect-ratio로 항상 실제 높이 확보 */
  #djt-main .djt-side-slider .slide{height:auto;aspect-ratio:300/250;}
  #djt-main .djt-side-slider .slide img{width:100%;height:100%;object-fit:cover;}
  /* 도료계산기 4항목 — 3열(3+1)로 어긋나던 것을 2x2로 정렬 */
  .djt-calc-grid{grid-template-columns:repeat(2,1fr);}

  /* 자료실/지식문의, 제품추천 — 1023px 이하에서는 숨기고 그 자리를
     공지사항/견적의뢰/업체검색(JS로 이동됨)이 대신 채움 */
  #djt-main .djt-hide-1023{display:none !important;}

  /* 공지사항/견적의뢰/업체검색 — 자료실·지식문의와 동일하게 h2(section-head)를 박스 밖으로 빼는 디자인.
     2026-07-01: 마크업 자체를 h5→h2로 변경(index.php)했으므로 여기서도 h2 기준으로 스타일링.
     .left-col 로 이동된 뒤 flex 컬럼(gap)에 맞춰 카드형 박스 배경/테두리는 제거하고,
     리스트/폼에만 nv-panel 스타일(테두리·배경·라운드)을 적용 — #djt-main .section-head/.nv-panel과 동일 스펙.
     [주의] 2026-07-02: djt-head.css의 `#djt-main .box`/`#djt-main .box h2`/`#djt-main .box h2 a`가
     id+class(또는 id+class+tag) 조합이라 아래 id-only 선택자보다 CSS 명시도(specificity)가 높아서
     실제로는 전혀 적용되지 않던 버그가 있었음(위치는 바뀌었지만 디자인이 그대로였던 원인) —
     모든 선택자 앞에 `#djt-main`을 붙여 명시도를 확실히 더 높여서 항상 이기도록 수정 */
  #djt-main #djtNoticeBox, #djt-main #djtEstimateBox, #djt-main #djtCompanySearchBox{
    background:none;border:none;box-shadow:none;padding:0;
  }
  #djt-main #djtNoticeBox h2, #djt-main #djtEstimateBox h2, #djt-main #djtCompanySearchBox h2{
    display:flex;justify-content:space-between;align-items:baseline;
    font-size:17px;font-weight:800;color:var(--djt-navy);
    margin:0 0 14px;padding:0;border:none;
  }
  #djt-main #djtNoticeBox h2 a, #djt-main #djtEstimateBox h2 a{font-size:14px;font-weight:700;color:var(--djt-blue);}
  #djt-main #djtNoticeBox ul, #djt-main #djtEstimateBox ul,
  #djt-main #djtCompanySearchBox form{
    background:var(--djt-surface);border:1px solid var(--djt-line);border-radius:14px;
    padding:20px;margin:0;list-style:none;
  }
  #djt-main .djt-bottom-wrap{padding:0;}
}

/* ---- sm 미만 (<640px): 폰 화면 — 광고배너 2개씩 슬라이드 유지, 나머지 최종 축소 ---- */
@media screen and (max-width:639px){
  #djt-main .mid-banner-row{gap:8px;}
  #djt-main .mid-banner-row .ad{flex:0 0 calc(50% - 4px);}
  #djt-main .product-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  #djt-main .used-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  #djt-main .used-card .cap,#djt-main .product-card .cap{font-size:12px;padding:7px 9px;}
  #djt-main .djt-side-slider .slide{height:auto;aspect-ratio:300/250;}
  .djt-calc-grid{grid-template-columns:repeat(2,1fr);}
  .djt-calc-card{font-size:11px;padding:12px 4px 10px;}
  .djt-calc-card svg{width:24px;height:24px;}
  #djt-main .djt-bottom-wrap{padding:0;}
}