/* ============================
   공통 변수 정의
============================ */
:root {
  /* 컬러 */
  --color-primary: #d62828;
  --color-primary-dark: #b71b1b;
  --color-accent: #1d68e0;
  --color-blue: #0078ff;
  --color-gray-dark: #333;
  --color-gray: #666;
  --color-gray-light: #999;
  --color-border: #ccc;
  --color-border-light: #e1e1e1;
  --color-bg-light: #f4f4f4;
  --color-bg-lighter: #fafafa;
  --color-white: #fff;
  --color-black: #000;
  --color-warning: red;

  /* 폰트 크기 */
  --font-xs: 13px;
  --font-sm: 14px;
  --font-base: 16px;
  --font-md: 18px;
  --font-lg: 20px;
  --font-xl: 22px;
  --font-xxl: 25px;

  /* 폰트 굵기 */
  --font-regular: 400;
  --font-bold: 700;

  /* 여백 */
  --space-xs: 5px;
  --space-sm: 10px;
  --space-md: 20px;
  --space-lg: 30px;
  --space-xl: 40px;

  /* 테두리 */
  --border-radius: 8px;

  /* 경매리스트 */
  --brand: #0b72e7;
  --ink: #111; /* gray-800 */
  --muted: #111; /* gray-500 */
  --bg: #f9fafb; /* gray-50 */
  --panel: #f3f4f6; /* gray-100 */
  --border: #dee2e6; /* gray-200 */
  --accent: #e8f1ff; /* brand-50 */
  --radius: 12px;
}

/* ============================
   기본 레이아웃 및 스타일
============================ */
.wing-right { display:none; }


/* ============================
   경매 리스트 스타일 (Scoped)
   - 한 곳에서 폰트/라인 높이 제어: --fs-base, --lh-base
   - 모든 텍스트 요소는 동일 폰트 크기 적용
   - 모바일(≤760px) 카드 전환 + 넘침 방지
============================ */

/* ---- Typography Vars ---- */
#main-auction {
  --fs-base: 16px;
  --lh-base: 1.65;
}

/* ---- Global (필요 최소) ---- */
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---- Base Text: 크기/줄간격 통일 ---- */
#main-auction h1,
#main-auction h2,
#main-auction h3,
#main-auction h4,
#main-auction h5,
#main-auction h6,
#main-auction p,
#main-auction li,
#main-auction dt,
#main-auction dd,
#main-auction .section-title h2,
#main-auction table.auction-table th,
#main-auction table.auction-table td,
#main-auction .photo-title,
#main-auction .photo-desc{
  font-size:var(--fs-base);
  line-height:var(--lh-base);
}

/* ---- Layout Shell ---- */
#main-auction .wrap{ margin:0 auto; padding:0; }

/* ---------- Section Headings ---------- */
#main-auction .section-title{
  display:flex; align-items:baseline; gap:.5rem; margin:40px 0 16px;
}
#main-auction .section-title h2{
  margin:0; font-weight:800; letter-spacing:-.3px; /* 필요 시만 크기 조정: 현재는 --fs-base */
}
#main-auction .section-title .tag{ color:var(--brand); font-weight:800; }

/* ---------- Notice Box ---------- */
#main-auction .notice-box{
  background:#f5f7fb; border-radius:var(--radius); padding:18px 20px; position:relative;
}
#main-auction .notice-list{ margin:0; padding:0; color:var(--ink); line-height:1.65; }
#main-auction .notice-list li{ position:relative; margin:6px 0; padding-left:16px; }
#main-auction .notice-list b{ font-weight:800; }
#main-auction .notice-list li::before{
  content:'·'; position:absolute; left:0; top:.15em; font-size:18px; line-height:1; color:var(--ink);
}

/* ---------- Status Intro ---------- */
#main-auction .status-intro{ margin:6px 0 30px; color:var(--muted); line-height:1.6; }
#main-auction .status-intro b{ color:var(--ink); font-weight:800; }

/* ---------- Table (Desktop) ---------- */
#main-auction .table-wrap{ overflow-x:auto; }
#main-auction table.auction-table{
  width:100%; border-collapse:separate; border-spacing:0; /*min-width:780px;*/
  border-bottom:1px solid var(--border); border-top:2px solid #0065d7; border-radius:0; overflow:hidden;
}
#main-auction .auction-table thead th{
  text-align:center; letter-spacing:-.2px; padding:14px 16px; border-bottom:1px solid var(--border); white-space:nowrap; font-weight:700;
}
#main-auction .auction-table tbody tr + tr td{ border-top:1px solid var(--border); }
#main-auction .auction-table tbody td{ padding:16px; vertical-align:top; }

#main-auction .auction-table tbody td[data-label="경매번호"],
#main-auction .auction-table tbody td[data-label="경매시작일자"],
#main-auction .auction-table tbody td[data-label="경매종료일자"],
#main-auction .auction-table tbody td[data-label="비고"]{
  vertical-align:middle; text-align:center;
}

/* ---------- Product (thumb + info) ---------- */
#main-auction .product { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
#main-auction .thumb {
  position: relative;
  flex: 0 0 140px;
  background: var(--panel);
  border: 1px solid var(--border);
  overflow: hidden;
}
/* 폴백 비율박스(4:3) */
#main-auction .thumb::before { content: ""; display: block; padding-top: 75%; }
#main-auction .thumb > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* 지원 브라우저에서는 aspect-ratio 사용 */
@supports (aspect-ratio: 1 / 1) {
  #main-auction .thumb { aspect-ratio: 4 / 3; }
  #main-auction .thumb::before { content: none; padding-top: 0; }
}
#main-auction .info-dl{ display:grid; grid-template-columns:45px 1fr; gap:0px 14px; margin:0; }
#main-auction .info-dl dt{ color:var(--muted); }
#main-auction .info-dl dd{ margin:0; }

/* ---------- Badge ---------- */
#main-auction .badge{
  display:inline-block; padding:4px 10px; border-radius:999px;
  background:var(--accent); color:var(--brand); font-weight:700; font-size:12px;
}

/* ---------- Responsive (≤760px): Card Layout ---------- */
@media (max-width:760px){
  #main-auction main .container {
	margin: 0px auto;
	padding: 0 10px;
  }
  #main-auction .wrap{ margin:24px auto; }
  #main-auction .table-wrap{ overflow:visible; }

  #main-auction table.auction-table,
  #main-auction .auction-table thead,
  #main-auction .auction-table tbody,
  #main-auction .auction-table th,
  #main-auction .auction-table td,
  #main-auction .auction-table tr{ display:block; }

  #main-auction .auction-table{ min-width:0; border:none; }
  #main-auction .auction-table thead{ display:none; }

  #main-auction .auction-table tbody tr{
    border:1px solid var(--border); /*border-radius:12px;*/ padding:12px; margin-bottom:12px;
    background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.02);
  }

  #main-auction .auction-table tbody td{
    border:none; padding:10px 4px; position:relative;
    word-break:keep-all;          /* 한글 단어 보존 */
    overflow-wrap:anywhere;       /* 영문/URL 강제 개행 */
  }

  #main-auction .auction-table tbody td[data-label]::before{
    content:attr(data-label);
    display:block; margin-bottom:4px; color:var(--muted); font-weight:600;
    font-size:var(--fs-base); line-height:var(--lh-base);
  }

  #main-auction .thumb { width: 100%; max-width: 100%; }
  /* 폴백 비율박스(16:9) */
  #main-auction .thumb::before { padding-top: 56.25%; }
  /* 지원 브라우저는 aspect-ratio 사용 */
  @supports (aspect-ratio: 1 / 1) {
    #main-auction .thumb { aspect-ratio: 16 / 9; }
    #main-auction .thumb::before { content: none; padding-top: 0; }
  }
  #main-auction .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

  #main-auction .info-dl{ grid-template-columns:50px 1fr; }
  #main-auction .info-dl dt, 
  #main-auction .info-dl dd{ word-break:keep-all; overflow-wrap:anywhere; }

  /* 카드 모드에서는 특정 컬럼 좌측 정렬 권장 */
  #main-auction .auction-table tbody td[data-label="경매번호"],
  #main-auction .auction-table tbody td[data-label="경매시작일자"],
  #main-auction .auction-table tbody td[data-label="경매종료일자"],
  #main-auction .auction-table tbody td[data-label="비고"]{ text-align:left; }

 /* 1) 데이터 라벨(“제품정보”) 숨김 – 카드 헤더가 중복되어 시각적 잡음 제거 */
  #main-auction .auction-table tbody td[data-label="제품정보"]::before { display: none; }

  /* 2) 이미지 먼저, 정보는 아래로: 강제 블록 스택 + 안전한 폭 */
  #main-auction .auction-table tbody td[data-label="제품정보"] .product {
    display: block !important;
    min-width: 0;
  }

  /* 3) 썸네일: 전체폭 16:9 + 넘침 방지 */
  #main-auction .auction-table tbody td[data-label="제품정보"] .thumb {
    width: 100%;
    max-width: 100%;
    margin: 0 0 10px;
    overflow: hidden;
    position: relative;
  }
  /* 폴백 비율박스(16:9) – aspect-ratio 미지원 브라우저 대응 */
  #main-auction .auction-table tbody td[data-label="제품정보"] .thumb::before {
    content: ""; display: block; padding-top: 56.25%;
  }
  #main-auction .auction-table tbody td[data-label="제품정보"] .thumb > img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
  }
  /* 지원 브라우저에서는 aspect-ratio 사용 */
  @supports (aspect-ratio: 1 / 1) {
    #main-auction .auction-table tbody td[data-label="제품정보"] .thumb {
      aspect-ratio: 16 / 9;
    }
    #main-auction .auction-table tbody td[data-label="제품정보"] .thumb::before { content: none; }
  }

  /* 4) 정보 목록(제품명~즉구가): 2열 그리드, 라벨 폭 확보 */
  #main-auction .auction-table tbody td[data-label="제품정보"] .info-dl {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 8px 14px;
    margin: 0;
  }
  #main-auction .auction-table tbody td[data-label="제품정보"] .info-dl dt,
  #main-auction .auction-table tbody td[data-label="제품정보"] .info-dl dd {
    word-break: keep-all;
    overflow-wrap: anywhere;
    margin: 0;
  }
}

/* ---------- Utilities ---------- */
#main-auction .mt-0{ margin-top:0; }
#main-auction .mb-0{ margin-bottom:0; }
#main-auction .sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

#main-auction .pagination{ margin:20px auto; justify-content:center; }


/* ============================
   경매 상세 스타일
============================ */
#machine-detail {
  margin: 0 auto;
  padding: var(--space-lg) var(--space-sm);
  border-top: 2px solid var(--color-primary);
  color: var(--color-gray-dark);
}

#machine-detail .detail-top {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

#machine-detail .detail-gallery {
  flex: 1;
  min-width: 380px;
}

#machine-detail .detail-gallery .main-img {
  width: 100%;
  height: auto;
  max-width: 578px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-light);
}

#machine-detail .sub-imgs {
  margin-top: var(--space-sm);
  display: flex;
  gap: var(--space-sm);
}

#machine-detail .sub-imgs img {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border: 1px solid var(--color-border);
}

#machine-detail .detail-info {
  flex: 1;
  min-width: 360px;
  font-size: var(--font-base);
  color: var(--color-black);
}

#machine-detail .detail-info h2 {
  font-size: var(--font-xxl);
  margin-bottom: var(--space-sm);
  font-weight: var(--font-bold);
}

/* 반응형 설정 
@media screen and (max-width: 991px) {
  #machine-detail .detail-top {
    flex-direction: column;
  }
  #machine-detail .detail-gallery,
  #machine-detail .detail-info {
    width: 100%;
    min-width: 0;
  }
}

@media screen and (max-width: 640px) {
  #machine-detail .sub-imgs img {
    width: 56px;
    height: 56px;
  }
  #machine-detail .btn {
    font-size: var(--font-sm);
    height: 48px;
  }
  #machine-detail .detail-content .content-body {
    padding: var(--space-md);
  }
  #bid-modal .modal-content {
    width: 90%;
    margin: 50px auto;
  }
}*/

/* 이하 동일 (기존 내용 유지) */
#machine-detail .info-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-md);
}

#machine-detail .info-table th {
  text-align: left;
  width: 130px;
  padding: var(--space-xs) 0;
  font-weight: var(--font-bold);
}

#machine-detail .info-table td {
  padding: var(--space-xs) 0;
  font-weight: var(--font-regular);
  word-break: keep-all;
}

#machine-detail .info-table .red {
  color: var(--color-primary);
  font-weight: var(--font-bold);
}

#machine-detail .bid-info {
  margin: var(--space-lg) 0;
  padding: var(--space-lg) 0;
  border-top: 2px solid var(--color-border-light);
  border-bottom: 2px solid var(--color-border-light);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  font-size: var(--font-sm);
}

#machine-detail .bid-info .cell {
  display: grid;
  grid-template-columns: 70px auto;
  row-gap: var(--space-sm);
  column-gap: var(--space-sm);
  align-items: center;
  padding-right: var(--space-sm);
}

#machine-detail .bid-info .cell + .cell {
  padding-left: var(--space-md);
  border-left: 1px solid #ddd;
}

#machine-detail .bid-info .label {
  font-weight: var(--font-bold);
  color: var(--color-black);
}

#machine-detail .bid-info .value {
  color: var(--color-gray);
  white-space: nowrap;
}

#machine-detail .bid-info .highlight {
  color: var(--color-primary);
  font-weight: var(--font-bold);
}

#machine-detail .bid-price {
  margin-top: var(--space-sm);
  font-size: var(--font-base);
}

#machine-detail .bid-price p {
  margin: var(--space-xs) 0;
  color: var(--color-gray-light);
}

#machine-detail .bid-price p strong {
  padding-right: var(--space-md);
  font-weight: var(--font-bold);
  color: var(--color-black);
}

#machine-detail .bid-price .price {
  color: var(--color-black);
  font-weight: var(--font-bold);
}

#machine-detail .bid-price .note {
  display: block;
  margin-top: var(--space-xs);
  color: var(--color-gray);
  font-size: var(--font-sm);
}

#machine-detail .action-buttons {
  margin-top: var(--space-lg);
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

#machine-detail .btn {
  flex: 1;
  height: 55px;
  font-size: var(--font-base);
  cursor: pointer;
  border-radius: 5px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

#machine-detail .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#machine-detail .btn:active {
  transform: scale(0.96);
  box-shadow: none;
}

#machine-detail .btn.red {
  background-color: var(--color-primary);
  color: var(--color-white);
}

#machine-detail .btn.red:hover {
  background-color: var(--color-primary-dark);
}

#machine-detail .btn.outline {
  background-color: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-black);
}

#machine-detail .btn.outline:hover {
  background-color: var(--color-bg-lighter);
  color: var(--color-primary);
  border-color: var(--color-primary-dark);
}

#machine-detail .btn.outline:active {
  background-color: #e6e6e6;
}

#machine-detail .detail-content {
  margin-top: var(--space-xl);
}

#machine-detail .btn.black {
  background-color: #444;
  color: #fff;
  cursor: not-allowed;
  border: none;
  opacity: 0.7;
}

#machine-detail .btn.black:hover {
  background-color: #444;
  box-shadow: none;
  transform: none;
}


#machine-detail .detail-content h3 {
  margin-bottom: var(--space-sm);
  height: 50px;
  border-top: 2px solid #1b1b1b;
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-bg-lighter);
  font-size: var(--font-md);
  font-weight: 500;
  text-align: center;
  line-height: 2.5;
}

#machine-detail .detail-content .content-body {
  padding: var(--space-lg);
}

#machine-detail .detail-content img {
  width: 100%;
  max-width: 1000px;
  height: auto;
  border: 1px solid var(--color-border);
}

@media screen and (max-width: 640px) {
  .nt-body > .nt-container {
    padding: 30px 10px;
  }
  #machine-detail {
    padding: 30px 10px;
  }
  #machine-detail .detail-gallery {
    min-width: 100%;
  }
  #machine-detail .detail-gallery .main-img {
    max-width: 100%;
  }
  #machine-detail .detail-content .content-body {
    padding: 35px 10px;
  }
  #machine-detail .detail-info h2 {
    font-size: 19px;
  }
}

/* =====================
Detail: Photo + Description List
====================== */
#machine-detail .detail-content .photo-figure img { border:0px; }
.photo-list { display: grid; gap: 28px; margin: 40px 0 60px; }
.photo-row { display: grid; grid-template-columns: 250px 1fr; gap: 0px; align-items: center; }
.photo-figure { width: 100%; aspect-ratio: 1/1; background: var(--panel); /*border: 1px solid var(--border); border-radius: 10px;*/ overflow: hidden; }
.photo-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-text { display:flex; flex-direction:column; justify-content:center; line-height: 1.75; padding-left:20px; }
.photo-title { margin: 4px 0 10px; font-weight: 800; font-size:18px; }
.photo-desc { margin: 0; white-space: pre-line; font-size:16px; }

/* 모바일 */
@media (max-width: 760px) {
  .photo-row {
    grid-template-columns: 1fr;   /* 1열 전환 */
    gap: 12px;
    align-items: start;
  }
  .photo-text { padding-left: 0; }
  .photo-title { margin-top: 8px; }
}