@charset "utf-8";
/* ════════════════════════════════════════════════════════
   Infostep.kr — AI Dark Theme  |  respond.css
   ─────────────────────────────────────────────────────
   역할  : 반응형 미디어쿼리 전용 (layout.css 뒤에 로드)
   로드  : layout.css → respond.css → proto.css
   ─────────────────────────────────────────────────────
   브레이크포인트:
     @1300px — 컨텐츠 너비 축소
      @900px — 모바일 레이아웃 전환 (메뉴·카드·테이블)
      @540px — 로그인 폼 모바일
      @480px — 소형 모바일 추가 조정
   ─────────────────────────────────────────────────────
   모바일 글꼴 크기 정책 (PC 값은 layout.css 에서 처리):
     ┌─────────────────────────────────────────────────┐
     │  분류          @900px        @480px    최소보장 │
     │  ─────────────────────────────────────────────  │
     │  대형 제목     clamp 반응형  clamp 축소  14px   │
     │  중형 소제목   14px          13px        13px   │
     │  본문/UI       12px          12px        12px   │  ← 최대 12px 상한 적용
     │  보조/메타     12px          11px        11px   │
     │  극소(뱃지 등) 11px          10px        10px   │
     │  ★ 10px 미만 절대 사용 금지                     │
     └─────────────────────────────────────────────────┘
   clamp() 형식: clamp(최솟값, 뷰포트비례, 최댓값)
     - 최솟값 = 480px 이하 목표 크기 (10px 이상 필수)
     - 뷰포트비례 ≈ (목표px / 기준화면px) × 100
     - 최댓값 = 900px 부근 목표 크기
════════════════════════════════════════════════════════ */


/* ════════════════════════════════════
   [1] @media max-width: 1300px
   ─────────────────────────────────
   컨텐츠 패딩 축소 / GNB 간격 조정 / 검색창 너비 조정
   글꼴: GNB 13.5px → 13px (미세 조정)
════════════════════════════════════ */
@media (max-width: 1000px) {
  .inner, .container { padding: 0 20px; }
  #gnb > li > a      { padding: 0 11px; font-size: 13px; }
  #sch .inp          { width: 170px; }
  #sch .inp:focus    { width: 210px; }
}


/* ════════════════════════════════════
   [2] @media max-width: 900px
   ─────────────────────────────────
   모바일 레이아웃 전환
   글꼴 기준:
     제목류  → clamp로 화면 너비에 비례 (최솟값 ≥ 10px)
     본문/UI → 최대 12px (외부 CSS 덮어쓰기 봉쇄)
     보조    → 12px
     극소    → 11px
════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── [2-0] 모바일 폰트 상한 — 최대 12px 강제 ──
     원인: common.css 등 외부 CSS가 더 구체적인 선택자로
           모바일에서도 14~16px 이상 font-size를 지정해 덮어씀
           #sub > #content > * 는 직접 자식만 잡으므로
           중첩 요소에는 상속이 아닌 외부 CSS 선언값이 적용됨
     해결: #sub 내 핵심 텍스트 노드에 !important로 상한 봉쇄
     ─────────────────────────────────────────────
     적용: p, span, li, td, th, div, a, label, em, strong (일반 텍스트)
     제외:
       · h1~h6        — clamp로 별도 관리 (14px 이상 허용)
       · .mypoint strong — 수치 강조 (16px 유지)
       · .win-percent-text — 원형 차트 % (proto.css 관리)
       · 아이콘 (.fa, .bi 등) — font-size = 아이콘 크기, 별도 취급
     ─────────────────────────────────────────────
     ★ 이 블록을 @900px 가장 앞에 배치해야
       뒤에 오는 개별 규칙(11px, 10px 등)이 정상 적용됨 */
  #sub p, #sub span:not(.win-percent-text),
  #sub li, #sub td, #sub th,
  #sub div:not([class*="icon"]):not([class*="fa"]),
  #sub a, #sub label, #sub em,
  #sub strong {
    font-size: 12px !important;
  }
  /* 제목류 — 상한 제외, 개별 clamp 선언 우선 */
  #sub h1, #sub h2, #sub h3,
  #sub h4, #sub h5, #sub h6 { font-size: x-large; }
  /* mypoint 수치 강조 — 16px 복원 */
  .mypoint strong { font-size: 16px !important; }


  /* ── [2-1] 헤더 — GNB/검색 숨김, 햄버거 표시 ── */
  .nav-bar, #sch, .user-control-group { display: none; }
  #slide-btn         { display: flex; }
  .logo-search-group { margin-right: 0; }


  /* ── [2-2] 메인 히어로 / 카드 그리드 ──
     h2.hero-title: clamp(18px, 5.5vw, 30px)
       327px → 18px / 545px → 30px 선형 보간
       최솟값 18px ≥ 10px ✓ */
  .hero-banner     { padding: 40px 20px 32px; min-height: 240px; }
  h2.hero-title    { font-size: clamp(18px, 5.5vw, 30px); }
  .hero-subtitle   { font-size: 12px; }
  .content-wrapper { padding: 0 5px 40px; }
  .grid-row-1,
  .grid-row-2      { grid-template-columns: 1fr; }


  /* ── [2-3] 서브 페이지 배너 / LNB탭 / 브레드크럼 ──
     .sub-tit2 h3: layout.css clamp(22px,2.6vw,34px) 유지 → 별도 오버라이드 불필요 */
  .sub-tit2 {
    min-height: 120px; padding: 28px 16px 24px;
    margin-left: 0; margin-right: 0; width: 100%; border-radius: 0;
  }
  #sub > #content { padding-left: 10px; padding-right: 10px; max-width: 100%; }
  /* LNB 탭 */
  .sub-tab          { padding-left: 8px; padding-right: 8px; border-radius: 0; gap: 5px; }
  .sub-tab li a     { padding: 6px 10px; font-size: 12px !important; }
  /* 브레드크럼 */
  #navi             { padding-left: 5px; padding-right: 5px; }
  /* 서브 콘텐츠 좌우 5px */
  #sub > #content > *:not(.sub-tab):not(#lnb):not(#navi) {
    padding-left: 5px; padding-right: 5px;
  }


  /* ── [2-4] 미드 배너 — 화면 꽉 채움 ── */
  #mid-bn { margin-left: 0; margin-right: 0; border-left: none; border-right: none; height: 58px; }
  #mid-bn::before          { display: none; }
  #mid-bn .bn-track        { padding-left: 14px; height: 58px; }
  #mid-bn ul li a.link     { min-height: 40px; height: 40px; padding: 6px 12px; }
  #mid-bn ul li a.link img { height: 22px; }


  /* ── [2-5] 푸터 — 화면 꽉, 세로 정렬 ──
     글꼴: 변경 없음 (11~12px, layout.css 유지) */
  .main-footer         { padding: 24px 12px 20px; border-left: none; border-right: none; }
  #fnb                 { flex-direction: column; gap: 10px; }
  #fnb li + li::before { display: none; }
  .fnb-txt address     { flex-direction: column; gap: 6px; text-align: center; }
  .fnb-txt address hr  { display: none; }


  /* ── [2-6] 가이드 콘텐츠 (#gui-content) ──
     h2.sub-tit: clamp(13px, 3.8vw, 16px)
       342px → 13px / 421px → 16px, 최솟값 13px ≥ 10px ✓
     h2.ctit2: 14px (중형 소제목, 제목류라 [2-0] 상한 제외)
     span.ctxt2: 12px ([2-0] 상한 적용) */
  h2.sub-tit   { font-size: clamp(13px, 3.8vw, 16px); padding: 18px 0 16px; }
  h2.ctit2     { font-size: 14px; margin-top: 26px; }
  span.ctxt2   { font-size: 12px !important; }
  .gui-warbox  { padding: 14px 14px 14px 42px; }
  .gui-linkbox { flex-direction: column; align-items: flex-start; gap: 10px; }


  /* ── [2-7] 약관 스크롤박스 ──
     #policy-agree-box > h4: clamp(15px, 4.2vw, 18px)
       357px → 15px / 429px → 18px, 최솟값 15px ≥ 10px ✓
     .agreebox 본문: 12px ([2-0] 상한 적용)
     .agreebox h4.ctit2: 14px (제목류 제외) */
  #policy-agree-box         { padding-bottom: 40px; }
  #policy-agree-box > h4    { font-size: clamp(15px, 4.2vw, 18px); padding: 20px 0 18px; }
  .agreebox {
    padding: 22px 5px 22px 12px; font-size: 12px;
    border-radius: 10px; height: calc(100vh - var(--header-h) - 180px); min-height: 260px;
  }
  .agreebox h4.ctit2        { font-size: 14px; margin-top: 28px; padding: 8px 10px; }


  /* ── [2-8] 알림·메시지 공통 ──
     #sub-tit h2: clamp(16px, 4.5vw, 20px) — 제목류 제외
     .mypoint: 12px / .mypoint strong: 16px (복원, [2-0]에서 재선언)
     .message-tabs a: 12px / 검색·버튼류: 12px */
  #sub-tit        { margin-top: 24px; margin-bottom: 16px; }
  #sub-tit h2     { font-size: clamp(16px, 4.5vw, 20px); padding-bottom: 12px; }
  .mypoint        { padding: 11px 14px; font-size: 12px !important; border-radius: 0 8px 8px 0; margin-bottom: 16px; }
  .mypoint strong { font-size: 16px !important; }
  .message-tabs   { margin-bottom: 16px; }
  .message-tabs a { padding: 0 16px; height: 42px; font-size: 12px !important; flex: 1; justify-content: center; }
  /* 검색 컨트롤 */
  .list-head               { justify-content: flex-start; gap: 5px; flex-wrap: wrap; }
  .list-head select        { max-width: 120px; font-size: 12px !important; }
  .list-head .inp.keyword,
  .list-head input.keyword { width: 130px; font-size: 12px !important; }
  .list-head .submit,
  .list-head button[type="submit"] { padding: 0 12px; font-size: 12px !important; height: 38px; }
  .reset-btn               { width: 30px; height: 30px; font-size: 14px; }  /* 아이콘 — 크기 유지 */
  /* 공통 버튼 */
  .btn1, .btn2, .btn3 { font-size: 12px !important; padding: 8px 14px; }
  .btn-wrap           { margin-top: 12px; margin-bottom: 40px; }
  /* 아티클 탭 */
  .article-tab        { margin-bottom: 14px; }
  .article-tab > li a { padding: 0 16px; font-size: 12px !important; line-height: 40px; }


  /* ── [2-9] 목록 테이블 → 카드 스택 ──
     tbody td (본문): 12px / td:nth-child(2) 출처뱃지: 11px
     td:last-child 날짜: 11px / td.no 번호: 10px (최솟값) */
  table.listtbl,
  table.listtbl thead,
  table.listtbl tbody,
  table.listtbl tr,
  table.listtbl th,
  table.listtbl td { display: block; width: 100%; box-sizing: border-box; }
  table.listtbl    { border: none !important; border-radius: 0; margin-bottom: 36px; }
  table.listtbl thead { display: none; }
  /* 각 행 → 카드 */
  table.listtbl tbody tr {
    background: var(--bg-card) !important; border: 1px solid var(--border) !important;
    border-radius: 10px; margin-bottom: 8px; padding: 12px 12px 10px; position: relative;
  }
  table.listtbl tbody tr:hover { background: var(--bg-card-hover) !important; border-color: var(--border-bright) !important; }
  /* 셀 공통 — 본문 12px */
  table.listtbl tbody td { text-align: left !important; padding: 3px 0; border: none !important; background: transparent !important; font-size: 12px !important; }
  /* No. — 우상단 고정, 극소 10px */
  table.listtbl tbody td.no { position: absolute; top: 12px; right: 12px; font-size: 10px !important; color: var(--text-dim) !important; padding: 0; width: auto; }
  /* 출처 뱃지 — 극소 11px */
  table.listtbl tbody td:nth-child(2) {
    display: inline-flex !important; width: auto !important;
    background: rgba(0,200,255,0.08) !important; border: 1px solid rgba(0,200,255,0.2) !important;
    border-radius: 100px; padding: 2px 10px !important; font-size: 11px !important;
    color: var(--accent-cyan) !important; margin-bottom: 6px; margin-right: 6px; white-space: nowrap;
  }
  /* 내용 — 본문 12px */
  table.listtbl tbody td.tal   { padding: 4px 0 5px; }
  table.listtbl tbody td.tal a { font-size: 12px !important; line-height: 1.6; }
  /* 날짜 — 극소 11px */
  table.listtbl tbody td:last-child {
    font-size: 11px !important; color: var(--text-dim) !important;
    padding-top: 6px; border-top: 1px solid var(--border) !important; margin-top: 4px;
  }
  table.listtbl tbody td:last-child::before { content: '🕐 '; opacity: 0.45; font-size: 10px; display: contents; }
  /* #sub 내 배경 충돌 보정 */
  #sub table.listtbl tbody tr       { background-color: var(--bg-card) !important; }
  #sub table.listtbl tbody tr:hover { background-color: var(--bg-card-hover) !important; }
  /* 데이터 없음 */
  table.listtbl tbody td[colspan] { border-radius: 10px; border: 1px solid var(--border) !important; background: var(--bg-card) !important; padding: 32px 14px; }


  /* ── [2-10] 페이징 — 극소 11px ── */
  .paging, .pagingbox { gap: 3px; margin-bottom: 36px; }
  .paging a, .pagingbox a,
  .paging span, .pagingbox span { min-width: 30px; height: 30px; font-size: 11px !important; padding: 0 5px; }


  /* ── [2-11] 메시지 발송 팝업 ──
     팝업 제목: 12px / th·td·input: 12px */
  #message-send { position: fixed !important; right: 4% !important; width: 92% !important; height: 60% !important; max-height: 74vh; overflow-y: auto; }
  #message-send .tit          { height: 48px; padding: 0 14px; }
  #message-send .tit h2       { font-size: 12px !important; }
  #message-send .tit .close   { width: 30px; height: 30px; font-size: 17px; }  /* 아이콘 */
  #message-send .cont         { padding: 14px; }
  #message-send .tbl colgroup { display: none; }
  #message-send .tbl tbody th { font-size: 12px !important; width: 50px; padding: 7px 8px; }
  #message-send .tbl tbody td { font-size: 12px !important; padding: 7px 8px; }
  #message-send .tbl tbody td input,
  #message-send .tbl tbody td textarea { font-size: 12px !important; padding: 7px 10px; }
  #message-send .btn-area     { padding: 10px 14px; gap: 6px; }
  /* 메시지 히스토리 */
  .msg-history li { padding: 10px 12px; font-size: 12px !important; }


  /* ── [2-12] 마이페이지 — 카드 4열→2열 ──
     ul.mypagebox strong: clamp(18px, 5.5vw, 24px) — 수치 강조, 제목류에 준해 제외
     a.btn2: 11px / .tblform h5: 14px (소제목)
     table.table_wrt th: 11px / td: 12px */
  ul.mypagebox { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 28px; }
  ul.mypagebox > li                    { padding: 18px 16px 16px; }
  ul.mypagebox > li span.txt strong    { font-size: clamp(18px, 5.5vw, 24px) !important; }
  ul.mypagebox > li a.btn2             { font-size: 11px !important; padding: 5px 10px; }
  /* tblform */
  .tblform    { margin-bottom: 40px; }
  .tblform h5 { font-size: 14px; padding: 8px 12px; }
  /* 정보 테이블 → 세로 스택 */
  table.table_wrt,
  table.table_wrt tbody,
  table.table_wrt tr,
  table.table_wrt th,
  table.table_wrt td { display: block; width: 100%; box-sizing: border-box; }
  table.table_wrt    { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
  table.table_wrt tbody tr             { border-bottom: 1px solid var(--border); padding: 0; }
  table.table_wrt tbody tr:last-child  { border-bottom: none; }
  /* th — 상단 작은 라벨, 극소 11px */
  table.table_wrt tbody th { padding: 10px 14px 4px; font-size: 11px !important; border-right: none; border-bottom: none; background: rgba(0,200,255,0.03) !important; letter-spacing: 0.5px; }
  /* td — 하단 값, 본문 12px */
  table.table_wrt tbody td { padding: 4px 14px 12px; font-size: 12px !important; }

} /* END @media 900px */


/* ════════════════════════════════════
   [3] @media max-width: 540px
   ─────────────────────────────────
   로그인 폼 모바일
   #signin h4: clamp(16px, 5vw, 18px)
     320px → 16px / 360px → 18px, 최솟값 16px ≥ 10px ✓
   .snsbox ul li a: 12px / .inp-wrap .inp: 12px
   .inp-wrap button.btn1: 13px (상한 반영)
════════════════════════════════════ */
@media (max-width: 540px) {

  #signin      { padding: 32px 16px 60px; }
  #signin form { padding: 32px 24px 28px; border-radius: 16px; }
  #signin h4   { font-size: clamp(16px, 5vw, 18px); }
  /* SNS 박스 */
  .snsbox         { padding: 14px 16px; }
  .snsbox ul li a { font-size: 12px !important; padding: 10px 14px; }
  /* 입력창 */
  .inp-wrap .inp  { height: 44px; font-size: 12px !important; }
  /* 로그인 버튼 */
  .inp-wrap .btn1.w100p,
  .inp-wrap button.btn1 { height: 46px; font-size: 12px !important; }
/* 부모 컨테이너 설정 */
.tar.mb15 {
    display: flex !important;
    flex-wrap: wrap;         /* 자식 요소가 넘치면 다음 줄로 이동 */
    justify-content: center; /* 가로 중앙 정렬 */
    align-items: center;     /* 세로축 중앙 정렬 */
    gap: 8px 15px;           /* 가로 간격 15px, 줄 사이 간격 8px (조절 가능) */
    text-align: center;
}
/* 체크박스 정렬 보정 */
#save_1380_0 {
    margin: 0;
    cursor: pointer;
}

/* 라벨 정렬 보정 */
.added_labelCustom {
    display: flex;
    align-items: center;
    cursor: pointer;
    /* label이 너무 길어지지 않게 설정 (필요 시) */
}
/* 로그인 정보 분실 링크를 다음 줄로 강제 이동 */
.forgot {
    display: block;          /* 블록 요소화 */
    flex-basis: 100%;        /* 부모 너비의 100%를 차지하여 줄바꿈 유도 */
    margin-top: 10px;        /* 위 요소와의 간격 확보 */
    text-align: center;      /* 텍스트 중앙 정렬 */
    text-decoration: none;   /* 밑줄 제거 등 스타일링 */
}

} /* END @media 540px */


/* ════════════════════════════════════
   [4] @media max-width: 480px
   ─────────────────────────────────
   소형 모바일 추가 조정
   글꼴 기준 (한 단계씩 축소):
     본문 12px → 12px (이미 상한, 유지)
     보조 12px → 11px
     극소 11px → 10px (이 이하 절대 금지)
   ─────────────────────────────────
   ★ 제목류는 clamp 최솟값에서 자동 멈춤
     → 별도 재선언 불필요
════════════════════════════════════ */
@media (max-width: 480px) {

  /* 헤더 높이 축소 */
  :root { --header-h: 56px; }

  /* ── 헤더 ── */
  h1.logo-text { font-size: 16px; }    /* 가독성 위해 16px 유지 */

  /* ── 컨테이너 ── */
  .inner, .container { padding: 0 5px; }
  .info-card         { padding: 16px 5px; }

  /* ── 서브 배너 / 푸터 ── */
  .sub-tit2    { padding: 22px 10px 20px; }
  .main-footer { padding: 20px 8px; }

  /* ── 가이드 콘텐츠 ──
     h2.sub-tit: clamp 최솟값 13px 자동 적용 (재선언 불필요)
     .gui-linkbox a: 보조→극소 11px */
  #gui-content > .inner { padding-top: 4px; }
  .gui-linkbox a        { font-size: 11px !important; }

  /* ── 약관 ──
     .agreebox h4.ctit2: 14px → 13px (소제목) */
  .agreebox {
    padding: 18px 4px 18px 10px;
    border-radius: 8px;
    height: calc(100vh - var(--header-h) - 160px);
  }
  .agreebox h4.ctit2 { font-size: 13px; }

  /* ── 알림·메시지 ──
     .mypoint: 12px → 11px / .mypoint strong: 16px 유지
     .message-tabs a: 12px 유지 (이미 상한)
     검색·입력: 12px → 11px / .btn: 12px → 11px
     tbody td: 12px 유지 (이미 상한) */
  .mypoint                    { font-size: 11px !important; }
  .mypoint strong             { font-size: 14px !important; }   /* 480px에서는 14px로 축소 */
  .message-tabs a             { font-size: 12px !important; padding: 0 10px; }
  .list-head                  { gap: 4px; }
  .list-head select           { max-width: 100px; font-size: 11px !important; }
  .list-head .inp.keyword,
  .list-head input.keyword    { width: 110px; font-size: 11px !important; }
  .btn .btn1, .btn2, .btn3         { font-size: 16px !important; padding: 7px 12px; }

    /* ── 하단 고정 버튼 ── */
    .btn .btn1, .btn2, .btn3  {
        bottom: 0; left: 0; right: 0; width: 100% !important;
        z-index: 200; background: rgba(5,8,16,0.96) !important;
        border-top: 1px solid rgba(0,200,255,0.25); padding: 8px 0;
        display: flex !important; align-items: center; justify-content: center;
        backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 -4px 20px rgba(0,0,0,0.5); box-sizing: border-box;
    }
    .btn .btn1, .btn2, .btn3  > a, .btn .btn1, .btn2, .btn3  > button,
    .btn .btn1, .btn2, .btn3  input[type="submit"], .btn .btn1, .btn2, .btn3  input[type="button"],
    .btn .btn1, .btn2, .btn3  .btn4 {
        display: inline-flex !important; align-items: center; justify-content: center;
        width: 100% !important; padding: 14px 0;
        background: linear-gradient(135deg, var(--accent-cyan), #0055dd) !important;
        color: #fff !important; border: none !important; border-radius: 8px;
        font-weight: 700; font-family: var(--font-body);
        cursor: pointer; box-shadow: none;
        text-decoration: none; white-space: nowrap; min-height: 48px; letter-spacing: 0.5px;
    }
    .btn .btn1, .btn2, .btn3  > a:active, .btn .btn1, .btn2, .btn3  > button:active,
    .btn .btn1, .btn2, .btn3  .btn4:active { opacity: 0.85; }

  /* ── 마이페이지 — 카드 2열→1열 ──
     strong: clamp 최솟값 18px 자동 적용 (재선언 불필요) */
  ul.mypagebox      { grid-template-columns: 1fr; gap: 10px; }
  ul.mypagebox > li { padding: 16px 14px 14px; }

    /* 회사 정보 + 저작권 */
    .fnb-txt { display: flex; flex-direction: column; align-items: center; gap: 10px; }
    .fnb-txt address {
      font-family: var(--font-display); font-size: 11px; color: var(--text-dim); line-height: 1; letter-spacing: .3px;
      display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    }

    .fnb-txt span {
      font-family: var(--font-display); font-size: 12px; color: var(--text-dim); line-height: 1; letter-spacing: .3px;
      display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    }
} /* END @media 480px */