@charset "UTF-8";
/* =========================================================================
   도장통 djt2026 — djt_hero_row.php (공용 상단 띠: 리더보드 + 로그인) 전용 스타일
   -------------------------------------------------------------------------
   · 2026-07-01: djt_hero_row.php 인라인 <style id="djt-hero-style"> 를 분리.
   · 메인·서브 양쪽 head.php 에서 공통 include 되는 독립 컴포넌트.
   · 반응형은 Tailwind CSS 기본 브레이크포인트 기준: lg 1024 / md 768 / sm 640
   ========================================================================= */

/* ---- 상단 띠 레이아웃 ---- */
.djt-hero-row{background:var(--djt-bg);padding:20px 0 20px;}
.djt-hero-row .wrap{max-width:1280px;margin:0 auto;padding:0 30px;position:static;width:auto;overflow:visible;height:auto;}
.djt-hero-grid{display:grid;grid-template-columns:96fr 35fr;gap:30px;align-items:stretch;} /* 리더보드 960 : 로그인 350 (1280px 페이지·좌우 30px 패딩 기준) */
.djt-hero-lead{min-width:0;}
.djt-hero-login{display:flex;}

/* ---- 리더보드(슬라이더) — #djt-main .lb-stage 규칙을 hero 스코프로 복제 ---- */
.djt-hero-row .lb-stage{position:relative;border-radius:14px;overflow:hidden;height:300px;box-shadow:0 16px 36px -18px rgba(11,42,74,.3);background:linear-gradient(120deg,#0B2A4A,#154C9E 55%,#1D5FBF);width:100%;}
.djt-hero-row .ad-tag{position:absolute;top:12px;left:12px;font-size:14px;font-weight:800;background:var(--djt-ad-border);color:#fff;padding:3px 9px;border-radius:6px;z-index:3;}
.djt-hero-row .lb-stage .main_top_slider,
.djt-hero-row .lb-stage .bx-wrapper,
.djt-hero-row .lb-stage .bx-viewport{height:300px !important;margin:0;border:none;box-shadow:none;background:transparent;left:0;}
.djt-hero-row .lb-stage .main_top_slider > div{height:300px;}
.djt-hero-row .lb-stage .main_top_slider a{display:block;height:300px;}
.djt-hero-row .lb-stage .main_top_slider img{width:100%;height:auto;object-fit:cover;display:block;}
.djt-hero-row .lb-stage .lb-fallback{height:300px;display:flex;align-items:center;justify-content:space-between;padding:0 44px;color:#fff;}
.djt-hero-row .lb-stage .lb-fallback .brand{font-size:14px;font-weight:700;color:#9FCBFF;letter-spacing:.05em;margin-bottom:8px;}
.djt-hero-row .lb-stage .lb-fallback h2{font-size:27px;font-weight:800;line-height:1.32;margin-bottom:10px;}
.djt-hero-row .lb-stage .lb-fallback p{font-size:13.5px;color:#cfe0f5;margin-bottom:16px;}
.djt-hero-row .lb-stage .lb-fallback a.cta{display:inline-block;background:var(--djt-teal);color:#fff;font-weight:700;font-size:13px;padding:10px 20px;border-radius:8px;}
.djt-hero-row .lb-stage .lb-fallback .lb-visual{width:170px;height:170px;border-radius:14px;background:rgba(255,255,255,.1);border:1px dashed rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;text-align:center;flex:none;}
.djt-hero-row .lb-stage .bx-pager{position:absolute;bottom:16px;left:44px;width:auto;display:flex;gap:6px;z-index:5;}
.djt-hero-row .lb-stage .bx-pager .bx-pager-item a{display:block;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);text-indent:-9999px;overflow:hidden;}
.djt-hero-row .lb-stage .bx-pager .bx-pager-item a.active{background:#fff;width:18px;border-radius:4px;}

/* ---- 로그인 박스 — #djt-main .login-box 규칙을 hero 스코프로 복제 ---- */
.djt-hero-login .login-box{width:100%;background:var(--djt-surface);border:1px solid var(--djt-line);border-radius:12px;padding:20px;box-shadow:0 10px 24px -16px rgba(11,42,74,.16);display:flex;flex-direction:column;justify-content:center;}
.djt-hero-login .login-box input{width:100%;height:38px;padding:0 13px;border:1px solid var(--djt-line);border-radius:8px;font-size:13px;margin-bottom:7px;font-family:inherit;background:var(--djt-bg);}
.djt-hero-login .login-box input:focus{outline:none;border-color:var(--djt-blue);background:#fff;}
.djt-hero-login .login-box .btn-login{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:1px;}
.djt-hero-login .login-box .btn-login:hover{background:var(--djt-blue-dark);}
.djt-hero-login .login-box .row-aux{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--djt-ink-60);margin-top:8px;}
.djt-hero-login .login-box .row-aux label{display:flex;gap:5px;align-items:center;margin:0;cursor:pointer;}
.djt-hero-login .login-box .row-aux a{color:var(--djt-ink-60);}
/* SNS 간편 로그인 구분선 */
.djt-hero-login .login-box .lb-divider{display:flex;align-items:center;gap:10px;margin:12px 0 10px;color:#9aa4b2;font-size:11px;font-weight:600;white-space:nowrap;}
.djt-hero-login .login-box .lb-divider::before,.djt-hero-login .login-box .lb-divider::after{content:"";flex:1;height:1px;background:var(--djt-line);}
/* SNS 버튼 2개(네이버·카카오) */
.djt-hero-login .login-box .sns-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.djt-hero-login .login-box .sns-row a{display:flex;align-items:center;justify-content:center;gap:6px;height:42px;border-radius:8px;font-size:13px;font-weight:700;text-decoration:none;transition:opacity .15s;}
.djt-hero-login .login-box .sns-row a:hover{opacity:.9;}
.djt-hero-login .login-box .sns-row a svg{width:16px;height:16px;display:block;flex:none;}
.djt-hero-login .login-box .sns-row .sns-naver{background:#03C75A;color:#fff;}
.djt-hero-login .login-box .sns-row .sns-kakao{background:#FEE500;color:#3C1E1E;}
/* 회원가입 안내 */
.djt-hero-login .login-box .lb-join{text-align:center;font-size:12px;color:var(--djt-ink-60);margin-top:11px;}
.djt-hero-login .login-box .lb-join a{color:var(--djt-blue);font-weight:700;}
.djt-hero-login .login-box.is-member{text-align:center;}
.djt-hero-login .login-box .mb-greet{font-size:15px;font-weight:700;color:var(--djt-navy);margin-bottom:4px;}
.djt-hero-login .login-box .mb-sub{font-size:11.5px;color:var(--djt-ink-60);margin-bottom:14px;}
.djt-hero-login .login-box .mb-actions{display:flex;flex-direction:column;gap:8px;}
.djt-hero-login .login-box .mb-actions a{display:block;padding:10px;border-radius:8px;font-size:13px;font-weight:700;}
.djt-hero-login .login-box .mb-actions .pri{background:var(--djt-blue);color:#fff;}
.djt-hero-login .login-box .mb-actions .sec{background:var(--djt-bg);color:var(--djt-ink);border:1px solid var(--djt-line);}

/* 2026-07-02: 기업회원은 "기업페이지" 버튼이 추가되어 액션 버튼이 5개가 되면서
   .djt-hero-login 전체 높이가 300px을 넘어가는 문제가 있었음(대략 302px) —
   버튼이 5개 이상일 때만 :has()로 감지해 여백/폰트를 축소, 300px 이내로 맞춤 */
.djt-hero-login .login-box .mb-actions:has(a:nth-child(5)){gap:6px;}
.djt-hero-login .login-box .mb-actions:has(a:nth-child(5)) a{padding:7px 10px;font-size:12.5px;}
.djt-hero-login .login-box:has(.mb-actions a:nth-child(5)) .mb-sub{margin-bottom:9px;}
.djt-hero-login .login-box:has(.mb-actions a:nth-child(5)){padding:16px 20px;}

/* ---- 서브페이지 전체폭 본문 (좌우 구분 없음) ---- */
.djt-wrapper-sub{background:var(--djt-bg);}
/* 스킨 호환용 빈 구조 래퍼(head.php의 #container_wr>#container)는 여백 0으로 접기 */
.djt-wrapper-sub > #container_wr{max-width:none;width:auto;margin:0;padding:0;float:none;}
.djt-wrapper-sub > #container_wr > #container{padding:0;margin:0;min-height:0;float:none;}
/* 실제 전체폭 본문 컨테이너(djt_sub_wrap.php에서 재오픈) */
.djt-wrapper-sub > #container_wr.djt-sub-content{max-width:1280px;width:auto;margin:0 auto;padding:24px 30px 50px;float:none;}
.djt-wrapper-sub > #container_wr.djt-sub-content:after{content:"";display:block;clear:both;}

/* ════════════════════════════════════════════════════════════════════════
   반응형 (Tailwind CSS 브레이크포인트 기준: lg 1024 / md 768 / sm 640)
════════════════════════════════════════════════════════════════════════ */

/* ---- 태블릿 구간 (1024px~1279px): 메인 리더보드를 풀사이즈로, 로그인 박스는 숨김
   (하단 탭바의 MY/로그인 탭이 대체 — 모바일과 동일한 패턴)
   [주의] 다른 css 파일들과 동일하게 1024/1023 경계로 통일 — 이전에 1025/1024 경계를 써서
   1023px~1024px 사이에서 파일 간 규칙이 어긋나 디자인이 깨지는 문제가 있었음. ---- */
@media (min-width:1024px) and (max-width:1279px){
  .djt-hero-row .wrap{padding:0 20px;}
  .djt-hero-grid{grid-template-columns:1fr;gap:18px;}
  .djt-hero-login{display:none;}
}

/* ---- lg 미만 (<1024px, 1023px 포함): 리더보드·로그인 세로 스택 (기존 규칙 유지) ---- */
@media (max-width:1023px){
  .djt-hero-grid{grid-template-columns:1fr;}
  /* [중요] 여기서 height:auto 를 쓰면 이미지가 로딩되기 "전"에는 박스 높이가 0이 되는데,
     main_top_slider 를 초기화하는 bxSlider(jQuery, mode:'fade')는 $(document).ready 시점에
     딱 한 번만 높이를 측정해서 고정(adaptiveHeight:false)하기 때문에, 그 순간 높이가 0이면
     이미지가 로드된 뒤에도 계속 0px 박스 안에 숨어 "이미지가 안 보이는" 문제가 생김.
     → 이미지 로딩과 무관하게 즉시 실제 높이를 갖도록 박스에 고정 비율(aspect-ratio)을 주어
     bxSlider가 항상 올바른 높이를 측정하게 함. 비율은 실제 메인 리더보드 배너 이미지 규격인
     872×300 기준(사실상 박스 없이 이미지 원본 비율과 동일하게 보이도록 함). */
  .djt-hero-row .lb-stage{
    height:auto;aspect-ratio:872/300;
    background:none;box-shadow:none;border-radius:0;overflow:hidden;
  }
  /* [주의] djt_hero_row.php의 .latest_wr.main_top_l 에는 style="height:300px" 인라인이
     박혀 있어(main_top_slider 등을 감싸는 부모) 여기서 같이 100%로 덮어써주지 않으면
     인라인 스타일이 그대로 남아 300px 고정처럼 보임 — !important로 인라인을 오버라이드 */
  .djt-hero-row .lb-stage .latest_wr.main_top_l,
  .djt-hero-row .lb-stage .main_top_slider,
  .djt-hero-row .lb-stage .bx-wrapper,
  .djt-hero-row .lb-stage .bx-viewport,
  .djt-hero-row .lb-stage .main_top_slider > div,
  .djt-hero-row .lb-stage .main_top_slider a{height:100% !important;}
  /* object-fit:contain — 872×300과 실제 업로드 이미지 비율이 다를 때 cover는 잘림(크롭)이
     생기므로, 원본 비율을 그대로 유지하며 박스 안에 전부 보이도록 contain으로 변경 */
  .djt-hero-row .lb-stage .main_top_slider img{display:block;width:100% !important;height:100% !important;object-fit:contain;border-radius:10px;}
  /* 이미지가 없는 폴백 카드는 텍스트 레이아웃이라 카드 배경을 유지, 비율 박스를 그대로 채움 */
  .djt-hero-row .lb-stage .lb-fallback{
    height:100% !important;border-radius:14px;overflow:hidden;
    box-shadow:0 16px 36px -18px rgba(11,42,74,.3);
    background:linear-gradient(120deg,#0B2A4A,#154C9E 55%,#1D5FBF);
  }
  /* 768px~1023px 구간도 모바일(<768px)과 완전히 동일한 코드를 사용 — 여백 축소, 로그인 박스 숨김 등 */
  .djt-hero-row{padding:14px 0;}
  .djt-hero-row .wrap{padding:0 16px;}
  .djt-hero-grid{gap:14px;}
  .djt-hero-row .lb-stage .lb-fallback{padding:0 20px;}
  .djt-hero-row .lb-stage .lb-fallback h2{font-size:19px;}
  .djt-hero-row .lb-stage .lb-fallback .lb-visual{display:none;}
  .djt-hero-login{display:none;} /* 모바일 하단 탭바(MY)로 로그인 대체 — hero 로그인 박스는 숨김 */
  .djt-wrapper-sub > #container_wr.djt-sub-content{padding:14px 12px 32px;}
}

/* ---- sm 미만 (<640px): 폰 화면 — 최소 높이로 축소 ---- */
@media (max-width:639px){
  .djt-hero-row .lb-stage .lb-fallback h2{font-size:16px;margin-bottom:6px;}
  .djt-hero-row .lb-stage .lb-fallback p{display:none;}
}